推荐阅读
详细解析日系网页设计的现象和本质
在很多人眼里，日本是一个隐忍、充满禅意的国家。以寺庙、茶道、电子产品而闻名。既传统，又现代。日本的建筑设计、书刊设计受世界瞩目。但是不知怎么的，日本的网页设计风格很怪异。有点像1998年的网页风格。RakutenNicoNicoDougaGigazine看看日本这些最流行的网站(比如 Goo, Rakuten, Yomiuri, NicoNico, OKWave, @cosme)，你会发现他们都有共同点:文字排布紧密图像质量偏低
FW MX 2004 之 Shapes 初体验(二)
大家好，欢迎大家回来继续和我一起早早体验FWMX2004之Shapes带给我们的全新体验！ 在上一节，我们一起详细的研究了工具箱上的Shapes工具组的使用方法，操作技巧，本节我们就来看看Shapes浮动面板带给我们的新奇感受吧！ 首先我们再次来看看Shapes浮动面板都有哪些新东西： 可以看到，Shapes面板里面目前共有9个形状组：Clock(钟表)、Cog(齿轮)、Cube(立方体)、Cylinder(圆柱体)、Frame(像框)、Perspective(透视图)、Tabs(制表符)、Talking(谈话框)、Tube(管子)。接下来我们依次来看看个个形状组的使用方法及技巧。 提示：为什么我们对Shapes面板里面的9个形状对象使用的称呼是“形状组”，大家可以从Shapes面板中任意拖拽形状对象到编辑区，然后执行菜单命令“Modify--Ungroup（快捷键为Ctrl+Shift+G）”，解散群组关系，就会发现这些形状对象都是以群组方式形成的！所以这里我们称其为“形状组”。 提示2：关于形状组的操作技巧，我们会在下面的介绍中马上介绍道，需要注意的是，所有的方法技巧都是在没有打散群组关系的前提下进行的！ 1、Clock（钟表）组 将Clock形状组直接拖放在编辑区上，就会自动出现一个钟表图案，如下图所示。钟表的调整很有意思的，大家可以看到，用鼠标单击钟表后会出现四个调整控制点，下面我们就依次来看看各个调整控制点的作用所在： a、1号点：单击鼠标，会出现背景提示框：“Click to change tick marks（单击改变表盘标记）”，如果单击鼠标，就会改变表盘的时间刻度显示状态，总共有4种显示状态：不显示时间刻度；只显示以0点为起点的90度间隔的时间刻度，共4个刻度；显示以0点为起点的45度间隔的时间刻度，共12各个刻度，也就是12个小时的显示方式；显示60个刻度，也就是60秒的显示方式。大家可以根据自己的需要选择相应的显示方式。
基于Pro/E和ADAMS的少自由度并联机构运动仿真
少自由度并联机构是国际上机器人学研究的热点之一，构造出具有良好性能的少自由度并联机器人的众多构型，以便根据应用要求选择不同性能的机构，是并联机器人机构中的一项重要任务，当前众多研究人员的研究方向都集中于构建新型的少自由度并联机构。根据理论研究出来的众多的少自由度并联机构还需要检验其运动的正确性，传统的方法是通过试验样机制造实物来验证，而近年计算机技术的广泛应用提供了新的方法，那就是虚拟样机技术，这包括了三维CAD建模技术和机械系统运动学等相关技术。 大型的商用动力学仿真软件ADAMS、SIMPACT等集成了最新的多体系统动力学理论成果、各种方便的建模工具、高效的求解器、功能强大的后处理模块以及可视化界面等，用它们来建立机械系统的仿真模型，可以将注意力放在改进模型设计上，而不必关心建立方程、求解方程这些在过去要耗费大量精力的工作，从而大大提高了机械系统仿真的效率。仿真首先要做的是建立少自由度并联机构精确的三维模型，此时用动力学仿真软件就有点力不从心了，特别是对于此类少自由度并联机构，各个运动副的空间几何结构和位置都对整个机构的运动有重大的影响，需要三维建模建立准确的模型。因此，需要借助于三维建模功能很强的CAD软件来建模。 这里以PTC公司的三维建模软件Pro/E和MDI公司的动力学仿真软件ADAMS相结合建立少自由度并联机构的运动仿真模型。首先在Pro/E中建立机构的三维模型，机构的安装位置为机构运动的初始位置。然后利用两个软件的接口程序Mechanism/Pro生成刚体和基本的运动副，把三维模型导入ADAMS进行进一步的完善，添加驱动和约束，进行运动仿真。在整个过程中，需要对建立模型等前续工作进行不断的修改和完善，才能生成所要求的少自由度并联机构的仿真模型。 一、少自由度并联机构的提出 少自由度并联机构新构型的提出有着不同的理论方法，本文中采用的为利用螺旋理论来分析新型少自由度并联机构。利用运动螺旋与力螺旋的对偶关系，以及运动与约束、运动螺旋与反螺旋的对应关系，建立复杂少自由度并联机器人机构类型综合的数学模型。因为并联机器人机构是由支链、动平台和静平 在少自由度并联机构中，三自由度移动并联机构有着广泛的用途。在很多工业应用中，三个方向的移动就已经满足要求，而使用传统的六自由度机构增加了机构的复杂性和控制的难度，因此直接应用三自由度移动并联机构非常合适。此处利用螺旋理论提出一种纯移动三自由度并联机构，通过此机构来说明利用Pro/E和ADAMS完成运动仿真的过程。如图1所示，此机器人支链为三条对称的RPC支链，通过螺旋理论和空间几何分析可得此并联机构动平台应具有三个纯移动自由度。 图1 三支链并联机构模型
最新发布
打开网页速度提升的简单而有效的方法
网页尽可能的快速加载对网站非常重要；用户希望快速的查看他们想要看的页面，假如你不能满足他们，他们就会另寻它处。在这篇文章中，你会看到五种为你的网页加速的简单而有效的技术的相关讨论。在决定什么出问题之前，知道网站的加载时间是第一步。它也能让你知道你是否需要为网站加速进行更改。在我们开始之前，如果你还没有安装YSlow, 请安装。他是Mozilla Firefox的一个扩展，你可从下面的链接找到它：第一，让我们浏览Six Revisions网站，我们都使用相同的例子进行测试（仅需要在新的标签或者浏览器窗口中打开）。在浏览器的有效叫，有里程表的一栏（如图1）。在其旁边，当网页完成加载以后，你会看到"YSlow"和数字。数字代表浏览器加载网站所花费的时间(以秒计)。我们希望这个数字保持尽可能低的水平。图 1: YSlow图标和显示网页加载时间的里程表多数情况下，导致网页加载时间长的一个或者一组原因如下：我们一会将要讨论这些。
精确测量网页的软件:FastStone Capture
作为一名合格的页面重构者，其实基础能力项有一条：网页还原设计稿。你能做到页面与设计稿丝毫不差吗？有人可能会想，又不是造原子弹，哪能一像素不差啊？我想说: 细节真的很重要！细节决定成败，真可谓失之毫米差之千里，如果你是想打造一个精品项目真的有那么可怕。所以在前面嗦那么多是想大家多重视页面细节问题，真的要把页面当原子弹来做。这里分享一下我工作中的一点经验吧，请多多拍砖。第一步：打蛇打七寸——视觉规范有时候我们从设计师那里拿到的设计稿不一定是精确无误的，例如：同一类的模块标题文字，一个地方是13PX，另外一个地方是14PX；一个页面有多种字体颜色肉眼看起来一样却实际取到的色值不一样；每个段落的行高不一样；同一类型的弹出框多种尺寸；等等…… 这样的情况，我们不能为了还原设计稿而还原设计稿。为了减少与设计师沟通上的成本，重构师不得不督促设计师做前期整站的视觉规范，把一些公共能约定的内容以文档的形式写明，后期严格执行起来。设计师最好是在页面开始制作前定好视觉规范，这样可以大大减少页面制作后期联调的成本。另外页面制作可以对模板化的东西前期做统一的规范，如字体、ICON、边框、背景色、间距等做统一的class接口，等后期设计规范固定下来后有变动的地方调起来就很容易了。第二步：万事俱备，只欠东风——设计稿标注
iOS4.2对支持HTML5新特性
事实上，Apple还没有更新Safari文档。这里的信息只是基于在Safari(注：文中的Safari指iOS移动设备中的Safari浏览器，不包括PC和Mac机中的Safari)自身的JavaScript研究和测试上。具体来说，检测到的新特性如下：或许你已经知道，iOS设备都有加速传感器(还有其它的，比如磁力及和陀螺仪)，但是直到现在，网页开发者没有操作这些传感器的权限。Safari现在支持 DeviceOrientation API (W3C草案)，不过，虽然看起来全部的API都是被支持的(包括ondeviceorientation 和ondevicemotion事件)，但是在测试中，我只能成功的使用加速器的数据。如果你已经有了iOS 4.2的设备，可以用Safari浏览器访问 ad.ag/jtjdmj 自行测试。要想检测每秒钟50次加速计数据变化，你需要在window全局对象监听ondevicemotion事件，然后在DeviceOrientationEvent参数上使用accelerationIncludingGravity属性。它有三个值：x、y和z，分别代表每个坐标上的加速度g (gravity,重力)。你可以将加速计数用于游戏，效果或者CSS动画中。1 2 3 4 5 window.ondevicemotion = function(event) { // event.accelerationIncludingGravity.x // event.accelerationIncludingGravity.y // event.accelerationIncludingGravity.z } WebSockets 另一个大更新是对WebSockets的支持。WebSockets是一个尚处于草案状态的W3C HTML5 API，允许JavaScript使用一种开放的双向、双全工连接到一台服务器，通过TCP sockets。这对于聊天和实时应用来说是一个非常好的消息，因为可以大大减少AJAX周期性调用。你将需要一台能够通过一种HTTP握手理解新的WebSocket协议的服务器。如果服务器不支持WebSocket或者由于代理/网关的原因，你将还要依赖一种fallback机制。其实webkit对HTML5表单的支持相对已经比较不错，现在iOS 4.2的Safari开始支持 required属性以及 :invalid CSS伪类。这样的话，下面的代码将展示一个文本框在输入正确的时候显示绿色背景，而不正确的时候显示黄色背景。<style> input { background-color: green; color: white; } input:invalid { background-color: yellow; } </style> <input type="text" required> AJAX2 名为FormData对象，这允许我们很方便的通过Ajax发生表单数据。iOS4.2引入了 AirPrint，一种无限打印方案。也就是说，我们现在可以使用 window.print 来在Safari中调用打印对话框了。
开发web app初探:HTML5本地存储
html5带给我们的不仅仅是更多语义丰富的标签，还有更多更牛逼的特性，比如“离线存储”。 对于台式电脑来说，或者它并没有带来什么惊喜，但是对于移动设备来说离线存储简直就是一个神迹。对于任何拥有支持离线存储浏览器的移动设备，比如iphone，ipod touch，离线存储使得web前端工程师可以很容易的针对它们开发应用程序。前面吹嘘了一段，不过说实在的，html5本地存储就目前来说还是很受限的。其一，浏览器限制，目前只有 Safari 3.1 and later, and in iPhone OS 2.0 and later. 提供了javascript database 原生支持，不过也有 Taffy DB 可以曲线救国。(还没有用过，不敢妄下结论。)。 其二，服务器端需要修改配置，旦如果是自己的服务器就很简单了。下面就以一个简单的offline web app－note book 为例，记录一下为iphone/ipod touch开发web app的过程。不是经验，只是初探。首先，适合iphone/ipod touch 的UI 它并不是本文的重点，有兴趣的同学可以移步这里 。这里只强调一点：你默认做的页面，放到iphone看会变的很窄，字很小。这是因为iphone用它320px宽的屏幕显示了一个默认980px宽的页面，你的内容被按比例缩小了。要解决这个问题很简单，只要在html的head区域加一个meta标记，具体语法请看这里 。 也就是这样：这个问题解决之后我们就可以肆意的使用html5和css3来打造界面了，（针对设备开发可以不考虑兼容性，真是畅快淋漓呀。）我大概做了个丑陋的界面：html代码， CSS代码 (其实你可以不用看，最后有打包的代码)完成了UI，我们就需要对数据进行处理了。
新手指引:HTML网页设计web排版实际操作
web排版相较平面的优势在于数据灵活性，实际操作通常又有三种情况：版面自适应、视觉自适应、内容自适应。页面应该能适应不同客户端浏览器和分辨率。缩小窗口出横向滚动条在所难免，然后通过web技术来实现多种排版表现。感触颇深。在实践中获取点滴信息设计基础之后再来看这个问题，根据屏幕不同大小，但理想情况下，理论上可以实现只维护单个页面，另外，第一批主要应用表格布局的“所见即所得”网页设计软件的发展助长了表格的应用。我很少看到自适应的，常给人以看起来较实际布局简洁得多的结构。HTML 多栏目的网页。比如门户网站首页，表格布局就这样流行了起来，中表格标签的本意是为了显示表格化的数据，表格布局使网页设计师制作网站时有了更多选择。越重要的页面模块越多，融合了背景图片切片技术，现实网站中，排版难度也就越大。尤其是某种特殊要求的类型，例如：传奇私服，因为这种类型的站点通常要求占用空间小，图片不能太多，而且多数需要宽屏，主要为方便套用JS。在虽然那会我们用的显示器大些才17，GIF 如微软的“关于 占位”。占位图片控制留白的时期。表格中的 一些主流的公司甚至训练设计师如何使用 GIF 但在多窗口工作时确实方便。占位;有如下图的菜单，更早没试过。根据激活窗口个数按需切分屏幕。如果没记错的话，GIF 自win2000就已经用了，HTML同一时期也是大量应用 分别提供有“横向平铺窗口、纵向平铺窗口”的功能，在windows系统任务栏空白处单击右键。某些软件自动生成的表格如此复杂以至于许多设计师不可能从头手写代码(例如每行只有 1px 即使是稍微复杂一点儿的网页(比如多栏目页面)，高却包含了几百列的表格)。设计师们都要依赖于表格来创建。根据客户端请求分析再输出，layout和wide 适应800和1024px分辨率，大概是雅虎网站改版开了先河。layout两种模式。在学习《客户端动态网页设计实用教程》之前，还安排了相应内容的综合实验。主要内容有HTML语言、CSS样式表、JavaScript脚本语言、DHTML、过滤与转换技术、基于Web的组件等。针对上述内容，最后给出了若干个网页中常用的应用示例。 另外还介绍了客户端网页代码的编写方法与技巧，此外，在教程中各章节中列举了许多典型的应用案例。最好具有一门计算机高级语言的基础。
Web的真谛:HTML5到底是什么意思
Jeremy Keith在 Fronteers 2010 上的主题演讲下载PPT（PDF）观看视频今天我想跟大家谈一谈HTML5的设计。主要分两个方面：一方面，当然了，就是HTML5。我可以站在这儿只讲HTML5，但我并不打算这样做，因为如果你想了解HTML5的话，你可以Google，可以看书，甚至可以看规范。实际上，确实有人会谈到规范的内容。史蒂夫·福克纳（Steve Faulkner）会讲HTML5与可访问性。而保罗·艾里什（Paul Irish）则会讲HTML5提供的各种API。因此，我今天站在这里，不会光讲一讲HTML5就算完事了。说老实话，在正式开始之前，我想先交待清楚我所说的HTML5到底是什么意思。这话听起来有点搞笑：这会子你一直在说HTML5，难道我们还不知道什么是HTML5吗？大家知道，有一个规范，它的名字叫HTML5。我所说的HTML5，指的就是这个规范。但问题是，有些人所说的HTML5，指的不仅仅是这个规范，还有别的意思。比如说，用HTML5来代指CSS3就是一种常见的叫法。我可不是这样的。我所说的HTML5，不包含CSS3，就是HTML5。类似的术语问题以前也有过。Ajax本来是一种含义明确的技术，但过了不久，它的含义就变成了“用JavaScript来做一切好玩的东西”。这就是Ajax，对不对？今天，HTML5也面临同样的问题，它本来指的是一个特定的规范，但如今含义却成了“在Web上做一切好玩的事。”我说的不是这种HTML5，不是这种涵盖了最近刚刚出现的各种新东东的HTML5。我说的仅仅是规范本身：HTML5。刚才已经说了，我今天想要讲的内容不多，也没有打算介绍HTML5都包含什么。今天我要讲的是它的另一方面，即HTML5的设计。换句话说，我要讲的不是规范里都包含什么，而是规范里为什么会包含它们，以及在设计这个规范的时候，设计者们是怎么看待这些东西的。设计原理设计原理本质上是一种信念、一种想法、一个概念，是你行动的支柱。不管你是制定规范，还是制造一种有形的物品，或者编写软件，甚至发明编程语言。你都能找到背后的一个或者多个设计原理，多人协作的任何成果都是例证。不仅仅Web开发领域是这样。纵观人类历史，像国家和社会这样大规模的构建活动背后，同样也有设计原理。
HTML5标签、属性、事件及浏览器兼容性速查表
HTML 5 可以说是近十年来 Web 标准最巨大的飞跃。和以前的版本不同，HTML 5 并非仅仅用来表示 Web 内容，它的使命是将 Web 带入一个成熟的应用平台，在这个平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。尽管 HTML 5 的实现还有很长的路要走，但 HTML 5 正在改变 Web。为了方便大家学习HTML 5 ，本文与大家分享几份 HTML 5 标签、属性、事件及浏览器兼容性速查表。HTML 5 Cheat Sheet非常完整的一份HTML 5速查表，包括HTML 5 标签、属性、事件及其浏览器兼容性，图片格式。HTML 5 Visual Cheat SheetHTML 5标签速查表，PDF格式。HTML5 Canvas Cheat SheetHTML 5 Canvas速查表，PDF格式。
html5实例解析:开发web app的过程
html5带给我们的不仅仅是更多语义丰富的标签，还有更多更牛逼的特性，比如“离线存储”。 对于台式电脑来说，或者它并没有带来什么惊喜，但是对于移动设备来说离线存储简直就是一个神迹。对于任何拥有支持离线存储浏览器的移动设备，比如iphone，ipod touch，离线存储使得web前端工程师可以很容易的针对它们开发应用程序。前面吹嘘了一段，不过说实在的，html5本地存储就目前来说还是很受限的。其一，浏览器限制，目前只有 Safari 3.1 and later, and in iPhone OS 2.0 and later. 提供了javascript database 原生支持，不过也有 Taffy DB 可以曲线救国。(还没有用过，不敢妄下结论。)。 其二，服务器端需要修改配置，旦如果是自己的服务器就很简单了。下面就以一个简单的offline web app－note book 为例，记录一下为iphone/ipod touch开发web app的过程。不是经验，只是初探。首先，适合iphone/ipod touch 的UI 它并不是本文的重点，有兴趣的同学可以移步这里 。这里只强调一点：你默认做的页面，放到iphone看会变的很窄，字很小。这是因为iphone用它320px宽的屏幕显示了一个默认980px宽的页面，你的内容被按比例缩小了。要解决这个问题很简单，只要在html的head区域加一个meta标记，具体语法请看这里 。 也就是这样：这个问题解决之后我们就可以肆意的使用html5和css3来打造界面了，（针对设备开发可以不考虑兼容性，真是畅快淋漓呀。）我大概做了个丑陋的界面：html代码， CSS代码 (其实你可以不用看，最后有打包的代码)完成了UI，我们就需要对数据进行处理了。
展示网站特色：大字体的网页设计风格
大大的字体设计是一个很好的展示网站特色的方法，它通常可以很好的向用户传达网站信息，一目了然，并给人印象深刻。很多网站设计中采用了这种方法，在页面最醒目的地方展现最有创意的字体设计，通常，这些大字体就是网站的logo或者标语/口号。本文展示国外80多个优秀的在网页设计中采用大字体的案例，以供参考。当然，随着各大浏览器对CSS3特性的支持，基于font-face和文字渐变的设计会越来越多，这种经典的设计方法会被广泛应用。
HTML5标记div、section、article使用说明
HTML Spec: “The div element has no special meaning at all.”这个标签是我们见得最多、用得最多的一个标签。本身没有任何语义，用作布局以及样式化或脚本的钩子(hook)。HTML Spec: “The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.”与 div 的无语义相对，简单地说 section 就是带有语义的 div 了，但是千万不要觉得真得这么简单。section 表示一段专题性的内容，一般会带有标题。看到这里，我们也许会想到，那么一篇博客文章，或者一条单独的评论岂不是正好可以用 section 吗？接着看：“Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen.”当元素内容聚合起来更加言之有物时，应该使用 article 来替换 section 。那么，section 应该什么时候用呢？再接着看：“Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.”section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一个网站的主页可以分成简介、新闻和联系信息等几部分。其实我对这里传达信息很感兴趣，因为感觉 section 和下面要介绍的 artilce 更加适用于模块化应用，这个话题以后会出篇专门的文章来讨论，这里暂时略过。要注意，W3C 还警告说：