web标准化交流会上海站bobby分享

Post on 17-May-2015

1.270 views 7 download

description

web标准化交流会上海站bobby分享

Transcript of web标准化交流会上海站bobby分享

Personal Information

Sunday, May 29, 2011

Personal Information

Name : 陈柏宇 (Bobby)

Job : 盛大创新院

Hobbies : Technology, Movie, Pub, etc... Email / MSN : caspercby@hotmail.com Twitter : caspercby微博 : http://weibo.com/caspercby

QQ : 2244670408

Sunday, May 29, 2011

Sunday, May 29, 2011

Agenda

• 前端历史• 前端愿景 (Frontend Mission)• 前端团队目标• 前端需求方• 问题 / 解决方案• 前端建设• 前端工作事项 / 时程

Sunday, May 29, 2011

前端历史Sunday, May 29, 2011

Sunday, May 29, 2011

Designer VS DeveloperSunday, May 29, 2011

Designer VS DeveloperSunday, May 29, 2011

Sunday, May 29, 2011

1. 你code出来的东西,和我设计的不一样!

Sunday, May 29, 2011

1. 每次设计都有圆角,设计又不好!2. Coding 都没时间,不要烦我!3. User 真笨!这么简单功能都部会用!不要烦我!让我coding!

1. 你code出来的东西,和我设计的不一样!

Sunday, May 29, 2011

1. 每次设计都有圆角,设计又不好!2. Coding 都没时间,不要烦我!3. User 真笨!这么简单功能都部会用!不要烦我!让我coding!

1. 你code出来的东西,和我设计的不一样!

2. 有没有新技术做这个产品?

Sunday, May 29, 2011

1. 每次设计都有圆角,设计又不好!2. Coding 都没时间,不要烦我!3. User 真笨!这么简单功能都部会用!不要烦我!让我coding!

1. 你code出来的东西,和我设计的不一样!

2. 有没有新技术做这个产品?

Sunday, May 29, 2011

1. 每次设计都有圆角,设计又不好!2. Coding 都没时间,不要烦我!3. User 真笨!这么简单功能都部会用!不要烦我!让我coding!

1. 你code出来的东西,和我设计的不一样!

2. 有没有新技术做这个产品?

3. 开发者是笨蛋嘛?这东西真难用!

Sunday, May 29, 2011

1. 每次设计都有圆角,设计又不好!2. Coding 都没时间,不要烦我!3. User 真笨!这么简单功能都部会用!不要烦我!让我coding!

1. 你code出来的东西,和我设计的不一样!

2. 有没有新技术做这个产品?

3. 开发者是笨蛋嘛?这东西真难用!

Sunday, May 29, 2011

1. 每次设计都有圆角,设计又不好!2. Coding 都没时间,不要烦我!3. User 真笨!这么简单功能都部会用!不要烦我!让我coding!

1. 你code出来的东西,和我设计的不一样!

2. 有没有新技术做这个产品?

3. 开发者是笨蛋嘛?这东西真难用!

前端工程师...

溝通,创新,交互,前端交给我!

Sunday, May 29, 2011

前端工程师...

溝通,创新,交互,前端交给我!

33%

33%

33%

沟通 研究 Coding

Sunday, May 29, 2011

Sunday, May 29, 2011

Sunday, May 29, 2011

Sunday, May 29, 2011

Sunday, May 29, 2011

art meets science

Sunday, May 29, 2011

前端愿景 (Frontend Mission)

Sunday, May 29, 2011

前端愿景 (Frontend Mission)

提升页面品质和使用者体验Improve Page Quality and User Experience

Sunday, May 29, 2011

提供使用者较佳 UI/UX 体验Sunday, May 29, 2011

提供使用者较佳 UI/UX 体验

UI / UX

Sunday, May 29, 2011

UI/UX 设计和交互体验缺乏吸引力Sunday, May 29, 2011

Sunday, May 29, 2011

Sunday, May 29, 2011

What Do F2E’s Do?前端工程师在做什么?

Sunday, May 29, 2011

Answer 1: We Tell Browsers What To Do!前端工程师控制浏览器 & 移动设备

Sunday, May 29, 2011

Answer 2:Frontend Engineers are responsible for everything you see when you “view source”

Sunday, May 29, 2011

What Do F2E’s Expect To Know ? (Skill Set)前端工程师需要哪些技能?

Sunday, May 29, 2011

F2E Specialities

HTML / PHP CSS

Javascript Ajax

Sunday, May 29, 2011

F2E Know-HowSunday, May 29, 2011

Coding LanguageSunday, May 29, 2011

SecuritySunday, May 29, 2011

Development ToolSunday, May 29, 2011

JS Framework / LibrarySunday, May 29, 2011

PerformanceSunday, May 29, 2011

Browser CapabilitiesSunday, May 29, 2011

Frontend Code / Template Runs on…

Sunday, May 29, 2011

Frontend Code / Template Runs on…

Sunday, May 29, 2011

Frontend Code / Template Runs on…

Sunday, May 29, 2011

Frontend Code / Template Runs on…

Sunday, May 29, 2011

Frontend Code / Template Runs on…

Operating System

Sunday, May 29, 2011

Frontend Code / Template Runs on…

Modern Application

Sunday, May 29, 2011

Browser CapabilitiesSunday, May 29, 2011

Browser CapabilitiesSunday, May 29, 2011

Browser CapabilitiesSunday, May 29, 2011

OthersSunday, May 29, 2011

F2E Know-HowSunday, May 29, 2011

前端未來趨勢(Frontend’s Future)

Sunday, May 29, 2011

WEB API MOBILE?

Stone AgeSunday, May 29, 2011

Iron Age

API WEB MOBILE?

Sunday, May 29, 2011

Modern Age

API WEBMOBILE

Sunday, May 29, 2011

Sunday, May 29, 2011

Sunday, May 29, 2011

Sunday, May 29, 2011

growthThe

of Mobile &Touch Device...

Sunday, May 29, 2011

The

of Mobile &Touch Device...

Sunday, May 29, 2011

1870, 1st telephone was invented, “Alexander Graham Bell”

1936, 1st freely programable computer, “Konrad Zuse”

1980, World Wide Web (WWW), “Tim Berners Lee”

1973, 1st mobile phone was invented, “Dr Martin Cooper”

1992, 1st touch screen phone invented, “IBM”

2008, 1st iPad was released, “Apple”

Sunday, May 29, 2011

1870, 1st telephone was invented, “Alexander Graham Bell”

1936, 1st freely programable computer, “Konrad Zuse”

1980, World Wide Web (WWW), “Tim Berners Lee”

1973, 1st mobile phone was invented, “Dr Martin Cooper”

1992, 1st touch screen phone invented, “IBM”

2008, 1st iPad was released, “Apple”

Sunday, May 29, 2011

1870, 1st telephone was invented, “Alexander Graham Bell”

1936, 1st freely programable computer, “Konrad Zuse”

1980, World Wide Web (WWW), “Tim Berners Lee”

1973, 1st mobile phone was invented, “Dr Martin Cooper”

1992, 1st touch screen phone invented, “IBM”

2008, 1st iPad was released, “Apple”

Sunday, May 29, 2011

1870, 1st telephone was invented, “Alexander Graham Bell”

1936, 1st freely programable computer, “Konrad Zuse”

1980, World Wide Web (WWW), “Tim Berners Lee”

1973, 1st mobile phone was invented, “Dr Martin Cooper”

1992, 1st touch screen phone invented, “IBM”

2008, 1st iPad was released, “Apple”

Sunday, May 29, 2011

1870, 1st telephone was invented, “Alexander Graham Bell”

1936, 1st freely programable computer, “Konrad Zuse”

1980, World Wide Web (WWW), “Tim Berners Lee”

1973, 1st mobile phone was invented, “Dr Martin Cooper”

1992, 1st touch screen phone invented, “IBM”

2008, 1st iPad was released, “Apple”

Sunday, May 29, 2011

1870, 1st telephone was invented, “Alexander Graham Bell”

1936, 1st freely programable computer, “Konrad Zuse”

1980, World Wide Web (WWW), “Tim Berners Lee”

1973, 1st mobile phone was invented, “Dr Martin Cooper”

1992, 1st touch screen phone invented, “IBM”

2008, 1st iPad was released, “Apple”

Sunday, May 29, 2011

1870, 1st telephone was invented, “Alexander Graham Bell”

1936, 1st freely programable computer, “Konrad Zuse”

1980, World Wide Web (WWW), “Tim Berners Lee”

1973, 1st mobile phone was invented, “Dr Martin Cooper”

1992, 1st touch screen phone invented, “IBM”

2008, 1st iPad was released, “Apple”

Sunday, May 29, 2011

In 2009...

Sunday, May 29, 2011

In 2009...

51,000,000 Cars

210,000,000 TVs

1.2 billion (12億) mobile

Sunday, May 29, 2011

http://svg-wow.org/Sunday, May 29, 2011

http://svg-wow.org/Sunday, May 29, 2011

Sunday, May 29, 2011

Sunday, May 29, 2011

Q&A

Sunday, May 29, 2011

开发流程 (Scrum)

PM UED FE SDE QA

1. Product Manager‣ 需求 (Spec)

‣ 规划 (Plan)

Sunday, May 29, 2011

开发流程 (Scrum)

PM UED FE SDE QA

2. User Experience Design‣ 交互设计师

‣ UI 设计师

Sunday, May 29, 2011

开发流程 (Scrum)

PM UED FE SDE QA

3. Frontend Engineer‣ 设计交互

‣ 设计 Protptype / 版面

‣ 前端优化

Sunday, May 29, 2011

开发流程 (Scrum)

PM UED FE SDE QA

4. Software Develop Engineer‣ 架构设计

‣ DB (资料库)设计

‣ 商业资料控制

Sunday, May 29, 2011

开发流程 (Scrum)

PM UED FE SDE QA

5. Quality Assurance‣ Test Case 开发 / 编辑

‣ 黑 / 白箱测试

‣ 自动化测试

Sunday, May 29, 2011

改善流程 (Support)

PM UED FE SDE QA

FE

1. 提供新技术给 PM

Sunday, May 29, 2011

改善流程 (Support)

PM UED FE SDE QA

FE

1. 协助设计师使 UI 更精致2. 协助交互师使 UX 体验更佳

Sunday, May 29, 2011

改善流程 (Support)

PM UED FE SDE QA

FE

1. 节省前端开发时间

Sunday, May 29, 2011

改善流程 (Support)

PM UED FE SDE QA

FE

1. 协助后端串接 DB / API

Sunday, May 29, 2011

改善流程 (Support)

PM UED FE SDE QA

FE

1. 协助 QA 解 BUG

Sunday, May 29, 2011

Q&A

Sunday, May 29, 2011