DRAFT 2/25/08 The Wayne State University Department of Industrial and Manufacturing Engineering Website to Support Continuous Improvement in Undergraduate Programs This purpose of this document is three-fold. First, it provides the overarching design strategy for the Wayne State IE Department ABET website. Secondly, it offers an overview of the website content without the necessity of exploring all of the “nooks and crannies” of the site. The third intent is to create documentation necessary for someone to maintain the site. The website is located at: http://webpages.eng.wayne.edu/IME_abet2012/ The URL references abet 2012 which is the next scheduled ABET visit. The website has been designed to contain all data, information, and conclusions that support the continuous improvement of our Industrial Engineering Program.
Transcript
DRAFT 2/25/08
The Wayne State University Department of Industrial and Manufacturing Engineering
Website to Support Continuous Improvement in Undergraduate Programs
This purpose of this document is three-fold. First, it provides the overarching design strategy for the Wayne State IE Department ABET website. Secondly, it offers an overview of the website content without the necessity of exploring all of the “nooks and crannies” of the site. The third intent is to create documentation necessary for someone to maintain the site.
The website is located at:
http://webpages.eng.wayne.edu/IME_abet2012/
The URL references abet 2012 which is the next scheduled ABET visit. The website has been designed to contain all data, information, and conclusions that support the continuous improvement of our Industrial Engineering Program.
Overview of ABET Website Design Architecture of the DesignNavigationFile StructureColor and Design Layout
Overview of Website Content ABETIE ProgramAssessment EvaluationMeetingsResources
AppendixA. Management of pdf documentsB. Cascading Style Sheets
DRAFT 2/25/08
Overview of ABET Website Design
Architecture of the DesignThere are three primary ideas that have driven the design of the website. First, it provides open access to public data (e.g. program learning outcomes, structure of the curriculum, etc. Assessment and evaluation data are, however, maintained in segment of the website which is password protected. Once an individual is logged onto the secure port, navigation between the secure and open segments of the site does not require re-validating secure access. If an unauthorized user surfs the site and attempts to enter the secure section, that user is presented a dialog box requesting the access code and password.
Figure 1: Relationship Among Database, Website and ABET Report
The second high-level design concept centers on ease of maintenance of the site. As much as possible, pages are based on templates that will require very simple updating at the end of each semester. The data that populates the site is
DRAFT 2/25/08
directly downloadable from our ABET assessment/evaluation database as pdf documents. In order to maintain the website, database reports are saved in specified locations, and linked to the appropriate html page.
The third concept is the relationship between the website and the Self Study Document required in the ABET accreditation process. For as much as possible, the documents on this website can be pasted directly into the Self Study Document. In fact, a draft version of the 2012 ABET Self Study Document is maintained on the website.
NavigationThere are six major chapters of the website. At the top of each page is a navigation bar that displays these sections. In the figure below, the user has navigated to the Assessment section. In addition to that menu item being highlighted, a secondary menu is displayed, that lists the navigation options within the Assessment section. This avoids both a frame-based environment and the necessity of navigating back and forth to a menu page.
Figure 2: Primary Navigation Bar
File StructureThe file structure of the site is shown at the right. Each of the principal chapters (e.g. ABET) has a folder in which materials used in that section are maintained. The six html documents that begin with the underscore character define the content of the site in that section. The folder program_data contains the secure information. There is a file structure within this folder that that replicates the folders: abet, assessment, evaluation, etc. In order to view these data, the user must navigate into the restricted folder program_data. Here a dialog will be initiated to verify access (unless this has already occurred during the user session).
Color and Design LayoutThe site design uses a simple layout strategy. Tables are used only to present tabular data, and not as a way of positioning objects on a page. Most pages appear as lists of categories with sub-lists as links to key data.
DRAFT 2/25/08
Cascading style sheets are used specify the formatting of text and layout. In maintaining the pages, care should be taken to avoid automatic html format generation in editors such as GoLive. Appendix B describes the css style sheet.
The color pallet for the site is simple. It uses three colors:
Grey (#cccccc) for page backgroundsGreen (#00ff00) for borders, links, and visited links Lighter green (#009900) for some borders
The ABET chapter of the website has three subsections:
General Criteria Industrial Engineering Criteria ABET Website
The first two links are to pdf documents found on the ABET website. We have used Adobe Acrobat to edit full documents to contain only information relevant to our IE program. The link to the full ABET website is also available from the main ABET menu.
In order to maintain this section of the website it will be necessary to review changes in both the General Criteria and the IE Criteria. New pdf documents can be downloaded from the ABET website and irrelevant data edited out using Adobe Acrobat. The updated pdf files are stored in the ABET folder in the public section of our website.
Mission and Objectives of the Program Learning Outcomes Course Structure Faculty
All information in this chapter of our website is open for public viewing.
The Mission and Objectives section documents these important drivers for our program. There is a link to the Wayne State mission statement. In our ABET self-study we must describe the consistency of our program objectives with the university mission statement.
In maintaining this segment of the site any change in our program mission or objectives needs to be updated here.
The second subsection reports our fourteen IE Program Learning Outcomes. These are divided into two groups: the general abilities and the IE-specific
abilities. Each learning objectives is related to one or more of the a-k ABET outcomes.
In maintaining this segment of the site, any change in our program learning outcomes needs to be updated here. If ABET changes any of the a-k outcomes, this must be reflected so that our learning objectives reference the proper ABET outcomes and so that our learning outcomes completely cover the required ABET outcomes.
The next subsection documents our IE program structure.
Clearly, changes to the curriculum requires that this page be edited. The specialized format of the curriculum table is documented in appendix B of this document.
The final section in the IE Program Chapter is IE Faculty. From this page an ABET-styled vita can be viewed for each of our faculty. This data is contained in a single pdf document with page-based anchors.
The MS Word document for the vitae is faculty.doc found in the folder Resources in the public files. If maintained on an annual basis, this file will be able to be pasted into the ABET self study report when required. It also provides (in the spirit of ABET) an ongoing documentation of the faculty supporting the undergraduate program. When this is updated, it will be necessary to update any page-based changes in the anchors. We will be making a change that will allow text-based anchors that will simplify the updating process. New software will be required to accomplish this.
DRAFT 2/25/08
Assessment One of the key chapters in this website focus on assessment.
“Assessment is one or more processes that identify, collect, and prepare data to evaluate the achievement of program outcomes and program educational objectives.”
There are three segments in the Assessment Chapter:
Assessment Processes documents the component parts of this activity. Links add detail.
Course Assessment provides access to the following information for each course
ABET Syllabus Status of the course Assessment data for each offering of the course (beginning Fall 2006)
The ABET Syllabus is a pdf document that contains all syllabi. Links from the course webpages are created through pdf destinations. These may be page-based or labeled1. The anchor tag for a pdf document references the document with either #page=pagenumber or #destination. Destination is a destination label which can be set using Acrobat. The destination label is preferred so that insertions in the page sequence will not require redefining all anchor targets. It does, however, necessitate the use of Acrobat to set the destinations.
The status of the course is a simple Green, Yellow, Red designation. (We permit intermediate points such as Green/Yellow.) The status designation is reviewed by the Undergraduate Curriculum Committee in end-of-semester reviews.
1 Currently there is a problem with the Safari browser in accessing destinations within a document, so if you are using this browser (or Firefox) the link will be to the first page of the pdf document. This bug has been reported and is in the “bug-fix” list at Apple Inc.
DRAFT 2/25/08
Assessment data for each course offering contains five standard items:
Course Learning Objectives Report Contribution to IE Program Objectives Contribution Detail Assessment spreadsheet Actions of Curriculum Committee
Following these links will carry the user into the restricted domain of the website. This restricted site is contained in the file folder program_data. Each course offering has a folder labeled with the year_semester_course, designation. The following figure shows the several reports that are linked from the course offerings.
QuickTime™ and a decompressor
are needed to see this picture.
Figure 4 File Structure for Assessment Data
There are three reports from the database
xxx.rpt1 (Course Learning Objectives Report)xxx.rpt2 (Contribution to IE Program Objectives)xxx.rpt3 (Contribution Detail)
The spreadsheet (f06.ie3120.xls) contains the data relating student performance to assessment results. A detailed syllabus (not the ABET-style syllabus) may be included here. Finally, the pdf report of the Undergraduate Curriculum Committee should be included (this is missing in this example).
DRAFT 2/25/08
It is extremely important that a strict labeling of documents and hierarchical file structure be continued to simplify site maintenance.
These three reports are described in a companion document database_documentation.pdf. These reports are generated directly from the database and stored in the appropriate file location in the website.
Course Report-1The database report course_report1 provides a summary report for each course by semester taught. It reports the class achievement on the course learning objectives and displays a matrix of how these course learning objectives map onto the IE Program learning outcomes.
Course Report-2This is the second of three reports documenting student performance on individual courses. Here, however, the focus is on the contribution of this course to IE Program Outcomes. An assessment score is computed for each IE Program Outcome supported by the particular course.
Course Report-3Course_report3 provides detail supporting Course Report-2 by listing all Course Learning Objectives mapping onto each Program Outcome.
The following link provides a view of these three reports for IE3120 for the Fall Semester 2006.
Maintaining this chapter of the website requires four tasks:1. The three course reports must be downloaded from the database (see
database documentation) and placed in appropriate folders.2. Supporting data (e.g. Course Spreadsheet or other documentation
relating student performance to achievement of course learning objectives must be up-loaded to the website. Documentation of the discussions/recommendations of the Undergraduate Curriculum Committee must be uploaded. The recommended status must be confirmed (image files are in the folder images).
3. On some regular basis (not necessarily every semester) the ABET Syllabus should be updated. This is kept in the Resources Chapter as an MS Word Document. The updated document should be saved and converted to a pdf file and linked appropriately on the course page.
4. For each course page, the appropriate data for the offering of a given semester must be added and links added to the resources.
The resources chapter of the website does not contain additional data. Rather, it contains supportive documents. For example, it contains the MS Word documents for the ABET syllabi and the faculty vitae.
It also contains the past ABET Self Study documents as well as the draft of the 2012 Self Study. Our response to ABET for the 2006 visit is also archived here.
The course assessment spreadsheet tool and its documentation are also available from this page.
We will add other documents to this page to collect all resources to support our ABET assessment, evaluation and reporting.
DRAFT 2/25/08
Appendix
A. Management of pdf documentsB. Cascading Style Sheets
DRAFT 2/25/08
Appendix AManaging pdf documents on the Site
One of the design strategies of the site is to have resources that can be used to create the ABET self-study document. In some cases we maintain two files on the site (e.g. faculty.doc and faculty.pdf) The first file is used to create and maintain the information while the second is posted on the site for access from an html page. Doing this allows us to have the original file faculty.doc to used in the self-study document. Conversion of a .doc file to a .pdf file can be accomplished using Adobe Acrobat or in Mac OSX the print command can be configured to print to a file in pdf format. (I don’t know if this is also available using VISTA???)
We can use Acrobat to also convert pdf documents like eval.pdf (program_data/evaluation/eval.pdf) which contain the evaluation summaries of the IE Program Learning Outcomes to a MS Word document.
1. Open the file with Adobe Acrobat (not reader)2. Choose File>Save As>Microsoft Word Document3. Save 4. Open the resulting .doc file5. Convert from rtf format
The results can be copied and pasted into the self-study document appendix. In this case, the content of the MS Word document is a set of images corresponding to the pages in the pdf document. However, if the pdf document contains text, the conversion will be to a text-based .doc file.
DRAFT 2/25/08
Appendix BCascading Style Sheets
As mentioned earlier, the ABET site is formatted using Cascading Style Sheets (CSS). The css file abet_ie.css is found in the folder named css. This file is referenced in the header block of each html page.
}For every page in the styled set the background color is medium grey #cccccc. Each page has a background image images/imelogo2.jpg (the ie logo ) which is located in the folder images. The background is not repeated and is positioned at the left margin (and by default at the top of the page).
The preferred font family is Arial, but if a browser does not support that it will be displayed in Helvetica, or if that is not available, any available san-serif font. The font weight and font style are normal. The font size is the default size specified in the browser.
DRAFT 2/25/08
Headings and Specialized Font Formats
h1{font-size: 1.5em;text-align: center; }h2{font-size: 1.0em; text-align: left; font-style: oblique}h3{font-size: 1.0em; text-align: center; font-style: oblique}.margin50{margin-left: 50px}p.foot{text-align: left; text-indent: 1em; font-style: italic} check to see if used.cite{margin-left: 30px; font-size: .9em; font-family: Arial} check to see if used
The most common text formats on the site are the standard text defined in the body class and two headers h1 and h2. The header h1 is used as to title each html page, and h2 are the sub-titles. Both default to the font-family Arial defined in the class body.ie. The titles (h1) are 1.5 em (1.5 times the standard text specification size) and are centered on the page. The sub-title text (h2) is in the standard text size (1 em), aligned at the left, and displayed in oblique font style. The style h3 is identical to h2 except that it is centered on the page. This is used for titles of images and graphs2.
The elements Fall 2007 and Winter 2007 was formed using an unordered list <ul> …</ul> Sometimes, however, we want a heading in h2 format followed by an indented explanation or a single item. In this case we use <p class=”margin50>. This will create a new paragraph following the header which is indented 50 pixels.
2 (see http://webpages.eng.wayne.edu/IME_abet2012/_assessment.html)
Anchors default to underlined blue for the link and purple for a visited link. In keeping with the green color theme for this website, the css code specifies green for both the visited and unvisited link. The navigation buttons are links and the last specification above specifies that they will not have a border surrounding this image link.
Navigation on the site is accomplished using two sets of navigation items. At the top level these are images for the major “chapters” in the site. In the diagram shown below, we are in the chapter Assessment; the second text line lists the choices of navigation within Assessment: Assessment Processes, Courses, and Exit Interviews.
Each of these two “navigation bars” is displayed inline. That is without the insertion of a line break as is normal for objects in a list. The first css statement defines the fact that when an object (such as an unnumbered list is of the class navbar, any list item (li) is displayed inline. The second statement indicates that any images contained within the block will have padding of 10 pixels. This gives the spacing between the images in the figure above. Finally, text-align: center specifies that all objects (including images) in the navigation bar will be center justified. Spaces between the text words are handled in the html code using blank spaces ( ).
DRAFT 2/25/08
ImagesMost of the images on this website are displayed as block elements centered on the page. This is accomplished using the class=”display”. The centering is achieved by setting the left and right margins to auto.
Many of the pages on the website are formatted using unnumbered lists. Two classes are defined for these lists. In both cases each list item has no bullet symbol. In list style in1, the list entries are displayed in font-weight:bold, while in list style in2 the list entries are displayed in normal text.
The following figure displays how we have used these to format pages. In the case shown, the page displays at three levels. At the top level we use h2 formatiing for the elements
IE 3120 ABET SyllabusStatusCourse Offerings
The list itemsFall 2006Fall 2007
Are items in ul class=”in2”After each of these list items we have a second embedded list (again ul class=”in2” which display links to the six list items displayed.
DRAFT 2/25/08
QuickTime™ and a decompressor
are needed to see this picture.
Almost all of the pages on the site are very simple constructs like the one shown above.
Table Formatting
As a general rule, we use good CSS styling and do not use tables as a method for page layout. In a few cases on the site we do display true tabular data. For example, under Assessment>Courses3 we have a table of the IE core courses with links to detailed assessment data.
In these simple tables, no attempt is made to force column width. The default is that the column widths will adjust to the longest text strings in the set of rows. The specification text-align: center; which is part of the definition of the table class “gallery” centers the table on the page. The format of the list elements are specified in the definition of td (and for the header th). These default to left justify.
DRAFT 2/25/08
Specialized Case of the Curriculum Table
The curriculum table only occurs once in the website. The CSS code is specified by using id selectors which are specified on the page in which this unique formatting occurs. The page style is specified in page header.
The curriculum table actually consists of eight tables, one for each semester from freshman to senior year. This table objects are embedded in the following structure of block elements.
DRAFT 2/25/08
The html code defining the embedded objects follows. Id=”wrap” produces a box 800 pixles in width. Id=”colL is a block 400 pixels in width floated to the left, while id=”colR is a block 400 pixels floated to the right. Each table object has a specified width of 400 pixels.
<div id="wrap"><div id="colL">
<table id="tbl1">….
</div><div id="colR">
<table id="tbl1">…
</div></div>
The formatting within the tables differentiates the top row, the bottom row, the left column and the data column. <table id="tbl1">
<tr id="toprow"><td>Freshman Year (Semester 1)</td><td>credits</td>
