• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

HTML5 is...NOW! - Jason Beaird

on

  • 6,044 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 ...

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

Statistics

Views

Total Views
6,044
Views on SlideShare
2,695
Embed Views
3,349

Actions

Likes
4
Downloads
0
Comments
0

18 Embeds 3,349

http://unmatchedstyle.com 1368
http://www.unmatchedstyle.com 1303
http://www.guerillagirl.de 553
http://www.refreshcolumbia.org 42
http://guerillagirl.de 23
http://blog.st-f.net 22
http://st-f.tumblr.com 22
http://translate.googleusercontent.com 6
http://dev2.refreshcolumbia.com 1
http://a0.twimg.com 1
http://www.austincc.edu 1
http://refreshcola.org 1
http://webcache.googleusercontent.com 1
http://feeds.feedburner.com 1
http://twitter.com 1
http://static.slidesharecdn.com 1
http://www.zhuaxia.com 1
http://localhost 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 is...NOW! - Jason Beaird HTML5 is...NOW! - Jason Beaird Presentation Transcript

    • 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.flickr.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/ <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> ...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.