Summer 2007 week 14: 8/17

Hello everyone,

I was reminded tonight by more than one student that I hadn't yet put up the picture of Daniel Gordon, so thank you all, and forgive me for forgetting to do that.
However, the bio from his gallery in Chelsea no longer has his picture, and I also have been having a difficult time finding an image of him. Therefore, you can just use any old picture you want and I'll be fine with that. Don't worry.

Carter-

Summer 2007 week 12: 8/03

hey everyone,
okay, here we are, less than two weeks before the end of the term and i'm sure all of you are very busy with completing your final projects and studying for your final exams for this and other classes. i am also busy, so unless some extra time opens up during this week, i will not offer a full posting on the blog of our class activities this past friday. what you will find below is a discussion of the final project and that is all.

if you need additional help or review over what we have been doing in class, please email me or see me to make an appointment for us to meet.
carter-

1. TOPICS:
   
   • Final Project;
     
   • LINK   Content Requirements;
     
   • LINK   Technical Requirements;
     
   • LINK   Design Requirements;
     
   
   
2. HOMEWORK: For homework last week and the week before, you were to have completed the following pages for the website:
   
   1. Introductory Page
      
   2. Mailing List/Contact Page (form page)
      
   3. Image Gallery Page
      
      For homework this week you must begin working on your final page:
      
   4. the 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 for the artists' names. If you absolutely cannot find a picture of the artist, please let me know. This page 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, perhaps on a separate page—this would entail the use of a pop-up window JavaScript, which you won't know how to do until this coming Friday's class.
        
      • On the other hand, the bios of the artists could also just 'appear' in some other portion of the same page. If you choose this option, you already know all the JavaScript you need, and must simply use the innerHTML property to insert new content. All the information is provided in the artist_info download.
        
      
      
   
   
       At this point, you should try to complete the JavaScript that is on the form pages. So far, the rest is purely a design and html/css exercise. This means, that you should try and complete most of the DESIGN of the site before this Friday when the bulk of the JavaScript will have to be added in.
   
   
   To help you, you should also remember that you may use Dreamweaver and ImageReady, but that your XHTML code ABSOLUTELY MUST follow STRICT XHTML guidelines. BEWARE those programs typically insert a lot of non-standard and extraneous code. If you are uncertain what the proper code is, then refer to a book or a site like W3Schools for further information. Or, ask me if in doubt.
   
   
   
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