- 浏览: 308573 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
开发小菜:
支持IE9以下的吗?
HTML5+CSS3+JQuery打造自定义视频播放器 -
攻城使:
开发Html5必须得下载么,我用dw编写,把文件复制到myec ...
html5开发 myeclipse安装aptana插件 -
疾风鹰狼:
...
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码 -
sardodo:
你好,我想问下,导入例子中的.dae格式模型是可以看到旋转的小 ...
c3dl 初步认识 -
BIOHAZARDX:
下载学习,初学者膜拜一下。
html5 实现动画(三)
你一整年都像现在一样沮丧,这我知道。所有铁杆Objective-C的开发人员都曾有过为iPhone编写应用程序的日子。你甚至企图通过阅读一两篇关于 iPhone开发的教程,但C语言或它的其他形式真的非常难学。
我不想告诉你放弃该项目:你最终能得到它。但与此同时,你还可以做别的东西。
你可以创建一个本地应用程序来连接其他应用程序,很大程度上,这将是一个完美的模仿。
你可以用一些可能已经拥有的技能:HTML5,CSS及JavaScript。
我会教你如何利用HTML5创建一个离线的iPhone应用程序。更具体地说,我将带你浏览建设俄罗斯方块游戏的全过程。
本文作者:Alex Kessinger
翻 译:RIA一起学
我的 QQ:908315256
我的邮箱:mayaboy0219@126.com
离线?
我说过“离线”吗?那么,这意味着我们要有自定义icon图标、自定义启动画面、与系统一致的外观,即使手机没有连接到互联网,你也可以使用该应用程序。
该应用程序的功能是:它就像普通的本地移动应用程序那样可以脱机使用。
这是一个专门为iPhone编写的教程,但这些技术适用于所有那些带有支持HTML5的浏览器的手机。
是的,我的意思很明确。看看下面的图片,没有地址栏,没有底部导航看起来就和本地移动应用程序一样。
Prework
你需要访问服务器,在这里你可以更改文件的HTTP 标头。因为我们必须考虑HTML5的脱机缓存优势。
阿帕奇服务器真的很不错,你只需将代码添加到“.htaccess”文件,他就能工作。这里是一篇关于使用htaccess修改HTTP标头的文章。
你要做的另一件事是在iPhone单元里启用Safari浏览器的调试栏。在你的iPhone理依次访问设置 > Safari > 开发,拖动调试控制按钮。这将帮助你发现潜在的JavaScript错误。
一旦建立好应用程序,当你测试完基于HTML5的iPhone应用程序并获得充分的经验后,你应该关闭这个功能。
关于应用程序
图标和启动画面
图标必须为57px × 57px。
iPhone会为你的图标添加圆角,创建阴影,并添加光泽。
图标必须是PNG或JPG格式。
一下是我的俄罗斯方块游戏应用程序的图标。
启动画面必须是320px × 460px,也必须是PNG或JPG格式。
以下是我的应用程序的启动画面。
开始前还要知道的小技巧
无非是小巧、疏松和简单
* 小巧:这是移动应用程序开发。因此,即使拥有缓存,让文件更小巧也依然是一个明智。
* 疏松:你应该尽可能让文件数量保持在较低的范围。
* 简单:始于几个简单的想法并将之付诸实施。通过将文件保持在较小范围内,使你能更快地完成工作。
应用程序缓存
这是一个新的标准,你可以在这里阅读规范。
应用程序缓存允许浏览器事先确定需要工作的网页的所有文件。
这将缓存这些文件(有时会有点小故障)。该文件的语法很简单:只要列出文件的绝对地址(例如:http://yourwebserver.com /picture.png)或相对地址(例如:/picture.png),浏览器就可以让这些文件保持脱机。
你可以列出不需要被缓存几个网址,但对于我们的离线应用程序来说没什么关系(如果你有兴趣,可以阅读这篇文章)。
这个工作比较棘手的部分是清单(需要被离线缓存的列表文件)要把通过的文件类型的表头设为text/manifest。这就是为什么你需要访问可以设置 HTTP头的Web服务器。
屏幕尺寸
设计应用程序的快速说明:当你在应用程序模式下,你会有一个320px × 460px大小的屏幕空间。而当你在网页模式下,仅有一个320px × 356px大小的屏幕空间。这可能会影响你的HTML5离线应用的用户界面。
下图你可以看到两者的差异。
HTML
这是真正的浏览器,所以HTML的显示同电脑里是完全相同的。iPhone浏览器在支持HTML5方面也走在前列,因此要认真研究规范。
为了更深入细节,这里提供了Safari浏览器开发文档:
* Safari浏览器HTML参考
* Safari浏览器CSS参考
让我们来编代码吧
应用程序通过你定义的标记启动。这里的标记是我的俄罗斯方块应用程序。
<!DOCTYPE html>
<html manifest="tetris.manifest">
<head>
<meta name="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。HTML5是不是很棒?
<html>标签里的manifest="cache.manifest"属性是告诉浏览器怎样获取我们要缓存的脱机网页。
这里是关于苹果专有的HTML5标记的一个简短说明:
* apple-mobile-web-app-capable:这是另一个告知想要离线的应用程序的途径。
* apple-mobile-web-app-status-bar-style:当应用程序处于脱机状态时隐藏状态栏和导航栏。
* apple-touch-icon:用于指明作为图标的图片。
* apple-touch-startup-image: 一个指向启动图片的URL。
另外请注意,你应该把CSS放在顶部,把JavaScript放在底部(最佳做法在这里仍然适用)。
CSS
几乎与一个正常的网页相同。有一些特定的CSS规则网络工具包,你可以使用它们做一些非常酷的事情,比如动画。但这是速成指南,这些内容不在讨论范围内。
CSS很平常
body {
overflow:hidden;
background: #d7d7d7;
margin:0;
padding:0;
}
#tetris {
width: 320px;
height: 460px;
background:#000;
}
样式之应用于网页的div元素,以确保其在iPhone屏幕上的大小合适。
JavaScript我用了Dalton Ridenhour的 JavaScript改进版本;我是在Github找到的。这个JS最初是为普通浏览器写的。我不得不为了支持触摸屏而做出修改。
一般情况下,JS在iPhone中的工作不过是优化,但也有例外。想想看一个类似于鼠标悬停的事物,这个事件存在于iPhone中,但当你没有标准的指针设备(如鼠标)时,我不知道是否能有所帮助。Quirksmode发布的一篇关于iPhone事件的文章真的很有帮助。
准备妥当后,你就可以测试了,但我想在iPhone中打开index.html时,你应该能够看到所有的工作。
然后,下一步是从可以正确设置cache.manifest的真正的网络服务器上将其转移到服务器。
然后,你就可以将其添加到主屏幕并以离线模式查看。
你可以看看我做完的版本:
* http://tetris.alexkessinger.net
离线数据
为增强保持脱机文件的能力,你可以将用户数据存储在脱机文件数据库中。有两个主要的API用于每个用户数据或每页数据。首先是localStorage. localStorage,这是一个绝对简单易用的键值存储API。
localStorage.dataToStore = 5;
console.log(localStorage.dataToStore); // 5
你可以利用它存储用户得分,例如。
第二个实际上是个脱机SQL引擎,一个网络数据库。该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;
});
});
发表评论
-
iframe 高度自适应
2011-11-03 17:07 1364转自:http://apps.hi.baidu.com/sha ... -
WordPress 博客添加新浪微博挂件:
2011-06-22 14:07 14721.点击链接http://t.sina ... -
HTML5 影音 ( Video ) 概論
2011-05-25 16:25 10541 Video介紹 引用我翻譯文檔《在HTML5頁面 ... -
HTML5 Audio Loops
2011-05-19 16:49 1286One of the neatest things abo ... -
处理火狐自动播放视频
2011-05-18 17:54 1445版权声明:转载时请 ... -
很给力,20个HTML5视频播放器及代码
2011-05-09 14:45 1972本文来源: http://www.uleadesi ... -
HTML 5 Video概述
2011-05-09 13:32 1016本文来自:http://www.xlnv.ne ... -
支持移动平台的Html5播放器
2011-05-09 13:25 2905本文转自:http://www.riameeting ... -
HTML5 API简介一(Canvas,Audio/Video,Geolocation)
2011-05-09 13:22 1560本文来自:http://www.myext.cn/web ... -
HTML5资源
2011-05-09 11:56 1217JS APIs: 选择器 W3C草案:Selecto ... -
HTML5 Audio/Video 标签,属性,方法,事件
2011-05-09 11:53 1421本文转自:http://directguo.com/blo ... -
DIV实现隐藏与显示
2011-05-06 15:23 752css中display属性的参考值: display:n ... -
HTML5+CSS3+JQuery打造自定义视频播放器
2011-05-06 12:57 6727简介HTML5的<video> ... -
HTML 5 <video> preload 属性
2011-05-06 12:54 1144设置为预加载的 video 元素: <vide ... -
HTML5 – Video
2011-05-06 12:51 1046在HTML5以前若我們要在網頁中播放影片時,需要使用Act ... -
超過 23 個開源的 HTML5 影音播放器與框架
2011-05-06 12:03 7524超過 23 個開源的 HTML5 影音播放器與框架 - ... -
Building a better HTML5 video player with Glow
2011-05-06 11:51 1074Last year I wrote a post (Bu ... -
Ambilight для тэга video
2011-05-06 11:49 775В некоторых топовых моделях т ... -
怎样用js+html5实现视频的播放控制
2011-05-06 11:46 1407html5 代码: <video width ... -
22个HTML5的初级技巧
2011-05-06 11:45 727Web技术的发展速度太快了,如果你不与时俱进,就会被淘汰。 ...
相关推荐
可以用html + js 开发iphone应用程序
本PPT讲述的是Android应用开发新路线:利用HTML5开发Android应用程序! 姓 名:杨丰盛 英文名字:yarin 网 名:半灌水 门 派:移动互联网 ^_^ 现任公司:云晖软件(成都)有限公司 开发经验:J2me、Brew、...
本文主要介绍如何使用Eclipse集成开发环境(IDE),通过Aptana的iPhone Development插件和iUi框架来开发适用于iPhone的Web应用程序。以下是对这些知识点的详细解释: 1. **Eclipse和Aptana插件**:Eclipse是一款...
- 生成的项目结构如图2所示,包含了简单的iPhone应用程序模板。 2. **使用iPhone Preview模式**: - 在文本编辑器下方可以看到`Source`、`iPhone Preview`等选项卡,以及系统中已安装的浏览器选项卡(如Safari、...
而目前,我个人觉得使用开源的游戏框架cocos2d来开发iphone上面的游戏是首选。为什么呢?其一,它是免费的,其二,它有强大的社区支持,而且网上还有许许多的优秀的辅助资源,包括教程、类库、工具程序、物理引擎、...
HTML5是一种先进的网页标准,它极大地扩展了网页应用程序的功能,使其能够像本地应用程序一样运行,无需安装即可在各种设备上使用。"用HTML5开发移动应用.pdf"这本书可能详细介绍了如何利用HTML5来构建功能丰富的...
5. 平台知识:例如,开发iPhone应用需要了解Xcode的使用、编译流程以及获取开发证书等;而Android应用开发则需熟悉Eclipse等开发环境的搭建。 此外,jQuery Mobile 是一个强大的移动设备友好的前端框架,虽然不是...
### 使用JavaScript开发移动应用程序 #### 一、引言 随着移动互联网的发展,移动应用程序变得越来越重要,成为企业和个人展示自己产品和服务的重要渠道。对于初学者而言,了解如何使用JavaScript进行移动应用开发...
跨平台开发是指开发能够在多个操作系统上运行的应用程序。解决方案包括使用通用的编程语言(如C#)和框架(如Xamarin、Flutter、React Native)来构建应用,使得一次编写代码,可以部署到多个平台上。 移动办公应用...
构建基于浏览器的应用程序,尤其是针对iPhone和Android这样的移动操作系统,已经逐渐成为一种趋势。开发者们可以利用HTML、CSS以及JavaScript等Web技术开发应用程序,并确保它们能在各种设备上运行,包括手机和平板...
总结来说,【iPhone客户机应用开发教程】教导开发者如何使用Ruby on Rails和Eclipse结合iUI库,创建出既美观又功能丰富的iPhone应用。教程涵盖了从布局优化、屏幕适配到交互设计的多个方面,旨在帮助开发者构建出...
对于开发者而言,掌握iOS开发技能不仅能帮助他们构建出高质量的应用程序,还能为个人职业发展开辟新的道路。 #### 入门iOS开发的步骤 1. **了解基础知识**: - 掌握一门编程语言:推荐Swift语言,它是苹果官方...
标题中的“构建iPhone企业级应用-基于HTML,CSS和JavaScript”揭示了本主题的核心内容,即使用Web技术(HTML、CSS和JavaScript)来开发适用于iPhone的企业级应用程序。这种开发方式通常被称为混合应用开发,它结合了...
4. **iOS平台特有的开发技巧**:了解iOS平台上特定的用户界面元素和交互设计原则,如使用Safari特有的Web应用程序模式,利用Apple Touch图标、启动画面等。 5. **性能优化**:由于移动设备的硬件资源相对有限,优化...
等等这些情况综合在一起能够看出DragonFireSDK可以满足iPhone开发者的要求,使其可以专注软件创意的设计,而不是编码的枯燥,因为相信你已经有足够的C/C++编程经验了。 下载后请看Readme指示 SDK 帮助 ...
### Android教程之用HTML5构建Web应用程序(二) #### 移动浏览器特性的检测与利用 在本章节中,我们将深入探讨如何利用HTML5的新特性为Android和其他移动平台开发Web应用,并通过具体实例来理解如何根据不同的移动...