Intro to Front-End Web Devlopment

Intro to Front-end
Web Development

Overview
• Web Fonts
• HTML5
• CSS3
• Mobile

Web Fonts: History
• Traditional, common web fonts
– Arial
– Helvetica
– Georgia
– Times New Roman
– Verdana
– Lucida Grande

Web Fonts: History
• What about other, nicer, fancier fonts?
– Font foundries and legal issues
– Workarounds
• Text/image replacement
• sIFR
• @font-face
• Web font services

Web Font Services

Several others…

HTML5: What is it?
• The next step in the evolution of HTML
• Not a new language
• WHATWG and W3C
– Apple, Mozilla, Firefox…

HTML5: What’s new?
• First, the old:

OLD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

NEW:
<!DOCTYPE html>

OLD:
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">

NEW:
<meta charset=UTF-8">

OLD:
<script language="JavaScript" src="file.js"
type="text/javascript"></script>

NEW:
<script src="file.js"></script>

OLD:
<link rel="stylesheet" href="styles.css" type="text/css"
media="screen">

NEW:
<link rel="stylesheet" href="styles.css">

• APIs
– Build offline web apps (offline storage)
• https://www.minutes.io/
– Drag and drop
– Page visibility
– Many more that are over my head…
• http://www.html5rocks.com/en/features/nuts_and_
bolts

• Semantics and Structure

<header> IE 8 and below do not like these new tags.
<footer>
Use ‘shim’ to force support:
<section> 
<aside>
<nav>
<audio>
<video>

HTML5: Resources
• caniuse.com
• html5please.com
• html5rocks.com
• html5boilerplate.com
• coding.smashingmagazine.com/tag/html5/
• Dissect your favorite sites to see how
they’re using these techniques
– Firebug extension for Firefox

CSS3: What’s new?
• A lot!
– css3please.com
– leaverou.github.com/animatable/
– movethewebforward.org

CSS3 (and HTML5) : Support
• Varies wildly between browsers html5please.com
• Can use ‘polyfills’ and ‘shims’ to force
HTML5 and CSS3 support or
fallbacks, but understand the drawbacks
– modernizr.com
– yepnopejs.com
– css3pie.com
– selectivizr.com
– github.com/scottjehl/Respond

Mobile
• Responsive Web Design
– Media Queries
• http://mediaqueri.es/
• jQuery Mobile
– http://jquerymobile.com/
• Recommended reading:
– Mobile First by Luke Wroblewski
– Responsive Web Design by Ethan Marcotte

Follow the Leaders
• Google these Web Design Superstars.
Follow their blogs, Twitter feeds, etc.
– Luke Wroblewski
– Ethan Marcotte
– Dan Cedarholm
– Jeremy Keith
– Jeffrey Zeldman
– Elliot Jay Stocks
– Cameron Moll
– Jonathan Snook

Intro to Front-End Web Devlopment

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Intro to Front-End Web Devlopment

Semelhante a Intro to Front-End Web Devlopment (20)

Último

Último (20)

Intro to Front-End Web Devlopment