CSS HOUSE

Jeanne's villa…

Hello, iPad!

Posted on 七月 8th, 2010 by jeanne

View more presentations from jeannewoo.

Web developers preparing for the iPad…

Read more on “Hello, iPad!” »

CSS性能: 用更少的图片实现用户界面

Posted on 七月 7th, 2010 by jeanne

译自:CSS performance: UI with fewer images
原作者:Stoyan Stefanov
请尊重版权,转载请注明来源,多谢!

性能优化往往伴随着一些障碍,有时提高了性能,而导致开发过程中其它地方出了问题,或者不得不在最终的产品上减少一些特性。有的时候你必须很纠结的作出选择,就像一把钝而漂亮的斧头和另一把锋利而丑陋的斧头之间的选择一样。但其实你不必这么纠结。

这篇文章列出了一些使用尽可能少的图片在尽可能多的浏览器上实现常见的UI元素的CSS技巧。一些技巧是全新的,有些是非常,非常古老,就如IE 5.5一样的古老。它们都有的一个共同点就是“较少的甚至没有图像”。使用较少的图像有以下明显的好处:

  • 花费更少的时间在Photoshop.
  • 更轻量级的页面,减少HTTP请求,减少图片负载.
  • 需要维护的sprite元素越来越少(有时候可以减少sprites的次数),这意味着sprites以较低的更新率和cache失效率长期存在。
  • 通常更容易维护-改变颜色值远比更新和推动一个新的图片版本要容易得多。

有时,某些浏览器可能不完全支持,但没关系-只要有提高和进步的基本页面可用,人们很少注意1px发光及其他装饰。

那么,我们开始吧。顺便提一提,在本文讨论的实例测试页在这里

Read more on “CSS性能: 用更少的图片实现用户界面” »

Mobile Web Development (Part 2)

Posted on 四月 14th, 2010 by jeanne

接下来,继续讨论Mobile Web Development的下一篇 …

Chapter 4 Optimization[优化]

说到性能优化,大家可能很快就能说出很多种优化手段,例如减少图片大小、减少连接数、精简代码等等,需要注意的是,在Wap端,图片合并以及png8代替静态gif等等优化方式都不适用。这里简单介绍几种优化方案:

  • 保持较短的文档大小

由于移动设备中可用的内存有限,所以我们应该使文档尽可能短。然而,又因为XHTML MP与WML不同,它不能在一个文档中支持多“卡片”,所以把内容分为多个独立页面将会使载入的速度减慢。因此,应把所有相关信息结合在同一页面中,并利用分段锚来帮助跳转至相关章节部分。

保持文档较短的有用方法包括:

1.代码中不要包含长注释。

2.在缩进时利用tab而非空格,或者不使用缩进。空格越多,文档大小增加越多!(确保代码内没有多余的空白区非常重要。虽然空白区在屏幕上是不可见的,但仍要被处理,因为浏览器要对空白区进行分析、排版、CSS分配和显示等。)

3.文件名、Class 和IDs应尽量使用简短命名方式,又不能是完全没有意义或不可理解的命名。

4. 务必在发布前删除注释以及不必要的空格

Read more on “Mobile Web Development (Part 2)” »

“珍妮之梦” 海上世界明华轮婚礼庆典

Posted on 四月 14th, 2010 by jeanne

游轮在悠扬舒缓的音乐声中,伴着两岸璀璨的灯光,来宾们可酩酒赏月,可聆听音乐家的美妙小提琴声,留下款款深情。身穿水手服的船员们分列两旁,新人由舷梯伴着音乐缓缓走上甲板,迎来的是无数彩带和人们真挚的祝福,就连船儿也在欢呼鸣笛。 站在甲板上,让海风吹起洁白的婚纱,由船长司仪主持婚礼,水天共鉴,海誓山盟,这一刻将会化为永恒……甲板上举办一场自助餐会。妙曼的月光洒下来,悠扬的乐声响起,亲朋好友们伴着音乐翩翩起舞……

–这就是“珍妮之梦”!也是本次婚礼的主题。

Read more on ““珍妮之梦” 海上世界明华轮婚礼庆典” »

New house,new theme!

Posted on 四月 8th, 2010 by jeanne

如需要看本站最佳效果请使用webkit内核的safari和chrome浏览器,在以下浏览器下表现尚可,也就是还可以看:

  • Firefox 3
  • Opera 8*
  • Opera 9
  • Chrome 1 & 2
  • Safari 2, 3, & 4
  • Internet Explorer 7*
  • Internet Explorer 8

但是在IE 6中,HTML看起来还可以,但是大多数高级选择器还未能较好的支持,所以在这些浏览器中,如果你看得不爽,请更换高级浏览器。Jeanne不想为了兼容FF2和IE6去添加各种class或IDs去做兼容,如不能接受,请闭上双眼,虔诚的向真主、阿门之类的神使们祈祷IE6赶紧消亡吧!

Mobile Web Development (Part 1)

Posted on 四月 7th, 2010 by jeanne

去年1月份在项目群里分享过的一个PPT,现在整理成文章和大家交流下。PPT命名为《Mobile Web Development》主要是因为分享的内容多翻译及提取自Mobile Web Development.pdf这本书。

Chapter 1  Preface[前言]

不知道大家有没有一种习惯,当哪天出门忘记带手机就会特别的焦虑,总担心会错过什么重要的约会或电话,这说明手机在我们生活中的重要性越来越大。手机正在成为互联网的下一个引爆点,手机的便携性以及不断开性(always on line)让手机有比电脑更好的发展。华尔街著名分析师马丽.米克认为:“亚洲的互联网核心不是PC,而是手机。” 未来在手机平台上必将有一番龙争虎斗,使用怎样的方式占领手机平台将是每个入局者和准入局者必须仔细考虑的问题。

手机从模拟信号时代进化到GSM时代,后来有了GPRS,再后来有了3G。目前不少国家已经在试行4G。手机已经不单单是个电话工具,更重要的是,它是个平台。在手机上你可以打电话、发邮件、收发视频、看书,某些国家已经可以使用手机直接刷卡、做身份验证等。往更远地想,手机甚至可能为我们带来3D的虚拟体验。

在未来,GSM网络和3G、4G等数据网络将不再区分,3G网络已经有足够的带宽来支持通话,何况4G?也就是说,到那个时候,手机将成为一个真真正正的互联网设备,它所连接的,是纯粹的互联网,always on line的互联网。

Read more on “Mobile Web Development (Part 1)” »

部落格归来~

Posted on 一月 27th, 2010 by jeanne

部落格她其实是个人,前段时间跟别人跑了~~现在又回到我身边啦!感谢大猫的, 让她能安心蜗居在这里~~

啧啧..俺也上流了一把,虽然人没到国外,但是至少我的部落格出国了~~耶~三声耶~~~

翻了好久的文件夹,总算是找到当年的备份文件,虽然不是最新版的,但是比较适合现在比较懒得整部落格的我~~凑合用一阵子吧,等过段时间封网了看看有不有时间整个新的。

[译]Efficient, maintainable CSS

Posted on 十二月 7th, 2009 by jeanne

翻译自Russ大师的一篇关于如何书写高效、可维护、组件化的CSS的演示文档。Enjoy~

四堂管理课

Posted on 十一月 15th, 2007 by jeanne

第一课

一只乌鸦坐在树上,整天无所事事。一只小兔子很羡慕乌鸦,于是问:“我也能像你一样整天无事的坐着吗?”乌鸦回到道,“为什么不可以呢!”于是小兔子就坐在乌鸦树下的地上休息。突然,一只狐狸跳了出来,把小兔子吃掉了。

管理启示:想要“无所事事”,除非你坐(做)在非常非常高的位置上。

第二课

一只火鸡对一只公牛说:“我想飞到那棵树顶上去,但是我没有力量。”“为什么不尝试一点我的粪便呢,它们能给你充分的能量。”公牛回答道。于是火鸡试着尝了一点公牛的粪便,似乎真的获得了巨大的能量顺利的飞到了树的第一级枝丫上。第二天,火鸡又吃了一点公牛的粪便,飞上了第二根枝丫。两个星期之后,火鸡终于很骄傲的飞上了树的枝头。可是他也被一个农夫发现并被射了下来。

管理启示:狗屎运也许能让你飞上枝头,但不会长久。

第三课

当身体的各器官第一天被组合起来的时候,他们都想要做“老板”。大脑首先发言:“我应该成为老板,因为我控制着整个身体的反应和功能。”脚反对说:“是我们带着你去那些你想去的地方所以应该是我们当老板!”双手又反对:“我们做所有的工作来赚钱所以我们才是老板!”于是接下来心脏、肺、眼睛、肛门都纷纷为自己辩护。所有的器官都取笑肛门不可能当老板。结果,很快的肛门通过罢工来进行反击。很短的时间里眼睛开始流露出痛苦的表情,双手也紧紧的攥紧了拳头,双脚也开始抽搐,心脏和肺都开始感到痛苦,同时大脑也开始头痛。最后,他们终于决定让肛门来出任“老板”,于是一切痛苦都消失了,所以的器官都按部就班的工作着,但肛门只是负责排泄粪便。

管理启示:做老板不用头脑——任何的肛门都可以做到

第四课

一只小鸟飞往南方过冬,可是天气太冷他被冻僵了掉在一片田地中。当他躺在那里的时候,一头母牛经过,并且拉了一团热乎乎的大便在他身上。小鸟在粪便中开始感觉到十分的温暖,因为热乎乎的大便使他苏醒过来了,于是他躺在哪里感受着温暖并且快乐的唱起歌来。一直过路的猫听到了小鸟的歌唱于是前来查看,跟随着声音猫很快就发现了在粪堆里的小鸟,吃掉了他。

管理启示:让你踩到粪便的人并不是都是敌人;将你拉出粪堆的并不一定是朋友;当你从粪堆中“醒来”的时候,闭上你的嘴巴!

转自:http://www.yeeyan.com/articles/view/11136/2967

Google 的疯狂面试题

Posted on 九月 19th, 2007 by jeanne

google几星期前,一个朋友接受了Google公司的面试,他透露了面试中的一些问题。顺便,我把从其他几个曾经面试过的人那里听来的内容也整理在一起。最大的互联网公司Google的一份面试题集,看看你是否能够回答出来。

  • 1、一辆学校班车里面能装多少个高尔夫球?
  • 2、你被缩小到只有硬币厚度那么点高(不是压扁,是按比例缩小),然后被扔到一个空的玻璃搅拌器中,搅拌刀片一分钟后就开始转动。你怎么办?
  • 3、要是让你清洗整个西雅图的所有窗子,你会收取多少费用?
  • 4、怎么才能识别出电脑的内存堆栈是向上溢出还是向下溢出?
  • 5、你要向你8岁的侄子解释什么是数据库,请用三句话完成。
  • 6、时钟的指针一天内会重合几次?
  • 7、你需要从A地去B地,但你不知道能不能到,这时该怎么办?
  • 8、好比你有一个衣橱,里面塞满了各种衬衫,你会怎么整理这些衬衫,好让你以后找衬衫的时候容易些?
  • Read more on “Google 的疯狂面试题” »