实时信息 » html5 http://www.shtion.com 互联网软硬件应用，社会化网络服务，IT业界热门资讯，言论探讨分享平台 Wed, 08 Sep 2010 02:55:02 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 HTML5将带来什么 http://www.shtion.com/3727.html http://www.shtion.com/3727.html#comments Tue, 10 Aug 2010 06:11:58 +0000 shtion.com http://www.shtion.com/?p=3727 2010年上半年的苹果与Adobe的冲突，使HTML5的存在一夜之间被很多人所知晓。在乔布斯的煽动下，这一已经在科技界潜行数年的下一代 Web标准，被迅速拎到了台面上，苹果、谷歌、微软这科技界三巨头，连同众多业界明星，似乎突然对HTML5变得情有独钟，利益集团的之间的争夺，成了这 个技术最好的催化剂。

　　HTML5的火热似乎暗合了“合久必分，分久必合”的旧理。愈发多样化的互联网应用与现有平台割据之间的矛盾，产生了对标准统一Web标准的迫切需求，而HTML5正是担负这一使命的最佳候选——现在看来，也是唯一候选。

　　显然，它的重要性不言而喻。而围绕着这一标准的争夺，势必会激起科技界的惊涛骇浪。

　　HTML即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是制作网页的主要语言。诞生于1993年的HTML，其文档制作并不是很复杂，且功能强大，支持不同数据格式的文件嵌入。

　　然而，HTML的最近一次升级还是1999年12月发布的HTML4。

　 　乔布斯在檄文《关于Flash的思考》一文中说：“Flash是PC时代的产物，它是为个人电脑与鼠标发明的。”──其言外之意就是说已经不适应现在移 动终端的需求。的确，诞生于上世纪末的HTML4仅是PC时代的产物(后继的XHTML语言除了语法外与HTML4几乎没有区别)，在它诞生至今的10年 里面，互联网世界已经发生了天翻地覆的变化：Netscape灰飞烟灭，微软的IE如今已经演化到了IE9；Firefox 从 Netscape 的死灰中诞生，重新占据了第二位；Safari和Chrome组成的Webkit(浏览器架构的一种)阵营为移动互联网世界勾画出了蓝图。

　　更重要的是，在如今的后Web2.0时代，人机交互、人网交互已经成为常态，对富媒体应用和本地存储的支持乏力成为现有浏览器的心腹之患。而将Web由内容平台改造为标准化的应用平台，并统一各大平台阵营的标准，正是HTML5的终极使命。

　　HTML5主要有以下几个特色：降低插件的重要性，简化Web开发；大幅提高对动态图像、位置服务、本地存储的支持；提高浏览器安全性。

　　很多业内人士认为HTML5以上特点是具有革命性的，特别是其丰富的标签体系，类似于内置了很多快捷键，将取代那些完成比较简单任务的插件，可以降低应用开发的技术门槛。

　 　其实，由于鼓励创新，互联网在之前是非常欢迎浏览器插件的。而声音、动画及其他一些非常生动的网页，通过Adobe、 RealAudio、微软以及其他的一些公司开发的插件在网络呈现时也的确让人耳目一新。然而，问题很快就出现了，插件的接口是向所有人开放的，每个人都 在尝试用自己定义的技术给网页增加新的功能，混乱不可避免。其中最有名的插件就是Flash，其他类似的插件更是数不胜数。

　　HTML5 有望解决这一问题。举例来说，HTML5中的“video”标签使Web开发人员很容易地把视频内容与网页中的其他内容整合起来，使得Web的多媒体开发 不再仅仅是使用Adobe的Flash、 微软的Silverlight和升阳的JavaFX——这些被垄断的富媒体开发工具的人员的专利。显然，这对互联网的富媒体化大有裨益。

　　总之，从获取到互动，从图片到视频，从云端到终端，当下互联网的复杂性，迫切需要HTML5这样的救世主出现。

　 　其实，HTML5的诞生本身就是创新派“革命”的结果：万维网之父Tim Berners-Lee在创造出HTML的同时，建立了互联网标准化组织W3C(万维网联盟)。然而，在HTML之路上行走数年之后，W3C已经跟不上互 联网时代的步伐。W3C当时认为，HTML4已经功德圆满，他们的下一步工作是语法升级的可扩展超文本置标语言XHTML。他们认为其可以将Web带入光 明的未来。

　　然而，作为第三方的W3C组织忽略了一个重要的变量——在互联网时代崛起的科技巨头。实际上，在Netscape消失之后，IE并没有一统江湖。恰恰相反，浏览器进入了战国时代。Firefox、Opera、Safari相继诞生，而它们的背后都有着强大的支持力量。

　　于是，由于不满“互联网造物主”——W3C的思维僵化行为拖沓，苹果公司等新贵们自发组织成立了新的超文本语言标准工作组，这就是WHATWG(超文本应用科技工作组)，其使命便是致力于HTML5的规范和普及。

　　现在看来，这些充满了野心和动力的科技巨擘，显然比无私的“互联网造物主”有力量的多。

　　巨人的战场

　　毫无疑问，HTML5将是未来互联网技术的制高点。围绕这个制高点，科技巨头们必将展开激烈的争夺。目前来看，争夺的主角，再一次锁定在了苹果和谷歌为首的两大阵营。

　　在苹果方面，其不断扩张的业务结构中，软件的权重始终是处于较弱的位置，比起Mac机与iPhone，其核心软件在业界的影响还要小的多。而HTML5为苹果改变这种局面，提供了千载难逢的良机。可以预见，依托其出色硬件平台，苹果将向HTML5高地展开持续攻势。

　 　在谷歌方面，虽然它入局较晚，但其必然不会将互联网技术的优势地位拱手相让。实际上，除了在线软件领域的优势之外，谷歌TV、谷歌手机等硬件尝试，其根 本目的便是为其软件拓展探路。比如谷歌的Nexus One手机就曾被用来展示最新的Flash Player 10.1。

　　在这场抢占互联网未来的制高点战役中，苹果与谷歌可谓针锋相对：

　 　乔布斯批判Flash，谷歌马上在I/O大会上抨击苹果违背互联网精神；由于HTML5标准中没有指定任何的视频编解码器，在苹果明确提出自己掌握知识 产权的H.264标准建议之后，谷歌在I/O大会上便提出了WebM标准；当苹果在主页中为HTML5特别开辟一个栏目之后，谷歌针锋相对地推出自己的 HTML5“练兵场”——HTML5 ROCKS；双方都在抢先发布HTML5新特性……

　　在巨头们的强硬姿态下，各种科技力量已经开始 站队。例如，包括Opera,Mozilla,Adobe等软件巨头和AMD,ARM,NVIDIA，Qualcomm在内硬件巨头明确表示支持谷歌的 WebM标准；而之前蓝光阵营的索尼、富士、三星等公司，则本身就是H.264的专利拥有方之一。

　　在这场争夺中，特别值得关注的是软件 领域的老大微软的态度。其也已经在HTML5领域密集布局。目前来看，一方面，微软欲利用既得优势树立自己的标准，如其宣布Chrome, Firefox和Safari并不适合处理HTML5内容，而自己的IE9渲染HTML5动画的速度是Chrome 5、Safari的12倍以上等。另一方面，与谷歌放弃正在开发的位置服务技术Gear而转投HTML5不同，微软肯定不会轻易放弃 Silverlight，其在口头支持HTML5的同时，是否会沿用捆绑销售的老伎俩尚未可知。

　　除了主张自己的主导标准外，在其他HTML5细节上，微软似乎与苹果站得更近些。例如，其已经公开宣布支持H.264标准。当然，这可能与其和苹果一样同为封闭性研发体系，并同为H.264专利拥有方之一有关。

　　按照计划，WHATWG将在2012年向W3C提交HTML5规划。但历史证明：HTML5完成它的使命将并非易事。

　　从2003年WHATWG公布HTML5草案算起，已过7年光景，HTML5并没有诞生，WHATWG的最大进展仅是促使潜在对手XHTML 2.0的夭折——2008年，W3C宣布，其工作重点已经转移到HTML5方向上。

　 　之所以WHATWG进展也如此缓慢，原因同样是由于平台的割据，并且形态更为复杂。从采用不同操作系统的手机，到各家的应用程序商店；从尚处于少年期的 云端技术到各家保留的专利。特别是已经势同水火的苹果与谷歌，对于连互联网电视都要各立山头的它们来说，什么变量才会使他们妥协于同一种大互联网标准呢？

　　而对于那些“卫星国”来说，滋味可能更为难受。虽然与苹果都有某种嫌隙的它们被谷歌拉到I/O大会上，势成“倒乔联盟”，但在实际商业生存中它们会与哪方合作还尚未可知。

　 　比如，H.264在团结了硬件播放器阵营发展多年之后，已经成为实际上的下一代互联网视频技术，连谷歌自己的Youtube都已经向它敞开了大门，“卫 星们”还会拒绝么？对于它们来说，不停的换队(如同Palm的生存状态)显然是件痛苦的事情，但商业利益的考量显然要压倒一切。

　　可见，虽然各方对统一标准、提高互联网易用性的目标还是一致的，但是在各方完成博弈之前，人们还要一直等待下去。

　　显然，虽然HTML5时代令人兴奋，但是它的真正到来，很可能将是一个漫长的过程。

以下这些文章链接或许对您有帮助：

]]> http://www.shtion.com/3727.html/feed 0 给HTML5的建议、HTML5的技巧和技术 http://www.shtion.com/3633.html http://www.shtion.com/3633.html#comments Tue, 20 Jul 2010 17:10:36 +0000 shtion.com http://www.shtion.com/?p=3633 现今我们能用 HTML5 吗，能用它做些什么呢，是否真的是 Flash 杀手？想必你也注意到了这些日渐增长且常被问起的类似问题，被讨论着，甚至被回答过。在我看来，你必须自己回答这些基本的问题。

这篇文章的本意是想帮你通过一些基本指南的学习，以轻松学习代码模板。一旦你熟悉了这些基本，并想更进一学习，你还将会找到更多提供了建议、技巧和技术的有用资源。

HTML 5 特性

官方详细的文档是寻找 HTML5 特性的最好地方，当然你还可以轻松通过 W3Schools 来学习HTML5 标签。我们将会在文章中涉及到以下的特性：

  • 语义化标记
  • Form 表单增强功能
  • 视频 / 音频
  • 画布（Canvas）
  • 可编辑内容
  • 拖放
  • 稳健的数据存储

检测浏览器支持

在你开始尝试 HTML5之前，需要知道各主流浏览器的支持状况。这些有用的资源，将可以帮助你向着正轨走：

你还可以运行 Javascript（用Javascript 检测浏览器特性）来检测 HTML5 特性的支持。你还应该用用Modernizr： 一个非常不错的检测 HTML5/CSS3 本地支持的 Javascript 库。如果你选择用 Mootools可以使用MooModernizr (MooTools port of Modernizr)。

你可能也会想留意不断变化的”浏览器市场份额分享” — 这些信息对于你决定用何种解决或折衷的方法将会是非常必要的。

值得注意的变更点

除了新的特征，你还应该记下这些重要的变更点：

  • 简洁的 DOCTYPE HTML5 只需一个简洁的文档类型：<!DOCTYPE html>。它有意不使用版本，因此文档将会适用所有版本的HTML。
  • 简单易记的语言标签 你并不需要在 <html> 中使用 xmlns 或 xml:lang 标记。 <html lang=”en”> 将对 HTML5 有效。
  • 简单易记的编码类型 你现在可以在 meta 标签中使用 “charset”：<meta charset=”utf-8″ />
  • 不需要闭合标签 在 HTML5 中，空标签（如：br、img 和 input ）并不需要闭合标签。
  • 废弃的标签 下面这些标签并不被 HTML5 支持： <acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<s>、<strike>、<tt>、<u> 和 <xmp>

简单代码示例:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>HTML5 Document</title>
</head>
<body>

</body>
</html>

你可以使用HTML5 Validator 或 W3C Markup Validation Service 来测试你的 HTML5 文档。

语义化标记

HTML5 新增的一些新标签除了不仅仅是更具语义的 <div> 标签的替代品，并不提供额外的功能。这些都是新增的标签：<article>、<section>、<aside>、<hgroup>、<header>, <footer>、<nav>、<time>、<mark>、<figure> 和 <figcaption>。

这些标签被除了IE 外的所有现代浏览器（Firefox 3+、Safari 3.1+、Chrome 2+、and Opera 9.6+）支持。Javascript 提供了document.createElement(tagName) 的方法，让你可以用来创建新的 HTML5 标签。代替自己创建这些元素，你还可以用HTML5 Enabling Script 或 IE Print Protector — 这些脚本将帮助 IE 正常处理 HTML5 元素的渲染。

你可能会想到添加 CSS Reset 到这些新元素上。这里是一些可以用在你以 HTML5 为基础的项目的CSS Reset：

简单代码示例: 兼容 IE 的 HTML5 页面布局

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>HTML5 Semantic Markup Demo: Cross Browser</title>
    <link rel="stylesheet" href="html5reset.css" type="text/css" />
    <link rel="stylesheet" href="html5semanticmarkup.css" type="text/css" />
    <!--[if lt IE 9]>
        <script src="html5.js"></script>
    <![endif]-->
</head>
<body>
    <header>
        <hgroup>
            <h1>Page Header</h1>
            <h2>Page Sub Heading</h2>
        </hgroup>
    </header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <article>
        <header>
            <h1>Article Heading</h1>
            <time datetime="2010-05-05" pubdate>May 5th, 2010</time>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <section>
            <header>
                <h1>Section Heading</h1>
            </header>
            <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio.</p>
            <footer>
                <p>Section Footer: Pellentesque volutpat, leo nec auctor euismod</p>
            </footer>
        </section>
        <section>
            <header>
                <h1>Section Heading</h1>
            </header>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <figure>
                <img src="item-1.png" alt="Club">
                <img src="item-2.png" alt="Heart">
                <img src="item-3.png" alt="Spade">
                <img src="item-4.png" alt="Diamond">
                <figcaption>FigCaption: Club, Heart, Spade and Diamond</figcaption>
            </figure>
            <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio</p>
            <footer>
                <p>Section Footer: Pellentesque volutpat, leo nec auctor euismod est.</p>
            </footer>
        </section>
        <footer>
            Article Footer
        </footer>
    </article>
    <aside>
        <header>
            <h1>Siderbar Heading</h1>
        </header>
        <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio.</p>
    </aside>
    <footer>
        Page Footer
    </footer>
</body>
</html>

注意：没有一个 div 标签，id 或 class 属性被使用到 — 简洁、小巧和更语义化的标记 (View Demo)。你仍可以用 HTML5 Validator 或 W3C Markup Validation Service 来检测你的 HTML5 文档。

其他资源

表单增强

HTML5 为表单提供了几个新的属性、input 类型和标签。到目前为止，只有 Opera 对HTML5 有比较好的支持。你因此应该下载 Opera 来查看大部分新特性如何工作。

值得高兴的是尽管支持有限，使用这些特性也是个不错的选择。因为新的 INPUT 类型会漂亮地降级为 TEXT 类 INPUT（译注：INPUT 的默认 type 为 text）。且记住现今你仍可以折衷使用 Javascript 控制表单（这个技巧是指首先检测浏览器自身支持，然后才是使用折衷方法）。

简单代码示例：列出一些今天你可以拿来测试的新特性

<form>
    <fieldset>
        <legend>New Attributes</legend>
        <p>
            <label>Required:</label>
            <input type="text" name="html5requied" required="true">
            <small>Works in Opera & Chrome</small>
        </p>
        <p>
            <label>AutoFocus:</label>
            <input type="text" name="html5autofocus" autofocus="true">
            <small>Works in Opera, Chrome & Safari</small>
        </p>
        <p>
            <label>PlaceHolder:</label>
            <input type="text" name="html5placeholder" placeholder="This Will Show in WebKit">
            <small>Works in Chrome & Safari</small>
        </p>
        <p>
            <label>Input Pattern:</label>
            <input type="text" pattern="[0-9][A-Z]{3}" name="html5pattern" required title="Enter a digit followed by three uppercase letters"/>
            <small>Works in Opera & Chrome</small>
        </p>
        <p>
            <label>Multiple Files:</label>
            <input type="file" name="html5multiplefileupload" multiple>
            <small>Works in Chrome, Safari & Firefox</small>
        </p>
        <p>
            <label>List:</label>
            <input type="text" name="html5textwithdatalist" list="colors">
            <datalist id="colors">
                <option value="Red">
                <option value="Green">
                <option value="Blue">
            </datalist>
            <small>Works in Opera</small>
        </p>
    </fieldset>

    <fieldset>
        <legend>New Input Types</legend>
        <p>
            <label>Email:</label>
            <input type="email" name="html5email">
            <small>Works in Opera</small>
        </p>
        <p>
            <label>URL:</label>
            <input type="url" name="html5url">
            <small>Works in Opera</small>
        </p>
        <p>
            <label>Number:</label>
            <input type="number" name="html5number" min="1" max="10" step="1" value="1">
            <small>Works in Opera</small>
        </p>
        <p>
            <label>Range:</label>
            <input type="range" name="html5range" min="-100" max="100" value="0" step="10">
            <small>Works in Opera, Chrome & Safari</small>
        </p>
        <p>
            <label>Time:</label>
            <input type="time" step="900" name="html5time">
            <small>Works in Opera</small>
        </p>
        <p>
            <label>Date:</label>
            <input type="date" name="html5date">
            <small>Works in Opera</small>
        </p>
        <p>
            <label>Month:</label>
            <input type="month" name="html5month">
            <small>Works in Opera</small>
        </p>
        <p>
            <label>Week:</label>
            <input type="week" name="html5week">
            <small>Works in Opera</small>
        </p>
        <p>
            <label>DateTime:</label>
            <input type="datetime" name="html5datetime">
            <small>Works in Opera</small>
        </p>
    </fieldset>

    <div><button>Submit</button></div>
</form>

在我们的 DEMO 中的出现的特性，都顺利地运行在 Opera 上，但你仍需要使用 Chrome 或 Safari 来看其他小部分功能的实际运行状态（View Demo）。

了解更多:


工具 & 资源列表:


不需要插件的视频和音频


HTML5 对视频和音频特性规范文档的制定是被讨论最多的。除浏览器自带支持的明显好处外，评论点集中在浏览器提供商对音频/视频格式的不同选择。如果你准备使用HTML5的 <audio> 和 <video>，使你熟悉下面这些视频/音频的解码器和浏览器支持是非常重要的：


另外你还需要留意一下 Google 的 VP8 视频解码，这个将被作为一个开源格式来结束（格式选择的）纷争。HTML5    提供的一个解决方案是，让你可以指定多个不同格式的源文件，以便于用户浏览器选择它认识的文件。对于 < IE9 和旧浏览器，你将需要一个折衷的解决方案。

当你第一次尝试 HTML5 的音频/视频，你可能会想知道这些可能对你有帮助的东东：

    

  • 你的服务器必须支持你打算提供的音频/视频的 MIME 格式。你将需要检查一下其在本地服务器上是否被支持。
    • 

  • 如果你使用 Safari 来检测 HTML5 的音频/视频支持，需要安装 QuickTime Player，没有QuickTime Player 的 Safari 什么都不能播放。
    • 



简单代码示例：音频标记 (View Demo)

<audio controls>
        <source src="demo-audio.ogg" />
        <source src="demo-audio.mp3" />
</audio>

简单代码示例：视频标记 (View Demo) 

<video width="320" height="240" controls preload="none" poster="videoframe.jpg">
    <source src="demo-video.mp4" type="video/mp4" />
    <source src="demo-video.ogv" type="video/ogg" />
</video>

尽管相对于要依赖第三方插件已经迈了一大步，但上面提供的示例，只是一个开始。由于各个浏览都提供了不同外观的控制栏，你可能会希望改变他们以适应你的设计。看看下面例子如何利用 DOM API 来创造一个属于你自己的自定义控制栏。

简单代码示例：拥有自定义控制栏的视频 (View    Demo)

<video width="320" height="240" preload="none" poster="videoframe.jpg">
    <source src="demo-video.mp4" type="video/mp4" />
    <source src="demo-video.ogv" type="video/ogg" />
</video>

<script>
    var video = document.getElementsByTagName('video')[0];
    function toggleMute() {
        video.muted = !video.muted;
    }
</script>
<p>
    <a href="JavaScript:video.play();">Play</a> |
    <a href="JavaScript:video.pause();">Pause</a> |
    <a href="JavaScript:toggleMute();">Sound On/Off</a>
</p>

你还可以利用 DOM API  来为音频/视频做更多。而且如果你乐意添加一些其他的东西，将会把这个带向一个完全不同的级别。例如，你可以把视频放到了 HTML5 canvas     元素中。这将会允许你读取一个视频的像素数据、控制、和帧，并做一些你想做的好玩的东东。（自己看看：Blowing up HTML5 Video, Ambilight for HTML5 Video）

了解更多：


跨浏览器解决方案：


Javascript 交互：


编码、转换工具：


基于 JavaScript 的 2D 绘画


HTML5 中最让人兴奋的特性是 <canvas> — 那个用来作画的东东。在你的页面中插入 canvas 就像插入其他标记一样平常，但你将需要一些编程的经验来绘制形状、图表、动画、游戏、图片作品等。

在除 IE 外的所有现代浏览器（Firefox 3, Safari 3.1, Chrome 2, and Opera 9.6）都支持 Canvas。你可以使用 ExplorerCanvas 这个 Javascript 解决方案来为 IE 添加这个新特性。

简单示例代码: 基于指令的 HTML5 Canvas 2D 绘画 (View Demo)

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>HTML5 Canvas Demo</title>
    <link rel="stylesheet" href="html5reset.css" type="text/css" />
    <link rel="stylesheet" href="html5simple.css" type="text/css" />
    <!--[if lt IE 9]>
        <script src="html5.js"></script>
        <script src="excanvas.js"></script>
    <![endif]-->
        <script type="text/javascript">
        function draw(){
            var canvas = document.getElementById('mycanvas');
            if (canvas.getContext){
                var ctx = canvas.getContext('2d');

                // Draw Rectangle
                ctx.fillStyle = "rgb(255,0,0)";
                ctx.fillRect (10, 10, 100, 100);

                // Draw Circle
                ctx.fillStyle = "rgb(0,255,0)";
                ctx.beginPath();
                ctx.arc(125,100,50,0,Math.PI*2,true);
                ctx.fill();
                ctx.closePath();

                // Draw Custom Shape With Lines
                ctx.fillStyle = "rgb(0,0,255)";
                ctx.beginPath();
                ctx.moveTo(125,100);
                ctx.lineTo(175,50);
                ctx.lineTo(225,150);
                ctx.fill();
                ctx.closePath();

                // Draw Image From External File
                var myImage = new Image();
                myImage.onload = function(){
                    ctx.drawImage(myImage, 220, 10);
                }
                myImage.src = "sample.jpg";

            }
        }
        </script>
        <style type="text/css">
            canvas {
                border: 5px solid #ccc;
                background: #000;
            }
        </style>
</head>
<body onload="draw();">
    <header>
        <h1>HTML5 Canvas Demo</h1>
    </header>

    <figure>
        <canvas id="mycanvas" width="300" height="200">Fallback content, in case the browser does not support Canvas.</canvas>
        <figcaption>Works in Firefox 3+, Safari 3.1+, Chrome 2+ and Opera 9.6+)</figcaption>
    </figure>
</body>
</html>

了解更多:

工具 & 资源列表：

示例 & 应用：

让内容可编辑

如果你想让页面的某个地方，允许用户编辑页面，所有的你需要做的事就是添加 contenteditable 属性到父容器中。你可能曾在 WYSIWYG 编辑器中看过。这个属性是 HTML5 的一部分，且它几乎被所有主流浏览器支持（Internet Explorer 5.5+, Firefox 3+, Safari 3.1+, Chrome 2+, and Opera 9.6+）：

值得注意的是设置 contenteditable=”true” 只是允许用户编辑、删除、插入内容，并不会自动提供其他类似于 WYSIWYG 编辑器的保存或应用样式的功能。你将需要自己用 Javascript 来添加这些功能。

简单示例代码: 有加粗、倾斜和下划线功能的基本编辑器 (View Demo)

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>HTML5 ContentEditable Demo</title>
    <link rel="stylesheet" href="html5reset.css" type="text/css" />
    <link rel="stylesheet" href="html5simple.css" type="text/css" />
    <!--[if lt IE 9]>
        <script src="html5.js"></script>
    <![endif]-->

    <script language="javascript">
    function editStyle(cmd) {
        document.execCommand(cmd, null, null);
    }
    </script>
</head>
<body onload="draw();">
    <header>
        <h1>HTML5 ContentEditable Demo</h1>
    </header>

    <div id="democontainer">
        <div id="editingcontrols">
            <a href="#" onclick="editStyle('bold');">[Bold]</a>
            <a href="#" onclick="editStyle('italic');">[Italic]</a>
            <a href="#" onclick="editStyle('underline');">[Underline]</a>
        </div>
        <div id="editor" contenteditable="true">
            <h2>HTML5 Standardized Content Editing</h2>
            <p>Thanks to Microsoft; HTML elements are editable since Internet Explorer 5.5....</p>
            <p>To edit just start typing. To change style, select text and click on links in the tools bar.</p>
        </div>
    </div>

</body>
</html>

了解更多：

工具 & 资源列表：

拖放

HTML5 的拖放将会把与用户交互带向别一个等级，并将会对你如何设计用户交互产生重大影响。现今，Firefox 3.5+ 已经对此特性提供了最大化的支持，其他浏览还只是保守地支持了一小部分（Opera 完全不支持）。不幸的是根据现阶段浏览器提供商的执行状况，你将需要依赖大量的 Javascript 和 CSS 来让做跨浏览器支持。

注意：

  • 图片和超链接默认是可拖放的。对于所有的元素，HTML5 引进了一个新的属性”draggable”，这将用来设置元素是否接受拖放；
  • 下列事件对应 HTML5 的拖放：dragstart, drag, dragenter, dragover, dragleave, drop 和 dragend。当你要fire掉事件的时候，将需要写 function (事件处理器) 来处理你需要的，也可能需要给元素绑定事件或做事件指派来简化你的代码；
  • 拖放事件还让你可以通过被拖放元素来传递数据，使用事件属性”dataTransfer” 的 getData 和 setData 方法。
  • 你可以在不同的浏览器或程序中进行拖放。

简单代码示例: 将图片拖放到另一个窗口 (View Demo)

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>HTML5 Drag & Drop Demo</title>
    <link rel="stylesheet" href="html5reset.css" type="text/css" />
    <link rel="stylesheet" href="html5simple.css" type="text/css" />
    <!--[if lt IE 9]>
        <script src="html5.js"></script>
    <![endif]-->

    <script>
    function DragHandler(target, e) {
        e.dataTransfer.setData('Text', target.id);
    }

    function DropHandler(target, e) {
       var id = e.dataTransfer.getData('Text');
       target.appendChild(document.getElementById(id));
       e.preventDefault();
    }
    </script>
</head>
<body>
    <header>
        <h1>HTML5 Drag & Drop Demo</h1>
    </header>
<div id="dndcontainer">
    <div ondrop="DropHandler(this, event)" ondragenter="return false" ondragover="return false">
        <img src="item-1.png" id="club" ondragstart="DragHandler(this, event)" width="75" height="75" border="0" alt="" />
        <img src="item-2.png" id="heart" ondragstart="DragHandler(this, event)" width="75" height="75" border="0" alt="" />
        <img src="item-3.png" id="spade" ondragstart="DragHandler(this, event)" width="75" height="75" border="0" alt="" />
        <img src="item-4.png" id="diamond" ondragstart="DragHandler(this, event)" width="75" height="75" border="0" alt="" />
    </div>

    <div ondrop="DropHandler(this, event)" ondragenter="return false" ondragover="return false"></div>

    <div id="demonotes">Drag and drop images from one container to another. Works in all major browsers except Opera.</div>

</div>

了解更多:

JavaScript 解决方案：

稳健的数据存储

Web 存储规范提供了与 HTTP session cookies 相似的稳健的 Web 存储属性。他们是”sessionStorage” 和”localStorage”。

  • sessionStorage 用以存储浏览最顶层环境生存周期内的数据。例如浏览器 Tab 的或窗口持续打开周期内的数据。
  • localStorage 用以存储周期较长、多页面，以及多浏览器 session 的内数据。甚至持续到你重起浏览器或者电脑。

本地和 session 存储特性被如下浏览器所支持：IE8+, Firefox 3.5+, Safari 4.0+, Chrome 2.0+ and Opera 10.5+。

简单代码示例: 使用 localStorage 来创建页面计数器 (View Demo)

<p>You Have Viewed This Page <b>
<script>
    if (!localStorage.pageCounter)
        localStorage.setItem('pageCounter',0);
    localStorage.setItem('pageCounter',parseInt(localStorage.pageCounter)+1);
    document.write(localStorage.pageCounter);
</script>
</b> Time(s).</p>

<p><input value="Clear localStorage" type="button" onClick="localStorage.clear();location.reload(true);" />
<input value="Reload Page" type="button" onClick="location.reload(true);" /></p>

你也可以把上面的代码中所有的 localStorage 的实例替换成 sessionStorage 来测试 sessionStorage。你的计数器将会在你关闭 Tab 或窗口前正常工作。如果你重起浏览器，计数器将会重新计数 (View Demo) 。

了解更多:

JavaScript 解决方案:

更多____

除了已经讨论的内容外，还有更多你会想跟进了解的特性和相关的技术。这些是会帮助你研究的摘要列表：

网页版离线程序

HTML5 规范还定义了当用户的网络被断开后如何让它们继续与网页程序和文档进行交互。这个特性现在被 Firefox 3.5+, Chrome 4.0+, Safari 4.0+ and Mobile Safari 3.1+ 所支持。

你可以通过提供一个 manifest 文件来定义哪些文件需要被缓存，哪些需要在离线的时候有折衷方案替代。当用户访问这个页面，支持的浏览器将会猎取一个 manifest 版本。它将下载并缓存所有的涉及到的文件，并且当 manifest 相对于用户上次的浏览的版本有变化，它将会再次下载并缓存所有的文件。

跨文档通讯

新的规范还提供了”postMessage” 让我们可以向不同域的页面发送消息。这个特性在所有现代浏览器中被支持：IE8+, Firefox3+, Safari 4+, Chrome 2+ and Safari 9.6+。

用 className 访问 DOM 元素

我们在 Javascript 中最常见的事是选择 DOM 元素并动态地做一些事。我们大部分人在原生 Javascript 中使用 “getElementById” 来做这事。HTML5 规则已经添加了”getElementsByClassName” 方法，当我们要用 className 来访问元素的时候，这将会大大提升我们脚本的性能。 这个特性在除IE 外的其他现代浏览器都支持，有Firefox3+, Safari 3.2+, Chrome 2+ 和 Safari 9.6+。

更多的特性

官方规范文档：

相关技术

官方规范文档:

额外的资源

如果你还想要涉猎更多的知识，应该看看这些资源：

必要的书签
示例 / 展廊
帮助手册
框架
  • Less
    一个为多种屏幕宽度提供灵活多栏布局，由驱动于 HTML5 的 CSS 框架
  • 52Framework
    一个以让你在今天就能在项目上应用 HTML5 和 CSS3 的页面开发框架
  • SproutCore
    一个由 Ruby gem 写的 JavaScript HTML5 应用程序框架。
  • Frame
    Frame 是一个支持 Layout, Typography, Forms, Code, Table, Reset, 和 Print 标签样式化，并提供 HTML5 默认样式和元素支持的 CSS 框架
综述性文章 & 教程

示例 & 下载

你可以下载打包了所有 Demo 的 ZIP 文件。注意：视频/音频并没有包含在下载中。

查看Demo | 下载演示文件

==========

文章后面的那句话就不翻啦，套话。对于个人来说，目前会逐渐接触更多的 HTML5 和 CSS3 相关的新技术，希望能在后续的学习和研究中有所收获，并能将其应用到产品中，以提升产品在功能、速度和视觉上的体验。

原文请看：HTML5 Unleashed: Tips, Tricks and Techniques。

本文来源于：幸福的收藏夹

以下这些文章链接或许对您有帮助：

]]> http://www.shtion.com/3633.html/feed 0 30个给网页设计师的HTML5学习资源 http://www.shtion.com/3324.html http://www.shtion.com/3324.html#comments Sat, 05 Jun 2010 17:37:32 +0000 shtion.com http://www.shtion.com/?p=3324 HTML5致力于为前端开发提供全面的标记语 言。以下30多个资源可帮你开始学习HTML5。

Blowing up HTML5 video and mapping it into 3D space（将HTML5视频吹散并组成3D效果）最近我研究了HTML 5中的Canvas 和Video 标签，并发现了一些很酷的特性。其中之一就是Canvas.drawImage() api。此为详细介绍。

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3（用HTML5 和CSS3 打造向下兼容的网页）HTML5更加语义化，使用HTML5 我们不必在网页上布满没有意义的div。它引入了有意义的tag，比如 navigations 和 footers 使代码更有意义也更接近自然语言。

Coding A HTML 5 Layout From Scratch（HTML 5 布局）
这篇文章将教你

  • 用原有技术将元素放置在特定位置
  • 最新的技术潮流
  • Microformats与HTML5协同使用
  • 介绍HTML5与CSS3的新特性

Coding a CSS3 and HTML5 One Page Website Template（制作CSS3和 HTML5 一页式站点模板）这篇文章介绍了如何利用CSS3 和jQuery的新特性制作HTML5 网页模版。 HTML5 仍在完善当中，你也可以选择性的下载XHTML版。

Comprehensive video tutorial on HTML5（全面的HTML5视频指南）这 是一个叫Brad Neuberg的工程师制作的HTML5教学视频。

Create modern Web sites using HTML5 and CSS3（用HTML5与CSS3打造时尚站点）这篇文章介绍了许多HTML5的功能和语法及API，还有CSS3的新的选择器，效果和特性。最 后， 还将教你如何利用这些新特性开发一个网页。当你读完这篇文章，你就能用HTML5和CSS3开发一个自己的站点啦。

Designing a blog with html5（用html5设计博客）许多HTML5 特性要结合JavaScript API一起使用，以增加网页的互动性。但仍有一些新元素可让传统的Web1.0页面更加语义化。为了学习这些，我们来看怎样建立一个博客。

Designing for the Future with HTML5 and CSS3 : Tutorials and Best Practices（为未来设计：HTML 5 和 CSS3 指南与最佳案例）这篇文章将介绍用HTML5和CSS3 搭 建的几个最佳站点。

Design and Code a Cool iPhone App Website in HTML5（用HTML5设计和实现一个超酷 iPhone App 网站）

Have a Field Day with HTML5 Forms（建立HTML 5表格）这篇文站将教你 如果用HTML 5 和高级CSS技术与最新的CSS3技术建立一个漂亮的表格。

How To Create A Nice Blog Design Touching The Future(不用photoshop，完成网页设计)

How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6（怎样让所有浏览器都渲染HTML5标记——即使是IE6）这篇文章将教你如何用JavaScript和CSS，使 HTML5页面向下兼容，即使是IE6也不例外。

How to Make an HTML5 iPhone App（制作HTML5 iPhone 应用）这是 一篇针对iPhone的指导，但是许多技术也可用在兼容HTML5的手机浏览器上。

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using（HTML 5 和CSS 3：你将用到的技术）这篇文章使用HTML 5和CSS 3 搭建博客页面。如果你已经熟悉html 和CSS，将很容易跟上。

HTML5 for Beginners. Use it now, its easy!（HTML 5初学指南）给 所有具有基础HTML知识的初学者的HTML 5 入门指南

HTML5 Presentation这篇文章介绍了HTML5 的发展历史和它的基本特性

HTML5 Tutorial – Getting Started（HTML 5 入门指导）

How to Build Web Pages With HTML 5（怎样建立HTML 5网页）

Simple Website Layout Tutorial Using HTML 5 and CSS 3（HTML5和CSS3布局指南）HTML5最令人期待的新标签包括<header>, <footer>, <aside>, <nav>, <audio>，同时它还包括画图，线下存储数据，拖放等API。页面布局将会更易理解。这里将介绍一个最简单的HTML 5 布局页面，用CSS3 设置样式。最终结果如下

Structural Tags in HTML5（HTML 5 结构标签）HTML5 有许多标签帮助网页结构化，这能省去以网页中许多div

HTML5 Boilerplates（HTML 5模板）此文介绍了一些你能拿来就用的HTML5 模板文件

HTML 5 canvas – the basics（HTML 5 基础——Canvas）对HTML 5 Canvas使用方法的全面指导

HTML 5 Tutorials（HTML 5 指南）

Implementing HTML5 Drag and Drop: New Premium Tutorial（HTML 5 拖放）HTML5 的一个新特性就是拖放，不过IE早在5.5时代就支持拖放了，而HTML 5 的拖放也是基于IE的。本例将教你如果用拖放实现一个简单的购物车界面。

Preview of HTML 5这是一篇比较老的文章，介绍了HTML5的特性和优点。

The HTML 5 Canvas For Flash Developers : Drawing（HTML 5 Canvas 的画图功能）

The Power of HTML 5 and CSS 3介绍了HTML 5 与CSS3能创造的各种效果。

View Source Tutorial: Sticky Notes With HTML5 and CSS3（HTML5 和CSS3 打造便利贴效果）

webOS HTML5 Database Storage Tutorial（webOS HTML5 数据存储指南）HTML5 的本地存储功能将使数据存储十分简便。

Yes, You Can Use HTML 5 Today!本文介绍了一些现已被支持的HTML 5 特性，对初学者十分有用。

文章来源：ntt.cc

翻译：lovelyashes

以下这些文章链接或许对您有帮助：

]]> http://www.shtion.com/3324.html/feed 0 浏览器之战将进入HTML5时代 http://www.shtion.com/3060.html http://www.shtion.com/3060.html#comments Wed, 14 Apr 2010 14:59:44 +0000 shtion.com http://www.shtion.com/?p=3060 HTML5这个技术术语最近频频出现在与各大巨头相关的报道中：在iPad不支持Flash的争议声中有它的身影，谷歌因为它放弃了对自家产品 Gears的支持，而刚刚发布的IE9预览版对它的支持也成了一个热门话题。HTML5，这个尚未成形的Web标准为何如此受关注？它又 会如何刷新人们对网页浏览的认知？

  • HTML5标准将正式登场，挑战迫在眉睫

苹果CEO史蒂夫·乔布斯也许算得上是近期最意气风发的人了，iPad的发布再次聚焦 了全球的眼光。这款被乔布斯称为“最得意的作品”、“革命性的 作品”，会不会像iPod、iPhone一样风靡全球，为苹果公司创造又一个奇迹?显然乔布斯早有了肯定的答案，iPad对Flash斩钉截铁的拒绝也许 算得上是一个例证。

要知道，按照Adobe的说法，目前网站上70%以上的游戏和75%以上的视频都使用Flash，拒绝Flash，意味着用户使用iPad访问这些 网站的浏览体验将大打折扣，这也是iPad被诟病的主要原因之一。但乔布斯对此不以为然，因为在乔布斯看来，iPad一定会热卖，这也是内容提供商的一次 机遇，尽管这些内容提供商目前也普遍采用了Flash，但为了抓住机遇，自然会去适应不支持Flash的 iPad。而支撑乔布斯敢于一意孤行的最根本原因就是，乔布斯认为，没有了Flash，内容提供商还有更好的选择，那就是HTML5(目前已有多家网站针 对iPad推出了不包Flash的在线内容)。

与乔布斯的意气风发不同的是，微软的泰德·约翰逊(Ted Johnson)也许是近期最忙碌的员工，身为Office家族制图组件产品Visio的创造者和曾经的微软副总裁之一，Ted目前的身份是IE团队负责 图形和渲染技术的项目经理。摆在他面前的艰难课题，不仅包括IE过去版本饱受诟病的图形处理能力和渲染速度，更重要是如何帮助IE重回巅峰。

和Ted一样，微软IE团队的气氛也史无前例的紧张，因为他们已经清楚地意识到，IE在Windows平台上不可一世的地位正在土崩瓦解。近几年， 来自老对手Firefox、Opera等的攻击越发猛烈，Windows平台上的后起之秀Safari 4(Windows版本)和谷歌Chrome的抢滩登陆也令IE的日子越来越难过。不久前来自著名市场调研公司NetApplications.com的 数据显示：IE在过去一年内市场份额又流失了约8个百分点，跌至62%，而被寄予厚望的IE 8的发布和推广没能扭转这一颓势。

像Ted这样的高级管理人员加盟IE团队，表明了微软重振浏览器产品的决心，也让IE 9肩负的使命显得极为重大。前不久，在MIX10开发者大会上亮相的IE 9技术预览版已经证明了Ted等在新版IE上的努力已有成效。IE 9极大地改善了自身对Web标准的支持，并且宣布兼容大多数在Web中被广泛使用的API;最重要的一点是，IE 9以近乎谦卑的态度参与了W3C的HTML5标准制定项目，并积极参与了CSS 3和SVG(可伸缩矢量图形)的测试，通过了其中的大多数项目。

微软用IE9证明了微软对HTML5的高度迎合和欢迎态度，而不是仅做做姿态，而此前，Safari、Firefox、Chrome等浏览器早已进 行了广泛支持HTML5的努力。也许，更深的层次分析，对于IE浏览器来说，HTML5时代的到来，无疑是一个危机并存的大事件，一旦抓住这项技术，就大 有机会让IE重回霸主宝座。

那么，HTML5究竟是一种什么样的标准，居然有能力改变浏览器之争的格局?

下面我们看看HTML5将会带来哪些新Web体验。

  • HTML5带来新Web体验

HTML5是HTML的最新标准，目前仍在完善中。它的诞生得益于WHATWG(Web超文本应用程序技术工作组)，这个组织中的成员认为，此前以 文档为中心的理念无法有效地满足现代Web应用的需要，HTML的改进应以互联网应用为中心，并在未来的Web世界中扮演更重要的角色。

2007年，在Mozilla、Opera、苹果等力量的共同努力下，该组织接受了W3C的维护并成立了 HTML5工作组，并在后来的标准之争中打赢了XHTML，成为下一代HTML标准，新标准将包括更强大的用于交互、多媒体和本地化等方面的标签以及应用 编程接口 (API)。

目前最引人注目的变化要数和这两个标签的引入。在HTML5 之前，很多多媒体功能，如视频、动画、交互，通常都需要Flash、QuikTime 等插件来实现。而一旦HTML5获批准，音频和视频就会像今天的文本以及图片一样，成为任何网页的标准部分，意味着网页不需要加载任何播放器就能插放声音 和视频，这将大大减少浏览器的工作负担，并提高用户的体验。这个变化导致的结果之一是，浏览器可以摆脱很多插件而独立运行。

另外，HTML5突破了其作为标记语言的界限，增加了很多颇具实用价值的API，例如Web SQL Database API可以创建数据库对象从而长期保留当前会话下的数据，为浏览器的离线工作扫清了道路；再例如File API使本地文件可以通过拖放的方式上传到网站，甚至还提供了一个接口来关联上传数据从而提供显示上传进度和其他信息的方法。 在这些API的共同作用下，无需客户端和插件，完全基于Web页面的应用程序已经指日可待。

而在图像处理方面，HTML5拥有更加强大的图像功能：不仅大大加强了矢量图和位图，还内建了对3D技术的支持，以WebGL为代表的技术可以帮助 HTML5提供硬件3D加速渲染，借助系统显卡在浏览器里流畅地展示3D场景和模型。也许在不远的将来，我们甚至可以在网页中流畅地玩到魔兽世界之类的大 型3D游戏，这是Flash目前难以达成的任务。
浏览器之战进入HTML5时代。

可见，HTML5之所以会成为业界的焦点并成为HTML发展的必由之路，正是因为它再次夯实了HTML作为Web根基的地位。它抛开了臃肿的插件， 强化浏览器对HTML 的理解能力，不仅是对用户浏览体验的革新，也是对网络浏览器技术比拼重新进行发牌。

下面我们来看看HTML5的双刃剑效应。

  • HTML5的双刃剑效应

HTML5的变革令Web世界激动万分，同时也带来了很多人的忧虑。其中最明显受到冲击的就是Adobe的Flash和微软的 Silverlight技术。

Opera首席执行官Jon von Tetzchner表示：“下一代HTML语言将使Adobe Flash技术显得很多余，因为HTML5的开放Web标准提供了除Flash之外的富媒体网络内容发布方法。”的确，一旦HTML5标准可以支持大部分 的图形和视频解码，我们没有理由继续采用第三方的专有技术。

如果说Silverlight技术在微软产品线中占据的权重不足以使这个软件帝国感到焦虑的话，那么被晾在一边的Adobe对于Flash的灭亡预 言可谓噤若寒蝉。

Adobe一再强调Flash技术不会受到HTML5的威胁，却连声警告说HTML5标准将把互联网视频“扔回到黑暗时代”，这种态度更加表明了 Adobe对于HTML5的畏惧感。再加上它曾经的重要盟友苹果公司的产品——iPad平板电脑以及iPhone智能手机执意不支持Flash播放，让 Adobe更加怀疑苹果是否打算将HTML5作为未来的发展方向。

HTML5引发的Flash恐慌实质上是未来网络浏览器和相关技术定位的问题。过去，浏览器只负责网页基本内容、格式的渲染和基础脚本(如 JavaScript) 的执行，更高层次的需求，如视频播放、游戏、声音效果等由第三方插件或者专门的软件来完成。但是，网络技术发展的大势所趋是瘦客户端与云计算的组合，在这 个趋势下，更精简的客户端软件和更强大的浏览器能力已经成为业界的诉求。所以，HTML5的诞生并非偶然，而是时代的选择。

虽然标准的制定者是唯一的，但标准的执行者却是各方的商业力量。和HTML4时代一样，即使是再明确的标准也存在着滞后者和破坏者，企业总试图通过 一些诱人的专有技术来吸引开发者和用户，打击竞争对手，如微软的动态HTML技术，这导致的结果往往是更多的兼容性问题和安全隐患，影响标准的稳固地位。 在HTML5的背景下，浏览器将获得更多的权力，这不能不令人担心在未来的市场，会不会出现更多“本网站只支持IE 8以上版本”和“本影片只能用谷歌Chrome浏览器播放”之类的现象。

此外，正如Adobe Flash一样，原本依附于Web浏览器的插件技术将面临新一轮的生死抉择，究竟是留下来与HTML5奋力一搏还是另寻定位成了眼下最重要的问题。日前， 微软已经和诺基亚签定协议向Symbian系统提供Silverlight技术，这或许显示了微软重新定位Silverlight的思路：去HTML5暂 时去不了的地方，做HTML5暂时做不到的事。这对位于相似处境的插件厂商未尝没有借鉴意义。

无论如何，IE、FireFox、Chrome和Opera这些主流浏览器都已经积极地开始了对HTML5的试水。抛去了高筑的技术壁垒，扔掉了林 林总总的插件，未来的战争将更加考验这些浏览器提供商的商业智慧和技术能力。一场更加精彩的浏览器之战已经在 HTML5时代蓄势待发。

  • 附录：HTML5部分应用

http://mugtug.com/sketchpad/

这是一个基于HTML5的在线画板演示程序。拥有类似Windows 画笔的功能，甚至可以把一张处理后的图片正常保存到本地。

http://jilion.com/sublime/video

这是一个基于HTML5的在线视频播放程序。控制台可以渐变，鼠标隐藏，全浏览器屏幕显示，具有了一个浏览器基本的功能。

本文来源于：电脑报

以下这些文章链接或许对您有帮助：

]]> http://www.shtion.com/3060.html/feed 0 Google 搜索结果的富文本摘要开始支持 HTML 5 的 microdata http://www.shtion.com/2461.html http://www.shtion.com/2461.html#comments Sat, 13 Mar 2010 01:43:48 +0000 shtion.com http://www.shtion.com/?p=2461 HTML 5的新特性之一包括利用microdata来针对网页里的特殊架构信息做描述。今天，Google搜索结果的富文本摘要 开始支持microdata和 RDFa数据格式。只要使用microdata来标记出你的网页，Google就可以理解你网页里的评论、用户或事件信息，并将它们呈现在搜索结果的富文 本摘要里。

比如页面里对“必输客批萨店”的用户评论，HTML代码一般是这样的：

<div>
<h1>评论: 必输客批萨店</h1>
Written by Bob Smith
Jan 15, 2010
Rated <b>4.5</b> - Excellent
</div>

而下面这段HTML就是利用HTML 5的microdata特性，将评论标记出了用户名、发布时间和星级：

  • <div itemscope itemtype=”http://data-vocabulary.org/Review”>
  • <h1>Review: <span itemprop=”itemreviewed”>必 输客批萨店</span></h1>
  • Written by <span itemprop=”reviewer”>Bob Smith</span>
  • <time itemprop=”dtreviewed” datetime=”2010-01-15”>Jan 15, 2010</time>
  • Rated <b itemprop=”rating”>4.5</b> – Excellent
  • </div>

microdata在丰富性和简洁性之间做出了良好动平衡，你只需要用一些简单的HTML属性（比如itemscope、itemtype、 itemprop）即可对内容做出描述。rich snippets testing tool可以帮助你测试microdata是否可以被Google正确解读。

Via Google Webmaster Central Blog

以下这些文章链接或许对您有帮助：

]]> http://www.shtion.com/2461.html/feed 0 开发者对HTML5有什么期待？ http://www.shtion.com/2366.html http://www.shtion.com/2366.html#comments Tue, 09 Mar 2010 06:44:23 +0000 shtion.com http://www.shtion.com/?p=2366 Web 开发者对 HTML5 的期待越来越强烈，作为一个以文档为中心的置标协议，HTML 越来越不能满足现代 Web 应用的需要，何况，这个协议已经有超过 10 年没有更新了。HTML5 旨在解决 Web 中的交互，媒体，本地操作等问题，一些浏览器已经尝试支持 HTML5 的一些功能，而开发者们有望最终从那些 Web 插件中得到解脱。 过，需要指出的是，尽管一些重量级 Web 技术厂家，象 Apple，Google， Mozilla 基金会， Vimeo，YouTube 已经开始支持这个新标准，但W3C 表示，HTML5 前面的路还很长，它的一些细则目前还存在争议，主流的 Web 在转至 HTML5 之前还要经过很长的时间，而开发者们也不得不面临两难的境地，就是如何使用现在的技术设计出富 Web 应用，同时又为今后的 HTML5 做好准备。

富 Web 的现代 HTML

富 Web 应用和 HTML 之间并不般配，Web 之父 Tim Berners-Lee 这样看待 HTML，它是一种用来创建平台独立的超文本文档的置标语言，随着 XHTML 的诞生，W3C 也将网页视为文档。

这样那些视 Web 为应用平台的开发者十分恼火，2004年，Apple， Mozilla 基金会和 Opera 成立了一个超文本应用技术工作组（WHATWG），寻求创建一个 W3C 之外的标准组织，以打造一个更适合应用的 Web。

2007年，他们的 XHTML2 陷入永无止境的纷争之中，后来，W3C经投票决定吸纳 WHATWG 的工作成果，并作为 HTML5 的标准，这时，即使 Tim Berners-Lee 也对面向应用的 Web 伸出橄榄枝，他说，现在看来，我们面向 XML 所做的那些努力是无效的。

这并非说纯净的 XML 语法已死，虽然 HTML 的发展方向已改，但在 HTML5发展的同时，XHTML5 也在同步进行中，区别在于，XHTML 将适用于那些已经向 XML 转换的人，而对于普通开发者，则不一定使用 XHTML。

HTML5: 标签的改变

HTML5 吸取了 XHTML 2 的一些建议，包括一些用来改善文档结构的功能，比如，新的 HTML 标签 header, footer, dialog, aside, fugure 等的使用，将使内容创作者更加语义地创建文档，之前的开发者在这些场合是一律使用 div 的。

HTML5还包含了一些将内容和展示分离的努力，开发者们也许会惊讶，b 和 i 标签依然存在，但它们的意义已经和之前有所不同，这些标签的意义只是为了将一段文字标识出来，而不是为了为它们设置粗体或斜体式样。 u，font，center，strike 这些标签则被完全去掉了。

新标准适用了一些全新的表单输入对象，包括日期，URL，Email 地址，其它的对象则增加了对非拉丁字符的支持。HTML5 还引入了微数据，一种使用机器可以识别的标签标注内容的方法，使语义 Web 的处理更为简单。总的来说，这些与结构有关的改进使内容创建者可以创建更干净，更容易管理的网页，这样的网页对搜索引擎，对读屏软件等更为友好。

实现基于标准的富Web

然而，HTML5 最令人振奋的是那些让开发者们实现富应用的新 API，诸如图形，动画，多媒体，在HTML5 之前，这些功能的实现需要 Flash，RealMdeia，QuikTime 一类的插件，这些插件技术不仅容易带来安全隐患，而且它的受众是受限的。

HTML5 通过使用相应的置标语言解决了这些问题，内容创建者可以使用类似 MathML 以及 SVG 之类的语言实现数学公式和图形的创建，这些语言比 Flash， Silverlight 一类的格式更容易跨平台使用。

Web 开发者们更会为 HTML5 的 audio 和 ideo 标签欢呼，这些标签让 Web 页面轻松实现媒体的嵌入，它们的编码标准是中立的，意味着浏览器厂商可以自己使用何种编码输出媒体，而它的 video 标签更将使那些不支持 Flash 的移动浏览器获益匪浅。

Canvs 标签会让交互式 Web 图形更上层楼，开发者可以使用 JavaScript 操作 canvas 中的对象，实现实时的交互式图形操作，甚至实现交互式游戏。除了这些可以看到的变化，HTML5 还引入基于浏览器的程序缓存，将应用数据在本地缓存（就像之前的 Google Gears 插件），这不仅能加速 Web 程序的运行，还可以使一些程序在离线时仍可使用。事实上，Google 现在慢慢取消对 Gears 的支持，全面转向 HTML5。

浏览器插件：还不至于死

尽管 HTML5 推出了这么多新功能，但不要指望那些插件会一夜消失，纯粹的 HTML5 要实现目前这个插件世界的全部功能还要很长的时间，更不要说那些需要继续支持的旧系统。比如，虽然 Vimeo 和 YouTube 已经开始使用 video 标签输出视频，然而事情并不是那么简单，W3C 还没有确定使用何种编码方案，这意味着，那些视频并不能保证在任何设备上都能看。比如 Apple， Google 以及微软都主推 H.264 编码，而开源的 Firefox 则不愿意，因为存在许可问题。

另外，并不是所有旧系统都会以 HTML5 重写，比如，尽管 Google 自己都不再看好 Google Gears 而主推 HTML5，但 Gooel 承认，HTML5 并不能实现 Google Gears 的全部功能，将基于 Google Gears 的应用转换为纯 HTML5 是不可能简单实现的。

最后，五花八门的浏览器也会阻碍 Web 开发者们向 HTML5 转移，IE6，旧版本的 Firefox，Opera，Safari 都不支持 HTML5，因此，除非，绝大多数人的浏览器都升级到最新状态，否则，面向 HTML5 的开发仍将面临各种困境。

早期采用者

尽管微软已经表示，IE9 会支持 HTML5，但他们对此事也抱谨慎态度，微软认为，在 HTML5 标准都未确立的今天，说自己的浏览器支持多数 HTML5 功能是不妥的。事实上，任何组织都不可能比 W3C 更清楚 HTML5 的进度，而 W3C 认为，HTML5 标准仍未成熟，功能确立要到2011年前才能完成，即使到了那时，将这些东西确立为标准也需要到2022年，也就是说，XHTML1.1 到 HTML5 大约要15年。

不管怎么说，HTML5 将是未来 5 到 10 年最前沿的技术，那些早期采用这可以在网络中找到大量的体验站点，目前，体验 HTML5 的最好浏览器是那些基于 Webkit 引擎的浏览器，如 Chrome 和 Safari，Firefox 不太流畅。Web 开发者们可以使用目前的 HTML5 草案创建试验站点，当然在当前浏览器分布体系下，还会有些问题，线上最好的 HTML5 开发资源是 Mark Pilgrim’s excellent Dive into HTML5。

中文编译来源：锐商企业CMS 网站内容管理系统

以下这些文章链接或许对您有帮助：

]]> http://www.shtion.com/2366.html/feed 0 苹果新技术：在iPhone的浏览器Safari上使用网页应用 http://www.shtion.com/1945.html http://www.shtion.com/1945.html#comments Thu, 17 Dec 2009 14:53:13 +0000 shtion.com http://www.shtion.com/?p=1945 苹果从未放弃网页应用。iPhone的浏览器支持HTML5/CSS标准的多种新技术特性，功能甚至超过一些桌面浏览器，可以针对其制作出非常精美的网页应用程序。近日有媒体发现，苹果已经悄然在其iPhone使用说明网页中，应用了一项全新的网页架构技术“PastryKit”。而PastryKit架构网页全部使用Javascript写成，全世界的网页开发人员都可以使用它制作自己的网络应用。不过，由于Javascript的性能问题，该页面在旧款iPhone/iPod touch上访问并不流畅，但新版iPhone 3GS和新iPod touch已经没有这种问题。

事实上，该网页已经在iPhone Safari浏览器的默认收藏夹中存在了一段时间，iPhone用户只要输入以下网址即可体验：

从界面上看，该网页和普通的iPhone应用程序几乎别无二致，主要特色包括：

  • 完全隐藏地址栏；
  • 顶端工具栏固定，不会随滚屏移动；
  • 支持滚屏加速。

而如果将该网页快捷方式保存到桌面，则会体现出更加趋近与本地应用的特色，比如：

  • 完全隐藏浏览器底部工具栏；
  • 已访问过的项目保存到本地，无需网络连接即可使用。

可以说，这样的网页应用已经完全可以和App Store中的本地应用软件媲美。

网页应用版iPhone帮助页面视频演示

以下这些文章链接或许对您有帮助：

]]> http://www.shtion.com/1945.html/feed 0 以配置HTML5超文本置标语言的浏览器系统正在扼杀IE http://www.shtion.com/212.html http://www.shtion.com/212.html#comments Fri, 09 Oct 2009 04:57:56 +0000 shtion.com http://www.shtion.com/?p=212 以Google Chrome为首的新生代浏览器试图将浏览器升级成操作系统，通过在“云端”提供应用软件，来瓜分微软Windows的地盘。在IE浏览器击溃网景的初代浏览器，占据互联网入口10多年之后，改变的时机或许已经到来。下一代浏览器将如何开拓新的入口？它会用何种代码标准？以 Google为首的开放派，试图用其Chrome浏览器配以下一代超文本置标语言HTML5来控制全球每一个互联网用户。而曾经让HTML系列正在沉睡。

 

激活沉睡多年的HTML5

Google当然不是十多年前被微软轻而易举掐死的网景，早在其新生代武器Chrome出生前，就有了命中注定的同盟者—Safari、Firefox、Opera。正是在他们的共同支持下，HTML5才逐步走出非商业的地下层面。

“HTML5正在经历着新的轮回”，专门制定Web标准的W3C（万维网联盟）中国站成员鲁伊说道：“浏览器是土壤，HTML是水和肥料，网站（或Web Apps）是树。”土壤决定它需要的肥料，显然IE看不上W3C指定的肥料，不管是HTML的哪个版本。“这就像巴别塔的故事”，上帝不允许凡人达到自己的高度，于是变乱了他们的口音，使人与人之间无法交流。

“微软以为自己是神，它分裂了代码标准HTML。”

若不是昔日的硅谷金童马克·安德森在10多年前播下“莫瑞拉”（一个偏向于义工形式的软件开发行销计划）这颗小种子，微软或许可以通过IE轻松地掌控互联网的入口，让遵循IE的代码规则成为通用代码标准。

当互联网刚兴起时，急需一个通用的网络浏览器。1994年马克·安德森成立了网景公司并推出了“导航者”。这款图形界面的网络浏览器一经推出就大受欢迎，在华尔街的追捧下，一天之内股票从 28 美元涨到 75 美元。与此同时，微软则股价大跌，盖茨怒不可遏。

工作表上，盖茨在开发浏览器项目的一栏中，轻轻地打了勾。他想明白了，浏览器很重要。微软将操作系统作为人机接口，从而控制整个微机行业，而网景则控制了人们通向互联网的入口。微软必须把互联网的入口也收入囊中，如果得不到网景，就要将其毁灭。1995年12月7日，在偷袭珍珠港周年纪念日之际，盖茨给小弟们发了封火药味十足的电子邮件：“不管怎么看，网景都对我们不利，我们的现状就像被日本打败的美国舰队。立刻停掉手头所有工作，全力投入IE开发。”不久，标志微软向互联网进军的IE1.0面世了。

IE的前几个版本如同大学生最初的课程设计，非常不好用。直到其1997年推出了 IE4.0，终于赶上网景的浏览器。微软的员工将一块大大的IE标识放到了网景公司的草坪上，而网景的员工则把IE标识换成了72和18这两个数字，这也 是当时两者在浏览器市场的占有率，其中网景是72。

但依靠着最极端的捆绑方式，盖茨迅速干掉网景占据了浏览器市场90%以上份额，并成为了市场 规则的制定者和解释者。此后多年，几乎没有什么创新型公司再试图研发新的浏览器。而且，越来越多的网页开发人员跟随着占领了浏览器97.9%市场的微软， 他们明白，要去开发支持其他浏览器的软件，就好比去设计和生产一款只能在不到5%的公路上跑的汽车。

“当整个行业都开始遵守微软制定的规则的时候，全社会就出现了各种各样吃‘软’饭的人。因此，HTML4.0从1999年到现在都没更新。”鲁伊说。

然而，当2004年全球三分之一的网络都因针对IE漏洞的冲击波病毒而瘫痪时，安德森的小种子“莫瑞拉”长出了第一颗果实——安德森的学徒工，年仅9岁的天才少年莱克·罗斯所开发的第一版凤凰浏览器（之后的Firefox）诞生了。

安德森的小种子在悄悄长大，微软的IE6.0却原地转磨。盖茨甚至还一度宣称要“停止IE的更新，因为它已经足够好用了”。在他看来，如果能保住浏览器这一土壤不变，那么作为肥料的HTML自然也不需要改变。

IE停滞不前， Firefox则起而挑战，Google也开始秘密进行着浏览器计划。“莫瑞拉”的另一主力志愿者本·格德早在2005年就在Google享受免费三餐、 午间按摩以及20%的工作自由时间，他甚至还是开发Firefox的成员，以他的经验，开发Chrome不在话下。

盖茨不曾想到， 在击溃网景1 0 多年后的今天， 一切与I E 分庭抗礼的浏览器都与“ 莫瑞拉” 有着千丝万缕的联系。新一轮的浏览器大战打响了，Firefox、Chrome、Opera和Safari大有包抄微软之势，而盟军射向IE的关键一箭或 许就是HTML5，因为它能帮助Google成功地将桌面软件搬到网页上。

以Google为首的联盟军力推HTML5，并将之激活。

浏览器淘汰操作系统

激活HTML5，意味着“未来重要的不再是占据用户的桌面，而是占据用户的浏览器”，在 Google开发者大会上其副总裁维克·刚铎说道：“操作系统正在失去光彩。事实上，操作系统将变成一个应用，它们正好是发生启动的首个应用程序。”当 然，它也需要新的We b工具和新的标准，“特别是HTML5，驾驭新一代Web更具创新的应用。”

针对支持H TML 5的诸多浏览器，微软的回应是，应该对那些未经测试的技术抱谨慎态度。然而更接近事实的解释恐怕是，微软在自己的Silverlight中有自己的播放技 术，一旦HTML5作为代码标准，不仅微软的浏览器份额将直线下降，其桌面软件也会受到影响。相对的，以Web为核心的Google则希望通过能让Web 程序更快、更好、更实用的HTML5拿下桌面软件。这也是W3C赋予HTML5的使命，它将弥补上一代的不足，实现包括Flash、Silverlight和JavaFX等软件所能实现的功能。

一些软件开发商和浏览器厂商的产品已经集成了HTML5的部分要素，比如更快速的视频流 媒体传输和由浏览器保存更多数据以加速网页访问。这些功能都无需用户安装另外的插件。网络聊天平台Meebo则利用了HTML5中的一个名为 PostMessage的功能，当用户切换到其他网页上，聊天网页仍然可以接受和更新信息。而本地存储功能Canvas和Web Workers使用户可以通过浏览器做更多工作，且使Web应用运行得更快，提高用户的整体体验，模糊网络应用与桌面应用的界限。

这样几乎就能把“网络即计算机”实现了。

今天，人们越来越厌恶胖乎乎的操作系统，一些更有技术含量的做法不断被人提出。人们设想建设 一个巨大的服务器终端，其终端用户却只是价值不超过500美金的“瘦客户机”，各种应用软件都放在服务器上，用户使用的终端只用一个浏览器入口即可，需要 什么软件就通过网络到服务器上去取。

目前的Gmail和在线文档可以大部分替代Office，“沙盒”则防备着恶意软件的入侵， 而HTML5的好处是不再需要插件就能直接浏览音频和视频，支持离线文档，甚至还能玩3D游戏。在Chrome上，工作、视频、游戏、防毒、程序一应俱 全，甚至操作系统也指日可待。或许，以后我们开机几秒之后就直接进入了浏览器，一切操作都在上面完成。

“技术不是唯一的，还需要各种条件的成熟，比如硬件配合、成本等，还要受到网络速度、产业链条等因素制约”，鲁伊说。

射向IE的那支箭

Google力推HTML5，但它能射落IE，将微软这个老爷子打翻在地吗？

“假定各个浏览器开发商全面支持HTML5草案，2012年HTML5广泛应用，那么最终的推荐性正式标准将到2022才会发布。”HTML5标准的编者伊恩·希克森列出了时间表。

到2022年，还有13年。Web开发人员杰夫洛·夫特写了一篇非常“火辣”的文章来批评希克森的这份时间表：“我只关心可恶的现在，我的客户只关心可恶的现在，我的用户也只关心可恶的现在。”是的，开发人员关心的是如何结束如今HTML标准的混乱和缺陷。

但不管怎样，HTML5依然将变得很强大，强大到将Web的内容渗透到操作系统上面。而且， 依靠着“云计算”在背后的支持，可以慢慢模糊浏览器与操作系统之间的界限。依靠HTML5、RIA（富媒体应用）和云计算这些“战将”，Web将对传统软 件开发商造成巨大的冲击，微软则是首当其冲。

新一代浏览器们现在已经树立了新的标准，它们已经坐在了司机的位置。在以后的日子里，不会再出现某个浏览器像IE一统天下这样的情况。各式各样的浏览器意味着网络开发人员可以更多地依赖于标准，而或将逐渐摆脱陈旧浏览器的各种特殊问题。

 

Tips：

矛头直指微软的新一代浏览器技术

虽然已在近期表态将参与HTML5标准制定，但MSN和IE仍然是微软赖以继续粘住老客户的武器。

集成了文档处理、视频、3D游戏、音乐、照片分享、即时通讯、语音视频会议、多媒体编辑等多项功能的下一代浏览器，将把现有的视窗操作系统和以此为平台的诸多软件的市场份额瓜分豆剖。

HTML5的存废，将成为浏览器能否取代操作系统的关键。

在未来，网络即计算机，一切应用软件可以在“云端”找到，此时，一套极简的终端系统即可实现用户的所有需要。

他们是IE，甚至是Windows的主要竞争对手（从左至右）：莫瑞拉公司的 Firefox，提高了浏览器的安全性。苹果公司的Safari是速度最快，最简洁方便的浏览器。谷歌公司Chrome将成为更快，更安全的浏览器。 OPERA公司的同名浏览器，已经集成多种功能，更有创意。

本文来源：浏览器之家

以下这些文章链接或许对您有帮助：

]]> http://www.shtion.com/212.html/feed 0