mercredi 11 avril 2012

沟通篇:男女有别,“别”在何处?


他和她,一个来自火星一个来自金星,彼此以不同的方式交流和表达爱意。深爱对方的他们却因沟通失败而转相怨恨,可见理解对方相异的交流方式何等重要,不要因为误解而失去人间最宝贵的东西——爱。
男人和女人在诸多方面都有着千差万别。他们以全然不同的视角看世界。要想理解二者的差异,关键在于了解男女沟通方式上的不同之处。
以下是男女在沟通中的6条重要区别,你应该对此有所了解以助提高同爱人的沟通能力,使交流更为顺畅和有效。
1. 为什么要说?
他认为沟通应该有明确目的。每次谈话的背后都存在一个需要解决的问题或需要阐明的观点。沟通是为了尽可能有效地找出困境的根源。
她利用沟通来明了自己的感受以及自己想诉说的内容。她视交谈为一种分享内心感受的行为和一次增进两人亲密感的机会。通过分享,她的消极情绪可以得到释放,同时两性关系也因此得以巩固。
2. 该说多少?
他将生产力和效率放在每日生活的首位,在交谈中也不例外。他对事情进行描述时已经从满脑的混沌中理清了思路,只分享他认为说明中必不可少的细节。他会奇怪“为什么女人有那么多话要说?”因此,在他听得差不多觉得足以提供解决办法时就会打断对方。
她利用交流来探查和整理思绪——便于发觉细节。她不知道哪些信息是必要的哪些是多余的,只有说出来后才知道。但女人打开话匣子不一定是在寻求解决办法,她只是想找个人倾听并理解自己的感受。
3.倾听的意义何在?
他习惯于有效地倾听。当女人发起谈话时他认为她是在征求意见或寻求帮助。他尽力去理解女人,将她说的每句话都过滤成为“眼下我该怎么办?”对他来说,要学会既耐心又不被动地倾听女人说话真不是件容易的事儿。
她认为谈话本身就是件非常重要的事。如果她感到自己被充分倾听或理解,就算问题得不到解决或改善对她而言也无所谓。爱人的倾听有助她缓解内心的焦虑和负面情绪带来的痛苦。与懂她爱她的人交心可以抚平她心灵的伤痕,是她借以摆脱外界麻烦和苦恼所必需的情感工具。
4. 当她心烦时……
他会希望帮助她解决所面临的问题,仿佛一名消防队员等不及想尽快将火扑灭。对他而言,最快的灭火方法就是提供解决办法。由于过于希望向爱人献策,他可能会非常在意对方的情绪并竭力为自己辩解。他或许只听到字面意思,而没有意识到他的爱人在心烦时只是将语言作为表达复杂情感的工具。
她在心烦时会借助语言这个工具来表达自己的复杂情感,从而处理好自己的负面情绪并使其得以发泄。她看重的是对方的支持和抚慰,从分享内心感受中得到极大的满足。当他伴以关切的提问或表达诚挚的关怀来表现出对她的在意时,会让她感受到自己被爱被关心着。他满足了她的第一需要——爱的需要。
5. 当他心烦时……
他心烦或感到有压力时经常会退缩到自己的“洞穴”中(变得安静和孤僻)。男人的“洞穴期”就好比休了一个短假:他通过忘却问题和关注其他事物(如看电视、看报纸或打电游)来缓解压力。
他可能会在压力期内避免同伴侣交流。如果她不断询问或指责,他则会退避得更远,因为他怕爱人不相信自己有能力处理好问题。然而,如果女人能多些支持和理解,男人则会走出洞穴,更愿意交谈、更关爱对方。
她可能会将爱人的沉默解读为她令他感到失望或者她正在失去他。她本能地想通过一大堆表示关心的问题来帮助他脱离困境,抑或会出于担心自己理想中的交流方式不受重视而存有戒心,她想要的是那种有益的开诚布公的交流。
最终,在理解他需要时间独处后她才对他起到更大的帮助,因为他由此看出她相信他自己可以解决问题。信任是她给予他最好的礼物。同时,她也该做些事来照料一下自己,以便不会在他“洞穴期”过后对他心存怨恨。
6. 何时会导致沟通失败
他觉得爱人总对自己指手画脚。对男人来说最重要的是表现出色。当他的能力受到质疑时不仅会感到受伤还会马上竖起一堵防御墙,此时沟通则开始陷入瘫痪。他在自己独当一面的环境中才会茁壮。与告知“你应该怎样”相比,他更愿意听从“你觉得……怎么样?”要想改变他,诀窍在于别告诉他该怎么做。
她的爱人会认为她所说的那些问题实际上都不存在也没那么紧急。他误认为自己说些类似“你是在小题大做”或“你想太多了”的话是在帮助她“检验问题的真实性”。但在她看来,他像是在贬低她的感受或劝她不要有这种感觉。
男人和女人都渴望能让自己的爱人满意,但由于难以理解和接受对方相异的沟通方式而未能如愿。男人和女人需要通过学习这些差异来帮助维持两性关系,才不至于有朝一日彼此怨恨或因沟通不利而犯愁。
当夫妻相处遇到障碍时,我建议他们一起阅读或听从两性关系自助书籍上的指导。如果仍然感到不知所措,那么就应该向专业心理咨询顾问寻求帮助,让自己重新进入正轨,增进彼此间的理解和沟通。

mardi 3 avril 2012

学习之响应式Web设计:Media Queries和Viewports

题外话


本来是想写篇关于Bootstrap的Scaffolding博文的,不过对于响应式Web设计不是很了解,所以就先有了这篇博文。
博客园原文地址:http://www.cnblogs.com/yhuang/archive/2012/03/29/responsive_web_design.html

目录


前言
什么是响应式Web设计(Responsive Web design)?
响应式Web设计的用途
Media queries & Viewport
参考文章



前言


现在使用移动设备人越来越多,移动版的Website随之也越来越重要;但是移动端设备的大小不一,屏幕分辨率各不相同,我们不可能为BlackBerry,iPhone, iPad等等每个都做单独的页面设计。所以我们需要的Website设计要能迎合多种device的要求并且兼容所有的屏幕分辨率,这种设计就叫响应式Web设计


什么是响应式Web设计(Responsive Web design)?


响应式Web设计是一种Web设计和开发能够根据屏幕大小、平台和方向对用户的行为和环境做出响应的设计。它包括了灵活的网格和布局,图像和智能使用CSS的media queries特性。当用户从Laptop切换到iPad上时,该网站应能自动地切换CSS规则以适应Device分辨率,图像尺寸和脚本执行。换句话说,响应式Web设计是具备能够自动响应用户喜好的技术。这将一劳永逸的满足对每个新上市的移动终端都要进行不同设计和开发的需求。
需要注意的是:响应式Web设计不仅仅是可调屏幕分辨率和可自动调整大小的图像,而且更是一种采用全新思考的Website设计方法。


响应式Web设计的用途


随着越来越多的设备而来的是各式各样的屏幕分辨率、定义和方向。每天都有正在开发的新屏幕尺寸的设备。每个设备都可以拥有不同的尺寸、功能、甚至颜色。有些是横向,有些是纵向,甚至还有些完全是正方形的。如图所示:
Portrait Landscape


下图列出了一些最常见的: 
Sizes
 所以,如果你要使你的客户满意,你必须让你的网站能够自动调整并适合上述设备的屏幕。例如,你应该为不同的设备定制不同的布局结构:
Moving Content 定制布局

同样,有些时候,根据需要显示或隐藏一些内容: 
Digg Mobile显示或隐藏内容 
很明显,我们不能为每一种设备定制一个页面。所以,我们应该如何处理这种情况呢?

Media queries & Viewport

解决问题的关键就是Media queries和Viewports。下面的内容是关于如何最好的使用Media queries和Viewports的。但是我并不会深入的讲怎样增强响应的细节,如果感兴趣,可以查看这篇博文的最后一部分:“参考文章”。
  • @media queries
作为一个网页设计师或前端开发者,我们希望我们的网页总能很容易的自适应不同的设备和屏幕尺寸,不管我们用户使用的是21"台式显示器,13"笔记本电脑,10"的iPad或者更小的智能手机。响应式网页设计使用@media queries根据浏览器的宽度和CSS来改变页面的布局。我们可以这样使用的CSS:

/* Default wide-screen styles */
@media all and (max-width: 1024px) {
    /* styles for narrow desktop browsers and iPad landscape */
}
@media all and (max-width: 768px) {
    /* styles for narrower desktop browsers and iPad portrait */
}
@media all and (max-width: 480px) {
    /* styles for iPhone/Android landscape (and really narrow browser windows) */
}
@media all and (max-width: 320px) {
    /* styles for iPhone/Android portrait */
}
@media all and (max-width: 240px) {
    /* styles for smaller devices */
}

是的,我们可以设置更小的width,或者中间尺寸。我待会再讨论。CSS media queries是非常强大和复杂的,在这里不想过多的讨论,因为上面的代码已经足够应付响应式Web设计了。如果你想要知道更多关于Media Queries的细节,请阅读参考文献里的相关文章。
  • viewports
现在,当我们调整我们浏览器的大小时,上面的代码已经可以非常不错的完成工作了。但这并不能满足移动端的浏览器。原因是移动端浏览器(iPhone/Safari, Android/Chrome和Fennec)会默认页面是为宽屏幕设计的,所以将它缩小整个页面来适应小屏幕。这就表明了上面的代码完全不足于适应移动端的浏览器,因为设备无法识别正确的宽度。解决方法:在文档的头部使用苹果提供的viewport meta标签,并结合@media queries:

<meta name="viewport" content="...">

以上的代码中,content为空,因为我觉得有必要详细讲一下,而不是直接给出来,这样我们就能更清楚的记住,并且知道content里应该填些什么,并且为什么这样填。

    • width=device-width
我们看见很多网站都建议把content属性的值设置为width=device-width。这相当于告诉浏览器将页面宽度假设为设备宽度。不幸的是,只有当设备是纵向时假设才是正确的。当我们把设备旋转成横向时,device-width还是和纵向的一样(比如,320px),这意味着,即使我们把页面设计成适应了480px横向设备,它还是会返回320px的效果。

曾经尝试在media query里使用orientation来解决这个问题,但是orientation不会真正的告诉我们实际的设备宽度,因为它只告诉我们设备的宽度是大于还是小于设备的高度。正如有人指出,由于大部分网页往往垂直滚动,所以这是无关紧要的。

如果我们的页面在纵向和横向设备中样式相同,那么我们就可以用width=device-width就足够了,需要注意的是这个是唯一告诉android设备使用设备宽度的方法。

    • initial-scale=1.0,maximum-scale=1.0
initial-scale=1设置告诉浏览器初始化页面时不要对页面进行缩放。解决了没有使用viewport时出现的页面缩放问题。但还是有bug,当我们把移动端设备从纵向转成横向时,你就会发现这个问题了。这是因为initial-scale只在页面完全加载后有作用。在我们把移动设备从纵向转成横向的过程中,浏览器就会认为页面不变,但scales会设置为1.5,为了使320px的页面适应480px。但是,因为我们在@media queries中设置了480px这个宽度,那么页面CSS规则也会是适应480px的。结果就是,页面CSS规则是适应480px的,另外scale还是1.5。这结果并不可怕,但是不可取。
为解决这个bug,我们可以添加maximum-scale=1这个设置。它的作用是阻止页面在旋转时放大,但它同时带来了更严重的问题:也阻止了用户手动放大或缩小页面。同样user-scalable=no设置也会让用户不能缩放页面。所以一般情况下,不要使用以上俩个设置。

是不是无法解决这个bug了?首先这个bug最多只是在显示层面,带来的后果一点不严重,因为即使页面自动缩放了,它还是成比例的。

    • width=<actual width>
有些人建议在viewport里使用特定的width,并且也按这个width设计页面。如果你可以为每个种类的device编写页面的话,这个设置是可行的,但需要我们明白的是它不是响应式设计。打印时,使用固定宽度布局是必要的,但我们网页应该适应用户的各种样式的设备。总之,不要这样使用。

    • @media all and (device-width:480)
这是个media query而不是viewport标签里的选项, 我在很多地方看到过这样的代码,但我并不认为这是好的做法。为什么?根据CSS3对media queries的描述,device-width在media queries里表示的是输出设备表面渲染的宽度。对于continuous media来说,device-width就是屏幕的宽度;对于paged media来说,device-width就是页面尺寸的宽度。以continuous media为例,device-width就是设备屏幕的宽度。除非浏览器最大化,它始终大于viewport的width。

测试表明,大多数桌面浏览器把device-width和width当作同义词。而移动端浏览器对此会有点混淆。至于viewport标签里,device-width只在纵向时等于设备的width。例如,一个320*480的设备,device-width总是320px,不论方向。然而对于CSS media queries,device-width是基于其目前方向上屏幕的width。

如果你一定要这样使用,请和orientation一起使用。但绝对不要使用max-device-width和min-device-width,因为用max-width和min-width替换会比较好。同样需要注意的是,新型号设备的宽度可能会改变。 

    • 中间尺寸 
上面我提到过,我们可以为任意数量的width来设计页面。最重要的是在不同width的浏览器中测试他们,通过调整window浏览器的大小来测试是最简单的方法。随着设计页面的width越来越小,我们可以去掉(Display:none;)一些不重要的内容,比如footer,sidebars,menu等,为主要内容留足够大的空间。我们的网站也许需要一个可以在所有width屏幕上运行良好的布局,也许只需要满足两到三个布局。这是非常容易设计和测试的,所以没有理由不做。

    • 推荐设置
最后,是我推荐的做法:
  1. 使用viewport标签
  2. 使用media queries来选择最适合页面尺寸的CSS
  3. 在viewport标签里,使用width=device-width,initial-scale=1或者单独使用width=device-width
  4. 不要使用maximum-scale=1和user-scalable=no
  5. 不要使用width=<specific width>
  6. 不要使用@media all and (*-device-width: xxx)

参考文章 
  1. Ethan Marcotte. 2010. Responsive Web Design. In A List Apart #306. ISSN: 1534-0295.
  2. Jeremy Keith. 2010. Responsive Enhancement. In adactio.
  3. Kayla Knight. 2011. Responsive Web Design: What It Is and How To Use It. In Smashing Magazine.
  4. Webkit based desktop browsers re-render the page correctly as you resize the browser, however they have a minimum width of 385px (on MacOSX) and I was unable to shrink the browser below this. Firefox 4 re-renders the page correctly until the width gets too narrow to fit the navigation toolbar. At that point the viewport width stays fixed even if you shrink the browser. The page is re-rendered if you type something (anything) into the URL bar. Opera 10/11 re-render correctly at all sizes.
  5. Peter Paul Koch. 2010. A tale of two viewports — part two. In Quirksmode.
  6. Using the Viewport on Safari. In Safari Web Content Guide.
  7. The viewport meta tag. In Safari HTML Reference.
  8. MDC. 2010. Using the viewport meta tag to control layout on mobile browsers. In Mozilla Developer Network.
  9. Peter Paul Koch. 2010. Combining meta viewport and media queries. In Quirksmode.
  10. Willison & Downe. Lanyrd.
  11. Lie et al. 2010. Media QueriesW3C Candidate Recommendation 27 July 2010.
  12. If you design your page for the narrow view and expect it to scale when rotated, then use width=device-width and nothing else. If, instead, you design your page for either width, then use width=device-width,initial-scale=1. This is the only way to get the android browser to render a page with the intended width. Mobile Safari will render the page exactly as if initial-scale=1 were specified alone. You will still end up with the zoom on rotate bug.
  13. David Calhoun. 2010. The viewport metatag (Mobile web part I).

lundi 2 avril 2012

分享之$(document).ready() jQuery

本文将讲述$(document).ready()和其重要性。
作者: Karl Swedberg
学习jQuery的第一件事是:如果你想要一个事件运行在你的页面上,你必须在$(document).ready()里调用这个事件。所有包括在$(document).ready()里面的元素或事件都将会在DOM完成加载之后立即加载,并且在页面内容加载之前。
If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as theDOM is loaded and before the page contents are loaded.
 $(document).ready(function() {
   // put all your jQuery goodness in here.
 });


有很多方法可以确保事件在页面上正常工作,$(document).ready()比其它方法要更有优势。首先,你不必在HTML上放置任何“ 行为性的”标记。另外,你可以将JavaScript/jQuery写入一个独立的js文件,这样既容易维护,又保证了js与页面内容的隔离。如果你在浏览网页时更加细心,你就会常常看见这种情况:当你将鼠标悬停在一个连接时,有时状态栏中会在显示“javascript:void()”这样的消息。这就是你把一个事件直接放在<a href>标签里所造成的。

在一些使用traditional JavaScript的页面,你会在<body>标签中看见“onload”属性。这会导致一个问题:它限定了在body上只能有一个函数事件。是的,因为它又往内容中添加的“行为性的”标签。如果你想解决这个问题,请参考Jeremy Keith的书:DOM Scripting,里面讲述了如何在一个单独的js文件里创建一个 “addLoadEvent” 函数,它允许多个函数可以在body里被加载。但是这种方法需要为本来很简单的问题编写相当数量的代码,另外,这种方法是在加载window时触发这些事件的,这不得不让我再一次想起 $(document).ready()的好处。

使用 $(document).ready(),你能让你的事件在window加载之前加载或触发。所有你写在这个方法里面的都准备在最早的时刻加载或触发。也就是说,一旦DOM在浏览器中注册后,$(document).ready()里的代码就开始执行。这样用户在第一眼看见页面元素时,特效就可以运行了。