HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All...
Transcript of HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All...
![Page 1: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/1.jpg)
© 2009-2010 R. Scott GrannemanLast updated 20101009
You are free to use this work, with certain restrictions.For full licensing information, please see the last slide/page.
Washington University in St. LouisR. Scott Granneman
The Future of HTMLHTML5
1Saturday, October 9, 2010
![Page 2: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/2.jpg)
Warning!All of this may change!
The spec is still in development!
2Saturday, October 9, 2010
![Page 3: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/3.jpg)
Bye Bye
3Saturday, October 9, 2010
![Page 4: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/4.jpg)
Elements
4Saturday, October 9, 2010
![Page 5: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/5.jpg)
<basefont><font>
Use CSS instead
5Saturday, October 9, 2010
![Page 6: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/6.jpg)
<big><center>
<s><strike>
<tt><u>
Use CSS instead
6Saturday, October 9, 2010
![Page 7: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/7.jpg)
<frame><frameset><noframes>
Removed due topoor usability & accessibility
7Saturday, October 9, 2010
![Page 8: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/8.jpg)
<acronym>Use <abbr> instead
8Saturday, October 9, 2010
![Page 9: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/9.jpg)
<applet>Use <object> instead
9Saturday, October 9, 2010
![Page 10: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/10.jpg)
<dir>Use <ul> instead
10Saturday, October 9, 2010
![Page 11: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/11.jpg)
<isindex>Use form controls instead
11Saturday, October 9, 2010
![Page 12: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/12.jpg)
Attributes
12Saturday, October 9, 2010
![Page 13: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/13.jpg)
alignbgcolor
height & on <td> & <th>hspace & vspace
nowrapvalignwidth
on <hr>, <table>, <td>, & <th>
13Saturday, October 9, 2010
![Page 14: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/14.jpg)
NewElements
14Saturday, October 9, 2010
![Page 15: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/15.jpg)
Metadata
15Saturday, October 9, 2010
![Page 16: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/16.jpg)
HTML 4.01 elements<head><title><base><link><meta><style>
16Saturday, October 9, 2010
![Page 17: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/17.jpg)
Scripting
17Saturday, October 9, 2010
![Page 18: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/18.jpg)
HTML 4.01 elements<script>
<noscript>
18Saturday, October 9, 2010
![Page 19: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/19.jpg)
Sections
19Saturday, October 9, 2010
![Page 20: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/20.jpg)
HTML 4.01 elements<body>
<h1>–<h6><address>
20Saturday, October 9, 2010
![Page 21: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/21.jpg)
<address>
“contact informationfor [the] nearest
article or body element ancestor”“must not be used
to represent arbitrary addresses(e.g. postal addresses)”
Use <p> instead
http://dev.w3.org/html5/spec-author-view/sections.html#the-address-element21Saturday, October 9, 2010
![Page 22: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/22.jpg)
<section>
“The section element represents a generic document or application
section … The section element is not a generic container element. When
an element is needed for styling purposes or as a convenience for
scripting, authors are encouraged to use the div element instead.”
22Saturday, October 9, 2010
![Page 23: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/23.jpg)
You should almost alwaysstart a section with a header
<section><h2>Header</h2>
<p>...</p></section>
23Saturday, October 9, 2010
![Page 24: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/24.jpg)
<article>
“a section of contentthat forms an independent part
of a document or site”In other words,
content that can stand on its own,a specialized kind of <section>
http://dev.w3.org/html5/markup/article.html24Saturday, October 9, 2010
![Page 25: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/25.jpg)
<article>An independent, self-contained
block of related content“Can it stand on its own?”
<section>A block of related content
“Is it related content?”<div>
A block of content“Is it a block of content?”
25Saturday, October 9, 2010
![Page 26: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/26.jpg)
For more on when to use what,see
“HTML5 articles and sections:what’s the di!erence?”
www.brucelawson.co.uk/2010/html5-articles-and-sections-
whats-the-di!erence/
26Saturday, October 9, 2010
![Page 27: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/27.jpg)
ExamplesForum post
Magazine or newspaper articleBlog entry
User-submitted commentInteractive widget
Any independent item of content
27Saturday, October 9, 2010
![Page 28: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/28.jpg)
“Authors are encouragedto use the article element
instead of the section elementwhen it would make sense
to syndicatethe contents of the element.”
28Saturday, October 9, 2010
![Page 29: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/29.jpg)
Typically has a header& sometimes a footer
29Saturday, October 9, 2010
![Page 30: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/30.jpg)
Use <section> to split <article>into logical groups of content
30Saturday, October 9, 2010
![Page 31: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/31.jpg)
<article> <h1>Cthulhu Mythos</h1> <p>Lorem ipsum</p> <section> <h2>Yog-Sothoth</h2> <p>Lorem ipsum</p> </section> <section> <h2>Nyarlathotep</h2> <p>Lorem ipsum</p> </section></article>
31Saturday, October 9, 2010
![Page 32: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/32.jpg)
Use <article> to split <section>into logical groups of content
32Saturday, October 9, 2010
![Page 33: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/33.jpg)
<section> <h1>Articles on Cthulhu</h1> <article> <h2>Yog-Sothoth</h2> <p>Lorem ipsum</p> </article> <article> <h2>Nyarlathotep</h2> <p>Lorem ipsum</p> </article></section>
33Saturday, October 9, 2010
![Page 34: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/34.jpg)
<aside>
Tangentially related content! Sidebars
! Pull quotes! Glossary
! Related links
34Saturday, October 9, 2010
![Page 35: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/35.jpg)
<hgroup>
“… used to groupa set of h1–h6 elements
when the headinghas multiple levels,
such as subheadings,alternative titles,
or taglines.”
http://www.w3.org/TR/html5/semantics.html#the-hgroup-element35Saturday, October 9, 2010
![Page 36: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/36.jpg)
<hgroup> <h1>Dr. Strangelove</h1> <h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2></hgroup><hgroup> <h1>Google Apps Deciphered</h1> <h2>Compute in the Cloud to Streamline Your Desktop</h2></hgroup>
36Saturday, October 9, 2010
![Page 37: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/37.jpg)
Do not use <hgroup>if you have only one header element
<hgroup> <h1>Google Apps Deciphered</h1></hgroup>
37Saturday, October 9, 2010
![Page 38: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/38.jpg)
<header>
Introductory or navigational aidsUsually contains
! A section’s heading(<h1>–<h6> or <hgroup>)! Table of contents
! Logos! Search form
Does not introduce a new section;it is the head of a section
38Saturday, October 9, 2010
![Page 39: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/39.jpg)
<footer>
Replaces <div id=“footer”>Footer not just for pages,but also for sections too
Info such as! Author
! Copyright! Links to related content
! Contact info (in <address>)
39Saturday, October 9, 2010
![Page 40: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/40.jpg)
<nav>
“a section of a pagethat links to other pages
or to parts within the page:a section with navigation links.”Only “major navigation blocks”No need for <nav> in <footer>
http://www.w3.org/TR/html5/semantics.html#the-nav-element40Saturday, October 9, 2010
![Page 41: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/41.jpg)
Grouping Content
41Saturday, October 9, 2010
![Page 42: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/42.jpg)
<p><hr><br><pre>
<blockquote>
<ol><ul><li><dl><dt><dd>
HTML 4.01 elements
42Saturday, October 9, 2010
![Page 43: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/43.jpg)
<hr>
In HTML 4, inserted horizontal ruleIn HTML5, indicates
“paragraph-level thematic break”(not sections—use <section>)
Use to separate topics or scenes
http://dev.w3.org/html5/markup/small.html43Saturday, October 9, 2010
![Page 44: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/44.jpg)
Replace boring browser renderingwith CSS
hr {height: 24px; background: url(“flourish.png”) no-repeat 50% 50%;
margin: 3em 0; border: 0;}
44Saturday, October 9, 2010
![Page 45: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/45.jpg)
Text-LevelSemantics
45Saturday, October 9, 2010
![Page 46: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/46.jpg)
<a><em>
<strong><small><cite><q>
<dfn><abbr><code>
<var><samp><kbd><sub><sup><i><b>
<bdo><span>
HTML 4.01 elements
46Saturday, October 9, 2010
![Page 47: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/47.jpg)
<i>
HTML 4: italicHTML5: text in an “alternate voice”
ExamplesForeign words <i lang=“fr”>
Technical termsShip names
Stage directionsTypographically italicized text
47Saturday, October 9, 2010
![Page 48: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/48.jpg)
<b>
HTML 4: boldHTML5: “stylistically o!set” text
that’s not more importantExamplesKeywords
Product names in a reviewTypographically emboldened text
48Saturday, October 9, 2010
![Page 49: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/49.jpg)
This is bold only for stylistic reasons,not because it is more important
49Saturday, October 9, 2010
![Page 50: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/50.jpg)
<em>
HTML 4: emphasis (italic)HTML5: “stress emphasis” text
ExamplesSomething pronounced di!erently
“Come here now!”
50Saturday, October 9, 2010
![Page 51: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/51.jpg)
<strong>
HTML 4: strong emphasis (bold)HTML5: “strong importance” text
ExamplesWarning: Do not feed the bears.
51Saturday, October 9, 2010
![Page 52: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/52.jpg)
<small>
In HTML 4, made text smallerIn HTML5, indicates
side comments & small printExamples:
legal disclaimers, disclaimers, copyright & licensing info,
& attributionsInline equivalent of <aside>
http://dev.w3.org/html5/markup/small.html52Saturday, October 9, 2010
![Page 53: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/53.jpg)
<mark>
“a highlight that was not originally present but which has been added to bring the reader’s attention to a part of the text that might not have been considered important by the original author when the block was originally
written, but which is now under previously unexpected scrutiny.”
http://dev.w3.org/html5/spec/Overview.html#the-mark-element53Saturday, October 9, 2010
![Page 54: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/54.jpg)
54Saturday, October 9, 2010
![Page 55: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/55.jpg)
<strong>Indicate the importance of words,like errors or warning messages
<em>Stress words to adapt meaning
55Saturday, October 9, 2010
![Page 56: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/56.jpg)
<progress>
Represents task’s progressCan be
! Indeterminate(“I’m working but I don’t know
how long it’ll take”)! Number in range(“I’m 75% done”)
http://www.w3.org/TR/html5/text-level-semantics.html#the-progress-element56Saturday, October 9, 2010
![Page 57: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/57.jpg)
<meter>
“Scalar measurement withina known range,
or a fractional value”Must have minimum & maximum
57Saturday, October 9, 2010
![Page 58: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/58.jpg)
CorrectYou scored <meter>75%</meter>
IncorrectYou scored <meter value=“75”>
</meter>
58Saturday, October 9, 2010
![Page 59: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/59.jpg)
<meter value=“0.5”>Moderate activity,</meter> Usenet, 618
subscribers<meter value=“0.25”>Low activity,</meter> Usenet, 22 subscribers<meter value=“0.25”>Low activity,</meter> Usenet, 66 subscribers
59Saturday, October 9, 2010
![Page 60: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/60.jpg)
<time>
“either a time on a 24 hour clock,or a precise date
in the proleptic Gregorian calendar… intended as a way
to encode modern dates and timesin a machine-readable way
so that user agentscan o!er to add them
to the user’s calendar”
http://www.w3.org/TR/html5/text-level-semantics.html#the-time-element60Saturday, October 9, 2010
![Page 61: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/61.jpg)
“not intended for encoding timesfor which a precise date or time
cannot be established”
http://www.w3.org/TR/html5/text-level-semantics.html#the-time-element61Saturday, October 9, 2010
![Page 62: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/62.jpg)
<ruby>Ruby markup
<rp>Ruby parenthesis
<rt>Ruby text
http://www.w3.org/TR/html5/text-level-semantics.html#the-ruby-element62Saturday, October 9, 2010
![Page 63: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/63.jpg)
Edits
63Saturday, October 9, 2010
![Page 64: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/64.jpg)
HTML 4.01 elements<ins><del>
64Saturday, October 9, 2010
![Page 65: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/65.jpg)
EmbeddedContent
65Saturday, October 9, 2010
![Page 66: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/66.jpg)
HTML 4.01 elements<img>
<iframe><object><param><source><map><area>
66Saturday, October 9, 2010
![Page 67: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/67.jpg)
<figure>
“annotate illustrations, diagrams, photos, code listings, etc, that are
referred to from the main content of the document, but that could,
without a!ecting the flow of the document, be moved away from that primary content, e.g. to the side of the page, to dedicated pages, or to
an appendix.”http://www.whatwg.org/specs/web-apps/current-work/multipage/
embedded-content-1.html#the-figure-element67Saturday, October 9, 2010
![Page 68: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/68.jpg)
<dt>Caption<dd>
Contents
68Saturday, October 9, 2010
![Page 69: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/69.jpg)
<figure> <dd><video src="basterds.mov"></video> <dt>Figure 6. The <cite>Inglourious Basterds</cite> trailer.</figure>
69Saturday, October 9, 2010
![Page 70: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/70.jpg)
<figure> <dd> <p>'Twas brillig, and the slithy toves <br>Did gyre and gimble in the wabe;</p> </dd> <dt><cite>Jabberwocky</cite>. Lewis Carroll, 1832-98</dt></figure>
70Saturday, October 9, 2010
![Page 71: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/71.jpg)
<canvas>
“a resolution-dependentbitmap canvas,
which can be used forrendering graphs,
game graphics,or other visual images
on the fly.”
http://www.w3.org/TR/html5/the-canvas-element.html#the-canvas-element71Saturday, October 9, 2010
![Page 72: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/72.jpg)
“a rectangle in your pagewhere you can use JavaScriptto draw anything you want …
[using]a set of functions (“the canvas API”)
for drawing shapes,defining paths,
creating gradients,and applying transformations.”
http://diveintohtml5.org/detect.html72Saturday, October 9, 2010
![Page 73: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/73.jpg)
<embed>
Insert external (typically non-HTML)application or interactive content
73Saturday, October 9, 2010
![Page 74: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/74.jpg)
<audio>
Play audio without pluginsEmbed Flash as a fallback
http://www.w3.org/TR/html5/video.html#audiohttp://html5doctor.com/native-audio-in-the-browser/
74Saturday, October 9, 2010
![Page 75: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/75.jpg)
<audio src=“elvis.ogg” controls autobuffer></audio>
autoplay
autobufferDownload file in background
loop
75Saturday, October 9, 2010
![Page 76: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/76.jpg)
Ogg
MP3
WAV
76Saturday, October 9, 2010
![Page 77: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/77.jpg)
<video>
Play video without Flashor other plugins
77Saturday, October 9, 2010
![Page 78: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/78.jpg)
<video width=“640” height=“360” src=“http://www.youtube.com/demo/google_main.mp4” controls></video>
autoplay
autobufferNo autoplay,
so video downloaded in backgroundposter=“action.png”
Display image if video doesn’t load
78Saturday, October 9, 2010
![Page 79: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/79.jpg)
Ogg
H.264(MP4)
WebM
79Saturday, October 9, 2010
![Page 80: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/80.jpg)
<source>
“allows authorsto specify multiple media resources
for media elements.It does not represent anything
on its own.”Always a child of media elements
<video> & <audio>
http://www.w3.org/TR/html5/video.html#the-source-element80Saturday, October 9, 2010
![Page 81: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/81.jpg)
<video> … <source src=“video.mp4” type=“video/mp4”> <source src=“video.ogv” type=“video/ogg; codecs=‘theora, speex’”></video>
81Saturday, October 9, 2010
![Page 82: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/82.jpg)
Tabular Data
82Saturday, October 9, 2010
![Page 83: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/83.jpg)
<table><caption><colgroup>
<col><tbody>
<thead><tfoot><tr><td><th>
HTML 4.01 elements
83Saturday, October 9, 2010
![Page 84: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/84.jpg)
Forms
84Saturday, October 9, 2010
![Page 85: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/85.jpg)
<form><fieldset><label><input><button>
<select><optgroup><option>
<textarea>
HTML 4.01 elements
85Saturday, October 9, 2010
![Page 86: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/86.jpg)
<datalist>
“ a set of option elementsthat represent predefined options
for other controls.The contents of the elementrepresents fallback content
for legacy user agents,intermixed with option elements
that representthe predefined options.”
http://www.w3.org/TR/html5/forms.html#the-datalist-element86Saturday, October 9, 2010
![Page 87: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/87.jpg)
<keygen>
“… a key pair generator control.When the control’s form
is submitted,the private key
is stored in the local keystore,and the public key
is packaged and sent to the server.”
http://www.w3.org/TR/html5/forms.html#the-keygen-element87Saturday, October 9, 2010
![Page 88: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/88.jpg)
<output>
“the result of a calculation.”
http://www.w3.org/TR/html5/forms.html#the-output-element88Saturday, October 9, 2010
![Page 89: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/89.jpg)
Interactive
89Saturday, October 9, 2010
![Page 90: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/90.jpg)
<menu>
Represents a list of commands<menu type=“context|toolbar|list”>
90Saturday, October 9, 2010
![Page 91: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/91.jpg)
<menu type="toolbar"> <li> <menu label="File"> … </menu> </li> <li> <menu label="Edit"> <button type="button" onclick="ecopy()">Copy</button> <button type="button">Cut</button> </menu> </li></menu>
91Saturday, October 9, 2010
![Page 92: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/92.jpg)
<menu> <li> <menu label="Help"> <li><a href="help.html">Help</a></li> <li><a href="about.html">About</a></li> </menu> </li></menu>
92Saturday, October 9, 2010
![Page 93: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/93.jpg)
<hr> used as separator
93Saturday, October 9, 2010
![Page 94: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/94.jpg)
<command>
A command that a user can run
http://www.w3.org/TR/html5/interactive-elements.html#the-command94Saturday, October 9, 2010
![Page 95: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/95.jpg)
<details>
“additional information or controlswhich the user
can obtain on demand.”
http://www.w3.org/TR/html5/interactive-elements.html#the-details-element95Saturday, October 9, 2010
![Page 96: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/96.jpg)
Miscellaneous
96Saturday, October 9, 2010
![Page 97: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/97.jpg)
HTML 4.01 elements<legend><div>
97Saturday, October 9, 2010
![Page 98: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/98.jpg)
Microformats
98Saturday, October 9, 2010
![Page 99: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/99.jpg)
What’s a microformat?
99Saturday, October 9, 2010
![Page 100: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/100.jpg)
“web-based approachto semantic markup
which seeks to re-useexisting HTML/XHTML tags
to convey metadata& other attributes
in web pages”
100Saturday, October 9, 2010
![Page 101: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/101.jpg)
Data encoded in webpages(contact info, calendar events, etc.)
that allows softwareto automatically process that data
for end-users
101Saturday, October 9, 2010
![Page 102: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/102.jpg)
For more, seemicroformats.org
102Saturday, October 9, 2010
![Page 103: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/103.jpg)
hCard
103Saturday, October 9, 2010
![Page 104: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/104.jpg)
Representspeople, companies,
organizations, & placesUses a 1:1 representation of vCard
104Saturday, October 9, 2010
![Page 105: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/105.jpg)
(1)Find a photo of yourself& name it your-name.jpg
(2)Upload your-name.jpg
to your website
105Saturday, October 9, 2010
![Page 106: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/106.jpg)
(3)Create your own hCard
microformats.org/code/hcard/creator(4)
Save the code toyour-name.htm
(5)Upload your-name.htm
to your website
106Saturday, October 9, 2010
![Page 107: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/107.jpg)
(6)Enter the URL
pointing to your-name.htmat h2vx.com/vcf/
(7)Use the generated HTML
on your webpages(Feel free to change the text
inside the <a>)
107Saturday, October 9, 2010
![Page 108: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/108.jpg)
108Saturday, October 9, 2010
![Page 109: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/109.jpg)
Further reading“hCard 1.0”
microformats.org/wiki/hcard“hCard authoring”
microformats.org/wiki/hcard-authoring
“hCard microformat Validator”hcard.geekhood.net
109Saturday, October 9, 2010
![Page 110: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/110.jpg)
hCalendar
110Saturday, October 9, 2010
![Page 111: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/111.jpg)
Represents calendaring eventsUses a 1:1 representation
of iCalendar
111Saturday, October 9, 2010
![Page 112: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/112.jpg)
(1)Create your own hCardmicroformats.org/code/
hcalendar/creator(2)
Save the code toyour-event.htm
(3)Upload your-event.htm
to your website112Saturday, October 9, 2010
![Page 113: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/113.jpg)
(4)Enter the URL
pointing to your-name.htmat h2vx.com/ics/
(5)Use the generated HTML
on your webpages(Feel free to change the text
inside the <a>)
113Saturday, October 9, 2010
![Page 114: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/114.jpg)
114Saturday, October 9, 2010
![Page 115: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/115.jpg)
Further reading“hCalendar 1.0”
microformats.org/wiki/hCalendar
“hCalendar authoring”microformats.org/wiki/hcalendar-authoring
115Saturday, October 9, 2010
![Page 116: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/116.jpg)
Problems&
Solutions116Saturday, October 9, 2010
![Page 117: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/117.jpg)
IE
117Saturday, October 9, 2010
![Page 118: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/118.jpg)
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
118Saturday, October 9, 2010
![Page 119: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/119.jpg)
Modernizr
119Saturday, October 9, 2010
![Page 120: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/120.jpg)
Google Chrome Frame
120Saturday, October 9, 2010
![Page 121: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/121.jpg)
Thank you!
Email: [email protected]: www.granneman.com
Publications: www.granneman.com/pubsBlog: blog.granneman.comTwitter: scottgranneman
121Saturday, October 9, 2010
![Page 122: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/122.jpg)
© 2009-2010 R. Scott GrannemanLast updated 20101009
You are free to use this work, with certain restrictions.For full licensing information, please see the last slide/page.
Washington University in St. LouisR. Scott Granneman
The Future of HTMLHTML5
122Saturday, October 9, 2010
![Page 123: HTML5 - files.granneman.comfiles.granneman.com/presentations/html/HTML5_slides.pdf · Warning! All of this may change! The spec is still in development! Saturday, October 9, 2010](https://reader033.fdocuments.us/reader033/viewer/2022060505/5f1e52f8c5618d5aee229ba5/html5/thumbnails/123.jpg)
Licensing of this workThis work is licensed under the Creative Commons Attribution-ShareAlike License.
To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/1.0or send a letter to Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA.
In addition to the rights and restrictions common to all Creative Commons licenses, the Attribution-ShareAlike License features the following key conditions:
Attribution. The licensor permits others to copy, distribute, display, and perform the work. In return, licensees must give the original author credit.
Share Alike. The licensor permits others to distribute derivative works under a license identical to the one that governs the licensor’s work.
Questions? Email [email protected]
123Saturday, October 9, 2010