20131217 dklee html5
38
HTML5 서비스플랫폼개발팀 이덕곤 Daum Communication
description
약 1년전... 조사했던 내용입니다. 제가 프론트쪽으로 많이 부족해서 내용중에 문제가 있는 분이 있다면 알려주시면 감사하겠습니다~!!! 많이 늦었지만 ^^; 필요하신분이 있을까 해서 올려 봅니다.
Transcript of 20131217 dklee html5
HTML5
서비스플랫폼개발팀 이덕곤 Daum Communication
HTML5A vocabulary and associated APIs for HTML and XHTML
!HTML의 새로운 표준안 - 8가지 클래스의 새로운 기능 구현
XHTML같은 정확성과 HTML의 특성 인 ‘유연성’을 동시에 지원
HTML5?
멀티미디어 더이상 플래시에 의존할 필요가 없다
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 스펙으로 정의하여 단계별 공표
HTML5 - Syntax
• DTD (DocumentTypeDefinition) • <!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”>
새로운 TAGTAG 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
<얖> (<div>)
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"/> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="movie_name.swf" width="550" height="400"> <param name="movie" value="movie_name.swf"/> <!--<![endif]--> <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> <!--[if !IE]>--> </object> <!--<![endif]--> </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 XWEBM
(VP8+VORBIS) X O O X OOGV
(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 Storagefunction 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 등의 문서파일들과 이미지 파일들을 캐쉬
• 오프라인상일때도 사용 가능!!
!• offline 브라우징
• 사용자들은 offline중에도 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="file" 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 3D
CSS3 Animation
animation-name: spinningH; /* @ keyframes 애니메이션의 이름을 지정한다. */ animation-timing-function:ease-in-out; /* 애니메이션이 사이클 동안 어떻게 진행되는가를 설명한다. 디폴트는 "ease" */ animation-duration:6s; /* Default 0 애니메이션 한 사이클을 완료하는데 걸리는 초 또는 밀리 초를 지정한다 */ animation-iteration-count:infinite; /* 애니메이션이 재생되는 횟수를 지정한다. */ 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
감사합니다참고문서 및 사이트
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 입문 / 윤인성 / 한빛미디어
