[HTML5] HTML5 API의 기능

HTML5 기초, Part 3: HTML5 API의 기능

출처 : http://www.ibm.com/developerworks/kr/library/wa-html5fundamentals3/index.html#web-workers
 HTML5는 웹과 클라우드에서 현재 독자가 비즈니스를 하는 방식 면에서 획기적인 변화를 반영합니다. 이 기사는 HTML5의 변화에 대한 관심을 끌기 위해 구성되었으며 총 네 파트로 소개되는 시리즈 중 세 번째 파트입니다. 새 태그와 페이지 구성을 시작으로, 웹 페이지 설계에 대한 높은 수준의 정보, 양식의 작성, API의 사용 및 가치, 마지막으로 Canvas가 제공하는 창의적인 기회를 제시합니다. 이번 기사에서는 함수를 시연하는 예제 페이지를 사용하여 HTML5 API를 소개합니다.

목차


크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/08/21 11:22 2011/08/21 11:22
, , ,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6397

Episode - 아이패드용 매거진 Pleiades Corp.
 [펌] 웹앱을 만드는 사람들의 모임

Native 가 아닌 HTML5/CSS3/jQuery 로 만든 저희 어플을 소개 합니다.

실력있는 디자이너분들과 다양한 시도를 하면서 이번호를 내게 되었습니다.


특집은 일본대지진에 관해서 다루었고,

그 이외에 일러스트아트, 미디어아트, 마린블루스. 등의 다양한 꼭지들로 컨텐츠가 구성되었습니다.


webview로 모든 컨텐츠를 보여주기에 제약사항도 많았고

아직 불안한 요소도 많지만 보시면서 냉정한 평가를 해주시면,

다음달에는 조금 더 나은 모습으로 만들 수 있을거라고 생각합니다.

http://itunes.apple.com/kr/app/id401413450?mt=8#

http://cafe.naver.com/webappdev.cafe?i ··· 3Bamp%3B

---------------------------------------------------------

소개동영상

http://youtu.be/_UGFtnoYCsw
-------------------------------------------------------------------
주소링크!!!
http://itunes.apple.com/kr/app/id401413450?mt=8

설명

한국 최초의 아이패드 전용 잡지 입니다.


 새롭게 선보이는 매체인《EPISODE》의 모토는 새로움입니다. 터치 인터페이스라는 새로운 환경에 맞게 컨텐츠, UX, 컨텐츠와 독자와의 관계를 완전히 새롭게 재정의하고자 합니다. 한국을 넘어 아시아 시장에서 아이패드 컨텐츠의 선도적 역할을 해 나가는《EPISODE》가 되겠습니다.





이번호에서는 일본의 대재앙에 대해 살펴보고자 합니다. 데이터와 인포그래픽 그리고 아이패드에서만 가능한 UX를 통해 일본의 대재앙이 일본만의 문제가 아닌 전세계의 문제이며 바로 우리의 문제임을 알아보고자 했습니다. 


트위터에서 최고의 미디어 파워를 자랑하는 독설닷컴 고재열 시사인 기자와의 인터뷰 기사도 있습니다. 트위터와 인터넷에서 많은 논쟁을 통해 다듬어진 고재열 기자의 생각과 입장을 들어보시기 바랍니다.

특히 이번호는 디자인이 확 바뀌었습니다. 터치 인터페이스라는 새로운 매체에서 발행되지만 책 혹은 잡지의 기본을 다시 생각하며 디자인에 많은 신경을 썼습니다.


《EPISODE》는 앞으로도 꾸준하게 UX 분야에서의 실험을 진행할 예정입니다. 독자의 움직임에 반응하는 디자인, 사용자와 커뮤니케이션하는 컨텐츠, 그리고 밀도 있고 창조적인 새로운 형식의 미디어를 경험해보시기 바랍니다.


iPad 스크린샷 1
iPad 스크린샷 2
iPad 스크린샷 3
iPad 스크린샷 4
iPad 스크린샷 5
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/05/19 09:36 2011/05/19 09:36
, , ,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6170

[html] html5 storage - Local, Session

Having fun with HTML5 — Local Storage and Session Storage


API

The full API spec­i­fi­ca­tion for the local­Stor­age and ses­sion­Stor­age objects can be found here. At the time of writ­ing, this is how the com­mon Stor­age inter­face look:

image

Demo

I’ve put together a quick demo here to illus­trate how to detect and use the local and ses­sion stor­age to get, set, remove and clear stored items (well, basi­cally, cov­ers each of the avail­able meth­ods on the Stor­age inter­face above).

The page itself is sim­ple and crude, just a cou­ple of <div> and most impor­tantly two tables which I use to show all the key value pairs stored in the local and ses­sion storage:

image

Intro­duc­ing the new place­holder attribute

You might have noticed that the two text boxes had place­holder text sim­i­lar to that famil­iar search box in Firefox:

text boxes with place holder text Firefox search box

This is done using HTML5’s place­holder attribute for the <input> tag:

1
2
<input id="keyText" placeholder="Enter key"/>
<input id="valueText" placeholder="Enter value"/>

Nice and easy, eh? ;-)

Set­ting an item

To add a new key value pair or update the value asso­ci­ated with an exist­ing key, you just have to call the setItem method on the intended stor­age object:

1
2
3
4
5
6
7
8
9
10
11
12
13
// adds a new key to both local and session storage
function setKey() {
    var key = $("#keyText").val();
    var value = $("#valueText").val();
 
    if (Modernizr.localstorage) {
        localStorage.setItem(key, value);
    }
    if (Modernizr.sessionstorage) {
        sessionStorage.setItem(key, value);
    }
    showKeys();
}
Remov­ing an item

Ear­lier in the showStorageKeys(type, table) func­tion, I added a row to the rel­e­vant table for each key value pair in the stor­age includ­ing a but­ton with a han­dler for the onclick event. The han­dlers are cre­ated with the cor­rect stor­age type (“local” or “ses­sion”) and key for the cur­rent row baked in already so that they will call the removeItem(type, key) func­tion with the cor­rect parameters:

1
2
3
4
5
6
7
// removes an item with the specified key from the specified type of storage
function removeItem(type, key) {
    // get the specified type of storage, i.e. local or session
    var storage = window[type + 'Storage'];
    storage.removeItem(key);
    showKeys();
}
Clear­ing all items

Finally, the ’”Clear” but­tons under­neath the tables call the clear­LocalKeys() and clearS­es­sion­Keys() func­tion to remove all the key value pairs in the cor­re­spond­ing storage:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function clearLocalKeys() {
    clearKeys("local");
}
 
function clearSessionKeys() {
    clearKeys("session");
}
 
// clear all the held keys in the specified type of storage
function clearKeys(type) {
    // get the specified type of storage, i.e. local or session
    var storage = window[type + 'Storage'];
 
    // clear the keys
    storage.clear();
 
    showKeys();
}

크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/05/03 22:13 2011/05/03 22:13
, , ,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6139

html5, 모바일기기에서 사용가능한 차트. 퓨전차트
http://www.fusioncharts.com/PowerCharts/

PowerCharts

PowerCharts is a set of advanced charting widgets for usage in specialized applications like network diagrams, performance analysis, hierarchical structures, stock prices and financial planning.

  • Render charts in both Flash and JavaScript (HTML5); works with PCs, Macs, iPads, iPhones and a majority of other mobile devices
  • Integrate with any server-side technology (ASP.NET, PHP, ASP, RoR, JSP, ColdFusion etc.) and database
  • Highly interactive capabilities like visually editing data, adding data nodes at runtime and submitting modified data back to server
  • Extensive documentation and samples get you started in minutes
Add the Rich Internet Applications functionality to your web applications with PowerCharts

Chart GalleryDownloadPowerCharts Documentation


Chart Types

PowerCharts offers 16 different chart types each with their own specialized applications:

  1. Drag Node Chart

    Drag Node ChartPowerful diagramming tool for network diagrams & process flow diagrams

  2. Heat Map Chart

    Heat Map ChartTabular representation of complex data with user-defined color ranges

  3. Multi-Axis Line Chart

    Multi-Axis Line ChartAdvanced line chart with multiple axes for comparing multiple parameters

  4. Interactive Candlestick Chart

    Interactive Candlestick ChartHighly interactive chart for plotting stock data and commodity prices

  5. Waterfall Chart

    Waterfall ChartShows the cumulative effect of positive and negative values on an initial value

  6. Drag-able Charts

    Drag-able ChartsOffers visual modification of the plotted data simply by dragging the data plots

  7. Multi-Level Pie Chart

    Multi-Level Pie ChartModern method for displaying hierarchical relationships

  8. Box and Whisker Chart

    Box and Whisker ChartDisplay the spread of a batch of data using median, quartiles, limits, mean and deviations

  9. Logarithmic Charts

    Logarithmic ChartsFor plotting very large and very small values on the same chart on a logarithmic scale

  10. Radar (Spider) Chart

    Radar (Spider) ChartEffective tool for comparing multiple entities based on different features

  11. Spline Charts

    Spline ChartsSimilar to a line chart except that it draws a fitted curve through the data points

  12. Step Line Chart

    Step Line ChartSpecialized line chart with vertical and horizontal lines to connect data points

  13. Select Scatter Chart

    Select Scatter ChartScatter Chart where data points can be visually selected & processed

  14. Inverse Axis Charts

    Inverse Axis ChartsPlot data on an inverted scale, like ranks and race timings

  15. Error Charts

    Error ChartsShows the extent of possible error (or deviation) in data using I-shaped bars

  16. Kagi Chart

    Kagi ChartFor noise free analysis of equity/commodity prices

크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/04/19 10:23 2011/04/19 10:23
, , , , ,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6101

[HTML] WebSocket.org - HTML5 websocket






크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/04/06 10:43 2011/04/06 10:43
,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6058

HTML5 Doctor : helping you implement HTML5 today.

About

HTML5 Doctor is a collaboration among Rich Clark, Bruce Lawson, Jack Osborne, Mike Robinson, Remy Sharp, Tom Leadbetter, and Oli Studholme.

The idea for the site came about following an HTML5 meetup after 2009′s Future of Web Design conference in London. We realized there wasn’t a resource for people who wanted to learn more about the hows and whys of implementing HTML5, so we decided to build one!

Originally, there were five of us (Rich, Bruce, Jack, Mike, and Tom). Shortly before launch, Remy came on board too. Then in early 2010, Oli made us an offer we couldn’t refuse, and we became seven.

We’d also like to offer a massive thank you to Brandan Lennox, who has been copy editing our posts for some time now. Brandan does a superb job of editing our articles and making them easy to read.

Our Aims

We will publish articles relating to HTML5, its semantics, and how to use it right now. We also invite questions via Ask the Doctor. We’ll post answers in future articles so that everyone can benefit.

We acknowledge that we may sometimes get things wrong and that people may disagree with our interpretation of the HTML5 specification. But that’s another of the reasons that this site exists: the spec has yet to be formalised, and we can all do our bit to make it what we want. A “specification for the people” if you will.

Get involved

We invite you to freely comment, question, congratulate, argue, and suggest in the articles’ comments sections, and we’ll do our best to answer in a considered and reasoned manner. As we said above, the HTML5 specification has yet to be finalised, so we can all have a say, and we invite you to do so here on our site.

We hope you find HTML5 Doctor a useful resource. If you have any questions relating to HTML5 and how to implement it, just ask the doctor!


크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/04/06 09:14 2011/04/06 09:14
, ,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6057

[javascript] Joapp - http://joapp.com/

JoJavaScript Framework for HTML5
http://joapp.com/
Document : http://joapp.com/docs/index.html
Download : https://github.com/davebalmer/jo/downloads

Jo is a JavaScript framework for HTML5 capable browsers and devices. It was originally designed to work on mobile platforms as a GUI and light data layer on top of PhoneGap. Since its creation, Jo has also been tested successfully as a lightweight framework for mobile browsers, newer desktop browsers, and even Dashboard widgets.


Jo는  HTML5를 지원하는 브라우저와 장치를 위한
자바 스크립트 프레임 워크입니다.
그것은 원래의 GUI와 PhoneGap 위에 가벼운 데이터 레이어로
모바일 플랫폼에서 작동하도록 설계되었습니다.
그것의 창조부터 조는 또한 모바일 브라우저를위한
경량 프레임 워크,
새로운 데스크톱 브라우저,
그리고 심지어는 대시보드 위젯으로
성공적으로 테스트되었습니다.

Contents

Developer Guide

API Reference

Index


Jo JavaScript Framework: Cross Platform Demo




크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/04/05 17:26 2011/04/05 17:26
, , , , , ,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6053

Html5Demos : http://html5demos.com/
Html5를 응용하는 데모들을 보여준다.
Geolocation, CrossDomain, Canvas, Video, Drag&Drop 등이 있다.

HTML 5 Demos and Examples

HTML 5 experimentation and demos I've hacked together. Click on the browser support icon or the technology tag to filter the demos (the filter is an OR filter).

Introducing HTML5 by Bruce Lawson & Remy Sharp is the first full length book dedicated to HTML5.

Get it now and kick some HTML5 ass!

Filter demos: canvas contenteditable dataset dnd events file-api geolocation history manifest offline postMessage sql-database storage video websocket workers



크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/04/04 18:12 2011/04/04 18:12
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6044

jsdoit - Share Javascript, HTML5 and CSS
사용자 삽입 이미지

 jsdo.it 무엇보다 독특한 것은 다른 사람이 쓴 코드를 버튼 1 개로 복제, 개조있는 곳에이 기능을 "포크"라고 부르고 있습니다. 예를 들어, 위의 <canvas> 샘플 포크하려면 jsdo.it에 로그인하여세부 정보 페이지에 가서, "Fork"버튼을 클릭합니다.

 그러면 앞의 코드의 사본을 그 자리에서 편집 시작할 수 있습니다. 이번에는 빛이 반짝반짝 너무 눈부셨다 때문에 속도를 10 분의 1로하여 화면의 변화를 관찰할 수 있도록하여 보았습니다 (포크하여 만들어진 작품은여기).

 이처럼 스스로 처음부터 쓰지 않아도 다른 사람이 만든 코드를 직접 만져 봄으로써, HTML5의 기능을 쉽게 테스트할 수 있습니다.


크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/03/29 11:25 2011/03/29 11:25
, ,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6009

'모바일웹과 웹개발자가 2011년 주목해야 하는 기술들'

Modern Javascript
: web2.0과 함께 자바스크립트 개발에 초점이 맞춰졌다.
  다양한 OpenAPI 개발환경이 구축되고, 다양한 모바일 디바이스에서 HTML5로
  Application을 개발할 수 있기 때문에 브라우저들은 HTML5기술을 수용하기 위해
  경쟁 중이며, 다양한 자바스크립트 라이브러리들이 나오고 개발되어지고 있다.
  HTML5는 기존의 문서기반 정보를 탐색하기위한 방식에 불과했다면,
  HTML웹환경에서 Application platform을 그대로 가지게 된 것이고 API를 가지고
  HTML5기능을 접목시키면 기존에 데스크탑에 있었던 application을
   Web에서 그대로 구현 가능해진 것이다.

  JavaScript + Html5 + Ideas, Libraries, Tool, API = Marketplace

1. HTML5
     ▷ HTML5가 모바일에 중요한 이유는 각 모바일 플랫폼용 네이티브앱을
          기간내에 모두 만들기는 어렵기 때문이다.
     ▷ 한글 HTML5 Spec : http://clearboth.org/html5/spec.html
     ▷ HTML5의 Tutorial & Presentation : http://www.html5rocks.com/
     ▷ IE에서 HTML5에 새로 추가된 element들을 사용할수 있게 도와준다.
          :  http://code.google.com/p/html5shiv/
     ▷ 브라우저가 신기능을 지원하는지 체크하여 조건분기 할 수 있게 도와준다.
          : http://www.modernizr.com/
     ▷ 웹개발자들을 위해 정리된 HTML5 Spec : http://developers.whatwg.org/
     ▷ HTML5의 Video, Audio 지원이 안되는 브라우저를 지원한다.
          : http://videojs.com/, http://kolber.github.com/audiojs/
     ▷ HTML5 Initializer라는 서비스는 HTML5템플릿을 제공하서 프로젝트 진행을 빠르게
          시작할 수 있도록 한다. : http://www.cssclip.com

2. Javascript
     ▷ zepto.js 는 모바일을 위한 자바스크립트 라이브러리. jQuery 와 호환되는 문법을
          사용하지만 jQuery보다 가벼운 용량이어서 용량에 대한 부담을 줄여준다.
     ▷ 서버사이드 자바스크립트 node.js는 구굴크롬의 V8엔진을 사용하며,
          대용량 서버에 적용할수록 기존 서버에 비해 좋은 효율을 보여준다.
          자바스크립트로 서버의 모든 기능들을 활용할 수 있도록 계속 개발되어지고 있다.
     ▷ 브라우저가 아닌 서버/데스크탑 어플을 자바스크립트로 작성하기 위한 Common.js
          란 스펙이 있는데, 이는 node.js를 따르고 있고 그 외에도 CommonJS를 통한
          많은 시도들이 되어지고 있다.
     ▷ CoffeeScript 자바스크립트로 컴파일되는 간단한 언어
          .: 나 { 가 없는 영어와 같은 간단한 문법을 사용하는데, 문법이 간결해지고 더 빠르게
           실행될 수 있도록 컴파일 해주기 때문에 익숙해지면 굉장히 유용하다.



3. Responsive Web Design
     ▷ 다양한 사이즈의 해상도에 자동으로 대응하기 위한 웹페이지 제작 방법
          - Screen Size, Platform, Orientation에 반응

4. Web App Stores
     ▷ Crome Webstore https://chrome.google.com/webstore
          : 구글에서 payment 부분을 개발해놓았기 때문에 웹앱 개발자들이 자신이 만든
             앱을 쉽게 팔아 수직을 얻을 수 있는 환경이 생겼다는 점에서 큰 의미
     ▷ GetJar http://www.getjar.com/
          : 멀티플랫폼 앱스토어, 모든 플랫폼의 앱을 동시에 취급,판매한다.
             Getjar 는 사용자의 단말정보를 저장하여 사용자에게 필요한 앱만을 리스트에
              보여주어 사용자가 신경쓰지 않고 편하게 사용 할 수 있다.

5. Hybrid App
     ▷ Native App  과 WebApp의 기술을 합친 형태.
     ▷ 외형은 네이티브, 내용은 웹앱으로 만든것을 말한다.
     ▷ 멀티플렛폼이 가능한 장점이 있으나,
           네이티브 대비 웹부분의 속도가 문제가 되기도 한다.
     ▷ Hybrid App의 범위
         : 서버에 접속해서 웹앱을 실행하는 방식부터 NativeApp내에서 약간의 WebView를
            사용하는 방식까지 해당되는 범위가 넓고, 업데이트가 잦은 부분은 웹으로
            구현하면 관리에 용이하다.
     ▷ Hybrid App 개발방법.
          : 작업은 웹앱으로 모두 마친 뒤에 Appspresso, PhoneGap, Titanium 같은
             프레임웍으로 감싸준다. 프레임웍에서 Device 기능을 컨트롤 할 수 있는
             기능을 제공하여 이용할 수 있다.


크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/03/28 17:18 2011/03/28 17:18
, , , , , , ,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6004


블로그 이미지

- 홍반장

Archives

Recent Trackbacks

Calendar

«   2018/10   »
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      
Statistics Graph

Site Stats

Total hits:
107250
Today:
1
Yesterday:
5