Utilisation de FLIR

Dernière trouvaille plutôt très sympathique pour pouvoir utiliser, avec PHP et JavaScript, n’importe quelle typographie ce qui n’était pas possible auparavant à moins de créer des images.

FLIR est la solution ! Elle permet de remplacer les mots par des images créées dynamiquement grace à PHP et mis en place avec JavaScript.

Exemple ici avec la police que j'utilise pour mes titres. ( Romance Fatal Serif ) voici le code :

    	<h3 style="color:#3A99FF; font-size:50px;font-family: romfatal;">Anonyma.fr</h3>
    

Commencez par télécharger FLIR, l'archive contenant tous les fichiers nécessaires à l’utilisation.

Attention il faut PHP 5 sur le serveur.

Dans le head de votre fichier HTML insérer le fichier flir.js. Dans mon cas je l’ai mis dans un dossier js.

    	<script src="js/flir.js" type="text/javascript"></script>
    

Et juste avant la fermeture du body insérer ces lignes

    	<script type="text/javascript">
		FLIR.init();
		FLIR.auto();
	    </script>
    

La troisième étape consiste à configurer les typographies. Ouvrez le fichier config-flir.php et ajoutez les polices souhaitées dans le tableau $fonts. En faite le nom de la case de la variable du tableau font est l’allias qu’on utilisera plus tard.

        $fonts = array();
        $fonts['tribalbenji'] 	= 'Tribal_Font.ttf';
        $fonts['antagea'] 		= 'Antagea.ttf';
        $fonts['illuminating'] 	= 'ArtOfIlluminating.ttf';
        $fonts['bentham'] 		= 'Bentham.otf';
        $fonts['geo'] 			= 'Geo_Oblique.otf';
        $fonts['puritan'] 		= 'Puritan_Regular.otf';
        $fonts['konstytucyja'] 	= 'Konstytucyja_1.ttf';
        $fonts['promocyja'] 	= 'Promocyja.ttf';
        $fonts['stunfilla'] 	= 'OPN_StunFillaWenkay.ttf';
        $fonts['animaldings'] 	= 'Animal_Silhouette.ttf';

      

J'ai ajouté la police base02 et Rom_fatal_Srif

        $fonts['base02'] 	    = 'Base02.ttf';
        $fonts['romfatal'] 	    = 'Rom_fatal_Srif.TTF'; 
        

N’oubliez pas de copier le fichier de typographie .TTF dans le dossier fonts du dossier facelift téléchargé. Et oui pour que ca fonctionne il faut quand même mettre le fichier TTF sur le serveur.

Par defaut FLIR crée les images pour tous les headers ( h1, h2, h3… ) mais il est possible de configurer certaine balise, et meme d'ajouter des balises avec un id par exemple.

    	<script type="text/javascript">
		FLIR.init();
		FLIR.auto([ 'h1','span#flir']);
	    </script>
        

Par exemple ici les h1 et les balises span identifié par flir pourront etre transformé

Il ne reste plus qu’a mettre dans le CSS l’allias cité plus haut dans un paramètre font-family, et le tour est joué vos titres ou vos balises paramétrés sont correctement affiché avec la bonne police.


Dans mon cas mon alias etait soit base02 ou romfatal.

    	h1{font-family:romfatal}
        

J’espère avoir été assez clair. @+

site compatible avec Internet Explorer 8

Si vous êtes intégrateur et que vous n’avez pas encore eu le temps de tester votre site dans Internet Explorer 8, insérez ce petit code dans vos pages

    	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    

Ce code « dira » à Internet Explorer 8 d’afficher la page comme si vous êtiez dans Internet Explorer 7. Du coup, si vous avez le boulot de compatibilité pour IE7, vous pouvez souffler un peu en attendant de le faire pour IE8.

Quelques règles design web

Résolution d'écran

Si le visiteur est en résolution d'écran très basse 800x600 et que le design est adapté pour une résolution 1024x768 le visiteur ne verra qu'une partie de votre site, pour voir le reste il devra se déplacer vers la droite et vers le bas, ce qui ne fait pas très beau...

De plus le design ainsi que le contenu ne sera pas vu dans son intégralité celui ci perd donc de la beauté et ne sera pas perçu comme vous le souhaitiez. Commençons par connaître plus ou moins les tendances de résolution d'écran des visiteurs.

• 56.1 % (1102 votes) pour 1024x768
• 21.5 % (423 votes) pour 1280x1024 et plus
• 14 % (275 votes) pour 800x600
• 7.4 % (146 votes) pour Aucune idée
• 1 % (19 votes) pour 640x480

Par conséquent un design web devrait donc être adapté à une résolution 1024x768.
Mais pour être généreux des petits 800x600 on peut également adapter le design en 800x600 et ainsi le rendre visible pour un plus un public plus large.

Pour être précis un design adapté en 800x600 ne devra pas faire 800 de large mais 780 pixels. Tout simplement car la barre de scroll (barre de défilement) prend environ 20 pixels de largeur, donc :
Pour un design en 800x600 le design doit être de 780 pixels de large.
Pour un design en 1024x768 le design doit être de 1004 pixels de large.

Il y a tout de même une méthode pour ceux qui veulent que leur design web soit visible correctement peut importe la résolution d'écran, c'est le design extensible. Il s'adapte en fonction de la résolution de vos visiteurs. Cela est pratique, mais moins beau car les images sont souvent déformées ou le contenu du design est plus vide et plus compliquer à faire.
Pour réaliser un design extensible il vous faut mettre votre largeur en % et non en pixels.

Formats d’image

Le png utilise une compression sans perte de données, il supporte la transparence et gère 256 couleurs. Il supporte aussi les niveaux de gris jusqu'à 16 bits et les couleurs réelles jusqu'à 42 bits. Le PNG ne permet pas de créer des animations.
Les fichiers PNG sont généralement plus légers que les GIF, par contre le PNG est moins performant que le JPEG pour la compression des photographies.
Seul problème, les navigateurs récents reconnaissent le format PNG (Firefox, Opera etc...) internet explorer 6 ne le reconnais pas a mois d’aller sur "resoudre la transparence internet explorer 6" pour trouver une solution

Le format GIF est un format qui utilise une compression sans perte de qualité. Le maximum de couleurs gérées est de 256 couleurs. Il ne pourra donc pas gérer des nuances ou des dégradés.
Le format GIF est très pratique pour les boutons et les choses petites
. Il est aussi utile pour les animations et gère la transparence.

Le format JPEG est un format de compression très efficace mais avec perte de qualité, plus l'image est compressée, plus la qualité de celle-ci baisse.
Le JPG est fait pour les photographies, car il supporte 16 millions de couleurs !
Il gère les nuances et les dégradés. Par contre, il ne supporte pas la transparence.

Les logiciels

Adobe Photoshop la référence en termes de design. Ce logiciel pour Windows et Mac vous permet de tout faire. Grâce à un système de calques modifiez à volonté votre design sans tout avoir à refaire.
De plus de nombreux outils (brush, formes) sont disponibles pour absolument tout faire, mis à part la 3D sauf si vous avez la version CS4 extended.

L'équivalent de Photoshop est certainement le logiciel The Gimp disponible en version gratuite. Il possède presque les mêmes fonctions que Photoshop, quelques outils en moins et une qualité professionnelle moindre.
De nombreux débats existent entre The Gimp et Photoshop, l'un gratuit l'autre très cher, alors que l'utilisation est quasi similaire.
De plus le célèbre format PSD de photoshop est unique est de nombreuses entreprises demandent ce format pour l'impression.

Si votre design web doit être en Flash Le logiciel Adobe Flash Professional vous permets de créer de riches contenus vectoriels interactifs avec vidéos, graphiques et animations pour vos sites web, avec des expériences interactives et des contenus mobiles. D’autre logiciel ont une prise en main plus facile que les professionnels, un minimum de connaissance est requis pour son utilisation. Fireworks vous permet de faire des effets de survols d'images, de découper le design et bien sûr de créer votre interface graphique d'une prise en main plus simple que Photoshop.

Photofiltre est un bon logiciel pour ceux qui ne veulent pas mettre cher car sa licence est gratuite. Il dispose d'une palette d'outils bien remplie et d'une centaine de filtres.

taille minimale & maximale CSS compatible ie6

La norme CSS2 spécifie quatre propriétés qui peuvent être très utiles lorsque vous travaillez avec des mises en page CSS: min-width max-width min-height et max-height .

elles peuvent être utilisés en conjonction avec les bien connu width et de height pour obtenir des effets qui peuvent être particulièrement utiles dans la conception de site qui sont un mélange de taille fixe et relative

Voici le fichier javascript minmax.js réalisé par Andrew Clover qui a pour but de faire fonctionner ces quatre propriétés bien utiles sous internet explorer 6 et inferieur !

Il vous suffit d’ajouter dans le head l’appel de la fonction JavaScript enfin plus particulièrement du fichier dans ce cas la que vous pouvez télécharger ici…

<head>

<script type="text/javascript" src="minmax.js"></script>

</head>

Apres insertion tout ce gère tout seule rien à jouter ! Voici deux exemples pour comprendre la différence.

• Exemple qui utilise le fichier minmax.js
• Exemple qui n’utilise pas le fichier minmax.js

Resoudre le probleme de taille des SELECT sous ie

Le but de ce script JavaScript est de pouvoir fixer la taille d'un select et de pouvoir voir les textes plus grand que la taille fixée.
Vous me direz ca fonctionne correctement. Oui cela fonctionne correctement à condition d'avoir Firefox mais sous internet explorer si la taille est fixé alors le texte sera caché…
Voici la solution….