3.- Tutoriales básicos.

Utilizaremos el término tutoriales básicos para referirnos a aquellos que se manejan a través de WWW y que se elaboran utilizando única y exclusivamente el lenguaje HTML.

En lo que resta de este capítulo, describiremos algunas herramientas utilizadas para la elaboración y el manejo de tutoriales básicos, a la vez que propondremos algunos criterios de diseño.

3.1.- WWW.

Para manejar los tutoriales en Internet, es necesario utilizar un sistema de distribución tal como WWW (World Wide Web, que en lo sucesivo simplemente llamaremos Web). Este sistema fue desarrollado inicialmente por Tim Barners Lee, un estudiante del Laboratorio Europeo de Física de Partículas (CERN), ubicado en Suiza. Web está basada en hipertexto, el cual consiste en documentos electrónicos cuyo texto contiene partes que actúan como enlaces o vínculos hacia otros documentos con información más detallada.

Aunque el concepto de hipertexto tiene más de 30 años, lo novedoso en su uso por parte de WWW consiste en la manera que lo aplica a la gigantesca base de información de Internet, convirtiéndose en un verdadero sistema hipermedia, en el que las páginas permiten acceder a imágenes, sonidos y videos ; con lo que se ha incrementado enormemente el atractivo de Web.

Además de ser gráfica y fácil de manejar, WWW es interactiva, soporta cualquier plataforma y puede tener acceso a muchos tipos de información (http, ftp, Gopher, etc).

3.1.1.- Visualizadores para Web.

El acceso a Web se logra por medio de un cierto tipo de software denominado visualizador (browser).

Por medio del visualizador, la computadora cliente del usuario obtiene información almacenada en otras computadoras llamadas servidores.

La manera en que trabaja un visualizador es la siguiente :

1.- Dado un URL (Uniform Resource Locator, Localizador Uniforme de Recurso) ,

que es un apuntador hacia una porción de información,

2.- debe ser capaz de tener acceso a la información, u operar de la forma deseada,

basándose en los contenidos del URL.

La información apuntada por un URL puede ser de diferentes tipos, dependiendo del protocolo utilizado. Algunos de estos protocolos son :

HTTP (HiperText Transfer Protocol, Protocolo para la Transferencia de

HiperTexto) , utilizado para los documentos Web.

FTP (File Transfer Protocol, Protocolo para la Transferencia de Archivo)

FILE Protocolo para referirse a archivos del disco local.

MAILTO Protocolo para el envío de correo electrónico.


3.1.1.- Visualizadores existentes.

Aunque Web se empezó a utilizar con visualizadores que solamente manejaban texto (tal como Lynx ), actualmente predominan los que ofrecen capacidades para el manejo de gráficos.

Aquí no se pretende realizar una descripción exhaustiva de todos los visualizadores existentes, sino describir brevemente algunos de los más populares tales como :

Mosaic.

Mosaic fué el primer visualizador gráfico a todo color, y posee el mérito de haber popularizado a la Web. Mosaic pertenece a la Universidad de Illinois, pero existen versiones comerciales para X Windows System, Microsoft Windows y Macintosh.

Netscape.

El Netscape Navigator (de Netscape Communications Corporation) desplazó a Mosaic en cuanto a popularidad, llegándose a convertir en el visualizador a vencer por parte de las empresas desarrolladoras de software que ven en Internet una poderosa y amplia vía para la actividad comercial a nivel mundial.

Netscape está disponible para Microsoft Windows, Macintosh y X Windows System, y aunque no es un producto de distribución gratuita, puede conseguirse una copia de evaluación en ftp ://ftp.netscape.com .

En la Figura 3.1 se muestra la apariencia del Netscape Navigator Gold 3.01 para Windows 95.



Figura 3.1.- Netscape Navigator Gold 3.01 para Windows 95.



Internet Explorer.

Microsoft lanzó en agosto de 1995 (junto con Windows 95) un visualizador llamado Internet Explorer (Explorador de Internet). Basado originalmente en la tecnología de Mosaic, Internet Explorer se ha convertido rápidamente en un visualizador muy completo que está compitiendo fuertemente contra Netscape por la supremacía del mercado sustentado en Windows 95.

Mientras tanto, cualquiera puede obtener una copia del Internet Explorer a través de Web utilizando el URL http ://www.microsoft.com/windows/ie/iexplorer.htm

3.1.2.- Partes de un URL.

Aunque por lo general los visualizadores nos evitan la molestia de tener que recordar las cadenas completas que representan a los URLs, conviene saber el significado de cada una de sus partes, principalmente cuando se quiere comunicar a otras personas la ubicación de cierta información.

Generalmente, los URLs constan de: el protocolo, el nombre del anfitrión (host) y el directorio y el nombre del archivo, como se muestra en la Figura 3.2

Protocolo ....Anfitrión..... ....Directorio .....Archivo
....http : // www.uabcs.mx/teclapaz/tutorc/index.htm

Figura 3.2.- Partes de un URL.



3.1.4.- Presentaciones Web.

Una presentación Web es un conjunto de una o más páginas Web que contienen texto y/o gráficos que, vinculados de cierta forma, producen el efecto deseado.

A las páginas Web también se les conoce como documentos Web y consisten de archivos únicos en disco que se recuperan y se presentan en un formato adecuado mediante visualizadores Web.

La página de entrada a una aplicación Web se conoce como página base (home page) y es lo primero que aparece en pantalla cuando se ejecuta una aplicación. El papel asignado a la página base es similar al de la portada de un libro o a la fachada de un local comercial, puesto que determina la primera impresión para quien visita el lugar. Por ejemplo, cuando se carga un visualizador, normalmente aparece la página base de la empresa que lo desarrolló. En el caso de los proveedores de información para Web (como es el caso de los desarrolladores de tutoriales), la página base es el punto de acceso a las páginas que conforman la aplicación . El URL de la página base es lo que se proporciona a las personas cuando se les invita a visitar un sitio Web, por ejemplo :

http ://www.uabcs.mx/tutorc/index.htm

3.1.5.- Organización de las presentaciones Web.

Es muy importante que las páginas de una aplicación correspondan a una estructura bien planeada (de acuerdo al tipo de información que se va a presentar) y que cubra objetivos bien establecidos.

Existen varias formas de organización para las presentaciones, entre otras : la lineal, la jerárquica y la de red.

En nuestro caso, el objetivo es elaborar páginas Web que presenten información correspondiente a tutoriales del tipo CAI descrito en el Capítulo 1. Por la naturaleza de este tipo de tutoriales, la organización más conveniente para ellos es la jerárquica, con una página base que sirve como punto de entrada y con los temas y subtemas dispuestos en forma de menú, como se muestra en la Figura 3.3.



Figura 3.3.- Organización jerárquica.

Un tutorial de tipo CAI corresponde al material contenido en un libro de texto, por lo que la página base es análoga a la portada del libro, las páginas intermedias semejan los índices de cada capítulo, y las páginas inferiores de la jerarquía corresponden al texto o contenido temático. Cada página se almacena individualmente en un archivo.


3.2.- HTML.

Para producir documentos que puedan manejarse en la Web, deberá utilizarse un lenguaje como HTML (HyperText Markup Language, Lenguaje de Marcado de HiperTexto). Los nombres de los archivos de texto que contengan código HTML deberán tener la extensión HTM o HTML, cuidando las convenciones establecidas por el sistema operativo que se esté usando en el servidor donde se instalen dichos archivos. Por ejemplo, en Unix se hace una diferenciación entre las letras mayúsculas y las minúsculas que aparecen en los nombres de los archivos de manera que : indice.htm es distinto de Indice.htm y de INDICE .HTM . En todas las referencias escritas en los guiones HTML deberán usarse los nombre de los archivos exactamente como se crearon en el sistema de archivos.

3.2.1.- Código permitido en HTML.

Los archivos generados con la sintaxis de HTML deberán ser archivos que contengan sólo caracteres del código ASCII (7 bits) y no podrá incluirse ninguno de los caracteres del conjunto "extendido" (8 bits), ya que cada plataforma tiene una definición diferente de los caracteres en el rango superior del código ASCII.

Los visualizadores que soportan HTML interpretan los códigos del rango superior del código ASCII como caracteres pertenecientes al conjunto ISO-Latin-1 (un superconjunto del código ASCII).

Se espera que en el futuro el estándar de HTML permita utilizar un conjunto de caracteres más amplio, como por ejemplo Unicode [LEMAL96].

3.2.2.- Caracteres especiales.

El estándar de HTML define un conjunto de códigos denominados entidades de carácter , las cuales tienen el siguiente formato :

&cadena ;

Esto es, todas las entidades de carácter empiezan con un símbolo de ampersand (&) y terminan con un punto y coma.

Dependiendo del valor de cadena, las entidades de carácter se clasifican en nombradas y numeradas.

Las cadenas de las entidades de carácter nombradas tienen significados que pueden recordarse con cierta facilidad, por ejemplo si un archivo contiene la secuencia :

&oacute ;

el visualizador desplegará :

ó

ya que acute es la cadena que denomina al acento agudo que se utiliza en Español.

Por otra parte, las cadenas de entidades de carácter numeradas utilizan el símbolo de numeral (#), seguido de un número decimal que corresponde al código del carácter en el conjunto ISO-Latin-1. Así, para obtener la letra o con acento agudo del ejemplo anterior, puede escribirse :

&#243 ;

Utilizando las entidades de carácter, podemos escribir archivos HTML con texto en Español, por ejemplo :

" Debemos esforzarnos para edificar la patria que añoramos para nuestros ni&#241o;s, libre de violencia y corrupción "

Esto será desplegado por un visualizador en la siguiente forma :

" Debemos esforzarnos para edificar la patria que añoramos para nuestros niños, libre de violencia y corrupción "

Nótese que la ñ se ha obtenido con las dos formas existentes. La mejor forma será la que represente el menor esfuerzo para quien elabora el documento.

3.2.3.- Caracteres reservados.

Existe un grupo de caracteres que tienen un significado especial en el lenguaje HTML, por lo que su uso no está permitido como parte del contenido temático de un archivo de hipertexto. Por lo tanto, para que los visualizadores puedan desplegar esos caracteres reservados, deberán utilizarse las entidades de carácter correspondientes.

La tabla 3.1 muestra las entidades y los caracteres reservados en HTML.

Entidad

Carácter

&lt

<

&gt

>

&amp

&

&quot

"

Tabla 3.1.- Caracteres reservados en HTML.



3.2.4.- Estructura de los archivos HTML.

La base de la estructura de un archivo HTML la constituyen las etiquetas (tags), y el texto que representa el contenido temático del documento .

3.2.4.1.- Etiquetas.

El visualizador interpreta las instrucciones representadas por las etiquetas y gestiona ante el sistema operativo la realización de las tareas requeridas. Por esto, aunque el lenguaje HTML es independiente de las plataformas, deberá utilizarse un visualizador específico para cada una de ellas ; teniendo así implementaciones de visualizadores para UNIX, Macintosh, Windows, etc. De esta manera, la función del visualizador se puede ver como la de un gestor de recursos entre el usuario y el sistema operativo, además del papel que adopta como formateador en la presentación de los resultados.

Existe un Grupo de Trabajo para el Lenguaje de Marcado de Hipertexto (Hypertext Markup Language Working Group) que se encarga de formular y publicar la especificación para el lenguaje HTML. La versión de especificación vigente a la fecha es la 2.0 (aunque ya se cuenta con el borrador de la versión 3.0, de la cual se han implementado algunas características en algunos visualizadores).

Las etiquetas tienen como característica común el empezar con el carácter < y finalizar con > .

En lo que resta esta sección solo se describirán brevemente algunas de las principales etiquetas para HTML. Para mayores detalles puede consultarse [LEMAL96] y [BERNE94].

<HTML> .... </HTML> Delimitan todo el documento.

La etiqueta <HTML> deberá ser lo primero que se escriba en un documento HTML, para indicar que su contenido está escrito en ese lenguaje.

La etiqueta </HTML> complementa a <HTML> y marca el final del documento.

<HEAD> ... </HEAD> Delimitan el encabezado del documento.

La etiqueta <HEAD> especifica el inicio del encabezado o prólogo de un documento, mientras que </HEAD> marca el final del encabezado.

<TITLE> ... </TITLE> Delimitan el título del documento.

Es conveniente escribir un título para indicar desde el principio de lo que trata el documento. El título es utilizado por programas que clasifican las páginas Web y otros.

El complemento de la etiqueta <TITLE> es </TITLE>.

Veamos un ejemplo utilizando las etiquetas anteriores :


<HTML>
<HEAD>
<TITLE>Tutorial de C++</TITLE>
</HEAD>
...
...
</HTML>

Las etiquetas pueden escribirse con mayúsculas o minúsculas, y no es necesario colocarlas en una posición específica, por lo que el anterior ejemplo pudo haberse escrito así:


<html><head><title>Tutorial de C++</title></head>
...
...
</html>

Como puede observarse, lo único que hay que cuidar es el orden en que se escriben las etiquetas de complemento.

<BODY> ... </BODY> Delimitan el cuerpo del documento.

El cuerpo de un documento es el lugar donde se escribe todo el contenido temático, así como las etiquetas y vínculos.

La etiqueta <BODY> debe escribirse después de la etiqueta de cierre de encabezado </HEAD>. La etiqueta de cierre </BODY> normalmente se escribe antes de la etiqueta </HTML>.


Ejemplo :
<HTML>
<HEAD>
<TITLE>Tutorial de C++</TITLE>
</HEAD>
<BODY>

Este tutorial de Lenguaje C++ puede ser &uacutetil para las personas que desconocen completamente el lenguaje, hasta personas que posean un nivel intermedio. El tiempo estimado para dominar un lenguaje de programaci&oacuten es variable, dependiendo de la dedicaci&oacuten que se tenga. En t&eacuterminos generales, medio a&ntildeo ser&aacute suficiente para lograr un dominio a nivel intermedio.

</BODY>

</HTML>

No se preocupe en acomodar el texto entre <BODY> y </BODY> ; el visualizador lo desplegará en el espacio disponible, justificándolo hacia la izquierda, aún en el caso de que usted lo tecleara en una sola línea (esto es, sin utilizar caracteres de nueva línea de su editor de textos).

La etiqueta <BODY> tiene los siguientes atributos :

BACKGROUND = "imagen" Usa una imagen como mosaico para el fondo de la

página.

BGCOLOR = "color" Establece el color para el fondo de la página.

TEXT = "color" Establece el color para el texto.

LINK = "color" Establece el color para los vínculos.

ALINK = "color" Establece el color para el vínculo activo.

VLINK = "color" Establece el color para los vínculos visitados.

En todos los atributos anteriores, color es una cadena que representa la concatenación de tres números en hexadecimal, con el siguiente formato :

"#RRGGBB"

donde :

RR representa la cantidad de color rojo ( Red )

GG representa la cantidad de color verde ( Green )

BB representa la cantidad de color azul ( Blue )

Encabezados : <H1>...</H1> ... <H6>...</H6>

Las etiquetas de encabezado sirven para delimitar los títulos que aparecen en el cuerpo del documento, y pueden utilizarse para jerarquizar los tamaños de las letras de los temas, subtemas, etc..

<H1> ... </H1> Delimitan un encabezado de nivel 1.

<H2> ... </H2> Delimitan un encabezado de nivel 2.

<H3> ... </H3> Delimitan un encabezado de nivel 3.

<H4> ... </H4> Delimitan un encabezado de nivel 4.

<H5> ... </H5> Delimitan un encabezado de nivel 5.

<H6> ... </H6> Delimitan un encabezado de nivel 6.

Cada nivel de encabezado corresponde a un tamaño de letra ; así que los encabezados de nivel 1 tienen el tipo de letra más grande, y los encabezados de tipo 6 el tamaño más pequeño.

Párrafos. <P> ... </P>

La etiqueta <P> se utiliza para el manejo de párrafos en los documentos HTML 3.0, con su correspondiente complemento (optativo) </P>.

Para evitar confusiones, es recomendable utilizar a <P> como separador de párrafos, y evitar el uso de </P>.

Comentarios. < ! >

En HTML existe una manera de indicarle al visualizador que no deberá desplegar cierta parte del documento, sino que será considerada como un comentario para quien analiza el texto fuente.

La secuencia < ! marca el inicio de un comentario, mientras que el final es señalado con >

Formateo de texto y caracteres.

Entre las etiquetas para especificar el formateo de texto y caracteres, las más utilizadas son las siguientes :

<BR> Obliga a generar una nueva línea (rompe la línea actual).

<HR> Fuerza un retorno de carro (Hard Return)

<PRE>...<PRE> Delimitan texto preformateado (Utiles para listados de programas)

<B> ... </B> Sirven para delimitar texto en negrita.

<I> ... </I> Delimitan texto en itálica (cursiva).

Imágenes. <IMG>

La etiqueta <IMG> sirve para desplegar una imagen y tiene, entre otros, los siguientes atributos :

SRC="nombre_imagen" Especifica el nombre del archivo donde se almacena la

imagen a desplegar.

ALT="texto" Especifica la cadena de texto alternativo que se desplegará en los

visualizadores que no soportan imágenes.

ALIGN="posición" Determina la alineación de la imagen, donde posición puede

ser : LEFT, CENTER , RIGHT

Vínculos. <A> ... </A>

Los vínculos (enlaces, ligas , links) se manejan por medio de las etiquetas <A> y </A>. El nombre de estas etiquetas tiene su origen en la palabra del idioma Inglés Anchor (Ancla). Entre las etiquetas de apertura y de cierre debe escribirse el texto que será considerado como vínculo.

La etiqueta de apertura <A> tiene el atributo :

HREF="nombre_de_archivo" Especifica la referencia a un archivo de hipertexto,

donde nombre_de_archivo puede incluir la

trayectoria.

En caso de no especificarse la trayectoria, se supone

que el archivo se encuentra almacenado en el mismo

directorio que el documento donde se escribió la

etiqueta de vínculo.

Además de texto, pueden utilizarse imágenes como vínculos, como se ve en el siguiente ejemplo :

<A HREF="t11.htm"><IMG SRC="bola.gif"BORDER=0>1.1.- Estructura de un programa en C++.</A>

En este caso, tanto la imagen bola.gif como la cadena de texto 1.1.- Estructura de un programa en C++. servirán para vincular hacia el archivo t11.htm

Mapas de imágenes.

Los mapas de imágenes consisten de una imagen donde cada parte de ella funciona como un vínculo hacia diferentes páginas.

Las etiquetas que se utilizan para la creación de mapas de imágenes son <MAP> , </MAP> , <AREA> e <IMG>.

Ejemplo :

<MAP NAME="linea">

<AREA SHAPE="rect" COORDS="304,0,464,20" HREF="portada.htm">

</MAP>

<IMG SRC="linea.gif" BORDER=0 USEMAP="#linea" >

En este caso, se crea un mapa cuyo nombre es linea. La forma del área del mapa es un rectángulo cuyos vértices superior izquierdo e inferior derecho tienen las coordenadas (x,y) (304,0) y (464,20) , respectivamente. La etiqueta <MAP> necesita su complemento </MAP>. Por medio de este mapa se establece un vínculo hacia el archivo portada.htm .

Por último, se utiliza la etiqueta <IMG> para desplegar la imagen almacenada en el archivo linea.gif y asociarla con el mapa denominado linea.

Cuadros.

Una página Web puede dividirse en cuadros, en los cuales se pueden desplegar, de manera independiente y simultánea, diferentes documentos. Si el tamaño del cuadro no es suficiente para desplegar el documento completo, este se podrá visualizar en su totalidad utilizando las barras de desplazamiento. El usuario podrá pasar de un cuadro a otro con solo accionar el botón izquierdo del ratón sobre la superficie del cuadro al que desea cambiarse.

Las etiquetas que se usan para el manejo de cuadros son :

<FRAMESET> y su complemento </FRAMESET> y,

<FRAME>.

La etiqueta <FRAMESET> sirve para establecer el número de cuadros en que va a dividirse una ventana, así como el tamaño de cada uno de ellos. Esta etiqueta tiene los siguientes atributos :

ROWS = "lista de valores" Divide la página en renglones.

COLS = "lista de valores" Divide la página en columnas.

Donde lista de valores indica el tamaño del cuadro en :

El valor entero establecerá el tamaño del cuadro en pixeles.

El valor de porcentaje establece los tamaños de los cuadros como un porcentaje. La suma de los porcentajes deberán sumar 100 ( En caso contrario, el visualizador forzará a que los cuadros llenen la ventana completa).

Por ejemplo :

<FRAMESET COLS="80% , 20%"> divide la página en dos cuadros columna. El cuadro de la izquierda tomará el 80 por ciento de la ventana y el cuadro de la derecha el 20 por ciento.

El valor relativo se implica por medio del asterisco ( * ), y especifica el tamaño de un cuadro en relación con los otros cuadros.

Ejemplos :

<FRAMESET ROWS = " *, * ,* " > crea una relación de 3 ( 1+1+1), dividiendo la página en tres renglones de igual tamaño.

<FRAMESET COLS = " 3*, * ,* " > crea una relación de 5 (3+1+1), dividiendo la página en tres columnas. A la columna de la extrema izquierda le asigna tres quintas partes del espacio disponible en la ventana, a la columna del centro y a la de la extrema derecha les asigna una quinta parte.

<FRAMESET COLS = " 3*, 2* ,* , * " > crea una relación de 7 (3+2+1+1), dividiendo la página en cuatro columnas. A la columna de la extrema izquierda le asigna tres séptimas partes del espacio disponible en la ventana, a la segunda columna de izquierda a derecha le asigna dos séptimas partes y a las dos columnas de la extrema derecha les asigna una séptima parte.

Por lo general, es más fácil utilizar valores de porcentaje o mezclas de éstos con los otros tipos de valores.

Por ejemplo :

<FRAMESET COLS = " 15% , * > asigna el 15 por ciento del espacio disponible a la columna de la izquierda, y el resto a la columna de la derecha.

La etiqueta <FRAME> sirve para especificar el contenido que va a desplegarse en un cuadro, así como otras características relacionadas con su comportamiento. Algunos de los atributos de <FRAME> son :

SRC = "fuente" que especifica el archivo donde se almacena el contenido a desplegar en el cuadro.

BORDER = valor que especifica el tamaño del borde para el cuadro. Un valor igual a cero especifica un cuadro sin borde.

NORESIZE que indica que el cuadro no puede ser redimensionado por el usuario.

SCROLLING = opción que especifica si el cuadro tendrá una barra de desplazamiento o no. Los valores para opción son :

YES sí habrá barra de desplazamiento.

NO no habrá barra de desplazamiento.

AUTO el visualizador colocará (en caso necesario) una barra de desplazamiento.

Este es el valor por omisión.

Formularios.

Los formularios o formas se manejan por medio de la etiqueta <FORM>, la cual tiene como complemento a </FORM>.

La etiqueta <FORM> tiene los siguientes atributos :

ACTION = "URL" , especifica el URL del guión que procesará el formulario actual.

METHOD = "modo_envío" , define la manera en que la información del formulario será enviada al servidor. Los valores para modo_envío pueden ser : POST y GET.


ENCTYPE = "modo" , establece el modo de encriptamiento para la información que se envía.


3.3.- Gráficos.

3.4.- Gifs animados.