INTRODUCTION TO WEB GRAPHICS AND DESIGN
ART 297A · SPRING 2007
INTRODUCTION · SYLLABUS · TUTORIALS · CLASSLIST
SYLLABUS
1 · 2 · 3 · 4 · 5 · 6 · 7
Required texts
Grading policy
Office Hours: I am in every day most of the time from 8 to 11:30 and from 1:30 until
4:00. Just call – 863 6391 – or email me – jxm22@psu.edu – and set a time. My office is 306 Patterson. – Jerry Maddox
January 16 to 19
The first week is an introduction to the course and the online tools. Be sure your access account is working and that you know how post to your PASS space. If you don't have a personal home page up, make a simple one which can be revised later and have it available from your PSU address - mine is http://www.personal.psu.edu/jxm22, yours will be the same using your userid where I have mine, jxm22.
If you haven't already used Dreamweaver, Photoshop and Illustrator, go to one of the labs and familiarize yourself with their basic features - create a basic web page, edit a photograph and create a simple graphic.
There are many Web editors, both free and commercial. You can also do all your Web markup in a text editor, like NotePad (PC) or TextEdit (Mac) or free editors like TextWrangler (Mac), NoteTab (PC), HTML-Kit (PC) and jEdit (Linux, Mac, Windows). All are free downloads.
Please don't use a word processing program like MSWord or WordPerfect, saving your files as HTML, nor the web editor FrontPage. They introduce a lot of unnecessary markup which is hard to edit around.
Reading assignment: HTML, XHTML & CSS, Chs. 1, 2, 3, 4, pp 24–79
January 22 to 26
Find a short story or a chapter from a novel in one of the copyright free resources like Project Gutenberg and the Google Electronic Text Archive and copy it either as a text file or an html file to use for the first assignment.
If your native language is not English, or you are very fluent in another one, the text can be in that language. You will need to include a brief summary in English if you pick a work in another language.
The first assignment is to present the the text you have chosen as an html file using cascading style sheets to format it. Be sure to give careful attention to your choice of font, font size, line length and line height. I have prepared two examples of the same story by Kafka – one set in sans-serif and one in serif. See the typography tutorial for more information.
The first assignment is due on January 29th.
It should be posted to your
PASS space and linked to your homepage.
January 29 to February 2
The second assignment is to write a short narrative – 750 to 1500 words – which you will post using the typographic and css layout techniques you learned to use in the first assignment. It can be in English or the language of your choice. This narrative, or story, will provide the platform for exploring layout and the use of images in assignments four and five.
Assignment 2 is due February 5th.
Reading assignment: HTML, XHTML & CSS, Chs. 5, 6, pp 81 – 118
February 5 to 9
The assignment for the next two weeks will be working with images and words to create site based on The exquisite corpse. I have posted an image-based example of one made up the banners for the class site and word-based example using random parts of speech taken from news articles.
The first week you will create four images 750px wide and 185px tall (the size of the images at the top of the course pages), put them in a web page, post it to your PASS space and link that site your homepage; then make four subject+verb+object sentences, put them in a web page, post them to your space and link to your home page. (All your sites should be done without tables, using style sheets for layout.)
The first part of Assignment 3 is due February 12th.
Reading assignment: HTML, XHTML & CSS, pp 143—176
February 12 to 16
For the second part of Assignment 3, go to the websites of your classmates – the links are on the class list – pick four images at random to create an exquiste corpse and do the same thing with parts of sentences, post what you have done and link it to your homepage.
The second part of Assignment 3 is due February 19th.
Reading assignment: HTML, XHTML & CSS, Chs.7, 8, 9, 10, 11, 12, pp 119–197
February 19 to 23
Assignment 4 will be adding illustrations to your story, Photoshop, bitmap graphics and digital photography. For it you will need to create four illustrations for your Assignment 2 story or narrative which are related to and amplify the it. They may illustrate the setting or incidents or details of what you have written. Here is an example of the a fairy tale, illustrated by David Hockney, in two versions – English and German.
February 26 to March 2
The images now need to be placed at the appropriate places in the story. Be sure to use CSS, not tables, for layout.
Assignment 4 is due March 5.
Reading assignment: HTML, XHTML & CSS, Ch.14, pp 209–252
March 5 to March 9
Assingnment 5 will involve vector graphics and how to create them using Illustrator. This time create four different illustration for your story, all of them purely vector-based without including any photographs or other bitmap images. (They maybe saved in bitmap formats – gif, jpg or png – or vector formats – swf or svg.)
Reading assignment: HTML, XHTML & CSS, Ch. 19, pp 311–326
March 12 to 16 is Spring Break.
Complete and post Assignment 5 – your story and vector-based illustrations – this week.
Assignment 5 is due March 19th.
March 19 to 23
Assignment 6 is to create a narrative series of at least ten images, like frames from a silent movie, a drawing, a comic strip or a sequence of photographs – a story without words. There are also many children's books that tell a story without words. The images can be photographic, scans of drawings or paintings or, computer-generated. Here is one. How could it be presented better?
Reading assignment: HTML, XHTML & CSS, Ch. 21, pp 327–338, and (X)HTML Symbols and Characters pp 419–421 ,
March 26 to 30
Assignment 6 – another narrative, this by Hu Wenliang, using only punctuation:
《。》:
：？
：！
“‘……’”
（、）·《，》
；——
April 2 to 6
Complete you work on Assignment 6 this week, if you haven't already.
Assignment 6 is due April 13th.
April 9 to April 13
Assignment 7 is to take your story without words and turn it into either as a PDF presentation or a SWF (Flash) animation. You should use InDesign to do the first and Flash to do the second. Look under the Help menu for both for directions.
April 16 to 20
Complete the work on Assignment 7 this week and revisions or corrections you need to make to earlier assignments.
Assignment 7 is due April 23rd.
April 23 to 27
April 30 to May 4
Completion of outstanding projects and revisions of them.
Grading policy
Your grade for the course will be primarily based on the quality of your individual work on your personal sites and contributions to class discussion. You will have a one week grace period after the work is due to turn it in with no reduction in grade, every week after that will mean a reduction of one grade point.
Each individual assignment receive a grade within a week after it is submitted, if it posted before the end of the grace period.
Academic integrity is the pursuit of scholarly activity free from fraud and deception and is an educational objective of this institution. Academic dishonesty, includes, but is not limited to, cheating, plagiarizing, fabricating of information or citations, facilitating acts of academic dishonestly by others, having unauthorized possession of examinations, submitting work of another person or work previously used without informing the instructor, or tampering with the academic work of other students.