Miquel Camps Orteza

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.

Leer más

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“>

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

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 */

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:

[file]http://miquelcamps.com/upload/acelerar_web_css.zip[/file]

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:

La mayoría de veces, nos gustaría evitar que roben ciertas partes de nuestro diseño, especialmente las imagenes (ej. logotipos)

A continuación podrás ver la parte técnica, pero si prefieres ir al grano, al final de este tutorial encontrarás un ejemplo para descargar.

Demostración:

Intenta hacer “guardar imagen como” en el logotipo de viciao2k3

Imagen normal:

Código HTML:

<img src=”directorio/imagen.gif”>

Imagen protegida:

Código HTML:

<img src=”directorio/blank.gif” id=”imagen” height=”100″ width=”100″>

Nota: para que se muestre la imagen completamente es importante definir la altura y la anchura de la imagen

Código CSS:

#imagen{background:url(‘directorio/imagen.gif ‘)}

¡ Nada más !

¿Como aplicarlo en wordpress?

La imagen que quieras proteger y la transparente, tienen que estar en el directorio:
/wp-content/themes/tu_theme_activo/images/

Código CSS:

#imagen{background:url(‘images/imagen.gif ‘)}

Copia el código anterior en la hoja de estilos:

/wp-content/themes/tu_theme_activo/style.css

Modifica el código HTML de tu theme:

<img src=”/wp-content/themes/tu_theme_activo/images/imagen.gif”>

Por:

<img src=”/wp-content/themes/tu_theme_activo/images/blank.gif” id=”imagen” height=”100″ width=”100″>

Notas:

1. Si quieres proteger varias imagenes no repitas el mismo id.
2. Especifica la altura (height) y la anchura (width) de la imagen a proteger en la etiqueta <img
3. Si tu blog esta alojado en un sub-directorio (ej. miquelcamps.com ), tendrás que poner:
   <img src=”/blog/wp-content/themes/tu_theme_activo/images/blank.gif” id=”imagen” height=”100″ width=”100″>

Nota: es muy importante enlazar bien la imagen, si introduces una dirección errónea la página tardará más en cargar

Como todo, tiene su parte buena y mala:

• La buena:
  Cuando intenten hacer “guardar imagen como…” se descargaran la imagen transparente
• La mala:
  Es posible que los buscadores indexen la imagen transparente

Descargar ejemplo:

[file]http://miquelcamps.com/upload/howto/proteger-imagen.zip[/file]

Si al validar tu CSS te sale esto:
“Color de primer plano y color de fondo iguales en dos contextos”

añade a la clase que falla:
[css]background-color:inherit;[/css]

puede que sea una chapucilla, pero ahora ya no tengo advertencias

si sois diseñadores web, con firefox 2 y internet explorer 7 no os teneis que preocupar por las transparencias alpha.
Pero la cosa cambia en internet explorer 6, en este ulitmo los pngs aparecen con un fondo de color y no precisamente el transparente

Para ello hay 2 soluciones, mediante CSS o con un javascript.

yo recomiendo hacerlo mediante CSS ya que he notado que en javascript las sombras no aparecen, pero la pega es que en css tienes que crear un estilo para cada elemento que contenga un PNG

ejemplo para el metodo css:

en el css principal tengo:
[css]#logo{
width:343px;
height:268px;
position:absolute;
z-index:2;
left:2%;
top:18px;
background:url(images/gafelogo.png) no-repeat;
}[/css]

y en un fichero png.css el siguiente codigo:

[css]#logo{
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’/wp-content/themes/satori/images/gafelogo.png’);
}[/css]

luego para que solo se aplique en Internet explorer 6 poner esto antes de la etiqueta </head>:
[html][/html]

pasos para el metodo con javascript:

1. descargar fichero pngfix.js
2. subir al servidor
3. poner el siguiente codigo en el header de tu theme, antes de la etiqueta </head>:
   [html][/html]

programa para exportar imagenes a png?

MeTaL_oRgY de la web metal.ize me recomendo el Adobe Fireworks CS3

curiosidades:

el logo y la mascota de la cabecera son pngs, los guarde directamente en el formato Fireworks PNG, grave error por mi parte, no cometais el mismo error

¿Porque digo error?

• Los PNGs no son transparentes ni con el javascript mencionado anteriormente
• ocupan mucho mas pongo mi caso:
  • letras viciao2k3 antes: 67.83 KB, ahora en png plano 5.38 KB
  • logotipo antes: 91.2 KB, ahora en png plano 12.9 KB

pasos para guardar en png plano y con transparencia alpha:

1. cuando salga la ventana de guardar como…, seleccionamos el formato png plano
2. se activara un boton opciones, pulsamos sobre el
3. nos aseguramos que esta en PNG-8
4. Luego abajo encontrareis en una casilla de seleccion, por defecto Sin transparencia, lo cambiais a Transparencia alfa

¿te gustan las fuentes pixeladas?
¿pensabas que no habia algo mas pequeño en css que font-size:xx-small ?

copia la siguiente classe en tu fichero de estilo css:
.pixelfont{font-family:small fonts; font-size: 7px; letter-spacing: 0px; line-height: 10px;text-transform: uppercase;}

texto plano:
[css]el veloz murciélago hindú comia feliz cardillo y kiwi[/css]

ejemplo:
el veloz murciélago hindú comia feliz cardillo y kiwi