Chavalina. Diario

Enero 13, 2005

Diagramación elástica

Archivado en: Programación — Chavalina @ 04:41

Bajo ese nombre tan raro hay en la web de Nicolás Fantino un muy muy buen artículo sobre maquetación con CSS y XHTML donde los anchos de los bloques o divisiones se fijan en em en lugar de los píxeles o porcentajes acostumbrados, haciendo así que, además del texto, sus contenedores también se van a redimensionar cuando el usuario aumente el tamaño de letra.

Es muy interesante sobre todo para temas de accesibilidad, porque, como comenta Nicolás, cuando una persona necesita aumentar el tamaño de la letra en una web, si los contenedores tienen tamaño fijo la longitud de las líneas se hará demasiado corta como para leerlo cómodamente. Un ejemplo de esto lo tenéis en esta misma web.

El problema que presenta esto son las imágenes que usamos como fondo, curiosa una solución que propone con imágenes vectoriales, o también definiendo sus dimensiones de la misma forma que el texto y los bloques, ilustrado con un bonito ejemplo del CSS Zen Garden.

Actualización: he hecho mi primera prueba con esta técnica sólo, sin más florituras, en mi currículum y no ha resultado nada difícil maquetar, igual igual que con píxeles.

10 comentarios

  1. Si, es normal lo de utilizar “em”. A los que utilizamos TeX aquello nos suena mucho. Es normal redimensionar las cosas utilizando el tamaño de la “m” :) ya que es el carácter más ancho. También está el “ex”, que se utiliza para la altura de la fuente base.

    Comentario por diego — Enero 13, 2005 @ 04:47

  2. Bueno, yo lo había visto mucho en texto, incluso para definir separación entre letras o palabras, pero no se me había ocurrido ponerlo en los contenedores.

    Realmente para mí es una “revolución” jajajajaja, bueno, porque así date cuenta que siempre tendrás el mismo número de líneas en cada separador… bueno, rollos míos, pero me parece muy muy muy útil para maquetar.

    Comentario por Chavalina — Enero 13, 2005 @ 05:02

  3. Hay un en A List Apart.

    Comentario por Joaquín — Enero 13, 2005 @ 06:14

  4. Acabo de caer en la cuenta de que, aunque en la vista previa los enlaces se vean cuando se usa el HTML estándar, aquí hay que ponerlos con otra sintaxis. Es el segundo sitio donde me pasa en pocos días. O yo soy muy burro o no es muy usable… Vale, no digáis nada ;-)

    Lo que quería decir es que hay [LINK=http://www.alistapart.com/articles/elastic/~]un artículo muy bueno sobre diseño elástico[~LINK] en A List Apart.

    Comentario por Joaquín — Enero 13, 2005 @ 06:18

  5. No, no es muy usable, tienes razón.
    Pensé en ponerlo de la forma corriente usando una función de PHP que deja pasar ciertas etiquetas, pero de esta forma prevengo el spam.

    Comentario por Chavalina — Enero 13, 2005 @ 06:20

  6. Inma, muchas gracias por reseñar el artículo y aún más por comentar el post sobre las posibles soluciones a los gráficos en 100logs (el cual creo que es más interesante aún por ser algo que todavía no existe y que creo que podría servirnos a todos).

    A ver cuando empezamos a mover el próximo Meetup (al cual espero que vendrás) :-)

    Comentario por ala_747 — Enero 13, 2005 @ 16:43

  7. Yo creo que el problema va a ser la junta de la trocola, que hace masa con el aforador del depósito y claro, se rompe el fuelle del palier con lo que la rotula de la junta homocinetica pierde valvulina interior…

    … o no, me apunto al Meetup :-)

    Comentario por Jcl — Enero 14, 2005 @ 12:13

  8. Te ha quedado muy bonito el curri… especialmente el portfolio (con las pantallitas que se van agrandando o achicando).

    Me alegro que te haya servido :-)

    Comentario por ala_747 — Enero 17, 2005 @ 09:24

  9. Muy chulo, salvo que el copyright se te ha ido al 2004 ;-)

    Saludos!
    diego

    Comentario por diego — Enero 18, 2005 @ 11:57

  10. estubo estupendo

    Comentario por pancha — Mayo 31, 2007 @ 11:21

Suscripción RSS a los comentarios de esta entrada.

Disculpa, los comentarios están cerrados.

Administrado con WordPress. Traducido por WordPress España.