Los CSS Sprites es una sencilla y efectiva técnica de CSS que nos permite ahorrar ancho de banda.

Realmente los sprites son imágenes que contienen varias imágenes y se muestran gracias a diversas técnicas que nos permiten recortarlas.

Inicialmente se utilizó en el desarrollo de videojuegos debido a su versatilidad a la hora de realizar animaciones, hoy también nos lo encontramos como una técnica CSS que nos permite ahorrarnos ancho de banda.

Gracias a esta técnica podemos reducir considerablemente el peso de nuestra aplicación web y lo que es más importante el número de peticiones HTTP, estas dos ventajas nos permiten reducir el tiempo de carga de nuestra aplicación web y reducir la carga en el servidor.

¿Cómo aplicar esta técnica?

Únicamente tenemos que utilizar las propiedades CSS que nos permiten alterar el alto y ancho (height, width), de este modo podemos recortar una imagen que mostraremos como background, además necesitaremos modificar las propiedades de background-position para desplazarnos por la imagen original y mostrar la zona deseada.

Pequeño tutorial para comenzar a utilizar esta técnica.

¿Cuándo utilizar esta técnica?

Debemos de tener en cuenta qque cada vez que nuestra aplicación web llama a imágenes, hojas de estilos, archivos javascripts lo que realmente estamos haciendo son peticiones HTTP que se solicitan de manera individual y aumentan la transferencia y el tiempo de carga.

En primer lugar debemos utilizarla si tenemos un número elevado de usuarios y nuestro servidor alcanza picos de carga altos, también sería conveniente su uso en aplicaciones web que tengan un gran número de imágenes de tamaño pequeño.

El concepto principal a tener en cuenta es que debemos tener cuidado con la suma del tamaño de los archivos externos, no es lo mismo cargar 15 elementos de 10 KB que un único elemento de 150 KB, en el segundo caso la carga sería considerablemente más ligera.

La explicación a esta última afirmación es que al cargar un alto número de elementos estamos realizando peticiones HTTP que incluyen cabeceras y que a su vez vienen acompañadas por cookies (las cookies son relativamente ligeras pero los usuarios navegan con conexiones asimétricas dónde la velocidad de subida es muy inferior).

Por lo tanto podemos llegar al caso en el que las cabeceras de los archivos pesen más que los propios archivos y a menudo la carga que ello representa en el servidor se duplica.

Ejemplos prácticos

Yahoo utiliza esta técnica para mejorar el rendimiento, el principal motivo es el gran número de pequeñas imágenes que utilizan para identificar cada uno de los servicios.

Disponemos de un gran número de etiquetas HTML pero a menudo utilizamos sólo un pequeño porcentaje, no siempre con un "<div>" o con un "<span>" podemos solucionar todos nuestros pequeños problemas de HTML.

Vamos a ver 10 etiquetas raras, algunas de estas etiquetas no las conoceréis pero otra seguro que las usais a menudo, personalmente no conocía algunas... <abbr>, <address>, <acronym>.

Las 10 etiquetas más raras

1. <wbr>

Ajuste de línea condicional, es muy desconocida y su nombre es debido a la palabra "word break" o "word wrap", es muy útil cuando un texto es demasiado largo, esta etiqueta romperá la línea si lo considera necesario y añadirá un salto de línea, evitando el incómodo scroll horizontal.

2. <abbr>

Nos permite mostrar algún texto de manera abreviada, de tal modo que al aplicarle un "title" podremos ver su nombre completo al pasar el ratón por encima.

3. <label>

Debería acompañar a cada uno de los campos de un formulario, son muy útiles de cara a la accesibilidad de los mismos y en el caso de los "checkbox" y "radio buttons" son fundamentales.

4. <ins><del>

Suelen utilizarse juntas y su objetivo es remarcar las posibles revisiones de un texto tachando la palabra a omitir y subrayando la nueva palabra.

5. <address>

Esta etiqueta permite marcar direcciones en el HTML y ademas estilizarlas fácilmente con un simple CSS.

6. <acronym>

Parecida a <abbr>, nos permite definir la palabra/s etiquetada/s al pasar el ratón por encima.

A pesar de disponer de un gran número de etiquetas HTML tendemos a utilizar sólo un pequeño porcentaje porque creemos que con un "<div>" o un "<span>" todo esta solucionado.

En SitePoint nos recuerdan 5 etiquetas olvidadas en un gran número de diseños.

<label>

Debería acompañar a cada uno de los campos de un formulario, son muy útiles de cara a la accesibilidad de los mismos y en el caso de los "checkbox" y "radio buttons" son fundamentales.

<fieldset> y <legend>

Agrupa controles en un formulario. Esto permite agrupar temáticamente los controles de un formulario, haciéndolo más fácil de entender y rellenar para el usuario.

<optgroup>

Permite agrupar opciones dentro de un "select".

<dl>, <dd> y <dt>

<dl> define una lista y una lista está compuesta por términos (<dt>) y descripciones (<dd>). El tipo más común de lista es estructurado por una secuencia de términos y descripciones, donde cada descripción es asociada visualmente a un término.

<q> y <cite>

Contiene una cita o referencia a otro recurso.

Hace 6 meses Google decidió cambiar su favicon despues de utilizar el mismo durante 8 años, pues el cambio le ha durado muy poquito ya que han vuelto a cambiar el favicon.

En su día Marisa Mayer, vicepresidenta del buscador, apuntó que se han llegado a realizar hasta 300 bocetos y extraña que haya durado tan poco tiempo.

En el diseño ahora sustituido la G original pasaba a ser una g minúscula y ahora ha pasado a ser una "g dibuja con diferentes figuras".

Estas fueron algunas de las anteriores propuestas, como se puede apreciar el actual nuevo favicon no estaba en esa lista.

Es un hecho que aún hoy en día la gran mayoría de páginas webs no son válidas, los blogs son buen ejemplo de ello, mucho se habla de los estándares web son un conjunto de recomendaciones de la World Wide Web Consortium (W3C) y otras organizaciones internacionales.

El principal objetivo de validar tu sitio web es obtener una página que trabaja mejor para todo tipo de navegadores y es mucho más accesible pudiendo funcionar prácticamente en cualquier dispositivo de acceso a Internet, este último punto es muy importante ya que la cantidad de dispositivos diferentes para acceder a Internet ha crecido exponencialmente en los últimos años (teléfonos móviles, teléfonos inteligentes, PDAs, sistemas de televisión interactiva, sistemas de respuesta de voz, puntos de información e incluso algunos pequeños electrodomésticos pueden acceder a la Web).

¿Por qué escribir HTML válido?

Es difícil convencer a los desarrolladores de la necesidad de escribir HTML válido, ya que la gran mayoría de los navegadores procesa e interpreta correctamente el HTML no válido.

Entonces, la pregunta toma aún más interes, ¿Cuál es el incentivo para escribir HTML válido?, pues probablemente la respuesta sea es que si tu sitio web es válido las posibilidades de que la página se muestre y funcione igual en todos los navegadores aumenta considerablemente.

Pongamos un ejemplo básico de HTML y un ejemplo de HTML + Javascript para ver como afectaría un HTML no válido al funcionamiento de nuestra página en ambos casos.

Supongamos que disponemos del código siguiente:

<ol>
<li>Elemento principal uno</li>
<li>Elemento principal dos</li>
</ol>

Como se puede ver los navegadores procesarán sin problemas este código ya que no contiene errores y es bastante sencillo.

Pero que ocurriría si por el contrario cometiéramos errores de validación, por ejemplo:

<ol>
<p><li>Elemento principal uno</li></p>
<p><li>Elemento principal dos</li></p>
</ol>

En este caso el parrafo debería ir dentro del elemento "li" por lo que estamos cometiendo un error, a pesar de ello este error no afectará a la visualización y funcionamiento del HTML... ya que los navegadores podrán interpretarlo sin problemas.

Pero sin embargo si necesitamos el uso de Javascript sobre esta misma página HTML si que nos podemos encontrar con alguna que otra sorpresa.

Es posiblemente uno de los elementos más repetidos en los formularios de alta para servicios web, el apartado protagonista para esta entrada es el de los términos y condiciones de uso esencial para manifestar la conformidad del usuario. A menudo son aceptadas de forma automática por los usuarios que en la gran mayoria de las ocasiones no se detienen a leerlas.

Hay diferentes maneras en las que podemos encontrar este apartado, la manera de integrarlo en nuestra página dependerá en gran medida de si queremos que el usuario conozca o no lo que está aceptando.

Esto podemos llegar a hacerlo por dos motivos:

• Para cubrirnos las espaldas y cumplir una normativa legal que obligue mostrar la politica de privacidad o los términos y condiciones de uso.
• Para que el usuario sea realmente consciente de las condiciones que está aceptando.

El principal problema de estos textos es que muy pocas personas tienen el tiempo suficiente para leer el acuerdo y las que se animan a leerlo se encuentran con un lenguaje complicado que a menudo desanima al usuario para posteriores lecturas en procesos similares, particularmente nunca he llegado a leerme completamente ninguno de estos textos.

Los favicons (FAVOrite ICON) son pequeñas imágenes que aparecen en la gran mayoría de navegadores junto a la dirección de una página web.

Al estar asociado a la dirección de una página web es una parte fundamental de la imagen que el usuario tiene de la página en concreto, hay numerosas maneras de implementarlo pero sólo se va a mostrar de una única manera en el navegador, barra de herramientas o marcadores, por ello hay que ser cuidadoso a la hora de crear el Favicon de tu sitio web.

Un curioso y divertido truco para rotar letras visto en este foro, se trata de una función Javascript que sustituye las letras dadas por los caracteres que más se le parecen al rotar las letras del texto 180º.

Girar Texto

Tras esta breve presentación de Unicode pasemos a ver el truco Javascript para rotar las letras de un texto. Para probarlo introduce una cadena de texto en el campo "Original" y pulsa el botón "Girar Texto".

En la gran mayoria de los caracteres se utilizan caracteres unicode pero tambien hay algunos caso en los que para representar una letra del alfabeto invertida se utiliza otra letra del alfabeto para representarla:

b -> q
d -> p
g -> b
l -> 1
n -> u
o -> o
p -> d
s -> s
q -> b
x -> x
z -> z