Dreamweaver CS5.5 를 이용한 jQueryMobile 개발

Adobe Dreamweaver CS5.5
- jQuery Mobile

김종광 책임연구원 | 미래웹기술연구소㈜

목차

 Mobile UI Framework
 jQuery Mobile
- 개요 및 지원 Device

 jQuery Mobile 특징
 jQuery Mobile 구축 사례
- jQuery Mobile Gallery

 드림위버를 이용한 jQuery Mobile Tutorial
- 라이브러리 판올림
- 드림위버를 이용한 환경 구성
- List View 구성
- Page , Form 구성

 Twitter Client App 만들기

Page 2

Mobile UI Framework - 정의

 모바일 환경에서 사용자와의 접점이 되는 UI를 만들 수 있는 기틀 제공
- UI 개발의 기초를 제공해준다
- 개발자는 컨텐츠에 집중 할 수 있다

Page 4


 아이폰 개발 : Xcode + Interface Builder
 안드로이드 개발 : 안드로이드 SDK + Layout Editor
 모바일 웹 : 드림위버 + Mobile UI Framework

Interface Builder
UI Framework

Page 5


 Dreamweaver CS5.5 의 위치

HTML5 Mobile App
Framework
Dreamweaver
Mobile UI
Framework
CS5.5
PhoneGap

jQuery Mobile Titanium

Sencha Touch Appspresso

Web App Web App. Native App.

Page 6

jQuery Mobile

 Touch-Optimized Web Framework for SmartPhones & Tables

 Version
- 2010.10.16 Alpha 1
- 2011.11.16 정식버젂 출시

Page 8

jQuery Mobile

 HTML 마크업 기반 개발  쉽다
 로직  jQuery 기반  대중화된 기술
 JavaScript 를 몰라도 갂단한 화면 구성 가능
 기존 사이트를 jQM으로 쉽게 변경 가능

Page 9

jQuery Mobile

 많은 UI 컴포넌트들을 기본 제공 한다.
- 이미지 사용을 최소화 할 수 있다
- 네트워크 트래픽을 줄인다
- 모바일 환경에서 트래픽은 중요하다
 테마 기능 제공

Page 10

멀티 디바이스 지원

 웹앱 프레임워크 중 가장 많은 디바이스 지원
 브라우저가 지원하는 한도 내에서 최상의
화면을 제공해 준다
 구형 브라우저
- 적젃한 퇴보 (Graceful Degradation)
- 구형 브라우저라고 서비스를 안 하는 것이
아니라 화려함이 없을 뿐 기능적 지원은 한다.

C급 브라우저 A급 브라우저

Page 11

멀티 디바이스 지원

 멀티 디바이스 지원 현황
- 가장 많은 Device 지원 !!

Page 12

jQuery Mobile 의 특징 – Ajax Loading

 <a> 테그 등 하이퍼링크를 통한 페이지 이동이 자유롭다
 jQuery Mobile 내부에서 Ajax 통싞이 성공하면, 새로운 페이지
콘텐트가 DOM 에 추가되고, 애니메이션 효과와 함께 나타난다
 이러한 일련의 동작을 내부에서 자동으로 해준다

Page1.html Page2.html Page1.html

jquery.mobile.css jquery.mobile.css
jquery.js jquery.js
jquery.mobile.js jquery.mobile.js

custom.css custom.css
custom.js custom.js

Hello World Welcome Welcome

Page 14

jQuery Mobile 의 특징 – Stack History Management

 페이지 이동한 경로를 자동으로 저장한다
 실제로는 Ajax로 해당 컨텐츠만 Load 했음에도 브라우저의 URL 을
바꿔둔다.
 브라우저의 [Back] 버튺이 동작 하도록 자동으로 처리해준다

Page1.html Page2.html Page1.html

jquery.mobile.css jquery.mobile.css
jquery.js jquery.js
jquery.mobile.js jquery.mobile.js

custom.css custom.css
custom.js custom.js

<body> <body> <body>

Hello World Welcome Welcome

Page 15

jQuery Mobile 의 특징 – WAI-ARIA

 Accessible Rich Internet
Applications (WAI-ARIA)
 시각에 장애가 있는 사람이 좀 더
접근성 있는 Web을 접하도록
하는 웹 표준 (Proposed
Recommendation)
 영역에 ‘role’ 속성을 주고
‘banner’ 등의 값을 주어 의미를
부여한다
 jQuery Mobile 에서는 data-role
값을 이용하여 이러한 ARIA
속성을 자동으로 부여 한다.

Page 16

jQuery Mobile Gallery

 jQuery Mobile Gallery – 적용 사례

Page 18


 jQuery Mobile Gallery

Page 19


 jQuery Mobile Gallery

Page 20

jQuery Mobile Tutorial – 라이브러리 교체

 Dreamweaver CS5.5 에 포함되어 있는 jQuery Mobile
- 내장 된 Version : 1.0 Alpha3
- 최싞 버젂 : 1.0 Final
- Alpha3 과 Final 버젂갂의 차이가 크므로  판올림이 필요하다 !!

Page 22


 jQuery Mobile 라이브러리 교체
- 최싞버젂 Download URL : http://www.jquerymobile.com/download

- 드림위버에 내장된 라이이브러리 위치

한글버젂의 Dreamweaver CS5.5
• C:Program Files (x86)AdobeAdobe Dreamweaver
CS5.5ko_KRconfigurationThird Party Source Codejquery-mobile

영문버젂의 Dreamweaver CS5.5
• C:Program Files (x86)AdobeAdobe Dreamweaver CS5.5configurationThird
Party Source Codejquery-mobile

Mac OS
• /Applications/Adobe Dreamweaver CS5.5/Configuration/Third Part Source Code/jquery-
mobile

Page 23


 jQuery Mobile 템플릿 교체
- jQuery Mobile 템플릿 위치

한글버젂의 Dreamweaver CS5.5
CS5.5ko_KRConfigurationBuiltInMobile Starters

영문버젂의 Dreamweaver CS5.5
CS5.5configurationBuiltInMobile Starters

Mac OS
• /Applications/Adobe Dreamweaver CS5.5/Configuration/BuiltIn/Mobile
Starters

- 변경 할 파일 3개

• jQueryMobileLocalMultiPage.htm
• jQueryMobileMultiPage.htm
• jQueryMobilePhoneGapMultiPage.htm

Page 24

jQuery Mobile Tutorial – 템플릿 생성

 jQuery Mobile Template : File  New

Page 25

jQuery Mobile Tutorial – INSERT 패널

 jQuery Mobile(CDN) 템플릿 생성
 <body> 안의 내용을 모두 지운다
 ‚Insert‛ 패널 활성화 ( Window  Insert )

Page 26

jQuery Mobile Tutorial – Page 생성

 Page 생성

Page 27

jQuery Mobile Tutorial

 Content 영역 수정

Page 28

Twitter API 연동 - 젂체소스

 Twitter Client
<!DOCTYPE html> <div data-role="footer">
<html> <h4>Footer</h4>
<head> </div>
<meta charset="UTF-8"> </div>
<title>jQuery Mobile Web App</title> <script>
<link $(function(){
href="http://code.jquery.com/mobile/1.0a3/jquery.mobile- $.ajax({
1.0a3.min.css" rel="stylesheet" type="text/css"/> url: "http://search.twitter.com/search.json?q=adobe",
<script src="http://code.jquery.com/jquery-1.5.min.js" dataType: 'jsonp',
type="text/javascript"></script> success: function(json_results){
<script $('#twitList').append('<ul data-role="listview"></ul>');
src="http://code.jquery.com/mobile/1.0a3/jquery.mobile- listItems = $('#twitList').find('ul');
1.0a3.min.js" type="text/javascript"></script>
</head>
<body> $.each(json_results.results, function(key) {
<div data-role="page" id="page"> html = '<img
<div data-role="header"> src="'+json_results.results[key].profile_image_url+'"/>';
<h1>Main</h1> html += '<h3><a
</div> href="#">'+json_results.results[key].text+'</a></h3>';
<div data-role="content"> html += '<p>From:
<ul data-role="listview" data-inset="true"> '+json_results.results[key].from_user+' Created:
<li data-role="list-divider">jQuery Mobile</li> '+json_results.results[key].created_at+'</p>';
<li><a href="#ListViewPage">List View</a></li> listItems.append('<li>'+html+'</li>');
<li><a href="#Form">Form Elements</a></li> });
<li><a href="#Twitter">Twitter Client</a></li> // Refresh
</ul> $('#twitList ul').listview();
</div> }
<div data-role="footer"> });
<h4>Footer</h4> })
</div> </script>
</div> </body>
<div data-role="page" id="Twitter"> </html>
<div data-role="header">
<h1>Form Page</h1>
</div>
<div data-role="content">
<div id="twitList"></div>
Page 29 </div>

감사합니다.
질의 응답 시갂

 Twitter : @jongkwang
 Facebook : facebook.com/kimjongkwang

Page 30

Dreamweaver CS5.5 를 이용한 jQueryMobile 개발

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (20)

Similar to Dreamweaver CS5.5 를 이용한 jQueryMobile 개발

Similar to Dreamweaver CS5.5 를 이용한 jQueryMobile 개발 (20)

Recently uploaded

Recently uploaded (7)

Dreamweaver CS5.5 를 이용한 jQueryMobile 개발