Android教程之用 HTML 5 构建 Web 应用程序(一).ppt

Android教程之用HTML5构建Web应用程序（一）基于HTML5已经涌现出了很多新的特性和标准。一旦您发现了当今浏览器中的一些可用的特性，就可以在您的应用程序中充分利用这些特性。在本文中，通过开发一些示例应用程序来了解如何探寻和使用最新的Web技术。本文的绝大多数代码都是HTML、JavaScript和CSS—Web开发人员的核心技术。为了能跟随我们的示例进行学习，最重要的一件事情是要有多个浏览器供测试使用。建议使用MozillaFirefox、AppleSafari和GoogleChrome最新版本。本文中我们使用的是MozillaFirefox3.6、AppleSafari4.04和GoogleChrome5.0.322。您可能还希望在移动浏览器上进行测试。例如，最新的Android和iPhoneSDK被用于在模拟机上测试它们的浏览器。
这些示例包括非常小的用Java™写的后端组件。本文使用的是JDK1.6.0_17和ApacheTomcat6.0.14。有一个关于Web开发人员的笑谈，Web开发人员用他们20%的时间写代码，然后用剩下的80%的时间让这些代码能够在所有浏览器中运转起来并获得相同的效果。要说Web开发人员已习惯于处理不同浏览器间的差别多少有点不切实际。随着浏览器新一轮创新浪潮的出现，这种低效的方法仍然没有改善。最新、最好的浏览器所支持的特性在不断变化。
不过，也有好的一面，这些新特性均集中在Web标准，这就让您能够现在就开始使用这些新特性。您可以采用渐进增强的老技巧、提供一些基线特性、查找高级特性，然后用出现的额外特性增强您的应用程序。要做到这一点，我们需要学习如何探测新功能。清单1显示了一个简单的探测脚本。functiondetectBrowserCapabilities(){
$("userAgent").innerHTML=navigator.userAgent;
varhasWebWorkers=!!window.Worker;
$("workersFlag").innerHTML=""+hasWebWorkers;
varhasGeolocation=!!navigator.geolocation;
$("geoFlag").innerHTML=""+hasGeolocation;
if(hasGeolocation){
document.styleSheets[0].cssRules[1].style.display="block";
navigator.geolocation.getCurrentPosition(function(location){
$("geoLat").innerHTML=location.coords.latitude;
$("geoLong").innerHTML=location.coords.longitude;
});
}varhasDb=!!window.openDatabase;
$("dbFlag").innerHTML=""+hasDb;
varvideoElement=document.createElement("video");
varhasVideo=!!videoElement["canPlayType"];
varogg=false;
varh264=false;
if(hasVideo){
ogg=videoElement.canPlayType('video/ogg;codecs="theora,vorbis"')||"no";
h264=videoElement.canPlayType('video/mp4;
codecs="avc1.42E01E,mp4a.40.2"')||"no";
}$("videoFlag").innerHTML=""+hasVideo;
if(hasVideo){
varvStyle=document.styleSheets[0].cssRules[0].style;
vStyle.display="block";
}
$("h264Flag").innerHTML=""+h264;
$("oggFlag").innerHTML=""+ogg;
}目前已经出现了大量新特性和标准，成为了HTML5标准的一部分。本文重点将放在几个最有用的特性上。清单1中的脚本探测到了四个新特性：
Webworker（多线程）
地理定位
数据库存储
本地视频回放
这个脚本的开头显示了用户浏览器的用户代理。它通常是一个惟一标识此浏览器的字符串，但它很容易被篡改。对于这个应用程序它已经足够好了。下一步是开始检测特性。首先要通过在全局范围（视窗）中查找Worker函数来检测Webworker。这里用到了一些符合语言习惯的Java