Fundamentals of Internet Applications: Autumn 2008 week 13: 12/10

Wednesday, December 10, 2008

Autumn 2008

week 13: 12/10

Hi everybody, I'm hopeful about your projects as we go into this last week of preparation. Last week there were some hopeful signs. From all appearances, most of you have either started or completed a good portion of the pages, but there are still a few of you who are quite behind, which is something I don't quite understand. This has not been a difficult final project. I have told you exactly what to do, and given you all the code you need to do it up to now. In most cases, you have still needed to figure out where to put the code, but nonetheless, it has required little from you; however, these last two pages are different. With them and at this point, we start to separate those who understand what we have been doing from those who do not. &nsbp; The last two pages that we are going to do are the contact page, and the home page. Up to now, you have had very detailed step-by-step instructions and explanations, but for this last posting of the term, I will only tell you what I want for the contact page and show you how it should look. I will NOT be giving you any of the code or go into very detailed explanations. By now, you should understand how to do everything that I will be asking you to do for this page, or at least know where to find examples in this blog. The last page, the home page, is entirely up to you. You are to design and code it entirely on your own without any instruction from me whatsoever. Unfortunately, however, although I have given you the text and directions you need for the home page (index.html) two weeks ago, none of you has actually begun working on it by last week. Please note that although the entire site is important, these last two pages are the most important that you have to design and code. They are worth the most points, so do not forget about them. The following sites will no longer be included in the list below as they are not functioning or no longer available:

www.urbjects.com
www.atelierduchene.com
juliaablemann.com
ki2n.com
www.dev4design.com/new.html
www.peyotronica.com/web.html
www.nineoff.com
shadowtones.net

Instead, you will use the following URLs:

Carter-

TOPICS:
1. Final Project;
  - LINK Content Requirements;
  - LINK Technical Requirements;
  - LINK Design Requirements;
2. Classwork:
  - LINK Global CSS
  - LINK Contact Page
HOMEWORK
:
1. Final Exam—here is the study sheet for the final quiz next week: LINK
2. Extra Credit—For extra credit for the final project, you must revise your gallery: instead of linking the thumbnail images to the websites, like the thumbnails to the larger images that you created when you took the screen shots. Place those images each in their own webpage with the same template heading. Below the image, put the name of the site and its url, and use the large image as a link to the site.
3. Final Project, Part IV: The entire project is due next week. The site that you have produced accompanies a book that has already been published that highlights some of the best web-designs of last year. Below are the Requirements:
  1. Four main parts:
    the home page
    six about pages (six versions of the page, each one for a different language);
    two gallery pages; and
    a contact page that will include a form for submitting personal information;
  2. File & Folder preparation:
    Create a new folder for your final project named yourName_yourID;
    Inside this folder place ONLY those .html files that are used for your project. There should be NO extraneous files. If you have any extra files that are not used in your project within your folder, your grade will be marked down;
    Also inside this folder create another folder for your images. Place ONLY those .jpg, gif, or .png files that are used for your project. There should be NO .psd files in your images folder(s), only .jpg, .gif, or .png files. And once again, there should be NO extraneous files;
    Create another folder within your main folder and name it CSS. You will see below what you should place inside this folder.
    Check all code in all files and make certain it follows XHTML strict standards. If you are uncertain as to what this means check in my blog or, click here for links to W3Schools: LINK 1 ; LINK 2; LINK 3; LINK 4;
  3. Links: Make certain all your links work. It is perhaps the most serious and fundamental flaw if your links do not function, and may result in failure.
  4. Browsers & Platforms: View your site in both Firefox and Explorer on the PC as well as both Safari and Firefox on the MAC (there are Macs in room 210), and make certain everything works and looks all right everywhere. I will be checking everyone's project this way and points will be taken off if there are serious problems in one or more browser or platform;
You should have at least begun the home page by now, and you should have completed all the other pages except the contact page by now. This posting concerns that page. For those of you who want to make sure that you do well on the final project, show me a complete, or nearly complete version of it BEFORE class next Wednesday evening. Projects are due at 6:30pm Wednesday Evening. If you cannot make it by that time, please let me know ahead of time and perhaps we can work something else out. Otherwise, I will NOT accept late projects.

FINAL PROJECT The site that we are going to produce accompanies a book that has already been published that highlights some of the best web-designs of last year. It will have four main parts: the home page, six about pages (six versions of the page, each one for a different language), two gallery pages, and a contact page that will include a form for submitting personal information. Please read the information provided.

CONTENT REQUIREMENTS:
1. Part 1: TEMPLATE—This is what we have already completed as of the class before last which includes the top banner of the site and its primary navigation. If you have yet to complete this, check the previous blog entry here: LINK Week 10 blog entry.
2. Part 2: ABOUT PAGES—these pages will all look identical. Each will include some imagery of your choice and the text about this book in six (6) different languages (to be furnished at a later time). The main thing you need to know about him right now to start your site is that this is a book about the state-of-the-art web design. LINK This is a .zip file that contains all the text for this page. For this section, each language will be placed in a separate about page and so each language is saved in a separate file. Remember, you must use all the text.
3. Part 3: IMAGE GALLERY PAGES—Below here you will see a series of links to various sites. You must visit each site and take a screen shot of the main page of the site. Using photoshop, you must crop the screen shot and create a large .jpg image and a much smaller .gif image. You must place all the thumbnail images of the main pages of each site into the gallery pages. Each thumbnail will also provide a link to the larger image that you created with the screen shot of the site and that image will be a link to the site that will open up in a separate window when clicked on. Below are the links for the first gallery page:
  And then the links for the second gallery page:
4. Part 4: CONTACT PAGE—This page includes an image of the cover of the book (That you will create yourself), publication information, and book-availability information. It will also have a form for the visitor to submit his/her personal information so as to be a part of the mailing list. We will be completing this page next week and starting it in class, week 13.
5. Part 5: HOME PAGE—In this page, you should establish the color scheme that you will use throughout your design for this site. "The Look" will be established in part by what we do in class together, but the rest is up to you, such as the colors, the fonts, and the particular layout that you will choose. You will need one image for this page and some text. The image should be a .jpg file and the text is a word .doc file that comes in six different languages, which I have already provided to you below. You must include all six languages in your design.
  1. Text: LINK This is a .zip file that contains all the text for this page. Each language is saved in a separate file. Remember, you must use all the text.
  2. Image: LINK This is a .zip file that contains a .psd file an example of an image for this page. It was the one used in the previous book, Web Design Index SEVEN. You should model your own image off of it. One idea is that you play around and make a collage of some of the websites in the gallery. Remember, our web site is for Web Design Index EIGHT.
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. My suggestions are to keep it 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 you may use 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.
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, so 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.

INTRODUCE—This will be a relatively short posting compared to the last several ones. It will mainly consist of instructions on how to make some final preparations of the project, and then what to do for the contact page. There will be very little discussion of how to produce things and very few code examples. By now, you should all have a very good idea of XHTML and CSS without my assistance.

GLOBAL CSS—First thing I would like for you to do is open ALL of your .html documents and look at the CSS in the head section of your document in the embedded stylesheet. Once you look at the code, compare which of the styles are in ALL OF YOUR PAGES. You should notice a few styles that are in only a couple of your pages. Most is exactly the same in all the pages.
1. Cut & Paste: Now, in one of those pages, select all those styles that are in every page and CUT (ctrl-X) and PASTE (ctrl-V) into a new, blank Notepad file.
2. Save: Next, save this file into that new CSS folder that I asked you to create above in the homework section of this posting. Name it global.css. This is going to be our external stylesheet, and recall that there should be NO HTML tags in it. This includes the <style> tags.
3. Delete: Go through all of your files and delete all of that CSS that is now in your external stylesheet.
4. <link> tag: Type the following right before the closing </head> tag: <link rel="stylesheet" type="text/css" href="css/global.css"/>
5. Copy & Paste: Copy and paste this new tag into ALL of your .html files.
6. Save: Save all your files.
CONTACT PAGE—Below, you will find the steps of what I want you to do for the contact page. I will give you the steps and in many cases I will show you what things should look like, but I will not explain much of how to do it at this point. For that, you should refer to previous postings.
1. Table: create a new table with 17 rowsand 12 cells in each row.
2. Rowspan: modify the table so that the first cell in the first row extends to the bottom of the table using the rowspan attribute.
3. Colspan: modify the table again but this time in several places using the colspan attribute so that the cells extend the entire width of the table in the following rows: row 1, row 2, row 5, row 8, and row 9.
4. Text: add text to multiple cells so that it looks like the image below. Text belongs in row 1, row 3, row 6, row 9, row 10, row 12, and row 15, be very careful that it look exactly like mine:
5. Form elements: add 3 text boxes to row 4, 2 text boxes to row 7, 1 text boxe to row 11, and 1 text box to row 13; 1 set of radio buttons to row 4, 1 selection menu to row 7, 2 selection menus to row 13, and 1 textarea box to row 16.
6. CSS Class I: add the col1 class to the first cell of the first row.
7. CSS Class II: add a second class named .head to the embedded stylesheet in the head section of your document with the following properties: .head {height:25px; font-family:Arial Black; font-size:10pt; background-color:#000000; border-left:#ffffff solid 1px; text-align:left; vertical-align:middle; padding-left:20px; color:#ff0000; line-height:8pt;} Apply this class to the second cell of the first row and the first cell of the ninth row.
8. <div> tags and a new id: add a pair of <div> tags around this new table, the opening tag before the opening table tag, and the closing tag after the closing table tag. Then add the following id to the opening tag:<div id="layer_con">.
9. Final CSS: add an id to the embedded stylesheet in the head section of this document with the following properties (notice that we are reusing one of first background images): #layer_con {width:100%; top:225px; left:0px; position:absolute; z-index:5; font-family:Arial, Helvetica, sans serif; font-size:10pt; color:#000000; background-color:#fc8585; background-image:url("images/red3.gif"); background-repeat:repeat-y;}
10. Borders: remove all the borders from your table to finish it up: