Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Paving the cow paths HTML5 the next big old thing in web applications A brief history of HTML 1991 Physicist, Sir Tim Berners-Lee proposes and prototypes HTML Internet Engineering Task Force (IETF) publishes HTML 2.0 1997 1995 W3C Publishes HTML 4.01 2000 1999 W3C publishes HTML 3.2 W3C publishes XHTML 1 X = eXtensible Cleaning the Slate XHTML 2 the search for purity of language. XHTML 2 Not backwards compliant Unburdened by sloppy history Pure Language Let them eat XML The W3C Revolution 2004 Ian Hickson firers the first shot of the revolution Web Hypertext Application Technology Working Group, or WHATWG is formed Web Forms 2.0 + Web Apps 1.0 = HTML5 2006 Sir Tim Berners-Lee writes that the move from HTML to XML was not working. With Space W3C issues new charter for HTML 5 and uses the work done by WHATWG as a basis The fog begins to clear XHTML 2 is dead... HTML5 is ready for takeoff 2009 The W3C official stopped working on XHTML 2 and diverts resources to HTML 5 insert picture of next generation spacecraft (TBD please see Russia or China) aims 3 Philosophy behind HTML5 Specify current browser behaviors Define error handling Evolve the language for easier creation of web applications 1 Specify current browser behaviors •“Pave the cowpaths” •Don’t break existing web pages •If it ain’t broke, don’t fix it! 2 Define error handling •HTML5 Specification is over 900 pages •600 pages for the implementation of browsers •<b></i>Hello</b></i> 3 Evolve the language for easier creation of web applications •Sever-sent events •drag and drop •video, audio and canvas •New form tags and input types •client side storage Ok, So lets recap . . . XHTML 2 is dead   ; We now have 2 groups developing HTML5 W3C WHATWG HTML5 is: Future of the web Easiest HTML to get started with Most powerful HTML ever HTML5 Let’s get our hands dirty Structure Text Forms Video & Audio Canvas Drag & Drop Data Storage Keeping it simple XHTML 1.0 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict //EN” ↵ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> HTML5 <!doctype html> Text XHTML 1.0 <metta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”> HTML5 <meta charset=utf-8> Keeping it simple XHTML 1.0 <script type=”text/javascript” src=”file.js”></script> HTML5 <script src=”file.js”></script> Text XHTML 1.0 <link rel=”stylesheet” type=”text/css” href=”file.css”> HTML5 <link rel=”stylesheet” href=”file.css”> In with the new . . . Deprecated Tags Frames <frameset> <frame> Anchors Text Text <a name=”top”></a> <div id=”top”> Others <plaintext> <basefont> <big> <font> <tt> <s> <strike> <u> <center> Whats changed http://dev.w3.org/html5/html4-differences/ Getting semantical what is the “real web” made of? ID Names Class Names POPULARITY VALUE FREQUENCY POPULARITY VALUE FREQUENCY 1 footer 179,528 1 footer 288,061 2 menu 146,673 2 content 228,661 3 style1 138,308 3 header 223,726 4 msonormal 123,374 4 logo 121,352 5 text 122,911 5 container 119,877 6 content 113,951 6 main 106,327 7 title 91,957 7 table1 101,677 8 style2 89,851 8 menu 96,161 9 header 86,979 9 layer1 93,920 10 copyright 86,979 10 autonumber1 77,350 11 button 81,503 11 search 74,887 12 main 69,620 12 nav 72,057 13 style3 69,349 13 wrapper 66,730 14 small 68,995 14 top 66,615 15 nav 68,634 15 table2 57,934 16 clear 68,571 16 layer2 56,823 17 search 59,802 17 sidebar 52,416 18 style4 56,032 18 image1 48,922 19 logo 48,831 19 banner 44,592 20 body 48,052 20 navigation 43,664 2009 index result for class names of 2,148,723 sites 2009 index result for ID names of 2,148,723 sites What’s new in markup HTML5 has 28 new elements Structural elements Inline elements <header> <footer> <nav> <section> <article> <aside> <hgroup> <command> <details> <summary> <figure> <figcaption> <mark> <meter> <progress> <ruby> <rt> <rp> <time> <wbr> Making it work now Yes even in IE Styling HTML5 header, nav, footer, article {display:block;} or You can use Remy’s tiny HTML5-enabling script Making it work in IE Use JavaScript to create the elements <script> document.createElement(‘header’); document.createElement(‘nav’); document.createElement(‘article’); document.createElement(‘footer’); </script> http://remysharp.com/2009/01/07 /html5-enabling-script/ The structure of a page <!doctype html> My Company <meta charset=utf-8> <title>My html5 page</title> • • • • • • About Us Services News Events Locations Contact Us Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit aliquam eleifend. Mauris eu ligula nulla. Quisque et ante sem, eget adipiscing nisi. Maecenas commodo interdum tellus id molestie. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean gravida libero tempus lectus hendrerit at dictum ligula semper. Mauris accumsan orci id ipsum porta at pretium lectus interdum. Curabitur metus urna, egestas ut condimentum laoreet, sagittis vitae dolor. Nulla ac nunc nec dolor tempor pretium accumsan nec risus. Praesent vitae nisi vel augue fermentum egestas. Maecenas metus libero, Text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit aliquam eleifend. Mauris eu ligula nulla. Quisque et ante sem, eget adipiscing nisi. Maecenas commodo interdum tellus id molestie. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean gravida libero tempus lectus hendrerit at dictum ligula semper. Mauris accumsan orci id ipsum porta at pretium lectus interdum. Curabitur metus urna, egestas ut condimentum laoreet, sagittis vitae dolor. Nulla ac nunc nec dolor tempor pretium accumsan nec risus. Praesent vitae nisi vel augue fermentum egestas. Maecenas metus libero, rutrum non ullamcorper ut, congue quis turpis. <body> <header> . . . </header> <nav> . . . </nav> <section> <article> . . . </article> <article> . . . </article> </section> <footer> . . . </footer> </body> Copy right 2011 All rights reserved </html> Structuring content <section> Resent News <h1>Resent News</h1> News story one Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit aliquam eleifend. Mauris eu ligula nulla. Quisque et ante sem, eget adipiscing nisi. Maecenas commodo interdum tellus id molestie. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean gravida libero tempus lectus hendrerit at dictum ligula semper. Mauris accumsan orci id ipsum porta at pretium lectus interdum. Curabitur metus urna, egestas ut condimentum laoreet, sagittis vitae dolor. Nulla ac nunc nec dolor tempor pretium accumsan nec risus. Praesent vitae nisi vel augue fermentum egestas. Maecenas metus libero, Text <article> <h2>News story one</h2> <p>Lorem ipsum . . . </p> </article> <article> News story two Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit aliquam eleifend. Mauris eu ligula nulla. Quisque et ante sem, eget adipiscing nisi. Maecenas commodo interdum tellus id molestie. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean gravida libero tempus lectus hendrerit at dictum ligula semper. Mauris accumsan orci id ipsum porta at pretium lectus interdum. Curabitur metus urna, egestas ut condimentum laoreet, sagittis vitae dolor. Nulla ac nunc nec dolor tempor pretium accumsan nec risus. Praesent vitae nisi vel augue fermentum egestas. Maecenas metus libero, <h2>News story two</h2> <p>Lorem ipsum . . . </p> </article> </section> Structuring content News story one August 10, 2011 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit aliquam eleifend. Mauris eu ligula nulla. Quisque et ante sem, eget adipiscing nisi. Maecenas commodo interdum tellus id molestie. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean gravida libero tempus lectus hendrerit at dictum ligula semper. Mauris accumsan orci id ipsum porta at pretium lectus interdum. Curabitur metus urna, egestas ut condimentum laoreet, sagittis vitae dolor. Nulla ac nunc nec dolor tempor pretium accumsan nec risus. Praesent vitae nisi vel augue fermentum egestas. Maecenas metus libero, Text This article is completely plagiarized from this site www.lipsum.com <article> <h2>News story one</h2> <time datetime=”2011-08-10T08:30:00-05:00” pubdate>August 10, 2011</time> <p>Lorem ipsum . . . </p> <small>This article is . . .</small> </article> Machine-readable dates & times Text There can be only one! <time datetime=”2011-08-10T08:30:00-05:00” pubdate> August 10, 2011 </time> HTML5 outliner http://gsnedders.html5.org/outliner/ Web Forms 2.0 Will HTML finally ❤ us back? This picture was NOT taken at a dotCMS usability study . . . it was taken after. New form elements Various Types Date & Time <input type=”search”> <input type=”tel”> <input type=”url”> <input type=”email”> <input type=”number”> <input type=”color”> <input type=”range”> <input type=”text” list=”myId”> <input type=”date”> <input type=”month”> <input type=”week”> <input type=”time”> <input type=”datetime-local”> Others <meter value=”.75”> <progress value=”24” max=”100”> New attributes placeholder autofocus required autocomplete Current Support http://wufoo.com/html5/ tel, url, and email Mobile Examples Examples Dates & Times Examples in Opera 11 Text <input type=”date”> <input type=”datetime”> <input type=”time”> <input type=”week”> New input elements <meter> (display) <meter value=”74” max=”100”> 74% </meter> <meter value=”.75”> 3/4 </meter> <meter min=”0” max=”250” value=”185”> 74% </meter> New input elements range (meter input) <input type=”range” min=”0” max=”250”> <progress> <progress value=”75” max=”100”>75%</progress> New input elements color <input type=”color”> <input type=”color”> Currently only support in Opera 11 and use the OS’s native color picker Using them now! function checkAttribute(element, attribute) { var test = document.createElement(element); if (attribute in test) { return true; } else { return false; } } if (!checkAttribute('input', 'placeholder')) { // No support for placeholders, so add them with JS } http://www.modernizr.com/ They’re here . . . Native Video & Audio Video & Audio <audio> <video> Text Anatomy of the video element Attribute VALUE Description audio muted Specifies the default state of the the audio. Currently, only "muted" is allowed autoplay autoplay If present, then the video will start playing as soon as it is ready controls controls If present, controls will be displayed, such as a play button height pixels Sets the height of the video player loop loop If present, the video will start over again, every time it is finished poster url Specifies the URL of an image representing the video preload auto/none/metadata Specifies whether or not the video should be loaded when the page loads src url The URL of the video to play width pixels Sets the width of the video player Audio and fallback <audio controls> <source src="thats-some-dream.ogg" type="audio/ogg" /> some-dream.mp3" type="audio/mpeg" /> <object type="application/x-shockwave-flash" data="..."> name="movie" value="..." /> </object> </audio> <source src="thats<param Audio and fallback <audio id="player2" preload="auto"> <source src="thats-some-dream.ogg" type="audio/ogg" /> <source src="thatssome-dream.mp3" type="audio/mpeg" /> <object type="application/x-shockwave-flash" data="..."> <param name="movie" value="..." /> </object> </audio> <button onclick="document.getElementById('player2').play();">Play</button> <button onclick="document.getElementById('player2').pause();">Pause</button> <button onclick="document.getElementById('player2').volume += 0.1">Vol +</button> <button onclick="document.getElementById('player2').volume -= 0.1">Vol -</button> Audio conversion http://media.io/ Audio and fallback <video controls width="360" height="240" poster="placeholder.jpg"> <source src="thats-some-dream.ogv" type="video/ogg" /> <source src="thats-some-dream.mp4" type="video/mp4" /> <object type="application/x-shockwave-flash" data="..."> <param name="movie" value="..." /> </object> </video> Audio and fallback Custom video controls Looking the same cross browser. Custom video controls Painting the Canvas Getting artsy with HTML5 Canvas element <canvas id=”myCanvas” width=”700” height=”250”> </canvas> Canvas element <canvas id=”myCanvas” width=”700” height=”250”> <p>Your browser does not support the canvas element.</p> <img src=”no-support-image.png” alt=”no support” /> </canvas> Your browser does not support the canvas element. Canvas element <canvas id=”myCanvas” width=”700” height=”250”> <p>Your browser does not support the canvas element.</p> <img src=”no-support-image.png” alt=”no support” /> </canvas> <script> var ctx1 = document.querySelector('canvas').getContext('2d'); ctx1.fillStyle = 'rgb(0, 255, 0)'; ctx1.fillRect(80, 60, 150, 150); </script> 60px 80px 150px 150px Canvas element <canvas id=”myCanvas” width=”700” height=”250”> <p>Your browser does not support the canvas element.</p> <img src=”no-support-image.png” alt=”no support” /> </canvas> <script> var ctx1 = document.querySelector('canvas').getContext('2d'); ctx.beginPath(); ctx.arc(175,75,50,0,Math.PI*2,true); // Outer circle ctx.moveTo(210,75); ctx.arc(175,75,35,0,Math.PI,false); // Mouth ctx.moveTo(165,65); ctx.arc(160,65,5,0,Math.PI*2,true); // Left eye ctx.moveTo(195,65); ctx.arc(190,65,5,0,Math.PI*2,true); // Right eye ctx.stroke(); </script> Put your backs into it! Dragging & Dropping Drag and drop • • • The black sheep of the APIs Why is it even in the HTML5 spec Needs tweaks for each browser D&D example <img src="files/cooper.png" alt="Cooper" /> <img src="files/brady.png" alt="Brady" /> <div id="drop"></div> <script> var drop = document.getElementById('drop'); drop.ondrop = function (event) { this.innerHTML += '<p>' + event.dataTransfer.getData('Text') + '</p>'; return false; }; drop.ondragover = function (){return false;}; </script> http://dotcms.com/conference/2011/presentations/html5/files/cooper.png Local storage & stuff Web storage & web SQL db Web Storage API • Cookies on steroids • Storage Options • Web Storage • Web SQL Databases Web Storage API <script> sessionStorage.setItem('twitter', '@fishsmith'); function showName() { alert(sessionStorage.getItem('twitter')); } </script> <input type="button" onclick="showName();" value="Show Jason's Twiiter Name"> Other HTML5 APIs • • • • • Web SQL Offline Messages Workers Sockets Getting started today HTML5 strategy Getting started today • • • Start with the basics Feature Detection Stick with your strategy HTML5 & dotCMS What doe this mean for dotCMS? HTML5 & dotCMS • Form builder to HTML5 • Local storage for click trails • Threading JavaScript