Customizing HTML lists

I decided to change the ordered <ol> and unordered <ul> lists on the A2D web site to use a custom style based on one of the List-a-matic styles. The CSS I created looks like this:

.article-list {
padding: 1px 1px 1px 40px;
margin: 0px 0px 20px 100px;
background-color: #cccccc;
color: #ffffff;
border: 1px solid #cccccc;
}
.article-list li {
border-left: 2px solid #4c4c4c;
list-style: lower-alpha;
background-color: #ffffff;
color: #663300;
padding-left: 5px;
padding-bottom: 3px;
}


Wouldn't you know that IE 7 does not display these correctly, but Safari and Firefox show the list as the example image above. Back to debugging IE problems. The problem required a little investigation but isolating the <ul> and then removing and adding CSS style changes until the problem was located. In IE you must add the style padding-left: 40px to allow room for the custom list style lower case alpha characters!

JavaScript dialogs

I found an extremely useful JavaScript library called Prototype Window which is built on top of Prototype and Scriptaculous. I really like how easy it is to customize and add different skins to the dialogs. I am using this for the dialog that explains how I created the A2D logo. Creating a dialog is easy as this:

var dialog = new Window('modal_window', {className: 'dialog', top:logo_top, left:logo_left, width:logo_width, height:logo_height, zIndex:150, opacity:1, resizable: true});
dialog.setContent('logo_creation');
dialog.show(true);


CSS tricks

Today I have been using a couple of very nice CSS tricks in my recent contracts, so I re-created them from scratch on the Attentive 2 Design web site:

• Rounded corners using Javascript without images. What I really wanted to do was add a dark burnt orange border around my definition box on my home page, but when I tried to do so the
  
Rico.Corner.round('a2d_description', {corners:'all', color:'#4c4c4c', border:'#ffa500', bgColor:'#ffffff', blend:'#ffa500', compact:false});

  


• Setting transparency using CSS that works in Safari, Firefox and IE - I used this for dialogs - click on the A2D logo and a description comes up in a dialog.
  
opacity: 0.5; /* ------> Mac: Safari */
-moz-opacity: 0.5; /* -----> Firefox */
filter:alpha(opacity=50); /* ---> IE */

  


• Creating a box punch is a standard printer technique, but I like the effect so I added it to the same dialog that explains how I created the A2D logo. The CSS to enable this was very simple:
  
div#punch_logo {
background-color: white;
float: left;
text-align: center;
border: 1px solid black;
border-width: 0px 1px 1px 0px;
margin: -1px 1em 0.5em -1px;
padding-left: 3px;
}

  Where the HTML looks like this:
  
<div id="punch_logo"><img src="images/a2d.png"></div>

  


• Drop shadow for text, which I used for the © copright notice at the bottom on the A2D pages. The CSS is very complicate because of browser issues, but I like the code that works in Safari:
  
text-shadow: #4c4c4c 3px 3px 3px; /* color, horizontal offset, vertical offset, blur */

  


• Dynamic Drive ToolTip II is a nice example of how to create custom tool-tips, hover help, balloon help or whatever you would like to call it. It is used for the A2D logo and for the drawn arches within the toolbar.
  

Bollywood Movies

Today was a monumental day as my wife and I went to an Indian movie at the local movie theater which shows Indian movies. I say that because sometimes you can actually see an Indian movie distributed in the USA at a regular movie theater but that is rare. It was fun for me as I remember watching an Indian movie on the TV every Thursday night when I worked in Saudi Arabia and that was definitely entertaining. We try to rent an Indian movie every week from Blockbuster on-line, but the really good ones are always on a long waiting list. The movie we saw today was called Guru. I don't want this to be a movie review, but this is the kind of Indian movie I want to watch. It makes you laugh, cry and want to dance all in 3 hours - amazing entertainment.

Streaming Audio with MP3

Today was MP3 streaming audio day. I had the task of copying 2 conference audio CDs to a remote web server and then add access to them thru a streaming audio server. Besides waiting for the files to transfer, most of the day was spent trying to figure out how to get the files to stream. I tried the simple approach of having links to the MP3 files, but that forced a download of the file. Then after many googlizer searches, I finally found the help I needed in a custom Flash audio player at boutell.com. I like the allowed customization as I created a playlist type XML file for each CD and that was all there was too it - only 8 hours later!

PHP changes

I have been using PHP to maintain a couple of web sites for years and I just moved to another web hosting provider and now I am in the middle of changing every one of my PHP scripts. I am using a freeware PHP bulletin board that just stopped working. I check into it and find out that it was assumed every where that a form posting data would set global variables for every form element. For instance, if I have a form element of <input type="text" name="email"> then the function that read that would have a statement of "global $email". I ended up switching all of the globals to use a syntax of $_REQUEST['email'] and now it is all working, well almost. In that same forum code I have a login that is saved to a cookie and that is not working. It used $SCRIPT_URL but that does not work. Who knows how long that will take to figure out? I go to the friend who has never let me down PHP Documentation. The best thing about it is the comments added by users that often has sample code...

email subscriptions

I am currently subscribed to 2 different email groups.

One is discuss@ixda.org, where I am currently receiving around 50 emails per day on the new Apple iPhone. Normally I receive around 10-20 a day on some hot topic as it seems like someone always has something to say. This group is for Interaction Designers.

The other is agile-usability@yahoogroups.com, where people talk about trying to integrate traditional up-front design into agile development methods. I like the term Just-In-Time-Design as it describes what takes place. I have experienced this first hand on a project I worked on for 6 months last year. It was definitely hard to get used to as I wanted to observe users and run usability tests, but instead I had to give in to the fact that the design was getting better every week and sometimes daily instead of trying to create the perfect app up front from user observations and tests. I really like the quick iterations and putting something in front of users as soon as possible. I don't like the lack of time thinking about design as it always seems like I am rushing into a decision. But the app does get better over time...

Apple User Experience documents

I learned that all of Apple's User Experience documents are on-line. Which means you have links to good stuff like the User Experience Guides, but my favorite is the Apple Human Interface Guidelines.

How RubyOnRails go onto my Mac laptop

I must say that I feel like I went back in time as I watch RubyOnRails being installed on my Mac laptop. Everything was installed by looking up the public web sites and then the installers were mostly run from the command line. The first thing I needed was Xcode to get a compiler. Then DarwinPorts (or known as OpenDarwin or MacPorts) which helped us load all of ruby. Once we had ruby, then I needed ruby gems and rake (which is ruby-make). Of course where would I be without subversion for version control. To access mySQL I now have CocoaMySQL. Lastly, in order to edit ruby code I was forced to use TextMate. When I thought I was really done I was told I cannot live with QuickSilver to locate all of the programs put on my Mac today.

Mac and RubyOnRails

I must say the best way to learn RubyOnRails is to work with young guns. I was starting to learn Rails on my own and was struggling so the RoleModelSoftware fellows I was working with helped me install everything and now I have mySQL and RoR working on my old Titanium G4 MacBook. Then to work with these great people on the latest technology and all on Macs was a thing of beauty for me.

web server host

I helped some friends find a new web hosting service and I picked HostMonster.com because they needed tons of disk space for conference sessions and support for their existing PHP code. For $4.95/month we got 200 GB and support for either PHP or RubyOnRails. I am pleased so far as they even have an on-line chat service that did not install anything on my Mac computer!

button widths in IE

Then there is a problem with the button widths in IE. I thought it may be fixed in IE 7, but alas it is still there. Thankgoodness there is a work around. To fix the navigation buttons on the left hand side of the Attentive 2 Design web site I set the button style widths to the same as the width of the images. The navigation bar is created in Javascript so this is done in one place. I could have just as easily added a className and used CSS to control the width as well.

blogger

I must at least say something about this blog. I asked a good friend, Adam Williams, which blog he liked the best and he suggested blogger.com. I already had a google email account so in 15 minutes I had my first ever blog up and running, and without having to read any documentation on how to do it. Now that is what I call easy to use. I had to find an easy one to us for a sadhu friend in India to use. It will be interesting to see how easy he finds it!

Favicon

I remember the last time I tried to set one of things. It required putting the favicon.ico file in a specific place within the web server configuration files. Today I found a Wikipedia article that described how to easily get it working today.

I searched for "favicon generator" in google.com and choose one faviconprime.com from the list of many and in seconds I had a favicon from my company logo.

I added the following to all of my Attentive 2 Design HTML files in the <head> section:

    <link rel="shortcut icon" href="http://www.attentive2design.com/images/favicon.ico" type="image/x-icon">
    <link rel="icon" href="http://www.attentive2design.com/images/favicon.ico" type="image/x-icon">

I verified that using this technique the Attentive 2 Design icon now works for Safari (mac), Firefox (mac & window), IE 7

free business cards

In posting my resume, I found a very nice business card printer called Vista Print that is cheap and does high quality work. I received the business cards by US post in 1 week's time for only $17.19 for 250 cards. They have free business cards with pre-designed templates where you customize the text, but I choose to build my own from scratch. I really enjoyed using their business card builder for just $3.95 more. Most of the cost is in shipping, which I paid more to make sure I had my business cards before going to India. You can even upload your own designs as they document the format and resolution required, but I choose the cheaper option for my first pass. I especially liked their logo builder.

This is the end result that I scanned using my HP 950 All-In-One printer:

Going to India

Totally unrelated to my job search, I am going to India to be with friends in the band called aradhna.

---------------====||| USA to India |||====---------------

Wed, Jan 24:  DELTA AIR LINES INC, DL  5274 - Operated by COMAIR INC    

From: RALEIGH DURHAM, NC (RDU)
Departs: 4:46pm  
To:  NEW YORK JFK, NY (JFK)
Arrives: 6:41pm      
Aircraft: CRJ-CANADAIR REGIONAL JET
Mileage: 425  
Flight Time: 1  hour(s) and  55  minute(s)       

Wed, Jan 24-Thu, Jan 25:  EMIRATES AIRLINE, EK  0202    

From: NEW YORK JFK, NY (JFK)
Departs: 11:00pm
To:  DUBAI, UNITED ARAB EMI (DXB)
Arrives: 8:35pm Thu, Jan 25  
Aircraft: AIRBUS INDUSTRIE A345 JET
Mileage: 6839  
Flight Time: 12  hour(s) and  35  minute(s)       

Thu, Jan 25-Fri, Jan 26:  EMIRATES AIRLINE, EK  0518    

From: DUBAI, UNITED ARAB EMI (DXB)
Departs: 9:50pm
To:  BANGALORE, INDIA (BLR)
Arrives: 3:00am Fri, Jan 26  
Aircraft: AIRBUS INDUSTRIE A332 JET
Mileage: 1684  
Flight Time: 3  hour(s) and  40  minute(s)       

---------------====||| India to USA |||====---------------

Sun, Feb 4:  EMIRATES AIRLINE, EK  0517    

From: BANGALORE, INDIA (BLR)
Departs: 6:30pm
To:  DUBAI, UNITED ARAB EMI (DXB)
Arrives: 9:05pm  
Aircraft: AIRBUS INDUSTRIE A332 JET
Mileage: 1684  
Flight Time: 4  hour(s) and  5  minute(s)       

Mon, Feb 5:  EMIRATES AIRLINE, EK  0203    

From: DUBAI, UNITED ARAB EMI (DXB)
Departs: 2:00am  
To: NEW YORK JFK, NY (JFK)
Arrives: 7:20am  
Aircraft: BOEING 777-300ER JET
Mileage: 6839  
Flight Time: 14  hour(s) and  20  minute(s)       

Mon, Feb 5:  AMERICAN AIRLINES, AA  4655 - Operated by AMERICAN EAGLE    

From: NEW YORK JFK, NY (JFK)
Departs: 12:25pm  
To: : RALEIGH DURHAM, NC (RDU)
Arrives: 2:00pm  
Aircraft: ERJ-135 JET
Mileage: 425  
Flight Time: 1  hour(s) and  35  minute(s)

job searching vs. resume posting

I started off with a group of companies that sponsor the local TriUPA events as I know they support usability methods. I tried looking at each company's web site to see if they posted any external jobs. I submitted my resume to each job I found. I then went to such sites as monster.com, hotjobs.com, and careerbuilder.com. I never could get monster.com to accept my resume, so I have not used it since. I set up a couple of job agents on hotjobs.com top notify me of new jobs. I search every morning and every evening for new jobs so it does not consume my every waking hour.

jobs mapped by city & state

What I would like to see is a graph of all of the jobs by keyword on google maps. I could see how close the job is to my house and I could also see a cluster of jobs by city and state. I can also tell most of the jobs are located in NYC and CA.

Starting the Job Hunt

When my last contract expired before Christmas 2006, I begin the tedious process of trying to find either a contract or permanent position. The hard part is coming up with why people should pay me and how I can make a difference as being unique among the general job pool.