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

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

崇尚百货的一条小过道整好穿过该店,稍微有点人流。店内大概有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记的双层芝士汉堡。

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

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

模块化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图片。

CSS expression在IE6的诡异问题

<body><div id=”page-wrapper”><div id=”header”>标题内容…</div></div></body>

以上是最近的项目里的html结构,其中page-wrapper是自适应页面大小的,header是存放页面的标题(height:60px;)。根据客户的需要,该页面是自适应浏览器大小,并且有一个最小的宽度。于是我这么对page-wrapper这么写到

#page-wrapper{
position:relative;
min-width:974px;
width:expression(((document.compatMode && document.compatMode==’CSS1Compat’) ? document.documentElement.clientWidth : document.body.clientWidth) < 974 ? “974px” : “auto”);
}

鉴于IE6中没有min-width,所以我尝试使用一下css expression这个只有IE支持的CSS属性。里面是一段JS,当page-wrapper的宽度小于974px的时候把宽度设置成974px,以实现Ie6下的min-width。为什么会有个position:relative ? =.= 这个是手误,很久以前需要实现一些效果忘记删掉了。

于是问题就出来。该页面在IE6下当浏览器窗口最大化时page-wrapper里面所有的内容会消失,再缩小到原本大小的时候内容又出出现。囧rz

最后诊断的结果是 ,当 header的height:60px;与page-wrapper的position:relative;和css expression同时出现并且页面是自适应大小的话在IE6下便会出现最大化的时候页面内容消失的诡异问题。

这问题出现的必要条件也太恶心了。。。估计也没多少人能遇上。。。。

于是决定面壁思过。。远离肥猪流。。

#page-wrapper{
min-width:974px;
_width:expression(documentElement.clientWidth< 974 ? “974px” : “auto”);
}

(_width仅为IE6识别) 虽然很不想用CSS hack,但我认为这不失为一个便捷的方法。我不希望添加非IE6浏览器解析css的负担。

Giloong business card design

giloong business card

giloong business card

Business card design for my friend binning.
The dragon’s head comes from a deviantarter who I forgot his id. Sry m_ _m.Hopefully u can pm me when u see this card.

(3h for drawing)

IE6下width:100%的BUG

Mark一个今天遇到的问题:

<div class=”page_wrapper”>
<div style=”margin:30px;” class=”table_wrapper”>
<table width=”100%”>数据</table>
</div>
</div>

这样的结构的时候在Ie6中的table会错误的把page_wrapper当作100%的参考对象,于是会把table_wrapper撑破(比预想效果多60px宽度)。

解决方法就是给table_wrapper加上 width:100% 就ok了

thinklet logo design

thinklet_logo

最近在DA居然发生了被抢沙发行为。。真是OOXX啊

orz … 今年积累了太多游戏了..

双星物语2
梦幻之星4-xxx的野望
北欧女神-负罪者
恶魔城-xx刻印
空之轨迹rd
ef – the latter tale
重装机兵-钢xx

由于异常繁忙基本玩了没两天都放一边了
神啊。。。给偶一个月假期吧 T-T

FireStats icon Powered by FireStats MC Inside