最近,一个名为极客公园(点击注册极客公园)的Web2.0网站上线了,这是一个以以分享科技、商业信息为主题的社区,功能包括微博客、捕风捉影、下注、投票等功能。由于本人一直在外出差没有太多时间更新博客,但是还是忙中偷闲体验了一把极客公园给我们带来的新的web2.0体验。
这看来没有太大的创新。但是这是一种思路:微博的专业化。我可以在微博上畅所欲言,但是有一种机制可以把内容更加细分,我们根据自己的需求查看自己需要的那一部分。信息冗余已经成为微博的一大弊病,极客公园正在试图改变。

今天突然发现一个很奇怪的问题,一些专注于CSS和XHTML、Web 2.0和Web标准的网站都在探讨如何去掉当鼠标点击时超级链接周围的虚线框(outline)如,outline:none 或者 outline:0。可能有时候默认出现虚线框(outline)会影响美观,但是它的存在必然有它的道理:那就是提高网站的易用性,特别是给使用键盘导航的人带来极大的便利。我们在讨论语义化,易用性的同时却总在做与其背道而驰的事情。

一、虚线框(outline)给键盘导航带来便利

我在阅读文章的时候有个习惯:极少使用鼠标,基本上全部靠键盘。而使用最多的就是Tab键、PageUp、PageDown、Entern还有四个方向键。Tab键用来导航超级链接,可以在不同超级链接之间切换,选中某链接之后直接按Enter进入(现在你就可以使用Tab键在本页上看看效果)。当Tab键聚焦(focus)某链接时这个链接的周围就会出现一个虚线框(outline),代表这个链接已经处于焦点状态,确定即可访问。当然很多人可能会说,使用鼠标多么方便啊,干吗用键盘?在这里我想说几个理由。

阅读全文——共1212字

数周前,3月20日,W3C放出了其官方网站新界面的Beta版。实际上,这不仅仅是在视觉效果上焕然一新,在网站内容和架构上都发生了不小的变化。

现在你可以通过beta.w3.org访问该页面。你还可以通过关于W3C网站的重构(About the W3C Site Redesign)和视频“重构概览”来了解更多更详细介绍。

你可以分别通过“Web内容可访问性指南2.0(Web Content Accessibility Guidelines (WCAG) 2.0 )”和HTML4.01两个网站体验新版的标准界面。

阅读全文——共469字

18
Filed Under (CSS与JS) by dudo 评论数(2)

    译者注:我在前几天的博客中翻译了一篇《20个对学习CSS3大有裨益的资源》的文章,其中推荐了Get started with CSS 3,本文为其中文译本,转载请注明。

    本文在发表时,Firefox 3.1还没有问世,现在其版本已经更新到了3.5,Opera也已经更新到9.6。当时还没有Google的浏览器Chrome,而现在Chrome已经升级到了2.0版本。不过Chrome和Safari都属于webkit系浏览器,因此在CSS 3的支持上差异不大。Internet Explorer也已经更新到了8.0,但是可惜的是它仍然不支持border-radius属性。

阅读全文——共3443字

继续阅读:CSS 3入门

W3C验证并不是要求你的网站一定要通过,但是它能告诉你你的网站HTML标记语言中的错误。验证器中指出的错误和警告是提示你的XHTML代码还不够完美的重要信号,虽然在不同的浏览器中会看起来并不太一致。下面列出了10常见的错误并附带了解决办法供开发者参考。
在文章开始之前,先给大家几条不错的建议供大家实践。

忽略警告信息。如果验证器显示你的页面中有12处错误83处警告,那么你只需考虑其中的错误项目即可依次修复错误。
按照从下到下的顺序修复其中的错误,因为浏览器在读取HTML代码时是按照从上到下的顺序的,所以你按照两样的方式修复错误最省事。
每修复一项错误即重新验证一次。经常出现的现象是前面的一个错误往往引起下面一系列的问题。同样,有时候,如果方式得当修复一个错误可以修复后面的好几处错误。每次修改之后重新验证可以保证你完全修复页面中的错误。
上面的几条小技巧后,让我们看看我们的网站不能通过W3C验证的10个常见原因。

Eric A. Meyer 对基于 Web 标准的 CSS 与 HTML 绝非一知半解,他是这个领域杰出的专家,曾写过不少 CSS 方面的书,是 An Event Apart 的合伙创始人,A List Apart 团队成员,还是 Complex Spiral Consulting 的创始人。另外, Eric Meyer 7年来一直是 CSS Working Group 资格深获邀专家,他们负责维护和开发 CSS。

不用说,如果要找个人请教一些 CSS 方面的问题,Eric Meyer 就是那个人。本文作者日前向 Eric Meyer 提问了7个与 CSS3 有关的问题,以下是 Eric Meyer 对这些问题的解答。

阅读全文——共1764字

早在今年的4月27日我就写过一篇“百度和Google的差别就在这里”,找出了在Web设计过程中几个常犯的错误中,百度存在忘记设置页面背景颜色的问题。今天在Jeffrey Zeldman的博客中的11月的一篇文章Is your (website’s) underwear showing?,对此456bereastreet对目前Web设计中被普遍忽视的问题做出了说明Remember to specify a background colour。

其实我们知道,作为一个web开发者,他面对的用户使用的操作平台、浏览器等存在千差万别,所以不是想当然地认为天下所有的人都会把页面的默认颜色设置为白色。例如上文中提到的,上个世纪90年代Mac系统上运行的Netscape就是使用灰色作为默认颜色的。

阅读全文——共514字

今天下午打开邮箱的时候,发现收到了来自Google的一封试用Google Friend Connect的邮件,经过一段时间的测试并且参考一篇Google Friend Connect试用报告,其实总结来说,Google Friend Connect就是让“一些非社区网站也希望拥有社区功能”,Google早在今年5月份就透露了这个项目的存在,Google表示,这一功能能够为任意网站添加社区功能,帮助网站增加流量。

什么是网站的社区功能?

阅读全文——共969字

        漂亮的代码是漂亮网站的基础,优秀的 CSS 只存在与同样优秀的 HTML 之上,干净的,语义的 HTML 代码让一个网站更健壮。本文讲述了12个实现干净 Web 设计代码的定律,适合于任何从事 Web 设计的人。 1. Strict DOCTYPE 要做就做对的。不管是 HTML 4.01 还是 XHTML 1.0,它们都提供 Strict 模式,使用 Strict 模式可以保证我们的代码不隐藏任何错误。

阅读全文——共1762字

Google最近推出了自己的浏览器Google Chrome,这是一款基于Webkit的浏览器,我想这至少和Google站长中心博客上一篇题为Workin’ it on all browsers的文章有关。在这篇博客鼓励站长们忽略掉网站访问者所使用的浏览器类型,这似乎是说,Google在暗示站长们只需要保证在他们的浏览器中网页可以正常浏览就可以了。

这篇文章正好对就上了站长帮助中心中的一篇名为[url=Making sure your site appears properly in different browsers[/url](确保你的网站可以在不同的浏览器中正常显示)。那篇文章中包含了下面几条主要内容:

阅读全文——共476字

    突然发现自己对Web前端技术掌握得很少很少,就是自己最感兴趣的XHTML+CSS部分知道也不算多。在XHTML 1.1规定的诸多元素中,我平时能用到的只有那么几个,有一半吧,其余得很少在设计中用到。这并不是说没有可以使用的地方,而是自己对他们的使用缺乏了解,即便他们的使用范围本来就很窄,但是他们能从HTML过度XHTML中,说明他们有不可替代的地方。在不断追求Web标准的今天,前端开发者们应该让每个XHTML标签都有用武之地,否则更不用谈什么Web2.0了。

阅读全文——共3175字

英文原文http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

中文翻译http://www.dudo.org/article.asp?id=197

[注]本文写于2006年1月,当时IE7、IE8和Firefox3还未发行,文中所有说的浏览器支持均未包括这三个版本的浏览器。在IE8和Firefox3中,文中的大部分选择符已经被支持[dudo注]

阅读全文——共8567字

英文原文:http://www.456bereastreet.com/archive/200510/css_21_selectors_part_3/

中文原文:http://www.dudo.org/article.asp?id=195

这本文的第三部分,也是最后一部分。在第一部分中我们介绍了类型选择符、类选择符、id选择符、通配选择符和简单选择符的基础知识。第二部分中我们介绍了选择器、混合选择符、分组和属性选择符等。

阅读全文——共2616字

英文原文:http://www.456bereastreet.com/archive/200510/css_21_selectors_part_2/

中文翻译:

英文原文:http://www.456bereastreet.com/archive/200509/css_21_selectors_part_1/

中文翻译:http://dudo.org/?p=196

当你学习CSS时,要学的第一个东西就是选择符(selector)。显然,选择符是CSS中最基础的部分,但是却很少有开发者能将他们物尽其用。当你使用type、ID、class等选择符来完成你的作品时,你可能还不知道除此之外还有很多很多关于它的东西要学。

阅读全文——共3090字

注:这篇文章已经有人翻译过重新认识button 标签,但是感觉其中有很多地方值得推敲,不太好理解。因此本人结合个人学习体会重新翻译而成此文。

英文原文:http://particletree.com/features/rediscovering-the-button-element/

中文原文:http://dudo.org/?p=195

阅读全文——共4830字

Page 1 of 212