This is the P2PU Archive. If you want the current site, go to www.p2pu.org!

School of Webcraft - Welcome!

Mozilla and P2PU teamed and created the School of Webcraft, a powerful new way to teach and learn web developer skills. School of Webcraft courses are 100% free, globally accessible, and powered entirely by learners and mentors like you.

P2PU, the home of School of Webcraft is moving to a new platform. Check it out!

On the new site you can sign-up for open study groups and volunteer to help improve those which are under development. If you can't find the study group to suit your needs, you can create your own study group to run within School of Webcraft!

Some of the learners from the School of Webcraft's "Web 200" class last semester

 

Get involved:

Course list

P2PU has moved to a new home - please go to p2pu.org to see our current courses. If you want to see what courses were previously run on this site, here's a selection of completed courses:
Course Name Organiser Course Status
Javascript: 101This course will cover basic concepts of Javascript programming and the DOM (document object model)Show more details
Go to the course page

Update: We have created a course website to organize this course over the next 6 weeks.

Javascript began as a language to program web pages, but now it has become much more than that. There are server side frameworks for creating entire applications in Javascript, and testing frameworks which allow us to write scripts in Javascripts, and the original intent of creating dynamic web pages with Javascript as well.

The course content will consist of a series of video talks delivered by Douglas Crockford on Javascript programming. I have orgamized these videos in the form of a course on this website.

The basic process of learning and participation will be as follows:
1. Watch a video which explains certain Javascript concepts
2. Reflect on what you learned and blog your notes/reflections. If you have the time read the blog post of one or more other participants and engage them in a technical conversation.
3. Do the homework which may be a quiz and/or a small programming assignment
4. Upload the programming assignment to any open source repository
5. Write a blog post to describe how you approached the assignment, what doubts you had while doing the assignment, and anything related to the assignment.
6. In this entire process of you have any questions, technical, or otherwise, please post them on th forum
7. Along with asking questions, please also try and answer other participant's question whenever you can. Remember teaching is a great way to learn.

The blog posts and assignments uploaded on open source repositories will become your "proof of learning".

Course Schedule:

Week 1:

Week 2

Week 3

Week 4

Week 5

Week 6

  • Backlog and recap
Parag Shah
Parag Shah's picture
Completed
Learning Web UI AutomationLearn how to automate web applications by driving real browsersShow more details
Go to the course page

This course will give a good grounding on using the Selenium Web Application Testing Framework. Selenium is a popular tool used by the top web companies like Google, Mozilla, Microsoft and many more.

By the end of the course, participants will have the confidence to automate most web applications. This will then give you the confidence that your application works as it is intended.

David Burns
David Burns's picture
Completed
Intro to Design and UsabilityWhy is web design important? What is Usability and what does it mean to my site design?Show more details
Go to the course page
This is a basic introduction to usability and design fundamentals for absolute beginners. Designing for the web is all about presenting your content so it works best within a relatively fixed environment, such as an HTML/CSS document, and usability is all about making it work well for users who have fairly fixed expectations of how to navigate a website, so they enjoy using your site and stay to use your content.

The goal of this course is to get you thinking about design from the point of view of the audience, not the designer, and not the client. The focus of this class will be on understanding design and introductory usability concepts for people who already have some very basic HTML skills. We will look at what constitutes typical user behavior; eye tracking and how designing to typical behavior means certain layouts are more usable; why contrast, text sizes, type styles, choice of graphic elements, and color choice are important; and a basic overview of what user experience is and why it's important for any page. We will also cover what copyright means to you as a designer and where to get images and content legally, as well as looking at freely available online tools.


We will be using the publicly available work of Vincent Flanders and Jakob Neilsen as our main resources.

Copyright vs. creative commons resources:

B. Maura Townsend
B. Maura Townsend's picture
Completed
Experiencias web con html5No construyas aplicaciones web , crea experiencias web con html5Show more details
Go to the course page
Presentacion

fuerza HTML

material course (works,lectures and code demos)released under CC. : )

go inside html5 webcraft.giweb.org  pass: p2pu (only in spanish).

La nueva generación de navegadores web  trae consigo una gran cantidad de nuevas características que abre las posibilidades del desarrollador y diseñador web. Nuevas propiedades para nuestras hojas de estilos, transiciones css, audio, video , relocalización, sockets , las extraordinarias bases de datos locales,  los nuevos motores de javascript, y posibilidades ilimitadas en cuanto a gráficos en nuestro navegador; cambiaran la forma en que interactuamos con la web.

En la época en que vivimos sin  limitaciones de ancho de banda y recursos físicos, el front-end de nuestra aplicación a mi parecer y dependiendo el enfoque de nuestra aplicación (para los escépticos), es tan importante como un gran back-end, es decir, las aplicaciones que tanto usamos actualmente tienen una lógica de presentación tan compleja que hace gran parte de la magia.

Encaminémonos en este mundo tan interesante donde tendré el honor de guiar a personas enfocadas y con animo de aprender e investigar en nuevas tecnologías para nuestro bien y el de nuestra sociedad.

dany bautista
dany bautista's picture
Completed
Web Development 101Web Development 101: Learning open and standards based development for the web. #p2pu #webcraft #drumbeatShow more details
Go to the course page

This course will cover the core principles of developing standards compliant web pages. You'll learn how to define your page structure and content in the Hypertext Markup Language (HTML) and how to add style to your page using Cascading Style Sheets (CSS).

Questions we'll cover:

How is a webpage constructed?
What are web standards?
What are the basic tools required to build a simple web site?
How can I fix mistakes in my website code?
How do I make my site visible on the web?

Participants will create simple websites (6-8 pages) containing text, images and hypertext links and can use this as a foundation for more advanced skills they can continue to develop in the School of Webcraft. Course participants will learn about the importance of open web standards, will test their code on different browsers and will validate their code to guarantee it conforms to web standards. Participants will also document techniques and code using a wiki - this will be used as a learning resource for future courses.

Please Note: only open web technologies will discussed during this course - proprietary formats such as Flash are not taught in the School of Webcraft.

The initial meeting for the group will take place on the video channel Tokbox (http://www.tokbox.com) and communication will take place via mailing list and on a wiki. Participants will be able to communicate with the course organiser via Skype - the use of Skype between participants is also encouraged.

Pippa Buchanan
Pippa  Buchanan's picture
Completed
Reading CodeGet comfortable reading other peoples' code, from big open source projects to small standalone apps. #p2pu #webcraftShow more details
Go to the course page

In the Open Web world, we are often working with other peoples' code. Reading code helps to us to appreciate that there's no magic black box around "other peoples' code"; that it all comes down to logic; that every program has errors; and that sometimes reading the code is the best documentation.

This course will remind us that there is no magic-- only logic. We will dive into the mini universes of open source projects and learn techniques for getting oriented in projects large and small, debugging, stack traces, and simply getting comfortable reading code.


Each week we will plan to cover one open source project. During the week, participants will read specific code sections on their own, and there will be an ongoing chat room, (possibly with people signing up to be present during specific hours) to support discussions and questions outside of class time. Coursework will involve contributing to the public online documentation for each of these projects.   

We will try to cover a variety of project types and languages (javascript, php, python, ruby), and for each project and/or language, information about tools for reading, debugging or understanding the relevant "stack" will be introduced. 

During the weekly course meetings, a different person will lead each session and together we will go over the section of code assigned for that week, discussing our understanding of what is happening, techniques employed, and areas we found difficult to understand. At the end of the in-virtual-person session, the next week's subject matter will be introduced.

Initial list of proposed projects (balancing languages, familiar/popular frameworks, newness (older and cruftier or well developed vs new code))-- this list will be refined with course participants based on experience and interest as appropriate:

  • Drupal or wordpress (php)
  • Django or tornado (python)
  • Jquery, NodeJS or Protovis (javascript)
  • Mongodb (c++) or one of the mongodb language drivers (ruby/python)
  • Need a Rails project
  • Erlang? Haskel?
  • Browser extension firefox s3:// extension (ec2/s3)

Language/framework inspection and debugging tools

  • Print statements
  • Firebug/Chrome developer tools (javascript)
  • strace
  • server log files
  • ... more here (add your suggestions!)

What you can Expect to Learn

  • Code Reading comprehension
  • Exposure to different languages
  • Debugging tools for different environments and languages

What you Might Learn if you Work Hard

  • You might end up submitting a patch if you come across bugs or have ideas for enhancements

Thing we won't Cover

  • Writing code

  • Installation and configuration of these tools, although it will probably be helpful to have them installed (to tweak/explore/break them!), and there will be indirect/informal support via the chat room for doing this.


Jessy Cowan-Sharp
Jessy Cowan-Sharp's picture
Completed
HTML & CSS from the beginning.Not quite sure how to make HTML & CSS work like you want it to? Fix that with this course.Show more details
Go to the course page

Brand new to HTML & CSS and can't quite get it do what you want it to? This course will help you change that.

We'll start at the very beginning, covering the important things you need to know before you dive deeper into the wholesome world of crafting beautiful web pages.

Please note that the course is currently full for May 2011. If you would like to join the September 2011 intake add your name to the waiting list > http://jmcrl.com/fjdpz 

Jamie Curle
Jamie Curle's picture
Completed
UX: Designing for EducationHow to develop user experience designs that can be applied to various systems? #webcraft #p2puShow more details
Go to the course page

Instructional Design is a field of study that's directly related to cognitive and behavioral sciences. Its main objective is to maximize the experience of teaching and learning on special environments. This course is focused on VLE (Virtual Learning Environments). Many of the VLEs we have today are just file storage systems or discussion boards. Our mission then is to build interfaces, based on Ergonomics and Aesthetics concepts, that are easy to use, visually attractive and that motivate the users (not only students, but teachers as well) to participate on an active manner, not a passive one.

The course starts with an introduction to Infodesign, Human-centered design and Gestalt and Cognitive principles, so that every solution proposed can be coherently reasoned.

Before effectively proposing solutions to different learning scenarios, some "Personas-based" exercises will be done, so that the Designer can put him/herself into the role of the user.

After knowing the target audience, group exercises will happen around some specific questions: how can Instructional Design make the level of interaction among students, teachers and classmates to resemble the one they have when on conventional teaching methodologies? How can the basic principles of Gestalt and Cognitive sciences build the easiest path to things? How to work with open web standards and accessibility? How to explore multimedia content?

The course ends with rough concepts made into mock-up or prototypes, that are thoroughly analyzed via multi design thinking tools.

The student that attends this course will be able to develop user experience designs to be applied to various systems.

João Menezes
João Menezes's picture
Completed
UX: Design para a EducaçãoQueres aprender a desenvolver ambientes de experiência de usuário a serem aplicados a vários sistemas? #webcraft #p2puShow more details
Go to the course page

O design instrucional é um campo de estudo que está diretamente relacionado às ciências cognitivas e comportamentais. O principal objetivo é maximizar a experiência de ensino-aprendizagem em ambientes especiais. Este curso tem foco em AVAs (ambientes virtuais de aprendizagem). Muitos dos AVAs que temos hoje são apenas sistemas de armazenamento de arquivos ou listas de discussão. Nossa missão então é desenvolver interfaces, baseadas em conceitos de Ergonomia e Estética, que são fáceis de usar, visualmente atrativas e que motivam os usuários (não apenas estudantes, mas professores também) a participar de uma maneira ativa, e não passiva.

O curso inicia com uma introdução do Infodesign, Design focado no ser humano e Princípios de Gestalt e Cognitivismo, para que cada solução proposta possa ter bases comprovadas.

Antes de efetivamente propor soluções para diferentes cenários de aprendizagem, alguns exercícios baseados em Personas serão feitos, para que o designer possa se colocar no lugar do usuário.

Depois de conhecer o público-alvo, exercícios em grupo acontecerão ao redor de algumas questões específicas: como o design instrucional pode fazer com que a interação entre alunos, professores e colegas lembre aquela que eles tem em metodologias convencionais? Como os princípios básicos da Gestalt e ciências cognitivas podem formar caminhos mais fáceis? Como trabalhar com padrões abertos de internet e acessibilidade? Como explorar conteúdo multimídia?

O curso termina com conceitos livres transformados em mock-ups ou protótipos, que são analizados rigorosamente por ferramentas de design thinking.

O estudante que frequentar este curso poderá desenvolver ambientes de experiência de usuário a serem aplicados a vários sistemas.

João Menezes
João Menezes's picture
Completed
Javascript 1-2-3Qué puedo y qué no puedo lograr con #javascript en la web de hoy. Qué debería saber y qué sería mejor no hacer. #webcraft #mozillaShow more details
Go to the course page

ECMAScript (más conocido como Javascript) es el lenguaje de programación interpretado de manera nativa por los navegadores de Internet (browsers) y se ha convertido en un elemento indispensable del desarrollo de sitios web. En este curso aprenderemos las bases, la sintaxis y las principales construcciones del lenguaje, su interacción con la ventana del navegador y con el documento HTML, o más específicamente, con el Modelo de Objeto del Documento (Document Object Model o simplemente DOM). Esto constituirá la base para avanzar posteriormente a las complicaciones adicionales que introduce su empleo para hacer actualizaciones asíncronas de las páginas web (lo que también se conoce comúnmente como AJAX).

David Suárez
David Suárez's picture
Completed
Introduction to Ruby and RailsLooking for a web framework that's optimized for programmer happiness and sustainable productivity? Learn Ruby and Rails! #webcraft #p2puShow more details
Go to the course page

Ruby is a fascinating object-oriented language suited for many purposes.  Rails is a popular web framework for Ruby.

This course will introduce the Ruby programming language, focusing on those features and concepts that will be important when developing web-based, database-backed Rails applications.

Course participants will learn with freely available web resources and by completing small assignments.  Participants will also create a simple web application individually or in small groups.

Because this course will cover a lot of ground, it will be completed over 10 weeks.

Andy Lindeman
Andy Lindeman's picture
Completed
Introduction to Contributing to LernantaLearn how to contribute to the open source project that powers the new #P2PU. #opensource #python #djangoShow more details
Go to the course page

This is an introduction to contributing to the open source platform that P2PU runs on: Lernanta. Lernanta is based on (also referred to as a fork of) Mozilla's Batucada project and is a Python/Django web application whose code is on GitHub.

We'll walk through the whole process together from getting the code, running it locally, finding a bug to fix, fixing the bug, and contributing the fix to the Lernanta project.

This activity will be occuring on the new P2PU site: http://new.p2pu.org/en/groups/introduction-to-contributing-to-lernata/

Please sign up or follow there!

Jessica Ledbetter
Jessica Ledbetter's picture
Completed
From GIMP to xHTML and CSSCreate a website in xHTML and css: make a design in GIMP, slice it, code it.Show more details
Go to the course page

Contents
 

A. Create a rough sketch of the design

B. Page layout and color scheme

C. Creating the design 

D. Slicing the design

E. Coding the webpage


Planning (subject to change)

Day 1: creating the assets (youtube videos 1 - 6, see Course Material)
Day 2: creating the design (youtube videos 7-12, Course Material)
Day 3: coding the design: structuring it
Day 4: coding the design: styling it - without the images
Day 5: styling it: applying the images to the design
Day 6: Using Web fonts from the Fontsquirrel library
Day 7: Answering questions and Course Review

Wouter Cox
Wouter Cox's picture
Completed
jQuery - The fundamentalsA beginners course on jQuery, with a look at AJAX and plugin development.Show more details
Go to the course page

This course has been recreated at the new P2PU site

 

You will be able to follow this group.

 

http://new.p2pu.org/en/groups/jquery-the-fundamentals/


jQuery is fast becoming a must-have skill for front-end developers and for those who have decided to learn the language but have found the jargon to confusing....then this course is for you. The purpose of this course is to provide an overview of the jQuery library and to explain the fundamentals in an easy and understandable way possible. And to offer real world projects to get your teeth stuck into.

When you're done with the course, you should be able to complete basic tasks using jQuery, and have a solid basis from which to continue your learning.The best way to learn is by doing, so this course will be very much hands on.

We are going to be following along with Rebecca Murphy's jQuery Fundamentals online book and using the offline learning kit supplied by Addy Osmani. And in edition i will be using my own tutorials and towards the end of the course we will be visiting some of my favourite tutorials, which will be fun and should snap everything into place. I will say that even though i know jQuery, i am no way an expert so i will also be learning as we go.

neil pearce
neil pearce's picture
Completed
Drupal Social Web ApplicationLearn to use Drupal to build a social web app that lets users collaborate on projects and ideas. #webcraft #p2puShow more details
Go to the course page

A thread about Open Hippel was started on Groups.Drupal.org back in April 2010 - http://groups.drupal.org/node/59918#comment-248839

Course summary also on https://wiki.mozilla.org/Drumbeat/p2pu/courses/socialwebdrupal


Open Hippel is basically a Social Web App that allows anyone to form groups around their interests. It'll have tools to help people make decisions as a group, set criteria and milestones, and also have personal profile and history so people with skills can be connected with people needed those skills.

So far, TEDxTokyo Innovators Hub and K. International School are two of our biggest supporters, and Keio University had made it an official school project, which means students can be credited for working on it!

My plan is to open the development of this Open Hippel platform up as a course. We'll have hands on development classes, (we need some Drupal gurus from Acquia to help out on this!) The course work will be documented and with the help of Keio students, translated into Japanese. By the end of the course, the whole "book" will be available online under CC license.

In learning, it is far better to have a project that is real and has impact on the real world! Just like Stanford's project on Extreme Affordability products, students are far more engaged when they're working on real world projects. I think Open Hippel can similarly be that engaging project at P2PU.

Nicholas Wang
Nicholas Wang's picture
Completed