로그인회원가입장바구니고객센터마이페이지회사소개
kangcom
전체
Home >   >   > 

인터랙티브 웹 콘텐츠 제작 프로젝트

 [HTML5 CSS3 JavaScript로의 코드 여행]
   
지은이 이명희   |   출판사 주식회사 제이펍  |   발행일 2013년 09월 06일
 
클릭하시면 큰 도서이미지를 보실 수 있습니다.
판매가 25,000원22,500원 10%
마일리지 5% 1,250원
발행일 2013-09-06
ISBN 8994506748 |  9788994506746
기타정보 국내서 | 340쪽 | 일반
예상출고일
배송비 무료배송
   
프로그래밍언어
종합지수 1p 1287 위
   
주의사항 더이상 출간되지 않습니다.
 

웹 콘텐츠 프로그래밍을 친절하게 안내하는 코드 위주 실전 입문서!
사람을 끌어들이는 인터랙티브 콘텐츠를 위한 아주 친절한 설명서가 여기 있다. 제목만 봐도 궁금해지는 7개의 프로젝트를 HTML5, CSS3, JavaScript를 이용하여 프로그래밍해 보자!

이 책의 주요 내용
춤추는 꽃 프로젝트: HTML5에서 새롭게 선보이는 캔버스(Canvas) 기술을 설명하고 있습니다. 캔버스에 이미지를 출력하고 애니메이션을 구현하는 방법을 이해하고 학습합니다.
중력 브라우저 프로젝트: Box2dWeb 물리 라이브러리와 다음(daum)의 오픈 API를 캔버스 기술에 접목하여 한동안 회자되었던 ‘google gravity’와 비슷한 콘텐츠를 만들어봅니다.
비디오 크로마키 프로젝트: HTML5에서 비디오를 사용하는 방법을 익혀봅니다. 또한, 비디오를 캔버스와 접목하여 픽셀을 조작하는 방법 또한 익혀봅니다.
우쿨렐레 프로젝트: HTML5에서 오디오를 사용하는 방법을 학습합니다. 또한, 비동기 리소스 로더인 yepnope.js의 사용법을 익히며 왜 비동기적인 리소스 로더가 필요한지 살펴봅니다.
코믹 스타일 프로젝트: CSS3를 사용하여 카툰 스타일의 콘텐츠를 제작합니다. 이때 2D 변형에 대해 이해할 수 있습니다.
팝업북 프로젝트: CSS3에서 사용하는 3D 변형을 이해하고 간단한 팝업북을 제작해 봅니다.
춤추는 꽃, 모바일 프로젝트: 첫 프로젝트에서 만든 PC 기반의 캔버스 콘텐츠를 모바일에 최적화된 콘텐츠로 변경해 봅니다. 이때 모바일에서만 사용할 수 있는 터치 이벤트를 학습하며, 더불어 미디어 쿼리를 통한 다양한 분기 처리를 학습합니다.

유튜브 도서 소개 페이지
http://www.youtube.com/embed/KK0yafsaLE8?feature=player_detailpage
첫 번째 프로젝트 <춤추는 꽃>
1 이론학습
1-1 브라 우저에 이미지를 출력하는 방법 21
1-1-1 HTML의 <img> 요소 사용 21
1-1-2 CSS의 background-image 속성 사용 22
1-1-3 JavaScript의 createElement 메소드 사용 24
1-2 캔버스를 생성하는 방법 25
1-2-1 HTML의 <canvas> 요소 사용 25
1-2-2 JavaScript의 createElement 메소드 사용 26
1-3 캔버스에 이미지를 그리는 방법 27
1-3-1 <canvas> 요소를 HTML에서 생성했을 때, 캔버스의 참조 값 얻기 27
1-3-2 <canvas> 요소를 동적으로 생성했을 때, 캔버스의 참조 값 얻기 28
1-3-3 drawImage 메소드 29
1-4 캔버스에서 이미지를 변환하는 방법 34
1-4-1 컨텍스트 상태 저장 34
1-4-2 변환행렬을 단위행렬로 초기화 37
1-4-3 변환하려는 요소의 중심으로 컨텍스트 이동 39
1-4-4 적용하고 싶은 변환의 실행 43
1-4-5 저장했던 컨텍스트 상태 복구 44
1-5 캔버스에서 애니메이션 루프를 수행하는 방법 47
1-5-1 일반적인 방법: 타이머 사용 47
1-5-2 새로운 방법: requestAnimationFrame 메소드 사용 48
2 실전학습
2-1 HTML5 51
2-2 CSS3 52
2-3 JavaScript 54
2-4 도전과제 65
3 프로젝트정리 66

두 번째 프로젝트 <중력 브라우저>
1 이론학습
1-1 Box2DWeb 물리 엔진의 이해와 활용 69
1-1-1 Box2DWeb 엔진 다운받기 70
1-1-2 Box2DWeb 엔진의 기본 사용환경 구성하기 71
1-1-3 World 생성 73
1-1-4 Box2DWeb 엔진의 핵심 콘셉트 77
1-1-5 간단한 물리 현상 재현하기 80
1-1-6 이벤트 연결하기 85
1-1-7 조인트 86
1-2 오픈 API를 활용하여 검색 정보 활용하는 법 96
1-2-1 Daum으로부터 키 발급하기 96
1-2-2 jQuery.ajax() API로 HTTP 질의 보내기 98
2 실전학습
2-1 HTML5 102
2-2 CSS3 103
2-3 JavaScript 104
2-4 도전과제 111
3 프로젝트정리 112

세 번째 프로젝트 <비디오 크로마키>
1 이론학습
1-1 비디오를 생성하고 재생하는 방법 117
1-1-1 HTML의 <video> 요소 사용 117
1-1-2 JavaScript의 createElement 메소드 사용 120
1-1-3 비디오의 로딩에 따른 이벤트 121
1-1-4 비디오의 재생 123
1-1-5 HTML5에서 지원하는 비디오 포맷 126
1-1-6 비디오 타입 체크 130
1-2 비디오 인코딩하기 131
1-2-1 Miro Video Converter 다운받기 131
1-2-2 동영상 파일 끌어다 놓기 132
1-2-3 컨버팅하기 133
1-3 캔버스에 비디오 그리기 135
1-4 캔버스의 픽셀을 조작하는 방법 137
2 실전학습
2-1 HTML5 144
2-2 CSS3 145
2-3 JavaScript 146
2-4 도전과제 151
3 프로젝트정리 152

네 번째 프로젝트 <우쿨렐레>
1 이론학습
1-1 오디오를 생성하고 재생하는 방법 155
1-1-1 HTML의 <audio> 요소 사용 155
1-1-2 JavaScript의 createElement 메소드 사용 157
1-1-3 오디오 로딩에 따른 이벤트 158
1-1-4 오디오의 재생 161
1-1-5 HTML5에서 지원하는 오디오 포맷 162
1-1-6 오디오 타입 체크 162
1-2 오디오 인코딩하기 164
1-2-1 Miro Video Converter로 오디오 불러오기 164
1-2-2 오디오 컨버팅하기 165
1-3 패스를 생성하는 방법 166
1-3-1 현재 기본 패스 167
1-3-2 moveTo(x, y) 169
1-3-3 lineTo(x, y) 169
1-3-4 quadraticCurveTo(cpx, cpy, x, y) 171
1-3-5 1차 베지어 곡선 172
1-3-6 2차 베지어 곡선 176
1-4 외부 스크립트를 로드하는 방법 181
2 실전학습
2-1 HTML5 185
2-2 CSS3 186
2-3 JavaScript – ukulelePathCreator.js 186
2-4 JavaScript – ukuleleSound.js 188
2-5 JavaScript – ukulelePath.js 197
2-6 도전과제 204
3 프로젝트정리 205

다섯 번째 프로젝트 <코믹 스타일>
1 이론학습
1-1 스프라이트 시트를 CSS로 조작하는 방법 209
1-1-1 CSS background 속성 210
1-1-2 CSS background 속성을 사용한 간단한 예제 211
1-2 CSS3의 2D Transform 214
1-2-1 이동하기 : translate(x, y) 214
1-2-2 회전하기 : rotate(angle) 216
1-2-3 확대/축소하기 : scale(scaleX, scaleY) 217
1-2-4 비스듬히 틀기 : skew(angleX, angleY) 219
1-2-5 행렬변환하기 : matrix(a, b, c, d, e, f) 220
2 실전학습
2-1 HTML5 223
2-2 CSS3 224
2-3 JavaScript 226
2-4 도전과제 235
3 프로젝트정리 236

여섯 번째 프로젝트 <팝업북>
1 이론학습
1-1 3D 이론 241
1-1-1 3차원 공간의 이해 241
1-1-2 perspective 속성 243
1-2 CSS3의 3D Transform 248
1-2-1 이동하기: translate3d(x, y, z) 249
1-2-2 확대/축소하기: scale3d(scaleX, scaleY, scaleZ) 251
1-2-3 회전하기: rotate3d(x, y, z, angle) 253
1-2-4 행렬변환하기: matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p) 256
2 실전학습
2-1 HTML5 262
2-2 CSS3 263
2-3 JavaScript 269
2-4 도전과제 280
3 프로젝트정리 281

일곱 번째 프로젝트 <춤추는 꽃, 모바일 편>
1 이론학습
1-1 브라우저 종류를 확인하는 방법 285
1-2 모바일 브라우저를 위한 디버깅 289
1-2-1 모바일 크롬 브라우저에서 디버깅 사용하기 289
1-2-2 모바일 사파리 브라우저에서 디버깅 사용하기 295
1-2-3 모바일 브라우저의 종류 알아내기 297
1-3 모바일을 위한 터치 이벤트 300
1-3-1 터치에 사용되는 이벤트 타입 300
1-3-2 TouchList 인터페이스와 Touch 인터페이스 303
1-4 미디어 쿼리 308
1-4-1 미디어 타입 308
1-4-2 미디어 쿼리 문법 310
1-4-3 미디어 특징 312
2 실전학습
2-1 HTML5 315
2-2 CSS3 317
2-3 JavaScript 318
2-4 도전과제 321
3 프로젝트정리 322

부록 PC에 웹 서버 구성하기
1 윈도우에 웹 서버 구성하기 325
2 맥에 웹 서버 구성하기 330
이명희
자바 프로그래머로 소프트웨어 개발을 시작했지만, 플래시의 강한 비주얼과 액션스크립트의 용이한 사용성에 반해 플래시 개발자로 영역을 바꾼 후 ㈜유클립과 ㈜게임하이에서 RIA 애플리케이션과 웹 게임을 개발하였다. 플래시 시장이 많이 위축될 때쯤 ㈜팬갈로어의 HTML5 게임 개발팀에 합류하여 현재까지 HTML5 게임 개발을 진행하고 있다.
단국대학교 연극영화과에서 영화를 전공한 후 경인방송, 한국경제신문사 등에서 7년 이상의 시간을 영상 제작에 매진했던 특이한 경력의 소유자이기도 하다. 93년에 처음으로 C 언어를 만나 사랑에 빠졌고, 그해에 아이콘 Drawer, 횡 스크롤 아케이드 게임, VGA 카드를 컨트롤한 한글 처리 라이브러리 등을 개발할 만큼 프로그래밍이라는 매력에 빠졌던 준비된 프로그래머였다. 지금은 HTML5와 관련한 모든 웹 기술에 관심을 두며 자바스크립트와 뒤늦은 연애를 하고 있다.
등록된 서평이 없습니다.
창의적 문제 해결을 위한 파이썬 프로그래밍...
김진일 , 윤장혁
선택된 상품을 찜하실 수 있습니다. 선택된 상품을 바로구매 하실 수 있습니다.
 
전체평균(0)
회원평점   회원서평수 0
이명희 의 최근 저서
 
Human-Computer Interaction
11,760원
(2%↓+0%)
 
영.유아를 위한 영양건강교육
14,550원
(3%↓+0%)
 
창의적 재량활동
6,790원
(3%↓+0%)
 
주식회사 제이펍 출판사의 신간
사물인터넷을 품은 라즈베리 파이
김성우 저
31,500원
(10%↓+5%)
 
임베디드 엔지니어 교과서(제이펍의 로봇 시리즈 15)
와타나베 노보루/정인식 저
23,400원
(10%↓+5%)
 
송쌤의 엔트리 콘텐츠 작품집
송상수 저
16,200원
(10%↓+5%)
 
자기주권 신원증명 구조 분석서
윤대근 저
22,500원
(10%↓+5%)
 
객체지향 사고 프로세스(5판)
맷 와이스펠드/박진수 저
21,600원
(10%↓+5%)
 
이메일주소수집거부