易栈网-膘叔

帕兰映像又改版了，把我喜欢的下部浮动层去掉了。。

为了这个下部浮动层。我还自己画了几个原型图。只是没有实现成HTML而己。。。

不多说，看文章，地址：http://paranimage.com/list-of-html-5/

HTML 5最近被讨论的越来越多，越来越烈。尽管HTML5离我们其实还挺远的， 我们绝对犯不着浪费时间现在就去学习HTML5的特性和应用 — 那是Google这等走在技术前沿有实力有干劲的家伙才干的事儿。但任何一个设计开发爱好者都不能忽视它，至少应该有个大概的了解。

HTML 5可谓集万千宠爱于一身，各种高帽戴的不亦乐乎。当然，只要是值得讨论的事情，总有不同的声音。也有一些人并不看好他，或者至少对HTML5没那么兴奋。

本文就收集整理一些有关HTML5的相关知识、热门评论和新闻动态，帮助你进一步的了解HTML。

什么是HTML 5？

HTML 5 的历史背景

HTML 5

HTML 5草案的前身名为Web Applications 1.0。于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案发 布。[1]WHATWG表示该规范是目前正在进行的工作，仍须多年的努力。wikipedia

WHATWG，这个HTML5背后的组织，用下面的话描述自己：“2004年由Apple，Mozilla基金会，Opera软件中的人员创建，他 们的矛头直指W3C直属的XHTML，认为HTML缺少乐趣，对现实世界的需求置之不理。这些组织中的有识之士决心改变这一切，所以超文本应用技术工作小 组 (WHATWG的英文全称)应运而生”。HTML5预计在2012年正式登上W3C候选标准的舞台。但是这并不意味着你到那时才能使用。一些技术已经成 熟，一些部分已经足够稳定，一些功能实现已经接近尾声，所以我们现在就可以体验它们的新特性了。 当前，市场正一步一步加速WHATWG项目的进程。via

注: W3C 日前宣布将从2009年底起终止同 XHTML 2 工作组的合约。

HTML 5的新标记

关于HTML5中对元素和标记的更新，我把它们划分为三部份:

1. HTML5结构元素: 新增了更具语义化的标签，比如<header>表示页面的头部，<footer>表示底部，<nav>表示一个链接导航集合等。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。
2. HTML5 交互元素: 我们上面说过，HTML5的前身名是Web Applications 1.0。 所以HTML5当然不只是随便加几个标签，让代码结构更具语义化这么无聊。另外一些新增的元素，诸如<details>, <datagrid>等，可以实现控制数据和内容展示等交互能力。input元素的新属性：日期和时间，email, url，可以轻松制造一个Webforms 2.0。
3. 删除的HTML4元素: HTML5删除了HTML4中纯粹用来显示效果的一些标记，比如<font>和<center>，因为它们已经被CSS取代。

看着上面的这些HTML5特性，就不禁让人想到XHTML，XHTML到底做了些什么呢？为什么近几年来，我们老爱跟HTML4划清界线，钟爱XHTML？这有篇文章说的很好：XHTML 鼓励良好的代码习惯，所有标签都需要完整，严谨，XHTML 可以产生比 HTML 4 更干净的代码。也就是说，XHTML相对HTML4，就起到了一个更严格的约束作用，但事实上，用HTML4也可以写出很干净的代码，用XHTML也有人把代码写得一团糟。

当然，我等鼠辈都是墙头草，还特喜欢落井下石。HTML5没热腾起来的时候，也没谁寒碜XHTML，更多的却是讨论要用Transitional还是Strict。废话少，如果你想具体了解HTML新增的元素和属性标记，可以查看下面这些文章:

• HTML 5简介
• 细谈HTML 5新增的元素
• HTML 5新元素全接触

HTML的新API

除了原先的DOM接口，HTML5增加了更多样化的API。包含了设计师们需要的很多东西，本地的音频，视频支持，多栏布局工具，离线数据库，本地的矢量图支持等等。

HTML 5的试验

HTML 5的标准还八字才有一撇呢，后面一撇还得慢慢描。但已经有诸多的先锋部队开始拥抱它了。很多主流浏览器的最新版本都已经开始支持HTML5中的部份特性，除了IE。

如果你确实很迫不及待的也想做下技术先驱，下面的一些实例和资源可能会对你有用：

• HTML 5 Reset Stylesheet

  一份特别针对HTML 5所写的CSS样式重置。同时，HTML5Doctor这个网站是国外一个专门介绍和研究HTML5的网站。

• Bespin

  Mozilla Lab的一个项目，这是一个使用了html5技术的代码编辑器。

• 如何在IE中使用HTML元素

• HTML 5 Features at a Glance

  一份HTML 5的浏览器兼容功能列表

HTML 5的争论

关于HTML 5的争论多种多样，其中最大的争论点在于业界对HTML 5取代Flash、Silverlight这些RIA主力军。下面听听一些声音吧。

Opera称HTML5将使得Flash变得可有可无

Opera首席执行官Jon von Tetzchner近日在接受采访时表示，下一代HTML语言将使得Adobe Flash技术显得很多余，HTML 5的开放Web标准提供了除Flash之外的富媒体网络内容发布方法。

von Tetzchner表示，HTML 5处理富媒体的能力意味着Flash可有可无，“你可以用它实现大多数(Flash)现在做的事，从某种方面说，你可能不再需要Flash。”

von Tetzchner补充说，这并不意味着Flash会消亡，“我喜欢Adobe，他们是一家非常棒的公司，我想Flash还会存在很长很长一段时间，但是 Web标准演变地越来越丰富是‘自然法则’，你可以选择使用Web标准也可以选择使用Flash(发布富媒体内容)。”

编程大师Bruce Eckel不看好HTML5

《Thinking In Java》和《Think in C++》的作者Bruce Eckel最近在博客中评价了在开发团队选择现有技术时所需要掌握和了解的知识资源体系。 他指出web开发者花费了过多的精力来使CSS/HTML/JavaScript程序兼容各种浏览器，非IT行业的公司不会有太多人手维护主页，这往往导 致他们无法考虑兼容问题，最终结果是主页只支持IE。即使等到HTML5发布，这种状况也未必能有所改变。对于一般公司而言，如果想兼容各种平台，最好的 解决方案是使用flash/flex。

更多的HTML新闻和动态

• Flex的合作竞争对象:HTML5‎
• Safari 4.0.3 完善HTML5视频标签稳定性
• 微软称愿分享对HTML5的看法并参与制定标准
• HTML5 File API：把文件从桌面拖放到 Web
• HTML5将弃用开源影音编码标准Ogg

2.0就要来了，这真是一个有讽刺意味的东西。
一方面，IE6.0霸占着市场，一方面新的东西越来越多。HTML5，JS2.0，我们这些WEB开发人员怎么办？
不多说免得来气，直接看文章

原文从cnbetaCOPY而来：来源泉地址为：http://www.cnbeta.com/articles/91266.htm

感谢Hite的投递
新闻来源:自己翻译
JavaScript2.0 :抢先尝鲜 作者 Rob Gravelle
作者为我们简要的介绍了下正在制定中的JavaScript2.0标准,有许多新特性的介绍和相应的代码演示：

作 为一个开发者和作家，我的一部分工作就是跟随web世界最新发展潮流——不管是关于公司合并、在线购物潮流、或者是编程技巧。我承认如今很难跟上 业界里发生的所有事情，但是有个四处流传的小道消息却吸引了许多的目光：JavaScript2.0提案。作为新的 JavaScript2.0\EMCAScript 4.0计划于2009年终稿，但是日前已经做了很多的工作-包括好的、不好的。今天，我们来看看这份提案规范的一部分，看下他们是在改进这门语言还是狗尾 续貂。

JavaScript的历史

为了更好的理解JavaScript标准是如何实现的，让我们简要的看下这门语言的历史吧

JavaScript是ECMAScript脚本语言的一个分支。ECMAScript 是Ecma国际组织标准化的，这门语言的另外2个分支是ActionScript（macroMedia,Adobe）和JScript（微软）。 JavaScript是有Netscape的Brendan Eich开发的，最初叫Mocha而后是LiveScript，最后改为JavaScript。1993.3月，Sun公司发布了支持 JavaScript的Navigator2.0（译者：我感觉这是错误的，可查看原文）。鉴于JavaScript作为客户端脚本语言取得广泛流行，微 软制定了自己的脚本语言JScript，发布于1996.8月的ie3.0中。Netscape公司在日内瓦提交了JavaScript给Ecma国际标 准化组织，申请成为标准。

Ecma国际标准化组织是个管理信息、通信系统的、基于成员制度，非营利性国际机构 。这个机构起初是为了标准化欧洲的计算而于1991年成立，在它成立后的40年间，Ecma总共出台了370封标准和90个科技报告，其中包括了CD- ROM卷和文件系统，c++语言规范和他们的开放xml格式。第一版的ECMAScript（Ecma-262）于1997在Ecma全员大会上通过。不 管JavaScript还是JScript他们都是兼容ECMAScript的，同时也提供了Ecma规范没有提供的特殊的额外的特性。甚至在今 天，JavaScript和JScript依然有个很多不兼容的地方。JavaScript受如java、c++等面向对象语言的影响很深，这也意味着初 学者能很容易的上手。

语言的增强

更加的面向对象

迄今为止，JavaScript是使用的原型来做继承的，而不是经典的面向对象式的继承自父类。事实上，如下面实例的一样，如今JavaScript没有class的东西：

// Current JavaScript 1.x "Class" Definition
function MyClass()
{
 this.member1 = "a string";
 this.member2 = 10;
}
var myClass = new MyClass(); // class instantiation

// JavaScript 2.0 Class Definition
class TrueClass
{
 this.member1 = "a string";
 this.member2 = 10;
}
var trueClass = new TrueClass(); // class instantiation

当对象的构造函数和他们类型角色一起的时候，构造函数会翻倍。使用new 调用函数的时候会创建一个新对象，而后你就可以使用被bind到这个对象的本地关键字this来调用这个函数。函数的原型决定了这个对象的原型。不管什么 类型的值赋予一个对象的原型，那么它都会被他所有的实例和汉字共享。使用原型 ，JavaScript可以模拟许多基于class的特性，尽管有些古怪。举个例子，在下面的代码中，myOtherDog尝试去重载父类Dog的 getBreed() 函数。虽然myOtherDog的getBreed（）函数是能够实现的，但是他没有重载成功——给了myOtherDog两个面包。

function Dog(name)
{
  this.name = name;
  this.bark = function() { alert('Woof!'); };
  this.displayName = function() { alert(this.name); };
};

var myDog = new Dog('Killer');
myDog.displayName(); //Killer
myDog.bark(); //Woof!

Dog.prototype.getBreed = function()
{
  alert("Mutt");
};

myDog.getBreed(); //Mutt

myOtherDog = new Dog('Bowzer');

// this hides getBreed() from other Dogs
myOtherDog.getBreed = function()
{
  return "Lhasa Apso";
};
alert(myOtherDog.getBreed()); //Lhaso Apso and Mutt!

alert(myDog.getBreed()); //function is undefined

强类型

像大多数的脚本语言一样，JavaScript也是弱类型的。解释器会在运行时，基于值来决定某变量的数据类型。这种松散性使得开发者可以很灵活的 重用和比较变量。在后种情况，使用强制类型转换就可以比较两种不同数据类型的值；JavaScript会自动在比较之前将他们转化成相同的类型。

alert( "42" == 42 ); //true
alert( ("42" == 42) + 1 ); //2. the boolean true evaluates to 1.
alert( "I live at " + 99 + " Renolds street."); // the 99 int is converted to a string.

相反的，JavaScript2.0会强类型化了些，这就意味着必须显式的申明变量的类型，脚本引擎不会强制类型转换了。类型可以赋予属性、函数参 数、函数返回值、变量、对象、数组的初始化对象。如果没有定义类型，那么变量或者属性被设置为默认的Object类型，这是所有的数据类型层级的基类。使 用：后跟类型申明的是赋类型的语法：

var a:int = 100; //variable a has a type of int
var b:String = "A string."; //variable b has a type of String

function (a:int, b:string)//the function accepts two parameters, one of type int, one of type string

function(...):int //the function returns a value with a type of int

为了进行上述的比较，你需要转换类型：

alert( int("42") == 42 ); //true
alert( int("42" == 42) + 1 ); //2
alert( "I live at " + string(99) + " Renolds street.");

程序单元体

借鉴了各种流行js框架，程序单元体是很有用的代码模块，它可以在运行时导入。当框架和自定义库数量越来越多的时候，这些已经成为web程序不可或缺的组成部分。设想下，包含了成千上万行代码的库们，一次性下载他们已经不合时宜了。这是伪代码：

use unit Effects "http://mysite/lib/Effects";
use unit Utils "http://mysite/lib/Utils";

var panel = new Panel();
panel.setTime(Util.getFormattedTime());

编译时的类型检查

在JavaScript2.0 里，你可以使用严格模式来编译JavaScript模块。在运行之前，它可以检查几个重要的方面的完整性，包括：

静态类型检查
引用名称确认
对常数的非法赋值
保证比较的两个值有合法的类型
常数

先前的JavaScript开发者不得不使用命名规范或者精心制定的工作规则保护他们的常量。而这些在JavaScript2.0都是不需要的：

//JavaScript 1.x constant
var CULTURE_CONST = "Do you really want to change me?"; // constant in appearance only.

//JavaScript 2.0 constant
const HAMMER_TIME = "You can't touch this!" // a true constant.

命名空间

随着js框架的不断涌现，使用命名空间已经变得越来越必要了。这个标准目前被用作创建全局对象来保护你自己的功能不给先前的全局对象和函数击倒在地（直译）。

总结

许多向对2.0提案进行了猛烈的抨击，批评它在想经典的语言如c++、java在靠近。

“...JavaScript是动态、灵活的，使用原型继承和对象模型是很实用，很基础的优势，为什么有人要把这些那么优雅、灵活的东西变成java呢，java基本上强制性的让程序员使用古典的，基于class的继承——我搞不懂。”

而我个人对此很感受很复杂，即欢迎像class，命名空间，常量这样好的变化，也对强类型脚本变量很不感冒。总体上说，JavaScript冒着对 业余程序员变得更严格，相应的更严肃的危险 。不过，我也想应该感谢那些商业网站能够使用像我这样的专业人士来编码他们的业务流程。不管结果如何，无疑web开发的格局将会发生戏剧性的改变。

初稿：2009 7.20

复查：2009.7.22

翻译：2009.8.20

HTML5可谓来势汹汹啊，只是不知道IE会在什么时候才会支持它。
IE6直到现在，微软也没有放弃。就因为这个不放弃，有多少美工、前端在吐血啊。写点JS、CSS吧。还得兼容IE6、7、8，你要干脆一样嘛也就算了。6、7、8都不一样，你说你害人不。

如今 HTML5又来了。微软又会怎么做？

以下内容来自于cnbeTa.com：http://www.cnbeta.com/articles/91161.htm

感谢COMSHARP CMS的投递
新闻来源:Webmonkey.com
HTML5 让 HTML 这个一度单纯的置标语言焕发出成熟的魅力，使之成为 Web 开发者的强力工具，W3C 近日又推出一个新草案，HTML5 File API，这个 API 将让大大改善基于 Web 的文件上传操作，甚至可以实现直接将文件从桌面拖放至Web。

该 草案使用 <input type="file" /> 实现文件的上传，而其对应的 API 为开发者提供了操控上传数据与上传进度的机制。不过，目前对该 API 提供支持的浏览器还少得可怜，真正支持的浏览器似乎只有 Firefox 3.6。如果你拥有最新的 Firefox 3.6 版本，可以在以下演示页体验文件拖放式上传。

Firefox 3.6 文件拖放式上传演示页

同时，该 API 还许诺将为 Web 程序提供一种机制，使得文件上传操作接近桌面程序的体验，同时拖放多个文件到 Web 并单独显示每个上传进程的进度状态。关于 HTML5 File API 的更多细节请参阅以下深度报道。

HTML5 延伸阅读

• 深入了解 HTML 5
• 让 JavaScript 拯救 HTML5 的离线存储
• Web Forms 2.0 行将被 HTML 5 代替
• HTML 5 正在改变 Web
• HTML 5 令人期待的 5 项功能
• 当 HTML 5 遇见 Google
• HTML 5 会为 Flash 和 Silverlight 送终吗？
• Firefox 访谈：OGG, HTML 5 与 Web 视频的未来
• XHTML 2: 出师未捷身先死, HTML 5:万千宠爱于一身

本文来源：http://www.webmonkey.com/blog/HTML5_File_API_Brings_Drag-and-Drop_File_Uploads_to_the_Web
中文翻译来源：COMSHARP CMS 官方网站

不知道大家是否还记得08年的5月12日，那一天，所有的网页都是灰色的，纪念那逝去的生命。
对于网页开发者来说，为了让用户看到灰色的页面，大多数人都采取了直接修改CSS的方式，使得image的alpha通道为gray，然而，这个方法是不支持FF的。N多办法都不支持。
这是一个JS的特效。它有N多处理图片的方法，可以按需加载，网址是：http://www.nihilogic.dk/labs/imagefx/，可以看到一些效果。

根据网上提供的JS，下载下来后，直接src一下就能用了。然而在测试的时候只有IE有效,firefox下是无效的。打开firebug，发现在执行后报错：


开始的时候一直没有细看，发现上面写的是"code:"也没有什么代码。就利用firebug的watch功能监视。然而死活找不到问题。
代码与网络上是一模一样，问题在哪里呢？
再仔细看出错代码，发现，前两个单词居然是：Security error，难道是安全问题？FF对本地代码的执行进行了限制？
立马把代码拷到虚拟机下运行，果然一切正常。
唉。。。
原来我为了这样一个问题折腾了将近一周。不仔细看出错信息导致的呀。。

顺便贴一个开心网的BUG图片：

DSL,不算新名词了。转至博客园，看名称，估计还有后续文章，先转载，相当于mark一下，哈哈。这样就不会以后找不到链接了。

作者是博客园的cat chen，原文地址，http://www.cnblogs.com/cathsfz/archive/2009/08/10/1543266.html
内容如下：

jQuery刚刚出来的时候，我没有太多关注它，觉得这不过是Yet Another JavaScript Library。早期的jQuery专注于DOM节点的筛选与操作，不提供众多的基础类扩展，更不提供UI组件，因此体积能够做到很小。然而，我实在看不 出它和我熟悉的Prototype比有什么明显的优势——jQuery能做的各项独立的操作，Prototype都能做。

后来用jQuery的人越来越多，并且大家都爱用它的链式方法调用，甚至还把这种写法推广到其它语言中去。例如ASP.NET MVP Omar AL Zabir就把他的服务器端C#组件设计为支持链式方法调用的。这时候我才开始关注jQuery，并且逐渐喜欢上了链式方法调用的写法，也在我自己的JavaScript组件中实现类似的API（参考Async和Overload）。最后，我突然明白到，这其实就是一种Internal DSL嘛！

在这篇文章里，我准备先讨论Internal DSL，在下一篇文章里面再解释为什么jQuery是Internal DSL。现在我们就从最根本的问题开始吧——

什么是Internal DSL？

DSL是指Domain Specific Language，也就是用于描述和解决特定领域问题的语言。例如说，我们有专门描述字符串特征的正则表达式，有专门描述数据库查询的SQL，有专门描述 XML结构的DTD和XSD，甚至有专门描述XML变换的XSLT，这些都是DSL。

当然，并非我们关注的领域都有现成的DSL，这时候我们有三个选择：

1. 使用通用语言描述该领域的问题（non-DSL）
2. 发明一门全新的语言描述该领域的问题（External DSL）
3. 在一门现成语言内实现针对领域问题的描述（Internal DSL）

例如说，我们现在要描述一个很简单的金融领域问题，“我在花旗银行存款$200”这样一句话对应的三种法写法可能是：（假设已经存在I和CitiBank两个实体实例）

1. I.DepositTo(new USD(200), CitiBank); /* C# */
2. I deposit 200USD to CitiBank /* E-DSL */
3. I.deposit(200.USD()).to(CitiBank); /* I-DSL */

第1种做法的成本最低，你只需要有OO的思想就可以了，你总能把实体类设计出来，但可能和人类描述此领域问题的思维方式有一定偏差（为什么USD可以new？为什么不是deposit [something] to [somewhere]？）。

第2种做法的成本最高，你需要写一个全新的解释器，至少是写一组全新的规则，然后让YACC这类工具帮你生成一个解释器，但这样出来的语法最贴近人类思维方式，甚至就如同自然语言一样流畅。

第3种做法术语上述两者的折中方案，如果语法不太复杂可以使用Builder模式实现语法分析，写出来的语法相当贴近自然语言，但还是有学习门槛。由于脚本语言有相当的灵活性，所以现在很多人倾向于选择在脚本语言内实现Internal DSL。

如何构造Internal DSL？

常见的两种Internal DSL实现方法是Method Chaining和Function Sequence。如果我们需要描述一台机器的硬件组成，两种实现方式的代码分别如下：

/* Method Chaining */
computer()
  .processor()
    .cores(2)
    .i386()
  .disk()
    .size(150)
  .disk()
    .size(75)
    .speed(7200)
    .sata()
  .end();

/* Function Sequence */
computer();
  processor();
    cores(2);
    processorType(i386);
  disk();
    diskSize(150);
  disk();
    diskSize(75);
    diskSpeed(7200);
    diskInterface(SATA);

无论是哪一种写法，中间都必须写一个分析器层。就如同语法分析器需要使用状态机一样，Internal DSL的实现也必须内置一个状态机，以记录当前执行到什么状态了，并且接下来可以转移到哪些有效状态。

由于这不是一篇专门讲语法分析器和状态机实现的文章，所以我们把关注点保持在API层面就可以了，不深入讨论其实现细节和成本。我们知道链式方法调用能够实现Internal DSL就够了，至于jQuery是如何利用好这一点的，我们在下一篇文章里再作讨论。

小结

在这篇文章里，我们了解了Internal DSL与External DSL之间的区别，同时还了解到实现Internal DSL的具体方式，这为我们接下来讨论jQuery的Internal DSL式接口做好了铺垫。在下一篇文章里，我们将深入地来看看为什么jQuery的接口要如此设计，它能为用户带来了怎样的便利，同时它自身的实现上又有 什么优势。

如果你不希望错过下一篇文章，你可以考虑订阅我的博客：

• Cat in Chinese (feed)
• Cat in dotNET (feed)