The good, the bad, the ugly - Best Practices for Design in SharePoint
E-Portfolio Defense
1. Educ 431 Dr. Andrew Kitchenham Defense by: Marian Minar November 22, 2007 Music : Zero 7 – “End Theme” *click to continue
2.
3.
4.
5. Microsoft Expression Web My choice of software was “Expression Web” by Microsoft. I chose it because it has most of the editing capabilities of Dreamweaver and the uniform handling of a Microsoft product I chose to incorporate a Dynamic Web Template so that I could work with Cascading Style Sheets (CSS); these allowed me to change the style (colour, size, font, etc.) of all my pages on the fly
6. The Beginning This is the starting point of my webpage,which I have called “My Education, My Profession” (so called because I view my profession as both a learning and teaching experience) Note that the focal point is surrounded by a sea of uniform color (which comprises the whole viewing area), and that the actual content is much smaller than the boundary of the webpage This does two things: (1) it keeps the focus on what’s important with minimal eye strain (less re-focusing during page transitions), and (2) the theme to the colors enhances the flow and connection between all of the elements of the webpage The side image is an autumn scene. I chose this because this is the season I associate school the most with (I can’t be the only one, so this seems appropriate to have as a theme).
7. The Beginning It’s all in the details … initially, there was no space above the content and the address bar. My fiancé quickly pointed this out, to her credit, and I made the necessary changes.
8. Font Main headings such as “ePortfolio” are <h2> and subheadings such as “Rationale” are <h3>. I chose these because of their nice appearance (size) relative to the normal paragraph font size. The global font is “Trebuchet”, a standard MS sans-serif font. I chose it in particular because I appreciate the slight contrast between capital ‘i’ and lower-case ‘L’
9. The Main Navigation The main links within my webpage appear as fancy buttons – they stand out to attract a visitor’s attention to the main categories in my website. They appear on every page for consistency. Note the little tiny links to the main topics at the bottom. No, these are not redundant. They are for convenience: some of my pages contain more-lengthy-than-usual content, so for the convenience of anyone who does not want to travel back to the top, they are provided for them when they finish reading that page.
10. The Side Navigation The menu on the side is a universal feature of the website. I made the effort of making it context-sensitive while browsing each portion of the webpage, so that the ‘Menu’ is flexible to change depending on where you have navigated. Essentially, this adds to the user-friendliness of the website. All un-navigated anchors in the webpage are the standard ‘blue’, so that there is some familiarity with other web pages (navigated anchors are the standard purple)
11. e-Portfolio vs. BCCT Standards The BCCT Standards are separated from what I have designated as my e-Portfolio. The section called e-Portfolio is a collection of artifacts that is not structured by the “Standards” but by other professional categories (based on Kilbane & Milman (2003) pg.56)
12. BCCT Standards But not to worry, they are still there! For visitors that are not familiar with the standards, a convenient link exists inside the main page.
13. BCCT Standards Note that each Standard is listed on the side Let’s navigate inside “Standard 1” and see what awaits …
14. BCCT Standard 1 This indicates what Standard we are looking at A quote of the Standard appears here The support for the Standard is an artifact, so its cell is darker, more pronounced The rationale and link to the artifact appear here and here, in less pronounced colours (to contrast against the darker shade) The rationale is a succinct explanation and support for my choice of the artifact. In each Standard (that is developed) the table remains standard for clarity and flow of presentation.
15. Other Mentionables But, that’s not all folks… A developing reference collection for exceptional students awaits you here A complete ePortfolio (under construction) can be accessed on any web page and … My personal info, including a developing photo gallery, and a link to my resume are all there!