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:

• Preparación de página: aspectos básicos. Editores. Mañas de los editores.
• Formato y contenidos: estructura organizacional de las páginas. Insertar figuras. Links.Como hacer una página atractiva e interesante. Fondos. Tipos de letras. Tablas. Como forzar espacios.
• Aspectos sobre como "publicar" la página: Preparación previa de la cuenta. Como "subir" la página a la cuenta de ustedes. "Prueba" de la página.

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.

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.

• Netscape Communicator 4.5 o 4.7: el visor de Netscape Communicator permite editar documentos HTML. Es intuitivo y simple de usar. Se recomienda. Permite hacer cosas bien sofisticadas. Como  utiliza el standard HTML, los documentos que se elaboran con él es casi seguro se ven bien en cualquier parte. Recomendado.
• Netscape Gold 3.0: el visor de Netscape versión Gold permite editar documentos HTML. Es intuitivo y simple de usar. No maneja muy bien las tablas grandes ni tampoco los tipos de letras fijos. Ya está obsoleto, pero a veces es bueno usarlo para asegurarse compatibilidad de nuestra página.
• Word 7.0 en Office 97: muy simple para pasar de documentos Word a HTML. Hay, eso sí, algunas mañas específicas que deben tomarse en cuenta. Por lo tanto se deben probar los documentos. Así que puede usarse en una primera vuelta, pero luego los documentos deben depurarse.
• Editores Específicos: Hay muchos ejemplos, como el Microsoft Front Page o el Dream Weaver. En general traten de evitar productos Microsoft pues tienen la característica que lo que generan solo se puede ver bien con productos Microsoft. Incluso a veces a uno lo "bota".

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.

Volver a Inicio

• Nombres de archivos: este es uno de los problemas más comunes. El Navigator Gold 3.0 (Bajo Windows 3.11) supone que los archivos tienen todos nombres en mayúsculas. Por lo tanto al subir la página a UNIX hay que tener la precaución de cambiar los nombres a mayúsculas (recuerden que UNIX discrimina entre mayúsculas y minúsculas). En el caso del Communicator 4.0 para Windows 95, no lo tengo tan claro. Pero parece que los nombres de archivos los escribe en minúsculas (Salvo la primera letra que está en mayúscula) y los de imágenes en mayúsculas. Cuando hay dudas, basta revisar la fuente (el formato ASCII del lenguaje HTML donde están claras las referencias y ver lo que allí aparece). Lo más importante es que exista absoluta coherencia entre como se llama un archivo y el nombre que este tiene. Importante: al poner el nombre a sus archivos eviten los espacios y caracteres ASCII extendidos (eñes, letras acentuadas y otros especiales). Esto se debe a que UNIX y Windows usan códigos de página diferentes, por lo tanto al "subir" un archivo a UNIX, los nombres quedan con errores y no se llamarán bien.
• Nombres largos: Windows 95 permite nombres largos, UNIX también. Uno pensaría que no hay problemas, pero no es así. Esto es porque el kernel de Windows 95 es DOS, así que realmente los nombres de archivos son solo de 8 caracteres más extensión de 3. Uno cree que son más largos. Para evitar problemas cualquier archivo debe tener como máximo 8 caracteres de nombre más extensión de 3. Es decir, el conocido formato de: NOMBRE.EXT. El dar nombres más largos es quizá el error más común que he encontrado. Es común este error cuando se hacen referencia a imágenes, "bullets" y otras yerbas propias del hipertexto.
• Letras Bold: esto es más sutil. Por alguna razón que no entiendo, cuando uno convierte un documento Word a HTML usando Office 97, a veces (muchas veces), todo el texto base queda en letras "bold". Se ve feo, así que después hay que sacarle eso manualmente.
• Otras mañas: las iré agregando a medida que las conozca o me las cuenten. Una que he encontrado recientemente es que al pasar Tablas de Office a HTML es necesario usar el paso intermedio de Word, si no se hace así quedan muchos errores. Las definiciones de colores entre el Office y el Navigator tampoco funciona del todo bien.
• Netscape Navigator vs. Microsoft Explorer: Los productos Microsoft  parece que se integran bien con el Microsoft Explorer, sin embargo si uno quiere escribir una página WEB para el Netscape (Navigator o Communicator), muchas veces hay problemas. Así que no olviden revisar la página con (al menos) el Netscape Navigator. En general recomiendo productos no Microsoft por la sencilla razón de que Bill Gates siempre trata de meterle goles a uno con su software.

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.

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

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.

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

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.

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:

• Solo pueden tener el color transparente las imágenes GIF: Las imágenes JPG no pueden tener el color "transparente". Así que usen esta técnica para temas relativamente sencillos.
• Para asignar el color "transparente" es necesario usar un editor de imágenes adecuado: Con el Microsoft Photo Editor es bastante sencillo. Uno carga la imagen que quiere, con una "varita" uno marca el color que quiere sea transparente y ya está listo (no olviden grabar la imagen modificada). Mientras uno esté en el Editor, este color se ve en forma de "cuadrillé", pero después (al cargar la página) todo funciona bien.

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 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:

• Es indispensable de que estén donde estén, el lector pueda avanzar a través del texto, volver a la página inicial (Home) o volver a la página anterior para tomar otra ruta a través de su trabajo.
• Tampoco olviden poner una forma de seguir avanzando en forma lógica. Son muchas las páginas que he recibido en que uno puede volver, pero no seguir. Es realmente una lata tener que volver cada vez a la página principal para luego poder seguir a través del documento.

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.

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 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.