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.
Monday, December 6, 2010
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.
Midterm - Part 3, Leslie
Midterm- Part 3, Leslie
http://sws.pcc.edu/student/CAS206_pdeangel_43992/leslieelliott56/Midterm/Website-Part3/index.html
How did your table display data easier for your users to view?
I added two tables. I changed the formatting of my main vacation page from a definition list to a table. Also, I added a new page for each vacation to display pictures in a table. I find that my table on the vacation page is easier to read because my information is more detailed and organized in columns and rows. Same for the pictures... organized and sized with descriptions under the photos.
What style choices did you make to improve the readability of your table?
I gave the table borders and enough spacing to show separation of columns and rows. I stayed with the color scheme. I used captions, headers and descriptions of the photos to add to the theme of the website.
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 added a YouTube video of a favorite movie clip to add to my list of favorite things. The end-user would need to have some type of flash plug-in to display.
http://sws.pcc.edu/student/CAS206_pdeangel_43992/leslieelliott56/Midterm/Website-Part3/index.html
How did your table display data easier for your users to view?
I added two tables. I changed the formatting of my main vacation page from a definition list to a table. Also, I added a new page for each vacation to display pictures in a table. I find that my table on the vacation page is easier to read because my information is more detailed and organized in columns and rows. Same for the pictures... organized and sized with descriptions under the photos.
What style choices did you make to improve the readability of your table?
I gave the table borders and enough spacing to show separation of columns and rows. I stayed with the color scheme. I used captions, headers and descriptions of the photos to add to the theme of the website.
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 added a YouTube video of a favorite movie clip to add to my list of favorite things. The end-user would need to have some type of flash plug-in to display.
Midterm - Part 3 Cassy
http://sws.pcc.edu/student/CAS206_pdeangel_43992/cassandracicero82/FileManagement/Midterm/Website-Part3/
a. I have two tables in my website. The first I used with my pictures, it allows me to display my pictures with a description with it. It keeps the page organize and everything together. The second table describes the movies I saw during the summer; it allows me to give more information in the same amount of space as a list. Instead a block of text, it's completely organized and more likely to grab attention.
b. I separated the cells so they stand out from each other better. I used a background color, that's different than the body. I tried to use complimentary colors that will be easy to read, and stand out to catch the readers attention.
c. The media I used, is a YouTube video of a performance of a concert I saw. It gives viewers a chance to see what I saw. The plug-in is shockwave.
a. I have two tables in my website. The first I used with my pictures, it allows me to display my pictures with a description with it. It keeps the page organize and everything together. The second table describes the movies I saw during the summer; it allows me to give more information in the same amount of space as a list. Instead a block of text, it's completely organized and more likely to grab attention.
b. I separated the cells so they stand out from each other better. I used a background color, that's different than the body. I tried to use complimentary colors that will be easy to read, and stand out to catch the readers attention.
c. The media I used, is a YouTube video of a performance of a concert I saw. It gives viewers a chance to see what I saw. The plug-in is shockwave.
Midterm part 3
Hello hello! Part 3 here. =O
Link!
http://sws.pcc.edu/student/CAS206_pdeangel_43992/christinamort21/Midterm/part3/index.html
a. How did your table display data easier for your users to view?
The data I made into a table is located on the fun facts page. I added new information about how cats and dogs age, in comparison to a human. I thought a table would be the best way to view the information, since it was a lot of numbers, and it compared various things.
b. What style choices did you make to improve the readability of your table?
I made sure all of the information was spaced fairly well, so nothing would get mixed together. The numbers and words for example, I set them all in the middle so they would clearly be seen as different things. the borders around the numbers/words helped with that of course. xD
I also added a pink background to the heading words, so it was obvious that was what the numbers were all about.
c. How did the media you created contribute to the purpose of your website? What plug-ins does the end user need to display-play?
The media was a great addition to the website!...Mainly because the last page is a page specifically meant for videos. x] I chose a silly cat video, seeing as I'm going for a sort of 'funny', appeal. I used a youtube video, so in order to view it the user would need flash of some sort (Like Adobe).
Link!
http://sws.pcc.edu/student/CAS206_pdeangel_43992/christinamort21/Midterm/part3/index.html
a. How did your table display data easier for your users to view?
The data I made into a table is located on the fun facts page. I added new information about how cats and dogs age, in comparison to a human. I thought a table would be the best way to view the information, since it was a lot of numbers, and it compared various things.
b. What style choices did you make to improve the readability of your table?
I made sure all of the information was spaced fairly well, so nothing would get mixed together. The numbers and words for example, I set them all in the middle so they would clearly be seen as different things. the borders around the numbers/words helped with that of course. xD
I also added a pink background to the heading words, so it was obvious that was what the numbers were all about.
c. How did the media you created contribute to the purpose of your website? What plug-ins does the end user need to display-play?
The media was a great addition to the website!...Mainly because the last page is a page specifically meant for videos. x] I chose a silly cat video, seeing as I'm going for a sort of 'funny', appeal. I used a youtube video, so in order to view it the user would need flash of some sort (Like Adobe).
Tuesday, November 16, 2010
Midterm Part 3
Midterm Part 3
a) The table data would be easier to view for the users than if I were to put the information in a paragraph format. A list would be easy to view too, but since it was four columns it was easier to compare in a table.
b) I separated my border and added cell spacing which seemed to make it easier to read.
c) I googled a baking tips video and embedded it on my site. I do not believe that this added to the site, but did it to fulfill the requirements of the assignment. Having a how-to video does not contribute to her obtaining more business, but I couldn't figure out another type of video to put on the site that would make more sense. The video I used was from YouTube so the end users would need Flash to view it.
d) Here is one more chance to see my page!
a) The table data would be easier to view for the users than if I were to put the information in a paragraph format. A list would be easy to view too, but since it was four columns it was easier to compare in a table.
b) I separated my border and added cell spacing which seemed to make it easier to read.
c) I googled a baking tips video and embedded it on my site. I do not believe that this added to the site, but did it to fulfill the requirements of the assignment. Having a how-to video does not contribute to her obtaining more business, but I couldn't figure out another type of video to put on the site that would make more sense. The video I used was from YouTube so the end users would need Flash to view it.
d) Here is one more chance to see my page!
Saturday, November 13, 2010
William Pitts: Midterm Part2
- How did your images contribute to your website? What purpose did they serve? They help provide a theme to your website. To help make the website more visually stimulating.
What challenges did you experience in having your images show properly on your web page? The problem I had most was making use to check the size of the photo/video.
How did understanding the box model assist you in creating borders, padding and margins around your images?It help with the layout of were your going to put stuff and the kind of border,padding, or margin your going to use.
How does the placement of your hr tag assist users of your website? It helps bye boxing things in and grouping things.
How did the enhancements to your navigation improve your web site?it didn't really help much.
To test my pages' download speed I used the following tool: http://tools.pingdom.com/
test page 1:
test page 2:
test page 3:
Friday, November 12, 2010
Trying to get to bed early!
Aaron's CAS 206 Midterm: Part2
Click here for my page!
How did your images contribute to your website? What purpose did they serve?
The images serve to either represent an interpretation of some topic/idea or provide an illustration. The images say more than I could with words, and a site visitor will comprehend the intent and connotation quicker. Images also tend to provide some credibility to the accompanying narrative/prose.
What challenges did you experience in having your images show properly on your web page?
The biggest challenge involved spatial positioning. The browser often interpreted the XHTML code differently than I intended/expected. Correcting this often required lots of trial and error to arrive at a reasonable arrangement of images and text on the web page.
How did understanding the box model assist you in creating borders, padding and margins around your images?
The box model provided a basis for an intuitive understanding of border, padding, and margin style features. It also provides a basis for expectation of how the browser might interpret the code. It did not entirely eliminate experimentation and some trial-and-error, but things worked mostly as expected/advertised. These style features are good for solving positioning problems besides helping to frame graphics/images.
How does the placement of your hr tag assist users of your website?
I attempted to use the hr tag to visually separate portions of text. I think the hr tag boundaries help the user to break up the page into visually manageable sections. Graphic images do not seem to respect these section boundaries.
How did the enhancements to your navigation improve your web site?
The navigation links are certainly more visible and clickable. I might have overdone it a bit.
To test my pages' download speed I used the following tool: http://tools.pingdom.com/
Here are my test results:
Midterm Part 2 - Leslie
Link:
http://sws.pcc.edu/student/CAS206_pdeangel_43992/leslieelliott56/Midterm/Website-Part2/
How did your images contribute to your website? What purpose did they serve?
My images gave faces to the names of my family. It helps give more information/depth about the subject matter of the website.
What challenges did you experience in having your images show properly on your web page?
Oh my... well, the last two days have been an adventure. I had more difficulty with adding the background and border to the nav links. Once I figured that out, the images didn't seem so bad. It was a little time consuming with reducing/optimizing the images. I don't have photoshop and picasa wasn't really doing what I wanted so I used pixlr.com. Huge help in reducing the images to the size I wanted. From there, it was just getting the margins and the way I wanted.
How did understanding the box model assist you creating borders, padding and margins around your images?
Understanding the box model is a work in progress still, although, I have a better understanding now than before. Once I understood the difference between padding and margins and experimented with pixel sizing, I was able to get a better feel of movement of the images as well.
How does the placement of your hr tag assist user of your website?
The hr tag helps define the areas of the website. It helps define where an area starts and ends.
How did the enhancements to your navigation improve your website?
The background and border helped define them. Made them more noticeable.
http://sws.pcc.edu/student/CAS206_pdeangel_43992/leslieelliott56/Midterm/Website-Part2/
How did your images contribute to your website? What purpose did they serve?
My images gave faces to the names of my family. It helps give more information/depth about the subject matter of the website.
What challenges did you experience in having your images show properly on your web page?
Oh my... well, the last two days have been an adventure. I had more difficulty with adding the background and border to the nav links. Once I figured that out, the images didn't seem so bad. It was a little time consuming with reducing/optimizing the images. I don't have photoshop and picasa wasn't really doing what I wanted so I used pixlr.com. Huge help in reducing the images to the size I wanted. From there, it was just getting the margins and the way I wanted.
How did understanding the box model assist you creating borders, padding and margins around your images?
Understanding the box model is a work in progress still, although, I have a better understanding now than before. Once I understood the difference between padding and margins and experimented with pixel sizing, I was able to get a better feel of movement of the images as well.
How does the placement of your hr tag assist user of your website?
The hr tag helps define the areas of the website. It helps define where an area starts and ends.
How did the enhancements to your navigation improve your website?
The background and border helped define them. Made them more noticeable.
Midterm Part 2 Cassy
http://www.sws.pcc.edu/student/CAS206_pdeangel_43992/cassandracicero82/FileManagement/Midterm/Website-Part2/
-I think that the images added more life to my website, it's not dry and boring. Pictures catch a reader's eye, not text.
-I had a difficulty of adjusting my images to the right size. At first they were to large, so I had to keep adjusting the size.
-The box model helped me to understand what I needed to adjust to get the image to fit right.
-I think the hr tag helps guide the readers, I used it to group parts of my webpage.
-Improving my navagation helped the user to identify that they are a link, without shouting it at them.
-I think that the images added more life to my website, it's not dry and boring. Pictures catch a reader's eye, not text.
-I had a difficulty of adjusting my images to the right size. At first they were to large, so I had to keep adjusting the size.
-The box model helped me to understand what I needed to adjust to get the image to fit right.
-I think the hr tag helps guide the readers, I used it to group parts of my webpage.
-Improving my navagation helped the user to identify that they are a link, without shouting it at them.
Midterm - Part 2
Here's the link to my updated site
a) If Christine were to use this site to promote her business, it would be nothing without the images. The purpose of the site is to showcase her work and to get people to order cakes from her. Having images of her cakes on her site shows what she's capable of and hopefully encourages potential clients to call her when they need a cake.
b) I had issues with my images aligning the way I wanted them to. But then, I realized it was because I have an elastic page, so unless I changed it to a fixed-width page, there is always the potential that the images wouldn't fill the screen the way I wanted them to. I went through a lot of un-necessary trouble this way. I got the images to look the way I wanted. Then, I had to add borders and padding and it threw everything off. So, I went in and reduced the pixels of all of my images to get it right again. When I was all finished I checked the site in other browsers and the images were off again. It wasn't until then that I realized it was because of the elasticity and I'd wasted a bunch of time. Also, I wanted the image on my home page to be centered. What I have found here is that it's not possible when creating a "strict" site. It simply isn't allowed. Had it been transitional (which I tested) aligning my images would validate.
c) Understanding the box model and creating borders, padding, and margins was really easy. I think my best example of this was when I created it for my navigation. The padding initially wanted to run across the whole screen (similar to the background style of my headings). To fix this I adjusted the left and right margins (with a much higher pixel) separately from the top and bottom margins.
d) I used hr tags to separate my sections of photos. Since there are a lot of photos I also added "back to top" links right about the horizontal line for when the user is below the fold. I think the horizontal line helped to make the page look cleaner and more organized.
e) The navigation on my site looks more professional now and matches the look of the image borders and padding as well. It also helped to fill in some white space. I will note though, that the grooved border I chose does not translate near as well in Safari and in Google Chrome as it does in Firefox.
f) Here is another chance to go to my site:)
a) If Christine were to use this site to promote her business, it would be nothing without the images. The purpose of the site is to showcase her work and to get people to order cakes from her. Having images of her cakes on her site shows what she's capable of and hopefully encourages potential clients to call her when they need a cake.
b) I had issues with my images aligning the way I wanted them to. But then, I realized it was because I have an elastic page, so unless I changed it to a fixed-width page, there is always the potential that the images wouldn't fill the screen the way I wanted them to. I went through a lot of un-necessary trouble this way. I got the images to look the way I wanted. Then, I had to add borders and padding and it threw everything off. So, I went in and reduced the pixels of all of my images to get it right again. When I was all finished I checked the site in other browsers and the images were off again. It wasn't until then that I realized it was because of the elasticity and I'd wasted a bunch of time. Also, I wanted the image on my home page to be centered. What I have found here is that it's not possible when creating a "strict" site. It simply isn't allowed. Had it been transitional (which I tested) aligning my images would validate.
c) Understanding the box model and creating borders, padding, and margins was really easy. I think my best example of this was when I created it for my navigation. The padding initially wanted to run across the whole screen (similar to the background style of my headings). To fix this I adjusted the left and right margins (with a much higher pixel) separately from the top and bottom margins.
d) I used hr tags to separate my sections of photos. Since there are a lot of photos I also added "back to top" links right about the horizontal line for when the user is below the fold. I think the horizontal line helped to make the page look cleaner and more organized.
e) The navigation on my site looks more professional now and matches the look of the image borders and padding as well. It also helped to fill in some white space. I will note though, that the grooved border I chose does not translate near as well in Safari and in Google Chrome as it does in Firefox.
f) Here is another chance to go to my site:)
Wednesday, November 10, 2010
Part 2 - Christina
Click here for the site!
a. How did your images contribute to your website? What purpose did they serve?
I included images on most pages, besides the video one. I felt the Home page really needed something interesting to keep you on the page. The colors are nice, but that will only get you so far! I went with a horribly adorable kitty cat picture that hopefully, catches people attention, without cluttering the page. The next page was the fun facts, I added the image of a cat off to the side. Once again I felt the need to add interest to the page. The reason for leaving images out of the video page, was due to the fact it would be un-necessary when videos are put in.
b. What challenges did you experience in having your images show properly on your web page?
The biggest issue I had was getting the images where I wanted them to be. I seem to constantly get confused about what to use for image positioning...As for actually getting the images to show up, that was no problem. I gave the files simple names so misspelling and such was unlikely.
The page specifically meant for pictures, I still plan on making that nicer. I don't like the different sized images and messiness of it.
c. How did understanding the box model assist you creating borders, padding and margins around your images?
I actually did a lot of guessing when it came to the padding/margins/borders. I'm still trying to get used to what each of them does. It was fun playing with them though, even if the surrounding borders on my images turned out really simple.
d. How does the placement of your hr tag assist users of your website?
To be honest, I may move it somewhere else in part three. But, for now, I've used it in a way that separates the videos meant for my site, from the links that go out to other sites (For more videos and cat information.). I wanted it to help give the page a slightly more organized feel.
e. How did the enhancements to your navigation improve your web site?
I had already done a tone of things with the navigation in part one, so I didn't feel the need to add a new background or anything. I am pretty happy with the colors I've got for it. A light grey for the background that's easy on the eyes, and black for text.
a. How did your images contribute to your website? What purpose did they serve?
I included images on most pages, besides the video one. I felt the Home page really needed something interesting to keep you on the page. The colors are nice, but that will only get you so far! I went with a horribly adorable kitty cat picture that hopefully, catches people attention, without cluttering the page. The next page was the fun facts, I added the image of a cat off to the side. Once again I felt the need to add interest to the page. The reason for leaving images out of the video page, was due to the fact it would be un-necessary when videos are put in.
b. What challenges did you experience in having your images show properly on your web page?
The biggest issue I had was getting the images where I wanted them to be. I seem to constantly get confused about what to use for image positioning...As for actually getting the images to show up, that was no problem. I gave the files simple names so misspelling and such was unlikely.
The page specifically meant for pictures, I still plan on making that nicer. I don't like the different sized images and messiness of it.
c. How did understanding the box model assist you creating borders, padding and margins around your images?
I actually did a lot of guessing when it came to the padding/margins/borders. I'm still trying to get used to what each of them does. It was fun playing with them though, even if the surrounding borders on my images turned out really simple.
d. How does the placement of your hr tag assist users of your website?
To be honest, I may move it somewhere else in part three. But, for now, I've used it in a way that separates the videos meant for my site, from the links that go out to other sites (For more videos and cat information.). I wanted it to help give the page a slightly more organized feel.
e. How did the enhancements to your navigation improve your web site?
I had already done a tone of things with the navigation in part one, so I didn't feel the need to add a new background or anything. I am pretty happy with the colors I've got for it. A light grey for the background that's easy on the eyes, and black for text.
Friday, November 5, 2010
Midterm Part1-William Pitts
OK so i think i have completed my site. i have it under new midterm part1 ! here's the link. http://sws.pcc.edu/student/CAS206_pdeangel_43992/williampitts14/Midterm/Website-Part1/new%20midterm%20part1/Midterm1.html. I had fun creating it . the hardest part for me was if you wanted to really place objects in certain areas. Also is there a reason why pcc wont let the photos come up when your looking at other peoples site's? And i like the validating process.
I finally submitted the midterm!
What worked well?
Hmm, nothing was easy and I’m not sure if what I was able to do was all that effective.
Who is your target audience? What design choices did you choose to attract your audience to your site?
My site is intended to appeal to runners, fans of the Hood to Coast relay, doughnut aficionados, people interested in Portland running culture, and members of “The Gang.”
Color choice is critical (although poorly executed). I wanted to convey the same vibe you get from an ice cream truck or a Baskin-Robbins ice cream parlor.
What browsers did you test in? What differences did you see?
Firefox, Internet Explorer, and Chrome browsers were used to verify the compatibility of the site.
Slight differences were noted on the Chrome and IE browsers when displaying the 2nd page.
What troubleshooting did you experience?
Most of the troubleshooting involved tweaking the CSS so that the intended text was highlighted/readable. Some troubleshooting was brought to bear to figure out how to display link target web pages in a separate browser window/tab.
Describe your validating experience?
I had problems with the “target” attribute of the anchor tag. This was necessary in order to open a link target in a separate browser window/tab. Unfortunately, this attribute is only available in Transitional and Frameset. So far, I have not resolved this problem. Depending upon the implementation, this either causes the XHTML validation or the CSS validation to fail.
What best practices discussed in class assisted in your productivity?
Saving changes regularly and testing/validating the incremental modifications was helpful in detecting problems early.
Subscribe to:
Comments (Atom)