SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
1.
HTML 5: The Future of the
Web
Tim Wright | csskarma.com | @csskarma
Friday, July 23, 2010 1
2.
A Brief Introduction
• University of Southern California Web Services
• CSSKarma
• Smashing Magazine & SitePoint
csskarma.com/presentations/penn
Friday, July 23, 2010 2
4.
What we’ll cover
• What is it?
• Living in the past
• Debunking some rumors
• New Attributes & Elements
• Audio & Video APIs
Friday, July 23, 2010 4
5.
What else we’ll cover
• Forms
• Accessibility
• Geolocation
• HTML 5 Storage & sockets
• Browser & Device Support
• Current Events
Friday, July 23, 2010 5
6.
HTML 5 = Markup + JS APIs
Friday, July 23, 2010 6
7.
Quick History
1991 - Informal HTML 1998 - CSS 2
1994 - HTML 2 2000 - XHTML 1
1996 - CSS 1 & JavaScript 2002 - Tableless designs
1997 - HTML 4 2005 - Ajax
2009 - HTML 5
Friday, July 23, 2010 7
8.
Is HTML 5 Ready?
via ishtml5readyyet.com
Friday, July 23, 2010 8
9.
The real scoop
• Last call for a working draft: Oct. 2009
• Candidate recommendation: 2012
• finished spec
• Proposed recommendation: 2022
• 2 browsers with full implementation
via adactio.com
Friday, July 23, 2010 9
17.
Notable changes
Block-level anchors
Presentational elements like <i>, <b>,
<cite> & <small> redefined
Friday, July 23, 2010 17
18.
What was removed
Annoying elements: <font>, <big>
(but not small), <center>,
<frame>, <acronym>
Weird attributes we don’t use: bgcolor,
axis, border, summary
via adactio.com
Friday, July 23, 2010 18
19.
Markup freedom
<li class="foo">Hello world</li>
<img src="barf.jpg" alt="picture of vomit" />
<li class=foo>Hello world
<img src=barf.jpg alt=picture of vomit>
<LI CLASS="foo">Hello world</LI>
<IMG SRC="barf.jpg" ALT="picture of vomit">
<li class=foo>Hello world</li>
<img src=foo alt=bar>
via adactio.com
Friday, July 23, 2010 19
20.
New...building robust applications
Attributes
Friday, July 23, 2010 20
21.
Editing content
<div contentEditable=”true”></div>
Friday, July 23, 2010 21
22.
Spellcheck
<div spellcheck=”true”></div>
Friday, July 23, 2010 22
23.
Hiding elements
<div hidden></div>
Friday, July 23, 2010 23
24.
Easy drag and drop
<div draggable=”true”></div>
document.addEventListener('dragstart',
function(event) {
alert(‘drag started’);
}, false);
Friday, July 23, 2010 24
26.
Embedding data-*
<section data-latitude=”38.254” data-
longitude=”85.72”>
[ content ]
</section>
Data for the application to consume
Friday, July 23, 2010 26
27.
Structural Elements
...some new semantics
Friday, July 23, 2010 27
42.
Video
<video controls autoplay poster=”titlescreen.jpg”>
<src=”monkey.ogv”>
<src=”monkey.mp4”>
Your browser still stinks
</video>
Friday, July 23, 2010 42
43.
Fallbacks
<video controls autoplay>
<src=”monkey.ogv”>
<src=”monkey.mp4”>
[ flash fallback ]
[ text fallback ]
</video>
Mobile solution?
Friday, July 23, 2010 43
51.
Let’s see one
http://www.csskarma.com/lab/demomachine/
Friday, July 23, 2010 51
52.
Degradation & Benefits
Degrades to a text box
Increased usability & conversion rates
Easier styling with attribute selectors
Easy validation & less spam
Friday, July 23, 2010 52
53.
Accessibility
Built-in vs. Bolt-on
Friday, July 23, 2010 53
72.
New <video>
<video src=”video.mp4” controls preload>
Friday, July 23, 2010 72
73.
What does clean mean?
• Reduced page weight
• Speed & Responsiveness
• Higher conversions
• Better usability
• Happy users
• Device development
Friday, July 23, 2010 73
74.
New JavaScript
...and Ninja-like qualities
Friday, July 23, 2010 74
75.
New JavaScript
Finding elements by class (DOM API)
document.getElementbyClassname(“skipmenu”);
Finding elements by CSS syntax (selectors API)
document.querySelectorAll(“#nav ul > li”);
document.querySelector(“:hover”);
<li class=foo>Hello world</li>
<img src=foo alt=bar>
Friday, July 23, 2010 75
76.
classList API
var element = $(‘div’);
element.classList.add(‘class-name’);
element.classList.remove(‘class-name’);
element.classList.toggle(‘class-name’);
via davidwalsh.name
Friday, July 23, 2010 76
77.
Geolocationbut still way cool
Not actually HTML5,
Friday, July 23, 2010 77
78.
Data Sources
• GPS
• Cellular Network
• IP
Friday, July 23, 2010 78
79.
Information
• Latitude
• Longitude
• Accuracy
• Altitude
• Altitude Accuracy
• Heading
• Timestamp
• Speed
Friday, July 23, 2010 79
91.
Local Storage (demo)
http://www.csskarma.com/lab/html5/localstorage/
Using:
contentEditable=”true”
localStorage.setItem()
localStorage.getItem()
localStorage.clear()
Friday, July 23, 2010 91
92.
Web Sockets
Bi-directional, full-duplex communications channels,
over a single TCP socket, designed to be implemented
in Web browsers and Web servers.
http://dev.w3.org/html5/websockets/
Friday, July 23, 2010 92
99.
WebM video format
High-quality open video format
YouTube for compression over ogg (.ogv)
IE9, Chrome, Firefox & Opera support
WebM converter -> mirovideoconverter.com
Friday, July 23, 2010 99
100.
New <track> Element
Friday, July 23, 2010 100
103.
What we covered
• What is it?
• Living in the past
• Debunking some rumors
• New Attributes & Elements
• Audio & Video APIs
Friday, July 23, 2010 103
104.
What we covered (cont.)
• Forms
• Accessibility
• Geolocation
• HTML 5 Storage & sockets
• Browser & Device Support
• Current Events
Friday, July 23, 2010 104
105.
Steal my work
csskarma.com/presentations/penn/
Friday, July 23, 2010 105
106.
“Never memorize
something you that can
look up”
- Albert Einstein
Friday, July 23, 2010 106