Tag: CSS | Page 2 | SkyMinds.Net

WordPress : valider le code des meta oEmbeds de YouTube, DailyMotion, Vimeo et SlideShare

29 March 202219 décembre 2014 by Matt Biscay · Lecture: 2 minutes

Allez, je continue ma petite série sur la gestion de l’intégration oEmbed sous WordPress.

WordPress gère nativement plusieurs services : copiez-collez l’adresse d’une vidéo YouTube dans un article et hop, vous obtenez une vidéo entièrement intégrée, avec un code plutôt propre mais pas entièrement valide.

Je vous propose donc de valider le code généré par WordPress lorsqu’il vient de sites tiers comme YouTube, DailyMotion, Vimeo ou SlideShare.

Valider le code oEmbed de YouTube

Il suffit de lancer les quatre requêtes SQL suivantes :

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" allowfullscreen', 'style="border: none"');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" allowfullscreen', 'style="border: none"');
UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, "wmode=transparent' frameborder='0'", "wmode=transparent' style='border: none'");
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, "wmode=transparent' frameborder='0'", "wmode=transparent' style='border: none'");Code language: JavaScript (javascript)

Valider le code oEmbed de Dailymotion

Pour le code de Dailymotion, ces deux requêtes suffisent :

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0">', 'style="border: none">');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0">', 'style="border: none">');Code language: JavaScript (javascript)

Valider le code oEmbed de Vimeo

Quatre requêtes pour Vimeo :

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" title=', 'title=');
UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, ' webkitallowfullscreen mozallowfullscreen allowfullscreen', '');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" title=', 'title=');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, ' webkitallowfullscreen mozallowfullscreen allowfullscreen', '');Code language: JavaScript (javascript)

Valider le code oEmbed de SlideShare

Et deux requêtes pour SlideShare :

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen>', 'style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px;overflow:auto;border:none">');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen>', 'style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px;overflow:auto;border:none">');Code language: JavaScript (javascript)

Et voilà, le code est plus propre, plus valide et utilise CSS plutôt que des balises propriétaires.

Mise à jour du site du Centre de Kriya Yoga France : v4.0

2 March 202402 décembre 2014 by Matt Biscay · Lecture: 2 minutes

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 :

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

redéfinition des couleurs
création du logo et des favicons
création de la boutique totalement intégrée à WordPress
mode responsive/adaptive pour smartphones et tablettes
conversion des pages de contenus en articles et classement des articles par catégories, en silos
modification des permaliens pour n’utiliser que le nom des articles
intégration des réseaux sociaux avec les comptes dédiés au CKYF
et de multiples essais en trial and error !

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 :

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 ?

Performance du site : PageSpeed à 99%

8 April 202224 janvier 2013 by Matt Biscay · Lecture: 1 minute

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

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.

jQuery : sélectionner un élément dont l'ID ou la classe commence ou finit par une chaîne photo 1

jQuery : script utilisant la fonction toggle pour afficher ou cacher un bloc HTML

1 April 202210 janvier 2013 by Matt Biscay · Lecture: 3 minutes

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().

CSS : définir la taille d'un champ texte photo

CSS : afficher correctement une image en arrière-plan

9 April 202210 septembre 2010 by Matt Biscay · Lecture: 1 minute

Il m’est arrivé plusieurs fois de ne pas pouvoir afficher une image en arrière-plan (background image) en CSS et cela tout simplement parce que le code CSS doit être écrit dans un certain ordre, notamment lorsque l’on utilise la syntaxe courte.

Solution : du code CSS ordonné

Alors voilà : imaginons que nous voulons créer une DIV ayant pour identifiant “banner”. Nous voulons que cette DIV affiche l’image background.png.

Il faut commencer par mettre l’URL de l’image entre guillements puis la position horizontale, ensuite la position verticale et enfin la répétition de l’image ou non.

Exemple en utilisant la propriété background (short-hand syntax) :

#banner {
  background:url("background.png") center top no-repeat;
}
Code language: CSS (css)

CSS : forcer le retour à la ligne du code pre en CSS3

1 April 202209 avril 2010 by Matt Biscay · Lecture: 1 minute

Je me suis rendu compte en rédigeant mes articles sur l’installation du serveur dédié que le code bash, lorsqu’il était un peu long, n’allait pas à la ligne automatiquement.

Il était écrit d’une seule ligne dans son conteneur, forçant une barre de navigation horizontale bien disgracieuse… Heureusement, cela est maintenant une chose du passé.

Le code est affiché sur le site avec la balise pre, qui permet l’affichage d’un texte pré-formaté.

Or la particularité de cette balise est qu’elle désactive le retour à la ligne. Voici une astuce en CSS pour contre-carrer cet effet indésirable.

/* Forcer le retour à la ligne de la balise PRE - skyminds.net */		
pre {
   white-space: pre-wrap;             /* CSS3 */
}Code language: CSS (css)

10ème anniversaire : nouveau thème Palm Tree

18 February 202406 janvier 2010 by Matt Biscay · Lecture: 2 minutes

Il y a eu assez peu de changement dans le design de SkyMinds.net en 10 ans : je dirai qu’il y a eu 5 ou 6 versions “majeures” en tout. Vous aurez sûrement remarqué que je m’attache facilement à un design particulier (que je finis par hacker jusqu’à l’os !). Hé bien pour ce dixième anniversaire, je voulais quelque chose qui résume le site, qui colle un peu plus au nom de domaine et qui soit un peu plus identifiable.

skyminds-palmtree Je ne suis pas vraiment graphiste (mes élèves en témoignent chaque jour) et je n’ai jamais réussi à créer un logo potable. Et pourtant, j’ai essayé ! Finalement, j’ai opté pour une approche typographique, ayant remarqué que la plupart des grandes marques utilisent une police de caractères bien particulière. Et je suis assez satisfait du résultat ce coup-ci.

Travaux pratiques : lancement de Question-College.fr

13 April 202214 août 2009 by bashogun · Lecture: 2 minutes

Un article en guise de remerciements pour Matt qui avait, à ma demande, rédigé un petit guide sur la mise en ligne d’un site internet. Armé de ses précieux conseils, j’ai donc lancé les opérations.

Le plus simple : aller sur le site d’un hébergeur qui peut aussi enregistrer un nom de domaine. Il n’a fallu que quelques minutes pour créer www.question-college.fr et le faire héberger.

Toutes les informations ont été envoyées par mail : les codes pour accéder aux écrans de gestion de l’hébergement du site, pour transférer les fichiers par FTP, pour configurer les adresses mail liées au site…

Bon. Voilà. Mais c’est le grand vide. J’ai fait le choix de SPIP, que je connais un peu, puis je me suis mis à l’écriture du squelette. Pas simple, parce qu’il a fallu que je me remette au HTML et au CSS…

J’ai donc dû réapprendre à lire à l’aide de squelettes disponibles et me suis principalement inspiré du travail d’Alternatives, que j’ai ensuite largement modifié et adapté quand j’ai commencé à apprendre à écrire.

Et voilà le résultat !

L'accueil de Question-College.fr — L\’accueil de Question-College.fr

N’oubliez pas de tester le tout en local. Il suffit d’installer un logiciel comme EasyPHP et le tour est joué. Pour ma part, j’ai testé, testé , retesté, modifié – contraint et forcé… grâce à mon FAI qui n’a rien trouvé de mieux à faire que de faire une énorme bourde qui m’a privé de connection du 30 juillet au 12 août !

Reste le plus difficile : donner un contenu à question-college.fr

Ce site abordera toutes les questions concernant le collège. Je vais commencer à écrire, mais je souhaite que d’autres se joignent à moi.

Aussi, je vous invite à faire un petit tour sur le site et à me contacter.

CSS : définir la taille d’un champ texte

19 August 202009 juillet 2009 by Matt Biscay · Lecture: 1 minute

Il y a quelques jours, j’ai été confronté à un bug d’affichage du champ de recherche du site : le champ était trop large et débordait sur le design du site.

Ce bug avait été constaté par Agat il y a plusieurs mois mais comme je ne l’avais jamais constaté, je ne savais comment le résoudre.

Et bien la solution est toute simple ! Lorsque l’on crée un champ texte, on a l’habitude de faire comme ceci :

<label for="recherche">Login:</label> <input id="recherche" tabindex="10" name="recherche" size="15" type="text" value="" />Code language: HTML, XML (xml)

En fait, la déclaration size="15" ne définit que le nombre de caractères visibles (ce que vous pouvez écrire) dans le champ. Cela ne définit donc pas la taille du champ en lui-même.

De l’importance du cahier des charges du développement web

16 April 202214 avril 2009 by Matt Biscay · Lecture: 5 minutes

J’ai eu l’occasion récemment d’écrire un formulaire de contact ainsi que son traitement PHP pour une entreprise de construction canadienne qui cherche à recruter du personnel.

Je commence à écrire le code. Je connais bien les formulaires étant donné que c’est l’un de mes premiers scripts (2001 si je ne m’abuse).

Je place le script sur mon serveur, commence ma batterie de tests histoire de pallier toutes les situations auxquelles un utilisateur lambda peut être confronté. Le code que je livre est en en CSS3 et HTML5 valides.

Tout s’affiche impeccablement dans tous les navigateurs. Je me dis que c’est une affaire qui roule lorsque le client m’envoie quelques emails pour me demander quelques corrections, additions, et l’intégration du script dans son site.

C’est là que le vent a commencé à tourner.

Optimisation du thème WordPress : 30 requêtes SQL gagnées

29 September 202422 octobre 2008 by Matt Biscay · Lecture: 2 minutes

Je viens d’effectuer une jolie petite optimisation qui devrait bien alléger le serveur sur lequel nous tournons. Vous vous souvenez de l’article WordPress : réduire le nombre de requêtes SQL des thèmes, écrit il y a quelques mois ?

Et bien il se trouve que j’avais tout optimisé tous les fichiers de mon thème – sauf le menu du site qui se trouve dans le fichier header.php !

Ce dernier contenait quasiment une trentaine de requêtes SQL destinées à obtenir les permalinks des pages statiques…

Je m’étais dit à l’époque que si je changeais le permalink d’une page, cela se reflèterait immédiatement dans le menu. Quand j’y pense aujourd’hui, c’est vraiment ridicule.

Thème WordPress : Bleuet v2.3

29 September 202419 novembre 2007 by Matt Biscay · Lecture: 2 minutes

Il y a eu pas mal de changements sur le site depuis quelques jours et même s’ils sont invisibles à l’oeil nu, il y a eu des ajouts progressifs de fonctionnalités importantes qui peuvent vous faciliter la navigation.

Valider le code oEmbed de YouTube

Valider le code oEmbed de Dailymotion

Valider le code oEmbed de Vimeo

Valider le code oEmbed de SlideShare

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

Démo

Solution : du code CSS ordonné

Tag Cloud