Damos oficialmente comienzo al primero de una serie de tutoriales en los cuales el equipo de CLH te enseñará como hacer páginas Web partiendo de los conceptos más básicos, como la organización y planificación previa, hasta otros puntos más avanzados para que así puedan compartir con el mundo lo que sea que quieran mostrar.

Para seguir estos tutoriales no será necesario contar con conocimiento previo, ya que iremos cubriendo las lecciones de la manera más detallada y básica posible. Asi que si siempre quisiste hacer tu propio sitio Web, bueno ahora es el momento, solo tienes que leer, aprender y aplicar, así de simple.

Más detalles sobre la primera lección después del salto.

Cómo hacer páginas Web – Parte 1

En esta lección cubriremos los siguientes puntos:

1. Consejos útiles para crear un sitio web.
2. Planificación antes de desarrollar.
3. Preparando los implementos para el desarrollo.

Implementos necesarios

Como en esta lección haremos toda la fase previa al desarrollo en sí, solamente necesitaremos:

• Lápiz y papel.
• Opcional, alguna herramienta que nos permita diseñar esquemas. (Puede ser Microsoft Visio, que viene junto a las versiones de Office).

Es necesario mencionar, que si bien con lápiz y papel nos bastará para realizar todo lo que presentaremos hoy, existen una serie de herramientas computacionales que nos pueden asistir en el proceso. Si pueden conseguirlas bien, si no, no se preocupen.

Vamos con lo primero:

1.- Definición de la idea.

Este punto es bastante importante. Normalmente cuando uno quiere hacer un sitio Web comete el error de no definir de forma correcta el alcance en término de contenidos que este tendrá. ¿A que nos referimos?, a que usualmente queremos hacer páginas que tengan un poco de esto, y un poco de esto otro, y otro poco de lo de más alla. ¿Es eso malo?, no necesariamente, pero usualmente términa por convertirse en un sitio que profundiza muy poco en sus contenidos y puede terminar por llevar a los potenciales usuarios a buscar otras alternativas que les ofrezcan la información de mejor forma.

Por eso es importante en un comienzo hacerse la gran pregunta. ¿De que tratará mi sitio Web?. Para tomar esta decisión podemos considerar un par de aspectos que influirán de gran forma en la dirección del sitio Web que haremos:

a) ¿Mi sitio Web será personal sobre mis intereses o lo que hago, o deseo ofrecer algún tipo de producto o servicio a través de el?

b) ¿Deseo presentar una temática que sea de interés general para muchos tipos de usuarios, o pretendo llegar solo a un segmento específico?

c) ¿Existen muchos sitios del mismo tipo en Internet?

d) ¿Que diferencia puede ofrecer para los usuarios mi sitio que otras páginas no ofrezcan?

e) ¿Existirá interacción entre los visitantes del sitio conmigo y entre ellos?

Tomando en consideración puntos de ese tipo (junto a otros) podremos ir especificando cada vez más el tipo de contenidos que presentaremos en nuestro Sitio Web. Hay que siempre recordar que si bien hoy en día todo existe en Internet, eso no debe ser razón para desmotivarnos con lo que queremos hacer. Lo más importante es definir bien lo que queremos presentar, el tema que queremos abordar y lo más importante definir muy bien nuestros alcances y limitaciones para que el proyecto no se nos vaya de las manos.

Con nuestra idea inicial definida, la que muy probablemente vaya modificandose a medida que avanzamos, pasaremos a la segunda actividad:

2.- Definición de los contenidos.

Para este punto utilizaremos por primera vez nuestros nunca bien ponderados: Lápiz y papel. Con la idea inicial lista, ahora es un buen momento para tomar una hoja y crear un esquema preliminar de los contenidos que habrán en nuestro sitio con respecto al tema principal. Si quieren, aquí pueden utilizar otro tipo de herramientas que sirvan para hacer mapas conceptuales, como Visio u otras similares.

Ahora, ¿Como hacer esto?, hay muchas formas, una que recomendamos aquí es tomar la idea principal e insertarla al medio en una burbuja grande, y sacar burbujas chicas hacia los lados, arriba y abajo con temas que pueden salir de ahi. Por ejemplo, si nuestra idea del sitio fuera hacer un portal sobre Fútbol (si, somos peloteros), un esquema preliminar podría ser de la siguiente forma:

Click para ampliar

Haciendo esto ya tendremos una idea preliminar más o menos definida de todo lo que haremos para nuestro sitio. Una vez terminado este esquema, es positivo intentar ir ampliando cada globo a sub-secciones (en caso de que las alla) para así antes de empezar tener muy claro todo lo que necesitaremos hacer para completar el sitio.

A esta altura es importante recalcar que es mucho más relevante la calidad del sitio por sobre la cantidad. Es probable que cuando estemos planificando tengamos la intención de que nuestro sitio sea sumamente completo y tenga muchas secciones. Claro, es lo ideal, pero no siempre es posible. Por eso siempre sera preferible tener menos secciones pero que sean más completas.

3.- Establecer el tipo de contenido

Los sitios Webs ofrecen 2 tipos de contenidos: estáticos y dinámicos (normalmente una combinación de ambos). Los contenidos estáticos son aquellos que no cambian a menos que especificamente los modifiquemos y resubamos la página, pero cada usuario que entre a la página siempre verá lo mismo. Por otro lado tenemos los contenidos dinámicos, los cuales cambian mediante acciones realizadas bien por nosotros mismos o por los visitantes del sitio (para la gran mayoría de los casos se requiere uso de bases de datos). Además se puede decir que una página con contenido dinámico responderá con información distinta dependiendo de la acción que se ejecute.

Aquí es importante decidir que contenido lo ofreceremos de forma dinámica y cual será estático. Por ejemplo, si vamos a ofrecer la información de los equipos, que dificilmente cambie de un campeonato a otro, no se justifica que esta sea dinámica. Por otro lado, la sección de noticias debería ser dinámica, ya que significaría un tremendo trabajo estar actualizando a mano esa sección varias veces al día y subirla nuevamente.

Por eso, con el esquema preliminar de secciones (y opcionalmente subsecciones) listo, sería bueno empezar a ver que secciones ofreceran que tipo de contenido. Aquí el mejor consejo que se puede dar es usar criterio y sentido común. Claramente ofrecer solamente contenido dinámico parece mucho más profesional, pero no siempre es necesario, además que presenta un grado mayor de trabajo, por eso siempre es bueno ofrecerlo solo cuando sea necesario.

4.- Crear un mapa preliminar del sitio

Este paso es bastante similar al esquema que hicimos con anterioridad, pero tendrá una funcion levemente diferente. Un mapa de sitio Web nos permite organizar de forma correcta los contenidos (y sus respectivos archivos que lo expondrán) con respecto al sitio.

Lo más recomendable es poner en la parte superior (o en un costado si prefieren hacerlo horizontalmente) la página de inicio de nuestro sitio y a partir de ahi ir desagregando cada sección y sus correspondientes subsecciones. Esto nos permitirá ir pensando de que forma almacenaremos nuestros archivos al momento de subirlos al servidor, si utilizaremos directorios y subdirectorios, o todos los archivos en la carpeta raíz, si almacenaremos las imágenes en un solo directorio, etc, etc.

Recuerden, tal como se ha dicho antes, que esta planificación puede ir cambiando a medida que se haga el desarrollo, por lo que si bien es bueno dedicarle un tiempo a la planificación, no es necesario que sea 100% exacta y luego regirse invariablemente sobre eso.

5.- Busqueda de herramientas que nos asistan en el proceso

Para hacer un buen sitio Web, muchas veces no es necesario tener grandes conocimientos técnicos ni ser capaces de leer, entender o escribir cientos de lineas de código de lenguajes que no entendemos. Y no es necesario porque hoy en día, para el diseño Web, existen miles de herramientas que nos facilitan el proceso de diseño e implementación de un sitio, las cuales siempre es bueno aprovecharlas, ya que nos terminan ahorrando trabajo innecesario y muchas veces podemos lograr resultados bastante mejores con el uso de ellas.

Por eso, en el momento de planificar, es bueno hacer una lista de todo lo que ofreceremos en nuestro sitio Web: páginas HTML, imagenes, scripts, animaciones, libros de visitas, foros, funcionalidades, etc. y comenzar a investigar que herramientas nos pueden asistir en el proceso de creación e implementación. Si bien muchas herramientas buenas son pagadas, hay un gran número de alternativas gratuitas que nos sirven de igual manera, por lo que es bueno realizar una busqueda completa e informarse de cada una de ellas. Como mínimo siempre necesitaremos un Editor Web y un programa de edición de imagenes. Algunos ejemplos:

• Editor Web: Adobe Dreamweaver.
• Editores de Imagenes: Adobe Photoshop, Paint Shop Pro, ImageReady, Picasa, etc.
• Animaciones Flash: Adobe Flash, Swishmax, etc.
• Editores de logotipos: AAA Logo, The Logo Creator, Logo Design Studio, etc.
• Foros: Phpbb, SMF, etc.

Además es bueno en este punto empezar a hacer una busqueda preliminar de alojamiento donde podamos subir finalmente nuestra página. Opciones hay variadas, desde las gratuitas hasta las pagadas, y la opción que elijamos terminará dependiendo de distintos factores como:

• Espacio ofrecido para alojar nuestras páginas.
• Funcionalidades extras (Soporte PHP, bases de datos, scripts, aplicaciones, etc.)
• Costo.
• Limite de transferencia mensual (Terminará por definir el limite de visitas que podrá tener nuestro sitio, ya que cada vez que un visitante entra, el servidor carga las páginas y utiliza una cuota de transferencia).
• Políticas de contenido.

6.- Definir inversión y financiamiento

Quizás este punto pueda no parecer muy relevante, pero llega a serlo en cierto punto. Siempre es bueno definir en un comienzo si pensamos invertir algo en la creación de este sitio Web. Ya sea por concepto de pago de alojamiento, licencias de programas o la compra de un dominio (direccion Web), es sabio medir en un principio el nivel de inversión que pretendemos hacer, ya que eso definirá en muchos casos el alcance que el sitio terminará teniendo. Un sitio Web puede presentar mucha más credibilidad si se encuentra en un dominio propio (ejemplo: mipagina.cl) que en un alojamiento gratis (ejemplo: http://www.alojamientogratis.com/sitios/sudamerica/chile/santiago/mipagina), pero tal como indicamos, eso dependerá del alcance que nosotros queramos darle al sitio y si bien es importante, no es completamente necesario.

Tanto como la inversión, es bueno definir formas de financiar el sitio. Una de las formas más utilizadas hoy en día es el uso de publicidad en el sitio, la cual en algunos casos puede llegar a financiar por completo un sitio e incluso otorgar un retorno extra que nunca esta demás. Ahí quedara en criterio de cada uno cuanta publicidad meter en el sitio para que esta no afecte el contenido que ofrecemos, ya que es una verdad conocida que un exceso de banners o pop-ups publicitarios puede llegar a ser bastante molesto para los visitantes. Otras formas de inversión puede ir de la mano con alguno de los servicios que ofrezcamos, lo que en realidad puede convertirse en un arma de doble filo, ya que muchos usuarios preferirán dirigirse a otro sitio que ofrezca el mismo servicio de forma gratuita. Por eso es sabio analizar y planificar esto con tiempo y con mucha altura de miras, para poder encontrar el equilibrio ideal entre el financiamiento y la calidad de los contenidos de nuestro sitio.

7.- Pre-diseñando el sitio

Y bueno, luego de realizar una planificación, que si bien es básica cubre los puntos de mayor relevancia, podemos empezar a “meter mano” en lo que será nuestro sitio Web. Para eso siempre es bueno partir con un pre-diseño del “look” que tendra nuestro sitio. ¿Cómo partir?, fácil. Lo primero es tomar la hoja y el lápiz, si quieren otra hoja porque la primera ya debe estar algo llena, y realizar un dibujo previo de como se verá nuestra página principal. De esta forma podemos definir un pre-diseño y ver de forma preliminar como distribuiremos los contenidos de nuestro sitio. La mejor forma dependerá de cada uno, ya que si hay algo en lo que tenemos que utilizar nuestros gustos es en el diseño que tendrá la página. Lo importante es siempre recordar una regla de oro: “La página debe ser agradable a nuestra vista, pero también a la de los usuarios”. ¿Por qué?, porque muchas veces a nosotros nos parece bien una forma o distribución, pero no siempre es lo más agradable para los usuarios. Hay que recordar que muchas veces los usuarios navegan muy poco tiempo antes de pasar a otra página, por lo que si la distribución o forma de la página principal es molesta o parece complicada, eso hará que se vayan más rápido, lo cual esta lejos de ser lo ideal. Por eso es bueno tomarse un tiempo en preparar esto y en lo posible hacer unos 2 o 3 bocetos para finalmente ir sacando las mejores ideas de cada uno.

Si bien hay mucha libertad para pre-diseñar en papel, hay que recordar algunas cosas básicas que no pueden faltar en los bocetos, como el logotipo y un menú de navegación, lo que se puede alternar con una barra de contenidos. Para esto, es bueno tomar el esquema que hicimos preliminarmente sobre los tópicos que trataremos en el sitio para ver cuales podemos ordenar en nuestra página y en que orden. A los usuarios nunca les agradará tener que bajar hasta el fondo de la página para ver los contenidos principales del sitio, por lo que es bueno tenerlo en consideración.

Como siempre, vale la pena recordar que estos son bocetos previos, y que en el momento del desarrollo esto puede variar, así que no se desanimen si no pueden llegar a una solución concreta en un principio.

Y luego de terminar estos pasos, que pueden parecer tediosos pero son necesarios, estaríamos listos para empezar a dar los primeros pasos en el desarrollo de nuestro Sitio Web, lo cual es una temática que dejaremos para la próxima parte de nuestro tutorial.

Como es habitual, este tutorial ha sido desarrollado y documentado por el equipo de Comolohago.cl. Y recuerden que cualquier duda que tengan al respecto, pueden hacerla en el area de comentarios, las cuales las responderemos a la brevedad.

Esperamos que este tutorial haya sido de utilidad para Uds. y definitivamente nos veremos en una próxima ocasión para seguir tratando este tema.

Muchas gracias por leer.