Entradas

Bootstrap

Bootstrap surge con la pretensión de superar este obstáculo otorgando a los desarrolladores una base sobre la que trabajar y definir un marcado estándar para ciertos elementos de una página web, a la par que proporcionar un diseño responsive (tan de moda últimamente, como comentábamos en un artículo anterior), capaz de acoplar éste a cualquier resolución de pantalla y dispositivo móvil.

Sí que es cierto que el estilo de todos estos elementos, tan limpio y entendible para el usuario, es más idóneo para interfaces de administración que para el front-end de una página web, pero siempre es posible añadir reglas propias de estilo en un fichero aparte para adaptarlo a aquél que nos venga impuesto desde arriba por un PSD o por el propio equipo de diseño.

Para mejorar esta experiencia en el front-end, también surgen proyectos como el de Bootswatch, que dispone de varias plantillas para extender el estilo base de Bootstrap.

bootswatch-bootstrap

Bootstrap básicamente se compone de un conjunto de ficheros CSS de mínimo peso (6Kb comprimidos) que podemos añadir a la cabecera de nuestra página web para comenzar a utilizar. Una vez añadidos, la idea es definir el grid (para marcar el diseño responsive) y el marcado de los elementos que deseemos utilizar. Tenemos gran cantidad de documentación al respecto en la página oficial de Bootstrap.

Una muestra de la extensión de este framework es que la siguiente versión de Joomla, la 3.0., disponible a priori en septiembre de este mismo año, implantará internamente Bootstrap. Esto significa que algunos de los módulos del núcleo de Joomla cambiarán su marcado para acoplarse al marcado definido por Bootstrap. A nivel de plantillas, esto no debería suponer un gran cambio para aquellas que provengan de la versión 2.5. de Joomla. En el siguiente enlace está disponible una demo de esta nueva versión de Joomla que está por llegar para que vayamos abriendo boca.

En el intento de integrar Bootstrap con Joomla, uno de los proyectos más interesantes disponibles en la red es Joostrap. Joostrap dispone de un catálogo de plantillas base listas para integrar en una página web que utilice Joomla. Desde Domatix hemos estado testeando una de estas plantillas para comprobar cuán efectiva es su integración en dicho gestor de contenidos (algunos de nuestros próximos retos son comprobar la integración de la responsividad en WordPress y Prestashop). Algunas de las conclusiones a las que hemos podido llegar son:

•  Al ser Bootstrap un software en fase de desarrollo, su implantación todavía está algo verde y, en ocasiones, aparte de la documentación oficial, la integración en un CMS carece de una documentación sólida con la que poder comenzar a trabajar.

•  Deben modificarse a mano algunas de las plantillas de los principales módulos de Joomla, como por ejemplo las plantillas del famoso módulo K2, para acoplarlas al marcado de Bootstrap.

•  Bootstrap utiliza como base las librerías Jquery y nuestra experiencia es que, al usar Joomla como base la librería Mootools, se han tenido que aplicar algunos arreglos todavía no muy bien documentados para que ambas fueran compatibles. La nueva versión de Joomla incluirá Jquery y permitirá la convivencia de ambas librerías, por lo que esperamos que esta compatibilidad sea mayor y con ello la documentación disponible al respecto.

bootswatch-bootstrap

Solve Chronoforms getInputByName2 error

  • Update chronoforms to v.4 and create from scratch all your forms
  • Edit the chronoforms component to solve the problem

 

As the v4.0 version can be installed side by side with the old v.3.2 version you can combine both solutions. So you can solve manually the compatibility error and then do the form migration slowly.

Edit the Chronoforms component to solve the problem.

Edit the file:

components/com_chronocontact/libraries/includes/JSvalidation.php

and search:

Element.extend({
        getInputByName2 : function(nome) {
            el = this.getFormElements().filterByAttribute('name','=',nome)
            return (el)?(el.length)?el:el:false;
        }
    });

Replace it with:

Element.implement({
        getInputByName2 : function(nome) {
            el = this.getFormElements().filterByAttribute('name','=',nome)
            return (el)?(el.length)?el:el:false;
        }
    });

This changes the method definition to make it compatible with Mootools 1.2.5+