Seqüència didàctica: Inserció d'imatges a pàgines web
Xavier Medina López CFA Ramon Llull
SEQÜÈNCIA DIDÀCTICA: Inserció d'imatges a pàgines web
Les activitats que es plantegen a continuació estan dirigides a un grup d'informàtica de nivell d'usuari del torn de matí. Formen part d'altres activitats dirigides a aprendre a utilitzar el programa de disseny de pàgines web Dreamweaver. Les activitats se centren en la inserció d'imatges i d'enllaços a imatges. El centre d'interès és l'elaboració d'una pàgina web personal. 1. Contingut teòric de la programació: • • •
Inserir imatges en un document html. Enllaçar imatges a d'altres documents html. Crear un àlbum de fotografies
2. Utilitat pràctica d'aquest contingut: •Complementar
la informació escrita amb imatges. •Facilitar la navegació entre documents. •Compartir imatges en la xarxa. •Poder accedir des de qualsevol lloc del món a una imatge mitjançant la web. •Publicar imatges. 3. Objectiu final de la seqüència (tenint present la utilitat pràctica del contingut): •
Que l'alumne sigui capaç d'inserir imatges i enllaços a una imatge, amb destresa i fer els càlculs necessaris sense equivocar-se, per complementar la informació escrita, facilitar la navegació entre documents i compartir imatges en la xarxa.
4. Què ha de saber l'alumne perquè sigui capaç d'assolir aquest objectiu? •Cercar
imatges en la web •Tractar imatges per tal de preparar-les abans de la seva inserció •Crear una carpeta amb una col·lecció d'imatges •Inserir imatges envoltades de text dins de la pàgina web Activitats, Competències, Avaluació, Criteris d'avaluació
1
Seqüència didàctica: Inserció d'imatges a pàgines web
Xavier Medina López CFA Ramon Llull
•Moure
i copiar imatges dins d'una taula •Inserir enllaços a imatges que uneixen pàgines web diferents •Inserir enllaços a parts d'una imatge •Inserir enllaços que activen seccions d'una mateixa pàgina web •Crear un àlbum de fotografies 5. Metodologia: • Coneixements
previs • Treball individual, en petit grup i gran grup. El treball amb l'ordinador es planteja de forma individual encara que col·laborativa per parelles • Ús del programa de disseny de pàgines web Dreamweaver • Comprovació del resultat de la tasca • Debat i conclusions 6. Tasques, seqüenciació i interrelació: Les pràctiques es presentaran en format electrònic (guardades a una carpeta de la xarxa del centre) i per escrit. Mostraran pas a pas i acompanyades d'imatges aclaridores les diferents funcions del Dreamweaver, necessàries per realitzar el treball amb èxit. En funció del punt de la programació on es troben els alumnes en aquest moment del curs, es donen per superats els coneixements de les activitats tres i quatre. A l'inici de cada activitat el mestre farà una explicació global i donarà les indicacions oportunes per poder realitzar la pràctica. A mesura que l'alumne faci la pràctica el mestre observarà i aclarirà els possibles dubtes que puguin sorgir individualment. Al final de cada pràctica es farà una posada en comú, valoració i comentari dels diferents passos donats per realitzar l'activitat així com l'aclariment de possibles dubtes (activitat de gran grup). 1. Exposició i valoració d'experiències de l'alumne on hagi observat imatges en un document web i/o inserit o treballat amb imatges amb un programa informàtic (processador de textos, projecció de diapositives, programa d'imatges...).
Activitats, Competències, Avaluació, Criteris d'avaluació
2
Seqüència didàctica: Inserció d'imatges a pàgines web
Xavier Medina López CFA Ramon Llull
2. Les preguntes del tipus: ▪ Has inserit o treballat, alguna vegada, amb imatges? ▪ Per a què creus que serveix inserir una imatge en un document web? ▪ Quin tractament cal donar a una imatge abans d'inserir-la en un document web? Poden servir per facilitar que l'alumne connecti amb els seus coneixements previs i es situï en el punt de partida per integrar nous aprenentatges. (Les qüestions es podrien resoldre en parelles i després fer les valoracions generals en gran grup) 3. Navegar i observar la web, per exemple, http://www.casareal.es/, i comprovar diferents enllaços a imatges i enllaços parcials a zones d'una imatge. (Activitat en gran grup) Caldria projectar a l'aula la web de la casa real. 4. Cercar 5 imatges amb el Google relacionades amb un tema concret. Per exemple, d'astronomia. (Treball individual encara que en col·laboració per parelles) Algunes concrecions a considerar són per exemple: • Seleccionar les imatges que s'adaptin al contingut. • Guardar les imatges dins d'una carpeta. • Tractar les imatges amb el GIMP per tal de que tinguin una grandària i un pes adequat. • Guardar les imatges tractades en una carpeta que es digui imatges amb extensions .jpg i/o .gif segons les necessitats. 5. Inserir les imatges, tractades a l'exercici anterior, de forma que quedin envoltades de text, dins d'una pàgina web amb contingut referent a l'astronomia. (Treball individual encara que en col·laboració per parelles) Algunes concrecions a considerar són per exemple: • Inserir les imatges que s'adaptin al contingut. • Modificar les mides de la imatge des de la finestra propietat i/o estirant amb el cursor, tot fent sevir el Dreamweaver.
Activitats, Competències, Avaluació, Criteris d'avaluació
3
Seqüència didàctica: Inserció d'imatges a pàgines web
•
Xavier Medina López CFA Ramon Llull
Emmarcar alguna imatge i alinear-les de diferents maneres tot fent servir la finestra flotant de propietats.
6. Moure i copiar imatges dins d'una taula. (Treball individual encara que en col·laboració per parelles) Algunes concrecions a considerar són per exemple: • Crear una taula de una fila per dues columnes • Inserir una imatge en una de les dues cel·les de la taula creada • Centrar la imatge • Escriure text en l'altre cel·la 7. Inserir un enllaç a una imatge que obri una pàgina diferent. (Treball individual encara que en col·laboració per parelles) Algunes concrecions a considerar són per exemple: • Utilització de la funció de vincles a imatges de la finestra propietats • Ús de l'eina d'activació quadrangular de la finestra de propietats per fer un enllaç a una zona determinada d'una imatge 8. Inserir enllaços tipus ancora a una imatge per activar una secció determinada del mateix document on està la imatge. (Treball individual encara que en col·laboració per parelles) Algunes concrecions a considerar són per exemple: • Activació de l'ancora i nom de l'ancoratge tot fent servir la finestra de propietats • Ús de l'eina d'enllaç tipus cercle per vincular-la a l'ancora. 9. Creació d'un àlbum de fotografies (Treball individual encara que en col·laboració per parelles) Algunes concrecions a considerar són per exemple: • Disposar o preparar un conjunt de fotografies tractades per inserir-les en la web. Poden servir les cinc fotografies que van tractar a la pràctica quatre. • Ús del menú comandos i de l'opció crear un àlbum de fotos web.
Activitats, Competències, Avaluació, Criteris d'avaluació
4
Seqüència didàctica: Inserció d'imatges a pàgines web
•
Xavier Medina López CFA Ramon Llull
Caldrà posar un títol a l'àlbum, examinar la carpeta d'imatges d'origen, identificar la carpeta de destí, indicar la grandària de la miniatura ... fins crear la pàgina de navegació.
10. Valoració grupal de l'aplicació de les diferents activitats, dels dubtes sorgits i de la seva utilitat.. (Activitat en gran grup).
Activitats, Competències, Avaluació, Criteris d'avaluació
5
Seqüència didàctica: Inserció d'imatges a pàgines web
Xavier Medina López CFA Ramon Llull
Competències de la Seqüència didàctica Activitat
Competència o competències que es treballen (1) Comunicació lingüística, (2) Matemàtica, (3) Coneixement i interacció amb el medi físic, (4) Tractament de la informació i digital, (5) Social i ciutadana, (6) Cultural i artística, (7) Aprendre a aprendre, (8) Autonomia
1
1, 3, 5
2
1, 3 i 5
3
1, 3 i 4
4
4, 6 i 7
5
4, 6 i 7
6
4,6 i 8
7
4, 7i 8
8
4, 7 i 8
9
4, 7 i 8
10
1, 3 i 5
Activitats, Competències, Avaluació, Criteris d'avaluació
6
Seqüència didàctica: Inserció d'imatges a pàgines web
Xavier Medina López CFA Ramon Llull
Activitats i criteris d'avaluació Situació-problema Disseny d'una pàgina web que inclogui cinc imatges tractades prèviament amb diferents tipus d'enllaços. Activitat 1 Decideix un tema interessant per fer una pàgina web i explica per què. Activitat 2 Cerca informació en Internet, tot fent servir el cercador Google. Obre el Dreamweaver i copia dos fragments que t'interessin en documents amb noms diferents i guarda'ls dins de la mateixa carpeta genèrica. Activitat 3 Prepara cinc imatges, que hauràs de escalar-les amb el GIMP per incorporar-les a la web, relacionades amb la informació que has cercat. Les imatges han de servir per aclarir els conceptes i el contingut de la pàgina web. Guarda-les en una carpeta anomenada imatges dins de la carpeta genèrica. Activitat 4 Il·lustra un dels dos documents de manera que continguin tres imatges: 1. Una amb un àncora al mateix fitxer 2. Una altre amb un mapa sensible que enllaci una pàgina web relacionada 3. La tercera inclosa en una taula ha d'enllaçar els dos documents elaborats per tu. Activitat 5 Insereix en el segon document un àlbum de fotografies que contingui com a mínim les cinc imatges tractades que has cercat. Criteris d'avaluació Activitat 1 • L'elecció està argumentada Activitat 2 • La cerca d'informació és correcta • La carpeta genèrica conté els dos documents Activitats, Competències, Avaluació, Criteris d'avaluació
7
Seqüència didàctica: Inserció d'imatges a pàgines web
Xavier Medina López CFA Ramon Llull
Activitat 3 • S'han cercat les cinc imatges • Les imatges estan ben guardades a la carpeta d'imatges corresponent. • Les imatges han estat escalades • Les imatges es refereixen al tema en qüestió Activitat 4 • Un dels documents està il·lustrat han tres de les imatges cercades • L'ancora funciona correctament • Una de les imatges conté una zona sensible que enllaça correctament amb una pàgina web externa • La tercera imatge està inclosa en una taula i enllaça amb l'altre document web Activitat 5 • El segon document conté un àlbum amb les cinc imatges cercades i escalades
Activitats, Competències, Avaluació, Criteris d'avaluació
8