Este artículo es una lista en constante cambio de algunos comunes, polémicos, y con frecuencia olvidados errores cometidos en el desarrollo web. La mayoría de ellos se aplicarán a cualquier sitio web o blog, pero tené en cuenta que habrá casos en que no sería aplicable.

1. Asumir que “Yo lo construyo, ellos vienen”

– Incluso si lograras el sitio web perfecto todavía tendrias que tomarte el tiempo de hacer correr la voz. Es cada vez más necesario hablar sobre tu sitio web ya sea dejando comentarios en blogs, chats, foros como tambien comentarlo offline. Si no te tomas el tiempo de presumir de tu sitio, nadie lo hará.

2. No se mezclan los anuncios con el contenido

– Se puede aumentar la tasa de click-through en corto plazo, pero cuando un usuario cree que está haciendo click en un enlace interno y luego descubre que fue engañado – la mayoría no vuelve.

3. Evitar páginas splash (intro) en tu sitio web

– Por suerte esto ya es una moda muerta. Pero en un momento una gran cantidad de sitios web mostraban un splash cuando un visitante accedia a su sitio web, en lugar del contenido que se queria mostrar. #FAIL!

4. Hacer los links no visitados de un color diferente al de los links visitados

– Este es un tip basico de usabilidad. Los usuarios reconocen el color del link por defecto fácilmente y entienden que ya visitaron un link cuando este cambio de color – Esto ayuda a asegurarse de no volver a clickear un link visitado sin querer.

5. Asegúrate de que tu sitio web es cross-browser compatible

– Los navegadores no son iguales, y no todos interpretan el código de la misma manera. Nos guste o no, es necesario asegurarse de que nuestro sitio se vea correctamente en los navegadores más populares – http://www.browsershots.com es una gran herramienta para chequear esto.

6. Reproductores de Música

– No pongas un reproductor de música en tu sitio web, si alguien quiere escuchar música va a abrir su reproductor. Simplemente molesta a los visitantes, y también tiene que hacer click en el boton de stop cada vez que se carga una página. Si es un sitio relacionado con la música, tiene que arrancar en stop y darle al usuario la opción de iniciar el reproductor cuando esté listo.

7. No uses Flash si no es necesario

– El Flash no sólo aumenta el tiempo de carga de un sitio web, tambien le duele al SEO, y el uso excesivo de Flash también podría molestar a algunos visitantes. Yo diría que sólo se utilice cuando sea necesario.

8. Mantener intactas las características del navegador

– No romper el botón de retroceso, botón de avance, los ajustes de enfoque o cualquier otra funcion del navegador – algunas personas dependen de ellos.

9. No hacer que los links se abran en nuevas ventanas

– Dejá que el usuario controle su destino, si desea volver a tu sitio lo va a hacer usando el botón Atrás o características del navegador.

10. Dar tu punto de vista rápidamente

– Tenes que asegurarte de que el usuario en los primeros segundos de visitar tu página entienda de que se trata la página, si no pueden adivinarlo enseguida entonces lo mas común es que simplemente se vaya. Escribi en el título y en los encabezados un mensaje claro para el usuario.

11. No ajustar el tamaño de la ventana del navegador

– Hay que dejar que los usuarios controlen su navegador, cambiar el tamaño de un navegador puede afectar a las otras pestañas y ventanas que tienen actualmente abiertas.

12. No utilizar texto oculto

– Nunca tenes que intentar engañar a los motores de búsqueda mediante texto oculto para llenar la página con palabras clave o contenido para mejorar el ranking del motor de búsqueda – esto es simplemente una manera fácil de ganarte un ban en los resultados de búsqueda.

13. No abusar de las palabras clave

– Cuando agregues palabras clave a tus páginas asegurate que las palabras clave son relevantes para el contenido de la página. Lo mejor que se puede hacer es asegurarse de que cada palabra clave se menciona en el contenido varias veces. Si decidís no seguir esta regla algunos motores de búsqueda te va a castigar.

14. No usar los contadores de visitas visibles

– No sólo que es no profesional, sino que son completamente inútiles para los visitantes. En su lugar podes usar una aplicación como Google Analytics para realizar el seguimiento en voz baja y que la información la tengas solo vos.

15. No usar subrayado o cambiar los colores del texto normal

– los usuarios han llegado a identificar que el texto subrayado es un link. Trata de seguir esta sencilla regla para que los usuarios no confundan un texto común con un link.

16. Formatear el contenido correctamente

– Hay diferentes normas que se aplican a la escritura de contenido en Internet – no estás escribiendo un libro. Hace uso de los elementos como viñetas, headers, sub headers, y listas.

17. No usar pequeños tamaños de fuente

– Hay que asegurarse que el contenido sea legible para todos los diferentes tipos de visitantes. Los visitantes mas viejos es probable que tengan más dificultades para la lectura del contenido, y la mayoría de estas personas no son conscientes de cambiar el tamaño en las opciones del navegador.

18. Se consistente

– No cambies el diseño o el color de los links a mitad de camino en el sitio. Asegúrate de que el diseño sea igual en todo el sitio.

19. No coloques texto (contenido) en imágenes

– El texto tiene que ser en HTML siempre que sea posible. Los diseñadores web muchas veces usan imágenes para su contenido o información, ya que mutilan las fuentes y los tamaños fácilmente. Pero esto no es amigo de los robots (SEO), no es fácil de cambiar el tamaño (como el texto que si se puede), no funciona con el software de lectura de texto para ciegos, y aumenta el tiempo de carga.

20. Evita los colores brillantes y fuertes

– Asegúrate de que el color de la fuente es fácil de leer sobre el color de fondo. También tené en cuenta que sólo porque vos podes leer la fuente rosa brillante sobre un fondo amarillo no significa que todos pueden. Siempre, la letra en negro sobre fondo blanco va a ser la mejor opción.

21. Proporcionar una función de búsqueda básica

– La capacidad de búsqueda es una forma de navegación muy importante en un sitio web. Ahora podes darle a tus visitantes la búsqueda personalizada de Google.

22. Uso del ALT y el atributo TITLE

– Asegúrate de usar estos atributos, ya que no sólo ayuda al SEO, también ayuda a los ciegos con los lectores de texto.

23. No requerir un registro a menos que sea necesario

– No obligues a los usuarios a registrarse cuando no es necesario.

24. Hacer uso de las fuentes estándar

– Es conveniente utilizar fuentes de Internet estándar al crear una página web, porque si un visitante no tiene la fuente que seleccionaste, se elegirá una diferente para reemplazarla.

25. Uso de Pop-ups

– Hacer uso de pop-ups con publicidad, o incluso de páginas con contenido del sitios se ha convertido en una mala idea desde hace años con el aumento de los bloqueadores de pop-ups.

26. Sitio web sobrecargado

– Es bastante común para los diseñadores web añadir muchos elementos a las páginas. Esto da origen a un aspecto poco profesional y es difícil de navegar a través de toda la información.

27. Páginas largas

– La gente evita leer páginas largas. Ser breve en el mensaje normalmente hará que las páginas tengan una mayor tasa de lectores. Si el contenido es muy extenso no hay nada mejor que un paginador.

28. Páginas de carga lenta

– Creelo o no, la gente todavía tiene acceso telefónico. Los visitantes rápidamente se pasarán a una página web diferente si la tuya no carga lo suficientemente rápido. Intentar acortar las páginas para que incluso los visitantes con la peor conexión a Internet puede acceder a la información es siempre una buena idea.

29. Navegación basada en JavaScript

– No sólo Google promueve evitar el uso de JavaScript en la navegación, sino que algunos usuarios y empresas navegan sin Javascript con lo cual no van a poder navegar correctamente tu sitio web.

30. Crear un Sitemap

– Los Sitemaps son básicamente una página con la lista de lo más importante o la totalidad de las páginas de tu sitio web. Crear un Sitemap en XML para tu sitio web garantiza que los motores de búsqueda descubran las páginas de tu sitio fácilmente.

31. No deshabilitar el click derecho

– Normalmente lo que los webmasters hacen con esto es tratar de frenar el acceso al código fuente, rutas de imagenes o para que no puedan copiar imagenes, pero es muy molesto y ademas los usuarios pueden acceder a dichas áreas, aunque tengan el click derecho desactivado, mediante el menú principal del navegador.

32. Abstenerse de direcciones URL complejas

– Una URL basada en palabras clave no solo mejora el posicionamiento en los buscadores, sino que también ayudará a los visitantes a identificar fácilmente el contenido de la pagina por el nombre de la URL.

33. No utilices imágenes de los enlaces de navegación

– Al crear la navegación de tu sitio web tenes que hacer uso de texto en lugar de imágenes. La navegacion basada en texto no sólo mejora el tiempo de carga, sino que ademas nunca tenes que hacer algo que no pueda ser fácilmente creado con una hoja de estilo.

34. No pongas tu dirección de correo electrónico en tu sitio web

– Las direcciones de correo electrónico en tu sitio web o blog no son un secreto para los robots de spam. Es bueno para vos y aún mejor para tus visitantes, si se proporciona un formulario de contacto. Otra solución es poner una imagen con la dirección de correo electrónico.

35. Optimización del CSS y las imágenes

– Tómate el tiempo para optimizar el CSS y las imágenes – esto ayudará a garantizar que los tiempos de carga sean más bajos y el peso total de tu sitio web será reducido.

Articulo original (en Ingles) http://netjelly.com/2009/10/25/list-of-web-design-mistakes-you-should-avoid/

Ustedes que opinan?
Habitualmente evitan estos errores?

Grande y feo Bisel

¿Viste el bisel de esta cosa?! ¡Es enorme! Ya sé que no queres enviar un comando por accidente mientras lo sostenes con tu pulgar, pero vamos…

No es multitarea!

Esto es un retroceso. Si se supone que esto es un reemplazo para las netbooks, ¿cómo es posible que no sea multitareas? ¿Estás diciendo que no puede escuchar Pandora mientras escribo un documento? No puedo tener mi aplicación de Twitter abierta al mismo tiempo que mi navegador? No puedo tener el MSN abierto al mismo tiempo que mi correo electrónico? ¿Me estás jodiendo? Esto garantiza que no voy a comprar este producto.

No tiene cámaras!

Que no tenga cámara al frente es una cosa. Pero tampoco tiene cámara atrás? ¿Por qué no? No me puedo imaginar cual hubiese sido el problema de la inclusión de al menos una cámara. Este producto no va a poder manejar iChat?

Teclado táctil

Es el mismo teclado táctil grande y feo que hemos visto en otras Tablets, y a menos que estés tirado en el sofá con las rodillas para arriba, va a ser incómodo de usar.

No tiene salida HDMI

¿Ah!, Queres ver los vídeos HD que bajaste de iTunes en el televisor? No vas a poder! Si sos realmente fiel ya deberías haber comprado un AppleTV.

El Nombre de iPad

Prepárate para bromas del tipo toalla sanitaria, y un montón mas!

No tiene Flash

No tener Flash es molesto y fue un retroceso en el iPhone y iPod Touch. Pero, en algo que se supone que esta más cerca de una netbook o portátil? No se van a poder ver muchas paginas web. Y espero que no te interese ver vídeos en Streaming! Dios sabe que no muchos usuarios casuales de Internet ven streaming de vídeo (youtube). Oh, espera, Olvídate, todos lo hacen.

Adaptadores, adaptadores y adaptadores

Si queres conectar algo al iPad, como una cámara digital, vas a necesitar todo tipo de adaptadores. Se necesita un adaptador para USB, para el amor de Dios!

No es Widescreen

Las películas en formato Widescreen se ven horribles en este producto gracias a su pantalla de 4:3, Según Blam, que vio algunos capítulos de Star Trek. Es como tener un televisor 4:3 de nuevo!

Un ecosistema de App Cerrado

El iPad sólo ejecuta aplicaciones de App Store. La misma tienda de App que es conocida por prohibir aplicaciones sin ninguna razón real, como Google Voice. Claro, no hay netbooks con pantallas táctiles, pero se puede instalar cualquier software que quieras en ellas. Querés usar un navegador diferente en su iPad? ¡Qué lástima!

Mirá la galeria de imagenes del iPad en Gizmodo

Visto en http://i.gizmodo.com/5458382/8-things-that-suck-about-the-ipad
Traducido al Argentino por mi.

Hoy vamos a aprender a hacer una botonera simple, íntegramente en Actionscript, estilo CSS.
Cuando trabajas freelance muchos clientes te piden que le hagas el logo y la botonera animada, si bien hay diversas técnicas para hacer una linda botonera con CSS y Javascript también hay formas de hacerlo muy fácil con flash.

En el archivo final van a tener todos los pasos mas detallados.
Descarga el archivo de acá

En nuestra botonera vamos a usar Tweener para las animaciones

import caurina.transitions.*;
import caurina.transitions.properties.*;
caurina.transitions.properties.ColorShortcuts.init();
caurina.transitions.properties.DisplayShortcuts.init();

Primero que nada vamos a crear el sprite que va a contener la botonera

var navholder:Sprite = new Sprite();
navholder.name = "navholder";
navholder.x = 10;
navholder.y = 40;

Ahora creamos el fondo de nuestra botonera

var navbackground:Sprite = new Sprite();
navbackground.graphics.beginFill(0x666666, .5);
navbackground.graphics.lineStyle(1,0x333333);
navbackground.graphics.drawRect(0, 0, 500, 30);
navbackground.x = 0;
navbackground.y = 0;

Ahora vamos a agregar los Sprites que creamos al Display List

navholder.addChild(navbackground);
addChild(navholder);

Ahora vamos a crear un array con los nombres de nuestros botones

var menuArr:Array = ["Inicio", "La Empresa", "Servicios", "Contacto"];

El segundo array que creamos es para los links, deben ir en el mismo orden que el array anterior.

var menuLinks:Array = ["inicio", "la-empresa", "servicios", "contacto"];

Hora de empezar con los botones

Ahora vamos a crear el movieclip que luego se va a transformar en nuestro botón

var btn:MovieClip;

Y acá definimos algunas variables para nuestra botonera

var btnXPos:Number = 2;
var btnYPos:Number = 2;
var btnMargin:Number = 2;
var i:int = 0;

Listo, terminamos. Ya creamos todos los elementos que necesitamos para armar nuestra botonera.
Recordemos que la botonera es bastante simple y básica pero ustedes pueden mejorarla, agregarle mas efectos y hasta pasar el script a una class y re-usarlo (:

Ahora vamos a crear la funcion que va a crear los botones

function botonera():void {
	if (i < menuArr.length) {
			btn = new MovieClip;
			btn.name = "btn_"+i;
			btn.id = i;
			btn.link = menuLinks[i];
			btn.alpha = 0;

			var fondo:Sprite = new Sprite();
			fondo.name = "fondo";
			fondo.graphics.beginFill(0x000000);
			fondo.graphics.drawRect(0, 0, 28, 28);
			fondo.alpha = 1;

			var formato:TextFormat = new TextFormat();
			formato.font = new btnFont().fontName;
			formato.color = "0xFFFFFF";
			formato.size = "11";

			var texto:TextField = new TextField();
			texto.name = "texto";
			texto.embedFonts = true;
			texto.autoSize = TextFieldAutoSize.LEFT;
			texto.antiAliasType = AntiAliasType.ADVANCED;
			texto.selectable = false;
			texto.defaultTextFormat = formato;
			texto.multiline = false;
			texto.wordWrap = false;
			texto.text = menuArr[i];
			texto.x = 0;
			texto.y = 0;

			btn.addChild(fondo);
			btn.addChild(texto);

			fondo.width = texto.width + 10;
			fondo.height = texto.height + 10;
			texto.x = fondo.width/2 - texto.width/2;
			texto.y = fondo.height/2 - texto.height/2;
			navbackground.height = fondo.height + 4;

			btn.x = btnXPos;
			btn.y = btnYPos;
			btnXPos += btn.width + btnMargin;

			navholder.addChild(btn);

			Tweener.addTween(btn, {alpha:1, time:.35, delay:.1*i, transition:"easeOutQuad"});

			btn.buttonMode = true;
			btn.mouseChildren = false;
			btn.addEventListener(MouseEvent.ROLL_OVER, rollover);
			btn.addEventListener(MouseEvent.ROLL_OUT, rollout);
			btn.addEventListener(MouseEvent.CLICK, onclick);

			i++;

			if (i < menuArr.length) {
				botonera();
			}
	}
}

Ahora vamos a crear las funciones del boton

function rollover(e:MouseEvent):void {
	var btn:MovieClip = MovieClip(e.currentTarget);
	Tweener.addTween(btn.getChildByName("fondo"), {alpha:.5, time:.35, transition:"easeOutQuad"});
}

function rollout(e:MouseEvent):void {
	var btn:MovieClip = MovieClip(e.currentTarget);
	Tweener.addTween(btn.getChildByName("fondo"), {alpha:1, time:.35, transition:"easeOutQuad"});
}

function onclick(e:MouseEvent):void {
	var link = e.currentTarget.link;
	var url:String = "?page="+link;
	var request:URLRequest = new URLRequest(url);
	try {
		navigateToURL(request, '_blank');
	} catch (e:Error) {
		trace("Ha ocurrido un error!");
	}
}

Y ahora para finalizar llamamos a la función que crea la botonera

botonera();

Bueno con esto terminamos la botonera, pero no se olviden que en el archivo esta explicado linea por linea.
Recuerden que es un ejemplo simple y básico, es super mejorable asi que espero su feedback en los comentarios!

Hasta el jueves que viene