04:547:320 Web Design Summer 2013
Anselm Spoerri, Ph.D.
SC&I, Rutgers University
aspoerri@scils.rutgers.edu
Online course (starts May 28, 2013 and ends July 19, 2013)
Course Website (Schedule | Lectures | Requirements | Exercises):
http://comminfo.rutgers.edu/~aspoerri/Teaching/WebDesignSummer/Home.html
Sakai Website (submit Exercises & Quizzes; ask questions in Class Discussions; download Resources)
Course
Description
This course will focus on the conceptual, analytical and technical,
skills need to create well designed and dynamic Web site using
(X)HTML, CSS and client- and server-side scripting technologies.
The course objectives include:
 To teach students the technical skills needed to create effective
Web sites that are dynamic and well designed.
 To study common web usability and design techniques.
 To learn how to create Web pages using Adobe Dreamweaver to
produce (X)HTML and Cascading Style Sheets (CSS) that control
the layout of text and images.
 To create graphics for the Web using Adobe Fireworks.
 To get exposure to client- and server-side scripting technologies.
Students will build a simple data-driven website based on a
provided relational database.
 To give students the opportunity to engage in a planning and
prototyping process to create a Web site as a part of a group
effort.
Course
Organization
The course is a fully online course that provides online lectures
and demos to help students learn the conceptual, analytical and
technical skills needed to create a well designed web site. See
accompanying schedule for list of class topics. Relevant readings and
online videos will be assigned to prepare students for the topics
covered in class.
An external course site hosts the Schedule, Lectures (online
lectures, demos, step-by-step files and resources), Requirements
and Exercises (detailed descriptions and due dates):
http://comminfo.rutgers.edu/~aspoerri/Teaching/WebDesignSummer/Lectures.html
Announcements, submission of Assignments & Quizzes and posting
of questions & answers in Class Discussions are accessible in Sakai.
Class
Schedule
http://comminfo.rutgers.edu/~aspoerri/Teaching/WebDesignSummer/Schedule.html
contains links to weekly lectures and exercise and their due dates.
Week 1 5/28-6/2
Lec1: Introductions / Web Basics
 Course Overview | Web Basics: URLs, (X)HTML
Lec2: Site Development Process
 Planning & Site Development Process | Usability Testing
 Dreamweaver: Understanding Web Site Design | Create Web Page
Week 2 6/3-9
Lec3: Web Design Principles
 Web Design - Layout & Grid System
 Dreamweaver: Add Navigation & Pages | Test & Upload
Lec4: Cascading Style Sheets Basics
 Cascading Style Sheets (CSS) | Dreamweaver: CSS and Stylizing Content
Week 3 6/10-16
Lec5: Design Principles & CSS
 Web Design Principles Summary | Dreamweaver: Creating Flexible Layout
Lec6: Layout Design & Advanced CSS
 CSS: Positioning Elements | Dreamweaver: Positioning Elements, Layout Design
Week 4 6/17-23
Lec7: Interaction Design
 JavaScript & Client-Side Scripting | Dreamweaver: Rollovers and Image Maps
Lec8: Navigation Design
 Dreamweaver: Navigation Design | Fireworks: Images for Navigation Elements
Week 5 6/24-30
Lec9: Dynamic Web
 Dynamic Web | Programming Concepts
 Server Side Scripting: PHP | Databases: Introduction to MySQL
Lec10: Databases & Server Side Scripting (1)
• Server side scripting to get data from a database
• Display database data in HTML page
Week 6 7/1-7
Lec11: Databases & Server Side Scripting (2)
• Continue to work on server-side scripting
Lec12: Databases & Server Side Scripting (3)
• Recap of Key Concepts in MySQL and PHP
Week 7 7/8-14
Lec13: Work on Group Projects | Responsive Design
• Work on group projects
• How to create a site with a fully responsive layout design (optional)
Week 8 7/15-19
Lec14: Course Review | Project Criteria | Working on Projects
• Course Review, Criteria used to evaluate projects and work on group projects
Lec15: Group Project Presentations
 Virtual Presentation of Group Projects
Grading
Policy
http://comminfo.rutgers.edu/~aspoerri/Teaching/WebDesignSummer/Exercises.html
provides detailed descriptions of what needs to be done and shows due dates.
Individual Exercises – 52.5%

Quizzes (10%) – open book, no redo

Short Assignments (10%) – no redo
o



Practice techniques and technical content covered in class.
Create Website (15%) – redo
o
Meaning: Evaluate a site of your choice
o
Mechanics: External CSS controls layout and interactive navigation
structure; create at least five pages.
Create Advanced Website (15%) – redo
o
Meaning: Evaluate a site of your choice (use Ex1 content)
o
Mechanics: Responsive layout; navigation design for large and mobile
displays; image map and absolutely positioned element; CSS styling of
question & answer pairs.
360 Evaluation (2.5%)
Group Projects – 47.5%
Grading
Scale
Textbook
and
Software

Competitive Website Analysis (15%)

Group Website (25%)

Post-Mortem Paper (7.5%)
92
89
82
79
72
–
–
–
–
–
100
91
88
81
78
A
B+
B
C+
C
The recommended class textbooks are by Castro : HTML, XHTML
& CSS: Visual QuickStart Guide (6th or 7th Edition) and Nixon :
Learning PHP, MySQL, and JavaScript (1st or 2nd Edition).
There may be additional readings made available via Resources in
Sakai throughout the course.
You will be required to use Adobe Creative Suite 6: Web
Standard Edition (which includes Dreamweaver, Fireworks etc).
You can access Adobe CS6 using the computers in the 119 Lab at
SC&I and you can use Adobe CS6 from home via the free
SoftwareAnywhere@SC&I web service and for more information
see: http://comminfo.rutgers.edu/~aspoerri/Teaching/WebDesignSummer/
Requirements.html#Software. Adobe CS5 / CS4 are fine to use if you
already own it, but if you are about to purchase the software, make
sure to purchase CS6. Adobe CS3 is okay to use if you already own
it, however the CS4+ interface is different and certain CS3 features
are not supported anymore. The lectures and video demo files have
been created using CS4 and when needed additional CS6 video
demos are provided.
You will need a SC&I network account to use SoftwareAnywhere
@SC&I web service.
To activate or reactivate your SC&I Network account, please
visit: http://account.comminfo.rutgers.edu and login with your
NetID.
To login to SoftwareAnywhere@SC&I web service:
http://sa.comminfo.rutgers.edu.
You can buy the Educational Version of CS6 from the Adobe site
or rent the Creative Suite tools via the Adobe Creative Cloud service
(for info, please see http://comminfo.rutgers.edu/~aspoerri/Teaching/
WebDesignSummer/Requirements.html)
You can make use of free 30 Day trial of Adobe Creative Cloud
service: http://www.adobe.com/products/creativecloud.html - if you
sign up for it in Week 4 on June 20 or later, then you should be
able to use the free version until the end of the summer course.
SC&I is subscribing to a service called LyndaCampus that is a
school-wide version of lynda.com, an online training library of over
80,000 video based training movies on over 1400 software titles.
LyndaCampus is available for free for students registered in SC&I
courses and can be used to learn software (Adobe CS6, such as
Dreamweaver, Fireworks, PHP, MySQL ... all programs or
technologies we will be using in this course), programming skills,
video techniques, etc.
The lectures for this course have been redesigned to make extensive
use of the LyndaCampus content to complement and enhance the
lectures and video demos I have created. You must be logged
into LyndaCampus - https://lynda.comminfo.rutgers.edu/Login to be able to access the lynda.com videos included toward the
top of the Lectures page of this course.
The Help section of the different Adobe software applications is a
useful resource. I venture to guess that most of us may not like
consulting the Help section of a software application, but I
encourage you to do so anyway.
The goal of this course is to teach you useful software skills so that
you are able to create a dynamic website for your Group Project.
This course lectures will teach strategic skills so that you will be
able to create a project that you can be proud of, but this course will
not be able to do full justice to all the great features included in the
Adobe software applications.
I hope you complement the course lectures and demos by consulting
the Help sections as well as the LyndaCampus and other resources
included in the Lectures page of the course website.
Sakai Site
The Sakai site will be used for these purposes and tasks:
Announcements: will be posted in Sakai.
Assignments: will be submitted in Sakai and the instructors
provides grading feedback.
Quizzes: will be posted and completed in Sakai.
Class Discussions: is meant to serve as a community resource for
all of you, where you can ask for technical or content help from your
fellow students and the instructor.
Resources: contains additional readings, step-by-step files and
resources (not listed on the site with the course content).
Email
Policy
I will make an effort to respond to your emails within 48 hours –
often it may be faster and sometimes slower. As we are approaching
the due date for the Group Website, you can expect that I will
answer your emails within hours in the week before it is due.
Virtual
Office
Hours
Adobe Connect: a weekly virtual office hour and chat will be held
on a Saturday 10am (since this summer, I will only be available in
the mornings to chat and most likely Saturday 10am will work for
the largest number of students). Additional chats may be scheduled
and will be announced via Sakai.
We will use the free Adobe Connect service because it supports voice
conferencing (good to have a headset with a built-in mic) and
screen & application sharing (this way you can see me perform
specific steps on your screen in real-time and vice versa). The Adobe
Connect attendance is voluntary, but highly recommended.
Skype / Adobe Connect: I will make myself available to talk to
you via Skype / Adobe Connect by appointment only if a question
cannot be answered or technical problem cannot be solved via email
or chat. In the week before the Term project is due, I will post hours
when I can be reached by Skype and you can call me during those
time periods or we can schedule a phone appointment.
Skype Widget: the Lectures and Exercises pages of the course
website have an embedded Skype widget which tells if I am
available to talk via Skype.
Attendance / Participation Policy
Attendance and participation in each class session is an important requirement as
they provide indicators of engagement with the course, learning needs, and
important foundations for all class assignments. The availability of course material
and notes online does not represent a replacement of class attendance. Students
should inform the instructor, in advance when possible, of conditions warranting
absence from class:

Illness requiring medical attention;

Curricular or extracurricular activities approved by the School;

Personal obligations claimed by the student and recognized as valid (for
example, death / serious illness of relative or family member);

Recognized religious holidays;

Severe inclement weather causing dangerous travel conditions; (note that the
university

formally advises via the Rutgers Web site if classes are cancelled due to
weather)
Written documentation is strongly recommended for absenteeism.
Academic Integrity and Plagiarism
The consequences of scholastic dishonesty are very serious. Rutgers’ academic
integrity policy can be found at: http://ctaar.rutgers.edu/integrity/policy.html.
An overview of this policy may be found at
http://cat.rutgers.edu/integrity/student.html. Multimedia presentations about
academic integrity may be found at
http://academicintegrity.rutgers.edu/multimedia.shtml and
http://www.scc.rutgers.edu/douglass/sal/plagiarism/intro.html
If you are doubtful about any issue related to plagiarism or scholastic dishonesty,
please discuss it with the instructor.
Serving Student with Disabilities
Students with disabilities (both short‐ and long‐term) who wish accommodations in
this class must do so through the Rutgers Disabilities Services Office and/or the
Associate Dean Karen Novick (knovick@rutgers.edu).
Other Information
Students seeking help with the content of this course should contact the instructor
either during office hours, or make a separate appointment.
Students seeking help with the scheduling of classes or registration should contact
the SC&I Student Services Office in Room 214 of the SC&I Building.
A great deal of information is available on the SC&I website, including course
descriptions and details about all degree programs: http://comminfo.rutgers.edu.
Rutgers has Learning Centers on each campus where any student can obtain tutoring
and other help; for information, check http://lrc.rutgers.edu/ Rutgers also has a
Writing Program where students can obtain help with writing skills and assignments:
http://plangere.rutgers.edu/index.html.
SC&I IT Services offers help with a variety of technology problems. They are located
in the SC&I Building in Room 120 (first floor); 732‐932‐7500 x8999;
help@comminfo.rutgers.edu.