TOC Workshop 2013

  • 1,341 views
Uploaded 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 …

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.

  • 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
1,341
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
7
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. CREATING SOCIAL BOOKSHow to develop social book apps with PhoneGap & Wordpress 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• gestural affordances• Workshop III: JSON-API tunnel
  • 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. 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. How does it work? NATIVE APPLICATION PHONEGAP HTML CSS & Javascript JSON API Wordpress (CMS)
  • 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. 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. 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. <!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. <!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. <!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. <!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. <!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. ! <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. ! <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. jQuery Mobile Multiple ScreensPage Anatomyhttp://jquerymobile.com/test/docs/pages/page-anatomy.htmlMulti Page Example
  • 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. III. Introducing JSON APIWordpress JSON API pluginJavascript for API call
  • 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. 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. We need a name... please help us come up with a name for this open source social book project.
  • 31. We need a name... Corey Pressman suggests: bookspiro
  • 32. Tweet your name with hashtag: #socialbookWe need a name... Corey Pressman suggests: bookspiro
  • 33. Thank youharmen@ecuad.ca @haigarmen