<%@LANGUAGE="VBSCRIPT" %> <% Response.CacheControl = "no-cache" %>
Assignment 9

Responsive Design

Instructions

This exercise will provide you with more experience using jQuery and CSS. You will use CSS to create a Responsive Design using @media statements. A responsive design can adjust to different devices and screen sizes. This is a simple exercise and difficulty would increase as the complexity of the design increases.

Materials to turn in on the server:

  • In your Assignment folder:
    • "js" folder
      • jquery-1.7.1.js
    • index.html
    • PurdueLogo.gif
    • adLogo.jpg

 

 

 

 

 

 

 

Introduction Video

<% For i=1 to 15 %> <% 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:
  2. index page
    • Single page for all functionality
    • Add the div elements that we will be manipulating: top, left, middle, right
    • Add the CSS to position them on the screen. Change the background colors so that it is easy to tell them apart.
    • Add the content for the top div. Use the purdue logo and add a title.
    • Add the content for the right div. Use the ad provided or something similar.
    • Add the content for the left div. Create pseudo-links for us to change as the design changes.
    • Add the content for the middle div. Use lorem ipsum text to fill in the area.
    • Use jQuery to add the content to the div elements.
    • Add CSS @media statements for 1200px, 1000px, 800px, 600px, and 400px.
    • Copy and adjust the CSS for each @media statement.
    • Test it continuously in the browser.
       
  3. 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
       
  4. Screen Captures
    • Word doc containing images of finished solution

     
  5. Make sure it works on the server!!! Make sure your files actually upload to the 3 folders!!
     
  6. Save a backup copy to your personal drive space.
     
  7. 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

Does it work? -3 pts max
CSS -10 pts max
jQuery -3 pts max
Page Validation and Accessibility -4 pts max
   
Total 20 pts possible