hacking/web2010/11/16 12:55

HTML5/CSS/JavaScript로 안드로이드 "앱" 만들기

크리에이티브 커먼즈 라이선스
Creative Commons License
사무실에 앉아서 이짓꺼리(?) 하고 있다.

이런 쓰잘데기 없는 동영상을 굳이 만들어 올리는 이유는 "웹 앱"(WebApp; HTML5App)이 그렇게 거창한 것도 아니고, 어려운 것도 아니고, 멀리 있는 남의 나라 이야기도 아니라는 것을 보여주기 위해서다.
PhoneGap, Titanium, QuickConnect 같은 거창한(?) 제품을 동원하지 않더라도 JQueryMobile, Jo, Wink, Sencha Touch 같은 UI 툴킷과 HTML5 canvas 태그 그리고 HTML5 JS API들(WebStorage, WebSQLDatabase, WebWorker, ...), 그리고 W3C의 DAP(Geolocation, ...)를 사용하면 웬만한 앱은 만들 수 있다.

(저번에 XCode로 했던 짓이랑 비슷해서 이번에는 시간이 많이 안걸렸다능 -.-V)



동영상 간의 의존성을 제거(?!)하기 위해 html과 js를 직접 입력했지만, 저번에 아이폰 앱 만들때 썼던 파일을 그대로 써도 된다. 당연한 얘기~

마찬가지로, 예제 소스는 github에 올려두었다.

담(이건 정말 술 이름인데...)에는 좀 더 그럴싸한 앱을 만들어보자. 뭘 만들까? 흠...

저작자 표시 동일 조건 변경 허락

'hacking > web' 카테고리의 다른 글

터치기반 모바일 웹킷에서 버튼 반응 속도 개선하기  (0) 2011/03/13
HTML5/CSS3/JavaScript로 아이폰 앱 만들기 - XCode 프로젝트 템플릿  (1) 2010/11/18
HTML5/CSS/JavaScript로 안드로이드 "앱" 만들기  (0) 2010/11/16
HTML5/CSS/JavaScript로 아이폰 "앱" 만들기  (6) 2010/11/14
Jo HTML5 Mobile Application Framework 초간단 리뷰  (0) 2010/10/08
JavaScript Common Mistakes(3) - 다른 언어에 익숙한 개발자들이 하기 쉬운 실수  (0) 2009/12/10
Posted by iolo
TAG android, app, HTML5, JavaScript, Mobile, web, webapp, 스크린캐스트, 안드로이드, 자바스크립트
Trackback 0 Comment 0
hacking/web2010/11/14 21:18

HTML5/CSS/JavaScript로 아이폰 "앱" 만들기

크리에이티브 커먼즈 라이선스
Creative Commons License
풍경 1. 아이폰이 국내에 출시된지 1년도 안됐는데... 아... 아이폰 없던 시절이 어땠는지 기억조차 가물가물... 먹고 살려니 아이폰 개발 공부는 해야겠는데, 망할 놈의 옵씨... 옵씨는 그렇다 치고, 코어 파운데이션, 코어 그래픽스, 코어 애니메이션, 뭔 코어가 이렇게 많냐? 핵분열도 아니고... OTL

풍경 2. 없는 살림에 거금 10만원 들여 아이폰 앱 개발자 등록해서 1년 동안 앱 3개 겨우 올렸는데... 안드로이드가 대세? 열라 안드로이드 공부해서 앱 좀 올려 볼려니... 안드로이드 마켓은 뭐고 티스토어는 뭐고 올레마켓은 또 뭐냐? 그까이꺼 대충~ 눈감고 넘어가려니... 블랙베리? 심비안? 팜프리? 윈폰7? 바다? OTL

풍경 3. 아래아한글 새 버전 나온 줄 알았던 넷스케이프와의 첫만남, 문자열과 한판 승부를 벌였던 CGI 시대, ASP, PHP, JSP... OOO 서버 페이지 시대, 유행따라 삼만리 AJAX 시대... 어느새 HTML만으로 어플리케이션을 만드는 시대??? 먹고살려니 안할 순 없고... OTL

풍경 4. 스마트폰(그게 뭔데? 먹는거냐?)용 앱을 만들긴 만들어야 겠는데.. 새로운 언어 배우기도 귀찮고, API는 낯설고, 당장 할 줄 아는 건 웹... 그래서 웹 기술만으로 앱을 만들 수 없을까... phonegap은 또 뭐고 titanium은 또 뭐고, WAC은 또 뭐냐? OTL

그래서 준비했습니다.

(재생 시간은 3분 남짓이지만 제작하는데는 30분 넘게 걸렸다능...ㅠㅠ)



동영상은 helloworld 수준이지만, 요기까지하고 나면 나머지는 하기 나름...
예제 소스는 github에 올려두었다.

조만간(그건 또 어디서 나온 술 이름이냐?) HTML5/CSS/JavaScript로 안드로이드 앱 만들기도....


저작자 표시 동일 조건 변경 허락

'hacking > web' 카테고리의 다른 글

HTML5/CSS3/JavaScript로 아이폰 앱 만들기 - XCode 프로젝트 템플릿  (1) 2010/11/18
HTML5/CSS/JavaScript로 안드로이드 "앱" 만들기  (0) 2010/11/16
HTML5/CSS/JavaScript로 아이폰 "앱" 만들기  (6) 2010/11/14
Jo HTML5 Mobile Application Framework 초간단 리뷰  (0) 2010/10/08
JavaScript Common Mistakes(3) - 다른 언어에 익숙한 개발자들이 하기 쉬운 실수  (0) 2009/12/10
JavaScript Common Mistakes(2) - This "this" is not the "this"  (2) 2009/12/09
Posted by iolo
TAG app, HTML5, iPhone, JavaScript, Mobile, web, webapp, 스크린캐스트, 아이폰
Trackback 0 Comment 6
hacking/web2009/04/24 13:58

웹개발자(또는 디자이너)를 위한 퀵레퍼런스카드

크리에이티브 커먼즈 라이선스
Creative Commons License
뵑만년만의 포스팅이다.
하나:

둘:

셋:

그리고, 넷:

여기가면 인쇄된 책자를 살 수 있다.
씽크프리 닥스의 임베딩 기능 테스트 삼아... 한번 해 봤음.

'hacking > web' 카테고리의 다른 글

심심풀이 코딩 - 자바스크립트로 만든 벽돌깨기~  (7) 2009/08/24
Road to Web3.0  (2) 2009/06/08
웹개발자(또는 디자이너)를 위한 퀵레퍼런스카드  (3) 2009/04/24
Dojo Objective Harness를 이용한 웹 2.0 애플리케이션 단위 테스트  (0) 2009/01/07
아파치 더비를 이용한 오프라인 Ajax  (2) 2008/11/16
전문가다운 Ajax 애플리케이션 개발, Part 3: DWR, 자바, Dojo 툴킷을 사용하여 자바와 자바스크립트 통합하기  (0) 2008/10/24
Posted by iolo
TAG HTML, quick reference card, ThinkFree, thinkfree docs, unipaper, visibone, web
Trackback 0 Comment 3
hacking/web2007/09/14 16:22

SVG for All

크리에이티브 커먼즈 라이선스
Creative Commons License
SVG가 사실상 웹표준임에도 불구하고 대다수의 브라우져에서 무시되고 있는게 현실~
특히 IE에서는 VML이라는 해괴망측한 물건(이것도 표준이긴하지만)을 핑계로 SVG지원 요구를 무시하고 있었다.

SVG와 VML이 둘다 XML이라는 점을 이용해서 SVG를 VML로 변환하는 XSLT를 만들려는 시도가 몇번 있었지만 결과는 신통치 않았는데... 이번엔 은빛을 이용해서 SVG를 XAML로 변환하는 XSLT가 나왔다.

과정이야 어찌됐건 결과만 놓고 보면:
사용자 삽입 이미지

파이어폭스 2+, IE7+은빛, 사파리3+, 오페라 9+에서 SVG를 모두 볼 수 있게 됐다.

자세한 내용은: http://ajaxian.com/archives/svg-on-ie-via-silverlight-via-xslt



'hacking > web' 카테고리의 다른 글

RIA 전성 시대? AJAX 독주 체제!  (2) 2007/09/22
dojo 1.0을 위한 grid 위젯은 TurboGrid  (0) 2007/09/17
SVG for All  (2) 2007/09/14
When innerHTML isn't Fast Enough  (0) 2007/09/14
bloglines 3.0beta  (0) 2007/09/07
Web 2.0 ... The Machine is Us/ing Us  (0) 2007/02/26
Posted by iolo
TAG crossbrowser, Silverlight, svg, web
Trackback 0 Comment 2
hacking/web2007/02/26 10:02

Web 2.0 ... The Machine is Us/ing Us

크리에이티브 커먼즈 라이선스
Creative Commons License
web 2.0에 대한 짧지만, 핵심을 찌르는 멋진 비디오~

web 2.0 is linking people?

그렇게 되길 바란다. 하지만 다들 머리속에선 딴 생각을 하고 있을껄...

web 2.0 is making money?

'hacking > web' 카테고리의 다른 글

When innerHTML isn't Fast Enough  (0) 2007/09/14
bloglines 3.0beta  (0) 2007/09/07
Web 2.0 ... The Machine is Us/ing Us  (0) 2007/02/26
FireBug 1.0  (0) 2007/01/28
IE6? IE7? 어느 것을 우선 타겟으로 삼을 것인가?  (0) 2007/01/03
CSS의 진화 - 방탄웹 맛보기  (0) 2006/11/28
Posted by iolo
TAG web, web2.0
Trackback 0 Comment 0
hacking/web2007/01/28 17:04

FireBug 1.0

크리에이티브 커먼즈 라이선스
Creative Commons License
불여우용 웹개발/디버깅 확장인 [https]불벌레 1.0이 정식으로 릴리즈됐다.


자바스크립트, CSS, HTML 디버깅은 물론이고 유용한 성능 측정 정보도 제공해준다.

백문이 불여일런!

'hacking > web' 카테고리의 다른 글

bloglines 3.0beta  (0) 2007/09/07
Web 2.0 ... The Machine is Us/ing Us  (0) 2007/02/26
FireBug 1.0  (0) 2007/01/28
IE6? IE7? 어느 것을 우선 타겟으로 삼을 것인가?  (0) 2007/01/03
CSS의 진화 - 방탄웹 맛보기  (0) 2006/11/28
DWR과 IE와 TBODY와 innerHTML과 협공  (1) 2006/11/14
Posted by iolo
TAG firebug, Firefox, tool, web
Trackback 0 Comment 0
hacking/web2007/01/03 10:06

IE6? IE7? 어느 것을 우선 타겟으로 삼을 것인가?

크리에이티브 커먼즈 라이선스
Creative Commons License
지난 프로젝트에서는 IE6를 우선 타겟으로 삼고, IE7을 위한 온갖 꽁수들을 동원했었다.

영미권에서는 진작부터 IE7에 대한 [http]강제 업데이트가 시작되었고, [http]브라우져 점유율 통계에서도 IE7의 점유율이 IE6를 앞지르기 시작했다.

우리나라도 올 2/4분기에는 강제 업데이트가 시작될거라고 하는데... 지금 진행중인 프로젝트의 첫번째 퍼블릭 릴리즈가 2/4분기... 예상되는 실 서비스 적용 시점은 3/4분기 이후...

IE6를 지원하겠다고 마음을 먹고 덤비면, 지원하는게 어려운 일은 아니다. 귀찮을 뿐... 그리고 지저분할 뿐... 게다가 IE6를 지원하겠다고 마음을 먹고나면 ?IE5.x도 슬그머니 고개를 내민다. OS를 기준으로 생각해보면 ?IE5.x라면 win95도 지원한다는 것이고, IE6라면 win98/2000를 지원한다는 것이다. 역시 ?IE5.x는 고려대상에서 제외해도 되는 것일까? IE6를 제외하는 것은 시기상조?

현시점에서 최선의 선택은: IE7을 "우선" 타겟으로 삼되, IE6를 지원해야한다.

'hacking > web' 카테고리의 다른 글

Web 2.0 ... The Machine is Us/ing Us  (0) 2007/02/26
FireBug 1.0  (0) 2007/01/28
IE6? IE7? 어느 것을 우선 타겟으로 삼을 것인가?  (0) 2007/01/03
CSS의 진화 - 방탄웹 맛보기  (0) 2006/11/28
DWR과 IE와 TBODY와 innerHTML과 협공  (1) 2006/11/14
AJAX이전에 AJAX가 있었으니...  (0) 2006/11/07
Posted by iolo
TAG IE6, IE7, web, 개발
Trackback 0 Comment 0