Archive pour le mot-clef ‘web’

Faire du neuf…

Rafraîchissement du thème global, un grand ménage de printemps et il était grand temps.
Pourquoi ?

  • Le design était vieillissant, la dernière version majeure avait trois ans et demi,
  • les dernières évolutions de WordPress me permettaient de me séparer de certain plugins,
  • j’avais sous la main un plugin intégralement re-codé que je n’utilisais pas encore ici,
  • …et je crois surtout que ce blog avait besoin d’un p’tit peu de clarté.

Lire le billet »


Un jour nous devrons repenser les rollovers…

Page d'accueil de la FNACJe passe ma souris sur le menu, un sous-menu s’ouvre, je clique, j’arrive directement sur la page qui m’intéresse.

1 clic, no more ! Ça laisse 2 clics pour aller encore plus loin sans dépasser la loi des 3 clics ! Banco ! Service rendu !
…ou pas…

Perso, j’ai toujours un peu de mal à me faire à l’idée que, quand je surfe, il faut que je fasse gaffe à l’endroit où je pose mon pointeur, ça m’agace !
Bon, ok, je suis un frénétique du mulot, il n’empêche !

La page d’accueil de Cdiscount par exemple Lire le billet »


Online now

Ca fait quelques jours que cette petite vidéo me trotte dans la tête. Je la trouve bien ficelée et il y a beaucoup d’éléments : les chocs virtuel / réel, le nombre grandissant d’interactions, des effets positifs et négatifs…

Vraiment sympa à regarder.

Online Now de Pocket Jakes sur Vimeo.


Optimiser et sécuriser son site web

Votre site est-il convenablement sécurisé ? Que se passerait-il si un virus venait à s’installer sur votre dernière création ? Combien de temps vous faudrait-il pour remettre tout ça en ordre ?

C’est en cherchant à optimiser mon site en passant par un Content Data Network (CDN) que je suis tombé en rafale sur toute une panoplie de trucs sympas et efficaces.

CloudFlareCloudflare

CloudFlare est à la base un CDN. Tout bête, il stocke vos contenus statiques sur différents serveurs un peu partout dans le monde pour que votre site s’affiche de manière efficace quel que soit le pays d’appel. J’ai déjà parlé des nombreux avantages des CDN dans un billet précédent (et je n’ai pas changé d’avis).

Pour cette première partie, CloudFlare agit de manière assez intéressante et se configure de manière totalement transparente : il vient s’intercaler au niveau des DNS. Pas de nom de domaine étranger à glisser et l’internaute ne s’aperçoit de rien, pour lui, tout se passe chez vous. CloudFlare n’apparaît jamais tant que tout se passe bien.

Si on veut optimiser un peu la chose, on placera un sous-domaine pointant sur le répertoire où sont stockés les fichiers statiques (javascript, images, CSS, etc.), cette méthode permettra de conserver la parallélisation des téléchargements côté client, sachant que les navigateurs ne téléchargent que 4 ou 5 fichiers en même temps pour un même nom de domaine, ajouter un sous-domaine permet donc théoriquement de doubler la vitesse d’affichage du site.

Mais CloudFlare ne fait pas que ça…

Un bon nombre d’options sont disponibles. Vous pourrez à souhait minifier vos éléments statiques (voire même votre html), lutter de manière efficace (puisque mutualisé) contre le spam et les attaques diverses, ou encore précharger les différentes pages de votre site (dans la version payante en revanche).
Au passage CloudFlare offre aussi la possibilité d’activer des « apps » sur son site. La dernière fois que je m’en suis servi c’était une bannière pour informer mes lecteurs sur les dangers de l’ACTA. J’avais un peu oublié la date de cette « cyber journée d’information » et CloudFlare m’a permis de participer efficacement en quelques secondes. Utile.

CodeGuardCodeGuard

J’ai cherché un moment un outil de sauvegarde simple et efficace pour un site web. Il existe un tas de solutions, mais souvent chères ou inadaptées à ce que je voulais faire. CodeGuard me convient bien. Il travaille via FTP, il passe régulièrement voir ce qui a changé sur votre site et récupère les nouveaux fichiers s’il y en a. Tout se fait automatiquement après la configuration et il est gratuit jusqu’à 2 Go de données.

Comme CloudFlare, CodeGuard ne fait pas que ça…

Ce service dispose d’une détection de changements dans les codes, ce qui permet d’être averti à la première infection d’un malware ou d’un virus. Une « TimeMachine » est aussi disponible pour naviguer dans les anciennes version du site. Bien entendu, il est possible (c’est le but ultime) de restaurer son site avant les derniers changements, ce qui peut permettre de sortir d’un mauvais pas un peu plus facilement.

Le seul hic avec CodeGuard consistera à sauvegarder votre base de données si vous travaillez sur un site dynamique. Sur ce point, il y a deux solutions. CodeGuard propose un outil pour effectuer un backup de MySQL mais ce dernier nécessite des droits d’accès par un serveur tiers. Si vous êtes sur un serveur mutualisé, vous n’aurez certainement pas le droit de le faire. La solution de contournement consiste à utiliser un script qui exporte régulièrement votre base de donnée dans un fichier sur votre hébergement. C’est moins réactif, mais CodeGuard sauvegardera les différentes versions directement en FTP.


Utiliser la police de son choix sur son site internet

ArobaseL’intégration de polices de caractères sur un site web a longtemps été un casse tête pour les intégrateurs. On avait diverses solutions à portée de main : du flash, du javascript et quelques bidouilles assez incompatibles entres-elles pour lier directement une police dans le CSS.

Techniquement, si le W3C recommande depuis longtemps l’utilisation de Font-Face, celle-ci n’a pas toujours été implémentée comme il le faut dans les navigateurs. Aujourd’hui, l’horizon s’éclaircit progressivement même s’il faut encore fourber avec plusieurs formats pour arriver à un résultat efficace sur l’ensemble de la gamme des navigateurs. Dans l’ensemble on y arrive assez bien. Démonstration.

Tu l’a acheté ? Chuuuut ! Faut pas le dire sur internet…

Ah ! Un détail avant de vous lancer dans le code : une police de caractère est une oeuvre assimilable à un logiciel sur le plan juridique. Donc on touche au copyright (normal), aux droits d’auteur (un peu) et aux droits de diffusion (surtout). Si vous avez acheté une police, relisez bien les conditions d’utilisation, il est fort à craindre que vous n’ayez pas le droit de la proposer en téléchargement sur votre site web. Logique à priori, vous n’allez pas donner un truc qui se vend…

Sauf que… Les règles de Gutenberg ont un peu de mal avec le monde moderne. Si vous utilisez votre police sur votre site, il faudra bien que la machine de l’internaute la télécharge pour l’afficher. Même si l’utilisateur ne pourra pas (à priori, j’vous connais) s’en resservir dans un autre logiciel, vous placez cette police en téléchargement. C’est un fait. C’est stupide, mais c’est comme ça, sed lex.

L’idéal reste (once more) les polices gratuites ou sous Creative Commons. Perso, j’ai pris l’habitude de me fournir chez Google ou sur DaFont. Quitte à faire un petit don à l’auteur au passage (bah, au prix des polices payantes, ça reste tout bénef’ et vous assurez la pérennité du truc…).

Fourrer tout ça, proprement, dans son CSS…

Aller, une police libre dans une main, un ordi dans l’autre, comme l’ensemble des navigateurs ne comprennent pas tous la même chose, il faudra prendre soin de satisfaire chacun avec son ou ses formats de police préférés :

  • de l’Embedded OpenType (eot) pour Internet Explorer 4+
  • du Web Open Font Format (woff) pour Firefox 3.6+, Internet Explorer 9+ et Chrome 6+
  • et du Scalable Vector Graphics (svg) pour Chrome 3+, Opéra 9+
  • du TrueType (ttf) supporté par Firefox 3.5+, Opéra 10+, Safari 3.1+, Chrome 4+

Attention, l’ordre d’appel des différents formats dans le CSS compte et évitera à un navigateur qui comprend à la fois le SVG et le WOFF de charger le SVG à la place du WOFF. Au passage, ça vous évitera aussi quelques bugs sur certains navigateurs qui se mélangent un peu les pinceaux quand l’ordre ne leur convient pas (tatillons ?).

Pour convertir votre police dans les différents formats nécessaires à la pleine satisfaction les différents navigateurs Font Squirrel sera votre sauveur. Attention, ce dernier vous renverra à la loi si vous lui proposez une police handicapée d’un vilain copyright (et toc !).

Assez bavardé, voici le code magique à placer en tête de votre CSS.

@font-face {
    font-family: 'maPolice';
    src: url('fonts/maPolice.eot?')format('eot'),
         url('fonts/maPolice.woff')format('woff'),
         url('fonts/maPolice.svg#IdMaPolice')format('svg'),
         url('fonts/maPolice.ttf')format('truetype');
}

Explication de texte

  • La directive font-family permet de nommer la police pour les appels dans le CSS.
  • Dans les sources, on refile l’ensemble des formats aux navigateurs. Le navigateur s’arrêtera à la première qui lui convient.
  • Le point d’interrogation après l’extension eot permet de forcer le téléchargement sur IE afin qu’il n’interprète pas ce qui se trouve après ce caractère (ce qui permet d’ajouter les autres sources).
  • Le format eot s’appelle en fait embedded-opentype, l’utilisation d’eot leurre IE9 qui du coup ne connaît pas ce format et chargera le Web Open Font Format plus léger.
  • Dans le format SVG on notera une chaine louche après l’ancre. Il s’agit de l’identifiant du SVG. Vous le trouverez directement dans les premières lignes du fichier, dans une ligne qui ressemble à ça : <font id="IdMaPolice" horiz-adv-x="786" >.

Une fois la police incluse, elle sera utilisable comme les autres directement dans une directive font-family :

body { font-family: maPolice,sans-serif; } 

Optimiser une police de caractère…

En fonction de vos besoins, il est tout à fait envisageable d’épurer une police pour un usage web. Souvent les polices de caractères contiennent des caractères que l’on n’utilise jamais (symboles, autres langues, etc…) et que l’on peut retirer du package.
Pour ça, il existe deux solutions. Les plus courageux passeront par Font Forge, les plus pressés se concentrerons sur Font Squirrel. Dans le mode « Expert » de ce dernier, on trouve une option « Custom Subsetting » qui vous permettra de sélectionner très finement la gamme de caractères ou uniquement les caractères dont vous aurez besoin. On peut facilement imaginer faire passer le poids d’une police de 150ko à 6ko pour un titre de site par exemple. On est alors très proche du temps de chargement d’une image équivalente, et tellement plus accessible !

L’intégration en mode feignasse by Google

Parallèlement à cette technique qui peut paraître un peu longue à première vue, Google vient de lancer une bibliothèque de polices de caractères librement utilisables. On peut chercher, voir, et surtout, on peut intégrer ça dans son site en une seule ligne de CSS. Google fera le reste (et enverra le bon CSS au bon navigateur).

Google web font previewer

La bibliothèque n’est pas encore très fournie et cette API est encore en version Beta, mais c’est particulièrement prometteur.

Si le sujet vous intéresse, je vous conseille cette lecture ou encore celle-ci, et si vous avez vous aussi des petits conseils sur l’utilisation des polices sur le web, je suis preneur !!