html5应用,HTML5在豆瓣中的应用

作为处于发展阶段的新一代Web开发标准,HTML5正以其简洁的书写规范、良好的兼容性以及务实的原则为越来越多的网站所接受,这是WHATWG与 W3C共同努力的结果,作为标准的参与制订者,各浏览器厂商也在积极地为其提供支持。豆瓣一向热衷于新技术的探索和创新,前端团队在HTML5与CSS3 方面也有过很多尝试,从视觉效果到富媒体内容再到本地存储等等,其中一部分已经应用于线上产品,还有一部分以浏览器扩展、客户端、手持设备应用等形式服务于不同需求的用户。下面我就来简单介绍下:
在线上产品中的应用
豆瓣目前主要的流量来源依然是PC端的IE6,这是个颇具中国特色的无奈事实,但我们同时发现,豆瓣的Chrome和Firefox用户量在不断增长,特别是Chrome,目前已超过Firefox位居第二,这让我们有了充足的理由在产品中加入 HTML5 特性来提升用户体验。
劝导用户升级浏览器是个需要耐心的工作,一般用户并不会因只停留在单方游说层面的所谓更快、更安全、更符合标准做出任何反应,毕竟改变习惯是个痛苦的决定,引导方式不正确会让用户烦躁,甚至对标准浏览器反目成仇。那何不换个思路,先为一部分勇于尝试新鲜事物的用户提供更为友好的视觉、交互体验,在他们享用的同时自然会对身边使用过时浏览器的朋友产生一种更为直观的影响。这虽然没有游戏玩家在比对速度与3D特效后产生为电脑更新换代的念头来得迅猛,但毕竟是种积极而不唐突的方式。
豆瓣确实这么做了。细心留意可以发现,在近期的产品 UI 中,圆角、阴影、背景渐变均由 CSS3来完成,这也是视觉设计师与前端工程师加深交流的意义所在,使用CSS3来绘制界面节省了大量代码与图片,从而降低了工作量,也为公司节省了带宽,设计师在设计的同时也考虑了在无法识别 CSS3 的浏览器下元素对应的样式,让低端浏览器用户感受到另一种简约的风格。
表单验证方面,我们优先判断Form 2.0中新增元素的默认属性,比如type、placeholder、pattern、required等,脚本中对于类型、验证规则的处理只在不支持这些属性的浏览器中生效,让高级浏览器用户体会到原生的执行效率。在读书、电影条目方面我们也开始加入Microdata来实现强大的语义结构,让豆瓣不仅能够提供数据,还能提供数据定义。
HSL是一个全新的色彩空间,它可以方便地定义色彩的色相、亮度、饱和度,这种定义方式对称于亮与暗,更类似于人类感觉颜色的方式。豆瓣小站的风格是用户自定义的,比如导航栏标签的背景色,但标签悬停时的颜色是由系统生成的,生成的规则便是增加当前背景色的饱和度,使其颜色比默认状态下更深,这在传统RGB色彩空间中是不方便做到的。
除此之外,豆瓣还在桌面客户端、浏览器扩展、手机应用等方面大量使用了HTML5与CSS3特性,相较于传统开发方式,这种利用前端技术实现的跨平台跨设备的开发思路有其明显的优势:学习成本低(HTML & CSS & JS)、开发周期短(类似于网站前端开发)、代码复用性强(除了针对不同设备的接口调用外,界面、逻辑部分大多可以复用),这也得益于浏览器厂商、手机厂商对于 HTML5 的充分肯定与积极支持。当然,Webkit这个优质的浏览器引擎功不可没。
桌面客户端
OneRing是由豆瓣首席架构师洪强宁开发的一款跨平台桌面应用框架,它支持使用前端技术开发桌面客户端。即将发布的豆瓣电台桌面版(PC/Mac)便是基于OneRing 完成的,HTML5 新增的

最新评论

发表评论