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

Materials to turn in on the server

  • In your Lab06 folder:
    • ImageShop.html
    • js folder
      • jquery-1.7.1.js
    • ImageShopImages folder
    • css folder

Expand/Collapse Section ImageImage Manipulation

Description: In this assignment, you will use some HTML5 and jQuery to resize and rotate an image on the Canvas.

Expand/Collapse Section ImageExercise Specifications - Part 1

  1. Image Manipulation
    • You'll need the jQuery library in your js folder
    • You'll need this jQuery library in your js folder for cropping
    • You'll need this CSS in your css folder for cropping
    • Layout the HTML5 elements before working with the CSS or JavaScript.
    • Add the CSS to place and position elements on the page - found in the code
      • If you add a little at a time and refresh, you get a better sense of how the CSS elements are working - giving yourself a better understanding of CSS as a whole.
      • Notice how <!-- html comments --> are used around the CSS
    • Add the HTML5 JavaScript and jQuery to finish out the file - found in the code
      • Notice how <!-- html comments --> are used around the JavaScript, just inside the <script> elements.
    • Validate your HTML5 code, you should have zero errors.
    • Differences in Code from Lab5
      • use images instead of links
      • add a link and div for upload
      • add the close line for the upload div
      • replace all of the rotate functions
    • 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.
      • ImageShop page code

Grading

Comments 2 pts
Aesthetics 4 pts
Coding 6 pts
Validation 3 pts
Total 15 pts