El Kindle Fire es el nuevo reto para los diseñadores web

El desarrollo web se pone interesante con la aparición de nuevos dispositivos móviles

Hace unos pocos días salió a la venta el muy anticipado Kindle Fire, el nuevo “lector de libros” de Amazon que además de leer libros es algo así como una tableta.

Y digo “algo así” porque en realidad no es una tableta, competencia del iPad u otras similares, sino es un dispositivo diferente que ocupa un nicho entre el lector antiguo y el iPad, el Xoom, el Galaxy Tab y demás.

Como tal es más limitada. Lo que no es muy limitado es la pantalla, tiene una resolución de 1024 x 600 pixeles, lo que la coloca en la categoría de algunos monitores de 14 o 15″ de antaño. El problema es que su pantalla es de solo 7″, por lo que todo se ve mucho más pequeño.

La resolución de la pantalla del Kindle hace que nuestros sitios web se vean completos, pero la densidad, es decir, el número de puntos por centímetro, es mucho mayor, los pixeles son mucho más pequeño y por tanto todo nuestro sitio se verá más pequeño: tamaño de letra, botones, imágenes, etc.

El experto en usabilidad Jakob Nielsen dejó al Kindle por lo suelos cuando se trata de usar sitios web. De plano recomendó a los desarrolladores a presentar el contenido móvil en un Kindle. El problema es que la pantalla es bastante más grande que un móvil por lo que no estaremos aprovechándola bien.

¡Qué dilema! El Kindle es apenas el primero de una clase nueva de dispositivos: pantallas pequeñas con una gran densidad de pixeles. Además es un dispositivo móvil, así que de todos modos el contexto en que se usará seguramente será muy diferente al de una computadora de escritorio, o incluso un teléfono. Así que estaría mal darle la misma página que le damos a una PC o a un iPhone.

La mejor manera de acercarse al desarrollo de un dispositivo como estos sería usando la característica resolución para un media query en css:

media: screen and (min-resolution: 99dpi);

Esto nos ayudaría a determinar si la pantalla de nuestro visitante es de muy alta densidad y poder así presentarle botones más grandes e imágenes de mejor calidad, y tal vez ocultarle o quitar relevancia a partes que tienen sentido en otro tipo de aparatos pero no en una tableta.

La diferencia entre una pantalla de 10″ y una de 7″ es notoria y presenta nuevos retos para el diseño de sitios web. Foto de Gadgetmac.

Desafortunadamente no tengo un Kindle Fire para probar (se aceptan donaciones 🙂 ) y no sé si aceptará este tipo de media query. Sería lo ideal porque así nos aseguramos que otros dispositivos en el futuro también podrán ver nuestro sitio correctamente.

Si no tendremos que recurrir a métodos un poco más salvajes, como la detección por medio de javascript, lo cual tiene inconvenientes.

Es un reto más para los diseñadores y desarrolladores web. Nos dificulta un poco más el trabajo, pero es parte de lo que lo hace emocionante. Y eso que no mencioné que el usuario puede estar usando el Kindle horizontal o verticalmente.

Bordes para pestañas con CSS

Un efecto muy vistoso que hecho completamente con css, sin usar imágenes ni marcado adicional en el html.

Ever wondered how to create an element that flares into another using only CSS? Here’s a quick tutorial using existing CSS attributes, in combination with CSS generated content, to produce the effect using no images at all, and no additional markup. And it falls back gracefully for older browsers. Flared Borders with CSS – Blog – Ordered List

Bordes en la página usando CSS

En el sitio de John Hicks pueden ver un borde alrededor de la página. Este borde es independiente del ancho de la página y no se mueve si uno se desplaza. Está hecho usando etiquetas <b> alrededor. Pero para Harry Roberts esto es muy poco semántico así que decidió desarrollar una solución para colocar bordes en la página usando solo CSS, sin añadir etiquetas extra al HTML.

Webfonts

Ayer fue un día muy emocionante para todo lo que tiene que ver con diseño web.

En su conferencia para desarrolladores Google presentó un sistema de incrustación de tipografía en una página. En realidad se trata de @font-face solo que servido a traves de los servidores de google.

Google lo ha hecho muy fácil para los diseñadores, apenas hay que añadir una línea para ligar una hoja de estilos desde sus servidores para poder usar lo básico:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

Google se encarga de ver que navegador está pidiendo el estilo y manda el archivo apropiado para cada uno. No tienes que preocuparte por nada más para poder usar tipografía en cualquier navegador moderno, incluso IE6.

Si quieres más control hay un montón de funcionalidad que puedes usar con javascript a través de WebFont Loader, que es una biblioteca de funciones con el que puedes cargar la tipografía y controlar como, donde y cuando se muestran.

No es la primera vez que se hace esto y apenas es una versión beta. Se puede decir que Font Squirrel y Typekit hacen lo mismo y mejor. Font Squirrel inlcuso tiene un generador que permite usar una gran variedad de tipografías. De hecho, en esta comparación puedes ver como en general los otros dos servicios se ven mejor.

Una de las desventajas del sistema de Google es que no es posible visualizarlas en iPad o iPhone por el momento. Pero conociendo a Google es seguro que este servicio será mejorado continuamente, agregarán tipografía y funciones. En cosa de unos meses puede haber cambiado enormemente.

Las tipografías disponibles son pocas, limitadas necesariamente por tener que ser de uso libre, pero han hecho una buena selección. No sería extraño que Google estuviera en pláticas con algunas fundidoras tipográficas o diseñadores para licenciar o crear nuevos tipos.

Seguro habrá una gran adopción en la inmensa cantidad de diseñadores y desarrolladores que no han querido usar un método como Cufon o sIFR, aunque el segundo por lo menos tiene las ventajas de poder usar cualquier tipografía sin problemas de licencias.

La mejor manera de usar @font-face

I’ll circle back to why this is the best possible solution but let’s first review the other techniques’ weaknesses. Of course, the problem at the center of this is that IE needs an .eot font, and the other browsers must take a .ttf or .otf. Bulletproof @font-face syntax « Paul Irish

Ya para ahora todos sabemos que ahora que Firefox sacó su versión 3.5 y Opera su versión 10, se puede decir que la gran mayoría de los navegadores actuales pueden usar @font-face en css para usar cualquier (o casi) tipografía y no sólo las que los visitantes tengan en sus computadoras.

Sin embargo, hay un problema. Internet Explorer usa un formato de archivo diferente y por tanto la declaración debe ser distinta. Paul Irish ha creado una declaración que funciona elegantemente en los navegadores sin tener que usar comentarios condicionales para IE.

Menús multinivel con jQuery y CSS

Lately I’ve seen quite a few requests on Twitter and other places for multilevel menus using jQuery and/or CSS. There are quite a few ways to accomplish this and it largely depends on what your needs are.In the Woods – Multi-level Menus with jQuery and CSS

Muy buenísima recopilación de métodos y técnicas para crear menús multinivel con jQuery y CSS. De pilón también incluye como crear un megamenú muy atractivo. Excelente recurso.

Consejos y recomendaciones para crear pestañas modulares

This article discusses the use of the module tabs design pattern for use in websites and web-based applications. We share with you some best practices to consider when using module tabs, a listing of real-world examples of websites the take advantage of module tabs, as well as tutorials and free downloadable scripts for building and deploying module tabs in your sites.Module Tabs in Web Design: Best Practices and Solutions | Design Showcase | Smashing Magazine

Muy buen artículo de la revista Smashing que, además de no ser una lista de tantis-tantas cosas, explica muy bien lo que son las pestañas modulares, cuando usarlas, cosas a evitar y algunas consideraciones que son mejores prácticas para crear una navegación útil y con sentido lógico. Muy recomendable.

Como ponerle marcos decorativos a las capas

Uno de los retos que surgen cuando se hacen páginas web por medio de capas y css es como poner un marco decorativo o esquinas redondeadas. El reto es mayor cuando se está haciendo un diseño flexible o líquido y el tamaño de la ventana deba ser variable, ajustándose al tamaño de la letra o al de la ventana del visitante.

La manera de hacer eso es mediante el uso creativo de las posiciones absolutas de diferentes capas y sus fondos. Por ejemplo, teniendo el siguiente código:

      <div class="cajabonita">
        <div class="sup-izq"></div>
        <div class="sup-der"></div>

        <div class="caja-externa">
          <div class="caja-interna">
          <p>Por fin, aquí va el contenido de nuestra caja. El ancho de la caja debe variar con el ancho de la ventana del navegador.</p>
          </div>
        </div>

        <div class="inf"></div>
        <div class="inf-izq"></div>
        <div class="inf-der"></div>
      </div>

Hemos creado varias capas dentro de nuestra caja para poder colocar los diferentes segmentos de nuestro marco. Para colocar todo como se debe ponemos el css:

    .cajabonita {
      width: 50%;
      margin: 0 auto;
      color: #000;
      background: url('sup.gif') top repeat-x #fff;
      position: relative;
      border: 0 none #fff;
    }
    .sup-izq {
      width: 80px;
      height: 80px;
      background: url('sup-izq.gif') top left no-repeat #fff;
      position: absolute;
      top: 0; left: 0;
    }
    .sup-der {
      width: 80px;
      height: 80px;
      background: url('sup-der.gif') top left no-repeat #fff;
      position: absolute;
      top: 0; right: 0;
    }
    .caja-externa {
      width: 100%;
      padding: 80px 0;
      background: url('izq.gif') left repeat-y transparent;
    }
    .caja-interna {
      margin-left: 80px;
      padding-right: 80px;
      background: url('der.gif') right repeat-y transparent;

    }
    .inf {
      width: 100%;
      height: 80px;
      background: url('inf.gif') bottom repeat-x #fff;
      position: absolute;
      bottom: 0;
    }
    .inf-izq {
      width: 80px;
      height: 80px;
      background: url('inf-izq.gif') top left no-repeat #fff;
      position: absolute;
      bottom: 0; left: 0;
    }
    .inf-der {
      width: 80px;
      height: 80px;
      background: url('inf-der.gif') top left no-repeat #fff;
      position: absolute;
      bottom: 0; right: 0;
    }

Como ves primero posicionamos nuestra caja principal de manera relativa para después poder posicionar las esquinas de manera absoluta dentro de esta caja. Como tenemos un fondo para el lado izquierdo y otro para el lado derecho necesitamos poner dos cajas, una encima de otra. Las imágenes de las esquinas deben tener el mismo alto que las imágenes de los bordes superior e inferior y el mismo ancho que las imágenes de la izquierda y derecha. Mira el ejemplo terminado.

Este código funciona en Firefox, Safari, Opera e IE7. El único que tiene un problema menor es IE6 que pone los fondos inferiores un pixel arriba de donde debería. Esto tal vez se pueda arreglar mediante comentarios condicionales o con una elección de colores que haga que no se note.

Ten en cuenta que esta puede no ser la mejor forma de lograr este efecto ya que estamos añadiendo varias capas sin contenido y sin ningún significado particular dentro de la página. Una mejor solución podría ser añadir las capas adicionales mediante javascript para que nuestro código html quede más legible.

CSS3 incluye varias nuevas propiedades para bordes y fondos múltiples que pueden hacer que esta técnica quede inútil, pero mientras tanto te puede ayudar en algo.

Actualización

En Foros del Web Mikmoro me señala un par de técnicas más. La primera usa solo una imagen y la segunda requiere de cuatro. El primer caso ingeniosamente acomoda las capas de las esquinas y usa las propiedades para posicionar el fondo (bottom left, top left, etc.) según se requiera para cada esquina. En el segundo ejemplo cada esquina tiene su fondo.

Obviamente es mejor usar el menor número de imágenes, clases y capas en el código, reducirlos lo más posible para facilitar su manejo y mantenimiento. El único inconveniente con las técnicas de Mikel es que, aunque puedes hacer las capas flexibles o líquidas, el tamaño máximo que pueden tener es algo más que el del alto y ancho de las imágenes de fondo. Más allá se rompe el efecto del borde.

Esto no necesariamente es importante y si haces las imágenes de buen tamaño (un borde de colores comunes en gif no debe pesar demasiado) el efecto funcionará para cualquier capa de dimensiones prácticas. Esto será lo preferible en la mayoría de los casos.

Por otro lado, si necesitas que el efecto rodée enormes áreas sin tener que preocuparte por el alto o ancho que puedan llegar a tomar o por hacer imágenes grandes, entonces la técnica de aquí será mejor.

Técnica CSS para pies de página

El buenazo de Paul Boag nos remite una técnica muy interesante usada por Ed Merrit, uno de sus diseñadores en Headscape, para hacer pies de página fijos sin javascript, que se queden hasta abajo de la ventana si el contenido es corto, pero que se muestren abajo del contenido si éste es largo.

Usando las propiedades position: fixed; bottom: 0; puedes lograr que el pie de página se quede anclado a la parte inferior de la ventana, pero no se moverá con el contenido si éste es más alto que la ventana. Generalmente el problema se resuelve usando javascript: lees la altura del contenido, lo comparas contra la altura de la ventana y aplicas el posicionamiento que corresponda.

Sin embargo no siempre es conveniente usar javascript ya que puede estar deshabilitado, es una lata asegurarse que funcione en todos los navegadores y siempre es más recomendable resolver un problema de presentación usando css puro.

La técnica mostrada es puro css y dice como sigue:

html


<div id="contenedor">
<div id="contenido"></div>
<div id="pie"></div>
</div> 

O sea, creamos una capa que rodée al contenido y al pie.

css


*, body {margin: 0; padding: 0;}
#contenedor {display: block; position: absolute; min-height: 100%;}
#contenido {display: block; margin-bottom: 3em;}
#pie {position: absolute; display: block; bottom: 0; height: 3em } 

Si tienes experiencia usando css seguro que habrás pensado “¡ajá! esto no va a funcionar en IE6” y tienes razón.

Para que funcione hay que poner:

body, #contenedor {height: 100%;}

de preferencia en una hoja de estilos separada llamada mediante comentarios condicionales.

Y ahí lo tienen, eso es todo. Hay algunas consideraciones que se cubren en la página original, pero los invito a experimentar con esta técnica.

Los usos y desusos de blockquote

Una de las ventajas más grandes de usar los elementos de html de manera correcta está en que puedes identificar rápidamente las diferentes secciones de texto y a que parte corresponden. Sin embargo no todos los desarrolladores conocen la manera correcta de usarlos.

Entre los elementos más incomprendidos está blockquote. Muchos, muchos desarrolladores lo usan para darle un margen mayor a un párrafo, siendo que en realidad este elemento debe servir para indicar que un párrafo proviene de una cita textual de otra fuente.

Por ejemplo, si estamos citando de un libro:

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lantejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda.

Es importante que la diferencia quede clara porque, sí, si no aplicamos estilos habrá un margen mayor del lado izquierdo en casi todos los navegadores, pero aplicándole estilos a blockquote podemos hacer que ese bloque de texto tenga cualquier característica:

El resto della concluían sayo de velarte, calzas de velludo para las fiestas, con sus pantuflos de lo mesmo, y los días de entresemana se honraba con su vellorí de lo más fino. Tenía en su casa una ama que pasaba de los cuarenta, y una sobrina que no llegaba a los veinte, y un mozo de campo y plaza, que así ensillaba el rocín como tomaba la podadera.

Lo más importante es que en el código estos párrafos siguen identificados como una cita textual y la podemos tratar como corresponde e identificarlas rápidamente. Un elemento adicional que pertenece dentro de este elemento es cite. Con éste hacemos la aclaración de donde proviene la cita:

Frisaba la edad de nuestro hidalgo con los cincuenta años; era de complexión recia, seco de carnes, enjuto de rostro, gran madrugador y amigo de la caza. Quieren decir que tenía el sobrenombre de Quijada, o Quesada, que en esto hay alguna diferencia en los autores que deste caso escriben; aunque por conjeturas verosímiles se deja entender que se llamaba Quijana. Pero esto importa poco a nuestro cuento: basta que en la narración dél no se salga un punto de la verdad.
El ingenioso hidalgo Don Quijote de la Mancha

El último elemento es la simple y sencilla q. La q la usamos cuando queremos hacer una cita corta dentro del mismo párrafo. Internet Explorer no agregará comillas automáticas, todos los demás navegadores sí. Como el viejo decía: Si las cosas que valen la pena se hicieran fácilmente, cualquiera las haría. Esto distingue el texto citado del resto tanto de manera visual como en el código. Incluso la podemos usar dentro de otra cita:

…porque la claridad de su prosa y aquellas entricadas razones suyas le parecían de perlas, y más cuando llegaba a leer aquellos requiebros y cartas de desafíos, donde en muchas partes hallaba escrito: La razón de la sinrazón que a mi razón se hace, de tal manera mi razón enflaquece, que con razón me quejo de la vuestra fermosura.
El ingenioso hidalgo Don Quijote de la Mancha

¿Qué hacemos entonces si necesitamos distinguir un párrafo que no es una cita textual? Simplemente creamos una clase para ese párrafo y le aplicamos estilos. En estos ejemplos estoy creando estilos en la línea, pero lo mejor es aplicarlos en una hoja de estilos separada. Recuerda que es preferible que los nombres de las clases digan porqué es importante el elemento, no como se va a ver.

Correcto: class="nota", class="advertencia", class="pocoImportante"
Incorrecto: class="fondoRojo", class="orilladoalaorilla", class="fonditoAzulChiclamino"

Este párrafo no es una cita, pero su importancia, relevancia, agudo ingenio y encanto precisan que se le dé una presentación especial de buen gusto y mejor vestir.

Finalmente la importancia de mantener el buen uso de blockquote, cite y q está en que estos elementos de html nos permiten mantener nuestro código limpio y fácil de leer, y eso lo apreciaremos a la hora de hacer cambios.

Creando una página usando capas con Dreamweaver

Crear un sitio que use capas y css tiene un gran número de ventajas, pero muchos no saben como hacerlo. Presento aquí un video-tutorial usando Dreamweaver.

De Robertobaca.Net

Además de ser código válido y semántico, programar con capas nos permite desarrollar y cambiar nuestras páginas de manera muy rápida. Podemos ahorrar mucho tiempo sobre todo a la hora de cambiar el sitio o agregar nuevas secciones.

Desafortunadamente a muchas personas todavía se les enseña a crear sitios usando tablas y dejando toda la programación al editor, como Dreamweaver, lo cual produce código muy difícil de leer y mantener. Incluso en el modo de diseño adiciones o cambios posteriores al diseño se hacen muy difíciles.

Si hasta ahora no has tenido oportunidad de ver como se crea un sitio con capas, espero que este video tutorial te lo deje un poco más claro.

Imágenes que se estiran

Una de las cosas agradables de programar usando diseños flexibles es que las cosas se ajustan al tamaño de la ventana del usuario, independientemente de la resolución de su monitor. Pero a veces las imágenes dan problemas… De Robertobaca.Net

Las imágenes suelen tener una sola resolución y si tienes una imagen que debe ocupar 200 pixeles en tu encabezado de 800 pixeles para que se vea bien y no rompa el diseño puede ser difícil hacer un diseño flexible que se ajuste.

Por lo general nuestro código se verá así:

<div id='encabezado' style='width: 100%;'>
<img src='imagen' align='left' width='200' />
Bienvenidos a mi sitio
</div>

Y eso puede funcionar bien a cierta resolución, pero si hacemos la pantalla más chica o más grande, la imagen ocupará un área mayor o menor de la que queremos. Pero hay una manera de solucionarlo:

<div id='encabezado' style='width: 100%;'>
<div id='imagen' style='width: 25%; float: left;'>
<img src='imagen' style='width: 100%;' />
</div>
Bienvenidos a mi sitio
</div>

Como ves, he puesto la imagen dentro de otro div que tiene un ancho de 25% flotado a la izquierda y la imagen tiene un ancho de 100%, y el 100% de 25% es 25%.

Patos

Claro, para mejores resultados ocupa una imagen cuya resolución original sea lo bastante grande para verse bien incluso en tamaños grandes. Sin exagerar para que no sea demasiado pesada.