Table Des Matières
CodePen – Présentation
CodePen, fondé en 2012 par les développeurs Alex Vazquez, Tim Sabat et Le designer de pointe Chris Coyier, est une communauté en ligne pour tester et présenter les extraits de code HTML, CSS et JavaScript créés par l’utilisateur. Il fonctionne comme un éditeur de code en ligne et un environnement d’apprentissage open source, où les développeurs peuvent créer des extraits de code —créativement nommés “Pens”— et les tester. CodePen est l’une des plus grandes communautés pour les concepteurs et les développeurs Web de montrer leurs compétences de codage, avec environ 330 000 utilisateurs enregistrés et 16,9 millions de visiteurs mensuels.
Dans cet article je vais m’occuper de la partie de la création des démo et comment les enregistrer et les insérer dans les articles de vos sites/blog au lieu des captures d’écran sans interaction, qui donnent une mauvaises impression sur votre contenu. C’est un tuto pour les débutants qui suit tout le processus —étape par étape depuis l’inscription au site jusqu’à l’insertion dans l’article — avec des illustrations pour faciliter la compréhension et la pratique à nos cher lecteurs; Ok alors , allons-y!
Exemple de démo unresponsive —même si vous cliquez sur les lettres rien ne se passe, ce qui n’incite pas à la réaction et donc sans valeur pour le visiteur qui veut essayer et voir comment cela fonctionne en direct!See the Pen Exemple de Demo by Med Mus (@MedMus) on CodePen.
Ci dessus, Un exemple de démo responsive qui incite à l’interaction —quand le visiteur répond à l’appel en action dans le démo et clique sur les lettres, il voit bien que ça répond aussi et que les lettres bougent , ce qui donne une bonne impression de ce visiteur sur votre démo et sur votre contenu en général 🙂
Comment Créer Des Démos Interactives Pour Vos Articles?
Inscription
Avant tout vous devez créer un compte et pour le faire allez sur CodePen et inscrivez vous:
Remplissez le formulaire d’inscription comme sur l’image au dessous:
Le formulaire dans limage suivante est optionnel, donc si vous ne voulez pas completez votre profile juste cliquez sur le bouton “Save & Continu” comme indiqué sur l’image ci dessous:
Si vous voyez cette fenêtre pop up comme dans l’image suivante, qui vous invite à faire un tour à travers les fonctionnalités de CodePen, juste ignorez là en cliquant comme sur l’image:
Créer Votre Premier Démo (Pen)
fermez la fenêtre qui s’affiche après et aller sur la page d’acceuille du site vous allez être rediriger sur la page que vous voyez sur l’image suivante:
Vous aurez cette page (image ci dessous)
Maintenant vous pouvez copiez votre code HTML, CSS ou Javascript et le coller dans l’area spécifique comme dans l’exemple ci dessous. Enregistrer votre démo et cliquez sur le bouton Embed:
Vous allez voir une fenêtre où vous pouvez choisir l’onglet à afficher par défaut sur vos postes, redimensionner le démos et copier votre code après l’avoir selectionné comme dans l’image suivante:
Insérer Le Code
dans l’editeur de votre article choisissez texte comme dans l’image suivante et coller votre code:
Enfin, j’espère que ce tuto vous aidera dans la création de vos démos. N’hésitez surout pas à me laisser un commentaire si vous avez des questions ou des suggestions, Merci pour la lecture 🙂
je veux que mon codepen soit en français