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.
From Idea to App (or “How we roll at Small Town Heroes”)Bramus Van Damme
Guestlecture I gave to the students ICT at Odisee, explaining the app development process, how we do certain things at Small Town Heroes, and how we implement QA throughout our process.
In this presentation, Intergen's Mark Delaney (Interactive Designer, Portals and Content) talks about mobile content strategy, context, device experience and gives advice on how to start your journey on creating a responsive website.
Mistakes I Made Building Netflix for the iPhonekentbrew
Slides for the talk by the same name I gave at SxSW 2011. You can view the demo app at http://iflx.com, and fork the source from https://github.com/kentbrew/iflx.
Hybrid mobile app development slide with Ionic Framework. This is a subset of slides presented during my Ionic Mobile Development course.
In addition to the items in this slide, the course will cover Ionic application Architecture, Important AngularJS principles for Ionic development, Native vs Hybrid and code signing to Google Play and AppStore.
It is a hands-on based approach training where 80% of the course (normally from 10 am to 5 pm) will be guided lab activity or mini project activity.
Making money with Phonegap and Angular appsDemian Borba
How about creating an awesome mobile app, for iOS and Android, using just HTML, JS and CSS? How about using Angular to create an amazing UI that looks and behaves like a native app? And on top of all that, how about make it take Bitcoin, PayPal, as well as credit and debit cards?
In this talk, we will go over all the steps necessary to configure your environment (Mac or Windows), to develop/debug/deploy a mobile app built with Cordova and Angular, offering multiple payment options to users, all at once!
Are you ready? Fasten your seat belts...
From Idea to App (or “How we roll at Small Town Heroes”)Bramus Van Damme
Guestlecture I gave to the students ICT at Odisee, explaining the app development process, how we do certain things at Small Town Heroes, and how we implement QA throughout our process.
In this presentation, Intergen's Mark Delaney (Interactive Designer, Portals and Content) talks about mobile content strategy, context, device experience and gives advice on how to start your journey on creating a responsive website.
Mistakes I Made Building Netflix for the iPhonekentbrew
Slides for the talk by the same name I gave at SxSW 2011. You can view the demo app at http://iflx.com, and fork the source from https://github.com/kentbrew/iflx.
Hybrid mobile app development slide with Ionic Framework. This is a subset of slides presented during my Ionic Mobile Development course.
In addition to the items in this slide, the course will cover Ionic application Architecture, Important AngularJS principles for Ionic development, Native vs Hybrid and code signing to Google Play and AppStore.
It is a hands-on based approach training where 80% of the course (normally from 10 am to 5 pm) will be guided lab activity or mini project activity.
Making money with Phonegap and Angular appsDemian Borba
How about creating an awesome mobile app, for iOS and Android, using just HTML, JS and CSS? How about using Angular to create an amazing UI that looks and behaves like a native app? And on top of all that, how about make it take Bitcoin, PayPal, as well as credit and debit cards?
In this talk, we will go over all the steps necessary to configure your environment (Mac or Windows), to develop/debug/deploy a mobile app built with Cordova and Angular, offering multiple payment options to users, all at once!
Are you ready? Fasten your seat belts...
5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)David Wesst
“We need a mobile app. Make our website into a mobile app.” The request seems reasonable, doesn’t it? Your website is JavaScript, native apps are JavaScript, why wouldn’t you make your website into an application? In this presentation we’ll give you 5 reasons why your website shouldn’t end up as a native application to give you the tools you need to not only turn down the request, but on how to make a better solution.
A talk I gave on Mobile IA at the University of Washington iSchool's Information Architecture Summer Institute. Presented in Seattle, June 2012.
[Originally uploaded to Slideshare June 21, 2012]
The goal of this talk was to present alternative ways to address the growing fragmentation in the smartphone app world. The talk starts out discussing “web” apps then dives into “native” apps.
Presented at HoustonJS
http://www.meetup.com/houston-js/events/203757092/
On the fence about building hybrid apps? Let me convince you to take the leap. I’ll discuss the process we use at Poetic Systems and demonstrate with a live coding example.
Debugging and Tuning Mobile Web Sites with Modern Web BrowsersTroy Miles
Until recently, debugging a mobile web site was incredibly difficult. Luckily things things have changed. Now some desktop browsers not only contain remote debuggers, but have other features to monitor and improve performance and detect memory leaks.
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]David Wesst
End-users are shallow and vein when it comes to applications. Whether you are selling apps in the marketplace, or trying to engage business users, without a sexy user experience, it can be hard to get people interested. HTML5, although very practical and functional as a platform, can do wonders when it comes to making sexy software. In this session, we will take a deeper dive into the HTML5 tools that can make your application a looker and really look good. We will learn how to take a regular HTML5 application and turn it into a rich user experience that stands out in the crown in HTML5 application using features like SVG, Canvas, and Audio/Video.
This presentation will demonstrate how to use Adobe Edge professional authoring software to create highly engaging content which targets HTML5, CSS, and JavaScript. Content created in Adobe Edge does not rely on a plugin – so it can be run within any standard browser… even on mobile devices. We will provide an overview of the current web landscape and how Edge fills the need for professional tooling in this area. We’ll examine composition document creation, internal drawing tools, the import of external assets, how to achieve fluid animation and advanced transitioning through the Edge timeline, Interactivity through Actions and Triggers, and examine advanced publishing option for completed compositions.
The Spirit of Opensource - contribution as a strategy for growth and innova...Parth Lawate
Updated Slides with a new Examples & concepts
Open source is a powerful concept and used correctly it evolves a powerful & sustainable ecosystem around it. Open source can be a powerful strategy that drives growth and innovation. Learn how you or your company can adopt this powerful tool that not only increases your development velocity but also drives you to innovate and make a difference all while running a sustainable business around it .
5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)David Wesst
“We need a mobile app. Make our website into a mobile app.” The request seems reasonable, doesn’t it? Your website is JavaScript, native apps are JavaScript, why wouldn’t you make your website into an application? In this presentation we’ll give you 5 reasons why your website shouldn’t end up as a native application to give you the tools you need to not only turn down the request, but on how to make a better solution.
A talk I gave on Mobile IA at the University of Washington iSchool's Information Architecture Summer Institute. Presented in Seattle, June 2012.
[Originally uploaded to Slideshare June 21, 2012]
The goal of this talk was to present alternative ways to address the growing fragmentation in the smartphone app world. The talk starts out discussing “web” apps then dives into “native” apps.
Presented at HoustonJS
http://www.meetup.com/houston-js/events/203757092/
On the fence about building hybrid apps? Let me convince you to take the leap. I’ll discuss the process we use at Poetic Systems and demonstrate with a live coding example.
Debugging and Tuning Mobile Web Sites with Modern Web BrowsersTroy Miles
Until recently, debugging a mobile web site was incredibly difficult. Luckily things things have changed. Now some desktop browsers not only contain remote debuggers, but have other features to monitor and improve performance and detect memory leaks.
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]David Wesst
End-users are shallow and vein when it comes to applications. Whether you are selling apps in the marketplace, or trying to engage business users, without a sexy user experience, it can be hard to get people interested. HTML5, although very practical and functional as a platform, can do wonders when it comes to making sexy software. In this session, we will take a deeper dive into the HTML5 tools that can make your application a looker and really look good. We will learn how to take a regular HTML5 application and turn it into a rich user experience that stands out in the crown in HTML5 application using features like SVG, Canvas, and Audio/Video.
This presentation will demonstrate how to use Adobe Edge professional authoring software to create highly engaging content which targets HTML5, CSS, and JavaScript. Content created in Adobe Edge does not rely on a plugin – so it can be run within any standard browser… even on mobile devices. We will provide an overview of the current web landscape and how Edge fills the need for professional tooling in this area. We’ll examine composition document creation, internal drawing tools, the import of external assets, how to achieve fluid animation and advanced transitioning through the Edge timeline, Interactivity through Actions and Triggers, and examine advanced publishing option for completed compositions.
The Spirit of Opensource - contribution as a strategy for growth and innova...Parth Lawate
Updated Slides with a new Examples & concepts
Open source is a powerful concept and used correctly it evolves a powerful & sustainable ecosystem around it. Open source can be a powerful strategy that drives growth and innovation. Learn how you or your company can adopt this powerful tool that not only increases your development velocity but also drives you to innovate and make a difference all while running a sustainable business around it .
This workshop focuses on social responsibility and includes an intense lineup of participatory design exercises that touch on a series of methods for designing compelling user experiences. Participants are introduced to psychological and business model concepts to help teams craft unique mobile engagement and experiences. Working through user motivations, perceived abilities and discovering opportune moments for triggering habit changing actions, teams will explore applying behavioural psychology to empathize and connect with intended mobile users.
Designing Mineblock: Merging Physical & Digital to create Meta ProductsHaig Armen
This presentation introduces Mineblock - an easy to use safe sandbox for children to play Minecraft. You'll hear about how the project was conceived and developed, along with the challenges of designing objects that are equally digital and physical. You'll learn about how new prototyping and production tools are giving independent designers the ability to create sophisticated network-enabled products. Through this case study you'll learn about Meta Products - an emerging class of networked products & services made possible through the merging of hardware and software into a single fluid design discipline.
According to the International Telecommunication Union, at the end of 2011 there were more than 1 billion mobile‐broadband subscriptions worldwide! With more of your library users using mobile devices to access information they will assume that your library can be available from anywhere, at any time, and on most any device. Now is the time to be ready for this demand.
In this webinar:
- Explore some innovative library mobile website designs and see how they were built.
- Understand how HTML, CSS, and JavaScript work together to build mobile websites.
- Learn what a mobile framework is and why they are used.
- Provide some existing mobile services/apps that can be included in library-created mobile websites.
- Acquire best practices in mobile Web development from start to finish.
This presentation covers why libraries like jQuery exist, what was web development like before jQuery, the main benefits of jQuery, and some alternate libraries.
Best Practices in Mobile Development: Building Your First jQuery Mobile AppSt. Petersburg College
By the end of 2012, it is expected that more than 80% of the world’s population will have access to a smartphone. Your library users will assume that your library can be accessible from anywhere, at any time, and on any device. Now is the time to be ready! During this hands-on webinar, you will:
- learn the differences between native and web apps.
- understand the various technologies (HTML, CSS, JavaScript) and how they work together to build mobile web apps.
- gain hands-on experience using jQuery Mobile to develop a fully functional mobile-optimized web app.
- have access to a free Web server so you can continue to work/test your project live on the Web.
- continue to work with Jason and Chad so you can have a mentor during and after your project.
According to jqtouch.com, jQTouch is a “jQuery plugin for mobile Web development on the iPhone, Android, iPod Touch, and other forward-thinking devices.” Web apps can easily be created using jQTouch, and they resemble native apps. jQTouch includes native WebKit animations, automatic navigation, extensions for geo-location and offline capabilities, and themes built specifically for mobile WebKit browsers like the above-mentioned mobile devices. In this session, Chad Mairn will explain the differences between native and Web apps, highlight some free and useful web development tools, and will then demonstrate how to install and customize jQTouch in order to help kick start your library’s mobile Web presence.
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkSt. Petersburg College
Presented June 8, 2012 (Online) at the 'Access by Touch: Delivering Library Services Through Mobile Technologies' conference sponsored by Amigos Library Services.
Description: By the end of 2012, it is expected that more than 80% of the world’s population will have access to a smartphone. Your library users will assume that your library can be accessible from anywhere, at any time, and on any device. Now is the time to be ready! During this webinar, you will:
- learn what a mobile framework is.
- acquire best practices in mobile Web development.
- understand the various technologies (HTML, CSS, JavaScript) and how they work together to build mobile Web apps.
- recognize the differences between native and web apps.
- have an opportunity to continue to work with Chad after the webinar to demonstrate what you learned.
- gain access after the webinar to a free Web server so you can see your mobile Web app live.
jQuery Mobile has been integrated in APEX since version 4.2 and building a mobile web application with APEX seems magically easy ever since. Once you start a mobile project you will be confronted with a number of challenges related to the jQuery Mobile frameworks mechanisms. This session tends to explain the fundamentals that are important to know for APEX developers and how to deal with these in APEX development.
When creating a mobile web application with APEX, knowledge of how jQuery Mobile works and how it is different from what we are used to as APEX developers is essential, I learned this during projects. This session will explain the important jQuery Mobile framework mechanisms and how to deal with these in APEX: Page loading and submitting data; customizing the user interface elements; debugging, testing and inspecting on actual mobile devices.
1. CREATING
SOCIAL BOOKS
How to develop social book apps with PhoneGap & Wordpress
harmen@ecuad.ca @haigarmen
2. 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
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 of
an interesting story...
6. A Social Book
by Alexandra Samuel
A research project
at Emily Carr University of Art + Design
7. 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?
8. 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 final outcome
9. What are the issues when adding social
functionality into an ebook format?
10. 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?
11. 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?
How do we make a book ultimately dynamic?
12. 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?
How do we make a book ultimately dynamic?
What tools should we use to manage the
content, comments and membership
registration?
13. 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
14. How does it work?
NATIVE APPLICATION
PHONEGAP
HTML CSS & Javascript
JSON API
Wordpress (CMS)
15.
16.
17.
18.
19. 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
20.
21. 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 certificate ($100/year)
22.
23.
24.
25.
26.
27.
28. II. Prototyping with jQuery Mobile
A unified 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
36. jQuery Mobile Multiple Screens
Page Anatomy
http://jquerymobile.com/test/docs/pages/page-anatomy.html
Multi Page Example
37. Gestural Affordances
How do we design interfaces to cue users
about gestures?
Why are gestures becoming the new click?
Can we teach gestures without special
onboarding instructions?