WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS

WEB DEVELOpment ImmersiVEHTML & Web Fundamentals

2

• How the Web Works• The Development Process• Separation of Concerns• Work Flow Habits• Getting to know HTML elements• Validation

Topics

GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

3

• Request/Response• Rendering in the browser• Local / Remote• Frontend / Backend Development

How the web works


4

Request / response


5

Conversation: passing html, css, & js


6

Rendering in the browser


• Each browser has its own rendering engine to interpret and display the markup

7

Rendering in the browser


• Top to bottom, left to right

8

Local / remote


9

FTP (File transfer protocol)

GENERAL ASSEMBLYINTRODUCTION TO WEB DEVELOPMENT

Things you will need to connect:•Ftp Address•User login•Password

Should be provided by your host company or server admin.

10

Front end (client-side)•HTML•CSS•Javascript

DEVelopment


Back end(server-side)•Ruby•PHP•Python•PERL•C++•Node.js

11 GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE

DEVelopment PROCESS

• Work Cycle• Planning• Stages

12

A Typical Web Development Cycle

User-Experience (UX)

Information Architecture (IA)

Design Development


13

• Who is our target audience? • How do we know if the user is hitting their

goals?• What are the most important features of this

site?

1 UX


14

Business Needs

User Needs

Best Practices

1 UX

Ideal Experience


15

Resulting in deliverables such:• wireframes• flow diagrams• sitemap

2 IA A model or blueprint for the site


16

2 IA : The Blueprint

Sitemaps & Flow Diagrams

Wireframes & Content

Establish flow and order

Define the user interaction and ease the handoff process to the creative team


17

Small Site


18

Large Site


19

Hand drawn


20

Brainstorming


21

Functional


22

Minimal


23

iPhone


24

Design 3Wireframes become design comps


25

Design 3Each wireframe template, becomes a comp template

Homepage 2 column top1 column bottom

2 column top2 column bottom

Blog


26

4

general-assembly-logo.png

Comps become graphics & real text

General Assembly offers classes, and events at the intersection of technology, design, and entrepreneurship. Together with our members, thought leaders, and seasoned practitioners, we offer a robust curriculum focused on

Real Text:


FRONT END DEVELOPMENT

27

5Interacts with database and executes commands acting as a controller that mediates between the database model and the front end users view.


If we go to www.zappos.com and search for a pair of shoes, the visual display of the images, the price and the green button "Add To Cart" is all part of the front-end. Now, when I click "Add To Cart" and this an item is moved to my shopping cart in the backend there is some logic written that says something like: "The user just clicked a button, so add this item temporarily to the database and remember this item for the user." The backend takes care of the actions and the directions of how and where to store data.

back END DEVELOPMENT

28

• HTML = structure (content)• CSS = style• Javascript = behavior

Separation of concerns


29

Site organization


30

• Syntax• Document Structure• Content Tags• Element Display

HTML basics


31

syntax


32

syntax


33

<html> <head>

Document metadata

</head> <body>

Document contents

</body></html>

Basic Document structure


34

Heading Elements

<h1>Largest Heading</h1><h2> . . . </h2><h3> . . . </h3><h4> . . . </h4><h5> . . . </h5><h6>Smallest Heading</h6>

Content tags


35

Text Elements<p>This is a paragraph</p><br> (line break)<hr> (horizontal rule)<pre>This text is preformatted</pre>

Content tags


36

Text ElementsLogical Styles

<em>This text is emphasized</em><strong>This text is strong</strong><code>This is some computer code</code>

Content tags


37

<b>bold</b><i>italic</i><u>underline</u><s>strike through</s><menu>creates a menu</menu><center>centers content</center><applet>creates an applet</applet><font>font style</font>

Deprecated tags


38

Unordered list

<ul> <li>First item</li> <li>Next item</li></ul>

Content tags


39

Ordered list

<ol> <li>First item</li> <li>Next item</li></ol>

Content tags


40

Definition list

<dl> <dt>First term</dt> <dd>Definition</dd> <dt>Next term</dt> <dd>Definition</dd></dl>

Content tags


41

• File Types• Resolution & Color Mode• Compression• Attributes

IMages


42

• GIF (Graphics Interchange Format)• JPG (JPEG) (Joint Photographic

Experts Group)• PNG (Portable Network Graphic)• BMP (Bitmap)• SVG (Scalable Vector Graphic)

Common File types


43

• Lossless data compression makes use of data compression algorithms that allows the exact original data to be reconstructed from the compressed data

• Lossy data compression does not allow the exact original data to be reconstructed from the compressed data.

Lossy vs lossless


44

• Lossless compression that simplifies color pallette to reduce file size.

• Best for sharp edged graphics with smaller range of colors. (ex: text, simple logos, and icons)

• Not good for complex gradients or millions of colors (ex: photos)

GIF (graphic interchange format)


45

• Lossy compression that reduces file size by loss in image fidelity.

• Best for photographs and paintings of realistic scenes with smooth variations of tone and many colors.

• Not as sharp at depicting text, and icons as GIF or PNG.

JPG (joint photographic experts group)


46

• Lossless data compression that was meant to replace GIF.

• PNG-8 works well with text, icons, and logos with sharp edges and simplified color palettes.

• Creates much larger file sizes on photos than JPGs.

PNG-8 (portable network graphic 8 bit)


47

• A higher 24 bit version of PNG.• Excellent results for images with

transparency, which makes it work well for UI buttons. Good at both sharp edged simplified palettes and large color range gradients.

• Will create a larger file size than JPG for photos however.

PNG-24 (portable network graphic 24 bit)


48

• Left over from the days of oldver vesions os OS2 and Windows, Bitmaps for web use dithering, pattern or noise inclusion to reduce file size.

• Good for making retro web 1.0 graphics.

• Not ideal for maintaining clarity in web images at reasonable file sizes.

Bmp (bitmap)


49

• Lossless format that can optionally be defined as vector points instead of pixels allowing scaling.

• Good for scalable graphics.• Has limited support in older versions

of Internet Explorer 8 and below.

svg (scalable vector graphic)


50

There are only 72 pixels per inch on your screen.

•Web = 71 dpi (ppi)•Print Newspaper = 100 dpi (ppi)•Print Magazine = 300 dpi (ppi)

CHOOSING image RESOLUTION

GENERAL ASSEMBLY[DATE OF LECTURE]

[NAME OF PROGRAM]CERTIFICATE PROGRAM

51

Our screens display colors in RGB.

•Web = RGB (Red, Green, Blue)•Print = CMYK (Cyan, Magenta, Yellow, Black)

CHOOSING color modes



52

<img src=”myimage.jpg" alt="Alternate Text" title=”Display Title” width=”800" height=”600" />

Image TAg



53

• Attributes (href, target)• Relative vs Absolute• Types (url, named anchor, mailto)

LINKS


54

<a href="http://www.example.com/">This is a Link</a>

<a href="http://www.example.com/"> <img src="URL" alt="Alternate Text"></a>

<a href="mailto:[email protected]">Send e-mail</a>

A named anchor:<p id="tips">Useful Tips Section</p><a href="#tips">Jump to the Useful Tips Section</a>

LINK TagS


55

<a href="http://www.example.com/">This is an absolute url Link</a>

VS

<a href=”about.html">This is a relative url Link</a>

Relative urls, link to content inside the same site and provides a file path relative to the relationship between the two files. Whether internal to the site or on an external domain, absolute urls provide the full http url in the file path.

Relative vs absolute


56

Element display


57

• Keywords• Descriptions• OGP (open graph protocol)

Meta data


58

Comma seprated list of terms to improve search engine optomization.

<meta name="keywords" content="wikipedia,encyclopedia" />

keywords


59

Paragraph description of your site page. Google displays first 69 characters of the description in the search results under the site title and url.

<meta name="description" content="…" />

description


60

Enables any web page to become a rich object in a social graph.

<meta property="og:title" content="Blue Valentine"/><meta property="og:type" content="movie"/><meta property="og:url" content="http://www.bluevalentine-movie.com/"/><meta property="og:image" content="/images/facebook-thumb.jpg"/>

http://ogp.me/

OGP (Open Graph Protocol)


61

W3c validation


http://validator.w3.org/

62 GENERAL ASSEMBLYINTRODUCTION TO WEB DEVELOPMENT

Documents

WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS