Et ben… Moi qui pensais rédiger chaque mois un article regroupant les meilleur liens sur lesquels je tombe, je viens de constater que le dernier (et aussi le premier) posté dans cette rubrique date de… Juillet.
Allez j’ai une excuse, pendant ce temps, je suis parti plusieurs mois en roadtrip à l’autre bout du monde…

Depuis mon retour en France, j’ai repris les choses sérieuses et ai de nouveau le loisir de glaner ci et là de bonnes ressources pour le boulot (et pour ma culture).

Voici donc ma sélection pour le mois de Février.

Isotope

Isotope est un plugin jQuery fantastique. Il permet de réorganiser à la volée l’affichage d’éléments au sein d’une page Web en fonction de différents critères qu’il suffit au développeur de définir (ordre, type, taille de l’écran…).

Je vais très prochainement l’intégrer à l’un de mes projets pour faire un joli filtrage dynamique d’items.

URL : http://isotope.metafizzy.co/

Osez créer un site HTML5 et CSS3

Raphael Goetter du site Alsacréations nous démontre dans un très bon article qu’il est possible aujourd’hui de développer un site en HTML5 et CSS3. Il explique quels compromis il a dû faire pour les anciens navigateurs et quelles sont les parades pour ne pas rendre son site complètement inaccessible sur ces derniers.

Pour ma part, c’est cet article qui m’a convaincu de développer ma prochaine appli web en HTML5, malgré la part encore très importante de personnes utilisant IE6, 7 et 8.

URL : http://www.alsacreations.com/article/lire/947-osez-creer-site-html5-css3.html

Jquery Mobile DateBox

Enfin, et parce que je m’intéresse tout particulièrement à l’actualité concernant jQuery Mobile, je vous signale l’apparition d’un petit widget pour vos webapp mobiles, vous permettant de renseigner un champs date de manière simple et efficace.

Une simple ligne de code dans votre template et le tour est joué :

<input name="somedate" type="date" />

URL : http://dev.jtsage.com/jQM-DateBox/

Formalize

Formalize est un plugin jQuery (également disponible pour d’autres frameworks JS (Dojo, ExtJS, MooTools, Prototype et YUI) qui facilite la tâche du développeur lors de la création et de la mise en forme des formulaires. Il offre une mise en page standardisée sur tous les navigateurs de vos forms et offre le support de certaines propriétés CSS3 non implémentées dans les anciens navigateurs.

URL : http://formalize.me/

Démo : http://formalize.me/demo.html

Quovolver

Grâce à ce plugin, en une seule ligne de code, présentez joliment et efficacement un ensemble de quotes au sein d’un même bloc.

$('blockquote').quovolver();

URL : http://sandbox.sebnitu.com/jquery/quovolver/

Samedi dernier, la version mobile du célébrissime Framework Javascript jQuery est sortie en version Alpha. Assez semblable à ce qu’offre jQTouch, jQuery Mobile s’annonce comme une future référence pour les développeurs web qui veulent adapter leur site aux navigateurs des différents smartphones du marché.

Au menu, support cross-browser (iPhone, Androïd, Blackberry, …), graceful degradation pour les navigateurs qui n’implémentent pas encore toutes les propriétés CSS3 ou HTML5, animations et transitions du type iPhone, boîtes de dialogues et boutons prêts à être utilisés, gestion des thèmes et encore beaucoup d’autres choses très prometteuses.

Il est explicitement spécifié sur le site officiel de jQuery Mobile qu’il ne faut pas considérer ce framework comme un simple moyen d’adapter son site aux navigateurs mobiles puisqu’il peut très facilement profiter des fonctionnalités de PhoneGap pour créer de véritables clients lourds pour les différents Smartphones. Un bon moyen de coder une seule fois son application mobile pour la déployer ensuite sur les différents stores des constructeurs.

J’ai jeté un rapide coup d’oeil à l’application de démonstration qui s’annonce en effet très bien réalisée. Quelques bugs semblent persister mais je pense qu’ils devraient rapidement être résolus en fonction des retours de la communauté. Dès que j’aurai un peu plus de temps, je tâcherai de poster un petit tutoriel pour démarrer un projet symfony avec jQuery Mobile.

En attendant, n’hésitez pas à consulter le site officiel et surtout la démo en ligne de ce projet.

C’est une pratique assez récurrente chez les développeurs Web ou chez les web designers qui bloguent. Alors moi aussi je vais régulièrement (chaque mois) poster un article regroupant les ressources utiles sur lesquelles je suis tombé. Deux intérêts à cette démarche :

• D’une part pouvoir les retrouver le jour où j’en aurai besoin / re-besoin
• D’autre part, les partager avec vous amis lecteurs

Je crée donc pour l’occasion une nouvelle catégorie d’articles sur OvernetCity intitulée sobrement : “Ressources Utiles”.

Pour ce mois de Juillet, un peu de jQuery, un peu de symfony et un peu de développement iPhone sont au programme. D’ailleurs, cela risque d’être souvent le cas…

Interactive Photo Desk with jQuery and CSS3

Les démonstrations concernant CSS 3 et HTML 5 ont le vent en poupe depuis quelques mois. Il ne se passe pas une journée sans qu’un tuto complet soit posté sur un des nombreux blogs que je suis, montrant à quel point l’arrivée de ces deux langages et leur support par l’ensemble des navigateurs modernes va changer notre façon d’interagir avec une application Web.

Ici, c’est l’alliance du CSS 3 et de jQuery qui permet de réaliser un chouette bureau sur lequel s’entassent quelques photos. L’utilisateur peut les déplacer avec un résultat d’une fluidité étonnante.

A consulter avec un navigateur moderne évidemment.

http://tympanus.net/codrops/2010/07/01/interactive-photo-desk/

Minimalistic Slideshow Gallery with jQuery

Encore un tuto expliquant comment réaliser une mini gallerie pour afficher quelques photos. Celui-ci a le mérite d’être très clair et d’avoir un rendu vraiment pro.

Très facile à intégrer au sein d’une page existante !

http://tympanus.net/codrops/2010/07/05/minimalistic-slideshow-gallery/

Symfony 1.4 – Tri sur les colonnes étrangères dans l’admin generator

L’admin generator de symfony est un outil merveilleusement pratique qui permet de créer en quelques minutes un backend parfaitement fonctionnel et adapté aux besoins du client.

Néanmoins, je me suis souvent demandé pourquoi il est impossible sans mettre les mains dans le cambouis de faire un tri sur les colonnes persos dans la liste générée par le Framework. Chaque colonne est par défaut cliquable ce qui entraine un tri ascendant ou descendant de la liste en fonction de cette colonne mais ce comportement est indisponible dès que la colonne en question n’est pas une colonne native en base et fait, par exemple, référence à l’attribut name d’un objet récupéré via une relation.

Les développeurs experts symfony de l’agence Elao nous montrent comment modifier le comportement de l’admin generator pour que, justement, ce tri soit possible sur les colonnes non natives. Très utile !

http://www.elao.org/symfony/symfony-1-4-admin-generator-tris-sur-les-colonnes-etrangeres.html

Introduction aux Métadonnées RDFa, Microdata et Microformats

Je connais la technique depuis un moment mais n’ai pas encore eu l’occasion de la mettre en pratique au sein d’un projet. Ces métadonnées à destination des moteurs de recherche permettent de stocker de modifier la présentation d’une page au sein d’un moteur de recherche pour apporter de la valeur ajoutée à l’utilisateur. Les sites référençant des restaurants, par exemple, peuvent profiter de ces métadonnées pour afficher, directement au sein des résultats d’un moteur de recherche, la note associée à un restaurant sous forme d’étoiles.

Ces données sont de plus en plus utilisées et de mieux en mieux exploitées. Elles méritent donc qu’on s’y attarde un tout petit peu de manière à optimiser le référencement naturel d’une application web.

Cet article présente quelques exemples concrets d’utilisation de ces métadonnées et référence quelques liens utiles pour le développeur.

http://spyrestudios.com/real-world-microformats-rdfa-microformats-and-microdata-practical-examples/

Tutoriel complet sur les Microdata de HTML5

Quand on pense à l’HTML 5, on ne pense pas forcément immédiatement à Microdata. Et pourtant c’est également une des grandes nouveauté que ce nouveau langage nous apporte et à laquelle tout bon développeur se doit de s’intéresser. Ce tutoriel très complet permet d’aller plus loin que l’article précédent en se basant sur un exemple concret.

http://net.tutsplus.com/tutorials/html-css-techniques/html5-microdata-welcome-to-the-machine/

Comment intégrer Google Analytics dans son application iPhone en 7 minutes ?

Intégrer un script de tracking des visiteurs dans une application Web est aujourd’hui presque un réflexe pour le développeur. On peut faire la même chose pour une application lourde sur iPhone puisque l’API de Google est compatible avec plusieurs terminaux mobiles dont ce dernier.

Quel est l’intérêt ? Comment est-ce que ça marche ? Quels sont les pré-requis ? Autant de questions qui trouveront leurs réponses dans ce tutoriel très complet de iCodeBlog.

http://icodeblog.com/2010/04/22/how-to-integrate-google-analytics-tracking-into-your-apps-in-7-minutes/

Premiers pas avec iPhone Core Data

Ce tutoriel est une belle introduction au Framework Core Data de l’iPhone OS qui n’est pas très bien couvert par les livres que j’ai pu lire lors de ma formation au développement iPhone.

A parcourir pour comprendre quelles sont les possibilités offertes par ce Framework et surtout comment les mettre en oeuvre.

http://mobile.tutsplus.com/tutorials/iphone/iphone-core-data/

Afficher un flux RSS en temps réel avec XMPP

Comment fait Google avec son GTalk pour afficher les messages envoyés en temps réel sur sa page web, sans sacrifier les ressources serveurs avec des requêtes Ajax envoyée chaque seconde ?

C’est une question que je me suis souvent posé et à laquelle j’ai trouvé une réponse aujourd’hui grâce à un tutoriel très complet posté sur le site d’IBM. GMail, Gtalk, Google Wave font tous usage du langage XMPP dédié à la notification en quasi temps réel pour les applications web. A lire d’urgence si le sujet vous intéresse…

http://www.ibm.com/developerworks/xml/tutorials/x-realtimeXMPPtut/index.html

L’affichage d’une tooltip est l’un des besoins les plus récurrents pour un développeur Web. Le tooltip permet au développeur d’apporter une information supplémentaire à un élément de la page d’une manière esthétique et non intrusive.

Un tooltip pour quel besoin ?

Le tooltip permet d’afficher une information supplémentaire lors du survol d’une image, lors du passage sur le champs d’un formulaire. Il peut être associé à différents évènements sur n’importe quel élément d’une page, l’objectif étant de rendre la navigation plus claire et de déchargée la page d’informations superflues à un instant T.

Les solutions

De très nombreuses solutions de tooltip existent en Javascript. Comme je suis un grand fan de la bibliothèque jQuery, je vous propose de vous rendre sur cette page : http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/ qui donne un bon aperçu des Tooltip développés avec ce framework.

Ma solution préférée : jQuery Tools et son Tooltip.

Cette solution est très bien construite tout en restant légère (~5Ko). Il est possible de personnaliser l’animation de chargement de la tooltip, choisir sa position par rapport à l’élément déclencheur, y intégrer du texte mais aussi de l’HTML très simplement. Et tout le style est aisément modifiable dans la feuille CSS. Bref, que du bonheur !

Exemple de code

Le script :

<script type="text/javascript">
  $(document).ready(function() {
    $("#mon_image").tooltip({
      position: "center right",
      effect: "fade",
      opacity: 0.7,
      tip: '#tooltip'
    });
  });
</script>

Le code HTML :

<div id="tooltip">&amp;nbsp;</div> <img id="mon_image" title="Bahunet est un site de partage de cours génial !" src="http://www.bahunet.com/images/decoupe/logo.png" alt="logo Bahunet"  />

Et le CSS :

#tooltip {
  background-color: #000;
  border: 1px solid #fff;
  padding: 10px 15px;
  width: 200px;
  display: none;
  color: #fff;
  text-align:left;
  font-size:12px;
  box-shadow:0 0 10px #000;
  -moz-box-shadow:0 0 10px #000;
  -webkit-box-shadow:0 0 10px #000;
}

Je vous propose de consulter les différents exemples du site officiel et la documentation pour avoir plus d’informations et voir l’ensemble des possibilités offertes par ce plugin jQuery : http://flowplayer.org/tools/tooltip.html