Vous n’avez pas pu passer à côté. J’ai changé le thème de ce blog. L’ancien template datait déjà de quelques années et un petit coup de dépoussiérage était le bienvenu. D’autant que ça m’a fait un très bon exercice pour mettre en pratique mes derniers apprentissages de CSS3.
Au programme :
- page infinie avec JQuery
- un champs de recherche animé
- un design global totalement épuré
- intégration d’une page flickr succincte (encore en cours de conception) et une page twitter (qui pourrait être améliorée)
- l’uniformisation du design sur le tumblr
Pas mal de travail, d’autant que le CSS3 et IE ne font pas bon ménage du tout ! Je dois travailler tout ça prochainement.
Comme vous pouvez l’imaginer, j’ai fait en sorte que l’ensemble soit propre, mais je suis conscient qu’il reste du travail pour perfectionner tout ça. Et puis, il faudra que je m’assure du bon affichage sur iPhone et iPad sans passer par des plug-in exotiques !
A mes minutes (heures, c’est trop long) perdues, je me replonge avec bonheur dans le HTML et le CSS. Le premier étant passé en version 5 et le second en version 3, j’ai de quoi assurer un bon moment de plaisirs et de (re)découvertes.
Parce que c’est vraiment la sensation que j’ai : redécouvrir le html et le css, ainsi que leur champs drastiquement élargi.
Alors, je m’amuse à faire quelques tests sur ce présent blog avant de me lancer dans une refonte complète du template (oui, ça ne va pas tarder après quelques années sans changement de thème).
J’avais déjà évoqué comment embarquer une police dans la page html avec le css dans un précédent article.
Attaquons-nous à des fonctions qui peuvent paraître aussi nécessaires qu’un gif animé, mais qui pourraient être nettement plus pertinentes en d’autres circonstances.
Modifier l’opacité d’une image au survol par la souris
Idéal pour des menus imagés, pour mettre en avant une image dans une gallerie, ces quelques lignes de code sont loin d’être compliquées.
La première partie modifie l’opacité (alpha) par défaut de l’ensemble des images de la page ( img { } ) en établissant la valeur à 75% (opacity:0.75;) de l’opacité “normale”. Comme mon fond est blanc, ça aura comme conséquence d’éclaircir l’image.
La deuxième partie modifie l’opacité au survol des images par la souris ( img:hover { } ) en rétablissant l’opacité complète (opacity:1;).
On note que dans les 2 parties, on ajoute une ligne de code pour assurer une transition linéaire douce entre les 2 valeurs de l’opacité sur une durée de 0.7s.
img {
-webkit-transition: opacity 0.7s linear;
opacity: 0.75;
}
img:hover {
-webkit-transition: opacity 0.7s linear;
opacity: 1;
}
Changer la couleur de sélection du texte
Ici aussi, de la pure cosmétique avec le changement de la couleur de sélection du texte. Au lieu de compter sur la couleur par défaut de mon navigateur (bleu ciel), j’ai décidé de me mettre en accord avec la charte du blog : le orange.
La première partie du code s’en charge très bien en établissant la valeur hexadécimale de la couleur de sélection à #FF8000 (mon “orange”).
La deuxième partie du code est optionnelle. Je l’ai composée pour éviter que la sélection ne dépasse littéralement de la ligne de texte (elle avait la fâcheuse tendance d’empiéter sur la sidebar). Phénomène que j’ai croisé très souvent sur le web, mais qui semble ne gêner que moi. Cette ligne de code n’a pour seul intérêt que de masquer ce qui “sort” de la zone nommée “content”, zone qui délimite le texte dans mon thème.
::-moz-selection {
background:#FF8000;
}
::selection {
background:#FF8000;
}
#content {
overflow: hidden;
}
Voilà, vous savez tout. Amusez-vous bien.
Vous avez pu le remarquer, j’ai fait un tout petit changement cosmétique sur ce blog en modifiant les titres des articles et les en-têtes des menus de la sidebar.
Histoire de changer des polices traditionnelles du web, je me suis dit “Mais pourquoi ne pas proposer quelque chose de plus exotique ?”. Il fallait dès lors que j’embarque une police spécifique dans les pages de ce blog.
Le moyen le plus simple pour ce faire ? Google web fonts !
1. Commençons par se rendre sur la page Google web fonts.
2. Sélectionnez la police qui vous plaît. Même s’il y en a pas des tonnes, il devrait y en avoir une pour vous satisfaire.
3. Vous avez dès lors un aperçu de la police choisie en plusieurs tailles ainsi que quelques infos diverses. Cliquez sur “Use this font”.
4. Deux lignes de code sont alors proposées.
5. Rendez-vous dans l’éditeur de votre thème.
6. Collez la première ligne de code (cf 4.) dans l’en-tête html, juste après le tag <head>.
7. Collez la seconde ligne de code (cf 4.) dans le CSS à l’endroit où se trouve qualifié la police que vous souhaitez modifier.
Voilà, c’est fini. Aucun besoin d’accès au serveur puisque Google héberge la police.
Je n’ai pas remarqué de changement conséquent dans le temps de chargement de mes pages.
Je replace dans le contexte.
Dimanche matin, grasse matinée jusqu’à 9 heures, heure maximale autorisée par ma dernière fille. Petite revue de presse via mon iPhone, encore au fond du lit. Premier râle du bébé qui réclame son petit déjeuner.
Biberon, couche, la maison se met en activité et je me dis que je vais passer l’heure à venir à m’occuper de la petite pendant que la grande se douche et que la maman organise la journée dominicale. Je vais en profiter pour écouter “attentivement” (ce qui veut dire dans mon salon, avec l’installation sonore adéquate…) le dernier Chemical Brothers qui n’a eu jusqu’à présent, comme égard, que mon iPod dans le rames bruyante du métro. Il est temps de replacer cette galette dans les conditions qu’elle mérite.
Mais comme à chaque fois que je prends ce genre de décision, ça foire. Il y a un truc, un détail souvent, qui dérape.
Cette fois-ci, ce sera une mise à jour, en apparence anodine, de 6 plugins de ce blog wordpress.
Allez, je mets tout à jour d’un coup, comme ça ce sera fait.
Erreur… !
Les 4 premiers passent sans problème. Ca cale au 5ème.
J’attends. Patient. Mais pas assez.
La mise à jour semble bloquée.
Que faire ? Il n’y a rien à faire. Impossible d’annuler ou de revenir en arrière.
Résultat ? Mon blog est en rideau : page blanche avec mention “Briefly unavailable for scheduled maintenance. Check back in a minute.” OMG ! Aurais-je à nouveau planté mon blog ?! Un an à peine après avoir effacé par mégarde la base de donnée ? Mois d’Août maudit ! WordPress maudit ! Moment musical fini !
Heureusement, la solution s’avère très simple : connexion au ftp du blog avec Transmit (ou tout au soft similaire), affichage des fichiers cachés pour trouver le fichier “.maintenance” à la racine. Le détruire, et le tour est joué.
Aucune séquelle ! Je vais pouvoir reprendre l’écoute de Further.
musique, famille, travail… de quoi remplir une vie
Le retour ?
Rien n’est moins sûr.
Je ne sais même pas ce qui me prend de taper quelques lignes ici.
Trop occupé par les réalités de la vie réelle, certainement arrivé en bout de course de ce web, j’ai eu besoin de renouveau.
Ce qui s’est fait au détriment de ce blog, et de toute mon identité numérique, d’ailleurs.
Ces derniers jours, j’ai un peu réactivé les pompes, mais en toute conscience de la versatilité des choses. Quelques photos et liens sur tumblr, last.fm suralimenté de la musique que je me mets quasi constamment dans les oreilles, twitter réduit au rôle de robot-agrégateur… pour le reste… qui vivra verra : ma femme me squatte mes appareils photo (en faisant bien meilleur usage que moi, je dois l’avouer), j’ai un petit projet de vidéo dans le tiroir…
Un petit article en forme d’explication visuelle.
Non pas un retour, mais une apparition.
C’est moins engageant.
J’ai malheureusement fait une fausse manipulation qui a détruit la base de données de mon blog. En attendant de savoir ce qu’il en est, de manière définitive, sur l’ampleur des dégâts, j’ai mis en place ce blog de secours. En espérant qu’il ne devienne pas définitif.
A priori, je vais être fixé lundi ou mardi, d’après mon hébergeur.
MOO, la société anglaise spécialisée dans l’impression de cartes de visites, et surtout des MiniCards, tant affectionnées par la blogosphère, connaît un début d’année plein de succès : ouverture de son bureau aux Etats-Unis et un Webby Award dans la catégorie “Best Visual Design – Function”. C’est d’ailleurs pour cette dernière raison que Moo a décidé de fêter ça en offrant des étuis pour MiniCards MOO. Pour ce faire, il a suffit de donner le code ad hoc et de payer les frais de port.
Comme j’ai voté pour MOO aux webby, je me suis dit, “y a pas de raison…” et je me suis fait envoyer mon étui. Je l’ai reçu ce samedi et j’ai trouvé amusant de l’accrocher à ma clé USB LaCie (voir la photo ci-dessus).
Malheureusement, je n’ai que des cartes au format traditionnel “cartes de visite” (en papier recyclé). Je ne pourrai donc pas utiliser cet étui pour les transporter. Heureusement, voilà qui me donne une bonne occasion de racheter des cartes sans avoir terminé mon précédent stock… je réfléchis actuellement à ce que je vais faire de cette occasion.
Merci, MOO, pour ce petit cadeau qui rajoute la sympathie au sérieux et à l’efficacité qui vous sont déjà acquis.
Petit message important destiné à MOO : sera-t-il possible, prochainement, de choisir du papier recyclé ainsi que l’emballage en carton recyclé pour les MiniCards ?
Dans un autre ordre d’idée, vous avez peut être remarqué ce petit pas pour la blogosphère, mais un grand pas pour la technobiosphere : j’ai décidé d’afficher les photos en 500 600 pixels de large au lieu des 400 qui étaient d’usage jusqu’à présent. J’ai appliqué cette modification de manière rétroactive sur la première page, histoire d’unifier la home, mais je n’irai pas plus loin, parce que c’est carrément ch****.