Création site internet à Tours (37), France
XHTML-CSS
2000 Templates de site XHTML et CSS gratuits
29/01/10
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.
Transformer une maquette Photoshop en Template XHTML/CSS
28/01/10
Ce tutorial est composé de deux parties :
Site de Six Revisions : http://sixrevisions.com
Outils de compression CSS en ligne
8/06/09
Dans le but d’optimiser les temps de chargement de vos pages, il peut être très intéressant de compresser votre fichier contenant les styles. La méthode consiste à fusionner les sélecteurs et les propriétés identiques.
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 :
Si vous utilisez un tel outil et que vous souhaitez nous le faire partager, laissez-nous un commentaire.
Gérer la transparence des images en CSS
14/04/09
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.
Insérer une animation flash valide W3C
9/02/09
Nous allons voir la méthode permettant d’insérer une animation Adobe Flash à une page HTML tout en étant respectueux des recommandations du W3C.
Le W3C (World Wide Web Consortium) émet des recommandations qui ont valeur de standards garantissant la compatibilité des technologies WWW.
Dans le cas où vous devez insérer une animation Flash dans une page HTML, il y a de fortes chances que le code que vous allez générer à partir de votre éditeur favori ressemble à l’exemple ci-dessous. Dans lequel, nous souhaitons afficher l’animation Flash nommée « ref-clients.swf » ayant pour dimensions 350 pixels de large pour 132 pixels de hauteur.
Ce code commence par vérifier si le visiteur est capable de visualiser l’animation. Dans le cas contraire, il sera redirigé vers la page de téléchargement du plugin Flash Player de chez Adobe. Ensuite l’animation est chargée et est visualisée grâce au Flash Player intégré au navigateur.

Jusque là aucun problème : vous pouvez ouvrir avec votre navigateur la page HTML fraichement créée et vous verrez bien l’animation Flash.
Les choses se compliquent lors de la soumission de votre page à la validation du W3C. En effet, la balise « embed » n’a plus lieu d’être. Il faut donc contourner le problème en utilisant une balise reconnue par le W3C et qui aura pour effet de lancer l’animation Flash. Dans ce cas il faut mettre en pratique la balise « object type » qui annonce le type d’objet qui devra être lu. Puis on donne les précisions suivantes : le nom du fichier et ses dimensions.

Petite astuce qui peut-être utile pour que les moteurs de recherche puissent identifier de quoi il en retourne : il est possible de mettre une description de l’animation juste avant de fermer la balise « object« .
J’espère que ce billet donnera un petit coup de main aux « codeurs » et si vous aussi, vous avez une bonne pratique sur ce sujet, laissez-nous un commentaire :nous partagerons notre expérience.







![[Astuce] Comment renommer un htaccess sous Windows ?](http://farm5.static.flickr.com/4123/4944825608_fccfc4465f_s.jpg)
![[Astuce] Comment renommer un htaccess sous Windows ?](http://farm5.static.flickr.com/4121/4944825492_5538699fbe_s.jpg)
Derniers commentaires