A: Nothing would have worked well if I hadn't had the practice documents we worked on in class to refer to. I can't seem to memorize any of this stuff! Otherwise, I think my color scheme, which I picked from a Camo Black Ice can, works pretty well.
B: My target audience is college aged guys and old people who love bum beer. I chose to make the site larger and easier to read because my target audience is either going to be drunk or have poor vision.
C: I tested my site in Firefox, Chrome, and Internet Explorer. I honestly didn't notice a difference in any of them.
D: At first I tried making a two column design, but then I realized that trying doing that was way above my level of knowledge so I gave up and made it one column. That was a lot easier!
E: My validating experience was okay. I had a few missing curly brackets in my CSS and forgot to close a few p tags, but I fixed that pretty easily.
F: I attempted to create a simple layout that is easy to follow and won't get users lost.
G: View my site
Saturday, February 19, 2011
Friday, February 18, 2011
Mid-Term: Scrabble Site
Scrabble: The Next Level Up
a) What worked well?
I started the site by gathering info and graphics from the internet (in real life, I would have got permission to use all the graphics, of course!). I took the logo into adobe.kuler to get the colors for the site. I really like the color scheme - it has a bold look, and is pretty flexible for color choices.
b) Who is your target audience? What design choices did you use to attract your audience to your site?
The target audience for this site is casual living room players of Scrabble, who enjoy the game with family and/or friends. They may be unaware that the game has evolved into a competitive "sport" (along the lines of texas hold'em -it's just not as lucrative). This site gives them just a peek behind that curtain. The audience is male and female, from ages 16 to 86, weighted towards the 40 to 60 yr old crowd.
The design uses familiar Scrabble cues and imagery that any player would already have been exposed to.
c) What browsers did you test in? What differences did you see?
I tested in Firefox, Safari, and Chrome (on MAC platform) with no issues. I noticed a difference in the way Firefox treats the background border attribute, "ridge". Firefox has a sharp chiseled look, while both Safari & Chrome give it a soft, blended round look. Otherwise, I don't see much difference.
d) What troubleshooting did you experience?
I'm not 100% happy with the "link" and "visited" state of the hyperlinks. I wrestled with that for a while before discovering by chance, my stylesheet had duplicate sections of the 4 states. One section was nearer to the top of the stylesheet, while the other was lower, out of view. So I suspect when I was trying to tweak the look, I was making changes to one or the other. So some of my frustration with the tweak results was due to that. I trashed one set, worked with the other, but still was unable to land on a look I'm really happy with.
e) Describe your validating experience.
First, I didn't realize you needed to run the HTML validator separately on each page. I assumed when you ran it, it would check all the pages of the site. So I had some fixes on each page.
Second, two of the errors pointed to a hyperlink URL address I copied from the address bar. It contained an ampersand and an equal-to sign that the validator had a problem with. When I converted them manually to the ascii code, they validated.
Third, I had an internal anchor that surrounded the h3 section head. The error said I could not do that. I just moved the closing attribute behind the opening and it worked fine.
f) What practices discussed in class assisted in your productivity?
Well-formed code made construction of the site faster, and hunting down errors easier.
g) Up top.
a) What worked well?
I started the site by gathering info and graphics from the internet (in real life, I would have got permission to use all the graphics, of course!). I took the logo into adobe.kuler to get the colors for the site. I really like the color scheme - it has a bold look, and is pretty flexible for color choices.
b) Who is your target audience? What design choices did you use to attract your audience to your site?
The target audience for this site is casual living room players of Scrabble, who enjoy the game with family and/or friends. They may be unaware that the game has evolved into a competitive "sport" (along the lines of texas hold'em -it's just not as lucrative). This site gives them just a peek behind that curtain. The audience is male and female, from ages 16 to 86, weighted towards the 40 to 60 yr old crowd.
The design uses familiar Scrabble cues and imagery that any player would already have been exposed to.
c) What browsers did you test in? What differences did you see?
I tested in Firefox, Safari, and Chrome (on MAC platform) with no issues. I noticed a difference in the way Firefox treats the background border attribute, "ridge". Firefox has a sharp chiseled look, while both Safari & Chrome give it a soft, blended round look. Otherwise, I don't see much difference.
d) What troubleshooting did you experience?
I'm not 100% happy with the "link" and "visited" state of the hyperlinks. I wrestled with that for a while before discovering by chance, my stylesheet had duplicate sections of the 4 states. One section was nearer to the top of the stylesheet, while the other was lower, out of view. So I suspect when I was trying to tweak the look, I was making changes to one or the other. So some of my frustration with the tweak results was due to that. I trashed one set, worked with the other, but still was unable to land on a look I'm really happy with.
e) Describe your validating experience.
First, I didn't realize you needed to run the HTML validator separately on each page. I assumed when you ran it, it would check all the pages of the site. So I had some fixes on each page.
Second, two of the errors pointed to a hyperlink URL address I copied from the address bar. It contained an ampersand and an equal-to sign that the validator had a problem with. When I converted them manually to the ascii code, they validated.
Third, I had an internal anchor that surrounded the h3 section head. The error said I could not do that. I just moved the closing attribute behind the opening and it worked fine.
f) What practices discussed in class assisted in your productivity?
Well-formed code made construction of the site faster, and hunting down errors easier.
g) Up top.
Midterm Web Site
The site I designed was for my seven year old Niece, Sicilia. A while back her father (my brother) had asked me if I could create one for her so I took this mid-term opportunity to do so. the link for the site is:
http://sws.pcc.edu/student/CAS206_pdeangel_13645/vickiknapton32/Midterm/Part%201/sicilia_home.html
Overall, the design and implementation went smoothly. I was surprised, actually, at how smoothly things went (well, I guess the true judgment will come with my grade...) I really learned a lot during this process and it was a good refresher of all that was taught so far. I think the colors and design came together well, and coding went well.
As mentioned, my target audience is the pre-teen girl group. That said I wanted bright colors, lots of space, lots of "chunking" of text and objects. I also took into consideration font size an type. Since that age group is just learning to read, large easy-to-read text was important. I adjusted the spacing of the text on the headlines to make it more legible as the yellow and blue wasn't as much of contrast as the black on white copy.
I tested the site in three browsers: Chrome, Safari and Firefox with the majority of the inital testing in Firefox. Firefox and Safari basically showed the same overall. Chrome set some of my copy in serif style when it was set up as sans. The major stumbling block I encountered was with the navigation. I tried placing a different backgrounds colors for different actions (IE hover = yellow, visited=blue) and it was not working out, especially in chrome which left a black bock for the "visited" action. I eventually took some of the backgrounds off, and left others.
I really enjoy troubleshooting (ok, is that weird?) I feel like I'm doing the XHTML equivalent of the NY Times Sunday crossword puzzle, only this comes with validation. Literally. It really helped in class the other day when Patti reminded me of best practices in regards to coding. Also kept a lot of best practices in mind in regard to design. This included lots of white space, use contrast, and of course, siteness.
http://sws.pcc.edu/student/CAS206_pdeangel_13645/vickiknapton32/Midterm/Part%201/sicilia_home.html
Overall, the design and implementation went smoothly. I was surprised, actually, at how smoothly things went (well, I guess the true judgment will come with my grade...) I really learned a lot during this process and it was a good refresher of all that was taught so far. I think the colors and design came together well, and coding went well.
As mentioned, my target audience is the pre-teen girl group. That said I wanted bright colors, lots of space, lots of "chunking" of text and objects. I also took into consideration font size an type. Since that age group is just learning to read, large easy-to-read text was important. I adjusted the spacing of the text on the headlines to make it more legible as the yellow and blue wasn't as much of contrast as the black on white copy.
I tested the site in three browsers: Chrome, Safari and Firefox with the majority of the inital testing in Firefox. Firefox and Safari basically showed the same overall. Chrome set some of my copy in serif style when it was set up as sans. The major stumbling block I encountered was with the navigation. I tried placing a different backgrounds colors for different actions (IE hover = yellow, visited=blue) and it was not working out, especially in chrome which left a black bock for the "visited" action. I eventually took some of the backgrounds off, and left others.
I really enjoy troubleshooting (ok, is that weird?) I feel like I'm doing the XHTML equivalent of the NY Times Sunday crossword puzzle, only this comes with validation. Literally. It really helped in class the other day when Patti reminded me of best practices in regards to coding. Also kept a lot of best practices in mind in regard to design. This included lots of white space, use contrast, and of course, siteness.
Midterm Part I - Megan McFadden
A) I think I accidentally tried to make my site too complex by using the 2 column layout. The only thing I think really worked well were the links and color scheme, the layout itself still needs some work. I'm really looking forward to learning more about padding next week so my text isn't touching the edges of everything.
B) My target audience is dog lovers in general, which can include anyone of any gender and age group. I tried to keep my colors neutral, and actually chose colors to highlight the "Blue Merle" and "Red Tri" colorings found in Australian Shepherds. I used a photo of my Aussie with Kuler to pick the color scheme. I attempted to create a layout that I thought would be organized and easy to follow and would also allow plenty of room for information.
C) I tested my site in Firefox, Internet Explorer, and Google Chrome. I'm happy to say that they all tested out just fine! The only major difference I noticed was that the text of the site appears smoother in Internet Explorer than it did in Firefox or Chrome. As much as I dislike Internet Explorer, I like how it displays the text better.
D) The only troubleshooting I experienced was getting the color to my side column to extend down to the bottom of the page along with the main column when the main column stretches further (I hope that makes sense). Anyhow, if you look at the "activities" page, you'll see what I mean. I found a way to fix this using faux columns, which can be explained here
at A List Apart. I plan on fixing this next week when we begin using images. I also had trouble with padding for some reason so I omitted it this time around since we will be working on it next week.
E) I had absolutely no problems validating which made me very happy!
F) I did my best to keep an organized, consistent, centered layout to provide a pleasant experience for the viewer. I also made sure that my links are clearly labeled and my text is easy to read.
G) http://sws.pcc.edu/student/CAS206_pdeangel_13645/meganmcfadden34/Midterm/Part1/
B) My target audience is dog lovers in general, which can include anyone of any gender and age group. I tried to keep my colors neutral, and actually chose colors to highlight the "Blue Merle" and "Red Tri" colorings found in Australian Shepherds. I used a photo of my Aussie with Kuler to pick the color scheme. I attempted to create a layout that I thought would be organized and easy to follow and would also allow plenty of room for information.
C) I tested my site in Firefox, Internet Explorer, and Google Chrome. I'm happy to say that they all tested out just fine! The only major difference I noticed was that the text of the site appears smoother in Internet Explorer than it did in Firefox or Chrome. As much as I dislike Internet Explorer, I like how it displays the text better.
D) The only troubleshooting I experienced was getting the color to my side column to extend down to the bottom of the page along with the main column when the main column stretches further (I hope that makes sense). Anyhow, if you look at the "activities" page, you'll see what I mean. I found a way to fix this using faux columns, which can be explained here
at A List Apart. I plan on fixing this next week when we begin using images. I also had trouble with padding for some reason so I omitted it this time around since we will be working on it next week.
E) I had absolutely no problems validating which made me very happy!
F) I did my best to keep an organized, consistent, centered layout to provide a pleasant experience for the viewer. I also made sure that my links are clearly labeled and my text is easy to read.
G) http://sws.pcc.edu/student/CAS206_pdeangel_13645/meganmcfadden34/Midterm/Part1/
Midterm - Amy Petit
A) I thought it was really helpful to refer back to the practice code we had written in class as a starting place for this web site. Making the wireframe mockup really helped to organize how I was going to section off the site.
B) My web site focuses on recipes that my husband and I have discovered while traveling. It’s mainly Mediterranean cuisine and my target audience is both men and women, 30+ who love to travel and cook. For those reasons I’ve chosen to use rich reds and orange colors complimented by an olive green. I’ve kept the layout very simple and tried to provide resources that the reader would find useful.
C) I’ve tested this in Safari, Firefox (on MAC & PC) and Chrome. When I was trying to make the “visited” link color different, I noticed discrepancies in the way Safari and Firefox displayed that. I also noticed a difference in the way Safari displays the paragraph copy.
D) Styling the navigation was a challenge because, as we figured out in class, it had to be tied to the id selector #nav I had defined. Once I was able to get that to work - the way the other links were styled made much more sense.
E) I had a few missed semi-colons and end curly braces that was causing some errors in validating. I had also forgotten to enclose the span tag in a p tag which validated but caused a big difference in Safari in some text.
F) I tried to make sure the code was well-formed to make it easier to find my errors. I also validated as I went along so I could fix problems right away.
G) Here is a link to my site - I hope you like it!
http://sws.pcc.edu/student/CAS206_pdeangel_13645/amypetit41/Midterm/Part1/
B) My web site focuses on recipes that my husband and I have discovered while traveling. It’s mainly Mediterranean cuisine and my target audience is both men and women, 30+ who love to travel and cook. For those reasons I’ve chosen to use rich reds and orange colors complimented by an olive green. I’ve kept the layout very simple and tried to provide resources that the reader would find useful.
C) I’ve tested this in Safari, Firefox (on MAC & PC) and Chrome. When I was trying to make the “visited” link color different, I noticed discrepancies in the way Safari and Firefox displayed that. I also noticed a difference in the way Safari displays the paragraph copy.
D) Styling the navigation was a challenge because, as we figured out in class, it had to be tied to the id selector #nav I had defined. Once I was able to get that to work - the way the other links were styled made much more sense.
E) I had a few missed semi-colons and end curly braces that was causing some errors in validating. I had also forgotten to enclose the span tag in a p tag which validated but caused a big difference in Safari in some text.
F) I tried to make sure the code was well-formed to make it easier to find my errors. I also validated as I went along so I could fix problems right away.
G) Here is a link to my site - I hope you like it!
http://sws.pcc.edu/student/CAS206_pdeangel_13645/amypetit41/Midterm/Part1/
David peterson Midterm
A.) The over all layout positioning of the footer worked extremely well along with the titles and creations of the links game me no trouble at all .
B.) My target audience is adult gamers and above. I chose the dark background and also incorporated design to help those who are colorblind by not putting colors such as blue and green directly right beside one another I also made it made the colors slightly mono toned so that it would be easier upon the eyes to read and more attractive to older viewers. I also used the black background over the dark red background with white text inside the black heading to help it stick out and attract attention better then the simple black on white style backgrounds.
C.) I tested it inside Google chrome and Mozilla Firefox. I noticed that the difference between the two was that Google chrome was much larger and did not require a scroll bar as where Firefox did require one.
D.)I experienced some trouble when i attempted to make the table and the navigation
remain on the same positions when i added test to the website but found that as i did the over all text added changed the positions with each word added causing a lot of retooling each time i add more text in future use i will not be redoing this style format so i have learned a lot from this
E.)My validation experience went rather easy inside this piece as i only found a few css errors that were simple mistakes from forgetting to put symbols in the correct style format such as accidentally putting color:000000; when it should be color:#000000; i quickly fixed the mistakes like that and it validated quite fine after this.
F.) The use of listing the hexadecimal colors used through out the entire css sheet, using comments to sectionize the css sheet to over all help organization,keeping a hierarchy style format, and labeling nav for the navigation piece inside the css
G.) http://sws.pcc.edu/student/CAS206_pdeangel_13645/davidpeterson67/Midterm/Part1/menu.html
B.) My target audience is adult gamers and above. I chose the dark background and also incorporated design to help those who are colorblind by not putting colors such as blue and green directly right beside one another I also made it made the colors slightly mono toned so that it would be easier upon the eyes to read and more attractive to older viewers. I also used the black background over the dark red background with white text inside the black heading to help it stick out and attract attention better then the simple black on white style backgrounds.
C.) I tested it inside Google chrome and Mozilla Firefox. I noticed that the difference between the two was that Google chrome was much larger and did not require a scroll bar as where Firefox did require one.
D.)I experienced some trouble when i attempted to make the table and the navigation
remain on the same positions when i added test to the website but found that as i did the over all text added changed the positions with each word added causing a lot of retooling each time i add more text in future use i will not be redoing this style format so i have learned a lot from this
E.)My validation experience went rather easy inside this piece as i only found a few css errors that were simple mistakes from forgetting to put symbols in the correct style format such as accidentally putting color:000000; when it should be color:#000000; i quickly fixed the mistakes like that and it validated quite fine after this.
F.) The use of listing the hexadecimal colors used through out the entire css sheet, using comments to sectionize the css sheet to over all help organization,keeping a hierarchy style format, and labeling nav for the navigation piece inside the css
G.) http://sws.pcc.edu/student/CAS206_pdeangel_13645/davidpeterson67/Midterm/Part1/menu.html
Wednesday, February 9, 2011
Funnies
Well I am an frequent stumbler, and I just laughed by phanny off when I saw this comic by Oatmeal.
Subscribe to:
Posts (Atom)