seqüència didàctica imatges pàgines web

Seqüència didàctica: Inserció d'imatges a pàgines web Xavier Medina LópezCFA Ramon Llull

Les activitats que es plantegen a continuació estan dirigides a un grupd'informàtica de nivell d'usuari del torn de matí. Formen part d'altresactivitats dirigides a aprendre a utilitzar el programa de disseny de pàginesweb Dreamweaver. Les activitats se centren en la inserció d'imatges id'enllaços a imatges. El centre d'interès és l'elaboració d'una pàgina webpersonal.

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 delcontingut):

• 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, percomplementar la informació escrita, facilitar la navegació entredocuments 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


•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 ambl'ordinador es planteja de forma individual encara que col·laborativaper 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 unacarpeta de la xarxa del centre) i per escrit. Mostraran pas a pas iacompanyades d'imatges aclaridores les diferents funcions delDreamweaver, necessàries per realitzar el treball amb èxit. En funciódel punt de la programació on es troben els alumnes en aquestmoment del curs, es donen per superats els coneixements de lesactivitats tres i quatre.A l'inici de cada activitat el mestre farà una explicació global idonarà les indicacions oportunes per poder realitzar la pràctica. Amesura que l'alumne faci la pràctica el mestre observarà i aclarirà elspossibles dubtes que puguin sorgir individualment. Al final de cadapràctica es farà una posada en comú, valoració i comentari delsdiferents passos donats per realitzar l'activitat així com l'aclarimentde possibles dubtes (activitat de gran grup).

1. Exposició i valoració d'experiències de l'alumne on hagi observatimatges en un document web i/o inserit o treballat amb imatges ambun programa informàtic (processador de textos, projecció dediapositives, programa d'imatges...).



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 seusconeixements previs i es situï en el punt de partida per integrar nousaprenentatges. (Les qüestions es podrien resoldre en parelles idesprés fer les valoracions generals en gran grup)

3. Navegar i observar la web, per exemple, http://www.casareal.es/, icomprovar diferents enllaços a imatges i enllaços parcials a zonesd'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 temaconcret. Per exemple, d'astronomia. (Treball individual encara que encol·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 quequedin envoltades de text, dins d'una pàgina web amb contingutreferent a l'astronomia. (Treball individual encara que encol·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.



• Emmarcar alguna imatge i alinear-les de diferents maneres totfent servir la finestra flotant de propietats.

6. Moure i copiar imatges dins d'una taula. (Treball individual encaraque 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. (Treballindividual 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 queen 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 vantractar a la pràctica quatre.

• Ús del menú comandos i de l'opció crear un àlbum de fotos web.



• Caldrà posar un títol a l'àlbum, examinar la carpeta d'imatgesd'origen, identificar la carpeta de destí, indicar la grandària de laminiatura ... fins crear la pàgina de navegació.

10. Valoració grupal de l'aplicació de les diferents activitats, delsdubtes sorgits i de la seva utilitat.. (Activitat en gran grup).



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 iciutadana, (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 i criteris d'avaluació

Situació-problemaDisseny d'una pàgina web que inclogui cinc imatges tractades prèviamentamb diferents tipus d'enllaços.

Activitat 1Decideix un tema interessant per fer una pàgina web i explica per què.

Activitat 2Cerca informació en Internet, tot fent servir el cercador Google. Obre elDreamweaver i copia dos fragments que t'interessin en documents ambnoms diferents i guarda'ls dins de la mateixa carpeta genèrica.

Activitat 3Prepara cinc imatges, que hauràs de escalar-les amb el GIMP perincorporar-les a la web, relacionades amb la informació que has cercat. Lesimatges han de servir per aclarir els conceptes i el contingut de la pàginaweb. Guarda-les en una carpeta anomenada imatges dins de la carpetagenèrica.

Activitat 4Il·lustra un dels dos documents de manera que continguin tres imatges:

1. Una amb un àncora al mateix fitxer2. Una altre amb un mapa sensible que enllaci una pàgina web

relacionada3. La tercera inclosa en una taula ha d'enllaçar els dos documents

elaborats per tu.

Activitat 5Insereix en el segon document un àlbum de fotografies que contingui com amí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



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


seqüència didàctica imatges pàgines web

Documents