微观数据(Microdata)的数据模型

2 Comments

本文是Dive Into HTML5 第11章的一个小节,作者是 Google 的软件工程师 Mark Pilgrim。Dive Into HTML5是一本非常系统的讲解HTML5的一本书,相信能让你对microdata数据模型有一定的认识。这是我第一次的翻译,凭借拙劣的英文水平,所以翻译水平有限,若有不准确之处欢迎各位同学指正。
上一节:什么是微观数据
——————————以下为翻译的全文——————————

要自定义微观数据很简单。首先,你需要一个命名空间,他只是一个URL。这个URL命名空间实际上指向一个正在运作网页,尽管这并不是严格的要求。比方说我们想要创建一个描述一个人的微观数据词汇表,如果我拥有data-vocabulary.org这个域名,我会使用http://data-vocabulary.org/Person这个URL地址作我的微观数据词汇的命名空间。选择一个在你控制下的域名,这是一个简单的创建全局唯一的标识符的方法。

在这个Person词汇表中,我需要定义一些命名的属性。让我们从这个三个基本属性开始。

• name(您的名字)
• photo(链接到你的图片)
• url(与你相关的网站比如博客或者Google profile)

其中一些特性是URL,其他的纯文本,无论是那一种形式都会将自身与HTML标签的组成形式联系起来。假设你有一个个人资料页面或者“关于”页面。你的名字作为一个标题,一个<h1>元素。你的照片会是一个<img alt=”” />元素,因为你希望人们看到图片。任何的链接到你的资料页面的网址被作为链接,因为你希望人们可以点击他们。在讨论的微观数据模型之前,我们先把全部的个人资料信息被包裹在 元素中以把他与页面的其他元素分离开,像这样

↶ It’s all about me

Mark Pilgrim

[me smiling] weblog

微观数据模型是以名称/值形式一一对应成组的结构。一个微观数据的特性名(就像这个例子中的name,photo,url)始终存在于一个申明的HTML元素中。相应的属性值取至于该元素的DOM。对大多数HTML元素来说,属性值仅仅是该元素的文本内容,但是也有少数例外。

微观特性值来至哪里
元素 特性值
<meta> content 属性
  • <audio>
  • <embed>
  • <iframe>
  • <img>
  • <source>
  • <video>
src属性
  • <a>
  • <area>
  • <link>
href 属性
<object> data 属性
<time> datetime 属性
all other elements 文本内容

继续阅读:微观数据(Microdata)的数据模型

什么是微观数据(Microdata)

1 Comment

深入微观数据

在html5中有超过100个元素,一部分是表示语义的,另外的就只是script API的容器(比如:canvas)。纵观网页发展的历史,web标准的卫道者们争论哪些元素应当被包含在HTML语言中。HTML是否应该应该包含 <figure>,<person>,<rant>?标准被拟定,提纲被编写,开发者执行并运用,不断的推动web向前发展。

当然,一些想法没有被采纳,比如在HTML5中并没有<person>这个元素(同时也没有<rant>),没有任何力量可以阻止你在在开发过程中书写<person>这个元素,但是他不会通过验证,不会通过浏览器而工作,并且可能与未来的HTML规则发生冲突。

对,所以构造自定义的元素并不是一个解决办法,那么怎么才是web语义者倾向的做法呢?曾今有很多企图扩展以前版本的HTML的做法,最通常就是“微格式(microformats)”,在HTML4中用在class以及rel属性上。第二种选择是RDFa,原本是设计在XHTML中使用,但是在HTML中也能使用。

继续阅读:什么是微观数据(Microdata)

为什么要内嵌CSS?

4 Comments

一直很疑惑为什么像QQ首页,淘宝,163首页这样的大流量的网站为什么要CSS直接写在页面,难道这是为了减少HTTP请求么?虽然减少了一条HTTP请求,相反却不能作为外部文件被浏览器所缓存,网站的加载的数据量将会加大,表面看来这是得不偿失的。那为什要这么做呢?
内嵌会增加了开发成本么?
内嵌CSS不等同于直接将样式写在页面上,也不等于不利于修改和管理,其实也是程序读取外部文件再写在页面上。在本质上还是在调用一个外部的样式表。那内嵌到底有什么好处?

继续阅读:为什么要内嵌CSS?

活在像素的世界中

4 Comments

接上一文,蛋疼的马里奥,用css拼完了马里奥FC图片之后,我萌发了写一篇关于像素的想法。

何谓像素?“像素”(Pixel) 是由 Picture(图像) 和 Element(元素)这两个单词的字母所组成的,是用来计算数码影像的一种单位,和我们日常单位”厘米”类似,可以作为一种长度丈量的单位。而给我最直观的印象在于PS中放大8倍后,直观的1px × 1px小方块。

像素的构成就是色彩中的三原色RGB(红色,绿色,蓝色),这其实等同于彩色电子屏幕显色以及彩色印刷的原理。偶然的一次机会我好奇的翻开老实彩色打印机,黑色墨水不够,纸张通过多种颜色的覆盖,最后变成的黑色,当你用酒精清洗CRT显示器时,透过水的放大作用,你会打开整个屏幕都是花花绿绿的小点构成。

对于一个页面仔来说,每天与之打交道的最多就是像素了,在PS中比比量量,切切裁裁,每一处都要精确的像素单位。一张精美的设计稿,在放大X倍以后,无非全都是花花绿绿像素点揉挤在一起的,再有欲望也全打消了。为什么会这样,对于人眼来说,对微小事物分辨率有限,眼中图像会自动的混合相邻的颜色,所以其实图像的本质色彩远远大于我们所能看到的部分。

继续阅读:活在像素的世界中

Ballache确实..

2 Comments

昨晚无聊,用css拼了一个马里奥FC的地图,无图片的,真的有点Ballache。

在线地址 围观

提示:你可以先修改部分代码再运行。

继续阅读:Ballache确实..

Chrome扩展fight look

1 Comment

记得有一天我和锤锤在实验室看喵扑,看到一张倒立拍摄的图片,两个人都不约而同地扭转脖子去看,脖子都扭疼了,还是不能看清楚照片主角长什么样,就设想要是有这么一个可以扭转图片的小工具就太好了。刚好现在在家闲,看了一下chrome的API,做了这么一个扩展工具fight look。

安装fight look(前题是使用的google浏览器,听说FF现在也能用chrome的扩展所以在兼容上也作了FF的考虑)。

fight look

继续阅读:Chrome扩展fight look

阅读设置

书本模式 传统模式

开启 关闭

开启 关闭