Project Design for Taiwanese Cultural Organization (TCO) Website

Administrative Details

Our client is Grace Yeh '07, the co-president of Wellesley College's Taiwanese Cultural Organization (TCO).

Location and Maintenance

The web site will reside on the Wellesley College server under Student Organizations. It will be maintained by Stella del Rosario '07, the publicity chair of TCO. After the 2006-7 school year, the site will be maintained by the future publicity chair(s) of TCO.

Purpose and Goals

The main purpose of this project is to provide a comprehensive, up-to-date website for Wellesley College's Taiwanese Cultural Organization. Currently TCO's website looks unprofessional and has not been touched since 2003. The new TCO site will keep non-eboard members updated on current club information, inform Boston area students of any open club events, and provide general background information for those who have interest in Taiwanese culture. In doing these three tasks, TCO hopes to recruit more Wellesley students to become members of the organization. The site therefore targets Wellesley College students of all backgrounds, prospective Wellesley students looking for cultural organizations on campus, and members of other Taiwanese cultural student clubs. Because there is a wide intended audience, the web site will be designed for cross-platforms, all browsers, and all screen resolutions. Furthermore, because TCO is a non-partisan cultural organization that welcomes the membership of all Wellesley College students, the site will not use any of the politically-sensitive colors of Taiwan (green, blue, red, yellow) as its main color scheme or assume any knowledge of Taiwanese culture and Mandarin Chinese.

Content

The index page (index.html) will serve as the welcome page, containing today's date, a welcome message and an announcement section. The navigational sidebar will display the eight subpage links in the following order: About TCO (about.html), About Taiwan (taiwan.html), Taiwanese News (tw-news.html), E-Board (e-board.html), Organization Events (org-events.html), Inter-Collegiate Events (inter-events.html), Pictures (pictures.html), and Links (links.html), all under the main directory. All graphics created for the design and layout of the website (shown on the index page and all subsequent pages will be placed under the /images directory. Images of Taiwanese landmarks will rotate, showing a different image at every page refresh. We will aim to have at least four rotating images.

The About TCO page (about.html) will be a general overview of the organization. It will include the history of TCO's presence at Wellesley, including information about its name change from Taiwanese Student Association to Taiwanese Cultural Organization. A link to download TCO's official Constitution will be included, as well as fun animated AOL Instant Messenger or Windows Live Messenger icons which we will create ourselves. A form will be created to allow the viewer to enter and submit their email address in order to be added to the TCO mailing list.

The About Taiwan page (taiwan.html) will give background information about the republic. This page will be divided into five sections: brief history, geography, ethnic groups, language, and culture. One small picture (no bigger than 400x300) will accompany each section. At the top of this page will be a list of extended URLs that link to the different sections. TCO's executive board will supply the information, and we will follow up by searching for the appropriate pictures.

The Taiwanese News page (tw-news.html) will be a blog of recent current event news in Taiwan. The blog will be adapted from Tim Cantin's guestbook CGI script. At the top of this page will be a form for people who want to blog headlines. There will be a set of directions that accompany this form. (For example, headlines must be written in English, headlines must come from an online news source, news do not have to be about politics, and news source may be in Chinese.) A maximum of three headlines can be contributed with each blog entry. The form will ask for the following information:

Name:
Headline 1:
News Source 1: http://
Headline 2:
News Source 2: http://
Headline 3:
News Source 3: http://
Once the person submits this information, it will become part of the blog that makes up the rest of the page. Each entry will start out with the date, followed by the headlines that are linked to the outside news article. At the bottom of each blog entry will be a small note that says, "Posted by: Author's name at Time."

The E-Board page (e-board.html) will contain photos and information about each of TCO's executive board members, as well as their position. As Wellesley's student organization webpage guidelines require, we will not be including direct email links to each of the members. Instead, we will supply the organization's email link and a form that viewers can use to email the same email address without resorting to an external email program.

The Organizational Events page (org-events.html) will list events at Wellesley and in the Boston area hosted by Wellesley's TCO. It will first list upcoming events, which are then followed by past events. Event information will be displayed with a thumbnail of the corresponding flyer.

The Inter-Collegiate Events page (inter-events.html) will list events at Wellesley and in the Boston area hosted by other Taiwanese organizations, divided by upcoming and past. Event information will be displayed with a thumbnail of the corresponding flyer and a link will be provided to re-direct viewers to the appropriate organization's website.

The Pictures page (pictures.html) will contain digital images taken at various TCO events throughout the semester. We will include pictures from past years if able to find any. The pictures will be separated by events and years, with thumbnails that link to a smaller-scale version of the original photo. This link will open a pop-up window that will resize according to the dimensions of the opening picture, written by us in JavaScript.

The Links page (links.html) will be divided into three sections, each separated with a header. There will be links to other Asian student organizations at Wellesley, links to other colleges' Taiwanese student clubs (including intercollegiate clubs), and links to sites that provide information about Taiwan. The last section will not only include links to English-language publications in Taiwan and up-to-date Taiwan weather, but also an imagemap of Taiwan that clearly labels its three main cities -- Taipei (in the north), Taichung (in the middle), and Kaohsiung (the south). On the imagemap, each city will link to its official city government website in English.

Navigation Structure

For the TCO website, we will use a click navigational structure. On the index page, there will be a sidebar on the right that displays the eight subpages of the site. All subpages will also have this same sidebar on the right so that every subpage will be connected to every other subpage. Because there is no special “navigation” page, users will never have to click on back button in order to access another area of the site. We find this to be the most convenient way to navigate our site since it is relatively small, as none of the subpages have more pages underneath it.

Page Layout and Appearance

Every page of the website will have a common layout and color scheme. (Colors for consideration may be seen here.) A navigational sidebar will be placed to the left of all content and a TCO logo on the top right will serve as a link back to the welcome page. The design of the page will aim for a layout where the sidebar and text area seems to be contained in a different layer over the main page, with rounded edges. The sidebar and main content will be placed in the vertical center of the page rather than "sticking" to the top left-hand corner of the page.

The sidebar will contain graphics that links to the eight subpages; when a mouse pointer is placed over the linked area, its rollover state will change. This JavaScript code will highlight the area selected in a different shade of purple and a bullet point will appear next to the link text.

To avoid politically-sensitive colors (green, blue, red, yellow), we will be using various cross-platform safe shades of purple and grey. The sidebar will be designed with a purple and grey color scheme. The background color of both the page and the text area will be white. The typefaces used will include Verdana, Arial and Times New Roman, because of their wide availability and usage. Main text will be in a dark grey at 12pt, with headers and links in shades of purple. External links outside of the Wellesley TCO webpage will open in a new window to avoid having the user leave the website unnecessarily. The TCO organization email and any other contact information containing an email address will be made into an image to avoid spam. Each page will include the "dog tag" that Wellesley requires of all webpages on its server.

Minimum Requirements

This website will have animated graphic files, an imagemap, date manipulations, rollovers, and a code for calculation/window manipulation.

The animated graphic files will be the AOL Instant Messenger or Windows Live Messenger icons that appear on the About TCO page. For example, one icon will be a T, which turns into a C, which turns into an O, and then loops back to the beginning. Another icon will be of a Taiwanese waving flag. Both Emily and Stella will be creating at least one icon each.

The imagemap will appear on the Links page. It will use a picture of Taiwan that clearly labels the three main cities (Taipei, Taichung, and Kaohsiung) both geographically and textually. Each city on the map will then link to its respective official city government site in English. Emily will be creating this imagemap.

We will use JavaScript to display the date the visitor accesses the website. This will go on the main index page. Emily will be creating this JavaScript code.

We will also use JavaScript for the rollovers needed for the navigational sidebar. As stated above, when a mouse is placed over the link area, the JavaScript code will highlight the area selected in a different shade of purple and a bullet point will appear next to the link text. Stella will be creating the necessary images and Emily will be writing the code for its rollover state changes.

Another JavaScript code will be written to calculate the dimensions of an image that appears after clicking on a (resized) thumbnail of the same image. These dimensions will then be used to resize the pop-up window that will appear to display the image, so that users will not have to navigate away from the main TCO window. Emily will write the code to calculate dimensions and Stella will write the code to resize the pop-up window.

Plan

Our goal is to have a part of the project done by each Friday, with the exception of the Thanksgiving break week where we will aim to have it done by the end of the break. Files Needed to Be Created

Organizational Scheme of Files 

	/about
		constitution.doc
		tco-icon1.gif
		tco-icon2.gif
	/e-board
		president.jpg
		publicity.jpg
		secretary.jpg
		social1.jpg
		social2.jpg
		treasurer.jpg
		vp.jpg
	/images
		1.jpg
		2.jpg
		3.jpg
		4.jpg
		email.gif
		tco-1.gif
		tco-1over.gif
		tco-2.gif
		tco-2over.gif
		...etc
		tco-logo.gif
	/inter-events
		flyername1.gif
		flyername2.gif
		...etc
	/links
		map.jpg
	/org-events
		flyername1.gif
		flyername2.gif
		...etc
	/pictures
		/event_name1
			1.jpg
			2.jpg
			...etc
		/event_name2
			1.jpg
			2.jpg
			...etc
	/taiwan
		culture.jpg
		ethnicgrps.jpg
		geography.jpg
		history.jpg
		language.jpg
	about.html
	e-board.html
	index.html
	inter-events.html
	links.html
	org-events.html
	pictures.html
	taiwan.html
	tco.css
	tw-news.html

by: Emily Huo & Stella Yu
date created: 11/03/2006
date modified: 11/05/2006