关于电影

这是一部由音乐开启的爱尔兰电影。　卖花女（Marketa Irglova）被街头艺人（Glen Hansard饰）的音乐所吸引，开始了一段荡气回肠的浪漫故事。他们不是王子和公主，各自有着琐碎的生活，但是他们有个共同点，那就是对音乐的热爱。在一次合奏中，他们找到了彼此间惊人的默契。这个发现让他们兴奋，很快他们找到了另外的一个同伴，组成了一个乐队，并通过优秀的表现得到了专业人士的肯定。与此同时，爱情也在逐渐萌芽。音乐是这部电影最大的亮点之一，塑造了极其浪漫唯美的氛围。（from 豆瓣）

关于音乐

近期关于音乐为主题的浪漫爱情剧颇受欢迎，继Hugh Grant与Haley Bennett情人节热档的电影Music and Lyrics广受好评后(无论是电影还是原声都有不错的成绩)，同类型爱情喜剧Once也将延续这一模式悄然登场。这部由爱尔兰Brit老将——前The Frames乐队的灵魂Glen Hansard同捷克年轻才女——钢琴家和唱作人Marketa Irglova共同谱写的爱情赞歌同样是以音乐为主线来诠释浪漫爱情与音乐之间“传统”般的千丝万缕的联系。而电影的原声大部分来自Glen Hansard的06年专辑The Swell Season，这张也是同Marketa Irglova合作的、Hansard离开The Frames后个人的处女专辑，专辑中所有钢琴及合声都由Marketa Irglova一手包办，而这些应该被看成是Once这部电影的一部分计划。不管怎么说，以音乐为主线来贯穿电影的结构是一件相当讨巧的事情，毕竟不用费心去选择那些难缠的主题音乐，听听音乐谈谈情还有什么比这更浪漫的……（from VeryCD）

曲目

1. Falling Slowly
2. If You Want Me
3. Broken Hearted Hoover Fixer Sucker Guy
4. When Your Minds Made Up
5. Lies
6. Gold
7. The Hill
8. Fallen from the Sky
9. Leave
10. Trying to Pull Myself Away
11. All the Way Down
12. Once
13. Say It to Me Now

下载 Once 电影原声

参赛作品，欢迎围观~~~（得奖的是第一个）

http://my.baidu.com/?skin=1644
http://my.baidu.com/?skin=1650
http://my.baidu.com/?skin=1673
http://my.baidu.com/?skin=1676

http://my.baidu.com/?skin=1682

几乎所有的富 Web 应用都基于一个或多个 Web UI 库或框架，这些 UI 库与框架极大地简化了开发进程，并带来一致，可靠，以及高度交互性的用户界面。本文介绍了 15 个非常强大的 JavaScript Web UI 库，非常适合各种各种规模的富 Web 应用的开发。

LivePipe
LivePipe UI 基于 Prototype Javascript 框架，包含了一整套经严格 测试并高度可扩展的 UI 控件，拥有很好的文档，在不支持 JavaScript 的环境中，可以无缝降级使用。包括 Tab, 窗体，文本框，多选框，评分控件，进度条，滚动条，右键菜单等多种控件。

LivePipe 首页与下载
LivePipe 演示与示例

UKI

UKI 是一套简单的 JavaScript UI 工具集，用于快速创建桌面风格的 Web 应用。包含的控件从滑动条，到分栏视图，不一而足。熟悉 jQuery 的开发者会发现这个工具很容易上手，非常简洁，无需安装框架，不依赖 CSS 引用。

UKI 主页与下载
UKI 控件，演示，示例

MochaUI

MochaUI 是 MooTools Javascript 框架 与 ExplorerCanvas 的一个备受欢迎的扩展，可以用来快速创建 Web 应用，Web 桌面，网站，饰件，独立 Windows，Modal 对话框等等。

MochaUI 主页与下载
MochaUI 控件，演示，示例

中文编译来源：锐商企业CMS 网站内容管理系统 官方网站

Sigma Ajax UI Builder

SigmaVisual 是一套基于 Web 的，所见即所得的 AJAX UI 创建工具，包含超过40个不见，如 Tab，对话框，树形图，时间线等，基于 JavaScript 和 PHP。

Sigma Ajax UI Builder 主页和下载
Sigma Ajax UI Builder 控件，演示和示例

JxLib based MooTools

JxLib 是一个基于 MooTools 的 JavaScript UI 框架，包含多数 Web 程序都需要的基本空间，如按钮，Tab，菜单，树形结构，对话框等等。JxLib 还支持换肤功能。

JxLib 主页与下载
JxLib 控件，演示与示例

Dijit – The Dojo Toolkit

Dijit 基于 Dojo，也是学习 Dojo 扩展的一个好起点。可以用来创建非常漂亮的 Web 2.0 GUI。支持多语种，甚至支持不同语种的文字书写方向以及本地化数字，日期等等。

Dijit 主页，下载
Dijit 控件，演示，示例

jQuery TOOLS

jQuery Tools 是一个非常轻量（2.5kb）的常用 UI 库，支持以下 jQuery 对象，Tabs, 工具提示，滚动条，层，表单以及 Flash 嵌套。

jQuery TOOLS 主页与下载
jQuery TOOLS 控件，演示，示例

jQuery UI

jQuery UI 基于 jQuery，包含 3 个大类，饰件，一些内置的 UI 对象；效果，对各种网页对象施加动画效果（如爆炸效果）；鼠标交互，如拖放操作。

jQuery UI 首页与下载
jQuery UI 控件，演示与示例

Prototype UI

Prototype UI 基于 Prototype 与 Script.aculo.us，包括多个模块（旋转木马，Modal 窗口，阴影，右键菜单等），每个模块可以单独安装使用。

Prototype UI 主页与下载
Prototype UI 控件，演示与示例

Jitsu

Jitsu 功能包括 XML 标记，页面编译，动画引擎，Ajax 以及运行时检测等等，它的 Ajax 功能使消费级 Web 应用的创建变得非常简单，支持客户端数据绑定，还可以将页面编译成 JavaScript，Jitsu 在 Firefox 和 IE 中运行最佳。

Jitsu 主页与下载
Jitsu 控件，演示与示例

Qutensil

Qutensil 仍在开发中，但其路线图已经显示出某些引人注目的东西，基于 Prototype 与 Scriptaculous ，包含消息，调色板，滑动条，工具提示，可拖放窗口以及警告，确认，提示等窗口。

Qutensil 主页，下载
Qutensil 控件，演示，示例

Script.aculo.us

script.aculo.us 是一个备受欢迎的 UI 工具集，基于 Prototype 框架，提供了 诸如视觉效果，UI 控件以及面向 DOM 的工具。

Script.aculo.us 首页与下载

Alloy UI

AlloyUI 是一套功能丰富的 UI 框架，基于 YUI 3，部分基于 YUI 2，包含一套丰富的（超过60）UI 部件，如图片库，对话框，树形结构，面板，自动完成，按钮，日历控件，工具条等。

Alloy UI 首页和下载
Alloy UI 控件，演示与示例

iUI: iPhone UI 框架

IUI 包含一套 JavaScript 库，CSS 式样表及图片，是一个轻量级 iPhone UI 库，包含 iPhone 风格导航菜单，设备方向，iPhone 风格切换等功能，可以为你的 Web 程序带来 iPhone 般的体验。

iUI 主页与下载

XUI

XUI 是一个用于移动 Web 应用的轻量，极简，高度模块化的框架。它之所以非常轻量的原因是，它只支持移动浏览器，所有跨浏览器支持的代码都被剥离。它面向一线移动 Web 浏览器，如 Webkit，Fennec 以及 Opera，并有意将来对移动 IE 和黑莓提供支持。

XUI 首页，下载

Yahoo! YUI Library

Yahoo! YUI Library 可谓所有 Web UI 之父，可靠，功能丰富，目前已经发展到第 3 版。它拥有一个很庞大的开发团队，推出了非常丰富的功能，就功能而言，无可匹敌。

YUI Library 主页与下载
YUI2 入门
YUI3 入门
YUI3 控件，演示与示例

龙葵，俗名“天天儿”，我们这叫“黑葡萄”。常见于农村的地头田间。详情请 参考维基百科 。

强硬的把CSS和HTML塞到PHP里面可以防止代码太枯燥(DRY)并最终导致代码臃 肿，因为的CSS和HTML需要比PHP更细致的对象结构。事实上，PHP的模板不是天生合适的，因为每个模板包含了许多不同的HTML，以及以不同的方 式相结合的CSS对象。

然后，我并没有解释它，或者给出适当的语境。抱歉！

正确的粒度是减小CSS的关键之一

在PHP层，下面的会话流(来自 Facebook)或许是一个单个对象。所有的检测哪些HTML要显示或者隐藏的逻辑都包含在一个对象结构中。

一 个Facebook会话流

通常，开发人员尝试使这个CSS的匹配中端(介于前端和后端？)逻辑。我们期望用于这个会话流的所有的 CSS代码都包含在一个由ID包裹的沙盒内，比如#story。这将终结臃肿而枯燥的代码。为什么呢？因为CSS层的适当的结构更加细化(粒度更小)。其 实，试图在PHP层中给予CSS结构就像是试图使用数据库架构来配置Apache一样。这是行不通的。

会话流有很多更小(更细致）的对象组成

因此，我们可以看到，上面的会话流是由许多更 小的对象组成的。当我们让对象更细化（颗粒更小），我们就会开始看到同样的模式反复出现，然后同样的对象变得更可重用。我们开始看到在互联网上的大多数网 站都是由相同的基本重复的模式以不同的方式结合起来的。作为一个附带好处，CSS会变得体积更小，更简单。

这个会话流，一个PHP对象，是 由几个HTML和CSS的对象组成的：

1个标题

5个媒体块

2个链接样式

1个评论列表

1个动作列表

1个段落

这种方法的好处？

使CSS对象的粒度合适意味 着我们的CSS（嗯，推而广之，我们的HTML）变得更简单、更轻。我们的小小的可重用的对象可以在整个网站上用来创建新的和不同的页面，而不用再增加 css的大小。

作为一个起点，我建议您创建下列对象：标题、列表、文字处理和链接、容器、媒体、网格和模板。在做整个页面之前，先创建你的 所有最小的对象，然后你的CSS将自然的保持很小。

你和用户之间的网站堆栈（简化 版）

在TXJS大会的最后一天，一个开发者问我：

面向对象的CSS没有给你留下一大堆基于表现的 class名?

网络堆栈中的每一层 都有它自己的结构。你不会期望将数据库架构用于构建PHP中间件，人们对于HTML和CSS的期望是一样一样的。HTML需要用一种能代表数据或内容的有 意义的东西来书写，也就是我所谓的代码语义。HTML中的代码语义对于可移植性和易用性都是极为重要的。另一方面，CSS在堆栈中确实是一个独立的层，它 需要能反映页面的视觉语义的属于自己的体系结构。

视觉语义描述在页面设计中的全部重复模式。他们描绘了你的网站的基本组成部分。事实上，他 们往往只需要少许的修改就能轻松的实现跨站点应用。视觉语义，不一定要捆绑到HTML语义，因为你需要一个符合每一层堆栈的具体需求的架构。

从 样式中剥离模板结构

同样，许多PHP开发人员想要匹配CSS和HTML架构到PHP。或许尝试将你最熟悉的某一层抽象应用到他们你会觉得 更具挑战？对这一点儿我感到很惭愧。在我在Facebook的时候，我希望PHP层能匹配CSS层。还好Facebook有一些聪明的开发者勒住了并帮我 增进了理解。

强硬的把CSS和HTML塞到PHP里面可以防止代码太枯燥(DRY)并最终导致代码臃肿，因为的CSS和HTML需要比 PHP更细致的对象结构。事实上，PHP的模板不是天生合适的，因为每个模板包含了许多不同的HTML，以及以不同的方式相结合的CSS对象。

视 觉语义！=基于表现的类

需要注意的重要的是，我不是建议类似“giantBlueHeading”的类名。类名需要表现你要定义的对象结 构，而不是特定的视觉类的名。例如，我经常选择好记的比较抽象的类名，如“media”很容易记住。media块由一个固定宽度的图片或flash和一些 文字或其他内容组合。

media块可用于许多不同的情况，例如，组合一个图标 和一个链接或个人资料图片和用户名。具体用例是从对象结构中分离出来的。HTML可以被看作是CSS对象的实例。

该media 块的代码 ，和许多其他基本的对象都可以在OOCSS开源项目中找到 。

PS: 如果你对OOCSS不太熟悉，可以阅读一下OOCSS的FAQ，以及99CSS对该FAQ的中文翻译

理解 CSS 盒子模型
如果你想实现不需要很多奇巧淫技的跨浏览器兼容的 CSS 代码，透彻地理解 CSS 盒子模型是首要事情，CSS 盒子模型并不难，且基本支持所有浏览器，除了某些特定条件下的 IE 浏览器。
CSS 盒子模型负责处理以下事情:

• 一个 blcok （区块）级对象占据多大的空间
• 该对象的边界，留白
• 盒子的尺寸
• 盒子与页面其它元素的相对位置
  CSS 盒子模型有以下准则:
• Block （区块）对象都是矩形 （事实上所有对象都如此）
• 其尺寸由 width, height, padding, borders, 以及 margins 决定
• 如果不设置高度，该盒子的高度将自动适应其包含的内容，加上留白等（除非使用了 float）
• 如果不设置宽度，一个非 float 型盒子水平上将充满其父容器（扣除父容器的留白）
  处理 block 级对象时，必须注意以下事项:
• 如果一个盒子的宽度设置为 100%，它就不能再设置 margins, padding, 和 borders，否则会撑破其父容器
• 垂直毗邻的 margin 会引起复杂的坍塌问题，导致布局问题（比如两个垂直毗邻的 Block 对象，上面的对象的 bottom-margin 为 40，下面的对象的 top-margin 为 20，则两个对象的间距将是 40，而不是 60 – 译者）
• 拥有相对位置和绝对位置的对象，拥有不同的行为
  
  在 Firefox 的 Firebug 中显示的盒子模型
  
  理解 block 级和 inline 级 对象的区别
  这个看似简单的问题事如果能透彻地理解，会受益匪浅。
  下图讲解了 block 级对象和 inline 级对象的区别:
  
  下面是 block 级对象和 inline 级对象的基本区别:
• Block 级对象会自然地水平充满其父容器，因此没有必要为之设置 100% 宽度属性
• Block 级对象的起始摆放位置是其父容器的左上边界，并顺排在其前面的兄弟 Block 对象的下方（除非设置 float 或绝对位置）
• Inline 级对象会忽略其宽度和高度设置
• Inline 级对象会随着文字排版，并受排版属性的影响（如 white-space, font-size, letter-spacing）
• Inline 级对象可以使用 vertical-align 属性控制其垂直对齐，block 级对象不可以
• Inline 级对象的下方会保留一些自然的空间，以适应字母 g 一类的会向下探出的笔画
• 一个设置为 float 的 inline 对象将变成 block 对象理解 Floating 和 Clearing 属性
  实现多栏排版的最好方法是使用 float 属性，float 也是一个将使你受益匪浅的属性。一个 float 对象可以居左或居右，一个设置为 float 的对象，将根据设置的方向，左移或右移到其父容器的边界，或其前面的 float 对象的边界，而紧随其后的非 float 对象或内容，则包围在其相反的方向。
  
  以下是使用 float 和 clear 属性的一些重要准则:
• 一个 float 对象，将从其置身的 block 级非 float 内容流中跳出，换句话说，如果你要将一个 box 向左边 float，它后面的 block 级非 float 对象会显示到下方，inline 级内容会在旁边包围
• 要让一段内容从一侧包围一个 float 对象，这段内容必须要么是 inline 级的，要么也设置为相同方向的 float
• 一个 float 对象，如果没有设置宽度，则会自动缩成其包含的内容的宽度，因此最好为 float 对象明确设置宽度
• 如果一个 block 对象包含 float 子对象，会出现本文中阐述的问题。
• 一个设置了 clear 属性的对象，将不会包围其前面的 float 对象
• 一个既设置了 clear 又设置了 float 属性的对象，只有 clear:left 属性生效，clear:right 不起作用首先使用 IE 进行测试
  虽然我们都痛恨 IE6 和 IE7，但当你开始一个新项目的时候，最好还是首先针对这两种浏览器进行测试，否则，如果你在设计在后期才想起针对 IE6 和 IE7 进行测试，将出现以下问题：
• 你将不得不使用一些奇巧淫技，甚至使用独立的 IE6/7 CSS，导致 CSS 文件臃肿。
• 某些地方的布局将不得不重新设计
• 会增加测试的时间
• 你的布局在 IE/6/7 中和其它浏览器中不一样
  如果你设计的是个人项目，Web 程序等，则不建议你针对旧版本 IE 做太多工作，而对一些公司类站点，它的用户群中有大量 IE 用户，这些技巧会让你避免大量的头痛。如果将 IE 的问题归类为 IE 的 BUG 而不去处理，会带来很多负面的影响，和 IE 和平共处是 Web 开发与设计者不可逃避的现实。
  译者注：在 IE6/7 仍有大量用户基础的国内（感谢中行，建行，农行，工行，以及各级政府网站），忽视这两种浏览器是极不明智的，首先针对 IE6/7 进行设计是一种很好的方法，一般来说，在IE6/7 通过测试的站点，在 Firefox，Chrome，Safari，Opera 等标准浏览器面前基本不会出现问题，前提是，你的 CSS 设计是基于 W3C 标准的。
  IE 浏览器最常见的问题
• IE6 中不可滥用 float，否则会带来内容消失以及文字重复等稀奇古怪的问题
• IE6 中，float 对象，在 float 方向的那边，会出现双倍 margin，将 display 设置为 inline 会解决这个问题
• IE6/7 中，一个没有直接或间接设置 hasLayout 的对象，会发生各种稀奇古怪的问题 （译者注：对这类问题，zoom 这个 css 属性可以帮很大的忙，将 zoom 设置为除了 normal 之外的其它值，可以迫使一个对象 hasLayout 同时不影响这个对象的任何视觉外观）
• IE6 不支持 min-width, max-width, min-height, max-height 一类的属性
• IE6 不支持固定位置背景图
• IE6/7 不支持很多 display 属性值（如 inline-table, table-cell, table-row）
• IE6 中，只有 a 这个对象才可以使用 :hover 这个伪类
• IE 的某些版本对某些 CSS 选择器支持很少（如属性选择器，子对象选择器）
• IE6~8 对 CSS3 的支持很有限 (不过有一些变通方法) 永远不要指望在所有浏览器中都一模一样
  在不同浏览器实现相同的体验个功能是可能的，实现近似像素级的一致外观也是可能的，但永远不要指望一模一样。
  Form 控件在不同浏览器显示总是不同
  以下是 Facebook 首页中的 select 控件，在5种不同浏览器的显示差异（基于 Adobe’s Browserlab 截图）
  
  某些 Form 控件，如果要求必须跨浏览器一致，可以找到变通办法，如，可以使用图片 替代 submit 按钮，但有一些控件，比如 radio，select， textarea，文件选择框，是永远都不可能一模一样的。
  字体的表现都有差异
  先不谈有的字体在有的系统中根本不存在，即时存在，它们在不同系统的渲染效果也不完全一样，比如，Windows ClearType 支持 IE7，但不支持 IE6，导致同一个字体在 IE7 和 IE6 有不同的样子。
  
  A List Apart’s 文章字体在 IE6 and IE7 中的区别
  
  使用 CSS 清零
  使用 CSS 清零（CSS Reset）是实现跨浏览器兼容的灵丹妙药，CSS 清零可以消除不同浏览器对 margin，padding 这些属性的默认表现，你可以更容易控制诸如对齐，间隙等等问题。推荐使用 Eric Meyer’s CSS 清零代码。
  
  
  参考 SitePoint’s CSS 兼容表
  SitePoint CSS Reference 是一个非常好的资源（下载离线版），可以用来检查某些 CSS 属性的跨浏览器兼容问题
  
  
  结语
  跨浏览器兼容是个永恒的话题，本文介绍的跨浏览器兼容 CSS 准则只是帮助 Web 开发设计者尽可能实现这一目标，除了这些，基于 CSS3 的渐进式增强设计也是一种趋势，Web 开发与设计者可以针对某些浏览器提供增强功能，而在不支持这些增强功能的浏览器中降级使用基本功能。
  延伸阅读
• 跨浏览器测试资源大全
• 跨浏览器兼容测试8大利器
• 关于跨浏览器测试那点事
  本文国际来源：Smashing Magazine The Principles Of Cross-Browser CSS Coding
  原文作者：Louis Lazaris

  

  Louis Lazaris 是一位自由职业 Web 开发者，住在多伦多，他创办了 Impressive Webs, 以及 Interviews by Design，后者主要是一些著名 Web 设计师访谈，他的 Twitter 地址是 http://twitter.com/ImpressiveWebs。

你也许曾经想过要学习如何开发软件—或只是想临时的写出一个脚本— 但不知道如何入手。 幸运的是，现在的互联网上到处都有丰富的学习资源让你能在短时间里成为一个程序员。

因为互联网的出现，使程序员们可 以通过它讨论软件开发技术，发布学习指导，以及共享代码实例让其他人可以在线学习。 如果你感兴趣如何才能成为一个程序员，从网上这些大量的优秀的培训资料、学习向导入手将会是个不错的开始。

首要之首：不要急于选择一种语言

新手们有一个常见的错误就是犹豫于判断哪种编程语言是 做好的、最该先学的。 我们有很多的选择，但你不能说那种语言“最好”。 我们应该理解：说到底，什么语言并不重要。 重要的是理解数据结构、控制逻辑和设计模式。 任何一种语言—甚至一种简单的脚本语言—都会具有所有编程语言都共有的各种特征，也就是说各种语言是贯通的。 我正在攻读我的计算机学学位，我编程使用Pascal，汇编，和C语言，事实上我从来没有把它当成职业以求获得回报。 我一直在自学编程，工作上用不到它，我使用现有的知识，参考各种文档和书本，学习它们的用法。 因此，不要急于选择何种编程语言。 找出你想要开发的东西，使用一种能够完成这项任务的语言，这就可以了。

根据各种开发平台的不同，有很多不同的软件开发形式可供你选择：从 网站应用到桌面软件到智能手机软件到命令行脚本工具。 这篇文章里，我将重点介绍一些很受欢迎的入门教程和资源，它们能帮助你学会如何在各种主流的平台上编程开发。 我先假设你是一个悟性很强的读者，但对于新手，当我谈论程序代码时还是要按照入门级的水平。 因为即使是你自己看一篇编程入门手册，如果发现都能理解时，心情自然会很高兴，这样利于你进一步学习。

桌面脚本

想要动手在Windows里或苹果 系统里编程，最简单的方法是从一种脚本语言或宏语言开始，例如AutoHotkey (Windows) 或 Automator (苹果系统)。 如今一些硬件程序员冲着他们的屏幕大喊大叫，说AHK和AppleScript并不是“真正”的编程语言。 也许他们说的是对的—技术上，这些种类的语言只能做一些上层的编程。 但是对于那些只是想来脱盲、想在他们的电脑里实现一些能自动运行的程序的新手来说，这些语言会是一个绝妙的入门入口—而且你会吃惊于它们丰富的功能。

例如，大家都喜爱的Texter就 是Adam使用AutoHotkey开发的能独立运行的Windows应用程序，所以说这种脚本语言远不是只能开发小规模脚本软件。 如果你想从AutoHotkey入手，可以参考Adam的指导： how to turn any action into a keyboard shortcut using AutoHotkey（然后，你可以 下载 Texter源代码 看看这个功能齐全的使用AHK开发的Windows应用程序的内部结构)。

Web开发

除了把自己约束在特定的编程语言和特定的操作系统上，你还可以在浏览器里开发你的杀 手锏程序，让它在互联网上运行，这就是webapp。 欢迎来到奇妙的web编程世界。

HTML 和 CSS： 开发网站，你第一件要知道的事情就是HTML(网页就是由它组成的)和CSS(一种让外观更好看的样式标记)。 HTML 和 CSS 并不是编程语言—它们只是页面的结构和样式信息。 然而，在开始开发web应用程序之前你必须要学会如何手工的编写简单的HTML和CSS，web页面是任何webapp的前端显示部分。 这个 HTML 指导 是你入手的好地方。

JavaScript:当你可以通过HTML和CSS构建一个静态页面后，事情就开始变得有趣了—因为到了该 学JavaScript的时候了。 JavaScript是一种web浏览器上的编程语言，它的魔力就是能在页面里制造一些动态效果。 JavaScript可以做bookmarklets, Greasemonkey 脚本, 和 Ajax, 所以它是web上各种好东西的关于因素。 学习 JavaScript从这里开。

服务器端脚本：一 旦你学会了网页里的知识，你就要开始对它添加一些动态服务器操作—为了实现这些，你需要把目光转移到服务器端脚本语言，例如PHP, Python, Perl, 或 Ruby。 举个例子，如果想要制作一个网页形式的联系方式表单，根据用户的输入发送邮件，你就需要使用服务器端脚本来实现。 像PHP这样的脚本语言可以让你跟web服务器上的数据库进行沟通，所以如果你想搭建一个用户可以登录注册的网站，这样的语言正是你需要的。 Webmonkey 是一个优秀的web开发资源网站，里面有大量的各种web编程语言的指导手册。 阅读一下他们的 PHP 初学者指南。 当你感觉差不多了的时候，看看WebMonkey’s PHP and MySQL tutorial 学习如何使用PHP跟数据库交互。 网上最好的要数PHP语言官方的在线文档和函数参考了。 每个知识点上 (例如strlen function这个)都在后面列出来用户的评论注释，这些对于文档的本身是非常有价值的。 （我很喜欢PHP，但还有很多其他种服务器端的脚本语言你们都可以选择。)

Web框架：过去数年里，web开发人员在开发动态网站的过程中不得不 一遍又一遍的针对重复遇到的问题写出重复的代码。 为了避免这种每次开发一些新网站都会重复劳动一次的问题，一些程序员动手搭建了一些框架，让框架替我们完成重复性的工作。 非常流行的 Ruby on Rails 框架，作为一个例子，它利用Ruby编程语言，为我们提供了一个专门面向web的架构，普通的web应用程序都能使用它来完成。 事实上，Adam使用Rails开发了他的第一个正式的（而且是叹为观止的！）web应用程序，MixTape.me。这就是 他 的如何在没有任何经验的情况下搭建一个网站。还有一些其他的web开发框架包括 CakePHP (针对 PHP 编程者), Django (针对 Python 编程中), 以及 jQuery (针对 JavaScript).

Web APIs: API (应用层序编程接口) 是指不同的软件之间相互交换的程序途径。 例如，如果你想在你的网站上放一个动态的地图，你可以使用Google Map，而不需要开发自己的地图。 The Google Maps API 可以轻松的让你通过JavaScript在程序中引入一个地图到你的页面上。 几乎所有的现代的你所知道的和喜爱的web服务都提供了API，通过这些API你可以获取到他们的数据和小工具，在你的应用程序里就可以使用这些交互过来 的东西了，例如Twitter, Facebook, Google Docs, Google Maps, 这个列表远不止这些。 通过API把其他web应用集成到你的web应用里是现在富web开发的前沿地带。 每个优秀的主流的web服务API都附带有完整的文档和一些快速入手的指导(例如，这个就是 Twitter的)。 疯狂吧。

命令行脚本

如果你想开发一个程序，让它读取 文字或文件、输入输出一些有用的东西，那么，命令行脚本语言将是个不错的选择。 然而它并不像web应用程序和桌面应用程序那样有吸引力和好看的外观，但是作为快速开发的脚本语言，你却不能忽视它们。

很多的在 linux平台上运行的web脚本同样能以命令行模式运行，例如Perl，Python和PHP，所以如果你学会了使用它们，你将能在两种环境中使用它 们。 我的学习道路一直没离开Peal太远，我自学Python使用的是这本优秀的在线免费书Dive into Python。

如果成为一个Unix高手也是你学习的目标，那么你绝对要 精通bash这个脚本语言。 Bash是Unix和Linux环境下的一种命令行脚本语言，它能够为你做所以的事情：从自动备份数据库脚本到功能齐全的用户交互程序。 起初我没有任何使用bash脚本的经验，但最终我用bash开发了一个全功能的个人代办任务管理器： Todo.txt CLI。

插件（Add-ons）

如今的web应用程序和浏览器都可以通过一些扩展软件来丰 富自己的功能。 由于一些现有的软件，例如Firefox、WordPress越来越受到开发人员的关注，插件的开发也日益流行，人们都在说“But if only it could do THIS…”

只要你掌握了HTML，JavaScript和CSS，你就可以在任何的浏览器里 开发你想要的很多东西。 Bookmarklets, Greasemonkey user scripts, 和 Stylish user styles这些软件都是用的更普通页面一样的语言写成的, 这几个东西都值得你去研究一些。

更高级的浏览器扩展程序，例如 Firefox的扩展，它们可以帮助你很多。 开发Firefox的扩展，举个例子，需要你精通JavaScript和XML（一种标记语言，类似HTML，但具有更严格的格式）。 早在2007年我就写下来 how to build a Firefox extension, 这是我在笨手笨脚的研究网上的一些学习资料后获得的成果。

很多 免费的、受欢迎的web应用程序都提供了扩展框架，例如WordPress 和 MediaWiki。 这些应用程序都是用PHP写成的，所以只有对PHP熟悉你才能做这些事情。 这个就是 如何编写WordPress插件。 而想驾驭Google Wave前沿技术的开发人员可以从使用HTML, JavaScript, Java, 和 Python 写小组件和小工具开始。 我写的第一个Wave bot是跟着这个 一 个下午时间的快速入门指导开始的。

开 发桌面上的Web应用程序

学习编程最好的结果是你在一个环境下学的东西可以应用到另外的环境中。 先学习开发web应用程序的好处就是我们有一些方法可以让web应用程序直接在桌面上运行。 例如， Adobe AIR 是一个跨平台的即时运行平台，它能让你编写的程序运行在任何装有AIR的操作系统的桌面上。 AIR应用程序都是由HTML, Flash, 或 Flex 写成的，所以它能让你的web程序在桌面环境中运行。 AIR是开发部署桌面应用程序的一个优秀的选择，就像我们提到过的 10 个让你值得去安装AIR的应用程序。

移 动应用开发

能在iPhone或者Android智能手机上运行的手机应用程序的开发如今正呈现井喷之势，所以你也可以梦想一下如何在 iTunes应用商店里通过你的天才程序大赚一笔。 但是，作为一个编码新手，直接奔向移动开发所经历的学习曲线可能会很陡，因为它需要你熟悉高级的编程语言，例如Java和Objective C。 然而，你当然应该看看iPhone 和 Android 编程究竟是什么样子的。 阅读这个 简 单的iPhone应用开发例子 可以初步认识一下iPhone程序的开发过程。 Android 程序都是由Java写成的，这有一个 简单的视频教程教你如何开发第一个”Hello Android“程序（注：可能需要代理才能看这个视频）。

耐心，刻苦，尝试，失败

好的程序员都有一个不达目的誓不罢休的品质，他们会惊喜于通过长期推敲 和失败换来的一点成绩。 学会编程会有很好的回报的，但是学习的过程可能会是饱受挫折和孤独的。 如果有可能，最好找个伴一起陪你做这件事。 想精通编程，这和其他事情一样，需要坚持，反复尝试，获得更多的经验。

这篇文章里的内容就是对那些想通过自我研究达到学会编程目的的新手 们的一些重要建议。 编程老手们：我有什么遗漏吗？ 不论你的水平如何，请留下你的想法。

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

说明：

• *对大多数符合标准的浏览器应用第一个声明块，目的是创建一个隐形的内容为空的块来为目标元素清除浮动。
• *第二条为clearfix应用 inline-table 显示属性，仅仅针对IE/Mac。*利用 * / 对 IE/Mac 隐藏一些规则：
• * height:1% 用来触发 IE6 下的haslayout。
• *重新对 IE/Mac 外的IE应用 block 显示属性。
• *最后一行用于结束针对 IE/Mac 的hack。

由于此方法针对的浏览器或成为历史（尤其是Mac下的IE5 ），或正在靠近标准的路上，这个方法就不再那么与时俱进了。

抛掉对 IE/Mac 的支持之后，新的清除浮动方法：

/* new clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

说明：

IE6 和 IE7 都不支持 :after 这个伪类，因此需要后面两条来触发IE6/7的haslayout，以清除浮动。幸运的是IE8支持 :after 伪类。因此只需要针对IE6/7的hack了。

这里有一个演示页面：Demo（By Andy Ford）

摘自：前端观察