The following exercises are suggested for beginning web design or net art students. Complete the exercises and projects then use the evaluation and reflection questions to analyze your work. If you are an advanced learner, you should skip ahead to the projects and, where it is appropriate, create working mock-ups rather than the static images suggested to display a concept.

Section 01: Formalism & Conceptual Art

Exercise
Build an HTML page that demonstrates a working knowledge of the body tag and its properties. Include other common HTML tags (such as H1, P, and IMG SRC), and embed a video from a public site such as YouTube or Vimeo. Consult Wired’s Webmonkey HTML Cheatsheet (http://www.webmonkey.com/2010/02/html_cheatsheet/).

Project
Use your growing knowledge of website design and conceptual art to create a hypertext project influenced by your favorite conceptual artist.

Evaluation & Reflection
Compare your project to the conceptual art work that influenced it. How was your project similar to and different from the original? Did your project deliver a translation, a remix, or an entirely new message? How does viewing your work in a web browser (or other digital online viewing platform) differ from the viewing modality of the original?

Section 02: Collections & Communities

Exercise
Implement code, such as material provided by Listamatic (http://css.maxdesign.com.au/listamatic/) in your HTML and CSS documents to create a user interface. Learn to save images for the web and to insert rollover images using HTML and CSS.

Project
Build a user interface for an online game, mapping tool, or photo gallery. Construct the interface in Photoshop, Illustrator, or other digital design application. Or, create the interface from analog materials, such as paper or wood, and translate it to the digital environment with a camera or scanner.

Evaluation & Reflection
While planning a user interface, the artist must consider how a player would intend to operate in a game, map, or digital gallery environment. How did your plans change from the beginning of your development process to the end? What words did you consider using as directives for the player/user? How was your design inspired by the goal of the game, map, or gallery?

Section 03: Crowdsourcing & Participation

Exercise
Learn how CSS and HTML work in tandem. Feed your content to the HTML document and design its display using Cascading Style Sheets. Begin by learning the syntax of CSS: a declaration block consists of a selector followed by properties that are assigned values. The more you understand basic rules of code, the easier it is to implement or modify pre-existing source code. W3 Schools is a helpful online resource for learning CSS (http://www.w3schools.com/css/).

Project
Develop a project that uses public web services and sites, such as YouTube, Vimeo, Facebook, Twitter, Flickr, and so on, to activate a community that participates online with popular or familiar tools.

Evaluation & Reflection
When you began planning your project, did you first decide on a public service (YouTube or Flickr), or did you have a concept that determined which service you would use? How do popular behaviors (online or offline) influence artists’ projects? Can you name artists or designers whose work is obviously influenced by popular behaviors? Did you find that your project was limited by the amount of interactivity allotted by the public web service or site?

Section 04: Data Visualization

Exercise
Continue learning to write CSS code. There are three basic selectors you should learn to use first: tags, classes, and IDs. Modify the appearance of an HTML document using each of these selectors in the inline, embedded, or external CSS file. Learn more about CSS selectors on Selectutorial (http://css.maxdesign.com.au/selectutorial/).

Project
Start by collecting data empirically, using a survey (www.surveymonkey.com can be a helpful tool), or from a public online database. Then develop a concept for using the web to translate that data into a visual experience. While you may not be able to write the code required to execute your idea, you can provide visual examples of how you think the website or tool would work, and how you imagine the results would be displayed.

Evaluation & Reflection
How accurate was your visualization? Was it possible for you to create an accurate display of quantitative information? Is it important for the display of information to reflect the original date accurately? If accuracy is not important, what function does the visualization serve? Did you create a social or political message that is better “coded” for the public as a persuasive image?

Section 05: Error & Noise

Exercise
Learn how to create a “Container” or “Wrapper” div ID using an HTML div tag with an assigned CSS ID. See Noah Stokes’ article, “CSS Floats 101” on A List Apart (http://www.alistapart.com/articles/css-floats-101/) to deepen your understanding of floats and containers. Create a mock-up webpage that demonstrates what your noise project would look like online.

Project
Make something out of nothing. Actually, make something out of some things that are disregarded in popular culture. Locate “noise” on the web. Develop a concept for transforming noise into a new, coherent narrative.

Evaluation & Reflection
How transformative was your project? Can you explain the difference between the original noise (in terms of its usage or intention, its visual identity, the nature of its economic symbolism, and so on) and the outcome of your project? How did you research or define “noise” when you began working on this project?

Section 06: Surveillance

Exercise
Learn how to add header and footer sections to a webpage using CSS. See http://www.cssstickyfooter.com/

Project
Develop a concept for a project that utilizes surveillance technologies in your community for didactic, expressive, or narrative purposes.

Evaluation & Reflection
How did you find surveillance technologies in your community? What platform would you use to display your finished project? How will you direct members of your community under surveillance to your project?

Section 07: Tactical Media & Democracy

Exercise
Learn how to adjust the positioning of DIV tags on a webpage. Lynda.com offers videos demonstrating positioning “best practices” at http://www.lynda.com/CSS-tutorials/positioning-best-practices/47543-2.html. Demonstrate an understanding of absolute, relative, and fixed CSS positioning values.

Project
Create a mock-up for a website, application, or online game that helps a citizen (user or player) to understand or interact with her government.

Evaluation & Reflection
To complete this project, you should have focused on one aspect of the government. What makes this aspect of government difficult to understand? How is the public currently passive in relationship to this element of government? Aside from increasing awareness, what would a civilian be motivated to do after interfacing with your project? What were the design influences for this project? How does your project visually relate to official government media?

Section 08: Open Source

Exercise
Explore open source software, browser add-ons, or code. Inkscape, Gimp, Scribus, Kompozer, and Processing are all open source graphic software applications you can learn from the open source version of xtine burrough and Michael Mandiberg’s Digital Foundations, translated with help from the open source community on Floss Manuals (see http://en.flossmanuals.net/digital-foundations/). Or, integrate new code into your own project.

Project
Apply a Creative Commons or GNU license to some or all of the projects you have created in this series.

Evaluation & Reflection
What are the positive and negative factors an artist or designer must consider when determining the type of copyright she will apply to her work? In what types of situations can you imagine using a CC or GNU license?

Section 09: Hacking & Remixing

Exercise
Add new code to the HTML and CSS you have created by copy and pasting, then modifying it to suit your needs. For instance, you can add and modify an image gallery on your page by downloading the free Visual Lightbox application from http://visuallightbox.com/.

Project
Hacking and remixing have the process of modification in common. Modify pre-existing media—you could start with a website, a web service, an application, a popular photograph (try searching the Library of Congress’ Flickr account), or sound or video from the Prelinger Archives (http://www.archive.org/details/prelinger), to create a new project. Transformative works should create a new meaning, story, or visual identity based on the original.

Evaluation & Reflection
Summarize your research on the original media used in your work. How well did you understand the history, intention, message, and consequences of the original media? How did this understanding shape or inform the project that you created by remixing or hacking? What purpose and/or audience does your work serve?

Section 10: Performance & Analog Counterparts

Exercise
Use your new skills to create an online portfolio of projects you made in response to the suggestions accompanying each section of Net Works.

Project
Develop a concept for a project in which a physical object or community influences a virtual community, or a virtual community influences a physical object/community. Demonstrate proof of your concept with images, information graphics, or webpages.

Evaluation & reflection
How would you engage the community in participation with your project? Is the community the general public or an audience easily within reach? What would motivate the community to engage with your project?