[EWD]class01 0308

793 views

Published on

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
793
On SlideShare
0
From Embeds
0
Number of Embeds
121
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

[EWD]class01 0308

  1. 1. 익스프레시브 웹 응용 디자인Expressive Web Application Design Expressive Web Application Design | WEEK 1 : Introduction
  2. 2. First ClassORIENTATION Expressive Web Application Design | WEEK 1 : Introduction
  3. 3. Today We Are Going To Cover..1. Class Introduction2. Terms Defining3. Ice Braking4. Q& A Expressive Web Application Design | WEEK 1 : Introduction
  4. 4. 1. Class Introduction001. OUTLINE 이 과목에서는 디자이너에게 RIA를 구현하기 직접 빌더를 이용한 인터랙티브한 실전 예제들을 단계적으로 학습하여 동적이면서 어플리케이션을 직접 만들어 보면서 Flex에 대한 기본적인 이해와 환경과 언어에 대한 습득을 도모한다. 그리고 또한 새롭게 급부상 HTML5와 CSS3를 습득함으로써 웹/모바일 하고 있는 표준화를 위한 인터페이스 구현 능력을 배양하고자 한다. Expressive Web Application Design | WEEK 1 : Introduction
  5. 5. 1. Class Introduction002. GOALS 1. RIA환경에서의 기본적인 어플리케이션 구현에 대한 이해를 도모한다. 2. HTML 5와 CSS3를 통해 효과적이고 표준화된 웹을 개발할 수 있다. 3. Flex의 UI Component를 활용하여 웹 환경에 적합한 최적의 UI 제작할 수 있다. 4. 창의적이인 매력적인 웹 어플리케이션에 대한 시각과 방법 제시할 수 있다. Expressive Web Application Design | WEEK 1 : Introduction
  6. 6. 1. Class Introduction003. 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. 7. 1. Class Introduction003. 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. 8. 1. Class Introduction004. 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. 9. 2. Terms Defining001. RIA? Rich Internet Application 다양한 UI를 웹브라우저에 그려주는 전용 그래픽 엔진을 기반으로 작동 멀티미디어 도구와 데이터베이스가 연동되는 단일 인터페이스를 통해 기존의 웹에서 는 볼 수 없었던 다이내믹하고 편리한 고객 중심의 웹 페이지제공 Expressive Web Application Design | WEEK 1 : Introduction
  10. 10. 2. Terms Defining001. RIA?X-Internet VS RIARIA = X-Internet + Rich Media Expressive Web Application Design | WEEK 1 : Introduction
  11. 11. 2. Terms Defining001. RIA? Desktop Applications RIA Communication Web Technologies Applications Expressive Web Application Design | WEEK 1 : Introduction
  12. 12. 2. Terms Defining001. RIA? Client/Server 장점 RIA Web 장점 Expressive Web Application Design | WEEK 1 : Introduction
  13. 13. 2. Terms Defining001. RIA? 구분 클라이언트/서버 웹 RIA UI 자체 HTML 자체 설치프로그램 클라이언트 모듈 X Flash Player 웨서비스 이용 Low High High 웹의 장점 대용량 데이타 처리 가능 제한적 가능 오프라인 작업 가능 불가능 가능 실시간 모니터링 가능 제한적 가능 클라이언트/서버 장 점 프로그램 배포 제한적 X 자동배포 컨포넌트 개발 제한적 템플릿화 가능 네트워크 사용량 Low High Low Expressive Web Application Design | WEEK 1 : Introduction
  14. 14. 2. Terms Defining001. RIA? Rich Internet Application Ajax, Curl, GWT, Adobe Flash/Adobe Flex/AIR, Java/JavaFX, Apache Pivot, Mozillas XUL, OpenLaszlo and Microsoft Silverlight Expressive Web Application Design | WEEK 1 : Introduction
  15. 15. 2. Terms Defining001. RIA? RIA Component 실행환경 Component 실행엔진 Component 실행코드 Component Library Expressive Web Application Design | WEEK 1 : Introduction
  16. 16. 2. Terms Defining001. 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. 17. 2. Terms Defining001. 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. 18. 2. Terms Defining001. RIA?. HTML이 구현하지 못하는 다양한 유저 컨트롤과 그래픽를 효과를 개발할수 있도록 Component Library를 제공. UI 처리를 위한 엔진 제공. 이는 브라우저가 그려내지 못하는 그래픽 요소를 화면으로 그려내기 위함. 실행 코드가 서버에서 클라이언트로 전송. 서버 부하를 줄이기 위해 클라이언트 엔진에서 코드를 실행하여 보여줌. 다양한 장치에서 같은 화면구성을 볼수 있게 됨. 일부 RIA에서 클라이언트는 웹뿐만 아닌 모바일 환경에서도 동일한 인터페이스 경험 가능 Expressive Web Application Design | WEEK 1 : Introduction
  19. 19. 2. Terms Defining002. Flex Adobe FLEX XML태그로된 스크립트(*.mxml)를 작성해서 컴파일러로 컴파일하면 플래시로 된 화면을 만들수 있는 RIA개발 솔류션. Expressive Web Application Design | WEEK 1 : Introduction
  20. 20. 2. Terms Defining002. Flex MXML Compiling SWF Expressive Web Application Design | WEEK 1 : Introduction
  21. 21. 2. Terms Defining003. Flex vs Flash Expressive Web Application Design | WEEK 1 : Introduction
  22. 22. 2. Terms Defining 003. Flex vs FlashFLEX FLASH SON FATHER FORCE = FLASH PLAYER Expressive Web Application Design | WEEK 1 : Introduction
  23. 23. 2. Terms Defining004. Flex Builder Expressive Web Application Design | WEEK 1 : Introduction
  24. 24. 2. Terms Defining005. WEB 2.0 & FLEX VIEW (Rich Internet) FLEX Model Controller (표준화된 데이터) (Open API) Expressive Web Application Design | WEEK 1 : Introduction
  25. 25. 2. Terms Defining005. 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. 26. 2. Terms Defining 005. WEB 2.0 & FLEXComponents,Effects, Layouts,Primitives, Styles사용법에 대해서 쉬운 예제 제공 Expressive Web Application Design | WEEK 1 : Introduction
  27. 27. FOR Next Week* 본인이 생각하는 제일 최신 Web Trend 소개 Attractive, Fun, Adorable, Effective, Love … Expressive Web Application Design | WEEK 1 : Introduction

×