Dreamweaver CS5.5 를 이용한 jQueryMobile 개발

  • 3,553 views
Uploaded on

Dreamweaver CS5.5 를 이용한 jQuery Mobile 개발

Dreamweaver CS5.5 를 이용한 jQuery Mobile 개발

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,553
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Adobe Dreamweaver CS5.5- jQuery Mobile김종광 책임연구원 | 미래웹기술연구소㈜
  • 2. 목차 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
  • 3. Mobile UI Framework
  • 4. Mobile UI Framework - 정의 모바일 환경에서 사용자와의 접점이 되는 UI를 만들 수 있는 기틀 제공 - UI 개발의 기초를 제공해준다 - 개발자는 컨텐츠에 집중 할 수 있다Page 4
  • 5. Mobile UI Framework - 정의 아이폰 개발 : Xcode + Interface Builder 안드로이드 개발 : 안드로이드 SDK + Layout Editor 모바일 웹 : 드림위버 + Mobile UI Framework Interface Builder UI FrameworkPage 5
  • 6. Mobile UI Framework - 정의 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
  • 7. jQuery Mobile
  • 8. jQuery Mobile Touch-Optimized Web Framework for SmartPhones & Tables Version - 2010.10.16 Alpha 1 - 2011.11.16 정식버젂 출시Page 8
  • 9. jQuery Mobile HTML 마크업 기반 개발  쉽다 로직  jQuery 기반  대중화된 기술 JavaScript 를 몰라도 갂단한 화면 구성 가능 기존 사이트를 jQM으로 쉽게 변경 가능Page 9
  • 10. jQuery Mobile 많은 UI 컴포넌트들을 기본 제공 한다. - 이미지 사용을 최소화 할 수 있다 - 네트워크 트래픽을 줄인다 - 모바일 환경에서 트래픽은 중요하다 테마 기능 제공Page 10
  • 11. 멀티 디바이스 지원 웹앱 프레임워크 중 가장 많은 디바이스 지원 브라우저가 지원하는 한도 내에서 최상의 화면을 제공해 준다 구형 브라우저 - 적젃한 퇴보 (Graceful Degradation) - 구형 브라우저라고 서비스를 안 하는 것이 아니라 화려함이 없을 뿐 기능적 지원은 한다. C급 브라우저 A급 브라우저Page 11
  • 12. 멀티 디바이스 지원 멀티 디바이스 지원 현황 - 가장 많은 Device 지원 !!Page 12
  • 13. jQuery Mobile 의 특징
  • 14. 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 WelcomePage 14
  • 15. 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 WelcomePage 15
  • 16. jQuery Mobile 의 특징 – WAI-ARIA Accessible Rich Internet Applications (WAI-ARIA) 시각에 장애가 있는 사람이 좀 더 접근성 있는 Web을 접하도록 하는 웹 표준 (Proposed Recommendation) 영역에 ‘role’ 속성을 주고 ‘banner’ 등의 값을 주어 의미를 부여한다 jQuery Mobile 에서는 data-role 값을 이용하여 이러한 ARIA 속성을 자동으로 부여 한다.Page 16
  • 17. jQuery Mobile 구축 사례
  • 18. jQuery Mobile Gallery jQuery Mobile Gallery – 적용 사례Page 18
  • 19. jQuery Mobile Gallery jQuery Mobile GalleryPage 19
  • 20. jQuery Mobile Gallery jQuery Mobile GalleryPage 20
  • 21. jQuery Mobile Tutorial
  • 22. jQuery Mobile Tutorial – 라이브러리 교체 Dreamweaver CS5.5 에 포함되어 있는 jQuery Mobile - 내장 된 Version : 1.0 Alpha3 - 최싞 버젂 : 1.0 Final - Alpha3 과 Final 버젂갂의 차이가 크므로  판올림이 필요하다 !!Page 22
  • 23. jQuery Mobile Tutorial – 라이브러리 교체 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- mobilePage 23
  • 24. jQuery Mobile Tutorial – 라이브러리 교체 jQuery Mobile 템플릿 교체 - jQuery Mobile 템플릿 위치 한글버젂의 Dreamweaver CS5.5 • C:Program Files (x86)AdobeAdobe Dreamweaver CS5.5ko_KRConfigurationBuiltInMobile Starters 영문버젂의 Dreamweaver CS5.5 • C:Program Files (x86)AdobeAdobe Dreamweaver CS5.5configurationBuiltInMobile Starters Mac OS • /Applications/Adobe Dreamweaver CS5.5/Configuration/BuiltIn/Mobile Starters - 변경 할 파일 3개 • jQueryMobileLocalMultiPage.htm • jQueryMobileMultiPage.htm • jQueryMobilePhoneGapMultiPage.htmPage 24
  • 25. jQuery Mobile Tutorial – 템플릿 생성 jQuery Mobile Template : File  NewPage 25
  • 26. jQuery Mobile Tutorial – INSERT 패널 jQuery Mobile(CDN) 템플릿 생성 <body> 안의 내용을 모두 지운다 ‚Insert‛ 패널 활성화 ( Window  Insert )Page 26
  • 27. jQuery Mobile Tutorial – Page 생성 Page 생성Page 27
  • 28. jQuery Mobile Tutorial Content 영역 수정Page 28
  • 29. 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>
  • 30. 감사합니다. 질의 응답 시갂  Twitter : @jongkwang  Facebook : facebook.com/kimjongkwangPage 30