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 :

   
@font-face {
    font-family: 'Pacifico';
    font-style: normal;
    font-weight: 400;
    src: url(./css/Pacifico.ttf) format('truetype');
}

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.

téléchargements

 format LibreOffice (500 ko)  format P.D.F. (400 ko)

aide mémoire CSS

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.

téléchargements

 format LibreOffice (450 ko)  format P.D.F. (450 ko)

la balise <canvas> du HTML5

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>

problème de création : vérifier votre navigateur

téléchargements

 dossier au format LibreOffice (1.3 Mio)  dossier au format P.D.F. (956 Kio)  les exemples au format Z.I.P. (296 Kio)

le format svg

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)

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>
			

téléchargements

 dossier au format LibreOffice (4.2 Mio)  dossier au format P.D.F. (3.7 Mio)  les exemples au format Z.I.P. (1 Mio)