Advanced Web Design (DIG 112) Spring 2015
Tues/Thur 9:30 am - 10:45 am D-BLDG 106
Niagara County Community College
Course Description
Advanced Web Design builds upon the basic HTML5 and CSS skills learned in Introduction to Web Design. This course introduces the student to various techniques, standards, and software packages that are used to add interactivity, responsiveness, and multimedia-style effects to web pages. Topics include: Cascading Style Sheets for layout and formatting of web pages, forms, server side technologies such as PHP: Hypertext Preprocessor, Search Engine Optimization, coding for mobile devices, file management, and web site maintenance. Technologies such as File Transfer Protocol (FTP), JavaScript, embedding video and audio, and accessibility issues are also addressed. The web design software package, Adobe Dreamweaver, is used to for coding, file management, and file transfer to the web server. Prerequisite: DIG 111 or permission of instructor
Prerequisites: Digital Media 111 as PREQ
General Requirements: (Course or Test: DIG 111 Minimum Grade of D-
May not be taken concurrently.)
Instructor Information
Name: Jim Gerland
Office: D-Bldg 101
Office Hours: Tuesdays/Thursdays 9:00 AM - 11:15 AM, or by appointment
Office Phone/Voice Mail:
Email: (The best
way to reach me)
Course Identification
Credit Hours: 3
Course meeting times: Tuesdays/Thursdays 9:30 AM - 10:45 AM (D-BLDG 106)
Expected Student Outcomes
Upon the successful completion of this course, a student will be able to:
- Plan, design, and produce a dynamic, organized, navigable, and visually appealing web site utilizing HTML, CSS, JavaScript PHP, and MySQL.
- Produce web pages and web sites that incorporate the principles of organization, layout, navigation, typography, color, and graphic design.
- Create dynamic web pages using the PHP scripting language with a MySQL back-end database.
- Understand database concepts and manage a back-end web-based database.
- Use FTP to successfully maintain and manage files on a web server.
- Produce web pages and web sites that comply with web standards established by the World Wide Web Consortium.
- Use code validation to insure compliance of HTML and CSS with web standards.
Class Schedule
Date | Textbook Reading | Chapter | Assignments | |
---|---|---|---|---|
January 20 | Introduction to Dynamic Web Content | Nixon 1 Krug 1 |
Create Your Home Page | |
January 22 | Exploring JavaScript (Why document.write()?) |
Nixon 14 | Create JavaScript Page Brief Introduction Due |
|
January 27 | Expressions and Control Flow in JavaScript |
Nixon 15 Krug 2 |
Home Page Due | |
January 29 | Expressions and Control Flow in JavaScript |
Nixon 15 | ||
February 3 | JavaScript Functions, Objects and Arrays |
Nixon 16 Krug 3 |
||
February 5 | JavaScript Functions, Objects and Arrays |
Nixon 16 | ||
February 10 | Setting Up a Development Server | Nixon 2 Krug 4 |
Setup Web Server | |
February 12 | Introduction to PHP | Nixon 3 | PHP Page JavaScript Page Due |
|
February 17 | Expressions and Control Flow in PHP | Nixon 4 Krug 5 |
||
February 19 | Expressions and Control Flow in PHP | Nixon 4 | Web Server Due | |
February 24 | PHP Functions and Objects | Nixon 5 Krug 6 |
Loop/Function/Arrays | |
February 26 | PHP Arrays | Nixon 6 Krug 7 |
||
March 3 | CCI Day - No Class | |||
March 5 | PHP Arrays | Nixon 6 Krug 8 |
PHP Page Due | |
March 10 | Practical PHP | Nixon 7 Krug 9 |
||
March 12 | Practical PHP | Nixon 7 | Create a PHP I/O Page | |
March 17 | Introduction to MySQL | Nixon 8 Krug 10 |
Loop/Function/Arrays Due | |
March 19 | Introduction to MySQL | Nixon 8 | ||
March 24 | Mastering MySQL | Nixon 9 Krug 11 |
||
March 26 | Mastering MySQL | Nixon 9 | ||
March 31 | Accessing MySQL Using PHP | Nixon 10 Krug 12 |
MySQL Table PHP I/O Page Due |
|
April 2 | Using the mysqli Extension |
Nixon 11 | PHP MySQL Form Page | |
April 7 | Spring Recess | |||
April 9 | Spring Recess | |||
April 14 | Form Handling | Nixon 12 | MySQL Table Due | |
April 16 | Form Handling | Nixon 12 | Final - Krug Web Site | |
April 21 | JavaScript and PHP Validation and Error Handling |
Nixon 17 | PHP/MySQL Table Due | |
April 23 | JavaScript and PHP Validation and Error Handling |
Nixon 17 | ||
April 28 | Bringing It All Together | Nixon 26 | PHP MySQL Form Page Due | |
April 30 | Bringing It All Together | Nixon 26 | Krug Web Site Due | |
May 5 | In-Class Presentations | |||
May 7 | In-Class Presentations | Last Day of class All Work Due By 11:59 PM tonight |
||
Back to Top |
Textbook
Learning PHP, MySQL, JavaScript, CSS & HTML5 3rd Edition
Robin Nixon (O'Reilly 2014, ISBN 978-1491949467)
Chapter Data Files (zip)
(Unzipped)
Book is Required!
Free Bonus
This book also includes a free license for CSE HTML Validator Standard v12 for Windows, an HTML and CSS editor and validator, which can also check PHP syntax with an additional free download. Use this product to validate your web projects so that they are less likely to contain bugs, and are more likely to run on as many different platforms as possible.
To start using your free license, please download and install the program.
To register the program, please:
- Install and run CSE HTML Validator
- Select the license key in the panel below
- Press Ctrl-C to copy the key
- Choose 'Register Program' from the CSE HTML Validator 'Help' menu
- The license information will be automatically entered into the registration dialog
Don't Make Me Think Revisited
A Common Sense Approach to Web Usability
Steve Krug / Pearson Education / 2013 / 216 pages
ISBN-13: 978-0-321-96551-6
Book is Required! Three (3) copies are available
on Library Reserve
* USB Flash Drive is highly recommended
Grading
Assignments
Nine (9) Individual Assignments worth a total of 81 points.
Final Web Site: 10 points
In-class/Discussion Forums participation: 9 points
Assignments and Methods of Evaluating Student Progress
All assignments are due at the start of the class noted on the schedule. They must be submitted in the appropriate Discussion Forum unless otherwise specified. Late assignments lose .5 point per class late up to a maximum of three (3) late points.
Format
Assignments are to be professionally prepared, documented, cited, and organized. Proofread and spell-check all assignments, include your name, date, course number and description/comments of the assignment.
Extra Credit
There are no opportunities for extra credit. Please plan accordingly
NCCC Grading Scale
Letter Grade | Total Points |
---|---|
A | 95 - 100 |
A- | 92 - 94 |
B+ | 89 - 91 |
B | 85 - 88 |
B- | 82 - 84 |
C+ | 79 - 81 |
C | 75 - 78 |
C- | 72 - 74 |
D+ | 69 - 71 |
D | 65 - 68 |
F | 64 - 0 |
Assignments
Create Your web2.niagaracc.suny.edu
Web Page (9 points)
For this Assignment you will use your existing HTML, CSS, and JavaScript knowledge to create a web page
named index.html in your web2.niagaracc.suny.edu
account web space which will be used as the
starting page for the rest of your Assignments for this course. You may modify an existing index.html file
to meet the requirements below. Your web page should should be HTML5 and CSS3 compliant, should be well-designed,
user friendly, easy to navigate and utilize the HTML5 tags, CSS3 styles and JavaScript. You will need to upload
an image of yourself to your NCCC Web Space. You web page should:
- Use appropriate
<!doctype html>
tag indicating that this is an HTML5 web page. - Use appropriate
<html>
,<head>
, and<title>
tags to give your page a title that contains your name. Appropriate<meta>
tags with content describing keywords for the author, text-editor used, and SEO information. - Use appropriate HTML5, CSS-styled tags that identify this as your web p age including your name, an
<img>
tag with appropriate src and alt values, along with width, and height CSS Styles that insert a graphic image of yourself on your page and a brief paragraph about yourself. - Display an ordered list of the assignments for this course. In future assignments you will be converting each of these entries to web links that will allow me to view each assignment.
- Use appropriately identified and styled
<div>
tags for the various areas of your page layout.
You *MUST* use the W3c validator page at http://validator.w3.org/ to verify your code andhttp://jigsaw.w3.org/css-validator/ to verify your CSS styles.
Your web URL to view your web page is: http://web2.niagaracc.suny.edu/~your-userid/
When you have this Assignment ready for me to view and grade you should post a note in the Home Page Discussion Folder with the URL of your web page so I can click on that link and open your Assignment in a new browser window (target="_new").
Back to AssignmentsAdd JavaScript to Your web2.niagaracc.suny.edu
Web Page (9 points)
For this Assignment you will modify your home page, index.html, in your web2.niagaracc.suny.edu
account
web space. You will replaces the static HTML5/CSS ordered list with JavaScript. This modification should:
- Use a JavaScript array store the names of the assignments for this course.
- Create a JavaScript function that generates HTML5/CSS code to create an ordered list of these assignments. In future assignments you will be converting each of these entries to web links that will allow me to view each assignment.
You *MUST* use the W3c validator page at http://validator.w3.org/ to verify your code andhttp://jigsaw.w3.org/css-validator/ to verify your CSS styles.
Your web URL to view your web page is: http://web2.niagaracc.suny.edu/~your-userid/
When you have this Assignment ready for me to view and grade you should post a note in the JavaScript Page Discussion Folder with the URL of your web page so I can click on that link and open your Assignment in a new browser window (target="_new").
Back to AssignmentsSetup Your WAMP (Windows) or MAMP (Mac) Web Server (9 points)
For this Assignment you will download and install either the WAMP (Windows, Apache, MySQL, and PHP) or the MAMP (Macintosh, Apache, MySQL, and PHP) software bundle on a local machine. You will test and verify this installation by creating a screen capture of the start page, the phpInfo, phpMyAdmin, and the SQLBuddy (Windows) or SQLite Manager (Mac) pages. You will then upload these four (4) images (server.png, phpinfo.png, phpmyadmin.png, and either sqlbuddy.png (Windows) or sqlitemanager.png (Mac)), to your NCCC Web Space. You will then create a web page named myserver.html in your account web space. This web page should:
- Use appropriate
<html>
,<head>
, and<title>
tags to give your page a title that contains your name. - Use appropriate
<img>
tags (and values) to display the four (4) above named screen shots indicating your successful installation of WAMP or MAMP.
You will modify the JavaScript for this item in your index.html page to add a link for this assignment that allows me to view your work.
You *MUST* use the W3c validator page at http://validator.w3.org/ to verify your code and http://jigsaw.w3.org/css-validator/ to verify your CSS styles.
When you have this Assignment ready for me to view and grade you should post a note in the Web Server Setup
Discussion Folder with the URL of your web page so I can click on that link and open your Assignment in a new browser window.
Back to Assignments
Create Your First PHP Web Page (9 points)
For this Assignment you will create a web page named dig112.php on your local web server using your favorite text editor, notepad++ (Windows) or textWrangler (Mac). This file should be based on your index.html file. This web page should:
- Use PHP to generate the following HTML:
- An appropriate
<!doctype html>
tag indicating that this is an HTML5 web page. - Appropriate
<html>
,<head>
, and<title>
tags to give your page a title that contains your name. Appropriate<meta>
tags with content describing keywords for the author, text-editor used, and SEO information. - Appropriate HTML5, CSS-styled tags that identify this as your web page including your name, an
<img>
tag with appropriate src and alt values, along with width, and height CSS Styles that insert a graphic image of yourself on your page and a brief paragraph about yourself. - You should use appropriately identified and styled
<div>
tags for the various areas of your page layout.
- An appropriate
- Use appropriate PHP comments throughout your code.
You will modify the JavaScript for this item in your index.html page to add a link for this assignment that allows me to view your work.
When you have this Assignment ready for me to view and grade you should post a note in the PHP Page Discussion Folder
with the URL of your home web page so I can click on that link and open your Assignment in a new browser window (target="_new").
Back to Assignments
Create a PHP Web Page That Uses a Loop, a Function, and Arrays (9 points)
For this Assignment you will create a web page named dig112_lfa.php on your local web server using your favorite text editor, notepad++ (Windows) or textWrangler (Mac). This web page should:
- Use appropriate HTML5, CSS-styled tags that identify this as your web page including your name and a brief paragraph describing how you approached solving this problem.
- Use PHP to generate the following HTML:
- An appropriate
<!doctype html>
tag indicating that this is an HTML5 web page. - Appropriate
<html>
,<head>
, and<title>
tags to give your page a title that contains your name. Appropriate<meta>
tags with content describing keywords for the author, text-editor used, and SEO information.
- An appropriate
- Use PHP to:
- Create a function that generates an HTML5/CSS table of three (3) columns: the month number, name of the month, and number of days in that month.
- This function should use PHP Arrays to the store name of the months and days in each month.
- This function should use a PHP Loop to walk through the months names array and generate HTML5/CSS to display the table.
- This function should use a PHP conditional (
if
) test to determine whether the row is odd or even and use appropriate CSS to make the even rows a different background/foreground color than the odd rows.
- Use appropriate PHP comments throughout your code.
- Modify your JavaScript that uses an array of the Assignments for this course to display an ordered list of these assignments to convert the entry for this assignment to a web link that allows me to grade your work.
You will modify the JavaScript for this item in your index.html page to add a link for this assignment that allows me to view your work.
When you have this Assignment ready for me to view and grade you should post a note in the PHP Loop/Function/Array Page
Discussion Folder with the URL of your home web page so I can click on that link and open your Assignment in a new browser window
(target="_new").
Back to Assignments
Create a PHP Web Page That Reads and Writes a Text File (9 points)
For this Assignment you will create a web page named dig112_io.php on your local web server using your favorite text editor, notepad++ (Windows) or textWrangler (Mac). This web page should:
- Use appropriate HTML5, CSS-styled tags that identify this as your web page including your name and a brief paragraph describing how you approached solving this problem.
- Use PHP to generate the following HTML:
- An appropriate
<!doctype html>
tag indicating that this is an HTML5 web page. - Appropriate
<html>
,<head>
, and<title>
tags to give your page a title that contains your name. Appropriate<meta>
tags with content describing keywords for the author, text-editor used, and SEO information.
- An appropriate
- Use PHP to:
- Create a function that reads the text file dig112_io.txt which can be downloaded from the Course Documents area of our NCCCBlackboard course.
- This function should use PHP Arrays to store records (each line is a "record").
- This function should use a PHP Loop to walk through the months names array and generate HTML5/CSS to display the table.
- This function should use a PHP conditional (
if
) test to determine whether the row is odd or even and use appropriate CSS to make the even rows a different background/foreground color than the odd rows. - Create a function that writes the text file dig112_ior.txt (reverse order).
- This function should use PHP for loop to walk through the Array in reverse order and write each Array entry (line/record) to the dig112_ior.txt file.
- Use appropriate PHP comments throughout your code.
- Appropriate HTML5, CSS-styled tags that identify this as your web page including your name and a brief paragraph describing how you approached solving this problem.
- You should use appropriately identified and styled
<div>
tags for the various areas of your page layout. - Modify your JavaScript that uses an array of the Assignments for this course to display an ordered list of these assignments to convert the entry for this assignment to a web link that allows me to grade your work.
When you have this Assignment ready for me to view and grade you should post a note in the PHP Input/Output Page
Discussion Folder with the URL of your home web page so I can click on that link and open your Assignment in a new browser window
(target="_new").
Back to Assignments
Create and Populate a MySQL Table (9 points)
For this Assignment you will create a well-designed HTML5/CSS page, mysql_db.php on your local web server using your favorite text editor, notepad++ (Windows) or textWrangler (Mac). This file should be based on your index.php file. This web page should:
- Create a form with a simple "Import Months" button.
- When that button is clicked, call a PHP function that:
- Connects to your MySQL server.
- Generates MySQL commands to
CREATE
a MySQL table, monthsTable, with these fields: monthsID (INT), monthName (CHAR, 10), monthDays (INT, 2). Good idea to have your first SQL statement be:DROP TABLE IF EXISTS monthsTable;
- If the table
CREATE
command is successful, call a PHP function (reuse the function from the PHP I/O assignment) that reads the text file dig112_io.txt which can be downloaded from the Course Documents area of our NCCCBlackboard course. - This function should use PHP to generate MySQL commands to
INSERT
each line (record) in that file, as it is read,INTO
the monthsTable. - Displays a "Successful" or "Unsuccessful" message when complete.
- Use phpMyAdmin to Browse the monthsTable. Save a screen capture of this page and upload that image (mysql_db.png) to your NCCC Web space.
You will modify the JavaScript for this item in your index.html page to add a link to your mysql_db.png that allows me to view your work.
When you have this Assignment ready for me to view and grade you should post a note in the MySQL Table Page
Discussion Folder with the URL of your home web page so I can click on that link and open your Assignment in a new browser window
(target="_new").
Back to Assignments
Create a PHP Table Page From a MySQL Table (9 points)
For this Assignment you will create a page, php_mysql_table.php on your local web server using your favorite text editor, notepad++ (Windows) or textWrangler (Mac). This file should be based on your index.php file. This web page should:
- Use PHP to:
- Create a PHP function that:
- Connects to your MySQL server.
- Requests (
SELECT
) all records in (FROM
) the monthsTable. - Generates HTML5/CSS to display the results set as an HTML table.
- Create a PHP function that:
- This function should use a PHP conditional (
if
) test to determine whether the row is odd or even and use appropriate CSS to make the even rows a different background/foreground color than the odd rows. - Use appropriate PHP comments throughout your code.
- Appropriate HTML5, CSS-styled tags that identify this as your web page including your name and a brief paragraph describing how you approached solving this problem.
- You should use appropriately identified and styled
<div>
tags for the various areas of your page layout. - Modify your JavaScript that uses an array of the Assignments for this course to display an ordered list of these assignments to convert the entry for this assignment to a web link that allows me to grade your work.
You will modify the JavaScript for this item in your index.html page to add a link for this assignment that allows me to view your work.
When you have this Assignment ready for me to view and grade you should post a note in the PHP/MySQL Table Page
Discussion Folder with the URL of your home web page so I can click on that link and open your Assignment in a new browser window
(target="_new").
Back to Assignments
Create a PHP Form Page That Writes to a MySQL Table (9 points)
For this Assignment you will create a page, php_mysql_form.php on your local web server using your favorite text editor, notepad++ (Windows) or textWrangler (Mac). This file should be based on your index.php file. This web page should:
- Create one (1) table named contactsTable.
- This table would have three (3) fields: contactID (INT), contactFrirstName (CHAR, 15), contactLastName (CHAR, 30), contactAddress (CHAR, 30), contactCity (CHAR, 30), contactState (CHAR, 2), contactZipcode (CHAR, 9), contactPhone (CHAR, 10), contactEmail (CHAR, 60), contactComments (LONGTEXT), and contactDate (DATE).
- Use HTML5/CSS to create well-design form that collects the necessary information.
- Use PHP to process the form data:
- Validate each field again. If something doesn't validate redisplay the form with the data entered, a message to the user, and places the user in the offending field and allows the user to correct and re-submit.
- If the data is valid then use PHP to create MySQL code to
insert
the datainto
the contactsTable. - Displays a "Thank You" page (that may include the user's name and email, etc.).
- Displays the form again.
- Use JavaScript and HTML5 to validate the form fields as the user enters them and uses JavaScript to place the user's cursor
back into the field which does not validate (
focus()
). - Use appropriate PHP comments throughout your code.
- Appropriate HTML5, CSS-styled tags that identify this as your web page including your name and a brief paragraph describing how you approached solving this problem.
- You should use appropriately identified and styled
<div>
tags for the various areas of your page layout. - Note: This assignment can be approached in various ways:
- You could create three (3) pages:
- A PHP/HTML/CSS/JavaScript page that displays the form and collects the information and where the action= value
of the
<form>
tag calls a separate PHP page, processform.php. - A PHP that process the form data and then displays "Thank You" page
(
header('Location: thankyou.html');
). - A separate HTML page, thankyou.html, that thanks the user for their input.
- A PHP/HTML/CSS/JavaScript page that displays the form and collects the information and where the action= value
of the
- You could create two (2) pages:
- A PHP/HTML/CSS/JavaScript page that displays the form and collects the information and where the action= value
of the
<form>
tag calls a separate PHP page, processform.php. - A PHP that process the form data and then displays a PHP generated HTML page that thanks the user for their input (that may include the user's name and email, etc.).
- A PHP/HTML/CSS/JavaScript page that displays the form and collects the information and where the action= value
of the
- You could create a single PHP/HTML/CSS/JavaScript page that displays the form and collects the information and where the
action= value of the
<form>
tag calls itself and has PHP code at the top that decides whether the form has been submitted, and if it has:- Processes the form data.
- Uses the PHP
header
function to call itself and passes a?thankyou=TRUE
parameter.
- If the thankyou parameter is TRUE then display the a "Thank You" message (that may include the user's
name and email, etc.) and then displays the form to allow the user to submit again.
If it hasn't been submitted and thankyou is not TRUE then simply display the form.
- You could create three (3) pages:
- Modify your JavaScript that uses an array of the Assignments for this course to display an ordered list of these assignments to convert the entry for this assignment to a web link that allows me to grade your work.
You will modify the JavaScript for this item in your index.html page to add a link for this assignment that allows me to view your work.
When you have this Assignment ready for me to view and grade you should post a note in the PHP/MySQL Form Page
Discussion Folder with the URL of your home web page so I can click on that link and open your Assignment in a new browser window
(target="_new").
Back to Assignments
Create a Krug PHP Web Site (10 Points)
For this Assignment you will create a well-designed web site demonstrating your understanding and comments about the Steve Krug book Don't Make Me Think! A Common Sense Approach to Web Usability on your local server. This site should:
- Contain seven (7) pages: a home page (about this site), 5 pages covering the guiding principles of the book, and a final "Contact Me" form page.
- Use a well-designed navigation so that the user can get to any page from any other page in this site. You may want to create a
separate krug-nav.php file and use the
php_include_once
to use the same navigation throughout the site.
You will modify the JavaScript for this item in your index.html page to add a link for this assignment that allows me to grade your work.
When you have this Assignment ready for me to view and grade you should post a note in the Final Krug Web Site
Discussion Folder with the URL of your home web page so I can click on that link and open your Assignment in a new browser window
(target="_new").
Back to Assignments
Classroom Policies and Procedures
Attendance Policy
Class attendance is required at all times. If you must miss a class please talk with the instructor. There are no make-up opportunities for assignments or tests.
Cheating/Plagiarism
Cheating or plagiarism will not be tolerated. If detected, the following procedure will be followed:
1. A failing grade of F or 0% will be entered for the test or other educational activity in question. 2. If the activity is a major test, the student will be assigned a failing grade for the course, mid term or final. 3. The College system for reporting cheating or plagiarism will be followed. See Student Handbook.Ethical Conduct
Each student is responsible for adhering to the Code of Student Conduct as stated in the student handbook. Students involved in any unethical activities in the class are subjected to discipline at the instructor’s discretion. Students are responsible for completion of assigned work. As would be expected of workers in any work environment, students are expected to work independently, to use their initiative in solving problems, and to have professional pride in their work.
Disabilities and Health Issues
Students with disability issues which might make it difficult to complete any assignment, activity or test required in the course should notify the instructor as soon as possible so that appropriate arrangements can be made.