Michael(tm) Smith: HTML5 at Web Directions South 2008
Your SlideShare is downloading.
×
![XHTML 1.0 Transitional
<script type=”text/javascript”>
/* <![CDATA[ */
alert(‘are we there yet?’);
/* ]]> */
</script>
HTM...](https://image.slidesharecdn.com/html5-export-101028130449-phpapp02/75/html5-isnow-jason-beaird-9-2048.jpg?cb=1669148889)
![INTERNET EXPLORER?
The HTML5 Shim: http://code.google.com/p/html5shim/
<!--[if lt IE 9]>
<script src="http://html5shim.goo...](https://image.slidesharecdn.com/html5-export-101028130449-phpapp02/75/html5-isnow-jason-beaird-14-2048.jpg?cb=1669148889)
Check these out next
More Related Content
Similar to HTML5 is...NOW! - Jason Beaird (20)
Recently uploaded (20)
HTML5 is...NOW! - Jason Beaird
- 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.
