Crea tu web, tutor html, css

Guia básica para diseñar tu sitio web

Si ya has visitado la sección dedicada a las tareas previas al diseño sabrás que un sitio web consiste en un conjunto de páginas interrelacionadas entre si con un objetivo o tema común. Y también has visto que crear un sitio web exige un planeamiento y un trabajo meditados. A estas alturas ya tienes tu entorno preparado, las herramientas de trabajo dispuestas, sabes lo que vas a crear y tienes algún contenido para comenzar. Y por supuesto conoces los lenguajes de la web que vas a usar, al menos HTML5 y CSS, aunque actualmente el uso de Javascript es prácitcamente indispensalbe para cualquier desarrollador web. Y si vas a tratar con bases de datos y aspectos avanzados necesitas PHP y MySql.

La creación de páginas tiene mucho de desarrollo web, parte técnica, y de diseño estético, la parte visual. Ambos aspectos son importantes a la hora de publicar tu sitio en la red. Recuerda que todo va encaminado a que la experiencia del usuario sea óptima, y un buen contenido se ve mejor si está bien envuelto..

Es momento de ir recopilando elementos de contenido para tenero preparado cuando comiences a editar. Lo primero que deberás decidir es que estructura tendrá tu sitio, como se organiza. No solo a nivel de las páginas sino también de la organización de los archvios: las páginas, los scripts, los estilos, imágenes.

Luego vendrá la parte de diseño propiamente dicho. Como vas a combinar los elementos que forman las páginas, que colores vas a utilizar, que estilo de imágnes, como lo vas a mostrar todo en pantalla.

Y una vez veas que todo funciona el último paso será enviarlo a tu servidor, publicar y publcitar. Dar a conocer el sitio es fundamental si quieres que lo visiten. Aquí viene el trabajo de redes sociales, hacerse notar en el entorno y ofrecer un buen contenido que responda a las necesidades de los usuarios.

Diseñando la apariencia de tus páginas

¿Y por donde empiezo?

Si eres muy creativo en poco tiempo puedes tener todo el esquema visual de tu sitio planteado. Es lo ideal, pero no todo el mundo tiene esa facultad. Así que como primer paso una buena idea es visitar otras webs, sobre todo aquellas con contenidos similares al de tu sitio. No para copiar (la originalidad tiene premio en internet), sino para inspirarte, para ver como funcionan las combinaciones de colores, como pueden usarse las imágenes, que textos se leen mejor, cuales son más atractivos.

Y si tiens prisa y quieres tomar un atajo no dudes en usar plantillas de diseño. Las hay para cualquier tema, incluídos CMS como wodpress y no son nada caras.

Aunque tu sitio contenga muchas páginas diferentes, debe existir una coherencia entre todas ellas. Si tienes secciones de la web claramente diferenciadas puedes usar diseños ligeramente diferentes, pero procura mantener todo lo más uniforme posible en colores, tipografías, estilos de imágenes y estructura de las páginas.

Cuando tengas una idea de como quieres que se vea el sitio haz un esquema o boceto. Realmente harás varios hasta quedarte con uno. Puedes usar lápiz y papel, es solo un boceto, Pero también puedes usar un programa de edición de imágenes. Haz un dibujo con la estructura de tu página y con los colores que vas a usar, no tienes que detallar mucho. Y probablemtne luego cambies algo a medida que vas llenado la web de contenido, pero esto te dará el punto de partida.

Hay programas de gráficos que pueden exportar lo que dibujas a HTML y crear una página web, pero no te lo aconsejo. No se consigue buen código y raramente es un código responsive, adaptable a los diferentes formatos: movil, ordenador, tablet...

En todo el proceso de edición de las páginas ten en mente que tus sitio va a ser encontrado por los buscadores web, que es como decir por Google. Lo ideal es que aparezcas en los primeros puestos, pero eso no es tarea fácil. Son muchos factores lo que determinan la posición de las páginas en los resultados de búsqueda. Las llamadas técnicas SEO se usan para tratar de alcanzar esas posiciones privilegiadas. Estas técnicas no son infalibles, sobre todo si tenemos en cuenta que Google cambia los factores para situar las páginas y que estas factores no los conoce nadie.

Para empezar aquí tienes algunas medidas SEO que se pueden usar en la fase de creación:

  • Títulos de páginas con palabras clave de búsqueda del sitio
  • Tratar de optimizar para plabraas clave muy específicas
  • Uso equilibrado y natural de las keywords en el texto de la página
  • Uso adecuado de los formatos de encabezado (por ejemplo un solo H1)
  • Utilizar la etiqueta ALT en las imágenes
  • Optimizar el tiempo de carga de las páginas
  • No usar páginas muy vacias, con poco contenido
  • No usar técnicas que traten de confundir el usuario
  • Contenido original y valioso, útil.
Si quieres saber más sobre el SEO te aconsejo que leas esta introducción, no es una guía supercompleta pero te servirá para conocer qué es, como funciona y cimentar más el desarrollo de tu sitio.