【AICon】探索RAG 技术在实际应用中遇到的挑战及应对策略!AICon精华内容已上线73%>>> 了解详情
写点什么

当 HTML5 来敲门

  • 2010-12-20
  • 本文字数:4905 字

    阅读完需:约 16 分钟

偶然一次拿起 Amazon Kindle DX,面对着大屏幕,习惯性地用手指划动屏幕试图翻页失败后,猛然发现自己的操作习惯已经被改变。对着大屏幕的掌上设备,已经习惯了触摸,习惯了这种便利。让我想起了"技术驱动生活,技术改变生活"这句话。这是一个最平常不过的技术改变生活的例子。技术有很多种,改变生活的例子也数不胜数。而今天我将以一个前端开发工程师(以下简称:前端)的角度,说说 HTML5 给我们带来的改变和使用 HTML5 所需要注意的点。

现状

从目前的状况来说,HTML5 很流行。Google 在推,Microsoft 在推,很多大公司已经尝试在用,但依然没有大规模的商业应用。原因大概可以归结为两点,一是 HTML5 本身对于技术人员来说还比较新;一是占据市场最大份额的 IE(IE9 Beta 已经支持了相当多的 HTML5 技术)对大部分 HTML5 特性并不支持,其他浏览器的支持也并不全面。

当 HTML5 来敲门

现今的互联网,大部分信息与服务都不再是一家独有,当大家都能提供相同的服务时,体验更好的将会被选择。用户选择了你,信任了你,才可能养活你。所以很多时候,企业要做的是,提升自己产品的体验,留住用户,让他们离不开,让他们掏了腰包依然觉得物有所值。当然,如果能让用户感受到物超所值就更好了。

企业期望着自己的产品更具竞争力;而作为技术人员,我们希望能把产品做得更完美。在拼用户体验的关键时刻,HTML5 应景而生,敲响了我们的大门。它从性能、速度和操作的交互模式上,都给我们带来了全新的体验。我们想利用它。

对于 HTML5 的好,我相信你已经从很多地方看到。这里,我的重点会放在如何应对这个新事物上。可能讲的大部分都是前端应该做些什么,如何去做的事,但这也是在对所有希望提升自己产品的人说的。

(一)面对新的技术

从某种程度上来说,HTML5 并不是完全新生的技术。而是一个版本的升级,只是这次升级给我们带来了更多的东西。虽然这些东西大部分都还是一份草案,但浏览器厂商非常看重,都纷纷在竞争着去实现。而无论它是否草案,浏览器的支持,给了我们去做更好产品的机会。那么,去尝试吧。而作为前端,我们需要做的,能做到的有哪些呢?

技术的学习

对于新的标签的写法,按照是 HTML4 和 XHTML1 的习惯,我们已经可以猜到怎么写。而具体的使用,根据 HTML5 设计原理所遵循的伯斯塔尔法则(Postel's Law),"发送时要保守,接收时要开放",我们可以很好地理解。比如 <video /> 标签,设计时严格限定 <video /> 标签才是视频播放的标签,但接收的时候,可以有多种格式的 source:

<video>
<source src="movie.mp4">
<source src="movie.ogv">
<object data="movie.swf">
<a href="movie.mp4">download</a>
</object>
</video>

上文所述的改变,要学习,对我们的挑战并不大。HTML5 提供了各种新的 API、新特性,才才是学习的难点所在。比如 Canvas,要做好一个好的 Canvas 3D 应用,不止需要有编程的能力,还需要有图形学方面的知识。又比如 Web SQL Database,还需要前端学会处理数据库。当然,HTML5 的技术远远不止这些,并且很多新技术都还没有人给出相应应用的实现方式,以及最佳实践。学习起来还是有一定难度的。另外,HTML5 在一些浏览器是完全不支持的,比如 IE6、IE7(当然,拖放 --Drag and Drop 微软本来就有了),这时要去做所有的折衷方案可能比较难,所以,如何去权衡优雅降级也是一个难题。但,想把一个产品做得完美,或者只是想把一件事做得完美,又有什么事是容易的呢?

技术的使用

(1)创新才能让技术真正改变我们的生活

我们面临的最大挑战应该是创新。他不像已有的很多技术,已经有很多实例给我们看,甚至把源代码都开放出来。这就需要我们去了解用户的需求,大胆去为用户想,创造出更便利的体验。比如 X-icon Editor: http://www.xiconeditor.com/ ,利用 Canvas 实现了一个与桌面程序一样的图片编辑器:

又如 Minus: http://min.us 利用 File API 和 Drag and Drop 特性,实现了拖放上传的新体验:

这些创新。虽然在桌面软件上不算新鲜,但在 Web Application 上,都是新东西,是需要我们去实现的。而在最初,最直接的"创新"方式可能我们会是把更多桌面应用程序的好体验搬到 Web 上来。其实,这是非常不错的一种方案。因为很多人都习惯了桌面程序,如果 Web 提供了相应的功能,对于操作的方法,他们很快就会上手。这对于用户来说,减少了学习成本。轻松上手也是良好体验的一种。

(2)安全是我们应该时刻记住的

记得有一次我在使用 Google Docs 写一篇文档的时候,浏览器突然崩溃了。当时,就习惯性地想,如果 Google Docs 支持 LocalStorage(本地存储) 的话,那么,我下次打开,内容一定不会丢失。但仔细想想:

  1. 这是一份公司的内部分档,不希望被人外人看到
  2. LocalStorage 会存储在用户使用的电脑上

那么这时,一定不适合用 LocalStorage 这种技术,而应该用 Ajax 自动保存。因为这本东西是内部(对外保密)的文档,如果用户是在公共电脑上使用,可能会造成涉密。相应的,像我们使用 Web SQL Database 这种客户端的数据储存,就更需要有安全意识了。哪些是可以用的,哪些是不可以用的,应该要做好规划和检查。不要让简单的 localStorage.setItem 暴露了用户的隐私。

当然,可能会有人说这是一种设计的不严谨。我想,这种出发点是好的。技术本身本来就是中立的,它只要提供更多方便、灵活的特性给我们,而具体如何去正确运用,应该是作为程序员应该去思考的。

(3)规范需要统一

Jeremy Keith 在 Fronteers 2010 上说的 HTML5 设计原理告诉我们,HTML5 最大的一个特点是: 兼容。比如 <input type=alipay> 和 <input type="alipay"> 这样的标签的合格的,写属性的时候可以不用引号, 标签可以自闭合也可以不闭合。而在结构上,甚至可以写这样的标签:

<a href="/path/to/resource">
<h2>Headline text</h2>
<p>Paragraph text.</p>
</a>

这对于写惯了 XHTML 的我们,可能很难接受。但程序这样设计了,它也给我们带来了更多的灵活,虽然与我们已有的风格有所冲突。我们当然希望可以按照这些灵感,用自己的风格去编码,但团队合作最忌的就是没有统一的风格,这会阻碍我们前进的步伐。因此,面对 HTML 5,我们需要一套规范,来让我们的团队更好地进行协作,而不是阻碍协作。

(二)面对其他部门的人员

作为对 HTML5 最了解的一群人。前端应该负责去推动这样的技术应用。当然,并不是说只有前端才希望产品有更好的体验,而更多的是因为,只我们了解。想要应用新的技术,创建新的体验。只有执行的这群人了解了相应的,才有可能用上。对于交互设计师、视觉设计师和后端(服务端)工程师,还需要我们去告诉他们。而这也是我们的职责所在。

比如,你要告诉交互设计师,现在 Web 上 Drag and Drop 的支持比较好了,可以设计一些这方面的交互方式;你要去告诉视觉设计师,Drag and Drop 的事件过程,让他们像知道 a:hover 一样,会给你设计出鼠标经过时的样式;你还要去告诉后端工程师,其实 cookie 有时候已经用不了上,因为在 IE 我们可以用 userData,而其他的可以用 LocalStorage 来实现 ,这样可以不在 Header 中传送,页面将会更快。

需要我们前端去做的,除了去学习,去做,就是去告诉他们有哪些新东西,甚至让他们也学习一点这方面的知识。只有他们了解了这些,将产品设计和前后端技术配合起来,对产品才可能有质的提升。

总结

其实这一切,所有的新技术。都是为了更美好的生活而做的。HTML5 也是。或许某天我们再也不需要写像引用 flash 这样晦涩的代码了,而只要写像 <video src="movie.mp4" /> 这样简单的标签。

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" WIDTH="100%" HEIGHT="100%" id="someflash">
<param name="movie" value="someflash.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="someflash.swf" quality="high" wmode="transparent" width="100%" 
height="100%" name="someflash" align="" 
type="application/x-shockwave-flash" 
luginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</object>

所以,我们应该以更开放的心态去接纳。像伯斯塔尔法则(Postel's Law)所说的:发送时要保守,接收时要开放。当 HTML5 来敲门,我们应该用更开放的心去接纳,用更严谨的态度来编码。

关于作者

林建锋(sofish),目前供职于支付宝,前端架构组成员。主要负责支付宝样式库的构建,致力于样式兼容研究、新技术研究,以及样式框架的开发。个人网站: http://sofish.de

另外,感谢淘宝网小马(赵泽欣)、支付宝么么茶(吴振昊)对 InfoQ 中文站的大力支持。


感谢崔康对本文的审校。

给 InfoQ 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家加入到 InfoQ 中文站用户讨论组中与我们的编辑和其他读者朋友交流。

2010-12-20 00:003267

评论

发布
暂无评论
发现更多内容

机器学习算法评估指标—2D语义分割

做技术BP的文案Gou

学习 2D 评估标准 语义分割

架构师训练营学习总结——框架设计【第二周】

王海

极客大学架构师训练营

原创 | TDD工具集:JUnit、AssertJ和Mockito (二十一)编写测试-测试模板

编程道与术

Java 编程 TDD 单元测试 JUNI

游戏夜读 | 如何制作游戏?

game1night

Zookeeper-Access Control List(ACL)

CoderLi

Java zookeeper 源码分析 后端

常用运筹学软件整理

张利东

iPad配置OpenVPN客户端

wong

ipad OpenVPN

重学 Java 设计模式:实战外观模式「基于SpringBoot开发门面模式中间件,统一控制接口白名单场景」

小傅哥

设计模式 小傅哥 重构 代码质量 代码坏味道

下周要开始“卖桃者说”代班计划了

霍太稳@极客邦科技

日常

kubernetes简单入门(多图少字版)

绿星雪碧

Kubernetes 入门

Java | 原来 serialVersionUID 的用处在这里

YoungZY

Java

面向对象的三个基本特征(要素)

彭阿三

三要素 三个基本特征 封装、继承、多态

ZooKeeper 数据模型:节点的特性与应用

CoderLi

zookeeper 源码分析 数据模型 节点

小师妹学JavaIO之:MappedByteBuffer多大的文件我都装得下

程序那些事

Java io nio 小师妹 buffer

原创下载 | TDD工具集原创开源代码免费下载!

编程道与术

Java 开源 TDD 下载 代码

中电标协提出并归口:《政务APP评价指标》团体标准开启制订工作

博睿数据

App 标准化 中电标协 政务信息化 博睿宏远

知乎Matisse图片库在Android10上拍照,预览问题

三爻

android

副业月赚 10 万的程序员是如何做销售的?

非著名程序员

程序员 独立开发者 程序人生 提升认知

架构师训练营作业(第二周)

王海

极客大学架构师训练营

2020年5月云主机性能评测报告

博睿数据

云计算 服务器 公有云 机房 云主机

Java 序列化

CoderLi

Java 程序员 后端 序列化

JAVA 中的 CAS

犀利豆

Java 并发 CAS

钩陈/ 好中文作业:巴别塔

ZoomQuiet大妈

写作 大妈 是也乎 IMHO 蟒营®

如何让程序员变得没朋友

四猿外

程序员 个人感悟 技术人生 经验分享

自由是不是随心所欲?

Neco.W

个人成长 自由 控制

2w字长文!手撸一套 Java 基础面试题

cxuan

Java 后端 Java25周年

华硕灵珑II笔记本电脑——自由work不设限

最新动态

情绪管理 - ABC理论

石云升

情绪控制 ABC理论 费斯汀格法则

月薪 3W 的 Apple 微信编辑是这么发文章的 |如何发类似 Apple 微信公众号的文章效果

陈东泽 EuryChen

CSS 微信 大前端 apple 微信公众号

Zookeeper Watcher 流程分析(结合源码)

CoderLi

Java zookeeper 源码分析 后端 Watcher

IP 基础知识全家桶,45 张图一套带走

小林coding

计算机网络 计算机基础 IP

当HTML5来敲门_Java_陈达_InfoQ精选文章