Crea tu web, tutor html, css

Guia de estilo

El sitio web

La elaboración de sitios web es una tarea bastante personal, es casi un arte, y al final cada webmaster desarrollará su propio estilo, una especie de firma intangible que baña todas sus páginas. Existen en la red multitud de guías de estilo que ayudan al principiante, y al no tan principiante, a evitar errores comunes y a lograr páginas de cierta calidad.

Por eso no quiero cerrar este manual sin un capítulo dedicado a la forma de hacer buenos sitios web. Al menos desde el punto de vista de un webmaster que lleva algún tiempo en esto. Ojo, no es un capítulo de recetas para resolver problemas concretos, es más bien un resumen, que pretende servir para que quien las lea se plantee las cosas antes de lanzarse alegremente sobre su editor para crear su magnífico sitio web. En Creatuweb existe toda una sección dedicada este tema, mucho más detallada y completa, por tanto esto os debe servir tan solo de aperitivo antes de visitar esas otras páginas.

Tras leer mil y una guías de desarrollo web finalmente crearás tu propio estilo, algo que marcará tu propia forma de crear sitios web.

Por eso es fácil ver como sitios creados con frameworks (como bootstrap o materialize) o usando editores online tipo arrastar y soltar... se parecen tanto entre sí. Son impersonales.

Contenido

Todos hemos visto páginas horribles en cuanto a diseño y estructura, pero cuyo contenido nos ha sido lo bastante útil como para obligarnos a detenernos en ellas. Aunque luego apenas hallamos vuelto a visitarla. Quiero decir que el contenido de una página es básico para que alguien la visite. No esperemos que por publicar las fotos del botellón del viernes vamos a atraer a millones de visitas. Cualquier página será visitada si su contenido es interesante. Así que lo primero es pensar que tenemos que decir, si es que tenemos algo que decir. A la mejor a mi me gusta coleccionar rabillos de boina, pero ¿crees que eso puede interesar a mucha gente? Sin embargo si he peleado con Linux desde su nacimiento y lo conozco como el padre que lo parió, seguro que mi página con el tiempo llegará a tener una gran difusión... y puedo sacarle provecho. El Linux hoy en día es un producto muy en alza.

Ahora si que podrías usar esa plataforma para colocar tu página personal, en la que podrías publicar, por ejemplo, tu curriculum, algo que por si sólo no atraería a demasiados visitantes.

Y claro ya que el visitante ha llegado a tu página no dejes que se vaya para siempre. Haz que tu sitio sea un referente, por ejemplo con una página de enlaces a sitios que traten del mismo tema que la han traído hasta aquí. Para muchos visitantes tu página sería una lista de favoritos. O sea, ser útil al visitante.

Ah, y nunca, nunca coloques páginas vacías. Eso de página en construcción suele ser bastante irritante. Ponte en el lugar del visitante, llega a tu sitio convencido de haber encontrado lo que buscaba y se encuentra con una página con el cartelito de En Construcción. Lo normal es que no regrese.

Un sitio web es un documento y debe tener algún contenido, algo con calidad y que no sea repetir lo mismo que otros.

Navegación

Si quieres que los visitantes recorran tu sitio y descubran lo bueno que es facilítales la navegación, procura que lleguen a donde quieran ir en un par de clicks. No le hagas volver a la página principal cada vez que quiera ir a una u otra sección. Esto lo puedes logar con una buena barra de navegación, un menú sencillo e intuitivo al que pueda acceder esté donde esté.

Una barra o menú de navegación debe contener como mínimo un enlace a la página principal, y uno a cada sección o subsección del sitio. La barra la puedes construir mediante javascript, mediante un frame índice o colocando en todas las páginas el código html de esa barra. Tampoco está de más disponer de un enlace a una página con el mapa del sitio.

Lo ideal es ver como la gente se mueve por tus páginas, mira como se distribuyen las visitas por tu sitio y facilita el acceso a las menos visitadas. Si ves que aún así no aumentan las visitas examínalas por que a lo mejor no interesan. En cuanto a las más visitadas, coloca sus enlaces de forma muy accesible.

Ah, y ojo con los enlaces rotos. Procura repararlos cuanto antes, es como una casa descuidada.

Si tienes un sitio completo debes facilitar el paso de una a otra página. Las barras de navegación se ocpan de esto.

Estructura de las páginas

Dale una estructura lógica a tu sitio. Un sitio web no es tan solo la suma de todas sus páginas, es también el como se relacionan entre sí. Una serie de temas secuenciales como este cursillo puede tener una estructura secuencial: está pensada para que las páginas sean vistas una tras otra, sin saltos. No está de más un botón de página adelante y página atrás en cada tema, pero sin quitarle al usuario la posibilidad de saltar a un tema específico en un momento dado.

Ojo con las páginas excesivamente largas. Aunque el aumento de la velocidad en internet ha permitido superar con creces los hasta hace no mucho recomendados 20 Kb por páginas, si un usuario tiene que desplazar el botón de scroll hasta el suelo es fácil que se vaya a un sitio más cómodo. Si lo que ve en la parte superior de la página no le atrae es probable que no pulse en el scroll vertical, y si este es largo... Procura que en la primera parte de tu página haya información suficiente sobre el contenido de la misma.

Recuerda que, salvo excepciones, a casi nadie le apetece leer en el monitor. Procura dividir tu sitio en secciones o zonas con un número suficiente de páginas, no intentes meter una sección completa en una página.

Ah, y ojo con esas splash pages, esas páginas de acceso que solo contienen un botón de entrar y una bonita imagen. Puede que en algún caso sea necesaria, pero quien llega a un sitio buscando una solución quiere ir directo al grano. En muchas ocasiones estas pantallas de presentación se construyen con Flash y enlentecen innecesariamente la carga, en estos casos siempre se agradece el botón de saltar la presentación (skip intro).

Las páginas web han de estar maquetadas para facilitar su lectura y comunicar mucho en poco tiempo

Accesibilidad

No hagas demasiadas presunciones sobre los medios de acceso a tu página. Puedes presuponer que usarán un monitor en color, pero poco más. Así que procura que tus páginas puedan verse bien en cualquier navegador y con cualquier resolución. Además si tu tienes una magnífica ADSL de 8 Mb/s puede que muchos de tus visitantes se conecten con un modem de 56 Kb/. Lógicamente acertar con esto es más difícil cuanto más amplia sea tu audiencia.

Puede que para mejorar el acceso algunos visitantes desactiven la presentación de gráficos, prevve esta situación colocando en todas tus imágenes lel parámetro ALT .

No abuses de los plugins, muchos usuarios puede que anden con ordenadores limitados en recursos y no quieran esperar a la carga de un pesado applet en Java o una presentación en Flash, si puedes hacerlo con html y alo sumo con Javascript, hazlo.

No todo el mundo tiene magníficos ordenadores o son capace de manejar un teclado o un ratón. La accesibilidad facilitará que tus visitantes puedan navegar por tu sitio

Diseño

Al principio decíamos que una página con un buen contenido era imprescindible par atraer visitas. Pero no cabe duda de que estas visitas estarán más tiempo y regresarán si encuentran un lugar, no solo cómodo como hemos visto, sino agradable a la vista. Algunos gráficos bien situados, sin abusar, junto a unos colores nada agresivos pueden hacer que elijan tu página antes que la del vecino en la lista de enlaces de un buscador. Si usas una imagen de fondo procura que no moleste la lectura y que no distraiga. Cuidado también con los colores de texto y de fondo, busca el máximo contraste.

Si tienes que destacar algo puedes usar algún gráfico animado discreto, visualmete pesan mucho y distraen. Claro que si estas diseñando una página infantil estos elementos son fundamentales.

Evita en lo posible los bordes en las tablas, una página muy fragmentada se ve mal. Si usas bordes intenta que sean discretos y solo los imprescindibles.

En cuanto a los frames, si no tienes más remedio usalos pero recuerda que las pantallas de los monitores tienen una superficie limitada. Procura no colocarles bordes ni las barras de scroll.

Un buen diseño debe ser impactante, atraer la atención del visitante y mantenerlo en tu sitio.

Mantenimiento

Si has programado alguna vez sabe que el trabajo no termina cuando el programa está en marcha. Y si no has programado nunca también deberías saberlo, basta con que te fijes en la versión actual de tu navegador y la versión del mismo aue corría el año pasado. Cualquier producto informático acaba realmente en un continuo proceso de mantenimiento, comprobar que todo funciona y mejorar todo lo mejorable y como no hay nada perfecto ... todo es mejorable. Comprobar porqué una sección no es demasiado visitada, o actualizar la lista de enlaces o tantos detalles son algunas de las tareas que el webmaster no puede olvidar.

En este sentido una buena costumbre es colocar encuestas que permiotan a tus visitanes opinar o calificar algunos aspectos de tu sitio. El visitante siente que cuenta para el autor de las páginas y te puede ayudar a ver ese error en el que tu no habías caído.

Tampoco está de más mostar la fecha de la última modificación que hicistes a tu página, el usuario sabe si la información de tu sitio es actual o ya está superada.

Deja alguna zona de tu portada para publicar las novedades que vayas incorporando a tu sitio o para publicar las secciones más interesantes, las que quieras difundir más.

Y recuerda que en el area principal de Creatuweb tienes una guia bastante más completa que este pequeño resumen.

Ten en cuenta que la tecnología y los gustos evolucionan. Tu sitio requerirá adpatarse a los tiempos. Debes prever un mantenimiento fácil de tu sitio