Webmaker/Teach/LiteracyResources/Introduction to Collaborative Webmaking

From MozillaWiki
Jump to: navigation, search

Download the pretty PDF version! media: Introduction_collaborativeWebmaking.pdf‎


Web Literacy is quickly becoming the fourth literacy, yet it’s often not integrated into the classroom. This sample curriculum was created to help teachers integrate Webmaking into their standards based curriculum through a project based learning method that uses the Web as it’s platform.

Special knowledge about the web is not required to run a version of this curriculum in your classroom. The only thing your students need to be able to do is open a browser and use a mouse.

Learning Objectives

The goal of this curriculum is to help learners plan and develop a collaborative web project and think critically about the subjects and topics you choose.

Students will learn how to work together to solve problems in a digital environment. Webmaker skills will be presented and developed and learners will develop a base understanding of terms and processes used in Webmaking. At the end of the project, students should know a variety of collaborative tools that they can use to express themselves on any topic, academic or other.

The Wordpress framework plays a major role in this curriculum and students will learn the basics of the blogging system and how to use certain tools within it. Technical competencies surrounding the design process are also covered in this curriculum. Tips and tricks on the strategic planning and organization of content will help students think critically about the choices they make when creating.


The ability to create a collaborative project using the Web as the communication, planning and development platform is only attainable through practice. For this reason, a project based method is the best choice.

At Mozilla, we believe that learning is an active process. Many of our programs are built with constructivist theories in mind. This curriculum supports knowledge construction as opposed to knowledge reproduction.

The first step in opening the door to Webmaking is the perceptual understanding of collaborative web practice. This curriculum will help students develop an interest in technical and communicative skills as their desire to participate in the landscape of the web grows.

Since this curriculum proposes a great deal of self-organized collaborative work, the students will need to organize their time effectively. They will have to navigate the flexibility of their own project time line in combination with the class project deadline. Time management, group cohesion and cooperation are other lessons this curriculum aims to transfer.

Content and Flow

Time Requirements

Because coming to a decision or answering a complex question can take longer when digital communication replaces face-to-face communication, this course is broken up into four phases that span a total of six weeks. The four phases are meant to run in sequential order and the content is prepared in a way that should leave plenty of time for the successful development of a full fledged project. Furthermore, the timing is such that the priorities and wishes of the learner can be worked in.


Introduction Phase

In the first phase, the project is introduced to the students. This phase can take place in the classroom or as a synchronous, virtual video conference. Choose a specific theme or topic that you want your students to explore and modify the project outline below to fit your topic.

Then, separate students into groups. Keep the groups under five people per group to ensure maximal participation. Try to put students together that have similar interests, but varying competencies in digital media and the subject you’re basing the project around. Give your students some tips on how to work together. Talk to them about respecting each others opinions, division of labor, Netiquette, turn-taking, etc.

Next introduce the project and answer any questions your students might have about your requirements. Think of innovative ways you can use peer assessment to inspire students to maintain a good work ethic, and explain these assessment procedures to your students.

You might want to give some quick crash courses on setup and basic usage of the collaborative tools you plan to use over the course of the project.

Group Dynamics Phase

After the introduction phase, give your students some time to get to know each other. Trust is an important issue in group work, so this phase is designed to circumnavigate typical problems and get group members cooperating despite the difficulties that come with working collaboratively through communication technology.

Project Concept Phase

This phase gives the groups two weeks to determine their project theme and prepare a presentation for the instructor and the other groups.

Design and Development Phase

The last three weeks of the project are for designing and developing. Groups will learn Wordpress. You should give a thorough intro to the platform to help students get started.


Video conferences, Etherpad, Chat and Email are recommended media. In today’s web landscape there are hundreds of solutions for communication tools, and everyone has his or her favorite. All of these tools have pros and cons. One of the learning goals is the ability to effectively collaborate, so allow groups to choose the tools that help them develop that ability.


In classical forward facing classes, the students have a passive role and the instructor has an active role. This dynamic is the absolute opposite in this project. You’ll act more as a project manager and allow students to explore their project theme and the communication tools on their own.

Lastly, have fun with it! Just provide your students with motivation and support and see what kinds of amazing ideas they have.

Hack the Project Outline

The next section of this curriculum is the sample project outline. This outline is meant to serve as a jumping off point for you. We hope that you will ignore pieces that you don’t feel apply and expand areas where you feel your students need more guidance.

In short, we hope that you will take it, hack it, run it in your classroom and then let us know how we can improve the base curriculum.

Project Outline

You and your group will collaborate to create a Wordpress site that:

  • introduces each member of your group
  • critically and creatively explores a theme related to Filmmaking Example: „The History of Media“
  • presents a project narrative Example: „This project serves to introduce you to the History of Media. From the printing press to the digital revolution, this project explains the history of mass media. In our approach we...Every mass media...etc“
  • justifies the project narrative
  • presents detailed information on this theme from the perspective of the group as well as personal perspectives and thoughts on the development process through blogposts, demos and remixes.
  • shows an active collaboration through comments and discussion functions
  • clarifies important aspects and concepts related to filmmaking
  • allows simple social sharing
  • uses text, graphics, photographs, animations and other forms of media that are self made or have a Creative Commons license and properly attributes all sources.


1: Ice Breaker

As a group, start an Etherpad (etherpad.mozilla.org). Each member write a haiku in the Etherpad, then comment on each other’s haikus.

2: Virtual Bash

Just hang out with your group and have a social hour over video chat. Try Google Hangouts or use Skype Conferencing. Or meet up in person after school for an hour.

3: Make Decisions

Discuss in your group:

  • who the moderator is (the moderator is responsible for sending weekly updates about the group work to the instructor)
  • what expected reaction times are (what’s the longest amount of time a group member has to react before the moderator „tells on“ them?)
  • when your groups weekly chat/video chat appointment is
  • which tools your group will use to communicate
  • why different perspectives are valuable
  • the voice of your project (serious, humorous, formal, informal, etc)

Document your decisions in an online document. Write up how you came to your decisions and compose a synopsis of the discussion help over varying perspectives. Share this document with the instructor.


1: Brainstorming the Theme

Discuss with your group possible theme ideas. Decide on one and create the first version of your project narrative. Each group member should compose a few paragraphs about the collaborative process. These paragraphs will later form the first blog post that will be put into Wordpress.

2: Sketch a basic schematic and Make Design Decisions

In this project you will build a fully functioning website.

  • Write a general description of your user.
  • Write all the content bits and pieces out on little pieces of paper. Then, categorize the pieces. This exercise will give you a logical global navigation (and subnavigation if you have lots of content).
  • Create a hierarchy for your content.

To complete these tasks, check out the Designing for the Web page

3: Write your Group Profile

Make profiles for each member of the group as well as a group profile. Be creative! A profile doesn’t necessarily have to include text!

4: Create a Presentation

You’ll be giving a presentation about your concept to the instructor and the other groups. This should include:

  • the draft project narrative
  • the motivation for selection of your theme
  • a description of your project’s target audience
  • the hierarchy of your site (structural tree)
  • a plan for using page elements (what kind of logo, headlines, graphics etc)

Prepare a 10 minute presentation. You can make a slideshow, pdf, video, etc. You can even create an online presentation depending on the skills your group members have.


1: Prepare Wordpress

Go to Wordpress.com and create a new blog. Make sure that each group member has an admin account. Discuss and decide on a Wordpress template that you want to use. Decide which plugins you will need.

2: Divide up the Production Tasks

Make a list of all the content that needs to be produced. Decide who is responsible for what.

3: Development

Put your content together and place it into your Wordpress. If you need help with Wordpress, check out the library of tutorials: http://codex.wordpress.org/WordPress_Lessons