名站网址导航名站网址导航小编为爱好网页hTML5的朋友提供关于网页hTML5的相关知识。
- 本篇文章的具体介绍如下
在过去的一年里，您是不是很沮丧，对于所有的使用Objective-C开发建设iPhone程序的开发建设者而言，日子都不那么好过，您是不是为了学习开发建设iPhone应用程序曾经硬着头皮去读着那生涩难懂的学习教程，事实是Objective-C是一门类似C语言的语言，这也就绝定了它不是那么容易学习。
我不是劝您去放弃学习Objective-C，因为世上无难事，只怕有心人。但是条条大路通罗马，也许您转换下思路您可以用另一种实用具体的方法达到相同的目的。
您可以制作一个原生的iPhone应用程序去模仿其他的程序，多半上它也许会成为一个不错的复制品。
但是您完全可以利用已有的技能（网页hTML5教程，CSS，Javascript）去完成上面的事.
下面我会向您们展示如何创见一个具有离线功能的网页hTML5教程 iPhone应用程序。更进一步的话，我会向您们展示编写一个俄罗斯方块游戏的过程。
离线
到底什么是离线？好吧，它其实意味着当咱们的手机没有互联网连接时，能够有一个像本地应用程序样子的程序图标，启动画面。
这意味这咱们的应用程序能够像原生应用程序那样在手机离线时使用。
其实这不仅是一篇针对iPhone开发建设的教程，它同样适用于所有带有网页hTML5教程功能支持浏览器的手机。
OK，下面咱们开始吧。看看下面的图片。没有地址栏，没有导航条，它就像是一个原生的应用程序。
准备工作
如果咱们要想使用网页hTML5教程的离线功能的话，您需要有能够操作服务器端，因为咱们需要更改相关站点文件的hTTP的头信息。（下面咱们会详细讲解）
咱们使用Apache做为服务器，为了完成任务，咱们需要配置.htaccess相关站点文件。这里是个教程使用.htaccess改变hTTP头信息。
其他咱们需要做的就是在iPhone设置中打开Safari浏览器的调试模式。在您的iPhone中进入Settings.app > Safari > Developer，然后打开调试模式，这样做的目的是帮助您寻找可能出现的JavaScript错误。
一旦您完成您的App，您应该关闭调试模式以便于您正确的测试您的应用程序。
关于您的App
图标和启动画面
图标的大小57px x 57px。
无论您使用什么样的图标，iPhone会自动对它进行圆角处理，创见投影，并增加光泽。
图标最好使用PNG或JPG格式。
下面是我使用的俄罗斯方块游戏图标。
启动画面大小最好是320px x 460px，且格式为PNG或JPG。
下面是我使用的启动画面。
一些小提示
谨记，简单就是美（Stay small, sparse and simple.）
- Small：虽然可以使用缓存以保存一部分相关站点文件，但是保持轻量级也是一个明智的行为。
- Sparse：尽可能的减少处理的相关站点文件。
- Simple：不要盲目扩大范围，从小的方面着手，会使您事半功倍。
应用程序缓存
这是一个新的标准，详细信息请看这里。
应用程序缓存允许咱们提前告知浏览器咱们的应用程序使用了那些相关站点文件。浏览器将会把这些相关站点文件缓存下来（有时也会失败）。这个相关站点文件的语法格式很简单，仅仅就是在manifest相关站点文件中列举了相关站点文件的相对（例如 /picture.png)或绝对地址(例如 http ://yourwebserver.com/picture.png)，浏览器会在离线时保留这些相关站点文件。
您也可以列举一些相关站点文件地址代表您不想缓存的，但是这跟咱们的离线应用程序没有什么关系（如果您有兴趣的话，看这个文档）。
还有一件重要的事是manifest（就是您需要缓存的相关站点文件列表）的filetype头信息必须被设置成text/manifest。这就是咱们为什么需要有一个web服务器以使咱们能够设置hTTP头信息。
屏幕尺寸
当设计您的应用程序时，您需要注意：当您出入App模式时，您的屏幕可利用面积是320px x 46px。当您处于网页模式时您的屏幕可利用面积是320px x 356px。这会影响您的程序的用户界面。
下面就是处于两种模式下的不同点
网页hTML
您的App其实就是一个网页，因此跟在浏览器中展示的没什么不同。iPhone的浏览器对网页hTML5教程的支持程度也是排在前列的，如果您想深入了解的话，请移步Safari开发建设者中心：
- Safari 网页hTML Reference
- Safari CSS Reference
开始编写具体代码
应用程序以一些标记开始，下面的就是我的俄罗斯方块游戏的标记。
<!DOCTYPE html> <html manifest=”tetris.manifest”> <head> <metaname=”viewport” content=”user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0″/> <meta name=”apple-mobile-web-app-capable”content=”yes” /> <meta name=”apple-mobile-web-app-status-bar-style”content=”black” /> <link rel=”apple-touch-icon”href=”iphon_tetris_icon.png”/> <link rel=”apple-touch-startup-image”href=”startup.png” /> <link rel=”stylesheet” href=”tetris.css”type=”text/css” media=”screen, mobile” title=”main” charset=”utf-8″><title>offline Tetris</title> </head> <body> <!– Put your Markup here –><script type=”text/javascript” src=”tetris.js”></script> </body> </html>
首先注意Doctype。哦也以后在也不用写那么长的Doctype了。
在网页hTML网页文章标签里manifest=”cache.manifest”属性是告诉浏览器咱们需要缓存那些相关站点文件。
这些是在网页hTML5教程页面中Apple的专属标记，这里是他们的一些简要说明：
- apple-mobile-web-app-capable: 这是又一个地方告诉浏览器，它一个离线应用程序
- apple-mobile-web-app-status-bar-style:当处于离线时隐藏状态栏和导航栏。
- apple-touch-icon:告诉浏览器程序图标的地址。
- apple-touch-startup-image: 告诉浏览器启动画面的地址。
还有一点请注意，最好把CSS相关站点文件放在上面，JavaScript相关站点文件放在下面。
CSS
它跟个普通网页没什么两样，但是您可以利用一些特殊的CSS -webkit特性做一些很炫很酷的事情，像动画等。下面是一个很简单的指导，这已经超出了本文的知识范畴。
简单的CSS具体代码
body { overflow:hidden; background: #d7d7d7; margin:0; padding:0; } #tetris { width: 320px; height: 460px; background:#000; }
主要是设置div网页元素在网页中适配iPhone的视图。
JavaScript
我使用的是Dalton Ridenhour修改版本的JS库，是我在Github上找到的，这个JS库适用与大多数的浏览器。我唯一做的修改就是让它在没有键盘时也可以使用。
一般情况下,JavaScript能在iPhone上很好的工作，但是也有例外。想想一下mouseover这个事件，它是存在与iPhone浏览器上的，但是如果没有一个标准的指示设备，我很好奇它怎么使用。Quirksmode写了一篇很不错的文章讲解了iPhone浏览器上的事件。
如果上面的事情您已经完成了，您就可以测试您的程序了，只要在iPhone上打开index.html，您就能看到一个最基本的程序已经完成了。
下一步就是把您的程序放到服务器上，然后正确的设置好cache.manifest相关站点文件，并放置到您的程序根目录里。好了，看看您的缓存相关站点文件工作了没有。
这是我写的一个完成版，您可以在这里查看
- http://tetris.alexkessinger.net
补充说明：离线数据
其实除了可以保存离线相关站点文件之外，咱们也可以保存离线数据。咱们主要使用两个API：第一个是localStorage。localStorage是一个很易于使用的键/值对应的存储形式，咱们可以使用这个API像这样：
localStorage.dataToStore = 5; console.log(localStorage.dataToStore); // 5
咱们可以利用上面的方式保存用户数据。
第二种方式是离线web SQL数据库(点击链接查看W3C官网的说明）。这个API使用起来有点复杂。下面是一些具体代码片段。
// Try and get a database object var db; try { if (window.openDatabase) { db = openDatabase(“NoteTest”, “1.0″, “网页hTML5教程 Database API example”, 200000); if (!db) alert(“Failed to open the database on disk. This is probably because the version was / bad or there is not enough space left in this domain’s quota”); } else alert(“Couldn’t open the database. Please try with a WebKit nightly with this feature enabled”); } catch(err) { } // Check and see if you need to initalize the DB db.transaction(function(tx) { tx.executeSql(“SELECT COUNT(*) FROM WebkitStickyNotes”, [], function(result) { loadNotes(); }, function(tx, error) { tx.executeSql(“CREATE TABLE WebKitStickyNotes (id REAL UNIQUE, note TEXT, timestamp / REAL, left TEXT, top TEXT, zindex REAL)”, [], function(result) { loadNotes(); }); }); }); // Insert a test Note. var note = { id: “1″, text:” This is a test note”, timestamp: “112123000″, left:10, top:10, zIndex:2 }; db.transaction(function (tx) { tx.executeSql(“INSERT INTO WebKitStickyNotes (id, note, timestamp, left, top, zindex) VALUES / (?, ?, ?, ?, ?, ?)”, [note.id, note.text, note.timestamp, note.left, note.top, note.zIndex]); }); // Get all the notes out of the database.db.transaction(function(tx) { tx.executeSql(“SELECT id, note, timestamp, left, top, zindex / FROM WebKitStickyNotes”, [], function(tx, result) {for (var i = 0; i < result.rows.length; i) { var row = result.rows.item(i); var note = new Note(); note.id = row['id']; note.text = row['note']; note.timestamp = row['timestamp']; note.left = row['left']; note.top = row['top']; note.zIndex = row['zindex']; if (row['id'] > highestId) highestId = row['id']; if (row['zindex'] > highestZ) highestZ = row['zindex']; } if (!result.rows.length) newNote(); }, function(tx, error) { alert(‘Failed to retrieve notes from database – ‘ error.message);return; }); });
总结
通过离线Web App，咱们可以做很多东西。做游戏也是可以的，就像我做的俄罗斯方块，但是您最好想清楚哪些东西适合做成离线应用。像Quake 3竞技场估计做不出来，做一个待办事项的App肯定是绰绰有余。
关于网页hTML5的相关知识就说到这里希望可以帮助朋友们。,网页hTML5教程制作基于模拟现实物理具体效果的游戏具体代码
网页hTML5教程技术为现今Web应用程序在浏览器中提供了非常广阔的发挥空间，其强大的功能让咱们在浏览器上开发建设游戏和玩游戏不再是难事。利用Canvas和强大的JavaScript引擎，咱们可以轻松地完成休闲游戏的开发建设。玩家只需打开浏览器，不用安装插件便可以享受到游戏带来的乐趣。
