资讯频道 → 移动开发
阅读更多

4顶
0踩

移动开发

原创新闻 如何利用HTML5特性创建优秀的移动Web应用

2012-02-17 18:03 by 正式记者 WebAppTrend 评论(1) 有5217人浏览
html5 Lanyrd app

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

很多开发者目前对HTML5移动Web应用都持观望态度，希望确定其前景一片光明以后再开始尝试使用它。在他们眼中，虽然HTML5拥有改变整个移动应用生态系统的潜力，但目前本地应用才是经过试验的可信渠道。HTML5移动Web应用要想被开发者广泛认可，还需要有一些决定性的成功应用出现。

更重要的是，要想制作出成功的HTML5移动Web应用，最需要的是利用其技术特性进行创新。

基于以上原因，开发者容易无所适从，那么就先来看看Lanyrd是如何利用HTML5的特性进行创新的。

Lanyrd是一个提供会议或活动相关内容的网站，一上线即赢得了大量的关注。目前，Lanyrd正利用HTML5的离线浏览功能创建应用的移动Web版本，让你在网络拥挤的时候也可以查看聚会信息。

利用HTML5的应用缓存技术实现离线浏览

对于Lanyrd来说，HTML5的离线浏览能力是其成功关键。你是否经历过这样的场景，在一个会议中，你完全连不上Wi-Fi信号，参会人员都挤在信号站那里获取手机信号？在这种情形下，使用正式会议应用程序是不可能的。

Lanyrd的离线缓存功能可以在任何支持它的平台和移动浏览器中使用。这意味着现在大多数的设备，比如BlackBerry、Windows Mobile以及依赖Opera Mini作为Web浏览器的机器（比如老版的Symbian机器）都可以使用。


iPad 上的 Mobile Web Lanyrd

负责Lanyrd项目的首席工程师Jake Archibald，在一封写给ReadWriteMobile的Email中谈论了创建这个新的HTML5应用的几个要点。
引用
我们使用HTML5的应用缓存来实现站点离线浏览。即使他们不能联网，用户也可以查看他们参加的会议的所有信息。作为一个经常参加会议的人，离线浏览是非常重要的。每当我在国外使用网络的时候，我几乎都能遇到网络状况一团糟的情况。

离线浏览特性并非是为数据驱动的网站设计的，因此我们成了最先提供离线浏览支持的（数据驱动的）站点之一。我们很乐意来谈谈我们在开发这个应用时使用的一些技术。


利用XHR技术实现快速更新页面

关于如何提高页面浏览速度，Archibald在邮件中写道：
引用
我们所有的图像都是双倍分辨率，因此在高分辨率设备上，一切都十分清晰，要是没有高分辨率设备的话，移动Web应用看起来效果就很差。我们还在服务器和设备间共享了Mustache模板，并且使用了XHR +（HTML5过去的一个API）来更新页面。这让用户感觉很快，因为浏览器不必在每一页都重新解析JavaScript。

尽管我们使用了一些新的很炫的浏览器特性，但我们采用了渐进增强的设计路径，尽可能广泛测试，让其可支持更多设备。尽管大多数的移动产品都是针对某些特殊产品或者WebKit，但我们的产品还能支持一些特殊的产品，比如古董级的Blackberry 9000（现在还是有人使用它的）、Kindle，还有一些只有基本性能的手机，只要它们能运行Opera Mini就行。这个站点在没有JavaScript的情况下表现得和我们预期一样，事实上，我们避免了在设备上解析Javascript的开销，因为即使有JavaScript也没多大帮助。


Lanyrd为使用HTML5的某些特性来创建有优异功能的移动Web应用作出了榜样。在离线缓存方面，它是第二个将离线缓存应用得非常好的应用，第一个是 Kindle Cloud Reader。

原文链接：How Lanyrd Uses HTML5 for a Great Mobile Web App
4
顶
0
踩
评论 共 1 条 请登录后发表评论
1 楼 fjjiaboming 2012-02-19 10:36
期待应用, 让我发挥技术~~

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • Lanyrd是如何应用HTML5创建出优秀的移动Web应用的

    来自于国外科技媒体ReadWriteWeb发布了专栏作家Dan Rowinski的一篇文章，谈论了Lanyrd是如何应用HTML5创建出优秀的移动Web应用的   当谈到HTML5移动web应用发展的时候，很多开发者都在等待确定前景一片光明以后才...

  • 在泰泽上开发HTML5应用， 你也可以学习Lanyrd是如何应用HTML5创建出优秀移动Web应用

    当谈到HTML5移动web应用发展的时候，很多开发者都在等待确定前景一片光明以后才愿意尝试使用它。确实，HTML5移动web应用有改变整个移动应用生态系统的潜力，但至少在现在，本地应用才是经过试验的开发者真正相信的...

  • HTML5与移动Web开发：开发概述，像素区别，HTML5和其他技术

    和以前的版本不同，HTML5并非仅仅用来表示Web内容，它的使命是将Web带入一个成熟的应用平台，在这个平台上视频、音频、图像、动画，以及与电脑的交互都被标准化。 HTML5实际上指的是包括HTML、CSS和JavaScript脚本...

  • 13款用于Web的流行HTML5视频播放器

    在本文中，我们将来了解一下现在市面上可用的HTML5视频播放器（包括开源和商业播放器）。

  • HTML5新特性总结大全

    一.HTML5概念： 1.什么是HTML5： （1）HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准； （2）HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。...（2）为 HTML5 建立的...

  • AngularJS创建应用- HTML5 移动框架

    这里列举5个这样的框架，帮助你使用AngularJS构建Web应用。更多的框架资源，可以参考《分享10个最新的Web前端框架》《推荐给开发者的20个优秀PHP框架》《14个最佳的HTML/CSS设计和开发框架》。   1. AngularUI ...

  • 常用移动web开发框架

    纯粹的总结一下移动web开发框架，移动web开发框架有jQuery Mobile 、Sencha Touch等等,他们都来源于web开发，是成熟的框架，jQuery Mobile出自于jQuery家族，Sencha Touch来自于ExtJS。jQuery Mobile 和Sencha Touch...

  • HTML & Web教程

    Web教程 1.HTML概述 a.网站是什么？ 举个例子： ​ 一个网站由很多网页组成，可以将多个网页放在一个文件夹中，这个文件夹还可以嵌套其它子文件夹，最终形成一个树状结构，如下图所示： ​ 如果我们给顶级目录 ...

  • HTML5已定稿：将彻底颠覆原生应用?

    过去这些年，HTML5颠覆了PC互联网的格局，优化了移动互联网的体验，接下来，HTML5将颠覆原生App世界。这听起来有点危言耸听，但若认真分析HTML5的发展史，你会发现，这个世界的发展趋势确实就是这样。 熟知历史...

  • Web应用开发：介绍

    Web应用开发是一种使用Web技术创建和部署应用程序的过程。Web应用通常是指通过网络浏览器访问的应用程序，它们可以提供各种功能，如在线银行、在线购物、社交媒体平台等。

  • 虚拟研讨会：移动Web应用开发技术最新动态

    为了掌握移动Web应用开发的最新动态，InfoQ邀请一些该领域最流行的库、工具和框架的缔造者，组织了一场虚拟研讨会。参与者及其框架分别是：Michael Mullany，Sencha TouchBrian LeRoux，PhoneGapChristopher Plieger...

  • Web应用开发技术笔记

    Web应用开发技术笔记第一章1.1 WEB技术概述Web的三要素静态网页动态网页（Applet）动态网页动态Web的发展静态网页动态网页的比较1.2 Web应用程序的工作原理C/S结构优缺点对比B/S结构优缺点对比Web应用程序的开发1.3 ...

  • html5 & web应用程序

    -----web应用程序  http://baike.baidu.com/view/138452.htm?fr=aladdin

  • [书籍精读]《移动WEB前端高级开发实践》精读笔记分享

    书籍介绍：《移动WEB前端高级开发实践》这本书的内容涵盖了移动Web前端开发中的各个关键技术环节。分别从HTML5、CSS3、JavaScript的ECMAScript5和ECMAScript6版本、移动端常用布局方案、MV*类新时代框架、预编译技术...

  • Sencha Architect 2：用于构建桌面与移动HTML5应用的所见即所得IDE

    本文来源于我在InfoQ中文站翻译的文章，原文地址是：http://www.infoq.com/cn/news/2012/05/sencha-architect-2近日，...Sencha Architect 2是个可视化的应用构建器，它使用Sencha Touch 2来构建移动应用，使用Ext JS 4

  • HTML5开发笔记（1）开发常见的7个框架

    文章目录HTML5框架介绍1. Siimpler2.lonic3.Foundation4.Enyo5.LimeJS6....Siimpler是一个简单的开发框架，你可以选择自己喜欢的部分，来高效又便利地创建一个HTML5开发结构、web开发者也可以通过这个框架文件和文件

  • HTML5技术的调研以及贴吧应用总结

    贴吧在进行HTML5技术应用的过程中，进行了一系列的技术调研；本文对HTML5的技术调研进行总结，尽可能客观的分析解答对HTML5技术的一些疑问，给出产品、技术上的一些决策建议。 对于文中的内容以及表述，也热切...

  • 面向移动设备的HTML5开发框架

    很久以前整理了篇将手机网站做成手机应用的JS框架。时隔一年多，很多新的技术已经出现，下面再来总结下还有哪些框架是适合面向手机设备的开发的。  1、jQuery Mobile  jQuery Mobile 是 jQuery 在手机上和...

  • 深度解析：移动Web应用未来趋势

    从移动电话的产生，到当前移动互联应用的风生水起，我们步入到任何人都有机会获得大量信息资源的移动互联网时代。尽管移动计算技术已扮演了如此重要的角色，但它仍处于...基于Webkit内核，HTML5/CSS3和移动终端的结...

  • 【四万字总结】对于HTML5的一些总结与实践

    在本节中，我们将总览 HTML5 的新变化，HTML5 文档、HTML5 新特性等。 知识点 HTML5 代码规范 HTML5 的改变 在接下来我们将深入 HTML5 的各个新特性，了解它们的用途，掌握它们的语法，最终达到熟练使用 HTML5 的...

Global site tag (gtag.js) - Google Analytics