2012年08月_Soloman

12月 11月 10月 09月 08月 06月 05月 04月 03月 02月 01月

翻译 HTML5与JQuery.Mobile（二）

接下来我们开始讨论工具栏：首先我们看一个简单的例子：Contact Page Header Phone Email Fax Forum Help Form Help Page Conten

2012-08-29 22:56:09 1882

翻译 HTML5与JQuery.Mobile（一）

这个系列主要讲解在HTML5中添加JQuery.Mobile支持；本系列内容大部分来自于VTC.COM.JQUERY.MOBILE.FRAMEWORK教程。对于一个简单的HTML5页面我们需要做一些改造：无标题文档应用程序标题应用程序内容应用程序脚注栏下面把我们需要掌握的知识点罗

2012-08-28 22:55:00 2863

翻译 HTML5中添加多媒体支持（三）

ok，最后我们来一段通过JavaScript创建并且控制播放Video的代码：js代码：$(function(){ // Stop if HTML5 video isn't supported if (!document.createElement('video').canPlayType) { $("#video_controls").hide(); r

2012-08-25 22:12:49 2226

翻译 HTML5中添加多媒体支持（二）

接下来我们介绍一下如何嵌入Flash和Video或Audio，并且介绍一些在线生成嵌入代码的工具：生成嵌入Flash代码的工具如下：http://www.osmf.org/configurator/fmp/其中：Video Source输入嵌入的文件地址，可以输入视频文件的地址；其余选项根据需要设置；输入完毕后甚至可以预览代码，设置正确后嵌入对应的页面即

2012-08-25 21:55:23 1443

翻译 HTML5中添加多媒体支持（一）

这次的教程来自Lynda.com.HTML5.Video.and.Audio.in.Depth。尽管目前在HTML中嵌入视频还不是主流（貌似最多的是使用Flash吧），但毕竟是今后的趋势，所以还是很重要的。简单的嵌入视频和音频的代码分别是： Your browser does not support HTML5 video. Yo

2012-08-24 23:37:39 2204

翻译 HTML 5中的存储及离线应用（五）

最后咱们再来看看离线应用：离线应用需要有一个缓存的Manifest文件：文件类型(MIME-type)是：text/cache-manifest，这份工作应该在web server上进行；文件以“CACHE MANIFEST”开头；文件中有如下节：CACHE，表示缓存的文件，这个是默认节，如果未指明节的情况下默认是CACHE；NETWORK，表示不能被缓存的文件；FALLB

2012-08-22 10:31:54 1739

翻译 HTML 5中的存储及离线应用（四）

好吧，目前看起来咱们还是老老实实用Local Storage和Session Storage吧，还是这两看起来靠谱一些。那么我们在使用Local Storage的时候经常遇到如下的情况：在一个页面中数据发生了改变，另一个页面不会实时去刷新数据导致两个页面的数据不同步；这种情况下我们就需要用到存储事件。接着我们将讲解事件的使用，看代码：<!DOC

2012-08-22 09:43:18 1438

翻译 HTML 5中的存储及离线应用（三）

最后我们来看一下Indexed DB。Indexed DB使用Key-Value的数据库存储；被Firefox4/Chrome 11以上支持；限制较多；好吧，由于不支持“file://”URL我放弃了，目前看起来还是一个toy而已，真的不是很好用，代码简单看一下。。。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran

2012-08-22 09:31:17 3599

翻译 HTML 5中的存储及离线应用（二）

本小节主要讲述如何使用Web SQL。Web SQL使用SQLite存储，目前在Safari、Chrome等浏览器中支持（还是支持的少啊FF/IE均不支持。。。）；可以使用SQL语句完成增删改查操作，应该是我们程序员处理复杂数据时最喜欢的方式了下面来看例子：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans

2012-08-22 09:24:20 1765

翻译 HTML 5中的存储及离线应用（一）

本系列来源于Lynda.Com.HTML5.Local.Storage.And.Offline.Applications.In.Depth，我仅做了整理的工作。先来点知识点讲解，HTML 5提供了以下几种存储方式：Local Storage；Session Storage；Web SQL Storage；Indexed database（IndexedDB）；前两种

2012-08-21 22:37:45 1540

翻译 HTML5中的消息通信

本文英文教程来源：Lynda.com.HTML5.Messaging.And.Communications.In.DepthHTML5支持跨文档消息通信(Cross-Document Messaging)。既然使用到消息通信，那么必然有事件(event)产生。根据事件的产生和消费，我们能够找到发送者和接收者，也就是Sender和Listener。其中Litener需要做

2012-08-20 22:48:01 2803 1

翻译 HTML5中的Canvas绘图操作（五）

好吧这个系列终于要完了，继续展示特效效果。幻灯片效果：这个很简单，无非是建立一个定时器去刷新图片。 Canvas Image Rotator Example var imagePaths = [ "images/j0149014.jpg", "images/j0149024.jpg", "images/j0149029.jpg", "imag

2012-08-19 16:46:32 1320

翻译 HTML5中的Canvas绘图操作（四）

继续介绍特效效果。移动效果： The Translate Transform canvas { border: dotted 1px black; margin: 25px; } window.onload = function () { var theCanvas =

2012-08-19 16:11:14 1495

翻译 HTML5中的Canvas绘图操作（三）

本节主要内容是组合图形的绘制。简单的一个阴影绘制如下： Drawing Shadows #Canvas1 { border: dotted 1px black; } window.onload = function() { var theCanvas = document.getElementById('Canvas1'

2012-08-19 14:39:55 1822

翻译 HTML5中的Canvas绘图操作（二）

所有编程的绘图操作基本上都差不多，这里分段举例描述。设置颜色： Drawing Lines canvas { border: dotted 1px black; } window.onload = function() { var theCanvas = document.getElementById('Canvas1'

2012-08-19 12:39:20 888

翻译 HTML5中的Canvas绘图操作（一）

这一章的教程资源来自于Lynda.com.HTML5.Graphics.and.Animation.with.Canvas。本节主要介绍几个HTML5中的Canvas实际使用案例。1)我们去canvasmol可以看到非常炫的动态展示的分子结构图；2)我们去raphaeljs.com能够得到一个js库，能够实现非常多的特效效果，包括文字、图片、波形、渐变。。。；3)去

2012-08-19 10:08:31 1074

翻译 HTML5中使用拖拽实例（二）

2012-08-15 11:24:35 1742

翻译 HTML5中使用拖拽实例（一）

来源于Lynda.com.HTML5.Geolocation.in.Depth教程，我做了一些简单的注释。关于html5中关于drap and drop的部分参见这个地址：http://www.w3.org/TR/html5/dnd.html#the-dragevent-and-datatransfer-interfaces示例的html文件：<!--

2012-08-14 16:59:44 1949