Taller
>> Taller >> Curso de HTML by BenKo >> Cap. 10, Diseño de una web (I).

Lección 10

Diseño y creación de una Web (I)


Ahora que sabemos bastante código HTML podemos usar un editor de páginas web WYSIWYG. Es el momento de crear nuestra web. He elegido poner de ejemplo de creación de una web sobre el tema de DIV Games Studio porque creo que es el tema en que más tenemos en común todos/as aunque con un poko de inteligencia se puede adaptara a cualquier tipo de web. Lo importante en este ejemplo es aprender a estructurar bien una web, distribuir imágenes, en fin, todo lo que se refiere a diseño. No esperéis que a la primera os salga una web para ganar un concurso de webmasters, eso se consigue con la práctica. Sin más preámbulos, comenzamos por los pasos para crear nuestro sitio web.

1. Elegir el tema de la página

En nuestro caso, DIV Games Studio.

2. Hacer un "retrato-robot" del visitante "común" en nuestra web.

Esto es muy importante sobre todo a la hora de diseñar el aspecto de la página y grado de cortesía o coloquialidad empleado. Para hacer este retrato robot tendremos en cuenta la edad, el sexo, el empleo (estudiantes, empresarios, etc), tipo de persona (gente "normal", gente seria, jubilados, anarkas, "peces gordos", gays, okupas, etc.) y hobbies (si le gusta jugar al fúbol, los videojuegos, si es fan de star-wars o cualquier otra cosa).

NOTA: Con gente "normal" me refiero a gente que no puede entrar en ninguna otra categoría. No es mi intención discriminar ni menospreciar a nadie.

En nuestro caso, el visitante medio (más o menos) sería un chico joven hispano-hablante, de edad entre 16-20 años, estudiante de clase social media, considerado gente "normal", que le gusta la programación y/o el grafismo, los videojuegos y le gusta la Guerra de las Galaxias (a muchos) ,tal vez los juegos de rol.

NOTA: Lo creáis o no, el factor "Guerra de las Galaxias", "Juegos de Rol" y otros hobbies paralelos al tema de la página, influyen mucho, sobre todo a la hora de diseñar el aspecto de nuestra web.

Por lo tanto, el diseño de la web tendrá que ser "joven", dinámico e impactante (casi nada). Teniendo en cuenta los hobbies del visitante medio, podemos basar el diseño de la web en el espacio, estilo medieval (con pergaminos, espadas y todo eso) o inspirándonos en algún videojuego (Quake, Diablo, Commandos, etc). Todo vale.

3. Coger papel y lápiz

Con esto me refiero a realizar un esquema de las secciones y contenidos de la página. También debemos crear un árbol de exploración con todos los enlaces. Aquí podemos ver el tamaño de las imágenes y dónde encajan.

4. Currarte las imágenes

...O encuentra a alguien que las haga por ti ;-) Si no te apetece, hay muchas librerías de GIF's gratuitos para poder usarlos en tu web. Recuerda lo del tamaño de las imágenes y el tiempo de carga...

5. Cúrrate la web

Lo mejor es empezar con sólo texto y luego poner las imágenes. Luego busca a gente para que te diga si les gusta o no el diseño. Después de que te den el visto bueno (o se te lo dés tu) crea la interactividad (frames o el sistema de navegación que tenías pensado) y añade las pijadas (JavaScript, imágenes animadas...). Vuelve a buscar a peña para que estén un rato en tu ordenador a ver si les resulta la web cómoda de leer o si encuentran algún enlace perdido.

Las secciones que recomiendo para una página de DIV son (en mi modesta opinión):

Home: Superimportantísima. La que todo el mundo lee. ¡Aprovechate bien y calcula lo que quieres decir!

Noticias: Muy útil. Es la 2º sección más visitada (después de Home). Si tu página se actualiza mucho y las noticias son buenas, el nº de visitantes a tu web crecerá exponencialmente.

Links: Para cuando la gente se queda con ganas de más. Esmérate aquí. Si tienes muchos enlaces y están comentados (o en ránking) mucha gente visitará tu página como portal a las demás. Así que ya sabes, si no tienes buenos contenidos...Pon links para que la gente los encuentre. A parte de DIV Games Studio, recomiendo poner otros enlaces de carácter general: buscadores, portales, el rincón del vago, diarios, etc.

Download: Para mostrar tus juegos y los de los demás.

Libro de visitas: Para que la gente conozca la opinión de tu web.

Y lo más importante: Un enlace a tu e-mail. ;-)

NOTA: Esta parte paralela al curso continuará en Diseño y creación de una Web (II).

 

P' atrás | Principio | P' alante