按时间顺序,浏览所有文章

Core Animation for OS X: Creating Dynamic Compelling User Interfaces

| 4 条评论 2008-02-13 13:20:44

Core Animation的技术文档一直非常少,就连Apple Developer Connection上也是凤毛麟角,Google来Google去的就那么几篇文章,真不知道Apple是怎么想的,大概07年真把它给累垮了。

幸好有一本名为《Core Animation for OS X: Creating Dynamic Compelling User Interfaces》的书即将出版,算是贴补了此领域的空白。大牛Scott Stevenson这样提及此书:

the model is to basically ease the reader into Core Animation concepts. The focus is initially on adding animation to existing Cocoa views, but moves onto deeper details of the Core Animation framework itself by the end of the book.

Core Animation for OS X: Creating Dynamic Compelling User Interfaces

单买PDF的话22美元,倒也能接受。感兴趣的话不妨玩玩,在iPhone上搞Core Animation,不仅有意思,搞好了更可有收入。

HTML Structure纵览

| 4 条评论 2008-02-03 15:52:41

我正在阅读《Pro CSS and HTML Design Pattern》一书,下面是对HTML Structure一章的读书笔记。

纵览

这本书中很多概念和通常意义上的不同,下面的图片是我根据这本书HTML Structure部分的内容整理出来的,点击放大:

HTML Structure

dl、dt和dd

从结构上说,定义列表中所有的术语都是同义词,所有的定义都是对这些术语的不同解释("Structurally, a definition list implies all its terms are synonyms and all its definitions are alternate definitions of its terms")。这句话令我百思不得其解:dt标签所包含的术语怎么会是同义词?书里面继续解释道:HTML规范也指出定义列表也可以有更广泛的应用,比如列出演讲者和他们的演讲主题。如果这个例子没有弄错的话,我想作者使用“同义词(synonym)”的初衷,是想表达dt在逻辑上层面的一致性,而非内容上的一致性。

colgroup和col

老实说,这两个标签我从来没用过,恐怕连听说都是第一次。稍微Google了一下,发现了一篇名为“理解表格二:其他表格相关标签及属性”的文章,详细深入的介绍了这两个标签。作者水平很不错,推荐去他的blog看看。

W3C规范中block-level和inline elements的区别

W3C Recommendation中的7.5.3一节简要介绍了block-level和inline elements的区别:

  • 内容模型(Content model)

    基本上,block-level elements可以包含inline elements和其它的block-level elements,inline elements只包含数据和其它的inline elements。如此区分是为了突出这样的概念,即block elements比inline elements描绘更大的结构。
  • 格式(Formatting)

    默认情况下,block-level elements的格式和inline elements的有所不同。block-level elements通常开启一个新行,而inline elements则不会如此。
  • 方向性(Directionality)

    block-level elements和inline elements在继承方向信息时有所不同。这里的方向指的是文字书写方向,比如中文通常是由左向右,或由上向下。

block elements和内容的关系

block elements用来定义结构,它不能和内容在逻辑上并列;同理,内容必须呈现在block elements中。由于HTML的Docuemnt Type Definition语言的局限,HTML校验器一般无法检测出block elements和内容混杂的情况,因此在编写HTML时需小心。

不可思议的设计 20080202

| 0 条评论 2008-02-02 12:49:36

Pillow Design Looks Like Rock Avalanche

图片来源:Pillow Design Looks Like Rock Avalanche

Cabling As Art

图片来源:Pingdom

我所使用的Firefox扩展

| 0 条评论 2008-02-02 10:46:45

不知不觉,使用Firefox已经有4年多的时间了。因为工作性质的缘故,浏览器对我的重要性可谓首屈一指,因此对其功能和使用效率非常在意。下面推荐一些我常用的Firefox扩展。

Tab Mix Plus(TMP)

这是我第一个必须要安装的扩展,它让FF的tab功能有了质的变化。利用TMP,你可以方便的设定tab的各种属性、动作和对事件的响应方式,还可以管理浏览进程。

对于tab这块,我的主要设定是1)单窗口模式,即所有的页面都在一个FF进程中展现,不管是弹出的还是其它什么方式得到的页面;2)来自书签、搜索栏、外部程序和历史的请求,打开一个新的tab;3)在tab上双击鼠标左键为关闭tab,在tab栏空白处双击则为新开tab,按住alt同时点击链接在新tab中打开目标页;4)tab按钮的长度会根据tab页的多少动态调整,但永远不会将其中一部分tab页隐藏。在新版的TMP中,如果你tab页开得太多,它会帮你隐藏其中一部分,使得你不得不通过窗口右面的下拉菜单在tab页间切换(想象一下Windows XP的“分组相似任务栏按钮”),好处便是tab按钮不会过度缩小,但我很不喜欢这种方式。

新版本的TMP已经不能将标签按钮的宽度调到很小了,不过只要导入老版本的配置文件就可以,这是我的配置文件

对于浏览进程这块,内建的功能(如进程的保存、载入和浏览器崩溃后的恢复等)对我来说够用了。实际上因为我的电脑一般都是休眠极少关机的,所以浏览进程我一般都不保存。

Google Browser Sync

Google出品的浏览器同步扩展,可以将FF的书签、浏览记录和保存的表单信息记录在你的Google账户里,并在另一个FF上同步。有了这东西以后,我几乎从不担心书签丢失或忘记某个网站的登录密码,因为我几乎所有的密码都保存在浏览器中,并通过这个扩展在家里和公司的电脑间同步。

Adblock Plus

一流的广告过滤扩展,基本上可以过滤掉大部分广告(当然要取决于你所访问的网站),当然,作为一名站长和blog作者,我对这东西也是又爱又恨,呵呵。

新版的Adblock Plus内建了广告代码自动同步的功能,已经不再需要Adblock Filterset.G Updater的支持了。

Torbutton

如果你想正常使用世界上最大的搜索引擎(Google)、最大的照片分享网站之一(Flickr)、最大的知识库(Wikipedia)、最大的博客网站(Blogspot)……你就必须要戴Tor,只要点一下鼠标,Torbutton就可以让你直奔主题,该干嘛干嘛,呵呵。顺便说一句,Mac/Linux上戴Tor还是有点麻烦的,主要是不能像Windows一样作为服务运行。

del.icio.us Bookmarks

FF必备扩展,可让FF和del.icio.us融为一体,平时看到好东西可以随时收藏到del.icio.us,也可以通过侧边栏快速的找到自己的收藏,方便的很。

Firebug

如果你在一家互联网公司的设计部,我想不出你不用Firebug的理由 :D。调试CSS、Javascrit(Ajax)就全靠它了。我还经常用它来搞点小破坏,比如用它即时修改某个网站的表单HTML代码,然后提交这个表单上去看看,嘿嘿……

IE Tab

在中国你少不了IE,IE Tab可以把FF的渲染引擎改为IE,所以你无需为了访问网银和支付宝等站点而单独开启个IE。另外要提的就是,你还可以把经常用IE访问的站点放在IE Tab的“Sites Filter”里,这样只要你访问这些站点,FF就会自动使用IE Tab来改变渲染引擎。

FlashGot

下载管理器,能把FF和很多很多下载器集成,这样当你下载某个软件时,FlashGot就可以调用外部下载器来下载。

Forecastfox

即时把天气预报显示在FF的底栏上,可以随时掌握天气情况,方便的很。

Access Flickr!

如果只想访问Flickr的话,戴个Tor显然不太划算,因为Tor会影响FF所有的标签页(可以通过某些代理扩展加白名单解决这个问题,但比较麻烦),此时Access Flickr!就派上用场了。这个扩展装上也不费事儿,后台默默运行,省心。

Gmail Notifier

顾名思义,可以检查Gmail中的新邮件数量。

PicLens

FF必备扩展!它可以提取当前网页中的所有图片,并提供非常非常炫的查看方式(如下图)。对了,你还可以体会一下我提过的直接操纵是什么感觉。

Fission

在FF中实现类似Safari那样的页面载入进度指示。我觉得这样的形式看起来比FF自带的清晰许多。

Web Developer

WD结合Firebug,调试网页可算是无敌了,网页设计人员必备。

YSlow

Yahoo!(现在叫微软?呵呵)出品的查看网页性能的扩展,我正在考虑要不要将其作为编码质量的审核标准,诸位对此有什么意见?

Greasemonkey

这小东西用的人不多,虽然理论上讲它的功能 - 通过脚本修改网页展现的内容和形式 - 应该是无比强大的,可是好用的脚本太少,外加各大网站对其的联合抵制,这些因素都限制了它的发展。

Live HTTP Headers

查看浏览器和服务器交互时的数据,其实Firebug也提供了类似的功能,不过没有这个扩展强大。遇到很棘手的问题的时候,我会用这个扩展来试试看。

Launchy

一个可以调用外部程序的启动器,相当于以网页地址为参数来启动某个程序,如下图:

Tab Effect

在切换标签页时产生立方体效果,偶尔用用,看多了就烦了。

豆瓣的设计问题 1

| 2 条评论 2008-01-28 21:12:52

众所周知,豆瓣使用了一系列标签来对用户进行分类和聚合,如“我读过”、“我想读”和“我最近在读”等等。我在使用时觉得豆瓣有一些设计问题处理的并不是很好:

1、缺少“读过,现在重新读”和“读过,且一直在读”这样两个用例

一本好书往往要读几次才能出味道,方能领悟其中的只言片语。甚至像《红楼梦》这样的巨著,我都是爱不释手的反复阅读的。因此面对豆瓣的标签,我常常不知道该选择哪个才能正确表明我现在的状态。从逻辑上说,如果出现了“我读过”这样的标签,那么除非特殊说明,否则其它的标签在时间维度上就处于“读过”之前,也就是“没读过”,此时“我正在读”这一标签显然不适合我。

2、错误地使用了“收藏”这一概念

在豆瓣中,只要你想标记一本书(或一部电影、一张CD)的状态,你就得收藏。可如果我仅仅想表明我读过,但却不喜欢、或者没有到愿意收藏的程度呢?此时现有的设计就无能为力了。

关键在于,“收藏”到底是什么意思?是表示自己拥有?仅仅喜欢不曾拥有?还是其它的什么感情?就我个人来说,我拥有的书和CD的数量远远小于我读过听过的,而我收藏的书和CD又少于我所拥有的,因为只有那些我最喜欢的才算得上收藏。

我无法获知“我的豆瓣”这个页面的PV有多少,可如果的确有很多人希望将此作为展示自己的窗口的话,强烈建议豆瓣对这个页面和“收藏”的概念进行重新设计。我甚至连名字都想好了,就叫“豆藏”!去年参加UPA时曾和阿北提到这事儿,可惜当时他对Delicious Library这样的东西(如下图)不感兴趣,不知现在可有转变?

3、同样的目的、不同的操作

在标记书籍、电影和音乐时,要先点“收藏”,可是到了同城那里,却可以直接选感兴趣还是要参加了。如下图:

4、该死的下拉菜单!

这个菜单总在我首先选择搜索类型时就递交了搜索申请,极其讨厌!这让我联想起Pocket PC上的微软拼音输入法,都是设计师不顾用户习惯而想当然的设计。

 

最后得声明一下:别误会,我是豆瓣粉丝!

关于

丁宇(Felix Ding),电脑Geek,狂热的爱书和爱乐分子。现就职于上海的一家设计工作室。

我的Email:

订阅到RSS