Dreamweaver: May 2020

Saturday, May 30, 2020

< track > tag - example

A <track> is used as a child of an audio

<video width="640" height="480" src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4" controls> <track kind="subtitles" src="subtitles_de.vtt" srclang="de"> <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> <track kind="subtitles" src="subtitles_ja.vtt" srclang="ja"> Sorry, your browser doesn't support HTML5 <code>video</code>, but you can download this video from the <a href="https://archive.org/details/Popeye_forPresident" target="_blank">Internet Archive</a>. </video>

SOURCE:
https://html.com/tags/track/

Wednesday, May 27, 2020

DEMO REEL

a demo reel I created recently in After Effects highlighting my skills in the software applications that I primarily work in

Linting

analyzes source code in a particular programming language and flag potential problems like syntax errors, deviations from a prescribed coding style or using constructs known to be unsafe.

SOURCE:

https://stackoverflow.com/questions/8503559/what-is-linting

Table - HTML Tags

SOURCE:
https://its.temple.edu/creating-tables-html

<TABLE BORDER="5" WIDTH="50%" CELLPADDING="4" CELLSPACING="3">
<TR>
<TH COLSPAN="2"><BR><H3>TABLE TITLE</H3>
</TH>
</TR>
<TR>
<TH>Column A</TH>
<TH>Column B</TH>
</TR>
<TR ALIGN="CENTER">
<TD>Data 1</TD>
<TD>Data 2</TD>
</TR>
</TABLE>

HTML tags

<table border= - listing the size table's border, cell padding, and cell spacing
<tr> - table tag
<th> - table header
<TH COLSPAN> - amount of space

SOURCE:
https://its.temple.edu/creating-tables-html

valid attributes of < textarea > element

max
from
spellcheck

What is the difference between post and get methods?

With get, data is included in the form body when send to the server. With post, the data goes through the URL

When should you use < ol > ?

Use <ol> when you have a list of items in which the order of the items matters.

< track > tags (Definition)

The Track Tag is used for specifying subtitles, captions, and other types of time-based text. It is typically applied as a child of the and tag

Examples:

< header > and < footer > tags usually start

as children of <body>, <article>, <aside>, <nav>, and <section> tags

Which tags are the < source > element associated?

<picture>, <audio>, and <video>

What is the difference between post and get methods?

With get, data is included in the form body when send to the server. With post, the data goes through the URL
HTTP's purpose is to enable communications between clients and servers

EXAMPLE:

Image Source:

https://www.tutorialexample.com/a-simple-way-to-get-file-extension-in-php-php-tutorial/

GET

/test/demo_form.php?name1=value1&name2=value2

Notes

GET requests can be cached

GET requests remain in the browser history

GET requests can be bookmarked

GET requests should never be used when dealing with sensitive data

GET requests have length restrictions

GET requests are only used to request data (not modify)

The GET method is used to retrieve information from the given server using a given URI. Requests using GET should only retrieve data and should have no other effect on the data.

POST

POST /test/demo_form.php HTTP/1.1

Host: w3schools.com

name1=value1&name2=value2

Notes

POST requests are never cached

POST requests do not remain in the browser history

POST requests cannot be bookmarked

POST requests have no restrictions on data length

A POST request is used to send data to the server, for example, customer information, file upload, etc. using HTML forms.

HTTP Methods

GET
POST
PUT
HEAD
DELETE
PATCH
OPTIONS

The two most common HTTP methods are: GET and POST.

SOURCES:

https://www.w3schools.com/tags/ref_httpmethods.asp

https://www.tutorialspoint.com/http/http_requests.htm

Friday, May 22, 2020

Wednesday, May 20, 2020

aligning in a flex container

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

CSS is generic by default

CSS is generic by default, meaning that all css will be applied to all elements unless you give your divs a class

Fundamentals: Properties Window

the properties window tells you what code is not working
essential for figuring out why a string of code is not working in Dreamweaver

div ID = menu - drop-down menu

<ul>

Fundamentals: No Spaces in between bracket and letter of word

I keep making the mistake of putting a space between bracket and letter of word
<h1>pineapple</h2>

wrong way:

<h1> pineapple</h2>

- the space cannot be there

right way:

<h1>pineapple</h2>

Wednesday, May 13, 2020

< iframe> - HTML Code

<iframe> tag is used for video

Example of the <iframe> HTML tag being used to create a YouTube video:

Tuesday, May 12, 2020

Search Engine - HTML Code

Search Icon - HTML Code

HTML - Code View:

</div>

Adjusting size of image - directions

with our image source code we press a space after quotations and find width attributes
now, you can adjust width and height properties

CSS Box Model

Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent

Image Source:

https://www.vikingcodeschool.com/html5-and-css3/the-css-box-model

SOURCE:

https://www.w3schools.com/css/css_boxmodel.asp

CSS: Stylizing Images

SOURCE:

https://www.w3schools.com/css/css3_images.asp

Structural and Semantic Markup - Differences

SOURCE:

https://www.reddit.com/r/computerscience/comments/8cer6c/difference_between_structural_and_semantic_markup/

Structural Tags - a tag that structures the page layout, usually serving as a parent for semantic tags to be placed.

Example in HTML Code View:

<head>

<nav>

<head> would be the structural tag for a <nav> </nav>

Analogy: scaffolding of building

Semantic Tags - a tag indicating something about the content.

*some semantic tags can have structural properties. a <div> becomes structural when it has two or more children.

Monday, May 11, 2020

Link to a source: "Structural Tags"

SOURCE:

http://www.understandingcode.com/html-basics/structural-tags/

< nav >

navigational items for the website. It may point to other webpages or to different sections of the same webpage
usually found inside the <header> tags, or directly underneath these tags

HTML - code view example:

<nav>

<a href="/html/">HTML</a> |

<a href="/css/">CSS</a> |

<a href="/js/">JavaScript</a> |

<a href="/jquery/">jQuery</a>

</nav>

< footer >

block at the bottom of the webpage that tells information about the site as a whole
addresses, pages, social media icons, copyright, contact info

ul class="flex-container flex-start">

-container for all the <li class> flex-items

< li class="flex-item >1

listed < li > flex-item of flex module

< ul > tag and < li > tag

<ul> element is used to define an unordered list of items
<li> element is used to represent an item in a list.

example:

creating a list of fruit on a webpage

HTML - Code View

<ul>

<li> apples </li>

<li> oranges </li>

<li> bananas </li>

<li> watermelon </li>

</ul>

HTML - Design view

apples
oranges
bananas
watermelon

Flex Module - exercise

Flex Module - CSS AND HTML - exercise

ul class="flex-container flex-start"

li class=flex-item>1</li>

Flex Module - CSS AND HTML - exercise

HTML

CSS

.flex-container {

padding: 0;

margin: 0;

list-style: none;

display: flex;

}

Practice:

<li class="flex-item">1</li

<li class=flex-item">2</li

<li class=flex-item">3<li

<li class=flex-item">4<li

<ul class="flex container flex-start"

PHP

a server scripting language for interactive webpages

Div class and Div ID - Differences

Div ID making up main content of the page
Div Class can be applied to many things on the page

-use id whenever you want to refer to a specific element and class when you have a number of things that are all alike.

id elements are things like header, footer, sidebar. Common class elements are things like highlight or external-link.

SOURCE:

https://stackoverflow.com/questions/544010/whats-the-difference-between-an-id-and-a-class

Setting up the Site - procedure

Site>New Site
Name Site. pick Location

next, File>New
Select Html
type in name of html doc
save as html doc and give it a name inside the site folder

go to CSS designer
add source
add selector
Save as CSS file and give it a name with a ".css" or "_css". either one works fine as long as this is in the file name

Setting Up CSS

Pull up the CSS Designer panel
add a source. Get the source from the site folder with a "-CSS" or "_CSS".*

*must have CSS in file name; otherwise, there is an organizational issue in trying to find it

Flexible Box Layout Module

SOURCE:

https://css-tricks.com/almanac/properties/j/justify-content/

Justify-content property is the sub-property of the box layout module

flex-start (default): items are packed toward the start line

flex-end: items are packed toward to end line

center: items are centered along the line

space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line

space-around: items are evenly distributed in the line with equal space around them

space-evenly: items are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same

justify-content: Center property - Flex Setup

justify-content; center property

content that is in a column
unlike text align, this one puts things like images in columns

Hyperlinks < a href >

Hyperlink - <a>

when you click on words with hyperlink with <a> it doesn't go to the linked page
we need an attribute
in this case, the attribute is 'href'

Example

a href=" "

after clicking quotations, Dreamweaver will ask "Browse"; you can either click "Browse" or press 'enter'

Fundamentals: Div with ID, Class, etc.

When we're coming up with IDs, we are going oto choose from an ID, Class or, etc.
Do not choose the word of a tag. i.e. "title" (title is a tag)

Strong tag - < Strong >

<Strong> tag to bold text
ex:
We played soccer.
<strong>soccer</strong>

CSS - Study

Color-Coding Tags (Organization Plan)

Flutter

an open-source UI software development kit created by Google
creating rich, data-centric components that can be easily hosted within an existing web page.

Image source:

https://www.bing.com/images/search?view=detailV2&ccid=VjqhJncI&id=645814FBD49E2D3191E0F1548CB73622DBFD92DD&thid=OIP.VjqhJncIwhPiqJUwGUsMjAHaGI&mediaurl=https%3a%2f%2fcdn57.androidauthority.net%2fwp-content%2fuploads%2f2018%2f04%2fhello-world-flutter-840x695.png&exph=695&expw=840&q=flutter+google&simid=608009799378864730&selectedIndex=1&ajaxhist=0

SOURCE:

https://flutter.dev/web

Div Definition

a div is a block-level element that defines a division or a section in an HTML document. The div block may contain other block-level components

SOURCE:

https://www.w3schools.com/Tags/tag_div.asp

HTML - Chart

Image Source:

https://www.rankred.com/html-cheat-sheet/

CSS - Study Animations

animation

animation-delay

animation-direction

animation-duration

animation-iteration-count

animation-name

animation-play-state

animation-timing-function

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

animation-delay

time

animation-direction

normal | alternate

animation-duration

time

animation-iteration-count

inherit

number

animation-name

none | IDENT

animation-play-state

running | paused

ease | linear | ease-in |

ease-out | ease-in-out |

cubic-Bezier (number,

number, number, number)

CSS Study - Alignment

vertical-align

-Baseline

-sub

-super | top |

text-top

-middle

-bottom

-text-bottom

-length

*do not forget to insert the colon after each bold word

CSS - Study (background)

List

background-image Background image

background-position

background-size

background-repeat no-repeat, repeat-x, repeat-y

background-attachment Background image scroll with the element?

scroll, fixed

background-origin border-box, padding-box,

content-box

background-clip length, %, border-box, padding-box, content-box, no-clip

background-break bounding-box, each-box, continuous

background-color Background color

background-position (x y), top, center, bottom, left, right

*do not forget to insert the colon after each bold word

CSS - Study (colors)

rgb(x,y,z)

rgb - red, green, or blue is selected

x - red

y - green

z - blue

example:

red = (152,240,37)

flavor - an accent color to customize the

user interface of the user agent

itself

currentColor - computed value of the color property

*do not forget to insert the colon after each bold word

CSS - Study - Border

border-width

border-style

border-color

*do not forget to insert the colon after each bold word

Saturday, May 9, 2020

Text - Coding Format

text-align; center

text-transform; capitalize

font-size 3rem;

font-weight: 500

padding: 30 px 0 20px 0;

Extension

An extension, in computer operating systems, is a piece of software that enhances or "extends" the capabilities of a programming language or other applications

SOURCE:

https://www.techopedia.com/definition/1828/extension

Centralized database and client-server database differences

SOURCE:

https://www.quora.com/What-are-the-difference-between-centralized-database-system-and-client-server-database-system

Centralized database systems are typically file based. there is no request/response* for files and data like there is with client/server applications. it opens a channel to the file and reads it directly (the files can be on a shared network —

-period of time between the click to go to the webpage and the time of visit.

You are using your client-server when you view web page data on a site. Your web server client requests from the site server web page data.

HTTP - Definition

HTTP is the basis of data communication for the World Wide Web

Example;

SOURCE:

http://image3.slideserve.com/7037013/hypertext-transfer-protocol-http-n.jpg

CRAM definition:

Analogies - Web Application

Web Application

The apartment building is the Web Application.

The secure floor is a Site Collection.

The apartment is a Web.

Source:

https://www.reddit.com/r/sharepoint/comments/1ko24a/whats_your_analogy_for_web_applications_site/

Server

Server - a computer/program that manages access to a centralized resource/service in a network

Image Source:

https://newlearningsite.wordpress.com/tag/server-definition/

Web Server

Image Source:

https://newlearningsite.wordpress.com/tag/server-definition/

Web Server

a program that uses HTTP (Hypertext Transfer Protocol) to serve the files that form Web pages to users

https://whatis.techtarget.com/definition/Web-server

My Definition

Application Server

Image Source:

https://newlearningsite.wordpress.com/tag/server-definition/

Real-time Communication Server

Image Source:

https://newlearningsite.wordpress.com/tag/server-definition/

FTP Server

Image Source:

https://newlearningsite.wordpress.com/tag/server-definition/

Collaboration Server

Image Source:

https://newlearningsite.wordpress.com/tag/server-definition/

List Server

Image Source:

https://newlearningsite.wordpress.com/tag/server-definition/

Telnet Server

Open Source Server

Virtual Server

Various Definitions of Server

Source:

https://whatis.techtarget.com/definition/server

Getting Connected to Server and FTP

Thursday, May 7, 2020

Site Setup - FTP

Site> New Site
Choose the root folder on desktop. main folder is called "websites". subfolder in that is called "mydreamweaversites" or whatever is the title of the website we are editing
Type in FTP address (usually provided by godaddy, crocodile, etc.)
"Save"

FTP

FTP - File Transfer Protocol

Definition

FTP - a standard network protocol used for the transfer of computer files between a client and server on a computer network.

HTTP (Hypertext Transfer Protocol)

HTTP - Hypertext Transfer Protocol

Definition

HTTP - an application protocol for distributed, collaborative, hypermedia information systems.

ftp info with sites like godaddy

whoever you registerecd your domain with---if your registered with godaddy, crocodile, or anything like that, the ftp will be provided

Connect to a publishing server

SOURCE:

https://helpx.adobe.com/dreamweaver/using/connect-remote-server.html

Set up FTP, SFTP, WebDav, or RDS connections to upload or download files from the publishing web server.

Definition

Server - a computer or computer program which manages access to a centralized resource or service in a network

Web Server - Web server is a program that uses HTTP (Hypertext Transfer Protocol) to serve the files that form Web pages to users, in response to their requests, which are forwarded by their computers' HTTP clients. Dedicated computers and appliances may be referred to as Web servers as well. Web server software controls how a user accesses hosted files.

https://whatis.techtarget.com/definition/Web-server

Example of Web Server Software

-Apache

http://www.apache.org/

Web hosting - a more general term that refers to where and how you’ll host your website’s files.

https://www.hostgator.com/blog/cloud-hosting-vs-web-hosting/

SOURCES:

https://www.hostgator.com/blog/cloud-hosting-vs-web-hosting/

https://whatis.techtarget.com/definition/Web-server

http://www.apache.org/

https://helpx.adobe.com/dreamweaver/using/connect-remote-server.html

Code - Cheat Sheet

Saturday, May 30, 2020

Wednesday, May 27, 2020

Friday, May 22, 2020

Wednesday, May 20, 2020

Wednesday, May 13, 2020

Tuesday, May 12, 2020

Monday, May 11, 2020

Saturday, May 9, 2020

Thursday, May 7, 2020