Graphics and Media in the Rubric

The goal to have met the target for graphics includes the use of more than four, mostly user-created graphics.  Any other graphics used should be cited appropriately.  All graphics should be relevant to the site and load quickly.  I feel like I have a pretty good jump on this portion of the rubric.  Almost all of the photos on the site were taken by me.  I even had to modify one using Pixlr to add an arrow to show where parents could find certain information.  I have four graphics that I can think of that I got from other sources and I was sure to link each one to the original source and give attribution where necessary.  I do still need a page dedicated to citing resources as per the rubric.

The goal to have met the target for media is to have at least three different types of user-created media.  I do have many user-created videos on my website and I have one audio file.  This puts me in the "meets" category in media on the rubric.  I didn't add any animation to the website because I didn't feel like I could make it relevant to the goal of the website.  My videos and audio are relevant and will be helpful to my audience. 

Created Audio File

Here is the audio file I created as part of module 10.  The music came off of the Free Music Archive.  The music is licensed with a Creative Commons attribution license so whenever using the track I have to give attribution.

Oh Mallory (Josh Woodward) / CC BY 3.0

I chose to embed this audio file using the Google Reader mp3 Player.

Video To Demonstrate Fair Use

The video I created for this assignment is one I made to use on my website that shows the power of gas.  My students and I did an experiment using Mentos and soda to show just how much gas is in a bottle of Coke.  I used personal video in combination with footage from the show Mythbusters.  My use of the Mythbusters footage falls under the category of fair use because I am using the copyrighted material as an illustration of a concept.  What's also important about my use of this particular copyrighted clip is that it only adds to the original, personal footage and does not become the main focus of the video.

Music Fair Use

I found a nice blues track here that I could use in a video called "Broken" by Fit and the Conniptions.



Under it's Creative Commons License I can share this song.  The license does specify that I need to attribute this work (as seen below).

Broken (Fit and the Conniptions) / CC BY-NC-SA 3.0

Fair Use Image

I found this image of a duck.




I snagged this image, taken by ViaMoi in Ottawa, Ontario, Canada in 2008, and you can find the original here and you can find the license for this image here.

Fair Use Video

When I opened the videos it was actually the same link to the document that explained each video.  But since I had already seen most of the videos from the clip explaining fair use that I watched first I was familiar with what the document was discussing.  I think I did a pretty good job guessing how each clip fell under fair use policies.  It was clear that each clip was used in a context other than simply showing for showings sake.  There was a clear purpose for each clip being used and I think that's the key for using videos on our websites.  It is important to remember that when we choose to incorporate video into our websites it must be in a context beyond simply "showing it for fun".  There must be some sort of reason (documentation, commentary, critique, discussion, etc.) for using the video.  I'm thinking at this point that any clips I use on my site will be videos that I have made myself, making the only fair use issue that of incidental use (if there happened to be a song playing in the background or something like that).

Website Progress

I am happy with how my website is coming.  I like the overall look of it and I have lots of my content already ready to post.  I like how I could add the Facebook feature to the left side so parents can see what's happening on the Facebook page before they click on it.  I'm thinking about adding a Java Script feature to embed a calendar to the side of the page as well.  

My next step is to add all my content to the pages that I have set up and let my parents know via Facebook and a written note that the Website is functional.  So my big push for the next couple of weeks will be doing this.

I'm trying to keep in mind with everything that this is not a site that I will be updating all that often, rather a site that parents can use as a resource throughout the entire year.  I want to create something that I can easily maintain and don't want to add too many bells and whistles (as that has been my downfall in the past when making class websites).

Thoughts on Java Script

When initially going through the Java Script tutorials I was overwhelmed by the information and by the fact that I felt like I was reading a foreign language.  After I started actually using Java Script in the assignments I realized that it is really not so bad trying to insert it into webpages.  I especially liked that there are so many webpages dedicated to giving you pre-made Java Script that is easy to use in your own page.  The calendar that I found and inserted into my blog is something that I might even use in my class webpage.

Java Script Calendar

I'm testing out this Java Script calendar on my blog and if I can get it to work and like it then I might add it to my website.

This free script provided by
JavaScript Kit

Slideshow Assignment

---

Since your web browser does not support JavaScript, here is a non-JavaScript version of the image slideshow:

Wintery Weather

---

Winter Tree

---

Winter Road

---

Winter Sun

---

Winter Field

---

Roll Over Assignment

These are just the images that I used for the roll over assignment which is to the right of the page.

Module 8 Journal

I used to have a button on my class weekly website that allowed users to visit my page.  But I have now embedded a new Facebook box on my home page that allows users to see what is happening on the Facebook page without clicking a button.  I think this will be helpful to some users because I sometimes find myself of webpages and want to visit their Facebook page but I don't want to leave the page right then.  My embedded Facebook application allows users to view the Facebook page without having to leave my class website.

I want to meet the target in our website rubric to "Include more than one interactive/dynamic element" that gives users appropriate feedback (and is not just for entertainment) but I am having a hard time thinking about what I could put on my website that would fulfill this.  I have thought about including a survey about what parents are searching for on the site (and this can help me create a better experience for my users) but this doesn't really give the user any feedback.  I will also try to include a custom search bar so parents could search the site more easily to find what they need.  A custom search bar would provide the user with helpful feedback.  This is an area I need to take a closer look at in order to meet the expectations I 
have for myself with this project.

Java Script Update: I was wondering at first how Java Script might enhance my page and had come to the conclusion that it probably wouldn't; however, after doing the assignments from this week I realize that it's pretty easy to use Java Script.  I'm thinking now that I might use Java Script to embed a calendar onto my class webpage.  

Home Page Plans

What information will you put in your page header?

I plan to include a photo of my classroom, the words "Mrs. Dargle's Class" (my husband designs logos for a living so I might see if he can mock up an actual logo for our classroom), a brief description of what parents can do on the site ("a place to find out everything that's going on in Mrs. Dargle's kindergarten class" or something like that), and the tabs for my different pages included on the site.  If it's possible I'd like to have a search bar as well.

Will you be incorporating scan columns? If so, what specifically will be included?

I will have a scan column on the left of the page.  I want to include links to our class Facebook page (where news is updated daily), I don't know if I would need navigation links in the scan column if I will be including tabs for the same purpose in the page header.  I might include links to all of our units of study, to make it easier for parents to find them quickly.  Also maybe a list of links for educational websites available for use at home.  If I could include a calendar it might be nice, but I need to look into whether or not this is possible.

How will you organize the content on your page?

The main way I plan to organize is by using the navigation tabs in the page header.  I want them to be a clear way for parents to get to where they plan on going.  I want to have tabs for parents to see each unit we will study throughout the year (with a few resources they can use at home to help their child with each one).  I will have a tab for my class information packet, one for reading help, and one for math help.

What will you include in your page footer?

I will include contact information for myself and the school (phone numbers and email addresses, I'd rather not include address for the school, parents can get that on the school website). I will also include a "last updated" date so parents will know if information is up to date or not.

Design your internal page(s). Draw a wireframe and include in your journal and go ahead and design the page on your website. 

Notice that in the internal page for "Reading Help", the tab is bolded (to show that this tab will be highlighted in some way to show users what page they are currently browsing) and there is a breadcrumb trail at the top of the page so users can see where they are within the context of the entire site.  Each of my internal pages will follow this wireframe form with the current tab being used being highlighted.

Finally, design your home page. Draw the wireframe and design the home page on your website.

Bad Form Design

Looking over the "bad form" I noticed a few things I would change.  The "enter your name" option comes up twice.  One seems like it was probably a default setting and the other seems like something the creator added.  I would delete one of those fields.  In the "enter your phone number" field it essentially repeats, saying "enter your phone number" twice.  I would only have it written once so as not to confuse anyone using a screen reader.  When it asks if I "like" or "dislike" using web forms the answer options are only "yes" and "no".  There is really no way to correctly answer this question.  I would change it something like, "Do you like using web forms on other websites?" "yes" or "no".  When asking about experience with web forms I would rephrase "never done it" into a complete sentence and give fewer options to choose from.  When asked if I liked learning about web forms no information was given about the scale.  I don't know if "5" means I really like learning about it or really dislike learning about it.

How To Customize My Website

Weebly has a couple of options that would allow me to customize my website.  In the "elements" tab I can drag "custom HTML" into my page and edit HTML right there.  If I want to customize the CSS I can do that under "design" and then "Customize CSS".  The original CSS pops up and I have the option of writing in my own/changing what they have or I can press several options to the left of the page which change the CSS slightly and I can see the effects of the change immediately in the page viewer in the lower portion of the screen.

CSS And My Website

I looked into Weebly (where I plan to have my class website) and I am on the fence about whether or not I will try to customize the CSS or just use an existing template.  I would like to reach the "target" on the rubric for the final project, yet realistically I know that if I needed to add extra headers, pages, or links down the line (after this class is over) I would have to go in and continue to customize the CSS in order for my site to look constant, which is important to me.  I could also customize the CSS for this project and then go through later and take out my customization in order to make changes easier and faster in the future.  This will also allow me to focus more on my content rather than the look of my page.

The Web Style Guide brings up important points about semantic markup allowing text readers and search engines to know what is important on your website.  It seems like there is an overall CSS and then individual html sheets.  I can access the CSS to customize it by clicking the "design" and then "customize CSS" tabs.  Within this area I also have access to different files I can include in my design.  I can include social media buttons, change the different images on the page, and include custom buttons.  Each file gives me the file name I would need to include in the code I would need to include in my custom CSS.  I can see how having a well designed semantic markup would help with site maintenance because it gives a good picture of the overall structure/outline of the site.  Having a clear picture of the site structure would allow me to find things needing editing very quickly.

In my own site I want to keep things simple; having a few tabs at the top of the homepage that will take users to their destination.  I might also want a side tab to allow users to get back from where they came from (similar to the way the w3schools page is set up).  The names of my tabs should be very concise, with a clear hierarchy:

Units of study
          - Life cycles
          - Food chains
          - Apples

I don't plan on having lots and lots of subcategories (ex. Units --> Science --> September --> Life cycles) , making it easier for parents (and me) to find exactly what they need.

Under settings I discovered that I can include a site description and keywords that will help search engine find my webpage.  The main thing I want parents to be able to do is to search "Mrs. Dargle's Class" and find the page quickly.  Currently my old class webpage from Wordpress comes up in that search and my Facebook page for Mrs. Dargle's class comes up.  I plan on including a link on the Facebook page to the website so that should help parents find me as well.  Other than parents from my class, I'm not all that concerned with other people finding the page.

CSS Activity

For the CSS activity I changed the color of my first header (where the title of the blog is listed).  I also changed the background color and font for that header as well.  I tried to changed other headers but didn't have any luck.  I looked back through all of the tutorials and articles that we were supposed to read and couldn't find anything to help.  As a teacher who is going to create a webpage for parents of her students to use, with limited time to dedicate to the webpage once it's up and running, it doesn't make much sense to me customize my site beyond the templates provided to me.  I know this is in direct opposition to the purpose of this course, but I have to be honest about making my grad-school education work for me in my classroom.  Of course, in order to meet the requirements of the final project's rubric I will do my best to customize the CSS of my website.

Accessibility of My Website

The biggest accessibility issue I will have with my website is one of language barriers.  I have several families who speak foreign languages and my website will be written in English.  I don't want to discriminate against these families because they speak a language different than myself.  I have researched about how I could solve this accessibility issue and found that Google translator can make my website viewable in many different languages.  The only issue with this is that I know the regular Google translator sometimes doesn't translate quite right and I know this is a potential problem for my website.  I will probably get my site translated and have an interpreter look it over to check for any major errors.  As far as families with members who are disabled I don't have any that would need text readers or other assistive technology.  I do want to make sure that my site is understandable and robust though.  I want to make things as clear and intuitive as possible so even novice internet users can get around with ease. I also want to use large enough print that the website is easily viewable to people who may have poor vision.  I also want to make sure that my website doesn't use any Flash videos as I know that many of my families will be accessing the site from iPhones that can't use Flash.  After I get the site up I will send it out to parents to "test drive" and will get feedback about what worked and what didn't, what was confusing and what could be better.  Hopefully this will help to make my website as accessible as possible to my target audience, the families of my students.

School Website Accessibility

My school's website is fairly accessible.  The Wave site only found three errors and they were all the same type of error; a "form label" was missing.  It seems like a text reader would easily be able to read through the site and the only video on the site doesn't have audio so it would still be accessible for the visually impaired.  The site is very clear and straight forward making it easy for a novice internet user to navigate.  I can also access the site from my smart phone and the site is accessible from older computers (like the ones we have at school) as well, making it robust.  I'm waiting for our site administrator to get back to me about any accessibility guidelines she has to use when putting the site together.

Correcting HTML to Improve Accessibility

One issue with the HTML of the website is the lack of a header in the table.  I would add a header to make it more accessible and I would put the W3C categories in a list rather than staggered.

ORIGINAL CODE

<tr>

<tr>
<td>Perceivable </td>
<td></td>
<td>Understandable </td>
<td></td>

</tr>
<tr>
<td></td>
<td>Operable </td>
<td></td>
<td>Robust</td>

</tr>
</table>

CORRECTED CODE

<table border="1">
<tr>
<th>W3C Guideline Categories</th>
</tr>
<tr>
<td>Perceivable</td>
</tr>
<tr>
<td>Understandable</td>
</tr>
<tr>
<td>Operable</td>
</tr>
<tr>
<td> Robust</td>
</table>

There are also several text images that would be hard for a text reader to read.  We can add regular, readable text to the image tags in the code.

EDU 558: Website Accessibility
<p align="center"><img SRC="images/title.gif" WIDTH="622" HEIGHT="51" /></p><p align="center">EDU 558: Website Accessibility</p>


MISSION POSSIBLE
<p align="center"><img alt="" src="images/Image2.gif" width="366" height="87" /></p><p align="center">Mission Possible</p>


WARNING
<img alt="" src="images/warning_1.gif" width="300" height="186" />&nbsp; </p><p>Warning</p>

Web Accessibility Mission

When looking at the website I found the following accessibility issues:

Perceivable -- People with certain disabilities would have trouble hearing the music playing in the background, seeing the video, hearing the video, and the print throughout the whole website is hard to read because it is small and the print color and background color are so similar.

Operable -- People using text readers (if they were visually impaired) wouldn't be able to use the links very easily because the links don't give any information about what they are except for the address.

Understandable -- The website is fairly straight forward and clear, however there are a lot of flashing and scrolling items that are sort of distracting and make the site confusing for a novice internet user.

Robust -- After trying to access the website from my phone I quickly learned that at the very least smartphones do not have access to this website.

After using the "Wave" website to check for accessibility errors I found that the marquee is problem because assistive technology like a text reader wouldn't be able to read the scrolling text.  The table right above the "Mission Possible" image has no header, making the information in the table confusing when read via text reader.  And there are several images of text used as titles/headers throughout the page.  With no alternate text with these images a text reader would be unable to read these.

I tried to use the Cynthia site to check for accessibility errors but received a "failed automated verification" message several times when I tried.  I don't know if I was doing something wrong or if the website was having technical difficulties.

Which Web Site To Use?

I have had a few websites/blogs in the past few years.  I have used iSchool, blogger, and Wordpress.  My blogs/websites have been both personal and work-related.  I did not like my experience with iSchool at all.  I did not find it to be user friendly and putting content on my site was difficult and time consuming.  The site I have the most experience with is Wordpress, making it one of my frontrunners for my class website.  Up until I began this course I hadn't heard of or used Weebly, but after creating my "About Me" website using it I have found it to be very intuitive.  While I have the most experience with Wordpress I have to say that sizing photographs and including audio and video in posts can be a pain.  My rough wireframe includes navigation tabs at the top of each page, which is something is Weebly makes easy.  I also like that Weebly is specifically made for creating webpages while Wordpress is geared toward blogging.  For what I want to do on my class' webpage Weebly seems like the right fit.  Of course, once I get going on the actual creation of the page we will see if I'm still excited to use this webpage creation site.  But for right now I plan on using Weebly for Mrs. Dargle's Class webpage (don't click on the link just yet...the site has not been published!)

Basic Website Design Thoughts

1. I want to organize my website into categories.  My catagories will be constant tabs at the top of the website that users can access at any time (so if ever they are lost they can always hit the "Home" button).  I think this is the most clear way to lay out my website for easy use.

2. When thinking about what site paradigm best fits for a class/help webpage I think a service paradigm is best.  The service offered is teaching, the content is what is being taught in the classroom, and the "products" are the tools that I will include on the site for parents to use when helping their kiddos with homework and review.

3. I want to use a hierarchical structure in my website rather than sequential.  In my head I see my major topics at the top in my wire frame and then some of those major topics will have sub-topics within them.  For example, one of my main topics is "units of study"; under this main topic I envision links to pages for each unit of study we will cover throughout the year.

4. To envision my site organization I know that literally drawing the site on paper will work best for me.  Envisioning the organization of the site will be a large task, I know that trying to do that AND using a computer program to map it out will hinder my ability to put 100% into my organization.  I think of it like I do my students.  At the beginning of the year in my kindergarten class I don't ask students to write their answers for their science tests.  If I'm only testing their knowledge of science, I don't want them worried about answering science questions correctly AND writing them correctly. 

5. To do my wireframe I used the sketchpad app on my iPad and saved the picture to upload into this journal.  Because it's tricky to write words in any sort of paint program (and this app doesn't allow typing) it looks like a first grader got a hold of this project.  My apologies for the messiness.

The tabs at the top are my major topics.  After clicking a tab a page will come either with content or with links to click to go to sub-topics (like in the units page).  I chose to put my connect buttons on the left because of the way people follow the "F" eye-line when perusing text-heavy sites (particularly home pages).

My next step in my website creation process will be to choose a host site that will encompass most of what I want to include in my website.

Thoughts on the Fayette County Schools Website

After reading through the "tips" portion of the Digital Directions article about school district website design I went to the Fayette County Public Schools website to see how their site measured up.  I was happy to find that, for the most part, the site administrators have done a good job creating an easy-to-use website.  Their website is organized in a way that speaks to how parents and teachers would want to navigate rather than organized by district hierarchy.   I especially liked the section to the left entitled "How Do I..."  This is a great feature for parents trying to get a quick answer to a frequently asked question. There are no garish colors used, and where there is color it is in muted tones that are not too distracting.  The news stories that are published and linked to in the middle of the page are up-to-date and changed almost daily.  The tabs at the top of the page make it easy for teachers and parents alike to find what they need quickly.

The only thing that this website fell short on are the links to the schools in the district.  Each school's website is designed by and maintained by a staff member at the given school.  It seems that there has been little direction given to these web masters as to the design of their page, making it seem like the FCPS brand has no continuity in individual schools.  Looking at several school websites one would not necessarily know that they are all part of the same district.  This is one area where FCPS might re-imagine their website-offshoots. 

Webpage Development Project Outline

• What is the mission of your school /classroom/ organization? Our mission is to create a safe environment in which students can learn.  We do this by holding students accountable to high academic and behavioral expectations, teaching the value of diversity, and through an authentic curriculum full of hands-on and cross-curricular activities.  We are sure to use student and family backgrounds when considering the educational needs of each of our students and promote a high rate of cooperation between home and school.  We want to teach students how to think about issues rather than regurgitate information to help them be successful members of society in the 21st century.

• How will creating a Web site support your mission?  One of the biggest parts of our mission is creating great school-home communication and a blog & website is one of the best ways to do this.  We already have a very active Facebook page, but a place to put a weekly newsletter, monthly unit information, and year-round parent/student help will enhance our communication. 

• What are your two or three most important goals for the site?  
• 1. To increase school-home communication so parents are "in the know" with what we are doing at school AND so that parents feel they have another option for communication other than a note or phone call.
• 2. To give parents a tool to help their child at home with whatever we are doing at school.

• Who is the primary audience for the Web site?  The primary audience will be the parents and families of my current students.

• What do you want the audience to think or do after having visited your site?  I would like them to think that my primary concern is the education of their child.  I would like parents to take the information on the site and use it to spark conversations with their child, help their child understand our current topics of study, and to help parents know what is coming up so they can plan ahead and feel "on top" of things.

• What Web-related strategies will you use to achieve those goals?  
• I want to use an easy to use interface that can be easily navigated on a mobile device.
• I want to use Facebook as a jumping off point to introduce parents to the new website/blog (since so many are already using Facebook to communicate with the classroom already).
• I want to use web traffic to identify which topics/pages generate the largest response from parents and use that to shape future posts/pages.
• I want to focus on content being informative and easy to read (avoiding teacher-speak).

• How will you measure the success of your site?  I will look at page traffic as well as comments and how informed parents are during parent teacher conferences.  I know parents will have been looking at the website and using it if they are familiar with the topics I touch on during conferences.

• How will you adequately maintain the finished site?  I will update the information on the site weekly (adding new topics of study and helpful tips for homework).  I plan on including our weekly newsletter on the site so this should be a easy goal to reach.  I will also check on site traffic at this time.  I want to hook my email up to send any comments the site my receive so I can answer them in a timely manner.

• What type of web site are you considering?  I plan on creating a static webpage.  I want to update the information manually and on my own time table.

• How many “pages” (entries) will the site contain? What is the maximum acceptable count under this budget (note: your ‘budget’ should include the time that you will spend building your site)? Three.
• 1. A general information page.  This page will include my classroom handbook that is handed out at the beginning of the year as well as important dates to remember.  This page will be updated yearly.
• 2. An academic information page.  This page will include information about reading groups, reading assessment, Fry words, reading homework, and information about our math program.  This page will be updated yearly.
• 3. A weekly information page.  This page will house our weekly newsletter, frequently asked questions about that week's homework packet, and links to websites and videos that will be helpful for that week's topics of study.

• What special technical or functional requirements are needed?  I will need a website that can include audio and video files that we might create in class (for podcasts, etc.).  I had a classroom blog last year and had to pay extra to include personal audio files, so I want to be sure that my new website has this capability as well.

• Where will you host your site? For example, is there school or district webspace or will you use a commercial site?  I have used our district's iSchool webspace before but found it very hard to edit and navigate through.  In addition, parents needed a password to log on, decreasing the number of parents who took the time to use the site.  I will be using a commercial site this time.  I really liked the ease of using Weebly to create our personal webpage so I may just use Weebly to create this site.  I may also use Wordpress because I am very familiar with their system through other blogs I have made with them.

• Will your site be open ‘to the world’ or only to a select audience (i.e., your class, your school)?  My site will be open to the world.  I do not plan on posting any pictures of students on this site so I feel comfortable making it available to anyone who can find it.  I have tried to have password protected pages in the past and, in my experience, it deters parents from using the site.

• How will you develop your content inventory? Where will you store it before you put it on the webpage?  I have several items for the webpage already created and stored in Word.  I should be able to copy and paste that information when I am ready to add it to the webpage with only slight adjustments being made to the format once it is transferred.  Some of my other content is stored in playlists on my YouTube channel.

• What type of web access does your audience have (i.e., do they have broadband (cable modems, dsl, etc.) or dial-up? Do they have home access or only school-based access?  The majority of my parents have a computer with internet at home, however those that do not have mobil devices where they can access the webpage.
• 
  
• How do you know ? Tell me, in detail, how you know. In order to find out, you may want to conduct a survey of your users.  I had my parents fill out information about their internet access as part of my beginning of the year packet.  Because I communicate a lot through Facebook I wanted to know if parents would be able to access our page.  We also have internet-based homework some days of the week and I wanted to know which families would be able to complete the homework and which families would need their child to use a school computer during school hours.

• What is the budget for the site (note: your ‘budget’ should include the time that you will spend building your site (figure out, approximately, how much you would want to get paid if you were doing this for money, any software that you needed to purchase, etc.)?  Time-wise, the amount of time I could spend setting up this site is probably around 3 hours (if I were just doing it, unprompted, for my classroom) -- because it is part of a graduate class I may end up spending considerably more time than that.  I shouldn't need to spend any extra money on software.  The only place I might need to spend money would be if the website host didn't allow me to include lengthy audio or video files, in which case I might have to spend 40-60 dollars for an upgrade.  If a colleague asked me to create a website for their class I would give them a price of roughly $200.  I would put in a 10 hour day working for $20 and hour.  If it took less than 10 hours to create the site I would prorate my fee.  They would then be in charge of any maintenance and updating for their site.

• What is the production schedule for the site, including intermediate milestones and dates?
• Timeline: 8 weeks until launch
• General outline of project goals: September 11th
• Have website URL set up: September 25th
• Have general class information page content ready: October 2nd
• Halfway Point: October 9th 
• Have academic information page content ready: October 12th
• Have first weekly page update ready: October 23rd
• Complete final touches to website and notify parents about website: Week of October 30th
• Launch date: November 6th