Software and Hardware Requirements
This curriculum was designed to be cross-platform, and not linked to any specific software products. We recognize that instructors have a variety of operating systems and software applications available to them, as well as a variety of preferences in this area. Therefore, the hardware and software configurations identified here speak only of broad product categories. Any specific product within each category will suffice.
Software
Web Browsers and Plugins
At least two web browsers are needed, but it is better to have multiple browsers available if possible. Students are encouraged to view their pages using multiple browsers in order to appreciate and respect browser differences. The following is a sample of possible browsers that might be used. Some of the products available support multiple operating systems, including Windows, Mac OS, and Linux. Check the product home pages for additional information.
Only one of the above browsers needs to be used as the primary browser for the course. Common plug-ins, such as the Adobe Flash Player and Adobe Acrobat Reader, should be installed for the primary browser.
Also, all major browsers include tools that enable users to inspect the HTML and CSS of any web page to see the code that web developers used to create particular features. These tools have very sophisticated capabilities that professional developers use regularly in their work. However, at a basic level students can learn a great deal about a web page by pointing to an element, right clicking, and selecting "Inspect Element" or something similar. With some tools they can even manipulate the code and see immediate results, which can be a very fun and effective way to learn. These tools are automatically available in some browsers, but in others they must be enabled, and in Firefox an extension (Firebug) is required). These tools aren't specifically covered in the curriculum, but we highly recommend that instructors get familiar with them and consider strategies for introducing them to their students. Here are guides to these tools in each of the major browsers:
- Using Firebug for HTML Development
- Using Firebug for CSS Development
- Overview of the Chrome Developer Tools
- Using the F12 Developer Tools (Internet Explorer)
- Safari Web Inspector Guide
HTML Editor
This course teaches basic coding of web pages, including HTML, CSS, and JavaScript. Each of these languages is plain text, so the course can technically be completed using any text editor, including those that are bundled into operating systems such as Notepad (Windows) and TextEdit (Mac). However, we recommend using an HTML editor, especially designed for writing code. These tools include helpful features such as color-coding and highlighting of code, ability to expand and collapse sections of code, automatic tag completion, and spell check. Here are a few examples of free or low-cost HTML editors:
- NotePad++ (Windows only)
- HTML-Kit (Windows and Linux), available in a free version or commercial version with more features
- gEdit (Windows, Mac, and Linux), the official text editor of the GNOME desktop environment in Linux, also available for Windows and Mac
- TextWrangler (Mac only), a highly capable free text and HTML editor
- BBedit (TextWrangler with an enhanced feature set) and Coda are popular HTML editors for Mac. Both are reasonably priced, but neither is free.
GUI Web Authoring Software
Although this course primarily focuses on hand-coding of web pages, students are introduced to web authoring software in Unit 7. The curriculum does not teach a specific product, but provides instruction and activities that can be performed using any product in this category. Here are a few popular examples:
- Adobe Dreamweaver
- Microsoft Expression (Windows or Mac)
- Flux (Mac only)
- KompoZer (all major operating systems), free and open source
- Amaya (all major operating systems), created by the W3C
Graphic Software
Unit 4 focuses on creating and manipulating graphics. The curriculum does not teach a specific product, but provides instruction and activities that can be performed using any product in this category. Here are a few popular examples:
- Adobe Photoshop
- Adobe Fireworks
- GIMP (GNU Image Manipulation Program), free, works on all major operating systems)
Hardware and Other Needs
When graphics are introduced in Unit 4, activities focus on downloading images from the Internet (with an emphasis on understanding copyright laws) and creating images using graphic software. However, images can also be obtained using a digital camera or by scanning print images. If either of these is incorporated into the course, you will also need hardware and software to support this activity.
Computer workstations used in this course must be sufficiently powerful to efficiently display the majority of today's web pages, even those that include highly graphic or animated content. If a computer is up to that challenge, it should also be able to efficiently run any of the software used in this course. That said, graphic software places a higher demand on computer hardware than any of the other software listed above. If funding or other limitations prevent all available workstations from being powerful enough to support this software, then at least one, and preferably half, of the workstations should be sufficiently powerful. These workstations could be designated graphics stations, and use of them could be staggered or shared during lab time.
Below are a few additional recommendations for this course:
- A networked server with access to shared drives and Internet
- A video projector for providing in-class demonstrations
- A system for creating shared resources that students can access anywhere. Materials can typically be made available on a class website or server for students to download. However, if you prefer distributing content via a physical medium, you may need at least one computer with a CD burner (and student workstations with CD drives) or USB ports on all computers and USB thumb drives that get distributed to all students.