看一个小软件,压缩HTML的,比较有意思,就下载试用了一下,还不错额,一般都能压缩10%以上。别小看这10%的HTML,把网站其他图片JSCSS一起算进来,至少能给你节约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.去掉所有的换行:[rn]+

5. 然后执行一个可选项:是否将多个空白换成一个,在Html中多个空白会解析成一个,所以默认为true

6.然后恢复保存的pre等标签内容

7.执行css压缩(步骤比较多就不列出来了,可以看yui compressor的源码)(这个也是可选项,如果没有内联的css或者是已经压缩过可以不选)

最后,欢迎大家使用,有问题可以留言!

用户行为跟踪采集

几款不错的工具,推荐一下

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 的一个扩展,用于调试你的网页,包含一个 DOM 探测器,一个 JavaScript 调试台,可以设置执行断点和跟踪,一个类似 YSlow 的执行分析器。
2. Webmaster Tools

一个对网站拥有者来说非常有用的程序,可以帮助你从各个角度改善自己的站点。可以发现站点中的恶意程序,发现搜索引擎爬虫遇到的错误,可以发现你的 HTML 代码中需要改进的部分。还可以帮你发现你的站点中最热门的网页,并发现你站点中的错误链接。
3. Google Web Toolkit

Google Web Tootlkit (GWT)是一个 Web 开发基础框架,为开发者提供了一些基础类库,GWT 同 Google 的其它产品,如 AdWords,FeedBurner,Google Ajax 类库等紧密集成,这里有一个 Google Docs 教程
4. Google Code Search

帮助开发者搜索代码,支持正则表达式搜索,或在一个高级搜索界面中,很直观地搜索那些可能会让你事半功倍的公共代码。
5. Page Speed

Google 现在已经将网站加载速度算到搜索排名算法中,Page Speed 可以帮助你分析你的网站性能,基于 Google Web 性能最佳实践

继续阅读

在网页上放几个GOOGLE广告,又放了个DAITUI,又放个访问量统计。在网速慢的时候,加载这些代码的时候网页一直处于等等状态。但用户来网站是看内容的,所以我们应该让网页内容先显示,最后显示这些外加的东西。 当然还有一些其他的情况,我们希望网页的内容按我们设定的顺序加载。

进入正题(拿GOOGLE广告为例):

1.在要插入广告的地方,置一个元素,span、p、div都可以,如果表格中也可以给td赋个ID


<span id="googleAd">
google广告加载中...
</span>

2. 在页面底部,也就是</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. 企业文化

继续阅读

  如今越来越多的应用程序被搬到了网上。因为没有平台或者安装上的限制,这种软件即服务的模式看起来相当诱人。Web应用程序界面设计的核心自然是Web设计,然而它的重点却主要放在了功能性上。要与桌面应用竞争的话,Web应用必须提供简单、直接、灵敏的用户界面,以便让用户们可以省时省力地把事情做完。

  在过去的日子里面我们并没有讨论太多关于Web应用的事情,而现在该是时候让我们来看一看一些实用的技巧以及设计方案了。这些东西可以让我们的Web应用变得更加的用户友好,也更加漂亮。这篇文章列出了我们在现代Web应用的设计模式以及实用设计方案上所进行的扩展性研究的第一部分。下文中你将看到被许多成功的Web应用所采用的10个实用的界面设计以及最佳实践

  如果有什么好主意,好方法或者代码解决方案请在评论中提出来。我们第二部分的研究很快就要发布了:敬请关注RSS Subscribe to our RSS-feedTwitter Follow us on Twitter

  你也许也有兴趣读读这几篇相关的文章:

1. 按需的界面元素

  在用户界面设计中,简单化是很重要的一部分。你在屏幕上放越多的控件,你的用户就要花越多的时间来弄明白怎么使用这个界面。当可选择的东西少下来之后,那些可用的功能就显得很明朗了。然而简化界面并不是那么容易的一件事情,尤其是当你不想因此而限制了应用程序的功能性时。

Kontain search
  当你点击Kontain的搜索文本框时,一个类似的下拉菜单就出现了。所以如果你想缩小你的搜索范围,你可以用这个菜单来选择你想要找的内容的各类。把这些选项隐藏起来就使搜索框得以简化。

  有一个方法很简单,那就是把高级的功能给隐藏起来。找出你界面中最常用的那些功能,然后把剩下的都藏好。你可以用弹出式的菜单或者控件来实现这一功能,这在桌面软件中是非常常见的。比方说你的搜索栏有一些高级的过滤器,就可以把它们放进搜索栏后面的一个特殊的下拉菜单中。如果用户需要过滤器,他们只需用鼠标点几下就可以使用了。然而决定留下什么隐藏什么就不那么简单了,这取决于这些控件有多重要,被使用到的频率又有多高。

CollabFinder search
  当你点击CollabFinder中的搜索链接时,并不会跳到另一个页面去。相反的,一个控件拉了下来,你可以在此直接开始搜索。

 

2. 专业化控件

  选择适合当前情况的界面控件很重要。不同的情况可以用不同的方式来处理,而某些控件在处理特定情况的时候就比别的要好。

Backpack calendar picker
Backpack在选择一个提醒时间的时候有一个简洁的日历控件。

  比如说要选择一个日期的话,你可以通过下拉列表来分别选择日、月、年。然而同一个你可以直接点击并选择日期的日历控件比起来,下拉菜单就显得不那么高效了。日历控件还可以帮你更轻松地选择日期、星期、月份(特别是区分工作日和周末),因此可以让你的决定带有更多的信息量,也比用简单的下拉列表要来得快。

MyBankTracker APY Calculator
MyBankTracker的APY计算器用了一个很方便的滑动选择器可以让你尝试不同的组合。

  另一个很棒的例子就是滑动选择器。当然,你总是可以手动输入数字的,但是在某些情况下滑动选择器控件好多了。不仅仅因为它们很容易使用——只要点点拖拖就行了——而且你可以看到你的选择在最小值和最大值的范围里处在一个什么位置。

 

3. Disable pressed buttons禁用点过的按钮

  在表单使用上Web应用常碰到的问题之一就是提交的过程。在一个简单的表单里,如果你在快速点多次“提交”按钮的话,这个表单也会被提交多次。这样所带来的不良后果是它会创建同一项目的多个副本。要防止重复提交并不是很难,但是在大多数Web应用中却是非常重要的。

  防止这种行为分成两个层面:客户端服务器端。我们并不讨论服务器端的事情,因为这随着你使用的编程语言和后台架构不同而有所变化。你所做的就是对于任何提交过来的数据,都检查它是否重复,如果重复的话就阻止住它。

Yammer disabled button
Yammer在你的新消息提交的时候把“更新”按钮禁掉。

  客户端要做的事情就简单多了。你要做的只不过是在“提交”按钮被点击的时候把它禁用。最简单的方法就是用一段JavaScript代码:

  <input type="submit" value="Submit" onclick="this.disabled=true" />[/source]
  当然了,我们会建议你也要实现服务器端的检查以确定能拦住这些重复数据。

 

4. 给模态窗口加上阴影

  给弹出菜单或者窗口加上阴影可不仅仅是为了吸引眼球。这些阴影通过增加菜单或者窗口的维度来使它们变得醒目,同时也能来把这块区域变暗以阻止下方内容的干扰。   这个技巧在传统的桌面应用中已经根深蒂固了,它帮助用户把注意力放到出现的窗口上。由于在Web应用上,大多数模态窗口并不是很容易和主内容区分开,而阴影则让它们看起来离用户更近一点,因为这样窗口看起来就像在一个三维的空间中并且位于页面其它内容的上方。 Digg login window Digg的登录窗口有一个很宽的阴影,它挡住了正文页面对弹出窗口的影响。   要达到这个效果,设计者们通常会创建一个容器,用一张透明的PNG图像作为其背景,并把内容放在这个容器中。而在这个盒子的四周则设有等宽的内间隔。另一个方法就是用一个一张带透明边框的背景图片,并且用绝对定位来进行定位。这也就是Digg的实现方法——就是他们使用的图片(dialog.png)。而以下则是他们使用的HTML代码和CSS样式: (X)HTML:

<div id="container">
    <div class="dialog" style="display: block; top: 236px; opacity: 1;">
        <div class="body">
            <div class="content">
        ...
            </div>
        </div>
    </div>
</div>

CSS:

.dialog {
    position: absolute;
    left: 50%;
    margin-left: -315px;
    width: 630px;
    z-index: 100001;

}
.dialog .body {
    background: url(/img/dialog.png) 0 0; /* 半透明的.png图片 */
    padding: 40px 13px 10px 40px;
}

  另一种选择是,你也可以使用基于JavaScript的阴影效果,这用到了我们在之前讨论过的CSS3的属性。需要注意的是IE并不支持这些属性。

Basecamp project switcher
Basecamp项目切换器用到了一个大的淡色阴影来使菜单醒目。

 

5. 告诉你该干些什么的空白状态

  很重要的一点是你不光要用一些样本数据来进行测试,还要确保它在暂时还没有数据的时候也能看起来不错并且有所帮助

  当这个页面上还没有信息或者查询的时候,我们可以把一些有用的消息放入空白处来告诉用户该从哪里开始。比如说,一个项目管理应用程序的主页上可以列出用户的项目,但是如果还没项目的话,你就可以在上面放一个链接指向创建项目的页面。即使在页面上已经有一个可以实现此功能的按钮了,再加一点点帮助信息也坏不到哪去

Campaign Monitor empty state
Campaign Monitor在你准备开始创建一个电子邮件活动的时候把你指向正确的位置。

  这一技巧可以促动用户去尝试各项服务,并且在注册之后继续使用服务。给用户展现应用程序的每一个步骤说不定可以帮助他们理解应用程序所提供的优点,以及这些对他们是否实用。给用户展现一些最重要的选项也很好,但是只要那些最重要的就够了——给他们看太多选项并没有什么意义。请牢记,用户通常只想知道一个大体,知道他们能从中得到些什么,他们可不想了解细节的问题——他们没时间,也没兴趣。

  使用空白状态来促动用户,你可以大大地减少那些立马离开的人数,并且帮助你的潜在用户了解你的系统是怎么运作的。

Wufoo empty state

如果你还没创建过表格的话,Wufoo的表单页面有一个很大的、友好的消息,上面邀请你来新建一个表格。

 

6. 鼠标按下的按钮状态

  许多Web应用都有自定义样式的按钮。这些是用加了自定义的图片作为背景的链接或者是输入按钮做出来的。默认的输入按钮在许多情况下也许并不那么合适,而文本链接有时候则太难以察觉了。所以挑战来了,当你把你的链接弄得和按钮长得一样的时候,它们的表现应该也和按钮一样——这包括当用户点击链接时的一个按下的状态

  这不仅仅是视觉上的调整。即时给出反馈可以让应用程序看起来更加敏捷,并且让用户体验更加接近于桌面应用。

  你可以通过配置CSS中链接的active伪类来添加一个按下的按钮状态。比方说,如果你的链接有一个add_task_button的样式,你可以去更改它的活动样式add_task_button:active

Highrise button pushed
Buttons in Highrise中的按钮就有一个按下时的状态,这让用户对反应速度感到很满意。

 

7. Link to the sign-up page from the log-in page在登录页面放置注册页面的链接

  没有在你的应用程序上注册过的人们总是难免会来到登录界面的。他们很有可能想试试看你的应用程序,但是不能马上找到一个注册页面。也许他们想试一试那些只有注册过的用户才能使用的功能。

Delicious sign in
没有Delicious的账号吗?没问题,在Deliious的登录界面上就放了一个注册链接。

Goplan sign in
Goplan在登录页面上放了一个漂亮彩色的按钮,指向注册页面。

  在你的登录页面上放一个注册链接可以使这一切变得简单。如果他们没有账号的话,他们无须去找这个注册页面。我们的研究也证实:(在100家Web表单值得关注的流行网站中)有18%都在登录表单旁边放了一个注册表单或者是通往注册表单的链接(YouTube、Reddit、Digg、Lulu、Metacafe等)。

 

8. 上下文相关的导航

  还有很重要的一点就是在每一个的上下文中想一想用户希望看到些什么,以及他们需要些什么。你没必要在哪里都显示同一个导航控件,因为并不是所有的情况下用户都会需要它的。

  上下文相关控件的一个最好的例子就是Microsoft Office 2007界面中的一个改变——原先的工具栏被Ribbon控件所代替了。Ribbon中的每一个选项卡都放置了与某一特定活动相关的控件,比如说编辑段落、校正或者写作。Web应用也可以从类似的上下文相关的控件中得益,因为这些控件给你看到了一个更加清爽的界面——它只展现用户所需要的,而并非全部内容

Lighthouse sub-navigation
Lighthouse有一个熟悉的选项卡式的导航菜单;然而在每个选项卡下它还有一个二级的菜单。这一级的菜单只显示与当前的活动选项相关的一些项目。

 

9. 给关键功能更多关注

  并不是所有的控件都有着同样的重要性。比如说,在创建一个项目的时候,你可能会有两个选项:“创建”和“取消”。“创建”链接就更重要一点,因为这是用户在大多数情况下会去做的事情。只有很少的情况下他们才需要取消这一操作。所以如果把这两个控件并排放置的话,你就不能同时给它们相同的重要性。

Lighthouse create or cancel
  在Lighthouse中的“创建”按钮。你可以看到在它旁边有一个文本的“取消”链接。按钮不光体现出了重要性,而且有一个更大的可点击范围,而且因为它有边框,也就更加容易被关注。

  要把强调放在“创建”链接上面的话,我们可以为它使用不同的样式,或者是使用不同类型的控件。有些应用程序在创建的时候使用表单输入按钮,而把取消动作当成文本链接。这不仅仅给了创建按钮更多的可点击空间,还让用户在寻找创建按钮时能把目光放在按钮身上

10. 嵌入视频

  如果说图像和文本是用来沟通和教会你的用户使用你应用程序特性的一个好方法的话,视频就是更好的选择了。在网上,视频这种方式在近几年来已经积攒了大量人气。对于Web应用来说,视频通常用于当作展示产品特性的屏幕录像,尽管这并不是使用视频的唯一方法。

GoodBarry video
GoodBarry在首页上放一了段视频来展示其产品。它使用屏幕录像的方法来告诉用户从哪里开始。

Mailchimp video
MailChimp的管理面板上就有一段教程视频用于帮助新用户。

  有些Web应用在应用程序内部使用视频来告诉用户如何使用某些特性。用视频来演示你的产品该如何使用真的很棒,因为相比于一整页的文字来说视频更加直观,也清楚多——用户们一看就知道该做些什么。