책 소개
HTML5의 대표적인 특징인 비디오, 오디오 등의 멀티미디어 컨텐츠 작성 방법과 각종 지원 기기의 사용자를 위한 접근성 제고 전략, 리치 미디어 애플리케이션을 만들기 위한 캔버스 API와 현대 브라우저에 직접 데이터를 저장하고, 이를 활용할 수 있게 해주는 데이터 스토리지 API의 실용 예제를 함께 만들어 가는 방식으로 구성됐다. HTML5 코딩이 처음인 기획자, 디자이너를 위해 전반부는 핵심 태그 요소를 이용한 간단한 문서 만들기로 시작하며, 이미 마크업 언어에 익숙한 UI디자이너와 개발자를 위해 중후반부는 스크립트를 활용한 API 사용 전략을 소개한다.
[ 소개 ]
HTML5의 비디오, 오디오, 3D, 애니메이션, 캔버스, SVG를 바로 구현
경험이 풍부한 웹 전문가와 이제 막 웹 분야에 뛰어든 새내기 개발자, 디자이너 모두가 원하는 HTML5를 활용한 시맨틱 웹 사이트와 애플리케이션을 만들기 위한 실무 예제로 구성
[ 이 책에서 다루는 내용 ]
■ 데이터 스토리지와 캐시 매니페스트 파일을 이용한 오프라인 웹사이트 개발
■ 지오로케이션 API와 geo.js를 활용한 위치 기반 서비스 개발
■ 접근성을 고려한 비디오, 오디오 소스의 제작과 스마트폰 등 모바일 기기용 미디어 콘텐츠 개발
■ HTML5의 기능 향상을 위한 자바스크립트 활용법, 제이쿼리 라이브러리로 이동 가능한 비디오 배너 구현
■ 캔버스 요소를 활용한 이미지 조절과 애니메이션 제작
■ 캔버스 요소를 활용한 리치 미디어 애플리케이션 개발
■ 캔버스 환경 설정 방법과 데이터 연동을 통한 도형 표현, 사용자와 상호작용하는 시각 효과 구현
■ HTML5와 CSS3를 활용한 인터랙티브 입력 요소 만들기
■ 브라우저 지원 검사로 접근성을 높이는 방법과 HTML5를 지원하지 않는 브라우저 사용자를 위한 대체 사이트나 콘텐츠 제공 방법
[ 이 책의 대상 독자 ]
HTML5는 취업이나 이직을 고려할 때 개발자가 최근 들어 가장 많이 검색하는 단어다. 이 책의 독자가 현재 구직 중이거나 몸담은 직장에서 다음 단계의 도약을 모색하는 경우라면 이 새로운 기술은 여러분을 더욱 돋보이게 만들어줄 것이다.
[ 이 책의 구성 ]
1장, ‘리치 미디어 애플리케이션 구조’에서는 HTML5를 지원하는 웹 브라우저를 살펴보고, HTML5의 새로운 요소(element)를 성공적으로 활용하기 위한 준비를 한다.
2장, ‘콘텐츠 구성’에서는 개발자가 다양한 웹 콘텐츠를 담기 위한 컨테이너 요소를 만드는 방법을 소개한다.
3장, ‘CSS로 스타일 작성’에서는 HTML5를 지원하기 위한 CSS3의 사용 방법을 소개하고, 그렇게 만들어진 웹 문서가 현대 웹 브라우저와 이전 세대 브라우저에서는 어떻게 보이는지 확인한다.
4장, ‘사용자 접근성 추가’에서는 미국의 접근성 관련 법규인 제508조에 관한 내용 대신 수준 높은 웹 사용성을 제공하기 위해 최근에 소개된 관련 기술을 소개한다.
5장, ‘HTML5 폼 요소 100% 활용’에서는 새로 소개된 HTML5의 입력 형식을 살펴보고, 웹 브라우저별로 각 폼 요소의 지원 여부를 알아본다.
6장, ‘캔버스로 리치 미디어 애플리케이션 개발’은 이 책의 내용 중 가장 진보된 관점으로 쓰인 장으로, 새로운 형식의 사용자 소통 방법을 개발하기 위한 방법에 중점을 두고, 캔버스와 관련된 웹 브라우저 지원에 대한 놀라운 통계 자료도 소개한다.
7장, ‘자바스크립트로 만드는 상호작용성’에서는 HTML5의 새로운 기능인 오디오와 비디오 요소까지 학습 영역을 확장해 살펴보고, 이 기능을 직접 활용해 볼 기회도 제공한다.
8장, ‘웹 페이지에 오디오와 비디오 적용’에서는 HTML의 오디오와 비디오에 대한 핵심 내용을 깊이 있게 분석하고, 웹 접근성을 지원하는 자신만의 미디어 플레이어를 만든다.
9장, ‘데이터 스토리지’에서는 JSON, SQL, 지오로케이션 등을 포함한 HTML5만의 특성을 세부적으로 살펴본다.
[ 추천의 글 ]
내가 아는 (지금은 전설처럼 전해지는) 어떤 대학은 풀 한 포기 없이 도로 포장도 하지 않은 채로 개교했다. 이후 캠퍼스 설계자는 학생들이 수업을 듣기 위해 교정을 가로지르는 모습을 관찰하고서 모두가 즐겨 다니는 길을 지도 위에 표시하고, 그 길을 따라 풀과 나무를 심고, 도로를 포장했다고 한다.
HTML5 역시 위 이야기와 비슷한 느낌을 준다. 바로 사람들의 관습에 기초한 도구라는 점이다. 웹 마크업 언어의 특별한 업데이트 버전인 HTML5의 여러 규정들은 웹 문서의 구조를 만들기 위해 사용해오던 여러 관습을 한데 묶어 권장 사항으로 공식화한 것이다.
데일 크루즈의 『HTML5 Multimedia Development Cookbook 한국어판』은 많은 사람이 새로운 웹의 규정을 받아들이는 시기에 나온 시의적절한 책이다. 브라우저 제작사들 역시 놀라운 속도로 HTML5의 구성 요소를 웹 브라우저에 표현할 수 있게 노력 중이다.
하지만 데일의 책에서 진정한 핵심 요소는 HTML5에 대한 모든 측면을 다뤘다는 점이다. 이 책의 각 페이지는 HTML5 웹사이트를 만들기 위한 성공적이고 실용적인 방법으로 가득 차 있다. 전반적으로 각 장은 웹 폼, 비디오, 오디오를 다뤘고, CSS3를 활용해 HTML5 문서에 스타일을 적용하는 방법과 (저시력자와 장애가 있는 사람들을 위한) 지원 기술을 이용해 HTML5 콘텐츠에 접근성을 부여하는 방법도 소개한다. 각 장은 실제 웹사이트를 독자가 실습하기 쉽게 세심하게 재단해 놓은 훌륭한 사례 또한 포함했다.
데일은 웹 표준과 진보적인 사고, 마크업 언어의 전문가다. 데일은 예전에 내 프로젝트에서 함께 일할 당시에도 지금처럼 자신이 할 일을 명확히 알고 있었다(이 책에 대한 평가가 ‘놀랍다, 보통이다’이든, ‘혁신적이다, 실용적이다’이든 상관없다). 데일 크루즈의 『HTML5 Multimedia Development Cookbook 한국어판』은 독자로 하여금 놀라운 HTML5 웹사이트를 준비하고 만들어낼 수 있게 도와줄 것이다.
- 캐머론 몰(Cameron Moll)
AuthenticJobs.com의 창업자
『Mobile Web Design』의 저자
『CSS 마스터 전략』의 공동저자
[ 소개 ]
HTML5의 비디오, 오디오, 3D, 애니메이션, 캔버스, SVG를 바로 구현
경험이 풍부한 웹 전문가와 이제 막 웹 분야에 뛰어든 새내기 개발자, 디자이너 모두가 원하는 HTML5를 활용한 시맨틱 웹 사이트와 애플리케이션을 만들기 위한 실무 예제로 구성
[ 이 책에서 다루는 내용 ]
■ 데이터 스토리지와 캐시 매니페스트 파일을 이용한 오프라인 웹사이트 개발
■ 지오로케이션 API와 geo.js를 활용한 위치 기반 서비스 개발
■ 접근성을 고려한 비디오, 오디오 소스의 제작과 스마트폰 등 모바일 기기용 미디어 콘텐츠 개발
■ HTML5의 기능 향상을 위한 자바스크립트 활용법, 제이쿼리 라이브러리로 이동 가능한 비디오 배너 구현
■ 캔버스 요소를 활용한 이미지 조절과 애니메이션 제작
■ 캔버스 요소를 활용한 리치 미디어 애플리케이션 개발
■ 캔버스 환경 설정 방법과 데이터 연동을 통한 도형 표현, 사용자와 상호작용하는 시각 효과 구현
■ HTML5와 CSS3를 활용한 인터랙티브 입력 요소 만들기
■ 브라우저 지원 검사로 접근성을 높이는 방법과 HTML5를 지원하지 않는 브라우저 사용자를 위한 대체 사이트나 콘텐츠 제공 방법
[ 이 책의 대상 독자 ]
HTML5는 취업이나 이직을 고려할 때 개발자가 최근 들어 가장 많이 검색하는 단어다. 이 책의 독자가 현재 구직 중이거나 몸담은 직장에서 다음 단계의 도약을 모색하는 경우라면 이 새로운 기술은 여러분을 더욱 돋보이게 만들어줄 것이다.
[ 이 책의 구성 ]
1장, ‘리치 미디어 애플리케이션 구조’에서는 HTML5를 지원하는 웹 브라우저를 살펴보고, HTML5의 새로운 요소(element)를 성공적으로 활용하기 위한 준비를 한다.
2장, ‘콘텐츠 구성’에서는 개발자가 다양한 웹 콘텐츠를 담기 위한 컨테이너 요소를 만드는 방법을 소개한다.
3장, ‘CSS로 스타일 작성’에서는 HTML5를 지원하기 위한 CSS3의 사용 방법을 소개하고, 그렇게 만들어진 웹 문서가 현대 웹 브라우저와 이전 세대 브라우저에서는 어떻게 보이는지 확인한다.
4장, ‘사용자 접근성 추가’에서는 미국의 접근성 관련 법규인 제508조에 관한 내용 대신 수준 높은 웹 사용성을 제공하기 위해 최근에 소개된 관련 기술을 소개한다.
5장, ‘HTML5 폼 요소 100% 활용’에서는 새로 소개된 HTML5의 입력 형식을 살펴보고, 웹 브라우저별로 각 폼 요소의 지원 여부를 알아본다.
6장, ‘캔버스로 리치 미디어 애플리케이션 개발’은 이 책의 내용 중 가장 진보된 관점으로 쓰인 장으로, 새로운 형식의 사용자 소통 방법을 개발하기 위한 방법에 중점을 두고, 캔버스와 관련된 웹 브라우저 지원에 대한 놀라운 통계 자료도 소개한다.
7장, ‘자바스크립트로 만드는 상호작용성’에서는 HTML5의 새로운 기능인 오디오와 비디오 요소까지 학습 영역을 확장해 살펴보고, 이 기능을 직접 활용해 볼 기회도 제공한다.
8장, ‘웹 페이지에 오디오와 비디오 적용’에서는 HTML의 오디오와 비디오에 대한 핵심 내용을 깊이 있게 분석하고, 웹 접근성을 지원하는 자신만의 미디어 플레이어를 만든다.
9장, ‘데이터 스토리지’에서는 JSON, SQL, 지오로케이션 등을 포함한 HTML5만의 특성을 세부적으로 살펴본다.
[ 추천의 글 ]
내가 아는 (지금은 전설처럼 전해지는) 어떤 대학은 풀 한 포기 없이 도로 포장도 하지 않은 채로 개교했다. 이후 캠퍼스 설계자는 학생들이 수업을 듣기 위해 교정을 가로지르는 모습을 관찰하고서 모두가 즐겨 다니는 길을 지도 위에 표시하고, 그 길을 따라 풀과 나무를 심고, 도로를 포장했다고 한다.
HTML5 역시 위 이야기와 비슷한 느낌을 준다. 바로 사람들의 관습에 기초한 도구라는 점이다. 웹 마크업 언어의 특별한 업데이트 버전인 HTML5의 여러 규정들은 웹 문서의 구조를 만들기 위해 사용해오던 여러 관습을 한데 묶어 권장 사항으로 공식화한 것이다.
데일 크루즈의 『HTML5 Multimedia Development Cookbook 한국어판』은 많은 사람이 새로운 웹의 규정을 받아들이는 시기에 나온 시의적절한 책이다. 브라우저 제작사들 역시 놀라운 속도로 HTML5의 구성 요소를 웹 브라우저에 표현할 수 있게 노력 중이다.
하지만 데일의 책에서 진정한 핵심 요소는 HTML5에 대한 모든 측면을 다뤘다는 점이다. 이 책의 각 페이지는 HTML5 웹사이트를 만들기 위한 성공적이고 실용적인 방법으로 가득 차 있다. 전반적으로 각 장은 웹 폼, 비디오, 오디오를 다뤘고, CSS3를 활용해 HTML5 문서에 스타일을 적용하는 방법과 (저시력자와 장애가 있는 사람들을 위한) 지원 기술을 이용해 HTML5 콘텐츠에 접근성을 부여하는 방법도 소개한다. 각 장은 실제 웹사이트를 독자가 실습하기 쉽게 세심하게 재단해 놓은 훌륭한 사례 또한 포함했다.
데일은 웹 표준과 진보적인 사고, 마크업 언어의 전문가다. 데일은 예전에 내 프로젝트에서 함께 일할 당시에도 지금처럼 자신이 할 일을 명확히 알고 있었다(이 책에 대한 평가가 ‘놀랍다, 보통이다’이든, ‘혁신적이다, 실용적이다’이든 상관없다). 데일 크루즈의 『HTML5 Multimedia Development Cookbook 한국어판』은 독자로 하여금 놀라운 HTML5 웹사이트를 준비하고 만들어낼 수 있게 도와줄 것이다.
- 캐머론 몰(Cameron Moll)
AuthenticJobs.com의 창업자
『Mobile Web Design』의 저자
『CSS 마스터 전략』의 공동저자
목차
목차
- 1장 리치 미디어 애플리케이션 구조
- 개요
- HTML5 테스트 영역 설정
- 로고와 타이틀을 위한 header 태그의 사용
- nav 태그로 콘텐츠 테이블 작성
- 페이지 영역을 정의하는 section 태그의 사용
- aside 태그로 그래픽 요소 정렬
- aside 태그로 여러 개의 사이드 바 표시
- footer 태그의 적용
- 문서 개요 알고리즘 적용
- HTML5로 멋진 홍보 페이지 만들기
- 2장 콘텐츠 구성
- 개요
- 블로그 기사 구조 만들기
- mark 요소로 텍스트 강조
- time 요소 사용
- 기사의 출간일 표시
- article 요소로 주석 블록 표시
- @font-face로 폰트를 동적으로 추가
- 폰트에 그림자 효과 추가
- 폰트에 그러데이션 적용
- figure와 figcaption으로 시각적인 요소에 주석 달기
- 3장 CSS로 스타일 작성
- 개요
- display:block을 이용한 설정
- nav 블록 요소의 스타일링
- 배경 이미지 조절을 위한 background-size의 사용
- border-radius를 이용한 둥근 모서리 추가
- 다수의 배경 이미지 적용
- 이미지에 box shadow 추가
- IE 브라우저용 스타일 작성
- 4장 사용자 접근성 추가
- 개요
- 브라우저 지원 여부 확인
- 내비게이션 건너뛰기 기능
- 접근성을 위한 메타 태그 추가
- 스크린 리더를 위한 시맨틱 요소 사용
- 대체 사이트 뷰 지원
- 접근성 있는 제목 영역을 만들기 위한 hgroup 사용
- 브라우저 지원이 없는 경우 대체 콘텐츠의 표시
- WAI-ARIA 사용
- 5장 HTML5 폼 요소 100% 활용
- 개요
- 플레이스홀더 텍스트 표시
- 폼 필드에 오토포커스 기능 추가
- HTML5와 CSS3로 폼에 스타일 부여
- 이메일 입력 형식의 사용
- URL 입력 형식으로 URL 추가
- number 태그 사용
- range 태그 사용
- 검색 영역 만들기
- 날짜와 시간을 표시하는 피커 만들기
- 6장 캔버스로 리치 미디어 애플리케이션 개발
- 개요
- canvas 환경 설정
- 2D 렌더링 컨텍스트
- 동적으로 도형 처리
- canvas로 이미지에 외곽선 그리기
- 둥근 모서리
- 상호작용하는 시각 효과
- 통통 튕기는 공
- 대비용 콘텐츠 작성
- 7장 자바스크립트로 만드는 상호작용성
- 개요
- 자바스크립트로 오디오 파일 실행
- 텍스트로 드래그앤드롭 API 사용
- vid.ly와 제이쿼리로 크로스 브라우저 비디오 지원
- 제이쿼리를 활용해 동적으로 비디오 표시
- 제이쿼리로 이동 가능한 비디오 배너 작성
- Easel.js와 canvas 태그를 이용한 이미지 표시 조절
- Easel.js와 canvas 태그를 이용해 이미지 파일로 애니메이션 만들기
- canvas 태그와 자바스크립트로 오디오가 있는 랜덤 애니메이션 만들기
- 8장 웹 페이지에 오디오와 비디오 적용
- 개요
- 플래시는 이제 그만
- 오디오와 비디오 파일 포맷
- 모두를 위해 비디오 표시
- 접근성 높은 오디오와 비디오 만들기
- 멋진 오디오 플레이어 만들기
- 모바일 기기에 오디오와 비디오 삽입
- 9장 데이터 스토리지
- 개요
- 브라우저에서 데이터 스토리지 테스트
- 웹 스토리지 확인을 위한 브라우저 개발 도구의 사용
- 세션 스토리지 변수의 설정과 호출
- 로컬 스토리지 변수의 설정과 호출
- parseInt로 로컬 스토리지의 문자 데이터를 숫자 데이터로 변환
- 웹 SQL 데이터베이스 만들기
- 웹 SQL 데이터베이스 사용
- 오프라인 스토리지를 위한 캐시 매니페스트 파일 만들기