慢慢总结，这一个月内肯定会碰到许多问题。HTML5除了新表单元素外我也没实际接触过这些新特性，这时候必须要高呼Google万岁。

10月17日

DeviceOrientationEvent，iPhone 4支持iPad 1代不支持；DeviceMotionEvent则是两种都支持。问了下对这块比较熟悉的大城小胖，说iPad 1代没有陀螺仪。这会略有些麻烦，DeviceOrientationEvent本身获取到的就是偏转角度值，直接赋值给webkitTransform的rotate即可。而DeviceMotionEvent返回的则是带有重力系数的百分数，需要做处理转化成角度，比如var alpha = Math.round(((eventData.accelerationIncludingGravity.x) / 9.81) *-90);

http://www.html5rocks.com/en/tutorials/device/orientation/devicemotionsample.html 源代码中有注释。

有个问题是，竖屏左右旋转设备对应的角度来源是alpha参数，如果不设置iPad缩屏，由竖屏转到横屏，角度来源变成了beta参数

10月18日

深深的感觉到瘸腿前端诸多不便。前几年做前端时大部分时间写CSS，为赶进度JS需求基本用JQuery插件调参数实现，原生JS没去碰，然后这半年更是没做前端了，发现现在连window绑定多个事件都要翻书了。OOP更是无从谈起。

本打算写个小App调用HTML文件，这样屏幕翻转及是否缩屏直接在系统级控制方便些。没想客户给了张样图希望明天就出个Demo，纯网页就行，只好先放弃App。开了PS一量表盘竟然不是同心圆啊我去⋯⋯算旋转中心点很是纠结了下。

开始和团队成员讨论和App端的接口问题：

1. 判断是否禁止屏幕翻转
2. 如果不禁止的话，四个方向对应的变量名，纯粹为了扩展考虑，比如四个方向展示四张不同的网页？
3. 四方向是否需要单独写四个JS文件模块化操作
4. JS和图片是放服务器上由App下载内部传递给HTML，还是直接写进HTML

10月24日

瞎折腾了几天。纪录一些tips，慢慢整理

1. iOS里的safari，也需要写CSS Reset，下午的实际经历是至少body标签有默认边距
2. onorientationchange事件，在纯粹的HTML网页里通过iOS上的Safari浏览没问题，内嵌到App中会失效！
3. 在viewController里的shouldAutorotateToInterfaceOrientation中设置NO，这时候通过[[UIApplication sharedApplication] statusBarOrientation]是否等于UIInterfaceOrientation已经不能正确判断方向，或者说，这时候需要判断的是设备的物理朝向，而不是屏幕方向。

10月26日

收益

出于我自己严重偏重构向以及工具控的缘故，受益最大的当属何涛的《优酷HTML5视频应用》和hlb的《SCSS & Compass》以及魏子钧的《HTML5游戏与移动平台》。hax的台风也很OK，他的《HTML5兼容性实战》不错。黄后锦的《Web Forms 2.0》之前多少从其他渠道了解过，所以只是过了一遍。

总的来说，目前的行业会议仍旧是老问题——众口难调。第一天不停听到抱怨说太多过于理论化的东西，但是实际上，个人感觉在这种会议上去讲语法规则是一种浪费。细节技术方面的东西，我更喜欢三种：

1. 总结性的内容，比如《优酷HTML5视频应用》里提到的video的几种控件在移动版safari中不可用，这方面的东西去年自己项目中很是头疼了一把；
2. “不可为”的内容，比如《Web Forms 2.0》里没有准备的HTML5新增的各种类型input在不同浏览器中的支持情况列表、《Canvas 2D 应用的设计思路》里提到的超出canvas画布的图片会不解析；
3. 技巧类的内容，比如hax的《HTML5兼容性实战》中提到的增加IE8的属性判断

而技术细节外，类似hlb的介绍新工具的内容一直比较受青睐。

梳理

SASS

之前在MBP上试用过LESS，语法对我来说够用了，外加MAC平台下有个免费的less.app感觉还不错，就没去查阅SASS的资料。今天听下来，SASS的功能更强大，可惜推上问hlb 要他们出的Compass.app无果，改天7美刀支持下。

我最初看到这类工具心动仅仅是因为解决了模块复用、颜色管理及语义化命名的问题，倒没去想内嵌浏览器探测等高级功能。因为我比较喜欢尽可能少的用浏览器HACK去解决问题，平时常用的也不过button类型的input的外观处理，以及clearfix的_zoom:1。

顾虑也有，LESS现在可以直接通过head区调用个JS来渲染.less文件而放弃.css文件，但是30多K的JS文件不算小，性能洁癖的我始终不敢在正式项目上使用。采用工具生成CSS文件的话，还没有做过全面的测试，不清楚生成的CSS文件质量如何，比如容器放置等比大小背景图我会省略掉no-repeat等参数来缩减CSS体积，这方面不知道这两种工具的表现如何。

video应用

去年碰到的移动版safari不支持的属性没记录下来，等何涛PPT放出了。按照去年的经验来说，video标签直接引用视频，两个问题：

• 最大的问题在视频加载速度上，比如拖动进度条后的快速下载及页面加载后的预下载。去年这时候看apple官网的都是卡的要死，而几个大网站号称的支持HTML5的视频只有3到4M内的小视频可以流畅播放。这个不知道什么时候有平民化的解决方案，否则小网站应用堪忧。
• 混乱的视频格式需要多种编码压缩，去年找H.264的工具就折腾了许久，apple自家带输出功能的quicktime是付费的。记得当时我是找视频采集行业的朋友给了个大型软件才搞定。

heading content元素

听Jeremy Keith讲到页面中可以全用h1时想起，去年尝试重构博客皮肤时翻过WHATWG关于heading content和sectioning content元素的文档并记录过heading content笔记。WHATWG提到过新的Hx系列元素的层级判断，有个比较重要的概念是根据文档流里Hx出现的位置来判定，而不仅仅是h1-h6的顺序。这一块比较繁杂，记得当时有个网站可以在线生成指定页面的层级示意，可惜这会儿反倒找不到了。

另外就是，SEO方面，不知道搜索引擎什么时候能跟上这种全写h1的权重判断规则，所以商业站要这么用的话需要考虑风险。

web forms

找到一份比较全面的HTML5 web forms浏览器支持列表，根据评论推断10年5月前发表。同时作者给出的有示例页面

更新：PPK大神整理的The new input types ,11年3月9号出品。好人啊！

其他

附上一篇Nicholas C. Zakas的文章 《Using HTML5 semantic elements today》。今天Jeremy Keith讲不支持自定义HTML标签，但是Zakas总结了个namespace hack蛮有意思，可以参考下。