摘要：
昨天一个朋友来腾讯面试，他们进行了一道网站重构的测试( 可以查看我另外一篇相关的文章：http://www.planeart.cn/?p=443)，大致要求如下：布局基本框架上面只是一个简化图，实际比这个复杂不少：Left与Right是固定宽度，中间Main要求自适应，核心问题是Html文档流必须从Main开始然后才是两侧，下面就是这个要求的Html结构<div id=”main”></div><div id=”left”></div><div id=”right”></div>常规做法把两侧放在主要内容的前面进行左右浮动 阅读全文
随笔档案-2012年04月
后台系统规范设计心得（原创理论）
2012-04-27 13:20 by 臭小子1983, 782 阅读, 收藏,
摘要：
后台系统采用一整套UI,为什么会形式各异？能统一并带来更好的体验吗？基于交互设计师自己的内心疑问，我们迫切的产出一套设计规范用于统一后台操作系统，利于用户使用习惯的培养和延续，降低学习成本，提高使用效率，有效提高开发效率，方便功能的优化扩展。基于现有的系统，我们抽丝剥茧，才有了如今的阶段性成果。用户是谁？需求是什么？交互设计师对于一个项目最基本的了解就是源于这两个问题。我们做这次规范也是如此。。。。。。你知，或者不知规范就在那里不悲不喜用户是谁？我们的系统是给谁用的？初期是给我们的小二，后期系统会开放，外部商家或是委托方也会来使用我们的系统。那么我们第一次做系统规范的由于商家或委托方的信息掌握 阅读全文
更贴近业务及用户——交互设计工作方式转变感言（原创理论）
2012-04-27 13:20 by 臭小子1983, 210 阅读, 收藏,
摘要：
引子：年 初时交互设计师与产品经理座谈,议题关于交互设计师应从哪个工作环节切入更能发挥其自身价值。结论是交互随产品经理参与到项目初期需求挖掘阶段，更早的参 与了解业务需求及用户需求，与产品经理共同产出PRD（带有用户体验的高保真原型部分由交互设计师着力产出，原型好处：方便用户参与可用性测试、整个产品 团队更直观地把握设计要求，优势是显而易见的）。取而代之目前项目正式启动，产品经理产出详细的PRD后，交互设计师再参与到项目里参与原型设计,有点 迟,能量没能充分释放！另外我们获得了更多机会接触用户，产品实施阶段也得到了不少的用户反馈，于是有了更多改善产品的机会。这种工作方式推行一个月有余，个人作为 阅读全文
让用户减少学习成本——后台系统交互心得（二）（原创理论）
2012-04-27 13:19 by 臭小子1983, 302 阅读, 收藏,
摘要：
上次的后台系统规范发布之后很多同事都给予了我们肯定，给了我们很大信心。谢谢大家。我们的后台系统现在有新版本在不断地发布。原来的系统规范也就开始不适应所有的环境了。下面是我们需要的困难以及解决方案：1.功能不能满足需求只有上线之后用户真正使用了才会发现新需求。之前的系统是1.0版本主要满足“可用”，等到系统跑起来了，用户开始追求这个系统的“易用”对应方法：添加新功能——通知功能，配置功能，映射功能，高级管理功能2.用户层次多系统上线后，我们的用户数量开始增加，在用户中就会有一些高级用户，他们的权限会比普通用户高。对应方法：系统权限增加——负责一些类目，权限等配置3.技术同学数据订正量大系统上线之 阅读全文
良无限-首页优化（Flash篇）（原创理论）转
2012-04-27 13:18 by 臭小子1983, 185 阅读, 收藏,
摘要：
良品首页3.0版本在设计的时候，想在首屏添加一些特殊的效果，例如彩蛋之类，所以整个首屏使用了Flash，在高品质的显示效果和动画效果背后带来了大量问题，下面来一一分析。问题：1.版面大，使用了1000 * 500的分辨率，分2屏展示。2.高品质的图片，带宽需求高。3.灵活的展示方式，图片个数不确定，请求数目多，平均每次版本10张图片左右。4.图片分布在CDN的不同服务器上，加上Flash的SWF文件，图片的配置文件，Flash的资源一共分布在6个服务器上，cross-domain 验证开销巨大。5.丢失Ref问题6.某些用户设备无对Flash的支持各个版本以及改进：1.上线前的版本：图片全部都 阅读全文
HTML5和CSS3基础
2012-04-24 11:00 by 臭小子1983, 445 阅读, 收藏,
摘要：
第一章 Web时间代的变迁一、HTML4常见用div来划分页面结构方法，HTML5新出现的更语义化的标签.二、可以放心使用HTML5的三个理由 1、兼容性：HTML5在老版本的浏览器也可以正常运行 2、实用性：HTML5内部并没有封装什么很复杂的功能，只封装了简单实用的功能 3、非革命性的发展... 阅读全文
如何设计新手用户引导(转)
2012-04-19 23:59 by 臭小子1983, 367 阅读, 收藏,
摘要：
一个新的网络产品，或者一个全新的功能要想吸引用户的使用兴趣，就需要让用户在刚一接触到的时候能够快速地了解它是什么，能做些什么，并且能马上开始一些简单的操作。如果看了很久还没弄明白这些，那么很可能就彻底放弃了。 所以，设计新手用户引导，就是设计用户前一、两次使用产品时的体验，设计目标是让新手用户快速、无痛苦地成为中间用户。一、设计时的注意事项 无论是什么类型的产品，新手用户在尝试时都会经历一些共同的情感历程：他们会对新产品和新功能有一些好奇和茫然，希望能快速了解它的概念和范围。在尝试使用时会比较敏感、容易受挫。如果身边有非常了解产品的专家级用户，一般会十分相信这个专家用户对产品的介绍和判... 阅读全文
jQuery性能优化
2012-04-19 15:17 by 臭小子1983, 197 阅读, 收藏,
摘要：
加载jQuery1.坚持使用CDN来加载jQuery，这种别人服务器免费帮你托管文件的便宜干嘛不占呢。点击查看使用CDN的好处，点此查看一些主流的jQuery CDN地址。2.安全起见，最好还是提供一个本地备份以便在无法从远程CDN服务器获取jQuery时网站也能工作，如上面代码所示。详情见此。3.... 阅读全文
SEO中的DIV CSS样式的命名规则
2012-04-17 17:04 by 臭小子1983, 260 阅读, 收藏,
摘要：
在搜索引擎优化中， 对于代码的优化是一个非常重要的部分。 如果一个网页的代码非常的简捷，对于提升网站的排名那个是非常有好处的。 同样，在CSS样式表中，合理有序的命名同样可以为整个CSS工作带来意想不到的简便。为了更加符合搜索引擎的规范， 下面是一些常用的CSS代码命名标准。 这些标准虽然不是一个必须遵守的规范，但是，却被大多数SEOer所接受，并为整个网站的更新工作带来方便。页头:header （CSS中通常写为： #header）登录条:loginBar标志:logo侧栏:sideBar广告:banner导航:nav子导航:subNav菜单:menu子菜单:subMenu搜索:search 阅读全文
Jquery中使用定时器setInterval和setTimeout - 重要
2012-04-15 15:45 by 臭小子1983, 65220 阅读, 收藏,
摘要：
直接在ready中调用其他方法，会提示缺少对象的错误，解决方法如下：方法1. 函数不在$(function(){....})内，setInterval第一个参数为"showAtuto" <script type="text/javascript">var t,n,count = 0;$(function(){ t = setInterval("showAuto()", 1000); })function showAuto(){ $('#ind').html(count++);}</script> 阅读全文
前端必读：浏览器内部工作原理
2012-04-15 12:17 by 臭小子1983, 170 阅读, 收藏,
摘要：
目录 一、介绍 二、渲染引擎 三、解析与DOM树构建 四、渲染树构建 五、布局 六、绘制 七、动态变化 八、渲染引擎的线程 九、CSS2可视模型 英文原文：How Browsers Work: Behind the Scenes of Modern Web Browsers 一、介绍 浏览器可以被认为是使用最广泛的软件，本文将介绍浏览器的工作原理，我们将看到，从你在地址栏输入google.com到你看到google主页过程中都发生了什么。 将讨论的浏览器 今天，有五种主流浏览器——IE、Firefox、Safari、Chrome及Opera。 本文将基于一些开源浏... 阅读全文
常见Web技术之间的关系，你了解多少？（转）
2012-04-15 10:44 by 臭小子1983, 215 阅读, 收藏,
摘要：
如果你是一个Web开发初学者，那么你难免会在网上搜索HTML, CSS, XML, JS(Javascript), DOM, XSL等等这些词的意思，然而，随着学习的深入。当你把他们搅在一起，你又糊涂了，你会不停的问，HTML是什么?CSS是什么?XML是什么?JS是什么?它们到底有什么用?无论是网络百科，还是一些IT专题网站，又或者一些牛人博客，他们都会告诉你，某个单一的东西是什么，这类文章很多，但很少有涉及，它们组合起来是什么，有什么用。我想，我写这篇文章，就是为了说明一下这个他们很少涉及的问题。 归纳、总结、提炼能力是我们进步的发动机，这种能力是可以有意识地培养的，拉卡拉电子支付公司董. 阅读全文
做一名合格的前端开发工程师（12篇）——第一篇 Javascript加载执行问题探索 (转)
2012-04-13 10:51 by 臭小子1983, 162 阅读, 收藏,
摘要：
楼主做前端开发一年多了，对前端的见解还是多多少少有一点的，今天特拿出来跟大家分享分享。做前端开发少不了各种利器。比如我习惯用的还是Google浏览器和重型武器Fiddller。一： 原始情况首先大家看看如下的代码： 1 2 3 4 5 6 7 8 9 ... 阅读全文
css sprite
2012-04-05 12:49 by 臭小子1983, 529 阅读, 收藏,
摘要：
一、CSS Sprites简介 CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。 加速的关键，不是降低重量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。二、CSS.. 阅读全文
压力测试工具
2012-04-04 21:34 by 臭小子1983, 267 阅读, 收藏,
摘要：
Web压力测试是目前比较流行的话题，利用Web压力测试可以有效地测试一些Web服务器的运行状态和响应时间等等，对于Web服务器的承受力测试 是个非常好的手法。Web 压力测试通常是利用一些工具，例如微软的Web Application Stress、Linux下的siege、功能全面的Web-CT等等，这些都是非常优秀的Web压力测试工具。虽然这些工具给我们测试服 务器承受能力带来方便，但是它们的危害却更是惊人，甚至于利用随便一种比较全面的测试工具就可以对一台小型的 Web服务器发动灾难性的拒绝式攻击。下面我就带大家利用微软的Web Application Stress进行一次Web压力测试， 阅读全文
/****************** 收集常用-重要 *********************/
2012-04-03 00:33 by 臭小子1983, 332 阅读, 收藏,
摘要：
一、获取窗口1 $(window).height() //浏览器时下窗口可视区域高度 2 $(document).height() //浏览器时下窗口文档的高度 3 $(document.body).height() //浏览器时下窗口文档body的高度 4 $(document.body).outerHeight(true) //浏览器时下窗口文档body的总高度 包括border padding margin 5 $(window).width() //浏览器时下窗口可视区域宽度 6 $(document).width()... 阅读全文
javascript 操作 XML
2012-04-02 15:59 by 臭小子1983, 145 阅读, 收藏,
摘要：
一、创建一个XML文档 可以使用DOM的document.implementation.createDocument()二、同步加载一个XML文档1 var loadxml = function(url){2 var xmldoc = XML.newDocument();3 xmldoc.async = false;4 xmldoc.load(ulr); 5 }6 7 loadxml("new.xml");三、异步加载一个XML文档 阅读全文
脚本化HTTP
2012-04-02 15:51 by 臭小子1983, 277 阅读, 收藏,
摘要：
一、使用XMLHttpRequest的三个步骤： 1、创建一个XMLHttpRequest对象 2、指定HTTP请求并向一个Web服务器提交 3、同步或异步获取服务哭的响应二、创建XMLHttpRequest var request = newXMLHttpRequest(); XMLHttpRequest是一个Active对象，必须把对象名传递给ActiveXObject()构造函数 varrequest=newActiveXObject("Msxml2.XMLHTTP"); // ie7之前 var request = new ActiveXObject("M 阅读全文
浙公网安备 33010602011771号