M06UF3Q3: Google Images i taula dinàmica - Historial de revisió

Joan: /* Aplicar les classes d'estil als elements de la taula */

2021-12-02T19:31:58Z

Aplicar les classes d'estil als elements de la taula

Joan: /* Desenvolupament */

2021-11-25T19:38:10Z

Desenvolupament

Joan: /* Header i footer de la taula */

2021-11-25T19:37:19Z

Header i footer de la taula

Joan: /* Header i footer de la taula */

2021-11-25T19:18:29Z

Header i footer de la taula

Joan: /* Introducció */

2021-11-25T19:13:23Z

Introducció

Joan: /* Header i footer de la taula */

2021-11-25T19:12:06Z

Header i footer de la taula

Joan: /* Desenvolupament */

2021-11-25T19:06:40Z

Desenvolupament

Joan: /* Entrega al Classroom */

2021-11-25T18:58:48Z

Entrega al Classroom

Joan a 18:58, 25 nov 2021

2021-11-25T18:58:03Z

Joan: Es crea la pàgina amb «Millores a implementar: 1) origen de les dades: ves a google images, cerca per un tema del teu interès, i copia el codi resultant (Ctrl-U, ver código fuente) 2) pots...».

2021-11-25T18:47:01Z

Es crea la pàgina amb «Millores a implementar: 1) origen de les dades: ves a google images, cerca per un tema del teu interès, i copia el codi resultant (Ctrl-U, ver código fuente) 2) pots...».

Pàgina nova

Millores a implementar:
1) origen de les dades: ves a google images, cerca per un tema del teu interès, i copia el codi resultant (Ctrl-U, ver código fuente)
2) pots accedir a les imatges contingudes mitjançant document.images, i a partir d¡aqií a les propietats (name, etc)
3) crea de forma dinàmica una taula, amb els següents requisits:
3.1) crear una capçalera ('fotos de fútbol, per ex') (hauràs d'utilitzar colspan)
3.2) crea un full d'estils style.css per a la taula (per exemple, pots agafar l'estil que es proposa a:
https://jsfiddle.net/zinoui/dB93J/)
3.3) Crea un footer per a la taula, amb el teu nom

Com accedim a les imatges que tenim en el document html que hem creat a partir de la pàgina de Google Images?

Prova el següent codi i ho tindràs més clar:
<pre>
console.log(document.images.length);
console.log(document.images[22].alt);
console.log(document.images[22].width);
console.log(document.images[22].height);
console.log(document.images[22].src);
</pre>

Amb la informació d'aquests 4 camps ja pots generar la teva taula de forma dinàmica.
Els camps que contenen molt text els pots limitar a 20 caràcters i posar punts suspensius.

@@ Línia 87: / Línia 87: @@
 <pre>
 taula.className = "taula_estil";
 </pre>
 i podem defiinir com es comporten les cel·les d'aquesta taula, per ex:
@@ Línia 97: / Línia 99: @@
+}
 </pre>
 =Entrega al Classroom=

@@ Línia 81: / Línia 81: @@
 th.setAttribute("colspan", "2");
 </pre>
-==Aplicar les classes d'estil als elements de la taula==ç
+==Aplicar les classes d'estil als elements de la taula==
 Per exemple, si seguim l'exemple:
 *https://jsfiddle.net/zinoui/dB93J/

@@ Línia 80: / Línia 80: @@
 th = document.createElement("th");
 th.setAttribute("colspan", "2");
 </pre>

@@ Línia 1: / Línia 1: @@
 =Introducció=
 Hem vist a classe com generar una taula dinàmica amb Javascript i ''createElemnt''. Creem la taula, els tr, els td, els nodes de text, i anem ajuntant (''append'') cadascun d'aquests elements al seu pare.
 =Desenvolupament=
 A partir de l'exemple vist a classe, anem a fer la mateixa idea aplicat a unes imatges de Google Images.

@@ Línia 44: / Línia 44: @@
 </pre>
 ==Header i footer de la taula==
-Si no ho has vist mai, sàpigues que en una taula html no tenim només ''tr'' i ''td'', sinó que també tenim el concepte de capçlaera (''th'') i peu de la taula (''tf''). I al th i tf se'ls pot aplicar uns estils css diferenciats.
+Si no ho has vist mai, sàpigues que en una taula html no tenim només ''tr'' i ''td'', sinó que també tenim el concepte de cel·les de capçalaera (''th'' en comptes de ''td'') (aplicable tant a la capçalera com al peu). I a tots els elements d'una taula se'ls pot aplicar estils css diferenciats (''table'', ''thead'', ''tbody'', ''tfooter'', ''tr'', ''td'', ''th'').
 Per al nostre ''head'' i ''footer'' haurem de fer un ''colspan'' (és a dir, la capçalera ha d'ocupar l'espai de 4 cel·les). Ho fem de la següent manera:
 <pre>

@@ Línia 21: / Línia 21: @@
 Com accedim a les imatges que tenim en el document html que hem creat a partir de la pàgina de Google Images?
-Prova el següent codi i ho tindràs més clar:
+Prova el següent codi i ho tindràs més clar (aquest codi anirà dins un tag de ''script'', al final de tot de la pàgina):
 <pre>
 console.log(document.images.length);

@@ Línia 32: / Línia 32: @@
 Per tant, la taula tindrà l'estructura:
 <pre>
------------------------------
+------------------------------
-Fotos Everest
+Fotos Everest                |
 ------------------------------
 alt  | width | height | src  |
@@ Línia 40: / Línia 40: @@
 ...  | ...   | ...    | ...  |
 ------------------------------
-taula realitzada per Pep
+taula realitzada per Pep     |
 ------------------------------
 </pre>
 =Entrega al Classroom=
 Entregaràs en el Classroom la teva solució, amb les captures de pantalla que siguin l'evidència de què has fet tu el codi, que has implementat les tasques que se't demanen, i que s'executa en la teva màquina.

@@ Línia 1: / Línia 1: @@
-Millores a implementar:
+=Introducció=
-) origen de les dades: ves a google images, cerca per un tema del teu interès, i copia el codi resultant (Ctrl-U, ver código fuente)
+Hem vist a classe com generar una taula dinàmica amb Javascript i ''createElemnt''. Creem la taula, els tr, els td, els nodes de text, i anem ajuntant (''append'') cadascun d'aquests elements al seu pare.
-) pots accedir a les imatges contingudes mitjançant document.images, i a partir d¡aqií a les propietats (name, etc)
+=Desenvolupament=
-) crea de forma dinàmica una taula, amb els següents requisits:
+A partir de l'exemple vist a classe, anem a fer la mateixa idea aplicat a unes imatges de Google Images.
-.1) crear una capçalera ('fotos de fútbol, per ex') (hauràs d'utilitzar colspan)
-.2) crea un full d'estils style.css per a la taula (per exemple, pots agafar l'estil que es proposa a:
+'''1.''' origen de les dades: ves a google images, cerca per un tema del teu interès, i copia el codi resultant (Ctrl-U, ver código fuente), i guarda-ho localment a ''google_images.html''.
 https://jsfiddle.net/zinoui/dB93J/)
 .3) Crea un footer per a la taula, amb el teu nom
 Com accedim a les imatges que tenim en el document html que hem creat a partir de la pàgina de Google Images?
@@ Línia 19: / Línia 28: @@
 </pre>
-Amb la informació d'aquests 4 camps ja pots generar la teva taula de forma dinàmica.
+Amb la informació d'aquests 4 camps ja pots generar la teva taula de forma dinàmica. Els camps que contenen molt text els pots limitar a 20 caràcters i posar punts suspensius.
 Els camps que contenen molt text els pots limitar a 20 caràcters i posar punts suspensius.