晃晃悠悠~~~: Web Standard Technology

中国web标准主题blog聚合器

Sat, 07 May 2005 05:29:16 GMT

今天在蓝色看到中国web标准主题blog聚合器，主要是些国内一些关注web标准的blog，里面的许多文章都值得研究-------但大多都是翻译国外web标准技术网站上的文章，希望会有更多的好的blog被收录。

SharkUI的口号是：
SharkUI.com的目标是在Web标准、可访问性、可用性等领域帮助中国的网页设计师追赶并超越国际先进水平，特别专注在与UI密切相关的基于标准的网页设计、制作技术。

表单的Web标准解决方案

Thu, 21 Apr 2005 08:15:52 GMT

进入eYou.com后，马上就给新版的邮件界面转化成XHTML+CSS的工作，还好平时基本功还够扎实，有条不紊的干了下来。当然会遇到新的问题，比如，平时做网页，因为没有跟程序打过什么交道，较少使用表单。还好，世界还有Google，让我可以轻松应对新挑战。一些经验，写出来大家分享。

基于易用性（accesibility）的考虑，表单的标准写法应该在<form>和</form>之中包含fieldset和legend（说明），让用户明白该表单域的内容概要。简单的结构如下： <form> <fieldset> <legend></legend> ...... </fieldset> </form>

在某些场合或许你不愿意让也许fieldset和legend影响你的设计方案中的美观，好办，在CSS中把fieldset的border设置为0，legend的display设置为 none就行了。

在绝大多数情况下，表单的布局分两列，左边是标记（label），右边是输入框(input type="text"...)。如此简单的两列布局，我强烈建议不要使用表格。参考http://stylephreak.frogrun.com/uploads/source/cssform.php和http://www.aplus.co.yu/css/forms/?css=1（绝对有价值的两个参考，你已经可以不必往下看了），我们发现，Web标准通用的解决方法是，为label和input type="text"...的外围加上一个div，并把把该div的display设置为block。把label设为float: left;（这也是要把div设置为display: block;的原因）之后就可以让标记跟输入框同一行上了。让label 对齐的一个小窍门是，固定label的宽度，然后根据需要使用text-align向左或者向右对齐。设定宽度的小窍门是，使用单位em根据标记的最大字数来定宽度，不必辛苦测试px。

为了使我的阐述更容易理解，我简单写些代码：

XHTML：（部分） <form> <fieldset> <legend>表单实例</lengend> <div><label for="name">姓名：</label><input type="text" id="name" /></div> <div><label for="etc">其他等等：</label><input type="text" id="etc" /></div> <div class="submit"><input type="submit" value="提交" /></div> </fieldset> </form>

CSS：（部分） body {/*跟表单无关，设置页面的显示效果*/ width: 400px; margin: 20px auto; font: 14px/1.5 Serif; } fieldset { border: none; border-top: 1px solid #ccc; } legend { padding: 2px; border: 1px solid #ddd; background: #ececed; } div { display: block; padding: 5px 0; } label { float: left; width: 6em; text-align: right; } .submit { margin-left: 6em; } .submit input { padding: 2px; border: 1px solid #ccc; background: #ececec; }

查看效果。这只是一个极其简单的例子，你完全可以根据这样的思路来做出各种复杂的效果。我上面列举的两个连接本身就是极好的演示。

来自：南方农民

SEO基础

Tue, 01 Mar 2005 02:17:04 GMT

在日常工作中，有时候我们联系的客户中，偶尔会咨询有关搜索引擎定位和优化的问题。大部分情况下，这些客户和SEO顾问已有所商量，SEO顾问试图劝说客户为搜索引擎优化付出巨额投资，并且允诺“保证高排名”和“提交至500 000搜索引擎和页面目录”。

很多站长经常跟此类骗子公司打交道，不可理喻的是，很多人吞下诱饵，开始为“高排名和四处提交”付费。毕竟，谁不想让自己站点的搜索引擎等级排高一点呢？

为了帮助一些人避免为SEO付出不必要的费用，我愿意分享我已成功在每个良好的搜索引擎提高等级的经验，这些成功的站点不仅仅是本站，也包括了客户的网站。

首先，我得声明并不是所有的SEO顾问都是骗人大师——在商业上有很多规范的公司。然而，任何承诺“保证高排名”、“提交至500 000所搜引擎和页面目录”、“即时见效”或者“永久高排名”的人都极有可能是骗子。没有任何人、任何方法可以保证你的站点排名第一除非他们真的能控制搜索引擎，或者无论何时的高等级只是由于某个单词或词组的搜索结果罢了，如此而已。

触动我的是，当我彻底地思考获取良好搜索引擎等级的步骤时，SEO对亲和力、易用性和高质量标记——Web标准的原则的关注已经变得十分普遍。甚至会更好：使站点对人们更亲和易用，使标记更合法、符合语义，同时也更能吸引搜索引擎的机器人（robot，下面提到的蜘蛛也属此类）。

认真思考一下我在这里所描述的基础水平的SEO——先试试看，如果仍然没有获得你所需的结果，你可能就要求助于规范的SEO公司了。要是你已联系上关于优化你的站点的公司，询问一下他们将会对站点做些什么。如果他们建议了任何令人怀疑的方法，请小心为好。他们可能让你受到处罚甚至被搜索引擎索引所禁止。另一方面，假如他们的建议包括我在下面所提到的方面，他们极有可能会做好这一件十分精彩的工作。没有捷径

我要从一个坏消息说起，如果你正在寻找一条能获得好结果的快速和容易的途径的话。没有捷径。相反，准备好做艰苦的工作的准备，尤其是谈到你站点内容的时候。

同时你需要耐心。结果不会在一夜就能显灵。在为客户的SEO工作的时候，你在早期得解释清楚。创作优良的内容

这可能是你要做的最重要的东西，如果你想让你能在web中被找到的话。就算你的站点为搜索引擎机器人准备了最完美的技术，它也不会对你有更大的用处除非你同时填充优良的内容。是的，这是真的。

对我来说，优良的内容就是真实和合乎语法的文本，尽管对所有类型的站点来说这不是绝对必要的。不管你的站点是关于什么的，内容都需要独一无二和（或）有足够特色来吸引人们。更具体的说，它要对人们有用。

优良的内容能提升回头率。喜欢你内容的回访者最终会放上到你站点的连接，同时拥有大量的“入境”连接对搜索引擎等级大有好处，尤其是这些连接来自等级高的站点。

跟优良内容最亲密接触的是新奇的内容。一丝不苟地增加新内容，你给了访问者回访的理由。搜索引擎机器人也会更频繁访问你的站点一旦它们发现你经常更新，这意味着你增添的新内容能够迅速地得到索引。

为客户工作的时候，至于高质量的内容，web设计者是没有多大的责任的。通常，客户要自己写作，如果他们擅长于写和连续增添新内容会更好。我的经验是，这很少见。可以的话，试着让客户雇佣人来帮助他们写作，或者至少能让人来帮助他们编辑修改已经写好的内容。无论哪一种方法，让他们明白，没有优良的内容，不要白费力期待稳固的高等级。关注拼写

如果你使用英语写作，你大概会注意到美式英语和英式英语在拼写上的不同。colour和color，optimisation和optimization等等。还有许多经常会被拼错的单词（所有的语言都会发生）。

我不认同国际性拼写错误的观念，因为它跟“优良内容”的定义行反道。如果有多种拼写形式的单词或者易错词是你内容的重要部分比如关键词。不如在页面上增加一个专业词汇或者类似的来包含普通的拼写变种。描述性的页面标题（title）

由于简单的页面标题，具有描述性和相关性，你能更容易地让搜索引擎知道每一个页面是关于什么的，并且扫视搜索结果的人能够迅速地判断出你的文档是否包含他们所寻找的。页面标题同时是搜索结果列表中来连接你的站点。

因此，title元素是一个页面最重要的元素之一。有人甚至认为这是最重要的元素。

谈到title元素中文本的次序，我发现下面的格式工作良好：

页面标题 | 章节名字 | 站点或者公司名字

基于不久前的一个讨论，这可能是最佳的亲和标题文本格式之一。再说一次，亲和力和SEO是哥们俩。

不管做什么，所有的文档不要使用同一标题。这样做会让搜索引擎很难做，让通过搜索结果来浏览的人们困惑，让访问者不易发现该文档究竟是关于什么内容的。使用真实的标题

译注：此节所有的“标题”都是指heading。

为标题使用h1 - h6元素。使用图片作为标题也许可以使用你需要的字体图样，但搜索引擎不会给予更多的注意。就算你（也是必须的）使用alt属性来为图片指定可选文本，该文本无论何处不会有在标题元素里真的文本有任何近亲关系，这是真的，就算图片是插入在标题元素中。如果你还知道其他的，请告诉我。

假使不能使用真的文本，请考虑不同的图片或者Flash的可用替代技术。注意，这样做可能会有一些小小的冒险。自从图片替代技术涉及隐藏文本，因此搜索引擎可能会惩罚你。当前这个冒险似乎微不足道，但如果发生了不要说我没有警告过你。用搜索引擎友好的URLs

避免动态生成的URLs，它们使用一个查询字符串来让服务器知道从一个数据库中抓取哪一些数据。搜索引擎机器人对处理这类URL可能会碰上麻烦——它们可能在问号处就停止甚至连查询字符串也不看一眼。

请使用搜索引擎友好，人类可读的URLs来代替。这对你的等级和用户都有帮助。我见过搜索引擎结果的不可思议的提升，仅仅是改变一下站点的URL策略而已。

改变和重置一个站点的URLs得耍点小聪明，一些CM系统使其比其他的实现方法更难。但是这些努力是值得的。以下这对资源可以帮助你制作更好的URLs：

被连接到

解决这个问题没有容易和经得住考验的办法，除非——你猜一猜——提供良好的内容。进来的（incoming）连接对SEO非常非常重要。它们也许是SEO实现的最困难部分之一。

尽管如此。据我经验而言，进来的连接没有有特色的内容重要。举个例子。我们的一对你们可以叫做niche生意的客户，他们并没有什么站点连接到他们，但在分享了我在这里提到的知识给他们后，仍然能够在搜索引擎里边获得了好等级。使用合法的、语义的、精简的和亲和的标记

大部分浏览器都有其先进的功能来解析当前大部分站点所用的以代替HTML的标签粥。你不要依赖搜索引擎的机器人，它们比不上浏览器。校验你的HTML和避免表现标记——也尽可能使用精简和清晰的标记。经过提高内容到标记的比例，站点更快和更吸引搜索引擎。

高质量的标记将帮助你提高等级。

亲和力也是很重要的。让视力受损者更易使用网站的同时也让搜索引擎能找到它的路。记住，Google是盲人，所以就算你不关心盲人使用站点（但你应该关心的），你仍然得让站点具备亲和力。这就是说，你应该使用真实的标题（heading）、段落和列表，并且避免使用干扰搜索引擎蜘蛛的任何东西。

Flash和JavaScript不错，只要它们在导航和存取重要信息时不使用。不要在Flash文件内部隐藏内容或者JavaScript导航之后。在Lynx中留言你的站点，你会发现图片、CSS、JavaScript和Flash都关掉了。如果这样有问题，那么搜索引擎也可能引发问题。小心提交

为网页目录或者搜索引擎提交会有用的想法经常有些过高的期待，尤其是新网站，尚未被Google和其他收录的时候。继续向Google提交。没有什么副作用，但大多数情况下无论如何Google都会找到你。

两个值得提交的目录是Yahoo!目录（Yahoo! Directory ）和开放目录工程（ Open Directory Projec）。务必耐心——它可能会花上几个星期来处理你的提交，除非你给钱。不要尝试愚弄搜索引擎

别使用隐藏、框架、填充关键词、alt文本垃圾或者其他冒险的方法。幸运的话它们会在短时间内奏效，但你得冒被搜索引擎处罚和取缔的风险，这不是你希望看到的。

搜索引擎要精确的结果，不喜欢人们戏弄它们。千万不要这样做。不要使用框架

当为搜索引擎机器人提供可以抓取基于框架构建的站点的工作区之时，框架还是会导致问题，尤其是对于那些从搜索引擎找到你的人来说。

当有人随着从搜索结果列表里的连接来到一个框架站点，他们着陆在一个孤单的文档上，孤立于其父框架。这很可能导致迷惑，因为在很多时候站点一些致命的部分，比如导航连接，将会缺席。

一些使用JavaScript或者服务器端脚本语言来重置任何企图装载一个没有父框架的连接，使其回到站点的首页。这是一个对用户非常敌意的做法，而且对用户访问你的站点没有丝毫帮助。丢掉框架吧，它们同时也对易用性有害。小心浏览器侦测

如果你使用某类浏览器侦测技术，请确保不会阻挠搜索引擎蜘蛛（或者任何未知的用户代理）的到来。如果蜘蛛进不去，你也休想被别人找到。我已经看过这种事情的在一些熟悉的大公司站点上发生。不要在元标签（meta tags）上浪费时间

大多数搜索引擎没有再在meta标签上给予重要的价值。他们被垃圾制造者滥用严重。我建议使用meta描述元素，但就此而已。关键词没有害，但也没有什么帮助，所以它们不值得花费心机。

一些搜索引擎使用meta描述元素的内容在搜索结果列表上描述你的网站，所以可以的话，为每一个文档使用独一无二的、具有描述性的内容。唉，对我来说太多了

那么好吧。SEO精短指南：经常增加良好内容和确保你的网站良构（well-built）。下一步？

就像我在这篇文章开始声明的一样，这是SEO的基本指引。还有比我这里所说的更多能够提升你网站的事情要做，但照我在此提到的建议开始，按我的经验，能把你带很远。延伸阅读

原文：Basics of search engine optimisation，456BereaStreet

***********************************************************

SEO简介：

什么是SEO？

SEO就是Search Engine Optimization的缩写。意思为搜索引擎优化。

在网络营销中，搜索引擎优化排名是一种非常重要的手段，SEO主要就是通过对网站的结构，标签，排版等各方面的优化，使Google等搜索引擎更容易搜索网站的内容，并且让网站的各个网页在GOOGLE等搜索引擎中获得较高的评分，从而获得较好的排名。

在国外，搜索引擎优化已经成为一个行业，在中国的SEO行业从2003年才正是起步。

这里给大家介绍几个国内著名的SEO知识站点：

Intro to Search Engine Marketing - Start learning about SEM with this short overview.

Articles - Information from some of the top experts in the field.

Case Studies - Success stories showing the power of search engine marketing.

Editorials - Views and opinions on the search engine industry.

Jobs Available - Listings of current search engine marketing jobs.

Jobs Wanted - Post your resume for SEM jobs, or find people with the skills you need.

Research - Surveys and studies of search engine usage.

Search Engine Marketing Glossary - Common industry terms and acronyms.

Additional Resources - Additional off-site resources.

国外标准推广站点

Wed, 23 Feb 2005 01:42:05 GMT

国外标准推广站点
1．网站标准
http://www.zeldman.com/
http://webstandards.org/
http://webstandardsgroup.org/
http://www.nypl.org/styleguide/
2．有语义代码
http://brainstormsandraves.com/ar ... ics/structure/
3．校验（Validation ）
http://validator.w3.org/
http://www.htmlhelp.com/tools/validator/
http://webboy.net/presentation/validation.cfm
4．易用性（Accessibility ）
http://www.joeclark.org/
http://www.accessify.com/
http://www.juicystudio.com/
5．样式表CSS
http://webboy.net/presentation/ict2004/01.htm
http://webboy.net/presentation/ict2004/02.htm
http://webboy.net/presentation/ict2004/03.htm
http://westciv.com/style_master/academy/css_tutorial/
http://css.maxdesign.com.au
http://www.thenoodleincident.com/tutorials/css/

运用CSS,Web标准的商业网站

Tue, 22 Feb 2005 02:13:37 GMT

关于target属性的标准

Tue, 22 Feb 2005 01:46:19 GMT

在HTML 4.0 Strict和XHTML 1.0 STRICT里不允许在<a>标签里使用target属性,这是一件令网页设计者懊恼的事.在过渡的规范里还是允许使用的.但通过一定的方法,我们可以解决这一问题.

HTMl4.0规范里拿掉了target属性.但它添加了另外一个属性:rel.这个属性是用来指定包含链接的文档和所链接文档之间的关系的.规范里定义了其属性值(如:next,previous,chapter,section),在这些属性里大多数是用来定义一个大文档里各个小部分之间的关系的.事实上.规范里允许开发人员自由的使用非标准属性值做特定的运用.

在这里,我们采用一个自定义值external用于rel属性来标记一个链接,用来新开一个窗口.

不符合最新Web标准的链接代码:
<a href="document.html" target="_blank">external link</a>

运用rel属性:
<a href="document.html" rel="external">external link</a>

现在我们构建了一个符合Web标准的新开窗口的链接,我们还需要运用JavaScript是其实现新开窗口.脚本要实现的工作是当网页加载时,找到文档里的所有那些我们定义为rel="external"的超链接.

首先我们要判断浏览器.
if (!document.getElementsByTagName) return;

getElementsByTagName是DOM1标准里一个容易使用的方法,且它被现在的大多数浏览器所支持,因为一些旧的浏览器如Netscape 4和IE4不支持DOM1,所以我们必须通过判定这一方法是否存在来排除这些旧版本的浏览器.

下一步,我们通过getElementsByTagName方法取得文档里所有的<a>标签:
var anchors = document.getElementsByTagName("a");

anchors被赋值为包含各个<a>标签的数组,现在我们必须遍历各个<a>标签并且修改它:
for (var i=0; i < anchors.length; i++) {
var anchor = anchors[i];

找到要实现新开窗口的<a>标签
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")

接下来.建立属性值target并赋值"_target":
anchor.target = "_blank";

完整的代码:

function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
window.onload = externalLinks;

转自: http://www.d9d5.com/node/20
详细原文:http://www.sitepoint.com/article/standards-compliant-world/3

十个你应该知道的css技巧

Thu, 17 Feb 2005 05:55:06 GMT

今天在evolt.org看到一篇有关css技巧的文章，以前有看到过，但不全。
现在记录下来，以备温习。

Untold Mysteries of CSS

Tue, 01 Feb 2005 01:21:32 GMT

Molly 的这篇文章讲述了您可能不太熟悉的三个 CSS 的“秘密”。

1）Universal Selector（全局选择符）
全局选择符是由“星”号来表示，比如下面的这句代码

程序代码：

* {border: 1px solid orange;}

XHTML中的每一个元素的边框都变成了橙色的线条。
而下面的这段代码的意义又有些不一样

程序代码：

#content
* p {border: 1px solid orange;}

它表示Content所包含的所有子段落都没有被选择，而是他的孙段落或者是再往后的段落被选种了，即为橙色边框线条，这个文件的原文件中的代码如下：

程序代码：

<div id="content"> <h1>The
Black Cat</h1> <h2>By Edgar Allen Poe</h2> <p>I married
early, and was happy to find in my wife a disposition not uncongenial with my
own. Observing my partiality for domestic pets, she lost no opportunity of procuring
those of the <a href="http://vig.prenhall.com/">most</a>
agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey,
and a cat.</p> <div id="nested1"> <p>Here's
a grandchild paragraph, which is in fact selected.</p> <div id="nested2">
<p>Here's a great-grandchild paragraph, which is in fact selected.</p>
</div> </div> <p>This latter was a <a href="http://vig.prenhall.com/">remarkably</a>
large and beautiful animal, entirely black, and sagacious to an astonishing degree.
In speaking of his intelligence, my wife, who at heart was not a little tinctured
with superstition, made frequent allusion to the ancient popular notion, which
regarded all black cats as witches in disguise. Not that she was ever serious
upon this point - and I mention the matter at all for no better reason than that
it happens, just now, to be remembered.</p> <div id="nested3">
<p>Here's a grandchild paragraph, which is in fact selected.</p>
</div> <p>Pluto - this was the cat's name - was my <a
href="http://vig.prenhall.com/">favorite</a> pet and playmate.
I alone fed him, and he attended me wherever I went about the house. It was even
with difficulty that I could prevent him from following me through the streets.</p>
</div>

遗憾的是，IE 6.0 for Windows 还有 Macintosh 5.0, 5.15, 5.21 和 Windows 5.0, 5.5 都对全局选择符的支持不够，在使用的时候需要注意。

2） !Important or Not?（"!important"到底是重要还是不重要？）
"!important"从 CSS 1.0 的时候就有了，在这里的感叹号可不是表示“否定”的意思，它起到一个平衡的作用，用来平衡“作者的样式表”和“用户的样式表”。（作者样式表：是由作者设计用来表现文档的样式表；用户样式表：是又用户自己定义的以方便自己阅读习惯的样式表）
如果作者样式表有下面的一段代码

程序代码：

h1 {color: red;}

而用户的样式表中有如下的代码

程序代码：

h1 {color: blue; !important}

那么你猜想，它会浏览器会显示什么效果？
浏览器会解释用户样式表！
如果在作者样式表中换成如下的代码

程序代码：

h1 {color: red; !important}

那么，显示的效果不会改变，用户样式表仍然占主导地位。
有趣的是，在 CSS1 中，是作者样式表占主导，而在 CSS2 中却换成了用户占主导，他们正好相反。

3）Multiple Classes（多重类）
你可以用多个类来定义一个元素，每个类用空格来区分。例如：

程序代码：

其中，类“module”和“widget”的定义分别如下：

程序代码：

.module {width: 200px; border: 1px dashed #000; padding: 10px;}
.widget {font: 12px Arial, Helvetica, sans-serif; color: #333;}

多重类在使用的时候，很方便，但有一点要注意，在定义元素的时候，类不要使用过多，因为过度的使用“类”是不提倡的，应尽量去避免。

现在你也可以在的 Web 中使用这些“秘密”了，它们会给你带来一些不一样的感受与效果。

CSS属性的建议顺序

Fri, 14 Jan 2005 01:23:00 GMT

出处Mozilla，可以参看Mozilla.org网站上随意一个css
不得不承认这是一个好的规范，而且有必要

/* mozilla.org Base Styles
* maintained by fantasai
* (classes defined in the Markup Guide - http://mozilla.org/contribute/writing/markup )
*/
/* Suggested order:
//显示属性
* display
* list-style
* position
* float
* clear
//自身属性
* width
* height
* margin
* padding
* border
* background
//文本属性
* color
* font
* text-decoration
* text-align
* vertical-align
* white-space
* other text
* content
*
*/