Valéry-Xavier Lentz.eu

To content | To menu | To search

Tag - Navigateur

Entries feed - Comments feed

Friday 28 August 2009

@font-face à la place des images typographiques

By Valéry on Friday 28 August 2009, 23:42 - Internet

La sortie de Firefox 3.5 et sa généralisation progressive (la mise à jour est désormais proposée aux utilisateurs de la version 3), signifie notamment que le public pouvant bénéficier des sites utilisant la propriété CSS @font-face va connaître une explosion démographique.

Avant : les créateurs de sites web ne pouvaient utiliser que des polices de caractère installées sur les postes des utilisateurs. Concrètement ça limitait la typographie web à une poignée de polices, essentiellement Times New Roman, Georgia, Arial, Verdana... (qui a dit Comic Sans ?!).

Maintenant : en fait c'est pareil si l'on souhaite le même rendu sur tous les navigateurs (pour quoi faire ?) mais si l'on veut aller plus loin il est désormais possible d'utiliser la police de son choix... enfin si la licence d'utilisation de celle-ci l'autorise, il faut donc préciser : la police de son choix parmi les quelques-unes l'autorisant Oui aussi surprenant que cela puisse paraître à beaucoup de monde, les typos s'achètent aussi, probablement pour faire vivre les typographes.

Donc si vous avez eu le bon goût de vous doter de Safari 4, Firefox 3.5 ou la RC d'Opéra 10, vous ne verrez plus le web de la même façon. Installez l'un de ces navigateurs si ce n'est déjà fait et visitez ces quelques sites ou encore désormais valeryxavierlentz.eu ou dirtyclubber.com. Vous ne remarquez rien ? Parfait. Mais c'est plus joli.

Alors naturellement, il existait et il existe des moyens d'afficher des typos exotiques et sophistiquées aujourd'hui. Flash et Javascript sont mis à contributions dans des techniques pittoresques de remplacement d'images comme sIFR par exemple. On peut également utiliser des images dynamiques générées par le serveur. Le CMS SPIP (par exemple, au hasard) propose ce type d'images typographiques nativement. Cette technique est en pratique limitée aux titres mais permet des traitements que @font-face ne permettra pas à ma connaissance (cf. les techniques proposées par Arnaud Martin pour SPIP).

Il reste la question des performances web. C'est à dire ce qui permet d'éviter la formation de toiles d'araignées sur la souris de vos visiteurs attendant lle chargement de vos pages web. Une typo ça pèse... 153 ko pour celle que je viens d'installer sur taurillon.org, la très discrète LiberationSerif. Sur zzz.rezo.net, Fil a deux typos pour ce poids là.

Alors qu'est-ce que ça donne sur la page d'accueil de l'animal (cache navigateur vide) ? Selon Firebug :

  • avec les images typographiques : 76 requêtes (oui, je sais...), 624 ko
  • avec @font-face : 65 requêtes (nettement moins pire déjà),738 ko
  • avec du Georgia : 64 requêtes (bah oui, une de moins forcément) et 584 ko (le poids de la typo en moins, donc).
Même si la page d'accueil comportait onze titres en images, elle pèse moins qu'avec le chargement de la typo (10 ko chacune environ). Toutefois, la multiplication des requêtes (c'est à dire les échanges entre le navigateur et le serveur pour charger l'ensemble des éléments constituant la page) augmente les délais. À la louche (car c'est difficile à dire avec les widget tiers), deux secondes de plus qu'avec @font-face. Sans cette dernière c'est encore deux secondes de moins environ.

Il reste à trouver une typo plus jolie pour ce site, et pas trop lourde. Demander l'avis des 4 rédacteurs en chef aussi, peut être.

4 comments

Saturday 10 November 2007

Flock, le navigateur de l'ère du web 2.0

By Valéry on Saturday 10 November 2007, 00:00 - Internet

Fondé sur Firefox, Flock permet en outre d'intégrer le web social de son utilisateur dans sa navigation.

J'ai installé hier, avec scepticisme, le navigateur Flock, qui utilise la technologie de Mozilla Firefox. Je suis complètement séduit.

Tout en conservant les habitudes de navigations de Firefox, et la compatibilité avec — parait-il — la plupart des extensions, Flock ajoute une couche supplémentaire de fonctionnalités afin d'intégrer complètement les nouveaux usages du web dans la navigation.

Outre la gestion, classique mais d'une mise en oeuvre agréable, des fils RSS et des favoris, la particularité de Flock est d'intégrer la gestion des amis ou des médias issus des principaux réseaux sociaux.

Ainsi, il est possible de voir dans une barre latérale ses amis de Facebook, Twitter, Youtube ou Flickr et leur statut. Si tous les réseaux ne sont pas encore disponible, parions que cette liste s'étendra bientôt avec l'arrivée d'OpenSocial et la future plateforme pour développeurs de MySpace.

Dès aujourd'hui il est possible de naviguer entre ses contacts, plus simplement même qu'en étant directement connecté sur Facebook, de passer en un clic aux contacts Youtube, d'envoyer un message, accéder à leur page ou voir les nouvelles photos / vidéos postées.

La boîte à outil des bloggeurs

À ces fonctions s'ajoutent un bloc note pour conserver en mémoire des textes ou images issues du web, lesquels peuvent être exportés vers une interface de rédaction de notes pour les bloggeurs, compatible avec plusieurs plateformes répandues (hélas pas celles que j'utilise : blogspirit et Spip). Il est possible aussi d'envoyer directement des images depuis son poste de travail vers les sites auquel on est abonné.

Enfin, une barre de « médias » permet de suivre les nouveautés de sites de partage d'images ou de vidéos. D'un usage très pratique, elle me permet par exemple d'avoir un aperçu très rapide des photos importées récement par tous mes amis Facebook.

En résumé je vois trois avantages à l'utilisation de Flock :

  • des fonctionnalités « sociales » très utiles, dont je ne disposais qu'avec un très grand nombre d'extentions Firefox ou de modules Netvibes ;
  • une facilité de navigation dans un grand nombre d'informations encore accrue. Je préfère our certaines actions passer désormais par Flock plutôt que de naviguer dans les menus web de Facebook.
  • une compatibilité avec un grand nombre de modules complémentaires déjà existant pour Firefox

J'ai passé Flock en navigateur par défaut sur mon PC à domicile, je conserve cependant à côté ma configuration de Firefox avec de multiples extensions pratiques pour le développement web. L'installation importe les favoris et la configuration de Firefox, mais pas les extensions.

J'ai également testé Prism, basé également sur les technologies Mozilla. Il sagit de créer sur votre ordinateur des raccourcis vers des application web qui vont en fait se comporter de la même manière qu'une application Windows : icones dans les différents menus, présence dans la barre des tâches, etc.

Il s'agit d'une étape de plus vers la complète intégration du web et du poste de travail. L'intérêt est mineur à première vue mais cela peut faciliter la tâche de ceux qui n'utilisent plus que le « Google Office » pour travailler.

Saturday 11 February 2006

Premier regard sur IE7

By Valéry on Saturday 11 February 2006, 00:00 - Internet

Je viens d'installer la version beta du nouvel Internet Explorer 7. Pourquoi un nouveau navigateur chez Microsoft ? Tout simplement parce que l'ancien a plusieurs années ce qui fait une éternité en matière de nouvelles technologies.

L'apparition de Firefox - que j'utilise au quotidien - a fait bouger les choses et la perte rapide de parts de marché a poussé les hommes de Bill Gates à lancer une nouvelle version - qui devait être couplée à Vista, le futur successeur de Windows XP, mais celui-ci a pris du retard et il serait risqué que les utilisateurs prennent l'habitude des navigateurs alternatifs. Le monopole étant ébranlé et la concurrence - libre mais très faussée - enfin un peu rétablie, les développements repartent.

Disons-le tout de suite : IE 7 a l'air d'une réusite. Toutes les bonnes idées de Firefox ont été reprises et d'autres ajoutées (même les racourcis claviers et certaines icones sont les mêmes). Plus de menu mais des boutons qui se déroulent, prise en charge des fils d'info RSS (ce qui fera exploser le standart dès que IE7 sera sorti), navigation par onglets, meilleure prise en charge des standarts (pas au poins de passer l'acid test cependant, mais de quoi bénéficier enfin de nouvelles posibilités de design web qui n'étaient jusque là pas compatibles avec le leader du marché et donc pas utilisés), possibilité e faire des recherches ailleurs que sur MSN en ajoutant des moteurs, etc. et quelques « plus » : définition de pages d'accueil multiples (qui se chargent au démarrage dans plusieurs onglets), lissage du texte (comme sur les Mac, ce qui améliore la lisibilité). Seul regret à ce stade : les liens s'ouvrent par défaut dans une nouvelle fenêtre et non dans un nouvel onglet (pour ne pas désorienter les utilisateurs ?) et il faut un clic droit pour en profiter. je n'ai pas trouvé d'option pour modifier ça.

Il me reste à voir ce que mes sites favoris (et ceux de mes clients) donnent sur le nouveau navigateur : à priori quelques bugs d'affichages sur le Taurillon qui n'existent que sur IE6 mais pas sur Firefox sont résolus comme par miracle (comme quoi mon code était correct mais pas le navigateur).

Télécharger IE7 beta (version test mais parfaitement utilisable et que vous pouvez désinstaller - mais pourquoi faire ?) :

http://www.microsoft.com/windows/IE...

Pour Firefox (version stable avec en plus d'IE, y compris la version 7, la possibilité d'ajouter des extentions, c'est à dire des fonctions supplémentaires) créées par une grande communauté de développeurs bénévoles et d'utilisateurs. Il est disponible pour Window / Mac / Linux :

http://www.ie7.com/ (ça c'est un gag)

http://www.mozilla.com/firefox/

Enfin pour les aventuriers, essayez Opera, désormais gratuit. La version stable est la 8.5 mais une version 9 est en préparation. L'avantage de Opéra ? C'est de très loin le plus rapide des navigateurs (on parle là de temps d'affichage des pages).

http://opera.com/