KGIT 2012 Expressive Web Application Design Class Note Week 1 _ Introduction

1. 익스프레시브 웹 응용 디자인
Expressive Web Application Design
Expressive Web Application Design | WEEK 1 : Introduction

2. First Class
ORIENTATION
Expressive Web Application Design | WEEK 1 : Introduction

3. Today We Are Going To Cover..
1. Class Introduction
2. Terms Defining
3. Ice Braking
4. Q& A
Expressive Web Application Design | WEEK 1 : Introduction

4. 1. Class Introduction
001. OUTLINE
이 과목에서는 디자이너에게 RIA를 구현하기 직접 빌더를 이용한
인터랙티브한
실전 예제들을 단계적으로 학습하여 동적이면서
어플리케이션을 직접 만들어 보면서 Flex에 대한 기본적인
이해와 환경과 언어에 대한 습득을 도모한다. 그리고 또한 새롭게 급부상
HTML5와 CSS3를 습득함으로써 웹/모바일
하고 있는
표준화를 위한 인터페이스 구현 능력을 배양하고자 한다.
Expressive Web Application Design | WEEK 1 : Introduction

5. 1. Class Introduction
002. GOALS
1. RIA환경에서의 기본적인 어플리케이션 구현에 대한 이해를 도모한다.
2. HTML 5와 CSS3를 통해 효과적이고 표준화된 웹을 개발할 수 있다.
3. Flex의 UI Component를 활용하여 웹 환경에 적합한 최적의 UI 제작할 수 있다.
4. 창의적이인 매력적인 웹 어플리케이션에 대한 시각과 방법 제시할 수 있다.
Expressive Web Application Design | WEEK 1 : Introduction

6. 1. Class Introduction
003. METHODOLOGY
Design • Design RIA
Web Application Design • Design Creativity
Practice • Graphic User Interface
UI & Programming • Interactive Programming
Understanding • What is RIA
User & Environment • Who is User
Expressive Web Application Design | WEEK 1 : Introduction

7. 1. Class Introduction
003. METHODOLOGY
Class 1/4
Understanding
Class 2/4 (~Mid Term)
Web Design (HTML5/CSS3)
Class 3/4~4/4 (~Final)
Web App Design (Flex)
Expressive Web Application Design | WEEK 1 : Introduction

8. 1. Class Introduction
004. WEEKLY SCHEDULE
Introduction Course Description
1
Ice Braking What is RIA?
What is happening in Web development field? Issues and Topi
2 RIA and HTML5
cs : Discussion Class
3 Web UX Wire-frame and information design
4 Web Platform Ready made web design tools
New UI design features in HTML
5 HTML5 & CSS(1)
- Animation
New UI design features in HTML
6 HTML5 & CSS(2)
- Transition, Gradients, Fonts, ETC.
New UI design features in HTML
7 HTML5 & CSS(3)
- Media
8 Mid Term Web Site Design with HTML5 & CSS
9 Mid Term Refine Discussion Class with mid term exam
10 Flex Basics(1) Work flow and development environment
11 Flex Basics(1) Basic Languages and final project planning
Flex Component & Flex layout Design
12
Layout Flex UI Components
13 Flex UX (1) Graphic Skin & Cursor for UX Design
14 Flex UX Transition & Filter, Motion for UX Design
15 Final Exam Final Flex Web site
Expressive Web Application Design | WEEK 1 : Introduction

9. 2. Terms Defining
001. RIA?
Rich Internet Application
다양한 UI를 웹브라우저에 그려주는 전용 그래픽 엔진을 기반으로 작동
멀티미디어 도구와 데이터베이스가 연동되는 단일 인터페이스를 통해 기존의 웹에서
는 볼 수 없었던 다이내믹하고 편리한 고객 중심의 웹 페이지제공
Expressive Web Application Design | WEEK 1 : Introduction

10. 2. Terms Defining
001. RIA?
X-Internet VS RIA
RIA = X-Internet + Rich Media
Expressive Web Application Design | WEEK 1 : Introduction

11. 2. Terms Defining
001. RIA?
Desktop
Applications
RIA
Communication Web
Technologies Applications
Expressive Web Application Design | WEEK 1 : Introduction

12. 2. Terms Defining
001. RIA?
Client/Server
장점
RIA
Web
장점
Expressive Web Application Design | WEEK 1 : Introduction

13. 2. Terms Defining
001. RIA?
구분 클라이언트/서버 웹 RIA
UI 자체 HTML 자체
설치프로그램 클라이언트 모듈 X Flash Player
웨서비스 이용 Low High High
웹의 장점
대용량 데이타 처리 가능 제한적 가능
오프라인 작업 가능 불가능 가능
실시간 모니터링 가능 제한적 가능 클라이언트/서버 장
점
프로그램 배포 제한적 X 자동배포
컨포넌트 개발 제한적 템플릿화 가능
네트워크 사용량 Low High Low
Expressive Web Application Design | WEEK 1 : Introduction

14. 2. Terms Defining
001. RIA?
Rich Internet Application
Ajax, Curl, GWT,
Adobe Flash/Adobe Flex/AIR,
Java/JavaFX,
Apache Pivot, Mozilla's XUL,
OpenLaszlo and Microsoft Silverlight
Expressive Web Application Design | WEEK 1 : Introduction

15. 2. Terms Defining
001. RIA?
RIA
Component
실행환경
Component
실행엔진
Component
실행코드
Component
Library
Expressive Web Application Design | WEEK 1 : Introduction

16. 2. Terms Defining
001. RIA?
RIA JAVA FX
Component
실행환경 Web Browser
Component
실행엔진 JVM (Java Virtual Machine)
Component
실행코드 Java Class Code
Java Component Library
Component
Library
Expressive Web Application Design | WEEK 1 : Introduction

17. 2. Terms Defining
001. RIA?
RIA FLEX
Component
실행환경 Web Browser
Component
실행엔진 Flash Player
Component
실행코드 SWF (Flash 실행파일)
Flex Component Library
Component
Library
Expressive Web Application Design | WEEK 1 : Introduction

18. 2. Terms Defining
001. RIA?
. HTML이 구현하지 못하는 다양한 유저 컨트롤과 그래픽를 효과를 개발할수 있
도록 Component Library를 제공
. UI 처리를 위한 엔진 제공. 이는 브라우저가 그려내지 못하는 그래픽 요소
를 화면으로 그려내기 위함
. 실행 코드가 서버에서 클라이언트로 전송. 서버 부하를 줄이기 위해 클라이언
트 엔진에서 코드를 실행하여 보여줌
. 다양한 장치에서 같은 화면구성을 볼수 있게 됨. 일부 RIA에서 클
라이언트는 웹뿐만 아닌 모바일 환경에서도 동일한 인터페이스 경험 가능
Expressive Web Application Design | WEEK 1 : Introduction

19. 2. Terms Defining
002. Flex
Adobe FLEX
XML태그로된 스크립트(*.mxml)를 작성해서
컴파일러로 컴파일하면 플래시로 된 화면을 만들수 있는
RIA개발 솔류션.
Expressive Web Application Design | WEEK 1 : Introduction

20. 2. Terms Defining
002. Flex
MXML
Compiling
SWF
Expressive Web Application Design | WEEK 1 : Introduction

21. 2. Terms Defining
003. Flex vs Flash
Expressive Web Application Design | WEEK 1 : Introduction

22. 2. Terms Defining
003. Flex vs Flash
FLEX FLASH
SON FATHER
FORCE = FLASH PLAYER
Expressive Web Application Design | WEEK 1 : Introduction

23. 2. Terms Defining
004. Flex Builder
Expressive Web Application Design | WEEK 1 : Introduction

24. 2. Terms Defining
005. WEB 2.0 & FLEX
VIEW
(Rich Internet)
FLEX
Model Controller
(표준화된 데이터) (Open API)
Expressive Web Application Design | WEEK 1 : Introduction

25. 2. Terms Defining
005. WEB 2.0 & FLEX
* Expressiveness (vector graphics)
* Performance (JIT compiler)
* Real time (binary sockets and pub/sub messaging)
* Rich media (video and audio streaming)
* Offline support (local storage and desktop client)
Expressive Web Application Design | WEEK 1 : Introduction

26. 2. Terms Defining
005. WEB 2.0 & FLEX
Components,
Effects, Layouts,
Primitives, Styles
사용법에 대해서 쉬
운 예제 제공
Expressive Web Application Design | WEEK 1 : Introduction

27. FOR Next Week
* 본인이 생각하는 제일 최신 Web Trend 소개
Attractive, Fun, Adorable, Effective, Love …
Expressive Web Application Design | WEEK 1 : Introduction