Download presentation
Presentation is loading. Please wait.
1
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
2
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
3
Dive Into HTML5 - Start Using It Now!
8/24/2012 New HTML5 Syntax New !doctype New elements (tags) Who decided? Complete listing of what’s new: Show the w3c page. Show the whatwg page - IT Services Technology Training Techie Festival - Summer 2012
4
Dive Into HTML5 - Start Using It Now!
8/24/2012 !doctype Direct from the WhatWG (Web Hypertext Applications Technology Working Group) “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
5
Root element <html>
The root element should contain the (human) language for the document: <html lang="en">
6
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. IT Services Technology Training Techie Festival - Summer 2012
7
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)
8
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
9
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>
10
New HTML5 features
11
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
12
Audio support Browser MP3 Wav Ogg IE 9 Firefox Chrome Safari* *
Opera *Safari supports anything that QuickTime supports
13
Video support Browser MP4 WebM Ogg IE 9 Firefox Chrome Safari* *
Opera *Safari supports anything that QuickTime supports
14
Tools to convert audio Audacity: http://audacity.sourceforge.net/
Firefogg: Goldwave:
15
Tools to convert video Miro: http://www.mirovideoconverter.com/
Handbrake: Firefogg:
16
Forms New form <input> types:
single-line textbox for 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
New form attributes Modifying the FORM tag
autocomplete – browser automatically completes values the visitor has previously entered novalidate – form does NOT validate
18
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
19
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
20
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
21
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
22
Resources Dive Into HTML5
W3C’s HTML5 information: Web Hypertext Applications Technology Working Group: In-class examples: CanIUse: HTML5Doctor: W3Schools:
Similar presentations
