Posts Tagged ‘ HTML ’

Bilbiothèques de font libres à utiliser avec @font-face

Aujourd’hui, les services proposant l’hébergement de polices de caractères non standards pour enrichir nos sites web sont de plus en plus présents. Ils permettent généralement d’inclure sur votre site une police (à l’aide d’une API, en achetant une licence, …) non web que vous utiliserez ensuite avec la directive CSS @font-face.

Il existe deux types de services de ce type:

  • Des services (gratuit ou payant) permettant d’utiliser une police à distance sur un ou plusieurs domaines (Google Web Font, Font Spring, …)
  • Des librairies de polices dans lesquels vous choisissez et acheter une police utilisable sur le web (format de fichier compatible, CSS à copier coller, …)

 

De mon côté je m’intéresserai principalement aux premiers…
Ils permettent aujourd’hui d’intégrer des polices non système sur le web et ainsi ouvrir de nouvelles perspectives de design de manière beaucoup plus simple que des librairies comme Cùfon ou Typeface.js. En effet ces librairies permettant l’émulation des polices sont complexes à utiliser sur des textes longs (espacement de caractère, de ligne, hauteur de texte, …) et mettent généralement un certain temps à s’afficher du fait que le texte est remplacer en javascript pendant ou après le chargement de la page.

En utilisant @font-face l’internaute télécharge la police de caractère dans son cache navigateur et le rendu est ensuite instantané lors de l’affichage de la page! Google propose aussi une API (WebFont Loader) permettant d’utiliser la plupart de ces services et charger des polices à distance de manière simple et rapide.

 

Il existe plusieurs site proposant ce système de police, une liste descriptive assez complète a été réalisée sur le blog sprungmarker.de: http://sprungmarker.de/wp-content/uploads/webfont-services/

2011
06/06
POSTE PAR
CATEGORIE
HTML / CSS
TAGS

Ecrire commentaire

cufòn: Intégration de polices non standards sans CSS 3 ou Internet Explorer

Depuis quelques temps, je m’intéressais à une façon intéressante d’intégrer des polices de caractères non standard dans un site web sans utiliser CSS3 ou Internet Explorer. Je cherchais une solution légère et multi plateforme.

J’ai d’abord été amené à utilise sIFR, qui est une solution intéressante mais elle n’est pas très légère. En effet le principe de fonctionnement est le suivant, un fichier SWF contenant un champ texte est utilisé après y avoir intégré une police et les caractères souhaités. Un sélecteur CSS est ensuite utilisé pour récupérer la liste d’éléments à transformer, sur chacun de ces éléments un flash est affiché en y injectant le texte, le lien et plusieurs autres paramètres (couleur, graisse, …).

Le résultat obtenu est assez intéressant mais dès qu’il y a beaucoup d’éléments à remplacer avec plusieurs types de polices, les pages générées deviennent vite lourdes à manipuler par un navigateur (la machine virtuelle flash n’est pas reconnue pour sa légèreté… ;) ).

N’étant pas pleinement satisfait pas cette solution, j’ai continué de chercher et des collègues m’ont fait part d’une technologie qu’ils avaient trouvés, cufòn. Cet outil fonctionne sur le même principe de remplacement par sélecteur CSS d’items HTML mais la manipulation de police est différente (son principe de fonctionnement est défini ici).

En effet, des fichiers JavaScript sont générés à partir des fichiers de polices (TTF, OTF, PFB, PostScript) permettant à la librairie de réécrire au format vectoriel (VML) les textes sélectionnés. Pour les navigateurs compatibles HTML5 (FireFox 3.5+, Opera, Safari 4+, Chrome, …), la balise Canvas est utilisée pour faire le rendu. Pour les autres navigateurs, soit le format vectoriel SVG est utilisé pour dessiner un caractère ou un groupe de caractère soit le format VML, ce dernier étant directement supporté par Internet Explorer. Le respect de ces différentes normes permet de rendre cufòn compatible avec la majorité des navigateurs du marché (si ce n’est tous…) et non dépendant d’un plugin externe (le rendu reste figé pour tous les internautes).

Une interface web appelée « Generator » permet, après upload des fichiers de polices de caractères, de générer le fichier JavaScript à utiliser pour afficher les textes sur le site. A travers cet interface l’utilisateur peut choisir:

  • d’inclure les polices en bold, italic, bold italic, regular
  • spécifier le nom de la police dans le fichier
  • définir quels caractères doivent être inclus dans le JavaScript (tous, nombre, ponctuation, latin, cyrillique, …)
  • possibilité de rajouter des caractères « en dur » pour agrémenter la police
  • verrouiller l’utilisation de la police sur un domaine particulier (pour gérer les droits de diffusion)

Voici un exemple d’utilisation de cufòn pour remplacer toutes les balises H1 par leurs équivalents dans la police « Champagne & Limousines »:

<head>
    ...
    <!-- JS FILE LOADING -->
    <script src="js/cufon-yui.js" type="text/javascript"></script>
    <script src="js/Champagne__Limousine_700.font.js" type="text/javascript"></script>
    <!-- END JS FILE LOADING -->
    ...
</head>
<body>
    <h1>TEXTE A REMPLACER</h1>
    <script  type="text/javascript">
        Cufon.replace('h1');
        Cufon.now();
    </script>
</body>

Faites moi savoir si cette technologie vous a été utile :) !

2010
04/20
POSTE PAR
CATEGORIE
HTML / CSS
JavaScript
TAGS



3 commentaires

SyntaxHighliter: Coloration syntaxique de code dans vos pages web

J’ai récemment découvert un outil de coloration syntaxique de code dans vos pages web (je l’ai d’ailleurs implémenté sur ce blog… ;-) ) appelé SyntaxHighlighter.

Il est vraiment très simple à mettre en place et je n’ai pas rencontré de problème lors de son installation. La page de démonstration présente le résultat sur du code HTML, la page décrivant les brushes montre la mise en forme proposée pour plus de 20 languages.
Je vous invite vivement à découvrir les possibilités de ce petit outil qui permet vraiment de rendre lisible facilement un bout de code…

Voici un exemple de code pour l’implémenter:

<script src="shCore.js" type="text/javascript"></script>
<script src="shBrushCss.js" type="text/javascript"></script>
<link href="shCore.css" rel="stylesheet" type="text/css">
<link href="shThemeDefault.css" rel="stylesheet" type="text/css">
...
<pre class="brush: xml;">
  <strong>Hello World</strong>
</pre>

Le site officiel de cette librairie: http://alexgorbatchev.com/wiki/SyntaxHighlighter

2010
02/06
POSTE PAR
CATEGORIE
HTML / CSS
JavaScript
TAGS




Ecrire commentaire

TinySlider: Un diaporama JavaScript dégradable sans FrameWork

J’ai récemment découvert ce script permettant d’implémenter un diaporama multi contenus (texte, images, …) sans FrameWork.

Sa légéreté (1,5Ko) en fait un outil intéressant pour être intégré rapidement sans contraintes. Il est paramétrable (navigation précédent / suivant, pagination, défilement automatique, …) et peu être retravaillé graphiquement très facilement.

En dehors de ces avantages, TinySlider permet surtout un affichage propre du contenu quand JavaScript est désactivé (voir la démonstration). L’auteur a apporté un soin particulier à respecter cette compatibilité qui est souvent trop oublié par les développeurs JavaScript. Les moteurs de recherche ne voient pas la page avec JavaScript, il est donc important de leur afficher un contenu approprié.

Vous pourrez trouver une présentation du script à l’adresse: http://www.leigeber.com/2009/12/slideshow-script/

2009
12/13
POSTE PAR
CATEGORIE
HTML / CSS
JavaScript
TAGS



Ecrire commentaire

Créer des Sprites CSS… Une idée pour alléger le chargement de vos pages web!

A travers de récentes recherches sur les possibilités de tester et d’améliorer les temps de chargement de mes pages web, j’ai découvert une présentation intéressante sur la création de Sprite CSS.

En effet cette technique consiste à regrouper plusieurs images d’interfaces à l’intérieur d’un Sprite comme présenté dans l’exemple ci-dessous réalisé par Google :

Exemple de sprite utilisé par Google sur son site

Il suffit ensuite d’utiliser les propriétés CSS de « background-img » et « background-position » pour pouvoir afficher la partie souhaité de l’image.

Les images chargées à travers CSS ne sont chargés qu’une fois alors que les images insérées en HTML sont chargées autant de fois que nécessaire. L’utilisation de Sprite permet donc de réduire considérablement le temps de chargement des interfaces car c’est ici leur principale utilité.

Vous trouverez l’article à l’adresse http://cssglobe.developpez.com/tutoriels/css/ameliorer-temps-chargement-images/#LI.

Il permet de bien se rappeler comment son calculées les coordonnées de position des images de fond CSS et sert de guide pour ne pas rater une étape dans la mise en place des Sprites.

2009
12/13
POSTE PAR
CATEGORIE
HTML / CSS
TAGS


A commentaire