보물창고/Programming2012.02.17 16:28








웹 프로젝트 테스트 입니다
Javascript cookie HTML 이용 웹 프로그래밍 연습 [저장, 삭제, 읽어오기]
첫 페이지에서 내용을 입력 받아 쿠키에 저장후 다시 페이지로 돌아와 쿠키 내용으로 페이지를 대체 하는 구성 입니다

index.html 페이지에서 정보를 입력 받아 cookie.html 로가서 쿠키에 저장하고
다시 index.html 페이지로 와서 저장된 쿠키의 내용을 페이지에 출력 합니다 





입력하는 폼




입력된 폼





입력후 submit를 누르면 쿠키를 저장하는 페이지로 가고 1초 후 되돌아 옴



다시 되돌아온 페이지에 저장된 쿠키의 내용을 가져와 출력



cookieTest.zip




소스 코드 보기

더보기



신고





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 파란물







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



요약
 5편의 기사로 구성된 이 시리즈의 첫 번째 기사에서는 모바일 웹 애플리케이션에 사용할 수 있는 가장 유명한 신기술 중 하나인 geolocation에 대해 살펴봅니다. 모든 하이엔드 스마트폰에 GPS가 내장되어 있으므로 이제 웹 애플리케이션에서 GPS를 사용하는 방법에 대해 알아봅시다. 이 기사에서는 geolocation 표준의 다양한 기능을 사용하는 방법과 이 표준을 일부 유명한 웹 서비스와 함께 사용하여 흥미로운 모바일 매시업을 작성하는 방법에 대해 설명합니다.



이 시리즈의 정보
 HTML 5는 과장된 기술이지만 거기에는 그럴만한 이유가 있다. 이 기술은 데스크탑 애플리케이션 기능을 브라우저로 가져오는 기술적인 티핑 포인트가 될 것이기 때문이다. 기존 브라우저에서도 전망이 좋지만 모바일 브라우저에서는 그 가능성이 더욱 높다. 게다가 가장 유명한 모바일 브라우저에 HTML 5 스펙의 여러 중요한 부분이 이미 채택 및 구현되어 있다. 5편의 기사로 구성된 이 시리즈에서는 HTML 5에 포함되어 있는 신기술 중 모바일 웹 애플리케이션 개발에 큰 영향을 줄 몇 가지 기술에 대해 자세히 살펴본다. 이 시리즈의 각 기사에서는 최신 모바일 웹 브라우저에서 사용할 수 있는 HTML 5 기능(예를 들어, iPhone 및 Android 기반 장치에서 사용되고 있는 기능)을 보여 주는 실질적인 모바일 웹 애플리케이션을 개발한다.



기본: 수정사항 얻기
 Geolocation 자체는 조금 새로운 기술이며 사용자 위치를 확인하는 기능을 제공한다. 하지만 이 정보를 확인한 후 사용자에게 보고한다면 별로 유용하지 않을 것이다. 사람들이 자신의 정확한 위도 및 경도에 관심을 갖는 이유가 무엇일까? 위치를 사용할 수 있는 다른 데이터 및 서비스와 함께 이 기술을 사용하면 흥미로운 결과를 얻을 수 있다. 이러한 서비스는 거의 모두 사용자의 위도 및 경도를 입력으로 받는다. 이러한 정보만 필요한 경우도 있다. 이제 이 정보를 얻는 방법에 대해 알아보자. Listing 1에서는 이 작업을 위한 표준 JavaScript API를 보여 준다.



Listing 1. 사용자 찾기: getCurrentPosition

Twitter와 통합하기

Listing 2. 로컬 Twitter 검색

그림 1. iPhone에서 Twitter 검색하기 

고급: 추적

Google Maps와 통합하기

Listing 3. 애플리케이션을 Geolocation에 맵핑하기

Listing 4. 좌표 코딩 및 추적 취소 함수

그림 2. 추적 애플리케이션

요약
 이 기사에서는 모바일 웹 애플리케이션에서 geolocation API를 사용하는 방법을 살펴보았다. GPS는 매우 멋진 기능이지만 복잡하다. 하지만 지금까지 살펴본 것처럼 geolocation에 대한 W3C 표준에서는 매우 간단한 API를 제공한다. 이 API는 손쉽게 사용자의 위치를 받고 지속적으로 추적할 수 있다. 그 다음부터는 위치를 지원하는 다양한 웹 서비스에 좌표를 전달할 수 있다. 그리고 이 기사를 읽고 있는 독자 중에는 고유한 위치 인식 서비스를 개발 중인 개발자도 있을 것이다. 이 시리즈의 Part 2에서는 HTML 5 및 모바일 웹 애플리케이션에서 로컬 스토리지를 활용하여 모바일 웹 애플리케이션의 성능을 향상시키는 방법에 대해 설명한다.



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

신고

'보물창고 > developerWorks' 카테고리의 다른 글

campus wizard 9기, IBMer가 되고 싶은 사람 모두 모여라! [IBM on Campus]  (0) 2011.07.27
HTML 5로 모바일 웹 애플리케이션 작성하기, Part 4: Web Workers를 사용하여 모바일 웹 애플리케이션 속도 높이기  (0) 2011.06.28
HTML 5로 모바일 웹 애플리케이션 작성하기, Part 3: HTML 5를 사용하여 모바일 웹 애플리케이션을 오프라인에서 작동하게 하기  (0) 2011.06.28
HTML 5로 모바일 웹 애플리케이션 작성하기, Part 2: HTML 5로 모바일 웹 애플리케이션에 대한 로컬 스토리지 잠금 해제하기  (0) 2011.06.28
[JSP] 게시판 만들기1HTML 5로 모바일 웹 애플리케이션 작성하기, Part 1: HTML 5, geolocation API 및 웹 서비스를 결합하여 모바일 매시업 작성하기  (0) 2011.06.28
Google App Engine으로 XML 데이터 가져오기(Google App Engine의 지속적 오브젝트 데이터베이스로 XML 파일에 로컬로 저장된 대용량 데이터 업로드)  (0) 2011.05.25
UTF-8으로 XML 문서 인코딩하기 (힌트: 사이즈와는 관계 없음)  (0) 2011.05.25
xml을 사용하는 좋은 습관 열가지(xml을 좀 더 효율적이고 효과적으로 사용하자)  (0) 2011.05.25
색다른 앱 공개 오디션 2011 똑똑한 지구를 위한 똑똑한 애플리케이션 공모전 시즌II (어플, 웹, 모바일, IBM, SK, redhat, 중소기업청 Smarter Applicationfor Smarter Planet,)  (0) 2011.04.20





Posted by 파란물
보물창고/Programming2011.03.30 15:12








html 태그 정리된 곳입니다

아래 주소 링크 겁니다

http://web.lge.cn:8000/system/?mid=html&document_srl=506








더보기

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





Posted by 파란물
TAG html, 태그