[读写网] 2011 HTML5的六大趋势

2024-01-07 13:32

本文主要是介绍[读写网] 2011 HTML5的六大趋势,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

导读:HTML5无疑是2011年度最耀眼的技术明星,它的威力使一些论者认为Flash、Silverlight和Win32这三大曾经的主流开发平台都进入了垂死期,它也将主导Web与原生应用(Native App)的未来走向,甚至对各移动操作系统和Apple、Google、Facebook、Amazon等几大平台公司的此消彼长也会产生深远影响。

ReadWriteWeb的年度回顾系列文章当然也少不了HTML5的身影,Dan Rowinski撰文比较全面地总结了HTML5的六大趋势,也是目前Web开发不错的趋势总结。CSDN编译如下(文中链接多指向ReadWriteWeb网站的英文文章): 

TopTrends2011.png

 

HTML5正在彻底改变技术人员开发Web应用的方式。无论是在桌面还是移动,这个未来的语言和标准都已经不再遥远。移动领域最热门的争议——“Web应用还是原生应用?”将随着HTML5的发展变得无关紧要。 

2011年,HTML5都发生了哪些事情?我们一起来看看。

1. 移动优先

ReadWriteWeb已经将“2012最具潜力公司”称号授予了appMobi,一家HTML5创业公司,重点放在移动优先开发。事实上,随着手机和平板设备的爆炸性增长,移动优先已经成为开发社区的大趋势。

今年,我们看到了许多大公司开始移动优先的项目。《金融时报》将其iPad应用从Apple的App Store中撤下,只开发Web应用,结果取得了不错的效果。不少游戏开发者也开始转向移动Web开发。

新的一年,首先开发移动Web的趋势将会持续。其实,用户并不关心应用是用什么技术写的,只要好用就行。Web应用和原生应用的界线将变得模糊。

CSDN译注:Mobile First(移动优先)的口号最初是由Yahoo前首席设计架构师Luke Wroblewski提出的,已经获得了业界的广泛反响。他提倡产品研发团队首先针对移动设备设计,这不仅是因为移动设备现在数量庞大而且在飞速增长,而且因为移动设备的限制能迫使我们改变旧习惯,先做减法,更关注产品最本质、最重要的方面,同时更多地注意性能和使用场景,反而最后会得到更出色的用户体验。当然,移动设备中丰富的传感器、摄像头等等硬件,也为产品提供了更广阔的空间。

2.游戏开发者率先转向HTML5

游戏开发者转而开发Web版本的动力是显而易见的:他们是使iOS设备更具吸引力的主要因素,可是无论销售收入还是应用内付费收入,却都要给Apple分成30%。HTML5对Facebook这样的游戏平台更是至关重要。想想看吧,如果不借助HTML5和Spartan计划,Facebook怎么能在移动平台上在Apple抽成之后继续成为平台与游戏商分成?

然而,HTML5游戏开发是非常困难的。领先的HTML5游戏开发商Moblyng CEO Stewart Putney 8月时就对ReadWriteWeb说过,你知道用HTML5开发德州扑克有多难吗?

当然,通过PhoneGap和appMobi的XDK等方式将Web开发出来的代码包装为原生应用也是一个方向,Facebook的iOS应用就是这样做的。

3. 响应式设计

多种屏幕大小是移动开发的一个难点。为此,Ethan Marcotte在A List Apart上发表了Responsive Web Design一文,第一次提出了响应式设计的理念,即让内容能自动适应任何屏幕大小。

波士顿环球的网站BostonGlobe.com是响应式设计的一个绝佳范例。从网站开发者Filament的采访中可以知道,要做到这一点并非易事,一些基本概念必须从最开始就要考虑到,而如何处理来自第三方的图片和广告,也是头痛的问题。

4. 设备访问

Web应用和原生应用最大的区别之一,就是浏览器内运行的代码传统上无法访问某些硬件设备和底层特性,比如照相机、传感器、日历、联系人等。而HTML5将有望解决这一问题。

5. 离线缓存

在离线的情况下无法使用,也是Web应用的致命局限。而HTML5中的离线缓存将大大改善这一情况。2011年最大规模的离线缓存部署,是Amazon的Kindle云阅读器,能够通过各种浏览器实现本地同步。一旦这一技术成熟并得到广泛运用,原生应用的来日也就不多了——Web应用平滑部署、跨平台的天然优势太大。

Mozilla的Fennec移动浏览器项目中的离线缓存也值得关注。

6.开发工具的成熟

8月时,畅销移动Web图书作者Brian Fling曾经写了一篇非常有价值的文章Anatomy of a HTML5 Mobile App(其中的HTML5移动应用解剖图非常棒,如下),文章最后指出了实际从事HTML5项目时要考虑到的点:

  • 时间因素,HTML5项目可能耗时更多
  • 预算因素,这可不是简单的网站,成本不低
  • 公司里是否有足够的人才?
  • 基本上没什么工具,很多时候都要自己搞定
  • 考虑所有选择,移动世界里没有绝对的对错,勿自设框框,专注客户的需求

其中的工具问题,随着appMobi、Sencha、Appcelerator等厂商(应该还有Adobe、微软?)的加入有所缓解,但与原生应用开发环境相比还远远不够。相信2012年将有更大发展。

HTML5移动应用架构图

HTML5移动应用架构图(点击看大图)

总结

HTML5的其他功能包括表单和许多新标准还将快速演进。随着标准化工作的进行,HTML5可能最后还是会变回为HTML。HTML5的领导厂商包括Sencha, Adobe, Appcelerator, appMobi以及Facebook, Amazon和Google等巨头。

对于开发者来说,无论你是开发Brightcove那样的新型视频渲染,还是SoundCloud那样酷的HTML5音频实现,这都是一个令人兴奋的时代。从桌面到移动Web,HTML5正在使Web真正的杀手级应用——浏览器成为创新的中心。

这篇关于[读写网] 2011 HTML5的六大趋势的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/580079

相关文章

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element

详解如何在React中执行条件渲染

《详解如何在React中执行条件渲染》在现代Web开发中,React作为一种流行的JavaScript库,为开发者提供了一种高效构建用户界面的方式,条件渲染是React中的一个关键概念,本文将深入探讨... 目录引言什么是条件渲染?基础示例使用逻辑与运算符(&&)使用条件语句列表中的条件渲染总结引言在现代

详解Vue如何使用xlsx库导出Excel文件

《详解Vue如何使用xlsx库导出Excel文件》第三方库xlsx提供了强大的功能来处理Excel文件,它可以简化导出Excel文件这个过程,本文将为大家详细介绍一下它的具体使用,需要的小伙伴可以了解... 目录1. 安装依赖2. 创建vue组件3. 解释代码在Vue.js项目中导出Excel文件,使用第三

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式,广泛用于数据处理和分析,而HTM则是一种用于创建网页的标记语言。虽然两

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器(/deep/)来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式(对象添加:情景一)2.动态添加一个class样式(字符串添加:情

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用

使用Vue.js报错:ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错:ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.

vue如何监听对象或者数组某个属性的变化详解

《vue如何监听对象或者数组某个属性的变化详解》这篇文章主要给大家介绍了关于vue如何监听对象或者数组某个属性的变化,在Vue.js中可以通过watch监听属性变化并动态修改其他属性的值,watch通... 目录前言用watch监听深度监听使用计算属性watch和计算属性的区别在vue 3中使用watchE

python解析HTML并提取span标签中的文本

《python解析HTML并提取span标签中的文本》在网页开发和数据抓取过程中,我们经常需要从HTML页面中提取信息,尤其是span元素中的文本,span标签是一个行内元素,通常用于包装一小段文本或... 目录一、安装相关依赖二、html 页面结构三、使用 BeautifulSoup javascript