Comment installer les Webfonts localement


Les webfonts sont de plus en plus utilisées dans les sites mais manquent souvent à l’appel lorsqu’il s’agit de préparer le travail avec Gimp ou d’écrire un document avec LibreOffice. Google propose une méthode d’installation qui n’est pas complète sur la page de  GoogleWebFonts. Nous allons faire en sorte qu’elles soient disponibles pour toutes les applications installées.

Prérequis

Il faut compter 1Go d’espace disque disponible pour l’installation et il faut installer le logiciel mercurial :

yum install -y mercurial

ou

apt-get install -y mercurial

Installation

mkdir -p ~/.fonts/truetype/google-fonts/
hg clone https://googlefontdirectory.googlecode.com/hg/ ~/.fonts/truetype/google-fonts

Après beaucoup d’attente un message comme celui-ci dessous s’affiche :

 6208 files updated, 0 files merged, 0 files removed, 0 files unresolved

Il est possible de mettre à jour le cache des fontes si vous êtes super-utilisateur :

sudo fc-cache -f -v

Mise-à-jour automatique

La mise-à-jour est assez simple :

hg pull -u ~/.fonts/truetype/google-fonts

Pour rendre le processus hebdomadaire il faut utiliser le système de cron en ajoutant une ligne après celles déjà existante :

crontab -l | (cat; echo "@weekly hg pull -u ~/.fonts/truetype/google-fonts") | crontab -

Pour vérifier que tout a fonctionné il suffit alors d’afficher la crontab avec la commande suivante :

crontab -l

Conclusion

Maintenant vous pouvez profiter des webfonts mais pas les personnes aves qui vous utilisez votre machine. Pour ce faire il faut avoir les droits super-utilisateur et utiliser /usr/share/fonts/truetype/google-fonts à la place de ~/.fonts/truetype/google-fonts.

Publicités

2010 : liens de la semaine 5



Python

Cette semaine Logilab hébergeait un sprint sur Mercurial et une partie de l’AFPY était en déplacement au FOSDEM. La semaine prochaine devrait être riche en retours d’expériences.

L’article de la semaine de l’AFPY :

Python WAW 2010 : Semaine 5

PostgreSQL

PostgreSQL 9.0 introduit la réplication à chaud. C’est une très bonne nouvelle pour ce concurrent d’Oracle :

Hot Standby et Streaming Replication

Web

Vous avez besoin d’images génériques pour tester vos sites ? Ce site reprend le principe du Lorem Ipsum avec les images en autorisant à paramétrer la taille directement dans les urls :

Dummy Image Generator Is the Lorem Ipsum of Images

Un bon article les tests fonctionnels en JQuery :

How to Test your JavaScript Code with QUnit

Pour ceux qui veulent savoir à quoi sert CSS3, voici une série de démos sur ses capacités :

47 Amazing CSS3 Animation Demos

2010 : les liens de la semaine 4


Cette  rubrique va sans doute devenir mensuel suite à la fusion de la partie Python avec la rubrique de l’AFPY. Au programme de cette semaine : Les grammaires en  Python, quelques liens utiles et beaucoup de lien autour des frameworks Web :

Python WAW 2010 : Semaine 4

Une question qui revient souvent : mais où allons-nous héberger notre projet ?

Une page wikipedia a été créé dans le but de recenser les plateformes d’hébergement de projets qu’elles soient gratuites ou payantes :

Comparison of open source software hosting facilities

Enfin un article qui montre qu’il est possible d’écrire un sélectionneur de thème en 200 secondes en jQuery :

Quick Tip: How to Create a Theme-Switcher in 200 Seconds

2010 : liens de la semaine 1


Cette semaine a été très productive du côté des blogueurs et en particuliers chez les développement autour du core Python.

Python

Pour ceux qui ne connaissent cette boîte de Pandore qu’est le GIL (Global Interpretor Lock) en Python voici un très bon article qui mesure son effet dans le traitement des entrées/sorties avec des systèmes multi-processeurs ou multi-cores :

The Python GIL Visualized

Jesse Noller rappelle les but initiaux du projet Unladen swallow en partie sponsorisé par Google et signale malicieusement en fin d’article qu’une proposition de fusionner leur travail dans Python Core pour Python 3 :

UNLADEN SWALLOW: PYTHON 3’S BEST FEATURE.

Tarek Ziadé, notre président bien aimé, présente les nouvelles fonctionnalités en cours de discussion pour la prochaine version majeure de Distutils, ce qui intéressera tout ceux qui publient des eggs :

Possible new features for Distutils 2.7

Mark Mruss fait une présentation détaillé des ‘docstring’ – ces commentaires qui décorent vos modules, vos classes et vos fonctions – et montre quelle utilisation avancée de celles-ci peut être faite (documentation, tests) :

Introducing Docstrings

Encore un article sur la préparation de la distribution de code qui montre comment mettre en place facilement des scripts  de pré-traitement et de post-traitement :

Using setuptools entry points

La première revue complète du livre « Dive Into Python 3 » (Au cœur de Python 3) :

Book Review: Dive Into Python 3

Enfin deux articles sur les fonctionnalités que les gestionnaires de projets veulent dans mercurial. Dans le premier cas il s’agit de Python-dev qui est censé être migré entièrement cette année sous mercurial :

Where the Hg transition stands

Le deuxième est un développeur qui fait pas mal de Django (vous aimerez sans doute aussi son article free VS free) :

DVCS Ponies

Plone

Voici la description d’un problème récurrent pour les sites multilignues en Plone : comment réordonner des éléments dans une page :

Ordering objects in folders with multilingual sites

Une des solutions les plus faciles à mettre en place est d’afficher toutes les langues lors du tri pour être sur que le Javascript se comporte correctement. L’autre est de demander au Javascript de ne prendre en compte les rangs réels des contenus déplacés plutôt que le rang à l’affichage.

Alex Clarck montre comment installer Plone juste avec buildout en 5 minutes, sans avoir à installer l’unified installer ou Paster :

No, really, you can (just) use Buildout to install Plone

WEB

Encore une fois je terminerai par des liens plus centrés sur le développement Web en général et jQuery en particulier.

Réaliser des animations en jQuery en 7 étapes :

jQuery Animations: A 7-Step Program

Un visualisateur de contenu (d’images) à l’épreuve des balles :

A Bullet-Proof Content Viewer

Personnaliser les événements et l’API des Événements Spéciaux dans jQuery :

Custom Events, and the Special Events API in jQuery

Internet Explorer 8: our future?


Today I just install Internet Explorer 8 without modifying anything after the installation. I want to run basic tests on sites

Acid tests 1 and 2 are perfect… then acid 3 give this:

Acid 3 test with Internet Exporer 8

Acid 3 test with Internet Exporer 8

Internet Explorer 8 result after closing all error popups

Internet Explorer 8 result after closing all error popups

I hope this is just a release error…

De l’ergonomie des formulaires


Aujourd’hui un client m’a demandé comment rajouter un sous domaine chez gandi. Pas de problème, j’en profite pour en créer un aussi pour mon prochain billet.

  1. se connecter
  2. cliquer sur l’onglet « Administration »
  3. cliquer sur le nom de domaine choisi
  4. en bas de la page, dans les « Paramètres techniques », il faut choisir « Gérer les zones »
  5. choisir « Ajouter un enregistrement » en bas de la page
  6. Type: A ou CNAME
  7. Nom: sous domaine à créer
  8. Valeur: adresse IP (type A) ou nom réel de la machine (type CNAME)

La page « Gérer les zones » est mis à jour.

Mais une heure plus tard le nouvel enregistrement à disparu. Tiens, un fantôme dans la machine…
Je recommence la même série de manipulation et je cherche ce que j’ai pu raté.
En fait la constatation finale n’est qu’une étape car un bouton est apparu en haut de la page, à l’opposé des autres boutons. Très bien intégré dans la charte il passe inaperçu au premier coup d’œil. Le bouton dit « Valider les changements ».

Outre le fait que lors de l’ajout du nouvel enregistrement rien ne disait explicitement qu’il était temporaire, le fait que ce bouton apparaisse en haut et soit noyé dans la charte alors que les autres boutons sont en bas de la page est un bon exemple de ce qu’il ne faut pas faire : seule une personne connaissant déjà cette interface va remarquer cette nouvelle zone ou des boutons sont apparus comme par magie. Dans un cas pareil il faudrait avoir un décrochement de la charte graphique pour mettre en avant ces nouveaux boutons et mettre en avant leur importance pour la suite des opérations.

Pour l’instant, nos attendons notre sous-domaine pour tester un nouveau site en conditions réelles.
C’est long d’attendre…

How to add a fixed table header with a vertical scrollbar in content


Update : Now IE9 support modern CSS styles, then you should not use the tip describe here !

 

 

Today I loose my day on a specific IE7 bug:
it doesn’t take in account fixed height and overflow in table structure.

The concept is to use the thead tag (the tfoot tag if needed) for the fixed part and the tbody tag for the scrolling part:

<table>
  <thead>
  </thead>
  <tbody>
  </tbody>
</table>

With firefox 2 you just need this CSS code:

table>tbody {
  overflow: auto;
  height: 280px;
  overflow-x: hidden;
}

Simplicty, efficacity.

With IE7 you need to cheat and to add an extra div tag which support the overfllow rule. The div tag height must large enough to contain the table: thead height + tbody forced height.

<div class="tableContainer">
  <table>
    <thead>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

The CSS rules are now more complex:

div.tableContainer {
  width: 90%;       /* table width will be 99% of this*/
  height: 320px;    /* must be greater than tbody*/
  overflow: auto;
  margin: 0 auto;
}

table {
  width: 97%;  /*100% of container produces horiz. scroll in Mozilla*/
  border: none;
  border-spacing: 0px;
  background-color: transparent;
}

table>tbody {
  overflow: auto;
  height: 280px;
  overflow-x: hidden;
}

With that code every tr tag height is set to 280px on IE7, we need an extra rule:

table>tbody tr {
  height: auto;
}

But the thead is always glue with the tbody. We need to make it relative:

table>thead tr {
  position:relative;
  top: 0px;/*expression(offsetParent.scrollTop); IE5+ only*/
}

This is the fifth implementation of the day to fix this bug. I don’t know how to thanks Microsoft to make me earn money on customers. With Internet Explorer I don’t need to buy a Wii the improve my mind.

Ajouter un lecteur de mp3 à votre site Plone


Voici un lecteur simple à installer et à utiliser:
Dewplayer, lecteur mp3 pour page web
Dans les points importants à remarquer, le première est qu’il est vert, ce qui ne va pas avec toutes les chartes graphiques, et surtout qu’il ne lit pas les tags mp3. Pas moyen de savoir quel morceau est en court de lecture dans la version « multiple ».
Voici un exemple de macro metal pour l’intégrer dans votre site: mp3player.pt

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
      i18n:domain=”plone”>
<body>
<div id=”portal-mp3-player”
     metal:define-macro=”player”
     i18n:domain=”plone”>
<object width=”240″ height=”20″ type=”application/x-shockwave-flash”
        data=”dewplayer-multi.swf?mp3=sound-theme/track1.mp3|sound-theme/track2.mp3″>
  <param name=”movie” value=”dewplayer-multi.swf?mp3=sound-theme/track1.mp3|sound-theme/track2.mp3″ />
</object>
</div>
</body>
</html>

À noter:

  • il faut au préalable télécharger le fichier swf à la racine de votre instance dans un ATFile ou un PloneExFile
  • les morceaux sont séparés par le caractère « | »
  • le chemin des morceaux est relatif par rapport à la racine de l’instance Plone: pas de « / » pour commencer le chemin

Voici le petit morceau de code à rajouter dans votre main_tempate.pt:

<metal:mp3player use-macro="here/mp3player/macros/player">
  MP3 Player in Flash
</metal:mp3player >