a. How did your images contribute to your website? What purpose did they serve?
The images showed 4 examples of different ways to hold the drumsticks. This was key in illustrating the description listed above the images on the page.
b. What challenges did you experience in displaying your images properly on your web page?
Luckily there were no challenges. The images centered without any troubleshooting and the border keeps them looking clean and neat.
c. How did understanding the box model assist you creating borders, padding and margins around your images?
the box model was very helpful. it allowed me to see exactly where the changes to padding and margin would be made and allowed me to space my images from the text above and below without any trouble or guessing.
d. How does the placement of your hr tag assist users of your website?
the hr tag keeps a divider between my image examples and the text above the videos on each page. it keeps people from wondering where one example begins and ends.
e. How did the enhancements to your navigation improve your web site?
the navigation was improved aesthetically, and when hovering over the links they look better and stand out more than the navigation i had set up before.
f. Add a link to your web site within your blog posting
midterm part 2 link
Saturday, February 26, 2011
Part Two Midterm
a. How did your images contribute to your website? What purpose did they serve?
They help the page look pretty good, accent it in a couple of ways.
b. What challenges did you experience in displaying your images properly on your web page?
I felt like this had been an uphill battle with rollerblades for me. I've been working on this all week and just couldn't get the pictures to match up with my color scheme, I couldn't even get them to appear properly for a good hour, it was silly.
c. How did understanding the box model assist you creating borders, padding and margins around your images?
I don't really know what a box model is, but I worked on the borders and padding the best I could. DON'T stay home sick on a class day. Freaking sucks.
d. How does the placement of your hr tag assist users of your website?
?? I'm sorry I don't know the answer...
e. How did the enhancements to your navigation improve your web site?
I made buttons for the page, giving a bit more flair I believe.
f. Add a link to your web site within your blog posting
Linky!
They help the page look pretty good, accent it in a couple of ways.
b. What challenges did you experience in displaying your images properly on your web page?
I felt like this had been an uphill battle with rollerblades for me. I've been working on this all week and just couldn't get the pictures to match up with my color scheme, I couldn't even get them to appear properly for a good hour, it was silly.
c. How did understanding the box model assist you creating borders, padding and margins around your images?
I don't really know what a box model is, but I worked on the borders and padding the best I could. DON'T stay home sick on a class day. Freaking sucks.
d. How does the placement of your hr tag assist users of your website?
?? I'm sorry I don't know the answer...
e. How did the enhancements to your navigation improve your web site?
I made buttons for the page, giving a bit more flair I believe.
f. Add a link to your web site within your blog posting
Linky!
Midterm Part 2: Andrew Vernon
A) I feel my images made my site look fantastic, I couldn't be happier. I included some original artwork on the home page, and some images of the beers I reviewed on their corresponding pages. I also created a header with my horrible photoshop skills, but I think it looks cool. I added a motion blur effect to the beer cans to make a point that these beers make you tipsy.
B) The only challenge I had with the images is that I accidentally made them way too huge. 600px wide isn't a good idea, but I fixed that. I followed what we did in class to help walk me through the block model ... I mean box model.
C) I kind of get the box model now, with the help of the in class practice of course. I like adding the border to the image, it gives it a nice framed appearance.
D) I used the hr tag to separate each of the discussions within the review pages. I think it helps to separate the content a little better and it looks nice.
E) The navigation really stands out now with the box around it. I think it is safe to assume that the navigation is easy to use and everyone should see it. It gives it more of a "button" feel.
F) View my site
B) The only challenge I had with the images is that I accidentally made them way too huge. 600px wide isn't a good idea, but I fixed that. I followed what we did in class to help walk me through the block model ... I mean box model.
C) I kind of get the box model now, with the help of the in class practice of course. I like adding the border to the image, it gives it a nice framed appearance.
D) I used the hr tag to separate each of the discussions within the review pages. I think it helps to separate the content a little better and it looks nice.
E) The navigation really stands out now with the box around it. I think it is safe to assume that the navigation is easy to use and everyone should see it. It gives it more of a "button" feel.
F) View my site
Midterm Part 2
a. How did your images contribute to your website? What purpose did they serve?
The images definitely brought a little bit of life to the website. I think their main purpose was just making it more attractive and visually defining the topic of each page.
b. What challenges did you experience in displaying your images properly on your web page?
The main challenge for me was getting them centered. I originally looked online and found a site that suggested adding the "center" tag before and after, and although this worked, it did not validate. Eventually I went on I think it was w3schools? might have been html dog, I'm not sure, but either way I discovered that adding a class to the img styling making it img.center and adding the class="center" into your html centers the image and validates.
c. How did understanding the box model assist you creating borders, padding and margins around your images?
I'm a big fan of the box model. I don't always think the padding is necessary because in a sense it seems to create two borders for the images, but I still like the look of it. Overall the box model is very helpful in creating a clean and polished look for images.
d. How does the placement of your hr tag assist users of your website?
The hr tag was kind of an afterthought for me. It didn't really have too much functionality for me in my site, so it was more of "where can I fit this thing into my site?" type of deal. I do understand the purpose of it though and can imagine that on future sites in my career it would be useful for breaking up a page.
e. How did the enhancements to your navigation improve your web site?
I actually really liked the enhancements to my navigation. I initially was resistant because I liked having all of my nav encased in one box with a border, but once I started messing around with my styling, I began to really enjoy the look of the separate borders and how they began to look like buttons as opposed to just links. My only regret is that somehow I did not notice that after the links are clicked, the boxes disappear. I tested my site multiple times so I'm not sure how this got past me, but it is not intentional so I apologize for that. I will have to fix it next time I am able.
f. Add a link to your web site within your blog posting
My Astrology Site
The images definitely brought a little bit of life to the website. I think their main purpose was just making it more attractive and visually defining the topic of each page.
b. What challenges did you experience in displaying your images properly on your web page?
The main challenge for me was getting them centered. I originally looked online and found a site that suggested adding the "center" tag before and after, and although this worked, it did not validate. Eventually I went on I think it was w3schools? might have been html dog, I'm not sure, but either way I discovered that adding a class to the img styling making it img.center and adding the class="center" into your html centers the image and validates.
c. How did understanding the box model assist you creating borders, padding and margins around your images?
I'm a big fan of the box model. I don't always think the padding is necessary because in a sense it seems to create two borders for the images, but I still like the look of it. Overall the box model is very helpful in creating a clean and polished look for images.
d. How does the placement of your hr tag assist users of your website?
The hr tag was kind of an afterthought for me. It didn't really have too much functionality for me in my site, so it was more of "where can I fit this thing into my site?" type of deal. I do understand the purpose of it though and can imagine that on future sites in my career it would be useful for breaking up a page.
e. How did the enhancements to your navigation improve your web site?
I actually really liked the enhancements to my navigation. I initially was resistant because I liked having all of my nav encased in one box with a border, but once I started messing around with my styling, I began to really enjoy the look of the separate borders and how they began to look like buttons as opposed to just links. My only regret is that somehow I did not notice that after the links are clicked, the boxes disappear. I tested my site multiple times so I'm not sure how this got past me, but it is not intentional so I apologize for that. I will have to fix it next time I am able.
f. Add a link to your web site within your blog posting
My Astrology Site
midterm part 2- challenging.
The images brought real personality to my site. I chose images that were colorful and would complement the colors of my site (for instance the first image you see, Sicilia's pants match the background color).
This part was incredibly challenging for me. I am not sure why. I think I get the o/a concept, but I wasn't sure when to use what where. Perhaps its just me needing more practice. every now and then I would have an image epiphany, and that would just screw something else up. Although it validated OK, I'm honestly not feeling confident in this yet. All that said, I really do like the concept of the box model and see that it can be pretty powerful when used properly.
The hr tag was nice supplement to the layout in that it really ties all the pieces together. I can see how it could possibly be over used in design and become part of poor design, and one should be aware of this when coding a web layout.
I think navigation is one of the more under appreciated elements on a web site. there is so much to them design and coding wise, and they are constantly used, but it's not what people go to the site for. That said, I think having interesting but perhaps subtle navigation is important and I enjoyed learning how to make them.
here is a link to my site:
http://www.sws.pcc.edu/CAS206_pdeangel_13645/vickiknapton32/Midterm/Part 2/Part2
This part was incredibly challenging for me. I am not sure why. I think I get the o/a concept, but I wasn't sure when to use what where. Perhaps its just me needing more practice. every now and then I would have an image epiphany, and that would just screw something else up. Although it validated OK, I'm honestly not feeling confident in this yet. All that said, I really do like the concept of the box model and see that it can be pretty powerful when used properly.
The hr tag was nice supplement to the layout in that it really ties all the pieces together. I can see how it could possibly be over used in design and become part of poor design, and one should be aware of this when coding a web layout.
I think navigation is one of the more under appreciated elements on a web site. there is so much to them design and coding wise, and they are constantly used, but it's not what people go to the site for. That said, I think having interesting but perhaps subtle navigation is important and I enjoyed learning how to make them.
here is a link to my site:
http://www.sws.pcc.edu/CAS206_pdeangel_13645/vickiknapton32/Midterm/Part 2/Part2
Friday, February 25, 2011
Midterm Part 2 - Megan McFadden
A: I really like how putting the images into the website made it feel more complete. I added an image header because I hated the plain heading text that was up there, I think it adds more character this way. The other images I added help the viewer see what an Australian Shepherd Looks like and how they behave.
B: I only had trouble trying to figure out how to center an image. With some research, I found that you need to use "text-align: center;" in your CSS to center the image.
C: I really liked learning about the box model. Once I understood how it worked, I figured out that by doing some simple math I was able to get the padding to work in my main content areas without having my content shift all over the place. It is nice having text that is not touching the border.
D: I couldn't really figure out where an hr tag would be useful on my site, so I placed it below the h2 tags in my main content area. I think it helps to separate the content a little bit better.
E: I honestly don't like the way my navigation looks. I'm excited to add images as my navigation to give it a bit more character and hopefully it will make it look less boxy.
F: Link to my website
B: I only had trouble trying to figure out how to center an image. With some research, I found that you need to use "text-align: center;" in your CSS to center the image.
C: I really liked learning about the box model. Once I understood how it worked, I figured out that by doing some simple math I was able to get the padding to work in my main content areas without having my content shift all over the place. It is nice having text that is not touching the border.
D: I couldn't really figure out where an hr tag would be useful on my site, so I placed it below the h2 tags in my main content area. I think it helps to separate the content a little bit better.
E: I honestly don't like the way my navigation looks. I'm excited to add images as my navigation to give it a bit more character and hopefully it will make it look less boxy.
F: Link to my website
Midterm Part 2 - Amy Petit
A) I used the images to convey the feeling of fresh ingredients and the area that these recipes come from. I tried to use them sparingly and in the places that they would have the most impact (i.e. the page header & tops of pages).
B) I was challenged in figuring out how to center and size the images appropriately without them wrapping to the next line. When I first placed the images they were stretched out of proportion and it took a little digging to realize that I had applied a value to "img" and used it in my header. I created separate classes for the header and the page pictures and that allowed the images to display correctly.
C) The box model helped in spacing the photos & navigation images and creating the spaces between the border and content.
D) I used the"hr" tag to separate the recipes and region areas. It really helped to visually break up the information in smaller areas and add to the readability of the site.
E) I think the addition of an image makes the navigation stand out more. I would like to understand how to swap the image as a rollover to make it even more visually effective. By using the "alt" text to describe the navigation it also adds to the accessibility.
F) Here is the link to my revised site:
http://sws.pcc.edu/student/CAS206_pdeangel_13645/amypetit41/Midterm/Part2/index.html
B) I was challenged in figuring out how to center and size the images appropriately without them wrapping to the next line. When I first placed the images they were stretched out of proportion and it took a little digging to realize that I had applied a value to "img" and used it in my header. I created separate classes for the header and the page pictures and that allowed the images to display correctly.
C) The box model helped in spacing the photos & navigation images and creating the spaces between the border and content.
D) I used the"hr" tag to separate the recipes and region areas. It really helped to visually break up the information in smaller areas and add to the readability of the site.
E) I think the addition of an image makes the navigation stand out more. I would like to understand how to swap the image as a rollover to make it even more visually effective. By using the "alt" text to describe the navigation it also adds to the accessibility.
F) Here is the link to my revised site:
http://sws.pcc.edu/student/CAS206_pdeangel_13645/amypetit41/Midterm/Part2/index.html
Midterm/ part deux
a. How did your images contribute to your website? What purpose did they serve?
On the home page, I chose a photo for its odd/ unexpected value relative to the subject, something that would naturally catch someone curiosity and draw them to look closer at the site. Other images used helped to illustrate the game board, pieces and strategies.
b. What challenges did you experience in displaying your images properly on your web page?
I was unhappy with the space surrounding the images, but didn't know how to address it until I learned about the box model. I was able to change 2 of the illustration-style images to gifs in order to make the files smaller. I also reduced the size of the home page photo.
c. How did understanding the box model assist you creating borders, padding and margins around your images?
The padding and border selectors/ declarations helped dress up the photos, as well as tie in colors used elsewhere in the site. The margins helped deal with spacing around the images that did not look good prior to tweaking with the margin control.
d. How does the placement of your hr tag assist users of your website?
It helps to break up the vertical space into "bite-size" visual chunks, which are easier on the eyes and mind to deal with.
e. How did the enhancements to your navigation improve your web site?
Using the box model for the nav tags in the CSS helped style the nav buttons into shapes and added visual cues that functioned as the user would expect them to. Easy navigation is a high priority for making the user's stay a pleasant one.
f. Add a link to your web site within your blog posting
Well, here ya go: it's about Scrabble
On the home page, I chose a photo for its odd/ unexpected value relative to the subject, something that would naturally catch someone curiosity and draw them to look closer at the site. Other images used helped to illustrate the game board, pieces and strategies.
b. What challenges did you experience in displaying your images properly on your web page?
I was unhappy with the space surrounding the images, but didn't know how to address it until I learned about the box model. I was able to change 2 of the illustration-style images to gifs in order to make the files smaller. I also reduced the size of the home page photo.
c. How did understanding the box model assist you creating borders, padding and margins around your images?
The padding and border selectors/ declarations helped dress up the photos, as well as tie in colors used elsewhere in the site. The margins helped deal with spacing around the images that did not look good prior to tweaking with the margin control.
d. How does the placement of your hr tag assist users of your website?
It helps to break up the vertical space into "bite-size" visual chunks, which are easier on the eyes and mind to deal with.
e. How did the enhancements to your navigation improve your web site?
Using the box model for the nav tags in the CSS helped style the nav buttons into shapes and added visual cues that functioned as the user would expect them to. Easy navigation is a high priority for making the user's stay a pleasant one.
f. Add a link to your web site within your blog posting
Well, here ya go: it's about Scrabble
Thursday, February 24, 2011
David peterson Midterm part 2
A.) my images contributed quite well for my web site do to the fact they helped me be able to give a visual reference to my viewers to compare between the different style consoles that are available for sale.
B.) In my attempts to create my images to properly display on my webpage unfortunately fell into some problems with dealing with the table I originally had up on my website. So I decided to destroy the table I had originally and to remake the entire pieces contents. This way I gave a overall better picture quality and reference to each picture and webpage.
C.) it allow me to be able to better understand how creating box models really works as well as the padding and margins because without understanding them and makes you feel quite lost I admit I still wish I knew more about them but I think I understand the basic concepts and have applied them.
D.) it has allowed for an overall better look and style for my contact page in allowing people to get the information that they need to be able to help with contact info as compared to a jumbled mess of paragraphs with just the
B.) In my attempts to create my images to properly display on my webpage unfortunately fell into some problems with dealing with the table I originally had up on my website. So I decided to destroy the table I had originally and to remake the entire pieces contents. This way I gave a overall better picture quality and reference to each picture and webpage.
C.) it allow me to be able to better understand how creating box models really works as well as the padding and margins because without understanding them and makes you feel quite lost I admit I still wish I knew more about them but I think I understand the basic concepts and have applied them.
D.) it has allowed for an overall better look and style for my contact page in allowing people to get the information that they need to be able to help with contact info as compared to a jumbled mess of paragraphs with just the
tags.
E.) he gave a better over all look and feel to the website as well as increased visibility for those impaired and easier accessibility for all due to the boxlike style shapes for the links.
F.) http://sws.pcc.edu/student/CAS206_pdeangel_13645/davidpeterson67/Midterm/Part2/menu.html
Wednesday, February 23, 2011
Midterm Part 1
a. What worked well?
Having the blank sheet to work with really helped start me off. I used the practice css and html to help make a checklist of things that needed to be included in the site.
b. Who is your target audience? What design choices did choose to attract your audience to your site?
My target audience is any level drummer and those interested in info about drumming. I chose a simple color scheme that I think I may simplify even more, to give the website a basic feel.
c. What browsers did you test in? What differences did you see?
I tested in IE and Firefox. I noticed firefox occasionally shifted things a little which is still unresolved.
d. What troubleshooting did you experience?
I had to get the embedded videos centered which took a few tries, and I also had to space out the text and add a wrapper.
e. Describe your validating experience.
Unfortunately I didn't validate prior to making a few final changes which came to include quite a few validation errors. Before making changes the website validated fine in both XHTML and CSS.
f. What best practices discussed in class assisted in your productivity.
making class and id selectors really helped me out. span classes were helpful
g. http://sws.pcc.edu/student/CAS206_pdeangel_13645/nathanpogue11/midterm/part1/
Having the blank sheet to work with really helped start me off. I used the practice css and html to help make a checklist of things that needed to be included in the site.
b. Who is your target audience? What design choices did choose to attract your audience to your site?
My target audience is any level drummer and those interested in info about drumming. I chose a simple color scheme that I think I may simplify even more, to give the website a basic feel.
c. What browsers did you test in? What differences did you see?
I tested in IE and Firefox. I noticed firefox occasionally shifted things a little which is still unresolved.
d. What troubleshooting did you experience?
I had to get the embedded videos centered which took a few tries, and I also had to space out the text and add a wrapper.
e. Describe your validating experience.
Unfortunately I didn't validate prior to making a few final changes which came to include quite a few validation errors. Before making changes the website validated fine in both XHTML and CSS.
f. What best practices discussed in class assisted in your productivity.
making class and id selectors really helped me out. span classes were helpful
g. http://sws.pcc.edu/student/CAS206_pdeangel_13645/nathanpogue11/midterm/part1/
Midterm Part 1-Jane Ghorashi
a.What worked well.?
Our practice code we had written was very helpful. I had a hard time choosing colors.
b.Who is your target audience?
My target audience are people who likes to eat out
c. What browser did you test in? What differences did you see?
I tested firefox and internet explorer. I did not see any differences in both browser.
d.What troubleshooting did you experience?
Navigation and centering was one of my main issue and I tried to put some images but I cannot center or position my images.
e. Describe your validating experience.
I have no problem with validating.
f. What best practice discussed in class assisted in your productivity?
Make it simple and organized.
Saturday, February 19, 2011
Midterm Part One
6. Journal your learning experience
a. What worked well?
Well, I'm not sure wh
b. Who is your target audience? What design choices did choose to attract your audience to your site?
My target audience would be people who have an interest in learning more about astrology and would like a brief introduction. I feel like astrology triggers more earthy colors, so I chose browns and reds and colors found in nature. I wanted the site to be warm and inviting.
c. What browsers did you test in? What differences did you see?
I tested in firefox, opera, and internet explorer. I noticed in opera that my page on signs got a little bit weird on the spacing. I'm not sure why that was since it stayed normal in both explorer and firefox.
d. What troubleshooting did you experience?
It's hard for me to recall what troubleshooting errors I encountered. I think I just had a couple of open tags here and there that validating helped me to find and fix.
e. Describe your validating experience.
Validating was very easy and helpful. I like that it gives you the exact line number to reference.
f. What best practices discussed in class assisted in your productivity.
I think the ones that I focused on the most were making sure the navigation was easy to find, and keeping my text broken up and spaced out so as not to appear overwhelming.
a. What worked well?
Well, I'm not sure wh
b. Who is your target audience? What design choices did choose to attract your audience to your site?
My target audience would be people who have an interest in learning more about astrology and would like a brief introduction. I feel like astrology triggers more earthy colors, so I chose browns and reds and colors found in nature. I wanted the site to be warm and inviting.
c. What browsers did you test in? What differences did you see?
I tested in firefox, opera, and internet explorer. I noticed in opera that my page on signs got a little bit weird on the spacing. I'm not sure why that was since it stayed normal in both explorer and firefox.
d. What troubleshooting did you experience?
It's hard for me to recall what troubleshooting errors I encountered. I think I just had a couple of open tags here and there that validating helped me to find and fix.
e. Describe your validating experience.
Validating was very easy and helpful. I like that it gives you the exact line number to reference.
f. What best practices discussed in class assisted in your productivity.
I think the ones that I focused on the most were making sure the navigation was easy to find, and keeping my text broken up and spaced out so as not to appear overwhelming.
Part One Midterm
a. What worked well?
I was very happy with how the color scheme worked, I worked and finished it before I had done much of anything else. I didn't like trying to get the text to align the way I wanted to. So I ended up changing it.
b. Who is your target audience? What design choices did choose to attract your audience to
your site?
My target audience is my Boyfriend, Caleb. I chose these colors cause they simply have been our color scheme pretty much our whole relationship.
c. What browsers did you test in? What differences did you see?
I tested in Chrome, Firefox, and Explorer. I didn't see much of a difference in any of them.
d. What troubleshooting did you experience?
The text, was a big issue, plus I've had trouble with the one image. I can't figure our how to center it either
e. Describe your validating experience.
Validated with no problem ^^
f. What best practices discussed in class assisted in your productivity.
The way the code should look.
Midterm Part 1: Andrew Vernon
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
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
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)