Archive for March, 2010
昨天又把RescueTime 下载下来 准备统计下每天的工作量
之前用过一段时间，很喜欢他的报告的那些图标。之前用Evernote记录time log 总是记着记着就忘记了，等晚上的时候又想不去来都做了什么。
这几天学新的东西，一直在想办法让自己可以更高效一点。所以就又下载下来 管理一下自己的时间
图中藏青色的是做开发的时间，紫色是聊天，交流之类，土黄色是social network的那些网站之类
这个软件自动记录你在每个网站，软件商所花费的时间。这样就不会不知不觉不知道时间都去哪里去了
今天还算是比较productive的, 就是有些累。
再推荐一个小软件 workrave， 设计为防止职业病（比如腕隧道症候群、重複使力傷害）。
可以自己设置多久小休一次，多久大休一次。到时间以后，所以的鼠标键盘操作都失效。 强迫你离开电脑休息一下。
这样个也是可以用来提高工作效率的，在规定时间内按时完成，不要拖拖拉拉。
n61212月初的时候，蚊子师父帮我接的网易的天下贰在新浪游戏专区的页面设计。 基本上市连熬三天。搞定了， 师父帮忙很多，也学到不少东西。
今天早上又被呼叫，有新单子。 于是乎去查了下新浪专区（http://games.sina.com.cn/o/z/tx2/），页面终于换成我的设计，只是只是怎么只改了一半。 品质差了很多。。上图
设计图：
两周前在Twitter上看有人宣传《Rework》， amazon上的prepaid只要5镑多 就买来一本
Rework is the new business book from 37signals. 最近要读的书太多了，时间都不够。
Wall E prepared to read it.
He is reading now
让我们来看看他在读什么呢， start up呢。 Wall E 很快就要有自己的垃圾回收场了呢
n797
生活算进入正轨 其实想想也没有真正意义上的正轨
正轨不正规的 不一样是在生活嘛
所以这是心态问题
新家的门口一个很大的小院子，邻居的小孩们也会在这边一起玩
周六的早上拿出久违的轮滑鞋跟桩
路虽然不是很平坦 但是又能在轮子上飞翔 也是种快乐
滑的时候，引来小朋友的围观
可爱的小Lucy跟在我旁边帮我捡桩
中午跟房东一起混去打羽毛球
老胳膊老腿 太久没运动 都快断掉了
还被人笑用打网球的姿势打羽毛球 真是shy啊
shady哥把电子琴送我了
现在又开始练那首没有练完的《遇见》了
每天练一个小时
生活变得有滋有味
最近在读《在路上》，
因为还年轻，渴望在路上
虽然现在确实很多不顺利的事情， 但年轻的时候经历一下这些，回头看看，都还是挺有意思的事情。
不用抱怨什么，我在路上，在向我憧憬的地方前行。这就够了。
忽然想起当年跟老人和淼一起去西藏的时候，一路上很苦
为了省钱，去混兵站，搭货车，露营，每天三个人买3块钱馒头吃。
但是很开心，这就是在路上
就这样好两三个星期后， 当我们坐上要直达拉萨的车的时候 都有种莫名的紧张
我们这就是要到了吗？ 有些不舍， 不舍在路上的感觉
重要的不是结果是什么 而是我们在这个过程中所经历的
生活就像是一个长长地旅途
我们一直在路上
今天要来学的列是这个《Progressive enhancement: pure CSS speech bubbles。Demo页面在这里。Progressive enhancement渐进增强 在《sliding label》 中有提到。这个概念真是无所不在啊，一定要好好掌握。
图1
图2
今天学习的方法呢，还是copy html+css源码来分析 看别人是怎么写代码 怎么实现的
在.container 这个div里面出现了 下面的代码
<header> <hgroup> <h1>Pure CSS speech bubbles</h1> <h2>By <a href="http://nicolasgallagher.com">Nicolas Gallagher</a></h2> </hgroup> <p>The demo page for <a href="http://nicolasgallagher.com/progressive-enhancement-pure-css-speech-bubbles/">Progressive enhancement: pure <abbr>CSS</abbr> speech bubbles</a>.</p> <p>For a detailed explanation <a href="bubbles.css">view the <abbr>CSS</abbr> file</a>. It is heavily commented.</p> <p>All examples use simple, semantic <abbr>HTML</abbr>. No empty elements, no unnecessary extra elements, no JavaScript, no images (apart from that Twitter logo). Have a look at the source code.</p> </header>
Div 里面出现了header tag， 还有HTML 5的新的元素, hgroup.
The header element represents a group of introductory or navigational aids.
Note A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logosheader元素代表了一组介绍的和导航辅助信息。
注意这里的header元素通常想要用来做section的标题（1个h1-h6元素或者一个hgroup元素），但是这并不是必须的，header元素也可以包括section的目录，搜索表单，或者任何相关的logo。
(来自HTML5 (Author Edition)的解释)
hgroup 是一种header的特殊形式，必须包括切且只能包括一组(至少两个)h1-h6。这里有篇文章《HTML5 structure—header, hgroup & h1-h6》详细讲，应该怎么用header，hgroup和h1-h6来做文章的结构。
先介绍下对应图一的画法
HTML 代码
<p class="triangle-isosceles">这是图一的例子</p>
Css的代码
/* Bubble with an isoceles triangle
------------------------------------------ */
.triangle-isosceles {
position:relative;
padding:15px;
margin:1em 0 3em;
color:#000;
background:#f3961c; /* default background for browsers without gradient support */
/* css3 */
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
/* NOTE: webkit gradient implementation is not as per spec */
background:-webkit-gradient(linear, left top, left bottom, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(top, #f9d835, #f3961c);
background:-o-linear-gradient(top, #f9d835, #f3961c);
background:linear-gradient(top, #f9d835, #f3961c);
}
/* creates triangle */
.triangle-isosceles:after {
content:"\00a0";
display:block; /* reduce the damage in FF3.0 */
position:absolute;
z-index:-1;
bottom:-30px; /* value = - border-top-width - border-bottom-width */
left:50px; /* controls horizontal position */
width:0;
height:0;
border-width:15px 15px; /* vary these values to change the angle of the vertex */
border-style:solid;
border-color:#f3961c transparent transparent;
}
从上面的代码可以看出， css分为两个部分 .triangle-isosceles用来画bubbles； .triangle-isosceles:after用来画三角。 作者的代码真的写的相当漂亮清晰哈。 用渐进增强的概念，先满足最基本的内容需求，然后加入css3才支持的圆角功能呢，和渐变的背景。然后用伪元素来画三角.
.triangle-isosceles：after的意思是在 triangle-isosceles之后插入内容。
content:”\00a0″的意思是插入空格，其实也就是占一个“坑”，至于这个坑长什么样子就要有border-width来决定了
bottom的值是负的（上边界和下边界的宽度和）。这个决定了“坑的位置”，靠近bubble
如果想要标准“坑”是三角的宽度和高度都要取0
上面的这些代码就可以画出下图
其他例子可以见demo页面和css文件，自行研究哈
n699今天在看smashing Magazine的 Newsletter Issues #1 其中介绍了sildding label， 对于web form的一个改进。
从上面这个图可以看到，这个表格因为省去了label的空间，所以显得更加的简洁。当你点击input区域的时候，label就滑动到inputbox的前端。不用担心自己不记得改填的这个框是什么内容。
sliding Labels, 是由Tim Wright一月初在他的blog中发布的，用Jquery实现的，demo在这里。Tim Wright采用的是Progeressive Enhancement (这个系列的文章有Understanding Progressive Enhancement,Progressive Enhancement with CSS和Progressive Enhancement with JavaScript
)的方式(lifesinger的blog里面有中文翻译版本， 理解渐进增强, css渐进增强和JavaScript渐进增强). 渐进增强关注于内容。进入渐进增强的思维方法很简单：只要从内容开始往外想。内容形成坚实的基石，在此之上才能添加样式和交互。
对于这个demo，那些禁用了javascript的人依然可以看到正确的内容。如下图。
下面从代码的角度来分析一下这个demo.
最朴实的页面内容，一个要提交的表单，包括了name, email, Url, comment, 和 提交按钮。 每一个field都用一个div包起来，并赋给slider的类。每个field又包括了一个label和一个input/textarea.
<form action="" method="post" id="info">
<h2>Contact Information</h2>
<div id="name-wrap" class="slider">
<label for="name">Name</label>
<input type="text" id="name" name="name">
</div><!--/#name-wrap-->
<div id="email-wrap" class="slider">
<label for="email">E–mail</label>
<input type="text" id="email" name="email">
</div><!--/#email-wrap-->
<div id="url-wrap" class="slider">
<label for="url">URL</label>
<input type="text" id="url" name="url">
</div><!--/#url-wrap-->
<div id="comment-wrap" class="slider">
<label for="comment">Comment</label>
<textarea cols="53" rows="10" id="comment"></textarea>
</div><!--/#comment-wrap-->
<input type="submit" id="btn" name="btn" value="submit">
</form>
接下来看CSS代码, 一样的平凡无比，但是注意他给label的属性cursor付了个pointer的值，当鼠标移到label的时候，知道这个是“可点击的”。（注明：”可点击的说法并不准确“。 查阅了以一些资料，关于什么时候应该使用pointer，在CSS3 basic user interface module里面指出The cursor is a pointer that indicates a link.）当label被点击以后，相对应“for“的对象就得到焦点。可以看作是点击了label这个”link” 跳转到inputbox里面。《7 Quick CSS Enhancements for Better User Experience》这篇文章里面也提到了”New rule for you to live by: if the user is meant to click on any element, it should have the “pointer” cursor when the user mouses over it. Links, buttons, SELECT elements, etc.“
body { font:12px/1.3 Arial, Sans-serif; }
form { width:380px;padding:0 90px 20px;margin:auto;background:#f7f7f7;border:1px solid #ddd; }
div { clear:both;position:relative;margin:0 0 10px; }
label { cursor:pointer;display:block; }
input[type="text"],
textarea { width:300px;border:1px solid #999;padding:5px;-moz-border-radius:4px;-webkit-border-radius:4px; }
input[type="text"]:focus { border-color:#777; }
input[name="zip"] { width:150px; }
/* submit button */
input[type="submit"] { cursor:pointer;border:1px solid #999;padding:5px;-moz-border-radius:4px;-webkit-border-radius:4px;background:#eee; }
input[type="submit"]:hover,
input[type="submit"]:focus { border-color:#333;background:#ddd; }
input[type="submit"]:active { margin-top:1px; }
接下来就是要看一下js的代码是如何实现的了。首先我们分析一下逻辑关系
然后看代码
/*
$(function(){
$('form#info .slider label').each(function(){
var labelColor = '#999';
var restingPosition = '5px';
// style the label with JS for progressive enhancement
$(this).css({
'color' : labelColor,
'position' : 'absolute',
'top' : '6px',
'left' : restingPosition,
'display' : 'inline',
'z-index' : '99'
});
var inputval = $(this).next().val();
// grab the label width, then add 5 pixels to it
var labelwidth = $(this).width();
var labelmove = labelwidth + 5 +'px';
//onload, check if a field is filled out, if so, move the label out of the way
if(inputval !== ''){
$(this).stop().animate({ 'left':'-'+labelmove }, 1);
}
// if the input is empty on focus move the label to the left
// if it's empty on blur, move it back
$('input, textarea').focus(function(){
var label = $(this).prev('label');
var width = $(label).width();
var adjust = width + 5 + 'px';
var value = $(this).val();
if(value == ''){
label.stop().animate({ 'left':'-'+adjust }, 'fast');
} else {
label.css({ 'left':'-'+adjust });
}
}).blur(function(){
var label = $(this).prev('label');
var value = $(this).val();
if(value == ''){
label.stop().animate({ 'left':restingPosition }, 'fast');
}
});
}); // End "each" statement
}); // End loaded jQuery
今天关于Sliding Label的学习到此结束！ n631
今天在做一个网站的时候，想到要用类似Ps的logo这种效果。于是Google一下了解了一下用PS跟CSS分别怎么实现。
先介绍一下letterPress
LetterPress在wikipedia上的解释是凸版印刷，SmashingMagazine上有一篇讲2009年web design趋势的文章《Web Design Trends For 2009》。 里面指出，LetterPress在设计中使用的很少，从2009年初开始，在产品设计跟网页设计领域出现了很多这样的设计。
Letterpress的效果，可以用PS跟CSS来实现。
先来看一些例子吧：
Ps实现的
Apple的menu
CSS实现的
德国的一个设计公司的网站，他们的logo也很不错
我个人还是比较喜欢这个效果的，小细节的质感。
下面讲一下怎么实现
PS
在text的效果里面加上dropshadow，blend mode 调成normal， 颜色白色，透明度50%，角度90，见下图
这个是比较简单的Letterpress的PS实现，以后有空再加一些其他的实现方法。
CSS
用ps实现的网站很多，今天早上看Twitter上有人推madewithlove的网站，看了一下页面，全页面的Letterpress的效果，不太可能是图片替代，就firebug了。 然后发现时用text-shadow来实现的.
<shadow> is defined as [ <color> ? <length> <length> <length> ? | <length> <length> <length> ? <color> ? ],
前两个length是offset，第三个是blur radius. also applies to the both::first-line and ::first-letter pseudo-element.
跟上图一样效果的话 是用下面这段代码实现
text-shadow: #EEE 0px 1px 0px;
text-shadow是在css2中被引入，它并不被所有的浏览器支持，例如IE。 目前只有五类浏览器支持这个属性 Opera 9.5+, Safari 1.1+, Mozilla/Firefox 3.1+, Konqueror 3.4+ and iCab 3.0.3+.
n427WeAreSnook, 是一家致力于publice service design的non-government公司。我目前加入他们其中的一个，叫做MyPolice(mypolice.org)的项目. 这个项目是致力于建立民众跟警察之间更有效的沟通渠道。
3月9日的早晨，Sarah (co-founder and director) 发邮件跟我确认10日晚上的meeting跟dinner. 顺便提了一下HMIC即将上线他们的新项目，也叫Mypolice，域名用的是www.mypolice.org.uk. 她花了一整天跟他们沟通，好像他们依然不打算改名字。谁是HMIC呢，全称Her Majesty Inspector of Constabulary,这是一个对警察进行监管的政府机构。事情到这里就变成了一个一个非政府的独立公司跟一个政府机构之间争夺。
HMIC的负责人曾经在这个星期早一点的时候跟sarah发邮件，说了他们要上线一个新的项目，而这个项目跟我们的mypolice的服务是完全不一样的。明显他们是知道我们在做什么，我们的项目的名字。所以这个事件在twitter上一发出来，就引起了了解和熟悉我们的mypolice的人不满。
Twitter的力量
这就是我这篇文章想要强调的东西，其实我们的项目主要也是致力于social media 在public service中的应用推广。 这次的事件是一个非常好的证明social media的例子。
9日的晚上，Sarah和Lauren (Director) 商量了整晚应该怎么去面对这个时间。
10日早上以整个团队的名字写了一封邮件发给所有关心了解mypolice的人同时发布在团队的blog上. 当我看到那份邮件的时候，mypolice.org已经不堪重负挂掉了。不过感谢我们的服务器提供商，立刻帮我们换服务器，很快速的让网站恢复工作。
随后@mypolice在twitter上发布了，guardian对这个事件的报道”MyPolice angry at plans by HM Inspectorate of Constabulary to create ‘My Police’ site“.
接下来事件变的就开始有趣了，Twitter就开始扮演很重要的角色了。
@davebriggs马上抢注了myHMIC，然后做了一个myHMIC的页面，很快又加入了comments的功能。这一切都还是自发的，当时的我在Twitter上跟踪所有mypolice的realtime, Sarah好像正在上课，不停的被电话骚扰，Lauren在忙着另外一个contract的签订，顺便关注着Twitter。
晚上我们meeting，讨论网站设计的问题。 看到别人在myHMIC上留言，建议我们可以弄一个donation的账户。 然后我们瞬间的注册，贴在mypolice.org上，短短一个小时，已经有几笔的捐赠。
随后的11，12两天， 我们都忙于ALISS的workshop。几乎没有任何时间回复email，DM. 我一直在Twitter跟踪着Mypolice的real-time. Sarah跟Lauren时不时的接到采访电话。
@carriebish在Twibbon上发起来支持活动：http://twibbon.com/join/Support-mypolice
12日凌晨受到Lauren短信说明天我们要上Herald, page3.
12日早上上推，有人推了BBC上的头条新闻。http://news.bbc.co.uk/1/hi/technology/8562308.stm.
刚刚看到herald的网站上的新闻，今日的 http://www.heraldscotland.com/news/home-news/web-designers-blast-police-for-internet-rip-off-1.1013001
事情很有趣，所有的报道并没有偏袒政府机构，都是客观事实描述。这也是一个很好的投石问路的机会，得到很多反馈，对于这个项目的看法和意见。
贴一点数据
Mypolice.org Visitors =
Monday: 46
Tuesday: 34
Wednesday: 876
Thursday: 5215
Mypolice.org Page Views =
Monday: 120
Tuesday: 62
Wednesday: 2042
Thursday: 12,457
事件还在继续，有很多东西值得深思。这个事件以后也更坚信了这个concept是可以work的。从另一方面想，如果这个事情发生在中国，结局会怎么样呢？
这篇只是事件说明，后续会把一些social media的体会写一写。
我的搭档Sarah跟Lauren都是无比出色的。 Let’s Rock..
To be continue
n401