Joan: /* Map Area i el DOM */

2018-09-20T15:37:20Z

Map Area i el DOM

Pàgina nova

=Introducció=
En moltes situacions el dissenyador/programador web no construeix de zero, sinó que vol fer una aplicació web ''similar a...'', potser per requisits del client. En aquesta unitat veurem com es pot analitzar i adaptar un '''Map Area''' per a ser reutilitzat per a la nostra aplicació.

Aprofitar codi no té perquè ser una tasca fàcil. Té a veure amb tècniques d'enginyeria inversa. S'ha de saber destriar el pa de la palla, saber allò que és essencial i allò que és accessori.

En el cas de les tecnologies web, a més, es barregen diferents tecnologies i tècniques: hem de conèixer html, Javascript, CSS, i tot plegat està interrelacionat.

Es presenta la següent pràctica com un exemple real de les dificultats que un es pot trobar, i per tant seria bo que intentés l'alumne comprendre i realitzar pel seu compte el procediment que aquí es planteja.

En definitiva, es tracta d'aprofitar el mapa de les províncies de l'Estat Espanyol, i la seva funcionalitat, per obtenir-ne una versió mínima llesta per a ser aprofitada en altres webs.

Un altre objectiu és que l'alumne utilitzi les seves eines de depuració, com ara '''Firebug''', per realitzar la pràctica.
=Referències=
*http://www.segundamano.es/
*Descarrega el projecte: [[Fitxer:Practica map.zip]]

Per definir els polígons (o rectangles o cercles) dins d'un mapa, es poden utilitzar diversos programes:
*GIMP. Té una opció per definir mapes.
*També ho pots fer amb el Dreamweaver
*solucions online: http://www.maschek.hu/imagemap/imgmap

=Adaptació d'un Map Area=
S'anirà explicant pas a pas el procés que es segueix. Seria bo que l'alumne també seguís els mateixos passos.
==mapa1.htm==
1a prova: a www.segundamano.es faig ''Veure codi font'', i ho gravo amb el fitxer mapa1.htm. Es veu el mapa correctament (mapa i la llista de províncies). És un recurs local:
<pre>
file:///home/joan/M06_WEC/practica_map/mapa1.htm
</pre>
Però evidentment hi ha referències a fitxers i imatges que estan a Internet, i que es visualitzen bé perquè tinc connectivitat.

==mapa2.htm==
Ara es tracta d'eliminar tot allò que sigui superflu i quedar-se només amb la part que ens interessa per tal de fer un mapa similar.

En el <head> canvio el title i els metas per tal d'adaptar-los a les meves necessitats.
Elimino scripts de Javascript que no tenen res a veure amb la nostra adaptació. A mida que vaig suprimint scripts i capes visualitzo el resultat per assegurar-me de què ho estic fent bé i que la funcionalitat del mapa continua sent correcta. Elimino la referència a jquery que no s'utilitza per a res.
<pre>
<body onload="javascript:addTargetAttribute()">
</pre>
passa a ser
<pre>
<body>
</pre>
doncs aquesta funció no té res a veure amb la nostra adaptació.

la referència al script '''index-min.js?3603''' la deixo tal qual perquè aquest serà el nostre javascript principal.

Elimino capes: id="BannerTopContainer", id="log", i sobre tot tota la capçalera que ve representada per
<pre>
<div class="header">
</pre>
i que incloïa diferents capes com ara el logo,...

Així doncs, identifico on comença el mapa:
<pre>
<div class="mapMain">
</pre>
que inclou el mapa pròpiament dit, la llista amb totes les províncies, i els post-its.

Elimino totes les capes que fan referència a la appStores i al footer.

També elimino tota la part que diu ''comScore'' fins avall (fins al </body>), que és funcionalitat que no té res a veure amb l'aplicació.

==mapa3.htm==
El primer que faré és eliminar els '''post-its'''. Si ens fixem els post-its també és un Area MAP, que vol dir que hem de suprimir la capa que inclou la imatge:
<pre>
<div class="home-postits">
</pre>
com la definició de les coordenades:
<pre>
<map name="postitmap">
</pre>
De moment he reduït el codi a 250 línies.

==mapa4.htm==

el següent objectiu serà que tots els recursos que utilitzem (fitxers CSS, Javascript, imatges) siguin locals. Per fer-ho, crearé les carpetes js/, css/ i img/
*http://www.segundamano.es/js/index-min.js?3603 passa a anomenar-se js/script_js.js
la línia quedarà:
<pre>
<script type="text/javascript" src="js/script_js.js"></script>
</pre>
Descarrego la imatge 1x1.gif a la carpeta img/. Aquesta imatge senzillament és un pixel 1x1, i que aquest pixel es pinta sobre un llençol de dimensions 512x425:
<pre>
$ wget http://www.segundamano.es/img/1x1.gif
</pre>
queda:
<pre>
<img class="countyImage" src="img/1x1.gif" alt="" width="512" height="425" usemap="#spain_map" />
</pre>
Ara fem el full d'estils:
*http://www.segundamano.es/css/index-min.css?3603
la línia quedarà:
<pre>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all">
</pre>
i si actualitzem la pàgina veiem que tot ha desaparegut. Això és perquè el fitxer CSS conté moltes referències tipus:
<pre>
url('/img/sprite_mapa1.png?3582')
</pre>
i aquestes referències estan malament, tal com s'explica. El primer és descarregar totes les imatges necessàries. El professor ho fa de la següent manera:
<pre>
$ cd img/

$ wget http://www.segundamano.es/img/sprite_mapa1.png?3582
$ wget http://www.segundamano.es/img/sprite_mapa2.png?3582
$ wget http://www.segundamano.es/img/sprite_mapa3.png?3582
$ wget http://www.segundamano.es/img/sprite_mapa4.png?3582
$ wget http://www.segundamano.es/img/sprite_mapa5.png?3582
$ wget http://www.segundamano.es/img/spain_map.png?3582
$ wget http://www.segundamano.es/img/sprite_home.png?3582
$ wget http://www.segundamano.es/img/sprite_home_icons.png?3582
</pre>
S'ha d'eliminar el sufix ''?3582'' en aquestes imatges.

substituïm el llençol de color blanc sobre el qual pintarem el mapa:
<pre>
<img class="countyImage" src="http://www.segundamano.es/img/1x1.gif" alt="" width="512" height="425" usemap="#spain_map" />
</pre>
per
<pre>
<img class="countyImage" src="img/1x1.gif" alt="" width="512" height="425" usemap="#spain_map" />
</pre>

Després de fer aquests canvis no es veuen les imatges per pantalla. El que falta és referenciar amb la url absoluta del recurs local totes les imatges. Per exemple:
<pre>
.sprite-region-1{background:transparent url('file:///home/joan/M06_WEC/practica_map/img/sprite_mapa1.png') 0 1px no-repeat;width:512px;height:425px}
</pre>
Però aquesta no és la solució correcta. El correcta és posar:
<pre>
.sprite-region-1{background:transparent url('../img/sprite_mapa1.png') 0 1px no-repeat;width:512px;height:425px}
</pre>
és a dir, les imatges que estan referenciades en el fitxer css/style.css han de trobar la seva ruta correcta dins de la carpeta img/.

==mapa5.htm==
Finalment queda netejar tot el codi. Eliminem tota referència a ''Anuncios...'', i fiquem com a enllaços la informació que ens dóna la wikipedia de cada província. Ens preocupem de què tots els enllaços funcionin, i això passa per eliminar les funcions javascript de tipus:
<pre>
onclick="return xt_click(this,'C','1','Acceso_Listado_Home','N')"
</pre>
Després de fer tota la neteja i comprovar que els enllaços funcionen, el fitxer mapa5.htm té 143 línies.

=Coses a fer=
*S'hauria de canviar el color de les imatges per tal de què no recordessin a l'aplicació original
*S'hauria de netejar els fitxers CSS per tal d'eliminar tot allò innecessari
*No s'ha tocat per res el fitxer javascript (la única cosa que s'ha fet és ressaltar les funcions ''change_image'' i ''hide_image''). S'hauria d'analitzar la funcionalitat javascript que tenim en el ''mouseover'', que d'altra banda és bastant simple.

=Map Area i el DOM=
L'estudi que estem fent dels '''map area''' ha vingut donat perquè estàvem estudiant el DOM i ens va sorgir un exemple on es veien mapes HTML. Per no perdre de vista que estem estudiant el DOM i com podem accedir (i modificar) a tots els elements d'una pàgina web, i concretament del DOM, anem a fer unes quantes ''perreries'' en el nostre mapa de les províncies: (veure '''mapa_dom.htm''')

*http://www.w3schools.com/jsref/dom_obj_area.asp
*http://www.w3schools.com/jsref/dom_obj_element.asp

Des del DOM podem accedir programàticament a un mapa. Aquestes són les propietats a les que podem accedir:
<pre>
alt Sets or returns the value of the alt attribute of an area
coords Sets or returns the value of the coords attribute of an area
hash Sets or returns the anchor part of the href attribute value
host Sets or returns the hostname:port part of the href attribute value
hostname Sets or returns the hostname part of the href attribute value
href Sets or returns the value of the href attribute of an area
noHref Sets or returns the value of the nohref attribute of an area
pathname Sets or returns the pathname part of the href attribute value
port Sets or returns the port part of the href attribute value
protocol Sets or returns the protocol part of the href attribute value
search Sets or returns the querystring part of the href attribute value
shape Sets or returns the value of the shape attribute of an area
target Sets or returns the value of the target attribute of an area
</pre>

En el fitxer ''mapa6.htm'' hem afegit el següent codi JS:
<pre>
<script>
//http://www.w3schools.com/jsref/dom_obj_area.asp
//http://www.w3schools.com/jsref/dom_obj_element.asp

var llista_mapes=document.getElementsByTagName("map");
alert('Número de mapes: '+llista_mapes.length);

var mapa_prov=document.getElementsByTagName("map")[0];
var llista_arees = mapa_prov.getElementsByTagName("area");
alert('Número d\'àrees en el mapa: '+llista_arees.length);
//accedim a dades de la 5a àrea:
alert("title: "+llista_arees[4].title);
alert("alt: "+llista_arees[4].alt);
alert("href: "+llista_arees[4].href);
alert("shape: "+llista_arees[4].shape);
alert("coords: "+llista_arees[4].coords);

//recorrem totes les àrees... bé, no totes
for (var i=0;i<llista_arees.length-48;i++)
{
document.write(llista_arees[i].title);
document.write("<br />");
}
//la primera província és Araba, li canviaré les coordenades:
llista_arees[0].coords = '0,0,20,0,20,20,0,20';

//canvio el comportament (event) d'Alcant (3) per Albacete (2)
//http://www.w3schools.com/jsref/dom_obj_event.asp
llista_arees[1].onmouseover=function(){change_image(3);};
llista_arees[1].onmouseout=function(){hide_image(3);};
llista_arees[2].onmouseover=function(){change_image(2);};
llista_arees[2].onmouseout=function(){hide_image(2);};
</script>
</pre>

{{Autor}}, novembre 2019
[[Categoria: Institut Jaume Balmes]]
[[Categoria: Assignatura DAW-M06-WEC]]

Map Area - Historial de revisió

Joan: /* Map Area i el DOM */