月度归档:2010年12月

[A188N+.Q] HTML5设计原理 —— Jeremy Keith在 Fronteers 2010 上的主题演讲

导读:“大多数人的意见和运行的代码”,Jeremy Keith的讲演站在开发者的角度娓娓道来Web真谛。围绕Html5的设计,探讨从规范的制定者、浏览器开发商再到开发者在标准制定上的逐步优先。作者旁征博引,引人入胜。很久没读到如此令我激动的文章了,不得不Copy一份。

——Jeremy Keith在 Fronteers 2010 上的主题演讲

本文原文来自:adactio.com/articles/1704/
译文取自:为之漫笔,最后更新于:14:29 2010/11/07
使用本文请遵循?Creative Commons attribution licence (CC-By 3.0)

今天我想跟大家谈一谈HTML5的设计。主要分两个方面:一方面,当然了,就是HTML5。我可以站在这儿只讲HTML5,但我并不打算这样做,因为如果你想了解HTML5的话,你可以Google,可以看书,甚至可以看规范。

实际上,确实有人会谈到规范的内容。史蒂夫·福克纳(Steve Faulkner)会讲HTML5与可访问性。而保罗·艾里什(Paul Irish)则会讲HTML5提供的各种API。因此,我今天站在这里,不会光讲一讲HTML5就算完事了。

说老实话,在正式开始之前,我想先交待清楚我所说的HTML5到底是什么意思。这话听起来有点搞笑:这会子你一直在说HTML5,难道我们还不知道什么是HTML5吗?大家知道,有一个规范,它的名字叫HTML5。我所说的HTML5,指的就是这个规范。但问题是,有些人所说的HTML5,指的不仅仅是这个规范,还有别的意思。比如说,用HTML5来代指CSS3就是一种常见的叫法。我可不是这样的。我所说的HTML5,不包含CSS3,就是HTML5。

类似的术语问题以前也有过。Ajax本来是一种含义明确的技术,但过了不久,它的含义就变成了“用JavaScript来做一切好玩的东西”。这就是Ajax,对不对?今天,HTML5也面临同样的问题,它本来指的是一个特定的规范,但如今含义却成了“在Web上做一切好玩的事。”我说的不是这种HTML5,不是这种涵盖了最近刚刚出现的各种新东东的HTML5。我说的仅仅是规范本身:HTML5。

刚才已经说了,我今天想要讲的内容不多,也没有打算介绍HTML5都包含什么。今天我要讲的是它的另一方面,即HTML5的设计。换句话说,我要讲的不是规范里都包含什么,而是规范里为什么会包含它们,以及在设计这个规范的时候,设计者们是怎么看待这些东西的。

设计原理

设计原理本质上是一种信念、一种想法、一个概念,是你行动的支柱。不管你是制定规范,还是制造一种有形的物品,或者编写软件,甚至发明编程语言。你都能找到背后的一个或者多个设计原理,多人协作的任何成果都是例证。不仅仅Web开发领域是这样。纵观人类历史,像国家和社会这样大规模的构建活动背后,同样也有设计原理。

就拿美国为例吧,美国的设计原理都写在了《独立宣言》中了。

我们认为这些真理是不言而喻的,人人生而平等,造物主赋予了每个人不可剥夺的权利,包括生存、自由和追求幸福。

这里有一句口号:生存、自由和追求幸福。这是被写进宪法中的核心理念,它关系到我们所有人的一切,也就是我们构建自己社会的原则。

还有一个例子,就是卡尔·马克思(Karl Marx),他的著作在20世纪曾被奉为建设社会主义的圭臬。其基本思想大致可以归结为下面这条设计原理:

各尽所能,各取所需。

这其实就是一种经济体系背后的设计原理。

还有一个例子,比前面两个的历史更久远一些,不过大同小异:

人人为我,我为人人。 继续阅读

2010 Web前端技术趋势及总结(转载)

为了推广前端技术的发展,发现一偏不错的文章,特意和大家共享一下.原文地址是:http://www.cnblogs.com/pandora/archive/2010/12/12/1904032.html

经过这段时间国内(百度,淘宝,新浪)及国外(Facebook,Youtube,Yahoo)各大公司的集中自曝,我们可以从中总结出2010 Web前端技术的一些趋势。总的来说,随着后端技术(存储,并发,分布式)的成熟,各大公司已经把重点从后端架构调整/建设转移至前端(TTI时间,快速发布,带宽利用率)。但作为明星技术的HTML5/CSS3,都未正式成为各公司的考虑重心,虽有所尝试,但在关键功能上,均未成为主力。这也W3C对当前HTML5/CSS3标准现状的表述:“不适宜用作生产环境”一致。

基本概念

Web前端技术的范围

1. 编程语言/技术(HTML,JavaScript,CSS等) 继续阅读

整理CSS文件 去除无用样式

我想这个问题恐怕是所有前端开发工程师都会碰到的问题了.当然,随着版本的不断升级,或多或少肯定有一些样式没有被使用或者被抛弃.代码量少还好说,碰到大站点的维护的话,我想恐怕没有人会特意去一行行的找代码.作为一个高智商的物种,当然是要巧妙的利用工具来提高我们的工作效率,搜了一大把发现了几个比较好的工具和大家共享一下.

Dust-Me?selectors

Dust-Me是一个很有用也很好用的Firefox插件,它可以分析到你的页面中调用的所有CSS文件并分析那些在页面中没有被用到。
支持本地和远程样式文件,包括使用<link>标签、<?xml-stylesheet?>处理指令、@import语句等方式引入的样式文件;(但是不支持页面中的<style>块和内联样式)
支持IE条件注释中引入的样式文件;
可以检查一个页面,也可以检查整个网站;
支持CSS1选择器、大部分CSS2和CSS3选择器;
理解通用的CSS?hack,比如?“*?html?#fuck-ie”将会被认为是”html?#fuck-ie”;
支持Firefox?3.5和Firefox?3.0,事实上得益于FF?3.5的js引擎的改进,FF?3.5中的性能比FF?3.0要高50%。

CSS?Redundancy?Checker

CSS Redundancy Checker 是一个免费的在线应用,可以检查所有的使用某个CSS文件的页面中无用的样式。可以同时检查某一个样式在多个页面中的使用情况。该工具的不足是虽然一次能检查多个HTML页面,但每次只能检查一个CSS文件,而且还要手动输入

IntelliJ?IDEA

IntelliJ?IDEA?这是一个颇强大的IDE,类似于DreamWeaver,不过在国内用的不多。该软件包括一个即时代码分析工具(On-the-fly?Code?Analysis),可以分析CSS文件中未用到的class和id。