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

webdesigner et intégrateur XHTML / CSS

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

1 commentaire

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

Internet Explorer 9 sur la bonne voie

0 commentaire

Des débuts (très) difficiles

Internet Explorer 9, the fucking browserInternet Explorer a (très) souvent été la cible de critiques passionnées. En cause, son moteur de rendu (Trident) non conforme aux standards du web définis par le W3C et ses nombreux bugs.
La version 6 s’imposait de nombreuses années au sein du système Windows XP.

Microsoft décide de publier la version 7 de son navigateur qui sera en série sur le tout nouveau système, Windows Vista. Les améliorations sont nombreuses mais la firme Redmond persiste dans sa volonté d’imposer ses « standards ». Il intègre toutefois de nouveaux pseudo-sélecteurs CSS (IE6 ne supportant que les pseudo-sélecteurs affectés aux liens) et supporte enfin le format PNG alpha.
Problème, la plupart des utilisateurs de Windows XP ne migrent pas vers Vista, le système ayant une mauvaise réputation en terme de stabilité et d’ergonomie. Le passage vers IE7 prendra beaucoup de temps et encore aujourd’hui, IE6 dispose d’une part importante dans le pourcentage des navigateurs utilisés. Cette lente migration s’explique également par le fait qu’Internet Explorer 6 ne dispose d’aucun système de mise à jour automatique (à contrario de Firefox par exemple).

Lire la suite

Créer une galerie photo grâce à CSS3

2 commentaires

Avec l’arrivée des nouvelles propriétés CSS3 (dont la spécification n’est toujours pas finalisée…), il est devenu assez facile de créer des sites internet attrayants sans pour autant avoir recours à Flash ou à JavaScript.

Dans la démonstration associée à cet article, vous aller pouvoir visualiser quelques possibilités offertes par CSS3, voici celles que j’ai utilisées :

Le pseudo-selecteur :target

:target est un pseudo-sélecteur permettant d’accéder à un élément du DOM possédant l’id du lien référent.
En clair, si je clique sur un lien dont l’attribut href est égal à #test, la propriété de style a:target { background-color:red; } affectera un fond de couleur rouge à l’élément ayant pour ID #test.

C’est de cette manière que j’obtiens la méthode de sélection des images agrandie dans la démo. Pour IE qui ne supporte par cette propriété, j’ai bidouillé grâce à l’overflow. En clair, le cadre conteneur des images agrandies a pour attribut overflow, la valeur hidden. Il dispose en outre des dimensions exactes d’une de ces images. Au clic sur le lien de la miniature, l’image cible est directement appelée par le hash du lien.

Lire la suite

Astuce pour HTML5

0 commentaire

Comme vous avez surement pu le constater, il est possible en HTML5 d’encadrer des balises de type bloc par une balise de type lien inline de cette manière :

<a href="http://www.smashingmagazine.com">
  <h1>Smashing Magazine</h1>
  <h2>online magazine dedicated to designers and developers.</h2>
</a>

Le lien devient ainsi actif sur l’ensemble des balises bloc. Ceci évite d’insérer plusieurs fois le même lien.

Ce balisage marche sur la plupart des navigateurs dont IE6 seulement voilà, sur ce dernier, le curseur n’est pas correct au survol des balises de type bloc. A la place du pointeur, on à le curseur de type de texte.

Voici ce que l’on peut ajouter dans la feuille de style pour corriger celà :

a * { cursor:pointer; }

Et miracle, le curseur par défaut des liens fonctionne également sur les balises type bloc.

Détecter le support HTML5 du navigateur via Jquery

3 commentaires

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

Analyse de la nouvelle version de Duoh.com

1 commentaire

Après un petit congé billet, je me redécide à écrire un billet à l’occasion de la publication récente de la nouvelle version du site Duoh. Pourquoi ce site ? Parce qu’il est un exemple d’innovation en matière de webdesign.

Trop de sites sont réalisés par des designers qui n’ont pas de réelle vision web et il ne faut en aucun cas les blâmer mais il serait grand temps d’avancer et de laisser le webdesign à des gens qui ont été formés pour ça et de ce fait, proposer enfin, de vrai formation dans ce domaine. Le webdesign répond à des contraintes d’ergonomie, d’accessibilité, de sémantique et d’intégration. L’art est secondaire (troll ?). La maquette web est au service du contenu et non pas l’inverse.

Lire la suite

Du Parallax avec jQuery et CSS

7 commentaires

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

8 commentaires

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 !

15 commentaires

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

Récit d’une création de site internet (2ème partie)

3 commentaires

Après avoir achevé la maquette définitive du site, je suis ensuite passé au travail le plus intéressant, celui de l’intégration. J’ai commencé par comprendre mon document. Qu’est-ce que ma page raconte ? Qu’est-ce qu’elle laisse transparaitre. Je peux ainsi mettre des noms sur les différents éléments présents dans la page : menu général du haut, titre de niveau 1, menu latéral des rubriques… Cette étape va me permettre de visualiser les différentes balises les plus adaptées aux différentes parties du document et délimiter les différentes zones (header, footer…).

Lire la suite