COMO PREPARAR UNA PÁGINA(S) WEB PARA EL CURSO
(Actualizado al 10  de Abril  de 2001) 

1. INTRODUCCIÓN Y OBJETIVOS:

Este documento ha sido preparado para ayudarlos a preparar páginas WEB que les permitan presentar material para el Curso ME-43A. Como tal lo hemos dividido en los siguientes aspectos: Este documento no pretende ser un curso de HTML. Simplemente se trata de darles algunas ideas básicas acerca de como preparar un material atractivo y útil para hacer sus presentaciones. Espero que les sirva.

Si quieren saber más acerca de como crear páginas WEB, les sugiero visiten los manuales de Carlos Castillo del dpto. de Ciencias de la Computación (DCC). Sus páginas están llenas de datos interesantes.


2. PREPARACIÓN DE PÁGINA:

2.1 Aspectos Básicos:

No hay reglas fijas acerca de como hacer "buenas" páginas. Por cada regla que se me ocurre, hay al menos varias excepciones. Lo fundamental es que las páginas Web son herramientas para transmitir información e ideas. Por lo tanto si se diseñan bien, se potencia la transmisión de las ideas y si son mal diseñadas, se resta de las ideas que quieren transmitir. Aquí les doy algunas líneas básicas para ayudarles a presentar buenas páginas:
  1. Contenido: no hay buenas páginas con contenido pobre. Por lo tanto trabajen primero el contenido del documento. Cuando este es sólido e interesante, han hecho el 80% del trabajo. En la parte sobre Talleres se les da algunas ideas sobre estructura general que deben tener los documentos.
  2. Medio donde se verán: un error muy común es diseñar páginas "escritas" (por ejemplo en Word) y luego "convertirlas" a formato HTML. Normalmente el resultado es pobre, pues el medio donde las veremos es muy distinto de la página impresa.
  3. Evitar páginas largas: en lo posible eviten páginas de más de 4 o 5 "pantallas" para cada página. Estas deben tener estructura de "árbol" donde una página madre llama a las hijas. El llamado de una página a otra se hace por "links", o enlaces. De hecho estas páginas son una excepción, pues para simplicidad mía las hice más largas que esta recomendación.
  4. Evitar diseño sobrecargado: no olviden que estaremos transmitiendo ideas nó vendiendo hamburguesas. Así que traten de evitar diseños demasiado sobrecargados, pues atentan contra la transmisión de ideas. Esto no significa que no es bueno usar "backgrounds" atractivos, pero siempre que no menoscaben la presentación básica.
  5. Evitar figuras muy grandes: normalmente sus páginas se verán en pantallas de 14" a 800x600 pixels. Incluso algunas personas las verán a 640x480 pixels. Esto implica que hay que evitar figuras mucho mayores que 640x480 pixels. Cuando las hagan, verifiquen que estas queden claras con lo que hay que ver claramente visible. Un error muy común es "tomar" una figura de una página WEB, hacerle un reescalamiento y el producto queda con el texto borroso o ilegible.
  6. Facilitar Navegación: es muy importante que al "Internauta" se le facilite la navegación por las páginas que uno crea. Por lo tanto debe tener links para: avanzar a través del documento, retroceder a páginas anteriores y volver a la página madre. Esto evita que se "pierda" en la estructura y se le dificulte navegar por la estructura que uno ha creado.
  7. Evitar "Frames": Son muy pocas las páginas que he visto en que un "frame" aporta algo útil y muchas en las que son un estorbo. De hecho, entre mis alumnos, los 3 o 4 intentos de usos de "frames" que he visto han sido un estruendoso fracaso. Como casi todos ustedes son más o menos neófitos en el tema HTML (yo también me considero neófito), lo mejor es evitarlos. Nota: como siempre ocurre, ustedes han hecho muchas páginas buenas con Frames, así que esta recomendación es más bien relativa.
  8. Organizar Directorios: si el documento tiene formato de "árbol", es también bueno que se trabaje en un esquema de directorios y subdirectorios para tener ordenados los diferentes temas. Claro que para documentos no muy largos, un solo directorio es lo recomendable. Sobre todo porque para efectos de archivo a ustedes yo les pediré una copia de su trabajo.
  9. PRUEBEN LA PÁGINA: el error más común que he visto son páginas que no funcionan cuando se tratan de leer a través de la red o desde otro computador. Algunas de las razones más comunes las expongo después. Pero el único remedio certero para este problema es probar, probar y probar.
Volver a Inicio

2.2 Editores:

Afortunadamente ahora hay muchos editores que permiten editar páginas Web con facilidad. Les recomiendo:
  Fuera de los anteriores hay muchos más. Pero entre los otros suelen haber problemas que al momento de tratar de publicar una página aparecen (p.ej. el Microsoft Front Page). Así que es cuestión de ensayar. Mucha gente ama otros editores como el Dreamweaver u otros. En general estos son excelentes, pero solo recomendable para usuarios más avanzados.

En todo caso se debe finalmente seguir un proceso de depuración y ensayo de la página. Les recomiendo seguir los siguientes pasos:

  1. Con la página lista. Ensayar verla en un "browser" adecuado (p.ej. Netscape  4.7 o Explorer 4.0). Identificar problemas y corregir.
  2. Luego copiar la(s) páginas en disco y hacer la misma prueba pero en otro computador (cuidado de no transmitir virus!!).
  3. Finalmente subir la página a su cuenta y revisarla, pero desde otro computador.
La razón de usar otro computador es simple. Muchas veces la página hace referencias a archivos que están en el computador donde uno hizo el desarrollo o bien que están en "caché". Por lo tanto la única prueba válida es una máquina externa.No olvidar que la página de ustedes la verán personas con "Browsers" antiguos, por lo cual deben ser sencillas.

Volver a Inicio

2.3 Mañas de los editores:

Las mañas son casi tan variadas como la variedad de editores que hay. Simplemente les expongo aquí algunas de las más comunes que yo conozco. Seguramente encontrarán más a medida que ustedes mismos exploren el preparar páginas WEB.
Volver a Inicio

3. FORMATO Y CONTENIDOS:

3.1 Estructura Organizacional de Página:

En el primer párrafo se dan algunas ideas básicas acerca de como deben ser las páginas en cuanto a contenidos. Desde el punto de vista estructural, un aspecto básico es mantener una estructura de árbol, es decir que exista una página madre y esta llame a blancos ("targets") en las páginas hijas. Asimismo la página madre puede tener blancos para ubicarse rápidamente en ella.

Así se explota el aspecto más poderoso del HTML que es el uso de hipertexto.

Un buen esquema organizacional hace que las páginas cargen rápido y uno pueda ubicar con facilidad la información que busca.

No olvidar encabezar cada página con un título descriptivo, este permite ubicarse rápidamente el tema. También son útiles los links internos para navegar rápidamente dentro de la página.

3.2 Insertar figuras:

 Las páginas Web reconocen sin problemas los formatos de imagen GIF, JPG y BMP. Eviten los BMP como la peste. Ocupan  demasiado espacio. Si tienen una imagen BMP, conviértanla a GIF o JPG antes de insertarla en la página.

Para imágenes simples (de líneas con no muchos colores) es recomendable usar imágenes GIF. Ocupan poco espacio y manejan bien hasta 256 colores. Para imágenes de tipo fotográfico, es preferible el formato JPG, que maneja hasta 16 millones de colores en forma simultánea (24 bits por pixel). Si ustedes mismos hacen la imagen JPG, usen un factor de calidad del orden del 70% a 80%. Es buen compromiso entre calidad y tamaño de archivo. Sigan la siguiente regla: si la imagen es gráfico o figura de líneas, use formato GIF, si se trata de fotografías o imágenes con degradado de colores, use formato JPG.

A continuación les pongo una imagen sencilla (lineal con colores) como GIF y como JPG. Es obvio que queda mejor como GIF.


Gráfico Lineal como GIF
Las líneas son nítidas. Se acepta fondo transparente
Gráfico Lineal como JPG
La figura pierde precisión. No hay transparencia

También aquí hay una foto como GIF y JPG. También es obvio que queda mejor como JPG.


Foto como GIF
Menos gama de colores

Foto  como JPG
Mayor rango de tonalidades

Así que para imágenes lineales, de colores sencillos (hasta 256 colores) use formato GIF. Para imágenes con continuidad de tonos (fotos) use formato JPG. De los dos ejemplos anteriores es evidente que sobre todo hay que evitar poner figuras lineales como JPG.

El editor que usan les permitirá insertar la imagen de varias formas. Experimenten sin temor. Lo único es que hay que evitar poner imágenes muy grandes, pues demora la carga de toda la página. Si deben tener una imagen grande, una buena idea es hacer una versión pequeña de la misma y luego desde la misma imagen hacer "link" a la grande. Así se cargará la grande solo cuando el lector realmente lo desee.

Para hacer figuras, cualquier editor de imágenes es bueno. Pueden usar el Paint o el Paintbrush. Trabajen la figura en formato BMP y luego (cuando esté lista) usando otro editor de imágenes conviertanla a formato GIF o JPG. Recuerden que las figuras de tipo lineal y pocos colores se manejan mejor en formato GIF.

Un tema importante es donde dejo las figuras. Desde el punto de vista de orden, puede ser conveniente dejarlas en un subdirectorio adecuado. Cuando uno hace esto, hay que cuidar de decirle al Editor de páginas WEB que las deje en la ubicación original y no deje una copia en el mismo lugar donde está la página. Pero si todo el trabajo no es muy complicado, basta dejar todo en el mismo directorio.

3.2.1 Figuras Animadas:

Es posible hacer figuras animadas (Gif's animados). Las que están abajo las encontré en Internet, pero en las notas del curso las iré incorporando en la medida de lo posible. Una figura animada es simplemente una secuencia de imágenes que se muestra en sucesión.

No es demadiado simple hacerlas, pero tampoco tan terrible. La Microsoft tiene un Gif Animator gratis que solía encontrarse en su sitio WEB.

Volver a Inicio

 3.3 Links:

Hacer links o enlaces desde una página a otra o a otros lugares en Internet es uno de los aspectos más interesantes y atractivos del sistema. Sin embargo no abusen de ello. Solo pongan links en lugares que tienen cierta lógica. Por ejemplo, es ridículo que en el Boletín de nuestra Facultad, cada vez que se menciona la Facultad o la Universidad de Chile, se incluya un link a ellas. Lo lógico es hacerlo cuando hay una razón valedera para "saltar" por el ciberespacio hasta el nuevo lugar.

Hacer un link a otra página es simple. Hacer un link a otro lugar requiere mayor cuidado. En efecto, hay que escribir la ubicación del lugar en forma exacta. Un error nos deja colgando. Por lo tanto aquí hay que ensayar.

3.4 Como Hacer una Página Atractiva e Interesante:

Aquí hay muchas opiniones diferentes. Sin embargo, creo que lo más interesante es el contenido. Si la página es pobre en contenido, ninguna cantidad de GIFS animados u otros pitos y flautas la harán mejor. También debe ser facil llegar a las ideas de fondo.

Eviten el exceso de gráficos. Esto hace que las páginas se cargen en forma muy lenta, lo que atenta contra el contenido. Un buen ejemplo es comparar las páginas de diarios el Mercurio con La Tercera. Las segundas son mucho más sencillas, cargan más rápido y tienen mejor contenido. Lo anterior fue escrito hace tiempo atrás, así que ustedes saquen sus conclusiones.

Volver a Inicio

3.5 Fondos:

Como mínimo deberían ponerle un color de fondo a las páginas que hagan atractiva la lectura. Además así no queda por defecto el fondo de Windows. También es simple usar un patrón de fondo atractivo. Eviten los fondos muy complicados, pues dificultan la lectura. La versión de Word 7.0 trae varios fondos atractivos. Además pueden buscar en Internet en varias partes. Les recomiendo ICON BAZAAR. Allí pueden encontrar muchas texturas y fondos diferentes los que pueden usar en sus páginas.

3.6 Tipos de Letras:

Cualquier editor, por simple que sea, permite al menos definir el tamaño, color y enfatizado de las letras. Nuevamente no abusen de estos recursos. Un potpourri de letras es pintoresco, pero no apto para facilitar la lectura. Queremos transmitir ideas, por lo cual la simplicidad es importante.

En los primeros navegadores de Internet, las letras estan definidas por el browser. Esto es buena solución, pues así uno no se preocupa de este aspecto y el formateo se hace a nivel de usuario. Los editores más modernos dan la posibilidad de definir tipos de letras diferentes. Si van a fijar el tipo de letra, no abusen de mezclas y no pongan tipos "extraños" que pueda que no estén disponibles en el browser del usuario.

Volver a Inicio

 3.7 Como Forzar Espacios:

Uno de los problemas típicos es como forzar espacios al escribir texto. Por ejemplo, lograr los siguientes efectos:      Ahora Tengo un Texto     separado
 
 

Ahora inserté líneas en blanco....

El hacerlo es muy facil (en el editor de Netscape). Para forzar espacios, basta apretar "shift-espacio" y para forzar líneas, apretar "shift-enter". Esto lo encontré en una pantalla de ayuda del Netscape..

El forzar espacios permite diagramar mejor el texto.

3.7 Fondos Transparentes:

Algo muy atractivo es el hacer figuras propias y que estas tengan fondo transparente. Al ser el fondo transparente, se "trasluce" el color o textura de la página. Esto hace una presentación mucho más atractiva. Por ejemplo aquí tenemos a continuación dos versiones de la misma figura. La primera es con fondo no transparente y la segunda tiene fondo transparente:
 
 

Es facil darse cuenta de que en la mayor parte de los casos es más atractiva la figura con fondo "transparente". Ahora bien, como se hace? Esto es relativamente simple si uno tiene en cuenta los siguientes puntos:

3.8 Tablas:

A medida de que he ido escribiendo más páginas para Internet, he descubierto el poder de las Tablas. Estas permiten realizar un formato mucho más controlado del aspecto que toma una página. Cuando comencé a escribir páginas con bastantes figuras, a menudo tenía el problema de que las figuras se "movían" por la página si yo insertaba nuevo texto. Esto ocurría sobre todo cuando quería poner una figura y texto al lado.

Otro problema era tener Tablas con las notas del curso. También luché bastante con las Tablas hasta que logré que se comportaran (más o menos) en la forma que yo quería.

Para solucionar esto, la forma más elegante son las Tablas. La página principal de estas notas usa una Tabla. Con ella controlo bien la ubicación del Logo de la Universidad y las diferentes líneas. Lo único especial de esa Tabla es que sus bordes son invisibles (Nota: la nueva versión de la página madre usa Tablas dentro de Tablas. Las interiores tienen bordes invisibles y la exterior la dejé con un pequeño borde visible para hacer más atractiva la página).

A continuación voy a insertar una tabla con figuras y texto para ilustrar su uso:
 
 
 

 La figura del lado es especial
Esta También
La versión de arriba es con bordes visibles y la misma tabla está copiada abajo, pero con bordes invisibles. Dado que uno puede controlar el ancho total de la tabla (en pixels p.ej.) puede fijar muy bien la apariencia que uno desea en la página. Al hacer los bordes de la Tabla invisibles, se logra un manejo muy bueno de la apariencia de la página independiente del browser o formato de página (resolución en pixels) que usará el futuro lector.
 
 
 La figura del lado es especial 
Si quiere escuchar el Boogie del Monstruo
 de nuevo toque  aquí.
Esta También

 

3.9 Como "Navegar" por sus Páginas:

No olviden dar buenas herramientas de navegación a través de las páginas que creen. Esto implica:

Volver a Inicio


 
4. COMO PUBLICAR LA PÁGINA

Para "publicar" la página en Internet, es necesario que la "suban" a una cuenta en un servidor que tiene conexión a Internet y allí preparen un índice que la muestre. En lo que sigue supondremos que el usuario "Juan Pérez" tiene cuenta en Ciprés. Su dirección de e-mail es: jperez@cipres.cec.uchile.cl

4.1 Preparación Previa de la Cuenta:

  1. Lo primero que deben hacer es crear un subdirectorio llamado: pub_www en la página madre (previamente deben haberse conectado a su cuenta en ambiente UNIX). Esto se hace con comando md (make directory).
  2. Luego, bajo el subdirectorio pub_www copian la estructura de directorios que usaron para hacer sus páginas.
  3. Ahora deben crear privilegios de acceso: se ubican una etapa más arriba de donde está jperez. Por ejemplo si el prompt normal es /~jperez, Esto se hace con comando cd (change directory) . Deben quedar en nivel superior.
  4. Allí escriben: chmod 755, esto permite que gente externa pueda leer en su directorio, pero no modificarlo. También ubíquense en raíz (/~jperez) y allí nuevamente definan privilegio de lectura solamente (chmod 755). Una nota. Si ustedes escriben chmod 700, esto implica que solamente el dueño de la cuenta puede leer, ejecutar o escribir. Así que si hay directorios que deseen proteger, pueden usar este modo.
Más detalles los pueden consultar en los noticieros del CEC. Allí revisen el noticiario Nº1, "Como crear una página Web en el CEC".

4.2 Como "subir" las Página a la Cuenta de Ustedes:

Ahora deben "subir" los archivos que configuran sus páginas. Para esto uno usa un programa que permite hacerlo, del tipo FTP. Normalmente tenemos este en nuestro "set" de programas que nos permiten conectarnos a Internet. Los pasos a seguir son:
  1. Conectarse a la cuenta propia (ej.: jperez).
  2. Cambiar al subdirectorio pub_www.
  3. Instalar allí la página madre (main page). Cuidado: las páginas HTML son tipo ASCII, así que hay que tener cuidado de subirlas como ASCII y no binarias. Si se suben como binarias, se meterá basura.
  4. Luego subir, en los directorios que corresponden, todas las páginas que "cuelgan" de la página madre. También en modo ASCII.
  5. Subir las figuras e imágenes, que son binarias, como archivos binarios, a los directorios que corresponda.
  6. Verificar que los nombres de cada archivo corresponda a como es llamado en el archivo HTML en el que se hace referencia (es decir, si el nombre corresponde y hay correspondencia entre mayúsculas y minúsculas).
  7. Si es necesario, ajustar nombres.
  8. Finalmente a la página "madre", cambiarle el nombre por: index.html. Así el sistema sabe que es el índice principal.
Si han seguido correctamente estos pasos, ya tienen el 95% del tema resuelto.

4.3 "Prueba" de la Página:

Ahora tienen que "probar" la página. Lo primero es conectarse a su página en forma remota y revisar que todo funcione correctamente. Finalmente hagan lo mismo, pero desde otro computador. Así verificarán que todo realmente funciona como debe ser. Insisto en esto, pues hay programas que "ayudan" a editar páginas y que son engañosos. Cuando hay algo mal referenciado, se "acuerdan" y buscan los archivos en el disco duro propio. Uno cree que todo funciona bien, pero cuando se conecta desde otro lado se ven los errores.
Volver a Inicio


5. COMENTARIOS FINALES:

Felicitaciones!!

Si han seguido estos pasos (con sus variantes naturales) ya son los felices poseedores de una página Web y "están" en Internet. Se han convertido, en un sentido muy real de la palabra, en ciudadanos del mundo y se les comienza a abrir un nuevo panorama en lo que a comunicaciones se refiere.

Ha sido tan rápido lo que ha evolucionado este tema, que es realmente asombroso. Estamos viendo el nacer de una nueva forma de comunicarse: abierta y local, global y regional. Ya son parte del "murmullo cibertrónico" que recorre y enlaza a todo el mundo...

El tema parece mucho más complicado de lo que realmente lo es. Les sugiero primero se apoyen en algún amigo(a) que ya tenga alguna experiencia y luego se largen por su cuenta. Cuando ya adquieran un poco más de experiencia, se pondrán más audaces y allí ustedes me podrán enseñar muchos trucos interesantes.
 

Roberto Román L.
Versión Original, 2 de Agosto de 1998

HOME