Archive for the ‘Tutorials’ Category

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

I do these Toastmaster speeches at work. This one was on doing an effective corporate pitch – check it out!  It involved some role playing.

Intro

My favorite way of blowing off the day is taking my 10 year old Son Davy to a Red’s Game. But I don’t go there to watch the game. I go there to watch Davy watch the game. He’s an ADHD auditory genius that chirps out the entire game (and everything else) in animated replay.

As he straddles over three chairs, you can hear him chirping out baseball…cold beer…anybody want cold beer, strike three you’re out, salty peanuts, anybody got change for a dollar. I never grow tired of watching him, he’s like a duracell battery that never runs out.

In a sense, Davy has already mastered the most important part of the corporate pitch. He has absorbed the passions of his key stake holders, understands his collaborators, and knows the lingo of his clientele.

So Madam Toaster Master, ladies and gentlemen, and distinguished get ready for the five finger corporate pitch (have a ball in hand and show the pitch).

Red's game

Red's Game

Content

Over the past 30 years, I’ve literally worked on 100’s of projects many requiring some type of pitch. My projects have ranged from educational DACUMs for Governor Jeb Bush, military contracts with Lockheed and McDonald Douglas, to ESRI maps for the Cherokee Indians in the foot hills of Tennessee. And during this time, I’ve learned five key principles that can make the difference between striking out and hitting a home run at your next corporate pitch.

Regardless of the size of your pitch, if you’re presenting with a team of 8 to a room full of high power executives or downtown at Joe’s Bar pitching an eCommerce site that sells more pretzels – these 5 principles will increase your odds of landing the deal. Learning them is easy. Well, as easy as your five fingers (hold up your hand).

Your thumb (the most important part of your hand) represents knowing your client, and the environment in which your project will unfold.

Your index finger… is socializing your idea. It always points outward never inward. Getting buy-in, and giving your client a story that they can sell to others.

Your middle finger stretches out the farthest and represent your passion and the passion of your key stake holders (reaching a consensus of passion is your goal). Emotion combined with a compelling argument creates an air of inevitability. It’s the grease that will punch your idea vi-rally into an organization.

Your ring finger represents the marriage of your idea to the company. It’s your prototype. What it’s going to look and feel like if implemented well… The return on investment (ROI).

Your little figure, though the smallest on your hand is the most important. Just like drinking a cup of tea, keep this digit out so everyone can see it. It’s closing the deal. Every good salesman knows that you must ask for your clients business. So ask! This keeps your presentation focused.

As opposed to going through a compendium of notes on what has and has not happened to me over the years when I did and did not apply these principles, let’s do a little impromptu role playing. Let me actually show you how I would do a presentation. So I need a volunteer.

Who is going to be my victim…Hmm…Vicki could you come up.

Role Play

Role Playing (I will ask for Volunteers – you of course will be chosen):

Vicki is the president of a small company that sells specialty items that is bursting at the seams – she has 8 employees – and needs an eCommerce website, brand development, and is on the fence about using mobile.

My Cell Phone Buzzes

Me

…I’m sorry I’ve got to take this. Hi Shelly …no I’m not busy. Yes, that’s great. I’ll pick him up at 4 today. See you then. Fantastic.

Sorry about that I typically don’t take calls during a presentation, but we are doing our first pet adoption today. And we are picking up the little puppy today.

You (feel free to ad-lib)

I do pet adoptions too, what kind of dog did you get.

Me

A little Chihuahua…see here’s a picture of him on my cell phone.

You

He’s so cute but what’s wrong with his skin.

Me

He’s got a rare skin condition, but I’ve created an automatic app that keeps track of when I should order his medicine. Oh look it’s time for my first order. Would you do the honors.

You

Sure…(then I give you the phone and I say just press right here)

Me

Thanks Vicki you just saved my puppy’s skin.

You

That was easy.

Me

That’s all there is too it and the medicine is on its way. No filling out messy forms.

I think it’s amazing that we both love pet adoptions. I’ve even designed our presentation (theme of) today around finding a specialty item a home.

If you like what we present today what I would like you to do is release the funds so I can get two of my designers working on this project over the next month.

You

I’ve heard enough…you’ve got the job.

Me

Great we will get started on it right-away.

Explanation 

Though this example is a little contrived it illustrates all the points of the five finger corporate pitch.

Thumb and middle finger: In this case, I knew a little bit about Vicki, her love for animal adoption and since I was adopting as well I matched our passions in the theme of my presentation finding a specialty item a home.

If you’re hacker you call it social engineering. If you are professional ball player, or boxer you are watching past games or matches, looking for volubility or in road to your opponent (it worked for M.Ali it will work for you).

Pointing finger and ring finger: Vicki was on the fence about having a mobile website. This is a naysayer situation. The best solution is a prototype. I’m using what I call a planned epiphany. When I place the device in her hand the light comes on and she is now thinking wow – this is working for you and it’s was easy. It just might work for me. In addition, I’m socializing the idea. She can now take this story and sell it to her stock holders.

The pinky: Notice before I started my presentation I asked for her business. Most people don’t do this. They wait until the end. But if you are really bad at it, just get it out of the way, it keeps the meeting focused.

Finally, after Vicki accepted the deal, I stopped my presentation. Even if you have 19 slides to go. Just shut up! Wrapped it. If there are not other questions, you’ve got the green light. Go for it!

Thank you Vicki, everyone give her a round of applause.

Conclusion

Any pro base ball pitcher will tell you that a proper pitch starts with the grip. Your thumb ring finger and pinky (knowing the organization, prototyping, and closing the deal) keeps the ball in place. But if you want to grip the laces of the organization, socializing with passion (holding up index and middle finger) will evangelize your idea into the hearts of your clients.

On your next pitch don’t strike out, hit a home run by applying these five principles.

MD, LG, DG – the five finger corporate pitch.

MD, LG, DG – the five finger corporate pitch.

Why we do what we do!

Why we do what we do!

Why we do what we do! Mobile is the driver.

Notes:

  1. Modernizr – http://www.modernizr.com/
  2. DZone refcardz – http://refcardz.dzone.com/ (css Part 1, 2, 3)
  3. Lynda.com (several css series)
What you will be learning how to do: Build a Mobile Storefront
storefront

Store Front

Hey {What we are doing: making a three layer cake;}
Three layer cake

Three layer cake

Notes:
  • CSS1 1996, CSS2 1998 (browser wars), updated – 2004 CSS2.1 again in 2007
  • CSS3 (mobile is a driver need for another standard) – not a large singular standards document, being released in pieces.
  • So CSS3 is many standards allowing for greater flexibility – all future additions are updates (collection of modules that extends 2.1 specification)
  • Resources: http://www.w3.org/standards/techs/css#w3c_all
  • Where we are at: http://www.w3.org/Style/CSS/current-work.html
  • For IE CSS3 PieLibrary:  http://css3pie.com/
  • Modernzr doesn’t add support but detects support (www.modernizr.com)
  • Vendor prefixes – propitiatory without interfering (Firefox moz, IE ms and mso, Opera 0, Chrome and Safari webkit, Konqueror khtml) – early adoption. Prefix can be dropped once standard is implemented.
  • CSS Syntax – CSS is easy to learn (Selector +Declaration include rules property:value;)
  •  (don’t use camel casing use -), can group selectors by commas
  • Basic Selectors: Element Selectors (global in nature)
  • Class Selector: can be set on any html element (.selection)
  • ID Selector: must be unique to the page, if assign to page element not other element on that page can have that specific ID. (#mainparagraph). Can add element to front of selector.
  • Descendant Selectors – string selectors together (avoid more than three – ) div p span {color: red;}
  • Child and sibling selectors: div > h1 (child selector), h1+p (adjacent), h1~p (general)
  • Attribute selectors: [att],[att=val],[att~=val],[att|=val],[att^=val],[att$=val],[att*=val]
  • pseudo-class: enabled, disabled, checked (based on current state – controls css of forms)

Videos

http://www.lynda.com/Web-Interactive-CSS-tutorials/CSS-Fundamentals/80436-2.html

http://www.lynda.com/CSS3-tutorials/first-look/73288-2.html

Simple Examples:

http://www.ironspider.ca/adv/basic_css/example/embedded01.htm

http://www.w3.org/Style/Examples/011/firstcss

Industry Example: Demoed and handed out!

Setting up an SVN for Flex

Posted: January 22, 2012 in Tutorials

Part 1: Setting up an SVN in Flex

Part 2: Setting up an SVN in Flex

If you’re doing software development with more than one person (more than just yourself that is)…get an svn.

I’ve seen organizations loose a man-years tripping over each other because they did not have an SVN. And yet, it is so easy to set up.

Griping Mouse

OK, I’ve got to gripe… I’ve worked on a ton of contracts so it has all happened to me. At a bank I worked at (doing major development with no SVN), one of the project developers asked me to do AB and C. But I knew that B (of AB and C) would erase her work. So I only did A and C. The next day she sent out an email to 10 people on how I had erased her work (because I had done AB and C). But my reply to the 10  was “impossible”, because I had not done B. Then she sputtered a little in an incompetent way… During five years of development, this bank must have lost at least one man-year of work while creating a poor/stressful work environment.

So what’s the point…get an SVN! And always play smart, and be nice! Life is too short to give someone an ulcer because you won’t take 15 minutes to set up an SVN.

(Video Goes Here)

Important Links to Help You Get Started

A. Tortoise (for Windows): http://tortoisesvn.tigris.org/

B. SVN Comparison Chart: http://www.svnhostingcomparison.com/

C. Codesion: http://codesion.com/

D. Setting up Flex SVN (Flex Magazine): http://www.flashmagazine.com/Tutorials/detail/setting_up_subversion_with_adobe_flex_3/

Step-by-Step

2 Steps

2 Part Process

1. Download and install Tortoise (if you are using a MAC look for something comparable).

2. Set up your SVN hosting using Codesion (they have a ton of helpful getting started videos and live help). See Section B for other SVN options.

3. Install the subclipse plug-in into Flex (or eclipse Flex):

Note: If you are using eclipse with the Flex plug-in then you can in stall subclipse by Start by opening Help -> Software Updates -> Find and Install.

This will open up a dialogue that will let you select to either update existing features or Search for new features to install. We are installing a new feature, so select this one. Click through to the site selection dialogue. The Subclipse server is not in the default list, so we must add it manually.

Click the “New Remote Site” button and set Name to “Subclipse”. Check out the standard Subclipse install procedure to deternmine your version of subclipse. For this demo use the URL “http://subclipse.tigris.org/update_1.2.x” (without the quotation marks). Enter the URL and press “OK”.

Make sure that only the server we just added is checked and click “Finish”. Eclipse connects to the server and grabs the list of files available to us.

Make sure that only “Subclipse Plugin” is checked and click “Next”. Accept the terms, click “Next” and then “Finish” to install. This will start the download of the plugin. You’ll need to verify the features installed and restart. That’s it, you’re done!

Note: If you are using Flash Builder (not the FB plug-in) you must first start it up as an administrator to install from the help menu.

Go to where you installed it (in my case it was C:\Program Files (x86)\Adobe\Adobe Flash Builder 4), right click on the Flex executable and choose Run as Administrator. When Flex starts up you will now be able to install Subclipse from the help menu as shown above.

4. Set up your Flex Repository.

Back in Flex, select Window -> Open Perspective -> Other…

Select “SVN Repository Exploring” from the list and click OK. Flex will now switch to the new mode. To add a new  Repository, right click in the white space in the left panel called SVN Repositories and select”New” -> “Repository Location” from the popup menu. From your Codesion site, insert your SVN repository URL.

Switch back to the “Flex Development” perspective (in the upper right corner) and create a new project.

5. Uploading your project.

After restarting Flex, create a Flex Project (or use one you’ve already created), right click the project you want to add and select Team -> Share Project. (you may be asked to select between CVS and SVN, choose SVN.)

Select to use the repository location you added in the previous step. Click next to proceed. Use a specified folder name or use the project name as the folder name. Click next and finish to ready share your project. Write a comment, choose specific parts of the project to import (if not all), and click OK to import into the SVN. A repository icon should appear on your project icon. Check the Repository to see your imported project.

6. Making Changes.

To incorporate changes to your project. Modify project and save. A asterisk should appear over the modified file.  Right click on the modified project in the Flex perspective and select Team ->Synchronize with Repository. Choose Yes for Team Synchronization. Go to project and right click on appropriate element and choose update to add changes (arrow pointing to left), or commit to add new changes to SVN (remember to add a comment).

7. Create a project from the SVN.

In Flex in the SVN Repository Exploring perspective navigate to the project folder you want to download. Right click on the folder and choose checkout. Double check the project name…you can create multiple projects by changing the name. If the project already exist not changing the name will over write what you have.

Click Next Finish and Flex will create a Project from your repository.

8. Other Things.

Before you commit changes always update first (or you might erase other’s work)

You will get conflicts in the SVN when working with other developers so follow the menu items to merge conflicting items. Once merged…mark as merged and commit.

Don’t get wrapped around the axle. If all else fails start over. Download a new version from the SVN and start developing again. If you’ve messed up the SVN, dial back to a previous version.

Happy SVN-n-ing.

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.


This Saturday I’ll be teaching how to create effective web forms. See you at Panera Bread, 9, on Housten Rd in Florence

Creating Effective Web Forms

After completing a difficult web form have you ever exclaimed, “Boy that was hard work”. Was it really? All you did was a little typing, and clicking. How hard could that be? It’s all mental, but it feels like you just ran a marathon, especially, if the form was difficult to complete.

Mental parsing is difficult, and creating an effective form with high conversion rate is getting physical with your mind: Create your forms as if you are physically doing some type of work. For example, filling out a field is like lifting a 20 pound box. Clicking is like batting a fly. Moving from page to page (or jumping from place to place) is like jumping from roof top to roof top. Getting lost in the process is like an unwelcomed road trip that ends in the middle of a New Mexico dessert.

If this sounds ridiculous, just remember by applying the principles that you’ll learn in this course many companies have been able to increase their conversion rates by 400% – practically overnight. So it’s dead serious. If you’re having problems with conversion, this is the stuff for you! Here’s a summary of what you’ll learn.

(1)    See a form as real physical work not just fields to fill in. Remember this is work which you are asking your client to do for free. Whenever you can eliminate the work required (or make it enjoyable), you’ll increase the possibility for conversion.

(2)    Apply simple physics concepts:

  1. Reduce form friction by using auto completion and inline validation
  2. Do a direct dunk on your path to completion
  3. Use visual cues when you want your clients to stop and think (especially with primary and secondary activities), but use them sparingly
  4. Conserve energy by reducing the amount of mental parsing required
  5. pay attention to eye metrics
  6. Reduce clicks and slides when possible, and keep tabbing in your path to completion.

(3)    Avoid jumping from page-to-page (or place to place). Remember its equivalent to physically jumping.

(4) Eliminate unnecessary fields. You wouldn’t ask your neighbor over to help you move a couch and then have him mow the lawn. The same applies here.

etc… there is more…see you Saturday.

Below is what we covered and the Adobe Connect recording. It’s our first Adobe Connect and was a little rough (will do better next time). Adobe Connect is perfect for what we are doing…we are really pleased with it. But with any software like this it takes a little practice…we (especially me) just need to get better at passing resources back and forth. Thanks for your patience.

Adobe Connect

Adobe Connect Session

Upcoming UML Kent State Presentation…DZone Clone Reference Card in Illustrator Artboard.

http://refcardz.dzone.com/

Google Maps (Spark) Starter Code and Examples

http://code.google.com/apis/maps/documentation/flash/

David’s Example