Adobe phonegap-workshop-2013

PHONEGAP
IN THE CLASSROOM
Developing social book apps with PhoneGap & Wordpress

http://www.slideshare.net/haigarmen/

harmen@ecuad.ca @haigarmen

BUT FIRST,

A BIT ABOUT ME

Professor of Design
Emily Carr University of Art + Design

Founder & Creative Director
Lift Studios - Interaction Design Agency

Studied
Architecture,
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
• balancing reading with social
• Workshop II: prototyping with jQueryMobile
• Hybrid native/web apps
• Workshop III: JSON-API tunnel

Strategy
• publications for mobile platforms
• a book as a social framework
• Workshop I: Introducing PhoneGap
Design
• balancing reading with social
• Workshop II: prototyping with jQueryMobile
• gestural aﬀordances

Technology
• Native App vs. Web Technology
• Hybrid native/web apps
• Book with an API
• Workshop III: JSON-API tunnel

This is a workshop but it is by way of
an interesting story...

A Social Book
by Alexandra Samuel

A research project
at Emily Carr University of Art + Design

A Social Book
by Alexandra Samuel

A research project
at Emily Carr University of Art + Design

Can reading a book be a
participatory and social experience?

Outcomes:

1. Create a social e-book prototype that
establishes the potential of e-books to support a
social, participatory reader experience

2. Develop a participatory design methodology
where readers contribute to the structure,
design and/or content of the ﬁnal outcome

What are the issues when adding social
functionality into an ebook format?


Can we integrate a social component into a
book without getting in the way of the
original content?


book without getting in the way of the original
content?

How do we make a book ultimately dynamic?


book without getting in the way of the original
content?

How do we make a book ultimately dynamic?

What tools should we use to manage the
content, comments and membership
registration?

The problem with most Social books:

1. Social usually means sharing quotes on
Facebook & Twitter

2. Reader comments are private and
marginalized

3. Comments are separated from the original
text and usually read out of context

Introducing PhoneGap

The only free open source framework for
creating apps easily for 7 mobile platforms
using standard HTML, CSS and Javascript

http://docs.phonegap.com/en/2.1.0/guide_getting-started_index.md.html

The PhoneGap team has
two 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/

Two high level goals of PhoneGap:

The web as a ﬁrst class development
platform.

The ultimate purpose of PhoneGap is
to cease to exist.

2 Approaches to PhoneGap

1. Compile Locally 2. Compile in Cloud (PhoneGap Build)



phonegap HTML
package

IDE

Compiles
Native App
APP



phonegap HTML HTML
package
upload www files or Github

IDE PhoneGap
Build

Compiles
Native App
APP iOS android WebOS

I: Install Xcode and PhoneGap
Apple's Xcode (http://developer.apple.com)

PhoneGap http://www.phonegap.com/download# version 1.9.0

Requirements
• 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 certiﬁcate ($100/year)

Create the Phonegap package for
compiling to iOS
In your terminal app:

cd ~/Documents/phonegap-2.3.0/lib/ios/bin/

./create ~/Deskstop/DreamGap com.haigarmen.DreamGap DreamGap

II. Prototyping with jQuery Mobile

A uniﬁed user interface system that works
seamlessly across all popular mobile device
platforms, built on the rock-solid jQuery and
jQuery 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>

! <div data-role="content">!
! ! <p>Hello world</p>! !
! </div>

</div>

</body>
</html>

! <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>
</head>
<body>


! </div>

! ! <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>

</body>
</html>

script>
</head>
<body>


! </div>

! ! <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>

</body>
</html>

jQuery Mobile Multiple Screens

Page Anatomy
http://jquerymobile.com/test/docs/pages/page-anatomy.html

Multi Page Example

How our Social Book works?

NATIVE APPLICATION
PHONEGAP
HTML CSS & Javascript
JSON API
Wordpress (CMS)

III. Introducing JSON API

Wordpress JSON API plugin

Javascript for API call

<!DOCTYPE html>
<html>
<head>
! <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>

<div id="sectionlist">
<img src="css/images/ajax-loader.gif" width="46"
height="46" alt="Ajax Loader">
</div>
!

</div>

</body>
</html>

! <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>

<div id="sectionlist">
<img src="css/images/ajax-loader.gif" width="46"
height="46" alt="Ajax Loader">
</div>
!

</div>

<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>

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);
}

http://www.slideshare.net/haigarmen/

Thank you

harmen@ecuad.ca @haigarmen

Adobe phonegap-workshop-2013

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Adobe phonegap-workshop-2013

Ähnlich wie Adobe phonegap-workshop-2013 (20)

Adobe phonegap-workshop-2013