为了那些河蟹而翻墙

本文将提供一种一劳永逸的翻墙方式（ssh -D），实施之后，那道墙——对你来说——将从此透明。

Posted by 火恋の神父 on 07月 2nd, 2009 :: Filed under 网络资源
Tags :: Gmail, 下载, 代码, 免费, 推广, 更新, 软件

6种完美防止垃圾邮件的办法 – 让Spam爬虫见鬼去

当在一个网站上显示e-mail地址的时候你肯定会混淆它以防止收到spammers的攻击。但是哪种混淆方法是最好的呢…

Posted by 火恋の神父 on 05月 13th, 2009 :: Filed under 技术交流
Tags :: css, Javascript, QQ, UE, UI, XHTML, 代码, 工具

15种网站设计中最差的用户体验

1. 超长的页面下载时间。
如果页面下载时间超过30秒，很难有用户会喜欢你的网站。
2.无限制的使用flash及图片。
无可否认,适当的用一些图片及flash,可以增加网站的生动性,增加视觉冲击力.但无限制的使用flash及图片.会造成页面文件超大,占用浏览者的cpu资源,并且不利于页面更新及搜索引擎对网站的抓取。
3.网站页面过长。
你认为有多少浏览都有兴趣看你网页中最下面的内容? 不要拿自己来作比喻,因为99%以上的人才刚学会上网。
在王建硕的一篇文章中提到."1995年Jakob Neilson做的互联网用户调查，美国的用户在1994年的时候，只有10%的用户会拖动浏览器右边的滚动条，而绝大多数，90%的用户，打开一个网站，只看浏览第一屏看到的内容，就以为看到了全部，而不会向下滚动。"
现在中国也有这样的人.而且为数不少.在一个网站的首页,能看到第三屏内容的人只有10%以下一个过长的网站很容易引起浏览者的视觉疲劳,更何况大部分浏览者很有可能已经被前两屏的内容吸引到别的页面去了。
4. 不友好的导航。
不友好的导航是最影响用户操作的, 不能让用记很方便的找到自己想到的内容.用户来到一个页面不知如何返回上一页,不知道当前页面是在哪个栏目下的.这样的网站很可能用户来了一次就不会再来了。
5.过期的信息。
很久不更新的信息,很容易让浏览者感到反感,而且在心中也会对你这个网站的品牌形象大打折扣。
6.死连接或连接错误。
这个就不说了,这是最基本的错误,但是好些还有这样的错误,包括新浪这种大网站。
7.孤立的页面。
用户不知用什么方法返回首页.这种情况往往是出现在信息提示页或内容调查的结果页上。
8. 页面没有视觉差异。
页面没有视觉差异,页面设计很"平"缺少"层次感",缺少视觉冲击力和亮点.或者视觉冲击力突出的并不是网站的主体内容.这是没有经验的设计师设计大型网站时最容易犯的错误。
把一大堆信息铺天盖地的展示到浏览者的眼前,你认为他会记住多少? 页面设计要吸引并引导浏览者来观看你想推广的内容或产品.当然对网页"层次感"的设计平不是简单的用一些纯度高的颜色来实现,要根据页面的环境及周边元素综合考虑. 就象在一个黑板中画一个白点很明显,但在一个白板上画一个白点就看不清楚了。
9.链连没有标准的表现形式。
现在很多刚上网站的人还只认为有带下画线的文字才是链接. 网站要有统一标准的链接表现形式,并且要和没有连接的文字有区别.要让浏览者很方便的认出哪些是连接的文字。
如果是图片加的连接要在图片下标出"点击图片见大图",图片一定要加"alt"属性。
"更多"要用中文写最好不要"more"或者标点符号代替。
10.过多的运用新技术。
所谓新技术,就是只有少数人掌握的技术,虽然有可能他的视觉效果很好,功能很强大,但过多的运用新技术,就意味着你准备抛弃99%的用户。
11. 缺少互动的内容。
缺少互动的内容,缺少网友的参与.不能让网友表达情感和思想,注定这个网站只是个死网站。
12. 过复杂的文件目录及文件名。
过复杂的文件目录及文件名,不利用搜索引擎对页面的拾取,并且也不利于浏览者的记忆.几乎100%的人输入网址时会用到IE的缓存.目录和文件过于复杂,排在IE缓存很靠下的地方,你当然被第二次访问的机率小的多。
不要说什么用收藏夹.你以为会有超过一半的人会用收藏夹吗?而且象我这种收藏夹过于庞大的人,想在收藏夹里找一个网址也是比较不容易的。
13. 使用框架。
不建议使用框架.不为什么,就因为搜索引荐不喜欢. 连google的广告计划中,对有框架的代码都是单独的。
14.恶意插件，恶意弹出窗口。
15.页面中不要过多的用"_blank"。
过多的弹出新窗口，会大量占用计算机的资源，影响浏览者的浏览速度。

阅读全文 »|=TOP=

Posted by 火恋の神父 on 02月 12th, 2009 :: Filed under 技术交流
Tags :: Flash, google, 下载, 代码, 广告, 情感, 推广, 更新, 环境, 用户体验, 设计, 链接

给Windows目录加口令的特殊方法

windows系统目录是windows操作系统的重要目录，当我们访问这个目录时，系统会提示你这个目录的重要性，如果需要进入，只需要单击“显示文件”就可以大摇大摆地走进去了。如果我们给windows目录增加一个进入口令，只有那些口令输入正确的人才能进入，这样，你的windows目录不是安全多了，而且一些不愿让别人看到的文档也可以放到里面。
　　给windows目录加口令，我们需要借助windows目录中一个特殊文件：超文本模板文件folder.htt。另外我们再编写一个html文档用来进行口令输入错误时的提示。
　　下面，我们先来修改一下folder.htt，用记事本打开windows目录中的folder.htt文档（注意它是一个隐藏文件，如果你在windows目录中找不到它，可以在我的电脑窗口中单击“查看”菜单中的“文件夹选项…”，再单击“查看”标签，在高级设置中选中“显示所有文件”就可以了。），在文档内容最后的语句前面加入如下vbscript代码：
<script language="vbscript">
function kouling()
　　dim pass
　　pass=prompt("对不起，这是重要的系统目录，请您正确输入管理口令才能进入：","")
　　if pass="abc" then www.firelove.com.cn
　　else
　　alert "对不起，您的口令错误！"
　　navigate "file://c:\program files\error.html"
　　end if
　　end function
　　kouling()
</script>
　　然后保存一下文件。　　先不要测试，各位看到代码中的navigate "file://c:\program files\error.html"一句了吗，我们还需要建立一个error.html文档，用以进行错误提示。下面是这个文档最简单的代码，其核心内容是放置一个可以返回c盘根目录的按钮：
<html>
<head><title>出错了!</title>
</head>
对不起，您无权访问windows系统目录!
<input type="button" value="返回" name="button"/>
<a href="http://www.firelove.com.cn" target="_blank">似梦似醒二十年</a>

</html>
　　将这段代码保存为error.html文档，并存放于c:\program files\下。
　　好了，让我们测试一下吧！当你打开c盘欲进入windows目录时，首先会弹出一个让你输入口令的对话框，输入口令abc（你也可以在folder.htt中将pass变量改为其他密码），才可以进入。如果不输入或输入错误，则直接打开页面“error.html”给以提示，单击页面中的返回按钮又会返回到c盘根目录了。

阅读全文 »|=TOP=

Posted by 火恋の神父 on 12月 14th, 2008 :: Filed under 技术交流
Tags :: UE, 代码

给页面加上Loading效果最简单实用的办法

虽然现在的GMail已经看不到这个效果，但之前那个可爱的深红色Loading仍然让许多人喜爱。我也将这款效果融入了awflasher的WordPress主题TES中：

其实我的方法非常简单，也可以说没什么技术含量，甚至还不支持IE6，但据我长期的观察，确实非常实用的。Analytics的统计数据表明，加入了这一效果之后，用户的“平均停留时间”的确有所提高。可见，一个“正在加载”让许多用户都有更多的耐心等待，而不会因为屏幕空白太久而不耐烦地离开。
最近，又有不少朋友留言询问这个Loading的实现原理。这里我就分享一下：
首先，在页面的最上部输出一个Loading文字，比如“正在加载”，用div标签包含，并给它一个id，比如loading：
[quote]
正在加载
[/quote]
你可以直接放到页面的标签后面，亦可以用script.write输出（如果你有SEO洁癖的话）
然后，在你的样式表中，对这个loading设定一个简单的样式：
[quote]#loading{z-index:1;padding:5px 0 5px 9px;
background:#c44;left:0;top:0;width:90px;
color:#fff;position:fixed}[/quote]
接下来，在你标签闭合之前，将这个loading隐藏掉就可以了。最简单的方法是输出一段标记：
[quote]document.write('
#loading{display:none}');
[/quote]
如果你有jQuery之类的JavaScript库，就更方便了，例如jQuery可以使用：
$('#loading').hide()
这样，当页面完全加载完毕之后，loading就隐掉了。对于WordPress博客，如果你对页面代码没有太苛刻的洁癖，我个人建议把一些重量的JavaScript库都放到这段loading之后引入。这样在浏览器端，你的“Loading”会飞快地出现，用户会觉得你的服务器响应非常迅速。然而，如果你从各种不同的域名下先加载几百kb的JavaScript库，估计用户在你的“Loading”出现之前就已经关闭页面了。
最后，希望这个老土的技巧能帮到你：）
本文来自：http://www.awflasher.com/blog/archives/1589

阅读全文 »|=TOP=

Posted by 火恋の神父 on 11月 21st, 2008 :: Filed under 技术交流
Tags :: DIV, Flash, Javascript, SEO, UE, 主题, 代码, 技巧, 样式表

十个技巧助你解决CSS兼容问题

一、针对firefox ie6 ie7的css样式
　　现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了现在写一个CSS可以这样：
#abc { color: #333; } /* Moz */
* html #abc { color: #666; } /* IE6 */
*+html #abc { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。
二、CSS布局中的居中问题
　　主要的样式定义如下：
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
　　说明：首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。
　　但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
　　需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
三、盒模型
#box{
;
//for ie6.0- w\idth:500px;
//for ff+ie6.0
}
#box{
>//for ff
;
//for ff+ie6.0
width /**/:500px;
//for ie6.0-
}
四、浮动ie6产生的双倍距离
#box{ float:left; ; margin:0 0 0 [...]

阅读全文 »|=TOP=

Posted by 火恋の神父 on 11月 17th, 2008 :: Filed under 技术交流
Tags :: css, DIV, Javascript, 代码, 技巧, 解决, 设计, 链接

CSS浏览器兼容问题其他解决方案

从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名.
CSS技巧
1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
2. margin加倍的问题设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline; 例如：相应的css为 #IamFloat{ float:left; margin:5px; /*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/}
3.浮动ie产生的双倍距离 #box{ float:left; width:100px; margin:0 0 0 [...]

阅读全文 »|=TOP=

Posted by 火恋の神父 on 10月 27th, 2008 :: Filed under 技术交流
Tags :: css, DIV, Javascript, XHTML, 代码, 技巧, 方案, 解决, 设计, 链接

8款优秀的网页聊天工具

某些公司让员工能上网却不能登录一些聊天软件，这让员工们很是烦恼，现在有了网页聊天工具，什么都不怕了！各位公司高管老板可不要怨我呀！
中文界面网页聊天工具
网址：http://www.meebo.com
MEEBO 是比较早的WEB聊天工具提供商了，在国内居然发现一个很严重的冒版站点meebo.com.cn。正版MEEBO可以提供单独的聊天室，也可以通过代码囊套到你的个人网站、博客、和其他任何属性的网页上，并且你可以登陆移动设备，通过MEEBO与网站、IM的好友进行在线聊天互动，还可以通过 Firefox扩展享用MEEBO的服务。
网址：http://www.plugoo.com
Plugoo 提供给您多种即时通讯工具，Plugoo小工具，可以让您网站的访客实时的和您交谈，Plugoo星球，可以让您见到世界各地的人们，分享您的兴趣以及和他们即时交流。Plugoo 小工具可以让网站访客（博客、社会网络、网上商店等）实时和您通过即时通讯工具（MSN Messenger、Google Talk、Yahoo! Messenger、AOL AIM、ICQ、Jabber等）进行联络。
网址：http://home.gabbly.com
Gabbly(蓋不理)，很有趣的中文名称，支持多国语言。这是我见过最傻瓜式的网页聊天工具，只需把“gabbly.com/”放到网页的URL前面，你将能跟同时浏览此网页的人交谈。比如说：要想在网址大全上聊天，只需直接访问http://gabbly.com/www.firelove.com.cn。你将能看到在CNN的网页上有一个浮动的Gabbly(蓋不理)聊天窗口。
网址：http://woocall.sina.com.cn
国人产品，Woocall是新浪网为广大网友开发的一个简单轻便的沟通工具，让同时看一个页面的网友可以非常简单的开始沟通对话。让以前擦肩而过的网友可以有机会一起聊天，一起分享上网冲浪的乐趣。
英文界面网页聊天工具
网址：http://www.toksta.com
Toksta 是一款包括文字、语音及视频的网页聊天工具，也就是说用户不仅可以通过文字聊天，还可以使用语音及视频聊天。并且，Toksta的聊天窗口是独立于其嵌入代码的网页运行的，这样使得用户的聊天不会影响其继续浏览网页内容。而且，Toksta与MSN等即时聊天软件非常类似，注册后还可以添加好友，可惜的是目前仅支持两种语言。
网址：https://www.jabbify.com
Jabbify 的特色就是可以自行定制样式，其实这并不算什么先进的功能，但是这样不起眼的小技术却总是能抓住很大一部分用户的心，可惜，大部分比Jabbify更强的提供商没有做这方面的工作。另外，Jabbify提供的网页聊天服务在获取访问者数据速度上的优势也是首屈一指的。
网址：http://www.blobber.com
Blobber的兼容性不太好，貌似仅限IE浏览器。并且，如果你想Blobber聊天链接始终出现在网站上，你得保证24小时始终在线。
网址：http://www.hab.la
Hab.la 让你网站的访问者与你聊天，没有任何多余功能的聊天软件。他们的信息可以显示在你最喜爱的即时通信软件里。Hab.la很容易管理员设置，同时友好和访问者的网页聊天，互不干扰。当访问者到你的网页，聊天框Hab.la最小右下角的浏览器。如果你登录到你的即时消息客户端，方块将改为“按一下聊天。 ”（如果你没有登录，方块将改为“无法使用。 ” ）当你的访问者点击Hab.la标题栏，聊天框打开。他们所要做的是类型和打击进入。直接到达你的即时消息客户端。你的第一个传言将被命名为 webuser1 。你可以回复以同样的方式答复你想要的任何即时消息。你的答复将显示在访问者的聊天框，聊天中保持积极，即使游客到另一个网页在你的网站，你的即时消息客户端的用户身份功能会告诉你对方在什么网页访问浏览。

阅读全文 »|=TOP=

Posted by 火恋の神父 on 09月 24th, 2008 :: Filed under 网络资源
Tags :: google, 代码, 工作, 工具, 移动, 聊天, 视频, 软件, 链接

css代码的简写

css缩写的语法，对新手有一定帮助,老鸟就不用看了.
1.1： 0px不需要单位，直接:margin:0
1.2：盒模型的缩写，语法是margin:上右下左;.甚至可以简写成margin:上 (右左) 下,当然右左的值应该是一样的
1.3：css属性的最后一项”;”号省略。（不建议 ^_^）
1.4：字体宽度normal用400代替,bold用700代替。
1.5：16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#0044DD可以缩写为#04D;
1.6：border边框的缩写，语法是border:width style color,类似boder:1px solid red;
1.7：背景background的缩写,语法是color image repeat attachment position.类似:background:#f00 url(background.gif) no-repeat fixed 0 0( 为什么我从不写fixed呢?)
1.8：字体的缩写,类似font:italic small-caps bold 1em/140% “SimSun”,sans-serif,可以省略到最简单font:12px “SimSun”.
1.9：list的属性缩写,语法list-style:square inside url(image.gif) ,不过一般咱们都不用.
1.0：想凑10条, 还真难.就把删除无用换行符和空格算一个吧

阅读全文 »|=TOP=

Posted by 火恋の神父 on 08月 20th, 2008 :: Filed under 技术交流
Tags :: css, 代码, 色彩

浅谈css框架开发

个人总结了在开发css框架中的一点经验，献丑了。希望大家的讨论能使我们共同进步。:)
1、css框架
中国的互联网行业已经发展了10年，浏览器也从最早流行的NS到现在的FF3.IE7等等……前端开发工程师的职位也诞生了。近几年在web开发中，有个非常火的词——“框架”。YUI、JQuery、Prototype这些javascript框架在开发网站时，确实成为前端开发工程师的手中利器。为什么呢？因为框架是包含工具、函数库、约定，以及尝试从常用任务中抽象出可以复用的通用模块，让设计师与程序员避免重复开发。通俗地讲便是把大多数重复工作的时间给节约了。
编写css也是一样，从最初只是定义文字颜色、内容排版，到现在定义所有的表现。css框架也渐渐被重视了，因为大家都认识到：从具象的表现中抽出抽象的模块来重复使用，是减少用户下载、方便团队及个人开发最重要的手段。
2、css框架的开发顺序
a) 格式化 reset.css
格式化css的真正好处是能够快速启动工作，你可以在新的HTML文件里引入框架，不用再处理重置padding 和 margins，实现统一的排版、浏览器下的相同表现。
b) 布局 layout.css
定义页面是二栏还是三栏，是全屏还是1024×768……
一个网站的设计可能有很多种布局，但是大多数都是由几个具有复用性的布局组成，选择性的引入所需要的布局，可以很快地应用所期望的页面布局。
c) 基本样式 type.css
定义body、h1-h6、a:link-a:active、p等的字体大小和颜色。
基本样式的css引用，譬如将ul定义class为“ul-text”，用来展现相同的icon、行间距、链接色彩。
还可以像这样应用：class=”ul-text square”，li前展现的是方型的icon。
d) 表格修饰 table.css
定义table、tr、td、th、thead、tfoot、tbody、caption等标签的表现。
和基本样式一样，但是表格在现有网站的展现形式几乎都是处理数据，所以分开存放引用。譬如在table上应用table-style-1便是黑色边框的表格，table-style-2便是黄色边框的表格。
e) 表单修饰 form.css
定义fieldset、label、button、input 、select、textarea这几个标签的表现。
大多数网站的表单、按钮、输入框几乎都是一样的。之所以引入这个css，是为了便于统一在各个浏览器中的展现。默认的按钮、输入框等在各个浏览器下的展现区别很大，虽然在格式化的css中已经初步的统一，但是输入框的边框，按钮的样式都是需要在这个css中定义的。无奈的是select无法做到统一，如果考虑到用js实现的话，这个成本太大了点。
f) 打印修饰 print.css
修饰打印输出的页面。
g) 包含其他css的css
frontpage.css、list.css、detail.css、register.css等等
根据各种引用去引入相应的css。譬如list页面中没有需要表格的修饰，那就不引入table.css。以节约代码量。
3、css框架文件夹的建立
a) core 主要的
存放reset.css、layout.css、type.css、print.css
b) bud 模块
存放table.css、form.css、album.css等css
c) petal 具体应用
存放封装过的css。frontpage.css、llist.css、detail.css、register.css等css。这个文件夹存放的css都是被直接引用的。
文件夹的命名，按个人喜好啦! 我还希望用电子、质子等命名呢。嘿嘿！
4、css框架的优点
a) 提高开发效率。
b) 规范名称定义，便于维护。
c) 规范项目开发流程
d) css代码更清晰、简单。html代码更合理。
5、css框架的弊端。
a) 学习成本提高。你需要了解整个框架，需要阅读框架的文档。
b) css框架对于一个小项目等页面来说很臃肿。框架中可能有大部分你用不到的代码。
c)可能会无法帮助你的技术提高。太依赖框架，以至于很难排除bug。包括框架中本身就带的bug。
d) 选择自己需要的框架与开发框架都很痛苦。写到后面发现越来越不灵活，越来越臃肿。残念 -_-
6、开发及使用css框架中常遇到的问题。
a、页面外部引用样式过多。
譬如关于ul的margin定义,在格式化的css中会声明为0，而在基本样式的css中又可能会声明margin:5px 10px;
所以在Yslow中会出现多次定义。
b、组件复用性的考量。
譬如表单定义的css中定义了所有表单的修饰,而假定在注册这个页面中只是需要这个css的百分之三十。那是否应切割出去那不要的百分之七十?
综合以上的二个问题，个人认为解决的方式便是封装，让该有的有，不该有的没有。尽量减少http连接数和css的大小。但如果彻底是这样做的话，css的复用性又会变得很差，后期手工的封装会很痛苦。只能套用小马的一句话“具体情况，具体分析”。人生真是矛盾啊…
c、到底该不该支持em?
可见如要支持em，最大的目的是为了在浏览器中可以根据用户的分辨率大小自由缩放，对于拥有超大显示器的用户与小显示器的用户是非常有用的。可是在采集我们用户的浏览器数据后，发现分辨处于这二端的用户非常少，可想而知，为这部分的用户多花比正常开发一倍以上的时间显然是件不划算的事情，所以当初在开发tbsp的时候，我们团队就决定了不支持em。当然这是个建议，我们也希望能使用em带给用户最好的感受。