모바일 웹앱 프로그래밍 과정
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 820 views

 

Statistics

Views

Total Views
820
Views on SlideShare
808
Embed Views
12

Actions

Likes
3
Downloads
24
Comments
0

1 Embed 12

http://www.slideee.com 12

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 1. 직장인 대상 모바일 웹앱 
 프로그래밍 과정 허광남! kenu@okjsp.net
  • 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/
  • 8. 웹앱을 앱으로 변신 하이브리드 앱 웹뷰 컴포넌트 이용! www폴더에 html, css, js 넣고 패키징! 앱스토어에 업로드 가능! ! 디바이스API 사용 가능! 카메라, 위치정보, 진동, 알림 등! ! 폰갭(Cordova), 센차 터치 http://www.flickr.com/photos/natty/3248563658
  • 9. http://phonegap.com/app/
  • 10. http://www.sencha.com/apps/
  • 11. 모바일 웹앱 개발 도구 1. 모바일 웹앱 개발 환경! 2. 프로그래밍 도구 사용 방법 http://commons.wikimedia.org/wiki/File:Google_Chrome_icon_(2011).png
  • 12. 모바일 웹앱 개발을 위해서 필요한 개발 지식 HTML! CSS! JavaScript! ! https://github.com/coolaj86/logo.js/tree/specific-uses/specific-uses
  • 13. 웹개발용 도구 도구는 장인의 선택 파이어폭스+파이어버그! 크롬브라우저! IE의 F12개발도구! ! 크롬브라우저 다수
  • 14. 코딩 도구 메모장? Brackets.io! Sublime Text 2! NotePad++! EditPlus! DreamWeaver! Eclipse! WebStorm! http://download.brackets.io/
  • 15. 테스트 서버 로컬호스트 불편한 file:///! http://localhost…! 크롬의 Ajax 이슈! ! 아파치! node.js! python! tomcat! MS IIS http://en.wikipedia.org/wiki/Server_(computing)
  • 16. 쉬운 프로그래밍 도구 사용 방법 손맛! 단축키! 기능 숙지! 삽질은 적을수록 http://ko.wikipedia.org/wiki/삽
  • 17. Ctrl+Shift+i
  • 18. 크롬 브라우저 개발도구 웹 인스펙터 초보자용! Elements, Network, Sources,! Resources, Console! ! 고급 사용자용! Timeline, Profiles, Audits!
  • 19. 크롬 브라우저 기능 라이브 편집 로컬의 모든 내용 편집 가능! 서버의 파일이 수정되는 것 아님! Elements를 통해서 편집! Console에서 자바스크립트 실행! Sources에서 디버깅 수행!
  • 20. HTML과 모바일 브라우저 1. HTML 핵심! 2. 모바일 브라우저 다루기! 3. viewport 메타태그 https://github.com/coolaj86/logo.js/tree/specific-uses/specific-uses
  • 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. HTML 부가기능 <embed> 플러그인 ActiveX 기술! 플래시! ! 브라우저 기본 기능이 아닌! OS 기능 사용! ! 활성화 이슈! HTML5로 대체 트렌드 http://msdn.microsoft.com/en-us/library/ms537508(v=vs.85).aspx
  • 23. PC에서 동작하는 모바일 브라우저 Android Emulator! Genymotion
  • 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. 웹의 엔진 자바스크립트 1. 자바스크립트의 이해! 2. 자바스크립트 객체와 배열 http://ko.wikipedia.org/wiki/자바스크립트
  • 26. 자바스크립트로 HTML 다루기 1. DOM 다루기! 2. 동적 콘텐츠 생성하기 http://openclipart.org/detail/167038/dom-model-by-eggib
  • 27. CSS로 꾸미기 1. CSS 셀렉터! 2. BoxModel! 3. 레이아웃 https://github.com/coolaj86/logo.js/tree/specific-uses/specific-uses
  • 28. HTML 요소 찾기 CSS Selector tag, #id, .class! div p! [attribute]! :filter
  • 29. jQuery로 자바스크립트를 쉽게 1. jQuery 셀렉터! 2. 이벤트 바인딩! 3. jQuery 이펙트 http://jquery.com/
  • 30. 데이터 저장하기 1. 로컬스토리지! 2. ajax 다루기 http://demos.jquerymobile.com/1.4.2/
  • 31. jQuery모바일 1. jQueryMobile 기본 구조! 2. 목록 다루기 http://jquerymobile.com/
  • 32. HTML5 1. 모바일 웹과 HTML5! 2. HTML5의 장점과 한계 https://github.com/coolaj86/logo.js/tree/specific-uses/specific-uses
  • 33. 지도 API 1. 모바일 웹을 위한 지도! 2. 위치 정보 다루기 http://en.wikipedia.org/wiki/Google_Street_View
  • 34. 디바이스 API 1. 디바이스 API의 종류! 2. JS로 다루는 디바이스 기능 http://en.wikipedia.org/wiki/HTML5
  • 35. 갤러리 프로젝트 1. 모바일 웹앱 이미지 갤러리! 2. 프로젝트 실습 http://fotorama.io/