N-Screen & UI
▶ N스크린은 TV나 PC, TabletPC, SmartPhone 등 다양한 기기에서 하나의 콘텐츠를
     끓김없이 이용할 수 있게 해주는 서비스

▶ 사용자가 구입한 콘텐츠가 단말기가 아니라 서버에 저장
     - 언제 어디서나 다양한 단말기로 불러와 이용할 수 있다는 장점

▶ 국내외 이동통신사들은 N스크린을 미래 핵심 서비스로 인지


예제 사이트
http://www.colly.com/

http://www.edmerritt.com/

http://www.tenbytwenty.com/

http://thinkvitamin.com/

http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html

http://www.20thingsilearned.com/web-apps/1

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

모바일웹 모범사례 : http://www.w3c.or.kr/Translation/mwbp_flip_cards/

HTML5 makes web standalone application
HTML5 Showcase: 48 Potential Flash-Killing Demos
http://www.hongkiat.com/blog/48-excellent-html5-demos/


CSS3 gives rich user experiences
47 Amazing CSS3 Animation Demos
http://www.webdesignerwall.com/trends/ ··· demos%2F

Making native apps with Web Technology
•PhoneGap - http://phonegap.com
•Titanium appcelerator - http://www.appcelerator.com/products/
•Jo App - http://joapp.com/

Web UI Framework : iUI
•iUI: iPhone User Interface Framework
•Javascript, HTML, CSS
•Demo : http://chriscarey.com/projects/mythtv/iphone/

Web UI Framework : JQTouch
•JQTouch
•Similar to native app UI
•Javascript, HTML, CSS
•JS Library
•http://www.jqtouch.com/preview/demos/main/#home

Web UI Framework : Sencha
HTML5, CSS3, Javascript
Resolution independent
JS Library
http://touchstyle.mobi/app/

Widget Runtime Demo
•http://www.youtube.com/watch?v=0ryvnl1 ··· Drelated
•http://widget.developer.vodafone.com/en/
•http://www.youtube.com/watch?v=3xpS21aR-BQ

Extending Web Spec
•JIL (Joint Innovation Lab)
–Vodafone, VZW, Softbank, China Mobile http://www.jil.org/
•BONDI(OMTP driven)
•W3C Device APIs and Policy http://www.w3.org/2009/dap/

Waikiki –WAC engine
•http://public.wholesaleappcommunity.co ··· dex.html
•Widget Runtime
1. Spec (Core + DeviceAPIs)
2. Tools (SDK + RI[Reference Implementation])
3. Testing (Compliance process)

UI Element Kits
20 Free Web UI Element Kits and Stencils
http://speckyboy.com/2010/07/21/20-fre ··· ncils%2F
iPhone GUI PSD Version 4
http://www.teehanlax.com/blog/2010/06/ ··· sd-v4%2F

IAd JS - http://developer.apple.com/iad/

MobiOne 테스트 센터 : http://www.genuitec.com/mobile/
MobiOne 디자인 센터 : http://labs.blackbaud.com/netcommunity ··· id%3D249

OpenAPI 개발자 사이트 : http://www.programmableweb.com/
http://www.openonweb.com/api
http://mashupkorea.org
http://code.google.com/intl/ko-KR/more/#google-apis
http://www.smac.or.kr/jsp/front/index.jsp

트위터API
1. Twitter API Key 받기(https://twitter.com/apps/new)
2. Consumer secret, Request token 등록
3. 대부분 스크립트 언어 형태 지원(JSP, PHP, ASP..)
4. Twitter API(Search API, REST API)
5. Twittwer4J(http://twitter4j.org/en/index.jsp) Lib를 사용
※ 참고 사항 - 개발 시 한 시간 100쿼리, 하루 1000 쿼리 테스트 제약

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

"모바일OK" 란, 웹 사이트 또는 웹 응용에 대하여 유무선 단말의 종류에 구애 받지 않고 자유롭게 이용할 수 있도록 하는 국제 웹 표준 기술의 총칭을 의미함

한국형 모바일 웹사이트 유효성 검사 - http://v.mobileok.kr/
모바일OK시범사업 메인 사이트 - http://www.mobileok.kr/

MOKStore란?

모바일웹사이트를 제공하는 제공자에게는 모바일웹 애플리케이션의 스타트 페이지를 통한 홍보채널의 장을 제공하고, 일반 사용자에게는 우수 모바일 웹 정보 및 순위의 제공으로 모바일 웹 이용 활성화 도모함
http://m.mokstore.com/site/list

모바일OK아카데미 - http://www.mobileokacademy.or.kr/ :
 : HTML5 에 대한 강의와 자료 다운로드 가능.

MOIBA 한국무선인터넷산업연합회  (http://m.moiba.or.kr/)

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

http://html5games.net/ HTML5 만든 게임. jQuery 사용.

Google Pacman -  https://github.com/macek/google_pacman

Classic Bricks - http://billmill.org/static/canvastutorial/index.html

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

Html5 적용되는 브라우저별 테스트 - http://html5test.com/
위 주소를 실행시키면 해당 브라우저의 적용 가능한 html5 Tag 가 나오고 점수가 매겨진다.
브라우저 업데이트도 아마 영향이 있을 것이다.

Firefox 4버전으로 변경하고 테스트 해보니 무려 255점이나온다. 헐~

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

HTML5 referencR - https://developer.mozilla.org/en-US/docs

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

HTML 5 <canvas> Tag

---

Example How to display a red square, with the canvas element: <canvas id="myCanvas"></canvas> <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script> Try it yourself »

---

Definition and Usage

The <canvas> tag is used to display graphics.

The <canvas> tag is only a container for graphics, you must use a script to actually paint graphics.

---

Differences Between HTML 4.01 and HTML 5

The <canvas> tag is new in HTML 5.

---

Tips and Notes

Tip: You can write text between the start and end tags, to show older browser that they do not support this tag.

Note: Some browsers already support the <canvas> tag, like Firefox, Chrome, and Opera.

---

Attributes

New : New in HTML 5.

Attribute	Value	Description
heightNew	pixels	Sets the height of the canvas
widthNew	pixels	Sets the width of the canvas

Standard Attributes

The <canvas> tag also supports the Standard Attributes in HTML 5.

---

Event Attributes

The <canvas> tag also supports the Event Attributes in HTML 5.

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

마이크로소프트웨어 7월호(2010.07)


오리진이 되라 : 운명을 바꾸는 창조의 기술

[ 목  차 ]
책을 내면서 | 대한민국 창조학교를 꿈꾸며
프롤로그 | 창조 : 놀랍고 재미있는 것들을 보았을 때 나온 영감을 끝까지 잡아채서 만든 요리

1. 목숨 걸고 사랑하라 : High Love
예술은 우리에게 무엇인가
르 네상스가 인본주의인 이유
진정한 사랑과 담배회사가 만나면?
‘애절함’으로 만든 와인 이름 암기법
상상력의 근원은 애절함
Inspiration Box 변기회사 토토의 애절한 사랑

2. 고통을 모르면 그를 기쁘게 할 수 없다 : High Pain & Joy
창조를 만드는 두 가지 원천
남이 보지 못한 아픔을 보면 새로움이 보인다
남이 주지 못한 기쁨을 주는 것이 새로움이다
Inspiration Box 아픔과 기쁨의 세계, 인문학
Inspiration Box 기쁨 주고 사랑받는다! 광고에서의 하이 페인 앤 조이

3. 창조의 목적지, 새로운 시공간을 선사하라 : High Time & Place
창조적인 플레이의 기본조건
핵심조건 : 예상을 뛰어넘는 새로운 시간과 공간 만들기
시간이 바뀌면 미래가 바뀐다
Inspiration Box 당신은 퓨처마킹을 하고 있는가?

4. 뒤집고 섞어야 새로운 세상이 열린다 : High Mix
아오모리 메시지
무엇을 섞을 것인가 : 융합의 종류
하 이믹스 1 : 예상을 뛰어넘는 엉뚱한 것과의 융합
하이믹스 2 : 문화예술과의 융합
영감은 어디에서 오는가?
Inspiration Box 창조집안 가계도

5. 컨셉이 없으면 창조도 없다 : High Concept
컨셉 있음과 컨셉 없음
열광의 조건 : 컨셉
컨셉이 있어야 상상력을 꺼낼 수 있다
그렇다면, 컨셉이란 무엇인가
매력적인 컨셉의 두 가지 조건
하이컨셉의 핵심 : ‘엉뚱하고 가치 있는’
Inspiration Box 자판기 앞에서 생각하는 ‘자판기 인생’

6. 내가 먼저 주면, 그가 내 것이 된다 : High Touch
[시크릿] 이야기에서 내가 얻은 것
남자화장실을 통해 본 하이터치의 세계
하이터치, 첫 번째로 주어야 할 것 : ‘웃음, 재미 그리고 약간의 야함과 역발상’
하이터치, 두 번째로 주어야 할 것 : ‘인간관계의 미묘한 감정을 풀어주는 것들’
하이 터치, 세 번째로 주어야 할 것 : ‘사람들이 공감하고 행동할 의미와 명분’
하이터치, 네 번째로 주어야 할 것 : ‘꿈과 판타지’
Inspiration Box 줄탁동시(?啄同時)

7. 마음의 벽을 깨라 : High Soul
하 이소울의 첫 번째 키워드 : ‘미치도록 아름다운’
하이소울의 두 번째 키워드 : ‘겁나게(?) 착한’
하이소울의 세 번째 키워드 : ‘대담하고 상상을 뛰어넘는’
하이소울의 네 번째 키워드 : ‘너무나도 완벽한’
하이소울의 다섯 번째 키워드 : ‘그까이꺼!’
주의사항 : 고집과 똥고집을 구분하라!
Inspiration Box 소울의 높이가 상상력의 높이를 결정한다

8. 예상을 깨는 이야기를 만들어라 : High Story
로댕은 왜 10년 동안 [칼레의 시민]에 몰두했는가
이야기 만드는 법 : 이야기의 원형(原型) 20가지
비즈니스에서 이야기를 만드는 법 : ‘드림 소사이어티’
뱀장수는 최고의 이야기꾼
Inspiration Box 세계 최고의 판타지 스토리, 라스베이거스

9. 새로운 세상과 만나는 위대한 느림 : High Slow
정수기와 메가트렌드
다시 생각해보는 물질주의와 GNH
월 악산 기 수련원에서 얻은 가르침
슬로 라이프, ‘FINISH & T’
산화와 환원, 그리고 라마단의 지혜를 우리 삶에도!
Inspiration Box 클리나멘(clinamen)

10. 오리진이 되어 세상을 바꿔라 : High Action
스스로 창조하는 자, 오리진이 되는 법
새로운 영감의 뒤에는 새로운 전쟁이 기다리고 있다
집 중력 발휘조건 1 : ‘할 수 있다’는 자신감
집중력 발휘조건 2 : 즐겁게 미쳐라
집중력 발휘조건 3 : 올인(all-in)

에필로그 | 운명을 바꾸는 만남이었기를 희망하며
감사의 글
참고문헌


.

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

플러그인 기반의 RIA를 대체하라!

HTML5와 웹의 미래

애플의 아이폰과 아이패드가 플래시 지원을 하지 않기로 하면서 HTML5에 대한 관심이 폭발적으로 증가했다. HTML5가 화두가 되고 시간이 어느 정도 흘렀지만, 여전히 HTML5와 웹의 미래에 관한 의견들은 여러 갈래로 나뉘어져 있다. 앞으로 다가올 웹의 미래가 어떨지 아무도 정확히 알 수는 없다. 하지만 현재의 상황을 잘 파악한다면 좋은 예측은 가능할 것이다. 이 글에서는 HTML5와 웹의 미래에 대해 생각해 본다.

사실 웹에 관심을 가지고 있던 사람이 아니라면, HTML에 버전이 있었다는 사실에 당황했을지도 모른다. 그냥 간단한 태그로 이뤄진 언어 정도로만 생각하고 있었을 것이다. 그럼 HTML5에 대해 간략히 설명하기 위해 영문 위키피디아에 있는 HTML5의 정의를 인용해 보도록 하겠다.

‘HTML5는 현재 사용되고 있는 HTML 4.01과 XHTML 1.0의 다음 버전으로 사용될 예정으로 개발 진행 중이다. HTML5의 목적은 플러그인 기반의 RIA(Rich Internet Application) 사용을 줄이는 데 있다. 대표적인 예로는 어도비의 플래시, 마이크로소프트의 실버라이트가 있다. HTML5는 또한 CSS3의 추가적 사용도 포함되는데, 두 기술은 함께 개발 중인 상태다.’

여기에 HTML5의 특징을 한 가지 덧붙이자면, 강화된 자바스크립트 API를 꼽을 수 있다. 플러그인 기반의 RIA 기술을 대체하기 위한 가장 중요한 요소 중 하나이기도 하다. 그럼 HTML5의 새로운 기술들을 살펴보기 전에 먼저 HTML5의 기본이 되는 HTML과 CSS의 역사에 대해 간략히 살펴보자.

■ HTML과 CSS의 역사
HTML은 1989년 팀 버너스리(Tim Berners-Lee)라는 물리학자에 의해 시작되었다. 그 후 약 3년을 주기로 버전이 올라가다가 1999년 12월 마침내 HTML4.01이 W3C의 권고안(Recom mendation)을 받는다(W3C의 권고안을 받는다는 것은 최종 심사를 마치고 표준으로 인정받는 것을 뜻한다). HTML5는 2004년 6월 작업이 시작되었으며 현재 W3C에서 작업 초안 상태(Working Draft state)이다. CSS는 HTML과 XHTML은 물론이고 XML의 웹페이지 스타일을 표현하는 것도 가능한 언어다. CSS는 1996년 12월에 W3C의 권고안을 받아 CSS1이 공식적으로 나왔다. 그 후 1998년 5월에 다시 W3C 권고안을 받으며 CSS2가 나온다. 그리고 같은 해 CSS3의 개발에 들어갔지만 아직도 진행 중인 상태다.
HTML과 CSS의 발전 속도를 살펴보면 급변하는 웹의 발전 속도에 비해 더딘 편임을 알 수 있다. 물론 같은 수준으로 비교 할 수는 없겠으나, 웹의 일부라고 할 수 있는 어도비의 플래시의 경우 처음 출시된 이후 2~3년마다 한 번씩 새로운 버전이 출시되고 있으며, 마이크로소프트의 실버라이트 또한 2007년 출시된 후 벌써 네 번째 버전이 나온 상태이다.

■ HTML5의 소개

HTML5 표준의 범위를 정확히 구분하는 데에는 다소 애매한 부분이 없지 않다. 기존 HTML 표준의 한계를 극복하기 위한 차세대 표준으로서의 목적과 플러그인 없이 RIA를 제공하려는 목적을 동시에 가지고 있기 때문이다. HTML5의 새로운 부분들을 크게 HTML, CSS, 자바스크립트 API 이렇게 세 가지로 나눠 소개해 보도록 하겠다.

■ HTML의 변화

HTML5의 두드러진 변화로 먼저 새로운 태그들의 등장을 꼽을 수 있다. 기존의 웹페이지 레이아웃을 구성할 때는 각 부분의 특성과는 관계없이

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장