P3 Changes
Kayla Jang and Manuela Molina
CS 110 May 3, 2015
Client Name: Severance Hall residents and potential residents
Website Name: Severance Hall
Contact person: Suzanne Barth
Link to our website: click here
The Severance website aims to serve both current and prospective students. The site’s goals include sharing news and events with the community, sharing the history and traditions of Severance hall, as well as providing prospective students with a resource where they get to see where they’ll be living for the next year. The “sev-a-site” will provide biographies of the residential staff, a tab with pictures of room floorplans, a social media feed to keep people updated among other things that will further discussed in the content section. The intended audience for our website is current and prospective residents of Severance Hall. This will help current students living in Severance Hall to keep up to date with events and find all information regarding specific information of the residential hall in one platform. Furthermore, any Wellesley College student or faculty will be able to find contact information as well as service information provided by the hall, such as request-space arrangements and policies, right in one place. The site is also a resource for incoming or prospective students and their families to explore the hall before arrival.
All pages have text font Indie Flower, instead of Verdana with a standard font of 15 point for all text that is not a title. The font color for text that is not a title is pink, usually with a black background, instead of the inconsistent colors and backgrounds we had decided on previously. The navbar now is displayed the same way in all pages, with white text on a black background, instead of white text on a blue background as stated in the Design Document. The background image is a colored image of Wellesley College, instead of a black and white image of Severance. The audience will be able to find some consistency that we hope helps them browse and explore the website with ease.
There are eight separate pages as follows:
The homepage is the first page of the Sev-a site. It contains the following tabs: About, History and Traditions, Videos/Photo Gallery, Room Photos, Amenities, Contact Information, and a section dedicated to the Severance pet, Ginger. We changed the Testimonials page to an Amenities page because we thought that would be more informational and beneficial to the users. The navbar on the home page will be the same as on every other page. "Sev-A-Site" is the header at the top of every page.
The homepage of the site includes a video of the the State of the Union made by President Suzanne Barth for comedy purposes, while also containing a section of recent announcements relevant to the Severance community. These announcements will be updated by the Sev-A-Site Council, which has been formed out of a group of people on House Council. Under the video are a few of the testimonials from current students.
All the text is in Indie Flower font (for all pages too), instead of Verdana. The sizes of fonts in the homepage are as follows:
The background image is of Wellesley College, and it will take up the whole page, staying put as the user scrolls.
We have an unordered list of the residential staff and key people in House Council. There is a small picture of each person to begin each item list, and next to it is a couple lines describing what they do and something about themselves -- mini biographies (not much has changed on this page except for the common changes that are universal to all pages as described in the "Changes to: Page Layout and Appearance" section).
This page begins with a brief description and immediately follow with song lyrics in text boxes. These are be floated left because floated right is a box containing snaps.
Snaps are short words people write during house council meetings and get read at the end. These are random,funny, grateful, etc. compliments and the practice is something very important to our client. Here their favorite or most recent snaps can be seen and never forgotten!
Underneath this box is a video about Wellesley College, instead of an image that was supposed to change every time the page was reloaded as was originally planned.
This section is dedicated to pictures from the Severance community to the public. The point of this section is to have memories of past events and of anything related to Severance.
When the thumbnail, which is now 250px X 200px instead of 287px X 241px, is clicked on and the image is enlarged, it is displayed with a yellow, dotted border surrounding the picture. Each image is a thumbnail that the user can click and view a bigger version of (the enlarged images are 350px X 390px). This is a javascript use for the minimum requirements.
This section was previously called Floorplan Overview in our project requirements page. Unfortunately, we have had to change it because the floor plan pictures are only available to people with a Wellesley domain, and we do not have permission to release them to the public.
In this modified version, we have four sections, each with a title of a different floor in Sev: 1st main, 2nd main, 3rd main, and Crows. In each paragraph there are a couple of pictures of each floor and examples of what rooms look like on the inside. There is a background in each section of photos with the color and opacity specifications: rgba(125, 25, 53, 0.5), instead of the purple background color originally stated. It is somewhat transparent, so the colors do not clash.
The “Amenities” page took the place of the formally planned testimonials page, and it now includes a brief paragraph below a picture (that will change every 2.5 sec) that tells the user specific information about Severance Hall, such as available amenities. Besides this paragraph, there are images that will change automatically every 2.5 seconds. The slideshow includes pictures of the laundry room, living room, and dining hall. This is our second use of Javascript.
This page is dedicated to information for others to contact people in charge of Severance Hall.
Centered in the beginning of the page below the navbar and headers, there is a list of important people in Severance Hall. Below this list, there is an email form that people can use to email the HP of Severance about for any questions or concerns. Before, we had planned to post a printable version of a Space Request Form but we decided that an email form would be more efficient and helpful for people using our website. This form is our third use of javascript.
This page is an attribute to Ginger.
It displays a picture of Ginger, and beside it an “About Ginger” paragraph. For our final use of Javascript, we made a madlib below Ginger for fun that our client created (not much has changed on this page except for the uniform changes that were implemented to all pages as described in the "Changes to: Page Layout and Appearance" section).
Manuela fulfilled her JavaScript requirements with an on-click function on videos_and_photo_gallery.html and a form function on contact_information.html. Kayla made a slideshow on amenities.html, and implemented the madlibs story for ginger.html.
Kayla Jang implemented:
Manuela Molina implemented:
We fulfilled our modularity requirement by using a sev-header-nav.part file and a javascript file. The sev-header-nav.part was used for the header and nav bar, which was the same on every page.
All of the following files are gathered inside a folder 'beta'.
List of Files and Folders
| Filename | Description | In charge |
|---|---|---|
| index.html | The homepage | Kayla |
| about.html | About Severance and the website | Manuela |
| history_and_traditions.html | History and traditions from Severance | Kayla |
| videos_and_photo_gallery.html and contact_information.html | Videos and photos of people and things related to Sev | Manuela |
| contact_information.html | Contact information of important people in Severance | Manuela |
| rooms.html | Pictures of rooms in Severance | Manuela |
| amenities.html | Photos and a description of the amenities in Sev | Kayla |
| ginger.html | Fun facts about Ginger and madlib about Ginger | Kayla |
| navbar.part | A .part file that includes the header and navbar that are the same on all pages | Manuela |
| sev.js | File that includes all javascript needed for the website | Kayla and Manuela |
| sev.css | The CSS file containing all styling for the website | Kayla and Manuela |
