Map Area

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

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

Per definir els polígons (o rectangles o cercles) dins d'un mapa, es poden utilitzar diversos programes:

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:

file:///home/joan/M06_WEC/practica_map/mapa1.htm

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.

<body  onload="javascript:addTargetAttribute()">

passa a ser

<body>

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

<div class="header">

i que incloïa diferents capes com ara el logo,...

Així doncs, identifico on comença el mapa:

<div class="mapMain">

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:

<div class="home-postits">

com la definició de les coordenades:

<map name="postitmap">

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/

la línia quedarà:

<script type="text/javascript" src="js/script_js.js"></script>

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:

$ wget http://www.segundamano.es/img/1x1.gif

queda:

<img class="countyImage" src="img/1x1.gif" alt="" width="512" height="425" usemap="#spain_map" />

Ara fem el full d'estils:

la línia quedarà:

<link href="css/style.css" rel="stylesheet" type="text/css" media="all">

i si actualitzem la pàgina veiem que tot ha desaparegut. Això és perquè el fitxer CSS conté moltes referències tipus:

url('/img/sprite_mapa1.png?3582')

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:

$ 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

S'ha d'eliminar el sufix ?3582 en aquestes imatges.

substituïm el llençol de color blanc sobre el qual pintarem el mapa:

<img class="countyImage" src="http://www.segundamano.es/img/1x1.gif" alt="" width="512" height="425" usemap="#spain_map" />

per

<img class="countyImage" src="img/1x1.gif" alt="" width="512" height="425" usemap="#spain_map" />

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:

.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}

Però aquesta no és la solució correcta. El correcta és posar:

.sprite-region-1{background:transparent url('../img/sprite_mapa1.png') 0 1px no-repeat;width:512px;height:425px}

é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:

onclick="return xt_click(this,'C','1','Acceso_Listado_Home','N')"

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

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)

Des del DOM podem accedir programàticament a un mapa. Aquestes són les propietats a les que podem accedir:

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

En el fitxer mapa6.htm hem afegit el següent codi JS:

<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>

creat per Joan Quintana Compte, novembre 2019

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines