03 mai 2006 - 07:10 # web design - typo
sIFR - le problème des fontes enfin résolu?
C'est bien de s'extasier devant web2.0 mais sIFR c'est un des plus vieux problèmes du web design qui est enfin résolu : à savoir les fontes disponibles dans une page web!.
Une fois tous les 1 ou 2 ans il y a un truc qui m'épate vraiment... Certe il y a bien des tendances très intéressante comme les blogs, AJAX et web 2.0... Il y a aussi ces applications d'une nouvelle ère qui apparaissent... Mais ce n'est certainement pas aussi fondamental à mon sens que sIFR.
Le problème des fontes dans une page web
Depuis que je fais des sites (1996), la contrainte majeure de l'HTML a toujours été les polices de caractères : à savoir que le texte affiché dans une page ne pouvait employé que quelques fontes considérées comme le dénominateur commun entre toutes les plate formes. En gros, ça nous laisse le Times, Arial/Hevetica, courrier, verdana et 2 ou 3 typo totalement illisbiles.
Autant dire que j'ai vu plus d'un graphiste totalement déprimé à faire des sites webs alors qu'ils venaient de recevoir le dernier catalogue de typo Emigré
Certe les solutions alternatives n'ont pas manqué :
"On peut pas le faire en HTML, ben nous allons le faire en Image !"
Plutôt marrant au début mais quand on devait réalisé des centaines d'images avec du texte pour un site les coût de production et maintenance explosaient.Heureusement pour nous, de nombreuses solutions de générations d'image texte en batch ou encore on the fly en direct des données dynamiques d'une databse sont possibles.
Pas mal, mais c'était toujours pas la panacée universelle... l'image n'est pas géniale pour l'indexation même quand on remplit les attributs alt.
Microsoft a bien essayé à une époque de lancer la technologie WEFT... (Microsoft web embedded Font) il s'gissait de transformer une police .ttf en un fichier weft qui était stocké sur le serveur. Une CSS déclarait dans la page l'appel de ce fichier qui était chargé par le browser et Internet Explorer nous affichait la typeo automagiquement. Un seul problème de taille : ça ne marchait que sous IE et netscape avait bien sûr développé sa propre technologie qui ne fonctionnait que sous Netscape.
Bref, aucune solution n'a jamais proposé une réponse facile à implémenter et qui respecte toutes les contraintes du média.
La solution
Voici que je découvre sIFR qui est l'oeuvre de Mike Davidson et qui selon moi est la solution la plus élégante que j'ai jamais vue.
Le principe :
- vous codez votre page en HTML tout ce qu'il y a de plus classique en employant les balises <h1>, <h2> ou toutes autres...
- Vos CSS définissent ces tags... Vous pouvez également employez des classes liées à ces tags...
- Vous intégrez le script Javascript sIFR de Mike Ravidson et automatiquement il réécrit le contenu de ces tags par du flash qui contient la police de base. Le flash reçoit le code HTML à afficher dans la police appropriée.
Et voilà, vous avez votre H1 qui est remplacé par le texte en flash avec la typo dont vous aviez toujours rêvé!!!
Allez voir cet exemple et regardez les sources.
Les avantages de cette solution sont :
- c'es du code HTML !!! facile à générer, facile à maintenir, facilement éditable...
- C'est totalement référençable par les moteurs de recherche et dans le cas d'un titre <h1>, j'aime autant dire que c'est assez important
- C'est super élagant comme manière de procder, hyper facile à intégrer avec des CMS ou tout ce qui est un minimum dynamique
- Votre utilisateur n'a pas flash (faut le vouloir à notre époque !), pas de problèmes le teste s'affichera dans la fonte standard de substitution de manière plus classique mais quand même lisible
Quelques Détails du génie de l'auteur de sIFR :
- le contenu de son flash reste copier / collable
- Il interprête les ancres présentes dans le tag à remplacer, <A> donnera une ancre, <strong> du bold
- c'est une merveille de programmation DOM
Je me moque de savoir si c'est AJAX, WEB2.0 ou quoi que cela veut, mais des innovations pareilles, j'en veux bien tout les jours.
Merci à Marin qui
m'a jait décourvrir ce nouveau joujou et qui l'a si bien
mis en oeuvre dans le site qu' Emakina
a avons réalisé pour Proximus
: UglyDuck.be
Pour tout savoir sur sIFR : Introducing sIFR: The Healthy Alternative to Browser Text
| Vos Commentaires  03 05 2006 - 06:38 par gunt [ site ]
Le seul problème à mon sens c'est que pour pouvoir bénéficier de cette fonctionnalité et notamment de l'insertion de ses propres polices, il faut acheter l'éditeur Flash Professionnal 8. Qui coûte la bagatelle de 699€ HT.
Nota : certains sites proposent des fonts adaptés pour sIFR.
Pour information sIFR existe depuis août 1994 :).
04 05 2006 - 03:09 par Etienne [ site ]
question un peu bête ;-) mais pourquoi ne pas utiliser franchement flash pout le site en entier ? 04 05 2006 - 04:44 par obi
une question bête, serait-il possible de grossir le titre ?
exemple : http://www.gwix.net/web_gwix/article.asp?filID=260 04 05 2006 - 07:39 par Laurent [ site ]
> Gunt : je ne vois pas quel studio web professionnel peut à l'heure actuelle se passer d'une licence flash. Es tu sûr pour SIFR en 94? car FutureSplash, l'ancêtre de flash a été produit en 95
> Etienne : pourquoi pas tout le site en flash? car à l'heure actuelle un site à forte teneur éditoriale tout en flash est toujours un problème d'accessibilité pour les moteurs de recherche (a moins de déployer des efforts énormes pour le rendre accessible). D'expérience, tu va te créer plus de problèmes que de solutions avec ce genre de stratégie.
> Obi : on doit pouvoir contrôler la taille des SIFR de la même manière que l'on peut changer la CSS dynamiquement. Faudra scripter un peu, mais il y a moyen.
29 08 2006 - 16:41 par Ced [ site ]
Et avec sIFR 3, on pourrait utiliser les effets Flash 8 (ombres, flou, etc), les pixel fonts, etc. Vivement la sortie !
http://64k.be/index.php/2006/06/15/461-sifr-30-alpha-disponible 16 05 2007 - 13:06 par bertrand
Le flash ne fonctionne correctement que les processeurs pentium et dérivé.
C'est une galère innomable sur X86-64 et j'en parle même pas sur sparc, Sun...
Adobe ne développe des plugins correcte que pour la plate forme windows.
Cette technique ne s'adresse donc pas à l'internet, mais à des intranet limité à windows sur processeur pentium.
17 07 2007 - 15:09 par bourri
--> "Adobe ne développe des plugins correcte que pour la plate forme windows."
ben oui, c'est un peu normal, c'est 90% de la configuration des utilisateurs !! c'est pas pour les 3 fanatiques sous Emac en monochrome sous station graphic Sun qu'Adobe va te mijoter un petit truc.
Restons pragmatique !
24 07 2007 - 18:15 par gagarine [ site ]
@bourri
Je pense que tu fais fausse route...
Nous voulons accéder au web avec des terminaux de plus en plus différent et ça ne fait que commencer (palm, tel mobile, portable, moteur de recherche, future mid d'intel, iphone, etc etc). Ces terminaux sont loins d'avoir tous de processeur i386... pourtant il ne sont pas utilisé par des fanatiques.
Flash à de gros désavantage:
-instable sous linux et mac en tout cas
-compilé pour i386, ppc ET C'EST TOUT (bonjours les performance sur un intel 2 duo... bof bof ou pire un AMD64).
-gourmand en ressource (pas cool pour les portables)
-format propriétaire
-pas facilement adaptable au lecteur (petit écran etc)
Flash est une bidouille intéressante, mais s'éloigne de plus en plus de la direction prise par le web. 08 12 2007 - 16:57 par aga
@bertrand & gagarine
Tout faux. Un autre intérêt de Sifr c'est qu'il ne remplace le texte par du Flash que si le client utilisé le supporte...
Quant à la "bidouille intéressante, mais s'éloigne de plus en plus de la direction prise par le web", Flash n'a pas été fait pour faire des sites de contenu, et n'en a JAMAIS eu la prétention. Et justement, la direction d'Internet ce n'est désormais plus uniquement le contenu. Zieutez du côté de Flex (un framework Flash from Adobe) pour les applications en ligne... Si même dans ce cadre vous dites que Flash n'est pas intéressant, bin... |
| Un commentaire ou une question ...? |
|
 |
Blogroll
Emakinian
Agences
Inspiration
|
Après Measuremap.com, Adaptive Path nous propose sphere.com
