Como usar Codepen.io

Ya contamos qué es y para qué sirve Codepen.io hace un tiempo. Y hoy por hoy continúa siendo una de las plataformas online para probar código.

Codepen.io

Retomando un poco lo que ya comentamos, sabemos que podemos usar Codepen.io sin necesidad de registrarnos, pero no es lo recomendable si lo queremos de forma profesional. Es mejor crear una cuenta, y trabajar desde ella.

Cómo escribir código en Codepen.io

Para entender la distribución de los paneles que tiene esta plataforma te recomiendo que leas el artículo que menciono al principio.

Una vez que estamos en nuestro “Pen” tenemos que elegir el tipo de sintaxis que vamos a usar para cada uno de los lenguajes que usaremos.

Usemos como ejemploe el panel «HTML». Si hacemos clic en el icono del engranaje que aparece a la izquierda (ver la imagen siguiente), nos aparecen las opciones entre las que podemos elegir para comenzar a escribir el código usando la sintaxis con la que estemos mejor familiarizados.

Codepen

Entre las opciones que nos permite elegir tenemos básicamente dos:

  • Normal -> Escribir el código HTML puro y duro.
  • Frameworks -> dependiendo del lenguaje aparecerán las diferentes sintaxis que podemos usar.

Un ejemplo usando la configuración de HTML:

Codepen.io

Una vez que elegimos la sintaxis, tenemos que presionar el botón verde: «Close» para que se aplique el cambio.

Además de los cuatro paneles (3 para los lenguajes en la parte superior, y uno para la vista previa debajo), al pie del editor verás que aparece lo siguiente:

Codepen.io

Esta barra que aparece al pie de página del editor de Codepen.io, nos permite ampliar las funciones. Por ejemplo, verás que hay un botón «Console» (=consola o terminal). Con esta podemos ingresar algunos comandos (propios de Codepen.io) para modificar algunos comportamientos (o resultados) de editor.

Uno de los botones más prácticos de la barra inferior es: «Embed». Este nos mostrará el código que deberíamos usar para insertar en nuestro sitio web o blog, para tener el mismo resultado que vemos en pantalla. Ten en cuenta que el código que te da Codepen.io lo tienes que insertar en el <body> de tu código html del sitio o del blog.

Lo bueno de estar logueados en nuestra cuenta es que nos permite guardar el código que creamos en el editor, para recuperarlo más tarde.

Codepen.io como fuente de inspiración

Una de las características que vale la pena destacar es su carácter social. Codepen.io es una plataforma en la que podemos, no solo escribir y probar código, sino también compartirlo para que otros se puedan beneficiar de nuestra experiencia. Y lo mismo en nuestro caso.

Podemos encontrar allí miles de “Pens” (como se le llama a los códigos creados en esta plataforma) que nos muestran cómo solucionar muchísimos problemas o situaciones que nos  podemos encontrar en nuestro trabajo como programadores – desarrolladores.

También con los “pens” compartidos en Codepen.io podemos aprender nuevas maneras de conseguir bonitos resultados trabajando con HTML – CSS3 y JavaScript. Cuando encontramos un “pen” que nos interese, podemos hacer clic sobre él para que se abra en nuestra cuenta.

Si queremos modificarlo, y crear nuestra propia versión, solo tenemos que hacer clic en el botón «Fork» que aparece en la barra de menú en la parte superior derecha:

Codepen.io

A partir de aquí todo depende de nuestra creatividad. Es un excelente recurso para tener entre nuestras herramientas, especialmente si trabajamos online.

Node.js logo
Google está probando una nueva app para conversaciones en grupo

TUTORIALES, TRUCOS Y HACKS

NUEVOS POSTS EN PORTADA

Un comentario en “Como usar Codepen.io”

  1. TONY

    Exelente información los felicito.


¿Que opinas? escribe un comentario :)