After receiving feedback from WA1, I decided to make the following changes: 1. For WA2, I chose a different CSS template that had a simpler layout. After looking at my classmates' websites, I felt my website was a little busy and overwhelming with all of the links and pictures on the main page. My updated website is now easier to follow. 2. In WA1, I used a CSS template for only my index.html page, but not for burdette1.html or burdette2.html. I needed to keep the layout consistent on each page, so I figured out how to place the template on all of my pages. Now that all of my pages are have the same layout, I think it is easier for users to navigate. 3. I wasn't quite sure what "meaningful window titles" were throughout WA1. I originally thought they were the actual titles on each page. After figuring it out, I added the window titles to each of my pages for the convenience of users. 4. In WA1, I did not include the sources for my images since they were copyright free. However, I asked Dr. Smyth and learned that you still need to include your sources for copyright free images. In WA2, I used a small font to include the source under my images with a link to the source. Some photos were my original photos, so I did not include a source for those. 5. I created a slideshow in iMovie for burdette2.html in WA1. I uploaded it to YouTube so I could embed it in my website. In WA1, my video could not be viewed by others because the video was set on "Private". So, I changed the video to "Public" for WA2, so everyone can see it now! 6. In WA1, my "Contact" (e-mail) link was only included in the navigation bar at the bottom of each page in a small font. I felt that it was hard to locate, so for WA2, I increased the font size of the "Contact" link. I also placed this link in the navigation bar at the top and the bottom of each page.
Description of creating my website:
To create my website, I used Kompozer. I watched and read many online tutorials before starting. I created a folder on my desktop for all of my copyright free images, media, and HTML documents. Then, I found a CSS template that I liked and opened it in Kompozer. I named my first page index.html. I edited the CSS template by inserting my own headings, text, images, media, and links. The template really helped me as a first time user of Kompozer! I added two other pages, naming them burdette1.html and burdette2.html. I didn’t use a CSS template for these pages, but I did use the same heading. I used Wordle (image creator using words), Fotoflexer (image editor), and Kizoa (slideshow creator) to help with my website’s design during this process. Once all the pages were created, I linked them together. Last, I published by website.
Design Choices: These design choices were made from the Web Style Guide. I have provided the quotations I took from the guide and how I interpreted/used the advice to incorporate them into my website! 1. “Landmarks: Use consistent landmarks in site navigation and graphics to keep the user oriented.”
-I used the same heading on each page as a landmark to keep the user familiar with the website. I also used the same background and text colors throughout the website to keep consistent. 2. “Graphic tone: Establish the look and feel of the site, ideally with a system dominated by consistent visual elements, but with enough flexibility to create distinct regions.”
-When creating the home page, I established the “look & feel” of the site. I used different visuals on each page to make them distinctly different, but tried to stay consistent with the tones/colors of the pages. 3. “Sequence is an important aspect of document order.”
-I wanted the top of my website to catch the eyes of users, which is why I chose a cute picture and a heading that I tried to match. I also used Wordle to create an attractive grouping of words describing Chihuahuas that had a matching frame with the picture. I wanted these visuals to come first in the sequence of the home page and then have the information follow. 4. “Research shows that reading slows as line lengths begin to exceed the ideal width.”
-I tried to keep the width of my text narrow. That’s why I like the layout of my CSS template. The bottom is split into three sections, which requires narrow text width. I didn’t want to provide an overwhelming amount of information in one place, so I provided lots of links on different Chihuahua topics for my users. 5. “Boldface text gives emphasis because it contrasts in weight from the body text.”
-For headings and subheadings, I used bolder and bigger text to make sure the user knows that the information is on a different topic about Chihuahuas. This also allows the user to scan the page for some particular they are searching for. Competency Worksheet (completed skills)-Level One:Create a site (Kompozer)Create a new pageEnter and format textInsert an imageCreate a hyperlinkCreate an email linkSet the titleCreate an ordered or unordered listPreview a page in a browserLevel Two: Insert/embed media Insert anchors where appropriateModify page propertiesLevel Three:Create or modify CSSUpload to a domain Domain & Link to Website:www.mandyburdette.com
Web Activity Two
After receiving feedback from WA1, I decided to make the following changes:
1. For WA2, I chose a different CSS template that had a simpler layout. After looking at my classmates' websites, I felt my website was a little busy and overwhelming with all of the links and pictures on the main page. My updated website is now easier to follow.
2. In WA1, I used a CSS template for only my index.html page, but not for burdette1.html or burdette2.html. I needed to keep the layout consistent on each page, so I figured out how to place the template on all of my pages. Now that all of my pages are have the same layout, I think it is easier for users to navigate.
3. I wasn't quite sure what "meaningful window titles" were throughout WA1. I originally thought they were the actual titles on each page. After figuring it out, I added the window titles to each of my pages for the convenience of users.
4. In WA1, I did not include the sources for my images since they were copyright free. However, I asked Dr. Smyth and learned that you still need to include your sources for copyright free images. In WA2, I used a small font to include the source under my images with a link to the source. Some photos were my original photos, so I did not include a source for those.
5. I created a slideshow in iMovie for burdette2.html in WA1. I uploaded it to YouTube so I could embed it in my website. In WA1, my video could not be viewed by others because the video was set on "Private". So, I changed the video to "Public" for WA2, so everyone can see it now! 6. In WA1, my "Contact" (e-mail) link was only included in the navigation bar at the bottom of each page in a small font. I felt that it was hard to locate, so for WA2, I increased the font size of the "Contact" link. I also placed this link in the navigation bar at the top and the bottom of each page.
My Website: www.mandyburdette.com
Web Activity One
Description of creating my website:
To create my website, I used Kompozer. I watched and read many online tutorials before starting. I created a folder on my desktop for all of my copyright free images, media, and HTML documents. Then, I found a CSS template that I liked and opened it in Kompozer. I named my first page index.html. I edited the CSS template by inserting my own headings, text, images, media, and links. The template really helped me as a first time user of Kompozer! I added two other pages, naming them burdette1.html and burdette2.html. I didn’t use a CSS template for these pages, but I did use the same heading. I used Wordle (image creator using words), Fotoflexer (image editor), and Kizoa (slideshow creator) to help with my website’s design during this process. Once all the pages were created, I linked them together. Last, I published by website.
Design Choices:
These design choices were made from the Web Style Guide. I have provided the quotations I took from the guide and how I interpreted/used the advice to incorporate them into my website!
1. “Landmarks: Use consistent landmarks in site navigation and graphics to keep the user oriented.”
-I used the same heading on each page as a landmark to keep the user familiar with the website. I also used the same background and text colors throughout the website to keep consistent.
2. “Graphic tone: Establish the look and feel of the site, ideally with a system dominated by consistent visual elements, but with enough flexibility to create distinct regions.”
-When creating the home page, I established the “look & feel” of the site. I used different visuals on each page to make them distinctly different, but tried to stay consistent with the tones/colors of the pages.
3. “Sequence is an important aspect of document order.”
-I wanted the top of my website to catch the eyes of users, which is why I chose a cute picture and a heading that I tried to match. I also used Wordle to create an attractive grouping of words describing Chihuahuas that had a matching frame with the picture. I wanted these visuals to come first in the sequence of the home page and then have the information follow.
4. “Research shows that reading slows as line lengths begin to exceed the ideal width.”
-I tried to keep the width of my text narrow. That’s why I like the layout of my CSS template. The bottom is split into three sections, which requires narrow text width. I didn’t want to provide an overwhelming amount of information in one place, so I provided lots of links on different Chihuahua topics for my users.
5. “Boldface text gives emphasis because it contrasts in weight from the body text.”
-For headings and subheadings, I used bolder and bigger text to make sure the user knows that the information is on a different topic about Chihuahuas. This also allows the user to scan the page for some particular they are searching for.
Competency Worksheet (completed skills)- Level One:Create a site (Kompozer)Create a new pageEnter and format textInsert an imageCreate a hyperlinkCreate an email linkSet the titleCreate an ordered or unordered listPreview a page in a browser Level Two: Insert/embed media Insert anchors where appropriateModify page properties Level Three:Create or modify CSSUpload to a domain
Domain & Link to Website: www.mandyburdette.com