Friday, July 29, 2011

Making a delicious web soup

If you've ever walked in on a web development conversation, either in person or online, you probably picked up on the three major technologies: HTML, CSS, and JavaScript. The troubling thing is that you can't just become good at one or two. That would be too easy.

Instead, the web arose from a number of different sources. There are rules, but the rules came from mobs and teleconferences between clashing interests. You had the scientists who founded the web, the businesses looking for pretty layouts, the media and content makers, and the gamers. Whenever one group stopped innovating, programmers elsewhere would share new ideas and put them on their webpages, discriminating against companies that hadn't kept up the pace, in a form of protest.

So what started as HTML, a pretty basic way to write documents like this:

    <title>Welcome to my page!</title>
    <body>I wrote it in HTML</body>
    <button>Click Me!</button>

Got prettified by CSS, which looks useful to designers:


It then got animated and interactive through JavaScript, which appeals to programmers:

function clicked(source){
    var x = document.createElement("span");
    x.innerHTML = "you clicked this";

You might see all of these as equally barbaric ways to write, because you don't realize how difficult it is to make a simple program look nice and work on everyone's computer or phone, without the open web. Flash games, for example, still don't work on the iPhone or iPad.

It's actually very convenient that these parts are separate, because you want one consistent design across your web pages, which means one CSS file, and the interactions on a profile page are the same regardless of whose page you're looking at, which means one JS file. In large companies, the designers and programmers are working on separate files and don't tread on each other's feet.

Unfortunately, learners quickly find it can't always be this straightforward. The new technologies HTML 5 and CSS 3 are very tightly connected to how people write all three languages. And when you add an interactive map from ESRI or Google or Bing, the HTML and CSS of the page are so advanced and rapidly changing that you manipulate it through code, in JavaScript. It's kind of like how you start your car and run the AC by turning a little key and pressing buttons, instead of opening all the valves and crossing wires yourself.

Learning about this a few years ago was really useful for me, much more than Word document margins and PowerPoint animations. Every time I printed out a lengthy print report at school, designing a new building and leaving it all on paper, I wanted to make an interactive web page to display the project in a way you could browse and explore. I've been looking into projects like hackasaurus which open this up to kids and get them started on this type of programming. Hoping to help take it to Haiti soon =)

Collaboration in a News Network

This week's first two lectures in the MozNewsLab came from two experts whose talks we've been anticipating since they were announced: Shazna Nessa, Director of Interactive at the AP, and Mohamed Nanabhay, Head of Online at Al-Jazeera English. These are some influential roles in news technology, yet they are quite straightforward and open when talking about their experiences.

Al-Jazeera English newsroom

Neither organization fits the model of the typical American newsroom, where wire reports and the local beat are compiled for the local audience. The AP collects stories and sends out wires globally (though it's much more popular in the US and Europe than worldwide) and Al-Jazeera English has a deliberate non-Western perspective when covering topics such as voters who believe Obama is Muslim, revitalized Berber tribal culture in Libya, and America's continuing alliance with Bahrain's government.

For both speakers, their true strength was not in technical resources or abilities but in a strong network with skills in absorbing and explaining information. To produce quality graphics, such as the 3D Space Shuttle mentioned in the talk, I learned that the AP sends a graphics reporter to ask questions and make observations which print reporters would not detail.

Check out the interactive space shuttle!

Is this specialization due to the artistic needs of the interactive content, or the technical needs? I wouldn't want my #MozNewsLab project to require supplementary journalists. Considering the replies I am getting on my Popcorn.js course, video platforms are considered difficult and any code is out of the question. If the platform lets you create profiles and videos, and then automagically makes a Popcorn.js mash-up from that, it's much more accessible than showing someone how to fire the plugin events themselves. As a programmer, I think there's value to studying how something works before relying on it, but I can see why someone wants to swim on the surface before diving in over their head. Just be aware:

As for other collaboration tips that I picked up in the talk, I noticed that their relationship with social networks is different from what we pick up as viewers. Although they appreciate the rare gems and tips from social media, and broadcast them unedited to give an accurate and raw view beyond where their cameras can reach, the vast majority of information is to give them an idea of the audience's engagement and demand for new information. Compared to their own CMS, a social network can easily ban a user, such as Al-Jazeera English's experimental Google+ account.

There has been a recent trend toward openness - the AP has begun allowing hyperlinks in wire stories, and Al-Jazeera has gone as far as to share much of their video under a Creative Commons license, allowing major news networks and independent writers alike to use their footage. I fully support this and hope to use some of this video in my projects.

I think I will use Adafruit's Ask an Engineer Show & Tell to model the interview in FollowFrost. Also, I've started Tweeting on @mapmeld.

Tuesday, July 26, 2011

Open season on my open-source project

I posted earlier this month about the Knight-Mozilla News Learning Lab and guest speakers who have let us look inside the New York Times, the AP, and start-up Storify. I write most posts on my phone now, so it hasn't always been easy to follow. Sorry about that.

Today we wrote short project descriptions. Try this:

For online interviews, FollowFrost breaks the ice between viewers and the interviewee. Using Popcorn.js, you can read each speaker's profile, follow them on Twitter, and ask follow-ups. Video answers are broken down by question and added to the main video.

See the prototype

As this is a Mozilla project, everything will be open-sourced. You can help this baby project in two ways:

  • Were you interviewed at OLPC-SF? One of these interviews would make it easier to build this project and connect it back to OLPC. I'd like your permission to use the video.

  • Re-read the project description and be critical. For example, how is this different from IAMAs on Reddit? Why Twitter and not Why not use a color scheme from

Design of the week: Look at this guy's idea for redesigning the New York Times.

Sunday, July 24, 2011

Mozilla Design Stream of Consciousness

I made these in Paint. It's a first look at my journalism project, my process in creating and publishing the OpenMaps plugin for Popcorn.js, and what my design accomplishes. Click an image to see it full-size

Saturday, July 23, 2011

Of reporters, readers, and browsers

The MozNewsLab got technical this week, with speakers including Chris Heilmann of Mozilla, John Resig from jQuery and Khan Academy, and Jesse James Garrett, who works on user experience design and other projects at Adaptive Path. All were recorded and are available on the course website

I see responses in the class gravitating towards closing the experience gap between "hacks and hackers" by sharing code and markup with journalists. Learning the basics, like what HTML5 is and how it can help visualize news and engage audiences, is feasible. But not everyone wants to be a programmer. Hackers should be finding the way to create services which appeal to journalists, in the same way Twitter appealed to celebrities, so it became a tool for them and their fans. Recent news stories drove journalists to try Google+. So a new service set up by hacker types could pop up and gain ground fairly quickly.

I think this week helped introduce two of hackers' best-kept secrets, the openness of HTML and the ease of jQuery. I use Dojo, a jQuery competitor, at work (go ahead, point and stare) and like jQuery it speeds up development of both the interface and the more icky parts of coding JavaScript. On mobile, it allowed me to create this map

which looks just like the iPhone/iPad interface, and switches to an Android look on Droids, by placing a few choice snippets of code. I was surprised at first to see how John Resig considered help, support, and the learning curve early in development of jQuery, but the result has been fantastic community and documentation which other frameworks (Dojo included) lack. It also makes me glad to know he's working with Khan Academy. I feel like if I search for "___ in jQuery" I will get a step-by-step blog post with someone explaining exactly how to do that. Sometimes even just when I search "how to __"

The openness of HTML, demonstrated by examples from Chris's presentation and taught in MDC, isn't just a tool of web developers but a step toward webpages that just work, on everyone's browser, with accessibility for people with disabilies. The WHATWG (though not mentioned in the chat) deserves a lot of credit for completing HTML5. I'm working on projects with canvas, geolocation, history, and open video. These technologies are everywhere and people don't pick up on them because they're often transparent in their ease of use. The draggable, animated circles in Google+, every web video on the iPad, the locator on Google Maps... all use HTML5. Yet there's no one system that supports it all. So we use back-ups. It's simple.

How does this tie into my project? I'll post a project idea later this weekend. But essentially, I see no need to go beyond HTML and JavaScript in the user experience. The media features are supported on most browsers, and I need the direct interaction with the video and video frames in order to grant users and journalists alike equal power over their video experience.

Project idea posted

Sunday, July 17, 2011

What is Arduino?

Arduino is a decidedly lower-tech device that you have to wire up and program to do anything. But then you can do a lot! Here's what the latest Arduino Uno looks like

Thanks to a versatile and open source design, this little gadget has been on the rise for years. In the past few months, it reached some major milestones

1) Google chooses Arduino for Android robots and gadgets

Google took a major move and asked companies and hackers to build devices using the open Arduino to bridge the gap between phones and their workbench projects. The makers of Arduino responded with one board which makes it even easier. My phone needs a software update to use it, though.

2) Army accepts an Arduino project

A West Point camcorder hack solves a problem for troops in Afghanistan.

3) A sewable version needles in on getting electronics in the wild

I know nothing about sewing but maybe I ought to...

Bicycle trip computer

Musical touch

Also, RFID purse

4) DIY Drones has a new quadcopter that actually flies.

5) Not Arduino-powered yet, but...

I saw eKindling in the Philippines got Squishy Circuits working in their classroom. If you can have a sewable computer, maybe you can have a moldable one, too..?

All photos on Google Plus

Thursday, July 14, 2011

XO at the Mapmakers' Summit

One of the perks of being an ESRI intern is that I get to visit the ESRI UC, the world's largest digital mapping conference. I brought my XO-1.5 and showed off some mapping activities. It was quite the oddity and there were tons of questions. If anyone wants to add ESRI WMS / Community Maps to the activity you're just about guaranteed a spot in their research journal.

I co-presented a light topic (Tweets and photos and video mash-ups!) and we got some positive feedback from Twitter. I also met folks from the Army Corps of Engineers and World Wildlife Foundation who'd enjoyed our demo.

There was an international development session with talks by and USAID. There was a lot of information shared by Ushahidi, too, but surprisingly few questions for their presenter. This community is moving to accept crowdsourcing but it is a few years away from entering the business/donation model. Also there were many pictures of points on an OpenLayers/OpenStreetMap but few making use of their own map additions, advanced GIS mapping, or ESRI's tools. I ought to promote my ESRI/Ushahidi work some more.

Finally, I went to the Africa Special Interest Group. ESRI's head of education is proposing a major new plan to bring mapping to 100 African universities, with licenses for "one-to-one" use of the program by students. No specifics about countries, but West Africa and Kenya were on the list.  Shades of OLPCorps? OpenStreetMap and ESRI's alternate program were both featured. I would like to pursue this further, especially since one of my projects can be repurposed to help us support the many alphabets used in West Africa.

Wednesday, July 13, 2011

Designing the Web Way

This week the #MozNewsLab launched with two guest speakers. Their topics and discussions were quite different, but the major takeaway for me was to rethink design. Design is a major weakness for my personal projects (code first, aesthetics later, if ever) so I focused on the design processes shared by Mozilla's Aza Razkin and Storify's Burt Herman.

The first surprise for me was that both of their designs began with a radical new interface, then iterated toward more reliable and user-friendly interfaces. I was used to hearing an opposite strategy of using designs that are familiar first, than iterating to bring in your new ideas. That's the general idea behind the UI in a community mapping project I worked on, There are some advanced features but they're neither essential to using the site nor highly visible. I'd like to have a chance to make a brand new UI like the flying windows and tags from one of Aza's examples, a design that's completely different and makes no apologies about it.

In the case of Storify, it's clear to see why a new interface was important in a functional way. Their goal was to reach a new audience for whom the old interface, the typical pattern, wasn't working. They take the streaming Twitter widget, with its minimalist, faster-than-thought feed that web users have gotten familiar with, and lets journalists and regular folks curate it. When the Tweet below became national news, a great deal of people had no idea how to parse it as a conversation:

With additional design and context, a deeply-integrated Tweet, with RTs, @s, and #s, can appear in a news article without taking readers out of the story.

Storify's talk also touched on the strategy behind a startup, the most interesting point being comments about choosing a team of co-founders. Getting the right people is your classic bank heist movie -finding the people with the right skills, getting them to work together. It's a mistake to believe these people have to have the same mindset or background. A company with one person or idea determining all of the code, design, and user support is like a country with one person as judge, jury, and executioner. There's centralized control of the project but the result will be a brutal, totalitarian design.

I'm looking forward to Friday's class with a visual designer from the New York Times. Finally maps and charts, some familiar territory for me! I'll try not to mention their Bahrain map which I used in an example for a P2PU course.

Saturday, July 2, 2011

Joining Knight-Mozilla Learning Lab

This past week I was accepted into the Knight-Mozilla News Technology Partnership's Learning Lab, an initiative to demystify the internet for journalists and open news rooms to a few geeks from the open source community.

The Learning Lab part is an online class where we'll hear from experts, write, and put together projects.

When volunteering with One Laptop per Child, we often discuss difficulties teachers face in adapting to new technology. For journalists, there's the added threat that paper newspapers and investigative journalism have taken a serious hit from the expansion of the internet.  The more that people get their celeb headlines from Gawker, their breaking news from Twitter, and their Twitter updates from CNN, the fewer resources a journalist has to respond, research, and print.

We've got to counter that somehow. Actually, a few newspapers have responded brilliantly in the past few years and have a reputation for their great online coverage. I'll be writing about both sides of this story over the next couple of months.