设计 归档

  • 看一个小软件，压缩HTML的，比较有意思，就下载试用了一下，还不错额，一般都能压缩10%以上。别小看这10%的HTML，把网站其他图片\JS\CSS一起算进来，至少能给你节约1%的带宽。 不过，我转载的最重要的原因是支持原创~~ 毕竟刚做的，可能存在BUG 原文：http://www.cnblogs.com/sohighthesky/archive/2010/05/14/uedsky-html-compressor.html 下载试用：Uedsky HtmlCompressor（应该至少需要 .net 2.0才能运行） 程序版本：1.0.0.0 1.前言 写这个小工具是因为我的首页要用，看到很多地方（baidu,google等首页）提到Html压缩，但是好像没有见过哪里有工具可以下载，所以就 想到自己写，一般情况下情况下只用压缩首页，或者生成静态页后可以压缩，就这个小工具来说，我写正则也没有考虑到效率（css部分参考yui compressor只顾到了程序可读性）(认为Html不需要压缩的飘过)。 2.压缩比率 个人觉得Html文件还是有必要压缩的，使用这个小工具Cnblogs的首页可以压缩18%，我的首页也可以压缩15%; 3.特点：无损压缩 由于 pre,textarea中的换行等内容会直接显示，所以不对其压缩，script标签由于js压缩比较复杂这里就不处理，如果内联javascript 文件比较多，请先使用yui compressor压缩后放到页面里，压缩style标签里的css(核心参照yui compressor的源码)，程序执行步骤如下： 1.正则(?is)<!–(?!\[if).*?-->匹配注释，将所有html注释去掉，这里排除右边为[if的，防止 将ie条件注释压缩掉 2.然后(?is)<(pre|script|style|textarea)[^>]*>.*?，将这些标 签里内容提出来保存，防止替换时出错 3.将html标签之间的空白去掉：(?<=<[^>]+>)\s+(?=<[^>]+>) 4.去掉所有的换行：[\r\n]+ 5. 然后执行一个可选项：是否将多个空白换成一个，在Html中多个空白会解析成一个，所以默认为true 6.然后恢复保存的pre等标签内容...

    Uedsky HtmlCompressor v1.0发布(前端性能优化之Html压缩)

    在 2010年05月14日 上发表 | 没有评论
    看一个小软件，压缩HTML的，比较有意思，就下载试用了一下，还不错额，一般都能压缩10%以上。别小看这10%的HTML，把网站其他图片\JS\CSS一起算进来，至少能给你节约1%的带宽。 不过，我转载的最重要的原因是支持原创~~ 毕竟刚做的，可能存在BUG 原文：http://www.cnblogs.com/sohighthesky/archive/2010/05/14/uedsky-html-compressor.html 下载试用：Uedsky HtmlCompressor（应该至少需要 .net 2.0才能运行） 程序版本：1.0.0.0 1.前言 写这个小工具是因为我的首页要用，看到很多地方（baidu,google等首页）提到Html压缩，但是好像没有见过哪里有工具可以下载，所以就 想到自己写，一般情况下情况下只用压缩首页，或者生成静态页后可以压缩，就这个小工具来说，我写正则也没有考虑到效率（css部分参考yui compressor只顾到了程序可读性）(认为Html不需要压缩的飘过)。 2.压缩比率 个人觉得Html文件还是有必要压缩的，使用这个小工具Cnblogs的首页可以压缩18%，我的首页也可以压缩15%; 3.特点：无损压缩 由于 pre,textarea中的换行等内容会直接显示，所以不对其压缩，script标签由于js压缩比较复杂这里就不处理，如果内联javascript 文件比较多，请先使用yui compressor压缩后放到页面里，压缩style标签里的css(核心参照yui compressor的源码)，程序执行步骤如下： 1.正则(?is)<!–(?!\[if).*?-->匹配注释，将所有html注释去掉，这里排除右边为[if的，防止 将ie条件注释压缩掉 2.然后(?is)<(pre|script|style|textarea)[^>]*>.*?，将这些标 签里内容提出来保存，防止替换时出错 3.将html标签之间的空白去掉：(?<=<[^>]+>)\s+(?=<[^>]+>) 4.去掉所有的换行：[\r\n]+ 5. 然后执行一个可选项：是否将多个空白换成一个，在Html中多个空白会解析成一个，所以默认为true 6.然后恢复保存的pre等标签内容...

    继续阅读...

  • 几款不错的工具，推荐一下 Userfly Userfly可以提供免费的网页访客动作记录服务。只需要在网页中添加一段简单的Javascript代码，就可以记录访客从打开该网页到关闭整个过程中的动作。 Userfly能够记录的内容包括鼠标的移动、点击以及键盘输入等动作。下面这个视频很好的讲解了Userfly的使用方法和主要的功能http://userfly.com 免费用户每个小时记录10位用户（10个IP）的动作。Userfly也提供收费服务，除了可以记录更多的用户外，还支持身份验证和网页加密。对于网站拥有者来说，Userfly可以很方便的对用户行为进行检测和分析，通过A/B Testing等方法为网站UI/UE提供非常有价值的信息。但是对于很多网页访问者来说，如果知道他们所浏览的网页有这样的功能，可能就会敬而远之了。 Mouseflow mouseflow是一款在线分析工具，它能对访客的浏览习惯和鼠标操作行为进行跟踪，从而获取人们对页面的关注范围和操作习惯，为你对页面进行优化提供了重要依据。它将汇总分析人们在页面上的鼠标操作动作，并以直观的“热区图”形式反映出来。 打个比方：大家都见过baidu和google的页面热区图，从图中可以看出用户对于页面最点击最多，也就是最关注的区域。那么，如果你的站出现在红、黄色区域中，将收到的点击次数也将是最多的。 在自己的站上分析出热区图数据，把访客最关注的内容放到热区范围内，形成对网站内容和布局层面的优化。我们就用mouseflow来完成这项工作。首先需要在你的网站上部署mouseflow跟踪代码。去http://mouseflow.com注册，然后添加需要进行鼠标动作跟踪的网站之后就能得到跟踪代码，把它部署到你网站中。然后mouseflow就可以为你记录鼠标动作了。但给出分析数据需要等几个小时的时间。当然，时间越长，记录的鼠标数据也越多，分析出来的数据也越准确。等待几天后再登陆mouseflow，就可以看到mouseflow详尽的统计数据了。点击View stats，可以查看网站的状态数据。mouseflow可以为免费帐户每月保存并分析100条操作数据。在这个页面里还有：页面浏览量、平均访问深度、平均访问时长、web页面情况、最流行页面、最热页面等统计数据。便于对网站的整体情况有一个大致了解。 接下来是查看跟踪记录。在这个页面中我们可以查看到访客情况信息。如访客的地理位置，来源链接，进入页面，浏览页面量，停留时间，浏览器等。最酷的是，点击绿色播放按钮，还可以回放某访客在你页面上的每一次鼠标操作动作。看看他在浏览你的页面时做了怎样的操作。比如鼠标在哪里点击了，并且完整地回放是怎样浏览你的页面的。 然后就是重点中的重点了：热区分析。mouseflow可以分析你的每一个页面数据。比如一个页面的的鼠标点击热区，以及视觉热区，红色为热，蓝色为冷。 ClickTale ClickTale是一家国外的免费网站统计服务网站，但ClickTale并不以流量统计见长，它是对你的网站访客浏览行为进行分析的一个工具，以类似视频的方式将访问者在你的网站上进行的操作全部记录下来，你可以在线观看也可以下载到电脑上。利用ClickTale的访客行为视频记录，可以帮你更好的布局你的网页，给访问者带来更好的用户体验，以使你的网站回头客越来越多！有点类似Free8之前介绍的CrazyEgg，不过ClickTale提供的是访客动态行为记录，CrazyEgg提供的是网页热点分析图像，各有所长，可同时使用，相互参考。 网址：http://www.clicktale.com

    免费的用户行为跟踪采集

    在 2010年05月7日 上发表 | 没有评论
    几款不错的工具，推荐一下 Userfly Userfly可以提供免费的网页访客动作记录服务。只需要在网页中添加一段简单的Javascript代码，就可以记录访客从打开该网页到关闭整个过程中的动作。 Userfly能够记录的内容包括鼠标的移动、点击以及键盘输入等动作。下面这个视频很好的讲解了Userfly的使用方法和主要的功能http://userfly.com 免费用户每个小时记录10位用户（10个IP）的动作。Userfly也提供收费服务，除了可以记录更多的用户外，还支持身份验证和网页加密。对于网站拥有者来说，Userfly可以很方便的对用户行为进行检测和分析，通过A/B Testing等方法为网站UI/UE提供非常有价值的信息。但是对于很多网页访问者来说，如果知道他们所浏览的网页有这样的功能，可能就会敬而远之了。 Mouseflow mouseflow是一款在线分析工具，它能对访客的浏览习惯和鼠标操作行为进行跟踪，从而获取人们对页面的关注范围和操作习惯，为你对页面进行优化提供了重要依据。它将汇总分析人们在页面上的鼠标操作动作，并以直观的“热区图”形式反映出来。 打个比方：大家都见过baidu和google的页面热区图，从图中可以看出用户对于页面最点击最多，也就是最关注的区域。那么，如果你的站出现在红、黄色区域中，将收到的点击次数也将是最多的。 在自己的站上分析出热区图数据，把访客最关注的内容放到热区范围内，形成对网站内容和布局层面的优化。我们就用mouseflow来完成这项工作。首先需要在你的网站上部署mouseflow跟踪代码。去http://mouseflow.com注册，然后添加需要进行鼠标动作跟踪的网站之后就能得到跟踪代码，把它部署到你网站中。然后mouseflow就可以为你记录鼠标动作了。但给出分析数据需要等几个小时的时间。当然，时间越长，记录的鼠标数据也越多，分析出来的数据也越准确。等待几天后再登陆mouseflow，就可以看到mouseflow详尽的统计数据了。点击View stats，可以查看网站的状态数据。mouseflow可以为免费帐户每月保存并分析100条操作数据。在这个页面里还有：页面浏览量、平均访问深度、平均访问时长、web页面情况、最流行页面、最热页面等统计数据。便于对网站的整体情况有一个大致了解。 接下来是查看跟踪记录。在这个页面中我们可以查看到访客情况信息。如访客的地理位置，来源链接，进入页面，浏览页面量，停留时间，浏览器等。最酷的是，点击绿色播放按钮，还可以回放某访客在你页面上的每一次鼠标操作动作。看看他在浏览你的页面时做了怎样的操作。比如鼠标在哪里点击了，并且完整地回放是怎样浏览你的页面的。 然后就是重点中的重点了：热区分析。mouseflow可以分析你的每一个页面数据。比如一个页面的的鼠标点击热区，以及视觉热区，红色为热，蓝色为冷。 ClickTale ClickTale是一家国外的免费网站统计服务网站，但ClickTale并不以流量统计见长，它是对你的网站访客浏览行为进行分析的一个工具，以类似视频的方式将访问者在你的网站上进行的操作全部记录下来，你可以在线观看也可以下载到电脑上。利用ClickTale的访客行为视频记录，可以帮你更好的布局你的网页，给访问者带来更好的用户体验，以使你的网站回头客越来越多！有点类似Free8之前介绍的CrazyEgg，不过ClickTale提供的是访客动态行为记录，CrazyEgg提供的是网页热点分析图像，各有所长，可同时使用，相互参考。 网址：http://www.clicktale.com

    继续阅读...

  • 关于GOOGLE的这些工具，倒是用过一些，有些的确是非常有帮助的。 今天又偶然看到这一个工具列表，比较全，有很多没用过。收藏一下，以后试试。 —————————————————————————————————— Google 的使命是 Web，在 Google 眼中，未来的一切应用都将 Web 化，一直以来，Google 为 Web 开发与设计者推出了大量免费工具，让他们更好地创建，维护，改善他们的 Web 站点，这些工具包含了开发，分析，维护，修补等等用途，本文将介绍15款这样的工具。 1. Google Chrome Developer Tools 这是 Google Chrome 中类似 Firefox Firebug 以及 Web Developer Toolbar...

    Web 开发与设计之 Google 兵器谱

    在 2010年04月19日 上发表 | 没有评论
    关于GOOGLE的这些工具，倒是用过一些，有些的确是非常有帮助的。 今天又偶然看到这一个工具列表，比较全，有很多没用过。收藏一下，以后试试。 —————————————————————————————————— Google 的使命是 Web，在 Google 眼中，未来的一切应用都将 Web 化，一直以来，Google 为 Web 开发与设计者推出了大量免费工具，让他们更好地创建，维护，改善他们的 Web 站点，这些工具包含了开发，分析，维护，修补等等用途，本文将介绍15款这样的工具。 1. Google Chrome Developer Tools 这是 Google Chrome 中类似 Firefox Firebug 以及 Web Developer Toolbar...

    继续阅读...

  • 在网页上放几个GOOGLE广告，又放了个DAITUI，又放个访问量统计。在网速慢的时候，加载这些代码的时候网页一直处于等等状态。但用户来网站是看内容的，所以我们应该让网页内容先显示，最后显示这些外加的东西。　当然还有一些其他的情况，我们希望网页的内容按我们设定的顺序加载。 进入正题（拿GOOGLE广告为例）： １.在要插入广告的地方，置一个元素,span、p、div都可以，如果表格中也可以给td赋个ID <span id="googleAd"> google广告加载中... </span> ２. 在页面底部，也就是</body>之前，放下面一段 <div id="googleAdContent" style='display:none'> 此处替换为google广告内容 </div> <script language="javascript"> document.getElementById('googleAd').innerHTML=document.getElementById('googleAdContent').innerHTML; document.getElementById('googleAdContent').innerHTML = ""; //这行可以有，也可以没有 </script> 效果展示就看本页右侧和文章下面的广告吧，可以右键看本页的源代码进行分析哦~

    增强用户体验之–广告后加载

    在 2009年06月16日 上发表 | 3 条评论
    在网页上放几个GOOGLE广告，又放了个DAITUI，又放个访问量统计。在网速慢的时候，加载这些代码的时候网页一直处于等等状态。但用户来网站是看内容的，所以我们应该让网页内容先显示，最后显示这些外加的东西。　当然还有一些其他的情况，我们希望网页的内容按我们设定的顺序加载。 进入正题（拿GOOGLE广告为例）： １.在要插入广告的地方，置一个元素,span、p、div都可以，如果表格中也可以给td赋个ID <span id="googleAd"> google广告加载中... </span> ２. 在页面底部，也就是</body>之前，放下面一段 <div id="googleAdContent" style='display:none'> 此处替换为google广告内容 </div> <script language="javascript"> document.getElementById('googleAd').innerHTML=document.getElementById('googleAdContent').innerHTML; document.getElementById('googleAdContent').innerHTML = ""; //这行可以有，也可以没有 </script> 效果展示就看本页右侧和文章下面的广告吧，可以右键看本页的源代码进行分析哦~

    继续阅读...

  • 在译言看到的一篇文章，觉得非常有用。就转载过来。 作为设计师，你的每个客户和项目都是独一无二的。有些事情，你需要了解或者熟知你的所有客户，才能为他们做出最好的设计。建设一个有效的解决具体业务需求的网站，需要设计人员准确理解很多业务的细节。 在这篇文章中，我们会看到9件设计师与客户在设计开始前需要讨论的事情，以增加成功的可能性。这些是围绕去了解客户业务与需求的话题，而不是像付款与最后期限这样的合同问题。 1. 商业目的 几乎所有的商业行为都有任务与远景声明。如果你想要设计出真实反映业务和对客户有效的网站，了解基本的商业存在原因与他的目标是绝对有必要的。 如果你不清楚客户的核心职责或者他们存在的原因，一定要在开始向目前把这些问题弄明白。虽然是很简单的资料，但是没有他们，项目很有可能误入歧途。 2. 具体产品与服务的业务 一旦清晰了业务存在原因，熟知具体事项与客户是如何从业务中得到收入也是非常重要的事情。无论是建立电子商务网站，还是普通的信息站，或者任何其他类型的网站，有必要知道客户准备为网站用户提供什么。 3. 客户的用户统计数据 讨论业务的产品和服务会让你获得有关为产品与服务付费的用户的更多信息，有效果的网站是以用户为中心，这个对身为设计师的你是至关重要的，你的客户需要准确的了解谁将使用这个网站，谁是有可能对提供的业务感兴趣。 尽可能多的获取这方面信息是非常好的做法。比如目标用户的年龄，性别，职业，收入等等，这些对确定网站的设计风格非常有帮助。此外，为搜集更多有关用户对产品与服务感兴趣的原因而建立网站，有利于提高潜能。 4. 企业文化

    设计项目开始前，9件需要了解客户的事情

    在 2009年06月3日 上发表 | 一条评论
    在译言看到的一篇文章，觉得非常有用。就转载过来。 作为设计师，你的每个客户和项目都是独一无二的。有些事情，你需要了解或者熟知你的所有客户，才能为他们做出最好的设计。建设一个有效的解决具体业务需求的网站，需要设计人员准确理解很多业务的细节。 在这篇文章中，我们会看到9件设计师与客户在设计开始前需要讨论的事情，以增加成功的可能性。这些是围绕去了解客户业务与需求的话题，而不是像付款与最后期限这样的合同问题。 1. 商业目的 几乎所有的商业行为都有任务与远景声明。如果你想要设计出真实反映业务和对客户有效的网站，了解基本的商业存在原因与他的目标是绝对有必要的。 如果你不清楚客户的核心职责或者他们存在的原因，一定要在开始向目前把这些问题弄明白。虽然是很简单的资料，但是没有他们，项目很有可能误入歧途。 2. 具体产品与服务的业务 一旦清晰了业务存在原因，熟知具体事项与客户是如何从业务中得到收入也是非常重要的事情。无论是建立电子商务网站，还是普通的信息站，或者任何其他类型的网站，有必要知道客户准备为网站用户提供什么。 3. 客户的用户统计数据 讨论业务的产品和服务会让你获得有关为产品与服务付费的用户的更多信息，有效果的网站是以用户为中心，这个对身为设计师的你是至关重要的，你的客户需要准确的了解谁将使用这个网站，谁是有可能对提供的业务感兴趣。 尽可能多的获取这方面信息是非常好的做法。比如目标用户的年龄，性别，职业，收入等等，这些对确定网站的设计风格非常有帮助。此外，为搜集更多有关用户对产品与服务感兴趣的原因而建立网站，有利于提高潜能。 4. 企业文化

    继续阅读...

Page 1 of 212