《[互联网]HTML5.ppt》由会员分享，可在线阅读，更多相关《[互联网]HTML5.ppt（71页珍藏版）》请在三一文库上搜索。
1、Something about HTML5 Zhang Long（张龙） http:/ 2010-10-30 Content Introduction New features Canvas/SVG Video Geolocation App cache rect.style.fill = green; rect.onclick = function() alert(hello); Canvas API JavaScript API (“Scriptable Image Tag“) var canvas = document.getElementById(myCanvas); var ctx
2、= canvas.getContext(2d); ctx.fillStyle = “rgb(200,0,0)“; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = “rgba(0, 0, 200, 0.5)“; ctx.fillRect (30, 30, 55, 50); canvas and SVG demos SVG (http:/ Canvas (http:/ When Canvas or SVG? SVG - High level Import/Export Easy UIs Interactive Medium Animation Tree
3、 of objects Canvas - Low level No mouse interaction High Animation JS Centric More Bookkeeping Pixels HTML 5 Support New features Video is Complicated, and Outside Your Control Video is Complicated, and Outside Your Control / HTML 5 makes as easy as Multiple Files v.play(); video demos Basic Player
4、(http:/ HTML 5 Support New features Lifes Better with Location .And Browsers Are Now Location-Enabled .And Browsers Are Now Location-Enabled / the geolocation api brings browserbased location to your apps Geolocation Sample navigator.geolocation.getCurrentPosition( function(position) var lat = posit
5、ion.coords.latitude; var lon = position.coords.longitude; showLocation(lat, lon); ); geolocation demos Google Map (http:/ ml) HTML 5 Support New features Web Apps Need to Work Everywhere Web Apps Need to Work Everywhere / database and app cache store user data and app resources locally App Cache Lis
6、t resources that you want to take offline CACHE MANIFEST /static/stickies.html /media/deleteButton.png /media/deleteButtonPressed.png /css/stickies.css /js/stickies.js Database var db = window.openDatabase(“NoteTest“, “1.0“, “Example DB“, 200000); function saveMe(id, text, timestamp, left, top, zInd
7、ex) db.transaction( function (tx) tx.executeSql( “INSERT INTO WebKitStickyNotes “ + “(id, note, timestamp, left, top, zindex) “ + “VALUES (?, ?, ?, ?, ?, ?)“, id, text, timestamp, left, top, zIndex); ); geolocation demos Sticky Notes Demo (http:/ ml) HTML 5 Support New features A More Powerful Web =
8、 More Powerful Apps But More Power = More Responsibility Web Apps Need to Work Everywhere / web workers defines an API for running background scripts Web Workers var worker = new Worker(worker.js); worker.onmessage = function (event) console.log(Results: + event.data); ; /worker.js function findPrim
9、es() / . prime algorithm here postMessage(nextPrime); findPrimes(); geolocation demos web workers demos (http:/ html) HTML 5 Support HTML 5 Stories HTML5 Google, YouTube Apple, AppStore Microsoft, Silverlight Mozilla Opera Adobe, Flash HTML5, WebOS and Mobile Computer 乔布斯在WWDC 2010向全球的App开发者发布了HTML5
10、平台。 HTML5 - its a completely open, uncontrolled platform. And we fully support it. 腾讯HTML5体育专区 新浪HTML5视频测试 在 Google I/O 的开发者大会，Google 工程副总裁 Vic Gundotra 表示了他们对下一代 HTML 语言，HTML 5 的承诺。 HTML5 youtube, docs, WebOS Google 首页，HTML5 感谢大家的参与，下次课见 张龙 （风中叶） HTML 5、Flex 4、Android、Servlet3.0/Tomcat7、Java EE、Spring MVC、Web Service 各种新技术剖析，尽在北京圣思园 北京圣思园科技有限公司 http:/