Intro to HTML 5 #LS2011

HTML5

[email protected]/NickFloro

Getting Started with

Intro to HTML 5 [email protected]

twitter.com/nickfloro 1 of 148 03/24/11

The Web Platform is Accelerating

2002WebKit



Next Generation Mobile Using Webkit

RIM BlackberryiOSAndroid



Graphics Location Storage Speed

Solving Developer ChallengesIntro to HTML 5 [email protected]


Which browserʼs support HTML 5?

Chrome Safari Firefox Opera



Chrome Safari Firefox Opera

Which browserʼs support HTML 5?

Internet Explorer 9BETA



HTML 5in the works...



Advanced Core Language



HTML 4Intro to HTML 5 [email protected]


HTML 5 - Introduces New ElementsIntro to HTML 5 [email protected]


<body> <header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer></body>

The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer.



Improve Web Apps



Re-Address backwardcompatibility



Flow chart

Compatibility



Flow chart

Replaces:all prior versions of html



Flow chart

Replaces:XHTML 1.0 & Dom2htmlwith new

APIʼs



HTML 5 Design Principles



1. Support existing content



2. Insure Interoperability



W3c de facto Standard



3. Define UA Behavior(User Agent)



4. Improve Handling of Errors



5. Evolve not recreate what we already have



Build on real world use and test cases



Drawing on the Web

Flash



Canvas & SVG



Scalable Vector Graphics | SVGIntro to HTML 5 [email protected]


Vector Graphics Scale & Look Great!Intro to HTML 5 [email protected]


• Mozilla Download Center (FF)

• First Person Gifter (FF)

• Population Demo (FF)

• Bespin - HTML Editor (Safari)

• German Election Atlas (Safari)

Demoʼs



http://www.mozilla.com/en-US/firefox/stats/




http://htmlfive.appspot.com/static/gifter.html




http://vis.uell.net/gsvg/poppyr.html
























SVG -> High level• Import/Export• Easy UIs• Interactive• Medium Animation• Tree of objects

Canvas -> Low level• No mouse interaction• High Animation• JS Centric• More Bookkeeping• Pixels

When Canvas or SVG?



HTML 5 Support

canvas / svg

video

geolocation

app cache

database

workers



Quake II - Browser Only




WebGL 3D graphics

HTML 5 CanvasHTML 5 Audio

HTML 5 Web Sockets

HTML 5 Local Storage



Video



One video to play everywhere.Intro to HTML 5 [email protected]


Capture to delivery and beyondThe Production Process

Authoring DeliveryVideo / Audio Assets Compression



Standards Are Everywhere

MPEG-1/

MPEG-4 audio

MPEG-2RedBook JPEGAC-3FM DVNTSC/

PAL



• Original DV 60 sec 266mb

• MPEG-4 = 450k to 7.8mb

• Flash 8+ = 450k to 7.8mb

• 60 minutes of Video = 16gb

• 60 minutes compressed = 480mb

MPEG-4: The MPEG for the InternetThe standard for the digital media revolution



PixelsGuidelines for Compression

DV 720 x 486

720P 1280 x 720

HD 1080i 1920 x 1080



Content PlacementGuidelines for Compression

320 x 240



Selecting a SizeGuidelines for Compression

320 x 240

512 x 384

640 x 480



Tips & Hints• Frame Rate: 15 fps– Key Frames: 4 x fps

• 2 Pass Variable Bit Rate

• QuickTime: Sorenson 3 / MPEG 4 / H264

• Flash: Spark / On2 Pro / H264

Guidelines for Compression



Video Compression

Flash



<div id="flashholder"> <div id="flash"> <script language="javascript"> if (AC_FL_RunContent == 0) { alert("This page requires AC_RunActiveContent.js."); } else { AC_FL_RunContent( 'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0', 'width', '320', 'height', '310', 'src', '../FLV_Player', 'quality', 'high', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer', 'align', 'middle', 'play', 'true', 'loop', 'true', 'scale', 'showall', 'wmode', 'window', 'devicefont', 'false', 'id', 'FLV_Player', 'bgcolor', '#ffffff', 'name', 'FLV_Player', 'menu', 'true', 'allowFullScreen', 'false', 'allowScriptAccess','always', 'movie', '../FLV_Player', 'salign', '' ); //end AC code } </script> <noscript>

// HTML 5 makes<video> as easyas <img>// HTML 5 makes <video> as easy as <img>



HTML 5 OptionsVideo Compression

Flash H264MPEG 4

Ogg Theora WebM



<video src="http://example.com/myMovie.ogg" controls>Your browser does not support the video element.</video>

Embedding VideoIntro to HTML 5 [email protected]


<video controls><source src="foo.ogg" type="video/ogg"><source src="foo.mp4">Your browser does not support the video element.</video>

var v = document.getElementsByTagName("video")[0];v.play();

Embedding VideoIntro to HTML 5 [email protected]


www.longtailvideo.com



http://www.e-learningguru.com




HTML 5 Support

canvas / svg

video

geolocation

app cache

database

workers



geolocation



// the geolocation apibrings browser basedlocation to your apps



You are getting hotter.



HTML 5 Support

canvas / svg

video

geolocation

app cache

database

workers

iPhone



app cache& database



// database and app cache store user data and app resources locally



App CacheList resources that you want to take offline

CACHE MANIFEST/static/stickies.html/media/deleteButton.png/media/deleteButtonPressed.png/css/stickies.css/js/stickies.js<body manifest="./cache.manifest"></body>



Databasevar db = window.openDatabase("NoteTest", "1.0","Example DB",200000);function saveMe(id, text, timestamp, left, top, zIndex) {db.transaction(function (tx) {tx.executeSql("INSERT INTO WebKitStickyNotes "+ "(id, note, timestamp, left, top, zindex) "+ "VALUES (?, ?, ?, ?, ?, ?)",[id, text, timestamp, left, top, zIndex]);});}



HTML 5 Support

canvas / svg

video

geolocation

app cache

database

workers

iPhone

mobile

mobile



web workers



HTML 5More Power



// web workers defines an API for runningbackground scripts



Bad Primes (FF 3.5)

Good Primes (FF 3.5)

Motion Tracker (FF)

Demo’sIntro to HTML 5 [email protected]


http://htmlfive.appspot.com/static/primes-bad.html




http://htmlfive.appspot.com/static/primes-good.html




http://htmlfive.appspot.com/static/tracker1.html




Web Workers

<script>var worker = new Worker('worker.js');worker.onmessage = function (event) {console.log('Results: ' + event.data);};</script>



worker.js

function findPrimes() {// ... prime algorithm herepostMessage(nextPrime);}findPrimes();



HTML 5 Support

canvas / svg

video

geolocation

app cache

database

workers

iPhone

mobile

mobile



Test on Windows 7, Vista• Internet Explorer 6, 7, 8, 9

• Firefox 3, 3.5, 3.6, 4.0 beta

• Opera 10

Test on OS X− Safari 4− Firefox 3.5, 3.6, 4.0 beta− Opera 10

Test Mobile− iPhone− Android− Blackberry, Windows 7 Phon

Test for UsabilityIntro to HTML 5 [email protected]


Forms

CSS 3

Effects/Transitions



Design for Flexibility



NickFloro.com



Resources



html5doctor.com



www.thinkvitamin.com



http://www.caniuse.com/



html5demos.com



html5gallery.com



www.sencha.com



www.css3.info



www.uxmag.com



DiveintoHTML5.org



Introducing HTML5 (Voices That Matter)

Bruce Lawson



CSS3 for Web DesignersDan Cederholm | A Book Apart



www.kesiev.com/akihabara/



Go Play, Experiment, Dream

AppleiOS



Search Flickr.com for iPad UI



Resources

• Designing Interactions• Bill Moggridge



http://www.amazon.com/exec/obidos/search-handle-url/index=books&field-author-exact=Daniel%20%20Pink/102-4694211-4092159




Resources• Designing the Obvious:

A Common Sense Approach to Web Application Design• Robert Hoekman Jr.







www.smashingmagazine.com



www.longtailvideo.com



http://www.longtailvideo.com




Compression for Great Video and Audio, Master Tips and Common Sense



Screencasts 101 Mini-Session

www.jingproject.com



www.twitter.com



www.lrnchat.com



www.panma.org



http://www.flickr.com/photos/fraserspeirs/sets/72157623224262135/











www.posterous.com







www.TED.com



http://www.ted.com

http://www.ted.com

http://www.ted.com

http://www.ted.com

Pictures

Video

Blog

Audio

3D Models

Multiplayer Environment

ePortfolios

Course Management System

Micro-blogging

ExploreIntro to HTML 5 [email protected]


http://elgg.org/index.php




Thank You

Nick Florosealworks interactive studios

[email protected]

twitter.com/NickFloro

Download the Presentation at:http://www.slideshare.net/nickfloro



Intro to HTML 5 #LS2011

Technology

Transcript of Intro to HTML 5 #LS2011