20131217 html5

HTML5
서비스플랫폼개발팀 이덕곤
Daum Communication

HTML5
A vocabulary and associated APIs for HTML and XHTML
!
HTML의 새로운 표준안 - 8가지 클래스의 새로운 기능 구현
XHTML같은 정확성과 HTML의 특성 인 ‘유연성’을 동시에 지원

멀티미디어
더이상 플래시에 의존할 필요가 없다
MP4등의 동영상 바로 첨부 가능
http://commons.wikimedia.org/wiki/Category:HTML5_Technology_Classes_icons
그래픽
2차원 : SVG 백터, 자바스크립트 캔버스 래스터
3차원 : CSS3, 자바스크립트 WebGL
통신
폴링으로 서버에 부담을 주지 않는다
웹 소켓을 사용한 실시간 양방향 통신 가능
장치 접근
네이티브앱이 아니어도 GPS에 접근 가능!
오프라인 및 저장소
Web SQL & Client-side Storage
시맨틱 태그
div div div… 의미론적인 웹
header, nav, aside, section, article, footer
성능 및 통합
웹 워커를 사용하면 화면 멈추는일 없이 연산 처리 가능
CSS3 완벽지원
3차원 효과는 물론 애니메이션 적용 가능

WHATWG
웹 하이퍼텍스트(문서) 애플리케이션 테크놀로지 워킹 그룹
(Web Hypertext Application Technology Working Group, WHATWG)
http://www.whatwg.org/
익스플로러의 독점 액티브엑스 플러그인으로 점점 무거워지는 사이트
모질라재단과 오페라 소프트에서 새로운 표준안 제출
하지만 이 제안은 “웹의 혁명을 위한 기존 지향점에 위배된다”는 이유로 거절
!
그래서 탄생했습니다. 모두 합해 점유율 2%의 회사 셋이 모여…

Web App 1.0 & HTML5
• Web Application 1.0 (WHATWG)
• 웹기반 어플리케이션 개발을 위해 필요한 스펙들에 대한 검토/연구 진행하여 표준안 제시
• HTML5 (W3C)
• 웹컨텐츠을 구현하는 HTML에 대한 표준안 정립
• 독자적인 스펙개발 또는 WHATWG에서 제시한 스펙과 API 연구를 검토하여 
HTML 표준안으로 병합
• WHATWG vs HTML(W3C)
• 각자 독립된 기구이나 서로의 연구 개발내용 검토를 통해 표준스펙을 제안
• W3C는 이러한 표준안을 HTML5 스펙으로 정의하여 단계별 공표

이쯤에서 보는 브라우저 역사
http://millky.com/home/byuri/10000566

HTML5 - Syntax
• DTD (DocumentTypeDeﬁnition)
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
➜ <!DOCTYPE html> (대소문자 구별 없음)
!
• CharacterEncoding
• <meta http-equiv=“Content-Type” content=“text/html”; charset=UTF-8>
• ➜ <meta charset=“UTF-8”>

새로운 TAG
TAG DESCRIPTION
<section> 일반적인 문서 및 Application 영역 표시
<article> 뉴스기사 / 글단락 같은 독립적 컨텐츠 단위 표시
<aside> 문서 주요부분 외의 기타 컨텐츠 표시
<hgroup> 영역별 머릿말 영역 (<h1~6>태그 조합 사용)
<header> 문서 내 소개 및 주요 Navigation을 묶거나 <artcle> 머릿말 사용
<footer> 문서 내 꼬리말 부분(저자, 저작권)을 묶거나 <article>내에서 사용
<nav> 문서 내 내비게이션 요소 표시
<mark> 주목해야할 문구 전달
<meter> 특정 범위에 속하는 숫자값을 전달 (월급, 득표율, 점수 등)
<time> 시간정보 전달
<audio>,<video> 오디오 및 비디오 컨텐트 정의
<source> <video>와 <audio>를 위한 여러개의 미디어 리소스 정의
<canvas> 스크립트(대게 자바스크립트)를 통해서 그림을 그리는데 사용
<acronym> <applet> <basefont> <big> <center> <dir>
<font> <frame> <frameset> <noframes> <strike> <tt>삭제된 TAG

New Elements
(Document Structure)

밀키는요?
<section>
<header>
<nav>
<article>
<header>
<aside>
<footer>
<div>
.
.
.
.
.
<div>

멀티미디어 첨부
<audio controls="controls">
<source src="http://test.mp3" type="audio/mp3"/>
<source src="http://test.ogg" type="audio/ogg"/>
</audio>
!
<video controls="controls">
<source src="http://test.mp4" type="video/mp3">
<source src="http://test.webm" type="video/webm">
</video>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="400" id="movie_name" align="middle">
<param name="movie" value="movie_name.swf"/>

<object type="application/x-shockwave-flash" data="movie_name.swf" width="550" height="400">
<param name="movie" value="movie_name.swf"/>

<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/>
</a>

</object>

</object>

오디오와 비디오 지원
익스플로러 크롬 파이어폭스 사파리 오페라
MP3 O O X O X
OGG X O O O O
WAV X O O X O
http://kurien.tistory.com/74
익스플로러 크롬 파이어폭스 사파리 오페라
MP4
(H.264+ACC)
O O X O X
WEBM
(VP8+VORBIS)
X O O X O
OGV
(THEORA+VORBIS)
X O O X O

MP3 라이선스
http://www.mp3licensing.com/royalty/games.html
MP3 포맷의 권리는 상업적인 용도에 사용될 경우 무료가 아님
MP3는 현재 독일의 호퍼연구소가 독점적 권리를 소유
5000카피 이상 퍼지면? $2500! 다행히 2017년 전부 만료예정

오프라인 저장소
• Web Storage
• localStorage (sessionStorage)
• Cookie
!
• Web SQL Database
• Google gears
!
• Indexed Database

Web Storage
• 대부분의 브라우저에서 지원
• 사용하기 쉽다
• 유효기간이 없다
• 용량이 크다
• 오직 client을 위한 Storage
• 브라우저간 공유
• 문자만 저장, 객체는 toString
• Internet Explorer 8
• Firefox 3.5
• Safari 4
• Google Chrome 4
• Opera 10.50
• iOS 2.0
• Android 2.0

Web Storage
function clickCounter() {
if (typeof (Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
alert("버튼 클릭 횟수 " + localStorage.clickcount + " 번");
} else {
alert("Web Storage is not supported by this browser.");
}
}
function clickCounter_session() {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
alert("버튼 클릭 횟수 " + sessionStorage.clickcount + " 번 (이번 세션에만)";
}

Web SQL Database
• SQLLite가 임베디드
• SQLLite의 문법을 그대로 사용
• 도메인당 5mb를 제공
• 단순한 API, 간단한 callback
• SQLLite는 표준이 아님
• 다른 디바이스 지원 문제
• 2009년 12월 버전 이후로는 스펙의 책정이 중지
• SQL의 사양에 대해 브라우저 개발사간의 동의를 얻지못한 것이 주원인
• Safari 4.0
• Chrome 4.0
• Opera 10.50
• iOS 3.0
• Android 2.0

Indexed Database API
• Web SQL Database 단점을 해결하기 위해 표준화
• database open, object store 생성
• 객체의 저장과 삭제
• index 작성 및 이용
• 효율적인 검색 및 커서 조작
• 결국 고가용성 환경이 아닌, 모바일 환경에서의 가벼운 로컬DB 컨셉
• 관계형DB보다는 같은 객체기반의 비관계형 DB가 더 어울림
http://www.html5rocks.com/en/tutorials/webdatabase/todo

커뮤니티 반응
http://www.w3.org/TR/IndexedDB/

Application Cache
• HTML, JS, CSS 등의 문서파일들과 이미지 파일들을 캐쉬
• 오프라인상일때도 사용 가능!!
!
• ofﬂine 브라우징
• 사용자들은 ofﬂine중에도 application을 사용할 수 있음
• speed
• 캐쉬된 리소스를 불러오는 것은 더 빠름
• 서버 부하 감소
• 브라우저는 단지 바뀐 부분만 서버로부터 받음

App Cache의 사용
cache.manifest 파일
!
CACHE MANIFEST
# 이렇게 샾으로 시작되는 줄은 주석이다.
# 캐쉬될 파일들을 지정하는 곳 CACHE:는 생략가능
CACHE:
imgs/a.png
imgs/b.png
imgs/c.png
# 언제나 네트웍을 통해 받아와야만 하는 파일 리스트
NETWORK:
search.json
news.json
# 네트웍에서 파일을 받아올 수 없을 때 보여줄 파일
FALLBACK:
search.json no-network.json
img/main_image.png img/backup_image.png
HTML 설정
!
<html manifest="cache.manifest">
<head>
…
cache.manifest 파일은
HTTP Header의 Content-type이
text/cache-manifest
manifest 파일에 지정되지 않은 파일들은
두번째 접속 때부턴 무조건 받아오지 못함
!
캐쉬되지 않았으면 좋겠는 파일이 있다면
manifest의 NETWORK: 항목에 추가해야함

위치 첨부
function getLocation_cord() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
alert("Geolocation is not supported by this browser.");
}
}
function showPosition(position) {
alert("위도:" + position.coords.latitude
+ "; 경도:" + position.coords.longitude);
}
Geolocation은 사용자의 지리학적 위치를 알아낼 수 있음
특정 네트워크에서는 표시되지 않을 수 있음
해당 기능은 유저의 허용이 있어야만 사용할 수 있는 기능임

다음 지도 API
<script type=“text/javascript"
src=“http://apis.daum.net/maps/maps3.js?apikey=KEY"
charset="utf-8"></script>
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
!
map = new daum.maps.Map(document.getElementById('map'), {
center : new daum.maps.LatLng(latitude, longitude)
});
var marker = new daum.maps.Marker({
position : new daum.maps.LatLng(latitude, longitude)
});
marker.setMap(map);
http://dna.daum.net/apis/maps

데이터형 API - 로컬 API
$.ajax({
url : "http://apis.daum.net/local/geo/coord2addr?apikey=KEY"
"&longitude=" + longitude + "&latitude=" + latitude +
"&output=json&callback=callback",
dataType : "jsonp",
jsonp : "callback",
success : function(d)
{
alert(d.fullName);
}
});
http://dna.daum.net/apis/local/ref#coord2addr

Device APIs Working Group (DAP WG)
• Geolocation 외에도 브라우저에서 하드웨어를 제어 하려는 시도
• 웹 애플리케이션이 디바이스 자원 접근 API를 정의하고 있음
• 주소록, 일정, 카메라 제어, 배터리 정보, 갤러리, 파일 시스템 등
• 예 : 카메라
• http://dev.w3.org/2009/dap/camera/
• <input type="ﬁle" accept="image/*;capture=camera">

W3C의 표준화 단계
• WD -> LC -> CR -> PR -> Rec
• WD: Working Draft
• LC: Last Call
• CR: Candidate Recomendation
• Rec: Recomendation
http://www.w3.org/2009/dap/

Canvas SVG
둘다 웹페이지에서 그림을 그리기 위한 도구이지만 근본적으로 다르다
CANVAS SVG
• JavaScript를 이용하여 2D & 3D 구현

• 해상도 의존적(픽셀단위, 비트맵)

• Event Handler를 지원하지 않음

• 좋지않은 텍스트 렌더링

• 결과를 png나 jpg로 저장 가능

• 한번 그림이 그려지게 되면 끝

• 위치가 바뀌면 새로 그림

• 많은 객체가 자주 다시 그려져야 함으로
그래픽 집약적 게임에 적합
• XML로 2D그래픽을 설졍하기 위한 언어

• 해상도에 독립적(벡터)

• Event Handler 지원

• 거대한 렌더링이 필요한 어플리케이션에
적합(Google Maps)

• 복잡해질 경우 렌더링 속도가 느림

• 각각 그려진 모양이 객체에 기억

• 객체의 속성이 바뀌면 새로 그림

• 게임 어플리케이션으로 부적합

CSS3 Animation
animation-name: spinningH; /* @ keyframes 애니메이션의 이름을 지정한다. */
animation-timing-function:ease-in-out; /* 애니메이션이 사이클 동안 어떻게 진행되는가를 설명한다. 디폴트는 "ease" */
animation-duration:6s; /* Default 0 애니메이션 한 사이클을 완료하는데 걸리는 초 또는 밀리 초를 지정한다 */
animation-iteration-count:inﬁnite; /* 애니메이션이 재생되는 횟수를 지정한다. */
animation-direction:linear; /* 애니메이션을 역방향으로 재생해야 할지 여부를 지정한다. */
animation-delay:0; /* 애니메이션 시작 될 때 지연 시간을 지정한다. 디폴트는 0 */
animation-play-state:running; /* 애니메이션을 실행하거나 일시 정지 여부를 지정 디폴트는 "running */
@keyframes spinningH {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to{
transform: rotateX(360deg) rotateY(360deg);
}
}
!
animation : spinningH 6s infinite linear;

Web Worker
• Javascript코드를 background에서 실행시키기 위한 기술
• Background에서 실행되는 코드를 ‘Worker’라고 불린다
!
• UI(DOM)과는 완전히 분리된 환경에서 동작
• UI Thread와 완전히 별도의 Thread가 생성되어 동작
!
• 사용 예
• 매우 복잡한 수학적 계산 작업
• 원격지에 있는 리소스에 대한 액세스 작업
• 백그라운드에서 조용히(?) 오랜시간 작업해야 하는 경우
• UI 쓰레드에 방해 없이 지속적으로 수행해야 하는 작업 등
http://www.slideshare.net/jidolstar/html5-web-worker

Web Socket
http://www.slideshare.net/arungupta1/getting-started-with-websocket-and-serversent-events-in-java
http://m.mkexdev.net/98
• HTML5 ‘표준’
• 브라우저 · 서버 모두 간결
• 프록시 지원 기대
• 커넥션 기반
• 양방향 풀 듀플렉스
• TCP/IP 소켓을 직접 다루듯

HTML5 로드맵
• HTML5 Recommendation in Q4, 2014
• HTML5.1 Recommendation in Q4, 2016
• http://dev.w3.org/html5/decision-policy/html5-2014-
plan.html

HTML 5.1
HTML 5.1은 도대체 뭔가요?
http://blog.creation.net/533

감사합니다
참고문서 및 사이트
http://www.w3.org/TR/html5/
http://www.w3schools.com/html/html5_intro.asp
http://channy.creation.net/lecture/html5
http://dna.daum.net/apis/dashboard
https://code.google.com/p/frontend-tech-class/
http://devsw.tistory.com/101
http://www.slideshare.net/mixed/client-side-storage-in-html5-13260032
모던 웹 디자인을 위한 HTML5 + CSS3 입문 / 윤인성 / 한빛미디어

20131217 html5

More Related Content

What's hot

Viewers also liked

Similar to 20131217 html5

20131217 html5