Unitat didàctica (fer)

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/index-min.css?3603" 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>
és a dir, que hi ha la carpeta img/ amb molts recursos que són necessaris:

http://www.segundamano.es/img/sprite_mapa1.png?3582
http://www.segundamano.es/img/sprite_mapa2.png?3582
http://www.segundamano.es/img/sprite_mapa3.png?3582
http://www.segundamano.es/img/sprite_mapa4.png?3582
http://www.segundamano.es/img/sprite_mapa5.png?3582
http://www.segundamano.es/img/spain_map.png?3582
http://www.segundamano.es/img/sprite_home.png?3582
http://www.segundamano.es/img/sprite_home_icons.png?3582

Substitueixo ?3582 per res

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

Tanmateix, això és inadmissible, i s'haurà d'arreglar. La solució està a:
*http://www.webmasterworld.com/forum83/767.htm
i és ben senzill:
<pre>
I reckon it's a path issue

external stylesheets call the image relative to the itself and NOT the HTML pages. 
</pre>
Per tant s'haurà de posar:
<pre>
.sprite-region-1{background:transparent url('../img/sprite_mapa1.png') 0 1px no-repeat;width:512px;height:425px}
</pre>

Havíem discutit a classe com aconseguíem que la llista de províncies es dividís en dues columnes. Són dues llistes que vénen governades pel següent estil:
<pre>
.listOfCounties{width:81px;float:right;margin:0;padding-left:17px;font-size:13px;text-align:right}
</pre>
i si ens fixem l'ample està limitat a un valor fix i es força a ocupar l'espai flotant de la dreta. És així com s'aconsegueix les dues columnes.

mapa5.htm

Si ens fixem els enllaços vénen referenciats a segundamano.es, i no funcionen. El que farem ara és que funcionin i que vagin redirigits a la wikipedia per donar-nos informació sobre aquesta província.

<pre>
<li><a id="county_50" onmouseover="change_image(50);" onmouseout="hide_image(50);"  onclick=" xt_click(this,'C','1','Acceso_Listado_Home','N'); return false;" title="Zaragoza" href="http://es.wikipedia.org/wiki/Zaragoza">Zaragoza</a></li>
...
<area onMouseOver="change_image(50);" onMouseOut="hide_image(50);" shape="poly" coords="387,128,380,139,354,125,346,135,331,135,313,146,300,136,296,136,292,128,305,107,304,94,319,98,324,91,319,80,325,66,337,56,339,78,343,75,343,89,340,93,352,100,366,113,370,124,385,121,387,128"  onclick="return xt_click(this,'C','1','Acceso_Mapa_Home','N','http://es.wikipedia.org/wiki/Zaragoza')"  href="http://es.wikipedia.org/wiki/Zaragoza" title="Zaragoza" alt="Zaragoza" />
...
</pre>
L'enllaç del llistat de províncies no funciona degut a les següents línies:
<pre>
onclick=" xt_click(this,'C','1','Acceso_Listado_Home','N'); return false;"
</pre>
Eliminant aquestes línies ja funciona l'enllaç, però el que encara no funciona és l'enllaç del mapa. Fico els enllaços correctes a la wikipedia, i també reemplaço valors menors, per ex:
<pre>
title="Anuncios en Ja&eacute;n"
</pre>
per
<pre>
title="Anuncios en Ja&eacute;n"
</pre>


