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