FALVEY MEMORIAL LIBRARY



You are exploring: VU > Library > Blogs > Blue Electrode: Sparking between Silicon and Paper

Responsive?

If you follow Villanova’s Digital Library on Twitter, you may have seen this tweet recently:

Check out our new responsive design (thanks to @crhallberg!): http://t.co/VmWL30gonx Play around & let us know what you think! #webdesign

— VillanovaDigitalLib (@VillanovaDigLib) December 5, 2013

Proud to say that the shout-out refers to me, Chris Hallberg, and I’m going into my third year of working on the front end of the Digital Library. That probably doesn’t mean much to you though, so let’s cut to the chase.

“Responsive”?

aka. what is Chris’ job?

That’s a fancy way of saying that the design of the website adapts to any size screen that it’s viewed on. This is an evolution from the design model of having two completely different websites to handle desktop users (ie. Wolfram Alpha) and mobile users (Wolfram Alpha again, mobile edition). There’s two major problems here: developers have to design, build, test, deploy, host, and update two separate sites; and some functionality is lost.

Faster browsers, faster Internet speeds, and updated web technologies allow web builders to create more powerful web pages than ever before. Web users know this, and they don’t want to settle. They demand the complicated features of the “full” website on their phones and more and more users and mobile browsers try to use their ever increasing phone sizes to look at the desktop version. If you’ve ever tried this, you’ll know a lot of full websites look terrible on phones. This is where responsive design saves the day.

The biggest problem with smaller screens causes features normally laid horizontally, like this text and the navigation on the left, to clobber each other when the real estate vanishes or to become so tiny the crushed text within looks like something out of House of Leaves. Worst, in my opinion, is the horizontal scroll bar that turns your browser into a periscope in a vast, hidden field of content.

normal
Normal

squish
One word per line necessary to fit in these tiny columns

overlap
Clobber-ation

scroll
Bum bum bum

Responsive design actively reorganizes the page so that this doesn’t happen.

responsive
That’s better

“Play around”?

Here’s how to properly play with this blog to enjoy responsive design.

If this window is full screen, click the resize button (next to the close button) on this window so that you can see all the edges of the window. Now, drag the right edge of the window to the left, squeeze the window if you will. Come on. It’s ok, no one’s watching. If you don’t do it, the rest of this blog won’t make any sense. Thank you.

The first thing that will happen is that the navigation buttons above (called “pills”) will jump below the search bar. Then, the menus on the very top and below the search bar will collapse into buttons.

Pause a moment. You are entering the land of the Mobily-Sized Browser Window. We designed the new library and digital library web sites to reorganize itself when you look at it on any screen the size of an iPad or smaller. In this case, the menu on the left (and up) is going to move on top of this blog post and fill the available space. We spare no expense! Just keep an eye on the search bar as you squeeze the window down as far as you’d like.

That’s responsive design at work.

What’s going on here?

In order to make websites look beautiful, developers use a language of rules called CSS, short for Cascading Style Sheets. It looks like this:

button { ← What are we applying the “rules” below to?
   background: #002663; ← Villanova blue in code
   color: white; ← Color of the text
   border: 1px solid black;
   border-radius: 4px; ← Rounded corners!
   height: 45px;
   width: 90px;
   margin: 3px ← Distance from border to the next element
   padding: 14px 4px; ← Distance from border to content
} ← That’s enough rules for our buttons

That code is more or less how we made the four pills next to the search bar look so pretty.

A year and a half ago, the powers that be added a new feature to CSS: media queries. Media queries can tell us all kinds of things about how you’re looking at our web pages. We can tell whether or not you’re running your browser on a screen, mobile device, TV, projector, screen reader, and even braille reader. It can also tell if you’re holding your phone sideways or vertically, what colors it can display, and (most importantly) what the dimensions of your screen are. By putting code like our button example inside these queries, we can apply rules, like fonts, colors, backgrounds, and borders, to elements of the page depending on the context of the browser.

@media print { ← If we’re printing something
  // Hide ads and colorful content
}
@media (max-width: 768px) { ← Anything thinner than a vertical iPad
  // Show a special menu for mobile users
}

Responsive designs are built right on top of this technology.

Browsers are really good at stacking things on top of each other. This paragraph is under the previous one. This makes sense and it’s quite easy on your eyes, and your computer. With a few CSS rules, we can tell the browser to put things next to each other. The trick is to put things next to each other, until it’s impractical to do so. Being able to tell your web site where to put things and how they look depending on how and where your user is looking at it is what responsive design is all about.

The Magician’s Secret

Before media queries were invented, developers had to write some pretty serious code. This code had to constantly watch the size of the screen and then, basically, rewrite the files where the CSS rules are kept. It was very complicated, which is why it made much more sense to create two completely different sites and route users to each depending on their “user agent,” a small snippet of information that your browser sends to a server when you open a page in your web browser. The problem is, these bits of information were made for people to read for statistical reasons, so they are complicated and change every time a browser updated to a new version. It was a digital guessing game.

Some of the people behind Twitter decided to make a framework that web developers could build on. Instead of starting from scratch, developers could start with their collection of code and CSS that pre-made a lot of common elements of web sites like tabs, accordions, and toolbars, for them. They called it Bootstrap. In 2011, they added responsive design, making it easy for developers to create a site that looked good on any device. In 2012, a graduate assistant named Chris Hallberg was charged with rebuilding the Digital Library front end. In 2013, he, along with web developers all over campus, made Villanova’s web presence responsive. Without this framework, creating a responsive site would have taken much, much longer, and possibly wouldn’t have occurred at all. Not only was it an essential tool to the process, it is a broadcasting platform for the technology. Bootstrap makes responsive design possible and popular.

A Final Word

While I did the work you see over at the Digital Library, I did not create the page you are looking at. I can only take credit for the menu on the left, which I’m clearly very fond of. David Uspal was the magician who conjured this page’s design and David Lacy is the magician behind-the-scenes, organizing and delivering the thousands of books containing the tens of thousands of images we’ve scanned. We both received invaluable input from the Falvey Web Team and even viewers like you. Your feedback helped and continues to help us fix errors and typos, and (most importantly) pick the colors for our pretty new web site.

Enjoy!
- Chris Hallberg

PS. A fun example of the new power of the web is Google Gravity from the gallery of Chrome Experiments.
PPS. As a reward to offset the new habit you’ve developed of resizing every window you find, here’s an accordion to play.

Like

eBook available: Bolax by Mrs. Josephine Culpeper

Portrait of "Bolax when he went to college."

Portrait of "Bolax when he went to college." (Facing p. 158.)

One of the latest of our books to be made available as a Project Gutenberg ebook is Bolax: Imp or Angel–Which? by Mrs. Josephine Culpeper. Besides having one of the most fantastic titles I have ever encountered, this book is a fictionalized biographical account of Mrs. Culpeper’s son, Bolax, who attended the boys’ academy at Villanova for a few years before transferring to another school.

Mrs. Culpeper raised her family in the area — in Wayne on the Main Line – and our copy of the book was presented to Villanova College (as it was then) by the author. In an inscription at the front of the book, Mrs. Culpeper explains the origin of Bolax’s name:

“The odd name comes from the boy’s father calling him bowlegs because as a baby he walked crooked. The boy caught the sound as Bolax and was so called until quite a big boy.”

An unsigned note below Mrs. Culpeper’s explains the Villanova connection (as well as revealing Bolax’s real name):

“In 1892-93 the son of Mrs. Josephine Culpeper, Osmond J., attended classes at Villanova, to which reference is made in her pages. Mrs. C– lives at Wayne, Pa.; it was from thence that the little ‘Bolax’ was sent to St. Thomas of Villanova….”

There is also a letter inserted between the pages after the above notes, in which Mrs. Culpeper says that the book is “true to life” and that she “kept a diary of all [her] children’s saying and doings and from this wrote the book.”

The book follows the escapades of Bolax from the age of five to fourteen. He has an older sister named Amy as well, but the primary focus is on Bolax and his struggles to be a good Catholic boy. Among his adventures and misadventures, Bolax goes for a “real piggie-back ride” (p. 13), a picnic with his Sunday school class (p. 42ff.), and his first confession (p. 62). Bolax declares his wish to attend the school at St. Thomas’ College on page 70 and he is admitted on page 77, even though at nine he is two or three years younger than their youngest pupils. Bolax attends the boys’ preparatory school that eventually became Malvern Preparatory School. Some of the noteworthy mentions of life at Villanova include the description of Bolax’s first two weeks (p. 83ff.), an epidemic of scarlet fever (p. 155-6), and slang expressions in use at the school (p. 159).

Snippet of text ("I just know he is an angel...") with marginalia.
Bolax describes one of the priests at Villanova on
page 84 and a marginal note poses a possible
candidate for the real-life Augustinian alluded to
(“Evidently Father Charles McFadden is meant”).

There are some interesting scenes and insights into late-19th-century life in the Philadelphia suburbs, but it is a rather oddly written book that incorporates many different writing styles that don’t really blend well. Besides the (fictionalized) biographical narrative, there are epistolary passages and several didactic passages — on topics ranging from the lifecycle of the ladybug (p. 35-6) and how to raise good little boys (p. 52-60) to a “pleasant controversy” of differing religious views (p. 29-32). Of course, the writing also incorporates the casual racism that was common at the time. In addition to the variety of writing styles, there are also quite a lot of typos and grammatical mistakes — some of which a previous reader tried to correct in pencil (see, for example, the third line of page 13) — which makes the book seem like an early-20th-century version of a vanity press publication. Despite these flaws, Bolax is still a good read for those interested in the social history of the Main Line, late-19th/early-20th-century Catholic life, or the history of the prep school at Villanova.

If you’re interested in seeing the marginalia, you can view the page images of Bolax in our Digital Library. For a cleaner reading experience, you can download the ebook or view it online at Project Gutenberg. You can read more about our proofreading project here.

Like

Villanova history comes alive in the pages of The Villanovan

Falvey Memorial Library recently completed a major digitization project to make available online all 1,713 issues of the campus newspaper, The Villanovan, published between 1893 and 1995. On Feb. 23, the Library hosted a program to celebrate this accomplishment. The celebration was dedicated to the memory of longtime Villanovan faculty adviser, June Lytel-Murphy.

The program began with introductory remarks by University Librarian Joseph Lucia and University President the Rev. Peter M. Donohue, OSA., PhD, ’75 A&S, who characterized the project as a history of “the voice of the student body.” Special Collections and Digital Library Coordinator Michael Foight, Library Technology Development Specialist Demian Katz and Research Support Librarian Susan Ottignon each addressed various aspects of the project.

Prior to 2011, The Villanovan was available only through bound volumes of issues or microfilm—neither providing an especially pleasurable experience for casual perusal….

The above paragraphs were excerpted from David Burke’s article about the event on the main library news blog. Click here to read his full article.

Since the event, we’ve seen a huge increase in use of this collection. Michael Foight reported that we had a record 1009 unique visitors to the Digital Library in the week following the event and most of those visitors were browsing the Villanovan collection.

We’ve written about the Villanovan digitization project previously. Michael Foight wrote about the initial phase of this digitization effort in December 2008. Cathleen Lu, Digital Library Intern in Fall 2010, wrote about some of the more eye-catching advertisements she found in the papers while working to improve the PDF files. And last year Laura Bang wrote about the 10,000th item to be added to the Digital Library, which happened to be the April 4, 1944 issue of the Villanovan.

These papers provide a fascinating look at not just the University’s history, but also the historical context around the University and how world events affected life at Villanova. Take a look and see what you discover!

Like

A lost piece of Theater History

 

One of the most satisfying aspects of working in a digital library is the opportunity to expose people to a life or a story they may not have realized existed. A week ago I was presented with an archival box full of pieces of a puzzle. The pieces belonged to a man named Howard Merrill Shelley and the puzzle I am working on is how to put together the events that make up the life of this man. I have begun scanning in images and other assorted items from the box, and his story is slowly coming to light, possibly for the first time in fifty years.

Howard Shelley (1879-1956) was known primarily as a Philadelphia theater and opera personality. However, before I go into that, I would like to delve into his ancestors, an interesting topic of its own. Howard Merrill’s lineage plays like a who’s who of American history. Howard’s mother, Sophia Rittenhouse Shelley, is directly descended from the famous scientist and astronomer, David Rittenhouse. Howard’s grandmother, Amanda McClellan is related by marriage to none other than Benjamin Franklin and is directly related to the Civil War general, George B. McClellan.

 

 

George himself was the grandson of General Samuel McClellan of the Revolutionary War. Samuel married Rachel Abbe, a direct descendant of Governor William Bradford of Plymouth, Massachusetts.

 

 

Howard also had a famous second cousin named Kate Shelley. While not a household name today, in her own time she was a famous poet and folk hero. As a young girl she risked her own life to save hundreds of lives by averting a potential train accident.

Not surprisingly, Howard Shelley thought his own family history quite interesting and wrote a successful play about it in 1914 called The Family Tree. At the time in Philadelphia, as well as other major cities, there was a craze to document and brag about one’s own family history in order to secure social prestige and Howard took advantage of this subject to write his satirical comedy. Prior to The Family Tree Howard co-wrote a popular musical called The Beauty Doctor in 1904. An article in the Geneva Daily Times described this production as a piece “based on the beauty culture craze, which is handled in a broadly humorous way and is said to afford ample opportunity for hearty fun”.

After writing two successful satires for the stage, Howard went on to become a theatrical press agent. He wrote an early form of gossip column about society under the name Barclay Beekman for the New York Daily Mirror and was also employed by stars of the stage, including Lillian Russell, an actress and singer, and Luisa Tetrazzini, an Italian opera soprano.

 

Digitizing the Howard Shelley Collection has been like working on a miniature time capsule of Philadelphia genealogy and theater history. I have only completed about a third of the collection and am eager to discover how the other pieces of the puzzle come together. What I find remarkable is that despite having two hit shows and an active life in theater and opera, Howard Shelley and his productions have managed to escape history’s grasp. It causes one to realize that the majority of popular culture today may not survive a hundred years, for better or worse. For my part, I am glad to have the opportunity to once again put Howard Shelley in the spotlight.

Posted for Karla Irwin, Fall 2011 Digital Library Intern.

Like

10,000 and Beyond!

This week, we added our 10,000th item to the Digital Library! This is quite an exciting milestone!

The item in question is the Volume 18, No. 4 issue of The Villanovan, dated April 4, 1944. The Villanovan was scanned from microfilm by the Internet Archive and we have been steadily working on adding the individual issues to our Digital Library.

Volume 18, No. 4, April 4, 1944 issue of The Villanovan.

This issue features numerous articles related to World War II. The front page headlines are listed below:

* Easter Theme In ‘Bunny Hop’ Show And Dance Apr. 15
* Lt. W. Garrity Killed Piloting Bomber in Africa
* Augustinians In Philippines Safe
* Comdr. Milner Leaves for Active Sea Duty Again
* Guadalcanal and Tulagi Veterans in Marine V-12 Unit Describe Battles
* Plans Completed For Guild Party
* Financier’s Frolic Tickets On Sale Now

Not content with just 10,000, we are already edging past 10,100 as of this writing! The current item count is viewable here and it is updated in real time as we add new items.

This week, we added our 10,000th item to the Digital Library! This is quite an exciting milestone!

 

The item in question is the Volume 18, No. 4 issue of The Villanovan, dated April 4, 1944. The Villanovan was scanned from microfilm by the Internet Archive and we have been steadily working on adding the individual issues to our Digital Library.

 

This issue features numerous articles related to World War II. The front page headlines are listed below:

 

Easter Theme In ‘Bunny Hop’ Show And Dance Apr. 15

Lt. W. Garrity Killed Piloting Bomber in Africa

Augustinians In Philippines Safe

Comdr. Milner Leaves for Active Sea Duty Again

Guadalcanal and Tulagi Veterans in Marine V-12 Unit Describe Battles

Plans Completed For Guild Party

Financier’s Frolic Tickets On Sale Now

 

Not content with 10,000 we are already edging past 10,100 as of this writing! The item count is viewable here.

Like

Engineering Historica: The Final Report on the Engineering and Construction of the Quebec Bridge

To His Excellency, Victor Christian William, Duke of Devonshire, Marquis of  Hartington, Earl of Devonshire, Earl of Burlington, Baron Cavendish of Hardwicke, Baron Cavendish of Keighley, K.G., P.C., G.C.M.G., etc,. etc, Governor-General of Canada,

May it Please Your Excellency:

The undersigned have the honour to lay before Your Excellency the Final Report of the Board of Engineers on the Design and Construction of the Quebec Bridge.

Respectfully Submitted,

J.D. Reid,

Minister of Railways and Canals


Our digital library collection grows day by day, as volunteers and staff at the Falvey Memorial Library here at Villanova University continue to scan different works from both our own collection as well as collections generously loaned from other institutions.  Because Villanova is a Catholic university, much of this material is of related interest, i.e. our collection includes scanned Catholic manuscripts, works from Augustinian scholars, collections related to Irish history, etc.  Of course, not every item in our collection comes from this area, so I’ve decided to highlight one item from our collection today with more of an engineering-historical bent.

Published in 1919, and donated to Villanova in 1944, the digital library currently has posted two volumes containing the final report from the board of engineers on the design and construction of the Quebec Bridge.  With its abundance of information, figures and stats on the bridge, this material may be of interest to civil and structural engineers on its own merit; however, what makes this a more interesting read is that the Quebec Bridge itself is famous above and beyond other bridges for three reasons: the first is that, at 987 meters, the bridge is the longest cantilever (i.e. non-suspension) bridge in the world; the second and third reasons are related – the bridge is also famous for collapsing not once, but twice during construction, the first occurrence in 1907, the second in 1916.

The Quebec Bridge @1919

Fortunately for the travelers and commuters among us, bridge collapses, though not unheard of, are a rare occurrence – and collapsing while still under construction rarer still.  To collapse twice, however, is exceptionally rare.  Therein, the story of the construction of this particular bridge is a fascinating tale – the initial warning signs of the first impending bridge collapse were ignored, and eventually when pleas from on-site engineers to halt construction on the bridge were finally heeded, the message did not arrive to the construction site in time before disaster struck.   The resulting collapse cost the lives of 75 bridge builders.  When construction of the bridge began a few years later, disaster struck again when the central span of the bridge was being raised into position – the span fell during the raising, killing an additional 13 workers [1].

Raising the Central Span

This particular report covers the time period of the second bridge building, including the time period when the central portion fell into the river (the central portion was re-raised and the bridge eventually completed, leading to this report). While the later sections of this report are very “engineer dense”, with drawings, figures and tables on the exact structure of the bridge (load tolerance of the materials used, etc.), most users will find the General Narrative, starting at page 13 of the book, the most interesting portion of the read.  It recounts the issues with the first bridge and its collapse, what was changed in the new bridge and why, as well as a running narrative of the construction of the new span (the fall of the central span is covered on page 32).  Included in this read are some interesting historical references (note the reference to the Lusitania on page 18 as the current ship with the tallest mast, and references to the Carnegie Steel Co. and Bethlehem Steel on page 25, amongst others).

The complete scan of this report is available through the Villanova University Digital Library.  Volume I can be found here and Volume II here.

[1]  “Quebec Bridge.Wikipedia: The Free Encyclopedia. Wikimedia Foundation, Inc. 22 July 2004. Web. Dec 2010.

Like

Saints, Students, a Scientist, and Other Sculptures

Over the summer, I’ve added a couple of new collections to the Digital Library. One of these new additions is the Villanova Sculpture Collection, documenting the sculptures found on campus. Eleven of the thirteen sculptures that I know of have been added, and I hope to photograph the remaining two by the end of this week (time and weather permitting, of course!). (Edited to add: All sculptures are now photographed and online! 9/16)

Augustine the Teacher
Augustine the Teacher.

I have taken photographs of the sculptures in full view from as many sides as possible, as well as detail views of interesting aspects or attributes. Most of the sculptures are depictions of saints, including two each of St. Augustine and St. Thomas of Villanova, but there are also some other notable people and some abstract shapes.

Mendel
Gregor Johann Mendel.

Come take a scroll through our virtual sculpture garden!

Like

Everyone’s favorite cookie

Last month, our friend Matt Herbison at the Independence Seaport Museum Library & Archives introduced me to Photosynth. Photosynth is a Microsoft product that stitches together multiple images into a 3D scene. It’s really fun to play around with some of the “synths” that are posted on the website!

Matt thought this venue would be a good idea for my tree project, but for my first trial I opted to do an outdoor sculpture instead. I took 72 photos of “Awakening,” a sculpture referred to on-campus as “the Oreo” because of its resemblance to a certain cookie, and you can see the resulting “synth” I created here.

oreo

Stay tuned for trees!

Like

Life as the Sister of the Liberty Bell

Posted for Phylis Wright:

A recently digitized title from the Villanova Digital Collection, The Liberty Bell’s sister by Father Louis Rongione, O.S.A., provides a history and overview of the companion to the Liberty Bell that once rested in Falvey Memorial Library and now resides in the Augustinian Heritage Room of the Saint Thomas of Villanova Monastery.

bell2

The history of the bell started on October 16th 1751 when the Pennsylvania Assembly voted that a bell weighing 2000 pounds costing between 100 and 150 pounds (sources disagree on the specific cost – ed.) should be purchased from Whitechapel Bell Foundry in London and then be provided for use in the new State House that was later called Independence Hall.

That historic bell cracked upon its first testing. It was felt by that same governing body that because of the need to recast twice after cracking, and the bells poor tone quality, a replacement should be purchased.

A bell of the same weight and cost was then ordered.

In the summer of 1754 the Liberty Bell’s sister arrived in Philadelphia.

On August 13, 1754 however, the Pennsylvania Assembly voted not to replace but to keep both bells, as the populace who once found the Liberty Bells’ tone annoying, had grown accustomed to it.

The original bell was hung in Independence Hall and the Sister Bell was hung on a special cupola in front of her, attached to the State House Clock, to toll the hours. She performed this task from 1754 to 1830, except for a brief period of time during the Revolutionary War.

Both bells rang for special occasions. One such occasion was the reading of the Declaration of Independence, July 8, 1776.

The Sister Bell is no stranger to political intrigue. On September 14, 1777 British forces were threatening invasion and then occupied Philadelphia. The bells were smuggled to secret location in Allentown to prevent the enemy from melting them down and using them for ammunition.

The British left Philadelphia June 27, 1778 and the sisters were returned to their home.

In 1830 the City of Philadelphia kept the original bell and sold the Sister Bell and Stretch Clock to Reverend Michael Hurley, O.S.A., Pastor of Saint Augustine’s Church, 4th and Vine Streets, Philadelphia.

On May 8th 1844 St. Augustine’s Church was burned to the ground by members of the Native American Party. The clock, library, paintings were totally destroyed and the bell cracked into pieces in the fire. Her fragments were gathered and given to Joseph Bernhard of Philadelphia for recasting.

In 1847 the Sister Bell was recast but she was greatly reduced in size. She was sent to Villanova College founded in 1842 by the same Augustinian Fathers who served St. Augustine’s Church.

From 1847- 1917 the Sister Bell hung in a locust tree and was used to call the students to class, chapel and their meals. In 1917 she was sent to Jamaica Long Island and was used in the steeple of St. Nicholas of Tolentine Augustinian Church, but on September 20th, 1942 she returned home to Villanova for the inauguration of the Centennial year 1942-1943.

Currently the Sister Bell has found a home in the Augustinian Heritage Room. She may be seen by appointment by calling Father Marty Smith: 610-864-1590.

bell1

Like

The Owl

The latest addition to the Villanova Digital Collection is The Owl. This student magazine published by Phi Kappa Pi, the Engineering Honor Society, highlighted student life and activities in the engineering community at Villanova from 1925 to 1933. In 1933 the title changed to The Villanova engineer. Currently online are the first two volumes with more to be added soon.

In addition to articles about new engineering projects in the Delaware Valley, The Owl carried news about students and engineering alumni. Photographs taken by engineering students are featured in most issues and show the vibrant and energetic Villanova, then college not university, campus of the 1920s. Sport also figures in many issues with photographs of athletic events and athletes, and a score roundup in most issues.

Here are photographs of the annual Engineer’s Banquet from the Spring of 1927, and engineering professors out of the classroom:

owl1a1.jpg

owl4a.jpg

As can be seen in the following cartoons which are included in most issues, many highly talented and creative students produced The Owl. For example, in the “Snapshots of Tech Life”, students are whimsically portrayed in romantic scenes under the rubric of the serious “Astronomical Absurdities”.

owl5a.jpg

owl2a.jpg

Villanova student engineers were involved in drafting plans for the future development of campus as can be noted in this illustration taken from a published engineering study of a proposed new athletic field in the space where the Pavillion now rests.

owl3a.jpg

Like

Next Page »

 


Last Modified: March 20, 2009