getElementsByTagName的简写方式

用最少的代码,做最多的事情. getElementsByTagName的简写方法.

//CLASS@Mr.Think*****getElementsByTagName
function tag(name,elem){
	if(!document.getElementsByTagName) return false;
	return (elem || document).getElementsByTagName(name);
}

使用不做详述,若是用于获取整个文档中某指定标签集合,可直接用tag(“xx”)获取.

避免Google搜索服务中断的方法

2010.09.10更新: 本文方法均失效(含2010.07.01更新), 请勿实验. 若有其他可行的办法, 请留言告知, 感谢~
2010.07.01更新: 本文方法好像已失效,可能与谷歌最近SSL加密域名调整有关,期待FF和Chrome的开发者们出新的插件.另,需要Google的可直接访问SSL加密版:ggssl.com.
本文将教你如何避免在使用Google搜索时的”无故”服务中断.
首先, 请确保你使用的是Chrom或者是Firefox的浏览器. 没有? 移步前往: 下载Chrome, 下载Firefox;
如果你使用的是Firefox,很简单,点此安装Google SSL加密搜索插件, 确认安装完成功后(需重启浏览器),直接打开Google SSl加密版本https://www.google.com/webhp?hl=zh-CN, 如果还不行,可以进入Google,点页面下面的”Google.com in English”. 现在,你想搜啥就搜啥吧.对于Firefox,你还可以直接在快捷搜索那儿选择Google SSl,然后输入内容搜索.
如果你使用的是Chrome,依次点那个小扳手(工具)–扩展程序–获得更多扩展程序–搜索”SSL”,前两个扩展就是,安装一任意一个.跟Firefox一样,确认安装成功后,直接打开Google SSl加密版本https://www.google.com/webhp?hl=zh-CN, 如果还不行,可以进入Google,点页面下面的”Google.com in English”. 现在,你想搜啥就搜啥吧.
Google SSL
就这么简单,让Google在SSL加密模式下运行,即可避开GFW.魔高一尺,道高一丈.哈哈.
题外话, 因为某些领导人的私欲和无知,Google被逼出中国大陆,GFW墙掉了一个又一个能给中国互联网带来许多新鲜血液的网站.一直喜欢Google的产品,用Chrome浏览网页,用Google搜索,用Gmail写邮件,用GoogleMap查路线,用Analytics分析网站访问情况,用GoogleCode找代码,等等等等… 对我来说,如果上网缺少Google和腾讯的服务,与脱机没啥区别.
自从Google被逼出大陆,最让人无法忍受的就是使用Google搜索时的”服务中断”, 为啥中断?你知道的. 声明一下,我不会用百度,百度无良,搜索结果大半页都是广告,并且排前几名的大部分都是坑蒙拐骗类的. 远离百度,珍爱生命. 即便某天Google不能用了,我会用SOSO或者搜狗,绝不使用百度.爱国?百度不是中国公司,不信?自己Google去!
痛恨百度,及IE6.哈哈.

两个基于jQuery的渐隐渐显图片轮换幻灯片

最近比较懒,啥都不想干.分享两个比较实用的基于jQuery的幻灯片吧. 注释写了一个,不想写了,另一个还是原作者的英文注释.非原创,由我改良,无从考证原作者,在此感谢.
点此查看DEMO
至于使用方法也就不写了(我声明了我最近比较懒,哈哈),比较简单,自己看DEMO修改吧.
为了不浪费你点DEMO的力气,先上两张图,展示下静态的效果:
第一个幻灯长这个样的
第二个幻灯片这个样
好了,就这样吧,想用的话自己慢慢折腾吧.

最大限度的分离table的样式与结构

用table布局,相信大家都知道这是前端很诟病的事.但从HTML标签角度来看table标签,它的功能强大也是毋庸置疑的, 不然, 它也不会曾主导网站布局模式数年(甚至于现在仍有N多整站用table布局的网站). 但CSS+XHTML的兴起,使很多人开始妖魔化table这一标签,甚至以页面中是否有table来评判页面质量,这是不对的. table也有它存在的作用,很多页面功能(比如数据表格类,表单对齐等)用table实现远比用div实现起来简单明了.当然,本文不是为table平反的, 我只是想告诉大家如何最大限度的分离table的样式与结构.
分离样式,当然离不开CSS,而对于table标签,还有更多私有HTML属性可以利用.比如,thead,tr,th,td,tbody,tfoot,colgroup,scope.而本文正是利用这些属性,把样式从table中分离出来.
请看下图:

这是一个有6种背景色的table,如果按常规的table定义,想必大家都知道这个表格写出来该有多麻烦,你得一个个单元格的去加样式,加属性.其实,上面的效果完全可以有着很明了简洁的结构,也可以不通过修改html页面来改变它的样式.
HTML代码:点此查看DEMO

最大限度的分离table的样式与结构,Uh Oh!
LINENUM ID-1 ID-2 ID-3
1 A CY I
2 Br S KMQ
3 HTC LLI P
4 ACC G QO
5 Z AHD M
LINE.NO ID-1 ID-2 ID-3

CSS代码:

table#itab{border-collapse:collapse; border:1px solid #999; width:50em; margin:0 auto}
#itab caption{font-size:1em; font-weight:normal; color:#a40000}
#itab thead{background:#ffc}
#itab td,table#itab th{border:1px solid #ccc}
#itab td{padding-left:0.8em}
#itab tfoot{background:#fcc}
#itab .linenum{width:15%; background:#0cf}
#itab .id-1{width:20%; background:#cf9}
#itab .id-2{width:25%; background:#eee}
#itab .id-3{width:30%; background:#9ff}

如此一看,是不是明了很多.无非是把表格结构化,然后充分利用thead,th,tfoot等table私有属性定义不同的样式.这里不得不提一下colgroup标签,在本文DEMO中,它起到了很重要的作用.但个人认为,它也只能做一些定宽背景定义.它有一个很致命的弱点,不兼容. 比如用它来给列定义字体颜色,ie6下是正常,但其他浏览器好像都是不支持的(如果一定要用它来定义列的字体颜色和对齐方式,可以利用CSS高级选择器first-child为ie6外的浏览器定义样式,暂不详述).但不可否认colgroup是一个很实用的标签.
另外, 关于cellspacing/cellpadding/border如何用css控制, 我也为大家提供一下css代码:

table{border:0;margin:0;border-collapse:collapse}
table td, table, th{padding:0}

表格样式的分离,个人觉得完全用CSS分离也不是一个明智的选择,当有些效果CSS无法实现时,或者实现起来比较麻烦时,我们完全可以用JavaScript来实现你想呈现的效果.比如隔行换色,鼠标划过变色等效果(可扩展阅读奇或偶数行高亮显示及鼠标划过高亮显示类).
多思考,多发现,多实践.HTML的每一个标签如同我们身体的每一个器官,都有个它特定的功能,好好利用它们,相信能带给你很多惊喜.

差距,不是一点点

最近在谈一个酒店项目, 需求方是某全国连锁酒店, 名誉三甲. 该酒店现在有一个网站在运行, 但用户体验之差, 实在让人汗颜. 为了深入了解网站功能, 特意注册了一个马甲号试试订房体验. 结果连我这个在网络上浪迹数年的做前端开发的人都足足费够了脑筋. 预订过程中, 鲜有提示, 页面都是直接跳转的, 而不是异步加载, 网站加载速度也是相当的慢(可能得归功于大批的css/js加载请求,还有那张大大的背景图).
下面是我分别用Yahoo的Yslow工具和Chrome的Monster插件分析得出的结果:
Yslow分析报告

Yslow分析报告

Monster分析报告

Monster分析报告

上面的报告就不用我详细的阐述了. 如果你是行内人士一看就该明白.
我还同时看过几家类型的酒店网站, 也都是在国内比较有名的酒店网站, 性能上都相差不多. 呵. 作为一个服务性交易性网站, 用户体验如此之差, 如何能让你的客人更便捷的订房. 也不知道因为这些操作上的不友好流失了多少营收. 后来又通过英文导航站看过几家美国的酒店的网站, 限于英文水平, 用户体验就不说, 最基本的载入速度和页面界面也要比国内这些酒店网站快好多.
其实不单是酒店这个行业, 再看看政府的网站(最著名的莫过于友情链接量绝对第一备案中心的网站),以及大部分企业网站,再看看国外的同类型的网站. 差距, 真的不是一点点. 上个月中旬, 老板朋友公司为上海电视台制作的一个交友类网站, 因为第二天上级领导要来验收, 第一天下午找到我们, 让我们帮着改一下页面. 一看, 不兼容, bug很多, 还有错误页面, 问题多多. 结果对方要求很简单, 只要兼容某一版本浏览器就行, 不要有错误页面, 有些页面放张图片即可. 汗. 原来, 这网站只是为了给领导看的.
网站的主体永远都是用户. 网站的一切行为, 都应从用户的角度出发. 做用户体验, 首先就是要忘掉自己. 国内网站与国外网站的总体差距, 真不是一点点, 就像是百度之于Google的差距. 我坚持用Google, Google无法用了我就用SOSO. 远离百度, 珍爱生命. 我会跟我所有认识的人说这句话, 有些人会说不爱国, 这与爱国无关. 中国绝大部分企业只知道赚钱, 没有责任感, 无良. 比如百度. 而像Google、腾讯这些会向用户提供很优秀的免费产品, 会推动某一行业发展的公司, 才是真正值的尊敬的.
下面是我针对本文中某酒店写的方案中部分摘录, 有兴趣的可以看看,欢迎拍砖.

现行网站在功能上已能满足用户最基本的需求,但在网站载入速度、功能模块设置、界面设计、用户操作体验等方面仍有很多欠缺。这些欠缺直接影响到了用户在网站中的交易行为,也因此流失掉很多潜在的营收。具体细化到XX网站,网站缺陷上有以下四个方面:
1、网站加载速度慢
加载速度是用户体验的第一要素,无论网站中有多么诱人多么实用的功能,如果用户打开网站很费劲,相信对他的兴致也是一个很大的打击;通过前面的分析报告也能看出,引起加载速度慢的原因,主要是要加载的图片及样式文件太多,在中国现在的网络带宽环境下,用大图(如XX现网站整站背景图)做背景图是一个不好的选择;
2、网站整体布局不合理
XX现在的布局宽是800px,而现在的显示器绝大部分都在1024以上,所以这种布局宽度对用户很不友好,应栅格化布局为950px或960px宽;
3、首页模块分布不合理
首页功能单调,不能让用户在第一时间很明了的找到网站的核心功能。导航菜单有些混乱,比如“XX新闻”菜单完全可以拿掉,而用一个独立的小模块展现;有些不重要的模块占据了重要的位置,比如头部通栏幻灯片,完全可以缩小一半出来放预订的功能导航;左上角(会员登录区)是用户进入网站的第一视觉,更应该放网站最核心的预订功能,而不是登录;
4、用户体验不友好
网站用户体验的重要性,不亚于网站的任何一个核心功能。任何一个核心的功能都是基于用户体验的。现行网站的功能模块缺少向导性的提示,比如预订功能,每一步都应该有一个明了的提示信息,这样当用户不明白该怎么做时就能很快的找到解决方法。而不是任其盲目的点击。所以,整站也缺少一个用户帮助中心,告诉网站所有的功能如何正确操作。
5、兼容性欠佳
现行网站仅兼容于IE浏览器,而对于很多使用Chrome、FireFox等标准浏览器用户却未能提供很好的兼容方案。比如预订选项的选择城市功能在Chrome、FireFox下均会错位。

通过上文中对现行网站的劣势分析,以及我们专业的前端开发人员对同类型网站的性能研究,在前端性能上,我们将在开发过程中,做如下几点的优化:
1、界面设计方面
新网站界面将以960px宽删格化布局网站,与XX”设计时尚”理念相贴合。界面将由专业的web网站设计师出图,充分考虑实用性与美观性;
2、前端开发技术
网站前端开发部分将采用符合w3c标准的xhtml、css、javascript、jQuery、Ajax等技术实现整站的结构层、表现层、行为层的相互分离。底层以xhmtl+css构建符合语义化的页面,采用css sprite技术减少整站图片的加载请求,用javascript、jQuery、Ajax实现行为的交互。前端开发过程中将结合后台开发,充分考虑功能的实用性,用最简洁明了的方法实现最完善的功能;
3、用户体验部分
我们有专业的用户体验研究人员,将会通过专业的分析工具,统计出用户的操作习惯,针对网站的每一个功能做出以用户为中心解决方案,细化到每一个按钮,每一张图片的位置与展现方式;核心功能(比如预计过程中,注册过程中)的操作步骤,我们都会简化到最少,并且每一个步骤都会尽可能明白的提示用户如何操作。查询、提交等操作,都将用Ajax技术结合后台语言实现页面异步加载,以减小用户的等待时间。 另外,我们还会加入完善的帮助中心模块,让用户能在不知所措的第一时间找到解决的方法;
4、前端代码优化
前端代码的优化除了在前端开发过程中编码标准,不沉冗,还将考虑对搜索引擎的友好性,将以符合语义化标准的代码呈现前台页面。整站完成后,将对整站的CSS、javascript文件做相应的拼合处理,以减小网站的http请求量,加快网站运行速度;
5、兼容性
开发过程中将以ie6、ie7、ie8、Chrome、FireFox为底层测试浏览器,由专业测试人员调试每一个页面的兼容性,以保证网站在各浏览器下的完美兼容。

渔夫科技