当前位置：主页 > 平面设计

最新发布

打开网页速度提升的简单而有效的方法
打开网页速度提升的简单而有效的方法

网页尽可能的快速加载对网站非常重要；用户希望快速的查看他们想要看的页面，假如你不能满足他们，他们就会另寻它处。在这篇文章中，你会看到五种为你的网页加速的简单而有效的技术的相关讨论。在决定什么出问题之前，知道网站的加载时间是第一步。它也能让你知道你是否需要为网站加速进行更改。在我们开始之前，如果你还没有安装YSlow, 请安装。他是Mozilla Firefox的一个扩展，你可从下面的链接找到它：第一，让我们浏览Six Revisions网站，我们都使用相同的例子进行测试（仅需要在新的标签或者浏览器窗口中打开）。在浏览器的有效叫，有里程表的一栏（如图1）。在其旁边，当网页完成加载以后，你会看到"YSlow"和数字。数字代表浏览器加载网站所花费的时间(以秒计)。我们希望这个数字保持尽可能低的水平。图 1: YSlow图标和显示网页加载时间的里程表多数情况下，导致网页加载时间长的一个或者一组原因如下：我们一会将要讨论这些。

共 3 次浏览
精确测量网页的软件:FastStone Capture
精确测量网页的软件:FastStone Capture

作为一名合格的页面重构者，其实基础能力项有一条：网页还原设计稿。你能做到页面与设计稿丝毫不差吗？有人可能会想，又不是造原子弹，哪能一像素不差啊？我想说: 细节真的很重要！细节决定成败，真可谓失之毫米差之千里，如果你是想打造一个精品项目真的有那么可怕。所以在前面嗦那么多是想大家多重视页面细节问题，真的要把页面当原子弹来做。这里分享一下我工作中的一点经验吧，请多多拍砖。第一步：打蛇打七寸——视觉规范有时候我们从设计师那里拿到的设计稿不一定是精确无误的，例如：同一类的模块标题文字，一个地方是13PX，另外一个地方是14PX；一个页面有多种字体颜色肉眼看起来一样却实际取到的色值不一样；每个段落的行高不一样；同一类型的弹出框多种尺寸；等等…… 这样的情况，我们不能为了还原设计稿而还原设计稿。为了减少与设计师沟通上的成本，重构师不得不督促设计师做前期整站的视觉规范，把一些公共能约定的内容以文档的形式写明，后期严格执行起来。设计师最好是在页面开始制作前定好视觉规范，这样可以大大减少页面制作后期联调的成本。另外页面制作可以对模板化的东西前期做统一的规范，如字体、ICON、边框、背景色、间距等做统一的class接口，等后期设计规范固定下来后有变动的地方调起来就很容易了。第二步：万事俱备，只欠东风——设计稿标注

共 4 次浏览
iOS4.2对支持HTML5新特性
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中调用打印对话框了。

共 2 次浏览
开发web app初探:HTML5本地存储
开发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，我们就需要对数据进行处理了。

共 3 次浏览
新手指引:HTML网页设计web排版实际操作
新手指引:HTML网页设计web排版实际操作

web排版相较平面的优势在于数据灵活性，实际操作通常又有三种情况：版面自适应、视觉自适应、内容自适应。页面应该能适应不同客户端浏览器和分辨率。缩小窗口出横向滚动条在所难免，然后通过web技术来实现多种排版表现。感触颇深。在实践中获取点滴信息设计基础之后再来看这个问题，根据屏幕不同大小，但理想情况下，理论上可以实现只维护单个页面，另外，第一批主要应用表格布局的“所见即所得”网页设计软件的发展助长了表格的应用。我很少看到自适应的，常给人以看起来较实际布局简洁得多的结构。HTML 多栏目的网页。比如门户网站首页，表格布局就这样流行了起来，中表格标签的本意是为了显示表格化的数据，表格布局使网页设计师制作网站时有了更多选择。越重要的页面模块越多，融合了背景图片切片技术，现实网站中，排版难度也就越大。尤其是某种特殊要求的类型，例如：传奇私服，因为这种类型的站点通常要求占用空间小，图片不能太多，而且多数需要宽屏，主要为方便套用JS。在虽然那会我们用的显示器大些才17，GIF 如微软的“关于 占位”。占位图片控制留白的时期。表格中的 一些主流的公司甚至训练设计师如何使用 GIF 但在多窗口工作时确实方便。占位;有如下图的菜单，更早没试过。根据激活窗口个数按需切分屏幕。如果没记错的话，GIF 自win2000就已经用了，HTML同一时期也是大量应用 分别提供有“横向平铺窗口、纵向平铺窗口”的功能，在windows系统任务栏空白处单击右键。某些软件自动生成的表格如此复杂以至于许多设计师不可能从头手写代码(例如每行只有 1px 即使是稍微复杂一点儿的网页(比如多栏目页面)，高却包含了几百列的表格)。设计师们都要依赖于表格来创建。根据客户端请求分析再输出，layout和wide 适应800和1024px分辨率，大概是雅虎网站改版开了先河。layout两种模式。在学习《客户端动态网页设计实用教程》之前，还安排了相应内容的综合实验。主要内容有HTML语言、CSS样式表、JavaScript脚本语言、DHTML、过滤与转换技术、基于Web的组件等。针对上述内容，最后给出了若干个网页中常用的应用示例。 另外还介绍了客户端网页代码的编写方法与技巧，此外，在教程中各章节中列举了许多典型的应用案例。最好具有一门计算机高级语言的基础。

共 2 次浏览
Web的真谛:HTML5到底是什么意思
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开发领域是这样。纵观人类历史，像国家和社会这样大规模的构建活动背后，同样也有设计原理。

共 2 次浏览
HTML5标签、属性、事件及浏览器兼容性速查表
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格式。

共 2 次浏览
html5实例解析:开发web app的过程
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，我们就需要对数据进行处理了。

共 2 次浏览
展示网站特色：大字体的网页设计风格
展示网站特色：大字体的网页设计风格

大大的字体设计是一个很好的展示网站特色的方法，它通常可以很好的向用户传达网站信息，一目了然，并给人印象深刻。很多网站设计中采用了这种方法，在页面最醒目的地方展现最有创意的字体设计，通常，这些大字体就是网站的logo或者标语/口号。本文展示国外80多个优秀的在网页设计中采用大字体的案例，以供参考。当然，随着各大浏览器对CSS3特性的支持，基于font-face和文字渐变的设计会越来越多，这种经典的设计方法会被广泛应用。

共 3 次浏览
HTML5标记div、section、article使用说明
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 还警告说：

共 3 次浏览
共计26043条记录 上一页 1.. 1187 1188 1189 1190 1191 1192 1193 ..2605 下一页