前言：一个业余者的网页设计经历/体验
学网页设计大概是上大学那会儿（不到2000年）吧，记得一上手就是Dreamweaver，是学Flash的时候顺带着学的。反正“所见即所得”，也就学着玩呗。那时候的流行的方法主要是表格定位，先Photoshop做好设计，然后切换ImageReady切片，输出HTML再用Dreamweaver打开编辑。记得当时老是会错位，很讨厌。
CSS也比较早就出现了，主要也是辅助做版式，大部分的工作还是在Dreamweaver中“所见即所得”来完成。<div>还是个比较稀罕的玩意，大部分教程中都没有建议用<div>来定位，现在想来原因可能是当时的主流浏览器对<div>的支持还不完善或者服务器开销有点大的原因吧。
服务器端开始出现PHP了，但主流还是ASP。
在QUT那几年，因为Communication Design课程的原因，需要做Flash+PHP的交互。PHP看了一下跟编程似得，就头大了。当时的作业其实是找同学帮忙完成的，我做Flash部分，交互都交给一个跨专业过来修课的新加坡人了（他主修计算机图形图像的）。这时候其实CSS+PHP的主流地位就已经奠定了，只是我还不是很有概念。
等到2012年要做动画教学视频库的时候，才真正下定决心（痛定思痛）开始研究PHP，因为需要去从头开始建一个带数据库交互功能的网站，纯HTML肯定是不够用的了。很头大，但必须咬牙啃。
看了好几个星期的帮助文档，最后还是放弃手写PHP，转而借助PHP 框架来曲线救国。PHP环境的搭建选择的是PHPNow，而框架则选择用CodeIgniter。CI是国外比较流行的PHP框架，国内其实貌似用ThinkPHP的比较多，但我觉得ThinkPHP貌似更复杂，所以挑了个简单点的。
来自百度百科：
CodeIgniter是一个简单快速的PHP MVC框架，它为组织提供了足够的自由支持，允许开发人员更迅速地工作。
自由意味着使用CodeIgniter时，您不必以某种方式命名数据库表，也不必根据表命名模型。这使CodeIgniter成为重构遗留PHP应用程序的理想选择，在此类遗留应用程序中，可能存在需要移植的所有奇怪的结构。
CodeIgniter不需要大量代码，也不会要求您插入类似于PEAR的庞大的库。它在PHP4和PHP5中表现同样良好，允许您创建可移植的应用程序。最后，您不必使用模板引擎来创建视图，只需沿用旧式的HTML和PHP即可。
做的时候还是满纠结，CI写起来跟编程也蛮像的，加上还要从头开始理解MYSQL语句。好在之前搞过一段Maya的MEL脚本，玩Unity3D的时候又写过一点点C#，勉强能够跟上吧。HTML前端这时候已经进化到较少使用<table>来定位了，改为大量采用CSS+DIV结构。
2015年10月，刚刚通过Comfirmation Colloquium的我发现后续的研究可能需要用到数据库，加上代购业务上也需要有个在线的记录系统，所以就动念做个网站，权作练习PHP+MYSQL。一上手还真是不习惯，2008年积累的那一点点知识居然都忘光了，只好从头开始看视频。好在捡起来还是比新学习要快，至少可以少走很多弯路。比如现在知道了可以用set_value()函数来直接获得表单提交的变量，而不用频繁去get或者post。
与08年的视频教学库相比，这次做网站完全没有用到Dreamweaver（部分原因也是这次的网站不需要太多视觉设计的东西，简单能用就行），所有代码都是直接在Notepad++中写，而且view中能用CI函数的就尽量不直接写html代码，比如anchor()、add_row()、echo $this->table->generate();等等。
网站空间上，08年的时候用的国内的“九零起航”最便宜的那款，这次选择的是“BYET”的免费空间，反而更大更方便，没有被墙，速度也还行。整个网站制作上花了将近2周吧，这个周期比之前还是短了很多，如果马上要再去做一个网站，我相信应该也不会很慢。
对网页制作相关技术/工具的分析与介绍
HTML+Browser：基础平台的建立
有了浏览器之后才有HTML。HTML是超级文本标记语言，其本质上的功能其实是网页设计者的输入工作，用相对较简单的标记语言来写HTML，然后交给浏览器将其翻译成我们所见到的页面。HTML和浏览器一起，起到了一个标准化的作用，不管客户使用的是什么操作系统，只要通过标准的浏览器来翻译符合HTML标准的text，就能显示出几乎完全一致的结果页面。
我这里说“几乎”，是因为早期不同浏览器对HTML的解释结果会略有差异。而这种“差异”，给当时的网页制作者带来了一个麻烦：兼容性。HTML必须在不同浏览器的不同版本上测试无误才能上线，而且对新技术的采用（比如CSS+DIV）显需要非常的谨慎。
可以说，浏览器这一工具（toolkit）通过引入标准（ standardization）的方式给网页制作这一创作（creation）带来促进（facilitation）的同时，也带来了新的限制（limitation）（我称这种限制为功能可见性：affordance）。
CSS：对HTML外观的补充（supplement）
单纯HTML的功能还是蛮有限的。在排版方面，HTML标记对文字的格式化基本上没问题，但版式设计方面就很弱。早期用<table>来做其实是无奈之举，也很受限制。对于“网页版式”这一项creation来讲，“表格化排版”这一创意路径带来的限制远大于促进，虽然“切片（slicing）”这一个技术（ImageReady和DW同门的Fireworks都主打slicing功能）大大的促进了“表格化排版”，但它最终还是被“CSS+DIV”所完全取代。
“CSS+DIV”是从CSS发展而来的，CSS一开始是为了简化HTML的格式功能（format），但配合<div>标签就能实现几乎完全不受限制的版式功能（layout）。
JavaScript：对HTML功能的外挂（add-on）
单纯的HTML并不具备太多的交互功能，纯粹是一个用来展示页面的工具。HTML原生标签应该只有<form>能够有一点点交互功能吧。但随着互联网的发展，用户有时候也需要在网页上添加一些小功能，于是JavaScript被设计了出来。
来自百度百科：
JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。
在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。
我倾向于把JS看做是HTML的外挂（add-on），它虽然被写在HTML文档中，但却是被非常生硬的插入HTML代码的，浏览器必须同时具备解释HTML和解释JS的功能，才能正确显示网页。相比较而言，CSS对HTML的补充更为自然，JS只能说是勉勉强强，同时也给网页带来了很多问题。这一toolset的命运我认为应该和“表格化排版”类似，最后会被更好的方案所取代。
PHP+MYSQL：对HTML功能的扩展（expansion）
原生HTML是静态的（static），而PHP是动态的（dynamic）。之所以对动态网页产生需求，是因为需要被用来展示在网页上的内容不仅其信息量越来越大，而且还处于不断更新的状态。而动态页面较之静态页面的最大优势，比如新闻网页，如果采取静态方案，每则新闻都要手动制作一个页面，且没添加一个新页面，导航页都要进行修改。但如果采取动态方案，则可能一次性写不超过5个PHP就能实现同样的结果，省时省力。
来自百度百科：
PHP（超文本预处理器）是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点，利于学习，使用广泛，主要适用于Web开发领域。PHP独特的语法混合了C、Java、Perl以及PHP自创的语法。它可以比CGI或者Perl更快速地执行动态网页。用PHP做出的动态页面与其他的编程语言相比，PHP是将程序嵌入到HTML文档中去执行，执行效率比完全生成HTML标记的CGI要高许多；PHP还可以执行编译后代码，编译可以达到加密和优化代码运行，使代码运行更快。
PHP是在服务器端对文档（包括.html和.php文档）进行解释，生成针对特定终端的HTML页面再反馈到用户的浏览器。这是一个对信息进行自动化（automation）处理的过程，而原生HTML仅仅是直接发送信息。从百度百科的解释可以看出，PHP不是第一个，也不是唯一一个用来做这项工作的语言，只是PHP最终变成了标准，笑到了最后而已。回顾当时，它的优势在于“更快”、“更方便”。而着眼现在，它的最大优势我认为应该是它已经成为了标准，且功能上没有严重缺陷。
MYSQL自然不是网页独有的东西，对于信息的储存和处理，使用数据库是最好的选择。但原生HTML是不能处理数据库的，这就需要PHP的帮助了。在这项工作上，PHP起到了桥（bridge）的作用。
原生PHP调用MYSQL的方式是这样的：
$dbhost = '127.0.0.1';
$dbuser = 'mysql_user';
$dbpass = 'mysql_password';
$dbname = 'mysql_databaseName';
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die('Error with MySQL connection');
mysql_query("SET NAMES 'utf8'");
mysql_select_db($dbname);
$sql = "SELECT COUNT(*) as total FROM `FileList` WHERE `class` = 0;";
$result = mysql_query($sql) or die('MySQL query error');
while($row = mysql_fetch_array($result)){
echo $row['name'];
}
可以看出来是直接把SQL语句写到$sql中然后通过mysql_query()来调用，这要求使用者完全了解如何使用MYSQL才可以，且必须在执行PHP页面时才能验证SQL语句是否正确（当然也可以在PHPMyAdmin中验证好语句再复制过来）。PHP从4开始提供了一些SQL函数，但依然不够方便。
CodeIgniter：对PHP和HTML的辅助（facilitation）
CI是PHP框架，所以CI并不能实现PHP不能实现的功能，它只是让使用者更方便的写PHP。
CI提供辅助的方式依然是将PHP和HTML标准化（standardization）。CI文件的后缀同样是.php，所以它其实就是PHP，只不过是按照MVC规范化之后的PHP。
来自百度百科：
MVC全名是Model View Controller，是模型（model）－视图（view）－控制器（controller）的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。
这个规范来源于软件设计领域的多年经验积累（当然，网页设计与软件设计其实从根本上来说是一致的）。对于程序员出身的用户来说，这个规范的逻辑是不言而喻的，但对于从写HTML起步的网页设计员（比如我自己）来说，一开始感受到不是便利，而是限制。
PS：我在开始写MEL脚本的时候是完全没有编程概念的，甚至觉得使用function()都是多此一举的麻烦。直到在用C#写Unity脚本时才感受到程序结构的重要性。可惜的是，编程的入门门槛太高，我至今还没能摸到编程结构的门槛。主要原因也是我之前一直写的东西都是些小的不能再小的脚本，MEL是基于Maya运行的，C#是基于Unity运行的，压根不能算程序。我倒是希望能够学习一门程序语言来着，可惜本科Basic都差点不及格的说。
经历过一个熟悉过程之后，用户才会真正体会到便捷性。比如上述PHP查询MYSQL数据库的语句，在CI中就变成这样：
$this->load->database('database');
$this->db->where('name', $name);
$query = $this->get($table);
return $query->result();
而对数据库的设置则干脆变成了专门的config文件夹下database.php中对所需参数（4个左右）的填写。
$active_group = 'default';
$query_builder = TRUE;
$db['default'] = array(
'dsn' => '',
'hostname' => '', //需要填写的参数1
'username' => '', //需要填写的参数2
'password' => '', //需要填写的参数3
'database' => '', //需要填写的参数4
'dbdriver' => 'mysql',
'dbprefix' => '',
'pconnect' => FALSE,
'db_debug' => (ENVIRONMENT !== 'production'),
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
'stricton' => FALSE,
'failover' => array(),
'save_queries' => TRUE
);
对比CI中的SQL查询语句和原生的SQL查询语句，不管是可读性和便捷性上都有很大的提升。至少，让我这个“菜鸟”也不至于畏难到下不去手。
CI虽然便捷，但其实还是需要一个相对较长的学习周期的，且对于业余者而言，它还是太复杂了。比如，如果完全没有PHP或者MYSQL的基础，是不可能用CI做出具备哪怕是稍微复杂一点功能的网站的。所以，以上（包括CI）都是专业工具（proffesional toolkit）。
WordPress/PrestaShop
对于特定用途的网页，其实还有更简单的制作方法。比如WordPress之于个人博客，再比如PrestaShop之于独立电商平台。我将这些工具称为模板化创作工具。
模板化创作工具其实已经可以被看作是一个应用软件（Application）了，用户可以完全不用接触底层代码（代码并不一定被封装起来或者被编译过），而直接用“所见即所得”的方式来完成创作过程。
比如WordPress，将下载包解压上传到网站空间，访问域名就可以开始设置，首先选择“语言”，然后配置数据库信息（4个参数），最后设置站点基本信息（5个参数），这个个人博客就可以直接使用了。对于业余者来说，顶多再到主题库去挑选一个自己喜欢的外观主题模板，让自己的博客显得与众不同。
PrestaShop甚至不需要用户自己拥有网站空间，其在线版本与WordPress的设置过程类似：填入最基本最必须的信息，点击确认，就可以使用了。
当然，博客的精髓在于文章，电商平台的精髓在于商品，这两项都不是模板能够提供给用户的，需要用户自己去创作（写作/添加商品信息）。
模板化创作可以被集成为一项服务，从而进一步减少用户在内容创作之外的劳动，同时产生规模效应。WordPress再进一步集成就成了新浪博客，PrestaShop再进一步集成就是淘宝或者微店，这都是大众非常熟悉的产品。
从创意生产的角度看网页制作的变化
网页刚诞生的时候，其实是程序员的禁脔，普通人很难掌握，甚至都接触不到。浏览器的出现第一次让普通人能够接触到网页（虽然还不能做，但至少可以看和用）。然后，在浏览器+HTML这个最根本的框架下，网页的功能性和视觉性被层出不穷的新技术和新工具所强化和扩展。
在较早的时期，虽然“业余创作”这一需求还未出现，“专业创作”同样需要更好更新的工具来完成工作，这种环境对业余创作者是不利的，因为他们只能选择专业工具来完成其创作，故而不得不付出与职业者同等的代价才能进行其创作，同时他们又不太能像职业者一样从其创作中获得回报（物质上的回报几乎为0，精神上的回报也仅只是自我满足感而已），甚至还要被迫与职业者同台竞争。等到“业余创作”的需求出现并普及以后，创作工具才逐渐出现分化，业余创作工具被独立出来，其要求和特征逐渐同专业创作工具区分开，这才是有利于业余创作者的环境。
对于网页制作来说，HTML和Browser是基础，PHP、MYSQL、JS甚至包括CI在内都是专业工具，只有WordPress和PrstaShop属于业余工具。CI在专业工具中似乎可以起到承前启后的作用，它能够引导初学者逐渐学习PHP的基本规范，但无需掌握所有的PHP语法、函数及技巧。
网友评论