Matt Biscay: développeur WordPress et WooCommerce pour SkyMinds
Javascript : afficher le contenu d'un bloc HTML après un délai variable photo

JavaScript : afficher du contenu dans un bloc DIV après un délai défini

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.

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) :

.centered {
    margin:0 auto;
    text-align:center;
}

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

<div id="example_div" class="centered"> </div>

Ainsi que le code JavaScript qui s’occupe du délai:

/*
|-----------------------------------------------------------------------
| Delayed DIV text in vanilla JavaScript by Matt 
| URL : https://www.skyminds.net
|-----------------------------------------------------------------------
|
| Returns predefined text in a DIV after a delay.
|
*/
(function(){
   var element_id = 'example_div' ; /* name of div ID w/ delayed text */
   var delayed_text = "Ceci est un texte d'illustration pour tester l'affichage d'un bloc DIV après un délai défini."; 
   var time = 7; /* time in seconds until display */

setTimeout(function(){
document.getElementById(element_id).innerHTML = delayed_text;},time*1000);
})();

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.

Ne pas oublier d’échapper les slash par des antislash dans les balises de fermeture (liens, paragraphes etc) dans la variable delayed_text.

Simple et efficace.

WordPress : afficher les accents dans des blocs texte colorisés par Crayon Syntax Highlighter photo

WordPress : afficher les accents dans des blocs texte colorisés par Crayon Syntax Highlighter

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.

Lire la suite

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

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

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 ?

Travaux pratiques : lancement de Question-College.fr photo

Travaux pratiques : lancement de Question-College.fr

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.

Guide pour créer et héberger un site sur Internet photo 3

Guide pour créer et héberger un site sur Internet

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 : le type de site que vous allez créer, le public visé, le langage de programmation ou la plateforme choisi, les fonctionnalités à mettre en œuvre, le nom du site et le nom de domaine, votre identité graphique (couleurs, logo)…

Tout doit commencer avec un papier et un crayon : couchez par écrit ce que souhaitez en termes de fonctionnalités et de design.

Faîtes un plan. Je vous promets que vous ne le regretterez pas, c’est du temps gagné pour la suite.

Lire la suite

WiseStamp signature

Ajouter une signature HTML sous Gmail, Yahoo! Mail et Hotmail

wisestamp

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 mal formé (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.

Lire la suite

Dernière journée TICE

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.