Informaticando.NET un intorno web sull'informatica di Giorgio Borelli

Il Geocoding è un tecnica che consente di convertire l'indirizzo di una via, una piazza o più semplicemente del centro città, nelle corrispondenti coordinate geografiche di latitudine e longitudine. Per mettere appunto il geocoding anche questa volta le API di Google Maps ci vengono in aiuto fornendoci la classe geocoder che con facilità ci permette d'implementare questa funzionalità.

L'implementazione del Geocoding in Javascript non è difficile sfruttando le google geocoding API, andiamo a vedere come fare.

Prosegue...

Il mondo delle Google Maps è veramente ampio e completo, tantissime sono le funzioni e le opzioni possibili offerte da questo servizio, giunto alla versione 3, una delle ulteriori possibilità offerte dalle mappe di google agli sviluppatori, è quella di poter rendere trascinabile (draggable) il segnaposto (marker) e di aggiungere a questa azione eventi all'interno della mappa che ci consentono in tal modo di ampliarne il comportamento. Attivare il trascinamento del marker in google maps è davvero semplice, basta agire su una proprietà dell'oggetto marker, andiamo a scoprire come fare.

Prosegue...

Gestire l'aggiunta di più segnaposto (marker) nella stessa Google Maps non è cosa difficile, le API V3 delle mappe di google mettono a disposizione una serie di oggetti veramente completi ed efficaci, per aggiungere pertanto più marker sulla mappa basterà sfruttare funzioni ed eventi delle API, mentre per la loro gestione, (ad es. cambio icona, titolo, posizione, etc. etc.), necessita di un piccolo workaround da parte nostra che prevede l'uso, ahimè!, di un array globale in Javascript contenitore dei nostri marker, la soluzione risulta comunque efficace, andiamo a scoprire come fare.

Prosegue...

Continuiamo a parlare di Google Maps, un'altra esigenza molto sentita dagli sviluappatori nella implementazione della mappa, è quella di gestire l'evento onmouseover quando si passa sopra ad un segnaposto (marker) presente  sulla mappa. L'effetto del cambio di colore o dell'icona del marker quando il mouse vi passa di sopra, amplifica e migliora la visibilità e la user experience nella navigazione della mappa di google.

Implementare tale funzionalità non è difficile, basta conoscere il funzionamento degli eventi nelle mappe di google ed un pò di Javascript, andiamo a scoprire come fare.

Prosegue...

Le mappe di Google, giunte alla versione 3, sono un servizio indispensabile in diverse web application, sempre più spesso le vediamo integrate in portali e siti web dei più svariati settori,  offrendo così all'utente un utilissimo strumento e servizio di localizzazione. Pertanto renderle efficienti e funzionali migliora notevolmente la navigation experience dell'utente. A tal proposito bisogna dire che Google Map associa la funzione di zoom allo scrolling del mouse, quando quest'ultimo è posizionato sulla mappa. Tale funzionalità, non sempre risulta comoda, spesso si scrolla la pagina e ci si trova invischiati con lo zoom non appena il mouse entra all'interno dell'area della mappa. Fortunatamente è possibile disabilitare (o abilitare) detta funzionalità molto facilmente, basta settare un parametro tra le opzioni di creazione della mappa, andiamo a vedere come fare.

Prosegue...

Se state usando JQuery, la famosa libreria o meglio framework di funzioni javascript per sviluppare il vostro sito web, è possibile che all'atto della visualizzazione in Internet Explorer 9, venga visualizzato il seguente messaggio d'errore "DOM Exception: INVALID_CHARACTER_ERR (5)", questa eccezzione generata dal DOM del browser si verifica solo sulla versione 9 del browser di casa microsoft, probabilmente perchè questo fà un uso molto restrittivo dei nomi (stringhe) passati alle funzioni ed ai costruttori, e si arrabbia subito se l'uso di qualche carattere o virgolette non viene rispettato alla perfezione, in particolare in Internet Explorer 9 per la funzione del DOM Document.createElement(tagName), non è consentito l'uso di tag HTML nel parametro tagName, e questo porta subito ad una eccezione.

Fortunatamente risolvere questo bug è davvero immediato basta scaricare la versione più aggiornata del plugin bgiframe del framework JQuery.

Prosegue...

Javascript è un linguaggio di scripting lato client che ha permesso di fare un grosso passo in avanti nell'evoluzione delle pagine web, consentendo di passare dai semplici e spartani siti statici in puro html, a siti web dinamici ed interattivi, migliorando così l'esperienza di navigazione dell'utente rendendola anche più user friendly.

Ciò nonostante, essendo per l'appunto un linguaggio lato client, ovvero viene eseguito dal browser (il client) dell'utente, non è in grado d'interagire con il server e con i linguaggi lato server quali ad esempio ASP.NET, a meno di non usare dei trucchi che consentono di "superare" la natura stateless del web, quali ad esempio i cookies. Ci sono casi in cui per uno sviluppatore web risulterebbe davvero comodo, al verificarsi di un evento client side, quale potrebbe essere un comunissimo evento onclick su un link (tag a), poter passare allo scatenarsi di detto evento un valore dal client al server e trattarlo con un linguaggio server side, senza usare i macchinosi e più lenti cookies o altre tecniche simili.

Javascript ci viene in aiuto anche in questo caso, mette infatti a disposizione una funzione in grado di scatenare un PostBack della pagina web al verificarsi dell'evento onclick o di un qualsiasi altro evento client side con Javascript. Questa funzione prende il nome di __doPostBack, andiamo a scoprire nel dettaglio come funziona e quanto può risultare utile se usata correttamente.

Prosegue...

Il tag <div>, in html rappresenta un blocco per ragruppare e separare i contenuti di una pagina html. Secondo il block model, a differenza del tag <span> esso non è un elemento block inline, ossia qualsiasi altro elemento che vi sta affianco viene automaticamente riportato a capo, poichè esso occupa tutta la linea del documento (a meno di non specificare diversamente). Il tag div, viene usato in maniera massiccia nella realizzazione delle pagine html, sia come raccoglitore di contenuti che come blocco per il layout web, sopratutto in quei layout table less (che non fanno uso di tabelle) così consigliati dai più recenti standard web. L'elemento div può contenere qualsiasi altro elemento e testo, e nei siti dinamici assume un ruolo fondamentale, poichè in larghezza è un elemento block, come detto manda a capo gli altri elementi a seguire fuori dal div, in altezza invece ha la proprietà di adattarsi al contenuto che esso contiene, il chè lo rende utilissimo a questo scopo, ovvero nell'uso dei layout per siti con contenuti dinamici.

Allo stesso modo, possono nascere esigenze che il div abbia un'altezza fissa, impostata magari tramite una regola di stile, proprio per adattarsi bene al layout della pagina web e/o per una migliore resa grafica, come fare allora se il contenuto del div cambia dinamicamente o la sua altezza deve variare a seconda della pagina che navighiamo?

Siamo "costretti" a cambiare "al volo" l'altezza del div. Possiamo impostare l'altezza del div in due modi, o con i fogli di stile (css), o tramite Javascript; in questo articolo andiamo a scoprire come fare usando Javascript.

Prosegue...