HTML5 Tutorial(Korean)

40 %
60 %
Information about HTML5 Tutorial(Korean)
Technology
tta

Published on April 25, 2011

Author: w3labs

Source: slideshare.net

Description

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

IPTV Technical Seminar hosted by TTA

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

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

HTML5 in Korea (2010) - Lightning Talk - YouTube

Lighting Talk: HTML5 in Korea in Firefox Developer Conference in Japan Hello, this is Channy Yun in Mozilla Korea Community. I'm very glad to ...
Read more

Internal Motivation :: W3Schools HTML5 튜토리얼 (한글) -1

W3Schools HTML5 튜토리얼 HTML5 홈 HTML5 소개 HTML5 새 엘리먼트 (Elements) HTML5 비디오 (Video) HTML5 비디오/Dom (Video/DOM) HTML5 ...
Read more

HTML5 Korea

HTML5 Korea 워드프레스 이관작업 중입니다. 안녕하세요, 메튜장입니다. 2014년 새롭게 제 책도 출간하고 이리저리 바쁜 ...
Read more

HTML5 Tutorial - Android Apps on Google Play

HTML5 Tutorial. 41. REDAIT MEDIA Education. ... HTML5 Tutorial. Learn HTML5 in 12 simple lessons with many examples. ... Develops Korea.
Read more

W3C@WWW2014 - Seoul, Korea - April 2014

W3C @ WWW2014 7-11 April 2014, Seoul, Korea. 8 APRIL 9h00 ... “HTML5 simply ... This W3C tutorial is a subset of the W3C HTML5 course run within the ...
Read more

한국 개발자의 HTML5 앱, 세계 최고 기술로 선정되다!# - YouTube

File Upload Progress Bar Meter Tutorial HTML5 Ajax PHP - Duration: ... CNET KOREA 1,186 views. 4:58 Tizen HTML5/CSS3 Demos - Duration: 7:03.
Read more

HTML5 Lecture - Android Apps on Google Play

HTML5 Lecture. 19. Develops Korea Education. ... Develops Korea member PE's the Second ... HTML5 Pro Tutorial is for Professional and Beginer ...
Read more

HTML5 CSS3 Online Tutorial | HTML5 CSS3 course

Learn Programming HTML5 and CSS3 from bestdotnettraining's HTML5 CSS3 online tutorial under the guidance of Microsoft certified trainer.
Read more

Learn HTML5 and Get CSS3 Training – Microsoft Virtual Academy

Learn HTML5 and CSS3 from the beginning. Free and led by the experts, our HTML5 and CSS training can help you grow your skills – and your career.
Read more