New iPad 发布后,谈谈高分辨率屏幕的 Web 体验优化

 

R/GA的移动web战略家和设计师日前写了一篇博客,关于iPad3的视网膜显示屏会为网页设计者带来哪些问题。之前,在iPhone4刚出来的时候,我们手忙脚乱地为客户设计针对视网膜显示屏的图片版本。而现在,iPad的屏幕带来了同样的问题。

“屏幕分辨率正在变大,适应是网页设计唯一的出路,天还没有塌下来。”—@robweychert

天还没塌下来,适应最可能是唯一的出路,但是我们确实需要更多的工具来处理不同的分辨率以便于更好的适应。Apple公司这个做法,就如同给我们提 供一辆汽车,可能有喇叭障碍,但是同时提供给我们安全带和氧气袋。既然这个高分辨率已经来了,那我们来看看针对高分辨率屏幕的一些技术和策略。

 

@media queries

我们可以使用@media queries来针对高分辨率的屏幕来设置不同的样式,包括不同的背景图片。但这不仅仅是关于图片的问题,Brad Birdsall演示了针对高分辨率的绝妙设计。我在想media queries 和最优加载,针对像素密度是不是和针对设备宽度的是一样的道理。

SVG

有些人提过SVG对创建像素独立图片的好处。有篇很好的关于如何用SVG实现像素独立的文章。建议你在实践之前先看Max Firtman的 兼容性列表

@font-face

使用@font-face创建icon是个很好的方法。它们不管屏幕分辨率是多少都一样表现很好。Chris Coyier有个很好关于@font-face icons in action的示例。确保你仅仅是加载字符,而不是大量的字体文件。看看font awesome,一个免费的Twitter Bootstrap的图标文字。

监测网络速度

这就是技巧所在。并不是所有的高分辨率设备一定要加载高分辨率的图片。正如我昨天提到的,用户可能是在火车或者巴士上,用着EDGE网络或3G网 络,他所需要的仅仅是内容,而不是高分辨率体验。如果默认加载高分辨率的图片,网站性能和用户的流量将受到打击。我们需要能够根据用户的网络条件类加载最 需要的东西。

navigator.connection看来有所帮助,但是基本的网络类型(EDGE, 3G, wi-fi, 等)并不能代表全部。在巴士上或者星巴克里面,一个共享的网络很有可能比3G网络更慢。

有一些其他有趣的检测网络的工具。我很希望知道是否有人使用它以及如何使用。

新的HTML元素

响应式图片工作组在尝试如何更好地根据网络条件来提供内容。他们在建议一个新的HTML元素,这个元素可以检测容积、网络速度、像素密度等来提供更好的用户体验。让我们好好期待究竟是什么元素。

最佳实践

  • 低像素图片优先– 很多设备没有高分辨率的屏幕,所以默认大量地加载高分辨率的图片将是个错误。应该使用检测技术按需加载。这个和响应式设计的移动优先的图片策略很相似。
  • 利用图片优化的基本原则 – 这点很明显,尽管花时间来优化图片,特别是高分辨率图片,以更加有利于移动设备,节约流量,再优化等等
  • 利用CSS3 技术如背景渐变,圆角等,任何可能避免使用图片的地方。我有预感,iPad3发布之后,很多的电子商务网站(特别是时装类的)将会感到困难重重。
  • 尽可能地使用像素独立方案– SVG, @font-face,甚至是基本的 HTML特殊字符可以帮助避免分辨率相关的问题。
  • 检测网络连通性 – 你在设计你的网站用户体验的时候,要牢记这点。
  • 注意兼容性 –现在依然有很多设备不支持SVG, @font-face 和CSS3技术。请记住,跟随渐进增强的实践来确保是高分辨率设备的最优版的同时还支持更多设备

用 Google App Engine 开发 Go 语言应用的简明教程

Google 开发者计划工程师 Johan Euphrosine (proppy)近日在苏黎世联邦理工学院就 Go 语言与 Google App Engine 做了一次演讲。现在他已经将演示文稿发布出来,大家可以一起来了解下如何通过 GAE 开发 Go 语言应用。

这组幻灯片的主要内容包括:

  • 创建与部署简单的 web 应用
  • 解析 XML 数据
  • 解析 JSON 数据
  • 通过 goroutine 与 channel 实现多个数据源的并行装取

点击查看:Go + App Engine中译版。感兴趣的同学还可以试着完成课后作业

16个快速启动 Web 项目样板

样板是可以重用在许多地方的一套代码文件,只需很少或根本不需修改。然而,这里我们正在谈论的boilerplates通常可以作为您项目的坚实基础。另外,这也是学习编码技巧和窍门的好地方!

样板是非常有用的,因为它通常包括最佳编码实践,也包含很多的技巧和窍门,否则将需要几年的时间学习。要是没有HTML电子邮件样板作为例子,建立 一个EDM(Email Direct Marketing,即电子邮件营销)是不容易的,它需要你回到HTML1.0,没有更多的div,span或高级的CSS设置,如浮,位置等,你需要用 表格做布局,内联CSS做简单的样式。使构建EDM更糟的是,电子邮件客户端有严格的限制,它们不具有相同的行为,如果你在多个老浏览器的工作,它都呈现 不同的页面!有了电子邮件的样板,它包含CSS设置的HTML结构,甚至一些技巧和窍门,可以帮助和指导你如何避免展现不一致的问题。

没有做更多,我只是为不同的web技术平台收集16 样板 – HTML,CSS jQuery,WordPress等等,他们执行最佳实践并不断更新,我敢肯定它能为您的项目打下一个非常良好的基础。

 

HTML & Miscelaneous HTML5 Boilerplate

HTML5 Boilerplate

HTML5 Boilerplate是一个专业和著名的基于HTML / CSS/ JS的快速、稳健和未来安全的网站模板。

 

HTML Email Boilerplate

HTML Email Boilerplate

这个网站及其代码示例创建了各种各样的模板,设计或布局的展现,这有助于你避免一些最常见的电子邮件客户端的渲染问题 – Outlook,Gmail,雅虎邮件等,这是一个好东西,我把它用在我的工作,它包含了很多的技巧和窍门来节省您大量解决问题的时间。

 

HTML5 Mobile Boilerplate

HTML5 Mobile Boilerplate

HTML5 Mobile Boilerplate,是你值得信赖的模板,用于创建定制丰富和高性能的移动网络应用程序。你能获得A级智能手机之间跨浏览器的的一致性,和传统的黑莓,Symbian,以及移动的后援支持。

 

Twitter Bootstrap

Twitter Bootstrap

简单,灵活的HTML,CSS,JavaScript框架,用于流行的用户界面组件和交互。它不是一个真正的样板,但它有很多快速原型和开发可重用的组件。

 

Zend Framework Boilerplate

Zend Framework Boilerplate

Zend框架(ZF)的样板,是一个基于Zend框架企业级PHP应用开发的所有功能于一身的平台。

 

 

CSS GetSkeleton

GetSkeleton

GetSkeleton是一套CSS和JS文件,可以帮助你快速开发外观漂亮不同规模大小网站,用于17“笔记本电脑的屏幕或iPhone。GetSkeleton建立在三个核心原则:Responsive Grid Down to Mobile,快速启动和风格无关。

 

 

CSS Media Queries Boilerplate

CSS Media Queries Boilerplate

CSS Media Queries快查片段。

 

Boilerplate for Responsive Mobile

Boilerplate for Responsive Mobile

YAMP是一套小工具和最佳实践,可让网页设计师更快地建立响应式网站。

 

jQuery jQuery Boilerplate jQuery Boilerplate

该项目将不寻求每一个可能的模式提供了一个完美的解决方案,但将尝试覆盖了简单的模板,适合初学者及以上。

 

Stefan Gabos jQuery Plugin Boilerplate

Stefan Gabos jQuery Plugin Boilerplate

快速上手的jQuery插件开发样板。

 

Essential jQuery Plugin Patterns

Essential jQuery  Plugin Patterns

一个jQuery插件开发的JavaScript模式。除了大家都知道的JavaScript模式有用外,开发的另一个侧面可以受益于它自己的一套 设计模式:jQuery插件。官方jQuery插件创作指南,提供了一个很好的起点,编写插件和widget入门,但我们更进一步。

 

WordPress WordPress Widget Boilerplate WordPress Widget Boilerplate

一个组织良好的构建WordPress部件的维护样板。

Root Theme
Root Theme
Root是基于HTML5 Boilerplate 和来自Twitter的Bootstrap上的一个WordPress主题。

     

     

Bones
Bones
Bones是一个WordPress主题开发样板。它包含经典(fixed grid)和响应布局可选择。

     

     

Starkers Theme
Starkers Theme
Starkers是一个极简单的WordPress的主题,可创建充当为主题设计师的基础。

     

     

TwentyTen Five HTML5 Base Theme
TwentyTen Five HTML5 Base Theme

     

将HTML5引入WordPress,你可以使用这TwentyTen Five WordPress模板建立你的HTML主题。

国外程序员推荐:每个程序员都应读的书

编者按:2008年8月4日,StackOverflow 网友 Bert F 发帖提问:哪本最具影响力的书,是每个程序员都应该读的

“如果能时光倒流,回到过去,作为一个开发人员,你可以告诉自己在职业生涯初期应该读一本,你会选择哪本书呢?我希望这个书单列表内容丰富,可以涵盖很多东西。”

很多程序员响应,他们在推荐时也写下自己的评语。以前就有国内网友介绍这个程序员书单,不过都是推荐数 Top 10的书。其实除了前10本之外,推荐数前30左右的书籍都算经典,笔者整理编译这个问答贴,同时摘译部分推荐人的评语。下面就按照各本书的推荐数排列。

1. 《代码大全 史蒂夫·迈克康奈尔

推荐数:1684

“优秀的编程实践的百科全书,《代码大全》注重个人技术,其中所有东西加起来,就是我们本能所说的“编写整洁的代码”。这本书有50页在谈论代码布局。” —— Joel Spolsky

对于新手来说,这本书中的观念有点高阶了。到你准备阅读此书时,你应该已经知道并实践过书中99%的观念。– esac

2. 《程序员修炼之道

推荐数:1504

对于那些已经学习过编程机制的程序员来说,这是一本卓越的书。或许他们还是在校生,但对要自己做什么,还感觉不是很安全。就像草图和架构之间的差别。虽 然你在学校课堂上学到的是画图,你也可以画的很漂亮,但如果你觉得你不太知道从哪儿下手,如果某人要你独自画一个P2P的音乐交换网络图,那这本书就适合 你了。—— Joel

3. 《计算机程序的构造和解释

推荐数:916

就个人而言,这本书目前为止对我影响醉倒的一本编程书。

代码大全》、《重构》和《设计模式》这些经典书会教给你高效的工作习惯和交易细节。其他像《人件集》、《计算机编程心理学》和《人月神话》这些书会深入软件开发的心理层面。其他书籍则处理算法。这些书都有自己所属的位置。

然而《计算机程序的构造和解释》与这些不同。这是一本会启发你的书,它会燃起你编写出色程序的热情;它还将教会你认识并欣赏美;它会让你有种敬畏,让你难以抑制地渴望学习更多的东西。其他书或许会让你成为一位更出色的程序员,但此书将一定会让你成为一名程序员。

同时,你将会学到其他东西,函数式编程(第三章)、惰性计算、元编程、虚拟机、解释器和编译器。

一些人认为此书不适合新手。个人认为,虽然我并不完全认同要有一些编程经验才能读此书,但我还是一定推荐给初学者。毕竟这本书是写给著名的6.001, 是麻省理工学院的入门编程课程。此书或许需要多做努力(尤其你在做练习的时候,你也应当如此),但这个价是对得起这本书的。

你还不确信么?那就读读第一版的前言或序言。网上有免费的电子版。 – Antti Sykäri

4. 《C程序设计语言

推荐数:774

这本书简洁易读,会教给你三件事:C 编程语言;如何像程序员一样思考;底层计算模型。(这对理解“底层”非常重要)—— Nathan

5. 《算法导论

推荐数:671

代码大全》教你如何正确编程;《人月神话》教你如何正确管理;《设计模式》教你如何正确设计……

在我看来,代码只是一个工具,并非精髓。开发软件的主要部分是创建新算法或重新实现现有算法。其他部分则像重新组装乐高砖块或创建“管理”层。我依然梦 想这样的工作,我的大部分时间(>50%)是在写算法,其他“管理”细节则留给其他人…… —— Ran Biron

6. 《重构:改善既有代码的设计

推荐数:617

我想我不得不推荐《重构》:改进现有代码的设计。—— Martin

我必须承认,我最喜欢的编程语录是出自这本书:任何一个傻瓜都能写出计算机能理解的程序,而优秀的程序员却能写出别人能读得懂的程序。—— Martin Fowler

7. 《设计模式

推荐数:617

就我而言,我认为四人帮编著的《设计模式》是一本极为有用的书。虽然此书并不像其他建议一样有关“元”编程,但它强调封装诸如模式一类的优秀编程技术,因而鼓励其他人提出新模式和反模式(antipatterns),并运用于编程对话中。—— Chris Jester-Young

8. 《人月神话

推荐数:588

9. 《计算机程序设计艺术

推荐数:542

这是高德纳倾注心血写的一本书。—— Peter Coulton

10. 《编译原理(龙书)

推荐数:462

我很奇怪,居然没人提到龙书。(或许已有推荐,我没有看到)。我从没忘过此书的第一版封面。此书让我知道了编译器是多么地神奇绝妙。- DB

11. 《深入浅出设计模式

推荐数:445

我知道四人帮的《设计模式》是一本标准书,但倒不如先看看这部大部头,此书更为简易。一旦你了解了解了基本原则,可以去看四人帮的那本圣经了。- Calanus

12. 《哥德尔、艾舍尔、巴赫书:集异璧之大成》

推荐数:437

如果下昂真正深入阅读,我推荐道格拉斯·侯世达(Douglas Hofstadter)的《哥德尔、艾舍尔、巴赫书》。他极为深入研究了程序员每日都要面对的问题:递归、验证、证明和布尔代数。这是一本很出色的读物, 难度不大,偶尔有挑战,一旦你要鏖战到底,将是非常值得的。 – Jonik

13. 《代码整洁之道

推荐数:329

虽然《代码整洁之道》和《代码大全》有很多共同之处,但它有更为简洁更为实际的清晰例子。 – Craig P. Motlin

14. 《Effective C++》和《More Effective C++

推荐数:297

在我职业生涯早期,Scott Meyer的《Effective C++》和后续的《More Effective C++》都对我的编程能力有着直接影响。正如当时的一位朋友所说,这些书缩短你培养编程技能的过程,而其他人可能要花费数年。

去年对我影响最大的一本书是《大教堂与市集》,该书教会我很有关开源开发过程如何运作,和如何处理我代码中的Bug。 – John Channing

15. 《编程珠玑

推荐数:282

尽管我不得不羞愧地承认,书中一半的东西我都没有理解,但我真的推荐《编程珠玑》,书中有些令人惊奇的东西。 – Matt Warren

16. 《修改代码的艺术by Michael Feathers

我认为没有任何一本书能向这本书一样影响了我的编程观点。它明确地告诉你如何处理其他人的代码,含蓄地教会你避免哪些(以及为什么要避免)。- Wolfbyte

同意。很多开发人员讨论用干净的石板来编写软件。但我想几乎所有开发人员的某些时候是在吃其他开发人员的狗食。– Bernard Dy

17. 《编码:隐匿在计算机软硬件背后的语言

我推荐Charles Petzold的《编码》。在这个充满工具和IDE的年代,很多复杂度已经从程序员那“抽取”走了,这本书一本开眼之作。 – hemil

18. 《禅与摩托车维修艺术 / Zen and the Art of Motorcycle Maintenance》

对我影响最大的那本书是 Robert Pirsig 的《禅与摩托车维修艺术》。不管你做什么事,总是要力求完美,彻底了解你手中的工具和任务,更为重要的是,要有乐趣(因为如果你做事有乐趣,一切将自发引向更好的结果)。 – akr

(编注:关于这本书,也可以看看阮一峰的读后感。)

19. 《Peopleware / 人件集:人性化的软件开发

Demarco 和 Lister 表明,软件开发中的首要问题是人,并非技术。他们的答案并不简单,只是令人难以置信的成功。第二版新增加了八章内容。 – Eduardo Molteni

20. 《Coders at Work / 编程人生

一本非常有影响力的书,可以从中学到一些业界顶级人士的经验,了解他们如何思考并工作。 – Jahanzeb Farooq

21. 《Surely You’re Joking, Mr. Feynman! / 别闹了,费曼先生!

虽然这本书可能有点偏题,但不管你信不信,这本书曾在计算机科学专业课程的阅读列表之上。一个优秀的角色模型,一本有关好奇心的优秀书籍。 – mike511

22. 《Effective Java 中文版》

此书第二版教你如何编写漂亮并高效的代码,虽然这是一本Java书,但其中有很多跨语言的理念。 – Marcio Aguiar

23. 《Patterns of Enterprise Application Architecture / 企业应用架构模式

很奇怪,还没人推荐 Martin Fowler 的《企业应用架构模式》- levi rosol

24. 《The Little Schemer》和《The Seasoned Schemer nmiranda

这两本是LISP的英文书,尚无中文版。美国东北大学网站上也有电子版。

25. 《交互设计之路英 文名:《The Inmates Are Running The Asylum: Why High Tech Products Drive Us Crazy and How to Restore the Sanity》该书作者:Alan Cooper,人称Visual Basic之父,交互设计之父。

本书是基于众多商务案例,讲述如何创建更好的、高客户忠诚度的软件产品和基于软件的高科技产品的书。本 书列举了很多真实可信的实际例子,说明目前在软件产品和基于软件的高科技产品中,普遍存在着“难用”的问题。作者认为,“难用”问题是由这些产品中存在着 的高度“认知摩擦”引起的,而产生这个问题的根源在于现今软件开发过程中欠缺了一个为用户利益着想的前期“交互设计”阶段。“难用”的产品不仅损害了用户 的利益,最终也将导致企业的失败。本书通过一些生动的实例,让人信服地讲述了由作者倡导的“目标导向”交互设计方法在解决“难用”问题方面的有效性,证实 了只有改变现有观念,才能有效地在开发过程中引入交互设计,将产品的设计引向成功。

本书虽然是一本面向商务人员而编写的书,但也适合于所有参与软件产品和基于软件的高科技产品开发的专业人士,以及关心软件行业和高科技行业现状与发展的人士阅读。

他还有另一本中文版著作:《About Face 3 交互设计精髓

26. 《Why’s (Poignant) Guide to Ruby

如果你不是程序员,阅读此书可能会很有趣,但如果你已经是个程序员,可能会有点乏味。

27. Unix编程艺术

It is useful regardless operating system you use. – J.F. Sebastian
不管你使用什么操作系统,这本书都很有用。 – J.F. Sebastian

28. 《Practices of an Agile Developer / 高效程序员的45个习惯:敏捷开发修炼之道

45个习惯,分为7个方面:工作态度、学习、软件交付、反馈、编码、调试和协作。

每一个具体的习惯里,一开始提出一个谬论,然后展开分析,之后有正队性地提出正确的做法,并设身处地地讲出了正确做法给你个人的“切身感受”,最后列出几条注意事项,帮助你修正自己的做法(“平衡的艺术”)。

29. 《Test-Driven Development by Example. / 测试驱动开发

前面已经提到的很多书都启发了我,并影响了我,但这本书每位程序员都应该读。它向我展示了单元测试和TDD的重要性,并让我很快上手。 – Curro

我不关心你的代码有多好或优雅。如果你没有测试,你或许就如同没有编写代码。这本书得到的推荐数应该更高些。人们讨论编写用户喜欢的软件,或既设计出色并健壮的高效代码,但如果你的软件有一堆bug,谈论那些东西毫无意义。– Adam Gent

30. 《Don’t Make Me Think / 点石成金:访客至上的网页设计秘笈

取决于你所追求的目标。我喜欢《代码大全》是因纯编程,《点石成金》是一本有关UI设计的卓越书籍。 – Justin Standard

后语

除这个书单之外,曾经也有微博网友推荐《一些经典的计算机书籍》,大约在50本。

编译:伯乐在线 – 黄利民

Lumia1000 还是 PureView 二代目:Nokia 秘密革命性手机?

 

Nokia设计部门老大Marko Ahtisaari接受一家芬兰本地报纸采访时表示,Nokia正在研发一部具备革命性功能的设备。

他说:

当我们完成这部全新的手机后,用户从此不再需要用手在屏幕上不断的戳来戳去,也不再需要一直向下滑动屏幕内容……

当然,过往的键盘控制和T9输入型手机,确实不需要如上操控,但那实在跟“革命性”毫无关系……

那么,难道他指的是一部令人难以置信的具备Kinect动作操控功能的智能手机吗?又或者如上图这样,是一部在来电的时候自己会“站立”起来的“聪明”的手机?

那么你们觉得Marko Ahtisaari在买什么关子呢?