2011年6月28日星期二

百度、Google 的搜索参数

百度、Google 搜索引擎查询参数详解:

百度:baidu.com搜索参数
wd--查询的关键词(Keyword)
pn--显示结果的页数(Page Number)
cl--搜索类型(Class),cl=3为网页搜索
rn--搜索结果显示条数(Record Number),取值范围在10--100条之间,缺省设置rn=10
ie--查询输入文字的编码(Input Encoding),缺省设置ie=gb2312,即为简体中文
tn--提交搜索请求的来源站点
几个有用的tn

tn=baidulocal 表示百度站内搜索,返回的结果很干净,无广告干扰。比如,在百度站内搜索"快乐",看看返回结果是不是很清爽。
tn=baiducnnic 想把百度放在框架中吗?试试这个参数就可以了,是百度为Cnnic定制的
si--在限定的域名中搜索,比如想在新浪的站内搜索可使用参数si=sina.com.cn,要使这个参数有效必须结合ct参数一起使用。
ct--此参数的值一般是一串数字,估计应该是搜索请求的验证码
bs--上一次搜索的关键词(Before Search),估计与相关搜索有关

谷歌:google.com搜索参数
q--查询的关键词(Query),百度对应的参数为wd
hl--Google搜索的界面语言(Interface Language)
hl=zh-CN简体中文语言界面,我们用的Google中文就是这个参数。
hl=zh-TW繁体中文语言界面,港台地区常使用
hl=en 英文语言界面
start--显示结果的页数,百度对应的参数为pn
lr--搜索内容的语言限定(Language Restrict),限定只搜索某种语言的网页。如果lr参数为空,则为搜索所有网页。
常用的有:
lr=lang_zh-CN只搜索简体中文网页
lr=lang_zh-TW只搜索繁体中文网页
lr=lang_zh-CN|lang_zh-TW搜索所有中文网页
lr=lang_en只搜索英文网页
ie--查询输入文字的编码(Input Encoding),Google缺省设置ie=utf-8,即请求Google搜索时参数q的值是一段utf-8编码的文字,如果要直接使用中文,可以设置ie=gb2312,即为简体中文编码
oe--搜索返回页面的编码(Output Encoding),Google缺省设置oe=utf-8
num--搜索结果显示条数(Number),取值范围在10--100条之间,缺省设置num=10,百度对应的参数为rn
newwindow--是否开启新窗口以显示查询结果。 缺省设置newwindow=1,在新窗口打开网页
safe--安全搜索选项(SafeSearch),设置该参数可以过滤成人内容, 缺省设置safe为空,即不过滤成人内容,设置为safe=vss,即过滤成人内容。

2011年6月27日星期一

企业网站栏目常用中英文对照

大家在做企业网站时,对网站栏目页面的命名都有自己的习惯和标准吧,在网络上摘录了一些网站栏目常用的中英文对照,收藏备用。

网站导航 SITE MAP | Site Map
公司简介 PROFILE or COMPANY | Profile or Company
公司设备 EQUIPMENT | Equipment
公司荣誉 GLORIES | Glories
企业文化 CULTURE | Culture
产品展示 PRODUCT | Product
资质认证 Quality Certification
企业规模 SCALE | Scale
营销网络 Sales Network
组织机构 ORGANIZATION | Organization

合作加盟 Join in Cooperation
技术力量 TECHNOLOGY | Technology
经理致辞 Manager`s oration
发展历程 Development history
工程案例 Engineering Projects
业务范围 Business Scope
分支机构 Branches
供求信息 Supply & Demand
经营理念 Operation Principle
产品销售 Sales
联系我们 CONTACT US
信息发布 INFORMATION Information
返回首页 HOMEPAGE | Homepage
产品定购 ORDER | order
分类浏览 Browse by category
电子商务 E-Business
公司实力 STRENGTH Strength
版权所有 Copy right
友情连结 Hot link
应用领域 Application Fields
人力资源 Human Resource HR
领导致辞 Leader`s oration
企业资质 Enterprise qualification
行业新闻 Trade news
行业动态 Trends
客户留言 Customer Message
客户服务 Customer Service
新闻动态 News & Trends
公司名称 Company Name
销售热线 Sales Hot-line
联系人 Contact Person
您的要求 Your requirements
建设中 In construction
证书 CERTIFICATE Certificate
地址 ADD | Add
邮编 POSTAL CODE Zipcode
电话 TEL | Tel
传真 FAX | Fax
产品名称 Product Name
产品说明 DESCRIPTION | Description
价格 Price
品牌 Brand
规格 Specification
尺寸 Size
生产厂家 MANUFACUTURER Manufacturer
型号 Model
产品标号 Item No.
技术指标 Technique Data
产品描述 Description
产地 Production Place
销售信息 Sales Information
用途 Application
论坛 Forum
在线订购 On-line order
招商 Enterprise-establishing
招标 Bid inviting
综述 General
业绩 Achievements
招聘 Join Us
求贤纳士 Join Us
大事 Great Event
动态 Trends
服务 Service
投资 Investment
行业 Industry
规划 Programming
环境 Environment
发送 Delivery
提交 Submit
重写 Reset
登录 Enter
注册 Login
社区 Community
业务介绍 Business introduction
在线调查 Online inquiry Inquiry
下载中心 Download
会员登陆 Member Entrance
意见反馈 Feedback
常见问题 FAQ
中心概况 General Profile
教育培训 Education & Training
游乐园 amusement park
在线交流 Online communication
专题报道 Special Report

2011年5月20日星期五

Source Insight配置和使用技巧大全

1、背景色选择

    要改变背景色Options->preference->windows background->color设置背景色

2、解决字符等宽对齐问题。

    SIS默认字体是VERDANA,很漂亮。这网页上应该也是用的VERDANA字体。但由于美观的缘故,VERDANA字体是不等宽的。比如下面两行
    llllllllll
    MMMMMMMMMM
    同样10个字符,长度差多了.用VERDANA来看程序,有些本应该对齐的就歪了。解放方法是使用等宽的字体,但肯定比较丑。比较推荐的是用Courier New。

3、解决TAB键缩进问题

    Options-> Document Options里面的右下角Editing Options栏里,把Expand tabs勾起来,然后确定。OK,现在TAB键的缩进和四个空格的缩进在SIS里面看起来就对齐咯

4、SI中的自动对齐设置:

    在C程序里, 如果遇到行末没有分号的语句,如IF, WHILE, SWITCH等, 写到该行末按回车,则新行自动相对上一行缩进两列。
    Option->Document option下的Auto Indient中Auto Indient Type有三种类型 None,Simple,Smart。个人推荐选用Simple类型。

5、向项目中添加文件时,只添加特定类型的文件(文件类型过滤器)

    编辑汇编代码时,在SIS里建立PROJECT并ADD TREE的时候,根据默认设置并不会把该TREE里面所有汇编文件都包含进来
    只加了.inc和.asm后缀的,.s后缀的没有。而且用SIS打开.s的文件,一片黑白没有色彩,感觉回到DOS的EDIT时代了……
    解决方法是在Options->Document Options里面,点左上的Document Type下拉菜单,选择x86 Asm Source File,
    然后在右边的File filter里*.asm;*.inc;的后面加上*.s;接着CLOSE就可以了。
    上面问题解决了,但注意加入*.s后还需要重新ADD TREE一遍才能把这些汇编加到PROJECT里面。

6、添加文件类型

    用户可以定义自己的类型,Options->Document Options->add type,定义文件类型名以及文件名后缀。
    勾选include when adding to projects在添加目录下文件到工程是该类文件就会添加进SI的工程。
    如果需要将所有文件添加进SI的工程,可以定义一种文件类型*.*。

7、恢复ctrl+a的全选功能

    通过关键词save 找到save all,更改为ctrl+shift+a,通过关键词select找到select all,更改为ctrl +a
 

Source Insight常用的快捷键:

    Ctrl+= :Jump to definition
    Alt+/ :Look up reference
    F3 : search backward
    F4 : search forward
    F5: go to Line
    F7 :Look up symbols
    F8 :Look up local symbols
    F9 :Ident left
    F10 :Ident right
    Alt+, :Jump backword
    Alt+. : Jump forward
    Shift+F3 : search the word under cusor backward
    Shift+F4 : search the word under cusor forward
    F12 : incremental search
    Shift+Ctrl+f: search in project
    shift+F8 : hilight word

Source Insight的窗口操作:
    project window Ctrl+O打开
    symbol window Alt+F8打开和关闭
    Contex Window 自定义键打开和关闭
    Relation Window 自定义键打开 先锁定再刷新联系

在Source Insight中添加自定义功能的步骤如下:
1.Source Insight中,Options->Custom Commands…->Add…,New Command name 随便写,我的是"Edit with Vim"
2.Run中写入: "C:\Program Files\Vim\vim63\gvim.exe" –remote-silent +%l %f
意思是在当前已经打开的gvim窗口里面打开当前的文件,并且跳转到指定行
%l为当前的行号,%f为文件名
使用 –remote-silent 的作用是,如果已经打开了对应文件,就不会打开第二次,而是在已经打开的文件里跳转到对应行
3.还是同一个对话框里面,选择Keys->Assign New Key…->按F12,如果你已经将F12设置给其他命令,选择其他的按键就行了

 

下面是一些常用自定义功能:( CUSTOM COMMANDS )

打开资源管理器并选中当前文件
ShellExecute open explorer /e,/select,%f
查看log
"C:\Program Files\TortoiseSVN\bin\TortoiseProc.exe" /command:log /path:%f /notempfile /closeonend
diff
"C:\Program Files\TortoiseSVN\bin\TortoiseProc.exe" /command:diff /path:%f /notempfile /closeonend
取得锁定(check out)
"C:\Program Files\TortoiseSVN\bin\TortoiseProc.exe" /command:lock /path:%f /notempfile /closeonend
提交(check in)
"C:\Program Files\TortoiseSVN\bin\TortoiseProc.exe" /command:commit /path:%f /notempfile /closeonend
更新(update)
"C:\Program Files\TortoiseSVN\bin\TortoiseProc.exe" /command:update /path:%f /notempfile /closeonend
更新整个目录(update all)
"C:\Program Files\TortoiseSVN\bin\TortoiseProc.exe" /command:update /path:*.* /notempfile /closeonend
取消锁定(undo check out)
"C:\Program Files\TortoiseSVN\bin\TortoiseProc.exe" /command:revert /path:%f /notempfile /closeonend
在ultriEdit中编辑
"C:\Program Files\UltraEdit-32/uedit32" %f
在vim中编辑并定位到当前行
"C:\Program Files\Vim\vim63\gvim.exe" –remote-silent +%l %f

汇总其他小技巧:

让{ 和 } 不缩进:

Options->Document Options->Auto Indent->Indent Open Brace/Indent Close Brace

hao space: SourceInsight 小技巧
1、按住"ctrl", 再用鼠标指向某个变量,点击一下,就能进入这个变量的定义。

2、今天把一个用sourceinsight排版整齐的C文件,偶然用VC打开一看,全乱了。研究了半天,发现SI对每个字符的宽度不太一致。
    请教同事发现选上"view –> draft view", 就可以让每个字符的宽度一致了。快捷键是 "Alt + F12"

3、"shift+F8" 标亮所有文本中光标所在位置的单词

4、跳到某一行:"ctrl + g"

Source Insight是阅读和编写代码的好东东,基本上也算得上是经典之作了,虽然还有一点点小bug,不过对于我们这些C程序员来说可是一旦拥有别无所求。下 列小技巧是在工作中同事整理总结的,对提高工作效率多少有点帮助,其中有些是对应于SVN的,没有使用SVN做版本管理的人就不要白费力气了。

ShellExecute open explorer /e,/select,%f
        /*作用是在资源管理器中打开当前编辑文件并选中*/
        /*可以设置快捷键如ctrl+e,这样能很方便的在资源管理器打开对应的文件,并进行tortoiseSVN的相关操作*/

X:\Progra~1\TortoiseSVN\bin\TortoiseProc.exe /command:log /path:% /notempfile /closeonend
        /*使用前注意更改对应的bin安装路径*/
        /*作用是直接查看当前文件的svn log*/
        /*可以设置快捷键如ctrl+l*/

X:\Progra~1\TortoiseSVN\bin\TortoiseProc.exe /command:diff /path:% /notempfile /closeonend
        /*使用前注意更改对应的bin安装路径*/
        /*作用是直接查看当前文件和基准版本的比较*/
        /*可以设置快捷键如ctrl+d*/

                                       Source Insight中的文件过滤器

遇到在新建工程的时候,需要加入一些除了.c .h 等之外的文件,比如.s,.scf ,Makefile和ReleaseNotes等文件,而每次新建工程的时候,即使取消了shown only known document types,和在点击Add All之后选择了Recusively add lower sub-directories ,也还是不能正常识别这类文件,也就不能加入进工程,只能我们自己手动双击添加到工程中,如果文件少还无所谓,但是包含了很多子文件夹的大工程,这样实在 不可行。

百度了下,终于发现解决办法了:

打开Source Insight,在新建工程之前,进入

Options -> Document Options… Alt-T    -> 点击Document Type的下拉框,然后选择Make File,在右边的File Filter中,在原先的*.mak后面加上一个分号,即多个不同过滤规则以分号间隔开,再加上*makefile,变成 *.mak;*makefile,并且选中Include when adding to projects,这样,以后再新建工程的时候,就可以识别makefile或Makefile了(好像此处Source Insight并不区分大小写)。

类似的原理,给其他你想要加入的不同的类型的文件,分别加入到原先的一些文件类型后面,注意要用分号隔开,或者直接新建一个文件类型,然后写上对应的顾虑规则,比如

点击 Add Type,填入新文件类型的名字Scatter File,File Filter中写上*.scf,注意再选中下面的Include when adding to projects,这样就建立了一个新的文件类型, 以后新建工程加入文件时候,系统就能够识别后缀是scf的文件了。

当然感兴趣的,还可以对你新建立的文件类型进行一些格式化设置。包括Parsing,Tab等等设置。

 

2011年5月17日星期二

js Firefox 加入收藏夹功能代码 兼容Firefox 和 IE

最近改用Firefox后,发现很多网站的"加入收藏"链接点击无效了,后来发现原来是IE浏览器和Firefox浏览器的"加入收藏夹"的写法是不同的。

1、IE浏览器加入收藏夹的代码
  window.external.addFavorite(sURL, sTitle);
参数:
sURL:添加到收藏夹的完整网站页面地址
sTitle:添加到收藏夹中的网站页面标题名称。
  示例:
<a href='#' onClick="javascript:window.external.AddFavorite('http://www.domain.com', '名字');">加入收藏</a>

2、Firefox浏览器加入收藏夹的代码
  Firefox中叫做加入书签(收藏夹),代码有两种方式,一种同IE浏览器的方法类似,只不过是window.external.AddFavorite换成了sidebar.addPanel,另外一种却十分简单,只需要加一个参数就可以了。
  第一种方法:
  window.sidebar.addPanel(sTitle, sURL, "");
参数
sURL:收藏的网站页面完整连接
sTitle:收藏网站页面的名称
  示例:
<a href='#' onClick="javascript:window.sidebar.addPanel('名字','http://www.domain.com','');">收藏本站</a>
这里要注意,addPanel函数的参数顺序与addFavorite刚好是相反的。
  第二种方法:
  在链接上添加rel="sidebar"属性
  示例:
<a href=http://www.domain.com title="名字" rel="sidebar">收藏本站</a>
注意:这里的title属性就是收藏网站页面的名称。
3、兼容Firefox和IE浏览器的方法
既然Firefox提供了两种方式,那么我们兼容Firefox和IE浏览器也可以用两种方法了。
第一种方法:
这里用了一个变通的方式来解决这个问题,代码比较清晰。这个是最好的方式了!


<script>
function addfavorite()
{
if (document.all)
{
window.external.addFavorite('http://www.domain.com','名字');
}
else if (window.sidebar)
{
window.sidebar.addPanel('名字', 'www.domain.com', "");
}
}
</script>
<a href="#" onclick="addfavorite()">加入收藏</a>

需要注意的是ie是域名在前面,firefox是域名在后门,最后留一个空字符。
第二种方法:
  这个是最简单的一个方法了,只有一句话。
   <a href='http://www.domain.com' onClick="javascript:window.external.AddFavorite('http://www.domain.com',' 名字');" title="名字" rel="sidebar">收藏本站</a>
但是这种方法有些问题,就是在IE下回同时打开链接中的地址。那么我们来优化一下!
  <a href="www.domain.com/" onclick="window.external.addFavorite(this.href,this.title);return false;" title='名字' rel="sidebar">加入收藏</a>
  这样就没问题啦,哈哈!同时兼容IE6、IE7、Firefox、Opera等浏览器。

SEO基础知识HTML的H标签全透视

在html里的每一个标签都有其自身的意义,而H标签作为标题标签,它的意义更是至关重要。对于H标签的用法特别是h1的用法一直是个争议的问题,也是值得我们研究的问题。我在总结了前人经验的基础上结合自己对H标签的理解,写下了这篇文章,希望对大家有所帮助。

什么是H标签?

W3C指出h1-h6标签可定义标题。h1定义最大的标题。h6定义最小的标题。

h1,h2,h3,h4,h5,h6,作为标题标签,并且依据重要性递减。我认为遵循这样的原则是很有必要的,它能让页面的层级关系更清楚,让搜索引擎更好地抓取和分析出页面的主题内容等等。为了更好的理解,请看下面的代码:

 

<body>    <h1>一级标题</h1>    <p>段落</p>    <div>       <h2>二级标题</h2>       <p>...</p>       <div>          <h3>三级标题</h3>          <p>...</p>          <div>             <h4>四级标题</h4>             <p>...</p>          </div>       </div>    </div> </body> 

浏览器的默认样式也是依据重要性递减,字号从h1到h6由大变小。而不同的浏览器中的样式又有一些差别,介于这种差别,我们通常在布局中用CSS将其统一。

大家怎么用的?

现在很多网站(包括淘宝、新浪、搜狐等知名网站),都喜欢把h1用在LOGO上, 如图:

大家都这样用,不无道理,其实优点蛮多的:它概括了整个页面的内容,而且LOGO离body很近,这样就方便了搜索引擎最快的抓取主题,再者从语义来说也更加精准。
当然也不是全部网站都将h1用在LOGO上,网易的用法就是比较特别的例子:
网易将h1设置了display:none样式,使其隐藏起来,这样既解决了h1不知道放哪里的矛盾又起到了SEO优化的作用,可谓一箭双雕。
而腾讯首页的h1则是头条新闻,如图:
从上面的例子可以看到各大网站对于h1的用法都有所不同,对于h1放哪里?一直是一个争议的问题,但我认为到底放哪里没有绝对的答案。我认为应 该根据网页 的定位、类型、用户搜索习惯等因素综合考虑。比如新闻类的网站,可以把h1放在头条新闻上;综合门户类的网站,那就把h1放在LOGO上吧;如果公司网站 也可以把h1放在LOGO上,因为用户搜索公司一般喜欢搜公司的名称;如果有网站宣传语,还可以把h1放在宣传语上,这也是不错的选择。总之,选择一种最 适合的才是最好的。
关于h2我一般喜欢把它用在首页的大栏目上,如图:
内容页,我更习惯把h2让给文章标题,栏目标题则用h3表示,如图:
h3多用于栏目标题,如图:
农信通产品首页用到的H标签,不仅有清晰的层级关系,而且突出了产品内容的重要性,对搜索引擎来说也非常有利。
 
下面这个例子也很有意思,如图:
栏目标题用了h2,新闻标题则用了h1,如果依照层级关系来说,它们的顺序颠倒了,但它并没有错,在实际运用H标签的时候,我们也可以根据内容的重要性来定义。所以只有在掌握好基础理论的基础上灵活的运用,才能把它的作用最大化。
 
从上面的几个例子中不难看出H标签的用法是很灵活的,并不是局限在这几种用法以内,我们在运用中只要遵循依据重要性递减的原则,举一反三,h4-h6亦是如此。
 
总结了一些些
 
根据参考资料、前端制作牛人、知名网站等对H标签的理解和运用,我总结了以下规范,希望能带给大家一些参考价值。
 
h1一级标题
 
代表重中之重,它的地位在页面中跟关键字的地位一样重要。一般运用于网站标题或者头条新闻上,一些大型网站也运用在LOGO上,虽然h1代码可以写多个,但实际语义上有唯一性,h1标题在一个页面里面最好只出现1次或者没有。
 
h2二级标题
 
主要出现在页面的主体内容的文章标题和栏目标题上,三列结构一般在中间,二列结构一般在重要的一边。可与h3搭配使用。
 
h3三级标题
 
一般主打页面的边侧栏。h4是它的辅助,出现频率不高。
 
页面层级关系不能太深,所以h4,h5,h6一般出现较少。
 

Css字间距调整

汉字间字间距设置:letter-spacing

英文间字间距设置:word-spacing:

H3 { word-spacing: 1em }

参数:

・  in (英寸)

・  cm (厘米)

・  mm (毫米)

・  pt (点数)

・  pc (打字机字间距)

・  em (ems)

・  ex (x-height)

・  px (象素)

示例:<html>

<style type="text/css">

<!--

    p.p1{word-spacing:5cm}

     p.p2{word-spacing:5mm}

     p.p3{word-spacing:5pt}

     p.p4{word-spacing:5px}

     p.p5{word-spacing:5in}

     p.p6{word-spacing:5pc}

    

-->

</style>

<head>

     <title>CSS</title>

</head>

<body>

     <p>Welcome to Magci's BLOG!</p>

     <p class="p1">Welcome to Magci's BLOG!</p>

     <p class="p2">Welcome to Magci's BLOG!</p>

     <p class="p3">Welcome to Magci's BLOG!</p>

     <p class="p4">Welcome to Magci's BLOG!</p>

     <p class="p5">Welcome to Magci's BLOG!</p>

     <p class="p6">Welcome to Magci's BLOG!</p>

</body>

</html>

Web UI 设计命名规范

.网站设计及基本框架结构:


1.    Container
“container“ 就是将页面中的所有元素包在一起的部分,这部分还可以命名为: “wrapper“, “wrap“, “page“.
2.    Header
“header” 是网站页面的头部区域,一般来讲,它包含网站的logo和一些其他元素。这部分还可以命名为:“page-header” (或 pageHeader).
3.    Navbar
“navbar“等同于横向的导航栏,是最典型的网页元素。这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.
4.    Menu
“Menu”区域包含一般的链接和菜单,这部分还可以命名为: “subNav “, “links“,“sidebar-main”.
5.   Main
“Main”是网站的主要区域,如果是博客的话它将包含的日志。这部分还可以命名为: “content“, “main-content” (或“mainContent”)。
6.   Sidebar
“Sidebar” 部分可以包含网站的次要内容,比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为: “subNav “, “side-panel“, “secondary-content“.
7.    Footer
“Footer”包含网站的一些附加信息,这部分还可以命名为: “copyright“.

二.需要注意的几点:

1.尽量考虑为元素命名其本身的作用或”用意”,达到语义化。不要使用表面形式的命名.
如:red/left/big等。

2.组合命名规则:
[元素类型]-[元素作用/内容]
如:搜索按钮: btn-search
登录表单:form-login
新闻列表:list-news

3.涉及到交互行为的元素命名:
凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式,命名可参考以下规则:
鼠标悬停::hover   点击:click   已浏览:visited
如:搜索按钮: btn-search、btn-search-hover、btn-search-visited

三.Photoshop图层结构规范:

Photoshop图层命名遵循树形结构,凡某元素组成的图层大于3层,即可形成组,所有图层尽量避免使用默认命名(图层+编号)。

第一级图层结构如下图:


第二级结构图例(医院网站):


第三级结构图例及效果图对比(医院新闻栏目):


效果图


图层命名结构

四.常用命名汇总:

页头:header
登录条:loginbar
标志:logo
侧栏:sidebar
广告条:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
下拉菜单:dropMenu
工具条: toolbar
表单:form
栏目:column
箭头:arrow
搜索:search
搜索按钮:btn-search
滚动条:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
链接:links
页脚:footer
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
版权:copyright
网站地图: sitemap

通俗易懂的Wordpress函数详解

在讲述下面的WordPress函数之前,我们需要明确这样一点,所有的 WordPress函数都是已经定义好的PHP函数,它们都需要写在PHP 语句中(<?php ?>)才能执行;而且,所有这些函数在PHP语句中都应以分号";"结尾。其实,为了用好这些函数,为你的WordPress服务,你最好具有 PHP语言的基础。

1.bloginfo()

顾名思义,该函数主要用来显示博客信息;而且根据参数的不同,可以用来显示博客信息中的不同部分。常用的有以下几种:

bloginfo('name') 显示博客题名,如"月夜";默认(不写参数)输出该项;

bloginfo('description') 显示博客描述部分,如"分享网络知识・享受快乐生活";

bloginfo('url') 输出博客URL地址,如http://www.yueye.org

bloginfo('rss2_url') 显示博客的RSS2.0 feed地址,如http://www.yueye.org/feed

bloginfo('template_url') 用来获取WordPress博客的模板地址;

bloginfo('charset') 显示博客的编码方式,如"UTF-8";

一种常见的使用bloginfo()函数的组合如下:

<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('description'); ?>" ><?php bloginfo('name'); ?>

在月夜博客中,如上信息输出形如月夜的样式。这种形式通常会用来添加博客的底部信息,如Copyright @ 月夜,经常在主题模板中使用。

需要注意的是bloginfo()函数只能输出显示这些参量,如果你想在PHP语句中使用得到的这些值,则需使用get_bloginfo()函数,该函数和bloginfo()使用相同的参数,获得相同的结果。

2.wp_title()

该函数用来显示页面的标题,如在文章页面,则显示文章标题;在分类页面,则显示分类名称;等等。

wp_title()函数可以跟三个参数,即wp_title('separator',echo,seplocation),其中 separator是title和其余部分之间的分割符号,默认是>>;echo是个bool变量,取true显示标题,取false则将标 题作为一个PHP参量返回;seplocation定义分隔符的位置,取right定义分隔符在标题后面,取其他任何值,都表示将分隔符放在标题前面。

比如形如主题文件夹下header.php中的一段代码:

<title>
<?php wp_title(' | ',true,'right'); ?>
<?php bloginfo('name'); ?> � <?php bloginfo('description'); ?>
</title>

在博客首页可以显示这样的效果"月夜 � 分享网络知识・享受快乐生活";在文章页,可以显示这样的效果"用好WordPress不可不知的50个函数 | 月夜 � 分享网络知识・享受快乐生活";而在分类页面,则可以显示这样的效果"网站相关 | 月夜 � 分享网络知识・享受快乐生活";等等。

3.wp_get_archives()

该函数用来获取博客的文章存档,通过设置函数的参数,可以按各种方式获取,如按月,按年等等。

wp_get_archives()函数后面同样可以跟多种参数,只不过所有参数都需要使用&连接,并放在单引号(')中以字符串方式传递 给函数,形如wp_get_archives('type=monthly&format=html& show_post_count=1&limit=10′)。

如上的参数意义描述如下:

type=monthly表示按月显示文章存档,可以使用yearly、daily、weekly等代替monthly表示按年、日、以及周显示文章存档;

format=html表示使用通常的HTML中<li>格式化文章列表;

show_post_count=1表示在文章存档后面显示属于该类别(年、月等)的文章数量,该参量是个bool值;

limit=10表示显示的文章存档的最大数量为10,超过次数,则超出部分不显示;

尽管参数稍多,显得略为复杂,但其实只需注意type、show_post_count以及limit等三个参量即可。

4.wp_list_categories()

和wp_get_archives()函数类似,wp_list_categories()函数用来获取博客文章的分类信 息,并可以通过设置适当的函数参数,将其显示出来。该函数的参数和wp_get_archives()函数类似,都需要使用&连接,放在单引号 (')中以字符串方式传递。形如wp_get_archives('orderby=name&order=ASC& show_count=1&use_desc_for_title=1&feed=订阅&exclude=2,5& number=10′)。

如上示例中,函数各参数的意义如下:

orderby=name表示按照分类名称的字母先后顺序显示分类信息,可以将name换为ID等;

order=ASC表示按照分类名称的字母的升序显示分类信息,将ASC改为DESC表示按降序;

show_count=1在每个分类名称后面显示属于该分类的文章数;

use_desc_for_title=1使用该分类的描述信息为每个分类名称超链接添加一个title属性;

feed=订阅:在每个分类信息旁边添加一个名为"订阅"的超链接,提供该分类的RSS订阅;

exlude=2,5:在显示的分类中去除ID为2和5的分类;也可以用include=2,5表示只显示ID为2和5的分类;

number=10:表示只显示最先的10个分类。

5.get_the_category()

get_the_category()函数用来返回当前文章所属的类别的若干属性所组成的一个数组,该数组包括以下内容:

cat_ID:当前类别的ID(也可以写作'term_id');

cat_name:当前类别的名称(也被写作'name');

category_description:当前分类的描述(也可以写作'description');

category_count:属于当前分类的文章数量(也被写作'count')。

具体的使用方法,我们通过下面的几个句子来说明:

形如get_the_category()->cat_ID的语句,返回当前文章所属分类的ID号;

形如get_the_category()->description的语句,返回当前文章所属分类的描述;等等。

6.the_category()

该函数返回当前文章所属的类别名称,而且是文章类别的超链接形式。

默认的无参数形式the_category()直接以超链接形式显示类别名称,显示为:精品推介;

可以在函数中跟上分隔符等参数来格式化输出,如the_category('-'),若当前文章属于两个以上分类,可以显示这样的形式:精品推介-经验知识;如只属于一个分类,则显示为这样的形式:精品推介。

7.category_description()

该函数以分类的ID为输入,得到该分类的描述。常和echo、get_the_category()配合使用,将当前分类描述输出:

echo category_description(get_the_category()->cat_ID);

如上语句,get_the_category()得到保存有当前分类信息的一个数组;cat_ID为该数组中该分类的ID;将该ID输入给category_description()函数,即可得到该分类的描述;然后使用echo将其输出。

但经月夜试验,使用如下的语句可以实现和上面语句相同的功能:

echo category_description();

这可能是因为该函数在默认无参数输入的情况下会输出当前分类描述的结果吧。

8.is_home()

is_home()用以判断当前显示的博客页面是否是博客首页,返回的是一个Bool值。如果是在首页,则返回TRUE;否则返回FALSE。

该函数常用来控制博客侧边栏的显示方式,经常使用如下代码段:

<?php
if ( is_home() ) {
//此为在博客首页应该显示的内容
} else {
//此为非博客首页应该显示的内容
}
?>

9.is_archive()

is_archive()用以判断当前显示的内容是否是博客存档页面,比如按日期的存档,或者按分类的存档,等等;其和is_home()函数一样,返回一个Bool值。

10.is_page()

is_page()函数判断当前显示的内容是否是博客的独立页面(page),如"月夜私语"、"关于月夜"等页面;它也返回一个Bool值。

我们可以在模板中通过该函数判断当前是否是一个独立页面,从而决定是否为当前显示的文章显示发布时间等等。

11.is_paged()

该函数用以判断当前文章是否因为内容过多而分页显示;需要注意的是,如果你在写文章时手动添加了<!�nextpage�>标签,来强制分页的话,该函数并不会因此而返回TRUE。

12.is_page_template()

is_page_template()函数需要跟一个参数,通常以如下方式使用:

is_page_template('guestbook.php');

藉此判断当前显示的独立页面(page)是否使用了参数所示的模板guestbook.php;如果不跟参数,函数返回当前独立页面是否使用了模板。

13.is_single()

is_single()用以判断当前显示的页面内容是否是一篇单独的文章。其后面可以跟三种参数,一种是文章ID;一种是 文章题目(title);一种是文章名称(slug,文章题目的一种简短说明形式);或者可以将三种参数组合使用,藉此来判断当前页面内容是否是具体的某 篇文章。

一个简单的例子如下,我们可以通过如下几种方式判断当前显示的内容是否是本文:

is_single('808′);
is_single('用好WordPress不可不知的函数(二)');
is_single('functions-must-known-using-wordpress-second');
is_single('808′,'用好WordPress不可不知的函数(二)','functions-must-known-using-wordpress-second');

在这里,月夜需要对上述最后一种方式做些说明:该函数后跟三个参数时,有优先级,如果第一个参数符合条件,则返回TRUE;否则,则返回FALSE;貌似后面的参数并没有什么意义。

14.is_category()

该函数用以判断当前显示的页面内容是否是一个分类页面,如网站相关;其中无需参数。函数返回一个Bool值。

15.is_tag()

is_tag()用以判断当前显示的页面是否是一个标签页面,比如WordPress;其后也不需要跟参数。该函数同样返回一个Bool值。

16.is_date()

此函数用以判断当前显示的内容是否为按时间归档的页面,比如2009年四月,或者2009年4月8日,等等。

17.is_day()、is_month()、is_year()

这些函数用以判断当前显示的内容是否为按天、按月、按年份归档的页面。它们和is_date()类似,只不过将归档时间更具体化而已。

18.is_author()

该函数用以判断当前显示的内容是否为以作者名归档的页面,比如月夜博客的admin作者页面。

19.is_admin()

is_admin()函数用以判断当前是否在控制面板页面,或者管理员面板页面。

20.get_bloginfo()

该函数和我们前面的文章用好WordPress不可不知的函数(一)中介绍的bloginfo()函数实现近乎相同的功能。主要用来显示博客的信息;而且根据后跟参数的不同,会输出博客的不同信息。

其后不跟参数时,get_bloginfo()可以显示博客名称,形如"月夜";

后跟其他参数时,可以显示对应的信息,比如get_bloginfo ( 'description' )用以显示博客描述信息;

其他还可以使用的参数包括name、url、wpurl以及admin_email等等。但因为其与bloginfo()函数实现相同的结果,所以,在bloginfo能够实现的情况下,月夜不推荐使用get_bloginfo()函数。

21.query_posts()

query_posts()函数结合适当的参数用来控制哪些文章会在页面上显示。

形如query_posts("cat=3,6&cat=-5,-10″)表示取分类ID为3和6的文章显示,不取分类ID为5和10的文章显示;

形如query_posts("order=ASC&showposts=10&offset=1&orderby=date&posts_per_page=5″)意义如下:

order=ASC表示按照升序排列,取为DESC则表示按降序;

showposts=10则表示获取10篇文章;

offset=1表示取最新的文章;

orderby=date表示将文章按照日期排序;

posts_per_page=5表示每页显示5篇文章。

需要注意的是该函数只是将文章内容从MySQL数据库中查询出来,要将其显示,还需要与其他语句配合,比如一个经常在侧边栏中使用的形式如下:

<li><h2>最近文章</h2>
<?php query_posts('showposts=5&offset=1′); ?>
<ul>
<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></li>
<?php endwhile;?>
</ul>
</li>

如上的这段代码用以在侧边栏的指定位置上显示最新的5篇文章。

query_posts()函数后面可以跟众多种类的参数,功能十分强大,在此,我们不进行过多介绍。如果时间和精力允许,月夜会在以后的文章中专门撰文详细地为朋友们做一介绍。

22.get_posts()

该函数和query_posts()函数功能大体相同,都是用来从数据库中查询并得到符合某条件的文章。不过get_posts()函数的使用有一个固定的形式,如下:

<?php
$lastposts = get_posts('numberposts=5′);
foreach($lastposts as $post) : setup_postdata($post);
?>
<h2><a href="<?php the_permalink(); ?>" id="post-<?php the_ID(); ?>"><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php endforeach; ?>

即首先使用get_posts()函数查询得到文章数据,然后使用形如foreach($lastposts as $post) : setup_postdata($post);的循环将查询得到的文章内容显示出来。

get_posts()函数使用和query_posts()函数相同的参数,在此我们也不再作详细介绍。

23.wp_list_cats()

该函数和前文用好WordPress不可不知的函数(一)中wp_list_categories()函数实现相同的功能,不过在最新的WordPress版本中,此函数已经被弃用,其功能为wp_list_categories()函数完全取代。

24.get_calendar()

get_calendar()函数用以在WordPress上显示日历,日历样式和使用widget显示的效果相同,如下图所示:

其后可以跟一个BOOL参数,用以控制日历上方星期的显示样式。但经月夜测试,在中文状态下,使用TRUE或FALSE参数,日历的显示效果并没有什么区别。

25.wp_list_bookmarks()

该函数用来显示博客的友情链接,并可以使用各种参数来控制显示的数量、种类以及样式等等。

形如wp_list_bookmarks('title_li=&categorize=0&orderby=rand&include=41,40,37,54′);的形式,意义解释如下:

title_li=&categorize=0是一种通常使用的组合,意为不显示WordPress后台控制面板中设置的友情链接标题,但所有友链都按照设置的分类显示出来;单独的一个title_li=还可以用来设置被显示友链的类别名称;

orderby=rand设置友链的显示方式为随机顺序,当然,还可以设置为其他的方式,比如id、url、name等等;

include=41,40,37,54表示只显示ID为这四个数字的四个友链;与此对应,还支持使用exclude,表示不显示ID为多少的友链。

此外,该函数还经常用到的参数有before和after,用来设置每个链接前后的文字,默认的是<li>和</li>标记。

26.get_links()、wp_get_links()

这两个函数实现和25.wp_list_bookmarks()相同的功能,不过此二函数已在WordPress升级的过程中为25.wp_list_bookmarks()所取代。

27.wp_list_pages()

该函数以页面名称的超链接形式显示WordPress博客内的所有页面,经常用来建立顶端导航页面,或用来修饰侧边栏。

形如wp_list_pages('title_li=&sort_column=menu_order&include=12,25,38,57&depth=1&');的函数调用,各参数意义如下:

title_li=用来设置所有显示页面的一个总名称;后面没有参数值时,表示不显示名称;

sort_column=menu_order用来设置页面的显示顺序,表示按照WP后台设置的各页面顺序显示,其他的常用顺序设置可能还包括post_title、post_date、ID等等;

include=12,25,38,57表示只显示ID为这四个数值的四个页面;同样,可以使用exclude来排除相应ID的页面;

depth=1表示只显示父页面,对所有子页面不予显示;其他数值还包括默认的0,表示显示所有页面(子页面有缩进);-1显示所有页面(子页面无缩进);等等。

此外,该函数可能会用到的属性还包括link_before和link_after,用于设置显示的页面链接前后的字符。

28.wp_tag_cloud()

顾名思义,wp_tag_cloud()函数用来显示WordPress博客的标签云。

一种形如wp_tag_cloud('smallest=8&largest=22&number=30&orderby=count');的函数调用,各参数的意义如下:

smallest=8用来设置标签云中显示出来的所有标签中,计数最少(最少文章使用)的标签的字体大小为8;

largest=22用来设置标签云的所有标签中,计数最多(最多文章使用)的标签的字体大小为22;

number=30设置标签云中显示的最多标签数量为30;

orderby=count设置标签云中标签的排序方式为计数(默认),而不是名称(相应参数为name,widget调用时的默认值)。

其他常用的参数还包括include和exclude,用来设置在标签云中是否包含或去除ID为某数字的标签。

29.wp_register()

wp_register()函数用以向管理员显示"站点管理"超链接;或者当WP博客开放了注册时,向未登陆的用户显示"注册"超链接。

该函数不需要什么参数,唯一可能用到的参数形式如wp_register('前','后'),可以在如上显示的超链接文字的前后分别显示一个"前"字和一个"后"字。当然,你可以据此发挥想象力来个性化自己网站的管理或注册链接。

30.wp_loginout()

该函数用来在指定位置显示一个"登录"链接;当然,如果你已经登录过了,则会相应地显示一个"退出"链接。此函数后面不使用任何参数,所以无法进行灵活的自定义。

不过如果你想自定义自己的WP博客的登录或退出链接文字的话,还是可以使用下面31中 月夜 介绍的函数wp_logout_url()和wp_login_url()。

31.wp_logout_url()、wp_login_url()

使用如上30中的函数尽管可以方便地为WP博客设置登录、退出链接,但自定义不够灵活。所以,从WordPress 2.7版本开始,提供了这里的两个函数。它们分别用来获取WP博客退出或登录超链接,然后,我们使用获得的超链接即可编写如下代码,来对WP博客的登录和 退出链接进行灵活设置:

<a href="<?php echo wp_logout_url(); ?>">点击这里退出

<a href="<?php echo wp_login_url(); ?>">点击这里登录

当然,要想实现完美的效果,还需要对访客的登录状态进行判断,使用一个if语句,根据登录状态显示相应的菜单项。

32.wp_meta()

该函数通常会紧跟如上29、30中的函数后面,其具体在直观显示上没有什么异样,貌似是WP主题为WP插件留下的API Hook,月夜建议朋友们在如上函数后面跟上这一函数。

33.get_recent_posts()

该函数只有当你安装了中文WordPress工具箱之后,才能使用。其作用是用来获取最新日志,函数原型如下:

get_recent_posts($no_posts = 5, $before = '<li>+ ', $after = '</li>', $show_pass_post = false, $skip_posts = 0)

可以使用$no_posts控制显示文章数量,$before和$after的意义和前面函数中相同;至于后两个参数,一般不必设置,直接取默认值即可。

不过因为该函数与WordPress内置的get_posts()和query_posts()函数功能重复,所以通常情况下很少使用。

34.get_recent_comments()

其实安装了如上的中文WordPress工具箱之后,最常使用的是这个函数,因为WordPress程序本身没有内置获取最新评论的函数。该函数原型如下:

get_recent_comments($no_comments = 5, $before = '<li> ', $after = '</li>', $show_pass_post = false)

意义显然,和上面函数类似,月夜此处不再赘言。

35.get_recentcomments()

该函数是在安装了WP-RecentComments插件之后才具有的功能,与如上34中的函数类似。

该函数原型如下:

get_recentcomments(int num, int size)

num表示返回的最新评论数量;size表示返回的评论内容的长度。

36.wp_get_post_tags()

该函数用来在某个文章页面或者根据某篇文章的ID来获取该文章的tag,获取的结果被放置到一个tag数组中。一个常见的使用方式如下:

if (is_single()){
$keywords = "";
$tags = wp_get_post_tags($post->ID);
foreach ($tags as $tag ) {
$keywords = $keywords . $tag->name . ",";
}
echo $keywords;
}

首先判断是否是单文章页面,如果是,则据当前文章的ID($post->ID)来获取当前文章的tag,然后取得其name($tag->name),并将其组合输出。

37.single_cat_title()、single_tag_title()

如名所言,这两个函数用来获取分类页面和tag页面的title,其通常的使用方式如:

<?php
$str = single_cat_title();
echo $str;
?>

<?php
$str = single_tag_title();
echo $str;
?>

然而,除此之外,single_cat_title()还可以用来在tag页面上获取当前页面的title;但single_tag_title()却不可用于获取分类页面的title。

38.get_settings()、get_option()

此二函数与前文用好WordPress不可不知的函数(三)中函数20.get_bloginfo()类似,使用方法也相同,可以通过后跟各种参数来获取WordPress博客的相关信息。

比如如下的调用方式:

get_settings('name')或get_option('name')

可以用来获取当前WordPress博客的标题。

39.wp_head()

该函数与前文用好WordPress不可不知的函数(五)中函数32.wp_meta()相同,是WP主题为WP插件留下的API Hook。

40.get_header()、get_footer()、get_sidebar()和comments_template()

这几个函数是用来在WordPress主题中获取并包含相应的文件的。比如:

get_header()用来包含当前主题文件夹下的header.php;

get_footer()用来包含主题文件夹下的footer.php;

get_sidebar()用来包含主题文件夹下的sidebar.php;

comments_template()用来包含comments.php。

需要注意的一点是,如果当前主题文件夹下缺少对应的文件,则函数会使用wp-content/themes/default/文件夹下的对应文件代替。

此外,以上函数后面都不能跟参数,只有get_sidebar()例外,因为一个主题中可以使用多个sidebar。形如get_sidebar('up')的调用方法可将sidebar-up.php侧边栏模板文件包含到主题中。

除了以上几个函数之外,在主题中如果想包含一个具体的文件,还可以使用如下方式:

include(TEMPLATEPATH . '/***.php')

如上的函数形式可以将当前主题文件夹下名为***.php的文件包含进来;其中TEMPLATEPATH是当前主题文件夹地址的一个(不含末尾的/,所以需要添加上)。

41.have_posts()、the_post()

这两个函数的使用范围有限,通常在WordPress的循环中使用,用以获取所有文章。其固定使用形式如下:

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
此处显示文章
<?php endwhile; ?>
<?php else : ?>
此处显示未找到文章时的信息,比如404相关
<?php endif; ?>

另一种常见的形式是将如上代码中的前两行组合起来(其他地方不变):

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

该形式通常会在模板的index.php、archive.php或者single.php等页面使用。除此之外的其他地方,我们通常不会看到此二函数的身影。

42.the_title()、the_title_attribute()

the_title()函数主要用来获取当前文章的title,其后可以跟上三个参数(可全部省略,取默认值),调用形式如下:

<?php the_title('before', 'after', display); ?>

参数before用来设置在获取的title前面显示的字符内容;after用来设置title其后显示的内容;而display是一个Bool值,用于控制获取的title是否显示出来。

the_title_attribute()函数与the_title()类似,其使用方法如下:

the_title_attribute('before=前&after=后&echo=true')

其中before=和after=分别用于设置title前面和后面显示的字符;echo=true或者false用户设置获取的title字符串是否显示出来。

形如<?php the_title('当前文章', '的评论:', true); ?>或the_title_attribute('before=当前文章&after=的评论:&echo=true')的调用形式将会显示如下的结果:

当前文章用好WordPress不可不知的函数(七)的评论:

43.single_post_title()、single_tag_title()、single_cat_title()

这一系列函数用于获取当前文章页面、tag页面或分类页面的title字符串。其后可跟两个参数,调用形式如下:

<?php single_post_title('前缀',display); ?>

可以使用形如<?php single_post_title('当前文章:',TRUE); ?>或<?php single_post_title('当前文章:'); ?>的调用形式来显示如下的结果:

当前文章:用好WordPress不可不知的函数(七)

此外,也可以像42中的函数一样,将显示属性设置为false,把获取的title字符串传给一个变量,以供其他语句使用。此时的调用形式如下:

<?php $tt = single_post_title('当前文章:',false); ?>

44.the_ID()

该函数后面不跟任何参数,使用如下所示的调用方式:

<?php
$id = the_ID();
echo $id;
?>

用于获取并显示当前文章页面的ID号。不过需要特别注意的一点是,该函数只能在WordPress的大循环内使用,在其他地方使用可能也会显示ID号,但显示的内容始终不会随文章而改变。

此外,该函数通常还会在如下所示的CSS结构中使用:

<h2 id="post-<?php the_ID(); ?>">
<?php the_title(); ?>
</h2>

可为博客中不同的作者设置不同的title样式,以示区分。

45.get_the_ID()

该函数与44.the_ID()函数实现完全相同的功能,目前WordPress官方也没有提供该函数的使用说明。你可以参阅如上44中对the_ID()函数的介绍。特别提醒一点,该函数与the_ID()类似,也只能在WordPress的大循环中才能正确使用。

46.the_time()、get_the_time()

the_time()用来获取并显示当前文章发布的时间,和上面几个函数类似,此函数也是只能在WordPress的大循环中使用。

该函数后面可以跟控制日期或时间格式的参数,常用的参数形式如下:

如<?php the_time('F j, Y'); ?>的调用形式显示效果为:六月13, 2009(英文状态下显示June 13, 2009);

如<?php the_time('g:i a'); ?>的调用形式显示效果为:7:09 下午(英文状态下显示7:09 pm);

如<?php the_time('G:i'); ?>的调用形式显示效果为:19:09。

事实上,除了使用the_time()函数之外,WordPress还提供了一个具有类似功能的get_the_time()函数。该函数除了不具 有the_time()函数的显示功能之外,其余功能二者完全相同。使用get_the_time()函数时,如欲将获取的时间显示出来,需要使用专用语 句。

下面,我们籍此机会来简单了解一下WordPress中时间的格式。在WordPress中,通常用于控制时间格式的有一下字符:l, F, j, S, Y, G, g, i, a等等,其详细意义如下:

l(小写L)用来显示一周之中每一天的名称,比如星期六,或者在英文中显示Saturday;

F用来显示月份名称,比如六月,或者June;

j用来显示一月之中的某一天,比如13;

Y用来以4位数字形式显示年份,使用y则以末两位数字显示年份,比如2009或09;

G, g, i, a等四个字符通常组合使用,如前例子,有两种形式:

g:i a以形如7:09 下午或7:09 pm的形式显示时间;

G:i以形如19:09的24小时进制形式显示时间。

S通常紧跟在j后面,表示是否在一月之中某天之后添加英文后缀(st, nd, th等)。

写给设计人的10个jQuery特效

jQuery已经不是什么新鲜的事儿,记得第一次听说是在catch the digital flow上。总把它认为是非常难的东西,也就没有认真去了解他了。直到学完CSS的大部分内容,才开始接触这种"write less, do more" 的Javascrīpt框架。今天,这篇文章的最重要内容是来自Web Designer Wall的一篇教程,一篇包含了10个jQuery特效的教程。这里不打算全文翻译,想以自己的语言来表达,或许这样更方便大家理解/自己以后学习,也可能更准确地描述。

提示:教程中所用的 jQuery 版本为1.2.3。这篇文章是为jQuery新手而写的。

先试试看? View jQuery DemosDownload Demo ZIP

jQuery是如何工作的?

首先,你需要下载一个jQuery版本,并将它插入到<head>标签内。然后,你将需要写函数来告诉jQuery做些什么,下面的这个图表将告诉你jQuery是怎样工作的(点击图片,查看大图):

jquery-how-it-works

如何获取元素(Get the element)?

书写 jQuery 函数是一个非常简单的事(多亏了精彩的说明书)。关键是你要学习如何获取你想要实现的效果的确切元素。

  • $("#header") = 获取 id="header" 的元素
  • $("h3") = 获取所有<h3>
  • $("div#content .photo") = 获取<div id="content">里所有用class="photo"定义的元素
  • $("ul li") = 获取所以 <ul> 中 <li> 的元素
  • $("ul li:first") = 只获取<ul>中第一个<li>

1. 简单的下拉面板

让我们来开始这个简单的下拉面板特效吧(view demo),或许你已经见过很多次,现在,自己试试吧:

sample1

当包含class="btn-slide"的元素被点击,它会下拉/上提<div id="panel">里的元素。然后切换到CSS中的class="active"到<a class="btn-slide">元素。.active 将会以CSS的方式打开/关闭出面板。

$(document).ready(function(){

$(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); });

});

2. 简单的隐藏效果

如图,当右上角的上图标被点击时,内容被隐藏。效果可以看Demo (view demo)

sample2

当被定义为 <img class="delete"> 的图片被点击,它会手找到父级元素 <div class="pane"> 并激活它的能力,慢慢消失,隐藏起来。

$(document).ready(function(){

$(".pane .delete").click(function(){ $(this).parents(".pane").animate({ opacity: "hide" }, "slow"); });

});

3 连续过渡效果

让我们来看看jQuery连贯性的威力吧。只需要几行代码,我能让这个方块渐变+缩放比例地飞来飞去(view demo)

multi-animation

Line 1: 当 <a class="run"> 被点击
Line 2: 激活 <div id="box"> 的不透明度(opacity)=0.1,直到值达到400px,速度达到1200px/ms
Line 3: 当opacity=0.4, top=160px,height=20,width=20,以"slow"显示
Line 4: 当opacity=1, left=0, height=100, width=100,也以"slow"显示
Line 5: 当opacity=1, left=0, height=100, width=100, 也以"slow"显示
Line 6: 当top=0, 以"fast"显示
Line 7: 然后,以常速上滑 (default speed = "normal")
Line 8: 然后以"slow"下滑
Line 9:返回失效会阻止浏览器跳向链接锚点

$(document).ready(function(){

$(".run").click(function(){

$("#box").animate({opacity: "0.1", left: "+=400"}
, 1200) .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow") .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow") .animate({top: "0"}, "fast") .slideUp() .slideDown("slow") return false;

});

});

4a. 可折叠的模式 #1

这是第一个可折叠的样式, (view demo)

sample3

第一行将向<div class="accordion"> 内的第一个<H3> 添加一个CSS class为"active"的值。 第二行刚是隐藏<div class="accordion">内非第一个< p >的内容。

当 <h3> 被点击时,当前<p>下拉,而原先下拉的<p> 上提。

$(document).ready(function(){

$(".accordion h3:first").addClass("active"); $(".accordion p:not(:first)").hide();

$(".accordion h3").click(function(){

$(this).next("p").slideToggle("slow") .siblings("p:visible").slideUp("slow"); $(this).toggleClass("active"); $(this).siblings("h3").removeClass("active");

});

});

4b. 可折叠模式 #2

这个实例与#1非常类似,不过,它会让指定的面板像默认面板一样打开(view demo)

在CSS样式表中,设置.accordion pdisplay:none。现在,如果你像默认打开的样式一样,打开第三个面板,你可以写$(".accordion2 p").eq(2).show(); (eq = equal)来实现它,需要注意的是起始点是"0",而不是"1",所以,第三个相应的是"2",而不是"3"。

$(document).ready(function(){

$(".accordion2 h3").eq(2).addClass("active"); $(".accordion2 p").eq(2).show();

$(".accordion2 h3").click(function(){ $(this).next("p").slideToggle("slow") .siblings("p:visible").slideUp("slow"); $(this).toggleClass("active"); $(this).siblings("h3").removeClass("active"); });

});

5a. 鼠标经过激活效果 #1

这个将会实现一个非常漂亮的,当鼠标经过时出现渐变出现的效果 (view demo)

sample4

当鼠标经过菜单时,它会寻找紧接着的<em>,并在上方激活它的不透明度。

$(document).ready(function(){

$(".menu a").hover(function() { $(this).next("em").animate({opacity: "show", top: "-75"}, "slow"); }, function() { $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast"); });

});

5b. 鼠标经过激活 #2

这个实例会显示菜单中链接的title 属性attribute,让其以变数方式存在,并添加<em>标签 (view demo)

sample4b

第一行会添加一个空的<em>到菜单的<a>元素。

当鼠标经过菜单链接时,它会显示title的属性,让它以"hoverText(隐藏)"的形式显示,并使<em>中的文字显示隐藏文本的值。

$(document).ready(function(){

$(".menu2 a").append("<em></em>");

$(".menu2 a").hover(function() { $(this).find("em").animate({opacity: "show", top: "-75"}, "slow"); var hoverText = $(this).attr("title"); $(this).find("em").text(hoverText); }, function() { $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast"); });

});

6. 整块可点击性效果

这个实例将会教你如何实现内容中元素可点击性效果,Best Web Gallery的侧边栏Tab就显示这样的效果 (view demo)

sample5

如果你想让class="pane-list"的<ul>内的 <li> 可点击(整块),你可以向 ".pane-list li"指派一个函数,使它被点击时,函数找到 <a>元素,重定向到它的href属性值。

$(document).ready(function(){

$(".pane-list li").click(function(){ window.location=$(this).find("a").attr("href"); return false; });

});

7. 可收缩面板

让我们组合一下上面的实例,创造一给可收缩的面板(像Gmai收件箱面板l)。作者还在Web Designer Wall 的评论列表Next2Friends里应用这个(view demo)

sample6

First line: 隐藏<div class="message_body">里第一个元素以后的元素
Second line: 隐藏所有第5个<li>后面的元素
Third part: 当<p class="message_head">被点击里,显示/隐藏<div class="message_body">
Fourth part: 当<a class="collpase_all_message"> 被点击时,上提所有<div class="message_body">的元素
Fifth part: 当<a class="show_all_message"> 被点击,隐藏它,并显示<a class="show_recent_only">,并下拉第5个<li>以后的元素
Sixth part: 当<a class="show_recent_only"> 被点击时,隐藏它,并显示<a class="show_all_message">,并上提第5个 <li>以后的元素

$(document).ready(function(){

//hide message_body after the first one $(".message_list .message_body:gt(0)").hide();

//hide message li after the 5th $(".message_list li:gt(4)").hide();

//toggle message_body $(".message_head").click(function(){ $(this).next(".message_body").slideToggle(500) return false; });

//collapse all messages $(".collpase_all_message").click(function(){ $(".message_body").slideUp(500) return false; });

//show all messages $(".show_all_message").click(function(){ $(this).hide() $(".show_recent_only").show() $(".message_list li:gt(4)").slideDown() return false; });

//show recent messages only $(".show_recent_only").click(function(){ $(this).hide() $(".show_all_message").show() $(".message_list li:gt(4)").slideUp() return false; });

});

8. 模仿WordPress后台评论管理面板

我想你可能见过最多次这个效果是在Wordpress后台的评论管理面板。那好,让我们来用jQuery来模仿它的效果。为了实现背景颜色,你需要包含Color Animations这个插件(view demo)

sample

First line: 向<div class="pane"> 添加 "alt" class
Second part: 当<a class="btn-delete">被点击,激活<div class="pane">的不透明度
Third part: 当<a class="btn-unapprove">被点击, 首先让<div class="pane">显示黄色,然后变为白色,并添加类(addClass)"spam"
Fourth part: 当<a class="btn-approve">被点击,首先让<div class="pane">显示绿色,然后变为白色,并移除类(removeClass)"spam"
Fifth part: 当<a class="btn-spam">被点击,激活背景色为red并使其opacity ="hide"

 

//don't forget to include the Color Animations plugin//<script type="text/javascript" src="jquery.color.js"></script>

$(document).ready(function(){

$(".pane:even").addClass("alt");

$(".pane .btn-delete").click(function(){ alert("This comment will be deleted!");

$(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast") .animate({ opacity: "hide" }, "slow") return false; });

$(".pane .btn-unapprove").click(function(){ $(this).parents(".pane").animate({ backgroundColor: "#fff568" }, "fast") .animate({ backgroundColor: "#ffffff" }, "slow") .addClass("spam") return false; });

$(".pane .btn-approve").click(function(){ $(this).parents(".pane").animate({ backgroundColor: "#dafda5" }, "fast") .animate({ backgroundColor: "#ffffff" }, "slow") .removeClass("spam") return false; });

$(".pane .btn-spam").click(function(){ $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast") .animate({ opacity: "hide" }, "slow") return false; });

});

 

9. 轮换图片展栏

如果你有一个项目需要显示多个图片,并且你不希望链向另一个页面,那么你可以在当前面加载目标链接的JPG(view demo)

sample8

首先,添加一个<em>到H2标签。

当<p class=thumbs>内的元素被点击:
- 以可视的形式显示href属性的"largePath"路径
- 以可视的形式显示title 属性的"largeAlt"
- 代换<img id="largeImg">的scr属性内可视的"largePath"路径,并代换alt属性内可视的"largeAlt"
- 设置em内的内容(h2内) 为可视的largeAlt

$(document).ready(function(){

$("h2").append('<em></em>')

$(".thumbs a").click(function(){

var largePath = $(this).attr("href"); var largeAlt = $(this).attr("title");

$("#largeImg").attr({ src: largePath, alt: largeAlt });

$("h2 em").html(" (" + largeAlt + ")"); return false; });

});

10. 个性化不同的链接样式

在现代化的浏览器中,个性化不同的链接是非常容易的事,比如想让.pdf文件显示特殊的样式,你只需要添加上简单的CSS规则:a[href $='.pdf'] { ... }就可以实现,但不幸的是IE6并不支持这个。如果想实现这个,你可以利用jQuery (view demo)

sample9

前三行代码必需是连续的,它只是一个<a>的href属性中的一个CSS class。

第二部分将会获取所有href中没有"http://www.webdesignerwall.com" 和/或没有"#"的< a>元素,并添加"external" class和target= "_blank"。

$(document).ready(function(){

$("a[@href$=pdf]").addClass("pdf");

$("a[@href$=zip]").addClass("zip");

$("a[@href$=psd]").addClass("psd");

$("a:not([@href*=http://www.webdesignerwall.com])").not("[href^=#]") .addClass("external") .attr({ target: "_blank" });

});

最佳jQuery教程

jQuery可以说已经是无所不在。不过,对于不懂JS的人来说,运用起来还是相当有难度的,所以,像PS一样,都会从网上找一些教程,手把手教,一点一点学。比如上次说到的写给设计人的10个jQuery特效都是手把手教的。今天这个jQuery教程也不例外,除了第一个是预览页的,其他都是手把手教的。

1. 标签式导航

2848373300_0249d4bb4b_o.jpg

2. 平滑移动导航

2848373306_c9a24450bd_o.jpg

3. 滑动导航

2848373310_ab4949c48d_o.jpg

4. jParallax (很酷的效果,眼人的视角一样)

2848373314_5989771696_o.jpg

5. Fancy-Zoom(放大效果,很漂亮)

2848373318_954e120c48_o.jpg

6. jQzoom (局站放大,厉害)

2848373322_efed88744f_o.jpg

7. Text-Zoom(文字放大)

2848378268_14e4ece156_o.jpg

8. 高亮背景

2848378274_69d3b48f04_o.jpg

9. jQeury 图表

2848378276_82c7eae81a_o.jpg

10. 可作装饰展栏

2848378280_bbc1bd271a_o.jpg

本文来自Best of jQuery-Tutorials,虽然说是最佳jQuery教程,不过个人觉得,更应该说是实用的教程,相对写给设计人的10个jQuery特效来说,这10个最佳也显得非常小众。不过,像导航,放大和背景高亮,个人觉得非常实用,所以,介绍了这篇文章。

2011年5月12日星期四

nginx设置不当,导致firefox和chrome不显示css

网站采用nignx架设,但是论坛在firefox和chrome下一直不正常,表现为css不解析,所以页面显示乱七八糟,后来经检查,是nginx的设置问题,也就是

http {

下面,缺少下面两句


include         mime.types;

default_type       application/octet-stream;


导致css文件没有被识别,所以在firefox和chrome下显示不正常,修改后正常!

保护眼睛,黑色背景的DreamWeaver(DW)代码颜色样式 CodeColor.Xml

        长期写代码的朋友的福音,一个代替Dreamweaver默认代码颜色样式的xml文件!虽然本人自己也试图一个个的更改默认颜色,不过既烦,效果又不好,颜色杂乱不柔和。现在有一位叫Tom Sramek的好心人为我们提供了现成的代码颜色样式,真是太棒了! 

目前支持的语言:

CSSHTMLPHPJavaScriptXMLJavaJSPActionScriptWMLColdFusionColdFusion component

就是没有asp...

第一步:关闭Dreamweaver
第 二步:浏览 C:\Documents and Settings\%username%\Application Data\Adobe(Dreamweaver 8是Macromedia)\Dreamweaver 9\Configuration\CodeColoring\ (on WinXP)
orC:\Users\%username%\Application Data\Adobe\Dreamweaver 9\Configuration\CodeColoring\ (on Vista)
第三步:将原来的 Colors.xml 做一个备份或者改个名,比如改成Colors2.xml,以备将来还原默认
第四步:下载
dreamweaver_colours.zip(3k),解压后放到第二步找到的目录下
第五步:打开Dreamweaver,并且把默认背景颜色改成 #252A32 (我个人感觉这个颜色有点模糊,我比较喜欢#191919)就行了!

自己修改了colors.xml,加入了对asp代码的颜色匹配,如下:

<colorGroup doctypes="ASP-VB">
  <tagColor id="CodeColor_CFScriptTag" text="#990033" />
  <syntaxColor id="CodeColor_CSSImport" text="#009999" bold="true" />
  <syntaxColor id="CodeColor_CSSMedia" text="#990000" bold="true" />
  <syntaxColor id="CodeColor_CSSComment" text="#999999" />
  <syntaxColor id="CodeColor_CssKeywordImportant" text="#E77E7E" bold="true" />
  <syntaxColor id="CodeColor_CSSProperty" text="#FFCC00" />
  <syntaxColor id="CodeColor_CSSSelector" text="#33CCFF" />
  <syntaxColor id="CodeColor_CSSString" text="#FFCC33" />
  <syntaxColor id="CodeColor_CSSValue" text="#99FF33" />
  <syntaxColor id="CodeColor_DateText" text="#333333" bgcolor="#FFFFCC" />
  <tagColor id="CodeColor_HTMLAnchor" text="#99FF00" />
  <syntaxColor id="CodeColor_HTMLString" text="#0099FF" />
  <syntaxColor id="CodeColor_HTMLComment" text="#666666" bgcolor="#252A32" italic="true" />
  <tagColor id="CodeColor_HTMLForm" text="#FFCC00" />
  <tagColor id="CodeColor_HTMLImage" text="#9966FF" />
  <syntaxColor id="CodeColor_HTMLNumber" text="#3399FF" />
  <tagColor id="CodeColor_HTMLObject" text="#FF3333" />
  <syntaxColor id="CodeColor_HTMLTag" text="#00FFFF" />
  <tagColor id="CodeColor_HTMLScript" text="#993333" />
  <syntaxColor id="CodeColor_HTMLEntity" text="#FFFFFF" bold="true" />
  <tagColor id="CodeColor_HTMLStyle" text="#FFCCFF" />
  <tagColor id="CodeColor_HTMLTable" text="#00CCCC" />
  <tagColor id="DWTagLibrary_html" text="#E3DE5F" />
  <syntaxColor id="CodeColor_HTMLText" text="#FFFFFF" bgcolor="#252A32" />
  <syntaxColor id="CodeColor_JavascriptBracket" text="#33CCFF" bold="true" />
  <syntaxColor id="CodeColor_JavascriptClient" text="#9966CC" />
  <syntaxColor id="CodeColor_JavascriptComment" text="#CCCCCC" />
  <syntaxColor id="CodeColor_JavaScriptDefaultText" text="#FFFFFF" />
  <syntaxColor id="CodeColor_JavascriptFunction" text="#CCCCCC" bold="true" />
  <syntaxColor id="CodeColor_JavascriptIdentifier" text="#FFFFFF" />
  <syntaxColor id="CodeColor_JavascriptNative" text="#00FFFF" />
  <syntaxColor id="CodeColor_JavascriptNumber" text="#FF3366" />
  <syntaxColor id="CodeColor_JavascriptOperator" text="#0099FF" />
  <syntaxColor id="CodeColor_JavascriptRegexp" text="#99FF00" />
  <syntaxColor id="CodeColor_JavascriptReserved" text="#0099FF" bold="true" />
  <syntaxColor id="CodeColor_JavascriptString" text="#0099FF" />
  <syntaxColor id="CodeColor_VBSBlock" text="#E77E7E" bold="true" />
  <syntaxColor id="CodeColor_VBSBracket" text="#CC9900" />
  <syntaxColor id="CodeColor_VBSComment" text="#FFCC00" />
  <syntaxColor id="CodeColor_VBSConstants" text="#FF3333" bold="true" />
  <syntaxColor id="CodeColor_VBSFunction" text="#8FE28F" />
  <syntaxColor id="CodeColor_VBSIdentifier" text="#DEDECB" />
  <syntaxColor id="CodeColor_VBSNumber" text="#8FE28F" />
  <syntaxColor id="CodeColor_VBSReserved" text="#8FE28F" />
  <syntaxColor id="CodeColor_VBSString" text="#FF6666" />
  <syntaxColor id="CodeColor_VBScriptDefaultText" text="#CCCCCC" />
  <syntaxColor id="CodeColor_VBSOperator" text="#DEDECB" />
  <syntaxColor id="CodeColor_VBSNative" text="#7CB7F1" />
  <tagColor id="DWTagLibrary_php" text="#0099FF" />
 </colorGroup>

只要把上面这段复制到colors.xml的<codeColors>...</codeColors>中就行了,颜色大致参考PHP 

      经 过本人亲自试验,发现上面给的下载地址中的文件解压后只有HTML、JAVASCRIPT、CSS等几个颜色方案,但对于经常做项目的朋友来说,动态网页 如JSP也是一日三餐,因此我又自己设置了一下JSP中的颜色方案,同样把下面的JSP颜色代码复制到colors.xml 的<codeColors>...</codeColors>中即可(如果你想自定义修改一下,可以在DW菜单栏中选 编辑--->首选参数--->代码颜色,右侧选择需要修改的方案,点击下面的“编辑颜色方案”修改即可):
<colorGroup doctypes="JSP">
  <tagColor id="CodeColor_CFScriptTag" text="#FF3333" />
  <syntaxColor id="CodeColor_CSSImport" text="#99CC00" bold="true" />
  <syntaxColor id="CodeColor_CSSMedia" text="#FF3300" bold="true" />
  <syntaxColor id="CodeColor_CssKeywordImportant" text="#FF0000" bold="true" />
  <syntaxColor id="CodeColor_CSSSelector" text="#FF99FF" />
  <syntaxColor id="CodeColor_CSSValue" text="#99FF33" />
  <syntaxColor id="CodeColor_CSSProperty" text="#0099FF" />
  <syntaxColor id="CodeColor_CSSComment" text="#999999" />
  <syntaxColor id="CodeColor_CSSString" text="#FFCC33" />
  <tagColor id="CodeColor_HTMLAnchor" text="#99FF00" />
  <tagColor id="CodeColor_HTMLForm" text="#FFCC00" />
  <tagColor id="CodeColor_HTMLImage" text="#9966FF" />
  <tagColor id="CodeColor_HTMLObject" text="#FF3333" />
  <tagColor id="CodeColor_HTMLScript" text="#993333" />
  <tagColor id="CodeColor_HTMLStyle" text="#FFCCFF" />
  <tagColor id="CodeColor_HTMLTable" text="#00CCCC" />
  <tagColor id="DWTagLibrary_html" text="#E3DE5F" />
  <syntaxColor id="CodeColor_HTMLTag" text="#00FFFF" />
  <syntaxColor id="CodeColor_HTMLNumber" text="#3399FF" />
  <syntaxColor id="CodeColor_HTMLEntity" text="#FFFFFF" bold="true" />
  <syntaxColor id="CodeColor_HTMLText" text="#FFFFFF" />
  <syntaxColor id="CodeColor_HTMLString" text="#999999" />
  <syntaxColor id="CodeColor_HTMLComment" text="#666666" italic="false" />
  <syntaxColor id="CodeColor_JavaJSP" text="#009999" />
  <syntaxColor id="CodeColor_JavaReserved" text="#0000FF" />
  <syntaxColor id="CodeColor_JavaIdentifier" text="#999999" />
  <syntaxColor id="CodeColor_JavaFunction" text="#0000FF" />
  <syntaxColor id="CodeColor_JavaBlock" text="#CC6666" />
  <syntaxColor id="CodeColor_JavaBracket" text="#FF9900" />
  <syntaxColor id="CodeColor_JavaDefaultText" text="#FFFFFF" />
  <syntaxColor id="CodeColor_JavaOther" text="#66CC99" />
  <syntaxColor id="CodeColor_JavaNumber" text="#FF0000" />
  <syntaxColor id="CodeColor_JavaImplicit" text="#999900" />
  <syntaxColor id="CodeColor_JavaOperator" text="#FFFFFF" />
  <syntaxColor id="CodeColor_JavaComment" text="#999999" />
  <syntaxColor id="CodeColor_JavaString" text="#FFCC00" />
  <syntaxColor id="CodeColor_JavascriptRegexp" text="#99FF00" />
  <syntaxColor id="CodeColor_JavascriptReserved" text="#00FFFF" bold="true" />
  <syntaxColor id="CodeColor_JavascriptNative" text="#00CCCC" />
  <syntaxColor id="CodeColor_JavascriptIdentifier" text="#FF3300" />
  <syntaxColor id="CodeColor_JavascriptFunction" text="#999999" bold="true" />
  <syntaxColor id="CodeColor_JavascriptClient" text="#9966CC" />
  <syntaxColor id="CodeColor_JavascriptBracket" text="#33FFCC" bold="true" />
  <syntaxColor id="CodeColor_JavaScriptDefaultText" text="#FFFFFF" />
  <syntaxColor id="CodeColor_JavascriptNumber" text="#FF3366" />
  <syntaxColor id="CodeColor_JavascriptOperator" text="#0099FF" />
  <syntaxColor id="CodeColor_JavascriptComment" text="#999999" />
  <syntaxColor id="CodeColor_JavascriptString" text="#3399FF" />
  <tagColor id="DWTagLibrary_jrun" text="#000099" />
  <syntaxColor id="CodeColor_JSPIncludeBlock" text="#FF6600" />
  <syntaxColor id="CodeColor_JspIncludeDirDefaultText" text="#666666" />
  <syntaxColor id="CodeColor_JSPIncludeOperator" text="#0099FF" />
  <syntaxColor id="CodeColor_JSPIncludeString" text="#99CC00" />
  <syntaxColor id="CodeColor_JSPIncludeAttributes" text="#999966" />
  <syntaxColor id="CodeColor_JSPTaglibBlock" text="#000000" />
  <syntaxColor id="CodeColor_JspTagLibDirDefaultText" text="#000000" />
  <syntaxColor id="CodeColor_JSPTaglibOperator" text="#000000" />
  <syntaxColor id="CodeColor_JSPTaglibString" text="#006600" />
  <syntaxColor id="CodeColor_JSPTaglibAttributes" text="#0000FF" />
  <tagColor id="DWTagLibrary_jsp" text="#FF99FF" />
  <syntaxColor id="CodeColor_JSPPageBlock" text="#FF6699" />
  <syntaxColor id="CodeColor_JspPageDirDefaultText" text="#000000" />
  <syntaxColor id="CodeColor_JSPPageOperator" text="#0099FF" />
  <syntaxColor id="CodeColor_JSPPageString" text="#FF6666" />
  <syntaxColor id="CodeColor_JSPPageAttributes" text="#9966FF" />
  <syntaxColor id="CodeColor_LibraryText" text="#FFFFFF" bgcolor="#FFFFCC" />
  <syntaxColor id="CodeColor_DateText" text="#000000" bgcolor="#FFFFCC" />
 </colorGroup>

2011年4月6日星期三

关于移动web开发

最近在开发无线js代码库,拿到了Android测试机N1,这几天的测试过程中,发现 了Android2.2里chrome lite的一些问题,记录在本文最后。

试用过Andorid浏览不同的网页后觉得,移动web开发应该尽量避免类似桌面应用那样的富客户端体验,因为本身各种手机性能参差不齐,而且性能 最好的iPhone4也并没有好到哪里去。桌面的IE6虽然比chrome性能差几十倍,但在强大的桌面硬件支持下普通富客户端应用差别很小,甚至感觉不 出来,但手机上就不一样,差别明显,性能低到无法忍受。

我在Android下试了sencha/jqtouch/jquery mobile,体验都不好,很卡很慢,如果只是针对iOS平台的浏览器还好,如果是针对所有平台的,还是不要用这么复杂的框架。速度快是最重要的体验元 素,这在移动web上主要表现在渲染的速度。而一些锦上添花的效果有时不仅影响速度,还会有更差的体验出现,例如jquery mobile在滑动切换页面时会不断调整位置,或者隐藏显示地址栏,导致页面闪了几下,体验不太好。

做移动web开发,我目前想法是:

  1. 最重要的是写好css让页面显示适应屏幕,但同时CSS3带来的特殊效果尽量少用,特别是list的渐变背景最好不用,会拖慢页面的渲染。
  2. 少用或不用动画,虽然css3动画在iOS上表现不俗,但至少在Android上表现不佳,很卡的动画比没有动画效果更差。
  3. 功能性的交互可以多(如dom切换/ajax,但要极力优化),效果性的交互尽量少(例如手指拖动元素,slider等组件)。

如果要在手持设备上有足够丰富的交互体验,还是做原生APP靠谱。如果不考虑各种浏览器的兼容,只考虑iOS,那能做的事还是挺多的,感觉 sencha touch就只是为iOS准备的。但在iOS上浏览器的性能也无法跟原生APP比,差得很远,而且如果只支持iOS,web失去了跨平台这个特性,也就没 多大意义了。

附:Android2.2浏览器的问题

触摸屏

  1. touchmove触发次数太少
    表现在两个方面:
    Ⅰ.拉住页面拖动的时候,触发touchmove事件的次数比ios少了一两倍。
    Ⅱ.手指滑动速度太快(像翻页那样)时touchmove几乎不触发,或只出发一两次。ios上会出发很多次。
  2. 在某一个元素侦听touch事件,如果两次touchstart间隔时间太短,touch事件就不再作用到那个元素上,穿越了这个元素直接作用在 页面上。这个问题在touchstart时preventDefault可以解决。

总的来说就是,触摸不灵敏。

渲染

  1. 页面上用CSS3渐变时,特别是全屏背景颜色渐变,渲染会变慢很多,拖动会变得很卡。
  2. 有些渐变颜色在页面移动过程质量会变低。

事件

  1. 不支持gesture事件,可以理解为因为很多android手机多点触摸功能很差,直接把这个功能干掉了。
  2. Android2.1以下不支持orientationchange事件,需要用resize事件模拟。我测试的N1 Android2.2支持这个事件。
  3. Android2.2的浏览器支持position:fixed这个css属性,2.1以下版本支持情况不明。它viewport的概念跟iOS mobile safari是不一样的。

2011年4月5日星期二

Web前端工程师技能列表

要打造一流的Web产品开发团队,在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说,仅仅掌握 Web1.0时代简单的"网页套接"是完全不够的。我结合自己的团队配备,特此罗列了Web前端产品工程师所涉及的技能列表如下:

通过许多实际项目,个人认为一个完备的前端产品开发团队,必须拥有如下的人才配备,也希望大家补充:

  • 团队全体成员达到所有技能中的a级标准
  • 团队全体成员必须掌握两项技能中的b级标准,并保证所有的b级标准在该团队中有50%以上成员能达到
  • 团队全体成员必须掌握一项技能中的c级标准,并保证所有的c级标准在该团队中有25%以上成员能达到

具体技能描述:

  • 【必备】UserInterface
    1. PhotoShop/Fireworks Design
      a � 配合美工将草图形成具体的符合WebPage的设计
      b � 有快速制作分层高品质PSD、PNG的能力
      c � 能迅速将PSD、PNG的内容构思成div+css或者table等HTML代码
    2. Flash Design
      a � 基本动画效果
      b � 复杂的交互体系设计,了解第三方swf辅助设计软件
      c � 复杂的交互体系设计以及较强的对各类外埠资源(PNG、JPG、MP3、WAV等)的整合能力。精通部分第三方辅助设计软件(AE、SwishMax、 Swift3D等)
  • 【必备】Browser-side (Web Application)
    1. XHTML/CSS
      a � 基本的layout实现
      b � 严格跨平台的layout实现以
      c � 优雅的HTML code,尽可能符合标准并有SEO的考虑因素。在任何平台、浏览器下基本保持一致。不要求了解各种CSS的hacks,但要求知道遇到问题应该如何查阅 资料以在第一时间内解决。能够为JavaScript开发人员提供最好操作的DOM结构,让JS开发人员在开发的时候认为"一切都已经准备就绪了",而不 是"捉襟见肘"。
    2. JavaScript/Ajax/DOM
      a � 基本的DOM操作,了解AJAX,可以实现数据通信
      b � 基本的DOM操作,能写高效率的OOP代码,以降低维护成本
      c � 基于需求,进行不同的开发,选择合适的框架,做到代码效率最高,用户体验最好,代码下载量最小,并且可以在单独甚至更多产品线中最大限度重用代码
    3. Flash Developement
      a � 基于Timeline的ActionScript操作,能实现简单交互
      b � 掌握a外,能实现数据层通信(与服务器以及本地SharedObject)
      c � 精通AS1-3,能根据需求进行各类RIA开发。无论是要求支持FlashPlayer8的,还是FlashPlayer9的,都能做到开发效率最高、灵 活性最大(比如对HTML层的接口设计,等等)。
  • 【必备】Client-side (Desktop Application)
    1. Apollo
      a � 产品级的封装,基本技术了解(如何打包、如何加入HTML和JavaScript等)
      b � 掌握a的同时,能利用Apollo的API独立设计、开发OS的文件I/O功能。
      c � 掌握基本技能的同时,对"3D概念体系"有所认知。这里"3D"即:Design(设计)、Development(开发)、Deploy(产品部署)。 能用Apollo
    2. Windows Presentation Foundation、WPF/E(Silverlight)
      (待定,欢迎补充)
  • 【增补】Server-side (修改:经考虑,这个技能不参与评级)
    本来列举了"1、Server端简单的技术、脚本"和"2、MediaServer(Red5)接口"作为"Web前端工程师技能列表"的 一种(服务器、数据逻辑层技能的)评判标准。但似乎很多朋友对于前端工程师是否应该掌握Server端技能的必要性表示怀疑。确实,要掌握好上述的展现层 技能不是意见容易的事情,而且前端工程师的确非常辛苦。但是,站在另一方面来说,辛苦的原因是什么,我不知道在你日夜奋战div+CSS的时候思考过没 有。就我的经验,前端的辛苦在于以下几个方面:
    1. 重复劳动多,大量的div+css都是重复的,即便可以复制粘贴,但几千行的div海洋中去寻找一个入口恐怕 都非常痛苦
    2. 需求变更多,往往你折腾几个小时终于把跨平台问题解决好了,而且在IE6、7和Firefox下面都能显示同 样的效果了,甚至连JavaScript交互都已经快搞定了。突然上面说需求要变。这无疑是莫大的痛苦。

    也许表面上看,这跟Server端技能无关,但我觉得有好的Server端的意识,一定会有所帮助(当然不可能解决所有的问题)。毕竟信息结构和数 据库是密切相关的,而Server是连接数据库的唯一渠道(至少大多数B/S应用是如此)。掌握Server端的基本技能,对于同逻辑层开发人员设计接口 是非常重要的。而且HTML表现层在开发时与数据的分离,也与Server端的各种模板技术有关。例如PHP中的Smarty模板(我曾经用的)、jsp 的model2概念等等。HTML结构如何设计,如何让HTML重用,甚至在HTML层进行OOP的开发(我现在在新产品线中设计的前端开发流程),都需 要Server端的支持。最起码,你要告诉php程序员你需要什么。如果你完全对PHP一无所知的话,那也无从谈起了。
    此外,对于创业团队,往往人手非常有限。为了让运营成本降到最低,所有的技术人员都有义务对Server端技术有所了解。如果为了修改一个网页的标题还要 跑去喊PHP程序员连接Remote Server的话,那实在是增加了整个公司的运营成本。
    总结:我认为,可以不了解技术细节,但应该知道原理,最好能掌握一两套设计思想(毕竟数据逻辑都在这里走,光看HTML和JavaScript,对人的见 识还是有局限的,这种局限限制了我自己很久的时间),那将是一比宝贵的财富。

  • 【增补】Mobile-side(不参与评级)
    1. Flashlite
      (待定,欢迎补充)
    2. Java?
      (待定,欢迎补充)

看到很多朋友留言说前端工程师没前途,我在想,同时掌握移动设备的技能是否也是拓展前途的一个必要性?这里再多说几句,关于技术人员的前途,目前在 国内确实得用"惨淡"来形容。浮躁的氛围让技术人才往往过早放弃了自己的技术生涯,而尔虞我诈的整体道德水平也让单纯的技术人员痛不欲生(我身边太多了, 恩,不说具体细节了,呵呵)。

作为一个技术人员,开发人员,在保持纯粹地敬业心态(这是前提,这么没有,啥也别谈)外,更要学会如何保护自己,如何壮大自身,社会不会同情你,只 有你自己才能保护你自己。