Hoy te traigo un nuevo campo personalizado para Joomla que te va a permitir integrar ejemplos de HTML+CSS+JS de forma fácil en los artículos de tu página web.
CF JSFiddle - Campo personalizado #Joomla para integrar ejemplos de HTML+CSS+JS en tus artículos - #MejorConJoomla TuitéaloSi aún no sabes qué es un campo personalizado en Joomla te comparto un par de artículos para que puedas ver qué son y cómo se usan:
La idea de crear este campo personalizado para Joomla me la planteó un suscriptor de mi newsletter y, como lo vi relativamente sencillo, me puse manos a la obra para desarrollarlo.
Lo primero de todo fui a ver qué formas tenía JSFiddle para poder embeber los ejemplos que creaban los usuarios.
Por cierto, si no sabes qué es JSFiddle, se trata de fantástica herramienta web donde poner a prueba nuestro código HTML, CSS y Javascript de forma fácil y cómoda.
Después de crearme una cuenta para hacer las pruebas necesarias, en muy poco tiempo tenía desarrollado el campo personalizado.
El resultado que obtienes sería algo como esto:
Instalación y configuración
Con estos 4 simples pasos podrás utilizar el campo personalizado en tus artículos:
- Instalar el plugin utilizando el gestor de extensiones de Joomla!
- Habilitar el plugin
- Añadir el campo (JSFiddle) a tu componente
- Introducir la URL de JSFiddle:
Ejemplo: https://jsfiddle.net/sergiois/65thr90q/2/
La verdad que no tengo mucho más que explicar sobre su uso ya que es muy sencillo.
Próximas versiones
Ya que estás leyendo este artículo te adelanto lo que voy a añadir en siguientes versiones:
- Posibilidad de poner el ejemplo en modo oscuro.
- Posibilidad de no incluir algunas de las pestañas que aparecen: JavaScript, HTML, CSS, Result.
Pero como digo, esto será más adelante.
Dónde descargarlo
Y este es el campo personalizado para Joomla que he desarrollado.
Tienes toda la información y puedes descargarla en mi GitHub: CF JSFiddle
Espero que te guste y te sirva para tus proyectos.
Si quieres ayudar a otros compañeros, comparte el artículo en Twitter haciendo clic a continuación.
CF JSFiddle - Campo personalizado #Joomla para integrar ejemplos de HTML+CSS+JS en tus artículos - #MejorConJoomla Tuitéalo