HTML5 - PDF Free Download

HTML5 INTERNET3D WEBOS {serena,hsing}@nchc.org.tw

HTML5

WEB 1991 HTML 1994 HTML 2 1996 CSS 1 + JavaScript 1997 HTML 4.01 1998 CSS 2 2000 XHTML 1.0 2002 <DIV> + CSS 2005 AJAX (Asynchronous JavaScript And XML) 20? HTML 5 ( HTML + CSS + Java Script API) XML XHTML

(X)HTML HTML 4.01: XHTML 1: HTML XML 樑 XHTML 1.1: Semantic Web XHTML 2.0 ( )

HTML

HTML5? Web Application 2004 Mozilla Opera W3C HTML WG 2004 Apple Mozilla Opera WHAT WG(Web Hypertext Application Technology Working Group) Google 2006 HTML5 W3C HTML5 A vocabulary and associated APIs for HTML and XHTML HTML5 ~= HTML + Java Script (+CSS) Java Script 2009 2010 IE9 HTML5 Java Script

http://www.html5test.com/ Google Chrome 6 beta - 217 Google Chrome 5-197 Firefox 4 beta - 189 Safari 5-165 Opera 10.6-159 Firefox 3.6.8-139 IE 9-96 IE 8-27

HTML 5 HTML 4 article nav footer header section HTML4 HTML5

HTML5 input (Opera 10.6.8 ) date, time, email, url, number

HTML5 <canvas>... Adobe Flash Quick Time plug-in webm ( Html 5) VP8 (On2 Matroska - MKV) Ogg Vorbis H.264

HTML5 ping, charset, async id, tabindex, repeat center, font, u, strike, s, frameset, frame, applet CSS HTML5 <img src="" alt="" > XHTML5 <img src="" alt="" /> <html>, <head>, <body> (...)

HTML5 HTML5 Web Worker Web Storage, Web SQL Database WebSocket API, WebSocket Protocol Server-sent Events Geolocation API Google Map SVG, MathML XMLHttpRequest AJAX

HTML5? 2022? 2012......

HTML5 ADOBE FLASH Flash - HTML5 - Flash - HTML5 - 步 Flash - ( ) HTML5 - ( IE 9?) Flash - ipad HTML5 -

HTML5 <VIDEO>

HTML5 <VIDEO> <video> Streaming : UDP-based RTP,RTSP Quicktime Multicast : asf Adobe Flash -> <video> Tag

<VIDEO> <video> <video src="billybrowsers.ogg" controls> <p>your browser does not support the video element.</p> </video>

<VIDEO> IE9 (...) : iphone Android... Apple Google H.264 5 Firefox Opera : Ogg/Theora WebM Firefox, Chrome, Opera, IE (plugin), Safari?

<VIDEO> controls autoplay volume muted DEMO 幫 <canvas> SVG (Scalable Vector Graphics) CSS

HTML5 <CANVAS>

HTML5 <CANVAS> <canvas> bitmap <div> No dynamic graphics api VML (Vector Markup Language) Macromedia W3C Adobe Sun PGML Internet Explorer > IE5.5 XML SVG VML <v:oval style="position:absolute; left:0; top:0; width:100pt; height:50pt" fillcolor="red"> </v:oval> SVG <ellipse cx="50" cy="25" rx="50" ry="25" style="fill:red;"/>

HTML5 <CANVAS> <canvas> 2D Google Map iphone Android HTMLVideoElement drawimage(in HTMLCanvasElement, in float, in float, in float, in float) drawimage(in HTMLImageElement, in float, in float, in float, in float) drawimage(in HTMLVideoElement, in float, in float, in float, in float)

<CANVAS> <canvas id="canvas" width="838" height="220"></canvas> <script> var canvascontext = document.getelementbyid("canvas").getcontext("2d"); canvascontext.fillrect(250, 25, 150, 100); canvascontext.beginpath(); canvascontext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2); canvascontext.linewidth = 15; canvascontext.linecap = 'round'; canvascontext.strokestyle = 'rgba(255, 127, 0, 0.5)'; canvascontext.stroke(); </script>

DEMO

HTML5 INTERNET3D

INTERNET3D WebGL OpenGL ES 2.0 3D plug-in 卡 <canvas> 3D ) FireFox 3.7 Alpha about:config webgl.enabled_for_all_sites true Google Chrome chrome.exe --enable-webgl --no-sandbox Mac Safari 5 defaults write com.apple.safari WebKitWebGLEnabled -bool YES

DEMO

HTML5 - GEOLOCATION API

GEOLOCATION API? ( ) GPS IP ( ) API : http://www.w3.org/tr/geolocation-api/ Geolocation API Google Gears plugin (deprecated) Google AJAX Loader http://code.google.com/intl/en/apis/ajax/documentation/ #ClientLocation

Mozilla Firefox 3.5+ Google Chrome 5+ Safari 5+ Opera 10.60+ WebKit nightly Mobile Safari (iphone OS 3+) Android Browser (Android 1.6+)

GEOLOCATION API if ('geolocation' in navigator) { // Geolocation API } else { // Gears Google AJAX Loader }

GETCURRENTPOSITION Function signature: navigator.geolocation.getcurrentposition(succcb, failcb, opts); Successful callback function: var succcb = function(geo : Geoposition) { geo.coords // latitude, longitude, accuracy,.. geo.timestamp }; Fail callback function: var failcb = function(err : PositionError) { err.code err.message }; Options o enablehighaccuracy : boolean o timeout : int

WATCHPOSITION Function signature: var watchid = navigator.geolocation.watchposition(succcb, failcb, opts); Repeatedly detecting the client's position. o Use navigator.geolocation.clearwatch(watchid) to clear the timer.

FALLBACKS // : // http://www.google.com/jsapi?key= // http://code.google.com/apis/gears/gears_init.js var fallbacktoipgeolocation = function() { if (google.loader.clientlocation) { // google.loader.clientlocation.latitude // google.loader.clientlocation.longitude } else { // } }; if (navigator.geolocation) { navigator.geolocation.getcurrentposition(getposition, fallbacktoipgeolocation, {enablehighaccuracy: true}); } else { if (window.google && google.gears) { try { var geo = google.gears.factory.create('beta.location'); geo.getcurrentposition(getposition, fallbacktoipgeolocation, {enablehighaccuracy: true}); } catch (e) { fallbacktoipgeolocation(); } } else { fallbacktoipgeolocation(); } }

EXAMPLE: DISTANCE CALCULATION // lat1, lng1, lat2, lng2 radlat1 = Math.PI * lat1/180.0; radlng1 = Math.PI * lng1/180.0; radlat2 = Math.PI * lat2/180.0; radlng2 = Math.PI * lng2/180.0; theta = lng1 - lng2; radtheta = Math.PI * theta / 180.0; dist = Math.acos( Math.sin(radLat1) * Math.sin(radLat2) + Math.cos(radLng1) * Math.cos(radLng2) * Math.cos(radTheta) ) * 180.0/Math.PI * 60 * 1.1515; // K unit dist *= 1.609344; // N unit dist *= 0.8684;

EXAMPLE: GOOGLE GEO SERVICES  <script src="http://maps.google.com/maps/api/js?sensor=true"> </script> <script> var geocoder = new google.maps.geocoder(); var latlng = new google.maps.latlng(lat, lng); geocoder.geocode({'latlng': latlng}, function(results, status) { if (status == google.maps.geocoderstatus.ok) { // results[1] } }); </script>

DEMO

CSS3

CSS CSS1 (1996) IE3 CSS. Mac IE5 CSS (2000/5) Opera CSS (2001/1).OOX^&* CSS2 (1997) W3C (1998). CSS2.1 W3C (2007) CSS3 (1998).

CSS3 Web Designer's Checklist. IE9 HTML5/CSS3 filter/dximage Firefox 4 beta CSS3 (-moz prefix) Safari/Chrome CSS3 (-webkit prefix) Mobile Safari (iphone) Android browser Chrome ext/webapp Opera CSS3(-o prefix)

CSS3 API : CSS3 Image Values (gradients section). WebKit Gecko

? ( ) CSS? (..) -webkit-gradient(linear,...) -moz-linear-gradient(...) -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff))

( ) SVG -webkit-mask-image/-webkit-mask-box-image

-webkit-box-reflect above, below, left, right offset mask -webkit-box-reflect: below 3px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.75, transparent), to(white));

? CSS3 A (,,.) B Safari 4+, Chrome 4+ (-webkit-transition-*) Firefox 3.7+ (-moz-transition-*) Opera 10.5+ (-o-transition-*) Mobile Safari (-webkit-transition-*) Android browser 1.6+ (-webkit-transition-*) IE9??

CSS3 transition-property 哪徵 background-color, font-size,... transition-duration 0.5s, 2s,... transition-timing-function curve/path (Cubic Bezier curve) linear, ease, ease-in, ease-out, ease-in-oucubic-bezier()... transition-delay 1s, 3s, 2.45s,...

: Demo

`TRANSITION END` webkittransitionend elem.addeventlistener('webkittransitionend', function(evt) { // do something while the transition ends. }, false);

CSS3,,, 2D 3D 3D perspective (- webkit-perspective) Safari/Mobile Safari 3D 2D Safari, Chrome, Mobile Safari, Android -webkit-transform:... CSS Firefox -moz-transform Opera -o-transform

CSS3 : (ROTATION) 30 -webkit-transform: rotate(30deg) Demo (3D) Y- perspective Y- Y(40deg) Demos.

: Apple's HTML5 Sample. Card Flip sample Back-face visibility -webkit-backface-visibility: hidden/visible;

2D Transform rotate(30deg)... translate(20px, 30px) translatex(40px) translatey(30px)... scale(3) scalex(3) scaley(3)...... 3D Transform rotatey(30deg)... translate3d(10px, 20px, 30px) translatez(30px)..

CSS3 : Safari 4 Chrome 4 Mobile Safari (iphone 2.0) Android

CSS3 -webkit-animation-name -webkit-keyframes <name> -webkit-animation-duration 1s, 0.5s, 3s,... -webkit-animation-iteration-count or

CSS3 @-webkit-keyframes bounces { } from { } -webkit-transform: translatey(100px); -webkit-animation-timing-function: ease-out; 25% { } -webkit-transform: translatey(50px); -webkit-animation-timing-function: ease-in; 50% { } -webkit-transform: translatey(100px); -webkit-animation-timing-function: ease-out; 75% { } -webkit-transform: translatey(75px); -webkit-animation-timing-function: ease-in; to { } -webkit-transform: translatey(100px);

`ANIMATION END` webkitanimationend Sample code: elem.addeventlistener('webkitanimationend', function(evt) { // do something while the transition ends. }, false);

WEBOS

WEBOS Ajax(Asynchronous JavaScript And XML)

http://www.tossug.org/html5club http://www.html5rocks.com/ http://people.mozilla.com/~prouget/demos/ http://billmill.org/static/canvastutorial/