Archive for September, 2010

File Under: Databases
Sep
22
2010

Open Data’s Access Problem, and How to Solve it

By

The recent Gov 2.0 summit in Washington D.C. saw several promising new announcements which will help government agencies share code and best practices for making public data available to developers.

The idea behind new projects like Challenge.gov, the FCC’s new developer tools and the Civic Commons is that by giving developers access to data previously stored in dusty filing cabinets, they can create tools to give ordinary citizens greater access to that data.

Unfortunately, not everything open data project leads to good things. It is critical that if open data is made available on the web, it must be accompanied by some effort to ensure everyone can access it.

We’ve seen an explosion in creative hacks that use this newly available data to provide excellent online resources. Public data sites like EveryBlock, or the Sunlight Foundation’s Design for America contest have highlighted some of the amazing ways open data can make our lives better. Whether it’s finding out crime stats, real estate values, health hazards and business license statuses in your neighborhood, or visualizing how the government is spending your tax dollars through innovative maps, open data and what you can do with it is the current hotness among web developers.

Most of the benefits are close to home — in the U.S., just about everyone has access to online government resources thanks to web-enabled computers in free public libraries.

But extend that argument to the rest of the world and the number of people that really have access to the data drops significantly. If you don’t have an easy way to get online, you can’t benefit from open data.

Michael Gurstein, Executive Director of the Center for Community Informatics Research, recently highlighted some of the problems with open data accessibility.

Gurstein points out a number of assumptions about open data that are often overlooked by those most enthusiastic about making such data publicly available.

Worse, he shows how such data can be used against you.

Continue Reading “Open Data’s Access Problem, and How to Solve it” »

Tags: , , , ,
File Under: JavaScript
Sep
22
2010

Zaphod Gives JavaScript Developers Two-Headed Power

By

What’s become so complicated you need two heads to figure it out? JavaScript of course.

Mozilla Labs recently launched a new project dubbed Zaphod, named for the two-headed President of the Galaxy in The Hitchhiker’s Guide to the Galaxy. Zaphod is a Firefox add-on that has two “heads” of its own.

Zaphod’s primary head, in this case, makes it simple to switch JavaScript rendering engines. Zaphod’s other “head” is the Narcissus JavaScript engine, which is a JavaScript engine written in JavaScript. Narcissus is great for experimenting with JavaScript, but it lacked an easy way to run your code within the browser, which is where Zaphod comes in.

The add-on lets you run the Narcissus engine instead of SpiderMonkey, Firefox’s default JavaScript engine. Just install Zaphod and put some “application/narcissus” script tags in your page, and Firefox will render your scripts using Narcissus.

You may be wondering why in the world anyone would want to run JavaScript code through a JavaScript Engine written in JavaScript (you may also be thinking that “the Escher” would have been an equally compelling name for the project). The answer is because you can change how the actual interpreter and compiler work. Sure you could re-write SpiderMonkey in your spare time, but that’s quite a task compared to modifying a few lines of JavaScript in Narcissus.

So, why modify the actual rendering engine? It could help the community reach decisions about what new features should be added JavaScript, what those features should look like and how they should behave. Or perhaps you’d just like to experiment with the JavaScript language itself, rather than what you can do with the language.

If you’d like to experiment with Narcissus, just add this meta tag to your HTML page:

<meta http-equiv="Content-Script-Type" content="application/narcissus" />

Then install the Zaphod add-on and reload your page. From there you’re just a few experiments away from revolutionizing the web. If you’d like to see a few of Mozilla’s experiments to get some idea of what you can do, head over the Narcissus page and take a look.

Don’t Panic photo by Jim Linwood/Flickr/CC

See Also:

Tags: , , ,
File Under: HTML5, Mobile
Sep
20
2010

Video: Watch Flash Hand HTML5 a Beating on Mobiles

By

We’re not trying to throw gasoline on the fire or anything, but here’s an interesting video of Flash and HTML5 duking it out on two different mobile devices.

Developer Chris Black shows us two versions of the same animation, one done in Canvas and JavaScript and one done in Flash. He first runs it on a brand new iPod Touch (HTML5) and then on an Android Nexus One (HTML5 and Flash). The framerate is much higher and steady on the Flash version — 57 frames per second versus 40fps in Canvas on the Nexus One and 22fps on the iPod.

A few huge caveats here: The animation is very simple, and is hardly on par with most web animations. Also, the JavaScript code is not optimized as much as it could be, which may be hurting the framerate numbers in the HTML5 portion of the test. Lastly, it’s only an experiment. The HTML5 test measures the rendering speed of the mobile browsers being used, so it can’t be taken as a true head-to-head Flash/HTML5 benchmark. Read the comments on Black’s post and you’ll see people reporting different results across different Android devices. To that point, he uses an iPod Touch, roughly the same as an iPhone and not as fast as an iPad (none of which can play Flash content).

So what’s the purpose, then? Black says he’s trying to take the temperature of the different choices to decide where it makes the most sense for him to focus his efforts as a developer. Here’s his rationale, in the comments of his post:

Continue Reading “Video: Watch Flash Hand HTML5 a Beating on Mobiles” »

Tags: , , , , ,
File Under: HTML5
Sep
20
2010

Test Your Markup Smarts With HTML5 Simplequiz

By

One of our favorite series of articles on HTML is developer Dan Cederholm’s Simplequiz series, which would give you a real-world chunk of content and then suggest several ways to mark it up. Readers were invited to chime in, picking the solution they believed to be the best and explaining why. At the end of each week, Cederholm would weigh in with his own ideas.

The series is still worth a read, though in some cases the HTML options Cederholm presents have been superseded by HTML5′s new semantic elements. HTML5′s new semantic tags aren’t without their own subtle complexities though — even something as seemingly simple as figuring out when to use <section> and when to use <article> is not as simple as it ought to be. (See Opera’s Bruce Lawson’s blog for a great overview of when to use section and when to use article.)

Given the potential confusion surrounding some of HTML5′s new elements and the general success of Cederholm’s Simplequiz series, the gurus over at HTML5Doctor have (with Cederholm’s blessing) invoked a new series: The HTML5 Simplequiz.

The first quiz in the series seems fairly simple: given a page of widgets for sale, what’s the best way to mark up the products? However, digging into the four choices reveals the often confusing, subtle differences between, <section>, <article>, <div> and (less so) <nav>.

If you’ve got opinions or want to see how other people would handle the markup, head on over to HTML5doctor, read through the comments and offer your own ideas.

For the record, I would use the <article> tag, since, despite having a bias toward blog and news sites, the actual definition of <article> — “a self-contained composition in a document, page, application, or site” — seems to fit the bill. [aside: possible <article> should have be named <item> to make it a bit less biased toward particular types of content.]

If you disagree, be sure to post your own ideas over at HTML5Doctor.

Math teacher photo by foundphotoslj/Flickr/CC

See Also:

Tags:
File Under: Browsers, CSS
Sep
20
2010

Firefox 4 to Drop Some CSS Vendor Prefixes

By

Woolly, the CSS sheep.

Mozilla is busy committing changes, fixing bugs and finalizing the release of Firefox 4 beta 7. Among the smaller, but important changes in the next release is a change to some of Firefox 4′s CSS support: developers no longer need to use the -moz prefix for border-radius or box-shadow.

We’ve covered the pros and cons of using vendor prefixes in your stylesheets before and generally consider them a good thing. Coding a stack of prefixes into your CSS is not ideal, but it’s better than the alternative of using inconsistent CSS hacks or having to sniff for user agents to serve up totally different styles to different browsers.

However, it’s always important to make sure you include the actual CSS rule as well as any prefixed version since eventually that’s all that will be supported. As CSS guru Eric Meyer writes, “as time goes on and implementations become consistent, browsers will drop the prefixes,” which is exactly what Mozilla is doing for Firefox 4 beta 7.

As we noted Thursday, Microsoft is dropping some vendor-specific prefixes in Internet Explorer 9, which will be released in several months.

Firefox 4 beta 7 is tentatively scheduled to arrive in the “second half of September,” with the final release coming around the end of 2010. If your stylesheets need updating, now is the time.

See Also:

Tags: ,
File Under: HTML5, JavaScript, Programming
Sep
17
2010

Behind the Scenes: Coding ‘The Wilderness Downtown’

By

The Wilderness DowntownGoogle’s recent collaboration with Arcade Fire, dubbed The Wilderness Downtown, yielded an in-depth interactive experience for the band’s single “We Used To Wait” that just might point to the future of the music videos. The experiment relied heavily on HTML5 and quite a bit of clever JavaScript to pull off one of the better interactive multimedia sites we’ve seen.

While the credits for the video list over a hundred names, many of the project’s interactive elements with were coded by Ricardo Cabello, better know as Mr.doob. Cabello, perhaps best known for his Flash-based experiments, has also been churning out HTML5/JavaScript projects for some time (see our coverage of earlier Chrome experiments), but the size and scope of the Arcade Fire project set it apart.

The Wilderness Downtown, features HTML5 native video and audio, Canvas-animated birds that fly away from your mouse clicks, interactive SVG fonts, and photo panoramas from Google Maps Street View. You enter in the address of where you grew up and it pulls the images for that neighborhood to personalize the video to match your own memories.

If you’re curious how The Wilderness Downtown works, Cabello has posted a behind the scenes look at his part of the Arcade Fire collaboration.

Cabello is no fan of JavaScript frameworks, so you probably won’t find these libraries popping up as JQuery plugins, but most of the code is available as standalone libraries hosted through GitHub. While neither offer any documentation, both three.js, a lightweight 3D engine and Harmony, a drawing library, were both use extensively.

The Wilderness Downtown was clearly a very large project and included numerous programmers, but if you’re looking to pull off something similar, or just want to play around with some of the tools used to create it, Cabello’s post provides enough of an overview to get you started.

See Also:

Tags: , , ,
File Under: Social
Sep
17
2010

Diaspora Unveils its Open Social Code

By

The developers behind Diaspora, the social network aiming to build an open source Facebook clone, and maybe steal some of the giant’s thunder, have released their first bit of actual code.

The goal behind the Diaspora project is to create a social network that puts users in charge of their own data. As the developers put it, Diaspora aims to be a “privacy-aware, personally controlled, do-it-all open source social network.” Diaspora made headlines earlier this year for raising some $200,000 from online contributors (including Facebook).

The initial code release is considered pre-alpha — in other words, a long way from its end goal — but it’s now available to development community. If you’re a Ruby on Rails expert and you’d like to try hacking away at the project, you can grab the code from GitHub. It’s been made available under the GPLv3 [Update: It's actually the AGPLv3].

At the moment, Diaspora is capable of sharing status messages and photos privately with your friends, finding friends around the web and controlling who see what with something Diaspora calls “Aspects.”

The roadmap to October’s alpha release includes adding Facebook integration, Data Portability support and internationalization. For more details on Diaspora’s goals and timetable, check out the detailed roadmap and wish list. You can also read more about this most recent launch at Epicenter, where Wired reporter Ryan Singel is on the Diaspora beat. If you’ve got strong opinions of what Diaspora needs or doesn’t need, be sure to jump on the mailing list and make yourself heard.

See Also:

Tags: , ,
File Under: Social, UI/UX, Web Apps
Sep
16
2010

Take a Tour of the New Twitter

By

Twitter launched a full redesign to its website Tuesday, showing off changes that lead Twitter.com away from its humble stream-of-updates past and towards a more interactive, app-like future.

The new Twitter went live to a select few users Tuesday afternoon and began rolling out to everyone else Wednesday. If you don’t see it yet, you will soon.

The website now has a new two-panel view. Your familiar stream of tweets runs down the left side. On the right side is a dashboard of sorts, where you can see recent activity from your followers and the people you follow, trending topics, and the list of people you might want to follow.

Continue Reading “Take a Tour of the New Twitter” »

Tags: ,
File Under: Browsers, CSS, HTML5, Web Standards
Sep
16
2010

A Guide to Internet Explorer 9′s HTML5/CSS 3 Support

By

If you’d like to know exactly where Internet Explorer 9 stands on support for emerging web standards in its current beta release form, Microsoft has put together a comprehensive list of all the supported HTML5 and CSS 3 features in IE9. The document notes that IE 9 is still a beta release, and the list is subject to change, but it makes a good list to help you get up to speed on IE 9′s new capabilities.

Internet Explorer 9 is a major leap forward for Microsoft in its promise to deliver solid web standards support. Although IE 9 still lags behind its competitors when it comes to supporting the latest HTML5 and CSS 3 code, it’s leaps and bounds beyond where IE 8 left off.

Perhaps the most interesting part of the list is that Microsoft has opted to skip the vender prefix in most of its CSS 3 support and simply use, for example, the border-radius rule. That means if you’ve been adding the straight CSS 3 rules in additions to the -webkit, -moz and -o prefixes, your fancy style sheets should already work in IE 9.

Among the good news for web developers in IE 9 is support for CSS 3′s border-radius property, opacity in images, CSS media queries and the new web fonts format, WOFF.

IE9′s WOFF support even has a nice showcase: a series of CSS font experiments dubbed Lost World’s Fairs. Using WOFF and Typekit, web designers Jason Santa Maria, Frank Chimero and Naz Hamid have put together some very impressive font demos to advertise World’s Fairs that never happened (we’re partial to the Atlantis World’s Fair).

The demos will work in any modern browser, including the new IE 9 beta.

While IE 9 isn’t a final release yet, things are definitely look up for web developers. Yes, we’ll still be supporting IE 7 and IE 8 for some time, and yes, IE9 still lacks a few things, like support for CSS 3 text-shadows or HTML5′s form elements, but it’s a step in the right direction.

See Also:

Tags: , ,
File Under: HTML5, Web Standards
Sep
15
2010

Microsoft Taps HTML5 to Add Zing to Bing

By

As part of the launch event to show off the new Internet Explorer 9 beta, Microsoft also demoed a new version of its Bing search engine that uses HTML5 and CSS 3 to spice up Bing’s homepage and search results.

During the demo, Bing developers showed off a version of the search engine that uses the HTML5′s video tag to take Bing’s well-known background images a step further, replacing the static image with a video of waves crashing on the beach. Another new feature, using the Canvas element, will allow you to zoom around a very large image.

The revamped version of Bing will launch in October. Microsoft is still tweaking some of the code, but its demo at the launch event was already complete enough to impress.

Other tricks up Bing’s sleeve include some fancy transitions between search types — nice sliding and fading transitions between tabs (presumably done using CSS 3 transitions) — and other visual touches, like animated backgrounds for weather forecasts and auto-expanding search results.

Continue Reading “Microsoft Taps HTML5 to Add Zing to Bing” »

Tags: , ,
« OLDER POSTS