Tag Archives: middmedia

Weekly Web Development Round-up October 10-21, 2011

To give our colleagues a better idea of what’s changed in our web applications each week, we’ll be preparing this quick list for publication each Friday. Not all of the details of each change are included below, but we’ll be happy to answer any questions you might have in the comments.

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.

Enhancements to MiddMedia Video Hosting Application

For those who may not know MiddMedia is an audio/video storage and streaming service hosted by the college for Middlebury College users. To share a video with others you must embed it in a website visible to your intended audience. Documentation is available here.

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!

Weekly Web Development Round-up May 30-June 3, 2011

To give our colleagues a better idea of what’s changed in our web applications each week, we’ll be preparing this quick list for publication each Friday. Not all of the details of each change are included below, but we’ll be happy to answer any questions you might have in the comments.

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

State of the Site

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

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.

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.

WordPress

WordPress usage has been growing over the last few years at Middlebury and beyond.  In late August, we updated WordPress to v3, a major new release to this platform that introduced features such as custom menus and top navigation that extended its usefulness beyond blogging.

Plugins and New Functionality

Themes and User Experience

We created a number of blog themes for WordPress based on design prototypes developed by White Whale (designers of the main college site).  These blog themes were updated to take advantage of new functionality and to generally provide a flexible, easy to use templating framework that could generate extensible thematic variations and would work on multiple platforms, including mobile and touch enabled.  New features developed in the last 6 months include:

  • Introduction of a standardized header on all blogs that provides quick links to create a new blog, search blogs and a given site’s dashboard
  • New standardized widget areas including 3 sidebars and 4 footer areas
  • Introduction of support for custom menus and top navigation bar for mapping a site’s information architecture (IA)
  • Refinements to navigation UI to highlight current location in IA and provide more navigation links in context to improve usability on sites with many pages (such as sites for courses, projects or documentation)

Usage Analysis

Perspective, an aggregation and usage analysis tool was developed to keep track of how WordPress was being used, what plugins and themes were most popular, which blogs were most active in a given time period and so on.  We also built into Perspective tools for communicating with users so that we could more easily identify all users of a given set of features to allow us to inform them of updates or issues.  These same tools when combined with activity filters have allowed us to identified inactive sites, contact their owners and archive or delete these sites as appropriate, providing the foundation for a contention retention policy.

Video tutorial quick start

Joy and I created some short video tutorials on finding music CDs in MIDCAT, and since we posted them here we’ve been asked by various people within LIS to share what tools we used to create them. We were looking for a quick way to create screen capture videos with audio (aka screencasts). Here’s what we used:

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.

Faculty Innovators Tell Us What They Need

Our first priority with the Segue from Segue project is to make sure there are technology solutions available to meet the needs of as many faculty, students and staff as possible. That said, we would like to also be able to support innovative uses of technology, particularly those innovations that may eventually be useful to the broader community.

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