[Friday Links] The Resource Edition

Following this weeks web workshop a large list of recourses and tools.

Growing employee skills with in house workshops

A few days ago I gave a workshop titled “Introduction to the Web” to the whole creative team in the marketing department. I think it went quite well, I threw it together in an hour and just started talking not knowing what type of reactions to expect.

For some of the team who are print designers with no web background this was their first look at how the web functioned both technically and design wise. Stepping through an overview of how HTTP works and how a browser requests and constructs a web page did not seem too harsh. Basic HTML tags is when it started to get a little tense.

It was great to hear all their questions as I was talking because I could draw everything out. I have found that you can explain anything by drawing it on a whiteboard. Once we got through how elements are constructed and the DOM things went a little south. I started to explain the implementation of CSS which may have been too much for the hour and half workshop. But they got through it.

What I should have done was gone straight to the box model, squares were the theme of the talk really and the box model only expands on it.

In the end what really got them excited was talking about designing on a grid. Glad I saved it for last because the use of a grid doesn’t help anyone if they don’t know the behavior of HTML and CSS.

All in all it went very well, so well we are considering bi-weekly talks on various topics related to print and web to educate the entire creative staff on what we all do on a daily basis. Being part of a higher education institution we have a duty to educate even if we are not in a class room, many of our student assistants and technicians have been taught by our senior staff and have grown into full time positions. This was the first time we did cross pollination of skills and we will only benefit from it, hopefully we can bring in the larger marketing staff for future workshops.

Check out the slideshow below.

Download the Introduction to the Web slides (PDF 850k)

CMS sheds its baggage

For some time we have been moving our sites to a new enterprise level server environment. Transitioning sites between servers meant keeping our CMS in two environments and bounce between depending on which site was being edited. This became quite a task to keep both CMS’s up to date since one was php4 and the other php5.

The site transitions completed two weeks ago and we made some modifications to the CMS so it was not dependent on the old server. This weekend we made the switch and shed the php4 baggage and old server.

Working with such a large system can be difficult, especially since it has been coded over many years and still some legacy code exists. Having it in one environment will allow us to refactor that code quickly and get it into production.

First order of business is to update our WYSIWYG editor, this will allow us to support Safari and Opera finally.

Having the system just in one environment will also improve performance since it will not have to contact the slower server for information.

Happy editing.

[Friday Links] The Education Edition

Its crazy how fast a week can fly by. Keeping with the theme of education here is a bunch of links related to learning the art of web design.

MAC welcomes another member

A new member of our team started yesterday, Shaun Pezeski. He is the new Student Assistant Web Developer. Shaun is an honor student here at the university and has worked on a few student organization sites on campus.

He will essentially be our front end developer and creating html from mockups provided by the design team. Further optimizing our sites and increasing the use of microformats and accessibility.

Look forward to articles regarding frontend optimization, CSS and javascript. Again, welcome to the team Shaun.

[Friday Links] The Late Edition

Better late than never.

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.

[Friday Links] The Teamwork Edition

It has been a week of teamwork, partnerships and groups. Short and precise list this week dedicated to design, development and standards.

New features coming to the university events calendar.

The university events calendar has been around since 2004. It has gone through three complete re-codings since its initial release and it about to go through another. Although thanks to PHPSimpl it won’t be too painful. We are revamping how an event is added, not only help the student looking for events but also to get a handle on upcoming events and their needs.

The goal is to gather as much information as possible without being a burden on the user. Right now the required fields are minimal, we just wanted people to use the system and we would worry about the details later. It has worked, year after year events submissions have grown exponentially.

Creating a central events calendar is key to event promotion. We recently added the upcoming event list to the students Pipeline, the site they go to for all student services. Further expanding the reach of the events.

A new feature starts with an idea, the idea that we need to gather more information without being invasive and still adding value. Below is the initial sketch I made of the new work flow. All new ideas start out as a sketch on paper or the whiteboard.

Workflow in Progress: Adding an Event

From here it goes for review, we sit on the idea for a little bit to let it sink in and make any modifications. Then propose it to the approval committee and once approved we start on a plan to integrate it into the current system.

With limited resources and the flexibility to work on the development server we first limit the new features to internal IP’s. This helps us test the functionality on the development and production servers without having to replicate the whole system in house. It also gives us a realistic idea of the load it is putting on the server.

Large features usually have a pilot department and we work out all the bugs before releasing to general population but features like this we will use internally for a week or two until we feel they are production ready. Using the features on a daily basis is the best way we have found to get the bugs and annoyances out.

This feature is still in the approval process but as it evolves we will post more info about it. New features are always exciting, I am glad we have a place to talk about our design process and upcoming features. If there is anything you would like to see or have us talk about just drop us a line.

[Friday Links] The Practical Edition

So we made it a month, its great to see the readership grow. This week has been one of getting things done and blog neglection. The articles of the week reflect the same mentality in the blogosphere (lolz at the busswords).