1.下载最新的Firefox火狐浏览器

http://download.firefox.com.cn/releases/webins3.0/official/zh-CN/Firefox-latest.exe

个人比较喜欢Firefox火狐浏览器国际版

http://www.mozilla.org/en-US/firefox/all.html

2.打开火狐浏览器，在地址栏粘贴访问如下地址，完成插件的安装

http://l2306helper.github.com/12306helper/12306helper-0.1.xpi

3.登录www.12306.cn点击购票，勾选自动登录

我当时是自动登陆了32次左右进去了，浏览器右下角会有提示的

4.刷票（自动刷票的，有票是会有音乐提示，就可以付款了o(∩_∩)o ~）

5.付款

建议用火狐浏览器手机支付会快很多（我用的是招行手机支付）；当然也可以换IE浏览器支付，不要太慢哦~

火狐浏览器手机支付功能就不需要切换IE浏览器，手机访问验证短信中的地址，进行相关操作就可以（手机联网哦），还是那句话，可以换IE浏览器但是会麻烦些。

最后，祝购票成功，一路顺风，平平安安~

－－－－－－－－－－－－－－－－－－原文PPT－－－－－－－－－－－－－－－－－－－－

源：http://sofish.de/1864

• ★ HTML5 Rocks : Major Feature Groups  的学习 HTML5 的资源 (HTML5 演示, 教程 ). 源码
• 很不错的 HTML5 Dashboard – Mozilla，效果很炫。
• WhatWG Developers, 一个清楚的 HTML5 技术规格说明书。
• ★ StackOverflow : 大名鼎鼎的技术问答式论坛。
• ★ Addyosmani, jQuery 和 JavaScript 文章教程
• Sohtanaka, jQuery 和 JavaScript 文章和教程
• ★ Nettuts+ 是一个面对Web开发人员和设计人员的网站，提供各种技术教程和文章，覆盖 HTML, CSS, Javascript, CMS’s, PHP 和 Ruby on Rails.
• Codrops, 教程和 web 资源
• WebAppers, 最好的开源资源
• Tutorialzine – PHP MySQL jQuery CSS 教程, 资源和赠品
• Mozilla JavaScript guide
• codes snippets, 作者自己收集的一些代码片段

服务器端的软件

• ★ Node.js 是服务器端的 JavaScript 环境，其使用了异步事件驱动模式。其让Node.js在很多互联网应用体系结构下获得非常不错的性能。 源码 和 实时演示。
• PhantomJS 也是一个服务器端的 JavaScript API的WebKit。其支持各种Web标准： DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG
• Lighttpd 一个轻量级的开源Web服务器。新闻，文档，benchmarks, bugs, 和 download. Lighttpd 支撑了几个非常著名的 Web 2.0 网站，如：YouTube, wikipedia 和 meebo.
• NGinx, 性能巨高无比的轻量级的Web服务器。比Apache高多了。花了6年的时间，终于走到了1.0版。
• Apache HTTP Server 是一个很流行的并支持多个流行的操作系统的Web服务器。
• ★ PHP 可能是最流行的服务器端的Web脚本动态处理语言。
• 当然，还有 Ruby, Python, Erlang, Perl, Java, .NET, Android, C++, Go, Fantom,CoffeeScript, D, …

PHP 框架和工具

• ★ WordPress 是一个基于博客系统的开源软件。参看《WordPress是怎么赢的？》
• Drupal 是一个内容管理系统 (CMS).
• Centurion 是一个新出现的开源 CMS ，一个灵然的 PHP5 Content Management Framework. 使用 Zend Framework, 其组件坚持通用，简单，清楚和可重用的设计原则。
• phpBB 一个开源的论坛（国内的Discuz！更多）
• ★ SimplePie : 超快的，易用的,  RSS  和 Atom feed PHP解析。
• ★ PHPthumb, PHP 图片处理库
• ★ PHPMailer 强大的全功能的PHP邮件库
• PubSubHubbub协议，一个简单，开放， server-to-server 的 pubsub (publish/subscribe) 协议——Atom and RSS的扩展。
• 更多的请参看 – 20个你应该知道PHP库 和 9个强大免费的PHP库

数据库

• ★ Apache CouchDB 是一个面向文档的数据库管理系统。它提供以JSON 作为数据格式的REST 接口来对其进行操作，并可以通过视图来操纵文档的组织和呈现。.源码.
• MonoQL 是一个采用PHP+ExtJS开发的MySQL数据库管理工具。界面极像一个桌面应用程序，支持大部分常用的功能包括：表格设计，数据浏览/编辑，数据导入/导出和高级查询等。
• MariaDB 是MySQL的一个分支，由MySQL 创始人Monty Widenius 所开发。GPL，用来对抗Oracle所有的MySQL的license的不测。自Oracle收购SUN以来，整个社区对于MySQL前途的担忧就没有停止过。
• ★ SQLite 不像常见的客户端/服务器结构范例，SQLite引擎不是个程序与之通信的独立进程，而是连接到程序中成为它的一个主要部分。所以主要的通信协议是在编程 语言内的直接API调用。这在消耗总量、延迟时间和整体简单性上有积极的作用。整个数据库（定义、表、索引和数据本身）都在宿主主机上存储在一个单一的文 件中。它的简单的设计是通过在开始一个事务的时候锁定整个数据文件而完成的。库实现了多数的SQL-92标准，包括事务，就是代表原子性、一致性、隔离性 和持久性的（ACID），触发器和多数的复杂查询。不进行类型检查。你可以把字符串插入到整数列中。某些用户发现这是使数据库更加有用的创新，特别是与无 类型的脚本语言一起使用的时候。其他用户认为这是主要的缺点。
• SQL 在线设计编辑器，这一节的那个图片就是这个在线编辑器的样子了。一个画数据库图表的在线工具。很强大。

API 和 在线数据

• ProgrammableWeb, 最流行的Web Services 和 API 目录大全。
• Google Data Protocol 一组Google服务的数据服务API。
• Yahoo! Developer Network – APIs 和 Tools
• Yahoo! Pipes 可视化在线编程工具，它是一个用于过滤、转换和聚合网页内容的服务。
• ★ The Yahoo! Query Language 一个很像 SQL的网页查询工具。

在线代码和媒体编辑器

• ★ CodeRun Studio一个基于JavaScript语言开发的跨平台的集成开发环境，它立足于云计算的设计思路，方便开发者在浏览器端便可以轻松开发、调试和部署网络应用程序。（参看《Coderun.com 在线开发IDE》）
• Cloud9 IDE – 一个基于Node.JS构建的JavaScript程序开发Web IDE。它拥有一个非常快的文本编辑器支持为JS, HTML, CSS和这几种的混合代码进行着色显示。
• ★ jsFiddle – Javascript的在线运行展示框架，这个工具可以有效的帮助web前端开发人员来有效分享和演示前端效果，其简单而强大 (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)
• Akshell，一种云服务，它使用服务端的JavaScript和在线的IDE帮助开发者进行快速应用程序开发。 它还提供云托管，所以部署是即时的。
• JSONeditor, 一个好用的JSON 编辑器
• ★ TinyMCE 一个轻量级的基于浏览器的所见即所得编辑器，支持目前流行的各种浏览器，由JavaScript写成。
• Ext Designer 是一个桌面应用工具，帮助你快速开发基于ExtJS 的用户界面。
• ★  LucidChart，一款基于最新的html5技术的在线图表绘制软件，功能强大，速度快捷，运行此软件需要支持html5的浏览器。
• Balsamiq Mockups, 产品设计师绘制线框图或产品原型界面的利器。
• Color Scheme Designer 3 - 一个免费的线上调色工具
• ★ Pixlr, 是一个来自瑞典基于Flash的免费在线图片处理网站。除了操作介面和功能接近Photoshop，还是多语言版本，支持简体中文。（以前酷壳介绍过）
• Aviary, 是一个基于HTML5 的在线图片处理工具，可以很容易的对图片进行后期处理。 Aviary API
• Favicon Generator, 线上favicon(16×16)制作工具。

代码资源和版本控制

• ★ GitHub 是一个用于使用Git版本控制系统的项目的基于互联网的存取服务。
• Git 是一个由Linus为了更好地管理linux内核开发而创立的分布式版本控制／软件配置管理软件。其巨快无比，高效，采用了分布式版本库的方式，不必服务器端软件支持，使源代码的发布和交流极其方便。
• Google Code 谷歌公司官方的开发者网站，包含各种开发技术的API、开发工具、以及开发技术参考资料。
• Google Libraries API Google 将优秀的 JavaScript 框架部署在其 CDN 上，在我们的网站上使用 Google Libraries API 可以加速 JavaScript 框架的加载速度。
• Snipplr 一个开放的源代码技巧分享社区，号称Code 2.0。和一般的源码分享网站不同，它针对的并不是大型网站源码，而是一些编程的代码技巧。

JavaScript 桌面应用框架

• ★ jQuery 是一个快速、简单的JavaScript library， 它简化了HTML 文件的traversing，事件处理、动画、Ajax 互动，从而方便了网页制作的快速发展。  源码, API, API浏览, 很不错的文档.
• ★ 官方的 jQuery User Interface (UI) library (演示和文档). 源码,Themes Roller, Download.
• YUI 2 — Yahoo! User Interface Library
• Mootools, 一个超级轻量级的 web2.0 JavaScript framework
• Prototype 提供面向对象的Javascript和AJAX
• Dojo The Dojo Toolkit，一个强大的无法被打败的面向对象JavaScript框架。主要由三大模块组成：Core、Dijit、DojoX。Core提供 Ajax,events,packaging,CSS-based querying,animations,JSON等相关操作API。Dijit是一个可更换皮肤，基于模板的WEB UI控件库。DojoX包括一些创新/新颖的代码和控件：DateGrid，charts，离线应用，跨浏览器矢量绘图等。
• ★ Ext JS 4, 业内最强大的 JavaScript framework。
• PHP.js, 一个开源的JavaScript 库，它尝试在JavaScript 中实现PHP 函数。在你的项目中导入PHP.JS 库，可以在静态页面使用你喜欢的PHP 函数。

JavaScript 移动和触摸框架

• ★ jQuery Mobile : 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。我们将尽全力去满 足这样的需求。 Sources.
• Zepto.js Zepto.js 是支持移动WebKit浏览器的JavaScript框架，具有与jQuery兼容的语法。2-5k的库，通过不错的API处理绝大多数的基本工作。 Sources.
• MicroJS : Microjs网站应用列出了很多轻量的Javascript类库和框架，它们都很小，大部分小于5kb。这样你不需要因为只需要一个功能就要加载一个JS的框架。
• ★ PhoneGap :是一款开源的手机应用开发平台，它仅仅只用HTML和JavaScript语言就可以制作出能在多个移动设备上运行的应用。 Sources.
• ★ Sencha Touch Sencha Touch 是一个支持多种智能手机平台（iPhone, Android, 和BlackBerry）的 HTML5 框架。Sencha Touch可以让你的Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的 WEB标准，全面兼容Android和Apple iOS设备。
• JQtouch, 是一个jQuery 的插件，主要用于手机上的Webkit 浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的JavaScript 库。 Sources.
• DHTMLX Touch 针对移动和触摸设备的JavaScript 框架。DHTMLX Touch基于HTML5，创建移动web应用。它不只是一组UI 小工具，而是一个完整的框架，可以针对移动和触摸设备创建跨平台的web应用。它兼容主流的web浏览器，用DHTMLX Touch创建的应用，可以在iPad、iPhone、Android智能手机等上面运行流畅。

jQuery 插件

• Waypoints 是一个jQuery 用来实现捕获各种滚动事件的插件，例如实现无翻页的内容浏览，或者固定某个元素不让滚动等等。支持主流浏览器版本。
• Lazy loader 插件可以实现图片的延迟加载，当网页比较长的时候，会先只加载用户视窗内的图片，视窗外的图片会等到你拖动滚动条至后面才加载，这样有效的避免了因图片过多而加载慢的弊端。
• TweenJS : 一个简单和强大的 tweening / animation 的Javascript库。
• Easings 类Css3的jQuery 动画插件
• Spritely 这个插件可以创建出如flash一样的动画效果，比如：在页面上有一只飞动的小鸟，一个动态滚动的背景等。
• File Upload, jQuery 文件上传插件4.4.1
• Slideshow/Carousel 插件. Sources.
• Supersized – 全屏式的背景/幻灯片插件
• Masonry i一款非常酷的自动排版插件，这款jQuery工具可以根据网格来自动排列水平和垂直元素，超越原来的css. Sources.
• jQuery 简单 Layout 演示，管理各种边栏式，可改变大小式的布局。
• Flexigrid – jQuery  数据表插件
• Isotope绝对是一个令人难以置信的jQuery插件，你可以用它来创建动态和智能布局。你可以隐藏和显示与过滤项目，重新排序和整理甚至更多。
• Super Gestures jQuery 插件可以实现鼠标手势的功能。
• MouseWheel 是由Brandon Aaron开发的jQuery插件，用于添加跨浏览器的鼠标滚轮支持。
• AutoSuggest jQuery 插件可以让你添加一些自动完成的功能。
• qTip 一个漂亮的jQuery 的工具提示插件，这个插件功能相当强大。
• jQuery Charts and graphic 用来制作图表。
• jQuery Tools– The missing UI library

其它 jQuery 资源

• http://www.smashingmagazine.com/2011/04/07/useful-javascript-and-jquery-tools-libraries-plugins
• http://webdesigneraid.com/weekly-html5-news-and-inspirations-%E2%80%93-tutorials-tools-resources-and-freebies-v-2/
• http://www.designer-daily.com/15-useful-jquery-plugins-and-tutorials-5207
• http://www.julien-verkest.fr/22/11/2007/240-plugins-jquery
• http://www.hotscripts.com/blog/10-great-html5-experiments-apps/
• http://www.noupe.com/jquery/excellent-jquery-navigation-menu-tutorials.html
• http://www.noupe.com/php/20-useful-php-jquery-tutorials.html
• http://aext.net/2010/04/excellent-jquery-plugins-resources-for-data-presentation-and-grid-layout/
• http://webdesigneraid.com/html5-canvas-graphing-solutions-every-web-developers-must-know/
• http://gestureworks.com/features/open-source-gestures/
• http://edtechdev.wordpress.com/2011/01/14/some-exciting-new-html5javascript-projects/
• http://net.tutsplus.com/articles/web-roundups/30-developers-you-must-subscribe-to-as-a-javascript-junkie/

HTML5 视频播放器

• ★ Popcorn.js 是一个HTML5 Video框架，它提供了易于使用的API来同步交互式内容，让操作HTML5 Video元素的属性，方法和事件变得简单易用。 (来自Mozilla)
• LeanBack Player HTML5视频播放器,没有依赖任何JavaScript框架。支持全屏播放，音量控制，在同一个页面中播放多个视频。 (来自Google)
• Vid.ly 为你上传的视频提供转换功能，并且为转换后的视频创建一个短网址。通过Vid.ly，让你的视频可以在14种不同的浏览器和设备上播放，不需要再去考虑将 要浏览视频的人使用什么设备了，以避免各各软件巨头之间的利益之争带来了不兼容，给用户带来了巨大的困扰，短网址让你可以通过Twitter、 Facebook等方式方便分享视频。Vid.ly还可以通过html代码嵌入到其他网页中。Vid.ly免费帐户空间为1GB，免费帐户也没有播放或浏 览限制。

JavaScript 音频处理与可视化效果

• ★ 使用HTML5 和 Flash, SoundManager V2 只用单一API的提供了可靠，简单和强大的跨平台的音频处理。
• DSP, JavaScript的声音Digital Signal Processing
• The Radiolab Hyper Audio Player v1, 带给你 WNYC Radiolab, SoundCloud 和 Mozilla Drumbeat
• jPlayer, 一个 jQuery HTML5 音频/ 视频库，功能齐全的API

JavaScript 图形 和 3D

• ★ Processing.js是一个开放的编程语言，在不使用Flash或Java小程序的前提下, 可以实现程序图像、动画和互动的应用。其使用Web标准，无需任何插件。
• ★ Javascript 3D 引擎: ThreeJS 由 Mr Doob 开发，一个轻量级的 3D 引擎，不需要了解细节，傻瓜都能使用。这个引擎可以使用<canvas>, <svg> 和 WebGL.
• Shader Toy, 一款使用WebGL的在线着色器编辑器(2D/3D). 基于在线的应用架构使您无需下载任何软件即可开始体验. Shader Toy包含大量实用着色器, 诸如光线追踪, 场景距离渲染, 球体, 隧道, 变形, 后期处理特效等.
• PhiloGL, Sencha的PhiloGL是首个WebGL开发工具之一，提供了高水准的功能，来构建WebGL应用。Sencha创建了几个演示，来描述框架交互式3D虚拟化的能力，比如3D view of global temperature changes。
• WebGL Inspector 你就Firebug等Web调试工具一样，这个是 WebGL的调试工具。
• WebGL frameworks 由 Khronos Group 收集的一个WebGL框架列表。
• EaselJS, 一个使用html5的canvas的 JavaScript 库. Sources.
• JavaScript Game Frameworks 免费的JS游戏框架列表。另，可参看 JS游戏框架列表。
• Raphaël是一个小型的JavaScript 库，用来简化在页面上显示向量图的工作。你可以用它在页面上绘制各种图表、并进行图片的剪切、旋转等操作。参看Javascript向量图Lib–Raphaël
• jQuery SVG 插件让你可以了 SVG canvas 进行交互。
• Google chart tools –  参看本站的使用Google API做统计图
• Arbor.js, 是一个利用webworkers和jQuery创建的数据图形可视化JavaScript框架。它为图形组织和屏幕刷新处理提供了一个高效、力导向布局算法。

JavaScript 浏览器接口 (HTML5)

• ★ Modernizr – 是一个专为HTML5 和CSS3 开发的功能检测类库，可以根据浏览器对HTML5 和CSS3 的支持程度提供更加便捷的前端优化方案.Sources. 一个有用的列表 cross-browser Polyfills
• HTML5Shiv : 该项目的目的是为了让IE 能识别HTML5 的元素。
• Polyfills : 这个项目收集了一些代码片段其用Javascript支持不同的浏览器的特别功能，有些代码需要Flash。
• YepNopeJS : 一个异步的条件式的加载器。Sources.
• jQuery CSS3 Finalise : 是否厌倦了为每一个浏览器的CSS3属性加前缀？
• ★ Amplify.js :一套用于web应用数据管理和应用程序通讯的 jQuery 组件库。 提供简单易用的API接口。Amplify的目标是通过为各种数据源提供一个统一的程序接口简化各种格式数据的数据处理。Amplify的存储组件使用 localStorage 和 sessionStorage标准处理客户端的存储信息，对一些老的浏览器支持可能有问题。Amplify’为jQuery的ajax方法request 增加了一些额外的特性。 Sources.
• History.js 优美地支持了HTML5 History/State APIs
• Socket.IO Web的socket编程。

JavaScript 工具

• ★  {{mustaches}} 小型的 JavaScript 模板引擎。
• json:select(), CSS式的JSON选择器
• HeadJS, 异步JavaScript装载。其最大特点就是不仅可以按顺序执行还可以并发装载载js。
• JsDoc Toolkit是一款辅助工具，你只需要根据约定在JavaScript 代码中添加相应的注释，它就可以根据这些注释来自动生成API文档。
• Responsive image, 一个试验性的项目，用来处理responsive layouts 式的图片。
• UglifyJS是基于NodeJS的Javascript语法解析/压缩/格式化工具，它支持任何CommonJS模块系统的Javascript平台。
• Dhteumeuleu, 交互式的 DOM 脚本和DHTML 的开源演示。
• Backbone是 一个前端 JS 代码 MVC 框架，被著名的 37signals 用来构建他们的移动客户端。它不可取代 Jquery，不可取代现有的Template 库。而是和这些结合起来构建复杂的 web 前端交互应用。如果项目涉及大量的 javascript 代码，实现很多复杂的前端交互功能，首先你会想到把数据和展示分离。使用 Jquery 的 selector 和 callback 可以轻松做到这点。但是对于富客户端的WEB应用大量代码的结构化组织非常必要。Backbone 就提供了 javascript 代码的组织的功能。Backbone 主要包括 models, collections, views 和 events, controller 。

客户端和模拟器

• BrowserShot, 检查浏览器的兼容性，跨浏览器平器的测试
• Test everything… 输入一个你想要测试的URL……
• Android browser 模拟器
• iPhone browser 模拟器
• Opera browser 模拟器
• ★ Firebug 与 Firefox 集成，可以查看和调试你的Web页面。

CSS3 和 字库

• ★ CSS3 Maker CCS3的生成器
• 容易地创建 CSS3 animations。 Sencha Animator 是一个桌面应用可以为WebKit浏览器和触摸式移动设备创建 CSS3 animations 。
• CSSwarp – CSS 文本扭曲生成器
• Gradient Editor, 一个强大的Photoshop式的CSS 渐变编译器。来自 ColorZilla
• ★ Google Web Fonts 通过Google Web Fonts API 可以浏览所有的字体
• @font-face Kit Generator, 为Web转换字体
• Typetester, 比较字体。
• Media Queries. 一组 responsive web 设计。
• Pattern TAP, UI组件。

Website (FULL) 模板

• ★ HTML5 Boilerplate 是一个HTML5 / CSS / js模板，是实现跨浏览器正常化、性能优化，稳定的可选功能如跨域Ajax和Flash的最佳实践。 项目的开发商称之为技巧集合，目的是满足您开发一个跨浏览器，并且面向未来的网站的需求。 Sources.
• HTML5 starter pack 是一个干净的和有组织的目录结构，其可适合很多项目，还有一些很常用的文件，以及简单的Photoshop设计模板。
• ★ Initializr 是一个HTML5 模板生成器，其可以帮你在15秒内创建一个HTML5的项目。
• Animated Portfolio Gallery （教程）
• Slick MobileApp Website 如果通过 jQuery 和 CSS 制作一个手机应用的网站。
• RSS Reader 如果通过 jQuery Mobile 创建一个RSS Reader
• ★ Single Page Applications 使用jQuery的朋友们 (Backbone, Underscore, …)创建单一页面。
• Google TV Optimized Templates, 传统电视已经开始和网路融合，但现阶段产业仍然正在摸索之中，为此将来的网页亦会有结构上的改变。Google TV Optimized Templates是 一个用HTML/JavaScript制成的开源软体，一如其名是一个对Google TV作出了最佳化的的网页范本，其特色是以遥控器作为操作的前提，令使用者无需输入任何文字就可以进行控制。未来除了会有专用遥控器外，还会采用智能手机 透过W-iFi控制Google TV的方法。Optimized Templates的界面中左方会展示分类，右方会显示该分类下的影片截图，影片播放、切换、全画面表示都可透过键盘上的方向键、Backspace或 Enter等键完成，方便今后的网站开发人员借镜。HTML5 版的模板使用了 Google TV UI library, jQuery  和 Closure 。

译：开源中最好的Web开发的资源

原：Best “must know” open sources to build the new Web

资源分享：32个很棒的免费下载PSD资源的网站，通过PSD文件可以了解到作者的创作意图及方式，学习和提升技能并将其应用到平常的工作当中。

下面所列出的PSD资源免费下载网站都很漂亮，它们提供免费的PSD文件资源下载：

1. 365psd

365psd.com is one of the best free PSD files provider on the web, I think. They share highest quality and pixel-perfect PSD files.

2. Free PSD Files

Another professional and clean looking website sharing PSD files. Really worth checking.

3. Design Instruct

Design Instruct mostly known for sharing creative tutorials, but they let you download all the tutorial files, that means you can download final result shown in the tutorial.

4. psdGraphics

psdGraphics shares very nice PSD files, templates and even tutorials. Very clean and elegant website design helps you to find everything very fast.

5. Official PSDs

A lot of PSD files available for free download. You have to register to download their files.

6. Photoshop Files

Photoshop Files is a PSD files community, where you can download files after registering or upload your own work.

7. Download PSD

Showcase style website sharing PSD files, very creative use of Photoshop environment used in this website design.

8. FreePSD

FreePSD is another great source for downloading free PSDs. If you want premium quality they also have something to offer.

9. Tutorial9

Elite tutorial blog in design community. They provide wonderful and original tutorials and the best part – they share PSDs.

10. deviantART

deviantART has definitely the biggest PSD files collection on the web. All the files are created by DA community members.

11. GraphicsFuel

Design blog shares a lot unique and unusual but useful PSD files, check this out.

12. Ps Galaxy

Another one PSD graphics showcase style website with voting system. Sharing PSDs, gradients, custom shapes, Photoshop actions and much more.

13. Six Revisions

Check Tutorials category on Six Revisions and you’ll see how much quality tutorials they have, the best part is – they let you download source files.

14. PSD Vibe

Clean and modern style tutorials with free PSDs available.

15. Abduzeedo

Abduzeedo mostly known for inspirational posts but they also provide high quality tutorials and of course free PSDs.

16. DeviseFunction

Professional web designer blog where he shares his knowledge in tutorials. You can download tutorial files for free.

17. PSDhome

PSDhome collects psd files, that’s designers give from everywhere to a single website. PSDhome gives everyday free psd files, which are buttons, icons, text effects, themes, graphics and many more.

18. FreebiesPress

Minimalist style design freebies blog. Perfect place for downloading fonts, icons, brushes and of course PSDs.

19. PSD Collector

A lot of useful resources and free PSDs at design and development blog called PSD Collector.

20. FreePSDTheme

FreePSDTheme is a collection of themes designed by Dany Duchaine and some other web designers from Themeforest. Dany now gives away high-quality top of the line premium themes for free to spread his talent, time, and inspiration.

21. web3mantra

Very nice PSD files collection created by web3mantra team.

22. Net-Kit.com

Net-kit provides free PSD files, mostly web related graphics.

23. FZWP

FZWP – very strange name, old and not attractive design but they have big library of PSD files, your decision to visit this or not.

24. Aaron Ovadia

All PSDs are free to be used in personal projects or commercial projects. Created by Aaron Ovadia.

25. ForDesigner.com

PSD files collection by ForDesigner.com team. Free PSDs covering full illustrations and single objects.

26. Free4Photoshop

Another “redesign needed” PSDs archive. Free PSDs from Free4Photoshop.

27. FrooWeb

FrooWeb.com provides free PSDs such as web templates, video player skin psd, buttons and much more.

28. Dezignus

Elegant design and attractive freebies – PSDs. Dezignus offers wide range PSD files for free.

29. Artfans Design

Clean website design with clean and professional free PSD files.

30. Smashing Magazine

Definitely one of the best source for designers, they also provide free PSDs, just check this out.

31. Free PSD Files

Simple and “straight to the point” PSD files gallery.

32. Dezinerfolio

A lot of great design resources like vectors, icons, themes and free PSDs.

资源类型的文章整理起来还真耗费精力，这里要感谢原作者的收集整理，短句英文就不译了。国庆七天回来不知道大家调整的怎样。我是做了30多个小时的火车，移动生活~

第一名：Matt Cutts，计有47801个订阅者。来自Google公司内部，大名鼎鼎的Matt Cutts，在SEO届可谓无人不知，无人不晓。MattCutts在Google担任高级工程师已经9年了，是Google Webspam小组的老大，在SEO届他讲出来的话是最有权威的，许多Google最新的资讯，都是通过他的博客透露出来的。

第二名：SEOmoz，搜索引擎MOZ，提供专业的网络营销和搜索引擎优化服务。截止今天，计有35492个订阅者。Rank Fishkin的这个SEO博客经常透露一些非常值得分享的SEO机密。

第三名：Search Engine Land，搜索引擎大地。计有33762个订阅者。Danny Sullivan和Vanessa Fox是SearchEngineLand.com的两位编辑员。这两个名字在SEO界是公认的。这个博客提供了各个主流搜索引擎的最新新闻，是每个专业SEO必读的。他们还组织搜索引擎会议，SMX（Search Marketing Expo）在世界大部分都有场所。

第四名：Search Engine Watch，计有28568个订阅者。这个叫搜索引擎观察的SEO博客，是最大的搜索引擎组织。

第五名：Search Engine Journal，搜索引擎杂志。计有18006个订阅者。

第六名：Search Engine Roundtable，搜索引擎圆桌会议。计有17163个订阅者。

第七名：Online Marketing Blog，在线营销博客。计有15794个订阅者。

第八名：Search Engine Guide，搜索引擎指南。计有12463个订阅者。

第九名：Marketing Pilgrim，营销皮尔格林。一位网络营销专家Andy Beal的个人博客，更新速度非常快，文章观点得不错。计有13433个订阅者。

第十名：Pronet Advertising，Pronet广告。计有8896个订阅者。

第十一名：Graywolf’s SEO Blog，Graywolf的搜索引擎优化博客。这个SEO Blog是唯一一些能得到Matt Cutts评论的SEO博客，他给许多国外着名的站点做过优化。计有8585个订阅者。

第十二名：Get Elastic，获得弹性。电子商务博客。计有6937个订阅者。

第十三名：HubSpot，计有7016个订阅者。

第十四名：Yoast，计有5361个订阅者。

第十五名：BlogStorm，博客风暴。一个英国人写的关于搜索引擎优化和在线营销的SEO博客。计有4188个订阅者。

第十六名：redfly，计有3875个订阅者。

第十七名：Small Business SEM，针对小企业的搜索引擎营销。计有3659个订阅者。

第十八名：Web Analytics World，WEB分析世界。计有3244个订阅者。

第十九名：Sugarrae，计有3205个订阅者。

第二十名：SEO Pedia，搜索引擎优化Pedia。计有2337个订阅者。

第二十一名：Net Business Blog，计有2256个订阅者。

第二十二名：PPC Hero，计有2413个订阅者。

第二十三名：Conversation Marketing，计有2255个订阅者。

第二十四名：SEO Scoop，独家搜索引擎优化。计有2953个订阅者。

第二十五名：SEO 2.0，计有个1640订阅者。

第二十六名：StepForth SEO News Blog，计有1371个订阅者。

第二十七名：Hobo，计有1258个订阅者。

第二十八名：Cre8pc Blog，计有879个订阅者。

第二十九名：aimClear Blog，计有个879订阅者。

第三十名：SEOBook、WeBuildPages等SEO知名博客，未知订阅者

源地址：不详

HTML5和CSS3已经开始彻底变革全世界的Web前端开发和Web设计发展格局，因为他们给这个领域带来了太多太多令人惊奇的新特性！我用大量时间学习了HTML5和CSS3技术，它们的动画、圆角等特效会令你震惊…在后面的内容中将向大家推荐一些能帮助你更好的掌握甚至精通HTML5和CSS3的终极工具资源集合。虽然还有很多特性不被浏览器所支持，但我们作为前端开发从业者，有必要掌握它们。希望这些HTML5和CSS3工具资源能对大家的学习和工作有所帮助。

HTML5 & CSS3 准备就绪

该网站通过扇形图表的形式展现了从08年到10年以来各大浏览器对HTML5和CSS3的支持情况。发展势头还是很可观的。

HTML5安全手册

CSS3按钮生成器

所见即所得的为你生成CSS3按钮，你仅需通过基本的鼠标点击便可生成令人满意的CSS3按钮，点击生成好的按钮即可查看相应的CSS3代码。

When can I use…（HTML5 & CSS3 浏览器兼容性）

很详细的关于HTML5, CSS3, SVG等技术的浏览器兼容性列表。

CSS3颜色值/名称速查手册

CSS3颜色值查询手册，包括颜色英文名、16进制值、rgb百分比、rgb整数值、颜色缩写和颜色效果等…

CSS3生成器

在线测试CSS3新特性，即时生成效果。

Modernizr

当前浏览器对HTML5支持情况测试

该工具可以帮助你测试当前你使用的浏览器对HTML5的兼容情况，很详细，很有用！

CSS 边框半径(代码生成器)

通过输入数值即可生成CSS3代码的CSS 边框代码生成器。使用很简便。

FindMeByIP（HTML5 & CSS3 浏览器兼容性手册）

很详细的HTML5和CSS3浏览器兼容性手册。

CSS3渐变生成器

CSS3 Watch

前端开发工具&资源小集合

CSS3, please!(实时体验CSS3代码)

font dragr

CSS3生成器

CSS桌面

CSS桌面可以让你在线练习CSS3代码，并实时将渲染效果呈现在右侧，很棒的CSS3在线练习工具。

HTML5修订版本跟踪器

font-face 生成器

CSS3 选择器测试工具

IE 打印保险器

详细CSS 浏览器支持情况列表

源地址：http://blog.bingo929.com/html5-and-css3-tools-list.html

LaunchList
站点发布前的工作清单，预设了28个需要检查的事项，也可以自定义。同类工具： Ultimate Website Launch Checklist 以及 The Ultimate Website Prelaunch Checklist。

Pencil Project: Sketching and Prototyping with Firefox
一个开源 GUI 原型设计工具。

Zootool
一个非常漂亮的书签工具，可以将你收集的各种素材，图片，文档，链接，视频等在线组织到一起。

Bounce （推荐）
输入一个站点地址，该程序会给该站点截图，然后，你可以在上面批注，加评论，并和朋友分享。非常适合用来和您的客户在线就某个站点的设计进行讨论。

Ninite Batch Installer
这个站点可以将很多免费的流行软件（最好的版本）打包在一起，一次性安装到你的机器，支持 Windows7，Vista 和 XP。

Support Details （强烈推荐）
假如你想让你的用户提供他/她所使用的浏览器环境，比如 Flash 版本，操作系统，屏幕分辨率，Cookie，JavaScript 状态等，可以让他/她访问一下这个站点，这个站点或自动将这些内容探测出来，并允许用户现场通过邮件将报告发送给你。

MugTug’s Darkroom
一个在线图片处理程序，可以调整对比度，白平衡，曝光，饱和度等，可以从 Picasa 及 Flickr 上传图片，同类产品：Pixlr 及 Sumo Paint。

Visual Website Optimizer （强烈推荐）
Visual Website Optimizer 绝对是你所能见到的最好的 A/B 测试工具。

Keyonary
这个简单的在线工具可以帮你列出 Mac OS X， Photoshop 等工具的快捷键清单。

gridr buildrrr
一个在线网格设计工具，选择你希望使用的网格布局，帮你预览并生成 CSS 代码。

Instant Blueprint – Create a web project framework in seconds.
帮你瞬间生成一个 Web 项目框架，基于合法 HTML/XHTML 和 CSS。

Hummingbird
一个实时的（真正的实时，每秒刷新20次）站点流量分析工具，基于 Node.js.

jsFiddle
在线 Web 编辑器，支持 JavaScript, MooTools, jQuery, Prototype, YUI, Glow, Dojo, HTML 以及 CSS。

String: create a multi-language website or app
帮你创建多语种 Web 应用的资源文件，

Titanpad
可以多人同时编辑同一个文档，别的改动会实时以不同颜色标识，可以是同一个办公室的多个用户，也可以是地球另一边的多个用户。

Pixelnovel Timeline: Version Control for Adobe Photoshop
该工具通过插件方式集成 Subversion 客户端，可以在 Photoshop 中实现版本控制。非免费工具。

0to255
给出一种颜色，会帮你列出这种颜色由浅入深的各种颜色变化，并特别针对 Web 做了优化。

Load Impact: Website load/stress test
一个在线压力测试工具，模拟多用户同时访问你的站点，并出具报告以分析你的站点可以支撑的访问者数量。

Ideone: Online IDE & Debugging Tool
一个在线 IDE 和调试工具，支持多达40种语言，包括 C++, Java, JavaScript, Perl, PHP, Python and Ruby，同类产品：PHP Anywhere 以及 CodeRun 。

Online Dummy Image Generator
快速帮你生成一个在线虚拟图片，以便您进行某些测试。

HiFi RegExp Tool
在线正则表达式工具。

Tableizer （推荐）
将你 Excel 表格中的内容复制粘贴到这个站点，它会帮你生成 HTML 格式的表格（HTML Table）。

FollowUpThen: Easy Email Reminder
-假如你希望有人提醒你什么时候该做什么事，你可以给比如 1day@followupthen.com 一类的地址发个邮件，1day 表示一天后，这样，一天后，你会收到他们的提醒邮件，1day 可以改成人和别的时间间隔。

Divine: Conversion tool from PSD to HTML
这个工具是一个 Photoshop 插件，可以将你的 PSD 转换成 WordPress 主题。（译者：有待验证）

Kaleido
为你的代码创建视觉化标识。来自麻省理工。

Sketchpad
一个强大的在线图像编辑器。难能可贵的是，这是基于 HTML5 的。

Unicode code converter
虽然界面有些乱，但这个工具能把一段文字转换成各种编码形式。

Grid System Generator
另一个网格设计生成器。

ud.com namecheck （强烈推荐）
这个看似简单的工具，可以帮你查询某个名字是否还可以注册域名，商标，已经社会媒体网络入口。

Typograph — Scale & Rhythm
这个工具可以帮你即时预览各种不同的 Web 排版效果，并生成代码。

ColorBrewer Intro – Selecting Good Color Schemes for Maps
适用于地图的配色工具。

CSS Inliner Tool （推荐）
将独立的 CSS 定义转换为 Inline CSS。假如你使用电子邮件进行营销，会发现这种工具非常实用，因为邮件客户端常常会将你独立的 CSS 代码过滤掉，而 Inline CSS 不会被过滤。

HTML Purifier – Filter your HTML the standards-compliant way!
这个使用 PHP 设计的工具，可以对你的 HTML 代码进行过滤，去除其中的恶意代码，并按 W3C 标准对代码进行净化。

Rendera
在线编写 HTML5 和 CSS 代码，现场看到效果。

RegExr
又一个在线学习，体验，测试正则表单式的地方。

try ruby! (in your browser)
Ruby 在线体验。

Google Command Line
使用命令符访问 Google 的一些产品和服务。

Tiny Fluid Grid
又一个网格设计工具，很小巧。

Fonolo.com
这个很别致的站点，可以帮你快速接通那些大公司的免费技术电话，不过目前只能用于美国和加拿大。

Producteev: Creating To-Do Lists with Emails （推荐）
把重要的工作安排发到 task@producteev.com，他们会帮你生成一个任务列表，以便安排你的日程。

AddUse – User research made easy
一个在线用户测试或调查管理工具。

bookwhen （推荐）
帮助你的用户在线预订你的展会，课程等服务，免费版支持150个项目以及每月300个预订。

本文国际来源：Smashing Magazine 50 Powerful Time-Savers For Web Designers （原文作者：Vitaly Friedman）

1. 页面基本结构和命名约定
2. assets 目录组织和文件命名规范
3. TBra 使用说明

Basic Style Platform

1. 样式重置 reset.css
2. 栅格布局 grids.css 栅格使用说明
3. 基本样式 base.css

Taobao Common Styles

1. Box
2. 价格
3. 图片
4. 商品信息块
5. 按钮
6. 面包屑
7. 信息提示
8. 步骤条

Taobao Common Icons

1. 交易类图标
2. 会员等级
3. 杂类图标
4. …

Modules

1. 页头和页尾过渡版本v2简头v2
2. 反馈页面
3. 旺旺点灯
4. 日历
5. 弹出框
6. 卡盘
7. 排行榜
8. 标签云
9. 自动完成
10. 协议
11. 搜索
12. 级联列表
13. 就地编辑
14. …

Misc

1. 2008年Icons年终汇报

原文链接：http://assets.taobaocdn.com/tbra/dpl/

目录建立的原则

• 以最少的层次提供最清晰简便的访问结构
• 基本的文件我们用这些文件夹将其归类划分 [ css ] 、 [ images ] 、[ script ] 、[ fla ]

• 确保整个文件树的简洁有序，命名尽量采用简短英文，尽量避免简写、缩写，一律小写
• html 文档的扩张名均以 .html 结尾
• 每个栏目首页以栏目名命名

例如，积分商城下的首页 shop/shop.html

• 多个同类型文件使用英文字母加数字命名，字母和数字之间用_分隔

例如，news_01.html

开发环境的统一

• 统一文档类型
  • HTML编码类型采用目前主流的 XHTML 1.0 Transitional 格式
  • 尽量采用国际通用的 utf-8 编码格式
• 避免因开发工具的不同所造成的差异
  • 编写前应事先声明开发工具
  • 避免因工具不同Tab键造成的缩进程度不同，统一使用4个空格位的缩进度
  • 避免过分缩进(一些常见的编辑器会对 <html> 标签下的 <body> 进行缩进)

CSS样式文档组织结构

通过合理有效的组织样式文档结构，控制样式文档的优雅降级，使得网站能更好的符合浏览器的解析要求，同时方便日后的维护工作。

基础样式 （base.css）//加载给所有页面最基础的样式

模块样式 （module.css）//同类页面及相似页面的共同样式

页面级样式 （list.css 、member.css 、shop.css 、service.css）

所有独立页面使用自己独有的样式文件，命名以页面功能或所在模块为基准

• 首页 的样式文档组织结构，如下：

//结合首页的特性，仅加载了base.css 和 home.css，文档home.css用来给予首页的独有的样式。

• 产品专区系列&列表页 的样式文档组织结构，如下：

//通过给product&list（产品专区系列&列表页）页面加载list.css样式文档，来提供给此系列独有的样式。

• 会员专区系列 的样式文档组织结构，如下：

//通过给member（会员专区系列）页面加载member.css样式文档，来提供给此系列独有的样式。

• 积分商城系列 的样式文档组织结构，如下：

//通过给shop（积分商城系列）页面加载shop.css样式文档，来提供给此系列独有的样式。。

• 客户服务系列 的样式文档组织结构，如下：

//通过给service（客户服务系列）页面加载service.css样式文档，来提供给此系列独有的样式。

• 以上样式文件均由上至下逐级加载，不可随意调换位置，后期新样式入应在其后置入。

HTML文档的布局规划

• 两栏第一种布局：主内容在左边，侧栏在右边，如下图

//将主内容content放置于左侧，使得用户能很好的聚焦于主内容content区块，这种布局将主内容content放在左边，辅助内容放置在右边以rightbar命名，如：产品专区系列页面 。

• 两栏第二种布局：主内容在右边，侧栏在左边，如下图

//将侧边栏放置于左侧，使得用户能很方便的操作以快速查看适合的信息，这种布局将主内容content放在右边，辅助内容放置在左边以leftbar，如：客户服务系列页面

• 通栏单列布局，如下图

//这种布局在container容器中仅放置了主内容content，减少干扰因素，提供清晰的环境，以便用户更快速的锁定进入下一步操作，如：产品介绍页。

Box盒模型

• 简洁的box，未添加任何前缀

//HTML代码部分

//有上面这段代码可以看出，我们通过更换box-skin-yel（yel在这里代表yellow）可以很方便的控制box的皮肤，注释fillet style所包含的代码部分用来控制圆角标签，如：投保指南页面下的“温馨提示”这个box

• 通过为box添加前缀ms，设置特定的盒子ms-box

//HTML代码部分

//这里的class=”lt”为左部圆角，class=”rt”为右部圆角，底部class=”ms-btm”可以用来添加扩展，如：更多链接。

Css Sprites拼合优化

• 通过Css Sprites有效的减小页面请求次数，如下图

//这里我们列举的是通过Css Sprites技术将多个图标拼合在一张图片上进行优化处理（具体规格为50px的等边网格分布），有效的将原本需要多次http request的页面请求，降为只需加载一次即可完成同类所需的全部加载，以提升网站的性能。

//上图为全站navigation的特效图片优化，同样的还有button的优化，优化的源文件保存在（../ Css Sprites拼合源文件）文件夹下。

Css语句缩写

• 颜色

color:#333333;    缩写为  color:#333

• 盒子（常用的四种写法）

property:value1;   //表示所有边都是一个值value1

property:value1 value2;   //表示top和bottom的值是value1,right和left的值是value2

property:value1 value2 value3;   //表示top的值是value1，right和left的值是value2，bottom的值是value3

property:value1 value2 value3 value4;   //四个值依次表示top,right,bottom,left

• 边框 (border)

border-width:1px;

border-color:#ccc;

border-style:solid;

可以缩写为一句: border:1px solid #ccc;

• 背景 (background)

background-color:#f00;

background-image:url(background.gif);

background-repeat:no-repeat;

background-attachment:fixed;

background-position:0 0;

可以缩写为一句:background:#f00 url(background.gif) no-repeat fixed 0 0;

语法是background:color image repeat attachment position;

• 字体 (font)

font-style:italic;

font-variant:small-caps;

font-weight:bold;

font-size:1em;

line-height:140%;

font-family:”Lucida Grande”,sans-serif;

可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

// 注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。

• 列表(list)

取消默认的圆点和序号可以这样写

list-style:none;

list-style-type:square;

list-style-position:inside;

list-style-image:url(image.gif);

可以缩写为一句：list-style:square inside url(image.gif)

习惯的设立 （如注释、代码排列等）

• 注释
• 通过注释有效的组织管理代码文档，将相关的文档放归类在一起，以便阅读与修改，示例供参考

/**************************************/
/*                                  Globals                               */
/**************************************/

/***************************************/
/*                                   Header                                 */
/***************************************/

/***************************************/
/*                               Navigation                             */
/***************************************/

/***************************************/
/*                         Main Content                               */
/***************************************/

/***************************************/
/*                                     Footer                                */
/***************************************/

//这里将多个CSS文件合并在一个文档，以便通过减小请求次数，达到优化的目的。

• 通过适当的注释将合并后的文档进行有效的组织管理，方便日后查找、维护
• 尽量避免特殊符号的使用

• 代码排列及结构

所编代码按照字母的排序A-Z来编写，如下面的例子：

div.test1 {

text-align: left;

margin: 5px;

z-index: 1;

padding: 0 8px;

border: 1px solid #ccc;

}

div.test2 {

border: 1px solid #ccc;

margin: 5px;

padding: 0 8px;

text-align: left;

z-index: 1;

}

//在多行代码的情况下，按照字母排序(如div.test2)来编写的代码，会更易于查找

• 代码结构上配合上一条提到的字母的排序方式，采用多行编写，对于一个标签下的CSS属性 ≤3 时，我们将其编写在同一行内，合理的节省空间
• 每个标签的后面和左花括号之间加上一个空格便于区分查找

例如，div.test1 { 中 “div.test1” 和 “{“ 之间用空格隔开

• 每个Css属性后面加上均分号，即便是一组属性的最后一个，避免后期添加因遗漏而导致的错误

根目录下的 readme.txt

• 详细记录了web开发过程中的更新内容；
• 首次更新对重要文档给出适当的解释（重要文件的关联部分)

PS：box部分用了position属性来实现圆角，这样一来在IE6中不得不去添加width属性以解决错位问题(但并不是所有)
下次在更新这里吧，阴雨天睡觉看起来是个不错的选择O(∩_∩)O~