Web


WordPress introduces a new default theme every year, and this year it’s called … twenty fourteen. It’s a very clean and dramatic looking magazine-style theme with lots of possibilities. As usual, out-of-the-box it’s fairly plain; but we’ve created a version of it with some extra goodies…. Cross posted from here.

Read More
Checking In

Checking In


Posted By on Mar 5, 2014

The Checkin system is designed to track admission to events. It was first implemented for recruitment, as a device to get prospects involved in coming to open houses and other campus events.

The system has six steps.

  1. An event is set up in the back-end.
  2. Prospects are assigned an ID number, added to the database, and sent a promotional/reminder email about the event. The email gives a customized link and invites them to visit the TLTC web site to download and print out their Fast Pass.
  3. As the links are clicked, the prospects are marked in the database as “printed.”
  4. When the prospects attend the event, they drop their printed out Fast Passes in a box.
  5. Afterwards, staff scans the QR code on each using a handheld device.
  6. Then, they upload the results to the server, where attendance is tabulated and immediately visible.

The events are set up and managed using this form:
event_setup_screen

When attendees click on their link, they see something like this:
fast_pass_screen

Though when they go to print it out, print stylesheets take over and format it nicely for one 8 1/2 x 11 sheet, within minimal coverage and no color.
ticket_print

Events are then managed from here. Notice the two columns of numbers — for tickets viewed, and tickets collected. Before the event the tickets collected number would be zero.
event_list

Clicking on either begins a download of a text file containing the list of people.
download_event_csv

The application is completely self-documenting, by the way.
documentation

At The Event

We’ve threaded a needle with a particular match of software products we use, on a set of dedicated Samsung Galaxy Tabs, though any Android device would work. We weren’t able to get anything working on iOS or Windows Phone devices.

The answer lies in using the QuickMark QR code scanner, which allows for really fine-grained control over what elements within the code are stored, and how they are saved. Incredibly, most QR readers don’t let you save your scans at all, let alone as a file you can manipulate.

The other part is using the Opera Mobile browser. Part of the process is uploading the file of results, but all the other browsers on Android only allow you access to a few folders — usually Pictures, Music and the like. Quick Mark stores its results further down into the file system, in the /mnt/sdcard directory. Opera lets you find files from all over your device.

When one of our volunteers logs into the (bookmarked, of course) Fast Pass site, they log in and start working.
20140305_164004

Then fire up Quick Mark:
20140305_164252

Which is already set to the proper configurations, and start scanning codes.
20140305_164238

Once they’re done with their stack of tickets, they can get ready for the upload. On the mobile device (using responsive design) all the documentation is readily available just like on the desktop version.
20140305_164157

Just go to the upload screen, and click the file button:
20140305_164136

And navigate to the file location where the scans are stored.
20140305_164409

Technologies

Lamp stack on the server side.
Dreamweaver
Twitter Bootstrap, with responsive design and print extensions
jQuery, with

  • Date Picker
  • Modernizr
  • Table Sorter
  • Validate
  • Print Element

PHP
PHP QRcode extension by Dominik Dzienia
LDAP

Read More
TIR & RA Selection

TIR & RA Selection


Posted By on Mar 5, 2014

Our project for student housing was a way for them to replace piles of paper forms, PDFs and Excel spreadsheets with a series of easy web forms, backed by a database, that handled and compiled all the applicants, applications, interviews and screenings for Resident Assistants and Tutors-in-Residence in one place.

Adding Users

Adding Users

It starts with adding a list of potential applicants. Names are gathered at informational meetings, and then can be dropped into the form. It accepts either SHU ID numbers, or SHU shortnames, looks up each name in turn from the Active Directory system, and adds it to the database.


Search for Names

Search for Names

Alternatively, you can enter a last name and search for people. Then, just drag and drop from one column to the other and submit.

upload_listOnce the names are ready, just click the green button.

These name selectors are a standard tool we’ve developed here at TLTC, and can be incorporated into many kinds of projects.

When the names go in, e-mails go out. To each candidate, with a custom link inviting them to log in and fill out their application. In addition to the form fields, they upload a resume file, which is stored for future reference. We’ll look at the application a little further down.

Once names are in place, and applications start to be worked on, there are ways of tracking progress. This screen shows each applicant’s basic information, and tracks

  • Gender
  • New or returning applicant
  • Whether they want to be an RA or TIR
  • Whether they’ve begin the application
  • If they’re done, when they finished
  • If their essay questions have been scored, what the result is
  • The status of the two references they’re required to get

review_applications

On this screen, as on most of the index screens, the tables are fully sortable. Just click the header row you want to sort on, and click it again to reverse sort. They’re also fully paginated. If you click on one of the “Detail View” links (only available for completed applications) you can view the application as submitted.
application_view

The last tab on this screen lets administrators change the role of people in the system. That way, you can set someone to be an administrator or evaluator for a time, then change them back to another role with fewer permissions.
manage_people

Besides being sortable, you can also filter the results. Different from a search, it just shows you every row that matches what you type in the Search box, in this case, “williams.”
filtered_williams

Interviews

The next stage after the applications are in and the essays are screened is in-person interviews. The interviewers log into the proper screen and begin by selecting the name of the candidate to interview.
interviews_start_screen

They’ll get the interview form, which they fill out as they go and then submit. They can be saved in draft form and completed later if necessary.
interview_screen

Interviewers can recap their interviews from this screen:
your_interviews

Full administrators can run down all of the completed interview results, along with scoring.
completed_interviews

And see the detail view for all.

Group Activities

For applicants who have made it this far, there is the group activity round. Each candidate is assigned an individual scorer, who completes and submits a form.
activities_entry

For these, as well as for the interviews, there is a final tabulation and recommendation section, along with final comments.
save_your_work

As the group activity evaluations are completed, the page is updated to reflect them. Again, the table can be sorted by reviewer, score, activity, etc.
group_evaluations

You’ve probably noticed how the score column here, as well as on other screens, is color-coded. In addition to the numeric score received by the candidate, the recommend/recommend with reservations/do not recommend determination is determined by green/orange/red. This screen composites all the new candidates’ interviews and group activity scores into one table, with totals and subtotals that can all be sorted.
new_candidates_r

Initial reviews are great. It’s saved the department hundreds of man-hours. Plus, the result tables can all be copied-and-pasted directly into the old Excel spreadsheets for even more data manipulation.

Tools Used

Server-side LAMP stack.
Dreamweaver
Photoshop
Twitter’s Bootstrap framework with responsive add-on
Javascript with jQuery modules and add-ons

  • Validate
  • Data Tables
  • UI
  • Uploadify
Read More
Pirate Patch Badge Project

Pirate Patch Badge Project


Posted By on Apr 24, 2012

The Pirate Patch project was created in response to a need by the Freshman Studies group to create an involvement device for the incoming Freshman class. Studies have shown that there are certain non-academic indicators for academic success in the first year of college, things like belonging to clubs, being part of activities, attending events.

The Program is a way of giving a tangible reward for certain types of activities. Building off of the Mozilla Open Badges project, we added the refinement of a points system and “level-up” badges.

The pilot phase offered a one-point badge for members of the incoming class who found the link on the PirateNet log-in screen. Then, other points were awarded at preview days for students who found QR codes at various buildings around campus and snapped them with their smart phones.

Students who found five or more were automatically awarded a five-point bonus “Curious Pirate” badge.

The project was built on a LAMP platform. The database is tied to the students user IDs in the campus’ authentication system. Awards are identified by hashes that encrypt information about them.

To accommodate more advanced badges that will actually recognize earned credentials, we support Mozilla’s “bake” process, which gives a downloadable image that has encoded within it links to the requirements that the student had to meet, as well as proof that the badge was awarded to that student.

Read More
Photo Gallery

Photo Gallery


Posted By on Aug 22, 2011

Answering a long-standing need by the Marketing and PR department, we used Gallery2 to import and display their image library. There are over 1,600 (at last count) images in place, and more are being added all the time.

A smaller public gallery is available to members of the news media. The SHU community can log in with their PirateNet credentials and see the entire assortment, which includes multiple resolutions of each photo. There’s also a complete set of SHU logos, along with a handbook for usage.

Seton Hall owns the usage rights for all the photos in the gallery, and they’re available for use in any SHU publication or web site. Just read the “About” section for guidelines.

Read More
The Institute of Museum Ethics

The Institute of Museum Ethics


Posted By on Aug 22, 2011

The old site for the IME was looking a little bit dated, as well as somewhat juvenile. Plus, it was very hard to manage, with a steep learning curve for the G.A. — a new student every year.

By putting it into WordPress and giving it a sleek and professional new design, the Institute’s news and work are highlighted in a dynamic way, and can be kept fresh with just a few minutes work on the administrator screen.

Institute of Museum Ethics.

Read More