&p&前端工程师，也叫Web前端开发工程师。他是随着web发展，细分出来的行业。&br&Web前端开发技术主要包括三个要素：HTML、CSS和JavaScript！&br&它要求前端开发工程师不仅要掌握基本的&strong&Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持&/strong&等。&br&随着近两三年来RIA（Rich Internet Applications的缩写，中文含义为：丰富的因特网应用程序）的流行和普及带来的诸如：Flash/Flex，Silverlight、XML和服务器端语言（PHP、&a href=&http://ASP.NET& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&ASP.NET&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&，JSP、Python）等语言，前端开发工程师也需要掌握。&/p&&p&前端开发的入门门槛其实很低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。&br&HTML 甚至不是一门语言，他仅仅是简单的标记语言！&br&CSS 只是无类型的样式修饰语言。当然可以勉强算作弱类型语言。&br&Javascript 的基础部分相对来说不难，入手还算快。&/p&&p&也正因为如此，前端开发领域有很多自学成“才”的同行，但大多数人都停留在会用的阶段，因为后面的学习曲线越来越陡峭，每前进一步都很难。&/p&&p&Web前端技术有一些江湖气，知识点过于琐碎，技术价值观的博弈也难分伯仲，即全局的系统的知识结构并未成体系，这些因素也客观上影响了“正统“前端技术的沉淀！而且各种“奇技淫巧”被滥用，前端技术知识的传承也过于泛泛，新人难看清时局把握主次。因此，前端技术领域，为自己觅得一个靠谱的师兄，重要性要盖过项目、团队、公司、甚至薪水。&/p&&p&另一方面，正如前面所说，前端开发是个非常新的职业，对一些规范和最佳实践的研究都处于探索阶段。&br&总有新的灵感和技术不时闪现出来，例如CSS sprite、负边距布局、栅格布局等；&br&各种JavaScript框架层出不穷，为整个前端开发领域注入了巨大的活力；&br&浏览器大战也越来越白热化，跨浏览器兼容方案依然是五花八门。&br&为了满足“高可维护性”的需要，需要更深入、更系统地去掌握前端知识，这样才可能创建一个好的前端架构，保证代码的质量。&/p&&p&随着手持设备的迅猛发展，带动了 HTML5行业标准的快速发展。web领域的技术，大概有10年都没有大的更新了！&br&现在市场很需要优秀的、高级的前端工程师。&br&一方面是因为这是一个比较新的细分行业，而且前端程序员大都自学一部分，知识结构不系统；另一方面，大学里面没有这种课程，最最重要的是：北大青鸟这类培训机构也没有专门的前端工程师的培训课程！！&/p&&p&吴亮在《JavaScript 王者归来》第一张的序里面说：大多数程序员认为 Javascript 过于简陋，只适合一些网页上面花哨的表现，所以不愿花费精力去学习，或者以为不学习就能掌握。&br&实际上，一门语言是否脚本语言，往往是她的设计目标决定，简单与复杂并不是区分脚本语言和非脚本语言的标准。&br&事实上，在脚本语言里面，Javascript 属于相当复杂的一门语言，他的复杂度即使放在非脚本语言中来衡量，也是一门相当复杂的语言！&br&&strong&Javascript 的复杂度不逊色于 Perl 和 Python！&/strong&&/p&&p&&strong&如何学习前端知识？ &/strong&&/p&&p&我们生活在一个充满规则的宇宙里面。社会秩序按照规则运行，计算机语言几乎全部是规则的集合。计算机前辈们定义规则，规则约束我们，我们用规则控制数据。&strong&大部分时候，对数据的合理控制，来自于你对规则的掌握。&/strong&&/p&&p&学习 HTML，CSS 应该先跟着书仔细、扎实的学一遍。然后就需要做大量的练习，做各种常规的、奇怪的、大量的布局练习来捆固、理解自己的知识。&br&而学习 Javascript 首先要知道这门语言可以做什么，不能做什么，擅长做什么，不擅长做什么！&br&如果你只想当一个普通的前端程序员，你只需要记住大部分 Javascript 函数，做一些练习就可以了。&br&如果你想当深入了解Javascript，你需要了解 Javascript 的原理，机制。需要知道他们的本源，需要深刻了解 Javascript 基于对象的本质。&br&还需要 深刻了解 浏览器宿主 下 的 Javascript 的行为、特性。&/p&&p&因为历史原因，Javascript一直不被重视，有点像被收养的一般！ 所以他有很多缺点，各个宿主环境下的行为不统一、内存溢出问题、执行效率低下等问题。&br&作为一个优秀的前端工程师还需要深入了解、以及学会处理 Javascript 的这些缺陷。&/p&&p&&strong&那么一名优秀的、甚至卓越的 前端开发工程师的具备什么条件&/strong&？&/p&&p&首先，优秀的Web前端开发工程师要在知识体系上既要有广度和深度！做到这两点，其实很难。所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。技术非黑即白，只有对和错，而技巧则见仁见智。&br&在以前，会一点Photoshop和Dreamweaver的操作，就可以制作网页。&br&现在，只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。&br&Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好。&br&Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。&/p&&p&其次，优秀的Web前端开发工程师应该具备快速学习能力。Web发展的很快，甚至可以说这些技术几乎每天都在变化！如果没有快速学习能力，就跟不上Web发展的步伐。前端工程师必须不断提升自己，不断学习新技术、新模式；仅仅依靠今天的知识无法适应未来。Web的明天与今天必将有天壤之别，而前端工程师的工作就是要搞清楚如何通过自己的Web应用程序来体现这种翻天覆地的变化。&br&说到这里，我想起了一个大师说过的一句话：对于新手来说，新技术就是新技术。&br&对于一个高手来说，新技术不过是就技术的延伸。&br&再者，优秀的前端工程师需要具备良好的沟通能力，因为前端工程师至少都要满足四类客户的需求。&/p&&p&1、&strong&产品经理&/strong&。这些是负责策划应用程序的一群人。他们会想出很多新鲜的、奇怪的、甚至是不可是实现的应用。一般来说，产品经理都追求丰富的功能。&/p&&p&2、&strong&UI设计师&/strong&。这些人负责应用程序的视觉设计和交互模拟。他们关心的是用户对什么敏感、交互的一贯性以及整体的好用性。一般来说，UI设计师于流畅靓丽、但并不容易实现的用户界面，而且他们经常不满前端工程师造成 1px 的误差。&/p&&p&3、&strong&项目经理&/strong&。这些人负责实际地运行和维护应用程序。项目管理的主要关注点，无外乎正常运行时间、应用程序始终正常可用的时间、性能和截止日期。项目经理追求的目标往往是尽量保持事情的简单化，以及不在升级更新时引入新问题。&/p&&p&4、&strong&最终用户&/strong&。指的是应用程序的主要消费者。尽管前端工程师不会经常与最终用户打交道，但他们的反馈意见至关重要。最终用户要求最多的就是对个人有用的功能，以及竞争性产品所具备的功能。&/p&&p&&strong&Yahoo 公司 ，YUI 的开发工程师 Nicholas C. Zakas 认为：&/strong&&br&前端工程师是计算机科学职业领域中最复杂的一个工种。绝大多数传统的编程思想已经不适用了，为了在多种平台中使用，多种技术都借鉴了大量软科学的知识和理念。成为优秀前端工程师所要具备的专业技术，涉及到广阔而复杂的领域，这些领域又会因为你最终必须服务的各方的介入而变得更加复杂。专业技术可能会引领你进入成为前端工程师的大门，但只有运用该技术创造的应用程序以及你跟他人并肩协同的能力，才会真正让你变得优秀。&/p&&p&————————————&/p&&p&&strong&关于书籍：&/strong&&br&HTML、CSS 类别书籍，都是大同小异，在当当网、卓越网搜索一下很多推荐。如果感觉学的差不多了，可以关注一下《CSS禅意花园》，这个很有影响力。&br&Javascript 的书籍 推荐看老外写的，国内很多 Javascript 书籍的作者对 Javascript 语言了解的都不是很透彻。&/p&&p&这里推荐几本 Javascript 书籍：&/p&&p&&strong&初级读物：&/strong&&br&&strong&《JavaScript高级程序设计》&/strong&：一本非常完整的经典入门书籍，被誉为JavaScript圣经之一，详解的非常详细，最新版第三版已经发布了，建议购买。&/p&&p&&strong&《JavaScript王者归来》&/strong&百度的一个Web开发项目经理写的，作为初学者准备的入门级教程也不错。&br&&strong&中级读物：&/strong&&br&&strong&《JavaScript权威指南》&/strong&：另外一本JavaScript圣经，讲解的也非常详细，属于中级读物，建议购买。&br&&strong&《JavaScript.The.Good.Parts》&/strong&：Yahoo大牛，JavaScript精神领袖Douglas Crockford的大作，虽然才100多页，但是字字珠玑啊！强烈建议阅读。&br&&strong&《高性能JavaScript》&/strong&：《JavaScript高级程序设计》作者Nicholas C. Zakas的又一大作。&br&&strong&《Eloquent JavaScript》&/strong&：这本书才200多页，非常短小，通过几个非常经典的例子（艾米丽姨妈的猫、悲惨的隐士、模拟生态圈、推箱子游戏等等）来介绍JavaScript方方面面的知识和应用方法。&br&&strong&高级读物：&/strong&&br&&strong&《JavaScript Patterns 》&/strong&：书中介绍到了各种经典的模式，如构造函数、单例、工厂等等，值得学习。&br&&strong&《Pro.JavaScript.Design.Patterns》&/strong&：Apress出版社讲解JavaScript设计模式的书，非常不错。&br&&strong&《Developing JavaScript Web Applications》&/strong&：构建富应用的好书，针对MVC模式有较为深入的讲解，同时也对一些流程的库进行了讲解。&br&&strong&《Developing Large Web Applications》&/strong&：不仅有JavaScript方面的介绍，还有CSS、HTML方面的介绍，但是介绍的内容却都非常不错，真正考虑到了一个大型的Web程序下，如何进行JavaScript架构设计，值得一读。&/p&&p&要做优秀的前端工程师，还需要继续努力：&strong&《高性能网站建设指南》、《Yahoo工程师的网站性能优化的建议》、“YSLOW”性能优化建议、《网站重构》、《Web开发敏捷之道》、“ jQuery 库”、“前端框架”、“HTML5”、“CSS3”&/strong&。。。 这些都要深入研究！&/p&&p&万事开头难！如果你能到这个境界，剩下的路自己就可以走下去了。&br&&strong&人们常说：不想当裁缝的司机，不是个好厨师。&/strong&&br&如果单纯只是学习前端编程语言、而不懂后端编程语言（PHP、&a href=&http://ASP.NET& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&ASP.NET&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&，JSP、Python），也不能算作是优秀的前端工程师。&br&&strong&在成为一个优秀的前端工程师的道路上，充满了汗水和辛劳&/strong&。&/p&
前端工程师，也叫Web前端开发工程师。他是随着web发展，细分出来的行业。Web前端开发技术主要包括三个要素：HTML、CSS和JavaScript！它要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具…
来自子话题：
跟着 @欧雷 的指引，在张克军的博文中提到了另一篇深入探讨的文章：&a href=&//performance-impact-of-js-css-loading-order/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&&/span&&span class=&invisible&&//performance-impact-of-js-css-loading-order/&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&br&&br&------------------------ 由于 &a href=&& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a& 这个网站「并不存在」，以下内容是通过 Pocket（原 ReadItLater）服务捏造而来，请看官自辨 -----------------------&br&&br&JS 和 CSS 的位置对其他资源加载顺序的影响&br&克军做了一系列测试：js和css的顺序关系，给出了现象和结论，但未给出原因。&br&JS 和 CSS 在页面中的位置，会影响其他资源（指 img 等非 js 和 css 资源）的加载顺序，究其原因，有三个值得注意的点：&br&&ol&&li& &strong&JS 有可能会修改 DOM.&/strong& 典型的，可能会有 document.write. 这意味着，在当前 JS 加载和执行完成前，后续所有资源的下载有可能是没必要的。这是 JS 阻塞后续资源下载的根本原因。&/li&&li& &strong&JS 的执行有可能依赖最新样式。&/strong&比如，可能会有 var width = $('#id').width(). 这意味着，JS 代码在执行前，浏览器必须保证在此 JS 之前的所有 css（无论外链还是内嵌）都已下载和解析完成。这是 CSS 阻塞后续 JS 执行的根本原因。&/li&&li& &strong&现代浏览器很聪明，会进行 prefetch 优化。&/strong&性能是如此重要，现代浏览器在 竞争中，在 UI update 线程之外，还会开启另一个线程，对后续 JS 和 CSS 提前下载（注意，仅提前下载，并不执行）。有了
prefetch 优化，这意味着，在不存在任何阻塞的情况下，理论上 JS 和 CSS 的下载时机都非常优先，和位置无关。&/li&&/ol&&br&以上三点可简述为三条基本定律：&br&&ul&&li&&strong&定律一：资源是否下载依赖 JS 执行结果。&/strong&&/li&&li&&strong&定律二：JS 执行依赖 CSS 最新渲染。&/strong&&/li&&li&&strong&定律三：现代浏览器存在 prefetch 优化。&/strong&&/li&&/ul&&br&有了这三条定律，再来看克军的测试，就很清晰了：&br&&br&a,b – head里出现外联js，无论如何放，css文件都不能和body里的请求并行&br&&br&根据定律一和定律三，可以知道上面的结论不够正确。比如：&br&&head& &link rel=&stylesheet& href=&mock.php?css1&sleep=2&& &script src=&mock.php?js&sleep=3&&&/script& &link rel=&stylesheet& href=&mock.php?css2&sleep=4&& &/head& &body& &link rel=&stylesheet& href=&mock.php?css3&sleep=5&& &img src=&test.gif&& &/body& &br&在 Chrome 下的瀑布图是：&br&黄色条是 js 的，可以看出 img 的延时下载是由定律一决定的。&br&定律三则决定了所有 js/css 都是并行开始下载的。在 Firefox 10 下，prefetch 非常强悍，对 img 也会预加载，瀑布图如下：&br&调整一下 sleep 时间，还可以观察到定律二的威力：&br&&head& &link rel=&stylesheet& href=&mock.php?css1&sleep=3&& &!-- 修改 sleep 值，使其大于 js 的 --& &script src=&mock.php?js&sleep=2&&&/script& &link rel=&stylesheet& href=&mock.php?css2&sleep=4&& &/head& &body& &link rel=&stylesheet& href=&mock.php?css3&sleep=5&& &img src=&test.gif&& &/body& &br&瀑布图立刻发生了变化：&br&因为定律一，决定 img 的下载在 js 执行后。又因为定律二，决定 js 的执行在第一个 css 后。于是最后在瀑布图上体现出来，就是 img 的下载在第一个 css 后。&br&再来看克军的第二个结论：&br&&br&c – head里的内联js只要在所有外联css前面，css文件可以和body里的请求并行（图2）&br& d – head里的内联js只要在任一外联css后面，css文件就不能和body里的请求并行（图1）&br&&br&这个是定律二的威力。结论 c 是正确的，因为没有 css 会影响 js 的执行。结论 d 则不够正确。img 等其他资源，会在 js 前面的 css 下载完成后，以及 js 执行后，立刻开始下载。与头部中，js 位置之后的 css 没关系。&br&克军的其他结论都是对的，不多说。&br&注意1：Firefox 10 的 prefetch 有点奇怪，有时会对 img 进行 prefetch，有时则不会。有兴趣的可以进一步寻找规律。&br& 注意2：上面的三个定律，是黑盒猜测，有兴趣的可以去阅读浏览器的源码，应该能找到更深层次的原因。&br& 注意3：本文没有考虑 defer, async 属性的影响，这是另一个故事。&br&浏览器在迅速发展，很多总结，特别是书籍上的，很难与时俱进。大家应该像克军学习，多测试，多发现，这样得来的知识，才不会过时。这篇博客的总结，也肯定在未来甚至就在现在，已经存在错误。这些都无所谓，关键是&strong&要懂得测试的方法和分析的思路，有了“渔”，才能更好地探求和拥有“鱼”&/strong&。
跟着 @欧雷 的指引，在张克军的博文中提到了另一篇深入探讨的文章：------------------------ 由于
这个网站「并不存在」，以下内容是通过 Pocket（原 ReadItLater）服务捏造而来，请看官自辨 ------------------…
来自子话题：
本人是标准的DC黑（参见：我为什么是DC黑 &a href=&/blog/653499& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&/blog/6534&/span&&span class=&invisible&&99&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a& ），不过我并不赞同@程劭非 的答案。&br&&br&第一，with的设计初衷确实是DC所说的提供shortcut，此事可向BE求证。至于说with可以用来做动态作用域，这事儿完全是因为当初with的实现恰好利用了scopechain的机制，所以这是一个副产品，而且是有问题的副产品。with的缺点我在这个speech里有分析：&a href=&/v_show/id_XMjkwNjc2Nzgw.html& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&/v_show/id_X&/span&&span class=&invisible&&MjkwNjc2Nzgw.html&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a& （从第14分钟开始）。with的缺点导致它其实并不能很好的适用于shortcut的目的，因此只剩下给一些JS高手用来玩dynamic scope的用途了。&br&&br&除了演讲提到的问题，with也阻碍了对代码的静态分析和优化，比如引擎在遇到with的时候会自动关掉with块内的某些JIT优化。所以我想BE也认为with的设计是失败的（另外一些他提到过的失败决策如全局变量）。&br&&br&第二，DC说JS是Lisp并没有错。BE自己也说过他本来是想把scheme弄到浏览器里，只是因为各种原因，他并“没有执着于scheme”——引自《Coders at Work》中对BE的采访。天下的FP语言确实千千万，但是对当年的BE影响最大的FP语言肯定是scheme。在前述访谈中，BE也提到JS里残缺的动态作用域是受到lisp影响的（我感觉BE或许认为这其实是不好的影响）。&br&&br&第三，DC还是在es-discuss邮件组里发言的。&br&&br&Good parts/Bad parts此书总体上是很好的。ES5的strict模式实际上可以认为是去掉了不少Bad parts。我个人还是相当推荐该书的。&br&&br&如果说此书有哪一条我一定不赞同的，那大概就是@yulanggong 提到的分号的问题。我是不写分号派的，具体见：&a href=&/blog/382186& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&/blog/3821&/span&&span class=&invisible&&86&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a& 。
本人是标准的DC黑（参见：我为什么是DC黑
），不过我并不赞同@程劭非 的答案。第一，with的设计初衷确实是DC所说的提供shortcut，此事可向BE求证。至于说with可以用来做动态作用域，这事儿完全是因为当初with的实现恰好利用了scopecha…
来自子话题：
先说「一个计算机字体中到底包含多少种 Name 呢？」这个问题吧, 至于软件及浏览器的读取规则, 可参阅 @李任之 的答案.&br&&br&Adobe 有一份文档就是专门讲这个的: 5149.OTFname_Tutorial.pdf&br&&br&字库中有关于字体信息的数据都储存在 name table 中, 每条数据有 4 个标识符:&br&&b&nameID&/b&,&b&platformID&/b&,&b&platEncID&/b&,&b&langID&/b& - 名称,平台,编码,语言&br&(其中 platformID 将会影响后两项的取值).&br&&br&其中, 与字库名称有关的 nameID 如下, 以 Adobe 黑体中的对应名称作为参照:&br&1. &b&Family&/b& - Adobe Heiti Std R&br&2. &b&Style&/b& - Regular&br&4. &b&Full&/b& - Adobe Heiti Std R&br&6. &b&PostScript&/b& - AdobeHeitiStd-Regular&br&16. &b&Preferred Family&/b& - Adobe Heiti Std&br&17. &b&Preferred Subfamily&/b& - R&br&18. &b&Mac Compatible Full&/b& - (无)&br&20. &b&(未命名)&/b& - AdobeHeitiStd-Regular-GBpc-EUC-H&br&&br&通过 4 个标识符, 可以组合出不同平台不同语言下的不同名称, 如:&br&&b&1,1,0,0&/b& - Family,Macintosh,Roman,English&br&(如果不特意指定除 nameID 外的其它 3 个标识符, 将默认为 &1,0,0&, 即西文字体大都如此).&br&&b&1,1,2,19&/b& - Family,Macintosh,Big5,繁体中文&br&&b&1,3,1,2052&/b& - Family,Microsoft,Unicode,简体中文
先说「一个计算机字体中到底包含多少种 Name 呢？」这个问题吧, 至于软件及浏览器的读取规则, 可参阅 @李任之 的答案.Adobe 有一份文档就是专门讲这个的: 5149.OTFname_Tutorial.pdf字库中有关于字体信息的数据都储存在 name table 中, 每条数据有 4 个标识…
来自子话题：
&a href=&http://www.w3.org/TR/CSS2/syndata.html#length-units& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://www.&/span&&span class=&visible&&w3.org/TR/CSS2/syndata.&/span&&span class=&invisible&&html#length-units&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&blockquote&After a zero length, the unit identifier is optional.&br&&/blockquote&被人挖坟了，我再补充一下，可省的仅限于长度，时间、角度等等不可以省略。
After a zero length, the unit identifier is optional.被人挖坟了，我再补充一下，可省的仅限于长度，时间、角度等等不可以省略。
来自子话题：
1，性这一点是对的，因为有了nodejs所以js可以用作后端语言。
&br& 2，价的话，部分对的。js不需要你像学习c或汇编那样懂太多的底层。它最能给人成就感。不管是函数式编程，还是面向对象，都可以支持。
但是，想要学好js，也并不是一件容易事。某些前段工程师做了几年，让他实现功能也基本ok。但是没有读过ecmascript spec，不了解js原理，也只能算是一知半解吧。
另外，很多jser还要做页面效果，实现3d，可能又要涉及计算机图形学知识，各种空间的转换。
所以，单单是会，可能很简单，但真正能做到了如指掌，烂熟于心，还是挺难的。
不过，只要肯做，就没有不可能的事。祝LZ顺利！
1，性这一点是对的，因为有了nodejs所以js可以用作后端语言。 2，价的话，部分对的。js不需要你像学习c或汇编那样懂太多的底层。它最能给人成就感。不管是函数式编程，还是面向对象，都可以支持。 但是，想要学好js，也并不是一件容易事。某些前段工程师做…
来自子话题：
首先，HTML/CSS都在不断发展进化，是难说“学完”的，更别说还没开始“练习”了。
&br&学开发必须学习与实践相结合。如果给自己设定一个目标，比如你说的写一个网站，可以更好地逼迫自己学习。开始可以由功能需求出发完成一些小的功能，了解这些技术如何相互协作的机制，对整个体系先有个粗略的理解。之后再进行一些权威知识的补充，比如阅读相关的技术规范以或是类似那几本权威指南的书，提高知识的完备性并且改正自己开发中的不良习惯。
&br&然后就是一个不断实践学习的积累过程，这个过程是永恒的。有不懂的东西尽量查英文的权威资料，一些好的技术博客的内容也会很有帮助，善用搜索，最后再推荐一个很棒的网站 &a href=&& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&，上面经常会有一些问题的最佳实践。
&br&说到底，这些东西不是可以先“学完”理论知识再开始实践的。不必拘泥于什么先后顺序。
首先，HTML/CSS都在不断发展进化，是难说“学完”的，更别说还没开始“练习”了。 学开发必须学习与实践相结合。如果给自己设定一个目标，比如你说的写一个网站，可以更好地逼迫自己学习。开始可以由功能需求出发完成一些小的功能，了解这些技术如何相互协…
Medium 用了三个和知乎同样在使用的 Closure 相关工具，不得不说在 Google 之外很少见：&br&&ul&&li&&a href=&/p/closure-library/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Closure Library&i class=&icon-external&&&/i&&/a&：提供定义和引用模块的方式，以及一些 UI 组件（比如编辑器，Medium 在此之上做成了无形的，真是引人注目）。&br&&/li&&li&&a href=&/p/closure-compiler/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Closure Compiler&i class=&icon-external&&&/i&&/a&：前端代码进行优化压缩的工具。&br&&/li&&li&&a href=&/p/plovr/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Plovr&i class=&icon-external&&&/i&&/a&：Closure Library 专用的模块分组打包工具。&br&&/li&&/ul&&a href=&/people/peng-gu& class=&internal&&顾鹏&/a&说的渲染方式有点不对，pjax 和 SPA 的技术几乎是对立的。Medium 是一个采用了 RESTful API 的 web app，它没有直接替换 HTML，而是用 JSON + 模板来生成 HTML。我认为 Medium 在服务器端和客户端共用了模板，因此它能进行一致的渲染。当首屏加载时使用服务器端渲染，之后的浏览使用客户端渲染。这样做的优点是对 SEO 友好，加载速度更快——首屏内容里面有个 embedded 字段，包含了文章的 JSON 表示，这节省了一个 HTTP 请求。文章对象里面有个有趣的地方是， HTML 的结构化内容全部用被 JavaScript 化了——精确到任何块级或内联元素—— 这样每个段落都可以由用户添加注释。&br&&br&Medium 还有一篇文章分享了许多技术细节：&a href=&/p/194f7a3d260a& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Just a web page?&i class=&icon-external&&&/i&&/a&&br&&br&纠正，感谢&a href=&/people/peng-gu& class=&internal&&顾鹏&/a&提供的文章链接，观察了一些请求之后，发现 Medium 在文章页面点击左侧菜单中的 Home 链接时，使用了 pjax 加载首页的文章列表：&br&&div class=&highlight&&&pre&&code class=&language-text&&Request URL:/?format=fragment
Request Method:GET
X-Response-Type:html-body
&/code&&/pre&&/div&&br&&br&补充文章加载过程：&br&&div class=&highlight&&&pre&&code class=&language-text&&# 加载主资源，文章内容：
Request URL: /p/:postid
Request Method: GET
Accept: application/json
# 加载次级资源，此时文章内容已经提前显示，没有 side-loading：
GET /p/:postid/follow-ups
GET /p/:postid/upvotes
GET /p/:postid/notes
# 中途滚动，记录当前正在阅读的章节：
PUT /p/:postid/state/location
Request Payload: {paragraphName: &f169&, sectionName: &0c50&}
# 滚动到页面底端，标记为已读：
PUT /p/:postid/state/read
# 鼠标经过（不需要点击）在底端的导航推荐文章链接之上时，预载其内容，并渲染成 DOM：
GET /:collection/:postid
Accept: application/json
&/code&&/pre&&/div&最后一步预载内容就是出现多个 surface div 的原因，Medium 做的优化，以方便快速地切换页面。&br&&br&附上 DOM 断点截图（含 post 对象和模板）：&br&&img src=&/39cf23f09dcba5c32ea8_b.jpg& data-rawwidth=&1222& data-rawheight=&1172& class=&origin_image zh-lightbox-thumb& width=&1222& data-original=&/39cf23f09dcba5c32ea8_r.jpg&&
Medium 用了三个和知乎同样在使用的 Closure 相关工具，不得不说在 Google 之外很少见：：提供定义和引用模块的方式，以及一些 UI 组件（比如编辑器，Medium 在此之上做成了无形的，真是引人注目）。：前端代码进行优化压缩…
来自子话题：
首先，搞明白||的意思。&br&
1、在js里面,||运算符，比如（A||B）有个很有意思的用处：&br&
2、系统先判断A表达式的布尔值，是真是假。如果为真，直接返回A。如果为假，直接返回B（不会判断B是什么类型）。&br& 所以，var a=a||{},这样写的意图就是，先考虑右侧的表达式 a||{}, 根据规则，先判断a的值是否为真（也就是判断a本身是否存在），如果a本身存在，则返回a。如果a不存在，则返回后面的{}。最后再将值返回给a。这样写，虽然看着比较复杂点，但是效率高，特别是判断一些变量，属性或者是传参是否存在，如果存在就直接用，不存在，就赋予一个空变量。相当于下面的简写：&br&
if（a）{&br&
else{&br& var a={}
//将一个空对象传给a&br&
首先，搞明白||的意思。 1、在js里面,||运算符，比如（A||B）有个很有意思的用处： 2、系统先判断A表达式的布尔值，是真是假。如果为真，直接返回A。如果为假，直接返回B（不会判断B是什么类型）。 所以，var a=a||{},这样写的意图就是，先考虑右侧的表达式…
Node最大的好处,其实不是技术层面的,我认为就是一点:能让前端开发人员把后端也一起做了.别小看这一点,这对于很多Startup的项目还是很有用的,可以快速人少的就把项目做起来.&br&&br&至于它里面提到的技术,什么事件驱动,回调之类的,在一个多年做服务器的人看来根本不算啥,老早就是这么做的了,看看lighty/nginx之类的,不知道为啥把这个做为宣传点,是欺负前端人员没啥服务器开发经验么?&br&&br&所以这个项目里面再次看到,技术很多时候不是最重要的,重要的是帮助人解决了什么问题.
Node最大的好处,其实不是技术层面的,我认为就是一点:能让前端开发人员把后端也一起做了.别小看这一点,这对于很多Startup的项目还是很有用的,可以快速人少的就把项目做起来.至于它里面提到的技术,什么事件驱动,回调之类的,在一个多年做服务器的人看来根本不…
来自子话题：
速度加快。Twitter在2012年开始重新采用服务器端生成页面，所需要时间（主要是time to first tweet，从输入网址到能发tweet的时间）减少到了原来ajax方式的1/5。在他们的技术博客上有专门的一篇文章介绍（如果没有被墙）：&blockquote&&a href=&/2012/improving-performance-on-twittercom& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Improving performance &i class=&icon-external&&&/i&&/a&&/blockquote&文章内容主要有这么几点：&br&1. JavaScript运行慢，如果用户的计算机比较旧，那就更慢了。&br&&blockquote&We discovered that the raw parsing and execution of JavaScript caused massive outliers in perceived rendering speed. In our fully client-side architecture, you don’t see anything until our JavaScript is downloaded and executed. The problem is further exacerbated if you do not have a high-specification machine or if you’re running an older browser. The bottom line is that a client-side architecture leads to slower performance because most of the code is being executed on our users’ machines rather than our own.&br&We took the execution of JavaScript completely out of our render path. By rendering our page content on the server and deferring all JavaScript execution until well after that content has been rendered, we’ve dropped the time to first Tweet to one-fifth of what it was.&/blockquote&2. 把JavaScript模块化，只载入需要的模块，越小越好。&br&&blockquote&We need to minimize the amount of JavaScript we use: smaller payload over the wire, fewer lines of code to parse, faster to execute. To make sure we only download the JavaScript necessary for the page to work, we needed to get a firm grip on our dependencies.&br&To do this, we opted to arrange all our code as CommonJS modules, delivered via AMD. This means that each piece of our code explicitly declares what it needs to execute which, firstly, is a win for developer productivity. When working on any one module, we can easily understand what dependencies it relies on, rather than the typical browser JavaScript situation in which code depends on an implicit load order and globally accessible properties.&/blockquote&另外有一篇专门探讨客户端vs服务器端生成页面的博客，&a href=&http://openmymind.net//Client-Side-vs-Server-Side-Rendering/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Client-Side vs. Server-Side Rendering&i class=&icon-external&&&/i&&/a&，同样赞成服务器端生成，论点是：&br&1. JavaScript需要两次http请求，下载并运行JavaScript，慢。&br&2. 开发人员不知道用户的计算机会是什么配置，甚至有可能是移动设备，运行JavaScript速度不理想。开发人员自己的开发用的计算机通常是高配置，运行前端JavaScript速度如飞，但并不能assume用户也是如此。&br&3. 虽然可以cache JSON，但是浏览器总是要花时间生成html。如果服务器端返回生成好的html，客户端直接显示就行。&br&4. 从带宽方面来看，似乎html比json大一些，返回json应该更快。但是服务器应该对json和html都进行压缩，差别不是很大。&br&&br&Bonus read: &a href=&/questions//separate-rest-json-api-server-and-client& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Separate REST JSON API server and client?&i class=&icon-external&&&/i&&/a&
速度加快。Twitter在2012年开始重新采用服务器端生成页面，所需要时间（主要是time to first tweet，从输入网址到能发tweet的时间）减少到了原来ajax方式的1/5。在他们的技术博客上有专门的一篇文章介绍（如果没有被墙）：
&a href=&http://asp.net& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&asp.net&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&分为基于页面（web form）和基于框架(&a href=&http://asp.net& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&asp.net&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a& mvc)两种,看你要学那种了。 &br&&b&web form &/b& &br& 小型网站用&a href=&http://asp.net& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&asp.net&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a& web form 拖拖拽拽就能搞定。你需要了解的东西并需要很多： &br& 1. c#（废话）， &br& 2. 数据库（用啥随你，最好sql server）。 &br& 基本就这些了，即使你不会web前端那一系列的东西（js,html,css）也没关系，微软都帮你封装的很好。 &br&&b&MVC&/b& &br& 大项目还是要使用MVC框架。除了上边说的两点，你还需要了解： &br& 后端 &br& 1.
&a href=&http://Asp.net& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&Asp.net&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a& mvc 。地位相当于java中的struts,php 中的zend。和其他mvc框架设计思想类似，但很强大。 &br& 2.
orm 框架。就是数据对象关系映射框架，推荐NHibernate 或 linq to sql 。 &br& 3.
依赖注入容器。你可以用&a href=&http://Spring.net& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&Spring.net&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a& 或 unity. &br& 前端 &br& 4.
HTML/CSS。基于框架，没有控件可用，所以前端代码比需自己写。另外，推荐&a href=&http://asp.net& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&asp.net&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a& mvc3中新加入的razor页面模板，比以前的asp风格的模板引擎要强大很多 &br& 5.
js 。 页面都自己写了，js显然少不了。这里推荐使用jQuery框架 &br& 6
ajax。现在网站开发离不开这个。 &br& 如果出于学习的目的，推荐以上这些东西都学，从前端到后端，9个月前我就是这样做的。如果是项目需要，时间紧，还是弄两拨人把前端后端分开学吧。 &br& 关于学习顺序，后端你就把那几块都熟悉一下，然后自己做几个练习性的项目就行了。 &br& 前端的东西，可以参考知呼上其他问题的答案，很多的。
分为基于页面（web form）和基于框架( mvc)两种,看你要学那种了。 web form
小型网站用 web form 拖拖拽拽就能搞定。你需要了解的东西并需要很多： 1. c#（废话）， 2. 数据库（用啥随你，最…
&img src=&/75bb47ce9a1faf4c4df8404df45bbcc5_b.jpg& data-rawwidth=&1275& data-rawheight=&2561& class=&origin_image zh-lightbox-thumb& width=&1275& data-original=&/75bb47ce9a1faf4c4df8404df45bbcc5_r.jpg&&
来自子话题：
身为一个设计师，算了，身为一个美工，还是算了，身为一个切图工、身为一个码农。哎呀，无所谓了，爱怎么叫怎么叫吧。我来回答这个问题，水平有限，抛砖引玉。&br&&br&
前端开发和网页制作不是一个职位，他们是包含与被包含的关系，即前端开发包含网页制作。一般意义上的网页制作可以分为两部分，即网页设计和网页排版，仅从技术上来说，学会两个软件就够了，Photoshop和Dreamweaver。前者负责设计效果图和切图即网页设计，后者负责编写html代码以及css样式表文件，也就网页排版，将切割后的图重新按照效果图的样子摆放在网页对应的位置上。&br&&br&当然设计你也可以用Illustrator，切图用Fireworks,或者混搭用，作为效果图的一部分，可能需要重绘logo或者用到矢量的素材，这时候你便需要打开Ai进行编辑，然后导入到Ps里面，并最终完成效果图。因为我比较喜欢用Fireworks切图，所以常常用Ps作图后，再导入到Fireworks里面。&br&&br&此外，Flash也是需要掌握的，虽然随着html5以及css3.0的推出，以及强大的JavaScript，大部分动画效果（比如知乎登陆页面旋转的地球）不用Flash就可以实现，Flash在网页设计中的地位开始边缘化，但是偶尔还是需要用到的。我参与的上一个项目，对方要求绘制一张山东地图，点击任意地市可以跳转到该地市的所在页面，我当时就用了差不多一天的时间用Ai绘制了地图然后倒入到Flash做成了动画，增加了动态效果还有音效。结果被大赞，高兴了好几天。&br&&br&以上都还包含在设计的范畴里，换句话说，这才是真正属于美工干的活。&br&&br&接下来便是网页排版了。网页排版更接近于开发。如果你的手写代码的能力比较强，下面的工作只用一个记事本或者类似的文本编辑器就足够了。当然用专业的网页制作工具会更方便一些，里面的一些工作组件以及代码自动提示会节省很多写代码的时间。写代码的时候要兼顾很多方面，首先要遵循web标准，注意Div的嵌套层次顺序，以及兼容各大主流浏览器。有时候对方苛刻，要求兼容IE6，你还得针对ie6写一些css hack，有句话说，ie6就像女朋友，你总是不知道她生气的原因。这也是很头疼的问题。&br&&br&&br&&img data-rawheight=&696& data-rawwidth=&1136& src=&/d96bcca74b4d4a010c3b_b.jpg& class=&origin_image zh-lightbox-thumb& width=&1136& data-original=&/d96bcca74b4d4a010c3b_r.jpg&&这里一张前端工程师的工作内容和职责，便从另一个角度详细阐明了前端开发到底都包括哪些内容。&br&&br&显然一个好的前端开发人员是连通和设计和代码之间的一个桥梁。既要有理工的严谨又要有文艺的情怀。既要懂得交互设计，提高用户体验，又要具有美术基础和审美能力，而在此基础之上，还要对已完成的页面进行维护和以及网站前端性能做相应的优化。而网页制作只是这整个前端开发过程的一个组成部分，所以真正的前端开发人员是一个很厉害的角色，没事不要惹他，尤其是她。
身为一个设计师，算了，身为一个美工，还是算了，身为一个切图工、身为一个码农。哎呀，无所谓了，爱怎么叫怎么叫吧。我来回答这个问题，水平有限，抛砖引玉。 前端开发和网页制作不是一个职位，他们是包含与被包含的关系，即前端开发包含网页制作。一般意…
预备知识：简单的html（即使你用各种开源程序来做，还是要进行一些必要的修改和美化的，所以html必不可少，而且这个东西简单，可以一边做一边百度之）&br&需要的软件：dreamweaver（对代码进行简单修改）、ftp上传软件&br&&br&步骤：&br&1.购买域名，.&a href=&http://com.org.net& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&com.org.net&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&都行&br&2.购买主机，买香港的，免备案，海外的速度上可能不太好。你说要交互，应该用到动态语言，买PHP主机。推荐华域讯通的，我的博客用的就是这个。&a href=&/aff.php?source=& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://www.&/span&&span class=&visible&&/aff.php?&/span&&span class=&invisible&&source=&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&br&3.将域名解析到你的主机&br&4.上传网站程序（博客类推荐wordpress、论坛推荐discuz、CMS推荐织梦、帝国、其他还有很多程序，如贴吧、小组、商城等）看你的要求，wordpress应该就可以满足了&br&5.修改下程序代码的一些基础信息，如网站名称、关键字、描述、底部信息等&br&&br&暂时能想到的就这些。&br&重要的是：你不要害怕，大胆尝试，好好利用搜索引擎，没有基础也可以做。我的第一个网站就是高考毕业后闲着没事儿用了一天多建起来的，而且不是用现成的程序，都是手写的代码，不过都是html，哈哈~&br&加油！
预备知识：简单的html（即使你用各种开源程序来做，还是要进行一些必要的修改和美化的，所以html必不可少，而且这个东西简单，可以一边做一边百度之）需要的软件：dreamweaver（对代码进行简单修改）、ftp上传软件步骤：1.购买域名，.…
团队习惯&br&&br&- 是连字符，从语义上，感觉更符合 css 中 class 的命名含义（组合式）
团队习惯- 是连字符，从语义上，感觉更符合 css 中 class 的命名含义（组合式）
来自子话题：
关于设计者的问题&a class=&member_mention& data-hash=&6eae4a702f9e7c106c34& href=&/people/6eae4a702f9e7c106c34& data-tip=&p$b$6eae4a702f9e7c106c34&&@刘炜&/a& 已经答了，那我来说说网页的变化吧。&br&&br&&blockquote&&strong&&u&回到未来：苹果官网的15年&/u&&/strong&&br&&br&在短短的十五年里，苹果的变化翻天覆地。从一个濒临破产步履蹒跚的公司，转变成为了一个当今世界上，科技公司中的巨人，重新定义了人们对科技的认知。&br&&br&既然苹果公司经历了如此巨大的变化，你会认为他们的官网&a href=&http://www.jbguide.me//back-to-the-future/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&&i class=&icon-external&&&/i&&/a&一定也会随之而发生改变。但事实却不然，为什么呢？&br&回顾苹果历史的十五年，对于苹果来说，他们的网站，就像他们的iPhone和iPod一样，也是他们的一个产品。当苹果想要做一个新产品的时候，它们会先设想这个产品最理想的形态，然后无穷地在一个成功的基础上修改，创新，直到无限接近完美。&br&&br&苹果官网也是如此，下面让我们回顾一下这15年来，苹果官网的进化：&br&&br&&strong&革命前：年 &br&&/strong&在1996年，与其他90年代中期的公司的网站相比，苹果的网站看起来还算正派。它遵循了当时的网站设计潮流，将网页设计得更像一封电子邮件。有一个导航边栏，然后几个大块的信息窗口，目的在于向人们介绍Mac。&img src=&/0e082c869a6cf116696faa_b.jpg& data-rawheight=&541& data-rawwidth=&640& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/0e082c869a6cf116696faa_r.jpg&&&br&&strong&在Mac中找到自我：1998年的重塑&img src=&/cc9c652a3f137e634e6409dd1eca57bd_b.jpg& data-rawheight=&420& data-rawwidth=&640& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/cc9c652a3f137e634e6409dd1eca57bd_r.jpg&&&/strong&当乔布斯在1998年发布iMac的时候，苹果的网站也获得了更新，因为这是必须的。&br&当iMac中的’i'代表了网络时，苹果的网站理所应当地要更新，因为苹果是一家在各个科技前沿不断创新的公司，网站自然要跟上步伐。为了做到这一点，苹果需要将原先的以信息为主的网站改版，网页需要变得像一个产品，因为Internet Mac不只是徒有虚名。&br&&br&1998年苹果官网的改版，对苹果来说是非常重要的，因为这次改版为苹果今后十五年内网页的大致框架和结构奠定了基础，这个结构在这段期间内有过细微的修改，但是整体的设计从未改变过。全新的iMac上有着第一代iMac的身影，而现在的苹果官网则有着1998年重生后网页的身影。&br&&br&&strong&每一根线条，都有他的含义：苹果网站的公式&/strong&&img src=&/285bba55a2c0d08cfadc_b.jpg& data-rawheight=&555& data-rawwidth=&640& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/285bba55a2c0d08cfadc_r.jpg&&苹果的每一个新产品，他们都会找到他们认为最能代表这个产品核心含义的形态，然后再在这个点上进行提炼，直到最纯净的结果被展现出来。iPhone，iPod，iPad和MacBook尽管经过多年的更新换代，但是都保留了最初代上最精华的元素，但苹果从未停止在这些产品上的更新，添加新功能，新技术，新的制造工艺，并将陈旧的东西去除。&br&苹果官网也如此。在1998年，苹果官网改版后使用的四大元素，沿用至今。&br&&ol&&li&&strong&大盒子&/strong& －屏幕上最大的一块板块，用来推广他们最新的产品，给予新产品舞台最中央的效果。 &/li&&li&&strong&热闻&/strong& – 不同于其他的设计，新闻没有占据整个页面，而是一个小方块，为了不去争夺新产品的地位。 &/li&&li&&strong&小号产品推广方块&/strong& – 用来推广苹果其他的次要产品。 &/li&&li&&strong&导航栏&/strong&&/li&&/ol&&br&多年来，苹果不断完善自己的网页设计，将功能性与美学结合。&br&&br&细想以下这些改变：&img src=&/d34eb109ab68e97e263da85_b.jpg& data-rawheight=&573& data-rawwidth=&640& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/d34eb109ab68e97e263da85_r.jpg&&导航栏被移动到页面顶端&img src=&/32f09dce0f4c9def8dcb414e26ab11da_b.jpg& data-rawheight=&549& data-rawwidth=&640& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/32f09dce0f4c9def8dcb414e26ab11da_r.jpg&&导航栏与热闻在2001年被赋予苹果Aqua（水）元素的效果。&img src=&/636c9b0c1af01a6c09bdd516e55d7ac1_b.jpg& data-rawheight=&527& data-rawwidth=&640& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/636c9b0c1af01a6c09bdd516e55d7ac1_r.jpg&&尽管有些变化，但是2013年的苹果主页，依然保留了这四个元素。&br&&br&&br&&strong&完善这个公式&/strong&&br&尽管苹果公司将他们的网站看待成一个产品，但同时它还是一个服务，任务是推广其他的产品。从1998年，苹果官网主页被用来推广自己的产品，但是苹果通过网页的推广方式在不断地改变。&br&&br&我们下面来深入得看一看苹果是如何通过这四大元素去推广其产品的，看看苹果是如何完善自己的四大元素的。&br&&br&&strong&大盒子 &br&&/strong&当苹果在1998年重新设计官网时，中间的大盒子占据了几乎一半的页面。随着时间的变迁，这个大盒子只增不减，为了来容纳苹果无限重要的新产品。&img src=&/f2f83c07fed85f67ce12e_b.jpg& data-rawheight=&634& data-rawwidth=&640& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/f2f83c07fed85f67ce12e_r.jpg&&在将导航栏放置顶端后，苹果再次扩大了大盒子的体积&img src=&/41c2a82967ceea27b38c2de_b.jpg& data-rawheight=&529& data-rawwidth=&640& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/41c2a82967ceea27b38c2de_r.jpg&&2007年用来推广Leopard的大盒子&img src=&/7edeb9ca9b617cf2a63c4cc2765de0df_b.jpg& data-rawheight=&528& data-rawwidth=&640& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/7edeb9ca9b617cf2a63c4cc2765de0df_r.jpg&&为了iPhone 4S，这个盒子的体积再一次扩大&br&&br&&br&&strong&热闻&/strong&&br&在苹果1998年改版网页之前，他们的主页是被新闻所覆盖的。你仍然可以在主页找到这些新闻，但是在这15年间，热闻的重要性被砍之又砍。它从原先的高度可见，到现在与其他链接齐名。为什么？可能因为过去为了看苹果的新闻，你是必须要去苹果的网站的，但是现在，像我们的网站，似乎把苹果的新闻覆盖得非常好。&img src=&/fc678cf86f430fdb3cc22f_b.jpg& data-rawheight=&534& data-rawwidth=&640& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/fc678cf86f430fdb3cc22f_r.jpg&&苹果在2000年将热闻栏的样式修改得与导航栏一致。&img src=&/d575c452b533fc_b.jpg& data-rawheight=&587& data-rawwidth=&640& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/d575c452b533fc_r.jpg&&热闻栏变得更小&img src=&/07540d34eaadafc16f6f0c031b656888_b.jpg& data-rawheight=&546& data-rawwidth=&640& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/07540d34eaadafc16f6f0c031b656888_r.jpg&&2006年，苹果开始将热闻与背景融合。&img src=&/da54e48ffa2dc20e26daa58b41d4cc46_b.jpg& data-rawheight=&531& data-rawwidth=&640& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/da54e48ffa2dc20e26daa58b41d4cc46_r.jpg&&到2008年，你几乎就看不到热闻栏了。&br&&br&&strong&小号产品推广方块 &/strong&&br&这些小号的推广方块常年被用来推广苹果的其他产品与活动，但是这些东西的样式有着变化。他们从曾经的大分割栏目变成了现在的按钮形态。&img src=&/8a00fe75e699fdf31bb80c3eabd4443b_b.jpg& data-rawheight=&554& data-rawwidth=&640& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/8a00fe75e699fdf31bb80c3eabd4443b_r.jpg&&2000年的时候，这些方块都有明显的外框。&img src=&/f8de4bb71afc2c4976885b_b.jpg& data-rawheight=&513& data-rawwidth=&640& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/f8de4bb71afc2c4976885b_r.jpg&&2007年，苹果为这些方块添加了灰度渐变效果，让他们更突出。&img src=&/4a612e53edff_b.jpg& data-rawheight=&577& data-rawwidth=&640& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/4a612e53edff_r.jpg&&2012年，添加了一些阴影，让这些按钮更显得独立。&br&&br&&strong&导航栏 &br&&/strong&在1998年的重新改版中，导航栏原本被放置于页面下半部分。在2000年，苹果将导航栏放置顶端。从2000年到2002年，苹果改动了几次苹果标志的颜色，然后在2007年，定板并沿用至今。&br&&img src=&/596dc4c24218cdc7c2d05b8ab996cf56_b.jpg& data-rawheight=&524& data-rawwidth=&640& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/596dc4c24218cdc7c2d05b8ab996cf56_r.jpg&&导航栏在2000年被挪到顶端。&img src=&/ef894b0bd440fcc9b58d83_b.jpg& data-rawheight=&404& data-rawwidth=&640& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/ef894b0bd440fcc9b58d83_r.jpg&&2001年苹果使用了蓝色的图标，iReview按钮被Mac OS X所替代。&img src=&/e6ed580ef3cf354c286af6_b.jpg& data-rawheight=&445& data-rawwidth=&640& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/e6ed580ef3cf354c286af6_r.jpg&&在2002年，苹果将图标改变为灰色，然后首次放出了Mac按钮。&img src=&/02b78d2b38d5e5a36def27_b.jpg& data-rawheight=&397& data-rawwidth=&640& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/02b78d2b38d5e5a36def27_r.jpg&&导航栏被改为一个固态的横栏，然后标上了苹果不同产品线的按钮。&br&&br&&strong&总结 &br&&/strong&尽管苹果不是一个网络公司，他们过去15年来的网络战略却非同凡响。自从乔布斯回归，一个全新的网络产品诞生，一直沿用下来。苹果多年来在网页上进行小的修改，就像他们在iMac上进行小的修改，但是大体的形态保持不变，改进的只有功能。&br&&br&通过使用与硬件一样的策略，苹果将网页打造成了一个与用户进行沟通的桥梁，但在这同时却不失连贯性。所以，不同于计划性的大改变，苹果对网站的小改变正是苹果的理念。&/blockquote&&br&文章来自：&a href=&/211047/back-to-the-future-15-years-of-apple-web-design-seen-through-a-time-machine-feature/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&CultofMac&i class=&icon-external&&&/i&&/a&&br&翻译：&a href=&/jinwuhan& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&@米斯特苹果&i class=&icon-external&&&/i&&/a&
关于设计者的问题 已经答了，那我来说说网页的变化吧。回到未来：苹果官网的15年在短短的十五年里，苹果的变化翻天覆地。从一个濒临破产步履蹒跚的公司，转变成为了一个当今世界上，科技公司中的巨人，重新定义了人们对科技的认知。既然苹果公司经历了…
来自子话题：
这是一个错误的设计，因为没有搜索的话基本不可用。
这是一个错误的设计，因为没有搜索的话基本不可用。
来自子话题：
作为从业 5 年的你，好像没把什么是设计搞明白，反而犯了设计师的通病往艺术上靠拢了。&br&&br&&blockquote&何为设计？&blockquote&&b&所谓设计，即「设想和计划，设想是目的，计划是实施安排」，通常指有目标和计划的创作行为、活动，在艺术、建筑、工程及产品开发等领域起着重要的作用。&/b&&br&&b&最简单的关于设计的定义，就是一种「有目的的创作行为」。 同时设计的过程是要经历情报的收集及分析，再将不同的情报筑起一件作品。故设计又可以叫作「情报的建筑」。&/b&&/blockquote&何为艺术？&blockquote&&b&艺术，直到今天没有公认定义，广义上指通过各种形式或工具借以表达其情感与意识型态，所产生其型态泛称之为艺术。&/b&&br&&b&所谓 8 大艺术分类包括：文学、绘画、音乐、舞蹈、雕塑、建筑 &/b&&b&[1]&/b&&b&、戏剧和电影。&/b&&br&&b&[1] Architecture / 建筑：并不指具体的构造物（如建筑物），而是重在指创造建造物的行为（过程、技术）等。&/b&&/blockquote&&b&&blockquote&Building / 建筑物：通常形容具体建造物。&/blockquote&&/b&&/blockquote&&a href=&/question//answer/& class=&internal&&为什么设计师不是艺术家？&/a&&br&&br&设计有技术/技巧的成分，这里指的专业知识、知识阅历的积累、客户沟通的技巧等。设计本身是服务的一类，利用自己的专业知识为委托方服务，从而实现价值输出，是一种常见的交易。是和商业紧密结合的，脱离了商业的「设计」已不是设计，而向艺术靠拢。&br&&br&如果向艺术转型，那「使消费者看到自己的作品就有想买的欲望，让消费者过目不忘，达到我们的营销目标。」就冲突了。&br&&br&让自己的劳动成果（我不太喜欢称设计成果为作品）勾起消费的欲望，这需要深入了解甲方的诉求，分析对方委托的产品特点，消费者以及竞争对手的产品，通过引导激发更多的想法，这个过程是典型的设计。其中涉及到调研、分析、设计、文案、推广等重要环节，设计在其中起到承上启下的作用。因为团队努力的成果在面向市场时，消费者对于画面感是最直观和敏感的，抓人眼球又能准确表达就能让消费者过目不忘，让目标客户人群投其所好，再加上有额外的惊喜或感动，就能勾起购买欲。从而也达到了甲方的意愿，作为乙方的你们得到了双方的认可，这笔生意就算成功了。&br&&br&设计就是这么一个过程，如果是艺术品只要有名气，爱怎么创作怎么创作，完事自有人竞相购入。虽然也涉及到投其所好，但买方都是仰视的目光看艺术家，即使是投资者也要奉承几句。
作为从业 5 年的你，好像没把什么是设计搞明白，反而犯了设计师的通病往艺术上靠拢了。何为设计？所谓设计，即「设想和计划，设想是目的，计划是实施安排」，通常指有目标和计划的创作行为、活动，在艺术、建筑、工程及产品开发等领域起着重要的作用。最简…
从小到大，数不清了，和同学爬山，被算命的一句你面相很好诱惑到小黑屋，让我金盆洗手什么的洗一次手要我50块；大学时候在哈尔滨车站等车有一女孩和我聊得火热，后来让我看包她去厕所，一会出来我让她看包，我出来她人就没了；还有大学时候班长给我打电话说他把某大厦玻璃打坏了，那边保安让他赔钱他没有钱所以需要找个担保人，他说觉得班级我最善良求问我帮忙，我同意了才知道他和播音主持那帮人在打赌说我是中文系最易受骗的人他们真的太无聊了我靠。&br&&br&
不过对于被骗我有我的想法，被骗并不可悲，可悲的是被骗之后，不敢相信别人不敢相信自己，甚至不敢相信“相信”这两个字，小时候看书，说成年人最可悲之处就是，将手紧紧攥成拳头，伸出去，既不能给出自己，也无法接住别人的心意。
从小到大，数不清了，和同学爬山，被算命的一句你面相很好诱惑到小黑屋，让我金盆洗手什么的洗一次手要我50块；大学时候在哈尔滨车站等车有一女孩和我聊得火热，后来让我看包她去厕所，一会出来我让她看包，我出来她人就没了；还有大学时候班长给我打电话说…