보물창고/Programming2012.05.01 18:52





HTML5 관련 정보 링크 모음 입니다


이전에 HTML5를 공부하면서 찾은 자료들 URL목록 입니다









html5 가이드 대부분의 기능이 소스로 구현되어 있음
http://kimstar.pe.kr/blog/249






로컬 캐쉬토리지 관련 정보(Local Cache)
 

App Cache
http://blog.daum.net/wiznel/4653725

응용 프로그램 캐시에서 오프라인으로 이동
http://translate.google.co.kr/translate?hl=ko&sl=en&u=http://html5doctor.com/go-offline-with-application-cache/&ei=mvnhTufRCoSriAeqtJW2BQ&sa=X&oi=translate&ct=result&resnum=11&ved=0CKMBEO4BMAo&prev=/search%3Fq%3DApp%2BCache%26hl%3Dko%26newwindow%3D1%26prmd%3Dimvnsul

A BEGINNER'S GUIDE TO USING THE APPLICATION CACHE
http://www.html5rocks.com/en/tutorials/appcache/beginner/

[iphoneApps]ApplicationCache
http://chaospace.tistory.com/128



http://slides.html5rocks.com/#app-cache

HTML5 API 강좌 #1 – Web Storage 와 Application Cache
http://xguru.net/621


어떻게 아이폰에 대한 오프라인 webapps를 만드는 방법

http://translate.google.co.kr/translate?hl=ko&sl=en&u=http://www.thecssninja.com/javascript/how-to-create-offline-webapps-on-the-iphone&ei=3-DhTvCpE8LQmAXZsZn5BA&sa=X&oi=translate&ct=result&resnum=4&ved=0CF4Q7gEwAw&prev=/search%3Fq%3Dtext/cache-manifest%2B%25EC%259E%2590%25EB%25B0%2594%25EC%258A%25A4%25ED%2581%25AC%25EB%25A6%25BD%25ED%258A%25B8%26hl%3Dko%26newwindow%3D1%26biw%3D1366%26bih%3D677%26prmd%3Dimvnsul





붓그림 - 웹앱 정보
http://www.theshodo.com/Write
웹 팩맨 페이지
http://worldsbiggestpacman.com/


http://html5games.com/
html5로 만들어진 게임 모음 사이트







http://slides.html5rocks.com/
html5새로운 기술들이 구현되어 있는 웹 사이트 20개 이상

http://webstandards.or.kr/html5
실전 html5가이드 책 pdf(ccl license) 있는 곳


http://akj61300.blog.me/80133089067
이클립스 html5 개발 환경 설정 설명 있는 블로그

웹스토리지 관련 블로그
http://m.mkexdev.net/59

indexDB 예제 소스 있음
http://code.google.com/p/indexeddb/

web sql db 설명과 소스 있음
http://xguru.net/624

html5 기술 한글로 기술한 메뉴얼 (번역본?)
http://html5.firejune.com/desc.html

html5 API 목록 한글로 체계적으로 정리되어있음 !!!
http://html5.firejune.com/doc.html

각 element별로 코멘트 가 잘 되어 있는 영문 사이트
http://html5.firejune.com/doc.html

canvas그림을 이미지로 관리 하는 방법 블로그( 실제 이미지 저장에 대한 내용은 안보이고 관련 내용이 자 설명 되어 있음) - html5 canvas 저장

http://m.mkexdev.net/106





신고





Posted by 파란물







기사 원문으로 가시면 자세한 설명과 소스코드 자료를 볼수 있습니다



요약: 웹 애플리케이션은 전통적으로 싱글스레드 세상에 갇혀 있었습니다. 너무 복잡하면 애플리케이션의 UI가 멈추는 위험을 감수해야 하기 때문에, 실제로 개발자들은 코드에서 할 수 있는 것에만 활동이 제한되었습니다. Web Workers는 멀티스레드를 웹 애플리케이션에 도입하여 이 모든 과제를 극복했습니다. 이는 대부분 애플리케이션의 로직이 클라이언트측인 모바일 웹 애플리케이션에 특히 유용합니다. 이 기사에서는 Web Workers로 작업하는 방법을 살펴보고, 이에 가장 적합한 태스크가 무엇인지 알아봅니다. 다른 HTML 5 기술을 사용하여 어떻게 이러한 기술의 효율성을 높일 수 있는지 살펴볼 것입니다.



모바일 장치에서 멀티스레드 JavaScript
멀티스레드 또는 동시 프로그래밍은 대부분의 개발자에게 익숙한 것이다. 이는 대부분의 현대 프로그래밍 언어에서 어떤 방식으로든지 지원된다. 그러나 JavaScript는 동시 프로그래밍을 지원하는 언어가 아니다. 작성자는 웹 페이지에서 단순한 태스크를 수행하도록 설계된 JavaScript와 같은 언어에 대해 이러한 작업이 너무 문제가 많고 불필요하다고 생각했다. 그러나 웹 페이지가 웹 애플리케이션으로 진화하면서 JavaScript로 수행된 태스크의 복잡도는 JavaScript를 다른 언어와 동등한 수준으로 끌어 올렸다. 동시에 동시 프로그래밍을 지원하는 다른 언어로 작업하는 개발자들은 스레드와 뮤텍스와 같은 동시 프리미티브에 수반되는 놀랍도록 높은 복잡도로 인해 애를 먹으며 고생했다. 사실 최근에는 Scala, Clojure 및 F#과 같은 많은 수의 새 언어 모두 동시성의 간소화를 보장하며 진화하였다.



Listing 1. 페이지 스크립트에서 Web Worker 사용하기

Listing 2. Worker 스크립트

장치 지원

Workers로 성능 개선하기

Listing 3. 거래 애플리케이션 HTML

Listing 4. loadDeals 함수

그림 1. 모바일 거래 UI

Listing 5. 거래 세부 사항 프리페치하기

Listing 6. 거래 세부 사항 Worker 스크립트

Listing 7. Worker로 가져온 스크립트

그림 2. 표시된 거래 세부 사항

Listing 8. showDetails 함수

요약
Web Workers는 웹 개발자에게 이국적인 새로운 기술처럼 보인다. 그러나 이 기사에서 살펴본 것과 같이 이는 매우 실용적인 애플리케이션이다. 모바일 웹 애플리케이션의 경우에는 특히 더하다. Workers는 데이터를 프리페치하거나 다른 앞선(ahead-of-time) 조작을 수행하는 데 사용되어 훨씬 더 생생한 UI를 제공할 수 있다. 이는 잠재적으로 느린 네트워크를 지나 데이터를 로드해야 하는 모바일 웹 애플리케이션의 경우에 특히 더할 수 있다. 이를 캐싱 전략과 결합하면 사용자는 애플리케이션의 간결함에 감탄할 것이다.


 
 기사 원문으로 가시면 에제 코드와 자세한 설명을 볼 수 있습니다
아이베엠 디벨로퍼 웍스 : http://www.ibm.com/developerworks/kr/
기사 원문 주소 : http://www.ibm.com/developerworks/kr/library/x-html5mobile4/index.html

신고





Posted by 파란물







기사 원문으로 가시면 자세한 설명과 소스코드 자료를 볼수 있습니다



요약: 모바일 애플리케이션의 장점은 사용자가 이동하는 곳이면 어디에서나 애플리케이션과 애플리케이션 데이터를 사용할 수 있다는 점입니다. 그러나 실제로는 모바일 장치를 인터넷에 연결할 수 없는 경우가 있습니다. 모바일 웹 애플리케이션에서는 이러한 문제점을 피할 수 없을 것처럼 보입니다. 그러나 웹 애플리케이션은 진화되어 이제는 오프라인에서도 작동할 수 있게 되었습니다. 이 기사에서는 모바일 웹 애플리케이션을 오프라인에서 사용할 수 있게 하는 방법과 애플리케이션의 상태가 오프라인에서 온라인으로 또는 그 반대로 변경되는 시점을 발견하는 방법을 살펴봅니다.



애플리케이션을 오프라인에서도 작동할 수 있게 해야 하는 이유
여러 가지 이유로 오프라인 웹 애플리케이션은 사용자와 개발자 모두에게 매력적이다. 대다수의 개발자들은 각 플랫폼에 적합한 특정 애플리케이션을 작성하기보다는 인기있는 모든 스마트폰에서 작동하는 하나의 웹 애플리케이션을 작성할 수 있기를 원한다. 단지, 개발자들에게 편리하다고 해서 그것이 사용자가 원하는 것이라고 볼 수는 없다. 이러한 이유로 모바일 웹 애플리케이션은 특정 모바일 웹 애플리케이션이 제공할 수 있는 기능과 동일한 기능을 대부분 제공할 수 있어야 한다. 오프라인에서 작동하는 것도 이러한 기능에 해당한다고 할 수 있다. 애플리케이션 유형(모바일 또는 데스크탑)에 관계없이 일부 애플리케이션은 데이터와 서비스를 대부분 인터넷을 통해 이용한다. 이러한 애플리케이션에서는 사용자가 인터넷에 연결된 상태가 좋지 않으면 기능이 저하될 수 있다. 그러나 단지 인터넷 연결 상태가 좋지 않다고 해서 애플리케이션의 작동이 완전히 중단되어서는 안 된다. 기존의 웹 애플리케이션에서는 이러한 상황이 필연적으로 발생하게 된다.
오프라인 기능을 이용하면 모바일 웹 애플리케이션을 데스크탑 애플리케이션과 유사하게 작동하게 할 수 있다. 또한, 몇 가지 다른 혜택도 얻을 수 있다. 웹 브라우저는 언제나 정적 자원을 캐시한다. 또한, 웹 서버에서 전송한 HTTP 응답 헤더의 메타데이터에 의존하여 페이지를 렌더링하는 데 필요한 이미지와 HTML, Javascript, CSS를 검색한다. 페이지를 렌더링하는 데 필요한 모든 자원이 캐시되면 페이지가 매우 빠르게 로드된다. 그러나 일부 자원이 캐시되지 않으면 이로 인해 모든 기능이 극도로 저하될 수 있다. 이러한 상황은 생각보다 자주 발생한다. 다른 모든 파일보다도 하나의 CSS 파일에 다양한 캐시 제어 헤더가 있었을 수 있으며 그렇지 않으면 할당된 공간 밖에서 브라우저가 실행 중이었기 때문에 캐시가 제거되었을 수도 있다.
오프라인 애플리케이션에서는 모든 자원이 캐시된다. 캐시에서 제공되지 말아야 하는 자원을 사용자가 제어할 수 있기는 하지만 브라우저는 언제나 캐시에서 모든 자원을 로드한다. 특별한 시간소인 매개변수를 Ajax GET 요청에 추가하여 브라우저에서 응답을 캐시하지 않게 하는 것이 일반적인 Ajax 핵이며 그렇지 않고 GET이 적합한 경우에 POST를 사용하면 상태가 훨씬 더 나빠진다. 오프라인이 지원되는 웹 애플리케이션에서는 이러한 핵이 필요 없다.
오프라인 애플리케이션은 기능이 우수하므로 작성하기가 복잡할 것 같다. 과연 그럴까? 실제로는 매우 단순하다. 다음과 같은 세 가지 작업을 수행하면 된다.
온라인 매니페스트 파일 작성
브라우저에 매니페스트 파일 정보 전달
서버에서 MIME 유형 설정


 
 오프라인 매니페스트 파일

Listing 1. 간단한 캐시 매니페스트 파일

Listing 2. 웹 애플리케이션의 디렉토리 구조(텍스트 버전)

브라우저에 매니페스트 파일 정보 전달

Listing 3. 오프라인에서 사용 가능한 웹 페이지

그림 1. iPhone 시뮬레이터에서 실행 중인 오프라인 웹 애플리케이션

웹 서버 구성

Listing 4. web.xml을 구성하여 MIME 유형 설정하기

Listing 5. mime.types에서 MIME 유형 설정

고급 예제

Listing 6. 수정된 HTML

Listing 7. 페이지 초기화 Javascript

Listing 8. Gym 트윗 표시

Listing 9. 수정된 캐시 매니페스트 파일

요약
Mosaic가 개발된 이후 웹 애플리케이션은 크게 발전하였다. 모바일 웹 애플리케이션은 훨씬 더 진보했다. WML(Wireless Markup Language)만 사용하는 WAP 폰의 시대는 거의 사라졌다. 이제는 개발자들이 데스크탑 브라우저에 대해서조차 질문하지 않는 사항을 모바일 브라우저에 대해서는 질문을 한다. 오프라인 기능은 이러한 기능 중 하나라고 할 수 있다. HTML 5에 지정된 표준은 크게 발전하였으며 이제는 개발자들이 모바일 웹 애플리케이션을 오프라인에서 사용할 수 있게 하는 과정이 단순해졌다. 이 시리즈의 다음 기사에서는 또 다른 HTML 5 표준인 Web Brokers를 사용하여 모바일 웹 애플리케이션의 성능을 대폭 개선하는 방법을 살펴볼 예정이다.



기사 원문으로 가시면 에제 코드와 자세한 설명을 볼 수 있습니다
아이베엠 디벨로퍼 웍스 : http://www.ibm.com/developerworks/kr/
기사 원문 주소 : http://www.ibm.com/developerworks/kr/library/x-html5mobile3/index.html

신고





Posted by 파란물







기사 원문으로 가시면 자세한 설명과 소스코드 자료를 볼수 있습니다




요약: HTML 5의 가장 유용한 새 기능 중 하나는 로컬 스토리지의 표준화입니다. 마침내 웹 개발자들은 모든 클라이언트측 데이터를 4KB 쿠키에 맞추지 않아도 됩니다. 이제는 단순한 API로 대용량 데이터를 클라이언트에 저장할 수 있습니다. 이는 캐싱에 적합한 완벽한 메커니즘이기 때문에 애플리케이션의 속도를 극적으로 개선할 수 있습니다. 속도는 데스크탑 애플리케이션보다 훨씬 느린 연결에 의존하는 모바일 웹 애플리케이션에 중요한 요소입니다. HTML 5에 대한 이 시리즈에서 두 번째인 이 기사에서는 로컬 스토리지 사용 방법 및 로컬 스토리지 디버그 방법에 대해 살펴보고 로컬 스토리지를 사용하여 모바일 웹 애플리케이션을 개선하는 다양한 방법에 대해서도 살펴봅니다.



로컬 스토리지 101
 웹 개발자들은 오랫동안 클라이언트에 데이터를 저장하기 위해 고심해 왔다. HTTP 쿠키는 이러한 목적을 위해 혹사당해 왔다. 개발자들은 HTTP 스펙에 의해 할당된 4KB에 엄청난 양의 데이터를 우겨넣었다. 이유는 간단하다. 대화식 웹 애플리케이션은 다양한 이유로 데이터를 저장해야 하기 때문에 서버에 해당 데이터를 저장하는 데 충분하지 않거나 안전하지 않거나 적합하지 않은 경우가 자주 있다. 수년 동안 이러한 문제에 대한 여러가지 대안이 있었다. 다양한 브라우저에서 소유 스토리지 API를 소개했다. 또한 개발자들은 JavaScript를 통해 노출하여 Flash Player의 확장된 스토리지 기능을 활용했다. 이와 비슷하게 Google에서는 다양한 브라우저를 위해 Gears 플러그인을 작성했으며 여기에는 스토리지 API가 포함되어 있었다. 일부 JavaScript 라이브러리에서 이러한 차이점을 완화하기 위해 노력한 것은 놀랄만한 일이 아니다. 즉, 이러한 라이브러리에서는 단순한 API를 제공한 후 어떤 스토리지 기능이 존재하는지 확인한다(소유 브라우저 API이거나 플래시와 같은 플러그인이 될 수 있음).
 
 웹 개발자들을 위해 다행히도 마침내 HTML 5 스펙에 광범위한 브라우저에서 구현되는 로컬 스토리지의 표준이 포함되어 있다. 사실 이 표준은 가장 신속하게 채택된 항목 중 하나였으며 Microsoft®, Internet Explorer®, Mozilla Firefox, Opera, Apple Safari 및 Google Chrome과 같은 모든 주요 브라우저의 최신 버전에서 지원된다. 모바일 개발자에게 특히 중요한 점은 iPhone과 Android(버전 2.0 이상)를 사용하는 전화에 있는 것과 같은 WebKit 기반 브라우저와 Mozilla의 Fennec과 같은 기타 모바일 브라우저에서 지원된다는 것이다. 이러한 내용을 염두에 두고 API에 대해 살펴보자.



Storage API

예제: 로컬 스토리지를 사용한 캐싱

Listing 1. 가장 기본적인 Twitter 검색

로컬로 저장하기

Listing 2. 검색 및 저장하기

그림 1. 로컬로 캐시된 트윗

신속한 로컬 데이터 로딩

Listing 3. 로컬로 먼저 검색하기

스토리지 이벤트

Listing 4. 상위 10개의 검색 계산하기

Listing 5. 페이지 초기화하기

Listing 5. 페이지 초기화하기

요약
개발자는 클라이언트에 갑자기 엄청난 스토리지 공간이 생기면 해방감을 느낄 수 있다. 오랫동안 작업해 온 웹 개발자에게 이것은 수년 동안 바라왔지만 버그가 많은 방법에 의존하지 않는 적절한 방법이 없었던 작업에 대한 문을 여는 것이다. 모바일 개발자에게는 데이터의 로컬 캐싱을 실제로 가능하게 하기 때문에 더 흥미로운 것이다. 애플리케이션 성능의 극적인 향상 외에도 로컬 캐싱은 모바일 웹 애플리케이션의 흥미로운 또다른 새 기능인 오프라인 전환을 가능하게 하는 핵심이다. 이 시리즈의 다음 기사에서는 이 주제에 대해 다룬다.



기사 원문으로 가시면 에제 코드와 자세한 설명을 볼 수 있습니다
아이베엠 디벨로퍼 웍스 : http://www.ibm.com/developerworks/kr/
기사 원문 주소 : http://www.ibm.com/developerworks/kr/library/x-html5mobile2/

신고





Posted by 파란물