Koubei UED

在网站的一些应用中需要提供用户直接打印页面的功能，最明显的就是电子优惠券，商家根据网站提供的模板输入内容，然后生成优惠券页面，用户打印这个页面即是优惠券。
当然最优的做法是根据这个页面生成一个图片文件，用户下载这个图片再去打印，打印的效果就不会受浏览器的设置而受影响打印出来的效果。
但如果由于一些原因，为了快速或者节约成本，不去将页面存为图片文件的操作，那么就只有直接将HTML页面直接打印下来，这样就需要在对页面的设计中有一些额外的要求，这里提出两个地方需要注意：
1.对style标签的属性设置：

<style type=”text/css” media=”print”>

这里表示该style内引入或者定义的样式属性仅仅在打印的时候使用，这里提醒一下，如果没有设置media属性，那么定义的样式将在浏览器和打印时都起效，所以建议将类似这样的样式放在所有常规样式之后。比如我们希望在打印出来的页面上有一行“打印与雅虎口碑网”，但在浏览器中并不现实：

<p class=”printTitle”>打印与雅虎口碑网</p>

那么我们就可以在统一样式中设置.printTitle{display:none;},而在后面的media为”print”的样式中设置为.printTitle{display:block;}。在定义的打印样式并不是在打印时的优先级会高于常规定义的样式，所以再次建议将打印样式放在所有常规样式之后。

2.在页面打印的时候浏览器的设置会对打印的效果有影响，在IE中的“工具”–“Internet选项”–“高级”中有一个“打印背景颜色和图像”，类似的在Firefox中“文件”–“页面设置”中有一个“打印背景颜色和图像”，当这个选项被选中的时候，页面中的背景颜色和图片都可以打印出来（有些不标准的IE内核浏览器似乎有些问题，背景颜色可以打印出来，但是背景图片不行），如果没有选中则背景颜色和图片都无法打印出来，所以为了屏蔽用户不同的浏览器和浏览器设置，我建议两点，第一是在用背景色填充的区域作为分界的地方加上1px的边框，颜色和背景色一样，这样在浏览器中看不出来变化，而在打印的时候即使用户的设置导致背景色无法打印出来也可以有一个边框来作为分割，最大层的上保留了页面格局；第二是对所有必不可少的图片都使用<img/>标签，这样无论用户浏览器怎么设置都可以将这些图片打印出来，可能这样与平时一些页面设计方式不同，但为了统一打印的效果，也只要让步了。

我这里简单的提出了一些在实际运用中遇到的问题，如果大家还有什么新的问题和想法，可提出来共同谈论，在这里先抛砖了；

本书的作者Douglas Crockford是JavaScript开发社区最知名的权威，JavaScript的发明人Brendan Eich说他是“Yoda of lambda programming and JavaScript（lambda编程和JavaScript的精神领袖）”。他不仅仅给我们带来了JSON、JSLint、JSMin和ADSafe等等在JavaScript开发领域应用广泛且影响深远的作品，更重要的是给我们带来了受益终身的利用JavaScript进行高效开发的思想和风格，这就是本书的重要意义。

JavaScript曾是“世界上最被误解的语言”，因为它担负太多的特性，包括糟糕的交互和失败的设计，但随着Ajax的到来，JavaScript“从最受误解的编程语言演变为最流行的语言”，这除了幸运之外，至少还说明它是一个不错的语言。Douglas Crockford在这本书中剥除JavaScript糟糕的外衣，抽离出一个具有更好可靠性、可读性和可维护性的JavaScript子集，让你看到一门优雅的、轻量级的和非常富有表现力的语言。他从语法、对象、函数、继承、数组、正则表达式、方法、样式和优美的特性这9个方面来呈现这门语言真正的精华，这是语言最本质最优雅的部分，通过它们完全可以构建出高效的代码。他还通过附录列出了这门语言的糟粕和鸡肋部分，且告诉你如何避免它们。最后还介绍了JSLint，通过它的检验，能有效的保障我们写出优美高效的代码。

阅读全文»

双屏不是什么新鲜事，不过相信国内前端工程师还是用单屏的多，前端开发需要同时开启的屏幕太多了…你有没有迷失windows任务栏下n个窗口和ALT-TAB的频繁键盘操作中？利用双屏显示让你从中解脱出来！我也刚用上了双屏开发，效率提升感觉值能有10%，所以来鼓动下大伙都来用双屏吧。

windows的双屏显示有很多种模式，我用的模式是主屏辅屏模式，两个屏是独立的窗口，可以进行窗口全屏。桌面和任务栏之显示在主屏，可以把主屏的一个或几个窗口拖到辅屏上，并全屏显示。看下图，右边的显示器为主屏，拖了个FX到左边的辅屏在该屏幕中最大化。

数数我们前端开发在工作流程中并行的全屏显示需求有多少个： 阅读全文»

春节前在蓝色理想上发了个“雅虎口碑招聘前端工程师 ”的启事，节后收到很多简历，加之HR通过专业招聘网站得到的简历和朋友同事推荐的简历，数量上是相当的多，把这些简历一一看完真是一个漫长而幸苦的体力活，何况我还要仔细认真的去提取和核查有用信息评估其能力，尽量不错过任何一个埋藏在大量简历中合适的人，这绝大部分时间并不是一个相当愉悦的过程。所以，我感觉有必要来谈谈：如何做好一份前端工程师的简历。

一、你是前端工程师

虽然简历都会有一些常规信息，但职业决定了这份简历核心内容和求职成败。所以，这份简历应该尽可能体现你自己是一个合格的前端工程师。专业的前端工程师是什么可以看看去年Nate Koechley的演讲《Professional Frontend Engineering》，前端工程师应该关注的内容可以从克军总结的“前端工程师应该关注什么”的思维导图中窥出一二，学习内容聚合可以看看陈成总结的《前端开发大众手册(包括工具、网址、经验等)》。

毫无疑问，前端工程师应该知道如何用简历体现其专业技能和职业精神，这是每个应聘者应该考虑的问题。

阅读全文»

近年来，广告已成为很多网站的主要收入来源。不久前，在线广告往往遭到访客的拒绝，广告客户也不确定它的价值和效力。今天，大多数访客期望在商业网站上看到广告，广告客户已经认识到各种在线广告的潜在机会。长期以来广告一直是印刷出版物的一部分，如杂志和报纸，现在它们已经在网上期刊和出版物扮演同样的角色。

网站所有者或者发布的产品和服务总是会担心广告存在的影响，同时它也影响着网页设计师，因为他们必须设计出能带来广告收益同时又满足访客需求的网站。依靠广告收入的网站需要一个有合适位置和排版的设计以更好的卖出广告，广告客户需要一个能让他们的广告达到一定曝光度的位置。

当设计师没有把广告作为首要关注点，那么设计出一种尴尬的布局就很好解释了，这种布局要么有损网站流量广告，要么把广告放置在无法吸引访客注意的位置。为了让客户的广告效益达到最大化，同时对网站的界面和可用性影响最小，设计师必须在设计的整个过程中把广告需求考虑在内。

The Raw Story看上去处处都有可能有广告挤进来，损害了内容的易阅读性。

从最基础开始

阅读全文»

我们有时候希望回车键敲在文本框（input element）里来提交表单（form），但有时候又不希望如此。比如搜索行为，希望输入完关键词之后直接按回车键立即提交表单，而有些复杂表单，可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。

要控制这些行为，不需要借助JS，浏览器已经帮我们做了这些处理，这里总结几条规则：
1、如果表单里有一个type=”submit”的按钮，回车键生效。
2、如果表单里只有一个type=”text”的input，不管按钮是什么type，回车键生效。
3、如果按钮不是用input，而是用button，并且没有加type，IE下默认为type=button，FX默认为type=submit。
4、其他表单元素如textarea、select不影响，radio checkbox不影响触发规则，但本身在FX下会响应回车键，在IE下不响应。
5、type=”image”的input，效果等同于type=”submit”，不知道为什么会设计这样一种type，不推荐使用，应该用CSS添加背景图合适些。

实际应用的时候，要让表单响应回车键很容易，保证表单里有个type=”submit”的按钮就行。而当只有一个文本框又不希望响应回车键怎么办呢？我的方法有点别扭，就是再写一个无意义的文本框，隐藏起来。根据第3条规则，我们在用button的时候，尽量显式声明type以使浏览器表现一致。

做了一个demo列出了一些例子。

注：文章和demo于2009-2-2更新

2009新年快乐，你一点红@^注1

领衔主演：乌.web2点雷.龙茶 导演：西芹点击看大图

在我们的生活中，需要接触大量的带有机械按键的物品。当你用手指按下按键的时候。都会或强或弱的感受一股（嗯，也有可能是一丝丝）反作用力传递到你手指的神经末梢。这是一个完整的反馈过程。

我们把从开始按到按下的过程关键帧分解模拟下。

图1：

阅读全文»

两年前发表的《The visual design of Web 2.0》中提到“Rounded everything”，圆角因使人感觉舒适的友好风格而变得无处不在。这个无处不在也让很多前端工程师累个半死，YAHOO Performance Research Engneer Team的Nicole在讲演《Designing Fast Websites》中用的副标题是don’t blame the rounded corners!，从侧面也说明了圆角给实现者带来的困扰：实现麻烦、兼容困难、性能不佳。而W3C早在2002年的CSS3草案中就加入了一个叫border-radius的属性，通过它可以直接来定义HTML元素的圆角。 阅读全文»

哪行哪业都少不了基本功，都说“马步”要扎得稳。在都快说烂了的以目标用户为中心设计的今天，还是要勤练基本功的。不多说了，先了解下“设计的3个C”：

一、构图(Composition)：
一个设计的构成因素如何在视觉上结合安排。构图中包括放置、组合、排列、视觉流动，以及布局上的空间区分。

二、构成因素(Components)：
它们是设计中使用的视觉因素。照片、图画、图标、排版、划线、装饰、边缘和背景，全都是构成因素。

三、概念(Concept)：
主题、内涵、信息和风格方面的抽象归纳。一个设计或一个形象的这种难以明说的意蕴，对于它的视觉表现和信息传达至关重要。

利用以上3个领域的一些基本原则，对于你的创造过程——无论是提取概念还是建构布局，或者是设计作品的最后定稿——都会提供一些实用的、通用的思路。

对于一个设计来说，当它的构图、构成因素和概念都已到位，并且协调一致地为目标观众与目的服务时，它就成功了。
阅读全文»