2014年6月10日 星期二 晴

上周五看到一个网站，是小孩数学口算的，一看就是用BootStrap写的，在手机上也能直接访问看，我比较喜欢。总想找点事情给自己做，让自己瘦起来，于是这周一终于开始在SAE上动工写了。我离设计师十万八千里，也没有做前台的功力，我所能做的就是抄别人的主题和Javascript，当然后台得自己写。

我平时用的浏览器是Chrome，开发网站相关还是用Firefox顺手一些。我一般抄（mo）袭（fang）流（ka）程（fa）大概如下：

  1. 把网页另存到本地，获得相关的image、css和js等资源文件。

  2. 查看页面源代码，然后拷贝下来，组织成自己熟悉的部分。我一般会把一个html文件分成head、top、content、footer四部分，页面主要是content部分一样，其他部分都inlude即可。

  3. Firebug -》 网络 -》全部，观察参考网站的各种url。 自己网站也跑一遍观察，看有没有404的url，及时补上。 那些用ajax的，也是通过这个方式观察返回来的rsp的，自己写后台逻辑模仿返回就可以了。

  4. 调试Javascript，默认的Firefox开发工具很不错。这周我遇到问题了，我把css、字体、js等各种东西都调得跟对方的一模一样，没想到Ajax页面效果没有出来，js的代码是精简加密过的，只有三行，用Firebug很不好调（难道需要我手动格式化？）。

我不经意点了Firefox右键的“查看元素”，发现出来的界面跟Firebug有点相似，但却能同时展示出来，研究了一下，才发现是Firefox自带的开发者工具，其调试器能调试js，对精简的js，它还有美化源代码的功能，支持单步调试。这也是我第一次单步调试js，我设置了断点，查看了变量，发现对比网站和我的还真的不一样，原来原因是Ajax返回的是Json（参考网站用Django REST Framework写的），我图省事直接用Tornado写了个self.write(..)，虽然在Firebug看到返回的rsp内容一样，但我返回的其实不是一个Obj，JavaScript处理异常了。知道这个原因后，就很快解决问题了。

预计两周抄完这个网站，然后扩展（比如加点识字？成语？），供ss学习使用。心里对抄袭还是有点矛盾，但我也没办法，我不擅长前台设计和开发，也没有美工。。。