Your SlideShare is downloading. ×
0
HTML5 is...NOW! - Jason Beaird
HTML5 is...NOW! - Jason Beaird
HTML5 is...NOW! - Jason Beaird
HTML5 is...NOW! - Jason Beaird
HTML5 is...NOW! - Jason Beaird
HTML5 is...NOW! - Jason Beaird
HTML5 is...NOW! - Jason Beaird
HTML5 is...NOW! - Jason Beaird
HTML5 is...NOW! - Jason Beaird
HTML5 is...NOW! - Jason Beaird
HTML5 is...NOW! - Jason Beaird
HTML5 is...NOW! - Jason Beaird
HTML5 is...NOW! - Jason Beaird
HTML5 is...NOW! - Jason Beaird
HTML5 is...NOW! - Jason Beaird
HTML5 is...NOW! - Jason Beaird
HTML5 is...NOW! - Jason Beaird
HTML5 is...NOW! - Jason Beaird
HTML5 is...NOW! - Jason Beaird
HTML5 is...NOW! - Jason Beaird
HTML5 is...NOW! - Jason Beaird
HTML5 is...NOW! - Jason Beaird
HTML5 is...NOW! - Jason Beaird
HTML5 is...NOW! - Jason Beaird
HTML5 is...NOW! - Jason Beaird
HTML5 is...NOW! - Jason Beaird
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 is...NOW! - Jason Beaird

5,989

Published on

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 …

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/​

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

No Downloads
Views
Total Views
5,989
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 IS THE FUTURE OR...TO 2022 & BEYOND
  • 2. HTML5 IS THE FUTURE NOW!
  • 3. JASON BEAIRD UX Designer at MailChimp. Web Design Author. Front-End Nerd.
  • 4. WHAT IS HTML5? COOL NEW What marketing departments would have you believe....
  • 5. A MARKUP LANGUAGE ...but also a series APIs for interacting with new features. HTML5 IS REALLY...
  • 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. 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. 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. XHTML 1.0 Transitional <script type=”text/javascript”> /* <![CDATA[ */ alert(‘are we there yet?’); /* ]]> */ </script> HTML5 <script> alert(‘hooray!’); </script> SIMPLIFIED JS EMBEDDING
  • 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. EVOLUTION NOT REVOLUTION Drawings by KatyTresedder - http://www.flickr.com/photos/katy_tresedder/ XML or DIE! Be yourself.
  • 12. NEW HTMLTAGS <div> <div> <div> <div><div> <div> <div> <div> <div>
  • 13. NEW HTMLTAGS <header> <footer> <nav> <aside><article> <section> <section> <figure> <details>
  • 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. 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. urlemail number search
  • 17. CANVAS + SVG
  • 18. GEOLOCATION
  • 19. OTHER API AWESOMENESS • Drag and Drop • WebSockets • Web Workers • Local Storage • WebSQL
  • 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. 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. GO FORTH & Markupify.

×