PROJET AUTOBLOG


le hollandais volant

Site original : le hollandais volant

⇐ retour index

Sortie de Blogotext 3.0

samedi 29 août 2015 à 19:15
Je viens de mettre en ligne la dernière version majeure de Blogotext. Elle est disponible sur sa page habituelle.

Blogotext 3.0 screenshot
La charte graphique de Blogotext 3 est complètement refondue pour un style Google Material.
C’est le design utilisé par Google dans ses applications Android, mais aussi dans Android lui-même et la plupart de ses sites web.

D’autres captures d’écran de Blogotext 3 sont visibles ici.

Si j’ai choisit ce thème, c’est que je le trouve particulièrement pratique et joli, à la fois sur un mobile et sur ordinateur.
J’ai respecté au mieux les recommandations de Google pour ce thème, tout en l’adaptant pour convenir à Blogotext (tous les cas n’étant pas étudiés dans les recommandations).

Bien que les spécifications du Material Design soient faites par Google, Blogotext ne contacte à aucun moment leurs serveurs et tous les fichiers sont dans l’archive (polices, icônes…).

Ce n’est pas la seule nouveauté, bien-sûr : j’ai corrigé un grand nombre de bogues, un peu partout et j’ai refondu partiellement la gestion des fichiers & images ainsi que le lecteur RSS.

Concernant la compatibilité CSS, Blogotext 3 est compatible avec Firefox, Chrome, Opera 15+, Vivaldi. Microsoft Edge / IE11 sont compatibles hormis le glisser-déposer des fichiers. Les versions mobiles de Chrome, Opera et Firefox fonctionnent également sans soucis avec un thème entièrement responsive.
Au niveau du serveur, il faut toujours PHP 5.3 minimum ainsi que quelques bibliothèques particulières (listées ici).

Les anciens thèmes pour Blogotext devraient fonctionner sans problèmes. Consultez tout de même la note de version si vous mettez à jour depuis une version 2.x.

Pourquoi mettre le JavaScript à la fin et le CSS au début ?

jeudi 27 août 2015 à 19:46
Dans la création de pages web, on lit souvent qu’il faut mettre les fichiers CSS dans head, au début du document HTML et qu’il faut mettre le JavaScript à la fin. Bien rarement par contre il est dit pourquoi.

disposition en 3D des éléments d’une page web
Schématisation en 3D des éléments d’une page web.


Lors du processus d’affichage d’une page web, la première phase consiste au téléchargement de la page web : le document HTML ainsi que les images, mais aussi les feuilles CSS de styles et les scripts JS liés.

Le contenu HTML, c’est ce qu’on voit : le texte, les images, les champs de recherche, etc.
Les styles CSS, c’est comment le HTML sera vu : disposition, couleurs polices et taille du texte, couleur du fond de la page.

Le CSS et le HTML sont donc nécessaires à l’affichage de la page web et donc au visiteur qui souhaite lire votre site.
Les scripts JS, en revanche, ce sont des instructions destinées au navigateur, pas à l’internaute. Le navigateur les traite en tâche de fond et l’utilisateur de voit pas de différence s’ils sont là où pas (normalement).

Le problème, c’est la capacité du JS de modifier le HTML et le CSS. Du coup, le navigateur qui reçoit une page HTML+CSS n’aura en réalité la totalité de la page web qu’une fois qu’il aura terminé d’exécuter les scripts JS. Avant cela, il ne peut (presque) rien faire : il va bien commencer à afficher les différents éléments de la page (menu, titres, liens…) mais si le JS supprime le menu entre temps, il devra tout recommencer.

La solution du navigateur pour le problème du JS ?

Commencer d’effectuer le rendu (l’affichage) de la page et mettre ce rendu en pause quand il détecte un script JS : à ce moment là, il doit télécharger tout le script JS et l’exécuter entièrement (ce qui a des chances de modifier le HTML et le CSS, souvenez-vous) avant de reprendre de rendu (et au besoin le recommencer, si le JS a beaucoup modifié le HTML ou le CSS).
Le fait pour le navigateur d’avoir à se mettre en pause lorsqu’il rencontre un script, nous fait dire que le JS est bloquant.

Le CSS, le HTML et même les images sont non-bloquant : le navigateur peut continuer à décoder la page web même quand il est encore en train de télécharger du CSS, par exemple. Il peut donc télécharger du CSS en parallèle avec le HTML. Une fois qu’il a tout le CSS, il commence le rendu tel qu’il est décrit par le CSS. Le décodage du HTML, lui, se poursuit durant tout ce temps.

Un document HTML simple, sans CSS ni JS, s’affiche quand même : c’est le rendu par défaut d’une page web : le fond est blanc, le texte est noir et tous les éléments sont à la suite les uns des autres. Bref, c’est moche, mais ça reste lisible.

mon site sans CSS
Mon site tel qu’il s’affiche sans les styles CSS.


Le navigateur, quand il reçoit le document HTML, commence par effectuer le rendu par défaut. Lorsqu’il reçoit le CSS, ce rendu par défaut continu (de façon à ce que la page soit lisible — même si c’est moche). Le rendu par défaut est stoppé quand tout le CSS est arrivé : à ce moment là, c’est le rendu tel qu’il est décrit dans le CSS qui est appliqué : les couleurs, les fonds, les bordures, les ombres… tout ça est alors affiché. Le traitement du CSS ne bloque pas le téléchargement du reste du contenu de la page.


Pour l’instant je n’ai pas vraiment répondu à la question « pourquoi mettre le JS à la fin et le CSS au début ? », mais j’y viens.

On sait que l’affichage des données (texte, images…) dans la page web commence dès que le HTML est en train d’être téléchargé : ceci permet à l’internaute d’accéder à l’information contenue dans la page le plus rapidement possible, même si le CSS et le JS ne sont pas encore arrivés. Une fois que tout le CSS est obtenu, l’information est alors restructurée, organisée sur la page et coloriée.
Lorsque le navigateur reçoit un script JS, l’affichage est mis en pause : le JS doit finir de s’exécuter avant que l’affichage puisse continuer.

L’intérêt de placer le CSS en haut et le JS en bas se trouve à ce niveau.

Si on met le CSS en haut, c’est pour que l’affichage « colorié » se fasse le plus vite possible : pour que la page web soit « jolie » et « organisée » tout de suite, avant que l’utilisateur ne puisse se trouver face à une page web dans son rendu par défaut. Cela tombe d’ailleurs bien : le téléchargement du CSS n’est pas bloquant : l’information dans la page web continue d’arriver pendant ce temps : l’affichage de la page web n’est pas ralentie par le CSS. C’est juste mieux de l’avoir avant, pour que l’affichage se fasse directement comme la page doit être, sans à avoir un rendu par défaut entre-temps.

Parallèlement si on met le JS en bas du document, toute l’information contenue dans la page web sera déjà affichée (car déjà téléchargée et déjà rendue à l’écran). Au moment où le navigateur rencontre le JS, l’écran ne sera pas tout vide ni tout blanc : l’internaute pourra commencer à lire la page web pendant que le navigateur traite le script JS et effectue les derniers changements.

Si on mettait le JS tout en haut, la page n’aurait encore aucune donnée que l’affichage et le téléchargement seraient déjà bloqués : l’internaute n’aurait alors qu’une simple page blanche et rien à lire. Si le script est gros, cela peur prendre plusieurs secondes. Si ça ne semble pas long dit comme ça, croyez-moi, ça l’est : si toutes les pages web mettaient 2 secondes de plus pour s’afficher, vous le verriez très rapidement. Placer le JS en haut n’est donc pas génial, car il oblige le navigateur à tout mettre en pause et l’internaute à attendre devant une page vide.
Mettre le CSS en bas de la page n’est pas avantageux non plus : le CSS n’est pas bloquant. Il peut être téléchargé en parallèle avec le reste. Si on le met en bas de la page, il sera téléchargé en dernier et tout seul, donc sans tirer profit de la possibilité de télécharger deux choses en même temps. De plus, tout le document HTML sera déjà là mais affiché avec le rendu par défaut du navigateur, donc tout moche. Si l’internaute a déjà commencé à lire, il verrait alors la page se modifier sous ses yeux à l’instant même où tout le CSS aura fini de télécharger et que le rendu se fasse.

Il convient donc naturellement de mettre le CSS le plus tôt possible dans la page (dans le head) pour tirer profit du téléchargement en parallèle du CSS avec d’autres ressources et pour que le rendu se fasse directement de façon voulue ; et il faut placer le JS en bas du document pour que quand le navigateur le trouve, tout le reste de la page soit déjà affiché à l’écran et que l’internaute puisse commencer à lire votre page pendant le traitement du script JS par le navigateur en tâche de fond.


Quelques liens :

On va l’avoir, notre redevance TV sur les téléphones

mardi 25 août 2015 à 16:15
photo d’un téléviseur posé sur le trottoir C’est de nouveau en débat : faut-il étendre la redevance TV aux ordinateurs/consoles/tablettes/smartphones ?

Je ne comprends toujours pas en quoi utiliser mon téléphone ou mon ordinateur justifie que je donne de l’argent pour France 3. Ça n’a aucun sens.
Est-ce qu’un éleveur d’oies touche de l’argent grâce à un impôt sur les perceuses ? Non. Alors qu’ils aillent se faire foutre avec leur « extension de la redevance ». Internet n’est pas la télé.

S’ils veulent faire payer ça, soit ils mettent un abonnement équivalent à la redevance sur un sorte de Netflix pour les chaînes publique (la télé en somme, où payent ceux qui veulent, donc comme maintenant), soit qu’ils incluent un impôt pour tous les foyers, sans dire que c’est spécifiquement pour l’audiovisuel public.
Après tout, y a pas non plus de « redevance éclairage public » ou « redevance espaces verts », pour lesquelles ont serait exonéré si on ne sortait jamais la nuit où si on n’entraient jamais dans un parc.

Mais mettre un impôt sur les ordis pour financer la télé, c’est juste débile.

image de Bonnaf

[CSS] Quelques possibilités apportées par le modèle « flexbox »

samedi 22 août 2015 à 22:11
Ça fait des années que je fais du CSS. Je suis un grand adepte du full-CSS et de l’usage des dernières technologies CSS. L’une d’elle c’est le modèle d’affichage de boîtes flexibles : FlexBox.
Ce concept en CSS existe depuis plusieurs années mais les spécifications n’ont pas cessées de changer (il y a au moins 3 spécifications différentes… par navigateur) mais il peut actuellement être considéré comme stable : les navigateurs à jour actuellement implémentent tous la même spécification.

Si je vous en parle en particulier c’est que plus je l’utilise, plus elle me facilite la vie.

Vous désirez centrer un élément ? L’étirer ? Changer l’ordre de plusieurs éléments ? Orienter des menus ? Faire des colonnes égales ? Le tout sans vous faire casser la tête ?
FlexBox est fait pour ça, et c’est relativement simple.

Flexbox fonctionne un peu sur le même principe que le duo ul/li ou le trio table/table-row/table-cell, à savoir une relation bloc-parent/blocs-enfants : il y a ainsi un parent en « display: flex » et c’est avec les blocs enfants qu’on bricole. Si vous avez compris tout ça, vous avez compris 80% de flexbox.

Ici je vous propose quelques exemples de ce que permet FlexBox.
En revanche, cet article n’est pas un tuto qui vous apprend tout ce qu’il faut savoir. Il s’agit plus d’un mémo illustré de code et de démos pour accomplir de choses précises qu’on avait l’habitude de faire autrement. Pour des tutos ou cours complets, j’ai mis quelques liens en bas de l’article.


Centrer

Centrer un élément horizontalement en simple CSS est très simple. Centrer verticalement relève d’avantage du casse-tête : il faut jongler avec line-height, position, display, margin et parfois du JavaScript
Avec flex, c’est plus simple :

En prenant le premier code HTML ci-dessus, pour centrer un bloc dans l’autre sur les deux axes :

#parent {
	display: flex;
	justify-content: center;
	align-items: center;
}

#enfant {
}

centrer verticalement et horizontalement en CSS
(Démonstration)


Ici :

Bien-sûr, les éléments sont centrés même si on ajoute des marges, des bordures ou des tailles en %.
Par contre, si vous voulez centrer une image ou une vidéo, ces dernières ayant une dimension et une proportion propre (contrairement à du texte), je conseille cette méthode (flexbox ne sera pas adapté, car une image n’est pas flexible si elle doit conserver ses proportions).


Colonnes de même hauteur

Un autre problème ancestral en CSS, c’est celui des colonnes de même hauteur. Avant il fallait des images ou des tableaux (et si utiliser les tableaux était un crime, « display: table-cell; » reste un délit).

Ici, le code est simple à comprendre également : on va utiliser un #parent et deux .enfants.
Sur les enfants, le premier est de taille fixe et le second prend tout le reste de l’espace disponible horizontalement.
Enfin, on dit que les enfants doivent occuper toute la place sur l’axe vertical.

#parent {
	display: flex;
	align-items: stretch;
}

.enfant:first-child {
	flex: 0 0 200px;
}

.enfant:last-child {
	flex: 1 1 auto;
}

faire des colonnes avec flex
(Démonstration)



Vous pouvez ainsi faire plus de 2 colonnes aussi : une centrale large avec deux petites sur chaque côté, comme dans cet exemple.

Ayez en tête par contre que si vous utilisez des blocs flexibles, les autres types de positionnement (display, float…) ne marchent plus : c’est l’affichage en mode « flex » qui prend le dessus. Aussi, si vous déclarez une largeur de base avec flex: 1 1 200px par exemple, alors la propriété width ne donnera pas non plus le comportement attendu.

L’avantage de cette méthode sur une colonne flottante, c’est que le bloc flottant pouvait passer au dessus du reste de la page.

Étirer

Flex, vous commencez à le voir, permet non seulement de jouer sur le placement et l’étirement vertical, mais aussi l’étirement horizontal. À l’image de ce que float permet, vous pouvez ici placer un élément sur un côté ou l’autre, mais tout en le conservant dans le flux de la page.

C’est ce qui est utilisé dans mon astuce pour placer les icônes à côté des formulaires : l’icône est de largeur fixe et le champ du formulaire est flexible et peut s’agrandir librement, tout en restant bien à côté de l’icône. Flexbox apporte, en plus des flottants, tous les avantages du centrage et de l’étirement.

C’est ici la propriété flex: 1; appliqué sur le bloc à étirer qui se charge de faire tout ça.
Cette idée peut être utilisée sur les champs de formulaire, donc, mais aussi sur les titres-icônes, les menus et tout ce que vous voulez en fait.


Mélanger

Une des avancées importantes apportée par flexbox, c’est que l’on peut déplacer des blocs au sein de la page sans avoir à toucher au code HTML.
Si le code HTML contient trois éléments enfants dans un ordre précis (A, B, C), on peut les ordonner autrement : A, C, B, ou B, A, C par exemple :

.enfant {
	flex: 1;
}
#enfant-A {
	order: 3;
}
#enfant-B {
	order: 1;
}
#enfant-C {
	order: 2;
}

Ici, les éléments sont tous flexibles et on a modifié leur ordre d’affichage : si dans le code HTML l’ordre est A, B, C, à l’affichage flexbox changera ça en B, C, A :

changer l’ordre des éléments html avec flexbox
(Démonstration)


Bien-sûr, vous pouvez combiner l’ordre des éléments avec toutes les autres fonctionnalités de flexbox.


Orienter

Une autre innovation est la possibilité d’orienter les éléments avec une simple propriété : si on a une collection d’éléments enfant, on peut les placer sur une ligne ou sur une colonne :

Pour mettre en ligne (par défaut) :
#parent {
	flex-direction: row;
}

Et en colonne :
#parent {
	flex-direction: column;
}

orientation flexbox
(Démonstration)


Là aussi, il peut être intéressant de mélanger l’orientation avec les autres propriétés de flexbox.

Notez qu’au dessus j’ai parlé d’axe « principal » et « secondaire ». Le flex-direction permet d’inverser les deux axes en fait. Par défaut, l’axe principal est horizontal (les éléments sont placés sur une ligne) et l’axe secondaire est vertical (les éléments occupent une section de la ligne, mais peuvent être en haut, au centre ou en bas de leur sections respectives).


Aérer

Encore un effet attendu de flexbox : pouvoir disperser des éléments sur une ligne, en distribuant l’espace vide entre chaque élément. Ceci est particulièrement pratique pour les menus : avec ce code, inutile de diviser la largeur de l’écran par 5 et donner à chaque élément 1/5 de la largeur (et vous embêter avec les marges et les bordures) : flexbox peut distribuer les éléments sur toute la ligne de façon fluide.

#parent {
	justify-content: space-between;
}

Les éléments aux extrémités restent à chaque bout et les autres éléments sont espacés sur toute la ligne :

flexbox spacing
(Démonstration)



Ressources


Pour des choses plus évoluées encore, sachez que vous pouvez faire des blocs flexibles et imbriqués : un élément enfant flexible peut lui-même être en display:flex et avoir des enfants flexibles eux aussi, comme sur cette démo, avec leur propre orientation et effets.

[CSS] Arrêtez d’utiliser float n’importe comment

mercredi 12 août 2015 à 19:43
Je viens de me retrouver sur cet article qui montre comment faire des colonnes avec float et de palier au problème du clear:both sans toucher au HTML. La solution retenue — quoiqu’invalide CSS — est élégante… si on retourne en 2009 !

Car pourquoi utiliser des flottants ?

Utilisez Flexbox plutôt !

Non seulement vous n’aurez pas besoin de hack comme ça, mais en plus vous aurez la possibilité de faire des colonnes de la même hauteur.

Je n’ai rien contre float, mais son but est de faire sortir un élément de la structure de la page et de le faire flotter au dessus. À quoi ça sert d’utiliser float si on lui dit, avec clear, de se remettre dans la page ?
Autant ne pas utiliser float et choisir quelque chose de plus adapté, comme flexbox : c’est largement supporté.

Voyez le résultat ici : demo.
Et pour vous amuser, voilà un Flexbox playground, ainsi qu’un tutoriel en Français.

Je vous ferai aussi un article, bientôt, pour donner des exemples de choses possibles avec Flexbox.

(cet article est le deuxième dans la série « arrêtez d’utiliser les flottants alors qu’il y a mieux »)