직장인 대상
모바일	 웹앱	 

프로그래밍	 과정
허광남!
kenu@okjsp.net
커리큘럼
1. 모바일 웹앱 프로그래밍 개요!
2. 모바일 웹앱 개발 도구!
3. HTML과 모바일 브라우저!
4. 웹의 엔진 자바스크립트!
5. 자바스크립트로 HTML 다루기
6. 자바스크립트 에러와 디버깅!
7. CS...
모바일 웹앱 프로그래밍 개요
1. 모바일 위의 앱, 웹, 웹앱!
2. 모바일 웹앱 프로그램의 이해
http://demos.jquerymobile.com/1.4.2/
스마트폰 연대기
모바일 위의 앱
내장 프로그램 - 통신사+제조사!
iPaq, 셀빅, Clie - PDA SDK!
연아의 햅틱 - 통신사+제조사+SDK!
아이폰, 안드로이드 - SDK!
!
앱스토어(2008) 빅뱅
htt...
가장 많이 사용되는 앱
모바일 위의 웹
한 때 네이트 브라우저!
아이폰 이후 !
모바일 웹 브라우저!
안드로이드 아이폰 !
동일한 오픈소스 엔진 webkit!
http://www.engadget.com/products/...
아이폰 브라우저의 비밀
모바일 웹앱
2007년 아이폰 출시 앱스토어 없음!
Ajax를 이용한 웹앱 가이드!
웹페이지 북마크를 앱아이콘으로!
2008년 3월 페이스북, BOA 웹앱 시연!
!
그리고 SDK 공개
http:...
모든 스마트폰에 다 있는 브라우저
모바일 웹앱 

프로그램의 이해
앱과 동일한 성능?!
브라우저 앱에서 접근과 차이점!
앱스토어 리젝 사유!
SDK에 포함된 웹뷰의 제약사항!
!
그래도 웹앱으로 간다?!
http://s...
웹앱을 앱으로 변신
하이브리드 앱
웹뷰 컴포넌트 이용!
www폴더에 html, css, js 넣고 패키징!
앱스토어에 업로드 가능!
!
디바이스API 사용 가능!
카메라, 위치정보, 진동, 알림 등!
!
폰갭(Cordo...
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/w...
쉬운
프로그래밍 도구
사용 방법
손맛!
단축키!
기능 숙지!
삽질은 적을수록
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...
HTML 핵심
웹 페이지 구성
HTML (HyperText Markup Language)!
하이퍼텍스트 마크업 언어!
정보를 표현하는 <tag> 로 구성!
CSS (Cascading Style Sheet)!
캐스케이딩 ...
HTML 부가기능
<embed> 플러그인
ActiveX 기술!
플래시!
!
브라우저 기본 기능이 아닌!
OS 기능 사용!
!
활성화 이슈!
HTML5로 대체 트렌드
http://msdn.microsoft.com/en-u...
PC에서 동작하는
모바일 브라우저
Android Emulator!
Genymotion
모바일 전용 페이지
meta viewport
<meta name="viewport" 

content="user-scalable=no, 

initial-scale=1.0, 

maximum-scale=1.0, 

mi...
웹의 엔진 자바스크립트
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/
모바일 웹앱 프로그래밍 과정
모바일 웹앱 프로그래밍 과정
모바일 웹앱 프로그래밍 과정
모바일 웹앱 프로그래밍 과정
모바일 웹앱 프로그래밍 과정
모바일 웹앱 프로그래밍 과정
모바일 웹앱 프로그래밍 과정
모바일 웹앱 프로그래밍 과정
모바일 웹앱 프로그래밍 과정
모바일 웹앱 프로그래밍 과정
Upcoming SlideShare
Loading in...5
×

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

1,002

Published on

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,002
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
36
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

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

  1. 1. 직장인 대상 모바일 웹앱 
 프로그래밍 과정 허광남! kenu@okjsp.net
  2. 2. 커리큘럼 1. 모바일 웹앱 프로그래밍 개요! 2. 모바일 웹앱 개발 도구! 3. HTML과 모바일 브라우저! 4. 웹의 엔진 자바스크립트! 5. 자바스크립트로 HTML 다루기 6. 자바스크립트 에러와 디버깅! 7. CSS로 꾸미기! 8. jQuery로 자바스크립트를 쉽게! 9. 데이터 저장하기! 10. jQuery모바일 11. HTML5! 12. 지도 API! 13. 디바이스 API! 14. 갤러리 프로젝트
  3. 3. 모바일 웹앱 프로그래밍 개요 1. 모바일 위의 앱, 웹, 웹앱! 2. 모바일 웹앱 프로그램의 이해 http://demos.jquerymobile.com/1.4.2/
  4. 4. 스마트폰 연대기 모바일 위의 앱 내장 프로그램 - 통신사+제조사! iPaq, 셀빅, Clie - PDA SDK! 연아의 햅틱 - 통신사+제조사+SDK! 아이폰, 안드로이드 - SDK! ! 앱스토어(2008) 빅뱅 http://commons.wikimedia.or...Japan_1997-2004.jpg http://jquerymobile.com/
  5. 5. 가장 많이 사용되는 앱 모바일 위의 웹 한 때 네이트 브라우저! 아이폰 이후 ! 모바일 웹 브라우저! 안드로이드 아이폰 ! 동일한 오픈소스 엔진 webkit! http://www.engadget.com/products/lg/lh2300/
  6. 6. 아이폰 브라우저의 비밀 모바일 웹앱 2007년 아이폰 출시 앱스토어 없음! Ajax를 이용한 웹앱 가이드! 웹페이지 북마크를 앱아이콘으로! 2008년 3월 페이스북, BOA 웹앱 시연! ! 그리고 SDK 공개 http://gigaom.com/2010/02/12/how-to-create-an-iphone-web-app/
  7. 7. 모든 스마트폰에 다 있는 브라우저 모바일 웹앱 
 프로그램의 이해 앱과 동일한 성능?! 브라우저 앱에서 접근과 차이점! 앱스토어 리젝 사유! SDK에 포함된 웹뷰의 제약사항! ! 그래도 웹앱으로 간다?! http://sixrevisions.com/mobile/native-app-vs-mobile-web-app-comparison/
  8. 8. 웹앱을 앱으로 변신 하이브리드 앱 웹뷰 컴포넌트 이용! www폴더에 html, css, js 넣고 패키징! 앱스토어에 업로드 가능! ! 디바이스API 사용 가능! 카메라, 위치정보, 진동, 알림 등! ! 폰갭(Cordova), 센차 터치 http://www.flickr.com/photos/natty/3248563658
  9. 9. http://phonegap.com/app/
  10. 10. http://www.sencha.com/apps/
  11. 11. 모바일 웹앱 개발 도구 1. 모바일 웹앱 개발 환경! 2. 프로그래밍 도구 사용 방법 http://commons.wikimedia.org/wiki/File:Google_Chrome_icon_(2011).png
  12. 12. 모바일 웹앱 개발을 위해서 필요한 개발 지식 HTML! CSS! JavaScript! ! https://github.com/coolaj86/logo.js/tree/specific-uses/specific-uses
  13. 13. 웹개발용 도구 도구는 장인의 선택 파이어폭스+파이어버그! 크롬브라우저! IE의 F12개발도구! ! 크롬브라우저 다수
  14. 14. 코딩 도구 메모장? Brackets.io! Sublime Text 2! NotePad++! EditPlus! DreamWeaver! Eclipse! WebStorm! http://download.brackets.io/
  15. 15. 테스트 서버 로컬호스트 불편한 file:///! http://localhost…! 크롬의 Ajax 이슈! ! 아파치! node.js! python! tomcat! MS IIS http://en.wikipedia.org/wiki/Server_(computing)
  16. 16. 쉬운 프로그래밍 도구 사용 방법 손맛! 단축키! 기능 숙지! 삽질은 적을수록 http://ko.wikipedia.org/wiki/삽
  17. 17. Ctrl+Shift+i
  18. 18. 크롬 브라우저 개발도구 웹 인스펙터 초보자용! Elements, Network, Sources,! Resources, Console! ! 고급 사용자용! Timeline, Profiles, Audits!
  19. 19. 크롬 브라우저 기능 라이브 편집 로컬의 모든 내용 편집 가능! 서버의 파일이 수정되는 것 아님! Elements를 통해서 편집! Console에서 자바스크립트 실행! Sources에서 디버깅 수행!
  20. 20. HTML과 모바일 브라우저 1. HTML 핵심! 2. 모바일 브라우저 다루기! 3. viewport 메타태그 https://github.com/coolaj86/logo.js/tree/specific-uses/specific-uses
  21. 21. 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/
  22. 22. HTML 부가기능 <embed> 플러그인 ActiveX 기술! 플래시! ! 브라우저 기본 기능이 아닌! OS 기능 사용! ! 활성화 이슈! HTML5로 대체 트렌드 http://msdn.microsoft.com/en-us/library/ms537508(v=vs.85).aspx
  23. 23. PC에서 동작하는 모바일 브라우저 Android Emulator! Genymotion
  24. 24. 모바일 전용 페이지 meta viewport <meta name="viewport" 
 content="user-scalable=no, 
 initial-scale=1.0, 
 maximum-scale=1.0, 
 minimum-scale=1.0, 
 width=device-width">
  25. 25. 웹의 엔진 자바스크립트 1. 자바스크립트의 이해! 2. 자바스크립트 객체와 배열 http://ko.wikipedia.org/wiki/자바스크립트
  26. 26. 자바스크립트로 HTML 다루기 1. DOM 다루기! 2. 동적 콘텐츠 생성하기 http://openclipart.org/detail/167038/dom-model-by-eggib
  27. 27. CSS로 꾸미기 1. CSS 셀렉터! 2. BoxModel! 3. 레이아웃 https://github.com/coolaj86/logo.js/tree/specific-uses/specific-uses
  28. 28. HTML 요소 찾기 CSS Selector tag, #id, .class! div p! [attribute]! :filter
  29. 29. jQuery로 자바스크립트를 쉽게 1. jQuery 셀렉터! 2. 이벤트 바인딩! 3. jQuery 이펙트 http://jquery.com/
  30. 30. 데이터 저장하기 1. 로컬스토리지! 2. ajax 다루기 http://demos.jquerymobile.com/1.4.2/
  31. 31. jQuery모바일 1. jQueryMobile 기본 구조! 2. 목록 다루기 http://jquerymobile.com/
  32. 32. HTML5 1. 모바일 웹과 HTML5! 2. HTML5의 장점과 한계 https://github.com/coolaj86/logo.js/tree/specific-uses/specific-uses
  33. 33. 지도 API 1. 모바일 웹을 위한 지도! 2. 위치 정보 다루기 http://en.wikipedia.org/wiki/Google_Street_View
  34. 34. 디바이스 API 1. 디바이스 API의 종류! 2. JS로 다루는 디바이스 기능 http://en.wikipedia.org/wiki/HTML5
  35. 35. 갤러리 프로젝트 1. 모바일 웹앱 이미지 갤러리! 2. 프로젝트 실습 http://fotorama.io/
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×