Tuesday, September 6, 2011
Monday, December 6, 2010
Final Project - Cassy
http://sws.pcc.edu/student/CAS206_pdeangel_43992/cassandracicero82/FileManagement/Final/index.html
a) My target audience is my friends and family, so I tried to keep that in mind for how I displayed the content and the colors.
b) In trouble shooting the problems I seemed to have was that the achecker didn't like my page titles. All my links work, and display correctly. I tried to use the cynthiasays website also, but it seems to still have issues uploading.
c) I used images to help provide a visual for what I'm talking about, and help add life to it. I used a set of images as links to other websites. I used the box model to help with the siteness of the site.
d) I used the heirarchy tags and tables. The tables help breakup the text, and the heirarchy allows them to search it more efficiently.
e) I used an interview, so that tied into my pages content. It's from youtube so all my users should be able to view it.
f) Everything validated, except for the YouTube video. The only issues I had, was the nested list.
g) I had to try to create a heirarchy. I used the meta tags for a description of the site, and keywords.
h) The 3 browsers I used in the BrowserLab, were IE 7.0, FireFox 3.0 Windows, and Chrome. The IE margins seem non-existant and the text bolder, while FireFox and Chrome were very similar. I like the BrowserLab, except it gives me a headache, so I might still use it.
i) The achecker didn't like the titles of my pages. cynthiasays didn't work, so I viewed all my images, tables and media, for my alt tags.
a) My target audience is my friends and family, so I tried to keep that in mind for how I displayed the content and the colors.
b) In trouble shooting the problems I seemed to have was that the achecker didn't like my page titles. All my links work, and display correctly. I tried to use the cynthiasays website also, but it seems to still have issues uploading.
c) I used images to help provide a visual for what I'm talking about, and help add life to it. I used a set of images as links to other websites. I used the box model to help with the siteness of the site.
d) I used the heirarchy tags and tables. The tables help breakup the text, and the heirarchy allows them to search it more efficiently.
e) I used an interview, so that tied into my pages content. It's from youtube so all my users should be able to view it.
f) Everything validated, except for the YouTube video. The only issues I had, was the nested list.
g) I had to try to create a heirarchy. I used the meta tags for a description of the site, and keywords.
h) The 3 browsers I used in the BrowserLab, were IE 7.0, FireFox 3.0 Windows, and Chrome. The IE margins seem non-existant and the text bolder, while FireFox and Chrome were very similar. I like the BrowserLab, except it gives me a headache, so I might still use it.
i) The achecker didn't like the titles of my pages. cynthiasays didn't work, so I viewed all my images, tables and media, for my alt tags.
Final - Finally.... by Leslie Elliott
Link to Website
a. Who is your target audience? What design choices did you choose to attract your audience to your site?
The target audience is my sister-in-law’s 7th grade math students and their parents. She teaches in a small school in Alabama. I chose this design to make it easy to read and used a color scheme that relates to the school colors.
b. What troubleshooting did you experience?
I had a few difficulties involved with putting the website together. One involved with the vertical navigation bar. I like having it on the side and all one size. It wasn’t until class last Wednesday that I got my question answered and everything fell into place. Up to then, there was a lot of frustration on that issue. I also had issues with getting the links all to appear as they needed to on each page. Trying to coordinate the link classes took a lot of trial and error.
c. How did the images you use contribute to your website’s purpose? Did your CSS style add to the “siteness” of your website?
The images used on the website all pertain to what you would see in a classroom or will see at the school such as the school logo and mascot, which I incorporated into the header/banner. The chalkboard with apple gives a well-balanced color scheme. By importing my banner graphic to kuler, I was able to find my font, background, and border colors. I wanted to add more graphics since I figured 13-14yr olds would be more interested to the content but I was at a loss so I added some comics to try to lighten things up.
d. What style choices did you make to improve the readability of your table?
The table on the math links page took some time trying to format. I wanted to provide both the name of the document and/or link along with description so there was a lot of content to deal with. Breaking it into groups with headers broke up the page somewhat.
e. How did the media you created contribute to the purpose of your website? What plug-ins does the end user need to display-play?
I incorporated a YouTube video that references the assignment the students are working on to help with homework and testing. The user will need to use a flash plug-in to run the YouTube video.
f. Describe your validating experience.
Validating was fairly simple since I consistently checked throughout the process. Most of the content is straightforward. I had a few typing errors which were easy enough to fix. My biggest problem was using a blockquote element on the lower half of the class rules page. For some odd reason, the page would not validate. After taking a few (several) hours trying everything I could think of to figure out what I was doing wrong, I finally gave up and reformatted as a definition list. Page validated… time to move on. All pages validated with the exception of math links page because of the embed/object tags.
g. How did integrating SEO best practice change or improve your website.
Because my audience is on a small/limited scale, for SEO practices, I focused mainly on referencing the content with homework links and school supporting documents for findability.
h. Discuss your BrowserLab experience. Will you continue using the browser labs?
When testing the pages on BrowserLab, I found only a small (perhaps 5px) difference comparing Chrome, IE 8.0, and Firefox 3.6 while using the “onion skin” view. Both IE and Chrome appeared to have a fuzzy effect although when testing the pages on my own browsers, only the colors appeared darker on IE and Chrome, nothing else. I will probably use BrowserLab just as another means verifying the testing process if I am on a computer with just one browser.
i. Discuss all testing requirements?
Testing:
1. Validate all code.
All pages validated with the exception of Math Links page because of the YouTube video.
2. Test functionality of all links
All links function, including pdf documents.
3. Run an accessibility test using one of the following resources
I used achecker.ca/checker/index.php for testing. The report returned with 2 known problems which were regarding missing ISO 639 codes (?). I checked with W3schools and found the codes the text reported. Reran the test and returned with no known problems, yay. I also had a couple of issues with the Wishlist & Funnies page which included a caption line that the checker said wasn’t needed so I changed it to a header 1 and because of the layout it didn’t need a summary line (?) which my guess is because of the alt tags already in place. I deleted the summary line and the page returned with no problems.
4. Useability overview – describe how you designed your site to enhance the user experience.
I tried to design the website to be extremely user friendly for both, kids and parents by limiting links to the content of the site. I have had my own experience with school websites trying to find information that the teacher has provided but is difficult to find with so many links to get to it. I tried to keep it very simple for the purpose of the site – to provide course assignments and help to students.
5. Test in Adobe Browser Lab (see answer from above)
a. List the three browsers you used
Firefox 3.6, IE 8.0, Chrome 7.0
b. What differences did you observe.
IE and Chrome appeared fuzzy and using the onion skin option showed that they both were a little off (like 5px) from Firefox.
c. What changes did you make to your web page after testing browser in browser labs? I found that there were no immediate issues to warrant changing the format of any of the pages of my website.
SEO: Discuss your strategy to promote your website. This could include: keywords, metatag, links, content and hierarchy.
As mentioned in section “g”, the website is for a small audience, so I concentrated more towards findability. My strategy was to use as many keywords as possible in the metatag that related to the website and with a clear informative description. I also considered descriptive titles and heading tags and tried to incorporate keywords… although, you can only use the word math so many times.
Final Project - Christina Mort
Website link:
http://sws.pcc.edu/student/CAS206_pdeangel_43992/christinamort21/Final/index.html
a. Who is your target audience? What design choices did choose to attract your audience to your site?
I decided to keep my audience fairly broad. It’s targeted at just about anyone interested in Japan and its culture, ages 15+. I tried not to clutter it with too many distracting images, but just enough that it might keep the attention of younger people as well as older.
b. What troubleshooting did you experience?
My trouble shooting usually revolved around links. I constantly had trouble trying to get the links to look the way I wanted in different browsers. For example, firefox would show the links correctly, but wouldn’t change when clicked like it was meant to. When in Internet explorer, after clicking the links, the background and border would all vanish. I’m afraid I didn’t have the time to try and put in a background or other such things, so the links still aren’t quite right. Besides link issues, I also had problems with images. It can get confusing as the images build up, especially since when you’re trying to use one, the size of that image and the file type make a big difference.
c. How did the images you use contribute to your website’s purpose? Did your CSS style add to the “siteness” of your website?
I believe the images really help to make the site less boring. Each image was used depending on the information in each section. For example, information on Feudal Japan was decorated with pictures of a shrine, and kanji, both relating to things that made a big impact in that time frame.
d. What style choices did you make to improve the readability of your table?
Because the information in my table could easily become confusing (seeing as it’s about a different language), I made sure to make the borders thick, so it was easy to tell which section each part went to.
e. How did the media you created contribute to the purpose of your website? What plug-ins does the end user need to display-play?
I used only one video, and that video went into the language section. It was just a little video about the basic greetings in Japanese that I felt were important to know.
f. Describe your validating experience.
I rarely had any troubles validating, except when I got to the nested unordered list. I could not figure out why on earth the list wasn’t validating! After a while of being frustrated, and finally turning to the W3C site, I figured it out. Besides that, the only thing that still refuses to validate is the media, which was to be expected. xD
g. How did integrating SEO best practice change or improve your website.
Using the keywords and description helped make my site easier to find for the browser.
h. Discuss your browser lab experience. Will you continue using the browser labs?
I was a little frustrated by the browser lab, since it viewed the browsers differently than if I actually had the real browser open. I’ll probably continue using it in the future, but it won’t be the only thing I use.
Strategy to promote site
I relied heavily on the site keywords and description to help promote my site. The few sites I did include inside my site probably weren’t that popular, but I found them very useful/educational.
Testing
b. Both CSS and HTML all validated, except for the page with a youtube video on it.
c. All links went where they were suppose to, although they didn’t all view correctly.
d. According to the achecker site, there was a problem with most of my navigation links. It also mentioned something about my document language not being specified.
e. I suppose the user experience and usability go hand in hand…I kept the site very consistent, the links and banner were always meant to be the same. Even though the page layouts may have differed slightly, the text and font was almost always very similar.
i. I tried to enhance the user experience by making it very easy to navigate the site, and know which part of the site you are currently on. The links are always large and at the top of the page, while at the beginning of each section is a title, telling you exactly what it’s about. I also attempted to not overload pages with too much information, but I found that increasingly difficult when I reached the history section.
Adobe Browser lab
Broswers used: Chrome 7.0, Firefox 3.6, and Internet Explorer 8.0.
Chrome viewed everything correctly, the links were all in the correct place. However, Firefox made the navigation links appear larger, and pushed one of them onto a second line instead of keeping them all straight. Internet explorer was the worst of all three. The first link was different from the rest, and also pushed the last link onto a different line.
I made no changes after looking at the three on browser lab. They were issues I had been dealing with during the whole project. And I was a little confused, since browser lab seemed to display the navigation links differently (correctly) if you used the actual browser, compared to browser lab.
The project is done. Now I need some serious sleep.
Aaron's CAS 206 Final Project
Click here for my new page!
Who is your target audience? What design choices did you choose to attract your audience to your site?
The original purpose of the site was to inform new and veteran runners who are considering participation in the 26.2-mile marathon event. I probably bit off more than I could chew with this project. I wanted to include lots of links to established on-line marathon information sources/authorities and include my personal lessons learned. I tried to mix text content with graphical content. I'm not sure if the arrangement worked out so good. I wanted to use more bullets and ordered lists, but I was having placement/positioning problems. The text of the site has more prose than I originally wanted to use. I used a layout table to organize my navigation links. I hope I don't have to spend too much time in purgatory for that one.
What troubleshooting did you experience?
Positioning was the biggest problem and I probably wasted a lot of time trying to figure that out. Then I made the mistake of fooling around with link state styles. I made a big mess and then I wasted time trying to figure out how to get back to something that worked.
How did the images you use contribute to your website's purpose? Did your CSS style add to the "siteness" of your website?
Yes, I think I had some success achieving "siteness" by using a consistent placement of graphics and text layout as well as usage of colors. CSS was critical to achieving the consistent look and feel that "siteness" requires.
What style choices did you make to improve the readability of your table?
Color scheme was pretty important to achieve sufficient contrast. I also used padding and text alignment attributes.
How did the media you created contribute to the purpose of your website? What plug-ins does the end user need to display-play?
I wanted to include graphics which were inspiring and that illustrated the topics I presented. Visitors of the site will need to use the flash-shockwave plug-in.
Describe your validating experience?
This was pretty straightforward. Using an incremental approach allowed me to catch most errors early in the development process. I really didn't have any problems with validation. Use of the embed and noembed tags caused some unresolvable errors.
How did integrating SEO best practice change or improve your website?
I was going to include a site map, but I underestimated the amount of time it would take to produce one. Use of keywords in headings, titles, and text will help with SEO, I think. I created a glossary of terms which included keywords. Here's something interesting about SEO... I wanted to include links to on-line authoritative sources to improve SEO. As it turns out, sources of quality information are not necessarily the most popular.
Discuss your browser lab experience. Will you continue using the browser labs?
Using the Adobe browser lab provided a way to test web site content in multiple browsers without having to install and execute them locally. This would be good if I did not have (or want) to install multiple browsers (and their various versions) on my PC. The drawback is that it takes awhile to load each page, and I cannot interact with the page once it is loaded. In the future, I intend to do some client side scripting and use other effects. In this case, the browser lab is probably not ideal.
Discuss your SEO strategy to promote your website?
- Used Google Adwords to check for additional keywords
- Used the meta tag with keyword and description attributes
- I tried to link to authoritative internet sources. I checked their popularity, but I was more interested in quality (correct) content.
- I created a glossary of terms. I intended to create a site map, but ran out of time.
- I tried to include keywords in the title, headings, etc.
Discuss all testing requirements?
- Validation of XHTML and CSS was straightforward (except for video media link).
- All links (absolute and relative) are functional.
- I used http://achecker.ca/checker/index.php to conduct accessibility tests. It told me that the "Document has invalid language code" and the "Layout table has a summary." I removed the summary from my navigation link table. "Table summary duplicates the table caption." I changed the table summary. "Embed element missing noembed element." Added a noembed element with the embed element.
- Usability overview: Improvements: I could have improved the site for usability my using less prose (more balanced text) and more bulleted and ordered lists, relocated a content link to a more visible region, and made my table a bit smaller. I need to get some other feedback on the usability.
- Adobe browser lab:
- Tested using Firefox 3.0 - Windows, Firefox 2.0 - OS X, Internet Explorer 8.0, Safari 3.0 - OS X
- Differences in fonts used, table border styles, video media border style
- No changes were made
Wednesday, December 1, 2010
Final!
Check out my final website!
a) My target audience is people living in the Portland area who are in need of home improvements at affordable prices. My audience is not restricted my age, sex, or income because a family of five bringing in $100k/yr is going to have different needs than a bachelor(ette) bringing in that same income. I chose to go with black, white, charcoal, light grey, and orange as my accent. I wanted to keep things neutral to appeal to a wider demographic, and orange reminds me of construction so that is why I went with that for my pop of color.
b) This one was a lot easier than the midterm because I'd done much of the trouble-shooting already. My main concern that I had to fiddle with a bit was getting my tables to line up the way I wanted them to.
c) Without the images of Chris's work it would be hard for him to obtain business through his website. They add to his credibility. Giving the images borders/padding/etc fancied them up a bit, and I guess in that sense the CSS for my images added to the "siteness"....if I am understanding this part of the question correctly.
d) I used a light grey background color with dark text. The contract made it easy to read, but making it light grey instead of white took care of some of the white space and I believe it draws the eye to the table.
e) The media is okay. I would only have it on the site because of this assignments requirement. It is an interview from a morning show about the myths of home improvements. It does show in a power-point within the video (that fortunately is the main paused screen when you go to the page) that adding a deck to your home is one of the best ways to spend your money...however, they don't say it out loud in the interview, so that was a little disappointing. It is a YouTube video so the user would need a Flash plug-in.
f) Everything validated except for the video:)
g) SEO improved my site because I found some good keywords to use to get my site better noticed by search engines. I also added links to Lowes and Home Depot on my home page to increase my chances of being found. I used Link Popularity to check and see how well these sites would do, and I didn't find much. I did see that Martha Stewarts home page links to Lowes - but the other links listed weren't very familiar to me. However - I did not know what else to put on there that would be relevant.
h) I looked at a bunch of the browsers in the Adobe Browser Lab. Firefox 3.0 for Mac and Windows, the most recent versions of Chrome and Safari, and IE 7.0 as well as IE 8.0. The biggest differences were:
1: IE 7.0 eliminated this small strip of white space that shows up about my main header, for reasons I do not know.
and,
2: Firefox 3.0 for Windows showed everything a bit more defined than the other browsers. I preferred the look of this browser the most.
I did not make any changes to my based on my Browser Lab experience.
i) For the testing requirements I haven't already discussed - All of my links worked. Everything looked good for my load time except that I was cautioned my images took up too much space and should be shrunk down or changed from a JPG to a PNG. Also, I ran accessibility testing through www.cynthiasays.com and everything passed - except for that darn YouTube video. I believe my site is very user friendly. I placed images on the main page the links directly to the main galleries. Navigation is consistent, as well as colors and text. I even put in breadcrumbs to give the user an added way to get back to the main gallery page while on a sub-gallery page.
j) Here's one more chance to check out my final!
a) My target audience is people living in the Portland area who are in need of home improvements at affordable prices. My audience is not restricted my age, sex, or income because a family of five bringing in $100k/yr is going to have different needs than a bachelor(ette) bringing in that same income. I chose to go with black, white, charcoal, light grey, and orange as my accent. I wanted to keep things neutral to appeal to a wider demographic, and orange reminds me of construction so that is why I went with that for my pop of color.
b) This one was a lot easier than the midterm because I'd done much of the trouble-shooting already. My main concern that I had to fiddle with a bit was getting my tables to line up the way I wanted them to.
c) Without the images of Chris's work it would be hard for him to obtain business through his website. They add to his credibility. Giving the images borders/padding/etc fancied them up a bit, and I guess in that sense the CSS for my images added to the "siteness"....if I am understanding this part of the question correctly.
d) I used a light grey background color with dark text. The contract made it easy to read, but making it light grey instead of white took care of some of the white space and I believe it draws the eye to the table.
e) The media is okay. I would only have it on the site because of this assignments requirement. It is an interview from a morning show about the myths of home improvements. It does show in a power-point within the video (that fortunately is the main paused screen when you go to the page) that adding a deck to your home is one of the best ways to spend your money...however, they don't say it out loud in the interview, so that was a little disappointing. It is a YouTube video so the user would need a Flash plug-in.
f) Everything validated except for the video:)
g) SEO improved my site because I found some good keywords to use to get my site better noticed by search engines. I also added links to Lowes and Home Depot on my home page to increase my chances of being found. I used Link Popularity to check and see how well these sites would do, and I didn't find much. I did see that Martha Stewarts home page links to Lowes - but the other links listed weren't very familiar to me. However - I did not know what else to put on there that would be relevant.
h) I looked at a bunch of the browsers in the Adobe Browser Lab. Firefox 3.0 for Mac and Windows, the most recent versions of Chrome and Safari, and IE 7.0 as well as IE 8.0. The biggest differences were:
1: IE 7.0 eliminated this small strip of white space that shows up about my main header, for reasons I do not know.
and,
2: Firefox 3.0 for Windows showed everything a bit more defined than the other browsers. I preferred the look of this browser the most.
I did not make any changes to my based on my Browser Lab experience.
i) For the testing requirements I haven't already discussed - All of my links worked. Everything looked good for my load time except that I was cautioned my images took up too much space and should be shrunk down or changed from a JPG to a PNG. Also, I ran accessibility testing through www.cynthiasays.com and everything passed - except for that darn YouTube video. I believe my site is very user friendly. I placed images on the main page the links directly to the main galleries. Navigation is consistent, as well as colors and text. I even put in breadcrumbs to give the user an added way to get back to the main gallery page while on a sub-gallery page.
j) Here's one more chance to check out my final!
Thursday, November 18, 2010
Cutting time yet again (yikes!).
Aaron's CAS 206 Midterm: Part3
Click here for my new page!
How did your table display data easier for your users to view?
I used the table element to organize data pertaining to a schedule of weekly training runs. The table provides a convenient means to present related data in an visually accessible way. The table allows me to present a higher density of data (per screen real estate) with clarity and minimal ambiguity. Conveying the same information in prose would have required more text/space and been more difficult for visitors to read/comprehend.
What style choices did you make to improve the readability of your table?
I have to admit that in some cases I am choosing style over readability in order to demonstrate knowledge/skill. I was able to use background color and font-weight (text in header cells is automatically displayed in bold) to distinguish between header cells and regular table data. I liked the way ridged borders provide 3-dimensional relief/texture to the table.
How did the media you created contribute to the purpose of your website? What plugin(s) does the end user need to display/play?
I embedded video media from YouTube. This is possibly a cop-out as far as media creation is concerned. I think that inclusion of this media is representative of the kind of information visitors would want/expect/appreciate from the site. X-shockwave-flash plugin/player is required to play the media.
Subscribe to:
Posts (Atom)