蒋宇捷的专栏

最近几周Chrome的最新动态如下：        Android平台上Chromium内容外壳的骨架上周已经开始落实，这是能够建立一个包含Chromium 的Android apk文件的第一步。        WebKit已经支持网络信息API（Network InformationAPI），但是目前只适用于EFL版本的移植。        黑莓版本的移植增加了电池状态（BatteryStatu

9月9日，优快云和《程序员》主办的2012中国软件开发者大会将在北京国家会议中心举行。届时我将分享《关注HTML5安全》的Topic，希望能现场和大家交流。        摘要：随着HTML5的发展和普及，HTML5的安全将成为一个重要的问题。一方面HTML5对HTML4的安全性有很大改进，但是它的新功能也会带来攻击的危险，例如新的标签、CORS、WebSQL、WebWorker以及WebSoc

现代浏览器支持拖放本地文件到浏览器上，应用可以进行文件的编辑、上传等操作，但是之前并不支持文件夹拖放。但是从最新的Chrome 21开发版开始，这个功能已经得到了支持。        文件拖放        之前文件拖放的代码如下： var dropzone = document.getElementById('dropzone');dropzone.ondrop = function(e)

在我之前《HTML5图像适配介绍》的一文里，提到了响应式图片的需求以及一些讨论方案，而目前W3C关于响应式图片已经有了最新进展，此规范上上周已经作为编辑草案出现，到今天还在更新中。        未来的格式很可能会如下所示，来适配不同的屏幕分辨率。         文档的地址请点击这里。

一、WebStorage简介        HTML5支持WebStorage，开发者可以为应用创建本地存储，存储一些有用的信息。例如LocalStorage可以长期存储，而且存放空间很大，一般是5M，极大的解决了之前只能用Cookie来存储数据的容量小、存取不便、容易被清除的问题。这个功能为客户端提供了极大的灵活性。二、攻击方式        LocalStorage的API都是通过Javasc

一、从SOP到CORS        SOP就是Same Origin Policy同源策略，指一个域的文档或脚本，不能获取或修改另一个域的文档的属性。也就是Ajax不能跨域访问，我们之前的Web资源访问的根本策略都是建立在SOP上的。它导致很多web开发者很痛苦，后来搞出很多跨域方案，比如JSONP和flash socket。如下图所示：        后来出现了CORS-CrossOrigin

在今天的2012中国软件开发者大会上，我做了名为《关注HTML5安全》的主题演讲。我个人认为，随着HTML5的普及和发展，HTML5的安全会成为近期带来的严重问题。之所以大家还没有感受到的原因是什么？1、目前HTML5应用还不普及 2、暂时还没有吸引攻击者的关注。        演讲摘要如下（来自优快云专题）：        -----------        我首先介绍了从HTML到HTML

W3C最新公布了和移动WebApp有关的标准当前的状态及路线图，它汇总了和移动Web App开发相关的所有HTML5和CSS3标准以及他们当前的状态和未来路线，对使用HTML5进行移动Web App开发的开发者有着极大的指导意义。文档地址为：http://www.w3.org/2012/08/mobile-web-app-state/。        下面是该文档的主要内容。        ---

一、WebSQL安全风险简介        数据库安全一直是后端人员广泛关注和需要预防的问题。但是自从HTML5引入本地数据库和WebSQL之后，前端开发对于数据库的安全也必须要有所了解和警惕。WebSQL的安全问题通常表现为两个部分：       第一种是SQL注入：和本地数据库一样，攻击者可以通过SQL注入点来进行数据库攻击。       另外一方面，如果Web App有XSS漏洞，那么本地数

Goole在Chrome的最新beta版本中添加了关键的WebRTC框架，以此来支持第三方开发者创建视频聊天程序，而不需要下载任何插件。这项技术可能有一天会在Chrome里支持原生的Goole Hangouts视频群聊。        Google的工程师在Chromium的博客上写到：        Chrome现在嵌入了PeerConnectionAPI，允许开发者创建实时的音视频Web Ap

现在移动互联网日新月异，各种移动设备层出不穷，在iPhone 4上最先出现视网膜屏幕后，这种技术快速的被大多数智能移动设备所采用，可以遇见将会快速的普及开来。        但是这也对我们的Web提出了更高的要求，因为我们需要适配更为复杂的UI方案。        适配图像将会是响应式网络设计下一个需要解决的问题，因为我们针对不同分辨率的屏幕，例如iPhone 4s和iMac，最佳的方案是分别提供

前言：我曾在之前的分享里提到CSS3 Region（区域模块）的重要作用：实现更复杂的排版效果，实现更丰富的富文本体验。下文就是和此模块相关的实际应用，可以看到未来它将发挥出巨大的作用。        这一天终于到来：你开始对大段滚动的文字感到厌倦，并正在寻找一种新的格式，更加优雅，更加紧凑。它可以把长长的滚动条切分为整齐的页面并结合在一起。我把这个发明叫做“书”。        利用CSS3 R

前言：像CORS对于现代前端这么重要的技术在国内基本上居然很少有人使用和提及，在百度或者Google上搜索CORS，搜到的中文文章基本都是另外一种卫星定位技术CORS的介绍，让我等前端同学情何以堪（对比起来，用Google搜到的国外文章，基本都是跨域资源共享的介绍，说明了前端技术在国内外环境和发展的巨大差距）。        我之前《用HTML5实现人脸识别》这篇文章中提到了“Face.com实现

在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation，它将底层的方向传感器和运动传感器进行了高级封装，提供了DOM事件的支持。这个特性包括两种事件：1、  deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据，例如手机所处角度、方位、朝向等。2、  deviceMotion：封装了运动传感器数据的事件，可以获取手机运

HTML5小组的第12次活动，本期沙龙围绕5月出版的《论道HTML5》重点章节内容展开，由我和另外一位作者@秀野堂主现场分享。欢迎大家参加，下面是活动的详细信息。活动介绍：时间：2012年04月21日 13:30-18:00地址：东直门南大街3号国华投资大厦11层1105室（ThoughtWorks北京办公室）地图:http://j.map.baidu.com/6vTVd路线：地铁2号线 东直门站

我经常看到有很多人询问HTML5某个特性当前各浏览器的支持情况。的确，因为HTML5内容庞大，特性众多，而浏览器的支持情况又混杂不一，随时都有可能变化，所以了解起来比较困难。在这里，我汇总了一些常用的网站供前端开发者了解HTML5浏览器的支持情况。浏览器支持情况统计         When Can IUse：图表经常更新，展示了HTML5、CSS3、SVG等浏览器的支持情况。在这里可以了解到很多

注：今天HTML5小组沙龙《论道HTML5》分享时有朋友问到一个问题，getUserMedia是否会支持人脸识别，我当时的答案是这应该是应用来实现的功能，而不是规范要完成的工作。而我之前在网上看到过一篇关于getUserMedia和人脸识别的相关文章，觉得很有趣，正好趁这个机会分享给大家。        译自：http://www.raymondcamden.com/index.cfm/2012/

经过艰难的等待，我合著的《论道HTML5》一书近期终于正式上市发售了。          它通过第一手的实践讲述了HTML5开发的各种知识和经验，是HTML5研究小组的重要产出之一。         本书的主要章节和介绍如下：         利用HTML5制作网站：讲述了HTML5在网站制作方面所带来的变化         用CSS3完善网站：讲述了CSS3的主要特性及如何用它来美化网站

教程细节·      语言: JavaScript,HTML, SVG·      难度: 中等·      预计阅读时间: 30 分钟         SVG-可缩放矢量图形 ，是一个XML风格标记驱动的矢量图形的浏览器渲染引擎。除了IE 9.0和Android V3之前版本外的所有浏览器都支持SVG。Canvas也有同样的支持情况，所以问题往往表现为：我们应该使用哪种方案？        今天

在3月23日的百度开发者大会上，百度推出了开放云计算平台来帮助开发者构建分布式网络应用。它包括云存储、云环境、关系服务、消息服务等组成部分，开发者可以利用云平台方便的编写分布式网络应用，无需考虑集群扩容、负载均衡等问题。         百度开放云平台的优点包括：1、  容量大：云存储支持最高2T的单文件数据容量；个人云存储用户存储初始空间

前言：HTML5出现后，网络安全更加受到广泛的关注。Web对于网络安全有哪些改进？我们如何来面对越来越危险的网络欺诈和攻击？下面的文章谈到了W3C对于这个问题的最新解决方案。未来有机会的话，我会针对XSS、P3P、同源策略、CORS（跨域资源共享）和CSP进行关于HTML5内容安全的现场分享。        ------------------------华丽的分界线        注意：本文所讨

在HTML5中，Device API相关内容众多，而且结构比较复杂，内容有所重叠，大家在使用时可能会遇到许多问题，下面我针对这些问题谈一下个人的理解。1、The Media CaptureAPI VS System Information API，两者都可以访问摄像头和话筒，有什么区别？       背景：The Media Capture API定义了一个高级别的API来访问设备的摄像头和话筒，

下面我们要讲到一类的HTML5安全问题，也就是劫持的问题。         一、ClickJacking-点击劫持        这种攻击方式正变得越来越普遍。被攻击的页面作为iframe，用Mask的方式设置为透明放在上层，恶意代码偷偷地放在后面的页面中，使得一个页面看起来似乎是安全的，然后诱骗用户点击网页上的内容，达到窃取用户信息或者劫持用户操作的目的。下图中，欺诈的页面放置在下层，被攻击的银

HTML5里有许多协议、模式和API，可能成为攻击者的攻击途径。         一、registerProtocolHandler：信息泄漏        HTML5允许某些协议和schema注册为新的特性。例如下面的语句可以注册一个email handler。navigator.registerProtocolHandler(“mailto”,“http://www.f.com/?uri=%s

好吧，好久没有聊CSS3了，今天我们来讲讲CSS3的最新特性。         在Chrome最新的动态里，添加了对CSS.supports()方法的支持，而许多关注浏览器发展的朋友也可能已经了解到Firefox和Opera开始支持@supports规则。CSS.supports()和@supports看起来非常相似，它们之间有什么关联，它们的前世今生究竟是怎么一回事呢？         为了应付

前言        迪斯尼《Find Your Way to OZ》这个贴近地气的游戏我在最新一期《程序员》杂志的《从HTML5移动应用现状谈发展趋势》这篇文章里有所提及，它借用了近期上映的《魔境仙踪》电影的设定（设定来自于经典故事《绿野仙踪》，看过这个电影的同学们会深有感触），构建了一个等同的宏大游戏世界。同时迪斯尼又和谷歌合作，把它作为Chrome浏览器性能和HTML5技术的一个show ca

（接上文）桌面游戏通常创建于一个核心的物理引擎。因此，要在3D世界中模拟一个柔软的物体，需要一个完整的物理模拟器，并且建立一种可信的行为。        WebGL和JavaScript还不能奢华到可以运行一个完全成熟的物理模拟器。因此，在这个游戏中我们必须找到一种方式来创建风的效果。        我们在3D模型中为每一个对象嵌入“风敏度”的信息。3D模型的每个顶点有一个“风属性”，指定顶点应该

作者注：此文章原为2013年5月的《程序员》杂志所做，现刊登于此，以飨读者。从HTML5移动应用现状谈发展趋势        时光如梭，自2008年HTML5诞生以来已经过去了5年的时间，作为新一代的Web标准，它自问世以来就受到方方面面的强烈关注，也引起了许多争议，支持者因其开放强大的特点而鼓吹它的美好前景，质疑者因其迟迟不能很好落地而怀疑它的实际作用。现在我们从现状入手，以提问的方式针对HTM

我的前言        HTML5的API体系是重要知识，但是如何写出更高效的Web App对于从程序员进阶为高级程序员来说更为重要。技很重要，但是容易学会，术才是茫茫人海中鹤立鸡群，安生立命之本。        码农们容易吗？是的，我们必须要不断努力和学习才能进化为高级码农乃至顶级码农。        Web App的性能优化非常重要，之前我有过一篇LinkedIn的相关文章《用HTML5实现i

写在前面的话：对于移动Web App来说，响应式设计相当的有价值，现在大家也正在逐渐的了解它。但是我认为它也有自己适用的范围，需要根据具体的场景来选择使用。正好最近业界对此也有一些声音和反思传递，例如我之前的一篇博文《用HTML5实现iPad应用无限平滑滚动》里就有提及。现在我翻译一篇相关文章，大家可以对此有更多的了解和判断。-- 宇捷媒介查询很伟大，但是...        对于Web开发人员来

前言：        LinkedIn 5月2日发布了新的iPad版本，它基于HTML5制作，在体验和界面上非常出色，在使用中可以发现它和原生应用基本没有任何差别。        关于这个版本，有两篇文章非常有价值，深入的介绍了Mobile Web App和HTML5移动开发的原理和方法。        第一篇《你绝对想不到的LinkedIn如何构建iPad新应用》主要包括三个方面的内容：Link

我在Chrome的最新动态里提到了Typed Arrays（Typed Array，类型数组）这个概念，可能对很多人来说非常陌生，那么它是什么，又有什么用途呢？之前的问题        Web应用程序变得越来越强大，例如新增了音视频处理、WebSocket等多个功能特性。毫无疑问，如果Javascript能够快速方便的操作原始二进制数据会相当的有用。过去，我们必须要把原始数据当作字符串来处理，并且

前言：Chirp在iPhone上掀起了有声传输文件的序幕，我们再也不需要彩信、蓝牙配对、IM来传送数据。它通过“叽叽喳喳”的小鸟叫声来分享数据，简单有趣，而且可以快速的实现一对多的分享。         此外支付宝曾经试推过“声波支付”，利用手机发送超声波至终端作为交易密码进一步完成交易。然而支付宝的技术目前只是使用在了支付上，而需要可接受声波支付的特定售货机方可使用。        《Advan

本文介绍了一种时尚的网站设计方法，以及如何由浅入深的通过HTML5和浏览器渲染机制来构建高性能的站点。        文中多处涉及浏览器重绘和性能优化的原理，也是《Web滚动性能优化实战》的拓展和延续，难度上属于中级进阶，请在阅读前请先看看这篇文章。        介绍        视差网站最近风靡一时，只需看看下面这些站点：        Old Pulteney Row to the Pol

春节将至，先祝大家新年快乐。我在这段时间内将会抽出时间由浅入深的发表几篇CSS3、HTML5最新的技术文章，涉及原理、实现、应用的几个层面，代表了国外HTML5最新发展的趋势，希望能给大家带来新的启迪。         下面的这篇文章非常简单，是响应式设计的一个具体实现。我希望能带给刚入门的朋友一些思路和帮助。         ……………………………………✄……………………………………

一、WebWorker介绍        由于Javascript是单线程执行的，在执行过程中浏览器不能执行其它Javascript脚本，UI渲染线程也会被挂起，从而导致浏览器进入僵死状态。使用WebWorker可以将计算过程放入一个新线程里去执行将避免这种情况的出现。这样我们可以同时执行多个JS任务而不会阻塞浏览器，非常适合异步交互和大规模计算，这在以前是很难做到的。        下面一张图形

HTML5去掉了很多过时的标签，例如和，同时又引入了许多有趣的新标签，例如和标签可以允许动态的加载音频和视频。         HTML5引入的新标签包括、、、、等等，而这些标签又有一些有趣的属性，例如poster、autofocus、onerror、formaction、oninput，这些属性都可以用来执行javascript。这会导致XSS和CSRF跨域请求伪造。         下面我们要

在iOS的Safari浏览器上播放缓存的音频供离线使用一直是一个挑战，已经被证明是不可能完成的任务 。但随着网络音频API的发展（仅支持WebKit内核），现在终于实现了-不过还需要经过一些步骤。        坏消息是我们还无法使用应用缓存缓存MP3文件，然后简单地使用XmlHttpRequest进行加载。iOS6上的Safari浏览器可以缓存MP3，但是会拒绝播放它。        但是这不代

正如我们上周报道的一样，最近有很多事情发生在我们熟知的WebRTC上。        其中一个是：基于WebRTC的屏幕共享。        这是屏幕录像：youtube.com/watch?v=tD0QtBUZsF4。        这是代码：github.com/samdutton/rtcshare。        从本质上讲，我们使用RTCPeerConnection和chrome.tabC

注：我昨天刚发了一篇关于WebRTC的文章，但是WebRTC的变化如此之大，让我不得不再用一篇文章的篇幅从另外一个方面详细阐述它带给我们的变化。Firefox、Opera、Android、iOS平台的广泛支持会让它可以立即落地，实现很多有趣的视频功能和应用。你准备好使用它了吗？        关键词：视频 RTCPeerConnection getUserMedia WebRTC 多媒体