Archive for November, 2010

File Under: Location, Web Apps, Web Services
Nov
30
2010

Mining Flickr to Build 3D Models of the World

By

Microsoft’s PhotoSynth tool is jaw-droppingly awesome. But, because it’s a Microsoft project, the technology is unlikely to appear on some of your favorite non-Microsoft online apps, like Google Maps or Flickr.

However, our friends at ReadWriteWeb stumbled across a very similar tool — at least in terms of the end result — developed by the University of North Carolina in conjunction with Swiss university, ETH-Zurich.

The team has developed a method for creating 3D models by pulling in millions of photographs from Flickr and using some fancy algorithms to generate 3D models of local landmarks. Perhaps even more impressive the results can be generated using a single computer in under a day.

Project lead Jan-Michael Frahm touts the project’s efficiency saying, “our technique would be the equivalent of processing a stack of photos as high as the 828-meter Dubai Towers, using a single PC, versus the next best technique, which is the equivalent of processing a stack of photos 42 meters tall — as high as the ceiling of Notre Dame — using 62 PCs. This efficiency is essential if one is to fully utilize the billions of user-provided images continuously being uploaded to the internet.”

While the results are cool and would make an impressive addition to any number of geo-based services, more serious use cases include helping disaster workers get a better idea of where they’re headed and the extent of damage.

So far the researchers have released a movies demonstrating the technique on landmarks in both Rome (get it? built in a day…) and Berlin, and the results are impressive. For more information on how the process works, check out the UNC website.

See Also:

Tags: , , , ,
File Under: HTML5, Web Standards
Nov
30
2010

Can WAI-ARIA Build a More Accessible Web?

By

Accessibility in web design has come a long way since the days of table-based layouts with single-pixel .gif spacers. But even current best practices are far from perfect.

Today, we’ll tell you a bit more about these accessibility troubles as they relate to dynamic web apps — fitting, as today is Blue Beanie Day. For four years now, design guru Jeffrey Zeldman has encouraged web authors to wear a blue beanie on November 30 to show their support for web standards. Also, you’re encouraged to take a picture of yourself wearing a blue beanie and upload it to a Flickr pool. So, with standards quite literally on the brain, we’ll tackle the topic of rich web apps.

One of the coolest things about web apps is that elements refresh inside the browser without reloading the page. But most screen readers used by those with disabilities can’t parse these changes, so users who rely on them will remain unaware of any dynamically refreshed elements on the page. That’s just one of the many problems that WAI-ARIA, an emerging specification for Accessible Rich Internet Applications from the W3C, is hoping to solve.

At its core, WAI-ARIA is a means of annotating page elements with the roles, properties, and states that define exactly what those elements do. Take a navigation element as a simple example. In HTML5 we might do something like this:

<nav>
    <ul>
        <li>Home
        <li><a href="/about/">About</a></li>
        ...etc...
    </ul>
</nav>

While it might seem that the nav tag would defining the nav element’s “role,” not every browser will understand it (just because the browser can display it, does not mean it understands the tag). Also, the purpose of a navigation element may be obvious to most users, but to a screen reader being used by somebody who can’t see, the navigation strip could be just a jumble of words. Leveraging WAI-ARIA’s syntax, we can double up to ensure screen readers will know that this chunk of code is navigation:

<nav role="navigation">
    <ul>
        <li>Home</li>
        <li><a href="/about/">About</a></li>
        ...etc...
    </ul>
</nav>

The role="navigation" attribute is what’s known as a landmark role and is designed to let non-visual browsers know where they are.

It seems simple, and indeed when the spec is finished and fully supported by all the major screen readers, WAI-ARIA promises to make the web more accessible without overly complicating your markup. Unfortunately, there are numerous problems with WAI-ARIA at the moment, which make support uneven and can be confusing for web authors trying to do the right thing.

Continue Reading “Can WAI-ARIA Build a More Accessible Web?” »

Tags: , , ,
File Under: Browsers, Security
Nov
29
2010

Secure Firefox With New HTTPS Everywhere Add-on

By

Earlier this year, the Firefox add-on Firesheep created quite a controversy by making it easy to capture unencrypted web traffic.

Firesheep sniffs unencrypted cookies sent across open wi-fi networks. That means anyone with Firesheep installed can watch your browsing sessions while you lounge at Starbucks and grab your log-in credentials for Facebook, Twitter or other popular sites. Armed with those credentials, anyone using Firesheep can essentially masquerade as you all over the web, logging in to other social sites, blogs and news sites using your Facebook or Twitter username and password.

None of Firesheep’s mechanisms are new. But Firesheep made sniffing web traffic point-and-click simple — it was suddenly dead easy to do something that used to require a good bit of hacking knowledge.

The best way to protect yourself from Firesheep is simply avoid connecting to unencrypted sites when you’re on an open wi-fi network. That means making sure that you connect over HTTPS rather than HTTP everywhere you surf. But sadly, doing so is complicated and depends on which site you’re trying to connect to.

That’s where the Electronic Frontier Foundation’s HTTPS Everywhere Firefox add-on comes in. The extension makes it easy to ensure you’re connecting to secure sites by rewriting all requests to an HTTPS URL whenever you visit one of the sites it supports.

Of course if the website you’d like to visit doesn’t support HTTPS, there’s nothing the add-on can do, but for many big sites — Twitter, Facebook, Google, PayPal, The New York Times, Bit.ly, Amazon — HTTPS Everywhere automates the process for you.

With HTTPS Everywhere installed, if you type “twitter.com” in the Firefox URL bar, the browser will automatically connect to https://twitter.com rather than http://twitter.com.

That’s a good start, but it won’t completely protect you from anyone sniffing with Firesheep. The latest beta release of HTTPS Everywhere, released over the long weekend, improves the add-on’s protection against Firesheep, but you’ll need to do some extra stuff.

First, head the HTTPS Everywhere preferences (Tools -> Add Ons -> HTTPS Everywhere -> Preferences) and check the “Facebook+” rule. Then install the Adblock Plus extension and use it to block the insecure http:// advertisements and tracking sites that Facebook (and other sites) sometimes include. There are more instructions on the EFF’s site.

Now you can browse Facebook at the coffee shop in relative peace. Certain parts of Facebook may not work properly — some applications can’t use HTTPS, and the chat app won’t work — but at least you aren’t broadcasting your login credentials to anyone who wants to listen. The EFF says it has alerted Facebook to the incompatibilities, and that it’s waiting for Facebook to fix them.

See Also:

Tags: , , ,
File Under: Browsers, HTML5, JavaScript
Nov
29
2010

Building a GameBoy Emulator in HTML5 and JavaScript

By

Like Flash before it, HTML5 is where programmers are turning to experiment, and nothing seems to make developers experiment quite like the desire to recreate the classic video games.

We’ve already seen Pac-Man, Astroids and Conway’s Game of Life come to the browser in standards-friendly forms, and now Nintendo’s classic GameBoy platform is getting similar treatment.

The Mozilla Labs gaming blog has a guest post by developer and gamer Imran Nazar, who is hard at work building a GameBoy emulator using JavaScript. As Nazar points out, “HTML5 now offers the Canvas element for easily controlling a two-dimensional graphical display.” Couple that with the improved JavaScript speeds in modern browsers and you have the perfect platform for an emulator.

Nintendo’s GameBoy was the first portable gaming system most of us ever encountered, so the nostalgia factor is high. But the real point of this experiment is to help your understand the processes behind the scenes — how emulators work and how JavaScript can be used to build them.

The emulator isn’t quite finished yet, but Nazar has a great series of posts on his blog covering the various aspects of what he’s done. Not only is it a fascinating look at how emulators work, it also gives some great insight into what JavaScript is capable of doing. You can see the latest version of the emulator on Nazar’s latest post.

If you’re not interested in how it works and just want to get your nostalgia fix by playing some GameBoy games, check out this earlier emulator from programmer Pedro Ladaria.

See Also:

Tags: , , ,
File Under: Browsers, HTML5, Mobile
Nov
24
2010

Mobile Safari Gets More HTML5 Love in iOS Update

By

Apple recently updated its iOS software for iPhones, iPods and iPads. While there were plenty of new features for users (which you can read about on Gadget Lab), the updated version of Mobile Safari has quite a few nice new tricks for web developers.

Mobile Safari has long been at the front of the mobile pack when it comes to HTML5 support, and the latest version adds several more welcome new features. We now get support for WebSockets, better @font-face handling, better HTML5 forms and even support for the bleeding edge DeviceOrientation API — that’s the API that lets you access the accelerometer from inside the browser.

So far it doesn’t appear that Apple has fully documented the new features, but Maximiliano Firtman, the author of Programming the Mobile Web, has been testing the latest version of Mobile Safari and offers a nice overview of what’s new in iOS 4.2.

If you’re developing mobile-optimized site, or just want to play with next generation HTML features like WebSockets, check out Firtman’s overview of what Mobile Safari can and can’t do. If you’d like to see what Android 2.2 is capable of, Firtman has a similar overview of Froyo’s support for HTML5 and its related APIs.

See Also:

Tags: , ,
File Under: Browsers, Web Services
Nov
24
2010

Browserling Puts Every Browser Inside Your Browser

By

Developing a website that works well in all web browser isn’t easy, particularly if you’re using newer elements in HTML5. Even among modern, standards-compliant browsers, HTML5 support varies, and figuring out how and when to fall back on other solutions means a lot of cross-browser testing.

Thanks to virtual machines, testing across web browsers has become much easier. But if you’re looking for an even easier way to see what you site looks like in, say, Internet Explorer 6, check out Browserling, a new cross-browser testing tool that embeds any another browser inside your browser.

Browserling relies on Amazon-hosted virtual machines to do the embedding. The result is a real-time, fully interactive look at your site in virtually any Windows web browser, (Yep, it only works in Windows). It’s a step up from other web-based browser tests which just offer screenshots of what your site looks like in other browsers.

Unfortunately, as cool as the concept is, Browserling has a few drawbacks. The worst part of the service is that, for now anyway, you’ll be waiting in the queue for some time. To keep resources under control, Browserling severely limits the number of users connecting to the service at any one time. You’re also limited to how long you can use Browserlings VMs — 90 seconds is all you’ll get without creating an account. If you sign up you’ll have five minutes, which gives you a better chance to check out your website, but is hardly enough time for real testing.

The site advertises paid plans, which promise to let you ditch the queue and time limits, but at the moment the paid option isn’t actually available.

Our other main gripe is that while Internet Explorer is well represented — you can test in versions 5.5 all the way up to IE9 Beta — older versions of other browsers are scarce. While it’s true IE is probably what most developers are interested in, it would be nice to see older versions of Firefox, Safari and Opera supported as well.

While it would be premature to delete your own virtual machines, Browserling has potential. If Browserling can work out the kinks — we experienced numerous errors, crashing VMs and other problems, but it’s probably just getting smothered by hugs — it may eventually help take some of the pain out of cross-browser testing.

See Also:

Tags: , ,
File Under: Browsers
Nov
23
2010

Opera 11 Beta Lets You Stack Your Browser Tabs

By

'Tab Stacking' in Opera 11 beta

Opera software has released the first beta of the upcoming Opera 11 browser.

New in Tuesday’s release is an innovative feature called “Tab Stacking,” which gives you the ability to stack and group your tabs together to better organize the pages you’re viewing.

An alpha release of Opera arrived earlier this autumn, and it gave us a taste of some other new features, like lightweight browser add-ons and some hardware acceleration features new to version 11. Those features have been refined and are included here along with the new tab tricks.

If you’d like the take the beta release for a spin head over to Opera download page.

Tab Stacking is the standout feature in this release. It is ingeniously simple and works a little bit like the way you create folders of apps on the iPhone’s home screen. You group related tabs by dragging them on top of each other. Your “stack” then collapses down into a single tab. To access the tabs in a stack, you simply mouse over the group and it expands, or you can click the arrow to the right of the grouped tab, which has the same effect.

The idea of grouping tabs is nothing new. Firefox 4 will also introduce a new interface for grouping tabs when it is finalized in a few months.

Only a slim one or two percent of the desktop browser market uses Opera daily. Still, the company is known for building innovative user interfaces into its browsers ahead of its larger, more widely-used competitors. Things like mouse gestures, or the page that shows thumbnails of your favorite sites when opening a new tab were first introduced in Opera. So it’s a change of script to see the company in the position of playing catch-up to the big names when it comes to grouping tabs and supporting lightweight add-ons.

However, Firefox 4′s current implementation (also still in beta) suddenly looks awkward and primitive next to Opera’s take on the same idea. It more elegant, and it plays on a behavior many users — those with iPhones or iPads — are already familiar with.

The best way to understand Tab Stacking is to see it in action:

Continue Reading “Opera 11 Beta Lets You Stack Your Browser Tabs” »

Tags: , ,
File Under: Web Services
Nov
19
2010

Google Closes the App Gap

By

Google has an early Christmas present for its Google Apps users. The company has opened up access to nearly the entire suite of Google services through any Google Apps account.

That means people who pay for Google Apps for Your Domain (now referred to as simply Google Apps) can now host Google Voice, Google Reader and some 60 other cloud-based applications and services, giving admins a way to integrate just about all of Google into their own custom domains.

While Google Apps users have long had integrated Gmail, Docs, Calendar and Contacts, other popular services like Reader, Picasa and Google Voice have been off limits. All of these free Google services have remained available to anyone with a free Google account — but not the Google Apps hosted service, which allows users to tie Gmail, Calendar notifications, document sharing and their contacts database to their own, custom domain name. Google’s paid Apps service starts at $50 per user per year.

The workaround for most people so far has been to sign up for, say, a Picasa account, using a regular Google Apps e-mail address. While that works, it lacks the tight integration you get with the rest of your Google Apps — namely shared contact lists, settings and links to other apps within each app.

If you’ve got administrator access to a Google Apps account, starting today you should see a message on the main Google Apps admin page that will walk you through the setup and allow you to chose which services you’d like to enable. If you don’t see the message, keep checking, Google is rolling out the new features to everyone over the next few weeks.

There is of course a catch. If you’ve already set up accounts with any of the newly available services using your Google Apps e-mail address (the old workaround described above), you may get a message saying that your account can’t be upgraded. The problem is that your old account is conflicting with the new one.

This problem doesn’t affect all Google services, and according to the Google Help Center, the company is “currently in the process of wrapping up some necessary infrastructure work to ensure that the transition for those users will be a seamless process.” In other words, you’re going to have to wait.

See Also:

Tags: ,
File Under: HTML5
Nov
18
2010

Beautiful Websites: Google’s Book of 20 Things

By

If you’re looking for a nerdy book to give that budding programmer in your family this holiday season, Google has you covered.

Best of all, it’s free (you cheapskate) and it’s written entirely in HTML5 (you nerd).

The book is called 20 Things I Learned About Browsers and the Web. According to the forward, it’s “a short guide for anyone who’s curious about the basics of browsers and the web.”

It covers the structure of the web, then offers primers in HTML, JavaScript and Ajax, then offers a glimpse at what’s next in the world of browsers and web apps. There are also discussions about privacy, security, open source software, and design.

The book was written and built by the Google Chrome team, so the bulk of the technical stuff highlights features in Google’s browser. Under the hood, there’s some cool tech going on. There are fancy CSS type treatments and animations throughout. They’ve also recreated the familiar page-flipping animation as you thumb through the book, which frankly smells like the 1990s but adds a rather quaint touch here.

It’s a solid demonstration of how HTML5 can be used to present content in a compelling, “featurey” way. Plus, it’s not just for kids — I learned something new flipping through it, though I’m not saying what. I have a reputation to uphold.

See also:

Tags: , ,
File Under: Browsers
Nov
17
2010

New IE9 Preview Arrives, Now With More JavaScript Power

By

Internet Explorer 9 Beta on the Windows 7 desktop

Microsoft pushed out another preview release of Internet Explorer 9 Wednesday. This is not a new beta release — we’re still months away from the official release of Internet Explorer 9 — but we’re definitely approaching the finish line.

Wednesday’s release, dubbed Internet Explorer 9 Platform Preview 7 (whew) includes a big performance boost with a newly revamped JavaScript engine inside of it.

The last preview release of IE9, which only arrived a few weeks ago, saw increased support for web standards. But Microsoft made it clear to us during a phone briefing that Wednesday’s release is all about speed and performance.

To that point, PP7 contains an updated version of the Chakra JavaScript engine. This new engine for IE9 was first introduced at Microsoft’s PDC developer event in November 2009. During the last year, the company has been improving Chakra to the point where it’s now scoring over 300 percent higher on the WebKit SunSpider benchmark than it was at launch.

Microsoft’s Ryan Gavin from the IE team says the new release scores 234.6 ms on SunSpider’s JavaScript execution performance test. Read more about the testing stuff on the IE Blog.

While some browsers are certainly faster than others, the major browser vendors continue to tweak their internal workings and make small improvements to speed. JavaScript performance is particularly important, since modern web applications like Gmail, Facebook and Twitter rely heavily on scripted actions. A faster browser means a snappier web app. Just last week, Mozilla released a new beta of Firefox 4 that included revamped code for its JägerMonkey and TraceMonkey JavaScript engines.

You can download this early version of the next IE browser directly from Microsoft. It’s available for PCs running Windows 7 and Vista. Also, this platform preview can be installed alongside IE9 Beta or IE8 with no problems.

Once you grab it, head over to the company’s demo playground and put the new browser through the paces. Be sure to report your results in the comments.

Continue Reading “New IE9 Preview Arrives, Now With More JavaScript Power” »

Tags: , , ,
« OLDER POSTS