際際滷

際際滷Share a Scribd company logo
旧ろ觚   
Expressive Web Application Design




                              Expressive Web Application Design | WEEK 1 : Introduction
First Class


ORIENTATION




              Expressive Web Application Design | WEEK 1 : Introduction
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
1. Class Introduction
001. OUTLINE

  螻朱 企蟆         RIA襯 蟲蠍 讌 觜襯 伎
                     誤磯磯
 れ れ 螻朱 牛 企伎
 危襴貅伎 讌 襷れ 覲企伎 Flex  蠍磯蓋
 危伎 蟆所骸 語伎  給 覈. 蠏碁Μ螻  襦蟆 蠍覿
    HTML5 CSS3襯 給朱 /覈覦
 螻 
 譴襯  誤壱伎 蟲 ルレ 覦一螻 .




                                   Expressive Web Application Design | WEEK 1 : Introduction
1. Class Introduction
002. GOALS


     1.   RIA蟆曙 蠍磯蓋 危襴貅伎 蟲  危企ゼ 覈.

     2.   HTML 5 CSS3襯 牛 螻殊願 譴 轟 螳覦  .

     3.   Flex UI Component襯   蟆曙  豕 UI   .

     4.   谿曙伎 襷るレ  危襴貅伎  螳螻 覦覯   .




                                         Expressive Web Application Design | WEEK 1 : Introduction
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
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
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
2. Terms Defining
001. RIA?



   Rich Internet Application
   れ UI襯 豪殊一 蠏碁れ朱    蠏碁 讌 蠍磯朱 
   覃磯碁 蟲 一危磯伎り 磯  誤壱伎るゼ 牛 蠍一ヾ 轟

    覲   れ企企麹螻 ク襴     螻螳 譴  伎螻




                                  Expressive Web Application Design | WEEK 1 : Introduction
2. Terms Defining
001. RIA?



X-Internet VS RIA
RIA = X-Internet + Rich Media




                                Expressive Web Application Design | WEEK 1 : Introduction
2. Terms Defining
001. RIA?


                                     Desktop
                                    Applications




                                       RIA
                    Communication                     Web
                     Technologies                  Applications




                                                              Expressive Web Application Design | WEEK 1 : Introduction
2. Terms Defining
001. RIA?


              Client/Server
                    レ




                              RIA

                    Web
                    レ




                               Expressive Web Application Design | WEEK 1 : Introduction
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
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
2. Terms Defining
001. RIA?

                    RIA

               Component
                ろ蟆


               Component
                ろ讌


               Component
                ろ貊




               Component
                 Library




                           Expressive Web Application Design | WEEK 1 : Introduction
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
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
2. Terms Defining
001. RIA?

. HTML 蟲讌 覈詩 れ  貉碁,螻 蠏碁暑ゼ 螻朱ゼ 螳覦 
襦 Component Library襯 螻

. UI 豌襴襯  讌 螻. 企 觚殊一螳 蠏碁る伎 覈詩 蠏碁 
襯 覃伎朱 蠏碁る願鍵 

. ろ 貊螳 覯 企殊伎誤碁 . 覯 覿襯 譴願鍵  企殊伎
 讌 貊襯 ろ 覲伎譴

. れ レ 螳 覃願規煙 覲殊 蟆 . 朱 RIA 
殊伎誤碁 豪襷  覈覦 蟆曙 狩 誤壱伎 蟆渚 螳




                                Expressive Web Application Design | WEEK 1 : Introduction
2. Terms Defining
002. Flex



 Adobe FLEX

 XML蠏碁 ろ襴渚(*.mxml)襯 燕伎
 貉危朱襦 貉危狩覃 襦  覃伎 襷れ 
 RIA螳覦 襯.




                                 Expressive Web Application Design | WEEK 1 : Introduction
2. Terms Defining
002. Flex




                    MXML

                           Compiling



                                       SWF




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




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


                                 FORCE = FLASH PLAYER




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




                    Expressive Web Application Design | WEEK 1 : Introduction
2. Terms Defining
005. WEB 2.0 & FLEX


                                    VIEW
                               (Rich Internet)




                                  FLEX
                       Model                      Controller
                    (譴 一危)                   (Open API)




                                                               Expressive Web Application Design | WEEK 1 : Introduction
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
2. Terms Defining
    005. WEB 2.0 & FLEX

Components,
Effects, Layouts,
Primitives, Styles
覯 伎 
  螻




                          Expressive Web Application Design | WEEK 1 : Introduction
FOR Next Week
* 覲語語 螳               豕 Web Trend 螳
   Attractive, Fun, Adorable, Effective, Love 




                                             Expressive Web Application Design | WEEK 1 : Introduction

More Related Content

What's hot (6)

Top 10 Questions about HTML5
Top 10 Questions about HTML5Top 10 Questions about HTML5
Top 10 Questions about HTML5
Jonathan Jeon
[uengine.org-uEngine Day] る誤佋骸BPM襷:襦語ろ一襦碁襭
[uengine.org-uEngine Day] る誤佋骸BPM襷:襦語ろ一襦碁襭[uengine.org-uEngine Day] る誤佋骸BPM襷:襦語ろ一襦碁襭
[uengine.org-uEngine Day] る誤佋骸BPM襷:襦語ろ一襦碁襭
Hannah Kim
[D2 ろ碁碁]4.讌覲企螳覦蟆 譯殊一
[D2 ろ碁碁]4.讌覲企螳覦蟆 譯殊一[D2 ろ碁碁]4.讌覲企螳覦蟆 譯殊一
[D2 ろ碁碁]4.讌覲企螳覦蟆 譯殊一
NAVER D2
HTML5 蠍磯 るГ豌 磯 觜 覦 覦(磯ろ 願 伎)
HTML5 蠍磯 るГ豌 磯 觜 覦 覦(磯ろ 願 伎)HTML5 蠍磯 るГ豌 磯 觜 覦 覦(磯ろ 願 伎)
HTML5 蠍磯 るГ豌 磯 觜 覦 覦(磯ろ 願 伎)
JeongHeon Lee
History and Status of HTML5
History and Status of HTML5History and Status of HTML5
History and Status of HTML5
Channy Yun
谿碁 弬骸 HTML5 蠍一
谿碁  弬骸 HTML5 蠍一 谿碁  弬骸 HTML5 蠍一
谿碁 弬骸 HTML5 蠍一
Jonathan Jeon
Top 10 Questions about HTML5
Top 10 Questions about HTML5Top 10 Questions about HTML5
Top 10 Questions about HTML5
Jonathan Jeon
[uengine.org-uEngine Day] る誤佋骸BPM襷:襦語ろ一襦碁襭
[uengine.org-uEngine Day] る誤佋骸BPM襷:襦語ろ一襦碁襭[uengine.org-uEngine Day] る誤佋骸BPM襷:襦語ろ一襦碁襭
[uengine.org-uEngine Day] る誤佋骸BPM襷:襦語ろ一襦碁襭
Hannah Kim
[D2 ろ碁碁]4.讌覲企螳覦蟆 譯殊一
[D2 ろ碁碁]4.讌覲企螳覦蟆 譯殊一[D2 ろ碁碁]4.讌覲企螳覦蟆 譯殊一
[D2 ろ碁碁]4.讌覲企螳覦蟆 譯殊一
NAVER D2
HTML5 蠍磯 るГ豌 磯 觜 覦 覦(磯ろ 願 伎)
HTML5 蠍磯 るГ豌 磯 觜 覦 覦(磯ろ 願 伎)HTML5 蠍磯 るГ豌 磯 觜 覦 覦(磯ろ 願 伎)
HTML5 蠍磯 るГ豌 磯 觜 覦 覦(磯ろ 願 伎)
JeongHeon Lee
History and Status of HTML5
History and Status of HTML5History and Status of HTML5
History and Status of HTML5
Channy Yun
谿碁 弬骸 HTML5 蠍一
谿碁  弬骸 HTML5 蠍一 谿碁  弬骸 HTML5 蠍一
谿碁 弬骸 HTML5 蠍一
Jonathan Jeon

Viewers also liked (7)

[Imr2014]week01
[Imr2014]week01[Imr2014]week01
[Imr2014]week01
JY LEE
蟲蠍 蠍一 伎 覈覦 企殊磯 襴貅伎 螳覦
 蟲蠍 蠍一 伎 覈覦 企殊磯 襴貅伎 螳覦 蟲蠍 蠍一 伎 覈覦 企殊磯 襴貅伎 螳覦
蟲蠍 蠍一 伎 覈覦 企殊磯 襴貅伎 螳覦
LGU+
08_Marching Cube Terrains
08_Marching Cube Terrains08_Marching Cube Terrains
08_Marching Cube Terrains
noerror
[Nux]02 introduction pdf
[Nux]02 introduction pdf[Nux]02 introduction pdf
[Nux]02 introduction pdf
jylee_kgit
An introduction to hadoop
An introduction to hadoopAn introduction to hadoop
An introduction to hadoop
MinJae Kang
Docker introduction
Docker introductionDocker introduction
Docker introduction
Daegwon Kim
[Imr]week1
[Imr]week1[Imr]week1
[Imr]week1
jylee6977
[Imr2014]week01
[Imr2014]week01[Imr2014]week01
[Imr2014]week01
JY LEE
蟲蠍 蠍一 伎 覈覦 企殊磯 襴貅伎 螳覦
 蟲蠍 蠍一 伎 覈覦 企殊磯 襴貅伎 螳覦 蟲蠍 蠍一 伎 覈覦 企殊磯 襴貅伎 螳覦
蟲蠍 蠍一 伎 覈覦 企殊磯 襴貅伎 螳覦
LGU+
08_Marching Cube Terrains
08_Marching Cube Terrains08_Marching Cube Terrains
08_Marching Cube Terrains
noerror
[Nux]02 introduction pdf
[Nux]02 introduction pdf[Nux]02 introduction pdf
[Nux]02 introduction pdf
jylee_kgit
An introduction to hadoop
An introduction to hadoopAn introduction to hadoop
An introduction to hadoop
MinJae Kang
Docker introduction
Docker introductionDocker introduction
Docker introduction
Daegwon Kim
[Imr]week1
[Imr]week1[Imr]week1
[Imr]week1
jylee6977

Similar to [EWD]class01 0308 (20)

01.覈覦 企
01.覈覦  企01.覈覦  企
01.覈覦 企
Hankyo
Web app 螳覦 覦覯襦
Web app 螳覦 覦覯襦Web app 螳覦 覦覯襦
Web app 螳覦 覦覯襦
Sang Seok Lim
轟 覦螻 Adobe Air
轟 覦螻 Adobe Air轟 覦螻 Adobe Air
轟 覦螻 Adobe Air
ろ 蠍磯 觜 り (Example)
ろ  蠍磯  觜 り (Example)ろ  蠍磯  觜 り (Example)
ろ 蠍磯 觜 り (Example)
譴 螻
覈覦狩蟆所骸 螳覦覦
覈覦狩蟆所骸 螳覦覦 覈覦狩蟆所骸 螳覦覦
覈覦狩蟆所骸 螳覦覦
Wendyst Communication
[Ewd]class05 0405
[Ewd]class05 0405[Ewd]class05 0405
[Ewd]class05 0405
jylee6977
[Ewd]class02 0313
[Ewd]class02 0313[Ewd]class02 0313
[Ewd]class02 0313
JY LEE
[EWD2014]CLASS02
[EWD2014]CLASS02[EWD2014]CLASS02
[EWD2014]CLASS02
JY LEE
W3C 蟲 蠍一 レ (2005)
W3C 蟲  蠍一 レ   (2005)W3C 蟲  蠍一 レ   (2005)
W3C 蟲 蠍一 レ (2005)
Channy Yun
企襴 (Hybrid App)
企襴 (Hybrid App)企襴 (Hybrid App)
企襴 (Hybrid App)
Changhwan Yi
誤,C++觜: 覓朱 ろ 螳覦 覓瑚襯 ロ螻
誤,C++觜: 覓朱 ろ 螳覦 覓瑚襯  ロ螻 誤,C++觜: 覓朱 ろ 螳覦 覓瑚襯  ロ螻
誤,C++觜: 覓朱 ろ 螳覦 覓瑚襯 ロ螻
Devgear
HTML5 ろ 螳
HTML5 ろ 螳HTML5 ろ 螳
HTML5 ろ 螳
Toby Yun
語 螳覦 碁 覦 MSA (襷危襦 觜 ろ豎) 危
語 螳覦 碁 覦 MSA (襷危襦 觜 ろ豎) 危語 螳覦 碁 覦 MSA (襷危襦 觜 ろ豎) 危
語 螳覦 碁 覦 MSA (襷危襦 觜 ろ豎) 危
Terry Cho
[HCI2010]UI願鍵覦 UIり/螳覦襦覦
[HCI2010]UI願鍵覦 UIり/螳覦襦覦[HCI2010]UI願鍵覦 UIり/螳覦襦覦
[HCI2010]UI願鍵覦 UIり/螳覦襦覦
ChangGyum Kim
hexa core
hexa corehexa core
hexa core
Seungbae Ji
HTML5 メ戟 2015 衣 ≡ ≡= 釈a釈 = 求 2016 =メ =釈a ...
HTML5 メ戟 2015 衣 ≡ ≡= 釈a釈 = 求 2016 =メ =釈a ...HTML5 メ戟 2015 衣 ≡ ≡= 釈a釈 = 求 2016 =メ =釈a ...
HTML5 メ戟 2015 衣 ≡ ≡= 釈a釈 = 求 2016 =メ =釈a ...
Sang Seok Lim
polyglot application development in the cloud
polyglot application development in the cloudpolyglot application development in the cloud
polyglot application development in the cloud
Mee Nam Lee
JavaScript MEAN ろ
JavaScript MEAN ろJavaScript MEAN ろ
JavaScript MEAN ろ
Tai Hoon KIM
[D2 ろ碁碁]3.覦ろ襴渚meanろ 蟾
[D2 ろ碁碁]3.覦ろ襴渚meanろ 蟾[D2 ろ碁碁]3.覦ろ襴渚meanろ 蟾
[D2 ろ碁碁]3.覦ろ襴渚meanろ 蟾
NAVER D2
れ危磯 轟 蠍一 覦 襷
れ危磯 轟 蠍一  覦 襷れ危磯 轟 蠍一  覦 襷
れ危磯 轟 蠍一 覦 襷
Wonsuk Lee
01.覈覦 企
01.覈覦  企01.覈覦  企
01.覈覦 企
Hankyo
Web app 螳覦 覦覯襦
Web app 螳覦 覦覯襦Web app 螳覦 覦覯襦
Web app 螳覦 覦覯襦
Sang Seok Lim
轟 覦螻 Adobe Air
轟 覦螻 Adobe Air轟 覦螻 Adobe Air
轟 覦螻 Adobe Air
ろ 蠍磯 觜 り (Example)
ろ  蠍磯  觜 り (Example)ろ  蠍磯  觜 り (Example)
ろ 蠍磯 觜 り (Example)
譴 螻
[Ewd]class05 0405
[Ewd]class05 0405[Ewd]class05 0405
[Ewd]class05 0405
jylee6977
[Ewd]class02 0313
[Ewd]class02 0313[Ewd]class02 0313
[Ewd]class02 0313
JY LEE
[EWD2014]CLASS02
[EWD2014]CLASS02[EWD2014]CLASS02
[EWD2014]CLASS02
JY LEE
W3C 蟲 蠍一 レ (2005)
W3C 蟲  蠍一 レ   (2005)W3C 蟲  蠍一 レ   (2005)
W3C 蟲 蠍一 レ (2005)
Channy Yun
企襴 (Hybrid App)
企襴 (Hybrid App)企襴 (Hybrid App)
企襴 (Hybrid App)
Changhwan Yi
誤,C++觜: 覓朱 ろ 螳覦 覓瑚襯 ロ螻
誤,C++觜: 覓朱 ろ 螳覦 覓瑚襯  ロ螻 誤,C++觜: 覓朱 ろ 螳覦 覓瑚襯  ロ螻
誤,C++觜: 覓朱 ろ 螳覦 覓瑚襯 ロ螻
Devgear
HTML5 ろ 螳
HTML5 ろ 螳HTML5 ろ 螳
HTML5 ろ 螳
Toby Yun
語 螳覦 碁 覦 MSA (襷危襦 觜 ろ豎) 危
語 螳覦 碁 覦 MSA (襷危襦 觜 ろ豎) 危語 螳覦 碁 覦 MSA (襷危襦 觜 ろ豎) 危
語 螳覦 碁 覦 MSA (襷危襦 觜 ろ豎) 危
Terry Cho
[HCI2010]UI願鍵覦 UIり/螳覦襦覦
[HCI2010]UI願鍵覦 UIり/螳覦襦覦[HCI2010]UI願鍵覦 UIり/螳覦襦覦
[HCI2010]UI願鍵覦 UIり/螳覦襦覦
ChangGyum Kim
HTML5 メ戟 2015 衣 ≡ ≡= 釈a釈 = 求 2016 =メ =釈a ...
HTML5 メ戟 2015 衣 ≡ ≡= 釈a釈 = 求 2016 =メ =釈a ...HTML5 メ戟 2015 衣 ≡ ≡= 釈a釈 = 求 2016 =メ =釈a ...
HTML5 メ戟 2015 衣 ≡ ≡= 釈a釈 = 求 2016 =メ =釈a ...
Sang Seok Lim
polyglot application development in the cloud
polyglot application development in the cloudpolyglot application development in the cloud
polyglot application development in the cloud
Mee Nam Lee
JavaScript MEAN ろ
JavaScript MEAN ろJavaScript MEAN ろ
JavaScript MEAN ろ
Tai Hoon KIM
[D2 ろ碁碁]3.覦ろ襴渚meanろ 蟾
[D2 ろ碁碁]3.覦ろ襴渚meanろ 蟾[D2 ろ碁碁]3.覦ろ襴渚meanろ 蟾
[D2 ろ碁碁]3.覦ろ襴渚meanろ 蟾
NAVER D2
れ危磯 轟 蠍一 覦 襷
れ危磯 轟 蠍一  覦 襷れ危磯 轟 蠍一  覦 襷
れ危磯 轟 蠍一 覦 襷
Wonsuk Lee

More from jylee6977 (16)

[MSD]UI03
[MSD]UI03[MSD]UI03
[MSD]UI03
jylee6977
[I3 d]02 information
[I3 d]02 information[I3 d]02 information
[I3 d]02 information
jylee6977
[I3D]01 orientation
[I3D]01 orientation[I3D]01 orientation
[I3D]01 orientation
jylee6977
[Imr]week6
[Imr]week6[Imr]week6
[Imr]week6
jylee6977
[Imr]week5
[Imr]week5[Imr]week5
[Imr]week5
jylee6977
[KGIT_EWD]class04 0329
[KGIT_EWD]class04 0329[KGIT_EWD]class04 0329
[KGIT_EWD]class04 0329
jylee6977
[KGIT_EWD]class03 0322
[KGIT_EWD]class03 0322[KGIT_EWD]class03 0322
[KGIT_EWD]class03 0322
jylee6977
[Imr]week3
[Imr]week3[Imr]week3
[Imr]week3
jylee6977
[EWD]class02 0315
[EWD]class02 0315[EWD]class02 0315
[EWD]class02 0315
jylee6977
[Imr]week2
[Imr]week2[Imr]week2
[Imr]week2
jylee6977
[Isd]03 service design_term
[Isd]03 service design_term[Isd]03 service design_term
[Isd]03 service design_term
jylee6977
[I3 d]03 interactivity
[I3 d]03 interactivity[I3 d]03 interactivity
[I3 d]03 interactivity
jylee6977
[I3 d]01 casestudies
[I3 d]01 casestudies[I3 d]01 casestudies
[I3 d]01 casestudies
jylee6977
[I3 d]01 information
[I3 d]01 information[I3 d]01 information
[I3 d]01 information
jylee6977
[I3 d]00 orientation
[I3 d]00 orientation[I3 d]00 orientation
[I3 d]00 orientation
jylee6977
[I3 d]00 orientation
[I3 d]00 orientation[I3 d]00 orientation
[I3 d]00 orientation
jylee6977
[MSD]UI03
[MSD]UI03[MSD]UI03
[MSD]UI03
jylee6977
[I3 d]02 information
[I3 d]02 information[I3 d]02 information
[I3 d]02 information
jylee6977
[I3D]01 orientation
[I3D]01 orientation[I3D]01 orientation
[I3D]01 orientation
jylee6977
[Imr]week6
[Imr]week6[Imr]week6
[Imr]week6
jylee6977
[Imr]week5
[Imr]week5[Imr]week5
[Imr]week5
jylee6977
[KGIT_EWD]class04 0329
[KGIT_EWD]class04 0329[KGIT_EWD]class04 0329
[KGIT_EWD]class04 0329
jylee6977
[KGIT_EWD]class03 0322
[KGIT_EWD]class03 0322[KGIT_EWD]class03 0322
[KGIT_EWD]class03 0322
jylee6977
[Imr]week3
[Imr]week3[Imr]week3
[Imr]week3
jylee6977
[EWD]class02 0315
[EWD]class02 0315[EWD]class02 0315
[EWD]class02 0315
jylee6977
[Imr]week2
[Imr]week2[Imr]week2
[Imr]week2
jylee6977
[Isd]03 service design_term
[Isd]03 service design_term[Isd]03 service design_term
[Isd]03 service design_term
jylee6977
[I3 d]03 interactivity
[I3 d]03 interactivity[I3 d]03 interactivity
[I3 d]03 interactivity
jylee6977
[I3 d]01 casestudies
[I3 d]01 casestudies[I3 d]01 casestudies
[I3 d]01 casestudies
jylee6977
[I3 d]01 information
[I3 d]01 information[I3 d]01 information
[I3 d]01 information
jylee6977
[I3 d]00 orientation
[I3 d]00 orientation[I3 d]00 orientation
[I3 d]00 orientation
jylee6977
[I3 d]00 orientation
[I3 d]00 orientation[I3 d]00 orientation
[I3 d]00 orientation
jylee6977

[EWD]class01 0308

  • 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