introduction to html5 and learning for mobile+
DESCRIPTION
Learn about HTML5, what and how we should be using today and how to plan for development you are doing today. Lots of great resources for getting started. Presented at #mlearningdevcon October 2011.TRANSCRIPT
App
The Web Platform
Web App
WebApp
WebApp
HTML Javascript CSS API’s
What can we do with
HTML5
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
Internet Explorer 9 BETA
Which browser’s support HTML 5?
Chrome Safari Firefox Opera
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)
• 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
Forms
CSS 3
Effects/Transitions
Android Xoom1280 x 720
HTC Incredible800 x 480
Selecting a SizePixels & Aspect Ratio
iPad1024 x 768
iPhone 4960 x 640
iPhone480 x 320
Droid854 x 480
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/
tumultco.com
animatable.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.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
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