Avoid Using Flash: The jQuery Cycle Plugin

My cousin Alexandra ran into an entertainment industry snafu earlier this year when an uncredited appearance on Lost gave the tv show’s internet fans free reigns to guess her name.  Unofficial credits began appearing on the photographer’s flickr photos, then TV Guide and, finally, on Lostpedia entries in English, and Spanish.  When she realized that a search of Alexandra Tobas wielded more content than a search of her correctly spelled name, Alexandra Tabas (with an ‘a’), she called me for help.  We did a bit of troubleshooting on her IMDB page, and on each Lostpedia entry.  I then did a ‘whois’ on her domain name.  She owned her domain name and didn’t have anything up yet!  This is a tidbit for everyone out there – if you do not like your search results, you only have yourself to blame if you do not have a site up under www.yourname.com.

While I do not have time to build her an entire portfolio right now, I went ahead and put up a simple page using the jQuery Cycle Plugin.  This plugin is an excellent way to mimic Flash objects without having to actually use Flash.  I never learned to use Flash seriously because it is a black box to search engines, although I’ve heard this has changed in recent years.  If this is old news, the new headlines are reporting that Flash uses unregulated cookies and is invading our privacy, which means I’m still staying away from it with a ten foot pole.  Many web designers hate Flash on similar principles, if not just for the sole reason that there is this misnomer that your website, brand or image is somehow cool because you use a Flash intro on your site.  Flash is fun to play with, but not necessarily the tool you want to use for heavy lifting.

That being said, jQuery Cycle Plugin is about the easiest thing you can use to add some pizzazz to your site.  In about three easy steps:

1. Reference the jQuery library, and the Cycle Plugin in your header.
2. Create a <div class=”pics”> and list your <img> within that div tag.  Make sure to specify each images height and width, and include an alt value, not just to be xhtml compliant, but because you want to add extra, search-able text, to your site.
3. Set the height and width of your .pics class in your css.  Make sure they are big enough to hold each image.
4. Add the following script to your file:

$(document).ready(function() {
$(‘.pics’).cycle({
fx: ‘fade’
});

The plugin’s demo site is super easy to follow for any beginner, and if you want to get fancier, you can change your transition type in your script. I will definitely be using this plugin for my own portfolio in the future!

View AlexandraTabas.com here!

The UI/UX Sandwich

Two or three years ago, it seemed that while universities were churning out students who had taken classes in Needs and Usability Assessment, User Interface Design and Development, and Social and Organizational Issues of Information, industry was still denying the benefits of such expertise on their products.  These roles were confined to corporate research labs, and only the bleeding edge companies (at the time) like Google and Yahoo.  In the past few years, more companies seem open to the idea of having designers on their development teams, but still not being able to quantify their benefit in terms of Return on Investment (ROI) figures, they are trying to sandwich User Interface Design and User Experience Research between other roles.

UI/UX != Graphic Design

Graphic Designers are artists and extremely creative.  They have amazing visual talent, and most likely honed their art through other mediums, then realized years later that the foray into technology meant more money.  User Interface and User Experience designers should have a technical background complimented with expertise or familiarity in psychology, sociology and cognitive science.  It’s not necessary they have a degree in computer science and a degree in psychology, but one or the other, with familiarity in each is necessary.  In simplest terms, Graphic Designers make things look cool, UI/UX designers make things functional and usable for the user.

Looks Cool, But Doesn't Work

I use this analogy to highlight my point:  My mom is an interior decorator.  She makes homes look beautiful for our family and all of her customers.  She has a good eye for patterns, fabrics, and colors, and is familiar with feng shui for organization.  While my mom understands the purpose of the room, and can arrange it to succeed the goals of the room (for cooking, for leisure, for games), she’s not designing the fabric patterns, the tchotchkes, and the furniture herself.  There are experts for each of these things.  My mom is a UI/UX designer for homes, the pattern experts are graphic designers for the things she puts in the homes.

To employers and product managers out there – hire a UI/UX person to work with the users to understand the problem and design the product to solve that problem.  This person (if they are good at what they do) will build you excellent activity diagrams, interactions diagrams, wireframes, and, if they are awesome, the beginnings of data and functional specifications.  They will understand the difference between radio buttons, checkboxes, and drop-downs, and be able to give you a 360 degree view of the application in its design phase.  In the wireframes, they reserve space for content, forms, and graphics.  They won’t design the graphics themselves because there are trained professionals (i.e. Graphic Designers) for this, and you can hire them on freelance and save yourselves (and your company) lots of money.  Besides, you will want to free-up your UI/UX person to move to the next project, or to work with the software developers through implementation.

UI/UX != UI Engineer

When Software Developers are Left to Design Error Messages

In absence of a real UI/UX designer, the role of UI Engineer is perpetually confusing for me.  I have to say first that UI Engineers are no different than other software engineers.  Just because they know how to write JavaScript, PHP, HTML and CSS does not mean that they are better suited than other software engineers for working with the users to design a better solution.  That being said, for years experts in the industry have been saying that software developers should not be handling user feedback.  When software developers are left to their own devices without user interface designers to give them guidance, we get open source projects.  Firefox aside (because they had UI/UX people come help), how many open source consumer applications are used by more than a few percentage points of the population?  I myself forayed into Ubuntu and Mepis, backed out 4 months later, and ended up buying a Mac.  OpenOffice maybe has 11 mm active users in the US, which would be roughly 4% of the population.The operating system and applications were not intuitive or easy to use, and when they crashed, they crashed so hard that I had to use the terminal to get anywhere (but usually ended up no where).

Rarely is an excellent software developer (front or back end) particularly good at connecting with, interpreting, and responding to other people, let alone are able to translate what those people’s goals are to usable interfaces.  These are all traits demanded by a good UI/UX designer. Furthermore, those of us that take a UI Engineer position expect to have more input into the UI design while still contributing some code to the application.  Often what happens is that the UI Engineer is stuck with a crappy design from a Project or Product Manager not trained in UI/UX or Usability, and is expected to do much more development than they ever planned.  The company and application/product suffers from not first understanding what skills they needed, and, second, finding the right talent for the job.

Read the rest of this entry »

San Francisco’s Random Taco Crawl Generator

For those of you close to me, you have definitely heard about a small side project I started at the end of May called the Random Taco Crawl Generator.  I dreamed up this great idea of being able to query a website for a random sampling of taquerias in San Francisco while I was at the gym over memorial day weekend.  The night before I had been on a Taco Crawl for my friend Kevin’s birthday.  He had held a few before, but this was my first with him, and with almost 20 other people that joined in for the celebration!

While we were sitting stuffed at our 5th taqueria, one of Kevin’s friends pondered aloud “I wonder if tacocrawl.com is taken.”  Everyone in ear shot with an iPhone started scouring the internet to see if the domain had been secured, and then to see if they, themselves, could secure the domain.  As I watched them scramble, I wondered too, “Why don’t you just call GoDaddy?  They have a horrible UI, but great phone service.” (I really am a true believer).  They ignored me!  I speculated, this time silently, it was because they didn’t want to listen to a girl (because guys know so much more about tech then us females, clearly).

Finally, I decided to grab GoDaddy’s phone number (on my blackberry, mind you) and give them a call.  Sure enough the domain was available, they had my account number and credit card on file, and I had the domain signed, sealed, and delivered within 5 minutes.  Everyone was dumbfounded for two reasons:

1. It didn’t occur to anyone (except for me) that you could secure a domain name by phone.
2. No one thought that any two-word combination was still even available in the domain space.

So while I was at the gym the following day, I was thinking about what I could do with my new domain.  Around that same time I decided I wanted to start getting back into more interactive web-development (pages that do things, not just show information).  For the past few years, my day job has confined me to strictly requirements and design, but no development.  Even with a few of my side projects – including this website, The General History Project, and The Bead Store – I hadn’t really written an if() or while() statement, in a while.

What started as a fun challenge to see who could secure the domain www.TacoCrawl.com fastest, turned into a side project using the Yelp API.  I wrote most of the logic in PHP, but sprinkled some jQuery and XML throughout the site.  The basic idea is that I query Yelp for as many taquerias within a 2 mile radius of the neighborhood selected.  I check to see if the data set returned to me is greater or less than the number of taquerias the user requested.  Ideally, the data set is greater, so I can generate a set of random numbers, and select from the full array of taquerias randomly.  If the data set is less than the number of taquerias the user requested, than I return to the user all the taquerias Yelp returned to me.

All in all, once I got back into the swing of things, I found the Yelp API to be really easy to work with, and the google group to be very helpful. I also started using this handy tool for cross-browser design – check out Browser Shots.

In the process, I got a lot of really great feedback through uservoice and email.  Some people want to see the site extend to other food genres, other cities and mobile browsers.  Other food genres are hard because few delicacies are small and edible repeatedly in crawl fashion the way tacos can be consumed.  For other cities, I checked in my own home town, Philadelphia, and only one neighborhood Yelp lists in its API has enough taquerias to make a taco crawl possible.  Finally, there’s no excuses, mobile browsing capability would be great, and so would a google map mash-up.  The truth is, I want to eat tacos, not program tacos; I need a break!  I want to work on other things!

Andale! Go find you some tacos!

PS:  There’s an easter egg in the program.  I’d like to know who finds it!

UPDATE:

Understand iTunes XML: Port Your Music Library from Windows to Mac

(Created February 2009, Updated July 2009)

Introduction

This is a tutorial designed to help you port your iTunes library from PC to Mac (or visa versa) without losing your Playcount and Rating information.  I make several assumptions about the audience in writing this tutorial:

1. You have a basic understanding of XML.
2. You are not scared to read and update XML code.
3. You do not want to lose your Playcount and Rating information.
4. You are able to move your actual music files from 1 machine to the other without changing the general hierarchy of your file structure.

Now here is the warning for those of you that still are on the fence – this isn’t easy-peasy – we’re not selecting some checkboxes and radio buttons, we’re looking at the code where iTunes stores information about each song.

In the Fall of 2005 I did a project called Playlist Generation & Download that involved creating iTunes playlists using the iTunes XML namespace.  I’m hesitant to use the word ‘namespace’ because of iTunes XML’s poor structure.  We enabled mobile and desktop applications in a service-oriented architecture to provide search, discovery and playlist generation using XML schemas.  In implementation, a user could upload and share iTunes playlists, then download others based on genre and artist search.  This tutorial was built based on the knowledge I gained doing this project 4 years ago.

iTunes stores all the data about each song into XML files; when you select Export Library or Export Playlist, the program will allow you to save the output as an XML file.  Lets get started by looking at a sample XML file.

1. Select a playlist, preferably a small one (< 25 songs), and where the songs all reside in the same folder (a particular artist’s album would work really well for the “training wheel’s” version of this tutorial)
2. Navigate to File> Libary > Export Playlist
3. Save the XML file somewhere you can find it.

Open up the file in a text editor.  The first section of the file is the usual introductions:

If you’ve worked with XML before and you have never seen the iTunes XML, then you’re probably a little startled to see its poor format.  For those of you that don’t know right away what is wrong, it’s the fact that every variable is stored in some tag called <key></key> and its value stored in a tag such as <integer> or <string>.  If I were to rewrite the first key, it should look like <Major Version>1</Major Version>.  The iTunes people would have saved themselves a bunch of time if they paid attention in XML Bootcamp!

2. Locate the “Music Folder” path information

In this snippet of code, the most important piece of information is:

<key>Music Folder</key><string>file://localhost/Users/lindsay/Music/iTunes/iTunes%20Music/</string>

The <string> value is the location of your iTunes Music folder, and in this case, this is the Mac format.

Instructions:

• Determine the location of your Music Folder in both your Mac and PC
• Copy and paste these locations into a text editor so you can compare the differences between the two.
• If you’re moving from a PC to a Mac (and try this first with your sample playlist):

1. Export your Playlist on your PC – lets call this Windows.XML
2. Change the Music Folder <string> to use the Mac location (path info), making sure the format is in a Mac format.

3. Locate the song “Location” path information.

Now lets look at the XML for each song.  Each song in your library or playlist XML file has a few lines of XML to describe its properties; two of these lines contain the play count and the star ratings, exactly what we DONT want to lose.  Here you go:

But, the only line we care about is the fourth line from the bottom:  Location.

Instructions

1. Copy the folder in which your playlist’s music resides from 1 machine to the other.  In my case I would take the Asher Roth album, and move it from my Music folder on my PC to my Music folder on my Mac
2. Find the new path information for this folder.  On my PC, it’s something like “C://Documents and Settings/Music/…”, and on my Mac it’s file://localhost/Users/lindsay/Music”
3. Compare the two location/path information to see where they defer and where they don’t.  For me, its the path information up until the Music folder.
4. For the first song in your XML file, locate the location information.  Cut out “C://Documents and Settings/” and paste “file://localhost/Users/lindsay”.  Verify that the path information for the song’s new location looks correct.
5. Do a Find/Replace on the entire file – Find: “C://Documents and Settings/” (the original path information), Replace with: “file://localhost/Users/Lindsay/” (the new path information)
6. You only want to do this Find/Replace because every song has a unique ending (the actual .mp3 name and file).

4.  Save and Move the Playlist.xml file to your new machine and upload

If you’re playlist folder is on your new machine in the path that you directed the Playlist.xml file to, then all you need to do is the following:

1. Open iTunes – Navigate to File > Library > Import Playlist
2. Browse and Upload your Playlist.xml file
3. The Playlist should appear in your list of playlists, and the songs should now be in your iTunes
4. Verify that the play count and ratings are intact.

5. Don’t delete the playlists

The final note is that you should not delete these new playlists.  If you delete them, you may lose some of your song’s information

Direction Reduction:

1.  Export your iTunes Library on your Windows machine.

2. Open the file in a text editor; change the directory for your Music Folder and change the directories for the location of each song (a simple Find and Replace should work if you have correctly maintained your music folder hierarchy)

3. Import the XML file into your iTunes on your Mac machine.

This is a really simple thing to do if your library is less than 1300 songs.  If your library is like mine (9000+ songs) then you will need to separate your iTunes music into manageable sized playlists and export and edit each playlist.  I did this by creating Smart Playlists for each letter of the alphabet related to Artists.  It takes longer to do this on a playlist-by-playlist basis, but you’ll save your processor a lot of time and stalling (I had a 4GB processor that couldn’t handle the XML file for my entire library). I think total, this took me 2 hours to do. That’s 2 hours to save me the 30+ hours I would spend deleting duplicates and adding ratings if I had to start from scratch.

Your life will also be easier if your music happens to be on an external hard drive because you then don’t have to migrate the music too, just the data about the music.  This was my situation, but probably is not the case for most of you.

Again if you can move the actual files from your Windows machine to your Mac machine without changing the hierarchy, then migrating your library will be much simpler in the long run.

If you have any questions, leave a comment and I’ll be happy to help out!