交互体验优化：4步让移动网站看起来像本地应用

译自：
A Beginner’s Guide to Perceived Performance: 4 Ways to Make Your Mobile Site Feel Like a Native App
原作者：Kyle leads
译者： TAT.sheran

注：该文章大约3000字。它覆盖了移动端网页交互体验优化的很多不同方面的实际解决方案，用来优化你的网页运行速度。注意不是让你的站点运行的有多快，而是让你的用户感觉有多快。

当下在移动端构建一个优秀的网站逐渐变得越来越简单。无论是响应式设计还是自适应式，只要清楚你要做的样式，精心制作一个好看的站点就不是什么问题。

也许你的用户和我们一样，想要一个像本地应用体验的网站，所以构建这样的体验将会带来很大的挑战。

大多数时候，当人们说一个应用就像一个原生程序或者像本地应用，他们并不是在讨论这个网站的外观。相反，他们讨论的是当他们做出的一些操作之后的响应效果。

本地应用相对于Web应用要快得多，动画效果渲染也更加平滑；当点击按钮时，按钮自身会立即响应变化的样式，不管操作是否加载成功，都不会报错。

使你的站点看起来想本地应用，意味着要尽一切可能的方法使你的站点快速的响应。

当今，性能优化是一个非常热门的话题。最近，网站开发已经越来越重量级，网页越重代表运行得越慢，所以有人声称做一个高性能的网页应用程序几乎是不可能的。

这就是为什么Facebook不得不转向本地应用的原因。因为从目前所拥有的Web资源来看，并不能达到他们期望的运行速度和交互体验。

尽管Facebook也这么认为，但是构建一个高性能的网站还是有可能的。虽然并不容易，但还是在我们可控制的范围内。我们只是需要花更多的精力去将它实现而已。从技术上说，我们有能力使我们的网站运行地更快，看上去更现代化，以及拥有更完美的交互体验。

体验性能 VS 实际性能

虽然提高实际性能很重要，但这并不意味着用户最终能够感觉到改善。

年初在西雅图的一次An Event Apart会议中，Luke Wroblewski 讲述了下关于他们的移动应用Polar。他阐述到他和他的团队非常努力地优化每次加载新的选票所需时间。

于此同时，当发送加载选票的异步请求时，他们用了一个轻量的微调控件提示用户。但是用户反馈在加载新的选票时显示微调控件让他们感觉比以前慢了好多，尽管实际上它比以前更快。Polar迅速发布了一个版本移除了这个微调控件，然后用户马上就觉得页面加载快了好多。

这个例子能很好的说明用户对性能感知的重要性。你的网站是否真正运行非常快并不重要。就像这个微调控件的例子，它只是吸引了用户的注意力，但事实上仍然让用户感觉在等待响应，而正确的做法是，我们应该去分散用户的注意力。

作为设计师和开发者，我们的目标不仅仅是从学术理论上创造一个快速的站点，而更应该从体验上去创造一个最快的站点。

用户是如何感知你的站点的运行速度才是最重要的，任何实际速度的提升不过是一个已经精心装饰好的蛋糕外帽。我认为体验性能优化比实际性能优化更重要，但绝不代表不应该去做实际性能优化。

综上所述，你该做些什么来优化你站点的体验性能呢？

这里有四个技巧，你可以立即开始实施。

1. 给你的按钮增加触摸状态

在移动设备上改善网站体验性能最容易的方法之一就是使用激活状态。

众所周知，用户在任何时候点击你网页上的按钮，在网页响应前他都必须等待约300毫秒。

浏览器会保持这个延时，这样它才能确保用户并不是想做其它动作（准确地说就是双击）。所以浏览器在这三分之一秒内检测用户是否有其它操作，如果没有，则响应用户上一次点击。当这个事件最终发生时，它会给出一个灰色的高亮展示给用户。

这是一个糟糕的体验，Nielsen团队进行了一项调查，结果显示任何超过100毫秒的响应都会让用户感到他们在等待——而用户想要的仅仅是浏览你的网页。

然而大多数的移动站点，包括我自己创建的，并没有应用这个体验设计，设计师们总是使用链接或者按钮的默认触摸状态。

要使你的站点感觉快，就要让你的按钮能够及时响应用户的点击事件，并且在状态改变时给用户一个可见的反馈。

有一个非常好用的CSS伪类叫做 active 状态，它可以用来在网页上显示一个按钮或者链接被点击了。我们也可以同时把它使用在PC端浏览器上。

不幸的是，无论是iOS还是Android上的链接或者按钮被点击的时候都会忽略这个属性。为了使用这个active状态，你需要使用JavaScript给页面添加一个简单的事件:

document.addEventListener("touchstart", function(){}, true)

这样，你就可以使用CSS来给按钮添加active状态或者移除点击高亮的状态了:

-Webkit-tap-highlight-color: rgba(0,0,0,0);

给你创建的按钮添加了这些属性和active状态之后，用户就可以立即感觉到页面的反馈，即使实际上真实的反馈速度并没有改变。你只是让用户针对自己的行为得到了一个及时的反馈，而不是让他们等待300毫秒后才看到页面响应。

Without Touch State(code)

With Touch State(code)

如果你想要使页面立即响应，你可以做进一步的改进。

使用一个fasttap或者fastclick函数，可以完全消除点击按钮时300毫秒的延时，与active状态搭配使用，可以让你的站点拥有飞一般的速度。

关于更多fasttap的信息，可以参考谷歌的这篇文章 this article by Google 或者Github上的一个现成的实现this repo on Github。

2. 使用默认滚动

你曾经是否尝试在自己的站点上创建一个可滚动的容器，或者被一个运行起来非常慢，并且没有任何响应的滚动条困住？

幸运的是，Android 3+ 和iOS 5+ 都实现了一个新的名叫overflow-scroll的属性，用来开启原生的滚动条，它运行起来非常完美。

No Momentum Scrolling (code)

With Momentum Scrolling (code)

这个滚动条使用起来就像是使用本地程序的感觉，实际上它就是原生的，你需要做的只是给你的滚动容器添加这个属性：

-Webkit-overflow-scrolling: touch;

然而，关于这个属性还存在一个问题，那就是当滚动到页面最顶部的时候会禁止你的iphone显示状态栏。这个BUG已经存在有段时间了，即使是最新版本iOS7上的移动版Safari都没有解决这个问题。

解决这个问题的方法之一是：创建一个类来给容器添加 overflow-scrolling:touch属性。然后只有当容器处于可见状态时，使用JavaScript去应用这个类，使其生效。

在Android 4上你不需要这个属性，因为每个可滚动的容器都包含了原生滚动条。

在比较老的Android版本下，你有两个选择方案。我最喜欢的一个方法是检测容器是否支持滚动溢出属性来判断是否支持原生滚动。如果不支持，有几个JavaScript库可以用来代替，Filament Group’s Overthrow 和 iScroll 都是很不错的实现方案。

3. 创建高性能动画

在Web网站和本地应用之间最显著的差别是动画的使用。

多年前，本地应用在当今设备中就能够充分利用硬件图形加速。而在Web端，开发者却只能基于JavaScript来实现动画，对于移动端功能比较弱的CPU来说，运行起来会比较慢。

但是现在，随着移动浏览器的支持，我们可以大量利用CSS3动画来实现硬件加速。

这是一个英明的方法来添加那些我们喜欢的，本地应用都已经炫耀了多年的动画特效。

如果还是觉得不够快？要让Web动画感觉像本地动画，你必须确保你的动画运行起来不会慢或者足够稳定，这些都是相当困难的。

Allen Pike of Steamclock Software(一家软件公司) 2011年发表了一篇很赞的文章，大意为给用户提供一个有趣的不影响性能的动画，可以使用户对这个应用有一个非常好的印象。

有趣的是，这篇文章是关于本地应用开发的，但我们可以参考这篇文章用来在网页站点上创建类似本地应用的动画。

在这篇文章中，他描述了一个他所谓的“时间感知”：

1.动画的帧数至少要有60fps。这意味着每帧最起码都要在16毫秒内完成，这样才能让人感觉动画是原生的或者是平滑的。所有iOS的内置动画都保持在60fps的运行速度，这就是为什么在iPhone设备上滚动的感觉明显比Android设备好的原因（虽然谷歌最近在这个领域取得了很大的改善）。你应该确保所有跟用户有直接交互的动画都保持在这个速度才行。

2.所有事件的响应都应该保持在100毫秒以内。如果超过这个心理门槛，用户就会有慢的感觉，反之任何低于100毫秒的响应对用户来说都是一瞬间的体验。

3.如果一个动画一定需要超过100毫秒，那也至少要保证在1000毫秒内完成。Allen认为任何需要在这么长时间的行为都需要给用户一个反馈，比如一个进度控件或者一个滚动条。

但是正如我们前面介绍的Polar的例子，转移用户注意力实际上是弊大于利的。稍后我们将介绍一个不同的方法来处理这个问题。

4.任何一个超过1秒的响应都是不好的，并且需要谨慎。

当创建一个网站的时候，你还不得不考虑动画运行时间，知道这一切之后是否有种想转行的冲动？

不要担心，有些很好的资源可以使这些东西变得容易得多。

首先，有一个基于HTML5的一个CSS库，叫做Effeckt.css。这个库的目的是创建一个公用的动画，它们的帧数都处于60fps。虽然这个库还没有完全完成，但是库里的很多动画都已经可以很好的运行了，我们强烈推荐使用这个库来满足你们的项目需求。

另外一个非常好用的库就是Adobe公司的前端团队开发的Topcoat库，这是一个以性能为中心的CSS组件库，这个库里全是能够运行得非常顺畅的组件。因为动画性能是他们的主要目标，组件的每一部分，你都可以看到它究竟是如何执行的。

Topcoat和Effeckt.css可以结合一起使用，Topcoat可以直接使用Effeckt.css的功能，并且可以很完美的融合在一起。

接下来，我们来讨论前面提到的尽可能避免spinners问题的方法。

我的首选方法是避免spinners的等待时间不会超过100毫秒，但对于小于250毫秒的等待我会(使用spinner实际上是弊大于利的)用一个动画来隐藏它。

例如，你正在异步拉取一段内容的时候，尝试使用动画让容器缩上去，再缩回来以适应新的内容。这样一个简短的动画可以分散用户注意力，而不是盯着一个spinner，他们只需等待一个很短的动画完成。甚至他们都不知道是否有新的内容。

当然，那些重复且需要花费长时间完成的动画有可能让人觉得厌烦，所以一定要确保有节制的使用这些技术，对于大多数的动画而言这都是一个很好的建议。

4. 手势利用

本地应用优于Web应用的优势在于他们能够利用手势，对于使用触摸屏幕的用户来说，这样能够更加友好。

移动开发者已经意识到手势的魅力所在，并很快就使其得到了很好的利用。

看看类似Mailbox 或者Clear这样的例子，这些应用都使用了简单的手势，充分发挥了移动设备最大的优势——能够直接触摸屏幕的能力。

大多数网站都只会使用手势点击来触发事件，设计师甚至不想去实现其它手势，这样给用户像一个二等公民待遇的感觉。

我们开始考虑直接为这些设备开发特定的网站。如果用户的设备支持手势功能，那么为什么不利用他们呢？

当然，移动操作系统都存在一个问题那就是：劫持在浏览器中的手势，而去执行系统自身的响应。

对于本地应用，比如Facebook 使用屏幕左右边缘的滑动开拓导航。然而不幸的是，对于Web应用来说，这种行为叫出界，Chrome会使用这个操作来切换选项卡，新版本的iOS7的Safari浏览器却会使用它来历史前进和后退。

好把，这些手势还是有相当多的限制的，究竟哪些可供我们使用呢？这里有4个：

手势1 一侧到另一侧的滑动

即使即将出界，一侧到另外一侧的滑动也是一个相当不错的手势，只是需要注意的是不要太靠近屏幕的边缘了。

手势2 拉取刷新

拉取刷新是让用户去获取数据的另外一个手势，有一大堆JavaScript库可以很简单的去实现这个手势，有一个我以前用过的库叫Hook.js。

手势3 长按

有一个很有用的属性叫做 –Webkit-touch-callout: none; 它将关闭移动端Safari默认的长按事件，但是你想要在Android上关闭它还需要额外的工作。

长按手势主要用于拖动一个元素（比如重排一个列表的顺序）或者展示更多操作给用户（例如，社交分享）。

手势4 缩放功能

每个人都理解缩放，大多数人在网站上看到一个照片的时候都会去缩放来查看更多细节。

有时候浏览器也会劫持这种手势，即使这样，也没有那么糟糕。

无论是否需要锁定整个窗口的放大或者缩小，有时你也并不希望用户去缩放整个页面。为了接管这些多点触摸，你可以使用一个非常轻量库叫Hammer.js，这个库里有一堆手势，你可以使用内置的手势，也可以创建你自己的。

这有一个很优秀的图片缩放示例网站 imgur.com mobile Website，它能够检测你的触摸方法。

但是要注意的是，如果你使用了一个手势，请确保它是一个让用户感觉自然或有意义的行为。

总结

但愿有那么一天，我们不需要再区分本地应用还是Web应用。虽然这一天还没达到，但只要我们一直努力，使我们的网站让用户感受到是为他们量身打造，我相信那天一定会很快到来。

我觉得专注性能优化虽然是件好事，但我们也必须记住，我们的用户不是机器。

他们不关心你的网站发出了多少请求，也不在乎你的屏幕渲染得有多快。他们只关心网站带给他们体验上的感觉。

重要的是如何让你的网站看起来或者感觉上是最快的。那些用户无法感知的高速网站是毫无意义的。

如果你有更多提高体验性能的建议，请在评论中发表。

wget 整站抓取的好工具

最近想从网上抓取一些内容充实到自己的网站上，但是考虑到每次都向远程请求链接，分析，再抓取内容，效率不好，于是想先把整个网站抓取下来，然后在本地进行数据分析，然后把有用的信息存储到数据库。
首先遇到的问题就是怎样吧整个网站抓取下来，于是就遇到wget这个工具，挺好用的，下面是从别的网站查找到的资料。

http://www.rssday.com/article/id-325.html
Wget 的使用

1）支持断点下传功能（2）同时支持FTP和HTTP下载方式（3）支持代理服务器（4）设置方便简单；5）程序小，完全免费；

命令格式：

wget [参数列表] [目标软件、网页的网址]

1、启动类参数

这一类参数主要提供软件的一些基本信息；

-V,–version 显示软件版本号然后退出；
-h,–help显示软件帮助信息；
-e,–execute=COMMAND 执行一个 “.wgetrc”命令

以上每一个功能有长短两个参数，长短功能一样，都可以使用。需要注意的是，这里的-e参数是执行一个.wgettrc的命令，.wgettrc命令其实是一个参数列表，直接将软件需要的参数写在一起就可以了。

2、文件处理参数

这类参数定义软件log文件的输出方式等；

-o,–output-file=FILE 将软件输出信息保存到文件；
-a,–append-output=FILE将软件输出信息追加到文件；
-d,–debug显示输出信息；
-q,–quiet 不显示输出信息；
-i,–input-file=FILE 从文件中取得URL；

以上参数对于攻击者比较有用，我们来看看具体使用；

例1：下载192.168.1.168首页并且显示下载信息
wget -d http://192.168.1.168

例2：下载192.168.1.168首页并且不显示任何信息
wget -q http://192.168.1.168

例3：下载filelist.txt中所包含的链接的所有文件
wget -i filelist.txt

wget -np -m -l5 http://jpstone.bokee.com //不下载本站所链接的其它站点内容，5级目录结构
3、下载参数

下载参数定义下载重复次数、保存文件名等；

-t,–tries=NUMBER 是否下载次数（0表示无穷次）
-O –output-document=FILE下载文件保存为别的文件名
-nc, –no-clobber 不要覆盖已经存在的文件
-N,–timestamping只下载比本地新的文件
-T,–timeout=SECONDS 设置超时时间
-Y,–proxy=on/off 关闭代理

例：下载192.168.1.168的首页并将下载过程中的的输入信息保存到test.htm文件中
wget -o test.htm http://192.168.1.168

4、目录参数

目录参数主要设置下载文件保存目录与原来文件（服务器文件）的目录对应关系；

-nd –no-directories 不建立目录
-x,–force-directories 强制建立目录
可能现在我们对这里的目录还不是很了解，我们来看一个举例

例：下载192.168.1.168的首页，并且保持网站结构
wget -x http://192.168.1.168

5、HTTP参数

HTTP参数设置一些与HTTP下载有关的属性；

–http-user=USER设置HTTP用户
–http-passwd=PASS设置HTTP密码
–proxy-user=USER设置代理用户
–proxy-passwd=PASS设置代理密码

以上参数主要设置HTTP和代理的用户、密码；

6、递归参数设置

在下载一个网站或者网站的一个目录的时候，我们需要知道的下载的层次，这些参数就可以设置；
-r,–recursive 下载整个网站、目录（小心使用）
-l,–level=NUMBER 下载层次

例：下载整个网站
wget -r http://192.168.1.168

7、递归允许与拒绝选项参数

下载一个网站的时候，为了尽量快，有些文件可以选择下载，比如图片和声音，在这里可以设置；

-A,–accept=LIST 可以接受的文件类型
-R,–reject=LIST拒绝接受的文件类型
-D,–domains=LIST可以接受的域名
–exclude-domains=LIST拒绝的域名
-L,–relative 下载关联链接
–follow-ftp 只下载FTP链接
-H,–span-hosts 可以下载外面的主机
-I,–include-directories=LIST允许的目录
-X,–exclude-directories=LIST 拒绝的目录

如何设定wget所使用的代理服务器
wget可以使用用户设置文件”.wgetrc”来读取很多设置，我们这里主要利用这个文件来是
设置代理服务器。使用者用什么用户登录，那么什么用户主目录下的”.wgetrc”文件就起
作用。例如，”root”用户如果想使用”.wgetrc”来设置代理服务器，”/root/.wgetrc”就起
作用，下面给出一个”.wgetrc”文件的内容，读者可以参照这个例子来编写自己的”wgetrc”文件：
http-proxy = 111.111.111.111:8080
ftp-proxy = 111.111.111.111:8080
这两行的含义是，代理服务器IP地址为：111.111.111.111，端口号为：80。第一行指定
HTTP协议所使用的代理服务器，第二行指定FTP协议所使用的代理服务器。

WGet使用指南
wget是一个从网络上自动下载文件的自由工具。它支持HTTP，HTTPS和FTP协议，可以使用HTTP代理.

所谓的自动下载是指，wget可以在用户退出系统的之后在后台执行。这意味这你可以登录系统，启动一个wget下载任务，然后退出系统，wget将在后台执行直到任务完成，相对于其它大部分浏览器在下载大量数据时需要用户一直的参与，这省去了极大的麻烦。

wget可以跟踪HTML页面上的链接依次下载来创建远程服务器的本地版本，完全重建原始站点的目录结构。这又常被称作”递归下载”。在递归下载的时候，wget遵循Robot Exclusion标准(/robots.txt). wget可以在下载的同时，将链接转换成指向本地文件，以方便离线浏览。

wget非常稳定,它在带宽很窄的情况下和不稳定网络中有很强的适应性.如果是由于网络的原因下载失败，wget会不断的尝试，直到整个文件下载完毕。如果是服务器打断下载过程，它会再次联到服务器上从停止的地方继续下载。这对从那些限定了链接时间的服务器上下载大文件非常有用。

wget的常见用法
wget的使用格式

Usage: wget [OPTION]… [URL]…用wget做站点镜像:
wget -r -p -np -k http://dsec.pku.edu.cn/~usr_name/
# 或者
wget -m http://www.tldp.org/LDP/abs/html/在不稳定的网络上下载一个部分下载的文件，以及在空闲时段下载
wget -t 0 -w 31 -c http://dsec.pku.edu.cn/BBC.avi -o down.log &
# 或者从filelist读入要下载的文件列表
wget -t 0 -w 31 -c -B ftp://dsec.pku.edu.cn/linuxsoft -i filelist.txt -o down.log &上面的代码还可以用来在网络比较空闲的时段进行下载。我的用法是:在mozilla中将不方便当时下载的URL链接拷贝到内存中然后粘贴到文件filelist.txt中，在晚上要出去系统前执行上面代码的第二条。

使用代理下载
wget -Y on -p -k https://sourceforge.net/projects/wvware/代理可以在环境变量或wgetrc文件中设定

# 在环境变量中设定代理
export PROXY=http://211.90.168.94:8080/
# 在~/.wgetrc中设定代理
http_proxy = http://proxy.yoyodyne.com:18023/
ftp_proxy = http://proxy.yoyodyne.com:18023/wget各种选项分类列表
启动
-V, –version 显示wget的版本后退出
-h, –help 打印语法帮助
-b, –background 启动后转入后台执行
-e, –execute=COMMAND 执行`.wgetrc’格式的命令，wgetrc格式参见/etc/wgetrc或~/.wgetrc记录和输入文件
-o, –output-file=FILE 把记录写到FILE文件中
-a, –append-output=FILE 把记录追加到FILE文件中
-d, –debug 打印调试输出
-q, –quiet 安静模式(没有输出)
-v, –verbose 冗长模式(这是缺省设置)
-nv, –non-verbose 关掉冗长模式，但不是安静模式
-i, –input-file=FILE 下载在FILE文件中出现的URLs
-F, –force-html 把输入文件当作HTML格式文件对待
-B, –base=URL 将URL作为在-F -i参数指定的文件中出现的相对链接的前缀
–sslcertfile=FILE 可选客户端证书
–sslcertkey=KEYFILE 可选客户端证书的KEYFILE
–egd-file=FILE 指定EGD socket的文件名下载
–bind-address=ADDRESS 指定本地使用地址(主机名或IP，当本地有多个IP或名字时使用)
-t, –tries=NUMBER 设定最大尝试链接次数(0 表示无限制).
-O –output-document=FILE 把文档写到FILE文件中
-nc, –no-clobber 不要覆盖存在的文件或使用.#前缀
-c, –continue 接着下载没下载完的文件
–progress=TYPE 设定进程条标记
-N, –timestamping 不要重新下载文件除非比本地文件新
-S, –server-response 打印服务器的回应
–spider 不下载任何东西
-T, –timeout=SECONDS 设定响应超时的秒数
-w, –wait=SECONDS 两次尝试之间间隔SECONDS秒
–waitretry=SECONDS 在重新链接之间等待1…SECONDS秒
–random-wait 在下载之间等待0…2*WAIT秒
-Y, –proxy=on/off 打开或关闭代理
-Q, –quota=NUMBER 设置下载的容量限制
–limit-rate=RATE 限定下载输率目录
-nd –no-directories 不创建目录
-x, –force-directories 强制创建目录
-nH, –no-host-directories 不创建主机目录
-P, –directory-prefix=PREFIX 将文件保存到目录 PREFIX/…
–cut-dirs=NUMBER 忽略 NUMBER层远程目录HTTP 选项
–http-user=USER 设定HTTP用户名为 USER.
–http-passwd=PASS 设定http密码为 PASS.
-C, –cache=on/off 允许/不允许服务器端的数据缓存 (一般情况下允许).
-E, –html-extension 将所有text/html文档以.html扩展名保存
–ignore-length 忽略 `Content-Length’头域
–header=STRING 在headers中插入字符串 STRING
–proxy-user=USER 设定代理的用户名为 USER
–proxy-passwd=PASS 设定代理的密码为 PASS
–referer=URL 在HTTP请求中包含 `Referer: URL’头
-s, –save-headers 保存HTTP头到文件
-U, –user-agent=AGENT 设定代理的名称为 AGENT而不是 Wget/VERSION.
–no-http-keep-alive 关闭 HTTP活动链接 (永远链接).
–cookies=off 不使用 cookies.
–load-cookies=FILE 在开始会话前从文件 FILE中加载cookie
–save-cookies=FILE 在会话结束后将 cookies保存到 FILE文件中FTP 选项
-nr, –dont-remove-listing 不移走 `.listing’文件
-g, –glob=on/off 打开或关闭文件名的 globbing机制
–passive-ftp 使用被动传输模式 (缺省值).
–active-ftp 使用主动传输模式
–retr-symlinks 在递归的时候，将链接指向文件(而不是目录)递归下载
-r, –recursive 递归下载－－慎用!
-l, –level=NUMBER 最大递归深度 (inf 或 0 代表无穷).
–delete-after 在现在完毕后局部删除文件
-k, –convert-links 转换非相对链接为相对链接
-K, –backup-converted 在转换文件X之前，将之备份为 X.orig
-m, –mirror 等价于 -r -N -l inf -nr.
-p, –page-requisites 下载显示HTML文件的所有图片递归下载中的包含和不包含(accept/reject)
-A, –accept=LIST 分号分隔的被接受扩展名的列表
-R, –reject=LIST 分号分隔的不被接受的扩展名的列表
-D, –domains=LIST 分号分隔的被接受域的列表
–exclude-domains=LIST 分号分隔的不被接受的域的列表
–follow-ftp 跟踪HTML文档中的FTP链接
–follow-tags=LIST 分号分隔的被跟踪的HTML标签的列表
-G, –ignore-tags=LIST 分号分隔的被忽略的HTML标签的列表
-H, –span-hosts 当递归时转到外部主机
-L, –relative 仅仅跟踪相对链接
-I, –include-directories=LIST 允许目录的列表
-X, –exclude-directories=LIST 不被包含目录的列表
-np, –no-parent 不要追溯到父目录

Wget使用技巧

来源：Linux技术中坚站

wget的使用形式是：
wget [参数列表] URL
首先来介绍一下wget的主要参数：
· -b：让wget在后台运行，记录文件写在当前目录下”wget-log”文件中；
· -t [nuber of times]：尝试次数，当wget无法与服务器建立连接时，尝试连接多少次
。比如”-t
120″表示尝试120次。当这一项为”0″的时候，指定尝试无穷多次直到连接成功为止，这个
设置非常有用，当对方服务器突然关机或者网络突然中断的时候，可以在恢复正常后继续
下载没有传完的文件；
· -c：断点续传，这也是个非常有用的设置，特别当下载比较大的文件的时候，如果中
途意外中断，那么连接恢复的时候会从上次没传完的地方接着传，而不是又从头开始，使
用这一项需要远程服务器也支持断点续传，一般来讲，基于UNIX/Linux的Web/FTP服务器
都支持断点续传；
· -T [number of seconds]：超时时间，指定多长时间远程服务器没有响应就中断连接
，开始下一次尝试。比如”-T
120″表示如果120秒以后远程服务器没有发过来数据，就重新尝试连接。如果网络速度比
较快，这个时间可以设置的短些，相反，可以设置的长一些，一般最多不超过900，通常
也不少于60，一般设置在120左右比较合适；
· -w [number of seconds]：在两次尝试之间等待多少秒，比如”-w 100″表示两次尝试
之间等待100秒；
· -Y on/off：通过／不通过代理服务器进行连接；
· -Q [byetes]：限制下载文件的总大小最多不能超过多少，比如”-Q2k”表示不能超过2K
字节，”-Q3m”表示最多不能超过3M字节，如果数字后面什么都不加，就表示是以字节为单
位，比如”-Q200″表示最多不能超过200字节；
· -nd：不下载目录结构，把从服务器所有指定目录下载的文件都堆到当前目录里；
· -x：与”-nd”设置刚好相反，创建完整的目录结构，例如”wget -nd
http://www.gnu.org”将创建在当前目录下创建”www.gnu.org”子目录，然后按照服务器
实际的目录结构一级一级建下去，直到所有的文件都传完为止；
· -nH：不创建以目标主机域名为目录名的目录，将目标主机的目录结构直接下到当前目
录下；
· –http-user=username
· –http-passwd=password：如果Web服务器需要指定用户名和口令，用这两项来设定；
· –proxy-user=username
· –proxy-passwd=password：如果代理服务器需要输入用户名和口令，使用这两个选项
；
· -r：在本机建立服务器端目录结构；
· -l [depth]：下载远程服务器目录结构的深度，例如”-l 5″下载目录深度小于或者等
于5以内的目录结构或者文件；
· -m：做站点镜像时的选项，如果你想做一个站点的镜像，使用这个选项，它将自动设
定其他合适的选项以便于站点镜像；
· -np：只下载目标站点指定目录及其子目录的内容。这也是一个非常有用的选项，我们
假设某个人的个人主页里面有一个指向这个站点其他人个人主页的连接，而我们只想下载
这个人的个人主页，如果不设置这个选项，甚至–有可能把整个站点给抓下来，这显然是
我们通常不希望的；
ü 如何设定wget所使用的代理服务器
wget可以使用用户设置文件”.wgetrc”来读取很多设置，我们这里主要利用这个文件来是
设置代理服务器。使用者用什么用户登录，那么什么用户主目录下的”.wgetrc”文件就起
作用。例如，”root”用户如果想使用”.wgetrc”来设置代理服务器，”/root/.wgert”就起
作用，下面给出一个”.wge
trc”文件的内容，读者可以参照这个例子来编写自己的”wgetrc”文件：
http-proxy = 111.111.111.111:8080
ftp-proxy = 111.111.111.111:8080
这两行的含义是，代理服务器IP地址为：111.111.111.111，端口号为：80。第一行指定
HTTP协议所使用的代理服务器，第二行指定FTP协议所使用的代理服务器。

wget 使用实例：
wget是一个命令行工具，用于批量下载文件，支持HTTP和FTP。究竟比其他的工具好在哪里？看看内容吧

wget基本上所有的Linux版本都自己带了，但是有多少人在用呢？呵呵，如果你没有用过，不妨试试。Windows下面的用户可以使用GNUwin32的项目，wget，基本功能完全一致。好吧，我们来以几个简单的例子看看wget的威力。

如果我们想下载ftp里面某个目录里面的所有文件，我们也可以不用ftp这个笨蛋，呵呵，可以享受cute ftp等图形化工具的拖一个目录的轻松了。如

wget -r ftp://10.8.8.8/movie/

呵呵，等吧！下完了，发觉有些不对劲，怎么出来个10.8.8.8的目录，进去看看，又是一个movie，哦，wget将目录结构和网站标题都给记录下来了，不要？？没有问题！比如说还是这个例子

wget -r -nd ftp://10.8.8.8/movie/

结果什么目录都没有了，faint！怎么会这样？呵呵，你如果想要这样就让它这样吧，否则使用

wget -r -nH ftp://10.8.8.8/movie/

恩？movie也不要？OK，那就这样

wget -r -nH –cut-dirs=1 ftp://10.8.8.8/movie/

这有什么用啊？cuteftp比他好用多了，而且，你这断了线能连吗？呵呵，不好意思，可以连

wget -c -r -nH –cut-dirs=1 ftp://10.8.8.8/movie/

但是cuteftp能做下面的事情吗？比如，现在很多网站使用Apache建站，并不提供ftp服务，但是Apache有一个indexing功能，可以提供一个类似于ftp的界面，好多文件我想下啊，怎么办？由于是HTTP协议，CuteFTP无能为力了，倒是flash get等有什么get all这种功能，不知道他们对于目录处理怎么样。但是wget一点问题都没有，不信？我们拿CTAN为例（例子并不恰当，CTAN有FTP服务），我们下载这里面所有的宏包，呵呵

wget -r -k http://www.txia.com/blog

-k表示将连接转换为本地连接。但是现在同样有上面的问题啊，那就把你需要的加上吧，另外也许你根本不需要向下走那么多层，比如，我们就要到第二层，那么

wget -r -l2 -k http://www.txia.com/blog

现在新的问题是，由于网页有一个排序功能，很讨厌，因为下载的时候把网页重复了好多次，那么我们可使用-A和-R开关控制下载类型，并且可以使用通配符，呵呵，现在随心所欲了吧

wget -r -R ‘*.htm*\?*’ -k http://www.txia.com/blog

这次没有那种网页了吧？-R的意义在于拒绝下载匹配类型的文件，-A表示仅仅接受的文件类型，如-A ‘*.gif’将仅下载gif图片，如果有多个允许或者不允许，可以使用,分开。

那么，我们现在在使用代理服务器，怎么办呢？呵呵，很高兴你选择了wget，你可以使用它的配置文件，环境变量来利用代理。这里推荐使用环境变量，如在 bash里面我们可以把天天用的proxy加到.bash_profile里面，这是Linux标准写法（很多软件都用的，什么apt-get，yum等等）

export http_proxy=http://10.20.30.40:8080

然后，proxy就默认打开了，如果需要暂时关闭，可以使用

wget –proxy=off -r -k http://www.txia.com/blog

当然，写一个.wgetrc文件也可以，该文件可以从/usr/local/etc里面找到，里面有很详细的注释，我就不多说了。

下载网页的时候比较麻烦的事情是，有的网页被同时指向了很多遍，那么为了避免多次下载，我们使用

wget -nc -r -k http://www.txia.com/blog

可以避免这件事情。为了不被有的连接指向非http://www.txia.com/blog内层目录，我们还应该加上

wget -nc -np -r -k http://www.txia.com/blog

避免下载非该目录里面的文件，这也避免了到不同的host上面去。当然，如果你希望有这个功能，在多个host之间跳来跳去的下载，可以使用

wget -nc -np -H -r -k http://www.txia.com/blog

使得可以在多个host之间span，同时-I和-X可以使得我们仅仅跟踪某些目录或者不跟踪某些目录。如果某些HTML里面你需要的东西不是由这种东西作出来的，你就得使用–follow-tags和–ignore-tags了。

嘿，我有个文件里面都是连接，怎么办？要是不是html你只需要

wget -i your.file

如果是，那也不繁

wget -F -i your.file

wget 使用指南
wget是一个从网络上自动下载文件的自由工具。它支持HTTP，HTTPS和FTP协议，可以使用HTTP代理.

wget的常见用法
wget的使用格式

Usage: wget [OPTION]… [URL]…

用wget做站点镜像:
wget -r -p -np -k http://dsec.pku.edu.cn/~usr_name/
-r 表示递归下载,会下载所有的链接,不过要注意的是,不要单独使用这个参数,因为如果你要下载的网站也有别的网站的链接,wget也会把别的网站的东西下载下来,所以要加上 -np这个参数,表示不下载别的站点的链接. -k表示将下载的网页里的链接修改为本地链接.-p获得所有显示网页所需的元素,比如图片什么的.

# 或者
wget -m http://www.tldp.org/LDP/abs/html/

在不稳定的网络上下载一个部分下载的文件，以及在空闲时段下载
wget -t 0 -w 31 -c http://dsec.pku.edu.cn/BBC.avi -o down.log &
# 或者从filelist读入要下载的文件列表
wget -t 0 -w 31 -c -B ftp://dsec.pku.edu.cn/linuxsoft -i filelist.txt -o down.log &

上面的代码还可以用来在网络比较空闲的时段进行下载。我的用法是:在mozilla中将不方便当时下载的URL链接拷贝到内存中然后粘贴到文件filelist.txt中，在晚上要出去系统前执行上面代码的第二条。

使用代理下载
wget -Y on -p -k https://sourceforge.net/projects/wvware/

代理可以在环境变量或wgetrc文件中设定
# 在环境变量中设定代理
export PROXY=http://211.90.168.94:8080/
# 在~/.wgetrc中设定代理
http_proxy = http://proxy.yoyodyne.com:18023/
ftp_proxy = http://proxy.yoyodyne.com:18023/

wget各种选项分类列表
启动
-V, –version 显示wget的版本后退出
-h, –help 打印语法帮助
-b, –background 启动后转入后台执行
-e, –execute=COMMAND 执行`.wgetrc’格式的命令，wgetrc格式参见/etc/wgetrc或~/.wgetrc

记录和输入文件
-o, –output-file=FILE 把记录写到FILE文件中
-a, –append-output=FILE 把记录追加到FILE文件中
-d, –debug 打印调试输出
-q, –quiet 安静模式(没有输出)
-v, –verbose 冗长模式(这是缺省设置)
-nv, –non-verbose 关掉冗长模式，但不是安静模式
-i, –input-file=FILE 下载在FILE文件中出现的URLs
-F, –force-html 把输入文件当作HTML格式文件对待
-B, –base=URL 将URL作为在-F -i参数指定的文件中出现的相对链接的前缀
–sslcertfile=FILE 可选客户端证书
–sslcertkey=KEYFILE 可选客户端证书的KEYFILE
–egd-file=FILE 指定EGD socket的文件名

下载
–bind-address=ADDRESS 指定本地使用地址(主机名或IP，当本地有多个IP或名字时使用)
-t, –tries=NUMBER 设定最大尝试链接次数(0 表示无限制).
-O –output-document=FILE 把文档写到FILE文件中
-nc, –no-clobber 不要覆盖存在的文件或使用.#前缀
-c, –continue 接着下载没下载完的文件
–progress=TYPE 设定进程条标记
-N, –timestamping 不要重新下载文件除非比本地文件新
-S, –server-response 打印服务器的回应
–spider 不下载任何东西
-T, –timeout=SECONDS 设定响应超时的秒数
-w, –wait=SECONDS 两次尝试之间间隔SECONDS秒
–waitretry=SECONDS 在重新链接之间等待1…SECONDS秒
–random-wait 在下载之间等待0…2*WAIT秒
-Y, –proxy=on/off 打开或关闭代理
-Q, –quota=NUMBER 设置下载的容量限制
–limit-rate=RATE 限定下载输率

目录
-nd –no-directories 不创建目录
-x, –force-directories 强制创建目录
-nH, –no-host-directories 不创建主机目录
-P, –directory-prefix=PREFIX 将文件保存到目录 PREFIX/…
–cut-dirs=NUMBER 忽略 NUMBER层远程目录

HTTP 选项
–http-user=USER 设定HTTP用户名为 USER.
–http-passwd=PASS 设定http密码为 PASS.
-C, –cache=on/off 允许/不允许服务器端的数据缓存 (一般情况下允许).
-E, –html-extension 将所有text/html文档以.html扩展名保存
–ignore-length 忽略 `Content-Length’头域
–header=STRING 在headers中插入字符串 STRING
–proxy-user=USER 设定代理的用户名为 USER
–proxy-passwd=PASS 设定代理的密码为 PASS
–referer=URL 在HTTP请求中包含 `Referer: URL’头
-s, –save-headers 保存HTTP头到文件
-U, –user-agent=AGENT 设定代理的名称为 AGENT而不是 Wget/VERSION.
–no-http-keep-alive 关闭 HTTP活动链接 (永远链接).
–cookies=off 不使用 cookies.
–load-cookies=FILE 在开始会话前从文件 FILE中加载cookie
–save-cookies=FILE 在会话结束后将 cookies保存到 FILE文件中

FTP 选项
-nr, –dont-remove-listing 不移走 `.listing’文件
-g, –glob=on/off 打开或关闭文件名的 globbing机制
–passive-ftp 使用被动传输模式 (缺省值).
–active-ftp 使用主动传输模式
–retr-symlinks 在递归的时候，将链接指向文件(而不是目录)

递归下载
-r, –recursive 递归下载－－慎用!
-l, –level=NUMBER 最大递归深度 (inf 或 0 代表无穷).
–delete-after 在现在完毕后局部删除文件
-k, –convert-links 转换非相对链接为相对链接
-K, –backup-converted 在转换文件X之前，将之备份为 X.orig
-m, –mirror 等价于 -r -N -l inf -nr.
-p, –page-requisites 下载显示HTML文件的所有图片

递归下载中的包含和不包含(accept/reject)
-A, –accept=LIST 分号分隔的被接受扩展名的列表
-R, –reject=LIST 分号分隔的不被接受的扩展名的列表
-D, –domains=LIST 分号分隔的被接受域的列表
–exclude-domains=LIST 分号分隔的不被接受的域的列表
–follow-ftp 跟踪HTML文档中的FTP链接
–follow-tags=LIST 分号分隔的被跟踪的HTML标签的列表
-G, –ignore-tags=LIST 分号分隔的被忽略的HTML标签的列表
-H, –span-hosts 当递归时转到外部主机
-L, –relative 仅仅跟踪相对链接
-I, –include-directories=LIST 允许目录的列表
-X, –exclude-directories=LIST 不被包含目录的列表
-np, –no-parent 不要追溯到父目录

问题
在递归下载的时候，遇到目录中有中文的时候，wget创建的本地目录名会用URL编码规则处理。如”天网防火墙”会被存为”%CC%EC%CD%F8%B7%C0%BB%F0%C7%BD”,这造成阅读上的极大不方便。

正确的握笔姿势

人到三十岁，却忽然发现自己连正确写字都不会，这才是真正毁三观的事情。使用矫正以后的握笔姿势，看着自己写出来的歪歪斜斜的字，一些片段闪现在心里，滋味难言，如果说准确一点，也许就是一些想哭的感觉吧。

但言归正传，还是把“正确的握笔姿势”贴在这里。

来自台湾的布衣老师

正确靠笔的位置

食指和拇指，拇指相对靠近食指第一个关节的中间，指向食指的指尖。

错误示范1

错误示范2

布衣老师的握笔姿势全矫正系列

我习惯加在.bash_profile的10个alias

echo "1. myos 查看本机操作系统、内核信息" alias myos="cat /proc/version && cat /etc/redhat-release && cat /etc/issue" echo "2. myip 查看本机ip地址信息" alias myip="/sbin/ifconfig | grep -a 'inet addr' | sed -e '/127\\.0\\.0\\.1/d;s/.*inet addr:\$[0-9\\.]\\+\$.*/\\1/'" echo "3. myps 查看系统中运行的进程完整命令行信息" alias myps="ps -A -eo pid,ppid,args --width=2048" echo "4. mydate 按照格式显示当前日期及时间戳" alias mydate="date +'%Y-%m-%d %H:%M:%S , tp=%s'" echo "5. myls 列出当前目录内容，按时间排序" alias myls="ls -althr" echo "6. mybf 查找当前目录下大于100M的文件" alias mybf="find . -size +102400k -printf '%kk\t%p\n'" echo "7. mynf 查找当前目录下最近5分钟内修改过的文件" alias mynf="find . -mmin -5 -printf '%TY-%Tm-%Td %TH:%TM:%TS\t%p\n'" echo "8. mydf 查看磁盘空间和inode使用情况" alias mydf="df -h && df -ih" echo "9. mymd 快速创建多层目录" alias mymd="mkdir -p" echo "10.rmsvn 删除当前目录下所有的 .svn 目录" alias rmsvn="find . -type d -name '.svn' -exec rm -rf {} \\; 2>/dev/null"

Centos-Server-Nginx之禁止网络爬虫 – 缤纷世界 – 博客园

“网路爬虫”在日常维护服务的过程中，是一个常见的问题。它说：“我要一步一步往上爬，爬呀爬呀爬到服务Game Over”！呵呵，因为遇到了，所以分享一下，处理网络爬虫的方法（这里主要是在Nginx上，做禁止爬虫）.

常见问题：

1.网络堵塞丢包严重（上下行数据异常，排除DDOS攻击，服务器中毒。异常下载，数据更新）

2.服务器负载过高，CPU几乎跑满（针对相应的服务配置而定）；

3.服务基本瘫痪，路由瘫痪；

4.查看日志发现大量的异常访问日志

思路:先查看日志–分析日志–针对相关信息来源做限制（防火墙，Nginx本身都可以）；

具体步骤：

一.先查看日志

cat logs/www.ready.log |grep spider -c (看有爬虫标志的访问次数)

cat logs/www.ready.log |wc (合计总页面的访问次数)

cat logs/www.ready.log |grep spider|awk ‘{print $1}’|sort -n|uniq -c|sort -nr （查看爬虫的IP地址来源）

cat logs/www.ready.log |awk ‘{print $1 ” ” substr($4,14,5)}’|sort -n|uniq -c|sort -nr|head -20(_列出1分钟内的前20位IP地址)

cat logs/www.ready.log |grep ip （列出出现较多的IP地址，这个可以结合上面的命令使用。）

二.分析日志

晓得爬虫爬过那些内容，是什么爬虫爬的。什么时候爬的

常见的爬虫有Google,Baidu,Yahoo这些（在下面的Nginx的http_user_agent配置处，有一些常见的爬虫）

三.修改防火墙策略，毙掉这个好奇的爬虫IP

vim /etc/sysconfig/iptables

-A RH-Firewall-1-INPUT -m state –state NEW -m tcp -p tcp –dport 80 -s 61.33.22.1/24 -j REJECT

-A RH-Firewall-1-INPUT -m state –state NEW -m tcp -p tcp –dport 80 -s 61.22.1.1/24 -j REJECT

重新启动iptables生效。

四.关于Nginx上的http_user_agent 的设置也可以很好的防范

具体的配置信息如下：

server {

listen 80;

server_name www.ready.com;

{

return 403;

}

location ~ ^/(.*)$ {

proxy_pass http://localhost:80;

proxy_redirect off;

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

client_max_body_size 10m;

client_body_buffer_size 128k;

proxy_connect_timeout 90;

proxy_send_timeout 90;

proxy_read_timeout 90;

proxy_buffer_size 4k;

proxy_buffers 4 32k;

proxy_busy_buffers_size 64k; proxy_temp_file_write_size 64k;

}

error_page 500 502 503 504 /50x.html;

location = /50x.html { root html;

}

篱笆上的钉子

The Nails in the Fence

There was a little boy who had a bad temper. His father gave him a bag of nails and told him that every time he lost his temper, he must hammer anail into the back of the fence.

The first day the boy had driven 37 nails into the fence. Over the next few weeks, as he learned to control his anger, the number of nails hammered daily gradually dwndled down. He discovered it was easier to hold his temper than to drive those nails into the fence.

Finally the day came when the boy didn’t lose his temper at all. He told his father about it and the father suggested that the boy now pull out one nail for each day that he was able to hold histemper.

The days passed and the young boy was finally able to tell his father that all the nails were gone. The father took his son by the hand and led him to the fence. He said:”you have done well, my son, but look at the holes in the fence. The fence will never be the same. When you say things in anger, they leave a scar just like this one. You can put a knife in a man and draw it out, and it won’t matter how many times you say I’m sorry, the wound is still there. A verbal wound is as bad as a physical one.

附翻译如下：

篱笆上的钉子

从前有一个小男孩脾气很坏，父亲给他一袋钉子，告诉他每当他脾气失控时，就在篱笆的背面钉一颗钉子。

第一天，小男孩往篱笆上钉了37颗钉子。后来几周里，他逐渐学会了克制情绪，钉入篱笆的钉子日渐减少。他发现控制情绪比在篱笆上钉钉子要容易得多。

终于有一天，小男孩可以完全控制自己情绪了。他告诉了父亲，父亲建议他在能够支配情绪的日子里，每天拔下一颗钉子。

日子一天天过去，小男孩终于告诉父亲钉子全部拔完了。父亲牵着儿子的手领他来到篱笆前。他说：“儿子，干得不错。但你看看篱笆上的这些洞。这到篱笆永远不是从前的篱笆了。每当你说气话时，也会留下同样的疤痕。你可以持刀刺向别人然后再拔出来，但不管你道歉多少次，伤疤依旧。口头的伤害和身体的伤害一样伤人啊。”

404错误 /e8f6b078-0f35-11de-85c5-efc5ef23aa1f/aupm/notify.do?dispatch=checkBulletin

最近网站爆出越来越多的404链接错误,

/e8f6b078-0f35-11de-85c5-efc5ef23aa1f/aupm/notify.do?dispatch=checkBulletin

调查发现都是来至美国康卡斯特有线电视网络用户,请求用于验证网络流量是否到限.

难道是最近美国用户都没有流量了?

http://blog.ryankearney.com/2013/01/comcast-caught-intercepting-and-altering-your-web-traffic/

盘点：九大HTML5开发工具

　HTML5被看做是Web开发者创建流行Web应用的利器，增加了对视频和Canvas 2D的支持。HTML5的诞生还让人们重新审视浏览器专用多媒体插件的未来，如Adobe的Flash和微软的Silverlight，HTML5为实现这些插件的功能提供了一种标准化的方式。

　　虽然HTML5标准尚未开发完成，但是随着开发者对HTML5的兴趣日渐浓厚，开发工具提供商也开始跟进。以下介绍的9款应用工具已经能够帮助开发者在程序中集成HTML5功能。

崛起中的九大HTML5开发工具

　　一、Adobe Edge

崛起中的九大HTML5开发工具

　　目前还处于预览阶段的Adobe Edge是用HTML5、CSS、JavaScript开发动态互动内容的设计工具。内容可以同时兼容移动设备和桌面电脑。Edge的一个重要功能是Web工具包界面，方便确保页面在不同浏览器中的架构一致性，此外Edge还将整合TypeKit这样的字体服务。

　　动画和图形可以添加到HTML元素中，程序也能通过Edge自身的代码片段库或者JavaScript代码进行扩展。动画可以在独立的时间线上进行嵌套，还能实现互动功能。符合可以服用并通过API和代码片段控制。通过Edge设计的内容可以兼容iOS和Android设备，也可以运行在火狐、Chrome、Safari和IE9等主流浏览器。

　　二、Adobe Dreamweaver CS6

崛起中的九大HTML5开发工具

　　Adobe Dreamweaver CS6作为一个Web设计软件，提供了对HTML网站和移动程序的可视化编辑界面。其Fluid Grid排版系统整合CSS样式表功能，提供自适应版面的跨平台兼容性。开发者可以完全实现Web设计的可视化操作，无需为代码所困。

　　用户不但还能在Live View中预览，还提供多屏幕预览功能。开发者可以通过MultiScreen预览面板查看HTML5内容的渲染效果。Live View通过WebKit渲染引擎支持HTML5。

　　三、Adobe ColdFusion 10

崛起中的九大HTML5开发工具

　　ColdFusion是用来开发企业Web程序的服务器端技术，通过Websockets、互动表单、视频和地理标签等HTML5技术创建富媒体用户体验。

　　四、Sencha Architect 2

崛起中的九大HTML5开发工具

　　在开发移动和桌面应用的工具中，Sencha的定位是HTML5可视化应用开发。开发团队可以在一个单一集成的环境中完成应用的设计、开发和部署。开发者还可以开发Sencha Touch2和Ext JS4 JavaScript应用，并实时预览。

　　五、Sencha Touch 2

崛起中的九大HTML5开发工具

　　Sencha Touch2是移动应用框架，也被看作是Sencha的HTML5平台。开发者可以用它开发面向iOS、Android和Blackberry、Kindle Fire等多种平台的移动应用。

　　六、Dojo Foundation Maqetta

崛起中的九大HTML5开发工具

　　来自于IBM的一个项目，Dojo Foundation Maqetta是为桌面和移动设备开发HTML5应用的开源工具，支持在浏览器中查看HTML5界面。用户体验设计师可以通过拖放组装UI样板。

　　七、微软Visual Studio 2010 ServicePack 1

崛起中的九大HTML5开发工具

　　虽然一开始并不支持HTML5，但微软在2011年三月发布的Visual Studio 2010 SP1中提供了IntelliSense，追加了针对HTML5的一些元素。

　　八、JetBrains WebStorm 4.0

崛起中的九大HTML5开发工具

　　作为拥有HTML编辑器的JavaScript集成开发环境，WebStorm4.0提供了开发web应用的HTML5样板。开发者可以在创建HTML文档时可获得对HTML5文件的支持。例如砍伐者键入。开发者还可以在chrome浏览器中实时预览HTML文档。

　　九、Google Web Toolkit

崛起中的九大HTML5开发工具

　　该开发工具用于开发浏览器应用，但库中支持很多HTML5功能。包括对客户端或web存储的支持。其他HTML5功能还包括支持Canvas可视化，以及音频和视频widget。

http://dev.yesky.com/457/33875957.shtml

产品经理如何分析互联网产品？

现在的互联网产品层出不穷，作为产品经理应该如何正确的分析其价值和定位，成为国内社区日益关注的主题之一。最近，知乎社区里的产品经理、开发人员针对“如何分析互联网产品”这一问题进行了深入的讨论。InfoQ整理了其中的精彩内容供读者参考。

徐乙®

（卫哲的3+1思考法）
3：
需求是从哪里来的？目标客户是谁？
有多少人有这样的需求？这个需求紧迫吗？
他们的痛是什么？场景是什么？（用产品之前/之后）
+1：
解决之后在网站数据上会有什么表现？

黄而慧 Kent

这是一个我个人觉得很好的例子——作为产品的方便面。
解决了什么用户的什么需求？方便面解决了宅男快速填饱肚子的需求。
产生需求的场合是什么？某天半夜，玩网游，刚和队友杀掉一个终极大Boss，忽然感到饿了，需要吃点东西。
产品的主要功能有哪些？撕开袋子，用开水泡3min，达到能吃的状态。
技术基础是什么？有一种面，可以用开水短时间泡到能吃的状态；有一种调料，让这个面不那么难吃。
没有这个产品的时候，用户是怎么解决问题的？开水加饼干。
竞争对手是什么？各种能做主食的速食，扩展开，外卖也算，高能压缩食品也算，会做饭的宅女也算。
顺应了什么趋势？部分目标用户越来越宅，越来越懒，自己开火做饭变得很奢侈。

郑麒轩

这个是什么？
它好用吗？（有没有：哇噢~它很精彩！）
其他用户是怎么看的？
它真正地做到它要做的事了吗？
还有什么其他应用价值？
能否跟我的产品整合？有没有合作机会？
整合（合作）会很有价值吗？

……

对了，我是怎么知道它的？其他人呢？
它值得介绍给其他朋友使用吗？
我要不要付费使用？他们呢？
我会一直用下去吗？
它是在圈钱还是圈人？
它现在会很值钱，还是将来会非常值钱？
它烧钱吗？每个月要烧多少钱？
这样的模式划得来吗？
谁投资过它了？多少钱？
团队有明星在吗？

……

同行朋友们知道它了吗？他们怎么看？
如果我在做同样的东西，我会漏什么？它现在缺什么？真的是缺吗？
我需要和他们竞争吗？如果boss们要做呢？

江洋

是否有用？即是否有用户需求，满足哪部分市场？
对谁有用？即满足什么样的用户人群。
有什么用？即可以创造什么内容，创造什么价值，会有什么样的商业模式。
是否好用？该产品是否有自己特色的feature，设计细节及用户体验是否有可学习借签的地方。

乔不弑

请回答前先注意问题是：分析一个互联网产品的思路，类似与市场调研中的竞品分析，而不是产品评估。所以你不可能准确了解它的目标用户，产品原则。请勿答非所问。
我谈谈自己看法：

行业分析。分析行业中存在的主要竞品情况和优势，行业格局，发展前景和机遇。
产品优势。包括产品潜在优势和显性优势。
产品逻辑及策略。包括截面与动态分析。产品独特优势，或未来市场价值，或产品的未来发展路线及预测。
用户体验评价。这个应该和产品评估是一样的。

李幸

分析一款产品，得根据实际环境来决定如何分析。先看战略方向，看投入程度，预估项目本身所能达到的目标。这些都有了，就逐渐缩小范围，开始考虑用户需求、市场需求和数据结构。

如果这个产品是已经存在的，分析时就可以从现有的优势与不足做起，然后看离目标有多远，或超过了多少，未来规划怎样，竞争对手或同类产品所能达到的高度或不足有哪些。紧紧围绕用户的需求——这里，不是单纯地指网络用户，比如一款数据运营型产品，还得考虑内部编辑的感受；比如商业能力高的垂直产品，就得结合“地面客户”的需求。

分析产品不太有定势可言。但是大致能有一些规律可循，就是思考这样一些问题：分析这个产品来干嘛，分析的作用是什么？对你整个规划有什么帮助？在了解这些前提条件之后，制定分析方案，就好做多了。

拿我现在做的事情做个例子：我不用考虑产品战略层面，比如到底怎么走移动互联网的路子，怎么把产品跟电子商务结合，那我一上来的分析，肯定是原有产品数据形态、功能设置、交互和体验、包括视觉一些因素啦，这些不涉及到大的转型，分析起来稍微容易些。

余德光

尽量先找该产品的原型（最类似的产品），这个原型可能是国外的，也可能是其它领域的。在这里实实在在已经存在的这些原型是最有借鉴意义的，同时抄袭是人类的共同财富。
如果是我，我会再找行业内的人问一圈，问问大家对这个产品的看法，总结这个产品的核心所在。
如果需要更为详尽的分析，可能需要建立一套严密的分析框架，比如会运用商业模式模型分析、五力模型、SWOT等等各类框架。比如这篇《深入解读Groupon新型团购》。在运用这些分析工具进行分析的时候，有数据的时候尽量用数据说话，没有数据的时候靠逻辑。

总之，在分析一个产品的时候，我觉得需要找到这个行业内的关键人，总结这个产品的核心要点，并对这个核心要点进行关键分析。要重视二八法则。

王宇鹏

顶楼的卫哲的方法，不是很适用于互联网，例如触摸手机,，这个需求紧迫吗? 当然不紧迫，在Nokia的塞班平台统治键盘的手机世界有谁会去用触摸屏?
但是当触摸手机出来以后一切都变了。
还有很多例子，例如很多软件，没出来之前肯定没有需求，出来之后大家大呼感叹原来还可以这么用。
我觉得Facebook的工程师驱动文化是最值得推荐的，只要有一个人认为觉得有用或一个小团体几个人觉得有用，而且非常想把它做出来而且也可以做出来,即使是只满足自己的需求，那么就开始做吧。所谓需求有多少，市场有多大，用户有多少都是扯淡。
请注意，我们是做互联网行业，互联网一个不变的方法论就是“变”，那么创新是最重要的，只要是创新的就一定有市场（主要创新肯定是纵观目前市场没有的东西，不是微创新），而且，市场、用户、需求都是直接由发起方定义的，不是用户定义的。引用鲁迅一句话：世上本没有路，走的人多了也就变成了路。

ChaoFung

我是学心理的，我想从马斯洛的需求层次来说。首先这个产品有没有让人一眼看上去很舒服，或能解决实际问题，解决用户的生理需求。其次，这个产品有没有让用户感到用的简便、踏实，无需耗费或多时间精力，产品要考虑的周到细致、秩序井然，满足用户的安全需求。第三，产品有没有让用户与其他用户产生良好的互动或与产品本身产生良好的互动，产品有没有考虑到大众的行为习惯，是否具有较高的用户黏性，满足用户的归属需求。第四，产品能否带给用户提升价值的能力，产品提供的服务是否提升了用户价值，能否让用户感到在使用该产品的过程中自己的价值得到了提升（本身价值+心理价值+学习所得价值，这一点知乎就做到了），满足用户的尊重需求。最后，该产品能否让用户成长，实现自身的价值并成为产品的无形建设者，满足用户的自我实现需求。

读者朋友对“产品经理应该如何分析互联网产品”这一问题持哪种看法？欢迎发表自己的意见！

崔康热情的技术探索者，资深软件工程师，InfoQ编辑，从事企业级Web应用的相关工作，关注性能优化、Web技术、浏览器等领域。

firebug内置方法集,调试必备

命令行 API按 F1 打开在线 Firebug 帮助

$()返回指定 id 的单个元素

$$()返回与指定 CSS 选择器匹配的元素的数组

$0代表使用查看器选中的最后一个元素

$1代表使用查看器选中的倒数第二个元素

$n()返回使用查看器选中的最后五个元素之一。参数为从 0 开始的序号

$x()返回与指定 XPath 表达式匹配的元素的数组

cd()命令行表达式默认对应于页面的顶层窗口。cd() 可用来在页面顶层窗口和指定框架窗口间切换

clear()清空控制台

copy()复制函数的返回值或者对象到剪贴板

debug()在指定函数的第一行添加断点

dir()打印指定对象所有属性的互动列表。与 DOM 面板中的视图一致

dirxml()打印指定 HTML/XML 元素的 XML 源码树。与 HTML 面板中的视图一致。单击任意节点以在 HTML 面板中查看它

help显示所有可用命令的帮助

inspect()在最合适的面板中查看对象。可以通过第二个参数来指定面板，包括 “html”, “stylesheet”, “script”, 和 “dom”

keys()返回包含指定对象所有属性名称的数组

monitor()打开对指定函数所有调用的日志

monitorEvents()打开指定对象所有事件的日志。可以通过第二个参数来指定只记录特定的事件/事件类型，包括 “composition”, “contextmenu”, “drag”, “focus”, “form”, “key”, “load”, “mouse”, “mutation”, “paint”, “scroll”, “text”, “ui”, “xul”, 和 “clipboard”

profile()开始收集 Javascript 概况。可以通过第二个参数来指定概况报告表头的文本

profileEnd()停止记录 Javascript 概况并打印报告

table()可用于以表格布局记录数组/对象的数组。可以通过第二个参数来指定只记录特定的列/属性

traceAll()traceAll

traceCalls()traceCalls

undebug()移除指定函数第一行的断点

unmonitor()关闭对指定函数所有调用的日志

unmonitorEvents()关闭指定对象所有事件的日志。可以通过第二个参数来指定只停止记录特定的事件/事件类型。

untraceAll()untraceAll

untraceCalls()untraceCalls

values()返回包含指定对象所有属性值的数组

qdsang的地儿

事儿还得坚持

交互体验优化：4步让移动网站看起来像本地应用

体验性能 VS 实际性能

这里有四个技巧，你可以立即开始实施。

Without Touch State(code)

With Touch State(code)

No Momentum Scrolling (code)

With Momentum Scrolling (code)

总结

wget 整站抓取的好工具

正确的握笔姿势

我习惯加在.bash_profile的10个alias

Centos-Server-Nginx之禁止网络爬虫 – 缤纷世界 – 博客园

篱笆上的钉子

404错误 /e8f6b078-0f35-11de-85c5-efc5ef23aa1f/aupm/notify.do?dispatch=checkBulletin

盘点：九大HTML5开发工具

产品经理如何分析互联网产品？

firebug内置方法集,调试必备