HTML5 is...Now!
•
1 like•820 views
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/
Recommended
More Related Content
Similar to HTML5 is...Now!
Similar to HTML5 is...Now! (20)
More from Jason Beaird
Recently uploaded
Recently uploaded (20)
HTML5 is...Now!
- 1. HTML5 IS THE FUTURE OR...TO 2022 & BEYOND
- 4. JASON BEAIRD UX Designer at MailChimp. Web Design Author. Front-End Nerd.
- 6. WHAT IS HTML5? COOL NEW What marketing departments would have you believe....
- 7. A MARKUP LANGUAGE ...but also a series APIs for interacting with new features. HTML5 IS REALLY...
- 8. 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
- 9. 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
- 10. 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
- 11. XHTML 1.0 Transitional <script type=”text/javascript”> /* <![CDATA[ */ alert(‘are we there yet?’); /* ]]> */ </script> HTML5 <script> alert(‘hooray!’); </script> SIMPLIFIED JS EMBEDDING
- 12. <!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?
- 13. EVOLUTION NOT REVOLUTION Drawings by KatyTresedder - http://www.flickr.com/photos/katy_tresedder/ XML or DIE! Be yourself.
- 16. 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.
- 17. 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})?$">
- 19. CANVAS + SVG
- 22. GEOLOCATION
- 23. OTHER API AWESOMENESS • Drag and Drop • WebSockets • Web Workers • Local Storage • WebSQL
- 24. 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.
- 25. 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