Your SlideShare is downloading. ×
A primer on the web’s present and future
November 16, 2011 – Daniel Stout
HTML5
HTML5 is an umbrella term (HTML, CSS3, etc.).
HTML5 is backward-compatible.
HTML5 is a bunch of individual features.
HTML5...
What do I need to do to upgrade to HTML5?
Change your DOCTYPE:
<!DOCTYPE html>
And that’s it.
THE DOCTYPE
<article> (main content)
<aside> (sidebar)
<figure> & <figcaption> (descriptive image)
<footer>
<header>
<hgroup> (multile...
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“utf-8” />
<title>My HTML5</title>
<script src=“myscript.js”></scrip...
MULTIMEDIA
Bye bye, Flash!
Browser support for video without a plugin.
Problem: Different browsers support different codecs (H.264, WebM,
etc.).
The ...
Easy way to add audio to a page.
Most browsers support Ogg Vorbis, except Safari.
Easy:
<audio src="BlackEyedPeas-MyHumps....
The canvas tag allows simple or complex drawing.
<canvas> is defined in the HTML and modified via JavaScript.
<canvas id="...
<form>
<input name=“search” placeholder=“Search the website”>
<input type=“email” required>
<input type=“url”>
<input type...
API for determining location.
More than one way to figure out location:
IP address, wireless networks, cell towers, GPS.
S...
Used to store data onto the user’s computer.
5 MB of storage by default.
Uses named key/value pairs.
In the future, more r...
DOES IT ALL WORK?
Making sure it does
Internet Explorer before IE9 doesn’t understand tags like
<article>.
But JavaScript can fix this.
Implement HTML5Shiv in t...
Modernizr is a JS library that checks HTML5 and CSS3 elements
to see if they’re supported in the user’s browser.
http://ww...
Upcoming SlideShare
Loading in...5
×

HTML5: A primer on the web's present and future

209

Published on

An introduction to HTML5. New tags and technologies available to all web developers.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
209
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5: A primer on the web's present and future"

  1. 1. A primer on the web’s present and future November 16, 2011 – Daniel Stout HTML5
  2. 2. HTML5 is an umbrella term (HTML, CSS3, etc.). HTML5 is backward-compatible. HTML5 is a bunch of individual features. HTML5 works. Now. WHAT IS HTML5?
  3. 3. What do I need to do to upgrade to HTML5? Change your DOCTYPE: <!DOCTYPE html> And that’s it. THE DOCTYPE
  4. 4. <article> (main content) <aside> (sidebar) <figure> & <figcaption> (descriptive image) <footer> <header> <hgroup> (multilevel heading – <h1> allowed!) <mark> (marked text for some reason) <nav> (navigation) <section> (generic grouping) <time> (Either time or date or both) NEW SEMANTIC TAGS
  5. 5. <!DOCTYPE html> <html lang=“en”> <head> <meta charset=“utf-8” /> <title>My HTML5</title> <script src=“myscript.js”></script> (no “type” for JS or CSS) </head> <body> <article> <h1>Hello!</h1> <p>This is a document.</p> </article> </body> </html> HTML5 SIMPLIFIES
  6. 6. MULTIMEDIA Bye bye, Flash!
  7. 7. Browser support for video without a plugin. Problem: Different browsers support different codecs (H.264, WebM, etc.). The video tag supports multiple sources. Implement like this: <video width="600" height="255" controls> <source src="myVideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="myVideo.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="myVideo.ogv" type='video/ogg; codecs="theora, vorbis"' /> </video> VIDEO
  8. 8. Easy way to add audio to a page. Most browsers support Ogg Vorbis, except Safari. Easy: <audio src="BlackEyedPeas-MyHumps.ogg" controls preload></audio> Include Safari: <audio controls preload> <source src="BlackEyedPeas-MyHumps.mp3" /> (for Safari) <source src="BlackEyedPeas-MyHumps.ogg" /> </audio> AUDIO
  9. 9. The canvas tag allows simple or complex drawing. <canvas> is defined in the HTML and modified via JavaScript. <canvas id="myCanvas" width="350" height="350"></canvas> <script> var aCanvas = document.getElementById("myCanvas"); var aContext = aCanvas.getContext("2d"); aContext.beginPath(); aContext.moveTo(10, 20); aContext.lineTo(320, 63); aContext.strokeStyle = "#000"; aContext.stroke(); </script> DRAWING
  10. 10. <form> <input name=“search” placeholder=“Search the website”> <input type=“email” required> <input type=“url”> <input type="number" min="0" max="12" step="3" value="6"> <input name=“q” type=“search”> <input type=“submit” value=“Submit”> </form> FORMS
  11. 11. API for determining location. More than one way to figure out location: IP address, wireless networks, cell towers, GPS. Spec says that user permission must be granted before geolocation can be used. GEOLOCATION
  12. 12. Used to store data onto the user’s computer. 5 MB of storage by default. Uses named key/value pairs. In the future, more robust solutions will be common: Web SQL Database. HTML5 LOCAL STORAGE
  13. 13. DOES IT ALL WORK? Making sure it does
  14. 14. Internet Explorer before IE9 doesn’t understand tags like <article>. But JavaScript can fix this. Implement HTML5Shiv in the <head>: <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> https://code.google.com/p/html5shiv/ HTML5 SHIV
  15. 15. Modernizr is a JS library that checks HTML5 and CSS3 elements to see if they’re supported in the user’s browser. http://www.modernizr.com/ MODERNIZR

×