HTML 5 - An Introduction

8/8/2019 HTML 5 - An Introduction

http://slidepdf.com/reader/full/html-5-an-introduction 1/53

HTML 5HTML 5An IntroductionAn Introduction

By AshwinBy Ashwin



Whats HTML 5?Whats HTML 5?A New Radically different Markup LanguageA New Radically different Markup Language

You need to learn everything from scratchYou need to learn everything from scratchDoesnt Work on existing BrowsersDoesnt Work on existing Browsers



Whats HTML 5?Whats HTML 5?

Its not ONE BIG THINGIts not ONE BIG THING

So you cant detect HTML 5 Support So you cant detect HTML 5 Support But you can detect HTML 5But you can detect HTML 5 Local StorageLocal Storage Support Support




Dont Throw Anything AwayDont Throw Anything Away

Existing HTML 4 Markup works wellExisting HTML 4 Markup works wellNothing dramatically New to LearnNothing dramatically New to Learn

Improves HTML, a few steps at a time!Improves HTML, a few steps at a time!




It already Works!It already Works!

Most HTML 5 Features already WorkMost HTML 5 Features already WorkMany features Supported in FF, Opera, Chrome, SafariMany features Supported in FF, Opera, Chrome, Safari

IE brings in support from 9!IE brings in support from 9!



HTML 5HTML 5Geolocation APIGeolocation API



Geolocation APIGeolocation APIArt of figuring where you are in the worldArt of figuring where you are in the world

(Optionally) Sharing it with the Rest of the World(Optionally) Sharing it with the Rest of the World



3 Common Ways3 Common Ways

to Locate You!to Locate You!IP AddressIP Address

Wireless Network ConnectionWireless Network Connection

Dedicated GPS Hardware with SatellitesDedicated GPS Hardware with Satellites



What Geolocation API givesWhat Geolocation API gives

you (the developer)?you (the developer)?

LatitudeLatitude

AndAnd

LongitudeLongitude



Get me the Code!Get me the Code!navigator.geolocation.getCurrentPositionnavigator.geolocation.getCurrentPosition((

success_callback,success_callback,error_callback,error_callback,

{PositionOptions});{PositionOptions});



GeolocationGeolocation

Browser Support Browser Support

5.0+ 3.5+ 10.6+ 5.0+5.0+ 3.5+ 10.6+ 5.0+ --



HTML 5HTML 5<video><video> Tag!Tag!



<video> Tag!<video> Tag!Standard way to embed VideoStandard way to embed Video

in a Web Pagein a Web Page



Video ContainersVideo Containers



Whats Supported?Whats Supported?

Codecs/ContainersCodecs/Containers

Theora+Vorbis+OggTheora+Vorbis+Ogg 5.0+5.0+ 3.5+3.5+ 10.5+10.5+ -- --

H.264+AAC+MP4H.264+AAC+MP4 5.0+5.0+ -- -- 3.0+3.0+ 9.0+9.0+

WebMWebM 5.0+5.0+ 4.0+4.0+ 10.5+10.5+ -- 9.0+9.0+



For Max CompatibilityFor Max Compatibility

Make one version that usesMake one version that uses WebM (VP8 + Vorbis)WebM (VP8 + Vorbis)

Make another version that usesMake another version that uses H.264 baseline videoH.264 baseline video andandAAC low complexity audioAAC low complexity audio in anin an MP4 containerMP4 container

Make another version that usesMake another version that uses Theora videoTheora video andand VorbisVorbisaudioaudio in anin an Ogg containerOgg container

Link to all three video files from a singleLink to all three video files from a single <video><video> element,element,andand fall back to a Flashfall back to a Flash--based video playerbased video player



Using <video>Using <video>

<<videovideo id="movie" width="320" height="240"id="movie" width="320" height="240" preload autoplaypreload autoplaycontrolscontrols>>

<source src="pr6.mp4" /><source src="pr6.mp4" />

<<sourcesource srcsrc="pr6.webm"="pr6.webm" typetype='video/webm;='video/webm; codecscodecs="vp8, vorbis"'="vp8, vorbis"'/>/>

<source src="pr6.ogv" type='video/ogg; codecs="theora,<source src="pr6.ogv" type='video/ogg; codecs="theora,vorbis"' />vorbis"' />

<<objectobject width="320" height="240" type="application/xwidth="320" height="240" type="application/x--shockwaveshockwave--flash" data="flowplayerflash" data="flowplayer--3.2.1.swf">3.2.1.swf">

</object></object>

</video></video>



Sample VideoSample Video

http://html5demos.com/videohttp://html5demos.com/video



HTML 5HTML 5New <input> TypesNew <input> Types



HTML 5HTML 5 -- <input> Types<input> Types

Placeholder Text Placeholder Text Displayed as long as the field is empty andDisplayed as long as the field is empty and

not focusednot focused

<form><form>

<input name="q"<input name="q" placeholder="Search Bookmarks and History"placeholder="Search Bookmarks and History">><input type="submit" value="Search"><input type="submit" value="Search">

</form></form>




AutofocusAutofocusFocus on an input field, when the page loadsFocus on an input field, when the page loads

Detect support and fallback to Javascript Detect support and fallback to Javascript for better compatibility!for better compatibility!

<form><form>

<input name="q"<input name="q" autofocusautofocus>>

<

input type="submit" value="Search"><

input type="submit" value="Search"></form></form>




Email AddressEmail AddressFor Text Input Fields that accept Email AddressesFor Text Input Fields that accept Email Addresses

If not supported, Browsers treat them as type = textIf not supported, Browsers treat them as type = text

Desktop Browsers render the Field as a Text Field. On devices like iPhone,Desktop Browsers render the Field as a Text Field. On devices like iPhone,focus on this Field switches the Keyboard to Optimize for Email Input focus on this Field switches the Keyboard to Optimize for Email Input

<form><form><input type="email"><input type="email">

<input type="submit" value="Go"><input type="submit" value="Go">

</form></form>




Numbers as SpinboxesNumbers as SpinboxesAllow only Particular Numbers in a givenAllow only Particular Numbers in a givenrangerange

<form><form>

<input<input type="number"type="number"

min="0"min="0"

max="10"max="10"

step="2"step="2"

value="6"value="6">>

</form></form>




Numbers as SlidersNumbers as SlidersAllow only Particular Numbers in a givenAllow only Particular Numbers in a givenrange, in Slider Format range, in Slider Format

<form><form>

<input<input type=range"type=range"

min="0"min="0"

max="10"max="10"

step="2"step="2"

value="6"value="6">>

</form></form>




Date PickersDate PickersNative date picker without ScriptsNative date picker without Scripts

No wide support yet (except Opera)No wide support yet (except Opera)

<form><form>

<input<input type=date"/type=date"/>>

</form></form>

Also there are type = :Also there are type = : month, week, time,month, week, time,datetime, datetimedatetime, datetime--locallocal

for suitable Calendar displayfor suitable Calendar display




Few MoreFew More<form><form>

<input<input type=search/type=search/>>

</form></form>

<form><form>

<input<input type=color/type=color/>>

</form></form>

<form><form>

<input type=text<input type=text required/required/>>

</form></form>



HTML 5HTML 5Semantic MarkupSemantic Markup



HTML 5HTML 5 Semantic MarkupSemantic Markup

AA sectionsection is a thematic grouping of content, typically preceded by header, possibly with ais a thematic grouping of content, typically preceded by header, possibly with afooter after.footer after. sections can be nested inside of each other, if needed, and can hold anysections can be nested inside of each other, if needed, and can hold anyamount of typical markup.amount of typical markup.

<section><section>

The header of a section, typically a headline or grouping of headlines, but may alsoThe header of a section, typically a headline or grouping of headlines, but may alsocontain supplemental information about the section.contain supplemental information about the section.

<header><header>




A footer typically contains information about its section such as who wrote it, links toA footer typically contains information about its section such as who wrote it, links torelated documents, copyright data, and the likerelated documents, copyright data, and the like

<footer><footer>

Defines the navigation area, typically a list of links.Defines the navigation area, typically a list of links.

Used for the Main Navigation Menu of the Site. Not for any internal menus/linksUsed for the Main Navigation Menu of the Site. Not for any internal menus/links

<nav><nav>




An independent entry in a blog, magazine, compendium, and so on.An independent entry in a blog, magazine, compendium, and so on.

<article><article>

An aside indicates content that is tangentially related to the content around it.An aside indicates content that is tangentially related to the content around it.

<aside><aside>



What about IE?What about IE?

< IE 8, doesnt recognize the Semantic Markup< IE 8, doesnt recognize the Semantic MarkupCSS Markup does not ApplyCSS Markup does not Apply

All Child Elements treated at the Same LevelAll Child Elements treated at the Same Level

SolutionSolution

<script><script>

document.createElement('header');document.createElement('header');

document.createElement('footer');document.createElement('footer');document.createElement('section');document.createElement('section');

document.createElement('aside');document.createElement('aside');

document.createElement('nav');document.createElement('nav');

document.createElement('article');document.createElement('article');

</script></script>



HTML 5HTML 5Offline Web ApplicationOffline Web Application





The Cache Manifest The Cache Manifest

Core of Offline Web ApplicationCore of Offline Web ApplicationList of Resources to be CachedList of Resources to be Cached

Included in every page that needs Offline AccessIncluded in every page that needs Offline Access

Can be located anywhere on Web ServerCan be located anywhere on Web Server

Must be served with Right Content TypeMust be served with Right Content Type text/cachetext/cache--manifest manifest

<!DOCTYPE HTML><!DOCTYPE HTML>

<html manifest="<html manifest="/cache.manifest/cache.manifest">">

<body> ... </body><body> ... </body>

</html></html>



The Cache Manifest The Cache Manifest

Manifest ContentsManifest Contents3 Parts of the File:3 Parts of the File:

Explicit Fallback OnlineWhitelist / FallbackExplicit Fallback OnlineWhitelist / Fallback

CACHE MANIFESTCACHE MANIFEST

# 2010# 2010--0606--18:v218:v2

# Explicitly cached entries# Explicitly cached entriesCACHE:CACHE:

index.htmlindex.html

stylesheet.cssstylesheet.css

images/logo.pngimages/logo.png

scripts/main.jsscripts/main.js

# Resources that require the user to be online.# Resources that require the user to be online.

NETWORK:NETWORK:

login.phplogin.php/myapi/myapi

http://api.twitter.comhttp://api.twitter.com

# static.html will be served if main.py is inaccessible# static.html will be served if main.py is inaccessible

# offline.jpg will be served in place of all images in images/large/# offline.jpg will be served in place of all images in images/large/

FALLBACK:FALLBACK:

/main.py /static.html/main.py /static.html

images/large/ images/offline.jpgimages/large/ images/offline.jpg



HTML 5HTML 5Local StorageLocal Storage

Tohelpprotect your privacy PowerPoint prevented thisexternalpicture frombeing automaticallydownloaded To downloadanddisplay thispicture click Options in the Message Bar and thenclick Enable externalcontent



To help protect your privacy, PowerPoint prevented this external picture from being automatically downloaded. To download and display this picture, click Options in the Message Bar, and then click Enable external content.

CookiesCookiesIncluded with every HTTP Request Included with every HTTP Request MoreMore

Traffic, Unencrypted DataTraffic, Unencrypted Data

Limited to only 4 KB of DataLimited to only 4 KB of Data

Local StorageLocal Storage

More Storage Space (5 MB)More Storage Space (5 MB)

On the Client On the Client Persists beyond Page RefreshPersists beyond Page Refresh

Isnt Transmitted to ServerIsnt Transmitted to Server



Checking for HTML 5 StorageChecking for HTML 5 Storage

function supports_html5_storage() { try {function supports_html5_storage() { try {

return 'localStorage' in window && return 'localStorage' in window && window['localStorage'] !== null;window['localStorage'] !== null;

} catch (e) {} catch (e) {return false;return false;

}}

}}



Using HTML 5 StorageUsing HTML 5 Storage

var foo =var foo = localStorage.getItem("bar");localStorage.getItem("bar");

// ...// ...

localStorage.setItem("bar", foo);localStorage.setItem("bar", foo);

localStorage.removeItem(key);localStorage.removeItem(key);

localStorage.clear();localStorage.clear();

IterateIterate

localstorage.lengthlocalstorage.length

localStorage.key(index)localStorage.key(index)



Browser Support for Local StorageBrowser Support for Local Storage

4.0+ 3.5+ 10.5+ 4.0+ 4.0+ 3.5+ 10.5+ 4.0+



Beyond Local StorageBeyond Local Storage

WebSQL DatabaseWebSQL Database

Wrapper around SQLiteWrapper around SQLite

Uses SQL Statements for Storing/Retrieving DataUses SQL Statements for Storing/Retrieving Data

Already works in Chrome, Safari and OperaAlready works in Chrome, Safari and Opera



HTML 5HTML 5CanvasCanvas



HTML 5 CanvasHTML 5 Canvas

<canvas> Element <canvas> Element

Resolution dependent Resolution dependent

Bitmap CanvasBitmap Canvas

Used for rendering graphics, images on the flyUsed for rendering graphics, images on the fly




Creating a Canvas AreaCreating a Canvas Area

<

canvas id="a" width="300"<

canvas id="a" width="300"height="225"></canvas>height="225"></canvas>




Using CanvasUsing Canvas

function draw_b() {function draw_b() {

var b_canvas = document.getElementById(a);var b_canvas = document.getElementById(a);

var a_context = b_canvas.getContext("2d");var a_context = b_canvas.getContext("2d");

//Canvas Drawing Code//Canvas Drawing Code

b_context.fillRect(50, 25, 150, 100);b_context.fillRect(50, 25, 150, 100);

}}





Building ChartsBuilding Charts

Interactive AnimationsInteractive Animations

GamesGames

NonNon--trivial Graphicstrivial Graphics




HTML 5 Canvas vs SVGHTML 5 Canvas vs SVG

http://www.borismus.com/canvas-vs-svg-performance/




HTML 5 Canvas vs SVGHTML 5 Canvas vs SVG

http://www.borismus.com/canvas-vs-svg-performance/



Browser Support for Canvas (basic)Browser Support for Canvas (basic)

3.0+ 3.0+ 10.0+3.0+ 7.0+3.0+ 3.0+ 10.0+3.0+ 7.0+



HTML 5HTML 5WebworkersWebworkers




HTML 5 WebworkersHTML 5 Webworkers

Spawn BackgroundSpawn BackgroundScriptsScripts

NonNon--Blocking UIBlocking UI

Ideal for handlingIdeal for handling

ComputationallyComputationallyIntensive TasksIntensive Tasks



HTML 5HTML 5

ResourcesResources

http://diveintohtml5.org/

http://www.html5rocks.com/tutorials/

http://html5tutorial.net/



HTML 5HTML 5

Demos & ExamplesDemos & Examples

http://html5demos.com/canvas

http://html5demos.com/geo

http://html5demos.com/offlineapp

http://html5demos.com/storage

Date post:	10-Apr-2018
Category:	Documents
Upload:	ashwin-chandrasekaran
View:	220 times
Download:	0 times

HTML 5 - An Introduction

Documents