PHONEGAPIN THE CLASSROOMDeveloping social book apps with PhoneGap & Wordpress               http://www.slideshare.net/haig...
BUT FIRST,A BIT ABOUT MEProfessor of DesignEmily Carr University of Art + DesignFounder & Creative DirectorLift Studios - ...
Concepts covered in this workshop will include• publications for mobile platforms• a book as a social framework• using ope...
Strategy• publications for mobile platforms• a book as a social framework• using open source tools to publish• Workshop I:...
This is a workshop but it is by way ofan interesting story...
A Social Bookby Alexandra SamuelA research projectat Emily Carr University of Art + Design
A Social Bookby Alexandra SamuelA research projectat Emily Carr University of Art + DesignCan reading a book be aparticipa...
Outcomes:1. Create a social e-book prototype thatestablishes the potential of e-books to support asocial, participatory re...
What are the issues when adding socialfunctionality into an ebook format?
What are the issues when adding socialfunctionality into an ebook format?Can we integrate a social component into abook wi...
What are the issues when adding socialfunctionality into an ebook format?Can we integrate a social component into abook wi...
What are the issues when adding socialfunctionality into an ebook format?Can we integrate a social component into abook wi...
The problem with most Social books:1. Social usually means sharing quotes onFacebook & Twitter2. Reader comments are priva...
Introducing PhoneGapThe only free open source framework forcreating apps easily for 7 mobile platformsusing standard HTML,...
The PhoneGap team hastwo core tenants of belief:  The web solved cross platform.  All technology deprecates with time. htt...
Two high level goals of PhoneGap:  The web as a first class development  platform.  The ultimate purpose of PhoneGap is  to...
2 Approaches to PhoneGap1. Compile Locally                2. Compile in Cloud (PhoneGap Build)
2 Approaches to PhoneGap1. Compile Locally                2. Compile in Cloud (PhoneGap Build) phonegap            HTML pa...
2 Approaches to PhoneGap1. Compile Locally                2. Compile in Cloud (PhoneGap Build) phonegap            HTML   ...
I: Install Xcode and PhoneGapApples Xcode (http://developer.apple.com)PhoneGap http://www.phonegap.com/download# version 1...
Create the Phonegap package for          compiling to iOSIn your terminal app: cd ~/Documents/phonegap-2.3.0/lib/ios/bin/ ...
Create the Phonegap package for          compiling to iOSIn your terminal app: cd ~/Documents/phonegap-2.3.0/lib/ios/bin/ ...
II. Prototyping with jQuery MobileA unified user interface system that worksseamlessly across all popular mobile deviceplat...
<!DOCTYPE html><html><head>! <title>My Page</title>! <meta name="viewport" content="width=device-width, initial-scale=1">!...
<!DOCTYPE html><html><head>! <title>My Page</title>! <meta name="viewport" content="width=device-width, initial-scale=1">!...
<!DOCTYPE html><html><head>! <title>My Page</title>! <meta name="viewport" content="width=device-width, initial-scale=1">!...
<!DOCTYPE html><html><head>! <title>My Page</title>! <meta name="viewport" content="width=device-width, initial-scale=1">!...
<!DOCTYPE html><html><head>! <title>My Page</title>! <meta name="viewport" content="width=device-width, initial-scale=1">!...
! <title>My Page</title>! <meta name="viewport" content="width=device-width, initial-scale=1">! <link rel="stylesheet" hre...
! <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>! <script src="http://code.jquery.com/mobile/1.2.0/jqu...
jQuery Mobile Multiple ScreensPage Anatomyhttp://jquerymobile.com/test/docs/pages/page-anatomy.htmlMulti Page Example
How our Social Book works?         NATIVE APPLICATION              PHONEGAP        HTML CSS & Javascript               JSO...
III. Introducing JSON APIWordpress JSON API pluginJavascript for API call
<!DOCTYPE html><html><head>! <title>My Page</title>! <meta name="viewport" content="width=device-width, initial-scale=1">!...
! <title>My Page</title>! <meta name="viewport" content="width=device-width, initial-scale=1">! <link rel="stylesheet" hre...
function   sectionList(data) {!   !      var output=<ul data-role="listview" data-filter="true">;!   !      $.each(data.po...
http://www.slideshare.net/haigarmen/  Thank youharmen@ecuad.ca        @haigarmen
Adobe phonegap-workshop-2013
Adobe phonegap-workshop-2013
Adobe phonegap-workshop-2013
Adobe phonegap-workshop-2013
Adobe phonegap-workshop-2013
Adobe phonegap-workshop-2013
Adobe phonegap-workshop-2013
Adobe phonegap-workshop-2013
Upcoming SlideShare
Loading in...5
×

Adobe phonegap-workshop-2013

898

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
898
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Adobe phonegap-workshop-2013

  1. 1. PHONEGAPIN THE CLASSROOMDeveloping social book apps with PhoneGap & Wordpress http://www.slideshare.net/haigarmen/ harmen@ecuad.ca @haigarmen
  2. 2. BUT FIRST,A BIT ABOUT MEProfessor of DesignEmily Carr University of Art + DesignFounder & Creative DirectorLift Studios - Interaction Design AgencyStudiedArchitecture,Jazz Performance& Composition
  3. 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. 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. 5. This is a workshop but it is by way ofan interesting story...
  6. 6. A Social Bookby Alexandra SamuelA research projectat Emily Carr University of Art + Design
  7. 7. A Social Bookby Alexandra SamuelA research projectat Emily Carr University of Art + DesignCan reading a book be aparticipatory and social experience?
  8. 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. 9. What are the issues when adding socialfunctionality into an ebook format?
  10. 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. 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. 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. 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. 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. 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. 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. 17. 2 Approaches to PhoneGap1. Compile Locally 2. Compile in Cloud (PhoneGap Build)
  18. 18. 2 Approaches to PhoneGap1. Compile Locally 2. Compile in Cloud (PhoneGap Build) phonegap HTML package IDE Compiles Native App APP
  19. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 31. jQuery Mobile Multiple ScreensPage Anatomyhttp://jquerymobile.com/test/docs/pages/page-anatomy.htmlMulti Page Example
  32. 32. How our Social Book works? NATIVE APPLICATION PHONEGAP HTML CSS & Javascript JSON API Wordpress (CMS)
  33. 33. III. Introducing JSON APIWordpress JSON API pluginJavascript for API call
  34. 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. 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. 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. 37. http://www.slideshare.net/haigarmen/ Thank youharmen@ecuad.ca @haigarmen
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×