Viewpoint

Notes on Web Design

ADV3652 Web Design III

ADV3652WebIIISpring2011

Course Description

This is an intensive course in design and development of dynamic websites. The course offers a combination of theoretical and practical information on how to combine the PHP scripting language with the MySQL database to produce dynamic web content. Students are expected to have intermediate to expert skills in HTML and CSS. The goal of the course is to give students the experience of designing dynamic web content and demonstrate tasks such as generating images dynamically, sending and managing email, facilitating user discussions and managing content. The purpose is to learn a professional approach to website conceptualization and execution.

Attendance (College) and Lateness (Department) Policies:

A class roster roll will be taken at the beginning of each class. Only two absences may be allowed. After two absences, a student may be withdrawn because of unsatisfactory attendance (code WU). Students arriving after the roll is taken will be marked “late.” Students may be notified at the earliest opportunity in class after they have been absent or late. After being absent two times or equivalent (2 lateness = 1 absence), a student may be asked to withdraw from the class (code W before the College drop deadline, 4/9/08) or may be withdrawn from the class (code WU).

Academic Integrity Standards

You are responsible for reading, understanding and abiding by the NYC College of Technology Student Handbook, “Student Rights & Responsibilities,” section “Academic Integrity Standards.” Academic dishonesty of any type, including cheating and plagiarism is unacceptable. “Cheating” is misrepresenting another student’s efforts/work as your own. “Plagiarism” is the representation of another person’s work, words or concepts as your own.

Grading

90% = Course projects/assignments

Project            40%

Homework        20%

Midterm        10%

Exam            20%

10% = Class preparation/participation/attendance    10%

Recommended text:

Ajax, Javascript and PHP

Phil Ballard

Sams Teach Yourself

ISBN-10: 0-672-32965-4

Build Your Own Wicked WordPress Themes

Allan Cole, Raena Jackson Armitage, et al.

Sitepoint

ISBN: 978-0-9804552-9-8

Other Resources: Kionic.com, enom.com, www.w3.org, Lynda.com.

Class Outline

Class 1: course description; dynamic websites; concept and design. Review CMS-driven websites.

Homework: Conceptualize the project site. Write up a small description. Submit for grade. Consider dynamic aspects. Define list of terms. Choose an appropriate domain name and purchase. Sign up for ISP service.

Class 2: Install a database and WordPress blog.

Break up into teams of 3-4. (Each team will work together throughout the semester. Every team member will build an individual site. The members will critique, direct, support each other.)

Homework: Select and review a WordPress website found in the Showcase section of WordPress.org. (2 weeks). Begin design process. Create 3 alternate logos and 3 interface designs for the project web site. Submit for grade. Be prepared to present the designs to your group and have questions looking for feedback.

Class 3: Learn more about the dashboard, and data organization. Group critiques of web site designs. Team meeting.

Homework: Complete review of WordPress website, prepare to give presentation.

Class 4: Presentations of WordPress website reviews. Scripting Basics: exercises in using variables, strings. Team meeting. Mapping an interface design to the structured CMS.

Homework: Complete class exercises. Design wireframes, look-and-feel designs, create site diagram. Submit for grade. Complete designs based on team feedback.

Class 5: Scripting Basics: exercises in using variables, strings, arrays. Team meeting.

Homework: Complete class exercises. Begin to build template pages in html/css.

Class 6: Scripting Basics continued: exercises in using expressions, functions, objects.  Understanding and designing script logic. Anatomy of a CMS design template. Team meeting.

Homework: Study WordPress theme. Begin writing content for major project.

Class 7: Creating a design template for a CMS. Team meeting.

Homework: Begin building midterm assignment: Completed finalized designs, build homepage and templated page in html/css.

Class 8: Build bare bones custom WordPress theme: header, footer, sidebar, index, style.css, functions. Team meeting.

Homework: Complete barebones theme.

Class 9: (midterm assignment due: finalized designs in html/css and content added to MySQL database) Introduction to template tags. Team meeting.

Homework: Continue development of site design, content, and theme.

Class 10: Introduction to category.php, tag.php, single.php.

Homework: Execute template documents.

Class 11: Custom page templates, category-slug.php, tag-slug.php. Taxonomies.

Homework: Execute page templates, category templates, etc. as needed.

Class 12: More on tags, functions. Consideration of plugins and widgets.

Homework: Working on project site.

Class 13: SEO for dynamic sites. Team meeting.

Homework: SEO project site.

Class 14: Quiz. Studio class. Team meetings.

Homework: Prepare for class presentation of project.

Class 15: Class Critique of students’ final project