Supongamos que nos piden una página que tenga un texto inicial y a
continuación una tabla de dos columnas. En la de la izquierda hay un
cierto texto y de ciertas partes de ese texto queremos dar unas
explicaciones que aparezcan en la columna de la derecha.
La idea es que cada vez se va marcando una de esas partes en fondo
amarillo y aparece su explicación a la derecha. Cuando el usuario le dé a
un botón bajo la tabla, el color amarillo se pasa a la siguiente parte a
explicar, y la tal explicación sustituye a la anterior en la columna
derecha.
Cuando todas las explicaciones se han acabado, el texto de la izquierda
queda normal, sin fondos de color y la columna de la derecha queda vacía.
Además debe aparecer un texto final, debajo de la tabla.
Vamos a ir viendo el bosquejo de decisiones que habría que ir tomando en
el diseño de la página y, sobre todo, del programa.
En la página tenemos elementos que queremos manejar desde nuestro
programa Javascript. Algunos son varios párrafos y otros son un trozo de
una frase. ¿Qué etiquetas nos convendrán para marcarlos?
Si son varios párrafos, con un salto de línea antes y después: DIV
Si son trozos que están dentro de una línea: SPAN
La página irá pasando a la siguiente explicación al ritmo que marque el
usuario con pulsaciones de ratón, usando, en este caso, un BUTTON, que
tendría un atributo ONCLICK
asociado a una función que miraría si hay paso anterior (para volver a
ponerlo en blanco y borrar su explicación), si hay siguiente (para ponerlo
en amarillo y mostrar su explicación) o si no, para mostrar el texto
final.
Inicialmente, al cargar la página, algunos de los elementos tienen que
tener unos atributos especiales, por ejemplo, no debe estar a la vista
ninguna de las explicaciones ni el texto final. ¿Cuál es la forma más
sencilla de conseguirlo?
Analizemos estas posibilidades:
a. Darles atributos en sus propias etiquetas a cada uno: Posible, pero
bastante peñazo, sobre todo si luego ponemos y quitamos alguno al final;
se nos puede pasar
b. Agrupar los elementos en clases y darles atributos en un fichero CSS:
Mejor, porque agrupamos el trabajo, aunque se nos puede mezclar una
clasificación por aspecto con una clasificación por posición inicial
c. Ponerles un identificador y darles atributos en un fichero CSS: Es una
varainte de la a.
d. Darles un identificador y que el programa Javascript al principio les
ponga los atributos iniciales: Lo mejor; dejamos al CSS las cuestiones de
aspecto permanentes y manejamos desde Javascript lo que va a variar
¿Cuáles de las siguientes operaciones irían en una función que se
activase al cargar la página (onload)?
De entre lo siguiente, ¿qué podría ser?:
a. Ponerles un identificador a los elementos que vamos a manejar: Bien,
nos evitaría acordarnos cuando los pongamos en la página.
b. Hacer aparecer el texto final: No; esto al final
c. Poner elementos en la página que van siempre y que no queremos que el
autor de la página tenga que repetirlos cada vez que hace una página de
este tipo: Sin duda, facilitaría el trabajo de hacer las páginas si
tenemos que preparar unas cuantas.
d. Activar el primer paso o explicación: Sí, claro
e. Rellenar todos los textos de la página: No, porque no van a ser siempre
los mismos
Si no hacemos nada más, el botón de avanzar sigue intentando pasar a la
siguiente cada vez que el usuario lo pulse. ¿Qué podríamos hacer para
evitarlo?
Analizemos las siguientes opciones:
a. Desconectar su atributo onclick: Funcionaría, pero engañaría al
usuario, al haber un botón que no hace nada; podría pensar que hay un
error en la página
b. Borrarlo de la página: Es una posibilidad, pero muy drástica; elimina
toda opción de marcha atrás
c. Borrar la función Javascript correspondiente al botón: Es una variante
de la a, pero más retorcida
d. Preparar otra función que al acercarse el ratón al botón lo lleve a
otro sitio, para que el usuario no pueda alcanzarlo: Es como una variante
de la a, pero más juguetona
e. Ocultarlo (hacerlo invisible): Lo mejor, el usuario no puede dar al
botón, no piensa que tenga que hacerlo, porque no lo ve, y si necesitamos
más tarde hacerlo reaparecer, es fácil