Archive for May, 2009

File Under: CSS, Fonts, Web Services
May
29
2009

Typekit Hopes to Become the YouTube of Fonts

By

A new startup is hoping to solve the web’s font problem.

Designers have been bemoaning the state of typography in the browser since the dawn of the web. The current technology for rendering type in the browser without using Flash or other non-standards-based methods essentially limits designers to only six fonts.Of course, we already have some ways around those limits, like sIFR and Cufn, two projects that use Flash and JavaScript, respectively, to embed fonts on web pages from the server side. However, there’s long been a better way to embed fonts waiting in the wings: using CSS.

The W3C @font-face declaration for CSS has been around for some time, but has languished due to two big problems. First, most browsers didn’t support it. But with the latest versions of Safari, Firefox, Opera and Google Chrome all now supporting @font-face, that problem is close to being solved.

It’s the second major problem that’s the sticking point: licensing restrictions forbid embedding fonts via CSS. Unfortunately, the font foundries which create, sell and license fonts have thus far been reluctant to embrace licensing terms that would allow designers to serve fonts legally. The foundries fear that users would be able to pirate the fonts much more easily if the files were published in the wild on the web.

It’s this problem that Typekit, an as-yet-unlaunched web service, is trying to solve. Typekit is the brainchild of Jeffrey Veen, a noted web designer (and former Wired.com engineer and contributor to Webmonkey) who is hoping that Typekit can strike a deal with the font foundries and provide licenses that will allow designers can use them on the web.

Although Typekit’s official announcement is thin on details, it looks as though the company will host the font files, which designers can then license for a fee. From there, the fonts could simply be embedded using the @font-face declaration in a site’s stylesheets.

Sounds prefect right? Well, maybe. There are some possible problems with Typekit’s scenario.

First, there’s the issue of potential downtime. If Typekit’s servers choke (and even Amazon’s S3 service goes down from time to time, so don’t expect Typekit to be any different) all your fancy fonts vanish. Depending on how complex your design is, an outage could turn your site into a garbled disaster.

The other possible problem is that Typekit will require adding “a line of JavaScript to your markup.” Hopefully what that means is that you’ll need to embed a license checking script. But the announcement isn’t clear about this, and some commenters seem to think it means Typekit is planning to use a font replacement system along the lines of Cufn.

Update: According to Typekit’s Jeffrey Veen, the commenters have it wrong.

“Typekit isn’t using any sort of image replacement for rendering fonts on web pages,” Veen tells Webmonkey. “We’re using the CSS @font-face declaration to link to TrueType and OpenType files. We’re using JavaScript to simplify that process and account for various browser versions.”

Ah, yes, various browser versions. At the back of everyone’s mind is the problem of Internet Explorer — Even the brand new IE8 still does not support the @font-face rule. However, after watching the developments come out of Google’s I/O conference it seems pretty clear that the web is moving forward with or (more likely) without IE.In the meantime, Veen says Typekit is taking special considerations to deal with Internet Explorer.

But over time, using Internet Explorer will result in a second tier web experience, since the browser remains without HTML5 and CSS 3 support. Users will start asking why, and one of two things will happen: either users switch to a different browser or Microsoft adds the missing features. Either way, the web wins.

Assuming @font-face support becomes ubiquitous across all browsers at some point, font foundries and Typekit may well find themselves in the same position that the music and film industries are today — fonts will be embedded using @font-face directly, regardless of copyright laws.

Despite the potential problems and complexities, we welcome the impending arrival of Typekit. If it can work around these outstanding issues, it has a good chance of succeeding. If you’d like to be notified when the service is available, head over to the sign up page and add the blog feed to your RSS reader.

See Also:

Tags: , , ,
File Under: Programming
May
28
2009

Google Maps V3 Offers Easier, Faster API

By

Google has announced the next major version of its Maps API. While Google has added features to the API at a pretty regular pace, the Maps API hasn’t seen a major rewrite in almost three years.

The new Google Maps API v3 promises a simpler, faster set of tools and has been optimized for the small screen with the iPhone’s Mobile Safari and Google Chrome making the list of supported browsers. Your mashups should also work on Android’s browser with only a few small issues.

Although version 3 is currently only in the testing phase, there are several big changes that should make it an appealing upgrade for developers.

  1. You no longer need an API key — If you’ve ever tried cutting and pasting code from Google Maps tutorials, only to get API key errors, your pain is gone. Cut and paste with abandon.
  2. Smaller JavaScript download — The API has been refactored with an emphasis on using MVC architecture. The result is a smaller JavaScript file, making for significantly faster page loads.
  3. The Default UI is enabled automatically — There’s no need to add zooming or other controls to your map under the new API. It’s a small change, but it saves a few lines of code and makes developers’ lives easier. Of course, if you’ve been using your own, custom UI controls you can still do so.
  4. Chrome and Mobile Safari have been added to the list of supported browsers. While your mashups should work on Android-based phones with the most recent update, Google does caution that there may be some issues during this Labs testing phase.

For a complete rundown on what’s new and changed in Google Maps API v3 check out the reference page on Google Labs and the documentation. There’s also a new Google Group for gathering developer feedback on v3.

While Google is calling the new API “experimental,” I went ahead and ran some of the demo code in the browser. I can safely say that if you don’t mind the beta status, the speed improvements alone are well worth any risk of reliability.

See Also:

File Under: Events, Software & Tools
May
28
2009

Google Waves Goodbye to E-Mail, Welcomes Real-Time Communication

By

SAN FRANCISCO — Google has set out to rewire the e-mail inbox with a new product called Wave.

Wave is a web-based application that marries multiple forms of communication and collaboration, including chat, mail and wikis, into a unified interface. Everything inside Wave happens in real time: You can even see a comment being made as the person is typing it, character-by-character.

Google Wave, which was demonstrated Thursday at the Google I/O developer conference taking place here, is now live as a private developer preview. Conference attendees can start playing with it now, and Google has its eye on a public beta launch within a few months.

It’s a peculiar model we haven’t seen before, sort of a “chat inside e-mail” approach that has the potential to profoundly alter the way we share information and collaborate with one another.

There are few effective ways to communicate within small groups, whether co-workers, friends, or family. Most of us use e-mail, just addressing a new message to a bunch of people. This starts a thread, which eventually gets twisted and fragmented into side conversations and becomes more and more confusing. The more-organized among us use tools like IM or IRC chat rooms, wikis, group blogs or web apps built for threaded communications, such as FriendFeed.

Google Wave is an attempt to replace not one but all of these methods, rolling threaded conversations, real-time chat, nested comments, media sharing, link sharing and wiki-style collaboration into a familiar interface that looks and behaves like an e-mail inbox, complete with folders for keeping things organized and a search box for digging up older threads.

Here’s how it works. First, a screenshot:

A user starts a “wave,” a new thread in the system. At first, it looks just like an e-mail. A wave usually starts as text, but photos can be dragged in, and videos or maps can be embedded. The user invites friends by dragging and dropping names from a list of contacts in a sidebar. New users can start leaving comments in line, setting a break point in the original text and adding a comment directly below the paragraph, photo or whatever piece of the wave they want to comment on. There’s even a built in spell-checker that’s context-sensitive.

As the new user is leaving a comment, everyone involved in the wave can see the comments being typed in, in real time, letter by letter. Edits can be made concurrently, so two or more users can see one anothers’ changes flowing in, even as they’re leaving their comments, making edits or uploading images.

And it really is instantaneous: Google is measuring Wave’s latency in the low milliseconds.

The methods of communicating we’ve grown used to in the last decade, primarily e-mail and instant messaging, are being usurped by more intuitive and time-sensitive alternatives on the social web. Thanks to Twitter, FriendFeed and Facebook, the emphasis now is on real-time communication: Updates are expected instantly, and we leave many of our conversations open for comments. There’s an initial flurry of activity, a constant stream of back-and-forth chatter between participants. Conversations morph and evolve quickly, then, hours or days later, eventually sputter out and fade.

This is the model Wave is clearly embracing. But Google didn’t initially set out to build a better Twitter or a better FriendFeed.

“In a sense, we’ve taken a cue from almost every communication tool that’s ever existed,” Google senior software engineer Jens Rasmussen, one of the leads on the Wave team, tells Webmonkey. And since Wave has been in development for more than two-and-a-half years, he says it has evolved alongside the social, real-time web we’re living in today, taking new cues along the way.

Even though the emphasis is on real time, the structure that’s left behind after the fact is just as important, Rasmussen says. Users can create persistent searches on any phrase or topic. Also, new participants can “play back” the wave to see how the conversation developed over time, from the original message onwards.

It’s also important to note Wave is very much a web app, built entirely in JavaScript and with several HTML 5 elements for modern browsers which support the nascent spec.

Images can be dragged and dropped into the app in the browser if Gears is installed. All of the uploading happens in the background, thanks to the web-workers component of HTML 5. Wave also has an API, so people can put waves on their web pages. The whole interface of the wave gets embedded in the page, but it can be styled to match the blog or external site. Replies, questions and edits all appear in real time.

There’s a new protocol at work behind the scenes here, and Google is making it available under an open source license. Both the client and the server code will be released, so third-party apps can be built on the desktop or for the browser, and companies or groups can run their own private instances. However, because Wave is built using a federated protocol, different instances will be able to communicate with one another seamlessly across the single platform.

See Also:

File Under: Events, Programming
May
27
2009

Google Throws Its Weight Behind HTML 5

By

SAN FRANCISCO, California — This morning was HTML 5′s big coming-out party.

At Google I/O, the company’s developer conference taking place at the Moscone Center here this week, Google Vice President of engineering Vic Gundotra centered the majority of his keynote presentation around what the company is doing to promote the next version of HTML, the mark-up language upon which the bulk of the web is built.

HTML 5 is still nascent technology. It’s only in the draft specification stage, mired in committee at the W3C, the web’s governing body. But HTML 5 is already being implemented in the wild, both as experimental demos and as the driving technology behind the latest wave of web applications.

“HTML 5 offers us a chance to do things differently,” says Gundotra. He also noted that in the last decade, we’ve seen close to a 100X improvement in JavaScript parsing across the major browsers that helps make the latest apps run faster.

To illustrate his point, Gundotra showed several breakthrough HTML 5 demos during his keynote. You can view all of the demos here.

We saw a video playing in a mocked-up version of a YouTube page without using Flash. All of the video playback was handled using the HTML 5 video tag.

“The problem with video right now is that there’s too much outside of your control,” Gundotra says. “HTML 5 gives you a <video> tag that’s as simple to use as the <image> tag.”

We also saw a motion-tracking video app rendered in JavaScript, complete with full-motion HTML video playback. A woman walked across the camera’s field of view while a JavaScript app, running in the browser, tracked her movement and dynamically drew bounding boxes around the different parts of her body as she paced back and forth. Normally, this intense of an app would cause the browser to lock up and crash (or throw a spinning beach ball). But thanks to HTML 5′s “web workers” background processing capabilities, the browser barely stuttered while the app was running. The crowd of 4,000 attendees applauded wildly at this.

We saw a Doom-style first-person shooter game rendered entirely using JavaScript and HTML 5′s canvas vector graphics engine. Gundotra also showed off a canvas-powered analytics tool with 2D graphs you can zoom in on and resize on the fly, and a 3D animated demo of a beach scene, complete with crashing waves, flickering torches and palm trees blowing in the breeze, all rendered in JavaScript and HTML 5.

Gundotra’s demos concentrated on the “five components of HTML 5 Google is most excited about”: canvas, video, web workers, geolocation, app cache and database access.

The latest versions of the mobile Android browser and the soon-to-be-released Mobile Safari browser on the iPhone will both support some HTML 5 elements, so of course there were some mobile demos at the I/O keynote, as well. The team showed a Gmail user checking his e-mail in the browser while disconnected from the internet (utilizing HTML 5′s support for offline data access) and an iPhone user updating his location in Google Latitude running in the browser (the new iPhone software, due in June, supports geolocation via HTML 5).

It’s exciting to see Google betting the bank on HTML 5, but not entirely surprising. The company is in the web app business, so any technology that makes web apps faster, better and more useful is going to be supported — even more so if that technology is based on open standards and doesn’t require plug-ins or proprietary code like Flash and Silverlight.

Wednesday’s keynote wasn’t all cheerleading. Several digs were aimed at Microsoft for failing to support much of HTML 5 in the latest version of Internet Explorer. IE8 does have experimental geolocation support, but no support for HTML 5 video playback, canvas, or web workers.

Microsoft is quick to argue that it isn’t prudent to build support for untested technologies into its browser code, which is used by the majority of people on the web. Probably closer to the truth: Microsoft has its own playback technology in Silverlight and isn’t interested in sinking its own ship.

Microsoft has pledged support for HTML 5, but warns that it’s still a long way off. But as Gundotra’s keynote illustrates, HTML 5 is just about all grown up, and everyone else is choosing to innovate and put the latest capabilities through the paces right now.

After Wednesday’s coming-out party, maybe Microsoft will change its tune.

See Also:

File Under: Events, Software & Tools
May
27
2009

Now It’s Simple to Add Google Mojo to Your Website

By

SAN FRANCISCO, California — Website owners now have the ability to plug the most popular Google products directly into their web pages with the ease of adding a YouTube video.

The company has launched Google Web Elements, a collection of widgets site publishers can embed on their pages to display customized content from several of Google’s key web services.

If you go to the new Google Web Elements site, you’ll see options to embed custom widgets for Calendars, Maps, Google News, YouTube Video News, Presentations, Spreadsheets and Google Conversations, something new we’ll get to in a moment.

The new service was announced at Google I/O, the company’s developer conference taking place at the Moscone Center here this week.

Google has offered similar tools for site builders in the past, but they’re only useful to those comfortable working with XHTML code, developer keys and FTP clients. With the launch of Web Elements, it’s obvious the company is trying to de-mystify the entire process and pull in the less-advanced users. Generating and embedding a widget is straightforward and dead easy — if you can embed a YouTube video, you possess the required smarts to embed a Google Web Element.

In fact, according to Web Elements technical lead DeWitt Clinton, the YouTube model served as inspiration for these new widgets.

“We were looking at how easy it is to embed a YouTube video and we thought, ‘Couldn’t we do this with news, maps and search,’” Clinton says.

Each of the different Elements has its own customization options. Any public calendar or event can be displayed in the Calendar Element. For the Maps element, the publisher just plugs in an address and gets a custom map. For custom search, the basic Google search tool can be scoped to one site, a handful of sites or the entire web.

The News Element can display the top stories of the day, or it can be narrowed down to specific topics. For example, if you’re running an Apple news site, you can generate a persistent search for “Steve Jobs” that displays the latest news headlines about Steve, just like the personalized view options on Google News.

The YouTube Video News element has fewer customization options. For now, it just plays a series of breaking news clips, and the playlist is populated by whatever clips the feed providers — The New York Times and the Associated Press, among others — and dumping into the YouTube News channel.

Each element appears in its own box (an HTML inline frame) which can be resized to whatever works best with the site’s design. Publishers just dress up the widget however they’d like, grab the i-frame code and add it to their site.

The most unique is the Conversations Element, which allows for embed commentary around any particular topic. To use the hypothetical Apple blog example again, you could ask your visitors what they hope to see in the next iPhone. Anyone who wants to participate in the discussion can log in and leave a comment.

User authentication is handled by Google’s Friend Connect single sign-on technology, so participants can log in using either a Google account or any OpenID, such as a MySpace, AOL or Yahoo login. This opens up participation to just about everyone on the web, not just Google users.

Furthermore, you can choose to keep the discussion limited to just your own site, or you can allow the Element to be embedded anywhere on the web. If you choose to make it public, a small “embed this” link appears at the bottom of the Element, so anyone can grab the widget and place it on their site. As it propagates across other sites, all comments and conversations related to that topic will appear in all instances of the widget, including yours.

It’s important to note that Web Elements are different from Gadgets, those little weather and news widgets that you can embed on your iGoogle start page. Clinton says that while Gadgets are an open container format that lets anyone build whatever they want, Web Elements will always be controlled by Google and they’ll only contain Google products.

The company will incorporate more Google services and add more features to the existing Elements in the coming months, he says.

See Also:

File Under: Software & Tools
May
22
2009

Google Feels the Need for More Speed With Chrome 2.0

By

Chrome logoWe’ve been playing around with the latest release of Google’s open-source web browser, and we’ve found it to be well worth the upgrade.

Chrome 2.0 adds features like full screen mode, form autofill, the ability to delete specific sites from your most-visited list and a faster JavaScript engine. The JavaScript enhancements are the most important from a competitive perspective because it makes web apps in Chrome run faster, including those made by Google itself.

If you’ve been running Chrome in the beta or developer “channels,” there won’t be too much to see here, as you’ve had access to these new features for a month or so. But if, like most users, you’ve been sticking to stable releases, Chrome 2.0 definitely deserves a place on your desktop.

The most noticeable change from earlier releases is the speed boost. Thanks to an update to Chrome’s V8 JavaScript engine, Google claims that Chrome 2.0 loads pages about 30 percent faster. While those with faster hardware may not notice it in general use, JavaScript-heavy pages like Google’s Gmail, Docs and other web apps, are a bit snappier. These are the same applications upon which Google is betting a large part of not only its future, but the future of the web. By making its own webapps run more efficiently to the point where they closely rival the performance of their desktop counterparts, Google is hoping more users will switch to the hosted versions.Also noteworthy are the browser’s new tab controls, which allow you to delete select sites from the most-visited list that appears when you open a new tab in Chrome — you wouldn’t want anyone to know you’ve been frequenting those gamer dating sites again now, would you?

While Chrome 2.0 is a worthwhile upgrade, it’s regrettable that one of our favorite features from the most recent developer beta — the ability to drag tabs and compare two tabs side by side — did not make the cut. Also missing from the new Chrome 2.0 release is the experimental extensions support.

As always, if you’re already using Chrome, you’ll be prompted to upgrade in the near future. If you’d like to take Chrome for a spin, head to the download page (sorry, still no native Mac or Linux versions, but you can try the Chromium releases). And if you’d like to test the betas or developer releases, be sure to grab a copy of the channel switcher app as well.

See Also:

File Under: Programming, Visual Design
May
21
2009

Where 2.0: Drawing the Shape of the Flickr-verse

By

SAN JOSE, California — Ever since Flickr started accepting and storing geodata attached to its users’ photos, the service has amassed over 100 million geotagged photos from all over the world.

That’s a whole lot of points on a map. And since most of those 100-million-plus photos have at least one place name attached to them, that’s a lot of human-tagged data in the form of city names, neighborhood names and street names, among other random, disparate tags.

For a while now, Flickr has been using these correlated data sets to draw “alpha shapes,” shapes on a map whose outlines are defined only by the tags people have associated with photos taken in that place. For example, at the top of this post, you can see Flickr’s alpha shape for Vietnam. This shape was made by taking all the photos Flickr users have tagged “Vietnam” and reverse-geocoding them. Flickr takes each place-name-tagged photo and associates a series of six numerical Where On Earth (WOE) IDs with it, one for each level of granularity — neighborhood, city, county, region, country and continent. Some photos only have one or two WOEIDs, some have all six. Once those WOEIDs are assigned, the photo can be plotted on a map. Draw an outline around that cluster of points on your map, and you’ve got an alpha shape. The process is described in greater detail on Flickr’s developer blog.

The alpha shapes are imperfect — the borders are sloppy and a little raw, but that’s the way Flickr likes it.

“Alpha shapes allow us to define a place not as it exists in reality, but as people see it,” says Flickr’s Aaron Cope, who presented a talk on alpha shapes at the Where 2.0 Conference taking place here this week.

“They also serve as examples of the old saying, ‘Neighborhoods are always under dispute,’” he says.

The software that makes this possible is an open-source app called Clustr, which was written by geo-guru Schuyler Erle. Clustr is able to associate WOEIDs with place-tagged photos and plot them.

Starting Thursday, Flickr is also making all of its alpha shapes available as a free download (large GZip’d XML file).

Image: Aaron Cope (Straup)/Flickr

Other Where 2.0 Coverage:

File Under: Events, Multimedia
May
21
2009

Where 2.0: Video Tracks a Year of Edits on OpenStreetMap

By

OSM 2008: A Year of Edits from ItoWorld on Vimeo.

This video animates an entire year’s worth of edits to the OpenStreetMap.org project. OSM is a public and open database of maps encompassing the whole world — think of it as an open, free version of Google Earth.

Edits are made, wiki-style, by contributors around the globe. Each white flash in this video represents a new edit being made to the database during 2008.

From the OSM site:

Some edits are a result of a physical local survey by a contributor with a GPS unit and taking notes, other edits are done remotely using aerial photography or out-of-copyright maps, and some are bulk imports of official data.

There are some astonishing moments, like when a massive data dump fills in almost the entirety of India, or when a huge blotches of white suddenly appear in Eastern Europe and in North America.

The animation was created by Itoworld, and is licensed under the Creative Commons.

Other Where 2.0 Coverage:

File Under: Multimedia, Visual Design
May
21
2009

Historical Map Mashups Turn Cities Into Glass Onions of Time

By

The image above looks like a bit of a mess, but that’s only because it’s two maps of lower Manhattan layered on top of one another — an 1891 street map overlaid by a 2006 map of the NYC Subway system.

The screenshot is taken from Hypercities, a MacArthur-funded project to help create these kinds of historical analysis tools. Currently, the site has 39 maps of New York City made between 1766 and 2009, all of which have been aligned using open-source software tools so their transparencies can be adjusted. You can juxtapose any number of maps you’d like — ranging from a map of government buildings made around the time of Washington’s inauguration to 1990s demographic maps marking ethnicity and income — effectively letting you peel New York City like a giant onion, exposing layers of history as you go.

Old maps are dug up and scanned, then specific points are plotted against known lat-long data from OpenStreetMap and other open geodatabases. The older maps are then “rubber sheeted,” or stretched to be match modern geo-data. Lastly, the maps are tiled and fed into a database that make this sort of front-end mashup possible.

Hypercities also has time-layered views of Los Angeles, Berlin, Tel Aviv, Cairo, a historical site in Peru and a few other world cities.

Hypercities is just one such project. Cartifact is also doing something similar. Both were part of a presentation Thursday at the Where 2.0 Conference by Michal Migurski of Stamen Design, the small firm responsible for Digg’s data visualizations and the infamous Oakland Crimespotting map mashup.

Also be sure to check out Migurski’s own project called Old Oakland. He overlaid historical maps of Oakland using a scanner, Photoshop, and getlatlon.com, a site created by Simon Willison that gives you latitude and longitude coordinates for any point on a map anywhere in the world.

Other Where 2.0 Coverage:

File Under: Software & Tools
May
21
2009

Firefox Add-ons Blast Off With ‘JetPack’

By

Browser add-ons are unquestionably a huge part of Firefox’s success. Unfortunately, building add-ons isn’t for everyone, but that’s something Mozilla is hoping to change with a new Labs project named JetPack.

JetPack is a brand new experimental way of extending Firefox. Because it uses simple tools like HTML, CSS and JavaScript, anyone who can build a website should be able to create something with JetPack.

Using JetPack is also dead simple for end users — there’s no need to restart Firefox when installing JetPack add-ons, and JetPack add-ons will be compatible across multiple versions of Firefox. Because the tools JetPack offers — namely an API — are backed into Firefox, any browser updates won’t affect the JetPack add-ons.

So how does JetPack work? At its most basic level JetPack offers an API that can be used to send HTML and JavaScript commands to the browser. Much of the UI is handled behind the scenes, so creating a JetPack add-on requires very little code, and the code it does require is simple.

Just because the commands are simple doesn’t mean JetPack can’t be powerful. In fact, Aza Raskin, head of user experience at Mozilla, has created a very nice video that walks you through the steps of creating a JetPack add-on that duplicates much of functionality found in the Ad Block Plus add-on with just a dozen lines of code.

Mozilla Labs Jetpack – Intro & Tutorial from Aza Raskin on Vimeo.

For the initial release, the Jetpack APIs allow you to interact with Firefox widgets like statusbars, tabs, content-scripts and animations. There’s also built-in support for using the jQuery JavaScript library.

The other interesting element of JetPack is its ability to interact with other web services and APIs. For example, your JetPack app could pass queries to the Twitter API to return real-time results for a specific query, or perhaps pull in and do something with recent Flickr images.

In short, JetPack takes much of the power of the Firefox add-on system and mixes it together with the web, all without requiring you to learn a new programming language.

What’s not to love? At the moment, it’s a very early release, so the APIs may well change significantly before the final release. The release announcement also cautions that the Jetpack API “does not include a fully formed security model… it is being released for testing, development, and feedback.”

With that in mind, if you’d like to play around with JetPack, head over to the new JetPack site at Mozilla Labs to download and install JetPack. There’s also nice looking tutorial to help you get started building your first JetPack add-on.

See Also:

« OLDER POSTS