HTML5 IS
THE FUTURE
OR...TO 2022 & BEYOND
HTML5 IS
THE FUTURE
NOW!
JASON BEAIRD
UX Designer at MailChimp.
Web Design Author.
Front-End Nerd.
WHAT IS HTML5?
COOL NEW
What marketing departments would have you believe....
A MARKUP LANGUAGE
...but also a series APIs for interacting with new features.
HTML5 IS REALLY...
IT’S NOT ONE BIGTHING.
and it’s not all new stuff...
GEOLOCATION
AUDIO
&VIDEO
CANVAS
NEW FORM
FIELD TYPES
OFFLINE
STORAGE
...
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN"!"http://www.w3.org/
TR/xhtml1/DTD/xh...
XHTML 1.0 Transitional
<link rel=”stylesheet” href=”file.css”
type=”text/css” media=”all”>
<style type=”text/css”>...</sty...
XHTML 1.0 Transitional
<script type=”text/javascript”>
/* <![CDATA[ */
alert(‘are we there yet?’);
/* ]]> */
</script>
HTM...
<!DOCTYPE html>
<title>A valid HTML5 document.</title>
<p>Even this paragraph is optional.</p>
<img src=yes.jpg alt=”Still...
EVOLUTION NOT
REVOLUTION
Drawings by KatyTresedder - http://www.flickr.com/photos/katy_tresedder/
XML or DIE! Be yourself.
NEW HTMLTAGS
<div>
<div>
<div> <div><div>
<div>
<div>
<div>
<div>
NEW HTMLTAGS
<header>
<footer>
<nav> <aside><article>
<section>
<section>
<figure>
<details>
INTERNET EXPLORER?
The HTML5 Shim: http://code.google.com/p/html5shim/
<!--[if lt IE 9]>
<script src="http://html5shim.goo...
NEW FORM GOODNESS
<input type=”search” name=”q” placeholder=”Search” autofocus>
<input type=”email”>
<input type=”url”>
<i...
urlemail
number search
CANVAS + SVG
GEOLOCATION
OTHER API AWESOMENESS
• Drag and Drop
• WebSockets
• Web Workers
• Local Storage
• WebSQL
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 alrea...
HTML5 RESOURCES
1. http://diveintohtml5.org
2. http://caniuse.com
3. http://html5demos.com
4. http://html5doctor.com
5. ht...
GO FORTH
& Markupify.
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
×

HTML5 is...NOW! - Jason Beaird

6,013

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 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
6,013
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

HTML5 is...NOW! - Jason Beaird

  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.

×