diseño gráfico / identidad / hosting

Técnicas avanzadas de navegación en masa

Mayo 12th, 2009

En este artículo vamos a ver una técnica compuesta para navegación masiva.

Hay situaciones en las que queremos abrir una gran cantidad de links. Por ejemplo, recorriendo una galería de imágenes (la situación mas común) o cualquier tipo de contenido

En estos casos generalmente se nos presenta la posibilidad de hacer click en “siguiente” para ir viendo cada imagen. Pero de esta forma tenemos que esperar a que se cargue la imagen, mientras que esta se podría haber estado cargando en el tiempo que estábamos mirando la imagen anterior.

Cuando se nos presenta un link como este http://wwww.page.com/imgs/024.jpg, si somos atentos nos daremos cuenta que el nombre de archivo de la imagen es un numero. Y que sucede si cambio 024.jpg por 023.jpg? Eureka! Hay más imágenes. Esta es una forma bastante humilde de ingeniería inversa; poniéndonos en la mente del webmaster, seria ilógico tener una imagen que se llame 024.jpg si no existiesen imágenes anteriores.
Leer el resto del artículo »

Mouse gamer para diseñadores

Mayo 4th, 2009

Teclado y mouse son dos formas básicas de “input” que cualquier usuario tiene para comunicarse con su computadora.

Para los gamers, la precisión y respuesta de estos dispositivos es aún mas importante que para el usuario común. Si bien existen teclados gamers, más importante aún es el mouse, la forma principal de comunicación en la mayoría de los juegos competitivos.

En el diseño también existen tareas que requieren usar el mouse intensivamente y como herramienta de precisión y los diseñadores podemos beneficiarnos de las propiedades de los mouse gamers.

Los beneficios principales son:
Leer el resto del artículo »

Diseño web para celulares

Abril 25th, 2009

La internet puede ser accedida de varias formas, la más común y esperada de ellas es a través de una computadora. Pero también existe la posibilidad de acceder a través de un celular, smartphone, PDA… podríamos resumirlo como “cualquier dispositivo portable con capacidad de acceder a internet”

En el caso de los smartphones más recientes, la internet para ellos es simplemente la internet… la cual debe ser observada de cerca para poder experimentar en su verdadera naturaleza. Es como si tuviésemos un monitor normal, pero tuviésemos que ver las cosas a través de un rectángulo de 12cm*6cm. En otros casos, el “zoom” no ocurre. Y en el caso de celulares mas viejos que usan WAP, la página puede ni siquiera verse.

Frente a la realidad de que nuestro sitio web puede ser accedido por celulares, tenemos básicamente 4 opciones:

  1. No hacer nada
  2. Sacar los estilos CSS y entregar XHTML inalterado
  3. Usar CSS especifico para handhelds
  4. Generar una página aparte específica para usuarios handheld

Cada situación tiene sus pros y sus contras que pueden leer a fondo en la segunda parte del artículo Mobile Web Design: Methods to the Madness de Cameron Moll.

En este artículo vamos dar una introducción a la tercera opción: Usar CSS especifico para handhelds.
Leer el resto del artículo »

800×600, resoluciones de pantalla y el ancho de la Internet

Abril 17th, 2009

Bien, si estas leyendo esto, presumo que estas mirando un monitor (excepto que hallan impreso este articulo). Este monitor esta mostrando pixeles, pequeños “cuadraditos” que forman las imágenes y básicamente todo lo que puede llegar a mostrar tu monitor.

Pero… y cuantos pixeles esta mostrando tu monitor? Ha! Eso depende de la resolución de pantalla, y eso se determina en las opciones del sistema operativo que estés usando.

Sin ir demasiado profundo en el tema, podemos establecer que existen resoluciones comunes y que éstas pueden ser clasificadas según la relación entre el ancho y la altura del monitor, como pueden ser 4:3, 16:10, 5:4, etc.

Cuando uno nombra una resolución, generalmente especifica el ancho y el alto, por ejemplo: 800×600, 1024×768, 1440×900, 1280×960, 1680×1050, etc. (unas cuantas mas)

Pero a la hora de ver una página web, el dato que mas nos importa es el ancho en pixeles. Si bien el alto determina cuanto vamos a poder ver en determinado momento, siempre podemos scrollear hacia abajo y es algo a lo que estamos acostumbrados. A lo que generalmente no estamos tan acostumbrados, y no resulta para nada satisfactorio, es a scrollear horizontalmente (hacia la derecha)
Leer el resto del artículo »

Agregar links de social bookmarking a wordpress

Abril 9th, 2009

Los “links de social bookmarking” se representan generalmente en la forma de pequeñas imágenes al final de un post de wordpress. Estas imágenes son links que automáticamente agregan el artículo en el cual se presiono la imagen a algún sistema de rating y categorización de páginas, como puede ser digg, stumbleupon, etc.

Al tener estos links le facilitamos al lector la acción de agregar la página y también le recordamos que existe esta posibilidad, aumentando las probabilidades de que el lector tome acción.

Sistemas como stumbleupon, digg, etc, nos ayudan ya que aumentan el trafico y la exposición de nuestros artículos.

Si bien ya existen plugins para wordpress como AddThis y ShareThis que cumplen con este cometido, nosotros vamos a tomar el camino mas complicado pero eventualmente más efectivo. Por qué no usar plugins como estos? Requieren registración (tedioso) y al final del día no sabemos realmente que código se esta ejecutando en nuestra página, no sabemos si se esta recolectando información de nuestros usuarios, etc. Al tomar el camino más difícil estamos en realidad simplificando la situación.
Leer el resto del artículo »

¿Que es RSS y para que me sirve?

Abril 1st, 2009

RSS icon Pixeina version

RSS es una abreviación que significa “Rich Site Summary” o “Really Simple Syndication”. Es muy normal encontrar por toda la web iconos como estos… pero, que significa?

RSS es un formato por el cual uno puede recibir los últimos cambios en sitios de contenido. Imaginemonos que uno generalmente va a alistapart.com, gametrailers.com y mattcutts.com para revisar si hay algo nuevo para ver. Cuando llegamos a alistapart.com vemos que no hay nada nuevo, cuando vamos a gametrailers.com vemos que hay dos videos nuevos pero realmente no nos interesan, y cuando vamos a mattcutts.com vemos un articulo nuevo que nos interesa y lo leemos. Pero en todo ese proceso perdimos tiempo yendo a 3 sitios diferentes solo para enterarnos que en 2 de ellos había contenido nuevo, y que solo en 1 de ellos había algo que nos interesaba.
Leer el resto del artículo »

La importancia de XHTML y CSS válidos

Marzo 29th, 2009

Vamos a analizar dos ejemplos, o mejor dicho, un resultado al cual se llegó de dos formas diferentes.

Los dos ejemplos en cuestión son The big company CSS y The big company Tables, dos simples páginas que fueron creadas para este articulo. Al compararlas entre sí, a simple vista no existen mayores diferencias entre una y otra más allá de algunas posiciones y tamaños diferentes.

Sin embargo las diferencias son grandes, y mientras una de ellas fue estructurada teniendo en cuenta los estándares principales de diseño web, la otra está estructurada utilizando métodos arcaicos y actualmente obsoletos.
Leer el resto del artículo »