The document discusses user experience changes in web development, focusing on the role of frontend engineers and the evolution of the internet. It outlines the characteristics and skills of frontend engineers, various development processes, and the transition of web technology over different eras. Additionally, it highlights responsive web design and the importance of creating simple, accessible, and useful web applications.

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

5. Name : (Bobby)
Job :
Hobbies : Technology, Movie, Pub, Music etc...
Website : caspercby.me

6. htt
p:/
/ca
sp
erc
.
by
me

7. UI /

8. 发

9. 过WEB/ 户 验
User Experience
Changes Through
Frontend / Web
ion
lut
vo
E

10. Frontend Engineer
前端工程师

12. Designer VS Developer

13. 1. code 东 , 2. 术
设计 样 这 产
师...
1. 设计 圆
设计
2. Coding 时
间 烦
3. 发 3. User 这
这东 难 简单
,创 , , 给 烦 让
coding!

14. Frontend Engineer
Characteristic

15. Frontend
Engineer
Characteristic
Artistic / Perfectionist
艺术感 / 追求完美

16. Technologist
爱 术
is t ic
A r t
术
艺
Frontend Engineer
Characteristic

17. Frontend
Engineer
Characteristic
Communication
善于沟通

18. Wh at Do
teers Do?
Fron
ow-h ow)
(Kn

19. F2E Know-how
HTML / PHP CSS
Javascript Ajax

20. F2E Know-How

21. Coding Language

22. Security

23. Development Tool

24. JS Framework / Library

25. Performance

26. Browser Capabilities

27. Browser Capabilities

28. Browser Capabilities

29. Others

30. F2E Know-How

31. Fronteers Tell Browsers / Devices What To Do!
在不同 浏览器 / 终端 实现效果

32. SIMPLE ACCESSIBLE USEFUL
简单、可用、无障碍

33. Fronteers Makes The Web Happier Place
让互联网环境更美好

34. Internet Evolution
互联网发展

35. WEB API MOBILE?
Internet Evolution - Stone Age
互联网发展

36. API WEB MOBILE
Internet Evolution - Iron Age
互联网发展

37. API MOBILE WEB
Internet Evolution - Modern Age
互联网发展

38. Development Process (Waterfall)
开发模式
PM
UED
FE
SDE
✓ UI Design
✓ Interaction Design QA
✓ Prototype
✓ Researcher

39. Development Process (Waterfall)
开发模式
FE
PM UED FE SDE QA

40. Development Process (Agile)
开发模式
UED
PM Agile FE
发
QA SDE

41. 1990 - 2011
http://evolutionofweb.appspot.com/

42. Internet Evolution
2007 Mobile

43. Internet Evolution
1992

44. Internet Evolution
1996

45. Internet Evolution
2002

46. Internet Evolution
2006 - 2007 Web 2.0

47. Internet Evolution
Flash

48. Internet Evolution
2007 (iPhone)

49. Internet Evolution
Technology Changed Our Life

50. Internet Evolution
2009

51. Internet Evolution
Mobile APP

52. Internet Evolution
Mobile APP Pattern

53. Internet Evolution
2010 - 2011

54. Internet Evolution
HTML 5

55. Internet Evolution
HTML 5 Audio

56. Internet Evolution
creative director Scott Jenson
2011

57. Internet Evolution
Mobile Web

58. Internet Evolution
Templates ( ) Modules ( 块) Widgets
Services ( 务) Application Interface ( )
Api, Storage etc
Entry-Point, Security, Referral
PlugIns ( ) Application Framework ( )
Pull-Refresh,
News/Article Ajax Controllers, Templates
In.Sdo Database ( 库)
Mobile Framework

59. Internet Evolution
HTML(5) CSS(3)
- Semantic Markup (语义 标签) - Text / Box Shadow
- Form Fields ( 单 ) - Flex Box
Frontend
- History API - CSS Selector
- Local Storage - Linear Gradient
- Javascript API - Data URI
- Etc... - Etc...
JQuery
Backend
L.A.M.P. (CodeIgniter Framework)
Mobile Framework

60. Internet Evolution
Traditional Mobile
评 : 80+ 评 : 90+
总请 : 44 总请 : 14
请 44 请 :4
总 : ±1639.5k 总 : ±274.4k
Traditional
Mobile
Mobile Framework

61. Mobile/Web/
Web Native App
Mobile Web
FLASH
Hybrid 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

62. ResponsiveWebDesign
应 页设计

63. Responsive Web Design
响应式网页设计

64. Responsive Web Design
响应式网页设计

65. Responsive Web Design
响应式网页设计

66. Responsive Web Design
响应式网页设计

67. htt
p:/
/ca
sp
erc
.
by
me
Th
ank
You
!

68. REFERENCE / CREDITS
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 :)