Archive for August, 2009

File Under: Visual Design, Web Basics
Aug
24
2009

Complex Web Layouts Made Easy With New CSS3 ‘Flexible Box Model’

By

While HTML5 has been getting most of the attention lately, CSS 3, the other half of the web developer’s toolkit for next-generation web pages has been progressing as well.

Although the CSS Working Group has taken a fair amount of flack from the development community over the years, despite the Working Group’s lack of transparency and refusal to engage the community, the actual implementers — Apple, Mozilla, Opera and Google — continue to push CSS 3 toward the mainstream.

One of the more interesting aspects of CSS 3 is the new Flexible Box model spec which essentially allows you to define how unused portions of block level elements are handled. Sound confusing? Well, initially it can be. Fortunately, Alex Russell of Dojo fame has put up a nice guide to using the new flexible box model.

Essentially, two new CSS 3 selectors, hbox and vbox, allow you to easily center an element within its parent element. Then, as the spec says, “unused space can be assigned to a particular child or distributed among the children by assignment of ‘flex’ to the children that should expand.” In other words, you can make some child elements flexible and others fixed, which makes for considerably more complex layouts using only a fraction of the code you’d need to do that using pure CSS 2.

One thing to keep in mind: selectors like hbox and vbox are not universally supported yet, so if you need everything to work in IE, this method is off limits. However, hbox and vbox do work in Gecko and Webkit, which means these tricks will work just fine for Safari, Firefox and Chrome. Opera is only progressive browser missing from the list.

As Russell points out in his write-up, while universal support is still a ways away, these techniques could be used in mobile interfaces where Safari and Chrome are prevalent.

See Also:

File Under: Software & Tools
Aug
24
2009

Reach Out and Touch the Web With Firefox’s Coming Multitouch Support

By

Mozilla has revealed it is working on a new set of touchscreen tools for the Firefox browser.

The software maker’s multitouch Firefox project is still in its infancy, but the goal is to eventually offer web developers a way to tap into a new multitouch support structure to create online games and alternative touch-based user interfaces for web apps in Firefox.

At the moment, there are no hard and fast plans regarding exactly when multitouch support, which would be accessible through new APIs, might land in Firefox. The current goal calls for the new tools to arrive in Firefox 3.6, which is due later this year.

Touchscreen interfaces are gaining in popularity industry-wide — phones, netbooks, even some desktop PCs are starting to offer touch-sensitive screens. Windows 7, just a couple of months away, will offer even greater support for touchscreen hardware. Of course, the touchscreens only work if the software you’re using understands the input it’s receiving. In some cases, the OS itself provides those multitouch hooks (like on the iPhone), but even then software needs to adapt and use the new inputs.

The result is a computing environment where some of the applications are touch-sensitive and others are not, and Mozilla doesn’t want Firefox to be left in the cold in that regard.

A browser that can accept events from a touchscreen would give web developers a whole new set of of events to work with. Instead of just “onclick” and or other mouse events, multitouch software would be able to understand events like “ontouch,” “ontap” or something similar. Once those events are made available though, for developers, the sky’s the limit.

These enhancements might mean more work for developers, but they also open up some very cool possibilities for new web apps and games. Check of the video below from Mozilla intern Felipe Gomes that shows off a demo of some prototyped multitouch support for Firefox in Windows 7.

Multitouch on Firefox from Felipe on Vimeo.

Perhaps the most interesting part of the project is that web developers will be able to detect multitouch devices through CSS media queries and serve entirely different stylesheets geared at multitouch interfaces. Think @screen, @print and @touch stylesheets.

Mozilla also recently announced that it was adding support for orientation events to the development trunk for the Firefox browser. This would allow Firefox to accept input from accelerometers. Web apps would be able to manipulate the page layout based on which way the screen is turned by using a JavaScript API. Right now, the only non-phone hardware that has an accelerometer is the MacBook Pro, but more laptops should have them soon.

See Also:

File Under: Blog Publishing, Software & Tools
Aug
21
2009

WordPress.com Rolls its Own URL Shortening Service

By

In what we’re hoping is the beginning of a trend, WordPress.com has announced a new built-in URL-shortening service for all of its hosted blogs. Now, when you create a post on your WordPress.com blog, you’ll see an option to create a short URLs using the new wp.me domain.

Publishers using the self-hosted version of WordPress will be able to use wp.me short links if they are running the official stats plug-in.

The new wp.me short links are coupled directly to the canonical URL and can be found in the headtags of any blog hosted on WordPress.com. That means, unlike outside URL shortening services, as long as WordPress.com is around, your shortened wp.me links will work. And if WordPress.com goes under? Well, it doesn’t matter because the canonical link will go with it.

As for the actual URL shortener, it’s pretty basic with no real stats tracking or other services like those offered by bit.ly and tr.im. WordPress founder Matt Mullenweg does mention in his announcement that if your post’s slug is short enough, it’ll be used for the wp.me URL. Otherwise, a random, unique key is used.

If you’d like to start using wp.me links for your WordPress hosted blog just click the new “Get Shortlink” button. Also note that if you’re logged in to WordPress.com you can get the shortlink for any page, just click the “Blog Info” menu in your admin bar.

Short URLs seem a necessary evil at this particular moment in the web’s history. While we’re not going to lie and say they’re a good idea, if you have to use them we’d suggest looking to your publishing platform rather than an outside service. Hopefully more publishers and publishing tools will follow WordPress.com’s lead and start offering their own URL shortening tools.

See Also:

File Under: Multimedia, Software & Tools
Aug
20
2009

The FSF Offers Web Video Publishers a Helping Hand

By

Wondering what’s happening in the world of free, open-source video on the web following this summer’s browser codec support meltdown?

The folks at the Free Software Foundation have ascended the dias to give us a broad update on the status of open video in the browser and the likelihood of seeing the widespread proliferation of plugin-free video experiences any time soon.

The Foundation’s report cites recent browser share data showing that a full 24% of the web can view Ogg Theora videos embedded in HTML5 web pages right now. But the real revolution, according to the FSF, doesn’t just involve watching a video on Dailymotion, Archive.org or YouTube without the Flash plug-in. It involves actually publishing those videos yourself, on your own site, without the need for any intermediary content hosts.

There are some “tricky” things you’ll need to do before hosting your own videos, which the FSF outlines:

  1. Edit your .htaccess file so your mime types will be set correctly and your videos will display properly.
  2. Enable others to link directly to your hosted video file, as they would an image.
  3. Set fall-backs for browsers that don’t support Ogg Theora playback using the <video> tag. The FSF recommends a short-term workaround for IE and Safari of using Cortado, a video wrapper written in Java.

The group also provides a set of instructions for enabling your visitors to upload their videos, and how you can re-encode people’s videos using free tools built on the Theora codec.

Photo: Forcery/Flickr

See also:

File Under: Blog Publishing
Aug
20
2009

Let Google’s Matt Cutts Up Your SEO Mojo

By

People in the SEO business consider Google’s Matt Cutts to be the grand poobah numero uno of search. Like a Jedi master, he is both extremely powerful and filled with knowledge about the universe.

Lucky for us, he’s also very much into sharing that knowledge and power.

No matter how many books, articles and tutorials you’ve read about search engine optimization, you should watch this video. It’s a recording of a talk Cutts gave at this year’s WordCamp — an unconference for WordPress users. It’s funny, super-informative and just over 45 minutes long.

Thanks to Barry Schwartz, who posted this to Search Engine Land earlier today.

« OLDER POSTS