Codepen es un servicio de edición de código HTML, CSS Y JavaScript online y en tiempo real.

Hacía tiempo que no usaba este servicio web pero últimamente me estoy viendo con ciertas necesidades para crear ciertos trozos de código para los cursos que estoy preparando y este servicio es ideal.

Antes de empezar a hablar sobre CodePen y cómo funciona os comento que no tiene soporte para PHP, ok? Por lo que si estáis buscando un servicio web que os permita ejecutar código PHP podéis probar PHPFiddle que no está nada mal.

¿Que es CodePen?

CodePen es un servicio web que nos permite ejecutar nuestro código de forma fácil y rápida sin tener que hacerlo en nuestro ordenador local con la consiguiente limpieza y orden.

Dispone de varios planes de precios pero podemos empezar probando con la versión Free para hacernos una idea de lo que podemos obtener y de las capacidades que tiene este servicio.

Planes de precios de CodePen

Como podemos observar en la siguiente imagen, CodePen dispone de varios tipos de precios empezando desde 9 euros al mes y aumentando.

No os olvidéis de que también dispone de una versión gratuita.

¿Cómo funciona CodePen?

Una vez que nos hemos dado de alta en CodePen, pulsamos sobre el botón «New Pen» que tenemos en la parte superior derecha de la pantalla.

Perfecto. Ahora nos aparecerá una ventana con un «Pen» vacío para que comencemos a escribir código.

Como vemos, todavía no tiene ni nombre. Esto lo podemos configurar desde el botón «Settings«.

Pero a lo que vamos… Vemos que tenemos 3 ventanas o espacios en la parte de arriba y cada uno de ellos está reservado a un tipo de código. El de la izquierda para HTML, el siguiente para CSS y el último, el de la derecha para código JavaScript.

También vemos otra zona justo debajo de estas que comentamos que por ahora está en blanco, no hay nada. Aquí será donde se muestre el resultado del código que vayamos introduciendo y se mostrará en directo.

Para hacer una prueba, voy a escribir algo de código HTML y así lo vemos…

Es un ejemplo muy sencillo pero creo que nos sirve para ver lo que podemos hacer con este servicio.

Ahora lo que tenéis que hacer es probarlo y escribir código a raudales!

Repositorio de Pens

Pues si, los Pens que se van creando pueden guardarse como privados o públicos. Si se guardan como públicos podemos ver los Pens de otras personas e incluso hacer Fork sobre ellos.

Esta opción es muy útil porque es posible que estés buscando un código para saber cómo se hace una cosa en concreto y es muy probable que lo encuentres porque CodePen tiene muchísimos.

Os invito a que probéis a buscar algo que os interese.

Y como vemos en la imagen anterior, también dispone de filtros de búsqueda. Muy interesante y recomendable.

Compartir, embeber, etc..

Como no podría ser de otra manera, también se pueden compartir los Pens, embeber en nuestros posts de WordPress, etc..

Esto es muy sencillo. Si os fijáis bien, veréis los botones correspondientes:

CodePen tiene muchas más cosas y opciones. Si queréis que un día profundice más sobre este servicio web o si queréis que hagamos un curso sobre ello, me lo comentáis y listo!

Plugins WordPress – CodePen

Como no podía ser de otra manera, WordPress dispone de varios plugins para utilizar CodePen y embeber los Pens.

A continuación os dejo un enlace:  https://es.wordpress.org/plugins/search.php?q=codepen

Sin más, cualquier duda, sugerencia, petición, me la podéis hacer llegar a través del formulario de contacto de la web de dinapyme.com.

También os recuerdo que tenéis la Zona Premium donde encontraréis Plugins y Temas premium para descargar, Cursos, formulario de soporte y más…

Y ya sabéis, todo esto y mucho más en Dinapyme.com.

Por último, si os ha gustado el podcast, me podéis dejar una valoración positiva de 5 estrellas en Itunes y un pulgar hacia arriba en Ivoox. Así como cualquier comentario.

Saludos y hasta el siguiente!