HTML5 & CSS3

HTML

Header

Navigation

Aside

Footer

Section

ArticleFooter

ArticleFooter

ArticleFooter

Figure

Image, Video, Quote, Table, etc…

Legend

HTML5

HTML5 ≈ HTML 5 + CSS 3 + JavaScript Rich Internet Applications (RIA) HTML5 x 5 Caution and Progress Example and Reference Sites

New In HTML5

Simplified and Loose Syntax New Elements and Attributes Embedded Media Canvas Offline Storage Drag and Drop Geo-Location

5 HTML Enhancements

HTML Forms CSS Offline applications Local storage

HTML Extended

Document Flow: div, section, article, nav, aside, header, footer

Audio, Video and Embed Canvas: paths, gradients, image

manipulation, events Micro data for semantics and enhanced

search engine results (Google Rich Snippets)

5 HTML Enhancements

HTML Forms CSS Offline applications Local storage

IN THE REAL WORLD

Pros Better semantics Lean code Improved user experience

Cons Some work is needed to accommodate older

browsers

HTML5

Why HTML5 ????

Form Enhancements

Placeholder text Specific text input: email, URL, number,

search Slider Date picker User Agent validation

Audio and Video Tag

Video for Everybody code by Kroc Camen

<video width="480" height="270" controls><source src="mafSept10Welcome.mp4" type="video/mp4" /><source src="mafSept10Welcome.ogv" type="video/ogg" /><object width="480" height="289" type="application/x-shockwave-flash" data="player.swf?&amp;file=mafSept10Welcome.flv”><param name="movie" value="player.swf?&amp;file=mafSept10Welcome.flv&amp" /></object></video>

FREE!

See http://videojs.com for details and downloads.

Developer Reference Sites

CSS3

HTML Forms CSS Offline applications Local storage

IN THE REAL WORLD

Pro Smaller download Less JavaScript Better user experience

Cons Some work is needed to accommodate older

browsers

CSS3

Why CSS3 ????

CSS Effects

Rounded corners Gradients Box and text shadows Fonts Transparencies Multiple background images and border images Multiple columns and grid layout Box sizing Stroke and outlines Animation, movement and rotation Improved selectors

CSS Effect Example

HTML Forms CSS Offline applications Local storageHELLO

.amazing {border: 1px solid blue;color: red;background-color: blue;

-webkit-border-radius: 40px;-moz-border-radius: 40px;border-radius: 40px;

-webkit-box-shadow: 8px 8px 6px #474747;-moz-box-shadow: 8px 8px 6px #474747;box-shadow: 8px 8px 6px #474747;

text-shadow: 8px 8px 2px #595959;filter: dropshadow(color=#595959, offx=8, offy=8);}

http://css3generator.com/

Demos and Experiments

Chrome Experimentshttp://www.chromeexperiments.com

Apple HTML5 Showcase http://www.apple.com/html5/

Canvas Demoshttp://www.canvasdemos.com

RIA Demos with browser support listedhttp://html5demos.com

Developer Reference Sites

W3Chttp://dev.w3.org/html5/html-author/http://w3.org/TR/css3-roadmap/

W3Schools HTML 5 Referencehttp://www.w3schools.com/html5/

Dive Into HTML 5 (prerelease site for an O’Reilly book)http://diveintohtml5.org

WebKit (Safari and Chromium)http://developer.apple.com/safari/library/navigation/http://www.chromium/home/

Mozillahttp://developer.mozilla.org/en/html/html5/

IE 8 & 9http://msdn.microsoft.com/en-us/library/aa737439.aspxhttp://ie.microsoft.com/testdrive/

NILESH PADWAL