intro to html 5 for learning #eldc2011
DESCRIPTION
Presented at ELDC2011 in Utah 2011.TRANSCRIPT
The Web Platform is Accelerating
2002WebKit
Next Generation Mobile Using Webkit
RIM BlackberryiOSAndroid
Graphics Location Storage Speed
Solving Developer Challenges
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 4
HTML 5 - Introduces New Elements
<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 | SVG
Vector Graphics Scale & Look Great!
• Mozilla Download Center (FF)
• First Person Gifter (FF)
• Population Demo (FF)
• Bespin - HTML Editor (Safari)
• German Election Atlas (Safari)
Demoʼs
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
Quake II - Browser Only
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.
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
<!-- flash movie & bullets --> <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 Video
<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 Video
HTML 5 Support
canvas / svg
video
geolocation
app cache
database
workers
geolocation
// the geolocation apibrings browser basedlocation to your apps
A C
R
O
P T
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’s
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− iOS− Android− Blackberry, Windows 7 Phone
Test for Usability
Forms
CSS 3
Effects/Transitions
tumultco.com
animatable.com
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
www.smashingmagazine.com
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.launchcycle.com
Pictures
Video
Blog
Audio
3D Models
Multiplayer Environment
ePortfolios
Course Management System
Micro-blogging
Explore
Thank You
Nick Florosealworks interactive studios
twitter.com/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro