Bipunto..

Sé agua, amigo.

- Vacía tu mente.
- Sé amorfo, moldeable, como el agua.
- Si pones agua en una taza, se convierte en la taza.
- Si pones agua en una botella, se convierte en la botella.
- Si la pones en una tetera, se convierte en la tetera.
- El agua puede fluir, o puede aplastar.
- Sé como el agua.
- Amigo mio, el agua que corre nunca se estanca, así que hay que seguir fluyendo.


Nicolás Fantino nos explica en su blog 100px con todo lujo de detalles bajo la entrada 'Ni fijo, ni líquido. Elástico' unas veteranas ideas sobre 'Elastic Design' reeditadas también en un artículo de 'HTML Dog', ideas que van más allá del concepto de columnas líquidas.

La idéa básica es utilizar como unidades de medida en las CSS, en vez de los píxeles 'px' los ems 'em' (ancho de la M de la font seleccionada), pero además de para el tamaño de las fuentes, para los anchos de los elementos contenedores.

Aunque los artículos se centran en la problemática del diseño de páginas web, a la hora de diseñar las páginas de las aplicaciones para la web, concretamente de formularios de entrada de datos, sean tabulados o no, o de las salidas de datos, estas triquiñuelas nos pueden facilitar el obtener aspectos más agradables de nuestra interface de usuario.

A la hora de posicionar los elementos de los formularios que mostrará el HTML, la forma usual es embutiendo en la JSP los tags HTML, esto normalmente pasa por repartirlos entre elementos <table /> con anchos fijos o porcentuales. La falta de semántica de esta manera de hacer las cosas se ve empeorada por la frecuente carencia de no utilizar XHTML, para lo cual no hay razón alguna ya que el pasar de HTML a XHTML es bastante trivial.

Aunque no sería muy difícil estructurar un formulario con CSS y tags al estilo:

<dl class="formulario">
<dt>Label 1</dt><dd><input type="text"></dd>
<dt>Label 2</dt><dd><input type="text"></dd>
<br class="separador-simple" />
<dt>Label 3</dt><dd><input type="text"></dd>
<dt>Label 4</dt><dd><input type="text"></dd>
<br class="separador-doble" />
<dt class="boton">Grabar</dt><dd class="boton"><input type="submit"></dd>
<dt class="boton">Volver</dt><dd class="boton"><input type="submit"></dd>
</dl>

y redefiniendo el estilo aplicado, al carecer de otros elementos posicionadores específicos, se acaba por utilizar lo que hay, tablas.

Otro trucos útiles a tener en cuenta son:

• Usar <Fielset/> <Legend/> y <Label/> para lo que se crearon


• Layerar los formularios con CSS


• Aplicar los tags de <table/> adecuados


• Usar técnicas non-intrusive para EcmaScript 'Unobtrusive Javascript'

Y el más básico y por ello menos aplicado, sacar de la página XHTML generada todas los estilos CSS y Javascript a ficheros externos..

Posted by Feliciano Borrego in . de vista at 20061028