SERGIOIGLESIAS

Blog sobre Joomla

CF JSFiddle - integra ejemplos de HTML+CSS+JS en tus artículos Joomla

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éalo

Si 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

Suscríbete a mi newsletter

¿Te ha gustado el artículo? Suscríbete a mi newsletter y recibe contenido exclusivo.
Podrás hacer gratis un Curso de desarrollo de plantillas Joomla.

No hay comentarios

Artículos relacionados

Solicita presupuesto

¿Quieres una página web que funcione?

Contacta conmigo y hablemos de tu proyecto.