HTML5 is...Now!

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....

HTML5 IS REALLY... A MARKUP LANGUAGE ...but also a series APIs for interacting with new features.

IT’S NOT ONE BIG THING. OFFLINE CANVAS STORAGE GEOLOCATION AUDIO NEW FORM & VIDEO NEW SEMANTIC FIELD TYPES LAYOUT TAGS and it’s not all new stuff...

SIMPLIFIED DOCTYPE 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 STYLES 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 JS EMBEDDING XHTML 1.0 Transitional <script type=”text/javascript”> /* <![CDATA[ */ alert(‘are we there yet?’); /* ]]> */ </script> HTML5 <script> alert(‘hooray!’); </script>

Missing some junk here, aren’t we? <!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... Quoted attributes? Where’s the trailing slash?

EVOLUTION NOT REVOLUTION XML or DIE! Be yourself. Drawings by Katy Tresedder - http://www.ﬂickr.com/photos/katy_tresedder/

NEW HTML TAGS <div> <div> <div> <div> <div> <div> <div> <div> <div>

NEW HTML TAGS <header> <nav> <article> <aside> <section> <figure> <details> <section> <footer>

INTERNET EXPLORER? The HTML5 Shim: http://code.google.com/p/html5shim/  ...or just go with HTML5 class names.

NEW FORM GOODNESS <input type=”search” name=”q” placeholder=”Search” autofocus> <input type=”email”> <input type=”date”> <input type=”url”> <input type=”datetime”> <input type=”number”> <input type=”month”> <input type=”range”> <input type=”week”> <input type=”color”> <input type=”time”> <input name="zip" pattern="^[d]{5}(-[d]{4})?$">

number search email url

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 already works in most browsers. 5. It’s here to stay.

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

GO FORTH & Markupify.

HTML5 is...Now!

by Jason Beaird

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 1

Statistics

HTML5 is...Now! Presentation Transcript

HTML5 is...Now!

by Jason Beaird

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 1

Statistics

HTML5 is...Now! Presentation Transcript

Let LinkedIn power your SlideShare experience

Let LinkedIn power your SlideShare experience

Customize SlideShare content based on your interests

Keep up to date when your LinkedIn contacts post on SlideShare