Getting Started

To make sure you do not lose or destroy your previous work, create a folder called project4 and copy all the files you created from project3 to you new folder.

Use WinSCP to upload your Project 4 files to the remote server.

Here are the connection details:

Connecting via WinSCP

• Hostname: ftp.sienasellbacks.com
• Username: lastname@sienasellbacks.com
• Password: Told to you in lab
• Settings: Use FTP (Port 21)
• Server URL: lastname.sienacs.com

Open your local project4 folder and upload the files in your project4 folder to the root folder (called public_html) on the remote server.

Important: You should NOT upload your entire project4 folder so that it is inside public_html. Rather, you should copy all of your files and sub-folders directly from project3 to the root folder such that there is no project4 subfolder.

In general, to save and test your files on the remote server you must do the following:

1. Save your file locally.
2. Use WinSCP to upload your file to the web server.
3. Use a web browser and type the URL of the web page you want to view (for example http://lastname.sienacs.com/page.html) or by refreshing the web page if it is already load.
4. If you do not see your changes, do a hard refresh (hold SHIFT key and press the refresh/reload button on the web browser).

The instructions above will ensure that your newly saved web page is being properly viewed on the server, i.e., an HTTP request is made to the server. Depending on the cache settings and how you navigate back to a web page, some web browsers (mostly IE and older versions of Safari) will fetch the cached web page and you will NOT see any new changes you made.

1. Centralizing Your Navigation using Server-side Includes (15 points)

Instead of constantly updating the hard-coded navigation menu at the top of all your web pages, you can copy your navigation code (everything inside or your nav tag) to a single file (menu.html) and use the following server-side include statement to dynamically insert the menu.html file:

<nav>
<!--#include virtual="/menu.html" -->
</nav>

To allow Server-side Includes (SSI's) you must create a configuration file (.htaccess) with the following code:

Options +Includes
AddType text/html .html
AddOutputFilter INCLUDES .html

This .htaccess file is a hypertext access configuration file that must be uploaded to your root folder on the server.

Finally, you must create a new file called menu.html and upload it to the root folder on the server. This file includes the HTML code necessary to make the navigation menu (i.e., the nested ul tags) but it must use root-relative URLs instead of relative URLs. Root-relative URLs will be explained in further detail in class.

Root-relative URLs start with a leading slash (/) and are followed by the folder path to the file on the server. For example, to link to your Photo Gallery, the hyperlink would always be <a href="/gallery/index.html">. Thus, we do not have to ever add ../ or ../../ for web pages that are nested in subfolders. The leading slash indicates that the folder path starts with the root folder not the relative location of where the linking web page resides.

SSI's and root-relative URLs only work if your web page is being fetched from a remote server that properly supports these techniques. You can only test SSI's and root-relative URLs by uploading your entire website to the server along with your menu.html and your .htaccess file. If you have already contacted me and do not want to put your website on the live server, you must still do this part but I will not penalize you if there are broken links that could have been identified and fixed via remote server testing.

2. Image Optimization (25 points)

Use the techniques shown in Lab 10 to give all the images used in your image gallery (i) a consistent resolution and (ii) the smallest file size possible while maximizing the perceived quality:

1. First be sure that all your full-sized original images are at least 800px on the larger dimension. Specifically, for landscape-oriented images, the width should be 800px or larger and for portrait-oriented images, the height should be 800px or larger. If an original image is smaller then you should find/select another image that has at least 800px of resolution on the larger dimension.
2. Once you have determined that all of your images are sufficiently large enough, resize the larger dimension to be exactly 800px (if it isn't already). Be sure to preserve the aspect ratio. For example, an original image that is 1600px wide by 900px tall (16:9 aspect ratio), should be resized to 800px wide by 450px tall.
3. Once all your full-size images are 800px on the larger dimension, export the images as JPEG with different quality levels (90%, 80%, etc) and pick the exported image with the smallest file size that you feel matches the original in terms of quality and detail.
4. Instead of creating a thumbnail version that is only a scaled-down copy of the original, use cropping to pick a smaller representative part of the image that shows an important detail. Your thumbnail images should be exactly 100px on the larger dimension. Specifically, for landscape-oriented images, the width should be 100px and for portrait-oriented images, the height should be 100px.

In general, your full-sized images should be no larger than 300KB and your thumbnail versions should be no more than 30KB. This is important because our server is somewhat slow and larger file sizes will not download instantly. This will also improve performance on mobile devices that do not have high bandwidth data connections.

3. Website Title Graphics (15 points)

Use the technique shown in Lab 11 to create a website graphic for the header area of your website design. This graphic should be a descriptive title such as "Website of Last Name" or "Last Name's Website." Also be sure that your graphic is vertically compact, i.e., no more than 75px high. In the example shown below, the background size is approximately 500px by 50px:

In the example above, I followed the Lab 10 instructions but instead of using the Plasma Filter, I used a gray color gradient to make the text look metallic, which I think looks good on my pea green background color.

Instead of using the img tag to insert this graphic at the top "header" area of all your web pages, you must add CSS to your central stylesheet. You must use the background image replacement technique to change the h1 in your header so it appropriately displays the background image and hides the text using a large negative indent. See code below for reference:

background: green url(banner.png) no-repeat left center;
background-size: 400px 75px;
text-indent: -9999px;

Be sure that you export your graphic as PNG so that it has a transparent background and use CSS (as shown above) to select a background color that coordinates with your graphic and your overall website color scheme. Use CSS to set the size of the background and the height of the h1 tag to match your graphic.

4. Homepage Graphic (10 points)

Use the technique shown in Lab 11 to create another website graphic for your name on the home page (i.e., your main index.html page). This graphic should be larger than the more compact website title version used on all the pages. See example below:

Remember that your home page should be an exception to the general template followed by all your other pages. On the home page, move the h1 tag so that it is below your menu and use inline CSS to select the appropriate graphic and change the sizes to match the graphic. In the example above, I used exactly the same technique that I used to create my website title, but I made the graphic larger and only used my last name as the text.

5. Video & Audio Examples (15 points)

Continuing your work from Lab 11, make sure your three new examples are customized with video and audio files of your choosing and be sure they are properly linked and described on your HTML Examples page (examples/index.html). On the Examples Index Page be sure to describe each example, especially how the two video examples are subtly different.

example1.hmtl should use the HTML5 video tag to embed a video of your choice that you "ripped" from YouTube using keepvid.com/ or www.clipconverter.cc/. You must select a video that is less than 100MB in size, which are typically videos that are less than 5 minutes in length.

example2.hmtl should embed the same video in example1 using the old-fashioned object and embed tag, which actually relies on an external application (Quicktime, Window Media Player, etc.) to play the video. Be sure to add appropriate heights and widths to the tag so that this technique will properly display the video and the play/pause controls.

example3.hmtl should use the HTML5 audio tag to embed an audio file (mp3) of your choice. To find non-copyrighted/free-use mp3 audio files, try Amazon's list of free music downloads or Google "free mp3 downloads" and look for websites promote "struggling musicians" who are willing to share their music for free.

6. jQuery/CSS Animation (10 points)

Continuing your work from Lab 12, add two more example pages that demonstrates jQuery/CSS animation. Note that you will now have 8 total examples: Image Gallery, Form, Table, HTML5 Video, Object/Embed Video, HTML5 Audio and two jQuery/CSS animations examples.

7. Overall Improvement Since Project 3 (10 points)

Make improvements to your Project 3 work. When you submit Project 4 via Blackboard, look for the content/text submission area and write briefly summarize the improvements you have made since submitting project 3.

Improvements include:

1. Changing your color scheme to make your website more personal and appealing
2. Changing the color contrast between fonts and backgrounds to make your text more readable
3. Adding padding or margin to make content more readable
4. Fixing or tweaking your navigation menu
5. Adding content to the courses list that was previously missing/incomplete
6. Adding descriptions to your HTML examples that were previously missing/incomplete
7. Adding extra CSS (particularly borders and backgrounds) to improve the uniqueness and appeal of your design
8. Adding an entirely new page of your choosing if you are already happy with your design but want to improve your page content.