[EWD]class02 0315

Expressive Web Application Design | WEEK 2 : FLEX.HTML5


Second Class | 0315

Flex(30m)

HTML5(20m)

Web Design Basics(30m)

Website : ewd.jylee6977.com/tc (next mon)


1. Flex

001. Flex & Issues


1. Flex . Flex . Flex

002. Conditions of Flex

information structures, process

structures, creation structures

1

2 3

4

5



003. Flex & RIA

https://www.cotswoldoutdoor.com/



003. Flex & RIA

Flex tabs, sliders, trees, data grids drag and drop, direct selection, in-place validation .

.

https://www.cotswoldoutdoor.com/



003. Flex & RIA

, , API . Google Finance YouTube

Google Finance YouTube

http://www.google.com/finance?q=INDEXDJX:.DJI,INDEXSP:.INX,INDEXNASDAQ:.IXIC

http://www.google.com/finance?q=INDEXDJX:.DJI,INDEXSP:.INX,INDEXNASDAQ:.IXIC


Window Dreamweaver Mac Adobe Connect


003. Flex & RIA

http://www.adobe.com/devnet/flex/articles/fig_pt6_03.html



004. Flex & HTML



004. Flex & HTML



004. Flex & HTML

http://examples.adobe.com/flex2/inproduct/sdk/flexstore/flexstore.html



005. Flex & Desktop Client

- ( , , , ) WIMP

- MFC, Cocoa, Java Swing UI

- UI

- UI

“ ?”

Flex -

- ,

- .

- , .

“

”

** Adobe Flash Player + =



005. Flex & Flash



006. Flex & Flash



2. HTML5

001. Best HTML DEMOS

http://www.onextrapixel.com/2010/12/10/31-modern-html5-demos-that-can-beat-flash/


“웹을 둘러싼 난무한 비표준을 지양하고 지능적이고 실행가능한 웹 구현을 위해 탄생한 차세대 웹표준 기술이다.” 웹이 더 이상 문서공유나 문서 표현만을 위한것이 아니라 하나의 응용프로그램으로 진화하고 있다. HTML5는 HTML4.01 XHTML1.0에 대한 차세대 표준안이며,현재 W3C를 주축으로 애플,모질라,구글,오페라,MS등 웹브라우저 벤더가 참여하고있는 산업표준이다. 기존의 html 표준의 한계(기존의 시멘틱하지 못한 마크업)를 극복하는 차세대 웹표준이며, 리치웹 응용을 가능하게 한다. =>엑티브엑스,플래시등의 플러그인의 문제점 보완

2. HTML5

002. What is HTML5


2. HTML5

003. History of HTML


2. HTML5



2. HTML5



일반문서 : http://www.w3.org/TR/html5/

웹퍼블리셔 : http://dev.w3.org/html5/spec-author-view/

Rich UI 개발자 : http://dev.w3.org/html5/2dcontext/

웹 어플리케이션 및 백엔드 개발자 : http://dev.w3.org/html5/eventsource/

http://www.clearboth.org/html5/spec.html

2. HTML5



1. "시멘틱한 마크업" 기존의 html4보다 더 명확한 의미 표현이 가능하도록 26개 정도의 새로운 마크업이 추가되었다.

2. API 다양한 응용 개발을 지원

2. HTML5



2. HTML5



001.


002. Information Archtecture


003. Interface/Navigation Design


https://gomockingbird.com/

http://lovelycharts.com/

http://www.lumzy.com/

https://www.jumpchart.com/

http://balsamiq.com/

http://www.google.com/google-d-s/drawings/



Fuel

Yahoo Stensil

Wireframe Symbols

Free Sketching Kit


http://www.fuelyourinterface.com/free-web-ui-wireframe-kit/

http://developer.yahoo.com/ypatterns/about/stencils/

http://developer.yahoo.com/ypatterns/about/stencils/

http://www.johnnynines.com/2009/03/wireframe-symbols/

http://www.jankoatwarpspeed.com/post/2009/12/24/sketching-wireframing-kit.aspx


www.freewebsitetemplates.com www.websitetemplatesonline.com www.andreasviklund.com/templates/ www.templatemonster.com/ www.oswd.org/ www.freewebsitetemplates.com/freewebsite/ 3. Free Web Tools

Site.google.com/site www.wordpress.com

http://imcreator.com/


http://www.freewebsitetemplates.com/

http://www.websitetemplatesonline.com/

http://www.andreasviklund.com/templates/

http://www.templatemonster.com/

http://www.oswd.org/


FOR Next Week * 무엇을 디자인할것인가?

내용. 내용. 내용. Contents Creation

Technology

[EWD]class02 0315