HiUED 前端/web 發展和體驗

  • 1,755 views
Uploaded on

CREDITS / …

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 :)


More in: Education , Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • thanks,Bobby
    Are you sure you want to
    Your message goes here
  • PPT做的真好
    Are you sure you want to
    Your message goes here
  • 是啊,很精彩!
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,755
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
212
Comments
3
Likes
12

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 过WEB/ 户 验User Experience Changes Through Frontend / Web ion lut vo E
  • 2. 创shanda innovation 陈 Bobby Chen
  • 3. Bobby Chen Shanghai Taiwan South Africa Australia
  • 4. Name : (Bobby)Job :Hobbies : Technology, Movie, Pub, Music etc...Website : caspercby.me
  • 5. htt p:/ /ca sp erc . by me
  • 6. UI /
  • 7.
  • 8. 过WEB/ 户 验User Experience Changes Through Frontend / Web ion lut vo E
  • 9. Frontend Engineer前端工程师
  • 10. Designer VS Developer
  • 11. 1. code 东 , 2. 术 设计 样 这 产 师... 1. 设计 圆 设计 2. Coding 时 间 烦 3. 发 3. User 这 这东 难 简单 ,创 , , 给 烦 让 coding!
  • 12. Frontend EngineerCharacteristic
  • 13. FrontendEngineerCharacteristicArtistic / Perfectionist艺术感 / 追求完美
  • 14. Technologist 爱 术 is t icA r t 术 艺 Frontend Engineer Characteristic
  • 15. FrontendEngineerCharacteristicCommunication善于沟通
  • 16. Wh at Do teers Do? Fron ow-h ow) (Kn
  • 17. F2E Know-howHTML / PHP CSS Javascript Ajax
  • 18. F2E Know-How
  • 19. Coding Language
  • 20. Security
  • 21. Development Tool
  • 22. JS Framework / Library
  • 23. Performance
  • 24. Browser Capabilities
  • 25. Browser Capabilities
  • 26. Browser Capabilities
  • 27. Others
  • 28. F2E Know-How
  • 29. Fronteers Tell Browsers / Devices What To Do!在不同 浏览器 / 终端 实现效果
  • 30. SIMPLE ACCESSIBLE USEFUL 简单、可用、无障碍
  • 31. Fronteers Makes The Web Happier Place让互联网环境更美好
  • 32. Internet Evolution互联网发展
  • 33. WEB API MOBILE?Internet Evolution - Stone Age互联网发展
  • 34. API WEB MOBILEInternet Evolution - Iron Age互联网发展
  • 35. API MOBILE WEBInternet Evolution - Modern Age互联网发展
  • 36. Development Process (Waterfall)开发模式 PM UED FE SDE✓ UI Design✓ Interaction Design QA✓ Prototype✓ Researcher
  • 37. Development Process (Waterfall)开发模式 FE PM UED FE SDE QA
  • 38. Development Process (Agile)开发模式 UED PM Agile FE 发 QA SDE
  • 39. 1990 - 2011http://evolutionofweb.appspot.com/
  • 40. Internet Evolution 2007 Mobile
  • 41. Internet Evolution 1992
  • 42. Internet Evolution 1996
  • 43. Internet Evolution 2002
  • 44. Internet Evolution2006 - 2007 Web 2.0
  • 45. Internet Evolution Flash
  • 46. Internet Evolution 2007 (iPhone)
  • 47. Internet EvolutionTechnology Changed Our Life
  • 48. Internet Evolution 2009
  • 49. Internet Evolution Mobile APP
  • 50. Internet EvolutionMobile APP Pattern
  • 51. Internet Evolution 2010 - 2011
  • 52. Internet Evolution HTML 5
  • 53. Internet Evolution HTML 5 Audio
  • 54. Internet Evolutioncreative director Scott Jenson 2011
  • 55. Internet Evolution Mobile Web
  • 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. 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. Internet Evolution Traditional Mobile 评 : 80+ 评 : 90+ 总请 : 44 总请 : 14 请 44 请 :4 总 : ±1639.5k 总 : ±274.4kTraditionalMobile Mobile Framework
  • 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. ResponsiveWebDesign 应 页设计
  • 61. Responsive Web Design响应式网页设计
  • 62. Responsive Web Design响应式网页设计
  • 63. Responsive Web Design响应式网页设计
  • 64. Responsive Web Design响应式网页设计
  • 65. htt p:/ /ca sp erc . by meTh ank You !
  • 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 :)