Optimización

Cuantas veces hemos entrado a un sitio y hemos tenido que esperar mucho tiempo para que se cargue por completo... A mi en lo personal no me gusta esperar, en realidad a nadie le gusta esperar... muchas veces he entrado a sitios web que tardan en realidad demasiado en cargar por completo... y muchas veces prefiero cerrar la página y buscar en otro lado. Seguro que al menos una vez te ha pasado.
En realidad la mayoría de los usuarios esperan entre 15 y 20 segundos a que cargue una página, si no carga... la cierran y nunca mas vuelven. No queremos que pase eso en nuestro sitio. Eso lo podemos arreglar fácilmente... optimizando nuestro sitio.

Nunca debemos pasar por alto este paso. Ya que hará la diferencia entre un usuario satisfecho (que puede recomendar nuestra web), o un visitante insatisfecho que núnca más volverá.

Con esto me refiero a que debemos hacer un sitio ligero... un sitio que no tarde en cargar. Esto lo lograremos al reducir el "peso" (tamaño en kb) de las imágenes que vayamos a usar, si vamos a meter áudio o video, también tendríamos que reducir su "peso".

Saltar Intro

Si hemos puesto un intro en nuestro sitio, debemos dar al usuario la opción de "Saltar Intro" Esto es por 3 motivos principales:

1. Velocidad Limitada: Debemos tomar en cuenta que no todos tienen internet de alta velocidad, por lo que si ponemos un intro que tarda 20 segundos en cargar en una conexión de velocidad media, en una conexión de baja velocidad podría tardar un par de minutos, y como explique arriba, a nadie le gusta esperar demasiado... entonces podrian cerrar la ventana. Esa es la primer razón.
2. Repeticiones: La segunda razón es cuando tenemos usuarios constantes, que nos visitan diario, o con cierta frecuencia. Cuando hayan visto nuestro intro por mas de 1 semana todos los dias, por más que este muy bueno, los usuarios se van a aburrir de verlo, y querrán saltarlo, e ir directo al contenido de la página.
3. No les gusta: La otra razón es que a un usuario (o a muchos) simplemente no les guste el intro, por lo que querrán evitarlo e ir directo al contenido de nuestra página.

Seguramente hay más motivos por las que debemos poner la opción de "Saltar Intro" pero la más importante es el respeto hacia los usuarios.

Ok ok ok, ya entendi... pero ¿Como pongo esa opción?

En realidad, no creo que haga falta decir como, pero de todas maneras ahí va:
Esto no es mas que un enlace hacia la página que contiene los menús. La forma de poner enlaces depende de la manera en la que estemos desarrollando nuestro sitio.

Hacer Enlaces desde el lenguaje XHTML
Hacer Enlaces desde GoLive

Videos y música

Muy posiblemente estes pensando en poner videos o música en tu sitio, lo siguiente es algo que no debemos olvidar.

Videos: He entrado a demasiados sitios en donde ponen videos de una manera incorrecta (en Blogs por lo general). Uno de los errores que se cometen a menudo es que cuando entras a la página que tiene el video, éste comienaza a cargarse sin que uno le haya dado la opción de reproducirlo... esto es muy molesto... y las razones por las que no se debe hacer son las mismas que describí arriba, en "Saltar Intro"

Música: Tal vez quieras poner música de fondo a tu sitio, es válido, pero volvemos a lo mismo, si pones música de fondo, debes poner la opción de bajar volumen (y que se pueda bajar en su totalidad) o en su defecto poner la opción de "Apagar Música"
Las razones por las debemos poner dichas opciones son las mismas que describí arriba, en "Saltar Intro"

Otra cosa que podemos hacer en cuanto al audio es poner un loop... en vez de poner una canción completa, que pese 1 MB (comprimida y con calidad baja) podemos cambiarla por un loop, que pesaría unos 100 kb con buena calidad.

¿¿¿Loop??? de que, o que??? Ah!!! de esos Frut Loops ???

Un Loop es un archivo que contiene una pequeña parte de una canción, el cual se reproducirá una y otra vez, dándonos así la sensación de estar escuchando una canción... la ventaja es que podemos poner un loop de buena calidad y cargará de manera rápida, la desventaja es que puede llegar a aburrir más facil (por que se repite constantemente).

Si deseas buscar un loop para tu web (o cualquier otra cosa), puedes hacerlo desde Google, Altavista, Yahoo! o cualquier otro buscador. Pero si vas a usar Google, te recomiendo que antes de buscar veas la sección de Búsquedas Avanzadas en internet, en donde te enseño a encontrar más fácil y rápido lo que buscas.

Comprimir los archivos

Para hacer que nuestra web sea muy veloz al tratarse de Audio y Video, lo que haremos es comprimir nuestros archivos. Para esto podemos usar aplicaciones que se especializan en esto: Las que yo podría recomendar son las siguientes:

Para Mac: y mas
Para Windows:

Aquí no voy a explicar como se usan, ya que, para empezar no se por cual se decidirán, y además, cada aplicación debe traer su manual de uso.

Imágenes

Las imágenes pesadas son un verdadero problema para nuestro sitio, mientras mas kb pesen, mas tiempo tardará en cargar nuestra página. Podemos reducir el peso de nuestras imágenes desde Photoshop. A continuación pongo un pequeño tutorial de como hacerlo.

Optimizar imágenes en Photoshop

Photoshop tiene una opción para reducir el peso a nuestras imágenes, y es muy sencillo usarla, solo tenemos que abrir nuestra imagen a optimizar en photoshop, (si queremos modificar la imagen o ponerle firma lo hacemos antes de optimizar) después en los menús nos vamos al menú archivo (file), y seleccionamos la opción de Guardas para la Web (Save for Web).

Inmediatamente se abre una ventana con varias opciones:

Pestañas de Visualización: En la parte que esta coloreada de rojo podemos cambiar las vistas, hay 4 pestañas, la primera es para ver la imagen original (sin comprimir), la segunda pestaña es para ver la imagen optimizada, la tercer pestaña nos muestra una ventana doble poniendo a la izquierda la imagen original y a la derecha pone la imagen comprimida (una previsualización). La tercer pestaña nos muestra una ventana con cuatro vistas de la imagen (Recomiendo que trabajen con la tercer pestaña, que muestra la imagen original y la imagen optimizada).

Formatos de imagen: En esta parte cambiaremos el formato de imagen, ya sea jpg, gif, etc.

Porcentaje de optimización: Aquí que tanta calidad queremos conservar de la imagen, pero debemos tener cuidado de no abusar mucho del porcentaje.

Podemos cambiar también los demás parámetros, y una vez que tengamos todo listo, solo le damos en Guardar (Save), y le asignamos donde queremos guardar la imagen.

Una opción a este proceso es usar aplicaciones como Small Image para que hacen lo mismo, pero desde un programa ageno a Photoshop.

Evitar páginas con muchas imágenes

Vuelvo a lo mismo... me molesta mucho entrar a un sitio y ver que tiene decenas o hasta cientos de imágenes en una sola página. (y no exagero, he visto más de uno de esos sitios que tienen mas de 100 imágenes en una sola página). Es realmente molesto por dos motivos principales:

1. El tiempo que tarda en cargar la página aumenta con cada imagen extra que coloquemos.
2. Es muy difícil y más aún molesto navegar en una página que tiene un scroll (el botón que se ecuenntra en la barra de desplazamiento) tan pequeño y que tiene casi todo el contenido del sitio en una sola página (Nada recomendable).

Por tales razones debemos tener cuidado de no poner demasiadas imágenes en una misma página (ojo, no confundir los términos página y sitio, ver glosario).

Lo que podemos hacer son dos cosas:

1. Dividir en Páginas: Podemos poner las imágenes en páginas distintas... por ejemplo: Fotos de Mayo (parte 1), Fotos de Mayo (parte 2), Fotos de Mayo (parte 3), etc. En cada página ponemos unas 5 o 10 imágenes (dependiendo del tamaño), y no nos olvidemos de conectar esas páginas con enlaces (links) como "Página Anterior" "01" ""02 "03" "Página Siguiente" etc.
2. Imágenes en miniatura: Esta opción es más recomendable. Podemos poner imágenes en miniatura con un enlace (link) que abra la imagen en tamaño completo. Esto es mas recomendable ya que es más fácil de visualizar, y cargan mas rápido las imágenes pequeñas.

Un sitio limpio y organizado.

Es muy importante que nuestro sitio este limpio y organizado, esto no es solo para dar buen aspecto, es también para que nuestros usuarios puedan navegar en él sin perderse. te recomiendo también que si vas a hacer un sitio grande, y si pones algo que tenga que ver con otra página del sitio (de tu mismo sitio) hagas enlaces creando así una forma de navegar más fluida.

Importante también es clasificar tu sitio, en diferentes categorías... esto es muy relativo a que tipo de sitio quieras hacer, en este caso yo lo clasifiqué en Información General (Que solo le puse general, para no tener un botón muy grande :P) XHTML, CSS, GoLive, Photoshop, Ejercicios, Descargas, Glosario, Links y Portfolio.

Como te decia, depende mucho que tipo de sitio estes realizando, pero es bueno hacer un sitio por categorías para que los usuarios puedan encontrar todo mas fácil.