Open Session on PhoneGap

Curious about PhoneGap? Have questions? Tomorrow, fellow Adobe Evangelist Ray Camden and I are hosting a 2 hour Adobe Connect session on PhoneGap. This will be an open session for your questions, not a presentation. The Connect URL is: http://my.adobeconnect.com/adobehtml. The date/time is Tuesday 2PM EST to 4PM EST (11AM PST to 1PM PST).

Debugging App-UI with Adobe Shadow

Adobe Shadow has been out for over a month now, and I’ve finally had a chance to start integrating it into my development workflow.  Shadow is a new tool that provides you with a synchronized desktop & mobile browsing experience, and it even lets you inspect & modify the HTML DOM on the remote devices.  Basically, you just connect the devices, then navigate your content on any of the connected devices for a synchronized browsing experience. Fellow Adobe employee Christian Cantrell has a great video overview of Adobe Shadow on his blog, if you’d like to learn more.

I’ve been focusing on multi-platform HTML-based solutions, especially with the app-UI framework/library.  Shadow has become very handy when testing features on multiple devices.  App-UI is a free & open source collection of reusable “application container” user interface components that may be helpful to web and mobile developers for creating interactive applications using HTML and JavaScript.

Basically, I just point the desktop Chrome browser at the page I want to test on my devices, and all devices will navigate to that particular page.  Quick, easy, and to the point.   Check out the video below where you can see the synchronized browsing experience in action.

In my examples that have browser history integration you can even see that selecting an item in the list causes all devices to navigate to the selected item (starting at 25 seconds into the video).  It does not yet necessarily solve every issue around button clicks and scrolling, but it certainly helps streamline the testing of a single page/experience on multiple devices.

Enjoy!

Rapid Prototyping With PhoneGap

Last week I gave a presentation to a local DC Meetup group on “Rapid Prototyping with PhoneGap“. The main takeaways are:

  1. PhoneGap is great for rapid prototyping.
  2. Don’t limit yourself to a prototype! PhoneGap is awesome for building real-world production applications targeting multiple platforms!

You can check out my presentation here:

Some reasons why you might want to use PhoneGap for rapid prototyping:

  • It’s easy
    • More people know HTML & JS, over native development
    • Lower barrier of entry in mobile development
    • Integrate seamlessly with HTTP services
  • It can cost less & can get done faster
    • Reduced developer hours + web designers can build the prototypes
    • Less development effort = faster turnaround

Here are the real-world PhoneGap apps that I demonstrated:

Wikipedia Mobile – The official mobile application for wikipedia.

Halo Waypoint – Companion application to the Halo game for Xbox & Xbox Live.

Untappd – Social networking with beer.

US Census Browser – Visualizing data from the 2010 US Census

I covered techniques for making your apps feel like “apps”, not “web pages”.   You can read more about these techniques and useful libraries in my recent post on Multi-Device Best Practices.  Note: That post contains references to both Flex and HTML/JS/CSS tools.  In this presentation I focused only on the HTML/JS/CSS tools.

I also covered techniques for data visualization.   You can read about techniques for visualizing data using web standards technologies, and see serveral HTML/JS data visualization libraries from my recent post on “Data Visualization with Web Standards“.

In this presentation, I covered PhoneGap Build, a cloud-based compilation tool for PhoneGap apps, and debug.phonegap.com for remote application debugging.   I also covered iWebinspector for debugging PhoneGap experiences inside of the iOS Simulator.

Let’s also not forget the real-world companies that have invested in PhoneGap/Apache Cordova, including Wikipedia, Facebook, Salesforce, IBM, and others.  You can read more about these companies from my recent post “Who Uses PhoneGap“.

Data Visualization with Web Standards

I recently spoke at the 360|Flex conference in Devner, CO on “Data Visualization with Web Standards”.  This presentation was focused upon techniques for presenting data in an easily-consumable visual manner using only HTML, CSS and JavaScript.  Below you can view my presentation slides and a brief summary.

Basically, there are 5 general ways to visualize data using web-standards techniques – here is a brief overview with pros & cons:

<img>

You can embed images using the html <img> that have server-rendered data visualizations. This is nothing new… They are very basic, but will certainly work.

  • Not interactive
  • Requires online & round-trip to server
  • No “WOW” factor – let’s face it, they are boring
  • Example: Google Image Charts

HTML5 <canvas>

You can use the HTML5 <canvas> element to programmatically render content based upon data in-memory using JavaScript. The HTML5 Canvas provides you with an API for rendering graphical content via moveTo or lineTo instructions, or by setting individual pixel values manually.  Learn more about the HTML5 canvas from the MDN tutorials.

  • Can be interactive
  • Dynamic – client side rendering with JavaScript
  • Hardware accelerated on some platforms
  • Can work offline
  • Works in newer browsers: http://caniuse.com/#search=canvas

Demos:

Vector Graphics (SVG)

Vector graphics can be used to create visual content in web experiences.

  • Client or Server-side rendering
  • Can be static or dynamic
  • Can be scripted with JS
  • Can be manipulated via HTML DOM
  • Works in newer browsers (but not on Android 2.x and earlier): http://caniuse.com/#search=SVG

Demos:

HTML DOM Elements

Visualizations like simple bar or column charts can be created purely with HTML structures and creative use of CSS styles to control position, visual presentation, etc… You can use CSS positioning to control x/y placement, and percentage-based width/height to display relative values based upon a range of data.   For example, the following bar chart/table is created purely using HTML DIV containers with CSS styles.

WebGL

WebGL is on the “bleeding edge” of interactive graphics & data visualization across the web. WebGL enables hardware-accelerated 3D graphics inside the browser experience. Technically, it is not a standard, and there is varied and/or incomplete support across different browsers (http://caniuse.com/#search=webgl).  There is also considerable debate whether it ever will be a standard; however there are some incredible samples out on the web worth mentioning:

Feel free to leave a comment with any questions.
Enjoy!

Multi-Device Best Practices

I recently spoke at the 360|Flex conference in Devner, CO on “Multi-Device Best Practices”.  This presentation was focused upon multi-device & multi-platform development strategies for both PhoneGap and Flex/AIR applications.  Below you can view my presentation slides and source code, and a brief summary.

First, I gave an overview of mobile & multi-platform with AIR and PhoneGap.  See these links for more detail on the platforms:

Next, I emphasized the differences in user experience, display density, usability, and application style/feel between different platforms and device form factors.  You can read more detail on these topics here:

I also covered various libraries and techniques for making your creations feel like “native apps” instead of “web pages in a container”, and ways to make your apps look & feel “more native” for a given platform.

Details on Flex/AIR-specific tools & frameworks for native-like app experiences:

Frameworks/Libraries for HTML/Web/PhoneGap, for “app-like” experiences:

Feel free to leave a comment with any questions.
Enjoy!

Odd WebKit Bug with Elements

I stumbled upon a really odd bug in my current project, which I can only attribute to the WebKit browser engine, since I was able to recreate this in a UIWebView on iOS (in PhoneGap) and in Chrome on OS X – WebKit is the common engine in both. It’s a bizarre issue that is really easy to fix, but was dumbfounding since the user interface was not displaying what I was seeing in the WebKit debugging tools. I figured I’d share, in case anyone else runs into the same issue.

The problem:

I have a horizontal slider (custom HTML/JS) component, and content within a separate HTML <span> should be updated when the slider value changes. The JavaScript seemed to be working properly, I could see console.log output that showed events were being dispatched, but the UI wouldn’t display what I was seeing in the debugging tools. Instead, the UI would update sporadically with a value, but not consistently, and not for every time that I updated the HTML DOM.

The solution:

Set the CSS “display” property on the <span> element to “inline-block”, and everything works properly. This was a really strange issue since I could see the HTML DOM updates, but the actual UI wasn’t being updated.

If my description doesn’t seem to be making any sense, check it out in the video below.   Keep an eye on the HTML DOM structure, as well as the rendered output.

Unfortunately, it took way longer than I would have hoped to fix such a seemingly simple issue.   Hopefully this saves you some time if you run into it too!

US Census Browser v2.0

I am happy to announce the US Census Browser version 2.0!  Back in December of 2011, I released the US Census Browser as an open source application intended to demonstrate principles for enterprise-class data visualization and applications developed with web standards.  This version has some fairly substantial changes – See the video below to check out features in the latest version:

Version 2.0 is currently available for:

Version 2.0 of the US Census Browser has some substantial changes, including:

  • Completely new & redesigned UI layer, using app-UI.  app-UI is an open source framework for application view-navigators that mimic native mobile applications.   Using the app-UI SplitViewNavigator, the US Census Browser now supports both landscape and portrait orientations.
  • Switched from Google Maps to Open Street Map using OpenLayers.  Users of the Census Browser maxed out my Google Maps account!  That is 25,000 map loads within a 24 hour period! WOW! I switched to the free Open Street Maps solution, which doesn’t have any usage/bandwidth limitations.  With this change I was also able to add interactive maps.
  • Updated to Twitter Bootstrap 2.0.  The app is now using new UI styles and components which are now available in Twitter Bootstrap version 2.0

The source code for the US Census Browser has also been updated on github: https://github.com/triceam/US-Census-Browser

To learn more about app-UI, check out my page here: http://www.tricedesigns.com/2012/04/24/introducing-app-ui/

Enjoy!

Introducing app-UI

I’d like to take a moment and introduce app-UI, a new open source application framework that I’ve been working on.

app-UI is a collection of reusable “application container” user interface components that may be helpful to web and mobile developers for creating interactive applications using HTML and JavaScript, especially those targeting mobile devices. app-UI is a continual work in progress – it was born out of the necessity to have rich & native-feeling interfaces in HTML/JS experiences, and it works great with PhoneGap applications (http://www.phonegap.com). app-UI can easily be styled/customized using CSS.

Disclaimer: Please keep in mind that things will change as the project is improved and matured – this is a beta/early prototype.

All of app-UI was created using HTML, CSS, & JavaScript. All animations are rendered using CSS3 translate3d, so that they are hardware accelerated (where supported). app-UI works well on iOS, Android and BlackBerry browsers (others not tested), and works well on the latest releases of most desktop browsers (I know it does not work on old versions of IE).

Why?

You might be wondering “why create this?” when there are other open source alternatives like jQuery Mobile. The primary motivation for creating app-UI was to have reusable application containers that are highly performant, and do not force any prescriptive development paradigms. With respect to animations/transitions, app-UI outperforms the alternatives, particularly on mobile devices.

app-UI can be used with many different existing frameworks – app-UI only requires jQuery as a solution accelerator framework. It will work with existing UI widget frameworks (jQuery UI, Twitter Bootstrap, etc…), and will work with existing templating frameworks (Moustache, Knockout, Handlebars, etc…).

Application Containers

app-UI currently has three application containers, and at this time it is not intended to be a complete UI widget framework.

Please see the “samples” directory for usage scenarios – there is no documentation yet.

ViewNavigator

The ViewNavigator component allows you to create mobile experiences with an easily recognizable mobile UI paradigm. You use this to push & pop views from the stack.

Samples:

SplitViewNavigator

The SplitViewNavigator component allows you to create tablet experiences with an easily recognizable mobile UI paradigm. The SplitViewNavigator allows you to have side-by-side content in the landscape orientation, and the sidebar is hidden in portrait orientation.

Samples:

SlidingView

The SlidingView allows content to slide to the side using a horizontal swipe gesture, revealing a navigation container “underneath”. This is very similar to the behavior in Facebook’s iPad application.

Samples:

Just swipe horizontally with a finger or the mouse…

Bugs & Features

No software is ever bug-free. If you encounter an issue, have feedback, or have feature requests, please log them at: https://github.com/triceam/app-UI/issues

-OR-

Fork it, fix it, and send me a pull request.

Please do not just complain.

Real World Usage

You can see this framework in the following real-world apps:

If you have built your own app using this framework, please let me know! (@andytrice on twitter)

Download

Get started with app-UI today! Just browse to http://triceam.github.com/app-UI/, read the details, download a copy, and start building your own apps!

If you’re building something cool with it, then let me know! I’d love to hear about it.

Welcome Appliness!

Appliness is a new digital magazine and the first of it’s kind to focus entirely on web application development!   Appliness was created entirely using Adobe Digital Publishing Suite, and the effort was lead by our own Michael Chaize.   Go download a copy today!  It’s also FREE!

 

Be sure to also check out how this magazine was created using Adobes Digital Publishing Suite, and check out the video preview above. Interested in contributing in Appliness or providing us with valuable feedback? If so, you’re in luck–let us know here: http://appliness.com/give-us-feedback/. We’d love to hear from you!

Who Uses PhoneGap/Apache Cordova?

I see questions and comments all the time with the general sentiment “it looks nice, but who really uses PhoneGap/Apache Cordova?”. There is no way to create a definitive list of everyone who uses it, but the general answer is “more people than you think”. Here are a few organizations that you might recognize who are using either PhoneGap or Apache Cordova in their cross-platform mobile solutions and/or tools. (PhoneGap is a distribution of Apache Cordova)

Wikipedia

The official Wikipedia mobile application is built using PhoneGap.   This is currently available for Android and BlackBerry, and it is my understanding that the PhoneGap codebase will be deployed for iOS soon.  This project is open source, and the full source code is available on GitHub at https://github.com/wikimedia/WikipediaMobile

You can read more about this application on the PhoneGap Showcase.

Facebook

Facebook uses a forked version of Apache Cordova in their mobile SDK.   You can learn more about Facebook’s mobile SDK at https://developers.facebook.com/docs/guides/mobile/, and check out some of the showcase apps that developers have built on top of the Facebook mobile experience at https://developers.facebook.com/showcase/mobile/.

Salesforce

Salesforce uses a fork of Apache Cordova for their mobile development SDK.  The forked version of their SDK is included within both their iOS and Android SDK repositories on GitHub (inside of the “external” sub directories).

IBM

IBM recently acquired Worklight, who provides a platform for developing mobile applications.  IBM/Worklight’s mobile application development platform is built on top of PhoneGap.   IBM is also heavily involved with core Apache Cordova development (see the list of committers).

Microsoft

Microsoft is involved with core Apache Cordova development (specifically for the Windows Phone platform).   Not only are staff from Microsoft committers for the core Apache Cordova project, Microsoft has also used PhoneGap on public mobile applications that target multiple platforms.   This includes the XBox-Live integrated gaming application Halo Waypoint, for both iOS and Android.  Check out Halo Waypoint in the video below, it looks awesome:

(The license under “about” inside Halo Waypoint clearly has a reference to PhoneGap).

Adobe

I think most people already know how deeply involved Adobe is with PhoneGap, but I’ll try to recap quickly…  In late 2011, Adobe acquired Nitobi, the creators of PhoneGap, and contributed PhoneGap to the Apache Software Foundation as the Apache Cordova project.   Adobe has resources dedicated to furthering PhoneGap and is dedicated to the success of the platform.   Not only are we helping develop and mature PhoneGap/Apache Cordova, we also build some of our own applications with it.   (Maybe I’ll be able to talk about those some day.)

RIM

Research in Motion (RIM), the company behind the BlackBerry platform not only developed the core PhoneGap/Cordova API for BlackBerry Playbook devices, but also is heavily involved in Cordova-JS development, and has integrated PhoneGap/Cordova support in the Ripple device emulator.  (Note: The BlackBerry smartphone implementation was pre-existing and was implemented by IBM and Nitobi.)

Zynga

Zynga, one of the largest gaming companies, uses PhoneGap and HTML5 to build awesome games.  For example, the popular Mafia Wars title is built using PhoneGap.

Logitech

Logitech used PhoneGap to develop the Logitech Squeezebox Controller application, which uses your home wifi connection to control a Squeezebox Internet radio device from your smart phone.   You can read more about this application on the PhoneGap application showcase, or download it now for iOS or Android.

Still not sure if anyone uses PhoneGap? What about these, among many others?

Alcatel-Lucent      Deutshce Telecom      Ars Technica      Sabre
Cisco Systems      Time Warner      The Onion

Additional sources: ReadWriteWeb, slideshare

Go check out the PhoneGap app showcase to see even more: http://phonegap.com/apps