焦秋野 | 关注网站设计,前端资讯,用户体验,SEO,网站设计 » html5

代码如诗

admin — Thu, 29 Jul 2010 05:14:13 +0000

【原文（翻译）】http://horans.cn/what-beautiful-html-code-looks-like/

【原文（英文）】http://css-tricks.com/what-beautiful-html-code-looks-like/

如何在站点上使用HTML5

admin — Mon, 26 Jul 2010 00:35:07 +0000

已经有许多文章是关于HTML5的了，例如“HTML5有什么期待？”和“HTML5会如何改变网络”之类的，但是对于Web开发人员来说，最主要需要知道的是：我现在可以用上HTML5来做些什么，我怎么开始使用它？好消息是现在已经有不少的HTML5里的东西可以使用了。但是，开始你就必须要明白一件事情，你需要知道你的受众如何，否则的话你就不该使用HTML5。假如你的站点的访问大部分人都是在使用IE6，那么你完全没有任何理由使用HTML5。另一方面，如果你站点的访问者都是使用手机浏览器，如iPhone和iPad，那么你还在等什么呢？马上就可以开始动手了！等等，这里有一些准则，看完再动手不迟。

你现在可以使用哪些HTML5特性？

虽然HTML5标准现在仍然是个草案，在标准化组织手里依然还在商讨，但是重要的部分已经被许多现代的浏览器实现了。Apple Safari, Google Chrome, Mozilla Firefox, Opera和Microsoft IE9都已经很好的支持了HTML5的部分特性。

先来看看各浏览器在HTML5TEST网站上的得分如何：

* Apple Safari 5.0: 208

* Google Chrome 5.03: 197

* Microsoft IE7: 12

* Microsoft IE8: 27

* Mozilla Firefox 3.66: 139

* Opera 10.6: 159

看起来很明显，非IE核心的主流浏览器大部分都对HTML5支持良好，它们可以使“使用了HTML5草案的网站”工作得很好。

回到开始，你现在就可以使用HTML5的doctype了，没有理由不使用，你甚至可以在整个网站里进行查询和替换：

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

变为：

下面这部分代码看起来更简洁和直接，不是吗？如果浏览器用一个标准兼容的方式来渲染你的网页，那么他们现在仍然会这么做。

说说视频吧。许多关于HTML5的出版物都会提及到目前的竞争者，一共四个：Flash, H.264， OGG和WebM。所有这些在未来都有可能成为一个标准格式，而且没有一个可以在所有平台所有浏览器上正确播放，很悲哀吧，看起来，浏览器的赞助商们在短时间内还没有为这个特性准备一个公共的格式。

所以，显而易见的是，Video标签现在还没有到可以应用的阶段。但是等下，人们应该期待HTML5的视频标签是与格式无关的。事实上，因为视频可以包含多个Source标签，它也必须得这样工作。如果你的浏览器不支持第一个选项，那么就会去尝试第二个，再第三个，四个，五个……

处理这样的情况的HTML是一个开源项目，支持基于网络的视频，不使用任何脚本和浏览器嗅探，可以在这里找到。

从语义上讲，HTML5的一个大的改变就是那些语义明确化的标签。可以看到的改变是，目前你的站点上充满了类似于这样的代码：

而在HTML5中，你可以这样表示：

是不是语义更明确？当然，我们还是要用CSS[层叠样式表]来格式化这些元素。但是等等，没有一个IE版本可以支持这些标签！这对于人们来说是一个巨大的问题！我们真的这么倒霉吗？谢天谢地，我们还有一个解决方案：所有你需要做的事情就是把下面的代码粘贴到你的页面的HEAD标签里：

HTML5 Shiv是一个开源的项目，基于一个简单的发现：如果你在IE里创建了一个DOM元素，那么你就可以用那个名字在样式里使用。例如，如果你使用

document.createElement(“foo”)

创建了一个DOM元素，那么你就可以在当前页面里加入任意数量的foo标签，而且IE会格式化它们。HTML5 Shiv里包含了一些IE不能识别的HTML5元素，然后一个一个的去创建它们。这样你就可以使用这些HTML5标签了，例如：

Article, Section, Header, Footer, Nav

智能表单，另一个使HTML5更聪明的特性。如果你对于每次写同样的脚本去检查邮件地址的合法性或者类似于电话号码、网络地址之类的感到厌烦的话，那么你不是一个人！有理由去让浏览器去完成这些烦人的工作，不是吗？相当正确。

下面是语法：

那些旧的浏览器会如何处理？比较聪明的部分：如果它们看到一个TYPE属性有个值不认识的话，那么它们就会用默认值Text去渲染这个元素，这正是我们所期望的向下兼容的结果。支持HTML5的浏览器会自动去验证这个字段类型，但是，你最好还是不要把以前的脚本扔掉，至少——也要在IE9普及以后。

如果你还想知道除了验证之外，支持这些类型的浏览器还做了些什么事情，那么你可以在iPhone上试试这些表单。你会注意到与表单关联的键盘类型都会发生变化，有的时候是数字类型的，有的时候是字母类型但附加了一个@符号，还有的甚至直接有一个按键.com，这就是这些元素的魔力。所有你需要做的就是改变这个type的属性值而已。

还可以更智能一点，这里还有个新属性：

placehoder

这个值可以简单地指定一段文本，你经常在网上看到的效果，没值的时候显示此文本，单击的时候值变成空，离开又恢复成该文本，以前要用到Javascript处理，现在浏览器会为你做这个事情了。

有哪些HTML5特性你马上就可以使用？

不是所有的HTML5元素都已经准备好可以使用了，因为种种原因（这些原因是没有一个缩写为 IE 的），浏览器支持马上就要来了，在不远的未来，你马上就有两个元素可以使用了。

魔幻字体，每个设计师都有一个梦想，希望站点的访问者们都安装了他们在设计时所需要的字体，为此，以前可谓手段百出，用图片，Flash等等不一而足，现在，他们拥有了这个权利，你可以强制你的访问者安装你指定的字体了。这就是CSS3的支持： @font-face属性。Firefox 3.5以前的版本和Safari的移动版本(iOS 4之前）不支持这个属性，如果你的站点有很多这样类似的访问，那么你可能就得等等了。

无论如何，其实没有真正的理由，让所有的浏览器都使用同一种字体的。如果你想提供给那些支持此属性的浏览器以自定义字体，然后让不支持此属性的浏览器有一个可替代的字体也是一个不错的解决方案，这个时候，Font Squirrel’s @font-face 生成器是个不错的去处。

阴影和圆角，让很多设计师高兴的东西来了，文本阴影、区块阴影，区块圆角特性等现在都CSS3支持的标准了。再说一次，如果你不想用像素级别的完美来衡量在不同浏览器中的渲染的话，那么你现在就可以开始使用这些特性了。CSS3 生成器会帮助你做好这事。

圆角 (Firefox 3+, Safari 3.1+, Opera 10.5+, Chrome 4+, IE 9+)

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

文本阴影 (Firefox 3.5+, Safari 1.1+, Opera 9.6+, Chrome 4+)

text-shadow: 5px 5px 3px #CCC;

区块阴影(Firefox 3.5+, Safari 3+, Opera 10.5+, Chrome 4+):

-webkit-box-shadow: 10px 10px 5px #666;
-moz-box-shadow: 10px 10px 5px #666;
box-shadow: 10px 10px 5px #666;

哪些特性有一天你会用到？

这个目录里包含了开发人员和设计师已经想了很多年的特性。可惜的是，在它们能够在现实世界真正使用之前，可能还得再等上几年时间。

智能表单，前面已经提到过了，但是其实还有很多更好用的元素没有提及，但在更广泛的支持之前，是没有办法使用的。

滑动选择器：

颜色选择器：

日期选择器：

带有正则验证的输入框：

必须输入的输入框：

所有这些标签都没有跨浏览器，跨平台实现支持，不过当那天到来的时候，你一定会很向往使用这些标签的。

打印式布局，另一个CSS3的特性，全面实施尚需好几年的时间。给设计师们提供了多列布局的特性。目前只能在Firefox和Safari的测试用例里实现。

-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;

地理位置检测，随着基于位置的服务增长，例如Gowalla和Foursquare，对于浏览器来说，知道用户在哪里是很有用的。所以，基于手机的移动浏览器率先实现这个特性也就不足为奇了，Firefxo 3.5和Safari 5已经开始提供地理定位的支持了。(Chrome的类似服务是通过Gears实现的，不过正在逐步转向到HTML5上面）。

离线工作和本地存储，在你没发现你没有网络连接的时候，将数据存储在云端是非常伟大的主意；或者你有一个应用程序，需要处理大量的数据，这样就不得不频繁地在服务端和客户端之间往来，比你想像得到的还要多；又或者你的移动数据流量有限，你想在手机上存储更多的数据以避免太多的流量损耗，这个时候的答案就是，使用本地储存来使应用程序离线工作，当连线的时候再同步到云端的功能。

支持此功能的浏览器有：Firefox 3.5+, Safari Mobile 3.1+, Safari 4+, Chrome 4+。

画板、动画和变换效果，HTML5的承诺之一使用Canvas元素和一些CSS3属性可以实现是全说明和全动画的网站。这来自2010年7月12号的标准。

规范	说明	IE	Firefox	Safari	Chrome
Canvas	动态图形	9	3	3.2	3
Canvas 文本API	动态文本	9	3.5	4	3
变换 Transitions	简单的属性变换	?	4	3.2	3
动画 Animation	高级的属性变换	?	?	4	3
3D Canvas图形/WebGL	硬件加速的动态3D图形	?	4	5	5
变形 Transforms	旋转和元素缩放	?	3.5	3.2	3
3D变形 3D Transform	通过第三维进行变换	?	?	5	?

绿色=已实现，红色=没有已经计划

使用最尖端的HTML5的捷径

如果你已经迫不及待地想IE8老死掉，那么，有很多种方法可以跳过它继续往前——再说一次，依然取决于你的访客。查看一下你的站点的访问日志，看看访问量最多的浏览器标头是什么。这其中有一种方法就是，例如，使用Google的Chrome Frame，给IE嵌入了一个Chrome实例，如果你明白你站点的访问者可能已经安装了GCF[Google Chrome Frame]，那么你可以在你的HEAD里加上一行META标签，强制IE浏览器使用GCF来显示你的网站：

[编者：不过提醒你的就是，这样做会使得原来的IE=7的IE7兼容模式失效，如果选择请自己权衡。]

再加上一小段的Google提供的脚本，可以让没有安装GCF的用户跳转到GCF的安装页面，那么你也许可以跳过IE的限制。[编者：我疯了，怎么看怎么像是免费为GCF打广告来带来免费流量……]

列举在本篇文章里的元素只是当前HTML5和CSS3草案中的一小部分，如果你不得不使用另外的一些新特性，那么去检查一下现有的开源项目是很有必要的，这样可以将浏览器兼容性的问题降到最低。

许多媒体在报道HTML的时候都把焦点放在立场上面，什么“不到2022年”，什么“Flash杀手”之类的。现实是，HTML5是长期以来的需要和对久未更新的HTML4的一次全新升级——所以，今天你就可以开始使用它了。

给网页设计师的30个HTML5学习资源

admin — Sat, 05 Jun 2010 00:07:28 +0000

早在几个星期前，Adobe就发布了Dreamweaver CS5 HTML5 Pack的预览版下载。众所周知，HTML5在互联网领域掀起了一场大论战，并让Adobe的日子很难熬。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最令人期待的新标签包括

视频-html5的魅力

admin — Mon, 12 Apr 2010 00:05:51 +0000

HTML5 不断完善中Flash或许被这项新技术吞噬
看完这段视频，以及两个典型网站的对比.对于很多没了解过Html5的朋友也能明显感觉出 HTML5和 Flash的不同之处，当你进入这个网站的时候你的Chrome浏览器或者你的Firefox自动翻译插件问你是否翻译这个网站内容, 如果这是 Flash 那么是否能如此便利呢？

如果这些特效在手机上流畅运行？

————————–

都是用来处理图像的在线网站

HTML5: http://mugtug.com/sketchpad/
Flash: http://www.photoshop.com/

简单且明显的测试：用鼠标疯狂的拖动两个网站上可拖动的物品，能看出速度上的不同..
————————–
这是 html5视频演示网站
http://jilion.com/sublime/video