The document summarizes the topics to be covered in week 2 of an expressive web application design course, including: - Flex (30 minutes) - Conditions and uses of Flex, how it works with HTML, and comparisons to desktop clients and Flash. - HTML5 (20 minutes) - Best demos of HTML5, what it is, its history and evolution, semantic markup additions, and API's. - Web Design Basics (30 minutes) - Information architecture, interface/navigation design with examples, free design tools, and templates. Students are asked to decide what to design for next week.

1. Expressive Web Application Design | WEEK 2 : FLEX.HTML5

2. Second Class | 0315
Flex (30m)
HTML5 (20m)
Web Design Basics (30m)
Website : ewd.jylee6977.com/tc (next mon)
Expressive Web Application Design | WEEK 2 : FLEX.HTML5

4. 1. Flex
001. Flex & Issues
Expressive Web Application Design | WEEK 2 : FLEX.HTML5

5. 1. Flex . Flex . Flex
002. Conditions of Flex
1
2
information structures, process
3 structures, creation structures
4
5
Expressive Web Application Design | WEEK 2 : FLEX.HTML5

6. 1. Flex . Flex . Flex
003. Flex & RIA
Expressive Web Application Design | WEEK 2 : FLEX.HTML5

7. 1. Flex . Flex . Flex
003. Flex & RIA
Flex tabs, sliders, trees, data grids drag and drop,
direct selection, in-place validation .
.
Expressive Web Application Design | WEEK 2 : FLEX.HTML5

8. 1. Flex . Flex . Flex
003. Flex & RIA
, , API
. Google Finance YouTube
Google Finance YouTube
Expressive Web Application Design | WEEK 2 : FLEX.HTML5

9. 1. Flex . Flex . Flex
003. Flex & RIA
Mac Adobe Connect
Window Dreamweaver
Expressive Web Application Design | WEEK 2 : FLEX.HTML5

10. 1. Flex . Flex . Flex
004. Flex & HTML
Expressive Web Application Design | WEEK 2 : FLEX.HTML5

11. 1. Flex . Flex . Flex
004. Flex & HTML
Expressive Web Application Design | WEEK 2 : FLEX.HTML5

12. 1. Flex . Flex . Flex
004. Flex & HTML
Expressive Web Application Design | WEEK 2 : FLEX.HTML5

13. 1. Flex . Flex . Flex
005. Flex & Desktop Client
- ( , , , ) WIMP
- MFC, Cocoa, Java Swing UI
- UI
- UI
“ ?”
Flex
-
- ,
- .
- , .
“
”
** Adobe Flash Player + =
Expressive Web Application Design | WEEK 2 : FLEX.HTML5

14. 1. Flex . Flex . Flex
005. Flex & Flash
Expressive Web Application Design | WEEK 2 : FLEX.HTML5

15. 1. Flex . Flex . Flex
006. Flex & Flash
Expressive Web Application Design | WEEK 2 : FLEX.HTML5

16. Expressive Web Application Design | WEEK 2 : FLEX.HTML5

17. 2. HTML5
001. Best HTML DEMOS
Expressive Web Application Design | WEEK 2 : FLEX.HTML5

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

19. 2. HTML5
003. History of HTML
Expressive Web Application Design | WEEK 2 : FLEX.HTML5

20. 2. HTML5
003. History of HTML
Expressive Web Application Design | WEEK 2 : FLEX.HTML5

21. 2. HTML5
003. History of HTML
Expressive Web Application Design | WEEK 2 : FLEX.HTML5

22. 2. HTML5
003. History of HTML
일반문서 : 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
Expressive Web Application Design | WEEK 2 : FLEX.HTML5

23. 2. HTML5
003. History of HTML
1. "시멘틱한 마크업"
기존의 html4보다 더 명확한 의미 표현이 가능하도록 26개 정도의 새로운 마크업이 추가되었다.
2. API
다양한 응용 개발을 지원
Expressive Web Application Design | WEEK 2 : FLEX.HTML5

24. 2. HTML5
003. History of HTML
Expressive Web Application Design | WEEK 2 : FLEX.HTML5

26. 001.
Expressive Web Application Design | WEEK 2 : FLEX.HTML5

27. 002. Information Archtecture
Expressive Web Application Design | WEEK 2 : FLEX.HTML5

28. 003. Interface/Navigation Design
Expressive Web Application Design | WEEK 2 : FLEX.HTML5

29. 003. Interface/Navigation Design
https://gomockingbird.com/ http://www.lumzy.com/ http://balsamiq.com/
http://lovelycharts.com/ https://www.jumpchart.com/ http://www.google.com/google-d-s/drawings/
Expressive Web Application Design | WEEK 2 : FLEX.HTML5

30. 003. Interface/Navigation Design
Fuel Wireframe Symbols
Yahoo Stensil Free Sketching Kit
Expressive Web Application Design | WEEK 2 : FLEX.HTML5

31. 003. Interface/Navigation Design
http://imcreator.com/
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
Expressive Web Application Design | WEEK 2 : FLEX.HTML5

32. FOR Next Week
* 무엇을 디자인할것인가?
내용. 내용. 내용. Contents Creation
Expressive Web Application Design | WEEK 2 : FLEX.HTML5