YouTube embeds just got a little more clear

A few years ago we added the ability to embed a screenshot from a YouTube video through the CMS editor. This alleviated the need to take a screenshot, edit with software to add the play button, and then finally uploading it to the web server to embed it into a page or an email. With one click, pasting the url of the video a screenshot of the video can automatically be generated and embedded into a page.

But there was a problem

YouTube play buttonThe default YouTube play button at the time was a red rectangle which does call a lot of attention and allows users to immediately identify what will happen when they click the image. It became a problem over time as more of our videos (especially now that we can upload a custom still photo as the default screenshot) became people with a YouTube play button head:

Solution

New YouTube play buttonWe are happy to announce the play button graphic has been swapped out with a more transparent version that equally emphasizes the screenshot and the fact that the image will link to a YouTube video.

Now at a glance you can see the details in screenshot while still still understanding the link will bring the you to a YouTube video.

How to use the YouTube screenshot button in the CMS:

YouTube Preview

How To Create a Seamless Image Suitable for a Repeating Background

First, I think I broke the record on having the longest title thus far on our blog! YAY!

Secondly, when I read the write up on the Planetarium launch in January, I was slightly disappointed that there was no mention of the beautiful background image in the post. I think one of the awesome things about the site was the background and how it seamlessly repeated itself beautifully. I swore then on to dedicate a post solely on the background image.

Here’s the Planetarium site. Drag your browser window to extend the width and take in the beauty of the background. Now we’re ready to dive in the tutorial! Open up Photoshop and let’s start!

STEP 1

Pick your image for the background and put it in the mock, sizing it accordingly. In this case, we have a starry background.

 

STEP 2

Establish the height of the background you want to work with. Our height for this one is 400 pixels. The bottom (silhouette of the mountain) happens to be black so we can use a solid black color for the background that we can repeat using HTML.

 

STEP 3

Create a new document with the same height as your working background image. Your width should be three times the width of the sized-down background image. For our example, our canvas size is 400 x 3200. Manually size down the original background image ’til it replicates the background in the mock.

 

STEP 4

Duplicate the image.

 

STEP 5

Overlap the two images to create one image. Lower the opacity of one image to see where to sew/merge the image.

 

STEP 6

Use the Eraser Tool with a soft edge to clean the background and erase any visible seam lines. When done, you will have one seamless image.

 

STEP 7

Pick two identical points on your image. Use the margin to mark the beginning and end.

 

STEP 9

Use your marquee tool and select the area. SHIFT + COMMAND + C to copy the selected image and click “OK”. This image is what we will be repeating.

 

STEP 10

To make sure that the image is truly seamless, go back to your canvas with the really long width. Hide the two layers which housed the two sized-down original images. Drag or paste the base image from Step 9 into the artboard area. Duplicate and put them next to each other and you should have a seamless image.

 

To be extra sure, you can test the image in a browser. Copy the HTML below and save it as test.html and open it in a browser. Make sure that you change the file name to the file name of your image and the path of the image to the correct path according to where you saved the .jpg of the background that you will be using.

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<title>Repeating Background</title>
	<style type="text/css">
		body {
			background: url('starry-bg.jpg') top left repeat-x;
			height: 100%;
			width: 100%;
		}
	</style>
</head>
<body>
</body>
</html>

Hope this tutorial helps with your future seamless repeating background endeavors. ūüôā If you end up using this tutorial, post a link here because I’d love to see your work! Peace and carrots!

Ordinary Joe to Semi-Pro Photos

Before and After
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.

khoa-step1

STEP 2

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

khoa-step2a

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.

khoa-step3akhoa-step3b

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!

khoa-step4

RECAP

Before and After
Before and After

OTHER SAMPLE

Before and After Photo

Bridge BeforeBridge After

Create a quick html form connected to a database

Having a small staff and enormous amounts of work everything we can do to speed up tasks we take advantage of. We are asked all the time to create html forms for sites, its the only way to get users information, from RSVP’s to request information. Recreating forms is time consuming especially since most feed into a database plus usually email someone also.

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.

[flashvideo filename=”wp-content/uploads/2008/10/screencast-form.flv” height=”406″ width=”650″ image=”wp-content/uploads/2008/10/screencast-form.jpg” /]

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.

Using JavaScript to find links within plain text

Today I was working on adding the Wayne State University Twitter feed to our website. It’s not a terribly difficult task since Twitter has some auto-generated code (javascript and HTML) for adding your public time line to a website. We, however, wanted more. Twitter’s auto-generated code offers a pretty basic setup, no frills at all. Our issue with the Twitter code is that the links within tweets lack markup and are non-functioning within a web browser.

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/.

Javascript on window close event

It’s been pretty busy around here lately so I haven’t had much of a chance to write a blog post. Among other things, I’ve been working with Help Center Live, a live chat web application. The live chat application will hopefully find its way onto the Registrar’s site which is getting a new look and a better feel in the coming months. We needed to modify the application so it would work with our University login both on the user end and the management end. The code was fairly easy to work with and adding the code for the University’s system to authenticate users was a relatively straightforward change.

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.

Refresh Detroit LISP Web site presentation

Yesterday I was asked to give a presentation at Refresh Detroit, a group of web developers/designers/usability professionals from the Detroit area. Below is the presentation.

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/

Running Firefox 2 and 3 simultaneously

As web developers we are always testing and re-testing our work in the latest browsers. As the release for Firefox 3 becomes imminent it is crucial to test everything while still being able to work since FF3 is not out of beta yet.

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

osx-profile.jpg


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\

ff3-install.jpg

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.

script.jpg

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

osx-side.jpg

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