상세정보

HTML5+CSS3와 JQuery 모바일을 이용하여 모바일 웹을 만드는 방법부터 웹앱으로 변환하는 방법, 그리고 폰갭을 이용하여 안드로이드 마켓과 애플 앱스토어에 등록하는 방법까지 친절하게 설명한다. 현재 멀티미디어학과 교수인 저자가 한 학기 강의 분량에 달하는 동영상을 무료로 제공한다.

HTML이나 CSS에 대해 문외한이라도 컴퓨터 한 대만 있으면 누구나 쉽게 하이브리드앱 전문가가 될 수 있다. 특히 아이폰용 앱의 경우, 매킨토시가 없어도 윈도우 PC 환경에서 실습할 수 있는 방법으로 소개하므로 기획자나 디자이너, 학생 등의 일반인도 특별한 장비의 구입 없이 앱 개발자가 되는 데 도전할 수 있다.

모바일웹, 웹앱, 하이브리드앱까지 체계적으로 배운다!
이 책은 HTML5를 통해 웹 기술과 네이티브 기술이 접목되어 HTML5로 손쉽게 네이티브 앱을 만들 수 있는 혁신적인 방법을 제시한다. 이러한 HTML5로 만들 수 있는 모바일웹, 웹앱, 하이브리드앱은 사실 각각 별개의 것이 아니라 모두 긴밀하게 연결되어 있다. 이 책은 그 점에 주목하며 세 가지 방법 모두 배울 수 있도록 쉽고 재미있는 예제와 함께 핵심을 짚어가며 단계적으로 안내해 준다.
이 책은 초보도 따라할 수 있도록 HTML5과 CSS3을 드림위버에서 실습하는 것부터 시작하여, N스크린에 대응하는 미디어쿼리, 화려하고 효과적인 모바일 화면 UI를 제공하는 제이쿼리 모바일(Jquery Mobile)을 자세히 설명한다. 이렇게 만들어진 모바일 웹을 웹앱으로 전환하는 과정, 그리고 모바일 기기의 GPS와 연동하여 지역 정보를 제공하는 지오로케이션(GeoLcation) API를 이용하여 현재 위치와 원하는 위치를 표시할 수 있는 방법을 소개한다.
책은 입문자가 실제 마켓과 앱스토어에 등록할 앱을 만들어가는 과정으로 진행되므로 하나하나 완성하는 성취를 느끼며 재미있게 배울 수 있다.

HTML5, CSS3 개념 잡고 개발 환경 설정! - 실습하는 재미 쏠쏠~
대부분의 책들이 바로 모바일 개발로 시작하는 반면 이 책은 자신의 PC에 필요한 HTML 편집기와 에뮬레이터 설치 및 이용 방법, 테스트를 위한 웹서버를 구축할 수 있도록 설명하고 있어서 실제 개발자가 된 것처럼 아이폰 화면과 안드로이드 화면 에뮬레이터로 결과를 확인하며 재미있게 실습할 수 있다.

실제 개발 방법을 이용한 미디어쿼리와 Jquery 모바일 소개
모바일 개발은 다양한 화면을 지원하도록 개발되어야 한다. 그러기 위해선 미디어쿼리가 필수! 미디어쿼리와 다양한 환경을 지원하는 어도브 디바이스 센트럴을 이용하여 PC에서 테스트할 수 있도록 했다. 이 방법은 기존의 웹과는 다른 개발 방법이며 실제 모바일 웹을 개발하는 방법이다. 모바일 웹 개발에서는 하나의 툴만 사용하지 않으며 다양한 툴을 복합적으로 사용하기 때문이다. 이 책에서도 실제 개발자들이 사용하는 방법을 그대로 설명한다.

마켓과 앱스토어에 등록된 앱을 프로젝트 실습 과정으로 소개한다.
이 책의 가장 큰 특징 중 하나는 실제로 저자가 앱을 만들고 앱스토어에 등록한 앱을 만드는 방법을 소개한 것이다. 앱의 기획부터 코딩까지 낱낱이 설명한다. 프로젝트를 진행하면서 자바스크립트, 동영상 플레이, 이미지 갤러리, 모바일 신문 스타일의 이미지 효과, 구글 지도 적용을 차례로 배울 수 있다. 특히 자바스크립트와 모바일 구글 지도 적용은 어렵게 여겨지던 개념을 도식화하여 쉽게 이해할 수 있도록 구성했다.
특히 많은 사람들이 어려워하는 애플 개발자 등록과 실제 앱을 등록하는 과정은 한권의 책으로 만들어도 손색이 없을 정도로 자세하며 저자의 노하우가 담겨져 있는 부분이다.

책 전체 내용을 무료 제공! 저자의 동영상 강의로 다시 한 번 더 익힌다.
저자는 현직 대학교수이며 안산대학교 교수학습지원 센터장을 역임하면서 익힌 다양한 교수법을 책에 쏟아 부었다. 책만 봐도 충분하겠지만 더 편하게 공부하고 싶다면 동영상을 들으며 책을 보는 것도 좋은 방법이다. EBS 방송을 통해 활동했던 저자의 매끄러운 동영상은 더욱 쉽게 책의 내용을 이해할 수 있도록 도와준다.
저자 직강 동영상을 볼 수 있는 곳 HMAPS.net (HTML5 Mobile App Study) : http://www.hmaps.net

정보제공 :

목차
첫째마당 : 모바일을 위한 HTML5와 CSS3 기본기 익히기
 01 웹 표준, 모바일 환경의 이해 = 14
  01-1 웹 표준의 기본 지식 = 15
  01-2 '웹앱', '네이티브앱', '하이브리드앱' = 26
 02 작업환경 준비하기 = 36
  02-1 개발 툴 준비하기 = 37
  02-2 브라우저／에뮬레이터／웹서버 준비하기 = 42
  02-3 Hello World 예제 만들어 보기 = 56
 03 HTML5 시맨틱 마크업 이론 익히기 = 66
  03-1 시맨틱 마크업 개념 알아보기 = 67
  03-2 기본적인 HTML5 마크업 사용법 설명 = 71
  03-3 W3C HTML 웹 표준 인증받기 = 91
 04 CSS3 기본 기능 익히기 = 108
  04-1 레이아웃 작업 순서 = 109
  04-2 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트 사용법 = 112
  04-3 상속의 개념 사용법 = 128
 05 CSS3 고급 기능 익히기 = 138
  05-1 선택자를 잘 알아야 하는 이유 = 139
  05-2 태그 선택자(tag selector) = 141
  05-3 클래스 선택자(class selector) = 146
  05-4 아이디 선택자(ID Selector) = 151
  05-5 하위 선택자(Descendant Selector) = 155
  05-6 그룹 선택자(Grouping Selector) = 164
  05-7 전체 선택자(Universal Selector) = 167
  05-8 하이퍼링크 사용법 : 앵커 유사 클래스 선택자 = 173
 06 CSS3 좌표계 사용법 익히기 = 182
  06-1 레이아웃 위치 개념 알아보기 = 183
  06-2 컨테이너 안에서 자유롭게 위치 잡기 = 188
  06-3 CSS3 단위 이해하기 = 195
  06-4 BOX(상자) 모델을 이용한 위치잡기 = 198
 07 CSS3 레이아웃 사용법 익히기 = 204
  07-1 float 사용법 = 205
  07-2 clear 사용법 = 209
  07-3 여러 개의 열 레이아웃 만들기 = 218
둘째마당 : 미디어쿼리와 제이쿼리 모바일로 모바일 UI 디자인하기
 08 미디어쿼리로 N스크린 스타일 준비하기 = 228
  08-1 원하는 글꼴을 마음껏! 웹폰트 사용하기 = 229
  08-2 미디어쿼리로 디바이스 맞춤형 스타일 준비하기 = 236
  08-3 실전에 미디어쿼리를 응용하기 = 246
 09 스마트폰 UI 기법 익히기 = 268
  09-1 모바일 UI 프레임워크 = 269
  09-2 JQuery Mobile을 배워보자 = 275
  09-3 JQuery Mobile로 스마트폰 UI를 시작하자 = 281
  09-4 화면 구성을 위한 UI 작성하기 = 287
 10 스마트폰 페이지 전환 효과 익히기 = 298
  10-1 목록 만들기 = 299
  10-2 다양한 페이지 링크 연결 = 302
셋째마당 : 실전! 직접 만드는 모바일웹 프로젝트
 11 아이콘 메뉴 페이지 만들기 응용 = 322
  11-1 웹앱 프로젝트 기획 = 323
  11-2 메인 페이지 만들기 = 327
 12 내비게이션 메뉴 만들기 응용 = 340
  12-1 툴바 기본 사용법 익히기 = 341
  12-2 PhotoSwipe 사용법 익히기 = 349
  12-3 캠퍼스 이미지 페이지 만들기 = 357
 13 자바스크립트 기초 익히기 = 368
  13-1 HTML5 시대에 떠오르는 언어 자바스크립트 = 369
  13-2 자바 스크립트 언어로 프로그래밍 기초 배우기 = 374
  13-3 JQuery로 최신 스타일 자바스크립트 기초 배우기 = 389
 14 이미지 전환 효과 만들기 = 400
  14-1 CSS3 트랜지션으로 애니메이션 효과 만들기 = 401
  14-2 대학교 소개 페이지 만들기 = 407
  14-3 자바스크립트 JQuery로 터치 기능의 생명 불어넣기 = 412
 15 동영상 연결하기 = 424
  15-1 HTML5로 동영상 연결하기 = 425
  15-2 VideoJS를 이용하여 세련된 동영상 플레이어 만들기 = 431
 16 지도에 내 위치 표시하기 = 444
  16-1 구글 맵을 표시하기 = 445
  16-2 현재 내 위치를 찾아보기 = 459
  16-3 캠퍼스 맵 완성해 보기 = 469
넷째마당 : 웹앱＆하이브리드앱 만들기
 17 무료 FTP 서버 등록 및 배포하기 = 482
  17-1 무료 FTP 서버에 배포하기 = 483
  17-2 네이티브앱 같은 웹앱 만들기 = 491
 18 폰갭을 사용하여 하이브리드앱 만들기 = 504
  18-1 폰갭으로 하이브리드앱을 안드로이드폰에서 실행하기 = 505
  18-2 폰갭으로 하이브리드앱을 아이폰에서 실행하기 = 520
  18-3 iOS 개발자 등록하기 = 532
  18-4 iOS 개발자와 배포자 인증받기 = 547
  18-5 개발용 아이폰 디바이스 등록, 애플리케이션 ID 등록, 개발자 프로비저닝 준비 = 558
  18-6 개발자 아이폰 디바이스에서 실행하기 = 564
 19 애플 앱스토어와 구글 마켓에 올리기 = 570
  19-01 안드로이드 마켓에 올리기 = 571
  19-02 애플 앱스토어에 올리기 = 586
부록 : 안드로이드폰 에뮬레이터 설치하기 = 614