Cheshirecat

网格系统常见于字体设计(Typography),平面设计(Graphic Design),尤其是在杂志报纸的图文混排中有更多的应用.成熟的网格系统往往都具有良好的比例关系和对空白空间的精确把握,同时具有优秀的扩展性.在传统的印刷工业中,一般的,可以将网格简单划分为单列网格(single-column grid),多列网格(multi-column grid),附水平锚点多列网格(horizontal anchor)以及模块化网格(modular grid).选用网格主要取决于画布(canvas)和内容(content).

网格的存在在字体设计中是因为要求字体具有良好的辨识性,而在传统的平面设计和排版行业中,除去作为信息载体的可读性的特征,网格系统的使用有助于生产效率的提升.而网页作为承载信息的新媒体,是传统媒体在屏幕上的表现形式,网格系统的使用同样能提升可读性和效率.而负责表现形式的表现层主要是由层叠样式表(CSS)来控制的. 继续阅读这篇文章 »

文档名称:MicroFormats Cheat Sheet
作者:Brian Suda
文档语言:英语
版本号:r14
文档地址:http://suda.co.uk/projects/microformats/cheatsheet/
文档更新订阅:http://suda.co.uk/projects/microformats/cheatsheet/changelog.xml

文档名称:微格式快速参考表
作者:Soda
文档语言:简体中文
版本号:r14
文档地址:http://files.cheshirecat.cn/microformats.cheatsheet-zhCN.pdf
文档打印详细:PDF格式,生成程序illustrator CS3,CMYK四色,适合打印.纸张大小为A4

原文名称:Microformats: More Meaning from Your Markup
原文地址:http://www.sitepoint.com/article/microformats-meaning-markup
译文地址:http://www.cheshirecat.cn/web-standards/79.htm
原文介绍:微格式是建立在已经被广泛使用的标准之上的一套简单的开放的数据格式.本文对微格式进行了简单的介绍,并使用几个简单的应用实例来说明微格式的应用,列举了一些和微格式有关的工具,并在文章最后对微格式在真实世界的使用进行了展示,并对其发展进行展望.微格式入门性文章,原文发布时间为2007年7月.

微格式的官方网站是这样描述微格式的产生和应用的:

微格式将人类作为首要的考虑因素,然后才是考虑的数据的机读性,它是建立在已经被广泛使用的标准之上的一套简单开放的数据格式.

因为微格式是建立在广泛采用的标准之上的,这就意味着发布者只需要为原始网页上的HTML标签添加一些额外的语义化的代码就可以了.微格式赋予了HTML元素超越其本身语意的含义,这是一个粉碎,混合以及聚合的过程.举个例子,通过在网页上为一个即将发生的事件添加一些语义化的标记,例如事件发生时间这些属性就会被类似个人事件管理器的这类服务或者软件所抓取.

微格式所涉及的全部是页面上的语义化信息的表现,它将信息以一种非直观的方法表达出来.将这种将语义化的信息直接放入到HTML代码中的方法并不是一个新鲜事物,在web产业化时期,人们就将这个概念讨论了不止十年,但是,直到在许多志愿者不断的发布文档,提供支持,编撰代码库和开发一系列工具之后,微格式才真正展现在我们眼前.

继续阅读这篇文章 »

一直感叹Mac机下textmate的语法着色和由bundle实现自动完成功能.windows下的类似的有intype和e-texteditor.基本上黑色的那个theme的语法着色实现的都不错.最近一直在ubuntu下使用aptana for eclipse,aptana可以自定义语法着色功能,在网上google一下,找到几个已经配置好的col文件,但是下载下来实现效果都不算好.自己花了一点时间在win下按照e-texteditor的cobalt theme简单了配置了一下aptana的css,html,javascript的语法着色.需要的可以试一下.

看一下截图,分别是javascript,html,CSS语法着色效果:

下载地址:

http://files.cheshirecat.cn/aptana.tar.gz

Helvetica是在西方社会最常见的字体之一,主要应用于平面设计产品(Graphic Design).字体和微软创造的Arial字体几乎相同,不过似乎Arial字体多见于屏幕(Screen)之上.

2007年是Helvetica字体诞生50周年.纪录片导演Gary Hustwit于当年12月份将一部名为Helvetica的字体纪录片搬上了荧幕.由于一直等待的中文字幕迟迟没有发布,便找来英文字幕,夹生的把这部片子看完了.当然,正如这部片子的名称所反应的一样,片中充塞着对helvetica的称赞和炫耀,其他的更多是设计师,无论是字体设计师和平面设计师对设计这个行业以及设计和社会的交互的各种的观点.

影片中采访的设计师们对字体的表现形式,表现力和字体和空间(space)的关系都有比较普遍的观点,看一下影片中的对话就可以明白.

Massimo Vugnelli解释字体和空间的关系时是这么说的:

We think typography is black and white.Typography is really white, it’s not even black.lt is the space between the blacks that really makes it.ln a sense it’s like music,it’s not the notes, it’s the space you put between the notes that makes the music.

我们认为字体是黑与白的交合,字体其实是白色的,根本不是我们所说的黑色.黑色线条之间的空白形成了字体.形象一点就像音乐,创造音乐的不是那些音符,而是音符和音符之间空白创造了它.

继续阅读这篇文章 »

原文名称:Creating Sexy Stylesheets
原文地址:http://www.thinkvitamin.com/features/design/creating-sexy-stylesheets
译文地址:http://www.cheshirecat.cn/web-standards/65.htm

作为一个CSS方面的专家,所做的不只是记住选择符(Selectors)那么简单,提升样式表的效用和可维护性,以及设计蓝图和管理工作流程都是工作的一部分.在本篇文章中,Jina Bolton给出了10个CSS技巧提示,这些内容是由对12位顶尖的设计者的调查提炼而来.

接下来,我将重点放在创建性感的样式表方法的讨论之上.一旦CSS被用来创建具有魅力的网站,CSS的书写事实上就已经成为了艺术.使用何种方法创建,架构以及管理CSS成为了一件美妙的事情.

那么怎么创建这些性感的样式表?样式表应该具有那些特征呢?

几个月前,我有幸出席了在俄勒冈州波兰特岛所召开的Web Visions 2007的主题会议.在准备我的演讲报告时,我调查了12位工作在网页设计方面的设计人员和开发人员.基于调查的结果,再结合我自己的工作经验,我编写了下面的一个列表用来在创建样式表的时候给予自己以适当的提醒.

01. 保持CSS脱离标记

使用链接或者导入样式表的方法对于中阶或高阶的CSS开发人员来说都是再正常不过的事情,但是我在这里依然会强调一下这种方法的重要性.我见过的许多站点,在创站之初,CSS文件很整洁,组织的也井井有条,但是随着时间的推移,这些文档由于内嵌的甚至内联(inline)的样式出现而变得杂乱无章,一方面可能是由于给予的更新期限很短,另一方面或许就是纯粹的由于懒惰.

你正忙于一个拥有成千上万条的渠道内容同时出现的网站的大面积更新,给你的期限很短,所以你就选择了使用内嵌或者内联样式这样一些”快速修补”的方法.一些年过去了,习惯依然…,直到有一天你被告知这个站点需要重新设计,但是所有的内容仍然不变,这个时候而你只有一个星期去完成.想象一下,这将是一个怎样的境况.

继续阅读这篇文章 »

原文名称:Creative Use of PNG Transparency in Web Design
原文地址:http://www.digital-web.com/articles/web_standards_creativity_png/
译文地址:http://www.cheshirecat.cn/web-standards/39.htm
原文来源:
摘录自网页标准创造力(Web Standards Creativity)一书,作者为Cameron Adams, Mark Boulton, Andy Clarke, Simon Collison, Jeff Croft, Ethan Marcotte, Derek Featherstone, Ian Lloyd, Dan Rubin及Rob Weychert;出版社friends of ED.版权所有 Jeff Croft 2007,Apress 出版公司许可使用.

PNG, GIF, and JPEG

PNG图像在网页设计领域中应用很大程度上被忽视了,大部分都有很好的理由.直到最近, Internet Explorer 7的发布才有所改观.尽管还无法在所有的浏览器中实现这种图像格式的所有特征,但是这样一来至少它已经可以在所有的浏览器中正常稳定的工作,因为 Internet Explorer 7对PNG的支持以及在对低版本的浏览器使用CSS技巧,这样很大程度上了促使PNG图片在设计工作中的应用.

PNG,通常将其发音为”ping”,表示便携式网络图像(Portable Network Graphics),是一种无损压缩的位图格式.更通俗点说,是一种在不降低图片质量的情况下去减少图片大小的方法.它最初的出现是为了替代已经到处可见的GIF格式,对图像软件来说,后者通常需要获取一个GIF专利权(伴随GIF/LZW专利权的过期,它的专利权也不复存在).PNG也是一个国际标准(ISO IEC 15948:2003),同时也是W3C官方推荐的图像格式.

另外,作为一个免费可用的格式, PNG提供给设计者很多超越GIF的专有特征:

• 更大的压缩比:对于大多数图象,PNG比GIF 文件更小;
• 更大的色深:PNG提供48位真彩色,而GIF只提供了256位色;
• α通道透明:GIF只提供2进制透明,如果启用α通道,PNG提供实质上能提供无限制的透明效果.

值得提及的是PNG不支持GIF格式所支持的动画,这里需要涉及到一个叫做MNG(Multiple-image Network Graphics)标准,它可以使PNG实现动画,不过还没有被广泛的支持.
继续阅读这篇文章 »