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

모바일웹

화면구성

웹서버 (JSP/PHP/ASP)

/클라이언트

서버와의 통신

데이터+ HTML

데이터

서버와의 통신 FORMAT

HTML

XML / JSON

이벤트 처리

HTML Action

Phone Action

네트워크부하

높음

낮음

변경작업

용이함

용이하지 않음

서비스 재활용

전체

데이터

이용자가 느끼는 완성도

보통

높음

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

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


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의 형식은 완벽하게 그 언어를 설명한다.


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
              - 범위 설정
Posted by 홍반장水 홍반장水

The Top 8 Placeholder Services for Web Designers

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

1 – PlaceKitten

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

  1. <img src="http://placekitten.com/200/300" /> 
  2.  
  3. <!-- Black and White --> 
  4. <img src="http://placekitten.com/g/200/300" /> 

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

Placehold

A quick and simple image placeholder service.

Usage

  1. <img src="http://placehold.it/350x150"> 
  2.  
  3. <!-- Set Colors --> 
  4. <img src="http://placehold.it/350x150/292929/e3e3e3"> 
  5.  
  6. <!-- Add Text --> 
  7. <img src="http://placehold.it/350x150&text=Hello World"> 
  8.  
  9. <!-- Set Image Type --> 
  10. <img src="http://placehold.it/350x150.png&text=Hello World"> 
  11. <img src="http://placehold.it/350x150.gif&text=Hello World"> 
  12. <img src="http://placehold.it/350x150.jpg&text=Hello World"> 

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

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

  1. http://sheenholders.com/421x550  
  2.  
  3. <img src="http://sheenholders.com/421x550" /> 

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


4 – FlickHoldr

FlickrHolder

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.

  1. <img src="http://flickholdr.com/200/300" /> 
  2.  
  3. <!-- Apply one or more tags --> 
  4. <img src="http://flickholdr.com/200/300/sea,sun" alt="" /> 
  5.  
  6. <!-- Need black and white? --> 
  7. <img src="http://flickholdr.com/200/300/sea,sun/bw" alt="" /> 

5 – LoremPixum

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

Usage

  1. <!-- Default --> 
  2. <img src="http://www.lorempixum.com/400/100" alt="" /> 
  3.  
  4. <!-- Black and White --> 
  5. <img src="http://www.lorempixum.com/g/400/100" alt="" /> 
  6.  
  7. <!-- Tagged --> 
  8. <img src="http://www.lorempixum.com/g/400/100/sports" alt="" /> 

6 – PlaceDog

PlaceDog

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

Usage

  1. <img src="http://placedog.com/400/300" alt="" /> 
  2.  
  3. <!-- Black and White --> 
  4. <img src="http://placedog.com/g/400/300" alt="" /> 

7 – DummyImage

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.

  1. <!-- If you only pass a width, a square will be generated --> 
  2. <img src="http://dummyimage.com/600" alt="" /> 
  3.  
  4. <!-- Width and Height --> 
  5. <img src="http://dummyimage.com/600x400" alt="" /> 
  6.  
  7. <!-- Apply background and text colors --> 
  8. <img src="http://dummyimage.com/600x400/292929/e3e3e3" alt="" /> 
  9.  
  10. <!-- Set image type --> 
  11. <img src="http://dummyimage.com/600x400.png/292929/e3e3e3" alt="" /> 
  12. <img src="http://dummyimage.com/600x400.gif/292929/e3e3e3" alt="" /> 
  13. <img src="http://dummyimage.com/600x400.jpg/292929/e3e3e3" alt="" /> 
  14.  
  15. <!-- Custom Text --> 
  16. <img src="http://dummyimage.com/800x600&text=Your Mom Goes to College" alt="" /> 
  17.  
  18. or with background and text colors...  
  19.  
  20. <img src="http://dummyimage.com/800x600/292929/e3e3e3&text=Your Mom Goes to College" alt="" /> 

8 – Griddle.it

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].

  1. /* Generate a 960px grid, with 12 columns and 30px gutter */ 
  2.  
  3. body { 
  4.   background: url(http://griddle.it/960-12-30) repeat-y center top;  
  5. }  



Posted by 홍반장水 홍반장水

실무 웹앱 개발을 위한 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 보다 월등하게 많이 가지고 있다.

[펌] 미래웹기술연구소

Posted by 홍반장水 홍반장水
TAG jQuery, Sencha