Laid out below is a set of simple instructions as well as fla’s and swf’s which I developed that you can use to show your Google Analytics visitor overview report to drive potential ad revenue, give clients an easy way to see their own analytics without logging into Google, or any other positive reason. The method takes only 3 steps to setup and upload so it takes only about 3 minutes to complete this process.

Click Here to see a sample report!

STEP 1. Log into Google Analytics and get the “visitor overview” report. — The visitor overview report can be gotten by logging into Google Analytics, clicking on the “View Reports” for the desired site, and finally clicking on the “visitors” link in the left-hand navigation once you have chosen the site. Once you have clicked the visitors link you should have in front of your a page titled “Visitors Overview with three options below (Export, Email, and Add to Dashboard). Click “Export” and you will be presented with 4 different ways to save your report. Choose “XML” and save this file to your desktop as “visitors_overview.xml”. It is important that you save the file with this name as flash will look for that specific file name when it loads the data.

Side Note: To make this process more streamlined, Google Analytics can email you this report on a set schedule which you decide….to do this simply click on the email link and click “schedule.” This means that you’ll never have to log into Google Analytics to retrieve this report again.

STEP 2. Getting the flash files to display the data:
Select the appropriate flash file. Each file comes zipped with accompanying sample XML document.

Complete Summary – Download Here | View Sample
Site Overview Only – Download Here | View Sample
Page Stats Only – Download Here | View Sample

Lastly, simply embed the flash file in a web page and upload that with your “visitors_overview.xml” document in the same directory and you’re all set!

Get the FLA File!
If you feel like you can do a better job with this flash file, want to modify it, customize it, or just want to see how it works, click here to download the source fla file and enjoy.

Legal stuff below.
*The files on this page are released under no copyright whatsoever so feel free to do whatever you so choose. Please note that these files also carry no guarantee and owner is not liable for any damage that might be caused by usage or downloading of said files.

ShareThis

Take a look below at a set of RSS icons I created for free public use for my fellow web designers/developers. You can download a zip file containing an EPS version of the artwork as well as a high resolution jpg.

Click here to look at a low-res version of the icons.

Click here to download the zip file containing the artwork

Click here to download just the high-res jpg (if you’re in a hurry).

ShareThis

For all of you who still do not follow this method of content display management, here’s a quick example of how your pages can improve with the use of this technique. Take for example this fictional page that I created in Photoshop. This page does not use divs to hide extraneous content. You can clearly see how long and difficult this page can be to navigate if you are looking for little tidbits of information or just scanning the page for content.

This next page uses div pop-ups and content hiding techniques to remove any information that might not be necessary for initial reading purposes. This helps the reader to find their information quicker as well as improving the overall structure of the page.

Lastly, do use div pop-ups instead of the standard Javascript window.open pop-ups as they are less intrusive on the user and are able to be branded with the look and feel of the website instead of the generic windows or mac alert box. In addition to using this technique, it is becoming more standard to dim the background of the page as to bring the attention to only the alert box…click here to see how this looks in our previous div fictional page.

2. Using a javascript library such as script.aculo.us instead of flash for content animations.
When creating simple animations including text scrolling, image fading, or any other sizing or fading animation, it is more efficient to to use a Javascript library such as script.aculo.us instead of adobe flash for several reasons:

1. No need to republish swf file or edit external text documents – all text content is contained within the web page. This means that the web developer can update and maintain the web site with very little effort on his part.
2. Many corporate intranet systems and highly secure sites do not allow for the flash plug-in but do allow Javascript.
3. Easier back-end integration with server-side languages and databases – when dealing with database queries, use these libraries to hide and display query results is highly stylized fashion without the necessary constant update of a flash swf file.

   The following is a case study example of the time and effort saved if one was to show products and their information on an e-commerce site with a Javascript library as opposed to using flash. This image show a standard products page which could be populated with either server-side code or a flash movie. Let’s say that each box containing a product fades in as the content is loaded onto the page…well, you can either code that fade effect onto the page using a simple sniplet of sriptaculous “Effect.Appear “ and use simple table rows to populate the page OR you can code an entire flash movie with transitions, figure out the coordinates, sizes, etc, etc which would triple the development time. What if you want to change the type of transition or change the size of your thumbnails? Again, using Javascript you simply change the effect once in the code and you are done unlike going into the flash movie and repositioning everything and changing the transitions, etc.

Click Here to learn more about script.aculo.us.

3. Performing all server-side form validations with Ajax.
When sending information back and forth between the page and the server as in a login process, use Ajax instead of page redirects to simply the user experience as well as providing easier navigation and error checking. One of the most annoying experiences is filling out a long web form, submitting and redirecting back to the form where all the information you just entered is empty.

By utilizing Ajax and the XMLHttpRequest object the user never leaves the page and all information is kept intact. This method also allows the developer to create multi-step forms on a single page furthermore facilitating the user experience on your site.

Click Here to see an example of a demo multi-step form that I threw together that uses Ajax and PHP to determine username validity.

4. Using a live-search on your site when possible.
Live search is only starting to make it’s way into web sites but already has been an integral part of Firefox for quiet some time via the search bar in the main menu. I understand that for smaller sites and sites with little content, a live-search component might not be necessary but in any blog/news site, I believe that this type of search would greatly facilitate the browsing experience of the user.

Here are a few details/suggestions you should keep in mind when developing a live-search component for you next web project:
–If your site content is database-driven and you receive a lot of hits on your site, chances are that your database server is already busy doing it’s job….so, when creating your live-search component, try to limit the number of times you send requests to the db server, otherwise your site will slow down because your db server cannot keep up with the demand.
One way to get around that is to spider through your site and get an index of keywords pertaining to each page…there are a lot of spiders out there that you can download that will transverse your site and output keywords per page….you can store that content in a flat text or XML file and use that as your live-search keyword repository instead of actually querying the database every time the search input box is updated.

Another way is to create a keyword index for all the pages in a separate table on your database. That way the db server will only query a list of keywords instead of a whole lot of text stored as your page content. This will dramatically cut down the load on the server as well as speed up your site.

Another important point to remember is how the user will utilize the live-search component…let me explain. There are several different ways in which you can display the live-search data on your page. Click here to see couple of different ways live-search results can be displayed before reading these next few sentences as what I say will make more sense.

From the image you can see I have presented three different ways to utilize a live-search component. The first and most rudimentary type is a simple search that displays a suggestive keyword and what page this keyword appears. This type of search is most beneficial to a site with little content or content which is relatively consistent throughout the entire site.

The second live-search box is a little more robust and displays words which precede and follow the keyword the user is looking for. This type of result is more helpful to the user as it gives him/her context information about the keyword furthermore increasing the likelihood of the user finding exactly what they need.

The third and final live-search box displays suggestive keywords based on the initial keyword which is typed in the search box. This type of search can be fully utilized on a site which has products or services which different names and descriptions but still fit into the category as a whole… e.g. If you own a car parts store and a user is looking for a Michelin tire, you might also want to suggest a Good Year tire or suggest different sizes of a Michelin tire therefore decreasing your time-to-purchase on your site and increasing your rate of profit.

5. Using PNG-24 images…the correct way.
Even as I write this post, I feel that many developers are still afraid of using png-24 images in their sites. The two main factors of this are: png-24 images are not natively supported on IE6 or below and png-24 images are quite larger than standard png-8, gif, or jpg files. That said, I will now try to convince if you use these files correctly, both of these main obstacles can be overcome.

Issue #1. Png-24 images are not natively supported in IE6 or below.

If you want to display png-24 images in your design properly, you need do add a special filter to the CSS class…here’s a simple background class with this filter:

.background{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/header.png’, sizingMethod=’scale’);
}

Please Note:That this CSS style will not overwrite a previous background-image style with a new background image in Firefox and other browsers, it will simply add another image on top of the one below, thus you will have to have some sort of script that loads this style if IE6 is present. I usually have 2 style sheets and run a php or javascript script that redefines the background class like this if IE6 is the browser:

.background{
background:none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/header.png’, sizingMethod=’scale’);
}

One other drawback to this method is that you CANNOT repeat the background image using the filter…therefore, This method only works if the png-24 image is a fixed size image that will not be used on page where the background height might change.

Issue #2. Png-24 images are too large to use efficiently.
Done correctly, you can use png-24 images as background images with drop-shadows and glows…here’s an example of how to do it the right way. Below you will see a header image in png-24 format with a drop-shadow.

If you were to export the image from Photoshop in this condition, it would be almost 158kb! Now here’s a way to do it to save a lot of kbs. First fill-in a rectangle in the middle of the image but be careful not to fill-in too much so you can later place a rectangular picture inside. You can see the image below.

This png-24 image is now only 20K!

Your next step is you use this new background image as a background-image in CSS and simply put the part that you filled-in as your content and you’re all set! Click here to see an example of this process (only 52KB and works in FF and IE7).

I hope you enjoyed this post and if you feel like I missed another big tip, drop me a line or post a comment and I’ll do a follow up with more useful tips…thanks!

ShareThis

That said, for all of you developers who have not yet dabbled in the art of Adobe AIR, I highly suggest you do soon, as it will become a standard skill in the not-to-far future. I had some time last weekend to download the runtime environment and the flash and dreamweaver extensions and now am working on my own AIR app.

I gotta tell you that I’m quite impressed…not only does it allow you to create the same high-level applications, but now your web-applications can be deployed to any desktop so you are sure everyone will use, view, and experience your application the way you had envisioned. No more worrying if the user has the latest plug-ins or if their browser is up to date.

With all that power and control in your fingertips, why would you ever again want to develop rich internet application without AIR? Browsers will still hold their position as a place to serve data and other general information, but for the really cool stuff, I don’t see a way in which the browsers can keep AIR out of the market, or even inhibit its progress.

If you want to learn more about Adobe AIR, please go to the official AIR site at www.adobe.com

ShareThis

What AMFPHP does is provide you with a gateway from which flash can call php functions, retrieve database data, use other APIs such as flickr, and google, and format the data, all with only a couple lines of code.

I seriously suggest that for all those that have not yet tried AMFPHP, please do so because you’ll be surprised how easily and quickly you’ll be up and running with your dynamic flash/database applications.

The official site of AMFPHP is www.amfphp.org

ShareThis

1. www.osflash.org – A website that hosts many open source flash projects ranging from command-line tools, actionscript libraries, compilers, etc…just about everything you would need to accomplish any task with flash or a combination of flash and other server-side languagues….highly recommend by me….definitely check it out.

2. www.sephiroth.it – Another great resource for flash (especially for high-end solutions to problems, many concentrated around amfphp. If you every get stuck with a tricky situation, definitely try this site as one of your first.

3. www.flashkit.com – Another great resource for flash developers with tons of movies, components, audio files, as well as a very rich forum of members.

4. www.adobe.com/devnet/flash – adobe’s own development site for flash developers…you’ll be surprised how much information you can actually get from this site. Come on, who better to go to with flash development issues, than the company who actually creates the software.

5. www.flashden.net – An indispensable site for anyone working on a flash project under tight deadlines…this site is full of working flash files, audio, etc. that is production-ready out of the box…definitely give the site a shot…at a couple bucks a pop, you just can’t go wrong.

ShareThis

Then as the program matured, it added actionscript 1, and then actionscript 2, and so on. Now, being in its CS3 version with actionscript 3, I have noticed that I use flash less and less for animation purposes and more so for web-based programs and software. I believe this is because flash has matured to the point where it’s no longer an animation package, but more so a development platform to be distributed through the web – one could even think of it as the visual basic of the online world, where any developer has serious tools and now with as3 being a clone of java, a mature language with which to build his/her robust web applications.

One major aspect which made flash so desirable initially was the ability to pass data, back and forth without the need of refreshing pages. Now with the increase usage of AJAX, that problem has essentially been terminated thus again, relieving a necessity of flash or rather more so a burden when one thinks about the speed and efficiency at which changes can be made to AJAX applications as opposed to flash-based ones. Even more so, with RUBY getting more and more attention along with other quick-deployment platforms, the need for flash is once again fading into an afterthought. Furthermore, new Javascript animation libraries reproduce much of earlier effects that were only done in flash with greater ease of use and shorter deployment times.

From this, one can see how flash has changed its role in the online world from a simple animation package to a very robust development platform which will only increase in its complexity as time passes.

After all this is said and one, we now get to the rebirth part of the article. With everyone pushing for web 2.0 standards and even starting to speak about the future of web 3.0, flash will soon start to play a different role, not any less important, but completely different. With the not so recent addition of Adobe AIR to its product lineup, adobe is trying to push the web 2.0 development into a completely Rich Internet Applications (RIA) field where different types of browsers won’t matter, as a matter of fact if the web continues to progress the way it has in the last couple of years, browsers will become obsolete in the next 8-10 years because if the concept of RIAs becomes absorbed by the masses, everyone will be viewing the Internet through these applications and not browsers.

This brings me back to flash. Behind this new wave of cool Internet apps and tools, flash will be playing a critical role delivering rich content through a desktop-like environment. We will see a merging of technologies where the web will be more intuitive then ever and easier to manage. You will be able to download web applications for sites that run on a combination of technologies to bring forth a new exciting way to browse the web, what what’s a better way to deliver rich content than to have the most robust RIA software on the market working alongside javascript, and other server-side languages?

ShareThis