如何让HTML5开发者快乐?

日期: 2013-12-24 作者:Cameron McKenzie翻译:boxi 来源:TechTarget中国 英文

2013年6月4日,Google负责展示广告的副总裁Neal Mohan在DoubleClick Advertiser官方博客上提到了一款新的软件开发工具,名字叫做“Google Web Designer(GWD)”,将在“未来数月”推出。该博客对细节不甚了了,只是说GWD旨在“帮助广告商和发行商更无缝地发挥跨设备程序的潜能。”由于开发社区只能去猜测该新工具提供的功能特性,所以业界能做的就只有猜。以下就是在简化跨设备、HTML5开发的道路上,将一直陪伴我们、也应该是任何现代web开发及设计工具均应实现的5大愿望清单。

1、供应商

如果GWD希望为开发跨设备的HTML5应用提供一种新工具,首先就得创建一个可以无缝处理所有不兼容前缀(各种浏览器利用这些前缀来实现各种新特性)的工具。尽管浏览器市场的大玩家自诩支持各种HTML5及CSS3建构,但其肮脏的小秘密是,那种实现是以一种非标准的方式完成的。看看下面这段可怕的代码吧,它只是对一个孤立的DIV元素执行简单的三维变换。

#ridge .slice {

transform: translateZ(-25px) rotateY(-50deg);
-webkit-transform: translateZ(-25px) rotateY(-50deg);
-moz-transform: translateZ(-25px) rotateY(-50deg);
-ms-transform: translateZ(-25px) rotateY(-50deg);
-o-transform: translateZ(-25px) rotateY(-50deg);

}

各种出于需要的供应商前缀既繁琐又难以管理。此外,这些异质会令编码错误的可能性提高,令维护和排错变得困难许多。当然,市场上的确有一些优秀的第三方工具如CSSPlease及Prefixr等开源用来帮助生成供应商前缀,但是它们只是:第三方。如果Google希望简化web设计和开发,提高CSS3前缀支持,维护和迁移能力必须是这些工具首先需要实现的功能。

2、样式表的预编译工具

上述样式表片段的另一个扎眼的问题是25、50这些文字的重复性。如果发现Z轴和Y周转换应该是30而非25、50的话,代码就得改10遍。从理论上来说用查找替换功能可以简化一下,但随着样式表变得越来越复杂,且如果公共设置扩散到多个文本文件的话,查找替换功能的快速性就发挥不上用场了。不过也有第三方替代工具执行这些功能,像Syntactically Awesome Stylesheets(saas)和lesscss就是最流行的两款,但无论是saas需要基于Ruby的安装程序这一事实,或者使用像Less这样的第三方工具会增加复杂性,web开发者会发现一个接着一个地安装工具会很乏味、很麻烦。对于任何现代web开发工具来说,CSS3预处理器和预编译器绝对是必要的。

3、透明特性检查

比供应商前缀扩散更糟糕的是,事实上不管有没有供应商前缀,仍有各种CSS3和HTML5特性未获全面支持。像用简单的基于图形的边界给内容进行装饰这样基本的东西在最新的浏览器完全是时有时无。在Firefox上面的效果很好,但是Safari和Chrome的目前版本均未实现。一并考虑旧版、增量升级和浏览器升级这些因素时,要想预测浏览器支持甚至还要困难得多。似乎JavaScript库modernizr目前是执行HTML5特性检查的待定标准,但是并非所有人都对增加一个开源modernizr库添感兴趣。无论Google Web Designer是否在内部利用了这个库还是采取了更为专有化的方法,该需求仍旧存在。

当然,识别浏览器是否支持各种特性只是HTML5之战的一半,剩下另一半将把我们带到下一个需求,该需求牵涉到如何处理不支持所需的HTML5特性的浏览器。

4、优雅的功能退化

能识别各种旧版或许不支持的功能是个良好的开端,但这只是一个开端。高效的web开发者知道,发现给定HTML5或CSS3功能并非工作的完结,而是艰苦工作的开始。比方说,浏览器可能不支持HTML5拖拽功能。如果情况是这样的话,应该准备一条退路,加载YUI或jQuery然后用来实现相同但有限的功能。考虑到HTML5规范定义的功能数量,以及用JavaScript、Java Applet等浏览器技术实现那些功能的方法众多,web开发者很容易就会被压垮。如果Google Web Designer真的希望把功能完整的web开发普及给大众,就应该把大量注意力放在如何确保所有用户(无论其使用的浏览器版本如何)都享受到尽可能最棒的功能丰富的体验上。

5、所见即所得的响应式设计工具

响应式设计,一种可让单个用户界面重新调整及拉伸的开发方法,可有效渲染从1080p大屏电视到最小的手持设备的一切东西,响应式设计的愿景已通过HTML5灵活的文本框、CSS3媒体查询以及像Twitter的Bootstrap.js与Zurb的Foundation这样的东西变成现实。

些技术出奇的高效,但它们的确需要一定的学习曲线。此外,维护和更新由开发者同事创建的响应式设计会成为一项挑战。任何新的web开发及设计工具不仅需要支持那些令响应式设计成为现实的技术,还需要提供有效的、可视化的工具,从而让维护和功能增强的过程更加规范化。所见即所得的响应式设计创建和开发工具绝对是必须的。

当然,究竟Google Web Designer会是什么样的,何时会发布仍然是个秘密。关键是Google是一家对广告收入感兴趣的公司,其促进的每一项工具均以提高收入为主要目的,如果说有时候不那么明显直接的话。尽管开发界社区希望的也许是该公司推出一个新的web设计平台,但也有可能Google Web Designer只不过是一个让DoubleClick的广告更容易拖放进Android和iPhone应用中去的跨平台插件而已。但除非它最后发布,否则的话,希望有一个功能丰富的开发工具,让web开发者可创建基于HTML5的下一代web应用是没有错的。

你希望看到Google Web Designer有哪些功能呢?请告诉我们。

我们一直都在努力坚持原创.......请不要一声不吭,就悄悄拿走。

我原创,你原创,我们的内容世界才会更加精彩!

【所有原创内容版权均属TechTarget,欢迎大家转发分享。但未经授权,严禁任何媒体(平面媒体、网络媒体、自媒体等)以及微信公众号复制、转载、摘编或以其他方式进行使用。】

微信公众号

TechTarget微信公众号二维码

TechTarget

官方微博

TechTarget中国官方微博二维码

TechTarget中国

翻译

boxi
boxi

相关推荐

  • AWS MEAN堆栈+JavaScript=快速搭建应用

    开发人员在构建Web应用时有许多选择。市面上有无数的框架和语言可选,而像AWS这样的云平台可以方便地部署和扩展应用程序。

  • HTML5促进企业移动化服务走向极致

    在企业困扰于传统移动化方式过于复杂时, HTML5凭借其天然的跨平台特性,乘势而起并逐渐得到企业的关注。可是,由于HMTL5标准建立时间不长,展示性能及稳定性更是需要和浏览器有一个良好的兼容,除此之外企业更是缺乏实际应用经验,所以基于HTML5技术的企业级服务市场还处于一片初创状态。

  • 对话陈本峰:HTML5究竟给企业带来了什么?

    智能手机的普及,移动计算的应用,带火了HTML5技术。尤其,当我们看到微软朋友圈被“故宫与腾讯合作”的广告刷屏,我们不得不承认,HTML5技术确实很重要,但是HTML5究竟带来了什么,与以往移动技术有什么不同?

  • HTML5如何在企业中深入使用?

    据调查显示全球拥有490亿 在线设备,比人口数量多几倍,这说明平均每人拥有不只一部分在线设备。由此可见,全球移动生态系统是多么的庞大。