살아 움직이는 표준 HTML5

선구적인 두 웹 개발자가 저술한 '살아움직이는표준 HTML5: 다목적 예제를 활용한 명쾌한 해설'은 HTML5의 강력한 새 요소들과 기법들을 간결하고 실용적이며 이해하기 쉬운 예제들을 통해서 상세히 소개한다. 음향/동영상 재생에서 지리 정보를 웹 페이지나 응용 프로그램에 통합하는 것에 이르기까지 HTML5로 얼마나 많은 일을 할 수 있는지를 이 책에서 발견하게 될 것이다.

간결하고 친절한 이 참고서는 JavaScript와 DOM을 이용해서 HTML5를 최대한 활용하기 위한 여러 기법과 요령, 예제들로 가득 차 있다. 저자들은 지금 당장 주요 브라우저들에서 실행해 볼 수 있는 '순수한 HTML5' 예제들을 제시하는 한편, HTML5 개발 과정에서 논란이 되고 있는 최신 기술들에 대해서도 현실적인 통찰을 제공한다. 모든 예제를 저자의 웹 사이트에서 내려받을 수 있으며, 새로운 정보나 명세서 갱신 상황을 알려주는 웹 자원들로의 링크들도 제시되어 있다.

이 책의 저자들은 새로운 웹 표준만큼이나 다재다능하며, 또한 아직 개발 중인 표준에 대한 책을 쓸 정도로 용감하다. 최근 한 인터뷰에서 저자들은 이 책의 특징인 "간결한 설명과 상세한 예제의 조합"이 아주 자랑스럽다고 말했는데, 군더더기 없고 오해의 여지가 적은 문체와 본문에서 명시적으로 설명하지 않은 부분까지도 충분히 짐작하게 하는 예제 코드 덕분에 책을 앞표지에서 뒤표지까지 모두 읽은 독자는 그 의견에 전적으로 동감할 것이며 그러한 조합의 위력을 충분히 누릴 수 있을 것이다.



● 도서 특징



ㆍ 브라우저 지원 상황: HTML5로 지금 당장 사용할 수 있는 것과 없는 것.

ㆍ HTML5 문서의 구조와 의미론.

ㆍ 새로운 입력 형식과 요소, 클라이언트 쪽 유효성 검증을 비롯한 지능적인 양식(form) 기능.

ㆍ 'video' 요소와 'audio' 요소, 그리고 JavaScript에서 매체를 다루는 방법.

ㆍ 캔버스와 SVG를 이용한 고급 그래픽.

ㆍ 구글 지도를 통한 위치 추적을 비롯한 지리 정보 활용.

ㆍ 웹 저장소, 오프라인 웹 응용 프로그램, 웹소켓, 웹 일꾼.

ㆍ 마이크로데이터와 마이크로데이터 DOM API를 이용한 의미 마크업 내장.

ㆍ 'draggable' 특성을 이용한 끌어다 놓기 구현.

ㆍ 'data-*,' 'hidden,' 'contenteditable,' 'spellcheck'을 비롯한 새 전역 특성들.



이 책을 읽는 방법



이 책을 읽는 방법은 물론 전적으로 독자가 결정할 일이다. 각 장(chapter)은 그 장만 따로 읽어도(즉, 다른 장들을 읽지 않았다고 해도) 충분히 이해할 수 있게 구성되어 있다. 따라서 전통적인 방식대로 처음부터 끝까지 차례로 읽어도 되고, 아니면 호기심이 이끄는 대로 왔다갔다 하면서 읽어도 무방하다. 무엇보다도 중요한 것은 이 책을 재미있게 읽으시길!

역자의 글

서 문

저자 소개



CHAPTER 1 새로운 웹 표준 HTML5의 개요

1.1 사건의 발단

1.2 시간 여행: HTML5 역사의 주요 사건들

1.3 거두절미하고...

1.3.1 무엇이 새로운가?

1.3.2 폐기된 요소들과 특성들

1.3.3 그렇다면 XHTML의 운명은?

1.4 지금 당장 HTML5를 사용할 수 있는가?

요 약



CHAPTER 2 문서의 구조와 의미를 위한 요소들

2.1 표제부를 위한 'header' 요소와 'hgroup' 요소

2.2 주된 내용을 위한 'article'

2.3 바닥글을 위한 'footer'와 'nav'

2.4 사이드바를 위한 'aside'와 'section'

2.5 개요 파악 알고리즘

2.6 그림, 도해를 위한 'figure'와 'figcaption'

2.7 텍스트 수준의 새로운 의미 요소들

2.7.1 'ruby,' 'rt,' 'rp' 요소

2.7.2 'time' 요소

2.7.3 'mark' 요소

2.7.4 'wbr' 요소

2.7.5 약간만 바뀐 요소들

요 약



CHAPTER 3 지능적인 입력 양식

3.1 새로운 입력 형식들

3.1.1 입력 형식 'tel'과 'search'

3.1.2 입력 형식 'url'과 'email'

3.1.3 날짜와 시간을 위한 'datetime', 'date', 'month', 'week', 'time', 'datetime-local'

3.1.4 입력 형식 'number'와 'range'

3.1.5 색상 입력을 위한 'color'

3.1.6 새 입력 형식들의 사용 예

3.2 양식에 유용한 특성들

3.2.1 초점 설정을 위한 'autofocus'

3.2.2 입력 힌트 텍스트를 위한 'placeholder'

3.2.3 필수 입력 필드를 위한 'required'

3.2.4 'input' 요소의 추가 특성들

3.3 새 양식 요소들

3.3.1 수치 측정값을 표시하는 'meter'

3.3.2 과제의 진행 정도를 표시하는 'progress'

3.3.3 선택 항목들의 목록을 위한 'datalist'

3.3.4 암호화 키를 위한 'keygen'

3.3.5 계산 결과를 담는 'output'

3.4 클라이언트 쪽 양식 검증

3.4.1 'invalid' 사건

3.4.2 'checkValidity' 함수

3.4.3 'setCustomValidity()'를 이용한 오류 처리

3.4.4 유효성 점검 요약

3.4.5 검증이 필요 없을 때를 위한 'formnovalidate' 특성

3.5 예제: 고객 지원 요청 양식

요 약



CHAPTER 4 동영상과 음향

4.1 첫 예제

4.2 'video' 요소와 그 특성들

4.3 동영상 코덱

4.3.1 Ogg: Theora와 Vorbis

4.3.2 MPEG-4: H.264와 AAC

4.3.3 WebM: VP8와 Vorbis

4.4 동영상 변환 도구

4.4.1 FFmpeg

4.4.2 VLC

4.4.3 Firefogg

4.4.4 Miro Video Converter

4.5 브라우저별 동영상 형식 지원 여부

4.6 기존 브라우저를 위한 임시 해결책

4.6.1 mwEmbed

4.6.2 html5media

4.7 동영과 스크립팅 ― 간단한 동영상 재생기

4.7.1 동영상 내장

4.7.2 동영상 재생의 시작과 중지

4.7.3 재생 위치의 표시 및 설정

4.7.4 빨리 감기·되감기

4.7.5 영화의 특정 장면 선택

4.7.6 음량 조절(크게/작게, 무음)

4.7.8 'HTMLMediaElement' 인터페이스의 다른 특성들과 메서드들

4.7.9 여러 가지 매체 관련 사건들

4.8 그렇다면 음향은?

요 약



CHAPTER 5 캔버스

5.1 첫 예제

5.2 직사각형

5.3 색상과 그림자

5.4 그래디언트

5.5 경로

5.5.1 선분

5.5.2 베지에 곡선

5.5.3 원호

5.5.4 직사각형

5.5.5 외곽선, 채움, 절단 마스크

5.6 텍스트

5.6.1 글꼴

5.6.2 수평 고정점

5.6.3 수직 고정점

5.6.4 텍스트 그리기와 크기 측정

5.7 이미지 내장

5.8 픽셀 조작

5.8.1 'ImageData' 객체 다루기

5.8.2 'getImageData()', 'createImageData()', 'putImageData()'를 이용한 색상 조작

5.9 합성

5.10 패턴

5.11 변환

5.12 'canvas.toDataURL()'을 이용한 Base64 부호화

5.13 'save()'와 'restore()'

5.14 애니메이션

5.14.1 여러 색깔 구들로 이루어진 애니메이션

5.14.2 'drawImage()'로 동영상 재생하기

5.15 남은 주제 몇 가지

5.15.1 'isPointInPath(x, y)'

5.15.2 캔버스의 접근성?

5.15.3 보안 측면

5.15.4 브라우저 지원

5.15.5 참고 링크

요 약



CHAPTER 6 SVG와 MathML

6.1 MathML

6.2 SVG

요 약



CHAPTER 7 지리 위치 정보를 위한 Geolocation API

7.1 지리 위치 정보의 기초

7.1.1 지리학적 자료에 관해

7.1.2 온라인 지도 서비스

7.1.2.1 Google 지도

7.1.2.2 OpenStreetMap과 OpenLayers

7.2 첫 실험: 브라우저 안의 지리 정보

7.3 위치 파악의 기술적 배경

7.4 OpenStreetMap 지도에 현재 위치 표시하기

7.5 Google 지도를 이용한 위치 추적

7.6 예제: Geonotes

7.6.1 작동 방식

7.6.2 주요 코드

7.7 브라우저 지원

요 약



CHAPTER 8 웹 저장소와 오프라인 웹 응용 프로그램

8.1 웹 저장소 242

8.1.1 'Storage' 인터페이스

8.1.2 'sessionStorage'

8.1.3 'localStorage'

8.1.4 'storage' 사건

8.1.5 디버깅

8.2 오프라인 웹 응용 프로그램

8.2.1 캐시 매니페스트 파일

8.2.2 오프라인 상태와 사건들

8.2.3 디버깅

8.3 브라우저 지원

8.4 예제: Click to tick!

8.4.1 플레이어 입장에서 본 응용 프로그램의 작동 방식

8.4.2 게임 관리자를 위한 기능

8.4.3 주요 코드

8.4.3.1 게임의 HTML 코드

8.4.3.2 캐시 매니페스트 파일

8.4.3.3 JavaScript 코드

8.4.4 몇 가지 확장안들

요 약



CHAPTER 9 소켓 통신을 위한 WebSocket API

9.1 웹소켓 서버

9.2 예제: 방송 서버

9.2.1 방송 클라이언트

9.2.2 방송 서버

9.3 예제: Battleships!

요 약



CHAPTER 10 병렬 처리를 위한 Web Workers API

10.1 웹 일꾼 소개

10.2 윤년 찾기

10.3 지형 이미지의 고도 프로파일 계산

10.3.1 주요 코드

요 약



CHAPTER 11 마이크로데이터

11.1 마이크로데이터의 문법

11.1.1 'itemscope' 특성과 'itemprop' 특성

11.1.2 'itemtype' 특성

11.1.3 'itemid' 특성

11.1.4 'itemref' 특성

11.2 마이크로데이터 DOM API

요 약



CHAPTER 12 마무리: 몇 가지 전역 특성과 메서드

12.1 'class' 특성을 위한 새 속성과 메서드

12.2 'data-*'를 이용한 커스텀 특성 정의

12.3 'hidden' 특성

12.4 'classList' 인터페이스

12.5 끌어다 놓기 기능을 위한 'draggable' 특성

12.5.1 끌어다 놓기와 파일 API의 조합

12.6 'contenteditable' 특성과 'spellcheck' 특성

요 약

책을 마치며

찾아보기

Klaus Forster 저자 Klaus Forster는 오픈소스의 열광적인 팬인 그는 오스트리아 인스부르크 대학의 지리학과에서 일한다. 그는 여러 SVG Open 컨퍼런스들에 강연자, 감수자, 워크숍 진행자로 참여했으며, PostGIS, GRASS GIS, SpatiaLite 같은 자유 소프트웨어 프로젝트에 SVG 모듈들을 기여했다.