New Virtual Campus Tour launches on UA.edu

Today we are excited to announce the official launch of UA’s new virtual campus tour on UA.edu. Certainly 360-degree tours have been around a while, but we feel this tour differentiates itself from traditional smaller Quicktime-based 360-degree movies in a number of ways, and injects new life into the format by creating a pretty impressive experience for users.

This tour utilizes high-quality 360-degree photography in an immersive and interactive Flash-based environment to showcase our beautiful campus, and allows visitors to see campus as if they were actually here. Visitors can navigate through various key locations on campus, and click, drag and zoom around each photo to explore each location. They also have the opportunity to learn more about each location and the programs and opportunities that each location represents.

Our intent for this tour was to build something to capture the beauty of our campus, but to do so in a way that is student-centered and that showcases the wide range of academic and social opportunities at UA. We have attempted to capture the Alabama experience by creating photos that “feel” like UA.

This new tour is a key new piece for us that will enable us to showcase our campus, recruit students, and appeal to all of our audiences. We’ll be aggressively promoting it throughout UA.edu and other areas, and feel free to find opportunities to do so in your work as well. Thanks to all who helped produce it, and please let us know if you have any questions or feedback.

• UA Virtual Campus Tour – http://tour.ua.edu/virtual/

By the way, the vendor we worked with on this project is Virtually Anywhere, http://www.virtually-anywhere.com/. Kudos to Carrington Weems and his team for helping us put together a first-class tour!

Interactive Campus Map v2.0

So, here we are:  nearly a year later and yet another Google Maps post.

This new version is the next level of progression for the map, which includes some of these new features:

• Use of Google Maps’ default map tiles which shows all streets and other landmarks
• Overlay of all buildings that sits on top of the default Google Maps tiles
• Addition of Driving Directions to/from each building to any address
• Addition of Walking Directions to/from each building to any address
• Wide screen, which leads to much more viewable space
• Links to other key campus maps

While the previous iteration was useful and a big improvement over what the campus map used to be before Google Maps, I think this direction is the right one to take.

The biggest advantage of this update is that the building overlay is being dynamically generated by UA’s Cartography Lab.  This means that whenever a building is added or removed from this overlay, you will immediately see the results.  With the other map, anytime a building was changed it would mean cutting up the images (it better be exactly the same!) and all of that mess.

The biggest disadvantage of this update is that, due to UA’s recent construction, the roads aren’t really matching up with the buildings.  This has more to do with Tuscaloosa not being a major metropolitan area, thus having to wait on Tele Atlas to update their tiles for the University.  Eventually they will match up with our ever-changing campus.  However, I think the advantages far outweigh any disadvantages from doing this.

Without further ado, here is the new campus map:  http://tour.ua.edu/map

Let me know your feedback and opinions in the comments.

Looking for the previous custom Google Map?

Click here if you want to see the old campus map.  I have kept it around for informational purposes.

Common style sheets across multiple sites

While designing UA News, Dialog, and Research Magazine, it quickly became apparent that the similarities between the three sites lent itself well to using a common style sheet.  Because these sites share content and are related in some way, it was important that the design elements should be similar across the board to create that feeling that they were all connected—a suite of sites. Creating this sense of connection is something that the Admissions sites have done very well.

In order to make this common style sheet work, I needed two files:

• common.css
• style.css

The common.css file held 95% of all basic styles, margins, paddings, colors, and whatever else is needed.  Ideally, I wanted each site to pull as much from this CSS as possible and, where needed, overwrite the common styles with specific directives from style.css.

A very simple, but great, example of how this is useful can be seen with each site’s text headings.

common.css

h1, h2, h3, h4, h5, h6{
	font-family:Georgia, Verdana, sans-serif;
	font-weight:normal;
	color:#2e363a;
	margin-bottom:10px;
	padding-bottom:5px;
}

Research Magazine style.css

h1, h2, h3, h4, h5, h6{
	font-family:Arial, Verdana, sans-serif;
}
h1{
	color:#333333;
	border-bottom:#333333 solid 4px;
}

As you can see, the common font is set at Georgia plus a few other such as color and padding. To create a unique look on Research, all I do is declare a new font and other styles on my site specific style sheet.

The main advantages of using multiple style sheets is that it makes it easier to make changes to generic styles across all sites quickly.  The disadvantage is that it can sometimes be hard to manage.  Some may cite performance issues, but the style.css files are so small I can’t see that being a problem.

With all of that being said, I think the advantages of being able to control 95% of the styles for three sites in one file far outweighs the disadvantages.

Display Tags in 3 Columns

If you’re tired of all of the tag clouds you see out there and just want a simple list that you can browse through, then this bit of code is for you. In WordPress, there are convenient functions to list all tags (and categories) outside of The Loop in an unordered list. However, this doesn’t make good use of horizontal space and can get out of hand quickly if you have a lot of tags. But, the advantages of having an alphabetical listing is worth the extra effort.

For this particular example, let’s assume we want to list our tags on the archives index page.

<?php
$tags = get_tags();
$tags_count = count($tags);
$percolumn = ceil($tags_count / 3);

for ($i = 0;$i < $tags_count;$i++):
    if ($i < $percolumn):
    $tag_left .= '
	<li><a href="'. get_tag_link($tags[$i]->term_id) . '"rel="tag">' . $tags[$i]->name .'</a></li>
' . "\n";
    elseif ($i >= $percolumn && $i < $percolumn*2):
    $tag_mid .= '
	<li><a href="'. get_tag_link($tags[$i]->term_id) . '"rel="tag">' . $tags[$i]->name .'</a></li>
' . "\n";
    elseif ($i >= $percolumn*2):
    $tag_right .= '
	<li><a href="'. get_tag_link($tags[$i]->term_id) . '"rel="tag">' . $tags[$i]->name .'</a></li>
' . "\n";
    endif;
endfor;
?>
<ul>
<?php echo $tag_left; ?>
</ul>

<ul>
<?php echo $tag_mid; ?>
</ul>

<ul>
<?php echo $tag_right; ?>
</ul>

The majority of this code was modified from a two column version I found on the WordPress Forums, but since I needed three columns I had to take it one step further. The great thing about this code is that you can adapt it to output the tag RSS feeds by simply adding feed before the rel tag. For example:

$tag_left .= '<li><a href="'. get_tag_link($tags[$i]->term_id) . 'feed "rel="tag">' . $tags[$i]->name .'</a></li>' . "\n";

Here’s the code in practice.

If, for some reason, you really really love tag clouds and you think this code is a waste of time, you may want to check out some best practices for using tag clouds.

Automatically add links to WordPress image captions

As I mentioned in my previous post, the UA News sites have a few custom functions that improve upon certain things WordPress does (or does not do) by default.  One such function is automatically adding a link to the captions for a high quality image. When a user decides to link the thumbnail of an image to the full sized version, WordPress does not store that information in the database. This makes it particularly difficult to determine what’s going on with that image since things are being done on the front-end.

I have seen some solutions such as using the HTML editor to manually add a link to the caption shortcode, but this is messy, complicated, and at risk of being wiped out when switching back to the Visual editor. I have also seen a solution that adds a link below each picture, but it was just to a general URL and not the larger version of that image.

After coming up empty, I managed to come up with my own solution by:

1. Overwriting the caption shortcode with a custom function
2. Using Regular Expressions

If you haven’t already created a functions.php file for your theme, you will need to do so now.  Once you have created that file, add this code.

function nwp_caption_shortcode($attr, $content=null){	

	if ( defined('CAPTIONS_OFF') ){
		return $content;
	}

	extract(shortcode_atts(array(
		'id'	=> '',
		'align'	=> 'alignnone',
		'width'	=> '',
		'caption' => ''
	), $attr));

	if ( 1 > (int) $width || empty($caption) ){
		return $content;
	}

	$hq_url = preg_match('/<a>]+href="([^"]+(png|jpeg|jpg|gif))"[^>]*>/', $content, $matches);
	if($hq_url) $hq_output = "<a href=".$matches[1]." class="photo">High Quality Photo</a>";

	if ( $id ) $id = 'id="' . $id . '" ';

	$output = '
<div style="width:' . ((int) $width) . 'px;">'
	. $content . '
' . $caption . '
' . $hq_output . '</div>
';

	return apply_filters('nwp_caption_shortcode',$output);
}

add_shortcode('caption','nwp_caption_shortcode');
add_shortcode('wp_caption','nwp_caption_shortcode');

Basically, we are creating a new function called “nwp_caption_shortcode” then searching through the caption to find an href that points to an image and if found, output a High Quality Photo link.

The important bit is this regular expression search and replace.

	$hq_url = preg_match('/<a>]+href="([^"]+(png|jpeg|jpg|gif))"[^>]*>/', $content, $matches);
	if($hq_url) $hq_output = "<a href=".$matches[1]." class="photo">High Quality Photo</a>";

I am by no means a RegEx expert so if anyone sees room for improvement, feel free to comment.

Here is an example of the final result.

One way to do rounded rectangles with CSS background images

I recently completed a redesign of the K-12 Summer Programs website, which provides information on UA summer camps for young people, from toddlers to high school students. The page layout comes from a standard template I use for Undergraduate Admissions microsites, with a crimson nameplate bar at the top of the page and a gray footer at the bottom. This particular microsite is customized with a background taken from the print brochure for K-12 Summer Programs.

I decided to use rounded rectangles as containers for the information about each summer camp. There are a number of ways to make rounded rectangles, but I thought I’d quickly explain the technique I used in case anyone else finds it useful.

I should mention that I considered using the CSS3 border-radius property, but it is not supported by Internet Explorer, and I decided the rounded rectangles were too important to the site’s design to have 75% of users not see them.

Basically the method I used was to separate each rounded rectangle into 3 divs. One div (campboxtop) forms the top of the rounded rectangle, another (campboxbottom) forms the bottom of the rectangle, while the div in the middle (campbox) holds the content for each camp.

The way to do this is pretty simple. In Photoshop or your image editor of choice, just create a rounded rectangle of the size you need. Then, crop out everything except the top part (something like this). Make sure that your crop leaves the curve of the corners so that it can be joined smoothly with a rectangle below it to form the rounded rectangle on our page.

Export your top rectangle to the appropriate web format (.gif or .jpg), and then undo the crop so you are left with your original rounded rectangle. From there, do a crop of the bottom of the rectangle the same way you did the top and export it to web format.

Now you have the background images for the top and bottom of your rounded rectangle. At this point, you can write the CSS that puts those images to use, which in my case ended up looking like this:

.campboxtop {background-image:url(images/campboxtop.gif);
background-position:top center;
margin-top:20px;
display:block;
width:540px;
height:19px;
}

.campboxbottom {background-image:url(images/campboxbottom.gif);
background-position:bottom center;
display:block;
width:540px;
height:19px;
}

.campbox {background-color:#eae5d1;
padding:1px 20px 1px 15px;
}

Note the use of 1px padding on the top and bottom of the campbox div. I found that using no padding there resulted in a gap between the bottom part of the rounded rectangle and the campbox div.

Within the campbox div, I use an h2 and paragraph tags to mark up the content. Combining that with empty divs for the top and bottom of the rectangle, the HTML for one camp entry looks like this:

<div class=”campboxtop”></div>

<div class=”campbox”>

<h2>Capstone Summer Honors Program</h2>

<p class=”campdate”>June 1 – July 5</p>

<p>Would you like to earn college credit while getting a taste of college life—before you graduate from high school? Check out the Capstone Summer Honors Program. Through this program, you can enroll in 2 three-hour, college-level courses and in a one-hour honors course during the first term of the UA summer session. You’ll stay in a UA residence hall, dine in one of the many Bama Dining facilities, and enjoy membership privileges at the Student Recreation Center. For qualified high-school juniors.  Priority deadline: March 30. The cost is $1500.00. </p>
</div>
<div class=”campboxbottom”></div>

I tested the K12-Summer Programs website in Firefox, Safari 4, Internet Explorer 6/7/8, and Opera, and it worked fine in all. Better cross-browser support of the CSS3 border-radius property will certainly make it easier to work with rounded rectangles, but the technique outlined above is working in the meantime.

View K-12 Summer Programs website

New UA News Center launched

Today we have relaunched UA News as well as Dialog, Dialog Extra, and Research Magazine.  This presents a major technological shift because these suite of sites are all running on WordPress.  These sites blur the lines compared to previous endeavors by sharing common user-focused design and functionality as well as spreading our best content across all of these sites.

Shifting to a more dynamic setting allows us to disseminate our content much faster and more effectively.  I think you will find the functionality of these sites to be MUCH friendlier than before because everything is categorized, tagged, and searchable.  You’ll also find a greater range of options for extending our content whether it be subscribing by e-mail or topic-specific RSS feeds, sharing using various social media platforms, or simply browsing by topics that interest you.

I’m excited for everyone to try out the new sites and see all of the cool features that have been added.  WordPress is very flexible and I have come away from this experience impressed with it as a platform.  At this point, I’m surprised when it can’t do something.  There’s a lot of custom code and functions that I’ve implemented and look forward to sharing them with you all, so stay tuned for those posts in the future.

In the meantime, please take a moment to browse the sites and let us know what you think.

• UA News
• Dialog
• Research Magazine

Analytics 360 Webinar available

OIT purchased the Analytics 360 webinar series from Higher Ed Experts. It’s a three-part series on measuring results from your online initiatives, both web and e-mail. I found it definitely worth the three hour time investment. Because of our purchase, anyone at UA can view the recorded webinars and download the associated materials until April 10. I don’t want to publish the access information, so please e-mail me at jaclyn.whitehorn@ua.edu if you would like it.

Job Opening: Web Communications Student Assistant

Web Communications Student Assistant

Position Summary:

Student occupying this position assists in the design, implementation, and ongoing maintenance of institutional web sites for the Office of Web Communications.  This student aids in the day-to-day management and workflow of UA Web Communications web sites, and is responsible for designing, editing, and posting content on highly visible institutional web sites.

Minimum/Preferred Qualifications:

Strong HTML and CSS skills are required, along with a working knowledge of JavaScript.  Also required is a proficiency in using Dreamweaver and Photoshop to create web pages and create and edit images.

The ideal candidate would possess a strong work ethic, be well-organized and very flexible, and be willing to learn new technologies and skills.  The ideal candidate would also be very trustworthy and responsible.

Experience with using WordPress or similiar content management systems helpful but not required.

Additional Information:

This position is ideally-suited for students in management information systems, computer science, or communications fields, although it is open to all students who meet the required skills and attributes.  The position would ideally work a regular 20-hour work schedule year-round.

Special Instructions to Applicants:

To apply, please submit a resume and a listing of all web sites (with URLs) you have previously designed or to which you have contributed toward the design.  Also please include three references.

Pay rate for this position is commensurate with the candidate’s experience and skillset.

• APPLY FOR THIS POSITION NOW

Flash Detection using SWFObject

I thought I would expound a little bit on the Flash detection we are using in the new UA Video Newsroom (and elsewhere). Andy mentioned it briefly, but I would like to explain in more detail why I went this route.

The previous method we were using was Adobe’s Flash Detection Kit. Up until recently, this was truly the best method for trying to create a better experience for users when they encountered Flash. However, the practical application of this code made adding videos to your page convoluted and confusing.

I wanted a simple to integrate and easy to read solution. Luckily, a natural successor to the Flash Detection Kit is out there and it’s called SWFObject.

What is SWFObject and why is it better than Flash Detection Kit?

• It’s an open source code base
• Offers a Javascript API that allows me to dynamically work with our Flash content
• Allows me to deliver multiple forms of alternate content I want (more on this shortly)
• Active with only one Javascript file
• SEO-friendly embed code

Alternative Content

Delivering alternative content is essential to make our users aware they are missing something by not having Flash installed or not having Javascript enabled. If you simply did no detection at all, users can encounter a few different things depending on what is or isn’t installed, but worst case scenario is that nothing is displayed.

This is what you could encounter if you have Javascript enabled, but no Flash installed:

Now, we can do some cool stuff with SWFObject. The best part is that we can integrate Adobe’s Auto Install SWF with a simple variable declaration and local file. Using this method shows a dialog box to install the latest version of Flash and, after installing the update, it automatically brings the user back to the previous page.

If for some reason, the user has no Flash installed or Javascript turned off, they will simply receive this message:

“This page contains video that requires JavaScript and a recent version of Adobe’s Flash Player. Download the latest Adobe Flash Player now to view this content.”

Ideally, the Adobe Auto Install initiates.  and at the very least, the user will be presented with a link to download the latest version of Flash.  If you have any Flash video to embed on your websites, I recommend using SWFObject.