MARIE & JULIEN - Mot-clé - googleAvec des vrais morceaux de graphistes dedans !!2023-10-02T13:47:55+02:00urn:md5:55f0cf05bb0a4bea5d0d26493e80bfbbDotclearGoogle font API : l'inutile "révolution"urn:md5:34497344c43afcdb327a41ca60add84c2010-05-23T13:26:00+02:002010-05-23T12:28:42+02:00Julienressourcesgoogletypo<p>Lors de google I/O, google à annoncé en grande pompe, avec ses airs de sauveurs du web qui commencent à nous être familier, une “avancée révolutionnaire” permettant de rendre le web plus beau. J’ai nommé la <a href="http://code.google.com/intl/fr/apis/webfonts/docs/getting_started.html">google fonts API</a></p>
<p>Cette “avancée” consiste à proposer une bibliothèque (assez pauvre) de typo, et il suffirait au webmaster d’insérer un simple code fourni par google pour que cette typo soit embarquée dans son site. Magie.</p> <p>Vu les commentaires enthousiastes à cette news (ex : merci google, depuis le temps que j’attendais ça, le web avance), je me pose des questions sur le niveau technique des commentateurs, tant la solution de google est faible et surtout en retard. En effet, le support des typo comme le propose google est disponible depuis… Internet Explorer 4. Le dernier navigateur à s’y être mis est firefox 3.5, mais depuis sa sortie il est admis que le suport des typos non système en HTML est maitrisé et efficace. Google n’apporte strictement rien avec sa “font API”, si ce n’est un effet de buzz.</p>
<h3>Voici les différents inconvénients de la technique google :</h3>
<ul>
<li><a href="http://code.google.com/webfonts">Une bibliothèque de typo très limitée</a> (18 typos non exclusives)</li>
<li>Une compatibilité sur les navigateurs imparfaite</li>
<li>Une fausse simplicité du code qui e fait appelle d’autres portions de codes</li>
<li>l’utilisation de Javascript (pas de JS, pas de typo)</li>
<li>Les typos hébergées par google</li>
<li>Un appel au site de google à chaque fois qu’une typo est demandée</li>
</ul>
<p>En fait le principe est le même que quand vous appelez jQuery chez google au lieu de l’héberger chez vous par exemple.</p>
<h3>Vous pouvez faire très facilement ce que propose google, et même bien mieux, avec plus de facilité</h3>
<ul>
<li>Utilisez le code CSS @font-face, compatible sur tous les navigateurs du marché (IE 4+, firefox 3.5+, safari, safari mobile iphone ipad, Chrome, Chrome lite android, Opéra… Comme vous le voyez c’est très bien implémenté et très robuste)</li>
<li>Il sera fonctionnel même avec le JS désactivé</li>
<li>Vous avez accès à toutes les typos que vous souhaitez (y compris à celle que vous avez créé exprès pour votre site) et non pas à une dizaine (pourvu que leur licence le permette)</li>
<li>La typo est hébergée sur votre serveur</li>
<li>le code nécessaire est très simple</li>
<li>C’est une implémentation standard qui ne vous oblige pas à dépendre d’une entreprise tierce pour le rendu de votre site</li>
</ul>
<p>Je suis assez déçu que google joue les chevaliers blancs sur ce coup alors qu’il ne fait que compliquer la tâche des gens, les obligent à passer par leur serveur et n’encourage pas les standard. Le seul point positif c’est peut être que comme ça, la technique va être connu et que les gens vont enfin utiliser des typos non standard dans les sites web.</p>
<h3>Si la technique vous intéresse, voici quelques ressources vous permettant d’inclure de la typo non standard en html :</h3>
<ul>
<li><a href="http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&cat_id=FontDownloads">Des typos open sources gratuites sous licence SIL</a> (dont certaines utilisées dans la bibliothèque google. Je vous recommande chaudement la célèbre<a href="http://inkboy.fr/fichiers/inkboyfont.zip"> inkboyfont</a> en licence SIL :D (<a href="http://inkboy.fr/fichiers/sample_grid_inkboyfont.jpg">aperçu</a>)</li>
<li><a href="http://www.fontsquirrel.com/">Des typos gratuites sur un site très bien fait</a>, avec des <a href="http://www.fontsquirrel.com/fontface">packs prêt à l’emploi</a></li>
<li><a href="http://www.fontsquirrel.com/fontface/generator">un outil vous permettant de transformer une typo existante en typo compatible tous navigateurs</a></li>
<li><a href="http://www.fontspring.com/">Une fonderie spécialisée dans les typos web ready</a></li>
<li><a href="http://www.fontfont.com/">Les licences typos les plus connues (Meta, Din) disponibles pour le web</a></li>
</ul>
<p>Tout ce dont vous avez besoin pour que ça marche c’est une typo, et ce malheureux bout de code dans votre CSS:</p>
<pre>
@font-face {
font-family: 'matypo';
src: url('matypo.ttf');
src: local('matypo.ttf'),
url('matypo.woff') format('woff'), url('matypo.ttf') format('truetype');
}
</pre>
<p>la dernière ligne est là pour assurer une compatibilité totale <a href="http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/">“bulletproof”</a> si vous avez plusieurs formats de typo</p>
<p>Voilà, c’est tout ce dont vous avez besoin !! Vous appelez la typo une seule fois dans votre CSS, et ensuite vous l’incluez dans votre code comme si c’était une typo système.</p>
<p>Vous n’avez quand même pas besoin de google pour ça non ? Si la réponse était “oui”, il serait temps de vous mettre à jour techniquement <img src="/themes/default/smilies/wink.png" alt=";)" class="smiley" /></p>À nous la gloire !!urn:md5:470db932a8f424908a56a8d87b84bbeb2007-10-27T21:06:00+02:002007-10-27T20:27:14+02:00Juliennewsbloggooglepage rank<p>À nous la gloire, le succès, la renommée internationale ! Google nous a ce soir même gratifié d'une distinction de marque: un magnifique pagerank de.. 1, allez, plus que 14 et on à un pagerank de 15, record jamais atteint ! <img src="/themes/default/smilies/laugh.png" alt=":-D" class="smiley" /></p> <p>C'est le début de la gloire !! À nous la notoriété, la renommée, les fererro rochers aux soirées de l'ambassadeur, la cocaïne et les femmes aux mœurs légères mais toutefois consentantes, les fontaines de champomy ruisselant dans mille coupes en cristal (oui, j'aime pas le champagne, je sais ça craint <img src="/themes/default/smilies/normal.png" alt=":-|" class="smiley" /> )</p>
<p>pour fêter ça on à fait venir une limousine dans l'appart (en la treuillant par le balcon), et 6 gogo danceuses chacune déguisées en lettre de couleurs formaient le mot GOOGLE en dansant le french cancan et en jetant du caviar en l'air <img src="/themes/default/smilies/smile.png" alt=":-)" class="smiley" /> ensuite on à fait tirer un feu d'artifice dans la salle de bain.</p>
<p>Je vous raconte même pas la fiesta qu'on fera pour le PR de 2 ! :POMPOM:</p>
<p>(et marie me souffle dans l'oreillette que si il y a des filles aux mœurs légères mais toutefois consentantes, il n'y a pas de raisons pour qu'il n'y ai pas de chippendales huilés sur des plages californiennes de sable fin)</p>
<p>Pour parler plus sérieusement, ce blog reçoit en moyenne 60 visites par jour, avec des gros pics quand des billets sont postés (bizarrement). Le référent le plus important est l'accès direct, je suppose donc que les lecteurs arrivent en majorité grâce à leurs favoris ou leur feed readers. Vous passez en moyenne 3 minutes sur le blog, pour lire 2,62 pages par visite.</p>
<p>Les pages les plus visitées jusqu'à maintenant sont la page d'accueil, la <a href="https://mariejulien.com/?post/2007/09/12/Concours-kob-one-RATP">page sur le concours RATP</a> et la <a href="https://mariejulien.com/?category/concours-a-truffes">rubrique des concours à truffes</a>.</p>
<p>Je remercie d'ailleurs <a href="http://www.point-graph.net/">Goulven</a> qui à redirigé l'adresse de feu son blog jevousprendspourunetruffe.com vers ma catégorie de concours bidons :KEUPIN: . Maintenant il essaye de me la revendre 1 million de dollar mais je vais tenter de faire baisser ce prix à 14,90€/an, on sait jamais, sur un malentendu ça peut marcher <img src="/themes/default/smilies/smile.png" alt=":-)" class="smiley" /></p>
<p>:TCHIN:</p>