Social Technology

XYZ is the latest and greatest.
Everyone is changing to ABC.
What? You're not using LMN?

Like the wind, technology for libraries is constantly shifting. Is it really necessary to learn all these new tools?

What do you and your students really need to know about the next generation of web development tools? Does everyone need to learn HTML5, CSS3, and computer programming skills?

Let's explore a few of the most common approaches to web development and consider what's practical for today's busy librarian.

Content Management Systems

Most schools have shifted to content management systems (CMS) for their website presence and information administration needs. A content management system is a computer program that allows users to create, edit, and publish content in a collaborative web environment.

While many schools use open-source options such as Drupal others have purchased large-scale tools that also include school-specific features such as student records. Some CMSs allow access with library data such as your online catalog and pathfinders. For instance, you can connect your LibGuides data with your Drupal site through exporting and importing XML documents. Library-oriented companies like Springshare are providing ways to improve the online experience for library users by building connections among data sets and tools.

In many cases, CMSs have useful tools for libraries that aren't apparent on the surface. For instance, if your school's acceptable use policy doesn't allow use of social media sites such as GoodReads or LibraryThing for online book clubs, see if you can set up a threaded discussion area in your CMS. It may take a couple extra steps to get into the system, but you can still accomplish the same goals.

Many of these large-scale systems also allow the creation of databases. For instance, you could create a local history digital image collection or student-produced ebook collection that could be accessed anywhere, anytime. The School Library System of the Genesee Valley Educational Partnership used Drupal to build WeBooks, a database to easily access their shared ebook collections. The Ann Arbor District Library used their CMS to create a digital recipe project.

Work with your IT people to explore the possibilities. Cushing Academy is an example of a school library that used Drupal to create their library website.

If you're in charge of your library website and you're ready for a change, consider a shift to an easy-to-use content management system. WordPress is a popular choice. Although WordPress is often associated with blogging, it can also be used to create individual web pages along with blogs, multimedia, and other elements. The WYSIWYG editor is intuitive and quick to learn. An endless array of themes and plugins make enhancements and expansion easy.

The Castilleja School Library uses WordPress for their school library website. The Dixie Grammar School Library uses a combination of WordPress and LibGuides to provide a web presence and resources for students.

Of course, WordPress is only one of the many web development tools available to librarians. For instance, Weebly is also a popular choice of school libraries. The Collins Hill High School Media Center uses Weebly as a tool for both individual web pages and a book blog. Although less powerful than WordPress, Weebly is a great choice for beginners.

HTML5, CSS3, and More

With all these great content management tools available, you may wonder if learning HTML and creating your own web pages is still necessary. Keep in mind that content management systems still have roots in programming. Basic skills come in handy whether tweaking your web page or fixing a problem with a template.

The latest version of HTML is changing the way web developers create and organize web content, particularly mobile-friendly websites. HTML5 is widely supported in the latest web browsers such as Google and Firefox, along with mobile browsers. In the past, many functions required Javascript or Adobe Flash to be successful. HTML5 is less dependent on these add-ons. It's also being infused into popular content management systems such as Wordpress.

It's time to make the shift to the next version of this markup language for the web. HTML5 uses a combination of HTML and XHTML syntax. If you're already an HTML user, it's easy to catch up with the latest changes. Let's explore a few of the new features you may want to incorporate into your school library website.
API. HTML5 uses Application Programming Interfaces (APIs) along with Javascript for added power.

The geolocation API can be used to identify the geographical position of a device. With the approval of the user, this location be used as part of augmented reality games, virtual field trips, and other learning experiences. For instance, the geolocation API is used by the Art of Stars website to show you the stars that you'll see at night from your current location. This is only one of many new features that are specifically geared to mobile devices such as student smartphones.

The <canvas> element is used to draw graphics in real time on a web page. You can also dynamically change content such as boxes, circles, images, and text in a specified area. If you've used Adobe Flash in the past, some of the basic features are similar. HTML5 also includes new graphic options such as opacity and gradient to enhance visuals. In addition, it supports the use of inline SVG images.

The drag-and-drop element is one of the coolest features of HTML5. It allows users to grab an object on the screen and drag it to a different location. In the past, Adobe Flash was necessary to accomplish this type of interactivity. The coding is easy to adapt for any purpose.

The Robot Nation website provides a great example of the drag-and-drop element. Users can build their own robots. For a fee, student robot designs can even be printed on a 3D printer. With HTML5 skills and a 3D printer, think of the great projects your students could create.

Markup. An array of new tags have been included in HTML5 including <aside>, <article>, <footer>, <header>, <nav>, and <section> tags. In many cases these replace commonly used blocks like <div> and <span>.

Forms allow end users to enter information to be stored or used by the website. New form inputs for specifying color, date, time, URL, search email, telephone number, and other inputs allow webpages to collect more information about users that can be applied to personalize websites, conduct searches, or answer questions.

Media elements. Multimedia features such as <audio> and <video> elements have replaced the generic <object> tag.

The Wilderness Downtown website is an example of how audio and video elements are combined with maps and other HTML5 elements to create an interactive experience.

CSS3. Along with HTML5, Cascading Style Sheets (CSS) continue to play an increasingly important role in web development. Skills in editing CSS are important when dealing with CMS templates. For instance, you may wish to change the background or font colors to match your school's colors.

Like HTML5, there are many new features available in CSS3. Explore a few examples below:

Many web developers are finding creative applications of the new options available in HTML5 and CSS3. For instance, these new tools allow authors and publishers to design new ways to tell stories. Explore the transmedia storytelling experience titled The Random Adventures of Brandon Generator for an example. Think about the future of web comics at SoulReaper.

These tools could also allow new ways to browse your school library in new ways. The WebGL Bookcase experiment shows an innovative way to browse and examine Google Books. This approach could be adapted for you library collection.

Beyond the basics. HTML5 is much more flexible than past versions regarding validation. Although an HTML5 browser accepts incorrect syntax, it's still important to learn proper markup to avoid problems. The best way to learn HTML is through the use of the free website. This series of tutorials takes participants step-by-step through learning to use HTML5 and CSS3.

Many advanced users are downloading HTML5 Boilerplate. This tool provides a mobile-friendly HTML template to get started creating web apps and mobile sites.

Google has taken a leadership role in promoting the shift to HTML5. Their HTML5 Rocks website provides many examples of using HTML5 for mobile development, gaming, and other applications.

Consider partnering with your technology department on web design projects. For instance there are many ongoing projects you could join. Many Chrome Experiments use code that you can download and modify for your own projects. For instance, The WebGL Globe contains information about global population, but it could be adapted by students for other purposes.

While HTML5 is still technically under review until the end of 2013, now is the time to make the shift.

Mobile and Social Technology

Increasingly, students demand access to your library anywhere, any time. It's important to think about whether your library website, catalog, and other web-based tools are available through mobile devices. From smartphones to tablets, students are choosing small devices rather than laptops or desktop computers to access your library. Can students easily download ebooks, search your catalog, and reserve books using these devices?

HTML5, CSS3, and JavaScript work together to help designers create mobile web apps. Tools such as jQuery Mobile allow librarians to develop fully-functional mobile-optimized web apps.

Boston College High School's Corcoran Library created mobile sites and apps optimized for mobile searching as part of their school's new cell phone policy that allows students to use smartphones in the school library for research.

When HTML5 and CSS3 are combined with mobile and social technology, new ways of visualizing and interacting with information emerge.

CNN's Ecosphere Project visualizes the Twitter messages related to the annual Earth Summit. Real-time data shows what people are thinking about and sharing regarding a wide range of environmental topics.


Spend some time evaluating your school library web presence. If your static pages haven't been updated recently, it's time to rethink your website. Consider combining a content management system with enhancements made available through HTML5 and CSS3. Weave in social technology and mobile tools to meet the needs of today's students.

Developed by Annette Lamb, 5/2013.