To: emcc-urops@MIT.EDU Date: Wed, 02 Aug 2000 15:20:41 -0400 From: Nishikant Sonwalkar Technical Design Update ----------------------- Active Elements for School of Engineering Website ------------------------------------------------- Nish Sonwalkar ------------------------------------------------------------------------ Participating Team: Nish, Mike, Brian, David, Arjun, Demon, Pawan Following elements will be desinged for SoE web-site: 1. Roll overs with cascaded menues for home-page (GO-TO) 2. Spotlight images and stories on the home-page 3. Pop-up windows for browsing various stories under "experience" page (a) most recent stories, (b) random walk (c) archived 4. Pop-up window for showing photo gallery (Experience). 5. Search and display of the info-bits for engineering education (NEWS). ------------------------------------------------------------------------ 1. Roll-over with cascaded menu: The navigation element "Go To" has roll over with several options for pop-up menu. The options will include following items (e.g.): - departments - labs, centers and programs - department, labs, centers and programs Behavior: The mouse over on the navigational element "Go To" will invoke a menu with three pull down elements, on mouse over on the cascaded menu will result into display window with a list of 10 departments, or centers and labs (list of 17) and the third list will include over 50 items with departments, labs, centers and programs. 2. Spotlight images and stories on home page: The home page will have two distinct area for spotlighting stories related to SoE or stories making major headlines related to engineering. These stories will be picked up from a flat-file database along with an image cropped to a given size. The stories for spotlight will be picked up from a spot-light story submit form which will identify the location of the story. Behavior: The spotlight stories will be activated from the spotlight windows (two windows side-by-side). On clicking the headline displayed in the spotlight window a pop-up window will appear with the spot-light story, image, and url for the source. 3. Pop-up window for stories from "Experience": The stories related to MIT experience will be enumerated in a list. A click on the list item will display the story with associated images. There are three ways to access these stories: a. 10 most recent stories b. Random walk through the stories c. Archive for stories Behavior: A flat-file database will be created to store the stories in chronological order. The top 10 stories will be picked up for display on the experience page. There will be a cgi-script connected to a button on the experience page for the selection of the random walk. A click on this button will dynamically generate a HTML page with random selection of the stories. The third option will also be present on the page with button termed as "archive". The archive button will query the file which will contain list of all the stories. The story list will be updated periodically. Selection to any story will open up a pop-up window and display story in the pop-up window. The pop-up window will be a browser-window with scrolling option. 4. Pop-up window to show photo gallery. The Experience page will include the photo gallery. The photo gallery will display six random pictures in thumb-nail style. A click on the thumb-nail will again pop-up window which will display the photograph/image and provide a short description of the image as well as give credits for the image-source. Behavior: The photo-gallery will be have click-able images in thumb-nail size. Clicking on an image will display a pop-up window. The window will be a Java-script window for display of the image and related information. 5. Search and Display of the Info-bits The information bits collected from the a list of sources urls will be compiled by a search engine (excite) and the results will be displayed in a tabular form for SoE person to select stories and news of particular importance. Once the selection is made the stories and news items will be published in the Engineering Tit-Bits area in the NEWS page of SoE web-site. Behavior: a. Web crawler to collect information: The web-crawler will collect information from a selected list of engineering information sites with a selected number of terms used for search. For example, crawler will search the site of Americas Society of Engineering Education (ASEE) http://www.asee.org/ with the search terms as "engineering news", "engineering events", "engineering education" etc. The first five search results from the preselected list of urls will be stored in a flat-file database. b. Create a list of info bits and display. A script will check all the records in the info-bits database for uniqueness and generate a HTML page with the title of the each info bit along with a check-box for story selection. c. Selection of info-bit and display on Web-site: The generated HTML file will become available to the SoE administrator on weekly basis for info-bit selection. The SoE admin will select the story for display on the NEWS page. The NEWS page will have a link "Engineering Education Info Bit". A click on this link will take user to an Engineering Education Information Bits page. The page will display titles of e the info-bits. A click on a selected title will start a pop-up window with the story displayed in the pop-up window. Implementation: Following perl scripts will be developed: i. Collection of storage of info-bits using web-crawler (Excite) ii. Creation of info-bit administrative page for story selection iii. User selection of stories on NEWS page and display of the information via pop-up window. Added functionality: The script written for chronological display, random walk through stories and an archive of stories can also be used for info-bit to provide three different modes of navigation through the info-bits.