프로 HTML5 프로그래밍

01장 HTML5의 개요

지금까지의 이야기-HTML5의 역사
2022년 신화와 그것이 중요하지 않은 이유
누가 HTML5를 개발하는가?
새로운 비전
- 호환성과 소길 내기
- 유용성과 사용자 우선 주의
- 상호 호환성과 단순화
- 보편적인 접근성
플러그인이 필요없는 패러다임
- 무엇이 추가되고 무엇이 없어졌나?
HTML5의 새로운 특징
- 새로운 DOCTYPE과 문자셋
- 새로운 요소와 비권장 요소
- 의미 있는 마크업
- 선택자 API로 간단히 선택하기
- 자바스크립트 로깅과 디버깅
- window.JSON
- DOM 레벨 3
- 빠른 자바스크립트 엔진들
정리


02장 HTML5 캔버스 API 사용하기

HTML5 캔버스 개요
- 역사
- 캔버스란?
- 캔버스 좌표
- 캔버스를 사용해서는 안 되는 경우
- 대체 콘텐츠
- CSS와 캔버스
- HTML5 캔버스를 지원하는 브라우저
HTML5 캔버스 API 사용하기
- 브라우저 지원 여부 확인
- 페이지에 캔버스 추가하기
- 그림 변환하기
- 패스 다루기
- 선 스타일 사용하기
- 면 스타일 다루기
- 사각형 콘텐츠 채우기
- 곡선 그리기
- 캔버스에 이미지 넣기
- 그라디언트 사용하기
- 배경 패턴 사용하기
- 캔버스 객체 크기 조절하기
- 캔버스 변형 이용하기
- 캔버스 텍스트 사용하기
- 그림자 적용
- 픽셀 데이터 다루기
- 캔버스 보안 구현하기
HTML5 캔버스 애플리케이션 만들기
- 기타 예제: 전체 페이지를 덮는 유리 패널
정리


03장 HTML5 오디오와 비디오

HTML5 오디오와 비디오 개요
- 비디오 컨테이너
- 오디오 및 비디오 코덱
- 오디오 및 비디오의 제한사항
- HTML5 오디오와 비디오를 지원하는 브라우저
HTML5 오디오 및 비디오 API 사용하기
- 브라우저 지원 여부 확인하기
- 미디어 요소 이해하기
- 오디오 사용하기
- 비디오 다루기
- 기타 예제
정리


04장 HTML5 지오로케이션 API 사용하기

위치 정보란?
- 위도, 경도 좌표
- 위치 정보의 근원
- IP 주소 기반 지오로케이션 데이터
- 위성 위치 확인 시스템의 지오로케이션 데이터
- Wi-Fi 기반 지오로케이션 데이터
- 휴대전화 지오로케이션 데이터
- 사용자 정의 지오로케이션 데이터
HTML5 지오로케이션을 지원하는 브라우저
개인 정보
- 개인 정보 보호 메커니즘
- 위치 정보 사용하기
HTML5 지오로케이션 API 사용하기
- 브라우저 지원 여부 확인하기
- 위치 요청
HTML5 지오로케이션을 이용한 실시간 애플리케이션 제작
- HTML 화면 작업
- 지오로케이션 데이터 처리
- 최종 코드
기타 예제
- 내 위치는 어디일까?
- 구글 맵에서 내 위치 보기
요약


05장 커뮤니케이션 API 사용하기

다른 도메인 문서 간 메시징
- 도메인 보안의 이해
- 다른 도메인 간의 문서 메시징을 위한 브라우저 지원
- postMessage API 사용하기
- postMessage API로 애플리케이션 만들기
XMLHttpRequest 레벨 2
- 다른 도메인 간 XMLHttpRequest
- 단계적 응답 이벤트
- HTML5 XMLHttpRequest 레벨 2를 지원하는 브라우저
- XMLHttpRequest API 사용하기
- XMLHttpRequest로 애플리케이션 만들기
기타 예제
- 구조적 데이터
- 프레임버스팅
정리


06장 HTML5 웹소켓 API

HTML5 웹소켓 개요
- 실시간과 HTTP
- HTML5소켓의 이해
HTML5 웹소켓의 브라우저 지원
간단한 에코 웹소켓 서버 만들기
HTML5 웹소켓 API
- 브라우저 지원 여부 확인
- 기본 API사용법
HTML5 웹소켓으로 애플리케이션 만들기
- HTML파일 작성
- 웹소켓 코드 추가
- 지오로케이션코드 추가
- 총정리
최종 코드
정리


07장 HTML5 폼 API

HTML5 폼의 개요
- HTML Forms vs. XForms
- 기능적인 폼
- HTML5 폼의 브라우저 지원
- Input 목록
HTML5 Form API의 활용
- 새로운 폼 속성과 기능
- 폼 유효성 검사
- 유효성 피드백
HTML5 Form을 이용한 애플리케이션 구축
- 기타 예제
정리


08장 HTML5 웹워커 API

HTML5 Web Workers의 브라우저 지원
HTML5 웹워커API의 사용
- 브라우저 지원 여부 검사
- HTML5 Web Workers 생성
- 추가 자바스크립트의 로딩과 실행
- HTML5 Web Workers와의 통신
메인 페이지 코드
- HTML5 Web Worker중지
- 타이머 사용
- 예제 코드
HTML5 웹워커를 이용한 애플리케이션 구축
- blur.js 도우미 스크립트
- blur.html 애플리케이션 페이지
- blurWorker.js Web Worker 스크립트
- 웹워커와의 통신
- 애플리케이션 실행
- 예제 코드
정리


09장 HTML5 웹스토리지 API

HTML5 웹스토리지의 개요
HTML5 웹스토리지의 브라우저 지원
HTML5 웹스토리지 API 사용
- 브라우저 지원 여부 확인
- 값 설정과 조회
- 데이터 누출 방지
- 로컬 스토리지와 세션 스토리지
- 기타 웹스토리지 API속성과 함수
- 웹스토리지 업데이트
- 웹스토리지 살펴보기
HTML5 웹스토리지를 이용한 애플리케이션 만들기
브라우저 데이터베이스 스토리지의 미래
- JSON 객체 스토리지
- 윈도우 간의 공유
정리


10장 HTML5 오프라인 웹 애플리케이션 만들기

HTML5 오프라인 웹 애플리케이션의 개요
- HTML5 오프라인 웹 애플리케이션의 브라우저 지원
HTML5 오프라인 웹 애플리케이션 API의 사용.
- 브라우저 지원 여부 검사
- 간단한 오프라인 애플리케이션 만들기
- 오프라인 이벤트
- 매니페스트 파일
- applicationCache API
HTML5 오프라인 웹 애플리케이션으로 애플리케이션 만들기
- 애플리케이션 리소스를 위한 매니페스트 파일 만들기
- UI를 위한 HTML 구조와 CSS 만들기
- 오프라인 자바스크립트 만들기
- ApplicationCache 지원 여부 확인
- 업데이트 버튼 핸들러 추가
- 지오로케이션 추적 코드 추가
- 스토리지 코드 추가
- 오프라인 이벤트 핸들러 추가
정리


11장 HTML5의 미래

HTML5의 브라우저 지원
HTML의 발전
WebGL
- 기기
- 오디오 데이터 API
- 비디오의 발전
- 터치스크린 기기 이벤트
- P2P 네트워크
- 최종 목표
정리

HTML5는 새로운 것이다. 실제로 아직 완성되지도 않았다. 고집 센 전문가 중에는 HTML5이 완성되려면 십 년도 넘게 걸릴 거라 말하는 분도 있다.

그렇다면 왜 다들 지금이 『프로 HTML5 프로그래밍』이라는 책이 필요한 시점이라고 할까? 대답은 간단하다. 누구든지 더 나은 웹 애플리케이션을 원하고 지금이 바로 HTML5의 시대이기 때문이다. 이 책의 저자들은 2년 넘게 HTML5 기술을 개발하고 가르치는 일을 하고 있으며, 새로운 표준이 하루 빨리 채택될 것으로 확신하고 있다. 이 책을 쓰는 도중에도 우리는 HTML5의 기능들을 지원하는 브라우저 현황을 꾸준히 업데이트하고 사용할 시점이 되었는지 재검토하고 있다.

대부분의 사용자들은 현재 사용 중인 브라우저의 역량을 정확하게 알지 못한다. 맞는 말이다. 자주 사용하는 브라우저가 자동으로 업데이트되면 소소한 인터페이스의 변화만 눈에 보일 것이다. 하지만 자유롭게 그림을 그릴 수 있는 캔버스, 실시간 네트워크 통신 외에도 수많은 잠재적인 업그레이드로 무장한 새 버전의 브라우저에 대해서는 전혀 모를 것이다.

이 책이 강력한 HTML5의 위력을 만끽하는 데 도움되길 바란다.

■ 대상 독자

이 책은 자바스크립트 프로그래밍에 익숙한 숙련된 웹 애플리케이션 개발자를 대상으로 한다. 다시 말해서, 기초적인 웹 개발과 관련된 내용은 다루지 않는다. 웹 개발의 기초를 어느 정도의 수준으로 끌어올리는 끌어올리는 방법은 많다. 아래의 내용 가운데 본인에게 해당되는 내용이 있다면 이 책을 토대로 유용한 통찰력과 찾고 있는 정보에 대해 도움을 받을 수 있을 것이다.

＊ 종종 "나만의 브라우저라면…"이라고 생각한 적이 있다.
＊ 어떤 인상적인 웹사이트를 분석하려고 소스를 보거나 개발 도구를 사용한 적이 있다.
＊ 최신 브라우저 업데이트의 릴리스 노트를 보고 뭐가 새로워졌는지 확인하길 좋아한다.
＊ 애플리케이션을 최적화하거나 유연하게 만드는 방법을 찾고 있다.
＊ 비교적 최신 브라우저에서 사용자에게 가장 좋은 경험을 제공하기 위해 웹 사이트를 직접 개발하고 있다.

이 중 한 가지라도 여러분에게 해당한다면 이 책이 여러분의 관심사와 잘 맞을 것이다.

적절한 선에서 지원하는 브라우저를 제한하는 데 고심했지만 HTML5 애플리케이션을 십 년 전 브라우저에서도 똑같이 실행할 수 있는 방법을 소개하는 것은 이 책의 목적이 아니다. 경험상 문제를 적당히 해결하는 방법이나 기본 브라우저에 대한 지원은 발 빠르게 발전했지만 이러한 정보를 전달하기에 책은 적절한 수단이 아니다. 대신 이 책에서는 HTML5의 명세와 사용법에 주목했다. 세세한 문제 해결 방법은 인터넷에서 찾을 수 있겠지만 그러한 정보는 점점 필요가 없어질 것이다.

■ 이 책에서 다루는 내용

이 책은 열한 개의 장으로 구성돼 있으며, 널리 사용되고 유용하며 강력한 HTML5 API를 선별해서 다룬다. 경우에 따라 더 멋진 데모를 소개하기 위해 앞 장에서 다룬 기능들을 사용했다.

1장, 'HTML5 소개'는 HTML 명세서의 현재 버전과 역사적인 배경을 설명하는 것으로 시작한다. 최근의 HTML5의 발전을 뒷받침하는 기본적인 변화와 원칙을 비롯해 고수준의 시맨틱 태그들을 소개한다. 이는 HTML5에 입문할 때 알아두면 좋을 법한 내용이다.

2장, 'HTML5 캔버스 API 사용하기'와 3장, 'HTML5 오디오/비디오 사용하기'에서는 새로운 시각적인 요소와 미디어 요소를 다룬다. 이 장에서는 플러그인이나 서버 통신 없이도 사용자 인터페이스를 빠르게 개발할 수 있는 더 단순한 방법을 찾는 데 초점을 둔다.

4장, 'HTML5 지오로케이션 API 사용하기'에서는 기존의 웹 애플리케이션에서 구현하기 어려웠던 기능을 가능케 하는 진정한 새로운 기능을 소개한다. 바로 애플리케이션에서 사용자의 현재 위치를 식별하고 이러한 위치 정보들을 개인화하는 데 사용하는 기능이다. 아울러 중요하게 대두된 개인 정보와 주의 사항에 대해서도 설명한다.

이어지는 장에서는 '커뮤니케이션 API 사용하기'와 'HTML5 웹소켓 API 사용하기'를 소개한다. 여기서는 HTML5를 이용해 다른 웹 사이트와 통신하거나 최소한의 비용으로 간단하게 애플리케이션으로 실시간 데이터를 전송하는 방법을 설명한다. 이 장에서 다루는 기술들은 지나치게 복잡한 현재의 웹 구조를 단순하게 만들 수 있다.

7장, 'HTML5 폼 API 사용하기'에서는 최소한의 수정으로 데스크톱 또는 모바일 웹 애플리케이션의 사용성을 높이는 방법뿐 아니라 근본적인 변화로 아주 일반적인 사용 시나리오상에서 오류를 발견하는 방법을 소개한다.

8장, 'HTML5 웹워커 API 사용하기'와 9장, 'HTML5 스토리지 API 사용하기', 10장, 'HTML5 오프라인 웹 애플리케이션 개발하기'에서는 애플리케이션 간의 내부적인 연결을 다룬다. 여기서는 더 나은 성능과 데이터 관리가 가능하도록 기존 기능들을 최적화하는 방법을 확인할 수 있다.

마지막으로 11장, 'HTML5의 미래'에서는 조만간 보게 될 흥미로운 기능들을 소개한다.

■ 예제 소스와 웹 사이트 활용

이 책에서 소개된 예제 소스는 Apress 웹 사이트의 소스 코드 영역에서 확인할 수 있다. 이 책의 소스 코드는 www.apress.com에서 source code를 클릭한 뒤 이 책의 제목을 검색한 후 내려 받을 수 있다. 아울러 이 책의 웹 사이트를 www.prohtml5.com에서 확인할 수 있다. 이곳에서 소스 코드와 기타 예제 소스를 내려 받을 수 있다.

아래 위키북스 홈페이지에서도 소스 코드를 내려 받을 수 있다.

www.wikibook.co.kr
- 서문 중에서