HTML5总体认识【张振华.Jack】

张振华.JackQQ:494460705Mail:zhangzhenhua846@126.com2015年7月10年Java开发，3年App开发1自我介绍Html5的总体认识现代企业与Html5的关系I.HTML5的简单认识与PC端的HTML的关系II.HTML5的现状(企业、技术、游戏)III.HTML5与APP开发的关系(三种APP开发模式)IV.HTML5与Web-App与企业的关系V.HTML5与微信公共账号的关系VI.HTML5的简单企业推广页VII.HTML5扩展认识（小游戏，活动，二维码）VIII.HTML5的特点（开发）IX.HTML5页面的设计思路X.HTML5页面的运维思路XI.HTML5开源技术、未来的趋势2目录张振华.JackHTML5的简单认识（一）3张振华.JackHTML5於2004年被WHATWG（网页超文本技术工作小组）提出，於2007年被W3C接纳在2008年1月22日，第一份正式草案已公布。WHATWG表示该规范是目前正在进行的工作，仍须多年的努力•1995.11•RFCHTML2.0•1996.1•W3CHTML3.2•1997.12•W3CHTML4.0•1999.12•W3CHTML4.01•2008.1•W3CHTML5HTML5的简单认识与HTML的关系（一）①HTML是PC端互联网的产物，而用到的技术就是CSS②HTML5是移动互联网时代的产物，而用到的技术就是CSS3③HTML5不是全新的东西，而是在HTML的基础上增加了①一些语义化标签。②强大的绘图、动画。所以可以实现一些简单的2D游戏效果。③多媒体的直接支持，比html要方便一点。④表单的全新功能。⑤本地存储，与Cookie类似。⑥地理定位的API。（可以很方便的开发出来基于LBS的web-app）⑦实时通讯做了更好的支持，像websock，如消息来了有个小红色数字。4张振华.JackHTML5的简单认识与HTML的关系（一）①HTML5谁然是全新的东西，但是对于PC端的HTML开发工程师来说，是要相对简单的。只是要知道其中玄机即可。②对于很多企业来说不必要很大成本专门招聘一些HTML5开发工程师。会HTML5开发的不一定会HTML开发，会HTML开发的可以轻易掌握HTML5的开发。③HTML侧重于解决浏览器的兼容性问题，会经常听到一些开发经常抱怨在这个浏览器上面能用到，这个上面不能用了。HTML5开发工程师注重的是要解决屏幕的适配问题，④HTML5的屏幕适配问题如何做？一句话点破就是宽度要用百分比。5张振华.Jack张振华.Jack6HTML5的现状之在用的企业（二）携程在2014年，CTO叶亚明，战略高度,大量采用HTML5进行开发APP爱鲜蜂送水果的一个电商公司，一开始只有HTML5的微信入口商城微信正在变成另外一个超级浏览器张振华.Jack7HTML5的现状之哪些App在用HTML5（二）3、资讯新闻产品2、社交产品1、搜索产品4、游戏产品张振华.Jack8HTML5的现状之游戏（二）HTML5最近动向（二）9张振华.Jack2011年6月，谷歌发布Swiffy，可以将swf转换为HTML52011年3月，Adobe向苹果低头，发布wallaby，可以将flash转换为HTML52011年1月18日，W3C发布了HTML5的官方logoHTML5最近动向（二）10张振华.Jack2012年12月17日，W3C发布了HTML5以及Canvas2D两个标准的完全定义版本，标志着HTML5的标准已经在趋向稳定。2013年11月7日微软发布了IE11，继续对H5市场上发起冲击。2011年8月，Adobe发布HTML5标准开发工具Edge，但声称Flash远未寿终正寝。HTML5对PC端的攻城略地（二）11张振华.Jack•主流的浏览器已经基本支持HTML5和CSS3•支持的程度如上图，基本上从左到右递减•但IE9、IE10、IE11的发布依然让人兴奋HTML5现状之测试(二)张振华.Jack12不必为各种机型找测试机器了一个优秀的HTMl5开发工程师，可以做出来的HTMl技能支持手机浏览器也能支持PC浏览器，即PC和手机做一套前端即可HTML5与APP的关系（三）13张振华.Jack目前主流的app大致分为三种：1.NativeAPP(原生APP)NativeApp是一种基于智能手机本地操作系统如IOS、Android、WP并使用原生程式编写运行的第三方应用程序,也叫本地app。2.WebApp(HTML5)WebApp是指基于Web的系统和应用，其作用是向广大的最终用户发布一组复杂的内容和功能。3.HybridApp(原生加HTML5混合APP)HybridApp同时使用网页语言与程序语言开发，通过应用商店区分移动操作系统分发，用户需要安装使用的移动应用NativeApp优点：能够访问手机的所有功能（GPS，相机等）更好的运行速度、性能和总体的用户体验支持离线工作（因为是在设备上运行而非Web）支持丰富的图形和动画在应用商店轻易地找到应用并且在主屏幕上能轻易找到应用图标缺点：开发成本较高范围限制较多（只能访问在特定操作系统上运行的设备）用户必须手动下载更新最新版本内容限制（应用商店限制）#张振华.JackWebApp优点：适用范围广（覆盖所有智能手机）开发成本较低方便、快捷地部署（无需提交到应用商店）无内容限制用户总能访问到最新版本（没有手动更新需求）缺点：较差的和较慢的性能体验（大部分需要链接互联网）用户体验较差*支持图形和动画效果较差不适用于应用商店及没有靠下载应用盈利机会需要链接互联网限制用户使用功能（比如，相机、GPS等）*Web应用完全用HTML、JavaScript和CSS等Web技术开发，通过移动设备的浏览器来访问随着HTML5的普及，上面提到的两个*的功能在Web应用中已得到很好的改进，尽管该技术性能提高了，但是依然无法与本地应用程序相媲美。WebApp就是运行于网络和标准浏览器上，基于网页技术开发实现特定功能的应用。#张振华.JackHybridApp优点：支持多平台访问手机功能都可访问适用于应用商店部分支持离线功能缺点：未知的部署时间用户体验不如本地应用性能速度较慢（需链接网络）HybridApp兼具了NativeApp的所有优势，也兼具了WebApp使用HTML5跨平台开发低成本的优势。#张振华.JackWebApp（网页应用）HybridApp（混合应用）NativeApp（原生应用）开发成本低中高维护更新简单简单复杂体验相对来说，差优优Store或market认可不认可认可认可安装不需要需要需要跨平台优优差#张振华.JackApp三种开发模式的对比表HTML5与APP的关系之如何将web-app发布成应用（三）18张振华.Jack不会app原生开发的人员：PhoneGap，快速简单缺点，一些超出它的特效搞不定。懂开发的人：1：做个app的icon2：做个app的欢迎图3：写一个webwiew即可每个客户端的只需要一个会开发的人员2天左右时间即可完事，当然了，原来有积累的，直接copy过来即可不费事。HTML5与Web-App与企业的关系（四）19张振华.Jack还可以手机桌面有icon和独立的应用HTML5与Web-App与企业的关系（四）20张振华.JackHTML5与Web-App与企业的关系（四）21张振华.JackHTML5与Web-App与企业的关系（四）22张振华.JackHTML5与Web-App与企业的关系之五能（四）23张振华.JackHTML5与Web-App与企业的关系之五能（四）24张振华.JackHTML5与Web-App与企业的关系（四）25张振华.Jack哪些互联网产品最最适合，最急用HTML5开发：1、需要频繁跨平台、跨屏幕使用的产品；2、社交分享互动密度和强度都较高的内容产品；3、对分发内容、广告的需求强烈的产品；4、期望快速出Demo、抢占用户、低成本的App；5、希望应用与应用相互嵌套和合作的；HTML5技术的发展无疑赋予了Web更强大的生命力，在许多场景下，Web或许会颠覆目前的app市场格局。HTML5与微信公共账号的关系（五）26张振华.Jack有了HTML5这些功能就能轻而易举的实现HTML5与微信公共账号的关系（五）27张振华.JackHTML5与微信公共账号的关系（五）28张振华.JackHTML5的简单企业推广页（五）29张振华.Jack这是携程的一个简单的HTML5的推广页面。HTML5的简单企业推广页（五）30张振华.Jack这是给一个酒店做的一个HTML5的推广和宣传页，一点手机号可以直接拨号HTML5的简单企业推广页（五）31张振华.Jack://这种不懂开发的就可以做，所以说制作宣传成本很低，只要懂图片制作即可，大概做一个在2-3天，也就几百块钱的费用HTML5扩展认识（小游戏，活动，二维码）（六）32张振华.Jack将你的微信公共号，wap站点生成二维码，可干的事情就很多了！HTML5扩展认识（小游戏，活动，二维码）（六）33张振华.JackHTML5,相对来说做这些活动就会比较轻松和容易，极容易进行推广！HTML5扩展认识（小游戏，活动，二维码）（六）34张振华.JackHTML5的特点之推广和开发（六）35张振华.JackA.跨平台：HTML5为企业开发各种智能手机、平板电脑和个人电脑开发完全兼容的产品，是因为这样不用专门针对特定硬件或在线商店进行修改。B.升级简单：可以快速迭代、持续交付。升级不需要通知用户，在服务端更新文件即可，用户完全没有感觉C.大幅下降成本、开源生态系统发达。各种模板和针对Html5的技术。基于上面的特点，其实在创业初期，可以很好的基于一个新的idea做出一个Demo，来验证一下你的商业模式。HTML5的特点之用户体验（六）36张振华.JackA.注重用户体验：一个提供了很好的用户体验，让用户能很容易地完成任务，并利用了设备本地的一些性能。B.轻量级应用：一个web应用提供了丰富的视觉体验，又不会分散人的注意力；它注重美学，使用和本地应用一样的设计模式，又不失易用性。C.交互性强：一个web应用非常注重用户的交互、参与和完成任务，而不是让他们仅仅浏览网页。运用小而美的，极致简约思维，注意上面的原则，就可能会设计出来一个迅速引爆市场的产品。HTML5页面的运维思路（五）37张振华.Jack导流效率高：除了入口多、流量大，导流效率高也不可忽视，谁都知道：页游和端游打同样的广告，广告变用户的转化率，页游远远高于端游。更容易推广、更容易爆发：导流入口多：HTML5应用导流非常容易，超级App(如微信朋友圈)、搜索引擎、应用市场、浏览器，到处都是HTML5的流量入口。而原生App的流量入口只有应用市场。聪明的HTML5开发者当然会玩转各种流量入口从而取得更强的优势。流量大：前段时间微信朋友圈风靡一时《神经猫》，这个游戏如果放到Appstore，绝对没有那么多流量，超级App带来的流量，远大于原生应用市场。假如微信允许游戏在桌面创建快捷方式、假如游戏后续升级解决持续娱乐问题，未来不可想象。Html5时代的碎片化推广方案张振华.Jack38HTML5的开源的技术有（五）39张振华.Jack1.JqueryMobile前台界面2.Bootstrap后台、前台界面（特别火的HTML5模板）3.EasyUI后台界面4.AmazeUI前台界面5.Zepto.js、AgularJS、CanJshtml5js框架6.Quintus/canvasengine/enchantjs等html5游戏引擎7.FastClick(点击事件类库)8.Chart.js（图标类库）HTML5的成熟模板（五）40张振华.JackHtml5的模板大概分为了两类：一种是电商为主的；二是Bootstra