• 컴퓨터/IT > 홈페이지/웹디자인
• 컴퓨터/IT > 프로그래밍 > 웹프로그래밍

• [시리즈] 위키북스 오픈소스 & 웹 시리즈 [79]

출판사 리뷰

출판사 서평 그동안 웹은 PC를 지나 스마트폰으로, 또 스마트폰에서 TV로 태블릿 기기로, 나아가 우리가 알지 못하는 수많은 기기로 점차 자리를 옮겨가면서 진화를 거듭하고 있다. 이러한 웹의 진화를 따라잡고자 나온 HTML5이 세상에 알려진 지도 어느새 몇 년이 훌쩍 흘렀다. 그러나 HTML5를 사용한 애플리케이션이 속속 앞다투어 출시되고 그에 따라 개발자들이 HTML5의 새로운 기술들을 사용하려고 고민하지만 실제로 아직까지는 많은 시행착오를 겪어야 하는 것이 사실이다. 『프로 HTML5 프로그래밍』은 HTML5의 기능들을 사용하고 응용하... 그동안 웹은 PC를 지나 스마트폰으로, 또 스마트폰에서 TV로 태블릿 기기로, 나아가 우리가 알지 못하는 수많은 기기로 점차 자리를 옮겨가면서 진화를 거듭하고 있다. 이러한 웹의 진화를 따라잡고자 나온 HTML5이 세상에 알려진 지도 어느새 몇 년이 훌쩍 흘렀다. 그러나 HTML5를 사용한 애플리케이션이 속속 앞다투어 출시되고 그에 따라 개발자들이 HTML5의 새로운 기술들을 사용하려고 고민하지만 실제로 아직까지는 많은 시행착오를 겪어야 하는 것이 사실이다. 『프로 HTML5 프로그래밍』은 HTML5의 기능들을 사용하고 응용하고 그것들을 하나로 묶어서 제대로 된 웹 애플리케이션을 만드는 일련의 과정을 보여준다. 아울러 그 과정에서 개발자가 겪을 수 있는 시행착오까지 꼼꼼히 설명해준다. 이 책의 소스를 살펴보고 분석하고 예제 웹 애플리케이션을 만들어가다 보면 어느새 HTML5를 능숙하게 다루는 자신을 볼 수 있을 것이다. 이제 HTML5가 등장했고, 웹 애플리케이션에는 전에 없던 강력함과 확장성, 반응성을 보여줄 수 있게 되었습니다. 여러분은 이 책에서 이러한 강력한 능력들을 꺼내어 최첨단 HTML5 기술들을 접목해서 새롭게 등장한 브라우저들의 모든 기능을 이끌어낼 수 있는 최신 웹 애플리케이션을 만드는 법을 배우게 될 것입니다. 이 책에서는 새로운 HTML5 API를 설명합니다. HTML5의 특징들을 실용적이고도 현실적인 예제로 보여주고, 어느 브라우저에서 어떤 기능들을 지원하고 있는가를 보여줍니다. HTML5의 특징을 빠르게 익힐 수 있게끔 이 책에서는 가장 유용하고 강력한 HTML5 API들을 주로 다룹니다. 아울러 지오로케이션이나 웹스토리지, 웹소켓, 웹워커, 캔버스, 오디오, 비디오 같은 HTML5 요소들을 사용해 웹 애플리케이션을 만드는 방법도 배우게 될 것입니다. 그리고 이 같은 요소들을 조합해서 다른 표준 웹 기술과 문제없이 어우러지도록 만드는 방법도 익히게 될 것입니다. HTML5를 사용하면 많은 양의 스크립트나 비표준 플러그인을 사용해야 했던 복잡한 기능들을 마크업 몇 줄로 해결할 수 있습니다. 자주 쓰는 편집기를 실행하고 HTML5를 지원하는 여러 브라우저 가운데 하나를 선택한 뒤 새로운 커뮤니케이션이나 상호작용에 필요한 기능을 직접 손으로 만들어서 HTML5 프로그램에 추가해볼 수 있을 것입니다. 우리는 최근에 생겨난 이러한 표준 기능을 웹 전문가인 여러분들과 공유하고 싶은 마음에 이 책을 썼습니다. 우리는 HTML5 기술을 2년이 넘게 가르쳐왔고 실제로 개발하고 작업하는 데도 사용하고 있습니다. 그리고 이 새로운 표준 기술은 엄청난 속도로 퍼지리라 장담합니다. 이 책을 보고 나서 여러분이 HTML5 API를 좀더 창의적인 방향으로 사용하고, 나아가 웹에서 여러분들의 코드를 볼 수 있기를 희망합니다.

목차
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 네트워크
- 최종 목표
정리