SlideShare a Scribd company logo
Html 5.0
HTML 5.0Kristof Degravehttp://kristofdegrave.blogspot.com@kristofdegrave
Who am I?Kristof DegraveIngelmunster, Belgiumwww.realdolmen.comFocus on webHTML 5.0, ASP.NEThttp://kristofdegrave.blogspot.com@kristofdegrave
Html 5.0
AgendaIntroduction to HTML 5.0Detecting HTML 5.0 FeaturesHTML5 SemanticMarkupelementsDrawingwith the browserPlay video and audioGeolocationStorageLet’stakeit offlineForm++MicrodataWebsocketsImproving performance
Introduction to HTML 5.0Fivethingsyoushouldknowabout HTML 5.0
Fivethingsyoushouldknowabout HTML 5.0It’s notone big thingYoudon’tneed to throwanythingawayIt’s easy to getstarted<!DOCTYPE html>ItalreadyworksIt’s here to stay
Map of HTML 5.0First Public Working Draft Working DraftLast CallCandidate RecommendationRecommendation
Detecting HTML 5.0 FeaturesYourbrowsersdoesn’t support it, shameonyou
Detectiontechnique #1Check if a certain property exists on a global object (such as window or navigator)function supports_geolocation() 	{ 		return !!navigator.geolocation; 	}
Detectiontechnique #2Create an element, then check if a certain property exists on that elementfunction supports_canvas_text() 	{ 		var supports_canvas =		  		     		      !!document.createElement('canvas').getContext; 		if (!supports_canvas) 		{ 		     return false; 		} vardummy_canvas = document.createElement('canvas'); var context = dummy_canvas.getContext('2d'); 		return typeofcontext.fillText == 'function'; 	}
Detectiontechnique #3Create an element, check if a certain method exists on that element, then call the method and check the value it returns.	function supports_h264_baseline_video() 	{ 		var supports_video = !!document.createElement('video').canPlayType		if (!supports_video) 		{ 		      return false; 		} var v = document.createElement("video"); 		return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'); 	}
Detectiontechnique #4Create an element, set a property to a certain value, then check if the property has retained its value.	function supports_input_type_date() 	{ vari = document.createElement("input");i.setAttribute("type", "color");		return i.type !== "text";	}
ModernizerHTML 5.0 Detectionlibraryhttp://www.modernizr.com/contains 40 feature detectionif (Modernizr.canvas) {      // let's draw some shapes! } else {      // no native canvas support available :( }
HTML5 SemanticMarkupelementsLearn it. Live it. Love it
New Semantic Elements <section>Thematic grouping of contentTypically with a headingA web sites home page couldbesplintintosectionsforIntroductionNews itemsContact information<nav>Section of a page that links to other pages or to parts within the pageOnly major navigationblocksNotfor links in the footer of the page
New Semantic Elements <article>Self-contained composition in a document, page, application, or siteTypically Forum postWeb log entryAny other independent item of content<aside>Consists of contant that is tangentially related to the content around the aside elementTypicallyTypographical effects like pull quotes or sidebarsAdvertisingGroups of nav elementsOther content that is considered separate from the main content of the page.
New Semantic Elements <header>Group of introductory or navigational aidsIntended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but not requiredThe header element can also be used:To wrap a section’s table of contentsA search formAny relevant logos<hgroup>Represents the heading of a sectionThe element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.H2 – H6 elements do not turn up within the document structure
New Semantic Elements <footer>Footer for its nearest ancestor sectioning content or sectioning root elementTypically contains information about its section such as:Who wrote itLinks to related documentsCopyright data<time>A time on a 24 hour clock, or a precise date in the proleptic Gregorian calendarOptionally a time and a time-zone offset<mark>Represents a run of text in one document marked or highlighted for reference purposes
Structure: HTML 4 vs HTML 5 HTML 4HTML 5
HgroupexplenationHTML 4.0<h1>This is a section</h1><section>	<h1>And this a subsection!</h1>	<h2>Tagline, this is part of the h1 subsection</h2>	<h1>And this a second subsection!</h1></section>Document structure1. This is a section1. And this a subsection!1. Tagline, this is part of the h1 subsection2. And this a second subsection!
HgroupexplanationHTML 5.0<h1>This is a section</h1><section>	<hgroup>	<h1>And this a subsection!</h1>	<h2>Tagline, this is part of the h1 subsection</h2></hgroup><h1>And this a second subsection!</h1></section>Document structure:1. This is a section1. And this a subsection!2. And this a second subsection!
WhataboutolderbrowsersUse HTML 5 shimCreates dummy HTML elements	<!--[if lt IE 9]>	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">	</script><![endif]-->Use HTML 5 ResetstylesheetAll browsers render unknown elements inline, i.e. as if they had a display:inline CSS rulehttp://html5doctor.com/html-5-reset-stylesheet/
Drawingwith the browser
CanvasCanvas 2D APIBitmap Based, JavaScript DrivenRectangles, Paths, Lines, Fills, Arcs, Curves, etc.GradientsAdding images“Immediate Mode”Control<canvas>Notsupported</canvas>Fallback
CancasDrawing a one-unit-lineDraw a line from (1,0) to (1,3)draw a line from (1.5, 0) to (1.5, 3)
SVGSVG 1.1Scalable Vector Graphics Vector BasedLanguage for describing 2D-graphics and graphical applications in XML“Retained Mode”
SVGShapes: ‘path’, ‘rect’, ‘circle’, ‘ellipse’, ‘line’, ‘polyline’ and ‘polygon’TextSolid Colors, Linear and Radial Gradients, PatternsRaster Images Styling (inline & CSS)
WhataboutolderbrowsersFallback to Flash orSilverlightFallback to images in some casesSomelibraries out there (someSilverlightplugins, RaphaelJavaScriptlibraryetc)
ExerciseCanvas:Draw a twodemensionalgridDraw a radialgradientAdd a part of an image ad scaleitSVGPolygonGradientelipse
Play video and audioWatchyourvideos without third-partyplugins
Video & audioVideo containersLike a zip fileDefines how to store things within them, not whatContainsA video track (without audio)Oneor more audio tracks (without video)Metadata (title, cover, …)ExamplesMPEG 4 (H.264 Baseline Profile video and AAC low-complexity audio)Flash videoOgg (Theora video and Vorbis audio)WebM (VP8 video codec and Vorbis audio codec)Audio Video Interleave
Video & audioVideo codecsAlgorithm by which a video stream is encodedLossyorlosslessExamplesH.264 (patent-encumbered)Theora (royalty-free codec)VP8 (royalty-free codec)Audio codecsAlgorithm by which a audio stream is encodedLossyorlosslessExamplesMP3 (patent-encumbered)Advanced Audio Coding (patent-encumbered)Vorbis (not patent-encumbered)
Video codec support *      Internet Explorer 9 will only support WebM “when the user has installed a VP8 codec” **    Although Android 2.3 supports WebM, there are no hardware decoders yet, so battery life is a concern.***  Safari will play anything that QuickTime can play, but QuickTime only comes with H.264/AAC/MP4 support        pre-installed.
Video & audioVideo workflow for maximum compatibilityMake one version that uses WebM (VP8 + Vorbis).Make another version that uses H.264 baseline video and AAC “low complexity” audio in an MP4 container.Make another version that uses Theora video and Vorbis audio in an Ogg container.Link to all three video files from a single <video> element, and fall back to a Flash- or Silverlight-based video player.
Live example<video id="movie" width="320" height="240" preload controls>	<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' /> 	<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' /> 	<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 	<object width="320" height="240" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf"> 		<param name="movie" value="flowplayer-3.2.1.swf" /> 		<param name="allowfullscreen" value="true" /> 		<param name="flashvars" value='config={"clip": {"url": 			"http://wearehugh.com/dih5/pr6.mp4", "autoPlay":false,			"autoBuffering":true}}' />	 	<p>			Download video as 			<a href="pr6.mp4">MP4</a>, 			<a href="pr6.webm">WebM</a>, or 			<a href="pr6.ogv">Ogg</a>.		</p> 	</object></video>
GeolocationHeream i
GeolocationOpt-inIP addressServersideInaccurateWireless network connectionBasedon MAC adresQuickIn- and outdoorsAccurateCell towerNeedsenoughcoverageMostlysmartphonesInaccurate
GeolocationDedicated GPSAccurateSlowNotavailableindoorsAssisted GPSImprovent of TTFFHybridSkyhookWireless Core Engine
Whataboutolder browserGearsOpen source browser plugin from googleWorks onWindows, Mac, Linux, Windows Mobile, and AndroidDrive specifiek APIEach platform has it’sonapiBlackBerry, Nokia, Palm, and OMTP BONDI
Geo.jsOpen source, MIT-licensed JavaScript library Smooths over the differences between the W3C geolocation API, the Gears API, and the APIs provided by mobile platformsInclude at the end of the page (for performance)Addgears_initfirst to initializegears	<script src="gears_init.js"></script>	<script src="geo.js"></script>First, call an init() function to determine if the geolocationapi is availableif (geo_position_js.init())Afterthisyoucancall the getCurrentPosition methode
StorageKeepingiton the client
PastCookiesIncluded in every HTTP RequestSlowing down the web appSending data unencryptedLimited to 4KBUserdatahierarchical XML-based structure64 KB per Domain640 KB fortrusteddomainsOnlyfor IENotallowed to increase the amount of dataNot presenting any form of permissions dialog
PastLocal Shared ObjectsAllows Flash objects to stored100 KB per domainIncrease of the amount of data is possible1 Mb, 10 Mb, and so onUser gets prompt foreachincreaseFlash is necessaryGearsOpen source browser pluginProvides api to anembedded Web SQL DatabaseSQLiteObtaining user permission onceUnlimited amounts of data per domain
PastDojoToolkitDojox.storageProvides a unified interfaceAuto-detecsAPI’s & PluginsAdobe FlashGearsAdobe AIRPrototype of HTML5 storage in FF
What do we wantA standardized APINatively and consistently in multiple browsersDon’t have to relay on third-party pluginsA lot of storage spaceOn the clientPersists beyond a page refreshIsn’t transmitted to the server
PresentWebstorageAlsoknown asHTML storageLocalstorageDom storageStores named key/value pairs Data is never transmitted to the remote web serverImplemented nativelyPersists data beyond Page refresh5MB per domainIncrease of quota is notallowedQUOTA_EXCEEDED_ERR when exceeding the quota
WebstorageAvailable in window objectKey and data are stored as stringInterface Storagegetter any getItem(in DOMString key); setter creator void setItem(in DOMString key, in any data);deleter void removeItem(in DOMString key); void clear();readonly attribute unsigned long length; getter DOMString key(in unsigned long index);
WebstorageTrack changesStorageEventOccerswhen the storageareachangesSetItemRemoveItemClearAnd has to actuallychangesomethingStorageevent object
FutureWeb SQL DatabaseFormerly known as “WebDBEmbedded database based on SQLiteThin wrapper around a SQL databaseExecuteSqlString as parameterString parameter can be any supported SQL statementSELECT, UPDATE, INSERT, and DELETESpecification work has stoppedThe specification reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.
FutureIndexed DatabaseFormerly known as “WebSimpleDB”Affectionately known as “IndexedDB”Exposesan object storeShares many concepts with a SQL databaseThere are “databases” with “records” Each record has a set number of “fields”Each field has a specific datatypeThis field is defined when the database is createdSelect subset of records and enumeratethemwith a cursor Changes are handled withintransactionsNo structured query languageInstead methodes are provide by the API
Let’stakeit offlineNo internet connection? Not a problem at all!
Offline web applicationsContradictionWebpages are thingsyou download and renderBut we can download the files when we are onlineConnect online to an offline enabled web appRead the list of URLs from the manifest fileDownload the resourcesCache them locallyAutomatically keep the local copies up to date as they changeConnect offline to a visited offline enabled web appBrowser automatically switches to the local copies
Offline web applicationsEventthatfireswhen the offline status changesHTML5 can take your web application offline, but the rest is up to youStore data localySyncwith server when the app is online…
Chache manifestA list of all of the resources that your web application might need to access while it’s disconnected from the networkHTMLCSSJSImages…Manifest attributeonhtml element<html manifest="/cache.manifest"> Canbelocatedanywhereon the serverEvery page of your web application needs a manifest attribute that points to the cache manifest for the entire application.
Cache manifestContentFirst line of every cache manifest file:CACHE MANIFESTThe following is devided in 3 partsExplicitsectionCACHE All files in this list willbedownloaded and cachedFallbacksectionFALLBACKPage thatwillbedisplayedwhenyou are trying to reach a page offline thathasn’t been cachedOutlinewhitelistsectionNETWORKContainsrecouresthatshouldneverbecached (ex. Cgiscritps)
Cache manifest ExampleCACHE MANIFEST FALLBACK: / /offline.html NETWORK: *
The flow of eventsFirst time visitCheckingeventFireswhen the browsersnotices a manifest attribute in the htmltagFiresalways, even ifyouallreadyvisited the pageDownloadingeventFiresif the browser has neverseenthis manifest fileProgres eventFiresperiodicallywhiledownloadingContainsinformationabout the number of files that have been downloaded and the number of files that are stillqueuedCachedeventFireswhen all the files in the manifest file are downloadedThe web app is nowfullycached and ready to use offline
The flow of eventsPreviously visitedNoupdateeventFiresifyouallreadyvisited the page and the manifest file hasn’tchangedDownloadingeventFiresifyouallreadyvisited the page and the manifest has changedRedownloadsevery single file listed in the manifest fileProgres eventFiresperiodicallywhiledownloadingContainsinformationabout the number of files that have beeUpdatereadyeventFireswhenredownloading was succesfullThe newversion web app is nowfullycachedCallwindow.applicationCache.swapCache() function or reload the page so the new version will be in use.
The flow of eventsErroreventFireswhensomethinggoes wrong in the flow of eventsPossibleerrorsHTTP error 404 (Page notfound)HTTP error 410 (PermanetlyGone)Page failed to download properlyManifest file changedwhile updatingBrowser failed to download one of the resources listed in the manifest file
Form++Takingforms to the next level
Know input typesCheckbox<input type="checkbox">Radio button<input type="radio">Password field<input type="password">Drop-down lists<select><option>…File picker<input type="file">Submit button<input type="submit">Plain text<input type="text">
New input typesEmail<input type="email">Web address<input type="url">
New input typesNumber (spin box)<input type="number"min="0" max="10" step="2" value="6“>Number (slider)<input type="range" min="0" max="10" step="2" value="6">Datetimepicker<input type="date">
New input types<input type="month"><input type="week">
New input types<input type="time"><input type="datetime"><input type="datetime-local">Search box<input type="search">
New input typesColor picker<input type="color">
FormvalidationAutomaticNo JS neededValidation happens even if JS is disabledDeterminesvalidationwith the type attributeE-mail -> checksforvalide-mailaddressUrl -> checksforvalid URLNumber -> checksif the number is within the range of min & maxNovalidationAttributeon the formelementsTurns the validationoff
FormvalidationRequiredAttributeon input fieldsTells the browser the input field is requiredPatternAttributeon input fieldsChecksif the value matches a givenregexMultipleAttributeon e-mail and file fieldsAllows multiple files ore-mailadresses in a single input boxListAttributeon input fieldsProvides suggestions (similar to auto complete)
Extra featuresPlaceholdertextAttribute “placeholder” in input fieldsTextdisplayed in an input field whenEmptyNotfocusedAutofocusAttribute “autofocus” in input fieldsMoves the input focus to the input field as the page is loaded
Microdata
MicrodataMicrodata annotates the DOM with scoped name/value pairs from custom vocabularies.Centers around custom vocabulariesThink 1 vocabulary = “the set of all HTML5 elements”Works with name/value pairsRelies heavily on the concept of “scoping”Parent-childrelationship of DOM elements
MicrodataWhere Do Microdata Property Values Come From?
Adding microdataAttribute itemtypeDeclares the microdata vocabularyContains data defenitie of the modelAttribute itemscopeDeclares the scope of the vocabularyAttributeitempropertyThe name of the property
Microdata exampleExample<section itemscopeitemtype="http://data-vocabulary.org/Person"><h1 itemprop="name">Kristof Degrave</h1>	<dditemprop="address" itemscopeitemtype="http://data-vocabulary.org/Address"> 		<span itemprop="street-address">100 Main Street</span><br> 	<span itemprop="locality">Anytown</span>, 		<span itemprop="region">PA</span> 		<span itemprop="postal-code">19999</span> 		<span itemprop="country-name">USA</span> 	</dd> </section>
WebsocketsNew ways of communications
WHY do we needitDirect communicationbetweenclient and serverChat applicationsSocialnetworksCloudapplicationsOnline gaming…CurrentsolutionsFrequent pollingLong polling
FrequentBrowserServerHTTP RequestHTTP Response
Frequent pollingGET /PollingStock//PollingStock HTTP/1.1Host: localhost:8080User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: en-usAccept-Encoding: gzip,deflateAccept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7Keep-Alive: 300Connection: keep-aliveReferer: http://www.realdolmen.com/PollingStock/Cookie: showInheritedConstant=false; showInheritedProtectedConstant=false; showInheritedProperty=false; showInheritedProtectedProperty=false; showInheritedMethod=false; showInheritedProtectedMethod=false; showInheritedEvent=false; showInheritedStyle=false; showInheritedEffect=falseHTTP/1.x 200 OKX-Powered-By: Servlet/2.5Server: Sun Java System Application Server 9.1_02Content-Type: text/html;charset=UTF-8
Frequent pollingRequest / Response headers = 871 bytes1000 clients poll every 10 seconds1000 * 871 bytes = 0,8MB / 10 seconds0,8 MB * 6 = 4,8 MB / minute4,8 MB * 60 = 288 MB / hour288 MB * 24 = 6,912 GB / day
Long pollingWaitforitBrowserServerHTTP RequestHTTP Response
WebsocketsTCP for the webFull duplex direct communicationBenifitsNativeimplementedLessthroughputPerformanceComplexityFallbacksSilverlightFlash
WebsocketsHandshakeGET /demo HTTP/1.1 Upgrade: WebSocketConnection: Upgrade Host: example.com Origin: http://example.com Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5 Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 ^n:ds[4U HTTP/1.1 101 WebSocket Protocol Handshake Upgrade: WebSocketConnection: Upgrade Sec-WebSocket-Origin: http://example.com Sec-WebSocket-Location: ws://example.com/demo Sec-WebSocket-Protocol: sample 8jKS'y:G*Co,Wxa- Message        0x00 wsMessage 0xFF
Improving performanceBuilding a more responsive web application
OtherWebworkersAllows running scripts in the backgroundDoesn’tblockorfreezes UITakes advantage of multiple coresAsync scriptsAttributeon script elementSimplifies page-load performance improvements Simplifies dynamic script loadingPage Visibility APIProgrammatically determine the current visibility of a documentNotifiesvisibilitychanges
SetImmidiate APIBreaks appart long running JS operationsAllows the browser to processoutstandingworkand then waits for the specified period of time before calling back into JavaScriptLayoutPaintsImportant design patternwhen building responsive web applicationsRequestAnimationFrame API Creates power efficient and smooth animationsTakes page visibility and the display's refresh rate into account to determine how many frames per second to allocate to the animation
JumplistWindows 7 & Vista – IE 9+ only
JumplistWithmetatags in the <head>Start withapp name + root url	<meta name="application-name" content=“RealDolmen.com" /><meta name="msapplication-starturl" content="http://www.RealDolmen.com/" />Add-in extra links	<meta name="msapplication-task" content="name=[NAAM LINK]; action-uri=http://www.websonic.nl/;icon-uri=/images/jumplist/icon.ico" />Change list measurements	<meta name="msapplication-window" content="width=800;height=600" />
ConclusionWhat have we learned
ConclusionStart usingittodayUsefallbackmechanismsforolderbrowsersUse feature detectioninstead of browser detection
Resourceshttp://diveintohtml5.org/http://ie.microsoft.com/testdrive/http://www.w3schools.com/html5/default.asphttp://html5doctor.com/html-5-reset-stylesheet/
For more information:visit our website WWW.REALDOLMEN.COMFollow us on:Selected presentations are available on:Thank YouOr scan this QR code with your Smartphone to immediately go to the website

More Related Content

Viewers also liked (6)

PPTX
Institute of Fundraising Convention - Open Innovation
100%Open
 
PDF
Html5 oslo-code-camp
brucelawson
 
PDF
HTML5 multimedia - where we are, where we're going
brucelawson
 
PDF
Why Open Web Standards are cool and will save the world. Or the Web, at least.
brucelawson
 
PDF
Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland
brucelawson
 
PDF
Bruce lawson-over-the-air
brucelawson
 
Institute of Fundraising Convention - Open Innovation
100%Open
 
Html5 oslo-code-camp
brucelawson
 
HTML5 multimedia - where we are, where we're going
brucelawson
 
Why Open Web Standards are cool and will save the world. Or the Web, at least.
brucelawson
 
Bruce Lawson, Web Development 2.0, SparkUp! Poznan Poland
brucelawson
 
Bruce lawson-over-the-air
brucelawson
 

Similar to Html 5.0 (20)

PPTX
HTML5
tanamania
 
PPT
Html5
Peeyush Chandel
 
PPT
Introduction to html55
subrat55
 
PPT
Introduction to html5
Manav Prasad
 
PPT
Introduction to HTML5
IT Geeks
 
PPTX
Using HTML5 and CSS3 today
thebeebs
 
PPT
Html5 accessibility
Virginia DeBolt
 
PPT
1._Introduction_to_HTML5[1].MCA MODULE 1 NOTES
Sony235240
 
PPT
1. Introduction to HTML5.ppt
JyothiAmpally
 
PPT
Intro to html
anshuman rahi
 
PPT
Intro to html
anshuman rahi
 
PPT
Html5 css3
Altaf Pinjari
 
PPTX
HTML5 and DHTML
patelpriyank01
 
PPT
1._Introduction_tyytggyyyyy666o_HTML5.ppt
meganath16032003
 
PPT
1._Introduction_to_HTML5 les fonction et les balises
aziztara99
 
PPT
HTML_new_one is a ppt in markup language
ervishalgour
 
PPT
1._Introduction_to_HTML5 Web Designing.ppt
Divya573916
 
PPT
1._Introduction_to_HTML5 powerpoint presentation
JohnLagman3
 
PPT
HTML 5
Renu Karthick.S
 
HTML5
tanamania
 
Introduction to html55
subrat55
 
Introduction to html5
Manav Prasad
 
Introduction to HTML5
IT Geeks
 
Using HTML5 and CSS3 today
thebeebs
 
Html5 accessibility
Virginia DeBolt
 
1._Introduction_to_HTML5[1].MCA MODULE 1 NOTES
Sony235240
 
1. Introduction to HTML5.ppt
JyothiAmpally
 
Intro to html
anshuman rahi
 
Intro to html
anshuman rahi
 
Html5 css3
Altaf Pinjari
 
HTML5 and DHTML
patelpriyank01
 
1._Introduction_tyytggyyyyy666o_HTML5.ppt
meganath16032003
 
1._Introduction_to_HTML5 les fonction et les balises
aziztara99
 
HTML_new_one is a ppt in markup language
ervishalgour
 
1._Introduction_to_HTML5 Web Designing.ppt
Divya573916
 
1._Introduction_to_HTML5 powerpoint presentation
JohnLagman3
 
Ad

Recently uploaded (20)

PPTX
AVL ( audio, visuals or led ), technology.
Rajeshwri Panchal
 
PDF
SalesForce Managed Services Benefits (1).pdf
TechForce Services
 
PPTX
Agentic AI in Healthcare Driving the Next Wave of Digital Transformation
danielle hunter
 
PPTX
Earn Agentblazer Status with Slack Community Patna.pptx
SanjeetMishra29
 
PPTX
Agile Chennai 18-19 July 2025 Ideathon | AI Powered Microfinance Literacy Gui...
AgileNetwork
 
PPTX
Agile Chennai 18-19 July 2025 | Emerging patterns in Agentic AI by Bharani Su...
AgileNetwork
 
PPTX
IT Runs Better with ThousandEyes AI-driven Assurance
ThousandEyes
 
PDF
Responsible AI and AI Ethics - By Sylvester Ebhonu
Sylvester Ebhonu
 
PDF
RAT Builders - How to Catch Them All [DeepSec 2024]
malmoeb
 
PDF
CIFDAQ's Market Wrap : Bears Back in Control?
CIFDAQ
 
PPTX
PCU Keynote at IEEE World Congress on Services 250710.pptx
Ramesh Jain
 
PPTX
python advanced data structure dictionary with examples python advanced data ...
sprasanna11
 
PPTX
Applied-Statistics-Mastering-Data-Driven-Decisions.pptx
parmaryashparmaryash
 
PDF
Research-Fundamentals-and-Topic-Development.pdf
ayesha butalia
 
PPTX
Farrell_Programming Logic and Design slides_10e_ch02_PowerPoint.pptx
bashnahara11
 
PDF
Brief History of Internet - Early Days of Internet
sutharharshit158
 
PDF
Lecture A - AI Workflows for Banking.pdf
Dr. LAM Yat-fai (林日辉)
 
PDF
Generative AI vs Predictive AI-The Ultimate Comparison Guide
Lily Clark
 
PDF
Tea4chat - another LLM Project by Kerem Atam
a0m0rajab1
 
PPTX
Simple and concise overview about Quantum computing..pptx
mughal641
 
AVL ( audio, visuals or led ), technology.
Rajeshwri Panchal
 
SalesForce Managed Services Benefits (1).pdf
TechForce Services
 
Agentic AI in Healthcare Driving the Next Wave of Digital Transformation
danielle hunter
 
Earn Agentblazer Status with Slack Community Patna.pptx
SanjeetMishra29
 
Agile Chennai 18-19 July 2025 Ideathon | AI Powered Microfinance Literacy Gui...
AgileNetwork
 
Agile Chennai 18-19 July 2025 | Emerging patterns in Agentic AI by Bharani Su...
AgileNetwork
 
IT Runs Better with ThousandEyes AI-driven Assurance
ThousandEyes
 
Responsible AI and AI Ethics - By Sylvester Ebhonu
Sylvester Ebhonu
 
RAT Builders - How to Catch Them All [DeepSec 2024]
malmoeb
 
CIFDAQ's Market Wrap : Bears Back in Control?
CIFDAQ
 
PCU Keynote at IEEE World Congress on Services 250710.pptx
Ramesh Jain
 
python advanced data structure dictionary with examples python advanced data ...
sprasanna11
 
Applied-Statistics-Mastering-Data-Driven-Decisions.pptx
parmaryashparmaryash
 
Research-Fundamentals-and-Topic-Development.pdf
ayesha butalia
 
Farrell_Programming Logic and Design slides_10e_ch02_PowerPoint.pptx
bashnahara11
 
Brief History of Internet - Early Days of Internet
sutharharshit158
 
Lecture A - AI Workflows for Banking.pdf
Dr. LAM Yat-fai (林日辉)
 
Generative AI vs Predictive AI-The Ultimate Comparison Guide
Lily Clark
 
Tea4chat - another LLM Project by Kerem Atam
a0m0rajab1
 
Simple and concise overview about Quantum computing..pptx
mughal641
 
Ad

Html 5.0

  • 3. Who am I?Kristof DegraveIngelmunster, Belgiumwww.realdolmen.comFocus on webHTML 5.0, ASP.NEThttp://kristofdegrave.blogspot.com@kristofdegrave
  • 5. AgendaIntroduction to HTML 5.0Detecting HTML 5.0 FeaturesHTML5 SemanticMarkupelementsDrawingwith the browserPlay video and audioGeolocationStorageLet’stakeit offlineForm++MicrodataWebsocketsImproving performance
  • 6. Introduction to HTML 5.0Fivethingsyoushouldknowabout HTML 5.0
  • 7. Fivethingsyoushouldknowabout HTML 5.0It’s notone big thingYoudon’tneed to throwanythingawayIt’s easy to getstarted<!DOCTYPE html>ItalreadyworksIt’s here to stay
  • 8. Map of HTML 5.0First Public Working Draft Working DraftLast CallCandidate RecommendationRecommendation
  • 9. Detecting HTML 5.0 FeaturesYourbrowsersdoesn’t support it, shameonyou
  • 10. Detectiontechnique #1Check if a certain property exists on a global object (such as window or navigator)function supports_geolocation() { return !!navigator.geolocation; }
  • 11. Detectiontechnique #2Create an element, then check if a certain property exists on that elementfunction supports_canvas_text() { var supports_canvas = !!document.createElement('canvas').getContext; if (!supports_canvas) { return false; } vardummy_canvas = document.createElement('canvas'); var context = dummy_canvas.getContext('2d'); return typeofcontext.fillText == 'function'; }
  • 12. Detectiontechnique #3Create an element, check if a certain method exists on that element, then call the method and check the value it returns. function supports_h264_baseline_video() { var supports_video = !!document.createElement('video').canPlayType if (!supports_video) { return false; } var v = document.createElement("video"); return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'); }
  • 13. Detectiontechnique #4Create an element, set a property to a certain value, then check if the property has retained its value. function supports_input_type_date() { vari = document.createElement("input");i.setAttribute("type", "color"); return i.type !== "text"; }
  • 14. ModernizerHTML 5.0 Detectionlibraryhttp://www.modernizr.com/contains 40 feature detectionif (Modernizr.canvas) { // let's draw some shapes! } else { // no native canvas support available :( }
  • 16. New Semantic Elements <section>Thematic grouping of contentTypically with a headingA web sites home page couldbesplintintosectionsforIntroductionNews itemsContact information<nav>Section of a page that links to other pages or to parts within the pageOnly major navigationblocksNotfor links in the footer of the page
  • 17. New Semantic Elements <article>Self-contained composition in a document, page, application, or siteTypically Forum postWeb log entryAny other independent item of content<aside>Consists of contant that is tangentially related to the content around the aside elementTypicallyTypographical effects like pull quotes or sidebarsAdvertisingGroups of nav elementsOther content that is considered separate from the main content of the page.
  • 18. New Semantic Elements <header>Group of introductory or navigational aidsIntended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but not requiredThe header element can also be used:To wrap a section’s table of contentsA search formAny relevant logos<hgroup>Represents the heading of a sectionThe element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.H2 – H6 elements do not turn up within the document structure
  • 19. New Semantic Elements <footer>Footer for its nearest ancestor sectioning content or sectioning root elementTypically contains information about its section such as:Who wrote itLinks to related documentsCopyright data<time>A time on a 24 hour clock, or a precise date in the proleptic Gregorian calendarOptionally a time and a time-zone offset<mark>Represents a run of text in one document marked or highlighted for reference purposes
  • 20. Structure: HTML 4 vs HTML 5 HTML 4HTML 5
  • 21. HgroupexplenationHTML 4.0<h1>This is a section</h1><section> <h1>And this a subsection!</h1> <h2>Tagline, this is part of the h1 subsection</h2> <h1>And this a second subsection!</h1></section>Document structure1. This is a section1. And this a subsection!1. Tagline, this is part of the h1 subsection2. And this a second subsection!
  • 22. HgroupexplanationHTML 5.0<h1>This is a section</h1><section> <hgroup> <h1>And this a subsection!</h1> <h2>Tagline, this is part of the h1 subsection</h2></hgroup><h1>And this a second subsection!</h1></section>Document structure:1. This is a section1. And this a subsection!2. And this a second subsection!
  • 23. WhataboutolderbrowsersUse HTML 5 shimCreates dummy HTML elements <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script><![endif]-->Use HTML 5 ResetstylesheetAll browsers render unknown elements inline, i.e. as if they had a display:inline CSS rulehttp://html5doctor.com/html-5-reset-stylesheet/
  • 25. CanvasCanvas 2D APIBitmap Based, JavaScript DrivenRectangles, Paths, Lines, Fills, Arcs, Curves, etc.GradientsAdding images“Immediate Mode”Control<canvas>Notsupported</canvas>Fallback
  • 26. CancasDrawing a one-unit-lineDraw a line from (1,0) to (1,3)draw a line from (1.5, 0) to (1.5, 3)
  • 27. SVGSVG 1.1Scalable Vector Graphics Vector BasedLanguage for describing 2D-graphics and graphical applications in XML“Retained Mode”
  • 28. SVGShapes: ‘path’, ‘rect’, ‘circle’, ‘ellipse’, ‘line’, ‘polyline’ and ‘polygon’TextSolid Colors, Linear and Radial Gradients, PatternsRaster Images Styling (inline & CSS)
  • 29. WhataboutolderbrowsersFallback to Flash orSilverlightFallback to images in some casesSomelibraries out there (someSilverlightplugins, RaphaelJavaScriptlibraryetc)
  • 30. ExerciseCanvas:Draw a twodemensionalgridDraw a radialgradientAdd a part of an image ad scaleitSVGPolygonGradientelipse
  • 31. Play video and audioWatchyourvideos without third-partyplugins
  • 32. Video & audioVideo containersLike a zip fileDefines how to store things within them, not whatContainsA video track (without audio)Oneor more audio tracks (without video)Metadata (title, cover, …)ExamplesMPEG 4 (H.264 Baseline Profile video and AAC low-complexity audio)Flash videoOgg (Theora video and Vorbis audio)WebM (VP8 video codec and Vorbis audio codec)Audio Video Interleave
  • 33. Video & audioVideo codecsAlgorithm by which a video stream is encodedLossyorlosslessExamplesH.264 (patent-encumbered)Theora (royalty-free codec)VP8 (royalty-free codec)Audio codecsAlgorithm by which a audio stream is encodedLossyorlosslessExamplesMP3 (patent-encumbered)Advanced Audio Coding (patent-encumbered)Vorbis (not patent-encumbered)
  • 34. Video codec support * Internet Explorer 9 will only support WebM “when the user has installed a VP8 codec” ** Although Android 2.3 supports WebM, there are no hardware decoders yet, so battery life is a concern.*** Safari will play anything that QuickTime can play, but QuickTime only comes with H.264/AAC/MP4 support pre-installed.
  • 35. Video & audioVideo workflow for maximum compatibilityMake one version that uses WebM (VP8 + Vorbis).Make another version that uses H.264 baseline video and AAC “low complexity” audio in an MP4 container.Make another version that uses Theora video and Vorbis audio in an Ogg container.Link to all three video files from a single <video> element, and fall back to a Flash- or Silverlight-based video player.
  • 36. Live example<video id="movie" width="320" height="240" preload controls> <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' /> <source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <object width="320" height="240" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf"> <param name="movie" value="flowplayer-3.2.1.swf" /> <param name="allowfullscreen" value="true" /> <param name="flashvars" value='config={"clip": {"url": "http://wearehugh.com/dih5/pr6.mp4", "autoPlay":false, "autoBuffering":true}}' /> <p> Download video as <a href="pr6.mp4">MP4</a>, <a href="pr6.webm">WebM</a>, or <a href="pr6.ogv">Ogg</a>. </p> </object></video>
  • 38. GeolocationOpt-inIP addressServersideInaccurateWireless network connectionBasedon MAC adresQuickIn- and outdoorsAccurateCell towerNeedsenoughcoverageMostlysmartphonesInaccurate
  • 40. Whataboutolder browserGearsOpen source browser plugin from googleWorks onWindows, Mac, Linux, Windows Mobile, and AndroidDrive specifiek APIEach platform has it’sonapiBlackBerry, Nokia, Palm, and OMTP BONDI
  • 41. Geo.jsOpen source, MIT-licensed JavaScript library Smooths over the differences between the W3C geolocation API, the Gears API, and the APIs provided by mobile platformsInclude at the end of the page (for performance)Addgears_initfirst to initializegears <script src="gears_init.js"></script> <script src="geo.js"></script>First, call an init() function to determine if the geolocationapi is availableif (geo_position_js.init())Afterthisyoucancall the getCurrentPosition methode
  • 43. PastCookiesIncluded in every HTTP RequestSlowing down the web appSending data unencryptedLimited to 4KBUserdatahierarchical XML-based structure64 KB per Domain640 KB fortrusteddomainsOnlyfor IENotallowed to increase the amount of dataNot presenting any form of permissions dialog
  • 44. PastLocal Shared ObjectsAllows Flash objects to stored100 KB per domainIncrease of the amount of data is possible1 Mb, 10 Mb, and so onUser gets prompt foreachincreaseFlash is necessaryGearsOpen source browser pluginProvides api to anembedded Web SQL DatabaseSQLiteObtaining user permission onceUnlimited amounts of data per domain
  • 45. PastDojoToolkitDojox.storageProvides a unified interfaceAuto-detecsAPI’s & PluginsAdobe FlashGearsAdobe AIRPrototype of HTML5 storage in FF
  • 46. What do we wantA standardized APINatively and consistently in multiple browsersDon’t have to relay on third-party pluginsA lot of storage spaceOn the clientPersists beyond a page refreshIsn’t transmitted to the server
  • 47. PresentWebstorageAlsoknown asHTML storageLocalstorageDom storageStores named key/value pairs Data is never transmitted to the remote web serverImplemented nativelyPersists data beyond Page refresh5MB per domainIncrease of quota is notallowedQUOTA_EXCEEDED_ERR when exceeding the quota
  • 48. WebstorageAvailable in window objectKey and data are stored as stringInterface Storagegetter any getItem(in DOMString key); setter creator void setItem(in DOMString key, in any data);deleter void removeItem(in DOMString key); void clear();readonly attribute unsigned long length; getter DOMString key(in unsigned long index);
  • 49. WebstorageTrack changesStorageEventOccerswhen the storageareachangesSetItemRemoveItemClearAnd has to actuallychangesomethingStorageevent object
  • 50. FutureWeb SQL DatabaseFormerly known as “WebDBEmbedded database based on SQLiteThin wrapper around a SQL databaseExecuteSqlString as parameterString parameter can be any supported SQL statementSELECT, UPDATE, INSERT, and DELETESpecification work has stoppedThe specification reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.
  • 51. FutureIndexed DatabaseFormerly known as “WebSimpleDB”Affectionately known as “IndexedDB”Exposesan object storeShares many concepts with a SQL databaseThere are “databases” with “records” Each record has a set number of “fields”Each field has a specific datatypeThis field is defined when the database is createdSelect subset of records and enumeratethemwith a cursor Changes are handled withintransactionsNo structured query languageInstead methodes are provide by the API
  • 52. Let’stakeit offlineNo internet connection? Not a problem at all!
  • 53. Offline web applicationsContradictionWebpages are thingsyou download and renderBut we can download the files when we are onlineConnect online to an offline enabled web appRead the list of URLs from the manifest fileDownload the resourcesCache them locallyAutomatically keep the local copies up to date as they changeConnect offline to a visited offline enabled web appBrowser automatically switches to the local copies
  • 54. Offline web applicationsEventthatfireswhen the offline status changesHTML5 can take your web application offline, but the rest is up to youStore data localySyncwith server when the app is online…
  • 55. Chache manifestA list of all of the resources that your web application might need to access while it’s disconnected from the networkHTMLCSSJSImages…Manifest attributeonhtml element<html manifest="/cache.manifest"> Canbelocatedanywhereon the serverEvery page of your web application needs a manifest attribute that points to the cache manifest for the entire application.
  • 56. Cache manifestContentFirst line of every cache manifest file:CACHE MANIFESTThe following is devided in 3 partsExplicitsectionCACHE All files in this list willbedownloaded and cachedFallbacksectionFALLBACKPage thatwillbedisplayedwhenyou are trying to reach a page offline thathasn’t been cachedOutlinewhitelistsectionNETWORKContainsrecouresthatshouldneverbecached (ex. Cgiscritps)
  • 57. Cache manifest ExampleCACHE MANIFEST FALLBACK: / /offline.html NETWORK: *
  • 58. The flow of eventsFirst time visitCheckingeventFireswhen the browsersnotices a manifest attribute in the htmltagFiresalways, even ifyouallreadyvisited the pageDownloadingeventFiresif the browser has neverseenthis manifest fileProgres eventFiresperiodicallywhiledownloadingContainsinformationabout the number of files that have been downloaded and the number of files that are stillqueuedCachedeventFireswhen all the files in the manifest file are downloadedThe web app is nowfullycached and ready to use offline
  • 59. The flow of eventsPreviously visitedNoupdateeventFiresifyouallreadyvisited the page and the manifest file hasn’tchangedDownloadingeventFiresifyouallreadyvisited the page and the manifest has changedRedownloadsevery single file listed in the manifest fileProgres eventFiresperiodicallywhiledownloadingContainsinformationabout the number of files that have beeUpdatereadyeventFireswhenredownloading was succesfullThe newversion web app is nowfullycachedCallwindow.applicationCache.swapCache() function or reload the page so the new version will be in use.
  • 60. The flow of eventsErroreventFireswhensomethinggoes wrong in the flow of eventsPossibleerrorsHTTP error 404 (Page notfound)HTTP error 410 (PermanetlyGone)Page failed to download properlyManifest file changedwhile updatingBrowser failed to download one of the resources listed in the manifest file
  • 62. Know input typesCheckbox<input type="checkbox">Radio button<input type="radio">Password field<input type="password">Drop-down lists<select><option>…File picker<input type="file">Submit button<input type="submit">Plain text<input type="text">
  • 63. New input typesEmail<input type="email">Web address<input type="url">
  • 64. New input typesNumber (spin box)<input type="number"min="0" max="10" step="2" value="6“>Number (slider)<input type="range" min="0" max="10" step="2" value="6">Datetimepicker<input type="date">
  • 65. New input types<input type="month"><input type="week">
  • 66. New input types<input type="time"><input type="datetime"><input type="datetime-local">Search box<input type="search">
  • 67. New input typesColor picker<input type="color">
  • 68. FormvalidationAutomaticNo JS neededValidation happens even if JS is disabledDeterminesvalidationwith the type attributeE-mail -> checksforvalide-mailaddressUrl -> checksforvalid URLNumber -> checksif the number is within the range of min & maxNovalidationAttributeon the formelementsTurns the validationoff
  • 69. FormvalidationRequiredAttributeon input fieldsTells the browser the input field is requiredPatternAttributeon input fieldsChecksif the value matches a givenregexMultipleAttributeon e-mail and file fieldsAllows multiple files ore-mailadresses in a single input boxListAttributeon input fieldsProvides suggestions (similar to auto complete)
  • 70. Extra featuresPlaceholdertextAttribute “placeholder” in input fieldsTextdisplayed in an input field whenEmptyNotfocusedAutofocusAttribute “autofocus” in input fieldsMoves the input focus to the input field as the page is loaded
  • 72. MicrodataMicrodata annotates the DOM with scoped name/value pairs from custom vocabularies.Centers around custom vocabulariesThink 1 vocabulary = “the set of all HTML5 elements”Works with name/value pairsRelies heavily on the concept of “scoping”Parent-childrelationship of DOM elements
  • 73. MicrodataWhere Do Microdata Property Values Come From?
  • 74. Adding microdataAttribute itemtypeDeclares the microdata vocabularyContains data defenitie of the modelAttribute itemscopeDeclares the scope of the vocabularyAttributeitempropertyThe name of the property
  • 75. Microdata exampleExample<section itemscopeitemtype="http://data-vocabulary.org/Person"><h1 itemprop="name">Kristof Degrave</h1> <dditemprop="address" itemscopeitemtype="http://data-vocabulary.org/Address"> <span itemprop="street-address">100 Main Street</span><br> <span itemprop="locality">Anytown</span>, <span itemprop="region">PA</span> <span itemprop="postal-code">19999</span> <span itemprop="country-name">USA</span> </dd> </section>
  • 76. WebsocketsNew ways of communications
  • 77. WHY do we needitDirect communicationbetweenclient and serverChat applicationsSocialnetworksCloudapplicationsOnline gaming…CurrentsolutionsFrequent pollingLong polling
  • 79. Frequent pollingGET /PollingStock//PollingStock HTTP/1.1Host: localhost:8080User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: en-usAccept-Encoding: gzip,deflateAccept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7Keep-Alive: 300Connection: keep-aliveReferer: http://www.realdolmen.com/PollingStock/Cookie: showInheritedConstant=false; showInheritedProtectedConstant=false; showInheritedProperty=false; showInheritedProtectedProperty=false; showInheritedMethod=false; showInheritedProtectedMethod=false; showInheritedEvent=false; showInheritedStyle=false; showInheritedEffect=falseHTTP/1.x 200 OKX-Powered-By: Servlet/2.5Server: Sun Java System Application Server 9.1_02Content-Type: text/html;charset=UTF-8
  • 80. Frequent pollingRequest / Response headers = 871 bytes1000 clients poll every 10 seconds1000 * 871 bytes = 0,8MB / 10 seconds0,8 MB * 6 = 4,8 MB / minute4,8 MB * 60 = 288 MB / hour288 MB * 24 = 6,912 GB / day
  • 82. WebsocketsTCP for the webFull duplex direct communicationBenifitsNativeimplementedLessthroughputPerformanceComplexityFallbacksSilverlightFlash
  • 83. WebsocketsHandshakeGET /demo HTTP/1.1 Upgrade: WebSocketConnection: Upgrade Host: example.com Origin: http://example.com Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5 Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 ^n:ds[4U HTTP/1.1 101 WebSocket Protocol Handshake Upgrade: WebSocketConnection: Upgrade Sec-WebSocket-Origin: http://example.com Sec-WebSocket-Location: ws://example.com/demo Sec-WebSocket-Protocol: sample 8jKS'y:G*Co,Wxa- Message 0x00 wsMessage 0xFF
  • 84. Improving performanceBuilding a more responsive web application
  • 85. OtherWebworkersAllows running scripts in the backgroundDoesn’tblockorfreezes UITakes advantage of multiple coresAsync scriptsAttributeon script elementSimplifies page-load performance improvements Simplifies dynamic script loadingPage Visibility APIProgrammatically determine the current visibility of a documentNotifiesvisibilitychanges
  • 86. SetImmidiate APIBreaks appart long running JS operationsAllows the browser to processoutstandingworkand then waits for the specified period of time before calling back into JavaScriptLayoutPaintsImportant design patternwhen building responsive web applicationsRequestAnimationFrame API Creates power efficient and smooth animationsTakes page visibility and the display's refresh rate into account to determine how many frames per second to allocate to the animation
  • 87. JumplistWindows 7 & Vista – IE 9+ only
  • 88. JumplistWithmetatags in the <head>Start withapp name + root url <meta name="application-name" content=“RealDolmen.com" /><meta name="msapplication-starturl" content="http://www.RealDolmen.com/" />Add-in extra links <meta name="msapplication-task" content="name=[NAAM LINK]; action-uri=http://www.websonic.nl/;icon-uri=/images/jumplist/icon.ico" />Change list measurements <meta name="msapplication-window" content="width=800;height=600" />
  • 92. For more information:visit our website WWW.REALDOLMEN.COMFollow us on:Selected presentations are available on:Thank YouOr scan this QR code with your Smartphone to immediately go to the website

Editor's Notes

  • #8: HTML5 is not one big thing; it is a collection of individual features.Youcan’tdetect HTML 5.0 but support foridividual featuresYou may think of HTML as tags and angle brackets. That’s an important part of it, but it’s not the whole story. The HTML5 specification also defines how those angle brackets interact with JavaScript, through the Document Object Model (DOM). HTML5 doesn’t just define a &lt;video&gt; tag; there is also a corresponding DOM API for video objects in the DOM. You can use this API to detect support for different video formats, play a video, pause, mute audio, track how much of the video has been downloaded, and everything else you need to build a rich user experience around the &lt;video&gt; tag itself.Buildson succes of html 4Fullybackwards compatible New additionswillbeignored in olderbrowsersorcanbesolvedtroughhacks Start improvingtoday3. “Upgrading” to HTML5 can be as simple as changing your doctype. Upgrading to the HTML5 doctype won’t break your existing markup, because all the tags defined in HTML 4 are still supported in HTML5. It will allow you to use — and validate — new semantic elements like &lt;article&gt;, &lt;section&gt;, &lt;header&gt;, and &lt;footer&gt;. 4. Most modern browsers support serveral features of HTML 5.0Several features canbesolvedwithhacks, gears, flash, js, …5. XHTMLwon’tberenewed and resources for HTML 5 have increased. No, HTML 6 but HTML 5 as dynamicstandard. This is possiblebecause HTML 5 is notone big thingbut a collection of individual features.
  • #9: Working Draft (WD)At the working draft level, the standard is published for review by &quot;the community&quot;. A WD document is the first form of a standard that is publicly available. Commentary by virtually anyone is accepted, though no promises are made with regard to action on any particular element of said commentary.At this stage, the standard document may likely have significant differences from its final form. As such, any who implement WD standards should be ready to significantly modify their implementations as the standard matures.Candidate Recommendation (CR)A candidate recommendation is a version of the standard that is more firm than the WD. At this point, the group responsible for the standard is satisfied that the standard does what is needed of it. The purpose of the CR is to elicit aid from the development community as to how implementable the standard is.The standard document may change further, but at this point, significant features are mostly locked. The design of those features can still change due to feedback from implementors.Proposed Recommendation (PR)A proposed recommendation is the version of the standard that has passed the prior two levels. The users of said standard have had their say, and the implementors of the standard have likewise had a chance at providing input. At this stage, the document has been submitted to the W3C Advisory Council for final approval.While this step is important, it rarely causes any significant changes to a standard as it passes to the next phase.W3C Recommendation (REC)This is the most mature stage of development. At this point, the standard has undergone extensive review and testing, under both theoretical and practical conditions. This standard is now endorsed by the W3C as a standard for wide deployment in its problem domain.
  • #11: Use the double-negative trick to force the result to a Boolean value (true or false).
  • #12: The function starts by checking for canvas support: Starts by creating a dummy &lt;canvas&gt; element. But the element is never attached to your page, so no one will ever see it. It’s just floating inmemory, going nowhere and doing nothing, like a canoe on a lazy river.As soon as you create the dummy &lt;canvas&gt; element, you test for the presence of a getContext() method. This method will only exist if your browser supports the canvas API.Finally, you use the double-negative trick to force the result to a Boolean value (true or false). Next, you create a dummy &lt;canvas&gt; element and get its drawing context. This is guaranteed to work, because wealready checked that the getContext() method exists on all canvas objects.Finally, you check whether the drawing context has a fillText() function. If it does, the canvas text API is available.
  • #13: The function starts by checking for HTML5 video support.If your browser doesn’t support HTML5 video, it certainly won’t support any video formats! Then the function creates a dummy &lt;video&gt; element (but doesn’t attach it to the page, so it won’t be visible) and calls the canPlayType() method. A “video format” is really a combination of different things. In technical terms, you’re asking the browser whether it can play H.264 Baseline video and AAC LC audio in an MPEG-4 container.The canPlayType() function doesn’t return true or false. In recognition of how complex video formats are, the function returns a string: &quot;probably&quot; if the browser is fairly confident it can play this format &quot;maybe&quot; if the browser thinks it might be able to play this format &quot;&quot; (an empty string) if the browser is certain it can’t play this format
  • #14: First, you create a dummy &lt;input&gt; element in memory. The default input type for all &lt;input&gt; elements is &quot;text&quot;. This will prove to be vitally important.Next, set the type attribute on the dummy &lt;input&gt; element to the input type you want to detect.If your browser supports that particular input type, the type property will retain the value you set. If your browser doesn’t support that particular input type, it will ignore the value you set and the type property will still be &quot;text&quot;.
  • #17: Section: The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading. Examples of sections would be chapters, the tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site&apos;s home page could be split into sections for an introduction, news items, contact information.Nav: The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a short list of links to common pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element.
  • #18: Article The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.Aside The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.
  • #19: Hgroup The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines. Online:http://gsnedders.html5.org/outliner/Extension: http://chrispederick.com/work/web-developer/HeaderThe header element represents a group of introductory or navigational aids. A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.
  • #20: FooterThe footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. Footers don’t necessarily have to appear at the end of a section, though they usually do. When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content. TimeThe time element represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset. Mark The mark element represents a run of text in one document marked or highlighted for reference purposes
  • #24: There is a wonderous workaround for this problem. If you create a dummy &lt;article&gt; element with JavaScript before you use it in your page, Internet Explorer will magically recognize the &lt;article&gt; element and let you style it with CSS. There is no need to ever insert the dummy element into the DOM. Simply creating the element once (per page) is enough to teach IE to style the element it doesn’t recognize.
  • #25: Basic &lt;canvas&gt; support IE 7.0+* Firefox 3.0+ Safari 3.0+ Chrome 3.0+ Opera 10.0+iPhone 1.0+ Android 1.0+* Internet Explorer 7 and 8 require the third-party explorercanvas library. Internet Explorer 9 supports &lt;canvas&gt; natively.
  • #26: Immediate mode rendering is a style for application programming interfacesof graphics libraries, in which client calls directly cause rendering of graphics objects to the display. It does not preclude the use of double-buffering. In contrast to retained mode, lists of objects to be rendered are not saved by the API library. Instead, the application must re-issue all drawing commands required to describe the entire scene each time a new frame is required, regardless of actual changes. This method provides the maximum amount of control and flexibility to the application program.Support:IE 7+ IE 7 &amp; 8 require third-party explorercanvas library. IE 9 supports &lt;canvas&gt; nativelyFF 3.0+Safari 3.0+Chrome 3.0+Opera 10.0+Iphone 1.0+Android 1.0+
  • #28: By using a &quot;retained mode&quot; approach, client calls do not directly cause actual rendering, but instead update an internal model (typically a list of objects) which is maintained within the library&apos;s data space. This allows the library to optimize when actual rendering takes place along with the processing of related objects.[
  • #30: &lt;video&gt; element support IE 9.0+ Firefox 3.5+ Safari3.0+ Chrome 3.0+ Opera 10.5+iPhone 1.0+ Android 2.0+
  • #33: A video file usually contains multiple tracks — a video track (without audio), plus one or more audio tracks (without video). Tracks are usually interrelated. An audio track contains markers within it to help synchronize the audio with the video. Individual tracks can have metadata, such as the aspect ratio of a video track, or the language of an audio track. Containers can also have metadata, such as the title of the video itself, cover art for the video, episode numbers (for television shows), and so on.When you “watch a video,” your video player is doing at least three things at once: Interpreting the container format to find out which video and audio tracks are available, and how they are stored within the file so that it can find the data it needs to decode next Decoding the video stream and displaying a series of images on the screen Decoding the audio stream and sending the sound to your speakersEncoders:Miro Video Converter (Open source)WebM video (VP8 video and Vorbis audio in a WebM container).Theora video and Vorbis audio in an Ogg container.H.264 Baseline Profile video and AAC low-complexity audio in an MP4 container.Firefogg (Open source, FF extension)Theora video and Vorbis audio in an Ogg container ffmpeg2theora (Open source, batch)Theora video and Vorbis audio in an Ogg containerHandBrake (Open source)H.264 Baseline Profile video and AAC low-complexity audio in an MP4 container.Ffmpeg (Open source, batch)WebM video (VP8 video and Vorbis audio in a WebM container).
  • #34: A lossy video codec means that information is being irretrievably lost during encoding. Like copying an audio cassette tape, you’re losing information about the source video, and degrading the quality, every time you encodeH.264 is also known as “MPEG-4 part 10,” a.k.a. “MPEG-4 AVC,” a.k.a. “MPEG-4 Advanced Video Coding.” H.264 was also developed by the MPEG group and standardized in 2003. It aims to provide a single codec for low-bandwidth, low-CPU devices (cell phones); high-bandwidth, high-CPU devices (modern desktop computers); and everything in between. To accomplish this, the H.264 standard is split into “profiles,” which each define a set of optional features that trade complexity for file size. Higher profiles use more optional features, offer better visual quality at smaller file sizes, take longer to encode, and require more CPU power to decode in real-timeTheora evolved from the VP3 codec. Theora video can be embedded in any container format, although it is most often seen in an Ogg container. All major Linux distributions support Theora out-of-the-box. You can also play Theora video on Windows or on Mac OS X after installing Xiph.org’s open source decoder software.VP8 is another video codec from On2, the same company that originally developed VP3 (later Theora). Technically, it produces output on par with H.264 High Profile, while maintaining a low decoding complexity on par with H.264 Baseline.MP3s can contain up to 2 channels of sound. They can be encoded at different bitrates: 64 kbps, 128 kbps, 192 kbps, and a variety of others from 32 to 320. Higher bitrates mean larger file sizes and better quality audio, although the ratio of audio quality to bitrate is not linear. (128 kbps sounds more than twice as good as 64 kbps, but 256 kbps doesn’t sound twice as good as 128 kbps.) Furthermore, the MP3 format allows for variable bitrate encoding, which means that some parts of the encoded stream are compressed more than others. For example, silence between notes can be encoded at a low bitrate, then the bitrate can spike up a moment later when multiple instruments start playing a complex chord. MP3s can also be encoded with a constant bitrate, which, unsurprisingly, is called constant bitrate encoding.AAC was designed to provide better sound quality than MP3 at the same bitrate, and it can encode audio at any bitrate. (MP3 is limited to a fixed number of bitrates, with an upper bound of 320 kbps.) AAC can encode up to 48 channels of sound, although in practice no one does that. The AAC format also differs from MP3 in defining multiple profiles, in much the same way as H.264, and for the same reasons. The “low-complexity” profile is designed to be playable in real-time on devices with limited CPU power, while higher profiles offer better sound quality at the same bitrate at the expense of slower encoding and decoding.Vorbis audio streams are usually embedded in an Ogg or WebM container, but they can also be embedded in an MP4 or MKV container (or, with some hacking, in AVI). Vorbis supports an arbitrary number of sound channels.
  • #37: Important to add type to thesourceelements: Thisway the browser candetermineifitcanplay it. In case hecan’t, hewon’t download the file. Ifyoudon’tadd the type, you’re browser will download it and try to playitBy default, the &lt;video&gt; element will not expose any sort of player controls. You can create your own controls with plain old HTML, CSS, and JavaScript. The &lt;video&gt; element has methods like play() and pause() and a read/write property called currentTime. There are also read/write volume and muted properties. So you really have everything you need to build your own interface.If you don’t want to build your own interface, you can tell the browser to display a built-in set of controls. To do this, just include the controls attribute in your &lt;video&gt; tag.The preload attribute tells the browser that you would like it to start downloading the video file as soon as the page loads. This makes sense if the entire point of the page is to view the video.The autoplay attribute does exactly what it sounds like: it tells the browser that you would like it to start downloading the video file as soon as the page loads, and you would like it to start playing the video automatically as soon as possibleThe object element serves as fallbackif the video tagisn’tsupported.
  • #38: Geolocation API support IE 9.0+ Firefox 3.5+ Safari 5.0+ Chrome 5.0+ Opera 10.6+iPhone 3.0+ Android 2.0+
  • #39: geolocation support is opt-in. That means your browser will never force you to reveal your current physical location to a remote server
  • #40: Skyhook&apos;s Core Engine is a software-only location system that quickly determines device location with 10 to 20 meter accuracy. View a demo of the Core Engine to see it in action now:To quickly and reliably arrive at accurate location results, the Core Engine collect raw data from Wi-Fi access points, GPS satellites and cell towers with advanced hybrid positioning algorithms. By leveraging the strengths of more than one underlying position technology, Skyhook&apos;s Core Engine provides the best possible location available in any environment.A mobile device with Skyhook&apos;s Core Engine collects raw data from each of the location sources. The Skyhook client then sends this data to the Location Server and a single location estimate is returned. The client is optimized so that it communicates with the Location Server only when the location cannot be determined locally. This behavior minimizes the user&apos;s data cost while maximizing battery life.Wi-Fi positioning performs best where GPS is weakest, in urban areas and indoors. GPS provides highly accurate location results in &quot;open sky&quot; environments, like rural areas and on highways. But in urban areas and indoors, tall buildings and ceilings block GPS&apos; view of satellites, resulting in serious performance deficiencies in time to first fix, accuracy and availability. GPS or A-GPS alone cannot provide fast and accurate location results in all environments.Cell tower triangulation provides generalized location results with only 200 - 1000 meter accuracy. It serves as a coverage fallback when neither GPS nor Wi-Fi is available. Skyhook maintains a worldwide database of cell tower locations, which increases our Core Engine coverage area and helps improve GPS satellite acquisition time.http://www.skyhookwireless.com/howitworks/loader_howitworks.swf
  • #43: HTML5 Storage support IE 8.0+ Firefox 3.5+ Safari 4.0+ Chrome 4.0+ Opera 10.5+iPhone 2.0+ Android 2.0+
  • #50: For example, if you set an item to its existing value or call clear() when there are no named keys, the storage event will not fire, because nothing actually changed in the storage area.if (window.addEventListener) { window.addEventListener(&quot;storage&quot;, handle_storage, false); } else { // Necessaryfor IE 8window.attachEvent(&quot;onstorage&quot;, handle_storage); };
  • #51: Web SQL Database support IE - Firefox - Safari 4.0+ Chrome 4.0+ Opera 10.5+iPhone 3.0+ Android 2.0+This specification has reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path. Until another implementor is interested in implementing this spec, the description of the SQL dialect has been left as simply a reference to Sqlite, which isn&apos;t acceptable for a standard.
  • #52: http://hacks.mozilla.org/2010/06/comparing-indexeddb-and-webdatabase/SupportIndexed DB:FireFox 4.0+Chrome 11.0 + IE (html5labs)
  • #54: At its simplest, an offline web application is a list of URLs — HTML, CSS, JavaScript, images, or any other kind of resource. The home page of the offline web application points to this list, called a manifest file, which is just a text file located elsewhere on the web server.
  • #55: A web browser that implements HTML5 offline applications will read the list of URLs from the manifest file, download the resources, cache them locally, and automatically keep the local copies up to date as they change. When the time comes that you try to access the web application without a network connection, your web browser will automatically switch over to the local copies instead.From there, most of the work is up to you, the web developer. There’s a flag in the DOM that will tell you whether you’re online or offline. There are events that fire when your offline status changes (one minute you’re offline and the next minute you’re online, or vice-versa). But that’s pretty much it. If your application creates data or saves state, it’s up to you to store that data locally while you’re offline and synchronize it with the remote server once you’re back online. In other words, HTML5 can take your web application offline. What you do once you’re there is up to you.
  • #57: all manifest files are divided into three parts: the “explicit” section, the “fallback” section, and the “online whitelist” section. Each section has a header, on its own line. If the manifest file doesn’t have any section headers, all the listed resources are implicitly in the “explicit” section.Q: Do I need to list my HTML pages in my cache manifest?A: Yes and no. If your entire web application is contained in a single page, just make sure that page points to the cache manifest using the manifest attribute. When you navigate to an HTML page with a manifest attribute, the page itself is assumed to be part of the web application, so you don’t need to list it in the manifest file itself. However, if your web application spans multiple pages, you should list all of the HTML pages in the manifest file, otherwise the browser would not know that there are other HTML pages that need to be downloaded and cached
  • #58: Look at the fallback section. The fallback section in this cache manifest only has a single line. The first part of the line (before the space) is not a URL. It’s really a URL pattern. The single character (/) will match any page on your site, not just the home page. When you try to visit a page while you’re offline, your browser will look for it in the appcache. If your browser finds the page in the appcache (because you visited it while online, and the page was implicitly added to the appcache at that time), then your browser will display the cached copy of the page. If your browser doesn’t find the page in the appcache, instead of displaying an error message, it will display the page /offline.html, as specified in the second half of that line in the fallback section.The network section in this cache manifest also has just a single line, a line that contains just a single character (*). This character has special meaning in a network section. It’s called the “online whitelist wildcard flag.” That’s a fancy way of saying that anything that isn’t in the appcache can still be downloaded from the original web address, as long as you have an internet connection. This is important for an “open-ended” offline web application. It means that, while you’re browsing this hypothetical offline-enabled Wikipedia online, your browser will fetch images and videos and other embedded resources normally, even if they are on a different domain. (This is common in large websites, even if they aren’t part of an offline web application. HTML pages are generated and served locally, while images and videos are served from a CDN on another domain.) Without this wildcard flag, our hypothetical offline-enabled Wikipedia would behave strangely when you were online — specifically, it wouldn’t load any externally-hosted images or videos!
  • #59: When your browser visits a page that points to a cache manifest, it fires off a series of events on the window.applicationCache object. As soon as it notices a manifest attribute on the &lt;html&gt; element, your browser fires a checking event. (All the events listed here are fired on the window.applicationCache object.) The checking event is always fired, regardless of whether you have previously visited this page or any other page that points to the same cache manifest. If your browser has never seen this cache manifest before...It will fire a downloading event, then start to download the resources listed in the cache manifest. While it’s downloading, your browser will periodically fire progress events, which contain information on how many files have been downloaded already and how many files are still queued to be downloaded.After all resources listed in the cache manifest have been downloaded successfully, the browser fires one final event, cached. This is your signal that the offline web application is fully cached and ready to be used offline. That’s it; you’re done.
  • #60: If you have previously visited this page or any other page that points to the same cache manifest, then your browser already knows about this cache manifest. It may already have some resources in the appcache. It may have the entire working offline web application in the appcache. So now the question is, has the cache manifest changed since the last time your browser checked it?If the answer is no, the cache manifest has not changed, your browser will immediately fire a noupdate event. That’s it; you’re done.If the answer is yes, the cache manifest has changed, your browser will fire a downloading event and start re-downloading every single resource listed in the cache manifest.While it’s downloading, your browser will periodically fire progress events, which contain information on how many files have been downloaded already and how many files are still queued to be downloaded.After all resources listed in the cache manifest have been re-downloaded successfully, the browser fires one final event, updateready. This is your signal that the new version of your offline web application is fully cached and ready to be used offline. The new version is not yet in use. To “hot-swap” to the new version without forcing the user to reload the page, you can manually call the window.applicationCache.swapCache() function.
  • #61: If, at any point in this process, something goes horribly wrong, your browser will fire an error event and stop. Here is a hopelessly abbreviated list of things that could go wrong:The cache manifest returned an HTTP error 404 (Page Not Found) or 410 (Permanently Gone).The cache manifest was found and hadn’t changed, but the HTML page that pointed to the manifest failed to download properly.The cache manifest changed while the update was being run.The cache manifest was found and had changed, but the browser failed to download one of the resources listed in the cache manifest.
  • #64: In olderbrowsers these input types willberendered as textNumber type=&quot;number&quot; means that this is a number field. min=&quot;0&quot; specifies the minimum acceptable value for this field. max=&quot;10&quot; is the maximum acceptable value. step=&quot;2&quot;, combined with the min value, defines the acceptable numbers in the range: 0, 2, 4, and so on, up to the max value. value=&quot;6&quot; is the default value. This should look familiar. It’s the same attribute name you’ve always used to specify values for form fields. (I mention it here to drive home the point that HTML5 builds on previous versions of HTML. You don’t need to relearn how to do stuff you’re already doing.)Manipulating the inpur type number in JSinput.stepUp(n) increases the field’s value by n.input.stepDown(n) decreases the field’s value by n.input.valueAsNumber returns the current value as a floating point number. (The input.value property is always a string.)
  • #66: Differencebetweentext and search:- A “x” wil beaddedwhentyping in the textboxsoyoucanremove the textinside
  • #69: There are two big problems with validating email addresses in JavaScript:A surprising number of your visitors (probably around 10%) won’t have JavaScript enabled You’ll get it wrongRequired fields must have a value before you can submit the form.
  • #70: http://ie.microsoft.com/testdrive/HTML5/Forms/Default.html
  • #71: Placeholder text is displayed inside the input field as long as the field is empty and not focused. As soon as you click on (or tab to) the input field, the placeholder text disappears.Q: Can I use HTML markup in the placeholder attribute? I want to insert an image, or maybe change the colors.A: The placeholder attribute can only contain text, not HTML markup. However, there are some vendor-specific CSS extensions that allow you to style the placeholder text in some browsersThe autofocus attribute does exactly what it says on the tin: as soon as the page loads, it moves the input focus to a particular input field. But because it’s just markup instead of script, the behavior will be consistent across all web sites. Also, browser vendors (or extension authors) can offer users a way to disable the autofocusing behavior.Fallback:&lt;form name=&quot;f&quot;&gt;&lt;input id=&quot;q&quot; autofocus&gt; &lt;script&gt; if (!(&quot;autofocus&quot; in document.createElement(&quot;input&quot;))) { document.getElementById(&quot;q&quot;).focus(); } &lt;/script&gt; &lt;input type=&quot;submit&quot; value=&quot;Go&quot;&gt; &lt;/form&gt; Preform the focus methode as early as possible. WithjQueryyoucan place it in the readyevent.To sum up: Setting focus properly is important. If at all possible, let the browser do it by setting the autofocus attribute on the form field you want to have focus. If you code a fallback for older browsers, detect support for the autofocus attribute to make sure your fallback is only executed in older browsers. Set focus as early as possible. Insert the focus script into your markup immediately after the form field. If that offends you, use a JavaScript library that supports custom events, and trigger a custom event immediately after the form field markup. If that’s not possible, use something like jQuery’s $(document).ready() event. Under no circumstances should you wait until window.onload to set focus
  • #73: Microdata centers around custom vocabularies. Think of “the set of all HTML5 elements” as one vocabulary. This vocabulary includes elements to represent a section or an article, but it doesn’t include elements to represent a person or an event. If you want to represent a person on a web page, you’ll need to define your own vocabulary. Microdata lets you do this. Anyone can define a microdata vocabulary and start embedding custom properties in their own web pages.Every microdata vocabulary defines a set of named properties. For example, a Person vocabulary could define properties like name and photo. To include a specific microdata property on your web page, you provide the property name in a specific place. Depending on where you declare the property name, microdata has rules about how to extract the property value. (More on this in the next section.)Along with named properties, microdata relies heavily on the concept of “scoping.” The simplest way to think of microdata scoping is to think about the natural parent-child relationship of elements in the DOM. The &lt;html&gt; element usually contains two children, &lt;head&gt; and &lt;body&gt;. The &lt;body&gt; element usually contains multiple children, each of which may have child elements of their own. For example, your page might include an &lt;h1&gt; element within an &lt;hgroup&gt; element within a &lt;header&gt; element within the &lt;body&gt; element. A data table might contain &lt;td&gt; within &lt;tr&gt; within &lt;table&gt; (within &lt;body&gt;). Microdata re-uses the hierarchical structure of the DOM itself to provide a way to say “all the properties within this element are taken from this vocabulary.” This allows you to use more than one microdata vocabulary on the same page. You can even nest microdata vocabularies within other vocabularies, all by re-using the natural structure of the DOM.Microdata is about applying additional semantics to data that’s already visible on your web page. Microdata is not designed to be a standalone data format. It’s a complement to HTML.
  • #75: “Adding microdata” to your page is a matter of adding a few attributes to the HTML elements you already have. The first thing you always do is declare which microdata vocabulary you’re using, by adding an itemtype attribute. The second thing you always do is declare the scope of the vocabulary, using an itemscope attribute. In this example, all the data we want to semanti-fy is in a &lt;section&gt; element, so we’ll declare the itemtype and itemscope attributes on the &lt;section&gt; element
  • #83: HTML 5:Work in progressIE 10+Firefox 6.0+Safari 5.0 +Chrome 10.0+Opera 11.0 +iOS Safari 4.2+Opera Mobile 11.0+
  • #86: Webworkers:http://ie.microsoft.com/testdrive/HTML5/WebWorkerTest262/Default.htmlAsync scriptshttp://ie.microsoft.com/testdrive/Performance/AsyncScripts/Default.htmlPage Visibility APIhttp://ie.microsoft.com/testdrive/Performance/PageVisibility/Default.html
  • #87: SetImmidiate APIhttp://ie.microsoft.com/testdrive/Performance/setImmediateSorting/Default.htmlRequestAnimationFrame APIhttp://ie.microsoft.com/testdrive/Graphics/RequestAnimationFrame/Default.html
  • #89: http://www.websonic.nl/tutorials/websitehtmlxhtml/html_jumplistinternetexplorer9.php