Tag: site

Changement de design : SkyMinds 2016

10 October 202104 janvier 2016 by Matt Biscay · Lecture: 3 minutes

Ce week-end, pour fêter la nouvelle année et les 17 ans du site (et oui, déjà !), je me suis amusé à changer radicalement le thème graphique du site.

Nouvelle année, nouveau thème

Cela fait des années que je n’ai pas changé de thème : apparemment, mon thème précédent remonte à 2010, soit 6 ans. A l’échelle d’Internet, cela remonte quasiment à la préhistoire !

Il aura bien évolué : de XHTML transitional à strict, puis HTML5. D’abord basique puis responsive, avec microdata… on peut dire que je l’ai bien usé, sous toutes les coutures mais que j’ai envie maintenant de quelque chose d’autre.

La charte graphique convenait à une certaine époque mais il faut savoir faire table rase et se remettre en question pour essayer des choses différentes.

A titre de comparaison, voici à quoi ressemblait le site le 1er janvier au petit matin:

Changement de design : SkyMinds 2016 photo

et voici maintenant le nouveau thème, sobrement intitulé “SkyMinds 2016” :

Les nouveautés

Pas mal de nouveautés sont apparues. Tout d’abord, le site est désormais entièrement responsive, ce qui n’était pas tout à fait le cas avant. J’avais – bonant malant – utilisé des responsive queries mais on ne peut pas dire que l’affichage était optimal sur toutes les tailles d’écran. Là, c’est bien mieux géré.

Ensuite, le thème utilise beaucoup moins d’images que le précédent : adieu l’image de fond pour le header, le dégradé en PNG de 1600 pixels de hauteur et les dégradés CSS pour les colonnes de contenus et le footer.

Je n’ai gardé que le logo, le reste n’est composé que de couleurs unies. Mine de rien, cela influe énormément sur le rendu des pages.

En ce qui concerne la CSS, je n’ai gardé que quelques styles que j’affectionne mais le principal a changé.

Ce changement graphique est pour moi l’occasion de donner un petit coup de peinture et surtout de faire le ménage dans ma feuille de style et les fichiers du thème de WordPress.

J’ai également désactivé certains plugins comme le plugin qui créait un menu responsive – maintenant géré nativement par le thème, ainsi que d’autres qui s’ajoutaient à la feuille de style principale.

Le rendu est donc plus moderne et devrait se charger plus rapidement, faisant appel à moins de ressources.

What’s next?

Pour l’instant, ce nouveau thème est clair et me convient plutôt bien. J’y apporte quelques petites touches çà et là afin d’harmoniser le tout mais je trouve que le résultat n’est pas trop mal.

Et vous, vos impressions?

WordPress : héberger les images sur un sous-domaine

30 March 202219 juin 2014 by Matt Biscay · Lecture: 4 minutes

Cela fait des années que je parle d’héberger les images du site sur un sous-domaine mais j’ai toujours remis cela à plus tard.

Je pensais que la configuration me prendrait un temps infini mais au final cela ne m’aura pris qu’un peu de réflexion et quelques minutes pour tout finaliser.

Le plus long aura été d’écrire ce tutoriel!

Aujourd’hui, c’est chose faite : les images des articles du site sont donc placées sur un sous-domaine pour des raisons de performances.

Voici donc un petit tutoriel qui détaille toutes les étapes. Cela prend environ 20 minutes.

Principe de fonctionnement

Les fichiers du site sont présentement servis par Apache. Le domaine est skyminds.net et nous allons créer un sous-domaine, qui est en fait un répertoire au niveau de l’arborescence du site, qui contiendra toutes les images de nos articles.

Par défaut, WordPress place tous les fichiers uploadés via l’interface d’administration dans /wp-content/uploads.

Nous allons donc créer un sous-domaine (static.skyminds.net) qui pointera vers le répertoire /wp-content/uploads.

L’intérêt est que nous n’avons pas à copier ou à déplacer de fichiers. Cela permet aussi de revenir à une installation plus classique à tout moment, sans intervention majeure.

Une fois ce VirtualHost créé, il ne reste plus qu’à modifier les options de WordPress pour les futurs articles et changer les anciennes URI des images dans les anciens articles. P

our finir, nous redirigerons les anciennes URI vers les nouvelles via .htaccess.

Etape 1 : on crée le sous-domaine sur le serveur Apache

Commençons par créer un nouveau VirtualHost pour notre sous-domaine:

nano /etc/apache2/sites-available/static.skyminds.netCode language: JavaScript (javascript)

et ajoutons-y ceci :

ServerAdmin webmaster@localhost
DocumentRoot /home/skyminds/public_html/wp-content/uploads
ServerName static.skyminds.net
ErrorLog /var/log/apache2/www-error.log

        
          AllowOverride None
          RequestHeader unset Cookie
          Header unset Set-Cookie
          Options FollowSymLinks
          Order allow,deny
          Allow from allCode language: JavaScript (javascript)

Plusieurs choses sont importantes à noter dans ce fichier de configuration Apache:

DocumentRoot pointe vers le répertoire /home/skyminds/public_html/wp-content/uploads
on retire tous les cookies servis par static.skyminds.net

Pas de cookies, pas de soucis et un site qui gagne en rapidité !

HTML5 : corriger l'erreur "The frameborder attribute on the iframe element is obsolete. Use CSS instead." photo

WordPress : valider le code oEmbed Youtube en HTML5

26 September 202428 novembre 2012 by Matt Biscay · Lecture: 2 minutes

Le problème : le code des vidéos n’est pas valide en HTML5

Maintenant que nous avons mis à jour le code des oEmbed Youtube, nous allons rendre le code de l’iframe valide. Voici ce que le code oEmbed de WordPress donne par défaut avec un lien Youtube :

<iframe src="https://www.youtube.com/embed/Gvh2Zo7UL6E" width="660" height="371" frameborder="0" allowfullscreen="allowfullscreen"></iframe>Code language: HTML, XML (xml)

Résultat:

Or le petit problème, c’est que tout cela n’est pas vraiment valide au niveau W3C et je commence à me lasser de voir ces erreurs de validation sur toutes les pages du site avec des vidéos :

Erreur 1 : Attribute allowfullscreen not allowed on element iframe at this point.
Erreur 2 : The frameborder attribute on the iframe element is obsolete. Use CSS instead.Code language: JavaScript (javascript)

La solution : filtrer le rendu oEmbed de WordPress pour purifier le code

Voici donc la solution que j’ai mise en place sur le site : je filtre le code oEmbed de WordPress de manière à retirer le tag allowfullscreen qui n’a rien à faire là et à supprimer l’attribut frameborder, que je remplace par un style="border: none".

Éditez le fichier functions.php de votre thème et ajoutez-y cette fonction:

<?php
/*
|-----------------------------------------------------------------------
| Sky oEmbed Filter by Matt - www.skyminds.net
|-----------------------------------------------------------------------
|
| The sky_oembed_filter() function attempts to validate WordPress 
| video oEmbeds for HTML5.
| $return is the normal HTML that the oEmbed process would return. 
| $data is the data received from the oEmbed call, in an object format. 
| $url is the original URL being queried for oEmbed info. 
|
*/
add_filter('oembed_dataparse', 'sky_oembed_filter', 90, 3 );
function sky_oembed_filter( $return, $data, $url ) {
 	$return = str_replace('frameborder="0" allowfullscreen', 'style="border: none"', $return);
	return $return;
}Code language: HTML, XML (xml)

Notez que WordPress cache les résultats oEmbed dans la table postmeta donc après avoir installé ce code et si vous voulez vérifier que cela fonctionne, éditez un article pour que le postmeta se mette à jour.

Voilà, vos pages avec vidéos YouTube devraient maintenant être valides.

HTML5 : résoudre l’erreur “keyword publisher is not registered” (validateur W3C)

8 April 202216 novembre 2012 by Matt Biscay · Lecture: 1 minute

Sur votre site ou blog, vous avez peut-être ajouté le widget ou bouton +1 de Google+, le réseau social de Google. Or le petit problème, c’est que le code fourni empêche la bonne validation du document.

Voici le code fourni par Google :

<a title="Google+" href="https://plus.google.com/114535411372700844744" rel="publisher nofollow">Google+</a>Code language: HTML, XML (xml)

et voici l’erreur renvoyée par le validateur W3C :

Keyword publisher is not registered

HTML5 étant toujours en cours de réalisation, les valeurs de la balise rel sont assez restreintes et on ne peut pas mettre tout ce que l’on veut sans déclencher l’erreur.

La solution est toute simple : il faut ajouter la valeur du rel en argument dans le lien, comme ceci :

<a title="Google+" href="https://plus.google.com/114535411372700844744?rel=publisher" rel="nofollow">Google+</a>Code language: HTML, XML (xml)

Et voilà, plus d’erreur lors de la validation.

WordPress : éditer les liens de la base de données pour refléter le changement de structure des permaliens

5 April 202202 juin 2012 by Matt Biscay · Lecture: 3 minutes

Il y a quelques mois, je vous ai montré comment changer la structure des permaliens WordPress. Cela fonctionne très bien et tout le trafic des anciennes URL est bien redirigé vers les nouvelles.

Il est toutefois encore possible de faire mieux que cela : éditer toutes les URL de la base de données pour afficher les bons liens directement et éviter les redirections Apache à chaque fois qu’un visiteur clique sur un lien de vos anciens articles.

Cela évite une redirection donc permet d’afficher la bonne page directement, sans le temps de latence dû à l’exécution de mod_rewrite.

Etape 1 : sauvegarder votre base de données

On n’insistera jamais assez sur l’importance de sauvegarder les données avant d’effectuer une quelconque manipulation des données.

Commancez donc par faire une sauvegarde de votre base WordPress, vu que nous allons l’éditer en direct.

WordPress : changer la structure des permaliens

18 August 201325 février 2012 by Matt Biscay · Lecture: 2 minutes

wordpress_icon_blue Il y a quelques semaines, j’ai décidé de changer la structure des permaliens (ou permalinks) sous WordPress.

Je me suis rendu compte que finalement, il y avait très peu d’intérêt à garder la date de création de l’article dans l’URL étant donné qu’elle est présente dans chaque article, cela permet de raccourcir les URLs et mes articles sont plutôt timeless.

Cela se fait en 2 étapes, en 5 minutes top chrono.

Etape 1 : changer la structure des permaliens WordPress

C’est tout simple, il suffit de se rendre dans Settings > Permalinks et de sélectionner Post name:

wordpress permalinks postname

Depuis WordPress 3.3, choisir l’option /%postname%/ ne pose plus de problème de performance. C’était le cas auparavant et l’option n’était pas disponible.

Validez les changements.

Webdesign : le site du collège Pablo Picasso

8 March 202423 novembre 2011 by Matt Biscay · Lecture: 1 minute

Il y a quelques mois, je vous avais dit que j’étais en charge du site du collège Pablo Picasso, où j’ai passé quelques années, mais je ne vous avais jamais dévoilé le design – le voici donc :

design college pablo picasso montfermeil

J’ai laissé la main à une collègue depuis que je suis parti – d’ailleurs on peut voir qu’il y a beaucoup moins d’images et de contenu depuis – mais je garde toujours un œil dessus. C’est dur de se détacher de ses créations!

Dialogues ZEP : Doudou fait de l’infographie

21 February 202420 janvier 2011 by Matt Biscay · Lecture: 1 minute

Voici le deuxième membre de l’équipe chargée du site web du collège, ma collègue Doudou :

Je dois vous avouer que quand j’ai entendu qu’elle prenait des cours d’infographie, j’étais plein d’attentes : je voyais déjà un site aux lignes structurées avec un design unique, des logiciels professionnels… et là, paf! Le gif animé qui ruine toute cette vision d’avenir.

Le site de l’Académie de Créteil n’accepte que deux navigateurs : Internet Explorer et Firefox

1 April 202202 décembre 2010 by Matt Biscay · Lecture: 4 minutes

Ces derniers temps, je travaille sur le site internet du collège. Du coup, j’ai moins de temps pour le mien tiens.

Bref, j’y travaille donc et je rajoute quelques petits liens utiles comme des liens vers l’Inspection Académique, le Bulletin Officiel, le site académique… que des sites qui ne sont visités que par les personnels de l’Éducation Nationale en somme.

Vu que je fais les liens, je jette un œil aux sites sus-cités. Et là, paf!, un message d’erreur que je ne peux m’empêcher de partager ici avec vous :

Alors là, bien joué les gars ! C’est bien la peine d’avoir un site XHTML 1.0 valid (bel effort, soulignons-le) si c’est pour mettre à la porte tous les visiteurs qui possèdent un navigateur autre qu’Internet Explorer 8 ou Firefox 3.