| |
Abstract/Syllabus:
|
Barrett, Edward, 21W.785 Communicating in Cyberspace, Fall 2003. (Massachusetts Institute of Technology: MIT OpenCourseWare), http://ocw.mit.edu (Accessed 09 Jul, 2010). License: Creative Commons BY-NC-SA

Next generation Internet. (Image courtesy of the High Performance Computing & Communications Office of NOAA.)
Course Highlights
This course includes a related resources section with examples of excellent and poor web design.
Course Description
This class covers the analysis, design, implementation and testing of various forms of digital communication based on group collaboration. Students are encouraged to think about the Web and other new digital interactive media not just in terms of technology but also broader issues such as language (verbal and visual), design, information architecture, communication and community. Students work in small groups on a semester-long project of their choice.
*Some translations represent previous versions of courses.
Syllabus
Class Description
This class covers the analysis, design, implementation and testing of various forms of digital communication based on group collaboration. Students are encouraged to think about the Web and other new digital interactive media not just in terms of technology but also broader issues such as language (verbal and visual), design, information architecture, communication and community. Students work in small groups on a semester-long project of their choice. Various written and oral presentations document project development.
Message to Participants
This class gives you the chance to experiment with any form of digital technology to communicate with others in a workshop setting. Small collaborative groups develop projects throughout the semester. As your projects progress, you study the rhetoric of digital communication, the visual language of design and appropriate technical implementation, and your project groups report on these topics in a variety of written and oral presentations. Guest speakers visit frequently, and classes are largely devoted to informal discussion.
List of Objectives
At the end of this class, we hope students will have developed their skills at:
In addition, students will also gain experience in the art of writing successful proposals, making formal and informal presentations, participating in discussions and analyzing the work of their peers.
Grade Breakdown
Class Participation
Includes attendance, questions and responses for speakers, and participation in discussions. |
25% |
Proposals and Presentations
Includes oral presentations, and initial written proposal. |
35% |
Final Presentation and Assessment of Project
Includes final project presentation, final written report, and final project exhibition. |
40% |
|
Roles
Students will be organized into groups of four or five, with each student adopting one or more roles. Roles can include the following, in no particular order:
- Editor
- Writer
- Programmer
- Producer
- Technical architect
- Multimedia designer (graphics, sound, video)
- Project manager
- Designer
- Information architect
- Storyboarder
- Liaison
- Content gatherer
Projects
The primary focus of the class is the development of the group projects. Projects definitely do not have to be Web sites, but they must make use of some kind of interactive, electronic communication medium. All project proposals must be approved by the instructors. Groups may choose a project of their own design or from a list of several suggested project ideas (below). Successful projects blend an interesting idea, rich content, thoughtful use of technology, and strong audience interaction.
- Choose-your-own-adventure online books, other games
- Online residential communities
- Web site for an elementary school, with a focus on how teachers could use it to lighten their workload
- Student/faculty portal
- New innovative online services targeting the MIT community
- Site for prospective and/or incoming frosh to communicate with current students
- Site to facilitate mentoring between frosh and upperclassmen
- Redesign of MIT's top-level home page
Student Tasks Checklist
-
Project group formed & team roles chosen
-
Project idea consolidated
-
Elevator speech
-
Project proposal presentation
-
Individual student conference
-
Project review
-
Usability test profiles written
-
Usability test carried out
-
Site/application redesigned as appropriate
-
Project developed to completion
-
Final presentation
-
Final written report submitted
Calendar
Week 1 |
1 |
Introduction to Class
Student Introductions
Project Roles |
Week 2 |
2 |
The Development Process
Audience/Client/Developer Relationship
Websites as Metaphors
Student Project Formation |
3 |
Large-Scale Project Development
Starting Your Own Business |
Week 3 |
4 |
Design Concepts
Student Project Formation |
5 |
Student Elevator Speeches and Show and Tell |
Week 4 |
6 |
Writing for the Web |
7 |
Americans with Disabilities Act (ADA) Compliance Issues |
Week 5 |
8 |
Student Proposals |
9 |
Student Proposals |
Week 6 |
10 |
Student Proposals |
11 |
Student Proposals |
Week 7 |
12 |
Individual Student Conferences |
13 |
Project Review, Discussion |
Week 8 |
14 |
Usability Test Protocols |
15 |
Usability Test Protocols |
Week 9 |
16 |
Usability Test Protocols |
17 |
Usability Test Protocols |
Week 10 |
18 |
Discussion of Usability Test Results |
19 |
Internet Security Issues, Personal and National |
Week 11 |
20 |
Project Managers Meeting |
Week 12 |
21 |
Development Time for Final Project Presentation |
22 |
Development Time for Final Project Presentation |
Week 13 |
23 |
Final Presentations |
Week 14 |
24 |
Final Presentations |
25 |
Final Presentations |
Week 15 |
26 |
Final Presentations |
|
|
|
|
Further Reading:
|
Readings
1 |
Introduction to Class
Student Introductions
Project Roles |
|
2 |
The Development Process
Audience/Client/Developer Relationship
Websites as Metaphors
Student Project Formation
Large-Scale Project Development
Starting Your Own Business |
Debby Levinson: the development process, audience/client/developer relationship (PDF), websites as metaphors (PDF); student project formation.
Hagan Heller: large-scale project development, starting your own business. |
3 |
Design Concepts
Student Project Formation
Student Elevator Speeches and Show and Tell |
Courtesy of Jonathan Grall: design concepts (PDF); student project formation continued. Used with permission.
Student elevator speeches and show and tell - students present their initial ideas for a project in the form of a 1-min sales-pitch. |
4 |
Writing for the Web
Americans with Disabilities Act (ADA) Compliance Issues |
Nicole Hennig: Writing for the Web presentation.
Stephani Roberts Lincoln: Americans with Disabilities Act (ADA) compliance issues (PDF), ATIC Lab. |
5 |
Student Proposals |
Proposals, formerly alpha presentations. Students will present their initial project ideas and chosen technologies to the class. |
6 |
Student Proposals |
Proposals, formerly alpha presentations. Students will present their initial project ideas and chosen technologies to the class. |
7 |
Individual Student Conferences
Project Review, Discussion |
Individual student conferences. Ed Barrett will meet with students individually to address their concerns, ideas, goals. Project review, discussion. Come with questions. |
8 |
Usability Test Protocols |
Usability test protocols, Susan Jones and IS staff. |
9 |
Usability Test Protocols |
Usability test protocols, Susan Jones and IS staff. |
10 |
Discussion of Usability Test Results
Internet Security Issues, Personal and National |
Class discussion of usability test results.
Jeff Schiller: Internet security issues, personal and national |
11 |
Project Managers Meeting |
Managers meeting. Project managers will come to class to meet with Ed Barrett to discuss project progress, teamwork. |
12 |
Development Time for Final Project Presentation |
Development time for final project presentation. |
13 |
Final Presentations |
Brave hearts option for final presentations (a chance for confident project groups to do their final presentation early). |
14 |
Final Presentations |
Final presentations. |
15 |
Final Presentations |
Final presentations (final written reports due this week). |
|
Related Resources
Links Directly Related to 21W.785
Jakob Nielsen's Usability Website - the homepage of the usability guru.
MIT Web Design Guidelines
Stanford Law School Center for Internet & Society
Writing for the Web - a helpful page put together by MIT libraries that spells out important considerations when writing online content.
Links to Relevant Technologies
Links to Informative Books
Assortment of Excellent Websites
Apple.com |
Even if you don't love Apple computers, you have to love their design initiatives. The website mimics the look and feel of their new lines of products, and is easy to use and attractive to the eye, instantly capturing the attention of the user. |
Archinect.com |
A trendy new-age architecture website with well chosen graphics and interactive features. |
CNN.com |
The #1 news site gets information across to its readers effectively with the help of many interactive features, constantly updated headlines, and other nifty additions such as online polls. |
Compaq.com |
A fantastic company website that fulfills its purpose. Clear presentation, easy navigation, appropriate images, vibrant contrasting colors. |
Disney.com |
The home of magical Disney fun! This website cleverly mimics a theme park layout, and echoes the familiar Disney image with the use of cartoon-style graphics. Not the most technically impressive site, but it has a message and it is consistent with its chosen theme. |
Ikea.com |
Makes an innovative use of Macromedia® Flash™ to showcase interior design and Ikea products. |
Java.Sun.com |
The home of Java® at Sun Microsystems. An attractive site that is minimilist despite appearing to use more advanced technologies. A masterful use of html to achieve a sophisticated look. Easy navigation and support for text-only browsers. |
Landor.com |
Another trendy company website that offers a simplistic and stylish design, easy navigation, and a clear statement of purpose on the homepage. Do however notice their use of some dubious images that don't really say much about the company or their products and services. |
MIT Foreign Languages & Literatures |
An excellent MIT site that demonstrates exactly how to continue a chosen metaphor throughout a website. This website also uses image maps very effectively without annoying the user. All images are relevant, and cleverly assembled. |
Nikewomen.com |
An excellent use of the much-abused Macromedia® Flash™ technology to advertise products effectively in a highly interactive online catalogue. |
Sueellen.org |
A simple and elegant website that effectively showcases the work of a talented photographer and graphic designer. |
Travelocity.com |
This site speaks its message and has a clear theme - travel. Services are appropriately advertised and the travel theme is cleverly worked into highly functional and interactive webpages. |
Xbox.com |
A wonderful site that showcases new Microsoft® gaming products. The navigation bars and graphics that enclose the pages cleverly mimic the design of the Xbox console - with the use of heat vents, and the familiar black and green plastic look. Helpful icons and banners notify visitors of new products. Pages are brief and uncluttered. |
|
Poor Web Design Examples
Janet-Jackson.com |
A typical example of a misuse of Macromedia® Flash™. Upon viewing this website ask yourself the following questions: What is the background supposed to be? Why is the window so small? What are the whirling polygons and sliding panels saying about Janet Jackson or her product? What is the little animated graphic in the top-right hand corner supposed to convey? If you are left unsure as to the answer of any of these questions, that is because the website has been designed to be glitzy, and at some point lost sight of its purpose. What is good about the site is the interactive sound features and actual audio and video content, but that's programming and musical talent, not web design. |
Nikelab.com |
A lot of effort was clearly put into this website, but why does the user need to see so many copies of the same images that stream up and down the screen as you move your mouse around? It is actually pretty hard to navigate this website, and even harder to discover the message behind nikelab.com, and what it is actually promoting, other than shoes. Text is far too small in places, and unnecessary information about loading modules is displayed to the user. In an attempt to appear futuristic, these features are more of an annoyance than anything else. |
Zx26.com |
This page serves absolutely no purpose except perhaps to display how the overuse of animated gifs can quickly turn your website very tacky. |
|
Useful Technologies for Student Projects
Apache™ |
The Apache™ HTTP Server Project is an effort to develop and maintain an open-source HTTP server for modern operating systems including UNIX® and Windows® NT. The goal of this project is to provide a secure, efficient and extensible server that provides HTTP services in sync with the current HTTP standards. Apache™ has been the most popular web server on the Internet since April of 1996. The August 2002 Netcraft Web Server Survey found that 63% of the web sites on the Internet are using Apache™, thus making it more widely used than all other web servers combined. |
CGI |
The Common Gateway Interface (CGI) is a standard for interfacing external applications with information servers, such as HTTP or Web servers. A plain HTML document that the Web daemon retrieves is static, which means it exists in a constant state: a text file that doesn't change. A CGI program, on the other hand, is executed in real-time, so that it can output dynamic information. |
CSS |
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. |
DHTML |
DHTML is the art of making HTML pages dynamic! |
Dreamweaver® |
The professional choice for building websites and Internet applications. |
Fireworks® |
Powerful creative tools. Extensive format and standards support. Seamless integration. Macromedia® Fireworks® MX is the easiest way to create, optimize, and export interactive graphics in a single, web-centric environment. |
Flash™ |
Macromedia® Flash™ MX is the fastest way to create rich Internet content and applications with a better return on investment. Powerful video, multimedia, and application development features allow the creation of rich user interfaces, online advertising, e-learning courses, and enterprise application front-ends. |
Java® |
The premier solution for rapidly developing and deploying mission-critical, enterprise applications, J2SETM provides the essential compiler, tools, runtimes, and APIs for writing, deploying, and running applets and applications in the Java® programming language. |
JavaScript™ |
JavaScript™ is a compact, object-based scripting language for developing client and server Internet applications. |
JSP™ |
JavaServer Pages (JSP™) technology offers a simple way to create dynamic Web pages that are both platform-independent and server-independent, giving you more freedom through Java®TM technology's "Write Once, Run AnywhereTM" capability. JSP™ technology separates content generation from presentation and takes advantage of reusable tags and objects, simplifying the maintenance of your Web applications. It's your choice -- JSP™ technology provides the scripting ability you need to create simple interactive Web pages, or it scales to support complex Web sites that are fully integrated with enterprise class applications. |
MySQL® |
MySQL® is the world's most popular open source database, recognized for its speed and reliability. MySQL® AB, the company founded by the creators of the MySQL® database, provides MySQL® software development and related support and services. |
Perl |
Perl is a programming language which can be used for a large variety of tasks. A typical simple use of Perl would be for extracting information from a text file and printing out a report or for converting a text file into another form. But Perl provides a large number of tools for quite complicated problems, including systems programming. |
Photoshop® |
Adobe® Photoshop® 7.0 software, the professional image-editing standard, helps you work more efficiently, explore new creative options, and produce the highest quality images for print, the Web, and anywhere else. Create exceptional imagery with easier access to file data; streamlined Web design; faster, professional-quality photo retouching; and more. |
PHP |
PHP is a widely-used general-purpose scripting language that is especially suited for Web development and can be embedded into HTML. |
Tomcat™ |
Tomcat™ is the servlet container that is used in the official Reference Implementation for the Java® Servlet and JavaServer Pages technologies. The Java® Servlet and JavaServer Pages specifications are developed by Sun under the Java® Community Process. Tomcat™ is developed in an open and participatory environment and released under the Apache™ Software License. Tomcat™ is intended to be a collaboration of the best-of-breed developers from around the world. We invite you to participate in this open development project. |
|
Useful Books
Big Java® |
Cay Horstmann |
A fantastic book for learning the Java® programming language. Lots of worked examples, helpful problems, useful tips. Good for beginners & those already familiar with Java®. Briefly covers XML, JSP™ , SQL and servlets in addition to advanced Java® topics. |
DHTML and CSS for the World Wide Web: Visual QuickStart Guide |
Jason Cranford Teague |
Targeted to designers and content creators, not just programmers. Visual, task-based format to get up and running with DHTML as fast as possible. This revised and expanded second edition is up-to-date on the current Web standards and browsers, and includes all new coverage of using DHTML to get information about the browser environment and adding multimedia to a site, as well as new basic and advanced dynamic techniques, such as making objects appear and disappear, moving objects in 3D, and adding dynamic content. This edition offers full cross-platform and cross-browser coverage. This book does not focus on the more complex aspects of DHTML, but focuses on practical examples of what really works with DHTML and CSS, making it useful for beginners just starting out with DHTML, as well as professional developers looking for a quick reference. |
Dreamweaver® MX: PHP Web Development |
Bruno Mairlot, Gareth Downes-Powell, Tim Green |
This book is for web professionals who want to use Dreamweaver® MX to produce PHP web sites. It doesn't assume any knowledge of PHP. |
Flash™ MX ActionScript For Designers |
Doug Sahlin |
From user interactivity and eye candy effects to automated content management, ActionScript gives you the power to take your Flash™ movies to the next level. But what if you’re not comfortable with objects, variables, and all that other programming stuff? Relax! Using plenty of easy-to-understand tutorials and an absolute minimum of technical jargon, Doug Sahlin takes the mystery out of ActionScript – and shows you step by step how to put it to work in real-world Web design. |
Interface Design |
Alastair Campbell |
A professional journey through every aspect of graphic structure and digital navigation. |
JavaScript™ for the World Wide Web: Visual Quickstart Guide |
Tom Negrino, Dori Smith |
When Peachpit Press released the debut edition of JavaScript™ for the World Wide Web: Visual QuickStart Guide, it immediately became one of the most useful tools for busy Web developers. Now in its fourth edition, this book has been improved, expanded, and more finely tuned.
Written for Web coders who have at least some familiarity with HTML, the book doesn't necessarily require you to have knowledge of JavaScript™ programming or scripting. The presentation is illustrative and productive, and concepts are introduced via practical examples, explained briefly, presented in code, and then explained line by line. Using judicious screen shots and new code highlighted in red, the authors have made JavaScript™ for the World Wide Web quite intuitive. In this new edition, they point out features compatible with only certain Web browsers using new IE and Netscape® icons. Along with its core content, the text includes an excellent genealogy of the various flavors of JavaScript™, complete with an extensive object flowchart that is colorcoded by browser version. It also steps outside the base language with a chapter on visual development tools that use JavaScript™, like Dreamweaver®, GoLive®, and Fireworks®. There are tons of useful scripts in the book, and the publisher provides a companion Web site where you can get each script, as well as an interface for viewing the code in action. You can download all of the scripts in a single Zip file. This is simply a must-have guide to JavaScript™. |
JSP™, Servlets, and MySQL® |
David Harms |
JSP™, Servlets, and MySQL® Next-Generation Solutions for Database-Driven Web Content Offering complete control and terrific runtime efficiency, server-side Java® delivers a tightly integrated solution for database-driven Web sites. But how do you implement server-side Java® in the real world? This unique guide shows how. Using plenty of easy-to-follow examples, veteran developer David Harms explains in detail how to put JavaServer Pages and Java® servlets to work with a MySQL® database. From server-side Java® and MySQL®F basics to Tomcat™, JavaBeans, multithreading, and authentication, it's all you need to create a cutting-edge interactive site. Create State-of-the-Art Database Applications for the Web. |
Macromedia® Dreamweaver® MX for Windows® and Macintosh: Visual QuickStart Guide |
J. Tarin Towers |
Even if you've never used Macromedia® Dreamweaver® before, Macromedia® Dreamweaver® MX for Windows® and Macintosh: Visual QuickStart Guide will have you up and running with Macromedia®'s popular Web authoring program in no time. This completely updated edition of our best-selling guide to Macromedia® Dreamweaver® uses step-by-step, task-based instructions to explain all of the program's basic tools and how to use them to design a Web site. The book covers the program's existing features as well as its new ones, including its site setup wizard, context-sensitive toolbar, snippets, and enhanced coding tools. Whether you're using Macromedia® Dreamweaver® MX as a WYSIWYG page-layout tool and never want to write HTML, or if you're a hand coder who prefers using a sophisticated text editor, you'll find Macromedia® Dreamweaver® MX for Windows® and Macintosh: Visual QuickStart Guide indispensable. |
Macromedia® Fireworks® MX for Windows® and Macintosh: Visual QuickStart Guide |
Sandee Cohen |
A fantastic book for learning everything you need to know about this invaluable and powerful new graphics tool. Fireworks® can literally double the number of creative possibilities for already talented web designers with all kinds of graphic design tools and easy-to-use features. Fireworks® is highly recommended for use in 21W.785 for students to create original graphics and complex effects in DHTML. The book is an easy read, with lots of helpful graphical examples, and Fireworks® can be mastered inside of a single week! Take a look at this book and Fireworks® MX if you get a chance. |
Macromedia® Flash™ for Windows® & Macintosh: Visual Quickstart Guide |
Katherine Ulrich |
Ulrich covers it all-from the basics of vector animation to sophisticated interaction and transition effects-in the clear, concise prose readers have come to expect from this popular series. Covers Flash™ MX. Softcover. |
The MIT Guide to Teaching Web Site Design |
Edward Barrett, Deborah A. Levinson, Suzana Lisanti |
Most books on Web design focus on the appearance of the finished product and pay little attention to the ideas and processes involved in intelligent interactive design. This book is based on the premise that the principles that have defined good communication design in the past apply equally well to the Web. The basic process is one of defining the purpose, audience, and style appropriate to one's objectives. Another premise is that effective Web site design is an inherently collaborative process requiring not only technical skills but more traditional written and oral communication skills. Hence, this book stresses a social, process-oriented approach both to design and to classroom instruction.
This book is written by Prof. Barrett himself and contains a lot of invaluable information for succeeding in the class. It even contains details of your assignments, and of his expectations for your projects! Worth looking at. |
Open Source Web Development with LAMP: Using Linux, Apache™, MySQL®, Perl, and PHP |
James B. Lee, Brent Ware |
Open Source technologies are providing contemporary developers with a range of more cost-effective and robust alternatives to commercial software for building dynamic, data-driven Web applications. This practical guide presents a comprehensive survey of LAMP (Linux, Apache™, MySQL®, Perl, and PHP), and it shows how these solutions can be implemented efficiently and securely while improving reliability and dramatically cutting costs. |
Perl & CGI for the World Wide Web: Visual Quickstart Guide |
Elizabeth Castro |
New edition of a resource that shows how to create useful new scripts or adapt existing ones to individual needs. Castro (author of several books about the Web) tells how to set up and install a local server in order to learn Perl and test scripts without signing up with a commercial Web host; place forms on Web sites that collect and process user input such as product orders and comments; use CGI.pm, the standard Perl module for analyzing incoming form data; and how to debug and use security techniques. |
PHP for the World Wide Web Visual Quickstart Guide |
Larry Ullman |
Designed for developers, this guide and reference covers the key concepts of PHP and explains the features of PHP version 4.04. Beginning with a basic overview, it moves on to cover syntax, testing scripts, working with variables, and creating Web applications. Along the way, sample scripts and projects illustrate major points. Ullman is a PHP programmer and Web designer. |
The Web Design WoW! Book |
Jack Davis, Susan Merritt |
Case studies concentrate on how to resolve the particular challenges of interactive on-screen communication. Contains hundreds of design ideas for drawing people in and calling them to action; targeted solutions for marketing, promotion, education, sales, applications, entertainment, and publishing; tips for organizing project work flow, communicating with clients, coordinating with technical experts, and getting sites notices; and real-world reports on what it takes to create sites and CD-ROMs. The included CD-ROM contains WYSIWYG and HTML editors as well as full working versions of browsers, plug-ins, and utilities. |
|
Apache™ is a trademark of The Apache Software Foundation.
Flash™ is a trademark or registered trademark of Macromedia, Inc. in the United States and/or other countries.
Javascript™ is a trademark of Sun Microsystems, Inc. in the United States and other countries.
JSP™ is a trademark of Sun Microsystems, Inc. in the United States and other countries.
Tomcat™ is a trademark of The Apache Software Foundation.
Adobe® and Photoshop® are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.
Dreamweaver® is a trademark or registered trademark of Macromedia, Inc. in the United States and/or other countries.
Fireworks® is a trademark or registered trademark of Macromedia, Inc. in the United States and/or other countries.
GoLive® is either a registered trademark or trademark of Adobe Systems Incorporated in the United States and/or other countries.
Java® is a trademark or registered trademark of Sun Microsystems, Inc. in the United States and other countries.
Macromedia® is a trademark or registered trademark of Macromedia, Inc. in the United States and/or other countries.
Microsoft® is a registered trademark or trademark of Microsoft Corporation in the U.S. and/or other countries.
MySQL® is a registered trademark of MySQL AB in the United States, the European Union and other countries.
Netscape® is a trademark of Netscape Communications Corporation in the United States and/or other countries.
UNIX® is a registered trademark of The Open Group.
Windows® and/or other Microsoft products referenced herein are either registered trademarks or trademarks of Microsoft Corporation in the U.S. and/or other countries.
|
|
|
Rating:
0 user(s) have rated this courseware
Views:
27650
|
|
|
|
|