La méthode Typeface.js utilise le rendu vectoriel des navigateurs

Dans la série comment utiliser d’autre police que les polices web standards je vous proposais :

• sIFR
• FLIR

On continue avec Typeface.js. C’est une méthode entièrement basée sur du JavaScript et HTML/CSS. Plutôt que de générer une image (FLIR) ou d’utiliser du Flash (sIFR), Typeface se base sur la capacité des navigateurs à tracer du vectoriel. SVG pour Firefox, Safari et Opéra et VML pour Internet Explorer.

Typeface.js : la méthode tout JavaScript

On a besoin de 2 fichiers pour commencer :

• La dernière version de typeface.js
• et un fichier js de votre police que vous pourrez convertir sur cette page

J’ai choisi pour cet exemple la police Just Old Fashion. Si vous voulez vous éviter la manip de conversion, vous pouvez télécharger directement le fichier.

Vous avez donc 2 fichiers que vous allez mettre dans un dossier js à la racine du serveur :

• justoldfashion_regular.typeface.js
• typeface-0.11.js

Ouvrez la page où vous souhaitez intégrer Typeface et placez ce code dans l’entête entre les balises head :

<link rel="stylesheet" type="text/css" ref="/style.css" />


<script type="text/javascript" src="js/typeface-0.11.js"></script>
<script type="text/javascript" src="js/justoldfashion_regular.typeface.js"></script>
</head>

Ajouter la classe typeface-js à l’élément que vous voulez styler :

<p class="typeface-js"><a href="http://typeface.neocracy.org/" title="Typeface.js">Typeface.js</a> utilise la capacité des navigateurs à tracer du vectoriel. C'est une librairie qui ne nécessite aucune connaissance particulière et qui est très simple à mettre en place. </p>

C’est pratiquement terminé, maintenant, il suffit d’éditer la feuille de style

La mise en forme

Styler vos éléments comme bon vous semble

p.typeface-js {
	font-size: 25px;/* Attention Typeface ne comprends pas les tailles de police relative (em)*/
	font-family: JustOldFashion, Georgia, serif;/* Dans cet exemple nous n'avons qu'une seule police utilisé par Typeface, on aurait pu se passer de déclarer la famille de police*/
	font-weight: bold;
	color: #6a6a6a;
	line-height: 1.4em;
}

Et le résultat :

Typeface.js utilise la capacité des navigateurs à tracer du vectoriel. C’est une librairie qui ne nécessite aucune connaissance particulière et qui est très simple à mettre en place

On obtient un texte qui n’est ni une image, ni du flash, mais bien du texte. Le seul point négatif que j’ai noté et c’est la raison pour laquelle je m’en tiens à FLIR c’est que la taille de la police ne peut être défini en taille relative.

Vous avez donc maintenant 3 alternatives pour modifier vos textes comme bon vous semble. Il faut pourtant préciser que ces méthodes ne devraient pas être utiliser pour tout le texte d’une page, au risque de ralentir son affichage.
Faites-en bon usage !

Articles sur le sujet :

• Exemples et documentation Typeface.js (en anglais)

FLIR, la méthode PHP

Le mois dernier je vous présentais sIFR comme méthode de remplacement des polices. Basée sur un fichier swf (Flash), cette méthode consomme de la bande passante et par expérience ne fonctionne que de façon aléatoire.

Je vous propose aujourd’hui une autre méthode qui fonctionne coté serveur avec PHP. C’est une méthode beaucoup plus souple et plus simple à mettre en œuvre. C’est la méthode que j’ai expérimenté sur ce blog :

FLIR : la méthode PHP

FLIR utilise la librairie GD de PHP pour générer le texte. La police est générée dynamiquement en utilisant les styles CSS.

La première chose à faire est de télécharger la dernière version de FLIR. Décompresser le dossier et envoyer les fichiers sur votre serveur là où vous le souhaitez. Je les ai placé à la racine de mon serveur dans un dossier nommé script.

Ouvrez la page où vous souhaitez intégrer FLIR et insérer ceci dans le pied de page avant la balise fermante body :

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

Configurer les polices

J’ai choisi d’utiliser les polices Anivers, Delicious et Fontin pour cet exemple. Téléchargez-les et placez les dans le dossier fonts à l’intérieur du dossier script.

Il faut maintenant configurer le fichier config-flir.php.  A la ligne 40 vous trouverez quelque chose comme ca :

// Each font you want to use should have an entry in the fonts array.
$fonts = array();
$fonts['illuminating'] 	= 'ArtOfIlluminating.ttf';
$fonts['okolaks'] 		= 'okolaksBold.ttf';
$fonts['wanta'] 			= 'wanta_091.ttf';

// The font will default to the following (put your most common font here).
$fonts['default'] 		= $fonts['okolaks'];

Comme vous l’aurez compris, chaque entrée du tableau $fonts est une police du dossier fonts.
Les noms entre crochet (['illuminating']) est le nom que nous allons utiliser dans le fichier CSS. Modifions notre fichier avec nos polices :

// Each font you want to use should have an entry in the fonts array.
$fonts = array();
$fonts['anivers'] 	= 'Anivers_Regular.otf';
$fonts['fontin'] 		= 'Fontin-Regular.ttf';
$fonts['delicious'] 			= 'Delicious-Roman.otf';

// The font will default to the following (put your most common font here).
$fonts['default'] 		= $fonts['anivers'];

La police Anivers sera la police utilisée par défaut si aucune police n’est spécifiée.

La partie CSS

Par défaut, FLIR remplace vos éléments titre . Pour spécifier des élément en particulier il suffit de rajouter ceci à la fonction FLIR.auto() dans le pied de page :

FLIR.auto([ 'h4, h2.titre, div.commentaires h3']);

Dans la feuille de style, on déclare la propriété font-family comme avant, sauf que maintenant on peu utiliser les polices choisie :

h4 {font-family: delicious, Georgia, serif;}
h2.titre {font-family: anivers,Arial,sans-serif;}
div.commentaires h3 {font-family: fontin, Verdana, sans-serif;}

Vous pouvez stylez vos textes comme bon vous semble, agir sur la couleur, la taille, la graisse, l’espacement des caractères,… sauf la propriété text-transform

Et voici un exemple de texte avec FLIR

Et voilà, en quelques manipulation on intègre la police que l’on veut facilement. C’est totalement transparent pour le visiteur.

L’avantage de FLIR par rapport à sIFR c’est qu’il n’utilise pas flash. Aucun plugin n’est nécéssaire pour voir le texte s’afficher correctement.

FLIR et sIFR sont les 2 méthodes les plus connues, mais il en existe d’autre encore. Prochaine méthode : Typeface.js, cette fois on enlève le PHP, uniquement HTML/CSS et javascript. Je n’ai pas encore testé mais je vous en reparle bientôt…

[mise à jour du 09/11/2008] : Voir la méthode Typeface.js

Articles sur le sujet :

• How To Use Any Font You Wish With FLIR
• Exemples et documentation de FLIR (en anglais)

J’en ai profité pour revoir le design du blog, je voulais quelque chose de clean et il y a quelques sites qui m’ont beaucoup inspiré :

• www.duoh.com
  Ce site m’a beaucoup marqué par son originalité. J’y ai repris les ligne de couleurs.
  

  duoh.com, un site haut en couleurs qui repense la structure classique d'une page web

• iamkyle.com
  

  Les liens sont mis en valeur très simplement par des blocs de couleurs

• Dan Rubin’s SuperfluousBanter
  

  Les rollovers

Un petit peu de tout ça et une bonne dose de travail et ça donne : le nouveau blog de Deborah Garcia

sIFR, la méthode FLASH

Arial, Verdana, Georgia, Times New Roman, Trebuchet MS,… c’est à peu près toutes les polices utilisables sur le web. Difficile alors pour un webdesigner de se permettre plus de créativité dans la typographie.

Une solution est d’afficher une image en arrière-plan et de masquer le texte avec la propriété CSS text-indent: -5000em; pour sortir le texte de l’espace visible. Le problème c’est que cette solution manque de souplesse puisque si les textes changent il faut refaire les images.

div {
      background: url(images.jpg);
      text-indent: -5000em;
}

Maintenant, il existe plusieurs alternatives. Je vous en proposerais 3 :

• sIFR : méthode flash (sur cette page)
• FLIR : la méthode PHP
• Typeface.js : méthode JavaScript uniquement

sIFR3 : la méthode flash

Cette solution utilise CSS, JavaScript et Flash pour afficher et mettre en forme le texte. Utiliser du Flash garantit d’avoir un affichage uniforme sur tous les navigateurs, mais impose aussi que le visiteur ait Flash d’installer et d’activer (quoique maintenant c’est une solution très courante).
sIFR3 est très simple à utiliser :

Télécharger la dernière version de sIFR3

Ouvrez le fichier sifr.fla. A l’ouverture, double-cliquer sur la scène et modifier la police du texte par celle de votre choix. Nul besoin d’autre modification ici.

Exporter votre animation au format swf (fichier/exporter l’animation) et nommer la sifr.swf par exemple (vous pouvez laisser tel quel les paramètre d’exportation)

Ensuite, envoyer les fichiers suivants vers votre serveur :

• css/sifr.css
• js/sifr.js
• js/sifr-config.js
• flash/sifr.swf (c’est bien le fichier swf et pas le fla)

Si vous utilisez Wordpress mettez vos fichiers dans wp-content/themes/votre_theme
Maintenant, nous devons faire les liens vers les fichiers JavaScript et CSS :

<head>

<link rel="stylesheet" href="css/sifr.css" type="text/css" media="screen" />


<script src="js/sifr.js" type="text/javascript"></script>
<script src="js/sifr-config.js" type="text/javascript"></script>

</head>

Arrivé ici, il nous reste à configurer le fichier sifr-config.js pour activer le remplacement du texte

//on définit une variable qui va chercher le fichier swf
var police = {
  src: 'flash/sifr.swf'
};

//on active la police
sIFR.activate(police);

//on définit quel texte doit être remplacé
sIFR.replace(police, {
  selector: 'h4#testSifr'
});

Pour éviter que le texte normal ne s’affiche on modifie le fichier sifr-screen.css

.sIFR-active h4#testSifr {
	visibility: hidden; /* on cache le texte normal */
}

Si vous souhaitez styler votre texte, il faut éditer à nouveau le fichier sifr-config.js

sIFR.replace(police, {
  selector: 'h4#testSifr'
  ,css: [
//on met en forme les liens
//(tout autre élément enfant peut être stylé span, em,...)
       'a { color: #ce1769; }'
      ,'a:link { color: #81d548; }'
      ,'a:hover { color: #ce1769; }'
      ,'.sIFR-root {text-align: center; font-size: 35px;}' // On style l'élément lui-même
 ]
   ,wmode: 'transparent' //pas de couleurs de fond
});

Attention à l’unité de la taille de police, la méthode sIFR ne comprend que les valeurs en pixels.
Et le résultat de ce code :

Je suis un texte qui utilise sIFR3

Prochaine méthode : FLIR, la même chose mais sans le Flash…

[mise à jour du 06/11/2008] : Voir la méthode FLIR

Articles sur le sujet :

• Intégrer sIFR3 sous wordpress (en anglais)
• Documentations et FAQ sIFR (en anglais)

• vous souhaitez présenter vos produits ou services
• rechercher des partenaires financiers ou stratégiques
• vous embauchez

1minute4biz vous donne 1 minute pour diffuser votre message en vidéo, une façon d’humaniser votre message et de le rendre plus personnel.

Sur le site, il n’y a que peu d’information sur ce produit, juste une petite phrase Solar seeking botanical augmentation que l’on pourrait traduire par quelque chose comme la botanique cherche soleil. Peut être que ce n’est qu’un concept mais ça à le mérite d’avoir été pensé…

The Shit Box

The Brown Corporation présente “the shit box” ou “boite à caca” en français.

La conception d’un logo passe par un longue reflexion et voici une donc sélection de sites autour de ce thème.

Articles

• Logo Design Project Step by Step Walkthrough Concevoir un logo étapes par étapes. Cette article très intéressant montre le processus de création d’un logo (très jolie en plus)
  
• 5 vital logo design tips 5 principes pour créer un bon logo
• Design a Logo – The Ultimate Guide Créer un logo : le guide
• 50+ Kick Ass Logos for Inspiration Sélection de 50 logos
• Naughty logos Des logos osés. Les designers n’ont sans doute pas toujours voulu cette connotation.
  
• 2008 logo TRENDS Les tendances 2008
  

Ressources

• 40+ Excellent Freefonts For Professional Design 40 polices gratuites<
  /li>

• 150 Free Vector Logos 150 modèles de logos à télécharger gratuitement

Galleries

• Faveup La meilleur, le design du site est très sobre et les logos sont très bien mis en valeur
  
• LogoPond
  
• LogoSauce

]]> http://www.deborahgarcia.net/theorie-et-pratique-du-logo/feed/ 0 http://www.deborahgarcia.net/theorie-et-pratique-du-logo/ http://feedproxy.google.com/~r/deborahgarcia/~3/W6FcrI3hsuI/ http://www.deborahgarcia.net/ma-selection-des-meilleures-galeries-de-sites-web/#comments Thu, 31 Jul 2008 15:32:09 +0000 Deborah http://whereizmymind.free.fr/?p=107

CSS Based

One CSS

The Daily Slurp

Unmatched Style

]]>

CSS Based

One CSS

The Daily Slurp

Unmatched Style

Web Design Gallery

Screenfluent

Best Web Gallery

CSS Umbrella

CSS Beauty

Design Shack

CSS Gallery

Inspiration Up

CSS {imagine}

CSS Mania

CSS Fresh Blend

]]> http://www.deborahgarcia.net/ma-selection-des-meilleures-galeries-de-sites-web/feed/ 0 http://www.deborahgarcia.net/ma-selection-des-meilleures-galeries-de-sites-web/