Tips para desarrollar un website

Si acabas de entrar al mundillo del desarrollo web, y estás perdido (rediseñaste miles de veces tu website), o simplemente entraste a trabajar y te has dado cuenta que todo cambia, esta guía te va a contar prácticamente todos los puntos necesarios que debes pensar a la hora de desarrollar un website.

Introducción

Recuerdo mis primeros días en mi primer trabajo como desarrollador web, fué algo gracioso ya que yo poseía experiencia en el ámbito del desarrollo HTML y tenía un fuerte background en diseño (no web sino print/prepress). Recuerdo que cuando empezaba a desarrollar nunca seguí un patrón de tips como el que he escrito ahora.

No sabía ni lo que realmente era un website. Yo creía que un website era algo mágico, al cual la gente entraba y decía “¡woa!”, y sobre todo, siempre pensé que la gente vendría a mi website con 400 imágenes animadas, navegación desarreglada, colores mal equilibrados y eso para leer sólo 2 líneas de texto que era lo que yo escribía por semana.

Esta guía está basada en un extracto de las mejores publicaciones que se han hecho desde el año 1996 hasta la actualidad, y que yo he recopilado y volcado en estos documentos. La guía se divide en 12 partes.

Notas de este artículo

Esta guía esta sujeta a cambios o actualizaciones y también sugerencias de los lectores. Si te parece que falta hablar de algún tema escríbeme y actualizaremos esta mini-biblia del diseño web :)!.

Planeando el sitio

Antes de abalanzarte sobre cualquier editor de HTML o tocar Flash 5 para hacer tu website, deberías primero pensar qué va a tener tu sitio (esto suena a… “uh que bobada”; sí, es una bobada… pero nadie lo hace). Básicamente planear tu sitio te ayuda a tener todo mucho más claro y te ahorra tediosas horas de modificaciones.

Como buen comienzo puedes preguntarte a ti mismo para que quieres un website, si con esa pregunta no encuentras un sentido claro, o quizás dices “para estar en Internet”, ¡no vale la pena que lo hagas!, no es que yo no esté de acuerdo, sólo que Internet se trata de un medio masivo de comunicación.

Piensa que la gente que visita websites lo hace con un sólo fin: buscar información, por lo que si tu sitio no posee dicha información, tu proyecto fallará.

Ahora piensa de esta forma… piensa qué contenidos debería tener tu website para la gente que lo visitará. Por ejemplo… “yo, Juan, quiero hacer un website de juegos”. Muy bien, ahora Juan deberá pensar qué datos interesarán al público que supuestamente visitará su website. Esto es SUMAMENTE fácil, y todos los profesionales hacen esto, por más estúpido que se vea. Una buena forma es averiguar qué es realmente lo que les gusta a los usuarios que visitan sitios de juegos o, mejor, ir directamente a la fuente del problema, o sea ir a salas de vídeo juegos, casas de juegos o entrevistar a tus amigos.

Éste ejemplo lo puedes seguir con cualquier tema, a esto lo podemos llamar profesionalmente como Investigación.

Tener un objetivo

Toda página de Internet debe tener un objetivo, estos pueden ser: educar, informar, entretener. Si tu no puedes lograr que tu página cumpla o logre claramente algún objetivo, entonces tienes que re-pensar todo de nuevo y revisar qué es lo que está fallando. Piensa otra vez cuáles son los objetivos de tu website… ¿para que le servirá a alguien visitar tu sitio?.

Crear el contenido antes del diseño

Un pequeño ejemplo: Juan, nuestro amigo, quiere hacer cada semana una página que describa un juego con todas sus características. Averiguando y recopilando datos, Juan organizó toda la información en una página (esto lo hizo en un con un lápiz), empezó buscando cada dato que requeriría la página de descripción del juego mediante todo el material recopilado, entonces leyendo todo su material encontró que el tenía este tipo de datos.

* Nombre del juego.

* Nombre del creador.

* Género.

* Una fotografía.

* Reseña del juego o descripción.

* Su precio.

De esta forma, Juan se asegura de tener todo en orden, sin complicaciones. Y cuando llegue la hora de dar forma a la página, él tendrá en cuenta esa información.

Agregar valor en vez de desvalorizar todo

Una página sin valor propio es considerada en la mayoría de los casos como algo inútil, algo que no sirve. Lo que hace útil a una página que su información sea única, cuanto más original sea tu contenido, más visitada y valorada será tu página.

En cambio si tu sólo provees de links a tu página, lo único que logras es que los usuarios observen un poco y psssfff se van…

Para poner muchos links a cualquier lado están los buscadores. La gente, si quiere ver un listado de links, antes que leerlos en tu página utilizará algún buscador como Yahoo!, por eso hay que ser muy cuidadoso con el tema de links (enlaces). Sólamente ubica éstos de forma que agreguen un valor adicional a tu información. Que tus usuarios primero lean el contenido y cuando no tengas más que añadir, apúntales a un listado de links relativos al tema.

Esta regla de los enlances, no se aplica a los weblogs (bitácoras), ya que la base de estos lugares son los enlaces…

Dar información básica

Siempre existe básicamente una información esencial que debe estar ubicada al alcance de cualquier visitante en las páginas. De hecho, cuando se inventó el hipertexto, todos los documentos poseían una firma con el creador del documento, e-mail, fecha, y otros datos, pero con el correr del tiempo y la anarquía de Internet, hicieron de éste algo obsoleto. Pero esta información básica se recomienda, al menos, ponerla en una sección de contactos o una sección de autor.

Dar la información del autor o del contacto de la persona

Para que todos sepan quien es el responsable de la página, debes proveer esta información de modo que todos te puedan contactar. Esto, como en las viejas épocas del hipertexto, no hace falta ponerlo en todas las páginas, basta con ponerla en la principal, o crear una sección de contacto y éste link sí debe estar incluido en todos los links. Debes incluir esta información:

* Autor o responsable para contactos (ej. webmaster, dueño de la página)

* Nombre de la institución, empresa, grupo, asociación, etc. donde trabaja el autor (esto es opcional).

* Dirección de e-mail del autor, responsable, o encargado de mantenimiento de la página.

Con éstos datos aportarás a los visitantes una manera cómoda de contacto.

Como primer consejo, debes poner esta información claramente visible en la pantalla. Además para obtener mejores resultados, puedes ubicarlas siempre al final de la página principal. La razón es que la mayoría de los documentos impresos y websites comerciales poseen la información de contacto en la parte inferior de los documentos, salvo algunas excepciones como las cartas de empresas, etc. Estos son ejemplos de cómo crear algo simple:

Ejemplo 1 de información de contacto simple:

Diego Martín Lafuente, Presidente

mailto:biotwo@hotmail.com

Ejemplo 2 de Información de contacto completa:

Diego Martín Lafuente, Presidente

TEL: (5411) 4231-4189

Con estos ejemplos puedes hacer tu sitio algo más creíble. Cuanta más información proveas, más creíble será tu contenido. Los sitios anónimos suelen ser los más desconfiados, la gente siempre desea saber quién escribe, por es esta información les permitirá contactarte directamente. Así se animan a escribirte y preguntarte cosas.

Cuanto más rápido respondas, más creíble sera tu información, más visitantes ganarás por recomendación. Todos estos puntos son un granito de arena que pronto llenara el balde.

Identificar tu página, compañía o institución

Todas las páginas necesitan, en cierto modo, una identificación, algo que indique que el contenido que están leyendo es de tal persona. La identidad del sitio es el logo que se ven en la parte superior de las páginas.

Esto le agrega un valor muy grande a tu website, puedes crearte el tuyo, puedes pedir o contratar a un diseñador gráfico para que diseñe tu identidad (por supuesto, si vas a tener una página personal, contratar a un profesional para que diseñe tu identidad no es lo más adecuado pero si tienes una empresa que ya posee identidad -al menos el 99,9 tienen un logotipo- es recomendable ubicarlo en todos las páginas). Así estás, de una forma u otra, fijando tu marca, tu identidad, y cada vez que alguien que haya visitado tu página vea un logotipo o algún botón o imagen que tenga tu logotipo, te recordará y es muy posible que vuelva a tu página.

Estas son las identidades que yo he diseñado. Obviamente tienen un estudio de por medio, pero cualquier símbolo que puedas crear y promocionarlo puede servir y ser muy famoso como el logotipo de Yahoo!.

Ubicar tu URL

Muchos usuarios accederán a tu página de una forma anónima. Es decir, mucha gente presiona links en otras páginas y ni siquiera leerán a dónde se dirigen. Una buena forma de que los usuarios sepan donde están es ubicar en la página principal la dirección de tu sitio; no importa que no poseas una linda www.nombre.com, eso no es lo que importa. Pero si les provees información de la dirección de tu sitio pueden anotarla, guardarla en favoritos o imprimirla.

Truco de manga: Si observas en la parte inferior de todas las páginas de este sitio puedes ver la URL principal de este sitio.

Muéstrales a tus usuarios que tu contenido se actualiza.

Si tu sitio posee información que se actualiza diariamente, semanalmente o mensualmente, una buena opción es agregar algún tipo de información que lo indique. Hay varias formas, una puede ser:

Ejemplo 1: (cuando la página tuvo una actualización)

El contenido de esta pagina cambiará el 16/05/2001.

Existen otras formas que permiten obviar este tipo de mensajes, como ubicando en cada parte que se actualiza el contenido la fecha.

Comunicación efectiva

Tratar de comunicar efectivamente todo el material que agregues a tu sitio hará que éste sea mucho más valioso y den ganas de volver a leerlo, imprimirlo o recomendarlo, además si logras expresar esto con mensajes claros y con estilos, ayudará a crear un útil y claro mensaje.

Mantén las páginas lo más cortas posibles

En este caso no es un buen ejemplo, pero si nos dirigimos a la página del weblog, veremos que el texto y la página en sí es corta.

Además la lectura en párrafos estrechos y cortos hace la lectura más rápida y clara. La gente suele leer más comúnmente párrafos cortos que párrafos largos, especialmente si tienen que hacer scroll. El drama es que no todo el mundo posee ratón con ruedita (lo cual hace todo más placentero)… sin él la cosa se hace más tediosa.

Esto está comprobado, no solamente por mi… sino gracias a varios test que he realizado con usuarios para todos los sitios que he trabajado…

Como consejo, te recomiendo usar párrafos cortos y angostos, que sean fáciles de leer. Si escribes en castellano, trata de usar un castellano neutral, no utilices términos lugareños, ya que mucha gente no sabrá de que estás hablando. En el caso de que escribas con tu idioma natal, aclara las palabras o términos lugareños.

¡Ah! suena gracioso, pero esta página tiene una mezcla de castellano español y castellano latino, la verdad fue una elección que tomé ya que me encantaría ambientar a todo el mundo que vaya a leer estos artículos.

Una solución alternativa es revisar el curso para hacer los tags de ayuda con CSS.

Usa links específicos

Evitar las frases enlazadas al mejor estilo, (clic aquí!, pincha aquí, pulsa aquí para leer), esto no solamente confunde. Es más didáctico e intuitivo enlazar el significado de lo que se va a leer, que enlazar la acción, además si agregas un title=”” a los enlaces, ayudas a saber qué es lo que un usuario va a ver en la próxima página.

Ejemplo 1: (incorrecto)

Mira mis fotos de mis últimas vacaciones.

La razón creo que ya ha quedado clara. Los usuarios sabrán mejor qué están pinchando que si tienes la página llena de explicaciones como clic aquí, clic allá.

Usa el mismo estilo para todo

Evitar los cambios de estilo entre páginas de tu sitio lo hace menos confuso. Usa el mismo color de fondo, y elementos gráficos, frases para informarle indirectamente que todavía esta en tu website. Como habrás notado si navegas en todo este website, nos hemos cuidado de que todo sea muy parecido. Esto es una gran ventaja: usar las mismas letras, los mismos colores, tratando de no usar imágenes de otros websites o de esas páginas que tienen miles de imágenes gratis de la web, esto también en cierta forma perjudica.

Mucha gente se pone furiosa con el solo hecho de ver que usas los mismo gráficos que otro website usa. La gente inocentemente e inconscientemente llama a estas personas “rippers”.

Colores de los websites

Si bien es muy lindo ver websites coloridos, también es muy asqueroso leer textos con fondos fucsias, magenta, amarillos, azules brillantes,… Nuestro sensible ojo reacciona de una forma muy particular cuando recibe halos de luz, cuanto más brillantes sean, más dificultoso será navegar, leer.

Otro punto y consejo es usar un buen contraste. ¿Qué significa esto?, por ejemplo esta página está diseñada con un gris que llega casi a un color negro, esto me facilita un color mas pastel, mas suave,… la sensación es menos aguda cuando leo las letras en color gris llegando a blanco, dije gris, por que si fueran blancas la pagina contrastaría demasiado y estamos en la misma, la mejor forma de hacer esto bien, es fijándose qué colores usan los mejores websites.

Como recomendación, las mejores páginas para leer son las que poseen fondo blanco, con letras negras, blanco 100% y negro 100%, o el contrario. Siempre trata de buscar el equilibrio visual y un buen contraste, recuerda no usar colores muy cercanos, por ejemplo usar un amarillo fuerte, y un verde fuerte de fondo, esto hace que los colores se mezclen, y sea mucho más confuso para leer.

Una imagen vale por mil palabras

Esto es un cuchillo de doble filo, muchas veces una imagen nos ayudaría a explicar algo, o terminar de resumir una acción, pero otras está ahí para ayudar a confundir. Cuantas más imágenes uses, más tardará tu página en descargarse. Utiliza sóolamente imágenes que den contenido a tu website, evita utilizar separadores animados, iconos animados, banners, y todas esas cosas que entorpecerán al usuario que esta indagando en tu página.

Ayudar a los usuarios a encontrar el camino

Haz que tus usuarios encuentren lo que buscan en tu sitio. No es muy difícil y ayuda a que el usuario se cree un modelo mental de cómo esta armado el sitio, y así hallar las cosas más intuitivamente.

Usar Keywords (palabras claves)

Los keywords son palabras claves que están en el código de muchas páginas web, no sólo en una recomendación de la W3C.

Los keywords ayudan a los buscadores a que organicen todos tus datos en sus base datos. De esta forma ellos catalogan tu website gracias a todas las palabras claves que tu has provisto, es fácil ya verán.

Este proceso no es automático del todo. Una vez que termines de escribir los keywords en tu página debes enviar la url a un buscador como Altavista o HotBot. Una vez hecho eso, el mismo motor del buscador visitará tu página y extraerá los keywords que vos creaste para almacenarlos en su base de datos. De esta forma, cada vez que un usuario escriba en un buscador como HotBot alguna de las palabras claves que vos pusiste en tu website, en el resultado aparecerá la URL (dirección) de tu website, no garantizo que salgas primero de la lista ;), eso es una cuestión dinero.

¿Cómo esta compuesto un keyword? aquí te muestro un ejemplo.

Estos keywords se arman con el tag , el cual define el tipo de datos, y este tag , va ubicado entre el tag y el tag que cierra que sería . El ejemplo sería:

Provee un directorio de tus páginas

¡Ay! si hay algo útil que puedes hacer es categorizar tus páginas en directorios, al mejor estilo Yahoo!.

Esto debe estar bien organizado, para eso puedes armar un modelo de la estructura de tu website en un , el método es fácil y rápido.

En cambio si tienes muy pocas páginas no vale tanto la pena, aunque mantener una estructura por más pequeña que sea al estilo de Yahoo!, ayudaría a que tus usuarios encuentren las cosas más rápidamente.

Indica a tus usuarios en que página se encuentran

Este ejemplo puedes verlo en esta misma página exactamente, debajo del logo, se encuentra una pequeña línea de texto de navegación que tiene dos links básicos. Sin dramas, los usuarios saben en qué sección están, pueden ir o al inicio de este sitio o al artículo siguiente o anterior. Estos se llaman niveles, en los cuales el usuario puede ver una mini-estructura líneal del sitio, o sea una rama.

Usa títulos descriptivos para tus páginas

Todas las páginas en Internet (al menos la gran gran mayoría) usan el tag

Ejemplo 2: (Un poco mejor pero poco explicativo)

Ejemplo 3: (Mucho mejor y más descriptivo)

Crea un equilibrio en tu website

Para tener un sitio que sea exitoso, debes lograr que el usuario encuentre información sin hacer más de 3 clicks. Esta regla viene siendo estudiada por personas que se dedican a esto, que se dedican a analizar a las personas, cómo navegan, qué les gusta hacer usualmente y qué no,… y de esos estudios salió el problema del sobrepaso de links. La gente se aburría de hacer muchos clicks para poder ver una foto, bajar un archivo, leer un cuento, etc. Por eso que debes tratar de que toda la información de tu sitio sea accesible con pocos clicks. Si lográs esto, tu sitio tendrá grandes ventajas de navegación.

Trata de evitar los links muertos (IMPORTANTE)

La sensación de un usuario cuando hace click en un link y recibe un error de tipo “Página no encontrada”, es muy similar a poner una moneda en una máquina de golosinas y que no salga la golosina: es como quedarse con las manos vacías. Existen muchos programas (algunos gratuítos, otros shareware y los de pago) que pueden chequear los links muertos o sin destino de tu website. Recuerda chequear periódicamente esto, porque cuantos menos links muertos tengas, mejor se navega por tu sitio y más satisfacción tendrán los usuarios que naveguen tu website.

Una solución es proveer una página de error personalizada. En este servidor todavia sigue una página 404 muy informativa, pueden mirarla.

Los 404 son páginas que avisan al usuario que se equivocó al escribir la URL o si bien el administrador del sitio se olvidó de cargar dicha página.

Ésta página debe ser muy muy amigable en el mensaje, para no tratar de tonto al usuario… un buen punto para completar esta página es incluir un mail de contacto al cual el usuario te puede mensajear y así vos podés corregir el error.

Considera ubicar una sección de links principales en tu sitio

Creando una sección así ayudas al usuario a navegar tu sitio fácilmente. Trata de no usar muchos efectos, los usuarios no le prestan atención a los efectos.

Duplica los links de navegación principal en el fondo de las páginas

Este ayuda mucho a cambiar de páginas cuando un usuario termina de leer o de desplazarse hasta el fondo de las páginas, de esta forma el usuario se ahorra volver hacia arriba y seguir la navegación.

Si tu sitio es complejo, incluye un buscador

Si tu sitio es complejo, muchos links, muchos artículos (éste por ejemplo) es bueno que incluyas un buscador. El 95% de los usuarios de internet usan más los buscadores que las mismas páginas.

La gente adora entrar a un sitio, buscar lo que necesita, encontrarlo rápida y fácilmente. Esto le aporta un valor increible, pero repito, esto sólo en el caso de que tu sitio sea muy grande en cuanto a cantidad de páginas.

Asumo que no puedes programar por tu cuenta un buscador (créeme no es fácil) y sólo programadores experimentados lo logran hacer, pero ¿entonces ¿Cómo hago para tener un buscador?, la respuesta es no existen buscadores de Javascript, ni tampoco Applets de java que busquen específicamente y eficientemente algo, pero sí existen buenos buscadores web que analizan tu página, te ofrecen un buscador gratuito (te dan el codigo html), lo ubicas en tu página y ahora tienes un buscador profesional en tu página el cual ayudará a tus usuarios a encontrar lo que querían.

Para más información dirigete a http://www.google.com/intl/xx-hacker/services/free.html.

Nota: Este sitio ya tiene buscador, esto agilizará el proceso de buscar información de interés para el usuario, lo he hecho gracias a http://www.atomz.com/ . Configurar una cuenta no fue dificil, lo que fue más o menos difícil fue configurarlo estilísticamente a las páginas de resultado.

Diseñar eficientemente

Diseñar eficientemente en Internet, sobre todo websites, no es tarea fácil. No hablo de diseñar espectaculares presentaciones en flash, alucinantes gráficos en Adobe Photoshop; hablo de diseñar para el usuario, diseñar para la gente que visita la página y no para tu gusto, diseñar páginas eficientes, que se descarguen rápido en conexiones bajas, recuerda que todavía hay gente que usa módems de 28.800 kbps o de 33.600 kbps.

Olvídate de diseñar páginas para gente que tenga conexiones rápidas. Con ese pensamiento mucha gente que entre a tu website se irá defraudada por no poder disfrutar de todo el contenido; debes tratar de hacer el sitio que sea accesible para todos.

Recuerda también que diseñar eficiente es diseñar con código estándar, http://www.w3c.org/, es el lugar adecuado para saber que tags son los permitidos.

Utiliza imágenes pequeñas

Cuanto más livianas sean tus imágenes, menos tardarán en descargarse; utiliza formatos .GIF para la mayoría de las imágenes, y para las fotografías utiliza .JPG. Como diseñador gráfico te recomiendo que las imágenes .jpg se encuentren al 60% de calidad, obtendrás una buena imagen de calidad respetable para la web, que se descargará rápida.

Que tus páginas sean más livianas

Cada página web tarda su tiempo en descargarse a tu máquina, y luego el navegador tarda un tiempo extra en armar toda la página para que la puedas ver, esto se llama rendering.

El navegador “compila” la página, eso obviamente es un tiempo bastante corto a comparación de cuando esta descargando la página de un servidor pero si sumas los dos tiempos obtendrás un tiempo final. Trata de que tu página tenga un código limpio, y si tienes mucho texto en una página en especial, parte el texto o distribúyelo en varias páginas. Este tutorial es bastante grande para ponerlo todo en una página, así que también podría dividirse en varias páginas, así la descarga no es tan obsesiva para tu conexión.

Evita usar Javascript, o HTML propio de una empresa

Mientras tu página no use código javascript, applets de java ó código de un navegador, tu página podrá ser vista desde varios navegadores, sin mensajes de error. Recuerda que si tu página tiene muchos mensajes de errores o tu página se ve muy distinta en distintos navegadores, los usuarios se irán descontentos.

Animaciones, website hechos en flash

Evita hacer pantallas (intros, introducciones) con animación en Flash. En el caso que quieras (estás en todo tu derecho) trata que de que la introducción se descargue rápido, mucha gente ya odia las introducciones. El sólo hecho de esperar 5 minutos para poder ver el sitio es bastante tedioso; una buena alternativa es poner un link debajo la película de introducción que diga “saltar introducción” ó “ingresar al sitio”.

Otra buena opción sugerida por Korochi es directamente cargar la página que le seguiría a esa introdución y como toque final poner un link a la vista que diga “Ver presentación”. Si haces eso, podrás saber cuanta gente quiere verla; no obligas a nadie y todos felices.

En artículos futuros hablaré más detalladamente sobre Flash, sus problemas, sus ventajas, y cosas que se pueden hacer. Si quieren averiguar más cómo desarrollar cosas profesionales en flash aquí les doy una buena URL, el sitio de mi amigo Ivan Ivanoff: es una obra de arte en Flash, se descarga rápido, sin introducciones y tiene una navegación experimental muy intuitiva, apunten hacia http://ww.i2off.org/.

Cómo hacer que todo luzca lindo

Esto es algo bastante particular, si bien el título hace entender cómo hacer que las páginas sean mágicamente hermosas en diseño, esto es cuestión de que tengas alguna base en diseño.

El diseño es algo de piel, explicarlo es complejo… pero básicamente ninguna página es bonita para el 100% de la gente por más que hayan trabajado los mejores 20 diseñadores en ella. Será linda para algunos, y fea para otros, pero esto no quita que la página sea prolija, a esto es lo que va esta sección de este tutorial.

Recuerda también que diseñar eficiente es diseñar con código estándar, http://www.w3c.org/, es el lugar adecuado para saber que tags son los permitidos.

Formatea tu página correctamente

Formatear (dar forma) correctamente es algo que muchos no respetan, esto se basa en utilizar las propiedades que el lenguaje HTML nos provee. HTML es un lenguaje estructurado, modular, que nos permite dar forma una y otra vez a un mismo contenido.

Evita usar fuentes (tipografías) que no sean estándares, si tienes un CD-ROM con 2,000 tipografías y te gustó una y la utilizas para diseñar tu página ésta podrá ser vista únicamente por gente que posea esa misma tipografía. Agrégale que mucha gente posee sistemas Macintosh, Linux, Unix, y todas las tipografías siempre tienen alguna variante.

Es por eso que aquí hay una lista de las tipografías que medianamente se encuentran ya instaladas por defecto en los sistemas operativos, y además son también instaladas por los navegadores en caso de que no existan, de esta forma todos podrán ver tu página como tu las habías diseñado, aquí va la lista:

* Arial

* Courier

* Garamond

* Geneva

* Tahoma

* Times New Roman

* Verdana

En la lista se pueden agregar más pero solamente quiero poner las más conocidas.

Sigue en la Parte II

Minid

Minid es el autor de Minid.net un Weblog de tecnología, Diseño, Usabilidad, Arquitectura de la Información, Geeks vs. Nerds. Este artículo está publicado con su permiso.