Les formulaire d’inscription sont utiliser pour abonner les visiteurs à des services gratuits ou payants. Il sont très largement utilisés sur les site e-commerce pour enregistrer les informations du compte clients.

Si vous êtes coutumier du CMS Joomla, vous connaissez sûrement l’éditeur de Template et de composants Rockettheme. Au-delà des prestations payantes, Rockettheme met régulièrement à disposition des composants gratuits. Is sont généralement de bonne qualité et dans l’ère du temps. C’est le cas pour ce slideshow (diaporama) qui vous permettra d’animer votre site de manière élégante.

RokSlideshow est un diaporama motorisé grâce à JavaScript MooTools qui vous permet d’afficher rapidement et facilement une sélection d’images et de transition entre eux. Le diaporama est très souple, facilement personnalisable et offre une excellente alternative aux solutions basées sur le flash.

Le diaporama (slideshow) est disponible sous 3 formats :

• Une version autonome (HTML / JavaScript) à inclure dans un site Web,
• un module pour Joomla 1.0,
• un module de Joomla 1.5.

Site de l’éditeur :
http://www.rockettheme.com/extensions-joomla/rokslideshow

Demo en ligne :
http://demo.rockettheme.com/extensions/?extension=rokslideshow

Le site Open Source Web Design propose plus de 2000 Templates de site XHTML et CSS à télécharger gratuitement. Vous pouvez soit les utiliser tel quel ou bien vous en inspirer pour vos créations.

Ce tutorial est composé de deux parties :

1. Concevoir la maquette avec Photoshop
2. Convertir la maquette en XHTML/CSS

Site de Six Revisions : http://sixrevisions.com

Mon Blog Note arpente le Web depuis maintenant plus d’un an et consacre quelques billets à ma passion pour le développement des solutions de communication sur Internet. Malgré quelques sujets sortant de la ligne générale (Linux, logiciels open source ou gratuits, boite à outils pour les entreprises, …).

J’ai profité d’une mise à jour de la plateforme WordPress pour offrir de nouveaux habits à Mon Blog Note. J’ai apporté quelques modifications au thème Watches pour présenter les pages avec un affichage différent des articles car les pages ne nécessitent pas d’information de type catégorie ou commentaires. Ce thème est particulièrement bien conçu et a une architecture atypique pour un thème WordPress.

Pour mémoire, voici l’ancienne version de Mon Blog Note (février 2009) :

J’espère que ces nouveaux habits vous plairont… Je reste à votre écoute pour toute remarque…

PS : vous l’aurez deviné, j’aime le bleu…

Une fois que votre feuille de styles (CSS) est finalisée et que vous avez validé sa conformité avec le W3C Validator, vous pouvez la soumettre à la moulinette de ces outils de compression CSS.

Mon préféré : CLEANCSS car il propose plusieurs niveaux de compression.

D’autres outils en ligne :

• CSS Optimizer
• Icey’s CSS Compressor
• Flumpcakes CSS Optimiser
• CSS Compressor

Si vous utilisez un tel outil et que vous souhaitez nous le faire partager, laissez-nous un commentaire.

Seulement voilà, n’ayant pas encore tous les supports à insérer, je souhaitais créer un slideshow qui me permettrait de le mettre à jour facilement. Autre argument de choix faire en sorte que les images puissent comporter un titre et une description pour que le référencement se face de manière naturelle par Google (code lisible).

En plus des boutons de navigation à mettre en oeuvre, il fallait insérer une description pour chaque image affichée. Celle-ci devant apparaitre en même temps que la photo. Voilà la maquette visuelle à mettre en place :

Maquette du slideshow (photo, boutons et texte)

Pour créer ce slideshow, j’ai utilisé jQuery Cycle plugin et c’est vraiment un plugin très intéressant puisqu’il permet de répondre aux différents points que je cherchais à mettre en oeuvre. En m’inspirant des exemples présents sur le site et en les adaptant, j’ai construis le Slideshow du projet.

Les effets présents sur le site jQuery Cycle plugin sont vraiment très intéressants pour rendre plus vivant vos pages web ou vos portfolios et ils sont tous commentés pour que vous puissiez les adapter.

Voir mon slideshow.

Dans la conception de votre nouveau projet web vous avez besoin de mettre en place un effet de transparence. Pour mettre en place cet effet, vous avez deux possibilités : utiliser une image intégrant la transparence ou bien utiliser CSS. La mise en place de la seconde solution semble être la meilleure car vous pouvez régler le niveau de transparence plus facilement, ce qui n’est pas le cas avec une image pré-produite.

La mise en place de cette transparence en CSS s’effectue grâce à la propriété Microsoft filter s’appliquant à un élément HTML.

Syntaxe :

filter:alpha(opacity=50);
/* Réduit l'opacité à 50% */

Seulement voilà, cette propriété n’est reconnue que par Internet Explorer et la valeur de la transparence doit être comprise entre 0 et 100. Il faut donc compléter cette prise en compte pour Firefox, Safari et les recommandations W3C. Pour ce faire, il existe d’autres propriétés à utiliser :

• Pour Firefox : -moz-opacity:XX;   (0<XX<1)
• Pour Safari : -khtml-opacity:XX;   (0<XX<1)
• Pour W3C : opacity:XX;   (0<XX<1)

XX est la valeur de la transparence à utiliser.

Pour illustrer cette mise en place de la transparence, nous allons mettre en place un CSS prenant en charge les différents cas de figure. Voici la classe monbloc :

Code CSS

.monbloc {
    background : #010415;
    filter:alpha(opacity=50);
   -moz-opacity:0.5;
   -khtml-opacity: 0.5;
   opacity: 0.5;
}

Code HTML

<div class="monbloc">
<p>Lorem ipsum eam odio qualisque efficiantur cu, propriae...</p>
</div>

Il ne vous restera plus qu’à régler le degré de transparence à votre convenance et rien ne vous empêche de mettre en place un effet différent suivant le navigateur qui ouvrira le site.

Effet transparence sous IE8

CSS Layout par Iron Myers