All posts in Mozilla

Webmaker Workweek: So Wow.

Just coming home from a truly fantastic week in Toronto with the talented Webmaker team. This was the first time the Webmaker product + community teams, plus Mozilla Foundation’s engagement and operations teams, met face-to-face to hack on Webmaker.

There’s only one way to describe it (hat tip, Brett!):

Webmaker Meta

In addition to trampolining, ax-throwing and general revelry, we also shipped a lot of things. Guided by a beloved scrum board, we got in small group to tackle big, interwoven topics.

Our new-and-improved wiki page shows how we’re building and improving the various aspects of Webmaker. (Thanks for meta-wrangling this, Matt!)

What’s also emerging is a helpful way to describe Webmaker’s offering. Lifted from Geoffrey’s notes, here’s a summary of the components that make up Webmaker:

We are clear on who Webmaker is for (people who want to teach the web), what we offer them (tools, a skills map, teaching kits, training, credentials), and the ways people take these offerings to their learners and the broader world (events, partners, a global community).

These are increasingly more interconnected and aligned than ever before. That is really exciting.

Towards More Contributors

The Mozilla Foundation’s collective goal this year is to collaborate with 10,000 contributors. A big portion of these contributors will engage with Mozilla through Webmaker.

A Webmaker contributor is anyone actively teaching, making or organizing around web literacy. What we did the last week was get clearer on what those actions are and how we might be able to count them.

MOAR Teach the Web

In addition to shaping the engagement ladder and metrics, our small group (aka the Teach the Web team) focused on three major deliverables:

  • i) teaching kits
  • ii) the Web Literacy Map
  • and iii) training.

Here’s a recap of what that means and what we shipped:

Teaching Kits

Teaching Kits are a modular collection of activities and resources about how to teach a web literacy competency or competencies.

The kits incorporate activities and resources that live on webmaker.org, as well as external resources that are tagged with the Web Literacy Map. Mentors learn how to use and make these kits in our training. Kits are also co-designed online and at live events with partners and community members.

What we shipped:

  • With a new UX and simplified taxonomy, users will soon find it easier to i) rip and read, 2) remix and 3) create new kits that align with the Web Literacy Map. The kits have always been modular (that’s their genius), but it’s been hard to use and remix them in practice. An improved layout and a simplified taxonomy means that users better understand the structure and modularity of these offerings. There are also lots of important features to make it easier to edit, such as writing in Markdown.
  • Thanks to Webmaker’s insightful localization team, David Humphrey and Aali, we’ll better prepare the kits for localization using Transifex, a powerful tool already helping Webmaker be translated into 50+ languages.
  • Furthermore, we realized that teaching kits are best created in a co-design process. We made an example agenda for how to run an in-person co-design sprint with partners and community members, as well as how to user test the results afterward. We want to roadtest the co-design process with a few partners over the coming weeks.

Year goal:

Hundreds of new teaching kits. Tens of exemplary kits.

Web Literacy Map

The Web Literacy Map is a flexible specification of the skills and competencies that Mozilla and our community of stakeholders believe are important to pay attention to when getting better at reading, writing and participating on the web.

The map guides mentors to find teaching kits and activities for the skills they care about. It provides a structured way to approach web literacy while also encouraging customization and expansion to fit the mentors’ and learners’ interests.

What we shipped:

  • A bookmarklet that makes it easy for users to tag any resource on the web–such as a Webmaker “make” or lesson plans on an external URL–with the Web Literacy Map.
  • These tagged resources will soon be discoverable and searchable on webmaker.org, as Web Literacy becomes the heart of the site’s UX. It will make it easier for users to find and use these resources, as well as create new kits that put the resources in context. Down the line, there will also be badges that align with the map.
  • Furthermore, we’re drafting a whitepaper about the Web Literacy Map and how it’s part of Mozilla’s overall webmaking efforts and the general web literacy landscape.

Year end goal:

Thousands of tagged resources. An oft-cited whitepaper and influence in web literacy discourse.

Training

Training for Webmaker is a modular offering that mixes online and offline learning to teach mentors 1) our pedagogy and webmaking 2) how to use, remix and create new teaching kits and 3) how to align resources with the Web Literacy Map.

The trainings include additional “engagement” sections about how to run events, conduct local user-testing and even for mentors to lead a training themselves. Mentors will move seamlessly between the training content and webmaker.org, as key assignments include using and making things on Webmaker.

What we shipped:

  • A course syllabus that merges the best-of content from our previous trainings while becoming more modular and interlinked to Webmaker.
  • A brief for a staging platform that runs on Github pages to be ready for an “alpha” online training in March. Importantly, this platform should give users the ability to copy an existing training, remix it and run it for their own community. Also, we will link Webmaker logins and design to the site, so that training feels like a natural extension of webmaker.org.
  • After a massive kickoff training in May, Maker Party will be ablaze with community-led trainings and targeted in-person ones around the world. We developed a timeline and event-driven model that shows an arc from our initial training to growing a circle of Super Mentors who can facilitate their own trainings as well as partnership pathways to run bespoke trainings for certain groups.

Year end goal:

Thousands of Webmaker mentors.

Thanks!

All of these incredible outcomes were shaped and shipped by the stellar the Teach the Web team: Laura, Kat, Doug, and William. A big thank you! So wow.

Also, thanks so much to the people who joined our sessions and made this work come to life: Karen, Robert, Julia, Chris L., Paula, Atul, Cassie, Kate, and Gavin. We’re hugely indebted to your help and contributions!

We’d also love to hear your thoughts about the above ideas and how you’re interested to plug in. Leave a comment here or post to our mailing list.

Webmaker Community in 2014

Here’s a post looking at the principles of the Mozilla Webmaker community and the top-level ways we collectively further these efforts in 2014.

Lots of people are shaping this work, and by next year hopefully many more will have joined in and help Mozilla’s mission spread and scale even more.

Below is a draft of what Chris Lawrence and I nicknamed the “meta-narrative”. It’s an attempt to describe what we’ll be up to in 2014 and why. Thoughts and hacks very welcome!

Our Principles

We believe that empowering human collaboration across open platforms is essential to individual growth and our collective future.

The Webmaker Community team is committed to Mozilla’s mission to build an Internet that is:

  • Knowable: it’s transparent–we can see it and understand it
  • Interoperable: it presents opportunity to play and innovate
  • Ours: it’s open to everyone and we define it

We will be guided by the Connected Learning principles that advocate for learning that is:

  • Production centered: it results in deeper learning through making
  • Openly networked: it is linked and supported across school, home and community
  • Shared purpose: it harnesses the power of the web to foster collaboration around common interests

Weaving together these principles, we aim to:

  • Shape environments around creativity, innovation and collaboration
  • Build products, programs and practices that help more people learn through making
  • Empower communities to participate and iterate on this work
  • Teach and learn in ways that are open and give people agency over their own lives

Why Web Literacy

Our experiences, whether digital or analog, are informed by the web. It has become integral to how we see the world and interact with one another. Whether unconsciously or overtly, the web is making us, and we are making it.

Teaching and learning is not immune to this shift; often, people are fearful rather than empowered. How do we improve how people learn with, about and because of the web?

We believe it is essential to become web literate. This means growing our understanding of the:

  • culture of the web
  • mechanics of the web
  • citizenship of the web

Importantly, web literacy is a holistic worldview. It goes beyond simply “learning to code”.

Instead, web literacy acknowledges the blurring between online and offline, and it uses the web to interplay with the world in complex ways.

The Story So far

To address this, we are convening individuals and organizations through networked practice to lead a movement to know more, do more and do better.

In January 2013, we launched our first iteration. The Webmaker Community began testing strategies and programs to catalyze a global web literacy movement with local roots.

We teamed up existing initiatives, like the Hive Learning Network and the Summer Code Party, as well as piloted new offerings, like the Teach the Web MOOC and a map for web literacy.

Now, one year later, these programs continue to spread and scale.

The Webmaker Community

Our community members seek to:

  • level up their web literacy
  • build and share tools for teaching
  • gain peers and networks of practice
  • participate in coordinated actions
  • identify with a movement that’s globally leveraged and locally contextualized

Below is a graph of our “lead users”. These are the types of community members who are most invested in the project. The graph is merely illustrative, not exhaustive. Its purpose is to sample the motivations of our community members and visualize how those compare to one another.

Our Team

In return, we offer our community:

  • An open network of networks. Connect to people and organizations seeking to collaborate and innovate.
  • Webmaker.org. A holistic and impactful product offering focused on Web Literacy. We will constantly iterate on this offering to surface curricula, tools, badges and user channels that allow our users to become producers of the web. With this product, we will create a differentiated “Web Literacy” space that is parallel to the “learn to code” movement. (webmaker.org)
  • Web Literacy. Thought leadership around the skills and competencies of being web literate. (Web Literacy Map)
  • Professional development. Improve skills and methods to teach in the open. (Teach the Web)
  • Campaigns. Coordinated action that spreads and scales our making-as-learning practices. (Maker Party)
  • A contextualized identity. Brands that are globally leveraged and locally adaptable. (Hive Learning Network)

With a more detailed roadmap coming soon.

Here is an overview of the staff supporting and building these offerings:

2014 Events

In 2014, we will facilitate:

  • #teachtheweb trainings: January – ongoing, select locations and online
  • Hive Summit: February, location tbd
  • Webmaker Community Team Work Week: end of the first quarter (tentative), location tbd
  • Maker Party: June – September, global
  • Mozfest: late October, London

And loads more events in the making.

While this is just a start to our year planning, we really welcome your feedback on the principles and top-level projects. And if you’re interested, do drop a line and get involved!

Reflections on Maker Party

On September 15 we hit a milestone for the Mozilla Maker Party. With over 1,700 events in 330 cities worldwide, the campaign to make and teach the web had really picked up steam.

As we transition from campaign-mode to an ongoing webmaker party, I thought I’d take a moment to reflect on what’s working, the people who are stepping up to teach the web, and what could be next.

What’s Working

Webmaker: The Tool Suite

If you compare the current Webmaker tool suite with what it was like earlier this year–or more radically, what it was like during last year’s Summer Code Party campaignyou’ll be amazed to see how much more interesting and robust the site has become.

The site now has 1 million users, 28K of them registered. 50K things were made since the new site came online. The Webmaker team pushed changes to the site over 400 times, and excitingly, loads of important features were shipped thanks to input from community members using the tools:

  • Localization
  • Javascript in Thimble
  • Improved tutorials
  • Collaboration tools using Together.js
  • and tons of UX fixes to make the experience even better.

In short, the Webmaker team is rocking it.

Hackable Teaching Kits

Here’s another fantastic outcome from the Maker Party: we shipped hackable teaching kits.

A modular curriculum has long been the dream of Laura Hilliger and the mentor team, and with some user-testing and design love, we now have great templates and first wave of adopters using the kits.

These kits will continue to grow and improve, and become especially powerful as they align with the web literacy standard and get mashed up with curriculum from other networks and mentors.

Making as Learning

Since kicking off the year, we’ve been digging into a “making as learning” philosophy:

“Having fun, being creative and collaborating socially is, in the long-game, stickier for learners then replicating “drill and kill” lessons online.”

— Chris Lawrence, Sr. Director of Webmaker Mentor team

We wanted to bake learning into making. This means putting enjoyment, creativity and social connectivity to the forefront of learning about the web. By focusing on interest-driven projects and hands-on maker activities, learners would have more fun and be more likely to stick with it.

And importantly, the same approach works at the mentor level. If people who teach the web have a make-first teaching experience, one that’s driven by collaboration with peers around their own passions, it will be more fun and meaningful for them to keep teaching.

Teach the Web v2: Train the Trainers

As mentioned in the recap about Reps + Webmaker, the train-the-trainer event we ran first in Athens and then online as a MOOC called Teach the Web, have been big engines of Maker Party’s success.

We’re seeing participants who completed these trainings go on to run train-the-trainer programs of their own, from Bangalore to Kampala to Surabaya, Paris and more.

In the coming months, there’s huge potential to mash up the in-person training and online MOOC into a blended learning Teach the Web experience. Together with Laura Hilliger and the mentor team, I’m really looking forward to testing and improving our train-the-trainers program and to rolling it out in new languages with new communities.

Who’s Stepping Up

To understand more who’s stepping and teaching the web, I really recommend reading Mark Surman’s post on “Who wants to teach the web?”.

In it, Mark features 11 kinds of mentors:

  • The curious. People who love the web/technology and are curious how to share this passion with friends and family.
  • Learner-turned-mentor. Someone who enjoyed learning to webmake that they’re lit up about teaching others how to do it.
  • Teacher. A person who’s already teaching and wants to integrate more digital making and web literacy into their lesson plans.
  • Youth IT clubs. Lots of great youth clubs are teaching code and also encouraging youth to become leaders and mentors, too.
  • Youth mentor activator. Passionate and young mentors themselves looking to activate their peers.
  • Partner in crime. Organizations and individuals who team up with mentors to offer skills, spaces, and other resources.
  • Kindred spirits, more broadly. Folks working in similar domains and with aligned values, like openness or making.
  • Super Mentors. An amazing segment of people who care about teaching the web, but also helping other mentors learn to teach.
  • Webmaker country lead. Dedicated Mozillians who think strategically and operationally about Webmaker in their country or region.
  • The elders. Long-time contributors to Mozilla who’ve been critical in bringing Webmaker activities to their region and encouraging their teams.
  • The posse. Community members who are interested in all kinds of things and are willing to help out.

This list is by no means exhaustive, but it’s very helpful in illustrating the range of mentors and their motivations. In the coming weeks, we’ll be working closely with these groups on developing a ladder of engagement, or perhaps more accurately, an ecosystem of engagement.

Next Steps: Mozilla Summit

This weekend, the Mozilla Summit will take place across three cities: Brussels, Toronto and Santa Clara. It’s a perfect moment to meet with Mozillians around the world and to reflect on how our mission is informing what we do today.

I’m especially honored to have helped curate the “Purpose and Strategy” track, heavily informed by Mitchell Baker’s Nature of Mozilla framework.

We developed sessions that look at:

  • The Web We Want
  • Building a Web Literate World
  • What does “Mozillian” mean?
  • Practicing Open
  • What would a million Mozillians do?

The facilitators and track owners put together great participatory sessions on these topics, and the Summit will be an amazing place to dig into what it means to be a Mozillian, how we can involve and empower more people, and excitingly, how teaching the web is central to what we do.

Mozilla Festival

Just a few weeks after the Summit, we’re hosting the Mozilla Festival, Mozilla’s largest public-facing event. 1500 makers and mentors will meet in London for 2.5 days of hacking and teaching the web.

There are 9 themes which explore how to teach and make the web from various perspectives. We’re looking at science, games, journalism, physical objects, mobile, privacy and much more.

More than any Mozfest before, I’m really excited and proud of our Space Wranglers, who curate each track. The federated program committee means that we’re diversifying the curation and expertise of the event.

In particular, the Build and Teach the Web track will examine the above initiatives (Maker Party, the Webmaker tool suite, the trainings, the MOOC, etc.) and together with veteran community members and new contributors, it will synthesize, test and improve the Webmaker program for the coming year.

There’s a lot going on, but a whole lot of it is promising and very fun. Check out some epic photos from Maker Parties around the world:

If you’re curious to plug in, say hi to @webmaker on Twitter or subscribe to our mailing list. You can also just start making and teaching the web right now on webmaker.org. Tell us what you think!

ReMo Camp 2013: Recap for Webmakers

I had the privilege of participating in the annual ReMo Camp, a gathering of the ReMo Council members and Mentors, to discuss and plan the Reps program for the coming year.

Of course, no Mozilla event is complete without a singalong and dance-off, plus memorbale photo-ops made possible by our high-visibility construction vests. (A cheeky way of “increasing Reps’ visibility”).

From the two-day meeting, I learned a lot and enjoyed contributing in all sorts of sessions. I find the Reps program an inspiring example of a mixo-cratic community (a mix between democracy, i.e. the Council, and meritocracy, i.e. the mentors).

Reps is certainly one of the groups most actively furthering Mozilla’s mission in creative, resourceful and passionate ways.

The mission of Reps

At events like these, it’s clarifying to revisit shared goals. We had a great session reviewing the Reps’ mission. In it, we discussed how Reps should target two essential actions:

  • 1) support Mozillians to contribute more and better
  • 2) recruit new Mozillians

This is a succinct way to describe the Reps program. Currently, the Reps’ mission doesn’t lay out these goals so clearly, so our working group is looking forward to proposing these changes to the Council and vetting an update of the mission copy.

If the revisions goes through, it can inform a better way to set up metrics.

Right now, the program heavily measures activities like event organization. But perhaps more nuanced metrics, focusing more explicitly on supporting and recruiting Mozillians, could be developed.

Reps as Community Builders

The above mission ties back to another key message of the camp: Reps are community builders.

Not only did we get cool high-visibility construction vests to prove it, but a thread throughout the event was how Reps can enable and empower Mozilla communities better.

This is an exciting development in light of the Mozilla-wide Community Building team that’s gaining support and effectiveness as we share best practices and look to improve engagement across the project. Reps have certainly been at the heart of a lot of these pilots, in leadership roles and advisers.

Webmaker + Reps is working

A little over a year ago, we began a conversation to bring two programs, Webmaker and Reps, closer together. This originated from a remarkable level of activity and leadership from Reps in the Webmaker initiative.

Now, with months more of experience, I’ve noticed the following:

  • The partnership is working. More and more Reps care about and engage in Webmaker. More and more of Webmaker is developing in response to the activities and input from Reps. In the ReMo Camp alone, over half the Reps said that Webmaker was an initiative they are involved with the most.
  • Webmaker is a great starter activity for Reps. From newbies to seasoned Reps, the flexibility and hands-on nature of Webmaker is a great way to contribute right away, following one’s own interests and capacity. To get started, Webmaker doesn’t require any budgets, any major event planning, or even any technical expertise. All that’s needed is a desire to empower others to make the web. Which can be as simple as opening a laptop with a friend or family member and inviting them to remix a website using the X-Ray Goggles.
  • Reps are excellent allies in global engagement around Webmaking. With an impressive geographic spread, deep connections to local communities, and the dedication to seeing engagement on the ground at home, Reps have been and will be one of Webmaker’s greatest collaborators in fostering web literacy around the globe.
  • Reps bring diversity, originality and resourcefulness to the Webmaker program. From the above-mentioned geographic and linguistic diversity, to the creativity to experiment with webmaking in all sorts of ways (in indigenous languages, in orphanages and shops, with nannies and the elderly and bakers), Reps are demonstrating how webmaking can happen anywhere.
  • And perhaps most importantly, Webmaker is seeing an emerging leadership circle with prominent participation from Reps. A large number of our “Super Mentors”, aka the people who mentor Webmaker Mentors, are Reps. There are interesting parallels with Reps’ own mentoring structure. And there’s an opportunity to collaborate even more closely at the Super Mentor level to design, test and forge new plans for Reps + Webmaker.

Priorities for Reps + Webmaker

Which brings me to a quick recap from the Webmaker session at ReMo Camp. We split into two groups: a hands-on Webmaking workshop led by Emma Irwin and a roadmapping discussion led by Henrik Mitsch.

In the roadmap room, we established the following top three priorities for Reps + Webmaker:

  • Training. The Training Days we ran in Athens and the Teach the Web MOOC were successful. Let’s mash-up these two parts (offline and online training) into a blended learning program for Reps. Reps can co-create it, test it, participate in it, and run it for their communities. We should also run a Webmaker training at the Mozilla Summit.
  • Localization. With sophisticated localization shipping soon for webmaker.org, there’s a big opportunitiy to partner Webmaker + Reps to localize tools (linguistically and culturally). We can make plans and do initial translations at the Mozilla Summit.
  • Budget. This is more of a pain point than an opportunity, but currently there’s a lot of bugs for Reps requesting budget for Webmaker events. Some of this can be solved with better documentation, and we should also figure out how funding works for special events, like the Maker Party.

Hands-On Webmaking

Next door, Emma was running the hands-on webmaking. She introduced the three Webmaker tools and invited Reps to start remixing and making what interests them.

This was a very successful activity, as it introduced the tools to people who hadn’t seen them before, as well as highlighted new features for veterans, and at an even more meta-level, demonstrated how one can teach Webmaker.

Check out these fun makes:

Opportunities with the Firefox Student Ambassadors

Another opportunity is with Firefox Student Ambassadors. Led by Kate Naszradi, the newly relaunched program has over 3,000 sign-ups, the majority of which come from India, Indonesia, the Philippines and other places where there’s also very active Webmaker communities.

In particular, we should explore how the Firefox Student Ambassadors can use customized teaching kits and other hackable scripts to run Webmaker activities in their universities. For example, we could make a “Get to know Firefox” Thimble template that can be remixed locally.

This demographic is perfect for hosting small events, and with an ever-growing community base keen for fun things to do. A Webmaker + FSA collaboration has lots of promise!

The Mozilla Summit, Mozilla Festival and Beyond

We have two big events coming up in October. I think we should use the Mozilla Summit and the Mozilla Festival to further explore the above topics, and more importantly, hack on outcomes together (such as the next-generation training materials, localization, FSA partners and more).

We should also share our experience with Teach the Web and Maker Party, so that we can improve upon it and invite more people to get involved in the next iteration.

It’s clear from Remo Camp that Reps are stepping up in every way as community builders and Webmakers. There’s a huge opportunity for Reps to lead sessions and shape the Webmaker program in very meaningful ways.

Can’t wait to see what we accomplish in the coming months.

Photos thanks to Brian King and Gen Kai

Dragon Slaying and On Scroll Layouts

Continuing the webmaking fun, over the last few days I’ve:

The Javascript expeditions are also fun. Including:

Thanks again to Codrops, I got to try my first “on scroll” effect layout. Still could use some polish, but happy at the attempt. See full screen.

Mozilla Festival 2013: Submit your session!

This is my fourth year organizing and curating the Mozilla Festival. Each year we hope to improve the experience, bring in more engaged participants, and serve epic coffee. Check out the announcement below and join us this year in London!

Come to the Mozilla Festival

The Mozilla Festival is the birthplace of many of Mozilla’s best and most innovative ideas. Join us for three-days of productive skill-sharing with a global braintrust of passionate thinkers and inventors.

The fourth Mozilla Festival will take place from October 25-27 at Ravensbourne, a wired media and design campus located in East London.

What is Mozfest like?

Picture hundreds of passionate people—journalists, coders, filmmakers, designers, educators, gamers from all over the world—immersed in interactive sessions designed to foster collaboration and participation.

We’ll all learn together through hands-on sessions and interactive workshops, and we’ll have dedicated time to hack the ideas that emerge when hundreds of bright minds gather together in one space.

Mozfest Themes

This year’s focus is on the mentors, catalysts and change makers who care about the using the web to make a difference in their respective fields and communities.

Individual sessions are organized under the following themes:

  • Build Webmaker Together: The web is wild. Co-design its future with hackable projects, new memes and creativity remixed with digital tools.
  • Connect Your City: Champion digital making and bring together local communities.
  • Look Who’s Watching: Learn how to control who gets your data. Help others protect their privacy and develop long-term solutions to tracking.
  • Make the Web Physical: Take sensors, actuators and more to meld the virtual with the actual and make the web work your way.
  • Open Games: Ready, Set, Go! Join a community of game makers who use the web as a platform to build open games.
  • Science and the Web: Transform how we use the web–a scientist’s invention–to explore, experiment and build on each other’s research.
  • Skills and Badges: Challenge conventional skillsharing. Recognize and verify learning in new ways to increase opportunities and make the most of the web.
  • Source Code for Journalism: Hack the news. Learn, teach, and make journalism that’s native to the open web.
  • Teach the Web: Let’s teach the world the web. Discover how to inspire learners and spread digital literacy with hands-on making.
  • Webmaking for Mobile: Become a maker in the booming world of the mobile web.

Propose a Session

You can propose your own session from now until August 31.

Come with a great concept you want to make real, and we’ll connect you with a community of fiercely unconventional technologists and creators eager to share their skills and knowledge to spotlight your work and to nurture your ideas.

Register!

Last year’s festival sold out so register as soon as you can to reserve a space.

Mozfest is a chance to hone your skills and amplify your voice around our common mission: ensuring the web is an innovation open to all.

Who’s coming?

Here are some of the organizations we expect to join us:

TinkerCad, Kickstarter, DIY.org, Goldsmiths, Chicago Tribune, CERN, Scratch, NPR, Codebender, Decoded, DigitalMe, MakeyMakey, Meemoo, Makie Lab, Mindcandy, Internet Archive, Electronic Frontier Foundation, Zeega, Craftyy, Eyebeam, LibreGraphic Magazine, The Web Foundation, National Writing Project, Sourcefabric, Al Jazeera, The Guardian, BBC, ProPublica, La Nacion, Knight Foundation, Blender, SoundCloud, Ushahidi, Open Knowledge Foundation, New York Times, Internews, Creative Commons, P2PU, Shuttleworth Foundation, Hacks/Hackers, Global Voices, MacArthur Foundation, Institute of Play, WYNC Radio, Tribeca Film Institute, Intel Labs, MIT Media Lab, MIT Center for Civic Media, Young Rewired State, Tate Collective, London Zoo, Web FWD, and more.

Did we mention you should register? ^_^

Animating an SVG image with CSS

This is a pretty amazing technique that I learned about thanks again to Codrops. You can take any SVG image file and use CSS to design and animate those graphical elements.

It’s a smart way to make an interactive infographic.

I remixed the Codrops tutorial and made the page below, using the Web Literacy Standard graphic as a basis. It triggers an animation when the page loads, and when you hover over the title elements, they also have some transitions.

Web Literacy Standard

The trick is grouping and naming the objects in your SVG editor (I used Inkscape) and then editing those objects in your CSS.

These sites where also helpful in making this:

  • Defining CSS selectors: for explaining the how to select elements in CSS.
  • CSS Animations: for clear examples of using CSS animations and most interestingly, how you could hover over one element to trigger an animation for another element. I’d like to try that next!
  • Animate.css: a simple generator for fun CSS Animations. I used “bounceInDown”.

Slider with CSS animations

Thanks to another Codrop tutorial, I learned how to make a slider using CSS animations and jQuery (still not sure what the difference is between that and Javascript). The size of the images isn’t quite right — parts of the birds are getting cut out of the circles. But all in all, think it’s pretty neat.

Again, best viewed in full screen.

Colorful Birds with CSS Animations and jQuery

Circle Hover Effects with CSS Transitions

Thanks to a friendly tutorial by Codrops, I put together this example of CSS transitions. The buttons link to somewhat random McSweeney’s articles. In the process, I also stumbled upon the site, Vintage Printable, which has beautiful naturalist illustrations in the public domain.

Blast Off!

I’ve been playing with Javascript thanks to Codecademy (at the moment, working on if/else statements and for loops). And now CSS3 transitions have caught my eye. Surfing around, there are a lot of beautiful designs I’d like to learn how to do.

Some examples:

There’s also this clock, which is animated just by CSS transitions and rotations. The author also does a great job of explaining how to make it.

With that inspiration, plus a cool-looking site called Mulenog, I thought I’d mash up the clock and the moonscape into a space countdown.

After spending way more time than I’d like to admit, I hacked something together in jsbin. In the process of adapting the CSS clock, I found this helpful countdown code on Github to replace the analogue clock. I also obviously took a lot of elements from the pretty Mulenog to understand how they work.

So, here’s the space mashup! It’s not completely laid out properly for smaller screens, but maybe that’s next. See full screen. :-)