过WEB/             户   验User Experience    Changes Through  Frontend            /   Web                  ion               ...
创shanda innovation              陈              Bobby Chen
Bobby Chen                   Shanghai                                          Taiwan    South Africa                     ...
Name      :        (Bobby)Job       :Hobbies   : Technology, Movie, Pub, Music etc...Website   : caspercby.me
htt   p:/      /ca         sp           erc               .              by                 me
UI /
发
过WEB/             户   验User Experience    Changes Through  Frontend            /   Web                  ion               ...
Frontend Engineer前端工程师
Designer VS Developer
1.   code       东 ,              2.             术     设计         样                这    产                      师...        ...
Frontend EngineerCharacteristic
FrontendEngineerCharacteristicArtistic / Perfectionist艺术感 / 追求完美
Technologist                    爱    术     is t icA r t        术    艺        Frontend Engineer        Characteristic
FrontendEngineerCharacteristicCommunication善于沟通
Wh at Do       teers Do?  Fron         ow-h ow)     (Kn
F2E Know-howHTML / PHP    CSS Javascript   Ajax
F2E Know-How
Coding Language
Security
Development Tool
JS Framework / Library
Performance
Browser Capabilities
Browser Capabilities
Browser Capabilities
Others
F2E Know-How
Fronteers Tell Browsers / Devices What To Do!在不同 浏览器 / 终端 实现效果
SIMPLE   ACCESSIBLE   USEFUL	   简单、可用、无障碍
Fronteers Makes The Web Happier Place让互联网环境更美好
Internet Evolution互联网发展
WEB          API          MOBILE?Internet Evolution - Stone Age互联网发展
API         WEB         MOBILEInternet Evolution - Iron Age互联网发展
API       MOBILE           WEBInternet Evolution - Modern Age互联网发展
Development Process (Waterfall)开发模式      PM                UED                         FE                              SDE...
Development Process (Waterfall)开发模式                     FE   PM      UED       FE      SDE   QA
Development Process (Agile)开发模式                      UED            PM        Agile    FE                           发     ...
1990 - 2011http://evolutionofweb.appspot.com/
Internet Evolution  2007 Mobile
Internet Evolution      1992
Internet Evolution      1996
Internet Evolution      2002
Internet Evolution2006 - 2007 Web 2.0
Internet Evolution      Flash
Internet Evolution  2007 (iPhone)
Internet EvolutionTechnology Changed Our Life
Internet Evolution      2009
Internet Evolution   Mobile APP
Internet EvolutionMobile APP Pattern
Internet Evolution   2010 - 2011
Internet Evolution     HTML 5
Internet Evolution  HTML 5 Audio
Internet Evolutioncreative director Scott Jenson                                       2011
Internet Evolution  Mobile Web
Internet Evolution Templates (        )       Modules (    块)                WidgetsServices (    务)                   App...
Internet Evolution                 HTML(5)                              CSS(3)           - Semantic Markup (语义   标签)      ...
Internet Evolution              Traditional             Mobile                  评   : 80+             评   : 90+           ...
Mobile/Web/   Web                              Native App                                    Mobile Web                   ...
ResponsiveWebDesign            应    页设计
Responsive Web Design响应式网页设计
Responsive Web Design响应式网页设计
Responsive Web Design响应式网页设计
Responsive Web Design响应式网页设计
htt         p:/            /ca               sp                 erc                     .                    by           ...
REFERENCE / CREDITShttp://www.themechrome.net/Images/Original/aaa.jpghttp://activatedrinks.com/#/presshttp://www.webmedia-...
HiUED 前端/web 發展和體驗
HiUED 前端/web 發展和體驗
Upcoming SlideShare
Loading in …5
×

HiUED 前端/web 發展和體驗

2,526 views

Published on

CREDITS / REFERENCE:
===================

http://www.themechrome.net/Images/Original/aaa.jpg
http://activatedrinks.com/#/press
http://www.webmedia-solutions.com/web-development-blog/wp-content/uploads/2009/01/web-2-0-logos.gif
http://yiku.co/wp-content/uploads/2011/01/67bf1bb2g94361366956f690.jpg
http://sixrevisions.com/web_design/the-evolution-of-web-design/
http://www.148apps.com/wp-content/uploads/2011/02/rdio.jpg
http://www.desktopexchange.com/gallery/Widescreen-Wallpaper/evolution_1280x768
http://www.blogcdn.com/www.engadget.com/media/2010/12/bmw-connected-ios-app.jpg
http://cdn.synthtopia.com/wp-content/uploads/2010/10/moog-filtatron.jpg
http://venturebeat.files.wordpress.com/2011/09/gazelle-iphone-app.jpg
http://phonerpt.com/wp-content/uploads/iOS-game-Cut-the-Rope-iPhone-iPad.jpg
http://www.techtickle.com/wp-content/uploads/2010/11/facebook-app-iphone.jpg
http://www.artofflightmovie.com/
http://makenetbg.com/wp-content/uploads/2011/06/servicios-makenet1.jpg
http://charliecowan.files.wordpress.com/2011/08/noticeboard.jpg
http://www.elipseagency.com/agency.html
http://www.nikebetterworld.com/
http://2.bp.blogspot.com/_dCJEsq5nTZA/TJfyIHC87QI/AAAAAAAAAR4/S1hz8ltJY6U/s1600/Bel+Air+Split.jpg
http://www.moodsofnorway.com/#/home
http://www.ozoneeleven.com/wp-content/uploads/2010/05/Iron-Man-I-II_06.jpg
http://www.netmagazine.com/opinions/mobile-apps-must-die
http://www.mobileawesomeness.com
http://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Web_2.0_Map.svg/800px-Web_2.0_Map.svg.png
http://www.devirtuoso.com/2009/05/html-vs-flash-websites-which-is-better/
http://www.webdesignshock.com/wp-content/uploads/2011/08/responsive00.jpg
http://www.ri.gov/img/responsive/banner.jpg
slide related marks or contents are owned by individuals, or their related entities. This slide is neither endorsed by nor affiliated with any of these entities :)


Published in: Education, Technology, Design
3 Comments
12 Likes
Statistics
Notes
  • thanks,Bobby
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • PPT做的真好
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 是啊,很精彩!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
2,526
On SlideShare
0
From Embeds
0
Number of Embeds
33
Actions
Shares
0
Downloads
214
Comments
3
Likes
12
Embeds 0
No embeds

No notes for slide

HiUED 前端/web 發展和體驗

  1. 1. 过WEB/ 户 验User Experience Changes Through Frontend / Web ion lut vo E
  2. 2. 创shanda innovation 陈 Bobby Chen
  3. 3. Bobby Chen Shanghai Taiwan South Africa Australia
  4. 4. Name : (Bobby)Job :Hobbies : Technology, Movie, Pub, Music etc...Website : caspercby.me
  5. 5. htt p:/ /ca sp erc . by me
  6. 6. UI /
  7. 7.
  8. 8. 过WEB/ 户 验User Experience Changes Through Frontend / Web ion lut vo E
  9. 9. Frontend Engineer前端工程师
  10. 10. Designer VS Developer
  11. 11. 1. code 东 , 2. 术 设计 样 这 产 师... 1. 设计 圆 设计 2. Coding 时 间 烦 3. 发 3. User 这 这东 难 简单 ,创 , , 给 烦 让 coding!
  12. 12. Frontend EngineerCharacteristic
  13. 13. FrontendEngineerCharacteristicArtistic / Perfectionist艺术感 / 追求完美
  14. 14. Technologist 爱 术 is t icA r t 术 艺 Frontend Engineer Characteristic
  15. 15. FrontendEngineerCharacteristicCommunication善于沟通
  16. 16. Wh at Do teers Do? Fron ow-h ow) (Kn
  17. 17. F2E Know-howHTML / PHP CSS Javascript Ajax
  18. 18. F2E Know-How
  19. 19. Coding Language
  20. 20. Security
  21. 21. Development Tool
  22. 22. JS Framework / Library
  23. 23. Performance
  24. 24. Browser Capabilities
  25. 25. Browser Capabilities
  26. 26. Browser Capabilities
  27. 27. Others
  28. 28. F2E Know-How
  29. 29. Fronteers Tell Browsers / Devices What To Do!在不同 浏览器 / 终端 实现效果
  30. 30. SIMPLE ACCESSIBLE USEFUL 简单、可用、无障碍
  31. 31. Fronteers Makes The Web Happier Place让互联网环境更美好
  32. 32. Internet Evolution互联网发展
  33. 33. WEB API MOBILE?Internet Evolution - Stone Age互联网发展
  34. 34. API WEB MOBILEInternet Evolution - Iron Age互联网发展
  35. 35. API MOBILE WEBInternet Evolution - Modern Age互联网发展
  36. 36. Development Process (Waterfall)开发模式 PM UED FE SDE✓ UI Design✓ Interaction Design QA✓ Prototype✓ Researcher
  37. 37. Development Process (Waterfall)开发模式 FE PM UED FE SDE QA
  38. 38. Development Process (Agile)开发模式 UED PM Agile FE 发 QA SDE
  39. 39. 1990 - 2011http://evolutionofweb.appspot.com/
  40. 40. Internet Evolution 2007 Mobile
  41. 41. Internet Evolution 1992
  42. 42. Internet Evolution 1996
  43. 43. Internet Evolution 2002
  44. 44. Internet Evolution2006 - 2007 Web 2.0
  45. 45. Internet Evolution Flash
  46. 46. Internet Evolution 2007 (iPhone)
  47. 47. Internet EvolutionTechnology Changed Our Life
  48. 48. Internet Evolution 2009
  49. 49. Internet Evolution Mobile APP
  50. 50. Internet EvolutionMobile APP Pattern
  51. 51. Internet Evolution 2010 - 2011
  52. 52. Internet Evolution HTML 5
  53. 53. Internet Evolution HTML 5 Audio
  54. 54. Internet Evolutioncreative director Scott Jenson 2011
  55. 55. Internet Evolution Mobile Web
  56. 56. Internet Evolution Templates ( ) Modules ( 块) WidgetsServices ( 务) Application Interface ( ) Api, Storage etc Entry-Point, Security, ReferralPlugIns ( ) Application Framework ( ) Pull-Refresh,News/Article Ajax Controllers, Templates In.Sdo Database ( 库) Mobile Framework
  57. 57. Internet Evolution HTML(5) CSS(3) - Semantic Markup (语义 标签) - Text / Box Shadow - Form Fields ( 单 ) - Flex BoxFrontend - History API - CSS Selector - Local Storage - Linear Gradient - Javascript API - Data URI - Etc... - Etc... JQueryBackend L.A.M.P. (CodeIgniter Framework) Mobile Framework
  58. 58. Internet Evolution Traditional Mobile 评 : 80+ 评 : 90+ 总请 : 44 总请 : 14 请 44 请 :4 总 : ±1639.5k 总 : ±274.4kTraditionalMobile Mobile Framework
  59. 59. Mobile/Web/ Web Native App Mobile Web FLASHHybrid App✓ SEO able Standard Open Web ✓ Good Interactive Performance✓ Easy Learn Use HTML, CSS, JS ✓ Offline Animation Better Mode✓ Greater Availability Multi Device ✓ No Reload Device Resource✓ Faster Loading Multi Plateform ✓ Pixel Perfect App Store✓ Easy Integration Realtime Upate ✓ Audio, Video etc... Awesome UX Decision
  60. 60. ResponsiveWebDesign 应 页设计
  61. 61. Responsive Web Design响应式网页设计
  62. 62. Responsive Web Design响应式网页设计
  63. 63. Responsive Web Design响应式网页设计
  64. 64. Responsive Web Design响应式网页设计
  65. 65. htt p:/ /ca sp erc . by meTh ank You !
  66. 66. REFERENCE / CREDITShttp://www.themechrome.net/Images/Original/aaa.jpghttp://activatedrinks.com/#/presshttp://www.webmedia-solutions.com/web-development-blog/wp-content/uploads/2009/01/web-2-0-logos.gifhttp://yiku.co/wp-content/uploads/2011/01/67bf1bb2g94361366956f690.jpghttp://sixrevisions.com/web_design/the-evolution-of-web-design/http://www.148apps.com/wp-content/uploads/2011/02/rdio.jpghttp://www.desktopexchange.com/gallery/Widescreen-Wallpaper/evolution_1280x768http://www.blogcdn.com/www.engadget.com/media/2010/12/bmw-connected-ios-app.jpghttp://cdn.synthtopia.com/wp-content/uploads/2010/10/moog-filtatron.jpghttp://venturebeat.files.wordpress.com/2011/09/gazelle-iphone-app.jpghttp://phonerpt.com/wp-content/uploads/iOS-game-Cut-the-Rope-iPhone-iPad.jpghttp://www.techtickle.com/wp-content/uploads/2010/11/facebook-app-iphone.jpghttp://www.artofflightmovie.com/http://makenetbg.com/wp-content/uploads/2011/06/servicios-makenet1.jpghttp://charliecowan.files.wordpress.com/2011/08/noticeboard.jpghttp://www.elipseagency.com/agency.htmlhttp://www.nikebetterworld.com/http://2.bp.blogspot.com/_dCJEsq5nTZA/TJfyIHC87QI/AAAAAAAAAR4/S1hz8ltJY6U/s1600/Bel+Air+Split.jpghttp://www.moodsofnorway.com/#/homehttp://www.ozoneeleven.com/wp-content/uploads/2010/05/Iron-Man-I-II_06.jpghttp://www.netmagazine.com/opinions/mobile-apps-must-diehttp://www.mobileawesomeness.comhttp://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Web_2.0_Map.svg/800px-Web_2.0_Map.svg.pnghttp://www.devirtuoso.com/2009/05/html-vs-flash-websites-which-is-better/http://www.webdesignshock.com/wp-content/uploads/2011/08/responsive00.jpghttp://www.ri.gov/img/responsive/banner.jpgslide related marks or contents are owned by individuals, or their related entities. This slide is neither endorsed by noraffiliated with any of these entities :)

×