P3 Design Changes

1. Document Details

P3 Changes

Megumi Takada and Meltem Ozcan

CS 110-01 April 2014

2. Administrative Details

Client Name: Nan Nan, artist and founder of art school “Atutu”

Website Name: Nan Nan Art Studio

Contact person: Jennifer Henbest

Link to our website: click here

The changes we have made

We had initially planned to have 9 pages, and changed some of the names/purpose/styling of them, leading to a total of 10 pages. There were many stylistic and structural changes, and these changes are summarized below.

Changes to homepage.html: For artistic purposes, we decided to make the size of the slideshow images 631px x 479px rather than 400px. For visual reasons, we decided that the homepage will be the only page with a especially different footer arrangement. Nan Nan's contact info line is not included, and the other line is taken out of the main content box.

Changes to about.html: Instead of about.html, we used about_nann.html. In addition, we added the drawing of the long line of people above and below the text and the picture of Nan Nan for aesthetic reasons.

Changes to inspirations.html: Since we used a Google Map in the contactUs.html page we decided not to have the Myanmar map. Instead of having images with a height and width of 200px floated right or left, we used the myanmarTopBar.js to generate one image at the top of the page depending on the time of the day.

Changes to artwork_paintings.html:Instead of 30 images per page, we included 22 pictures upon our client Nan Nan's wish. The background is not white like what was intended, because we realized that our current off-yellow background color is more appealing and brings out the colors in the paintings without tiring the eyes of the user. The background-color of each box in the Artwork galleries and the larger info box that opens up when the thumbnails are clicked on do have a white backgrounds, however, with the aim of preventing distraction. The small boxes are of size 238px x 254px and the pictures have a set width of 200px. Although we had intended to include 4 pictures on each line with a menu bar on the top, our change in the position of the menu bar allowed for 3 pictures to fit into one row. We decided to only have shadows around the box on hover. These shadows are in brown rather than gray or black as intended, because we think it visually fits with the artwork. When the image is clicked, the enlarged version of the picture (400px x 400px) appears in an info box (570px x 530px). The half transparent overlay covers all of the page, instead of just the gallery as we had intended. Clicking on the overlay or clicking on the close icon (another feature newly added) undoes the enlargement of the picture and hides the info box.

Changes to artwork_design.html:The changes to this page are identical to the changes to the artwork_paintings.html page mentioned above, with the exception of the inclusion of 19 pictures.

Changes to atutu_aboutTheSchool.html:The logo of the school was not included, because we realized that it would be repetitious to have the logo both in the menu bar and this particular html page. Instead of having two images of 200px x 150px at the top of the page, we instead used the randomImagesTopBar.js to randomly generate 3 images on load to give more variety while not putting all pictures on the page itself. The image bar consisting of three images is 800px x 193.3px. We also decided to add a photograph of the class schedule for the users' convenience.

Changes to atutu_childrenArtwork.html:Although we had intended to use the same layout for all the artwork pages (artwork_paintings.html, artwork_design.html, and atutu_childrenArtwork.html), we realized that the Children's Artwork page should have a more playful look to it. Thus, we tried to make the web page very colorful by including the Atutu Art School logo figurines between the artwork and creating a gallery that would be visually appealing. We also decided not to have a clickable info box for each picture, because the artwork is already quite easy to see.

Changes to atutu_volunteerAndDonate.html:Instead of combining the volunteering and donation information, we decided to create a separate page for volunteering and donating under the new, main menu tab called "Get Involved." We decided to make this change, because we realized we were not fully addressing the needs of potential donors and volunteers, who are one of our main target audiences. By creating separate pages, we were also able to make the pages more visually pleasing. In contrast to our plan which was to implement just a donation wish list, for example, we decided to implement a picture right next to it in order to help potential donors get a better understanding of what they could and wanted to donate. We also included a link to the contact us page, so that the user did not have to go through any trouble in finding the address of Atutu Art School. As for the volunteer form in getInvolved_volunteer.html, our class lecture about forms and jQuery ui allowed us to create a more dynamic form, which we thought would be more user-friendly for potential volunteers. We have been working especially hard on making this page very simple and easy-to-use, in order to encourage people to join. Furthermore, in both volunteer and donate pages, we decided to include some snapshots of the art school, which were dynamically added using javascript. We decided to do so to make the webpage more visually appealing and persuade volunteers and donors to help Nan Nan out.

Changes to supportAndContactUs.html: This page name was changed into contactUs.html, because we created a new tab "Get Involved" as described above. Since all pages have links to all the other pages through the menu, links for the donation and the volunteer pages were not included unlike what was intended. Instead of a picture of Nan Nan Art Studio itself, we used a photograph of the sign of the studio, which allows the users to look for the sign when they get there. The picture of the sign is, instead of 200px x 175px, 260px x 195.5px for visual reasons. The Google Map added is 450px x 400px instead of 700px to fit in to the structure of the page along with the sign photograph and the contact information boxes. We decided to add a Javascript function to the contact information boxes to make the page more interactive, instead of simply giving them in a table or a list. No information is displayed at first, and the relevant information is shown when one of the buttons is clicked. A secondary click hides this information, protecting the page's neat look.

Changes to Meltem's 1st required JS 'randomImages.js': Instead of having a random image slideshow, Meltem used two Javascript files slideshow.js and slideshow_pictures.js to access an array of images and change them in order either automatically every 4 seconds or manually upon click on next/previous icons by the user.

Changes to Meltem's 2nd required JS 'imageSize.js': We decided not to enlarge the images on hover since we felt that if it was added, there would be too many activities going on, leading to users' frustration and difficulty to pay attention. The artwork javascript function was originally planned to have a pop-up window. This was changed into an info box as it is a lot more practical and visually appealing. Also, the code includes three javascript files rather than one: artWork.js (containing the actual code used to display the information boxes and images, animate slides etc.,) and artwork_painting_data.js and artwork_design_data.js (containing the array of image elements for both gallery pages. Meltem included a manual slideshow into the info box for the user to navigate between the items more easily.

Changes to Megumi's 1st required JS 'artWorkPrices.js':We realized that assigning an price to each artWork dynamically would just be part of Meltem's javascript coding for the artwork gallery pages. Thus, we decided to make Megumi's 1st required JS 'volunteer.js' instead. This allowed us to create a more dynamic volunteer form, whose input fields changed with the needs of each user. 'volunteer.js' is included in the getInvolved_volunteer.html page.

Changes to Megumi's 2nd required JS 'rollOverMenu.js':There were not many major changes that had to be made to the roll-over menu, except for that the menu's location was changed to the left instead of the top. Taking the guest lecturer's advice into consideration, we did make the menuItems only one solid color instead of putting borders around them. We also aimed for simplicity by including one figurine instead of three figurines. As described above, the names of the categories were changed from "About," "Inspirations," "Artwork," "Atutu Art School," and "Contact/Support Us" to "About" "Art Work," "Atutu Art School," "Get Involved," and "Contact Us." This javascript was included in all pages.

Changes to intended CSS styling:

Additional Javascript file randomImagesTopBar.js by Megumi:Megumi also created a javascript file that provides four random sets of three images that appear on the "Get Involved" pages and "Atutu Art School" About page.

Additional Javascript file myanmarTopBar.js by Megumi:Megumi also created a javascript file that chooses one of three images to select on the "About" Inspirations page based on the time of day.

Additional Javascript file contactUs.js by Meltem:We decided to add a Google Map for the convenience of the users and potential visitors and volunteers. In addition, Meltem added a slide and hide effect to the boxes where contact information is stored. We also made use of Font Awesome icons in this file.

Modularity Requirement:Meltem and Megumi used 3 SSI documents; nav.part, mainfooter.part and rightfooter.part, and Javascript to fulfill the modularity requirement. nav.part was used for the banner and menu, and the remaining two .part documents was used to make the code for the footer more modular. The reason why we have two is because we wanted to include one within the off-yellow background and one outside of this background.

Updated Organizational Scheme

All of the following files are gathered inside a folder 'beta'.

List of Files and Folders

Final Work Division

Filename Description In charge
homepage.html The homepage Meltem
about_nann.html Brief biography about Nan Nan and the work that she does Meltem
about_inspirations.html Information on Myanmar’s art and culture Megumi
artwork_paintings.html Nan Nan's paintings Meltem
artwork_design.html Nan Nan's design and crafts Meltem
atutu_aboutTheSchool.html Information on the school and classes Meltem
atutu_childrenArtwork.html Information on the children and display of their artwork Megumi
getInvolved_donate.html Donation information Megumi
getInvolved_volunteer.html Volunteer information Megumi
contactUs.html Information on contacting and supporting Nan Nan and Atutu Meltem
headerLogo.png Logo for the header: children's drawing edited on Photoshop Megumi
nav.part Contains the html coding for the menu bar that is consistent among the pages. Meltem and Megumi
mainfooter.part, rightfooter.part Contains the html coding for the footer that is consistent among the pages. Megumi
rollOverMenu.js A Javascript for a roll over menu when hovered upon Megumi
volunteer.js A JavaScript to add a volunteer form Megumi
processform.php A php file used in the volunteer page that stores information provided by the user, sends the information to Nan Nan, and sends a confirmation email to the user. Megumi
slideshow.js A Javascript file for the homepage that generates a slideshow of images corresponding to the highlights of each page included in the webpage Meltem
slideshow_pictures.js A javascript file where all the pictures for the homepage slideshow are stored Meltem
artWork.js A Javascript using loops and arrays to correlate Nan Nan's artwork with the respective prices and images Meltem
artwork_design_data.js A Javascript file where all the pictures for the furniture design page are stored Meltem
artwork_painting_data.js A Javascript file where all the pictures for the painting page are stored Meltem
randomImagesTopBar.js An additional js that randomly chooses a set of three images and makes it appear on the top of some pages. Megumi
maynmarTopBar.js An additional js that chooses one image out of three images that is included on the top of the inspiration page. Megumi
contact.js An additional Javascript file that adds a Google map and hide-show effects for the contact information Meltem
styling.css The CSS file containing all styling for the website Megumi and Meltem
Final controls Double checking each file for errors, checking the javascript and css Megumi and Meltem

Valid CSS!

Valid HTML 5