TOC Workshop 2013
Upcoming SlideShare
Loading in...5
×
 

TOC Workshop 2013

on

  • 1,514 views

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.

Statistics

Views

Total Views
1,514
Views on SlideShare
447
Embed Views
1,067

Actions

Likes
1
Downloads
7
Comments
0

3 Embeds 1,067

http://www.sobookonline.fr 1002
http://feeds.feedburner.com 64
http://fever.meidosem.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

TOC Workshop 2013 TOC Workshop 2013 Presentation Transcript

  • CREATING SOCIAL BOOKSHow to develop social book apps with PhoneGap & Wordpress harmen@ecuad.ca @haigarmen
  • BUT FIRST,A BIT ABOUT MEProfessor of DesignEmily Carr University of Art + DesignFounder & Creative DirectorLift Studios - Interaction Design AgencyStudiedArchitecture,Jazz Performance& Composition
  • 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 View slide
  • 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 View slide
  • 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 aparticipatory and social experience?
  • 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
  • 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 without getting in the way of theoriginal content?
  • 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 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?
  • 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
  • How does it work? NATIVE APPLICATION PHONEGAP HTML CSS & Javascript JSON API Wordpress (CMS)
  • 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
  • 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)
  • 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
  • <!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>
  • <!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>
  • <!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>
  • <!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>
  • <!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>
  • ! <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>
  • ! <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>
  • 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 teach gestures without specialonboarding instructions?
  • III. Introducing JSON APIWordpress JSON API pluginJavascript for API call
  • $(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.);! ! }! });});
  • 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);! ! ! });! ! }
  • 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