Mikel

百度分享是百度推出的分享工代码，获取代码地址 获取百度分享按钮Wordpress插件点击下载：WordPress 2.7-3.2 插件更新日期:2011.09.21 1、下载百度分享插件的wordpress版本，将解压得到的baidushare文件夹复制到您站点的wp- content\plugins目录下。您也可以登录后台管理中心，单击左侧的”插件”标签，单击上方的”安装插件”按钮，选择”上传”，直接选择您下载 的zip压缩包点击”现在安装”即可。 2、使用管理员账号登录您的站点后台管理中心，单击左侧的”插件”标签，您将会看到页面上列出了百度分享插件，请单击插件下方的”启用”按钮启用百度分享插件。启用插件之后，请单击插件说明文字结尾处的配置链接。 3、之后页面将会跳转到配置页面。插件默认嵌入按钮式标准风格，您可以在本页面通过拷贝您获得的分享代码更改样式。同时，您还可以设置分享按钮的位置和分享内容的简单定义。更改设置后需单击”保存配置”提交您的更改。 4、进行上述操作后，您就可以在您的博客页面中看到百度分享按钮，并通过该按钮方便的分享内容到人人网、开心网、QQ空间、新浪微博等一系列SNS站点。下图为默认设置下的分享按钮示例。 5、如果您需要在页面的其他位置嵌入按钮，百度分享插件为您提供了Wordpress小工具形式的按钮，可以方便的嵌入到 页面的各个位置。您只需要在管理页面选择”外观”标签下的”小工具”子标签，就可以在页面中找到百度分享按钮的小工具，将该小工具拖动到页面右侧的相应位 置即可。 使用百度分享插件可以将多个分享代码放置在不同的位置，只需要在wordpress后台设置中选择百度分享将你需要的分享代码依次粘贴在分享的代码的文本框中保存设置即可在多处显示分享按钮

.   什么是工具型网站 我们先从wikipedia上了解三组概念： 工具：是指能够方便人们完成工作的器具。 application：用来帮助用户完成某个单独的或是一组相关的工作的计算机软件。 web application：指通过使用Web和Web浏览器技术，跨越网络完成一个或多个任务的应用程序，通常需要使用Web浏览器。 由此可见，应用就是计算机领域的工具，工具型网站可定义为承载了一个或多个网页应用的网站。它专注于让用户完成一系列的任务，如注册、支付等。 　首页的用户需求 首页的用户大体说来可分为三类：不了解的新用户、有兴趣的新用户、老用户。 对于新用户而言，他们势必会问到这些问题： 我在这能做些什么? 这个网站能提供哪些对我很重要的东西? 对于已经有兴趣的用户也会有些其他的疑问： 我应该怎么开始? 我是否必须注册?如果是，应该怎样注册? 总得来说，首页应该解答新用户的疑惑并且帮助他们找到功能的入口;而对于老用户，则需要更明显、快捷的登录入口。 首页的目标 《designing for the social web》一书将用户的使用分为几个步骤：不了解——感兴趣——第一次使用——常规使用——有情感。而首页对于前面三个步骤至关重要!   这样看来，首页有两个目标： 1. 让不了解的用户了解网站并产生兴趣，最终促成用户使用。 2. 让有兴趣的用户尽快开始使用。 　首页的设计 在实际工作中我们会碰到几种不同类型的工具型网站，针对其网站内容的不同，其首页的表现形式也大不一样。 　集中应用型 这类网站本质上是一组或者多组web app，功能多且相对简单，不会产生大量用户数据。 1. 核心结构 将使用最多的功能展示在首页对于用户来说就是最快的入口。用户通过logo、 banner、网站声明等了解网站性质，然后就是找到自己要的功能。 2. 注册/登录模块 因为用户不想分散精力去记起用户名和密码，或者是他们太专注在自己要做的事情上，原则上只在必要时才让用户登录。但如果大部分功能都需要先登录，那么在首页直接展示登录表单是有必要的。 3. 案例 58同城 有两级目录：城市目录、功能目录。用户通过这两级目录很容易找到想要的功能。但使用这些功能大都不用注册，所以首页并没有明显的登录模块。   腾讯充值中心 首页的核心模块依旧在目录结构，用户由此了解网站主要业务以及如何开始自己的任务。   去除一些运营性需求，可以得到一个更加纯粹的充值网站：   数据管理型 这类网站本质上一个大的web app。功能流程复杂，会产生大量数据，往往承载了强大的数据管理功能。 [...]

一个页面重构工程师眼中的“用户体验”   在工业化设计融入人们生活的现今，用户体验一词就常常出现在人们的视线里，随着互联网web2.0时代的到来，大大小小的网站设计中也都开始关注用户体验的方面，对什么是用户体验(百度这四个字，比我写什么解释都好)就不做详细赘述了，相信大家比我了解的更加丰富。 用户体验从产品设计阶段便开始介入进来，如原型设计中交互模式设计、功能实现方式设计都融入了设计人员对用户的关怀，听过这样的一句话：“具有良好用 户体验的产品，不仅仅取决于一个有着丰富交互设计经验的产品设计师，还与产品生产过程中的每一个环节是否都具备良好的用户体验意识有一定的关系”。 今天我想从一个页面重构工程师的角度出发，从两个方面去谈谈在我的工作中，我所理解的用户体验，以及我做了哪些和用户体验有关的事情。 　　一、 从可用到易用的细节处理 　　1. 按钮、链接、导航菜单的鼠标触发状态、鼠标手型等 随着视觉设计的发展，对按钮、链接、或者导航菜单的表现方式变得异常丰富，比如:   这些图片丰富了对鼠标点击形式的视觉表现力。在基于功能可用的前提下，逐渐通过视觉渲染达到美化的效果，有了精美的设计图后，就需要页面重构工程师们加以切割，在代码化的过程中，通常要做如下考量： 可点击区域大小，例如(下图)尽管风格上似乎按钮只有10*10，但是在实现时，要考虑用户操作起来是不是很容易获取锚点，而不是点来点去找不到   鼠标操作类型的提示，鼠标输入提示、手型提示、文本区域提示、不可点击提示，尽管整个页面的视觉引导更重要，但用户在操作时，人眼一直跟随着鼠标或键盘的操作而转换，如果能伴随着正确的鼠标操作提示，更可增强引导作用。从而提升交互体验。 按钮风格的一致性，按钮当前状态和点击状态的统一，按钮按照功能所作的统一， 设计师天马行空的想象力，赋予了他们创造性，而我们既要保留他们的创造力还要抽象出一些共用特征，在我看来按钮类型有3种，如果能有效区分，对网站的整体风格的建立和强化交互感受方面都会有一定一致性，同时在页面构建过程中会抽离成公用信息，非常便于管理和维护。 1)如确认、取消等，可称之为贯穿型 2)如登录、加关注等，可称之为点睛型，这一型在实际工作中通常从视觉上都略强于贯穿型，所以会建议设计师做一定统一，有时候是风格上，有时候是结构上，再甚者就是大小比例上 3)如发博文、发微博等按钮，可称之为增强型，通常这个类型不会限制设计师按照标准类型去做，即便出来的是个异型，我们还是应该理解的。 4)最后就是无论哪种类型，都要注意是否有鼠标点击的hover状态，即便设计师没有设计，也要做出hover的交互效果，至少是预留，就我而言通常 都是在原按钮颜色基础上调整一下颜色深度作为hover状态，大部分按钮我都会考虑做出交互效果，当然也有例外，比如活动专题中的点击区域，通常不会增加 点击后的过分明显效果，如果非要做出一点效果，最多是调整一下文字本身的明暗度。(我承认我有些吹毛求疵) 　2. 图片的alt解释信息   通常拿到设计需求，我会要求设计师帮助梳理icon，一般会分两类，功能型、注释型。同时要求两种类型图片的像素区间要各自保持一致性，这样一来设计 师在整理的过程中就会意识到，有的文字没有必要加注释图片，有的是功能和注释类型的大小、风格可能不一致，梳理过程中设计师会去调整一下，同时也在创意的 过程中渗透一些规则。   第一、二行是注释型，第三行是功能型 　3. 因设计或排版而没有完全显示出来的文字信息的title提示     产品或用户经常抱怨“后面的文字看不到，这到底是什么内容?”之所以出现这样的情况，主要是没有考虑到文字信息出现的位置和当时这些文字的重要性，如 果是图片瀑布流，那文字信息的作用只是索引而已，如果是文章列表页或视频列表页、甚至正文页这样的终极页面，标题名称是务必要全部展示的。所以为了避免折 磨用户，一定要给显示不完全的信息增加title，在存在缺陷的情况下也能有让用户有些许安慰，否则你就太伤用户的心了。 4. 网站logo的权重设置H1、网站主要标题、标识的权重设置H2-H6、stong、em、b等(对搜索引擎的友好可读性) 考虑各个层面的用户体验，是为了让用户尽量全方位的感受到网页的无边界浏览，在视觉和交互充分发挥作用的背后，代码标签的选择，也从一定层面决定了用 户是否能够更好的使用，目前的一些搜索引擎，如Google、Baidu等，在过滤网页信息的过程中，有一套机制去寻找你网页中的主要内容，那些对搜索引 擎比较友好的标签会更有利于页面信息的抓取，在用户搜索的过程中，抛开企业间战略合作不谈，也会相对显示在比较靠前的位置(当然如果搜索引擎的广告效益非 常好的时候，或许第一屏还是与你无缘，这……你懂的) 5. 网站字色的一致性，链接色、提示色、内容字色等 (降低学习成本，培养用户习惯) 设计一套互动类产品(博客、视频、邮箱)或者用户功能型产品(消费类产品、资讯类产品等)同样面临着一个问题，用户习惯，人其实对规律会更容易产生安 全感也更容易增加舒适性。所以在网页的设计过程中，统一视觉感受不仅让用户安心的舒适的去浏览图片文字音乐多媒体等信息，也能培养用户认知。 因此在设计师天马行空的创造力面前，我总是横亘在他们面前的那个规范和逻辑的卫斗士。当设计师天马行空的时候我是不会也不敢去干扰他们，但如果谁告诉我风格确定时，我就会站出来披荆斩棘，要求设计师给出一整套设计规范，例如： • 链接色分主链接色和辅助链接色，建议不要超过2种，增加类功能区域除外 • 文字色也是主辅都要有，同样不要超过两种(其实有多少种都可以，但你要考虑用户花多长时间适应你的五花八门) [...]

[转载]如何优化一个网站使之提高访问速度–更新20120216 – 前方2012 – 博客园. 最近公司开始考核企业站下所有站点，首先从itpub开始进行。为此，开始学习关于如何 优化一个网站使之提高访问速度这方面的知识。得知page speed 是个不错的工具，就下载下来了。介绍下这个工具吧，Page Speed 是开源 Firefox/Firebug 插件。网站管理员和网络开发人员可以使用 Page Speed 来评估他们网页的性能，并获得有关如何改进性能的建议。对网站的网络服务器配置和前端代码执行若干测试。这些测试基于一组已知可增强网页性能的最佳实践。在网页上运行 Page Speed 的网站管理员会获得一组针对各网页的分数，以及有关如何改善网页性能的有用建议。它会使你的网站更快速，减少带宽成本。 下面以我们的itpub站点为列简要说下： 1 首先你得安装这个插件，具体怎么按，略过； 2 安装后，按F12出现下图   3 点击上图花圈的 出现下图：   这个82/100是你这个站按照page speed的考核获得分数 自己决定还是不错的。 黄色的表示 警告 可以进一步优化的 绿色的表示做的不错 红色的表示做的不行需要优化了 （itpub没有红色的 这点做的还是不错的）   4 看下“启用keep-alive” 关于keep-alive 我会在我的另外一篇博文中着重写下。待续   说明it168.com这台主机需要启用keep-alive，可是这是其他项目组的主机，我这边无权修改。所以，在这说下，以后非自己管辖的主机，就直接pass了不管。 5 说下下面的压缩JavaScript pagespeed给你的建议是 进行压缩以下的2个js。你点击后面的op…它会给你生成个压缩后的js。然后你可以替换原先的js即可。这地方只说明怎么做。当然了JQuery也有min版的压缩后的js。 6 上CDN 其实做了这些 还有个更重要的方面，如果你的公司没钱的话，可以按照上面的来做。如果公司有钱，可以加动态CDN 明后天开始给ITPUB上动态CDN，同时对图片 [...]

[转载]如何判断Baiduspider的真假？. 目前中文互联网上有少量spider冒充Baiduspider抓取网页，周六madcon会上，发现很多同学不知道如何判断Baiduspider的真假，再次说明一下： 中文互联网上，Baiduspider ip的hostname以 *.baidu.com的格式命名，非 *.baidu.com即为冒充，建议您使用DNS反查方式来确定抓取来源的ip是否属于百度。 例如，在linux平台下，您可以使用host ip命令反解ip来判断是否来自Baiduspider的抓取。 $ host 123.125.66.120 120.66.125.123.in-addr.arpa domain name pointer baiduspider-123-125-66-120.crawl.baidu.com. 在windows平台下，可以用nslookup命令反解ip来判断是否来自Baiduspider的抓取。 点击“开始”-“运行”-“cmd”-“输入nslookup IP地址”-“回车” C:\Documents and Settings\wangtao>nslookup 123.125.66.120 Name:     baiduspider-123-125-66-120.crawl.baidu.com Address:   123.125.66.120 详请参考： http://www.baidu.com/search/spider_chinese.html PS：Baiduspider绝对不会以匿名的方式抓取网页。