category: Web Design

现代Web页面开发流程 通常来说，Web页面开发的流程大致是这样的：设计师（设计师不是美工，就像程序员不是码农一样）提供设计稿，通常是图片格式。然后前端的开发人员（在ThoughtWorks我们称之为UI Dev）来手工的将图片转换为对应的HTML+CSS，往往还需要在各个浏览器中调试等。 大多数时候，设计师会提供色卡，或者至少前景色/背景色/高亮色的值给开发人员。如果没有的话，开发人员会用到一些工具如colorpicker, ruler之类来确保最终的效果和设计稿是一致的。 如果你观察过UI Dev的工作流程的话，你会发现基本的上是这样的：使用编辑器（或者IDE）编写HTML代码，CSS代码，保存修改内容，切换到浏览器窗口，按F5或者Ctrl-R刷新，然后对比设计稿和实现，如果发现不一致的地方，再切换到编辑器中修改代码，如是往复。 避免手工劳动 纯手工的方式来编辑HTML/CSS会非常耗时，特别是作为标记语言的HTML，开发者需要时刻关注关闭已经打开的标签。比如一个标题元素，你需要： <h1>This is the page title</h1> 几乎从一开始，人们就想到了各种办法来避免自己重复的键入，比如Vim的SuperTab以及Snipmate插件，可以通过输入标签名+Tab来补全所有的标签等，又或者DreamWaver提供的代码生成的方式来简化这一流程。 Sublime的编辑器上的著名插件Emmet可以帮助开发人员飞速的开发HTML/CSS，这里有一个小例子。假设我们需要实现的页面是这样的： 那么对应的HTML结构可能会是： <ul> <li> <div class="feature"> <span class="number"></span> <i></i> <h4></h4> <p></p> </div> </li> ... </ul> 使用Emmet，则只需要给出表达式，然后按一下Tab键就可以补全为上述的结构了： ul>li*3>.feature>span.number+i+h4+p 上边的这条命令可以读作：“创建一个UL，该UL下有3个LI，每个LI下有一个class为feature的DIV（不指定元素名称的话，默认生成div），每个DIV内，有一个类为.number的SPAN，一个i元素，一个H4元素和一个P元素” 完整的技巧可以参看官方文档。 避免重复劳动 上边提到的频繁的F5刷新，可以通过LiveReload+Guard两个工具的组合来解决。LiveReload是一个浏览器的插件，通过协议与后台的服务器进行通信。当后台文件发生变化时，LiveReload会自动刷新页面。 Guard会使用操作系统的API来感知本地文件的变化，当文件变化后，它可以通知LiveReload进行刷新，当然Guard可以做其他一些事情，比如等SCSS发生变化时，自动编译CSS等。 两者结合之后，就可以节省我们大量的时间，而把精力主要投放在开发这件事情本身上。 样板工程 我在Github上公开了一个样板工程，这是一个开箱即用的工程，其中提供了这样一些配置： SCSS的编译环境（使用compass） Guard配置（当你的SCSS文件或者HTML文件修改之后，自动通知LiveReload来刷新浏览器） 一个标准的HTML5样板文档 一个基本的style.scss Guardfile的配置中，如果index.html发生变化，或者stylesheets中的css文件发生变化，或者scripts目录中的js文件发生变化，都会触发livereload任务（通知浏览器）。 guard 'livereload' do watch('index.html') watch(%r{stylesheets/.+\.(css)}) watch(%r{scripts/.+\.(js)}) end guard :compass 你只需要简单的将这个工程克隆到本地： $ git clone git@github.com:abruzzi/design-boilerplate.git mydesign 然后在该目录中执行bundle install即可： $ cd mydesign $ bundle install 这里有两点假设：...

Github的主页服务 Github提供了Github Pages的服务来帮助你为自己的项目提供主页。目前，这种主页服务分为两种：用户主页和项目主页。其中用户主页已经称为广大开发者的标配，有很多的开发者已经将自己的博客迁移到了Github上，其中所用到的核心机制就是Github Pages。 这篇文章主要介绍如何使用项目主页。项目主页，顾名思义，就是你项目的主页，本来设计的初衷是为你的项目编写介绍文档，不过Github只提供对静态内容的托管。如果需要添加评论，可以使用disqus的服务，而和微博，flickr等集成都有现成的JavaScript片段，这里也不做详细讨论。 你现在正在看的我的博客正是托管在Github上，不过我对域名进行了自定义而已，如何做到这一点可以查看此处的文档。 我之前发布的一个我去过的地方就使用了项目主页的服务，该项目的地址在此，最终的页面在这里。 Web设计样板工程 我在Github上创建了一个设计样板工程，你可以使用这个工程快速的搭建一个完整的样板工程，其中包含了： 一个基本的HTML5的文档 SCSS环境 Guard环境，可以与LiveReload集成 具体的操作可以参看文档。 发布你的Web设计 Github提供的项目主页服务可以帮助你快速将设计发布，你所需要做的就是为项目创建一个名叫gh-pages的分支，然后将HTML/CSS/JS放在这个分支上即可。 假设你在github上的用户名为wumai(一时间想不到好名字，看看窗外，就叫雾霾吧)，那么根据惯例，你的Github地址为https://github.com/wumai。这时候，假设你的项目（repo）的名称为design-1，则你的项目主页地址为https://wumai.github.io/design-1。 知道了你的项目主页地址，你就需要为这个页面添加内容了： $ git clone git@github.com:abruzzi/design-boilerplate.git design-1 克隆了design-boilerplate之后， $ cd design-1 $ git remote -v 你可以看到当前的项目是和git@github.com:abruzzi/design-boilerplate.git关联的， origin git@github.com:abruzzi/design-boilerplate.git (fetch) origin git@github.com:abruzzi/design-boilerplate.git (push) 你需要先和这个样板工程解除绑定： $ git remote remove origin 然后你需要在Github上创建一个新的Repo，假设命名为design-1，这时候，将这个新创建的Repo作为你本地的remote： $ git remote add -u origin git@github.com:wumai/design-1.git 与远程连接之后，我们可以开始实际的设计了，不过在这之前，需要先创建一个gh-pages分支： $ git checkout -b gh-pages 这条命令会创建gh-pages分支，并切换到该分支，这样后续的修改都会在该分支进行，这也正是我们想要的。开发调试之后，就可以将这个分支push到Github： $ git push -u origin gh-pages 好了，现在打开地址http://wumai.github.io/design-1，应该就可以看到你自己的设计了。