Gua didctica del mdulo 4

Programacin II. Creando cdigo fuente

 Gua didctica del mdulo 4

ndice
Unidad 1: CheckList con DOM ....................................................... 2
Unidad 1.1: Creando un checklist con HTML ........................... 3
Unidad 1.2: Dando estilo con CSS ............................................. 3
Unidad 1.3: Interactuando con JS .............................................. 5
Unidad 2: Pintando en HTML5 ...................................................... 7
Unidad 2.1: Pintando en canvas ................................................ 8
Unidad 2.2: Cambiando de color ............................................. 11
 Gua didctica del mdulo 4

Unidad 1: CheckList con DOM

Objetivos

Entender la utilidad del DOM

Temporizacin

2 horas

Actividades

Unidad 1.1 Creando un checklist con HTML

Unidad 1.2 Dando estilo con CSS
Unidad 1.3 Interactuando con JS

Seguimiento para la consecucin de los objetivos

Han conseguido que sea posible marcar y desmarcar tareas?

Han conseguido que sea intuitivo?
 Gua didctica del mdulo 4

Descripcin de las actividades

Unidad 1.1: Creando un checklist con HTML

Lo primero que pediremos a nuestros alumnos ser que creen
una lista con algunas tareas. Tambin tendrn que ponerle un
titulo mediante un <h3>

A continuacin agregaremos un <span> al principio de cada tarea con el texto

[PENDIENTE] que mostrara que la tarea todava no ha sido cumplida. Es
importante que a cada <span> le pongan un id diferente ya que luego los
usaremos.

Unidad 1.2: Dando estilo con CSS

Vamos a pedir a los alumnos que creen un archivo llamado estilos.css y lo

enlacen a nuestra pgina.
 Gua didctica del mdulo 4

Ahora crearan un estilo para todos los <li> y harn que cuando pongamos el
cursor encima se muestre la mano caracterstica de un link para que d la
impresin que podemos clicar en la lista.

Tambin haremos que los <span> de la pgina se muestren en negrita para

resaltarlos.

Y por ltimo les pediremos a los alumnos que cuando

pasemos el ratn por encima de las opciones estas se
subrayen, para ello tendrn que utilizar el modificador
hover.
 Gua didctica del mdulo 4

Unidad 1.3: Interactuando con JS

Lo primero que haremos ser agregar un onclick a cada <li> de la lista de

tareas para que llame a una funcin de javascript. A esta funcin le pasaremos el
id de cada tarea (el que habrn puesto en el <span>).

A continuacin pide a tus alumnos que creen una funcin de javascript llamada
cambiar que acepte un parmetro.

Ahora pdeles que creen una variable dentro de la funcin y utilicen

document.getElementById para asignar a la variable el elemento con el id que
nos han proporcionado en el parmetro.
 Gua didctica del mdulo 4

Por ltimo agregaremos un if, que cambie el contenido del elemento segn lo
que contenga actualmente.
 Gua didctica del mdulo 4

Unidad 2: Pintando en HTML5

Objetivos

Entender el concepto de canvas

Utilizar las funciones de dibujo de canvas

Temporizacin

2 horas

Actividades

Unidad 2.1 Pintando en canvas

Unidad 2.2 Cambiando de color

Seguimiento para la consecucin de los objetivos

Han conseguido que se pueda pintar?

Han aadido alguna opcin adicional?
Han entendido todo lo que han hecho?
 Gua didctica del mdulo 4

Descripcin de las actividades

Unidad 2.1: Pintando en canvas

Pdele a tus alumnos que creen una pgina con un canvas, a este le tendrn que
poner la id lienzo y un tamao de 800x600.

A continuacin crearemos una funcin en JS que inicialice los recursos que

usaremos. Entre estos estar la variable que contendr el canvas, la que
contendr el context y la que nos dir si estamos pintando o no.

A continuacin haremos que esta funcin sea invocada cuando la pgina se

cargue.

Ahora pide a tus alumnos que creen 3 nuevas funciones llamadas:

mouseDown, mouseMove y mouseUp que controlaran cuando se
presiona, se mueve o se suelta el ratn respectivamente. Todas ellas recibirn un
parmetro que contendr datos sobre el ratn.
 Gua didctica del mdulo 4

Necesitaran ensearle al programa a usar estas funciones, para ello agregaremos

las siguientes tres lneas a la funcin init que tenemos.

A continuacin tendrn que completar las funciones que hemos dejado vacas,
empezaremos por la de mouseDown que se llamara cada vez que presionemos
en el canvas, es decir cuando empecemos a pintar. Lo primero que haremos ser
leer la posicin del ratn.
 Gua didctica del mdulo 4

Ahora utilizaremos la funcin beginPath para indicarle al canvas que

comenzaremos a dibujar y con la funcin moveTo indicaremos la posicin en la
que lo haremos. Tambin pondremos la variable drawing a true para

indicarnos que hemos empezado a dibujar.

La funcin mouseMove se llamar siempre que el ratn se mueva sobre el
canvas, por eso usaremos la variable drawing para solo ejecutar nuestro
cdigo cuando hayamos empezado a pintar.

Dentro de este if volveremos a coger la posicin del ratn y la usaremos para

dibujar una lnea.
 Gua didctica del mdulo 4

Por ltimo rellenaremos la funcin mouseUp que se llamara cuando dejemos de

apretar el botn del ratn, en esta tenemos que dejar de pintar llamando a la
funcin closePath y poner la variable drawing a false para que el cdigo que
tenemos en la funcin mouseMove deje de ejecutarse.

Unidad 2.2: Cambiando de color

Para cambiar el color en el que pintamos agregaremos 4 botones, para ello pide a
tus alumnos que creen una tabla con tantas columnas como colores quieran usar
y una nica fila. En cada celda queremos que se muestre el nombre del color.

Ahora crearemos una nueva funcin en JS llamada cambiarColor.

 Gua didctica del mdulo 4

Dentro simplemente cambiaremos el color en el que el context pinta al que se

nos dice en el parmetro.

Por ltimo haremos que desde la tabla se llame a esta funcin con diferentes
colores.