deGalope » Blog Archive » 2.4.1 Creación en HTML (páginas estáticas)

2.4.1 Creación en HTML (páginas estáticas)

Noviembre 20th 2006 Publicado en: Galope Digital, Creación del digital

El HTML, acrónimo inglés de Hypertext Markup Language (lenguaje de etiquetado de documentos hipertextual), 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.

Este lenguaje resulta muy fácil de manipular mediante distintos programas que poseen una interfaz gráfica que simplifica el trabajo y reduce las necesidad de conocimiento del lenguaje prácticamente a cero. Los programas mas populares para este trabajo son Dreamweaver y Microsoft Front Page. Este último suele venir incluido en el paquete de Microsoft Office y, como todos los programas de Microsoft, son muy similares en su funcionamiento por lo que a cualquier persona que sepa manejar medianamente Microsoft Word, Front Page no le va a traer mayores complicaciones. Incluso cuenta con formatos predefinidos de páginas web para facilitarnos el diseño.

Dreamweaver por su lado es un poco mas complejo, pero los resultados finales son mejores a nuestro entender. Existe también otro programa que se ha hecho muy popular en los últimos años, el Macromedia Flash, que es una aplicación utilizada en un comienzo para crear animaciones para Web, con el tiempo se fue convirtiendo en uno de los programas más utilizados para la creación de páginas comerciales, donde la actualización de contenidos es poca. Este programa genera imágenes y animaciones de muy buena calidad en archivos muy livianos, cualidad que resulta indispensable para Internet.

El primer paso a la hora de encarar el diseño de la página es definir el esqueleto, es decir, armar una estructura básica que posteriormente iremos “pintando” con diferentes textos e imágenes, una tabla vacía que iremos llenando con los diferentes elementos que incorporemos. Este esqueleto es el que se repetirá en toda la publicación para lograr una uniformidad visual y evitar distracciones innecesarias. El contenido del mismo es el que irá cambiando.

Las páginas estándar con formato HTML suelen tener una composición básica donde encontramos: el logo de la página, generalmente arriba, una botonera donde ponemos enlaces a las distintas secciones, un recuadro donde agregamos información destacada con su respectivo enlace, y un cuerpo central donde desarrollar la información que queramos. Si bien este es un esquema muy utilizado en Internet no significa ni garantiza el éxito del producto, la innovación y la vanguardia siempre han sido bienvenidas en Internet, esbozamos algunas reglas generales para que desde su conocimiento podamos romperlas siempre y cuando se justifique hacerlo.

Teniendo el esqueleto de la página, el siguiente paso es armar un mapa del sitio donde podamos gráficamente ver los vínculos que queremos plantear entre las secciones. Partiendo de una página de inicio, vamos desprendiendo las diferentes notas.
Accedemos siempre a Inicio y por medio de él vamos ingresando en las distintas secciones planteadas. En este caso encontramos que los primeros 4 temas no tiene ninguna otra derivación, ya que son por ejemplo temas desarrollados en una sola nota por un autor. En el caso del Tema 5 vemos como deriva a 3 notas distintas. Este caso se presenta si, por ejemplo, sobre un tema a tratar nos encontramos con varias notas y distintas posturas sobre la misma temática. Al referirse a un mismo tema las agrupamos dentro de una sección para dar un orden a la publicación y que no queden esas tres notas al mismo nivel que las anteriores. En los primeros 4 temas los vínculos de “Inicio” nos llevan directamente a la nota que lo trata, en el caso del Tema 5 recurrimos a la confección de una página que presente las tres alternativas con vínculos a las notas correspondientes. Si consideramos la página de inicio como una primera plana donde presentamos los temas a tratar en toda la publicación, esta pagina que presenta el tema 5 seria una especie de primera plana sobre el tema específico de las 3 notas.

Este mapa nos va a definir por un lado lo que debemos poner en la botonera de “Inicio” donde agregaremos vínculos a los distintos Temas, y por otro nos va a dar una pauta de cómo confeccionar la “primera plana”.

Teniendo el esqueleto armado podemos comenzar a “pintarlo”. Es importante destacar que en este aspecto los diseñadores gráficos son profesionales ávidos de conocimientos para el desarrollo estético de paginas Web. Si bien cualquier persona con conocimientos básicos de estética puede desarrollar la interfaz gráfica, es importante destacar un trabajo transdiciplinario puede producir mejores resultados.

Es importante que tanto el logo como la botonera se mantengan durante toda la publicación ya que de esta manera podemos saltar de un tema a otro sin necesidad de volver al inicio. Esta botonera nos proporciona un vinculo permanente con toda la publicación indistintamente del lugar donde nos encontremos haciendo la página más amigable.

En el lugar destinado a “Desarrollo” es donde vamos agregando las distintas notas. Es importante que a la hora de escribir el cuerpo de la nota tengamos en cuenta los aspectos vistos en cuanto a redacción on-line, hipertextualidad e incorporación de imagen, audio y video en el cuerpo de la nota. No debemos olvidar que estamos hablando de una publicación digital y desatender estos aspectos atenta directamente contra las características propias del formato.

Las decisiones que tomemos en función del diseño de la página de inicio de nuestra publicación son de vital importancia ya que constituyen la puerta de entrada a nuestro sitio. Por lo tanto, debemos procurar diseñarla no sólo de manera atractiva sino también amigable para el visitante, debe contemplar los temas que consideremos más destacados dentro de nuestra publicación para que al entrar, el usuario reciba un buen pantallazo de lo que podemos ofrecerle.

Habiendo resuelto todos los temas anteriores sólo nos quedaría “subir” el trabajo a Internet. Todo lo que hemos hecho hasta el momento se encuentra en nuestra computadora y debemos grabarlo en el servidor. Existen diferentes procedimientos para realizarlo:

Por un lado los programas editores de HTML incorporan una función donde podemos configurarlo para que acceda a nuestro servidor y publique todo el trabajo, esta función resulta particularmente útil a la hora de actualizar los contenidos ya que una vez que tenemos toda la pagina en el servidor, verifica cuales son los cambios que hemos realizado y simplemente los sube.
Por otro, cuando contratamos un servidor, cualquiera sea, nos proporciona un acceso FTP. Este es uno de los diversos protocolos de la red Internet, concretamente significa File Transfer Protocol (Protocolo de Transferencia de Ficheros) y es el ideal para transferir grandes bloques de datos por la red.
Se precisa de un Servidor FTP y un cliente FTP, la mayoría de las páginas web son subidas a los respectivos servidores mediante este protocolo. Mediante una dirección FTP que se nos proporciona (por ej. ftp.degalope.com.ar) y colocando nuestro nombre de usuario y contraseña, accedemos a la carpeta que se nos ha asignado para alojar nuestra publicación. Una vez dentro sólo tenemos que copiar todos los archivos que componen nuestra publicación y pegarlos dentro de esa carpeta, al igual que lo hacemos con cualquier archivo en nuestras computadoras.
Por último muchos servidores ofrecen dentro de sus servicios uno particularmente destinado a la administración de ficheros donde el mismo panel de control del servidor nos va permitiendo seleccionar los archivos que queremos subir.

Antes de pasar al siguiente punto, es importante mencionar que los servidores toman como pagina de inicio aquella que se llame “index.htm” en algunos casos o “home.htm”, en otros. Por lo tanto, al confeccionar nuestro sitio es indispensable llamar de esta manera a la página de inicio.