Blog WebColors

Menus avec animations JQuery

2010-03-20T19:10:00Z

Voici quelques exemples de menus avec animation JQuery. La présentation des menus se fera avec sous-menus car ceux-ci peuvent ajouter à la complexité du code.

Exemple 1 :Menu avec animation Easing

Menu très symatique avec petite animation easing vers le bas lorsque le curseur est sur le bouton principal.Ce menu nécessite le téléchargement du plugin JQuery Easing disponible à cette adresse : http://plugins.jquery.com/project/Easing.

Code

HTML

CSS

Javascript

Example 2 : Menu avec animation Kwicks

Menu façon Kwicks. Ce plugin JQuery est une copie de ce que nous pouvons trouver dans Mootools. Vous pouvez le télécharger à l'adresse suivante : .

Code

HTML

CSS

JavaScript

Exemple 3 :Menu avec animation simple

Menu avec une petite animation JQuery. Malheureusement ce menu ne fonctionne pas correctement sous IE6 et IE7 à cause du bug des z-index. Vous pouvez le faire, mais le carré de sous-menu ne pourra apparaître en dessous des liens du menu....ce qui est moins beau.

Code

HTML

CSS

JavaScript

jQuery Live: Des événements pour vos éléments créés dynamiquement

2010-02-04T23:00:00Z

Dans mes projets, il m'est souvent arrivé d'ajouter dynamiquement avec jQuery des éléments à une page web, auxquels je souhaitais dynamiquement assigner des événements JavaScript. Une des solutions consisterait à appeler à chaque fois la méthode bind() sur les objets créés. Un des inconvénients de cette technique, c'est qu'il est alors nécessaire de sélectionner uniquement l'élément nouvellement créé - ou l'on risque d'ajouter plusieurs fois le même gestionnaire d'événement à tous les éléments similaires de la page ! Cet article présente une solution plus astucieuse.

La librairie jQuery propose une méthode extrêmement utile, la méthode live(). Elle permet de définir un gestionnaire d'événement valable pour tous les éléments correspondant à un sélecteur donné, y compris ceux qui n'existent pas encore au moment où la méthode live() est appelée.

Exemple

Nous intégrons à notre page le code HTML suivant:

Et ajoutons un événement live à chacun des paragraphes contenus dans la div #jquery-example:

Et c'est tout. Chaque clic sur un paragraphe ajoutera un nouveau paragraphe à la div #jquery-example, et l'on pourra cliquer sur ces nouveaux paragraphes pour produire le même résultat, sans devoir faire quoi que ce soit de plus.

À bientôt.

Démonstration

Ajouter un élément

Top 5 - Techniques CSS - Janvier 2010

2010-01-30T23:00:00Z

WebColors se propose de partager chaque trimestre des techniques CSS utiles, afin d'aider les webmasters dans leur création de site internet. Ces astuces sont compatibles avec tous les principaux navigateurs y compris l'indomptable Internet Explorer 6.

Numéro 5 : Transformer une liste en menu horizontal

Pour créer un menu en HTML, le meilleur choix reste la balise liste. Celle-ci rend le code plus clair, et sémantiquement plus correct (c'est à dire que ce qui est conceptuellement une liste est représenté par l'élément approprié).

Exemple

HTML

CSS

Nous utilisons la propriété inline pour rendre la liste horizontale, la propriété list-style-type: none pour masquer les puces et attribuons aux éléments un peu de padding pour les séparer les uns des autres.

Numéro 4 : Dimensions min-height/min-width pour Internet Explorer 6

Problématique

Notre ami Internet Explorer 6 n'interprétant pas forcément le CSS comme on s'y attendrait, il est souvent nécessaire d'utiliser des techniques peu avouable poru arriver à ses fins. C'est notamment le cas pour spécifier la dimension minimale d'un objet.

Pourquoi cette technique fonctionne-t-elle?

Contrairement aux autres navigateurs, Internet Explorer 6 ignore l'instruction !important, ainsi que les propriétés min-height et min-width. La seule ligne qu'il prendra en compte dans notre CSS sera donc :

Seulement, il l'interprète comme un min-height, soit le comportement désiré. La propriété !important empêche les autres navigateurs de considérer la valeur "height: 400px" puisque celle-ci ne peut être écrasée. Et voilà!

Numéro 3 : Une position absolute à l'intérieur d'un objet

Il est parfois utile de positionner un objet par rapport à son parent, qui peut éventuellement être un flottant. La propriété position: absolute permet de placer un objet par rapport à son plus proche parent positionné. Une technique très facile et utile consiste donc à attribuer la valeur position: relative au parent de l'objet que l'on souhaite positionner afin de pouvoir le placer n'importe où par rapport à celui-ci.

Exemple

Dans notre exemple, nous mettrons en scène trois objets. Deux carrés, en flottant, seront placés l'un à côté de l'autre (en noir et en gris). Un troisième (en rouge) devrait se placer en absolute à l'intérieur du carré noir, positionné par rapport à celui-ci. Les dimensions et les couleurs sont seulement utilisées pour appuyer l'exemple.

HTML

CSS

Résultat

Numéro 2 : Overflow: auto en simulation pour un clear:both

Votre design est complexe et composé de plusieurs objets flottants, notamment d'une barre verticale sur le côté de l'écran, appelée "sidebar" (comme sur le site de WebColors). L'utilisation de l'instruction clear: both est de ce fait prohibée au sein du contenu, car l'élément visé se retrouverait tout en bas de la page, en dessous de votre "sidebar". Comment, donc, s'assurer que les objets floats ne débordent pas de l'objet qui les contient ?

Numéro 1 : Sticky footer

Comment faire un design classique comportant un en-tête, un corps et un pied-de-page tout en évitant que, en présence d'un contenu modeste, le pied-de-page ne se retrouve... au milieu de la page ?

La solution: la technique Sticky Footer.

La technique est simple : il suffit que notre div pied-de-page soit précédée d'une autre contenant l'en-tête et le corps de page, ainsi qu'une autre div, que nous appellerons "push", qui poussera notre pied-de-page lorsque nécessaire.

Le CSS ressemble à ceci :

Tutoriel Nanoc : Un compilateur de sites internet statiques (1/3)

2010-01-11T23:00:00Z

1 Introduction

Il est vrai que les sites statiques se font rares. Pas la moindre page web, semble-t-il, dont le contenu ne soit discrètement soufflé par une base de données, et l'on aura beau jeu de déclarer leur temps achevé. C'est aller un peu vite en besogne, au regard du double coût que présentent les sites dynamiques:

En ressources, d'abord, qu'un système de cache efficace peut néanmoins alléger, au prix d'une plus grande complexité.
En sécurité, tout code exécuté dynamiquement prêtant le flanc aux attaques, dont le risque impose d'infinies précautions au programmeur et à l'administrateur système.

C'est, pour bon nombre de sites, un mal nécessaire. Mais pas pour tous.

En effet, le caractère dynamique d'un site n'a parfois pour seule raison d'être que de simplifier la vie du webmaster. C'est notamment le cas lorsque le contenu est essentiellement statique, édité via une interface en ligne, et qu'aucune interaction n'est prévue avec les visiteurs du site, comme un système de commentaires ou un forum.

Il est alors possible de générer ce contenu sur l'ordinateur du webmaster au moyen d'un compilateur de site tel que Nanoc, sans aucun travail de la part du serveur, contournant ainsi les deux inconvénients mentionnés plus haut. Nous verrons d'ailleurs que la flexibilité d'un tel outil justifierait sans eux son utilisation.

Nanoc étant un outil en ligne de commande écrit et extensible en Ruby, cet article présuppose une certaine familiarité avec:

Le langage Ruby.
L'utilisation de la console sous Linux / Mac OS X.

2 Installation de Nanoc

Comme pour beaucoup de logiciels et librairies Ruby, la méthode d'installation la plus simple reste le gestionnaire de paquet RubyGems:

La commande suivante permettra néanmoins aux jedis, aux inconscients et aux curieux d'en récupérer la dernière version depuis le dépôt officiel:

Si l'une ou l'autre de ces méthodes échoue, c'est sans doute que le logiciel nécessaire (RubyGems ou git) vous fait défaut.

3 Nanoc: Concepts et définitions

3.1 Structure d'un site Nanoc

Un site internet Nanoc est représenté par un répertoire doté d'une certaine structure. La commande nanoc create_site permet de créer le squelette d'un projet:

Nous reviendrons en détail sur la nature et la fonction de chacun de ces fichiers et répertoires. Comme je vous sais impatient, en voici un survol:

config.yaml: définit les sources de données du site (système de fichiers, delicious, twitter), les emplacements (comme le répertoire de sortie), l'adresse du site (utilisée par certains plugins), etc.
Rakefile: permet d'automatiser certaines tâches avec 'rake', équivalent Ruby de 'make'. Nous ne nous en occuperons pas.
Rules instruit Nanoc sur:
- la méthode de compilation à employer pour chaque élément (compilation).
- le fichier de destination (routage).
content/: les éléments à compiler (ou si vous préférez, le "code source").
layouts/: les layouts disponibles.

À ce stade, il est essentiel de définir la notion clé de Nanoc, celle d'élément (ou en anglais, item).

3.2 La notion d'élément

Dans Nanoc, l'objet central n'est pas la page, mais l'élément. Un élément est conceptuellement un ensemble de données susceptibles de posséder plusieurs représentations. Dans un blog par exemple, la liste des articles peut être vue comme un élément, car elle est souvent proposée simultanément:

En HTML, pour visualisation dans un navigateur Web.
En XML, au format Atom ou RSS, pour consultation dans un agrégateur.

Ce qui signale à Nanoc l'existence d'un élément, c'est la présence dans le répertoire content/ d'un fichier de métadonnées, ou attributs, au format YAML. Ce fichier peut très bien être vide mais je vous conseille d'y définir toutes sortes de données pouvant servir à générer le résultat final, comme le titre, l'auteur, la liste des mots-clés, etc.

Chaque élément possède un identifiant (identifier) unique qui le caractérise lors du processus de compilation. L'identifiant d'un élément découle naturellement de l'emplacement du fichier YAML correspondant dans le répertoire content/. Donnons quelques exemples de cette transformation desquels la règle générale apparaîtra clairement:

Emplacement	Identifiant
content/index.yaml	/
content/contact.yaml	/contact/
content/notre-entreprise.yaml	/notre-entreprise/
content/blog.yaml	/blog/
content/blog/2005.yaml	/blog/2005/

Pour éviter toute confusion, remarquons tout de même que:

Le fichier content/index.yaml définit l'élément /, et non l'élément /index/, ce qui constitue l'unique exception à la règle générale.
L'identifiant se termine toujours par /, comme un chemin de répertoire.

Les diverses représentations d'un élément, enfin, sont figurées par autant de fichiers de même nom et de même emplacement que la liste des attributs, exceptée l'extension. Aussi, et pour reprendre notre exemple initial du blog, à l'élément /blog/ défini par le fichier content/blog.yaml pourront être attachées les représentations content/blog.html et content/blog.xml.

Notons enfin, comme nous le verrons dans une prochaine partie, que l'identifiant d'un élément n'équivaut nullement à son emplacement final, bien qu'il s'agisse du comportement par défaut. Le routage, que nous étudierons alors, offre à ce sujet une totale liberté.

2.3 Layouts

Les pages d'un même site possèdent presque toujours une structure commune. La notion de layout, qui n'est pas propre à Nanoc, permet de factoriser cette structure, évitant ainsi la redondance et facilitant la propagation des changements. Nous étudierons les layouts dans la prochaine partie.

2.4 Compilation et auto-compilation

Avant de mettre en ligne un site internet Nanoc, il convient de le compiler:

Le répertoire output/ est alors créé ou mis à jour automatiquement.

En phase de développement, plutôt que de recompiler en permanence votre projet pour visualiser les changements, vous souhaiterez sans doute utiliser l'auto-compilateur. Il s'agit en fait d'un serveur HTTP chargé de créer à la volée les fichiers demandés. La commande suivante permet d'en démarrer l'exécution:

Pour voir votre site internet, il suffit alors de visiter la page: http://localhost:3000/. Enthousiasmant, non ?

L'auto-compilateur écoute par défaut sur le port TCP 3000, mais il est toujours possible de lui en assigner un autre:

Dans les prochaines parties de notre tutorial, nous supposerons que votre autocompilateur est en écoute sur le port 3000.

Un dernier conseil concernant l'auto-compilation: n'oubliez pas que les éléments ne sont créés qu'en cas de nécessité: il est donc prudent, avant de publier votre site, de procéder à une compilation manuelle, afin de ne rien oublier !

3 La prochaine fois...

Nous n'avons fait qu'effleurer la surface de Nanoc: vous brûlez sans doute d'en découvrir plus. Patience !

Dans la deuxième partie de ce tutoriel, nous manipulerons pages, éléments et layouts. Nous montrerons comment les métadonnées et le plugin Nanoc3::Helpers::Capturing permettent de créer des layouts vraiment flexibles.

Dans une troisième partie, nous lèverons le voile sur les règles de routage et de compilation, nous présenterons les filtres et explorerons un autre plugin bien utile: Nanoc3::Helpers::XMLSitemap.

Il sera alors temps de vous laisser faire vos armes par vous-mêmes... et expérimenter pour découvrir toute la puissance de Nanoc.