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