0
Intro to Front-endWeb Development
Overview•   Web Fonts•   HTML5•   CSS3•   Mobile
Web Fonts: History• Traditional, common web fonts  – Arial  – Helvetica  – Georgia  – Times New Roman  – Verdana  – Lucida...
Web Fonts: History• What about other, nicer, fancier fonts?  – Font foundries and legal issues  – Workarounds     •   Text...
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:
HTML5: What’s new?OLD:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"...
HTML5: What’s new?OLD:<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">NEW:<meta charset=UTF-8">
HTML5: What’s new?OLD:<script language="JavaScript" src="file.js"type="text/javascript"></script>NEW:<script src="file.js"...
HTML5: What’s new?OLD:<link rel="stylesheet" href="styles.css" type="text/css"media="screen">NEW:<link rel="stylesheet" hr...
HTML5: What’s new?• APIs  – Build offline web apps (offline storage)     • https://www.minutes.io/  – Drag and drop  – Pag...
HTML5: What’s new?• Semantics and Structure  <header>    IE 8 and below do not like these new tags.  <footer>             ...
HTML5: Resources•   caniuse.com•   html5please.com•   html5rocks.com•   html5boilerplate.com•   coding.smashingmagazine.co...
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  HTML...
Mobile• Responsive Web Design  – Media Queries    • http://mediaqueri.es/• jQuery Mobile  – http://jquerymobile.com/• Reco...
Follow the Leaders• Google these Web Design Superstars.  Follow their blogs, Twitter feeds, etc.  –   Luke Wroblewski  –  ...
Upcoming SlideShare
Loading in...5
×

Intro to Front-End Web Devlopment

530

Published on

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
530
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Intro to Front-End Web Devlopment"

  1. 1. Intro to Front-endWeb Development
  2. 2. Overview• Web Fonts• HTML5• CSS3• Mobile
  3. 3. Web Fonts: History• Traditional, common web fonts – Arial – Helvetica – Georgia – Times New Roman – Verdana – Lucida Grande
  4. 4. Web Fonts: History• What about other, nicer, fancier fonts? – Font foundries and legal issues – Workarounds • Text/image replacement • sIFR • @font-face • Web font services
  5. 5. Web Font Services Several others…
  6. 6. HTML5: What is it?• The next step in the evolution of HTML• Not a new language• WHATWG and W3C – Apple, Mozilla, Firefox…
  7. 7. HTML5: What’s new?• First, the old:
  8. 8. HTML5: What’s new?OLD:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">NEW:<!DOCTYPE html>
  9. 9. HTML5: What’s new?OLD:<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">NEW:<meta charset=UTF-8">
  10. 10. HTML5: What’s new?OLD:<script language="JavaScript" src="file.js"type="text/javascript"></script>NEW:<script src="file.js"></script>
  11. 11. HTML5: What’s new?OLD:<link rel="stylesheet" href="styles.css" type="text/css"media="screen">NEW:<link rel="stylesheet" href="styles.css">
  12. 12. HTML5: What’s new?• 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
  13. 13. HTML5: What’s new?• Semantics and Structure <header> IE 8 and below do not like these new tags. <footer> Use ‘shim’ to force support: <section> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/ <article> trunk/html5.js"></script> <![endif]--> <aside> <nav> <audio> <video>
  14. 14. 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
  15. 15. CSS3: What’s new?• A lot! – css3please.com – leaverou.github.com/animatable/ – movethewebforward.org
  16. 16. 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
  17. 17. 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
  18. 18. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×