WEB DEVELOPMENT IMMERSIVE
• How the Web Works
• The Development Process • Separation of Concerns
• Work Flow Habits
• Getting to know HTML elements • Validation
3
• Request/Response
• Rendering in the browser • Local / Remote
• Frontend / Backend Development
HOW THE WEB WORKS
GENERAL ASSEMBLY WEB DEVELOPMENT IMMERSIVE
5
CONVERSATION: PASSING HTML, CSS, & JS
GENERAL ASSEMBLY WEB DEVELOPMENT IMMERSIVE
RENDERING IN THE BROWSER
• Each browser has its own rendering engine to interpret and display the markup
7
RENDERING IN THE BROWSER
GENERAL ASSEMBLY WEB DEVELOPMENT IMMERSIVE
9
FTP (FILE TRANSFER PROTOCOL)
GENERAL ASSEMBLY INTRODUCTION TO WEB DEVELOPMENT
Things you will need to connect: • Ftp Address
• User login • Password
Should be provided by your host company or server admin.
Front end (client-side) • HTML • CSS • Javascript DEVELOPMENT Back end (server-side) • Ruby • PHP • Python • PERL • C++
11 WEB DEVELOPMENT IMMERSIVE GENERAL ASSEMBLY
DEVELOPMENT PROCESS
• Work Cycle • Planning
A TYPICAL WEB DEVELOPMENT CYCLE
User-‐Experience
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 "
GENERAL ASSEMBLY WEB DEVELOPMENT IMMERSIVE
Business Needs User Needs Best PracCces
1
UX "
Ideal Experience15
Resulting in deliverables such: • wireframes
• flow diagrams • sitemap
2
IA "
A model or blueprint for the site
GENERAL ASSEMBLY WEB DEVELOPMENT IMMERSIVE
2
IA : The Blueprint"
Sitemaps & Flow Diagrams
Wireframes & Content
Establish flow and order
Define the user interacCon and ease the handoff process to the creaCve team
17
SMALL SITE
GENERAL ASSEMBLY WEB DEVELOPMENT IMMERSIVE
19
HAND DRAWN
GENERAL ASSEMBLY WEB DEVELOPMENT IMMERSIVE
21
FUNCTIONAL
GENERAL ASSEMBLY WEB DEVELOPMENT IMMERSIVE
23
IPHONE
GENERAL ASSEMBLY WEB DEVELOPMENT IMMERSIVE
DESIGN
3
25
DESIGN
3
Each wireframe template, becomes a comp template
Homepage
1 column bo8om 2 column top 2 column top 2 column bo8om Blog GENERAL ASSEMBLY WEB DEVELOPMENT IMMERSIVE
4
general-‐assembly-‐logo.png
Comps become graphics & real text
General Assembly offers classes, and events at the intersecCon of technology, design, and entrepreneurship. Together with our
members, thought leaders, and seasoned pracCConers, we offer a robust curriculum focused on
Real Text:
27
5
Interacts with database and executes commands acCng as a controller that mediates between the database model and the front end users view.
GENERAL ASSEMBLY WEB DEVELOPMENT IMMERSIVE
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 bu8on "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 wri8en that says something like: "The user just clicked a bu8on, so add this item temporarily to the database and remember this item for the user." The backend takes care of the acCons and the direcCons of how and where to store data.
• HTML = structure (content) • CSS = style
• Javascript = behavior
29
SITE ORGANIZATION
GENERAL ASSEMBLY WEB DEVELOPMENT IMMERSIVE
• Syntax
• Document Structure • Content Tags
• Element Display
31
SYNTAX
GENERAL ASSEMBLY WEB DEVELOPMENT IMMERSIVE
33 <html> <head> Document metadata </head> <body> Document contents </body> </html>
BASIC DOCUMENT STRUCTURE
GENERAL ASSEMBLY WEB DEVELOPMENT IMMERSIVE
Heading Elements <h1>Largest Heading</h1> <h2> . . . </h2> <h3> . . . </h3> <h4> . . . </h4> <h5> . . . </h5> 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
GENERAL ASSEMBLY WEB DEVELOPMENT IMMERSIVE
Text Elements
Logical Styles
<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>
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 L GENERAL ASSEMBLY WEB DEVELOPMENT IMMERSIVE
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 GENERAL ASSEMBLY WEB DEVELOPMENT IMMERSIVE
Definition list <dl> <dt>First term</dt> <dd>Definition</dd> <dt>Next term</dt> <dd>Definition</dd> CONTENT TAGS
41
• File Types
• Resolution & Color Mode • Compression
• Attributes
IMAGES
GENERAL ASSEMBLY INTRODUCTION TO WEB DEVELOPMENT
• GIF (Graphics Interchange Format)
• JPG (JPEG) (Joint Photographic Experts Group)
• PNG (Portable Network Graphic) • BMP (Bitmap)
• SVG (Scalable Vector Graphic)
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
GENERAL ASSEMBLY INTRODUCTION TO WEB DEVELOPMENT
• 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)
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)
GENERAL ASSEMBLY INTRODUCTION TO WEB DEVELOPMENT
• 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.
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)
GENERAL ASSEMBLY INTRODUCTION TO WEB DEVELOPMENT
• 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.
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)
GENERAL ASSEMBLY INTRODUCTION TO WEB DEVELOPMENT
There are only 72 pixels per inch on your screen.
• Web = 71 dpi (ppi)
• Print Newspaper = 100 dpi (ppi) • Print Magazine = 300 dpi (ppi)
51
Our screens display colors in RGB. • Web = RGB (Red, Green, Blue)
• Print = CMYK (Cyan, Magenta, Yellow, Black)
CHOOSING COLOR MODES
GENERAL ASSEMBLY [DATE OF LECTURE] [NAME OF PROGRAM]
<img src=”myimage.jpg" alt="Alternate Text"
title=”Display Title” width=”800" height=”600" />
53
• Attributes (href, target) • Relative vs Absolute
• Types (url, named anchor, mailto)
LINKS
GENERAL ASSEMBLY INTRODUCTION TO WEB DEVELOPMENT
<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:webmaster@example.com">Send e-mail</a>
A named anchor:
<p id="tips">Useful Tips Section</p>
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
GENERAL ASSEMBLY INTRODUCTION TO WEB DEVELOPMENT
57
• Keywords
• Descriptions
• OGP (open graph protocol)
META DATA
GENERAL ASSEMBLY INTRODUCTION TO WEB DEVELOPMENT
Comma seprated list of terms to improve search engine optomization.
<meta name="keywords"
content="wikipedia,encyclopedia" />
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
GENERAL ASSEMBLY INTRODUCTION TO WEB DEVELOPMENT
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"/>
61
W3C VALIDATION
GENERAL ASSEMBLY WEB DEVELOPMENT IMMERSIVE