Clearideaz, le portfolio d'Olivier Gorzalka, webdesigner sur Lille, Nord-Pas de Calais

webdesigner et intégrateur XHTML / CSS

Articles avec le tag ‘Javascript’

jQuery.eventManager, un plugin de gestion d’évènements

La méthode $.delegate de jQuery fonctionne sur le principe de la délégation d’évènements. La délégation permet notamment de pouvoir ajouter de nouveaux éléments dans le DOM dynamiquement (via Ajax par exemple) sans pour autant leur ré-attacher d’évènements préalablement défini. Elle assure également de meilleures performances.

Sur la plupart des projets, je m’amusais à déléguer des évènements à des objets globaux. C’est ensuite au moment de l’appel à l’évènement que je filtrais le type d’action à effectuer. C’est un exercice plutôt fastidieux…

J’ai donc décidé de créer un plugin jQuery permettant de faciliter la gestion d’évènement via delegate. Il suffit pour cela de créer un objet recensant les objets globaux, les évènements attachés, le filtre, puis l’action a effectuer.

Lire la suite

Détecter le support HTML5 du navigateur via Jquery

Le site Dive into HTML5 a publié récemment un article détaillant les différentes méthodes de détection de fonctionnalités HTML5 sur les navigateurs via Javascript.

Utilisateur régulier de jQuery, j’ai décidé de porter ces scripts au sein de la fonction $.support.

Voici la liste des tests possibles : audio, audioMp3, audioVorbis, audioWav, audioAAC, canvas, canvasTxt, command, datalist, details, device, formConstraints, iframeSandbox, iframeSrcDoc, autofocus, placeholder, color, email, number, range, search, tel, url, date, time, datetime, datetime-local, month, week, meter, output, progress, time, video, videoCaptions, videoPoster, videoWebM, videoH264, videoTheora, contentEditable, dragAndDrop, fileAPI, geoLocation, history, localStorage, microdata, applicationCache, eventSource, sessionStorage, svg, svgInHtml, webSimpleDb, webSocket, openDatabase, webWorkers, undo.

Vous trouverez une démonstration des possibilités offertes par le script sur cette page de test du support HTML5 de votre navigateur.

Si vous souhaitez par exemple tester le support du SVG, insérez la ligne suivante au sein de votre fichier Javascript :

$.support.svg // retourne false sur IE et true sur les versions récentes de Firefox

Le script est léger : 8ko en version source et 3ko en version minifiée.

Vous pouvez télécharger l’extend jQuery sur mon espace Github

N’hésitez pas à me signaler le moindre bug.

Édit : correction d’un lien

Du Parallax avec jQuery et CSS

Le scrolling parallax est une technique qui consiste a créer un pseudo-effet de 3D sur un environnement en 2D. Si vous avez déjà pu jouer aux premières versions de Sonic The Hedgehog, vous comprendrez de quoi je parle. Je me suis amusé, encore une fois avec JQuery, a créer un effet parallax sur une page d’accueil d’un site existant.

J’ai repris la page d’accueil de SilverBackApp.com qui utilise déjà un effet Parallax au redimensionnement du navigateur. La technique très subtile consiste a placer les différentes couches de fonds avec des background-position en pourcentage. En jouant justement sur ces valeurs relatives, on peut de ce fait créer un effet intéressant lorsque l’utilisateur redimensionne sa fenêtre.

En partant de cette base, j’ai décidé de rajouter une couche Javascript. Le but est de changer la position du fond en fonction de la position de l’image. Pour cela, on va juste récupérer les positions du pointeur et utiliser ces valeurs pour déterminer le positionnement (en pixel cette fois) des différentes images.

Lire la suite

Une carte Vélib grâce à l’API Google

Si vous habitez Paris ou si vous ne faites qu’y travailler (comme moi), vous avez surement déjà eu l’occasion d’utiliser le service Vélib. Le site officiel ou d’autres sites indépendants comme Roulib.fr proposent des cartes permettant d’afficher le nombre de vélos disponibles ou encore le nombre d’emplacements restants. Je vous propose de faire la même chose grâce à l’API de Google Map.

Le principe est simple. On génère en local un fichier XML à partir du fichier distant présent sur le site officiel Vélib via PHP. Une fois cette étape effectuée, on a plus qu’à charger le fichier xml à l’aide de Javascript.

La page de démonstration du script utilise le framework jQuery mais vous pourrez trouver dans l’archive une version en javascript pur et une autre version associée à l’autre framework Prototype (Merci d’ailleurs à Sunny pour son aide ;) )

Vous trouverez toutes les informations nécessaires dans les commentaires des différents fichiers javascript. N’oubliez pas d’aller générer une clé API Google Map sur le site dédié.

Pour pouvoir accéder à la carte et télécharger le script associé, rendez-vous sur la page de démo du script de carte Vélib. L’archive contient le script php pour générer les fichiers xml de la carte Vélib et des informations associées à chaque borne, les fichiers Javascript correspondants, la feuille de style CSS et les images requises.

Les hacks c’est pas bien !

La tentation de recourir à des hacks est grande lorsque l’on commence à se lancer dans l’intégration d’un site web. Lorsque l’on s’aperçoit que la page développée s’affiche différemment d’un navigateur à l’autre, on se dit très souvent que c’est le navigateur (Internet Explorer pour ne pas le citer) qui interprète le code ou la feuille de style n’importe comment.

Cette réaction est plus ou moins justifiée. Nous sommes tous conscients des lacunes du navigateur Microsoft et plus particulièrement des versions antérieures à la 7. Toutefois, ce n’est pas une raison pour charger sa feuille de style de propriétés invalides en prenant comme bouc émissaire le navigateur de Monsieur Redmond.

Une feuille de style doit, au même titre que le document XHTML, passer l’épreuve du validateur W3C. Ce n’est pas en insérant des « _width: » ou encore de « %margin: » dans votre CSS que vous pourrez vous vantez de faire un site au codage propre. J’irais même jusqu’à dire que les hacks sont bons pour les fainéants la plupart du temps.

Dernièrement, j’avais fais remarquer à un intégrateur remonté contre IE que notre boulot perdrait de l’intérêt sans ces soucis de compatibilité. Même si j’affirmais cela ironiquement, je trouve passionnant de découvrir pourquoi telle propriété ne fonctionne pas de la même manière d’un navigateur à l’autre et surtout, comment y remédier.

Lire la suite

Viva jQuery et mon livre de chevet !

Plus je m’intéresse à jQuery et plus je me rend compte des possibilités étendues de ce framework javascript. Je suis parfois bluffé par les effets visuels qu’il peut générer. Sur Dragon Interactive, on a presque l’impression de visiter un site à base d’animations flash mais il n’en est rien. C’est l’utilisation judicieuse des fonctions fadeIn() et fadeOut() qui donne cette sensation. Bon nombre de plugins viennent ajouter à ce framework d’autres fonctionnalités de la plus intéressante à la plus farfelue. Je suis récemment tombé sur le plugin jCycle qui permet des effets de transitions d’images assez intéressants.

De part l’intéret grandissant pour cette librairie javascript, j’ai décidé de casser ma tirelire pour m’acheter le livre Premières applications Web 2.0 avec Ajax et PHP de Jean-Marie Defrance et paru aux éditions Eyrolles. Ce n’est pas un ouvrage qui traite véritablement de la bibliothèque jQuery mais il consacre tout de même deux grands chapitres qui permettent d’apprivoiser la bête. A lire donc de toute urgence ;)

Pour en savoir plus :

Améliorer Internet Explorer (toutes versions)

Dean Edwards est un génie. Internet Explorer a toujours été réputé pour être un navigateur très en retard sur les autres. Un grand nombre de sélecteurs et de propriétés CSS ne fonctionnent tout simplement pas sous les versions inférieures à IE7. C’est là que Dean Edwards entre en jeu. Ce programmeur a conçu une véritable librairie permettant d’émuler par le biais de fonctions javascript, les fonctionnalités CSS 2 absentes de IE. A l’origine, son objectif était de contrer la pratique des hacks CSS qui rendent les feuilles de style invalides. Mais il ne s’est pas arrêté là en implémentant certains sélecteur CSS 3 dans le navigateur certifié Windaube. La dernière version sortie date de août 2005 donc je n’apporte pas une nouveauté, mais ce genre de trésor peut en intéresser un très grand nombre ;)

Vous pouvez télécharger l’ensemble des fichiers sur son site internet personnel.