HTML5应用介绍

HTML5WebAppsideaTouchHTML5BloggerideaTouchAnyDeviceAnywhereAnytimeJavascriptCSS3Ajax“HTMLFlash,Silverlight,JavaFX”Web1991HTML1994HTML21996CSS+Javascript1997HTML3.21998CSS21999HTML4.0110102000XHTML1HTML4XML2001~XHTML22002DIV+CSS2004HTML(WHATWG)WebHypertextApplicationsTechnologyWorkingGroup2005AJAX2007~2009HTML5DraftWHATWG2010HTML5...Web1.0Web2.0Web3.0••LOGO3DCube3DBoxBlobPageFlipMore...•VideoCanvasICanvasIIGoogleGravity•TimelineReader•Games••PiratesLoveDaisies!•Gmail,GoogleDocs•Logo(Canvas)=ideaTouchCubedivid=cubedivclass=faceone Oneface/divdivclass=facetwo Up,down,left,right/divdivclass=facethree Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat./divdivclass=facefour Newformsofnavigationarefun./divdivclass=facefive Rotating3Dcube/divdivclass=facesix imgsrc=images/sonic.gif/div/divscriptvarxAngle=0,yAngle=0;document.addEventListener('keydown',function(e){ switch(e.keyCode) { case37://left yAngle-=90; break; case38://up xAngle+=90; break; case39://right yAngle+=90; break; case40://down xAngle-=90; break; }; $('cube').style.webkitTransform=rotateX(+xAngle+deg)rotateY(+yAngle+deg); },false);/script:// divstyle=display:none videoid=sourcevidautoplay=trueloop=true sourcesrc=BigBuckBunny_640x360.mp4type=video/mp4/ sourcesrc=BigBuckBunny_640x360.ogvtype=video/ogg/ /video canvasid=sourcecopywidth=640height=360/canvas /div....functionexplode(x,y){ for(vari=0;itiles.length;i++){ vartile=tiles[i]; varxdiff=tile.currentX-x; varydiff=tile.currentY-y; vardist=Math.sqrt(xdiff*xdiff+ydiff*ydiff); varrandRange=220+(Math.random()*30); varrange=randRange-dist; varforce=3*(range/randRange); if(forcetile.force){ tile.force=force; varradians=Math.atan2(ydiff,xdiff); tile.moveX=Math.cos(radians); tile.moveY=Math.sin(radians); tile.moveRotation=0.5-Math.random(); } } tiles.sort(zindexSort); processFrame();}....://html5.labs.ap.org/(PC)(iPad)iPad(iPhone)iPhone(1/2)••••••Postel’sLaw:“Beconservativeinwhatyousend;beliberalinwhatyouaccept.”“”(2/2)••WebApplication(WebWorker•LocalStorage+IndexexDB+FileReader•WebSocket+Geolocation(•Video/Audio+Canvas+WebGL(3D)•email,url,password,search,date,teletc.••Web••••1.reader.manifestCACHEMANIFEST#JSfileslib/jquery/jquery-1.4.3.jsmodule/reader/reader.js#CSSfilesthemes/reader/reader.css#ImagefilesNETWORK:#2.html:htmlmanifest=reader.manifest3.Apache.htaccessmimeTypeAddTypetext/cache-manifestmanifest1.JSimportScripts(jquery-1.4.3.js);2.workervarworker=newWorker('reader.js');3.messageaddEventListener(message,messageHandler,true);4.document.getElementById(resourceButton).onclick=function(){worker.postMessage(loadResource);}5.Workerworker.terminate();•LocalStorage/SessionStorage•SessionStorage:•localStorage:•WebSQL•SQL•IndexedDB•API••HTML51.//savesessionStorage[‘data’]={“test”:”sessonStorage”};//getvardata=sessionStorage[‘data1’]2.//savelocalStorage[‘data2’]={‘test”:”localStorage’};//getvardata=sessionStorage[‘data2’]functionprepareDatabase(ready,error){returnopenDatabase('documents','1.0','Offlinedocumentstorage',5*1024*1024,function(db){db.changeVersion('','1.0',function(t){t.executeSql('CREATETABLEdocids(id,name)');},error);});}db.readTransaction(function(t){t.executeSql('SELECTtitle,authorFROMdocsWHEREid=?',[id],function(t,data){report(data.rows[0].title,data.rows[0].author);});});varfile=document.getElementById('file').files[0];varreader=newFileReader();reader.readAsText(readFile,UTF-16);•WebSocket•••Geolocation•GoogleMap•navigator.geolocation.getCurrentPosition(locateMap,errorHandle);....locateMap=function(position){varlatlng=newgoogle.maps.LatLng(position.coords.latitude,position.coords.longitude);varmyOptions={zoom:15,center:latlng,mapTypeControl:false,navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL},mapTypeId:google.maps.MapTypeId.ROADMAP};varmap=newgoogle.maps.Map(document.getElementById(mapcanvas),myOptions);}=ws://localhost:8080/echo;w=newWebSocket(url);2.open,message,closew.onopen=function(){log(open);w.send(thankyouforacceptingthiswebsocketrequest);}w.onmessage=function(e){log(e.data);}w.onclose=function(e){log(closed);}3.socketdocument.getElementById(sendButton).onclick=function(){w.send(document.getElementById(inputMessage).value);}WebSoket(1/3)HTML5BasedApps(HTML5+CSS3+Javascript)‣‣(OAuth)‣(PC,iOS,AndroidandHTML5-baseddevices)‣‣‣MVC=JSObjects+HTML5/CSS3+EventsCloudServices(Java,C#)‣(Search,Rule/CalculationEngine)‣‣‣‣‣MVC=Objects+RemoteClients+ESB‣...JSON/ATOM/RSSWebServiceetc..(2/3)CategoryFeatureRemarkWebAppHTML5,CSS3,Ajax