404

Désolé
On dirait que vous êtes perdu, il n'y a rien ici...

Il n'y a pas de résultat pour cette recherche

résultats de recherche ( résultats par page - pages)

  • Bricolage — 19 10 2022

    Réalisation de meuble et luminaire

    realisations bricolage /realisations/bricolage/

    Depuis mon emménagement, ,
    j'ai commencé à fabriquer des meubles, luminaire et autres objets

    Sommaire

    Bibliothèque et bureau — 13 janvier 2021

    Mon premier meuble sur mesure.
    J'avais réalisé un tableau qui calculait automatiquement la taille des planches selon les épaisseurs que je saisiser comme la taille du meuble était fixe

    Meuble vide
    Meuble fini vide
    Meuble utilisé
    Mise en situation du meuble

    Luminaire — 21 novembre 2021

    Impossible de mettre une suspension au-dessus de ma table à manger sans faire de gros travaux et en réalisant quelque chose de propre
    Un lampadaire est idéal pour ce genre de situation mais leurs prix sont exorbitants si l'on veut quelque chose d'esthétique

    Découpage des tasseaux
    Découpage des tasseaux, puis huilage
    Assemblage
    Assemblage des différentes parties
    Lampadaire terminé
    Résultat final
    Lampadaire qui éclaire une table
    Mise en situation
    Changement d'orientation de la table, donc agrandissement de la barre
    Le poids de la barre + de la suspension était trop lourd, j'ai donc du renforcer le tout

    Horloge Lego — 18 décembre 2021

    Une commande de ma belle-mère qui voulait que je lui réalisasse quelque chose en Lego.
    Il est difficile de se procurer une liste de pièces définies (hors énorme quantité), je suis partis sur quelque chose d'assez abstrait et artistique, réalisable avec une boîte de base que l'on trouve facilement.
    Ma belle-mère étant dingue d'horloge, il était évident que je lui en réalise une

    Boîte de lego
    Boîte de lego de base
    Horloge
    Horloge final

    Bougoir — 01 janvier 2022

    Réalisé à partir à partir d'une palette en bois

    Creusage du bois
    Creusage d'un espace pour accueillir une bougie
    Découpage sommaire de la forme
    Découpage sommaire pour la forme avec des outils inappropriés

    Je voulais faire une forme géométrique, mais ce fut impossible à faire avec les outils à ma disposition.
    J'ai fini par arrondir les angles, le résultat reste sympa même si pas du tout symétrique comme il était alors prévu

    Résultat final

    Cuisine enfant — 04 septembre 2022

    Avant
    Apres

    Aménagement toilette — 16 septembre 2022

    Porte papier toilette en fabrication
    Ensemble final, avant il n'y avait que la vasque murale

    Lit étagère — 8 octobre 2022

    Un croquis rapide
    Découpage des planches dans un magasin de bricolage, puis assemblage
    Il ne reste plus qu'a thermocollé les champs

    Lampe vertical — 15 octobre 2022

    Hors l'inesthétique de la visibilité de l'ampoule cela ébloui lorsqu'elle est allumé
    Une simple feuille de papier blanche améliore tous ça

    Miroir (WIP) — 19 octobre 2022

    Découpe et placement rapide des chutes de bois
    Concept de deux miroirs juxtaposés, l'un avec un cadre le plus propre possible et l'autre réalisé a à base de chutes de bois de découpe précédente
    Reste a poncé, huilé, assemblé....
  • Déployer Strapi V4 sur Heroku — 12 09 2022

    18 étapes simples et détaillées pour déployer Strapi V4 en production sur Heroku

    recueil deployer-strapi-v4-sur-heroku /recueil/strapi-heroku/

    Services et pre-requis

    Il est nécessaire de créer un compte sur ces différents services

    • GitHub : Hébergement des sources
    • Strapi : CMS open-source headless
    • Heroku : Plate-forme d'applications en ligne
      À partir du 28 novembre 2022, les ressources gratuites Heroku Dynos, Heroku Postgres et Heroku Data for Redis® ne seront plus disponibles.

    De la création du projet à sa mise en production

    1. Créer un projet Strapi V4 :
      Dans un terminal à l'emplacement du dossier de projet désiré
      yarn create strapi-app dossier-du-projet --quickstart
    2. Une fois l'installation terminée, le navigateur ouvre automatiquement un nouvel onglet.
      Il faut enregistrer le premier utilisateur qui sera le super admin
    3. Commit/push le projet sur GitHub
    4. Allez sur Heroku.com, se connecté,
      Cliquez sur "create a new app"
    5. Entrez le nom de votre application (Heroku vous dira si le nom est disponible).
    6. Choisissez GitHub, puis recherchez le dépôt que vous souhaitez déployer
    7. Activez les déploiements automatiques, puis déployer
    8. Si vous avez une erreur, pas de panique, on continue !
    9. Utiliser l'add-on Postgres de Heroku comme base de données
      Cliquez sur le menu "Ressources"
      puis dans la barre de recherche "Heroku Postgres"
    10. Submit Order Form
    11. menu "Settings"
    12. En cliquant sur "Reveal Config Vars" vous afficherez uniquement DATABASE_URL.
      Voici à quoi devrait ressembler la syntaxe complète
      postgres://{user}:{password}@{hostname}:{port}/{database-name}
    13. Ajouter les "key value" selon votre DATABASE_URL
      postgres://aaaaaaaa:bbbbbbbbbbbbbbbbbbbbbbbbbbbb@ccc-cc-ccc-cc:dddd/eeeeeee
      KEY VALUE
      DATABASE_USERNAME aaaaaaaa
      DATABASE_PASSWORD bbbbbbbbbbbbbbbbbbbbbbbbbbb
      DATABASE_HOST ccc-cc-ccc-cc
      DATABASE_PORT dddd
      DATABASE_AUTHENTICATION_DATABASE eeeeeee
      DATABASE_NAME eeeeeee
      et à la racine de votre projet, dans le fichier .env vous trouveriez quatre autres jeux de "key value" à ajouter à la suite
      KEY VALUE
      ADMIN_JWT_SECRET fffffffffff/fffff==
      API_TOKEN_SALT ggggg/ggggggggggg==
      APP_KEYS hhh/hhhh==,hhh/hhhh==,hhh/hhhh==,hhh/hhhh==,
      JWT_SECRET iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii==
    14. Ajoutez les variables d'environnement à Strapi
      Dans le dossier ./Config de votre projet, créez les sous-dossier env/production puis les fichiers database.js et server.js à l'intérieur, ajoutez-y les codes suivant

      database.js
      const parse = require('pg-connection-string').parse;
      const config = parse(process.env.DATABASE_URL);
      
      module.exports = ({ env }) => ({
        connection: {
          client: 'postgres',
          connection: {
            host: config.host,
            port: config.port,
            database: config.database,
            user: config.user,
            password: config.password,
            ssl: {
              rejectUnauthorized: false
            },
          },
          debug: false,
        },
      });
                  


      server.js
      module.exports = ({ env }) => ({
          url: env('MY_HEROKU_URL'),
      });
                          
    15. Dans le terminal, lancer les commandes
      yarn add pg-connection-string
      et
      yarn add pg
    16. Commit/push le code sur Github
    17.  
    18. Ajouter /admin pour accéder à Strapi
  • La Main Bleue — 31 08 2022

    Réalisation du site vitrine de La Main Bleue qui réunit diverses approches liées au geste en conscience

    realisations la-main-bleue /realisations/la-main-bleue/
    visuel principal
    Visuel principal du site en mode claire et sombre

    Studio basé à Genève où se rencontrent les diverses approches liées au corps et au sensible via le massage,le yoga,les arts visuels

    • Réalisation d'un mockup sur figma à partir des textes fournis
    • puis carte blanche pour mettre en forme avec la seul contrainte de faire un style minimaliste
    • site vitrine statique avec Eleventy
    • Thème claire et sombre
    • Source sur Github
    • Paramétrage afin que les mails de divers services arrivent sur la même messagerie
    • La Main Bleue
    Accueil de la rubrique Art
    Art - Accueil
    Rubrique des soins proposés
    Massages - Cartes des soins proposés
    Parcours et témoignages
    Yoga - Référence du Yogi
  • MasterM¿nd — 05 03 2022

    Réplique de l'un des plus classiques des jeux de société, le Mastermind, un jeu de réflexion et de déduction

    realisations mastermnd /realisations/mastermind/

    Un petit défit personnel, de réaliser en JavaScript un des jeux qui a bercé mon enfance.
    Un jeu idéal pour tuer le temps quand c'est nécessaire...

    jeux.pierre.tl Status du déploiement

    Source sur Github

    Page d'accueil sombre
    Accueil - thème sombre par défaut
    Page d'accueil clair
    Accueil - thème clair
    Page régles
    Écran des règles
    Partie en cours
    Partie en cours
  • Site statique avec CMS — 08 02 2022

    Tutoriel facile de mise en place d'un site statique avec un CMS

    recueil site-statique-avec-cms /recueil/site-statique-combo/

    Merci à Dan Urbanowicz pour son modèle pré-généré

    Services et pre-requis

    Il est nécessaire de créer un compte gratuit sur ces différents services

    • GitHub : Hébergement des sources
    • Netlify : Déploiement
    • Netlify CMS : système de gestion de contenu, pas de compte a créé celui de Netlify suffit

    C'est partie !

    Production

    1. Déploiement du site de démonstration sur netlify
    2. Cliquez sur le bouton «Connect to Github»
    3. Renommez le «Repository name», peut être fait plus tard dans les réglages de Github
    4. Cliquez sur le bouton «Save & Deploy»
    5. Le site se déploie, cela ne prend qu'une dizaine de seconde.
      L'URL passe en vert quand c'est terminé avec plus bas la mention «Your site is deployed ✓»
    6. Un des deux mails que vous recevraient vous invitera à crer le premier utilisateur sur le CMS.
      Cliquez sur le lien dans le mail
    7. Vous allez être redirigé sur votre site, ajouter à la fin de l'URL «/admin»
    8. Vous êtes inviter à saisir un mot de passe sinon saisir votre adresse mail et cliquez sur le lien «Forgot password?»

    Developpement

    Mise en place

    1. Clone le dépôt {site} sur Github
    2. Installer le projet en mettant dans la console npm install @11ty/eleventy
    3. Lancer le build : npx @11ty/eleventy --serve

    Accédé au CMS

    1. Allez dans le fichier : {site}\admin\config.yml
    2. Ajoutez à la ligne 9
      # Please run "npx netlify-cms-proxy-server" for local backend
      local_backend: true
    3. Lancer la commande npx netlify-cms-proxy-server
  • Liste de lecture — 05 02 2022

    Évolution de ma liste de lecture en ligne

    realisations liste-de-lecture /realisations/liste-de-lecture/

    Ma collection de Manga grandissant sans cesse.
    Il me venait difficile de suivre à quel tome de quelle série j'en étais.
    Mon system de liste dans un carnet était à bout de souffle
    J'ai donc entrepris de faire un mini-site Liste de lecture à la place.

    Initialement «Mangathèque», il se diversifie au fil des années (Comics, Roman, Bande Dessinée), même si la grande majorité des ouvrages référencer reste des mangas

    Sommaire

    Évolution du design

    Listage des lectures

    Options de d'affichage

    2008 : Style Apple

    • Design inspiré de iOs de l’Iphone à cette période
    • Ajout d’un backoffice pour gérer la liste
    • Choix d’affichage : séries en cours, terminées ou les deux par ordre alphabétique

    2009 : Version 2

    • Design plus chaleureux rappelant un château japonnais
    • Ajout d’un favicon pour les navigateur web :
    • Ajout du choix d’affichage séries abandonnées et du classement par préférence (notation sur 6)
    • Une seconde version ajoutera un abécédaire au debut de chaque lettre en guise d’intercalaire et un lien vers la page otions

    2010 : Version 3

    • Réorganisation de l’affichage
    • Ajout de plus de statistiques
    • Optimisation des fonctions
    • Correction des beugs

    2011 : Version 4

    • Nouveau design
    • Agrandissement des zones cliquables de l’abécédaire
    • Réduction des informations visibles par défaut
    • La notation passe à une note sur 10, avec de nouveaux smiley pour les représenter
    • Ajout d’une icon iPhone personnalisé
    • Ajout d’un system accordéon qui affiche des informations supplémentaires (auteur, éditeur, résumé et avis si renseigné.) Selon le type d’affichage en cours. L’index étant toujours la liste des mangas en cours les seules informations supplémentaires sont l’auteur et l’éditeur pour ne pas alourdir la page. Sur celle qui affiche tous les mangas, toutes les informations suplémentaires apparaissent.
    • Fusion de la page Option et Identification
    • Refonte totale des fonctions, simplification et optimisation pour un rendu plus rapide.

    2013 : Version 5

    • Barre de menu toujours visible
    • Suppression de l’abécédaire en guise d’intercalaire
    • Image adapter au écran classique et Retina/HD
    • Ajout des icons mobile (iphone, windows phone, android ) personnalisé
    • Favicon :
    • Suppression de l’accordéon d’information supplémentaire qui était peu utile et qui alourdissez le site
    • Fusion de la page Option/Identification et de la liste
    • Utilisation de la librairie Minifield, bien plus légère que jQuery

    2022 : Version 6

    Nouvelle version avec une approche plus hétéroclite ;
    Manga, Comics, Roman, Bande Dessinée etc...

      • Source du projet sur github
      • Thème sombre par défaut et un clair en option. La préférence est enregistrée dans le Local Storage
      • BDD via une feuille de calcul Google
      • Une animation se joue le temps du chargement des données, mais comme c'est très rapide, on pas le temps d'en profiter !
      • Affichage du menu via le header ou le footer
      • Selon la position du clic/tap, le menu s'ouvre du côté (droite/gauche) correspondant et du sens (haut/bas) de manière que le bouton fermé soit le premier accessible.
        Il est possible de fermer le menu également en cliquant à l'extérieur du menu
        Option qui permet d'avoir une interface et un menu avec les labels
      • Ajout des icons mobile (iphone, windows phone, android ) personnalisé
      • Favicon :
      • Suivi de projet : « Liste de lecture »
      • lecture.pierre.tl
  • Journal de bord — 11 01 2022

    Détails sur l'évolution de la nouvelle version de mon site personnel

    recueil journal-de-bord /recueil/journal-de-bord-ptl9/

    Avant propos

    Tous les deux ans en moyenne, je réalise une nouvelle version de mon portfolio. Le site étant en lui-même le projet le plus récent que j'ai à présenter, il me permet surtout d'expérimenter des méthodologies, d'appliquer des idées de conception et d'utiliser des technologies.

    Ce qui ma pousser à faire une nouvelle version, c'est le résultat que j'ai obtenu sur Website Carbon Calculator et comme cela faisait un moment que je vois passer des articles sur les générateurs de site statique, je me suis dit que l'heure était venu

    A faire

    • Image
      • Compression
      • Ajouter les images en webp article
      • Réduction des images à partir d'image retina
      • Conversion en format « webP » et « avif »
    • Tag

    11 jnavier 2022

    • Mise à jour des informations de licence et d'auteur sur package.json du site
    • Passage du suivi de l'avancement du projet « Liste de lecture » directement sur le domaine dédié : lecture.pierre.tl

    03 janvier 2022

    • Prise en compte des caractères spéciaux dans les titres, la liste des « Recueil », le fil d'Ariane et titre de page

    21 octobre 2021

    • Passage en revus des règles 6 à 24 de la Checklist qualité Web
    • Debug de l'affichage des messages de la recherche

    19 octobre 2021

    • Mise en place du re-design de mon avatar en guise de logo

    12 octobre 2021

    • Correction du lien du footer

    11 octobre 2021

    03 octobre 2021

    11 septembre 2021

    10 septembre 2021

    • Couleur bordure rouge si le champ mail du formulaire de contact n'est pas valide

    8 septembre 2021

    7 septembre 2021

    • Harmonisation des espacements
    • Refonte du menu principal pour ordonner manuellement les liens

    6 septembre 2021

    • Coloration syntaxique des balises de code sur le styleguide
      Personnalisation des couleurs sur une base monokai
    • Correction des liens pointant sur le styleguide à partir d'une recherche
    • Remplacement de la police raleway pour OpenSans car les chiffre ne font pas tous la même taille :

      Mais quelle idée franchement !?!
    • Affichage du focus des liens et boutons au clavier uniquement
    • Harmonisation des bordures arrondis + changement de style les inputs type text et search

    5 septembre 2021

    Refonte styleguide + ajout recherche

    29 aout 2021

    • Correction duplication de contenu dans le RSS
    • Premier jet de design de pagination pour la recherche
    • Ajout de la recherche et de la functionnalité sur la page 404
    • Ajout de la taille des images sur la mosaïque pour améliorer les perf

    28 aout 2021

    17 aout 2021

    • Correction du design des liens suite au passage du site en https://
    • Ajout d'un meta description par défaut
    • Ajout d'une Content Security Policy <meta http-equiv="Content-Security-Policy" content="default-src 'self';"> annulé car cela désactive les styles et scripts inline
    • Écris Performance du site
    • Mise à jour du styleguide

    15 Aout 2021

    • Repasse graphique sur les titres, la graisse des textes et les couleurs des composants
    • Correction coquille sur la page 404

    24 juillet 2021

    • Passage de la police en local pour améliorer les performances du site
    • Correction lien en 404 sur gitpod
    • Ajout des images de l'accueil en webp et avif quand elles ne sont pas vectoriel

    21 juin 2021

    13 juin 2021

    • Ajout de la balise <desciption> pour chaque page
    • On affiche la balise <meta name="date" seulement pour les réalisations et articles
    • Ajout page de maintenance
    • Passage du script de changement de thème sombre/clair en «in line»
    • Utilisation du logo en ascii pour la page de maintenance

    06 juin 2021

    • Suppression de l'intitulé de poste dans le header
    • Changement de taille, couleur et d'espacement dans le header
    • Repasse sur le menu principal et le sous-menu du styleguide
    • Repasse Intitulé de poste
    • Écris Machine à écrire
    • Mise à jour du styleguide

    05 juin 2021

    • Retropixel : mise en forme du reste à faire + repasse logo
    • Pixel-art : ajout des concours Retropixel + mise en forme du vrac/reste à faire
    • Mise à jour mosaique pour Retropixel et Pixelart

    04 juin 2021

    24 mai 2021

    • Mise a jour des lien
    • Galerie d’image en full HTML/CSS style lightbox, voir pixels en vrac

    22 mai 2021

    19 mai 2021

    • Rédaction article
    • Ajout de média

    02 mai 2021

    • Conversion automatique en format "webP" et "avif" pour les images en .png .jpg et .jpeg
    • Correction focus theme switch
    • Retire les recueils en brouillon

    25 avril 2021

    • Ajuste des styles pour les balise <code> <pre>
    • passage de la citation en html dans le markdown pour respecter la charte
    • Rédaction suite et fin : site statique
    • Changement du style pour les <figcaptions> dans un lien
    • Correctif espacement liste
    • Correctif style liste sommaire
    • Ajout fil Ariane
    • Ajout du sitemap.xml

    21 avril 2021

    • 1er commit via Gitpod
    • Coloration des listes ordonnée
    • Ajout de "créer un site statique" au recueil (wip)

    20 avril 2021

    • Rédaction suite et fin : site perso

    18 avril 2021

    • Changement de style de base des listes non ordonnée
    • Modification graisse style de base
    • Ajout style de lien secondaire
    • Ajout style liste sommaire
    • Script pour scroll horizontalement avec un molette normal
    • Suite de la rédaction : site perso
    • Repasse styleguide

    17 avril 2021

    • Rédaction en cours : historique portfolio site perso
    • Ajout d'un composant qui scroll horizontalement

    16 avril 2021

    • Amélioration du rendu des images en pixel art
    • Ajout des vignettes de concours
    • Ajout projet wet

    15 avril 2021

    • Optimisation des images de la mosaïque

    13 avril 2021

    • Test image responsive

    11 avril 2021

    Changement de la mosaïque :

    • Améliore l'affichage en mobile
    • Diminution du code
    • Changement d'aspect au survol

    10 avril 2021

    • Repasse rédactionnel sur Metalfest et Kirby
    • Rédaction et mise en forme pour Radiophonix, Aux délices d'Ahmed, Formz et Faire part mariage
    • Rédaction et mise en forme en cours pour Pixel Art

    05 avril 2021

    • Design citation
    • Couleur de fond clair pour les images sombre dans le thème sombre
    • Ajout de 2 tailles pour faire des mises en pages en large
    • Ajout intro facultatif au macro du styleguide
    • Rédaction et mise en forme : Cuyz, Kirby, Norder's Meat

    21 mars 2021

    • Script machine à écrire sur la page d'accueil uniquement
    • Mise en place lien d'évitement
    • Repasse rédactionnel sur la réalisation t-shirt Metalfest

    20 mars 2021

    • Ajout des pages de réalisation pour la mosaïque, contenu rédiger
    • Simplification de l'organisation des couleurs
    • Mise en forme des éléments de mosaïques s'il n'y a pas d'image
    • Dynamisation de la taille d'un élément de mosaïque
    • Mise en place du script machine à écrire

    17 mars 2021

    • Article "intitulé de poste" + lien caché dans le header
    • Ajout d'un mailto crypté pour le contact au lieu d'une page avec un formulaire.
    • Ajoute "↗" apres les liens ne provenant pas pierre.tl, ptl9.netlify.app ou étant local.
      C'est pas idéal mais ca fonctionne pour les pages écrite en markdown

    10 mars 2021

    • Réorganisation des couleurs
    • Ajout des styles pour le focus des liens/label
    • Ajout de la mosaïque des realisation (en cours)
    • Ajustement des listes non ordonnée
    • Ajout d'élément dans la liste des choses à faire
    • Ajout de 3 réalisations pour la mosaïque (rédaction et dynamisation en cours)

    06 mars 2021

    • Refonte des couleurs de l'ascii art
    • Ajout page 404
    • Correction des menus en small

    05 mars 2021

    • Passage du switch de thème en icone
    • Découpage des layouts en include
    • Ajouts des icons & favicons (génération via Favicon Generator)
    • Amélioration de l'affichage en mobile

    01 mars 2021

    Ajout de metadata, amélioration du layout standard, ajout d'une todolist, styleguide, repasse sur les styles

    26 février 2021

    Ajout du journal de bord, repasse design menu

    25 février 2021

    Dynamisation des menus en Nunjucks et réorganisation des fichiers, merci Bryan Robinson Dans mes sources d'inspiration je suis tombée sur un site qui afficher un texte et le corriger façon machine à écrire j'ai beaucoup aimé le style ne pas la façon de faire donc j'ai recréé un code JavaScript permettant de faire le même résultat mettre un un codeoen. Je compte l'utiliser pour l'intitulé de mon job qui est quelque chose de très controversée dans le métier français faire un lien vers l'article en question

    22 février 2021

    Durant ma recherche d'inspiration je suis tombé sur une site qui avait animé un texte façon machine à écrire. Super effet pour introduire mon intitulé de poste si controverser. Création d'un script Javascript Vanilla pour reproduire l'effet

    20 février 2021

    Ajout du design de base

    17 février 2021

    Mise en place de la méthode BUSES et d'un switch de thème sombre/clair

    14 février 2021

    Ajout de la compilation de SASS dans 11ty, merci Dennis Hagemeier et Cassey Lottman

    12 et 13 février 2021

    Mise en place du projet grâce au super tutoriel de Kyle Mitofsky Contenu de démo et déploiement automatique sur Netlify

  • Suivi de projet &laquo; Liste de lecture &raquo; — 08 01 2022

    Suivi du side projet &laquo; Liste de lecture &raquo; (ex Mangathèque)

    recueil suivi-de-projet-andlaquo-liste-de-lecture-andraquo /recueil/suivi-liste-de-lecture/

    Sommaire

    Introduction

    Anciennement Mangathèque, pour sa version sixième version j'ai envie de faire plein de changement technique et assez peu finalement d'évolution fonctionnelle

    Objectif

    • Fini MySQL et PHP, on passe à des données provenant d'un Google Sheet
    • Redesign dans un ton plus moderne et simpliste, voir les inspirations
    • Wireframe sur Figma
    • Ajout d'un thème sombre/clair
    • Ajout des notions « vendu », « lu »
    • Animation du logo avec Animate pour un petit effet Wahoo
    • Ajout d'une recherche

    Inspirations

    Planche d’inspiration sur le thème du Japon
    Icônes et illustrations sur le thème du Japon

    J'aime beaucoup l'association des couleurs : rouge, blanc, noir, gris
    et la grosse illustration du Tori et de la montagne

    Planche d’inspiration d'interface colorée et minimaliste
    Quelque simples interfaces

    Google sheet as BDD

    Google a modifié quelque chose car les méthodes pour passer un sheet en json ne fonctionnent plus, j'ai tenté pas mal d'outil en ligne qui fait toujours le travail mais sans payer les limites sont trop facilement atteints.

    Pour arriver enfin à avoir un résultat basique en Javascript

    C'est une première partie mais ça ne sera pas suffisant.
    La manipulation du « json » va être coton (me faudrait un dev pour faire ça correctement), donc je vais voir pour contourner le problème avec listjs comme je veux de toute façon l'utiliser pour la recherche.

    Couleurs

    Expérimentation de palette de couleurs
    Wireframe sommaire et couleur accessible
    Couleurs définitives accessible, décliné en thème sombre et clair

    Wireframe

    Prototype — 5 janvier 2022

    See the Pen Liste de lecture - WIP by Pierre TL (@pierre_tl) on CodePen.

    Dépôt, déploiement et sous-domaine — 8 janvier 2022

  • Google Sheets as BDD — 02 01 2022

    Test d'outils en ligne et d'un script JavaScript qui permet d'utiliser un google Sheets en base de données pour un site web

    recueil google-sheets-as-bdd /recueil/google-sheets-database/

    Sommaire

    JavaScript — 02 janvier 2022

    Outils en ligne — 28 aout 2021

    sheety.com

    100 lignes maximum par tableur, trop restreint donc éliminé

    sheetsu.com

    20 lignes maximum par tableur, c'est encore pire, éliminé aussi

    sheet2api.com

    25 lignes maximum par tableur, éliminé

    sheetdb.io
    • 2 spreadsheets APIs
    • 500 request/month
    • Handlebars snippet
    • Custom permissions

    See the Pen sheetdb.io by Pierre TL (@pierre_tl) on CodePen.

    sheet.best
    • 3 connections
    • 500 requests/month
    • Google Spreadsheets connection
    • Full CRUD API

    See the Pen sheet.best by Pierre TL (@pierre_tl) on CodePen.

  • Recevoir les email du domaine OVH Cloud avec un hébergement Netlify ? — 01 01 2022

    Tutoriel : Configuration des DNS, champ MX

    recueil recevoir-les-email-du-domaine-ovh-cloud-avec-un-hebergement-netlify /recueil/email-ovh-netlify/

    Connaître la configuration MX d’OVH

    Selon la documentaion d'OVH
    Certaines offres mails OVH ont des MX particulier

    • Allez dans le menu Web Cloud
    • Menu déroulant Noms de domaines
    • Clique sur le nom de domaine désiré exemple.fr
    • Onglet Zone DNS
    • Vous trouverez un tableau, les lignes de type : MX nous intéresse
    Exemple de configuration MX
    Domaine TTL Type d'enregistrement Priorité Cible
    @ 3600 MX 1 mx0.mail.ovh.net.
    @ 3600 MX 5 mx1.mail.ovh.net.
    @ 3600 MX 50 mx2.mail.ovh.net.
    @ 3600 MX 100 mx3.mail.ovh.net.
    @ 3600 MX 200 mx4.mail.ovh.net.

    Renseigner les DNS chez Netlify

    • Menu Domains
    • Cliquer sur votre nom de domaine
    • Dans la partie DNS settings
    • Bouton Add new record
    • Saisis les DNS trouvé précédemment
      • Record type :sélectionner MX
      • Name : Laissez le « @ »
      • Priority : voir les recommendations dans le tableau
      • Value : voir le tableau
      • TTL : le 3600 seconds par défaut est recommandé
    • Bouton Save
    • Ajouté autant DNS record qu'il y a de ligne MX dans votre tableau

    Un délai de 15 minutes à 48 heures est nécessaire pour la propagation

  • Checklist qualité Web — 21 10 2021

    Les 240 règles de la qualité Web selon Opquast

    recueil checklist-qualite-web /recueil/checklist-qualite-web/

    La checklist opquast, en bref

    La présente checklist se compose de 240 règles. Chacune d’entre elle est discutée de manière communautaire. La checklist est diffusée sous licence ouverte. Chaque règle contribue à produire mieux et plus vite de meilleurs sites et applications web.

    Opquast

    Vérification pour ce site — Règles 2020 – Version : 4.0

    Règles 2020 – Version : 4.0

    Contenus

    1. Le site fournit aux utilisateurs la possibilité de connaître les nouveaux contenus ou services.
      Journal de bord
    2. Les informations relatives aux droits de copie et de réutilisation sont disponibles depuis toutes les pages.
      Licence
    3. Le code source de chaque page contient une métadonnée qui en décrit le contenu.
      Utilise en une par défaut si une page n'en a pas de spécifique
    4. Les dates sont présentées dans des formats explicites.
      Repasse sur toutes les pages
    5. La première occurrence d'une abréviation ou d'un acronyme dans le corps de chaque page donne accès à sa signification.
      Tous les jours je me bas contre l'abus d'abréviations et d'acronymes et j'en avais plein dans mon site !
    6. La date de publication des contenus qui le nécessitent est indiquée
      Ajout de la date des réalisations et recueils sous le titre de page
    7. Un lexique ou un glossaire adapté au public visé explique le vocabulaire sectoriel ou technique.
      Non applicable
    8. Les contenus publicitaires ou sponsorisés sont identifiés comme tels.
      Ni de pub, ni sponso ici
    9. Les conditions de modération des espaces publics sont indiquées.
      Non applicable
    10. Les contenus ou fichiers destinés à des espaces publics peuvent être vérifiés avant leur envoi définitif.
      Non applicable
    11. Les espaces publics proposent au moins un moyen de signaler les abus.
      Non applicable
    12. Chaque graphique est accompagné de ses données numériques
      Non applicable
    13. La page des résultats de recherche indique le nombre de résultats, le nombre de pages de résultats, et le nombre de résultats par page.
      Fait

    Données personnelles

    1. La politique de confidentialité et de respect de la vie privée est disponible depuis toutes les pages.
      Deja dans le footer !
    2. La procédure d'accès et de rectification des données personnelles est décrite.
      Non applicable
    3. La création de compte est possible sans recours à un système d'identification tiers.
      Non applicable
    4. La création d'un compte est soumise à un processus de confirmation.
      Non applicable
    5. Le site propose un mécanisme de prévention des usurpations de compte ou d'identité
      Non applicable
    6. Les comptes ou abonnements ouverts en ligne peuvent être fermés par le même moyen.
      Non applicable
    7. Si le site propose un espace personnel ou abonné, il est possible de sauvegarder les contenus personnels.
      Non applicable
    8. La connexion à tous les services proposés est possible avec les mêmes identifiants
      Non applicable
    9. Il est possible de se déconnecter des espaces privés.
      Non applicable
    10. Le site accepte les alias mail contenant le signe +
      Pas de problème sur le formulaire de contact

    Reste 216 règles à vérifier !

  • Palette de couleur

    Palette de couleur harmonieuse et accessible

    styleguide du site , Gamme palette-de-couleur /styleguide/palette-couleur/

    Gamme 1 — Base

    Fond principal

    Bordure

    Texte courant

    Texte secondaire, légende, date, rubrique

    Lien

    Titre, puce, citation

    var(--gamme1__fond)
    var(--gamme1__bordure)
    
    var(--gamme1__texte1)
    var(--gamme1__texte2)
    var(--gamme1__texte3)
    var(--gamme1__texte4)

    Gamme 2 — Sélection de texte

    Fond
    Texte
    var(--gamme2__fond)
    var(--gamme2__texte1)

    Gamme 3 — Démo de code simple et Formulaire

    Fond
    Bordure
    Texte
    Placeholder formulaire
    var(--gamme3__fond)
    var(--gamme3__bordure)
    var(--gamme3__texte1)
    var(--gamme3__texte2)
  • Styleguide du site — 05 09 2021

    Documentation qui regroupe tous les éléments de la charte graphiques et les composants de ce site

    recueil styleguide-du-site /recueil/styleguide/

    Il n'y a pas de résultat pour cette recherche

    • Affichage — Bloc

      Caché
      <div class="hide">Caché</div>
      Texte pour les screen reader uniquement
      <div class="sr-only">Texte pour les screen reader uniquement</div>
    • Alignement — Texte

      A gauche par défaut

      <p>A gauche par défaut</p>

      texte centré

      <p class="text-center">texte centré</p>
    • Bloc

      span en mode block
      <span class="d-block">span en mode</span> block
    • Bordure — Décoration

      Haut
      <div class="bordure-h"></div>
      Bas
      <div class="bordure-b"></div>
      Gauche
      <div class="bordure-l"></div>
      Bordure
      <div class="bordure"></div>
    • Citation — Texte

      Accusamus commodi cumque ea excepturi expedita facilis, quisquam sed soluta voluptas voluptatum!

      Lorem ipsum
      <blockquote>
          <p>Accusamus commodi cumque ea excepturi expedita facilis ...</p>
          <cite>Lorem ipsum</cite>
      </blockquote>
    • Couleur — Texte

      Une : Texte courant
      <p class="tg1-1">Une : Texte courant</p>
      Deux : Texte secondaire, légende image, date, bloc scroll horizontal
      <p class="tg1-2">Deux : Texte secondaire, légende image, date, bloc scroll horizontal</p>
      Trois : Lien
      <p class="tg1-3">Trois : Lien</p>
      Quatre : Titre de niveau 2, Citation, puce des liste non ordonnée
      <p class="tg1-4">Quatre : Titre de niveau 2, Citation, puce des liste non ordonnée</p>
    • Flexbox — Bloc

      Flexbox
      <div class="d-flex">Flexbox</div>
      space-between
      item
      <div class="d-flex jc-sb">
          <div>space-between</div>
          <div>item</div>
      </div>
      space-center
      item
      <div class="d-flex jc-c">
          <div>space-center</div>
          <div>item</div>
      </div>
      align-items:
      center
      item
      <div class="d-flex jc-c" style="border: 1px solid var(--gamme1__texte3);margin-bottom:10px">
          <div>space-center</div>
          <div>item</div>
      </div>
      flex-wrap: wrap;
      item
      <div class="d-flex fw-w">
          <div>flex-wrap: wrap;</div>
          <div>item</div>
      </div>
      flex-direction: column;
      flex-direction: column;
      <div class="d-flex fd-c">
          <div>flex-direction: column;</div>
          <div>flex-direction: column;</div>
      </div>
    • Fond — Image

      Thème sombre : Fond clair + padding
      Thème clair : transparent sans padding

      logo Notiz
      <img src="" alt="" loading="lazy" class="fond-clair"/>
    • Formulaire — Bloc

      <input type="checkbox" class="hide-checkbox" id="demo"/>
      <label for="demo">Démo</label>
      <input type="text" placeholder="type text"/>
      <div class="pr w-50">
          <input type="search" class="search js--rechercheBtn" placeholder="Demo..." />
          <svg class="pa-cr fill--mode" width="24px" height="24px">
              <use xlink:href="#loupe"></use>
          </svg>
      </div>
      <textarea placeholder="Textarea"></textarea>
      <button class="bouton">Bouton</button>
    • Graisse — Texte

      Défaut, Normal (300)
      <p>Défaut, <span class="tw-3">Normal</span></p>

      Quatre-cents (400)

      <p class="tw-4">Quatre cents</p>
      Sept-cents, strong (700)
      <span class="tw-7">Sept-cents</span>, <strong>strong</strong>

      Couleur quatre : défaut (500)

      <p class="tg1-4">Couleur quatre : défaut (500)</p>

      Couleur quatre : Sept-cents, strong (700)

      <p class="tg1-4"><span class="tw-7">Couleur quatre : Sept-cents</span>, <strong>strong</strong></p>
    • Grille — Bloc

      Medium down : Les colonnes font 100% et sont espacé de $espace-m
      Large : La deuxième colonne est de la taille indiqué moins la taille de la gouttière $espace-m

      Colonne 1
      Colonne 2
      <div class="d-flex">
          <div class="w-">Largeur du contenu</div>
          <div class="w-">Largeur du contenu</div>
      </div>
      Colonne 1
      Colonne 2
      <div class="d-flex">
          <div class="w-50">Colonne 1</div>
          <div class="w-50">Colonne 2</div>
      </div>
      Colonne 1
      Colonne 2
      <div class="d-flex">
          <div class="w-70">Colonne 1</div>
          <div class="w-30">Colonne 2</div>
      </div>
      Colonne 1
      Colonne 2
      Colonne 3
      <div class="d-flex">
          <div class="w-33">Colonne 1</div>
          <div class="w-33">Colonne 2</div>
          <div class="w-33">Colonne 3</div>
      </div>
    • Hauteur de ligne — Texte

      Zero neuf
      Zero neuf
      Zero neuf

      <p class="th-09">Zero neuf</p>

      Normal
      Normal
      Normal

      <p>Normal</p>

      Deux
      Deux
      Deux

      <p class="th-2">Deux</p>
    • Image

      Empêche que l'image soit flout

      favicon en pixel art
      <img src="" alt="" loading="lazy" class="pa"/>
    • Largeur — Bloc

      largeur 100%
      <div class="w-100">largeur 100%</div>
      largeur 70%
      <div class="w-70">largeur 70%</div>
      largeur 50%
      <div class="w-50">largeur 50%</div>
      largeur 33.333%
      <div class="w-33">largeur 33.333%</div>
      largeur 30%
      <div class="w-30">largeur 30%</div>
    • Lien — Texte

      La lien d'évitement est affiché au focus en absolute en haut à gauche

      <a href="#">Lien primaire</a>
      intermédiaire
      <a href="" rel="external">Lien primaire externe</a>
      <a class="lien-niveau2" href="#">Lien secondaire</a>
      <a class="lien-niveau2" href="" rel="external">Lien secondaire externe</a>
      <ul class="ul-sommaire">
          <li><a class="lien-niveau2" href="#">Sommaire</a></li>
      </ul>
      <a href="#" class="tg1-1 td-0">Lien de couleur "une"</a>
      <a href="#contenu" class="lien-evitement">Lien évitement</a>
      <a href="#" class="tg1-1 tw-7">Menu header niveau 1</a>
      <a href="#" class="tg1-1">Menu header niveau 2</a>
      <a href="#" class="tg1-1 td-0">Menu footer</a>
    • Liste — Texte

      Liste standard de contenu

      • un
      • deux
      • trois
      <ul>
          <li>un</li>
          <li>deux</li>
          <li>trois</li>
      </ul>

      Liste pour sommaire

      <ul class="ul-sommaire">
          <li class="mb-xs">
              <a href="#" class="lien-niveau2">
                  un
              </a>
          </li>
          <li class="mb-xs">
              <a href="#" class="lien-niveau2">
                  deux
              </a>
          </li>
          <li class="mb-xs">
              <a href="#" class="lien-niveau2">
                  trois
              </a>
          </li>
      </ul>
      {{ macro.sommaire(["Un", "Deux", "Trois"]) }}

      Liste sans style — Reinitialisé

      • un
      • deux
      • trois
      <ul class="ul-reset">
          <li>un</li>
          <li>deux</li>
          <li>trois</li>
      </ul>

      Liste numéroté

      1. un
      2. deux
      3. trois
      <ol>
          <li>un</li>
          <li>deux</li>
          <li>trois</li>
      </ol>
    • Marge — Bloc

      Espacement standard

      Haut Droite Bas Gauche Haut et Bas
      120px mb-xl
      60px mb-l
      30px pt-m mr-m mb-m
      15px mb-s pl-s py-s
      7px mr-xs mb-xs

      Conteneur header et footer

      header ou footer
      <div class="px-tranche">
          header ou footer
      </div>

      Enfant d'un conteneur

      S'applique aux enfants direct, quelle que soit la balise, sauf au premier enfant

      1
      2
      3
      <div class="d-flex mr-m__enfant">
          <div>1</div>
          <div>2</div>
          <div>3</div>
      </div>
      1
      2
      3
      <div class="d-flex ml-s__enfant">
          <div>1</div>
          <div>2</div>
          <div>3</div>
      </div>
    • Markdown

      Ajouté la classe CSS markdown à la balise du conteneur

      ou

      Sur la page utilisant le layout-standard.njk ajouté markdown: "true"

    • Position

      position relative
      <div class="pr">position relative</div>

      Positionné l'icône centré à droite

      <div class="pr w-50">
          <input type="search" class="search js--rechercheBtn" placeholder="Demo..." />
          <svg class="pa-cr fill--mode" width="24px" height="24px">
              <use xlink:href="#loupe"></use>
          </svg>
      </div>
    • Scroll-x — Bloc

      • 1111111111111111111111111111111111111111
      • 2222222222222222222222222222222222222222
      • 3333333333333333333333333333333333333333

      Légende si nécessaire

      <ul class="ul-reset scroll-x mb-xs">
          <li>un</li>
          <li>deux</li>
          <li>trois</li>
      </ul>
      <p class="tg1-2 mb-s">
          <em>Légende si nécessaire</em>
      </p>
      • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad aperiam cum, dolor eius error et explicabo fugiat harum laudantium minima obcaecati ratione reiciendis sint sit vel vitae voluptas voluptates?
      • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad aperiam cum, dolor eius error et explicabo fugiat harum laudantium minima obcaecati ratione reiciendis sint sit vel vitae voluptas voluptates?
      • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad aperiam cum, dolor eius error et explicabo fugiat harum laudantium minima obcaecati ratione reiciendis sint sit vel vitae voluptas voluptates?
      <ul class="ul-reset scroll-x var--90 mb-xs">
          <li>un</li>
          <li>deux</li>
          <li>trois</li>
      </ul>
    • SVG — Image

      Coloration selon le thème

      <svg width="18px" height="18px" class="fill--mode">
          <use xlink:href="#darkMode"></use>
      </svg>

      Changement de couleur au survol

      <svg width="18px" height="18px" class="fill--mode var--lien">
          <use xlink:href="#darkMode"></use>
      </svg>
    • Taille — Texte

      Tres grand

      <p class="ts-xl">Tres grand</p>

      Grand

      <p class="ts-l">Grand</p>

      Normal, Strong

      <p>Normal, <strong>Strong</strong></p>

      Petit

      <p class="ts-s">Petit</p>
    • Texte — Texte

      Menu actif
      <span class="tg1-1 td-1">Menu actif</span>
    • Titre — Texte

      Nom du site - header

      <p class="ts-xl tg1-1 tw-4 th-09">Nom du site - header</p>

      Niveau 1 - titre page

      <p class="ts-xl tg1-1 tw-4">Niveau 1 - titre page</p>

      Niveau 2

      <p class="ts-l tg1-4 th-2 tw-4">Niveau 2</p>
      {{ macro.h2("Niveau 2") }}
      {{ macro.h2("Niveau 2", "ancre", "16/08/2021") }}
      {{ macro.h2("Niveau 2", "", "16/08/2021") }}

      Niveau 3

      <p class="ts-l mb-s">Niveau 3</p>
      {{ macro.h3("Niveau 3") }}
      {{ macro.h3("Niveau 3", "16/08/2021") }}

      Texte courant

      <p>Texte courant</p>

      Niveau 4

      <p class="ts-s tg1-2 tw-4">Niveau 4</p>
    • Palette de couleur — Gamme

      Gamme 1 — Base

      Fond principal

      Bordure

      Texte courant

      Texte secondaire, légende, date, rubrique

      Lien

      Titre, puce, citation

      var(--gamme1__fond)
      var(--gamme1__bordure)
      
      var(--gamme1__texte1)
      var(--gamme1__texte2)
      var(--gamme1__texte3)
      var(--gamme1__texte4)

      Gamme 2 — Sélection de texte

      Fond
      Texte
      var(--gamme2__fond)
      var(--gamme2__texte1)

      Gamme 3 — Démo de code simple et Formulaire

      Fond
      Bordure
      Texte
      Placeholder formulaire
      var(--gamme3__fond)
      var(--gamme3__bordure)
      var(--gamme3__texte1)
      var(--gamme3__texte2)
  • Performances du site — 17 08 2021

    Résultat du site sur différentes moulinettes de performance et calcul

    recueil performances-du-site /recueil/performance-du-site/

    Sommaire

    Website Carbon Calculator — Plus propre que 91% des pages web testées

    Capture d'écran du résultat
    Website Carbon Calculator

    Dareboost — Note : 91%

    Capture d'écran du résultat
    dareboost

    GTmetrix — Grade A

    Capture d'écran du résultat
    GTmetrix

    PageSpeed Insights — 98 en mobile, 100 sur ordinateur

    PageSpeed Insights

    Mobile

    Capture d'écran du résultat mobile : 98

    Ordinateur

    Capture d'écran du résultat ordinateur : 100
  • Comment lier son nom de domaine OVH Cloud à son hébergement Netlify — 21 06 2021

    Tutoriel : Lier Netlify et OVH Cloud

    recueil comment-lier-son-nom-de-domaine-ovh-cloud-a-son-hebergement-netlify /recueil/lier-netlify-ovh/

    Récupération des Serveurs DNS de votre projet coté Netlify

    • Allez sur le projet Netlify
    • Cliquer sur le bouton sur « Domain settings »
    • « Options »
    • « Edit domain »
    • Trouver la liste de 4 dns commencent par dnsx.
      • dns1.riri.fifi.loulou
      • dns2.riri.fifi.loulou
      • dns3.riri.fifi.loulou
      • dns4.riri.fifi.loulou

    Renseigner les quatre DNS trouvé dans OVH Cloud

    • Menu « Web cloud »
    • Menu «Nom de domaine »
    • Cliquer sur votre nom de domaine
    • Menu « Serveur DNS »
    • Bouton « Modifier les serveurs DNS »
    • Saisis les quatre DNS trouvé précédemment
    • Bouton « Appliquer la configuration »

    Un délai de 48h est nécessaire pour la propagation aux autres DNS

    Tutoriel rédiger d'après la vidéo de Cloé Coupris

  • Effet de machine à écrire — 06 06 2021

    Script pour donner à un texte un effet d'un texte qui se tape et se corrige

    recueil effet-de-machine-a-ecrire /recueil/machine-a-ecrire/

    Inspiration

    Lorsque que j'ai parcourus le net en recherche d'inspiration pour la nouvel version de mon site, je suis tomber sur un site avec un effet machine à écrire sur un texte.

    Utilisation

    header ptal9

    À ce moment là encore j'hésite sur l'intitulé de mon poste et je me suis dit que c'était une bonne façon de montrer cette indécision

    Création

    J'ai donc développé un petit script en JavaScript pour reproduire l'effet

    Démo

    Pour simplifier le header et parce-que mon site n'est pas un simple portfolio sur mon métier, j'ai décidé de le supprimer.
    Voici le rendu de ce moment la :

    Pierre Tampon-Lajarriette

    Front-End Designer

  • Intitulé de poste — 06 06 2021

    Quand les intitulés de poste ne veulent plus rien dire

    recueil intitule-de-poste /recueil/intitule-poste/

    Intégrateur Web, Frond-End Développer, Front-End Designer, pourquoi autant d'intitulé ?

    1. Le terme intégrateur existe qu'en France

    2. Quand nos amis du numérique Digital grand amateur d'anglicisme ainsi que des commerciaux et recruteurs cherchant plus un intitulé à la mode qu'autre chose, ils se sont tourné sur l'équivalent anglais «Front-End Developper»

    3. Sauf qu'au même moment, pléthore de techno basée sur du Javascript arrive à la mode. Pas mal de développeurs back se reconvertissent sans pour autant toucher une bille en HTML, CSS, qualité, accessibilité, SEO etc…

    En 2015 déjà Marie Guillaumet et STPo ouvraient le débat dans le métier francophone sur cette dénomination foireuse, suivi en 2017 par Julie Moyat pour cité que ces trois la. De nos jours en parcourant les profils Twitter de nombreux professionnel, c'est la véritable foire à la saucisse de l'intitulé 😅



    Alors du coup je suis quoi ? J'ai longuement hésitez avec tous ce que j'ai pus lire sur le sujet.
    Je vais rester simple :

    Historiquement dans mon boulot cela a toujours été les développeurs et les intégrateurs. Le rôle de chacun et le qui fait quoi est clair. À savoir que lorsque je suis allé en mairie pour ajouter mon enfant sur mon livret de famille, seul une profession en français était accepté, oublié donc ce à base de «Front-End» quelque-chose.



    Voici dans les grandes lignes ce que je fais tous les jours :

    • Transformer et interpréter des maquettes graphiques en code
    • Concevoir et documenter le design system
    • Concevoir des modules éditoriaux souples, mais qui ne sorte pas de la charte
    • Faire attention au respect de la charte et harmoniser ses évolutions
    • Décliner des interfaces
    • Décorréler le SEO de l'aspect graphique
    • Dynamiser des composants pour rendre les développeurs plus autonomes
    • Optimiser les images, les .svg et le code
    • Critiquer un projet, en argumentant et en faisant des propositions d'amélioration
    • Apporte des idées et conseil selon un besoin
    • Faire des recommandations ergonomiques
    • Faire des croquis et schémas pour illustrer une idée, un parcours
    • Penser avant tous aux visiteurs (prospect et client)
    • Bannir les abréviations et les acronymes
    • Faire du responsif (et non seulement pour les résolutions à la mode)
    • Faire des sites accessibles et prêcher la bonne parole
  • Caractères spéciaux sur Safari mobile — 22 05 2021

    Affiché le caractère plutôt que l'icône par défaut sur safari mobile

    recueil caracteres-speciaux-sur-safari-mobile /recueil/caracteres-speciaux-safari-mobile/

    Code

    <ul class="ul-reset">
        <li>↗ default</li>
        <li class="fontptl">↗ fontptl</li>
        <li class="sans-serif">↗ sans-serif</li>
        <li class="system">↗ system-ui,-apple-system,sans-serif</li>
    </ul>

    Rendu de votre navigateur

    • ↗ default
    • ↗ fontptl
    • ↗ sans-serif
    • ↗ system-ui,-apple-system,sans-serif

    Rendu sur Safari mobile

    Rendu sur Safari mobile
  • Obtenir la liste des fichiers d’un dossier sur Windows 10 — 18 05 2021

    Astuce pour lister les fichiers d'une arborescence sur Windows 10

    recueil obtenir-la-liste-des-fichiers-d'un-dossier-sur-windows-10 /recueil/liste-fichier-window-10/
    • Dans l'explorateur de fichier
    • Cliquez dans la barre d’adresses
    • taper cmd puis entrée
    • une fenêtre Invite de commandes s’ouvre
    • dir : affiche la liste des fichiers
    • dir /s >liste.txt : créer un fichier texte avec les infos dedans
  • Conversion d'image automatique avec Eleventy — 02 05 2021

    Test de génération automatique d'image en WebP en Avif

    recueil conversion-d'image-automatique-avec-eleventy /recueil/conversion-image/

    Utilise le plugin Image d'Eleventy

    npm install @11ty/eleventy-img

    Convertis une image

    Pour nommer l'image générée comme sa source j'utilise la function filenameFormat avec path

    Dans eleventy.js

    const path = require("path");
    const Image = require("@11ty/eleventy-img");
    
    (async () => {
        let url = "sources/images/kirby/logo_kirby_super_star_ultra.png";
        let stats = await Image(url, {
            formats: ['avif', 'webp'],
            outputDir: './sources/images/_generated',
            filenameFormat: function (id, src, width, format, options) {
                const extension = path.extname(src);
                const name = path.basename(src, extension);
                return `${name}.${format}`;
            },
        })
        //console.log( stats );
    })();
    
    module.exports = function (eleventyConfig) {
        ...
    };

    Convertis un dossier d'images

    Installer fast-glob npm install fast-glob

    Dans eleventy.js

    const path = require("path");
    const Image = require("@11ty/eleventy-img");
    const fg = require('fast-glob');
    
    async function generateImages() {
        const dossierImages = fg.stream("sources/images/**/*.{jpg,jpeg,png}");
        for await (const entry of dossierImages) {
    
            let dossier = entry.substr(0,entry.lastIndexOf('/'));
    
            let stats = await Image(entry, {
                formats: ['avif', 'webp'],
                outputDir: dossier+'/auto',
                filenameFormat: function (id, src, width, format, options) {
                    const extension = path.extname(src);
                    const name = path.basename(src, extension);
                    return `${name}.${format}`;
                },
            })
        }
    }
    
    module.exports = function (eleventyConfig) {
    
        //génère les images en webp et avif
        generateImages();
        console.log('images généré');
    
    };

    ↳ Pas terrible, ca relace le watch pour chaque image, à désactiver après usage

    Exemple

    <img src="https://www.pierre.tl/images/mosaique/aux-delices-ahmed.jpg" alt="normal">
    <img src="https://www.pierre.tl/images/mosaique/auto/aux-delices-ahmed.webp" alt="webp auto">
    normal webp auto
  • Créer un site statique avec déploiement continu — 21 04 2021

    Tutoriel de base pour la création de sites statiques avec Eleventy et Netlify

    recueil creer-un-site-statique-avec-deploiement-continu /recueil/site-statique/

    À chaque push, le site sera compilé et mis en ligne

    Sommaire

    Git

    Exemple pour GitHub

    Dans le menu Repositories, cliquez sur le bouton New

    Label Saisie Remarque
    Repository name mon-projet un nom simple et court
    add .gitignore Node
    Choose a license GNU General Public License v3.0 Open source et qui doit le rester

    PhpStorm

    Mettre en place l'environement sur l'IDE

    • Menu Git
    • clone
    • url : coller le lien du dépot
    • Directory : Ajouter un dossier du nom du projet avec un antislash \mon-projet
    • Dans le terminal :
      • npm install -y pour installer npm
      • npm install -g @11ty/eleventy pour installer eleventy
      • npx eleventy --serve pour lancer la dev/preview

    Coloration syntaxique de Nunjucks

    • Go to File -> Settings -> Editor -> File Types
    • Find Twig, it's identical template engine but for PHP and add custom extension. click green plus and type *.nunj. Now all *.nunj files are parsed as Twig so in the end - support Nunjucks.

    Eleventy

    Eleventy est un générateur de site statique,
    il fonctionne nativement avec de nombreux moteur de template, comme Nunjucks

    Exclure de Git le site compilé

    Dans le fichier .gitignore, ajouter

    # eleventy
    _site/

    Exclure de la compilation d'Eleventy un dossier/fichier

    Modifier ou ajouter le fichier .eleventyignore à la racine du projet

    dossier/sous-dossier-exclu/
    fichier-exclu.md

    Principal ligne de commande

    Commande Effet
    npx eleventy initialisation
    npx eleventy --serve initialisation + lancement serveur local

    Compiler du SASS

    Merci Dennis Hagemeier et Cassey Lottman

    Installer les dépendances

    Commande nom
    npm install fs-extra fs-extra
    npm install --save-dev sass Sass
    npm install postcss postcss-cssnext PostCss
    npm install postcss-cli autoprefixer Autoprefixer

    Dossier et fichier de base : _sass/style.scss

    Configuration dans 11ty

    Dans .eleventy.js ajouter

    const fs = require("fs-extra");
    const sass = require("sass");
    const postcss = require("postcss");
    const autoprefixer = require("autoprefixer");
    
    module.exports = function (eleventyConfig) {
    
        // compile sass and optimize it https://www.d-hagemeier.com/en/articles/sass-compile-11ty/
        eleventyConfig.on("beforeBuild", () => {
    
            // Compile Sass
            let result = sass.renderSync({
                file: "_sass/style.scss",
                sourceMap: false,
                outputStyle: "compressed",
            });
            console.log("SCSS compiled");
    
            // Optimize and write file with PostCSS
            let css = result.css.toString();
            postcss([autoprefixer])
                .process(css, { from: "style.css", to: "style.css" })
                .then((result) => {
                    fs.outputFile("_site/style.css", result.css, (err) => {
                        if (err) throw err;
                        console.log("CSS optimized");
                    });
                });
        });
    
    
        // trigger a rebuild if sass changes
        eleventyConfig.addWatchTarget("_sass/");
    
    };

    Netlify

    Netlify est une plateforme de déploiement et de collaboration basé sur Git (GitHub, GitLab, Bitbucket)

    • Dans le menu Sites, cliquez sur le bouton New site from git
    • Continuous Deployment : GitHub
    • Autorisé le lien entre les 2 plateformes
    • Choisir le dépot
    • Deploy site

    Renommmer l'url :

    • Deploy settings
    • Change site name
    • mon-projet
    • save
  • Gitpod — 21 04 2021

    Backend du mon site perso avec un éditeur de code en ligne

    recueil gitpod /recueil/gitpod/

    gitpod.io un éditeur de code dans le cloud ou un IDE Online

    C'est une version rafraîchissante des éditeurs de code cloud (ou des IDE, si vous voulez) qui vise à garder votre code toujours testé et à jour. En d'autres termes, il est profondément intégré à GitHub et chaque fois que vous ajoutez du code, il exécute vos tests et vos pipelines CI / CD pour s'assurer que le code est toujours à 100% d'intégrité.
    Vaut le détour si vous aimez l'expérience VSCode et que vous voulez quelque chose qui prend en charge tous les principaux langages et frameworks back-end / front-end (Django, Rails, Revel, vous l'appelez).

    geekflare

    Utilisation

    Pour lancer ce site, il suffit de

    1. Etre connecté à Gitpod via GitHub
    2. Préfixer de gitpod.io/# un répertoire GitHub, exemple : gitpod.io/#https://github.com/pierretl/ptl9
    3. Attendre un peu et c'est bon !



    Il restera plus qu'à aller dans le terminal :

    • npm install -y pour installer npm
    • npm install -g @11ty/eleventy pour installer eleventy
    • npx eleventy --serve pour lancer la dev/preview
  • Titre

    Décrit brièvement le sujet de la section qu'il introduit

    styleguide du site , texte titre /styleguide/titre/

    Nom du site - header

    <p class="ts-xl tg1-1 tw-4 th-09">Nom du site - header</p>

    Niveau 1 - titre page

    <p class="ts-xl tg1-1 tw-4">Niveau 1 - titre page</p>

    Niveau 2

    <p class="ts-l tg1-4 th-2 tw-4">Niveau 2</p>
    {{ macro.h2("Niveau 2") }}
    {{ macro.h2("Niveau 2", "ancre", "16/08/2021") }}
    {{ macro.h2("Niveau 2", "", "16/08/2021") }}

    Niveau 3

    <p class="ts-l mb-s">Niveau 3</p>
    {{ macro.h3("Niveau 3") }}
    {{ macro.h3("Niveau 3", "16/08/2021") }}

    Texte courant

    <p>Texte courant</p>

    Niveau 4

    <p class="ts-s tg1-2 tw-4">Niveau 4</p>
  • Texte

    Décoration et habillage

    styleguide du site , texte texte /styleguide/texte/
    Menu actif
    <span class="tg1-1 td-1">Menu actif</span>
  • Taille

    Définit la taille de fonte utilisée pour le texte

    styleguide du site , texte taille /styleguide/taille/

    Tres grand

    <p class="ts-xl">Tres grand</p>

    Grand

    <p class="ts-l">Grand</p>

    Normal, Strong

    <p>Normal, <strong>Strong</strong></p>

    Petit

    <p class="ts-s">Petit</p>
  • SVG

    Coloration d'un SVG selon le thème clair/sombre sélectionné

    styleguide du site , image svg /styleguide/svg/

    Coloration selon le thème

    <svg width="18px" height="18px" class="fill--mode">
        <use xlink:href="#darkMode"></use>
    </svg>

    Changement de couleur au survol

    <svg width="18px" height="18px" class="fill--mode var--lien">
        <use xlink:href="#darkMode"></use>
    </svg>
  • Scroll-x

    Contraint une série d'éléments est restée côte à côte et provoque l'apparition d'une barre de défilement horizontal

    styleguide du site , bloc scroll-x /styleguide/scroll-x/
    • 1111111111111111111111111111111111111111
    • 2222222222222222222222222222222222222222
    • 3333333333333333333333333333333333333333

    Légende si nécessaire

    <ul class="ul-reset scroll-x mb-xs">
        <li>un</li>
        <li>deux</li>
        <li>trois</li>
    </ul>
    <p class="tg1-2 mb-s">
        <em>Légende si nécessaire</em>
    </p>
    • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad aperiam cum, dolor eius error et explicabo fugiat harum laudantium minima obcaecati ratione reiciendis sint sit vel vitae voluptas voluptates?
    • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad aperiam cum, dolor eius error et explicabo fugiat harum laudantium minima obcaecati ratione reiciendis sint sit vel vitae voluptas voluptates?
    • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad aperiam cum, dolor eius error et explicabo fugiat harum laudantium minima obcaecati ratione reiciendis sint sit vel vitae voluptas voluptates?
    <ul class="ul-reset scroll-x var--90 mb-xs">
        <li>un</li>
        <li>deux</li>
        <li>trois</li>
    </ul>
  • Position

    Positionné un élément qui sort du flux

    styleguide du site position /styleguide/position/
    position relative
    <div class="pr">position relative</div>

    Positionné l'icône centré à droite

    <div class="pr w-50">
        <input type="search" class="search js--rechercheBtn" placeholder="Demo..." />
        <svg class="pa-cr fill--mode" width="24px" height="24px">
            <use xlink:href="#loupe"></use>
        </svg>
    </div>
  • Pagination

    Indique qu'une série de contenus connexes existe sur plusieurs pages.

    styleguide du site , texte pagination /styleguide/pagination/

    Pagination pour la recherche : utilise listjs.com
    Cette recherche impose les classe CSS page, active, disabled et interdit l'utilisation de pagination sinon plus rien ne fonctionne !

    <ul class="ul-reset d-flex ai-c ts-l mr-m__enfant">
        <li>
            <a class="page lien-niveau2" href="#" data-i="1" data-page="3">1</a>
        </li>
        <li class="disabled">
            <a class="page lien-niveau2" href="#">...</a>
        </li>
        <li>
            <a class="page lien-niveau2" href="#" data-i="4" data-page="3">4</a>
        </li>
        <li>
            <a class="page lien-niveau2" href="#" data-i="5" data-page="3">5</a>
        </li>
        <li class="active">
            <a class="page lien-niveau2" href="#" data-i="6" data-page="3">6</a>
        </li>
        <li>
            <a class="page lien-niveau2" href="#" data-i="7" data-page="3">7</a>
        </li>
        <li>
            <a class="page lien-niveau2" href="#" data-i="8" data-page="3">8</a>
        </li>
        <li class="disabled">
            <a class="page lien-niveau2" href="#">...</a>
        </li>
        <li>
            <a class="page lien-niveau2" href="#" data-i="10" data-page="3">10</a>
        </li>
    </ul>
  • Markdown

    Création rapide de page et

    styleguide du site markdown /styleguide/markdown/

    Ajouté la classe CSS markdown à la balise du conteneur

    ou

    Sur la page utilisant le layout-standard.njk ajouté markdown: "true"

  • Marge

    Utilitaires d'espacement pour contrôler la façon dont les éléments et les composants sont espacés et dimensionnés

    styleguide du site , bloc marge /styleguide/marge/

    Espacement standard

    Haut Droite Bas Gauche Haut et Bas
    120px mb-xl
    60px mb-l
    30px pt-m mr-m mb-m
    15px mb-s pl-s py-s
    7px mr-xs mb-xs

    Conteneur header et footer

    header ou footer
    <div class="px-tranche">
        header ou footer
    </div>

    Enfant d'un conteneur

    S'applique aux enfants direct, quelle que soit la balise, sauf au premier enfant

    1
    2
    3
    <div class="d-flex mr-m__enfant">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    1
    2
    3
    <div class="d-flex ml-s__enfant">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
  • Liste

    À puce, sans ordre particulier ou numéroté

    styleguide du site , texte liste /styleguide/liste/

    Liste standard de contenu

    • un
    • deux
    • trois
    <ul>
        <li>un</li>
        <li>deux</li>
        <li>trois</li>
    </ul>

    Liste pour sommaire

    <ul class="ul-sommaire">
        <li class="mb-xs">
            <a href="#" class="lien-niveau2">
                un
            </a>
        </li>
        <li class="mb-xs">
            <a href="#" class="lien-niveau2">
                deux
            </a>
        </li>
        <li class="mb-xs">
            <a href="#" class="lien-niveau2">
                trois
            </a>
        </li>
    </ul>
    {{ macro.sommaire(["Un", "Deux", "Trois"]) }}

    Liste sans style — Reinitialisé

    • un
    • deux
    • trois
    <ul class="ul-reset">
        <li>un</li>
        <li>deux</li>
        <li>trois</li>
    </ul>

    Liste numéroté

    1. un
    2. deux
    3. trois
    <ol>
        <li>un</li>
        <li>deux</li>
        <li>trois</li>
    </ol>
  • Lien

    Lien hypertexte vers des pages web, des fichiers, des adresses e-mail, des emplacements se trouvant dans la même page, ou tout ce qu'une URL peut adresser

    styleguide du site , texte lien /styleguide/lien/

    La lien d'évitement est affiché au focus en absolute en haut à gauche

    <a href="#">Lien primaire</a>
    intermédiaire
    <a href="" rel="external">Lien primaire externe</a>
    <a class="lien-niveau2" href="#">Lien secondaire</a>
    <a class="lien-niveau2" href="" rel="external">Lien secondaire externe</a>
    <ul class="ul-sommaire">
        <li><a class="lien-niveau2" href="#">Sommaire</a></li>
    </ul>
    <a href="#" class="tg1-1 td-0">Lien de couleur "une"</a>
    <a href="#contenu" class="lien-evitement">Lien évitement</a>
    <a href="#" class="tg1-1 tw-7">Menu header niveau 1</a>
    <a href="#" class="tg1-1">Menu header niveau 2</a>
    <a href="#" class="tg1-1 td-0">Menu footer</a>
  • Largeur

    Utilitaire qui fixe une largeur en pourcentage

    styleguide du site , bloc largeur /styleguide/largeur/
    largeur 100%
    <div class="w-100">largeur 100%</div>
    largeur 70%
    <div class="w-70">largeur 70%</div>
    largeur 50%
    <div class="w-50">largeur 50%</div>
    largeur 33.333%
    <div class="w-33">largeur 33.333%</div>
    largeur 30%
    <div class="w-30">largeur 30%</div>
  • Image

    Empêche qu'une image en pixel art soit flout sur des écrans à forte densité de pixel

    styleguide du site image /styleguide/image/

    Empêche que l'image soit flout

    favicon en pixel art
    <img src="" alt="" loading="lazy" class="pa"/>
  • Hauteur de ligne

    Hauteur minimale des lignes au sein de l'élément

    styleguide du site , texte hauteur-de-ligne /styleguide/hauteur-de-ligne/

    Zero neuf
    Zero neuf
    Zero neuf

    <p class="th-09">Zero neuf</p>

    Normal
    Normal
    Normal

    <p>Normal</p>

    Deux
    Deux
    Deux

    <p class="th-2">Deux</p>
  • Grille

    Exemples de mises en page qui utilisent les utilitaires

    styleguide du site , bloc grille /styleguide/grille/

    Medium down : Les colonnes font 100% et sont espacé de $espace-m
    Large : La deuxième colonne est de la taille indiqué moins la taille de la gouttière $espace-m

    Colonne 1
    Colonne 2
    <div class="d-flex">
        <div class="w-">Largeur du contenu</div>
        <div class="w-">Largeur du contenu</div>
    </div>
    Colonne 1
    Colonne 2
    <div class="d-flex">
        <div class="w-50">Colonne 1</div>
        <div class="w-50">Colonne 2</div>
    </div>
    Colonne 1
    Colonne 2
    <div class="d-flex">
        <div class="w-70">Colonne 1</div>
        <div class="w-30">Colonne 2</div>
    </div>
    Colonne 1
    Colonne 2
    Colonne 3
    <div class="d-flex">
        <div class="w-33">Colonne 1</div>
        <div class="w-33">Colonne 2</div>
        <div class="w-33">Colonne 3</div>
    </div>
  • Graisse

    Poids des caractères adaptés selon la couleur

    styleguide du site , texte graisse /styleguide/graisse/
    Défaut, Normal (300)
    <p>Défaut, <span class="tw-3">Normal</span></p>

    Quatre-cents (400)

    <p class="tw-4">Quatre cents</p>
    Sept-cents, strong (700)
    <span class="tw-7">Sept-cents</span>, <strong>strong</strong>

    Couleur quatre : défaut (500)

    <p class="tg1-4">Couleur quatre : défaut (500)</p>

    Couleur quatre : Sept-cents, strong (700)

    <p class="tg1-4"><span class="tw-7">Couleur quatre : Sept-cents</span>, <strong>strong</strong></p>
  • Formulaire

    Mise en forme de checkbox masqué visuellement et input text

    styleguide du site , bloc formulaire /styleguide/formulaire/
    <input type="checkbox" class="hide-checkbox" id="demo"/>
    <label for="demo">Démo</label>
    <input type="text" placeholder="type text"/>
    <div class="pr w-50">
        <input type="search" class="search js--rechercheBtn" placeholder="Demo..." />
        <svg class="pa-cr fill--mode" width="24px" height="24px">
            <use xlink:href="#loupe"></use>
        </svg>
    </div>
    <textarea placeholder="Textarea"></textarea>
    <button class="bouton">Bouton</button>
  • Fond

    Ajoute une couleur de fond clair et des marges à un visuel foncé lorsque le mode sombre est activé, ne fait rien si c'est le mode clair

    styleguide du site , image fond /styleguide/fond/

    Thème sombre : Fond clair + padding
    Thème clair : transparent sans padding

    logo Notiz
    <img src="" alt="" loading="lazy" class="fond-clair"/>
  • Flexbox

    Gérez rapidement l'alignement de composant avec des utilitaires CSS

    styleguide du site , bloc flexbox /styleguide/flexbox/
    Flexbox
    <div class="d-flex">Flexbox</div>
    space-between
    item
    <div class="d-flex jc-sb">
        <div>space-between</div>
        <div>item</div>
    </div>
    space-center
    item
    <div class="d-flex jc-c">
        <div>space-center</div>
        <div>item</div>
    </div>
    align-items:
    center
    item
    <div class="d-flex jc-c" style="border: 1px solid var(--gamme1__texte3);margin-bottom:10px">
        <div>space-center</div>
        <div>item</div>
    </div>
    flex-wrap: wrap;
    item
    <div class="d-flex fw-w">
        <div>flex-wrap: wrap;</div>
        <div>item</div>
    </div>
    flex-direction: column;
    flex-direction: column;
    <div class="d-flex fd-c">
        <div>flex-direction: column;</div>
        <div>flex-direction: column;</div>
    </div>
  • Couleur

    Palette de couleur harmonieuse et accessible

    styleguide du site , texte couleur /styleguide/couleur/
    Une : Texte courant
    <p class="tg1-1">Une : Texte courant</p>
    Deux : Texte secondaire, légende image, date, bloc scroll horizontal
    <p class="tg1-2">Deux : Texte secondaire, légende image, date, bloc scroll horizontal</p>
    Trois : Lien
    <p class="tg1-3">Trois : Lien</p>
    Quatre : Titre de niveau 2, Citation, puce des liste non ordonnée
    <p class="tg1-4">Quatre : Titre de niveau 2, Citation, puce des liste non ordonnée</p>
  • Citation

    Citer des blocs de contenu d'une autre source

    styleguide du site , texte citation /styleguide/citation/

    Accusamus commodi cumque ea excepturi expedita facilis, quisquam sed soluta voluptas voluptatum!

    Lorem ipsum
    <blockquote>
        <p>Accusamus commodi cumque ea excepturi expedita facilis ...</p>
        <cite>Lorem ipsum</cite>
    </blockquote>
  • Bordure

    Styliser rapidement des bordure et séparation de contenu

    styleguide du site , décoration bordure /styleguide/bordure/
    Haut
    <div class="bordure-h"></div>
    Bas
    <div class="bordure-b"></div>
    Gauche
    <div class="bordure-l"></div>
    Bordure
    <div class="bordure"></div>
  • Bloc

    Utilitaire pour basculé un élément «inline» en type «block»

    styleguide du site bloc /styleguide/bloc/
    span en mode block
    <span class="d-block">span en mode</span> block
  • Alignement

    Arrangement des textes

    styleguide du site , texte alignement /styleguide/alignement/

    A gauche par défaut

    <p>A gauche par défaut</p>

    texte centré

    <p class="text-center">texte centré</p>
  • Affichage

    Utilitaire pour masquer un élément et/ou le masqué visuellement mais le laisser accessible aux technologies d'assistance telles que les lecteurs d'écran

    styleguide du site , bloc affichage /styleguide/affichage/
    Caché
    <div class="hide">Caché</div>
    Texte pour les screen reader uniquement
    <div class="sr-only">Texte pour les screen reader uniquement</div>
  • T-shirt Metalfest — 01 11 2020

    Un T-shirt humoristique qui imite celui d'un festival de Metal

    realisations t-shirt-metalfest /realisations/metalfest/

    Critique

    T-shirt Metal Fest
    T-shirt "Metal Fest" sur qwertee

    J'adore le concept de reprendre le code vestimentaire des t-shirts de concert Metal et de le détourner en une sorte de tableau périodique des métaux de transition, mais :

    • Les logotypes ne reprennent pas le style torturé habituel
    • La date en bas du t-shirt correspond a priori à rien
    • La face avant du t-shirt est entièrement noire, sans illustration ni reprise du logo

    Inspiration

    logo Hellfest
    Logo du Hellfest, festival français de Metal
    Patchwork de logo
    Logos de groupes de Metal

    Re-design

    Détournement du logo du festival Hellfest en Metalfest suivi d'une illustration de planète, crâne humain et papillon museleur
    Détournement du logo du Hellfest suivi d'une illustration qui reprend différents thèmes de la culture Metal
    Juxtaposition de nom de métaux avec des polices d'écriture torturé, typique de la culture Metal
    Nom de métaux avec des polices d'écriture torturé, la date est celle de la révision de la table périodique des éléments par l’IUPAC

    Mise en situation

    t-shirt de face
    t-shirt de dos
  • T-shirt Kirby — 01 11 2020

    T-shirt avec un le visage de Kirby en très gros plan

    realisations t-shirt-kirby /realisations/kirby/

    Référence

    Kirby est un personnage de jeu vidéo, créé par Masahiro Sakurai pour la firme Nintendo

    Kirby
    Logo du jeu vidéo "Kirby Super Star Ultra"

    Mise en situation

    T-shirt rose kirby
    Les yeux, la bouche et les pommettes caractérisant Kirby
  • Site perso — 03 05 2020

    Évolution de mon site personnel de 2007 à nos jours

    realisations site-perso /realisations/site-perso/

    Au milieu de ma formation supérieure,
    j’ai commencé à créer un site personnel pour rassembler mes créations et projets.
    Cette version est la 9ème

    Sommaire

    Évolution du logotype

    • 2007
    • 2009
    • 2012
    • 2013
    • 2015
    • 2020
    • 2021

    Version du logo par année

    Au début, un cube à deux faces pour exprimer ma double facette de codeur/designer
    Sur les versions suivantes, le cube est toujours présent mais seulement suggéré par un empilement de calque transparent. Chaque couleur symbolise une catégorie. Les trois principaux, rouge, vert, bleu sont une double référence. Au système de codage des couleurs en informatique mais aussi à icône des logiciels de la suite Adobe :

    • Rouge : Animation (Flash)
    • Verte : Site web (Dreamweaver)
    • Bleu : Graphisme (Photoshop)

    À partir de la version de 2009, la couleur intermédiaire, cyan, représente la catégorie «jeu», puis dans la version 2012, la couleur «orange» pour le «laboratoire» et le blanc qui est l'ensemble des couleurs, me représente. Mon prénom et mes initiales accompagnant le logo dans cette version sont blancs tandis que le reste du texte est en gris. Cette version ajoutera aussi un contour pour mieux faire ressortir le logo

    La version de 2013 adoucira les couleurs. En 2015, je trouverais un juste milieu entre les couleurs flashy du début et la version pâle. Depuis 2020, le logo proposera un contour moins régulier, fait main, pour symboliser l'artisanat

    Depuis 2021, un resign total, basé sur l'avatar que j'utilise actuellement partout :

    Précédent avatar
    Re-design
    Monochrome

    Page d'accueil par année

    • 2007
    • 2008
    • 2009
    • 2010
    • 2012
    • 2013
    • 2015
    • 2020
    • 2021

    Page d'accueil par année

    Version 1 — 26 septembre 2007

    Fonctionnalité

    • Liste de liens sous forme d'image
    • Apparition des informations au survol des cadres
    • Compteur de visiteur total
    • Compteur de visiteur en ligne
    • Flux RSS
    • Livre d'or

    Design

    • Les cadres des images sont des iPhone 2G (1re génération)
    • Au survol, l'image change pour laisser la place à une autre identique avec une porte si le site était disponible ou avec des rubans de chantier pour les sites en construction, maintenance etc...
    • L'illustration de chantier clignote

    Version 2 — 26 août 2008

    Fonctionnalité

    • Dernières actualités du flux RSS en début de page
    • Langages utiliser pour chaque projet
    • 3 Type d'affichage : Liste (voir capture), Mosaïque (comme la version 1) et coverflow
    • Page «lien», liste des projets sous forme de lien sans aucune information

    Version 3 — 26 avril 2009

    Fonctionnalité

    • Développement d'un backend en PHP
    • Éditeur de texte : CKEditor
    • «Menu rapide : liste des projets sous forme de lien sans aucune information pour les 4 rubriques
    • Page contact
    • Découpage en catégories («animation», «graphisme», «jeu», «perso» et «collection»)

    Design

    • Nouveau logo
    • Utilisations d'un fond sombre plus nuancé
    • Visuel : site en perpétuelle évolution
    • Chaque catégorie est associée à une couleur, qui était repris sur l’ensemble de la page

    Version 4 — 26 décembre 2010

    Fonctionnalité

    • Refonte base de données
    • Refonte du backend : simplification et automatisation
    • Scroll bar vertical personnalisé qui s'adapte à la taille du navigateur de l'utilisateur
    • Script qui génère automatiquement la liste de lien des «Menu rapide» en fonction de leur arborescence
    • Le «Menu rapide Graphisme» affiche des images plutôt que les noms des fichiers
    • Galerie d'image avec Fancybox

    Design

    • Association d'une couleur pour chaque catégorie (normal et «Menu rapide»)
    • Au survol des «Menu rapide» les petits visuels s'animent
    • L'interface change de couleur dominante en fonction de la couleur correspondant à la catégorie

    Version 5 — 26 décembre 2012

    Fonctionnalité

    • Simplification de la structure de la base de données
    • Refonte du backoffice : amélioration des performances
    • Optimisation SEO
    • Site s’adaptant jusqu’au résolution 800*600px
    • Les liens visités des «Menu rapide» sont grisés
    • Ajout de mon fil Twitter

    Design

    • les visuels de la page d'accueil sont en nuance de gris, ils s'affichent en couleur au survol
    • «Menu rapide» réduit a leur visuel

    Version 6 — 28 avril 2013

    Fonctionnalité

    • Passage sous un hébergeur mutualisé
    • Achat des nom de domaine pierre.tl
    • Site responsive
    • Support du site jusqu'à Internet explorer 7
    • Ajout des projet en WIP (en cours) + pourcentage d'avancement
    • Ajout de Tags
    • Refonte backoffice
    • Système de gestion de fichier : elFinder
    • Éditeur de texte : markitUp
    • URL rewriting

    Design

    • Adoucissement des couleurs
    • Refonte de ergonomie du backend
    • «Menu rapide» caché, s'affiche au survol de l’accroche « Site en perpétuelle évolution »

    Version 7 — 2 août 2015

    Fonctionnalité

    • Backoffice : Wordpress
    • Création d'un thème personnalisé
    • Galerie d’images avec affichage d’une légende si elle existe lors du zoom
    • Javascript natif :
      • Accordéon
      • Galerie d’image
    • Site responsive

    Design

    • Thème clair
    • Création d’une palette de couleur harmonieuse
    • «Menu rapide» caché, s'affiche au survol de l’accroche « Site en perpétuelle évolution »
    • Répartition des projets sous trois thèmes interconnectés
      • Code : intégration et développement
      • Design : montage, retouche, graphisme
      • Dossier : Grand projet qui peuvent regrouper plusieurs projets ou les deux thèmes précédents

    Version 8 — 7 mai 2020

    Fonctionnalité

    • Backoffice : Wordpress
    • Création d'un thème personnalisé
    • Un seul plugin utilisé : ACF, pour personnalisé le backend
    • Ajout de fonctionnalité au backend avec le plugin ACF
    • Grille Mansory en Full CSS
    • Suppression des accès rapide
    • Script JavaScript natif de contrôle de saisi pour le formulaire de contact
    • Galerie d’image en full HTML/CSS style lightbox

    Design

    • Logo svg responsive
    • Thème sombre pour mettre en valeur le contenu
    • Palette de couleur harmonieuse et accessiblle
    • Mosaïque style grid Mansory

    Version 9 — 21 juin 2021

    Fonctionnalité

    • Site statique avec Eleventy
    • Styleguide qui suit le code
    • Déploiement automatique avec Netlify
    • Formulaire de contact HTML avec Netlify et notification avec Zapier
    • Code open source du GitHub
    • Rédaction d'un journal de bord pour sa réalisation
    • Mosaïque avec image responsive
    • Image lazy loading
    • Pas de backoffice : Gitpod fait l'affaire !
    • Coloration syntaxique des exemple de script avec Prims

    Design

  • Norber’s Meat — 07 03 2019

    Ajustement du logo de l'équipe e-sport Norber's Meat et déclinaison du logo pour réaliser les icônes du groupe des logiciels de communication Whats App et Discord

    realisations norber's-meat /realisations/norbers-meat/

    C'est une équipe d'e-sport de la communauté Reborn Spartan.
    « Norber » est un anagramme de Reborn.
    Un de leurs membres avait réalisé le logo, je n’ai eu qu’à le rendre plus lisible et harmonieux

    Logo

    Logo Norber’s Meat

    Icône de groupe

    Avatar Norber’s Meat
    Déclinaison du logo pour les icônes de groupe d'applications de communication
  • Team CuyZ — 26 10 2018

    Réalisations de logo et icônes pour la Team de développer CuyZ

    realisations team-cuyz /realisations/cuyz/

    C'est une équipe de développer, dépot sur GitHub

    Logo de la Team

    Le logo doir représenter un hamster,
    Il faut que le bas de sa tête soit le chiffre "3" couché

    Fondateur de la Team CuyZ
    logo CuiZ

    Projet Notiz

    NotiZ est une extension du système de gestion de contenu TYPO3

    Logo

    Le logo doit représenter un symbole de notification, de rappel.
    Le logo du CMS doit y être représenté

    Team CuyZ
    logo Notiz

    Icônes pour le backend du CMS

    Nous avons besoin également d’un visuel pour le menu de configuration globals dans le backend du CMS

    Team CuyZ
    Icone Notiz

    Ainsi que de différencier les notifications de mail et de log

    Team CuyZ
    Icone de notification de mail
    Icone de notification de log
  • Radiophonix — 06 02 2018

    Réalisation de la charte graphique, du logo, d'une bâche publicitaire, de carte de visite et intégration du site web pour Radiophonix

    realisations radiophonix /realisations/radiophonix/

    Radiophonix est un projet collaboratif de plateforme libre et gratuite de partage et d’écoute d'histoire audio, aussi connu sous le nom de "sagas MP3"

    J’ai rejoins Nathan, le papa et développeur du projet.
    Il ma laisser carte blanche sur le logo, le design et l'intégration

    En 2019, nous étions invités à tenir un stand lors de la convention du MP3@paris.
    Pour cette occasion, j'ai créé une carte de visite et une bâche publicitaire

    Logo — 10/12/2016

    Logo Radiophonix
    Logo en deux couleurs pour faciliter sa lecture

    La partie haute du X de Radiophonix suggère un livre ouvert avec des ondes sonores en émanant

    Carte de visite — 16/04/2019

    Face de la carte de visite
    Recto
    Dos de la carte de visite
    Verso
    Photo de la carte de visite
    Mise en situation
    Photo de la carte de visite avec la tranche visible
    Tranche orange rappelant nos couleurs

    Les cartes de visite finales sont épaisses avec un liseré orange qui rappelle les couleurs du logo et du site

    Bâche publicitaire — 04/06/2019

    Logo et slogan superposé à une photo de radio rétro

    Nous avions prévu d’imprimer une bâche, mais faute de temps nous avons fait une impression classique en A3

    Webdesign — Capture d'écran le 08/05/2020

    Page d'accueil avec le lecteur audio non utilisé
    Page "écouter" qui liste les sagas, auteurs, équipe et genres
    Page de la saga Adoprixtoxis avec le lecteur audio non utilisé
    Page de la saga Adoprixtoxis avec un épisode en lecture
    Page de recherche avec un épisode en lecture
    Page "écouter" en mobile avec lecteur rétracté
    Menu mobile déployait avec lecteur rétracté
    Lecteur déployait en mobile
  • Aux délices d’Ahmed — 09 12 2017

    Enseigne pour chariot ambulant retro-éclairé pour ESAT Atelier 133

    realisations aux-delices-d'ahmed /realisations/aux-delices-dahmed/
    Le texte 'Aux délices d’Ahmed' entour des petits visuels de boisson et de douceur sucré
    Croquis du client

    Nous souhaitons une devanture pour un chariot ambulant
    Le texte « Aux délices d’Ahmed » doit être présent ainsi que des visuels de crêpes, gaufres, chocolat chaud, glaces, boissons

    ESAT, Atelier 133

    Propositions — 9 décembre 2017

    Première proposition
    Deuxième proposition

    Mise en situation

    Mise en situation de jour
    Photo envoyé par le client
    Mise en situation de nuit
    Rendu de nuit
  • FormZ — 01 11 2017

    Création d'un logo pour l'extension FormZ. Fusion des deux lettres majuscule légèrement déformer pour évoquer le logo du CMS TYPO3

    realisations formz /realisations/formz/

    FormZ est une extension du système de gestion de contenu TYPO3

    Logo FormZ
    Fusion et déformation des lettres F et Z pour évoquer la forme du logo du CMS : Logo TYPO3

    Carte blanche pour le design, par contre le logo doit être unicolore et il doit être lisible en tout petit format car il sera utilisé en icon dans le backend du CMS

    Romain, développeur de l'extension
  • Pixel art — 28 05 2017

    Galerie de réalisation en pixel art

    realisations pixel-art /realisations/pixel-art/

    Le pixel art, aussi appelé art du pixel ou art des pixels au Québec, désigne une composition numérique qui utilise une définition d'écran basse et un nombre de couleurs limité

    Wikipedia

    Sommaire

    Favicon

    C'est une icône informatique symbolisant un site web. Les navigateurs web peuvent utiliser la favicon dans la barre d'adresse, les signets, les onglets ou encore les autres raccourcis

    La mascotte de l'équipe, une tête d'âne

    Team FuN

    28 mai 2017

    La tête de Malec

    Blog de Malec

    2 août 2014

    Un crâne

    The Pirate Family

    14 juillet 2012

    Une capsule de bière

    Les Trublions

    3 septembre 2012

    Autres réalisations pour eux

    La tête du renard à l'humour politiquement incorrect

    Piratesourcil

    25 septembre 2011

    Le R de Retro pixel

    Retro Pixel - 4 couleurs

    18 août 2010

    Autres réalisations pour eux

    Château japonnais

    Mangthèque

    23 janvier 2009

    Vignette Concours

    Un personnage qui hurle 'musique'

    Fête de la musique

    juin 2013

    Un couple à leur mariage

    Aidez Cancre !

    février 2013

    Une typographie faisant référence à celle du film Retour vers le futur

    Back to the past

    février 2012

    Un pixel bleu avec un bonnet de noël

    Merry Christmas

    décembre 2012

    Des traces dans la neige en forme de 'RP'

    Il fait pas chaud dehors !

    décembre 2011

    Concours Retropixel

    Régulière retropixel.fr organise un concours pixel art.
    Voici mes participation, les contraintes lié au concours et mes récompense lorsque j’en est obtenu.

    Concours #45 : Robots Factory — 22 Mai 2013

    usine de création de robot animé

    Contraintes

    • Dessiner la chaîne de production d’un robot
    • 32 couleurs maximum (J’en est utilisé 16)
    • Animation autorisées
    • Taille de la création : 700*60px

    Récompense

    Médaille d'or  Or

    Concours #44 : Bi-Animals — 14 Avril 2013

    un crocureuil, un mélange d'un crocodile et d'un écureuil

    Contraintes

    • Melanger 2 animaux de façon à en obtenir un nouveau
    • 20 couleurs maximum
    • Animation autorisées, pas de transparence
    • Taille de la création : 128*128px

    Récompense

    Pas pour cette fois !

    Concours #41 : Infiltrated — 22 Octobre 2012

    jeu d'infiltration de ninja

    Contraintes

    • Realiser un mock up de jeu d’infiltration
    • 16 couleurs maximum
    • Animation autorisées, pas de transparence
    • Taille de la création : 240*160px

    Récompense

    Médaille de bronze  Bronze

    Concours #39 : Mélange de thèmes — 17 Juillet 2012

    Forée de données

    Contraintes

    • Mélanger 2 thèmes parmi : Forêt, Espace, Océan, Electricité, Musique
    • 20 couleurs maximum (J’en est utilisé 13)
    • Animation autorisées
    • Taille de la création : 256*96px

    Récompense

    Pas pour cette fois !

    Concours #38 : RP Building — 2 Juillet 2012

    Immeuble Tortankosaure

    Contraintes

    • Imaginer un bâtiment pour Retropixel en Isométrie et de nuit
    • Pas de limite de couleurs
    • Animation autorisées
    • Taille de la création : 300*250px

    Récompense

    Médaille d'argent  Argent

    Concours #35 : Back to the past — 14 Avril 2012

    Space Shooter Mockup

    Contraintes

    • Dessiner un mock up de Space Shooter
    • Palette imposé de 27 couleurs :
      palette couleur de AmstradCPC
    • Animation autorisées
    • Taille de la création : 240*320px

    Work In Progress animé :

    realisation étape par étape

    Récompense

    Médaille d'or  Or

    Concours #34 : Il fait pas chaud dehors ! — 2 février 2012

    chamallow en forme de 'rp' dans les flammes

    Contraintes

    • Bannière pour Retropixel avec le thème suivant : « L’hiver est dur cette année, venez vous réchauffez dans la communauté du pixel. »
    • 5 couleurs maximum
    • Animation autorisées
    • Taille de la création : 88*31px

    Récompense

    Médaille d'or  Or

    Concours #32 : Mercredi, c’est… — 22 Juillet 2012

    Bagarre insolite

    Contraintes

    Série de mini concours d’un duré de 1 semaine au lieu d’un mois généralement.
    Le but est de dessiner un avatar (64*64 px) qui représente ce que dit une phrase imposé.

    • « Un squelette émotionné se bat avec Frankenstein dans un bar »
    • Palette de 10 couleurs imposées :
      palette de couleur verte
    • Animation autorisées
    • Taille de la création : 64*64px

    Récompense

    Médaille de bronze  Bronze

    Concours #32 : Mercredi, c’est… — 15 Juillet 2012

    Un poisson joue avec une imprimante

    Contraintes

    Série de mini concours d’un duré de 1 semaine au lieu d’un mois généralement.
    Le but est de dessiner un avatar (64*64 px) qui représente ce que dit une phrase imposé.

    • « Un poisson débile joue avec une imprimante dans une source d’eau chaude »
    • Palette de 10 couleurs imposées :
      palette de couleur bleu
    • Animation autorisées
    • Taille de la création : 64*64px

    Récompense

    Médaille de bronze  Bronze

    Concours #30 : Bannière Steampunk — 5 Juin 2011

    retropixel déssiné avec des objets de style Steampunk

    Contraintes

    • Le logo doit être aux allures Steampunk
    • 30 couleurs maximum
    • Pas de transparence
    • Taille de la création :370*65px

    Work In Progress animé :

    Réalisation étape par étape

    Récompense

    Médaille de bronze  Bronze

    Concours #29 : Léonard est un génie — 24 Mars 2011

    Tondeuse à gaz à pédale

    Contraintes

    • Dessiner une machine en vous inspirant de croquis imposé de Léonard De Vinci
    • 16 couleurs maximum
    • Transparence et animation autorisé
    • Taille de la création :96*96px

    Récompense

    Médaille de bronze  Bronze

    Concours #27 : Bonnet de Noël — 23 Décembre 2010

    Avatar pour noel

    Contraintes

    • Intégrer le bonnet imposé dans un avatar spécial noel
    • 16 couleurs maximum
    • Transparence et animation autorisé
    • Taille de la création :64*64px

    Récompense

    Médaille de bronze  Bronze

    Concours #22 : Voyage Pixelo-temporel — 15 Février 2010

    Une facade en isométrie d'un chateu, d'un immeuble, et d'une structure du futur

    Contraintes

    • Réaliser trois scènes, d’un même lieu, à trois périodes strictement différentes en utilisant le template imposé
      template fournis
    • 16 couleurs maximum
    • Pas de transparence ni d’animation autorisé
    • Taille de la création :125*70px

    Récompense

    Médaille de bronze  Bronze

    Concours #21 : Pixel Kit — 17 Septembre 2009

    Mokup kit de survie

    Contraintes

    • Créer un kit, un inventaire, une collection pour une collection réelle ou fictive
    • Pas de limite de couleurs
    • Transparence et animation autorisé
    • Taille de la création :200*250px

    Récompense

    Médaille de bronze  Bronze

    Concours #20 : À l’abandon… — 14 Aout 2009

    Chemin de fer

    Contraintes

    • Réaliser une scènes d'un lieu abandonnée
    • 16 couleurs maximum
    • Pas de transparence ni d’animation autorisé
    • Taille de la création :217*100px

    Récompense

    Médaille de bronze  Bronze

    Concours #19 : L’Envolée Pixellisée — 5 Juillet 2009

    Décolage d'une fusée

    Contraintes

    • Créer une illustration sur le thème de l’envol et en intégrant cette forme
      template fournis
    • Pas de limite de couleurs
    • Pas de transparence ni d’animation autorisé
    • Taille de la création :200*250px

    Récompense

    Pas pour cette fois !

    Concours #17 : Pixellise-moi une Histoire ! — 3 Avril 2009

    Manga dragon ball

    Contraintes

    • Créer une bande dessiné
    • 10 couleurs maximum
    • Pas de transparence ni d’animation autorisé
    • Taille de la création :200*250px

    Récompense

    Médaille de bronze  Bronze

    Faire part de mon mariage

    Touts un tas de personnage de films et dessin animés en train de s'installaient dans des fauteuils rouge

    Pixel en Vrac

  • Poweo, page de maintenance — 07 05 2015

    Réalisation d'une page de maintenance avec un ester egg

    realisations poweo-page-de-maintenance /realisations/poweo/

    Vous avez carte blanche pour réaliser la page de maintenance du site du jour de son lancement :
    Un texte en français et en néerlandais vous est imposé, ansi que l'affichage du logo.
    Tout doit être compris dans un unique fichier html, pas d'appel vers des styles, image ou polices externe

    poweo.be
    Page de maintenance
    • Animation en CSS : défilement de la silhouette urbaine
    • Image en base64
    • Page responsive
    • Multilangue
    • Konami code, sur mobile ;
      Les flèches sont remplacées vers des «Drag»
      Le «B», «A» par deux «Tap»
    Page de maintenance version mobile

    Page de démonstration : Poweo - page maintenance

  • Retropixel — 13 02 2014

    Ajout de fonctionnalité, redesign, intégration ainsi que de multiples contributions graphiques à la vie du site web et du forum de RP

    realisations retropixel /realisations/retropixel/

    Retropixel est une grande communauté francophone entièrement dédiée au Pixel-Art.

    Je les ai rejoint en 2009 par curiosité et je suis rapidement devenus modérateur puis administrateur
    J'ai réalisé de multiples fonctionnalités et visuels

    Le site a fermé ses portes en 2021

    Sommaire

    Refonte graphique — 13 février 2014

    Refonte du design dans sa globalité (design et intégration de maquette en HTML/CSS)

    Capture page accueil
    Page d’accueil
    Capture page galerie
    Galerie intéractive avec un pixel selectionné

    Modernisation du logo du forum RetroPixel

    La version final qui est un mélange des deux logotypes précédent :

    Zoom automatique — 3 juillet 2014

    Développement et intégration d’une nouvelle fonctionnalité en JavaScript :

    Au survol des images posté dans le forum des boutons apparait pour agrandir l’image tout en conservant la netteté des pixels

    Des barres de défilement apparaissent si l'image devient plus grande que son conteneur

    outils de zoom

    Vignette Concours — 2011 à 2013

    Vignette d’illustration pour les concours

    Un personnage qui hurle 'musique'

    Fête de la musique

    juin 2013

    Un couple à leur mariage

    Aidez Cancre !

    février 2013

    Une typographie faisant référence à celle du film Retour vers le futur

    Back to the past

    février 2012

    Un pixel bleu avec un bonnet de noël

    Merry Christmas

    décembre 2012

    Des traces dans la neige en forme de 'RP'

    Il fait pas chaud dehors !

    décembre 2011

    Rédaction à faire

  • Kinematik — 24 01 2014

    Logo et site web pour Kinematik, une équipe spécialiser dans la réalisation de vidéo de mariage

    realisations kinematik /realisations/kinematik/

    Kinematik, c’est une équipe de deux personnes spécialiser dans la réalisation de vidéo de mariage

    Nous avons besoin d’un site vitrine en une seule page qui nous présente ainsi que nos formules.
    La page d’accueil doit contenir le visuel fournis.
    Le logo et la charte du site doit également partir de ce visuel

    Kinematik.fr
    Visuel client

    Sommaire

    Site web — 30 mars 2014

    Logo Kinematik

    Favicon — 24 janvier 2014

    Favicon Kinematik
  • Multigames Team Collectif — 12 10 2013

    Développement de fonctionnalité, multiple re-design du site pour l'équipe multi-gaming MTC

    realisations multigames-team-collectif /realisations/multigames-team-collectif/

    Sommaire

    Thème Selva — 12 octobre 2013

    Thème Selva
    Thème Nuked Klan
    • L’image de l’en-tête est un slider paramétrable dans les préférences
    • Le fond rouge/vert/jaune dans les encadrés des serveurs de jeu corresponde au nombre de slot disponible :
      • 0 à 5 -> rouge
      • 6 à 10 -> jaune
      • 10 et + -> vert

    T-shirt — 1 octobre 2010

    T-shirt MTC
    T-shirt Multigames Team Collectif
    Motif face du T-shirt
    Face
    Motif dos du T-shirt
    Dos

    Ajustement du thème — 16 septembre 2010

    Page accueil

    Accueil

    • Modification des images qui encadrent le contenu
    • Réajustements divers
    Page liste des serveurs

    Liste des serveurs

    Ajout d’un système d’affichage par accordéon pour la rubrique Serveur pour améliorer la lisibilité, ici c’est la catégorie « Trakckmania » qui est déployer

    Page groupe

    Page groupe

    Ajout d’un classement par onglets des groupes de la Team

    Page localisation des joueurs

    Localisation des joueurs

    Ajout d’une nouvelle rubrique au menu général, la MTC Maps :
    Elle consiste à utiliser l’API de google map et afficher sur cette dernière la localisation des membres selon ce qu’ils ont paramétré dans le profil.
    Pour chaque membre affiché, diverses informations sont récupérées dans la base de données comme leur pseudo, leur avatar, les jeux qu’il pratique et leur statut.

    Favicon — 25 octobre 2009

    Favicon
    Création d’un favicon personnalisé

    Refonte du design — 25 octobre 2009

    Design d'origine
    Avant
    Après refonte
    Après refonte
    • Création du web-design
    • Intégration sous forme d’un thème Nuked Klan
    • Ajout d’icône au menu
    • Favicon personnalisé
    • Réorganisation des informations
    • Refonte de l’ergonomie
    • Création de la charte graphique
    • Personnalisation d’une série de smiley avec de petite casquette « MTC »
    • Bannière créer par Baya
    • Mascottes réalisé par Yoan Ernoult
  • Faire part de mon mariage — 24 03 2013

    Première de couverture pour mon faire-part de mariage, réalisé en pixel art

    realisations faire-part-de-mon-mariage /realisations/faire-part-de-mon-mariage/

    Illustration

    Touts un tas de personnage de films et dessin animés en train de s'installaient dans des fauteuils rouge

    Imprimer

    Faire part imprimer
  • Les Trublions — 03 09 2012

    Bannière de promotion pour les chroniques des Trublions

    realisations les-trublions /realisations/les-trublions/

    Les Trublions sont un regroupement de passionner de musique Metal qui a pour objectif de nous compter l’origine et l’essence des bien trop nombreux style mais aussi de faire des chroniques d’album, des interviews, des lives reports et j’en passe.

    Initialement, j’étais un de leurs fervents lecteurs, puis pour égailler les liens de promotion vers leur blog, je leur ai réalisé une bannière avec leur logo et leur baseline

    Et des favicons déclinait de leur logo

    Bien vite, j’ai intégré l’équipe pour illustrer sous forme de bannière leur article. En ce temps là, j’hébergeais les images et je leur fournissais un script qu’il avait simplement à copier coller dans leurs signatures

    Au début, je déclinais la bannière pour finir par conserver uniquement le logo

    • Bannière de la chronique Black Metal
      Black Metal
    • Bannière de la chronique Trash Metal
      Trash Metal
    • Bannière de la chronique Metal Symphonique
      Metal Symphonique
    • Bannière de la chronique Metal Symphonique - alternative
      Alternative Metal Symphonique
    • Bannière de la chronique Metal Gothique
      Metal Gothique
    • Bannière de la chronique Metal Gothique - alternative
      Alternative Metal Gothique
    • Bannière de la chronique Metal Gothique - alternative deux
      Alternative deux Metal Gothique
    • Bannière de la chronique Dark Ambiant
      Dark Ambiant
    • Bannière de la chronique Dark Ambiant - alternative
      Alternative Dark Ambiant
    • Bannière de la chronique Fusion & Death Metal Grec
      Fusion & Death Metal Grec
    • Bannière de la chronique Fusion & Death Metal Grec - alternative
      Fusion & Death Metal Grec
    • Heavy Metal
    • Bannière de la chronique Heavy Metal
      Alternative Heavy Metal
    • Bannière de la chronique Heavy Metal - alternative deux
      Alternative deux Heavy Metal
    • Bannière de la chronique Heavy Metal - alternative
      Alternative Heavy Metal
    • Bannière de la chronique Funeral Doom
      Funeral Doom
    • Bannière de la chronique Funeral Doom - alternative
      Alternative Funeral Doom
  • Wolfenstein : Enemy Territory — 21 07 2011

    Webdesign et intégration du site

    realisations wolfenstein-:-enemy-territory /realisations/wolfenstein-enemy-territory/

    Favicon

    Logo du jeu

    Description

    Le site et son design originel se voulant minimaliste en ne proposant que le strict nécessaire pour commencer, j’ai conservé le concept d’onglet en 3 étape en le modernisant un peu

    • Intégration et ajout de script jQuery pour améliorer l’interaction du site avec ses utilisateurs
    • Création d’un formulaire en ligne à la place de la diffusion d’une adresse mail
    • Création d’un script photoshop pour simplifier le traitement des images
    • Fichier zippé de touts les fichiers/images nécessaire fournis avec une explication détaillé sur l’utilisation du systeme de grille et de l’utilisation des effets d’animation désactivable

    Webdesign — Capture d'écran le 21 juillet 2011

    page d'accueil
    Accueil
    page patcher
    Patcher