반응형

Web Applications 1.0

Living Standard — Last Updated 19 August 2011

반응형
저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

[HTML5] HTML5 API의 기능  (0) 2011.08.21
[HTML5] Web Worker  (0) 2011.08.21
[HTML5] Web Worker - HTML5 Rocks  (0) 2011.08.21
SSO (Single Sign-On) - 인증방식  (0) 2011.07.15
[JSON] json text to json Object  (0) 2011.06.28
반응형

The Basics of Web Workers


http://www.html5rocks.com/en/tutorials/workers/basics/

반응형
저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

[HTML5] Web Worker  (0) 2011.08.21
[HTML5] 10 Web Workers  (0) 2011.08.21
SSO (Single Sign-On) - 인증방식  (0) 2011.07.15
[JSON] json text to json Object  (0) 2011.06.28
[WEB] http://www.asciiflow.com/ - Ascii Flow Diagram  (0) 2011.06.21
반응형

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();
}


반응형
저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

[WEB] http://www.asciiflow.com/ - Ascii Flow Diagram  (0) 2011.06.21
[Web] http://jsonlint.com/ - JSON 데이터 인증하기.  (0) 2011.06.20
[AJAX] External URL 의 내용 불러오기- 외부URL  (0) 2011.05.26
[web] html5 chart - powercharts - fusion chart 차트 그래프  (0) 2011.04.19
모바일웹 .vs 앱 비교정리  (0) 2011.04.14
반응형


About
AmCharts is a set of flash and JavaScript (HTML5) charts for your websites and Web-based products. AmCharts can extract data from simple CSV or XML files, or they can read dynamic data generated with PHP, .NET, Java, Ruby on Rails, Perl, ColdFusion, and many other programming languages.


Blog About JavaScript amCharts – Win an iPad


JavaScript / HTML5 charts

3D Donut Chart
3D Stacked Column
Bar and line
Bars or columns
Bars with gradient fills
Candlestick or OHLC
Chart with legend
Custom bullets
Date Based category axis
Vertical and horizontal guides
Multiple value axes
Pie and column
Pie chart
Rotated axis values
Smoothed line and step

Stock

Data at irregular intervals
OHLC chart
Multiple data sets
Events
Smoothed line chart
Structured products
Vertical legend
Intraday data
Stacked
Drawing trend lines

Column & Bar
Column and line chart mix
3D Stacked column chart
Controlling chart with JavaScript
Chart with gradient fills
Histogram chart
Floating chart
Images above the columns
Columns with rounded corners
Auto-resizing chart

Line & Area

Chart with scroller
Chart with data gaps
Two Y-axes chart
Logarithmic scale chart
Auto-reloading chart
Chart with reversed Y axis

Pie & Donut

2D pie chart
3D donut chart
Saving chart as image
Advanced navigation menus

Scatter & Bubble

Time plot
Chart with value indicator
Bulls eye chart
Error bars
Timeline

Radar & Polar

Stacked radar chart
100% stacked spider chart
Polar chart


반응형
저작자표시

'프로그래밍 > Script' 카테고리의 다른 글

[javascript] JSONP를 사용한 도메인 간 통신, Part 1: JSONP와 jQuery의 결합으로 강력한 매시업 빠르게 만들기  (0) 2011.04.28
[jquery] jQuery로 작업하기, Part 2: 매개체로서의 JQuery: UI 프로젝트  (0) 2011.04.28
[javascript] HTML5 Sencha App vs. native iPhone App side by side (HD)  (0) 2011.04.21
[javascript] Sencha Touch 에서 이미지 버튼 구현하기.  (0) 2011.04.21
[javascript] Build mobile web applications with Sencha Touch  (0) 2011.04.18
반응형

HTML5 Sencha App vs. native iPhone App side by side (HD)

sencha로 만든 앱과 네이티브앱의 비교
On the left, Sencha version of touchNOC Manager app. On the right, native iPhone App version. Most of navigation done side-by-side, except for features unique for iPhone App version (favorites re-ordering and search).

반응형
저작자표시

'프로그래밍 > Script' 카테고리의 다른 글

[jquery] jQuery로 작업하기, Part 2: 매개체로서의 JQuery: UI 프로젝트  (0) 2011.04.28
[Web] amChart - amcharts.com , Blog About JavaScript amCharts – Win an iPad  (0) 2011.04.27
[javascript] Sencha Touch 에서 이미지 버튼 구현하기.  (0) 2011.04.21
[javascript] Build mobile web applications with Sencha Touch  (0) 2011.04.18
[javascript] sencha 와 관련된 Ext JS 라이브러리  (0) 2011.04.18
반응형
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

반응형
저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

[WEB] http://www.asciiflow.com/ - Ascii Flow Diagram  (0) 2011.06.21
[Web] http://jsonlint.com/ - JSON 데이터 인증하기.  (0) 2011.06.20
[AJAX] External URL 의 내용 불러오기- 외부URL  (0) 2011.05.26
[html] html5 storage - Local, Session  (0) 2011.05.03
모바일웹 .vs 앱 비교정리  (0) 2011.04.14

+ Recent posts

티스토리툴바