Before and After

Turn your everyday photos into something that looks like it was taken by a semi-pro. This four-step tutorial is fun because it doesn’t require hard work and the final outcome never disappoint! Lets start!

STEP 1

Once you’ve picked your photo, Duplicate the layer.

STEP 2

With the duplicated layer selected, go to Image > Adjustments > Desaturate. This will turn your photo black and white.

STEP 3

With the duplicated layer still selected, apply Gaussian Blur. Filter > Blur > Gaussian Blur (about 3.5 Radius). Play around with the amount after you’ve finish the tutorial completely. The higher radius will add more diffuse glow to the image.

STEP 4

After the layer has been desaturated and blurred, using your Layers Palette, in the blend mode, select Overlay. Ta-dddaaa! Ooh soo DRAMATIC and fun!

RECAP

Before and After

OTHER SAMPLE

I created a screencast to show how we in the Web Communications department of Wayne State University create forms quickly, consistently and accessible using an open source framework I created and that we maintain. The framework is PHPSimpl and is hosted on Google Code, it is not meant to be a full blown MVC framework but more or less a helper for common tasks.

This is the first screencast I have ever created so bear with me as I adjust to talking to a computer instead of a room full of people. Also ignore any technical issues which I am still trying to work through. I created it with just a Mac Book Pro, Snapz Pro and the internal mic, so the sound might not be the best.

The video is best viewed at full screen to see the detail in the text. I am playing with the flash video encoder options to find the optimal compression for quality and size. If anyone has any suggestions on the settings or screencast recorder feel free to comment.

In case you are wondering the form is being created on an Apache server running PHP5 and MySQL.

Hope you enjoy it and it helps you out.

The Solution

The solution is pretty simple, but not easily found online so I wrote my own. Twitter provides you with links to two JavaScript files within their auto-generated code. The first included javascript file provides you with two functions. One is the callback function that is used to display the json feed using HTML. The second function is used to convert the time stamp to relative time to keep with Twitter look. Rather than continuing to use the include from twitter.com I localized the two functions so I could edit the callback function and get some markup around those links.

My changes are fairly simplistic and make use of regular expressions to replace obvious plain text links with a marked up version of the links so the end users will be able to click the links.

The code to replace plain text URLs with their marked up version:

var tweet = "Some tweek with a link to a site: http://wcs.wayne.edu/";
var pattern = /(HTTP:\/\/|HTTPS:\/\/)([a-zA-Z0-9.\/&?_=!*,\(\)+-]+)/i;
var replace = "<a href=\"$1$2\">$1$2</a>";
tweet = tweet.replace(pattern , replace);

Now my regular expression skills are far from great, so it’s likely this can be optimized. It’s also possible I forgot some URL safe characters within the pattern. This code basically searches the tweet for anything that looks like http://i-am-a.link/cool/link.ext?okay=yes&fine or whatever the link might look like. I think it could be expanded to search for links that do not include the http:// as well, but I didn’t have a need to do that at this time. Here is the full modified twitter JavaScript code incase you want it.

The result is tweets with working links on http://wayne.edu/current/.

The problem was in the logout

When logged in we wanted to be sure that the user was actually the same person who originally logged in. This level of authentication guarantees the user already has access to the account with the given accessid. However, since we can’t guarantee that a user will properly log out and we can’t make sessions expire too quickly, we had to figure out a way to log the user out even if they just closed the window.

And so I found the DOM event “beforeunload”

Also known as onbeforeunload and mistakenly thought to be IE only; when attached to the window, the beforeunload event is triggered when the page is unloaded. This, however, includes a link being clicked, a form being submitted, and any other event that will cause the page to go away, including closing the browser window. Without further ado, here’s some code (using some jQuery to make things simple):

First, we bind the startup routine to the load event on window:

$(window).bind('load', function(e){
  close_window = true;
  logged_out = false;
  $("a").bind('click', function(e){
    if(!$(this).hasClass('clickable'))
      close_window = false;
    });
  $("form").bind('submit', function(e){
    close_window = false;
  });
  if (window.addEventListener) {
    window.addEventListener('beforeunload', message, false);
  } else {
    window.attachEvent('onbeforeunload', message);
  }
});

The load routine binds submit and click events to anchor tags and forms so we can ignore those exit cases. Then the beforeunload event is attached to the window in 2 different ways to account for the differences in the big 3 browsers.

Here is the message function triggered by the beforeunload event:

function message(ev) {
  if(close_window){
    if (ev.stopPropagation) {
      ev.stopPropagation();
    } else {
      ev.cancelBubble = true;
    }
    if (ev.preventDefault) {
      logout();
    } else {
      logout();
      ev.returnValue = "Leaving?";
    }
  }
}

And finally the logout function which makes an ajax call to a php script that cleans up any sessions, database info, and cookies:

function logout(){
  if(!logged_out){
    $.ajax({
      type: "GET",
      url: '/chat/inc/logout_connector.php',
      data: "logout=true",
      async: false,
      cache: false,
      success: function(msg){
        console.log("Ajax Repsonse: "+msg);
        logged_out = true;
      }
    });
  }
}

Here’s a quick summary of what is going on, if you need it

When the page is loaded, the close_window variable is set to true. The message method requires the close_window flag to be true, otherwise its routine isn’t run. We’re binding the submit event and click events to forms and anchors respectively then setting close_window to false when those events are triggered. This way the beforeunload event’s code will be skipped when the user leaves the page with those events. When the window is closed, the beforeunload code is run and makes an ajax call to a php script that will clean up the session, cookies, database, etc to assure a clean logout.

This code is currently supported by Firefox 2, IE 6, IE 7, and Safari 3. Opera is the only browser I tested that doesn’t support it.

It’s possible that a jQuery plugin is in the works to do this more easily in the future. If I get the chance to write it, and get it done and working, I’ll make another post about it then.

Outline

We were tasked with the redesign of the Library and Information Science Program Web site. I started out with a general overview of our department then moved into showing the old LISP web site. It was not an in depth examination of all of our methods but a glance at our process

The Old Site & New Goals

Some of the issues with the old web site were

• Need for more university branding
• New online masters of library science degree that needed promotion
• Need for a news/events static area
• Use of a pixel pattern they use on all their direct mail pieces
• A place to promote their faculty.

We didn’t have access to their old web server or site statistics so we could only base student needs from emails and phone calls. We also used other university library science web sites as benchmarks. 

We determined the primary audience to be prospective graduate students since they only offer graduate degrees. Current Students and Faculty/Staff will have a presence but they will not be the primary focus for the homepage.

Organizing Information

Initially we pull down the site with WinHTTrack to get an idea of the size and folder structure. We then take their primary goals of the site and figure out the paths a user currently has to take to get to them. We then take those paths and chunk them together to shorten the time and organization of them for the new site.

We broke their navigation down by audience and since each section has quite a bit of links underneath it we decided alphabetical would work better than having to prioritize menu items, we did not want to make any assumptions.

Site Design

The main goal of the homepage was to create an impact, appear organized and up to date. Our mockup process is to create three designs, present them and they can either choose one or pick bits and pieces and we work back and forth with we have a design we are both happy with.

I presented the three mockups we created for the site. Each mockup has a homepage and two child pages. Child pages are pages with basic content on them, basically anything that is not the homepage. We create a two column and a full width child page to show how content will flow.

Technical Implementation

The html of the site is implemented in XHTML 1.0 Transitional because we have a CMS with a WYSIWYG editor inside which stumbles if the strict mode is enabled. It is built into a template and placed in the web content management system we created for the university. 

They ended up choosing Mockup #3. It offered enough flexibility to promote news, events, promotions and the pixel pattern did not distract from the content on the page.

Did we accomplish our goals?

Since we did not have any historical site statistics we could only rely on the new site statistics. The last slide shows the Google Analytics for the site since it launched. As you can see the top four hit pages are the goals we set out to promote with the new site. Homepage is number one of course but the online program is number two, followed by the admissions page, followed by the faculty profiles page.

See the design for yourself: http://lisp.wayne.edu/

We have compiled a step by step guide to running both Firefox 2 and Firefox 3 simultaneously on both OS X and Windows. All OS X commands below can be run in the Terminal and all PC commands can be run from the Start->Run window.

Most of your extensions will not work in FF3 thus requiring FF2 to still be installed with full extension support to fall back on.

Warning:
Although this tutorial is straight forward BACK UP your current profile before you start. Your profile is located at:

OS X
~/Library/Application Support/Firefox/Profiles/xxxxxxxx.default/

PC
C:\Documents and Settings\[User Name]\Application Data\Mozilla\Firefox\Profiles\
or
C:\Users\[User Name]\AppData\Roaming\Mozilla\

1. Create a new profile

This can be done while Firefox 2 is still open. I suggest leaving it open just to verify your FF2 will stay in tact.

OS X
/Applications/Firefox.app/Contents/MacOS/firefox -profilemanager -no-remote

PC
"C:\Program Files\Mozilla Firefox\firefox.exe" -profilemanager -no-remote

2. Install Firefox 3

Download the latest beta and make sure you install it to a separate directory than FF2. Remember DO NOT run FF3 after the install.

OS X
/Users/[youraccount]/Applications/

PC
C:\Program Files\Mozilla Firefox 3 Beta 3\

3. Startup Firefox 3 and force the new profile

Force FF3 to use the newly created profile to keep all your bookmarks, extensions and themes separate. Most of the extensions and themes will not load in the new beta. Replace the “alpha” in the commands below with the name of the new profile you created in step 1.

OS X
~/Applications/Firefox.app/Contents/MacOS/firefox -P alpha -no-remote &

PC
"C:\Program Files\Mozilla Firefox 3 Beta 3\firefox.exe" -P alpha -no-remote

4. Create a permanent shortcut to run the alpha release.

OS X

1. Make sure Apple Script is in the system menu, Applications/AppleScript Utility
2. Run the Apple Script Editor in Applications/AppleScript folder
3. Paste in this code but replace the directory and the profile name
   

   do shell script "~/Applications/Firefox.app/Contents/MacOS/firefox -P alpha -no-remote &"

4. Save the file to ~/Library/Scripts folder and name it something like “Firefox 3″
5. To run the script in the menu bar click the script icon and click on “Firefox 3″, it should load side by side with FF2

PC

1. Create a new shortcut on the desktop pointing to the Firefox 3 installation
2. Right click on it and go to Properties
3. In the attributes section add in "-P alpha -no-remote" without the quotes after the quoted directory
4. Click Apply and the shortcut should now run FF3 with the new alpha profile side by side FF2

You are now all set to test in Firefox 3 while still running Firefox 2 for every day work.