Brian's CECS 310 Web World

Projects:

• Browsers
• Syllabus
• Students

Helpful Links

• CSULB
• MyCSULB
• BeachBoard
• Webmail
• CECS
• Mrs. Mack

Part 1:

Web Browsers:

W3C Validators:

1. W3C XHTML Validator
2. W3C CSS Validator

Search Engines:

1. Google
2. Yahoo!
3. MSN

Part 2:

Social Networking:

Gaia Online

• http://www.gaiaonline.com
• XHTML 1.0 Transitional: Failed validation, 7 Errors
• CSS: Failed validation, 63 Errors, 38 Warnings.
• Similarities and Differences:
  • The sign-in part is bigger in Firefox than it is in IE. There is white space noticeable on the outer part of the site in IE that doesn't’t appear in Firefox. Everything else seems to be cross browser compatible.
• User Experience:
  • Everything has its own block image to click on. The sign in bar is easy to find and very noticeable. I would keep everything except the colors. It doesn't’t make sense to me why they picked that color
• Mark-Up:
  • Content is separated from presentation and they do not use deprecated tags.
• Validation:
  • HTML Validation: XML parsing errors, character entity errors, and missing attributes.
  • CSS Validation: Many parse errors with margins and widths, and the warnings are for same color texts and background.

hi5

• http://www.gaiaonline.com
• XHTML 1.0 Transitional: Failed validation, 316 Errors
• CSS: Failed validation, 36 Errors, 63 Warnings.
• Similarities and Differences:
  • There are borders noticeable in the body of the site in IE that are not in Firefox. Two blocks of white space in IE that is not there in Firefox. Text is bolder in IE and that’s about it, everything is pretty much the same.
• User Experience:
  • Provides any easy way to get the site in many different languages. Every item is defined well and it’s easy to navigate around to what someone wants. I would keep the different blocks and their borders with the header. Maybe not so much white spacer.
• Mark-Up:
  • Doesn't’t separate presentation from structure. Other than that, all tags seem to be pretty up to date.
• Validation:
  • HTML Validation: Characters don't exist. Reference and general entities don’t exist, many of them. XML parsing errors.
  • CSS Validation: Padding and width errors, unrecognized elements, and a background error. Warnings are for same color background colors and text colors.

Flickr

• http://www.flickr.com/
• HTML 4.01 Strict: Failed validation, 30 Errors
• CSS: Failed validation, 5 Errors, 3 Warnings.
• Similarities and Differences:
  • The search is smaller in Firefox than it is in IE. The space in the footer links is smaller in Firefox than in IE. The links are bolder in Firefox. Everything else is pretty much the same.
• User Experience:
  • It’s easy to get your way around and it’s a very simple layout however there is a lot of white space and not much clarity in the design. I would create background color so it’s easier on the eyes and doesn't’t make it seem like they just put items wherever.
• Mark-Up:
  • Does not separate presentation from style because they use width and height and such. They use the bold tag instead of the strong.
• Validation:
  • HTML Validation: Uses a lot of tags that the DTD doesn't’t support such as width attributes and such. A lot of entity errors.
  • CSS Validation: parse error, opacity and padding. Warnings are from color issues.

Non-Profit Organization:

People for the Ethical Treatment of Animals (PETA)

• http://www.peta.org/
• XHTML 1.0 Transitional: Failed validation, 35 Errors
• CSS: Failed validation, 4 Errors, 9 Warnings.
• Similarities and Differences:
  • There are very apparent padding issues between Firefox and IE. The font color seems to be different from the two browsers and the boldness is different. Everything else seems to be the same.
• User Experience:
  • Not a very good user experience. Their main color is a mellow blue but all they use it for are the navigation bar and some headings and then there is a lot of white space especially in the header. I would change that and make more borders or background colors. Not much confidence in the page. The search, sign up, and navigation bar are very good though.
• Mark-Up:
  • All of the presentation for the most part is separated from the structure of the website. Some of the images however still have width and height. They don’t use any outdated markup though. They use classes for line breaks.
• Validation:
  • HTML Validation: No space slashes for the meta tags. A lot of attributes that don’t exist for the elements. Some JavaScript errors and parsing errors.
  • CSS Validation: font weight errors. Family names and same colors for text and background.

American Heart Association:

• http://www.americanheart.org/presenter.jhtml?identifier=1200000
• no Doctype found: Failed validation, 37 Errors
• CSS: Failed validation, 38 Errors, No Warnings.
• Similarities and Differences:
  • Links are bolder in Firefox than they are in IE but other than that there are not any noticeable changes.
• User Experience:
  • The white background is really hard on the eyes and does not provide any clarity to their website. They could have done something with the links. The left side menu isn’t very detailed, it should be redone. I would keep the link hovers on links.
• Mark-Up:
  • Some of the tags are uppercased. Presentation and structure are not separated, especially the body with bgcolor and such. Images don’t have space slash but br’s do. Uses deprecated tags such as font.
• Validation:
  • HTML Validation: A lot of it has to do with the fact that they do not have a doctype.
  • CSS Validation: Many errors have to do with top, bottom, width, and height.

American Civil Liberties Association:

• http://www.aclu.org/
• XHTML 4.01 Transitional: Failed validation, 49 Errors
• CSS: Failed validation, 16 Errors, 32 Warnings.
• Similarities and Differences:
  • Some of the words are bolder in Firefox then they are in IE. Some spacing issues as always but everything else seems to be the same.
• User Experience:
  • Changing colors every time an individual visits the page. Nice color contrasts between the link hovers. Everything has its own little place and is easy to find. I don’t think I would change much of it. Maybe the font family of the articles and the anchors of the articles.
• Mark-Up:
  • They uppercase some of their tags. A lot of their presentation is in their structure. Br tags don’t have a space slash.
• Validation:
  • HTML Validation: Using attributes that don’t exist or using uppercase tags, missing quotes on some attributes.
  • CSS Validation: All types of parse errors and color errors and a lot of color issues for the warnings.

Corporate/Business:

eBay

• http://www.ebay.com/
• HTML 4.01 Transitional: Failed validation, 178 Errors
• CSS: Failed validation, 12 Errors, 6 Warnings.
• Similarities and Differences:
  • Not too much difference from IE to Firefox except for space issues again and the buttons are a bit bigger in Firefox.
• User Experience:
  • The user experience for this website is a lot easier to look at and there is more clarity in where each item is. They have a background color heading with a border around it. Just a little something. Seems like they could have done something more with the links considering the site is yellow.
• Mark-Up:
  • All of the code is on one line but it seems like they use all tags that are pretty up to date. There br tags do not use the space slash though. Style seems to be separate from structure.
• Validation:
  • HTML Validation: end tags do not have starting tags such as td, a, and more. Required attributes are not there for elements.
  • CSS Validation: width and heights are set to zero and the warnings are from same color background and texts.

Amazon

• http://www.amazon.com/
• no Doctype found: Failed validation, 1406 Errors
• CSS: Failed validation, 38 Errors, 71 Warnings
• Similarities and Differences:
  • Everything is pretty much the same. There aren’t any differences other than advertisements and spacing issues.
• User Experience:
  • The navigation bar to the left is very nice and I would keep it, but the one thing I would change with Amazon and all websites like this is that there is too much clutter. There are advertisements everywhere and things to buy everywhere. I would make background colors or background images to create more clarity.
• Mark-Up:
  • Based on a table design and some of the tags don’t separate presentation from style. Doesn’t seem like there is any outdated mark up though.
• Validation:
  • HTML Validation: Seems like a lot of it has to do with the fact that they don’t have a doctype. A lot of ampersands and equal signs.
  • CSS Validation: a broad range of validation issues ranging from invalid values for each property. Some padding and margin issues. Warnings are from same colors.

Microsoft

• http://www.microsoft.com/en/us/default.aspx
• HTML 4.0 Transitional: Failed validation, 29 Errors
• CSS: Failed validation, 68 Errors, 22 Warnings.
• Similarities and Differences:
  • Spacing changes and the dotted lines on the link hover are different sizes but nothing noticeably different.
• User Experience:
  • With how much information Microsoft has, it seems pretty easy to get around. The colors are very inviting and very tech like. Not a lot of clutter. I would keep everything the same. A little weird that the links are underlined in the main content part.
• Mark-Up:
  • Interesting that they use the pre tag on their website. They’re mark up for the site seems pretty updated. No tags seem to be nested wrongly. They use the em element.
• Validation:
  • HTML Validation: using attributes that don’t exist for the elements they put them to.
  • CSS Validation: a lot of the issues seem to be with parsing errors and semi-colons. A lot of the warnings are from same colors.

Education:

California State University, Long Beach

• http://www.csulb.edu/
• XHTML 1.0 Transitional: Failed validation, 1 Error
• CSS: Passed validation, 71 Warnings.
• Similarities and Differences:
  • Spacing issues and the dotted lines under the links are a bit bigger in IE, but everything seems the same.
• User Experience:
  • The user experience is kind of weird. The footer is done very well but the top portion is kind of black with main links and then you go to the bottom and it goes pure white. Makes it hard on the eyes and makes me feel kind of confused. The links become the same color as the text which is kind of weird too.
• Mark-Up:
  • Presentation is separated from style completely and the mark up seems to all be up to date and everything.
• Validation:
  • HTML Validation: One error from an ampersand that should have been put into code.
  • CSS Validation: Passes validation, the warnings are from same color background and text.

Harvard University

• http://www.harvard.edu/
• No Doctype found: Failed validation, 53 Errors
• CSS: Failed validation, 1 Errors, No Warnings.
• Similarities and Differences:
  • A few spacing issues and some bottom spacing issues that are noticeable. The text seems to be bolder in Firefox than IE. Everything else seems to be the same.
• User Experience:
  • The user experience is very nice. The site right off the back makes me feel safe and secure. The colors align very well and they are easy on the eyes. The link colors are good. Link hovers match well. All the content seems to be easy to find. I might change the text size but that’s it.
• Mark-Up:
  • Surprisingly they don’t separate the content from the presentation at all really. There is a style sheet but they still have attributes such as bgcolor and such. Table layout and don’t end some of the paragraph tags.
• Validation:
  • HTML Validation: Most of the issues are most likely because there is not any Doctype. A lot of them from the Javascript.
  • CSS Validation: unrecognized element. That’s all.

University of California, San Diego

• http://www.ucsd.edu/portal/site/ucsd
• XHTML 1.0 Strict: Failed validation, 50 Errors
• CSS: Passed validation.
• Similarities and Differences:
  • A few spacing and text size issues from FireFox to IE but nothing really big. Most of everything is similar.
• User Experience:
  • The user experience is very different from other sites and the color is very easy on the eyes. All the links and information is very easy to read. I might change the white background that they have. Kind of offsets the blue.
• Mark-Up:
  • Is all within one line so I would change that. Seems like they don’t use deprecated tags, but a few attributes though. Seems like they separate presentation from style.
• Validation:
  • HTML Validation: A few deprecated attributes like target and they leave out some required attributes from tags.
  • CSS Validation: Completely validates.

Professional Blog:

Diggnation - Revision3

• http://revision3.com/diggnation/
• XHTML 1.0 Strict: Failed validation, 94 Errors.
• CSS: Failed validation, 5 Errors, 461 Warnings
• Similarities and Differences:
  • Not much is different from Firefox to IE. The yellow headings of each episode seem to be bigger in Firefox than IE. Spacing issues especially in the side news. The linking underline is bigger at the bottom on Firefox. Everything is the same.
• User Experience:
  • Very mellow colors and easy to find each episode along with some news to the side. The footer is done very well and is very organized, I would definitely keep that. The link hovering probably needs some work. I would change the news part because it makes the page cluttered.
• Mark-Up:
  • All of their tags seem to be up to date and everything but their attributes are single quoted instead of double quoted.
• Validation:
  • HTML Validation: They’re using deprecated tags like target on the anchor tag or not using tags like alt. Sometimes they put tags where they shouldn’t be and a lot of it seems to be from embedding the episodes.
  • CSS Validation: Parse errors and an invalid value for a background color. All the warnings are from background and text color being the same.

Save The Internet

• http://www.savetheinternet.com/blog/
• XHTML 1.0 Transitional: Failed validation, 116 Errors
• CSS: Failed validation, 1 Errors, 68 Warnings.
• Similarities and Differences:
  • Everything is pretty much the same between IE and Firefox. The only difference seems to be a top and bottom spacing difference. In one of the pages, a Facebook icon appears in Firefox and not IE.
• User Experience:
  • Orange headings with red links on a white background is kind of hard on the eyes. I would change the links color. The way the blog is set up I would keep. It’s a nice design with black headings on a gray background. The top seems a little cluttered but they need the advertisements.
• Mark-Up:
  • Not all of the mark-up is separated from presentation and style. Most of it is but some of the images and tables use HTML attributes to style the page. There are tags that are uppercased too. There are outdated tags too such as <center>.
• Validation:
  • HTML Validation: Seems like they don’t have the right doctype for what they want and they might have some wrongly nested tags, and some uppercased tags such as <P>.
  • CSS Validation: The one error they have is from a parse error and the rest of the warnings are from having the text color and background color be the same.

Online Music Blog

• http://onlinemusicblog.com/
• No Doctype found: Failed validation, 32 Errors
• CSS: Failed validation, 82 Errors, No Warnings
• Similarities and Differences:
  • The site in IE seems to have a much bigger padding from the articles to the side bar than FireFox does. Everything else seems to be cross browser compatible.
• User Experience:
  • Comes with a simple layout that is easy on the eyes with entries that are easy to find by date or by the type of content they have. I would change the footer so it’s universal for each page and I would also change the store listings to be on every page or a designated page, rather than just the home page. The search bar could be on every page too. I would keep everything else
• Mark-Up:
  • The mark-up seems to be up-to-date, but the line breaks are still <br>, instead of <br />. All presentation is separated from the structure.
• Validation:
  • HTML Validation: The main reason it seems to not pass is that it doesn’t have a DTD. Meta issues and DTD issues with />.
  • CSS Validation: Seems to be improper margin values.