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

webdesigner et intégrateur XHTML / CSS

Le livre du jour : CSS3 pour les web designers

0 commentaire

Récemment, l’agence AL’X Communication (agence de conseil en communication web et stratégie de développement) m’a fait parvenir un exemplaire du livre « CSS3 pour les web designers ».

Dans ce livre, Dan Cederholm de Simple Bits fait le tour de la plupart des nouveautés apportés par CSS3 et de manière assez ludique. Contrairement à beaucoup de livres informatiques, la compréhension des différentes propriétés et techniques sont appréhendées dès la première lecture. Pour certains, ce livre sera une vraie découverte, pour d’autre, il apportera une nouvelle manière de voir certaines propriétés CSS grâce notamment aux exemples traités.

Et je terminerais en remerciant l’agence AL’X pour avoir eu l’amabilité de me faire parvenir une copie de cet ouvrage vraiment passionnant.

Inclusion de fichiers dans tout type de document

0 commentaire

Une des règles première en terme de performance est de minimiser au maximum les requêtes HTTP. Voici une méthode qui peut avoir son utilité lorsque vous utilisez une dizaine de plugins jQuery ou si vous êtes attaché à séparer vos styles dans diverses feuilles CSS !

Il est possible de réaliser des inclusions de fichiers coté serveur. Pour cela, il vous faudra d’abord rendre opérationnelle l’extension mod_include sur Apache.
Rien de plus simple ! En supposant que votre serveur apache est localisé chemin « /etc/apache2/ », exécutez la commande suivante :

sudo ln -s /etc/apache2/mods-available/include.load /etc/apache2/mods-enabled

Cette commande va créer un lien symbolique du module « include » dans le dossier des modules activés de Apache.

Lire la suite

Checklist avant livraison d’un projet

4 commentaires

Je ne sais pas pour vous mais la livraison d’un projet est souvent sujet à bon nombre d’incertitudes. A-t’on pensé à tout ?
Un bon nombre de clients va chercher à évaluer la réponse apportés à sa demande initiale, ce qui est tout à fait normal.
Il est important d’avoir une checklist qui servira de contrôle qualité avant la livraison d’un site web.
Je précise que ces contraintes sont largement inspirées de celles de l’équipe web « BNP E-business ».

Lire la suite

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

1 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

7 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

4 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

10 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