Detecting Mobile Device For Your Mobile Traffic

Now that you have your shinney new mobile site (click here if you don’t) it is time to redirect your users to the new website automagically when they visit from a mobile or touch device.
To detect if a page request is from a mobile device, examine the user agent string sent with 
the request. The user agent contains certain keywords unique to each mobile browser, and 
the existence of these keywords indicate the page was requested on a mobile device. Some 
common mobile device keywords:
  • “iPhone”
  • “Android”
  • “iPad”
  • “BlackBerry”
  • “Pre” or “webOS” (for Palm devices based on WebOS like the Pre)
  • “IEMobile” or “Windows CE” (for Windows Mobile devices).
Finding the request agent if fairly simple.  Here are some code snippets from popular languages to detect the request userAgent value:
  • C# - Request.UserAgent
  • Groovy - request.getHeader("User-Agent")
  • ColdFusion - #HCGI.HTTP_USER_AGENT#
  • PHP - $_SERVER[‘HTTP_USER_AGENT’]
  • RoR - request.env['HTTP_USER_AGENT']
Using a regular expression is an easy way to detect a mobile device.  In C#, the following code will return true if the user agent contains any of the above keywords:
bool isMobileDevice = Regex.IsMatch(Request.UserAgent, “(IEMobile|Windows 
CE|BlackBerry|iPhone|Android|Pre|webOS/)”, RegexOptions.IgnoreCase);
Good luck!

Taking Advantage of Google Docs

I have had some great experiences with Google docs over the last few days.  Those experiences lie in three categories:

  • The Document Table of Contents functionality
  • Drawing Tools
  • Document Templates

I have been using Google documents forever…since the Writely days.  Since then Google has been working hard to continuously improve these products.  I really dig the fact that I can always come back to my document list and organize them in all sorts of ways to find old documents I have created in the past.  

Until recently I used Google docs in a more casual way, even though it always gave me good results.  Now i am using it exclusively.  This means that I need to start to rely a bit more on some of the advanced formatting and shortcuts that are available.

Tables of Contents

In a Google Docs Document I had never really made use of either the Table of Contents feature (found in the Insert menu) or the formatting drop-down.  After formatting a few of my headings in a new requirements doc, I experimented with inserting a Table of Contents.  Low-and-behold my Headings appeared in an outline mode within the table of contents box.  This is a great litle feature as it can be inserted anywhere in the document.

If you are having trouble with the Dark, Bold, Arial font that the Formatting drop down gives you, it is okay to reformat these headings as they will retain their position in the Table of contents.

Drawing Tools

I am just getting started with the drawing tools as well, and I am using them to create a new wireframe for a website design I am working on.  I am not likely, going to dump my drawing out onto a pdf and hand it over to the client to sign off on, but I am going to be sharing and revising the document with a designer who will re-create a final version in a more professional template.

Production quality asside this method should really help to make the process much smoother and interaction level much higher with my designer and any programmer resource that I may want to pull in at this phase.

Document Templates

In a new role, I am leading a team into the Agile/SCRUM style development methodology.  I have enough experience in this area to know that tracking my team and proving the outcomes will be a big part of being successful here.  In order to do this I will be relying on my Trusty Google Docs application and templates that I have discovered through the Template Gallery.

Above the list of documents in your home view you will see a link labeled Browse template gallery.  There are a great deal of resources here and the, always present, Google search to find what you are looking for.  There are also categories to browse templates that may fit your line of work, or personal activities.  Buried in each of these categories you will find Gold.

I would love to hear feedback from users that have found templates that have helped out their work, budgets, project managemet, excercise routine… whatever.

Take a look at Google Docs again…I’m pretty happy about what I see.

A nice guide (especially for clients) for the 8 steps in a web design project

Adobe’s Renewed Push Toward Screen Independence

The headline on my email from Adobe today reads “Build for multiple mobile platforms using a common code base.”  (http://www.adobe.com/products/flash-builder.html)

Since the National Association of Broadcasters conference where Adobe announced the launch of Creative Suite 5.5, I have been very excited about some of the new integration updates to their products.  On the Flash Builder front it is the annoucement that

"Flash Builder 4.5 includes full support for building ActionScript® applications for Apple iOS."

and

"Flex support is planned to be available later in 2011."

Also exciting in the HTML & Javascript side, is the integration of PhoneGap into Dreamweaver.  PhoneGap is the utility used to convert javascript applications into iOS applicattions as well.  With updates to Dreamweaver CS 5.5’s support for PhoneGap, jQuery Mobile, and WebKit we are seeing Adobe’s strategy in REALLY allowing developers to “PROGRAM ONCE and PUBLISH EVERYWHERE.”

To learn more about the updates here is a post from the Adobe blog: http://blogs.adobe.com/conversations/2011/04/introducing-adobe-creative-suite-5-5-product-family.html

I am really excited about these updates because it means I (hopefully) don’t have to learn all new syntax to be able to build mobile apps for my clients, and I can begin to expand my audience into the really huge market of mobile users.

~ bill king

Using Flash swfObject Library and Layering Content

I recently was presented with the challenge of integrating some Adobe Flash-based content into a design that required static imagery and other HTML content to show visible ABOVE that content.  Whether it is because I didn’t use the appropriate search terms or this topic has started to become a bit stale, I found very little help from my web searches with Google.

I was able to piece together quite a bit of missing knowledge, though, in the quest to solve this problem. 

I knew that with other content in HTML I could easily layer images, divs, and other elements by incorporating the css z-index property.  Here is a quick example of its use:

#header {
position: absolute;
z-index: 2; 

Note that the z-index property will only be parsed by the browser when it is accompanied by the ‘position: absolute’ setting.  The above css will place any items having a lower z-index value below this item in the view stack, and any items with a higher z-index value above it in the view stack.  (Think of a stack of pancakes with the bottom pancake representing z-index:1 and pancakes above being counted up as they stack.)

That part, to me, was easy as I had done this type of work with image files many times in the past.  I found, however, that this method did not immediately work with my flash file.  The flash plugin likes to layer over the browser to look like it is part of the browser window, when in fact it is a separate application from the browser (that’s why we need tags like <OBJECT> and <EMBED>.)

Since it is the case that the flash player is separate from the HTML pane in the browser, there needs to be some intervention, and the way to do that is with Javascript.  The preferred method is with the Javascript library swfObject (now in version 2.2 and the project is hosted through Google code.)  The project web site for swfObject has quite a bit of documentation and goes pretty far into how to implement flash using this library, and I highly recommending working through the documentation to know what is going on here.

The issue I ran into, however was that I was unable to figure out how to get the layers to work together with my HTML.  I had read on many other programming forums and other blog posts that the trick was to not only get the DIV into my stack of pancakes correctly, but also to add the transparency mode to the flash object.   Since the swfObject functionality inserts the embeded flash movie file into the view after the HTML is rendered we can apply attributes to the flash embed code through the swfObject instance.

Here is the Javascript for the addition of the transparency attribute:

<script type=”text/javascript” src=”/js/swfobject.js”></script>
<script type=”text/javascript”>
var flashvars= {
sourceUrl:”mywebsitepage”
};

var params = {
wmode:”transparent”
};

var attributes = {
id:”myMovie”
};

swfobject.embedSWF(“/swf/myFlashFile.swf”, “destinationDIV”, “width_in_pixels”, “height_in_pixels”, “version_number”,”/swf/expressInstall.swf”, flashvars, params, attributes);

</script>

Notice there are three areas where you can place flash variables (anything the SWF file needs to receive from the web page,) params (anything of the parameters that can be applied to the Object tag, ) and the attributes (define the Object tag attributes.)  The one to note here is the param labeled ‘wmode.’  Setting this value to transparent allows the magic.

The great thing about using a library like swfObject is that this code can be very flexible and you can depend on the BEST cross browser support available for your work.  For any further details about swfObject and code examples visit the project at http://code.google.com/p/swfobject

Creating a Simple User Log with ColdFusion

I needed a quick and dirty way to log users to a page on one of my sites.  It was easy enough to do with Adobe ColdFusion, and I am sure this can be modified and done just as easily in other languages.

STEP 1: Create an empty text file Called userlog.txt
This file would be best located in a secure (non-web accessible) directory, but for simplicity I am placing it the same directory as the page that will be tracked.

STEP 2: Define the log string 
This is the string of text that you will want each time the page is read.  It should be placed in a conspicuous location on the ColdFusion file that you want to track. The string should be comma-delimited so that you could open your file in your favorite spreadsheet program.  You can customize the columns that you would like to track but here is an example:

   pagename, [optionselected…,] user IP, date/time

You can also record things like your user’s browser and OS information. In the third step (below) this line will be written to your log file each time the page is loaded, so it should stay relatively simple.  Here is the code I used:

<cfset UserLogData = ‘landing page 1, ’ & form.optionfield & ‘, ’ &  
   cgi.REMOTE_ADDR & ‘, ’ & DateFormat(Now(),’mm/dd/yyyy’) & ’ ’ &
   TimeFormat(now(),’hh:mm:ss’)>


STEP 3: Write the log string to your log file.
Now that you have the values that you want to write to your log file (written to a variable called UserLogData) you simply append the new log string to the file you created in STEP 1.

<cffile action=”APPEND” file=”#ExpandPath(‘Userlog.txt’)#”  
  output=”#UserLogData#” addnewline=”Yes”> 

You will now be able to download this file and view in your favorite spreadsheet program at any time.    I would suggest deleting the contents of this file regularly, since it can fill up pretty fast.

Good Luck!


Web Site Review - Using Tag-Cloud-Style Navigation

After a friend of mine recently shared an interesting web site with me that used tag-cloud concepts for navigation, it gave me a good opportunity to write my next post. The site I am reviewing is the School of Informatics and Computing: Indiana University Bloomington

If you are viewing the site (hopefully, in a new browser window) you will notice on the left panel labeled ‘Navigate’ and the right panel labeled ‘Discover’ there appear to be a random arrangement of words or topics in varying font sizes. These link arrangements are commonly called tag clouds. Generally, users can associate larger items with higher import, and smaller items with less.

Read More