前端,改变
               Front-end makes change




12年8月10⽇日星期五
I. 前端
                ‣ 前端的定义由来
                ‣ 前端的发展及现状

               II.改变
                ‣ 前端改变互联⺴⽹网的⽅方式
                ‣ 前端与产品设计



12年8月10⽇日星期五
I. 前端
                ‣ 前端的定义由来
                ‣ 前端的发展及现状

               II.改变
                ‣ 前端改变互联⺴⽹网的⽅方式
                ‣ 前端与产品设计



12年8月10⽇日星期五
前端   攻城湿   的定义?




12年8月10⽇日星期五
普通⼈人眼中的前端   攻城湿




12年8月10⽇日星期五
普通⼈人眼中的前端          攻城湿


                                   CSS


                切图仔
                             样式
                      HTML
               标签
                      脚本     搞技术的



12年8月10⽇日星期五
普通⼈人眼中的前端          攻城湿


               美⼯工!!!              CSS


                切图仔
                             样式
                      HTML
               标签
                      脚本     搞技术的



12年8月10⽇日星期五
前端⼈人眼中的前端   攻城湿




12年8月10⽇日星期五
前端⼈人眼中的前端       攻城湿
               ‣ ⾼高⼤大威猛




12年8月10⽇日星期五
前端⼈人眼中的前端       攻城湿
               ‣ ⾼高⼤大威猛
               ‣ 技术⽆无敌




12年8月10⽇日星期五
前端⼈人眼中的前端       攻城湿
               ‣ ⾼高⼤大威猛
               ‣ 技术⽆无敌
               ‣ 不会设计的前端⼯工程师不是好产品经理




12年8月10⽇日星期五
前端⼈人眼中的前端       攻城湿
               ‣ ⾼高⼤大威猛
               ‣ 技术⽆无敌
               ‣ 不会设计的前端⼯工程师不是好产品经理
               ‣ 屌丝




12年8月10⽇日星期五
前端⼈人眼中的前端       攻城湿
               ‣ ⾼高⼤大威猛
               ‣ 技术⽆无敌
               ‣ 不会设计的前端⼯工程师不是好产品经理
               ‣ 屌丝
               ‣ ...




12年8月10⽇日星期五
好友、家⼈人眼中的前端   攻城湿




12年8月10⽇日星期五
好友、家⼈人眼中的前端   攻城湿




12年8月10⽇日星期五
好友、家⼈人眼中的前端   攻城湿




                          ...


12年8月10⽇日星期五
百科中的前端   攻城湿   的定义




12年8月10⽇日星期五
百科中的前端                 攻城湿          的定义

                  Web前端开发⼯工程师,主要职责是利⽤用(X)HTML/CSS/JavaScript/DOM/
               Flash等各种Web技术进⾏行产品的界⾯面开发。制作标准优化的代码,并增加
               交互动态功能,开发JavaScript以及Flash模块,同时结合后台开发技术模拟
               整体效果,进⾏行丰富互联⺴⽹网的Web开发,致⼒力于通过技术改善⽤用户体验。
               —— 来⾃自-百度百科




12年8月10⽇日星期五
我喜欢的前端定义




12年8月10⽇日星期五
我喜欢的前端定义


                前端是⼀一种介于程序和设计之间的契合,拥有程序严谨逻辑的同时也存
               在设计的感性,前端是设计师的代码实现更是⼀一⻔门艺术。




12年8月10⽇日星期五
我喜欢的前端定义


                前端是⼀一种介于程序和设计之间的契合,拥有程序严谨逻辑的同时也存
               在设计的感性,前端是设计师的代码实现更是⼀一⻔门艺术。




                                             by kily




12年8月10⽇日星期五
I. 前端
                ‣ 前端的定义由来
                ‣ 前端的发展及现状

               II.改变
                ‣ 前端改变互联⺴⽹网的⽅方式
                ‣ 前端与产品设计



12年8月10⽇日星期五
前端的发展
               此段内容可能存在异议




12年8月10⽇日星期五
⼏几个早期前端领域代表性⺴⽹网站




12年8月10⽇日星期五
12年8月10⽇日星期五
⺴⽹网⻚页设计师   :
           国内最早宣传 web 标准、⺴⽹网站重构及 xHtml
        + css 的⺴⽹网站




12年8月10⽇日星期五
⺴⽹网⻚页设计师   :
           国内最早宣传 web 标准、⺴⽹网站重构及 xHtml
        + css 的⺴⽹网站




12年8月10⽇日星期五
12年8月10⽇日星期五
蓝⾊色理想   :
          ⺴⽹网站建设相关的热⻔门技术与前端话题,虽然
        ⾃自⼰己的⺴⽹网站⼀一团糟,但是很多前端⼯工程师的第
        ⼀一次都给了这个⺴⽹网站




12年8月10⽇日星期五
蓝⾊色理想   :
          ⺴⽹网站建设相关的热⻔门技术与前端话题,虽然
        ⾃自⼰己的⺴⽹网站⼀一团糟,但是很多前端⼯工程师的第
        ⼀一次都给了这个⺴⽹网站




12年8月10⽇日星期五
12年8月10⽇日星期五
CSS Zen Garden   :
         The Beauty in CSS Design —— CSS 设计之
        美,所有收录的作品都有⼀一份唯⼀一的 HTML,
        区别仅在于 CSS 样式的设计,在这个⺴⽹网站你能
        了解 CSS 的强⼤大之处




12年8月10⽇日星期五
CSS Zen Garden   :
         The Beauty in CSS Design —— CSS 设计之
        美,所有收录的作品都有⼀一份唯⼀一的 HTML,
        区别仅在于 CSS 样式的设计,在这个⺴⽹网站你能
        了解 CSS 的强⼤大之处




12年8月10⽇日星期五
两个将前端技术发挥到极致的公司




12年8月10⽇日星期五
12年8月10⽇日星期五
Google
          前端之于 google,有⼀一种说法:是google
        map 中的 Ajax 拯救了JavaScript,将互联⺴⽹网产品
        ⽤用户体验提升到另⼀一个⾼高度。说法略微偏颇但
        代表性




12年8月10⽇日星期五
Google
          前端之于 google,有⼀一种说法:是google
        map 中的 Ajax 拯救了JavaScript,将互联⺴⽹网产品
        ⽤用户体验提升到另⼀一个⾼高度。说法略微偏颇但
        代表性

        代表性产品:
        Google Map, Gmail, Google Plus...



12年8月10⽇日星期五
12年8月10⽇日星期五
Yahoo
         Yahoo 的前端技术在全世界都是数⼀一数⼆二
        的,表现在 YUI ( Yahoo User Interface ) 团队将
        前端技术应⽤用到极致的同时不忘分享与布道




12年8月10⽇日星期五
Yahoo
         Yahoo 的前端技术在全世界都是数⼀一数⼆二
        的,表现在 YUI ( Yahoo User Interface ) 团队将
        前端技术应⽤用到极致的同时不忘分享与布道


        代表性产品:
        YUI JavaScript Framework, yahoo.com...



12年8月10⽇日星期五
⺴⽹网易与yahoo的对⽐比




12年8月10⽇日星期五
⺴⽹网易与yahoo的对⽐比




12年8月10⽇日星期五
⺴⽹网易与yahoo的对⽐比




12年8月10⽇日星期五
⺴⽹网易与yahoo的对⽐比




12年8月10⽇日星期五
那么  呢?




12年8月10⽇日星期五
那么  呢?

               Safari 浏览器




12年8月10⽇日星期五
那么  呢?

               Safari 浏览器
               Steve Jobs 在 wwdc 2010 对 HTML 5 的介绍




12年8月10⽇日星期五
那么  呢?

               Safari 浏览器
               Steve Jobs 在 wwdc 2010 对 HTML 5 的介绍




12年8月10⽇日星期五
I. 前端
                ‣ 前端的定义由来
                ‣ 前端的发展及现状

               II.改变
                ‣ 前端改变互联⺴⽹网的⽅方式
                ‣ 前端与产品设计



12年8月10⽇日星期五
关于改变




12年8月10⽇日星期五
关于改变
               当你对现状不满时 —— 要么离开、要么改变...




12年8月10⽇日星期五
I. 前端
                ‣ 前端的定义由来
                ‣ 前端的发展及现状

               II.改变
                ‣ 前端改变互联⺴⽹网的⽅方式
                ‣ 前端与产品设计



12年8月10⽇日星期五
前端改变互联⺴⽹网的⽅方式




12年8月10⽇日星期五
前端改变互联⺴⽹网的⽅方式

          前端做为⼀一种虚拟的技术,改变互联⺴⽹网的⽅方式并不像某种实际存在的产品如浏览
          器、⼿手机等来得直接。

          ⽽而且想要改变互联⺴⽹网只有前端显然是不可能的,往往是以某个优秀的互联⺴⽹网产品
          为基础,结合设计、交互、⽤用户研究。




12年8月10⽇日星期五
I. 前端
                ‣ 前端的定义由来
                ‣ 前端的发展及现状

               II.改变
                ‣ 前端改变互联⺴⽹网的⽅方式
                ‣ 前端与产品设计



12年8月10⽇日星期五
哪些产品改变了互联⺴⽹网?




12年8月10⽇日星期五
哪些产品改变了互联⺴⽹网?

          Google Map:
            当你想要旅游远⾏行的时候 Google Map 才是
          真正的不⼆二之选



                     VS




12年8月10⽇日星期五
哪些产品改变了互联⺴⽹网?




12年8月10⽇日星期五
哪些产品改变了互联⺴⽹网?

          Twitter:
            以新浪微博为例,有的时候她改变的是⼤大家
          对事件、⼈人物的看法,以⼀一种更加客观的⾓角度
          思考问题。




12年8月10⽇日星期五
哪些产品改变了互联⺴⽹网?

          Twitter:
            以新浪微博为例,有的时候她改变的是⼤大家
          对事件、⼈人物的看法,以⼀一种更加客观的⾓角度
          思考问题。


           ⽐比如:通过微博我们知道了周末的那场⼤大⾬雨是
           61年难遇的,eh~去年那场好像是10年难遇...




12年8月10⽇日星期五
从互联⺴⽹网产品看⼥女⼈人




12年8月10⽇日星期五
从互联⺴⽹网产品看⼥女⼈人
     上Qzone和⼈人⼈人开⼼心的⼥女⼈人:
     要么是纯情少⼥女,要么是⻛风流⼤大妈;

     上⾖豆瓣和新浪围脖的⼥女⼈人:
     要么是⼩小资⼥女⽂文⻘青明星,要么是流氓宅腐⼥女;

     上Twitter或Facebook的⼥女⼈人:
     要么是⾃自由民主控,要么就是时尚⼥女魔头。

     这些⺴⽹网站全上的,想都不⽤用想,她⼀一定是个搞IT的

                                 ——来⾃自⺴⽹网络



12年8月10⽇日星期五
哪些产品改变了互联⺴⽹网?

          Mozilla Firefox:
           ⾃自由开源的 Mozilla 组织,⽀支持他们做出好产
          品的资本来⾃自 Mozilla 基⾦金,不以盈利为⺫⽬目的
          的好公司,开源与贡献的精髓




12年8月10⽇日星期五
哪些产品改变了互联⺴⽹网?

          Mozilla Firefox:
           ⾃自由开源的 Mozilla 组织,⽀支持他们做出好产
          品的资本来⾃自 Mozilla 基⾦金,不以盈利为⺫⽬目的
          的好公司,开源与贡献的精髓




12年8月10⽇日星期五
没有前端这⼀一切似乎没那么完美




12年8月10⽇日星期五
没有前端这⼀一切似乎没那么完美



        互联⺴⽹网的⼀一次次变⾰革不就是你们这群 苦逼 设
        计、屌丝 前端、⼆二货 交互、和肘⼦子 ⽤用研 造就
        出来的么...




12年8月10⽇日星期五
没有前端这⼀一切似乎没那么完美




12年8月10⽇日星期五
没有前端这⼀一切似乎没那么完美




        我们应该感到庆幸 —— 因为我们在⽤用⾃自⼰己的
        双⼿手改变互联⺴⽹网,改变世界...




12年8月10⽇日星期五
结束
                END




12年8月10⽇日星期五
@ keelii




12年8月10⽇日星期五

Front-end makes change