- 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
              - 범위 설정

The Top 8 Placeholder Services for Web Designers

* placeholder : 웹페이지에서 화면을 잡아주는 것. 이미지.

1 – PlaceKitten

A quick and simple service for getting pictures of kittens for use as placeholders in your designs or code. Just put your image size (width & height) after our URL and you’ll get a placeholder.

Usage

Follow the placekitten.com url with your desired dimensions. For example, if I needed a 450 x 300 placeholder image, I’d set the source attribute of an image tag to: http://placekitten.com/450/300.

---

2 – Placehold.it

A quick and simple image placeholder service.

Usage

Note that, with this service, you set your dimensions more traditionally, rather than separating the widths and heights into segments.

Placehold.it is a bit different in that, rather than using photos for placeholders, it instead uses more traditional solid color images, which might be more appealing to some designers.

---

3 – SheenHolders

Add some Sheen to your designs and prototypes with Charlie Sheen placeholder pictures. Simply change the width and height in the URL to get your custom placeholder.

Usage

If you want your web designs to be winning, then you need the Sheen!

---

4 – FlickHoldr

Get placeholders related to the site you are developing, by pulling images from flickr based on tags.

Usage

FlickrHolder is helpful in that, in addition to using Flickr photos as the placeholders, it also allows you to choose a desired tag as the third segment. You can even choose to display photos in black and white.

---

5 – LoremPixum

Placeholder Images for every case. Webdesign or Print. It’s simple and absolutely free!

Usage

---

6 – PlaceDog

Dogs are so superior to felines. Just choose your dimensions in the pathname and share the doggie love on your projects.

Usage

---

7 – DummyImage

Usage

DummyImage is particularly nice, when compared to some of its competitors, in that it offers a great deal of flexibility. Let’s take a look at some of the available options.

---

8 – Griddle.it

A clean and simple way to help align your layouts. No complex grid frameworks necessary.

Certainly, Griddle.it is unique compared to its peers because its focus is on creating grid images, which can then be applied to the background of your web design during production. View a live demo here.

Usage

Applying a background grid requires the following format: http://griddle.it/[total width]-[number of columns]-[gutter size].

---

실무 웹앱 개발을 위한 jQuery Mobile 과 Sencha Touch 비교

http://w3labs.kr/?p=326

개발방식의 차이

둘은 똑같이 Mobile JavaScript Library라는 공통점을 지니고 있지만, 개발에 사용되는 언어의 차이가 크다. jQuery Mobile은 기존 HTML 개발하듯이 마크업 중심의 구성을 갖고 있으며, Sencha Touch는 JavaScript로 개발을 하는데 특히 ExtJS 라이브러리 중심으로 구성되어 있다. 이는 개발 난이도를 결정하는 요소가 된다. ExtJS 라이브러리를 다룰 수 있는 개발자가 거의 없기에(외국에도 많이 쓰이지는 않는다.) ExtJS를 먼저 학습해야 하는 비용이 추가된다. 그에 반해 jQuery Mobile은 우리에게 익숙한 HTML 중심의 마크업 언어라서 잠깐의 교육만으로도 바로 개발이 가능하다.

실무에 어떤 라이브러리를 선택할 것인가?

"개발방시의 차이"는 때때로 인력 구성의 심각한 문제를 가져 올 수 있다. 미래웹기술연구소에서 수행했던 프로젝트의 경우 디자이너/Web UI Developer(HTML/CSS 코딩)/자바스크립트 엔지니어 이렇게 분업이 잘 되어 있다. Web UI Developer 가 없는 프로젝트에서는 디자이너가 HTML/CSS 코딩 역할을 대신 하기도 한다. 그러나 Sencha Touch 중심의 웹앱 프로젝트에서는 Web UI Developer가 Sencha Touch나 ExtJS를 모르면 아무런 작업을 할 수 없다. 그렇게 Web UI Developer가 하지 못한 작업들은 고스란히 자바스크립트 엔지니어에게 전가 된다.(하지만 전달받은 개발자 또한 ExtJS 라이브러리가 익숙한 것은 아닐 것이다.) 그래서 웹앱개발을 위한 자바스크립트 라이브러리 선택시에는 현재 조직의 인원구성에 대한 고민이 선행되어야 한다.

하이브리드 앱

두가지 라이브러리 모두 PhoneGap 등을 이용하여 앱(App.)으로 만들 수 있다. 하지만 이부분에서 Sencha Touch의 앱 스러움이 실력을 발휘 한다. 일단 언어가 비슷하고 (Sencha Touch와 PhoneGap 모두 자바스크립트 기반) 마크업언어와 다르게 콤포넌트 기반이어서 화면 구성이 앱과 비슷한 점이 많다. 그리고 앱스러운 기능을 jQuery Mobile 보다 월등하게 많이 가지고 있다.

[펌] 미래웹기술연구소

←(백스패이스) = 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

iPad에서 Portrait & Landscape 일때 적용 CSS 예제
http://catharsis.tumblr.com/post/501657271/ipad-orientation-css-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.

What Is Google App Engine?

# 예제 따라해보았다.
완전 시행착오 많이 하고. Ant 를 Eclipse와 연동해서 build 는 하는데, 이클립스에 이미
Ant가 플러그인되어 있는데 새로 내려받은거와 연동을 해서 혼선이 있었다.
 SDK 다 내려받고, web.xml 만들고 경로 연동에서 잘 해주어야 한다.
Ant  빌드파일 생성 시 <property name="sdk.dir" location="../appengine-java-sdk-1.4.3" /> 라고 있는데, 
실제 appengine 경로에 연결을 잘 해야 한다. 소스만 보고 따라하면 안됨.
이클립스에서 실행이 안되서(나의 설정잘못이겟지만. 아무튼.), 도스창으로 들어가서
> ant runserver 를 실행하고 나서야 웹페이지에서 확인할 수 있었다.
ant 를 도스창에서 사용할면 환경변수에 ANT_HOME 과 Path에 %ANT_HOME%/bin 을 잊지마라.
Google App Engine lets you run your web applications on Google's infrastructure. App Engine applications are easy to build, easy to maintain, and easy to scale as your traffic and data storage needs grow. With App Engine, there are no servers to maintain: You just upload your application, and it's ready to serve your users.

You can serve your app from your own domain name (such as http://www.example.com/) using Google Apps. Or, you can serve your app using a free name on the appspot.com domain. You can share your application with the world, or limit access to members of your organization.

Google App Engine supports apps written in several programming languages. With App Engine's Java runtime environment, you can build your app using standard Java technologies, including the JVM, Java servlets, and the Java programming language—or any other language using a JVM-based interpreter or compiler, such as JavaScript or Ruby. App Engine also features a dedicated Python runtime environment, which includes a fast Python interpreter and the Python standard library. The Java and Python runtime environments are built to ensure that your application runs quickly, securely, and without interference from other apps on the system.

With App Engine, you only pay for what you use. There are no set-up costs and no recurring fees. The resources your application uses, such as storage and bandwidth, are measured by the gigabyte, and billed at competitive rates. You control the maximum amounts of resources your app can consume, so it always stays within your budget.

App Engine costs nothing to get started. All applications can use up to 500 MB of storage and enough CPU and bandwidth to support an efficient app serving around 5 million page views a month, absolutely free. When you enable billing for your application, your free limits are raised, and you only pay for resources you use above the free levels.

Getting Started

• What Is Google App Engine?
• Java
  • Introduction
  • Installing the Java SDK
  • Creating a Project
  • Using the Users Service
  • Using JSPs
  • Using the Datastore with JDO
  • Using Static Files
  • Uploading Your Application