CAS 206 F2010

MARY KAY Products: Personal Care Advisor

noreply@blogger.com (jaidiv) — Wed, 07 Sep 2011 00:58:00 +0000

MARY KAY Products: Personal Care Advisor

Final Project - Cassy

noreply@blogger.com (Cassandra Cicero) — Tue, 07 Dec 2010 06:16:00 +0000

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.

Final - Finally.... by Leslie Elliott

noreply@blogger.com (Unknown) — Tue, 07 Dec 2010 06:12:00 +0000

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 7^th 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

noreply@blogger.com (Anonymous) — Mon, 06 Dec 2010 21:57:00 +0000

Identifying Design Elements

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.

noreply@blogger.com (aaronf) — Mon, 06 Dec 2010 19:05:00 +0000

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?
1. Used Google Adwords to check for additional keywords
2. Used the meta tag with keyword and description attributes
3. I tried to link to authoritative internet sources. I checked their popularity, but I was more interested in quality (correct) content.
4. I created a glossary of terms. I intended to create a site map, but ran out of time.
5. I tried to include keywords in the title, headings, etc.

Discuss all testing requirements?
1. Validation of XHTML and CSS was straightforward (except for video media link).
2. All links (absolute and relative) are functional.
3. 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.
4. 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.
5. Adobe browser lab:
  1. Tested using Firefox 3.0 - Windows, Firefox 2.0 - OS X, Internet Explorer 8.0, Safari 3.0 - OS X
  2. Differences in fonts used, table border styles, video media border style
  3. No changes were made

Final!

noreply@blogger.com (Jenee Silkwood) — Wed, 01 Dec 2010 22:49:00 +0000

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!

Cutting time yet again (yikes!).

noreply@blogger.com (aaronf) — Fri, 19 Nov 2010 07:30:00 +0000

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

noreply@blogger.com (Unknown) — Fri, 19 Nov 2010 07:11:00 +0000

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.

Midterm - Part 3 Cassy

noreply@blogger.com (Cassandra Cicero) — Fri, 19 Nov 2010 05:01:00 +0000

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.

Midterm part 3

noreply@blogger.com (Anonymous) — Thu, 18 Nov 2010 22:28:00 +0000

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).

Midterm Part 3

noreply@blogger.com (Jenee Silkwood) — Tue, 16 Nov 2010 23:10:00 +0000

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!

William Pitts: Midterm Part2

noreply@blogger.com (William Pitts) — Sat, 13 Nov 2010 23:40:00 +0000

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/

here is the link to my website i hope you enjoy it. Please check out the video section and the photo section I had the most fun and irritating time with the videos: it toke a day and a halve to get the video's in and working correctly and to validate!: My Website

test page 1:

test page 2:

test page 3:

Trying to get to bed early!

noreply@blogger.com (aaronf) — Sat, 13 Nov 2010 05:25:00 +0000

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:
- Page #1
- Page #2
- Page #3

Midterm Part 2 - Leslie

noreply@blogger.com (Unknown) — Sat, 13 Nov 2010 05:22:00 +0000

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.

Midterm Part 2 Cassy

noreply@blogger.com (Cassandra Cicero) — Sat, 13 Nov 2010 04:50:00 +0000

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.

Midterm - Part 2

noreply@blogger.com (Jenee Silkwood) — Fri, 12 Nov 2010 22:03:00 +0000

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:)

Part 2 - Christina

noreply@blogger.com (Anonymous) — Wed, 10 Nov 2010 23:29:00 +0000

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.

Midterm Part1-William Pitts

noreply@blogger.com (William Pitts) — Fri, 05 Nov 2010 16:57:00 +0000

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!

noreply@blogger.com (aaronf) — Fri, 05 Nov 2010 07:02:00 +0000

My website is here.

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.

Midterm Part1- Cassy

noreply@blogger.com (Cassandra Cicero) — Fri, 05 Nov 2010 06:13:00 +0000

http://sws.pcc.edu/student/CAS206_pdeangel_43992/cassandracicero82/FileManagement/Midterm/Website-Part1/

-What worked well for me was creating the basics of the home page first, then copying it to the other pages. After that it was just adjusting the pages to their individual needs.
-My target audience is my family and other people who plan to visit San Francisco. I plan to provide alot of pictures, with descriptions. I also described my experiences with some of the museums that the city has to offerl.
-I used Explorer, FireFox, and Chrome. The differences I noticed is the text size, Chrome is smaller text than the others. The colors, while relatively close, were slightly different between them.
-I spent quite a bit of time on my links, and my lists. I couldn't decide what type of lists I wanted to use where, and how to display them. With my links I had a hard time deciding how I wanted to display them, and how obvious I wanted to make them.
-I had issues getting my CSS to work how I wanted it to. I put the wrong code in the wrong places, so it just didn't work. I had to work to adjust that. Other than that I didn't have very many errors.
-I constantly copied and paced my code throughout my web pages. Why type the same thing repeatedly? I saved and validated often. Kept my code consistent is spacing and lowercases.

Midterm - Part 1, Leslie Elliott

noreply@blogger.com (Unknown) — Fri, 05 Nov 2010 06:09:00 +0000

Here is my link: http://sws.pcc.edu/student/CAS206_pdeangel_43992/leslieelliott56/Midterm/Website-Part1/

What worked well?

The main parts such as the headers, footer, unordered lists and definition list worked as I wanted them to. I had a hard time working on some of the class tags to get them as I wanted. That's mostly why I'm posting so late. I would have been done hours ago, otherwise.

Who is your target audience? What design choices did I choose to attract your audience to your site?

My target audience is my family and friends. I decided to go with a basic layout design to keep it organized and easy to read. Picking out the colors was tough. The color scheme I went with is nothing I started out with and I'm not complete happy with it. Most of the people I know, know that I'm a Seahawks fan so, it was purely unintentional, but that's what I ended up with so I kept it.

What browsers did you test in? What differences did you see?

I tested on IE, Firefox and Opera. I mainly use Firefox so my formatting looked as I wanted it to. When I tested on IE, everything was much larger. Wow! I didn't realize there was such a difference. Opera look the same as Firefox.

What troubleshooting did you experience?

As I mentioned before, I had a hard time keeping the ID and Class selectors straight. With trial and error, I think I have it figured out. I had forgotten about using the element. Once I went through my practice pages and remembered to use them in the listing sections, they worked to make some of the text show as I wanted.

Describe your validating experience.

Validating went pretty smoothly. Just a few errors because I either left out a ">" or ";". Otherwise, no problems.

What best practices discussed in class assisted in your productivity.

Cutting and pasting was a big help. Plus, on the CSS page, keeping a color list is very helpful. I also like using markers which lets me keep track what is what.

Midterm p1 - Christina

noreply@blogger.com (Anonymous) — Thu, 04 Nov 2010 21:44:00 +0000

Link!
http://sws.pcc.edu/student/CAS206_pdeangel_43992/christinamort21/Midterm/part1/

My audience was meant to be young girls interested in cats. So, I went for a cool/cute theme with the blacks and pinks.

The alignment of text, and the links all did exactly what I was hoping. Instead of everything being centered I let it be off to the side.

The browsers I tested with were...
-Firefox: This was the browser I checked with most of the time. Everything works right.

-Internet Explorer: The words are a bit bolder/larger looking when in this. Otherwise, it's similar to firefox.

-Safari: I had wanted to use chrome, but was having issues, so I tried safari instead! This one views the HOME link strange. It changes the background to black for some reason
when it's suppose to remain gray.

I constantly had issues with links being the wrong color, but I figured it out after a while. I wasn't able to fix it on safari though. I also had issues with picture placement.
I had intended to include an image of a cat on the home page, but I couldn't figure out how to make it work with the strict HTML.
I had no issues with validating CSS. Only once, when I had accidentally added '#', twice in a hex code. As for the HTML, I had little problems. They were easy to fix.
As for best practices...I validated constantly so I wouldn't end up with a large list of errors. I also tried my best to put everything in a nice/consistent order in the HTML.
Overall I tried to keep things simple.

Little went wrong as I was making the site, and
I'm pretty happy with how it turned out. xD

Also! As for the pictures page, I don't plan on leaving it laid out like that.
I just wanted something to fill up some white space.

I'm thinking about adding a cat picture to the Home page...One that's off to the side.
It feels kinda boring without anything there

Be careful classmates!

noreply@blogger.com (Jenee Silkwood) — Thu, 04 Nov 2010 05:56:00 +0000

I just wanted to send a heads up -

When I wrote out my blog I used a couple of codes in my writing to describe my process. Apparently you can't do this because it wants to read it as a code and not just text. It made it so that my link to my site wouldn't work. But I did some troubleshooting and figured it out.

Just thought I'd save y'all the trouble:)

Midterm - Part 1

noreply@blogger.com (Jenee Silkwood) — Thu, 04 Nov 2010 05:12:00 +0000

Hello Class! Feel free to go check out part 1 of my midterm.

Here is a summary of how things went:

a) I was able to snag the "backbone" of my code from our Java Jam assignment and that made starting a new page from "scratch" easier. (Kind of like the muffins I made from "scratch" the other day, but most of the ingredients came out of a box). Okay, I kid here. I did keep the basic layout of the Java Jam assignment because it worked for what I wanted to do, but I changed it quite a bit. That was a couple of weeks ago, so I don't remember everything, but I do recall playing with the width and that was fun.

b) Christine's target audience would mostly be mom's (or the women of the household) who want to order specialty cakes for their events, but are economically conscience as well. Christine has been using business cards for the past year or so and sent me a link to the card. I tried to snag the image of the card so I could upload it onto Adobe Kuler, but that proved to be one of the more difficult parts of this assignment for me. I believe the folks who make the business cards have heavier copyright restrictions on their site because copying and saving the image was extremely difficult. I finally forfeited and accepted the tiny picture I got from my attempts and used that in Kuler. It wasn't ideal, but it worked. And thus, my color scheme was born. I used white for my background because I read somewhere that some 80/85% of the top 50+ websites have black text on white backgrounds.

Sidenote: I originally snagged a photo off of Christine's facebook of a super nice cake she did with swans on it. It showcased her work well, and had a nice color palette with white, greens, blues, brown, black, and ivory. I thought that the cake used as a type of logo and the color scheme would work well for her target market. But, since she already has cards I figured they should match. Pink and brown look really good together, and it works for selling cakes to moms, (even if that color combo is a little 2008).

c) I tested my site in Firefox, Safari, and Google Chrome (since I couldn't upload IE on my Mac without having Windows installed). Very slight, barely visible differences between the three - except for one thing - my CSS properties for my external absolute link (which I used a class selector for) would not work in Safari. So frustrating! All validated in Firefox, and it looks right in both Firefox and Chrome, so after some failed troubleshooting I ended up tossing it up as a minor loss.

d) Troubleshooting - Well, you just read my example above, but what else? The main issue was getting my ordered list to actually order itself. It was wanting to adopt the styles I assigned for my unordered list, even though my ordered list was farther down in the cascade. So, my first move was to apply a class selector to it. When I first started doing this I was applying it to the ordered list tag and that didn't work. Finally, after fiddling around a bit, I applied it to each line tag in my ordered list and it worked!

e) My validating experience went well. When I'd check it periodically whether things were going as planned or not, it would either pass, or fail and easily point out that I was missing something minor in my code. A good tool to help me find my coding typos!

f) Since there isn't a lot to this site as of yet, I didn't get an opportunity to take advantage of all of my best practices knowledge. However, I kept the pages short and repeated the general look of the site (colors, font, navigation, header, footer, etc) on all of the pages. I also added the background color to the header and footer so there wouldn't be too much white space, and to add some interest. Also, when my text/paragraphs looked too close together (mainly because the page is so short to begin with) I added some paragraph tags with non-breaking spaces inbetween to my code to space things out more and expand the page.

g) If you didn't see it at the beginning of my post, here is another opportunity to check out Cakes by Christine.

Thank you!

Jenee

noreply@blogger.com (William Pitts) — Mon, 01 Nov 2010 21:03:00 +0000