Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

HTML5 for web app. development

1 882 vues

Publié le

HTML5 for web app. development

Publié dans : Technologie
  • -- DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT -- ......................................................................................................................... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... (Unlimited)
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • If you want to download or read this book, Copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ..................................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookeBOOK Crime, eeBOOK Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

HTML5 for web app. development

  1. 1. 개발자의 관점에서 본 H TML51
  2. 2. Part O n e HTML vs . HTML52
  3. 3. H TML vs . H TML5 H TML H TML5 오디오와 비디오는 H TML4 의 사양에 오디오와 비디오가 H TML5 사양의 필 포함되어 있지 않음 수적인 항목으로 포함되어 있음 (< au d io > 와 < vid e o > 태그 ) Ve c to r 그래픽은 VML, S ilve rlig h t, Ve c to r 그래픽의 필수 항목으로 포함되 F las h 을 설치함 으로서 사용 가능함 어 있음 (S VG 와 c an vas ) (Plu g In 설치 요망 ) 정확한 위치정보를 가져오는 것이 거의 Java S c rip t 에 위치 정보 파악 API 가 불가능함 포함되어 있음 3
  4. 4. H TML vs . H TML5 H TML H TML5 임시 저장 공간에 브라우저에서 읽어 온 애플리케이션 캐시 , We b S Q L 데이터 데이터를 저장함 베이스 , 웹 저장 공간을 사용자의 저장 공간으로 상용 가능함 . JavaS c rip t 를 통 해서 접근 가능함 자체적인 We b S o c ke t 기능은 없음 We b S o c ke t 을 사용하여 서버와 양방향 통신이 가능함 . Java S c rip t 를 사용하여 서 접근 가능함 모든 버전의 브라우저에서도 동작함 최근에 배포된 브라우저만 지원함 ( 예 : F ire fo x, Mo zilla, O p e ra, C h ro m e , S afari 등 ) JavaS c rip t 는 브라우저 인터페이스와 동 JavaS c rip t 가 백그라운드에서 실행 가능 일한 쓰레드에서 실행되어 야 함 함 4
  5. 5. Part Two F las h & H TML55
  6. 6. H TML5 을 적용하기 적당한 경우 • 사용자에게 하드웨어와 소프트웨어 벤더 선택의 자유을 주고자 할 경우 • 저사양의 디바이스에서 비디오를 재생하고자 할 경우 • F las h 라이센스 비용을 아끼고자 할 경우 • Ap p le 에서 생상된 디바이스에서 재생하고자 할 경우 • 개방된 개발 환경이 중요하다고 여겨질 경우F las h 를 적용하기 적당한 경우 • IE 6 을 지원하고자 할 경우 • 비디오 스트리밍 시에 네트워크 대역폭에 따라서 b it rate s 를 조절하고자 할 경우 • 콘텐트의 무단 복사를 막고자 할 경우 • 비디오에 광고를 동적으로 포함 시키고자 할 경우96
  7. 7. Mic ro s o ft d ro p s F las h fro m IE o n Win d o ws 8tab le ts .- 1 6 S e p te m b e r 201 1 fro m B B C U p c o m in g N o kia Mo b ile Ph o n e s (Lu m ia) – F irs t Win d o ws Ph o n e (Man g o ) (with o u t Ad o b e F las h ) - N o ve m b e r 1 1 , 201 1 fro m ad d p r.c o m An d ro id Ic e C re am S an d wic h 4.0 to g e t Ad o b e F las h b e fo re 201 2 - N o ve m b e r 23, 201 1 fro m te c h b lo g
  8. 8. Part Th re eWe b Ap p8
  9. 9. We b Ap p 의 예 9
  10. 10. We b Ap p 의 장점 • 코드 재사용성이 뛰어남 • 업데이트가 용이함 • 해상도에 따른 화면 재구성이 가능함 • C S S 속도 개선 • Lo c al S to rag e , D e vic e API 이용 가능We b Ap p 의 단점 • 콘텐트를 다운 받기 위한 시간 소요 • N ative Ap p 과 같은 수려한 U I 가 제공 안됨 • 디버그의 어려움이 있음 • Ap p 으로 패키징 하기위한 작업이 필요함 • D e vic e API 를 이용하기 위한 작업 필요 910
  11. 11. Web App 의 제작 과정 We b H TML, C S S , JavaS c rip ts C o n te n ts UI JavaS c rip t F ram e wo rk E ffe c ts (j u e ry, S e n c h a) Q Mo b ile APIs H TML5 Ap p Platfo rm (Ph o n e G ap , Titan iu m ) Ap p Pac kag e11
  12. 12. JavaS c ript Framework• H TML 문서 이동• 이벤트 핸들링• 애니메이션• Aj 인터랙션 처리 ax 12
  13. 13. JavaS c rip t F ram e wo rk: j u e ry Q• 크기가 31 kb 로 경쟁사보다 작음• j u e ryU I 라고 U I te m p late 을 제공함 Q• 웹에서 디자인 테마를 직접 만들 수 있도록 제공함• 시장에서 가장 많이 쓰이고 있음아쉬운 점• 모바일 We b 을 위한 Te m p late 를 제공하고 있지 않음• Flas h 와 같은 에니메이션 효과 구현을 위한 To o l 의 부재• 웹 개발자만을 위한 Fram e wo rk 13
  14. 14. JavaS c rip t F ram e wo rk: S e n c h a• H TML5 모바일 웹 개발의 위한 프레임워크• 보다 수려한 An im atio n s 효과를 지원함• 웹 개발 템플릿 ( 예제 ) 가 잘 준비되어 있음• 여러 개의 제품 군으로 이루어져 있음아쉬운 점• Lib rary 사이즈가 큼• 관련 개발 문서가 상대적으로 부족함 14
  15. 15. JavaS c rip t F ram e wo rk: S e n c h a• S e n c h a To u c h - H TML5 기반의 모바일 앱을 개발하기 위한 프레임워크• S e n c h a An im ato r - C S S 3 애니메이션을 만들어 주는 데스크톱 어플리케이션• E xt C o re - We b U I 개발을 쉽게 구현할 수 있도록 지원하는 자바스크립트 라이브러 리임• E xt D e s ig n e r - D rag & D ro p 을 지원하는 데스크탑 어플리케이션 15
  16. 16. JavaS c rip t F ram e wo rk: Jin d o• N H N 에서 제작한 JavaS c rip t Lib rary• 네이버 뉴스 , 지도와 같은 자체 서비스 개발에 사용됨• 주석이 한글로 되어 있음아쉬운 점• 개발 문서에 예제가 부족함• 개발 툴을 제공하지 않음 16
  17. 17. H TML5 Ap p Platfo rm• 폰 APIs• 패키지 17
  18. 18. H TML5 Ap p Platfo rm : Ph o n e G ap• 대부분의 모바일 Platfo rm 을 지원함• XC o d e , E c lip s e 용 Ph o n e G ap Plu g In 을 제공• Ph o n e G ap B u ild 서비스를 통해서 플랫폼 별 Ap p 으로 재생산에서 배포 가능 ( 유료 )• j u e ry 가 포함되어 있음 Q• Ad o b e D re am we ave r C S 5.5 에 Ph o n e G ap 이 포함되어 있음개발 방법 1 . XC o d e 로 Ph o n e G ap 기반의 프로젝트 생성 2. www 폴더 아래에 We b Pag e 소스를 복사 18
  19. 19. H TML5 Ap p Platfo rm : Titan iu m• Titan iu m Pac kag e 가 포함된 E c lip s e 기반의 ID E• iO S , An d ro id , B lac kb e rry 지원• j u e ry 가 포함되어 있음 Q• D e b u g 가 용이함• 패키지 해주는 C lo u d 서비스 제공아쉬운 점• 지원하는 Mo b ile Platfo rm 한정되어 있음 19
  20. 20. H TML5 Ap p Platfo rm : Ap p s p re s s o• E c lip s e 기반의 ID E• iO S , An d ro id 지원• D e b u g 가 용이함• O n - th e - fly 기능 제공아쉬운 점• 지원하는 Mo b ile Platfo rm 한정되어 있음• JavaS c rip t Lib rary 가 포함되어 있지 않음 20
  21. 21. UI F ra me wo rk jQ ue ry S e nc ha J MC • iO S 와 An d ro id 기반의 • H TML5 기반의 Mo b ile • N H N 에서 자체적으로 제 디바이스를 지원하는 Ap p 을 위한 개발을 위 작한 F ram e wo rk j u e ry Plu g in Q 해 만들어진 • JMC 기반으로 N ave r • 터치 E ve n t 최적화됨 F ram e wo rk We b Ap p 이 만들어 졌고 • 개발을 쉽게 할 수 있는 문서가 한글로 되어 있음 To o l 이 포함되어 있음HTML 5 A p p F ra me wo rk PhoneGap Titanium Appspresso • 거의 모든 모바일 플랫폼 • 개발 , 테스트 , 배포를 • 국산 F ram e wo rk 임 을 지원함 동일한 환경에서 할 수 • O n th e fly 기능 제공 • 패키지 하고 배포하는 기 있는 F ram e wo rk 임 • 다양한 플랫폼을 지원하 능이 포함되어 있음 • iO S 과 안드로이드만 지 고자 계획하고 있음 • Ad o b e 에 인수됨 원함1521
  22. 22. We b Ap p 제작 툴 F las h Mo b ile U I Ph o n e APIs Pac kag e An im atio n sj u e ry QS e nchaJin d oAd o b e(Ph o n e G ap , D re am we ave r)Titan iu mAp p s p re s s o 22
  23. 23. 감사합니다 .23

×