DOTTO

Tipografía web:
facilitar la lectura de contenido.

El principal motivo de ser de una tipografía es ser leída, por lo cual además de seleccionar la adecuada para ello, debemos definir una estructura que facilite el proceso de lectura. En temas anteriores hemos hablado de cómo el cerebro percibe la información y esta es interpretada como un todo; ahora toca turno de emplear esos principios para hacer nuestro contenido más digerible.

- Leer mas

Tipografía web:
elegir la fuente correcta

El principal motivo por el que un usuario accede a un sitio web, es porque necesita obtener información. Si el texto que le presentamos es difícil de leer es poco probable que este continúe navegando el contenido para buscar otros temas de interés. Uno de los principales factores que pueden afectar la legibilidad de nuestro contenido está ligado a la fuente que apliquemos. Durante esta publicación hablaremos sobre los aspectos a considerar para elegir una tipografía de fácil lectura y además que nos permita comunicar adecuadamente.

- Leer mas

Menú de navegación
con transiciones

Ahora que la mayoría de los navegadores comienza a tener un mejor soporte para las transiciones de CSS3, nos permite aplicar estas propiedades para jugar con el diseño e interacción de elementos en nuestros sitios, a pesar de que no todas las propiedades son soportadas de la misma manera con la ayuda de preprocesadores podemos crear nuestros estilos y lograr el mejor soporte posible. En esta ocasión utilizaremos las transiciones para animar el menú de navegación.

- Leer mas

Extensiones de CSS
y preprocesadores.

Quizás una de las tareas más tediosas de desarrollar un sitio o una aplicación web, se encuentra e la maquetación del mismo, dependiendo del tamaño del sitio, la cantidad de elementos que contenga, el comportamiento que tendrán los elementos con la interacción del usuario, las queries que hacen nuestro sitio adaptable a diversas resoluciones de pantalla y el sin fin de estilos que hagan posible que el sitio sea percibido como lo planeamos, terminaremos con un archivo CSS de unas cuantas miles de líneas de código. Esto hace que fácilmente podamos cometer errores y sobre escribir estilos innecesariamente. Detalles que parecen insignificantes, pero afectan el tiempo que le toma al navegador aplicar los estilos correspondientes y resulta en una sensación de carga lenta. ¿De que manera podemos evitar este inconveniente?

- Leer mas

Alternativa a
CSS Sprites

splash

Anteriormente hemos mencionado que cuando queremos insertar iconos en nuestros sitios, usar una imagen que contenga todos los elementos que necesitamos (sprites) es una buena opción para ahorrar peticiones http al servidor, pero con la llegada de nuevos dispositivos con pantallas con alta densidad de pixeles, nuestros iconos pueden verse demasiado pequeños o perder calidad. Podemos recurrir a manejar distintas versiones de nuestros iconos en diferentes tamaños o colores, pero estamos duplicando contenido que ya poseemos. ¿Cómo podemos evitar el duplicado de archivos y tener uno solo que nos permita tener un balance entre tamaño de archivo y calidad?

- Leer mas

Optimizar nuestros
sitios web

En el desarrollo web, además de cuidar que las páginas que creamos se vean bien en la mayoría de los dispositivos y que la interfaz sea agradable y fácil de explorar para los visitantes, también se debe tener en cuenta el tiempo que toma cargar todos los elementos de nuesto sitio. Anteriormente hemos mencionado que es importante optimizar el rendimiento de las páginas que creamos, ahora toca turno de explorar algunas técnicas y consejos para hacer esto posible, esperando que les sea útil.

- Leer mas

Filtros en
CSS

Los filtros en CSS, como su nombre lo indica, nos permiten aplicar filtros a elementos de nuestra página, similares a algunos que nos permiten realizar aplicaciones de diseño gráfico. Pero, ¿para qué aplicar filtros desde una hoja de estilo a una imagen si puedo crear un elemento con el filtro y utilizarlo? Cierto, si el elemento no sufrirá ningún cambio con la interacción del usuario una imagen con un filtro desde PhotoShop hace el trabajo.

Y qué si nuestra interfaz requiere de un elemento que al pasar el cursor sobre ella esta tenga otra tonalidad, podemos cambiarla por otra en el evento “mouseover”, pero recordemos que lo importante es optimizar el rendimiento de nuestro sitio y minimizar el número de peticiones a nuestro servidor. También podemos optar por utilizar sprites y generar una mosaico con nuestras imágenes normales y las que tienen filtro, ¿y si las imágenes son demasiado grandes? ¿Resultará eficiente tener ese mosaico?

- Leer mas

El tamaño de texto
en el diseño web

Si han experimentado con el diseño web responsivo, en algún punto deben haber notado que al desarrollar una maquetación fluida del contenido, se presenta un problema mayor que generalmente no se contempla al principio. A pesar que nuestros elementos se encuentren ubicados donde lo planeamos, el texto, en específico sus dimensiones, nos darán una sorpresa.

Ya sea si se trata de una página web con dimensiones fijas o una con dimensiones fluidas, el tamaño del texto será relativo a la pantalla del dispositivo. Debido a eso, si tenemos definido un tamaño de texto en pixeles, la fuente será visualizada correctamente en dispositivos donde la densidad de pixeles sea normal (pixeles perceptibles a la vista) pero en dispositivos móviles, esa misma fuente resultara diminuta y de difícil lectura para quien visite nuestro sitio.

- Leer mas

Sprites con
CSS

En la publicación anterior mencionamos que una forma de ahorrar ancho de banda y reducir las peticiones a nuestro servidor desde los navegadores, es la utilización de sprites. Es una forma de optimizar una página para que el contenido cargue de manera más rápida. Pero se quedó sin mayor explicación; ahora trataremos un poco este concepto y el modo de emplearlo, verán que es de mucha utilidad y que se pueden hacer cosas interesantes con ello.

- Leer mas

Entendiendo el diseño
web responsivo – PARTE 1


Anteriormente habíamos mencionado el motivo que originó las técnicas del diseño web responsivo, ahora toca turno hablar sobre cómo funcionan estas técnicas a detalle. Lo haremos lo más digerible posible para no perdernos en el texto. Si queda alguna duda ó esta interesado en más detalles acerca de cierta parte, agradecemos un comentario al respecto.

- Leer mas