Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
The cay book trailer
Next

1

Share

HTML5 is...Now!

Unless you’ve been living under a rock, you’ve probably heard lots of buzz about HTML5. In less than 10 minutes, Jason will explain what HTML5 is, why people are so excited about it and how you can start using it today.

From the October 2010 Refresh Columbia Meetup:
refreshcolumbia.org/​meetings/​october-2010-meetup/​

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

HTML5 is...Now!

  1. 1. HTML5 IS THE FUTURE OR...TO 2022 & BEYOND
  2. 2. HTML5 IS THE FUTURE NOW!
  3. 3. JASON BEAIRD UX Designer at MailChimp. Web Design Author. Front-End Nerd.
  4. 4. WHAT IS HTML5? COOL NEW What marketing departments would have you believe....
  5. 5. A MARKUP LANGUAGE ...but also a series APIs for interacting with new features. HTML5 IS REALLY...
  6. 6. IT’S NOT ONE BIGTHING. and it’s not all new stuff... GEOLOCATION AUDIO &VIDEO CANVAS NEW FORM FIELD TYPES OFFLINE STORAGE NEW SEMANTIC LAYOUT TAGS
  7. 7. XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"!"http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd"> HTML5 <!DOCTYPE html> SIMPLIFIED DOCTYPE
  8. 8. XHTML 1.0 Transitional <link rel=”stylesheet” href=”file.css” type=”text/css” media=”all”> <style type=”text/css”>...</style> HTML5 <link rel=stylesheet file=file.css> <style>...</style> SIMPLIFIED STYLES
  9. 9. XHTML 1.0 Transitional <script type=”text/javascript”> /* <![CDATA[ */ alert(‘are we there yet?’); /* ]]> */ </script> HTML5 <script> alert(‘hooray!’); </script> SIMPLIFIED JS EMBEDDING
  10. 10. <!DOCTYPE html> <title>A valid HTML5 document.</title> <p>Even this paragraph is optional.</p> <img src=yes.jpg alt=”Still Valid.”> <br> This kinda scares me, but it’s cool... Where’s the trailing slash? Quoted attributes? Missing some junk here, aren’t we?
  11. 11. EVOLUTION NOT REVOLUTION Drawings by KatyTresedder - http://www.flickr.com/photos/katy_tresedder/ XML or DIE! Be yourself.
  12. 12. NEW HTMLTAGS <div> <div> <div> <div><div> <div> <div> <div> <div>
  13. 13. NEW HTMLTAGS <header> <footer> <nav> <aside><article> <section> <section> <figure> <details>
  14. 14. INTERNET EXPLORER? The HTML5 Shim: http://code.google.com/p/html5shim/ <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> ...or just go with HTML5 class names.
  15. 15. NEW FORM GOODNESS <input type=”search” name=”q” placeholder=”Search” autofocus> <input type=”email”> <input type=”url”> <input type=”number”> <input type=”range”> <input type=”color”> <input type=”date”> <input type=”datetime”> <input type=”month”> <input type=”week”> <input type=”time”> <input name="zip" pattern="^[d]{5}(-[d]{4})?$">
  16. 16. urlemail number search
  17. 17. CANVAS + SVG
  18. 18. GEOLOCATION
  19. 19. OTHER API AWESOMENESS • Drag and Drop • WebSockets • Web Workers • Local Storage • WebSQL
  20. 20. IN SUMMARY... 1. It’s not one big thing. 2.You don’t need to throw anything away. 3. It’s easy to get started. 4. It already works in most browsers. 5. It’s here to stay.
  21. 21. HTML5 RESOURCES 1. http://diveintohtml5.org 2. http://caniuse.com 3. http://html5demos.com 4. http://html5doctor.com 5. http://html5boilerplate.com 6.http://html5test.com
  22. 22. GO FORTH & Markupify.
  • fate7

    May. 1, 2011

Unless you’ve been living under a rock, you’ve probably heard lots of buzz about HTML5. In less than 10 minutes, Jason will explain what HTML5 is, why people are so excited about it and how you can start using it today. From the October 2010 Refresh Columbia Meetup: refreshcolumbia.org/​meetings/​october-2010-meetup/​

Views

Total views

1,536

On Slideshare

0

From embeds

0

Number of embeds

4

Actions

Downloads

0

Shares

0

Comments

0

Likes

1

×