Gloubi script – texte avec un arrière-plan défilant

Publié le par
Répondre

Aujourd’hui nouveau tuto sur un gloubi script d’effet sur texte. Cette fois ci, il s’agit de texte avec arrière-plan défilant.

Principe du script

Le script original est disponible sur sa propre page sur le site de notre gloubi adversaire.

Il fonctionne selon le principe de calques : au-dessus du calque de motif, on place un autre calque où le texte fait des « trous », laissant voir ce que l’on place dessous (ici notre calque de motif).

Le calque de motif est plus grand que le calque supérieur, mais on masque ce qui est en dehors de la zone du calque supérieur. Ce calque de motif est ensuite déplacé par du code JS.

Continuer la lecture →

Le retour du compteur de caractères

Publié le par
Répondre

Après être revenu dernièrement sur ma série de tutos d’introduction aux canvas, j’ai décidé de m’attaquer à l’un de mes anciens articles me valant le plus d’affichage sur le moteur de recherche d’Alphabet : le compteur de caractères.

Comme pour mes derniers articles traitant de JavaScript, une fois de plus je n’utiliserai que des fonctions natives, sans aucune librairie.

Organisation du nouveau code

Le nouveau code sera réparti dans deux fonctions : une fonction d’initialisation, et la fonction en charge du compte des caractères. Cette dernière fonction étant appelée une fois à l’initialisation, pour pouvoir être utilisable sur une page où les champs de formulaire contiennent déjà du texte (une amélioration par rapport à l’ancien code), et ensuite attachée à un événement sur les champs.

Un des gros changement est la manière dont on va passer les paramètres à notre champ compteur de caractères : au lieu de passer ces paramètres à notre fonction d’initialisation, on va utiliser des attributs HTML.

Continuer la lecture →

Gloubi tuto – menu interactif déroulant

Publié le par
Répondre

Cette semaine, attaquons-nous à un autre script de menu présenté chez notre gloubi adversaire.

Ce script est visible sur cette page, et est toujours fonctionnel dans les navigateurs modernes.

Fonctionnement

Le menu produit par ce script se présente sous la forme d’un tableau dans un tableau (je parle là des balises HTML).

<table>
    <tr>
        <td>Rubrique</td>
    </tr>
    <tr>
        <td>Liens....</td>
    </tr>
    <tr>
        <td>Rubrique</td>
    </tr>
    <tr>
        <td>Liens....</td>
    </tr>
</table>
Continuer la lecture →
Pages : 1 2

Les dégradés en CSS

Publié le par
Répondre

Comme sous-entendu dans un précédent gloubi tuto, il est maintenant possible avec CSS3 de créer des dégradés de couleurs.

Pour CSS, les dégradés sont considérés comme des images, et donc doivent être utilisés dans l’attribut background ou background-image d’une déclaration de style.

Il existe en CSS 3 types de dégradés :

  • les dégradés linéaires : les couleurs sont étalées le long d’un axe
  • les dégradés radiaux : les couleurs sont étalées depuis un point dans deux axes
  • les dégradés coniques : les couleurs sont étalées autour d’un cercle
Continuer la lecture →
Pages : 1 2

Amusons-nous avec les canvas – le retour

Publié le par
Répondre

Il y a quelques années, j’avais écrit une série d’articles expliquant comment créer à l’aide du  tag <canvas> un texte ombré avec une image en fond utilisant une police Google Fonts.

La technique ayant un peu évolué depuis, et ayant fait de nouveaux essais de mon côté, je pense qu’il est temps de créer une nouvelle version de ce code.

Le premier changement concerne la façon dont on gère l’utilisation de la police Google Font dans le canvas.

Dans le premier script, le chargement de la police était assuré de manière “classique” par CSS. Le problème ? Pour que la police soit utilisable dans le canvas, il faut que la police soit utilisée sur au moins un élément de notre page. Et pour s’assurer que la police soit bien chargée, le code qui s’occupe du “dessin” est exécuté après 1s (utilisation d’un setTimeOut()).

Depuis les versions 35 de Chrome et la version 41 de Firefox, toutes deux sorties après la rédaction de la première série d’articles, il existe un objet JavaScript qui permet de définir une police personnalisée, qui par la suite peut être utilisée partout sur le document, y compris dans les canvas.

Continuer la lecture →

Gloubi tuto – un texte en dégradé

Publié le par
Répondre

Pour ce deuxième gloubi tuto, on s’attaque à un script qui a eu son petit succès sur Skyblog : le texte « arc-en-ciel » (en dégradés).

Script original et explication

Pour voir le script original, qui fonctionne encore dans les navigateurs modernes, rendez-vous ici sur le site de notre Némésis dans la deuxième guerre du gloubi.

Le script fonctionne comme suit :

Avant d’appeler la principale fonction de notre script, on construit un tableau de correspondance décimal vers hexadécimal à l’aide de deux boucles imbriquées.

Continuer la lecture →
Pages : 1 2

Gloubi tuto – un menu interactif Hello Kitty

Publié le par
Répondre

Bienvenue sur ce premier gloubi tuto (pour en savoir plus sur les gloubi tutos) qui concerne un menu interactif avec Hello Kitty.

Présentation et explication de l’existant

Pour voir la source du script actuel, RDV sur cette page du site de notre nouvel adversaire dans la guerre du gloubi.

Continuer la lecture →

10 ans

Publié le par
Répondre

Voilà maintenant 10 ans que ce site existe (à quelques mois près, toujours mieux que pour la vraie naissance du Geek Communicant). Il est temps de faire un bilan de ces 10 dernières années.

La création du site

J’ai créé ce site en septembre 2012, pour avoir un endroit vraiment à mon nom (en tout cas à mon pseudo) suite à mes 2 ans au sein de l’école Sup de Pub.

À cette époque là je possédais déjà des compétences en HTML (voir mon premier site) et PHP, et même si elles étaient alors relativement basiques, je commençais déjà à me destiner à travailler dans le monde du Web, et quoi de mieux pour montrer ses compétences qu’avoir son propre site ?

Ce fut donc chose faite et partageait alors la nouvelle sur mon premier blog (geekcommunicant.wordpress.com), qui m’a offert une plateforme pour m’aider à me faire reconnaitre.

Continuer la lecture →

Le fossoyeur de sites

Publié le par
Répondre

En fouillant dans un ancien disque dur externe (un dinosaure de 500Go qui a sa propre alimentation) j’ai retrouvé mon premier « vrai » site web, créé quelques années avant ma naissance en tant que Geek Communicant.

Je pensais l’avoir définitivement perdu, sachant que le projet avait été rendu sur un CD gravé, et que j’ai changé plusieurs fois d’ordinateur depuis (sans me rappeler que j’en avais fait une sauvegarde).

Continuer la lecture →

Fix phpThumbOf with MODX 3

Publié le par
Répondre

If like me since you updated to version 3 of MODX your pages using the Extra phpThumbOf are not loading anymore, do not panic, I have found a solution.

Why the problem?

MODX 3 seems to have moved some of its files since phpThumbOf was last updated. The consequence is that the Extra could no more load the library it needs.

Solution

You have to edit 2 files. One is accessible through the manager and the second have to be edited via FTP (or SSH if you have access to your server).

Continuer la lecture →