October 20th, 2006 |
htmlor |
blogging, javascript |
24 Comments »
update @2007-04-18: 因为觉得除了花哨一点用处不大,我很早就把这个效果去掉了。有需要的朋友可以问我要。
很早就看到blogger首页的Explore blogs循环列表很有意思,今天忽然觉得自己blog的“特色”部分可以借鉴。先看了blogger的源代码,太复杂(好多库根本用不着)。于是自己写了段类似的,效果比人家的稍微差一点,不过也够用了。
有兴趣的朋友可以看看效果(网页浏览直接看右边栏即可)。要代码的话说一声,或者自己看源代码。
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.com和AskJeeves.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注:如果你的服务就是立足于吸引眼球、哗众取宠,倒可以试试)
(完)
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简写就先写到这里,大家有什么问题欢迎与我交流。