Anymoore

标签： 网摘

  • 10要点解决IE6兼容问题

    1、使用声明
    你必须经常在html网页头部放置一个声明，推荐使用严格的标准。例如

    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN””http://www.w3.org/TR/html4/strict.dtd”>
    or, for XHTML:
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

    最后你需要是ie6进入兼容模式，这已经足够兼容了。
    2、使用position: relative
    设置一个标签position: relative可以解决很多问题，特别是曾经有过看不见的经历或者奇怪布局的框架。明显的，你需要小心，绝对位置放置的子元素是否都参照找到新位置。
    3、为浮动元素使用display:inline
    浮动元素会有一个著名的ie6双边距margin bug。假如你设置了左边距5px但实际上得到了10px左边距。display:inline可以解决这个问题，尽管它不是必需的，但是css仍然有效。
    4、设置元素启动hasLayout
    大部分ie6（ie7）的渲染问题都可以通过起来元素的hasLayout属性来兼容。这是ie内置的设定，确定一个内容块相对其它内容块是有界限和位置的。当你需要设置一个行内元素例如一个连接变成块状元素或者是透明效果，设置hasLayout也是必须的。
    5、修复重复字符的bug
    复杂的布局会触发一个bug：浮动对象的最后字符会出现在已经清除浮动的元素后面。这里有几种解决的办法，部分是理想的，并且一些测试和出错是必须的。
    a、确保浮动元素都使用：display:inline；
    b、最后一个浮动元素使用margin-right:-3px;
    c、在浮动对象最后一个元素后使用一个条件注释。例如<!—>这里输入注释…<![endif]
    d、在容器内的最后使用一个div空标签（它也必须设置90%宽度甚至更小）
    6、使用a标签完成可点击和hover原理
    Ie6只支持a标签的css定义hover效果
    你可以使用它去控制javascript启动的widgets，使得他们仍然保持键盘操作。这里有个二择一的问题，但是a标签是所有解决方案中最可靠的。
    7、使用!important，或是高级选择符替代ie特定代码
    在外置的css文件里，放弃凭借传统的hacks和条件判断，使用有效的css代码去针对ie6仍然是有可能的。例如：最小高度可以使用一下定义。
    #element {
    min-height: 20em;
    height: auto !important; /* understood by all browsers */
    height: 20em; /* IE6 incorrectly uses this value /*
    }

    Ie6不支持“min-height”并且错误的将20em重写为“auto”。不过，当内容大于设置的空间时，它会增加它的尺寸。
    另外一个选择是使用高级选择符。例如

    #element {
    min-height: 20em;
    height: 20em;
    }
    8、避免百分比定义
    百分比在ie下比较混乱。除非你非常小心每个父元素的尺寸，这样就大概可以最后避免了。你仍然可以对其他浏览器使用!important来使用百分值。例如：
    body {
    margin: 2% 0 !important;
    margin: 20px 0; /* IE6 only */
    }

    9、早点和经常测试
    在你的网站和应用程序完成之前，不要放弃ie6的测试。问题将会更加严重并且需要很长时间去修复。如果你的网站可以运行于firefox和ie6，它将差不多肯定可以在其它浏览器下运行。
    10、重构你的代码
    经常的，修复会比重新考虑布局问题更加花费时间。Html细微的修改和更加简单的css经常是最有效的。这意味着你要放弃完美的合法的代码，但是将会更少的问题出现，并且你知道怎样处理将要出现的情况。
         /* ignored by IE6 */
    #element[id] {
    height: auto;
    }
    代码部分试了下语法着色，貌似有点乱了，这里是英文原文的链接:
    http://www.sitepoint.com/blogs/2009/03/06/10-fixes-for-ie6-problems/

  • 分享Javascript开发经验

    在163 UED Team看到的一篇JS开发经验谈,很有指导意义,在此分享下来: 

    一、简化代码

    采用更为简短的写法，不仅可以减少输入的字符数，还可以减少文件大小。大部分采用简单写法的代码，执行效率都有轻微提高。

    1.1 简化常用对象定义：

    使用 var obj = {}; 代替 var obj = new Object();
    使用 var arr = []; 代替 var arr = new Array();

    1.2 精简if语句

    三元操作符可以有效精简只涉及赋值传值操作的if语句，比如
    var score = 60, grade;
    if (score < 60) {
    grade = “不及格”;
    } else {
    grade = “及格”;
    }
    可以精简为：
    var score = 60;
    var grade = score < 60 ? “不及格” : “及格”;
    三元操作符也支持嵌套，但是嵌套的层次太多会影响程序的可读性，这方面要多加斟酌。

    1.3 使用JSON

    JSON是一种轻量级的数据格式，轻量级首先体现在它的结构定义非常简单。
    var obj = {};
    obj.p1 = ‘a’;
    obj.p2 = ‘b’;
    obj.p3 = ‘c’;
    可精简为：
    var obj = {
    p1 : ‘a’,
    p2 : ‘b’,
    p3 : ‘c’
    };

    二、使用高效率的代码

    网上流传的效率优化文章非常多，一些比较专业的Javascript书籍也谈到了不少，因此，这里就只列出一些很少谈到的。

    2.1 精简循环体

    循环的效率很大程度上是由循环体决定的，与之相比，用for还是while的差别就太小了。考虑如下的代码，其功能是为某一批元素添加事件：
    function addEvent(elems, eventName, handler) {
    for (var i = 0, len = elems.length; i < len; i++) {
    if (window.attachEvent) {
    elems.attachEvent(”on” + eventName, handler);
    } else if (window.addEventListener) {
    elems.addEventListener(eventName, handler, false);
    }
    }
    }
    循环每执行一次，都会判断window对象的attachEvent或addEventListener是否存在，其实这个仅判断一次也就够了；此外，“”on” + eventName”的字符串拼接也会重复执行。优化如下：
    function addEvent(elems, eventName, handler) {
    var i = -1, len = elems.length;
    if (window.attachEvent) {
    eventName = “on” + eventName;
    while (++i < len) {
    elems.attachEvent(eventName, handler);
    }
    } else if (window.addEventListener) {
    while (++i < len) {
    elems.addEventListener(eventName, handler, false);
    }
    }
    }

    2.2 尽量使用原生的函数而不是自定义函数

    当你对Javascript的内置类型变量执行某项操作时，你应该先查查这项操作是否有原生的方法。
    要生成一个数组的副本，你会怎么做呢？遍历数组元素然后逐个赋值到另一个数组，这似乎是唯一的方法。其实，原生的Array.prototype.slice就可以达到复制的目的。这个方法可以从某个数组返回选定的元素，且不影响原来的数组。如果参数留空，返回的就是全部元素。
    Array.prototype.slice还可以对某些不是数组而又能通过数字索引访问的类型进行操作，比如arguments：
    function test() {
    alert(Array.prototype.slice.call(arguments));
    }
    test(1, 2, 3); // output “1,2,3″
    在Firefox下，它甚至可以对HtmlCollection进行操作。可惜在IE下不行。

    另一个例子是数组排序，一般情况下，我们不需要另外写排序算法，用原生的Array.prototype.sort就够了。sort方法只有一个参数，该参数是一个函数，决定两个相比较的元素谁在前谁在后，默认是按照字符顺序排序，比如11会排在2之前。要按数字大小排序，可以这样写：
    var arr = [11, 2, 0, 12, 33];
    arr.sort(
    function(a, b) {
    return a – b;
    }
    );
    也可以按照对象的某个属性进行排序：
    var arr = [
    { id : 11 },
    { id : 0 },
    { id : 22 }
    ];
    arr.sort(
    function(a, b) {
    return a.id – b.id;
    }
    );

    2.3 数组去重复

    Array类型并没有提供去重复的方法，如果要把数组的重复元素干掉，那得自己想办法：
    function unique(arr) {
    var result = [], isRepeated;
    for (var i = 0, len = arr.length; i < len; i++) {
    isRepeated = false;
    for (var j = 0, len = result.length; j < len; j++) {
    if (arr == result[j]) {
    isRepeated = true;
    break;
    }
    }
    if (!isRepeated) {
    result.push(arr);
    }
    }
    return result;
    }
    总体思路是把数组元素逐个搬运到另一个数组，搬运的过程中检查这个元素是否有重复，如果有就直接丢掉。从嵌套循环就可以看出，这种方法效率极低。我们可以用一个hashtable的结构记录已有的元素，这样就可以避免内层循环。恰好，在Javascript中实现hashtable是极为简单的，改进如下：
    function unique(arr) {
    var result = [], hash = {};
    for (var i = 0, elem; (elem = arr[i]) != null; i++) {
    if (!hash[elem]) {
    result.push(elem);
    hash[elem] = true;
    }
    }
    return result;
    }

    三、使代码更易读、更好维护

    无论是在开发中还是开发后，保持代码清晰易读可以更快更准确地修改代码。

    3.1 连接HTML字符串

    相信做前端开发的朋友都受过这个折磨：连接HTML的时候被可恶的单引号、双引号搞得头昏脑胀。比如：
    element.innerHTML = ‘<a href=”‘ + url + ‘” onclick=”alert(” + msg + ‘’);”>’ + text + ‘</a>’;
    这里介绍一个字符串格式化函数：
    String.format = function(str) {
    var args = arguments, re = new RegExp(”%([1-” + args.length + “])”, “g”);
    return String(str).replace(
    re,
    function($1, $2) {
    return args[$2];
    }
    );
    };
    调用方法很简单：
    element.innerHTML = String.format(’<a href=”%1″ onclick=”alert(’%2’);”>%3</a>’, url, msg, text);
    意思就是用第n个参数把%n替换掉。这样一来清晰多了吧。

    3.2 为您的程序打造一个Config配置对象

    编写Java或者C#程序的时候，我们一般会从XML读取程序的配置信息。在Javascript里面，用XML做配置信息不大划算，一方面要多请求一个XML文件或者把XML字符串转换为XML对象，另一方面XML对象的方法比较复杂冗长。轻量级的JSON是最好的选择。
    程序中的常量应该放到Config配置对象中，比如Ajax请求的Url、某个操作的提示等，例如：
    var Config = {
    ajaxUrl : “test.jsp”,
    successTips : “请求完成”
    };
    如果Config的数量较多，可以根据配置类型多嵌套一层，比如：
    var Config = {
    url : {
    src1 : “test1.jsp”,
    src2 : “test2.jsp”,
    .
    .
    },
    tips : {
    src1Suc : “请求1完成”,
    src2Suc: “请求2完成”,
    .
    .
    }
    };
    Config应放置于程序的最前面，方便查看和修改。

    原文链接:http://www.ued163.com/?p=422

  • 专业设计师：知识越多，效率越高

    设计师并不仅仅让设计看起来美观

    很显然，用户体验设计师设计用户体验，但是，我们所说到的“用户体验”到底是什么呢？在网络上，当用户使用一个网站或者网页应用的时候，用户的整体体验由很多方面构成：

    网页给人的视觉感受
    用户是否能达到他的目的
    网页响应用户的整体速度
    预期是否发生，例如，如果用户认为网页会对自己的操作产生某种形式的响应，但是却并没有，他会感到很失望。

    以上只是举些简单的例子。那么什么才是良好用户体验的要素呢？可以这么说，所有的细节都是。

    您网站的用户体验并不仅仅是指您的网页看起来如何，或者是当用户点击一个按钮时会发生什么，也不仅仅是指用户完成预定目标的流程，而是包括了一切细节。从用户打开您的网站到离开的整个过程中，他所做的一切和经历的一切都是用户体验的组成部分。用户体验设计师的工作是非常重要的，多方面的知识能使他的工作发挥更大的效用。

    用户体验设计师需要知道什么

    用户体验设计与用户界面设计并不相同，涉及的方面要多得多。个人认为，用户体验设计师的工作应该包括用户界面设计，以及用户在达到目标过程中的任务流程设计，需要设计师了解可用性测试的知识，了解易用性和一些用户的特殊需求，还需要了解系统的基本功能是怎么在运作的。

    最优秀的用户体验设计师能结合多个学科的知识（如设计、开发，心理学）运用到工作中以最大限度地使用户受益。

    例如我在Twitter上和Lukas的会话中举过的一个例子，一个用户体验设计师需要知道Ajax如何工作才能更有效地使用它。如果你不知道Ajax如何工作或者服务器请求是如何工作，你又怎么能确定在某些特定的环境中，Ajax方式对于用户体验来说是最好的？Lukas在Twitter上的留言里这么回复：

    这恰恰是忽视代码实现而改善用户体验的一个完美的例子；页面刷新会使页面更容易和快速地执行。

    正如我在下一段留言里所指出的，Lukas所说的实际上并不正确——在很多情况下，相比整页刷新页面，Ajax请求事实上执行得更快。刷新整页会向服务器发送更多的HTTP请求（例如请求CSS、JavaScript和图片文件），但在很多情况下，Ajax请求仅仅返回一段文本数据，所以它向服务器发送的请求要少得多。在绝大多数情况下，用Ajax请求来发送或者获取数据比整页刷新都要快。

    我怎么知道这些的呢？因为作为一个网页用户体验设计师，我需要知道HTTP请求如何工作以及Apache（译注：一种服务器软件）如何响应浏览器端的请求，并且知道当我发送一个Ajax请求的时候服务器端在执行什么样的代码。只有知道这些，才能在使用Ajax或者刷新整页之间选择前者作为解决方案。很多时候我决定用Ajax，正是因为它更快速并且使应用程序更加灵敏地响应用户操作。用户体验的很大一部分来自于用户对应用程序的响应速度的感觉，所以，我使用Ajax是一个以用户为中心的决定，因为我知道这样做能提高用户体验。

    如果有些人仅仅从表面上了解Ajax的运作（“页面没有刷新但是执行了某些代码”），那么，他在作出决定使用Ajax而不是整页刷新时候，其实并不完全知道Ajax的运作机制，有什么好处，有什么弊端，对应用程序的性能产生什么作用，以及如何影响应用程序缓存等等。这仅仅是一个在对关键知识没有全面了解的情况下靠拍拍脑门就做出的决定。

    设计大师熟悉自己的工具

    建筑设计师并不仅仅画蓝图，他们需要知道工程地区的地形地貌、气候特征，以及考虑这各种因素选择什么样的建筑材料才最合适。他们并不仅仅是画图，还需要了解建筑工艺和整体结构，需要对建筑材料和建筑过程有深入的了解，这样才能更有效地开展工作。

    厨师并不仅仅是把各种食材配料堆在一起然后祈祷上天就可以变出美味的大餐，他们需要对食物以及不同人群的口味有深入了解。

    陶艺师并不仅仅是雕刻出漂亮的泥坯，他们还要烧制泥坯成型。他们需要知道关于上釉、温度和烧制的科学工艺，才能像制作艺术品一样来完成他们的工作。

    正如建筑设计师、厨师和陶艺师一样，用户体验设计师也需要知道关于网络环境和媒介的知识。网页设计师设计网页，并且熟知可以将他们的设计图最终实现成用户界面的HTML和CSS。如果他们不懂得HTML和CSS，那么他们并不是真正地设计网页，因为他们的设计不会考虑网络环境的制约。当一个自诩为网页设计师的人对网络媒介并没有深入了解的时候会出现什么情况呢？在对自己的设计将如何影响用户体验缺乏足够了解的情况下做出的决定，无疑是很糟糕的。举个例子：

    设计师A传给HTML/CSS开发人员B一个用户界面的设计图稿。这是一个由多种元素组成的复杂的界面，每个框的每个角都是圆角，并且有3种不同的边框，还加上了阴影效果。设计稿上的字体都是设计师专用的字体，而没有任何用户电脑上默认的网页字体。

    这个例子里，由于设计师对于网络环境的一些局限并不熟悉，他们选择了大量给用户体验带来负面影响的素材来做设计。为了实现那些框的圆角，并且考虑到框会随着里面内容而被撑大，你需要增加HTML标记，CSS和图片来实现。复杂的边框样式？意味着更多的代码标记和图片。阴影效果？那简直需要一摞的具有半透明特殊效果的PNG格式的图片。自定义的设计字体？你可能需要用到“可伸缩Inman Flash替换”技术来实现了（译注：即sIFR技术，可参考百度百科：http://baike.baidu.com/view/1311052.htm）。

    使用大量额外的代码标记、图片、Flash文件和javascript仅仅为了实现一个对用户来说并没有多大益处的效果。用户在看到他们期望看到的网页之前需要下载许多字节的数据。加载页面额外的耗时仅仅因为对网络媒介缺乏了解的设计师在设计网页的时候脑袋中并没有考虑网络环境和网络媒介的局限性。

    这是否意味着你在网页上不能实现一些漂亮的界面效果呢？当然不是，看看网上有那么多看起来漂亮的网页，运行起来也很漂亮。但是那种绘画风格浓重的网页，体积难道不是都很庞大并且很慢？难道不是有很多对用户体验并无好处的视觉效果？事实上他们并不是那么漂亮，并且这也不应该是你设计网页的方式。

    你不需要是专家

    要理解Ajax请求如何工作，并不意味着你需要为实现Ajax请求去亲手编写JavaScript代码，或者研究Apache服务器的进程处理，但是你需要对它足够理解，才能对它的用途作出合理的判断。正如建筑师在选择各种建筑材料时，并不会因为某种材料看起来比较酷而选择它，他们在做出选择时会综合考虑各方面因素，例如材料的结构硬度、价格、以及缺陷等等。他们在对材料足够了解的基础上作出合理判断，合理选择材料以使物尽其用。

    网页用户体验设计师做出以用户为中心的高质量的决策也需要对网络环境和媒介有充分了解。如果一个用户体验设计师想要使用一个复杂的交互模型，例如拖放效果，他需要了解程序实现的这种效果应用在网页上的局限。网页上的拖放和桌面应用的拖放并不相同，因此你需要知道为什么不同，有哪些不同，以及如何正确有效地应用它。如果你时常被网页应用的速度问题所困扰，那么，了解一些关于页面加载执行JavaScript文件的字节数方面的知识就显得非常重要了。你还需要知道身体有残障的用户（译注：例如无法进行精确的鼠标操作的用户）如何来使用网页，以及如何让他们也能使用那些拖放功能。在用户禁用JavaScript的情况下，你知道如何去应对。

    做出一个关于设计的决策并不像看起来那么简单。这个决策的制定需要基于很多相关因素，如设计、开发、结构、可用性以及易用性。用户体验设计师的工作需要从整体上考量各种情景和环境因素，以尽可能地使自己的工作卓有成效。是否掌握足够的和自己的决策有关的知识，直接决定着用户体验朝好的或者负面的方向发展。

    这有助于你成为专家

    掌握足够的知识来做出一些以用户为中心的好的决策，当然非常好，但是如果能对知识有更加深入、高级的了解，则是最好不过的了。如果你作为一个用户体验设计师，希望在某个界面中使用拖放，如果你能实现整个交互的原型，真切感受一下拖放操作的整体体验，对你的工作将会是非常有帮助的。实践出真知，如果你没有动手去用过一个实际的界面，有些东西你很难真正了解。在设计工作之前能够制作出一个实际的界面原型，及时发现一些你所不了解的东西，这是对你的工作是非常有价值的。

    随着Apple操作系统的演化，他们的用户交互方式也在不断改进。在Apple公司最新操作系统Leopard以及Apple的许多最新应用中，动画效果和更高级的用户交互方案已作为用户体验的一部分得到运用。如果Apple公司的用户体验设计师完全不了解动画的核心实现，他们就不可能运用Keynote和Flash之类的应用技术来实现动画效果，那么，他们发布的某个用户界面版本很难有实质上的更新。实际上，Apple公司的视觉界面设计师应该知道Flash和Keynote并能用它们来实现用户界面。呃，用户界面设计师应该知道如何编写ActionScript代码才能开展工作？我想是的，如果你不会，那么你团队中会这些技术的那个同事工作上就会比你更加出色。

    看看那些那些创建Mac和iPhone应用程序的设计师，他们对于自己设计的界面是如何开发实现的都很精通。设计师们研究Cocoa（译注：Apple的面向对象开发环境，用来生成 Mac OS X 的应用程序），以期能够创建iPhone的界面，因为一个优秀的iPhone界面设计，关键部分并不仅仅是视觉效果，还包括交互行为。iPhone开发上最成功的设计师应该是这样的——他们熟悉设计和开发的知识，并且深入地知道两者的局限制约。看看iPhone吧，他非常轻便，节能，并且没有键盘。整部机器其实就是一个最大的制约，你首先需要知道这些限制是什么，才能在这个平台上获得成功。

    用户体验设计师对你来说意味着什么？

    现在，对于各种从事网页工作的人有如此之多的头衔，这让我感到滑稽可笑。你可能被称作界面设计师、界面工程师，视觉设计师、用户界面工程师，信息架构师或者用户体验设计师。甚至，你还会被叫做可用性工程师、可用性测试工程师、网页设计师，或者网页工程师。有着这么多的头衔，并且这么多的职业技能需要互相跨越，那么，我们怎么知道用户体验设计师和用户界面工程师的工作如何来进行划分和衔接呢？

    我只能结合自己职业生涯中的成功之处来谈一谈自己的看法，那就是，尽可能地学习和自己的工作平台有关的知识。在网络上，我的工作是设计用户流程、交互方案、用户界面模型，所有的HTML/CSS/Javascript雏形，并且有时候还需要把这些原型放到后台与数据库连接。我从开始设计网页入手，学习了HTML和Javascript，然后学习了CSS、jQuery和Prototype框架，再到后来学习了PHP、MySQL和一些Ruby编程的知识。只要有机会我无处不在学习，因为，对于那些与你做出正确决策有关的知识，当然是越熟悉越好。如果你掌握的信息越多，能获得真实体验，并且很深入地了解相关知识，那么你作出的决策会更加正确，你的网站和应用程序对用户来说也更加地友好。

    当你需要作出一些重要的，以用户为中心的决策的时候，你掌握的知识永远不会嫌多。掌握越多的知识，你看待问题就会越全面。

    文章来自网络，网友翻译，本博推荐。

    英文原文：Designers Who Are Technical: The More You Know, The Better Your Work