Dive Into HTML5 - Start Using It Now! Mark Branom, Continuing Studies 8/24/2012 Overview of HTML5 Mark Branom, Continuing Studies IT Services Technology Training Techie Festival - Summer 2012
Dive Into HTML5 - Start Using It Now! 8/24/2012 Topics HTML5 overview – what’s new? New HTML5 elements New HTML5 features Guided Demonstrations Forms Video Geolocation Local/Offline Storage Canvas New HTML5 elements – Section, Nav, Article, Aside, Hgroup, Header, Footer, Time, Mark New HTML5 features – Canvas, Video/Audio, Forms, Geolocation, Local Storage/Offline Storage IT Services Technology Training Techie Festival - Summer 2012
Dive Into HTML5 - Start Using It Now! 8/24/2012 New HTML5 Syntax New !doctype New elements (tags) Who decided? http://www.whatwg.org/ http://www.w3.org/ Complete listing of what’s new: http://www.w3.org/TR/html5-diff Show the w3c page. Show the whatwg page - http://www.whatwg.org/ IT Services Technology Training Techie Festival - Summer 2012
Dive Into HTML5 - Start Using It Now! 8/24/2012 !doctype Direct from the WhatWG (Web Hypertext Applications Technology Working Group) 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: <!doctype html> Need to add the !doctype to prevent browsers from going into “quirks” mode. IT Services Technology Training Techie Festival - Summer 2012
Root element <html> The root element should contain the (human) language for the document: <html lang="en">
Head element <head> Dive Into HTML5 - Start Using It Now! 8/24/2012 Head element <head> The <head> contains meta information – information about the web page. <head> <meta charset="utf-8" /> <link rel="stylesheet" href="cssfilelocation.css" /> <link rel="alternate" type="application/rss+xml" title="RSS feed" href="feedlocation.xml" /> <link rel="shortcut icon" href="faviconlocation.ico" /> <link rel="nofollow" /> </head> What’s new about this? No need to add type=“text/css” to the stylesheet declaration. Not a requirement, but should always add the character set to help prevent hackers from injecting code into your web content. http://openmya.hacker.jp/hasegawa/security/utf7cs.html IT Services Technology Training Techie Festival - Summer 2012
New HTML5 elements 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 MAIN defines the main section (HTML 5.1)
New HTML5 elements (continued) 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 <address> tag
Internet Explorer 8 (and earlier) 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: <script> document.createElement("article"); document.createElement("section"); document.createElement("nav"); document.createElement("header"); document.createElement("footer"); </script>
New HTML5 features
Dive Into HTML5 - Start Using It Now! 8/24/2012 Video and Audio <video id="movie" width="xx" height="yy"> <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' /> <source src="movie.mp4" type="video/mpeg" /> </video> <audio id="sound"> <source src="song.mp3" type="audio/mpeg" /> <source src="song.ogg" type="audio/ogg" /> <source src="audio.wav" type="audio/wav" /> </audio> Biggest issue with video and audio is that no format is supported by all browsers. IT Services Technology Training Techie Festival - Summer 2012
Audio support Browser MP3 Wav Ogg IE 9 Firefox Chrome Safari* * Opera *Safari supports anything that QuickTime supports
Video support Browser MP4 WebM Ogg IE 9 Firefox Chrome Safari* * Opera *Safari supports anything that QuickTime supports
Tools to convert audio Audacity: http://audacity.sourceforge.net/ Firefogg: http://firefogg.org/ Goldwave: http://www.goldwave.com/
Tools to convert video Miro: http://www.mirovideoconverter.com/ Handbrake: http://handbrake.fr/ Firefogg: http://firefogg.org/
Forms New form <input> 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
New form attributes Modifying the FORM tag autocomplete – browser automatically completes values the visitor has previously entered novalidate – form does NOT validate
New form attributes 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
Dive Into HTML5 - Start Using It Now! 8/24/2012 Geolocation Geolocation locates the user using a new property: navigator.geolocation <script> 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 + "<br />Longitude: " + position.coords.longitude; } </script> This will show a map with our current location. IT Services Technology Training Techie Festival - Summer 2012
Dive Into HTML5 - Start Using It Now! 8/24/2012 Canvas Canvas is used to draw graphics using JavaScript. <canvas id="CanvasExample">Your browser does not support the canvas element</canvas> <script type="text/javascript"> var c=document.getElementById('CanvasExample'); var ctx=c.getContext('2d'); ctx.fillStyle='#820000'; ctx.fillRect(0,0,50,50); </script> This will draw a 50x50 pixel cardinal red box. IT Services Technology Training Techie Festival - Summer 2012
Local Storage/Offline Storage Dive Into HTML5 - Start Using It Now! 8/24/2012 Local Storage/Offline Storage LocalStorage is used to store information locally on the user’s computer/device. It’s designed to be a better choice than cookies. <div id="example"></div> <script> 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..."; </script> This should result with the following: First item: item number 1 IT Services Technology Training Techie Festival - Summer 2012
Resources Dive Into HTML5 http://diveintohtml5.info W3C’s HTML5 information: http://www.w3.org/TR/html5 Web Hypertext Applications Technology Working Group: http://www.whatwg.org/ In-class examples: http://web.stanford.edu/group/csp/cs22/html5/ CanIUse: http://caniuse.com/ HTML5Doctor: http://www.html5doctor.com/ W3Schools: http://www.w3schools.com