Intro to HTML 5 #LS2011

Nick@sealworks.comTwitter.com/NickFloro

Getting Started with

Intro to HTML 5 Nick@sealworks.com

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 Nick@sealworks.com

Which browserʼs support HTML 5?

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 Nick@sealworks.com

HTML 5 - Introduces New ElementsIntro to HTML 5 Nick@sealworks.com

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

Canvas & SVG

Scalable Vector Graphics | SVGIntro to HTML 5 Nick@sealworks.com

Vector Graphics Scale & Look Great!Intro to HTML 5 Nick@sealworks.com

• 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

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

One video to play everywhere.Intro to HTML 5 Nick@sealworks.com

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/

• 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

<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 Nick@sealworks.com

<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 Nick@sealworks.com

www.longtailvideo.com

HTML 5 Support

canvas / svg

geolocation

app cache

database

workers

geolocation

// the geolocation apibrings browser basedlocation to your apps

You are getting hotter.

HTML 5 Support

canvas / svg

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

geolocation

app cache

database

workers

iPhone

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 Nick@sealworks.com

Web Workers

worker.js

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

HTML 5 Support

canvas / svg

geolocation

app cache

database

workers

iPhone

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 Nick@sealworks.com

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

Resources• Designing the Obvious:

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

www.smashingmagazine.com

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

Pictures

3D Models

Multiplayer Environment

ePortfolios

Course Management System

Micro-blogging

ExploreIntro to HTML 5 Nick@sealworks.com

Thank You

Nick Florosealworks interactive studios

nick@sealworks.comwww.sealworks.com

twitter.com/NickFloro

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

Intro to HTML 5 #LS2011

Technology

1 Intro to HTML

HTML Intro Basics

Html intro

HTML Comprehensive Concepts and Techniques Intro Project Introduction to HTML

Class one: intro to HTML, HTML page structure, text, images, and links

Intro HTML 5

01 - HTML Intro

Intro to PHP IST2101. Review: HTML & Tags 2IST210

Mod1 Intro HTML Css Url

HTML 5 - intro - en francais

Intro to HTML

Week 2-intro-html

Intro to HTML and CSS - Class 2 Slides

An Intro to HTML & CSS

Intro to html, css & sass

Intro to HTML 5, Canvas, WebGL · Intro to HTML 5, Canvas, WebGL . Overview •History of HTML •HTML5 –Feature overview –Browser support –Creating an HTML5 page ... •1993

Intro to-html-backbone

YL Intro html

Intro to CIT 594 matuszek/cit594-2015.html

Intro to HTML Basics