WEB前端开发工程师的随记–黑妞HAHA

——专注web前端开发，关注用户体验

Category Archives: xhtml/css/xml/xsl

浅谈web标准、可用性、可访问性

4条评论 Posted by 于 2月 14, 2011

前言：大家不难发现，只要是招聘UED相关的岗位，如前端开发工程师、交互设计师、用户研究员甚至视觉设计师，一般都对web标准、可用性和可访问性的理解有要求。那么到底什么是web标准、可用性、可访问性呢？

一、web标准

简单的说，就是HTML、CSS、JavaScript这三者分离。WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如 W3C DOM）、ECMAScript等。

web标准的优点：

  • 代码的效率：在HTML文件中使用最精简的代码，而把样式和页面布局信息包含进CSS文件中。则放在服务器上的文件越小，下载文件需要的时间就越短。
  • 易于维护：页面的样式和布局信息保存在单独的CSS文件中，如果你想改变站点的外观时，仅需要在单独的CSS文件中做出更改即可。整站统一css则可带来巨大的便利。
  • 可访问性：上网用户中那些视力受损的人，通过屏幕阅读器使用键盘命令将网页的内容读给他们听。以语义化的HTML（结构和表现相分离的HTML）编写的网页文件，就可以让此类用户更容易导航，且网页文件中的重要信息也更有可能被这些用户找到。
  • 设备兼容性：纯HTML，无附加样式信息，可以针对具有不同特点（如屏幕尺寸等）的设备而被重新格式化，只需要引用一套另外的样式表即可。同时，CSS本身也可以让你为不同的呈现方式和媒体类型（如在屏幕上阅读网页，打印网页，在移动设备上阅读网页等）规定不同的样式表。
  • 网络爬虫/搜索引擎：搜索引擎使用“爬虫”，解析你的网页。语义化的HTML能更准确更快速的被解析，从而知道哪些才是重要的内容，那么你的网页在搜索结果中的排名就会大受影响。

二、可用性、可访问性

可访问性就是对所有人一视同仁，无论他们是否有残障。

网站的用户类型：

  • 身体健康的用户；
  • 盲人或严重视觉障碍者，他们使用屏幕阅读器来听取网站，或者通过点字显示器来感知网页；
  • 近视者，需要将字体大小放大到200%；
  • 患有运动性残疾，因此无法用手操作鼠标，而用点击棒来操作键盘，或通过视线点击器来操作网站的用户；
  • 使用移动设备如常用的手机，或使用跟踪球等不常见的计算机控制设备的用户。

实现可用性、可访问性的方法

  • 逐步强化你的网站功能，同时对支持性进行测试。运用“渐进增强”和“平稳退化”原则开发网站。
  • 允许用户关闭有问题的增强功能。
  • 提供相同内容或功能的替代版本。
  • 就客户端需要支持的技术向你的客户提出建议，并举例说明哪些公司的产品支持这些技术。

可访问性良好网页的特征

  • HTML语义化、结构化：HTML语义结构提供了网页的整体框架，提示他们在文件层级中所处的位置，还有他们可以如何与各种页面元素进行交互，以及在适当的地方对文本内容进行强调，帮助用户获得大量重要信息。如导航菜单例子： 
    <ul>
	<li>Menu Item 1</li>
	<li>Menu Item 2</li>
	<li>Menu Item 3</li>
</ul>

    说明：通过将导航菜单构造为列表，就能很容易地让那些使用屏幕阅读器、同时无法看到列表的人知道这是个列表。因为他们的屏幕阅读器会告诉他们这是一张列表。如果你没有使用列表标记，屏幕阅读器就没办法知道这是列表，因此也就不能告诉使用者了。

  • 替代内容：文本可以作为页面内容的通用替代内容，如img标签的alt属性值、a标签的title属性值。 
    <a href="http://www.alimama.com" title="淘宝联盟大促销">
	<img alt="淘宝联盟大促销" src="images/app/sale.jpg"/>
</a>

    说明：文本内容可以很方便地由屏幕阅读器朗读出来，也可以放大或缩小，还可以方便地改变其对比度，或者进行其他许多变形操作。alt 属性包含了对该图片的简短描述，以便无法准确看到该图片的用户（或搜索引擎）使用，title属性负责对链接地址的详细文本描述。

  • HTML定义基本交互：实现tab选项卡搜索功能 
    <form action="search.html" method="GET">
	<fieldset>
		<legend>Search within:</legend>
		 <ul>
			<li><label for="dogs">Dogs</label><input id="dogs" type="radio" name="animal" value="dog" checked></li>
			<li><label for="cats">Cats</label><input id="cats" type="radio" name="animal" value="cat"></li>
			<li><label for="fish">Fish</label><input id="fish" type="radio" name="animal" value="fish"></li>
		</ul>
	</fieldset>
	<input type="text" id="searchfield" name="search"/>
	<input type="submit" value="Search"/>
</form>

    说明：先考虑基本交互（而不是仅仅只加载视觉效果的部分）的话，你就可以简化实现tab搜索效果。现在我们可以只用一个表单来进行所有的搜索，而同时仍然能实现tab选项卡效果（虽然这需要一点样式和脚本）。通过 AJAX 来插入页面内容，那禁用javascript的用户将无法使用。

四个可访问性标准（WCAG 2.0）：

  • 可感知：人们可以通过适合自己的媒体来获知网页内容。比如应当让盲人得以收听页面内容。例如，图像应该有文本对应体。
  • 可操作：人们可以与 web 应用程序或内容进行交互。例如，用户应该可以不用鼠标也能与某个网站进行交互，并且可以通过屏幕阅读器来进行导航。
  • 可理解：使用者可以弄懂页面内容和用户界面。例如，正文不应该比它需要的更加复杂，且网站应以可预测的方式来运行。
  • 健壮性：所提供的一切服务都应当不受平台或操作系统的限制。这样就可以避免人们提供一些不太完善的服务，这些服务会因为硬件/软件的限制而导致大多数人都无法使用。例如，不同设备上的浏览器能够一起使用网站，且导航应该是一致的。

说明：网站并不是必须满足全部这些要求，要视网站用户类型而定，但为了实现可访问性，网站应当确保其页面可以用一般的屏幕阅读技术读取。

总结：

可访问性是网站开发质量的一个衡量标准。如果你在开发网站的时候（以及开始开发前）顾及你的使用用户的话，你就能创建可用性、可访问性更好、更符合web标准的网页，并且享受它所带来的一切好处。

参考网页：
opera web标准课程
百度百科 web标准

转载请注明转自：http://www.heiniuhaha.cn/blog/?p=1378

xhtml/css/xml/xsl , ,

推荐web标准经典教程（opera员工主编）

一条评论 Posted by 于 1月 18, 2011

这几天在网上看web标准的相关文章，合格的前端开发工程师必须要深刻理解web标准，但发现自己一直都不是很清晰这个概念，因此希望理清下头绪，就发现了这个站点，写的非常好，比市面上的书籍写的精炼且通俗易懂多了，特地分享给大家，希望对大家也有用。
http://kb.operachina.com/?q=wsc#toc

js/ajax/as/flex, xhtml/css/xml/xsl ,

什么是Doctype？什么是标准模式与混杂模式？

5条评论 Posted by 于 1月 17, 2011

一、什么是Doctype？

DOCTYPE是Document Type（文档类型）的简写，在页面中，用来指定页面所使用的XHTML（或者HTML）的版本。要想制作符合标准的页面，一个必不可少的关键组成部分就是DOCTYPE声明。只有确定了一个正确的DOCTYPE，XHTML里的标识和CSS才能正常生效。
以XHTML 1.0为例：
XHTML 1.0中有3种DTD（文档类型定义）声明可以选择：过渡的（Transitional）、严格的（Strict）和框架的（Frameset）。这里分别介绍如下。

1．过渡的
一种要求不很严格的DTD，允许在页面中使用HTML4.01的标识（符合xhtml语法标准）。过渡的DTD的写法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2．严格的
一种要求严格的DTD，不允许使用任何表现层的标识和属性，例如<br/>等。严格的DTD的写法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3．框架的
一种专门针对框架页面所使用的DTD，当页面中含有框架元素时，就要采用这种DTD。框架的DTD的写法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

ps：
使用严格的DTD来制作页面，当然是最理想的方式。但是，对于没有深入了解Web标准的网页设计者，比较合适的是使用过渡的DTD。因为这种DTD还允许使用表现层的标识、元素和属性，比较适合大多数网页制作人员。

二、什么是标准模式与混杂模式？

不同文档模式主要影响CSS内容的呈现，尤其是浏览器对盒模型的解析，但在某些情况下也会影响到JavaScript的解释执行。
1、文档模式目前有四种：

混杂模式（quirks mode）
 //让IE的行为与（包含非标准特性的）IE5相同
标准模式（standards mode）
//让IE的行为更接近标准行为
准标准模式（almost standards mode）
//这种模式下的浏览器特性有很多都是符合标准的，不标准的地方主要体现在处理图片间隙的时候（在表格中使用图片时问题最明显）。
超级标准模式:
//IE8引入的一种新的文档模式，超级文档模式可以让IE以其所有版本中最符合标准的方式来解释网页内容。

ps：
总的来看，混杂模式让IE像IE5，标准模式使用IE7的呈现引擎，而超级标准模式则是IE8的默认文档模式。
2、如何触发文档模式：

  • 触发混杂模式:
    如果在文档开始处没有发现文档类型声明，则所有浏览器都会默认开启混杂模式。但采用混杂模式不是什么值得推荐的做法，因为不同浏览器在这种模式下的行为差异非常大，如果不使用某些hack技术，跨浏览器的行为根本就没有一致性可言。
  • 触发标准模式: 
    <!-- HTML 4.01 严格型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 严格型 -->
<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • 触发准标准模式: 
    <!-- HTML 4.01 过渡型 -->
<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">

<!-- HTML 4.01 框架集型 -->
<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Frameset//EN"  "http://www.w3.org/TR/html4/frameset.dtd">

<!-- XHTML 1.0 过渡型 -->
<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- XHTML 1.0 框架集型 -->
<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Frameset//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  • IE8中关闭超级标准模式： 
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
//content属性中IE的值用于指定使用哪个版本的呈现引擎来呈现页面。设计这个值的目的就是为了向后兼容那些专门为老版本的IE设计的站点和页面。
xhtml/css/xml/xsl , , , ,

前端开发工程师的必须掌握的基本技能

3条评论 Posted by 于 12月 13, 2010
  • DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
  • DOM操作——怎样添加、移除、移动、复制、创建和查找节点。
  • 事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。
  • XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。
  • 严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。
  • 盒模型——外边距、内边距和边框之间的关系，IE < 8中的盒模型有什么不同。
  • 块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。
  • 浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
  • HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。
  • JSON——它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。

附：adam lu前端开发面试题：
HTML && CSS
1.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 行内元素有哪些？块级元素有哪些？CSS的盒模型？
2.CSS引入的方式有哪些? link和@import的区别?
3.CSS选择符有哪些？哪些属性可以继承？优先级？内联和important哪个优先级高？
4.经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？
5.如何居中一个浮动元素?
6.HTML5和CSS3的了解情况
7.你怎么来实现下面这个设计图

Javascript
1.怎样添加、移除、移动、复制、创建和查找节点
2.怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别
3.面向对象编程:b怎么继承a
4.看看下面alert的结果是什么
function b(x, y, a) {
arguments[2] = 10;
alert(a);
}
b(1, 2, 3);
如果函数体改成下面，结果又会是什么？
a = 10;
alert(arguments[2] );
5.请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象，如：var url = ”http://www.taobao.com/index.php?key0=0&key1=1& key2=2…..”
var obj = parseQueryString(url);
alert(obj.key0)  // 输出0
(来自淘宝网校园招聘笔试题)
6.ajax是什么?  ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?
7.什么是闭包？下面这个ul，如何点击每一列的时候alert其index?
<ul id=”test”>
<li>这是第一条</li><li>这是第二条</li><li>这是第三条</li>
</ul>
8.最近看的一篇Javascript的文章
9.你如何去实现这个Tabview

10.常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？
11.性能-Yslow

小结：面试只是一个检测技能的手段，我个人更看重面试者分析问题和解决问题的能力以及对前端的热爱。

为什么需要框架？
1、JavaScript 框架或库是一组能轻松生成跨浏览器兼容的 JavaScript 代码的工具和函数。每一个库都在众多流行的 Web 浏览器的现代版本上进行了可靠的测试，因此，您可以放心地使用这些框架，您的基于 JavaScript 的 RIA 将会在不同浏览器和平台上以类似的方式工作。
2、这些框架极大地简化了开发进程，并带来一致，可靠，以及高度交互性的用户界面。

目前项目中常用的Javascript框架:
JQuery
YUI
Prototype
Mootools

Javascript库主要功能：
1、解决浏览器兼容性
2、快速开发Web应用
3、丰富UI效果

JQuery：

1、宗旨：WRITE LESS,DO MORE
2、轻量级的js库(压缩后只有21k)
3、兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）
4、jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
5、jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

YUI:

1、一组采用DOM scripting，Dhtml和Ajax等技术开发的Web UI控件和工具。
2、Yui 工具包利用DOM脚本来简化浏览器内的开发（in-browser devolvement），使用DHTML和AJAX的特性开发所有的Web程序。
3、YUI控件库为你页面提供一组高交互性性的可视化元素。这些元素完全在客户端创建维护，不需要请求服务器进行页面刷新。

Prototype：

prototype是一个易于使用、面向对象的JavaScript框架。它封装并简化和扩展一些在Web开发过程中常用到JavaScript方法与Ajax交互处理过程。

Mootools:

1、一个简洁，模块化，面向对象的JavaScript框架；
2、它能够帮助你更快，更简单地编写可扩展和兼容性强的JavaScript代码。
3、Mootools从Prototype.js中汲取了许多有益的设计理念，语法也和其极其类似。但它提供的功能要比Prototype.js多，整体设计也比Prototype.js要相对完善，功能更强大，比如增加了动画特效、拖放操作等等。

参考文章：

js/ajax/as/flex, xhtml/css/xml/xsl, 关于前端开发 , , , ,

浏览器兼容性问题

留下评论 Posted by 于 11月 18, 2010

常用浏览器：IE(6 7 8)，firefox，chorme，360，opera等浏览器
解决办法：Web标准化
网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。
对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。

CSS兼容性：
1、A标签常见兼容性问题（LVHA）
2、IE对CSS标准的支持缺陷:

important
inherit
子选择器
非锚点:hover
非锚点:active
:focus
position:fixed
display:inline-block

3、IE的两种模式(Quirks/Standard)
4、CSS HACK
问题：你如何区分ie6/7/8 /ff/webkit/…

xhtml/css/xml/xsl , , , ,

Yahoo给出的34条网站加速方法

4条评论 Posted by 于 11月 11, 2010

Yahoo给出的包括Yslow规则（22条）的34条 详细说明 ，通过这此规则对自己页面进行一次全面的分析优化，可以提高你网站的加载速度。

1.Minimize HTTP Requests 减少HTTP请求

图片、CSS、script、flash等等这些都会增加http请求数，减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下写进一个文件，页面里直接写入图片也是不好的做法，应该写进CSS里，利用 CSS sprites 将小图拼合后利用background来定位。

2.Use a Content Delivery Network 利用CDN技术

CDN 确实是好东西，8过服务器提供商的这项服务一般是要收费的，我以前买的国内空间是有这个的但是我当时根本不知道啥用，现在没了。。。

3.Add an Expires or a Cache-Control Header 设置头文件过期或者静态缓存

浏览器会用缓存来减少http请求数来加快页面加载的时间，如果页面头部加一个很长的过期时间，浏览器就会一直缓存页面里的元素。不过这样如果页面里的东西变动的话就要改名字了，否则用户端不会主动刷新，看自己衡量了~ 这项可以通过修改.htaccess文件来实现。

4.Gzip Components Gzip压缩

Gzip格式是一种很普遍的压缩技术，几乎所有的浏览器都有解压Gzip格式的能力，而且它可以压缩的比例非常大，一般压缩率为85%。压缩没压缩，可以到 这里 做下测试。

5.Put Stylesheets at the Top 把CSS放顶部

让浏览者能尽早的看到网站的完整样式。

6.Put Scripts at the Bottom 把JS放底部

网站呈现完毕后再进行功能设置，当然这些JS要在你的加载过程中不影响内容表现。

7.Avoid CSS Expressions 避免CSS Expressions

CSS表达式很可怕，这个只被IE支持的东西执行时候的运算量非常大，你移动一下鼠标它都要进行重计算的，但有时候为了做浏览器的兼容必须要用到这个||| IE6去死去死！~

8.Make javascript and CSS External 将JS和CSS外链

前面讲到了缓存这个事情，一些较为公用的JS和CSS，我们可以使用外链的形式，譬如我就是从Google外链来的jquery文件，如果我的浏览者在浏览别的使用了这个外链文件的网站时已经下载并缓存了这个文件，那么他在浏览我的网站的时候就不需要再进行下载了！~

9.Reduce DNS Lookups 减少DNS查找

貌似是要减少网站从外部调用资源，我的Google分析和picasa的外链图片都算在里面了。

10.Minify JavaScript and CSS 减小JS和CSS的体积

写JS和CSS都是有技巧的，用最少的代码实现同样的功能，减少空白，增强逻辑性，用缩写方式等等，当然也有不少工具也能够帮你实现这一点。

11. Avoid Redirects 避免重定向

再写入链接时，虽然“http://www. today-s-ooxx. com”和“http://www. today-s-ooxx. com/” 仅有一个最后的“/”只差，但是结果是不同的，服务器需要花时间把前者重定向为后者然后进行跳转，这个要自己注意，也可以在Apache里用Alias 或者mod_rewrite或者DirectorySlash解决。

12. Remove Duplicate Scripts 删除重复脚本

重复调用的代码浏览器并不会识别忽略，而是会再次运算一遍，这当然是大大的浪费。

13. Configure ETags 配置ETags

搞不清楚咋回事，总之我是在. htaccess里把它删除了。

14. Make ajax Cacheable 缓存Ajax

Ajax是实时响应的，在浏览器接收到新的数据前，旧的数据被缓存，这样能够更好的提高效率。

15. Flush the Buffer Early 尽早的释放缓冲

当用户进行页面请求时，服务器端需要花费200到500毫秒时间来拼合html，将写在head与body之间，释放缓冲，这样可以将文件头先发送出去，然后再发送文件内容，提高效率。

16. Use GET for AJAX Requests 用GET方式进行AJAX请求

Get 方法和服务器只有一次交互（发送数据），而 Post 要两次（发送头部再发送数据）。

17. Post-load Components 延迟加载组件

最先加载必须的组件进行页面初始化，然后再加载其他，YUI Image Loader 是很好的例子。

18. Preload components 预加载组件

提前加载以后可能用到的东西，和延迟加载并不冲突，它的目的是为后续请求提供更快的响应，参见Google首页上的CSS sprites应用。

19. Reduce the Number of DOM Elements 减少DOM元素数量

复杂的页面结构意味着更长的下载及响应时间，更合理更高效的使用标签来架构页面，是好的前端的必备条件。

20. Split Components Across Domains 跨域分离组件

页面组件多个来源可以增大你的平行下载量，但注意不要过多，超过2-4个域名会引起上面说到的DNS查找浪费。

21. Minimize the Number of iframes 减少iframe数量

需要更有效的利用 ifames。
iframe 优点：有利于下载缓慢的广告等第三方内容，安全沙箱，并行下载脚本
iframe 缺点：即使为空也会有较大资源消耗，会阻止页面的onload，非语义

22. No 404s 不要出现404页面

站点本身里（非搜索结果）出现404页面，无意义的404页面会影响用户体验并且会消耗服务器资源。

23. Reduce Cookie Size 减小Cookie

Cookie在服务器及浏览器之间的通过文件头进行交换，尽可能减小Cookie体积，设置合理的过期时间，能够很好的提高效率。

24. Use Cookie-free Domains for Components 对组件使用无Cookie的域名

对静态组件的Cookie读取是一种浪费，使用另一个无Cookie的域名来存放你的静态组件式一个好方法，或者也可以在Cookie中只存放带www的域名。

25. Minimize DOM Access 减少DOM的访问次数

JS访问DOM是很慢的，尽量不要用JS来设置页面布局。

26. Develop Smart Event Handlers 开发灵活的事件处理句柄

DOM树上过多的元素被加入事件句柄的话，反应效率肯定会低，YUI事件工具有一个 onAvailable 方法可以帮助你灵活的设置DOM事件句柄

27. Choose over @import 使用而非 @import

在IE中使用@import就和在页面底部用一样，我们前面说要把放顶部的。

28. Avoid Filters 避免过滤器的使用

如果需要Alpha透明，不要使用AlphaImageLoader，它效率低下而且只对IE6及以下的版本适用，用PNG8图片。如果你非要使用，加上_filter以免影响IE7+用户。

29. Optimize Images 优化图片

将你的GIF转为PNG8会是个减小体积的好办法，另外有很多方法处理你的JPG及PNG图片以达到优化效果。

30. Optimize CSS Sprites 优化CSS Sprites

在CSS Sprites中竖直并尽量紧凑的排列图片，尽量将颜色相似的图片排在一起，会减小图片本身的大小及提高页面图片显示速度。

31. Don’t Scale Images in HTML 不要在HTML中缩放图片

图片要用多大的就用多大的，1000X1000的图片被width=”100″ height=”100″以后，本身的KB数是不会减少的。

32. Make favicon. ico Small and Cacheable 缩小favicon. ico的大小并缓存它

站点的浏览器ICO应该不是经常换吧，那就长时间的缓存它，并且最好控制在1K以下。

33. Keep Components under 25K 保证组件在25K以下

iphone不能缓存25K以上的组件，并且这还是要在被压缩前。

34. Pack Components into a Multipart Document 将组件打包进一个多部分的文档中

就好像在邮件中加入附件一样，一个HTTP请求就够了，但是这一技术需要确保你的代理支持，iPhone就不支持。

转载自：http://paranimage.com/yahoo-given-34-web-acceleration/

js/ajax/as/flex, xhtml/css/xml/xsl ,

强烈推荐前端使用Win7 Xp Mode，用于调试原生ie6

4条评论 Posted by 于 10月 11, 2010

用Win7快大半年了，但是每次调试页面时，需要用到原生ie6，这可犯难了，不想独立安装一个虚拟机，向周围同事问了问，龙笛推荐我用一下Win7 Xp Mode。

注意：使用前提是电脑系统是win7！

在使用Win7 Xp Mode之前需要先下载两个包：
1.WindowsXPMode_zh-cn
2.Windows6.1-KB958559-x86(virtural pc的更新安装包)

建议通过非正规渠道激活的朋友不要从官网上下载。。官网的下载必须得通过WindowsActivationUpdate验证，基本非正规渠道激活的都会验证失败，更伤心的时候是验证失败后你的Win7从此就被烙上了盗版印记。

安装过程十分简单，先装WindowsXPMode_zh-cn，一路Next。装完之后就安装第二个包，同样一路Next,安装完成后会提示重启。重启的时候就进BIOS里打开CPU的VT功能吧，如果你的CPU支持的话(不支持的话也不要紧，微软已经发布了解除CPU硬件限制补丁，GOOGLE下吧)。重新进入系统之后点程序，在所有程序中找到Windows Virtual Pc,点进去之后就可以看到Windows XP Mode,OK，点击启动，完美运行。我的机子配置是cpu E8400，内存4G，感觉使用还是蛮顺畅的!强烈推荐需要的同学使用啊。

xhtml/css/xml/xsl, 其他 , ,

寻求js实现chrome收藏夹功能

留下评论 Posted by 于 10月 11, 2010

一直以来都没有找到简洁的js实现chrome收藏夹功能方案，有同学建议写个chrome插件去实现，感觉有些大功干戈，有人建议写

else if(window.chrome){
alert('Press ctrl+D to bookmark after you click Done, or simply click the Star icon ahead of the address bar.');

半人半机，继续寻求其他解决方案。

js/ajax/as/flex, xhtml/css/xml/xsl

【转】前端开发大众手册(包括工具、网址、经验等)

留下评论 Posted by 于 9月 9, 2010

转载自陈成的博客
http://www.chencheng.org/blog/2008/10/25/f2e-manual/

ps：这个手册整理的确实牛叉，非常全面，感谢陈成同学，在开发过程中可以随时看看学习。

一直觉得前端开发缺个手册，这是个体力活。不过总得有人来干。

今天闲来无事，把一些工具(online和client的)、常用网 址、以及经验总结等罗列出来和大家分享下。这个标题起地大了点，肯定会有很多地方没列到，包括类目的分法也可能考虑不周，所以还请大家积极补充指正，可以 直接留言，也可以发邮件给我(sorrycc#gmail.com)。之所以加上“大众”两字，因为以下资源对于高手来说可能早就很熟悉了。

另外想提一句，工具是死的，好不好用得看你会不会用。比如Firefox、Fiddler等，除了显而易见的功能以外，都有一些小的技巧，掌握了可以让你事半功倍。

更新记录：

  • [20081025] 第一版

另外还搞了个Firefox插件《前端开发工具集》，把资源整合到一个菜单下，方便查询。数据放在线上(Google AppEngine)，速度应该会有保证，更新也会比较方便哈

在线工具集

常用Firefox插件

IE下的调试工具

  • Fiddle2 —— 非常强悍的一款http流查看工具，默认支持IE，其他浏览器可以设置将{Document}\Scripts\BrowserPAC.js设为代理进行使用。Firefox下可用上述”Fiddler 开关”进行快速切换。支持插件。
  • IE Developer Toolbar —— 查看元素、禁用缓存、禁用CSS\JS、Outline元素、查看生成的源码等功能，IE8自带了一个加强版的。
  • Microsoft Script Debugger + Companion.JS —— 调试JS用，虽然报错还是有误差，但是我已经满足了。安装顺序是：Microsoft Script Debugger，Companion.JS，在”IE选项-高级”里取消禁用脚本调试。
  • 多版本IE共存两种方案：
    • IE7/8 + IE Tester —— 大众型配置，可以基本满足日常需要。
    • IE6 + Internet Explorer Collection —— 在IE 6用户占绝对优势以及IE 6神奇bug满天飞的时代，我还是推荐这种方案，因为只有神奇的原装IE 6，才能抵挡运营神奇的问题。另外如果还有其他机器可供支配的话，建议再装个IE 8 + IE Tester，因为IE 8下的Developer Toolbar还是有很大改进的，调试起来会方便一些。
  • 以下三个软件相对不重要些：

参考手册

批处理工具

IDE及其他工具

Bookmarklet(右键另存)

开发者社区及权威网站

推荐订阅的博客和网站(排名不分先后)

js/ajax/as/flex, xhtml/css/xml/xsl, 关于前端开发

透明背景图 ie6用png8 非ie6用png24

3条评论 Posted by 于 9月 9, 2010

众所周知GIF适合图形，JPEG适合照片，PNG系列两种都适合。

png24在浏览器中表现：
1.ie6中背景显示灰色
2.非ie6中背景完美透明，无任何损耗。

Png8的在ie6中的怪异表现:
1.半透明的png8在ie6以下的浏览器显示为全透明。
2.Alpha透明的全色PNG(png32）在ie6中会出现背景颜色(通常是灰色)。

由上面可以总结:
(a)全透明的png8可以在任一浏览器正常显示（就像gif一样）。半透明的png8在除了ie6及其以下的浏览器下错误的显示成全透明，其它浏览器都能正常显示半透明。这个bug并不需要特殊对待，因为在不支持半透明的浏览器下只是显示为全透明，对用户体验影响不大，它反而是透明gif的加强版。
(b)第二个bug没有什么好的方法解决，只能通过影响性能的方法AlphaImageLoader与需要加特殊标签（VML）。

因此得出结论就是:在ie中请使用PNG8代替gif，非ie6中请使用png24。

Png8的软件问题
1.Photoshop只能导出布尔透明的PNG8。
2.Fireworks既能导出布尔透明的PNG8,也能导出alpha透明的PNG8.
3.pngquant与pngnq这两个命令行软件可以转换全色png为256色的png8。

photoshop中的操作：
【文件】-【存储为web所用格式】

xhtml/css/xml/xsl

←叫旧文章。