HTML5 and WebGL | Lively's Flash Builder Users Group

Archive for the ‘HTML5 and WebGL’ Category

From PhoneGap Build to Multi-platform

Posted: May 31, 2012 in HTML5 and WebGL, Tutorials

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.

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…

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:

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:

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.

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.

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

PhoneGap Build builds the various platforms shown below:

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!

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!

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.

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.

HTML5 3D Animation Seminar (5/19/12)

Posted: May 15, 2012 in Flash Builder Users Group, HTML5 and WebGL

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

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:

Creating a scene
Rendering and 3D Animation
Working with cameras
Creating Lights
Using Primitives
Adding Materials
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

Meeting Minutes 3/10/12 – jqmPhp

Posted: March 10, 2012 in Active Projects, Flash Builder Users Group, HTML5 and WebGL, Meeting Minutes

So as opposed to creating a UI that holds database values. The database itself creates the UI based on its DTO – I’m a “self-proclaimed” genius. Or at least that’s what I told the group and they laughed.

We covered building a simple Mobile menu system (using jqmphp) and how to run it in WAMP. And discussed how to make it better parsing loops (reading DTOs from a service) as opposed to hard-coding everything. This parsing code needs to be written for the Store Front Mobile Project.

Basic Menu System

And went through some simple database stuff from W3Schools (try it)

http://www.w3schools.com/sql/sql_syntax.asp

Here is the code for the first menu system (shown above):

<?php
/**
* Lively – Basic Menu System
* @package jqmPhp
* @filesource
*/

/**
* Include the jqmPhp class.
*/
include ‘lib/jqmPhp.php’;

/**
* Create a new jqmPhp object.
*/
$j = new jqmPhp();

/**
* Config ‘html’ and ‘head’ tag.
*/
$j->head()->title(‘Basic Menu System’);

/**
* Create and config a jqmPage object.
*/
$p = new jqmPage(‘basicmenuesystem’);
$p->theme(‘b’)->title(‘Basic Menu System’);
$p->header()->theme(‘a’)->add(new jqmButton(”, array(new jqmAttribute(‘data-iconpos’, ‘notext’)), ”, ‘a’, ‘index.php#’, ”, ‘home’));
//Get the Button Added and Set Attributes
$p->header()->items()->get(1)->attribute(‘data-iconpos’, ‘notext’)->attribute(‘rel’, ‘external’);

/**
* Create and config a new jqmListview object and add Basic Items.
*/
$list1 = new jqmListview();
$list1->addDivider(‘Basic Menu System’, ”)->inset(true);
$list1->addBasic(‘Menu A’, ‘SubMenuA.php#’);
$list1->addBasic(‘Menu B’, ‘SubMenuB.php#’);
$list1->addBasic(‘Menu C’, ‘SubMenuC.php#’);
$p->addContent($list1);

$j->addPage($p);

/**
* Generate the HTML code.
*/
echo $j;
?>

Meeting 1/28/12 at my House

Posted: January 27, 2012 in Flash Builder Users Group, HTML5 and WebGL

Hi,

Our meeting is this Saturday, 28th at 9am at my house (1849 Windingvine Ct., Florence, Ky 41042). Here is what we are going to cover:

Congrats David got a Flex Job
Setting up and connecting to an SVN (Flex and HTML5)
Setting up a Database using phpmyadmin (look at a modified Drupal DB)
Connecting to the database in Dreamweaver (and more)
Yet another Mobile HTML5 starter file
My Upcoming Flex Open Source Project (needed for Ed’s project)
Timeline for Ed Landis’s Project
Proposed Kyria’s Chinese Project
Chamber of Commerce

See you there…Mike

Flash is Dead: HTML5 and Mobile by Michael Lively

Posted: November 12, 2011 in HTML5 and WebGL, Tutorials

Here is an outline of my upcoming Flash is Dead HTML 5 course:

I certainly don’t believe that Flash is dead, but the desktop is dead (or mostly dead…what do you have to live for…true love). Mobile is driving web development. So I titled this course “Flash is Dead” for the Flash haters out there who don’t realize that it’s about what works -not any aversion to style.

Flash is Dead: HTML5 and Mobile by Michael Lively

Course Outline:

Getting Started – explains how to get started with HTML 5 & CSS3, develop cross-browser compatible web sites, and integrate associated technologies to create an enhanced mobile experience.
Syntax and Structure – defines the new HTML5 tags and attributes, takes a look at helpful online resources, discusses how browsers parse content such as history, and demonstrates a simple drag and drop game.
Building Web Forms for Mobile – defines best practices for creating mobile web forms, displays new HTML5 form types, and discusses approaches for dealing with older browsers using tools such as jquery and modernizer.
Local Storage – examines HTML 5 storage options, emphasizes the use of SQLite and direct browser access, and develops a full CRUD (Create Read Update Delete) browser-centered storage system.
Video and Audio – shows how to configure HTML 5 audio and video tags for web and mobile, how to encode audio and video file formats, and build custom controls with JavaScript.
Graphics and Animation – illustrates the use of the HTML5 Canvas elements by drawing basic shapes, setting styles and colors, adding shadows, patterns, and gradients. Further develops animation and more advanced techniques such as scaling, rotating, and compositing objects.
3D Animation Overview – demonstrates how to create 3D animation using WebGL and the HTML 5 canvas elements, and gives an overview of popular WebGL sites and training resources.
Geolocation – covers the HTML5 geolocation API, how to retrieve coordinates from a device, how to integrate the results with Google Maps, and how to create a location-aware mobile application.
Mobile Web Design– demonstrates how to create optimized HTML 5 mobile pages, design mobile screens with finger-based interaction, and how to integrate with local storage and media queries to produce interactive reader content.
IOS Web App Development – illustrates how to set up the IPhone emulator, create special effects, and use HTML5 and CSS3 to tailor apps for viewing on the IPhone and IPad.