Da questa mattina ho fatto richiesta di iscrizione di questo blog ne Il Bloggatore, sicuramente mi impegnerò a scrivere dei nuovi post più spesso.
Iscrivetevi ai miei feed per avere gli aggiornamenti di questo blog.
EDIT
da adesso questo blogè presente anche sull’elenco dei blog chepotete trovare qui.
Con l’introduzione della versione 3 delle API di Google map non è più necessario generare una chiave univoca per ogni sito dove dobbiamo inserire le nostre mappe e questo semplifica molto le cose quando procediamo alla pubblicazione di un sito dall’area di sviluppo in produzione perché non ci dobbiamo preoccupare di generare una nuova chiave.
Ma ora andiamo più nello specifico e vediamo come iniziare da markup della nostra pagina dove inseriamo un div con ID map.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it"> <head> <title>Contatti - Sport 62</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="Language" content="it"/> <meta name="Description" content=""/> <meta name="KeyWords" content=""/> <script type="text/javascript" src="/include/jquery.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=it"></script> <!-- DOCUMENT READY --> <script type="text/javascript"> $(document).ready(function(){ }); </script> <style> #contenitore{ width:900px; height:100%; margin:auto; background-color:#ccc; } #map { width:500px; height:400px; } </style> </head> <body> <div id="contenitore"> <div id="mappa"></div> </div> </body> </html>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById("map"), {
scaleControl: true});
map.setCenter(new google.maps.LatLng(45.66100, 12.24581));
map.setZoom(15);
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
var marker = new google.maps.Marker({map: map, position:
map.getCenter()});
var infowindow = new google.maps.InfoWindow();
infowindow.setContent("<p>Testo di prova del fumetto<br />Piazzale Duca d'aosta<br />Treviso (TV)<br />Ulteriore riga</p>");
infowindow.open(map, marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
</script>
In questa funzione per prima cosa andiamo ad inizializzare l’oggetto google.maps.Map nel nostro div, poi gli impostiamo il centro della mappa con le coordinate, in questo esempio è la stazione ferroviaria di Treviso ed impostiamo il livello di zoom a 15, l’ultima impostazione della mappa è la tipologia che corrisponde a Mappa quando utilizziamo le Google Maps.
Fatto questo creiamo un nuovo marker posizionandolo nel nostro centro della mappa ed è molto semplice perché nell’inizializzazione gli passiamo un oggetto con la mappa da utilizzare e la posizione.
Impostato il marker creiamo il fumetto attracerso l’oggetto InfoWindows() dove gli facciamo scrivere del testo di prova e lo associamo al marker creato prima.
L’ultima azione che facciamo è associare al click sul marker l’apertura del fumetto.
Ora è sufficiente richiamare la funzione initialize() all’apertura della pagina ed abbiamo la nostra mappa.
$(document).ready(function(){
initialize();
})
Per tutte le opzioni che si possono utilizzare vi rimando alla documentazione ufficiale di google Map.
L’esempio di questo post lo potete trovare qui.
Come sempre aspetto commenti / critiche / approvazioni
Ieri ho avuto il piacere di partecipare all’Adobe CS5 on the road a Padova, evento organizzato dalla Adobe Italia per presentare la nuova suite in uscita il 15 maggio di questo mese. Sono stati inizialmente presentati i vari prodotti, per poi entrare più nel dettaglio e dimostrare effettivamente le enormi novità introdotte in ogni singolo software. Di seguito riporto ciò che mi ha colpito maggiormente:
ILLUSTRATOR:
PHOTOSHOP
INDESIGN
DREAMWEAVER
FLASH CATALYST E FLASH BUILDER
Concludendo, se con la “vecchia” CS4 siete rimasti delusi, se siete ancora fermi alla CS3 e volete notevolmente accorciare i vostri tempi nella realizzazione di progetti, questa nuova verisone di Sdobe Creative Suite fa sicuramente al caso vostro.
Oggi vi spiego come poter creare una piccola richiesta di password smarrita utilizzando Jquery e una chiamata ajax.
ipotizziamo di avere una tabella degli utenti così strutturata che memorizza le password in chiaro (solo a scopo didattico e per questo articolo).
CREATE TABLE user(
id bigint AUTO_INCREMENT,
username varchar(50) NOT NULL,
password varchar(30) NOT NULL,
nome varchar(80) NOT NULL,
cognome varchar(80) NOT NULL,
ins_date datetime,
upd_date datetime,
lastlogin datetime,
status tinyint(1) DEFAULT 1
PRIMARY KEY (`id`),
KEY `username` (`username`,`password`)
) ENGINE=MyISAM
Da oggi questo blog è possibile vederlo anche con il cellulare o qualunque dispositivo mobile, per farlo è sufficiente digitare http://m.lucaeandrea.com ed è presente la versione mobile di questo blog.
