Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download HTML5
Document related concepts
no text concepts found
Transcript
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
Related documents