SCHOOL OF COMMUNICATION SPRING 2013
COM 3540: WEB DESIGN BASICS
Tuesday and Thursday 2 – 3:15 pm Brown Hall 1037
Instructor
OFFICE
OFFICE HOURS
PHONE
EMAIL
Joseph Kayany, Ph.D.
220 Sprau Tower
1-2 pm Tuesdays and Thursdays
387-5369
joseph.kayany@wmich.edu
Objectives of the Course
The objectives of the course are twofold.
• To discuss the basic principles of web design and development.
• To provide step by step guidance on developing informational websites to
communicate with specific target audiences.
Prerequisite Computer Proficiency
You are expected to have basic computer proficiency if you want to do well in this
course. I expect you to know the basics of the Windows operating system, the
fundamentals of a word processing program like MS Word, experience in using an
email client like MS Outlook, and proficiency with a browser to navigate the Web. If
not, I expect you to develop these skills on your own.
Online Text
Yale C/AIM Web Style Guide available
at http://www.webstyleguide.com/wsg3/index.html
Online Documents
1. How the Net works at
http://www.scotsnewsletter.com/20quests/hownet.htm
2. Internet Pioneers
http://www.ibiblio.org/pioneers/index.html
3. The World Wide Web for the Clueless
http://www.mit.edu/people/rei/wwwintro.html
1
4. His Dream: Keeping the Web Worldwide
http://www.w3.org/People/Berners-Lee/951217-NYT/
5. A Brief History of the Internet
http://www.isoc.org/internet/history/brief.shtml
6. Web 2.0 Design Guide
http://www.webdesignfromscratch.com/web-design/web-2.0-design-styleguide/
7. 30 HTML Best Practices for Beginners
http://net.tutsplus.com/tutorials/html-css-techniques/30-html-best-practicesfor-beginners/
8. Learn Photoshop in one week
http://elitebydesign.com/how-to-master-photoshop-in-just-one-week/
9. What I want from a restaurant website
http://theoatmeal.com/comics/restaurant_website
10. Ten Guidelines for User-Centered Web Design
http://www.stcsig.org/usability/newsletter/9807-webguide.html
11. Announce and Promote your web site
http://www.tips-tricks.com/announce.asp
12. 10 ways to orientate users on your site
http://www.webcredible.co.uk/user-friendly-resources/webusability/orientate-users.shtml
13. Stanford Guidelines for Web Credibility
http://credibility.stanford.edu/guidelines/index.html
Online references
Usability and information design website
at http://www.useit.com
HTML Tutorial at http://www.w3schools.com/html/default.asp
ABCs of Building a Web Site at
http://www.webdevelopersjournal.com/columns/abcs_of_building_web_sites.html
JavaScript for the Total Non-Programmer
at http://webteacher.com/javascript
"Introduction to Photoshop"
at http://www.wtvi.com/teks/ps/default.htm
HTML Beginner Tutorial
at http://www.htmldog.com/guides/htmlbeginner
Other useful links
Top 5 Tips for Effective Notetaking
http://jerz.setonhill.edu/writing/academic/notes-tips.htm
How to Study: a brief guide
http://www.cse.buffalo.edu/~rapaport/howtostudy.html
Web Resources for University Students
http://educhoices.org/articles/50_of_the_Most_Dependable_Web_Resources_for_Uni
versity_Students.html
2
16 websites with Free Stock Images for commercial use
http://www.webdesignlessons.com/16-websites-with-free-stock-images-forcommercial-use/
Evaluation
You will be evaluated on your performance in two exams, timely completion of
quizzes and assignments, and the final web project. The final grade will be calculated
using the following scale:
Quizzes and assignments
Attendance
Midterm Exam
Web design proposal document
Web page
Final Exam
-
10%
05%
20%
15%
25%
25%
Quizzes and Class assignments
This is a skill-based class. If you have not mastered the skills discussed in today's
class, you will not understand what we discuss tomorrow. Hence, the daily quizzes
and assignments are intended to make sure that you have mastered the basic skills
and concepts before we move on to more advanced topics.
Attendance
Simply put, attendance is required. Two absences are allowed. You will lose half of
your attendance grade (2.5%) for your third absence and the other half (2.5%) for the
fourth absence. Moreover, if you are absent for a class assignment or quiz, you will
lose the grade for the assignment even if you submit the assignment later. If you want
to do well in this class, you should attend all the classes. If you have to miss a class
for any reason, consider it your responsibility to catch up with the material discussed
in that lecture.
Classroom etiquette
•
•
•
•
Please plan on being in the lab 5 minutes before class to boot up the computer
and be ready for class.
No eating or drinking in the computer lab.
Please turn off your cell phones and pagers before you enter the class.
Please understand that class time in the computer lab is not the time to catch
up on your email or surf the web. Use the computer only as directed by the
instructor. I DO NOT WANT ANYONE TO BE DOING ANY WORK ON THE
COMPUTER WHILE A LECTURE IS UNDERWAY.
3
Exams
The exams and quizzes will test the knowledge and skills that you acquire during the
semester. The exams will be based on all topics discussed in the class, textbook, and
the required readings. Questions that call for short, one-paragraph answers are my
normal style.
Web page
You are advised to choose a topic about which you know a great deal – a hobby, an
area of expertise, an organization of which you are a member, employee, or
employer. But the topic should not be YOU. You MUST not choose to create an online
resume of yourself or description of your life, your hobbies, your friends, etc. There
can be a section in your website devoted to personal information but it cannot be the
central theme of your website.
Webpage proposal
This is the plan for your final web page project. This paper (between 8-10 pages
double spaced text + 2 pages of diagrams) will contain the following:
•
•
•
•
•
•
•
Target audience of your website - primary and secondary
Audience input on what they would like to see on your website
Competitive analysis of at least 5 sites similar to what is being proposed by
you and statement of what is unique about your site.
Concrete scenarios of representative target audience members visiting your
site and meeting their information needs
A flowchart illustrating the different pages of your website and how they
are interlinked.
A design template showing where the banners, buttons, and content will be
placed.
A draft of the material you plan to place on each of your pages.
Web page design
You are expected to create a professional-looking web page based on our discussion of
what constitutes a professional web page. The pages will be evaluated using the
following scale:
Content – 40 points
o Adequate depth of information
Graphic design – 20 points
o Scannable text
o Safe size table/ div grid
o Graphical consistency & balance
o User-friendly navigation scheme
Hypertext links – 20 points.
4
o Opening page named index.html
o External style sheet attached applied to all text
o Free standing information
o No broken links
Usability – 20 points
o Every image with ALT tags
o Titles, meta keywords, meta description
o Email link & home link on every page
o Pages download within threshold of frustration
Extra Credit points – 5 points
o Form
o Other
Attitudes for Success in this Course
New technology-related jobs are perhaps the best paying jobs in the world today.
However, success in this field demands an adventurous spirit (fortunately, found in
abundance among young people). To succeed in this field, you require a never-say-die
spirit, a boldness to 'figure' things out and a willingness to take risks. I expect such an
enterprising attitude from you. You cannot learn to surf the information superhighway
if you want someone else to hold your hand at every step. Be enterprising. And enjoy
the ride. If not, you will just be another road-kill on the information superhighway.
Grading Scale
95-100
89-94
83-88
77-82
71-76
66-70
60-65
Less than 60
-
A (4.0);
BA (3.5);
B (3.0);
CB (2.5);
C (2.0);
DC (1.5);
D (1.0);
E (Failing grade)
ELEARNING SYSTEM
The new course management system (CMS) will be used extensively in this course to
post announcement, class notes, readings, links to readings, and grades. Please visit
the e-learning site (https://elearning.wmich.edu) to keep up with the proceedings in
this class.
Contacting the Instructor
If you want to discuss any issue pertaining to this class please try to come during the
office hours. If you cannot come during the office hours, please send me an email and
we will set up an appointment.
5
I prefer email communication to voice mail especially if you are trying to reach me
from out of town. Most of the time I respond to emails promptly. However, make sure
that your subject line in your email clearly identifies the course number and issue.
For instance, subject titles such as “COM 3540: A question about final exams” or
“COM 3540: regarding my absence on May 26” are acceptable but if you title your
email with ‘Hi’, “Hello’ your email is likely to be deleted as junk mail even before I
read it.
Moreover, in some situations you may not get a reply from me at all. For instance, “I
missed class yesterday. Can you briefly write to me what you discussed in class?” Or
“What grade do I need to get in the finals to get a C?” etc. If you want answers to
these questions, please see me in my office.
TENTATIVE CLASS SCHEDULE
Week 1:
Jan 08 – Tuesday - Introduction
Jan 10 – Thursday - HTML
Week 2:
Jan 15, Tuesday – HTML
Jan 17, Thursday - HTML
Week 3:
Jan 22, Tuesday - HTML
Jan 24, Thursday - [Web Project topic due]
Week 4:
Jan 29, Tuesday – HTML
Jan 31, Thursday - HTML
Week 5:
Feb 5, Tuesday - HTML
Feb 7, Thursday - HTML
Week 6:
Feb 12, Tuesday – Photoshop
Feb 14, Thursday - Photoshop
Week 7:
Feb 19, Tuesday – Review
Feb 21, Thursday – [Midterm Exam]
6
Week 8:
Feb 26, Tuesday –Dreamweaver
Feb 28, Thursday - Dreamweaver
Week 9:
SPRING BREAK – NO CLASSES
Week 10:
Mar 12, Tuesday - Dreamweaver
Mar 14, Thursday - [Webpage proposal due]
Week 11:
Mar 19, Tuesday – Dreamweaver
Mar 21, Thursday – Dreamweaver
Week 12:
Mar 26, Tuesday – Dreamweaver
Mar 28, Thursday – Dreamweaver
Week 13:
Apr 2, Tuesday Apr 4, Thursday -
Dreamweaver
Dreamweaver
Week 14:
Apr 9, Tuesday –
Dreamweaver
Apr 11, Thursday – Dreamweaver
Week 15:
Apr 16, Tuesday – Dreamweaver
Apr 18, Thursday – [Final webpage URL due]
FINAL EXAM – Thursday
April 25
12:30 pm-2:30 pm
7