额，初学chrome扩展制作……

5月 28th, 2010

好吧，还是应了史努比的，扩展好了……其实我丫就是plug多了……

看下截图吧，很简单的一个小应用，还没完全做好，但是有了小雏形，激动是当然的了。

哈，找了个最简单的例子，IP地址查询，城市所在地查询，当日天气查询，嗯，简单的一个小扩展。主要是想了解下chrome的插件机制，虽然制作这个小例子根本没用到它里面的很多功能，而且很多功能我也还没有去学，只用了大概一下午的时候，就制作出了个扩展，可想而知chrome的扩展是多么容易上手啊。以后肯定会火。

这个截图是我本地的扩展安装截图，我还想把未来5天或者最少也要把第2天的天气加进去，还有手机号所在地查询功能，火车票飞机票查询加进去再发布出来吧。所以安装地址就不给了。

我学习的文档地址分享下：

http://code.google.com/chrome/extensions/docs.html

然后简单说下我用到的代码和具体的一些chrome插件上手方面的知识。因为在我看文档的时候也没发现太多讲的很明白的教程，其实真的不难，仔细看文档都有说明。

chrome插件的文件结构：必须要有一个manifest.json文件。官方格式如下：

{
// Required
“name”: “My Extension”,
“version”: “versionString”,

// Recommended
“description”: “A plain text description”,
“icons”: { … },
“default_locale”: “en”,

// Pick one (or none)
“browser_action”: {…},
“page_action”: {…},
“theme”: {…},

// Add any of these that you need
“background_page”: “aFile.html”,
“chrome_url_overrides”: {…},
“content_scripts”: [...],
“minimum_chrome_version”: “versionString”,
“options_page”: “aFile.html”,
“permissions”: [...],
“plugins”: [...],
“update_url”: “http://path/to/updateInfo.xml”
}

具体的参数说明可见API文档：http://code.google.com/chrome/extensions/manifest.html

根据这个类似json格式一样的配置文件chrome会载入你的扩展程序，然后具体到我使用的页面主要有popup.html还有background.html俩个页面，一个是点击扩展图标的弹出页面，一个就是从扩展开始就一直后台运行的主程序页面。

回过头来看下我制作的几个功能，IP,地址,天气，肯定是访问了外部的API或者数据了。噢，忘记说了chrome的扩展是完全由css html javascript来制作的噢。而且ajax没有跨域限制，只要你设置了相应的配置就OK。很棒。

具体思路就是扩展访问外部api然后处理结果，返回给popup页面展示给用户，OVER。

具体的到刚才截图的主要代码亮一下，写的不太好，主要是卡在了编码正则那一块，后来统一了所有页面的编码就OK了。嗯，都需要是utf-8的……

popup.html页面代码,background.html页面代码。

只用到了个localStorage类似全局变量对象的一个东西，就实现了。基本是2个页面数据互相交互的桥梁，然后是一个监听函数监听数据是否完成加载和处理，如果成功则返回给popup页面即可。

具体代码可以看下，注释没怎么写，因为真的是很简单。。。

嗯，继续做，加功能，V。第一次chrome插件制作经验分享……

最后的PS:chrome里的HTML5 CSS3支持的都非常好，可以尝试使用噢~比如HTML5的websql或者HTML5新加的那几个媒体标签，再或者绘图标签和CSS3动画特效，都是可以完全应用进去的哈……：）好玩。

Tags: , , ,
Posted in 前端开发 | 1 Comment »

晒下这三四天的工作成果……

5月 26th, 2010

扔几个截图吧，典型的BS结构了~

主要代码分为下面三个页面：

主表格数据页面

http://pastebin.com/E3Aqc8CY

数据字典管理页面

http://pastebin.com/YVMN8xqa

菜单管理页面

http://pastebin.com/arjK2g39

预览地址

http://www.designsor.com/demo/gz/

效果不多，代码页不多，ajax也不多，但是综合起来还是挺多的工作量。这次的页面总结起来和之前相比无论是js还是css都有了显著提升。特别记录一下。预览地址中的大部分ajax需要依靠本地的java环境，预览地址的只是静态页面和js主代码部分。

自己冒充了一次设计师，其实以前也算是半个设计师，主要是公司前期项目需要练手，最近又没什么事，大家组织一起写点内部的小玩意。就当学习吧。

可以查看CSS样式表，大量使用了css3选择器，还有js的结构，已经可以开始把部分CSS3运用到项目中啦耶~。V

Tags: , ,
Posted in 前端开发, 平面设计 | 1 Comment »

关于JavaScript的for循环优化。

5月 20th, 2010

为什么要优化for循环呢。先看下下面的图吧：

导致这图的代码很简单，就是一个很大的for循环：

for(var i=0;i<99999999999;i++){
$(’body’).prepend(i);
}

额，关于for循环，其实一直想写这么个东西。之前看到的相关文章是163 ued的BLOG其中一篇，详细地址是：

http://www.ued163.com/?p=672

他用的方法很值得推荐，今天自己也写了份，在Michael的指导下，写个小函数，感觉又学到了点东西。

function each(i,j,fun){
fun(i);
i++;
if(i<j) setTimeout(function(){each(i,j,fun)},10);
}
each(0,999999999999,function(i){
$(’body’).prepend(i);
});

同样的，用递归加时间控制就可以避免浏览器的锁死。新手值得学习……又补了个基础。V~

Tags: , ,
Posted in 前端开发, 心情日志 | 3 Comments »

haslayout详解

5月 20th, 2010

最近开始恶补基础知识，弥补自己的基础薄弱的问题。

haslayout是什么？

“Layout” 是 IE 的一个私有属性，并不是W3C标准。它决定了一个对象（就是一个标签div、li等）在内容中如何显示、与周围对象的位置关系、以及怎样响应程序或用户产生的事件。

这个属性可以被一些css强制激活。一些HTML标签默认具有haslayout。

下面这些标签默认拥有haslayout属性：

  • <html><body>
  • <table><tr><th><td>
  • <img>
  • <hr>
  • <input><button><select><textarea><fieldset><legend>
  • <iframe><embed><object><applet>
  • <marquee>

怎样激活layout？

position: absolute
设置绝对定位可能会引发新的问题。
float: left|right
IE下的浮动也会产生一些莫名其妙的问题。
display: inline-block
当一个内联元素需要haslayout属性时就需要用它，但是IE本身不支持inline-block的，只是表现得像标准里说的inline-block。
width: 除’auto’外的任意值
优先考虑使用该属性。
height: 除’auto’外的任意值
对 IE6 及更早版本来说很常用，该方法被称为霍莉破解(Holly hack)，即设定这个元素的高度为 1% (height:1%;)。但是要注意，当这个元素的 overflow 属性被设置为 visible 时，这个方法就失效了。
zoom: 除’normal’外的任意值
又一个ie私有属性，不兼容标准。zoom:1可以在测试或者不追求标准的情况下使用，效果不错。
writing-mode: tb-rl
ie私有属性，不推荐用。

IE7 还有一些额外的属性：

min-height: (任意值)
max-height: (除 none 外任意值)
min-width: (任意值)
max-width: (除 none 外任意值)
overflow: (除 visible 外任意值)
overflow-x: (除 visible 外任意值)
overflow-y: (除 visible 外任意值)
position: fixed

重置haslayout.

在没有其它属性激活layout的情况下，使用下面的css可以重置haslayout属性：

  • width, height (设为 “auto”)
  • max-width, max-height (设为 “none”)(在 IE 7 中)
  • position (设为 “static”)
  • float (设为 “none”)
  • overflow (设为 “visible”) (在 IE 7 中)
  • zoom (设为 “normal”)
  • writing-mode (从 “tb-rl” 设为 “lr-t”)

display 属性的不同：当用”inline-block”激活了haslayout 属性时，就算在一条独立的规则中覆盖这个属性为”block”或”inline”，haslayout 这个标志位也不会被重置为 false。

把 mid-width, mid-height 设为它们的默认值”0″仍然会赋予 hasLayout，但是 IE 7 却可以接受一个不合法的属性”auto”来重置 hasLayout。

当一个对象的layout被激活时，它以及它的子对象的定位和尺寸计算将独立进行，不受附近对象的干扰。也就是说它拥有一个独立的布局（layout）。 因此浏览器要花费更多的代价来处理拥有haslayout的对象。为了提高性能，微软增加了layout这个IE私有的概念。

Tags: , ,
Posted in 前端开发, 心情日志 | No Comments »

关于call和apply

5月 19th, 2010

啊，群里为了帮助我提高js水平，出了道比较考察基础的题目，他们说蝴蝶书里有答案，我确实忘记了，也不知道写的对不对，但是测试了下，代码还算完善。

题是这样的：

/*
Whyme 14:49:13
JS中假如Function.prototype.call不存在
但Function.prototype.apply存在
试用后者实现前者.(其余js 1.5特性也具备)
*/

我写了2个版本，第一个有点错，就不发了。。第2个发出来看下：

Function.prototype.call=function(){
var type=typeof arguments[0] == ‘function’ || typeof arguments[0] == ‘object’;
switch (arguments.length){
case 0:
return this.apply();
break;
case 1:
if(type){
return this.apply(arguments[0]);
}else{
throw new Error(arguments[0]+’ is not provide’);
}
break;
default:
if(type){
var ary = [];
for (var i = 0; i < arguments.length; i++) {
ary.push(arguments[i + 1]);
}
return this.apply(arguments[0], ary);
}else{
throw new Error(arguments[0]+’ is not provide’);
}
};
};

简单的测试了下……再简化我就不知道怎么写了。。。

经过又20分钟的思考。得到下面精简版本- -||

Function.prototype.call = function(){
var type=typeof arguments[0] == ‘function’ || typeof arguments[0] == ‘object’ || arguments[0]!=’undefined’;
if (type){
var ary = [];
for (var i = 0; i < arguments.length; i++) {
ary.push(arguments[i + 1]);
}
return this.apply(arguments[0], ary);
}else{
throw new Error(arguments[0]+’ is undefined’);
}
};

期待更精简的。特此记录。。。

史努比的：（没经测试……）

Function.prototype.call = (function() {
var slice = Array.prototype.slice;
return function () {
var args = slice.apply(arguments)
, context = args.shift();
return this.apply(context, args);
}
})();

确实比我的短……哎- -忘记用array对象里的那几个方法了……//但是我认为他没对thisObj做检查，应该可能是个隐患- -？

最后的结果是没有类型检查半毛钱关系，异常全部交给apply处理，截取参数数组使用array对象的方法，完事。我想太多了。。。不好意思- -||

Tags: , , ,
Posted in 前端开发, 心情日志 | No Comments »

关于前端开发环境的搭建。

5月 18th, 2010

前端开发这个职业是最近几年才兴起的，很早之前我们统一叫美工，有高级的，有低级的，现在都改叫前端开发，或者页面仔，再有了JavaScript的辅助之后，页面仔的技术含量又大幅度提高，随着胖客户端应用的bs系统越来越多，客户端编程哪怕只是CSS HTML JS都越来越急迫的需要一个开发环境，预期善其事，必先利其器。

开发环境说白了，我个人认为包含以下几个方面：良好的项目管理方法，代码管理方法，发布与测试的方法，调试与debug的工具，代码的测试和发布工具，一些便利的第三方开发工具，如果有需要还要安装项目的服务器环境。

下面就一一介绍一下我个人理解的上面几点，并且分享一下我的这些环境是如何搭建的，需要些什么东西。（由于目前没有一个统一的标准，所以很可能每个开发者都会有一套属于自己的开发环境和工具，根据个人情况吧。）

1.1，项目的管理，所谓项目管理，哪怕你就是只做HTML页面，也需要创建一个项目，根据我平时的经验基本会到一家公司就创建一个fq或者xiaojue的项目，然后根据公司的不同项目再向下级分清楚自己的文件夹结构，最开始入门的时候用的是Dreamweaver里的站点创建，因为F11可以调取和查看文件夹树，现在是用aptana来创建一个project来管理文件夹树。方便自己使用也方便日后查找，条理清晰。

1.2，如果你的开发环境需要具备服务器能力，最好把上面2者和你的服务器环境进行统一协调，就我个人例子来说，公司开发使用java，我个人在本地又假设了个apache的php服务器环境，然后我捆绑的服务器开发环境就是php的，因为我熟嘛，至于java的servers环境就让同事java程序员帮助建立一个，以便日后的时候集成了HTML JS CSS的项目依然需要本地调试时使用。双管齐下……自己的PHP环境是为了方便自己做些JavaScript方面的东西，自己模拟些数据，并拥有一个本地的服务器端口而已。

2，代码管理，这个是从构建可扩展站点那本书上看到的，就是那本热带鱼书。之前我们对代码编写都是ctrl+z,ctrl+y来进行管理的……但是页面保存之后关闭了，再想恢复以前的某个历史版本，Dreamweaver是办不到了，需要使用别的，1，自己弄个vss或者弄个google的svn来进行代码版本的管理，但是需要你得能连上网或者自己有能创建vss的能力。我的解决办法是用eclipse或者aptana里项目自带的history来实现的，至少可以保障一个月内的代码版本自己可以查询追溯，对代码的控制能力大大加强，这也是文本编辑器和ide工具的巨大差别吧。

3，发布与测试的解决,新版本的Dreamweaver cs5里有了选择预览浏览器型号的功能，自己安装各个不同系列的浏览器当然是必须的了，ie tester，opera，firefox，chrome，safari当然都是必备的了。至于代码的压缩发布，cssmin和jsmin的在线工具有很多，在最下面会一一列出。

4，至于调试工具，目前我的环境还是基于ie和firefox下的调试，可能某些同事还需要调试其他浏览器，但是目前我的项目中没太需要到。至于ie和firefox的调试，推荐companion.js当做ie下的debug工具，firebug肯定是ff下的调试工具了，再安装一个web developer在FF下就很强大了。然后再在ie和ff的快捷方式里加入jash的mark按钮。调试和测试的工具环境差不多搞定了。

5，代码的测试，jsunit和qunit自己下载一套安装在自己的项目环境下即可，但是这个仅仅是针对js的，css方面和html方面的用ff的web developer插件可以直接测试是否符合w3c标准，不需要全部符合标准，以网页不变形为保障，以没有错误代码为基准，切忌不要当学究。最后还有就是yslow和page speed对于性能方面的测试工具也必须安装，控制台下对http请求的监控辅助ajax的编码。

6，便利的第三方开发工具，Photoshop，Fireworks，Illustrator，Flash肯定就都得有了。算图形辅助，然后就是word，excel，Adobe Reader，notepad算文档和办公辅助，一套包括完整的js html css 各个方面的CHM手册，算代码储备辅助，ff下的插件工具还有FSCapture这个工具算是屏幕视图的辅助了，包含了吸色截屏尺子放大镜等功能。最后推荐的是google桌面和有道词典，前者是快速搜索相关知识，后者是对于我这样英语不好的人，快速解决了给变量起名字这种恶心事的尴尬……

差不多说到这里应该都明白了，其实前端开发的环境大部分都是基于一些小功能，小浏览器插件和一些很奇怪的小工具外加一些必备的ide工具攒起来的那么个东西。但是麻雀虽小五脏俱全吧，方便开发工作和提高开发效率才是王道。今天整理一下，留作日后查询。相关工具的下载地址本想一起发的，但是想想，还是看客们自己搜索，把握的才会更牢固吧。我也就不浪费多余的时间了，而且大部分都是些常用工具而已。

如果有什么遗漏疑问，欢迎喷我……或者留言给我。

Tags: , ,
Posted in 前端开发, 心情日志 | 5 Comments »

frameset和div常规布局的优缺点比较。

5月 13th, 2010

用frameset来布局的优点：

1，在frameset里使用iframe来实现常规的一些分栏布局，可以借助一个页面承载多个页面的方式来重用页面代码。
2，一个页面中的iframe之间可以互相实现关联，而且不需要依靠过多的js就可以实现类似“局部”刷新的机制。
3，一些常见的后台管理系统大部分是用这种方式来布局的（追其原因可能是上面2点），所以固定了思维系统布局可能用frameset来实现比较好。

用frameset来布局的缺点：

1，如果要实现不同iframe之间的dom元素产生互动和关联，需要的js复杂程度较高，而且有些根本实现不了（比如拖拽，比如用户自定制页面布局）。
2，一个页面承载多个页面的http请求，而且实现那种类似局部刷新的效果，不是后台运行请求的机制，而也是使用了前台的浏览器刷新机制，会有延迟的响应而且无法对响应进行控制（比如loading或者一些响应状态的监听）。
3， 由于常见的后台系统大部分是管理人员进行一些管理操作的，所以iframe的模式可以很快速的完成开发和迭代，但是目前（我们的系统）不光有管理的任务还 会承担展示和交互的一些功能需求，对页面的可操作要求比较高，iframe的可操作性又比较低。毕竟一个页面装载多个页面，不好调试和控制，在开发上的一 些功能上的不可实现，也会限制UI界面设计和交互的创意思路（比如一些页面特效，动画，dom的及时性改变等）。

使用DIV传统布局与frameset相比的优点：

1，整个页面可以自由操纵，无论是样式还是DOM元素。
2，UI设计与布局，功能上等，不会受到任何技术上的限制和避讳。（比如用户页面的拖拽，自定制页面等）

DIV传统布局与frameset相比的缺点与解决办法：

1，不可能快速的实现“局部”刷新那种效果，要转用ajax方式实现真正意义上的局部刷新。
2，页面代码不能高度重用，但是可以使用服务器动态语言里的include等语句实现。

所以DIV布局方式与frameset相比之下：前者可以完全弥补掉frameset的一些局限和缺点，而且也可以使用其他手段完成frameset的优点，且实现难度较小。

大量的使用ajax的传统DIV局部页面，会遇到的一些开发难点：

1，真正实现局部刷新的复杂的javascript开发工作。因为ajax是基于javascript的。
2，大量使用ajax的系统中客户端状态的保存问题，比如ajax操作过程中的页面状态储存，浏览器的前进功能，后退功能的实现。

解决方法：

1，使用jquery框架简化ajax与javascript的开发量，实现javascript代码的有效开发与管理。
2，使用rsh框架实现ajax系统中的客户端状态保存和模拟浏览器的后退前进功能。（RSH也是比较成熟的js库）。

最后在我们公司前端布局的选择上，决定使用传统的div布局页面代替frameset，主要是基于以下几点原因：

1， 由目前开发的系统的需求所决定，我们现在开发的系统已经不光局限于一些后台管理员的管理功能，更多的是一种展示，客户需要是一个丰富的RIA应用而非前 者，系统需求需要系统实现丰富的交互功能和好的用户体验，使用frameset已经不能很好的实现了。（最简单的例子：校内，开心中的用户界面，也是固定 的三栏布局，那么它为什么不用frameset来实现呢？可以自己思考。）

2，选择div传统布局也可以很好的完成frameset布局的全部优点部分，并且我们还拥有一期成功的项目开发经验。

3，从性能上说，减少了HTTP请求，增加了用户体验，而且把B/S的实现往C/S靠拢也是未来B/S发展的趋势。

4，在UI设计上说，会拥有比frameset更好更多的表现形式与设计形式。

5，针对DIV布局在实现B/S系统，相对于frameset布局的一些不足，完全拥有足够成熟的解决方案。

可能很多地方总结的不到位或者可能根本就是错的，以上均为小爝个人看，仅仅做为参考，希望可以有更多的人一起交流探讨。

Tags: , , , ,
Posted in 前端开发 | 2 Comments »

前端开发工程师的一些关键词儿

5月 9th, 2010

最近越来越多的人问我，需要学什么，按照什么方向来学。我其实也开始有点说不明白要按照什么方向去学了。因为我学的很杂，很乱有点不按照套路出牌。

所以很好的学习路线也给不出大家一个具体的，本来想画张前端开发工程师的成长学习路线图，可后来想了想确实没什么必要，大家都是野路子，各有各的特长和不同。那么我就分享下自己的算了干脆，也很久没有总结过自己，确实我也有点迷茫自己到底都会什么了，具体到一个一个的关键词儿可能就如下面这张图中所说吧。。。唔，暂时想到这么多，什么ue，ui方面放下不讨论，我觉得其实还是写少了。。也许还是写多了呢？那么，作为前端开发人员的你，掌握了多少呢？我觉得比我还要多3 4倍 的人也是大有人在。。。（PS：画del线的是了解看过但并未实际运用在开发中，没有del线的基本或多或少学过一些并运用到了实际项目中，so写出来献丑了，可能不全，保守估计应该我会的比我写的多，太多东西都学乱了……）

欢迎大家互相补充……

相关的其他如正则表达式，web可用测试与安全防护，服务器，非win平台方面，手机移动设备的项目开发还有浏览器插件方面等等，很多吧，都是我欠缺和薄弱的，也期望日后加强相关方面的学习，有目标才有动力（最要命的其实还是算法……）。

Tags: , ,
Posted in 前端开发, 心情日志 | 2 Comments »

CSS3已经进入实际应用阶段。

5月 2nd, 2010

未来的CSS文件中很可能更多的会涌现出下面这张图的样子了。

上图是我写的个实例，综合应用了CSS3中的选择器和选择符，比如所有元素的:hover，attr选择器，子元素筛选，所有的事件伪类，>层级，还有锚点选择器:target，奇偶选择器等。

下面是应用后的样式在各个浏览器中的样子。

IE系列从5.5一直支持到9.其他非IE系列均为目前市场最新版本。经测试，显示均一致。

例子地址：http://www.designsor.com/demo/css3/

给出几条HTML部分代码如下：

<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />
<!–[if lt IE 9]><script src=”ie7/IE9.js”></script><![endif]–>

保障IE8的模式为正常兼容模式，保障IE9以下浏览器加载CSS3的选择器属性js脚本，保障非IE浏览器不加载IE9.JS脚本文件。如下图在FF里，我们并没有看到IE9.JS的加载。

特别注意的是，看了上面的demo例子，我们并没有使用任何额外的js就实现了一些以前IE中必须要用js或者其他库框架才能完成的一些特殊工作，看来css3给我们开发者带来了太多的便利。

IE9.js支持的CSS3特性如此列表

http://ie7-js.googlecode.com/svn/test/index.html

请仔细查看，并可大胆的先提前应用到你的项目里吧：

如果你要实现CSS3的高级特性，比如圆角，阴影，当然也可以。但是在IE下也是必须要付出额外代价，在IE9出现之前不推荐。但是针对圆角这么实用的功能性CSS，解决办法也很多，比如CSS8中的这篇文章：http://www.css88.com/archives/2230 （实现CSS3圆角）还有这篇文章http://www.css88.com/archives/2240 （实现CSS3阴影）

具体代码不给出，我测试都通过，但是在项目中额外提醒下关于.htc的兼容性与路径问题，需要各位在应用时提前考研，路径需要注意，与CSS文件最好同级，因为htc不支持相对路径。并且所有的HTC,JS文件模拟CSS3的这种圆角特效，无论谁写的，其实质都是在元素中增加了DOM，模拟实现的，所以在应用了htc或者js圆角的元素下再使用伪类，IE9以下是不被支持的。

如果说CSS3的特效是你梦寐以求的，那么错了。他的特效还没到实际应用阶段，所以我觉得在项目中保持CSS2的一些高级用法还是有益的，比如圆角的实现，比如九宫格，背景图片定位技术等。而在选择器的应用上，大胆的使用css3的选择器吧。目前大家都支持的很好了。尤其是在ie7项目组的ie9.js推出后，他连:not选择符都已经支持了……还犹豫啥呢。IE6未来是必死的。

请用各种浏览器或者FF来查看我的DOMO例子中的CSS文件的写法，我觉得你会很感兴趣并且加入到使用CSS3的行列中。

相关其他知识关键字：Ie-css3.js,ie7,ie8,ie9.js,各种辅助IE下实现封装方法的htc方法。

如果你对未来的实用CSS3感兴趣，也可以查看下这篇文章(http://www.javaeye.com/topic/344986)，或者与我交流，用了差不多1天半的时间掌握了下大部分的CSS3实用方法，相比较CSS2来说，它让CSS的写法更有具有挑战性和趣味性了，使用起来更加效率和稳健，作为前端开发者，你要跟上脚步了。（有关效率问题的那套歪理邪说，均可取个人主观判断后做再决定）

Tags: , , , ,
Posted in 前端开发 | No Comments »

新家，需翻墙。（附带个翻墙教程）

5月 2nd, 2010

上面这首歌是胡大推荐给我的，听过之后内心的躁动果真平静下来了，随着上周一系列的事情，我从豆瓣扎根将近3年的生活结束了…下面这个是新注册的推特。

twitter

07年注册的facebook。

facebook

具体原因就不说了，之前的BLOG说的很清楚，为了让我每天打开页面不再那么惘然，只有如此是好。

可能你目前点了图片链接会访问不到，不过没关系，我顺便把我的翻墙经过也写出来，分享下。（2010年5月2日可用，亲测）

需要工具：Firefox+Easy Tor+Autoproxy

先下载上面的3个玩意，第一个是FF浏览器了，第2个是一个IP代码工具，第3个是FF一个专门翻墙的插件。安装顺序是先装FF，然后安装ET，然后用FF安装Autoproxy，一切准备就绪，全部安装完成重启FF。然后打开推特或者facebook或者u2b什么的，最近tumblr.com也被墙了，试试这个应该也能测出来，如果都能打开，那么就OVER了。

但是99%的可能是你装了上面那一堆，你也还是打不开。

嗯，安装Autoproxy的时候有一步界面是提示你订阅他们的RSS的，一定要点了。嗯，依然翻不过去，打开你的gmail吧。

用gmail发信到：bridges@torproject.org

主题随便，内容写：get bridges

发送成功之后应该是立刻会收到回信，因为对方是机器人。回信内容如下：

bridges

打开你安装的ET，然后选择设置中继服务器，点击网络，把上面的3个地址添加上。如下图：

et

成功之后重新启动EasyTor，然后会见到下面的提示connect to the tor network！就算结束了，翻墙成功。

etok

速度有时候会不是很快，因为毕竟代理中转了。如果还有不明白的随时留言或者发邮件给我。：）

Tags: , , , , , ,
Posted in 前端开发, 心情日志, 用户体验 | 5 Comments »

Page 3 of 9«12345»...Last »
Dtools Top
本页文章快速定位...