MAT-225 :: PROJECT 1

Responsive Web Design with PHP Scripting

30% of Semester Grade

Quick Links on this Page:


Overview

You will create a completely responsive website featuring a minimum of 4 pages (informative landing page + minimum of three articles drawn from discussion research). Additionally, you will implement several custom PHP functions to automate portions of the site, and you will create all pages based on a foundation-level php ‘include’ file template system.

This project has some progressive ‘phase’ due dates and tutorials on how to develop specific stages of the site. This structure aims to help students stay on track with the completion schedule and to successfully implement all requirements.


Objectives

  • Create a fully responsive, mobile-first website
  • Successfully implement various PHP scripts
  • Evaluate and successfully execute any necessary changes to HTML and CSS to accommodate scripting
  • Implement javascript/jQuery tools in conjunction with dynamic PHP scripts
  • Successfully integrate all required components into an intuitive, user-friendly, and visually appealing design

Project Phases and Grading

This project will have different grading components and phases:

Phase One

Initial Responsive Design (30 pts):

The initial responsive design portion of the project is to produce a basic mobile-first, responsive framework and visual design primarily through the manipulation of CSS and HTML5. This will be evaluated in a “Phase One” progress critique and count towards 30% of your final Project-1 grade; the possible 30-point grade assessment will be determined at the time of the ‘Phase One’ progress critique (not at the end of the full project completion), so it is important to stay on schedule, as it is considered a progressive part of the larger Project-1 grade.

This design work requires a single, fully-responsive template page (and necessary style sheets) reflecting the intended visual design of your choice. That means the you will need to make baseline decisions on the structure and component styling to accommodate most typical types of content element tags (see “HTML Requirements” below). You are provided with a starting HTML5 template structure, and you will need to do the ‘CREATING A MOBILE-FIRST DESIGN TEMPLATE’ tutorial to get ideas on how to approach your styling in a mobile-first, template based approach.

To see all technical requirements necessary for completing the initial responsive design, look at the “HTML Requirements” and “CSS Requirements” further down on the page.

^Back to Top^

Phase Two

Participation (10 pts)

PHP Practice Lessons

To earn participation points during Phase Two, the instructor will monitor your progress on the practice lessons. These are practice lessons that correspond with the basic lectures/demos on different data types (strings; arithmetic integers, float, and operators; arrays), logical expressions, loops, and functions. They will be progressively assigned in Canvas, week-by-week. Even though these practice lessons are not each explicitly graded on a specific set of criteria, it is imperative that you keep up with them to be able to synthesize their intrinsic functionality into your dynamic website. You should upload your practice files that you create to the class server in a “dev” folder in your student directory for periodic instructor monitoring. For a quick list of the demos and practice lessons you can jump to the bottom of this page in the “resources” section.

Modularizing the ‘template.php’ file (essential and mandatory)

The idea behind this part of the assignment is to see how you can take out portions of a page to create modular components of a template. Sections of which you would create template modules are typically things that will, for the most part, remain the same on all pages of the website. These are usually unifying elements such as the top banner area, navigation, and page footers.

What is important to understand, though, is that you don’t only modularize the tags located in the <body>, but you can also include elements starting with the doctype and down to the closing html tag.

To see how to do this using the “include()” function, watch the demo videos.

///—///—///—///

Optional but recommended: adding a jQuery mobile menu to the template

One thing you might notice if you have followed the template demo closely is that the navigational menu in mobile view stays expanded. Because this takes up valuable real estate, you should consider adding javascript functionality to the menu so that it collapses into an expandable menu in ‘mobile’ view. It also covers how to create an accessible fallback method in the event the client borwser has Javascript disabled. To learn how to do this, you can watch the following 5-part video demo series, “Project1 – Mobile JS Menu ” (~53 minutes total).

^Back to Top^

Phase Three

Technical Functionality (50 pts)

Adding PHP Scripts for Functionality

All PHP, JS, HTML, and CSS should be completely functional and meet the specifications of the “Technical Requirements” section below.

To see all technical requirements necessary for implementing your mandatory scripts, look at the “PHP Requirements” further down on the page.

Final Design Enhancements (10 pts) 

Finalizing Design Work, Propagating New Files, Adding Content

As you implement your PHP functions and Javascript, you will likely find that you need to adjust your HTML and CSS styling to make elements look nice and to keep new styles from breaking or interfering with original styles. Any additional enhancements will also be taken into consideration in this evaluation.

The final part of this assignment will help you see how nice it is to have the head and foot template modules already intact.

If you do not want to develop your own content for the site (or if you don’t have time to do so), the pages you generate from the templates will be based on your research and discussion board responses to the first three “Topical Research” discussions in the class. If you feel that you did not do a good job of explaining the topics in the discussions, you should go back and do a better job for this project’s pages. Each page should invoke the “displayImages()” function in some way. This  “displayImages()” function should be declared once in the centrally located functions.php page, and called on each page of your site at least once. Because of the way that the function works, you can call it multiple times on a single page if necessary (for multiple galleries, slideshows, random images, background images (etc.).

To get started with Phase Three:

First, watch the 3-part video demonstration series called Project1 -Adding Functions – pageName to help you understand how to start repurposing what you learned in practice lessons so that you can implement it in your template. This series will cover how to write a script dynamically naming your page (among other things), how to create a function out of that script, how to isolate it in a separate ‘functions.php’ file, and finally how to use that function in your template. Furthermore it will show you how to create content pages and navigation for the purposes of testing the script.

In the video lessons above, you will duplicate your “template.php” file four times, and rename each one: ‘index.php’, ‘scripting.php’,’responsive_web_design.php’, and ‘web_CMS.php’. IF you choose to make a site using some other content, you should name these files accordingly since they will affect what appears in your title and page heading.

Secondly, open your head include file and update the navigational links so that they all work with the new file names. Also do this in the foot include file if you have page navigation down there, too.

Third, open each file and add appropriate content to each one. If you need to do additional styling to your css after you have added content so that the pages look nice, DO SO.

By the time you are finished, you should have a total of four pages in the website (home page, and three other article pages).

^Back to Top^

Grading Summary:

Phase One
30 – Initial Responsive Design

Phase Two
10 – Participation

Phase Three
50 – Technical Functionality
10 – Final Design Enhancements

————-
100 – Total points in Project-1

^Back to Top^


Technical Requirements

HTML Requirements

  1. HTML5 with proper markup
  2. Meta tag to limit viewport width and scaling
  3. Minimum of one Google Web Font with at least two styles or font-weights
  4. You must use following elements at a minimum:
    • DOCTYPE (HTML5)
    • html
      • head
        • meta (for viewport device width)
        • title
        • link (for external css and font links)
      • body
        • section
        • article
        • header
        • h1, h2
        • nav (with a nested unordered list for links)
        • a
        • img
        • p
        • blockquote
        • one or more of the following in the article: ul, ol, dl+dt+dd
        • footer

CSS Requirements

  1. Minimum of 1 Google font with two styles or weights
  2. All css must be in external sheet unless inline or embedded styling needs to dynamically generated on select pages/areas of the site.
  3. @viewport and @-ms-viewport CSS selectors (see demo for more info)
  4. Fluid layout design (layout components mostly in % and ems)
  5. Create a custom graphic for your page banner that can scale up to a large screen size without losing too much quality.
  6. Make all images placed in the HTML with the ‘img’ tag scalable in your css. They can have a max-width, though.
  7. Use a CSS3 transition on at least one element
  8. Use at least one of the following: box-shadow, text shadow, border-radius
  9. Be sure to style fonts with attractive line-height, weight, spacing, etc. Do not leave default values. Also, be sure to optimize font sizes for each responsive view if necessary for optimal viewing.
  10. Be cognizant to apply margins and padding to page elements with sound design principles. Do not leave defaults. These will also likely change in different responsive views.
  11. STYLE ALL IMAGES AND GALLERIES that are dynamically generated by the displayImages() function. Do not leave them haphazardly floating without “clears” or marginless. Make them attractive.

PHP Scripting Requirements

Note: It will save you LOADS of time and frustration to create section “A” below before items in section “B.”

-A-

  1. Make header include file (contains doctype to end of repeatable header section)
  2. Make footer include file (contains repeatable footer through closing html tag)
  3. Replace the include content in each page with the appropriate “include()” command so that headers and footers in every page are called from one header and one footer source file.

-B-

Based on the class lesson demonstrations, create functions that do the following:

  1. function that generates page title AND the banner’s h1 based on filename. Be sure to strip “.php” and replace any underscores or hyphens with a space using str_replace(). This should have a condition that also assigns a new display name for the index page. Store the actual function in the “functions.php” page.
  2. dynamic copyright function that is called in the footer. Store the actual function in the “functions.php” page.
  3. each page should include some implementation of the displayImages() function that you created.
    • These galleries should pull images automatically from the file system as in class demonstrations.
    • You are required to use each implementation of the function a minimum of one time somewhere in the site. There are four implementations:
      1. random <img> image placed in HTML
      2. random css background image
      3. lightbox thumbnail gallery
      4. cycle2 plugin slideshow carousel
    • Static html galleries (hard-coded) will not be accepted.
    • Store the actual function in the “functions.php” page.

(Note: all required functions above must be stored in “function.php” page and called in either header or footer.)

^Back to Top^


Uploading

Although you are required to upload your final work to the class server for final grading in your student directory, it is highly recommended to periodically upload your files to the class server to test them and make sure that you don’t run into unexpected issues.

A common issue you might run into on the class server:

Problem: “I uploaded my work to the server but it’s not there when I look for it in a web browser.”

    • Possible Answer: Be sure that you placed your work via FTP in your student class server directory: “/project1/” folder. If you name the folder ANYTHING else, the student launch page will have a broken link to your project. Be sure to name your entry file “index.php” and not something else, like “home.php”.

Troubleshooting and instructor help

If you are requesting help from the instructor with your code, you must first upload the work on the class server before contacting her. Do not email files or copy and paste code in emails. The instructor needs to see your complete website environment to efficiently assess most problems.

Please use the appropriate “TECH HELP” weekly discussion board in Canvas to see if anyone else already had the same questions as you. If you don’t find a resolution there, please post your new question, as other students might have immediate solutions for you before I am able to respond.

^Back to Top^

Useful Project Resources

Resources

PHP

Practice Lessons related to this project:
THE PHP PROCESS EXPLAINED
LESSON 01: GETTING STARTED WITH PHP
LESSON 02: DATA TYPES
LESSON 03: DATA TYPES – STRINGS
LESSON 04: ARITHMETIC OPERATORS, INTEGERS, AND FLOATS
LESSON 05: BOOLEANS AND NULL
LESSON 06: CONSTANTS
LESSON 07A: ARRAYS OVERVIEW
LESSON 07B: ARRAY FUNCTIONS
LESSON 08: LOGICAL EXPRESSIONS
LESSON 09 : LOOPS OVERVIEW
LESSON 09b : INCLUDE FUNCTION DEMONSTRATIONS
LESSON 10 : FUNCTIONS
CREATING A GALLERY FUNCTION
http://php.net

CSS Basic Review on Layout

CSS3 Design Tools

Here are some good CSS3 resources to help you design quickly without too much focus on fussy raster image creation details (drop-shadows, rounded corners, etc).

Free Web Fonts

http://www.google.com/webfonts

Background Image Patterns:

Free Stock Images (great for textures, etc.):

http://www.morguefile.com/

Awesome Color Palette Tool

http://colorschemedesigner.com/  ***This site will generate hexadecimal values for you for all color samples.

^Back to Top^

Digital Art, Design, and Communication Education