Tag

HTML

Browsing

Voici comment afficher du contenu (texte, HTML, JS, CSS ou tout autre contenu) dans un bloc DIV, après un délai que vous aurez préalablement défini, le tout en JavaScript.

Javascript : afficher le contenu d'un bloc HTML après un délai variable photo

C’est écrit en JavaScript pur (vanilla JavaScript), c’est-à-dire sans librairies supplémentaires, et donc compatible avec tous les navigateurs. On utilise innerHTML pour faire apparaître la div après le délai imparti.

Exemple de contenu affiché après un délai

Le texte suivant apparaît 7 secondes après le chargement de la page :

Le code : afficher le contenu d’une DIV après un délai

Voici le style CSS à placer dans l’entête de la page (HEAD) :

Et voici le contenu à placer dans le corps de la page (BODY):


Fonctionnement du script

Voici comment fonctionne le script : on recherche le bloc DIV qui possède l’identifiant #exemple_div et on lui injecte le contenu de la variable delayed_text après le délai en secondes défini dans la variable time.

[box type= »info »]Ne pas oublier d’échapper les slash par des antislash dans les balises de fermeture (liens, paragraphes etc) dans la variable delayed_text.[/box]

Simple et efficace.

Pas mal de nouveautés ont fait leur apparition sur le site cet hiver.

La plupart sont under the hood et donc invisibles mais pour le reste, voici ce qui a été ajouté, modifié ou retiré.

Sécurisation du serveur email

Sur le serveur de mail, j’ai ajouté l’authentification SPF, Sender-ID et DKIM à Postfix et Bind9 avec opendkim, ce qui permet de rendre les messages plus fiables puisqu’ils sont désormais signés lors de l’envoi du serveur. Cela permet notamment de ne pas être catégorisés comme spam.

Passage en HTTPS

Cela m’a demandé pas mal de recherches pour bien faire les choses mais je suis très content du résultat : le site est maintenant intégralement servi en HTTPS avec une connexion chiffrée par TLS uniquement.

J’ai d’abord passé Apache en HTTPS en Perfect Forward Secrecy, puis configuré WordPress de manière à tout servir sur une connexion chiffrée.

Ensuite, est venu le tour de chiffrer Webmin, le webUI du client bittorrent Transmission, et Postfix et Courier pour l’acheminement des emails de manière sécurisée.

J’ai passé Varnish en version 4.x avant de réaliser qu’il ne m’était plus vraiment nécessaire puisque je sers tout en HTTPS et que les fichiers servis chiffrés ne peuvent pas être mis en cache. Varnish ne gérant pas SSL, je l’ai finalement retiré de ma chaîne.

Enfin, je suis passé du mode prefork d’Apache au mod FastCGI et PHP-FPM avec Apache MPM Worker, qui sert les pages bien plus rapidement en utilisant moins de ressources que le mod PHP. Cela me servira un jour si je souhaite troquer Apache pour un autre serveur comme NginX.

Sous Apache, le module SPDY a été ajouté, qui sera bientôt remplacé par HTTP/2 (à prononcer « HTTP bis »).

Tutoriels

J’ai finalisé le pack de correctif post-SP3 de Windows XP, dernière version pour les aficionados de ce regretté OS.

Quelques nouveaux tutoriels linux ont également vu le jour. On a vu comment installer une imprimante d’étiquettes WiFi Brother QL-710W puis installer Wine sous Ubuntu 14.04 avant de voir comment corriger le son saccadé sous VLC lors de la lecture de fichiers audio et télécharger des vidéos en streaming dans le terminal avec MovGrab.

Nous avons vu comment récupérer les données d’un disque dur issu d’un RAID1 ou encore installer la dernière version d’OpenSSL sous Debian… Période plutôt faste pour les tutos!

Site du CKYF

J’ai été commissionné pour redesigner le site du Centre de Kriya Yoga France : nouveau logo, nouvelle charte graphique, visuels, réseaux sociaux… bref, on est loin du premier site maison que j’avais créé pour eux en 2002 !

C’est aussi plus clair, lisible et visible sur n’importe quel appareil.

Jusqu’à très récemment, il m’était tout à fait possible d’avoir des caractères accentués dans des blocs de texte sous WordPress en utilisant le plugin Crayon Syntax Highlighter pour coloriser le code.

crayon-syntax-highlighter

Or depuis quelques temps tous les blocs en lang="text" ne permettent plus d’afficher les accents : je me retrouve avec des mots tronqués comme si le texte n’était pas encodé en UTF-8.

Problème : des caractères non-Unicode

Voici ce que donne la phrase « j’ai mangé une tarte à la crème à Noël » avec une colorisation par défaut avec Crayon Syntax Highlighter :

J'ai mangé une tarte à la crème à Noël.

Gloups! C’est totalement illisible, les accents deviennent un caractère mal encodé et certaines lettres adjacentes sont littéralement supprimées. Pas glop.

Solution : créer un alias

La solution que je propose est plus une rustine d’appoint qu’une véritable solution.

Je pense que le problème réside dans l’expression régulière des langages du plugin : certains langages (shell par exemple) n’acceptent pas les accents alors que d’autres (HTML par exemple) oui.

Je me suis rendu compte en changeant la langue du bloc que le langage batch affichait correctement les accents.

Comme je n’allais pas éditer tous mes articles pour changer le langage des blocs texte que j’ai utilisé jusqu’à maintenant, j’ai opté pour la création d’un alias.

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 ?

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.

A la demande de Bashogun, voici un petit guide qui dévoile les étapes de la création et l’hébergement d’un site Internet. Ce guide est plutôt général et ne se veut pas exhaustif, c’est plus une suite d’étapes pour gagner du temps pour monter et mettre rapidement un site en ligne.

you are here

Sachez que la première chose à faire est définir vos besoins : quel type de site allez-vous créer, à quel public s’adresse-t-il, quel langage (code du site) allez-vous utiliser, quelles sont les fonctionnalités à mettre en oeuvre, combien de pages pensez-vous créer dès le départ, nom du site, design (couleurs, logo)… Tout doit commencer avec un papier et un crayon : couchez par écrit ce que voulez puis commencez à dessiner à main levée votre design. Faîtes un plan. Je vous promets que vous ne le regretterez pas, c’est du temps gagné pour la suite.

Si vous utilisez l’un des grands services de webmail actuels comme Gmail, Yahoo! Mail, AOL Mail ou Hotmail/Live, vous savez très certainement qu’il n’est pas aisé d’insérer une signature HTML aux messages que vous envoyez… tout simplement parce que le HTML est désactivé par défaut pour éviter les risques de code malformé (et donc toute tentative de hack).

Et pourtant, il existe une petite extension Firefox qui fait tout cela très bien : WiseStamp, qui vous permet de :

  • personnaliser vos signatures (plusieurs signatures possibles : professionnelles et personnelles)
  • utiliser l’éditeur WYSIWYG pour choisir la couleur et la police de caractère
  • ajouter votre logo/image à votre signature
  • insérer automatiquement votre signature lors de la rédaction de vos messages
  • inclure facilement vos identifiants de messageries instantanées + réseaux sociaux
  • prévisualiser vos signatures
  • activer/désactiver vos signatures
  • inclure vos signatures dans Gmail, Google App’s, Yahoo! Mail, Hotmail, AOL et consorts.

Et voilà, nous venons de terminer la troisième et dernière journée TICE de l’année. Je dois avouer que j’ai été agréablement surpris par les contenus de la formation : enfin du concret avec les ordinateurs. Bon je l’avoue, j’ai survolé certains contenus comme la création d’une page HTML mais d’autres ont sérieusement piqué ma curiosité. Les webquests, par exemple, me semblent être un très bon moyen d’insérer les nouvelles technologies dans le cours d’anglais : recherches sur Internet, sélection des informations pertinentes, création d’un panneau pour afficher en classe, compte-rendu oral. Tout se tient. L’essentiel est de bien détailler chaque étape : le professeur doit s’effacer et constater les progrès autonomes de l’élève. Cela me parle bien ce genre d’activité.

Le formateur – tuteur de Ben au demeurant – touche sa bille. Sérieusement, on voit qu’il aime cela et qu’il sait de quoi il parle, ce qui est toujours agréable. Par contre, j’émets quand même quelques réserves sur l’intérêt de tenter d’apprendre à la majeure partie du groupe le langage HTML et les CSS. Cela m’a semblé un peu overkill : bien sûr que cela serait génial si tout le monde pouvait coder ses pages à la main, même les CSS mais sérieusement, combien le feront ? J’ai eu l’impression que l’on dépassait largement le cadre des TICE en cours d’anglais pour s’approcher du côté obscur du code.

En allant sur le site de Mr Peer, j’ai trouvé un lien menant vers l’HTML Overlays, un concept plutôt intéressant plaçant certains éléments d’une page tels que barre de navigation ou bannières de pub dans un fichier externe qui serait appelé dynamiquement. Dit comme cela c’est un peu compliqué mais regardez cet exemple d’HTML Overlay et jettez un coup d’oeil au code source de la page : le texte en gras ainsi que la barre horizontale et le copyright n’apparaissent pas dans le code source. Apparemment cela ferait même gagner de précieuses secondes lors du chargement des pages, à garder sous le coude donc !

Rapport de faute d’orthographe

Le texte suivant sera envoyé à nos rédacteurs :