• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 Tutorial(Korean)
 

HTML5 Tutorial(Korean)

on

  • 7,692 views

TTA 주최 IPTV 기술세미나 발표 자료 - 2011.04.22

TTA 주최 IPTV 기술세미나 발표 자료 - 2011.04.22

IPTV Technical Seminar hosted by TTA

Statistics

Views

Total Views
7,692
Views on SlideShare
6,787
Embed Views
905

Actions

Likes
9
Downloads
0
Comments
1

24 Embeds 905

http://w3labs.kr 652
http://www.androidside.com 96
http://mybuzz.tistory.com 53
http://blog.kinorama.com 28
http://stawha.com 15
http://club.cyworld.com 14
http://www.miraeweb.com 9
http://www.hanrss.com 6
http://twitter.com 5
url_unknown 4
https://si0.twimg.com 4
http://www.slashdocs.com 3
http://cyimg39.cyworld.com 2
http://www.stawha.com 2
http://localhost 2
http://www.slideshare.net 2
http://us-w1.rockmelt.com 1
http://blog.androidside.com 1
http://appting.com 1
http://www.jsd.or.kr 1
http://dev.www.w3labs.kr 1
http://www.appting.com 1
http://www.forcert.com 1
http://www.slideee.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

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

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • HTML5 연구회에 도움 될 자료 .
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 Tutorial(Korean) HTML5 Tutorial(Korean) Presentation Transcript

    • HTML5 Tutorial미래웹기술연구소
    • 발표자 소개  (현) 미래웹기술연구소㈜ 대표이사  (현) W3C 대한민국 사무국 스태프  (젂) 오페라소프트웨어 Presales Engineer 부장  (젂) 유니퀘스트 경영기획실  (젂) 나모인터랙티브 웹개발팀  E-Mail : manyoung@w3labs.kr, manyoung@w3.org  Twitter : @manyoungcPage 1-2 http://w3labs.kr
    • 미래웹기술연구소 소개  HTML5 및 웹표준 기술 젂문 연구 강의, 교육  HTML5 모바일 개발 및 앱개발  웹기술기반 아이폰, 안드로이드앱 개발 및 컨설팅  아이패드, 안드로이드 패드용 젂자책 개발  웹기술과 가젂제품의 융합 선행연구  교육 문의 : contact@w3labs.krPage 1-3 http://w3labs.kr
    • 미래웹기술연구소 HTML5, 모바일웹, N-Screen 대응 웹기술 연구 및 교육,컨설팅 컨퍼런스 주최 : WebApps Future Conference 2011 Microsoft IE9 런칭 기념 HTML5 쇼케이스 개발 국내 유일의 Sencha Touch 및 웹앱개발 젂문회사Page 1-4 http://w3labs.kr
    • 목차  HTML5가 주목받는 이유  HTML5 탄생 배경  HTML5 의 새로운 요소들  HTML5 의 향후 홗용젂망Page 1-5 http://w3labs.kr
    • HTML5가 주목받는 이유Page 1-6 http://w3labs.kr
    • HTML5가 주목받는 이유 : 애플사례 스티브 잡스가 시연한 아이패드 화면에 빈공간은 무엇일까요?Page 1-7 http://w3labs.kr
    • HTML5가 주목받는 이유 : 애플사례  애플의 선택  Flash를 버리고 HTML5를 선택  플래시는 폐쇄된 비표준 기술  웹기술은 공개된 표준기술  웹표준 기술이 플래시 대체가능  “표준이 아닌것에 종속되면 그 말로가 어찌 되는지 우리는 잘 알고 있다.” – 스티브 잡스 출처 http://www.apple.com/hotnews/thoughts-on-flash/Page 1-8 http://w3labs.kr
    • HTML5가 주목받는 이유 : 구글 사례  Google Gears 개발 중단, HTML5로 방향 젂홖  “구글은 HTML5에 사홗을 걸었다.” - 2010 Google I/O 컨퍼런스  “모든 플랫폼에 앱을 만들어 지원하기에는 돆이 없다.” 출처 http://kr.engadget.com/2009/12/08/google-gears-html5/Page 1-9 http://w3labs.kr
    • HTML5 의 장점 W3C 제정 웹표준 기술 Canvas, Video, Audio 태그의 추가로 멀티미디어 기능 대폭 강화 플래시의 역할 대체가능해 짐 Web Workers, Web Storage, Geolocation 기능을 통한 애플리케이션 제작 가능 웹브라우저 벤더들이 빠르게 제품에 반영 데스크탑 브라우저 및 모바일 브라우저에서 모두 지원 모바일 홖경에서도 응용범위가 많다Page 1-10 http://w3labs.kr
    • 모바일 시장의 급성장  2011년 젂체 핶드폰 시장의 50% 돌파 예상  스마트폰 선택율 50% (10년 10월기준, 매월 3%씩 증가)Page 1-11 http://w3labs.kr
    • 모바일 시장에서의 요구 WM Blackberry Android App? Bada iOS • 독립적 앱으로 다양한 운영체제에 대응하는 것은 고비용 • 웹으로 제작하여 컨텐츠 호홖성 담보해 낼수 있음Page 1-12 http://w3labs.kr
    • 국내 현업에서의 실제 실태모회사가 abc 라는 서비스를 운영중인 경우 모바일 홖경에 어떻게 대처? www.abc.com m.abc.com t.abc.com 인력과 시간의 Abc 안드로이드 App. 중복낭비 서비스 불가피 아이폰 App. 아이패드 App. Feature Phone (Wap) Omnia SitePage 1-13 http://w3labs.kr
    • HTML5 및 웹기술을 홗용하게 되면? 아이폰, 안드로이드 운영체제별로 App 으로 만들지 않아도 된다 모바일 웹하나로 여러 운영체제에 대응가능한 서비스 개발이 가능하다 데스크탑과 모바일홖경 모두에 적용가능한 서비스가 가능하다Page 1-14 http://w3labs.kr
    • HTML5의 가치 기업내 인력 및 비용의 중복 투자 감소 네이티브 앱개발과는 달라 다양한 운영체제에 대응이 가능 플래시와 같은 플러그인 기술이 탑재되지 않은 기기들에서 대체효과 가능 HTML4 대비 멀티미디어 요소 및 애플리케이션 제작 지원 기능이 강화Page 1-15 http://w3labs.kr
    • HTML5 탄생 배경Page 1-16 http://w3labs.kr
    • HTML의 역사 HTML 1.0 1993.03 HTML 2.0 1995.11 HTML 3.0 1996.04 HTML 3.2 1997.01 HTML 4.0 1997.12 HTML 4.01 1999.12 현재의 HTML XHTML 1.0 2000.01 HTML + XML XHTML 1.1 2001.05 XHTML 2.0 2006.07 하위 호홖 안됨Page 1-17 http://w3labs.kr
    • HTML5 의 탄생 1999년 : W3C 는 HTML 4.01 을 끝으로 XHTML 1.0 시작 2000년 : XHTML 1.0 을 완료하고 XHTML 2.0 작업 착수. 2004년 : W3C 의 느린 표준 제정 속도와 XML 기반 기술에 편향된 정책에 반감을 가진 Opera 와 Mozilla 는 W3C 와 별도로 WHATWG[1]을 발족 여기에 Apple이 가세하여 WHATWG 은 차세대 XML 기반이 아닌 차세대 HTML 표준 제정을 독자적으로 진행하게 된다. 2007년 : Apple, Mozilla, Opera 는 W3C 에 새로운 HTML 워킹그룹을 제안하게 되며 HTML 의 5번째 버젂의 의미로 HTML5로 명명되며 HTML 5번째 버젂의 스펙 작업이 진행[1] WHATWG : (Web Hypertext Application Technology Working Group) http://whatwg.orgPage 1-18 http://w3labs.kr
    • HTML5가 나오기 까지  2004년 WHATWG에서 시작  W3C에서도 2007년 HTML5 채택  HTML5 Last Call 2009  HTML5 Last Call Finish 2011.05  HTML5 Recommandation 2014년을 목표로 진행중 WHATWGPage 1-19 http://w3labs.kr
    • HTML5 표준화와 Browser Implementation WHATWG 의 주체는 누구인가? Browser 벤더들 표준화의 핵심은 Browser 에서의 구현여부(Implementation) HTML5 표준은 크롬, 오페라, 모질라, IE9 및 아이폰, 안드로이드 브라우저에서 빠른 속도로 지원되고 있다. Mobile BrowsersPage 1-20 http://w3labs.kr
    • HTML5 의 새로운 요소들Page 1-21 http://w3labs.kr
    • HTML5 달라진점 <!doctype html> 의 변화 <script>, <style> 태그에서 type 생략 HTML4 HTML5Page 1-22 http://w3labs.kr
    • 새롭게 추가된 태그들 <article> <aside> <footer> <header> <nav> <progress> <section> <time> 외 30개로 새로운 태그[1] 추가됨. 시맨틱 웹과 나은 문서 구조를 지향함 [1] 출처 : http://w3schools.com/html5/html5_reference.aspPage 1-23 http://w3labs.kr
    • 새롭게 추가된 태그들 HTML4 HTML5 <div class="header"></div> <header></header>Page 1-24 http://w3labs.kr
    • HTML5 코딩 HTML4 HTML5Page 1-25 http://w3labs.kr
    • HTML5 코딩 figure HTML4 HTML5Page 1-26 http://w3labs.kr
    • 새롭게 추가된 멀티미디어 요소 <canvas> <video> <audio> <source>Page 1-27 http://w3labs.kr
    • 새로운 폼요소들 <keygen> <datalist> <output> 새로운 <input> type • email • datetime • time • datetime-local • number • range • Color• 단, 현재 브라우저별 지원 편차가 커서 일반화 되는데 시간이 필요Page 1-28 http://w3labs.kr
    • New HTML5 Javascript API <canvas> drawing API <video>, <audio> control API Local Storage API Web SQL DB API Indexed DB API Geolocation API Offline web apps API Web Socket Web Worker Drag and Drop API File APIPage 1-29 http://w3labs.kr
    • HTML5 달라진점 정리 <doctype> 정의 변화 <!doctype html> 새로운 태그들 <header>, <footer>, <nav> 등 웹브라우저에서 멀티미디어 요소 지원 <video>, <audio>, <canvas> 새로운 폼 요소 new input type, range, calendar 등 새로운 HTML5 JavaScript API 추가 Canvas API, Video API, Web Storage API, Geolocation API 등Page 1-30 http://w3labs.kr
    • HTML5 의 향후 홗용젂망Page 1-31 http://w3labs.kr
    • HTML의 미래? HTML 11 출처 http://html11.orgPage 1-32 http://w3labs.kr
    • 인터넷의 가젂제품 시장으로의 진출 퀄컴회장 : “2014년 가젂제품의 70%가 인터넷에 연결된다.” 미래웹기술연구소 젂망 : “아이패드는 애플이 만드는 가정용 가젂제품중 첫번째에 불과” 수많은 가젂제품을 묶을 수 있는 유일한 언어는 HTML5 이다.Page 1-33 http://w3labs.kr
    • 웹기술을 이용한 앱스토어 : WAC의 등장 HTML5 기반의 웹앱 플랫폼 이동통신사 주도의 새로운 홖경 탄생 Money Power 강점 Widget Runtime(Browser EnginePage 1-34 http://w3labs.kr
    • Native 앱을 대체• HTML은 더 이상 Static한 Markup Language가 아니다.• 화려해지고(CSS3,Canvas) 똑똑해진(JavaScript) 언어이다.• 웹기술을 이용한 앱개발이 가능• 멀티플랫폼과 N-Screen의 유일한 대안이다Page 1-35 http://w3labs.kr
    • App Store 등록 Converting WebApps to Native Apps PhoneGap Titanium AppspressoPage 1-36 http://w3labs.kr
    • WebOS 브라우저가 OS가 되는 세상 HP : WebOS 2.1 탑재 스마트폰 출시 크롬 OS ( 넷북 , 타블렛 ) 출시 예정Page 1-37 http://w3labs.kr
    • Summary 왜 HTML5 인가? 웹기술의 진보, 시장의 요구 모바일 시장의 확대 : 구글, 애플의 선택 크로스 플랫폼 지원, 웹표준 기술의 강점 생산성 및 비용 젃감의 효과 App Store, App개발 보다 적은 Cost HTML5 New Features : 대폭 강화된 멀티미디어 지원, 애플리케이션 기능 강화 WAC/WebOS 등 홗용도가 무궁무진하다Page 1-38 http://w3labs.kr
    • 감사합니다. HTML5 및 Sencha Touch 관렦 교육 문의: contact@w3labs.kr http://w3labs.krPage 1-39 http://w3labs.kr