20131217 html5
7 likes968 views
약 1년전... 조사했던 내용입니다. 제가 프론트쪽으로 많이 부족해서 내용중에 문제가 있는 분이 있다면 알려주시면 감사하겠습니다~!!! 많이 늦었지만 ^^; 필요하신분이 있을까 해서 올려 봅니다.
![멀티미디어 첨부
<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>](https://image.slidesharecdn.com/20131217dkleehtml5-141116214506-conversion-gate01/85/20131217-html5-14-320.jpg)
20131217 html5
- 2. HTML5 A vocabulary and associated APIs for HTML and XHTML ! HTML의 새로운 표준안 - 8가지 클래스의 새로운 기능 구현 XHTML같은 정확성과 HTML의 특성 인 ‘유연성’을 동시에 지원
- 3. HTML5?
- 4. 멀티미디어 더이상 플래시에 의존할 필요가 없다 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차원 효과는 물론 애니메이션 적용 가능
- 5. 역사
- 6. WHATWG 웹 하이퍼텍스트(문서) 애플리케이션 테크놀로지 워킹 그룹 (Web Hypertext Application Technology Working Group, WHATWG) http://www.whatwg.org/ 익스플로러의 독점 액티브엑스 플러그인으로 점점 무거워지는 사이트 모질라재단과 오페라 소프트에서 새로운 표준안 제출 하지만 이 제안은 “웹의 혁명을 위한 기존 지향점에 위배된다”는 이유로 거절 ! 그래서 탄생했습니다. 모두 합해 점유율 2%의 회사 셋이 모여…
- 7. Web App 1.0 & HTML5 • Web Application 1.0 (WHATWG) • 웹기반 어플리케이션 개발을 위해 필요한 스펙들에 대한 검토/연구 진행하여 표준안 제시 • HTML5 (W3C) • 웹컨텐츠을 구현하는 HTML에 대한 표준안 정립 • 독자적인 스펙개발 또는 WHATWG에서 제시한 스펙과 API 연구를 검토하여 HTML 표준안으로 병합 • WHATWG vs HTML(W3C) • 각자 독립된 기구이나 서로의 연구 개발내용 검토를 통해 표준스펙을 제안 • W3C는 이러한 표준안을 HTML5 스펙으로 정의하여 단계별 공표
- 8. 이쯤에서 보는 브라우저 역사 http://millky.com/home/byuri/10000566
- 9. 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”>
- 10. 새로운 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
- 11. <얖> (<div>)
- 14. 멀티미디어 첨부 <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>
- 15. 오디오와 비디오 지원 익스플로러 크롬 파이어폭스 사파리 오페라 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
- 16. MP3 라이선스 http://www.mp3licensing.com/royalty/games.html MP3 포맷의 권리는 상업적인 용도에 사용될 경우 무료가 아님 MP3는 현재 독일의 호퍼연구소가 독점적 권리를 소유 5000카피 이상 퍼지면? $2500! 다행히 2017년 전부 만료예정
- 17. 오프라인 저장소 • Web Storage • localStorage (sessionStorage) • Cookie ! • Web SQL Database • Google gears ! • Indexed Database
- 18. 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
- 19. 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 + " 번 (이번 세션에만)"; }
- 20. 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
- 21. Indexed Database API • Web SQL Database 단점을 해결하기 위해 표준화 • database open, object store 생성 • 객체의 저장과 삭제 • index 작성 및 이용 • 효율적인 검색 및 커서 조작 • 결국 고가용성 환경이 아닌, 모바일 환경에서의 가벼운 로컬DB 컨셉 • 관계형DB보다는 같은 객체기반의 비관계형 DB가 더 어울림 http://www.html5rocks.com/en/tutorials/webdatabase/todo
- 23. Application Cache • HTML, JS, CSS 등의 문서파일들과 이미지 파일들을 캐쉬 • 오프라인상일때도 사용 가능!! ! • offline 브라우징 • 사용자들은 offline중에도 application을 사용할 수 있음 • speed • 캐쉬된 리소스를 불러오는 것은 더 빠름 • 서버 부하 감소 • 브라우저는 단지 바뀐 부분만 서버로부터 받음
- 24. 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: 항목에 추가해야함
- 25. 위치 첨부 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은 사용자의 지리학적 위치를 알아낼 수 있음 특정 네트워크에서는 표시되지 않을 수 있음 해당 기능은 유저의 허용이 있어야만 사용할 수 있는 기능임
- 26. 밀키는요?
- 27. 다음 지도 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
- 28. 데이터형 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
- 29. Device APIs Working Group (DAP WG) • Geolocation 외에도 브라우저에서 하드웨어를 제어 하려는 시도 • 웹 애플리케이션이 디바이스 자원 접근 API를 정의하고 있음 • 주소록, 일정, 카메라 제어, 배터리 정보, 갤러리, 파일 시스템 등 • 예 : 카메라 • http://dev.w3.org/2009/dap/camera/ • <input type="file" accept="image/*;capture=camera">
- 30. W3C의 표준화 단계 • WD -> LC -> CR -> PR -> Rec • WD: Working Draft • LC: Last Call • CR: Candidate Recomendation • Rec: Recomendation http://www.w3.org/2009/dap/
- 31. Canvas SVG 둘다 웹페이지에서 그림을 그리기 위한 도구이지만 근본적으로 다르다 CANVAS SVG • JavaScript를 이용하여 2D & 3D 구현 • 해상도 의존적(픽셀단위, 비트맵) • Event Handler를 지원하지 않음 • 좋지않은 텍스트 렌더링 • 결과를 png나 jpg로 저장 가능 • 한번 그림이 그려지게 되면 끝 • 위치가 바뀌면 새로 그림 • 많은 객체가 자주 다시 그려져야 함으로 그래픽 집약적 게임에 적합 • XML로 2D그래픽을 설졍하기 위한 언어 • 해상도에 독립적(벡터) • Event Handler 지원 • 거대한 렌더링이 필요한 어플리케이션에 적합(Google Maps) • 복잡해질 경우 렌더링 속도가 느림 • 각각 그려진 모양이 객체에 기억 • 객체의 속성이 바뀌면 새로 그림 • 게임 어플리케이션으로 부적합
- 32. CSS3 3D
- 33. 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;
- 34. Web Worker • Javascript코드를 background에서 실행시키기 위한 기술 • Background에서 실행되는 코드를 ‘Worker’라고 불린다 ! • UI(DOM)과는 완전히 분리된 환경에서 동작 • UI Thread와 완전히 별도의 Thread가 생성되어 동작 ! • 사용 예 • 매우 복잡한 수학적 계산 작업 • 원격지에 있는 리소스에 대한 액세스 작업 • 백그라운드에서 조용히(?) 오랜시간 작업해야 하는 경우 • UI 쓰레드에 방해 없이 지속적으로 수행해야 하는 작업 등 http://www.slideshare.net/jidolstar/html5-web-worker
- 35. Web Socket http://www.slideshare.net/arungupta1/getting-started-with-websocket-and-serversent-events-in-java http://m.mkexdev.net/98 • HTML5 ‘표준’ • 브라우저 · 서버 모두 간결 • 프록시 지원 기대 • 커넥션 기반 • 양방향 풀 듀플렉스 • TCP/IP 소켓을 직접 다루듯
- 36. HTML5 로드맵 • HTML5 Recommendation in Q4, 2014 • HTML5.1 Recommendation in Q4, 2016 • http://dev.w3.org/html5/decision-policy/html5-2014- plan.html
- 37. HTML 5.1 HTML 5.1은 도대체 뭔가요? http://blog.creation.net/533