• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

슬라이드 1

on

  • 579 views

 

Statistics

Views

Total Views
579
Views on SlideShare
579
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    슬라이드 1 슬라이드 1 Presentation Transcript

    • Multimedia Programming 21: By FLEX Departments of Digital Contents Sang Il Park
    • Outline
      • Rich Internet Application
      • Adobe Flex
    • RIA: Rich Internet Application 대부분의 자료는 www.likejazz.com 에서 발췌
    • RIA: Rich Internet Application
    • IT 시대에서의 기술의 혁명 ? “ 내가 담배피면서 생각해 봤는데 , 기술의 혁명은 UI 의 혁신에서 시작 되는 것 같아” by 다음 커뮤니티 개발 2 팀 개발자 권모씨
    • RIA = UI?
    • RIA 의 정의 by wikipedia
    • RIA 데스크탑 애플리케이션의 특징과 기능 을 구현한 웹 애플리케이션
    • RIA 기술의 종류
      • JavaScript
        • Ajax
      • Adobe Flash Player
        • Adobe products
          • Flash, Flex, Flash Media Server, Flash Remoting…
      • Active-X Controls
      • Java Applets, Java Applications
      • User Interface Languages
        • XUL, SVG
    • RIA 기술의 종류
      • JavaScript
        • Ajax
      • Adobe Flash Player
        • Adobe products
          • Flash, Flex, Flash Media Server, Flash Remoting…
      • Active-X Controls
      • Java Applets, Java Applications
      • User Interface Languages
        • XUL, SVG
    • RIA 의 과거 - 현재 - 미래
    • 과거기술 – Active-X
    • 과거기술 – Java Applets
    • 미래기술 – User Interface Languages
      • XUL
        • Mozilla Foundation’s XML-based user interface markup language
      • XAML
        • XML-based language used to define objects and their properties, relationships and interactions
        • Used in .NET Framework 3.0
      • SVG
        • XML markup language for describing 2-D vector graphics.
    • XUL
    • SVG – scalable vector graphics
    • SVG - Sample
      • <?xml version=&quot;1.0&quot;?>
      • <!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.1//EN&quot;
      • &quot;http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&quot;>
      • <svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;467&quot; height=&quot;462&quot;>
      • <rect x=&quot;80&quot; y=&quot;60&quot; width=&quot;250&quot; height=&quot;250&quot; rx=&quot;20&quot;
      • style=&quot;fill:#ff0000; stroke:#000000;stroke-width:2px;&quot; />
      • <rect x=&quot;140&quot; y=&quot;120&quot; width=&quot;250&quot; height=&quot;250&quot; rx=&quot;40&quot;
      • style=&quot;fill:#0000ff; stroke:#000000; stroke-width:2px;
      • fill-opacity:0.7;&quot; />
      • </svg>
    • SVG - Sample
      • <?xml version=&quot;1.0&quot;?>
      • <!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.1//EN&quot;
      • &quot;http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&quot;>
      • <svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;467&quot; height=&quot;462&quot;>
      • <rect x=&quot;80&quot; y=&quot;60&quot; width=&quot;250&quot; height=&quot;250&quot; rx=&quot;20&quot;
      • style=&quot;fill:#ff0000; stroke:#000000;stroke-width:2px;&quot; />
      • <rect x=&quot;140&quot; y=&quot;120&quot; width=&quot;250&quot; height=&quot;250&quot; rx=&quot;40&quot;
      • style=&quot;fill:#0000ff; stroke:#000000; stroke-width:2px;
      • fill-opacity:0.7;&quot; />
      • </svg>
    • 현재 기술 최고의 인기를 구가하고 있는 2 가지 기술
    • 2 가지 기술 ? FLASH AJAX
    • FLASH - 2 가지 키워드
      • FLASH VIDEO
      • FLEX
    • Flash Video (FLV)
    • FLEX? FLEX = FLASH?
    • Flex
    • Flex 로 만든 사이트
    • 2 가지 기술 : FLASH AJAX
    • AJAX - 2 가지 키워드
      • RubyOnRails
      • Google
    • RubyOnRails
      • Ruby : 프로그래밍 언어 (c.f C/C++, Python …)
        • RubyOnRails : Ruby 로 만든 웹 어플리케이션 프레임웍
          • Prototype : RubyOnRails 에 포함된 자바스크립트 라이브러리
            • script.aculo.us : 여러가지 기능 (effects, sortable) 을 구현한 Prototype 의 확장팩 (add-on)
    • RubyOnRails
    • Google
      • Gmail, google map 을 통한 AJAX 의 대중화
      • 대부분의 신규 서비스에 AJAX 활용
    • Google with AJAX
      • Gmail
      • Google Maps
      • Google Calendar
      • Google Groups
      • Google Docs, Spreadsheet & Presently
    • Google Web Toolkit
    • Google Web Toolkit 자바 스크립트 를 모르는 서버 개발자가 자바 언어 를 사용하여 Ajax 를 구현 할 수 있게 해준다 .
    • Ajax Framework
      • Rico
      • Yahoo! UI Library(YUI)
      • 이외에도 90 개가 넘는 프레임웍이 존재
    • 인기 있는 RIA 기술의 공통점 1 XML Meta-Information Data about data
    • 인기 있는 RIA 기술의 공통점 2 ECMAScript Dialects: ActionScript, JavaScript European Computer Manufacturers Association
    • 인기 있는 RIA 기술의 공통점 3 Asynchronous 비동기 통신
    • Asynchronous
    • Asynchronous
    • 인기 있는 RIA 기술의 공통점 4 통합개발환경 IDE, RAD Rapid Application Development Integrated Development Environment
    • FLEX IDE
    • 인기 있는 RIA 기술의 공통점 정리
      • XML 기반
      • ECMAScript 기반
      • Asynchronous
      • 통합 개발 환경 지원
    • ADOBE FLEX
    • Flex?
      • 다종 플랫폼에서 돌아 갈수 있는 RIA 개발 기술
      • Adobe Flash 기술 기반
      • XML- 기반 Markup Language
        • 빠른 개발
        • 손쉬운 그래픽 유저 인터페이스 개발
        • ActionScript 를 활용한 Interactivity 구현
      • Microsoft 의 Silverlight 와 경쟁관계
    • Flex.org
      • Showcase
    • Flex History
      • Flex 1.0 - March 2004
      • Flex 1.5 - October 2004
      • Flex 2.0 (Alpha) - October 2005
      • Flex 2.0 Beta 1 - February 2006
      • Flex 2.0 Beta 2 - March 2006
      • Flex 2.0 Beta 3 - May 2006
      • Flex 2.0 Final- June 28, 2006
      • Flex 2.0.1 - January 5, 2007
      • Flex 3.0 Beta 1 - June 11, 2007
      • Flex 3.0 Beta 2 - October 1, 2007
    • 참고서적
      • “ 예제로 배우는 Adobe 플렉스 2”
      • 옥상훈 지음
      • 에이콘 출판사
    • Flex 시작하기
      • 필요한 것
        • SDK 받기  압축해제
        • Java runtime environment
      • 컴퓨터 내 환경 변수 설정
        • 내컴퓨터  속성  고급  환경변수  PATH 에 bin 폴더 추가
    • Hello World: Your First Flexing! <?xml version=&quot;1.0&quot;?> <mx:Application xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot;> <mx:Panel title=&quot;My Application&quot; paddingTop=&quot;10&quot; paddingBottom=&quot;10&quot; paddingLeft=&quot;10&quot; paddingRight=&quot;10&quot; > <mx:Label text=&quot;Hello World!&quot; fontWeight=&quot;bold&quot; fontSize=&quot;24&quot;/> </mx:Panel> </mx:Application> HelloWorld.mxml
    • Hello World: Your First Flexing!
      • 실행법 :
        • mxmlc HelloWorld.mxml
    • XML?
      • 확장 가능한 Markup 언어
      XML : e X tensible M arkup L anguage
    • Markup Language
      • 정보를 포장하기 위한 언어
      문서의 내용 Multimedia Programming 박상일 디지털콘텐츠 문서의 내용 <class>Multimedia Programming</class> <professor> 박상일 </professor> <department> 디지털콘텐츠 </department>
    • MXML is a XML <?xml version=&quot;1.0&quot;?> <mx:Application xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot;> <mx:Panel title=&quot;My Application&quot; paddingTop=&quot;10&quot; paddingBottom=&quot;10&quot; paddingLeft=&quot;10&quot; paddingRight=&quot;10&quot; > <mx:Label text=&quot;Hello World!&quot; fontWeight=&quot;bold&quot; fontSize=&quot;24&quot;/> </mx:Panel> </mx:Application> HelloWorld.mxml 처리지시문 : xml 문서임을 나타냄 Tag