paving the cow paths html5 the next big old thing in web applications
TRANSCRIPT
Paving the cow pathsHTML5 the next big old thing in web applications
A brief history of HTML
1991
Physicist, Sir Tim Berners-Lee proposes and prototypes HTML
1995
Internet Engineering Task Force (IETF) publishes HTML 2.0 1997
W3C publishes HTML 3.2
1999
W3C Publishes HTML 4.01 2000
W3C publishes XHTML 1X = eXtensible
Cleaning the SlateXHTML 2 the search for purity of language.
Not backwards compliant
Unburdened by sloppy history
Pure LanguageXH
TM
L 2
Let them eat XMLThe W3C Revolution
Ian Hickson firers the first shot of the revolution
Web Hypertext Application Technology Working Group, or WHATWG is formed2
004
Web Forms 2.0 + Web Apps 1.0 = HTML5
Sir Tim Berners-Lee writes that the move from HTML to XML was not working.
W3C issues new charter for HTML 5 and uses the work done by WHATWG as a basis
2006
With Space
The fog begins to clear
2009The 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)
XHTML 2 is dead... HTML5 is ready for takeoff
Philosophy behind HTML5
Specify current browser behaviors
Define error handling
Evolve the language for easier creation of web applications
3 aim
s
Specify current browser behaviors
•“Pave the cowpaths”•Don’t break existing web pages•If it ain’t broke, don’t fix it!
1
Define error handling
•HTML5 Specification is over 900 pages•600 pages for the implementation of browsers•<b></i>Hello</b></i>
2
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
3
Ok, So lets recap . . .
XHTML 2 is dead
We now have 2 groups developing HTML5
WHATWGW3C
HTML5 is:
Future of the web
Easiest HTML to get started with
Most powerful HTML ever
Let’s get our hands dirty
Structure
Text
Forms
Video &
Audio
Canvas
Drag & Drop
Data Storage
HTM
L5
Keeping it simple
Text
XHTML 1.0
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict //EN” ↵
“http://www .w3.org/TR/xhtm l1/DTD/xhtm l1-str ict.dtd ”>
HTML5
<!doctype html>
XHTML 1.0
<metta http-equiv=”Content-Type” content=”text/html;
charset=UTF-8”>
HTML5
<meta charset=utf-8>
Keeping it simple
Text
XHTML 1.0
<script type=”text/javascript” src=”file.js”></script>
HTML5
<script src=”file.js”></script>
XHTML 1.0
<link rel=”stylesheet” type=”text/css” href=”file.css”>
HTML5
<link rel=”stylesheet” href=”file.css”>
Deprecated Tags
In with the new . . .
Text
Frames
<frameset> <frame>
Anchors
<a name=”top”></a>
<div id=”top”>
Others
<plaintext> <basefont> <big> <font> <tt> <s> <strike> <u>
<center>
Obsolete
Text
POPULARITY VALUE FREQUENCY
1 footer 179,528
2 menu 146,673
3 style1 138,308
4 msonormal 123,374
5 text 122,911
6 content 113,951
7 title 91,957
8 style2 89,851
9 header 86,979
10 copyright 86,979
11 button 81,503
12 main 69,620
13 style3 69,349
14 small 68,995
15 nav 68,634
16 clear 68,571
17 search 59,802
18 style4 56,032
19 logo 48,831
20 body 48,052
2009 index result for class names of 2,148,723 sites
POPULARITY VALUE FREQUENCY
1 footer 288,061
2 content 228,661
3 header 223,726
4 logo 121,352
5 container 119,877
6 main 106,327
7 table1 101,677
8 menu 96,161
9 layer1 93,920
10 autonumber1 77,350
11 search 74,887
12 nav 72,057
13 wrapper 66,730
14 top 66,615
15 table2 57,934
16 layer2 56,823
17 sidebar 52,416
18 image1 48,922
19 banner 44,592
20 navigation 43,664
2009 index result for ID names of 2,148,723 sites
what is the “real web” made of?
Getting semantical
ID NamesClass Names
HTML5 has 28 new elements
What’s new in markup
Structural elements
<header><footer><nav><section><article><aside><hgroup>
Inline elements
<command><details><summary><figure><figcaption><mark><meter><progress><ruby><rt><rp><time><wbr>
Text
Yes even in IE
Making it work now
Styling HTML5
header, nav, footer, article {display:block;}
Making it work in IEUse JavaScript to create the elements
<script> document.createElement(‘header’); document.createElement(‘nav’); document.createElement(‘article’); document.createElement(‘footer’);</script>
orYou can use Remy’s tiny HTML5-enabling script
http://remysharp.com/2009/01/07/html5-enabling-script/
The structure of a page
<!doctype html>
<meta charset=utf-8>
<title>My html5
page</title>
<body>
<header> . . . </header>
<nav> . . . </nav>
<section>
<article> . . .
</article>
<article> . . .
</article>
</section>
<footer> . . . </footer>
</body>
</html>
My Company
•About Us
•Services
•News
•Events
•Locations
•Contact Us 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,
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.
Copy right 2011 All rights reserved
Structuring content
TextNews story oneLorem 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,
Resent News
News story twoLorem 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,
<section>
<h1>Resent News</h1>
<article>
<h2>News story
one</h2>
<p>Lorem ipsum . . .
</p>
</article>
<article>
<h2>News story
two</h2>
<p>Lorem ipsum . . .
</p>
</article>
</section>
Structuring content
Text
News story oneAugust 10, 2011Lorem 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,
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
<time datetime=”2011-08-10T08:30:00-05:00”
pubdate>
August 10, 2011
</time>
There can be only one!
Web Forms 2.0
This picture was NOT taken at a dotCMS usability study. . . it was taken after.
Will HTML finally ❤ us back?
Various Types
<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”>
Date & Time
<input type=”date”><input type=”month”><input type=”week”><input type=”time”><input type=”datetime-local”>
New form elements
Others
<meter value=”.75”><progress value=”24” max=”100”>
New attributes
placeholder
autofocus
required
autocomplete
Mobile Examples Examples
tel, url, and email
Examples in Opera 11
Dates & Times
Text
<input type=”date”> <input type=”datetime”> <input type=”week”>
<input type=”time”>
<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”>
New input elements
<progress>
<progress value=”75” max=”100”>75%</progress>
color <input type=”color”>
<input type=”color”>
New input elements
Currently only support in Opera 11 and use the OS’s native color picker
Using them now!
http://www.modernizr.com/
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}
They’re here . . .Native Video & Audio
Video & Audio
<audio>
Text<video>
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
Anatomy of the video element
Audio and fallback
<audio controls><source src="thats-some-dream.ogg" type="audio/ogg" /> <source src="thats-some-dream.mp3" type="audio/mpeg" /><object type="application/x-shockwave-flash" data="..."> <param name="movie" value="..." /> </object> </audio>
Audio and fallback
<audio id="player2" preload="auto"><source src="thats-some-dream.ogg" type="audio/ogg" /> <source src="thats-some-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 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
Looking the same cross browser.
Custom video controls
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>
80px
60px
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 circlectx.moveTo(210,75);ctx.arc(175,75,35,0,Math.PI,false); // Mouthctx.moveTo(165,65);ctx.arc(160,65,5,0,Math.PI*2,true); // Left eyectx.moveTo(195,65);ctx.arc(190,65,5,0,Math.PI*2,true); // Right eyectx.stroke();
</script>
Put your backs into it!Dragging & Dropping
•The black sheep of the APIs
•Why is it even in the HTML5
spec
•Needs tweaks for each browser
Drag and drop
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 & stuffWeb storage & web SQL db
•Cookies on steroids
•Storage Options
•Web Storage
•Web SQL Databases
Web Storage API
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">
•Web SQL
•Offline
•Messages
•Workers
•Sockets
Other HTML5 APIs
Getting started todayHTML5 strategy
•Start with the basics
•Feature Detection
•Stick with your strategy
Getting started today
HTML5 & dotCMS
What doe this mean for dotCMS?
•Form builder to HTML5
•Local storage for click trails
•Threading JavaScript
HTML5 & dotCMS