Responsive Web Design with PHP Scripting
30% of Semester Grade
Quick Links on this Page:
- Overview
- Objectives
- Project Phases and Grading
- Technical Requirements
- Uploading to Class Server
- Useful Project Resources
Overview
The Basics
You will create a completely responsive website, featuring a minimum of 4 pages, that uses a foundation-level php ‘include’ file template system. Additionally, you will be required to implement several custom PHP functions to automate portions of the site, as well as develop a basic content strategy for the topic you choose for the site design. Although this project is highly technical, you will also be graded significantly on visual design sophistication and relevance to the topic.
Progressive Phases and Due Dates
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.
Topic / Content Options
Because this is a labor-intensive project, the instructor will provide you will some different topic options, along with “client” content and direction. If you don’t find any desirable for your portfolio needs, you can propose a new option to the instructor.
Assignment Objectives
- Create a fully responsive, mobile-first website
- Successfully implement various PHP scripts
- Successfully implement a php template system, along with a library of user-defined functions
- 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. Click the desired phase requirement or grading summary section below to view the complete process information for each.
Phase One : Template HTML/CSS/JS Design
Initial Responsive Template 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, HTML5, and some simple JavaScript.
Phase 1 Grading Considerations
- This will be evaluated in a “Phase One” progress critique and count towards 30% of your final Project-1 grade.
- The 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 phase requires a single, fully-responsive template page (and necessary style sheet) reflecting the intended visual design of your choice, and the final design should be based on the design needs of the “client’s” content and communication goals. That means you will need to make baseline decisions on the structure and component styling to accommodate most typical types of content element tags
- To see all technical requirements necessary for completing the initial responsive design, look at the “HTML Requirements“, “CSS Requirements“, and “JavaScript Requirements” further down on the page.
Instructions on how to start Phase ONE :
- First decide on the subject you would like to choose for your site. This semester the instructor-provided options (which include most content) are as follows:
- Developing a site for a fictional electrical services company (an electrician’s site). Download electrician file resources.
- Developing a site for a fine artist’s portfolio. Choose the fine artist below (real person) to download her file resources for use on this project. NOTE: you can also use the same content for the final project if you want to compare content development strategies between Project-1 and Project-3.
Barbara Holmes: assets | RFP | current site - Developing an informational site that uses your own written articles that are thorough discussion responses on Responsive Design, Server-Side Scripting, and Web-CMS. You will also need to find your own accompanying images for this as well.
- Lastly, you can propose something to the instructor, providing a complete outline of the site and the content it will have. You must first get approval to do this option.
- Next, download the starting HTML5 template structure.
- Then do the 7-part tutorial, ‘CREATING A MOBILE-FIRST DESIGN TEMPLATE’, to get ideas on how to approach your styling in a mobile-first, template-based approach. You are NOT allowed to use Bootstrap or other predefined design structure. You need to design from “scratch,” and while you need to watch the above tutorial for guidance, you are also required to customize your work so that it does not look like the boring demo template.
- Lastly, do the 3-part video demo series, “Project1 – Mobile JS Menu ” (~53 minutes total) to create a collapsible, responsive jQuery mobile menu.
Progressive Phase ONE Due Date
You will find the due date for this progressive assignment phase in our MAT-225 Canvas course.
Student work examples :
NOTE: These are some examples of how other student projects ended up looking at the very end after Phase THREE, but the basic visual design was solidified by the end of Phase ONE. (There is no audio on the video below. All images you see in the site examples are dynamically generated using the functions you will later build.)
Live examples: SD Sushi | Produce Organic | Halloween Candy | Research-Driven
Phase Two : PHP Scripting Progress and jQuery Menu
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 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 the practice files you create, and place them in a “dev” folder in your class server student directory for periodic instructor monitoring. Here’s a quick list of the demos and practice lessons you will be progressively assigned:
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
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, you need to follow and watch the demo PROJECT-1 INCLUDE video.
Phase Three : PHP Integration and Final Design
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.
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.
At least two pages are required to invoke the “displayImages()” function in some way, and you must integrate the functionality of all four image display methods throughout the site somehow. That means you need to think about different design strategies, depending on the content and subject you select for the project. 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 2-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.
- Second, in the video lessons above, you will duplicate your “template.php” file four times, and rename each one based on what you want the page names to be. You should name these files accordingly since they will affect what appears in your title and page heading (example: “about_us.php = About Us” after using PHP filters).
- Third, open the include file that loads the top portion of your pages (i.e. “head.inc.php), and update the navigational links so that they all work with the new file names. Also do this in the foot include file (i.e “foot.inc.php”) in the <noscript> navigational section, too. This section will be then if you followed the jQuery mobile menu demo instructions.
- Fourth, 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. You are REQUIRED to add images and styles them within the HTML using <img> tags, even though the demo didn’t explicitly walk you through doing so.
- Note that by the time you are finished, you should have a total of four pages in the website (home page, and three other article pages).
- Important: if you did not already do the assigned displayImages function exercise as part of phase two, you MUST still do it and incorporate the feature into the site to get a passing grade on this project.
Phase One
30 – Initial Responsive Design
(template design + mobile menu)
Phase Two
10 – Participation
(doing/uploading practice files to server + setting up template top/bottom includes)
Phase Three
50 – Technical Functionality (php functions, etc.)
10 – Final Design Enhancements (improvements + styling new gallery features)
————-
100 – Total points in Project-1
(Project-1 is 30% of final semester grade.)
Technical Requirements
***IMPORTANT: Be aware that the Phase-3 point assignment is primarily dependent on the PHP Requirements all working well within the site. Do not underestimate how much neglecting the required functions will impact your grade. Phase-3 is worth HALF of this full project’s grade.
HTML Requirements (PHASES 1 + 3)
- HTML5 with proper markup
- Meta tag to limit viewport width and scaling
- Minimum of one Google Web Font with at least two styles or font-weights
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 (PHASES 1 + 3)
- Minimum of 1 Google font with two styles or weights
- All css must be in external sheet unless inline or embedded styling needs to dynamically generated on select pages/areas of the site.
- @viewport and @-ms-viewport CSS selectors (see demo for more info)
- Fluid layout design (layout components mostly in % and ems)
- Create a custom graphic for your page banner that can scale up to a large screen size without losing too much quality.
- Make all images placed in the HTML with the ‘img’ tag scalable in your css. They can have a max-width, though.
- Use a CSS3 transition on at least one element
- Use at least one of the following: box-shadow, text shadow, border-radius
- 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.
- 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.
- PHASE THREE : 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.
JavaScript Requirements (PHASES 1 + 2)
- PHASE ONE: Collapsable and responsive mobile menu using jQuery, with accessible fallback option for when JavaScript is disabled.
- PHASE TWO/THREE : Lightbox and Cycle2 jQuery plugins for thumbnail image and carousel image galleries. If you want to deviate from the tutorial to use a different js plugin for similar functionalities, that is fine as long as it is completely functional. STATIC, NON-DYNAMIC GALLERIES ARE NOT ACCEPTABLE.
PHP Scripting Requirements (PHASE 3)
Note: It will save you LOADS of time and frustration to create section “A” below before items in section “B.”
-A-
- Make header include file (contains doctype to end of repeatable header section)
- Make footer include file (contains repeatable footer through closing html tag)
- 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:
- function that generates page title AND the banner’s h2 (page identifier) 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.
- dynamic copyright function that is called in the footer. Store the actual function in the “functions.php” page.
- at least two pages should include some implementation of the displayImages() function that you created, but you must use all gallery function methods.
- 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:
- random <img> image placed in HTML
- random css background image
- lightbox thumbnail gallery
- cycle2 plugin slideshow carousel
- !!!!Static html galleries (hard-coded) will not be accepted. This represents a LARGE portion of the grade!
- Store the actual function in the “functions.php” page.
(Note: all required functions above must be stored in “function.php” page, that is to be included in the top-loading include template file, such as the “head.inc.php” page.)
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.
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
- Mobile-First Responsive Web Design (good article by Brad Frost)
- http://redmelon.net/tstme/box_model/ (Need a review on the box model? This is a great interactive diagram.)
- http://www.barelyfitz.com/screencast/html-training/css/positioning/ (This is a great explanation of positioning with css.)
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).
- CSS Reset: http://www.cssreset.com/
- http://html5css3box.com/rgba/ ***This one is awesome and links to a lot of other tools, too!
- http://css3generator.com/
- http://border-radius.com/
- http://www.colorzilla.com/gradient-editor/
- Font Shorthand Order
- CSS3 Transitions
Free Web Fonts
http://www.google.com/webfonts
Background Image Patterns:
Free Stock Images (great for textures, etc.):
Awesome Color Palette Tool
http://paletton.com/ ***This site will generate hexadecimal values for you for all color samples.