来谈谈：HTML5的意义和HTML5完成的Cool的使用
但他也直言说，这就像写软件时，在添加改善的新功能时，难免遭遇稳定性的问题，必须先把问题清除干净，才能推出新产品。破洛洛文章简介：HTML5@电子商务.com是我在此次HTML5inChina年夜会上讲的主题，之前有大批的业界同仁先容了HTML5的意义和HTML5可以完成的各类很Cool的使用.经由2009到2010年环球抢先的互联网企业Google、Apple、Facebook等等在HTML5上的鼎力促进和使用，往年在国际业界入手下手真正地热起来，4.10QConBeijing2011的12个专题之一就是HTML5开辟平台，4.18由W3CTech主理的“拥抱HTML5”又是国际业界另外一个顶级的HTML5年夜会，此次的HTML5inChina是往年第3个关于HTML5的国际业界顶级集会，另有行将到来的7.9D2前端手艺论坛也将会有部分HTML5相干的内容。在这么短的工夫内国际构造了这屡次和HTML5相干的年夜范围顶级集会，几近触及到国际一切最抢先的互联网企业，从中能够看出HTML5的热度。
HTML5引发业界云云器重这是功德，但短工夫内过热反而申明了业界关于HTML5的了解水平不敷，这点和2005年言必称尺度和ajax十分相似，等人人真正对尺度和ajax深入了解并使用到临盆理论的时分反而在议论的是使用尺度和ajax成绩了某项产物而不单单是手艺自己，HTML5也正派历如许一个历程。如今最热的会商之一就是在挪动平台上利用原生开辟仍是利用HTML5，假如只是会商二者的手艺上风这个成绩估量永久没有谜底，由于我们的方针真的不是那种手艺更好，而是哪一种手艺更能合适我们用来疾速的办理用户的需求，一个庞大游戏好比极品飞车固然用HTML5来做固然不是最好的计划，但相似GoogleReader之类数据展示性和复杂交互的使用固然用HTML5开辟对照好，实在假如你略加寄望就连Apple本人的AppStore这个使用的自己就是用HTML5开辟的。本次集会后面有两位同砚先容利用phoneGap+HTML5来重构新浪微博的iPad客户端，两团体使用一周的专业工夫大抵完成了这个iPad客户真个全平台掩盖（Web、MobileWeb、Android、iPhone和iPad），我想新浪微博的同砚看到这个应当会有一些纷歧样的感到吧。
我把此次每张幻灯片要讲的内容都写到幻灯片的正文中，有乐趣的同砚能够对比看会更分明一些，同时也在blog中列出每张幻灯片要讲的内容。别的，几近每张幻灯片的前面都了一两个链接，这些链接良多都十分出色，激烈保举人人看看。
pdf下载
[*]这页就是团体信息，接待就职何成绩接洽我。
[*]HTML5的使用的水平和扫瞄器的撑持水平亲切相干的，这个表列出今朝支流扫瞄器各个版本在HTML5Test得分，环球的占据率和淘宝的占据率。HTML5Test的满分是400分，而今朝得分最高的293，可见完成HTML5已界说的一切尺度还必要较长的路要走。
[*]从表中我们还能够从中看出更多很成心思的器材：
[*]IE6、IE7、IE8在HTML5尺度上的撑持切实其实太低劣了，是年夜范围使用HTML5的停滞，我们是应当自动推进用户晋级了。环球局限内IE6低于3%，IE7低于9%，在美国和欧洲这个值应当更低，这就是为何Google能够公布在它的良多新兴营业不撑持或无限撑持IE6和IE7的缘故原由，使用HTML5开辟出优异的产物，然后合时引诱用户晋级扫瞄器的最好办法。
[*]我们更应当看到固然HTML5是在2004由WHATWG入手下手孕育，2006年W3C正式启动，但2001年推出的IE6已撑持部分HTML5，这告知我们HTML5并非全体是所谓的新手艺，它更思索对现有HTML手艺的承继和改善，而良多HTML5手艺标准我们早已在利用，好比HTML5的DTD声明<!doctypehtml>，以是我们良多人很早就在利用HTML5。
[*]淘宝的IE6、IE7、IE8占据率凌驾80%，全部IE份额靠近90%，这次要有两个缘故原由招致淘宝IE份额十分高：
[*]XP操纵体系在中国份额仍旧80%以上
[*]电子商务网站最主要的一个环节是付出，而如今的网银尽年夜部分是只撑持IE的，包含和淘宝亲切相干的付出宝，固然已撑持了各年夜平台的，但其最主要的平安措施电子证书次要仍是在IE上利用最多。
[*]淘宝的IE6占据率已低于40%，这相对是一个好迹象，从我暗里探听的几个数据判别国际IE6均匀占据率应当在50%以上，前面会注释为何会如许。
[*]全部阿里的电子商务买卖付出部分次要依附付出宝，付出宝在不撑持扫瞄器、安装证书等操纵上会引诱用户晋级最新的版本，这十分值得国际的年夜站点进修。
[*]付出宝在其教明显地位保举利用IE、Firefox、Chrome、Safari等扫瞄器最新版本，并提醒用户晋级扫瞄器，这是一件十分成心义的事变，好的产物引诱用户晋级利企利平易近。不外，这里付出宝能够有一个小改善，那就是不要对XP平台的同砚也保举IE9扫瞄器，幸亏下载链接何处的微软做了判别。
[*]入手下手进修和使用HTML5，起首会注重到新增了大批的语义化元素，好比，这些元素的增加恰是HTML5务虚一种表现，它们都是来自对实际HTML构造情势的笼统提取，但遗憾的是IE6、IE7、IE8不撑持这些标签，但开辟者是很伶俐的，因而有了两种办理计划：
[*]JohnResig发布了使用JavaScript来完成让IE6-8撑持的办法，这类计划对照复杂，独一的缺点就是必需利用JavaScript，但扫瞄器大概不撑持JavaScript
[*]使用双层标签举行嵌套，如许就不必要思索是不是撑持JavaScript了，但代码痴肥，基础上开辟职员不太喜好，以是年夜部分都利用上一种计划
[*]但我们不克不及不面临一种实际，那就仍是有大批的用户代办署理禁用JavaScript，当有上亿用户时，这个数目实际上是我们没法无视的。
[*]为何另有这么多用户禁用JavaScript呢？除用户经由过程平安级别举行禁用、杀毒软件禁用以外，另有一个Firefox插件NoScript也必要值得我们注重，一方面它的下载量靠近9000万，可见用户数目之年夜，别的一方面我们在百度上搜刮NoScript时，你会发明第一页良多中央先容NoScript时都说起平安，也就是说用户对JavaScript的害怕和对平安的担心才是我们存在大批禁用JavaScript的情形。
[*]淘宝首页在岁首晋级时引进了HTML5的语义元素，当用户在IE6-8下禁用JavaScript会呈现幻灯片上的提醒，倡议用户开启JavaScript大概会见一个专门定制的不利用HTML5新语义元素的页面，这个看起来是一个不错的办理计划，但就是本钱太高。
[*]以是为了不本钱太高，淘宝彩票首页前不久也引进了HTML5语义化元素，就间接告知禁用JavaScript的用户启用JavaScript，不然没法利用。
[*]我们固然能够把不撑持JavaScript的用户当作某个低版本的扫瞄器用户，好比是IE5.5的用户，我们也能够像强迫用户晋级一样往强迫用户开启JavaScript，这是分歧场景的分歧选择，以是后面淘宝的选择也是一个可行的计划。在口碑的理论中，尽量地让用户先用起来是我们的计划准绳，以是口碑垂青的是：
[*]重点是语义的自己而不单单是语义元素，我们不会仅仅为了利用语义元素而引进JavaScript或嵌套标签，接纳语义自己的寄义来构造我们的代码是关头，以是我们能够更多的往参考HTML5的语义元素和http://schema.org/来计划我们的代码布局和定名，如许假如有一天你想转换成HTML5的也长短常复杂的。
[*]对JavaScript依附性很强的项目，能够勇敢的利用HTML5语义元素，同时必要对用户举行友爱的提醒，出格是在平安方面的提醒。
[*]不思索NoScript其实不能靠文雅升级一言蔽之，前端工程师有义务和任务往深切思索可会见性成绩，固然二者并非统一件事。
[*]电子商务网站经由多年的理论总结出次要的用户路径，这些路径的完成坦白接干系到全部网站的买卖额，以是提拔每步的转化率关于电子商务网站来说相当主要，完成每步之间的转化率就是要想举措提拔用户的购置效力。这内里有良多事变能够做，好比依照使用购置力的要素来计划页面信息和购置步骤，只管削减每两步之间的页面数、提拔两步之间的速率、削减两步之间的搅扰，在完成购置时构成新的购置轮回。
[*]在良多情形下，List页到Detail页有良多类似的中央，好比配合的头尾、侧边栏、购物车，假如我们用ajax来交换两头纷歧样的部分，会削减从List到Detail的工夫，提拔页面功能，从而提拔买卖额。Amazon的理论曾标明网站慢100毫秒有1%的人保持买卖。但接纳ajax如许做的时分会碰到三个停滞：
[*]ajax哀求的页面，好比detail页面，如何定位这个页面的URL
[*]扫瞄器行进前进的成绩
[*]传统页面的和可会见性和SEO成绩
[*]使用ajax的这些成绩早已有了对照完善的跨扫瞄器办理计划，良多JavaScript库或框架都有办理这些成绩的组件，twitter就是这方面是个十分好的案例
[*]使用url的hash标签来作为自力的URL，如许能够定位到每一个详细页面
[*]使用window.history.hash+iframe来完成扫瞄器的行进前进
[*]供应壮大的API，不存在传统的SEO成绩
但twitter的计划其实不完整合适传统的页面的渐进加强，传统页面良多时分必需在页面自己思索SEO成绩，和URL尺度成绩。好比会见https://twitter.com/#!/kavenyan你会看到loading，这是由于必要JavaScript要猎取hash值以后才干再次猎取对应数据，然后更新到页面上，假如是页面的中心主体内容接纳这类体例一向看到loading并非太友爱的事变。
HTML5对history供应了壮大的API：histroy.pushState和histroy.replaceState，它们十分复杂天然文雅地办理ajax使用碰到的后面两个成绩。更主要的是URL不必要借助于URL的hash部分，是一个真正意义上完全的URL，如许就能够很天然地完成对可会见性和传统SEO的保存。以是，当你间接会见从List经由过程ajax天生的Detail的URLhttp://waimai.koubei.com/web/takeoutgoodsdetail.html?city=99&offerId=10211200000000191时会间接呈现Detail的主体部分，不会呈现任何loading。
这个API的弱点在于只要Chrome、Safari和Firefox4撑持，这刚好构成了一个自然的ABTest，我们能够经由过程统计埋点看看如许做是否是完成了我们的方针增添了转化率。必需切记，我们的方针不是为了利用某个HTML5手艺，而是利用HTML5手艺来办理用户的需求。最早利用这个API的出名网站是http://github.com，在QConBeijing2011上hax提到了这个API，我们看到这个API刚好能办理我们的面对的成绩就当即使用了。这个事变告知我们，我们明天不单单是懂得HTML5的那些最Cool的使用，还要找到那些合适我们能学乃至用的手艺，一旦发明我们应当疾速的往理论拿出了局，不然再Cool的手艺假如不克不及办理我们的成绩，不克不及办理用户的需求是没有效的。
[*]这里有一些我们已利用和正在实验利用的HTML5手艺，每项手艺的利用都是奔着能办理我们的成绩往的，只管制止为了手艺而利用手艺。HTML5和CSS3可以让我们完成良多很Cool的计划，好比圆角，好比倒影。可是偶然候你大概会发明，视觉计划师经由过程PhotoShop之类软件计划的圆角和倒影你很难用HTML5+CSS3完成，但HTML5+CSS3又能很高效的做出相似的事变，这是一个很为难的事变吧，以是让交互、让视觉，乃至让运营和产物懂得HTML5无能甚么十分主要，HTML5+CSS3+JavaScript+扫瞄器功能的改善将会很快的改动我们的计划形式，为了让更多的下游了解HTML5和CSS3在计划上能做甚么，我的同事开辟了Chrome插件CodeCola，用它可以十分便利地经由过程可视化的体例在如今有的页面上完成各类HTML5效果，并可以便利地失掉修正后的代码，大概把修正后的页面发给服务器以便其别人合作利用。这个插件自己就是用HTML5+CSS3+JavaScript来完成的，我们正在用HTML5来进步我们的效力。
[*]这句话是JeremyKeith在《HTML5计划道理》中讲的，4月份他也曾亲临W3CTech主理的拥抱HTML5年夜会向中国的开辟者传教，这是一个我以为每一个和HTML5使用相干的开辟者都应当细心往咀嚼的演讲，从中我们能够深入的了解HTML5为何会酿成如许，今后会是甚么样，我们应当本着甚么样的立场往理论HTML5。我们会利用HTML5不克不及叫我们制造代价，只要我们用HTML5办理了用户的需求才叫制造代价，这和HTML5的计划准绳是分歧的。从第1个例子思索NoScript情形，到第2个例子针对分歧扫瞄器完成分歧效果，到第3个例子为计划师开辟HTML5+CSS3的可视化工具，都是在遵守这个准绳基本上往完成的，实践上我们能够做的更多。
[*]这些口碑在理论HTML5时的一些心得：
[*]前端手艺开辟都是在渐进加强和文雅退步间做均衡，这不单单表现在某个详细的手艺使用上，也表现在全部计划的头脑和开辟流程上，我所举的例子也都是在做这二者的均衡。
[*]HTML5并非新兴的手艺，可是因为各个扫瞄器撑持的分歧，我们必需面临严酷的实际，针对某个详细的成绩的跨扫瞄器办理计划都良多种，好比探测扫瞄器是不是撑持HTML5某个属性的库Modernizr上有个wiki页就搜集了出格多的环球开辟者办理HTML5跨扫瞄器成绩的计划。我们完整能够站在环球开辟者的肩上高效的利用HTML5来办理用户的需求，同时经由过程详细营业发掘出新的办理计划奉献给社区。一般，使用HTML5其实不仅仅是前端工程师的事变，必要全部计划和研发团队都一切懂得，如许才干把手艺使用到极致，为用户制造最年夜代价。
[*]DouglasCrockford曾说过ajax招致webpage成为webapplication，实践上从2005年到如今固然有这个趋向，可是仍是不敷够分明，跟着HTML5的呈现，从元素的计划到API的计划，都标记着WebApp时期的带来，这刚好和手机App的时期同步。WebApp的呈现招致了我们必要更多的思索计划与手艺的分离，纯真的先计划页面再开辟页面的时期很将近已往了，我们必要把页面的计划和开辟分离起来，这将会对我们的交互计划、视觉计划和前端开辟带来很年夜的应战和时机，我们应当从如今探究，要晓得假如依照运营、产物、交互、视觉、前端、后端、测试这类研发体例是不成能呈现GoogleMaps、Gmail、Facebook、Twitter等等的。
[*]我们面临大批基于HTML5新且Cool的使用，可是偶然又会感到离我们有点远，作为前端开辟工程师应当了解营业，对营业的将来有所判别，那末我们就可以够用HTML5来办理我们的用户成绩，而不是为了利用HTML5来举行某些开辟。我们必需用乐成的案例来证实HTML5能够做甚么？我们不单单应当呈现的是手艺热，更应当呈现的是产物热，每一个新的产物呈现才是真正办理用户需求而具有十分年夜的意义。使用HTML5做出乐成的产物是最好的传教体例。
[*]“一次编写，到处运转”已经是Java的妄想，也是开辟者的妄想，如许开辟者能够把更多的工夫放在办理用户的需求上，而不是呆板和软件的兼容性上，如今HTML+CSS+JavaScript差未几快做到了，假如我们不克不及用这些手艺满意用户的需求，让我们的用户感到到Cool，那末满意开辟者的妄想就会变满意义没有那末年夜了，这就是HTML5的计划头脑，也应当是我们每一个程序员的寻求。
pdf下载
HTML5@电子商务.com是我在此次HTML5inChina年夜会上讲的主题，之前有大批的业界同仁先容了HTML5的意义和HTML5可以完成的各类很Cool的使用，出格是Mozilla的米嘉代讲的《HTML5inthewild》让良多人都惊奇于HTML5所能完成的统统，可是大概也有很多人会感到到这些玩意太炫了，不晓得怎样才干和我们的实践分离上，以是会有人说那些酷酷的游戏是浮云，我发明年夜部分人留上去听非游戏部分也申明了HTML5在非游戏范畴的使用是我们更多人面对的成绩。我会把口碑和淘宝在HTML5上一些使用案例拿出来和人人交换，基于这些案例来聊聊我们对HTML5的熟悉和使用，最主要的怎样思索落地的然后完成，固然这些履历不是只合适电子商务网站，也合适任何利用HTML5来办理营业成绩的场景。</p>
使用HTML5也是断断续续的有些历史了，但是没有系统的总结过，最近发现公司的图书馆有不少藏书， 在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。 使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。 学Dreamweaver技术的过程其实是一个增加信心的过程。 是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。 帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。 还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。
页:
[1]