Intro to Front-End Web Devlopment

743 views

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
743
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×