示例如下图： 可直接访问：http://easymorse.googlecode.com/svn/tags/WebBook-0.2/test.html，需要注意只能跑在有webkit浏览器的触摸设备上。 为什么会抖动 在iPad上，如果用传统的改变html元素的左上顶点坐标（left、top），会有可被用户察觉的抖动现象。 这是因为，浏览器不确定是否要使用GPU硬件加速，也许这个操作只是移动一个元素到某个位置。 这种指定顶点的做法，在鼠标操作设备上不会出现抖动现象，是因为鼠标的轨迹是连续的。而触摸设备的手指移动是离散的。 另外，浏览器是假定可用可不用硬件加速的地方，就不用硬件加速，这是因为，对于移动设备来说，硬件加速更消耗电池。 使用CSS3的translate，浏览器将使用硬件加速，手指移动的坐标离散量，会自动形成动画，这样看起来就不会抖动了。 另外，translate的另一个好处是和css布局无关，坐标是针对元素自己的，也就是从(0,0)开始。 发送文章为PDF
以前界面中的阴影，需要依赖作图工具生成带阴影的底图。使用css3可以很好的解决这个问题。 比如，这是个简单的代码： <body> <div id=‘content’></div> </body> 如果没有使用css3阴影，比如css如下： #content{ height: 200px; width: 400px; margin: 10px auto; background: rgba(88,88,88,0.5); } 那么效果类似这样： 发送文章为PDF
上文创建Chrome Web app编写了一个hosted app。如果在开发中测试，hosted app就很不方便，需要编写代码部署到服务器端才能测试和调试。 因此，本文尝试编写Packaged app，这样可以很容易的在本地调试和测试，直到需要和服务器端交互的时候再修改为hosted app。 编写了一个最简单的应用，安装后类似这样： 点击该应用的效果： 可以看到，地址栏是空的。 发送文章为PDF
编写了一个Chrome下使用的Web app。效果如下： 点击这个应用，就可访问我的博客。 看起来这很类似一个书签。其实有它特殊的好处，直接访问网站，程序无法自动获取HTML5的权限，比如存储限制。安装应用，相当于安装了一个配置文件，浏览器将打开必要的权限。 如果你也使用Chrome，可以通过这里下载安装。 开发这样的应用并不难，过程类似以前开发Chrome扩展（编写最简单的chrome扩展）。 日志引用编写Packaged App 发送文章为PDF
安装了IE9BETA，做了一下HTML5测试： 效果还是不理想。 发送文章为PDF
尝试过很多种图表生成方案，比较有代表性的： 服务器端生成图表方案，比如通过jfreechart； 使用云计算的方式，比如通过google提供的chart api，可以参见使用google chart生成动态图； 使用flash的免费开源应用，比如fusioncharts，在浏览器端生成图表，效果可见：http://www.fusioncharts.com/free/demos/ 使用html5的canvas api在浏览器端生成图表。 其中前两者是通过服务器端生成的，后两者是通过客户端生成的。 服务器端的缺点是： 图表缺乏交互性，比如折线图，鼠标放在某个点上，希望看到该点的值，就做不到； 带宽和流量问题，比如通过手机访问，手机是按流量计费的，对服务器端也会有影响，当大规模访问的时候挤占服务器端带宽； 服务器端性能，当大规模访问的时候服务器端生成图表性能下降。 发送文章为PDF
html5提供geolocation api，用于获取浏览器所处地理位置相关信息。 通过pc上面的chrome/firefox访问获得的经纬度，发现还是很准的。 获得经纬度，可以通过： http://maps.google.com/ 在输入框中输入：纬度,精度，就可以得到对应的卫星图或者地图。 代码编写也很容易，这里使用了gwt，其实即使不使用gwt，写javascript也很简单。 这里使用的gwt模块，文档地址在： http://code.google.com/p/gwt-mobile-webkit/wiki/GeolocationApi 下载地址： http://code.google.com/p/gwt-mobile-webkit/downloads/list 选择gwt-html5-geolocation-xxx.tar.gz。解压缩，将其中的.jar文件部署到gwt项目的classpath下。 在模块的配置文件中，增加： <inherits name="com.google.code.gwt.geolocation.Html5Geolocation" /> 代码： public void onModuleLoad() { if (Geolocation.isSupported()) { Geolocation geo = Geolocation.getGeolocation(); if (geo != null) { geo.getCurrentPosition(new PositionCallback() { @Override public void onFailure(PositionError error) { Window.alert("error"); } @Override [...]
除非看的电影是1927年以前的，你希望视频带一个音频track。和视频编码类似，音频编码也有有损编码和无损编码之分。无损音频很大，不适合在web中使用，因此以下只关注有损编码。 实际上，研究在web视频领域的音频编码，可能范围还要在缩小一些。音频用于更广泛的领域，和视频比较来说，比如电话，这是一个专门的领域，针对语音音频的编码优化。你不可能对音乐cd使用这样的编码，那么结果听起来可能像4岁的孩子在唱歌。但是你可以将这种编码用于数字电话交换机（PBX），因为带宽很宝贵，该编码可有效的压缩人类声音。但是这种编码却反通用的支持，比如浏览器自身或者第三方插件，因此下文只讨论通用的有损编码格式。 如以前提及的那样，当你提及“看视频”的时候，你的电脑正在做一下事情： 解释容器格式； 解码视频流； 解码音频流并发送声音到音箱。 音频编码解码，就是针对音频流的处理。有很多技术用于减少音频流的数据量。减少的数据往往是人听觉不到的部分。 一个音频有，而视频没有的概念是，频道（channel）。发送声音到你的音箱，对吧？那好，你有多少音箱呢？也许只有两个，一个左边的，一个右边的。或者比如有三个，左、右，还有一个放在地板上。所谓“环绕立体声”系统可以有六个或者更多的音箱，摆放在屋子的周围。每一个音箱的得到特定的原始声音的一个频道。这样你就会有身临其境的听觉感受。 大多数通用的音频编码处理两个频道的声音。在录制的时候，声音已经区分为左右频道。在编码的时候，两个频道的声音存储在同一个音频流中，在解码时，两个频道解码然后发送到对应的音箱上。一些编码器可以处理超过两个频道的声音。 有很多声音编码器，但是在web方面，只需要知道三个：mp3，aac和vorbis。 发送文章为PDF
当你谈论“看一个视频”的时候，你实际上是在谈论一个视频流和一个音频流的合成的内容。但是并不存在两个不同的文件。你似乎只有“这个视频”。也许它是一个avi文件，或者mp4文件。它们只是容器格式，类似zip文件包含了多种文件类型的文件。容器格式定义了怎么在单一的文件中存储视频和音频流。 当你“看一个视频”的时候，视频播放器在做以下一些事情： 解释容器格式，从中找到那些视频和音频track可用，它们是如何存储在文件中的，并可读取它们的数据，为下一步解码做准备； 解码视频流，显示一系列的图片到屏幕上； 解码音频流，发送声音到音箱。 发送文章为PDF
你也许会想，视频文件就是比如“avi文件”或者“mp4文件”。而实际上，avi和mp4只是容器格式。好比zip文件，里面可以包含各种文件，视频容器格式只是定义了怎么存储数据，而不论存储什么类型的数据。不过视频容器格式比这个更复杂一些，因为不是所有的视频流格式兼容所有的视频容器格式。 一个视频文件一般包含多个track，而每个视频track（没有音频）又可对应一到多个音频track。这些track又总是相互关联的。每个音频track内部包含标记用于和视频同步。每个track可包括元数据，比如视频track的纵横比（视频长和宽），或者音频track的语言。容器也可以有元数据，比如视频自身的题目，视频的封面，片段号码（用于在电视上展示）等等。 发送文章为PDF
Patagonia Theme designed by Wp Themes Planet and proudly powered by WordPress
