摘要：经过艰难的等待，我合著的《论道HTML5》一书近期终于正式上市发售了。 它通过第一手的实践讲述了HTML5开发的各种知识和经验，是HTML5研究小组的重要产出之一。 本书的主要章节和介绍如下： 利用HTML5制作网站：讲述了HTML5在网站制作方面所带来的变化 用CSS3完善网站：讲述了CSS3的主要特性及如何用它来美化网站 划时代的Web API：讲述了众多的WebAPI，例如Drag & Drop、History、WebSocket等等。 Canvas2D：介绍了Canvas的众多操作，包括动画、事件感应、双缓冲等等。 HTML5和移动互联网开发：包...
阅读全文
摘要：写在前面的话：对于移动Web App来说，响应式设计相当的有价值，现在大家也正在逐渐的了解它。但是我认为它也有自己适用的范围，需要根据具体的场景来选择使用。正好最近业界对此也有一些声音和反思传递，例如我之前的一篇博文《用HTML5实现iPad应用无限平滑滚动》里就有提及。现在我翻译一篇相关文章，大家可以对此有更多的了解和判断。-- 宇捷媒介查询很伟大，但是... 对于Web开发人员来说，如果要通过对样式表进行微调来为不同尺寸设备的用户提供更好的体验，媒介查询（Media Queries）非常棒。媒介查询实质上可以根据屏幕的尺寸来自定义网站的CSS。在你深入这篇文章之前，可以更多的...
阅读全文
摘要：前言： LinkedIn 5月2日发布了新的iPad版本，它基于HTML5制作，在体验和界面上非常出色，在使用中可以发现它和原生应用基本没有任何差别。 关于这个版本，有两篇文章非常有价值，深入的介绍了Mobile Web App和HTML5移动开发的原理和方法。 第一篇《你绝对想不到的LinkedIn如何构建iPad新应用》主要包括三个方面的内容：LinkedIn and themobile web LinkedIn开始越来越多的采用HTML5来开发移动Web应用。Now, with more Node.js 大量使用了node.js。“Responsive design...
阅读全文
摘要：在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation，它将底层的方向传感器和运动传感器进行了高级封装，提供了DOM事件的支持。这个特性包括两种事件：1、 deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据，例如手机所处角度、方位、朝向等。2、 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。 使用它我们能够很容易的实现重力感应、指南针等有趣的功能，在手机上将非常有用。例如Opera H5体验版里的重力感应球示例就是通过监听DeviceOrientati...
阅读全文
摘要：最近几周Chrome的最新动态如下： Android平台上Chromium内容外壳的骨架上周已经开始落实，这是能够建立一个包含Chromium 的Androidapk文件的第一步。 WebKit已经支持网络信息API（Network InformationAPI），但是目前只适用于EFL版本的移植。 黑莓版本的移植增加了电池状态（BatteryStatus）和振动（Vibration）API的客户端实现。 通过<inputtype=color>控制的颜色选择对话框在Chromium里已经可用了。 经过相当长的一段在WebKit上的工作，现在Chromium已经可以...
阅读全文
摘要：本文可视为《用HTML5实现人脸识别》的进阶，在人脸识别的基础上，我们将使用纯Javascript来实现如下的功能：识别和标注人脸以及五官对人脸进行美容 从本文的内容中，你将意识到，Javascript能做的，能实现的，远远比你想象的多。演示一、实现1、人脸识别 Face.com有包括检测、识别在内的多个API接口，根据《用HTML5实现人脸识别》一文，我们已经可以实现图片上传，并得到检测的结果，结果如下：返回的参数 返回参数的详细解释参见http://developers.face.com/docs/api/return-values/，其中tags为多张照片的识别结果，...
阅读全文
摘要：注：今天HTML5小组沙龙《论道HTML5》分享时有朋友问到一个问题，getUserMedia是否会支持人脸识别，我当时的答案是这应该是应用来实现的功能，而不是规范要完成的工作。而我之前在网上看到过一篇关于getUserMedia和人脸识别的相关文章，觉得很有趣，正好趁这个机会分享给大家。 译自：http://www.raymondcamden.com/index.cfm/2012/4/6/Face-detection-with-getUserMedia 转载请注明出处：蒋宇捷的博客 “现代Web”不断发展出不少有趣的API，但你并不会在大多数项目中使用到所有的内容。例...
阅读全文
摘要：我经常看到有很多人询问HTML5某个特性当前各浏览器的支持情况。的确，因为HTML5内容庞大，特性众多，而浏览器的支持情况又混杂不一，随时都有可能变化，所以了解起来比较困难。在这里，我汇总了一些常用的网站供前端开发者了解HTML5浏览器的支持情况。浏览器支持情况统计 When Can IUse：图表经常更新，展示了HTML5、CSS3、SVG等浏览器的支持情况。在这里可以了解到很多新知识，例如Firefox和Opera支持PNG动画；另外重要的一点是可以了解到各浏览器是否支持某个HTML特性以及准备什么时候支持。 HTML5 Readiness：看起来很酷，但是信息较少。 Mobile...
阅读全文
摘要：HTML5小组的第12次活动，本期沙龙围绕5月出版的《论道HTML5》重点章节内容展开，由我和另外一位作者@秀野堂主现场分享。欢迎大家参加，下面是活动的详细信息。活动介绍：时间：2012年04月21日 13:30-18:00地址：东直门南大街3号国华投资大厦11层1105室（ThoughtWorks北京办公室）地图:http://j.map.baidu.com/6vTVd路线：地铁2号线东直门站D西南口出主题：本期沙龙围绕小组5月出版的第一本本土HTML5书籍《论道HTML5》重点章节内容培训分享。由作者@秀野堂主 @蒋宇捷现场诠释精彩。参考内容：1、【《论道HTML5》作者访谈】：ht...
阅读全文
摘要：支持的浏览器：难度：中等注意：本文讨论的API尚未最终确定，仍在不断变化。请在自己的项目中谨慎使用。介绍 音频在很大程度上使得多媒体体验非常引人注目。如果你曾经尝试在关闭声音的情况下看电影，你就很可能已经注意到了这一点。 游戏也不例外！我最喜爱的视频游戏的回忆里包含了音乐和声效。在二十年后的今天，大多情况下，当玩我最爱的游戏时，我仍然不能把“塞尔达”里近藤浩二的乐曲和马特大气的暗黑配乐从我的头脑里驱逐掉。这同样适用于音效，例如魔兽里单位实时点击的响应，以及任天堂的经典例子。 游戏的音频提出了一些有趣的挑战。要创建令人着迷的游戏音乐，设计人员需要调节潜在的不可预知的状态。实际上，部...
阅读全文
摘要：我在Chrome的最新动态里提到了Typed Arrays（Typed Array，类型数组）这个概念，可能对很多人来说非常陌生，那么它是什么，又有什么用途呢？之前的问题 Web应用程序变得越来越强大，例如新增了音视频处理、WebSocket等多个功能特性。毫无疑问，如果Javascript能够快速方便的操作原始二进制数据会相当的有用。过去，我们必须要把原始数据当作字符串来处理，并且使用charCodeAt方法来从数据缓冲区中读取字节。 但是这种方法需要多次转换数据（尤其在二进制数据不是字节格式的数据时，例如32位整数或者浮点数），所以非常慢而且容易出错。 Javascri...
阅读全文
摘要：Chromium版本库上周开发的重点包括许多表单相关的变化、电池状态API（注：电池状态即Battery Status API实际上是Device API里System Information API的一个组成部分）以及性能提升。 所有无符号和浮点数的类型数组（注：它使得Javascript可以支持二进制数据，可以看看这篇文章）现在在开发者工具内将会显示为普通数组。获取堆的快照现在会比之前快12％，另外准备在脚本面板中支持片段的工作也正在进行中。Sneak-peak: 使用颜色输入来创建平台的本地选择器 HTML5的meter和progress元素不再和表单相关，文档之外的单...
阅读全文
摘要：今天百度开发者大会，移动互联网分论坛，我的主题演讲《用HTML5新特性开发移动App》PPT分享如下。 完整PPT可在Slideshare观看，或者在百度开放云平台上下载到。
阅读全文
摘要：Chromium最近实现了一个HTML5的新特性：范围样式，又叫做<style scoped>。开发者可以通过为根元素设定一个添加了scoped属性的style标签，来限制样式只作用于style标签的子元素上。这会限制样式只影响style标签的父元素和它所有的后代元素。例子 下面是一个使用了标准样式的简单页面：<html><body> <div>a div! <span>a span!</span></div> <div> <style> div { color: red; } span
阅读全文
摘要：著名移动云平台公司Appcelerator刚发布了2012年Q1移动开发者调查报告，其中值得关注的几个地方为： 1、整个报告的关键句为“The Google and FacebookBattle Moves to Mobile While HTML5 Gains Speed”，意思为当HTML5开始加速的时候，Google和Facebook的战场已经转移到了移送设备上。 2、 报告中对比了Native App、Hybrid App和Web App三种形式的App。 3、 HTML5 Mobile Web已经上升为开发者最关注的开发平台第四位，远高于WP7、Symbian等平...
阅读全文
摘要：在HTML5规范的支持下，WebApp在手机上拍照已经成为可能。在下面，我将讲解Web App如何用手机进行拍照，显示在页面上并上传到服务器。1、 视频流 HTML5 The Media Capture API提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流。我们需要做的是添加一个HTML5的Video标签，并将从摄像头获得视频作为这个标签的输入来源（请注意目前仅Chrome和Opera支持getUserMedia。补充：请使用Opera支持HTML5的新版本，如果是Chrome，版本需为Chrome 18.0.1008+，并使用about:...
阅读全文
摘要：在HTML5中，Device API相关内容众多，而且结构比较复杂，内容有所重叠，大家在使用时可能会遇到许多问题，下面我针对这些问题谈一下个人的理解。1、The Media CaptureAPI VS System Information API，两者都可以访问摄像头和话筒，有什么区别？ 背景：The Media Capture API定义了一个高级别的API来访问设备的摄像头和话筒，SystemInformation API的输入设备展示了系统的输入设备，例如鼠标、键盘、摄像头和话筒。 答案：The Media CaptureAPI定义的API提供了对设备的音频、图像和...
阅读全文
摘要：随着移动站点的发展和普及，毫无疑问CodeCanyon的移动应用集合有了巨大的增长。从iPhone到Android，开发者已经贡献了一些令人惊艳的移动站点开发工具。这里快速列出了一些市场上所销售的顶级移动应用和工具。你可以试用它们并为你下一个移动站点获得灵感。1、创建自己的应用程序（无需任何编程技能） 不需编码就能创建你自己的iPhone/ iPod Touch应用！让客户在苹果AppStore找到你并且挖掘你沟通的潜力。2、DOLPHIN- XML的iPad / iPhone幻灯片和电子书模板 Dolphin，XML驱动的App模板，兼容iPad和iPhone，拥有...
阅读全文
摘要：译自：http://www.romancortes.com/blog/1k-rose/转载请标明作者和出处：http://blog.csdn.net/hfahe 我曾参与js1k爱情主题的第四次活动（译者注：关于有趣的js1k，可以看看我上一篇博文《JS1k比赛与3D玫瑰》）。我所提交的是一个静态图像，由程序生成的三维玫瑰。你可以在这里看到它。 它是通过显式分段三维曲面的蒙特卡洛采样所实现的。我要在这篇文章中尝试解释所有内容。关于蒙特卡罗方法的简短说明 蒙特卡罗方法是令人难以置信的强大工具。我一直在使用它们来实现很多功能优化和采样的问题。相比起设计和编写算法，如果你有更多CPU时...
阅读全文
摘要：也许它最开始只是作为一件好玩的事，但一年一度的JS1K比赛现在已经不再只是一个玩笑。今年的比赛已经开展得如火如荼，并且因为用小于1K的JavaScript脚本渲染的3D玫瑰的出现而显得更加壮观。 JS1K大赛旨在找寻互联网上最好的JavaScript创意，只有一个小条件 - 使用的代码必须小于1K。这可能听起来很疯狂，因为一些JavaScript框架 – 只是框架本身！- 代码量就超过了100k，但是从几年前开始时，JS1K的尝试就给人留下了深刻的印象。 今年最令人瞠目结舌的努力之一是开发者罗曼科尔特斯的作品3D渲染的玫瑰。依靠蒙特卡罗方法以保持代码的大小，科尔特斯的代码为以爱...
阅读全文
