Summer 2007 week 10: 7/20

Hi everyone,
Forgive me, but it will take a bit longer than usual to do the posting for this week's class. I'll put the Final Project information up and the Homework this weekend, but the class demonstration and notes will not be up until later on in the week.


I want to apologize to those of you who are unsatisfied with the class, and I suspect there are at least a few of you out there. Also, I want to apologize if any of you who are put off by me personally (I'm not much of a song and dance man). I know I have my flaws and weaknesses: I know, for example, that I can be impatient. I constantly struggle against this ungenerous part of my personality, but I promise you all that I will try harder. Please don't take it personally. It is not any of you, this is my issue, not yours.

But I do want you all to keep a few things in mind: the material that this class covers for most students is not easy material and so dealing with the subject certainly can be very frustrating. Programming and coding is unforgiving and very rigid, and there is very little room for mistakes as you all have seen. So, please try not to hold me responsible for your difficulties with the class. Also, please recognize that my primary concern is that all of you learn this stuff (if I am lucky, maybe I can spark a couple of you to actually enjoy it a little). As many of you know, I am often willing to meet with you before and after class and on other days. I respond to emails with questions about homework assignments, and I keep a blog that outlines EVERYTHING we do in class. I'm not certain whether you are aware of it, but this takes considerable time out of each week.

I also understand if you dread and put off giving the class the attention it requires. I think it is human nature to avoid difficult things. I do not take it personally if you do not enjoy this sort of thing, as there are many things I do not enjoy either. However, you must keep in mind that if you avoid the class, just as in life, there will be consequences that you must accept.

The best way to deal with difficult things in class as in life is not to avoid them, but to confront them head-on. If you find that JavaScript is difficult, then the only way to overcome the difficulty is to spend MORE time on it. I cannot make it easier for you. Only you can.
Carter-

1. TOPICS:
   
   • LINK   Review: creating a simple html table;
     
   • LINK   Review: putting a form into a table;
     
   • LINK   Review: Creating a layer with CSS;
     
   • LINK   Review: getElementById() function,
     
   • LINK   Review: event handlers,
     
   
   
2. HOMEWORK: For homework last week, you were to have completed the Introductory Page for the final website (see details below), which no one did. Therefore, to get full credit for homework next week, you are to complete the Introductory Page AND the Mailing List/Contact Information Page, which is basically a form page for the user to input his/her contact info. Again, further information is below.
       Still, at this point, there will not be any JavaScript for these pages. It is a purely design and html/css exercise this week again as last. However, you must use a frameset to do this project, this means that in order to complete the homework, you not only need to do the Introductory & Mailing List/Contact Info Pages of content, but also the frameset document and the navigation document.
   
   And remember, you may use Dreamweaver and ImageReady, but your XHTML code ABSOLUTELY MUST follow STRICT XHTML guidelines. If you are uncertain what these are, then refer to a book or a site like W3Schools for further information.
   
   
3. FINAL PROJECT: Starting this week we will be working on the final project which is a website for an Art Gallery, named Alpha Gallery. Please read the information below, and click on the links to download additional information and the images.
   
   
   1. CONTENT REQUIREMENTS: 
      
      1. Page 1: INTRO PAGE—this page includes some kind of appropriate imagery of your choice (must be relevant to the gallery) with a series of links: Gallery Info, Artists, Image Gallery, Mailing List/Contact Information. In this page, you should establish the color scheme that you will use throughout your design for this site. You should also establish ‘the look’ you are going for with the sort of imagery you choose and the fonts you select. If we have time, we will create pull-down menus for the Artists and Gallery links.
         
         1. In addition to the imagery here, and the links, we should also see the name of the website Alpha_Gallery.com.
            
         2. It should say somewhere that it is a gallery for Modern and Contemporary Art that is free for public viewing.
            
         3. Also necessary, are the names of the current artists on view, Daniel Gordon, Hitoshi Sugimoto, Candid Hofer, and Bernd & Hilla Becher.
            
         4. You should also place an image of of one of the works of each of the artists on this page.
            
         
         
      2. Page 2: 'GALLERY INFO PAGE—this page includes one image of the gallery provided, and text about its location and hours. Make sure that you re-state that it is a gallery of contemporary and Modern art open free for public viewing.
         
         
      3. Page 3: 'ARTISTS PAGE—This page includes a thumbnail image of each artist if you can find one. I have given you all the rest of the content, so please make an effort to do this. Just do a bit of a search online. It also includes the name of the each artist and where each one is from or currently living. When you click on the thumbnail images, the bios for each artist should open up, each on a separate page. All the information is provided in the artist_info download.
         
         
      4. Page 4: IMAGE GALLERY PAGE—a whole series of photographic images used in the current exhibitions of each artis placed in a thumbnail gallery, or a series of thumbnail galleries. These thumbnails should be clickable to get to larger versions of the same images that pop up in a new window. Make certain that the info for each image is there when you click to get the larger picture.
         
         • This page will include an image-replacement script which will change an image whenever the user mouses-over one of them.
           
         • This page will also include a script to create a pop-up window when the user clicks on one of the images that contains a larger version of the image with a caption.
           
         
         
      5. Page 5: MAILING LIST/CONTACT INFORMATION PAGE—Mailing List/Contact Information (form) Page, specific form elements to be given at a later date.
         
         • This page will include a script to validate the form.
           
         • This page will also include a script to print out the data that was typed in the form in a new page using a document.write().
           
         
         
       
      
   2. DESIGN REQUIREMENTS: 
      
      1. Color Scheme—you must choose a color scheme for your web-site that you can show to me or describe to me. This is due next week (7/20/07). My suggestions are simple, easy, non-complicated. Keep in mind who your audience is and what the subject matter is.
         
      2. Page Layout—you must use CSS and tables to lay out all pages in a pleasing way. If you are not certain how to do this, consult our past classes and me for assistance.
      
      
   3. TECHNICAL REQUIREMENTS: 
      
      1. XHTML—ALL CODE for this site must be typed using STRICT XHTML standards. This means the following:
         
         • that all tags and their attributes must be typed in lower case;
           
         • that all attribute values must be typed in quotes and with units;
           
         • that the DTD for strict XHTML must be typed at the top of the document;
           
         • that all empty tags must be typed with the slash at the end, such as with the <br/> tag;
           
         • that none of the deprecated inline tags are to be used, such as the <font>, <b>, <u>, or <i> tags;
           
         • and, in addition, that the <tbody> and the <thead> tags, as well as the height attribute for the <table> and <td> tags, are not permitted.
           
         
             If you are uncertain about something, you can consult the requirements at the w3schools site (LINK), or you may ask me. Furthermore, the use of DreamWeaver is permitted; however, please note that DreamWeaver does not create strict XHTML. Therefore, you will have to go through the code and edit it yourself to make certain it follows strict standards.
         
      2. CSS—ALL STYLING must be done using CSS. We have used it extensively in this class, and you should have learned it in the previous DMA110 class; and further, as it is the standard in web-design, it is a requirement that this site use CSS for the styling of the page. All three levels of styles may be, and are encouraged to be used. Please consult me if you need additional assistance with this.
         
      3. JavaScript—As this is the heart and primary topic of this course, the presence and functionality of your JavaScript code is your primary task. More than 60% of the grade for this project will be based on this, so please focus on the scripts above all. Although XHTML, CSS, the content, and design of the site are all important, this is a JavaScript class after all, so keep in mind that an ugly site with functioning scripts, will do much better than a beautiful site with non-functioning scripts. There will be several scripts that you must include in your site:
         
         1. Form-validation (covered weeks 10)—Among the most important scripts will be the ones that deal with form validation. These must accomplish a few goals:
            
            1. They must first and foremost determine whether the form fields have been filled in;
               
            2. they must next determine whether text has been typed where it should be and that numerals are typed where they should be;
               
            3. they must prevent the data from being sent to output (such as in a document.write()) if the fields are not completely filled;
               
            4. and lastly, there must be a document.write() that prints out all the data that was typed into the form.
               
         2. image-replacement (covered week 11)—In two places, on the opening page and then somewhere else in your site—either as menu items or on the gallery page—you must use scripts to create mouse-over buttons with images. These are scripts that replace an image with another image when the mouse passes over the top of it, and then return the original image when the mouse moves away.
            
         3. PopUp Windows (covered week 12)—On the gallery page, the thumbnail images must be clickable and they must call a script that creates a new browser window with a larger full-color version of the images. The new browser windows must not have any menus at the top or scrollbars on the side or bottom. Accompanying each larger image, must be information about the image, the title, the date, and the media used, as well as a link that closes the window (closing the window can also be accomplished with JavaScript).
            
         4. Date insertion (covered week 12)—At the top of each of the content pages, you must insert the current date using JavaScript.
            
         5. Pull-Down Menus (covered week 13)—In the Navigation frame, providing time, we will create pull-down menus utilizing JavaScript and CSS for the Artists and Gallery links.
            
         
         
      
      
   4. FILES: You will need the following files to complete the website.
      
      • LINK   click here for information about the Gallery & Artists.
        
      • LINK   images 1 click here and below to download images.
        
      • LINK   images 2
        
      • LINK   images 3
        
      • LINK   images 4