The document is a presentation about HTML 5 and discusses several key points:
- HTML 5 introduces new semantic elements like <header>, <nav>, <article>, and <footer> that provide more meaning than generic <div> tags.
- HTML 5 offers new form input types, audio/video elements, and JavaScript APIs that allow for richer user experiences and interactions compared to previous versions of HTML.
- While HTML 5 is still a work in progress, many of the new features are already supported in modern browsers, and fallback techniques exist to provide support for older browsers. The presentation encourages developers to start using HTML 5 now where feasible.
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
HTML 5: The Future of the Web
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
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
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
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
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