En décembre dernier, je travaillais sur un projet cool, le web design pour une agence brésilienne de conseil pour l’emploi. C’était un projet très agréable à réaliser, principalement parce que nous avions eu une totale liberté de créer et de proposer des fonctionnalités. Bien sûr, certaines de nos suggestions n’ont pas étés retenues pour la version finale, cependant on a fait, le widget.

Le widget web est un morceau portatif de code qui peut être installé et exécuté dans un code HTML distincts à base de page web par un utilisateur final sans avoir besoin de compilation supplémentaire. Il résulte de l’idée de réutiliser le code. Les autres termes utilisés pour décrire les widgets web incluent: gadget, badge, module, capsule, snippet, mini et flake. Les Widgets Web utilisent souvent mais pas toujours le DHTML, JavaScript, ou Adobe Flash.Wikipedia
Fondamentalement, ce que j’ai fait a été d’obtenir les données du flux RSS et le montrer de manière plus agréable l’utilisation de Flash. En d’autres termes, c’est une sorte de lecteur RSS.
Donc dans ce post, je vais vous montrer comment vous pouvez créer vos propres widgets en utilisant le fichier FLA que j’ai créé pour le widget Openjobs.

Un détail cependant, en tant que concepteur et je ne suis pas un réel programmeur, pour mon AS2 (ActionScript 2), le code ne sera pas le meilleur code jamais créé, mais si vous êtes un ninja AS et voulez contribuer avec un code de meilleure qualité, n’hésitez pas. En fait, ce serait génial d’avoir le widget AS3 plutôt que le AS2.

Design
Les widgets sont comme des bannières, mais ils fournissent plus d’informations. Pour ce widget j’ai suivis l’idée que nous avions utilisé sur la conception du site Openjobs, où il ya une personne titulaire qui ajoute des annonces, dans ce cas il donne une liste d’emplois disponibles.

Flash Customisation
Pour créer votre widget que vous n’aurez même pas à toucher au code. Il suffit de changer les éléments visuels et c’est tout. Ci-dessous vous pouvez voir les éléments de chaque couche.

Dynamique des éléments
Si vous souhaitez modifier la police ou la taille du texte il suffit d’éditer le « titre »(Title) et « boîte de description » (Description Box) des symboles dans la bibliothèque.

Le widget
Vous aurez à éditer le fichier swf du widget dans le serveur de votre site afin de le distribuer uniquement avec le code d’intégration. L’URL du flux doit être versée directement dans le code embed ainsi, changez simplement l’URL dans le paramètre d’alimentation. Ci-dessous vous pouvez voir le widget et le code.

<embed width= »220″ height= »210″ wmode= »transparent » src= »http://openjobs.com.br/images/goodies/widget.swf » allowfullscreen= »true » allowscriptaccess= »always » flashvars= »feed=http://feeds.feedburner.com/OpenJobsWidget »></embed>

widget.fla2 66.5 KB

A propos de l’auteur :
Mon nom est Fabio Sasso, je suis un graphiste/web designer de Porto Alegre, au Brésil et je suis le fondateur de Abduzeedo. J’espère que nous pourrons partager beaucoup d’informations, des conseils et des idées par le biais d’ Abduzeedo. Aussi vous pouvez me suivre sur Twitter ou mon site personnel à http://fabiosasso.com.