Cuando se pensaba en MVC, la capacidad para dividir las tareas obvias de tratamiento de datos, en lógica de negocio (el modelo), control de flujo de ejecución (el controlador) y la presentación de datos (la vista), aún quedaban en el aire muchos problemas en lo que respecta a las interaces, propiamente dichas, entre estas tres capas.
Centrándonos en la vista, existen miles de soluciones, para alejar al diseñador del código y al programador del diseño, pero aún así, cuando se habla de AJAX y desarrollos específicos... el programador tiene que tocar diseño y el diseñador preocuparse de lo que hará el código de servidor.
Este dolor de cabeza puede paliarse mediante el uso de códigos no intrusivos, lo que facilita la especificación de una interfaz basada en identificadores para el tratamiento del HTML.
El código no intrusivo de servidor lo trataré en otro artículo para que no resulte este muy extenso.
CSS no intrusivo
En principio, desde el punto de vista del navegador, todo es HTML. Pero, al igual que en los procesadores de texto, para facilitar la estructura de estos ficheros y no plagarlos de contenido referente a tipos de letra, colores, fondos... se crearon las hojas de estilos.
Las hojas de estilos en cascada (CSS) ayudan, junto con la especificación de identidades y clases, a dar estilos (colores, fuentes y forma de presentación en general) a las etiquetas escritas en HTML.
El CSS se pude incrustar en las etiquetas HTML mediante el uso de las etiquetas style, o incluso a través de los atributos style dentro de cada una de las etiquetas típicas de HMTL.
La mejor forma de hacer que no sea intrusivo, es colocar esos estilos en un fichero separado, y agregarlo mediante el uso de la etiqueta link en la sección head.
JavaScript no intrusivo
El código JavaScript es algo que se ha ido haciendo cada vez más con el HTML. En principio, se usaba la etiqueta script dentro de la sección head para agruptar todas las funciones de javascript, a las que se iban llamando desde etiquetas como onclick, onmouseover, onchange..., es decir, las etiquetas de eventos de HTML, que se destinan para JavaScript.
Después su uso se fue masificando y mezclando cada vez más con el HTML, haciendo que la etiqueta script, en muchas páginas, se encuentre repetida y segregada a lo largo de todo el texto HTML y, además de eso, en atributos como href, donde se indica explíticitamente que se ejecutará un código javascript.
Esto hizo que el código javascript se convirtiese en parte simbiótica de HTML y, en muchos desarrollos, que no se pudiese separar fácilmente.
Con ciertas técnicas, como las usadas en CSS, la separación de JavaScript se puede llevar a cabo sin problemas, pero requiere de ciertas pautas y costumbres a la hora de realizar el HTML:
- Asignar ID a las etiquetas con las que se vaya a trabajar dinámicamente.
- Asignar una clase a todo tipo de etiquetas que se usen para un fin similar.
- Intentar no realizar anidamientos muy profundos.
- En caso de tenerlos, intentar diferenciar los niveles de profundidad con IDs claros.
- No abusar de tablas.
- Tener especial cuidado con las etiquetas div, sobre todo por su uso con varios navegadores.
Con esto, solo tener claro que, el fichero de tipo javascript que se asocie al HTML, debe tener un código lanzador, que se encargue de asociar las funciones javascript oportunas a los eventos y las modificaciones pertinentes.
Es importante también recordar que, para mejorar la depuración, es mejor generar cuanto menos código por javascript, mejor. Es decir, que si hay que modificar las propiedades de una tabla por dar la posibilidad de varios tipos de ordenación, hacer las funciones específicas para ese cambio en JavaScript, pero no caer en la tentación de pasar los datos a array de javascript para hacerlo todo desde ahí.
Conclusiones
Lo que se trata, en base, es llegar a lo que W3C considera que debería ser la web semántica, pero con el uso de HTML. Intentar organizar los datos con las etiquetas existentes, sin usar estilos de presentación, solo los datos, y agregar a esas etiquetas el estilo de presentación deseado, mediante CSS externo y el dinamismo de cliente que se requiera, mediante JS externo.
Las ventajas que agrega, es que el cambio de una presentación a otra, se puede hacer con tan solo variar el CSS, y agregar nuevas funcionalidades, es solo modificar el JS.
