《高性能响应式Web开发实战》一1.2 本书的线索

1.2 本书的线索

技术需要依靠产品来落地和彰显它的威力,否则再强悍的技术也只是象牙塔上小部分人的玩具而已。这就好比3A游戏大作对于游戏引擎的重要性(《孤岛危机》之于Cryengine,《战争机器》之于Unreal)。再有,“纸上得来终觉浅,绝知此事要躬行”,对古人如此,对程序员更是如此。学习技能和提升技能的最佳途径只有实践,开始使用学到的技术,并且遇到书本上从来就没有提及的困难,这才是进步的开始。

如果整本书每一章阐述的知识点相互独立,也就不能称之为书,至少不能称之为技术书,只能算作是某人博客的文章选集。所以书是有线索的,线索将每一章的内容联系起来,形成一个知识体系。例如,响应式图片与性能调优看似不相关,但过度地追求大而全的图片的解决方案,注定要用降低性能为代价。

我非常同意alistapart.com上的一篇文章《Building to Learn》[2] 中的一些观点,也深有感触:用技术做一些你感兴趣的事情,这是学习的最好方式。

综合以上原因,我们的书也需要一条线索,需要活生生的产品来将我们的知识付诸实践。这条线索就是完成一个可以应用在Jekyll(静态博客网站生成工具)上的响应式文章详情页。在每一章的结尾,我都将把这一章学到的技术运用到这个博客页面的制作过程中,来取代非响应式下的解决方案。读者读到书的结尾,这个页面也就开发完成了。读到这里的读者可以直接访问我的个人技术博客 http://qingbob.com来先睹为快,也可以访问本书在GitHub上的源码地址 https://github.com/hh54188/responsive-web-design-tutorial获取本书涉及的所有代码。

因为篇幅有限,所以整本书的主题是“开发”而不是“设计”。也就是说,我们只负责不遗余力地实现设计稿中的需求,而不问为何这样设计。要知道关于响应式设计同样也是一个庞大的课题。我相信已经有更好的文章和书描述了响应式产品、响应式交互式设计和移动优先,在本书中我只会偶尔提及。

时间: 2024-10-25 15:45:22

《高性能响应式Web开发实战》一1.2 本书的线索的相关文章

《高性能响应式Web开发实战》一导读

前 言 高性能响应式Web开发实战 为什么写这样一本书 作为一名程序员,写书也好,写博客也罢,其实都和写开源程序的性质是一样的,都是想要把自己的知识分享出去.分享是一件非常有成就感同时也是很快乐的事情,因为我们在此过程中会有很多新的想法,会迫不及待地想去实现,也会有很多人来和我们进行交流,探讨其他的一些可能性.最重要的是,对于做分享的人而言,做好分享很难!首先,分享者要对自己讲解的技术有足够的了解,不仅仅是了解如何用它,还要了解它的过去和未来:其次,分享者要能够娓娓道来,要站在受众的立场上考虑他

《高性能响应式Web开发实战》一第2章 响应式中要面对的问题

第2章 响应式中要面对的问题 高性能响应式Web开发实战响应式设计的主要工作就是要让网页适配当下种类繁多的设备,使页面在不同设备上仍然看上去友好并且可用.但是细想,当在设法让一个页面同时适配三星Galaxy S6和iPhone 6时,我们究竟是在适配什么?Galaxy S6和iPhone 6究竟存在哪些影响页面展现的差异因素?以上这些问题都可以归纳为:当谈论设备的时候我们究竟在谈论什么? 不同设备间的差异有很多种,我们不关心设备的制造厂商,不关心CPU功耗,不关心生产工艺,只关心会影响页面在屏幕

《高性能响应式Web开发实战》一第1章 概述及任务介绍

第1章 概述及任务介绍 高性能响应式Web开发实战本章向读者大致描述整本书的轮廓.希望通过阅读本章内容,读者能够了解这本书涉及的技术范围.写作风格.写作思路以及贯穿全文的线索.我相信这对读者阅读接下来的内容会很有帮助,不至于让读者觉得某些章节的安排比较突兀. 当然,读者也可以跳过本章内容,直接进入下一章,开始实战技术的学习.

《高性能响应式Web开发实战》一1.4 定义响应式

1.4 定义响应式 我们有没有可能采用一种最直接的方式,用一句话阐述响应式在前端开发中究竟代指哪些技术?如果非要往前追溯对响应式技术的定义,一定要谈alistapart[3] 网站上的被奉为经典的两篇文章,即<Responsive Web Design>[4]和<A Dao of Web Design>[5] . 在<Responsive Web Design>中,作者仅仅使用了流式布局(fluid layout)和媒体查询(media query)就完成了响应式页面的

《高性能响应式Web开发实战》一2.2 CSS像素

2.2 CSS像素 上一节讲的像素密度和Web开发有什么关系?在我们编写样式代码时,常会用到另一个像素单位px.为了和设备像素区分开,我们把它称为CSS像素.如果说设备像素给我们的印象是机械的.固定的.物理的,那么CSS像素将会是灵活的.虚拟的.相对的. 为什么说它是相对的? 假设我在页面上画一个300 px宽度的块级元素.一般情况下,块级元素只相当于页面的部分宽度.如果使用浏览器的页面放大功能,10倍地放大页面,很快块级元素就会充满整个页面.但吊诡的是,此时我们既没有改变浏览器的宽度,也没有改

《高性能响应式Web开发实战》一1.1 为什么需要响应式设计

1.1 为什么需要响应式设计 首先,我们先讲一下"为什么"需要响应式. 1.1.1 产品形态需要 我不想再谈论移动设备的增长趋势,也不需要强调用户每天花费多少时间在移动设备上,更不必用数字和图表告诉各位移动互联网形势如何好.毕竟每天各种互联网报告和科技媒体都在反复提醒着我们这些事情. 这里我们仅站在产品和技术的角度上思考,假设没有响应式设计,假设不区分移动与桌面用户,任由他们访问相同的桌面端页面,会有什么问题? 以大众点评网为例,如果你真的在手机上访问过站点的桌面版,那体验将会是灾难般

《高性能响应式Web开发实战》一1.3 写作思路

1.3 写作思路 大多数开发者在初学一门技术时常有的疑惑,用我常说的一个笑话来表达就是:当你把一个名词疑惑拿去向一个专家求解时,你的一个疑惑会变成三个疑惑,因为他会用另外两个你更加不了解的名词来解释这个名词. 上面的笑话也是我自己在为别人解释一些概念时常常陷入的怪圈.例如,你向一位非计算机专业的同学解释"在你输入网站地址的那一瞬间浏览器发生了什么"时,不免要牵扯到网络协议.浏览器引擎一类的专业词汇,而这些专业词汇又需要想方设法地用更通俗的概念进行讲解. 鉴于上述情形,本书采用与上述相反

《高性能响应式Web开发实战》一2.4小结

2.4小结 本章的开头首先了解了关于屏幕PPI的定义,并引出了设备像素这个概念.虽然像素密度越高,能够表现的图像越细腻.但是,这一特性也需要开发者提供更高清的素材来支持,否则素材会显得模糊不堪. 随后提出了CSS像素的这个概念,并且梳理了CSS像素与设备像素之间的异同.通过CSS像素,能部分解决PPI在Web开发中的缺陷. 最后我们介绍了桌面端浏览器与移动设备浏览器在渲染页面时的差异,由此引出了视口(viewport)的概念,并学习了在移动浏览器上如何手动控制视口. 本书接下来的几章内容都与这些

《高性能响应式Web开发实战》一1.5 本书任务

1.5 本书任务 图1-5与图1-6给出的是本书中要完成的页面设计稿. 这是一位产品经理为本书而设计的.2015年年初sitepoint [6] 网站发布了一篇有关2015年网页设计趋势的文章<The Big Web Design Trends for 2015> [7] .文章中归纳了在2015年网页设计中将会出现的趋势性特征,如大气(make it big).简约(minimize).扁平设计(flat design),在这次设计稿中都得以体现. 图1-5所示为页面桌面端样式,图1-6所示