| [도서구매] 시골의사의 부자경제학 (1) | 2013.01.17 |
|---|---|
| [도서] 1,013통의 편지 - 그리고 너에게 들여주고 싶은 이야기 (1) | 2013.01.16 |
| [도서구매]인생의 격차는 30대에 만들어진다, 베이징의 사람과 문화 읽기, 마이크로소프트웨어 (월간) 1월호 (3) | 2013.01.13 |
| [도서구매] 중국, 대륙의 숨은 풍경을 찾다. (1) | 2013.01.09 |
| [도서구매] 난중일기, 마이크로소프트웨어 12월호 (2) | 2012.12.03 |
출처 : htt//cafe.naver.com/webappdev/36110
< 하이브리드앱 개발방법 >
* 출처 : 도서 '만들면서 이해하는 웹앱 & 하이브리드 앱'
< 작성자 : 정동근 >
* 직업 - 앱 개발자 및 강사 (경력 10년 이상)
* 2009년 'Visual C++ 윈도우 스킨&테마 프로그래밍' 출간
* 2009년 '자가치유 바이블' 출간
* 2011년 '따라하면서 배우는 바다 모바일 프로그래밍' 출간
* 2012년 '만들면서 이해하는 웹앱 & 하이브리드 앱' 출간
* Mail : topofsan@hotmail.com
* Tel : 010-4265-0730
0 하이브리드앱 이란.
1. 네이티브앱의 특징
- 네이티브 앱은 모바일 기기에 최적화가 되어있는 앱으로 모바일 OS 제조사에서 제공하는 개발언어를 이용하여 자신들의 제품에서만 동작되는 앱을 말하는 것.
- 안드로이드 SDK를 이용한 안드로이드 앱과 iOS SDK를 이용한 아이폰 앱이 여기에 속한다.
-
- 장점 : 편리한 개발툴과 라이브러리 제공하여 개발이 쉽고 유지가 쉽다.
모바일 기기의 고유정보을 읽고 변경할 수가 있으며 하드웨어를 제어할수 있다.
고성능의 그래픽 처리가 가능하다.
- 단점 : 플랫폼 별로 어플리케이션을 별도로 개발해야 한다.
2. 모바일 웹앱의 특징
- 컴퓨터 브라우저에서 실행되는 웹 애플리케이션을 모바일 스크린 크기로 줄인것.
- HTML, CSS, JavaScript, JSP, PHP, ASP, ASP.NET 등의 웹 기술이 사용되며 모바일 브라우저에서 실행된다.
- 장점 : 하나의 웹사이트만 개발하면 모든 스마트폰 플랫폼에서 실행 가능.
- 단점 : 서버에서 웹페이지를 불러오기 때문에 속도가 느리다. 각각의 모바일 플랫폼에서 작동되는 API를 사용할수 없다. 앱스토어 또는 마켓에 등록할수 없다.
3. 하이브리드앱의 특징
- 모바일 웹앱의 단점을 해결하기 위해서 네이티브 앱으로 모바일 웹앱을 포장하는 기술을 하이브리드하고 부른다.
- 모바일 웹앱을 하이브리드 앱으로 변환해주는 툴로는 폰갭, 앱스프레소, 티타늄 등이 있다.
- 페이지 UI와 이미지, 파일 등 실행에 필요한 모든 리소스가 어플리케이션 내부에 저장되어서 서버에서 따로 받을 필요가 없다.
- 장점 : 구동속도가 모바일 웹앱 보다 빠르다. 앱스토어나 마켓에 등록할수 있다. 하드웨어 정보를 읽고 제어할수 있다. 하나의 어플리케이션만 개발하면 다른 스마트폰 플랫폼에 동일하게 적용 가능.
- 단점 : 네이티브 앱 보다는 속도가 느리다. 플랫폼이 자체적으로 지원하는 모든 기능을 사용하지 못한다.
4. 하이브리드앱 개발에 사용되는 언어와 라이브러리
- HTML5 : html + CSS3 + jQuery
- UI 기능 프레임 워크 : jQuery Mobile, Sencha Touch
- 크로스 플랫폼 : 폰갭, 티타늄 모바일, 앱스프레소
0 CSS(Cascading Style Sheets)란?
- HTML 문서를 비주얼하게 꾸밀수 있는 스타일시트 언어.
- 텍스트의 색상과 크기, 스타일(굵기, 이탤릭 처리 등), 페이지 레이아웃과 그레이디언트, 투명도는 물론, 그 이상의 복잡한 양식까지도 구현 가능.
0 CSS 사용 예시
body {
font-size: 12px;
font-weight: bold;
font-family: Arial; }
a { font-style: italic; }
h1 a { font-style: italic; }
.loud { font-style: italic; }
#highlight { background-color: yellow; }
0 CSS로 컨텐츠에 사각형 테두리 지정
#header ul li a {
background-color: #FFFFFF;
border: 1px solid #999999;
color: #222222;
display: block;
font-size: 17px;
font-weight: bold;
padding: 12px;
text-decoration: none;
}
0 CSS로 컨텐츠 감추기
#footer { display: none; }
0 텍스트에 그림자 효과 적용
#footer { text-shadow: 0px 1px 1px #fff; }
수평오프셋, 수직오프셋, 블러반경, 색상 순
0 모서리 둥근 사각형 모양 만들기
.roundbox { border: 2px solid #555;
border-radius: 20px; }
0 jQuery Mobile과 센차터치 특성 비교
|
|
jQuery Mobile |
Sencha Touch |
|
개발 난이도 |
낮음 |
높음 |
|
기능의 다양성 |
보통 |
높음 |
|
개발 방식 |
HTML과 같은 마크업 방식 |
JavaScript와 같은 언어 방식 |
|
테마 특징 |
CSS, 테마롤러 도구 지원 |
Sass 기반 |
|
기반 스크립트 |
jQuery |
ExtJS |
|
지원 기기 |
폰, 태블릿 |
폰, 태블릿 |
|
지원 플랫폼 |
iOS, 안드로이드, 블랙베리, 바다, 윈도우폰, 팜 웹OS, 심비안 |
iOS, 안드로이드, 블랙베리 |
0 jQuery Mobile
- 모바일 웹 애플리케이션 개발을 목적으로 만들어진 자바스크립트 프레임 워크.
- 모바일에 최적화된 UI 컨트롤과 이벤트 처리, 애니메이션 효과 및 자동 네비게이션, Ajax 통신 제공.
- 주요 특징
. jQuery 기반
. html 태그와 CSS 연동
. 경량 라이브러리 : 다운로드 시간이 절감. 빠른 다운로드를 위해 별도의 CDN 서비스도 제공.
0 Button 컨트롤 예제
<script type="text/javascript" charset="utf-8">
function onButtonOk() {
document.getElementById("labelMessagge").innerHTML = "OK Button clicked.";
}
</script>
<body>
<div data-role="content" data-theme="b">
<h2><span id="labelMessagge">Press Button.</span></h2>
<input type="button" value="OK" onClick="onButtonOk();">
</div>
</body>
0 Text 에디트 컨트롤 예제
function onButtonOk() {
var textBrand = $('#brand').val();
var textPassword = $('#passwordinput').val();
}
...
<input type="text" placeholder="Brand" name="brand" id="brand" />
<input type="password" placeholder="Password" name="passwordinput" id="passwordinput" />
<textarea cols="40" rows="8" name="textarea" id="textarea">
0 Checkbox 컨트롤 예제
function onCheckBox1() {
if($('#checkbox1').is(':checked') == true ) {
}
else {
}
}
...
<label><input type="checkbox" name="checkbox1" id="checkbox1" onClick="onCheckBox1();" />Cheese</label>
0 ListView 컨트롤 예제
function onListSelected(index) {
}
...
<ul data-role="listview" id="listPet" data-inset="true" data-theme="c">
<li data-role="list-divider">Pet</li>
<li><a href="javascript:onListSelected(0)">Cat</a></li>
<li><a href="javascript:onListSelected(1)">Dog</a></li>
</ul>
0 Sencha Touch 개요
- 객체 지향적으로 설계된 자바 스크립트 기반의 프레임워크.
- 모바일 친화적인 사용자 인터페이스와 애니메이션처리, Ajax 통신 및 데이터 처리 등을 객체지향적인 API를 통해 프로그래밍 할수 있다.
- 공식 사이트 : http://www.sencha.com/products/touch/
- API 도큐먼트 : http://dev.sencha.com/deploy/touch/docs/
- 주요 특징
. 웹표준 HTML5, CSS3 기능 이용
. 향상된 터치 이벤트 : touchstart, touchend, tap, double tap, swipe, tap and hold, pinch, rotate
. 폰갭과 연동하여 네이티브앱 개발 가능.
. ExtJS 라이브러리를 기반으로 jQTouch와 Raphal를 합쳐서 작성되었으며 방대한 API를 제공.
. 강력하고 쉬운 데이터 통합 : 동일한 도메인 내의 요청은 AJAX로 통신하고, 크로스 도메인일 경우 JSONP로 통신할수 있도록 API를 제공한다. XML과 JSON은 자체 API로 파싱 가능.
. 다양한 차트 기능 제공 : Readar, Bar, Line, Stacked, Pie 차트 등.
0 Sencha Touch 2가 제공하는 MVC(Model View Controller) 패턴
가독성 있고 테스트하기 쉽고 유지보수 하기 쉬운 코딩을 지원.
-History Support : 앱 내에서 full bacck button을 지원하고 어느 위치에서든지 link로 연결 가능.
-Deep Linking : 앱의 어떤 화면에서도 deep link들을 공유 가능. 웹페이지에 링크 걸듯 사용 가능.
-Device Profiles : 어플리케이션의 UI를 폰, 태블릿 기타 디바이스의 종류에 맞게 쉽게 customizing 가능.
0 컨트롤러의 규칙(Sencha Touch)
- 앱에 있는 각각의 컨트롤러는 모두 Ext.app.Controller의 subclass 이다.
- 컨트롤러는 MyApp.controller.* namespace에 존재한다. 예를 들어 세션 컨트롤러가 있다면 그것은 MyApp.controller.Sessions 라고 불려지게 된다.
- 그리고 app/controller/Sessions.js 라는 파일로 존재하게 된다.
0 Sencha Touch 어플리케이션의 시작
Ext.application({
name: 'MyApp',
models: ['User', 'Product', 'nested.Order'],
views: ['OrderList', 'OrderDetail', 'Main'],
controllers: ['Orders'],
launch: function() {
Ext.create('MyApp.view.Main');
}
});
- Models : 앱에서 객체의 타입을 표시합니다. 예를 들어 e-커머스 앱의 경우 유저, 제품, 주문과 관련한 모델이 필요하다.
- View : 객체나 데이터들을 display하는 것을 다루는 부분.
- Controllers : 어플리케이션 내의 사용자 상호 작용을 다룹니다. 어떤 이벤트를 listening하고 핸들링 하는 것도 컨트롤러에서 하게 된다.
- Store : 앱에 데이터를 로딩하는 부분. 리스트나 데이타뷰 같은 컴포넌트들도 다룬다.
- Profile : 앱의 UI를 디바이스 종류별로 쉽게 customizing 할 수 있도록 도와 준다.
0 컨트롤러 예제(Sencha Touch)
Ext.define('MyApp.controller.Sessions', {
extend: 'Ext.app.Controller',
config: {
refs: {
loginForm: 'formpanel'
},
control: {
'formpanel button': {
tap: 'doLogin'
}
}
},
doLogin: function() {
var form = this.getLoginForm(),
values = form.getValues();
MyApp.authenticate(values);
}
});
2개의 컨트롤러 configuration이 있다. Refs는 formpanel 컴포넌트에 loginForm 프로퍼티를 할당.
Control configuration은 loginForm의 button을 tap했을때 doLogin 함수를 호출한다.
0 Stores 설명(Sencha Touch)
Store는 데이타를 다루는 매우 중요한 부분인 반면에 그 사용법은 간단하다.
Store는 Model 인스턴스의 배열.
Data-bound 컴포넌트는 DataView나 리스트 같이 Store의 각 Model 인스턴스에서 한 item을 render 한다.
Model 인스턴스가 추가되거나 삭제되는 store 이벤트가 발생하면 이 data-bound 컴포넌트가 listening 해서 update를 해주게 된다.
0 Device Profiles 예제(Sencha Touch)
Ext.application({
name: 'MyApp',
profiles: ['Phone', 'Tablet'],
});
Device Profile은 서로 다른 장치(폰, 태블릿)에 앱이 제대로 보여지고 동작할 수 있도록 해 주는 간단한 클래스. 처음에는 이 profile 없이 앱을 개발했다가 나중에 추가하면 된다.
이 프로파일을 사용하기 위해서는 프로파일(device)들의 정보를 Application에 전달 해주고 그 디바이스들을 위해 Ext.app.Profile 서브클래스를 생성하면 된다.
어플리케이션은 app/profile/Phone.js와 app/profile/Tablet.js를 로드하게 된다.
0 Tablet 프로파일에 대한 예제(Sencha Touch)
Ext.define('MyApp.profile.Tablet', {
extend: 'Ext.app.Profile',
config: {
controllers: ['Groups'],
views: ['GroupAdmin'],
models: ['MyApp.model.Group']
},
isActive: function() {
return Ext.os.is.Tablet;
}
});
isActive 함수는 이 앱이 태블릿에서 작동을 할 때 true를 return 한다.
Ext.os.is.Tablet은 iPad에서 작동하면 true를 리턴하고 다른 경우엔 false를 리턴한다. isActive에 다양한 디바이스를 넣어서 사용하면 된다.
현재의 프로파일에 대해 추가적인 model,view,controller, store들이 있다면 이는 어플리케이션이 자동적으로 아래와 같이 해당 파일을 로딩 한다.
controllers: ['Groups'] - app/controller/tablet/Groups.js
views: ['GroupAdmin'] - app/view/tablet/GroupAdmin.js
models: ['MyApp.model.Group'] - app/model/Group.js
0 Launch Process(Sencha Touch)
launch 함수는 앱이 로드되고 launch될 준비가 되어있을 때 실행 되는 함수. start up 로직을 넣을 최적의 장소이고 main view structure를 생성하기에 적합한 장소.
launch 함수와 더불어 앱의 startup 로직을 넣을 좋은 장소가 두군데 더 있다.
첫번째로 각 controller에는 init 함수를 정의할 수 있다. 이 함수는 어플리케이션 launch 함수가 시작되기 이전에 call 된다.
두번째로는 Device Profile을 사용할 경우. 각각의 Profile에는 나름대로의 launch 함수를 정의할 수 있다. 이 함수는 controller의 init 함수 이후에 그리고 application launch 함수 전에 실행 된다.
주의 할 것은 해당 Profile에 매치하는 Device에서만 이 Profile launch 함수가 실행된다는 것이다.
앱이 시작할 때 call 되는 함수들의 순서는 아래와 같다.
- Controller#init functions called
- Profile#launch function called
- Application#launch function called
- Controller#launch functions called
Profile을 사용할 때 Profile launch 함수 안에 bootup 로직을 넣는 것이 일반적이다. 왜냐하면 각 프로파일들은 startup때 실행될 필요가 있는 각기 다른 view 세트를 가지고 있기 때문이다.
0 Routing 과 History Support(Sencha Touch)
Sencha Touch는 Routing과 History를 지원니다. Kitchen Sink 같은 SDK 예제를 보면 각 화면별로 옮겨다니기 쉽게 history를 사용해서 지원한다. 특히 안드로이드의 경우 유용하다.
0 폰갭 개요
여러 스마트폰 플랫폼에서 제공하는 네이티브 SDK는 서로 개발 언어와 환경 그리고 API 가 서로 다르다.
여러 플랫폼의 SDK를 통합해서 하나의 SDK로 개발할수있도록 개발한것을 크로스 플랫폼이라고 한다.
현재 가장 유명한 스마트폰 크로스 플랫폼은 폰갭과 티타늄 모바일이다. 그외 국내에서 개발한 앱스프레소가 있다.
폰갭은 ‘하이브리드 앱(Hybrid App)’ 부류에 속한다. 하이브리드 앱이란 개발자가 플랫폼에 의존적인 기능(카메라 등의 장치 제어)만 네이티브 라이브러리로 제작하고 HTML과 자바스크립트로 네이티브 기능을 이용할수 있도록 한것.
티타늄 모바일은 자체 자바스크립트 API로 애플리케이션을 개발하면, 컴파일러가 자바스크립트 코드를 네이티브 개발 언어로 치환하는 방식.
0 폰갭에서 지원하는 디바이스 API 종류
• Accelerometer: 가속도계 사용
• Camera: 사진 촬영과 사진 앨범 탐색
• Capture: 동영상 녹화, 오디오 녹음, 정지 영상 촬영
• Compass: 나침반 기능
• Connection: 모바일 네트워크 상태 확인
• Contacts: 주소록 검색 및 연락처 추가/수정/탐색
• Device: 단말기, 운영체제 버전 등
• Events: 하드웨어 버튼 이벤트
• File: 파일 입출력, 전송
• Geolocation: 위치 정보
• Media: 음성 재생과 녹음
• Notification: 벨 소리, 진동, 시스템 알림 메시지 등
• Storage: 네이티브 DB 접근
0 폰갭의 활용도
- 지원 가능한 네이티브 앱 기능 : 90%
폰갭에서 애플리케이션에 필요한 모든 기능을 제공하지는 않는다. 추가기능을 구현하려면 네이티브 언어를 사용하거나 플러그인으로 기능확장이 필요하다.
- 지원 가능한 스마트폰 플랫폼 : 90%
안드로이드와 iOS의 렌더링 방식 차이로 불가피하게 운영체제별로 구현을 따로해야하는 부분이 있다. 또한 운영체제별로 동작에 차이가 있는 경우도 있다. 운영체제 종류를 판별하는 분기문으로 해결 가능.
- 네이티브 앱만큼 미려한 UI 개발 가능 : 70%
웹뷰 상에서 U를 표현하는 방식이므로 모바일 웹 기능의 한계를 넘는 UI는 표현할수 없다. jQuery Mobile 또는 센차터치를 사용해서 보완할수 있다.
- 성능 문제
안드로이드의 경우 UI 반응성이 iOS에 비해서 느린 경우가 많다.
iOS 4.x 버전 이하에서는 사파리 브라우저와 웹뷰에서 사용하는 자바스크립트 엔진이 서로 다르다. 사파리용 엔진이 웹뷰용 엔진 보다 2~3배 빠르다. iOS 5 이후부터는 2개 엔진이 동일하다.
0 폰갭과 앱스프레소 특성 비교
|
|
폰갭 |
앱스프레소 |
|
지명도 |
높음. 2009년 시작. |
낮음. 2011년 시작. |
|
기능의 다양성 |
낮음 |
높음 |
|
개발의 편의성 |
개발 환경 제공하지 않음. |
이클립스에 플러그인을 설치하여 자체적인 개발환경을 제공 |
|
실행속도 |
보통 |
초기 실행 느림. 웹뷰를 웹서버에 띄워서 렌더링하는 방식. |
|
문서화 완성도 |
잘되어있음. 교재도 많음. |
잘되어있음. 교재는 없음. |
|
오픈소스 정책 |
오픈소스 |
무료이지만 오픈소스는 아님 |
|
지원 플랫폼 |
iOS, 안드로이드, 블랙베리, 바다, 윈도우폰, 팜 웹OS, 심비안 |
iOS, 안드로이드 |
0 폰갭 프로젝트 개발 환경 구축(안드로이드 기준)
- 자바 개발 도구 JDK(Java Development Kit)를 설치
. 사이트 주소 : http://www.oracle.com/technetwork/java/
- 이클립스 설치
. 사이트 주소 : http://www.eclipse.org/downloads/
- 안드로이드 SDK 설치하기
. 사이트 주소 : http://developerlandroid.com/sdk/index.html
- ADT 플러그인 설치하기
. 이클립스 메뉴 [Help > Install New Software] 에서 설치
. 메뉴 [Window > Preferences] 에서 안드로이드 SDK 경로를 지정.
- 안드로이드 플랫폼 버전용 tools, platforms, extras 설치
. 메뉴 [Windows > Android SDK Manager] 에서 Android SDK Platform-tools와 Android 2.3 버전을 설치.
- 안드로이드 AVD(Android Vertual Device) 가상기기(Emulator) 생성하기
. 메뉴 [Window > AVD Manager] 에서 생성
- 폰갭 다운로드
. 사이트 주소 : http://www.phonegap.com/download
0 폰갭 프로젝트 생성하기
- 새 안드로이드 프로젝트 생성
. 메뉴 [FIle > New > Project]를 클릭하고, 팝업창에서 Android Project를 선택.
- 라이브러리 파일 복사
. /libs 폴더를 생성하고 phonegap/lib/android 디렉터리에 들어있는 cordova-x.x.x.jar 파일을 복사.
. /assets/www 폴더를 생성하고 phonegap/lib/android 디렉터리에 들어있는 cordova-x.x.x.js 파일을 복사.
. phonegap/lib/android 디렉터리에 들어있는 xml 폴더를 /res 폴더로 복사.
- 라이브러리를 프로젝트에 등록
. 프로젝트 단축메뉴 [Build Path > Configure Build Path...] 에서 cordova-x.x.x.jar 파일을 등록.
- 메인 Activity 소스파일 수정
. /src/패키지명/~.java 파일을 연다.
. 클래스의 상속확장(extends) 클래스를 Activity 에서 DroidGap로 수정
. setContentView(R.layout.main); 구문을 삭제하고 그 위치에 다음 구문을 입력한다.
super.loadUrl("file:///android_asset/www/index.html");
- 매니패스트 파일 수정
. AndroidManifest.xml 파일을 연다.
. supports-screens 과 uses-permission 구문을 추가한다.
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:xlargeScreens="true"
android:resizeable="true"
android:anyDensity="true"
/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.RECORD_VIDEO"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />
- index.html 파일을 생성
. /assets/www 폴더에 파일을 생성하고 이름을 index.html 으로 지정.
. 파일을 열고 아래 내용을 추가.
<!DOCTYPE HTML>
<html>
<head>
<title>Cordova</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
0 진동 발생 예제(폰갭)
navigator.notification.vibrate(200);
- 시간 단위는 밀리세컨드. 200이면 0.2초.
0 버튼 1개 짜리 메세지박스 예제(폰갭)
function buttonMessageBox() {
var message = 'Do you want make Game App';
navigator.notification.alert(message, null, 'Notice!', 'OK');
}
- 매개변수
. message (String) : 사용자에게 전달하는 텍스트 내용.
. alertCallback (Function) : 메세지박스가 사라질때 이벤트 함수.
. title (String) : 메세지박스 제목 텍스트. 선택사항이며, 기본값은 'Alert' 이다.
. buttonName (String) : 버튼의 텍스트 문자열. 선택사항이며, 기본값은 'OK' 이다.
0 버튼 2개 이상 표시하는 메세지박스 예제(폰갭)
function buttonMessageBox() {
var message = "Do you want make Game App";
navigator.notification.confirm(message, onConfirm, "Notice", "OK,Cancel,Retry");
}
function onConfirm(button) {
var result = 'You selected button ' + button;
}
0 단말기 정보 구하기(폰갭)
- device.name : 단말기의 제품명이나 모델명을 문자열 형식으로 제공
- device.phonegaep : 웹앱에 탑재한 폰갭 API의 버전 정보를 제공
- device.platform : 단말기의 운영체제 이름을 알려준다.
- device.version 속성 : 단말기 운영체제 버전 정보를 제공.
- device.uuid : 단말기의 일련번호(UUID - Universally Unique Identifier) 정보를 제공.
| 12+ jQuery Mobile Layout Plugins and Examples (0) | 2013.01.16 |
|---|---|
| 10 jQuery Grids Plugins (0) | 2013.01.16 |
| [javascript] corona SDK (0) | 2013.01.16 |
| [javascript] input 이 hidden 이거나 포커스 없이 value()가 변경되는 것을 체크할때 사용. (0) | 2013.01.15 |
| [jQuery] 40+ Free and Fresh jQuery Plugins and Tutorials (0) | 2013.01.07 |
http://www.coronalabs.com
자바스크립트와 유사한 루아(LuaScript)라는 언어를 사용하는 모바일 최적화된 플랫폼입니다. 물리엔진이 강력해서 앵그리버드를 30분만에 만들죠.
- Adobe AIR로 앱 만들기
http://facebook.com/groups/airapp
- CoronaSDK로 앱 만들기
http://facebook.com/groups/coronasdk
[출처] 자바스크립트 개발자를 유혹하는 CoronaSDK를 아시나요? (웹앱을 만드는 사람들의 모임 (HTML5, CSS3,webapp,jQuery,웹앱)) |작성자 원강민
================================================================================================
SDK Download : https://developer.coronalabs.com/downloads/coronasdk
Corona SDK on Windows Build 2012.971
CoronaSDK-2012.971.msi (73.4 MB)
md5: cb6637d45a7a142f8c8345fd86dbbbae
Includes Corona SDK Simulator, sample apps, and free 30 day trial versions of Corona Project Manager, Kwik, and Spriteloq.
Please note: Due to Apple's restrictions, you cannot build for iOS on Windows.
System Requirements:
Windows XP or later, 1 GHZ processor
Device support:
Android OS 2.2 or greater (ARMv7). Corona-built apps will not install on Android ARMv6 devices.
================================================================
Corona SDK on Mac OS X Build 2012.971
CoronaSDK-2012.971.dmg (85.9 MB)
md5: 11a974b0c1723e42f78a68863724fdf8
Includes Corona SDK Simulator, sample apps, and free 30 day trial versions of Corona Project Manager, Kwik, and Spriteloq.
System Requirements:
Mac OS® X 10.7 or later, Intel Mac
Device support:
iOS 4.5 or greater (includes support for iOS 5 and iOS 6). Android OS 2.2 or greater (ARMv7). Corona-built apps will not install on Android ARMv6 devices.
| 10 jQuery Grids Plugins (0) | 2013.01.16 |
|---|---|
| [APP] < 하이브리드앱 개발방법 > (0) | 2013.01.16 |
| [javascript] input 이 hidden 이거나 포커스 없이 value()가 변경되는 것을 체크할때 사용. (0) | 2013.01.15 |
| [jQuery] 40+ Free and Fresh jQuery Plugins and Tutorials (0) | 2013.01.07 |
| [javascript] 자바스크립트 - http://angularjs.org/ (0) | 2013.01.07 |
아무것도 하지 않는 것,
즉 전혀 관여하지 않는다는 것은
나쁜 팔로워가 되는 것이다. 좋은 리더,
즉 효율적이고 도덕적인 리더를 지지하는 것은
좋은 팔로워가 되는 것이다. 좋은 리더, 즉
효율적이고 도덕적인 리더에 반대하는 것은
나쁜 팔로워가 되는 것이다.
- 바버라 켈러먼의《팔로워십》중에서 -
* 머리를 퉁 치게 하는
'팔로워십'에 대한 새로운 해석입니다.
좋은 리더가 되기 전에 좋은 팔로워가 되어야 합니다.
사람을 이끌고자 하면 사람을 따르는 법부터
익혀야 합니다. 좋은 리더, 좋은 멘토를 만나,
그를 지지하고 존경하고 잘 따르다 보면
언젠가 자신도 좋은 리더의 자리에
올라있는 모습을 발견하게 됩니다.
타인의 마음을 이해하는 일에는 요령이 있다.
누구를 대하든 자신이 아랫사람이 되는 것이다.
그러면 저절로 자세가 겸손해지고,
이로써 상대에게 좋은 인상을 안겨준다.
그리고 상대는 마음을 연다.
-괴테, ‘괴테의 말’에서
‘이해하다’는 뜻의 영어단어에 바로 그런 뜻이 내포되어 있습니다.
즉 타인의 밑(Under)에 서야(Stand)
진정으로 그 사람을 이해 (Understand) 할 수 있다는 것입니다.
늘 역지사지(易地思之)하고 Under Stand 하는 자세만으로도
타인의 마음을 훔칠 수 있으리라 생각해 봅니다.
| 천재에게 고난은 기회의 또 다른 이름이다. (0) | 2013.01.18 |
|---|---|
| 기회는 늘 우리 곁에 있다. (0) | 2013.01.17 |
| 시련이 운명을 결정한다. (0) | 2013.01.15 |
| 불가능이란 무엇인가? (0) | 2013.01.14 |
| 위기에 더욱 빛나는 낙관주의 (0) | 2013.01.11 |
* input 이 hidden 이거나 포커스 없이 value()가 변경되는 것을 체크할때 사용.
.change() 로 확인안될때.
survey('input[name=hidden 객체]', function(){
console.log('changed');
});
function survey(selector, callback) {
var input = $(selector);
var oldvalue = input.val();
setInterval(function(){
if (input.val()!=oldvalue){
oldvalue = input.val();
callback();
}
}, 100);
}
http://stackoverflow.com/questions/12580761/hidden-input-change-event
| [APP] < 하이브리드앱 개발방법 > (0) | 2013.01.16 |
|---|---|
| [javascript] corona SDK (0) | 2013.01.16 |
| [jQuery] 40+ Free and Fresh jQuery Plugins and Tutorials (0) | 2013.01.07 |
| [javascript] 자바스크립트 - http://angularjs.org/ (0) | 2013.01.07 |
| [jQuery] 50 Most Useful jQuery Plugins from 2012 (0) | 2012.12.24 |
