, , ,

CodePen: Herramienta Front-End

Herramienta y Plataforma Front-End donde puedes practicar con HTML5, CSS3 y Javascript.

CodePen es, la mejor herramienta/plataforma de front-end, donde puedes practicar con HTML5, CSS3, Javascript. Hace un tiempo que conozco esta plataforma, y quiero compartir todo lo que he aprendido.

1.- Presentación

Su primera ventaja es marcar la diferencia entre HTML para contenido, CSS para presentación y Javascript para programación. Esto ayuda a los usuarios a diferenciar bien cada lenguaje y acostumbrarse a utilizarlo.

 

2.- Soporte de Procesadores

CodePen soporta preprocesadores de HTML como lo son HAML, Jade, Slim o Markdown. También soporta preprocesadores de CSS como LESS, SASS (como SCSS), Stylus o PostCSS. También admite seleccionar preprocesadores de Javascript como CoffeeScript, LiveScript o TypeScript, aunque quizás la mejor opción es Babel (antes conocido como 6to5) que permite escribir código Javascript ECMAScript6 y traducirlo a Javascript ECMAScript5 (el que soportan la mayoría de navegadores actualmente). De esta forma podemos escribir código con las últimas mejoras de Javascript y estar preparados para el futuro.

 

3.- Añadir Librerias

Puedes añadir recursos externos como librerías o frameworks de forma muy sencilla. Desde el panel de información CTRL+I, en la ventana de CSS, se pueden añadirrecursos CSS externos o frameworks o librerías predefinidas, donde podemos encontrar Bootstrap y Foundation, o Animate.CSS, una librería de animaciones CSS.

En la ventana de Javascript tenemos la opción de agregar librerias como jQuery, React, AngularJS, EmberJS, BackBoneJS, Polymer, HandlebarsJS entre otras, o la opción de añadir archivos de librerías específicas.

 

4.- Modos de Visualización

Al crear un nuevo pen, este se abre en modo editor, donde podemos ver las ventanas de código junto al ejemplo final. Si pulsamos sobre el botón Change View veremos que hay cuatro modos de visualización.

 

Editor View: Es la ventana por defecto. Aparecen los editores de código HTML, CSS y JS, dónde podemos escribir en ellos e ir modificando el pen.

Details View: En esta ventana se encuentran los detalles del pen. Podemos ver si hay usuarios que han dejado comentarios, el número de visualizaciones que ha tenido, cuantas veces ha sido añadido a favoritos, entre otros.

Full page: Se muestra pantalla completa sin las ventanas de edición de código. Es ideal para aprovechar mejor el espacio de la ventana cuando se quiere mostrar algún ejemplo a otros usuarios.

Debug mode: Es el más útil, y añadido hace poco, es un modo de depuración Javascript. No hay que olvidar que CodePen es una página web que contiene nuestro pen (otra página web). Si queremos depurar Javascript desde una consola, por ejemplo, estaríamos trabajando sobre la página de CodePen y no sobre la nuestra. El modo debug elimina esta limitación, preparando una página con nuestro código específico.

 

5.- Patrones de Diseño

CodePen tiene una sección donde podemos encontrar guías temáticas para hacer diferentes cosas muy habituales, como por ejemplo, acordeones, botones, sliders y mapas entre muchos más. Link.

 

6.- Tips

Por último, por defecto la plataforma CodePen actualiza nuestros ejemplos a medida que los vamos escribiendo, en algunos casos esa continua recarga puede ralentizar el equipo. Para evitar esto, podemos ir al apartado Behavior pulsando CTRL+I y desmarcando la opción Want a Run Button? / Auto update preview.

 

TEMPLATE GRATUITO MATERIALIZE

También quiero compartir un template tipo Portfolio Personal realizado en Materialize, bastante básico, con la sección de Inicio, con la sección de portfolio y el formulario de contacto.

Lo puedes editar si deseas o descargar en el botón de Export.

 

Comenten.

¿Qué piensas?

438 points
Upvote Downvote

Total votes: 0

Upvotes: 0

Upvotes percentage: 0.000000%

Downvotes: 0

Downvotes percentage: 0.000000%

Agregar un comentario

Su dirección de correo no se hará público. Los campos requeridos están marcados *

Las 5 mejores librerias de animación.