Yooyo Garden » admin http://www.yooyo.me/blog frent-end and web design Thu, 10 Nov 2011 04:43:17 +0000 en hourly 1 http://wordpress.org/?v=3.3 Overview of CSS3 structural pseudo-classes(1) – the ‘:target ‘ pseudo-class http://www.yooyo.me/blog/overview-of-css3-structural-pseudo-classes1-the-target-pseudo-class/ http://www.yooyo.me/blog/overview-of-css3-structural-pseudo-classes1-the-target-pseudo-class/#comments Thu, 10 Nov 2011 04:42:16 +0000 admin http://www.yooyo.me/blog/?p=203

E:target

Selects the element E referenced by the fragment identifier (if any) of the page’s URL. this lets you dynamically select the jumped-to anchor from an HTML anchor on the page.

target 伪类可以动态选择页面中具有锚点的元素。


通常一个页面都是有一个URL地址，但是如果这个地址如果是以#something 结尾 链接到特定的元素的话，浏览器会尝试着确定这个元素是否存在（可见）或者是否是在页面的顶端。

:target 伪类可以选择这个特定的元素。

当然可以做的更多，比如，你可以判断这个元素是否选中来隐藏或者显示这个元素。

一个简单的例子：

<a href="#item1">item 1</a>
<a href="#item2">item 2</a>
<a href="#item3">item 3</a>
<a href="#default">clear</a>
<div class="items">
<p id="item1">... item 1...</p>
<p id="item2">... item 2...</p>
<p id="item3">...item 3...</p>
<p id="default">no target</p>

</div>

相应的css，

div.items p {display: none}
div.items p:target {display: block}

非常简单的一个选项卡切换功能，只用了css3就实现。

你可以另外加些样式，使之看起来更像一个按钮。

实际上，在那些支持css3的浏览器你可以用’:not(:target)’隐藏没有被选择的元素。相应代码：

div.items p:not(:target) {display: none}
div.items p:target {display: block}
]]> http://www.yooyo.me/blog/overview-of-css3-structural-pseudo-classes1-the-target-pseudo-class/feed/ 0 UPDATING XCODE AND MACPORTS FOR OSX LION http://www.yooyo.me/blog/updating-xcode-and-macports-for-osx-lion/ http://www.yooyo.me/blog/updating-xcode-and-macports-for-osx-lion/#comments Tue, 26 Jul 2011 09:47:28 +0000 admin http://www.yooyo.me/blog/updating-xcode-and-macports-for-osx-lion/ 转发一篇文章

So, you’ve upgraded from Snow Leopard to Lion, and you’re ready to jump back into development. Watch out! MacPorts and XCode need to be updated! Apple doesn’t include XCode in the system updates, so you have to do it manually. If you installed XCode on Snow Leopard, you’re probably running XCode 3 (unless of course you bought XCode 4). The latest that ships for Lion is 4.1 and is free. Here’s how to upgrade your development environment:

Step 1: Install XCode 4.1

From the App store, find and download XCode. This will put an installer in your Applications folder. Run the installer. As of right now, there isn’t an alternative download method from Apple. If you don’t want to deal with the App store, you’ll probably have to hit the warez sites.

Step 2: Uninstall XCode 3

Installing the new XCode doesn’t replace your old one, it just moves it to a backup directory. Fire up your terminal:

sudo /Developer-old/Library/uninstall-devtools –mode=all
Remove the leftover XCode folder:

sudo rm -rf /Developer-old
At this point I needed to run the XCode 4.1 installer again because the XCode 3 uninstall removed some of the shared command line utilities.

Step 3: Remove installed ports

Make a list of your installed ports in your home folder:

port -qv installed > ~/myports.txt
Uninstall all ports

sudo port -f uninstall –follow-dependents installed
Remove any partially installed ports and archives

sudo port clean –work –archive all
Step 4: Update MacPorts

MacPorts recommends that you reinstall the base package, but as of right now there isn’t a Lion-specific installer. You should download and run the Snow Leopard installer again though.

After that, make sure you’re updated and rsynched with the MacPorts server:

sudo port -v selfupdate
sudo port upgrade obsolete
Step 5: Reinstall the ports you need

Read through the text file we created, and reinstall only the ports you need. Don’t worry about all the dependencies, they’ll be added as necessary. Make sure that if you used specific variants (the package name is followed with a +) that you install those variants. For example, I didn’t install git-core, I installed git-core +svn, so I need to now run:

sudo port install git-core +svn
Yes, even though Git and SVN are both included in XCode 4.1, I am reinstalling git. The build of Git that Apple included is quite limited, and I needed a specific extension git-svn so that I can migrate my projects from SVN to Git.

That should be it! Enjoy developing on OSX Lion!

]]> http://www.yooyo.me/blog/updating-xcode-and-macports-for-osx-lion/feed/ 0 JS学习笔记提升规则(hoisting) http://www.yooyo.me/blog/js%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0%e6%8f%90%e5%8d%87%e8%a7%84%e5%88%99hoisting/ http://www.yooyo.me/blog/js%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0%e6%8f%90%e5%8d%87%e8%a7%84%e5%88%99hoisting/#comments Tue, 14 Jun 2011 10:11:11 +0000 admin http://www.yooyo.me/blog/?p=196 JS 学习笔记一：

提升规则 hoisting

JS代码：

var  h_var = "Hello hoisting";

alert(h_var);

运行代码会输出 Hello hoisting

代码2:

var  h_var = "Hello hoisting";

(function(){

alert(h_var);

})();

运行代码也会输出 Hello hoisting

代码3:

var  h_var = "Hello hoisting";

(function(){

alert(h_var);

var h_var = "Hello hoisting again!"

})();

运行代码则会输出 undefined, 为什么我们已经声明了变量h_var 但是会输出undefined呢？

在它的当前作用域内，不管变量是在哪里声明的，都会提升到顶部作用域，然而，只是声明部分提升,赋值部分不会被提升，如果变量被赋值，则当前的值会初始化为 undefined!

声明跟初始化的区别：

假设有这样一个变量声明：

var h_var = "hello h"

那么，首先是声明： var h_var ,然后才是初始化变量 h_var = “hello h”.

再来一个例子：

function hoisting(){

var a=1;

//其他js代码

var b=2;

//其他js代码。。。



}

则相当于：

function hoisting(){

var a,b;

a = 1

//其他js代码，再这里的js代码如果用到b变量的话则是输出undefined!

b=2;

//其他js代码。。。


}

提示： 把所有的变量声明都写到函数的顶部！

所以不难理解上面的代码3 ：

var  h_var = "Hello hoisting";

(function(){

var h_var; //变量声明自动提升到函数顶部，但是变量初始化没有提升到函数顶部，所以初始值为 undefined

alert(h_var);// 输出 undefined

h_var = "Hello hoisting again!"    //var h_var = "Hello hoisting again!" 应该把变量声明放到行数最顶部！

})();


]]> http://www.yooyo.me/blog/js%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0%e6%8f%90%e5%8d%87%e8%a7%84%e5%88%99hoisting/feed/ 0 开源中最好的Web开发的资源 http://www.yooyo.me/blog/%e5%bc%80%e6%ba%90%e4%b8%ad%e6%9c%80%e5%a5%bd%e7%9a%84web%e5%bc%80%e5%8f%91%e7%9a%84%e8%b5%84%e6%ba%90/ http://www.yooyo.me/blog/%e5%bc%80%e6%ba%90%e4%b8%ad%e6%9c%80%e5%a5%bd%e7%9a%84web%e5%bc%80%e5%8f%91%e7%9a%84%e8%b5%84%e6%ba%90/#comments Wed, 08 Jun 2011 09:51:16 +0000 admin http://www.yooyo.me/blog/?p=194 转载自：http://coolshell.cn/articles/4795.html

学习HTML 5编程和设计

服务器端的软件

  • ★ 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 和 在线数据

在线代码和媒体编辑器

  • ★ 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 资源

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 。

客户端和模拟器

CSS3 和 字库

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 。

（全文完）

]]> http://www.yooyo.me/blog/%e5%bc%80%e6%ba%90%e4%b8%ad%e6%9c%80%e5%a5%bd%e7%9a%84web%e5%bc%80%e5%8f%91%e7%9a%84%e8%b5%84%e6%ba%90/feed/ 0 jquery live() 在iPad safari里部分元素失效的问题 http://www.yooyo.me/blog/jquery-live-%e5%9c%a8ipad-safari%e9%87%8c%e9%83%a8%e5%88%86%e5%85%83%e7%b4%a0%e5%a4%b1%e6%95%88%e7%9a%84%e9%97%ae%e9%a2%98/ http://www.yooyo.me/blog/jquery-live-%e5%9c%a8ipad-safari%e9%87%8c%e9%83%a8%e5%88%86%e5%85%83%e7%b4%a0%e5%a4%b1%e6%95%88%e7%9a%84%e9%97%ae%e9%a2%98/#comments Fri, 27 May 2011 07:44:51 +0000 admin http://www.yooyo.me/blog/?p=192 在一个项目里用到live()来绑定一个元素的click事件，但是在iPad里失效了，没有任何效果！ 改用bind可以工作，但是有些内容涉及AJAX请求取得，bind就不符合要求了，用delegate也不能正常工作。

后来查了资料 jQuery’s live click handler on mobile Safari 在元素里添加 onlick＝”", live()就正常工作了。

上面的连接被Q了，

以下是文章的引用：

jQuery’s live click handler on mobile Safari

Won’t fire: $(‘section’).live(‘click’, function(){ … });

But if the element you’re binding to is an anchor tag, it WILL fire.

The workaround: add onclick=”” to the element you’re binding to.

This applies to iOS 4.0.

]]> http://www.yooyo.me/blog/jquery-live-%e5%9c%a8ipad-safari%e9%87%8c%e9%83%a8%e5%88%86%e5%85%83%e7%b4%a0%e5%a4%b1%e6%95%88%e7%9a%84%e9%97%ae%e9%a2%98/feed/ 0 Adobe CS4 for Mac 激活方法总结 http://www.yooyo.me/blog/adobe-cs4-for-mac-%e6%bf%80%e6%b4%bb%e6%96%b9%e6%b3%95%e6%80%bb%e7%bb%93/ http://www.yooyo.me/blog/adobe-cs4-for-mac-%e6%bf%80%e6%b4%bb%e6%96%b9%e6%b3%95%e6%80%bb%e7%bb%93/#comments Mon, 09 May 2011 09:44:23 +0000 admin http://www.yooyo.me/blog/?p=190 Adobe CS4 for Mac 激活方法总结

转载的，

Mac 用户最常用的软件就是 Adobe 系统，由于众所周知的原因，很多没有购买正版的朋友和我一样苦苦寻找着能够完美破解 Adobe 激活系统的方法。经过笔者在网上对相关信息的搜索和自己的实践，现把一套本人验证有效的 Adobe CS4 for Mac 激活方法总结如下。

1 － Adobe CS4 系统的验证原理与破解策略

Adobe CS4 在安装或试用版试用期间会要求用户输入序列号以获得完整试用权限，输入正确的序列号后，Adobe 会在下一次启动时与官方服务器对话，验证输入的序列号书否合法，由于算号器和网上提供的序列号在算法上正确，但已经属于盗用名单之内，所无法通过官方服务 器验证。可知，破解激活系统的关键在于屏蔽官网验证源。

2 － Adobe CS4 for Mac 安装与破解操作

1）下载官方试用版

鉴于其对 Mac 系统的兼容性和源文件的纯度，笔者推荐下载 Adobe 官方网站提供的试用版作为安装源。

Adobe Downloads － http://www.adobe.com/downloads/

09081110

该下载点需要帐号，可以在官网免费注册。请用官网推荐的下载插件下载，并推荐使用 Firefox 浏览器。

09081109

2）安装

安装时，请选择试用版，不要输入序列号。

3）屏蔽验证

此步是激活的关键，进行之前，必须确认 Mac 系统已经启用 root 帐户，没有启用 root 帐户的，按如下方法启用

a － 打开 Directory Utility 单击左下角锁定图标，输入帐户密码，开启锁定

09081108

09081107

b － 单击 Directory Utility 的 Edit 菜单，选择  Enable root user

c － 再次单击 Edit 菜单，选择 Change root password，两次输入新密码，确定。

09081104

至此开启了 root 用户，登出（Log out），再次以 root 登陆系统，就可以进行下面操作了。

在 root 帐户登陆后，用户获得超级权限。打开finder，选择 Mac 系统盘，在菜单中选择 Go->Go to folder，填入（蓝色部分）

/etc

09081103

09081102

在 etc 文件夹下打开文件名为 hosts 的文件，在文件结尾添加如下内容（蓝色部分）

127.0.0.1 adobe.activate.com
127.0.0.1 activate.adobe.com
127.0.0.1 practivate.adobe.com
127.0.0.1 ereg.adobe.com
127.0.0.1 activate.wip3.adobe.com
127.0.0.1 wip3.adobe.com
127.0.0.1 3dns-3.adobe.com
127.0.0.1 3dns-2.adobe.com
127.0.0.1 adobe-dns.adobe.com
127.0.0.1 adobe-dns-2.adobe.com
127.0.0.1 adobe-dns-3.adobe.com
127.0.0.1 activate-sea.adobe.com
127.0.0.1 wwis-dubc1-vip60.adobe.com
127.0.0.1 activate-sjc0.adobe.com

09081101

保存，关闭文件

至此，屏蔽完成，登出 root 权限，回到原来用户，继续如下操作。

4）输入序列号

打开 CS4 任意组件，软件会要求输入序列号，此时可以使用算号器算出序列号，也可以在下列序列号中选择填入（仅 Mac 适用）

1325-0246-6722-6852-0264-0469
1325-0140-3701-7040-9612-8969
1325-0585-8749-5991-1439-4896
1325-0390-9218-8894-7759-0236
1325-0321-2015-7091-9681-7717
1325-0181-3738-0615-5739-9898
1325-0084-0806-2185-0302-7354
1325-0112-3840-5467-8974-0282
1325-0248-9800-0187-7623-7106
1325-0412-0855-1375-6305-7806
1325-0581-1108-1105-1944-2760
1325-0213-2599-6032-5159-4780
1325-0882-6599-8787-6439-6137
1325-0261-4811-3496-3493-1549

输入后确认，正常运行软件。其中任一组件进行上述操作后，全部 Adobe collection 都会激活。

下载注册机：

http://cid-48d9e5b939ca7f5d.skydrive.live.com/self.aspx/Share%20Apps/adobe-master-cs4-keygen.exe

]]> http://www.yooyo.me/blog/adobe-cs4-for-mac-%e6%bf%80%e6%b4%bb%e6%96%b9%e6%b3%95%e6%80%bb%e7%bb%93/feed/ 0 JS 动态修改table colspan属性的问题 http://www.yooyo.me/blog/js-%e5%8a%a8%e6%80%81%e4%bf%ae%e6%94%b9table-colspan%e5%b1%9e%e6%80%a7%e7%9a%84%e9%97%ae%e9%a2%98/ http://www.yooyo.me/blog/js-%e5%8a%a8%e6%80%81%e4%bf%ae%e6%94%b9table-colspan%e5%b1%9e%e6%80%a7%e7%9a%84%e9%97%ae%e9%a2%98/#comments Wed, 23 Mar 2011 10:06:33 +0000 admin http://www.yooyo.me/blog/?p=186 场景: 一个table 二行tr, 其中第二行里的td全部设置colspan属性, 然后最后一个td的colspan需要动态修改数值.

JS 动态修改 colspan 属性后在IE7/8 下不能正确显示:

查看资料后发现在IE下colspan属性的”s”需要大写: colSpan , 修改后仍没有解决问题. 在 stackoverflow 上搜索到当表格 table-layout 属性设置成fixed的 时候修改数值是无效的, 后把table-layout 修改成 auto 解决问题.

]]> http://www.yooyo.me/blog/js-%e5%8a%a8%e6%80%81%e4%bf%ae%e6%94%b9table-colspan%e5%b1%9e%e6%80%a7%e7%9a%84%e9%97%ae%e9%a2%98/feed/ 0 How to change srcollbar style on safari(webkit browsers) http://www.yooyo.me/blog/how-to-change-srcollbar-style-on-safariwebkit-browsers/ http://www.yooyo.me/blog/how-to-change-srcollbar-style-on-safariwebkit-browsers/#comments Fri, 14 Jan 2011 08:11:00 +0000 admin http://www.yooyo.me/blog/?p=179 一下代码是修改基于webkit浏览器的滚动条的样式的css代码(部分).

#container ::-webkit-scrollbar {/*滚动条宽跟高*/
width:9px;
height:9px;
}

#container ::-webkit-scrollbar-button:start:decrement, #container ::-webkit-scrollbar-button:end:increment {
display:block;
height:0;
background-color:transparent;
}

#container ::-webkit-scrollbar-track-piece {/*滚动条样式底部样式*/
background-color:#FAFAFA;
-webkit-border-radius:0;
-webkit-border-bottom-right-radius:8px;
-webkit-border-bottom-left-radius:8px;
}

#container ::-webkit-scrollbar-thumb:vertical {/*垂直滚动条样式*/
height:50px;
background-color:#999;
-webkit-border-radius:8px;
}

#container ::-webkit-scrollbar-thumb:horizontal {/*横向滚动条样式*/
width:50px;
background-color:#999;
-webkit-border-radius:8px;
}

screenshot:

]]> http://www.yooyo.me/blog/how-to-change-srcollbar-style-on-safariwebkit-browsers/feed/ 0 Robert Carter | Cracked Hat Illustration http://www.yooyo.me/blog/robert-carter-cracked-hat-illustration/ http://www.yooyo.me/blog/robert-carter-cracked-hat-illustration/#comments Mon, 16 Aug 2010 08:42:31 +0000 admin http://www.yooyo.me/blog/?p=172 Illustration

Robert Carter | Cracked Hat Illustration

原文地址： http://www.behance.net/gallery/Robert-Carter–Cracked-Hat-Illustration/175815

]]> http://www.yooyo.me/blog/robert-carter-cracked-hat-illustration/feed/ 0 juandou_ceshi http://www.yooyo.me/blog/juandou_ceshi/ http://www.yooyo.me/blog/juandou_ceshi/#comments Thu, 12 Aug 2010 03:23:43 +0000 admin http://www.yooyo.me/blog/?p=170 请点此链接

]]> http://www.yooyo.me/blog/juandou_ceshi/feed/ 0