It was necessary for my well being in recent weeks to learn as much as I can about the Swiz micro-architecture for Adobe Flex.  Lucky for me I had a simple Flex app sitting around just waiting to be converted from a giant mish-mash of mxml and ActionScript 3.0 to a nice, well organized micro-architected piece of software.  After much trial and error and gnashing of teeth, a successfully compiled application written with Swiz emerged, and is now posted for the enjoyment of whomever enjoys cats and coding.

A few caveats to remember when viewing the app and its source:

1. The source is not exactly 'code-complete' - I'm sure there are bad practices in spades.  Kind criticism welcome.
2. There is no real service call made by this app.  Rather than throwing my Petfinder.com API key out for everyone to gawk at, I'm using a static XML file that was spit out by a previous API service call.
3. This is currently using a beta version of Swiz 1.0. 
4. This was originally written with Flex Builder 3, but ultimately released with Flash Builder 4.
5. I had help.  Thanks a million to Jordan Sanders for a few handy pointers and putting up with my questions.  Also, thanks to David Tucker, Ben Clinkenbeard, Brian Kotek, and Richard Lord for instruction and examples.

PETFINDER APP DEMO  |  SOURCE CODE

If people actually look at this post and are interested, I may be inclined to add more explaination, do follow up posts, develop the app further, etc... If you are interested in using the source code for whatever purpose, go right ahead.

 

Who: The House of Mews in Memphis, TN

What: A brand, spanking new website built from scratch.

Why: The House of Mews proprieter often complained that it was too difficult to sort through the hundreds of emails generated from forms on the old website.  It was also a pain for vounteers to update the adoption listings.  To view a list of available cats, site users had to navigate away from the House of Mews site and onto petfinder.com  Drupal 6 and Adobe Flex fixed these problems, and then some.

How:

Drupal 6 was used to convert the old HTML site to a CMS.  Also, site visitors can now register on the site to submit rescue requests, and rather than having that info clog up the email inbox, it goes into a searchable list (thanks to Views and CCK).

A similar method is in place to accept volunteer applications, but since these are rare, email notifications are sent out whenever one is completed. This was done with the Rules module for Drupal 6.

The real-time cat browser on the homepage pulls in data from Petfinder.com and creates an easily navigable listing of adoptable cats.  Volunteers who are used to uploading cat information to Petfinder don't have to learn new software, and site visitors no longer have to leave the HoM site to view cats up for adoption. Win!

The cat browser was created with Adobe Flex 3.  It was amazingly simple - in fact, it was the very first Flex/Actionscript app I've ever created.  FYI - I'm currently converting this app to use the Cairngorm framework, and will be releasing the source code on this website some day.

So I'm currently working on a project for the House of Mews in Memphis, TN.  It's a volunteer project, and kind of a long story on how I got wrapped into it - so I'll save it for another time.  Anyway, a problem I've run into is how to effectively communicate ideas to the House of Mews proprietor.  Using words like content management system, web services, and flex app only draw blank stares.  Bumbling through a long discription of site features elicits some nodding, but the only response I get are questions like, "Can we keep the same music from the old site?"

Argh.

Enter Balsamiq.  The folks at Balsamiq Studios were nice enough to give me a free license since I'd be using it for a non-profit project.  I can't be more grateful.  This app blows visio out of the water.  It's so ridiculously easy to use. I cranked out a handful of wireframes in about an hour.  Since it's all drag and drop, it appeals to the whole 'instant gratification' thing.  And when you're done, you have this neat drawing that looks like you drew it yourself on a piece of paper.

Showing this to the 'client' avoided comments like, "that's the wrong font," and "that shade of red needs to be lighter."  Instead I get, "Ohh, so you can click on the little pictures, and the cat's bio appears. Great!"

Smile.

Here's an example of a 'first draft'.

Neat, right? Too bad it looked like crapola when I built it.  So I started over.  After shuffling things around, adding new ideas (and subtracting new ideas), I wound up with this - the mighty 'work in progress'.

Go try Balsamiq.

 

Problem:  Artists Link needed a website that included a member directory that listed its members in alphabetical order with thumbnails next to each person.  Clicking the person brings up the bio, with a full size pic.  Additional pics are optional.

They also needed the usual organizational website stuff, like info pages, news and events, and contact us.  All of this had to be woven together in a nice tidy package that is dead simple to edit and update.

Solution: Drupal 6 with heavy use of CCK and Views.  Big thanks to the Color Wall theme. Views Slideshow provided the nifty image cycle on the front page.  It randomly selects images from each persons profile and prominently displays them on the front page.  Since the Member content type and member list view were already set up, all I had to do was install the Views Slideshow Module and toss a slideshow in a block.  Easy!

ImageCache saved me tons of effort by creating 3 different sizes of each profile pic.  Combined with lightbox2, ImageCache is pretty darn powerful.  All sorts of clicky functionality can be applied just by uploading one pic. Neat!

 

A great way to get a blog or simple website up and running very quickly is to use Wordpress.  Blogging couldn't be easier when using Wordpress, as it provides a handy interface for writing and categorizing posts, adding features via widgets, creating RSS feeds for syndication, and allowing for static pages.  Another insanely useful feature is the ability to change the look and feel with the click of a few buttons using themes. Themes allow your blog or site to take on a look of its own.  There are literally thousands of Wordpress themes available for download. Many (most, even) are available directly on the Wordpress website.  Searching Google for wordpress themes will get you a few million results, but many websites simply repost the free sites available on wordpress.org and wrap advertisements around them.  Premium themes are also available for purchase at many places, but again, some sites are more reputable than others.

My very first project was for my very own mother.  I created a site for her a very long time ago in Macromedia Fireworks (I think), and it fit the bill for a number of years.  However, it was impossibly difficult to update for her, and a real pain for me.  The time finally arrived when a new solution was needed.  Luckily, I recently learned the ins and outs of Wordpress, and found a nifty little plugin called NextGen gallery.

A little over two years ago, I signed up for a reseller account with HostingZoom and I'm very glad I did.  I don't host very many sites, but the ones I do host pay for my own sites, as well as some non-profit sites that I host for free.  Not only this, but my friends are getting a better price for the same service than they normally would with their own shared account.  Confused?  Too good to be true?  I'll explain step-by-step how to host websites using WebHost Manger (WHM) and cPanel software available from most webhosting companies that offer reseller plans. (Video tutorial included) This article assumes you already know what a little bit about web hosting.  For example:

• You have set up a website once or twice before on a web server
• You have used cPanel
• You know what a domain name is, and how to buy one

If all of these statements are true, then there is no reason you can't sell hosting packages to your friends, family and clients.  Follow the steps below, and view the video to get a solid idea of how this is done.

Everyone's seems to be head over heels about standards based HTML/CSS these days.  Web designers and consultancies all seem to tout their ability to create standards compliant and accessible sites.  You just can't use deprecated tags, and you must separate content from presentation if you want to be a high class webfellow. I remember way back when <center> and <font> were considered perfectly good HTML tags, but today web developers  scowl at these tags like a half eaten egg-roll in the buffet tray - it just shouldn't be there any more, and anyone who considers partaking is icky.  Time to get serious and learn the correct way of doing things...

It's been said that blogging is an essential step for boosting your career prospects these days.  It can be a supplement to your resume, a good way to keep in touch with folks in your industry, a way to tout your knowledge, or gain deeper insight into topics you (think you) know about.  Business minded people say blogging is a way to 'brand' yourself, or market yourself to employers, clients, partners, friends, or whomever.  Whatever the reason, I decided that I needed a career blog.  If you make the same decision, here's an easy way to get started...

1. Make a list of your favorite blogs (at least 5) related to your career. Read these often to get inspiration, and to see how blogging is done.  You can see a few of my fav's in my Blogroll.
2. Learn about career blogging. Penelope Trunk offers some great advice and reasoning for starting a blog.  Dan Schwabel is a proven 'self-promoter' and recommends blogging as an essential career tool.  I saw Dan speak in person in Boston, and although I think his technical ability is a bit lacking, he definitely knows his stuff when it comes to self promotion and personal branding. His entire website has plenty of useful tidbits to think about when promoting yourself online.  Also, there is a free eBook from Rockable Press called, Rockstar Personal Branding that is worth checking out.
3. Pick a name. Buy that domain. You'll need an address for your blog.  Forget about free blogs like eric.blogspot.com or ect203093.wordpress.com - they are as unprofessional as you can get.  At the very least, you'll want firstnamelastname.com, and perhaps .net, .us, and .org as well.  There's much to think about when buying a domain name (or names), so check here, here and here for some useful advice.  Once you decide on a name, go to a registrar and buy it!  I've used name.com and GoDaddy to register domains.  They are both about the same price, and have similar features.  GoDaddy has pretty good telephone support, and you can click here to save 10% at GoDaddy.com.
   
4. Get a web hosting account. Websites live on web servers.  For a small website, you generally want to rent a small portion of a server for your website.  This is called 'shared hosting'.  You pay a small amount per month for a certain amount of space, bandwitdth, and software on a professionally configured web server.  I recommend HostingZoom (I’ve used them for years).  I've also had good experience with Dreamhost, and heard good things about Lunarpages, Bluehost, and HostGator.  Go to one of these sites and sign up for their basic linux plan.  They all have Fantastico, which easily allows you to install Wordpress (among many other great webapps).
5. Learn about Wordpress and install it. After you sign up for hosting, log in to your web host account's Control Panel (cPanel). Find the Fantastico Icon, click it, then follow the onscreen prompts to install the latest version of Wordpress.  Here's a easy video that shows you how, and here's a more comprehensive video.  If you're wondering why you need to buy all this stuff just to use wordpress instead of using wordpress.com, the answer is freedom and flexibility.  With wordpress.com and other free blogging sites, you are limited in what you can post, the plugins you want to install, and features you can use.  You often have to pay extra for 'upgrades' such as a custom domain name, and widgets for your blog.  With your own hosted installation of Wordpress, the sky's the limit!
6. Get a new theme.
   1. Find a theme and download it. Tons of free themes are listed on wordpress.org. Find one to your liking, and click the download button.
   2. Learn to use FTP. An FTP program will transfer files from your computer to your web server (which is where your website lives).  Download FileZilla if you don't have it already - it's a free and open source FTP program for Windows, Mac, and Linux.  Type your site name in the "Host:" box, then your username and password in their respective boxes, and use Port: 21, then click the Quickconnect button.  You should connect to your web server and be able to see all the folders and files.
   3. Install your new theme. You must copy the new theme's folder to /wp-content/themes/ on your web server, then activate the theme from your Wordpress administration menu (click "Design" then "Themes").
   4. Watch this video if you need help.
7. Write an About page, 2-5 posts to publish immediately, and another 2-3 posts for the coming week (or two). Start by brainstorming a few blog posts about related to you and your work.  A mindmapping tool can be a big help, or just use good ol' pen and paper.  Come up with a few posts before you publish any.  A blog with only one or two posts will not garner any readers or impress anyone, so make sure you start with at least five.  Type out the posts in Wordpress, save them, put leave them as 'unpublished' until you are ready to unveil your blog.
   
8. Be confident in your ability to proofread, or have a friend to edit your first few posts. A blog that is impossible to read won't be read.  Use spellcheck, common sense, proper grammar, and spellcheck again.  If all else fails and you are convinced your articles are terrible, hire a copywriter on elance to proofread your work (more on this later).
9. Post your content! Set the "Publish Status" of all your posts to 'published' and you are on your way! Tell all your friends and family about your blog and spread the word.  Don't forget to write 1-2 posts per week until you become way to busy with all the new work you'll be getting, or become a professional blogger and start posting every day.
10. Share your content! The blog isn't going to do much good if nobody sees it.  Let friends, family and co-workers know about your new site.  You can try the Wordbook plugin to automatically update your Facebook mini-feed with your blog posts.  The Sociable plugin is good as well. It allows you to put all those nifty little Web2.0 icons on your blog so your readers can share your posts on Digg, Twitter, Technorati, del.icio.us, and many others.  Be sure to take some advice from the pros on how to promote your blog around the internet. Remember those favorite blogs from step 1?  Engage with the authors, comment on their posts, link to their interesting posts, and maybe someday they'll mention you on their blog. It takes time, but almost certainly gets people viewing your posts.