dossiers sur le HTML5, CSS et Javascript pour le web
fontes embarquée dans les pages web
Depuis l'élaboration du CSS2, la question des fontes embarquées s'est
posée. L'insertion des fonte est régie par la directive de style
@font-face dont voici un exemple :
Cette directive a souffert de deux défauts rédhibitoires : des fontes usuelles TTF
trop lourdes pour en rendre l'usage efficace et pire encore, son implémentation
erratique dans les navigateurs. Ceci a justifié sa disparition dans les
recommandations du w3c.
La directive a été implémentée finalement par Internet Explorer , mais avec
une particularité : utiliser un format de fonte nouveau défini par Microsoft,
le format EOF (EMBEDDED OPENTYPE). Comme le format se doit d'être
unique, l'attribut format() disparait de la syntaxe de src.
Ce format autorise des fontes légères (30 ko), en n'utilisant qu'un système
restreint de caractères et en compressant les fichiers. Aucun des navigateurs
hors IE ne l'a utilisée.
Le format WOFF date de 2008 et est une proposition de
Mozilla pour fournir un format de fichier pensé spécialement pour le Web. Tous les
avantages du format EOT sont présents.
Ce format est ouvert, il jouit de la force conjugué de Mozilla et de Google.
Il est actuellement reconnu par le w3c et a donc
vocation à devenir le format de référence pour les polices typographiques
sur Internet. Le plus important reste cependant que tous les fabricants
de navigateur ont franchi le pas et implémentent son support.
Le dossier qui constitue cet article est un aide mémoire. Il n'est
pas complet. Il a vocation à rappeler les fondamentaux implémentés
sur tous les navigateurs et signaler des particularités un peu
délicates. Il a de par sa nature vocation a être évolutif.
Jusqu'au HTMl4, le fonctionnement des balises se fait de
manière autonome. Le JavaScript apparaît uniquement lorsque
l'on a besoin d'interagir avec le D.O.M. (Modèle Objet de
Document) pour créer ce que l'on appelle le HTML dynamique.
L'usage le plus courant est la gestion des événements utilisateur.
Avec AJAX, une antorse est faite avec le HTML classique :
Ajax est partie prenante du D.O.M. et régit de façon nouvelle la
relation client-serveur. L'usage d'un langage de script devient
une nécessité. Un pas supplémentaire est fait en HTML5 où cette
fois une balise ne peut fonctionner qu'en utilisant un langage de
script et pour l'instant, c'est l'ECMAscript qui est défini
comme langage normal d'action avec la balise <canvas>.
Le dossier joint est un exposé complet sur les méthodes et attributs
de programmation de la balise <canvas>. Toutes le primitivs
sont illustrées par les pages d'exemple fournis dans le fichier ZIP.
Le bandeau de la page JavaScript comme l'illustration ci-dessous
constituent un test sur la balise <canvas>
Les dossiers sur le SVG apparaissent aussi bien dans la partie graphismes
que dans la partie HTML: en effet, sans nier l'importance de la création de
graphisme vectotiels pour la bureautique ou l'illustration, le plus souvent
la phase de création graphique est suivie d'une pixélisation : longtemps les
logiciels de traitement de texte et le web, voire la PAO n'ont accepté que les images
bitmap, mais même aujourd'hui, les formats vectoriels y restent mal implémentés.
Il semblerait qu'avec le HTML5, le format vetoriel SVG soit
bien accepté. Aussi, le plan de travail de nos atelierrs a été le suivant :
d'une part, étudier le format SVG en tant que langage d'édition; et d'autre part,
voir ce qui actuellement passe bien dans l'interprétation du SVG en
bureautique (OpenOffice), en édition d'image (GIMP) et sur le web (les navigateurs, en
particulier Firefox, Chrome, Opera, Safari/Windows et Internet Explorer)
Scalable Vector Graphic : les fondamentaux
1. introduction au format svg
2. La structure du texte au format SVG
3. questions de style
4. quelques éléments balisés basiques
5. textes
6. chemins (ou paths)
7. compléments pour les textes
8. l'image comme forme élémentaire
Scalable Vector Graphic : approfondissements
1. le groupement
2. les balises <defs> et <use>
3. Les transformations
4. Les dégradés de couleur
5. remplissage par un motif (pattern)
6. le clipage
7. les masques
Scalable Vector Graphic : particularités
1. feuilles de style CSS
2. insertion de fichier SVG dans un fichier HTML
3. la balise <svg> du HTML5
4. Le DOM et SVG
Les navigateurs récents permettent tous l'intégration dans une page web
d'images au format svg sous forme de texte xml inclus dans une balise <svg>.
L'image de la tulipe de droite n'est donc pas réalisée à partir d'un fichier externe.
Sa description est interne à la page. On peut le constatant en visualisant le
source de la page actuelle.
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
width="256"
height="443"
id="svg_tulipe">
<g transform="translate(-331.29621,-186.29591)"
id="layer2" style="display:inline">
<g id="g3017">
<path
...... les balises xml ......
</svg>