L’année dernière, j’ai eu le plaisir d’animer un atelier sur UWA durant la dernière journée de Paris-Web, la meilleure conférence française sur les standards, l’accessibilité, les meilleures pratiques et la quality du développement web. Vous pouvez retrouver la présentation, la cheat-sheet et les photos sur cet article. L’équipe Paris-Web remet le couvert cette année, et l’évènement se déroule la semaine prochaine, du 13 au 15 novembre.

Faire un atelier n’est pas prévu pour cette année, mais j’y serai néanmoins présent pendant les deux premiers jours pour faire la promotion de notre plate-forme, distribuer des cheat-sheets et stickers à qui-veut, et répondre aux questions des intéressés.

Rendez-vous la semaine prochaine !

—

Last year, I had the pleasure to run a UWA workshop during the final day of Paris-Web, France’s best conference on standards, accessibility, best practices and quality in web-development. You can find slides, cheatsheet and pictures on this post. The Paris-Web crew is at it again this year, and the event will run next, from the 13th to the 15th of November.

While running another workshop is not on our slate this year, I will attend the conference during its first two days, in order to promote our platform, give away cheatsheets and stickers to those in dire need, and answer questions from the widget-eager crowd.

Let’s meet next week!

Share this post:

• First, a new, bigger search box
• Second, a whole new tool for creating widgets out of multiple feeds : the Widget Editor

Embiggen your search with an over-cromulent form!

The point of having an improved search form seems evident: rather than throwing popular or featured widget at the visitor’s face, with search as a side dish, we wanted to get the user in command of the Ecosystem, and let him decide what’s best for him, through searches.

That being said, the home page steal features the three classic, ever-useful sorting tabs: Featured widgets, Most popular widgets and Just arrived. More power to you!

Easily build a multiple-feed widget!

But the real deal behind this new improvement of Ecosystem is a second green button in the top bar, next to the usual “Submit widget” button – which lets you send our way your content (in the form of a UWA widget, a Flash file or an iCal file) to automatically register them into Ecosystem as widgets.

That second button is called “Create widget”, and is the result of an evolution of UWA feed widgets: the multifeed widget, and the tool to easily make some.

Once you click on that button, you’re taken to an options screen:

• On the left, a link to an old friend: the tool to create a widget out of any type of feed (RSS, Atom, RDF…) ;
• On the left, a link to the new tool, code-named ”Miso”, which is a whole new way of creating advanced feed-based widgets altogether.

The Multifeed Editor is very easy to understand, even more so if you’ve already used the Feed Editor. On the right is a preview of your widget, updated as soon as you change any value on the left. That left section is where you’ll decide how many feeds you want to put into that widget, and what you would like the widget’s header to look like: a simple colored background, or an image that you designed, complete with a cool background and your logo?

If you choose to upload your own image, the Multifeed Editor will let you crop it in order to fit the recommended 350*100 size: select the portion of the image (click the selector borders, or drag the selector around), and you will immediately see live how it turns out in your widget. Until you have validated the whole thing, cropping is non-destructive, and you can try it out as often as needed, until you find the perfect match. You might also want to choose a background color that fits with the image…

So there you go, folks: better tools for easy widget creation, and bigger search for easy widget findability.

Hope you will enjoy it! Let a thousand multifeed widgets bloom!

Share this post:

The Share tool is a handy way of letting users get the HTML code add any UWA widget on any website, be it a blog or anything that is displayed through a browser. The nice thing is that the user can set the initial size of the widget, and moreover have the widget auto-resize itself, along with other nifty interactions.

These interactions require trickery on our part in order to be transparent to the final user. As it is, the embed code used by the Share tool has a lot in common with the UWA-IFrame method, first and foremost because the widget is displayed through an IFrame in both methods.
Relying on iframe is both simple to implement and very secure, but it calls for clever code in order to have the iframe resize itself according to the widget’s size – resizing being one of many possible communication happening between the iframe and the iframed-widget. If the UWA widget needs a bigger or lower height, it sends a resizeHeight message to the page the features the iframe, which needs to handle that resizing code accordingly.

The trick here is to make container and contained talk to each other seamlessly, which is tedious because of browser’s security settings. IFrame communication was therefore not an easy task until the recent creation of the postMessage API. Defined by the fine folks behind the HTML5 specification, its scope is to greatly ease cross-window messaging. It has since been implemented in most modern browsers, such as Firefox 3, Opera 9.50, and Webkit nightlies. Internet Explorer 8 should also let developers use it. In these browsers, we can leverage postMessage in order to enhance the UWA-IFrame code.
Sadly, postMessage is too recent for the majority of users, who rely on older versions, and this we have to cater for them too: IE6/7, Firefox 2, Safari 2/3, Opera before version 9.50… For all non enabled postMessage browsers, we use a special trick, based on a local HTML proxy. This trick is made transparent to the final user, who do not need to know how the message is getting to his page.

While it is transparent to the user, the UWA-IFrame method has to make it explicit to the developer, by design. We have therefore updated the documentation about it with a new section about the local HTTP proxy, and trimmed down some lines here and added up some there. If you are using this method to include UWA widgets on your site, you should definitely take a look at it…

Share this post: