loading tweet...

写了段仿blogger首页循环列表的js

October 20th, 2006 | htmlor | blogging, javascript | 24 Comments »

update @2007-04-18: 因为觉得除了花哨一点用处不大,我很早就把这个效果去掉了。有需要的朋友可以问我要。

很早就看到blogger首页的Explore blogs循环列表很有意思,今天忽然觉得自己blog的“特色”部分可以借鉴。先看了blogger的源代码,太复杂(好多库根本用不着)。于是自己写了段类似的,效果比人家的稍微差一点,不过也够用了。

有兴趣的朋友可以看看效果(网页浏览直接看右边栏即可)。要代码的话说一声,或者自己看源代码。


Web 2.0网站命名的7个建议

October 17th, 2006 | htmlor | web, 译文 | 46 Comments »

Folksonomy看到一篇好文章《7 Tips for Naming Your Web 2.0 Startup》,句句在理,中肯之至。与作者联系之后翻了过来,全文如下:

Web 2.0网站命名的7个建议

作者:Michael Zhang
翻译:htmlor

开始创业时,为网站/服务命名是无比重要的一步。当前的互联网公司可以极低的成本迅速起步,似乎每隔几秒就有新的诞生。这里有些建议,有助于为你的服务恰当的命名:

1. 尽量简短

Google.comAskJeeves.com两个域名,你认为哪个更便于每天为了搜索而多次输入?正因如此,AskJeeves才把名字缩短为Ask。如果不能在品质和功能上比竞争对手更出色,就得在服务的易用好用上下功夫。域名是否易于输入,会对访问者是否愿意经常访问产生很大的影响。我经常上CNN.com看新闻的部分原因,就是因为在地址栏里敲这3个字母太容易了。(htmlor注:在中国,QQ.com是这方面的冠军) 如果名字是一个词,长度最好为5-6个字母。名字最好不要超过两个词。

2. 要么通用 要么独创

Flickr大红大紫,有相当多的创业者似乎认为它制定了某种Web 2.0的命名标准(htmlor注:“省略”命名法)。其实不然——命名为Locatr、Bookmarkr、Zooomr、Preloadr和Frappr等的诸多服务,并没有成为Yahoo收购行动的下一个目标。(因此我的建议是)要么以不菲的价格买下通用的、与服务性质高度一致的名字,要么有点创造性,起个与众不同、独一无二的名字。

3. 最好顺口

网站的名称不能难读或难写。如果一个名字的发音让舌头无比费劲,那就换个简单的吧。试想一下人们互相询问的情景:“你听说过网络服务PriceWaterhouseCoopers吗?”反正我是没听过。一旦名字开始口耳相传,就不应该在输入地址栏时让人产生怎么拼写的混淆。

4. 域名要用.com

任天堂(Nintendo)发布第七代主机“Wii”时,Wii.com已被人注册。幸运的是,任天堂有钱把域名买回来。如果你的钱包没任天堂鼓,就得动动脑筋起个适合.com的名字,而不是起好名字后再满世界找域名。即便域名已经被注册了,也要查查whois信息,试着找域名所有人谈谈能否买过来。你知道因为Digg的火爆而带给迪斯尼(Disney)的dig.com多少额外的点击量吗?如果Digg得回dig.com,它将如虎添翼。但我怀疑迪斯尼会不会卖。(htmlor注:是我就不卖,又不缺那俩钱儿) thefacebook.com有钱之后马上买回facebook.com,也是这个原因。

5. 避免连字符

某些特殊情况下,网站域名用连字符会好一点(如expertsexchange.com改成experts-exchange.com),但绝大多数时候还是不用为好。别只是因为不含连字符的域名已经被注册,就被迫给自己的域名加上连字符。你怎么告诉人们一个域名含连字符的网站?(很有挑战性哦) 如果Myspace的域名换成my-space.com,一天之中会有多少人输入错误?有一群专门干这行的人,他们擅于从域名输入错误中牟利。别因为你的无知而让他们大赚一笔。

6. 避免域名分段

不错,曾经有段时间给网站起类似于del.icio.us的名字是很有创意、独一无二的,但现在域名分段已脱离了个性,变得不合时宜。Yahoo购买delicious.com作为访问del.icio.us的另一个(也是更方便的)地址,或许就是这个原因。英文里的单词不是都能分成多节的,输入这种域名费脑又费时。如果出于某些原因必须使用域名分段,那么请同时也注册.com域名并指到分段的域名(像competitious.com那样)。

7. 要有含义

大家都知道,近年来通用的域名很难注册到了。不过,这并不意味着给你的服务起个高质量、有品位的名字有多难。想要名字让人印象深刻,有个简单的窍门:把一个描述性的词和一个有含义的、通用的词组合起来。比如Feed/Burner,You/Tube,Hot/Mail,Tech/Crunch等。描述性的词必须让人们一目了然,知道你是干什么的。有含义的词则要加深人们的印象,并隐含正面的信息。类似FeedPorcupine(Porcupine,豪猪)或PictureSloth(Sloth,懒散)的命名显然不符合这一点,别这么干。(htmlor注:如果你的服务就是立足于吸引眼球、哗众取宠,倒可以试试)

(完)


css简写用法说明

October 16th, 2006 | htmlor | css, 技巧 | 19 Comments »

用了这么多年css(经验也算丰富),总觉得该写点什么。理论性太强的暂时写不了,只好先从简单直白的入手。css简写(css shorthand)就符合这个条件。

简单的说,css简写就是在等效的前提下,把多句css代码简化成一句。在我看来,简写css的好处有三:一是写起来方便(就像键盘快捷键);二是简化代码;三是帮助你熟悉和深刻理解css。

闲话少说,书归正传。能够简写的css属性主要有以下几个:

font

简写:

font:italic small-caps bold 12px/1.5em arial,verdana;

等效于:

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:arial,verdana;

顺序:font-style | font-variant | font-weight | font-size | line-height | font-family

(注:简写时,font-size和line-height只能通过斜杠/组成一个值,不能分开写。)

background

简写:

background:#fff url(bg.gif) no-repeat fixed left top;

等效于:

background-color:#fff;
background-image:url(bg.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left top;

顺序:background-color | background-image | background-repeat | background-attachment | background-position

margin & padding

简写:

margin:1px 0 2em -20px;

等效于:

margin-top:1px;
margin-right:0;
margin-bottom:2em;
margin-left:-20px;

顺序:margin-top | margin-right | margin-bottom | margin-left

padding的简写和margin完全一样。

border

简写:

border:1px solid #000;

等效于:

border-width:1px;
border-style:solid;
border-color:#000;

顺序:border-width | border-style | border-color

这三句也是简写,等于是把四边的样式合而为一了。(关于四边的问题,下文有详细说明)

border-top / border-right / border-bottom / border-left

简写:

border-top:1px solid #000;

等效于:

border-top-width:1px;
border-top-style:solid;
border-top-color:#000;

(和border一样)

list-style

简写:

list-style:square outside url(bullet.gif);

等效于:

list-style-type:square;
list-style-position:outside;
list-style-image:url(bullet.gif);

顺序:list-style-type | list-style-position | list-style-image

关于四边

有很多样式都涉及到了四边的问题,这里统一说明。

四边的简写一般如下:

padding:1px 2px 3px 4px;

等效于:

padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:4px;

顺序:top | right | bottom | left

不论是边框宽度,还是边框颜色、边距等,只要css样式涉及四边,顺序通通都是“上右下左”(顺时针方向)。

如果四边的值省略一个,只写三个:

padding:1px 2px 3px;

则等效于:

padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:2px;

(省略的“左”值等于“右”)

如果四边的值省略两个:

padding:1px 2px;

则等效于:

padding-top:1px;
padding-right:2px;
padding-bottom:1px;
padding-left:2px;

(省略的“下”值等于“上”)

如果只有一个值:

padding:1px;

则等效于:

padding-top:1px;
padding-right:1px;
padding-bottom:1px;
padding-left:1px;

关于css简写就先写到这里,大家有什么问题欢迎与我交流。


Page 3 of 512345