html5 & learning : astd presentation 062411
DESCRIPTION
Get an overview of how HTML5 will change how we use the web for app and content development. We cover 5 technologies you can start to use today, show lots of example and view dozens of resources to start playing and learning about HTML5 today.TRANSCRIPT
What can it do?
HTML5 = JS + CSS3
SEMANTICS
CSS3
3D, GRAPHICS & EFFECTS
DEVICE ACCESS
PERFORMANCE & INTEGRATION
MULTIMEDIA
OFFLINE & STORAGECONNECTIVITY
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
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
Frame RateGuidelines for Compression
29.97 fps
Frame RateGuidelines for Compression
29.97 fps 15 fps
Tips & Hints
Key Frames: 4 x fps
Guidelines for Compression
Guidelines for Compression2 Pass Variable Bit Rate
Guidelines for Compression2 Pass Variable Bit Rate
Tips & Hints• Frame Rate: 15 fps– Key Frames: 4 x fps
• Data Rate Target 800-1200 kbs
• 2 Pass Variable Bit Rate
• QuickTime: Sorenson 3 / H264
• Flash: Spark / On2 Pro / H264
• Audio: 16bit / 22khz / Mono / 64 kbs
Guidelines for Compression
WebM
Easy Access to VideoFlip $100 to $200
Smart Phones
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
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
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
Web App
AppWeb
Forms
CSS 3
Effects/Transitions
Android Xoom1280 x 720
HTC Incredible800 x 480
Selecting a SizePixels & Aspect Ratio
iPad1024 x 768
iPhone 4960 x
iPhone480 x 320
Droid854 x 480
tumultco.com
animatable.com
Design for Flexibility
Capture & Analyze
Using CoverFlow view and Preview of Graphics
Design Scrapbook: iPhoto | LittleSnapper
NickFloro.com
Resources
html5rocks.com
html5doctor.com
www.thinkvitamin.com
http://www.caniuse.com/
labs.adobe.com/technologies/wallaby/
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.gamesalad.com
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
Nancy Durate Garr Reynolds
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