Module 7 and 8- More Website Design

In designing my website, I've decided to dedicate my header to branding and the requisite social media icons. I'll be incorporating scan columns especially on my home page to segregate my Google Reader and Facebook feed from the text in a logical way.

As for my home page organization, I'd like to think of my home page as a breezy newspaper with lots of images to catch the eye. I want to keep the colors and patterns to a limited palette so that we don't distract from the text. For the footer, I'd like to repeat the navigation bar so no one has to scroll to the top of the page to move on.

I wireframed my first page(https://cacoo.com/diagrams/I8Mb9NM1Ks2Lc16A ) and my home page (https://cacoo.com/diagrams/WrgKBAQOncWdyZmt) but ended up not following the plan very strictly. Not that the wireframe wasn't a useful exercise, it helped me decide what I couldn't live without.
Here's how the final pages ended up.
http://theblesseddamozel.wix.com/desperatedramateach#!home/mainPage


http://theblesseddamozel.wix.com/desperatedramateach#!theater-history/c1enr

I would like to integrate a left-hand navigation bar to the sub-pages listed under Theater History, but I haven't figured out how to do that. As far as interactivity , I was able to incorporate a Google Reader feed, an interactive site survey and a Facebook "Like" button which  I think satisfies the majority of the rubric.

 In a separate, unrelated note, thanks to the accessibility exercises we did in class, you will note that a typed transcript accompanies the video on  “The Beginnings of Theater” page. Plans have been made to provide transcripts for all site videos. Now I just need to tag all my images.

Web Accessibility and Cascading Style Sheets

MODULE FIVE-JOURNAL-WEB ACCESSIBILITY

     Initially looking at the website below for accessibility issues, I identified poor color contrast (light blue text  on  a royal blue background), fuzzy and broken text, hyperlinks in the same color as the background, and an irritating marquee tool that would have made the site difficult to read for users with poor vision. While there was a video, the audio was not captioned. Text shown on the screen did not mirror the narration.  These faults kept the site from being Perceivable and Understandable .  Navigation on the site was by mouse alone which would have rendered it in-Operable for users with motor-function disabilities. The site lacked font consistency. There were no options to change the appearance of the text.

http://spider.georgetowncollege.edu/peach/edu558/accessibility/accessibility-bad-example-1.htme

The “Cynthia Says” website was much more thorough and specific in pointing out accessibility issues than the “WAVE” site.  It noted untagged elements, tables and frames as well as a lack of specific code to keep the screen from blinking. “Cynthia Says” verified that the site was not “robust” because it pointed out numerous “IMG” elements containing the “alt” attribute with an empty value. Here is an example from Line 56.

<img src="images/link2.jpg" width="476" height="142"></a><a href="http://webaim.org/resources/cynthiasays/"><img alt="" src="images/link3.jpg" width="476" height="142" class="style1" /></a></p>

I was confused as to why this should matter until I read the following explanation on http://www.useit.com/alertbox/9610.html.

"Most people already know about the use of "alt attributes to provide alternative text for images though there are still many Web pages without ALTs. Some accessibility specialists advocate so-called "described images" where text is provided to verbalize what a seeing user would see. For example the Web Access Symbol shown above might be described as a glowing globe with a keyhole." In my opinion such literal descriptions are fairly useless for Web pages unless the user is an art critic. I much prefer "utility descriptions" that verbalize the meaning or the role of the image in the dialogue: what is the image intended to communicate and what will happen if it is clicked?" "An accessible website should utilize alternative  texts or utility descriptions of all images to make them comprehensible to visually-impaired users.

     Marquee elements contain scrolling text and are unsuitable for truly accessible websites.

     Testing my former school’s website (http://www.tcms.fcps.net/) found much of the same mistakes as in the class example site. Uncaptioned video.  Untagged elements.  Code not sufficiently robust. No options to change font sizes or color. I called Tammy Lane of the Fayette County Public Schools to see if there was a policy in place concerning web accessibility. She said that there is no official Fayette County policy on website accessibility for the disabled. Four years ago when they overhauled the site they began instituting the use of tags so a reading program could pick up the text, but that’s about it. They do not add descriptive tags to photos or caption audio.

     After reviewing the materials from this module, I can see I will have to revise some plans for my web site. While most of my video has text transcription available, it’s not captioned. I can do that myself as it’s just a matter of dropping things back in the video editing program. Color and font choices should be easy to control, but I’m not sure of how to add audio narration for the blind without the page becoming too crowded. Can I just use tags and let the assistive technology do the rest?  I already control for color blindness on my page because my fiancé is color-blind.  Client-side image maps should assist users with limited motor coordination. I also need to let people know that my site is accessible by using the symbol for accessibility.

In reading about the various issues inherent to web accessibility, it occurred to me that this issue of web accessibility is more crucial than ever as our population ages. I’ll be fifty this year. I’ve been using the internet for almost twenty years at this point and I certainly see myself continuing to do so for at least the next twenty years. In designing a web site for use by both my students and other drama teachers I need to consider a design not only for my possibly impaired users, but for myself in the future.

MODULE 6- JOURNAL- CASCADING STYLE SHEETS

You weren't kidding, Dr. Peach, this was a bit of a pain. However after two aspirin ,a large slice of chocolate cake and more than a little profanity, I finally was able to change header one and two to hot  pink and my background to green. I can see where the use of  Cascading Style Sheets would help a blogger customize their template for a unique appearance that is consistently applied over multiple entries/pages. I don't know how much of this I'll be applying to my particular project, but it was a useful tool to learn.(Note on the above reference to profanity: I promise I was home alone.)