Web+Activity+1+&+2

=Web Activity 2 =

Part I: Create your own website using Kompozer
Drum roll, please...Here's my new and improved site. www.carterclass.com

Changes I made:
Thank you all for the very helpful feedback. This is what I changed:
 * 1) The "stone face" image originally did not have an attribution, so I added that.
 * 2) Through a three-hour process of lots of trial and even more error, I was able to "fix" the third page of YouTube videos that lost the original formatting. In order to do this, I had to completely rebuild the third page. I went to Kompozer, opened my index page, "saved as" carterpage2 and then re-embedded the YouTube media, repaired the links, and saved. Before sending it to my domain through the FTP, I changed the page title settings from xhtml to just html. I don't really know why that works, but it did...
 * 3) I tried to go into the html code to make the size of the YouTube players the same, but was never able to do that correctly.
 * 4) Two "home" links were redundant, so I deleted the one in the upper right-hand corner.
 * 5) The heading for the navigation bar on the left orginally said "Read and View the Speech," which was redundant. I changed that to a more accurate and precise header - "Assignment Resources."
 * 6) I fixed the erroneous link on page 2 ("Read the Speech").
 * 7) I fixed the window titles - each page has a specific title all its own.
 * 8) Originally, the navigation bar "moved" when you moved from page to page because of differing font sizes and the skull picture being in slightly different locations on each page. When I rebuilt my third page, this gave me the opportunity to fix that as well. Since I "saved as" from the index page, the navigation bar doesn't appear to shift when a user clicks between the pages.
 * 9) I considered making the font larger, but because it broke the lines of the speech (I'm using a pre-made CSS template), I decided to keep it the same - I figured my students' eyes are a bit younger than ours. (It is 12-point, so I didn't feel like it really needed to be changed.)
 * 10) I polished my write-up a bit. (For example, instead of saying the "style guide," I changed that to the "Web Style Guide.")
 * 11) <span style="font-family: Arial,Helvetica,sans-serif;">I also tried to make this page a bit more user friendly (added in anchors and internal links and used font colors that helped the eyes).

Back to top

=<span style="font-family: Georgia,serif;">Web Activity 1 = =<span style="color: #ff0000; font-family: Georgia,serif;">Part II: <span style="font-family: Georgia,serif;">Description of the process and challenges and new knowledge. = ====**<span style="font-family: Georgia,serif;">Steps I Followed ** I **<span style="font-family: Georgia,serif;">Design Choices ** I **<span style="font-family: Georgia,serif;">Competency Worksheet **====

<span style="color: #ff0000; font-family: Georgia,serif;">The steps I followed to create my website were:
 * 1) I decided on my topic for the website, which took a bit of time to come up with something manageable for a novice web designer.
 * 2) I read a LOT of information and decided to use a CSS template from one of the sources listed on BB.
 * 3) I downloaded the style sheet, changed the name of the folder and modified the content using Kompozer. I created two other linked pages. This involved scripting, finding and uploading images, embedding video, and creating links.
 * 4) I researched web hosting sites that are supposed to be user-friendly and good for novice learners and ended up using www.fatcow.com
 * 5) I created my account, learned a little about publishing via Kompozer vs. an FTP, and uploaded my pages.
 * 6) Originally, this is where problems/challenges occurred. I explored and played and tried and failed for about three hours, but finally ended up taking the "x" out of everything (the links, the settings page in the publish window, etc.) I don't really understand why this worked, but it did, so I am not touching it! :)
 * 7) I did learn a really USEFUL TIP: I read in one of the tutorials about how to make embedding easier on the eyes. The author suggested placing a row of x's in the "design" view of the screen. Then, when you go to the html source page, all you have to do is look for XXXXXXXXXXXXXXXXXX and paste the embed code over those x's. What a great idea!
 * 8) Ultimately, I published to my web host through an ftp address.

Back to top

<span style="color: #ff0000; font-family: Georgia,serif;">Design Choices:

 * 1) I chose a black background with white text and red secondary text for the dark theme of the content, as well as the color and contrast components. According to the Web Style Guide, "Color and contrast are key components of universal usability. Text legibility is dependent on the reader’s ability to distinguish letterforms from the background field. Color differentiation depends mostly on brightness and saturation."
 * 2) According to the Web Style Guide, it is best to "stick to simple language and navigation applied consistently throughout your site, and everyone will benefit." Therefore, I repeated the navigation bar on the left and used the same image to provide "uniformity" among my pages.
 * 3) With the understanding that good home pages have four functions, "identity, navigation, timliness, or content focus, and tools," I tried to make my home page (and its site navigation) a place where students could easily understand the task, find the text of the assignment, and then find and view the embedded video as tools necessary to complete the assignment (Web Style Guide).
 * 4) I tried to use the "above the fold" principle to capture my students' interest and attention immediately (Web Style Guide). All but about one line of the home page appears immediately, and the text is brief and simple. I didn't want to overwhelm students with too much text or a lot of verticle scrolling.
 * 5) I tried to use the "two-click" and "scanning" principles discussed in the Web Style Guide when I designed the page. I didn't want people/students to have to click more than twice to find information. I also kept in mind that people "read" websites for clues (they scan more than they actually read). That said, I made use of headings, used clear questions, rephrasing some for reinforcement of ideas, and repeated the assignment on subsequent pages to reduce the amount of "back-clicking" to complete the work.

Back to top

<span style="color: #ff0000; font-family: Georgia,serif;">Competency Worksheet:
Level One: Level Two: Level Three:
 * Created a site, created a new page, formatted text, inserted image, created hyperlink, created email link, set the title, created a list, previewed page in browser.
 * Inserted embedded media, modified page properties
 * Modified CSS and created 3 pages using it, uploaded to a domain

Back to top