(@_ \\\_\ <____)La guía del pato: diseño web y estilo.
La web se construyo como una extensi´n de Internet, y esta se construyo con un objetivo: permitir la interoperabilidad de los distintos sistemas de información de la época. Efectivamente, ante de existir Internet era muy complicado distribuir la información de un sistema a otro, porque los sistemas no solian ser compatibles. Hoy día, la inmensa mayoría de los sistemas de información que se construyen tienen incorporado una serie de protocolos de comunicación que siguen unos estrictos estándares ( TPC/IP y basado en el modelo OSI) y incluyen, o tienen la posibilidad de expandirse por medio de elementos hardware para poder así, conectarse a otras plataformas y por ende, a Internet.
Es por todo esto, que es completamente en contra del espíritu de Internet el crear webs que no siguen unas mínimas pautas de dise�o orientadas a la inteoperabilidad. Es tristemente cierto que hay dise�adores de paginas webs ahí fuera que prueban sus páginas en la misma máquina en la que la construyen. �Esto es una terrible equivocación! Una página jamás se vera igual en dos máquinas distintas.
Además, no piense que usted quiere hacer su página web estándar e interoperable por motivos altruistas, no. Usted deberáa querer hacer su página estándar como mi´nimo por la sencilla razón de que de esta forma puede abrirse a un público mucho más amplio que si no lo hiciera. No cometa el error de asumir que todo el mundo hay fuera usa la misma arquitectura de procesador que usted, o el mismo sistema operativo, misma pantalla, resolución, etc.
Su página web, o sitio web, debería poder visualizarse en muchos y diferentes sistemas. Es cierto que esto hará que la complejidad técnica tienda a disminuir (a menos florituras en su web, mayor interoperabilidad), lo cual hara que a usted, joven dise�ador, le parezca que su web es "sosa". Para ello muchos dise�adores optan por un dise�o multimedia (con las florituras) y un dise�o simplista (con la información del sitio y nada más)
Por último, recuerde que se pueden hacer webs y sitios con mil y una herramientas disponibles en la web, y también un pu�ado de lenguajes, recuerde que algunos de esos lenguajes son abiertos y otros no. Infórmese antes de usar una determinada tecnología acerca del grado de libertad de esta.
Usted, si es un joven dise�ador, probablemente no concebirá que una web pueda no tener imágen alguna. Bien, he de decirle que muchas y muy buenas páginas en Internet contienen un numero de gráficos / imágenes exactamente igual a cero. El uso de las imágenes en su web no es ni mucho menos obligatorio, sino que debería responder a una necesidad. Estas necesidades se podrían resumir en tres: estética, funcionalidad y fin. Detallare estos conceptos.
Una foto puesta en una web por estética, sólo cumple un objetivo, adornar, hacer bonito en su web. Como comprender´, lo bonito de una imagen es muy subjetivo, lo que a usted le pueda parecer una maravilla a un visitante bien podría parecerle un churro. Además, tenga en cuenta que absolutamente ninguno de sus visitantes vendrán a su web a ver los gráficos de adorno (igual que nadie ira a su casa a ver la decoración de los cuadros, probablemente irán a verle a usted mismo). Por todo esto, creo que es obvio que el numero de imágenes meramente decorativas debería ser el mínimo imprescindible.
Por otro lado, tenemos las imágenes funcionales cumplen un objetivo más importante, son útiles. Una imágen es captada por la vista de manera más rápida y más automática que un texto. (es muy difícil leer un texto sin querer, pero una imágen en una web, quieras o no la ves, quizás no te fijes en ella, pero la información que contiene te llegara inconscientemente) Las imágenes funcionales más comunes suelen ser los botones. Hay botones de menú, tipo "biografía", "mi perro", "links", y botones de direcciones, flechas de adelante, atrás, arriba, también se suelen usar botones para la dirección de email, a veces incluso botones animados (gifs de capas). Todas estas imágenes como vera cumplen una función, aunque también se habrá dado cuanta de que no son imprescindibles. Es correcto utilizar algunas imágenes con este fin, pero recuerde que cuantas más imágenes utilice, menos importancia tendrán individualmente. La atención del lector es constante, a mayor numero de imágenes, menos cantidad de atención recibirá cada una.
Por último, una imágen puede ser un fin en si mismo. Esto es, que usted quiera ense�ar esa imagen porque es el contenido de la web. Digamos que usted tiene una página de genealogía. Seria muy correcto incluir fotos de sus antepasados. En este caso, la imágen es el contenido, la información en si misma. Es el modo de empleo mas lícito para una imágen.
Otro punto importante a tener en cuenta es el de los formatos de imagen. Existen varios formatos mas o menos estándares en la Web, y otros que no lo son. Podemos decir que los tres mas utilizados son: gif, jpg y png.
Las imágenes gif usan un algoritmo de compresión (LZW) que hasta hace poco ha estado patentado en la mayoría de países. Si bien esto esta cambiando, es motivo suficiente para descartarlo. Técnicamente es inferior a los otros dos formatos, solo soporta 256 colores, lo que lo hace totalmente inadecuado para imágenes de cierta calidad. Normalmente es usado para peque�os botones, pero esto esta cambiando. Las imágenes jpg pierden calidad, es decir, una imágen comprimida en jpg no puede descomprimirse y obtener su forma original. Los jpg descartan cierta información de la imágen que creen menos importante, así reducen el tama�o de los archvios. Es especialmente indicado para fotografías de media calidad. El png sirve tanto para peque�os botones como para imagenes de alta calidad. Tiene una capa alpha de transparencia variable. Este formato es mas moderno y se esta extendiendo rápidamente.
Cuando uno dise�a páginas webs, normalmete lo hace en la máquina local en la que trabaja. Esto quiere decir, que durante la fase de previsualización del contenido, uno siempre tira del contenido desde su disco duro (o desde cualquier dispositivo de almacenamiento local de datos que use). Incluso puede suceder, que si esta trabajando con los mismos documentos a la vez, estos estén cacheados en la memoria ram. �Que quiere decir todo esto? Pues una cosa tan obvia como que usted cargara todos esos datos muchisimo mas rápido que si lo hiciera a través de una conexión de red. Usted carga sus páginas mucho más rápido que sus futuros usuarios, ellos tendrán que pasar todo el código de la página junto con los objetos incrustados que tenga (imágenes, sonidos, etc) a través de su conexión a Internet, y en un marco de tiempo limitado.
Esto puede parecer obvio, pero hay mas de un dise�ador que debería pensar en ello más a menudo.
Por todo esto, es fundamental que el peso de cualquier pagina individual no sea excesivo. Hay que mantener las paginas lo mas ligeras posibles. Esto, entra en conflicto directo con el dise�o. A veces nos gustara incluir nuevas imagenes, nuevos efectos, botones, sonidos, animaciones, etc, pero tendremos que tener en cuenta de que cada nueva elemento de dise�o decorativo incluira un efecto colateral no deseado: perderemos audiencia. Empezando por las conexiones mas lentas. Seamos realistas, nadia va a esperar 3 mintuos a que nuestar mavarillosa pagina se renderice en el navegador de turno. No. La gente en Internet tiene prisa, y hay millones y mas millones de paginas. Si la tuya tarda demasiado en cargar, lo mas probable es que el usuario cierre y busque por otro lado.
Ademas, un dise�ador web, al ser un profesional, lo mas seguro es que disponga de una maquina, unas posibilidades hardware y uan infraestructura muy superior a la del usuario medio.
Son muchas y muy variadas las herramientas necesarias en todo el proceso de creacion de una pagina. Uno puede usar clientes de FTP, o clientes seguros, correctores ortograficos, programas de retoque fotografico, validadores, programas de gestion de proyectos, templates, etc. En este capitulo vamos a hablar tan solo de las herramienats especificas de creacion web. Aquellas que generan codigo. Mayormente hablo de Dramweaver©, Front Page©, Amaya© y Netscape Composer©
Estas herramientas utilizan una interfaz WYSIWYG (lo que ves es lo que obtienes). Aqui los programadores webs tienen la posibilidad de abtraerse completamente del codigo y dise�ar a golpe de raton, dise�ar el resultado final y que el programa se encargue de crear el codigo. Esto tiene ventajas e inconvenientes.
Entre las principales ventajas se encuentra un supuesto aumento del rendimiento. Los que apoyan el uso de estas herramientas mantienen que un programador puede crear un mayor numero de paginas en un mismo marco de tiempo. Otra ventaja es que estas herramientas posibilitan que cualquier persona sin conocimientos especificos de los lenguages de programacion de la web pueda montar su pagina sin problemas. Por ultimoestos programas suelen incluir herramientas que ayudan a la hora de programar, codo coloreo de codigo, revision de enlaces, validacion, correcion de sintaxis, etc.
Entre las principales desventajas esta un codigo ofuscado en muchos casos, es decir, un codigo que es dificil de leer para un humano y opr tanto, dificil de entender y modificar. Otro de los grandes problemas es que estos programas tienden a sobrecargar el codigo inecesariamente, es decir, que un programador de nivel medio prodria programar la misma web (visualmente hablando) en un tercio del codigo. Esto significa mayor velocidad y mayor estabilidad. Las posibilidades de que un navegador no pueda renderizar una pagina es exponencialmente proporcional al tama�o del codigo de la pagina. Ademas de todo esto, el codigo de semejantes programas a veces no sigue los estandares al pie de la letra, lo que provoca problemas de incompatibilidad entre sistemas y plataformas. Estos problemas solo serian arreglables haciendo ajustes al codigo, pero como hemos dicho que esta tan ofuscado, en la practica esto es imposible.
Usar o no usar estas herramientas es cuestion de gustos, de los conocimientos que uno posea, y de las ganas o interes que tenga de programar una web solida. De todas formas tampoco se debe hablar en terminos absolutos, para algunos problemas deberemos programar nosotros el codigo, mientras que para otras quizas queramos utilizar una herramienta y automatizar el proceso. La eleccion es libre.
Podemos decir que una web, cualquier web, puede dividirse en dos partes: contenido y presentacion.
El contenido es aquello que la pagina ofrece, ya sean por ejemplo fotografias, programas, reportajes, guias, libros, canciones, recetas de cocina, etc. Mientras que la presentacion es el metodo y forma en que mostramos el contenido. Hagamso una analogia mas tangible. En una tienda de ropa, tienen prendas de ropa, que es lo que uno va a comprar, y ademas tienen una forma de presentar el producto, unos escaparates, luces, estanterias, musica de fondo, etc.
Obviamente, ambas caras son importantes, pero no podemos olvidar nuestro orden de preferencias. EL contenido siempre va en primer lugar. Su pagina debe ser util o interesante para alguien. Debe tener algo que otros quieran, de lo contrario, �para que publicar una pagina?
Mirelo todo desde el lado de vista del internauta, usted seguramente habra visitado miles de paginas. Seguro estoy que a todas fue buscando algo. La gente busca informacion constantemente en Internet, y cuando encuentran una pagina gracias a un buscador, lo ultimo que les importa es el color de las esquinitas del marco de la foto del dia. El dise�o ha de estar subordinado al contenido. Desde un punto de vista de esfuerzos y tiempos, no podemos dedicar mas tiempo a cuidar la apariencia de nuestra pagina que a llenarla de contenidos utiles y de calidad.
En una palabra, lo importante es el contenido
Ya tenemos programada nuestra pagina. Nos ha costado muchas horas, pero ya empieza a presentar cierta solidez. Tenemos mas de la mitad de las secciones listas, los enlaces, el dise�o, las imagenes, etc. Parece que ya pronto terminaremos el trabajo. Pues no. Un numero inmenso de programadores web hay fuera (sobre todo los noveles) cometen el tremendo error de renderizar sus paginas en un solo navegador y en una sola plataforma. (En la que ellos tienen / usan).
Esto esta mal, esta completamente equivocado. Si uno dise�a las paginas de este modo, tiene todas las papeletas para que al renderizar su web en otra plataforma o navegador esta no se vea como se supone deberia hacerlo. A continuacion, muchos webmasters culpan a ese navegador del fallo.
Error, un codigo, aunque pueda parecer una cosa completamente objetiva, es ambiguo. Esto es, que distintos navegadores, interpretaran de manera distinta un mismo codigo. �Esto no quiere decir que uno lo haga bien y otro mal! Quiere decir que cada navegador ha entendido una cosa. Es responsabilidad del programador crear un codigo libre de ambiguedades, y testearlo con cuantas mas plataformas y navegaores pueda. Con esto se asegura de que su dise�o se renderizara de la misma manera para cualquier (o un numero elevado) de los posibles usuarios.
Hay ciertas practicas que son molestas para el usuario. Estas practicas van completamente en contra del espiritu dela Web, y no deberian usarse. En muchos casos piden informacion del usuario, en otros una direccion de email, o directamente registrarnos, peor en todos absolutamente son molestos. En algunos casos estan en su derecho legal de hacerlo, pero tan solo muy puntualmente estan en su derecho moral de hacerlo. Piensa que si todas las paginas pusieran en practica estas tecnicas la Web seria un caos. Usted como dise�ador (y antes internauta) de paginas web debe acerse eco de estos "abusos de dise�o" y no cometerlos usted tambien.
Empecemos por los pop-ups o 'ventanas emergentes'. Se suelen presentar cuando abrimos una pagina, justo al abrirla, vemos que lo que en un principio era una ventana de navegador, ahora son varias. Son las tipicas ventanitas si botones, sin barras, tan solo con un banner de publicidad. Esto es una tecnica abusiva y extremadamente molesta para el usuario. Evitela. La prueba es que algunos de los mejores navegadores estan empezando a implementar mecanismos contra este tipo de publicidad, con lo que cada vez son menos efectivas. No use ventanas emergentes, seguro que puede encontrar una solucion de dise�o mejor vistas a su pagina que gastar un poco del limitado espacio de pantalla del usuario.
Los registros de usuario son otra mala idea. Me refiero a esas paginas que guardan su contenido celosamente, y que solo te lo daran a cambio de que les entregues tus datos personales. Pero a ver, si lo que yo quiero es bajarme un parche para un programa de dibujo, �para que quiere el webmaster saber mi telefono? �me va a llamar? o mi direccion, o mi edad, etc. En la mayoria de los casos para vender esa informacion. Pero lo peor es que en algunos casos no la �quieren para nada! Solo para mostrar un look profesional en su pagina.
A veces justifican esta practica argumentando que gracias a tu registro ellos pueden ofrecerte un contenido personalizado. Pero a ver, �cuantos parches para programas de dibujo se cree el webmaster de esta pagina que me bajo yo al dia? �23? Entonces para que quiere que configure mi color de fondo? Dentro de 3 meses, si necesito otro parche voy a un buscador y lo busco, y a ver si hay suerte. Pedirle a los usuarios que se registren obligatoriamente para acceder a los contenidos es una practica erronea. Imagina como seria la Web si todas las paginas pusieran esto en practica. Evitelo usted en su pagina.
Voy a tratar de explicar porque el uso de contadores es malo en una sola sentencia. Contador = ego. Asi de simple. Si se fija, vera que las paginas que usan contadores para mostrar su numero de visitas al publico tienen un perfil bien definido. Suelen ser paginas personales, nunca corporativas. �Que significa exactamente que seamso el visitanet numero 2462? Ni que me importase.
Esta bien saber las visitas que uno tiene en su pagina, igual que esta bien saber cuanta gente nos visita en casa. No es necesario mostrar el contador a tu publico.A tus visitas no les importa que numero tienen. Imagina que llega Paco a tu casa, y le recibes diciendo: "Hombre paco cuanto tiempo, �sabes que eres el visitante numero 1176 desde el 2 de febrero del a�o pasado?".
Para terminar, decir que hay algunas paginas tan podres, tan vacias, que da pena ver los contadores. Uno llega a una pagina buscando algo en particular y se da cuenta de que el enlace esta roto. Mala suerte, vete a otra pagina a por lo que buscabas. Y descubres un contador abajo, y piensas: "Que bien, solo hemos perdido aqui el tiempo 3244 personas buscando una cosa que anuncias tener, pero que en realidad hace 2 a�os que no te funciona el enlace, y eres tan condenadamente vago que no has retirado tu pagina". Olvida los contadores.
Parecia una buena idea en un principio, pero con la practica la cosa quedo bien clara: los marcos no funcionan. Dada la naturaleza de hipervinculos de la Web, el concepto de los marcos no encaja bien. Hay demasiados problemas con ellos. Seguro estoy de que alguna vez le habra pasado. Marcos con menus de tama�os fijos, que usted no ve completamente, y por lo tanto se pierde opciones. Enlaces a paginas exteriores que se quedan encerrados en un marco, etc.
Si bien los marcos pueden ser utilizados en algunos contextos, ha de extremarse las precauciones. Pues es facil cometer fallos de dise�o y molestar a mas de un usuario.
Si usted ha montado una pagina, seguramente le habra costado cierto esfuerzo, tiempo y dedicacion. Es de suponer que le gustaria que fuera visitadas por personas interesadas en el tema. Para ello estan los buscadores y los directorios. Existen cierto numero de tecnicas que usted podria poner en practica para conseguir que su pagina apareciese bien situada en las busquedas relacionadas con los temas de su pagina.
Esto es de vital importancia. Si su compa�ia, o su pagina personal no tienen visibilidad, es como si no existieran. No tendran repercusion. Esto es tan importante que modernamente se ha creado la figura del SEO. Su funcion dentro de la empresa es exclusivamente hacer que la pagina corporativa consiga un ranking elevado en los grandes buscadores. Tal es la importancia de estas tecnicas.
Explicar todas estas tecnicas correctamente requeriria una guia particular y especifica, lo que cae fuera del horizonte de esta guia de dise�o y estilo web. En la Web encontrara otras muchas paginas sobre el tema.
Claro que muchos opinan que es una funcion estupida. Aparecer bien visible en los buscadores es importante, pero si tus clientes no compran, o si tu publico no te lee porque no tienes nada que decir, no volveran mucho. Por muy bien situado que estes en los buscadores.
Si no sabes lo que es un nombre de dominio ve a la seccion Conceptos basicos > ¿Que es un nombre de dominio? que alli ya lo he explicado una vez y no me gustaria repetirme.
Aqui vamos a hablar de como escojer un nombre de dominio adecuado. Existen varias normas o sugerencias que deberia seguir para que su nombre de dominio fuese realmente bueno. Entre otras:
Elija un nombre corto. Una direccion como manualdetodaslasflores.com no es facil de recordar. A usted le interesa que la gente pueda recordar su nombre facilmente. Por ejemplo todoflores.com seria un nombre de dominio mucho mas adecuado.
No use guiones (-) ni barras bajas (_) en sus nombres. Esta demostrado que mucha gente escribira su dominio sin ellos, lo que hara que usted "regale" visitas a la competencia. Es decir que si usted tiene todo-flores.com y su competencia es todoflores.com esta en un serio aprieto, le esta enviando clientes a la competencia.
Intente que su nombre de dominio no sea ambiguo. Si es en español, intente que no contenga palabras que puedan transcribirse de mas de una forma. Si usted tiene holobolo.com perdera muchas visitas por culpa de la ambiguedad al transcribirlo.
Su nombre de dominio deberia estar relacionado con el contenido de su pagina. Si usted tiene una tienda de flores y usa flarrys.com nadie sabra que contiene esa pagina hasta que entre. Es una buena practica incluir una o dos palabras acerca de su actividad en su nombre de dominio. Para un sitio de venta de flores, se podrian usar todoflores.com, misflores.com o florecitas.com.
Si su pagina tiene fines comerciales o corporativos, la eleccion de un .com es casi obligada. Pero en caso de ser una pagina presonal, mucha gente prefiere elegir un .org. Sobre todo es especialmente conveniente elegir algo que contenga su nombre o apellidos, alguna conbinacion. Sus iniaciales tambien estarian bien. Por ejemplo, si usted se llama Luis Luna Rodriguez, podria elegir algo como llr.org, luislr.org o luisluna.org.