About Being a Do'er

Taking Advantage of Google Docs

Thu, 28 Jul 2011 15:03:00 -0600

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

Mon, 11 Jul 2011 21:34:09 -0600

http://bit.ly/n31QFb

The world's simplest CMS

Tue, 21 Jun 2011 13:25:09 -0600

The world's simplest CMS:

In a single page you can manage infinitely deep heirarchy of content with almost no background in working with CMS tools.

Adobe's Renewed Push Toward Screen Independence

Fri, 06 May 2011 16:08:16 -0600

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

Tue, 03 May 2011 13:29:53 -0600

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

Thu, 24 Feb 2011 13:22:00 -0700

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!

f-ckyeahheadlines: Tea Party Member Talks Protest

Thu, 24 Feb 2011 12:57:19 -0700

f-ckyeahheadlines:

Tea Party Member Talks Protest

Web Site Review - Using Tag-Cloud-Style Navigation

Mon, 07 Feb 2011 14:09:21 -0700

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.

According to wikipedia at the time of this writing there are basically, three types of Tag Clouds (see full Wikipedia article):

“In the first type, size represents the number of times that tag has been applied to a single item” - This is more of a democratic style where users vote on how frequently an item (blog post for example) fits with a given tag.
The second type is basically, the opposite. It is a measure of the popularity of the tag (keyword of phrase) that is used. So in a blog, or web site, for example, a tag that is applied to many articles would be larger, or more prominent than a tag that is used relatively few times.
The third type is more about categories, where tag labels are groupings of content, and the categories with the most articles in those categories are more prominent. (This is more like the left-hand navigation found on the Indiana University Web Site)

What I found interesting about this site is:

1. Beyond the fact that the tag cloud in the ‘Navigate’ area on the left competes with the one on the right side labeled ‘Discover’; the site is using both hierarchical, and topical navigation.

2. The left navigation uses the categorical type of tag cloud while the ‘Discover’ area appears to use a random arrangement that is probably not driven by popularity or by usage. Both implementations are not fully executed tag clouds as they both appear to be rigid, but do a nice job leveraging the tag cloud metaphor.

3. While the left navigation area appears to follow along as traditional navigation and maintain state while visiting the links, the right-hand, topical, navigator is gone after those links are clicked.

The theory of using tag-based navigation has always been intriguing for me. The first place I saw anything like this was more of a mind-mapping tool called theBrain. These guys were about 10 years ahead of their time, but have a very interesting product. You can still see how this works at thebrain.com. Since then I have seen all sorts of implementations of tag-clouds, from user forum (bulletin boards) to wordpress tag clouds. These all can be very useful depending the volume of content behind them and the variety of content they catalogue.

Some of the drawbacks to these concepts are that they don’t seem to follow the user very well, and are often times implemented without much thought. I have some ideas about how to leverage this technique with regard to content management and user interaction. I will be posting future articles on this topic, and I will be experimenting with some code concepts as i go.

The real power behind using these tools is finding out whether or not they can really improve the user’s experience. With proper user testing you should be able to find out if users can find what they are looking for in less clicks or with less headache. Where are users of your site getting dropped off? Where might you apply techniques like these to your web content?

If you have a complex hierarchy in your site map, or if there is often duplicity in content within different sections of your site, your users may benefit from a tag cloud tool. If you have seen interesting uses of tag clouds, please share them here: I will follow up this article with more thoughts about how to improve on this concept and how to measure success of your tag cloud.

Is anyone going to actually use your web site?

Thu, 16 Dec 2010 19:24:00 -0700

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

SPAM Is Good, Or CAPTCHA Stinks!

Wed, 01 Dec 2010 14:15:26 -0700

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.

Giving Thanks To All of Our Clients For a Great Year

Fri, 19 Nov 2010 12:08:51 -0700

This holiday season we wanted to look back at our client list and send a thank you to all of the the companies we did work for over the past year. It has been a great year and we look forward to continuing to work with you long into the future.

THANK YOU!

Fusion Developers

Cybatrol, Inc. - view site

ServiceFirst Solutions - view site

FDIS Denver - view site

Wag Hotels - view site

Atlas Advertising - view site

Beabout Company - view site

Grand Peaks Companies - view site

Banner Property Mngt. - view site

The Cable Center - view site

My Wedding Workbook - view site

National Gift - view site

Robinson & Henry PC - view site

PGM Integrated - view site

Master Build Architects - view site

PRO Hardware - view site

Otten Johnson Robinson Neff + Ragonetti - view site

Refresh Energy Group - view site

Xylem Interactive - view site

Sexton & Co. - view site

What can FD do in the Restaurant industry? We have locations accross the country and need assistance setting up our mapping services.

Fri, 19 Nov 2010 11:43:21 -0700

We have a great deal of experience with Google maps integration as well as location database tools. We would be happy to discuss your planned updates with you.

CF Location: Pagination Using MSSQL and Coldfusion

Fri, 12 Nov 2010 11:00:15 -0700

CF Location: Pagination Using MSSQL and Coldfusion :

cflocation:

Pagination is such a common feature across the web these days. Anytime you visit a site with much content at all you will encounter it. If you are unfamiliar with pagination a good example site that uses pagination is digg.com. When you visit digg.com, scroll down to the bottom of the page and…

Get Integrated.

Fri, 12 Nov 2010 10:38:00 -0700

There are all kinds of services out there for integrating your content/services with the cloud. If you have a need for managing data, communicating with your customers, and gaining new leads - consider moving into the cloud. One way to define cloud computing is simply the use of existing public systems to manage the data you need to manage. “Cloud computing users avoid capital expenditure (CapEx) [in exchange for operating expenditure] on hardware, software, and services when they pay a provider only for what they use.” (wikipedia). The flexibility and pay-for-play style of intgration services can really get your campaign or IT solution off the ground quickly with very little risk.

Fusion Developers can help you build a custom solution and allow you to leverage free and SLC (super low-cost) cloud services that may be just what your strategy requires. As part of our service, we can pull together all of the most innovative technologies and help you to navigate all of the technical jargon to get you the right solution at the right price! Below is a quick list of some of the integration tools available:

Email Newsletter Integration

Constant Contact
Exact Target
Mail Chimp
Vertical Response

Shopping / Product sales integration

Shopping.com
Google Base / Froogle
Amazon
Ebay/Ebay Stores
Yahoo Stores / Yahoo shopping

Cloud Storage Solutions

Amazon A3
Google
Yahoo YQL

Mapping & GIS

FusionMaps API
Google Maps (v2, v3)
Bing Maps API
SimpleGEO

Electronic Commerce

PayFlow / PayPal
Authorize.Net
Paymentech
FirstData Gateway

Social

Twitter
Facebook
Tumblr
LinkedIn
Plaxo

To learn more or to get some help click over to our integration page

Why is User Experience Design Important?

Tue, 02 Nov 2010 20:25:00 -0600

A programmers guide to web site planning: PART I

When I start a project I always start with a programming road map. The same approach should be taken on the design and planning steps too. This planning process is generally called user experience (UX) design. The practice of UX is growing quickly as a premium agency service and often differentiates successful projects from those that fail.

To illustrate the need for user experience study and design I will use an illustration and a comparison using a great programming framework called Fusebox. Fusebox was created a decade ago and was inspired by the java struts framework for Java development. Fusebox uses a home electrical panel metaphor as a way define sections (circuits) and pages (fuses) in an online web site or application. It was developed to help programmers organize their thoughts and structure their programming in a top-down approach. As a programmer, I really thrive when I can think in these terms.

To further the metaphor of a web site or application as an electrical system, a closed loop circuit can be viewed as a round-trip process for your web site user. When a guest enters the room in your home they will interact with lights, electronics and the heating blanket (if they live in my part of the world.) When planning for your guest you will want to make sure that each item the room is placed appropriately. The switch for the lights must be just the right height and location so that they will not fumble around and trip over the bed. The clock radio should be placed on a small table next to the bed for ease of reach.

User experience design is the process of defining all of the necessary tools your web site guests need to be comfortable with your brand, and your product. And, as a programmer I will be WAY more effective if I know exactly what you need your application to say and do for your guests!

If you want to learn more about user experience design and our services contact Fusion Developers today.

Continue to Part II of this series:
Is anyone going to actually use your web site?

Nice Post About Building a Relationship with Your Web Firm

Fri, 15 Oct 2010 22:31:45 -0600

Nice Post About Building a Relationship with Your Web Firm

Why I NEVER use computed values in a database

Fri, 15 Oct 2010 17:49:35 -0600

Whenever designing a database, it is critical to keep a few things in mind. How you start your database design can make, or break, the performance, consistency, and reliability of your system. One of the more often made mistakes is that of designing computed fields into your database. Computed fields are those that are stored values that depend on the values in other tables or columns of the same table. How can that be so bad?

Unlike a spreadsheet, database field values cannot be based on a function such as =SUM(A1+B1). The static values in a table are separate and have no direct relationship. If a computed field has a dependency designed into it, there will be a field that it is dependent on. If one of the fields change and the other does not there will be an error in the system. If there is a way to prevent this type of error, than why do programmers continue to use computed values?

There are great opportunities to use computed values in many systems. The easiest examples are in an order total or a grade point average, for example. These are the types of fields that are easy to store in a single value for later reference.

There are good reasons to store these values for historic purposes, but what about the dependent values? The values that make up these numbers. I argue that these values are the fields needed. If we store both we immediately engineer fragility into the system. The only real value is the grade received, or the final product price and quantities, not the GPA or the order total. Those aren’t the real values.

I will write more about this in future articles.

by Bill King