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.

Chart Types

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

1. Drag Node Chart

   Powerful diagramming tool for network diagrams & process flow diagrams

2. Heat Map Chart

   Tabular representation of complex data with user-defined color ranges

3. Multi-Axis Line Chart

   Advanced line chart with multiple axes for comparing multiple parameters

4. Interactive Candlestick Chart

   Highly interactive chart for plotting stock data and commodity prices

5. Waterfall Chart

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

6. Drag-able Charts

   Offers visual modification of the plotted data simply by dragging the data plots

7. Multi-Level Pie Chart

   Modern method for displaying hierarchical relationships

8. Box and Whisker Chart

   Display the spread of a batch of data using median, quartiles, limits, mean and deviations

9. Logarithmic Charts

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

10. Radar (Spider) Chart

    Effective tool for comparing multiple entities based on different features

11. Spline Charts

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

12. Step Line Chart

    Specialized line chart with vertical and horizontal lines to connect data points

13. Select Scatter Chart

    Scatter Chart where data points can be visually selected & processed

14. Inverse Axis Charts

    Plot data on an inverted scale, like ranks and race timings

15. Error Charts

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

16. Kagi Chart

    For noise free analysis of equity/commodity prices

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

1. 꾸준히 한다.

.프로그래밍언어도 언어(?)라서, 하루에 몰아서 하는 것보다 매일 꾸준히 하는 것이 중요하다. 경력이 많은 프로그래머들도 몇달만 코딩을 안해도 감이 많이 떨어지는 것을 느낀다.

.특히 프로그래밍을 처음 배우는 사람이라면, 꼭 컴퓨터 앞에 앉지 않더라도 책을 항상 가까이해서문법 및 표현에 익숙해지도록 하는 것이 중요하다. 자주보는 것이 중요하다.

2. 반복해서 한다.

.단지 태권도교본을 잘이해했다고 해서 멋진 발차기를 기대할수 없는 것처럼, 책의 내용을
 잘 이해했다고 해서 하루아침에 프로그래밍을 잘할수 있는 것은 아니다.

.이해한 내용을 바탕으로 수많은 반복연습을 통해서만 지식을 진정한 자신의 것으로 만들 수 있다. (같은 예제를 공부하더라도 이리저리 조금씩 변경해서 공부하는 것이 좋다.)

.처음 2~3번은 자세히 보고, 그 다음 부터는 하루에 10분간 10페이지를 훑어보는 식으로 반복하자.
 몇달안에 책에 있는 모든 목차와 예제의 위치와 주요내용을 모두 파악할수 있을 것이다.
 (적어도 언어책 한권, 데이터베이스책한권 정도는 이렇게 할 필요가 있다.)
 
3. 좋은코드를 많이 보고 따라한다.
 .이미 수많은 선배들이 여러문제들에 대한 코딩을 다 작성해 놓았다. 새로운 방법으로 문제를  풀겠다고 도전하는 것은 별 의미가 없다. "이럴때는 이렇게 하는 구나..."라는 것을 배우고  유사한 상황에서 활용하면 되는 것이다. 여러분들이 해야할일은 이러한 경험들을 많이 쌓아  나가는 일이지, 기존과는 다른 새로운 코딩방식을 만들어 내는 것이 아니다.

 .좋은 코드는 보기에도 좋다. 잘정리되어 있고, 별로 특별한 것이 없다. 프로그래밍의 각요소들을  잘이해하고, 각 요소들을 적재적소에 바르게 사용하면 되는 것이다.
  단지 소스의 라인수를 줄인다고해서 좋은 코딩이 아닌것이다. 로직이 소스코드에 잘드러날수있게  쉽고 평범하게 작성하는 것이 좋은 코드인 것이다. 이창호의 바둑이 평범하듯이...

4. 기본에 충실한다.
 .빨리 프로그래밍을 배워서 뭔가 해보고 싶은 여러분들의 마음을 이해하지 못하는 것은 아니다.  그러나, 프로그래밍 하루이틀 할 것도 아니고... 처음에 기본을 잘배워놓지 않으면, 그 이후에는  기회가 잘 없다. 실무에서는 매일 개발하기 바쁘고, 새로운 기술 배우기 바쁘고...
 .배울것이 많다고 생각할지 모르나, 실제로 원리는 모두 같다고 해도 과언이 아니다.
  하나를 깊이있게 파고들면 나머지는 다 여러분 손에 있을 것이다.
 
5. 코드를 작성하기전에 순서도를 그린다.
 ."프로그래밍 = 코딩"이 아니라 "프로그래밍 = 로직설계 + 코딩"이다. 필자가 생각하는 로직설계   와 코딩간의 비율은 8:2정도이다.
 .포토샵만 잘한다고 디자이너가 아니라는것은 여러분들도 잘알고 있을 것이다. 새로운 기술이나  프로그램을 공부하는 것도 중요하지만,  어떤 과제가 주어졌을때 이를 잘 분석하고 설계하는  능력을 장기적으로 키워나가도록 노력해야할 것이다.(다양한 주제에 대해서 문제를 풀어보고  다양한 종류의 책을 읽자.)
 .문제를 구성하고 있는 주인공들을 찾아서 나열해보라. 그리고 이들간의 관계는 무엇이고, 규칙은  무엇인지 적어보라.(머릿속으로만 생각하지말고!!!)
 
6. 주석을 가능한한 많이 적는다.
 .주석은 매우 유용하고도 중요한 요소이다. 그럼에도 불구하고 많은 사람들이 이를 소홀히 한다.  자신이 작성한 코드도 몇일만 지나면 이해가 안되는 경우가 많다. 적어도 이해하는데 시간이  걸린다. 주석은 이러한 시간들을 절약해줄것이며, 보다 에러가 적은 코드를 작성하는데 도움을  줄 것이다. 특히 여러사람이 공동작업을 하는 경우에는 더욱 더 중요하다. 서로를 위해서...
 .작업과 관련된 가능한한 많은 정보를 주석에 담도록 하자.
 
7. 작업일지를 작성한다.
 .과학자들이 매일 연구한 내용을 일지로 적듯이 여러분들도 일지를 적어보자. 오늘은 이렇게  저렇게 해봤는데 잘안되었다... xxx.java의 코드를 이렇게 바꾸었다. 몇시몇분에 xx로 백업받아  놓았다... 라는 식으로 가능한한 자세히 적도록 한다. 이렇게 함으로써 여러분들의 경험을 기록  으로 쉽게 보관할수 있으며, 문제해결에 많은 도움이 된다.

8. 자신의 소스를 가꾼다.

 .보통 코딩을 마치고 나면, 모든 것을 덮어두곤 한다. 원하는 결과를 얻었다고 거기서 그치지말고  이제 로직과 코드를 보다 효율적으로 개선할 방법이 없는지 고민해보자. 글을 써놓고 좋은 글로  만들기 위해 읽고 또 읽고 다듬듯이 코드를 다듬어보자. 여러분들의 코드를 구사하는 능력이 보다  향상되어가는 것을 느낄 수 있을 것이다.
 
 .여러분들을 위한 제안은 작은 프로그램을 만들어서 오랜기간동안 점차 발전시켜 나가는 것이다.  새로운 기능들을 하나씩 추가해가고, 기능을 발전시켜나가보자. 이과정을 통해서 여러분들의 실력  은 몰라보게 향상될 것이다.

9. 생각하라.
 .항상 머릿속에 한 가지 문제를 준비하라. 지하철을 기다리거나, 화장실에서 볼일 볼때 문제를 풀어  보자. 유레카를 외치고 뛰어나올지도...^^;
 
10. 좋은 책을 선택한다.
 .공부를 시작할때 제일 먼저 하는 일은 아마도 책을 고르는 일일 것이다. 보통 책하나에 수십시간을  학습하게 되는데, 책을 잘못선택한 경우 수십시간과 노력을 허비하는 셈이다.
  바른 책을 고르는 일은 쉬운일이 아니지만, 최소한 몇시간을 투자해서 최선의 선택을 하도록 노력  해야 수십시간을 허비하는 일이 없을 것이다.

 .책을 고르는 법은 여러가지가 있겠으나, 가장 중요한 것은 본인이다. 서점에서 같은 종류의 몇가지  책을 놓고 서로 비교해보면, 시간을 들인 만큼 보다 나은 선택을 할 가능성이 높아진다.

 .많은 컴퓨터 서적이 독자들의 선택을 어렵게 하고, 컴퓨터 업계 특성상 좋은책을 만들기 보다  빨리찍어서 파는 것이 더 중요해진 요즘. 독자들의 바른 선택이 보다 나은 책이 출판되는 것을  가능하게 한다는 것을 알았으면 한다.

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

Layouy Guide : http://dev.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html

Ext Core Manual : http://docs.sencha.com/core/manual/

Ext JS API Doc : http://dev.sencha.com/deploy/dev/docs/
Sencha-touch API Doc : http://dev.sencha.com/deploy/touch/docs/

Ext JS 3.3 Sample : http://dev.sencha.com/deploy/dev/examples/#sample-10

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

Build mobile web applications with Sencha Touch

An HTML5 mobile JavaScript framework for WebKit browsers
http://www.ibm.com/developerworks/open ··· esources

Overview

In the software development world, two important trends are increasingly important: mobile application development and standards-based HTML5 web development. The learning curve for either type of development can be steep. Developing a native mobile application often requires knowledge of specific platforms and skills, such as Objective-C for iPhone and Java™ for Android (and these are only two platforms). HTML5 development has gained traction lately because it is standards-based. While vendors are working rapidly to incorporate and comply with these early specifications, HTML5 is still rather immature.

The recent release of Sencha Touch 1.0 fuses the cutting-edge worlds of mobile application development with HTML5 web development to form a simple, accessible framework for building mobile web applications. In this article, learn everything you'll need to know to start working with the Sencha Touch framework.

Sencha Touch

Learning to build mobile applications—especially from the perspective of a web developer—can be troublesome. A variety of platforms to choose from and technologies to learn are available. HTML5 support, though gaining momentum quickly, is still not quite ready to be used for complex web applications, particularly line-of-business applications.

Sencha Touch combines the rich platforms of HTML5 and mobile web application development into a happy medium. The framework is developer-friendly and similar to using the Ext JS JavaScript framework. If you have moderate to advanced JavaScript experience, then Sencha Touch is approachable. If you already have skills as a JavaScript and CSS developer, Sencha Touch can immediately turn you into a mobile application developer, too.

Sencha is a company with a core commercial product offering, but it also supports open source software. Sencha Touch 1.0 is free for both personal and commercial use.

Frequently used abbreviations

Ajax: Asynchronous JavaScript + XML
API: application programming interface
CSS: Cascading Style Sheets
HTML: Hypertext Markup Language
JSON: JavaScript Object Notation
SDK: software development kit
UI: user interface

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

임의로 잡아본 iPad Layout (1024 * 768)

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

- jQuery와 비교해보면?
    jQuery = Ext Core
    jQueryUI = Ext JS
    jQueryMobile = Sencha Touch

- 개발 환경 구축은?
    <link rel="stylesheet" href="/resources/css/sencha-touch.css" type="text/css">
    <script type="text/javascript" src="/js/sencha-touch.js"></script>
 
- 초기화 처리

        Ext.setup(
        {
            // 환경 설정 정보들~

            tabletStartupScreen:"images/tabletStartupScreen.png",
            phoneStartupScreen:"images/phoneStartupScreen.png",

            tabletIcon:"images/tabletIcon.png",
            phoneIcon:"images/phoneIcon.png",
            glossOnIcon: true,
            statusBarStyle:"black",
            fullscreen:true,
            preloadImages:[],
            scope:this,
            
             onReady: function()
            {
                             시작~
            }
        }

- 환경정보들은?

      fullscreen - Boolean
                 - 전체 화면 설정 여부
      tabletStartupScreen - String
                          - iPad의 시작 이미지의 경로 크기는 768 × 1004 세로로하지 않으면 안됨.
      phoneStartupScreen - String
                         - iPhone 및 iPod touch 용 부팅 이미지 경로 320 × 460에 세로로하지 않으면 안됨.
      icon - String
           - 태블릿과 스마트폰 모두에 사용되는 아이콘 이미지 경로 72 × 72이 좋은
      tabletIcon - String
                 - 태블릿용 아이콘 이미지 경로 이곳을 icon으로 설정되는 이미지보다 우선 72 × 72가된다.
      phoneIcon - String
                - 스마트폰 아이콘 이미지 경로 이곳을 icon으로 설정되는 이미지보다 우선 57 × 57이다.
      glossOnIcon - Boolean
                  - iPhone, iPad and iPod Touch 아이콘에 광택 효과 여부.
      statusBarStyle - String
                     - iOS web 애플 리케이션의 상태 표시줄에 대한 스타일 설정 default, black, black - translucent 중 하나를 선택.
      preloadImages - Array
                    - 미리 이미지 경로 배열 (자세한 내용은 추후 조사)
      onReady - Function
              - DOM 생성 후에 실행되는 함수. 애플 리케이션의 시작 지점이되는 경우가 많다.
      scope - Scope
              - 범위 설정

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

JSON의 개요 : http://www.json.org/json-ko.html

JSON (JavaScript Object Notation)은 경량의 DATA-교환 형식이다. 이 형식은 사람이 읽고 쓰기에 용이하며, 기계가 분석하고 생성함에도 용이하다. JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999의 일부에 토대를 두고 있다. JSON은 완벽하게 언어로 부터 독립적이지만 C-family 언어 - C, C++, C#, Java, JavaScript, Perl, Python 그외 다수 - 의 프로그래머들에게 친숙한 관습을 사용하는 텍스트 형식이다. 이러한 속성들이 JSON을 이상적인 DATA-교환 언어로 만들고 있다.

JSON은 두개의 구조를 기본으로 두고 있다:

• name/value 형태의 쌍으로 collection 타입. 다양한 언어들에서, 이는 object, record, struct(구조체), dictionary, hash table, 키가 있는 list, 또는 연상배열로서 실현 되었다.
• 값들의 순서화된 리스트. 대부분의 언어들에서, 이는 array, vector, list, 또는 sequence로서 실현 되었다.

이러한 것들은 보편적인 DATA 구조이다. 사실상 모든 현대의 프로그래밍 언어들은 어떠한 형태로든 이것들을 지원한다. 프로그래밍 언어들을 이용하여 호환성 있는 DATA 형식이 이러한 구조들을 근간에 두고 있는 것은 당연하다.

JSON 에서, 이러한 형식들을 가져간다:

object는 name/value 쌍들의 비순서화된 SET이다. object는 { (좌 중괄호)로 시작하고 } (우 중괄호)로 끝내어 표현한다. 각 name 뒤에 : (colon)을 붙이고 , (comma)로 name/value 쌍들 간을 구분한다.

array은 값들의 순서화된 collection 이다. array는 [ (left bracket)로 시작해서 ] (right bracket)로 끝내어 표현한다. , (comma)로 array의 값들을 구분한다.

value는 큰따옴표안에 string, number ,true ,false , null, object ,array이 올수 있다. 이러한 구조들을 포함한다.

string은 큰따옴표안에 둘러 싸인 zero 이상 Unicode 문자들의 조합이며, 쌍다옴표안에 감싸지며,backslash escape가 적용된다. 하나의 문자(character)도 하나의 문자열(character string)로서 표현된다. string은 C 또는 Java 문자열 처럼 매우 많이 비슷하다.

number는 8진수와 16진수 형식을 사용하지 않는것을 제외하면 C와 Java number 처럼 매우 많이 비슷하다.

토근들의 어떤 쌍 사이에 공백을 삽입할수 있다. 드물게 encode된 세부 항목을 제외하면, 이렇게 설명된 JSON의 형식은 완벽하게 그 언어를 설명한다.

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

제작하려는 앱유형에 따라서 앱이 유리한 경우도, 모바일웹이 유리한 경우도 있습니다.화면 변경이 잦거나, HTML 인터페이스로도 UI를 구성하고, 이용자 Action을 처리할 수 있는 경우에는 모바일웹을 구성하는 것이 유리할테고,인터페이스가 복잡하고, 이용자 만족도가 높은 품격있는 서비스를 고려한다면, 앱을 선택하는 편이 유리할 것입니다.

	모바일웹	앱
화면구성	웹서버 (JSP/PHP/ASP)	앱/클라이언트
서버와의 통신	데이터+ HTML	데이터
서버와의 통신 FORMAT	HTML	XML / JSON
이벤트 처리	HTML Action	Phone Action
네트워크부하	높음	낮음
변경작업	용이함	용이하지 않음
서비스 재활용	전체	데이터
이용자가 느끼는 완성도	보통	높음

<모바일웹 .vs 앱 비교정리>

[펌] http://a.tk.co.kr/635

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

iPad에서 Portrait & Landscape 일때 적용 CSS 예제
http://catharsis.tumblr.com/post/50165 ··· -revised

iPad Orientation CSS (Revised)

It doesn’t take much foresight to anticipate that with the rise of Natural User Interfaces (NUIs) like the iPhone and iPad, UI designers will have a greater responsibility to optimize for orientation-based contexts. As such, it’s quite prescient that today, the folks at Cloud Four demonstrated how to serve up stylesheets based on device orientation.

Since I have a feeling I’ll be using this quite a bit in the future, I wanted to build on Cloud Four’s work and find a way to alleviate the following issues:

1. Extra HTTP requests
2. Not iPad-specific
3. Lack of reusability

So, without further ado, here’s my proposed revision to the iPad orientation CSS:

<!-- css -->
@media only screen and (max-device-width: 1024px) and (orientation:portrait) { 
    .landscape { display: none; }
}
@media only screen and (max-device-width: 1024px) and (orientation:landscape) { 
    .portrait { display: none; }
}

<!-- example markup -->
<h1 class="portrait">Your device orientation is "portrait"<h1>
<h1 class="landscape">Your device orientation is "landscape"<h1>

As you can see, I’ve also changed the markup in a predictable way. An explanation of the changes and the reasoning behind them can be found below.

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장

←(백스패이스) = 8
TAB = 9
ENTER = 13
SHIFT = 16
CTRL = 17
ALT = 18
PAUSEBREAK = 19
CAPSLOOK = 20
한/영 = 21
한자 = 25
ESC = 27

스패이스 = 32
PAGEUP = 33
PAGEDN = 34
END = 35
HOME =36

←(중간) = 37
↑(중간) = 38
→(중간) = 39
↓(중간) = 40

INSERT = 45
DELETE = 46

0 = 48
1 = 49
2 = 50
3 = 51
4 = 52
5 = 53
6 = 54
7 = 55
8 = 56
9 = 57


A = 65
B = 66
C = 67
D = 68
E = 69
F = 70
G = 71
H = 72
I = 73
J = 74
K = 75
L = 76
M = 77
N = 78
O = 79
P = 80
Q = 81
R = 82
S = 83
T = 84
U = 85
V = 86
W = 87
X = 88
Y = 89
Z = 90

윈도우(왼쪽) = 91
윈도우(오른쪽) = 92
기능키 = 930(오른쪽) = 96
1(오른쪽) = 97
2(오른쪽) = 98
3(오른쪽) = 99
4(오른쪽) = 100
5(오른쪽) = 101
6(오른쪽) = 102
7(오른쪽) = 103
8(오른쪽) = 104
9(오른쪽) = 105
.(오른쪽) = 110
/(오른쪽) = 111
*(오른쪽) = 106
+(오른쪽) = 107
-(오른쪽) = 109

F1 = 112
F2 = 113
F3 = 114
F4 = 115
F5 = 116
F6 = 117
F7 = 118
F8 = 119
F9 = 120
F10 = 121
F11 = 122
F12 = 123

NUMLOCK = 144
SCROLLLOCK = 145

=(중간) = 187
-(중간) = 189
`(왼쪽콤마) = 192
(중간) = 220

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

Posted by 홍반장