How I Learned To Stop Worrying & Love HTML5

Thursday, September 1, 11

"You'll all be in line for promotions when this is over!" Source: Major T. J. "King" Kong, in the

movie "Dr. Strangelove"


Dale Cruseauthor, "HTML5 Multimedia Development Cookbook"


HOWThursday, September 1, 11

IThursday, September 1, 11

learnedThursday, September 1, 11

toThursday, September 1, 11

stopThursday, September 1, 11

worryingThursday, September 1, 11

&Thursday, September 1, 11

loveThursday, September 1, 11


what is html5?


html5 is:

• html


html5 is:

• old & new at the same time


still good: <a> <abbr> <address> <area> <b> <base> <bdo>

<blockquote> <body> <br> <button> <caption> <cite> <code> <col>

<colgroup> <dd> <del> <dfn> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <head> <hr> <i> <iframe> <img> <input> <ins> <kbd> <label>


still good: <legend> <li> <link> <map> <menu> <noscript> <object>

<ol> <optgroup> <option> <p> <param> <pre> <q> <s> <samp>

<script> <select> <small> <span> <strong> <style> <sub> <sup>

<table> <tbody> <td> <textarea> <tfoot> <th> <thead> <title> <tr>

<ul> <var>Thursday, September 1, 11

no good: <acronym> <applet> <basefont> <big> <center> <dir>

<font> <frame> <frameset> <noframes> <strike> <tt> <u>

<xmp>


more gooder: <article> <aside> <audio> <canvas> <command>

<datalist> <details> <embed> <figcaption> <figure> <footer>

<header> <hgroup> <keygen> <mark> <meter> <nav> <output> <progress>

<rp> <rt> <ruby> <section> <source> <summary> <time> <video>

<wbr>Thursday, September 1, 11

what it’s not


html5 isn’t:

• css3


html5 isn’t:

• design


html5 isn’t:

• a flash killer


myth #1:

<flash_killer>


myth #2:

<hype>


myth #3:

<not_ready>


myth #4:

<easy_multimedia>


myth #5:

<xml_killer>


So what?


so what?

• more browser goodness


so what?

• advantages for different people


Publishers


Publishers

• mobile


Publishers

• use what you know


Publishers

• on even when it's off


designers


designers

• freedom



front-end developers



• doctype


<!doctype html>



• semantic naming


more gooder: <article> <aside> <audio> <canvas> <datalist>

<details> <figcaption> <figure> <footer> <header> <hgroup>

<keygen> <mark> <meter> <nav> <output> <progress> <section>

<source> <summary> <time> <video>


"Do not piss your future self off!"

Source: Jeremy Keith, in his An Event Apart presentation.



• multimedia


<video src="">


<video src=""><audio src="">


<video src=""><audio src="">

ubiquitous as:<img src="">


middle-tier developers



• javascript



• web sockets


content creators


content creators

• seo


content creators

• content first, finally


"If you don't know what you're designing, you can't design it."

Source: Jeffrey Zeldman, during his DIBI Conference keynote


consumers


consumers

• no upgrade path


consumers

• mobile advantages


who’s using it?


who’s using it?

• google



who’s using it?

• facebook



who’s using it?

• apple



how can i use it?


how can i use it?

• update your doctype


<!doctype html>


how can i use it?

• use semantic naming


<header>


<footer>


<nav>


<div>


how can i use it?

• relook your forms


old school: <input name="keys" value="Search">


new school: <input name="keys" placeholder="Search">


old school: JavaScript-based date picker.


new school: <input type="date">


how can i use it?

• ready for more?


now what?


books:


books:


books:


websites:

•diveintohtml5.org


websites:

•html5doctor.com


websites:

•html5rocks.com


events:

• An event apart


events:

• build guild


events:

• other meetups


events:

• other meetups:•meetup.com/Boston-HTML5-Game-Development


questions?


thank you


Credits:• All movie stills from "Dr. Strangelove"

• Strangelove fonts by MyFonts.com

• zeldman photo from zeldman.com

• jeremy keith photo from adactio.co.uk


Dale Cruseauthor, "HTML5 Multimedia Development Cookbook" dalejcruse.com


Technology

How I Learned To Stop Worrying & Love HTML5