Archive for May, 2011

File Under: HTML5, Web Standards
May
17
2011

Microsoft Offers a Guide to Using HTML5 Audio

By

While the HTML5 video element gets the lion’s share of attention because of its potential to eliminate the need for Flash on popular sites like YouTube, the HTML5 audio element is equally useful. Like <video>, <audio> allows you to embed files in your page without the need for Flash or other plugin-based players.

The IEBlog recently posted a nice overview of how to use the <audio> element in your pages. Covering everything from the basics of embedding a file to more advanced topics like preloading, looping and syncing audio files; the post makes a great introduction to the world of the HTML5 <audio> tag.

As you would expect, the specifics of the tutorial target MP3 files, the primary audio codec supported in Microsoft’s IE 9 (and the coming IE 10). Firefox and others do not support MP3 out of the box, so check out this post in the MSDN library for more info on embedding multiple audio file formats in a single tag. Mark Pilgrim’s Dive Into HTML5 also has a great overview of embedding multiple files (Pilgrim’s tutorial is primarily concerned with video, but he covers audio in passing).

Also note that not everything list in the IEBlog post works in every browser, for example the autoplay value on the audio tag does not seem to work on Mobile Safari (some might consider that a feature). There’s also no mention of a fallback for older browsers that don’t support <audio> at all. Still, it’s nice to see Microsoft encouraging developers to embrace the new HTML5 audio tag.

Once you understand the basics of how the audio tag works, it’s well worth checking out pre-built solutions like MediaElement.js, which make it easy to target every web browser, including those that don’t understand the <audio> tag.

See Also:

Tags:
File Under: CSS, JavaScript, Visual Design, Web Basics
May
17
2011

Improve Your Website’s Typography With Kern.js

By

Web typography used to be something of an oxymoron, but recent browser advances and tools like Typekit have helped bring web typography out of the dark ages with custom fonts. Thanks to JavaScript libraries like Lettering.js you can tweak those custom fonts — targeting specific words or letters — and adjust them to your liking.

Lettering.js even makes it possible to do custom kerning on the web. Kerning refers to the space between characters in proportional width fonts. CSS has long offered the letter-spacing property, but because it applies to an entire element — for example an h2 tag — what you’re really doing with letter-spacing is adjusting the tracking.

To actually control kerning you need to target each letter individually. Because Lettering.js can wrap each letter in your text with span tags, you can then target each span separately, adjusting the spacing of individual letters, or, kerning.

But, handy as Lettering.js is, tweaking the letter-spacing, hitting refresh, tweaking some more and so on is still a rather tedious way to improve your kerning. That’s why designer Brendan Stromberger created the Kern.js JavaScript bookmarklet. Used in conjunction with Lettering.js, Kern.js allows you to adjust kerning by simply selecting and dragging letters (or you can use the arrow keys). Kerning adjustments can be made in pixels or ems, so even you if you have a liquid layout there’s no reason you can’t get in on the kerning fun. Once you’ve got your kerning looking the way you’d like, just hit the “finish editing” button and Kern.js will spit out the necessary CSS to apply.

Kerning is admittedly a somewhat nerdy pursuit in a field that’s already pretty nerdy to begin with, but if you’ve developed an obsession with good looking typography, you know that there’s more to it than just dropping in some Typekit fonts. Thanks to Lettering.js and Kern.js, you can finally improve kerning on the web without the tedium of endless page refreshes.

See Also:

Tags:
File Under: Browsers, JavaScript, Multimedia
May
16
2011

Google Taps Danger Mouse to Show Off the Power of WebGL

By

Google has launched a new web-based movie experiment designed to showcase the power of WebGL-based animation.

Chris Milk, the director behind last year’s experiment, The Wilderness Downtown, which featured music by Arcade Fire, is back with a new interactive film, this time in conjunction with Danger Mouse. The new 3 Dreams of Black film/experiment is based on a song from Danger Mouse’s new album Rome, written with Italian composer Daniele Luppi and featuring Jack White and Norah Jones.

Head on over to the Rome website to check it out. While WebGL works just fine in Firefox, Chrome and Opera, in our testing 3 Dreams of Black was smoothest in the latest stable version of Chrome.

Unlike The Wilderness Downtown, which took some input (the address of the house where you grew up) and then created a customized, but static, experience, 3 Dreams of Black is considerably more interactive. At various points in the new film you can pan the camera around the scene and Google has made it possible to upload your own 3D models into the movie.

As with the previous experiment, Google has made the code available for those that would like to see how it was made. 3 Dreams of Black is entirely open source, and the project is hosted on Google Code. The code is, in the words of the developers, “a bit of a mess,” but hey, at least it’s available.

See Also:

File Under: JavaScript, Web Basics, Web Services
May
13
2011

Build a Custom Site Search Engine With ‘Tapir’

By

If you’ve switched from a dynamic publishing tool like WordPress to a simpler, static site — whether to take advantage of cheap Amazon S3 hosting, or because you want to publish from flat files, without a database — there’s a few things you may be missing.

Some content is necessarily dynamic. If your site is just flat html files with no database behind them, there’s no easy way to build comments, contact forms or built-in search indexes. Luckily the web has a few solutions. For comments there are JavaScript solutions like Disqus or IntenseDebate, and contact forms can be built with Wufoo, but search is a little more difficult.

You could use Google’s Custom Search Engine tools, but then you’ll need to display things on Google’s terms (including a logo). Yahoo has a similar offering, but its results are often sub-par. The lack of search options for static sites led developer Jeff Kreeftmeijer to create Tapir, a JSON search API that indexes content from your site’s RSS feed.

Designed with static publishing systems in mind (like the popular Ruby on Rails tool, Jekyll), Tapir handles search through RSS and JavaScript without the overhead of a database on your own server. Tapir offers a JSON-based API and relies on Tire behind the scenes (which is powered by Elasticsearch, which in turn is powered by Lucene).

To use Tapir all you need to do is write a simple JavaScript-based search form, query the Tapir index for your site and then parse out the results to display for your visitors.

Tapir will parse and store the RSS feed you supply roughly every 15 minutes. For older posts (i.e. posts already long gone from your RSS feed) you’ll need to use the API to send over the data — something of a pain, but at least it’s a one-time pain.

If you’d like to give Tapir a try, just head over to the site, sign up for a token and read through the basic API docs for details on how to implement your search engine. The Tapir website says that sample code and better reference materials are coming soon, along with a JQuery plugin[Update: As Tapir creator, Kreeftmeijer, notes in the comments below, the JQuery plugin is now available].

See Also:

Tags:
File Under: HTML5, Multimedia, Web Apps
May
12
2011

Angry Birds Attacks Web … Web Wins

By

Angry Birds, currently one of the most popular games for iOS, Android and other platforms has made the leap to the web. Rovio, the company behind the game, has unveiled a web-based version of Angry Birds at Google’s I/O conference in San Francisco.

You can install the new Angry Birds for the web as an app in Google’s Chrome browser, or just play from the URL, chrome.angrybirds.com, which works just fine in any modern web browser. Just don’t hit that link if you’re planning to get any work done today.

Behind the scenes, the web incarnation of Angry Birds is powered primarily by HTML5. However, if you happen to have ditched Flash, you’ll notice that Angry Birds on the web won’t work.

What’s interesting is that the offending code appears to use gwt-voices, a cross-browser audio shim from Google. In theory gwt-voice only falls back to Flash when needed, but using the Aurora release of Firefox brings up a “You need to install Flash Player” message for Angry Birds (most likely because Firefox does not ship with mp3 support).

Calling Angry Birds an HTML5 app, is, in that regard, somewhat of a stretch.

Still, the primary rendering and logic of the game does use HTML5 elements like canvas, and HTML5 APIs like localStorage. The latter is interesting because it makes Angry Birds on the web hackable.

As per Rovio’s releases on other platforms, Angry Birds for the web offers in-app purchases for additional playing levels. But because Angry Birds uses the localStorage API, a clever dose of JavaScript will, at the time of writing, unlock the extra levels sans payment.

Welcome to the web, Angry Birds, where everything is hackable.

See Also:

Tags:
File Under: Browsers
May
11
2011

Install Google Chrome Frame Without Admin Privileges

By

Google has some good news for those of you stuck using Internet Explorer 6, 7 or 8. The company’s Chrome Frame technology, which injects the Google Chrome rendering engine into Internet Explorer, can now be installed without needing admin privileges in Windows.

For now the new features are only in the experimental dev channel, but once this build has been stabilized the new features will roll out to the beta and final release channels.

While it’s true that simply switching web browsers is a far better solution than using Chrome Frame, for those who can’t switch browsers because they’re stuck in corporate IT environments where old versions of IE still reign supreme, Chrome Frame remains the only real solution. Of course such environments are also precisely the sort of places where users can’t install their own software, which is why Google has eliminated the need for admin rights to install Chrome Frame.

Triggering Chrome Frame is left up to individual sites, which must add a meta tag to their pages to check for Chrome Frame.

For more info on what’s new in the latest release of Chrome Frame, check out this video from Google’s ongoing I/O conference in San Francisco:

See Also:

Tags: ,
File Under: APIs, Blog Publishing, Web Basics
May
11
2011

Speed Up Your WordPress Site With Google’s New Page Speed API

By

Google’s Page Speed testing tool, which recently went from a browser add-on to a web-based tool, now sports a new API. The Page Speed Online API allows outside applications to send URLs to Page Speed and get back a list of things the site developer can do to speed up the page in question.

If you’d like to try it, head over to the new documentation page and request an API key. Sample apps include using the Page Speed Online API to display suggestions for speeding up sites or even combining the API with the Google Charts API to show a visual breakdown of the page’s resources.

For a more practical example of how the Page Speed Online API can help out your site, check out the latest version of the W3 Total Cache plugin for WordPress. If you’re not already using W3 Total Cache in your WordPress installation, we highly recommend you install it, especially now that the plugin taps into the Page Speed API. W3 Total Cache now sends your pages to the Page Speed Online API and then offers Page Speed suggestions, right in the WordPress dashboard.

See Also:

Tags: ,
File Under: JavaScript, Web Services
May
10
2011

Speed Up Your Website Using CDN JS

By

One of the great things about using a popular JavaScript library like JQuery or Dojo is that Google offers a content distribution network and loading architecture, which means the scripts load very quickly. But what about smaller JavaScript libraries?

That’s where CDN JS comes in. The newish site offers CDN hosting for less popular, but still useful JavaScript libraries. The site uses Amazon CloudFront, along with Amazon S3 for DNS, making it, in all likelihood, faster than serving the same scripts off your own server. You can check out the uptime stats for CDN JS on Pingdom.

CDN JS doesn’t have everything, but they do have one script many developers use all the time these days — Modernizr. If there’s a library you’d like to see hosted, be sure to let CDN JS know.

We’d like to see the site make it possible to combine scripts — say, load Modernizr and respond.js (not currently available at all) — into a single, minified script, but even as it stands, loading two scripts from a CDN is often faster than a single script from your own server.

See Also:

File Under: Browsers, CSS, Web Basics, Web Standards
May
10
2011

Adobe Envisions Brave New World of Web Layouts With ‘CSS Regions’

By

The CSS Regions Galaxy Tab demo

It’s cold here in the Webmonkey offices, Adobe has unveiled a web browser. No, Adobe isn’t really getting into the web browser game, but it does have a few tricks it would like to show off to the world. Adobe’s new demo web browser exists solely to demonstrate the company’s proposed CSS Regions layout tool.

If you’d like to check out the demo browser, head over to Adobe Labs and download a copy. Be sure to open up the included sample pages to see how the HTML and CSS is structured.

Adobe has been working on CSS Regions for some time, trying to develop a set of CSS layout tools that make it easy to build complex, print-style layouts on the web — think text that flows around circular regions, or text structured into shapes. If Adobe can convince browser makers and the W3C to get onboard with the idea, web design might be about to make a huge leap forward. Or backward, depending on how you look at it.

Adobe’s CSS Regions proposal is a back-to-the-future effort to bring some of the layout tools print designers have enjoyed for years to the web.

Typography on the web has improved by leaps and bounds since the dark days of the blink tag and six universal fonts, but it’s still a long way from ideal. Sure there are great ways to serve custom fonts, and you can even use JavaScript libraries like Lettering.js for even more control over your layout. But when it comes to the flow of text around images, pull quotes and other block level elements, well, web typography falls apart.

While web developers have hacked together grids and other print-style layout tools for years, such tools are essentially hacks and limited in their capabilities. But that will change in the near future. The W3C is currently toying with no less than four new grid-based standards designed to handle multi-column text, wrapping text around images and other fancy layout techniques. We’ve looked at the Flexible Box Model, Template Layout (based on Mozilla’s XUL syntax), and Grid Positioning modules before, but so far none are finalized.

Adobe’s CSS Regions is the new entry in the list of layout schemes under consideration. Adobe submitted its CSS Regions proposal to the W3C early this year and it has subsequently been split into two separate but related drafts, the CSS Regions Module Editor’s Draft and the CSS Exclusions Module Editor’s Draft.

CSS Regions shares some similarities with the other proposals (and from what I can tell would play nice with them if multiple proposals end up becoming finalized specs), but goes a good bit further, by abstracting sections of an HTML page into “regions.”

Regions can be both positive and negative space. In other words, you can write CSS rules to flow text into a region — say, as below, a pie graph — or around a region (as in the image of Arches National Park at the top of this post).

Inserting text into regions

Among the interesting layout tools in the CSS Regions proposal are Story Threading, Region Styling and the arbitrary shapes and exclusions concept. Story Threading allows text to flow in multiple disjointed shapes (not just columns) which you can define in CSS and HTML. That means you could easily flow two side-by-side columns of text around an image or a pullquote the way print magazines often do.

The second interesting element is Region Styling, which allows content to be styled based on the region it flows into. For example, if the first few lines of your text fall into one region, you could style it with a different font than the rest, which falls in a different region. Curiously, this part of the proposed Regions spec is not currently implemented in Adobe’s demo browser.

The arbitrary content portion of the draft spec is what allows the layout shown in the screenshots above — flowing content into or around arbitrary shapes.

Lest you think that Adobe is simply trying to improve the web — which may well be true — nevertheless, it’s worth bearing in mind Adobe’s own agenda. We suspect it’s no accident that the company has used WebKit to power the CSS Regions testing browser. WebKit is, after all, the engine that powers the iPad’s web browser.

With Apple banning Flash from its iOS devices, Adobe has little in the way of iPad-friendly tools to offer its big magazine clients. Given that publishers are betting heavily on the iPad’s ability to save their business model, the more iPad tools Adobe can offer, the happier magazine publishers will be. By rolling CSS Regions into WebKit for a demo, Adobe is already one step closer to a toe-hold on iOS devices.

Still, in this case, assuming the W3C pushes forward with the Regions spec, and that browser makers include support in future releases, what’s good for Adobe may end up being good for the web as a whole.

Of course whether or not multi-column layouts on the iPad (or any other web browser) are a good idea is open to debate. Multiple columns combined with scrolling often makes for a reading nightmare. Certainly in the hands of poor designers the results will be ugly, but that doesn’t mean the tools themselves are to blame.

See Also:

Tags: ,
File Under: JavaScript, Web Basics
May
5
2011

Speed Up Your Site With Google Analytics New Page Speed Tools

By

Google has announced a new tool for Google Analytics — the Site Speed report. The new speed report measures page load times across your website, offering an easy way to see which pages could use optimization and which are already fast.

While the new page speed tool is available to all Google Analytics users, you’ll need to opt-in and update the Analytics JavaScript snippet in your webpages. To update the code on your site, see the Google Analytics help page.

Chances are — if you’re a good Webmonkey — you’re already testing your page load times with YSlow, Google’s Page Speed site, Web Page Test and other optimization tools. What makes Google Analytic’s offering a bit different is that abstract numbers, like how long it takes to load a page, are correlated against other numbers, like the percentage of exits from that page. It’s one thing to know that your online store landing page is loading a bit slowly, but it’s even more useful to know that the slow load time is actually driving customers away.

Once the new Analytics code is running on your website, the Site Speed report will rank your pages from those with the highest latency to those with the lowest. Site Speed will also list all of the following information:

  • Avg Page Load Time — the average amount of time (in seconds) it takes that page to load, from initiation of the pageview (e.g. click on a page link) to load completion in the browser.
  • Pageviews — The actual number of times the page was viewed for the selected date range.
  • Page Load Sample — The actual number of pageviews that were sampled to calculate the average page load time.
  • Bounce Rate — As for Pages report, the percentage of views to this page in which this page was the only one viewed for the session.
  • % Exit — As for the Pages report, the percentage of views to this page in which this page was the last page in the session.

Keep in mind that you’ll need at least several hundred pageviews before this information really begins to tell a useful story about your site. For smaller websites that may mean waiting a few days before you get a true picture of your load times.

As I mentioned in the write-up about the new Opera Dragonfly, there’s really no such thing as too many developer tools. The same applies to speed testing tools, and Google Analytic’s new offering is indeed handy.

For those that eschew Google in favor of self-hosted analytics — like the popular Mint or good old AWStats — there are self-hosted page speed trackers available as well, such as Yahoo’s Boomerang suite (BSD license).

See Also:

Tags:
« OLDER POSTS