Html 5.0

APRIL 12, 2023 | SLIDE 1


www.realdolmen.com

HTML 5.0

Kristof Degrave

http://kristofdegrave.blogspot.com

@kristofdegrave

http://kristofdegrave.blogspot.com/

http://www.twitter.com/kristofdegrave



WHO AM I?

Kristof Degrave Ingelmunster, Belgium www.realdolmen.com Focus on web

HTML 5.0, ASP.NET

http://kristofdegrave.blogspot.com @kristofdegrave

http://www.realdolmen.com/

http://kristofdegrave.blogspot.com/



AGENDA

Introduction to HTML 5.0 Detecting HTML 5.0 Features HTML5 Semantic Markup elements Drawing with the browser Play video and audio Geolocation Storage Let’s take it offline Form++ Microdata Websockets Improving performance


INTRODUCTION TO HTML 5.0Five things you should know about HTML 5.0


FIVE THINGS YOU SHOULD KNOW ABOUT HTML 5.0 It’s not one big thing You don’t need to throw anything away It’s easy to get started

<!DOCTYPE html>

It already works It’s here to stay


MAP OF HTML 5.0

W3C

HTML

HTM

L5C

an

vas 2

D C

on

text

Micro

data

HTM

L+R

DFa

HTM

L5 M

arku

pH

TM

L5 D

iff fro

m H

TM

L4Po

lyg

lot M

arku

pTe

xt a

ltern

ativ

es

CSS

CS

S S

nap

shot 2

00

7C

SS

Nam

esp

ace

sC

SS

Pag

ed

Med

iaC

SS

Print Pro

file

CS

S V

alu

es a

nd

Un

itsC

SS

Casca

din

g a

nd

Inh

erita

nce

CS

S Te

xt

CS

S W

riting

Mod

es

CS

S Lin

e G

ridC

SS

Ru

by

CSS G

enera

ted C

onte

nt fo

r Paged M

edia

CS

S B

ackg

rou

nd

s an

d B

ord

ers

CS

S Fo

nts

CS

S B

asic B

ox M

od

el

CS

S M

ulti-co

lum

n La

you

tC

SS

Tem

pla

te La

you

tC

SS

Med

ia Q

uerie

sC

SS

Sp

eech

CS

S C

olo

rC

SS

Basic U

ser In

terfa

ce

CS

S S

cop

ing

CS

S G

rid Po

sition

ing

CS

S Fle

xib

le B

ox La

you

tC

SS

Imag

e V

alu

es

CS

S 2

D Tra

nsfo

rmatio

ns

CS

S 3

D Tra

nsfo

rmatio

ns

CS

S Tra

nsitio

ns

CS

S A

nim

atio

ns

Web Apps

CO

RS

Ele

men

t Traversa

lFile

API

Ind

ex D

BPro

gra

mm

able

HTTP C

ach

ing a

nd S

erv

ing

Prog

ress E

ven

tsS

ele

ctors A

PI

Sele

ctors A

PI L2

Serv

er-S

en

t Even

tsU

nifo

rm M

essa

gin

g Po

licyW

eb

DO

M C

ore

Web

SQ

L Data

base

Web

IDL

Web

Socke

ts API

Web

Sto

rag

eW

eb

Worke

rsX

mlH

ttpR

eq

uest

Xm

lHttp

Req

uest L2

DO

M L1

DO

M L2

Core

DO

M L2

Vie

ws

DO

M L2

Even

tsD

OM

L2 S

tyle

DO

M L2

Traversa

l an

d R

an

ge

DO

M L2

HTM

LD

OM

L3 C

ore

DO

M L3

Even

tsD

OM

L3 Lo

ad

an

d S

ave

DO

M L3

Valid

atio

nD

OM

L3 X

Path

DO

M L3

Vie

ws a

nd

Form

attin

gD

OM

L3 A

bstra

ct Sch

em

as

SVG

Docu

men

t Stru

cture

Basic S

hap

es

Path

sTe

xt

Tran

sform

sPain

ting

, Filling

, Colo

rS

criptin

gS

tylin

gG

rad

ien

ts an

d P

atte

rns

SM

ILFo

nts

Filters

Geolo

catio

nG

eolo

catio

n A

PI

ECMA

ECMA Script

262

EC

MA

Scrip

t 26

2

First Public Working Draft

Working Draft Last Call

Candidate Recommenda

tion

Recommendation


DETECTING HTML 5.0 FEATURES

Your browsers doesn’t support it, shame on you


DETECTION TECHNIQUE #1

Check if a certain property exists on a global object (such as window or navigator)

function supports_geolocation()

{

return !!navigator.geolocation;

}



Create 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;

}

var dummy_canvas = document.createElement('canvas');

var context = dummy_canvas.getContext('2d');

return typeof context.fillText == 'function';

}



Create 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"');

}



Create an element, set a property to a certain value, then check if the property has retained its value.

function supports_input_type_date()

{

var i = document.createElement("input");

i.setAttribute("type", "color");

return i.type !== "text";

}


MODERNIZER

HTML 5.0 Detection library http://www.modernizr.com/ contains 40 feature detection

if (Modernizr.canvas) { // let's draw some shapes! } else { // no native canvas support available :( }

http://www.modernizr.com/


HTML5 SEMANTIC MARKUP ELEMENTS

Learn it. Live it. Love it


NEW SEMANTIC ELEMENTS

<section> Thematic grouping of content Typically with a heading A web sites home page could be splint into sections for

Introduction News items Contact information

<nav> Section of a page that links to other pages or to parts within the

page Only major navigation blocks Not for links in the footer of the page



<article> Self-contained composition in a document, page, application, or

site Typically

Forum post Web log entry Any other independent item of content

<aside> Consists of contant that is tangentially related to the content

around the aside element Typically

Typographical effects like pull quotes or sidebars Advertising Groups of nav elements Other content that is considered separate from the main content of

the page.



<header> Group of introductory or navigational aids Intended to usually contain the section’s heading (an h1–h6

element or an hgroup element), but not required The header element can also be used:

To wrap a section’s table of contents A search form Any relevant logos

<hgroup> 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.

H2 – H6 elements do not turn up within the document structure



<footer> Footer for its nearest ancestor sectioning content or sectioning

root element Typically contains information about its section such as:

Who wrote it Links to related documents Copyright data

<time> A time on a 24 hour clock, or a precise date in the proleptic

Gregorian calendar Optionally 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 4 HTML 5


HGROUP EXPLENATION

HTML 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 structure

1. This is a section1. And this a subsection!

1. Tagline, this is part of the h1 subsection

2. And this a second subsection!


HGROUP EXPLANATION

HTML 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!

WHAT ABOUT OLDER BROWSERS

Use HTML 5 shim Creates dummy HTML elements



Use HTML 5 Reset stylesheet All browsers render unknown elements inline, i.e. as if they had a

display:inline CSS rule http://html5doctor.com/html-5-reset-stylesheet/


DRAWING WITH THE BROWSER


CANVAS

Canvas 2D API Bitmap Based, JavaScript Driven Rectangles, Paths, Lines, Fills, Arcs, Curves, etc. Gradients Adding images “Immediate Mode”

<canvas> Not supported</canvas>

Fallback

Control


CANCAS

Drawing a one-unit-line Draw a line from (1,0) to (1,3) draw a line from (1.5, 0) to (1.5, 3)


SVG

SVG 1.1 Scalable Vector Graphics

Vector Based Language for describing 2D-graphics and graphical

applications in XML “Retained Mode”


SVG

Shapes: ‘path’, ‘rect’, ‘circle’, ‘ellipse’, ‘line’, ‘polyline’ and ‘polygon’

Text Solid Colors, Linear and Radial Gradients, Patterns Raster Images Styling (inline & CSS)


WHAT ABOUT OLDER BROWSERS

Fallback to Flash or Silverlight Fallback to images in some cases Some libraries out there (some Silverlight plugins,

Raphael JavaScript library etc)


EXERCISE

Canvas: Draw a two demensional grid Draw a radial gradient Add a part of an image ad scale it

SVG Polygon Gradient elipse


PLAY VIDEO AND AUDIOWatch your videos without third-party plugins


VIDEO & AUDIO

Video containers Like a zip file Defines how to store things within them, not what Contains

A video track (without audio) One or more audio tracks (without video) Metadata (title, cover, …)

Examples MPEG 4 (H.264 Baseline Profile video and AAC low-complexity

audio) Flash video Ogg (Theora video and Vorbis audio) WebM (VP8 video codec and Vorbis audio codec) Audio Video Interleave


VIDEO & AUDIO

Video codecs Algorithm by which a video stream is encoded Lossy or lossless Examples

H.264 (patent-encumbered) Theora (royalty-free codec) VP8 (royalty-free codec)

Audio codecs Algorithm by which a audio stream is encoded Lossy or lossless Examples

MP3 (patent-encumbered) Advanced Audio Coding (patent-encumbered) Vorbis (not patent-encumbered)


VIDEO CODEC SUPPORT

Codecs/container IE Firefo

xSafari

Chrome

Opera

iPhone

Android

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

H.264+AAC+MP4 9.0+ - 3.0+ - - 3.0+ 2.0+

WebM 9.0+* 4.0+ *** 6.0+ 10.6+ - 2.3+*** 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 & AUDIO

Video workflow for maximum compatibility Make 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>


GEOLOCATIONHere am i


GEOLOCATION

Opt-in IP address

Serverside Inaccurate

Wireless network connection Based on MAC adres Quick In- and outdoors Accurate

Cell tower Needs enough coverage Mostly smartphones Inaccurate


GEOLOCATION

Dedicated GPS Accurate Slow Not available indoors Assisted GPS

Improvent of TTFF

Hybrid Skyhook Wireless Core Engine

Core engine

GPS A-GPS

Accuracy 10 meters 10 meters 30 meters

Availability 99,8% 80% 95%

Time-To-First-Fix

1 sec 65 sec 30 sec


WHAT ABOUT OLDER BROWSER

Gears Open source browser plugin from google Works on

Windows, Mac, Linux, Windows Mobile, and Android

Drive specifiek API Each platform has it’s on api

BlackBerry, Nokia, Palm, and OMTP BONDI


GEO.JS

Open source, MIT-licensed JavaScript library Smooths over the differences between the W3C

geolocation API, the Gears API, and the APIs provided by mobile platforms

Include at the end of the page (for performance) Add gears_init first to initialize gears

<script src="gears_init.js"></script>

<script src="geo.js"></script>

First, call an init() function to determine if the geolocation api is available if (geo_position_js.init())

After this you can call the getCurrentPosition methode


STORAGEKeeping it on the client


PAST

Cookies Included in every HTTP Request

Slowing down the web app Sending data unencrypted Limited to 4KB

Userdata hierarchical XML-based structure 64 KB per Domain 640 KB for trusted domains Only for IE Not allowed to increase the amount of data Not presenting any form of permissions dialog


PAST

Local Shared Objects Allows Flash objects to stored 100 KB per domain Increase of the amount of data is possible

1 Mb, 10 Mb, and so on User gets prompt for each increaseFlash is necessary

Gears Open source browser plugin Provides api to an embedded Web SQL Database

SQLite Obtaining user permission once Unlimited amounts of data per domain


PAST

Dojo Toolkit Dojox.storage Provides a unified interface Auto-detecs API’s & Plugins

Adobe Flash Gears Adobe AIR Prototype of HTML5 storage in FF


WHAT DO WE WANT

A standardized API Natively and consistently in multiple browsers Don’t have to relay on third-party plugins

A lot of storage space On the client Persists beyond a page refresh Isn’t transmitted to the server


PRESENT

Webstorage Also known as

HTML storage Local storage Dom storage

Stores named key/value pairs Data is never transmitted to the remote web server Implemented natively Persists data beyond Page refresh 5MB per domain Increase of quota is not allowed QUOTA_EXCEEDED_ERR when exceeding the quota


WEBSTORAGE

Available in window object Key and data are stored as string Interface Storage

getter 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);


WEBSTORAGE

Track changes Storage Event Occers when the storage area changes

SetItem RemoveItem Clear And has to actually change something

Storage event object

Property Type Description

key string the named key that was added, removed, or modified

oldValue any the previous value (now overwritten), or null if a new item was added

newValue any the new value, or null if an item was removed

url* string the page which called a method that triggered this change


FUTURE

Web SQL Database Formerly known as “WebDB Embedded database based on SQLite Thin wrapper around a SQL database ExecuteSql

String as parameter String parameter can be any supported SQL statement

– SELECT, UPDATE, INSERT, and DELETE

Specification work has stopped The 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.


FUTURE

Indexed Database Formerly known as “WebSimpleDB” Affectionately known as “IndexedDB” Exposes an object store

Shares many concepts with a SQL database There are “databases” with “records” Each record has a set number of “fields” Each field has a specific datatype This field is defined when the database is created Select subset of records and enumerate them with a cursor Changes are handled within transactions No structured query language Instead methodes are provide by the API


LET’S TAKE IT OFFLINENo internet connection? Not a problem at all!


OFFLINE WEB APPLICATIONS

Contradiction Webpages are things you download and render But we can download the files when we are online

Connect online to an offline enabled web app Read the list of URLs from the manifest file Download the resources Cache them locally Automatically keep the local copies up to date as they change

Connect offline to a visited offline enabled web app Browser automatically switches to the local copies


OFFLINE WEB APPLICATIONS

Event that fires when the offline status changes

HTML5 can take your web application offline, but the rest is up to you Store data localy Sync with server when the app is online …


CHACHE MANIFEST

A list of all of the resources that your web application might need to access while it’s disconnected from the network

HTML CSS JS Images …

Manifest attribute on html element <html manifest="/cache.manifest">

Can be located anywhere on the server Every page of your web application needs a manifest

attribute that points to the cache manifest for the entire application.


CACHE MANIFEST

Content First line of every cache manifest file:

CACHE MANIFEST The following is devided in 3 parts

Explicit section– CACHE – All files in this list will be downloaded and cached

Fallback section– FALLBACK– Page that will be displayed when you are trying to reach a page offline

that hasn’t been cached Outline whitelist section

– NETWORK– Contains recoures that should never be cached (ex. Cgi scritps)


CACHE MANIFEST EXAMPLE

CACHE MANIFEST

FALLBACK:

/ /offline.html

NETWORK:

*


THE FLOW OF EVENTS

First time visit Checking event

Fires when the browsers notices a manifest attribute in the html tag Fires always, even if you allready visited the page

Downloading event Fires if the browser has never seen this manifest file

Progres event Fires periodically while downloading Contains information about the number of files that have been

downloaded and the number of files that are still queued Cached event

Fires when all the files in the manifest file are downloaded The web app is now fully cached and ready to use offline


THE FLOW OF EVENTS

Previously visited Noupdate event

Fires if you allready visited the page and the manifest file hasn’t changed

Downloading event Fires if you allready visited the page and the manifest has changed Redownloads every single file listed in the manifest file

Progres event Fires periodically while downloading Contains information about the number of files that have bee

Updateready event Fires when redownloading was succesfull The new version web app is now fully cached Call window.applicationCache.swapCache() function or reload the

page so the new version will be in use.


THE FLOW OF EVENTS

Error event Fires when something goes wrong in the flow of events Possible errors

HTTP error 404 (Page not found) HTTP error 410 (Permanetly Gone) Page failed to download properly Manifest file changed while updating Browser failed to download one of the resources listed in the

manifest file


FORM++Taking forms to the next level


KNOW INPUT TYPES

Checkbox <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 TYPES

Email <input type="email">

Web address <input type="url">


NEW INPUT TYPES

Number (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">

Datetime picker <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 TYPES

Color picker <input type="color">


FORM VALIDATION

Automatic No JS needed

Validation happens even if JS is disabled

Determines validation with the type attribute E-mail -> checks for valid e-mailaddress

Url -> checks for valid URL Number -> checks if the number is within the range of min &

max

Novalidation Attribute on the form elements Turns the validation off


FORM VALIDATION

Required Attribute on input fields Tells the browser the input field is required

Pattern Attribute on input fields Checks if the value matches a given regex

Multiple Attribute on e-mail and file fields Allows multiple files or e-mailadresses in a single input box

List Attribute on input fields Provides suggestions (similar to auto complete)


EXTRA FEATURES

Placeholder text Attribute “placeholder” in input fields Text displayed in an input field when

Empty Not focused

Autofocus Attribute “autofocus” in input fields Moves the input focus to the input field as the page is loaded


MICRODATA


MICRODATA

Microdata annotates the DOM with scoped name/value pairs from custom vocabularies. Centers around custom vocabularies

Think 1 vocabulary = “the set of all HTML5 elements” Works with name/value pairs Relies heavily on the concept of “scoping”

Parent-child relationship of DOM elements


MICRODATA

Where Do Microdata Property Values Come From?

Element Value

<meta> content attribute

<audio><embed><iframe><img><source><video>

src attribute

<a><area><link>

href attribute

<object> data attribute

<time> datetime attribute

all other elements text content


ADDING MICRODATA

Attribute itemtype Declares the microdata vocabulary Contains data defenitie of the model

Attribute itemscope Declares the scope of the vocabulary

Attribute itemproperty The name of the property


MICRODATA EXAMPLE

Example<section itemscope itemtype="http://data-vocabulary.org/Person">

<h1 itemprop="name">Kristof Degrave</h1>

<dd itemprop="address" itemscope

itemtype="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 NEED IT

Direct communication between client and server Chat applications Social networks Cloud applications Online gaming …

Current solutions Frequent polling Long polling


FREQUENT

Browser Server

HTTP Request

HTTP Response


FREQUENT POLLING

GET /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=false

HTTP/1.x 200 OKX-Powered-By: Servlet/2.5Server: Sun Java System Application Server 9.1_02Content-Type: text/html;charset=UTF-8


FREQUENT POLLING

Request / Response headers = 871 bytes 1000 clients poll every 10 seconds

1000 * 871 bytes = 0,8MB / 10 seconds 0,8 MB * 6 = 4,8 MB / minute 4,8 MB * 60 = 288 MB / hour 288 MB * 24 = 6,912 GB / day


LONG POLLING

Wait for it

Browser Server

HTTP Request

HTTP Response


WEBSOCKETS

TCP for the web Full duplex direct communication Benifits

Native implemented Less throughput Performance Complexity

Fallbacks Silverlight Flash


WEBSOCKETS

HandshakeGET /demo

HTTP/1.1 Upgrade: WebSocket

Connection: 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: WebSocket

Connection: 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


OTHER

Webworkers Allows running scripts in the background Doesn’t block or freezes UI Takes advantage of multiple cores

Async scripts Attribute on script element Simplifies page-load performance improvements Simplifies dynamic script loading

Page Visibility API Programmatically determine the current visibility of a document Notifies visibility changes


SetImmidiate API Breaks appart long running JS operations Allows the browser to process outstanding work and then waits

for the specified period of time before calling back into JavaScript

Layout Paints

Important design pattern when building responsive web applications

RequestAnimationFrame API Creates power efficient and smooth animations Takes 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


JUMPLIST

With meta tags in the <head> Start with app 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


CONCLUSION

Start using it today Use fallback mechanisms for older browsers Use feature detection instead of browser detection


RESOURCES

http://diveintohtml5.org/ http://ie.microsoft.com/testdrive/ http://www.w3schools.com/html5/default.asp http://html5doctor.com/html-5-reset-stylesheet/

http://diveintohtml5.org/

http://ie.microsoft.com/testdrive/

http://www.w3schools.com/html5/default.asp

http://www.w3schools.com/html5/default.asp

http://html5doctor.com/html-5-reset-stylesheet/


THANK YOU

For more information:visit our website WWW.REALDOLMEN.COM

Follow us on:

Selected presentations are available on:

Or scan this QR code with your Smartphone to immediately go to the website





http://twitter.com/realdolmentweet

http://blogs.realdolmen.com/

http://www.slideshare.net/RealDolmen

Html 5.0

Technology

Transcript of Html 5.0