使用HTML5改进移动Web应用的开发

分享到:

HTML5和移动应用已经成为就为增长最快的两个领域,HTML5和移动应用开发已经成为了新的就业机会,因此掌握HTML5是一件非常有意义的事情。

HTML5不止是HTML

尽管HTML标签和属性是HTML5规范的基础,但是HTML5还包括很多其他编程接口,例如地理定位、历史记录。后面会介绍html5的基础知识,以及它是如何从HTML的先前版本演变面来的,同时也会介绍一些与HTML5相关的技术,包括:

使用canvas(画布)元素进行绘制各种图形;

使用video和audio元素播放流媒体;

在线编辑部页面并检查拼写;

在web应用程序中使用拖拽功能;

设计更友好的表单;

使用新元素(例如 article , section , nav)创建语义分区。

同时在后面的章节中也会介绍HTML5之外的一些其它规范,包括:

web开放字体格式( web open font format , WOFF) web字体;

微格式(Microformat)和微数据(Microdata);

Web套接字(WebSocket);

文件 API

Web存储;

离线Web应用程序API;

历史 API(History API);

地理定位(Geolocation)。

使用开放Web标准

HTML5的主要目的是用来开发更优秀,更高效的Web应用,它也是在开放Web标准下开发的API和规范中的一部分。许多人认为HTML5还应该包括更多内容。事实上,一些特性,如历史API,本地存储,以及地理定位都拥有独立规范,它们与HTML5一起成为开发者手中创建Web应用,移动应用的利器。

我们先看一段简单的HTML5代码:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>第一个HTML5页面</title>

</head>

<body>

<h1>第一个HTML5页面</h1>

</body>

</html>

把上面的代码保存成扩展名为.html的文件就可以了。现在,在常用的Web浏览器中打开这个页面(直接双击文件打开),看看它是否能显示出一些文字。

在IOS和Android设备中使用HTML5

许多设计人员并不是很乐意在他们的Web页面中使用HTML5,因为目前IE对HTML5的支持并不理想,面IE又是国内市场占有率极高的浏览器。不过对于运行Android和IOS的移动设备(比如手机和平板电脑)来说,应该怎么办呢?事实上它都都能很好的支持HTML5,国为它们运行的浏览器(IOS下的safari以及Android下的chrome)都基于WebKit,面Webkit对HTML5的支持相当出色。可以说HTML5就是给移动设备准备的。

使用HTML5为Android及IOS设计Web页面及应用于最大的好处在于,它们在未来的设备上能继续使用。目前的平板电脑、手机甚至是电视上使用的操作系统将来还会发展到更多智能产品上,例如汽车,机顶盒,甚至冰箱等家用电器。

编写移动网站

在某种程序上,为移动设备缩写网站比过去更容易了。尽管移动设备的各类繁多,但它们所支持的HTML5特性都变得通用了。在创建移动网站时,首先需要记住的是,移动网站也只是一个网站而以。而好的网站应当适用于于所有浏览器,除此之外,在为移动设备创建网站时,还需要考虑到以下基本问题。

移动设备的屏幕尺寸和分辨率;

移动用户需要的内容;

使用Html, css 及javascript是否有效且简洁;

网站需要通过怎样的测试。

移动设备的屏幕尺寸和分辨率

移动设备的屏幕尺寸虽然比电脑的小很多,但其分辨率已经越来越高。平板电脑不仅拥有越来越大的屏幕尺寸,而且在浏览方式上也有所不同。例如,大部分的平板电脑都能够横向或纵向模式进行浏览。这样的话,同一款设备,屏幕的宽度有时为1024,有时可能为800。这时就要考虑不同的宽度应该对应不同的页面排版,这样才能给用户一个友好的体验。

昵    称:
验证码:

相关文档: