Escalado de imágenes en HTML5 y CSS3

El concepto de “Web Responsive” es un, podríamos decir, subconjunto de las WebApp. Es decir diseñar una página Web de forma que se auto escale el tamaño de las imágenes, de las fuentes, de los vídeos y de la estructura del interface para que pueda ser consumida desde cualquier resolución de pantalla. O de casi cualquiera.

Esto es un viejo sueño de los principios del desarrollo en html, y que se había conseguido en la mayoría de los casos para las resoluciones por defecto en desktop. Pero llegaron los dispositivos móviles y sus resoluciones de 800 pixeles de alto (y menos) y la cosa se ha puesto color hormiga.

Y más con la llegada de HTLM5 y CSS3 que han enviado al cajón de los recuerdos parámetros en objetos HTML que llevaba utilizando más de una década.

Hete aquí que estoy haciendo un pequeño desarrollo de una web simple en donde quiero mostrar un logotipo y cuatro fotos, pero me encuentro que debo poder auto escalar las imágenes para que se vean bien tanto en mi portátil con 1300px de ancho, como en mi windows phone con 400px. Y ya no tengo el tag size en el objeto img.

Googleando he encontrado que la solución es híper sencilla y me funciona (en teoría debería funcionar en todos los navegadores actuales). Añadir al objeto imagen, por style o por css, la siguiente línea:

<img src="logotipo.png" alt="Imagen del logotipo" style="max-width: 100%;" />

Exacto, el truco es en declarar que la imagen tiene el estilo max-width:100%. Así se visualiza a su tamaño original mientras halla espacio, y se auto escala según se va quedando sin el. Y funciona muy bien.

Ojo, no sé cómo se verá en una blackberry o en smartphone antiguos que no soporten esta propiedad de CSS3.

Espero que sea de utilidad.

Guardar un List<T> en el ViewState

En un proyecto actual tengo que mantener el contenido de un GridView sin pasar por la base de datos. Para ello configuré una propiedad que del tipo List<T>, es decir tipada, y la quise almacenar directamente en el ViewState, pero no funcionó.

Para solucionar el problema lo primero es que la clase o estructura que va almacenar el objeto List debe ser serializable por lo cual en este ejemplo tengo que ponerle el tag correspondiente a la estructura Centros.

    [Serializable]
public struct Centros
{
public int IdCentro { get; set; }
public string NombreCentro { get; set; }
}

A continuación debo de construir la propiedad para que trabaje con array, en vez de con objetos List. Para ello lo primero que hago es configurar el ser para que el valor que me viene en forma de lista, lo almacene en forma de Array. Y, además, el Get debe hacer una conversión desde el ViewState a un Array<T> y y desde ese Array<T> a un objeto de tipo List<T> que es lo que devuelvo. Recuerda que en este ejemplo <T> se debe sustituir por <Centros>

protected List<Centros> listadoCentros
{
get
{
Centros[] MatrizDeCentros = (Centros[])ViewState["listadoCentros"];
List<Centros> listado = new List<Centros>(MatrizDeCentros);
return listado;
}
set { ViewState["listadoCentrosAsociados"] = value.ToArray(); }
}

Pero para evitar errores aplico el patron no null y le añado el código de lo que tiene que hacer si la propiedad no ha sido inicializada.

protected List<Centros> listadoCentros
{
get
{
if (ViewState["listadoCentros"] == null)
{ return new List<Centros>(); }
else
{
Centros[] MatrizDeCentros = Centros[])ViewState["listadoCentros"];
List<Centros> listado = new List<Centros>(MatrizDeCentros);
return listado;
}
}
set { ViewState["listadoCentrosAsociados"] = value.ToArray(); }
}

Y ya ta. Espero que haya sido de utilidad.

Un, dos, tres… probando.

Bueno, aquí estamos. Otro sueño cumplido de manera inesperada.

Agradecer a Rodrigo el que me haya invitado a esta comunidad y asombrado que esto no es un mero blog comunitario, si no mucho más. Con las Wiki, los foros y tantas cosas que tengo que ir revisando poco a poco. Vamos, que no hay que salir de aquí para estar a la última.

Tengo que probar cosas como el crossposting, y decidir la línea editorial en la que me quiero especializar. Aunque seguramente sea relacionada con la gestión de proyectos y el mundo Agile.

También he de reconocer que voy a publicar más bien poco. Ahora mismo estoy colaborando en el blog GenbetaDev del grupo WeblogSSL y el ritmo de artículos mensuales me lleva con la lengua fuera. Pero seguramente lo que escriba aquí sea lo más interesante que pueda compartir ya que lo más probable es que sean artículos de opinión.

Una vez más, muchas gracias a Rodrigo y espero que no me tiren muchas piedras.


Un saludo
Juan Quijano