Your SlideShare is downloading. ×
  • Like
TOC Workshop 2013
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

TOC Workshop 2013

  • 1,366 views
Published

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,366
On SlideShare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
8
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