Walrus Final Project

a) My target audience are hipster-tourists who like San Francisco. Also anyone interested in the quake and a bit of history. Noel Gallagher and Oasis fans will probably find the page as well due to my concert content.

b) I planted keywords into the site, in meta and in my general story...and just enough details about events and people for bots to pick up on things. I didn't have to mention the members of Noel's new band, but if somebody google's their names, my site may come up. Directly linking to youtube videos of Noel's songs in my table probably helps as well. I linked to Noel's official homepage, which www.linkpopularity.com says has over 55,000 associated links. I added my own youtube videos which I uploaded myself...and i was sure to use lots of tags on youtube itself so people find it. I think I covered my bases.

c) I flunked out on the contrast for readability at first. I went to kuler and made up a custom color scheme. That helped quite a bit. Still, my nav buttons ended up being too dark. I thought it would be simple to use dark text with a white drop-shadow behind them, but I hit a roadblock there.

Adobe's browser tester let me know that IE9 doesn't show drop shadows. Period. It looked great in Firefox, and chrome only! I re-did my test in the nav area to be lighter, and it worked out alright after much trial and error.

My Mom gave it a looking-over, and pronounced it good and "senior-proof." She's never been able to program a VCR, bless her heart, so I feel it's probably easy enough to navigate for anyone.

d) Nothing really validates thanks to my use of drop shadows and video embed code. It does look great in many browsers though, so I am confident that it is "done right."

I experienced extreme frustration with youtube yesterday. My computer was having it's own technical issues, so when youtube randomly stopped generating link codes and embed codes, I assumed the problem was with me!

I restarted, updated flash, troubleshooted and generally wasted a good many hours trying to make my browser generate youtube code again. Only after a long while did youtube finally start generating pop-up notifications in the comment section that some services were "unavailable" did I realize it was them the whole time! >< I was right in the middle of uploading videos too, which all had to be re-done.


e) I think my images help my site to be greatly more interesting than if it was just text. In fact I'm sure it would be really boring without the images. I'm a pretty sappy romantic writer, so anybody rolling their eyes at that at least has some images to make up for it. :P

I configured still images that were small to have a green border that matched my scheme. Videos had blue. These colors are used elsewhere in the site as well and repeat.

I threw out the border and went extra-wide for some of my best shots, and placed them all in the same place at the bottom. I feel it coaxes "skimmers" who aren't really reading my content anyway to at least look at the images at the bottom, if they know they are down there on every page. Hopefully then some of my more interesting headlines grab their attention.

f) I used high-contrast for my table. White background and dark text. But not too dark, I softened it up a bit with mauve instead of a glaring-red. I kept the font simple, although I really was tempted to use Wingdings. Just kidding. :P

g) I think my media really helps my page to be interesting. I took hi-def video, which is the standard these days. I kept it short and interesting. Rare historical footage I threw in there. Excellent concert coverage with good sound. I don't think anybody needs any plugins to view it, other than perhaps flash. Using the newer code means there's no more annoying popup window. In fact the old embed code gave my computer seizures so I had to change it, wether I liked it or not.

I hope you guys like my site, it's been a good fun class. I learned a lot.
(If my site doesn't appear right away give it a little time. My media has been uploading for more than an hour now.)

Catch you on the flip side:

My San Francisco Travel Journal Page

Scholz - Final

Final

Who is your target audience? Please respond to the required questions found in the Design and Planning section.

My target audience is people who are interested in legends and myth. Specifically legendary locations. I opted for calming earthy colors with my banner being a sandstone color with blue lettering to go with the blues and greens found throughout the rest of the site. I have more images of Atlantis than anything else on the site so I figured a blue/green color combination would work out well. As an added bonus the color scheme is soothing on the eyes so it's much more relaxing to read it.

Discuss your SEO planning and integration. Please discuss how you integrated the requirements stated under the SEO section.

I started out with figuring the combination of keywords I wanted to use. While Atlantis has a bunch of hits some of my other keywords...not so much. I checked them out with google adwords. The site name I used is already taken regrettably so I'd have to change it to may legendarylands.org the .com is just an empty page with a promise of maybe doing something with the domain in the future (lol). I duplicated the keywords used in my headers and via some of the links I used to make the site a bit more crawlable. The images I used I used the individual cities/countries that they represented. All of my images are creative commons images with several of them completely open content because of the original publication date.

Discuss your Testing experience. Please include Accessibility, Browser, and Usability testing.

Cythiasays likes my page. All of my images have alt text but I ran into some problems checking my page out in other browsers. Originally my firefox beta version hated the page so I had to uninstall it and install a non beta version. Then the default for the browser was no images loading which actually helped me confirm that all my alt text was there. I got it up and running though. Usability testing was done by a couple of my friends. Most of them checked it in Chrome but after asking them they checked it in other browsers as did I. IE, Firefox, Safari, Chrome.

Describe your validating experience. What troubleshooting did you experience?

I did run into problems with my breadcrumbs so I had to modify the code a bit to make it validate correctly. As is always the case. My rich media videos do not validate in xhtml strict.

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 are designed to invoke wonder and curiosity which is really what legendary places are all about. It makes people curious. The colors found in the pictures are also reflected on the color scheme of the site. They balance well with each other which makes the pages flow better.

What style choices did you make to improve the readability of your table?

In my case I just used the table to contain a gallery of pictures as I couldn't think of the right kind of information to compare within it. I did run into some functionality issues with my form in firefox and IE while it displayed fine in chrome. I looked through the code and couldn't figure out what was causing the issue so I placed the contact form within a table to format the data better and actually it looks pretty nice.

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 video I used is a perfect example of the endless documentaries that can be found on the history channel, history international, national geographic, and the science channel. I should know, I always DVR them. lol As with all youtube embedded videos they require a flash plug in which all up to date browsers have.

Final

a. Who is your target audience?

My audience is a family of a 6 year old child. I expect for it to be used as a way to teach the child that there are consequences to ones carelessness. The family need to have an interest on the Brother Grimm's Stories. I hope that some Grimm viewers will catch a glimpse and show it to their children.

b. Discuss your SEO planning and integration. Please discuss how you integrated the requirements stated under the SEO Section.

Well I planed and integrated the SEO section of the assignment by using the help of Gloogle Adwords in order to get the best words in for the meta tags. As far as content, it is pretty straight forward because the website tells the story of Little Red Riding Hood. Links are related to get back at me the designer as well as links to the story I based the website on.

c. Discuss your Testing experience.

It seems to be accessible in the the following browsers tested Firefox, Google chrome, safari. It works well on both Mac OsX and Windows platforms. For usability testing my husband and mother were able to navigate through it with easy no complaints there .

d. Describe your validating experience. What troubleshooting did you experience?

It went smoothly the media incorporation was the hardest. Finding an appropriate piece to put in. I ran into some trouble with the images being too big, so had to re-size them.

Also, due to the iFrame used to insert the YouTube video, the index.html page does not validate completely. The iFrame presents the only validation issue on the site.

e. How did the images you use contribute to your website’s purpose? Did your CSS style add to the “siteness” of your website?

I think the images add an element that appeals to the children and the CSS along with a table layout helped my website look more professional.

f. What style choices did you make to improve the readability of your table?

I used images, kept it clean with a thin border and used as a small image gallery.

g. How did the media you created contribute to the purpose of your website? What plug-ins does the end user need to display-play?

It looks good just got it from YouTube and paste it into the page. I believe flash and Quicktime

h. Add a link to your web site within your blog posting

Final

Website Final

Hello class:

It was a fun term. I enjoyed taking the class. I hope to see you in another class.
Journal:
a. My target audience for my website is school age kids from age 8 or older. I tried to appeal to my audience by providing more colorful borders and headings as opposed to pastels, earth tones, or greys. I also used a fun fantasy font called Papyrus for the headings that I thought seemed more fun to incite interest. The menu buttons are decorative with feet print to make the buttons pop out more and provide a dinosaur theme to the site. When the buttons are rolled over the feet print have a inner drop shadow to appear as though the feet print are making an impression on the button. I also added a little section called "Fun Facts" that provides tidbits about dinosaurs with a cartoon graphic to appeal to the younger crowd.

b. The SEO planning I used was to include relevant words as best I could into the header tags and links. The meta tags use keywords that are the most common words throughout my site. I also checked the words in Google Adwords to make sure the words I used are the best. All of my words have a low competition rating. Also, I have links are to popular websites related to the subject matter of my site. I checked the website for the American Museum of Natural History at linkpopularity.com and it is a very popular website and is well traveled. It should help my search ranking because they have a lot of content about dinosaurs.

c. I checked with the colour contrast tool to fix issues with contrast. I checked the site with cynthiasays.com and passed my accessibility with alt tags. I tested my site in firefox, safari, IE, and chrome. I checked it in browser lab, but it show safari layout all messed up so I double checked it in a live safari browser and it appeared okay in all browsers tested.

My tester's name is Valarie. She said she liked the fun facts at the top of the page because it caught her attention. She suggested to move the fun fast section lower in the page, but I couldn't think of an efficient way to do that because my content would be shoved below the fold, so I kept it there. She also advised for me to move a link on my trivia page because the link was at the bottom as was unnoticeable. So now I have it above the media content where it's more visible. Also, she noticed my font on my heading was different on the first page and didn't seem to match the rest of the site, so I changed the layout and color to make it uniform.

d. I validated my html and css. Everything passed except for the embed tag I had to use for the media file linked from Youtube. I tried an iframe tag originally, but it wouldn't play in IE so I had to use the embed and param tags, but the param tags don't validate.

e. I used images that were directly related to the information they were arranged by. The box model made the images appear more finished and uniform.

f. I changed the font color to white because the background are different colors and provided a border between cells. I collapsed the table to show a clean separation between cells.

g. The media needs a flashplayer plugin. The media is from youtube and it provides a fun example of how dinosaurs are in movies. It captures the attention of the user.

h. http://sws.pcc.edu/student/CAS206_pdeangel_43493/byronstine50/final/index.html

This was a fun website to make. I didn't think I would enjoy the testing phase, but I received a lot of feedback and neat ideas.

Jorgine Agasa - Final

a. Who is your target audience? Please respond to the required questions found in the
Design & Planning Section.
My target audience is anybody who is looking for a freelance illustrator for their projects I think. I want to be able to showcase work to a large variety of people so despite the urges, the garish colors were kept to a minimum.

The site should help the user focus on the art. So aside from some lime green peppered throughout the site, it's a pretty basic grey and white color scheme.

The color scheme:
grey: #303030
lime green: #40e749
white: #ffffff

b. Discuss your SEO planning and integration. Please discuss how you integrated the
requirements stated under the SEO Section.
Like everyone else, used alt and meta tagging with a few links here and there.

c. Discuss your Testing experience. Please include Accessibility, Browser, and Usability
testing.
Patty, I think you had some issues about why there was a link to the homepage on the header despite it looking the same as the illustration page, but I believe it is kind of good to at least have the original index in there somewhere. The roomie and her sister tried it out and they didn't seem to have any problems finding anything, or at least didn't really mention any. They said a title would help out somewhere so I have to think of something for those.

d. Describe your validating experience. What troubleshooting did you experience?
Aaa this was a nightmare! The site didn't even register on the school computers and just the accumulation of minuscule problems made it into one giant headache. The header wasn't the right proportion, parts of the images weren't bleeding over, the links wouldn't overlay, the buttons would still register even though they weren't part of the coding, the list goes on. Eventually everybody helped out and Patty was gracious enough to let me keep the links as text instead of using image buttons if I changed them enough.

Speaking of which, the CSS is not completely validated since text shadows are part of CSS 3 and the youtube embedding is making the validation freak out, as it normally does, but it is functional. Other than that everything else should be fine...? At least it is on this computer.

e. How did the images you use contribute to your website’s purpose? Did your CSS style add to the “siteness” of your website?
This site was all about the images. This is basically a portfolio website to help showcase illustrations. Basically every single image has a class or ID selector on it.

f. What style choices did you make to improve the readability of your table?
The table is basically a sidebar full of thumbnails, that acts as a secondary navigation for the site. They're large enough to display the some of the illustration that each box is linking to but not so large they'll take up the rest of the screen.

g. How did the media you created contribute to the purpose of your website? What plugins does the end user need to display-play?
Not much other than to exhibit exuberance of getting emails, particularly regarding commission work. Also that I really like that video, it cracks me up every time. Originally was gonna use an animation reel but I haven't done anything worth showing or allowed to show in many, many, many years. Yikes!

h. Add a link to your web site within your blog posting

Jo's Illustration Site

Shakif's Final

Testing
 All Testing requirements must be discussed in your blog posting.

1. Usability overview
i. Describe how you designed your site to enhance the user experience
I changed the wrapper a lot for each page to enhance the organization of the page.

ii. Have one other person test your site
Yes I picked someone who isn't well using the web which is my mother.

b. On your blog posting: add the person’s first name and at least four
comments that this individual said about your website
Mother's comments
-Organized
-Interesting
-Colors easy to read on text
-Career page too much information squeezed in.

2. On your blog posting, please state if you integrated these comments to
your website. Why or why not?
a. Test in Adobe Browser Lab
i. List the three browsers you used
Firefox and few different versions of IE
ii. What differences to you observe?
That the margins we're shifted different.
iii. What changes did you make to your web page after testing browser in browser

Fixed the margins with align on the css.


Blog Posting
a. Who is your target audience? Please respond to the required questions found in the
Design & Planning Section.
My target audience we're sports fan around the Portland area that are interested on reading more about Brandon Roy's life and career, much like a biography.
My primary color's we're #000000,#FFFFFF,##880000 and #0000A0.

b. Discuss your SEO planning and integration. Please discuss how you integrated the
requirements stated under the SEO Section.
Planning was very simple and I used alt and meta tagging.

c. Discuss your Testing experience.  Please include Accessibility, Browser, and Usability
testing.
Unlike my midterm, I had less errors and more usability coding wise that made my website more organized for the readers.

d. Describe your validating experience.  What troubleshooting did you experience?
Some troubleshooting experience i went through was involving the media with the re-sizing with the video.

e. How did the images you use contribute to your website’s purpose? Did your CSS style
add to the “siteness” of your website?
Well I used over the years of Brandon Roy like young ages, high school, college and nba and the purpose was for the viewers who he was.

f. What style choices did you make to improve the readability of your table?
The table I used as a stats table to read over the years what he average in basketball.

g. How did the media you created contribute to the purpose of your website? What plugins does the end user need to display-play?
I added a tribute to Brandon Roy as a link underneath career page and the purpose was just entertain the audience with a well done video.

h. Add a link to your web site within your blog posting
http://sws.pcc.edu/student/CAS206_pdeangel_43493/shakifdowllah01/Final/homepage.html

Josh Landis - Final

a. Who is your target audience? Please respond to the required questions found in the Design & Planning Section.
- My target audience is people who wish to participate in product testing/wish to become a human test subject. Well that and portal fans.
-My primary color scheme was #45BBED #000000 #ffffff #45BAEF
I pretty much borrowed the logo's color scheme along with companion cube's color scheme for the cube page.

b. Discuss your SEO planning and integration. Please discuss how you integrated the requirements stated under the SEO Section.
-i used meta tags, alt tags and relevant headings

c. Discuss your Testing experience. Please include Accessibility, Browser, and Usability testing.
- Testing actualy went pretty well. Displayed properly in all browsers. No complaints during my usability testing with my test subject takusaurus, The media page took about 1.5 seconds to load but it is a media page with 2 videos so i think its pretty safe to say that one was unavoidable.

d. Describe your validating experience. What troubleshooting did you experience?
- Oddly enough it went pretty well. My only issue was one css3 related error.

e. How did the images you use contribute to your website’s purpose? Did your CSS style add to the “siteness” of your website?
- Well the images helped to show examples of products developed by aperture science.

f. What style choices did you make to improve the readability of your table?
-font size

g. 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 fun addition. The first video was a great example of what test subjects may experience during their time at the enrichment center and the second was a great ad for the turrets. (to bad we cant really buy one...... oh well....)

h. Add a link to your web site within your blog posting
Click Here!

ps- My site planning is stored in my final folder.

Yasha Poursafar - Final

Who is your target audience? Please respond to the required questions found in the Design & Planning Section.

My intention was to target people who know me: mostly my friends and family who are between the ages of 18-55 and know English as their second language.

I have included four characteristics in my website that I thought best targets my audience:

1. My color-theme includes three colors of our flag which are green, white and red.

2. Based on my experience working with Iranian people, I noticed that it's more convenient to use links on the right or the top of the page because of the way we read and write.

3. Our arts and crafts includes very ornamental, oriental, and curvy elements, so I wanted to use a typeface that has serif like Georgia.

4. I included pictures that represent Iranian food and Iranian rug that I thought would attract my audience attention.

Discuss your SEO planning and integration. Please discuss how you integrated the requirements stated under the SEO Section.

On all my pages I included meta keywords, content, table, description, image, audio, and also video text descriptions that would best integrates what my website is all about.

Discuss your Testing experience. Please include Accessibility, Browser, and Usability testing.

I tested my website in three different browsers: Firefox, Internet Explorer, and Opera. The only challenge I have is with Internet Explorer, for some reason some of my elements like audio and video don't show or work properly as they should.

Describe your validating experience. What troubleshooting did you experience?

My index.html validates but the rest of my pages don't. I get several errors for my audio, video, and form but they work correctly. (I believe we encountered these same errors in the class before)

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 added class styles to all my images in my pages to make them look more attractive and it helped me achieve my goal. The CSS styles helped me design my images in a way that they contribute better to the rest of my page elements.

What style choices did you make to improve the readability of your table?

I used properties such as background-color, border and text-styles such as thickness and color to improve the readability of my table.

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 included a video-clip (from youtube) that shows and explains how to make one of my favorite foods which was one of the purposes of my website.

Here is the list of my color codes:

skin: #F2C48D

gray: #7A7F79
red: #A60303
dark-red: #590202
dirty-green: #906E31
green: #A1B884
yellow: #F2C849
purple: #675978
blue: #297CB3
Flag-green: #239E46
Flag-red: #BE0027

Useability and accessibility:

I had my boyfriend (Siamak) and his boss, both Iranian-American, who owns a car-dealership in City of Cornelius check the useability and accessibility of my website and they were both happy with the results, but they also said that it would be visually more appealing if I added an ornamental piece to my header which I did with use of Adobe Illustrator. Siamak also mentioned that I should add a Reset button to make my form look more official. I originally had my main links background as grey and Siamak suggested that I should make that blue to make my links more visible and readable. He also suggested that I should add the picture of Persian Rug to my music page to give my page more feeling and color.

Yasha's Final Website

Midterm - Part 3

a. In what way did your table display data easier for your users to view?
-It helped with image spacing for my links.

b. What style choices did you make to improve the readability of your table?
-Background, borders, padding.

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?
- Well my media was really just something fun to watch and somewhat went along with the overall theme of my website. The end user will need flash installed to view my media,

Click Here!

Midterm Part 3

a) My tables make it easy to find the names of passengers and crew, or simply to find out the name of a person according to his station (First Mate, boatswain, etc.) The tables had a side-effect of emotional impact when I decided to include an "X" near the names of those who died on the voyage.

b) I found that a left-side rowspan helped to improve readability. In fact if I wanted to remove the titles for the tables I could, so long as one big cell on the left indicated what the table was about. (IE crew list, list of company executives, list of artisans.) Lightening the background color helped readability as well.

c) I was surprised to find a short video about the ship on Youtube: it just appeared there on November 14th. It has an interview with the great-great grandson of the chieftan whose insult sparked a bloody mass-murder. Hearing oral history from the Indian's point of view was refreshing and interesting...and yet chilling too. The video has emotional impact and historical importance.

The audio clip of the sea chantey lightens up the site: it's a very dark story about the ship's loss.
I didn't have to download any plugin when I viewed it with Firefox 4, and IE9 just doesn't play it. (I used MP3 and OGG.) Boat Browser mini (for android) doesn't play it either, so I linked back to the same song on youtube so it can be heard by anyone with a browser issue.

Link to The Doomed Voyage of the Tonquin

Midterm part3

a. In what way did your table display data easier for your users to view?
It showed a clear picture of the product that it is to be sold.
b. What style choices did you make to improve the readability of your table?
Kept it simple but made sure the pictures stood out.
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?
Will add it later.
d. Add a link to your web site within your blog posting
Christmas Trees

Midterm part 3

a. In what way did your table display data easier for your users to view?

It made things organize and easy for the reader/audience to see my stats on basketball players.

b. What style choices did you make to improve the readability of your table?

I did a lot color changing and unbolding some words for the readability in the tables.

c. How did the media you created contribute to the purpose of your website? What plugins does the end user need to display-play?

Well on my page, I talked about Brandon Roy and the cons and pros of him, in the end I got the link from youtube of the amazing comeback he did against the Dallas Mavericks in the NBA playoff's. 

d. Add a link to your web site within your blog posting.

Coming soon

Midterm - Part 3 Tables and Media

The tables displayed complex information in one organized area. Instead of the user reading the information, they can find a summary of information in a table. I kept the formatting of the main content of table simple and consistent. The header of the table was in a different color and border to show that it is a header.

For the media, I selected a YouTube clip from the Occupy Portland movement. It is somewhat counter intuitive for the purpose of the site, but I could not resist including it. It is a rating website of banks so it a little relevant. The audio is of change jingling. I found it difficult to incorporate a relevant sound bite into my site.

There are no plug-ins needed for the YouTube file as it is embedded from the YouTube site. There are no plug-ins needed for the audio file. Although I think you will need a video/audio application of some sort installed on your computer or else they won't play.

Home Page: http://sws.pcc.edu/student/CAS206_pdeangel_43493/byronstine50/midterm/part3/index.html

Media/Table Page: http://sws.pcc.edu/student/CAS206_pdeangel_43493/byronstine50/midterm/part3/compare.html

Gregory Scholz - Mid-term part 3

Mid-Term

In what way did your table display data easier for your users to view?

The table made it easier for the user to review the comparisons between the Ninja and Pirates. It was better organized in table form.

What style choices did you make to improve the readability of your table?

I used a background color of black for the headings with white print so the names contrasted better as well as using a red border to make the table standout on the page.

How did the media you created contribute to the purpose of your website? What plugins does the end user need to display-play?

Well, as the Ninja vs. Pirates debacle is comedy I decided to share "ask a ninja's" review of Pirates of the Caribbean 3 as I felt it would be appropriate. Both of my media examples use flash player to display their content.

Yasha Poursafar-Midterm Part3

In what way did your table display data easier for your users to view?

The table made my data more organized and visually easier to read and follow.

What style choices did you make to improve the readability of your table?

I styled my table to have a more readable rows, heads, text-font, size, spacing, margin and color properties.

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/video that I chose is an Iranian music video of one of my favorite artists, which you can also find in the links that I have provided on my web-site's Links page.

Check out my "Music of Iran" web-site

How did your images contribute to your website? What purpose did they serve?

The images that I chose for my personal web-site are to represent the subject matter which is the Music of Iran, so my pictures show variety of different traditional Iranian musical instruments and scenes from different types of concerts and their choice of color-theme for their costumes.

What challenges did you experience in displaying your images properly on your web page?

My challenge was to place or position my images exactly where I wanted them to on my pages according to Padding or Margin properties.

How did understanding the box model assist you creating borders, padding and margins around your images?

It helped me have a better understanding of when and where to use the right padding, margins or borders for my images on different pages.

How does the placement of your hr tag assist users of your website?

I only used my hr tags for separation of my different types of Iranian music on my Genres page, so my viewers could understand and read them easier.

How did the enhancements to your navigation improve your web site?

I believe it helped me make my navigation links a little more visibly attractive and readable to my viewers.

Check out my "Music of Iran" Web-site(Part2)

Midterm Part 2!

Click here!

Images helped my site significantly since its primarily a image gallery and that allowed me to add actual content rather then place holders like i had before. The only real issue i had was with positioning but i was able to resolve most of it. I also tried to make a rollover navigation with css but unfortunately that didn't really work out in the end so i had to switch it back to a single state navigation. The box model was helpful and im pretty sure i removed most of my hr tags. I also added a browser selection screen to improve viewing quality.

Mid Term Part 2

Mid Term Part 2

I totally forgot to post it up here after uploading it to the server. Good thing I decided to check my reader before going to bed!

How did your images contribute to your website? What purpose do they serve?

I think having images actually broke up and helped direct my text a bit better. It gave my users something to look at besides just text.

What challenges did you experience in displaying your images properly on your web page?

My biggest hurdle besides re-sizing the images so that they were the appropriate size was figuring out the spacing I needed and making sure that the overall presentation was appealing with balance to the text which meant I had to add lots of line breaks to get my horizontal line where I needed it.

How did understanding the box model assist you creating borders, padding and margins around your images?

For me the padding and borders was a no brainer, it was working with the margins that was tricky. Lots of tinkering around. I'm really glad I have dual monitors. One for komodo and one for chrome so I can pretty much instantly see the differences my changes made.

How did the enhancements to your navigation improve your web site?

Adding buttons gave it more of an interactive experience. For the life of me I couldn't remember how to make the buttons pop out like the examples we made for class practice so I tried to throw another textured effect onto it but wasn't successful. Photoshop next term will be super helpful.

link didn't work too well here it is again

Christmas Trees Sorry about this the interface was changed. Just figured out. Sorry Everyone. Lakshmi

midterm part2

a. How did your images contribute to your website? What purpose did they serve?
It added a bit more meaning. I plan to add more eventually.
b. What challenges did you experience in displaying your images properly on your web page?
Figuring out the placement and clearing out the float attribute, so that the wrapper would go past it.
c. How did understanding the box model assist you creating borders, padding and margins around your images?
It helped me become aware of the space around the images like the text and the other images. If placed in the wrong part of the code or too high of a number, it would take too much space.
d. How did the enhancements to your navigation improve your web site?
It made them bolder. It is easy to tell they are the navigation.
e. Add a link to your web site within your blog posting

Christmas Trees: http://sws.pcc.edu/student/CAS206_pdeangel_43493/lakshmistrom46/midterm/part2/

Midterm - Images Added

My website is about comparing different banks. I added images and logos of the banks. This is to help the user of the website visually associate the information they are reading.

The most challenging in displaying my images were they would mess up the layout of the content that followed it. A common issue was the horizontal that I had already on the page would then get overlapped by the image. Therefore, I had to increase the margin-top of my horizontal rules, so they nudged down on my page past the picture and not be overlapped by it.

The box model helped greatly! I was able to place my images without them being pressed against the edge of the wrapper. Also, I was able to put a decorative frame around the image to go with the theme of the site.

The additions of the buttons add depth to the page. They help the navigation "pop" out.
Please visit my site at: Bank Now!

Mid-term part 2

A. My images really helped audience target which player i'm talking about, including on a page I was talking on Brandon Roy like for people who aren't big fans of the Blazers know who i'm talking about with his image.

B. I had a difficult time with the borders, I would fix the padding and everything and didn't fix anything. Probably need go over in class on what I did wrong with the padding.

C. The box model, I had problems with and need cover some details on my mistakes with the framing it.

D. The hr tag worked fine on my site, no problems.

E.Fixed all my navigation and made things it all organized.

F. Showing error when posting link, need help next class with some material.

Mid Term Part 2

a) I think my images really help the reader to grasp my subject matter. Pictures of ships always add a feeling of romance and adventure, and that goes perfectly with the story I tell. (The story I add later.)

b) I was so challenged by the graphics I felt mentally challenged. XD I have problems thinking spatially and imagining depth, width and pixel size; that's why I'm a web designer and not a sculptor. I'll get the hang of it eventually. Centering images and applying tags effectively has been a challenge too.

c) Firefox, IE and Boat Browser Mini for Android. Not too many differences with the graphics, just colors of the padding/borders and other elements differ sometimes. Firefox 4 just doesn't want to render my HR line as red. IE doesn't like anything CS3.

d) I think the background color of white on my nav bar enhances it by letting it stand out without being loud or distracting. I may change this to have a gradient in the future.

Link to Website Version 2

Part 1 on midterm

a. My website worked pretty well depending on what internet browser I use, Google chrome and firefox it worked perfectly fine but I opened it in internet explore and it completely opened up with things screwed up.


b.My target audience were towards the sports audience, like young and older men and mostly the male population, tried making it entertaining sports website.


c. Safari, Firefox and Google Chrome worked perfectly fine, however when I opened internet explore my site didn't turn out the way i wanted it to be.


d. Small coding errors like spacing my material, position things from left to right including center were most my errors come from. Had some issues with ID selectors and after turning in part 1, I understand how go back and fix them.


e. Validating was a long progress, I couldn't figure how where you validate your material on Google chrome but on firefox i'm still correcting small issues.


f. When we had find errors or validating a website and finding errors, I thought us finding errors and correcting them ourselves made us and was good practice. 

Part 1 on Midterm

a) What worked out best for me was to perpetually save and validate the code as I went along to prevent errors from compounding on each other. Having our practice site alongside really helped speed up the process.

b) My target audience is for fans of art or those who lean towards learning about color and art. Something like that. The age demographic would be from at least high school age to 50+. I tried making the colors reflect my choice in subject matter while not making them obnoxiously bright so other people don't have to worry about theoretically searing their eyes out.

c) Safari, Firefox and Google Chrome. Since my pc is broken at the moment, I couldn't test it in IE. The differences were pretty minimal.

d) Not much actually since my coding didn't venture very far from what we had been practicing in class. Most of the problems lay with class and ID selectors, forgetting that ID selectors can only be used once and making efficient class tags.

e) Validating is bittersweet. When there's an error, and you can't figure out what it is, naturally can get frustrating. When the coding is clean and valid however, it is surprisingly satisfying. I had a few errors here and there, but for the midterm so far, not a lot of issues.

f) Whenever we did hands on practice, I think worked the best for implementing coding and the meanings. Compounded with when we talked about the meanings for each tag, it really helped understand the language.

g) Midterm part 1: Website about the color Blue

Midterm Part 1

a) What worked the best for me was constantly saving/refreshing to find problems as I created them, rather than being overwhelmed by errors on validation. Adding colors was easy and fun.

b) My target audience is history buffs, mainly those nautically inclined. Many will be men, but plenty of young men and women will be stumbling upon the site looking for Northwest history report research material. Since shipwrecks have a wide appeal, and story of this particular one is so moving and dramatic, I feel I can draw in many readers who otherwise wouldn't be interested in "history." Genealogists, (many of whom are women,) Pacific Northwesterners in general, and those of American Indian descent will be keenly interested in this story.

c) I tested in Firefox 4, IE 9 and Boat Browser Mini on my phone. Boat browser is an up-and-coming Android-based browser. It is highly rated on Android Market and easy to use. I feel Android-based browsers will grow in popularity.

d) Firefox had a weird quirk where it didn't display my HR line in red. I wasted the better part of an hour trying to "fix my CSS" when there was nothing wrong with it. IE9 and Boat did a great job of displaying the HR line. IE9, however, did not display my CSS3 text drop-shadow.

e) My XHTML code validates beautifully, except for my fancy blockquote with the vertical line. When I code it differently with the way, the thing validates, but then the quote doesn't look correct. I'll have to investigate it, because I think that quote looks nice. My CSS has a few problems I have to work out.

f) I marked all of my div tags and lined them up properly. That best practice is a good idea. Lining up my list code too makes it look clean and neat, and easy to adjust.

Midterm Project Phase 1 - The Doomed Voyage of the Tonquin

Midterm Part 1

I tested in Firefox, IE, & Opera. They all look fine. I did not really experience any troubleshooting. My validating was all good. My best practices were sticking to the target audience and choosing colors everyone can see. I am learning the code by memory. My target audience is young people since they love electronics and older people since You have to be rich to get one of the vehicles Im selling.

http://sws.pcc.edu/student/CAS206_pdeangel_43493/javierreyes98/midterm/part1/midterm.html

Xavier Reyes

midterm

a. What worked well in your development process?

Well the layout was easy to do. After realizing that I was over-complicating the process by thinking like a designer rather than a developer. It is hard to let go of designing a bit to go ahead and work with what has been learned in class. I did some research on w3cschools but didn't come up with enough answers. So working with the code learned in class, I was able to work with the layout already available to me. From there everything got easier. I am devating still whether or not. I am going to work more content. I like how simple it is so far.

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

My audience is towards people who want little information and everything available to them. Not going through hoops to search for the information they want. I stick to a color scheme that went with a Christmas theme. My websites purpose to provide a list of farms that sell Christmas tree.

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

Firefox, Safari, and Chrome. In all three the website looked exactly the same and nothing changed. All the links worked across all three platforms.

d. What troubleshooting did you experience?

I think layout without following the rules at first was really hard. After following the initial coding we worked in class it got easier. But changing the colors and figuring out what will change what took longer than expected.

e. Describe your validating experience.

It was hard. I forgot to close a couple of tags. I got scared. Fortunately a tutor was able to help go over my code and we got it working.

f. What best practices discussed in class assisted in your productivity?

Making the website easy to navigate. Color scheme that works and eye catching content. Easy to read.

g. Add a link to your web site within your blog posting

Christmas Trees

Ooops

Ninja vs. Pirates

The sleep deprivation has finally caught up with me. This link will work better.

Gregory Scholz Mid-Term

Ninja vs. Pirates

I actually used a combination of techniques to try to get my site where I wanted it. I relieved pretty heavily on W3 schools though to help me understand some of the concepts I wasn't getting. Then parceling on the information concerning my subject of choice...well, that took quite a bit of time.

My target audience is pretty much anybody who's into the Ninja vs Pirates meme. If long term it can get somebody to laugh my job is done. The design style I chose for this was what i'd like to call "in the shadows" neither ninja or pirates are generally the sort to attack during the day contrary to what "Pirates of the Caribbean" will lead you to believe. By going with a Black wrapper then packaging my content in a light gray it pushes the readers eyes more easily to view my page.

I tested my site in Chrome, Firefox, and I.E. Chrome didn't show the famicon which I thought was a little weird. Formatting wise only on the sides did I notice any change. I did have issues getting my links where I want them. I still would like to figure out how to specify containers/frames/boxes so that I can group more aesthetically my content.

Well, I forgot a couple closing tags when I was validating. And i'm do a shadowed text on one of the pages so that errored out. Everything that is able to be fixed besides the shadowtext is corrected and validated.

Making sure to validate often was a help long term, so what keeping stuff on the fold and not allowing it to go over.

Yasha Poursafar-Midterm Part1

What worked well in your development process?

In the process of my project, I think I have been able to communicate my idea to my chosen target audience who are Iranian, Middle Eastern, or in general ethnic music lovers between the ages of 9 and 50. I think being consistent and organized helped me make my webpage work.

I hope everyone enjoys browsing through my page and the links I provided to listen to some of the Iranian music.

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

My target audience is Iranian, Middle Eastern, or in general ethnic music lovers between the ages of 9 and 50. I chose my color theme based on images of traditional Iranian paintings, hand-made carpets, and arts & crafts that I searched for over the internet. I used a simple serif font readable to all my viewers and I tried to stay consistent with all of my design elements within my project.

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

I tested my page in Firefox, Opera, and Internet Explorer. I didn't notice any differences, I'm assuming that's because I've chosen a type-font that's readable in all three browsers.

What troubleshooting did you experience?

When I validated my web-site for the first time, my main errors were in the places where for example I didn't close my tags at the right place, the right usage of Ids and Classes at the right place, and also places where I wanted to originally use my horizontal lines.

Describe your validating experience.

Using validation helped me see and recognize where my errors were so that I can try to be more consistent with using tags, Ids, and Classes. It also helped me understand how to write my CSS coding more effective and cleaner.

What best practices discussed in class assisted in your productivity?

All materials and practices discussed in the class helped me with my project; especially some extra options available on Komodo Edit such as Lining Tags which helped me to be more organized, clean, and consistent in writing my codes and thus finding my errors easier and faster.

Check out my Midterm: Music of Iran

Midterm Part1

What worked well in your development process?
- I was originaly going to do a website about a pokemon named emoga but half way threw that i decided to switch to making a gallery site for mmorpg screencaps and other random things im working on. Unfortunately my part 1 will be slightly lacking in content since alot of the site will be image based so i had to improvise a bit.

Who is your target audience? What design choices did choose to attract your audience to your site?
-I really had no specific target audience since it its primarily a personal website/gallery but i did try to make sure the text would be legible to the majority of people.

What browsers did you test in? What differences did you see?
-Firefox IE Safari. It displayed correctly in firefox and safari but when i tried IE the css to span the background image didn't work.

What troubleshooting did you experience?
-Few Validation and positioning issues but nothing major. My main problem was that the site will be mostly image based so it will be lacking in content till part 2.

Describe your validating experience.
-Everything seemed to validate fine other then one error due to newer code.

Site Link

Personal Website: Part 1

Well, it was a lot of trial and error. But I finally completed my site without any validation errors. What worked the best for me was starting with the wire frames, then I created my index.html page. I created the entire index page before moving onto anything else. After I was done. I saved a copy of the index page to create my content pages. Then I just manipulated the copies to fit what I needed in those pages.

I did small sections at a time to that way if I made a mistake I would be able to find the errors quickly. I learned this quick on my index page I didn't validate early on and it took me 20 mins to correct all of the errors.

My website is called Bank Now! My target audience are people in the Portland, OR area looking for a new bank. I used the variant colors of green to appeal to the color of money. I kept the background white with high contrast color to appear more professional.

I tested my site in Firefox, Chrome, and IE. Firefox looks the best. Chrome and IE look about the same, but they create large gaps in spacing between paragraphs and lists. Also, the horizontal rules look a little plain in IE.

Nesting helped out a great deal in troubleshooting when I forgot to close a tag and made creating the web pages easier because I was able to edit chunks of information with ease.

Enjoy my web site: http://sws.pcc.edu/student/CAS206_pdeangel_43493/byronstine50/midterm/part1/index.html

Hello Everyone!

I'm glad I am able to get on the blog now. Something about me...I like trees and the color green. Hence my blog photo. I look forward to blogging with you. See ya!

Hello!

Walrus checking in. Can you tell I like the Beatles? XD

Nyu!

Hi hi

It seems that i am supposed to say hello to the class so. yeah. Please refer back to my previous "hi hi" comment.

Also. Does anyone else play maple story?

Welcome

Our class blog is a place where students share their learning experiences as part of their web site projects. It is a fun way to connect with your peers as well as document your process to meet the project requirements. Students will receive an invitation to join our class blog once they post their email address to the Blog Invite discussion.

Students should post a quick hello to the class once they have received an invitation. When posting to requirements for a project, please include your name (alias) and Project Name in the title.

I look forward to reading your learning journeys!