un bloc heteròclit: html

És ben cert que quan es comparteix un enllaç a Facebook sovint apareixen miniatures no desitjades o no n'apareix cap. Com es pot predeterminar la miniatura que farà servir Facebook??

Molt senzill. Facebook triarà la miniatura que estigui determinada pel metatag 'image_src'. Això significa que si definim aquesta etiqueta en relació a una imatge a la capçalera del nostre blog, sempre que l'enllacem, es mostrarà aquesta imatge com a miniatura. Per a fer això, hem d'anar a la part de codi font que defineixi el nostre blog (cada servei de blogs té les seves interioritats característiques) i posar el codi següent entre les etiquetes <head> i </head>. Haurem de posar-hi la url de la imatge que desitgem que sigui la miniatura.

Què passa si volem que cada entrada que escrivim tingui la seva pròpia imatge?? Doncs el que hem de fer és definir aquesta etiqueta al codi font de l'entrada que estem escrivint. A l'editor de l'entrada acostuma a haver-hi un editor HTML. Entrem a l'editor de codi HTML i a l'inici del codi hi copiem el següent codi, inserint-hi la url de la imatge que desitgem que sigui la miniatura.

<head>

</head>

Amb aquest codi, en cap cas mostrarem la imatge que definim com a miniatura a dins de l'entrada, per tant, aquest codi serà totalment transparent. Aquesta característica ens permetrà definir una miniatura per a Facebook diferent de les imatges que vulguem que siguin a dins de l'entrada del blog, si és que així ho volem.

El servei que dóna Google Maps és molt còmode d'utilitzar. És fàcil d'incrustar i de manipular però la cartografia base que mostra té molt per desitjar, en especial en zones rurals i de muntanya. Aquesta limitació, a Catalunya, es pot suplir posant la cartografia de l'Institut Cartogràfic de Catalunya com a capa al visor de Google Maps. La API de GM permet incorporar geoserveis Web Map Service (WMS) dins de la seva aplicació. En aquest article només explicaré els detalls del codi que s'ha de canviar per poder incrustar l'aplicació a la teva web. Al final d'aquest article hi ha els codis font complets. Copia'ls i guarda'ls en arxius de text pla, amb el nom que vulguis però amb extensió *.htm (mapa.htm, TrobarCoordenades.htm).

Pots trobar un exemple d'això al bloc següent: http://barrancat.blogspot.com/

El primer que s'ha de fer és aconseguir una Google Maps API Key. És una clau que serveix per poder incrustar l'aplicació de GM a la teva web. És ràpida d'aconseguir i gratuïta (com a mínim per ara). Només has d'entrar al vincle anterior, posar-hi el teu lloc web o bloc i generar la clau de l'API. Al codi font dels dos arxius *.htm que has generat, a la tercera línia, s'ha de canviar la clau API que hi ha per la teva.

Edició de l'arxiu 'mapa.htm'

S'ha de buscar el tros de codi següent a dins de l'arxiu 'mapa.htm' i modificar-hi el que està marcat. En vermell, i respectivament, hi ha la longitud i la latitud (les coordenades que defineixen el punt central del mapa que es mostrarà), i el nivell de zoom (número enter de 0 -min- a 19 -max- ). Aquestes coordenades s'han de canviar. Per poder aconseguir les noves coordenades, s'haurà d'utilitzar l'arxiu 'TrobarCoordenades.htm' tal i com s'explica més endavant. El zoom es pot canviar segons les necessitats existents.

    // Configura el punt central del mapa

    var centrePoint = new GLatLng('41.84928850087535', '2.960536479949951');

    // Defineix el punt central i el nivell de zoom

    map.setCenter(centrePoint, 16);

Si no vols tenir el marcador (el punt vermell en el mapa), hauràs d'esborrar el tros de codi següent:

// Afegeix un marcador arrossegable

// Si no vols que ho sigui, posa {draggable: false}

var marker = new GMarker(centrePoint, {draggable: false});

map.addOverlay(marker);

Finalment, si vols canviar la mida del mapa, has de canviar l'alçada (height) i l'amplada (width) del mapa. La unitat és el píxel.

id="map" style="width: 640px; height: 520px"

Amb aquests paràmetres ja tindries l'aplicació preparada per incrustar a la web. Només et faltaria trobar les coordenades adequades per al nostre mapa. Has d'obrir l'arxiu 'TrobarCoordenades.htm' i moure el marcador fins al lloc escollit que vols que aparegui com a centre del mapa que vols incrustar. A sobre del mapa hi apareixeran les noves coordenades a mesura que vagis movent-te pel mapa. Copia-les i enganxa-les al codi de l'arxiu 'mapa.htm', i quan l'executis ja hauria d'aparèixer la nova localització.

Codi font 'mapa.htm'

--------------------------------------------------------------->

Codi font 'TrobarCoordenades.htm'

--------------------------------------------------------------->

un bloc heteròclit

dissabte, 7 d’abril del 2012

Definir la miniatura per mostrar al Facebook

dimarts, 6 de juliol del 2010

Com incrustar Google Maps amb la cartografia de l' Institut Cartogràfic de Catalunya (ICC) a la teva web.