Web Site Evaluation Assignment

Hello Students,
This new assignment is an exercise in evaluating a current website and proposing a redesign with lists of enhancements or features that should be included.

Web Site Evaluation Assignment:
Create a document that evaluates the current web site in regards to functionality and content, and propose a redesign with focus on enhanced functionality and content. Make sure you address or try to answer all the questions in the list below. Cite examples and details of sites you like and propose a redesign. Compile all your date into a small webpage/site and upload to our server when complete.

Part 1: Review the website at http://www.rop.santacruz.k12.ca.us

• Answer the questions in the detailed "review questions" list below
• Compile your data in a properly formatted HTML/CSS site titled ROP Web Site Evaluation by (Insert your name here). 
• Format the webpage with CSS for easy reading and formatting (you may use/edit a previously created page).
• Provide screen shots or other details to illustrate your data as needed.

Part 2: Cite examples

• Search online for other websites, preferably education related that you think show good functionality and visual interest.
• Provide links/screenshots with details for the features of the site that you like listed somehow
• Provide at least 3 examples of websites with features you like and list the elements that you feel work the best and will translate to the ROP web page

Part 3: Redesign/Mockup

• Create a redesigned front page and cite details and how the page functions
• You can create a pen/pencil sketch for the redesign or you could use photoshop to make a digital mockup 
• List details that your front page will feature (drop down menu's, image carousel's, slideshows, videos, etc)

Review Questions: Accessibility

1. Is content structurally separate from navigational elements?
2. Is the website optimized for mobile? Does it resize or shift elements around to accommodate different screen sizes and resolutions?
3. How compliant is the website with W3C coding standards? Valid HTML/CSS?
4. Are ‘alt’ tags in place on all significant images?
5. Are text-based alternatives in place to convey essential information if this is featured within images or multimedia files?

Navigation

1. Are links labeled with anchor text that provides a clear indication of where they lead without over using exact match anchor text?
2. Depth – what is the maximum number of clicks it takes to reach a page within the depths of the site?
3. Does any part of your site use Flash? 
4. Responsive to click feedback – Is a response given immediately (0.1 seconds) after a click is made on a hyperlink?
5. Do clickable items stylistically indicate that they are clickable?
6. How intuitive is it to navigate? Are signs obvious or obscured?
7. Is it readable? Consider typeface, font size, color contrast.
8. Is there a clear statement of PURPOSE of the site? The purpose must be clear within a few seconds.
9. Do you have a clear call to action on each page?
10. Is a logical site map available?, If not, is a keyword-based search feature available? Note: Large (multi-thousands of pages) sites should have a search form.

Design

1. Is the site’s design aesthetically appealing?
2. Are the colors used harmoniously and logically related?
3. Are the color choices visually accessible? (For example high enough in contrast to assist the colorblind and visually impaired in reading the site appropriately)
4. Is the design audience appropriate?- The standard text size should be readable for visitors who don’t know how to adjust their browsers.
5. Are the fonts easy to read on various screen resolutions?

Content

1. Is the website copy succinct but informative?
2. Does the copywriting style suit the website’s purpose and ‘speak’ to its target audience?
3. Are bodies of text broken into easy to read chunks?
4. Can text be resized through the browser or do CSS settings restrict size alteration?
5. Is the contrast between text and its background color sufficient to make reading easy on the eyes?
6. Is text broken into small, readable chunks and highlighted using headings, sub-headings, and emphasize features where appropriate to assist in skimming?
7. Within articles, are there links to more detailed explanations of subjects, or definitions of jargon terms?
8. Do you have an “about page” that identifies the author of the content, credits to source for content that was not written by the site owner himself?
9. Do you have testimonials and publish them on the site?
10. Do you update the content regularly and don’t live by the phrase “set it and forget it”?

Security

1. Any obvious security flaws?
2. How resilient are forms to special characters?
3. Are private directories password protected via .htaccess?
4. Are public non-document directories (cgi-bin, images, etc) indexable or are blank index.html pages or appropriate permission settings in place to block access?
5. Is customer data stored online? If so, is this database appropriately safeguarded against external access?

Other Technical Considerations

1. Does the site load quickly – even (especially) for mobile users?
2. Are all links (internal and external) valid and active?
3. Are scripts free from errors?
4. Is the website free from server side errors?

Other Marketing Considerations

1. Is the website properly optimized for search engines (essential text emphasized, title tags relevant, title text presented in H1, outbound links reliable and contextually related, etc.)
2. Does the index page entice a visitor deeper into the site or shopping cart?
3. Does the website contain elements designed to encourage future or viral visitation (i.e. a contest, newsletter, tell-a-friend feature, and forum with a subscription option, downloadable toolbar, RSS feed or similar)?
4. Site Map available?
5. Is every page accessible at least via a single plain HTML Link (no JavaScript or Flash Link)?
6. Does every page have at least some text in the content? (How much text remains on the page if you remove all Images, Videos, Flash, Java Applets and JavaScript Code? Anything? Does the remainder still state the page’s purpose?)
7. Is every individual page only accessible via a single URL or are several URLs available (and worse, used) to access the same page? Consider duplicate content issue and utilize canonical URLs.

Legal Stuff/Re-Assurance/Legitimization

1. Did you include a Contact Us page with real address, phone number (toll-free for businesses) and contact form or email available, basically a clear and easy to use feedback/contact mechanism?
2. DMCA Notice up? Terms of Use page available where you specify what you do and why and what visitors have to agree on if they want to use your site? This is to protect yourself from complaints or worse regarding things that you cannot control properly, such as links to third-party websites or ads from automated systems such as Google AdSense, etc.
3. Privacy Policy up (especially if you collect data, email, names, and web analytics tracking cookies)?

When your document is complete, upload to our server for review by our client!

This project is due on Monday...

Have fun!

- Mr.W

Advancing Your Web Skills: Layout and Responsive Design

Hello Students,
Our newest assignment is to create a progression of small web pages that demonstrate layout, responsiveness and then utilize W3C CSS to enhance the responsiveness of your page, and finally complete a single page utilizing all the W3C CSS tools to make a page with layout that is responsive, meaning it can be viewed on many different screen sizes

Assignment:
Work with the class, or read and work independently and develop 4 single pages, demonstrating layout, responsiveness, responsiveness with layout, and finally a full W3C CSS page:

1: Layout with HTML and CSS: W3Schools - HTML Layout

This page utilizes HTML and CSS to layout elements using the Header, Nav, Aside,  Section and Footer classes

2: Responsiveness with HTML and CSS: W3Schools - Responsive Design

This sample site uses simple block classes to "stack" elements when the screen is resized

3: Responsive Page Enhanced With W3C.CSS: W3C.CSS

Link: Download the W3C.CSS Script for your own page

Building off the previous page the block classes are replaced with the w3-container, w3-row-padding and w3-third classes for enhanced responsiveness

4: Full W3C.CSS Layout and Responsive Page: W3C.CSS Sample

This page utilizes many of the W3C.CSS features such as Header, navbar, drop down, card and container W3C.CSS features.

When these pages are complete upload them to your server space for testing or turn in via USB drive.


- Mr.W

Getting Closer to Validation: Metadata and Character Encoding

Character Encoding for Web Pages: HTTP file headers

Validation Assignment:

• Add notes from today's lecture to your CSS single page project
• Make sure Komodo is set for UTF-8 with no BOM
• Add a HTML and CSS Validation buttons to your page at the top or bottom of the page
• Upload when complete

Details About Character Encoding and Validation:

Hypertext Transfer Protocol (HTTP) is the language used by a Web server and a Web browser to communicate with each other.

Every time a Web server serves a page to the browser, it adds an invisible "HTTP response header" to the file. This file header (not to be confused with the <head> section of a document) is metadata, which means it contains information about the file that it is serving to the browser. Many servers include character encoding (the character set used in the document) in this header. In other words, the server tells the browser how the document is encoded. (But, what the server says about the encoding may not be how the documents it serves are actually encoded; this is determined by your text editor when it saves a file.)

Most servers will say the files it serves are either ISO-8859-1 (Western European Latin characters) or the newer Unicode standard, UTF-8. In documents written in English there is little difference between these two standards; most noticeable differences will be in special punctuation. But if you wish to have your Web page display more than Western European languages (perhaps a page that mixes English with Chinese, for example), you cannot use ISO-8859-1; UTF-8 would be the way to go. At any rate, UTF-8 is the current standard for Web pages.

Browsers (also called "user agents") use an "HTTP request header" when requesting a file from the server. In this request header the browser identifies itself with a "user agent string." By keeping track of these user agent strings, Web traffic analysis software can create logs showing information on what percentage of users come to a site with Firefox, Safari, or Internet Explorer, for example.

Thecharacterencodingmeta tag

Many servers, but not all, indicate the character encoding in the HTTP response header. But whether or not your pages are on a server that indicates the encoding, you should do so in the document itself, by adding the appropriate character encoding meta tag to the head section. Assuming the document was encoded in UTF-8, and is using HTML 5, you simply need to add this to the <head> section:

<meta charset="utf-8">

Because this tag tells the browser how to interpret the characters used in the document, it should be the first tag in the<head> section.

The HTML validator needs to know which character set the document is encoded in so it can properly evaluate it. So if your pages are on a server that does not indicate the encoding, it is necessary to add the character encoding meta tag to your HTML or the validator may not be able to properly evaluate the page. Additionally, if your pages are not being served by a Web server (they are being viewed locally, or perhaps they are to be burned onto a CD) the browser will need the character encoding meta tag in your HTML to properly display the page.

In the case where the server indicates the encoding, and you also indicate the encoding with the character encoding meta tag, there is no problem if your tag and the file header from the server indicate the same encoding. But if the server says the encoding is, for example, ISO-8859-1, and your meta tag says UTF-8, the validator will give you a "character encoding mismatch" error. In such a situation the validator assumes the server's encoding is the one to use. In other words, in the event of a conflict between your tag and the server, the server overrides your character encoding meta tag.

How to see a server’s character encoding setting:

To see what your server says about the pages it is serving, you need a way to see its invisible file response header. A tool such as Rex Swain's HTTP Viewer will allow you to see this, including the character encoding, if any is indicated. Go there and enter a URL for a server that you wish to check then look at the "Receiving header."

If you see something like:

Content-Type:·text/html;·charset=UTF-8

then you know the server says the documents it is serving are encoded as UTF-8.

If you see something like:

Content-Type:·text/html;·charset=iso-8859-1

then you know the server says the documents it is serving are encoded as ISO-8859-1.

If you see something like:

Content-Type:·text/html

then your server is not indicating the character encoding.

Remember that if your server does not indicate the character encoding, it is even more important that your pages contain the character encoding meta tag. This will give the browser the information it needs to properly render your page (otherwise it will have to guess at the encoding, and it may guess wrong), and it will give the HTML validator the information it needs to properly evaluate your page.

Keepeverythingin synch

To make sure the browser renders your page as you intend (so that special characters such as curly quotes, apostrophes, accented characters, dashes, etc. display properly), and to enable the HTML validator to work, it is important that the server’s character encoding setting, your page’s character encoding meta tag, and the actual character encoding of the document all match.

It is recommneded that Web pages use the UTF-8 encoding. To ensure that your pages are actually encoded as UTF-8, your text editor must be configured to save your pages as UTF-8

Setting Komodo Preferences for UTF-8 / No BOM:

Launch Komodo and go to File/Preferences/Internationalization.

Uncheck the top option box to find the UTF-8 option in the pulldown menu

Change this second language-specific default encoding option to UTF-8.

Leave Signature BOM unchecked.

CSS Mini Page + Writing Assignment

Hello Students,

Read the details of this project thoroughly before beginning, it consists of 2 parts. Part 1 is a writing assignment that must be created as a simple HTML page and includes organization of your notes taken in-class during lectures. The second assignment is to create a CSS script to enhance the look of the HTML page. Due on Friday

Part 1:

Writing Assignment - A Summary of our studies in ROP Web Design including all class notes

1. Create a new blank HTML file
2. Format the HTML file with the proper HTML tags and Doctype declaration
3. Write a title for your page. Format it with the h1 tag
4. Write a subtitle for your page that includes your name and grade and what city you where born in. Format it with the h2 tag
5. In your own words write a paragraph that summarizes your experience with computers and programming before this class began. Format it with the paragraph tag
6. In your own words, write a second paragraph that summarizes what you have learned so far in this ROP Web Design class.Format it with the paragraph tag
7. Add your notes from the previous lecture "how the internet works" and "the history of the internet" and todays lecture as well "CSS".
8. Save your document in a new project folder called "mini css site" and make sure it is called "index.html"

Part2:

CSS Assignment - Format Your Content

1. Create a new blank CSS file
2. Create a set of CSS Rules to format your h1, h2 and p tags
3. Use CSS to modify the color of your text, the font and the text size
4. Use CSS to modify your p tag to indent your text and create a colored background for the paragraph
5. Explore CSS properties to enhance your page, use CSS creatively!
6. Save your CSS document in the same folder as your HTML file
7. Create a link in the head of your HTML document to link to your CSS file

When your project is complete, turn it in via USB drive for uploading to our server. Test, debug, fix and re-pload as needed.

Have fun!

Resources:

Link: Sitepoint.com - CSS Properties Resource

Video: How To Use CSS Tutorial