HTML5 Pserspectives
- 많은 플랫폼 (WP, iOS, Android, webOS...), 많은 기기들..
- Google과 Facebook은 많은 Mobile Device와 Platform을 위해 HTML5 기술을 사용
- Web의 재탄생 : Web Pages (HTML4) ==> Web Application (HTML5)
- HTML5 : 일반적으로 Markup + Style + API 를 하나의 기술로 보는 듯함
- HTML5 참고 사이트 : http://slides.html5rocks.com
- HTML5 Reference : Netflix (온라인 비디오 대여) - Web Platform으로 400여종의 Device에 서비스 (게임기 포함)
- Windows 8 : HTML5로 개발지원
- Web Platform = Web Core Engine (Webkit, Gecko..) + Javascript Engine (Squirrelfish, Tracemonkey..)
Web OS : Palm의 webOS (Web App으로 개발해서 설치), Google의 Chrome OS (주로 네트워크 접속형)
- Native App에서 Web App으로 이동 : Javascript 엔진 성능 개선, Device API 지원, Offline 기술, App Store 모델 적용 가능
- WAC : Device API 지원 (BONDI), Network API 지원 (One API, 과금, 인증 등 지원), 아직 WAC 지원 단말 없음
- Web App 예제
PhoneGap
- http://www.phonegap.com/
- Single Code -- PhoneGap --> Deploy to Multiple Platforms
- 2008년 출시, 얼마전 정식버전 1.0 출시
- 가장 많은 Device를 지원 (iOS, Android, Blackberry, webOS, Symbian, Bada, WP7)
- Dreamweaver 5.5 에서 지원 : http://goo.gl/jgzEe
- 오픈소스
- 별도의 개발환경 없음
- Device API 지원
- http://docs.phonegap.com/
- Accelerometer, Camera, Capture, Compass, Connection, Contacts,
- Device, Events, File, Geolocation, Media, Notification, Storage
- Plug-in 지원
- 예제
....
http://phonegap.js // 폰갭 스크립트
<script type="text/javascript">
document.addEventListner("deviceready", onDeviceReady, false); // Device API 사용 가능하면 콜백 호출
function onDeviceReady() { ... } // 콜백함수
function onSuccess(acceleration) {
alert(acceleration.X + "n" + acceleration.Y);
}
function onError() { ... }
navigator.accelermeter.getCurrentAcceleration(onSuccess, onError); // 가속계를 얻어서 콜백함수에 전달
</script> // navigator.accelermeter는 폰갭에서 제공하는 것임.
....
Titanium
- http://www.appcelerator.com/
- IDE 지원함. (디버깅을 유료화 했다가 혼쭐났음)
- javascript는 기본, Ruby/Python/PHP 도 사용가능
- Mobile App (Native로 변환됨), Desktop App (Hybrid 방식으로 래핑) 둘다 개발가능
- 단점 : UI 빌더가 없어서 코딩해야됨.
- Platform API(facebook, twiter 등..)을 자체 API로 제공
- 예제
var window = Titanium.UI.createWindow({
backgroundColor:'red'
});
window.open({fullscreen:true});
.....
Titanium.Accelermeter.addEventListener('update', fuction(e)
{
Ti.API.debug("accelerometer - x:" + e.x + ",y:" + e.y + ",z:" + e.z);
});
Appspresso
- http://appspresso.com/
- 개요
- Eclipse IDE로 개발
- Device API : WAC 2.0 Waikiki API 사용
- Enhanced Native API : 카메라를 예를 들면 Device API 사용시 뷰파인더 영역만 나오지만, 확장 API를 쓰면 폰의 기본 카메라가 뜬다.
- Plug-in : 차후 계속 추가 가능 (오픈소스인 PhoneGap도 추가??)
- On the fly building : 한번만 빌드하고 다음 소스 수정시 빌드없이 갱신
- Javascript framework 포함 : Project의 템플릿을 제공 (Sencha Touch, jQuery Mobile.....)
- Project.xml :
- WAC Waikiki API 2.0 beta : 현재 WAC 단말이 없어서 beta임
- API
- Deviceapis, Devicestatus, Device Interaction, Contact, Accelerometer, Orientation,
- Geolocation, Camera, Messaging, Filesystem, Appspresso, Appspresso Extension
- API 유형
- navigator.geolocation : W3C의 표준 API
- deviceapis.accelerometer : Device API
- ax.util : ax는 appspresso javascript API 의 namespace임.
- ax.ext.android : 확장 API, 표준규격에 근거하여 못하는 기능들을 지원
- Hybrid App으로 최초 개발시 Native보다 공수가 많이 든다. 하지만 최초 개발 이후로는 쉽다.
- 예제 : http://appspresso.com/ko/archives/2686
참고
