| 07 de Noviembre, 2008
Aprovechar toda la pantalla de un usuario es sólo posible si utilizamos diseños o layouts líquidos o elásticos. La clave está en configurar los anchos en unidades relativas: porcentajes o ems en vez de píxeles y valga la redundancia el porcentaje de sitios diseñados de esta forma es mínimo. Los usuarios no notan esto a no ser que cambien de equipo o necesiten encoger la ventana del navegador.
Comparativa
- Con diseños fijos o estáticos hay que decidir para qué resolución trabajar y la respuesta normalmente es 1024 x 768 por tanto resoluciones mayores dejan demasiado blanco alrededor y a 800 x 600 aparece el engorroso scroll horizontal.
- Mientras que con un diseño líquido o elástico aprovechamos todo el ancho, evitamos el scroll horizontal y hacemos la web menos alta a resoluciones mayores.
La razón de que veamos esto es que el nº de usuarios con resoluciones inferiores a 1024 x 768 es cada vez menor, sólo el 8% de los usuarios de Internet según W3C tienen una resolución de 800 x 600 pero volviendo al tema de los porcentajes, si te visitan 100 usuarios estarás incomodando a 8 pero si te visitan 100000 estamos hablando de cuidar a 8000 usuarios, clientes o lectores, como los quieras llamar pero al fin y al cabo para quienes está destinado vuestro diseño.
Y en cuanto a navegadores siguen en cabeza IE7 e IE6
…
| 04 de Noviembre, 2008
Así de contundente es el titular de Digital Web Magazine: “Everything You Know About CSS Is Wrong” .
Y es que Internet Explorer 8 soportará las propiedades CSS table, table-row, y table-cell. Enterrarán para siempre la caduca etiqueta HTML <table> y harán mucho más fácil el diseño de layouts con CSS.
Una gran noticia sino fuera porque al diseñar hay que tener en cuenta todos los navegadores y sus versiones.
| 04 de Noviembre, 2008
Otra app web más con pocas opciones pero útil para neófitos en CSS. Visualiza online los estilos CSS aplicables a un texto: fuente, tamaño, color… No puedes combinar varios estilos.
CSS Type Set
Vía: css type set, crea css facil y online > csstypeset - Aprender a crear hojas de estilo CSS
| 31 de Octubre, 2008
A la categoría Mejor Blog de diseño (aspecto del blog) se han presentado 2144 blogs. Hoy, 31 de octubre y a punto de acabar el plazo para votar sigue habiendo una gran polémica con el sistema de votación y las clasificaciones.
El sistema propuesto por 20minutos es justo y democrático, el problema está en los participantes, sólo los que se han inscrito pueden votar. Muchos han intercambiado o vendido su voto a cambio de enlaces o han votado a algún amigo sin ver el resto. Esto es por supuesto lícito, como en cualquier votación democrática, cada uno hace con su voto lo que quiere.
El jurado otorgará otro premio entre los 5 primeros clasificados de cada categoría.
Es difícil hacer un voto justo, la única forma es visitando los 2144 blogs. Yo me estoy dejando los ojos para intentar emitir ese juicio justo, no sólo en esta categoría sino en el resto, todos ellos participan en otra categoría.
Este artículo recoge los blogs que han tenido al menos 2 votos según la clasificación actual a 31 de octubre. Para facilitaros la tarea del voto os dejo una captura de los mismos.
Los que no concursáis no podéis votar en 20minutos:
- sí en Bitacoras aunque no hay una categoría de Mejor Diseño quizás encontréis alguno para otra categoría,
- también podéis dejar vuestra opinión
- y probablemente daros cuenta de que hay blogs que objetivamente no merecen las posiciones que ocupan. Mi respeto a todos ellos porque en principio no son culpables de que les hayan votado, digo en principio porque si han promovido su voto en esta categoría por medio del intercambio o prácticas poco éticas, entonces sí, no tienen mi respeto como blogger.
Por razones obvias no he publicado los 2144 aunque sé que hay buenos diseños con 0 votos pero como quiero ser lo más objetivo posible me guardo esos blogs.
Mi criterio para votar en esta categoría sería:
- Original: muchos utilizan themes o plantillas de terceros, por tanto el premio no debería recaer en ellos sino en el autor de la plantilla.
- Usabilidad: Si entras en un blog y te pierdes, no hay organización jerárquica, blancos, etc.
- Compatibilidad con navegadores y resoluciones: Muchos diseños no se muestran igual en todos los navegadores, al menos habría que visitarlos en IE, Firefox y Opera bajo Windows XP. En cuanto a las resoluciones muy muy pocos se adaptan a resoluciones como 800×600, pese a ir descendiendo el número de usuarios con esta resolución aún hay un alto porcentaje (revisa tus estadísticas)
- Accesibilidad: Ni los sitios web que tienen por ley que cumplir los estándares de accesibilidad lo cumplen pero no estaría mal que se valorara los sitios que ponen su empeño en que su blog sea accesible al mayor número de personas.
- Velocidad de carga
- Estética: quizás del que todos podemos opinar, aún no siendo diseñadores, el que tendrá más peso en la votación: uso de colores, tipografía, maquetación, gráficos, etc. Se dice que sobre gustos no hay nada escrito pero sí hay ciertos criterios.
Características de las capturas:
- Navegador: Firefox 3.0.3 sin barras de herramientas
- SO: Windows XP
- Resolución 1280×960
- Redimensionadas a 300px de ancho manteniendo la proporción.
- Realizadas con Fireshot
Estos los 64 blogs que han recibido al menos 2 votos (31/10/08)
…
| 30 de Octubre, 2008
Yo utilizo la extensión Web Developer para testear los sitios web a 800×600 y a 1024×768. Siempre tengo en cuenta estas resoluciones, por muchos ya olvidadas, mis estadísticas me dicen que aún tengo muchas visitas con esta resolución.
En Proyecto Autodidacta explican en español el artículo de Firefox Facts donde proponen otra forma: creando un bookmarklet, un marcador con javascript con el que además podrás indicar la posición de Firefox en tu pantalla.
| 28 de Octubre, 2008
Según las Pautas de Accesibilidad al Contenido Web 1.0 los colores frontales y de fondo deben tener suficiente contraste para poder leerse con facilidad por personas con alguna dificultad visual.
En Jucy Studio hay una herramienta online para testear una combinación de colores. Inserta los valores hexadecimales, la fórmula usada te dirá si es apropiada, accesible o dicho de otra forma si tiene suficiente contraste o no.
| 28 de Octubre, 2008
Para utilizar tipos en web que no sean fuentes de sistema podemos utilizar sIFR3, en anieto2k descubro otro método basado en javascript, sin Flash, typeface.js
El método se sirve de la capacidad de dibujo de vectores de los navegadores:
Para utilizarlo además de llamar a los archivos javascript (descarga) se utiliza el método class, style para definir qué texto debe ser dibujado por qué tipografía.
Como cualquier otro javascript si el navegador lo tiene deshabilitado simplemente se mostrará con la fuente de sistema indicada por CSS o la que use el navegdor por defecto.
A favor de sIFR3 debo decir que los textos siguen siendo textos, seleccionables, con typeface.js los textos pasan a ser imágenes.
Ejemplos | Descarga | Descarga y creación de tipos
| 19 de Octubre, 2008
Si quieres poner una caja de texto un textarea donde el usuario al pasar el ratón por encima seleccione todo el texto que incluye, por ejemplo el enlace a tu web, simplemente añade:
onMouseOver="this.focus()" onFocus="this.select()"
Vía: Caja de texto con selección automática del contenido
| 15 de Octubre, 2008
Empiezo con mi recondemación y con las últimas novedades:
- Pingdom Tools puedes ver la velocidad de carga de tu web pero además ver desglosado todos los detalles de este proceso archivo por archivo. Entre sus funciones puedes filtrar la información también por peso de archivo en vez de por tiempo.
- Webwait es otro sitio que mide la velocidad de tu sitio, la diferencia es que hace varias y te calcula el promedio.
Pero estas dos herramientas no son las únicas ayudas que tenemos para reducir el tiempo de carga, estos son artículos útiles para la optimización de la carga de tu web:
…
| 09 de Octubre, 2008
La propiedad background en CSS permite establecer un patrón para repetir una imagen pequeña, de carga rápida como fondo de una página. Muchos diseñadores prefieren utilizar sólo 1 imagen de gran tamaño consiguiendo un aspecto único y una imagen de marca muy personal.
3 ejemplos de los 70 recopilados en FrancescoMugnai.com
…
Entradas (RSS)
