Hacer un sitio web es un proceso largo y que conlleva la toma de varias decisión las cuales están dictadas por la idea general del sitio. Es por esto que no todas las web son iguales ni su proceso de realización es el mismo. Al margen de esto hay ciertos puntos que no nos podemos permitir a la hora de estar llevando a cabo el proceso de convertir en código nuestra idea. Los mismos fueron recopilados por Josiah Cole ya hace un tiempo y me gustaría dar mi impresión sobre ellos.

No redimensionar la ventana del navegador. Algo bastante molesto, poco usable y accesible.

Sitio principal en un popup. Si el usuario tiene que cargar tu sitio y luego hacer click para que el verdadero contenido aparezca en un popup estás complicando las cosas.

Que el usuario no tenga que responder. Son muchos los sitios que le preguntan al usuario su tipo de conexión o si quieren ver el contenido en Flash o HTML. Mientras más cosas tenga que hacer el usuario menos agradable será su experiencia con el sitio.

Que tu sitio esté entera y completamente en Flash. Aplicable a muy pocos y excepcionales casos, ni vale la pena explicar los motivos.

No trates de reinventar la navegación web. La idea es que tu sitio se adapte a la forma en que el usuario navega frecuentemente internet y no que el usuario se adapte a tu idea de como debería navegarse.

Que sólo funcione en algunos navegadores. Si tu sitio no funciona en algún navegador en especial es un problema. Entiendo que Internet Explorer 6 es un pésimo navegador, pero hacer que nuestro sitio funcione con él no es algo imposible.

Por favor evitar texto parpadeante, extensiones de Frontpage, popus incesearios, descarga de fuentes e introducciones en Flash. Ya estamos en el 2009.

Evitar que el sitio reproduzca música. Si lo va a hacer, que el usuario pueda detenerlo en cualquier momento y si no comienza al cargar el sitio mejor.

Que tu sitio no tarde mucho en cargar. Vivimos en una actualidad donde la velocidad es un factor clave y mucho más si se la relaciona con la información. Los métodos para optimizar el tiempo de carga de un sitio no son un secreto ni mucho menos.

No se si alguno de ustedes lee mi blog personal y si lo hacen seguramente será desde RSS por lo que no se deben haber enterado que hace unos días decidí cambiarle un poco el aspecto. Agradezco los buenos comentarios de quienes ya lo vieron y también las críticas que obviamente sirven.

En mi blog generalmente publico ideas cortas, alguna foto o en ciertas ocaciones algún texto más producido por lo que el diseño se adaptó bastante a este funcionamiento. Gran importancia a el contenido tanto en legibilidad y ubicación en pantalla y rápido acceso a los enlaces más útiles. El usuario que visita ese blog básicamente entra a leer 3 o 4 textos y se va por lo que la usabilidad está amoldada a ese usuario.

En cuanto a la imagen es bastante tranquilo y ordenado a excepción del fondo el cual a mi pobre entender le da un equilibrio para que no sea un total aburrimiento ni una anarquía gráfica. Entiendo que a muchos no pueda gustarle o resultarle molesto es por eso que también preparé la sección Clean (improvisando algo de HTML5) donde con otra hoja de estilos pueden leer el blog con un diseó más tranquilo.

¿Gustó o no gustó?

100 Amazing Free Wordpress Themes for 2009 – Smashing Magazine
Selección de 100 themes por parte de Smashing Magazine donde están incluídos Fontella y Mínimo. Esta lista fue reproducida en muchos otros sitios.

HoracioBella.com en CSS Mania

ConBlockquote en CSS Mania

100 Excellent Free WordPress Themes
Otra selección de Smashing Magazine. Fueron incluidos Fontella y GimpStyle.

HoracioBella.com en CSS Wow

Personajes de la blogósfera: Horacio Bella – Blog en Serio
Breve reseña de Víctor Esparza sobre mi trabajo.

Fontella en Best Worpdress Themes

HoracioBella.com en Digg CSS

40 Excellent Free WordPress Themes
Incluyeron a Fontella y así lo presentaron ellos: In this collection, you’ll find 40 high-quality and free WordPress themes handpicked from the vast amount of free themes out there on the web.

HoracioBella.com en The Design Gene

ConBlockquote en CSS Cookie

ConBlockquote en Most Inspired

50 Temi Premium per Wordpress
Sitio italiano. Destacaron a Minimo.

20 Themes para Wordpress Premium y Gratuitos – Zyros Web
Recopilación de 20 themes para Wordpress Premium y gratuitos. Incluyeron a Mínimo.

Aproveché el fin de semana para acomodar algunas líneas de código que tenía sueltas de varios trabajos para armar un theme para Wordpress y liberarlo. Se trata de un theme con estilo tradicional (header, contenido a la izquierda listado de manera cronológica y sidebar lateral) de estilo bastante simple y sobrio.

La idea de Mandolina es que sea un theme para quien necesite un estilo elegante y serio para su blog. Va a serle útil también para quien necesite una plantilla de base para modificar y adapatar su estilo ya que está realizada de manera simple y ordenada. En fin, es una plantilla básica que van a poder modificar sin problemas.

Algunas características:

• Válido XHTML/CSS
• Optimizado para SEO
• Acepta widgets (widget-ready)
• Fácil edición general de los estilos
• Bajo licencia Crative Commons
• Respeta conceptos básicos de usabilidad
• Ultraligero

Como todos sabemos las propiedades text-shadow y los filtros de Internet Explorer para esta propiedad no son las mejores opciones si queremos agregar algo de sombra a los textos, títulos o demás elementos de nuestro sitio. Son interpretados de diferentes maneras por todos los navegadores y algunos ni siquiera lo hacen, llevando a los diseñadores a obviar este efecto en los sitios.

Lo que quiero comentarles es una alternativa para alguna ocasión determinada en que quieran agregar sombra a un texto sólo utilizando CSS, preferentemente en algún título o encabezado destacado. La idea es bastante simple: Usaremos el mismo texto dos veces, uno que funcionará como texto y otro que será la sombra. Utilizando la propiedad position: relative ubicaremos el texto por encima de la sombra y lo moveremos para realizar el efecto deseado.

Para realizar esto primero debemos establecer el texto que funcionará como sombra dentro de un span, un p, un div o el elemento que querramos y le agregamos la clase shadow (class=”shadow”). Luego copiamos el texto a una nueva etiqueta y le agregamos la clase text. Desde el CSS movemos el segundo elemento (bajo la clase text) hacia arriba hasta ubicarlo de manera que el primer elemento sobresalga a modo de sombra. A esta altura creo que ya estoy escribiendo de más porque la idea es muy simple.

Para dejar todo más ordenado y poder repetirlo podemos establecer alturas fijas para estos elementos y así saber la distancia en que debemos mover el segundo elemento. Los colores, tipografías y demás queda a criterio de cada uno y de lo que necesite. Básicamente el XHTML quedaría algo así:

<span class="shadow">Texto de ejemplo</span>
<h2 class="text">Texto de ejemplo</h2>

Y el CSS algo así:

span. shadow {
display: block;
height: 30px;
color: #ccc;
}
 
h2.text {
position: relative;
bottom: 30px;
left: 2px;
color: #333;
}

Pueden ver algunos ejemplos en este enlace.

Está claro que semánticamente no es algo perfecto, tener el mismo texto dos veces no tiene demasiado sentido, pero como les comenté hace anteriormente, para alguna oportunidad específica puede servir sobre todo porque es totalmente crossbrowser y muy adaptable a lo que necesitemos.

El título perfecto para este artículo es el que le dieron Mariano Amartino y Jeffrey Zeldman: A los hombres les gusta rápido y a las mujeres mejor. Lo es porque básicamente ese el resultado de un informe realizado con el objetivo de distinguir las prioridades que se le dan a la usabilidad web según los géneros.

La conclusión final, disponible en Web Site Optimization es la siguiente:

En un reciente estudio de usabilidad, los investigadores de la Universidad de Southern Illinois encontró que después de la facilidad de uso, los hombres prefieren a la rápida velocidad de descarga. Las mujeres por su parte, además de la facilidad de uso, destacan la fácil navegación . Los investigadores estiman que estos diferentes criterios de utilización se deben a diferencias en la forma en que los hombres y las mujeres usan la web.

Ambos géneros coinciden que el factor más importante es la facilidad de uso, pero como fue comentado, el segundo al que más importancia se le dio estuvo relacionado con la forma en que cada uno usa internet. Las mujeres buscan desarrollar las relaciones, mientras que los hombres utilizan la web para recopilar información, es por esto que la velocidad tiene tanta importancia para estos últimos.

Hablando el otro día con Germán llegamos a una conclusión sobre un fenómeno que pensé sólo me sucedía a mi pero estaba equivocado. Se trata de el breve período de tiempo en que algo que realizamos, en este caso un diseño para un sitio web, nos agrada o nos conforma. Voy a tratar de explicarlo rápidamente.

Comenzamos a diseñar en nuestro editor de imágenes, por ejemplo Photoshop, y al cabo de algunos minutos u horas tenemos nuestro diseño listo. Nos agrada, lo revisamos, lo imaginamos en el navegdor y realmente no agrada. Corregimos detalles durante un tiempo y lo volvemos a mirar. No pasó más de una hora desde el momento en que pensamos que nos encantaba pero ya no lo hace tanto, nos cansó un poco y no nos conforma totalmente.

Después de analizarlo por algunos minutos lo desechamos y comenzamos de nuevo desde cero si haber pasado a la etapa de la maquetación. Esto me pasó muchísimas veces, tal vez muchos diseños que hubiesen gustado los terminé descartando por el simple hecho de que no me terminaron de convencer a pesar de que en un momento si lo hicieron. Entiendo que es algo muy raro, pero sin embargo sucede.

¿Les ha pasado?