饮食事件薄(四) – 可颂坊

光顾过四五间可颂坊分店,仅发现南山崇尚百货首层的分店有提供主食。
糕点下次有空再点评吧。

崇尚百货的一条小过道整好穿过该店,稍微有点人流。店内大概有7张座位。其中在角落的两张位置十分不错。距过道稍微有点距离,可以一边享用美食一边看看稀疏的路人们发发呆。要是再加点绿化、露天的话会更好 =)

可颂坊-餐牌

可颂坊-餐牌

餐牌,都是法式。上次试了一个千层面感觉不太习惯。

可颂坊-蘑菇奶油汤

可颂坊-蘑菇奶油汤

可颂坊-红酒焗牛肉饭

可颂坊-红酒焗牛肉饭

28¥的红酒牛肉焗饭配蘑菇奶油汤。相比前面提到的露丝港式茶餐厅实惠很多,并且味道也要好。
焗饭上有很多cheese (XD cheese实在是好物,百吃不厌),蘑菇汤有少许罗勒草,再配上个香蒜烤面包片,十分可口。
还有许多杂志让你燃烧时间。

PS: 餐具和纸是直接放在台面上的…感觉应该是可以处理得更干净的说..不过看了一些foreigner们直接拿手抓着面包吃 =.= …

饮食事件薄(三) – 露丝港式茶餐厅

海雅百货旁边->国美电器首层

貌似刚开了几个月。自从若干年前被某家港式餐厅雷倒之后对港式食物便留下了阴影。不过今天是被邀请 XD,就不计较这么多了。

咖喱杂菜饭

咖喱杂菜饭

貌似是30¥?忘记了。中间的心形蛋很有创意。咖喱分量很足。(焗饭没有可颂坊的好:D)

海鲜天使面+葡焗鸡饭+火腿煎蛋

海鲜天使面+葡焗鸡饭+火腿煎蛋

某天的晚餐,没带R6,用NDSI照的。天使面: Angle Hair,其实就是较细的意大利面。有鲜鱿鱼、若干贝类…烹制的时候加了芝士,味道不错。(Ceil点评:啥东西加了cheese之后都会变得好吃…)
葡焗鸡饭:呃…其实也是普通菜式。味道稍微淡了一些。
不过火腿煎蛋要强烈推荐一下。煎得很漂亮!两面的火候也控制得很好。这位煎蛋的师傅估计是用抛锅大法煎的(要不就是有传说中的双面煎蛋神器..)
点了咖哩XX饭系列后再加6¥可以点多杯冻奶茶。冰块是放在外边的,可以慢慢喝 =)。奶味足,茶味浓。(很舍本的放了很多茶粉…)

泰式猪扒公仔面+叉烧云吞+咖喱杂菜

泰式猪扒公仔面+叉烧云吞+咖喱杂菜

今天的全家福…除了3个主菜还有2杯奶茶+1杯 杨梅冻饮+ 1份 港式猪扒包。消费了114¥。
猪扒包是15元/个 ,上包时是碟子乘着,切开两半。包烤的很脆,不过吃的时候很不方便,一不小心就会把猪扒挤出来。味道一般。15元的话倒不如去吃M记的双层芝士汉堡。

总结:菜式基本上是很普通..味道也很普通..不过还是忍不住去了两次。主要是菜式十分丰富,港、法、葡、台、日、韩、中式都有,可以换着尝鲜。
餐厅靠窗边的位置风景不错(特别是外边阳关灿烂时)。此外露丝用的醋居然是苹果醋,猛一看去比普通的快餐店高级不少。不过一些细节还是做得不太好,譬如吃意大利面的时候只给我一个叉子…我平时都习惯叉子+汤匙的说,有糖包,上茶的时候却不配个汤匙(要我用手指搅吗?),服务员上餐具的时候还让餐具漂移了一下,然后差点没滑出餐纸(玩卡丁车玩多了估计..)。

Best Tone logo & bussiness card design

For my friend’s company.

I tried make something cool, then it go black XD.

6hour with Illustrator.

besttone bussiness card

besttone bussiness card

Juiz is a fictious lady =)

Tui css framework is available.

为了偷懒加快工作效率,早在半年前我就决定写一个CSS框架,到今天….它终于可以用了!

恰好公司正在折腾web栅格布局 ,所以也顺便一起整了。

说起CSS框架常见的有倡导栅格布局的 960grid 以及taobao的grid css(不知正名为何),还有特立独行的YUI(YUI中用em定宽以及负margin的使用方法十分令偶向往)。

于是综合了各框架的一些设计理念及实际情况,在YUI基础上修改开发了自用css框架tui….

主要是重写了YUI中的一些宽度数值,去掉一些不常用的css,添加一些ooxx。

目前TUI的功能有

  • 支持页面宽度:自适应、950px、974px、1190px
  • 左右侧边栏宽度:150px、190px、230px、270px、310px
  • 百分比布局:与YUI3.0相同(修改中)
  • 简单的css-reset

YUI中font-size是设置成13px的,印象中中文宋体在12px、14px中的显示效果会比较好。所以像素级测试了一下。

发现宋体在12px、13px的时候其实都是一样大的。唯一的区别是的13px的字宽比12px大1px,说白了就是字与字间多1px的间隔。并且相比13px,我觉得12px太挤了,看起来有点视觉疲劳。

于是Tui中沿用YUI的13px设定。(只在vista、win7中测试,不知未开启clearType的机子会咋样)

同学们到这里可以查看简单的Demo   <-[2010/6/16失效]

惠丽购物(faceli.cn) logo+webdesign+前端开发

Faceli logo

Faceli logo

最近突然很多事,然后我又很无脑的都答应了,于是每天都得燃烧寡人的小宇宙至天明。

过完这个月老子要去干大事了。闲人勿扰。

Faceli.cn

Faceli.cn

三个晚上堆砌出来的山寨作品。基本上同学们都很容易找到熟悉的细节or身影。所以只是some rights reserveds.

CallNi UI Design

After many hours, here’s a VOIP software UI design for Lvyou.(But I had thought about it for 2 week lol)
Just a simple example :D

CallNi UI design

CallNi UI design

赌博问题研究

常有云“十赌九输”,某日针对这问题稍微研究了一下。

假设在丢筛子投大小的场景,赌徒投错了将失去该局的所有押金,中了不但能取回押金还能获得跟押金等额的金钱。

那么赌徒一直押小,第一次10元,如果输了次回押20元,以此类推40、80、160……那么只要押中一次,赌徒不但能拿回之前输的赌金,还能赢10元。只要押中一次便从10元从新押起。那么这样看来赌徒会一直赢下去。

针对次问题我们建立一个数学模型,最低押金X0,每场押金Xn,赔率Y(Y>1),每场胜利赌徒希望赢得的金钱Z,那么可以得知

Xn=(X0+Z)[y^(n-1)]/[(Y-1)^n]

那么回归到刚才的场景,假设连续开了9次大,押金就高达2560元了。显然赌徒一直赢钱的情况只会出现在赌徒有无限金钱的情况下。并且通过Xn的表达式不难看出,庄家可以通过提高最低押金X0,降低赔率Y、降低押金最大值的方法来获得更大的收入。

拉斯维加斯一家赌场的VIP房间设置了100$最低押金以及15000$的最高押金,如果采用上面的方法连续开出8次大的话将失去12800$赌金,而这个几率高达 0.5^8 = 1.56%  , 接近十赌九输了 :D

[Practice] 20090514

头发乱了....

头发乱了....

头发真的很乱。。。

最近打算换wacom影拓4,于是转让用了1年多的wacom贵凡640,保养很好,成色很新,无不良使用记录。800¥,有意者mail给我 ceilwoo★gmail.com,支持taobao

模块化CSS设计(一) – 图标

前言:

最近半年多的时间里我都在参与TAPD项目的设计与前端开发。之所以把设计和前端开发一起承担主要是考虑到一种较为理想的设计流程,在进行设觉设计 的同时把Html、CSS的实现都考虑进去,这样无论是设计还是代码都是统一的设计理念和风格,便于维护和后续开发。后来发现TAPD的规模远大于自己所 想,交互研究、视觉设计、代码设计每一部分都是一份庞大的工作,每个页面的设计与实现都没有太多的时间仔细琢磨…还好后期英明的Boss把设觉与交互 设计部分交给了其他同事,我才得以对前端代码仔细研究,用了一个月的时间把所有Html与CSS进行重构。

本系列文章将跟大家分享我在TAPD项目上关于CSS架构设计的一些心得,譬如命名、灵活性等,不会涉及太多CSS技巧。

由于是想到什么就写什么,各章节之间没有什么必然的联系,希望大家看后有能有所收获。m(_ _)m

-  by ceil  2009/5/11

模块化CSS设计(一) --- 图标

一般来说页面上的图标会用下边的两种形式撰写:

<a href=”#” title=”Edit”><img src=”[url]” alt=”Edit” /></a>

<a href=”#” class=”btn_edit” title=”Edit”>Edit</a>

前者:直接插入图标的图片,好处是该按钮是inline-block,可以很方便的插入到页面任何地方。譬如说放到一段文字的中间。

Example_01

Example_01

后者:用CSS背景定位的把图标显示出来,并且把Edit文字隐去,相比前者降低了表现与逻辑的耦合性,更好的Html语义化。不过为了让图标有高度和宽度,一般情况会 把<a>加上display:block,然后用background-image把图标放进去。那么弊端也是显而易见的,假设我需要把一个 图标插入到一句话的中间,那么由于display:block的存在会直接导致图标与其他文字换行显示。

Example_02

Example_02

综合两者的优点,我在TAPD中是这么定义一个图标的:

<a href=”#” class=”tag_bug”><i>Bug</i></a>

CSS

CSS

这样TAPD的图标的不但具有<img>形式的灵活性,同时减少耦合性、更好SEO、更好的HTML语义化…etc

(因为要兼顾IE6/7/8、Firefox、Safari、Chrome中display:inline-block的实现,所以迫不得已要额外加一个<i>标签用于将文字隐藏。)

按照yahoo的rules for high performance web sites的原则,应当减少Client与Server端间的HTTP请求次数。

我还用到CSS Sprite,将多张图标图片组装成单独的一张图片,用background-position显示不同的图标

CSS Sprite

CSS Sprite

也许有人会问:

<a class=”btn_edit”></a>

这么写不会更简单么?并且可以减少html和CSS代码?何必要写成<a class=”btn_edit”><i>Edit</i></a>

其实我坚持在标签里写文字一方面是基于SEO的考虑,另外还考虑到一种情况,假设突然有一天我们的客户觉得编辑按钮图标太糟糕了!要求直接直接用文字。那么我稍微修改一下CSS文件便可以巧妙的把原来的图标变成一个文字链接了。又或者是客户由于某些原因访问不了TAPD的CSS文件,标签里没有文字的会变得一片空白,无法使用。

Example_04

Example_04

另外由于IE6对透明背景的PNG图片支持不好,所以大部分不规则图标我都是用gif格式。但是有时候gif的256色不能满足设计师的设计要求(设计师A:俺的作品多姿多彩,256色怎么够用!!)。

所以在CSS sprite的时候我是合成了两张图片,一张对色彩要求不高并且需要透明背景的GIF图片和一张对色彩要求高的PNG图片。

深圳到惠州骑行记

酝酿N久的骑行计划终于在五一假期间心情好的某天里完成了。
启程日不小心睡到早上9点多。。于是11点才从布吉关出发。下午6点到达,全程100多千米。

深圳 to 惠州

深圳 to 惠州

装备: 18升背包 , 2升水, 绳子x2,备用内胎x2,修理工具包,换洗衣物一套,雨衣,干粮若干,防风镜,头盔,地图,笔记本,医护药品,车前包&三角包…etc

据闻205国道车多人多,环境恶劣,于是稍微稍微绕了一下路:

走    布吉->横岗->坪山->坑梓->淡水->惠州

Read on…