(Tiempo estimado: 2 - 3 minutos)

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

Sobre el autor, Sergio Iglesias

Sergio Iglesias

Sergio Iglesias es formador, desarrollador y front-end del CMS Joomla!. A través de su blog y sus cursos puedes aprender a desarrollar tu propio portal web autogestionable.

 

¿Te ha gustado el artículo? ¡Suscríbete YA!

¿Necesitas un sitio web que funcione?

¿No quieres depender de nadie para gestionar tu página web?

Recibe contenido exclusivo y GRATIS mi curso sobre desarrollo de plantillas Joomla!


Me apunto ya!

Escribir un comentario

Puedes publicar el comentario que quieras, pero si lo considero SPAM será eliminado automáticamente.

 

SergioIglesias.NET te informa que los datos de carácter personal que nos proporciones rellenando este formulario serán tratados por Sergio Iglesias Sánchez como responsable de esta web. La finalidad de la recogida y tratamiento de los datos personales que te solicitamos es, únicamente, para gestionar los comentarios de este blog. La legitimación se realiza a través del consentimiento del interesado. Te informamos que los datos que nos facilitas estarán ubicados en los servidores de SiteGround (proveedor de hosting). Ver política de privacidad de Siteground. El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios podrá tener como consecuencia que no pueda atender tu solicitud. Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en info@sergioiglesias.net así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi política de privacidad.

¿Quieres tener un sitio web que funcione?

Contacta conmigo