68
User Experience Changes Through WEB/前端發展得到不同的用Frontend / Web Evolution

HiUED 前端/web 發展和體驗

Embed Size (px)

DESCRIPTION

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


Citation preview

Page 1: HiUED 前端/web 發展和體驗

User ExperienceChanges Through

透过WEB/前端發展得到不同的用户体验

Frontend / Web

Evol

ution

Page 2: HiUED 前端/web 發展和體驗

盛大创新院shanda innovation

陈柏宇 Bobby Chen

Page 3: HiUED 前端/web 發展和體驗

Bobby Chen

South AfricaAustralia

Taiwan

Shanghai

Page 4: HiUED 前端/web 發展和體驗
Page 5: HiUED 前端/web 發展和體驗

Name : 陳柏宇 (Bobby) Job : 盛大創新院 Hobbies : Technology, Movie, Pub, Music etc... Website : caspercby.me

Page 7: HiUED 前端/web 發展和體驗

UI / 交互?

Page 8: HiUED 前端/web 發展和體驗

前端开发?

Page 9: HiUED 前端/web 發展和體驗

User ExperienceChanges Through

透过WEB/前端發展得到不同的用户体验

Frontend / Web

Evol

ution

Page 10: HiUED 前端/web 發展和體驗

Frontend Engineer前端工程师

Page 11: HiUED 前端/web 發展和體驗
Page 12: HiUED 前端/web 發展和體驗

Designer VS Developer

Page 13: HiUED 前端/web 發展和體驗

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

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

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

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

前端工程师...

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

Page 14: HiUED 前端/web 發展和體驗

Frontend EngineerCharacteristic

Page 15: HiUED 前端/web 發展和體驗

Frontend Engineer

Artistic / Perfectionist

艺术感 / 追求完美

Characteristic

Page 16: HiUED 前端/web 發展和體驗

Artistic

艺术感

Technologist爱好技术

Frontend EngineerCharacteristic

Page 17: HiUED 前端/web 發展和體驗

Frontend EngineerCharacteristic

Communication善于沟通

Page 18: HiUED 前端/web 發展和體驗

What Do

Fronteers Do?

(Know-how)

Page 19: HiUED 前端/web 發展和體驗

F2E Know-how

HTML / PHP CSS

Javascript Ajax

Page 20: HiUED 前端/web 發展和體驗

&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH

+70/+70/+70/+70/

&66&66&66&66

-DYD6FULSW��-6213-DYD6FULSW��-6213-DYD6FULSW��-6213-DYD6FULSW��-6213

3+33+33+33+3

-621���;0/-621���;0/-621���;0/-621���;0/

)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5

(WF���(WF���(WF���(WF���

%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV

,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������

)LUHIR[)LUHIR[)LUHIR[)LUHIR[

2SHUD2SHUD2SHUD2SHUD

6DIDUL6DIDUL6DIDUL6DIDUL

*RRJOH�&KURPH*RRJOH�&KURPH*RRJOH�&KURPH*RRJOH�&KURPH

0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����

)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\

<8,<8,<8,<8,

-4XHU\-4XHU\-4XHU\-4XHU\

'RMR'RMR'RMR'RMR

0RRWRROV0RRWRROV0RRWRROV0RRWRROV

3URWRW\SH3URWRW\SH3URWRW\SH3URWRW\SH

(WF���(WF���(WF���(WF���

'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO

7H[W�(GLWRU7H[W�(GLWRU7H[W�(GLWRU7H[W�(GLWRU

9,09,09,09,0

7H[WPDWH7H[WPDWH7H[WPDWH7H[WPDWH

(GLW3OXV(GLW3OXV(GLW3OXV(GLW3OXV $SWDQD$SWDQD$SWDQD$SWDQD

1RWH3DG��1RWH3DG��1RWH3DG��1RWH3DG��

(WF���(WF���(WF���(WF���

8,�'HVLJQ8,�'HVLJQ8,�'HVLJQ8,�'HVLJQ

3KRWRVKRS3KRWRVKRS3KRWRVKRS3KRWRVKRS

)LUHZRUNV)LUHZRUNV)LUHZRUNV)LUHZRUNV

,OOXVWUDWRU,OOXVWUDWRU,OOXVWUDWRU,OOXVWUDWRU

)ODVK)ODVK)ODVK)ODVK

&RORU�&URS&RORU�&URS&RORU�&URS&RORU�&URS

(WF���(WF���(WF���(WF���

9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO691691691691

&96&96&96&96

2WKHU2WKHU2WKHU2WKHU

)LUHEXJ)LUHEXJ)LUHEXJ)LUHEXJ

-6/LQW-6/LQW-6/LQW-6/LQW

<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�

<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�

6PXVK�LW6PXVK�LW6PXVK�LW6PXVK�LW

3HUIRUPDQFH3HUIRUPDQFH3HUIRUPDQFH3HUIRUPDQFH6PXVK�LW6PXVK�LW6PXVK�LW6PXVK�LW

<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�

<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�

2SHQ�$SL2SHQ�$SL2SHQ�$SL2SHQ�$SL<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���

*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���

$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�

:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�

+70/���+70/����[+70/+70/���+70/����[+70/+70/���+70/����[+70/+70/���+70/����[+70/

&66���&66�&66���&66�&66���&66�&66���&66�

;0/���566���-621;0/���566���-621;0/���566���-621;0/���566���-621

0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH

2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ

8,���8;�'HVLJQ8,���8;�'HVLJQ8,���8;�'HVLJQ8,���8;�'HVLJQ

3URWRW\SLQJ3URWRW\SLQJ3URWRW\SLQJ3URWRW\SLQJ

&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO

3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO

$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ

3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV

+DFN�6NLOO+DFN�6NLOO+DFN�6NLOO+DFN�6NLOO

(WF���(WF���(WF���(WF���

6HFXULW\6HFXULW\6HFXULW\6HFXULW\

&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�

;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�

;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�

)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV

&OLFNMDFNLQJ&OLFNMDFNLQJ&OLFNMDFNLQJ&OLFNMDFNLQJ

7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ

)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU

F2E Know-How

Page 21: HiUED 前端/web 發展和體驗

&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH

+70/+70/+70/+70/

&66&66&66&66

-DYD6FULSW��-6213-DYD6FULSW��-6213-DYD6FULSW��-6213-DYD6FULSW��-6213

3+33+33+33+3

-621���;0/-621���;0/-621���;0/-621���;0/

)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5

(WF���(WF���(WF���(WF���

%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV

,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������

)LUHIR[)LUHIR[)LUHIR[)LUHIR[

2SHUD2SHUD2SHUD2SHUD

6DIDUL6DIDUL6DIDUL6DIDUL

*RRJOH�&KURPH*RRJOH�&KURPH*RRJOH�&KURPH*RRJOH�&KURPH

0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����

)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\

<8,<8,<8,<8,

-4XHU\-4XHU\-4XHU\-4XHU\

'RMR'RMR'RMR'RMR

0RRWRROV0RRWRROV0RRWRROV0RRWRROV

3URWRW\SH3URWRW\SH3URWRW\SH3URWRW\SH

(WF���(WF���(WF���(WF���

'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO

7H[W�(GLWRU7H[W�(GLWRU7H[W�(GLWRU7H[W�(GLWRU

9,09,09,09,0

7H[WPDWH7H[WPDWH7H[WPDWH7H[WPDWH

(GLW3OXV(GLW3OXV(GLW3OXV(GLW3OXV $SWDQD$SWDQD$SWDQD$SWDQD

1RWH3DG��1RWH3DG��1RWH3DG��1RWH3DG��

(WF���(WF���(WF���(WF���

8,�'HVLJQ8,�'HVLJQ8,�'HVLJQ8,�'HVLJQ

3KRWRVKRS3KRWRVKRS3KRWRVKRS3KRWRVKRS

)LUHZRUNV)LUHZRUNV)LUHZRUNV)LUHZRUNV

,OOXVWUDWRU,OOXVWUDWRU,OOXVWUDWRU,OOXVWUDWRU

)ODVK)ODVK)ODVK)ODVK

&RORU�&URS&RORU�&URS&RORU�&URS&RORU�&URS

(WF���(WF���(WF���(WF���

9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO691691691691

&96&96&96&96

2WKHU2WKHU2WKHU2WKHU

)LUHEXJ)LUHEXJ)LUHEXJ)LUHEXJ

-6/LQW-6/LQW-6/LQW-6/LQW

<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�

<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�

6PXVK�LW6PXVK�LW6PXVK�LW6PXVK�LW

3HUIRUPDQFH3HUIRUPDQFH3HUIRUPDQFH3HUIRUPDQFH6PXVK�LW6PXVK�LW6PXVK�LW6PXVK�LW

<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�

<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�

2SHQ�$SL2SHQ�$SL2SHQ�$SL2SHQ�$SL<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���

*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���

$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�

:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�

+70/���+70/����[+70/+70/���+70/����[+70/+70/���+70/����[+70/+70/���+70/����[+70/

&66���&66�&66���&66�&66���&66�&66���&66�

;0/���566���-621;0/���566���-621;0/���566���-621;0/���566���-621

0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH

2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ

8,���8;�'HVLJQ8,���8;�'HVLJQ8,���8;�'HVLJQ8,���8;�'HVLJQ

3URWRW\SLQJ3URWRW\SLQJ3URWRW\SLQJ3URWRW\SLQJ

&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO

3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO

$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ

3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV

+DFN�6NLOO+DFN�6NLOO+DFN�6NLOO+DFN�6NLOO

(WF���(WF���(WF���(WF���

6HFXULW\6HFXULW\6HFXULW\6HFXULW\

&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�

;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�

;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�

)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV

&OLFNMDFNLQJ&OLFNMDFNLQJ&OLFNMDFNLQJ&OLFNMDFNLQJ

7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ

)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU

Coding Language

Page 22: HiUED 前端/web 發展和體驗

&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH

+70/+70/+70/+70/

&66&66&66&66

-DYD6FULSW��-6213-DYD6FULSW��-6213-DYD6FULSW��-6213-DYD6FULSW��-6213

3+33+33+33+3

-621���;0/-621���;0/-621���;0/-621���;0/

)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5

(WF���(WF���(WF���(WF���

%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV

,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������

)LUHIR[)LUHIR[)LUHIR[)LUHIR[

2SHUD2SHUD2SHUD2SHUD

6DIDUL6DIDUL6DIDUL6DIDUL

*RRJOH�&KURPH*RRJOH�&KURPH*RRJOH�&KURPH*RRJOH�&KURPH

0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����

)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\

<8,<8,<8,<8,

-4XHU\-4XHU\-4XHU\-4XHU\

'RMR'RMR'RMR'RMR

0RRWRROV0RRWRROV0RRWRROV0RRWRROV

3URWRW\SH3URWRW\SH3URWRW\SH3URWRW\SH

(WF���(WF���(WF���(WF���

'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO

7H[W�(GLWRU7H[W�(GLWRU7H[W�(GLWRU7H[W�(GLWRU

9,09,09,09,0

7H[WPDWH7H[WPDWH7H[WPDWH7H[WPDWH

(GLW3OXV(GLW3OXV(GLW3OXV(GLW3OXV $SWDQD$SWDQD$SWDQD$SWDQD

1RWH3DG��1RWH3DG��1RWH3DG��1RWH3DG��

(WF���(WF���(WF���(WF���

8,�'HVLJQ8,�'HVLJQ8,�'HVLJQ8,�'HVLJQ

3KRWRVKRS3KRWRVKRS3KRWRVKRS3KRWRVKRS

)LUHZRUNV)LUHZRUNV)LUHZRUNV)LUHZRUNV

,OOXVWUDWRU,OOXVWUDWRU,OOXVWUDWRU,OOXVWUDWRU

)ODVK)ODVK)ODVK)ODVK

&RORU�&URS&RORU�&URS&RORU�&URS&RORU�&URS

(WF���(WF���(WF���(WF���

9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO691691691691

&96&96&96&96

2WKHU2WKHU2WKHU2WKHU

)LUHEXJ)LUHEXJ)LUHEXJ)LUHEXJ

-6/LQW-6/LQW-6/LQW-6/LQW

<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�

<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�

6PXVK�LW6PXVK�LW6PXVK�LW6PXVK�LW

3HUIRUPDQFH3HUIRUPDQFH3HUIRUPDQFH3HUIRUPDQFH6PXVK�LW6PXVK�LW6PXVK�LW6PXVK�LW

<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�

<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�

2SHQ�$SL2SHQ�$SL2SHQ�$SL2SHQ�$SL<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���

*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���

$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�

:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�

+70/���+70/����[+70/+70/���+70/����[+70/+70/���+70/����[+70/+70/���+70/����[+70/

&66���&66�&66���&66�&66���&66�&66���&66�

;0/���566���-621;0/���566���-621;0/���566���-621;0/���566���-621

0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH

2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ

8,���8;�'HVLJQ8,���8;�'HVLJQ8,���8;�'HVLJQ8,���8;�'HVLJQ

3URWRW\SLQJ3URWRW\SLQJ3URWRW\SLQJ3URWRW\SLQJ

&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO

3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO

$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ

3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV

+DFN�6NLOO+DFN�6NLOO+DFN�6NLOO+DFN�6NLOO

(WF���(WF���(WF���(WF���

6HFXULW\6HFXULW\6HFXULW\6HFXULW\

&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�

;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�

;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�

)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV

&OLFNMDFNLQJ&OLFNMDFNLQJ&OLFNMDFNLQJ&OLFNMDFNLQJ

7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ

)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU

Security

Page 23: HiUED 前端/web 發展和體驗

&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH

+70/+70/+70/+70/

&66&66&66&66

-DYD6FULSW��-6213-DYD6FULSW��-6213-DYD6FULSW��-6213-DYD6FULSW��-6213

3+33+33+33+3

-621���;0/-621���;0/-621���;0/-621���;0/

)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5

(WF���(WF���(WF���(WF���

%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV

,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������

)LUHIR[)LUHIR[)LUHIR[)LUHIR[

2SHUD2SHUD2SHUD2SHUD

6DIDUL6DIDUL6DIDUL6DIDUL

*RRJOH�&KURPH*RRJOH�&KURPH*RRJOH�&KURPH*RRJOH�&KURPH

0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����

)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\

<8,<8,<8,<8,

-4XHU\-4XHU\-4XHU\-4XHU\

'RMR'RMR'RMR'RMR

0RRWRROV0RRWRROV0RRWRROV0RRWRROV

3URWRW\SH3URWRW\SH3URWRW\SH3URWRW\SH

(WF���(WF���(WF���(WF���

'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO

7H[W�(GLWRU7H[W�(GLWRU7H[W�(GLWRU7H[W�(GLWRU

9,09,09,09,0

7H[WPDWH7H[WPDWH7H[WPDWH7H[WPDWH

(GLW3OXV(GLW3OXV(GLW3OXV(GLW3OXV $SWDQD$SWDQD$SWDQD$SWDQD

1RWH3DG��1RWH3DG��1RWH3DG��1RWH3DG��

(WF���(WF���(WF���(WF���

8,�'HVLJQ8,�'HVLJQ8,�'HVLJQ8,�'HVLJQ

3KRWRVKRS3KRWRVKRS3KRWRVKRS3KRWRVKRS

)LUHZRUNV)LUHZRUNV)LUHZRUNV)LUHZRUNV

,OOXVWUDWRU,OOXVWUDWRU,OOXVWUDWRU,OOXVWUDWRU

)ODVK)ODVK)ODVK)ODVK

&RORU�&URS&RORU�&URS&RORU�&URS&RORU�&URS

(WF���(WF���(WF���(WF���

9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO691691691691

&96&96&96&96

2WKHU2WKHU2WKHU2WKHU

)LUHEXJ)LUHEXJ)LUHEXJ)LUHEXJ

-6/LQW-6/LQW-6/LQW-6/LQW

<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�

<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�

6PXVK�LW6PXVK�LW6PXVK�LW6PXVK�LW

3HUIRUPDQFH3HUIRUPDQFH3HUIRUPDQFH3HUIRUPDQFH6PXVK�LW6PXVK�LW6PXVK�LW6PXVK�LW

<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�

<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�

2SHQ�$SL2SHQ�$SL2SHQ�$SL2SHQ�$SL<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���

*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���

$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�

:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�

+70/���+70/����[+70/+70/���+70/����[+70/+70/���+70/����[+70/+70/���+70/����[+70/

&66���&66�&66���&66�&66���&66�&66���&66�

;0/���566���-621;0/���566���-621;0/���566���-621;0/���566���-621

0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH

2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ

8,���8;�'HVLJQ8,���8;�'HVLJQ8,���8;�'HVLJQ8,���8;�'HVLJQ

3URWRW\SLQJ3URWRW\SLQJ3URWRW\SLQJ3URWRW\SLQJ

&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO

3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO

$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ

3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV

+DFN�6NLOO+DFN�6NLOO+DFN�6NLOO+DFN�6NLOO

(WF���(WF���(WF���(WF���

6HFXULW\6HFXULW\6HFXULW\6HFXULW\

&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�

;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�

;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�

)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV

&OLFNMDFNLQJ&OLFNMDFNLQJ&OLFNMDFNLQJ&OLFNMDFNLQJ

7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ

)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU

Development Tool

Page 24: HiUED 前端/web 發展和體驗

&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH

+70/+70/+70/+70/

&66&66&66&66

-DYD6FULSW��-6213-DYD6FULSW��-6213-DYD6FULSW��-6213-DYD6FULSW��-6213

3+33+33+33+3

-621���;0/-621���;0/-621���;0/-621���;0/

)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5

(WF���(WF���(WF���(WF���

%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV

,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������

)LUHIR[)LUHIR[)LUHIR[)LUHIR[

2SHUD2SHUD2SHUD2SHUD

6DIDUL6DIDUL6DIDUL6DIDUL

*RRJOH�&KURPH*RRJOH�&KURPH*RRJOH�&KURPH*RRJOH�&KURPH

0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����

)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\

<8,<8,<8,<8,

-4XHU\-4XHU\-4XHU\-4XHU\

'RMR'RMR'RMR'RMR

0RRWRROV0RRWRROV0RRWRROV0RRWRROV

3URWRW\SH3URWRW\SH3URWRW\SH3URWRW\SH

(WF���(WF���(WF���(WF���

'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO

7H[W�(GLWRU7H[W�(GLWRU7H[W�(GLWRU7H[W�(GLWRU

9,09,09,09,0

7H[WPDWH7H[WPDWH7H[WPDWH7H[WPDWH

(GLW3OXV(GLW3OXV(GLW3OXV(GLW3OXV $SWDQD$SWDQD$SWDQD$SWDQD

1RWH3DG��1RWH3DG��1RWH3DG��1RWH3DG��

(WF���(WF���(WF���(WF���

8,�'HVLJQ8,�'HVLJQ8,�'HVLJQ8,�'HVLJQ

3KRWRVKRS3KRWRVKRS3KRWRVKRS3KRWRVKRS

)LUHZRUNV)LUHZRUNV)LUHZRUNV)LUHZRUNV

,OOXVWUDWRU,OOXVWUDWRU,OOXVWUDWRU,OOXVWUDWRU

)ODVK)ODVK)ODVK)ODVK

&RORU�&URS&RORU�&URS&RORU�&URS&RORU�&URS

(WF���(WF���(WF���(WF���

9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO691691691691

&96&96&96&96

2WKHU2WKHU2WKHU2WKHU

)LUHEXJ)LUHEXJ)LUHEXJ)LUHEXJ

-6/LQW-6/LQW-6/LQW-6/LQW

<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�

<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�

6PXVK�LW6PXVK�LW6PXVK�LW6PXVK�LW

3HUIRUPDQFH3HUIRUPDQFH3HUIRUPDQFH3HUIRUPDQFH6PXVK�LW6PXVK�LW6PXVK�LW6PXVK�LW

<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�

<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�

2SHQ�$SL2SHQ�$SL2SHQ�$SL2SHQ�$SL<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���

*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���

$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�

:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�

+70/���+70/����[+70/+70/���+70/����[+70/+70/���+70/����[+70/+70/���+70/����[+70/

&66���&66�&66���&66�&66���&66�&66���&66�

;0/���566���-621;0/���566���-621;0/���566���-621;0/���566���-621

0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH

2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ

8,���8;�'HVLJQ8,���8;�'HVLJQ8,���8;�'HVLJQ8,���8;�'HVLJQ

3URWRW\SLQJ3URWRW\SLQJ3URWRW\SLQJ3URWRW\SLQJ

&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO

3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO

$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ

3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV

+DFN�6NLOO+DFN�6NLOO+DFN�6NLOO+DFN�6NLOO

(WF���(WF���(WF���(WF���

6HFXULW\6HFXULW\6HFXULW\6HFXULW\

&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�

;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�

;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�

)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV

&OLFNMDFNLQJ&OLFNMDFNLQJ&OLFNMDFNLQJ&OLFNMDFNLQJ

7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ

)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU

JS Framework / Library

Page 25: HiUED 前端/web 發展和體驗

&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH

+70/+70/+70/+70/

&66&66&66&66

-DYD6FULSW��-6213-DYD6FULSW��-6213-DYD6FULSW��-6213-DYD6FULSW��-6213

3+33+33+33+3

-621���;0/-621���;0/-621���;0/-621���;0/

)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5

(WF���(WF���(WF���(WF���

%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV

,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������

)LUHIR[)LUHIR[)LUHIR[)LUHIR[

2SHUD2SHUD2SHUD2SHUD

6DIDUL6DIDUL6DIDUL6DIDUL

*RRJOH�&KURPH*RRJOH�&KURPH*RRJOH�&KURPH*RRJOH�&KURPH

0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����

)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\

<8,<8,<8,<8,

-4XHU\-4XHU\-4XHU\-4XHU\

'RMR'RMR'RMR'RMR

0RRWRROV0RRWRROV0RRWRROV0RRWRROV

3URWRW\SH3URWRW\SH3URWRW\SH3URWRW\SH

(WF���(WF���(WF���(WF���

'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO

7H[W�(GLWRU7H[W�(GLWRU7H[W�(GLWRU7H[W�(GLWRU

9,09,09,09,0

7H[WPDWH7H[WPDWH7H[WPDWH7H[WPDWH

(GLW3OXV(GLW3OXV(GLW3OXV(GLW3OXV $SWDQD$SWDQD$SWDQD$SWDQD

1RWH3DG��1RWH3DG��1RWH3DG��1RWH3DG��

(WF���(WF���(WF���(WF���

8,�'HVLJQ8,�'HVLJQ8,�'HVLJQ8,�'HVLJQ

3KRWRVKRS3KRWRVKRS3KRWRVKRS3KRWRVKRS

)LUHZRUNV)LUHZRUNV)LUHZRUNV)LUHZRUNV

,OOXVWUDWRU,OOXVWUDWRU,OOXVWUDWRU,OOXVWUDWRU

)ODVK)ODVK)ODVK)ODVK

&RORU�&URS&RORU�&URS&RORU�&URS&RORU�&URS

(WF���(WF���(WF���(WF���

9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO691691691691

&96&96&96&96

2WKHU2WKHU2WKHU2WKHU

)LUHEXJ)LUHEXJ)LUHEXJ)LUHEXJ

-6/LQW-6/LQW-6/LQW-6/LQW

<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�

<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�

6PXVK�LW6PXVK�LW6PXVK�LW6PXVK�LW

3HUIRUPDQFH3HUIRUPDQFH3HUIRUPDQFH3HUIRUPDQFH6PXVK�LW6PXVK�LW6PXVK�LW6PXVK�LW

<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�

<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�

2SHQ�$SL2SHQ�$SL2SHQ�$SL2SHQ�$SL<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���

*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���

$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�

:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�

+70/���+70/����[+70/+70/���+70/����[+70/+70/���+70/����[+70/+70/���+70/����[+70/

&66���&66�&66���&66�&66���&66�&66���&66�

;0/���566���-621;0/���566���-621;0/���566���-621;0/���566���-621

0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH

2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ

8,���8;�'HVLJQ8,���8;�'HVLJQ8,���8;�'HVLJQ8,���8;�'HVLJQ

3URWRW\SLQJ3URWRW\SLQJ3URWRW\SLQJ3URWRW\SLQJ

&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO

3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO

$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ

3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV

+DFN�6NLOO+DFN�6NLOO+DFN�6NLOO+DFN�6NLOO

(WF���(WF���(WF���(WF���

6HFXULW\6HFXULW\6HFXULW\6HFXULW\

&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�

;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�

;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�

)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV

&OLFNMDFNLQJ&OLFNMDFNLQJ&OLFNMDFNLQJ&OLFNMDFNLQJ

7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ

)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU

Performance

Page 26: HiUED 前端/web 發展和體驗

&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH

+70/+70/+70/+70/

&66&66&66&66

-DYD6FULSW��-6213-DYD6FULSW��-6213-DYD6FULSW��-6213-DYD6FULSW��-6213

3+33+33+33+3

-621���;0/-621���;0/-621���;0/-621���;0/

)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5

(WF���(WF���(WF���(WF���

%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV

,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������

)LUHIR[)LUHIR[)LUHIR[)LUHIR[

2SHUD2SHUD2SHUD2SHUD

6DIDUL6DIDUL6DIDUL6DIDUL

*RRJOH�&KURPH*RRJOH�&KURPH*RRJOH�&KURPH*RRJOH�&KURPH

0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����

)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\

<8,<8,<8,<8,

-4XHU\-4XHU\-4XHU\-4XHU\

'RMR'RMR'RMR'RMR

0RRWRROV0RRWRROV0RRWRROV0RRWRROV

3URWRW\SH3URWRW\SH3URWRW\SH3URWRW\SH

(WF���(WF���(WF���(WF���

'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO

7H[W�(GLWRU7H[W�(GLWRU7H[W�(GLWRU7H[W�(GLWRU

9,09,09,09,0

7H[WPDWH7H[WPDWH7H[WPDWH7H[WPDWH

(GLW3OXV(GLW3OXV(GLW3OXV(GLW3OXV $SWDQD$SWDQD$SWDQD$SWDQD

1RWH3DG��1RWH3DG��1RWH3DG��1RWH3DG��

(WF���(WF���(WF���(WF���

8,�'HVLJQ8,�'HVLJQ8,�'HVLJQ8,�'HVLJQ

3KRWRVKRS3KRWRVKRS3KRWRVKRS3KRWRVKRS

)LUHZRUNV)LUHZRUNV)LUHZRUNV)LUHZRUNV

,OOXVWUDWRU,OOXVWUDWRU,OOXVWUDWRU,OOXVWUDWRU

)ODVK)ODVK)ODVK)ODVK

&RORU�&URS&RORU�&URS&RORU�&URS&RORU�&URS

(WF���(WF���(WF���(WF���

9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO691691691691

&96&96&96&96

2WKHU2WKHU2WKHU2WKHU

)LUHEXJ)LUHEXJ)LUHEXJ)LUHEXJ

-6/LQW-6/LQW-6/LQW-6/LQW

<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�

<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�

6PXVK�LW6PXVK�LW6PXVK�LW6PXVK�LW

3HUIRUPDQFH3HUIRUPDQFH3HUIRUPDQFH3HUIRUPDQFH6PXVK�LW6PXVK�LW6PXVK�LW6PXVK�LW

<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�

<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�

2SHQ�$SL2SHQ�$SL2SHQ�$SL2SHQ�$SL<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���

*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���

$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�

:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�

+70/���+70/����[+70/+70/���+70/����[+70/+70/���+70/����[+70/+70/���+70/����[+70/

&66���&66�&66���&66�&66���&66�&66���&66�

;0/���566���-621;0/���566���-621;0/���566���-621;0/���566���-621

0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH

2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ

8,���8;�'HVLJQ8,���8;�'HVLJQ8,���8;�'HVLJQ8,���8;�'HVLJQ

3URWRW\SLQJ3URWRW\SLQJ3URWRW\SLQJ3URWRW\SLQJ

&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO

3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO

$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ

3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV

+DFN�6NLOO+DFN�6NLOO+DFN�6NLOO+DFN�6NLOO

(WF���(WF���(WF���(WF���

6HFXULW\6HFXULW\6HFXULW\6HFXULW\

&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�

;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�

;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�

)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV

&OLFNMDFNLQJ&OLFNMDFNLQJ&OLFNMDFNLQJ&OLFNMDFNLQJ

7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ

)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU

Browser Capabilities

Page 27: HiUED 前端/web 發展和體驗

&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH

+70/+70/+70/+70/

&66&66&66&66

-DYD6FULSW��-6213-DYD6FULSW��-6213-DYD6FULSW��-6213-DYD6FULSW��-6213

3+33+33+33+3

-621���;0/-621���;0/-621���;0/-621���;0/

)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5

(WF���(WF���(WF���(WF���

%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV

,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������

)LUHIR[)LUHIR[)LUHIR[)LUHIR[

2SHUD2SHUD2SHUD2SHUD

6DIDUL6DIDUL6DIDUL6DIDUL

*RRJOH�&KURPH*RRJOH�&KURPH*RRJOH�&KURPH*RRJOH�&KURPH

0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����

)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\

<8,<8,<8,<8,

-4XHU\-4XHU\-4XHU\-4XHU\

'RMR'RMR'RMR'RMR

0RRWRROV0RRWRROV0RRWRROV0RRWRROV

3URWRW\SH3URWRW\SH3URWRW\SH3URWRW\SH

(WF���(WF���(WF���(WF���

'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO

7H[W�(GLWRU7H[W�(GLWRU7H[W�(GLWRU7H[W�(GLWRU

9,09,09,09,0

7H[WPDWH7H[WPDWH7H[WPDWH7H[WPDWH

(GLW3OXV(GLW3OXV(GLW3OXV(GLW3OXV $SWDQD$SWDQD$SWDQD$SWDQD

1RWH3DG��1RWH3DG��1RWH3DG��1RWH3DG��

(WF���(WF���(WF���(WF���

8,�'HVLJQ8,�'HVLJQ8,�'HVLJQ8,�'HVLJQ

3KRWRVKRS3KRWRVKRS3KRWRVKRS3KRWRVKRS

)LUHZRUNV)LUHZRUNV)LUHZRUNV)LUHZRUNV

,OOXVWUDWRU,OOXVWUDWRU,OOXVWUDWRU,OOXVWUDWRU

)ODVK)ODVK)ODVK)ODVK

&RORU�&URS&RORU�&URS&RORU�&URS&RORU�&URS

(WF���(WF���(WF���(WF���

9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO691691691691

&96&96&96&96

2WKHU2WKHU2WKHU2WKHU

)LUHEXJ)LUHEXJ)LUHEXJ)LUHEXJ

-6/LQW-6/LQW-6/LQW-6/LQW

<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�

<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�

6PXVK�LW6PXVK�LW6PXVK�LW6PXVK�LW

3HUIRUPDQFH3HUIRUPDQFH3HUIRUPDQFH3HUIRUPDQFH6PXVK�LW6PXVK�LW6PXVK�LW6PXVK�LW

<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�

<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�

2SHQ�$SL2SHQ�$SL2SHQ�$SL2SHQ�$SL<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���

*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���

$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�

:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�

+70/���+70/����[+70/+70/���+70/����[+70/+70/���+70/����[+70/+70/���+70/����[+70/

&66���&66�&66���&66�&66���&66�&66���&66�

;0/���566���-621;0/���566���-621;0/���566���-621;0/���566���-621

0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH

2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ

8,���8;�'HVLJQ8,���8;�'HVLJQ8,���8;�'HVLJQ8,���8;�'HVLJQ

3URWRW\SLQJ3URWRW\SLQJ3URWRW\SLQJ3URWRW\SLQJ

&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO

3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO

$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ

3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV

+DFN�6NLOO+DFN�6NLOO+DFN�6NLOO+DFN�6NLOO

(WF���(WF���(WF���(WF���

6HFXULW\6HFXULW\6HFXULW\6HFXULW\

&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�

;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�

;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�

)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV

&OLFNMDFNLQJ&OLFNMDFNLQJ&OLFNMDFNLQJ&OLFNMDFNLQJ

7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ

)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU

Browser Capabilities

Page 28: HiUED 前端/web 發展和體驗

&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH

+70/+70/+70/+70/

&66&66&66&66

-DYD6FULSW��-6213-DYD6FULSW��-6213-DYD6FULSW��-6213-DYD6FULSW��-6213

3+33+33+33+3

-621���;0/-621���;0/-621���;0/-621���;0/

)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5

(WF���(WF���(WF���(WF���

%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV

,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������

)LUHIR[)LUHIR[)LUHIR[)LUHIR[

2SHUD2SHUD2SHUD2SHUD

6DIDUL6DIDUL6DIDUL6DIDUL

*RRJOH�&KURPH*RRJOH�&KURPH*RRJOH�&KURPH*RRJOH�&KURPH

0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����

)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\

<8,<8,<8,<8,

-4XHU\-4XHU\-4XHU\-4XHU\

'RMR'RMR'RMR'RMR

0RRWRROV0RRWRROV0RRWRROV0RRWRROV

3URWRW\SH3URWRW\SH3URWRW\SH3URWRW\SH

(WF���(WF���(WF���(WF���

'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO

7H[W�(GLWRU7H[W�(GLWRU7H[W�(GLWRU7H[W�(GLWRU

9,09,09,09,0

7H[WPDWH7H[WPDWH7H[WPDWH7H[WPDWH

(GLW3OXV(GLW3OXV(GLW3OXV(GLW3OXV $SWDQD$SWDQD$SWDQD$SWDQD

1RWH3DG��1RWH3DG��1RWH3DG��1RWH3DG��

(WF���(WF���(WF���(WF���

8,�'HVLJQ8,�'HVLJQ8,�'HVLJQ8,�'HVLJQ

3KRWRVKRS3KRWRVKRS3KRWRVKRS3KRWRVKRS

)LUHZRUNV)LUHZRUNV)LUHZRUNV)LUHZRUNV

,OOXVWUDWRU,OOXVWUDWRU,OOXVWUDWRU,OOXVWUDWRU

)ODVK)ODVK)ODVK)ODVK

&RORU�&URS&RORU�&URS&RORU�&URS&RORU�&URS

(WF���(WF���(WF���(WF���

9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO691691691691

&96&96&96&96

2WKHU2WKHU2WKHU2WKHU

)LUHEXJ)LUHEXJ)LUHEXJ)LUHEXJ

-6/LQW-6/LQW-6/LQW-6/LQW

<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�

<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�

6PXVK�LW6PXVK�LW6PXVK�LW6PXVK�LW

3HUIRUPDQFH3HUIRUPDQFH3HUIRUPDQFH3HUIRUPDQFH6PXVK�LW6PXVK�LW6PXVK�LW6PXVK�LW

<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�

<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�

2SHQ�$SL2SHQ�$SL2SHQ�$SL2SHQ�$SL<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���

*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���

$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�

:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�

+70/���+70/����[+70/+70/���+70/����[+70/+70/���+70/����[+70/+70/���+70/����[+70/

&66���&66�&66���&66�&66���&66�&66���&66�

;0/���566���-621;0/���566���-621;0/���566���-621;0/���566���-621

0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH

2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ

8,���8;�'HVLJQ8,���8;�'HVLJQ8,���8;�'HVLJQ8,���8;�'HVLJQ

3URWRW\SLQJ3URWRW\SLQJ3URWRW\SLQJ3URWRW\SLQJ

&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO

3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO

$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ

3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV

+DFN�6NLOO+DFN�6NLOO+DFN�6NLOO+DFN�6NLOO

(WF���(WF���(WF���(WF���

6HFXULW\6HFXULW\6HFXULW\6HFXULW\

&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�

;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�

;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�

)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV

&OLFNMDFNLQJ&OLFNMDFNLQJ&OLFNMDFNLQJ&OLFNMDFNLQJ

7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ

)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU

Browser Capabilities

Page 29: HiUED 前端/web 發展和體驗

&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH

+70/+70/+70/+70/

&66&66&66&66

-DYD6FULSW��-6213-DYD6FULSW��-6213-DYD6FULSW��-6213-DYD6FULSW��-6213

3+33+33+33+3

-621���;0/-621���;0/-621���;0/-621���;0/

)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5

(WF���(WF���(WF���(WF���

%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV

,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������

)LUHIR[)LUHIR[)LUHIR[)LUHIR[

2SHUD2SHUD2SHUD2SHUD

6DIDUL6DIDUL6DIDUL6DIDUL

*RRJOH�&KURPH*RRJOH�&KURPH*RRJOH�&KURPH*RRJOH�&KURPH

0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����

)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\

<8,<8,<8,<8,

-4XHU\-4XHU\-4XHU\-4XHU\

'RMR'RMR'RMR'RMR

0RRWRROV0RRWRROV0RRWRROV0RRWRROV

3URWRW\SH3URWRW\SH3URWRW\SH3URWRW\SH

(WF���(WF���(WF���(WF���

'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO

7H[W�(GLWRU7H[W�(GLWRU7H[W�(GLWRU7H[W�(GLWRU

9,09,09,09,0

7H[WPDWH7H[WPDWH7H[WPDWH7H[WPDWH

(GLW3OXV(GLW3OXV(GLW3OXV(GLW3OXV $SWDQD$SWDQD$SWDQD$SWDQD

1RWH3DG��1RWH3DG��1RWH3DG��1RWH3DG��

(WF���(WF���(WF���(WF���

8,�'HVLJQ8,�'HVLJQ8,�'HVLJQ8,�'HVLJQ

3KRWRVKRS3KRWRVKRS3KRWRVKRS3KRWRVKRS

)LUHZRUNV)LUHZRUNV)LUHZRUNV)LUHZRUNV

,OOXVWUDWRU,OOXVWUDWRU,OOXVWUDWRU,OOXVWUDWRU

)ODVK)ODVK)ODVK)ODVK

&RORU�&URS&RORU�&URS&RORU�&URS&RORU�&URS

(WF���(WF���(WF���(WF���

9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO691691691691

&96&96&96&96

2WKHU2WKHU2WKHU2WKHU

)LUHEXJ)LUHEXJ)LUHEXJ)LUHEXJ

-6/LQW-6/LQW-6/LQW-6/LQW

<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�

<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�

6PXVK�LW6PXVK�LW6PXVK�LW6PXVK�LW

3HUIRUPDQFH3HUIRUPDQFH3HUIRUPDQFH3HUIRUPDQFH6PXVK�LW6PXVK�LW6PXVK�LW6PXVK�LW

<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�

<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�

2SHQ�$SL2SHQ�$SL2SHQ�$SL2SHQ�$SL<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���

*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���

$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�

:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�

+70/���+70/����[+70/+70/���+70/����[+70/+70/���+70/����[+70/+70/���+70/����[+70/

&66���&66�&66���&66�&66���&66�&66���&66�

;0/���566���-621;0/���566���-621;0/���566���-621;0/���566���-621

0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH

2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ

8,���8;�'HVLJQ8,���8;�'HVLJQ8,���8;�'HVLJQ8,���8;�'HVLJQ

3URWRW\SLQJ3URWRW\SLQJ3URWRW\SLQJ3URWRW\SLQJ

&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO

3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO

$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ

3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV

+DFN�6NLOO+DFN�6NLOO+DFN�6NLOO+DFN�6NLOO

(WF���(WF���(WF���(WF���

6HFXULW\6HFXULW\6HFXULW\6HFXULW\

&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�

;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�

;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�

)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV

&OLFNMDFNLQJ&OLFNMDFNLQJ&OLFNMDFNLQJ&OLFNMDFNLQJ

7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ

)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU

Others

Page 30: HiUED 前端/web 發展和體驗

&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH&RGLQJ�/DQJXDJH

+70/+70/+70/+70/

&66&66&66&66

-DYD6FULSW��-6213-DYD6FULSW��-6213-DYD6FULSW��-6213-DYD6FULSW��-6213

3+33+33+33+3

-621���;0/-621���;0/-621���;0/-621���;0/

)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5)OH[���$FWLRQ6FULSW���$,5

(WF���(WF���(WF���(WF���

%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV%URZVHU�&DSDELOLWLHV

,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������,QWHUQHW�([SORUHU����������

)LUHIR[)LUHIR[)LUHIR[)LUHIR[

2SHUD2SHUD2SHUD2SHUD

6DIDUL6DIDUL6DIDUL6DIDUL

*RRJOH�&KURPH*RRJOH�&KURPH*RRJOH�&KURPH*RRJOH�&KURPH

0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����0RELOH���79���*DPH��363�HWF����

)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\)UDPHZRUN���/LEUDU\

<8,<8,<8,<8,

-4XHU\-4XHU\-4XHU\-4XHU\

'RMR'RMR'RMR'RMR

0RRWRROV0RRWRROV0RRWRROV0RRWRROV

3URWRW\SH3URWRW\SH3URWRW\SH3URWRW\SH

(WF���(WF���(WF���(WF���

'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO'HYHORSPHQW�7RRO

7H[W�(GLWRU7H[W�(GLWRU7H[W�(GLWRU7H[W�(GLWRU

9,09,09,09,0

7H[WPDWH7H[WPDWH7H[WPDWH7H[WPDWH

(GLW3OXV(GLW3OXV(GLW3OXV(GLW3OXV $SWDQD$SWDQD$SWDQD$SWDQD

1RWH3DG��1RWH3DG��1RWH3DG��1RWH3DG��

(WF���(WF���(WF���(WF���

8,�'HVLJQ8,�'HVLJQ8,�'HVLJQ8,�'HVLJQ

3KRWRVKRS3KRWRVKRS3KRWRVKRS3KRWRVKRS

)LUHZRUNV)LUHZRUNV)LUHZRUNV)LUHZRUNV

,OOXVWUDWRU,OOXVWUDWRU,OOXVWUDWRU,OOXVWUDWRU

)ODVK)ODVK)ODVK)ODVK

&RORU�&URS&RORU�&URS&RORU�&URS&RORU�&URS

(WF���(WF���(WF���(WF���

9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO9HUVLRQ�&RQWURO691691691691

&96&96&96&96

2WKHU2WKHU2WKHU2WKHU

)LUHEXJ)LUHEXJ)LUHEXJ)LUHEXJ

-6/LQW-6/LQW-6/LQW-6/LQW

<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�

<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�

6PXVK�LW6PXVK�LW6PXVK�LW6PXVK�LW

3HUIRUPDQFH3HUIRUPDQFH3HUIRUPDQFH3HUIRUPDQFH6PXVK�LW6PXVK�LW6PXVK�LW6PXVK�LW

<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�<6ORZ�����5XOHV�

<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�<8,�&RPSUHVVRU��0LQLILHG�-6�&66�

2SHQ�$SL2SHQ�$SL2SHQ�$SL2SHQ�$SL<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���<DKRR��<26��<$3��)OLFNU�6HDUFK0RQNH\�(WF���

*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���*RRJOH��0DS��<RXWXEH��6HDUFK�(WF���

$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�$SL�'DVKERDUG��KWWS���ZZZ�SURJUDPPDEOHZHE�FRP�DSLV�

:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�:HE�6WDQGDUGV��:�&�

+70/���+70/����[+70/+70/���+70/����[+70/+70/���+70/����[+70/+70/���+70/����[+70/

&66���&66�&66���&66�&66���&66�&66���&66�

;0/���566���-621;0/���566���-621;0/���566���-621;0/���566���-621

0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH0RELOH���7RXFK�'HYLFH

2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ2WKHU�.QRZ�KRZ

8,���8;�'HVLJQ8,���8;�'HVLJQ8,���8;�'HVLJQ8,���8;�'HVLJQ

3URWRW\SLQJ3URWRW\SLQJ3URWRW\SLQJ3URWRW\SLQJ

&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO&RPPXQLFDWLRQ�6NLOO

3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO3UHVHQWDWLRQ�6NLOO

$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ$UFKLWHFWXUH�'HVLJQ

3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV3URMHFW�0DQDJHPHQW���3URFHVV

+DFN�6NLOO+DFN�6NLOO+DFN�6NLOO+DFN�6NLOO

(WF���(WF���(WF���(WF���

6HFXULW\6HFXULW\6HFXULW\6HFXULW\

&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�&OLHQW�6HFXULW\��+70/��-6��&66��$MD[�

;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�;;6��&URVV�VLGH�6FULSWLQJ�

;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�;65)��&URVV�VLWH�5HTXHVW�)RUJHU\�

)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV)ODVK�&URVV�'RPDLQ���6KDUHG�/RFDO�2EMHFWV

&OLFNMDFNLQJ&OLFNMDFNLQJ&OLFNMDFNLQJ&OLFNMDFNLQJ

7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ7H[W�LQMHFWLRQ

)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU)URQWHQG�(QJLQHHU

F2E Know-How

Page 31: HiUED 前端/web 發展和體驗

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

Page 32: HiUED 前端/web 發展和體驗

简单、可用、无障碍SIMPLE USEFULACCESSIBLE

Page 33: HiUED 前端/web 發展和體驗

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

Page 34: HiUED 前端/web 發展和體驗

Internet Evolution互联网发展

Page 35: HiUED 前端/web 發展和體驗

WEB API MOBILE?

Internet Evolution - Stone Age互联网发展

Page 36: HiUED 前端/web 發展和體驗

WEB MOBILE

Internet Evolution - Iron Age互联网发展

API

Page 37: HiUED 前端/web 發展和體驗

Internet Evolution - Modern Age互联网发展

WEBMOBILEAPI

Page 38: HiUED 前端/web 發展和體驗

PM

UED

FE

SDE

QA

Development Process (Waterfall)开发模式

✓ UI Design ✓ Interaction Design ✓ Prototype ✓ Researcher

Page 39: HiUED 前端/web 發展和體驗

PM UED FE SDE QA

FE

Development Process (Waterfall)开发模式

Page 40: HiUED 前端/web 發展和體驗

Development Process (Agile)开发模式

PM

UED

FE

SDEQA

Agile敏捷开发

Page 41: HiUED 前端/web 發展和體驗

1990 - 2011

http://evolutionofweb.appspot.com/

Page 42: HiUED 前端/web 發展和體驗

2007 Mobile

Internet Evolution

Page 43: HiUED 前端/web 發展和體驗

1992

Internet Evolution

Page 44: HiUED 前端/web 發展和體驗

1996

Internet Evolution

Page 45: HiUED 前端/web 發展和體驗

2002

Internet Evolution

Page 46: HiUED 前端/web 發展和體驗

2006 - 2007 Web 2.0

Internet Evolution

Page 47: HiUED 前端/web 發展和體驗

Flash

Internet Evolution

Page 48: HiUED 前端/web 發展和體驗

2007 (iPhone)

Internet Evolution

Page 49: HiUED 前端/web 發展和體驗

Technology Changed Our Life

Internet Evolution

Page 50: HiUED 前端/web 發展和體驗

2009

Internet Evolution

Page 51: HiUED 前端/web 發展和體驗

Mobile APP

Internet Evolution

Page 52: HiUED 前端/web 發展和體驗

Mobile APP Pattern

Internet Evolution

Page 53: HiUED 前端/web 發展和體驗

2010 - 2011

Internet Evolution

Page 54: HiUED 前端/web 發展和體驗

HTML 5

Internet Evolution

Page 55: HiUED 前端/web 發展和體驗

HTML 5 Audio

Internet Evolution

Page 56: HiUED 前端/web 發展和體驗

creative director Scott Jenson

2011

Internet Evolution

Page 57: HiUED 前端/web 發展和體驗

Mobile Web

Internet Evolution

Page 58: HiUED 前端/web 發展和體驗

Templates (模板) Modules (模块) Widgets

Application Interface (接口)

Entry-Point, Security, Referral

Application Framework (框架)

Controllers, Templates

In.Sdo Database (数据库)

Services (服务)Api, Storage etc

PlugIns (插件)Pull-Refresh,

News/Article Ajax

Mobile Framework

Internet Evolution

Page 59: HiUED 前端/web 發展和體驗

HTML(5)- Semantic Markup (语义化标签)- Form Fields (表单字段)- History API- Local Storage- Javascript API- Etc...

JQuery

CSS(3)- Text / Box Shadow- Flex Box- CSS Selector- Linear Gradient- Data URI- Etc...

L.A.M.P. (CodeIgniter Framework)

Frontend

Backend

Mobile Framework

Internet Evolution

Page 60: HiUED 前端/web 發展和體驗

性能评分: 80+

总请求数: 44

主要请求数 44

总大小: ±1639.5k

性能评分: 90+

总请求数: 14

主要请求数: 4总大小: ±274.4k

Traditional MobileMobile

Traditional

Mobile Framework

Internet Evolution

Page 61: HiUED 前端/web 發展和體驗

✓ SEO able ✓ Good Interactive ✓ Easy Learn Use ✓ Better Animation ✓ Greater Availability ✓ No Reload ✓ Faster Loading ✓ Pixel Perfect ✓ Easy Integration ✓ Audio, Video etc...

✓ Open Web Standard ✓ Performance ✓ HTML, CSS, JS ✓ Offline Mode ✓ Multi Device ✓ Device Resource ✓ Multi Plateform ✓ App Store ✓ Realtime Upate ✓ Awesome UX

Web FLASHNative AppMobile WebMobile/Web/ Hybrid App

Decision

Page 62: HiUED 前端/web 發展和體驗

Responsive Web Design响应式网页设计

Page 63: HiUED 前端/web 發展和體驗

Responsive Web Design响应式网页设计

Page 64: HiUED 前端/web 發展和體驗

Responsive Web Design响应式网页设计

Page 65: HiUED 前端/web 發展和體驗

Responsive Web Design响应式网页设计

Page 66: HiUED 前端/web 發展和體驗

Responsive Web Design响应式网页设计

Page 68: HiUED 前端/web 發展和體驗

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