View
883
Download
0
Category
Preview:
Citation preview
커리큘럼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
모바일 웹앱 개발 도구
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
데이터 저장하기
1. 로컬스토리지!
2. ajax 다루기
http://demos.jquerymobile.com/1.4.2/
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
Recommended