Adobe phonegap-workshop-2013

  • 821 views
Uploaded on

 

  • 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
821
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
9
Comments
0
Likes
1

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. PHONEGAPIN THE CLASSROOMDeveloping social book apps with PhoneGap & Wordpress http://www.slideshare.net/haigarmen/ harmen@ecuad.ca @haigarmen
  • 2. BUT FIRST,A BIT ABOUT MEProfessor of DesignEmily Carr University of Art + DesignFounder & Creative DirectorLift Studios - Interaction Design AgencyStudiedArchitecture,Jazz Performance& Composition
  • 3. Concepts covered in this workshop will include• publications for mobile platforms• a book as a social framework• using open source tools to publish• Native App vs. Web Technology• Book with an API• Workshop I: Introducing PhoneGap• using open source tools to publish• balancing reading with social• Workshop II: prototyping with jQueryMobile• Hybrid native/web apps• Workshop III: JSON-API tunnel
  • 4. Strategy• publications for mobile platforms• a book as a social framework• using open source tools to publish• Workshop I: Introducing PhoneGap Design • balancing reading with social • Workshop II: prototyping with jQueryMobile • gestural affordances Technology • Native App vs. Web Technology • Hybrid native/web apps • Book with an API • Workshop III: JSON-API tunnel
  • 5. This is a workshop but it is by way ofan interesting story...
  • 6. A Social Bookby Alexandra SamuelA research projectat Emily Carr University of Art + Design
  • 7. A Social Bookby Alexandra SamuelA research projectat Emily Carr University of Art + DesignCan reading a book be aparticipatory and social experience?
  • 8. Outcomes:1. Create a social e-book prototype thatestablishes the potential of e-books to support asocial, participatory reader experience2. Develop a participatory design methodologywhere readers contribute to the structure,design and/or content of the final outcome
  • 9. What are the issues when adding socialfunctionality into an ebook format?
  • 10. What are the issues when adding socialfunctionality into an ebook format?Can we integrate a social component into abook without getting in the way of theoriginal content?
  • 11. What are the issues when adding socialfunctionality into an ebook format?Can we integrate a social component into abook without getting in the way of the originalcontent?How do we make a book ultimately dynamic?
  • 12. What are the issues when adding socialfunctionality into an ebook format?Can we integrate a social component into abook without getting in the way of the originalcontent?How do we make a book ultimately dynamic?What tools should we use to manage thecontent, comments and membershipregistration?
  • 13. The problem with most Social books:1. Social usually means sharing quotes onFacebook & Twitter2. Reader comments are private andmarginalized3. Comments are separated from the originaltext and usually read out of context
  • 14. Introducing PhoneGapThe only free open source framework forcreating apps easily for 7 mobile platformsusing standard HTML, CSS and Javascripthttp://docs.phonegap.com/en/2.1.0/guide_getting-started_index.md.html
  • 15. The PhoneGap team hastwo core tenants of belief: The web solved cross platform. All technology deprecates with time. http://phonegap.com/2012/05/09/phonegap-beliefs-goals-and-philosophy/
  • 16. Two high level goals of PhoneGap: The web as a first class development platform. The ultimate purpose of PhoneGap is to cease to exist.
  • 17. 2 Approaches to PhoneGap1. Compile Locally 2. Compile in Cloud (PhoneGap Build)
  • 18. 2 Approaches to PhoneGap1. Compile Locally 2. Compile in Cloud (PhoneGap Build) phonegap HTML package IDE Compiles Native App APP
  • 19. 2 Approaches to PhoneGap1. Compile Locally 2. Compile in Cloud (PhoneGap Build) phonegap HTML HTML package upload www files or Github IDE PhoneGap Build Compiles Native App APP iOS android WebOS
  • 20. I: Install Xcode and PhoneGapApples Xcode (http://developer.apple.com)PhoneGap http://www.phonegap.com/download# version 1.9.0Requirements • Xcode 4.3+ • Xcode Command Line Tools • Intel-based computer with Mac OS X Lion or greater (10.7+) • Necessary for installing on device: ◦ Apple iOS device (iPhone, iPad, iPod Touch) ◦ iOS developer certificate ($100/year)
  • 21. Create the Phonegap package for compiling to iOSIn your terminal app: cd ~/Documents/phonegap-2.3.0/lib/ios/bin/ ./create ~/Deskstop/DreamGap com.haigarmen.DreamGap DreamGap
  • 22. Create the Phonegap package for compiling to iOSIn your terminal app: cd ~/Documents/phonegap-2.3.0/lib/ios/bin/ ./create ~/Deskstop/DreamGap com.haigarmen.DreamGap DreamGap
  • 23. II. Prototyping with jQuery MobileA unified user interface system that worksseamlessly across all popular mobile deviceplatforms, built on the rock-solid jQuery andjQuery UI foundation.http://jquerymobile.com/test/docs/about/getting-started.html
  • 24. <!DOCTYPE html><html><head>! <title>My Page</title>! <meta name="viewport" content="width=device-width, initial-scale=1">! <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/ jquery.mobile-1.2.0.min.css" />! <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>! <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script></head><body><div data-role="page">! <div data-role="header">! ! <h1>My Title</h1>! </div><!-- /header -->! <div data-role="content">!! ! <p>Hello world</p>! !! </div><!-- /content --></div><!-- /page --></body></html>
  • 25. <!DOCTYPE html><html><head>! <title>My Page</title>! <meta name="viewport" content="width=device-width, initial-scale=1">! <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/ jquery.mobile-1.2.0.min.css" />! <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>! <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script></head><body><div data-role="page">! <div data-role="header">! ! <h1>My Title</h1>! </div><!-- /header -->! <div data-role="content">!! ! <p>Hello world</p>! !! </div><!-- /content --></div><!-- /page --></body></html>
  • 26. <!DOCTYPE html><html><head>! <title>My Page</title>! <meta name="viewport" content="width=device-width, initial-scale=1">! <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/ jquery.mobile-1.2.0.min.css" />! <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>! <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script></head><body><div data-role="page">! <div data-role="header">! ! <h1>My Title</h1>! </div><!-- /header -->! <div data-role="content">!! ! <p>Hello world</p>! !! </div><!-- /content --></div><!-- /page --></body></html>
  • 27. <!DOCTYPE html><html><head>! <title>My Page</title>! <meta name="viewport" content="width=device-width, initial-scale=1">! <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/ jquery.mobile-1.2.0.min.css" />! <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>! <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script></head><body><div data-role="page">! <div data-role="header">! ! <h1>My Title</h1>! </div><!-- /header -->! <div data-role="content">!! ! <p>Hello world</p>! !! </div><!-- /content --></div><!-- /page --></body></html>
  • 28. <!DOCTYPE html><html><head>! <title>My Page</title>! <meta name="viewport" content="width=device-width, initial-scale=1">! <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/ jquery.mobile-1.2.0.min.css" />! <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>! <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script></head><body><div data-role="page">! <div data-role="header">! ! <h1>My Title</h1>! </div><!-- /header -->! <div data-role="content">!! ! <p>Hello world</p>! !! </div><!-- /content --></div><!-- /page --></body></html>
  • 29. ! <title>My Page</title>! <meta name="viewport" content="width=device-width, initial-scale=1">! <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />! <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>! <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script></head><body><div data-role="page">! <div data-role="header">! ! <h1>My Title</h1>! </div><!-- /header -->! <div data-role="content">!! ! <p>Hello world</p> <ul data-role="listview" data-inset="true" data-filter="true"> ! <li><a href="#">Acura</a></li> ! <li><a href="#">Audi</a></li> ! <li><a href="#">BMW</a></li> ! <li><a href="#">Mercedes Benz</a></li> ! <li><a href="#">Ferrari</a></li> </ul>! !! </div><!-- /content --></div><!-- /page --></body></html>
  • 30. ! <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>! <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script></head><body><div data-role="page">! <div data-role="header">! ! <h1>My Title</h1>! </div><!-- /header -->! <div data-role="content">!! ! <p>Hello world</p> <ul data-role="listview" data-inset="true" data-filter="true"> ! <li><a href="#">Acura</a></li> ! <li><a href="#">Audi</a></li> ! <li><a href="#">BMW</a></li> ! <li><a href="#">Mercedes Benz</a></li> ! <li><a href="#">Ferrari</a></li> </ul>! <form> <label for="slider-0">Input slider:</label> <input type="range" name="slider" id="slider-0" value="25" min="0" max="100" /> </form>!! </div><!-- /content --></div><!-- /page --></body></html>
  • 31. jQuery Mobile Multiple ScreensPage Anatomyhttp://jquerymobile.com/test/docs/pages/page-anatomy.htmlMulti Page Example
  • 32. How our Social Book works? NATIVE APPLICATION PHONEGAP HTML CSS & Javascript JSON API Wordpress (CMS)
  • 33. III. Introducing JSON APIWordpress JSON API pluginJavascript for API call
  • 34. <!DOCTYPE html><html><head>! <title>My Page</title>! <meta name="viewport" content="width=device-width, initial-scale=1">! <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />! <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>! <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script></head><body><div data-role="page">! <div data-role="header">! ! <h1>My Title</h1>! </div><!-- /header -->! <div data-role="content">! <div id="sectionlist"> <img src="css/images/ajax-loader.gif" width="46" height="46" alt="Ajax Loader"> </div>!! </div><!-- /content --></div><!-- /page --></body></html>
  • 35. ! <title>My Page</title>! <meta name="viewport" content="width=device-width, initial-scale=1">! <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />! <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>! <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script></head><body><div data-role="page">! <div data-role="header">! ! <h1>My Title</h1>! </div><!-- /header -->! <div data-role="content">! <div id="sectionlist"> <img src="css/images/ajax-loader.gif" width="46" height="46" alt="Ajax Loader"> </div>!! </div><!-- /content --></div><!-- /page --><script src="http://book.hyko.org/api/get_category_posts/?post_type=chapters&slug=section&order=ASC&callback=sectionList"type="text/javascript"></script></body></html>
  • 36. function sectionList(data) {! ! var output=<ul data-role="listview" data-filter="true">;! ! $.each(data.posts, function(key,val) {! ! !! ! ! var tempDiv = document.createElement("tempDiv");! ! ! tempDiv.innerHTML = val.excerpt;! ! ! $("a", tempDiv).remove();! ! ! var excerpt = tempDiv.innerHTML;! ! !! ! ! output+=<li>;! ! ! output+=<a href="#chapters" onclick="chapterList( +val.id + )" data-transition="slide" >;! ! ! output+=<h3> + val.title + </h3>;! ! ! output+=<p> + val.excerpt + </p>;! ! ! output+=</a>;! ! ! output+=</li>;! ! }); // go through each post! ! output+=</ul>;! ! $(#sectionlist).html(output);}
  • 37. http://www.slideshare.net/haigarmen/ Thank youharmen@ecuad.ca @haigarmen