HTML5 Essentials

HTML5 Essentials by Marc Grabanski

• Less Header Code • More Semantic HTML tags • Media Tags • Geolocation • Canvas • Input Types • Form Validation • Draggable • Local Storage • Cross-Domain Messaging • Web Sockets • Eventually, 3D canvas

Less Header Code <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8”> <title>foo</title> </head> ...

No need for type attribute <script src=”foo.js”> </script> <link href=”foo.css”></link>

More Semantic HTML tags <div id=”header”> <div id=”nav”> <div id=”article”> <div id=”sidebar”> <div id=”footer”>

More Semantic HTML tags <header> <nav> <section> <aside> <article> <footer>

Fix IE for HTML5 elements document.createElement(‘header’);

HTML5 Shiv  or the more advanced http://www.modernizr.com

Output <output name="result"></output>

Progress <progress id="p" max=100><span>0</span>%</progress>

Progress in Action <p>Progress: <progress id="p" max=100><span>0</span>%</ progress></p> <script> var progressBar = document.getElementById('p'); function updateProgress(newValue) { progressBar.value = newValue; progressBar.getElementsByTagName('span')[0].textContent = newValue; } </script>

Progress is for status of a set of tasks Meter is for a gauge of measure

Meter Storage space usage: <meter value=6 max=8>6 blocks used (out of 8 total) </meter> Voter turnout: <meter value=0.75><img alt="75%" src="graph75.png"></meter> Tickets sold: <meter min="0" max="100" value="75"></meter>

Details and Summary <details> <summary>Copying... <progress max="375505392" value="97543282"></progress> 25%</summary> <dl> <dt>Transfer rate:</dt> <dd>452KB/s</dd> <dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd> <dt>Remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd> <dt>Duration:</dt> <dd>01:16:27</dd> <dt>Color profile:</dt> <dd>SD (6-1-6)</dd> <dt>Dimensions:</dt> <dd>320×240</dd> </dl> </details>

Address <address> <a href="../People/Raggett/">Dave Raggett</A>, <a href="../People/Arnaud/">Arnaud Le Hors</A>, contacts for the w3c HTML activity </address> Address applies to the nearest Article or Body tag.

Data Attributes <div class="spaceship" data-ship-id="92432" data-weapons="laser 2" data-shields="50%" data-x="30" data-y="10" data-z="90"> <button class="fire"> </div> <script> div = document.getElementsByTagName(‘ div’)[0]; spaceships[div.dataset.shipId].fire() </script>

Section <article> <hgroup> <h1>Apples</h1> <h2>Tasty, delicious fruit!</h2> </hgroup> <p>The apple is the pomaceous fruit of the apple tree.</p> <section> <h1>Red Delicious</h1> <p>These bright red apples are the most common found in many supermarkets.</p> </section> <section> <h1>Granny Smith</h1> <p>These juicy, green apples make a great filling for apple pies.</p> </section> </article>

Good <body> <h4>Apples</h4> <p>Apples are fruit.</p> <section> <h2>Taste</h2> <p>They taste lovely.</p> <h6>Sweet</h6> <p>Red apples are sweeter</p> <h1>Color</h1> <p>Apples come in various colors.</p> </section> </body>

Better <body> <h1>Apples</h1> <p>Apples are fruit.</p> <section> <h2>Taste</h2> <p>They taste lovely.</p> <section> <h3>Sweet</h3> <p>Red apples are sweeter</p> </section> </section> <section> <h2>Color</h2> <p>Apples come in various colors.</p> </section> </body>

Figure and Figure Caption <figure> <img src="bubbles-work.jpeg" alt="Bubbles, sitting in his office chair, works on his latest project intently."> <figcaption>Bubbles at work</figcaption> </figure>

Figure and Figure Caption <p>In <a href="#l4">listing 4</a> we see the primary core interface API declaration.</p> <figure id="l4"> <figcaption>Listing 4. The primary core interface API declaration.</figcaption> <pre><code>interface PrimaryCore { boolean verifyDataLine(); void sendData(in sequence<byte> data); void initSelfDestruct(); }</code></pre> </figure>

Time and Publish Date Attribute <time pubdate datetime="2009-10-09T14:28-08:00"></time>

<article> <header> <h1>The Very First Rule of Life</h1> <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p> </header> <p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p> <p>...</p> <section> <h1>Comments</h1> <article> <footer> <p>Posted by: George Washington</p> <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p> </footer> <p>Yeah! Especially when talking about your lobbyist friends!</p> </article> <article> <footer> <p>Posted by: George Hammond</p> <p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p> </footer> <p>Hey, you have the same first name as me.</p> </article> </section> </article>

Breadcrumb Navigation <nav> <p> <a href="/" rel="index up up up">Main</a> > <a href="/products/" rel="up up">Products</a> > <a href="/products/dishwashers/" rel="up">Dishwashers</a> > <a>Second hand</a> </p> <p> <a href="/" rel="index up up">Main</a> > <a href="/second-hand/" rel="up">Second hand</a> > <a>Dishwashers</a> </p> </nav> Similarly, pagination can be done with first, last, next and prev

Menu and Command <menu type="toolbar"> <command type="radio" radiogroup="alignment" checked="checked" label="Left" icon="icons/alL.png" onclick="setAlign('left')"> <command type="radio" radiogroup="alignment" label="Center" icon="icons/alC.png" onclick="setAlign('center')"> <command type="radio" radiogroup="alignment" label="Right" icon="icons/alR.png" onclick="setAlign('right')"> <hr> <command type="command" disabled label="Publish" icon="icons/pub.png" onclick="publish()"> </menu>

Menu (continued) <menu type="toolbar"> <li> <menu label="File"> <button type="button" onclick="fnew()">New...</button> <button type="button" onclick="fopen()">Open...</button> <button type="button" onclick="fsave()">Save</button> <button type="button" onclick="fsaveas()">Save as...</button> </menu> </li> <li> <menu label="Edit"> <button type="button" onclick="ecopy()">Copy</button> <button type="button" onclick="ecut()">Cut</button> <button type="button" onclick="epaste()">Paste</button> </menu> </li> <li> <menu label="Help"> <li><a href="help.html">Help</a></li> <li><a href="about.html">About</a></li> </menu> </li> </menu>

Mark is highlighting something <p><mark>Momentum is preserved across the wormhole. Electromagnetic radiation can travel in both directions through a wormhole, but matter cannot.</mark></p> Strong is different, denotes importance <p>When a wormhole is created, a vortex normally forms. <strong>Warning: The vortex caused by the wormhole opening will annihilate anything in its path.</strong> Vortexes can be avoide when using sufficiently advanced dialing technology.</p>

Not all Navigation should use <nav> <nav></nav> only main navigation, for instance footer nav is secondary

Article is unique content to the page. <article></article>

Hgroup, highest rank group of headings <hgroup></hgroup>

Itemscope and Itemprop <div itemscope> <p>My name is <span itemprop="name">Elizabeth</span>.</p> </div> <div itemscope> <p>My name is <span itemprop="name">Daniel</span>.</p> </div> <div itemscope> <p>My name is <span itemprop="name">Neil</span>.</p> <p>My band is called <span itemprop="band">Four Parts Water</ span>.</p> <p>I am <span itemprop="nationality">British</span>.</p> </div>

Media Tags <video src=” cat.ogg” /> add native controls <video src=”cat.ogg” controls />

Media Tags <video controls/> <source src=”cat.mp4” /> <source src=”cat.ogg” /> </video> http://camendesign.com/code/video_for_everybody

Video Format Support Ogg Theora/Voribs - Firefox 3.5+ - Chrome - Opera MPEG-4 H.264/AAC - Safari - Chrome - Opera

Native Video Fallback with Flash - Safari (v4.0.4+) - Google Chrome (v4.0+) - Firefox (v3.6+) http://jilion.com/sublime/video

Media Tags <audio src=”test.ogg”></audio> <audio src=”test.ogg” autoplay controls loop> <a href=”test.ogg”>download</a> </audio>

Native GeoLocation navigator.geolocation.getCurrentPosition( function(position){ position.coords.latitude, position.coords.longitude } );

GeoLocation w/ Google Ajax API fallback if (navigator && navigator.geolocation) { // HTML5 GeoLocation function getLocation(position) { proccessDirections.sortLocations( position.coords.latitude, position.coords.longitude ); } navigator.geolocation.getCurrentPosition(getLocation); } else { // Google AJAX API fallback GeoLocation if ((typeof google == 'object') && google.loader && google.loader.ClientLocation) { proccessDirections.sortLocations( google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude ); } }

Canvas <canvas id=”square”> fallback content </canvas> <script> canvas = canvas.getElementById(‘square’); context = canvas.getContext(‘2d’); context.fillStyle = “#000000”; context.fillRect(0, 0, 100, 100); </script>

Canvas Internet Explorer Support ExplorerCanvas http://code.google.com/p/explorercanvas/

Input Types <input type=”email” /> tel datetime search date email range url color Unsupported browsers default to text.

Input Types Input type changes keyboard on iphone.

Input Type Range

Input Type Range + Datalist <input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers"> <datalist id="powers"> <option value="0"> <option value="-30"> <option value="30"> <option value="+50"> </datalist>

Input Type Number + Output <input name=a type=number step=any> + <input name=b type=number step=any> = <output onforminput="value = a.value + b.value"></output>

File Upload Multiple <input type=file multiple>

Input Type Email + Multiple <label>Cc: <input type=email multiple name=cc></label>

Datalist <label>Homepage: <input name=hp type=url list=hpurls></label> <datalist id=hpurls> <option value="http://www.google.com/" label="Google"> <option value="http://www.reddit.com/" label="Reddit"> </datalist>

Form Validation <input name="custname" required> <script> form.checkValidity(); </script>

Custom Validation <label>Feeling: <input name=f type="text" oninput="check(this)"></label> <script> function check(input) { if (input.value == "good" || input.value == "fine" || input.value == "tired") { input.setCustomValidity('"' + input.value + '" is not a feeling.'); } else { // input is fine -- reset the error message input.setCustomValidity(''); } } </script>

Storage sessionStorage.setItem(key, value); sessionStorage.getItem(key); localStorage.setItem(key, value); localStorage.getItem(key);

Local Storage in Yahoo! Search Pad

Local Storage in Yahoo! Search Pad http://www.jstorage.info/

Application Storage / Offline <html manifest=”cache.manifest”> detect online or offline window.addEventListener('online', online, true); window.addEventListener('offline', online, true);

Draggable <div draggable=”true”></div> addEvent(div, “dragstart”, function(e){ e.dataTransfer.setData(‘foo’, ‘bar’); }, true); addEvent(div, ‘dragend’, function(e){ e.dataTransfer.getData(‘foo’); }, true);

Cross Domain Messaging postMessage(string); onMessage(event) { event.data; }

Editable Content Turn an element into an editable area. <script> document.getElementsByTagName('p')[0].contentEditable = true; </script>

Web Sockets var ws = new WebSocket("ws://hostname:80/"); ws.onmessage = function (event) { event.data }; ws.onclose = function () {}; ws.onopen = function () {};

Web Worker new Worker("worker.js"); - Don’t have access to DOM or page. - Have to communicate through postMessage API

http://html5demos.com/

Web GL 3D O3D http://www.youtube.com/watch?v=uofWfXOzX-g

Questions? Marc Grabanski: http://marcgrabanski.com User interface and web application development. Examples: http://mjgin.com/work.html Twitter: http://twitter.com/1Marc Email: m@marcgrabanski.com

http://marcgrabanski.com	2250
http://www.andrewsellick.com	1606
http://www.36kr.com	1220
http://localhost	878
http://vothanhduy.wordpress.com	438
http://creuna.dk.local.creuna.net	436
http://blog.dreamcss.com	425
http://creuna.dk.demo.cs.local	387
http://ticsyformacion.com	328
http://local.creuna.dk	187
http://www.jornaljava.com	187
http://creuna.dk.demo.creuna.net	139
http://www.slideshare.net	129
http://opencms-auth.soma.salesforce.com	127
http://assets.marcgrabanski.com	119
http://semantic.pe.kr	109
http://ismailmohd.wordpress.com	95
http://enable85.cafe24.com	93
http://sunei.labs.mystage.tw	93
http://blueb.net	88
http://creuna.com.local.creuna.net	77
http://creuna.com.demo.creuna.net	60
http://sharepoint.tistory.com	60
http://notes.vacantcanvas.com	59
http://technologylearn.blogspot.com	56
http://reali.kr	55
http://www.mimul.com	50
http://vothanhduy.com	48
http://wiki.bcmoney-mobiletv.com	45
http://www.digitalmkt.info	42
http://speakerrate.com	42
http://joefrancisninal.xtreemhost.com	41
http://www.developersnacks.com	39
http://xianguo.com	39
http://test.ools.fr	38
http://www.siggyvolgt.nl	37
http://mimul.com	36
http://www.mashme.tv	30
http://blogdk.demo.creuna.net	30
http://www.hksilicon.com	28
http://blog.ignar.name	28
http://www.uco.es	25
http://127.0.0.1	25
http://andrebrov.blogspot.com	24
http://labs.mystage.tw	22
http://developersnacks.blogspot.com	22
http://www.semantic.pe.kr	22
http://www.appx.de	19
http://generationtv.tumblr.com	18
http://web	18
http://creuna.com.demo.cs.local	18

HTML5 Essentials

by Marc Grabanski on Feb 25, 2010

Accessibility

Categories

Upload Details

Usage Rights

129 Embeds 10,852

Statistics

HTML5 Essentials Presentation Transcript