[读写网] 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

相关文章

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》:本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv

使用Python和Tkinter实现html标签去除工具

《使用Python和Tkinter实现html标签去除工具》本文介绍用Python和Tkinter开发的HTML标签去除工具,支持去除HTML标签、转义实体并输出纯文本,提供图形界面操作及复制功能,需... 目录html 标签去除工具功能介绍创作过程1. 技术选型2. 核心实现逻辑3. 用户体验增强如何运行

CSS 样式表的四种应用方式及css注释的应用小结

《CSS样式表的四种应用方式及css注释的应用小结》:本文主要介绍了CSS样式表的四种应用方式及css注释的应用小结,本文通过实例代码给大家介绍的非常详细,详细内容请阅读本文,希望能对你有所帮助... 一、外部 css(推荐方式)定义:将 CSS 代码保存为独立的 .css 文件,通过 <link> 标签

使用Vue-ECharts实现数据可视化图表功能

《使用Vue-ECharts实现数据可视化图表功能》在前端开发中,经常会遇到需要展示数据可视化的需求,比如柱状图、折线图、饼图等,这类需求不仅要求我们准确地将数据呈现出来,还需要兼顾美观与交互体验,所... 目录前言为什么选择 vue-ECharts?1. 基于 ECharts,功能强大2. 更符合 Vue

Vue中插槽slot的使用示例详解

《Vue中插槽slot的使用示例详解》:本文主要介绍Vue中插槽slot的使用示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、插槽是什么二、插槽分类2.1 匿名插槽2.2 具名插槽2.3 作用域插槽三、插槽的基本使用3.1 匿名插槽

springboot+vue项目怎么解决跨域问题详解

《springboot+vue项目怎么解决跨域问题详解》:本文主要介绍springboot+vue项目怎么解决跨域问题的相关资料,包括前端代理、后端全局配置CORS、注解配置和Nginx反向代理,... 目录1. 前端代理(开发环境推荐)2. 后端全局配置 CORS(生产环境推荐)3. 后端注解配置(按接口

Vue 2 项目中配置 Tailwind CSS 和 Font Awesome 的最佳实践举例

《Vue2项目中配置TailwindCSS和FontAwesome的最佳实践举例》:本文主要介绍Vue2项目中配置TailwindCSS和FontAwesome的最... 目录vue 2 项目中配置 Tailwind css 和 Font Awesome 的最佳实践一、Tailwind CSS 配置1. 安

CSS3 布局样式及其应用举例

《CSS3布局样式及其应用举例》CSS3的布局特性为前端开发者提供了无限可能,无论是Flexbox的一维布局还是Grid的二维布局,它们都能够帮助开发者以更清晰、简洁的方式实现复杂的网页布局,本文给... 目录深入探讨 css3 布局样式及其应用引言一、CSS布局的历史与发展1.1 早期布局的局限性1.2

使用animation.css库快速实现CSS3旋转动画效果

《使用animation.css库快速实现CSS3旋转动画效果》随着Web技术的不断发展,动画效果已经成为了网页设计中不可或缺的一部分,本文将深入探讨animation.css的工作原理,如何使用以及... 目录1. css3动画技术简介2. animation.css库介绍2.1 animation.cs

CSS引入方式和选择符的讲解和运用小结

《CSS引入方式和选择符的讲解和运用小结》CSS即层叠样式表,是一种用于描述网页文档(如HTML或XML)外观和格式的样式表语言,它主要用于将网页内容的呈现(外观)和结构(内容)分离,从而实现... 目录一、前言二、css 是什么三、CSS 引入方式1、行内样式2、内部样式表3、链入外部样式表四、CSS 选