Category: Articoli

From Google Maps to OpenStreetMap on your website

Some time ago, I wrote a simple guide to make a slippy map for a website using Google Maps API.
Since I started adding geographical data in OpenStreetMap, I wanted to offer an alternative to my visitors and I studied some examples to make this possible, changing them to ease the transition of previously used GMap data to the new layout, writing functions similar to those of Google Maps API, except for the Adsense part.
OpenStreetMap is available as a slippy map via OpenLayers.

-Include the javascript libraries

<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>

-Make some space and init

<body onload="init();">
<div style="width:100%; height:90%" id="map"></div>
</body>

-Write the functions
1. coordinates object: the style used by Gmaps was a simple function which gives an object from the coordinates in the ‘lat,lon’ form, so we must write two functions, the one which gives the object and the one which swap the coordinates.

function coordinv(lat, lon)
{
return coord(lon, lat);
}
			
function coord(lon, lat)
{
var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
return lonLat;
}

2. marker creation: as in Gmaps we must pass the layer, the coordinates, the text which will appear in the popup plus a custom marker image (if you want it fixed you can add it)

function createmarker(layer, geo, text, img)
{
var feature = new OpenLayers.Feature(layerMarkers, geo);
feature.closeBox = true;
feature.popupClass = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, {minSize: new OpenLayers.Size(200, 100) } );
feature.data.overflow = "hidden";
feature.data.popupContentHTML = text;
			
var size = new OpenLayers.Size(21, 25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon(img,size,offset);
var marker = new OpenLayers.Marker(geo, icon);
marker.feature = feature;
  
var markerClick = clickev;
marker.events.register("mousedown", feature, markerClick);
layer.addMarker(marker);
}

3. event for the popup

function clickev(evt){
if (this.popup == null) {
this.popup = this.createPopup(this.closeBox);
map.addPopup(this.popup);
this.popup.show();
} 
else {
this.popup.toggle();
}
OpenLayers.Event.stop(evt);
};

-places: there’s a nice feature of openlayers to read from file, but to reuse the gmap data it’s simple using a function which draws directly on the layer, coordinv specifically substitutes the GLatLng function

function places()
{	
var img='http://www.openstreetmap.org/openlayers/img/marker.png';
createmarker(layerMarkers, coord(lon, lat), 'ahoy!', img);
createmarker(layerMarkers, coordinv(lat, lon), 'ahoy!', img);
}

-init: the code to initialize the map, in the function we start a map with the choice Mapnik/Osmarenderer/Cyclemap and a layer for the markers, lastly we center the map and we call the places function to populate the markers layer.

var lat=startlat;
var lon=startlon;
var zoom=startzoom;

var map; 
		
function init() {
map = new OpenLayers.Map ("map", {
controls:[
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Attribution()],
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
maxResolution: 156543.0399,
numZoomLevels: 19,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
} );
 
layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
map.addLayer(layerMapnik);
layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
map.addLayer(layerTilesAtHome);
layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
map.addLayer(layerCycleMap);
			
layerMarkers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(layerMarkers);
  
map.setCenter(coord(lon, lat), zoom);
places(layerMarkers);
}

We successfully converted a Gmap into an OSM map.

Sources: the OSM wiki and OpenLayers Examples

Configurazione essenziale di un sito WordPress

Mi hanno chiesto un portale in cui dovevano esserci articoli, foto e video come requisito base che fosse utilizzabile anche da una persona con poche conoscenze informatiche.
Ho puntato direttamente su WordPress il che mi ha permesso anche di puntare verso una maggiore iterazione con i visitatori (quindi si va verso una community), avendo come base una precedente pagina fan di Facebook.

-Hosting
Ho provato per la prima volta un hosting Linux e cambierò anche i miei siti, non fosse altro perchè così posso finalmente usare gli url fighi con il mod_rewrite di Apache. Ho trovato un bell’hosting da 9 euro all’anno compresa la registrazione del dominio e me lo terrò stretto.

-Installazione
Wordpress una volta preparato il database (cioè avendo username e password) si installa magicamente da solo, ricordando pero’ di dargli i permessi giusti altrimenti protesta. Facile e subito pronto all’uso.

-Tema
Mi piacciono molto i temi fluid pero’ sono disposto a rinunciarci quando riesco a trovare un tema che mi piaccia e che abbia la possibilità di avere un menù a discesa, i siti statici mi influenzano e devo avere tutto sott’occhio. 2010 Weaver è una mod del tema ufficiale di WP del 2010 che ha un sacco di sottotemi e configurazioni di default. Il tema più semplice e completo che aveva le caratteristiche che cercavo.

-Plugin
Scaricata la traduzione italiana in versione XXL avevo già 4 plugin inclusi:
Add From Server
LinkLift (Widgets)
Google XML Sitemaps
WordPress Database Backup
Gli ultimi due sono molto utili in fase di configurazione ed indicizzazione.
Akismet anch’esso è preinstallato, ma al momento non mi serve, lo spam lo combatterò un’altro giorno.

Custom Login Logo Lite: Cambia solo il logo della schermata di login
Login Configurator: Lo utilizzo solo per redirigere alla pagina principale
Register Plus Redux: questa mi fa aggiungere dettagli alla schermata di registrazione
Se questi tre plugin fossero integrati in un unico plugin non esiterei a passare a quel plugin

Google Analytics for WordPress: integra nel portale i codici di Analytics (evita di andare a maneggiare il codice)
FancyBox for WordPress: Opportunamente configurato, da’ un effetto Lightbox alle foto dei post
HTML5 AV Manager for WordPress: player html5 che fa il fallback a Flash nel caso dovessi integrare media hostandoli direttamente nel sito.
bOingball BBCode: perchè il BBCode nell’editor fa figo ed è più semplice da insegnare

NextGEN Gallery (+Sidebar Widget): Un photo manager fatto molto bene che permette di inserire anche facilmente gallery nei post a partire dagli album

TubePress: interessante plugin che crea gallery a partire da video di Youtube e Vimeo, selezionandoli per canale o per query di ricerca ad esempio.

Simple:Press: un forum incluso in un unico plugin! Questo è fantastico, una soluzione per integrare un forum garantendo che gli utenti siano gli stessi del blog e interagendo coi post stessi del blog.

Come convincere un cliente che il suo sito non ha bisogno della musica

Ho perso il conto di quanti clienti hanno richiesto la musica in background per il loro sito. Come sviluppatore web professionale con un po’ troppi anni passati ad implementare richieste ridicole, ho acquisito abbastanza destrezza nel convincere i clienti che la musica è una cattiva idea. Ci sono eccezioni ovvie: come i siti dei gruppi musicali o siti coinvolti pesantemente nel multimedia. Io sto parlando di quei siti ricchi di contenuti dove l’utente non si aspetta (o non vuole) una esperienza multimediale.

La prossima volta che un cliente decide che un po’ di tunz tunz potrebbe dargli un po’ di incisività, riferitevi a questa lista per convincerlo che sta solo rovinando il suo sito.

1 E’ invadente: Avere la musica in sottofondo può interrompere qualunque cosa stia uscendo dagli altoparlanti dell’utente. Molte persone usano il loro computer come riproduttori multimediali per musica e video. Interromperli all’improvviso è come se un giornale saltasse dal tavolo e si avvolgesse intorno alla tua testa come un Facehugger iniziando a sputare titoli nella tua gola. C’è probabilmente un esempio migliore da usare quando parli veramente col cliente, ma così cogli l’idea: e’ come forzare nella gola dell’utente qualcosa che lui non ha chiesto. L’utente si aspetta pagine web che contengano informazioni utili, non che abbiano una musichetta.

2 Si interrompe quando clicchi da qualche parte: A meno che non hai qualche sorta di frame nascosto (se lo fai, hai problemi più grossi della musica da affrontare), il suono si interromperà ogni volta che clicchi da pagina a pagina.

3 Non tutti i browser e i sistemi operativi supportano contenuti multimediali: Ci sono un sacco di browser vecchi là fuori nella rete che potrebbero non supportare i file multimediali o avere serie difficoltà ad eseguirli. Questo è un punto difficile contestare per il cliente perchè è un problema tecnico. Mi piace sempre presentarmi a loro con la domanda: “Se dovevate scegliere tra alcuni utenti capaci di sentire la musica ed altri il cui browser crasha OPPURE avere tutti in grado di vedere il sito senza nessun problema, cosa avreste scelto?”

4 Rallenta le cose: Avere la musica in esecuzione diminuirà la performance del sito, specialmente su macchine più lente. Non solo renderà più povera l’esperienza del visitatore durante la sua visita, ma li renderà meno propensi a visitare di nuovo il vostro sito per paura che trasformi di nuovo le cose in melassa.

5 E’ pacchiano e non professionale: Giocate sulla loro vanità: avere la musica in sottofondo era figo a metà degli anni novanta quando il web era appena stato creato. Adesso non lo è più, è considerata il marchio del dilettante. Se metterete la musica in sottofondo, potreste anche mettervi una cintura di castità. Siete un fossile, andate a sedervi in un museo e a scorreggiare polvere.

6 C’è una ragione se gli altri siti non hanno la musica: Molti clienti pensano che visto che la maggioranza dei siti web non esegue musica, averla sul proprio sito li renderà eccezionali e si distingueranno nella competizione. Questo è errato, la ragione per la quale la maggioranza dei siti non ha la musica in esecuzione è che molti siti sono d’accordo nel ritenerla una cattiva idea. Solo perchè non avete mai visto un sito con un gattino gigante come cursore non significa che dovreste essere il primo a provare.

7 A non tutti potrebbe piacere la vostra musica: Quello che certe persone considerano d’atmosfera e gradevole, altre potrebbero trovarlo irritante e assimilarlo a musica da ascensore.

8 Chiedetegli se ha mai visto Myspace: Siete mai finiti nella pagina Myspace di qualcuno e vi siete trovati a cercare nel panico il bottone STOP sul riproduttore di musica che hanno integrato da qualche parte in quell’abominio che chiamano un profilo? Nel frattempo i vostri altoparlanti stanno sparando a palla qualche merdosa musica emo riguardo il pianto di lacrime amare. E’ possibile che molti clienti abbiano avuto esperienza di prima mano di questa cosa e possano direttamente relazionarsi alla vostra frustrazione. Tuttavia, se questo colpo fa cilecca e il cliente pensa che visto che Myspace è grande e di successo imitarlo sia una buona idea, fategli notare che è stato votato come peggior sito del 2006 su PC World.

9 Usa la banda: Questo non è più un problema oggigiorno, ma se è un sito con molto traffico ad avere la musica potrebbe correre il rischio di superare i limiti di traffico e costare di più.

via SeoMoz