직장인 대상

모바일 웹앱 프로그래밍 과정

허광남!kenu@okjsp.net

커리큘럼1. 모바일 웹앱 프로그래밍 개요!

2. 모바일 웹앱 개발 도구!

3. HTML과 모바일 브라우저!

4. 웹의 엔진 자바스크립트!

5. 자바스크립트로 HTML 다루기

6. 자바스크립트 에러와 디버깅!

7. CSS로 꾸미기!

8. jQuery로 자바스크립트를 쉽게!

9. 데이터 저장하기!

10. jQuery모바일

11. HTML5!

12. 지도 API!

13. 디바이스 API!

14. 갤러리 프로젝트

모바일 웹앱 프로그래밍 개요

1. 모바일 위의 앱, 웹, 웹앱!

2. 모바일 웹앱 프로그램의 이해

http://demos.jquerymobile.com/1.4.2/

스마트폰 연대기

모바일 위의 앱

내장 프로그램 - 통신사+제조사!iPaq, 셀빅, Clie - PDA SDK!연아의 햅틱 - 통신사+제조사+SDK!아이폰, 안드로이드 - SDK!!앱스토어(2008) 빅뱅

http://commons.wikimedia.or...Japan_1997-2004.jpg http://jquerymobile.com/

가장 많이 사용되는 앱

모바일 위의 웹

한 때 네이트 브라우저!아이폰 이후 !모바일 웹 브라우저!안드로이드 아이폰 !동일한 오픈소스 엔진 webkit!

http://www.engadget.com/products/lg/lh2300/

아이폰 브라우저의 비밀

모바일 웹앱

2007년 아이폰 출시 앱스토어 없음!Ajax를 이용한 웹앱 가이드!웹페이지 북마크를 앱아이콘으로!2008년 3월 페이스북, BOA 웹앱 시연!!그리고 SDK 공개

http://gigaom.com/2010/02/12/how-to-create-an-iphone-web-app/

모든 스마트폰에 다 있는 브라우저

모바일 웹앱 프로그램의 이해앱과 동일한 성능?!브라우저 앱에서 접근과 차이점!앱스토어 리젝 사유!SDK에 포함된 웹뷰의 제약사항!!그래도 웹앱으로 간다?!

http://sixrevisions.com/mobile/native-app-vs-mobile-web-app-comparison/

웹앱을 앱으로 변신

하이브리드 앱

웹뷰 컴포넌트 이용!www폴더에 html, css, js 넣고 패키징!앱스토어에 업로드 가능!!디바이스API 사용 가능!카메라, 위치정보, 진동, 알림 등!!폰갭(Cordova), 센차 터치

http://www.flickr.com/photos/natty/3248563658

http://phonegap.com/app/

http://www.sencha.com/apps/

모바일 웹앱 개발 도구

1. 모바일 웹앱 개발 환경!

2. 프로그래밍 도구 사용 방법

http://commons.wikimedia.org/wiki/File:Google_Chrome_icon_(2011).png

모바일 웹앱 개발을 위해서

필요한 개발 지식

HTML!CSS!JavaScript!!

https://github.com/coolaj86/logo.js/tree/specific-uses/specific-uses

웹개발용 도구

도구는 장인의 선택

파이어폭스+파이어버그!크롬브라우저!IE의 F12개발도구!!크롬브라우저 다수

코딩 도구

메모장?

Brackets.io!Sublime Text 2!NotePad++!EditPlus!DreamWeaver!Eclipse!WebStorm! http://download.brackets.io/

테스트 서버

로컬호스트

불편한 file:///!http://localhost…!크롬의 Ajax 이슈!!아파치!node.js!python!tomcat!MS IIS

http://en.wikipedia.org/wiki/Server_(computing)

쉬운

프로그래밍 도구 사용 방법손맛!단축키!기능 숙지!삽질은 적을수록

http://ko.wikipedia.org/wiki/삽

Ctrl+Shift+i

크롬 브라우저 개발도구

웹 인스펙터

초보자용!Elements, Network, Sources,!Resources, Console!!고급 사용자용!Timeline, Profiles, Audits!

크롬 브라우저 기능

라이브 편집

로컬의 모든 내용 편집 가능!서버의 파일이 수정되는 것 아님!Elements를 통해서 편집!Console에서 자바스크립트 실행!Sources에서 디버깅 수행!

HTML과 모바일 브라우저

1. HTML 핵심!

2. 모바일 브라우저 다루기!

3. viewport 메타태그

https://github.com/coolaj86/logo.js/tree/specific-uses/specific-uses

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/

HTML 부가기능

<embed> 플러그인

ActiveX 기술!플래시!!브라우저 기본 기능이 아닌!OS 기능 사용!!활성화 이슈!HTML5로 대체 트렌드

http://msdn.microsoft.com/en-us/library/ms537508(v=vs.85).aspx

PC에서 동작하는

모바일 브라우저

Android Emulator!Genymotion

모바일 전용 페이지

meta viewport

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">

웹의 엔진 자바스크립트

1. 자바스크립트의 이해!

2. 자바스크립트 객체와 배열

http://ko.wikipedia.org/wiki/자바스크립트

자바스크립트로 HTML 다루기

1. DOM 다루기!

2. 동적 콘텐츠 생성하기

http://openclipart.org/detail/167038/dom-model-by-eggib

CSS로 꾸미기

1. CSS 셀렉터!

2. BoxModel!

3. 레이아웃

https://github.com/coolaj86/logo.js/tree/specific-uses/specific-uses

HTML 요소 찾기

CSS Selector

tag, #id, .class!div p![attribute]!:filter

jQuery로 자바스크립트를 쉽게

1. jQuery 셀렉터!

2. 이벤트 바인딩!

3. jQuery 이펙트http://jquery.com/

데이터 저장하기

1. 로컬스토리지!

2. ajax 다루기

http://demos.jquerymobile.com/1.4.2/

jQuery모바일

1. jQueryMobile 기본 구조!

2. 목록 다루기http://jquerymobile.com/

HTML5

1. 모바일 웹과 HTML5!

2. HTML5의 장점과 한계

https://github.com/coolaj86/logo.js/tree/specific-uses/specific-uses

지도 API

1. 모바일 웹을 위한 지도!

2. 위치 정보 다루기

http://en.wikipedia.org/wiki/Google_Street_View

디바이스 API

1. 디바이스 API의 종류!

2. JS로 다루는 디바이스 기능

http://en.wikipedia.org/wiki/HTML5

갤러리 프로젝트

1. 모바일 웹앱 이미지 갤러리!

2. 프로젝트 실습

http://fotorama.io/