1. Mark Branom, Continuing Studies

2.  HTML5 overview – what’s new?  New HTML5 elements  New HTML5 features  Guided Demonstrations  Forms  Video  Geolocation  Local/Offline Storage  Canvas

3.  New !doctype  New elements (tags)  Who decided?  http://www.whatwg.org/ http://www.whatwg.org/  http://www.w3.org/ http://www.w3.org/  Complete listing of what’s new:  http://www.w3.org/TR/html5-diff http://www.w3.org/TR/html5-diff

4.  Direct from the WhatWG (Web Hypertext Applications Technology Working Group) http://www.whatwg.org/specs/web-apps/current- work/multipage/syntax.html#the-doctype http://www.whatwg.org/specs/web-apps/current- work/multipage/syntax.html#the-doctype “DOCTYPEs are required for legacy reasons. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications. Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications.”  HTML5 doctype:

5.  The root element should contain the (human) language for the document:

6.  The contains meta information – information about the web page.

7.  SECTION defines sections of a web page  NAV defines navigational elements / nav bars  ARTICLE defines a self-contained composition – like a blog posting, a journal article, etc.  ASIDE defines a section that is related to an article

8.  HGROUP defines the heading of a section, grouping h1-h6  HEADER defines the introductory or navigational parts of a page  FOOTER defines the ending or navigational parts of a page, often containing the tag  TIME defines a date/time -- e.g., when the document was created  MARK defines text that should be highlighted for some reason

9.  IE 8 (and earlier) doesn’t understand the new HTML5 elements.  To use the HTML5 elements and have them work properly in IE, you need to “teach” IE to use them by writing a JavaScript that creates the elements: document.createElement("article"); document.createElement("section"); document.createElement("nav"); document.createElement("header"); document.createElement("footer");

12. BrowserMP3WavOgg IE 9  Firefox  Chrome Safari* ** Opera  *Safari supports anything that QuickTime supports

13. BrowserMP4WebMOgg IE 9  Firefox  Chrome Safari* **** Opera  *Safari supports anything that QuickTime supports

14.  Audacity: http://audacity.sourceforge.net/ http://audacity.sourceforge.net/  Firefogg: http://firefogg.org/ http://firefogg.org/  Goldwave: http://www.goldwave.com/ http://www.goldwave.com/

15.  Miro: http://www.mirovideoconverter.com/ http://www.mirovideoconverter.com/  Handbrake: http://handbrake.fr/ http://handbrake.fr/  Firefogg: http://firefogg.org/ http://firefogg.org/

16. New form types:  EMAIL: single-line textbox for email  URL: single-line textbox for URL  NUMBER: single-line textbox for a number  RANGE: single-line text box for a range of numbers  DATE/MONTH/WEEK/TIME/DATETIME: calendar date/month/week/time/date and time  SEARCH: single-line text box for searching  COLOR: picking a color

17.  Modifying the FORM tag  autocomplete – browser automatically completes values the visitor has previously entered  novalidate – form does NOT validate

18.  Modifying the INPUT tag  autofocus – field gets focus when page loads  form – lets you specify which form this field belongs  formaction – overrides the action attribute  formmethod – overrides the method attribute  novalidate – field does NOT validate  required– field must be filled out to validate

19.  Geolocation locates the user using a new property: navigator.geolocation var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{x.innerHTML="Geolocation not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + " Longitude: " + position.coords.longitude; }

20.  Canvas is used to draw graphics using JavaScript. Your browser does not support the canvas element var c=document.getElementById('CanvasExample'); var ctx=c.getContext('2d'); ctx.fillStyle='#820000'; ctx.fillRect(0,0,50,50);

21.  LocalStorage is used to store information locally on the user’s computer/device. It’s designed to be a better choice than cookies. if(typeof(Storage)!=="undefined") { localStorage.item1="item number 1"; document.getElementById("example").innerHTML="First Item: " + localStorage.item1; } else { document.getElementById("example").innerHTML="Hmmm, your browser does not support local storage..."; }

22.  Dive Into HTML5 http://diveintohtml5.info  W3C’s HTML5 information: http://www.w3.org/TR/html5 http://www.w3.org/TR/html5  Web Hypertext Applications Technology Working Group: http://www.whatwg.org/ http://www.whatwg.org/  In-class examples: http://web.stanford.edu/group/csp/ cs22/html5/ http://web.stanford.edu/group/csp/ cs22/html5/  CanIUse: http://caniuse.com/ http://caniuse.com/  HTML5Doctor: http://www.html5doctor.com/ http://www.html5doctor.com/  W3Schools: http://www.w3schools.com http://www.w3schools.com