혁신적인 RIA 개발을 위한 차세대 표준 API, Pro HTML5 Programming
프로 HTML5 프로그래밍
지은이 : 피터 러버스, 브라이언 앨버스, 프랭크 살림
옮긴이 : 이준, 정승희
출판사 : 위키북스
발행 : 2011.07.19
가격 : 25,000원
 |
|
< 인터파크 바로가기 >
추천 하는 HTML5 책!
추천 요점 : 이책은 <html> ~ </html> 까지 한 페이지의 소스가 예제가 있다. 참고 이미지는 많지 않지만, 예제 소스가 좋다!
[목차]
01장 : HTML5소개
02장 : HTML5 캔버스 API
03장 : HTML5 오디오와 비디오
04장 : HTML5 지오로케이션 API
05장 : 커뮤니케이션 API
06장 : HTML5 웹소켓 API
07장 : HTML5 폼 API
08장 : HTML5 웹워커 API
09장 : HTML5 웹스토리지 API
10장 : HTML5 오프라인 웹 애플리케이션 개발
11장 : HTML5의 미래
[예제 소스]
1. www.apress.com [소스다운]
2. www.prohtml5.com [소스다운]
3. www.wikibook.co.kr [소스다운]
[내용]
01장 : HTML5소개
WHATWG / W3C / IETF
HTML5 특성 : 호완성, 유용성, 상호 호환성, 보편적 접근성
사용자 우선주의 : (id="prohtml5") = (id=prohtml5) = (ID="prohtml5)
표현과 내용의 분리 : HTML5 + CSS3
불필요한 플러그인이 필요없다.
DOCTYPE 선언 : <!DOCTYPE html>
문자셋 선언 : <meta charset="utf-8">
P.14. 예제1-1 : 예제 HTML5 페이지 - 주요 HTML5 소스코드가 들어있다. (추천)
P.16. 예제1-2 : HTML5 페이지에 사용된 CSS 페이지 (예제1-1과 함께 사용하는 CSS소스)
마우스가 올라간 요소 찾을 때 : var hovered = document.querySelector("td:hover");
02장 : HTML5 캔버스 API
<canvas> </canvas>
익스플로러는 지원하지 않는다.
익스플로러 체크 스크림트 태그 : <head> <!--[if IE]> <script src="excanvas.js"></script> <![endif]--> </head>
P.34. 예제2-3 : 브라우저 지원 여부 확인 소스
try {
document.createElement("canvas").getContext("2d");
document.getElementById("support").innerHTML = " HTML5 캔버스 지원 브라우저 ";
} catch (e) {
document.getElementById("support").innerHTML = " HTML5 캔버스 지원 하지 않는 브라우저 ";
}
캔버스 예제 : <canvas id="canvas01" style="border:1px solid;" width="200" height="200" > </canvas>
3차원 컨텍스트는 차후 버전에서 지원될 예정이라 함.
픽셀 데이터 다루기 : 된다.
03장 : HTML5 오디오와 비디오
오디오코덱 : AAC, MPEG-3, Ogg Vorbis
비디오코덱 : H.264, VP8, Ogg Theora
오디오 제어 :
<audio autoplay>
<source src="johann_sebastian_bach_air.ogg" type="audio/ogg; codecs=vorbis">
<source src="johann_sebastian_bach_air.mp3" type=audio/mpeg">
어쩌구 저쩌구~
</audio>
마우스로 비디오 재생 제어 :
<video id="movies" onmouseover="this.play()" onmouseout="this.pause()" autobuffer="true" width="400px" height="300px">
<source src="Int.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="Int.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
04장 : HTML5 지오로케이션 API
위치 정보 근원 : IP주소, 위성위치, Wi-Fi, 휴대전화, 사용자 정의
반복적인 위치 요청 :
navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError);
navigator.geolocation.watchPosition(updateLocation, handleLocationError);
P.112. 예제 4-7 : 자바스크립트로 구현한 하버사인 공식
P.117. 예제 4-14 : 거리 추적기의 전체 코드
05장 : 커뮤니케이션 API
postMessage API를 이용해 메시지 보내는 방법 :
chatFrame.contentWindow.postMessage('Hello, world', 'http://www.example.com/');
P.136. 예저 5-3 : 포털 페이지 postMessagePortal.html의 전체 코드
06장 : HTML5 웹소켓 API
파이선
P.168. 예제 6-5 : websocket.py의 전체 코드 (파이선)
P.186. 예제 6-9 : tracker.html의 전체 코드
07장 : HTML5 폼 API
<input type="email">
<input type="text" name="name01" autocomplete="off" autofocus>
08장 : HTML5 웹워커 API
HTML5 웹워커 : 웹 애플리케이션에서 백그라운드 프로세스를 사용할 수 있게 해주고, 별도의 스레드로 동작하여 HTML5 웹어커를 사용하는 자바스크립트 애플리케이션이 멀티코어 CPU를 활용할 수 있게 해준다.
P.221. 예제 8-1 : 브라우저 지원 여부 확인
function loadDemo(){
if (typeof(Worker) !== "undefined") {
document.getElementById("suppport").innerHTML =
"Excellent! Your browser supports HTML5 Web Workers";
"HTML5 웹워커를 지원하는 브라우저";
}
}
P.235. 예제 8-7 : blur.html 파일의 내용
09장 : HTML5 웹스토리지 API
P.246. 예제 9-1 : 웹스토리지 지원 여부 확인
function checkStorageSupport() {
if (window.sessionStorage) {
alert('sessionStorage를 지원하는 브라우저.');
} else {
alert('sessionStorage를 지원하지 않는 브라우저.');
}
if (window.localStorage) {
alert('localStorage를 지원하는 브라우저.');
} else {
alert('localStorage를 지원하지 않는 브라우저.');
}
}
P.265. 예제 9-12 : racerBroadcast.html 파일의 내용
10장 : HTML5 오프라인 웹 애플리케이션 개발
애플리케이션 개발자는 오프라인에서도 사용 가능한 애플리케이션을 만들고자 HTML5 애플리케이션을 구성하는 HTML, CSS, 자바스크립트, 이미지 등의 특정 추가 리소스를 지정할 수 있다. (예) :
이메일 작성과 읽기 / 문서 편집 / 프레젠테이션 편집과 게시 / To-do 리스트 작성
cache manifest / application cache
manifest 속성 : <html manifest="application.manifest"> </html>
11장 : HTML5의 미래
WebGL / 3D
0
'▷일상' 카테고리의 다른 글
| 카메라 셋 구입 요망 (0) | 2012.05.14 |
|---|---|
| L 간단하게 된장찌개 만들기 (0) | 2012.04.17 |
| L 미션 완료 - 투표 했다. (0) | 2012.04.11 |
| L 제19대 국회의원 선거 - 투표소 확인 (2) | 2012.04.09 |
| B 만들면서 배우는 HTML5 + CSS3 + jQuery (0) | 2012.04.07 |
| B 웹혁명을 꿈꾸다 HTML5 & API 입문 (0) | 2012.03.23 |
| B 퇴계에게 공부법을 배우다 (0) | 2012.03.11 |
| B Do it! 새로운 웹 시대의 표준, HTML5를 빨리 만나는 길 HTML5 + CSS3 (0) | 2012.03.07 |
| PC조립해볼까! (0) | 2011.10.04 |
| 플랙스 & 플래시 책 구입 (0) | 2011.06.15 |
