Main site and mobile site speed improvements

Our main website and mobile website make fabulous use of data feeds from blogs, calendars, Twitter, and other sources to provide up-to-date news and information to users of the sites. Some pages in the main site have as many as 3 feeds in the carousel at the bottom of the page and another 2 feeds in sidebars. The mobile site displays 7 feeds on its home page for desktop users.

Unfortunately displaying all of these feeds on the site was causing performance problems for users when those feeds needed to be refreshed.  Even if the blog system returns each feed in under a second, that time adds up and was making users wait for 10 seconds or more for some pages to load.

We are happy to announce that we have now resolved this issue by piping all of our data-feed access through a system we call FetchProxy. FetchProxy sits between Drupal and the source of the data feeds and keeps a fresh copy of the feed always available so that Drupal never has to sit and wait for feeds. Pages that once took more than 10 seconds to load, now load in 1-2 seconds. You can read more about FetchProxy on Github.

Campus Map

We’ve updated the interface for our Campus Map with the help of designers in College Communications. New features include a list of locations with quick icons to help you find special locations, a search interface, an improved photo gallery, and more special filters which allow you to scope the locations on the map. For instance, you can get a map of all the locations on campus with Wireless.

MiddMedia

A permalink is now available for each file in MiddMedia. You can access it for a particular video you click the “Embed Code & URLs” next to any video you are browsing in MiddMedia and click on the “Click here to view and/or download this file.”. Alternately you can construct this URL like this “http://middmedia.middlebury.edu/middmedia/view/dir/[the directory where the file is located]/file/[the name of the file with its extension]

Example: http://middmedia.middlebury.edu/middmedia/view/dir/lafrance/file/go.mp4

This is useful if you want to reference your video without embedding it elsewhere.

The Web Application Development Team has been hard at work making enhancements to the MiddMedia application in order to better support mobile platforms, the current HTML5 standards, and our users. Below are some of the enhancements that have been made in the past month.

• As part of the recent HTML5 standard, modern browsers support the native playback of video files using an HTML5 video tag. All videos uploaded to MiddMedia are now encoded in both H.264 and WebM formats so that they can be played natively in browsers that support H.264 (IE 9, Safari, iOS) and WebM (Firefox 4, Chrome, Opera, Android), and allow better support for mobile browsers.
• When uploading a video, you can now select the quality that will be used when the video is transcoded (original, 360p, 480p, 720p, 1080p). Previously a single standard of around 480p was used unless the videos were encoded in Mp4 or Flv to start with. Now you may choose additional high-def qualities (NOTE: Does not upscale video), or original to preserve quality as closely as possible during encoding to multiple formats.
• Embed code references the Mp4 and WebM versions of the videos for HTML5 compliant browsers. All others will fall back to a Flash player (the recently updated Strobe Player). Videos embedded in the Drupal site with the video short code also display in this manner. Instructions on embeding videos from MiddMedia in Drupal are available here.
• Added basic support for M4a files. Users can now upload M4a audio files to MiddMedia. Quicktime may be required to preview them in the MiddMedia application. The WordPress MiddMedia plug-in allows you to embed m4a files in WordPress blogs/pages. You can add these to your posts as you normally would for other audio/video files. When the post is displayed, you will see the m4a with images in a video player if you are using Safari, or a link to the m4a file that users with other browsers can download and play in an application like iTunes or QuickTime. NOTE: To ensure your audio files will be accessible to the broadest range of listeners and devices, we recommend using the .mp3 format unless you have a special use case that requires m4a.
• A new show/hide feature will allow users to toggle show/hide behavior for folders in MiddMedia. For users who only have access to a single personal folder this feature will not be of much use, but for users with access to several shared directories this will help with navigation of multiple folders with many videos.

We hope you enjoy the new enhancements!

Drupal

• Did you know that you can “geo tag” any content on our site? It’s true! When you’re editing, you’ll see a field labeled “Location”. If you expand this, you can add an address to the content you’re creating. Most addresses can be automatically translated into a latitude and longitude by our system, allowing us to create maps highlighting that content. We’re going back and adding locations to stories to make our Middlebury Around the World page more interesting, but keep this in mind as you edit the site.
• The Preview button has been temporary disabled while we fix an issue where all permissions would get wiped out when you previewed your changes to content. We know what was causing this to happen and will have a fix shortly after a few of the edge cases are dealt with.
• Videos from MiddMedia in most of our supported web browsers now play using the native HTML5 video player. Browsers that support this feature include Internet Explorer 9, Firefox 4, Chrome, Safari, Opera and the mobile browsers for iOS and Android devices. If you are using Firefox 3 (including 3.5 and 3.6), Internet Explorer 7, or Internet Explorer 8 you will still see the Flash player as these browsers do not support HTML5 video.
• Additionally, MiddMedia videos on the site will now use the “full frame” poster image by default, which doesn’t include the “play” icon, but you can toggle between playing and pausing a video by clicking on it.
• When creating a Story, there are now buttons to select the image instead of autocomplete text boxes. Clicking the button brings up the site tree so you can select your image (with a preview) from the page where you saved it instead of blindly hoping the “smiling_students01.jpg” is your image. This feature will be rolled out to more content types shortly.
• XML sitemaps are now available for all of our Drupal-based sites. These files help search engines find content on our site. Middlebury’s sitemap is at http://www.middlebury.edu/sitemap.xml
• Modules updated this week: Custom Permissions, Monster Menus, Media, RSS Page

Library Systems

• As announced previously on the LIS blog, the Library Quick Search widget on the Library home page now includes a search form for Summon, a tool that searches across Midd’s many different collections at once.  New tabs, and other changes based on feedback and user study were also rolled out.

MiddMedia

• All videos uploaded to MiddMedia are now encoded in both H.264 and WebM formats so that they can be played natively in browsers that support H.264 (IE 9, Safari, iOS) and WebM (Firefox 4, Chrome, Opera, Android).
• When uploading a video, you can now select the quality that will be used when the video is transcoded (original, 360p, 480p, 720p, 1080p).

WordPress

• We’ve added localization files for French, Spanish, Italian, German, Japanese, Arabic, Russian, Portuguese, and Hebrew as part of the work to translate and localize our WordPress themes.
• We’ve added domain mapping support so that blogs like http://sites.middlebury.edu/middmag could be served up using their own domain names like http://www.middmag.com.
• WordPress version update: 3.1.3
• Plugins updated this week: Email Users

Overview

What follows is a report on the state of notable web applications and sites in use at Middlebury including the College website, the Middlebury instance of WordPress (i.e. sites.middlebury.edu) and a variety of key web applications that provide services widely used by faculty, students and staff.

Box Office

• Addition of separate billing and shipping addresses when ordering tickets or gift items from the box office, especially useful for parents purchasing items for students.
• Improved the user interface to make purchasing as a returning customer and identifying seat locations in the seating chart simpler.

CAS – Single Sign On

The Central Authentication System (CAS) was introduced last year and allows you to move between many of our web applications after you’ve signed in once. GO and the main college website were already using CAS this time last year but since then it’s been added to many other applications, including:

• Course Catalog
• MediaWiki
• MiddMedia
• WordPress

Course Catalog

Over the past two years we developed the Course Catalog application at catalog.middlebury.edu to serve as a clearing house for accessing course information on the web due to the limitations on searching for this information via BannerWeb. The Course Catalog application allows users to search for courses based on a wide variety of criteria (including keyword searching) and properly displays and links-together cross-listed courses. The Course Catalog application also feeds course information to the department pages and faculty profiles in the main Drupal site.

New for this year, the Course Catalog has been extended to add a Schedule Planning tool that allows students to bookmark courses they are interested in, then group them together into weekly schedules to ensure that they do not have timing conflicts and that lab and discussion sections are chosen. These schedules can be printed or emailed to one’s advisor.

• Added the Schedule Planning tool.
• Users can now bookmark courses that they find interesting.
• Updated the theme to match the new website. Added a custom theme for the MIIS catalog.
• The printed Catalog is now created via an export from the Course Catalog application rather than being copy-pasted from the site by hand.
• PDF snapshots of the Catalog are now automatically generated as course descriptions and requirements get edited over the year.
• Lots of small improvements to the display of course data in search results and while browsing.
• Can now search for courses by campus — needed for Language Schools that have more than one site.
• Greatly improved the speed of the application.
• Improved the feed of courses to faculty profiles to ensure that cross-listed courses are ordered properly.
• New admin forms that allow the Registrar to suppress incomplete information about upcoming terms during data-entry.

Drupal

• Alerts: Though it hasn’t been needed yet, there is now a special alert bar that will appear on the site in the case of a campus emergency.
• Athletics Database: Many improvements, including results automatically posted to Twitter and a site that tracks the live feeds for each event.
• Calendars: Added a content type to allow offices to embed promotional calendars of their events on their department page. Updated event calendar interface to make it easier to use and added Featured Events. Clicking on items in the calendar view open in the same window (preserves page continuity). Daily breakout of events is much more pleasing to look at.
• Editing: Upgraded the WYSIWYG editor to resolve issues in Safari and Internet Explorer as well as allow pasting from MS Word without needing to use the button.
• External Links: Links to external sites will now open in a new browser window or tab automatically, though editors can choose to override this for specific links.
• Locations: You can add geo-locational information to any piece of content on the site by expanding the Locations section when editing.
• Meta Tags: A description of the content is now automatically added to each node, improving search results. Editors can customize the description and keywords.
• MiddLab: Added a content type to allow offices to embed a sidebar feature to display MiddLab projects happening in their area.
• Previews: Added a “Preview Live Site” checkbox to the Edit Console and a “Preview” button to the editing form.
• Printing: A special stylesheet allows you to print just the content of the page including contact information in the Address area.
• Search: Converted the main site search engine to use a Google Custom Search Engine to improve results, increasing our index from 175,000 pages to over 360,000 pages. You can also ask us to create a custom search engine for your part of the site. This complements the large review of Search functionality we conducted immediately after the site launch.
• Sharing: Added sharing buttons to news articles to let you send emails to friends, or post the stories to Facebook and Twitter.
• Webform: Many new features including multi-page forms, validating responses, and email templates.
• Video: Videos from MiddMedia and YouTube now use the HTML5 player in supported browsers and devices allowing you to watch them on iPhones and iPads. You can now add YouTube playlists. We also now support the use of autoplay, autorewind, loop and image attributes in videos.
• LIS Pages: Problems with this Page? link on LIS pages allows you to report an issue with the content on a page such as a spelling error, incorrect information, a broken link, etc. The submissions are reviewed by our newly assigned content managers.

GO

The GO shortcut/permalink application has become quite central to the web infrastructure of the college since its launch several years ago. It eased the launch of the new site by allowing links in content to be easily updated en-mass. In the past year GO has become central to our search strategy as GO shortcuts are now provided as suggestions and automatic-redirects when you enter search terms on the main site.

• Totally new editing interface.
• Verbose, color coded, messages to indicate successful or unsuccessful completion of actions.
• Additional input validation to preserve shortcut integrity and prevent abuse.
• Ability for community to flag GO links as inappropriate.
• New “Info” pages for every shortcut allow everyone to see detailed information about the shortcut such as who maintains it, what its aliases are, and where it goes.
• All GO shortcuts are now shown publicly in the GOtionary (with the exception of a few internal shortcuts) to improve the transparency of the system.
• Enhanced admin interface for flag admins and the new super admin role.
• Can now switch between the Middlebury and  MIIS GOtionaries.

MiddMedia

• New “Midd” theme integrates more closely with the current Middlebury theme.
• Add to MiddTube button allows users to check off the videos they would like to batch add to MiddTube as video posts.
• We’ve upgraded to Flash Media Server 4, with a lot of new features that we’ll be rolling out and supporting in the coming months.

New Sites

We’ve been able to expand the Drupal and WordPress platforms to add a CMS experience for sites that were previously static HTML files and create new sites to show off and assist student research and projects.

• Davis United World College Scholars Program
• Projects for Peace
• MiddLab
• MiddSTART
• Middlebury College Museum of Art

SubjectsPlus

In December, we upgraded from version 0.7 to 0.9.  Changes include:

• Enhanced security.
• In addtion to Research by Subject, two new guide types are available: Research by Course and Research by Topic.
• Widget-based, drag-and-drop control panel for content creators.
• Multiple subject specialists (guide owners) now possible.
• Description field override.  This allows for a resource description to be customized for one or more guides, while still allowing the resource record to be shared among all the guides.  This cuts down on duplication of records and/or breaking others shared work.
• Cloning feature

What do we use this for, you ask?

• Databases A-Z list
• Research guides (access via sidebar at go/lib and go/subjectguides among other places.)
• globally adding EZproxy prefix for off-campus access.

Equipment needed

USB microphone or headset (available for checkout at Davis Family Library, Armstrong Library, & the Music Library)

Tools needed

Community clips (click to download; for info, click here)

Any Video Converter (click to download; for info, click here)

Upload space (Middmedia; 500MB of space, free to all Middlebury College users)

Publishing platform (e.g. LIS Blog/Wordpress, or a wiki, or a course website)

Steps

1. Create a script and practice. Keep it simple; don’t use jargon (if you must, then explain it!) Keep your video short and to the point!
2. Using Community clips and the microphone, make your video.
3. Use Any Video Converter to convert the file from the .wmv to .mp4 (mpeg-4) file format. (NB: With a bit of trial and error, we set the conversion frame view to 720×576 and the bitrate to 768, but you should experiment and see what works best for your needs.)
4. Upload your video to Middmedia.
5. You can now embed your video directly from Middmedia into your blog, wiki, or website, or get a link to send it via email. To embed the video in this WordPress blog, we followed the instructions here.

The Middmedia page on the LIS Wiki has lots of information on how to embed video in the wiki, on blogs, and elsewhere.

There are other tools that make it easy to make video screen captures (like Jing). Take some time to explore the options, and please feel free to share tips and info. here so we can all learn from one another. Thank you to Dan Frostman for sharing Community clips with us, and to all the creators and contributors to the wiki documentation on Middmedia.

To this end, the Curricular Technology team invited a number of faculty who are innovators to show us how they have been using technology and tell us what they need.  Faculty who participated included Jeff Byers (Chemistry and Biochemistry), Hector Vila (CTLR), Enrique Garcia (Spanish), Hope Tucker (Film and Media Culture) and Roberto Veguez (Spanish).  A number of academic liaisons also participated in this session.  To learn more about what these faculty have been doing, see:

Segue from Segue » Presentations by Faculty Innovators

The Adobe Flash Media Server (FMS) — the software on MiddMedia that handles streaming the video data to clients — only supports the MP3 Audio (.mp3), Flash Video (.flv), and MPEG-4 video with H.264 encoding (.mp4) formats. Up until this point, users were required to convert their videos into one of the two supported video formats before uploading them to MiddMedia. Depending on the user’s operating system and the software they have installed, this could be a challenging proposition. With this update, videos in a variety of formats can be uploaded directly to the MiddMedia server where they will be automatically converted.

When you upload a video of another format to MiddMedia now, you will at first see a placeholder video with the message “Converting Video, Please Wait”. You may make use of the embed code or links for the video at this point, even while the video is being converted in the background on the server. Once your new video is ready it will replace the placeholder when you refresh the page.

Depending on the number of users uploading videos at the same time, conversion may take anywhere from a few minutes to an hour or more. If an error occurs, the video will display a message of “Conversion Failed” rather than the “Converting Video, Please Wait” message.

Server-side video conversion is being handled by FFmpeg, an open-source video conversion tool that supports 157 container formats and 289 audio and video codecs. We are launching this update to MiddMedia with support for a limited number of formats, however we can easily enable any additional ones that are also supported by FFmpeg.

Currently supported video formats:
(see the wiki for an up to date list)
No conversion needed:

• MPEG-4 video with H.264 encoding (.mp4)
• Flash video (.flv)

With conversion:

• .avi – Audio Video Interleave (video/x-msvideo)
• .asf – Advanced Systems Format (video/x-ms-asf)
• .dv – Digital Video (video/x-dv)
• .m4v – iTunes Video (video/x-m4v)
• .mj2 – Motion JPEG 2000 Video (video/x-motion-jpeg)
• .mjp – Motion JPEG Video (video/x-motion-jpeg)
• .mjpg – Motion JPEG Video (video/x-motion-jpeg)
• .mkv – Matroska Video (video/x-matroska)
• .mov – Apple QuickTime Movie (video/quicktime)
• .mpeg – MPEG Video (video/mpeg)
• .mpg – MPEG Video (video/mpeg)
• .ogv – Ogg Vorbis Video (video/ogg)
• .qt – Apple QuickTime Movie (video/quicktime )
• .rv – Real Video (video/vnd-rn-realvideo)
• .wmv – Windows Media Video (video/x-ms-wmv)

This uses the format [video:URL width:X height:Y align:left/right autoplay:1/0]. For example:

[video:http://www.youtube.com/watch?v=G8pPiS7aUGY width:300 height:350]

I also extended this by creating the MiddMedia Video Filter module which uses the same syntax as the Video Filter module, but allows you to add videos from our local streaming media server, which supports flv and mp4 video as well as mp3 audio. All the optional parameters work for the videos, but you can’t set them for the audio player. For example:

[video:http://middmedia.middlebury.edu/media/imcbride/walkingTour.flv width:400 height:300]

[video:http://middmedia.middlebury.edu/media/imcbride/Google_Reader2008-12-04.mp4]

[video:http://middmedia.middlebury.edu/media/imcbride/WS_30019.mp3]

Mike Schuster
- Several Revisions to Room Draw SSB forms and lots of testing
- Added new student search dropdown box and removed boxes used by students to enter group member IDs.
- Modified procedures so as each student is selected, several eligibility checks are made.
- Modified message text displayed when students are ineligible.
- Modified WebTailor Infotext for links.
- Added logic to allow the group representative to remove group members when they’ve accidentally selected one.
- Created a database view of instructors to be used by new online catalog web page.
- Modified web directory script to correctly select on leave graduate students during winter term.
- Created database tables that will be used by custom Monterey web admissions applications forms.
- Assisted the registrar’s office with running the Term Student Type Update program(SHRTYPE) and the Learner Curriculum Conversion Program(SOPLCCV).
- After the registrar’s office runs SHRTYPE for a particular term, I create a population selection in Banner and run SOPLCCV with that popsel.
- Reviewed Clearinghouse Self-Service Authentication documentation and sample code.

Liz Whitaker-Freitas
- Supporting Hyperion BI+ for functional & technical users

Ian McBride (Full list at: https://www.yammer.com/users/imcbride)
- Completed MiddMedia plugin for WordPress
- Assisted with completion of RFP for Web Makeover
- Created conference registration form for VCC
- Developed payment form for Print Management
- Modified Athletics Recruiting application to remove Primary Sport
- Designed database sync script for the Course Catalog
- Launched CSO and Judicial Boards sites
- Upgraded Key Survey to version 7.1

Travis Stafford
- Troubleshooting cForms issue
- Testing cForms 10.3
- Two cforms trainings (Chemistry Department, Institutional Planning and Diversity)
- Finished first wave of BLM implementation (is now live) as well as fixed various bugs
- List Manager Configuration for newsletters / MiddCMS Newsletter support
- General support and Heat tickets

Rob Pekor
- Re-aligned parent Donor codes for “Feb” students.
- Removed obsolete region codes related to “CA Mailing”.
- Enhanced existing “pledge installment” view.
- Investigate poor query execution between databases (production and non-production).
- Created table to hold local data for the Harris Online Community project.
- Sent sample dataset to Harris thus enabling them to begin on data mapping on their side of the implementation project.
- Continued to fine tune the web pages for Phonathon segment creation
- Created new indicator for “young Alumni” (alumni for only 1-10 years) for the Banner List Manager project.
- Create stewardship project codes for Athletics (ATHSTW) and the Axinn Center (AXNSTW)
- Rewrote of slow performing fiscal data view for CA

Chris Norris
Staffing
- Transition planning for organizational re-structuring with DAS staff, Area Directors, and workgroup leaders
Project Work
- Reviewed Phoenix BIA summary presentation
- Drafted spec for remote DR web presence
- Revised Banner-ListManager project requirements with DAS staff
- Revised Broadcast Email Newsletter request document
- Configured four new Broadcast Email Newsletter editions with DAS staff
- Completed work on 2008 Summary Web Statistics for Web Makeover project
- Completed work on Stakeholder Reports for Web Makeover project
- Completed work on GSA (Google Search) for MIIS sites
- Began configuration and setup of Google Apps for Education (alpha instance)
Meetings
- Participated in Web Makeover project team meetings
- Met with HR staff regarding OpenHire “internal job site” project
- Met with Brett Wilhelm regarding departure considerations
- Met with members of the web subcommittee of the Sexual Assault Oversight Committee regarding a new web presence
- Participated in College Advancement Operations team meetings
- Participated in Harris online community project team meetings
- Participated in Pay for Print project team meetings
- Participated in MIIS technology team meeting
- Participated in College Data Workshop with IR, Faculty, and other LIS staff
- Conducted final DAS staff check-in meetings
Systems Administration
- Ongoing monitoring and problem resolution of online services
- Configured new GO rewrite rules
- Ongoing tuning of GSA to improve search results
- Renewals of College-owned domain names
- Transferred UWAC domains to College-managed account
Help, Support, Training, Workshops
- Updated Middlebury’s United Way web presence (campaign stats)
- Provided support for Broadcast Email Newsletters, CMS editing, BLWC Submission Manager, HEAT tix, and various ad-hoc help calls
- Conducted a Broadcast Email Newsletter training with Young Alumni staff
- Conducted a Broadcast Email (advanced) workshop for CA staff
Vendor Related Activities
- Participated in Sun-Guard/SCT Banner DBA weekly status calls
- Participated in Velaris Hyperion SysAdmin weekly status calls
- Participated in Google Apps for Education project team call with Google
- Transitioned Hyperion SysAdmin vendor (Velaris) relationship managment to Jeff Rehbach
- Provided IMA (eCommerce) details for Harris online community project