David J McClelland

Experiences at the Intersection of Programming & Design

Archive for the ‘Tools’ Category

Google Analytics from LocalHost

If you want to integrate Google Analytics with a site, you want it all working before the site goes live. Even better: integrate it from the convenient, secure localhost server on your dev box.

Prerequisites:

  • a gmail account
  • a Google Analytics account
  • a web server hosting at least one html page on your local PC
Create An Account

Your Google Analytics log-in can be associated with multiple “Accounts” which you define. I organize mine according to what server it tracks and give them the same name as the server machine name. You may decide it is best to segment by customers in order to keep data separated and name it after your customer.

Within an account you define one or more “Properties” which define what you intend to track. If you have a customer with multiple sites or a site and a mobile app you can keep them under a single account using properties to enter distinct URLs etc. I add a property and name it for each site I develop on a given server.

Analytics Organization

To create a new account you have to create at least one profile which will be the default. Profiles are for filtering reports and data and are not really relevant for localhost tests except that you need to make one to see reports:

  1. Log into Google Analytics
  2. Click the Admin tab at upper Right.
  3. Click Profiles tab.
  4. Click + New Profile
  5. Enter profile name and set time zone and country
  6. Click Create Profile
Google Analytics Property

Google Analytics Property

localhost
To associate a site with a property:

  1. Click Property Settings tab
  2. Enter Property Name. I used my machine name + “” to test a page located at my localhost server’s web root.
  3. Enter Default URL: I use my site name and end with “.com” You used to be able to enter .localhost but that doesn’t work as I’m writing this.
  4. Default Profile: the profile you want the Property to be associated with. If you have more than one dev box or image, pick the one that hosts the site.
  5. I don’t think there is a way to complete a site verification, so I only bother with Webmaster Tools Settings when I move an instance of the site onto a live web server I have already verified.
  6. Click Apply
Create A Property

Create A Property

Change some settings of the property to work with localhost:

    1. Click Tracking Code tab
    2. Scroll down to Website Tracking section
    3. Click Standard tab
    4. Under “1. What are you tracking?” tick Multiple top-level domains radio button
      What Are You Tracking?

      What Are You Tracking?

    5. Under “2. Paste this code on your site” copy the code from the box indicated right below and paste in a text editor
      GA-Code

      GA-Code

    6. Find the line that reads similar to this: _gaq.push([‘_setDomainName’, ‘[yourSiteName’]);
    7. Replace with this: _gaq.push([‘_setDomainName’, ‘none’]);
    8. Paste the final edited code so that it is the last script before the closing head tag in your default site page, such as index.htm.
    9. I added a button to prompt sending a call to analytics without refreshing the page using the following html: 

 

  1. Load on your browser and click the button.
Wait for it
Expect to see this for awhile before your clicks are registered by Google Analytics and displayed on your Overview:

No Visitors

No Visitors : (

No Tracking

No Tracking?

Another bonus of working from your own server is that you are in control of the events that occur so the signal to noise ratio is effectively 0. My click is the one and only click today!

visited

visited : )

  • 0 Comments
  • Filed under: Techniques, Tools
  • Developing on Macintosh

    I recently started a new job and was offered the choice of PC or Mac to develop on. In fact, it was between a PC laptop and desktop (both I7 quad cores) or a single MacBook Pro.

    Of course I went with the Mac. It has been such a long time since I have had the pleasure of working on a beautiful machine, and what would I need a desktop for anyway? I already have my own PC laptop (Alien M11x), and will have parallels running Windows 7 on the Mac soon as well.

    I have been surprised at how many tools I use are available on both platforms.

    Name MAC PC
    Adobe Suite X X
    MS Office X X
    Eclipse X X
    IntelliJ IDEA X X
    DiffMerge X X
    Webex X X
    GotoMeeting X X
    Jing X X
    FileMaker X X
    Skype X X
    Live Mesh X X
    TeamViewer X X
    FileZilla X X
    DropBox X X
    Evernote X X
    Skitch X X
    Kindle X X

    The tools I miss the most are Tortoise Hg and SVN clients which have no equivalent Finder-integrated equivalents on Mac that I know of. XCode, Garage Band and the MAC OS experience make up for this, along with Cornerstone and SourceTree.

    OSX Lion maintains its System 7 roots – including the hidden files annoyance and the cmnd-opt-esc force-quit combo. Terminal and X-Code are really nice additions.

  • 0 Comments
  • Filed under: Tools
  • Developing for iOS using Flex 4.6

    iOS-AIR

    Compared to authoring to Android, publishing to an iOS device from a PC is a pain. It beats spending over 1K for an Mac Mini just for that purpose. And hats off to Adobe for finding a way to make it possible.

    Get Flex 4.6 and open the “Hello World” targeting iOS (and BB/Android). Go for a release build, select Captive Air. At prompt for Packaging Settings you will see this:

    Flex Release Build

    Flex Release Build

    Flex Release Build With iOS Target Fields Empty

    Flex Release Build With iOS Target Fields Empty

    In order to move past this point in the release process you will need to complete a number of steps:

    Apple Developer Program

    Join Apple Developer Program

    Buy iOS Developer Subscription

    Install iTunes

    Get iOS Device ID

    Activate your developer membership via email that comes within 24 hours from Apple:

    Developer Activation Sequence

    Developer Activation Sequence

    Certificate Creation Process

    Create a Certificate Signing Request

    The certificate process is a bit of a command line mess: OpenSSL is by and for developers.  There are many versions to choose from: do not get the “light” version, and get the one for your version of WIndows – 32 or 64-bit. If you need to install Visual C++ 2008 Redistributables the links are in the same table with the WinSSL binaries. I used Win64 OpenSSL v1.0.0g.

    Go to the Provisioning Portal to set up a provision file for each iOS device you plan to test on:

    Provisioning Welcome

    Provisioning Welcome

    Download both Provision and Certificate file

    input the path to provision file, certificate file and the password you were prompted to create during the certificate conversion process.

    Certificate Maintenance

    How I keep my certificates organized and secure:

    Certificate Directory

    Certificate Directory

    1. The CertificateSigningRequest.certSigningRequest is the file you need to generate and upload to the Apple Provisioning Portal
    2. I organized the commands from Adobe’s instruction steps in a text cheat sheet. I cut and paste with my specific information in the commands. If I need to create another version I will modify this.
    3. The .cer file is the iOS application certificate from the Apple Provisioning Portal
    4. The .mobileProvision file is from Apple Provisioning Portal. I didn’t use it for anything.
    5. An Android AIR certificate (I keep all certificates for AIR in one directory).
    6. davidjmcclelland_portfolio.cer is a bad file I should have deleted.
    7. The final .P12 file that Adobe AIR uses for iOS output. Converted to this format from the .pem file of same name by OpenSSL.
    8. ios_development.pem was converted from ios_development.cer by OpenSSL.
    9. mykey.key is the private key generated by OpenSSL. It corresponds to the public key embedded in CertificateSigningRequest.

    Now that I have been all the way through this process I will try to use the same filename as my project for all of the certificate files so that I can keep them together. The Provisioning Portal named the files I downloaded ios_development so I left them alone in case changing the name broke anything.  I keep them all under version control.

    What this elaborate process does is ensure that the identity of the creator of any iOS application can be traced like a chain of custody.

    Publish to iOS and wait several minutes for an .ipa file to be created.

    Drag the ipa file onto iTunes Library section of Left menu and drop it. Then sync to iOS device to get app installed.

    Run app. Whew!

  • 0 Comments
  • Filed under: Techniques, Tools
  • Captive AIR: Flex is Finally a Legit App Solution

    Getting a Flash project to compile and run on Android devices is pretty well covered on gotoandlearn.com – I recommend starting there. Some of the instructions are out of date but I was able to make it work.

    I spent way too much time getting my Motorola Triumph to come up. If you have one, there is some good reference here. Amazon Fire was also a challenge to connect with, and is stuck on AIR 2.7. This required changing SDK to 4.0 and hacking the AIR Application Descriptor file which had already been generated to call for 3.1.  This aspect of mobile dev is counterproductive once you get over the thrill of testing an app a couple of times. It does underscore the incredible advantage Flex/Flash present for rapid development of mobile apps though, since you can develop a lot before testing on a device or emulator.

    My experience targeting the Fire made it clear to me why AIR captive runtime is really not a nice-to-have option:  it is the only way to guarantee your AIR-based app will run on a wide range of phone and tablet form factors. Compare the incremental download time/space savings of AIR to the installation user experience, developer effort and Flash-taint-avoidance. It finally establishes Flex mobile as a legitimate cross-platform approach. No-one knows/cares what tooling I used to develop a free-standing app, and they certainly don’t want to hear that their device won’t run my app because it isn’t certified to run the latest version of AIR. As a developer I can’t afford to guess how many devices I am abandoning when I move from 4.5 to 4.5.1 SDK.

  • 0 Comments
  • Filed under: Practice, Tools
  • Navigating Cross-Platform The Adobe Way

    I am circling back to the Adobe multi-platform development approach now that I am using ActionScript 3 and MXML all day. I just don’t have the bandwidth now to be productive in Haxe, HTML5 or other language variants with my new full-time Flex responsibilities.

    Meanwhile I hear questions about what alternative to Flex should be pursued, so that keeps the alternative pressure on.

    So I am focusing on what is required to build to Desktop, browsers, iOS and Android from Adobe tooling, and incorporating any other required.

    So far that meant installing Android SDK and attempting to get a phone to show up for ADB. I have a Motorola Triumph, Droid 3 and Kindle fire to try. So far the Triumph does not show up, but I may have installed the USB storage drivers that came with the phone on dev machine. I have to admit, I have never once gotten a phone to work with ADB.

    I downloaded Motorola’s eclipse-based development environment - maybe it has some magic.

    iOS will be an interesting challenge as I have to justify buying a dev license and possible set up a Hackintosh to get something on the only iOS device in my house – an iPad2. I finished off the iPod we had trying to fix the cracked screen with a replacement kit.

    One note on the Moto Triumph – this is a prepay Android 2.2.2 smartphone through Virgin – I own the phone outright for $300 and can use it on Virgin or Sprint. Virgin is $25/month for “unlimited” data and text plus some voice (which I don’t use anyway) and it is almost as good as the Droid. When you look at total cost of ownership, it is about $1400 less than a less-well equipped iPhone or Droid on Verizon with a similar plan over 2 years – less than half.

    Enterprise Flex Tools: IntelliJ IDEA

    I had never heard of this IDE until very recently. I assumed Enterprise meant you installed the Flash Builder plugin in your existing Eclipse instead of getting Flash Builder standalone.

    Everyone calls Idea IntelliJ because, let’s face it- they probably think they made a clever play on “IDE” but no-one knows what you’re talking about if you refer to it by the product name. “What version of Idea are you using?”

    So why use IntelliJ instead of Builder, FDT, FlashDevelop or Eclipse? The short answer is that it kicks Eclipse’s butt in performance, usability and actual capability. Builder’s too, If you aren’t concerned about editing MXML layouts visually and Adobe product integration. It is a very nice, well-thought-out tool that has all the hooks needed to fit into almost any enterprise setting that uses typical Java/OSS middleware and almost any version control system.

    If you want to try before you buy you can download a trial of the Ultimate Edition. The free Community Edition does not have the MXML/Actionscript plug-in. I might post more on this as I learn more about it.

     

    Here’s a cool feature I found recently: IntelliJ can make panels semi-opaque when they lose focus so you can still monitor them while coding:

     

     

  • 0 Comments
  • Filed under: Practice, Tools
  • Use Your ActionScript Experience to create Native Apps

    If you are looking for way to create content for many relevant platforms from a single codebase on a Windows PC, I recommend HaXeNME and FlashDevelop plus the Actuate tween/animation library.

    I have yet to find a tutorial that covers the complete process of installing everything you will need to deploy to all the supported platforms using FlashDevelop, but that is the preferred -but not required- method. I don’t have a Mac on which to follow the XCode build path to iOS, so you won’t find that here either, at least not right away.

    If you are interested in following along, or just want to try out HaXeNME, here is a fairly comprehensive walkthrough to get started:

    Install FlashDevelop

    Install FlashDevelop and dependencies, such as .net and Java. The version I installed provided options to automatically include Flex libraries and Flash Player Debugger and prompted me to install any dependencies it did not include itself or find on the system already, such as Java.

    Version

    Download

    Download FlashDevelop before clicking the helpful, important links above it. FlashDevelop can install these for you.

    Options

    Installation Options

    Progress

    Installer Progress

    Even though FlashDevelop comes with HaXe pre-installed, I recommend installing HaXe separately. If you decide otherwise be advised that the rest of the what is outlined will probably require path changes and may not work at all.

    First Run

    First Run Fails Sometimes

     

    Second

    Success!

    Projects

    Select New Projects from Projects Menu (Not File Menu)

    HaXe

    HaXe is already there, but...

    NME

    Installing NME will also install Motion-Twin HaXe and NEKO to the default location for your version of Windows as a convenience. This will vary from Windows XP and Vista/7, but neither is where FlashDevelop put it.

    Be advised that the HaXe site indicated their installer may trigger a virus alert. I saw one for the NME install on Vista, but not from the HaXe on Vista or NME on XP, using the same virus program on each. In spite of declining to take action, Windows Defender reported that it had “cleaned” my infected file. This notification appeared a few minutes after I had completed the NME installation.

    Before Installation

    Before HaXe Installation, Vista

    After

    NME installation

    Targets

    Refer to the site instructions for how to install the target operating systems currently supported by HaXe NME.
    NME has install scripts for each target, similar to how Linux installs packages. Some of the installers will prompt for paths and options.

    Android SDK Manager prompt during install
    When prompted for installation directory

    C:\Development|Android SDK

    enter

    C:\Development\Android_SDK.

    Android API 7 Required

    Make sure you select Android 2.1 (APK 7) as instructed by the instructions that appear in the terminal. Then install NDK to

    C:\Development\Android_NDK

    What packages you should install for Android is up to you and outside the scope of this post. If the SDK manager indicates it is done loading packages and you close the window it is possible that the NME process will not detect this. If this happens simply close the terminal window and restart in another one. It will skip through progress already made on the install as long as you enter the correct responses and enter the underscored path names. Do the same process for Apache Ant.

    When prompted to install Java JDK, I recommend installing the developer JDK. Install to an existing Java directory if you have one – probably

    C:\Program files\Java

    You must manually install Java from Oracle’s web page. I recommend installing Jave EE 6 SDK. The ME version did not compile correctly because the compiler is no longer included in that package. It took a bit of research to figure this out, but as of this writing NME still presents you with the ORacle page for the ME version.

    Update Environmental Variables

    Content

    Install libraries to use with HaXe/NME

    Libraries are one area where the underlying complexity of HaXe is exposed. While there are some libraries that have been specifically created for use with Haxe to compile to all targets, there are more that are partial ports from a single platform that use HaXe as a bridge to support a subset of other targets and only features the developer needed, or that the targets could support. Use HaxeLib to determine what is available. Check you project use-case and do some research before committing to a specific library. I have a strong bias toward using only libraries that support all targets and are actively used and developed in case new targets are introduced that become strategic. One such library that will be necessary to use in the next step is Actuate. Open a command line and enter
    haxelib install actuate

    to install it.

    Can Sencha Touch/Animator/EXT Do eLearning?

    Sencha sells a suite of products for developing HTML5-based rich media that work on all browsers and platforms without using Flash or other plugins.

    Can combine some of the products to create a robust eLearning content solution/production flow that compares well to Articulate/Captivate?

    To start with, I installed Sencha EXT JS version 4. This is a Rich Internet Application framework that must run on a web server to work.

    Examples and Training on EXT JS 4

    A build tool SDK is available as a beta for automating the rinse-wash-repeat sometimes required for multi-browser support. Once installed, you can do builds from the command line. More on the SDK.

    Next, let’s assume that if we can build a HTML5 site with EXT JS, we can build some templates to display basic Knowledge-Needed content and a course menu with it, possibly with the aid of a database backend.

    If that is the case, we will need some more interactive content to plug into the templates. That’s where Sencha Animator appears to fit in. Unlike EXT JS, Animator installs like a regular application in Windows. You can run it as a trial for 30 days. It looks similar to Adobe Edge but has Actions you can use to build interactivity. There are some tutorials provided to get started. The output is also HTML5. Can it tie in with the EXT JS framework?

     

     

    Here is a sample of an HTML5 animation running in EXT JS framework. On Android OS Phone. On iOS.

    I recreated the animation in Flash and embedded it in Adobe Captivate. I was able to convert the output to HTML5 using a conversion tool in beta release from Adobe. The output plays well, but the conversion results in a file size that mushrooms from 400K SWF to a folder complex weighing in at 2.65MB. Most of this is because the animation is baked into an MP4 movie. And it’s beta. Still, this does not compare favorably to Sencha Animator, which produces an identical animation that loops (Captivate can’t loop swfs) at 126K. More on this, and a try at Wallaby and some other Sencha tools soon.

  • 0 Comments
  • Filed under: Tools
  • eLearning Without Flash

     

    For highly interactive content I recommend Unity3D. It outputs highly efficient, accelerated native apps for IOS, Windows, Android, and soon will support Flash Player.

    For more basic content equivalent to that created using Captivate, Articulate and other rapid tools, I recommend HTML5 Video as a preferred target for screen captures, and Sencha Animator or Corona for information display and simple interactivity.

    Adobe’s announcement that they are no longer going to build a mobile Flash player brought me back to when I learned they bought Macromedia. I wondered how long it would take them to ruin the culture that nurtured Flash into something more than an cartoony animation tool.

    Why was I so pessimistic? Because I knew Adobe wouldn’t treat Flash like their life depends on it (it doesn’t). Flash will probably go the way of Director – another authoring tool they acquired from Macromedia that became the “3D console game” development platform.

    Why is dropping Flash Mobile Player such a big deal when no-one really developed for that target (or at least ever monetized it)?

    • Flash is no longer publish-once distribute everywhere
    • AIR doesn’t generate efficient runtime bytecode
    • In Adobe’s vision of the future, mobile users will download and install an AIR app for every Flex and Flash RIA?
    • Flash Player 11 Mobile was supposed to be all about hardware video acceleration and be a game-change according to Adobe
    • I no longer trust Adobe, and resent the ding to my credibility as a (soon to be former) Flash eLearning/content developer.
    • I know a lot of developers feel the same way, further eroding Flash as a platform/ecosystem
    • There are better alternatives if I take a best-of-breed alternative route to developing content.

    Technical Training as Game

    The Monster Debugger Game

    The Monster Debugger Game

    I wish I had looked at this game before I had made the assertion that it contradicts: “learning games aren’t for technical training”. Learning is embarrassing sometimes.

    There are caveats behind my assertion that still stand, but lets ignore those and look at what makes the example I found work so well. For one thing the game supports the company identity. It also forwards their marketing agenda – it showcases their custom development capabilities and gets passed around as training for their debugging tool, which is their virtual calling card. Very smart people.

    roar

    Scare the block!

    De Monsters knows coders don’t want to waste their time when they are on a mission. They know their competition isn’t another game or debugger – it is the present challenge the coder is working on defeating in their own very important project. In more detail: Persuade me to drop my “coder agenda” of “assimilate, use and move on” and pick up my “gamer agenda” of “enter as hopeful newbie, invest time cycling through levels to get to the good part, have fun and learn something deeper about this debugger in the process.” What does De Monster get in exchange from me? Loyalty.

    Level Beat

    Level Beat

    What persuaded me? I saw that De Monsters loves their product so much that they poured a lot of that love and attention into their game through the aesthetics – this led me to trust them. I have to trust before I will let my self be a vulnerable newbie – I will not be insulted or made a fool of, even sitting alone in my Eagle’s Nest of Fort Awesome.

    Monster Debugger Help About Panel

    About Panel

    All well and good – does the game do a credible job teaching how to use De Monster’s Monster Debugger? In my opinion it does this exceptionally well. Progression through simple MathBlaster-like side scroll cave levels requires the use of the debugger and exposes the best features of the product along the way. There are surprises and the learner supplies part of the content, in terms of variable values that change level outcomes.

    Level Tip

    Level Tip

    Level Instructions

    Level Instructions

    Fun Trace

    Fun Trace

    Fun Method

    Fun Method

     

    The game is also a very effective functional demo. After completing a couple of levels I can already see how I can use Monster Debugger in ways I hadn’t previously considered, such as creating a reusable developer control panel outside of a game to play test in real-time. It is more than a debugger. The story neatly mimics the experience of the apprentice coder being led on a journey through obstacles without going too far. We all know what a blocker is, so why not have a block block your path?

    Was it worth it?
    In compensation for the investment of my time I received training, a new tool, some process change ideas and a really fun experience. This is how it’s done folks.

    Categories





    Finger Lakes, NY

    United States of America

    Enter your email address to subscribe to this blog and receive notifications of new posts by email.