MozFest 2012: Mark Surman on Where Next to Webmaker

Story of Webmaker

4 years ago, where Mozilla has always been clear about its mission. Guard the open nature of the internet. Firefox, for example, was not a browser but a standards play (vs. IE).  The approach was to make a product that people would love to embed a set of value to bring the web platform back.

Can’t just win one thing. What is beyond Firefox? Started a product oriented lab. It came to the idea of FirefoxOS. It’s doing what Firefox did for browsers with mobile. Drumbeat was also set for the more social side in terms of engagement, which came to webmaker.

A platform is not enough to make that writeable web. Need to teach people how to write. Based webmaker on three theories:

  • Best way to get writing is to teach people.
  • Learning is social. Connecting people.
  • Tap into the internet culture.

First part was to build the tools: Thimble, Popcorn Maker. Second part was Summer Code Party which asked people to get together to make and learn (the social side). 650 events in 80+ countries with almost no planning.

What we learned:

  • projects based on popular themes are popular e.g. Thimble lolcat editor (vs. edgecase animals)
  • people have a lot of content online e.g. Popcorn Presidential Attack Ad – by signing in Facebook; Concert video using music and their own pictures
  • Self-identify as educators: Those who want to teach are the first ones to get it. Need to build an army to make a permanent Summer Code Party everywhere.

Existing Popular Ideas to Turn into Starter Projects

  • collaborative scrapbooking
  • viral dubbing
  • wish list from social network putting back out
  • school year book
  • school projects – templates
  • infographics
  • e-cards

Building a Permanent Summer Code Party

  • network on how to build summer code party
  • have more regular ones
  • mentors, ambassadors
  • badges as connectors
  • how to do it without access to web
  • localization

I’ve heard there’s an etherpad with further notes, but no idea what the link is…

MozFest 2012: Opening Circle Day 2

Mark Surman

The theme is creating a writeable society. Need a web that allows us to write, not just read.

MozFest is about inventing that future.

This is a place where we can do it.

Popcorn

Brett Gaylor

Announce the release of Popcorn Maker 1.0 with a screencast.

Wanted to work with people to who co-create the media of the future. At MozFest 2011, PopcornJS 1.0. One release a month to make Popcorn Maker.

Let’s Get Making.

Back to Mark

It’s making an open source cinema.

A whole world of social media that can hack. The next one is to make games that can be hacked. Check out Hackable Games, such as HTML5 2D Hackable Games.

Ukie

Games are awesome

It’s a huge multi million dollar business. It’s a massively growing business. Most people think about console games, which is a strong part, but the games industry is shifting. It’s becoming more accessible, because technology is changing to make it easier to make games.

Games are powerful in learning, provoking people into action, fun. Can teach about failure, collaboration, hard work, anything and everything.

The whole industry is very young, but built on people who could tinker with code. However, we’ve moved away (for the most part) from encouraging people to create with the building blocks, to solve problems. Some good examples are Scratch and Ouya (hackable console).

We must learn not just how to use programs but how to make them… Program or be programmed.

Get excited and make things.

Back to Mark Surman

At the core of Mozilla’s is to focus on learning. Understandability needs to be integrated so that programming becomes something that everyone can do. Popcorn is a start, and games is the next step.

It’s not sure about shipping a cool product, but also an attitude. Need to bring playfulness, which is what games do.

Joi Ito

Interest-driven learner who found a community through the Internet, but did not have teachers. The tools are now available so that anything can make things.

What we’re doing is very disruptive, because everything we do is political and what we do is scary. We empower others, and it’s great to be fun, but there are people trying to shut us down. We win by creating a movement.

We have to fight to keep the internet open.

Back to Mark

The one punk rock kid in Northern Ontario. What punk rock gave Mark was to make media. Made media with magazines, scissors, and glue.

It’s an attitude that injects fun and builds that movement we need and are. We should build that attitude into everything we make and offer.

That attitude is what is going to bring people in.

F*ck it. Ship It.

MozFest 2012: How to Work Open

by Matt Thompson (absent), so actually Gunner

Processes & Tools

The process and tools, and how things are done should be open. Etherpad – like a google doc. Collaborative, and in Mozilla, tied to conference calls.

Give guidelines, not direction.

Open Philosophy

Some are a little open, but to be truly open, everything is open not just the nice looking bits. For example, the Firefox mailing list is open. The discussion on Chrome “kicking their butts” was a public discussion.

Need to pro-actively report out, especially for offline conversations.

Community

If you’re going to work in the open, it’s about the community. Have to ready to share: ownership, control, everything.

How to contribute from day one. Make a wishlist (e.g. documentation, testing – never done). Ask for things to be added to the wishlist.

Have core community values.

Motivations

  • Pain
  • Passion
  • Fame
  • Fun

Having a Narrative

Naming the contributors, and having an ongoing story.

Give other voices a channel. Invite others into the narrative. e.g. put someone else’s story into your blog.

Governance Model

Still have to have governance though. Study other successful projects, e.g. wikipedia. Key is a benevolent dictatorship with radical openness.

Risk

Risk aversion and fear is failure before even beginning.

Study the licenses and pro-actively license your content. e.g. GPL, Mozilla

Disagreements

Leading with questions to ask one-on-one why they

E-mail and IRC suck.

Best practice is to move to audio/video if the e-mail and IRC is not working.

Setting frame for discussion. Turn it from “Do you want a vitamin?” to “Do you want the orange or purple vitamin?” Another example would be to share only benefits of two choices.

Open Corporations

Use open paradigm. For example, Twitter uses volunteers to localize, so even though it doesn’t use an open platform, it uses an open model.

But propriety, locked down systems are in the process of dying. There are companies that are open software corporations e.g. Firefox, Redhat. What really makes you special is customization, service, etc.

Start internally. It doesn’t need to be open externally. It can open within the organization first.

Learn from Others

Study the successful open companies and organizations.

Model

Model for success, status quo and failure as a win, because you have learned what not to do again.

Think ahead and think aloud.

MozFest 2012: Notes from Responsive Design Session

Techniques & Tips

  • flexible grids
  • media queries that aren’t pixel dependent
  • media queries to selectively adapt the page
  • responsive images (max-width: 100%, can hide small (767px)/medium(1296px)/large (1440px))
  • can use modernizr to detect if touch device
  • Foundation has flex classes for embeds to resize YouTube videos, etc.
  • For iframes, can use padding: % of ratio of iframe/embed
  • Responsive iframes by NPR will do it for you as well
  • Source code order (for screen readers especially)

Download Foundation (basic responsive, reset files) – uses 12 columns

Thoughts

Coding on the fly is great if the space is setup to be a hack session type thing, but the way the room was set was very much just presentation style. I just feel like I’m not really learning much when someone is coding in front of me. Demo is totally fine, but just watching them enter text seems like a bit of a waste of time.

I know mozfest is open for everyone, but somehow I expected it to be more advanced. I don’t think this covered anything I didn’t already know, and I wasn’t a huge fan of the fact that it was based on an existing package.

Definitely a great session to have for those who don’t know anything about responsive design though.

Setting up WordPress CMS for an Academic Library

A lot of people have setup WordPress, and obviously each organization needs to set it up a specific way to fit their needs. Nevertheless, learning how different libraries set up their CMS is something I have found useful in the past, so I thought it might be helpful for someone else if I shared the way I decided to set up WordPress at my work.

The Install

As we have more than one site, it was an obvious choice to use the MultiSite flavour of WordPress. We set it up to use the directory structure option since we would be under a subdomain already, we decided against having sub-subdomains.

We installed it on its own virtual server through our central IT. We discovered in the process, however, that by default, a lot of modules are disabled by IT, so we had to request a number of them to be installed. For the core, the only one was:

  • GD Support – required for creating the different image sizes (i.e. thumbnail, medium, large)

Various plugins uses PHP modules that are part of the standard PHP install, so may not point out the need for enabling them. For plugin requirements, I’ll note them in the plugins section.

Setting Up The Sites

Creating the sites were simply a click of a button of course, but a lot of settings had to be changed. While most of the defaults were fine, I did change a number of settings. In particular, one of the settings was only accessible (through the Dashboard) by manually entering into the address bar, options.php

image_default_link_type = ‘none’

For most of our sites, there is no advantage to linking to the attachment page or a full size version of the image. Additionally, the images that are uploaded are usually close to the size that is being used on the page. The one exception I made was for the Archives & Special Collections site.

We also do not allow users to set up their own sites, so staff have to contact a network administrator.

Making The Themes

The lengthiest part of the process was making the custom themes. I won’t actually go into details here, but will later post details on the creation of the library’s theme. I have already talked about the options I implemented in the post about Branding the Library Website.

I will note that we avoided making a ‘mobile’ theme by making the themes responsive. They’re not the prettiest, but at least they work.

I did have to make a standard template to use for our non-WordPress sites, including the ILS, Special Collections, and ColdFusion stuff.

Roles & Capabilities

All the sites use the default Roles & Capabilities, except for the main site. Using the Advanced Access Manager plugin, I changed the permissions so that:

  • Administrators: Due to the Carousel plugin, some staff were made administrators, but with restrictions at the user (rather than role) level to have similar permissions as editors.
  • Editors: have unfiltered html (using the Unfiltered MU plugin)
  • Authors: can also edit/publish pages and delete own pages, moderate comments to own posts
  • Contributors: can edit/publish pages (instead of posts) and delete own pages, and add/edit/delete own media

Pages that have JavaScript or custom CSS are also locked down so that only editors and administrators have access.

Migrating the Existing Sites

We migrated from static HTML sites and single install WordPress blogs (I don’t know why this wasn’t a MultiSite to begin with).

WordPress Sites

For WordPress sites, I used the standard export/import that you have to install, but is integrated into the core. The one problem is that in MS, if you import images, it will copy the images over with the metadata, but will not update the links in the posts themselves (see ticket #16404). To solve this problem, I used the Search and Replace plugin to change all the old links to the new ones in one go.

HTML Sites

We settled on using the HTML Import 2 plugin. It worked well, especially since it supports Dreamweaver templates, which were used with most of our pages. It didn’t catch all the links, so we had to update some of them manually, but using the Search & Replace plugin helped a great deal.

The other thing that took a bit of time was to replace thumbnail images with the WP version and delete the original thumbnails. My coworker also uploaded all the images with the thumbnail crop option on, so I used the AJAX Thumbnail Rebuild plugin to force WordPress to recreate all the thumbnails.

Updating the Site

As with any move, it’s a good opportunity to update the site. Unfortunately, we had too tight a timeline to update the content and organization of the site (except for some minor changes). As a result, the site looks more or less the same, but I updated and coordinated the updating of a lot of the code.

I consolidated the CSS files, updated the template to use HTML5 and meet WCAG2.0, and most time intensive of all, got rid of all layout tables (with some other staff helping).

Plugins

Here is the list of the plugins I ended up with including those to help with migration:

For reasons why I may have chosen some of these plugins, take a look at my other posts on WordPress plugins.

Oh The Time

So, the most time intensive part really is sifting through WordPress plugins and updating content.