Archive for May, 2010

File Under: CSS, Fonts
May
19
2010

Google, Typekit Join Up to Improve Web Fonts

By

Google has announced a new Font API and a collection of free, open source fonts anyone can use in their site designs for free. The Google Font API allows you to embed any of the new Google fonts on your website using CSS.

The fonts themselves are quite nice, with a range of script, serif, sans-serif and monospace typefaces. They can all be used to style text via @font-face. There are only eighteen fonts available — so there’s probably no need for Typekit to worry that Google is muscling in on its territory.

In fact, Typekit has partnered with Google to announce WebFont Loader, a JavaScript library for improving the web font experience. Typekit will also be adding Google’s new free fonts to its collection, so there’s clearly still a lot of love there.

The WebFont Loader is an open source library of scripts that Typekit developed to help eliminate the “flash of unstyled text” page load hiccup that we’ve mentioned before. The WebFont Loader offers a number of JavaScript events which allow developers more control over when their fonts load.

Even though things have been progressing quickly in the world of type on the web, with advancements in CSS, HTML5 and the rise of services like Typekit, inconsistencies in browser support and implementation have stopped some from making the move to web fonts. The new WebFont Loader gives hope to those still on the fence by providing a consistent way to handle what the browser does while the fonts are being loaded.

“The WebFont Loader does for @font-face what jQuery has done for JavaScript,” says Typekit co-founder Jeffrey Veen in an e-mail to Webmonkey. “For people who really care about about the speed and user experience of their web pages, the WebFont Library gives them much more control. It essentially moves us a big step forward in the evolution of fonts on the web.”

Veen also praises Google’s decision to keep its work open source and free.

“Getting fonts technically ready for web use is a lot of work, and using the open source model allows anyone to contribute their expertise to a core set of fonts.” he says.

You can use WebFont Loader with fonts on your own server, with links to the just-announced Google Webfont API, or with your Typekit account.

Google made the announcement at its annual Google I/O developer conference, which is taking place in San Francisco this week.

As for Google’s new Font API, well, it’s so simple its hardly an API. You just need to add a link to Google’s stylesheet in the head tags of your page and then apply that font to some element in your page.

The syntax looks like this:

Then, in your stylesheet, you can apply that font to any body element. For example:

h1 {
  font-family: 'Font Name', serif;
}

Google’s new Font API will work in any browser that supports @font-face (which is pretty much all of them). If the Google fonts happen to strike your fancy, the API is certainly easy to use. If you’re looking for a broader selection, check out Typekit.

Typekit offers Google’s new open source fonts, Veen says, but Typekit also offers access to a library of over 4,000 commercial fonts of professional quality. Typekit is currently the only source offering these high-quality typefaces for legal use on the web.

Disclosure: Jeff Veen is a former Webmonkey editor and a former Wired.com employee.

See Also:

Tags: , , ,
File Under: HTML5, Software
May
19
2010

Adobe Adds HTML5 Creation Tools to Dreamweaver

By

Dreamweaver CS5

SAN FRANCISCO — Adobe will begin shipping a package of HTML5 web design tools for Dreamweaver, the company says.

The HTML5 Pack for Dreamweaver will available for download on Adobe Labs some time on Wednesday. It will be a free download for anyone who owns Dreamweaver Creative Suite 5, and Adobe will roll it into an automatic update for Dreamweaver once the add-on pack has been thoroughly tested.

The add-on pack gives Dreamweaver CS5 the ability to provide code hints for HTML5 elements and CSS3 styles when building pages in the text-based Code View window. Adobe is also adding a few starter layouts for people building HTML5 pages from scratch. More layouts will be added later.

Dreamweaver’s Live View mode — which uses the same WebKit rendering engine as Safari and the Android browser to preview web pages — is also getting an update. The Live View window will now be able to render pages built with HTML5 and CSS3, so developers coding native video and audio playback to their pages will be able to preview those pages in Dreamweaver.

The announcement was made during the Google I/O, the developer conference taking place here this week. Adobe CTO Kevin Lynch spoke as part of the morning keynote at I/O. Lynch hinted at this release earlier in May when he appeared at the Web 2.0 Expo developer conference and announced that Adobe would soon be shipping more tools for HTML5 content creation.

The release comes soon after Apple began encouraging developers to create web apps in HTML5 rather than rely on Adobe’s Flash Player to deliver videos, audio clips and animations. Apple’s iPad and iPhone famously don’t support Flash, so Adobe’s push towards giving designers new tools for building HTML5 web apps will help the company maintain its foothold on a web where Flash is becoming less attractive.

Dreamweaver Creative Suite 5 was released this spring. But it’s one of the oldest WYSIWYG web editors out there, and any web developer with knowledge of HTML5 and CSS3 has had the ability to use Dreamweaver’s Code View to build pages using the emerging standards for years. These new tools make the workflow easier though, allowing developers to take advantage of Dreamweaver’s helpful code hinting and to preview changes right inside the app, instead of uploading the files to the web to view their changes in a browser.

Lynch demonstrated a couple of other things, too. He showed how you can make a rich advertisement in Dreamweaver using CSS3 transforms and HTML5 animations. This will be especially handy for anyone wanting to create an ad for Apple’s iAd platform, which will be totally HTML5-based.

Also added to Dreamweaver in the HTML5 pack is a tool that lets you see what your pages will look like on multiple devices with different size screens all at once. It’s a preview pane with several windows — one for a desktop browser, one for mobiles, one for a tablet and so on. The preview tool uses dynamic stylesheet swapping, so you see your layout change instantly based on which device you’re viewing it on.

Of course, that’s extremely useful for anyone creating a website that’s going to be deployed on mobiles and iPads. Oh yes, and Android tablets — whenever they show up.

See Also:

Tags: , , ,
File Under: HTML5, Multimedia
May
19
2010

Major Browser Vendors Launch WebM Free Open Video Project

By

webm-devpreview

SAN FRANCISCO — The web received a shiny new gift Wednesday morning — a truly open and royalty-free video codec for HTML5 web pages.

The new open media project is called WebM. As expected, the VP8 codec is at the center of WebM. Google acquired the video technology earlier this year, and developers have been itching with anticipation for Google to release VP8 as open source code. Wednesday morning, they got their wish.

“We are fully open-sourcing VP8 under a completely royalty-free license,” Google VP of product management Sundar Pichai announced to the thousands of attendees at the company’s I/O developer conference, taking place here this week.

Google has already added support for the format to Chrome, and on YouTube as part of the site’s ongoing experiment in building an entirely HTML5-powered experience.

WebM is a set of codecs (coder-decoders) for browsers to use to play video and audio content embedded on HTML5 web pages without the use of plug-ins. The project was launched with the backing of Mozilla, Opera and Google. All three browser vendors have already begun building support for it, and Microsoft announced Wednesday that it will support the video technology in Internet Explorer 9, which is due later this year.

Adobe CTO Kevin Lynch was also on stage at Google I/O, and he announced that VP8 and WebM support would be rolled into Flash Player in the near future.

WebM arrives at the height of a great debate about the future of video online. Support is split between several technologies, including two separate technologies for native video playback, and the Flash Player, which some developers are moving away from in favor of open web standards like HTML5.

The primary components of WebM video are the VP8 codec, which is used for video, and the Vorbis codec, which is used for audio. The content is served inside of a Matroska container. Google acquired the video technology company On2 this year, and it has been working on developing VP8 for use in browsers and on hardware devices since the acquisition was approved.

The dominant video codec in use on the web is H.264, which some developers and browser vendors are loathe to use because of patent and licensing restrictions. H.264 patents are handled by the MPEG-LA licensing group, of which Apple and Microsoft are members.

Mozilla VP of engineering Mike Shaver came on stage to praise the new WebM technology, saying “We want to see this in all browsers, on all devices.”

He also announced the latest nightlies of Firefox will have support for WebM video and audio playback.

Hakon Lie, CTO of Opera Software, creator of CSS and long-time proponent of open web video, also took the stage and underscored the importance that open, unpatented video technology would make on the web.

“Tim didn’t patent HTML, I didn’t patent CSS and Brendan didn’t patent JavaScript,” he said.

Opera’s ongoing work on WebM, along with the latest browser builds with WebM support, can be found at labs.opera.com.

Homepage photo of Vic Gundotra, VP of engineering for Google: magerleagues/Flickr

See Also:

Tags: , , , , , ,
File Under: CSS, Fonts
May
17
2010

Dealing With the Dreaded ‘Flash of Unstyled Text’

By

That's a fancy-lookin' T you got there.

That's a fancy-lookin' T you got there.

The use of custom fonts on the web is finally a viable option for designers.

Browser support for CSS’s @font-face rule is pretty solid — even IE 5 can be wrangled into displaying custom fonts loaded from your server. Services like Typekit, which licenses fonts from well-known font foundries, and free services like Font Squirrel are helping to smooth the licensing issues surrounding custom fonts on the web.

However, while browser support and licensing is getting sorted quickly, there’s still one big problem with web fonts — the dreaded “Flash of Unstyled Text,” or FOUT.

The problem (despite the name, it has nothing to do with Adobe Flash) stems from how browsers render a page: progressively, prioritizing the raw content, then grabbing the stylesheet and then grabbing any external font files. The actual FOUT effect can be seen in the wild, but it varies by browser.

Internet Explorer will load the font file as soon as it encounters the @font-face in your CSS, which minimizes FOUT. However, make sure to put your @font-face declaration above any script tags, otherwise IE will hold the entire page until the font loads.

Safari and Chrome (and other WebKit browsers) hide any text styled with @font-face until the font is fully loaded. This means your styled text content is invisible at first, and then pops onto the screen later, after the font file loads.

Firefox loads all your text normally and displays it using a fallback font. Then, a half-second or so later, that text is “upgraded” when the custom font data is loaded. The result is a jarring font change, much like older, Flash-based font solutions. Mozilla is currently treating this behavior as a bug in Firefox. Mozilla plans to adopt the WebKit-style rendering in the future.

Obviously none of these cases is ideal, and the little loading hiccup, no matter what form it manifests itself in, is noticeable even to the most oblivious of web users.

FOUT sucks. So, what do you do? There are a variety of techniques that can be used to minimize — and even eliminate — the FOUT.

Continue Reading “Dealing With the Dreaded ‘Flash of Unstyled Text’” »

Tags: , , ,
File Under: Identity, Social, Web Standards
May
15
2010

New ‘OpenID Connect’ Proposal Could Solve Many of the Social Web’s Woes

By

openid_connect

David Recordon, one of the key architects of OpenID and other identity technologies that have emerged over the past five years, has envisioned a new direction for OpenID.

His proposal, which was drafted with input from several people in the OpenID community, is called OpenID Connect. At the highest level, it essentially rebuilds OpenID on top of OAuth 2.0, combining the two popular open source systems for authenticating users and letting them share data with social websites and applications.

“OpenID Connect is an attempt to pull the best pieces of two separate technologies together, to create a single technology stack that’s simpler for everyone to use,” Recordon tells Webmonkey.

The proposed approach combines several interactions around logging in and sharing data with a website or application into one simple step. It also lets a user log in using either a profile URL, a blog URL or an e-mail address. Support for e-mail addresses as identifiers is a big step for OpenID, which currently requires you to type a URL — something that’s confusing to people who are used to typing a user name. Asking somebody to enter an e-mail address requires less of a psychological jump.

OpenID Connect hopes to broaden the technology’s reach as well. Unlike OpenID, it’s been designed to work equally well on every platform in your home: on the web, on the desktop and in mobile apps. “It could even work on your XBox,” Recordon says.

Both OpenID and OAuth have seen wide adoption across social sites and applications over the last couple of years, but both still suffer from various problems of usability (for people trying to log in) and complexity (for publishers who are trying to implement them). This is mostly due to the fact that the two technologies weren’t developed concurrently, and that they were developed for different use cases.

Many of the complexity problems in OAuth were solved by the creation of OAuth 2.0 earlier this year. OAuth 2.0 hasn’t been finalized, but it’s already been adopted by Facebook in its Open Graph API, and by Twitter in @anywhere. OpenID, however, hasn’t been updated since 2007. Three years is an eternity on the web, especially in the mobile space, which has seen the massive growth of the mobile web and the quick proliferation of mobile apps with social networking built in.

Also, the technologies serve two different purposes. OpenID is a way of proving to a server that you are who you say you are, and OAuth is a way of providing an application access to information such as your photos or your address book through web APIs.

“Instead of saying identity and APIs were different things, we wanted to build them together and make them work together,” Recordon says. “This is a smart combination of OpenID and OAuth pieces.”

The idea of OpenID Connect evolved naturally from the work being done by Recordon and his colleagues in the OpenID Foundation, the non-profit that develops and popularizes the technology. Others involved in the creation of this new proposal include Chris Messina, who works at Google and drafted a similar idea earlier this year, and Eran Hammer-Lahav from Yahoo, who recently posted an overview of the improvements in OAuth 2.0. Recordon, who is an engineer at Facebook, just stitched together the pieces and drafted the proposal.

Chris Messina is quick to point out that OpenID Connect is just an idea at this point, not a spec or a complete draft.

“David’s document is a strawman in a very intentional way,” he says. “It is not complete. It’s a starting point. The goal is to start a conversation versus saying, ‘this is a solution.’”

Update: Be sure to read Messina’s follow-up post on his blog.

Continue Reading “New ‘OpenID Connect’ Proposal Could Solve Many of the Social Web’s Woes” »

Tags: , ,
File Under: Browsers, Events, HTML5
May
14
2010

Google I/O Will Be Chrome’s Time to Shine

By

gchrome_2

In the year and a half since it first emerged, Google’s Chrome browser has matured from a thinner-than-air experiment that only ran on Windows into a stable, full-featured browser that works on all major operating systems and is available in 50 languages.

No longer just the new kid on the block, Chrome is now poised to become even more formidable. We expect Google to show off some new enhancements that would better enable it to handle the next version of the web next week at Google I/O, the company’s annual developer conference taking place in San Francisco.

Chrome is continually being updated, but recent developments in web video, social web technologies, HTML5 and new data APIs point to more capabilities making their way into the browser.

Chrome is designed to deliver a superior experience when using web apps, with its ability to isolate apps within individual browser tabs, its advanced JavaScript engine and its support for new technologies in HTML5.

“What we care most about with Chrome is driving the growth of web apps forward,” says Google director of engineering David Glazer.

Continue Reading “Google I/O Will Be Chrome’s Time to Shine” »

Tags: , ,
File Under: CSS, HTML5, Web Standards
May
14
2010

Handy Guide to Detecting Support for HTML5

By

What language does that browser speak?

What language does that browser speak?

Web developers wanting to use the new features in HTML5 or CSS3 are still struggling with incomplete and inconsistent browser support. While HTML5 isn’t perfect (or complete), that doesn’t mean you can’t start using it; it just means using it is a little more complicated since you need to detect the current browser’s level of support and then adjust accordingly.

One solution is to use some JavaScript to detect the level of support in the current browser and then use HTML5 where you can and offer alternatives to browser that don’t support the features you’re using.

Modernizr is handy little library can detect which HTML5 features are available to the current user’s browser. Armed with that information you can then create conditional JavaScript statements to offer HTML5 to those browsers that support it, but still fall back on other content for those that don’t.

There are however, some cases where Modernizr might be overkill. For example, if you just want to embed some HTML5 video, you only need to detect one element. If Modernizr isn’t right for your project, check out Mark Pilgrim’s new list of ways of detecting HTML5 elements. The list of elements and how to detect them is an appendix to Pilgrim’s book in progress, Dive Into HTML5.

The list isn’t just elements, though it does cover those as well, but it also shows you how to detect API support for things like offline storage or geolocation, as well as SVG, SVG-in-HTML and even which video codec the current browser supports.

One thing Pilgrim doesn’t include is detecting CSS3 features, so if you need to that info you’re on your own (or you can use Modernizr, which detects most of CSS3).

See Also:

Photo: Darwin Bell via Flickr/CC

Tags: ,
File Under: Browsers, Software
May
13
2010

First Look: Firefox 4 Preview Delivers Speed, Revamped Interface

By

firefox4

A new version of Firefox is due before the end of 2010, and while the finished product is still a long way off, beta code is expected to ship as early as late June. Mozilla’s product director Mike Beltzner recently posted his team’s vision of what Firefox 4 will look like, highlighting new features and a new look.

Indeed some of the more important changes coming in Firefox 4 are already available in Firefox nightly builds. We downloaded the latest nightly build (which is still called Firefox 3.7 for the time being, but will be renamed when it reaches beta) and tested it out. So what’s in store for Firefox 4?

The short answer is that the new Firefox 4 is going to look more like Google Chrome. While we’re not suggesting Mozilla is ripping off Chrome, it’s hard to ignore a good idea when you see one, and Firefox 4 has seen several good ideas in Chrome.

Firefox's new add-on manager is rather Chrome-like. (Click for larger)

Firefox's new add-on manager is rather Chrome-like. (Click for larger)

One of the most obvious changes in the current Minefield, as Firefox nightly builds are known, is the new Add-ons manager (see the embedded image), which, instead of opening a new window or panel as the current version does, now appears as an inline page called “about:addons.” This is very much like Chrome’s “Extensions” page.

Firefox 4′s revamped add-ons page also has some new features, like support for Personas (simple Firefox themes) and Jetpacks, browser extensions built with Firefox’s new add-on framework. The new Jetpack add-on system lets developers write extensions for the browser using web standards that install without a restart. Jetpacks resemble what you’ll find in Google Chrome, which also utilizes a framework for lightweight extensions written in HTML, JavaScript, and CSS.

A recently proposed redesign for Firefox 4 puts tabs above the URL bar, also very Chrome-like. The “tabs on top” change is not yet available by default in Minefield builds (you have to go into the “View” menu and select it as an option), and it’s possible the idea will be abandoned before it reaches the final browser design. Either way, Firefox users will have the option of which design they want to use.

However striking the similarities, Firefox 4′s resemblance to Chrome is only skin deep. Under the hood, Firefox 4 is a radically different beast, both from Chrome and from its Firefox predecessors.

The biggest change is the all new HTML parser. It replaces the existing Gecko parser, which dates from 1998. The HTML parser is the last remaining unchanged chunk of Gecko, the underlying engine that powers Firefox. The revamp promises to make Firefox faster and, perhaps more importantly, compliant with the emerging HTML5 standard.

Other new features to expect in Firefox 4: speed improvements in page rendering times — already noticeable in the Minefield build — as well as the ability to use SVG and MathML inline in HTML5 pages. There are also huge speed boosts for innerHTML calls (common on JavaScript-heavy pages) and fixes for dozens of long-standing parser bugs.

For the full details on what the new parser means for the Gecko project, along with Firefox, be sure to read project lead Henri Sivonen’s post on the Mozilla hacks blog.

It’s important to remember that, while Firefox nightly builds do offer a glimpse of what’s coming, many of Mozilla’s plans (and certainly the UI designs) are still in flux. It’s possible that a great deal of this stuff will change before the final code ships.

We don’t recommend using Firefox nightlies as your primary browser. There are bugs, and it will crash. However, if you’d like to help Mozilla find and squash bugs, head over the nightly builds page and grab the latest version.

If using bleeding-edge, pre-release technology isn’t your thing, fear not. Mozilla estimates the first beta builds of Firefox 4 will be available in June 2010.

See Also:

Tags: , ,
File Under: APIs, Programming
May
12
2010

Google Moderator API Lets Your Apps Ask Questions

By

moderatorandroidGoogle has announced a new API that lets third party code tap into the company’s Moderator service. Google Moderator is designed to help collect questions from users — questions for live speakers from meetings, conferences, Q&A sessions and the like.

The new Moderator API allows outside apps to access, update, and participate in Google Moderator through custom interfaces.

For the launch, Google showcased a gadget for Google Wave that will be available at the upcoming Google I/O conference, allowing attendees to ask questions. A Google engineer also developed a Moderator app for Android and there’s also a cool Maps mashup that plots questions for the White House on a Google Map.

The API offers hooks into standard Moderator events, allowing third party apps to create new Moderator topics, ask questions and cast votes on behalf of the currently authenticated user. Even better for conference organizers and speakers on stage, the API allows apps to aggregate votes, making it easier figure out which questions are most important to your audience.

If you’d like to know more, head over to Google Moderator’s new API page where you’ll find the full details on the new API along with some sample applications.

See Also:

Tags: , ,
File Under: HTML5, Web Standards
May
11
2010

Where on the Web Is HTML5?

By

HTML5 does way more than video: Vimeo's Flash-free player showing a clip by Maxime Bruneel.

HTML5 does way more than video: Vimeo's Flash-free player showing a clip by Maxime Bruneel.

Unless you’ve been off snorkeling in the Alps, you’ve probably heard all the recent hubbub about HTML5 and its ability to replace Flash as the web’s default video player.

But HTML5 is much more than a hopeful successor to Flash’s web-video crown. In fact, watching a video without a plug-in only scratches the surface of what HTML5 offers.

HTML5 is the next generation of HTML, the language of the web. More than just a markup syntax like its predecessors, HTML5 provides a new set of features designed to make modern web applications work more like desktop applications.

The key features in the HTML5 stack: native video and audio playback, animated graphics, geolocation, hardware acceleration for in-browser events, the ability to keep using a browser-based app even if your internet connection drops, the ability to store application data on your local machine, dragging and dropping of files from the desktop to the browser, and the addition of semantic markup on pages, making them easier for both machines and humans to understand.

Each of the major browsers supports different pieces of HTML5 right now, and we expect to see all browsers on the same page in a year or two. You might think, given variances in browser support, that no one is using the future of the web. But you’d be wrong. HTML5 is everywhere you turn. In fact, some of our favorite web apps are making heavy use of HTML5 — to paraphrase William Gibson, the future of the web is already here, it just isn’t evenly distributed yet.

Continue Reading “Where on the Web Is HTML5?” »

Tags: , ,
« OLDER POSTS