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. |