Rolyer's Blog

2010年11月23日星期二

网站设计线框图开发终极指南

网站设计线框图开发终极指南: "

对于产品设计师，线框图的重要性毋庸置疑。本文从多个角度分析了线框图的类型，功能，开发流程。

还提供了许多非常有用的线框图创建工具。从纸笔到多个web在线工具（具有方便共享和可供多人开发的优势）， HTML线框图，多套风格各异设计精良的线框图模具。

接着分析了如何使用线框来完成一个产品设计，作为项目交付，打磨外观。

最后是非常精彩的资源列表。

Ultimate Guide to Website Wireframing

http://sixrevisions.com/user-interface/website-wireframing/

使用jQuery设计slideshow

将WordPress 改造为电子商务网站的30个资源

55款新鲜的高质量WP模板

30款气泡悬浮框的 jQuery 插件

100个上乘的wordpress模板

2010年11月19日星期五

WEB视觉设计师 vs. WEB开发工程师

WEB视觉设计师 vs. WEB开发工程师: "

原图作者：Shane Snow / via: http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/

看了作者对设计师与工程师的定义，发觉我还是偏工程师一点点啊。。。。

Loading Picture...

源地址：http://iconmoon.com/blog2/web-designers-vs-web-developers/

让 GNOME Terminal 支持 Google 搜索

让 GNOME Terminal 支持 Google 搜索: "

这是由 Ubuntu Tweak 作者 @TualatriX 做的一个 Hack 作品，目的是让 GNOME Terminal 直接支持右键搜索，相信这里有不少也用 GNOME Terminal 的朋友，我想你也会需要它。

这个Hack主要用作：

当你在终端里遇到了一些问题，想通过Google搜索其中一些输出错误信息来解决问题，只需要选中文本，点击右键即可调用默认的浏览器进行Google搜索。非常快捷！

如图所示：

用上这个Hack很简单，在Ubuntu Tweak里的“软件源中心”启用“GNOME Terminal with Google search support”这个源就OK啦！

你也可以直接用 PPA（Ubuntu 10.04/10.10的用户）： https://launchpad.net/~tualatrix/+archive/gnome-terminal

sudo add-apt-repository ppa:tualatrix/gnome-terminal
sudo apt-get update
sudo apt-get upgrade

更多详细介绍请看作者原文。

PS1：另外再提一下， @TualatriX 最近还成立了杭州 Linux 用户组，欢迎杭州的童鞋加入。
地址： https://groups.google.com/group/hzlug/
或者发送电邮至 hzlug+subscribe@googlegroups.com 即可免翻墙订阅。

PS2: 上海童鞋可以加入上海 Linux 用户组： http://www.shlug.org/

# Twitter:@ubuntu_tips
/ Google Buzz
/ 新浪微博
/ 社区
/ Wiki
/ 投稿
/ 加入我们
# 本站架设于 PhotonVPS 之上，由 FreeBSD 强力驱动。"

15款ajax特效，针对Lightbox和Modal Dialog

15款ajax特效，针对Lightbox和Modal Dialog: "运用Lightbox和Modal Dialog可以很方便地在浏览器中展示内容，而无需重载整个页面，有了Lightbox就不必再使用浏览器弹窗了。Lightbox正愈来愈广泛地应用于媒体、网页、邮件、表格等元素的展示。

本文将为你介绍15款优秀的Lightbox和Modal Dialog特效，供网站开发者参考。

1. Facebox

facebox是一个jquery为基础的Lightbox，可显示图像，divs，或者远程页面。它的使用很简单。

下载地址：http://chriswanstrath.com/facebox

2. Colorbox

ColorBox是一个轻量级，可定制的Lightbox插件，可以在jQuery 1.3 和1.4中使用，ColorBox支持照片，照片组，幻灯片，ajax，内联和 iframe 框架。

下载地址：http://colorpowered.com/colorbox/

3. jQuery Lightbox Plugin

jQuery LightBox plugin是一个简洁优雅的插件，不需额外扩展代码就可以把当前页面上的图片通过一个遮罩显示出来，这主要是通过jQuery强大灵活的选择器来实现的。

下载地址：http://leandrovieira.com/projects/jquery/lightbox/

4. prettyPhoto

prettyPhoto是jQuery Lightbox的一个“克隆”。实际上它不仅能显示图片，还能显示许多的类型，比如在可能弹出的层窗口中加载视频、Flash动画、一个已布局好的网页、一个框架页等等。

下载地址：http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/

5. jQuery Dialog

这是一个 jQuery 的对话框插件，可以根据你的喜好很方便地自行定制对话框。

下载地址：http://jqueryui.com/demos/dialog/

6. Prototype Window

你可以把它用到ASP.NET，Ajax，Java等等所有网页上，可以实现改变窗口大小、最小化、最大化窗口、模型对话框、渐入渐出的渐变效果，支持皮肤等功能。现有的实例包括：模仿MAC OS的对话框，在对话框中打开一个网页，警告框，确认对话框，信息对话框，登录对话框，Ajax对话框等等。

它的原型基于对话框插件。

下载地址：http://prototype-window.xilinus.com/samples.html

7. MochaUI

MochaUI 是一个用于开发Web应用的用户界面库，基于Mootools的JavaScript框架。

下载地址：http://mochaui.com/

8. Boxy

Boxy是一个可灵活实现类似Facebook风格对话框的jQuery插件，支持对对话框进行拖拉和改变大小等操作。

下载地址：http://onehackoranother.com/projects/jquery/boxy/

9. ModalBox

Modalbox可用来增强Web应用中的用户交互，开发它的灵感来自Mac OS X的模块动态对话。

下载地址：http://www.wildbit.com/labs/modalbox/

10. Shadowbox

Shadowbox是一个在线媒体展示应用，支持绝大多数的网络媒体常用格式。Shadowbox完全是基于JavaScript和CSS编写的，高度可定制化。

下载地址：http://www.shadowbox-js.com/

11. jqModal

jqModal是jQuery的一个插件，用来在浏览器中显示通知，对话框和模型窗口。它简直如瑞士军刀一般灵活和小巧，而且它为通用目的窗口框架奠定了基础。

下载地址：http://dev.iceburg.net/jquery/jqModal/#examples

12. Highslide

Highslide是一个用Javascript写的图片影像特效浏览器，外观简洁优雅。

下载地址：http://highslide.com/

13. PiroBox

风格时尚且现代的Lightbox控件，采用jQuery开发。能够根据浏览器窗体大小自动调整展示图片大小。提供向前/向后控制链接。动态加载图片效果。易于定制。

下载地址：http://www.pirolab.it/pirobox/#howto

14. imgBox

imgBox是一个可以实现图片平滑放大效果的jQuery插件。

下载地址：http://jqueryglobe.com/labs/imgbox/

15. jQuery Tools

jQuery Tools是一个当前网站开发中最常用的UI组件集合。

下载地址：http://flowplayer.org/tools/overlay/index.html

感谢 HQAY0925 投递这篇新闻

声明：本文系JavaEye网站发布的原创新闻，严禁任何网站转载本文，否则必将追究法律责任！

新闻来源：http://www.1stwebdesigner.com/

已有 0 人发表留言，猛击->>这里<<-参与讨论

JavaEye推荐

—软件人才免语言低担保赴美带薪读研！—

2010年11月18日星期四

写了10年Javascript未必全了解的标识符顺序

发表于 2010年11月16日 17:58 分类: 工作日志统计: 1评/27阅 2人收藏此文章，收藏此文章(?)

关键字： Javascript , 顺序

一，局部变量先使用后声明，不影响外部同名变量

Js代码 
var x = 1; // --> 外部变量x  
function fn(){  
    alert(x);  // --> undefined 局部变量x先使用  
    var x = 2; // 后声明且赋值  
}  
fn();  
alert(x); // --> 1  

第一点，函数fn内第一句输出x，x是在第二句才定义的。这在js中是允许的，这里的允许是指不会出现语法错误程序可以运行。
但在其它语言如C，Java中却是不允许的。变量必选先声明后使用，如：

Java代码 
public class Test {  
    public static void main(String[] args) {  
        System.out.println(x); // 先使用  
        int x = 10; // 后声明  
    }  
}  

Java中编译器会提示错误，程序无法运行。

第二点，函数fn内的局部变量x不会影响到外部的变量x。即fn内alert输出不是1，而是undefined。

顺便提下，这段代码经常出现在前端面试题中。

二，形参优先级高于函数名

Js代码 
function fn(fn){  
    alert(fn);  
}  
fn('hello'); // --> "hello"  

可以看到函数名和形参同名都是fn，输出的是字符串"hello"，却不是函数fn的函数体(fn.toString())。

三，形参优先级高于arguments

Js代码 
function fn(arguments){  
    alert(arguments);  
}  
fn('hello'); // --> "hello"  

arguments对象可以直接在函数内使用，是语言本身提供的标识符。
这里刚好将形参声明成与其同名。输出可以看到是"hello"而非"[object Object]"，即形参arguments覆盖了语言本身提供的真正的arguments。

四，形参优先级高于只声明却未赋值的局部变量

Js代码 
function fn(a){  
    var a;  
    alert(a);  
}  
fn('hello'); // --> "hello"  

函数fn形参为a，函数内第一句仅声明局部变量a，却并未赋值。从输出结果是"hello"而非undefined可以看出形参a优先级高于仅声明却未赋值的局部变量a。

五，声明且赋值的局部变量优先级高于形参

Js代码 
function fn(a){  
    var a = 1;  
    alert(a);  
}  
fn('hello'); // --> "1"  

函数fn形参为a，函数内第一句仅声明局部变量a，赋值为1。从输出结果是"1"而非"hello"可以看出声明且赋值的局部变量a优先级高于形参a。

六，了解了以上几点，再看一个有趣的代码

Js代码 
function fn(a){  
    var a = a;  
    alert(a);  
}  
fn('hello');  

暂不运行，猜测下结果。如果按照第五点：声明且赋值的局部变量优先级高于形参。那么a将是undefined。但实际上a是"hello"，即右a是形参a，左a才是局部变量a。

这里的两个a互不干扰，谁也没覆盖谁。这与刚刚说的赋值的局部变量优先级高于形参又矛盾了。但引擎这样做的确是我们想要的，因为并不希望var a = a后a是undefined。

知识点深入：http://www.javaeye.com/topic/802482#1741032

订阅：博文 (Atom)