2. 커리큘럼
1. 모바일 웹앱 프로그래밍 개요!
2. 모바일 웹앱 개발 도구!
3. HTML과 모바일 브라우저!
4. 웹의 엔진 자바스크립트!
5. 자바스크립트로 HTML 다루기
6. 자바스크립트 에러와 디버깅!
7. CSS로 꾸미기!
8. jQuery로 자바스크립트를 쉽게!
9. 데이터 저장하기!
10. jQuery모바일
11. HTML5!
12. 지도 API!
13. 디바이스 API!
14. 갤러리 프로젝트
3. 모바일 웹앱 프로그래밍 개요
1. 모바일 위의 앱, 웹, 웹앱!
2. 모바일 웹앱 프로그램의 이해
http://demos.jquerymobile.com/1.4.2/
4. 스마트폰 연대기
모바일 위의 앱
내장 프로그램 - 통신사+제조사!
iPaq, 셀빅, Clie - PDA SDK!
연아의 햅틱 - 통신사+제조사+SDK!
아이폰, 안드로이드 - SDK!
!
앱스토어(2008) 빅뱅
http://commons.wikimedia.or...Japan_1997-2004.jpg
http://jquerymobile.com/
5. 가장 많이 사용되는 앱
모바일 위의 웹
한 때 네이트 브라우저!
아이폰 이후 !
모바일 웹 브라우저!
안드로이드 아이폰 !
동일한 오픈소스 엔진 webkit!
http://www.engadget.com/products/lg/lh2300/
6. 아이폰 브라우저의 비밀
모바일 웹앱
2007년 아이폰 출시 앱스토어 없음!
Ajax를 이용한 웹앱 가이드!
웹페이지 북마크를 앱아이콘으로!
2008년 3월 페이스북, BOA 웹앱 시연!
!
그리고 SDK 공개
http://gigaom.com/2010/02/12/how-to-create-an-iphone-web-app/
7. 모든 스마트폰에 다 있는 브라우저
모바일 웹앱
프로그램의 이해
앱과 동일한 성능?!
브라우저 앱에서 접근과 차이점!
앱스토어 리젝 사유!
SDK에 포함된 웹뷰의 제약사항!
!
그래도 웹앱으로 간다?!
http://sixrevisions.com/mobile/native-app-vs-mobile-web-app-comparison/
19. 크롬 브라우저 개발도구
웹 인스펙터
초보자용!
Elements, Network, Sources,!
Resources, Console!
!
고급 사용자용!
Timeline, Profiles, Audits!
20. 크롬 브라우저 기능
라이브 편집
로컬의 모든 내용 편집 가능!
서버의 파일이 수정되는 것 아님!
Elements를 통해서 편집!
Console에서 자바스크립트 실행!
Sources에서 디버깅 수행!
21.
22. HTML과 모바일 브라우저
1. HTML 핵심!
2. 모바일 브라우저 다루기!
3. viewport 메타태그
https://github.com/coolaj86/logo.js/tree/specific-uses/specific-uses
23. HTML 핵심
웹 페이지 구성
HTML (HyperText Markup Language)!
하이퍼텍스트 마크업 언어!
정보를 표현하는 <tag> 로 구성!
CSS (Cascading Style Sheet)!
캐스케이딩 스타일 시트!
웹 페이지에 스타일을 입히는 표준 기술!
JavaScript!
자바스크립트!
버튼 클릭, 마우스 이벤트 처리
http://www.99points.info/2010/03/50-css-techniques-and-tips-which-you-always-need/
24. HTML 부가기능
<embed> 플러그인
ActiveX 기술!
플래시!
!
브라우저 기본 기능이 아닌!
OS 기능 사용!
!
활성화 이슈!
HTML5로 대체 트렌드
http://msdn.microsoft.com/en-us/library/ms537508(v=vs.85).aspx
26. 모바일 전용 페이지
meta viewport
<meta name="viewport"
content="user-scalable=no,
initial-scale=1.0,
maximum-scale=1.0,
minimum-scale=1.0,
width=device-width">