Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Dreamweaver CS5.5 를 이용한 jQueryMobile 개발

4,719 views

Published on

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

Published in: Technology, Design
  • If you want to download or read this book, Copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ..................................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookeBOOK Crime, eeBOOK Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Dreamweaver CS5.5 를 이용한 jQueryMobile 개발

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

×