.comment-link {margin-left:.6em;}

BETA (Bytes sobre Educación y Tecnología en Argentina)

viernes, julio 21, 2006

Última reflexión antes de las vacaciones

Ayer tuve la suerte de poder dar una charla para los docentes de Aulas en Red sobre Squeak como una herramienta de trabajo funamental para el docente constructivista.
Squeak es un programa que nos permite trabajar cualquier contenido, pero sobre todo nos permite simplemente trabajar, construir, como en un taller en donde manipular objetos, aprendiendo en el camino.
Quiero contarles que cuando yo empecé a trabajar como maestra, siempre me esforcé por ser la mejor maestra: constructivista, motivadora, no autoritaria ni "librodependiente".
Cuando terminé el posgrado de informática, de pronto me vi invadida por los chicos de todos los grados sin que ninguno sea el mío, la maestra en el aula (que determina los contenidos), las computadoras que a veces andan y a veces no, y los programas, chupetes electrónicos que mantienen en un estado de hipnosis a los alumnos durante cuarenta minutos, y además -de yapa- trabajan temas curriculares.
Con el correr del tiempo me di cuenta de que mi calidad como docente estaba absolutamente determinada por la calidad del software: que yo hacía demasiados favores a las maestras ("escribime esto", "imprimime aquello") y mis alumnos se veían abandonados a la suerte de un programita bonito que sólo trabajaba por medio del refuerzo conductista.
Entonces continué indagando, pero dirigiendo mis investigaciones en otra dirección: ya no me interesaba acopiar cantidades de software sino encontrar aquellas herramientas que me permitieran ser una buena docente, aprovechando la capacidad de las computadoras.
Así me encontré con el cabri -lamentablemente un programa pago-, los weblogs, los fotologs, las webquests, cazatesoros...
Y como la experiencia es un peine que se consigue cuando uno ya está pelado, dejé de trabajar en escuelas justo al mismo tiempo en que pude aprender a utilizar Squeak.
Me encantaría saber si alguno de los docentes de la charla de ayer se anima a usarlo con sus chicos, y que me cuente qué hizo y qué logros obtuvo con su trabajo, si fueron iguales o diferentes que los logros obtenidos con cualquier otro programa. Por lo que yo vi en mis propios hijos, Squeak funciona como un disparador de ideas para un chico creativo. Me pregunto qué pasa con otros chicos, cómo se puede motivar a quienes no están interesados en el conocimiento, o si Squeak solito bien presentado alcanza como motivación.
Quedo a la espera de las respuestas.
Y con este post anuncio que BETA Weblog se toma un par de semanas de vacaciones. ¡Hasta pronto!

miércoles, julio 12, 2006

Tutorial de HTML - 6 - Crear un menú de opciones

Quienes sigan este tutorial de HTML, hasta ahora habrán creado una página que puede tener párrafos comunes, listas, tablas, imágenes y luego formato. Ahora vamos a agregarle un menú a la izquierda.



Esta vez empezaremos por crear un archivo que contenga el siguiente código:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Página con menú</title>
</head>
<body>
<ul class="opciones">
<li><a href="index.html">Página principal</a>
<li><a href="fotos.html">Mis fotos</a>
<li><a href="agenda.html">Lo que tengo que hacer</a>
<li><a href="links.html">Mis páginas favoritas</a>
</ul>
<h1>Este es el índice de la página que estoy haciendo</h1>
<p>Por eso el archivo se llama index</p>
<p>Bienvenido al sitio</p>
<a href="mailto:midireccion@miservidor.com.ar">Haga clic aquí para enviarme un mensaje de correo</a>
</body>
</html>

En él encontramos varios renglones que contienen un código para un link (enlace, hipervínculo):

-Utilizando A HREF indicamos qué deberá abrir el navegador si se cliquea en el texto que está entre <A > y </A >, por ejemplo con este código:
<a href="fotos.html">Mis fotos</a>
Lo que se ve es este resultado: Mis fotos

-Utilizando el mismo código se puede hacer un vínculo a una dirección de mail, indicando en la dirección mailto: para que se abra una ventana con un mensaje nuevo, por ejemplo:
<a href="mailto:midireccion@miservidor.com.ar">Haga clic aquí para enviarme un mensaje de correo</a>

Ahora podemos agregarle una página de estilo como esta, para darle un aspecto como el de la imagen:
body {
padding-left: 15em;
padding-top: 1em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: #990099;
background-color: #EAEAFF }
ul.opciones {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 11em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.opciones li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em;
border-top: dotted;}
ul.opciones a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }


¿Por qué ahora el menú aparece a la izquierda y con toda la decoración?

Porque en el archivo de la página índice utilizamos esta línea al comenzar la lista:
<ul class="opciones">
Y en la hoja de estilos utilizamos esta línea para indicar cómo será el texto de listas de tipo “opciones”:
ul.opciones { }
además de especificar cómo será cada uno de los elementos de una lista de tipo “opciones”:
ul.opciones li { }

Para seguir practicando:
  1. Se pueden ver muchos modelos de listas con sus respectivos códigos en el sitio Listamatic.
  2. Esta es una lista de colores para probar suerte con las combinaciones: black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal y aqua

Nunca hay que olvidar que existen muchos usuarios que navegan con dispositivos monocromático y otros que tienen dificultades en su vista que no le permiten distinguir los colores. Por lo tanto, siempre debe existir un importante contraste entre el color de fondo y el del texto.
El presente pertenece a una serie de posts con la intención de brindar un tutorial para crear sitios web accesibles, comenzando desde el principio: el lenguaje HTML