• 1. 系统介绍系统优势应用及前景分析12 3
  • 2. 系统介绍系统功能 HTML5是最新的HTML 版本,它的目标是取代和超越所有其他已有的web语言,成为 HTML、XHTML 以及 HTML DOM 的新标准。 HTML5=HTML4+DOM+API 。 HTML5宣称它将使得 web apps 能够像 native apps 一样:具备丰富的功能和良好的交互性,以弥补HTML4在交互、媒体和本地操作等方面的不足,支持当前多样的、复杂的Web内容。
  • 3. HTML5 的一些规则: 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。 减少对外部插件的需求(比如 Flash) 更优秀的错误处理 更多取代脚本的标记 HTML5 应该独立于设备 开发进程应对公众透明 1.1.2 HTML5 概况 手机上要装一个指南针?不需要下载某个应用,浏览器网页就能直接实现。想玩大型客户端手游?不需要去APP Store,浏览器网页也可以实现……这就是下一代web网络语言新标准HTML5实现后带来的效果。
  • 4. 确切描述了其旨在要包含的内容的标签,且内容标签互相独立,级别不同,搜索引擎以及统计软件等均可快速识别各部分内容; 嵌入音频、视频和绘制图形的功能,添加图形和音视频不再需要插件; 基于SQL的数据库API,允许客户端的本地存储; 增强的网络通信,利用套接字直接通信; 极大改善了的常用存储; 运行后台进程的Web Worker; 更好的存储数据检索方式; 加快了的页面保存和加载速度; 对使用CSS3来管理GUI的支持,意味着HTML5可以是面向内容的; 改进了的浏览器表单处理; Geolocation API规范,其通过使用智能手机定位功能来纳入移动云服务和应用; 增强型的表单,降低了下载JavaScript代码的必要性,允许在移动设备和云服务之间进行更多高效的通信。 1.2.1 HTML5 新特性 新特性:
  • 5. 格式IEFirefoxOperaChromeSafariOggNo3.5+10.5+5.0+NoMPEG 49.0+NoNo5.0+3.0+WebMNo4.0+10.6+6.0+No 目前Web上大多数视频是通过插件(比如 Flash)来显示的,而HTML5 规定了一种通过
  • 6. 目前大多数音频是通过插件(比如 Flash)来播放的,HTML5 规定了一种通过 audio 元素来包含音频的标准方法,audio 元素能够播放声音文件或者音频流。 IE 9Firefox 3.5Opera 10.5Chrome 3.0Safari 3.0Ogg Vorbis √√√ MP3√  √√Wav √√ √所支持音频格式及浏览器支持情况: 1.2.2 重要标记(2)——
  • 7. HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。通过 JavaScript 来绘制 canvas 元素本身没有绘图能力,所有的绘制工作必须在 JavaScript 内部完成,JavaScript 使用 id 来寻找 canvas 元素。 1.2.2 重要标记(3)——
  • 8. 标签描述
    定义 article。
  • 9. 1.2.3 HTML5 Web应用开发工具HTML5和增强的Javascript1.5是脚本化的,使用“记事本”就能开发HTML5 Web应用,但是很不方便 集成开发环境(IDE)需要实现:设计状态的页面布局;文本编辑;在内嵌的浏览器中预览;动态调试 目前主流的IDE均不同程度的支持HTML5,以下几个IDE使用者最多 HTML5编辑器:Adobe Dreamweaver CS 5.5 简体中文版 HTML5动画制作工具:Adobe Edge 预览版2 Java集成开发环境: MyEclipse 跨平台开发工具:PhoneGAP XDK Java集成开发环境:IntelliJ IDEA 9.0.3 Adobe公司在放弃Flash后,推出Edge等开发工具支持HTML5
  • 10. 跨平台。HTML5的主要优势在于跨平台运行特点。适合多平台,从PC浏览器到手机、平板电脑,甚至是智能电视,只要设备浏览器支持HTML5,HTML5应用在此平台就具有可行性,可降低开发成本。 发布自由。web是一个完全开放的媒体,允许各种资源自由发布。而著名的App stores则更像是一个“有限制的”环境,没有充分体现web的自由性。 性能更优。HTML5技术在多媒体支持、流量和速度上有着巨大的优势。特别是大型游戏和一些复杂应用,通过代码结构来实现,而不用重复下载大量图片,可以节省大量流量。 适合云计算。HTML5实现后,厂商就可以基于浏览器让应用程序回归到网页,而用户只需通过手机浏览器就可以获得想要的服务,占用更少资源,计算将在web和云中完成,进入“瘦客户端”时代,符合当前“云计算”的诉求。 1.3.1 优劣势分析 优势:
  • 11. 1.3.2 优劣势分析 劣势: 目前HTML5技术还不够成熟,尚没有统一标准,这导致: 性能还存在不确定性; 依然无法确保其能够顺利适应各种硬件标准; 浏览器兼容性尚不统一。 很多原生应用能实现的效果还实现不了; HTML5的声音制作存在很大问题,目前几乎根本无法实现声音分层和声音交互。
  • 12. 1.3.3 优劣势分析 HTML5 VS Flash:二者在底部图层中采用原生OpenGL抓取内容,在速度上不相上下;目前HTML5依靠WebGL所实现的3D图形效果还不能和Flash的Stage 3D API相媲美;HTML5不需插件,更稳定更安全;HTML5在跨平台性方面的优势是Flash所不及的。 移动设备:Flash如果耗电问题没有解决,HTML5与H.264硬件将会是未来较好的在线播放格式。 PC:目前主流浏览器对HTML5的兼容性尚不统一,其普及性还无法和Flash相比。 在HTML5之前,Adobe公司凭借Flex开发工具+Flash浏览器插件的模式,2006年开始,建立了Web交互的事实标准和页面游戏的产业链。 2011年,Flash页面游戏在中国超过1亿用户,市场规模超过50亿元。 然而,苹果公司在iPhone和iPad上却选择了HTML5, Adobe不得已在移动平台上放弃了Flash,转向HTML5。 页面游戏的Flash产业链即将土崩瓦解,逐步转向HTML5,对打算进入该行业的企业来说,是一个绝佳的时机。
  • 13. 2.1.1 浏览器支持情况 浏览器支持情况: 作为HTML5以及网页应用的实现平台以及最大最稳定的互联网入口,浏览器将担负技术变革重要责任。 PC方面,目前包括Opera、谷歌Chrome、Safari、火狐、微软IE在内的全球五大浏览器的最新版本都对HTML5进行了支持,其中火狐支持最好; 手机方面,目前包括国外的Opera(欧朋)和火狐、国内的UC、QQ、海豚浏览器也分别推出支持HTML5技术的浏览器,其中欧朋对HTML5的支持最好。
  • 14. 2.1.2 主流浏览器对HTML5支持市场主流的浏览器对HTML5各项功能支持相差较多,具体如下所示:
  • 15. 2.2 主流浏览器采用的内核目前浏览器的内核引擎,基本上是四分天下: 内核主要浏览器优点缺点TridentIE浏览器、360安全浏览器、遨游、彩虹浏览器、腾讯IT等等;占有大量的市场份额,所以这种内核比较流行;非开源,版本更新慢,Trident内核的大量Bug等安全问题没有得到解决。GeckoFirefox和Flock 所采用的内核; 开源,功能强大、丰富,可以支持很多复杂网页效果和浏览器扩展接口。但是要消耗很多的资源,比如内存;源码的可维护性较差。 WebKitSafari,Andoroid系统内置的浏览器,Google Chrome,阿里云浏览器等。开源,功能强大,性能稳定,网页浏览速度较快,高于其他开源内核,源码结构清晰,易于维护。对于网页代码的容错性不高,也就是说对网页代码的兼容性较低,会使一些编写不标准的网页无法正确显示。PrestoOpera的内核,公认的浏览网页速度最快的内核,在处理JS脚本等脚本语言时,会比其他的内核快3倍左右。非开源,为了达到很快的速度而丢掉了一部分网页兼容性。 但由于市场选择问题,主要应用在手机平台--Opera mini。综上:WebKit内核优势明显,目前最新版本对HTML5支持也较好。
  • 16. 2.3 WebKit内核渲染流程基于WebKit内核的浏览器,直接与互联网网站通信,支持HTML5格式文档解析以及JavaScript脚本执行,从而让用户能访问Web网站内容。WebKit内核渲染流程如下所示:
  • 17. 2.4 WebKit内核应用平台Webkit在应用于Mac OS上的Safari之后,很快被广泛地移植到其他系统平台: iOS:   iPhone上市后,WebKit进入iPhone OS平台,而且立即成为iPhone OS平台独一无二的排版引擎。 Android:   Google 开发的手机操作系统Android中内置的浏览器是采用的WebKit引擎,从Android2.3版本到4.0版本均采用WebKit引擎。 Nokia S60:   诺基亚公司将WebKit移植到Symbian S60操作系统中,并开发了基于Webkit的手机浏览器“Web browser for S60”,广泛用于诺基亚、三星、LG等基于Symbian S60操作系统的手机中。 Linux:   尽管WebKit的原型K内核是由Qt写成,但Linux下目前最受瞩目的WebKit项目却是Gnome领导的WebKit/Gtk+。Midori,Google Chrome,KDE的Konqueror,Arora是现在Linux系统下主要的Webkit内核浏览器。 Windows:   Webkit内核在Windows上发展最晚,Safari(for Windows),Google chrome,具有双核模式的傲游3和搜狗浏览器2(高速模式下使用Webkit核心)是最为常见的Webkit浏览器。
  • 18. 目前市场上的大多设备所采用的浏览器都是基于WebKit内核,同时Webkit内核本身也是对HTML5支持最好的, 但是各浏览器对于Web标准的支持却不尽相同。主要是因为WebKit提供了一个处理DOM和CSS的渲染引擎,但是各浏览器在此基础上对缓存、屏幕绘图、定位服务、内存管理和标签、手势等功能的执行能力却各有各的特点。 此外,WebKit自身也在快速地发展,比如说苹果iOS 4.3中使用的Safari浏览器基于WebKit 533.17.9,而Mac OS X平台最新的Safari 5.0.4使用的WebKit为533.20.27,Android 3.0内置浏览器采用的是WebKit 534.13。版本的更新也加速了对HTML5各项功能的支持。 最新的WebKit内核版本已经更新到R114971(数据来源:官方网站),增加了HTML5解析器,开始逐渐支持HTML5的各项新功能。 2.5 WebKit版本对HTML5的支持
  • 19. 3.1 HTML5商业模式(1) 分发渠道: HTML5 apps的分发渠道和native apps不同。各大平台的供应商(基本上就是指iOS和Android)通过app stores和app markets控制native apps的分发;而HTML5应用区别于手机原生应用的重要地方在于其没有统一的应用商店,一切网络应用都可以在浏览器网页实现,将通过开放web的规则——链接分发,通常是通过搜索引擎或是社交平台。 盈利模式: HTML5和native apps的盈利模式也有所不同。native apps通过移动平台的一键付费模式将应用货币化,需要将部分收益分配给下载平台提供商;HTML5 apps则趋向于通过广告获取收益。
  • 20. 新的分发渠道模式下的受益受损方 主要受益方包括浏览器厂商 、内容/服务/发行商(如金融时报、亚马逊等)、HTML5开发商(如移动游戏开发商等)等。除此之外,市调公司Forrester Research的首席分析师Jeffrey Hammond认为,HTML5主要受益者还包括微软和谷歌及其原始设备制造商等。 主要受损方为原生应用商店构建者、以flash开发为主的内容商及开发商。 有研究公司认为HTML5 Web应用程序的广泛采用会破坏苹果的iPhone和iPad的专营权的利润率和市场份额。但苹果的核心业务是硬件,其本身也是HTML5工作组成员,并且最先全面不支持flash,所以苹果不可能自掘坟墓,况且苹果App Store贡献的利润没有超过苹果总利润的1%,作为以硬件为主的公司,应用商店也不可能是苹果赖以生存的唯一道路。所以经分析,HTML5可能会短期威胁到苹果构建的应用商店生态系统,但长期及总体来看不会对苹果造成损失。 3.1 HTML5商业模式(2)
  • 21. 3.1 HTML5商业模式(3) HTML5构成的Web App生态链:
  • 22. HTML5技术特别适用于: 垂直行业的服务功能或者信息服务类应用。提高开发速度和跨平台性能,以相对低的成本,更快地完成并部署多个终端。例如媒体apps,这些apps会显示文本、图像和视频信息,通过广告和订阅获取收益。苹果一直试图通过“报亭”这种特殊的分发策略处理媒体类型的native app,但是大多数的媒体大鳄对此并不买账。高地风险投资公司(Elevation Partners)的创始人Roger McNamee认为HTML5将改变出版行业的游戏规则。 【典型案例】: 英国金融时报(The Financial Times)——第一个走HTML5路线的媒体出版商,成为HTML5最成功的案例。FT拒绝接受Apple新修订的下载分成计划,退出了在苹果应用商店的iOS App转而使用HTML5开发Web app,出人意料的是,这个基于Web的App拥有并不逊于传统App的访问体验,并且用户数在短短几个月突破百万,远远超过其iOS版本当初在苹果应用商店的下载量。目前FT已收购为其开发移动Web App的公司Assanka。 Facebook也已于2011年10月推出HTML5的移动版本,无需再付给苹果利润提成。 移动互联网网页游戏市场将成为蓝海市场。开发者通过HTML5技术开发一款产品,可以应用于多平台,可大幅降低开发成本。 广告领域。其更强的交互性及富媒体开发在广告扩展性上具有很大潜力,将使得广告更加丰富多彩,并且能够与用户交互,通过交互,广告可以直接根据用户的需求为用户提供服务。 3.2 HTML5的市场机会(1)
  • 23. 3.2 HTML5的市场机会(2) 浏览器厂商意图借HTML5重构移动互联网生态系统: 2012年1月9日,腾讯发布《从一站式服务到生态系统构建——全球移动浏览创新中心2012Q1白皮书》,将腾讯的移动互联网开放的战略意图和盘托出。 该白皮书透露,腾讯自主研发的X5内核浏览器已经在HTML5技术上获得突破性进展,而且还开发了一套方便国内用户使用的SDK,使开发者可以方便快捷的开发出各类型跨平台的移动应用,搭建国内首个HTML5应用中心,为移动互联网创业企业及个人开发者提供一个HTML5 App发布运营平台,从而保障以手机QQ浏览器为核心的生态系统先进性。
  • 24. 3.3 HTML5的发展前景(1) 虽然标准的形成尚待时日,但产业链各环节已加紧布局HTML5。国内外浏览器厂商都在加速匹配,已经在实现各种HTML5功能;开放平台在努力让自己支持HTML5应用,比如人人网、新浪微博都推出了HTML5移动版本;内容提供商在为HTML5的内容版本做准备,这其中包括四大门户网站。 套壳apps(shell apps)越来越多。这些apps有一个native“壳”,在app stores中可以下载,但是这些应用的所有功能其实都是使用HTML5技术实现的。Facebook的iPad app就是这样一类应用。这种“混合”apps能够利用两种技术的优势,这也意味着越来越多的开发资源正在朝着HTML5转变。随着HTML5的提升,这种“封装过的”apps最终将无需再套上一层native的壳了。 市场调研公司Evans Data 2012年1月最新公布的数据称,最近针对1200多名开发者的问卷调查结果表明,HTML5已经获得开发者的广泛支持,43%北美受访者已经在使用该平台开发产品,还有39%的欧洲、中东和非洲开发者也在使用这项技术。从全世界范围来看,已经采用HTML5技术或者准备使用该技术的开发者所占比例达到四分之三。HTML5正在兴起,发展势头强劲
  • 25. 历史经验显示,技术通常会在短期内被炒得很热,但是真正要做到广泛使用需要一段很长的时间。 W3C表示,是否将HTML5定为官方标准要到2014年才有定论,但是对于先布局者未来才存在更多机会与发展空间。 HTML5现在还没有充分做好全面投入生产的准备。许多native apps能够实现的功能,目前在HTML5 apps中还无法实现,native apps更加丰富和优美。不少游戏仍会长时间坚持使用native apps,它需要利用native软件的丰富功能。 在可预见的将来,native apps还将在开发领域占据一席之地,但是它的数量和影响力将逐渐下降。虽然以后“主要是在浏览器中访问应用服务”,但一些native apps还是会被保留下来。 Adobe于2011年11月9日宣布将不再推出基于移动设备浏览器Flash Player的更新版本,同时还将终止电视机等家庭数字设备相关的Flash插件开发,转而集中精力研发HTML5与Adobe云应用平台。 3.3 HTML5的发展前景(2) HTML5目前仍处于发展阶段,成为标准并广泛使用仍需一段时间,但随着功能的不断完善,HTML5 apps将逐步取代游戏领域的native apps已成必然。
  • 26. (来源:高地风险投资) 3.3 HTML5的发展前景(3) 到2013年,全球市场将拥有超过10亿部支持HTML5技术的手机。而这一数字在2011年仅为3.36亿部。其中大部分的增长将主要来自北美、欧洲以及亚洲市场。同时,HTML5技术的普及还将获得包括苹果、Adobe、谷歌以及微软等开发商的大力支持。 (来源:市调机构Strategy Analytics) 到2016年,全球将拥有支持HTML5技术的移动设备至少高达21亿部。而在2010年时,支持HTML5的移动设备仅为1.09亿部。 (来源:市调机构ABI Research)
  • 27. 3.3 HTML5的发展前景(4)4月12日,工信部网站日前公布2013年“核高基”国家科技重大专项课题。其中面向移动互联网智能终端的浏览器研发与产业化成为课题之一,成功入选企业有可能获得6900万元中央财政资金支持。 项目目标:根据最新的课题申报指南,国家将支持2家相关企业进行移动浏览器的研发及产业化,其中一家企业需要研发出支持移动智能终端的HTML5浏览器;另一家企业则要研发出安全可控的跨平台浏览器。 面向移动互联网智能终端的浏览器研发与产业化课题 研究目标: 面向移动互联网应用与服务发展的需求,研发以HTML5为核心的下一代移动智能终端浏览器,并实现规模化应用。研究HTML5运行环境内核(解析、执行、渲染引擎)的关键技术,实现浏览器内核自主可控,研制面向移动互联网应用的新一代浏览器产品;研发HTML5.0应用集成开发环境,建立开放、安全、云端融合的应用与服务支持平台,支持第三方应用扩展;针对国产智能终端、国产操作系统进行适配与优化,为国产移动智能终端操作系统提供基于HTML5的浏览器,并实现产业化应用,推动中国企业参与国际竞争,提高在国际标准中的话语权。
  • 28. HTML5作为下一代Web开发标准,是大势所趋,但目前性能和实现效果方面还不是很成熟,正式定为官方标准尚待时日,产业链各环节已加紧布局,目前属于蓝海市场,进入壁垒不高,技术门槛也不高。 HTML5弥补了HTML4在交互、媒体和本地操作等方面的不足,支持当前多样的、复杂的Web内容,不需插件,提高稳定性和安全性。 HTML5具有跨平台运行及开放的优点,能够降低开发成本及时间,使开发者一次开发便可全平台使用,不必再像native app需要在不同平台之间移植,并且实现效果及功能正在趋近native app。基于HTML5的web app发布更加自由,可以基于浏览器让应用程序回归到网页,降低终端要求。 目前的native apps主要是通过应用商店发布移动应用,但是,未来HTML5在分发渠道方面将会跟现在不同,并且非常明显的影响未来商业化内容的发布,在内容发布供应方和平台之间有个平衡,但总体上朝着有利于内容方的方向演进。 小结