麥町 | 乌冬'

怎么说呢，今天在GR上看了很多前辈们写的2011的总结，感觉自己写的话，应该还是流水帐，可能今年结束的时候，可以提一下吧。

很多都是已经工作的了，谈谈技术，谈谈生活，却难免发现现实远没有理想那样美好呢。

可不是嘛，所以对于我自己而言，一个没有上路的学生，做了点拿不出手的事情，却也想大做文章，难免被人当作笑柄。不过今天看到的有一点，确实很感同身受的。

也就是对于我这样一个白菜准web dev而言，做个桌面客户端可是多么陌生的事情，功能的话如果不复杂，一般不需要去了解系统调用（比如我用python），很多底层借口都封装好了，写点逻辑，就差个GUI了。问题的关键是什么呢，这种小东西，很多时候只需要一个脚本的事情，却因为想要强制做成个应用来发布，而硬生生地去套GUI，还想要各种好的交互体验，难免会很吃力的吧。

网页的交互相对熟悉，桌面应用，实在是不拿手，以至于和icys做了挺久的，到头来还是需要命令行，算是半途而废的东西，功能性代码没什么技术含量，还借鉴了前辈的东西，如果拿出来，更是可笑了吧。

正如某前辈说的，开发自由软件，给大众使用，以为很光荣，确实很累人的事情。因为是大众产品，体验时第一位的，除非功能实在是太需要了，那实用性差点也无所谓。但是如果想拿得出手，前期的核心开发反倒是不占太大的比重的，后期的完善甚至运营相比就更加重要了，特别是对于个人而言。

所以嘛，为什么开源的东西web的比较多，因为没有那么麻烦。涉及OS的，偏底层的东西，范围其实很固定，虽然技术含量确实前期会很高。而web的话，更偏向用户，门槛不是很高，做产品更容易，（涉及到性能或者类似高并发之类的其实和web关系不大了）。

自己一直的目标是web架构，但是对桌面应用也没有说绝对不沾边的，说到底，架构到最后还是一回事吧，桌面的话，只是涉及了GUI那一层嘛。

果然文章已经毫无章法了。。。总之，现在的目标是toefl，然后是日语和技术。技术上的东西，这个假期可能涉及的就不多了，会拼命做题吧~~下学期才是日语加技术~ 很期待自己，说实话技术是自己永远的最爱，只是各个阶段侧重点不一样罢了~

水完 加油！！！

关于CIPPUS，我想大部分人不了解。在此我就作个简单的介绍。（更多请关注sharpmark前辈的blog）

CIPPUS是一个隶属于SSDUT的大型技术组织，成立于03年。而鄙人作为SSDUT的一分子，有幸在有生之年加入了这个团队 = =

组织内部划分不同技术小组数十个（目前是，刚开始很少，但是现在多了，自然不如以前质量好了吧），牛人出过很多，并还在努力出。。。

这么大一个组织，网站是必须的，于是在04年就有了这个计划而事实上也完成了CIPPUS的网站建设（甚至还有BBS等）不t过，由于一些不可抗力，网站最终并没有长期运行下去，甚至一度处于崩坏的地步。后来，多了几年，对，是几年，中心一度决定再把这块拣起来，不过很可惜，由于另外的一些不可抗力（怎么都是不可抗力？），工作一度又停滞了。。。于是在上个学期快结束的时候，当中心再提起这件事的时候，这个重任，很不巧地落到了我的头上。。。

然后为什么到现在才上线呢？可能是我们也遇到了阻力，但是很幸运这一次，我们遇到的是可抗力:)

于是，前台->后台。。目前的这个beta就这么出来了，其实要做的功能太多了，但是如果再不挂上去，又显得不太好 XD

地址么 cippus.dlut.edu.cn~ 网站其实是横版的，用了很多fixed 加 z-index,所以在高度的处理上做得不是很好，尽量做了对很多浏览器分辨率的兼容（但是比起Gmail的那种兼容，差远了。。。以后改吧）

团队目前2人，以后会慢慢壮大的~（2人都是CIPPUSweb组的，包括我）以后关于网站或者团队的事情，基本会更新在团队博客sugoi里~而同时，作为一个崇尚Geek文化的团队，我们以后也将会将很多东西，一步GitHub，目前帐号就先不公布了，等成型后吧~~敬请期待~

最后，上个截图。。

Backbone的官方例子中的第一个也是最简单的，便是这个todos。

*<Backbone -- 一个可以在前端组织MVC架构的javascript框架 了解更多>

——–

从功能上来讲，todos就是个to do list（典型的GTD手段之一），我们可以把要做的事情一一罗列，完成后删去即可。这次的这个app完全是个webApp而且不涉及后端。虽然从原理来讲不涉及后端的主要原因是运用到了HTML5的Local Storage特性，直接将信息本地存储而不需要用后端语言来存储信息（DB etc.），但是当完整地看待这个app时，从来没有接触过webApp的同学（像我）还是会惊叹于app整个代码的架构形式，往往写过js的都大概体会过js代码的松散和全局规划的难度，像我这样的菜鸟，如果要做个app，肯定是无数个函数。。。（以下省略） 好吧，言归正传，既然是Backbone让一个WebApp组织得如此井井有条，那我们就不妨来看看，它到底是怎么做的。

——- —— ——– ——- —–*<todos源码>—— ——— —— ——- ——–

如果直接看源码的话，新手一下子看明白还是有一点点难度的吧（老鸟拜鄙视我），因为我们都压根不知道Backbone的基本形式啊。这里我就不去讲解Backbone了，要我说估计也不准确更不全面吧。。

附上个自己看过几遍的好文

1*<Backbone JS框架指南>

2*<从豆瓣说和Backbone.js说开去>

——–

—————-

这样一来，我们大概了解了Backbone了吧，下面开始正式的介绍，介绍完之后，我想大家对它的Model，Collection以及View这三个最基本的要素会有更深的印象。

window.Todo = Backbone.Model.extend({

window.TodoList = Backbone.Collection.extend({

window.TodoView = Backbone.View.extend({

window.AppView = Backbone.View.extend({

上面这4个声明，便是源码的全貌了，也就是说，这个App，一共包括了1个Model，1个Collection和2个View。为什么是2个View？其实稍微仔细看就会明白，第一个view是list里的每个item的view，而第二个view，是整个app的view，如果要合并，并非不可以，只是这样，整体来说更为清晰，代码的的目的性更强，更规整。

那么，我们首先来看这个Model

（Models 用来创建数据，校验数据，存储数据到服务器端；Models 还可以绑定事件。比如用户动作变化触发 models 的 change 事件，所有展示此model 数据的 views 都会接收到 这个 change 事件，进行重绘。）

代码相对教少，我就都贴过来好了。我们发现，它有一个defaults对象，用来存默认的数据，即每个item的内容和是否完成。然后是初始化函数initialize（），检测如果内容为空，填上默认content。下面还有两个函数，由于是在Model下的，而每个todo list的item都对应一个Model，所以Model里的对象和函数，都只针对自己这个item生效。例如这个toggle变化函数，便是在用户点击某个item的勾选框时，才发动的。clear函数如是。

然后是Collection » Read the rest of this entry «

这几天接了个小网站的后台的编写工作，有一块是新闻发布，由于是非常小众长时间不会怎么发布新闻的站点，我想着就不用数据库而直接文件读写好了（其实也是为了图省事）。由此，网站的目录结构大多是我创建的用来存储数据的文件夹（文件目录多起来原来超麻烦。。）

然后做新闻发布的时候，后台添加的新闻，必定得按照发布时间的先后来排序的，最新发布的必须排在最前面，但是我们如果不作处理，php默认是按照文件名来排序（win和Linux下都是，你直接改文件夹的排序方式是没有用的），当然，如果是用数据库的话，完全没有问题，但是我的文件操作，要考虑。。。

于是很简单，几下他们的发布时间，存个变量，再排序输出就可以了。。但问题是，每次展示页面的时候都得排次序，很耗时，如果有永久的办法，就好了。。

 <?php
    $count = 0;
    if ($dir = opendir('added_news')){

	    while (false !== ($file = readdir($dir)))
	    {
	    	$count ++;
	    	if($file != "." && $file != ".."){
	        //echo "$file\n";
	        $title[$count] = $file;
	        $title[$count] = array('text'=>$file, 'updatetime'=>date('YmdHi', filectime("added_news/".$file)));
	    	}
	    }

    closedir($dir);
    }

    //时间：$title[$i]['updatetime'];
    $c = $count;

    	for($i = 0; $i < $c; $i ++)
    		for($j = 0; $j < $c-$i-1; $j ++)
    			if($title[$j + 3]['updatetime'] < $title[$j + 4]['updatetime'])
    			{
    				$tmp = $title[$j + 3];
    				$title[$j + 3] = $title[$j + 4];
    				$title[$j + 4] = $tmp;
    			}

    //timesort($title);//时间排序
    //$count = $count - 2;

      for($i = 3; $i <= $count; $i ++){
      echo '<li class="contentItem">
        <div class="contentItemMain">
          <img class="contentItemMainImg fl" src="upload_imgs/news/'.$title[$i]['text'].'/icon/'.$title[$i]['text'].'.jpg"></img>
          <div class="contentItemMainShow fl">
            <div class="contentItemMainTop">
              <div class="contentItemMainTitle fl">'.$title[$i]['text'].'</div>
              <div class="contentItemMainDate fl">'.date('j F Y',filectime("added_news/".$title[$i]['text'])).'</div>
            </div>

            <div class="contentItemMainDescription">'.nl2br(file_get_contents("added_news/".$title[$i]['text'])).'</div>
          </div>
        </div>
        <div class="contentItemShadow"></div>
      </li>';}
      ?>

没好意思地贴了代码。。。是直接输出的html，你没看错。。。  木有mvc，一点都木有。。。  原谅我吧。。。  赶时间啊啊。。。

忏悔下。。。   假期如果有时间得用mvc练练手，传说的重构。。

哈哈

自己的执行力从最近的几件事来看，完全是。。。用日语就是ぜんぜん不行。。。

先就刚完成的一个脚本来讲（后台是个还算简单的脚本，但整体的话也算是麻雀虽小，五脏俱全了–这里~~~~~~~~~~~）

先上图。。。（非商业网站，图片非原创 = =）

这个其实是个填词游戏的辅助查词工具，从表单就可以大概看出来~

项目本身是某学长嘱托的，给了个国外的查词页面，但页面很凌乱，而且我们需要自己的。但是问题也很明显，这个查词系统和词库没那么好弄，那么怎么办呢？在把盗用数据库和自己实现算法推倒后，我们最终还是选择了比较方便的类似代理的形式，就是我们建个自己的页面（也就是这个），将参数投递到那个网站，再把结果抓回。

好了，项目大体就很清晰了。于是我和流氓有正对性地去找办法解决。其实我们也没有做过这种东西，只能去各处碰了。。。

第一个想法是用一个服务器脚本（Jsp或PHP）来填单传值，但是没怎么展开就想到第二个方案，纯JS（事后证明利弊都有。。。）

想用JS是因为起初我们对脚本操作表单确实一知半解，也没有什么容易下手的地方，然后恰好在查阅的时候看到JS自动填表提交的例子，于是一下子就心动了（诶。。。）最近其实就在看javascript和ajax来着（没怎么实践呢），于是毅然决然地做了。

这个方案初定的计划是用隐藏iframe来放国外额原始页面。然后给他参数并抓回结果。刚开始我们确实想得就是这么容易的，还准备一晚上就搞定来着。。然后我们开工。。。把form1的target指向form2，然后填完form1后，原始网页在form2里出现，结果就在那里，我们眼看就要到手了哇，这鸭子来得。。。hiahiahia（form2是个iframe）

诶！！！js操作iframe不能！！！！！怎么不能啊？？？明明这么顺理成章的事情诶。。。

“流氓”也同时抑郁了。。。

后来再深入探讨的过程中我们发现，这个就是最典型的js跨域问题。。。囧

大囧哇。。。果然是js新手。。。所谓跨域，上图= =

所以，很明显，我真的是最最最最最最最典型的跨域了 = = » Read the rest of this entry «

回来几天之后突然接到了这个任务，负责做十几个静态页面，是个国际会议。

开始的时候参考了很多往年的网页，不过毕竟这个会议不是前端或设计为主题的（是也轮不到我做= =），又是静态的，所以要求其实不算很高。又因为自己之前做的很多东西拼了个框架，所以这次的任务前期写地很快。可是很快我发现，一直像以往那样不执着在每1像素的话，bug其实是那么的多，特别是在对付IE的时候。

在FF和Webkit的浏览器里，CSS3支持得已经很不错了，包括圆角和透明度。大部分浮动处理得也十分到位。但当你用IE（即便是IE8）的时候，你会发现网页一下子面目全非了。。。这是不可避免的，而自己才真正第一次认真对待这件事情= =

小细节方面处理了很多，就不一一赘述了。但重点提几个。

首先，你会发现，在FF或Chrome里body明明居中了的，无论是1024px还是宽屏，但是到IE底下，真个body是紧靠左边的，这让我很不解，明明是一样设置的。。。我真白痴，人家IE就是不一样的啊。。。

于是去找答案吧。。后来明白，传统的

margin:0 auto;

是没有你想象中的神奇功效的。。。

text-align:center;

呢？有人说用在body而不是html里，不行。。。

总之是不行就对了，而且你浮动，限定了body的width之后，向右浮动，两栏的右栏会随着浏览器的大小变动而浮动，而不是居中靠在body右边。。。所以，也许解决了居中，就解决了浮动的问题。。。

后来发现问题的关键是IE8之前，他们对浮动和定宽的识别做的很不好，如果你给中间的两栏框个容器（需要有高度），定宽，那么上述的几个小问题就都解决的。。。就是这样。。。为什么？  我也不清楚，该问MS的人。。

由于设置了定宽，就没法做流式设计了，这点上自己没有继续研究，也许交差之后。。。

总之，对付IE，任重道远 = =

最后，上一下截图吧，也算是自己的劳动成果 : )

装FaWave有段时间了，可是上面一直都登陆有饭否，腾讯微博，新浪微博和豆瓣，却迟迟没有推，究其原因，还是GFW。。。

一直想免去fan qiang的烦恼，又懒得买VPN或者SSL，又很久就听说自建API的事情，今天一时兴起，就决定自己弄一个吧，应该很简单。。。

后来证明确实很简单，但是自己比它还简单 = =

说一下大致过程吧~~ 算是记录下今天做的事。。。

————————————————————————

准备工作：

1.首先你必须要有自己的空间（GAE的请自行搜索攻略 XD）,并保证支持PHP

2.fanqiang ok （这个是关键啊）

3.Twip 本次尝试的主力，建议下载4.x 比较方便

开始实施：

1.申请一个Twitter Applications ( https://twitter.com/oauth_clients )

我就不贴图了，注意：

Application type选择Browse，以及 Callback URL应该填写你的twip地址，

例如http://xxxx.com/twip/ 前面的是你的主机。。

2.修改Twip里的config-example.php文件内容，另存为config.php文件在同一目录下。twip4.x的

config文件内容精简了许多，只有3条

define('OAUTH_KEY',''); //参考第一步，Applications申请中获取的 Consumer key
define('OAUTH_SECRET',''); //参考第一步，Applications申请中获取的 Consumer secret
define('BASE_URL',''); // 输入根目录地址，例如 http://xxxx.com/twip/

一切都好了之后，上传至PHP空间。

3.之后进入你的twip，选择oauth模式~

然后如果方框中不填，系统会自动生成~

ok（验证是要fanqiang的…）

这是成功之后~ » Read the rest of this entry «