My first WebVR Camp roadshow with local projects based in São Paulo and Campinas

In recent weeks I’ve taken my time to dive into WebVR with A-Frame and teach people from technology projects to create new things using A-Frame, the result is that I teach WebVR/A-Frame to developers, creators, educators, clubbers, Mozilla volunteers and people working or not with technology, the workshops were part of the Mozilla Activate campaign.

And to start the journey, we have partnered with 3 local projects based in Campinas and São Paulo, which are:

  • Reprograma, a project based in São Paulo focused on the professional development of women in technology that work with National Service of Industrial Learning in São Paulo at Santa Cecília.
  • Programa Juventude Conectada, a Campinas municipal government initiative to promote digital and social inclusion, through free access to information technology in community telecentres implemented in the different territories of the city.
  • Leão Mozilla Clubs, a Mozilla Club based on Campinas focused on digital inclusion, web literacy and 21 century skills, that I lead as captain.

In this report I will quickly tell you the steps for you to prepare this workshop, our experiences, tips and tricks.

#1 Roadshow’s Organizing

#2 Event’s Flow

This is our event flow, it is based on the Mozilla Activate template, with only a few modifications and more details.

Getting Started

A-Frame Concepts

  • Demo of basic A-Frame scenes & apps
  • Creating account and overview in GitHub and Glitch
  • Introduce A-Frame HTML tags
  • Building scenes with exercises using:
  • Primitives
  • Inspector
  • Position
  • Rotation
  • Radius
  • Others primitives
  • Loading resources (images using A-Frame CDN)
  • Entity-component


  • Time to create/remix a scene
  • Push the projects to GitHub account

Review & Plan

#3 The experience


WebVR Reprograma Learning Team

It was my first experience teaching A-Frame and happened to students of the web development course of Reprograma and other guests who participated in our workshop, this was certainly one of the best workshops because I and Mozilla volunteers learned a lot about methodology to teach A-Frame and the organization of this type of workshop. Participants are developers in the process of learning and professional development, already familiar with HTML, CSS, Javascript and GitHub, not yet very familiar with Glitch.

Our learning this first workshop were:

  • It is necessary to think of a new teaching methodology, including finding other platforms that can help facilitators such as Dontpad, Glitch is a good tool, but maybe not the best for learning.
  • WebVR and related workshops need much longer than expected, including for organization.
  • Coffee, break and time for networking is important to keep participants active and unwind.
  • Tag name are important to identify everyone who is attending the event, to know their names at all times and to improve empathy — in this case, two events were happening in the same place.
  • Swag is very cool, fun and allows participants to take the Mozilla brand, A-Frame and WebVR to every corner of the city, marketing allied to things people like = match.
  • Invite Mozilla volunteers around to learn and develop the upcoming workshops.
  • Invite volunteers to join local Mozilla community groups, they may be interested in other areas and ways of contributing.

Participants were very excited for more workshops that teach more about A-Frame, others have started creating their own projects using A-Frame!

Leão Mozilla Clubs

WebVR Workshop on Leão Mozilla Clubs

WebVR Workshop on Leão Mozilla Clubs

WebVR Workshop on Leão Mozilla Clubs

This was my second experience teaching A-Frame, the participants are teenagers and some adults including seniors who are developing essential 21st century skills weekly at the club, most of them future technology professionals and content creators such as musicians, artists and youtubers.

Teaching WebVR/A-Frame has taken 2 sessions to learn basics of WebVR and A-Frame, here you also need something fun to motivate this specific audience, we teach basic concepts of VR, we try the examples and we begin to make a remix of examples of the A-Frame directly in the Inspector to learn notions of trigonometry such as position, rotation and radius, in addition to familiarizing with the primitives and entities, after the playful experiment with cardboards and A-Frame Inspector we started development activities using only the HTML tags of the A-Frame using Atom that is already installed on telecentre computers.

Our learning this second workshop were:

  • Activities in Mozilla Clubs need 2–3 facilitators to help with the activity, it’s something very new to them.

We already have scheduled activities to continue teaching and developing cool things with A-Frame.

Programa Juventude Conectada

WebVR Workshops on Programa Juventude Conectada

WebVR Workshops on Programa Juventude Conectada

WebVR Workshops on Programa Juventude Conectada

WebVR Workshops on Programa Juventude Conectada

We have already worked with other workshops of Mozilla together with the Programa Juventude Conectada, is a digital culture program of the city of Campinas, here we developed 4 workshops for 68 educators of digital culture, we divided them into 4 different groups in 2 full days of workshops . The educators of digital culture work promoting digital culture that include digital inclusion, web development, photography and video in all the telecenters of the city of Campinas.

The teams of educators have multiple skills, including web development, so it was easy to develop the activity for all of them, the prediction is that this group can take A-Frame/WebVR to activities in telecenters of the city and many projects begin to be developed with the framework.

Our learnings in this third workshop were:

  • Get WiFi passwords and administrator users of the operating systems of lab computers.
  • Take HDMI/VGA cables/adapters to connect your laptop to the projector.
  • Many people do not use GitHub!

#4 …and then?

Work continues! Here are some ideas we’ll be working on in the coming months:

  • More and more workshops on web development projects, hackerspaces and FLOSS events.
  • Start an A-Frame meetup in São Paulo to focus on new continuous sessions, hackathons and build a local community of contributors.
  • Start a local group on Facebook.
  • Create a video course on YouTube or Teachable for more people learning A-Frame in every corner of our country.
  • Create a teaching activity focused on Mozilla Clubs or start an experiment and issue a badge through the OBA for this WebVR activity.

Do you want to help us develop some of these challenges? Start a topic in our forum!

#5 Thankfulness

Thanks to everyone who participated in our workshops, it was a privilege to teach A-Frame! More news is coming, I’ll see you soon! Thanks to all local projects and partners who have made room for activities, including facilitators of local projects! And a super, mega and big thank you to Cynthia Pereira, Airton Zanon, Francisco Picolini and Rizki Kelimutu from Mozilla for the resources, time and support!!!