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.

FSOSS 2012: Accessible Applications

Attending FSOSS (Free Software and Open Source Symposium) 2012 this morning. One session in particular caught my eye since I’ve been looking into how to make our web services more accessible, but just writing about making anything we might offer students more accessible. So here are my notes:

Accessibility: Importance, Challenges, Technology, and Implementation

Chad Pilkey & Justin Robinson

A lot of people (10-20% of population) have a functional disability. Not just an ethical issues, but also a legal one.

Software student is working on is using Adobe Flex 4 with its own Accessibility Framework using API.

Need to plan ahead of time and can make it much more user friendly.

HTML5 ARIA

  • accessible rich internet applications
  • allows for dynamic content compatible with screen readers
  • assist HTML5 with flex-like accessibility features
  • useful to those who need it; invisible to those who don’t

Limitations

  • flex: uncooperative components, potential obsolescence e.g label components will not be read (have to use built-in labels)
  • HTML5: not yet standardized, may remain that way for the next 2 years

Combined both in order to make up some of the limitations.

Need to test!

Considerations

  • metadata
  • hot keys or way to skip past chunks of content
  • ability to change colours & fonts
  • larger buttons (don’t require very high precision)
  • a/v: transcripts, captions, volume control

There are definitely more considerations, but they didn’t list them all.

I didn’t include many notes on importance, types of disabilities, and screenreaders, etc., so more general information since I’m familiar with much of it and have blogged about it (which I’ll repost shortly).