html5的设计

其实是在Jeremy Keith在 Fronteers 2010上的主题演讲,我只是做了一些归纳:
伯斯塔尔法则:发送时要保守;接收时要开放。

避免不必要的复杂性

1、简化doctype为:<!DOCTYPE html>
2、头部信息中发送字符编码简化为:<meta charset=”utf-8″>
3、CSS引用可以不需要type。
4、script可以不需要type。

支持已有的内容

1、支持大小写名称。
2、属性值可以不加引号。
3、标签可不闭合。
比如以下四段都是合法的:

<img src="foo" alt="bar" />
 <p>Hello world</p>
 <img src="foo" alt="bar">
 <p>Hello world
 <IMG SRC="foo" ALT="bar">
 <P>Hello world</P>
 <img src=foo alt=bar>
 <p>Hello world</p>

解决现实的问题

链接包含块级元素,这点也是我的最爱。

内容模型

新增四个内容模型:头部(header)、脚部(footer)、分区(section)、文章(article)。
而像footer未必要放在底下,最重要的是它们的语义,跟位置没有关系。
在HTML5中,只要你建立一个新的内容块,不管用section、article、aside、nav,还是别的元素,都可以在其中使用H1,而不必担心这个块里的标题在整个页面中应该排在什么级别;H2、H3,都没有问题。
html5的vedio

<video>
 <source src="movie.mp4">
 <source src="movie.ogv">
 <object data="movie.swf">
 <a href="movie.mp4">download</a>
 </object>
 </video>

上面的代码中包含了4个不同的层次。
1、如果浏览器支持video元素,也支持H264,没什么好说的,用第一个视频。
2、如果浏览器支持video元素,支持Ogg,那么用第二个视频。
3、如果浏览器不支持video元素,那么就要试试Flash影片了。
4、如果浏览器不支持video元素,也不支持Flash,我还给出了下载链接。

一旦遇到冲突,最终用户优先,其次是作者,其次是实现者,其次标准制定者,最后才是理论上的完满。

innerHTML在IE下会改变原有HTML格式

其实这个事情有很多次都知道会这种现象存在,因为这一次是利用正则解析页面的某段HTML代码,因此对于是否“原样”获取HTML至关重要。

“原样”

对于innerHTML属性来讲是否能够真正“原样”获取所需要的HTML片断呢?其实不然,innerHTML获取的是运行时HTML(即:已经被渲染过的代码),我们可以先做个简单的实验:

<table><tr><td>test</td></tr></table>

这是很简单的表格HTML代码,当你尝试obj.innerHTML发现获取的结果会自动加入<tbody>标签。这是所有浏览器都会做的,你不要以为FF或Chrome就是原样了。
我很爱现,因为讲到这个时我就想到zoom这是IE特色,他可以帮助我们对某个节点重新渲染。因此他可以帮助我解决一些问题,特别CSS上面的,而这里恐怖用不上。
既然从innerHTML原样做不到,而以下有几种办法可以帮助我解决我要的问题:

解决办法

注释法:将所需要的HTML片断用“<!– –>”注释掉,至少目前所有的浏览器对注释的HTML片断不做渲染。同样跟放在textarea中,还是注释来得更真实一些。
改变读取方式:这一点可能要跟自己的需求而定,目前第三方的javscript框架对XHTML的解析非常方便,我的意思你明白的。

语义-可定义标题h1~h6

在资讯类型网站里面,我总是将任何一条对用户有用的消息视为新闻稿。当然我并不是在探讨如何写作,而是写作格式,这跟传统报纸并没有差别,反之在互联网里面相比报纸更加多元化、表现更加丰富,而本质还是新闻,用来快速传递最新真实消息。

新闻结构包括标题、导语、主体、结语和背景五部分。前三者是主要部分,后二者是辅助部分。这跟小学老师交我们写作文一样,这些是必备项。记得小时候写作文时标题是需要离四个格子,段落需要离二个格式,这叫约定,如果你不遵守她,反而要扣分。而伟大的互联网在这方面的表现力更加丰富、更加细化这些约定,同时从HTML技术角度也有之相对应的元素。而我现着重点在于标题,可别小看他喔,从新闻稿件角度关一个标题分类就有很多种:分眉题(又称引题、肩题)、正题(又称主题、母题)和副题(又称辅题、子题)。

别看他这么多,以之相对应的h1~h6标签。

外观

从外观来解释除了大小不一以外并没有任何区别,而同时大小来表示文章对标题重视程度。从新闻结构上解释,同级之间可以并排,但是不能越级(即:h2放于h1前面)。这样将会给那些试图通过理解网页结构的搜索引擎带来很大不便。

数量

新闻是只有一个大标题的,以之相对应就是h1,一般我只会在一个页面出现一次h1,整个页面相当于一篇文章,而他只有一个标题。而子标题或者更小的标题,还是要视情况而写,过多反而不能体现新闻结构特征,而太少可能很模棱两可的文章结构。

嵌套问题

h系列跟p标签是同等级,因此可以在<h1>…</h1>里面嵌套跟p标签同等标签,他们都隶属block系列。我曾经一度质疑到底h系列是否只保留单纯文字,至今我还保留这种观点,因为标题是代表本篇文章的结构。比如在h1内嵌套链接,既然是作为标题,就没有何来的跳转,也许是我比较苛刻,甚至我不希望嵌套<img/>标签,我更希望通过CSS来解决美观问题,毕竟 CSS 是专门来干这事的。

CSS中的background

这里我并不想讨论有关于他的写法,我讨论的话题是有关图像格式等一些细节上的话题。

一、关于PNG和GIF格式图像的总结

PNG是目前保证最不失真的格式,我非常喜欢在一些ICO图标、LOGO、菜单背景等等使用PNG图像,她总能帮我显示得非常精细。常用PNG格式分为PNG-8、PNG-24两种:

1、PNG-8和GIF的差别

PNG-8和GIF其实差别并不是非常大,但是针对PNG有两点非常好的地方:

a、相比GIF存储空间略小,但是PNG无法制作成动画。

b、PNG只需要下载1/64的图像信息就可以显示出低分辨率的预览图像。(这一点同样适用PNG-24)

2、PNG-8不支持半透明

PNG-8和PNG-24其实并不是颜色位的区别而是彼此之间的存储格式不同,有关这方面的知识并不宜讨论过多,我们只要知道PNG-8不支持透明,而PNG-24可以。

3、IE6下的PNG

关于这个话题主要是由于PNG-24在IE6下用灰色的底来代替,如果你的图像并没有半透明的我建议你使用PNG-8至少她比GIF有两点非常不错的好处。而唯一可以解决这个问题是在IE6下使用IE特有的滤镜,然而像iepngfixjquery.pngFix.js都是用来解决这个问题的插件。

二、引用地址的方式

这分为绝对地址和相对地址,绝对地址类似于:http://www.google.com/img/logo.png,相对地址类似于:../img/logo.png,两者在正常情况下都没有差别的。因为不管你用哪一种方式引用都是重新一个新的HTTP,然后下载相应的图像信息。

我比较喜欢用绝对地址,也许看起来会比较长一点,但是我认为这种方式比较直接。而针对相对地址在做防盗链你就小心了,因为在不同的浏览器他们彼此之间的referer来源是不一样的。

三、CSS Sprite,中文叫:CSS图像拼合

她并不是什么新技术,只不过是将一些图片拼合在一起,可以大大的减少HTTP请求次数,纵观所有大型网站都采用这种办法,比如yahoo是最为经典的,将所有小图标统一放在一张图像上。这也包括我非常喜欢的淘宝、苹果等等,都有非常经典的设计方案。

好吧,暂时先整理到这吧。

初识XFN

XFN这个词也是在我的博客上添加链接时发现的,但是查过资料WordPress早到2.7版本就已经内置XFN。只不过一直以来没有添加过链接,所以一直并没有发现。

XFN,是一个通过XHTML标记语言在网页上表示人与人之间的社交关系的方法。

为什么会有XFN?

随着网络发展出现越来越多的各式各样社交媒体:SNS、博客、微博、个人主页等等,而如今是无法分辨这些连接背后的关系。简单例子就拿我来说事吧,我有个人博客、腾讯微博、豆瓣等等,可这些东西对于电脑来说他并不知道都是属于我同一个人,往大一点的讲,我有一个好朋友他也有一个博客,如果我能告诉电脑说这个博客是我好朋友的。那这将非常有意义,这又让我想到“六度空间理论”说是:最多通过六个人你就能够认识世界上任何一个陌生人。

微格式

微格式(microformats):是结构化数据的开放标准。是包含数据的结构化的XHTML代码块的定义格式,由于是XHTML代码块,所以很适合人类阅读,由于是结构化的,又很容易被机器处理,很容易和外部进行数据通信。 微格式(Microformats)是开放的数据格式,面向的是普通用户,任何用户可以透过简单的程序读取微格式内容。

而XFN就是其中一种,这又让想到另外两种跟我们生活息息相关的:vCard、hCard微格式,分别是用来表示:名片、联系信息,可以想象一下,如果所有手机产家都采用这种标准的微格式来存储我们的联系信息,那么不管我们的手机丢了、被偷了、坏了,都可以导入到新的手机上。

XFN使用

他非常简单,只不过是在<a>标签中的rel属性标识链接和被链接彼此之间的关系。XFN目前有六个关系分类,大家有兴趣可以参考下方的网站。

另外你也可以在你的网页中加入XFN Friendly badge表示你的网页支持XFN。

XFN价值

说真的,目前貌似也没有表现出他有很好的用途,而GOOGLE以前有发表过搜索引擎支持XFN抓取。另CSS2.1开始也对支持属性选择器,哎····不过现在还有一半以上的人还在用IE6,真的非常让人纠结呀。

随着语义网成为目前的热门话题,这类开放标准东西也越来越让人关注。这单纯个人想法。

参考资料:

反spam利器reCAPTCHA

这个话题开始得先从OCR说起,打字员大家都不陌生的行业,按照纸上的文字手工输入到电脑里面,而OCR就是为了解决这种难题,可以将纸上或图片上的文本、图像转换成为电脑可编辑的文本。当然他并不是百分百准确的,所以这也是需要人工审核,当然相比手工输入快上几十倍。

我们得说说另一个话题:反spam,即反垃圾。

反垃圾最常见的做法是输入验证码,比如:QQ空间添加一篇文章需要输入验证码、开心网把密码输入错误时也会需要输入验证网等等,这都是有效反垃圾做法。验证码做法也相对于简单按照提供图片上的字符原样输入就算是验证通过拉。好吧,聪明的你如果懂得上下文的关系,你会想我想干坏事,我是不是可以利用OCR这种将图片转换成文本,这样我就可以穷举尝试登录某个用户,直到准确匹配到该用户的密码。好吧,也许我介绍了一个笨拙办法来非法干坏事,但他确实有效。

其实简单的说就是你所产生的这张图片计算机很容易通过OCR来识别,当然前提是也要被人类识别,要不然你怎么能输入呢?

而杜绝被破解的最简单、最直接的办法就是:让计算机看不懂、人类看得懂,不就行拉。

CAPTCHA项目是Completely Automated Public Turing Test to Tell Computers and Humans Apart (全自动区分计算机和人类的图灵测试)的简称,CAPTCHA的目的是区分计算机和人类的一种程序算法,这种程序必须能生成并评价人类能很容易通过但计算机却通不过的测试。这个要求本身就是悖论,因为这意味着一个CAPTCHA必须能生成一个它自己不能通过的测试。

reCAPTCHA就是CAPTCHA技术的最新应用,借助于人类大脑对难以识别的字符的辨别能力,进行对古旧书籍中难以被OCR识别的字符进行辨别的技术。这样也我所说的那个:最简单、最直接的办法。

由于许多人气极高的网站,如Facebook、Twitter和StumbleUpon等,都采用了reCAPTCHA现在每天都可以处理大约一百万个单词。

recaptcha样子

以此记录阅读笔记。

参考资料:

© 2017 卡片机色彩 沪ICP备13032872号-3

Theme by cipchk

to top