martes, 21 de marzo de 2017

Codepen, una herramienta útil y sencilla

Hoy quería hablaros de Codepen, para que sea fácil de entender, Codepen.io es una herramienta online de testing para programación web en Javascript, CSS y HTML, es decir, front-end, que nos facilita visualizar una vista previa de nuestro trabajo sin la necesidad de cargar archivos en el ordenador.

Codepen.io nos permite hacer referencias a bibliotecas de terceros, guardar códigos para utilizarlos posteriormente y compartirlos. Hay que recordar que todo lo que pongamos en nuestra cuenta de codepen se comparte con la comunidad, si no queréis que esto suceda tenéis que haceros una cuenta premium para poder tener la opción de hacer códigos privados o públicos. Si estáis interesados cuesta 9$ al mes y 75$ todo el año.

Codepen también nos permite agregar recursos externos fácilmente desde el panel de información en CSS, se pueden añadir recursos externos o frameworks o librerías predefinidas, como por ejemplo Bootstrap en la pestaña de CSS o JQuery en la de Javascript:






Después de registrarnos vamos a ver como es la interfaz:  

Pinchamos en New Pen:


Y nos saldrá la siguiente pantalla, podemos utilizar solo uno de los campos, dos o incluso los tres:


Nos podemos encontrar una serie de botones, bueno, Save y Settings no tienen mucha ciencia así que os explicaré los demás:

  • Tidy: Botón para novatos, torpes, gandules o correcaminos, como queráis llamarlo, este botón nos ayuda a colocar nuestro código "espaguetti" Ojo porque a veces hace auténticos potajes. 
  • Fork: Para guardar los códigos de otros en nuestra carpeta, así podremos jugar con ellos y hacerles cambios o simplemente guardar lo que nos parezca interesante.

Este es un sencillo código que realicé para un curso de la ULL de CSS3, las imágenes que están ahora no son las que puse en su momento ya que el servidor donde las subí cayó, asi que sí, Sauron sale con doble anillo único.  Podéis verlo aquí: CódigoChapuza

codepen.io


No solo podemos crear vistas con css y html, también podemos utilizar códigos incluyendo Javascript:

javascript



Por último codepen cuenta con una lista de recursos o patterns que podemos utilizar en nuestros proyectos de forma sencilla ¿Recordáis el botón Fork?




Post invitada:
YRoxas
Posted in 

0 comentarios:

Publicar un comentario