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

jueves, junio 29, 2006

Tutorial de HTML - 5 - Adjuntar una hoja de estilo

Quienes sigan este tutorial de HTML, hasta ahora habrán creado una página que puede tener párrafos comunes, listas, tablas, imágenes. Sin embargo, nunca elegimos en qué formato queremos que se muestren cada uno de estos elementos.

Habitualmente entre todos estos elementos suelen intercalarse códigos para negrita, cursiva, definición de colores, etc.

Sin embargo, para que un sitio sea accesible una característica muy importante es que pueda ser leída por un lector de pantallas, y esto es mucho más sencillo y ordenado si se utilizan hojas de estilo en lugar de dar formato entre los párrafos directamente.

Vamos a crear un nuevo archivo HTML, nuevamente utilizando un editor de textos cualquiera (como la Libreta de Notas, Notepad, en Windows), que contenga este código:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mi primera página con formato</title>
<link rel="stylesheet" href="primerestilo.css">
</head>
<body>
<h1>Este es el título principal</h1>
<h2>Este es el subtítulo</h2>
<h3>Este es el subtítulo</h3>
<h4>Este es el subtítulo</h4>
<p>Este texto se va a ver en el contenido de la ventana. <br>Es un párrafo.</p>
<p>Para que esto tenga algún contenido vamos a alentar a la selección argentina que está a unas horas de jugar su partido contra Alemania... ¿Quién ganará?</p>
</body>
</html>

La única línea no conocida por quienes fueron siguiendo este tutorial es la que indica cuál será la hoja de estilo que se adjuntará a esta página web.
Ahora definiremos el contenido de esa hoja de estilo. En un nuevo archivo pegaremos el siguiente código:

body { font-family: Georgia, "Times New Roman", Times, serif;
color: gray;
background-color: #ffffdd }
h1 { color: orange;
border-left: 0.2em solid black;
border-bottom: 0.2em solid black;
border-top: 0.2em solid gray;
border-right: 0.2em solid gray;
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif }
h2 { color: orange;}
h3 { border-left: 1em solid gray }
h4 { border-left: 1em solid green}

Cuando visualicemos nuestro archivo HTML en un navegador, si el archivo primerestilo.css se encuentra en la misma carpeta, ¡oh sorpresa! Lo podremos ver con un aspecto bien diferente.
Analizando nuestra hoja de estilo, podemos aprender que:

Dentro del archivo se definen formatos para diferentes elementos (o regiones) de la página web: body, h1, h2, h3, h4.
Para definir el formato del cuerpo principal de la página utilizamos la etiqueta body y definimos entre llaves las características del texto:

font-familiy: familia de tipos de letra que se utilizará (no se define un único tipo de letra porque el usuario puede no tener el archivo correspondiente).

color: el color del texto

background-color: el color del fondo

border:left: el estilo del borde izquierdo (right, top, bottom: derecha, arriba, abajo respectivamente)

De la misma forma procederemos con H1 para el encabezado principal, H2, etc.

Para seguir practicando:

Probar crear una nueva hoja de estilo llamada segundoestilo.css y definir diferentes colores (en principio utilizar green, black, gray, purple, orange, white...) y diferentes marcos para cada parte de la página. También se pueden usar números de seis cifras en sistema hexadecimal (que explicaremos en otra entrega de este tutorial).
Cambiar entre uno y otro estilo modificando el renglón que indica qué hoja de estilo adjuntar: <link rel="stylesheet" href="segundoestilo.css">

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

martes, junio 27, 2006

Apoyemos a la Selección Argentina...

... de fútbol de Robots!!
En este weblog podemos leer el relato cotidiano de los participantes del campeonato de fútbol de robots FIRA 2006, que tendrá lugar en Alemania, en unos días más:
http://www.roboliga.com.ar/fira2006/

Dejar sus comentarios sería un gran apoyo para la Selección, o a decir verdad, para sus directores técnicos, que son los que programan a los jugadores.

¡Felicitaciones equipo argentino!

Información agregada posteriormente:
En las páginas de Robótica Educativa y de Spiritual Machine (el otro equipo argentino... ¡tenemos dos equipos en Alemania!) hay más información sobre robótica y sobre el mundial de fútbol de robots. ¡GRACIAS!

miércoles, junio 21, 2006

Economía de las calificaciones

Osvaldo Dallera, Sociólogo y Profesor de Filosofía, escribe en su weblog Educación y Sociedad, un post sobre la economía política de las calificaciones. Parece una coincidencia el hecho de utilizar la misma palabra para hablar del costo de un objeto, que al hablar de calificaciones: "el seis que me saqué con esta profesora me costó tanto como me costaba un diez en la escuela anterior", y sin embargo la palabra "costo" tiene un doble significado en la frase. Dallera describe una posible manera de analizar el sistema de las notas:

"Las escuelas son, dentro de este contexto, las instituciones cotizadoras de notas. Dentro del territorio, las notas tienen el mismo valor nominal, pero,dentro de cada escuela adquieren un peso y valor propio. Es decir, tienen distinta cotización. En este sentido, las escuelas ofician como bolsas de
valores. Nominalmente se utilizan las mismas calificaciones en todas las escuelas. Sin embargo, cuando las notas salen al mercado en forma de títulos y logros, se toma en cuenta la procedencia y, por lo tanto el valor propio de las notas dentro de cada escuela. Los pesos no son los patacones, ni los dólares son los pesos. Parece que todos tiene el mismo valor nominal, pero la gente prefiere tener pesos y no patacones y dólares y no pesos. Así, un diez tiene un valor distinto si se "pone" en un colegio "exigente", que si se otorga en un colegio menos riguroso."

Leyendo el post completo podemos explicarnos la conducta de muchos colegas, que manipulan las calificaciones de manera en apariencia arbitraria, y sin embargo su criterio real es económico.

martes, junio 20, 2006

Tutorial de HTML - 4 - Creación de tablas

En el primer post dedicado al tema aprendimos a comenzar un archivo de HTML escribiendo el código en un editor de textos. Luego aprendimos a incorporar una lista y los encabezados, y después las imágenes. Ahora aprenderemos a colocar una tabla.
Para hacer un sitio accesible, que pueda ser leído e interpretado por no videntes que utilizan software lector de pantalla, es fundamental que no simplemente se vea prolija sino también que se escuche en forma prolija.
Mucha gente, al hacer su sitio web, quiere que su imagen aparezca a la derecha, entre el texto, o más arriba, más abajo, … y termina utilizando tablas para acomodarlo. Todos lo hicimos antes de saber qué es la accesibilidad.
Ahora sabemos que una tabla debe estar en un sitio sólo si los datos que la conforman son más claros organizados en filas y columnas que puestas como texto.
Habiendo aclarado cuándo deben utilizarse las tablas, paso a comentarles cómo es el código para crear una.
Si queremos realizar, por ejemplo, la siguiente tabla que contenga los resultados de un grupo de paises en el mundial:

Partidos y puntajes del grupo C
Equipo	Partidos	Triunfos	Derrotas	Puntos
Argentina	2	2	0	6
Países Bajos	2	2	0	6
Costa de Marfil	2	0	2	0
Serbia y Montenegro	2	0	2	0

Primero hay que anunciar dónde empieza y dónde termina la tabla, mediante los tags:

<table> aquí pondremos el contenido de la tabla </table>

Para comenzar es fundamental ofrecer un título a modo de resumen, de la siguiente manera:

<caption> Resumen de partidos y puntajes del grupo C</caption>

Luego, es necesario definir qué contenido se colocará en cada parte de la tabla. Comenzaremos cada fila (fila="row") con el tag <tr> y la terminaremos con </tr>

Para indicar cuáles serán los encabezados (encabezado="heading") de las columnas utilizaremos el tag <th> y </th>

<th> Equipo </th> <th> Partidos</th> <th>...

Es muy importante recordar que el contenido de la celda debe ser breve, en lo posible colocar términos abreviados, para que el lector de pantalla lo lea en forma coherente al recorrer la página fila por fila.

Luego continuaremos con el contenido de cada columna, utilizando <td> y </td>

El código completo quedaría así:

<table>
<caption> Resumen de partidos y puntajes del grupo C</caption>
<tr> <th> Equipo </th> <th> Partidos</th> <th> Triunfos</th> <th> Empates </th> <th> Derrotas </th> <th> Puntos </th>
</tr>
<tr>
<td>Argentina</td> <td> 2</td> <td> 2</td> <td> 0</td> <td> 0</td> <td> 6</td>
</tr>
<tr>
<td>Países Bajos</td> <td> 2</td> <td> 2</td> <td> 0</td> <td> 0</td> <td> 6</td>
</tr>
<tr>
<td>Costa de Marfil</td> <td> 2</td> <td> 0</td> <td> 0</td> <td> 2</td> <td> 0</td>
</tr>
<tr>
<td>Serbia y Montenegro</td> <td> 2</td> <td> 0</td> <td> 0</td> <td> 2</td> <td> 0</td>
</tr>

Pronto notaremos que nos gustaría agregarle un poco de estética a nuestra tabla, así que vamos a cambiar el primer renglón, quitando “TABLE” y reemplazando por:
<table border="1" cellpadding="2" cellspacing="1" summary="Lista de partidos ganados, empatados y perdidos, y resumen del puntaje de cada país">

Donde Border es el ancho del borde (cero para borde invisible), Cellspacing indica el número de pixeles (puntos en la pantalla) que separan cada celda (valor predeterminado: 2) y Cellpadding indica el número de píxeles entre el borde de la celda y su contenido (valor predeterminado: 1). Summary contiene un resumen para ser leído por los programas lectores de pantalla.
Podemos agregar en las celdas un atributo align que indique si el contenido de la celda estará alineado a la izquierda (left), centrado (center) o a la derecha (right).

<td align="center"> 2</td>

Existe la posibilidad de cambiar la posición del título (caption) utilizando align (top para arriba o bottom para abajo) y de combinar celdas mediante rowspan y colspan, pero no recomiendo su uso por no ser opciones muy accesibles.

Ejercicios para seguir practicando:
1) Realizar una tabla que contenga los días de la semana y la organización horaria.
2) Se puede probar de qué manera se oirá nuestra tabla con un lector de voz, utilizando alguna demostración gratuita, como las de este listado de lectores de pantalla

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

miércoles, junio 14, 2006

Tutorial de HTML - 3

En el primer post dedicado al tema aprendimos a comenzar un archivo de HTML escribiendo el código en un editor de textos. Luego aprendimos a incorporar una lista y los encabezados. Ahora insertaremos imágenes entre los párrafos.
Es fundamental saber que para que un sitio sea accesible las imágenes deben tener un texto alternativo que pueda ser leído por los programas lectores de pantalla utilizados por los no videntes.
De esa manera, cuando el programa llegue al lugar donde está la imagen leerá, por ejemplo “fotografía del autor de la página” en lugar de leer sencillamente “imagen”.
Para insertar una imagen en nuestra página web debemos primero tener en un archivo GIF o JPG esa imagen. Tanto en el caso de las imágenes como de animaciones en GIF o SWF (Flash), debemos cuidar que el contenido de ese archivo no sea central para comprender el significado de la página. Un menú realizado en Flash sin utilizar opciones de accesibilidad no permitirá que un no vidente acceda a las opciones. En cambio, una película de Flash (SWF) que ilustre el contenido textual y que sea insertada con texto alternativo será el equivalente a haber insertado una imagen JPG o GIF.

Una vez que tengamos la imagen en la misma carpeta de nuestra página deberemos utilizar la etiqueta IMG SCR. Insertaremos dos renglones en el ejercicio de la clase anterior. En el primero, insertaremos la imagen que tenemos disponible:

<IMG SRC="mifoto.jpg" ALT="Esta es mi foto">

En la segunda, vamos a hacer la prueba de intentar insertar una imagen que no existe para comprobar la utilidad del atributo ALT:

<IMG SRC="mifotonoes.jpg" ALT="Esta NO es mi foto">

Al visualizar el archivo en un navegador observamos que en el primer caso se muestra la imagen y en el segundo caso, sólo un recuadro con el texto alternativo (en Internet Explorer) o el texto alternativo (en Mozila Firefox). En ambos casos, al acercar el mouse veremos en un cartelito flotante el texto alternativo definido.
(imagen con el texto alternativo)

Los últimos detalles

A medida que nuestra página vaya creciendo tendremos cada vez más y más archivos en la misma carpeta. Para facilitar su identificación, es mejor organizarlos en carpetas.
Vamos a colocar todas nuestras imágenes en una carpeta llamada imagenes
Luego de mover los archivos, nos queda modificar el código. Tendremos que aclarar que el archivo mencionado se debe tomar de la carpeta correspondiente:

<IMG SRC="/imagenes/mifoto.jpg" ALT="Esta es mi foto">

También puede ocurrir que nos guste nuestra imagen pero no exactamente su tamaño. Podemos indicarle un tamaño diferente con los parámetros width (ancho) y height (alto):

<IMG SRC="/imagenes/mifoto.jpg" ALT="Esta es mi foto" width=50 height=50 >

Ejercicios para seguir practicando:
1) Probar qué ocurre si sólo se menciona el ancho (width) o el alto (height)
2) Se puede anteponer al nombre de la foto una dirección de web. Eso indicaría que se desea insertar una imagen que se encuentra en línea. Por ejemplo, para insertar el logo del buscador google:
<img src="http://www.google.com/logos/Logo_40wht.gif" alt="Logo Google">

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

jueves, junio 08, 2006

¿Por qué Argentina no es Japón? Segunda parte

En un post anterior nos preguntábamos, o mejor dicho, nos enterábamos, por qué Argentina no es igual a Japón. En ese momento la respuesta era clara: en Japón hay un plan para conseguir 30 premios Nobel en 50 años. Los científicos son muy respetados. Lo que dice alguien que tiene un doctorado es "palabra santa".

Esta vez la reflexión viene por otro lado. Está bien, no respetamos a nuestros científicos. No planeamos ningún nobel. ¿Pero es necesario tener la policía que tenemos?
Ayer dos policías fueron con serruchos y otras herramientas a robarse un cajero automático de un banco en el que uno de ellos había trabajado.
La cosa no termina ahí: fueron tan torpes que olvidaron el detalle de la alarma.
Y cuando otros seis policías fueron al lugar respondiendo a la alarma no hicieron nada porque se trataba de colegas.
La pregunta del millón es: ¿qué diferenció al tercer patrullero que sí actuó arrestando a toda la banda anterior?

miércoles, junio 07, 2006

La risa, en el horario que uno tenga disponible

Normalmente tengo todas mis radios encendidas en Mitre, pero cuando tengo que trabajar, estudiar, conversar con mi familia, las tengo que apagar porque me distraen absolutamente... Por eso cuando llega el horario del programa de Lalo Mir suele suceder que yo no pueda escucharlo completo.
Sin embargo, ahora hay una opción para reirse según la agenda propia, entrando al weblog Lalocura, que nos ofrece todo tipo de audio: anuncios de Radio Bangkok del año 87, La Cenicienta contada por un policía de la Bonaerense, y otros novedosos o nostálgicos... ¡Excelente! Lo recomiendo.

lunes, junio 05, 2006

Tutorial de HTML - 2

En el primer post dedicado al tema aprendimos a comenzar un archivo de HTML escribiendo el código en un editor de textos. Ya conocemos los códigos necesarios para indicarle al navegador que el contenido del archivo está en lenguaje HTML, también para indicar un título de la ventana y el contenido de la página (el Cuerpo -en inglés Body-) que contiene párrafos cuyo comienzo y final se indican con los tags P y /P.
Hoy podemos agregarle dos cosas a nuestra página web: títulos y subtítulos, y una lista.
Comenzaremos con la misma fórmula, presentando la versión del lenguaje y luego indicando un título en la sección HEAD y algunos párrafos en la sección BODY:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mi segundo experimento</title>
</head>
<body>
<h1>Este es el título principal</h1>
<h2>Este es el subtítulo</h2>
<h3>Este es el subtítulo</h3>
<h4>Este es el subtítulo</h4>
<p>Este texto se va a ver en el contenido de la ventana. <br>Es un párrafo.</p>
<ol>
<li>Primera cosa de la lista</li>
<li>Segunda cosa de la lista</li>
<li>Tercera cosa de la lista</li>
</ol>
<ul >
<li>Una cosa de la lista</li>
<li>Otra cosa de la lista</li>
<li>Otra más</li>
</ul>
</body>
</html>

Aquí agregamos una serie de títulos y subtítulos jerarquizados, que se logran con la etiqueta H1, H2, H3, etc. La letra H viene de Heading (encabezado).
También agregamos dos listas: una numerada y otra sin numerar. Ambas se diferencian porque se abren con OL (Ordered list) o UL (Unordered list). En ambos casos los ítems se identifican con la etiqueta LI (List Item).
Podemos observar, además de los nuevos tags, que existen algunas etiquetas que sólo se colocan una vez:
<br>

Y muchas otras que se deben abrir y cerrar, utilizando una barra para indicar que se trata del cierre:
<p>Este es mi párrafo</p>

Aquí incorporamos la apertura de una lista: <ol>
La inclusión de elementos de la lista: <li>
Y el cierre de ambos tags: Fin de la lista (</ol>) y fin del item (</li>)

Ejercicios para seguir practicando:
1) Reemplazar la etiqueta ol por <ol type=A> Y luego intentarlo también con <ol type=I>¿Qué diferencias se observan en la lista?
2) Anteponer a la lista el siguiente código: <ol start="44"> ¿Qué ocurre con la lista numerada?
3) E n la lista no numerada intentar abrir con <ul type=square> o type=circle, type=disc

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

viernes, junio 02, 2006

Tutorial de HTML - 1

Cuando se desea hacer una página web hay que pensar en muchas cosas a la vez: que cualquier persona con cualquier navegador pueda utilizarla, que sea sencilla de interpretar para la gente de edad avanzada o con problemas de vista, que pueda ser utilizada con un pulsador o algún dispositivo utilizado por las personas con problemas motrices, que las personas que no oyen no se pierdan ningún contenido, etc. En resumen, hay que pensar en que la página sea usable y accesible a la mayor cantidad posible de personas.

Hoy comienzo una serie de posts con la intención de brindar un tutorial para crear sitios web accesibles, comenzando desde el principio: el lenguaje HTML.

El lenguaje HTML es un código que utilizan los navegadores para interpretar qué es cada cosa en una página web.
Para escribirlo hace falta conocerlo, y tener cualquier editor de texto (por ejemplo, el Notepad que viene con el Windows) y un navegador para visualizar nuestro trabajo.

Empecemos a trabajar. Vamos a abrir el Notepad o el editor de textos que elijamos y vamos a escribir este código:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Este título se va a ver en la barra de título de la ventana del navegador</title>
</head>
<body>
<p>Este texto se va a ver en el contenido de la ventana. Es un párrafo.</p>
</body>
</html>

Aquí observamos una serie de etiquetas que comienzan con el signo menor y terminan con el signo mayor. Cada una de ellas es un TAG, y le indica al navegador algo que debe hacer.

El primer renglón indica el tipo de documento (DOC = documento TYPE=tipo).
El segundo renglón anuncia que lo próximo será un texto escrito en lenguaje HTML.
El tercer renglón anuncia que ahora escribiremos el contenido del encabezado de nuestra página web. El encabezado puede contener varias cosas, pero por hoy sólo contiene el título, que es el texto que comienza con <title> y finaliza con </title>
Luego viene el cuerpo (body), donde sólo escribimos un párrafo. Para indicar el comienzo y el final del cuerpo se utilizan las etiquetas <body> y </body>, y para indicar el comienzo y final de un párrafo se utilizan <p> y </p>

Una vez que hayamos escrito (o copiado y pegado) el código en un editor de textos, lo guardamos como "primeraprueba.html" o el nombre que más nos guste. Abrimos la carpeta donde lo guardamos y con doble clic en el archivo... ¡Guau! Estamos viendo nuestra primera página web.

Ejercicios para seguir practicando: Hacer una página con varios párrafos.

Para escribir un título, utilizar <h1> y </h1>
Para dejar un renglón en blanco, <br>

Pregunta para saber si todavía están despiertos: ¿Qué significará la última etiqueta? (/html)

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

jueves, junio 29, 2006

Tutorial de HTML - 5 - Adjuntar una hoja de estilo

martes, junio 27, 2006

Apoyemos a la Selección Argentina...

miércoles, junio 21, 2006

Economía de las calificaciones

martes, junio 20, 2006

Tutorial de HTML - 4 - Creación de tablas

miércoles, junio 14, 2006

Tutorial de HTML - 3

jueves, junio 08, 2006

¿Por qué Argentina no es Japón? Segunda parte

miércoles, junio 07, 2006

La risa, en el horario que uno tenga disponible

lunes, junio 05, 2006

Tutorial de HTML - 2

viernes, junio 02, 2006

Tutorial de HTML - 1

About

Acerca de mí

Links

Previous

Archives

EstadÃsticas

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

jueves, junio 29, 2006

Tutorial de HTML - 5 - Adjuntar una hoja de estilo

martes, junio 27, 2006

Apoyemos a la Selección Argentina...

miércoles, junio 21, 2006

Economía de las calificaciones

martes, junio 20, 2006

Tutorial de HTML - 4 - Creación de tablas

miércoles, junio 14, 2006

Tutorial de HTML - 3

jueves, junio 08, 2006

¿Por qué Argentina no es Japón? Segunda parte

miércoles, junio 07, 2006

La risa, en el horario que uno tenga disponible

lunes, junio 05, 2006

Tutorial de HTML - 2

viernes, junio 02, 2006

Tutorial de HTML - 1

About

Acerca de mí

Links

Previous

Archives

EstadÃ­sticas

EstadÃsticas