用jquery插件创建视觉震撼的网站

HoverFade

Demo Download

jQuery-Notes 1.0.2

Demo Download

gMap – Google Maps Plugin For jQuery

Demo Download

jQuery Menu Style

Demo Download

Contextual Slideout Tips With jQuery & CSS3

Demo Download

Growl

Demo Download

Animate Panning Slideshow with jQuery

Demo Download

jQuery Masonry

Demo Download

jQuery Quicksand

Demo Download

Jquery Plugin MopSlider 2.4

Demo Download

jQuery color plugin xcolor

Demo Download

jQuery Image Scroller

Demo Download

Auto-Playing Featured Content Slider

Demo Download

Horinaja

Demo Download

Slide Deck

Demo Download

Automatic Image Slider w/ CSS & jQuery

Demo Download

Create a Slick and Accessible Slideshow Using jQuery

Demo Download

Fancy Thumbnail Hover Effect w/ jQuery

Demo Download

Coda Slider Effect

Demo Download

Micro Image Gallery: A jQuery Plugin

Demo Download

Image Highlighting and Preview with jQuery

Demo Download

Textarea Words, Characters counter and maxlength plugin

Demo Download

GOOGLE CHARTS

Demo Download

IdmgAreaSelect

Demo Download

jQuery Bookmark

Demo Download

Poshy Tip

Demo Download

jqPlot Charts and Graphs for jQuery

Demo Download

jQuery MegaMenu Plugin

Demo Download

FullCalendar – Full-sized Calendar jQuery Plugin

Demo Download

jQuery Canvas Loader

Demo Download

Meerkat

Demo Download

jQuery PhotoShoot Plugin 1.0

Demo Download

jqFancyTransitions

Demo Download

jQuery Slider plugin (Safari style)

Demo Download

jTextTranslate: A jQuery Translation Plugin

Demo Download

xBreadcrumbs (Extended Breadcrumbs) jQuery Plugin

Demo Download

Get TopUp!

Demo Download

FireQuery – Firebug extension for jQuery development

Demo Download

ImagineMenu

Demo Download

Jquery AjaxSuggest

Demo Download

Ajax File Uploader

Demo Download

3d Tag Sphere

Demo Download

(MB)Extruder

Demo Download

jQuery Simple Multi-Select

Demo Download

Fancy Box

Demo Download

转自:http://www.smashingapps.com/2010/09/28/awesome-jquery-plugins-and-techniques-to-create-visually-excellent-websites.html

9个设计时常犯的错误,改进用户体验

网站,用户体验应该摆在第一位,这是网站取得成功的第一要素,以下的9个小毛病,指出来大家以后设计时可以注意防范类似的错误。

Web 用户体验大师 Jacob Nielsen 说过,“一个烂网站就像一个性情乖戾的推销员”,这样的推销员不仅无法说服顾客,而且让人生厌,就网站而言,再也没有什么比蹩脚的用户体验更让人沮丧的 了。本文讲述了 Web 设计与开发中常犯的 9 个用户体验错误以及它们的解决方法。

1. 难以找到你感兴趣的内容

下面这些知名站点不仅设计陈旧,而且易用性不佳

为什么不用更有意义的表单名字?

那几个旋转的骨牌原来是导航…

reddit.com,我喜欢它的概念,但内容太令人受伤。

我们常常在从一个网站查找内容的时候发现困难重重,比如那些政府站点,既然我们都知道内容为王的道理,我们就不应该让用户为了查找一点内容而翻遍成 千上万的菜单。

解决方法

简而言之,就是将你认为重要的信息放在容易找到的位置。如果你的站点有海量内容:

  1. 将各种内容放在它们应该放的栏目。
  2. 让你站点的搜索功能工作正常。
  3. 提供清晰的标签和目录。
  4. 让重要的内容重点显示。
  5. 提供本地化命名。

另外,使用 blur 测试,将你的设计草图做比如 10% 的模糊处理,这样你就能发现那些需要突出显示的内容是否真的突出了,还可以使用 IntuitionHQ.com 一类易用性测试服务。

2. 蹩脚的布局

典型的中文门户风格

到处都是文字,到处都可以点击

好用吗?有点,好看吗?一点也不。

内容难以查找的另一个原因是布局,将所有的东西放在首页,到处都是 Flash 广告,满眼都是文字,密密麻麻,挨挨挤挤。解决方法是请一个 Web 设计师将你的布局做一个设计。尽管有不少布局蹩脚的新闻站点仍然非常成功,但让它们成功的不是它们挨挨挤挤的布局。

3. 让人摸不着头脑的导航系统

原来那些橙色的,带问好的竖条是导航用的。

他们说,片图抵千言…

看上去挺漂亮,但 Flash 和 HTML 两个版本对用户来说有什么意义?

人们通常对导航菜单有一个约定俗成的期望,然而我们遇到很多奇怪的导航,常常让我们摸不着头脑。解决方法:

  • 先画个导航菜单草图
  • 让它有点逻辑
  • 找些人问问,他们希望在什么位置找到特定的信息,按他们的说法安排菜单
  • 考虑一下你的站点的目标用户
  • 做易用性测试
  • 使用面包屑导航,并确认前进和后退按钮起作用。

4. 蹩脚的菜单设计

到处都是导航菜单,但什么都找不到。

微软的

最令人关心的价格信息却无处可查。

很多站点的导航菜单布局十分不合理,重要信息被掩埋在很深的菜单下,重要信息需要挖掘很久才能找到,广告和内容搅和在一起,诸如此类。使用分析工 具,分析什么内容最受欢迎,用户在哪些页停留时间最长,哪些内容被频繁阅读,将这些内容放在容易被找到的位置。

5. 缺乏进度指示

Dell – 看上去并不难

但这些滚动滚到哪里才是头。

很多站点对于用户的操作进度,缺乏指示,或者指示混乱,假如你在进行一个长时间的操作,却不知道后面还剩下多少步,你会很容易半路放弃。

解决方法

人们无非想知道他们目前所在的位置,以及后面还余下多少步,告诉他们就是。

6. 无法反馈信息

压根没有信息反馈功能

可以反馈信息,但很难找到

无法找到信息反馈功能

Facebook 或许有理由不提供反馈,它们的用户量太大了,但小规模站点都应该提供用户反馈功能。可以是 Email,反馈表单,或是论坛。

7. 滥用社会媒体网络功能

这样的数字很让人伤心。

虽然,如今每个人和他的狗都有 Facebook, Twitter, Digg, LinkeIn 账户,但99%的人事实上从来不更新他们的内容,如果你在网站上提供了自己的 Twitter 链接,且实时显示自己的跟随数目,如果数字是1或者0,就太丢人了。

8. 太多选项

晕了

这一大堆选项让人头都要炸了

为什么要有这么多选择

选择多未必幸福,如果苹果有什么东西值得我们学习,那就是,人们不必去做过多选择,或许,几个基本的选项已经足够,或许,一个适合我的选项也已经足 够。保持简单,让用户少做选择,是良好用户体验的一个重要因素。

9. 工作不正常的链接,按钮与表单

错误的链接,不存在的页面,无法正常工作的表单,诸如此类,对于这类问题,除了测试,还是测试。

本文国际来源:1stwebdesigner.com 9 Usability And UX Pitfalls: Learn How To Avoid Them (原文作者:Jacob Creech

Web前端50个创意实用网站(二)

接上一篇:Web前端50个创意实用网站(一)
两篇文章都是不错的介绍,强烈推荐。

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

转载自:http://blog.csdn.net/comsharp/archive/2010/07/01/5707455.aspx

Web前端50个创意实用网站(一)

本篇分两部分,另一篇点击这里:Web前端50个创意实用网站(二),主要是web前端技术辅助网站,有些网站的创意和设计都很不错。本文介绍了50个非常强大的工具,你会发现,其中的一些工具会让你感到惊艳在。

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 上传图片,同类产品:PixlrSumo 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 主题。(译者:有待验证)

转:10 个强大的开源 Web 流量分析工具

Web 流量分析工具多不胜数,从 WebTrends 这样专业而昂贵的,到 Google Analytics 这样强大而免费的,从需要在服务器端单独部署的,到可以从前端集成的,不一而足。本文收集并介绍了10个功能强大的开源 Web 流量分析工具,因为是开源的,因此可以免费部署到你的网站。

TraceWatch

TraceWatch 是一个开源 Web 流量分析程序,支持实时分析,可以提供深度分析报告。

SlimStat

基于 PHP-MySQL,同时,可以像 Google Analytics 那样,通过 JavaScript 或 PHP 脚本集成到网站。

Piwik


可以生成站点的详细的实时访问报告,基于 PHP 和 MySQL,也可以像 Google Analytics 那样在前端集成。

Open Web Analytics

基于 PHP,内置对 WordPress,Gallery 以及 MediaWiki 的支持。

W3Perl

W3Perl 是一个 Web Log 分析工具。

CrawlTrack

CrawTrack 是一个很好的 Google Analytics 的开源替用品,提供非常独特的报告,比如,CrawTrack 可以帮你预防诸如 SQL 注射一类的攻击。

BBClone

BBClone 是一个 Web 计数器,可以提供很详细的访问报告。基于 PHP。

PhpMyVisites


基于 GNU/GPL 开源协议,可以提供很详细的,有关访问者信息的报告,它的 GUI 界面很有趣而且实用,安装也很简单。

AWStats

可以提供非常强大的,关于网站,FTP 站点,乃至 Email 服务器的访问分析报告,基于 CGI。

Grape

Grape 的界面比较简单,功能虽然不多,但很实用。

本文国际来源:reencoded.com 10 amazing open source web analytics (原文作者:denbagus

转载自:http://blog.csdn.net/comsharp/archive/2010/06/17/5675810.aspx

WordPress主题制作教程

wordpress博客系统,是目前最为流行的一个开源博客,拥有N多的插件和主题。

废话不多,这篇文章主要是介绍和推荐一些wordpress主题从零起步的教程。

主题文件

一个主题应该包括下列典型文件:

  • 404模板 = 404.php
  • 存档模板 = archive.php
  • 存档索引页面 = archive.php
  • 注释模板 = comments.php
  • 页脚模板 = footer.php
  • 页眉模板 = header.php
  • 链接 = links.php
  • 主页模板 = index.php
  • 页面模板 = page.php
  • 弹出式注释模板 = comments-popup.php
  • 日志模板 = single.php
  • 搜索框 = searchform. php
  • 查找模板 = search.php
  • 侧边栏模板 = sidebar.php
  • 样式表单 = style.css

这篇文章值得一看,对刚接触的制作者有一定的帮助:从零开始制作 WordPress 主题

这篇文章对主题制作有一定的深入了解(当然也是针对初学者的): 精通Wordpress主题Hacks与技巧

另外利用WordPress的body_class()函数,可以有针对性的进行样式覆盖。参考:WordPress的body_class()函数详解

web前端开发firefox插件推荐

web前端要在页面调试代码,不免需要各种工具来提高开发速度,而基于Firefox丰富的Web开发辅助插件无疑就是最好的利器。俗话说,“工欲善其事,必先利其器”,如果做web开发,没装几个像样的插件,会被人“笑话”的哦。:)

下面就和大家分享下我的插件吧:

点评:Firebug是firefox下的一个插件,能够调试所有网站语言,如Html,Css等,但FireBug最吸引我的就是javascript调试 功能,使用起来非常方便,而且在各种浏览器下都能使用(IE,Firefox,Opera, Safari),简直难以置信。除此之外,其他功能还很强大。比如html,css,dom的察看与调试,网站整体分析等等。总之就是一整套完整而强大的 WEB开发工具
说明:查看,编辑,Debug页面的CSS,HTML,JavaScript。超强的开发调试的工具,开发人员必装。强烈推荐装上。

以工具栏的形式对网页的(X)HTML、脚本、多媒体、CSS、缓存、图象等多方面的实用工具。使我们能轻易的获得网页的各种各样的信息,使我们进一步的了解当前所浏览的网页。
说明:超强的web分析工具,开发人员必装。

Tamper Data 的真实含义,即“篡改数据”(或者说定制 HTTP 请求):截取浏览器发出的每一个 HTTP 请求,提示我们选择是要进行定制,还是不做定制而直接提交请求,还是终止当前被截取的请求,然后根据我们的选择决定是打开定制窗口,还是直接向 WEB 服务器提交请 求,还是终止当前的请求。
说明:查看 firefox 收发请求的 header, 特别是在发出请求前, 可以修改 header。

YSlow是一款用来分析网页,并提出前端性能改进建议的Firefox插件。YSlow依据预定义或用户自定义的规则为网页评级。它同时提供了许多性能分析工具,如:Smush.it™JSLint
说明:能够帮我们分析web页面比较慢的原因,它是基于 Firebug的,也能分开浏览web页面的元素,比如js,css.

HTML Validator是一个Firefox扩展,它能查找并标志出HTML页面上的错误。HTML Validator以Tidy为基础,Tidy最初是W3C为验证HTML代码开发的一个工具。
说明:著名的 CSE HTML Validator 引擎。

Firecookie, 是一个嵌入在Firebug中的cookie浏览管理插件。

如果在Web开发中用到了cookie,使用它可以轻松的浏览cookie值、过期时间等,有助于快速开发。

使用它时需要在Firebug的网络面板中开启cookie监测。它可同时显示发送和接收的cookies。

FireUnit提供了一个简单的API用来做简单的测试记录及单元测试。关于单元测试,之前写的这篇文章《JavaScript单元测试框架介绍》可以看看。

如果热衷于jQuery Lib,FireQuery这款插件肯定要装下,FireQuery,它可以在任意页面插入jQuery脚本,结合FireBug的命令控制台使用jQuery语法,以方便对jQuery熟悉的开发者调试页面。

在制作网页时,在页面上添加一个新的设计元素(例如一个图片或图标)之前,我们往往希望提前看到元素添加后页面的整体效果。Pixel Perfect就可以帮你实现这个想法,它允许开发者在网页上覆盖你要添加的设计元素。使用它时你可以调整要添加元素的透明度和位置。
我感觉这款插件也可用来做网页中元素的微调,以保证和最初设计蓝图一致,如它的名字,完美到一个像素都不差。

HttpWatch是强大的网页数据分析工具.集成在Internet Explorer工具栏.现在,也可以在firefox下使用了。它包括网页摘要.Cookies管理.缓存管理.消息头发送/接受.字符查询.POST 数据和目录管理功能.报告输出。

一款强大的正则表达式测试工具,不仅可以帮助开发人员编写正则,还可以方便地进行存储,以后用到就不用再绞尽脑汁了。

css实现input、checkbox垂直居中

先说input,这里说的input垂直居中,是指input内部文字的居中。

input 框在各种浏览器效果一样的解决法案:

为input框定义这样的css

.inputText{
font-size:12px;
height:14px;
padding:5px;
line-height:15px;
}

则input的高度最后为26px;

下面解释

height为字体大小加2px,line-height为height加1px。input框最后的高度则为height加padding-top加padding-bottom加2

想要什么样的高度就在字体的基础上改变height跟padding的值就可以。效果经测试在ie7 firefox chrome上一样,ie6上效果不太好但能接受。

这个应该也算不用css hack之外的一个比较不错的办法。

至于checkbox 和文字居中,可以用这段代码试试:

/*input vertical middle*/
.input_middle{font-family:tahoma;}
.input_middle label{vertical-align:middle; cursor:pointer}
.input_middle input{vertical-align:middle; margin-right:3px;}
<div class="input_middle">
<input name="test" value="1" type="checkbox">
<label>测试文字x</label>
</div>

扩展阅读:基于vertical-align的表单元素垂直对齐方式研究