(0) 
(0)Posted by 홍반장
Native 가 아닌 HTML5/CSS3/jQuery 로 만든 저희 어플을 소개 합니다.
실력있는 디자이너분들과 다양한 시도를 하면서 이번호를 내게 되었습니다.
특집은 일본대지진에 관해서 다루었고,
그 이외에 일러스트아트, 미디어아트, 마린블루스. 등의 다양한 꼭지들로 컨텐츠가 구성되었습니다.
webview로 모든 컨텐츠를 보여주기에 제약사항도 많았고
아직 불안한 요소도 많지만 보시면서 냉정한 평가를 해주시면,
다음달에는 조금 더 나은 모습으로 만들 수 있을거라고 생각합니다.
http://itunes.apple.com/kr/app/id401413450?mt=8#
http://cafe.naver.com/webappdev.cafe?i ··· 3Bamp%3B
---------------------------------------------------------
소개동영상
한국 최초의 아이패드 전용 잡지 입니다.
새롭게 선보이는 매체인《EPISODE》의 모토는 새로움입니다. 터치 인터페이스라는 새로운 환경에 맞게 컨텐츠, UX, 컨텐츠와
독자와의 관계를 완전히 새롭게 재정의하고자 합니다. 한국을 넘어 아시아 시장에서 아이패드 컨텐츠의 선도적 역할을 해
나가는《EPISODE》가 되겠습니다.
이번호에서는 일본의 대재앙에 대해 살펴보고자 합니다. 데이터와 인포그래픽 그리고 아이패드에서만 가능한 UX를 통해 일본의 대재앙이 일본만의 문제가 아닌 전세계의 문제이며 바로 우리의 문제임을 알아보고자 했습니다.
트위터에서 최고의 미디어 파워를 자랑하는 독설닷컴 고재열 시사인 기자와의 인터뷰 기사도 있습니다. 트위터와 인터넷에서 많은 논쟁을 통해 다듬어진 고재열 기자의 생각과 입장을 들어보시기 바랍니다.
특히 이번호는 디자인이 확 바뀌었습니다. 터치 인터페이스라는 새로운 매체에서 발행되지만 책 혹은 잡지의 기본을 다시 생각하며 디자인에 많은 신경을 썼습니다.
《EPISODE》는 앞으로도 꾸준하게 UX 분야에서의 실험을 진행할 예정입니다. 독자의 움직임에 반응하는 디자인, 사용자와 커뮤니케이션하는 컨텐츠, 그리고 밀도 있고 창조적인 새로운 형식의 미디어를 경험해보시기 바랍니다.
(0) (0)Posted by 홍반장
The full API specification for the localStorage and sessionStorage objects can be found here. At the time of writing, this is how the common Storage interface look:
I’ve put together a quick demo here to illustrate how to detect and use the local and session storage to get, set, remove and clear stored items (well, basically, covers each of the available methods on the Storage interface above).
The page itself is simple and crude, just a couple of <div> and most importantly two tables which I use to show all the key value pairs stored in the local and session storage:
You might have noticed that the two text boxes had placeholder text similar to that familiar search box in Firefox:
This is done using HTML5’s placeholder attribute for the <input> tag:
1 2 | <input id="keyText" placeholder="Enter key"/><input id="valueText" placeholder="Enter value"/> |
Nice and easy, eh? 
To add a new key value pair or update the value associated with an existing key, you just have to call the setItem method on the intended storage object:
1 2 3 4 5 6 7 8 9 10 11 12 13 | // adds a new key to both local and session storagefunction setKey() { var key = $("#keyText").val(); var value = $("#valueText").val(); if (Modernizr.localstorage) { localStorage.setItem(key, value); } if (Modernizr.sessionstorage) { sessionStorage.setItem(key, value); } showKeys();} |
Earlier in the showStorageKeys(type, table) function, I added a row to the relevant table for each key value pair in the storage including a button with a handler for the onclick event. The handlers are created with the correct storage type (“local” or “session”) and key for the current row baked in already so that they will call the removeItem(type, key) function with the correct parameters:
1 2 3 4 5 6 7 | // removes an item with the specified key from the specified type of storagefunction removeItem(type, key) { // get the specified type of storage, i.e. local or session var storage = window[type + 'Storage']; storage.removeItem(key); showKeys();} |
Finally, the ’”Clear” buttons underneath the tables call the clearLocalKeys() and clearSessionKeys() function to remove all the key value pairs in the corresponding 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 storagefunction clearKeys(type) { // get the specified type of storage, i.e. local or session var storage = window[type + 'Storage']; // clear the keys storage.clear(); showKeys();} |
(0) (0)Posted by 홍반장
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.
Add the Rich Internet Applications functionality to your web applications with PowerCharts
PowerCharts offers 16 different chart types each with their own specialized applications:
Powerful diagramming tool for network diagrams & process flow diagrams
Tabular representation of complex data with user-defined color ranges
Advanced line chart with multiple axes for comparing multiple parameters
Highly interactive chart for plotting stock data and commodity prices
Shows the cumulative effect of positive and negative values on an initial value
Offers visual modification of the plotted data simply by dragging the data plots
Display the spread of a batch of data using median, quartiles, limits, mean and deviations
For plotting very large and very small values on the same chart on a logarithmic scale
Effective tool for comparing multiple entities based on different features
Similar to a line chart except that it draws a fitted curve through the data points
Specialized line chart with vertical and horizontal lines to connect data points
Scatter Chart where data points can be visually selected & processed
Shows the extent of possible error (or deviation) in data using I-shaped bars
(0) (0)Posted by 홍반장
WebSocket.org enable browser : safari, cromeThe HTML5 Web Sockets specification defines an API that enables web pages to use the Web Sockets protocol for two-way communication with a remote host. It introduces the WebSocket interface and defines a full-duplex communication channel that operates through a single socket over the Web. HTML5 Web Sockets provide an enormous reduction in unnecessary network traffic and latency compared to the unscalable polling and long-polling solutions that were used to simulate a full-duplex connection by maintaining two connections.
HTML5 Web Sockets account for network hazards such as proxies and firewalls, making streaming possible over any connection, and with the ability to support upstream and downstream communications over a single connection, HTML5 Web Sockets-based applications place less burden on servers, allowing existing machines to support more concurrent connections. The following figure shows a basic WebSocket-based architecture in which browsers use a WebSocket connection for full-duplex, direct communication with remote hosts.
(0) (0)Posted by 홍반장
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.
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.
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!
(0) (0)Posted by 홍반장
(0) (0)Posted by 홍반장
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!
(0) (0)Posted by 홍반장
jsdo.it 무엇보다 독특한 것은 다른 사람이 쓴 코드를 버튼 1 개로 복제, 개조있는 곳에이 기능을 "포크"라고 부르고 있습니다. 예를 들어, 위의 <canvas> 샘플 포크하려면 jsdo.it에 로그인하여세부 정보 페이지에 가서, "Fork"버튼을 클릭합니다.
그러면 앞의 코드의 사본을 그 자리에서 편집 시작할 수 있습니다. 이번에는 빛이 반짝반짝 너무 눈부셨다 때문에 속도를 10 분의 1로하여 화면의 변화를 관찰할 수 있도록하여 보았습니다 (포크하여 만들어진 작품은여기).
이처럼 스스로 처음부터 쓰지 않아도 다른 사람이 만든 코드를 직접 만져 봄으로써, HTML5의 기능을 쉽게 테스트할 수 있습니다.
(0) (0)Posted by 홍반장
(0) (0)Posted by 홍반장
- 홍반장
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
Modern method for displaying hierarchical relationships
Plot data on an inverted scale, like ranks and race timings
For noise free analysis of equity/commodity prices