Archive for May, 2012

PhoneGap Build

In my last tutorial we built a PhoneGap Mobile UI, and now you’re ready to use PhoneGap Build. PhoneGap Build enables you to build your application for multiple platforms.

What is PhoneGap Build?


PhoneGap Build is a service provided by the makers of PhoneGap that allows you to build your application for multiple platforms without having to have those set ups on your local machine.

image002.png

In our case, we developed our PhoneGap app in Visual Studio in the Windows 7 Phone SDK. Within that PhoneGap App is an App Package. This www folder is the core of the PhoneGap application. Everything else is part of the Windows 7 Phone Shell. We zip that www folder and send it up to PhoneGap Build, PhoneGap Build swaps our setup with other mobile setups, runs those builds over the cloud and gives us access to  various platforms such as IOS, Blackberry, etc…

image003.png

Simply write your app using HTML, CSS or JavaScript, upload it to the PhoneGap Build service and get back app-store ready apps for Apple iOS, Google Android, Windows Phone 7, Palm, Symbian, BlackBerry and more. By compiling in the cloud with PhoneGap Build, you get all the benefits of cross-platform development but can still build apps just the way you like.

So even though PhoneGap itself is free, PhoneGap Build is not and that is how they make their money, but the pricing is reasonable as you can see below:

image004.png

Here’s the work flow you will follow:

  • Write your app using HTML, CSS and JavaScript
  • Upload it to the PhoneGap Build service
  • Get back app-store ready apps for Apple iOS, Google Android, Windows Phone 7, Palm, Symbian, Blackberry and more.

You don’t have to use phone gap build to use phone gap. You could set up all the environments locally and do the individual builds for each device yourself. PhoneGap Build relieves the headache of trying to maintain all that code locally.

Here are the specific steps:

  1. Zip-up your www folder in your Visual Studio Windows 7 Phone application developed in the last tutorial. You’ll actually go to where it is on your hard drive and do that.

image006.png

In my case the path was Documents->Visual Studio 2010->Projects->Geolocator->Geolocator

Be careful with your naming, Blackberry doesn’t like folders with the names src, bin, or image and file names with special characters.

2. Create a PhoneGap Build account (at https://build.phonegap.com/)). If you already have an Adobe ID that will work as well.

image008.png

3. Add a new app, after giving your app a name, choose your upload method and click create! It’s that easy.

image010.png

PhoneGap Build builds the various platforms shown below:

image012.png

You can now download these apps and run them on the various platforms. To do that click on Admin (shown above) and download your app!

image013.png

But you’re not ready to go live just yet …you need to sign!

4. At this point you need to sign your apps. Click Admin ->Edit ->Signing and select or add your keys.

For example, for iOS you’ll need the same developers key that you would use to build a regular iOS phone app. To find out more about signing check out the following docs link https://build.phonegap.com/docs. To put your apps in the market they need to be signed!
image015.png

5. Finally, you’ll need to configure your app. You can configure your app by clicking on the details tab and filling out the form below. This info will be used in your app distribution.
image017.png

But not everything you need can always be put in this short form, such as plugins. So in that case you’ll need to use an xml config file.

To find out more go to https://build.phonegap.com/docs/config-xml. Once the config file is completed you need to zip it up in your www file and upload it to PhoneGap Build and build your various platforms. You must ensure that your config.xml file is at the top level of your application (the same level as your index.html file). Otherwise it will not be loaded correctly.

Debugging!

One more cool thing about PhoneGap Build is that you can remotely debug your application from a browser. This service enables users to debug and interactively modify their applications during runtime; this new addition offers similar functionality to those found in Firebug and Google Chrome Inspector, which serve as an indispensable tool to developers working on web based projects. And now debug build provides the same benefits for PhoneGap developers. The learn more about debug mode go to https://build.phonegap.com/docs/phonegap-debug.

Advertisements

This tutorial shows you how to tap into your phone’s sensors by using Phone Gap and HTML5. Here you’ll build a simple Accelerometer and Geo-locator for cross platform deployment. The Visual Studio 10 source file is attached.

What’s Phone Gap?

PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores. PhoneGap leverages web technologies developers already know best… HTML and JavaScript. Phone Gap lets you use a single code base to publish to multiple platforms.

image001.png

What you’ll be doing?

You’ll build your application in HTML and JQueryMobile using the Windows 7 Phone SDK in Visual Studio 10 and the cordova (or phone gap) JavaScript package. Then you’ll zip the www folder and upload it to the Phone Gap Build, here all the major phone applications will be created.

The API’s you’ll be accessing can be found (along with documentation) on the Phone Gap site (http://phonegap.com/) and are: Accelerometer, Camera, Capture, Compass, Connection, Contacts, Device, Events, File, Geolocation, Media, Notification, and Storage.

Note: When Adobe purchased nitobi it transferred Phone Gap to Apache Software Foundation and changed the name to Cordova. Cordova like Phone Gap is open source.

Getting Started

1. First download and install the Windows Phone SDK into Visual Studio 10.

http://www.microsoft.com/en-us/download/details.aspx?displaylang=en&id=27570/

2. Download Cordova (Phone Gap) from phonegap.com

http://phonegap.com/download

image002.png

3. Unzip the download above (phonegap-phonegap-1.7.0-0-g475bfd2.zip) and navigate to

phonegap-phonegap-475bfd2->lib->windows-> CordovaStarter-1.7.0.zip

Note: In this case we choose the windows folder since we are developing using the Windows Phone SDK. But it doesn’t matter, all you are doing is creating an html page for the phone gap wrapper. You could have done the development in another platform.

image003.png

Leave the CordovaStarter-1.7.0.zip as a zip file and copy and paste it into Visual Studio’s Project Templates -> Silverlight for Windows Phone folder


The full path is:


Documents->Visual Studio 2010->Templates-> Project Templates -> Silverlight for Windows Phone

If the Silverlight for Windows Phone folder does not exist go ahead and create it.

4. In Visual Studio 10, create a new project and choose Silverlight for Windows Phone (CordovaStarter). Name it Geolocator and hit OK.

image004.png

A basic phone web structure will be created which contains the cordova JavaScript package and a basic html index page, as shown below in the Solution Explorer:
image005.png
5. Download JQuery (http://jquery.com/) and JQueryMobile (http://jquerymobile.com/) and drag them along with the JQueryMobile images into the www folder (as shown below) and add their references to your html page (see the attached source files).
image006.png

HTML Page References to be added (in your index.html page)

  1.   <link rel=”stylesheet” href=”jquery.mobile-1.0.1.css”/>
  2.  <script src=”jquery-1.7.1.js”></script>
  3.  <script src=”jquery.mobile-1.0.1.js”></script>

Note: Remove the master.css link reference since you are using jquery.mobile-1.0.1.css as your style sheet instead.

You are now ready to start programming in JQueryMobile, but wait there are other JavaScript libraries you can program in. Here are a few other JavaScript alternatives to JQueryMobile (just in case you want a little more chrome): Sensa Touch, JqTouch, KendoUI.

6. In the index.html page, the onDiviceReady method starts up when your device is ready. To it, add two navigator methods watch Acceleration and watch Position. These methods listen for changes to your Accelerometer and Geo-locator sensors and sends them to an onSuccess method as shown below in the code:

  1.  function onDeviceReady() {
  2.            //document.getElementById(“welcomeMsg”).innerHTML += “Cordova is ready! version=” + window.device.cordova;
  3.            console.log(“onDeviceReady. You should see this message in Visual Studio’s output window.”);
  4.            var options = { frequency: 1000 };  // Update every 1 seconds
  5.  navigator.accelerometer.watchAcceleration(onSuccessAccl, onError, options);
  6.  navigator.geolocation.watchPosition(onSuccessGeo, onError, options);
  7.        }



7. Then add the following onSuccess methods for the Accelerometer, Geolocation sensors and error method:

  1.   function onSuccessAccl(a) {
  2.            $(‘#aX’).html(a.x);
  3.            $(‘#aY’).html(a.y);
  4.            $(‘#aZ’).html(a.z);
  5.            $(‘#aTime’).html(a.timestamp);
  6.        };
  7.        function onSuccessGeo(p) {
  8.            $(‘#lat’).html(p.coords.latitude);
  9.            $(‘#lng’).html(p.coords.longitude);
  10.        };
  11. function onError() {
  12.     alert(‘onError!’);
  13. };

8. In the body tag of index.html add some JQueryMobile magic for formatting the data output:

  1. <body>
  2.         <div id=”home” data-role=”page”>
  3.             <div data-role=”header”>
  4.                 <h1>Sensors</h1>
  5.             </div>
  6.             <div data-role=”content”>
  7.                Accelerometer and Geolocation!
  8.                <br />
  9.                <p>Accelerometer Data</p>
  10.                <p id=”aX”></p>
  11.                <p id=”aY”></p>
  12.                <p id=”aZ”></p>
  13.                <p id=”aTime”></p>
  14.                <br />
  15.                <p>Geolocation Data</p>
  16.                <p id=”lat”></p>
  17.                <p id=”lng”></p>
  18.             </div>
  19.             <div data-role=”footer” >
  20.                 <a href=”#dialogpage”>Tech Footer</a>
  21.             </div>
  22.         </div>
  23.     </body>

9. Finally, in the properties folder change the WMAppManifest.xml file by adding a sensors tag as shown below.
image007.png

Test the program by running Ctrl+F5 (Debug-> Start Without Debugging).
The Windows Phone has an Accelerometer simulator that helps you see the data change in 3D as shown below:
image008.png

The Windows Phone has a Location simulator that lets you see the lat long change.

image009.png
10.  Once your program is complete, zip the www folder and send it to Phone Gap Build to make it cross platform…more on that in our next tutorial!

Ted Landis, a GAIC java programmer from the towel, came over today for lunch to learn how to create mobile pages in Visual Studio 11. I’m in love (not with Ted) with Visual Studio 11. Microsoft has really stepped up to the plate in HTML5/JavaScript Development. Here is what we covered (note: this tutorial is still in draft form – which means I can’t spell):

 

Running JQueryMobile in Visual Studio using MVC4 – Getting Started by Michael Lively

 

In this tutorial we will use Visual Studio 11, JQueryMobile, MVC4, and the user agent. Let’s start by downloading everything.

  1. Download and Install Visual Studio 11 Beta and save to disk
    https://msdn.microsoft.com/en-us/subscriptions/securedownloads/#FileId=48663

 

image002.png

2. Extract and Install using 7-Zip (or whatever works best for you)

image003.png

3. Open Visual Studio 11 -> File -> New -> Project…->Choose ASP.NET MVC4 Web Application and name your project (TedsRazor in our case) ->Empty ->Razor ->OK and your project will be created. Note: Razor became available with MVC3.

 

image006.png

 

4. When the package opens right click on the reference icon and choose Manage NuGet Packages (you can also do this in the console).

image008.png

 

5. Choose online and search for JQuery Mobile and install the package. JQueryMobile will not be installed in your scripts library.

image010.png

6. Note: If a package does not exist in NuGet (three.js for example) then download it to your machine (put it on the desktop for example), name it appropriately, and drag it from your desktop into your Scripts folder.

 

image011.png

 

 

7. Right Click on the Controller folder and add a HomeController.

image012.png

namespace TedsRazor.Controllers

{

public class HomeController : Controller

{

//

// GET: /Home/

 

public ActionResult Index()

{

return View();

}

 

}

}

The ActionResult will go to the Index page and return its View. Let’s now add that View.

 

8. In the Views folder create a Home folder. Right click on the Home folder and add an Index View. Make sure you choose the Razor Engine. The Razor engine will be our bread and butter for all development projects that we do. A Razor file had the extention cshtml and allows you to mix c#, html, and JavaScript (good by code behind). We’ve finally caught up with PHP!
image013.png

There is no model at this time so don’t check Create a strongly-type view, this is not partial view and check Use a layout or master page. This will use the layout page which is in your shared folder that can be used for all your views. And it holds the base html page. Run the page by clicking Ctrl-f5. You should see the word Index appears on the screen. You can now write razor code.

9. Now to create a Mobile page all you have to do is create a Layout and Index page with the .Mobile separator. The program will determine if you are on desktop or Mobile and serve up the appropriate pages. Thus you can use the same control and model logic for both your Desktop and mobile application. Go ahead and create your Mobile Index and layout pages.
image015.png

10. To familiarize yourself with JQueryMobile go to jquerymobile.com. There are series of tutorials and sample code on this site that will help you get started. You’ll be using the data-role tag extensively in programming JQueryMobile.

image016.png

11. In order to run JQueryMobile you must have the correct references in your layout page so drag the appropriate JQueryMobile references from your Scripts page over to your _Layout.Mobile.cshtml’s head tag (which is in your shared folder). Note: The jquery javascript package has to appear before the jquerymobile package since jquerymobile requires jquery (position is relevant here).


Viewport tag (so program resizes to device – desktop will ignore this tag)

 

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />

 

Styles (drag from content folder)

 

<link rel=”stylesheet” type=”text/css” href=”../../Content/jquery.mobile-1.1.0.css” />

<link rel=”stylesheet” type=”text/css” href=”../../Content/jquery.mobile.theme-1.1.0.css” />

 

Scripts (drag from scripts folder)

<script type=”text/javascript” src=”../../Scripts/jquery-1.6.4.js”></script>

<script type=”text/javascript” src=”../../Scripts/jquery.mobile-1.1.0.js”></script>

 

Full _Layout.Mobile.cshtml page


  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4.  <meta charset=”utf-8″ />
  5.  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
  6.  <title>@ViewBag.Title</title>
  7.  <link rel=”stylesheet” type=”text/css” href=”../../Content/jquery.mobile-1.1.0.css” />
  8.  <link rel=”stylesheet” type=”text/css” href=”../../Content/jquery.mobile.theme-1.1.0.css” />
  9.  <script type=”text/javascript” src=”../../Scripts/jquery-1.6.4.js”></script>
  10.  <script type=”text/javascript” src=”../../Scripts/jquery.mobile-1.1.0.js”></script>
  11. </head>
  12. <body>
  13.  <div data-role=”content”>
  14.              @RenderBody()
  15.  </div>
  16.  <footer>
  17.              <h4>Footer Test Stuff</h4>
  18.  </footer>
  19. </body>
  20. </html>

Index.Mobile.cshtml page being served up

  1. @{
  2.  ViewBag.Title = “Mobile Test Page”;
  3. }
  4.  <div data-role=”page”>
  5.  <div data-role=”header” data-theme=”b”>
  6.             <h1>Mobile Test Page</h1>
  7.  </div>
  8.  <div data-role=”content” data-theme=”e”>
  9.             <ul data-role=”listview” data-inset=”true” data-filter=”true”>
  10.                 <li><a href=”#”>Books</a></li>
  11.                 <li><a href=”#”>Kindle</a></li>
  12.                 <li><a href=”#”>Safari</a></li>
  13.                 <li><a href=”#”>Amazon</a></li>
  14.             </ul>
  15.             <a href=”#” data-role=”button” data-theme=”b”>Click Here</a>
  16.  </div>
  17. </div>

 

 

12. To Run your mobile program in your browser set up your user agent (see my blog post on how to do that)

Tada!

 

image017.png

 

You a razor mobile programmer!

 

 

 

We had a very successful 3D animation seminar this weekend (livelyfbug). We had a big group both online (on Adobe Connect) and at Panera Bread. Here are the notes from the seminar:

 

3D Animation Seminar by Mike Lively (Notes)


Introduction:  Three.js is an easy way to create 3D browser animation. Even though it is among a myriad of 3D JavaScript packages being created these days, it has the advantage of being rooted in a robust framework similar to Papervision3D, Away3D, and Molehill. It’s author Mr. Doob started off years ago creating PV3D experiments (me too) moved to Away3d, Molehill, and then to HTML5. Three.js detects if your browser will support Webgl and if not switches to the canvas tag.

 

The Three.js engine comprises about 180 pages of compressed JavaScript code and can be downloaded from Github at

https://github.com/mrdoob/three.js/

In addition, please download the Three.js Boilerplate found at

https://github.com/jeromeetienne/threejsboilerplate

You may want to view Mr. Doob’s learning blog as well at:

http://learningthreejs.com/

 

  1. Three.js is great for creating 3D animation experiments and for making 3D games. Thee.js makes many things that were hard to do in Flash versions of 3D easy. In addition, there are tons of examples in the three.js download which you can reverse engineer to create your own experiments. Over the next few months Jonathan and I will be producing a series of 3D experiments and Learning Games. Ultimately, our goal is to create a 3D learning management system.
  2. Examples

Unzip three.js go to the examples folder and run:

  1. webgl_terrain_dynamic.html

    image001.png

  2. webgl_morphtargets_md2_control.html
    image003.png
  3. webgl_morphtargets_md2.html

    image006.png

  4. webgl_loader_collada_keyframe.html

image008.png

Please take some time now and click through some of the examples.

A. Elements of 3D

 

image009.jpg

In three.js the important elements are the scene, camera, materials, lights, and renderer.

http://aerotwist.com/tutorials/getting-started-with-three-js/

Materials are the key – they are being rendered!

B. Boiler Plate

When creating 3D experiments you don’t want to reinvent the wheel every time you write a program, starting with a boiler plate can be helpful.

Open up the boilerplate provided by Mr. Doob, run it, and then we will go through it line by line.

 

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <title>learningthree.js boiler plate for three.js</title>
  5.         <meta charset=”utf-8″>
  6.         <meta name=”viewport” content=”width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0″>
  7.         <script src=”vendor/three.js/Three.js”></script>
  8.         <script src=”vendor/three.js/Detector.js”></script>
  9.         <!– https://github.com/mrdoob/stats.js –>
  10.         <script src=”vendor/three.js/Stats.js”></script>
  11.         <script src=”vendor/threex/THREEx.screenshot.js”></script>
  12.         <script src=”vendor/threex/THREEx.FullScreen.js”></script>
  13.         <script src=”vendor/threex/THREEx.WindowResize.js”></script>
  14.         <script src=”vendor/threex.dragpancontrols.js”></script>
  15.         <link  href=”css/main.css” rel=”stylesheet”/>
  16.     </head>
  17. <body>
  18.     <!– three.js container –>
  19.         <div id=”container”></div>
  20.     <!– info on screen display –>
  21.     <div id=”info”>
  22.         <div class=”top”>
  23.             <a href=”http://learningthreejs.com/blog/2011/12/20/boilerplate-for-three-js/” target=”_blank”>LearningThree.js</a&gt;
  24.             boiler plate for
  25.             <a href=”https://github.com/mrdoob/three.js/” target=”_blank”>three.js</a&gt;
  26.         </div>
  27.         <div class=”bottom” id=”inlineDoc” >
  28.             – <i>p</i> for screenshot
  29.         </div>
  30.     </div>
  31.     <script type=”text/javascript”>
  32.         var stats, scene, renderer;
  33.         var camera, cameraControl;
  34.         if( !init() )    animate();
  35.         // init the scene
  36.         function init(){
  37.             if( Detector.webgl ){
  38.                 renderer = new THREE.WebGLRenderer({
  39.                     antialias        : true,    // to get smoother output
  40.                     preserveDrawingBuffer    : true    // to allow screenshot
  41.                 });
  42.                 renderer.setClearColorHex( 0xBBBBBB, 1 );
  43.             // uncomment if webgl is required
  44.             //}else{
  45.             //    Detector.addGetWebGLMessage();
  46.             //    return true;
  47.             }else{
  48.                 renderer    = new THREE.CanvasRenderer();
  49.             }
  50.             renderer.setSize( window.innerWidth, window.innerHeight );
  51.             document.getElementById(‘container’).appendChild(renderer.domElement);
  52.             // add Stats.js – https://github.com/mrdoob/stats.js
  53.             stats = new Stats();
  54.             stats.domElement.style.position    = ‘absolute’;
  55.             stats.domElement.style.bottom    = ‘0px’;
  56.             document.body.appendChild( stats.domElement );
  57.             // create a scene
  58.             scene = new THREE.Scene();
  59.             // put a camera in the scene
  60.             camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 10000 );
  61.             camera.position.set(0, 0, 5);
  62.             scene.add(camera);
  63.             // create a camera contol
  64.             cameraControls    = new THREEx.DragPanControls(camera)
  65.             // transparently support window resize
  66.             THREEx.WindowResize.bind(renderer, camera);
  67.             // allow ‘p’ to make screenshot
  68.             THREEx.Screenshot.bindKey(renderer);
  69.             // allow ‘f’ to go fullscreen where this feature is supported
  70.             if( THREEx.FullScreen.available() ){
  71.                 THREEx.FullScreen.bindKey();
  72.                 document.getElementById(‘inlineDoc’).innerHTML    += “- <i>f</i> for fullscreen”;
  73.             }
  74.             // here you add your objects
  75.             // – you will most likely replace this part by your own
  76.             var geometry    = new THREE.TorusGeometry( 1, 0.42 );
  77.             var material    = new THREE.MeshNormalMaterial();
  78.             var mesh    = new THREE.Mesh( geometry, material );
  79.             scene.add( mesh );
  80.         }
  81.         // animation loop
  82.         function animate() {
  83.             // loop on request animation loop
  84.             // – it has to be at the begining of the function
  85.             // – see details at http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
  86.             requestAnimationFrame( animate );
  87.             // do the render
  88.             render();
  89.             // update stats
  90.             stats.update();
  91.         }
  92.         // render the scene
  93.         function render() {
  94.             // update camera controls
  95.             cameraControls.update();
  96.             // actually render the scene
  97.             renderer.render( scene, camera );
  98.         }
  99.     </script>
  100. </body>
  101. </html>

 

C. Primitives

In the boiler plate change the primitive from a torus to a sphere by changing the geometry.

var geometry = new THREE.SphereGeometry( 100, 14, 7, false );

And then change material

new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( ‘textures/land_ocean_ice_cloud_2048.jpg’ ) } ;

 

image010.png

Documentation

http://mrdoob.github.com/three.js/docs/49/#

Learn to look at Constructors! Not everything is in the documentation.

D.  Booleans (Easy to Integrate JavaScript Libraries with three.js)

cube.png

http://chandler.prallfamily.com/2011/12/constructive-solid-geometry-with-three-js/

 

http://learningthreejs.com/blog/2012/03/12/augmented-reality-in-the-browser/

 

 

E. Lights Example

From examples three.js: canvas_lights_pointlights.html

image012.png

 

F. Importing a 3DSMax Object

Create your 3D object in 3DSMax and export it as a Collada file and then import it into three.js using the three.js Collada importer – it worked great.

 

image014.png

 

var loader = new THREE.ColladaLoader();

  1. loader.options.convertUpAxis = true;
  2. loader.load( ‘aln/alncl.dae’, function colladaReady( collada ) {

dae = collada.scene;

skin = collada.skins[ 0 ];

 

dae.scale.x = dae.scale.y = dae.scale.z = 0.06;

dae.updateMatrix();

init();

animate();

} );

Also view webgl_loader_collada.html

 

image015.png

Recently, I moved one of my user group mobile projects from PHP to C# (this is what I do when I get home from work for fun – I guess I chose the right profession). There are a number of reasons for switching from PHP, but basically I’m tired of piecing everything together. Plus, Visual Studio 11 (now in beta) offers a nice IDE for JQueryMobile complete with MVC4.

In addition to moving their project over to C#, I’m also showing them how to develop sites in the browser as opposed to using emulators.

 

mobiledevices.jpg

Browser development is not a substitute for emulators or the real device, but if all you are working on is HTML and JavaScript it will really speed up things. Here’s what you do:

 

  • Change the User Agent of the browser to match your mobile device
  • Resize the window to be the same size as your mobile device screen, and use the browser’s built in developer tools to debug and test your site
  • Add a custom device if your device is not in the list

 

Sounds easy enough. But it depends on what browser you are using. For example, IE has a user agent switching feature already built in. Firefox requires an add-on.

 

Here’s how you do it in Firefox:

 

1. Install the user agent add on:

https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/

 

2. After restarting Firefox, choose your device or add a new user agent by clicking Edit User Agents…

 

firefoxua.png

Here’s the click path you need to follow: Default User Agent ->Edit User Agents… ->New ->New User Agents.

 

3. After clicking New User Agents, put in a description and paste in your user agent string. Here is one I used for an Android device (Mozilla/5.0 (Linux; U; Android 2.3.3; en-us; HTC_DesireS_S510e Build/GRI40) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1)

 

useragentString.png

4. Hit OK, and then go back and choose your custom device. In my case it was Android.

androidchoose.png

5. Then resize your browser and navigate to a site (such as CNN below) and you will now be served up the mobile version of that site, as shown below:

 

mobileAndroid.png

 

It’s that easy. Here are a few resources to help you get started (and a few user agent strings to play around with).

 

Mobile Web Development Resources:

————————————————

Mobile Web Best Practices: http://www.w3.org/TR/mobile-bp/

Quirksmode Site: http://www.quirksmode.org/mobile/

User Agent Strings: http://www.useragentstring.com/

 

HTML5 and Related Web Applications:

————————————————

HTML5: http://www.w3.org/TR/html5/

Geolocation API: http://dev.w3.org/geo/api/spec-source.html

Local Storage API: http://dev.w3.org/html5/webstorage/

Offline Application Cache: http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html

 

Vendor-Provided Resources:
————————————————

Apple:

Getting Started with iOS Web Apps: http://developer.apple.com/library/safari/#referencelibrary/GettingStarted/GS_iPhoneWebApp/_index.html#//apple_ref/doc/uid/TP40008134

Google:

Web Applications Overview: http://developer.android.com/guide/webapps/index.html

Targeting Screens from Web Apps: http://developer.android.com/guide/webapps/targeting.html

Microsoft:

IE Developer Guide: http://msdn.microsoft.com/en-us/ie/ff468705.aspx

Designing Web Sites for Phone Browsers (PDF): http://go.microsoft.com/?linkid=9713253

Mozilla:

Fennec (Mobile Firefox) Home Page: https://wiki.mozilla.org/Mobile/Fennec

Opera:

Opera Mobile Home: http://dev.opera.com/articles/mobile/

Opera Mobile 10 Intro: http://dev.opera.com/articles/view/opera-mobile-10-developers-introduction/

 

————————————————

Mobile Development on Desktop

————————————————

 

User Agent Tools

 

Firefox

https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/

 

Chrome

https://chrome.google.com/webstore/detail/aafciojnlamllgpkpdkbamkfgbofhgcj

 

User Agent Strings:

IE Mobile User Agent

Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; <make>; <model>)

 

iOS User Agent

Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8B117 Safari/6531.22.7

Mozilla/5.0 (iPod; U; CPU iPhone OS 4_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8B117 Safari/6531.22.7

Mozilla/5.0 (iPad; U; CPU OS 3_2_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B500 Safari/531.21.10

 

Opera Mobile User Agent

Opera/9.80 (S60; SymbOS; Opera Mobi/498; U; en-GB) Presto/2.4.18 Version/10.00

 

Android Chrome Mobile User Agent

Mozilla/5.0 (Linux; U; Android 2.3.3; en-us; HTC_DesireS_S510e Build/GRI40) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

 

Mozilla Fennec User Agent

Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.2.13) Gecko/20101203 Mozilla/5.O(Android;Linux armv7l;rv:2.1) Gecko/20110318 Firefox/4.0b13pre Fennec/4.0 ( .NET CLR 3.5.30729)

Mozilla/5.0 (Maemo; Linux armv7l; rv:2.1) Gecko/20110318 Firefox/4.0b13pre Fennec/4.0

Mozilla/5.0 (Android; Linux armv7l; rv:2.0) Gecko/20110103 Firefox/4.0 Fennec/4.0

BlackBerry User Agent

Mozilla/5.0 (BlackBerry; U; BlackBerry 9800; en-US) AppleWebKit/534.1+ (KHTML, like Gecko) Version/6.0.0.201 Mobile Safari/534.1+

Mozilla/5.0 (BlackBerry; U; BlackBerry 9800; en-US) AppleWebKit/534.1+ (KHTML, like Gecko)

 

Note: Both lynda.com and pluralsight have a great set of video tutorials on html5, JavaScript, and MVC if you are looking to get cranking in mobile.

This Saturday (5/19/12) at Panera Bread on Houston Rd in Florence Kentucky at 9am, I will be doing a HTML5 3D Animation seminar.

Adobe Connect Link: http://meet25567017.adobeconnect.com/animation/

3D Race Car

3D Race Car

After my book Papervision3D (published by Wiley), I just had to hold my breath and wait since the technology was changing so rapidly. Papervison3D died (love writing a book on dead technology), Away3D took off and skidded, then Molehill limped in and out of the scene, and HTML5 (Webgl) rose out of the ashes.

We finally have browser 3D animation with graphic card acceleration. In addition to an extra 10,000 polygons 30fps we are almost at the point where we can create 3D movies. I’m totally there. As I wrote in a recent blog post…one more electronic evolution and education will be completely redefined as an immersive accelerated learning experience.

Here is what you will learn in the seminar:

  1. Creating a scene
  2. Rendering and 3D Animation
  3. Working with cameras
  4. Creating Lights
  5. Using Primitives
  6. Adding Materials
  7. Working with 3D Objects

Jonathan (my son) has created a 3D Alien (in 3DS Max) that we will be working with.

Hope to see you there, Mike

If you are aware of Phone Gap, then you’ve probably been doing what some of the guys in my users group are doing – looking to target  “all” smartphones with a single code base. Adobe’s purchase of Phone Gap is seen by some as another nail in the Flex coffin as it fully collaborates with the rest of the ecosystem rather than continuing to carve out its own proprietary niche. The destiny of Flex will depend upon two things – it’s success in the open source community, and commercial interest. Buckle up…here we go! UI programming is a roller coaster ride.