Tag Archives: mobile

Embarking Upon A New Adventure

I’m excited to finally announce that I have embarked upon a new adventure!  Today marks my first day as a MobileFirst Developer Advocate for IBM!

IBM

So, what does that mean?

It is very similar to what I was doing back at Adobe focusing on developers.  I’m excited to engage with the development community around building mobile apps and leveraging cloud services to meet critical business needs.  I’ll be focused on IBM’s MobileFirst platform, including Worklight - a platform for building and delivering mobile applications leveraging Apache Cordova (PhoneGap), and Bluemix – IBM’s scalable cloud computing platform, which can be used for everything from hosted services, “big data”, security, back-ends for mobile apps, Java, node.js, ruby, and much, much more… Seriously, check out everything that Bluemix has to offer.

It is my mission to help you, the developer or business decision maker be successful, and now I have access to IBM’s tools, knowledge and services to back me up!

Will I still be building apps and services?

  • YES – stay tuned for more info

Will I still be helping you build apps, and writing about development tools, paradigms, and best practices?

  • YES – it’s my mission to help you make the right decisions and be successful

Will I see you at the next development conference, hackathon, or meetup?

  • YES, and I can’t wait to show you everything IBM has to offer.  

Will I still be flying drones?

  • Of course! However, I won’t be blogging about drones and creative tools quite so much. Follow me on Flickr to see images from my latest flights, and feel free to ask me questions.

I had a great run with Adobe, and am thankful for all of the opportunities while there.  I worked on many amazing projects, worked with a lot of great (and very, very smart) people, and was able to continually push the envelope on both the development and creative/media sides. For which I am grateful.

Now, let the next adventure commence!

Your business has tough questions? Let’s ask Watson.

DevNexus 2014 PhoneGap Presentations

I’ve just wrapped up my presentations for this year’s DevNexus event in Atlanta – it has been a great event, filled with tons of information on web, mobile, and back-end development. I had 3 sessions on PhoneGap – One intro, one advanced, and one a mobile frameworks panel.

Below are my presentations.  I didn’t record them this time, since they were being recorded by the conference organizers, so expect to see a video once they’re released.

Just press the space bar, or use the arrow keys to view the presentation in your browser.

Getting Started with PhoneGap and Cross Platform Mobile Development

View Presentation …

intro_2_pg

(Lesson learned, never make changes to you presentation/environment after midnight when you have the first session of the day – it will always bite you)

Designing & Architecting for PhoneGap & the Mobile Web

View presentation …

architecture_pg

Enjoy, and feel free to reach out with any questions!

Automating PhoneGap Builds

I’ve recently had several conversations with PhoneGap users around processes for automating the compilation of PhoneGap apps.  This could be either in automated tasks using GruntAntMaven, or any other task manager, or could be in continuous integration environments like Jenkins CI.

If you’re interested in this, here are a few options… First of all, PhoneGap Build has a REST API. You can use this to programmatically create new projects, update projects, trigger new builds (even just for specific platforms), etc… This can integrate with your build scripts and tie into any workflow.

If you’re using GitHub, it is possible to tie into hooks triggering PhoneGap Build to recompile every time you commit your code.  Here’s an example of it in action, or you can just use this service which is already setup: http://autobuild.monkeh.me/ (from the same author) - Just be careful with your user/pass in plain text. Update: You can also use the Autobuild service using a clientID variable instead of sending through username and password details via HTTP.

If you aren’t using PhoneGap Build, you’re not out of luck.  All PhoneGap CLI commands are based on scripts, which themselves can be scripted.  You could use ANT’s exec command, the Maven exec plugin, Grunt exec or Grunt shell plugins, Jenkins execute shell, or any other task runner to manually invoke the PhoneGap CLI. You just need to make sure all your environment and path variables are correct to access SDKs and required programs. However, there’s one caveat… iOS builds require Xcode/Apple developer tools, which have to be run on a Mac.

If you’re using Jenkins, this might be a good one to check out: Jenkins CI + PhoneGap & Cordova

PhoneGap Presentations from HTML5DevConf

I was  searching the web earlier this week for an older presentation from a few months back, and just happened to stumble across my recent presentations from HTML5DevConf from this past October. Looks like the videos were posted in November, but I’m just seeing them now. I had two sessions: Designing and Architecting PhoneGap and Mobile Web Apps and Getting Started with PhoneGap and Cross-Platform Mobile Development, and if you weren’t able to attend them, you’re still in luck! Here are the videos from those sessions:

Designing and Architecting PhoneGap and Mobile Web Apps

Tired of Hello World? In this session, we explore best practices to build real-world PhoneGap applications. We investigate the Single Page Architecture, HTML templates, effective Touch events, performance techniques, modularization and more. We also compare and contrast the leading JavaScript and Mobile Frameworks. This session is a must If you plan to build a PhoneGap application that has more than a couple of screens.

Getting Started with PhoneGap and Cross-Platform Mobile Development

Unfortunately, I ran into network issues which prevented some of my samples from working in this one, but you’ll still be able to get the point.

HTML has emerged as a powerful alternative to “native” to enable cross-platform mobile application development. In this session, you learn how to leverage your existing HTML and JavaScript skills to build cross-platform mobile applications, how to access the device features (camera, accelerometer, contacts, file system, etc) using JavaScript APIs, and how to package your HTML application as a native app for distribution through the different app stores.

You can also check out highlights from HTML5DevConf and find my presentation assets and materials online here.

More Device Motion Experiments with HTML & Adobe DPS

I wanted to follow up my last post on 3D Parallax effects in HTML or Adobe DPS, I’ve decided to release some of the other experiments that I’ve been exploring with device motion in DPS publications. Check out the video below to see two new samples, and a corrected version of the strawberries example from my last post (the plants were going the wrong way in the last post).

All three of these samples leverage the same basic technique for responding to device motion inside of a DPS publication. The motion-interactive components are implemented using HTML and JavaScript, and are included in publications as web content overlays. In JavaScript, it takes advantage of the ondevicemotion event handler to respond to the physical orientation of the device.

In all three of samples, the web content overlay is set to autoplay, with user interaction disabled. This way the HTML & JavaScript automatically loads and the scripting is active, but it doesn’t block interaction or gestures for DPS navigation. I also enabled “Scale Content To Fit” so that HTML content scales appropriately between retina and non-retina devices.

Adobe InDesign - Web Content Overlay Options

Web Content Overlay Options

Strawberries

The strawberries sample is identical to the one from my previous post. This is just a capture of the updated motion. You can access the full source project to this sample at:
https://github.com/triceam/DPS-HTML-Samples/tree/master/strawberries

strawberries

Adobe San Francisco

The Adobe/inline content example is implemented in the same manner as the strawberries example. The large city image It is a two-layer composition created with Adobe Edge Animate. The foreground building and flag move independently from the background image. I used Photoshop to separate the content into layers and made them animate based on device orientation in the exact same fashion as the strawberries sample. All of the text and image content surrounding the cityscape panorama is laid out with InDesign.

adobe

You can check out the Adobe Edge Animate project at:
https://github.com/triceam/DPS-HTML-Samples/tree/master/adobe%20roof

AT&T Park/San Francisco Giants

The AT&T Park/San Francisco Giants example is implemented with basic HTML and JavaScript, no additional tools were used to create this interactive scenario.   The content on the left hand side was all laid out with InDesign. The content on the right side is the interactive HTML.

att_park

The image used in this example is a vertical panorama captured from a remote control helicopter. This image contains various perspectives that have been composited in Photoshop. The motion of the device is aligned to match the perspectives in the image/viewport; When the device is facing down, the image is looking down and when the device is vertical, the image faces forward. You can check out the vertical panorama image below. If you’re interested in creating a vertical panorama, be sure to check out this tutorial from Russell Brown.

Vertical Panorama over AT&T Park

The HTML and JavaScript used in this example is fairly minimal. The image is applied as the background of the root HTML <body> element, and the position of the background is shifted based upon the device motion event. This approach keeps the HTML DOM as flat and simple as possible.

Here’s the HTML that makes up this example:

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>Parallax Vertical Background</title>
        <link rel="stylesheet" href="assets/styles.css">
        <script src="assets/zepto.js"></script>
    </head>
    <body></body>
</html>

… and the CSS styles used to apply the background image.

body {
    background-image:url('att_park_vert_panorama.jpg');
    background-position: center;
}

… and the JavaScript used to shift the position based on the device orientation event. Note: this also uses the Zepto JavaScript library.

window.ondeviceorientation = function(event) {
        var gamma = event.gamma/90;
	var beta = event.beta/180;
	var temp = 0;

	// shift values/motion based upon device orientation
	switch (window.orientation) {
		case 90:
			temp = gamma;
			gamma = beta;
			beta = temp;
			break;
		case -90:
			temp = -gamma;
			gamma = beta;
			beta = temp;
			break;

	}

	// update positions to be used for CSS
	var yPosition = 1200 - (beta * 2200);
	var xPosition = -200 + (gamma * 300);
	xPosition = Math.max( -300, Math.min( 0,xPosition));
	yPosition = -Math.max( 100, Math.min( 1400,yPosition));
	//console.log(xPosition, yPosition);

	// apply css styles
	var css = xPosition + "px " + yPosition + "px";
	$("body").css( "background-position", css);
}

Textual content used in this example from: http://en.wikipedia.org/wiki/At%26t_park

Source code for the device motion in this example is available at: https://github.com/triceam/DPS-HTML-Samples/tree/master/ATT%20Park

All of the HTML, CSS and JavaScript code used for these examples is available in the GitHub repository at: https://github.com/triceam/DPS-HTML-Samples