Design for the Web II
Towson University, Towson MD (2011-2013)
Course Objectives
Students will strengthen their understanding of the concepts, terminology and techniques used in World Wide Web Authoring. Students will also begin to think critically about effective site design, information architecture and interactivity. To do so, students will produce a series of websites, complete development assignments, give critical presentations, and keep up on related readings.
Materials and Texts
You are required to have TWO separate drives for saving two copies of your work throughout the semester.
You are required to update them both as frequently as possible to prevent incidences of lost work due to file corruption, drive breakdown, accidental file overrides and other possible technical disasters that do happen from time to time. I will not excuse any missing projects due to lost file information - part of learning how to design for the web is learning how to work with all problems that arise.
W3 Schools - www.w3schools.com
HTML Dog Tutorials – www.htmldog.com
Web Style Guide – www.webstyleguide.com
Recommended Texts
HTML & XHTML Pocket Reference –Jennifer Niederst Robbins
CSS Pocket Reference – Erica A. Meyer
HTML, XHTML & CSS: Visual Quick Start Guide – Elizabeth Castro
Photoshop CS5 for Windows and Mac: Visual Quick Start Guide – Elaine Weinmann
Dreamweaver CS5 for Windows and Mac: Visual Quick Start Guide – Tom Negrino and Dori Smith
Don't Make Me Think: A common Sense Approach to Web Usability – Steve Krug
Attendance
I want this to be a fun, exciting and challenging experience that is loose in many ways of interpretation, but be warned, I take absences and lateness very seriously - we cannot get into the nuances and minutia of this course without full participation from everyone. If you are ill, please stay home, however, giving me notice of your absence PRIOR to class via email. If you do not let me know prior to class that you will be absent, I will not excuse the absence.
Three unexcused absences will result in a half-letter drop in your grade. Each subsequent unexcused absence will result in another half-letter grade drop. Should you miss a class, you're responsible for keeping abreast of what is due next class, either through this syllabus or contacting a classmate. I do not take responsibility for letting you know what you missed. Ask a classmate. Find a buddy to keep in touch with through out the semester incase you are absent or late and miss information given in class. Again, I don't take responsibility for letting you know what you missed, excused or unexcused.
You are also expected to arrive on time to class – After 10 minutes, I keep a policy of closing the locked door and not allowing students to join class. Late arrivals past ten minutes are considered an absence. Late arrivals are extremely disruptive, disrespectful, and rude. I keep this policy to minimize the disruption for students who have arrived on-time.
If you are any more than ten minutes late or leave class early without prior conversations with me, I will consider that an unexcused absence.
Three late arrivals up to ten minutes will be considered an unexcused absence.
Grading
Homework: 10%
Exams: 15%
Participation: 15%
Presentations: 10%
Websites: 50%
Extensions may be possible with prior conversations with me regarding your situation.
Any project accepted will not receive full credit and will be graded at my discretion.
A Few Important Notes About This Course
Course Calendar
Section 1: Refreshing Basic HTML and CSS Skills + Basic Design Elements for the Web
 What we will cover:
Site 1 Requirements - Due Week 5
Week 1
In Class:
Week 2
In Class:
Week 3
In Class:
Week 4
In Class:
Week 5
In Class:
Section 2: Considering Information Architecture
 What we will cover:
Presentations: Web Style Guide
Exam: Mid-Term Exam
Site 2 Requirements - Due Week 10
Week 6
In Class:
Week 7
In Class:
Week 8 - BREAK
Week 9
In Class:
Week 10
In Class:
Section 3: Putting it All Together + Intro to HTML5 and CSS3
What we will cover:
Exam: Final Exam
Site 3 Requirements - Due Week 15
Week 11
In Class:
Week 12
In Class:
Week 13
In Class:
Week 14
In Class:
Week 15
In Class:
Academic Integrity
All class members are to follow the fundamental principles of academic integrity outlined in the Code of Student Rights, Responsibilities, and Con- duct. The policy on Academic Misconduct appears in the code and in the schedule of classes. The basic principle is that students take credit only for the ideas and efforts that are their own. Any act of academic dishonesty will place you in jeopardy of the most severe form of sanction by Towson University expulsion from the university.
Included among dishonest behaviors in an academic setting are cheating (using or attempting to use unauthorized assistance, materials, information, or study aids in an academic exercise), fabrication (falsifying or inventing information in an academic exercise), plagiarism(adopting or reproduction of ideas, words, or statements of another person without appropriate acknowledgment), interference (stealing, changing, destroying, or impeding another students work), and facilitating (intentionally or knowingly helping or attempting to help another student commit an act of academic misconduct.
Students with Disabilities
As required by Section 504 of the Rehabilitation Act, appropriate accommodations will be made for all students with documented disabilities. If you have a disability requiring accommodation in this class, please notify the instructor as soon as possible. This information will be kept confidential.
Grading Criteria
A Level Work:
A 93-100%
A- 90-92.9%
Outstanding work!
Demonstrates a comprehensive understanding of concepts and techniques presented shows exceptional attention to detail and excellent craftswo/manship demonstrates outstanding creativity and initiative
B Level Work:
B+ 87-89.9%
B 83-86.9%
B- 80-82.9%
Good job! You are on the right track, but you could improve a little bit.
Demonstrates a good understanding concepts and techniques presented shows attention to detail and commendable craftswo/manship demonstrates creativity and initiative.
C Level Work:
C+ 77-79.9%
C 70-76.9%
You are doing ok, but you could be doing better. Ask for help.
Demonstrates a base level understanding of concepts and techniques presented shows little attention to detail and lacking in craftswo/manship lacking in creativity and initiative.
D Level Work:
D+ 67-69.9
D 60-66.9
Poorly executed.
Demonstrates no understanding of concepts and techniques presented shows no attention to detail and deficient craftswo/manship demonstrates no creativity or initiative.
F Level Work:
F 0-59.9%
Not executed or fraudulent submission
Student does not attempt the course activity or submits a project which shows evidence of plagiarism, fraud, or copyright violation.
Examples of Student Homepages:
Students will strengthen their understanding of the concepts, terminology and techniques used in World Wide Web Authoring. Students will also begin to think critically about effective site design, information architecture and interactivity. To do so, students will produce a series of websites, complete development assignments, give critical presentations, and keep up on related readings.
Materials and Texts
You are required to have TWO separate drives for saving two copies of your work throughout the semester.
You are required to update them both as frequently as possible to prevent incidences of lost work due to file corruption, drive breakdown, accidental file overrides and other possible technical disasters that do happen from time to time. I will not excuse any missing projects due to lost file information - part of learning how to design for the web is learning how to work with all problems that arise.
W3 Schools - www.w3schools.com
HTML Dog Tutorials – www.htmldog.com
Web Style Guide – www.webstyleguide.com
Recommended Texts
HTML & XHTML Pocket Reference –Jennifer Niederst Robbins
CSS Pocket Reference – Erica A. Meyer
HTML, XHTML & CSS: Visual Quick Start Guide – Elizabeth Castro
Photoshop CS5 for Windows and Mac: Visual Quick Start Guide – Elaine Weinmann
Dreamweaver CS5 for Windows and Mac: Visual Quick Start Guide – Tom Negrino and Dori Smith
Don't Make Me Think: A common Sense Approach to Web Usability – Steve Krug
Attendance
I want this to be a fun, exciting and challenging experience that is loose in many ways of interpretation, but be warned, I take absences and lateness very seriously - we cannot get into the nuances and minutia of this course without full participation from everyone. If you are ill, please stay home, however, giving me notice of your absence PRIOR to class via email. If you do not let me know prior to class that you will be absent, I will not excuse the absence.
Three unexcused absences will result in a half-letter drop in your grade. Each subsequent unexcused absence will result in another half-letter grade drop. Should you miss a class, you're responsible for keeping abreast of what is due next class, either through this syllabus or contacting a classmate. I do not take responsibility for letting you know what you missed. Ask a classmate. Find a buddy to keep in touch with through out the semester incase you are absent or late and miss information given in class. Again, I don't take responsibility for letting you know what you missed, excused or unexcused.
You are also expected to arrive on time to class – After 10 minutes, I keep a policy of closing the locked door and not allowing students to join class. Late arrivals past ten minutes are considered an absence. Late arrivals are extremely disruptive, disrespectful, and rude. I keep this policy to minimize the disruption for students who have arrived on-time.
If you are any more than ten minutes late or leave class early without prior conversations with me, I will consider that an unexcused absence.
Three late arrivals up to ten minutes will be considered an unexcused absence.
Grading
Homework: 10%
Exams: 15%
Participation: 15%
Presentations: 10%
Websites: 50%
Extensions may be possible with prior conversations with me regarding your situation.
Any project accepted will not receive full credit and will be graded at my discretion.
A Few Important Notes About This Course
- This class can be DIFFICULT, but you will learn a tremendous amount about HTML Language and how to put content online.
- You are essentially taking a beginning course in a new language, as HTML code abides by strict rules and is not a "drag and drop" process.
- I have seen it helpful for students in the past to keep their project ideas for this class within the skills the course is designed to teach. There is SO MUCH to learn and be done on the internet. This class is designed to give the group a solid footing in HTML and CSS coding, and web layout designs from which you can develop further after the class. I want you to master HTML and CSS before looking to do more complicated coding.
- I encourage you to explore what you might be interested in doing, but please keep in mind that I might not be able to trouble-shoot for you due to the large amount of information already packed into this beginner syllabus and the amount of face-time I want to give to all students. That being said, it is important that you be prepared to take some self-initiative in researching answers to questions you may have for techniques you decide to pursue that fall outside of the semester syllabus. If you do pursue techniques outside of the syllabus, keep in mind that it is ESSENTIAL that your HTML and CSS are perfect, and that extra techniques work in your final site in order to be given a high grade.
- Please keep in mind, too, that because the web is not a "drag and drop" system, there are some things you might want to do on your sites that web systems cannot do (yet, perhaps, but it is important to keep your project ideas within the possibilities for the web)
- I have designed and timed progress assignments throughout the semester in a way that will facilitate steady progress in website development. It is in your best interest to keep up with them throughout the semester so that you do not fall behind on class websites.
- It is ESSENTIAL that you follow the file management guidelines I give you at the beginning of the semester. The web is a system of file management and organization, and if files are not placed correctly your sites will not work properly.
- Exams and projects are the only ways for me to assess your grasp of the HTML and CSS languages. I include both to be sure important aspects of each are not slipping through the cracks of my teaching and your learning.
- I treat this syllabus like a contract between me and the class. I promise to teach you the information listed in multiple ways and ensure that you have the best opportunity to learn, and I look to you to keep up your end of the contract by fulfilling all the assignments I have set up for us.
- These things being said, this stuff is really cool and I'm really excited to teach it to you. Web design is such a great skill to have, and there are so many ways - even on a beginner level - to convey information and ideas. I am really looking forward to what you come up with this semester!
Course Calendar
Section 1: Refreshing Basic HTML and CSS Skills + Basic Design Elements for the Web
 What we will cover:
- Refreshing your HTML and CSS code skills that you learned in WWWI
- Site idea and design development
Site 1 Requirements - Due Week 5
- Should be a personal portfolio site to showcase your work to date.
- Must be uploaded to the tiger.towson.edu server.
- Must be saved in "site1" folder in "art466" folder in "WWW" folder on the server.
- Must have a home page saved as "index.com"
- Must be stylized with CSS in an External Style Sheet.
- Must be at least a two-tier website.
- Must include a minimum of 5 content pages.
- Must include a working image slide show.
- Must include a method of contacting you.
- You will be graded on the organization and legibility of your files, HTML tags and CSS selectors.
- You will also be graded on design style, typography choices, typographic hierarchy, color relationships, depth of information presented, and amount of information provided.
Week 1
In Class:
- I will give you a refresher introductory lecture on HTML and CSS coding.
- Overview lecture of different kinds of websites and ways of organization (travel sites, biographical sites, narrative sites, informational sites).
- HTMLDog HTML Beginner Tutorial
- w3schools HTML Basics
- Prepare a presentation of your favorite website you made for WWWI.
Week 2
In Class:
- Students will present their favorite sites from their WWWI course.
- Begin designing home pages in PS or AI in class. This will serve as your goal for your HTML and CSS coding work.
- Design the home page for what your portfolio will look like in PS or AI.
- Complete HTML for your home page.
- HTMLDog HTML Intermediate Tutorial
- w3schools CSS Advanced: Grouping and Nesting thru Pseudo-Classes ONLY.
Week 3
In Class:
- Color and Typography for the Web Lecture.
- In class assignment: Color Theory Response
- Individual Check-in's for Site 1.
- Complete HTML for home page and five additional content pages and have available on the server (6 pages total).
- Complete CSS External Style Sheet.
- Do not leave any default settings for fonts - link fonts, underlines, paragraph fonts, etc.
- Pay attention to color schemes as were talked about in the color theory assignment.
Week 4
In Class:
- I will show you how to put your HTML page on the tiger.towson.edu server.
- We will create an "art466" folder in your WWW folder.
- We will create a "site 1" folder in your "art466" folder.
- We will upload your first HTML page to your tiger.towson.edu site.
- In class work and troubleshooting for Site 1 - Due next week.
- Complete site 1 and upload to server.
Week 5
In Class:
- Turn in Site 1
- Present your sites in class.
- Peer Reviews of Site 1
- Research possible sites for Site 2.
- Begin designing your home page.
- Have a site ready next week to present for your re-do project.
- Create an image in Photoshop or Illustrator that is what your home page will look like.
Section 2: Considering Information Architecture
 What we will cover:
- Web Style Guide best practice information
- Home page and Site Map Development
Presentations: Web Style Guide
Exam: Mid-Term Exam
Site 2 Requirements - Due Week 10
- Find a site to re-do.
- This site should not have more information than you will be able to feasibly include in your site.
- Must have a home page saved as "index.com"
- Must have at least 7 content pages in addition to your home page (6 pages total).
- Must have multiple images embedded on each page.
- You will be graded on the organization and legibility of your files, HTML tags and CSS selectors.
- You will also be graded on typography choices, typography hierarchy, color choices, depth of information presented, and amount of information provided.
- You will also be graded on the usability of your site, how easy or difficult it is to navigate your site, and the visual interest your site offers.
- CSS external style sheet.
- Use DIV Tags for spacing, positioning and page organization.
- No Default formatting of text or links, etc.
Week 6
In Class:
- Lecture on CSS Div Tags
- Individual meetings to go over your site choices and home page ideas.
- Check in on home page images.
- Begin working on HTML for Site 2.
- Create a Powerpoint presentation on assigned Web Style Guide Chapters (10-15min).
- Give thorough overview of major points in chapter.
- Give at least 3 external examples of sites that utilize the points of your chapter.
- Work in pairs.
Week 7
In Class:
- Student Web Style Guide Presentations.
- Mid-Term Exam.
- In class work.
- Have HTML for your home page ready.
- Have a site diagram for Site 2 prepared.
- Have your CSS ESS ready.
- Be sure to use DIV tags throughout.
Week 8 - BREAK
Week 9
In Class:
- Peer Reviews of Site 2
- Site 2 Due.
Week 10
In Class:
- Student Presentations of Site Re-Do's - Original and Your Rendition (10 min each).
- Site 3 Home page in Photoshop or Illustrator.
- Completed Site Diagram for Site 3.
Section 3: Putting it All Together + Intro to HTML5 and CSS3
What we will cover:
- Complex Information Architecture
- Using multimedia to express your ideas and share information
- Introduce HTML5 and CSS3
Exam: Final Exam
Site 3 Requirements - Due Week 15
- Look for 3 sites to use for design inspiration.
- Begin your design process by creating a PS or AI image of your home page design based on these inspiration points.
- Next create an image design for your content pages. You may end up wavering from this or keeping close to your home page design, but give yourself a starting point for organizing your information.
- Next, create a site diagram for your site.
- This site must be at least a three-tier organizational format.
- 10 pages MIN.
- At least 4 of those pages must have the equivalent 3 paragraphs of written information.
- CSS external style sheet only.
- Use both Div IDs and Div CLASS properly.
- No Default formatting of text or links, etc.
- Include at least 1 image slideshow and 1 video on your site.
Week 11
In Class:
- HTML5 + CSS3 Introductory Lecture
- Check in on Site 3 ideas, design home pages and diagrams.
- In Class Work.
- Begin your HTML5 for Site 3.
Week 12
In Class:
- In class work on sites.
- Individual Meetings.
- Have at least 5 of your HTML5 pages and your CSS3 page ready for peer review next week.
Week 13
In Class:
- Peer Reviews of Site 3
- In class work on sites
- Keep working on sites: Due in 2 weeks.
Week 14
In Class:
- Show film while working on sites.
- Individual Meetings.
- In class work on sites.
- Keep working on sites: Due next week.
Week 15
In Class:
- Site 3 Presentations.
- Final Exam
Academic Integrity
All class members are to follow the fundamental principles of academic integrity outlined in the Code of Student Rights, Responsibilities, and Con- duct. The policy on Academic Misconduct appears in the code and in the schedule of classes. The basic principle is that students take credit only for the ideas and efforts that are their own. Any act of academic dishonesty will place you in jeopardy of the most severe form of sanction by Towson University expulsion from the university.
Included among dishonest behaviors in an academic setting are cheating (using or attempting to use unauthorized assistance, materials, information, or study aids in an academic exercise), fabrication (falsifying or inventing information in an academic exercise), plagiarism(adopting or reproduction of ideas, words, or statements of another person without appropriate acknowledgment), interference (stealing, changing, destroying, or impeding another students work), and facilitating (intentionally or knowingly helping or attempting to help another student commit an act of academic misconduct.
Students with Disabilities
As required by Section 504 of the Rehabilitation Act, appropriate accommodations will be made for all students with documented disabilities. If you have a disability requiring accommodation in this class, please notify the instructor as soon as possible. This information will be kept confidential.
Grading Criteria
A Level Work:
A 93-100%
A- 90-92.9%
Outstanding work!
Demonstrates a comprehensive understanding of concepts and techniques presented shows exceptional attention to detail and excellent craftswo/manship demonstrates outstanding creativity and initiative
B Level Work:
B+ 87-89.9%
B 83-86.9%
B- 80-82.9%
Good job! You are on the right track, but you could improve a little bit.
Demonstrates a good understanding concepts and techniques presented shows attention to detail and commendable craftswo/manship demonstrates creativity and initiative.
C Level Work:
C+ 77-79.9%
C 70-76.9%
You are doing ok, but you could be doing better. Ask for help.
Demonstrates a base level understanding of concepts and techniques presented shows little attention to detail and lacking in craftswo/manship lacking in creativity and initiative.
D Level Work:
D+ 67-69.9
D 60-66.9
Poorly executed.
Demonstrates no understanding of concepts and techniques presented shows no attention to detail and deficient craftswo/manship demonstrates no creativity or initiative.
F Level Work:
F 0-59.9%
Not executed or fraudulent submission
Student does not attempt the course activity or submits a project which shows evidence of plagiarism, fraud, or copyright violation.
Examples of Student Homepages:
