Designsor-专注于Web前端开发

站在巨人的肩上。

4月 6th, 2010

整理了一些比较崇拜的大牛，一直没时间收集。下面分享下，一个晚上的劳动成果，也算是补一补自己以前缺少的课。

第一个，当然要数jquery的开发者John Resig。jquery是我入门javascript的初体验，所以必须要说下了，而且是第一个，介绍均来自他们目前的个人BLOG。

John Resig

John Resig is a JavaScript Tool Developer for the Mozilla Corporation and the author of the book Pro JavaScript Techniques. He’s also the creator and lead developer of the jQuery JavaScript library.

Currently, John is located in Boston, MA. He’s hard at work on his second book, Secrets of the JavaScript Ninja.

蹩脚翻译：John Resig 是Mozill公司的javascript开发工程师，Pro JavaScript Techniques的作者，同时也是jQuery JavaScript library工具的开发者。

john目前在美国波士顿正在为他的第二本书Secrets of the JavaScript Ninja而努力着……

主要著作:

Professional (LinkedIn)

My Projects

Research

嗯，其他方面还有更好的一帖子来自豆瓣JS小组的煎蛋同学的翻译文章：http://www.douban.com/group/topic/10404799/

对他的认识我个人其实还是只局限于读过一本精通javascript，也就是那本Pro JavaScript Techniques的中文译本，然后就是他NB的jquery框架和测试框架Qunit了。在我心目中的第一位大牛……

个人Blog：http://ejohn.org/

第二位，Peter-Paul Koch，也就是PPK了，算是我入门javascript的第二个转折点，他的书PPK谈javascript通俗易懂的概括和阐明了javascript在web开发中的应用，简单直接，没有涉及一些高档的复杂的应用，而是直接告诉了你很多可以很快上手的基础知识，详细的书籍评论可见我的另一篇BLOG。http://www.designsor.com/2010/01/ppk.html

Peter-Paul Koch

Peter-Paul Koch is a mobile platform strategist, consultant, and trainer in Amsterdam, the Netherlands. He concentrates on Web technologies, mobile websites, and W3C Widgets.He specialises in HTML, CSS, JavaScript, and browser compatibility. He has won international renown with his browser compatibility research, frequently speaks at conferences, has founded Fronteers, the Dutch association of front-end professionals, and advises browser vendors on their implementation of Web standards.

In 2009 he shifted from traditional desktop browsers and sites to the mobile Web, and he never looked back. He discovered that mobile devices and browsers are in even more need of description than their desktop counterparts, and set himself to the task.

On the Web he is universally known as ppk.

Currently Vodafone is his largest client and sponsor of the mobile compatibility tables.

蹩脚翻译：Peter-Paul Koch是荷兰阿姆斯特丹的一位移动手持设备等的客户端专家，顾问。他致力于移动设备上的WEB网站技术和W3C标准。

他专精于HTML,CSS,JAVASCRIPT和浏览器兼容特性。他凭借他的browser compatibility research（浏览器兼容调查）拥有世界级的名誉，并且屡次在一些重大会议上演讲。他创建的Fronteers是荷兰web前端开发的权威，并且经常给一些浏览器厂商提供建议和提交BUG。

在2009年开始他从桌面浏览器领域转移到了移动设备上的研究，并且从来没有放弃。他发现移动设备上的浏览器与传统桌面浏览器比较更需要研究，并且投身于此事业.(这句翻译的有够烂)

在网络上他被人普遍称为PPK。

Vodafone 公司（是全球最大的移动通信运营商，其网络直接覆盖26个国家，并在另外31个国家与其合作伙伴一起提供网络服务，全球用户超过1.79亿）是他最大的客户并且支持赞助他的移动设备浏览器研究清单。

著作清单：

http://www.quirksmode.org/about/publications.html

个人BLOG：http://www.quirksmode.org/

唔，只翻译了他BLOG的个人介绍部分，其他的太多了，这里只是简单介绍，总之作为从一个业余开发者到成为大师，PPK身上值得学习的地方很多，而随着手持设备的增多，他现在又开始向移动设备浏览器进军了。最伟大的成就就是他网站那份比浏览器厂商都齐全的兼容表了……获益最多的就是他的PPK谈javascript了，在地铁里读了大概两遍。

第三位，是Douglas Crockford，认识他其实还是从别人那拿来看的一本蝴蝶书，javascript精粹。那是一本告诉你javascript语言核心的优缺点的书，博而需要久读。

Douglas Crockford

Douglas Crockford是JavaScript开发社区最知名的权威，是JSON、JSLint、JSMin和ADSafe之父，是《JavaScript：The Good Parts》（英文版、中文版）的作者。JavaScript的发明人Brendan Eich说他是“Yoda of lambda programming and JavaScript（lambda编程和JavaScript的精神领袖）”。他同时也服务于ECMA的JavaScript2.0技术委员会（TC39）。其个人站点和Blog是http://www.crockford.com/和http://profiles.yahoo.com/blog/GSBHPXZFNRM2QRAP3PXNGFMFVU。

Douglas Crockford现在是Yahoo的资深JavaScript架构师，曾在Atari公司（视频游戏工业的领袖）开发了办公自动化系统，同时也完成了对于游戏和音乐的研究；曾任Lucasfilm（卢卡斯）电影公司技术总监；在Paramount（派拉蒙）公司任职过新媒体执行主管；在电气社区，通常为人所知的是communities.com的创始人兼首席执行官；他还创办了State软件公司并作为该公司CTO，这也是他发现JSON时所在的地方。他同时也对Blissymbolics非常感兴趣，这是一种图形、象征性的语言，并且对永久减肥（Permanent Weight Loss）做过研究。

没有翻译：解释。。。因为他的个人网站没有个人介绍而他的BLOG又需要雅虎账户登录，好吧，我承认我没有雅虎帐号。。那么上面的介绍从http://dancewithnet.com/2009/03/29/douglas-crockford/这里转过来的，其实早就看过，很显然，他应该资历和权重都比上面二位都要重一些。可是就个人的，我小爝的认识和认知，还是上面的两位对我的帮助大些。。《JavaScript：The Good Parts》蝴蝶书，也是很多前端开发人员必备的书籍，只读过一次，没有做过笔记，毛毛收场，以后再次阅读时补上吧。仰望。

第四位，Steve Souders，你可能不知道他是谁。。。好吧，是我孤陋寡闻，但是他的那本小狗书。。。High Performance Web Sites我敢肯定10个前段开发人员有10个人都读过了。14条黄金法则等……这本书是在去宁波的卧铺上和半个月的地铁厕所时间读完的……

Steve Souders

Steve works at Google on web performance and open source initiatives. His book, High Performance Web Sites, explains his best practices for performance; it reached the top of the Amazon computer and Internet bestseller list. His follow-up book, Even Faster Web Sites, provides performance tips for today’s Web 2.0 applications. Steve is the creator of YSlow, the performance analysis extension to Firebug, with over 1.7 million downloads. He also created Cuzillion, SpriteMe, and Browserscope. He serves as co-chair of Velocity, the web performance and operations conference from O’Reilly, and is co-founder of the Firebug Working Group. He taught CS193H: High Performance Web Sites at Stanford, and frequently speaks at conferences including OSCON, The Ajax Experience, SXSW, and Web 2.0 Expo.

蹩脚的翻译：Steve任职于谷歌web性能部门与开源部（是这么翻译吧？）。他的书，High Performance Web Sites阐述了他最好的前端性能实践知识，曾在亚马逊图书排在销量首位。他后续的书 Even Faster Web Sites提供了web2.0程序在性能上的优化的一些解决方法。 Steve 是 YSlow,的创始人，他的性能扩展插件在火狐浏览器上已经被下载了170000次。他也是 Cuzillion, SpriteMe, Browserscope的创始人，也同时是co-chair，O’Reilly，Firebug工作小组的成员。他也在斯坦福大学担任教授，传授高性能网站建设知识，并经常在会议上发言，其中有 OSCON, The AjaxExperience, SXSW, Web 2.0 Expo

好吧，他的个人简介地址是：http://stevesouders.com/bio.php

我的英语很烂只能到这了，具体的内容看上面链接吧。个人的一些看法：steve对于性能和前端的研究已经不仅仅局限在代码上，对一些服务协议的了解甚至软硬件的掌握也是一名前端开发工程师应该掌握的，读读那本小狗书吧。。真的是本洗脑加提升认识的好书。

唔，很晚了，今天就先更新4位，改天继续。：）很多地方有错或者翻译错误，请以原文为准。希望能帮助到一些人，本过程也提高了我的英语水平和认识，补上了以前应该认真阅读的缺漏。暂安。

Tags: Douglas Crockford, John Resig, Peter-Paul Koch, Steve Souders, 前段开发书籍, 前段开发大牛, 前端开发认识, 国外前端
Posted in 前端开发 | 3 Comments »

到北京半年来读完的书。

4月 5th, 2010

公司有一部分，改天在公司照下再上传。这些是在租住的地方找的几本。

嗯，其实，书看太多，不好，就和史努比说的似的，有种想占有知识的错觉。嗯，潜心看些基础的东西吧。特此记录。目前为之，已读完一遍的有：构建可扩展的Web站点，JavaScript DOM高级程序设计，JavaScript语言精粹，javascript设计模式，jQuery实战，jQuery基础教程，精通CSS，Ajax基础教程，JavaScript DOM编程艺术，CSS网站布局实录，ppk 谈 JavaScript，高性能网站建设指南。

没读完的还是有那么3 4本。加油吧。

阿里巴巴UED前端开发面试题

4月 2nd, 2010

下面是朋友发给我的阿里巴巴UED前端开发的网上测试题，感觉很有意思，把我所写的答案贴出来分享一下，主要题目为4部，第一个是一些职业发展倾向的心理测试，跳过不说，然后是一道CSS布局题目，比较简单，下面给出题目要求：

我列出我的代码：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta http-equiv=”x-ua-compatible” content=”ie=7″ />
<meta name=”author” content=”XiaoJue”>
<title>用CSS实现布局</title>
<style>
*{margin:0px; padding:0px;}
div{background:#CDD8DA;}
.left_t,.left_d{width:90px;}
div.left_t{height:152px;}
div.left_d{height:117px;margin-top:10px;}
div.main{width:217px;height:279px;left:100px;top:0px;position:absolute;}
</style>
</head>

使用了绝对定位和一个下边距，这个因人而异了，3个标签构建布局，你可以写全屏幕的等等等等，但是我做的是按照它给出图片的样子，进行的布局。

下面一道是JS问题，比较有意思，也是着重说一下，看题目要求。

关键字封装。复用。提示：可以使用任何开源代码。也就是框架库了。

我为了快速实现，选择了最熟悉的jquery，为了体现封装和复用，选择了jquery的插件机制来进行封装和复用。

下面是代码预览地址：

http://www.designsor.com/demo/albb.html

具体代码可以查看连接里的页面源代码，实现方法有很多，在不做HTML页面修改和不影响所有其他东西的前提下，使用了JS来实现要求，兼容FF/IE，其他没有测试，但是所有方法均是jquery的方法，所以兼容性估计应该可以保障。

封装之后的调用代码样例：

$(function(){
$(’.blow’).jblow({”b_size”:25}); //调用封装的方法，可多次调用不影响HTML结构
})

HTML：

好了，最后给出面试题地址：

http://job.aliued.com/race/chooseRace/wd.html

Tags: CSS布局, javascript封装复用, jquery插件封装, 前端开发, 前端测试题, 阿里巴巴UED
Posted in 前端开发, 网页设计 | 4 Comments »

CIBOX-HTML,CSS,JS音乐播放器。

3月 31st, 2010

若曦给我画的草稿LOGO，很喜欢，不知道上了色什么效果。

下面我简单的介绍下我想做的一个插件CIBOX。

其实就是根据Jquery的一个新的插件jplayer衍生出来的想法，利用PHP的CI框架和Jquery的强大音乐支持做一款音乐播放器插件，而实现是纯的可定制的HTML,CSS组件。

多的不说，已经开发了有快半个月，希望插件站点能在6月底完成，也期待我家若曦的带色LOGO正稿诞生~特别记录。

Tags: cibox, HTML组建, html音乐播放, 音乐网站logo
Posted in 前端开发, 心情日志, 网页设计 | No Comments »

活学活用，Jquery制作图片展示轮播组建。

3月 31st, 2010

废话不多说，先看图吧。

然后是预览地址：一个是译言的首页滚动展示，直接看http://www.yeeyan.org/ 另一个的预览地址:http://www.designsor.com/demo/jquey/jquerypic.html

之前帮朋友做的2个轮播JS吧，大家都很常见的效果，图片滚动切换，图片渐隐切换，随时间滚动，停止，转换。大概的门户站都会有自己一个风格的这么个JS特效，但是我们到底有多少人，真正懂得里面的一些道理呢，可能更多的是自己找点特效代码或者Jquery Ui这种组建攒了攒，样子对了就好了，这样其实真的不好，花些时间搞懂这些常用的而又实用的功能很有必要，作为记录，下面给些小爝制作中的心得和分享。

首先，要想自己做出这种效果的门槛是，CSS HTML布局过硬，了解相对定位绝对定位原理，了解透明度CSS原理，了解JS基础的DOM知识，还有JS操作CSS的基础知识，最后是一些小的JS常用编程技巧。

如果上面你都符合，又想自己做出组合在一起的实际应用，那么往下读吧。

首先，上面2个例子，一个是左右滚动，下部指针控制且切换样式。一个是透明度渐隐，下部指针控制切切换样式。鼠标经过都停止切换，移开之后按照当前顺序继续切换。小图都可操作。

好了，以上就是这个功能的基本需求。小爝不推荐现在开始打开站酷，68，蓝色理想开始找代码。。。那样做你永远接触不到前端“开发”这个东西了，个人感觉领会了JS之后的开发才有真的乐趣。当然，现在我说的也只是皮毛。正文开始：

从需求开始想代码：
作为HTML+CSS+JS一起完成的东西，根本上是先理顺基本的思路，可能很多人会写CSS，布局完全靠想，写JS也是。我分享的完全是经验（实际代码自己去看网页源文件），那么继续，首先，布局：

根据效果图分析，快速形成布局。图片切换和JS这种特效做法很多，讲下基本的几种和优缺点：1，我目前用的，图片全部加载，代码直接铺上，快速实现功能，动画过度稳，图片无缓冲，但是开始加载时间会过长。2，XML,JSON,ARRAY数组切换，图片开始加载速度快，切换时延迟，代码稍复杂，实现功能速度比前者慢，要多写几个监听函数。3，结合PHP后端语言实现了，和前端开发没啥关系。

以上是原理，而不是直接叫你去找什么插件，什么特效代码，你要记住，所有这些都是以上原理。

下面：实现动画，首先：上下左右斜着的各种动画吧。原理：CSS随时间的变化而变化，绝对相对定位后的TOP,LEFT值变化而已。根据不同算法，加速度，减速，缓冲等均可实现。然后：透明度渐变，CSS中的透明度属性，随时间变化而变化，同理不解释。

根据不同需要，完成不同布局：
上面的2个需求不同，因为一个是左右移动，所以我选择绝对定位大容器后相对定位里面小图片，然后控制图片移动来实现切换，大容器OVERFLOW：HIDDEN；第2个因为是透明度切换，所以没必要移动的话，全部绝对定位5张图一个位置，根据时间来做不同的透明度变化，实现切换效果。

好，说到这里原理和实现方法还有代码你应该都弄好了，至于下部的指针，也就是小图片，随便你怎么去写吧。都做出HTML代码即可。

下面来说JQUERY里的封装好的几个JS事件句柄，也就是HOVER事件和CLICK事件了，JQ可以完成，JS也可以。通过DOM选择或者JQ的 $()来实现节点选择，这些是根本知识了。可以参考JS手册和JQ手册。时间函数，JS自带的SetTimeout还有清除延迟clearTimeout的用法，希望你仔细看下W3Cschool里的解释。我也不多说，了解完上面的知识，可以进行编码了。

设置标志位,JS常用小技巧。设置个全局变量保存当前图片指针状态，也就是说，当前图片切换到哪里了，我们需要记录。默认当然开始是第一个了，所以默认赋值为1。写一个切换函数function move(){},里面包含什么呢，节点的选择，你写的HTML的容器，用JS选择吧，然后做你需要做的动画效果，比如，第一个图，向左移动自己的宽度，结束。

开始封装，第一个图，用标识符代替，向左移动自己的宽度，自己的宽度，封装，向左移动的距离有了，第一次移动1*单位宽度；OK，然后标识符+1；结束。

这个函数差不多OK了。第一个操作结束，标识符移到2，嗯，时间函数,settimeout完成重复和延迟，settimeout(move,3000),函数的最后加这个代码，3秒后再次执行这个代码。哈哈，看，切换效果完成，因为标识符自增，下次执行的就是第2张图了，最后加入控制结束回归的判断，if(flg==5){flg=1}；OK不用解释了吧，里面的5可以封装的。。。

完成切换的JS了，原理就这么简单。透明度同理自己思考吧。下面是HOVER和CLICK事件了登场了，鼠标移到大容器上，我们的切换要停止，嗯，JS里是mouseover，道理一个意思，我们cleartimeout（）就可以了，里面的参数跟你上面设置的settimeout参数即可。例子：T=settimeout（move，3000）；cleartimeout（t）；嗯哼，移动上，动画切换停止了，移动走呢？我们重新运行move函数即可了么~嗯，记得一点，移动走会立刻触发move函数，我们还是依然需要settimeout延迟出发move函数，然后一切OK！移走，移上的就都制作完毕了。封装你的代码吧，上面的例子我没有封装，只是快速实现了而已。

最后，click事件，用在改变指针，这个好办，下面的图的顺序和上面的大图肯定是对应的。那么下面的图是1，点1的时候指针赋值为1，点2赋值为2，即可。得到这些1啊2啊什么的，你需要了解FOR循环这个编程基础知识了，其实就是有5个图，我就循环5次，每次+1.值就是你要的1 2 3 4了。。。具体实现可以看我的代码，jquery里用的each函数完成的，手册里有具体例子和解释。

嗯，到这里就应该结束我们的展示图片JS的编写了。什么什么你还没有JS和jquery的CHM手册？如果每天不看几次小爝都会觉得不舒服，所以我推荐，没有的自己google搜下DOWN了开始看吧。

希望大家js越来越NB~！

Tags: jquery图片展示, jquey图片切换, js展示代码详细讲解, 前段开发
Posted in 前端开发, 网页设计 | 2 Comments »

Win下小爝搭建的MVC开发环境（详细记录与分享）

3月 29th, 2010

涉及到的环境参数和版本如下：

Apache-Php5.3.2-Mysql5.1.45-CodeIgniter1.7.2-Smarty3.0-MyPhpadmin3.2.5-Jquery1.4.2

就个人原因先分析下为什么选择这样配置和环境，因为我并不是什么专业的程序员，对开发语言的选择实在是没有办法，只能选择还算熟悉的PHP，想尝试搭建一下MVC的开发环境，对于框架的选择，小爝比较中意CI这个小型框架，轻便多扩展并且入门门槛较低，对于前端的模板引擎就是直接选择了最流行的Smarty引擎，后端比较大众了，apache服务器加PHP5和Mysql的黄金组合，Js方面肯定也是，直接就是最新Jquery1.4.2了。由于我对linux并不是，或者很不熟悉，只好选择win下的安装配置了，这个也是无奈，等以后装了虚拟机再说那个吧。

好了，既然说明了以上这些，下面就开始我们具体的操作和配置安装了。我花的时间久一些，大概用了一天，中间也遇到了很多疑难问题，拿出来分享下。

需要下载的软件：

httpd-2.2.15-win32-x86-openssl-0.9.8m-r2.msi（http://labs.renren.com/apache-mirror/httpd/binaries/win32/httpd-2.2.15-win32-x86-openssl-0.9.8m-r2.msi）官方地址

这个就是针对WIN用户的openssl-apache2.2的安装包了。

mysql-essential-5.1.45-win32.msi（http://dev.mysql.com/get/Downloads/MySQL-5.1/mysql-essential-5.1.45-win32.msi/from/ftp://ftp.jaist.ac.jp/pub/mysql/）官方地址-日本的FTP镜像

这个是最新版本的MYSQL5.1了。

php-5.3.2-Win32-VC9-x86.zip（http://windows.php.net/downloads/releases/php-5.3.2-Win32-VC9-x86.zip）官方地址

这个是PHP5的最新官方版本。

CodeIgniter_1.7.2.zip（http://www.codeigniter.com/download_files/CodeIgniter_1.7.2.zip）中国版官方下载

这个是CI框架的最新版。

Smarty-3.0b8.zip（http://www.smarty.net/do_download.php?download_file=Smarty-3.0b8.zip）官方地址

这个SM3.0的最新版本下载地址。

phpMyAdmin-3.2.5-all-languages（http://downloads.sourceforge.net/project/phpmyadmin/phpMyAdmin/3.2.5/phpMyAdmin-3.2.5-all-languages.zip?use_mirror=cdnetworks-kr-2）官方地址

这个全语言包的3.2.5版本phpMyAdmin。

Jquery1.4.2.min.js（http://code.jquery.com/jquery-1.4.2.min.js）官方地址

这个最新版本的Jquery。

基本到这里，算是把工具全部准备齐全了。然后下面进入安装步骤。

1，首先是安装apache服务环境。这个是msi的，基本就是一路下一步，选择好你安装的路径，小爝在这里安装的是自己的公司电脑下的D:\apache，在安装的时候第一个页面是选择同意协议，之后是输入一些默认信息，随便输入就好，只要格式正确，然后选择Custom可以设置安装路径，切忌不要选择安装在系统盘，然后就NEXT到完成安装了，成功之后右下角会有小图标，显示绿色尖头。

2，安装完成以后需要测试是否成功安装完成，在浏览器中输入地址http://localhost/之后，看是否有work!的提示，有的话则这一步成功安装完成，默认的根目录在D:\apache\htdocs。

3，下面安装MYsql数据库，也比较简单，选择版本为Custom，因为可以设置默认路径，最好安装在apache同路径下，比较好管理，然后一路下一步，最后完成后会出现2个选择，选择Configure the mysql server now，出现配置选择，首先选择Detailed Configuration（手动精确配置），然后是Server Machine（服务器类型，mysql占用较多资源），其次是Transactional Database Only（服务器类型，专注于事务处理，一般），然后显示可用空间，选择下一步设置Manual Setting（手动设置，自己输一个数），输入1000，然后端口3306不设置，直接下一步，选择第三个下拉菜单（Manual selected Default character set/collation）中的通用utf8的编码，之后NEXT，会遇到输入新密码的提示，如果要你输入默认密码ROOT的默认密码是空，什么也不写，然后下面输入2次你的数据库新密码，之后NEXT，点Execute开始配置向导，4个圈都打上勾了，就是最终安装完成。

4，上面的步骤比较恶心，但是按照顺序一路走过来还是可以完成的，大家会发现这个时候我没有配置任何配置文件，因为我们要留到最后一起来配置，安装完MYsql之后就是PHP与他们apache和mysql的集成还有phpadmin的安装了。

5，首先安装PHP，解压缩你的ZIP压缩包，和MYSQL和APACHE同一目录下，然后php.ini-development文件改名为php.ini,之后把EXT文件夹复制到apache文件夹下，php5ts.dll文件复制到C:\WINDOWS\system32文件夹下，之后开始配置我们的PHP.ini文件：

搜索register_globals，设置成On,搜索doc_root，设置成”D:\apache\htdocs”，也就是你的网站根目录地址，搜索extension_dir，更改成你的EXT地址，比如”D:\php\ext”，然后搜索extension，找到一排模块激活的地方，在下面的几个extension=php_dba.dll，extension=php_gd2.dll，extension=php_mysql.dll，extension=php_pdo_mysql.dll，前面去掉分号;然后配置成功保存文件。

配置完PHP.INI之后，复制它到C:\WINDOWS\下面一份，再到apache下面一份。结束对它的修改，如果以后需要添加扩展等，就回去再改就好了，目前以上设置就OK。

6，打开D:\apache\conf下的httpd.conf文件，开始对apache服务进行配置：

搜索LoadModule foo_module modules/mod_foo.so，然后你会看下面一排类似的东西。添加LoadModule php5_module D:/php/php5apache2_2.dll这句话在下面，如果你下载的是我上面提供的软件包和压缩，这样设置即可，如果不是，就看apache版本，更改不同的php5apache文件名就好，我这里建议用我提供的官方的。

然后搜索rewrite_module modules/mod_rewrite.so，去掉前面的#注释，开启地址重写模块功能（以后配置CI需要）

然后搜索AllowOverride，把设置都改成All，搜索DirectoryIndex 后面添加index.php文件名，搜索AddType application/x-gzip .gz .tgz，在下面添加 AddType application/x-httpd-php .php 这一行，然后下面的ErrorDocument 404，ErrorDocument 500等选择修改，只是说一下，我做了自己开发中的修改，如果一般用户，不用动就好了。具体修改可以参看官方文档。

之后保存。

然后新建立2个文件放在服务器根目录下：一个info.php文件，里面输入<?php phpinfo(); ?>保存，然后再建立一个.htaccess文件，里面写入：<IfModule mod_rewrite.c>RewriteEngine On</IfModule>

然后重启apache服务器

输入http://localhost/info.php然后如果看到配置信息，就表明PHP环境安装成功了。

而且成功开启了地址重写功能，可以实现伪静态化啦~。

7，下面开始配置PHPADMIN，把下载下来的ZIP压缩包，解压放在根目录下，名字随意起，我的是mysqladmin，然后登录你的MYSQL，地址输入http://localhost/mysqladmin/之后输入刚才设置的密码和账号，就是ROOT和你建立向导的时候输入的密码，如果登录成功就OK了。

如果报错，检查系统服务，MYsql服务是否开启，监察密码是否输入正确，登录之后的配置比如修改密码，建立新账号就是自己研究去吧。

8，安装完这个，下面就是我们的MVC主力，CI框架了。解压缩ZIP包，新建立一个文件夹，也就是你的网站目录，比如D:\apache\htdocs\web

然后把CI压缩包里的东西放进去，文件如下：

web-system

-index.php

-.htaccess(新建立的，里面内容输入)

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond $1 !^(index\.php|style|robots\.txt) #上面的路径是可访问的
RewriteRule ^(.*)$ index.php/$1 [L]
</IfModule>

然后，打开system文件夹下的system\application\config\config.php文件，修改你的网站设置目录$config['base_url'] = “http://localhost/web/“;

然后修改system\application\config\config.php下的

$db['default']['hostname'] = “localhost”;
$db['default']['username'] = “root”;
$db['default']['password'] = “******”;//（你自己的密码）
$db['default']['database'] = “test”;//自己的数据库名

然后保存就OK了。

修改system\application\config\routes.php下的文件启用脚手架如下修改：

$route['default_controller'] = “Test”;//脚手架控制器名
$route['scaffolding_trigger'] = “abcd”;//密钥

先在数据库里随便建立一个表，比如TEST数据库下建立了一个TEST表。里面内容随便字段。

然后在system\application\controllers文件夹下创建一个脚手架控制器，Test.php内容为：

<?php
class Test extends Controller {

       function Test()
       {
            parent::Controller();

$this->load->scaffolding(’test’); //这里的参数写你建立的数据库表名
}
}
?>

然后再打开下面地址：http://localhost/test/abcd/ 即可访问，如果成功可以直接操作数据库进行表的操作，这也是CI框架自带的一个功能，说明数据库连接也创建了。

这样CI框架与环境的MYSQL完成配置，并且成功静态化掉index.php文件头。详细设置可参看CI的中文手册即可。

9，下面是针对CI框架来集成Smarty引擎，解压缩你的SmartyZIP，然后system\application\libraries下建立文件夹smarty，之后把解压缩之后的\libs下面的文件拷贝进去。

system\application\libraries下创建SM引导文件，Cismarty.php代码如下：

<?php
defined(’BASEPATH’) or die(’Access restricted!’);

require(APPPATH.’libraries/smarty/Smarty.class.php’);//APPPATH是入口文件定义的application的目录
class Cismarty extends Smarty
{
// {{{ constructor

public function __construct($template_dir = ”, $compile_dir = ”, $config_dir = ”, $cache_dir = ”)
{
     if(is_array($template_dir)){
      foreach ($template_dir as $key => $value) {
       $this->$key = $value;
      }
     }
     else {
      //ROOT是Codeigniter在入口文件index.php定义的本web应用的根目录
      //在入口文件中加入define(’ROOT’, dirname(__FILE__);
      $this->template_dir = $template_dir ? $template_dir : ROOT . ‘/tpl’;
      $this->compile_dir = $compile_dir ? $compile_dir : ROOT . ‘/tpl_c’;
      $this->config_dir   = $config_dir   ? $config_dir   : ROOT . ‘/config’;
      $this->cache_dir    = $cache_dir    ? $cache_dir    : ROOT . ‘/cache’;
     }
} // end func constructor

// }}}
}
?>

然后保存，根据上面文件中的smarty必需设置的文件夹进行创建，回到跟目录，也就是web目录下，创建4个文件夹，分别为上面函数中的’/tpl’，’/tpl_c’;'/config’; ‘/cache’;四个文件夹。

然后打开根目录下的index.php文件，添加根目录全局变量：define(’ROOT’, dirname(__FILE__));//在define(’BASEPATH’, $system_folder.’/');下面添加即可。

然后打开smarty文件夹下的system\application\libraries\smarty\sysplugins\smarty_internal_templatecompilerbase.php文件，然后修改61行代码，把

/*
        if (!$template->suppressHeader) {
         //xxxx代码
        }
*/

注释掉，否则报错。。。。别问为什么。

然后完成安装，最后开始测试：在system\application\controllers下建立控制器：Demo.php控制器：代码如下：

<?php

defined(’BASEPATH’) or die(’Access restricted!’);
class Demo extends Controller{

function Demo(){
parent::Controller();
}

function index()
{
$this->cismarty->assign(’title’, ‘这是我第一个smarty在CI中的应用!’);
$this->cismarty->assign(’content’, ’smarty和Codeigniter的结合使用:’);
$this->cismarty->display(’demo.tpl’);
}

}

/* End of file welcome.php */
/* Location: ./system/application/controllers/welcome.php */

然后TPL文件是在根目录下的web\tpl下建立：demo.tpl；代码如下：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>{$title}</title>
{literal}
<style type=”text/css”>
li{
margin:10px 0 10px 0;
}
</style>
{/literal}
</head>
<body>
{$content}
</body>
</html>

然后测试地址为：http://localhost/web/demo/

输出信息，完成SM和CI的集成，最后配置JQUERY在CI中的应用。

10，还记得RewriteCond $1 !^(index\.php|style|robots\.txt)这句话么？对了，就是这个，以后我们的CSS,图片，JS其实都要忘里面的STYLE文件夹中存放，否则因为重写地址的缘故，会都失效的~在根目录下创建style文件夹：下面的目录随便了，CSS,JS,IMG，自己配置，下载好的jquery文件放好，就可以从根目录直接引用到smarty模板中了。

到这里虽然分了10个步骤，但是其实过程很复杂，我用了大概5-6个小时完成，中间遇到很多问题，都是google查找完成解决的，如果按照上面配置不成功可以在BLOG留言，我会一一回复。

希望大家的MVC环境搭建顺利！

Tags: apache配置, CI继承SMARTY, MVC, mysql安装, php5安装, PHPadmin配置说明, WIN下PHP服务器环境搭建
Posted in 前端开发 | 1 Comment »

Web标准化交流会

3月 27th, 2010

感觉是误打误撞就跑去旁听了。收货也是意外的颇多。

下面是活动最后我们所有人的合影，腾讯前台照的。

下面是一些心得体会：

首先是参观了QQ的北京总部。。。。然后就是见到了NB人物月影，其次是真实的感受到了，目前大公司的前端开发人员的年纪基本处于老龄化。。。

然后就是这次的主题居然意外的是之前公司一直在开会讨论的流程问题，还好有所准备，但是发现和真正的大型互联网公司还有一定差别。大概猜到了目前前端开发的走向和以后的技术路线，还了解了一些大型门户比如雅虎和新浪还是依靠PHP+SMARTY的方式在运作。恩，听取了一些前辈对工作流程和态度的意见，以及彻底感悟到了职业规划和发展的重要性吧。

在交流会上，最喜欢的是腾讯那个写flash代码的哥们，之前是在facebook工作，说话比较直，但是很有道理，然后就是月影的逻辑思维确实让我觉得佩服，最后是低调的kejun，是豆瓣网的前端开发工程师，他出的考题，虽然上周已经在他blog上见过了，但是答案依然没有答对。。具体的答案可以去蓝色理想的WEB标准交流会小组找下。挺经典的雅虎测试题，也是现在豆瓣的面试题之一。

最后，我觉得唯一不好的一点，其实会议并没有得出什么结论，大家走的依然是一个过场，但是他们那些NB人物的讲话确实很受启发，其中有位程序员说的几个观点不很同意，并且最后的一句话就是-小爝说的：我觉得，互联网的技术圈，别搞的和娱乐圈一样，那就好了。

多交流多分享，感谢WEB标准交流会，PS：我没受到邀请，但是也去参加了HOHO- -。

Tags: web标准交流会有感, web标准化, 前端开发流程
Posted in 前端开发, 心情日志 | 3 Comments »