Tag

webdesign

Browsing

J’ai récemment été confonté à un problème lors de la réécriture du code CSS d’un formulaire Gravity Form : on voulait que le contenu remplisse la div, sans sauter de ligne lorsqu’il n’y en avait pas besoin.

CSS : remplir le contenu d'une div de manière fluide photo

Je pensais naïvement qu’un simple float:none et une largeur à 100% suffiraient :

.gfield_label {
   float: none !important;
   width: 100% !important;
}

Mais cela a fini par chambouler tous les champs de formulaires : labels et champs n’étaient plus sur la même ligne.

La solution est toute simple mais cela m’a pris un temps fou à la trouver – il suffit d’ajouter un clear:both au bloc parent qui contient l’élément que l’on veut fluidifier, comme ceci :

/* Make it flow */
li#field_11_10 { clear: both !important; }

En espérant que cela puisse vous faire gagner du temps !

Le problème : l’attribut HTML frameborder

HTML5-logo

Si vous obtenez l’erreur :
“The frameborder attribute on the iframe element is obsolete. Use CSS instead.”

sur le validateur HTML5 du W3C, c’est que le code de votre page HTML5 contient un élément <iframe> avec un attribut frameborder comme dans l’exemple suivant :

<iframe frameborder="0" />

Solution CSS: la propriété border

Comme l’attribut frameborder n’est plus présent dans HTML5, il faut utiliser la propriété CSS border en CSS à la place de l’attribut HTML frameborder:

<iframe style="border: 0;">

Solution HTML : l’attribut seamless

Avec HTML5, il est possible de résoudre le problème en ajoutant l’attribut seamless à l’iframe:

<iframe seamless>

L’apparence du texte et des éléments de présentation de la page doivent être gérés par CSS et non par le code HTML, c’est plus propre et surtout plus simple à gérer.

Le problème : l’attribut HTML scrolling

HTML5-logo

Si, au détour d’une validation du code HTML5 de votre page, vous obtenez l’erreur suivante:

“The scrolling attribute on the iframe element is obsolete. Use CSS instead”

… c’est que le code de votre page HTML5 contient un élément <iframe> avec un attribut scrolling comme dans le code suivant :

<iframe scrolling="no" />

La solution CSS : la propriété overflow

Comme l’attribut scrolling ne fait plus partie des spécifications HTML5, il faut utiliser CSS à la place et utiliser la propriété overflow:

<iframe style="overflow: hidden;" />

L’apparence du texte et des éléments de présentation de la page doivent être gérés par CSS et non par le code HTML.

jquery

J’ai écrit il y a quelques temps un script jQuery utilisant la fonction toggle pour afficher/cacher un seul bloc HTML mais pas mal de gens m’ont demandé comment faire pour afficher plusieurs blocs HTML .

Voici comment s’y prendre, en utilisant les fonctions jQuery .slideup(), .slidedown() et .closest().

Démo


Article A

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam

Article B

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam

Article C
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam

Le script

1. Ajoutez jQuery dans l’entête de votre page (head), comme ceci :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

Il y a quelques mois de cela, le site du Centre de Kriya Yoga France a eu droit à un léger rafraichissement de son style : un peu plus de lisibilité, moins de fonds colorés, un peu plus de finesse dans les traits.

C’était juste un petit coup de plumeau mais comme j’ai oublié de vous en parler, voici une petite capture d’écran :

kriyafrance-2014

Mais cette semaine, j’ai retroussé mes manches et suis totalement passé à l’offensive :

Note pour plus tard : si, lors de la prévisualisation d’un thème WordPress, rien ne s’affiche ou si la personnalisation (customizer) ne répond pas, c’est qu’un plugin met la zone au niveau du javascript. Dans mon cas, c’était pdf-js.

Without further ado, je suis assez content de vous présenter la version 4.0 :

kriyafrance-2015

Pas mal de changements mais je pense que cela en vaut vraiment le coup. Le site devenait vieillissant et n’était plus adapté aux smartphones et tablettes, et l’ancienne boutique (Cubecart) était une horreur à gérer.

Tout est beaucoup plus simple maintenant, avec de jolis graphiques pour les commandes, la gestion du stock… bref, c’est bien mieux pour moi à gérer et plus simple pour le CKYF.

Qu’en pensez-vous ?

Aujourd’hui, j’ai trouvé cette petite animation qui explique comment créer des graphiques plus attirants et plus lisibles :

graphiques-plus-lisibles

Il est donc utile de retirer le fond, les étiquettes et légendes redondantes, les bordures, le nombre de couleurs, les effets spéciaux et la mise en gras.

Il faut adoucir les étiquettes en mettant du gris au lieu du noir et adoucir voire supprimer les lignes.

Et enfin, ne garder que les étiquettes ou titres qui ont le plus d’impact pour la compréhension du graphique. Tout ce qui est superflu doit disparaître pour plus de lisibilité et de compréhension.

Bienvenue dans l’ère du minimalisme !

Wordpress iconPour les besoins du CKYF, j’ai écrit une fonction qui doit afficher une vidéo automatiquement. Or je voulais juste renvoyer un shortcode vidéo qui prendrait en charge toute la partie code du lecteur vidéo.

On ne peut pas juste renvoyer la valeur, il faut utiliser la fonction do_shortcode() de WordPress.

Cas 1 : exécuter un shortcode dans une fonction

La solution réside dans l’utilisation de la fonction do_shortcode(). Voici un petit exemple :

Cet exemple exécute le shortcode .

Dernièrement, j’ai eu l’occasion de jouer avec l’intégration d’un lecteur vidéo en HTML5 pour jouer des vidéos encodées en H.264 (format .MP4) pour un client. Il se trouve qu’aucune vidéo ne se lançait directement : le lecteur chargeait le fichier entièrement (plus de 60 Mo) avant de daigner jouer la vidéo.

h264-logoLa solution est toute simple : de la même manière que l’on peut créer un fichier JPG progressif (qui se charge de haut en bas, sans attendre le chargement total du fichier), il est possible de commencer à lire une vidéo sans que cette dernière soit totalement chargée, grâce à qt-faststart.

qt-faststart

qt-faststart est un outil inclus avec FFmpeg qui ré-arrange un fichier H.264 de manière à ce que le “moov atom” soit devant les données, ce qui facilite la lecture sans attendre le chargement complet.

Si votre fichier MP4 est déjà créé, lancez la commande ainsi :

qt-faststart source_file.mp4 destination_file.mp4

Si vous souhaitez créez un fichier avec l’option faststart nativement, lancez l’encodage FFmpeg avec l’option :

-movflags +faststart 

Et voilà! Les vidéos streament proprement.

php-logoSuite à la mise à jour de PHP, mon fichier d’erreurs du site a commencé à afficher le message suivant :

PHP Warning: Creating default object from empty value in /wp-content/themes/skyminds/functions.php on line 1213

La ligne en question correspond à :

$posts[0]->comment_status = 'closed';

Le problème réside dans le fait que $posts n’est pas explicitement défini et comme les versions récentes de PHP tournent maintenant avec le mode E-STRICT par défaut, on obtient une erreur. Il existe deux solutions – soit mettre :

$posts = new stdClass();

s’il sagit d’un objet, soit mettre :

$posts = array();

s’il s’agit d’une associative array, juste avant la ligne de code incriminée. Dans mon cas, l’array() est la bonne solution.

Ah, ce moment magique durant lequel tu constates que ta note PageSpeed monte à 99%, via GTmetrix :

pagespeed-99-201301

C’est beau, sachant qu’au niveau CSS, c’est la barre WordPress du haut qui génère l’overhead.

Prochaine étape : mettre les fichiers statiques sur un sous-domaine cookieless.

Il y a quelques mois, je me suis amusé à transformer mon script javascript maison qui me permet d’afficher certaines zones de textes sur le site, notamment dans les articles de la catégorie Music/Séries.

Étant donné que jQuery est présent sur toutes les pages du site, j’ai adapté le script pour qu’il utilise jQuery. Cela fera aussi une librairie maison de moins à maintenir (et à charger).

Important : si vous voulez gérer plusieurs blocs, utilisez le script JQuery toggle pour afficher et cacher de multiples blocs HTML

Un script Javascript répondant à des besoins précis

J’écris pas mal de code afin de répondre à mes besoins sur le site, le but étant de me simplifier la vie au maximum.

Dans certains articles, il existe des zones de textes qui ne sont pas tout public et qui nécessitent une authentification préalable à leur lecture. La zone de texte doit apparaître lorsque l’on clique sur un des liens présents dans l’article.

Démo

Pour voir ce script en action, il suffit de cliquer sur ce lien.

Ce texte apparaît et disparaît grâce à un script javascript
écrit pour jQuery et qui utilise la fonction toggle().

Spelling error report

The following text will be sent to our editors: