Week 8 - In Class Exercise

Studio Session: Server Side Authentication & Includes

Today we'll work on server-side authentication and includes.

On many web servers, you can create your own user and password file to restrict access to a web directory. On Gibson, access control is managed not via a user-created password file but instead using the campus-wide authentication system. If you password protect a directory using this method, your page(s) will have to be referenced using the https protocol, i.e. https://people.rit.edu/~abc1234/protected_directory/

To limit access to any and all RIT users with valid (DCE) login, use the following .htaccess syntax:

AuthType Basic
AuthName "RIT"
AuthBasicProvider ldap
SSLRequireSSL
AuthLDAPUrl ldaps://ldap.rit.edu/ou=people,dc=rit,dc=edu?uid?sub
AuthzLDAPAuthoritative off
require valid-user

To limit access to only specific RIT user(s), use the following .htaccess syntax, placing the usernames of the users who should have access (e.g. ellics or abc1234) in place of the "username1", "username2" examples.

AuthType basic
AuthName "Your Description Here"
AuthBasicProvider ldap
SSLRequireSSL
AuthLDAPUrl ldaps://ldap.rit.edu/ou=people,dc=rit,dc=edu?uid?sub
require ldap-user username1 username2

Readings on SSA and SSI

• Webmaster in a Nutshell, chapters 13 and 18.
• Comprehensive Guide to .htaccess

Error documents

“ In order to specify your own ErrorDocuments, you need to be slightly familiar with the server returned error codes. (List to the right). You do not need to specify error pages for all of these, in fact you shouldn't. An ErrorDocument for code 200 would cause an infinite loop, whenever a page was found...this would not be good” http://www.javascriptkit.com/howto/htaccess2.shtml

Edit your .htaccess file pico .htaccess

ErrorDocument 404 http://people.rit.edu/~jrhicsa/notfound.html

Ctrl x – Save your file, I suggest your copy it cp .htaccess htaccess

Week 5 Apirl 9

DOM, Javascript

This is where we switch gears from design to implementation. We'll start with client-side programming using JavaScript, which is used for everything from simple rollovers to complex calculators.

To make JavaScript work consistently, you need to understand the Document Object Model, or DOM, that the browser uses to represent objects to be manipulated (images, form fields, etc).

Readings on DOM and Basic Javascript

* Thau's JavaScript Tutorial, Lessons 1-3

* You know that some tags are inside of others in an HTML webpage. In terms of a tree diagram, those tags would be considered "children" of the first tag. Take a look at this LINK and sample code

Reference Sources:

* DevGuru Javascript Quick Reference Guide
* Visibone Javascript Reference

Images
* DOM
* HTML Tree
* Widow Document HTML

DOM Tutorials

DOM stands for the Document Object Model, and it's a way of representing a document using Object Oriented programming. It basically allows you to have access to any part of the document you want by calling functions. Within the Document Object Model (DOM), all page elements are placed in a treelike hierarchy. Every HTML tag is a node within this tree, with subnodes and parent nodes. Also, every text portion is its own DOM node. Dynamic HTML, an extension of HTML that enables, among other things, the inclusion of small animations and dynamic menus in Web pages. DHTML code makes use of style sheets and JavaScript. Learn what is Dynamic HTML (DHTML), how it can be applied to web page elements and how you can use it to create interactive Web pages.

Week 5 & Week 6

Midterm is a project and description can be found in MyCourses

Week 6 - you should be working with your group members to get ready for your class presentation on Monday April 21 - There will be no "Official" class Week 6 April 14 & 16

Week 5 lecture goal is Acceptability & Usability and robot.txt

Web accessibility refers to the practice of making websites
usable by people of all abilities and disabilities.

Using JAWS to Evaluate Web Accessibility
http://www.webaim.org/articles/jaws/#intro


http://www.webaim.org/intro/video.php




The Web Robots Pages

Web Robots (also known as Web Wanderers, Crawlers, or Spiders), are programs that traverse the Web automatically. Search engines such as Google use them to index the web content, spammers use them to scan for email addresses, and they have many other uses.

/robots.txt is, and how to use

• How do I use a robots.txt file to control access to my site?


• http://www.robotstxt.org/faq.html

Group Project Posting - Students please post a comment

The first group assignment will be to create a design document for the site, using the guidelines provided in the Webmonkey Information Architecture Tutorial.

Please Post as a comment to this Blog entry. Your posting should include you and your partner’s name & email address of each partner. Also include the URL and the client’s contact information of the site you are going to redesign. Please only one posting per group!

Add a Short description of the project i.e. Redesign - Create a new site - Include how or why did you pick this site.

Please provide as much contact information as you can about the client
Client's name
Client's phone number
Client's email address
Current client's URL


April 21 Design Document Due (Draft 1, required index page and About page, navigation) You have to present to the class your Draft 1 of your desgin document)

Readings for Week #5

Why should I make my web site more accessible? How can I make my web site more accessible?
How do users actually view your website?

Readings on Usability and Accessibility

1. CNN Article on Web Accessibility
2. "How we really use the Web," a chapter from Steve Krug's wonderful book, Don't Make Me Think!
3. Jakob Nielsen's "Top Ten Web Design Mistakes of 2003" and "Ten Most Violated Homepage Design Guidelines"

Web Accessibility Evaluation Tools

1. The Wave - http://wave.webaim.org/
2. Cynthia Says Report - http://www.cynthiasays.com/
3. Why 'Bobby Approved' is not Enough - http://www.evolt.org/article/Why_Bobby_Approved_is_not_Enough/4090/9278/
4. For IE/Windows only - The web Accessibility Toolbar -
   http://www.visionaustralia.org.au/ais/toolbar/
   

The 10-Second Usability test

I often refer to this disabling of CSS as the "10-second usability test." This is most definitely not a scientific method for determining the true usability of a site, but by taking away the design, you'll find it easier to get a handle on how the core of this page is going to be presented to the world.

If the browser or device happens to NOT support CSS, the page's design goes away, but the content and functionality remains. Think: phones, PDA's hand-held computers, small-screened devices, screen-reading software, and text-only browsers. Although some of these may support the user of style sheets in some capacity, many do not.

The Dig Dug Test

A quick integrity test of a designs can be easily achieved by bumping up and down the text size using the browser's controls to see the the page reacts.

Lynx testing http://www.delorie.com/web/lynxview.html

This service allows web authors to see what their pages will look like (sort of) when viewed with Lynx, a text-mode web browser.

FireBug

Fire bug http://getfirebug.com is a browser extension for Firefox that provides an interface designer a magnifying glass into the HTML, CSS and JavaScript of any page on the Web.

Week #4 - (CLICK GRAPH) Quiz summary/Stats

Quiz on Monday March 31, 2008 - Grades were very good
as you can tell from the staticst below.

Readings for week #4 RIT409

Group Assignments, and Starting to work on your Design Document

Design Document (assignment description posted in mycourses)- Competitive Analysis

-Shows the differences between the site you're working on and comparable sites.

-Screen shots
(rate completion with numbers and text description)

-These analysis are used for the design team and its clients to determine what customers are used to, and the components such as interface design and features offered.

-The competitive framework puts two websites side by side so that similarities and differences can be seen between the two.

-Competitive Analysis can also be used to compare many different sites. While comparing two sites for navigation and design, you can compare your site to totally different sites for shopping cart and checkout functionality.

-When presenting a competitive analysis it is best to list the conclusions early in the document or you may lose the attention of the group members and stakeholders.

Quiz will be Monday Week #4 All the readsings posted in the blog and book 1-6

Quiz Review will be topics Chapters 1-6 (focus on 6) Forms in HTML
Minor notes about chapter 5, my book notes on chapter 5 related to
creating the mailform.html I did use a table for the question in my mailform.htm

Sample of one html file with 3 external CSS files for Wednesday's lecture
http://people.rit.edu/~jrhicsa/409/03outline.html