Nordic Design - El blog de Alex Lillo

Cambios en el blog

10 / Nov / 2008

Recientemente me he propuesto dar un giro al blog, que lo tengo casi abandonado. Mi idea es crear un nuevo diseño, incluir nuevos tipos de contenidos, mejorar la estructura (tanto lo que se ve como lo que hay por debajo) y lo más importante, actualizar más a menudo, y con contenido de mayor calidad.

Mi objetivo sería llegar al post semanal, sobre temas entorno a la usabilidad, el diseño (en cualquiera de sus vertientes), los estándares web, etc.

Se que a va a ser complicado, pero por intentarlo que no quede. Ahora mismo ya he estrenado algunas mejoras referentes al backend:

• Permalinks más amigables. Ahora el formato de los enlaces es el tipo fecha/título, mucho más limpio tanto para el visitante como para Google
• Página 404. Por un problema con el mod_rewrite no tenía una página 404. La actual no es que sea una maravilla, pero menos es nada.
• Encabezados coherentes. Ahora la estructura de encabezados de la página está bien formada.

Y está en proceso un update del sitemap a Google para que indexe todas las nuevas url, con la idea de que mis contenidos sean más encontrables.

En breve más noticias, gracias a los que estáis ahí leyendo.

Published in: Personal,

Comentarios

* * *

Layout dependiente de la resolución

25 / Apr / 2006

Cada vez que nos enfrentamos a la realización de un nuevo diseño surge la misma pregunta: ¿a que resolución lo vamos a optimizar? Hoy en día la mayoría de usuarios utiliza al menos una resolución de pantalla de 1024×768, pero todavía hay muchos que navegan a 800×600. Olvidarse de ellos a la hora de planificar un diseño significa que 2 de cada 10 usuarios van a encontrarse con barras de scroll horinzontales, sin duda un escenario nada apetecible.

Sin embargo renunciar a ese espacio de pantalla extra que disponemos a 1024×768, se me antoja un crimen para según que proyectos.

La solución nos llega de la mano del javascript. Tal y como presenta Cameron Adams en su artículo Resolution dependent layout podemos utilizar una hoja de estilos base y mediante javascript añadirle la funcionalidad de tener hojas alternativas que cambien nuestro layout. Depende de la resolución de nuestro navegador, tendremos unas u otras. Obviamente para sacar partido a esto debemos tener separada la estructura de la presentación, ¿pero esto ya lo hacemos, verdad? :-P

Otra buena noticia es que si nuestro usuario utiliza un agente que no soporta javascript, seguirá con el layout original, con lo que accesibilidad no se ve comprometida.

Podéir ver un ejemplo de como funciona, o bien descargar el código. Su uso es muy simple: en la cabecera del html llamamos a una hoja de estilos alternativa:

<link rel='alternate stylesheet' href='layout_1024.css' type='text/css'
title='1024' />

Y en el fichero resolution.js le decimos a que resolución debemos añadirla:

if (theWidth > 990)
{
setStylesheet("1024");
document.cookie = "tmib_res_layout=" + escape("1024");
}

A partir de ahí queda a la imaginación de cada uno utilizar este código para salvar las situaciones que se encuentre en sus diseños. Buen provecho.

Published in: Diseño,

Comentarios [1]

* * *

Lista de correo en castellano sobre CSS avanzado

31 / Jan / 2006

Vía ALT1040 me entero de la creación por Torresburiel de una lista en castellano sobre CSS avanzado. Yo me pienso apuntar ya mismo, seguro que hay mucho que aprender. Os copio el texto de presentación:

Hoy nace una nueva lista de correo en español sobre CSS. Pero no es una lista más. No pretende ser una lista más en la que se hable de CSS. Se trata de un proyecto de lista de correo que pretende ser el foro para que se debatan cuestiones alrededor de CSS avanzado. Pretendemos dar un paso más y dar por sentado que hay cuestiones y conceptos que deben quedar y darse por asumidos, y seguir con la profundización en el mundo de las hojas de estilo en nuestro idioma de una forma más avanzada.

Por ello hemos creado esta herramienta, que sirva como medio de información y comunicación de conocimiento en este campo específico. Los campos que abarca son los siguientes:

• CSS avanzado
• Tipos de medio
• CSS3
• Soporte multi-UA

Se trata de una lista de correo pública y moderada y no se admiten mensajes fuera de tema. La lista se llama css-adv, y te puedes suscribir ya mismo en la página de suscripción de la lista.

Published in: Diseño,

Comentario [2]

* * *

Intranet Fundación Chile

27 / Jan / 2006

No hay que perderse las capturas que nos muestra Jorge Barahona presentando la Intranet de la Fundación Chile. Un excelente trabajo de Diseño de Interfaz, Usabilidad, AI.

Felicidades por un trabajo bien hecho, y espero que otros clientes siguan el ejemplo.

Published in: Diseño, Usabilidad

Comentario

* * *

Rediseños – Azahar Airlines

28 / Aug / 2004

Comienzo hoy una nueva sección, dedicada a los rediseños. El primero del que quiero hablar es Azahar Airlines, una página personal dedicada a una aerolínea virtual.

Realicé este diseño allá por noviembre de 2003, y en aquella época a pesar de ya usar bastante las hojas de estilo, todavía trabajaba con una mentalidad basada en tablas. A si que el paso medio año después, fue cambiar todo el código, eliminando todas las tablas que me fueron posibles, dejando el estilo de la página lo más igual posible.

Podéis ver la antigua página siguiendo este enlace.

A destacar, pues la pelea habitual con el IE6 para poder posicionar las cajas en su sitio, por culpa del bug del modelo de caja. Al final consigo engañarlo y hacer que cada cosa quede en su sitio, pero tuve que cambiar el pie de página, y quitar el fondo gris porque no había manera de ponerlo en su sitio.

Además, incluí un truco leído en A List Apart, para hacer que una tabla tenga el color de fondo alternativo, sin necesidad de ponerlo a mano, una maravilla realizada con CSS y javascript. Podéis verlo en la plantilla. Comprobaréis que es mucho más claro de leer que no la antigua versión.

¿Objetivos conseguidos? El peso de la página no ha variado en general, algunas páginas son algo más ligeras, y otras un poco más pesadas, aunque el contenido no es el mismo, con lo que no es justa la comparación.
Ahora se muestra más correctamente en Opera y Firefox/Mozilla, ya que antes el fondo se mostraba incorrectamente (se cortaba cuando bajabas el scroll).
Y lo más importante, he sepadado el contenido del diseño. Ahora puedo actualizar rápidamente la imagen de la web, modificando casi únicamente los gráficos y la hoja de estilo.

En breve más rediseños, pero esta vez de antiguas páginas web que tenía colgadas en Internet, y que están ya desfasadas.

Published in: Diseño,

Comentarios [3]

* * *

2004-2012 - Alex Lillo. Publicado bajo Licencia CreativeCommons. Mantenido con textpattern.