Front Tech

IxEdit原型交互设计工具

某人是Firework的忠实用户,Firework设计完成后可以直接导出为HTML,做原型非常方便。但近几年Axure开始流行,于是某人被迫投身Axure门下,当时MAC版的Axure问题多多,这让他很不高兴,四处搜罗可以重现Firework荣光的玩意,最近他找到了IxEdit,但一直装不上,于是直接扔给我捣鼓,故在此汇报研究成果。 IxEdit可以让设计师根据自己的想法设计页面的交互行为,并生成 jQuery+ jQueryUI的代码。它不是原型设计工具,而是一个js代码生成器,只专注于交互效果,所以它和一些只能生成原型,不能做交互效果的工具——比如Firework是相当绝配的。相比Axure,IxEdit依靠Web浏览器来运行,不受平台的制约,而且生成的代码也可以直接使用。目前还是Beta版,也许正式release的时候会有更完善的功能。 Install 之前Web开发中,本地存储是个很麻烦的问题,于是Google开发了Google Gears,并将其内置在Chrome中,但HTML5推出后这个问题已经被解决了,Google不再更新Google Gears,而且Chrome10以上版本中去掉了Google Gears,于是这就造成了麻烦,大家都使用的是高版本的浏览器,而且通常都是非Windows环境,所以很难安装Google Gears。我把ixEdit对Google Gears依赖的部分先注释掉了,现在保存还有问题,但是可以运行,之后有空我会慢慢修正Bug。点这里查看不依赖Google Gears的ixEdit。 目前已经测试通过的环境: Windows: 1.直接使用Chrome10以下版本;2.使用IE9以下版本打开并安装Gears for windows; 3.使用Firefox3.6以下版本打开并安装Gears for windows; Linux: 1.直接使用Chrome10以下版本;2.在Firefox3.6中安装本文后面的扩展; Mac: 至少目前在Mentor的机器上试过了几个版本的Chrome和Safari,还未成功= =|| 只要装好了Google Gears,剩下的就很简单了,点击这里下载Package包,在HTML中引入js和样式:

Continue Reading
Front Tech

YAML对三栏布局中CSS浮动问题的解决

Preface Mentor在项目中提到一种叫做YAML的置标语言。在网上搜了一下,这是一种强调可读性,以数据为中心的置标语言,YAML的意思是YAML Ain’t a Markup Language(YAML不是一种置标语言),语法比较简单,Structure通过空格来展示。Sequence里的项用”-“来代表,Map里的键值对用”:”分隔,知道这几点就可以了,YAML比JSON还简单,借用官方的说法,是一种非常Friendly的格式。 很有趣的是我同时搜到了一个CSS框架,也叫YAML,不过这里是YAML是Yet Another Multicolumn Layout(另一个多栏布局)的缩写。本文主要针对的是后一个YAML,但不侧重于它的用法,而是学习它的写法。 YAML YAML又一次体现了德国人的严谨作风,它有一份优秀易读,循序渐进的文档,有良好的目录结构,详细的注释,兼容所有我能找到的浏览器(包括IETEST上的IE5.5),而且考虑到了对网页打印格式的兼容。 在继续以下的无聊内容之前,先来看一个有趣的东西,YAML的在线Builder,可以以所见即所得的制作样式,它可以使用YAML已所见即所得的方式生成可用的HTML+CSS。

Continue Reading
Front Website

为什么要用960px?——网页内容宽度分析

液晶还没普及的年代,网页设计需要考虑800×600的分辨率。但如今800×600的分辨率使用率不到2%,已经可以忽略了。比这个分辨率高一级别的1024×768,使用率接近50%(国内),所以很多网站都是以1024的宽度为标准进行设计的,最常见的页面宽度是两种:1004和960。 早期的网页设计师使用1004px作为页面宽度,是基于这样的考虑:在1024*768的分辨率下打开IE,左边框宽度是2px,右边滚动条的宽度是18px,于是得出宽度就是1004px了。但这种宽度的设置并不利于栅格化布局的计算,如果选择三栏式的布局,就很难平均分配,所以现在很少有使用1004px宽度的网页了。

Continue Reading