[Sergio Iglesias](https://sergioiglesias.net) · Blog sobre Joomla # SIS FontWireframing: plugin Joomla para wireframes [ Añadir a fuentes preferidas ](https://www.google.com/preferences/source?q=sergioiglesias.net) 16 Octubre 2019 [Extensiones](https://sergioiglesias.net/blog/extensiones) 2 - 3 minutos Visitas: 3144 - - [ Desarrollo Joomla ](https://sergioiglesias.net/etiquetas/desarrollo-joomla) - [ Extensiones Joomla ](https://sergioiglesias.net/etiquetas/extensiones-joomla) - [ Plantillas Joomla ](https://sergioiglesias.net/etiquetas/plantillas-joomla) ![](https://sergioiglesias.net/images/blog/extensiones/sis-wireframing.png) Hace tiempo que no publicaba una **nueva extensión para Joomla** y por fin he podido liberar este pequeño plugin que te puede ayudar cuando estás haciendo una página web, en su **fase de wireframes**. ¿Quieres maquetar de forma rápida tu wireframe con #Joomla? SIS FontWireframing es tu plugin #Joomla - #MejorConJoomla [ Compártelo ](https://www.linkedin.com/sharing/share-offsite/?url=https://sergioiglesias.net/blog/extensiones/sis-fontwireframing-plugin-joomla-para-wireframes "Compártelo") [ Postéalo ](https://twitter.com/intent/tweet?url=https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fextensiones%2Fsis-fontwireframing-plugin-joomla-para-wireframes&text=%C2%BFQuieres%20maquetar%20de%20forma%20r%C3%A1pida%20tu%20wireframe%20con%20%23Joomla%3F%20SIS%20FontWireframing%20es%20tu%20plugin%20%23Joomla%20-%20%23MejorConJoomla "Postéalo") [ Envíalo ](https://api.whatsapp.com/send?text=%C2%BFQuieres%20maquetar%20de%20forma%20r%C3%A1pida%20tu%20wireframe%20con%20%23Joomla%3F%20SIS%20FontWireframing%20es%20tu%20plugin%20%23Joomla%20-%20%23MejorConJoomla%20-%20https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fextensiones%2Fsis-fontwireframing-plugin-joomla-para-wireframes "Envíalo") ## Qué es un wireframe Se trata de una guía visual que representa el esqueleto o estructura visual de un sitio web ([ver Wikipedia](https://es.wikipedia.org/wiki/Wireframe_(dise%C3%B1o_web))). Es decir, **cómo va a quedar tu página web** en cuanto a su estructura: módulos que tendrá la plantilla, elementos (imágenes, vídeo, títulos, textos...), etc. En sus primeras etapas se puede hacer con papel y lápiz (yo lo hago a menudo de esta forma). Esto me permite poder ir viendo **cómo incorporar los diferentes elementos** que el cliente necesita en su página web. Una vez finalizado, se puede pasar a un formato electrónico a través de diferentes herramientas que tenemos a nuestra disposición: Balsamiq Mockup, MockFlow... Peeero... **con Joomla puedes**, de una forma relativamente sencilla, saltarte este paso de pasar a formato electrónico. Tanto si cuentas con una **plantilla personalizada** que controlas y sabes crear posiciones de forma rápida como si usas algún [framework de plantillas](https://sergioiglesias.net/blog/general/277-frameworks-de-desarrollo-de-plantillas-joomla) como [Helix Ultimate](https://www.joomshaper.com/?ref=sergiois) (soy afiliado), podrás tener ese wireframe en "formato HTML" en muy poco tiempo. De esta manera puedes **enseñar un prototipo web a tu cliente** en un tiempo récord. Te invito a leer un artículo de Carlos Cámara en ManualesJoomla que habla sobre esto: [Acelera los desarrollos de tus prototipos con Joomla!](https://manualesjoomla.es/blog/188-acelera-los-desarrollos-de-tus-prototipos-con-joomla) Ahora viene otra cosa más o menos importante... ### ¿Qué ocurre si no tenemos textos? Normalmente, cuando no tenemos textos definitivos, habrás visto que se usa el típico "Lorem ipsum" para maquetar los artículos y textos de una página web. Si no queremos usar esto, tenemos varias alternativas y, dos de ellas, son las que están actualmente en este **plugin Joomla** que he desarrollado. Se trata de estas **fuentes alternativas a Lorem ipsum**: - [Blokk](http://www.blokkfont.com/) - [Redacted](https://github.com/christiannaths/Redacted-Font) (en teoría, versión mejorada de Blokk) ## SIS FontWireframing Pues eso, con este plugin podrás poner todo el contenido de la web con estos tipos de fuente. Pero, para que me entiendas, mejor ponemos un par de ejemplos: [![SIS FontWireframing - Lorem Ipsum](https://sergioiglesias.net/media/cached-resp-images//images/blog/extensiones/sisfontwareframing/lorem-ipsum_1230.jpg?version=61fea7f9cb4e0906176a6747a161b735)](https://sergioiglesias.net/images/blog/extensiones/sisfontwareframing/lorem-ipsum.jpg) [![SIS FontWireframing - Blokk](https://sergioiglesias.net/media/cached-resp-images//images/blog/extensiones/sisfontwareframing/blokk_1230.jpg?version=8fb7aaf1a96692544033931ba8ad10cd)](https://sergioiglesias.net/images/blog/extensiones/sisfontwareframing/blokk.jpg) [![SIS FontWireframing - Redacted](https://sergioiglesias.net/media/cached-resp-images//images/blog/extensiones/sisfontwareframing/redacted_1230.jpg?version=279334a555b06df0d2b5ed25f2e7cb66)](https://sergioiglesias.net/images/blog/extensiones/sisfontwareframing/redacted.jpg) ### Cómo usar SIS FontWireframing Simplemente tienes que descargarlo, instalarlo y seleccionar la fuente que quieres mostrar en tu página web. Así de sencillo. Descarga [SIS FontWireframing ](https://sergiois.github.io/sis-fontwireframing.html). SIS FontWireframing te ayuda a desarrollar #wireframes con #Joomla - #MejorConJoomla [ Compártelo ](https://www.linkedin.com/sharing/share-offsite/?url=https://sergioiglesias.net/blog/extensiones/sis-fontwireframing-plugin-joomla-para-wireframes "Compártelo") [ Postéalo ](https://twitter.com/intent/tweet?url=https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fextensiones%2Fsis-fontwireframing-plugin-joomla-para-wireframes&text=SIS%20FontWireframing%20te%20ayuda%20a%20desarrollar%20%23wireframes%20con%20%23Joomla%20-%20%23MejorConJoomla "Postéalo") [ Envíalo ](https://api.whatsapp.com/send?text=SIS%20FontWireframing%20te%20ayuda%20a%20desarrollar%20%23wireframes%20con%20%23Joomla%20-%20%23MejorConJoomla%20-%20https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fextensiones%2Fsis-fontwireframing-plugin-joomla-para-wireframes "Envíalo") Espero que este plugin te ayuden en esta etapa del desarrollo web y, si tienes algjuna mejora... ya sabes que estaré encantado en que contribuyas con tu código ;-) [ Añadir a fuentes preferidas ](https://www.google.com/preferences/source?q=sergioiglesias.net)Gratuito · Primer paso recomendado ### ¿No sabes bien en qué estado está tu web Joomla? Antes de decidir si hay que arreglar, migrar o mantener, conviene saber qué está pasando. Reviso el estado de tu web — versión de Joomla, extensiones y lo que se pueda ver — y te digo qué conviene hacer y en qué orden. Versión de Joomla y ruta de actualización Estado de extensiones Plan de acción con recomendaciones Informe por email + HTML [ Solicitar revisión gratuita sin compromiso ](https://sergioiglesias.net/revision-joomla-gratis)Respuesta en 24–48 h laborables [![Sergio Iglesias](https://sergioiglesias.net/images/sergiois-joomla-web.png)](https://sergioiglesias.net/sobre-mi)##### Consultor Web Joomla Senior Soy [Sergio Iglesias](https://sergioiglesias.net/sobre-mi). Ayudo a empresas, instituciones y profesionales a convertir su web en una herramienta real de negocio: segura, escalable y fácil de gestionar. Soy especialista en migraciones complejas de Joomla sin pérdida de datos, desarrollo de extensiones y plantillas a medida y ofrezco mantenimiento y evolución de tu CMS. [](https://x.com/sergiois "Sergio Iglesias en X") [](https://www.linkedin.com/in/sergiois "Sergio Iglesias en Linkedin") [](https://github.com/sergiois "Sergio Iglesias en Github") [](https://sergiois.github.io/ "Extensiones Joomla de Sergio Iglesias") ### 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**. [Quiero apuntarme!](https://sergioiglesias.net/newsletter) ### No hay comentarios ### Deja tu comentario En respuesta a Some User Nombre \* Dirección de email \* Texto del comentario \* Doy mi consentimiento para que mi información personal sea recopilada y procesada por este sitio para aceptar y mostrar mi comentario, así como para notificarme sobre las respuestas a él según la [Declaración de privacidad](https://sergioiglesias.net/politica-privacidad) del sitio. \*