感触很深，做一个老师不容易，做一个靠谱的老师更不容易。

分享一下讲课用的 PPT，感谢 rage comics 表情 :P

PPT 预览用的是 SlideShare，如果由于国情你访问不了的话可以在这里预览或者下载：http://vdisk.weibo.com/s/5kYsM/1336906401

讲的对象都是初学者，所以内容比较基础比较简单，主要目的是提起大家的兴趣。欢迎指正错误的地方 :)

相关文章:

• IE6 position:fixed 固定定位问题">解决 IE6 position:fixed 固定定位问题
• WordPress 新主题 Miun
• 基于 SAE 的图片管理系统 Migs
• CSS 代码">在 WordPress 指定页面加载指定 JavaScript 或 CSS 代码
• 强化你的 WordPress 后台编辑器

这篇文章记录一下最近一段时间做的事情，跟标题一样，一个新的项目「嘉应学院设备维修管理系统」，难度虽然不是很高，没有之前的「嘉应学院质量工程项目申报系统」复杂，不过参考了之前项目的设计，这次的系统花了更多的心思在前端上面。准备把后台管理系统做成一个框架，也方便以后的开发。

一个人，两个星期（当然，除开上课的时间），干完了前端、后端、设计、交互的工作(via)。虽然有点痛苦，甚至有时候麻烦的事情接踵而来有种想杀人的冲动，但是在这两个星期的项目开发里还是学到了不少的东西。

也有点奇迹的是居然还在这段时间里看完了几本书（好吧，大部分时间都是在马哲课上看的）(ref1/ref2)。

好吧，重点来了，介绍这次的项目。

项目需求

有点坑爹的是客户没有提供正式的需求文档，而是口头上的说明。所以就只能通过口头上的理解，对客户的需求进行了一些整理。

1. 提供用户的功能，管理员以及普通用户；
2. 普通用户可以自己填写维修申请，并在申请时根据维修编号获得维修设备的信息；
3. 提交申请后提供用户（管理员和普通用户）打印回单的功能；
4. 基本的维修申请管理，包括复合查询，审核和批量操作；
5. 导出 Excel 报表，并可以自由设置导出的内容（结合 4 的复合查询）；
6. 维修公司的管理，包括维修公司的基本信息，银行帐号等等；
7. 安排维修公司以及填写维修预算；
8. 定期备份数据库；

考虑到是学校的项目，所以不得不考虑 IE6 的兼容性问题。后台的逻辑并不算太难，前端的处理主要是考虑兼容性。

前端部分

前端部分参考了 QQ 邮箱的结构，主窗口包含 HEADER 跟 SIDEBAR，右边是一个 IFRAME，这样的结构会比较合适作为后台管理的模版。

使用以前做的「嘉应学院质量工程项目申报系统」里面的 CSS 作为基础，整理了一下，模块化，细节的修饰，IE6 的 bug 处理（在了解了多少关于 hasLayout 的内容后，解决某些些 IE 的 bug 变得简单很多）；

为了学习的想法，在开发的过程中没有使用任何 JavaScript 库，而是直接 JavaScript 的原生代码实现，顺便练习 AJAX 跟 JavaScript 里面的 DOM 操作（在开发项目的期间看了「ppk 谈 JavaScript」收获挺大）；

最后完成的项目在各个浏览器（包括 IE 6/7/8/9/10 系列）都能表现一致；

后端部分

后端是使用 PHP + MySql 开发的，使用 Codeigniter 框架（话说 Codeigniter 的文档真的很不错）MVC开发，对比起上次写的代码，感觉这次的漂亮多了；

因为没有设备信息表，所以网络中心那边提供了一个 Web Services 的接口给我调用，同时在这两个星期里也研究了一下 Web Services 里的 SOAP 跟 WSDL，也重新看了一遍 XML 和 HTTP 的文档；

设计部分

设计同时参考了 Facebook 跟 QQ 邮箱的界面，主要是为了简洁。因为目标用户是学校里面的老师，所以在保证功能的情况下尽量把页面做得简单；

还有，很喜欢 Facebook 在一些细节上面的处理，小到一个 px，甚至是一个 Hex 值。简单，简洁，又很有感觉；

交互部分

呃…对交互没有非常深刻的理解，多的也只是平时使用一些 web 服务然后总结出来多少零碎的对交互的理解。对于一些初级用户，网站多一点的响应用户的操作可能会让用户用得更舒服；

鉴于这个特殊的用户群，普通用户的功能已经尽量的精简到了两个（添加和查看），并自己画了一张自己觉得算是很详细的操作流程图，但愿在这样尽可能简单的情况下用户愿意买单（还是等最后的反馈吧）；

项目总结

好吧，就像你看到的一样，这篇文章有点口水，我不知道你能不能有耐心的看到这里。但是已经很感动你看我扯到了这里。

其实总结也不多，只是在这次的开发中觉得如果有一个东西在做会比拿着书闷头在看效率会高很多，虽然一个人包揽了前端、后端、设计以及交互的工作（实在找不到人一起合作）会觉得很累，但是很锻炼人。

嘉应学院质量工程项目申报系统基于 PHP + MySql，使用了 CodeIgniter 框架，然后自己一个人独立负责了整个申报系统的前端以及后端开发。这篇文章主要是介绍一下这个系统的主要功能以及在做项目中的一些总结，不会公布关于该系统的任何源码。

设计结构

根据学校网络中心和教务处发给我的需求文档，项目的主要功能包括：

• 设置不同的账户角色，主要有：普通用户、学院用户、教务管理用户以及专家评分用户；
• 普通用户注册后需要教务处审核后才能建立申报项目；
• 普通用户可以自行建立新项目，并提交到学院，然后由学院提交到教务处审核，最后专家组评分；
• 普通用户新建项目需要按照申报的项目类型填写项目内容；
• 学院用户、教务处可以审核用户提交上来的项目；
• 专家评分后可以生成评分列表；
• 项目根据用户填写的内容可生成 PDF 文件在线预览；
• 其他需求不一一列举。。。

主界面设计风格

界面的设计主要参考了 http://developers.facebook.com/ 的设计风格，以简洁为主。

注册页面的设计：使用了尽量简洁的注册内容，保证用户可以快速、便捷地完成注册流程；

普通用户新建项目；

项目管理页面：重新编辑，提交，预览等功能；

项目内容编辑流程：使用 ueditor 编辑器，按步骤流程编辑项目内容；

教务处项目管理界列表：可以进行批量操作以及对单个项目进行 AJAX 编辑和提交，并能根据项目的类型以及所属的学院属性进行筛选；

教务处用户管理界列表：可以进行批量操作以及对单个用户进行 AJAX 编辑和提交，并能根据项目的类型以及所属的学院属性进行筛选；

系统设置：可以根据开放权限控制申报流程，以及限制各个学院申报的项目数量；

专家评分：教务处可以决定专家对哪些项目进行评分，专家可以通过专家组帐号对项目进行评分，评分结果自动计算；

项目的一些总结

由于一些原因，所以无法做一个 Web 的 Demo，所以只能用图片做演示了，当然图片还是不够完全表现出整个系统的特性，一个系统怎样还是需要去用才能知道。

在申报系统上线之后，得到了很多的老师的反馈，有些地方也许你觉得应该这样做，但是真正的情况是用户并不买单。在设计网站的时候还是要多考虑大众的用户，而在这个申报系统的用户里有很大的一部分是年龄较老的老师，当然很多地方我确实没有考虑到。

好吧，原谅我这么简单的介绍。。。

Migs 托管与 Sina App Engin，按照 SAE 目前的免费配额的话（每天免费补充云豆到 1,000），使用 Migs 做图床能储存你 10G 的图片，以及每天免费的 2G ~ 4G 的流量（100GB/月）；

介绍 Introduction

Migs 是一款基于 SAE 开发的免费图片管理系统，主要特性包括：

友好的图片画廊展示

漂亮的 CSS3 效果展示，你可以自定义展示在首页的图片供来访者查看；

多钟上传方式的支持

HTML 的上传方式能兼容几乎所有符合标准的浏览器， FLASH 上传能让你一次上传多个文件并进行批量编辑；

AJAX 即时编辑

只要移动鼠标点击标题或者描述，即可 AJAX 编辑图片的标题和描述，方便、快捷，免于繁琐的提交过程；

安全的防盗链设置

担心图片被盗链？不怕，你可以启用防盗链的白名单，只允许白名单下的域名才能链接到你的网站，防止网站流量的突升；

优雅的 Lightbox 效果

Migs 自带了优雅的 Lightbox 效果，方便完整的展示图片，无需打开新的页面即可查看原图；

方便的网页快捷键

点击键盘上面的 ← 和 → 即可快速翻到上一页或者下一页；

完美兼容所有现代浏览器

完美兼容所有现代浏览器(IE8/Chrome/Firefox/Safair/Opera)，当然至于 IE6 这些古代浏览只能保证正常的浏览；

方便的外链提取

直接提供图片的外链地址以及图片的大小尺寸，让你方便的提取图片链接并贴到自己的网店或者博客上；

强大的云计算服务支持

Migs 基于 Sina App Engine 开发，享受到高速稳定的云储存；

更多特性等待你的发掘…

下载 Download

• 最新版本： Migs Beta 0.1
• 发布时间： 2011 年 9 月 5 日
• 语言版本： 简体中文版
• 下载地址： Download Migs

安装 Installation

• 第一步： 注册新浪 SAE 用户 如果你没有 SAE 帐号请点击这里注册以表示支持
• 第二步： 创建新的 SAE 应用
• 第三步： 初始化 MYSQL
• 第四步： 创建至少一个 Storage Domain 用来填写设置
• 第五步： 下载最新版本的 Migs 程序
• 第六步： 解压下载的 Migs 压缩文件并使用 SVN 部署代码
• 第七步： 直接进入你的应用首页进行安装

注意事项 Notes

1. 本程序只适用于 SAE 平台，其他 PHP 的主机无法正常使用；
2. 请在安装前创建至少一个 Storage Domain，而且至少填写至少一个 Domian；
3. 安装和进行站点设置时，务必按顺序正确地填写 Storage 的 Domain，否则会出现严重的错误；
4. 开启防盗链功能后必须在白名单上填写一条自己应用的域名，如 migs.sinaapp.com；
5. 防盗链白名单内填写允许访问的来源域名，千万不要带 http://；
6. 防盗链白名单支持通配符 * 和 ?；
7. 防盗链跳转地址仅允许 yourapp.sinaapp.com；

关于 About

• 演示站点： Migs
• SAE 注册： 注册新浪 SAE 用户
• 报告 Bug： 请在本页留言
• 说明： 如果没有非常特殊的情况，Migs 会一直保持开发
• 说明： 本篇介绍的图片全部托管于 SAE 的 Migs

更新记录 Update

• Beta 0.1: 发布 Migs 程序

源作品发布链接是的 2011 年的高考倒计时，而且还有一个 2012 版的：http://loo2k.com/2012.swf;

一位用户将 Flash 倒计时修改后并去除了版权信息上传到了移动商城出售，售价 3 元；（页面链接）

移动商城截图

不想说太多，把别人作品的版权信息去掉后拿去出售是不是太不厚道了？

相关链接

• 高考倒计时作品发布页面
• http://loo2k.com/2012.swf
• 移动商城出售页面

最近一段时间（2011.08.02），Gravatar 再次无法访问，所以重新写了一个插件 Gravatar China for WordPress，并解决的之前存在的所有已知的问题；

Gravatar China for WordPress 特性

1. Gravatar 头像防墙补丁：替换 Gravatar 头像能正常访问的地址；
2. Gravatar 本地缓存：对特殊的网络环境下给头像进行本地缓存；
3. 自定义设置缓存过期时间；
4. 国内、国外主机用户通用；
5. 完美兼容 WordPress；

Gravatar China for WordPress 后台界面：

Gravatar China for WordPress 说明

本插件针对中国大陆的网络环境制作；

一般情况下，你可以在 Gravatar 头像不能正常访问的时候启用本插件的 “Gravatar 补丁”，它能帮助你的 WordPress 访客连接到正常的头像地址上；

通常，根据网页前端的性能优化来说，不推荐用户启用 “Gravatar 本地缓存”，因为它对 WordPress 的性能有一定的影响，当然这个影响仅限于生成本地缓存的时候；（启用缓存前请确认你的 WordPress 目录 wp-content/plugins/gravatar-cn/cache 可写）

本插件使用 GPL2 协议进行授权；

如果你喜欢这个插件的话，可以赞助作者以表示支持 :)

Gravatar China for WordPress 下载

WordPress 官方下载 | Google Code

最初发布于：2010 年 10 月 16 日 11:33

相关文章:

• HTML进阶秘籍">给新手的HTML进阶秘籍

经过这些朋友们的提醒，我更多的留意了关于 CSS 表达式方面的知识，而这篇文章，是我在看 《高性能网站建设指南》后，以及之前做的一些学习，我想总结下 “为什么尽量避免使用 CSS 表达式”；

什么是 CSS Expression？

CSS Expression （CSS 表达式），是一种使用动态设置 CSS 属性的方式，并且被 IE5 以上的版本所支持，但是 IE8 的标准模式已不再支持 CSS 表达式了^[1]；

一个简单的 CSS 表达式

body { 
	background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" ); 
}

这段代码的作用是能让你页面中 body 的背景色每隔一小时变换一次；

CSS Expression 带来的性能问题

是的，参考 MSDN “关于动态属性” 的文档，你会发现，其实 CSS 表达式还是非常强大的，比如你可以使用 CSS 表达式实现 min-width 属性，隔行换色，模拟 :hover, :before, :after 等伪类；

但是，正式因为 CSS 表达式太强大了，以至于 CSS 表达式带来的严重的性能问题：“为了确保有效性，CSS 表达式会进行频繁的求值”，到底有多频繁？就是在你改变窗口大小，滚动页面甚至移动鼠标都会触发表达式进行求值，如此频繁的求值以至于浏览器的性能收到严重的影响；

关于对 CSS Expression 的性能测试

这个测试的方法是来自于最近一段时间在看的《高性能网站建设指南》中的规则7；

P { 
    width: expression( setCntr(), document.body.clientWidth<600 ? "600px" : "auto" );
    min-width: 600px;
    border: 1px solid;
}

这个方法通过绑定一个 setCntr() 函数到 CSS 表达式上，统计页面执行了多少次的 CSS 表达式，并显示在一个文本框里面；你也可以通过 IE5 ~ IE6 访问 http://stevesouders.com/hpws/expression-counter.php 进行测试；

测试结果

页面内有 10 个段落，加载完页面大概执行了 40 次的 CSS 表达式，然后在你改变页面大小，滚动页面，甚至移动鼠标，在我的测试里不动鼠标仍然会执行 CSS 表达式，几万次的求值根本不在话下，而且在点击文本框之后，IE 就已经卡死了；

避免使用 CSS Expression

好吧，这是一个总结；虽然还有对 CSS 表达式进行优化的方法（你可以在参考链接中找到），但是这不是这篇文章要总结的，这篇文章要总结的是为什么尽量避免使用 CSS 表达式；

CSS 表达式虽然强大，但是会给浏览器带来很严重的性能问题，并拖慢网页的加载速度；在可能的前提下，尽量避免使用 CSS 表达式！

参考链接

1. CSS Expression 用法总结
2. CSS Expression 的优化

脚注

1. IE 8 的标准模式不再支持 CSS 表达式

相关文章:

• IE6 position:fixed 固定定位问题">解决 IE6 position:fixed 固定定位问题
• 完美的 jQuery 网页进度条

考完最后一科英语

好吧，高三的日子终于结束了；

相关文章:

• 太不厚道了
• 2011 年高考倒计时 Flash
• CSS 代码">在 WordPress 指定页面加载指定 JavaScript 或 CSS 代码

然后，顺便也给身边的一些同学弄了，再然后，好像人有点多了；所以干脆在放假的时候用重写了源代码，用 PHP + SQLite 重写了所有的功能，顺便添加了许多自助的功能；

顺利地，在比较零散的时间里很比较长的一段时间的测试，这个天气预报短信提醒应用算是完成了；当然，可能还有许多 bug；

天气预报短信提醒应用

如果你有需要的话，欢迎使用我的天气预报短信提醒，提供时间段选择；因为准备高考的原因，所以，短信提醒里面还有一个高考倒计时的选项，欢迎高三的同学使用 :)

你可以开通你的手机邮箱（移动=>139邮箱，联通=>wo邮箱，电信=>189邮箱），然后开通来信短信提醒功能，再到天气预报短信提醒应用申请订阅就可以收到免费的短信天气预报了；

天气预报短信提醒应用：http://loo2k.com/sms/ （如果使用手机访问会自动跳转到手机页面）

• 天气数据来自中央气象台；
• 城市三级联动 JavaScript 代码参考了 PhilNa 和 115TOOL；
• 如果你有任何关于天气预报短信提醒应用的问题，可以在下面留言；

一点总结

• 天气预报短信提醒应用是我的第一个 PHP 作品，算是初学 PHP；
• 在开发天气预报短信提醒应用的期间，越来越觉得，学习一样新东西的最好办法是用他；
• 整天抱着一本书看的效果可能远远不及你花一些时间亲自实践；
• Google 虽然非常强大，但是更多的我觉得搜索引擎在解决某个具体问题的时候很有用，而系统的学习一种东西的时候，书更重要；
• 多把一些想到的问题记录起来，因为书写是为了更好的思考；
• 多花点时间看看文档，有时候比一直在 Google 搜索可能更快解决问题；
• 英语很重要，文档还是英文居多；

后面的总结是一些乱七八糟的唠叨，或许你应该 PASS 掉的；

以前的旧主题 2K

这个主题是在写重新开始写博客的时候就开始使用了，快半年了。虽然在那之前也做过几个主题，但 2K THEME 才是我比较拿的出手的一个，尽管问题还有很多。

新主题 Miun

现在你看到的主题界面就是我的新主题 Miun，现在你所能看到的就是 Miun 的特性，如果你有啥好的建议帮忙提下吧 :)

Miun 只在 Firefox / Chrome / IE8 中测试完美通过，IE6 没有详细测试和专门的 Hack。

关于主题的一些小说明

1. 做个自己的 WordPress 主题并不是很难；
2. 对细节细心的处理，主题会更完美；
3. Google 是个好老师；
4. 多练习会提高得很快；
5. 别自我满足；
6. 放弃 IE8 以下的 IE 系列；

上面只是在做主题时的突然想到的几点，或许有点废话。