« Codepen » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Aucun résumé des modifications
Ligne 12 : Ligne 12 :
L'affichage de l'application est divisé en deux parties : La partie du haut elle même partagée en trois selon l'édition des différents codes : [[HTML]], [[CSS]] et [[Javascript]]. La partie du bas est la visualisation du code en direct.  
L'affichage de l'application est divisé en deux parties : La partie du haut elle même partagée en trois selon l'édition des différents codes : [[HTML]], [[CSS]] et [[Javascript]]. La partie du bas est la visualisation du code en direct.  
[[Fichier:Codepen interface.png|vignette|Interface de développement de Codepen]]
[[Fichier:Codepen interface.png|vignette|Interface de développement de Codepen]]
Il y a la possibilité de lier le projet avec [[Fork]] afin de suivre l'évolution du projet.
Une fonctionnalité permet de reformater l'indentation du code en un clic.
L'exportation du projet peut se faire de plusieurs manières :
*Télécharger un dossier ZIP
*Partage du lien du projet
*Sauvegarder sur [[Gist]]
*Créer un container (Embedding) sur un autre site
Le côté communautaire du site permet de partager ses "Pens" et demander de l'aide à d'autres développeurs. Il y a des collections de "Pens" existants et exportables sur le site directement.
=== Préprocesseurs ===
=== Préprocesseurs ===
Codepen offre la possibilité d'écrire des codes en se basant sur des framework de code déjà connus comme :  
Codepen offre la possibilité d'écrire des codes en se basant sur des framework de code déjà connus comme :  

Version du 22 octobre 2017 à 16:37

Introduction

Codepen est une plateforme de développement gratuite. Elle permet de développer et tester en direct du code en HTML, CSS et Javascript. Elle s'utilise dans les navigateurs web. Ce logiciel a été créé en 2012 en Floride. Codepen est également un réseau social de développeurs. Chacun d'eux peut créer sa propre page en montrant les codes développés (appelés "Pens") sur la plateforme.

A consulter:

Voir aussi:

Fonctionnalités

L'affichage de l'application est divisé en deux parties : La partie du haut elle même partagée en trois selon l'édition des différents codes : HTML, CSS et Javascript. La partie du bas est la visualisation du code en direct.

Interface de développement de Codepen

Il y a la possibilité de lier le projet avec Fork afin de suivre l'évolution du projet.

Une fonctionnalité permet de reformater l'indentation du code en un clic.

L'exportation du projet peut se faire de plusieurs manières :

  • Télécharger un dossier ZIP
  • Partage du lien du projet
  • Sauvegarder sur Gist
  • Créer un container (Embedding) sur un autre site

Le côté communautaire du site permet de partager ses "Pens" et demander de l'aide à d'autres développeurs. Il y a des collections de "Pens" existants et exportables sur le site directement.

Préprocesseurs

Codepen offre la possibilité d'écrire des codes en se basant sur des framework de code déjà connus comme :

Modes

Education

Pro

Bibliographie

1 https://www.codepen.io [ Gimp] (12/2016)

2 https://en.wikipedia.org/wiki/CodePen [Wikipedia] (12/2016)