'技术文档' 分类的存档

各种 lightbox 实现

Thickbox - 基于 jQuery,支持 AJAX,轻量级的而且比较高效。可以在 lightbox 中使用图片或 HTML。大小约为 40k,目前还可作为 WordPress 的插件使用。

GreyBox - 创建 iframe 的弹出界面,可使用图片、HTML 及 URL,大小约为 20k。

GreyBox Redux - 基于 jQuery,比 GreyBox 更轻。

Lightbox v2.0 - 最初是为了显示图片设计的,使用了 prototype 和 sciptaculous,所以有些沉重,但对于图片来说很好用。

Lightbox with moo.fx - 基于 prototype,但只能用于图片。

Lightbox Gone Wild
- modal 模式窗口的 lightbox,可使用 html、表单及图片,也是基于 prototype 的,所以有一些 heavy。

Multi-faceted LIghtbox - 又一个基于 prototype 的,不过这个为各种可用于 lightbox 的数据类型提供了选项。

Leightbox - 和 Lightbox Gone Wild 很相似,只是 Leightbox 以 html 方式存放内容,所以可以被搜索引擎索引到。

xilinus - 使用简单,基于 prototype,很容易定制,可使用多种内容选项。

Lightbox Plus - 可以自动根据窗口的大小缩放图片。

Suckerfish Hover Lighbox - 和传统的 lightbox 不一样,它在打开 lightbox 的时候,还可以点击访问页面上的其它元素。

Litebox - 这是 Lightbox 的另一个版本,代码量减少了,使用了 moo.fx 和 prototype-lite,如果页面需要减肥的话,可以选择这个。

LITBox - 使用类写的 lightbox,所以可以创建多个对象实例,并且单独进行控制。基于 Thickbox。

SEO入门实践指南(from Google)

  1. 本文编译自Google Webmaster Blog于2008年11月13日发布的《Search Engine Optimization Starter Guide(搜索引擎优化入门指南)》,这是一份操作性比较强的搜索引擎优化建议,极具价值。
  2. 本文是选译自原文中每章节的实践指南(Good practices)部分。跳过示例的原因有二:其一,示例很简单,诸位自己看吧;其二,英文网站的SEO操作与中文网站有所差异,比如对关键字(keywords)的处理等。
  3. 本文对会受示例影响的部分做了一定调整。如有版权问题,敬请告知,我会在第一时间进行修改或删除。

创建独特、准确的网页标题(Title)

  1. 页面标题要准确的描述对应网页的内容。
    请注意: 

    • 不要使用与网页内容无关的标题。
    • 不要使用预设或模糊的标题,如”无标题”、”新建页面1″等。
  2. 为每个页面创建独特的标题,这将有助于Google将其与该网站上的其他网页做区分。
    请注意: 

    • 不要在一个网站中使用单一标题命名所有网页。
  3. 使用简单、有效的标题,如果标题很长,Google可能只会显示一部分。
    请注意: 

    • 不要使用过长的标题,这对用户毫无意义。
    • 不要在标题中包含不必要的关键字。

充分利用页面摘要(meta-description)

  1. 准确的概括对应网页中的内容,页面摘要可能会作为搜索结果而呈现给用户。
    请注意: 

    • 不要使用与页面内容无关的页面摘要。
    • 不要使用预设或模糊的页面摘要,如”这是一个网页”、”关于我们”等。
    • 不要以关键字堆砌的方式构成页面摘要。
    • 不要以复制、粘贴全部页面内容的方式构成页面摘要。
  2. 为每一个网页设定独特的页面摘要:尤其是在用户搜索你的网域时(如搜索”site:elviscai.com“),不同的页面摘要会极大的方便用户和Google。如果你的网站有成千上万乃至数以百万计的网页,通过手工添加页面摘要几乎是不可能的,此时也可以基于对应网页的内容自动生成摘要。
    请注意: 

User-Centered Design

一个朋友在做Web2.0的网站,向我征求一些关于UCD方面的建议。我算不上专家,只是有些个人的理解。也可以share一下。
说到UCD(User-Centered Design),可能大部分人首先想到的是网站美工,因为Design这个词往往会让人联想到视觉设计。网站的视觉效果也是所有浏览网站的人第一眼所接触的,优秀的视觉设计能够使用户的视线停留,并且把用户的视线引导到重要内容上。但是,Design还包含了系统设计的含义,也就是说,它包含了系统流程和功能的设计。网站就是一个信息系统,只是把应用对象从专业的操作人员换成了大众用户而已。当然大部分网站是由前台客户操作和后台管理、处理请求的两个部分组成。
就像一个艺术家和一个工程师在讨论Design时一样,艺术家眼里的Design是艺术的、感性的,而工程师眼里的Design是工程的、理性的。UCD正是这种艺术与工程的结合。既注重感性的用户体验,又强调理性的产品流程。
所以,在我看来,UCD主要体现在两个方面:
一方面是显示操作上的友好性,页面布局的美观性、易读性,浏览器兼容性,以及其他一些细节性的东西,比如哪些地方需要提示,提示框怎么出,按钮的布局怎么放,怎样报错比较友好等等。细节问题可以放在网站开发的后期考虑、优化。
另一方面则是产品流程设计,即用户在网站上停留、操作,从用户需求和网站能够提供的产品双向考虑,怎么引导客户获得其想要的东西,这方面影响到整个网站的流程问题,并且也是保持客户粘度、忠诚度的关键本质因素。这个方面需要较早地在开发初期考虑确定,需要大量brainstorm。