<%@LANGUAGE="VBSCRIPT" %> <% Response.CacheControl = "no-cache" %>
Lab 6

Semi-Transparent Overlays and Asynchronous File Uploading

Instructions

This exercise will provide you with more experience using jQuery and CSS. In addition, it will involve using Ajax to communicate with PHP files that exist on the web server. For this exercise, you will need to save your files to the web server and test them from the web server rather than testing them from your own computer. You will use a pre-made design to start with and add a semi-transparent overlay that allows users to upload images to the web server. You do not have to complete the PHP portion; that part is completed for you and provided to you for use.

Materials to turn in on the server:

  • In your Assignment folder:
    • "uploads" folder
    • "mid" folder
    • "thumb" folder
    • "images" folder
    • "js" folder
      • jquery-1.7.1.js
      • jquery.form.js
    • index.html
    • upload.php
    • doUpload.php
    • default.css
Introduction Video

<% For i=1 to 123 %> <% Next %>

Standard Page Setup Requirements: Show The Code!

close X
  • The first line of every XHTML5 document should always be the following XML declaration:
    <?xml version="1.0" encoding="UTF-8" ?>
    • No white space (i.e.: No spaces, No line breaks) before this tag.
    • You include this XML element for validation -- The encoding is for accessibility
    • HOWEVER - The PHP declaration also starts with <?, so to be able to do this in PHP, you must have the following as the first thing written out to the browser - only on PHPs that contain XHTML (not on pass-through pages)
      • echo("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
         
  • The second line of each document should use the XHTML5 DTD for the <!doctype> tag.
    <!DOCTYPE html>
     
  • The next line of code should be the opening <html> tag. The <html> tag in every document should always be:
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    • xmlns specifies the XML namespace for a document.
    • xml:lang specifies the contents and attributes as English and is a required accessibility standard.
    • lang specifies the content of a tag as English and is a required accessibility standard.
       
  • At the top of every XHTML5 file, between the <head> and </head> tags, place a <meta> tag as shown below:
    <meta charset="utf-8" />
    • The encoding type (UTF-8) should match the encoding in the XML declaration above.
       
  • All pages should conform to the wellformedness constraints of XML (and XHTML).
     
  • All formatting should be done using CSS

Exercise Specifications

  1. Files:
    • starterFiles - download these
      • images obtained from Google Images and NodeThirtyThree
      • Starter page was downloaded and modified from NodeThirtyThree
         

     
  2. Modify these 3 folders and change permissions on them: uploads, mid, thumb
    • Do this for each of the 3 folders:
      • Right click on folder > Properties
      • Security tab
      • Select Edit...
      • Select IUSR
      • Make sure the Allow checkbox for Modify is checked
      • Select IIS_IUSRS
      • Make sure the Allow checkbox for Modify is checked
      • Apply, OK
      • Repeat for each folder
         
  3. Image uploading
    • Start with a nicely designed site so that we have something behind the semi-transparent “lightbox” effect.
    • Clicking the link to upload images causes this overlay to appear, where users can either browse to search for an image to upload, or they can drag and drop an image.
    • Dragging and dropping an image will cause the bounding box to turn dashed.
    • Releasing the mouse button will cause an uploading image to appear while the file is being transferred to the server.
    • Once the image has been saved to the server, the image will appear in the drop area as well as in the smaller “uploaded images” area that shows all of the uploaded images.
    • If the user needs to upload several photos, the thumbnails in the uploaded images area will continue to be added and that area will become scrollable so that the user can still see all of the files that were uploaded.
    • If the user does not want to drag and drop files, there is still a browse option that allows the user to search for an image the traditional way.
    • The upload functionality will resize the image and will store a thumbnail, mid-size, and large image on the server into your folders.
       
  4. Ajax
    • Two instances of Ajax are in this assignment.
    • The first instance is hooked to the drag and drop functionality. As soon as the mouse button is released, the Ajax function is called, which in turn calls upload.php
    • The second instance is hooked to the browse button and uses the jQuery form library. That Ajax calls doUpload.php
       
  5. Detecting support for functionality
    • IE currently does not support the html5 drag and drop functionality.
    • The jQuery $.browser functionality was deprecated as of 1.3 so we cannot rely on that.
    • We use some JavaScript to get the browser information. The variable will return as undefined if we are using IE.
    • If we are using IE, the drop area should be hidden along with the text that says to drag and drop.
       
  6. Code
    • Here is the code for this entire exercise. Proper use would be: look at the code to make sure you are approaching the assignment the correct way. Then try to do it on your own. Then use the code to make sure you've done it correctly. Improper use would be: copying without interpreting, which would result in not really learning what you're doing. The code is provided to help you be successful and so that you don't have to ask as many questions about the assignment.
    • index page code
    • upload page code
    • doUpload page code
       
  7. Screen Captures
    • Word doc containing images of finished solution

     
  8. Make sure it works on the server!!! Make sure your files actually upload to the 3 folders!!
     
  9. Save a backup copy to your personal drive space.
     
  10. Do not modify any files after the deadline. Timestamps on all files will be checked during grading.

Validation & Accessibility

  • Validate your pages using (a) Dreamweaver and (b) the HTML Validator add-on for Firefox. Fix any errors before turning in.
    • Pre-rendered HTML: Use Dreamweaver built-in page validation
    • Post-rendered HTML: Firefox: View source _or_ Icon on bottom / status bar > Double click for details
    • Using only Dreamweaver is not good enough
    • Always fix the error on top first. Only fix one or two errors at a time. Many times, fixing the top error fixes errors below it.
         
  • Check for JavaScript and CSS errors using the Web Developer toolbar in Firefox.
    • Make sure there is a green check for (a) Standards Compliance Mode, (b) CSS, and (c) JavaScript
       
  • Check accessibility issues using the Accessibility Extension add-on for Firefox. Fix failures before turning in.
    • Accessibility > Reports > Accessibility Issues
    • Validate against FAE rule set
    • This will not fix all accessibility issues, but it is a very good start.
       

Grading Rubric

Drag and Drop to Upload Files -5 pts max
Browse to Upload Files -5 pts max
Overlay & jQuery functionality -5 pts max
CSS Aesthetics -5 pts max
Page Validation and Accessibility -5 pts max
   
Total 25 pts possible