CREATING                  SOCIAL BOOKSHow to develop social book apps with PhoneGap & Wordpress                        har...
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           Technology• a book as a social framework                • Native App...
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...
How does it work?        NATIVE APPLICATION            PHONEGAP       HTML CSS & Javascript             JSON API          ...
Introducing PhoneGapThe only free open source framework forcreating apps easily for 7 mobile platformsusing standard HTML,...
I: Install Xcode and PhoneGapApples Xcode (http://developer.apple.com)PhoneGap http://www.phonegap.com/download# version 1...
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
Gestural AffordancesHow do we design interfaces to cue usersabout gestures?Why are gestures becoming the new click?Can we t...
III. Introducing JSON APIWordpress JSON API pluginJavascript for API call
$(document).ready(function(){        console.log("online");      var status = $(#network-status);        var output = $(#o...
var   displayContent = function (data) {!     !    !   var output    = $(#output);!     !    !   $.each(data.pages, functi...
We need a name...   please help us come up with   a name for this open source   social book project.
We need a name...   Corey Pressman suggests:   bookspiro
Tweet your name with hashtag: #socialbookWe need a name...        Corey Pressman suggests:        bookspiro
Thank youharmen@ecuad.ca   @haigarmen
TOC Workshop 2013
TOC Workshop 2013
TOC Workshop 2013
TOC Workshop 2013
TOC Workshop 2013
TOC Workshop 2013
TOC Workshop 2013
TOC Workshop 2013
TOC Workshop 2013
TOC Workshop 2013
TOC Workshop 2013
Upcoming SlideShare
Loading in...5
×

TOC Workshop 2013

1,425

Published on

What does a mobile app platform offer books that traditional publishing methods can not? In this workshop Haig Armen will reveal digital strategies for transforming a book into a dynamic social publication using open source software.

The workshop will feature a case study of a new book by Alex Samuel that Haig Armen and a number of Emily Carr University of Art + Design students have designed and created using open source software like Wordpress and PhoneGap.

The workshop will walk participants through a step by step tutorial on how to pull content from Wordpress dynamically into an iPhone app created with PhoneGap.

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

No Downloads
Views
Total Views
1,425
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

TOC Workshop 2013

  1. 1. CREATING SOCIAL BOOKSHow to develop social book apps with PhoneGap & Wordpress 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• gestural affordances• Workshop III: JSON-API tunnel
  4. 4. Strategy• publications for mobile platforms Technology• a book as a social framework • Native App vs. Web Technology• using open source tools to publish • Hybrid native/web apps• Workshop I: Introducing PhoneGap • Book with an API • Workshop III: JSON-API tunnel Design • balancing reading with social • Workshop II: prototyping with jQueryMobile • gestural affordances
  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. How does it work? NATIVE APPLICATION PHONEGAP HTML CSS & Javascript JSON API Wordpress (CMS)
  15. 15. 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
  16. 16. 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)
  17. 17. 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
  18. 18. <!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>
  19. 19. <!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>
  20. 20. <!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>
  21. 21. <!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>
  22. 22. <!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>
  23. 23. ! <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>
  24. 24. ! <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>
  25. 25. jQuery Mobile Multiple ScreensPage Anatomyhttp://jquerymobile.com/test/docs/pages/page-anatomy.htmlMulti Page Example
  26. 26. Gestural AffordancesHow do we design interfaces to cue usersabout gestures?Why are gestures becoming the new click?Can we teach gestures without specialonboarding instructions?
  27. 27. III. Introducing JSON APIWordpress JSON API pluginJavascript for API call
  28. 28. $(document).ready(function(){ console.log("online"); var status = $(#network-status); var output = $(#output); status.text("Online");! $.ajax({! ! url: http://book.hyko.org/api/get_page_index/,! ! dataType: jsonp,! ! timeout: 5000,! ! success: function(data, status){! ! ! localStorage.setItem(posts, JSON.stringify(data));! ! ! displayContent(data);!! ! ! !! ! },! ! error: function(){! ! ! output.text(There was an error loading the data.);! ! }! });});
  29. 29. var displayContent = function (data) {! ! ! var output = $(#output);! ! ! $.each(data.pages, function(i,page){! ! ! ! var section = <h2>+page.title+</h2>! ! ! ! +page.content+<br>! ! ! ! for(var j = 0; j < page.children.length; ++j)! ! ! ! {! ! ! ! $.each(page.children, function(j, page) {! ! ! ! var section = section+ <h2>+page.title+</h2>! ! ! ! ! +page.content+<br>! ! ! ! });! ! ! ! }! ! ! ! output.append(section);! ! ! });! ! }
  30. 30. We need a name... please help us come up with a name for this open source social book project.
  31. 31. We need a name... Corey Pressman suggests: bookspiro
  32. 32. Tweet your name with hashtag: #socialbookWe need a name... Corey Pressman suggests: bookspiro
  33. 33. 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.

×