HTML5 Device API 지원 현황 (2014년 4월 기준)

  • W3C를 비롯 웹 진영은 HTML5를 본격적인 OS수준의 App 실행 플랫폼으로 자리매김하려 하지만, 모질라를 제외한 브라우저 벤더(애플, 구글)의 지원이 미미한 상황
  • 애플과 구글은 앱스토어와 구글 플레이 스토어를 중심으로 하는 네이티브 앱 생태계를 지키기 위해 웹 생태계 활성화에 적극적이지 않음
  • Device API를 비롯 HTML5 웹앱 생태계가 활성화되기 위해서는 시간이 필요할 전망

Device API
출처: http://caniuse.com (2014.4.)
Device API          표준화 단계      모바일 브라우저 지원현황
--------------------------------------------------------------------------
File API                 WD        FF 27+, iOS 6+,   Android 4.4+
File Reader API          WD        FF 27+, iOS 6+,   Android 3.0+
Filesystem & Writer API  WD        FF x,   iOS x,    Android x
Geolocation API          CR        FF 27+, iOS 3.2+, Android 2.1+
getUserMedia API         WD        FF 27+, iOS x,    Android x
WebRTC API               WD        FF 27+, iOS x,    Android x (Chrome 29+)
Full Screen API          WD        FF x,   iOS x,    Android x
Web Audio API            WD        FF 27+, iOS 6+,   Android x
Vibration API            WD        FF 27+, iOS x,    Android 4.4+
Battery Status API       CR        FF 27+, iOS x,    Android x



저작자 표시 비영리 변경 금지
신고
Posted by ingee

댓글을 달아 주세요

W3C TPAC 2013 메모

HTML5 2014.03.09 23:21

벌써 한참된, W3C TPAC 2013 메모


게으름이 깊어졌다. 더이상 기억이 유실되기 전에 2013년 중국 심천에서 열렸던 W3C TPAC에 대한 메모를 남긴다.


11.11.월
# System Application WG
: OS와 긴밀히 통합된 Web App을 개발하기 위한 런타임과 API 도출을 목표로 하는 WG
: Native App과 대등한 Web App의 가능성을 논의
: WebOS 에서 전화 calling에 반응하는 app 등 제작 가능
- Service Worker에 대한 논의
  - Page에 종속되지 않은 WebApp
  - 독자적인 life-cycle에 의해 실행
  - system event 처리
  - scheduled wakeup
- Web Manifest에 대한 논의
  - packaged Web App의 메타 정보 서술 방식
  - 크롬, 파이어폭스 등 브라우저 별 독자 구현 방식의 표준화 논의

# 국내 20여명 참여
  ETRI , 달리웍스(주), SKT, 삼성전자 등

11.13.수
# 총회
: 대강당에 모여 W3C의 현안을 공유
- W3C 표준 제정 프로세스를 기존 waterfall 방식에서 agile 방식으로 변환
- Last Call 단계를 폐지 CR 단계에 흡수
- Recomendation 대신 Standard 사용(용어)

# Telco (Web and Mobile WG)
- 차이나모바일, KDDI, 텔레포니카, 하웨이(다수) 참석
- 텔코는 근원적으로 Openness를 필요로 하며 W3C 등 표준화 기구와 협조해야 함

# Web Redesign
- W3C 웹사이트 개편 방안 논의

11.14.목
# Web Crypto
: 표준화가 상당히 진행된 마무리 단계 (LC)

# Web & Mobile
: 모바일 웹앱 관련 표준화 현황과 향후 이슈 논의

# Web Performance Mini WS
: W3C가 현재 집중하고 있는 분야라고 함
: 인텔(중국), NTT(일본), ??(일본) 3개 회사에서 웹 기술 현황 미니 세미나 개최




(이상)

저작자 표시 비영리 변경 금지
신고
Posted by ingee
TAG HTML5, w3c

댓글을 달아 주세요

WebRTC 현황 요약

HTML5 2013.06.21 15:24

WebRTC 현황 요약 (2013.6.21. 기준)


- WebRTC는 브라우저 간의 실시간 통신 서비스(음성통신, 화상회의)를 위한 표준기술

- 안드로이드 단말에서의 WebRTC 지원 현황

- 2013-04-16, WebRTC가 안드로이드 파이어폭스에 구현됨

- 디폴트 설정은 off

- ICS 이전 버전에서는 사용에 문제 있을 수 있음

- 이유는 제조사에 따라 일부 하드웨어의 경우 성능이 부족함

- 그리고 일부 제조사 단말에는 WebRTC를 위해 필요한 안드로이드 API가 부재함

- 그러나, 갤탭 10.1 안드로이드 3.2의 경우 비디오 콜이 정상 수행됨

- 2013-06-03, 크롬 안드로이드 베타 최신 버전에서 WebRTC 지원 시작함

- 2013년 6월 현재, 안드로이드 내장 브라우저는 WebRTC를 지원하지 않음


Reference

WebRTC support on Android

http://www.morbo.org/2013/04/webrtc-support-on-android.html

2013-04-17


You Can Try WebRTC on Chrome for Android Beta Now

http://www.chromestory.com/2013/03/you-can-try-webrtc-on-chrome-for-android-beta-now/

2013-06-03


[인터넷] 웹 브라우저에서의 실시간 통신기술

http://weekly.tta.or.kr/weekly/files/20124031104031_admin.pdf

2012-06-04


(이상)


저작자 표시 비영리 변경 금지
신고
Posted by ingee
TAG HTML5, WebRTC

댓글을 달아 주세요

  1. 김호천 2013.06.23 23:33 신고  댓글주소  수정/삭제  댓글쓰기

    잘 보고 갑니다^^

  2. ajb 2014.11.29 16:41 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 WebRTC에 관심이많은데요
    WebRTC를 이용하면 제가 만약 안드로이드폰으로 말을하면 그 말이 실시간으로 웹에 나올수있게 할수있습니까 ?ㅠ

    • ingee 2015.05.26 17:56 신고  댓글주소  수정/삭제

      예, 가능합니다. 예전엔 스카이프나 카톡 같은 전용 어플리케이션으로만 가능하던 P2P 통신이 웹브라우저라는 범용 어플리케이션으로 가능해진 것이 WebRTC의 가장 큰 의미라고 생각합니다.

JavaScript 빌드 도구(build tool) 동향 요약

스캐폴딩(scaffolding) 기능을 중심으로...



보일러플레이트(boilerplate) 도구

- 보일러플레이트는 코드 재사용을 위해 코드 골격을 미리 구성해 놓은 것


백본 보일러플레이트(backbone boilerplate)

- Backbone.js 프레임워크를 이용하는 프로젝트를 위한 보일러플레이트

- 소스 위치: https://github.com/tbranyen/backbone-boilerplate

- 다른 백본 보일러플레이트도 있지만 이 프로젝트가 제일 좋음 (스스로 좋다고 주장함)

    - requireJS를 잘 지원

    - 라이브러리 소스를 있는 그대로 (변형하지 않고) 사용

    - 빌드 시스템을 구비

    - 샘플 앱을 지원

    - 필요한 골격만 지원

    

스캐폴딩

- 스캐폴딩은 MVC f/w 특히 RoR(루비 온 레일즈)에서 널리 사용되기 시작함

- 어플리케이션 구축에 필요한 뼈대를 자동 생성해주는 기능

- 기본 파일과 디렉토리 구조를 매번 새로 만들어야 하는 번거로움을 제거


grunt

    - grunt는 node.js 기반의 JavaScript 빌드 도구

    - 설치방법: node.js가 설치된 상태에서 npm install 명령을 이용 설치

        - node.js는 이제 JavaScript 실행환경일 뿐 아니라 훌륭한 개발환경

    - package.json 파일에 grunt 실행에 필요한 모듈 서술

        - 프로젝트 root에 두며 소스 버전 관리 대상

        - npm install 명령을 실행하면 필요한 모듈이 자동 설치됨 ( 다시 말하지만, node.js는 이제 훌륭한 개발환경! )

        - npm init 명령으로 기본적인 package.json 파일을 생성함

    - gruntfile.js 파일에 일괄 처리할 작업을 정의

        - make 시스템의 makefile에 해당

        - grunt 0.3.x 버전에서는 gurnt.js로 통용됨 

        - grunt 0.4.x 버전에서 gruntfile.js로 이름 변경됨

        - 프로젝트 root에 두며 소스 버전 관리 대상

        - grunt plugin이 package.json에 들어 있고, 

            npm install 명령으로 설치됐다면, 

            gruntfile로 쉽게 실행시킬 수 있음

        - pkg 섹션

            - pakcage.json을 가리키는 역할

            - package.json에는 프로젝트 관련 메타데이터가 정의됨

            - pkg.name 같은 형태로 메타데이터 참조가 가능

        - meta 섹션

            - 내부 속성으로 banner만 있음

            - 합치거나 축약할 때, js 파일 상단에 자동으로 넣는 주석 지정

        - lint 섹션

            - JSHint를 이용 JavaScript 파일 테스트

            - 테스트할 파일 목록을 자유롭게 grouping하여 지정 가능

        - qunit 섹션

            - jQuery의 테스트 프레임워크인 QUnit을 이용 테스트 수행할 대상 파일을 지정

            - PhantomJS가 설치되어 있어야 함

            - lint 섹션처럼 테스트할 파일 목록을 자유롭게 지정 가능

        - concat/ min 섹션

            - 파일을 합치거나(concat), 공백을 제거해서 축약(min)시키는 작업을 실행

        - watch 섹션

            - 지정된 파일이 변경될 경우, 지정된 작업을 수행

        - jshint 섹션

            - lint 섹션을 실행할 때, JSHint 툴에 전달할 옵션 정의

            - 실행 섹션이 아님

        - uglify

            - min 섹션을 실행할 때, UglifyJS 툴에 전달할 옵션 정의

            - 실행 섹션이 아님


grunt-bbb

    - grunt-bbb는 grunt의 플러그인

    - bbb는 Backbone Boilerplate Build를 뜻함

    - npm install -g bbb 명령으로 설치 ( 다시 말해 node.js는 이제 정말 훌륭한 개발환경! )

    - 사용 명령어

        - init (bbb)

            - bare boilerplate 프로젝트 생성

        - init:module (bbb)

            - 새로운 모듈 생성

            - model, collection, view를 통합하는 module 생성

            - js, css, html 생성

        - server (bbb)

            - 웹서버를 띄워 프로젝트를 실행


Reference

- http://blog.outsider.ne.kr/892

- https://github.com/tbranyen/backbone-boilerplate/wiki/Getting-started-overview

- https://github.com/tbranyen/backbone-boilerplate/wiki/Installation

- http://gruntjs.com/

- https://github.com/backbone-boilerplate/grunt-bbb


(이상)

저작자 표시 비영리 변경 금지
신고
Posted by ingee

댓글을 달아 주세요

http://www.w3.org/Mobile/mobile-web-app-state/

2013년 2월


0. 개요

- 현재 웹기술이 full-featured 모바일 앱을 만들만큼 충분히 무르익음

- W3C는 웹앱 개발 기술을 확장하기 위해 노력하고 있으며 관련 교육 링크도 운영하고 있음 (http://www.w3devcampus.com/writing-great-web-applications-for-mobile/)


1. Graphics

- SVG : Scalable 벡터 그래픽 표준

- Canvas : 2D programmatic API 표준

- 폰트 : WOFF(Web Open Font Format) 표준

- Fullscreen API, Screen Orientation API 표준

* WebGL(3D graphic API)은 W3C 밖에서 표준화 작업 진행 중(Khronos Group)

* 표준화 안정 단계, 표준 적용 활성화 단계


2. Multimedia

- <video>, <audio> 태그 : 과거 image처럼 멀티미디어 요소를 Web의 1st class citizen으로 취급

- Encrypted Media Extensions : DRM 컨텐츠 재생에 관한 표준

- Pick Media Intent, Networked Service Discovery API : DLNA 컨텐트에 대한 접근 표준

- HTML Media Capture : 카메라, 마이크(녹음) 등에 의한 captured 컨텐트에 대한 접근 표준

- Web Real-Time Communication WG 활동 중

- Web Audio API : 오디오 컨텐트에 대한 분석, 수정, 합성을 위한 API 표준

- W3C Web and TV Interest Group : 모바일 Web을 통해 TV 시청 경험을 풍요롭게 하는 연구 진행 중

* 표준화 초기 단계, 표준 적용 초기 단계(모바일에서 활용 제한적)


3. Device Adaptation

- Device Description Repository API : 다양한 장치 특성(스크린 크기, 입력 장치 특성, 미디어 기록/재생 특성 등)을 조회할 수 있는 server-side API 표준

- Media Capture Streams API : 카메라, 마이크 등의 media capture 장치 제어 표준

- CSS Media Query : 반응형 layout 지원 표준

- Adaptive images(picture 태그, srcset 속성) : 화면 크기에 최적인 이미지를 다운로드 하도록 지원

* 표준화 초기 단계, 표준 적용 초기 단계


4. Forms

* W3C는 모바일 기기의 제한된 입력 기능을 보완하기 위한 form 구성 요소를 지원하기 위해 노력 중

- date and time <input type="date">: OS가 제공하는 native calendar 컨트롤 사용 지원

- <input type="email">, <input type="tel">, <input type="url"> : 데이터 형태에 따른 키보드 지원

* 표준화 안정 단계, 표준 적용 초기 단계


5. User interactions

- Pointer Events : 터치 기기 및 마우스 등의 전통적 포인터 기기의 이벤트 관련 표준

- vibration API : 햅틱 피드백(진동) 관련 표준

- IndieUI Events : 기기별 specific 이벤트를 한 레벨 추상화한 이벤트 표준("click", "key press", "touch" 이벤트를 대신하는 "undo", "next page" 이벤트)

- Web Notifications : 웹을 통한 사용자 notification 표준

- Speech API Community Group : 음성인식 기반 사용자 인터랙션 표준 논의 중

- Mobile Accessibility, WAI-ARIA : 장애인을 위한 웹 접근성 관련 표준 논의 중

* 표준화 초기 단계, 표준 적용 초기 단계


6. Data storage

- Web Storage : 브라우저를 통한 간단한 데이터 저장/관리 API 표준

- File Reader API, File Writer API, FileSystems API : 정교한 파일 관리 API 표준

- Indexed Database API : 로컬 DB 관리 API 표준

- Quota Management API : 웹앱을 위한 로컬 저장공간 확보 관련 API 표준

- Web Cryptography API : 데이터 암호화 관련 API 표준

* 표준화 초기 단계, 표준 적용 초기 단계


7. Personal Information Management

- Contacts API, Calendar API : 주소록, 일정 정보 관리 API 표준

* 관련 API 표준이 Web Intents 기반 API 형태로 대치되고 있는 중

* 표준화 아주 초기 단계, 표준 적용 전무


8. Sensors and hardware integration

- Geolocation API : 센서를 통해 기기의 현재 위치를 알아내는 API 표준(GPS, WiFi 네트웍, Cell 네트웍 등의 방법 등 중 가능한 방법을 이용)

- DeviceOrientation Event Specification : 센서를 통해 기기의 가로/세로 상태를 알아내는 API 표준

- Battery Status, Proximity sensors, Ambient Light Events 등 표준 stable 단계

- NFC WG : NFC 관련 표준 논의 중

* 표준화 안정 단계, 표준 적용 초기 단계


9. Network

- XMLHttpRequest : AJAX API 표준

- Cross-Origin Resource Sharing : 현재 웹 페이지와 다른 도메인의 자원을 공유하기 위한 표준

- Push API : 웹앱이 (브라우저에 활성화되지 않은 상태에서도) 서버로부터 전달되는 메시지를 수신하기 위한 표준

- WebSocket API : 저비용 양방향 통신 지원 표준

- Web Real-Time Communications : P2P 데이터 통신 지원 표준

- network-information API : 현재 이용하고 있는 통신망의 bandwidth 등의 정보를 파악하기 위한 표준

* 표준화 안정 단계, 일부 표준 적용 단계


10. Communication and Discovery

- Messaging API : sms://, mms://, mailto:// 등 URI 스킴 기반 메시지 전달 표준, Web Intents 방식으로 재정의될 예정

- Networked Service Discovery API : DLNA등 로컬 네트웍 서비스와 웹앱 사이의 seamless 협업을 위한 표준

- Web Real-Time Communications WG : 커뮤니케이션 관련 표준을 주도적으로 논의 중

* 표준화 초기 단계, 표준 적용 초기 단계


11. Packaging

* 웹앱을 오프라인 상태에서 이용하기 위한 표준과 웹앱을 app store를 통해 유통할 수 있는 포맷으로 만들기 위한 표준

- ApplicationCache : 웹앱을 오프라인 상태에서도 이용하기 위한 표준

- W3C Widgets : 웹앱을 ZIP 형태로 패키징하기 위한 표준

* 표준화 안정 단계, 일부 표준 적용 단계


12. Performance & Optimization

- Web Performance WG : Navigation Timing, Resource Timing, Performance Timeline, User Timing 등 웹앱 성능 최적화 도구 개발 중

- Page Visibility API : 페이지가 보이지 않는 시점에서 네트웍 자원 사용을 억제하기 위한 표준

- battery API : 배터리 잔량에 따라 자원 활용을 억제하기 위한 표준

- Web Workers : 리소스를 많이 소비하는 작업을 백그라운드 스레드로 처리하기 위한 표준

* 표준화 안정 단계, 표준 적용 초기 단계


(이상)

저작자 표시 비영리 변경 금지
신고
Posted by ingee

댓글을 달아 주세요

코너스톤 WDK (Cornerstone WDK)


SKT가 만든 코너스톤 WDK (Web Dev. Kit)를 소개합니다.

코너스톤 WDK의 핵심은 코너스톤 프레임웍 (이후 f/w)입니다. 코너스톤 f/w을 만들면서 염두에 두었던 생각들을 요약합니다. 상세한 내용은 http://cornerstone.sktelecom.com 에서 확인할 수 있습니다.


1. 힘 빼고 만들었습니다.

SKT가 처음부터 끝까지 세상을 새로 만들겠다는 못된(?) 욕심을 버리고 접근했습니다. 거인들의 업적을 존중하면서 그 어깨 위에 작은 노력을 더해 세상에 기여하겠다는 철학으로 접근했습니다. 개발자들에게 인기 높은 검증된 오픈소스 f/w들을 기반으로 코너스톤 f/w을 개발했습니다. 이미 익숙한 f/w들을 근간으로 하고 있기 때문에 개발자 입장에서는 학습 비용이 적을 뿐 아니라, 코너스톤 f/w을 쓰기 위해 학습한 내용을 다른 f/w들을 개별적으로 쓸 때도 활용할 수 있을 것입니다.


2. Modern Web App 개발의 최신 동향을 담았습니다.

Modern Web App 개발의 최신 기술들을 지원합니다. 코너스톤 f/w은 UI f/w 뿐만 아니라 모듈화, MVC (Model-View-Control 패턴), RWD (Responsive Web Design) 등 Javascript 프로그래밍의 핵심 동향을 모두 포함하고 있는 full featured Javascript f/w 입니다. 그리고 코너스톤 f/w은 UI f/w과 MVC f/w 사이의 정합성을 맞추는데 상당한 노력을 기울였습니다. 코너스톤 f/w을 이용하면 개별 f/w들을 따로 선택하고 이들 사이에 정합성을 맞추는데 소요되는 비용을 줄일 수 있습니다.


3. 모바일에서의 성능 보장을 위해 노력했습니다.

코너스톤 개발을 시작할 당시, 세상에 공개된 거의 모든 모바일 UI f/w들을 검토하고 성능을 비교했습니다. 코너스톤 f/w은 트위터 Bootstrap을 UI f/w의 근간으로 선택했습니다. Bootstrap의 간결함을 유지하면서 Bootstrap에 모자란 모바일 Widget과 기능을 추가했습니다. 조심스럽지만, 현재 시점에서 가장 빠르고 안정적인 모바일 UI f/w이라고 자신합니다.


4. 한글 문서를 제공합니다.

정말 공들여 만든 한글 문서를 제공합니다. f/w을 만들면서 배우고 느낀 내용을 모두 담으려고 노력했습니다. 한국의 SW 분야가 성공하려면 제대로된 한글 개발문서가 축적되고 공유되어야 한다고 생각합니다. 코너스톤 개발문서가 조그만 기여를 할 수 있으면 좋겠습니다. 코너스톤 f/w 개발문서는 정적으로 고정된 문서가 아니라 샘플코드를 작성하고 결과를 확인할 수 있는 살아있는 문서입니다 (http://cornerstone.sktelecom.com/livedoc/).


운 좋게도 훌륭한 개발자 분들을 만나서 신나게 개발할 수 있었습니다. 하지만 아직은 미약한 시작입니다. 개발자 분들의 소중한 의견을 듣고 싶습니다. 코너스톤 블로그에 의견 남겨 주세요.


저작자 표시 비영리 변경 금지
신고
Posted by ingee

댓글을 달아 주세요

  1. incago 2013.01.08 11:42 신고  댓글주소  수정/삭제  댓글쓰기

    :-)
    감사합니다.

  2. iolo 2013.01.11 13:58 신고  댓글주소  수정/삭제  댓글쓰기

    문서 (livedoc)... 지금 404 에러나네요~

    • ingee 2013.01.11 17:45 신고  댓글주소  수정/삭제

      엇... 감사합니다. 잠시 서버가 졸았나봅니다. -_-;;
      지금은 정상 동작합니다.

    • ingee 2013.02.22 14:06 신고  댓글주소  수정/삭제

      현재 코너스톤 웹페이지 서비스를 위해 개발서버를 사용하고 있어서 안정성에 문제가 있습니다. 이번달 안에 안정적인 운영서버로 옮길 예정입니다. 항상 주시하고 있지만, 서비스 장애를 일러주시면 최선을 다해 신속히 복구하겠습니다. 감사합니다.

  3. ingee 2013.01.25 07:22 신고  댓글주소  수정/삭제  댓글쓰기

    코너스톤 블로그에 새글이 올라왔습니다. 모바일웹 현황에 대한 짤막한 정리입니다.
    http://cornerstonewdk.tumblr.com/post/41111296422/1

  4. Donochi 2013.02.13 10:49 신고  댓글주소  수정/삭제  댓글쓰기

    뉴스보고 검색하다가 들어와서 글 남깁니다..

    일단 코너스톤 블로그 검색하고 있습니다만,
    Web UI 신봉자에서..좌절을 경험하고, Native 개발에 몰두하다가...
    다시 이런 시도를 접하니....마음이 갈대처럼 움직이네요..ㅋㅋㅋ

    코너스톤을 개발 테스트 해보고..지속적으로 피드백 올리겠습니다 ^^

    • ingee 2013.02.13 18:55 신고  댓글주소  수정/삭제

      단말기의 성능과 브라우저의 기능이 높아진 지금에야 비로서 HTML5을 이용한 Write Once, Run Everywhere의 꿈이 실현 가능하게 된 것 아닌가 싶습니다. 지금도 다양한 현실적인 어려움이 있습니다. 코너스톤 홈페이지(http://cornerstone.sktelecom.com/)와 블로그(http://cornerstonewdk.tumblr.com/)에 의견 남겨주시면 코너스톤WDK를 개선해서 그런 어려움을 극복하는데 작은 기여를 보태겠습니다. 감사합니다.

  5. Donochi 2013.02.14 00:30 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요.

    Framework 을 다운받고, 정말 간단하게 확인해 보려했습니다만,
    시작부터 걸리네요..

    script/main.js 를 샘플에 있는데로, 작성했지만,
    uncaught TypeError ; Cannot call method 'launch' of undefined 가 발생하는 상황입니다.

    여기저기 찾아봤지만, 동작하는 Sample Application 을 찾을 수도 없었습니다.

    가능하다면, Sample 제공해 주실수 있으신지요?
    hue.dongho.park@gmail.com .. 감사합니다.

    • ingee 2013.02.14 14:51 신고  댓글주소  수정/삭제

      http://cornerstone.sktelecom.com/livedoc/2_03_module_usage.html 페이지가 도움될 겁니다. 코너스톤의 launcher.js를 사용할 경우, <script> 태그의 data-target 속성에 지정한 js 파일은 launch 라는 메소드가 정의된 객체를 리턴해야 합니다.

      http://cornerstone.sktelecom.com/livedoc 페이지(코너스톤 live-doc)는 한번 정독할만한 가치가 있습니다. 훌륭한 front-end 개발자가 공들여 만든 문서입니다.

      그리고, 문서 말미의 "종합테스트/ Cornerstone Framework Test" 링크에서 여러가지 테스트 코드를 확인하실 수 있습니다.
      코너스톤 블로그에 의견 주시면 좀 더 따끈한 답변 얻으실 수 있으며, 코너스톤에 관심있는 개발자들과 이슈를 공유하실 수 있습니다.

      코너스톤에 대한 관심에 깊이 감사드립니다.

  6. muk 2013.02.14 11:24 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요.어제 코너스톤을 웹을 통해서 알게되고 살펴보았는데..ㅎ
    위분 글처럼 마음이 갈대처럼 움직이네요.

    한가지 질문이 있는데요.

    폰갭을 사용하면서 코너스톤에서 제공하는 wdget이나 util을 사용할 수가 있는지요.
    예를 들어 화면 전환이나 에디터 같은 기능을.
    조언 좀 부탁드립니다.
    yeungholee@gmail.com

    • ingee 2013.02.14 14:53 신고  댓글주소  수정/삭제

      예, 코너스톤 프레임워크만 따로 사용하는 것이 가능합니다.

      참고로 코너스톤 런타임이 폰갭과 개념상 동일한 솔루션입니다. 개발 당사자에게 "한국어"로 문의 가능한 코너스톤 런타임을 시도해보시면 어떠실지요... :)

      깊이 감사 드립니다.

  7. jh 2013.02.21 16:04 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요.. 저도 기사를 통해서 코너스톤을 접하고, 살펴보고있는중인데요.

    기사 내용중에...

    저만으로 웹앱 개발에 필요한 모든 기능을 이용할 수 있는 클라우드 기반의 `저작도구'로 구성됐다.

    이런내용이 있는데. 아직 저작도구는 오픈되지 않은것 같아서 문의드립니다.
    저작도구는 언제쯤 오픈할 계획이세요??

    폰갭으로 어플리케이션을 개발해 본적이 있는데, 폰갭은 저작도구가 없어서 안드로이드 iOS따로따로 작업해야되는게 아무래도 불편하더라고요~.

    • ingee 2013.02.22 14:00 신고  댓글주소  수정/삭제

      저작도구는 내부적으로 먼저 쓰면서 완성도를 높이고 있습니다.
      그리고, 이번에 만든 개발도구는 기사에서 소개하는 것처럼 웹브라우저만 있으면 접속해서 이용할 수 있는 클라우드 기반의 개발도구입니다. 서비스 제공을 위해서는 운영 리소스가 들어가기 때문에, 일반에게 제공할 지 여부와 정책을 결정하기까지 조금 시간이 걸릴 것 같습니다.
      깊이 감사 드립니다.

  8. mhkim 2013.02.26 09:07 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요~ 하이브리드 개발을 8개월정도 했는데요..
    기존에 사용한 프레임워크보다 속도 개선 및 자바스크립트 가이드가 개발자 입장에서
    무척이나 마음에 드네요.
    해당 프레임워크를 사용해서 간단한 하이브리드 앱개발을 진행할려고 하는데요.
    와꾸를 잡을 수 있는, SKT에서 선행으로 진행되었던 샘플 코드가 있으면 해서요.
    아래 주소에 접속이 되질 않아 샘플코드를 확인을 못해보았습니다.
    http://cornerstone.sktelecom.com/livedoc/sample/spechtmls.zip

    더 발전시킬수 있는 코너스톤이 되길 바라며, 공유 부탁드립니다.

    참고로 http://cornerstone.sktelecom.com/livedoc 는 정독한 상태이며,
    현재 기존의 프레임워크와 코너스톤을 비교분석중입니다.
    비교 분석이 끝나는대로 공유 해 드리겠습니다~

  9. mhkim 2013.02.27 17:30 신고  댓글주소  수정/삭제  댓글쓰기

    샘플코드 다운 잘 되네요~ 감사^^
    livedoc 중에서 widget에 제공된 내용중이에요.
    http://cornerstone.sktelecom.com/livedoc/4_4_05_chart.html

    참조하고 있는 css, js 중에 cornerstone-framework-0.9.1에

    etc.css가 없어서 chart가 안나오는건지
    ../sample-data/chart-bar.json를
    http://cornerstone.sktelecom.com/livedoc/sample-data/chart-bar.json로 바꿔서 안나오는지
    정확히 확인 안되서요..

  10. mhkim 2013.02.27 17:39 신고  댓글주소  수정/삭제  댓글쓰기

    XMLHttpRequest cannot load http://cornerstone.sktelecom.com/livedoc/sample-data/chart-line.json. Origin null is not allowed by Access-Control-Allow-Origin. Chart.html:1
    getJSON Error
    Object {readyState: 0, setRequestHeader: function, getAllResponseHeaders: function, getResponseHeader: function, overrideMimeType: function…}
    widget-chart.js:7
    에러가 나오네요.. json 파일로 확인했는데.. 무슨 문제일까요?

    • ingee 2013.02.28 08:09 신고  댓글주소  수정/삭제

      제가 좋아하는 개발팀장님의 답변을 옮깁니다.
      ... 차트 위젯이 데이터를 가져오기 위해 Ajax 요청을 보내는데, 이때 SOP(Same Origin Policy) 때문에 다른 도메인으로는 요청을 보낼 수 없습니다. 데이터 URL도 웹앱과 같은 도메인에 두어야 합니다...
      도움 되면 좋겠습니다.

  11. mhkim 2013.02.28 10:20 신고  댓글주소  수정/삭제  댓글쓰기

    네.. SOP때문에 Corss Domain 통신이 안되는걸 깜빡했네요.
    해당 부분을 내부 URL로 바꾸고 확인해보았는데요.
    IE에서는 정상인데 반해 Chrome에서는 여전히 같은 에러가 발생되네요.
    더불어 같은 Chrome브라우저를 사용하는 Android도 마찬가지구요.

    http://cornerstone.sktelecom.com/livedoc/4_4_05_chart.html 해당 주소는
    Chrome브라우저에서 표현이 잘되는걸 확인인했는데요..
    그게 좀 이상해서요.

    정리하면,
    Chart.html 실행시 -> IE 정상동작
    -> Chrome 비정상

    코너스톤 chart page는 -> IE와 Chrome 모두 정상동작

    조언좀 부탁드립니다

    답변주셔서 감사합니다~

    • hjson 2013.03.04 18:55 신고  댓글주소  수정/삭제

      혹시 file:// 주소를 사용하시나요? 그렇다면 그것도 역시 SOP 정책에 위배됩니다.
      특히 크롬이 SOP가 더 엄격해서 file:// 주소로 ajax 요청을 보내는걸 막고 있습니다.
      로컬에서 돌리시더라도 http://localhost/ 등의 주소를 사용해 보시기 바랍니다.

  12. eunggk 2013.03.04 21:59 신고  댓글주소  수정/삭제  댓글쓰기

    혹시 node.js를 사용하실수 있는 환경이면 간단하게 개발용 웹 서버를 구성해주는
    locally를 추천합니다.

    npm -g install를 쉘에서 입력하면 설치가 됩니다.
    아래 링크를 확인해 보세요

    https://github.com/rhiokim/locally

    참고로
    또 코너스톤 WDK 깃허브 저장소 이슈에 글 남겨주셔도
    코너스톤 개발진들이 직접 답변/확인이 가능하니 그쪽으로 문의주셔도 됩니다. : )

  13. mhkim 2013.03.07 10:29 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요~
    코너스톤 깃허브 저장소에 이슈를 남겼는데..
    답변이 없어서요 ㅠ

    다른 문의사항이구요.
    1. http://cornerstone.sktelecom.com/livedoc/sample/iOS_plugin_sample.zip 해당 링크가 죽어있습니다.
    2. IOS plugin Test시 "Method 'getConnectionInfo:withDict:' defined in Plugin 'NetworkStatus'"
    해당 에러가 발생됩니다.
    공유하신 IOS Runtime > SRT_Tempate>Pluins에는 RTPageLoading.m, RTPageLoading.h 밖에 없는데요
    SRT.plist > Plugins 에 명시된 항목은 모두 SRT_Tempate>Pluins 에 존재 해야지 않나요??
    3. 간단한 교육을 받을 수 있는지 문의 드립니다. (어디든 가겠습니다.)
    회사대 회사로 관련 서류가 필요할 경우 메일 부탁드립니다 (kaudgnsl@naver.com)
    초기 개발환경 셋팅 질의 응답시간으로 2~3시간 이내여도 괜찮습니다.
    매번 여쭤보기 너무 죄송해서요 ㅠㅠ



  14. mhkim 2013.03.07 10:48 신고  댓글주소  수정/삭제  댓글쓰기

    문의사항 2번에 대해서요..
    확인해보니 NetworkStatus 는 RTConnection에 매칭되어 SRT.framwork에 존재하네요..
    혹시 Simulator로 확인을 해서 안되는건지해서요..
    Android는 plugin테스트가 단말로 잘됐었거든요.

    감사합니다.

    • ingee 2013.03.08 19:21 신고  댓글주소  수정/삭제

      안녕하세요. 제가 신뢰하는 런타임 개발자 분의 답변을 아래와 같이 옮깁니다. 도움 되면 기쁘겠습니다. 감사합니다.
      ---
      1.
      IOS plugin Test시 "Method 'getConnectionInfo:withDict:' defined in Plugin 'NetworkStatus'" 해당 에러가 발생됩니다.
      ==>
      위의 로그는 에러가 아닙니다. 어떤 API가 호출되었는지 확인하기 위한 로그입니다.
      'NetworkStatus' 는 코너스톤이 첫 페이지(index.html) 로드시에 현재 네트워크 상태를 알기 위하여 'getConnectionInfo 를 호출하기 위한 모듈입니다.
      이에 대한 로그를 에러로 오해하신 것 같습니다.

      2013-03-08 10:39:45.096 SRT_Template[4721:16a03] COMMAND: Method 'getConnectionInfo:withDict:' defined in Plugin 'NetworkStatus'

      ---
      2.
      공유하신 IOS Runtime > SRT_Tempate>Pluins에는 RTPageLoading.m, RTPageLoading.h 밖에 없는데요
      SRT.plist > Plugins 에 명시된 항목은 모두 SRT_Tempate>Pluins 에 존재 해야지 않나요??
      ==>
      존재할 필요가 없습니다. SRT.plist > Plugins 에 명시된 항목들은 이미 SRT_Template>SRT.framework에 라이브러리 형태로
      포함되어 있기 때문에 웹앱 개발자가 이를 포함할 필요가 없습니다. Android에서의 .jar를 내포하고 있는 것 과 같은 형태 입니다.

      ---
      3.
      문의사항 2번에 대해서요..
      확인해보니 NetworkStatus 는 RTConnection에 매칭되어 SRT.framwork에 존재하네요..
      혹시 Simulator로 확인을 해서 안되는건지해서요..
      Android는 plugin테스트가 단말로 잘됐었거든요.
      ==>
      맞습니다. NetworkStatus는 이미 빌드된 상태로 SRT.framwork에 존재하고 있습니다. 개발자는 이를 이용할 뿐입니다.
      첫 답변과 연계되어 이는 에러 메세지가 아니며 Simulator에서도 Plugin Test가 정상적으로 동작이 되고 있습니다.

      (이상입니다.)

  15. ingee 2013.03.08 19:25 신고  댓글주소  수정/삭제  댓글쓰기

    코너스톤에 대한 관심과 댓글에 깊이 감사 드립니다.
    이 블로그에 계속 질문 주셔도 무방하나, 가급적 github 이슈 링크를 이용해주시면 다른 개발자 분들과 기술이슈를 공유하는데 도움될 것 같습니다.

    프레임워크 이슈는 https://github.com/cornerstonewdk/cornerstone-framework/issues 에,
    런타임 이슈는 https://github.com/cornerstonewdk/cornerstone-runtime/issues 에 올려주시면 코너스톤 개발팀이 적극 대응하겠습니다.

    감사합니다.

  16. KJ 2013.09.15 23:36 신고  댓글주소  수정/삭제  댓글쓰기

    하이브리드앱과 HTML5기반웹앱이 주목받고있는 시점에서 상당히 발전가능성이 높아 보이는데요 혹시 해외개발자나 글로벌화를 위한 내부적으로 개발킷과 문서의 영문화 계획이 있으신지요?
    그리고 문서에 처음부터 완성까지 따라해보기 같은 가이드와 그리고 샘플프로젝트들이 아직은 좀 부족해보입니다:)

    • ingee 2013.09.16 17:14 신고  댓글주소  수정/삭제

      좋은 의견 감사합니다.
      작년에 이어 올해도 코너스톤WDK를 발전시키고 있습니다. 글로벌 패키징은 좀 더 동력이 모여야 가능할 것 같습니다. 하지만, 올해 힘을 주어 추진하는 과제 중 하나가 튜토리얼 성격의 Programmer's Guide를 웹 사이트 형태로 오픈하는 것입니다.
      이달 말(9.26) SKT의 T오픈랩 이름으로 하루짜리 포럼을 개최하는데 ( http://cornerstone.sktelecom.com/event/#lab ), 그 전에 튜토리얼 웹사이트도 오픈할 예정입니다.
      기대하셔도 좋습니다. ^^

  17. jake lee 2013.10.01 23:34 신고  댓글주소  수정/삭제  댓글쓰기

    혹시 개발과 관련은 없을지 모르겠는데 skt에서 cornerstone을 개발해서 어떤 이익을 볼 수 있는건가요? 기업에서 자선 사업으로 하지는 않았을거 같고 왜 개발했을까가 갑자기 궁금해져서 문의해봅니다

    • ingee 2013.10.02 22:02 신고  댓글주소  수정/삭제

      SKT는 다양한 내부 서비스를 필요로하고 수시로 개발합니다. 스마트폰이 보급되면서 어떤 서비스를 네이티브 앱으로만 개발하기에는 너무 큰 비용이 들게 됐습니다. 그래서 제가 속한 팀에서 HTML5 웹앱 확산을 통해 서비스 개발 비용 절감과 품질 향상을 사명으로 삼아 노력하게 됐습니다. 코너스톤은 그런 노력 중에 도출된 개발도구입니다.
      SKT는 코너스톤으로 수익을 얻을 생각이 없습니다. 자선 사업은 아니고 HTML5와 웹앱 생태계가 확산되는 것이 회사의 비젼과 합치한다고 생각하기 때문입니다.

  18. 단비를내려주시옵소서 2013.10.14 13:13 신고  댓글주소  수정/삭제  댓글쓰기

    학생입니다 코너스톤 안드로이드 런타임 헬로 월드 찍어보고자 주말 삽질 했으나 실패해서 도움을얻고자 합니다 샘플코드는 아주 잘돌아갑니다 문제는 새 프로젝트 생성시 앱이 첫화면부터죽습니다 runtime.jar 임포트 잘되있습니다 샘플코드랑 완전 같습니다 오타오류없습니다 ㅠㅠ 미치겠습니다 helloworld를 보고싶습니다 왜그런건지잠도 안옵니다 탈진상태입니다 미치겠습니다 로그는 꼭 jar가 임포트 안된것처럼 webkit에러를 물고갑니다

  19. Ren 2013.10.15 00:35 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요. ^^ 좋은 기회로 코너스톤을 알게되어 이곳까지 오게 되었는데요.
    가능할거라 생각하지만 혹시 몰라 여쭈어 보는것이 코너스톤을 이용하면 게임류 즉, 크로스 플랫폼을 지원받으면서 html5 게임을 만들 수 있게 되는건가요..? 웹+안드로이드+ios
    좋은 정보들 공유해주셔서 감사합니다. ^^

    • ingee 2013.10.15 09:45 신고  댓글주소  수정/삭제

      가능합니다. 사실 "코너스톤으로 가능하다"는 어폐가 있고 "HTML5 또는 WEB으로 가능하다"가 정확할 것 같습니다.

      코너스톤 과제를 진행하면서 브라우저에서 실행되는 네트웍 전투 테트리스 게임을 만들었습니다. iOS와 Android 브라우저 위에서 충분한 게임성을 확인했습니다. 다만, 게임을 만들 때 다음을 고려해서 기획하면 좋을 것 같습니다.

      - WEB은 Native APP에 비해 다소 성능이 떨어집니다. WEB으로 가능한 게임을 기획해야 합니다
      - 코너스톤 프레임웍에 포함된 Backbone.js가 제공하는 MVC 패턴을 활용하면 소스코드를 구조적으로 관리할 수 있습니다.
      - 브라우저만으로 충분하다면 코너스톤 프레임웍만 사용해도 좋으나, 브라우저에서 접근 불가능한 자원(센서들)을 사용해야 한다면 코너스톤 런타임을 함께 사용하셔야 합니다.

      감사합니다.

게임 Cut The Rope의 HTML5 버전이 공개됐다. IE를 비롯 Safari, Chrome, Firefox 등 PC 브라우저는 물론, iPhone, iPad, Android Phone, Android Tablet 등 모바일 기기의 브라우저에서도 실행된다. 
이 개발자들.. 멋지게도 귀중한 경험을 후기로 남겼다. 가치 높은 글이라 줄거리를 요약하여 옮겨온다.

게임:  http://www.cuttherope.ie/ 
원본:  http://www.cuttherope.ie/dev/ 

+ 'Cut The Rope' 게임의 Objective-C 코드를 html5 코드로 포팅하기로 결정
+ 쉽지 않은 도전
- 라이브러리를 제외하고 15,000 라인에 이르는 방대한 규모의 프로그램
- 물리엔진, 애니메이션엔진, 드로잉엔진이 타이트하게 결합되어 최적화되어 있는 상태

+ JavaScript에 희망을 검
- 초기의 JavaScript는 스크립트 실행을 위한 느린 언어
- 현재의 JavaScript는 JIT를 이용 native에 근접한 실행속도를 내는 언어

+ JavaScript 프로그래밍을 위해서는 컴파일 언어를 사용할 때와는 다른 mindset이 필요
+ JavaScript는 struct를 미지원
- JavaScript의 Object를 struct 대용으로 사용할 경우 여러가지 어려움을 겪게됨
- JavaScript에서 Object를 함수의 인자로 전달하면 call by reference됨.
- 따라서 callee함수에서 Object 인자를 수정하면 caller에 영향을 줌
- 그리고 JavaScript에서 Object 생성은 무척 비싼 연산
- 그래서 함수 호출시 Object 전체를 파라메터로 넘기는 대신 필요한 field만 넘기는 방법을 선택함
+ JavaScript의 OO(Object Oriented) 개념은 전통적인 OO 언어와 다름
- JavaScript는 prototype에 기반한 OO 개념을 제공하나 이는 Objective-C와 이질적
- 그래서 JavaScript에 class 기반 OO를 가능하게 하는John Ressing (of jQuery)의 공개 라이브러리를 이용하기로 함

+ Objective-C 코드 말고도 OpenGL을 HTML5 Canvas API로 포팅해야 했음
- 이 작업은 순조롭게 진행됐음
- HTML5 Canvas가 하드웨어 가속을 지원하는 브라우저 위에서 놀랄만큼 빠른 rendering 성능을 보였음
- 일부 기능 (예를 들어 anti-alias line 그리기 기능)의 경우, HTML5 Canvas가 OpenGL ES보다 훌륭했음 (성능/기능 측면에서)

+ 최종적으로 브라우저에서 실행되는 15,000라인 규모의 코드를 만들어냄
- 3주가 지난후, 기본적인 물리엔진, 드로잉엔진, 애니메이션을 위한 타이머를 개발함
- 4주가 지난후, 기본적인 마우스 처리가 구현되어 실제 게임을 실행할 수 있게됨
- 물리엔진은 intensive한 연산 덩어리, 하지만 JavaScript가 놀라운 실행성능을 보여줌. 이제 JavaScript가 느린 언어라는 선입견을 버려야함

+ 개발을 위해 사용한 도구
+ 코딩을 위해 Visual Web Developer 2010 (free version 제공됨) 사용
- JavaScript, css 구문에 대한 autocompletion 기능 제공
+ 실행 및 디버깅을 위해 ie9을 비롯한 firefox, chrome, safari 브라우저 사용
- 동일한 HTML5 코드로 모든 브라우저를 지원할 수 있음을 확인
+ ie9의 JavaScript profiler를 사용하여 실행성능을 최적화함
- 코드의 병목 지점을 찾아 개선함으로써 10배 이상 실행 성능을 향상시켰음

+ 산출물
+ resource loader
- 본 게임의 리소스 크기(6MB)는 일반 웹사이트의 리소스 크기(200~300KB)에 비해 매우 큼
- 큰 리소스들을 안정적으로 pre-loading하고 loading schedule을 조정할 수 있는 JavaScript 'resource loader' 라이브러리를 개발함, 그리고 이를 free open source로 공개함

(이상)

저작자 표시 비영리 변경 금지
신고
Posted by ingee

댓글을 달아 주세요

  1. 나그네 2012.06.28 14:24 신고  댓글주소  수정/삭제  댓글쓰기

    이전부터 읽어보고 싶었던 글이었는데 미뤄두고 있다가 이렇게 요약본을 보니 명쾌 하네요.
    간략하지만 요점잡힌 정리 감사합니다.

  2. 좡이 2012.09.05 11:39 신고  댓글주소  수정/삭제  댓글쓰기

    코드를 포팅하는 과정을 정말 잘 정리 해 주신것 같내요 .. 잘보았습니다 ^^

    • ingee 2012.09.05 13:25 신고  댓글주소  수정/삭제

      제가 쓴 글은 아니고, 영문 블로그 기사를 요약한 겁니다. 모든 대단함은 원글 팀에 속해 있지요. 그래도 도움이 되셨다니 기쁩니다.

HTML5 Device API 분야의 표준화 현황을 정리한다. 현황을 정리하면서 느낀점은 다음과 같다.
- W3C가 부지런히 움직이고는 있지만 Device API는 표준화 초기 단계다 (대부분 Working Draft 단계...)
- 애플보다는 안드로이드 쪽이 그나마 기민하게 반응하고 있다 (오십보 백보지만 그래도...)
 
phone call
- <a href="tel:phone_number"> URI를 통한 전화 걸기 기능
- 표준화 현황: de facto 표준 (W3C 공식 표준 아님)
- 단말 지원 현황: iOS, Android, 블랙베리 등 거의 모든 모바일 기기가 지원함
- 참고 자료: http://www.mobilexweb.com/blog/click-to-call-links-mobile-browsers
 
Indexed DB
- 인덱스가 부여된 Javascript Object 들의 local storage
- W3C가 Web SQL 표준을 폐기하고 대안으로 제시
- 표준화 현황: W3C Working Draft (06-December-2011 규격이 최신: http://www.w3.org/TR/IndexedDB/)
- 단말 지원 현황: 거의 모든 모바일 기기가 지원 않음
- 참고 자료: http://www.html5rocks.com/en/tutorials/indexeddb/todo/

Media Capture
- 카메라, 캠코더, 마이크 연동 규격
- 표준화 현황: W3C Working Draft (14-April-2011 규격이 최신: http://www.w3.org/TR/html-media-capture/)
- 단말 지원 현황: iOS 지원 않음. Android 지원함 (3.0 부터)
- 참고 자료: 
    - http://www.h-online.com/open/news/item/HTML5-Access-to-cameras-and-microphones-1043319.html
    - http://www.wonsuk73.com/19
 
File API
- 로컬 파일 읽기/쓰기 API
- 표준화 현황: W3C Working Draft (20-October-2011 규격이 최신: http://www.w3.org/TR/FileAPI/)
- 단말 지원 현황: iOS 지원 않음. Android 지원함 (3.0 부터)

Touch Event
- 터치 이벤트 규격
- 표준화 현황: W3C Candidate Recommendation
    - Working Draft보다 안정된 상태
    - 15-December-2011 규격이 최신: http://www.w3.org/TR/touch-events/
- 단말 지원 현황: 거의 모든 모바일 기기가 지원함

Contacts API
- 사용자의 연락처 정보에 접근하기 위한 API
- 표준화 현황: W3C Working Draft
    - Stable Draft 상태 (Last Call)
    - 16-June-2011 규격이 최신: http://www.w3.org/TR/contacts-api/
- 단말 지원 현황: 거의 모든 모바일 기기가 지원 않음 (규격의 안정도를 고려할 때 의외)

Calendar API
- 사용자의 일정 정보에 접근하기 위한 API
- 표준화 현황: W3C Working Draft (19-April-2011 규격이 최신)
- 거의 모든 모바일 기기가 지원 않음
 
Task API
- 사용자의 to-do 업무 정보에 접근하기 위한 API
- 표준화 현황: 담당 에디터가 없음, Calendar API에 합쳐질 전망
- 참고 자료: http://www.w3.org/TR/calendar-api/ 

Geolocation API
- 사용자의 위치 정보에 접근하기 위한 API
- 표준화 현황: W3C Candidate Recommendation
    - Working Draft보다 안정된 상태
    - 07-September-2010 규격이 최신 (http://www.w3.org/TR/geolocation-API/)
- 단말 지원 현황: 거의 모든 모바일 기기가 지원

Messaging API
- SMS, MMS, eMail 관련 API
- 표준화 현황: W3C Working Draft (14-April-2011 규격이 최신: http://www.w3.org/TR/messaging-api/)
- 단말 지원 현황: 거의 모든 모바일 기기가 지원 않음
 
 (끝)
 
저작자 표시 비영리 변경 금지
신고
Posted by ingee

댓글을 달아 주세요

jQuery Mobile 요약

HTML5 2012.01.16 16:59
jQuery Mobile(이후 JQM)의 개요에 대해 간단히 요약한다.

JQM (jQuery와 JQM의 관계)?
- JQM은 jQuery의 확장팩 (jQuery의 light-weight 버전이 아니다)
- JQM은 jQuery를 기반으로 모바일 Web App 개발을 지원하기 위한 코드(HTML/CSS/Javascript)를 추가한 일종의 플러그인(plulg-in)

JQM은 무엇을 제공하나?
- Touch 인터페이스 처리
- 다양한 모바일 OS/Device에 대한 지원
- Theme(UI 테마) 체계

jQuery Plug-in?
- jQuery의 기능을 확장하기 위해 widget 또는 코드 모듈을 추가할 수 있도록 jQuery 팀이 제공하는 아키텍처
- 전세계 jQuery 개발자들에 의해 다양한 plug-in들이 개발/발표되고 있음

jQuery Mobile을 쓰려면 어떻게 하나?
- Web App 소스에 다음 3줄을 추가하면 준비 끝!
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

(이상)
 
저작자 표시 비영리 변경 금지
신고
Posted by ingee

댓글을 달아 주세요

  1. 하늘빠 2012.01.19 16:09 신고  댓글주소  수정/삭제  댓글쓰기

    간략하고도 명쾌한 설명, 잘 보았습니다. ~.~

프레임 애니메이션이란 영화처럼 한 프레임 한 프레임의 움직임으로 표현하는 애니메이션이다 (한땀 한땀...). 쉽게 말해 플래시 애니메이션을 말한다. "Flash 대 HTML5" 논쟁에서 시작, HTML5가 대중의 관심을 듬뿍 흡입한 상황이지만, 과연 현실이 HTML5로 플래시를 대체할 수 있는 상황인지 궁금했다.

요약
* HTML5의 SVG와 CSS3 기술로 프레임 애니메이션을 구현할 수 있음
    - SVG : Scalable Vector Graphic. 진작부터 존재했던 플래시의 대안 기술. HTML5의 일부로 포함됨.
    - HTML + CSS3 : CSS3에 frame 단위 애니메이션 효과에 대한 정의가 포함됨.
* Sencha Animator라는 CSS3 기반 공개 컨텐츠 저작툴이 존재함
* Adobe에서 Edge라는 CSS3 기반 상용 컨텐츠 저작툴을 발표함 (현재 preview 상태. '12년 정식 버전 출시 예정)
* 프레임 애니메이션을 구현할 수 있는 요소 기술은 존재하나, 본격적인 컨텐츠를 저작할 수 있는 상용 저작툴이 미흡한 상황임
* SVG와 CSS3 Animation 기능에 대한 브라우저의 지원이 미흡함 (특히 안드로이드 모바일 브라우저) 
(출처:  http://caniuse.com )


Reference
* [HTML5 강좌] 19. SVG
    - SVG로 프레임 애니메이션 저작이 가능하다
* Sencha Animator - HTML5, CSS3 애니메이션 저작 도구
    - CSS3로 프레임 애니메이션 저작이 가능하다
* Adobe, HTML5 저작 도구 Edge 공개 (2011-08)
    - Adobe Edge가 HTML/CSS 기반 애니메이션 저작 기능을 제공한다
* Why has Edge gone with div-based animation over canvas SVG? (2011-08)
    - Edge 개발시 Canvas와 SVG 사용을 고려했으나 성능상의 문제로 채택하지 않았다
    - iOS4에서 Canvas와 SVG 성능이 미흡했다 (약간 자의적 판단...)
    - Edge는 현재 preview 버전이다. 정식 버전 출시시 달라질 수 있다
* [RIA] 스마트한 RIA 구현을 위한 몇 가지 팁 (2011-11)
    - Adobe Edge는 내년('12) 정식 버전 출시 예정이다

(이상) 
 
저작자 표시 비영리 변경 금지
신고
Posted by ingee

댓글을 달아 주세요