일본아마존 jQuery Mobile 분야 판매 1위를 기록한 바로 그 책!
:: 책 소개
jQuery Mobile은 jQuery 프로젝트의 일환으로 iOS, 안드로이드, 블래베리 등 다양한 스마트폰 OS에 적합한 UI 및 동작을 제공하는
스마트폰용 프레임워크입니다.
이 책은 ‘jQuery Mobile’을 사용한 스마트폰 사이트의 제작방법을 설명한 입문서입니다.
초보 프로그래머는 물론 웹 디자이너들도 모바일 관련 스마트 디자인을 할 수 있도록 기초부터 아주 쉽게 가이드하고 있으며,
1장부터 순서대로 진행하면 jQuery Mobile의 기본적인 사용법부터 고급 수준인 사용자정의 방법까지 습득할 수 있도록 구성되어 있습니다.
:: 본 책의 특징
본문 내용 중간마다 칼럼과 팁 등 다양한 읽을거리를 싣고 있으며,
책 뒤에는 부록으로 가위로 잘라서 제이쿼리 모바일의 실제 UI 장면을 시연을 해볼 수 있도록
휴대폰 모양의 종이 시뮬레이터를 수록하고 있습니다.
또한 홈페이지에서 다운한 예제파일 URL로 접속해보면 실제 책 내용대로 모바일 페이지가 구현되어 있어
배울것을 바로 확인해보고 실습해볼 수 있습니다
이처럼 이론부터 실습까지 한번에 정리되어 있습니다.
:: 저자 소개
Nishihata Kazuma
• to-r(http://www.to-r.net) 대표/주식회사 마보로시(http://www.maboroshi.biz/) 선임 엔지니어.
• JavaScript/Ajax를 이용한 Web 애플리케이션 제작 및 CSS3/HTML5를 이용한 사이트 작성.
• 서적 및 잡지의 집필과 Web 크리에이터를 위한 강좌 및 세미나 활동.
• 블로그 ‘to-R’(http://blog.webcreativepark.net/)에서 Web 제작과 관련된 여러 가지 정보를 게재.
• 저서 ‘Web 제작 현장에서 사용하는 jQuery 디자인 입문’(Ascii Media Works 간행).
Nabesaka Rie
• Photo and Design sonsun(http://sonsun33.com) 대표. Web 디자이너.
• Web 제작회사에서 Web 디자인 및 각종 제작 경험을 쌓은 후 독립.
• Web 사이트의 기획 및 디자인 그리고 제작.
• Webridge Kagawa/CSS Nite in TAKAMATSU 부대표.
• Web 제작자 및 담당자를 위한 세미나 개최.
:: 역자 소개
이규흥 (korlove2003@yahoo.co.kr)
숭실대학교 공과대학 전자공학과를 졸업하고, 일본 와세다대학 대학원 상학연구과 석사과정을 수료했다.
Java 언어를 이용한 디자인 패턴 입문』 『그림으로 배우는 Easy C 언어』 『명쾌한 Java 입문』 등 IT 관련 서적을 다수 번역했다.
:: 목차
1-1. jQuery Mobile이란?
스마트폰 시대의 웹 제작
스마트폰용 프레임워크의 등장
iOS 휴먼 인터페이스 가이드라인
‘jQuery Mobile’
예제 코드로 보는 jQuery Mobile의 간단함
스마트폰 사이트의 제작 및 검증 환경
CHAPTER 2. [기초편] 예제로 배우는 jQuery Mobile 기본
2-1. 스마트폰 사이트 메인 페이지 만들기
jQuery Mobile과 HTML5
jQuery Mobile과 jQuery의 로딩
스마트폰용 Viewport의 설정
jQuery Mobile에서 ‘페이지’ 개념
페이지 전환
header/footer의 배치와 레이아웃 정의
디자인 테마의 변경
스마트폰다운 리스트 표시
2-2. 개별 페이지 작성과 구글맵의 표시
‘about’ 페이지의 작성
header 링크의 설계
‘세미나 정보’ 페이지의 작성
구글맵의 설치
2-3. 문의 폼의 작성과 사이트 완성
‘폼(Form)’ 과제와 jQuery Mobile을 이용한 해결
폼 UI의 기본
여러 줄을 입력하는 박스의 최적화
플립 스위치 표시하기
사용하기 쉬운 체크 박스 추가
전송/취소 버튼 장식
CHAPTER 3. [레퍼런스편] 좀더 알고 싶은 jQuery Mobile 사용법
3-1. 페이지 작성과 페이지 전환
페이지 작성
테마의 변경 [data-theme=“테마 이름”]
페이지 전환 애니메이션의 설정 [data-transition=“효과 이름”]
[실무에서 빠지기 쉬운 함정] 안드로이드 단말기에서 플립 애니메이션이 동작하지 않는다!
3-2. 리스트 표시 UI의 기본과 변형
일반적인 리스트 표시 [data-role=“listview”]
분할 리스트
둥근 모서리 리스트 [data-inset=“true”]
설명문이 있는 리스트
리스트에 제목 설정 [data-role=“list-divider”]
카운트 버블 표시 [class=“ui-li-count”]
섬네일 / 아이콘이 있는 리스트
검색 필터의 이용 [data-filter=“true”]
리스트 테마의 변경 [data-theme=“테마 이름”]
3-3. header/footer의 사용자정의
Back 버튼 표시 [data-add-back-btn=“true”]
[One Point Advice] header가 아닌 다른 곳에서 ‘Back’ 버튼을 사용하고 싶은 경우
header/footer에 임의의 버튼 표시
네비게이션 바의 추가 [data-role=“navbar”]
header/footer의 고정배치 [data-position=“fixed”]
[One Point Advice] position:fixed을 이용한 고정배치
3-4. 콘텐츠 영역의 레이아웃
그리드 레이아웃(Grid Layout)
접이식 패널 [data-role=“collapsible”]
3-5. 폼 UI의 최적화
폼 UI의 적용 [data-role=“fieldcontain”]
선택형 UI의 이용
브라우저의 기본 폼 이용
버튼의 최적화
CHAPTER 4. [사용자정의편] jQuery Mobile 오리지널 디자인
4-1. 사용자정의로 테마 만들기
jQuery Mobile의 CSS 해부하기
오리지널 색상의 테마 작성하기
4-2. 세미 커스터마이즈로 뉴스 사이트 디자인하기
메인 페이지의 HTML 준비하기
스타일시트의 설정
탭 메뉴의 작성
여러 HTML을 이용한 목록 / 기사 페이지의 작성
4-3. 풀 커스터마이즈로 상품 사이트 디자인하기
HTML의 작성
CSS의 작성
'IT 신간' 카테고리의 다른 글
| AUTO CAD 2012 쉽게 배우기 (1) | 2012.10.09 |
|---|---|
| How To Prezi 실무활용 테크닉 (0) | 2012.08.10 |
| 정리의 달인 (5) | 2012.07.25 |
