About Being a Do'er

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.

 http://bit.ly/n31QFb

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

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

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!

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

A programmers guide to web site planning:  PART II

The next topic I want to talk about in this series deals with user analysis or persona development. (View part I of the series Why is user experience design important? here.)  Even more than planning out how the user interaction happens on a new application or web site, you must define who is using your new tool and what they are going to want to accomplish. 

There are many ways to determine who is using or will use your application and there are many ways to connect with these users to understand how they might use the system and how to design around those user interactions intelligently.  Before we dig into how to know who these folks are it is a good idea to figure out a good way to categorize users in general and decide how important these factors are for YOUR particular need.  Some examples are age, and affluence.  These are important definitions when determining how your users will access your system - will they be using old technology to access your site, or will they be on the cutting edge?  Will they be mobile users or usinging mainly corporate PCs in an office setting?

A different factor in determining your sites interaction needs are in the industry or market your product or service lives in:

• What type of buyer are your users?
• Who buys when others don’t
• How long before a purchase decision is made?

If you have a product or service that requires a great deal of investigation by your users, or is complex and requires more time for purchase decisions to be made your user experience may be dramatically differant than that of a product that is simple and packaged for immediate use.

After determining who your user is, and how they interact with your product, you will want to determine where your user is coming from and how that may determine their mood or their readyness to purchase.  Many of these things can be determined by sifting through Google analytics reports or other online resources.  You will want to use data from online submission forms asking for ‘how did you hear about us’ information.  If your existing web site does not already have these resources I would suggest contacting your programming folks and get these added immediately (or - plug - contact Fusion Developers for some assistance.)

The art of understanding your user base is NOT trivial.  There are many resources and tools available and the industry surrounding User Experience design is booming.  When planning your new system - don’t forget who you are building it for!

by Bill King

For the last four, or five, years I have been called on many, many times to add CAPTCHA to forms.  For those of you who don’t know, CAPTCHA is the image graphic with letters that are obscured so that a machine can’t submit your form.  This is a great move if your form is for purchasing something, or logging in, or creating an account.  The problem is that this clever little widget is overused. I argue here that adding a CAPTCHA function to your company Contact Form is just a bad idea.

First, as the web site owner you generally don’t have control over the message. Performing a Google search on “funny captcha” will give you some idea of what can happen to even big brands, like Facebook, Coke, and Google. There are web sites dedicated to submitting funny or awkward CAPTCHA messages.  The point is, you don’t want to see your brand associated with embarrassing messages that your site users post.  Viral marketing can (sometimes) be very bad!

Another reason to stay away from adding a CAPTCHA function to your contact forms is that they can be hard to read and may hinder your potential client from submitting the form at all.  If I am providing a service in a competitive market, I do not want a customer that found my contact form to turn away simply because they couldn’t enter the code.  

The last reason is probably the most controversial because you installed CAPTCHA to get rid of SPAM in the first place.  I say, embrace SPAM, if you are getting submissions to your form that are entered by a spam-bot or automated service, congratulations! You just got free testing, how else can you get random testing and submission of your online form.  If you are getting your notifications via email than you know it is working!  Now hit the little delete key.  

I’m serious, unless you are getting 100 spam emails a day from your form, or there is some integrated tool that is being broken by invalid customer requests, just let it go.  You will not turn anyone away from frustration and you won’t be splashed up on a joke web site with some phrase like “u s afu” or much worse.