{"id":42146,"date":"2023-09-23T23:43:06","date_gmt":"2023-09-24T04:43:06","guid":{"rendered":"https:\/\/niixer.com\/?p=42146"},"modified":"2023-09-24T09:21:22","modified_gmt":"2023-09-24T14:21:22","slug":"codepen-y-sus-posibilidades-creativas","status":"publish","type":"post","link":"https:\/\/niixer.com\/index.php\/2023\/09\/23\/codepen-y-sus-posibilidades-creativas\/","title":{"rendered":"CodePen y sus Posibilidades Creativas"},"content":{"rendered":"\n

En el siguiente art\u00edculo, exploraremos las razones por las cuales CodePen es reconocida como una de las mejores plataformas de desarrollo en l\u00ednea. Esta plataforma es ampliamente utilizada en el \u00e1mbito del desarrollo web, tanto para escribir, probar y compartir c\u00f3digo HTML<\/a>, CSS<\/a> o JavaScript<\/a>. Adem\u00e1s, nos permite compartir nuestro trabajo de manera sencilla con otras personas, ya sean parte del proyecto o no. CodePen facilita la colaboraci\u00f3n en tiempo real y permite realizar pruebas r\u00e1pidas sin la complicaci\u00f3n de configurar un entorno complejo en nuestra computadora local.<\/p>\n\n\n\n

\u00bfQu\u00e9 es CodePen?<\/strong><\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Lanzado por primera vez en junio del 2012 y fundado por Alex V\u00e1zquez, Tim S\u00e1bat, y Chris Coyier, la cual se fund\u00f3 con el objetivo de ser una plataforma en l\u00ednea para desarrolladores web y dise\u00f1adores que quieren escribir, probar y compartir sus c\u00f3digos en tiempo real. Esta plataforma ha evolucionado a tal punto de conseguir una gran comunidad activa de usuarios, convirti\u00e9ndola as\u00ed en una herramienta valiosa para aquellos que trabajan en el desarrollo web y dise\u00f1o web.<\/p>\n\n\n\n

CodePen es una plataforma la cual nos permite seguir personas y dar like a los c\u00f3digos que son de nuestro inter\u00e9s, la cual dentro de esta contiene un editor de c\u00f3digo online, que permite a los usuarios escribir y editar HTML, CSS y JavaScript, facilitando la creaci\u00f3n y experimentaci\u00f3n con el c\u00f3digo en tiempo real y de manera r\u00e1pida. Aparte de lo anteriormente mencionado, esta plataforma nos da una herramienta sumamente importante, como lo es la vista previa en tiempo real de como va nuestro proyecto en un navegador<\/a>, lo cual es realmente \u00fatil a la hora de ver el aspecto y el funcionamiento de nuestro c\u00f3digo.<\/p>\n\n\n\n

Como anteriormente ya se hab\u00eda mencionado CodePen cuenta con una comunidad activa de desarrolladores, los cuales suelen compartir sus conocimientos y proyectos, permiti\u00e9ndonos a nosotros adquirir m\u00e1s conocimiento, adem\u00e1s por medio de la misma plataforma podemos obtener diversas plantillas y recursos que podemos utilizar como un punto de partida para realizar nuestro proyecto.<\/p>\n\n\n\n

Creaci\u00f3n de Proyectos en CodePen<\/strong><\/h3>\n\n\n\n
    \n
  1. Para crear un proyecto, debemos acceder principalmente por nuestro navegador, o al siguiente enlace https:\/\/codepen.io\/<\/a>.<\/li>\n\n\n\n
  2. Una vez hemos entrado debemos Iniciar Sesi\u00f3n si ya hemos entrado anteriormente, o Registrarnos en dado caso que nunca hemos utilizado esta plataforma.<\/li>\n\n\n\n
  3. Una vez ingresamos por medio de nuestra cuenta, veras un bot\u00f3n \u201cNuevo Pen\u201d en la parte superior derecha de la pantalla. Haz clic en este bot\u00f3n para crear un nuevo proyecto.<\/li>\n<\/ol>\n\n\n\n
    \"CodePen<\/figure>\n\n\n\n

    Opciones de Configuraci\u00f3n del Proyecto<\/strong><\/h3>\n\n\n\n

    Despu\u00e9s de hacer clic en \u201cNuevo Pen\u201d, estar\u00e1s en el editor de Code Pen, donde puedes empezar a escribir tu c\u00f3digo. En esta nueva interfaz, se puede configurar diferentes opciones que ser\u00e1n de gran utilidad en nuestro proyecto, como lo son las siguientes:<\/p>\n\n\n\n