Sesión 3a1.- Definir páginas + scripts.

Una página web puede desarrollarse con un procesador cualquiera guardando el contenido en formato TXT y nombrando el fichero resultante con la extensión .HTM o .HTML . Lo mejor es utilizar un editor HTM específico; FrontPage , DreamWeaver y Nvu son editores HTM convencionales. Son editores WYSIWYG (en inglés, -lo que ves es lo que obtienes-;). Se aplica este término a los procesadores de texto y otros editores de texto con formato (como los editores de HTML) que permiten escribir un documento viendo directamente el resultado final. Todos tienen una pestaña para acceder al código y hacer modificaciones puntuales o inserciones de código externo. Cada cual puede utilizar el que mejor conozca o el que esté más a su alcance. Yo suelo utilizar FrontPage 2003, en todo caso, basaré el taller en la integración de códigos HTM comunes en cualquier tipo de editor manteniendo un nivel básico en todas las operaciones. [ Aquí ] podéis encontrar software gratuito de calidad, por ejemplo este editor HTM [ KompoZer ] , traducido a español y de buena calidad.

La definición inicial de una página web se atiene a este sencillo esquema...

...o este más sujeto a estándares web.

Las secciones para inserción de código más importantes son las que están entre -<HEAD>-y-</HEAD>- (en la cabecera de la página, afectan a toda la página), y las secciones que están entre-<BODY>-y-</BODY>- que forman el cuerpo principal de la página y afectan a la sección donde se inserta el código.

Los códigos HTM los genera automáticamente cada editor HTM a medida que se le va proveyendo de contenidos y aquí iremos destacando los resultados producidos en el desarrollo de la actividad elegida como modelo para este tutorial. Los códigos específicos que precisen una programación experta los iremos tomando de la web para utilizarlos según nuestros propios propósitos.

Los scripts son fragmentos de código HTML que integrados en nuestra actividad permiten múltiples efectos entre los que destaco la interactividad que aportan a nuestras actividades web. Existen en Internet múltiples fuentes gratuitas o libres para la obtención de este tipo de códigos desarrollados por programadores profesionales;

-[ La guía de los scripts gratis ].
-[ Los webgasoleros ].
-[ El código ].
-[ Scripts para páginas web ].
-[ About ].
-[ Taller de JavaScript ].


Un ejemplo; todos los cuestionarios utilizados en estas [ actividades de lectura comprensiva ] están basados en el [ script ] de [ Arturo Ramo ], autor del espacio educativo web [ Aplicaciones didácticas ] . Desde aquí quiero agradecerle su ayuda en el desarrollo de estas actividades.

Se trata de un script extremadamente versátil, no dependiente de ficheros externos y substancialmente reducido a pegar este código entre -<HEAD>-y</HEAD>- :

   

... y pegando también este código entre -<BODY>-y-</BODY>- . [ Aquí tenéis un ejemplo ] aplicando este código script tal y como se ha indicado.

   

La versatilidad de este excelente script permite muchas variantes:

- [ formato respuesta en botón ].

- [ formato Verdadero-Falso ].

- [ formato Opción múltiple ].

- [ Formato Elegir respuesta adecuada ].

... y otros que pueden verse en [ estas actividades ].

La principal ventaja que encuentro en este tipo de scripts es que su eficacia operativa se une a una muy baja cuota de pantalla, ya que se adaptan a cualquier tipo de diseño con un nulo consumo de recursos y bajos requerimientos de visualización o presentación.


Otro código CSS (hoja de estilo) muy útil es el que podemos utilizar para resaltar link-s o enlaces (haciendo las veces de sencillos botones) y definiendo tipos de letra o detalles de la barra de desplazamiento. [ Aquí ] podéis descargar el código y el fichero adjunto para lograr estos propósitos. Al descomprimir - site-link-codigo.zip - encontraréis dos ficheros:

1º -site.css-

2º -site-link.htm-

El primero contiene lo mostrador abajo y debe estar copiado tal y como se ha descargado (site.css) en la carpeta de trabajo en la cual desarrollamos nuestra actividad. El segundo contiene lo que también se muestra abajo y es un código que ha de copiarse entre el -<HEAD>-y-</HEAD>- de nuestra página de trabajo.

-SITE.CSS-

   

-SITE-LINK.HTM-

   


A continuación abro una página nueva que guardaré en mi carpeta de trabajo con el nombre de -PRUEBA1.HTM- . Luego descargo [ aquí ] el código y fichero CSS que utilizaremos como hoja de estilo. Copio ambos ficheros en la misma carpeta de trabajo y pego el código -SITE-LINK.HTM- entre -<HEAD>-y-</HEAD> de mi página -PRUEBA1.HTM-. Hago un link de prueba al web de Terra imitando un botón de enlace.

Probado el código CSS, paso a probar el script de Arturo Ramo insertando los códigos -<HEAD>-y-<BODY> tal como se indica aquí arriba. El resultado es este...

Página de prueba -PRUEBA1.HTM- (fijarse bien aquí al resolver el trabajo asociado a este apartado)

   

El resultado de esta página -PRUEBA1.HTM- es como se muestra [ aquí ]