随笔分类 -  前端

摘要：HTML5，被传为Flash 的杀手，是一种用于web 应用程序开发、具有变革意义的网络技术。HTML 5提供了一些新的元素和属性，其中有些是技术上类似和标签，但有一定含义，例如和。这种标签将有利于搜索引擎的索引整理、小屏幕设备和视障人士使用。同时为其他浏览要素提供了新的功能，通过一个标准接口，如和标记。 阅读全文

摘要：淘宝网的语音搜索也有了一阵子了，但似乎都没看到相关的博客或帖子在说这个如何实现，今天查了点资料，发现原来实现是如此简单，可能是因为太简单了，也就没有人讨论了吧 阅读全文

摘要：Dreamweaver 可以连接到使用 Subversion (SVN) 的服务器，Subversion 是一种版本控制系统，它使用户能够协作编辑和管理远程 Web 服务器上的文件。Dreamweaver 不是一个完整的 SVN 客户端，但却可使用户获取文件的最新版本、更改和提交文件。 阅读全文

摘要：Web2.0带给我们更好的用户体验和更炫更酷的效果，javascript，flash, Silverlight都是跃跃欲试。目前应用最多的还是javascript,所以你会经常看到很多web2.0网站有n多的js和css，这时管理这些文件和如此多的代码怎么提性能提升的问题也来了。以下就来讲讲我目前想到的一些问题吧 阅读全文

摘要：现在哪里还找得到不引入JavaScript脚本文件的Web应用？使用脚本文件的好处多多，其中最重要的可能就是提供缓存能力了。使用脚本文件之后再加上缓存，可以大大降低数据传输量，提高页面打开的速度。不过脚本文件的引入也不是简单得不值一提，我们完全有能力来优化它。 阅读全文

摘要：在讨论这次的主题之前，我们现在看一下脚本优化的另一个问题，就是“优化难度”。在这里我所说的“优化难度”是指优化一张页面时的修改难度。例如在前一片文章中，使用document.write来引入脚本的话，其“优化难度”会非常的低——没有任何副作用，不用修改其它任何代码。不过它的效果似乎还不太理想，因为仅仅优化了IE下的体验，在FireFox里却没有任何作用。 阅读全文

摘要：我们已经知道，脚本文件的并行下载能够提高页面的加载速度。但是目前还有一个急需解决的问题，那就是对于FireFox浏览器的优化。在我们之前使用的优化方法，无论是简单实用的document.write还是食之无味的defer属性，FireFox浏览器都对此置若罔闻。不过FireFox也不是绝对地“冥顽不灵”，开发人员还是有方法对它进行优化的 阅读全文

摘要：现在的Web项目总是离不开大量JavaScript，而JS文件的体积也越来越大，也越来越影响页面的感知性能（Perceived Performance）。因此，我们会对JS文件进行压缩，一方面是使用Gzip，而另一方面则是去除JS文件里的注释、空白，并且压缩局部变量长度等等。对于一些成熟的类库来说，它们本身都会提供“完整注释”以及“强烈压缩”两个版本。但是，有时候我们需要自己修复类库里的bug，这只能在注释版中修改，对于压缩版自然就无能为力了。此外，自定义的脚本文件一般也值得一压。因此我在项目中时常会备一个脚本压缩工具。 阅读全文

摘要：从传统意义上来说，这个站点的各方面都属中规中矩。不过作为一个以客户端为中心的Web应用，其性能，尤其是它的感知性能（Perceived Performance），经常会严重受制于浏览器本身。一个没有对客户端数据访问模型经过精心设计和优化的应用，其导致的结果往往就是无法充分利用带宽，让用户等待的时间变长。换句话说，其Perceived Performance需要进一步的提高。 阅读全文

摘要：SoundManager是 一个JavaScript库，通过它开发者可以控制Web上音频和视频的播放，它包装了Flash sound API，通过JavaScript和ActionScript和通信，来实现了多媒体的互动，所以浏览器需要启用相关版本以上的Flash Player插件（当然这不是问题）。这里介绍一下它的用法： 阅读全文

摘要：标记主要用于图像地图，通过该标记可以在图像地图中设定作用区域（又称为热点），这样当用户的鼠标移到指定的作用区域点击时，会自动链接到预先设定好的页面 阅读全文

摘要：图片（地图）热点区域高亮显示研究 阅读全文

摘要：YSlow是yahoo美国开发的一个页面评分插件，非常的棒，从中我们可以看出我们页面上的很多不足，并且可以知道我们改怎么却改进和优化。 仔细研究了下YSlow跌评分规则。 阅读全文

摘要：换肤原理,准备N套皮肤CSS,放在webroot/css/red/test.css, webroot/css/blue/test.css…… 程序员只需要通过Cookie来控制red, blue这里的目录,将这里目录变成变量即可,单页面通过DOM操作Link即可实现,框架页面同样,通过递归即可实现全站换肤 阅读全文

摘要：如果一提到交互设计，你就想到画线框图或原型图，那你只对了五分之一。交互设计是一个过程，从开始到结束有一套系统的流程。原型图只是其中的一个环节。 当接到一个设计项目，怎么开始？都应该做哪些工作？怎样尽可能的保证交付物满足既定的功能以及用户体验层面的易用性？ 第一步，是任务分析，列出界面所要完成的所有任务。第二步按各任务确定页面流程，建立信息架构。接下来是创建统一的页面布局包括分区等。然后在页面布局的基础上进行原型设计，可以是低保真和高保真的原型图。最后编写设计说明。 阅读全文

摘要：这是一个对web开发人员很有用的插件：Web Developer Extension。它可以高效的查看一个网页所包含的所有东西甚至能做得更多更好。比如： * 检查页面包含的所有css设定 * 检查页面的所有javascript * 调用dom inspector查看dom对象， * 对改页面添加用户自定义的css文件（这样你可以一次用自己不同版本或主题的css文件来检查不同的layout情况，而完全不需要在多个页面版本之间切换。） * 过滤图片，可以设定隐藏图片，标注没有alt标签或者没有title标签的图片，以确定你的页面是否更加符合WAI的要求。 * resize网页，以便于确定在不同分辨率情况下的页面layout情况。 * 可以调用几乎所有的标准化校验器,包括css,html,wai,link 等校验器。这样能够非常高效的进行标准化校验而不需要在几个不同的校验器之间烦人的切来切去。 * 多种标记功能，比如标记区块，标记不推荐使用的标签，标记表格等等。 你只要逐个检查每一个主要功能按钮，都会让你有不少的惊喜。 阅读全文

摘要：网页竖式菜单，很好的菜单 阅读全文

摘要：系统模型接近用户的心智模型是优秀界面的主要作用。一般而言，可用性衡量网站交互方式的难易程度，也是衡量网页设计的重要标准。本文总结了社区媒体和网站的关键性特征，举例讨论了这些设计背后特征、技术和概念的重要性及其原因。这些可用性简单实用，可以应用在几乎所有的界面设计中。 阅读全文

摘要：1.节点大小和颜色可任意设置 2.节点包含一个标题和一组隐藏的元数据 3.支持选择模式，可单选或多选 4.节点可以添加链接 5.四种布局方式：顶部、底部、左边和右边6.完全由js绘制，支持IE，FF，效果像MindManager软件绘制出来的意义，适合做流程图展示 阅读全文

摘要：Fusioncharts的优点：图表渲染速度快，外观及交互方式很炫，可以导出为图形，允许将其嵌入到报告中。 Highcharts的优点：灵活性好，可以随意修改图表模板参数，Ajax支持。 阅读全文