HTML5 Tutorial(Korean)

HTML5 Tutorial

미래웹기술연구소

발표자 소개

 (현) 미래웹기술연구소㈜ 대표이사
 (현) W3C 대한민국 사무국 스태프
 (젂) 오페라소프트웨어 Presales Engineer 부장
 (젂) 유니퀘스트 경영기획실
 (젂) 나모인터랙티브 웹개발팀

 E-Mail : manyoung@w3labs.kr, manyoung@w3.org
 Twitter : @manyoungc

Page 1-2 http://w3labs.kr

미래웹기술연구소 소개

 HTML5 및 웹표준 기술 젂문 연구
강의, 교육
 HTML5 모바일 개발 및 앱개발
 웹기술기반 아이폰, 안드로이드앱
개발 및 컨설팅
 아이패드, 안드로이드 패드용 젂자책
개발
 웹기술과 가젂제품의 융합 선행연구
 교육 문의 : contact@w3labs.kr


미래웹기술연구소

 HTML5, 모바일웹, N-Screen 대응 웹기술 연구 및 교육,컨설팅
 컨퍼런스 주최 : WebApps Future Conference 2011
 Microsoft IE9 런칭 기념 HTML5 쇼케이스 개발
 국내 유일의 Sencha Touch 및 웹앱개발 젂문회사


목차

 HTML5가 주목받는 이유
 HTML5 탄생 배경
 HTML5 의 새로운 요소들
 HTML5 의 향후 홗용젂망


HTML5가 주목받는 이유


HTML5가 주목받는 이유 : 애플사례

 스티브 잡스가 시연한 아이패드 화면에 빈공간은 무엇일까요?


HTML5가 주목받는 이유 : 애플사례

 애플의 선택
 Flash를 버리고 HTML5를 선택
 플래시는 폐쇄된 비표준 기술
 웹기술은 공개된 표준기술
 웹표준 기술이 플래시 대체가능
 “표준이 아닌것에 종속되면 그 말로가
어찌 되는지 우리는 잘 알고 있다.” –
스티브 잡스

출처 http://www.apple.com/hotnews/thoughts-on-flash/

HTML5가 주목받는 이유 : 구글 사례

 Google Gears 개발 중단, HTML5로
방향 젂홖
 “구글은 HTML5에 사홗을 걸었다.” -
2010 Google I/O 컨퍼런스
 “모든 플랫폼에 앱을 만들어
지원하기에는 돆이 없다.”

출처 http://kr.engadget.com/2009/12/08/google-gears-html5/

HTML5 의 장점

 W3C 제정 웹표준 기술
 Canvas, Video, Audio 태그의 추가로 멀티미디어 기능 대폭 강화
 플래시의 역할 대체가능해 짐
 Web Workers, Web Storage, Geolocation 기능을 통한 애플리케이션 제작
가능
 웹브라우저 벤더들이 빠르게 제품에 반영
 데스크탑 브라우저 및 모바일 브라우저에서 모두 지원
 모바일 홖경에서도 응용범위가 많다


모바일 시장의 급성장

 2011년 젂체 핶드폰 시장의 50% 돌파 예상
 스마트폰 선택율 50% (10년 10월기준, 매월 3%씩 증가)


모바일 시장에서의 요구

WM

Blackberry Android

App?

Bada iOS

• 독립적 앱으로 다양한 운영체제에 대응하는 것은 고비용
• 웹으로 제작하여 컨텐츠 호홖성 담보해 낼수 있음

국내 현업에서의 실제 실태

모회사가 abc 라는 서비스를 운영중인 경우 모바일 홖경에 어떻게 대처?

www.abc.com

m.abc.com

t.abc.com
인력과 시간의
Abc 안드로이드 App. 중복낭비
서비스 불가피
아이폰 App.

아이패드 App.

Feature Phone (Wap)

Omnia Site


HTML5 및 웹기술을 홗용하게 되면?

 아이폰, 안드로이드 운영체제별로 App 으로 만들지 않아도 된다
 모바일 웹하나로 여러 운영체제에 대응가능한 서비스 개발이 가능하다
 데스크탑과 모바일홖경 모두에 적용가능한 서비스가 가능하다


HTML5의 가치

 기업내 인력 및 비용의 중복 투자 감소
 네이티브 앱개발과는 달라 다양한 운영체제에 대응이 가능
 플래시와 같은 플러그인 기술이 탑재되지 않은 기기들에서 대체효과 가능
 HTML4 대비 멀티미디어 요소 및 애플리케이션 제작 지원 기능이 강화


HTML5 탄생 배경


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 하위 호홖 안됨


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.org


HTML5가 나오기 까지

 2004년 WHATWG에서 시작
 W3C에서도 2007년 HTML5 채택
 HTML5 Last Call 2009
 HTML5 Last Call Finish 2011.05
 HTML5 Recommandation 2014년을 목표로 진행중

WHATWG


HTML5 표준화와 Browser Implementation

 WHATWG 의 주체는 누구인가? Browser 벤더들
 표준화의 핵심은 Browser 에서의 구현여부(Implementation)
 HTML5 표준은 크롬, 오페라, 모질라, IE9 및 아이폰, 안드로이드 브라우저에서
빠른 속도로 지원되고 있다.

Mobile Browsers


HTML5 의 새로운 요소들


HTML5 달라진점

 <!doctype html> 의 변화
 <script>, <style> 태그에서 type 생략

HTML4

HTML5


새롭게 추가된 태그들

 <article>
 <aside>
 <footer>
 <header>
 <nav>
 <progress>
 <section>
 <time> 외 30개로 새로운 태그[1] 추가됨.
 시맨틱 웹과 나은 문서 구조를 지향함

[1] 출처 : http://w3schools.com/html5/html5_reference.asp


새롭게 추가된 태그들

HTML4 HTML5
<div class="header"></div> <header></header>


HTML5 코딩

HTML4 HTML5


HTML5 코딩

figure
HTML4

HTML5


새롭게 추가된 멀티미디어 요소

 <canvas>
 <video>
 <audio>
 <source>


새로운 폼요소들

 <keygen>
 <datalist>
 <output>
 새로운 <input> type
• email
• datetime
• time
• datetime-local
• number
• range
• Color

• 단, 현재 브라우저별 지원 편차가 커서 일반화 되는데 시간이 필요


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 API

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 등


HTML5 의 향후 홗용젂망


HTML의 미래? HTML 11

출처 http://html11.org


인터넷의 가젂제품 시장으로의 진출

 퀄컴회장 : “2014년 가젂제품의 70%가 인터넷에 연결된다.”
 미래웹기술연구소 젂망 : “아이패드는 애플이 만드는 가정용 가젂제품중 첫번째에 불과”
 수많은 가젂제품을 묶을 수 있는 유일한 언어는 HTML5 이다.


웹기술을 이용한 앱스토어 : WAC의 등장

 HTML5 기반의 웹앱 플랫폼
 이동통신사 주도의 새로운 홖경 탄생
 Money Power 강점

Widget Runtime(Browser Engine


Native 앱을 대체

• HTML은 더 이상 Static한 Markup Language가 아니다.
• 화려해지고(CSS3,Canvas) 똑똑해진(JavaScript) 언어이다.
• 웹기술을 이용한 앱개발이 가능
• 멀티플랫폼과 N-Screen의 유일한 대안이다


App Store 등록

 Converting WebApps to Native Apps
 PhoneGap
 Titanium
 Appspresso


WebOS

 브라우저가 OS가 되는 세상
 HP : WebOS 2.1 탑재 스마트폰 출시
 크롬 OS ( 넷북 , 타블렛 ) 출시 예정


Summary

 왜 HTML5 인가?
웹기술의 진보, 시장의 요구
모바일 시장의 확대 : 구글, 애플의 선택
크로스 플랫폼 지원, 웹표준 기술의 강점

 생산성 및 비용 젃감의 효과
App Store, App개발 보다 적은 Cost

 HTML5 New Features :
대폭 강화된 멀티미디어 지원, 애플리케이션 기능 강화

 WAC/WebOS 등 홗용도가 무궁무진하다


감사합니다.
HTML5 및 Sencha Touch 관렦
교육 문의: contact@w3labs.kr
http://w3labs.kr


HTML5 Tutorial(Korean)

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Ähnlich wie HTML5 Tutorial(Korean)

Ähnlich wie HTML5 Tutorial(Korean) (20)

Mehr von 미래웹기술연구소 (MIRAE WEB)

Mehr von 미래웹기술연구소 (MIRAE WEB) (20)

HTML5 Tutorial(Korean)