uTube Deck은 Youtube의 인기있는, 많이 본, 즐겨찾기가 많이 된 등 Youtube 내에서 이슈가 되는 영상들을 인터넷이 되는 환경에서 Youtube에 접속하지 않고 볼 수 있도록 Youtube Player API와 Data API 를 활용하여 만든 영상 검색 및 뷰어입니다.

Youtube JavaScript Player API Reference
http://code.google.com/intl/ko-KR/apis/youtube/js_api_reference.html#Overview
http://code.google.com/apis/ajax/playground/?exp=youtube#simple_embed

Youtube Data API Reference
http://code.google.com/intl/ko-KR/apis/youtube/2.0/reference.html

애플리케이션의 화면 프레임을 구성과 인터렉션 처리를 위해 Ext JS라는 JavaScript Framework를 사용하였습니다.

Ext JS
http://www.extjs.com

그리고 빌드, 패키지와 배포를 위해서 Titanium을 이용하였습니다.

Appcelerator Titanium
http://www.appcelerator.com

이미 만들어 놓은 웹 애플리케이션이 있다면 패키징하여 배포하는 것은 그다지 어렵지 않습니다. 

uTube Deck 를 만들면서 경험했던 Titanium 에 대한 것을 동영상으로 제작해 보았으니 참고하시는 것도 작은 도움이 되리라 봅니다.

 
Ext JS 3.2, Youtube API를 이용한 Video Viewer

 
Ext JS 3.2, Youtube API를 이용한 Video Viewer FullMode



OSX 10.5 Intel Download Application
Linux Intel 32-bit Download Application
Linux Intel 64-bit Download Application
Windows 32-bit Download Application


소스는 정리되는 데로 Github 를 통해서 공유하도로고 하겠습니다. : )

uTubeDeck based on Appcelerator Titanium from rhiokim on Vimeo.



신고
Posted by Rhio.kim

아래의 문서는 웹 개발자를 위한 AIR 애플리케이션 개발 가이드입니다. 
아직 쓰고 싶은 내용은 많으나 차차 기록하여 배포할 예정입니다. 

기술에 대한 정답을 드리기 위한 것이 아닌 정보를 공유하고 학습하기 위한 것이니 잘못 오류가 생길 수 있고 그런 부분은 저를 포함한 이 문서를 참조하는 분들에게 잘못된 정보가 공유되지 않도록 함께 참여해 주신다면 더욱 좋을 것 같습니다. 



Adobe AIR는 윈도우, Mac OS, 리눅스에서 runtime환경을 제공하며 HTML, AJAX, Adobe Flash, Adobe Flex 기술들을 혼합하여 HTML 과 JavaScript로 구성된 웹 애플리케이션을 데스크탑 애플리케이션으로 배포할 수 있는 기술을 제공한다.

Flash와 Flex는 한국의 전반적인 웹 시장에서 요구되기 보다는 특정 서비스에서 각광을 받는 경우가 많아 넓은 외국 시장에 비해 기술에 대한 공유도 부족하고 개발자도 기존에 Flash 개발자에 한하여 Flash의 기술과 AIR를 결합시켜 데스크탑 애플리케이션을 개발하는 사례가 거의 존재하지 않는다. 

 이것은 시장의 특징일 수도 있지만 개발자의 입장에서는 학습이나 자기 가치를 위한 레퍼런스, 케이스가 필요하나 그런 것이 거의 없다는 의미와도 같다.

AIR를 이용한 애플리케이션 개발은 Flash, Flex를 이용한 방법과 Web의 AJAX, HTML, JavaScript, CSS 을 이용한 방법으로 나뉜다.  Flash, Flex의 경우에는 국내에도 몇 가지 파트로 나뉘어 기술을 공유하는 카페와 블로거들이 상당히 존재한다.  하지만 AIR을 활용한 애플리케이션 개발을 위한 레퍼런스는 매우 부족한 상황이다.

국내에 웹 개발자는 Flash, Flex 개발자보다 월등히 많이 있고 최근 JavaScript 로 개발되어 진 인상 깊은 라이브러리, 프레임워크 들이 많이 발표되어 지면서 강력한 데스크탑 애플리케이션 경험을 웹에서도 구현할 수 있도록 지원하고 있다. 
 
이는 AJAX 기반으로 한 RIA 개발에 관심도가 매우 높아졌고 개발되어 진 훌륭한 애플리케이션을 Adobe AIR와 조합하여 데스크탑에서도 성숙한 애플리케이션을 개발할 수 있게 되었다는 것을 증명하고 있다.

여기에 더불어 Web 2.0과 함께 포털에서는 가지고 있던 데이터를 오픈하여 Mashup 애플리케이션을 위한 환경을 제공하고 있다.  이것으로 볼 때 웹 개발자에게 있어서는 삼합(도구, 데이터, 플랫폼)을 완벽히 갖출 수 있게 되었고 이것을 활용하여 또 다른 웹 시장에서 필요한 개발자가 될 수 있을 것이다.

번 외로 Adobe Max `09 에서도 Adobe의 미래의 행보에 대해서 읽을 수 있지만 Flash 10.1의 발표와 함께 Adobe의 Open Screen Project는 더욱 활발해 질 것이라 판단된다.  또한 Adobe의 거대한 인프라에 중심에서 가장 중요한 기술 하나인 Flash의 기술을 이해하는 중요한 계기가 될 수 있을 것이다.  

Adobe AIR 기술을 활용한 다양한 애플리케이션이 웹 개발자들 사이에서 많이 개발 되어졌으면 한다. 


신고
Posted by Rhio.kim
사용자 삽입 이미지
TPuzzle 이후 새롭게 탄생할 TFastClick Ajax Game 입니다.
TPuzzle 는 Ajax로 구현된 네트워크 게임으로 만들어 보려는 목표가 있었으나 언젠지 모르게 제 관심밖으로 점점 멀어져 버렸습니다.

그래서 이번 게임은 매우 간단하면서도 "사람 짜증나게 하는 게임"입니다. 

플래시로 구현해놓은 게임이 있어서 짬을 내서 javascript 로 구현해보았습니다.

간단한 룰은 랜덤으로 생성되는 숫자를 순서대로 클릭하는 게임입니다.

생각보다 20초안에 성공하기는 쉽지가 않더군요. ^^;;
그래서 목표 "PlayTime"는 17초입니다.

사람의 눈과 사람의 뇌의 단순함을 느낍니다. ㅋㅋㅋ

아직 구현되지 않는 부분이 있어서 이번주 중에 공개할 예정입니다.

DB 연동으로 순위 저장이 되어야 하기 때문에 그부분 구현이 남아있고 Effect 부분이 빠져있어 아직 보잘 것 없습니다.

하지만 잘못하면 잘못하면... 빠져든다는 것.. 중독성이 강할지도 모르고 오기가 발동하여 회사에서 일하다 말고
17초라는 기록을 깨기 위해 점심시간에도 이것을 하고 있는 당신을 볼지도 모릅니다.

전적으로 이런분들은 건강에 해를 미칠 수도 있으며 그에 대한 책임은 절대로 본인에게 있습니다.

신고
Posted by Rhio.kim

사용자 삽입 이미지





Rhio Javascript Technical Defined Document
최초 시작일 : 2007. 12. 31
최종 수정일 : 2008. 09. 17
문서 버젼정보 : v0.11.029
최종 업데이트 내역 :  Flyweight Pattern

 + Rhio.JHPD
 + Rhio.JAT
 + Rhio.JAD
 + Rhio.JDP
 + Rhio.JADP
 + Rhio.JOOP
 + Rhio.AA
 + Rhio.AASD
 + Rhio.JTD
 + Rhio.JTT
 + Rhio.JDOM

Rhio.JHPD
Javascript.High.Performance.Documents : 자바스크립트 고성능 정의 문서
자바스크립트를 통한 웹 어플리케이션 개발 및 DOM Scripting시 활용해야하고 각 브라우저마다의 성능 차를 비교 분석한 문서들을 정리
   + Ajax Application High Performance. part of Javascript & Browser

Rhio.JAT
Javascript.Ajax.Techincal : 자바스크립트 Ajax 기술
   + Data Caching Structure in Ajax(XHR) Pattern
   + Pragmatic Event Processing for Ajax & Rich UI

Rhio.JAD
Javascript.Algorithm.Documents : 자바스크립트 알고리즘 문서
자바스크트로 구현된 여러가지 알고리즘에 대한 정리

Rhio.JDP
Javascript.Design.Pattern : 자바스크립트 디자인 패턴
자바스크립트 OOP 를 목적으로 설계의 패턴을 이해할 수 있고 자바스크립트만의 특징을 살린 패턴에 대한 문서 정리
  + Singleton pattern (in Ext, in Wikipedia)
  + Optional pattern(pre-Configued Pattern)
  + Design by design pattern - Ajax/Rich UI 개발 방법론
  + Template pattern
  + Design by XHR pattern
  + Flyweight pattern

Rhio.JA(D)P
Javascript.Anti.Design.Pattern : 자바스크립트 Anti (디자인) 패턴
자바스크립트의 잘못된 사용을 하고 있는 디자인 패턴 혹은 코딩방법 정리
  + javascript 가 document rendering 에 미치는 영향
  + CSS className property Dynamic Apply

Rhio.JOOP
Javascript.Orient.Object.Program : 자바스크립트 OOP 기술
자바스크립트의 객체 지향적 프로그래밍을 위한 기술 정의 문서
  + Private
  + Privileged
  + Public
  + Protected
  + Polymorphism(다형성)
  + Encapsulation(캡슐화)
  + Abstraction(추상화)
  + Modularity(모듈성)
  + Hierarchy(계층성) & Inheritance(상속)

Rhio.AA
Javascript.Ajax.Applications : 자바스크립트 Ajax(에이젝스) 프로그램
자바스크립트로 만든 어플리케이션 및 유틸리티
 + 2007
    - TAnimate
    - TBoard
    - TComplexJS : prototype.js 기반의 개발된 소스의 난독처리기
    - TDebuger : 크로스브라우징 지원이 가능한 simple debug
    - TDynamicImage : google 의 메인 애니메이션 네비게이션
    - TDynamicLoader :
    - TEffect : fade-in, fade-out, slide 등 간단한 동적 처리만 지원
    - TFileloader : ajax를 통한 텍스트 기반 데이터 다이나믹 로더 (TDynamicLoader 과 유사)
    - TFlash : flash 오브젝트 컨트롤
    - TGlobalStorage : FF에서만 지원되는 globalstorage, sessionstorae 컨트롤러
    - THistory :
    - TLayer :
    - TNavigtor : 동적 페이징 네비게이터
    - TProgress : 프로그래스 바
    - TPuzzle : Javascript 구현한 숫자 퍼즐 게임
   - TString : String object extend
   - TSystemInformation : 사용자 브라우저 및 다양한 브라우징 시스템 정보
   - TTimer : 다양한 time 컨트롤
 + 2008
   - TSharedObject : flash 의 SharedObject 를 이용한 Flash cookie 컨트롤러
                             Shared Object library - powerful browser cookie?
   - TFastClick : 1~25의 랜덤한 위치의 숫자를 빠른 시간내에 순서대로 클릭하는 게임
                        Ajax TFastClick game
   - TFindEqual : 같은 이미지 찾기 게임
                        Ajax TFindEqual game
   - TLeak : IE에서 Circular Reference 발생 시 메모리 릭 테스트용
                 IE Circular-Reference Magration Tip Memory Test - TLeak

Rhio.AASD
Ajax Application Security Documents : Ajax Application 보안 관련 문서


Rhio.JTD
Javascript.Translation.Documents : 자바스크립트 기술 및 번역 문서
자바스크립트의 원서의 일부분 인터넷에 공유되있는 기술 문서를 국내 문서로 번역 재 편집 정리
  + 2008
    - scope in javascript (분석중)
    - object in javascript (분석중)
    - closure in javascript (자바스크립트에서 클로져는 무엇인가?)
    - prototype in javascript (자바스크립트에서 프로토타입은 무엇인가?)
    - Javascript Application(RIA) Memory Management
    - Class-Based vs Prototype-Based Languages
    - Unobtrusive Javascript (비간섭적인 자바스크립트)

Rhio.JTT
Javascript.Technical.Tips : 자바스크립트 기술적인 팁
  + 2008
     - javascript simple data type change

Rhio.JDOM
Javascript & DOM : 자바스크립트와 DOM(Document Object Model) 기술 문서
  + 2008
     - DOM interface in javascript


신고
Posted by Rhio.kim