Consejos para desarrollar webs para móviles

Escribo este post porqué quiero compartir con vosotros una serie de consejos para facilitaros la vida a la hora de desarrollar una web para el móvil.

Yo soy partidario de desarrollar webs para el móvil antes de programar una aplicación para iphone o android, puede que no se aprovechen todas las características del móvil pero ahorras tiempo de desarrollo ya que la misma web es compatible para todos los móviles que tengan un navegador aceptable y además no tienes que saber más allá del HTML, CSS y javascript.

Continuar leyendo »

Incrustar imagenes en el HTML

Una técnica que aprendido cuando he hecho php ftp light, ha sido la de inscrustar las imagenes en el HTML para tener el script y las imagenes en un sólo fichero.

Para eso tenemos primero tenemos que codificar el contenido de la imagen a base64, por ejemplo:

echo base64_encode( file_get_contents( ‘imagen.png’ ) );

Luego para mostrar la imagen codificada tenemos las siguientes maneras:

CSS:

background-image:url(data:image/png;base64,–contenido_imagen_codificado_base64)

IMG:

<img src=”data:image/png;base64,–contenido_imagen_codificado_base64“>

Destripando sprites

Hace ya un tiempo comenté una técnica para acelerar la carga de una web uniendo todas las imagenes (iconos) del sitio en una sola imagen.

Esta técnica se usa en muchos sitios como por ejemplo:

• Facebook
• Flickr
• Youtube
• Linkedin
• Tuenti
• 11870
• Google

Estructura ideal para una hoja de estilos CSS

1. Remplazar estilos base:
   empezando por elementos de fuera hacía dentro del body
   * {
   font-family:verdana;
   font-size:11px;
   }

   BODY {
   background:#E2EBF5;
   margin:0;
   }

   IMG {
   vertical-align:middle;
   }

2. Atajos:
   .floatR {
   float:right;
   }

   .floatL {
   float:left;
   }

   .clear {
   clear:both;
   }

3. Clases del layout ( del diseño ):
   • contenedor global
   • header
   • navegación
   • contenido
   • footer
4. Por último el resto de clases:
   y si puede ser mejor agrupadas por bloques
   • /* formularios */
   • /* pestañas */

Expermiento CSS para cargar más rápido

La idea consiste en agrupar todas las imagenes que tengan un tamaño parecido, para reducir el número de llamadas HTTP.

Por ejemplo, los iconos de la siguiente imagen tienen un tamaño aproximado de 16×16 pixeles:

Código CSS:

#primer_icono{
background:url(grupo_iconos.png) no-repeat scroll 0 0;
}
#segundo_icono{
background:url(grupo_iconos.png) no-repeat scroll 0 -16px;
}
#tercer_icono{
background:url(grupo_iconos.png) no-repeat scroll 0 -32px;
}

Código HTML:

<img src=”imagen_transparente.gif” id=”primer_icono”/>
<img src=”imagen_transparente.gif” id=”segundo_icono”/>
<img src=”imagen_transparente.gif” id=”tercer_icono”/>

Resultado:

Lo podéis ver en GoTube

Descargar ejemplo:

Curiosidad:

Puede que con este ejemplo al tener pocos iconos no se noté la diferencia en el tiempo de carga, el ejemplo es para enseñar la técnica, pero si se nota con agrupaciones de muchos iconos.

La siguiente imagen se usa en GoTube: