Transcript How the web works

WEB DEVELOPMENT IMMERSIVE
HTML & WEB FUNDAMENTALS
TOPICS
•
•
•
•
•
•
2
How the Web Works
The Development Process
Separation of Concerns
Work Flow Habits
Getting to know HTML elements
Validation
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
HOW THE WEB WORKS
•
•
•
•
3
Request/Response
Rendering in the browser
Local / Remote
Frontend / Backend Development
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
REQUEST / RESPONSE
4
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
CONVERSATION: PASSING HTML, CSS, & JS
5
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
RENDERING IN THE BROWSER
• Each browser has its own rendering engine to
interpret and display the markup
6
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
RENDERING IN THE BROWSER
• Top to bottom, left to right
7
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
LOCAL / REMOTE
8
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
FTP (FILE TRANSFER PROTOCOL)
Things you will need to connect:
• Ftp Address
• User login
• Password
Should be provided by your host
company or server admin.
9
INTRODUCTION TO WEB DEVELOPMENT
GENERAL ASSEMBLY
DEVELOPMENT
Front end
(client-side)
• HTML
• CSS
• Javascript
10
WEB DEVELOPMENT IMMERSIVE
Back end
(server-side)
• Ruby
• PHP
• Python
• PERL
• C++
• Node.js
GENERAL ASSEMBLY
DEVELOPMENT PROCESS
• Work Cycle
• Planning
• Stages
11
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
A TYPICAL WEB DEVELOPMENT CYCLE
User-Experience
(UX)
12
Information
Architecture (IA)
WEB DEVELOPMENT IMMERSIVE
Design
GENERAL ASSEMBLY
Development
1 UX
• 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?
13
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
1 UX
User
Needs
Business
Needs
Ideal Experience
14
WEB DEVELOPMENT IMMERSIVE
Best
Practices
GENERAL ASSEMBLY
2 IA
A model or blueprint for the site
Resulting in deliverables such:
• wireframes
• flow diagrams
• sitemap
15
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
2 IA : The Blueprint
Sitemaps & Flow Diagrams
Establish flow and order
Wireframes & Content
Define the user interaction and ease the handoff
process to the creative team
16
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
SMALL SITE
17
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
LARGE SITE
18
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
HAND DRAWN
19
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
BRAINSTORMING
20
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
FUNCTIONAL
21
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
MINIMAL
22
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
IPHONE
23
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
3 DESIGN
Wireframes become design comps
24
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
3 DESIGN
Each wireframe template, becomes a comp template
Homepage
25
Blog
WEB DEVELOPMENT IMMERSIVE
2 column top
1 column bottom
GENERAL ASSEMBLY
2 column top
2 column bottom
4 FRONT END DEVELOPMENT
Comps become graphics & real text
general-assembly-logo.png
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
26
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
5 BACK END DEVELOPMENT
Interacts 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.
27
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
SEPARATION OF CONCERNS
• HTML = structure (content)
• CSS = style
• Javascript = behavior
28
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
SITE ORGANIZATION
29
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
HTML BASICS
•
•
•
•
30
Syntax
Document Structure
Content Tags
Element Display
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
SYNTAX
31
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
SYNTAX
32
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
BASIC DOCUMENT STRUCTURE
<html>
<head>
Document metadata
</head>
<body>
Document contents
</body>
</html>
33
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
CONTENT TAGS
Heading Elements
<h1>Largest Heading</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>
34
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
CONTENT TAGS
Text Elements
<p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)
<pre>This text is preformatted</pre>
35
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
CONTENT TAGS
Text Elements
Logical Styles
<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>
36
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
DEPRECATED TAGS 
<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>
37
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
CONTENT TAGS
Unordered list
<ul>
<li>First item</li>
<li>Next item</li>
</ul>
38
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
CONTENT TAGS
Ordered list
<ol>
<li>First item</li>
<li>Next item</li>
</ol>
39
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
CONTENT TAGS
Definition list
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
40
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
IMAGES
•
•
•
•
41
File Types
Resolution & Color Mode
Compression
Attributes
INTRODUCTION TO WEB DEVELOPMENT
GENERAL ASSEMBLY
COMMON FILE TYPES
• GIF (Graphics Interchange Format)
• JPG (JPEG) (Joint Photographic Experts
Group)
• PNG (Portable Network Graphic)
• BMP (Bitmap)
• SVG (Scalable Vector Graphic)
42
INTRODUCTION TO WEB DEVELOPMENT
GENERAL ASSEMBLY
LOSSY VS LOSSLESS
• 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.
43
INTRODUCTION TO WEB DEVELOPMENT
GENERAL ASSEMBLY
GIF (GRAPHIC INTERCHANGE FORMAT)
• 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)
44
INTRODUCTION TO WEB DEVELOPMENT
GENERAL ASSEMBLY
JPG (JOINT PHOTOGRAPHIC EXPERTS GROUP)
• 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.
45
INTRODUCTION TO WEB DEVELOPMENT
GENERAL ASSEMBLY
PNG-8 (PORTABLE NETWORK GRAPHIC 8 BIT)
• 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.
46
INTRODUCTION TO WEB DEVELOPMENT
GENERAL ASSEMBLY
PNG-24 (PORTABLE NETWORK GRAPHIC 24 BIT)
• 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.
47
INTRODUCTION TO WEB DEVELOPMENT
GENERAL ASSEMBLY
BMP (BITMAP)
• 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.
48
INTRODUCTION TO WEB DEVELOPMENT
GENERAL ASSEMBLY
SVG (SCALABLE VECTOR GRAPHIC)
• 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.
49
INTRODUCTION TO WEB DEVELOPMENT
GENERAL ASSEMBLY
CHOOSING IMAGE RESOLUTION
There are only 72 pixels per inch on your
screen.
• Web = 71 dpi (ppi)
• Print Newspaper = 100 dpi (ppi)
• Print Magazine = 300 dpi (ppi)
50
[NAME OF PROGRAM]
CERTIFICATE PROGRAM
GENERAL ASSEMBLY
[DATE OF LECTURE]
CHOOSING COLOR MODES
Our screens display colors in RGB.
• Web = RGB (Red, Green, Blue)
• Print = CMYK (Cyan, Magenta, Yellow,
Black)
51
[NAME OF PROGRAM]
CERTIFICATE PROGRAM
GENERAL ASSEMBLY
[DATE OF LECTURE]
IMAGE TAG
<img src=”myimage.jpg" alt="Alternate Text" title=”Display Title”
width=”800" height=”600" />
52
[NAME OF PROGRAM]
CERTIFICATE PROGRAM
GENERAL ASSEMBLY
[DATE OF LECTURE]
LINKS
• Attributes (href, target)
• Relative vs Absolute
• Types (url, named anchor, mailto)
53
INTRODUCTION TO WEB DEVELOPMENT
GENERAL ASSEMBLY
LINK TAGS
<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>
54
INTRODUCTION TO WEB DEVELOPMENT
GENERAL ASSEMBLY
RELATIVE VS ABSOLUTE
<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.
55
INTRODUCTION TO WEB DEVELOPMENT
GENERAL ASSEMBLY
ELEMENT DISPLAY
56
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
META DATA
• Keywords
• Descriptions
• OGP (open graph protocol)
57
INTRODUCTION TO WEB DEVELOPMENT
GENERAL ASSEMBLY
KEYWORDS
Comma seprated list of terms to improve
search engine optomization.
<meta name="keywords" content="wikipedia,encyclopedia"
/>
58
INTRODUCTION TO WEB DEVELOPMENT
GENERAL ASSEMBLY
DESCRIPTION
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="…" />
59
INTRODUCTION TO WEB DEVELOPMENT
GENERAL ASSEMBLY
OGP (OPEN GRAPH PROTOCOL)
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.bluevalentinemovie.com/"/>
<meta property="og:image" content="/images/facebook-thumb.jpg"/>
http://ogp.me/
60
INTRODUCTION TO WEB DEVELOPMENT
GENERAL ASSEMBLY
W3C VALIDATION
http://validator.w3.org/
61
WEB DEVELOPMENT IMMERSIVE
GENERAL ASSEMBLY
62
INTRODUCTION TO WEB DEVELOPMENT
GENERAL ASSEMBLY