I am getting married this weekend and will be offline for the next two weeks. Hopefully I have included enough articles to keep you busy. Mainly social media and standards related. I will be back in two weeks, hopefully totally refreshed and with a new set of ideas to implement. Enjoy.

• The Web Development Skills Crisis
• Social Media and Higher Education - Part 1: Admissions
• Refresh Detroit July 30th, Casual Meeting + Dinner
• My Computer Ninja: The Blog » 2 hours of Video on JavaScript from Douglas Crockford
• Cheat Sheets for Front-end Web Developers
• “Gorilla” Usability Testing | GarrettDimon.com
• The next newsroom in Second Life
• 60 Not To Be Missed Web Development Articles - June 2008 Web Builder Zone
• Marketing to the IPod Generation
• SquaredPeg - How will gas prices affect Admission?
• NorthTemple.com : The Accessibility Checklist I V…
• Great Package Design
• College Web Guy - University Web Template Hell, or Variation within Constraints
• What the F**K is Social Media?
• Smarter Auto-Linking
• Adobe Makes Flash Searchable - The Holy Grail of Website Usability? - ReadWriteWeb
• Should Links Open In New Windows? | How-To | Smashing Magazine
• A List Apart: Articles: Writing an Interface Style Guide
• Social Media 101 - CommonCraft video says it all
• Real World Web Standards - Slidecast Uploaded
• uwnews.org | Online service lets blind surf the Internet from any computer, anywhere | University of Washington News and Information
• Collection of Great College TV Ads

The School of Business Administration runs an E-Commerce Summer Camp for 16-17 year old’s to learn key computer and business skills. Part of the camp is a paid internship where they can put what they learn to practice.

This summer we are accepting an intern from the camp. Our summer intern, Orlando Collins, a senior at Inkster High School started today. He likes computers and business, our department offers both.

We have had the long tradition of teaching and mentoring. Quite a bit of our full time staff started out as students or entry level. I have a feeling you will be hearing more about Orlando in the coming months.

A few days too late, but better than never. Quite a bit about social interaction in higher education. Enjoy.

• EduWeb Buzz - Connecting with the Facebook Generation
• Veen on data overload
• Oprah Winfrey’s Stanford Commencement Address [Weekend Watching]
• The Experience Evangelist - Campus Tour Prank Video - University of Colorado
• Recap of Adobe Acrobat 9 Presentation
• How we read online. - By Michael Agger - Slate Magazine
• 21 Incredibly Creative Flash Websites
• FJ Gaylor Photography - Summer Session - St. John’s University, Queens, NY
• Guide to Better Napping
• FAQ: When to use italics?
• Its about Telling Stories
• How to Change the World: The Inside Word on Word-of-Mouth Marketing
• Walk on AIR: Create a To-do List in Five Minutes [JavaScript & AJAX Tutorials]
• Ron Bronson - The students who get away
• Video: Zeldman on Journalism and The Web
• Video: Andy Clarke on Web Layout

We just launched a contest to win a Dorm Room Makeover. The site is based on three videos which have a similar feel as viewing a famous person’s crib. The goal of the site design is to encourage viewing each video and make a selection of your favorite to enter the contest.

With screen shots of each video we placed a large play buttons right in the center. When playing a video a tab at the bottom brings the user directly to the entry form and pre-selecting video they were just watching.

The design of the site mirrors the introduction and conclusion of each video. Check out the site.

http://dorms.wayne.edu/

Not a lot of articles this week but some good quality reads.

• College Web Editor - Higher Ed Magazines: Gone Digital, Going Paperless?
• Facebook catches MySpace in visitors
• EduStyle Blog - The future face of Higher Ed websites?
• Making Video Accessible
• Writing Style for Print vs. Web (Jakob Nielsen’s Alertbox)
• How to become a viral phenomenon
• College Web Editor - Don?t upload your higher ed video to YouTube (or other video-sharing websites) before doing these 5 simple things
• How to Build a Better Content Model for Your Site: Understanding News Consumption Patterns

Refresh Detroit is a part of the Refreshing Cities organization. They are a group of web professionals whose goal is to promote web standards, usability, and accessibility, and to spread the knowledge of web design in the Detroit and Ann Arbor Michigan areas.

The next Refresh Detroit meeting will be 6:30pm, Wednesday, June 18, 2008 at Ann Arbor SPARK in downtown Ann Arbor, Michigan. They are fortunate to have Adobe representative Doug Halliday lead the presentation.

Doug will highlight features in Acrobat, including creating PDFs, sharing, forms and usability. He’ll also discuss the new features in the upcoming Acrobat 9 version, due for release in mid-summer 2008. Adobe expert Greg Pisocky will join our meeting remotely to explain the accessibility features in Acrobat.

Location:
Ann Arbor SPARK
330 East Liberty Street
Ann Arbor, MI 48104

Doug Halliday is Business Development Manager, Manufacturing, at Adobe Systems Inc. In this capacity, he is responsible for driving customer awareness of Adobe solutions in manufacturing, developing partner relationships and formulating strategies with key customers, particularly in the automotive and heavy equipment sectors.

Greg Pisocky is a Business Development Manager in Adobe Systems’ Corporate Product Management Group. As an accessibility specialist, he advises Adobe’s customers on techniques for developing accessible content for those with disabilities.

Links from this week follow the theme of building it better. All are great resources to optimizing, planning and helping out the user. Its been a long week, take some time to enjoy the articles below.

• How to Build a Better Content Model for Your Site: Understanding News Consumption Patterns
• Web designers should do their own HTML/CSS - (37signals)
• The Five Essential Elements of Effective Social Media Marketing
• New Technique for Optimizing Flash Sites for Search and Usability
• jQuery Release 1.2.6: Performance Improvements and Dimensions Plugin Added to Core
• Tracking Reactions on the Web
• 10 Coding Guidelines for Perfect Findability and Web Standards
• Presenting Twitter
• Beautiful CSS buttons with icon set
• What Everybody Ought to Know About Usability and Web Design | Creating a blog web design blog
• Yahoo! Design Stencil Kit 1.0
• 7 Things to Know About Email Marketing
• College Web Guy - Screenshots: A Pile of University Campaign Examples
• An Email Minute - Creating a campus experience

Previously had no concrete statistics about which social networks our current or prospective students use. Last week we ran some statistics for the visitors of the wayne.edu homepage to figure out which social networks they had visited.  We ran it on the weekend of May 31 to June 1st to get the largest percentage of external users as possible. We limited it to the homepage only, no other pages were tracking this information since current students often jump right to their email or Blackboard.

Our Method

We used a modified version of the SocialHistory JS created by Aza Raskin. The technique is pretty straight forward by creating an iframe and using the CSS a:visited to see if you have visited a site before or not.

Sites we looked for

Digg, Reddit, StumbleUpon, Yahoo Buzz, Facebook, Del.icio.us, MySpace, Technorati, Twitter, After5, MetroMode, Newsvine, Songza, Slashdot, Ma.gnolia, Blinklist, Furl, Mister Wong, Current, Menaeme, Oknotizie, Diigo, Funp, Blogmarks, Yahoo Bookmarks, Xanga, Blogger, LiveJournal, Last.fm, N4G, Faves”, Simpy, Yigg, Kirtsy, Fark, Mixx, Orkut, Upcoming.org, Google Bookmarks

Frankly some of those I had never even heard about but we tested for them any way.

Results

The first two graphs are percentages of all the users who visited the homepage. The rest of the graphs are only percentages of the users who visited one or more social networks before coming to wayne.edu.

In total the homepage was hit 25,927 times over the course of the weekend (due to an unexpected issue we did not track early Sunday morning from midnight to 5am), of those 15,600 had visited at least one social network before coming to wayne.edu

Internal v. External Users

Our usual percentage is closer to 50/50 since all the computers in the libraries open to wayne.edu.

No Social Network Users v. Social Network Users

Number of Networks per User

Popular Social Networks

Top Network Combinations

Ending Thoughts

Although these results are not 100% fool proof since the method we used is not a gaurentee usage of a site but just a visit to a site and it tracks mainly the sites homepage and login page. Some users may be using 3rd party applications primarily to interact with a site (Twitter for examle). We had a suspicion Facebook and MySpace would be most popular, we just didnt know which one would come out on top. It is pretty clear Facebook is the winner with MySpace coming in second, no other site stood up to those two. Having this concrete evidence was crucial for us to make future decisions based on what communities our prospective students are part of.

Incase you missed it here is the latest web design/development news from across the net last week. Have something to add? Just comment.

• 37signals: An Introduction to Using Patterns in Web Design
• 5 great mac tools for programmers
• Brand Building in the “Application Economy”
• Applying Divine Proportion To Your Web Designs | How-To | Smashing Magazine
• The Old College Try - Random Marketing Thought: Billboards
• Top 30 Modern Web Designs (Magazine Style Showcase)
• Testing IE Versions Just Got a Little Easier
• EduWeb Buzz - Transcoding Video for Web Pages
• The Official “Successful Website Checklist Challenge” | Web Site Design Blog
• usability study of breadcrumb navigation
• 40+ Extremely Beautifull Icon Sets Hand-picked from deviantART
• Dreamweaver CS4 Hits Beta
• 2008 Email Design Guidelines - Campaign Monitor Blog
• Typogridphy — A Typographical and Grid Layout CSS Framework
• Trevor Davis | Blog | Input vs. Button
• Real World Web Standards - Web Directions Gov 2008
• 30 Websites to follow if you’re into Web Development

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.