Primero pasos para crear una página web

El desarrollo web es un proceso creativo y personal en el que cada uno decide cómo hacer las cosas, por lo que estos pasos que te propongo aquí son sólo eso, propuestas, ideas, sugerencias o como quieras llamarlo. Cada uno después puede optar por hacer las cosas como prefiera.

No obstante, puede ser interesante que visites las secciones accesibilidad, usabilidad y posicionamiento en buscadores antes de comenzar a elaborar tu trabajo, ya que cuando las leas comprenderás que hay que tener muchas cosas en cuenta a la hora de elaborar una web y sus contenidos si queremos tener cierto éxito.

Una vez aclarado esto, hay que decir que para el diseño de páginas web debemos tener en cuenta varias etapas:

Resumen del Contenido

1. Planteamiento de objetivos para tu página web

Esta etapa es muy importante y con frecuencia se pasa por alto. Se trabaja en el papel para plantearnos el proyecto y qué queremos conseguir al realizar nuestra web. La planificación de tu web debe incluir:

Breve descripción de los contenidos de la página, su título principal, etc.
Finalidad que busco al hacerla (informar, hacer negocio, entretener, vender productos o servicioes, etc.)
Páginas parecidas a la mía, qué puedo ofrecer yo que no tengan ellas para atraer a mi público objetivo, etc. Buscar que hace tu competencia
Hardware, software, documentación que necesito para realizarla y de qué dispongo realmente.
Describir cuál es mi publico objetivo, nivel informático, idiomas, intereses, etc. para adaptar la página a sus características.
Dónde se va a visualizar la web; navegadores más utilizados, plugins, elementos específicos, etc.

2. Estructurar el contenido de la página

Es importante también que pensemos en la estructura de los contenidos de todo el sitio antes de ponernos a diseñarlo. En este punto tenemos que pensar sobre varias cosas, como las distintas secciones que va a contener el sitio, el árbol de las páginas que vamos a tratar, etc.

La manera de que este punto sea realmente útil, es preparar todas estas ideas sobre el papel. Con toda la tranquilidad del mundo podemos preparar una serie de diagramas y listados, que nos permitan dirigir nuestros esfuerzos de manera óptima. Esto se puede hacer en un lugar tranquilo, que nos permita pensar con calma y poner en marcha la imaginación, o incluso puedes hacerlo en un bar, con algún amigo o compañero, tomando una cerveza y escribiendo en una servilleta de papel. Cualquier esfuerzo de planificación lo agradecerás en el futuro y servirá para construir tu web con unos cimientos más sólidos.

Es conveniente que dibujemos un organigrama con todas las partes del sitio web, distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos multimedia que se consideren pertinentes, mediante el cual ir creando la estructura de la página web. Antes de empezar a desarrollar tu página web en el ordenador, debes tener muy claro cuáles serán sus contenidos, su estructura, el nombre de la página, etc. cosas que no se deben hacer sobre la marcha para evitar rectificaciones innecesarias, trabajo inútil y pérdidas de tiempo. Hay varias maneras de estructurar el contenido de una web:

En árbol: Esta estructura está compuesta por una página principal que enlaza con otras páginas, las cuales, a su vez, enlazan con otras páginas de nivel inferior. De esta manera se agrupan las páginas web en niveles, de tal modo que para llegar del primero al último se debe pasar por todos los intermedios. Esta estructura es poco navegable si tenemos una web con muchas páginas, porque para ver las páginas de otra rama tenemos que retroceder hasta la página principal, haciendo la navegación muy pesada.

En lista: Esta estructura es la opuesta a la anterior. En ella no existe página principal ya que todas están en el mismo nivel. Para llegar a la última página hay que recorrer todas las anteriores. Es una estructuración muy adecuada para la presentación de manuales o aplicaciones donde el usuario deba recorrer forzosamente una serie de páginas web para conseguir su objetivo.

Estructura web en lista

Mixta: Esta estructura es una combinación de las dos anteriores. Las páginas están jerarquizadas en niveles, los cuales a su vez están conectados entre sí en forma de lista. Esta estructura es mucho más navegable y práctica, puesto que permite poder desplazarse de rama en rama sin necesidad de volver a la página principal para hacerlo.

En red: Esta estructura supone que todas las páginas de la web están conectadas entre sí, por lo que es una estructura más compleja y menos ordenada. Su ventaja es que desde cada página podemos ir a cualquier otra del sitio. No obstante, requiere mucha planificación para evitar ofrecer al visitante un caos de enlaces innecesarios.

Una vez tengas claro lo que quieres hacer y su estructura básica puedes empezar a recopilar información para confeccionar cada sección de tu página web. Conforme vayas investigando sobre el tema de la web, casi con seguridad irás realizando modificaciones tanto en su estructura como en sus contenidos para adaptarla mejor a lo que has aprendido, por lo que es conveniente que trabajes sobre borradores, no con versiones definitivas, te ahorrarás mucho trabajo. Por ejemplo, puedes haber decidido hacer una web sobre Ferrari, y en cuanto a su diseño querer colocar un menú a la izquierda con las secciones principales, un cuerpo central con el contenido de la sección y una última columna a la derecha donde insertar tu publicidad. No obstante, puede ocurrir fácilmente que al buscar información sobre su escudería encuentres tanta y tan diversa que llegues a la conclusión de que es más cómodo para los visitantes colocar un menú de navegación específico de la sección en la izquierda y el principal en la derecha para que puedan navegar por la sección con rapidez. Por lo que si ya hiciste la página definitiva de la sección llamada escudería, tendrás que retocarla para adaptarla a tus nuevas necesidades, lo que supone un gasto de tiempo y esfuerzo innecesario.

En este apartado tenemos que dejar claro:

Secciones del sitio web: Podremos pensar en qué secciones vamos a poner en el sitio. Una con información general, otra con información de contacto, otra con una visita gráfica a nuestras instalaciones, etc. Tenemos que procurar agrupar las distintas informaciones en páginas y conseguir ofrecer una información completa.

Árbol del sitio: Podemos dibujar en un papel cuáles son las distintas secciones del sitio, metidas dentro de cuadrados y representar también los enlaces que hay entre cada sección, mediante líneas que unen esos cuadrados. Es algo muy simple y divertido de hacer, además podemos tener nuevas ideas para el web a medida que lo vamos dibujando.

Esquema de una página: podemos dibujar en papel también cómo sería una página del sitio que vamos a construir, para decidir dónde colocar la barra de navegación, el logotipo del sitio o la empresa, un posible banner publicitario, etc. Este esquema puede ser también de utilidad a la hora de construir las páginas y siempre es más fácil diseñar sobre el papel que diseñar directamente con el ordenador.

Estos pasos son opcionales. Está claro que cualquiera puede ponerse a construir una página nada más decidir que desea tener una web, pero no siempre es el camino más rápido. La planificación es un paso fundamental para realizar un proyecto con éxito y siempre será más fácil que los resultados sean los deseados si nos hemos planteado bien cuáles son los objetivos y hemos formado un proyecto con todos los puntos desarrollados de antemano.

Los resultados finales son lo más importante y empezar la casa por el tejado no va a ser lo más positivo para nuestra página. Si no hemos pensado todo con calma podrá ocurrirnos que, una vez terminado el proyecto, queramos añadir secciones o cambiar cosas que nos obliguen a retocar todas las páginas del sitio, lo que puede redundar en una mayor carga de trabajo o una menor satisfacción con el resultado final.

Un consejo para conseguir un buen proyecto es consultarlo con otras personas, a ser posible que conozcan el tema que deseamos tratar, a las que mostrar nuestras ideas y que nos den sus opiniones y consejos.

3. Diseñar la página web

Una vez tengas hecha la estructura, recopilada bastante información y completado el contenido de varias secciones, tienes suficiente material como para saber con más precisión lo que quieres, por lo que puedes empezar a diseñar gráficamente cada una de las páginas de tu web, indicando los elementos interactivos y gráficos que van a intervenir en cada una. Para esto, y fundamentalmente para manejar los vínculos entre documentos, se creó el lenguaje HTML. El HTML es un lenguaje de marcación diseñado para estructurar textos y presentarlos en forma de hipertexto, que es el formato estándar de las páginas web. A la hora de empezar con el diseño, ten en cuenta que:

La estructura de la página debe ser lo más lógica posible facilitando la navegación a tus visitantes (es importante en este punto la usabilidad). Ninguna página puede quedar huérfana, es decir, todas las páginas deben de tener enlaces a otras páginas. Si esto ocurre, es probable que el usuario cierre nuestra página y entre en otra en la que le sea más fácil navegar por los contenidos.
Aunque no es un requisito necesario, sí que es muy aconsejable que aprendas HTML, ya que así podrás hacer todo lo que quieras sin depender de editores gráficos como Dreamweaver (ver manual Dreamweaver), tendrás más flexibilidad y opciones a la hora de realizar tus diseños, podrás corregir tu código y saber qué es lo que falla cuando te de errores, entenderás cómo funcionan las páginas de otros webmasters, etc. En esta misma página, hay un manual HTML muy completo que puedes mirar.
Aprender a usar otras técnicas, como las hojas de estilo (CSS) te será muy útil para crear una página atractiva y bien diseñada. Con las hojas de estilo puedes crear un archivo que te sirva para dar una mejor apariencia a todas tus páginas a la vez, y siempre que quieras cambiar el aspecto de tu web, sólo tendrás que modificar ese archivo en lugar de ir una por una revisando cada página de la misma. Si quieres aprender a usar este lenguaje, en esta misma web hay un manual completo de hojas de estilo o CSS.