블로그 이미지
내게 능력 주시는 자 안에서 내가 모든것을 할수 있느니라 - 빌립보서 4 : 13 - happydong

카테고리

Happydong (1363)
프로그래밍 (156)
MUSIC (16)
인물 (3)
Utility (10)
세미나 소식&내용 (22)
IT뉴스 (18)
운동 (830)
CAFE (10)
Life (282)
Total
Today
Yesterday



1 . 주소 창 숨기기.


 
아이폰 네이티브앱과 같이 전체화면을 사용하는 것과 같이 주소표시줄을 완전히 숨기도록 처리할 수 있다. 이를 설정하기 위해서는 <meta>태그를 추가해주면 된다.

<meta name=”apple-mobile-web-app-capable” content=”yes” />

(**이는 iOS에만 적용이 된다.)

2 . 상태바 색상 변경.

iOS
네이티브앱과 같이 상태바의 색상을 회색(default), 검정(black), 반투명 검정(black-translucent)으로 변경 할 수 있다. 이 기능 또한 <mete>태그로 설정이 가능하다. 그리고 apple-mobile-web-app-capable이름을 같은 메타태그가 지정이 되어 있어야 만이 적용된다.

<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />

 

3. iOS 런치(Launch) 이미지 설정.

iOS
앱 개발할 때 XCode에서 런치이미지를 등록하는 것과 마찬가지로 <link>태그를 이용하여 같은 효과를 줄 수 있다. 이는 apple-touch-startup-image속성을 이용해서 지정하면 된다.

<link rel=”apple-touch-startup-image” href=”/이미지경로/startup.png” />


Startup
이미지는 iOS 해상도 별로 따로 지정해 줄 수도 있다.

<!--iPhone splash screen -->

<link rel=”apple-touch-startup-image” href=”/이미지경로/startup320x460.png” media=”(device-width:320px)” />

 

<!--iPhone (Retina) splash screen -->

<link rel=”apple-touch-startup-image” href=”/이미지경로/startup640x920.png” media=”(device-width:320px) and (-webkit-device-pixel-ratio: 2)” />

 

<!--iPad (portrait) splash screen -->

<link rel=”apple-touch-startup-image” href=”/이미지경로/startup768x1004.png” media=”(device-width:768px) and (orientation: portrait)” />

 

<!--iPad (landscape) splash screen -->

<link rel=”apple-touch-startup-image” href=”/이미지경로/startup748x1024.png” media=”(device-width:768px) and (orientation: landscape)” />

 

<!--iPad (Retina , portrait) splash screen -->

<link rel=”apple-touch-startup-image” href=”/이미지경로/startup1536x2008.png” media=”(device-width:1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)” />

 

<!--iPad (Retina , landscape) splash screen -->

<link rel=”apple-touch-startup-image” href=”/이미지경로/startup1496x2048.png” media=”(device-width:1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)” />

 

 


**1,2,3은 URL직접 입력이 아닌 홈 화면에 등록된 바로가기 아이콘을 터치해서 실행된 경우에만 적용이 된다.



Posted by happydong
, |



Sencha Touch 2 (센차터치)를 이용한 웹앱 개발 - 1. 설치, 생성, 패키징, 빌드(device, simulator)


 출처 : http://blog.saltfactory.net/139


Sencha Touch는 아이폰, 안드로이드, 블랙베리 등 다양한 모바일 디바이스의 웹 앱 개발을 지원하는 자바스크립트 프레임워크이다. 자바스크립트 프레임워크라는 말에 촛점을 맞출 필요가 있는 이유는 Sencha Touch는 거의 대부분의 코드를 Javascript로 생성하기 때문이다. Appspresso(앱스프레소)를 이용해서 하이브리드 앱을 개발하는 방법에 대해서 포스팅하는 가운데 UI javascript 프레임워크 선정할때 후보로 Sencha Touch와 JQuery Mobile, JTouch 를 생각했는데 가장 네이티브 앱에 가까운 다양한 UI 제공과 MVC 프로그래밍을 할 수 있게 설계되어 있는 아키텍처 때문에 Sencha를 HTML5 를 이용한 하이브리드 앱 개발의 UI 프레임워크로 결정했다. (HTML5 기반 앱을 만들기위해서 미리 구입한 Sencha Touch 책이 있기 때문이기도 했는데 현재 판매되고 있는 것은 Sencha Touch 1.x 기반의 책들이다. Sencha Touch 2와 Sencha Touch 1은 구조 자체가 달라졌기 때문에 이전 책을 구입하면 조금 당항할 수도 있다. 물론 Sencha 공식 사이트에서 migration 정보를 문서로 제공하고 있지만 처음부터 Sencha Touch 2로 시작하는 것을 추천하고 싶다.) 하이브리드 앱 개발하는 과정에서 UI 프로그래밍은 필수 조건이다. 그래서 Appspresso에 관련된 포스팅에 연결해서 연재하려고 하다가 Sencha 자체만해도 내용이 방대하고 어렵기 때문에 Sencha라는 카테고리로 분리해서 작성하려고 한다. (참고로 jQuery 정로도 생각하면 정말 이해하는데 어려움을 겪을수 있다.)


[자세히 보기]



[관련 내용]

<참고>

http://docs.sencha.com/touch/2-0/#!/guide/command


<Appsrpesso 튜토리얼 관련 포스트>

http://blog.saltfactory.net/category/Appspresso


<Sencha Touch 2 튜토리얼 관련 포스트>

1. Sencha Touch 2 (센차터치)를 이용한 웹앱 개발 - 1. 설치, 생성, 패키징, 빌드(device, simulator)

2. Sencha Touch 2 (센차터치)를 이용한 웹앱 개발 - 2. 뷰(View) 생성

3. Sencha Touch 2 (센차터치)를 이용한 웹앱 개발 - 3. 뷰(View) 구성 - 컴포넌트 생성,구성

4. Sencha Touch 2 (센차터치)를 이용한 웹앱 개발 - 4. 뷰(View) 구성 - Navigation Components

5. Sencha Touch 2 (센차터치)를 이용한 웹앱 개발 - 5. 뷰(View) 구성 - Store-bound components (리스트 뷰)

6. Sencha Touch 2 (센차터치)를 이용한 웹앱 개발 - 6. 뷰(View) 구성 - Form components (폼 구성)


[샘플 자료] 

http://dev.sencha.com/deploy/touch/examples/production/index.html


[번역 가이드]

http://greatgrape.co.kr/wp-content/uploads/2012/01/발로번역한_센차터치2_가이드.pdf

 

[라이센스 관련]

http://www.sencha.com/products/touch/license/


[Demo]

http://senchatouch.happydong.kr


Posted by happydong
, |