Luca e Andrea http://www.lucaeandrea.com Il blog di Luca e Andrea Wed, 21 Jul 2010 21:44:32 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Inseriamo una mappa con le API 3 http://www.lucaeandrea.com/inseriamo-una-mappa-con-le-api-3/?utm_source=rss&utm_medium=rss&utm_campaign=inseriamo-una-mappa-con-le-api-3 http://www.lucaeandrea.com/inseriamo-una-mappa-con-le-api-3/#comments Wed, 21 Jul 2010 21:33:38 +0000 Luca http://www.lucaeandrea.com/?p=143 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>
Nel nostro documento abbiamo definito un di contenitore largo 900px e il div map che conterrà la nostra mappa di google. Nell’head del documento c’è la chiamata alle api di google dove gli passiamo come parametro sensor=true e la localizzazione della lingua tramite il parametro language=it così la nostra mappa “parlerà italiano”.
Ora andiamo a scrivere la nostra funzione che ci permetterà di visualizzare la mappa.
<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

Post correlati

]]> http://www.lucaeandrea.com/inseriamo-una-mappa-con-le-api-3/feed/ 0 Adobe CS5 on the road http://www.lucaeandrea.com/adobe-cs5-on-the-road/?utm_source=rss&utm_medium=rss&utm_campaign=adobe-cs5-on-the-road http://www.lucaeandrea.com/adobe-cs5-on-the-road/#comments Thu, 06 May 2010 13:43:47 +0000 AndreaDesign http://www.lucaeandrea.com/?p=137 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:

  • Introdotta la griglia prospettica, con diversi punti di fuoco, anche personalizzabili. Questo permette di lavorare in 3D, che già di per sé è una splendida novità
  • Tratti di spessore variabile: possibilità di variare lo spessore di un tratto e volendo definirlo come tratto per un pennello
  • Pennello vettoriale: questa funzionalità rende sempre più semplice  colorare come se fossimo in photoshop, rendendo ogni tratto un vettoriale
  • Per i nostalgici di FreeHand è stata introdotta la funzione “incolla dentro”, che meprmette di delimitare un’area in cui lavorare e posizionare più velocemente gli elementi secondo la profondità dei livelli
  • Possibilità di creare più pagine all’interno di un solo file

PHOTOSHOP

  • In photoshop le novità più rilevandi riguardano il ritaglio delle immagini molto più rapido ed indolore, grazie ad un sistema automatico che definische un fondo omogeneo nell’area che viene ritagliata
  • Si può inoltre estendere una ricerca intorno ai bordi di una selezione per includere parti di immagini che fanno parte della porzione di immagine che vogliamo selezionare. (esempio i capelli di una persona)
  • Viene usato un nuovo motore di render per le immagini in formato RAW che aumenta in modo considerevole la qualità e la profonidta del colore
  • Correzzione automatica delle foto che presentano lo spaicevole effetto “lente”
  • Strumento marionetta: da la possibilità di selezionare una parte di immagine e di “distorgerla” seguendo un percorso specificato con dei punti. Questo è possibile perche l’immagine viene divisa in un reticolo, e i pixel che vengono interessati dal movimento subiscono una modifica che rende la trasofrmazione omogenea
  • Possibilità di definire l’orizzonte di una foto con lo strumento pennello
  • Funzione 3d

INDESIGN

  • L’innovazione più interessante non riguarda tanto la grafica cartacea, punto di forza per questo software, ma tanto la possibilità di rendere interattivo un progetto cartaceo, dando aniazioni ai vari elementi, inserendo gallery, video, suoni. In questo modo si possono creare facilemente applicazioni per web, avendo già pronta una grafica su cui basarsi
  • E’ sicuramente il prodotto che ha avuto più innovazionioni

DREAMWEAVER

  • Possibilità di vedere come si comporta il nostro progetto nei differenti browser grazie al “Live Preview”
  • Finalmente sono stati inseriti i suggerimenti e i completamenti automatici per i linguaggi di programmazioni come php e per i vari cms

FLASH CATALYST E FLASH BUILDER

  • Due importanti programmi che facilitano notevolmente la creazione di applicazioni in flash a chi non conosce nulla di actionscript, fornendo una vasta quantità di oggetti già definiti e facilemente personalizzabili, anche in questo caso partendo dal nostro progetto vettoriale (come per indesign)
  • Flash Builder, pensato più per il programmatore poi permette di modificare il codice che Flash Catalyst genera e quindi rendere dinamico il nostro lavoro
  • Tutto questo per permettere da un lato al creativo di vedere la sua grafica intatta fino alla fine, senza che venga violentemente deturpata dal programmatore, e dall’altro lato di togliere lavoro al programmatore che si trova già una base di partenza su cui lavorare

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.

Post correlati

]]> http://www.lucaeandrea.com/adobe-cs5-on-the-road/feed/ 1 Recuperare la password con ajax http://www.lucaeandrea.com/recuperare-la-password-con-ajax/?utm_source=rss&utm_medium=rss&utm_campaign=recuperare-la-password-con-ajax http://www.lucaeandrea.com/recuperare-la-password-con-ajax/#comments Wed, 05 May 2010 22:00:07 +0000 Luca http://www.lucaeandrea.com/?p=105 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

Ora Creaiamo la nostra pagina base come mostrato qui sotto

</p>
<pre><!DOCTYPE  HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html;  charset=iso-8859-1">
    <script  type="text/javascript">
        // qui scriveremo la nostra funzione per il recupero
    </script>
</head>
<body>

</body>
</html>

Ora inziamo ad inserire Jquery nell’head della pagina

<script type="text/javascript" src="jquery.js"></script>

Fatto questo possiamo iniziare a creare la base della form per il recupero della password fornendo l’indirizzo email dell’utente registrato.

</p>
<p>Se hai perso la password digita nella casella di testo la tua email e clicca su "RECUPERA PASSWORD", ti verr&agrave; inviata la password.</p>
<form action="/recupero_password.php" method="post" id="form">
    email <input type="text" name="email" id="email" /><br />
    <input type="hidden" name="lang" id="lang" value="1" /><br />
    <input type="button" value="Recupera Password" onclick="recupera()" /><br />
    <span class="colore_rosso" id="errore"></span><br />
</form>
<p>

L’html, come possiamo vedere è molto semplice abbiamo un input text dove inseriremo la nostra email, il button che  richiamerà la funzione recupera() per fare la chiamata ajax, infine c’è uno span per mostrare gli errori. All’interno dell’head del nostro documento dove ho messo il commento //qui andremo ad inserire la nostra funzione scriviamo la funzione riportata qui sotto.

La funzione è molto banale ma molto efficace perché è il cuore della chiamata ajax all’inizio fa un primo controllo sulla presenza di qualche valore nell’input dove inseriamo l’email e poi possa in POST l’email alla nostra pagina PHP recupera_password.php, l’ultimo parametro passato a $.post() è il dataType che nel nostro caso JSON in modo da poter utilizzare un array come risposta e non una solo valore.

function recupera(){
    var email = $('#email').val();
    if(email != ''){
        $('#errore').html('');
        $.post(
        '/recupera_password.php',
        'email='+email,
        function(m){
            $('#errore').html(m.messaggio);
            $('#email').val('');
        },
        'json'
        );
     } else
        $('#errore').html("<strong>Non &egrave; stata inserita l'email</strong>");
}

<?php // file recupera_password.php
session_start();
require_once('inc/DATABASE.php');
require_once("inc/phpmailer/class.phpmailer.php");
require_once("inc/phpmailer/phpmailer.lang-it.php");
$db = new DATABASE();
$mail = new PHPmailer();

$errore = false;
if(trim($_POST["email"]) == ""){
    $errore = true;
    $str_errore .= "Non &egrave; stata inserita l'email";
}

if(!$errore){
    $sql = "SELECT id, username, password, CONCAT(nome, ' ', cognome) AS nome, email
            FROM user
            WHERE status = 1
            AND email = '". $_POST["email"] . "'";
    $data = $db->getOneItem($sql);
    if(is_array($data)){
        $mail->SetFrom("email@email.it","Mittente");
        $nome = $data["nome"] . " " . $data["cognome"];
        $mail->AddAddress($data["email"], $nome );
        $mail->Subject = "Recupero password";
        $messaggio = str_replace(
            array("[NOME]","[USERNAME]","[PASSWORD]"),
            array($data["nome"],$data["username"],$data["password"]),
            $L_testo_mail_rec
        );

        $mail->msgHtml($messaggio);
        $mail->AltBody = strip_tags($messaggio);
        $mail->Sender = "email@email.it";
        $mail->WordWrap = 78;
        if(!$mail->Send()) {
            $str_errore = "Non &egrave; stato possibile recuperare la password ed inviare una mail, riporivare pi&ugrave; tardi";
        } else{
            $str_errore = "Password recuperata correttamente. A breve riceverai un email";
        }
    } else     //non eisite l'username
        $str_errore = "Utente inesistente";
}

print json_encode(
    array(
        "errore"    => $errore,
        "messaggio"    => $str_errore
     )
);
?>

Il file php include un file con la configurazione del db e una classe per poter fare le query al database e la classe phpMailer per inviare la mail con la password alla persona che ne ha fatto richiesta.

Il php, che riceve in post l’email controlla l’esistenza del campo altrimenti restituisce un errore e successivamente fa una query sulla tabella user per cercare le credenziali dell’utente associato a quell’email, una volta trovato il record invia una mail.

Alcune considerazioni sul mio articolo

  • Sicuramente non è la miglior cosa utilizzare le passowrd in chiaro perché se siamo vittima di un attacco hacker avremmo perso tutti gli accessi al sito web.
  • La password andrebbe resettata, una volta che viene trovato il record nel DB, creandone una casuale di n caratteri ricordando all’utente di cambiarla il prima possibile perché è stta generata automaticamente dal sistema.
  • Andrebbe aggiornata la data di modifica del record relativo all’utente e incrementato il numero di richieste di password e il nostro sito web prevede un massimo di tentativi di accesso al sistema allora dovremmo azzerare quel contatore

Per oggi è tutto vi aspetto alla prossima

Post correlati

]]> http://www.lucaeandrea.com/recuperare-la-password-con-ajax/feed/ 2 Luca e andrea è anche mobile http://www.lucaeandrea.com/luca-e-andrea-e-anche-mobile/?utm_source=rss&utm_medium=rss&utm_campaign=luca-e-andrea-e-anche-mobile http://www.lucaeandrea.com/luca-e-andrea-e-anche-mobile/#comments Wed, 05 May 2010 19:23:14 +0000 Luca http://m.lucaeandrea.com/luca-e-andrea-e-anche-mobile/ 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.

Post correlati

]]> http://www.lucaeandrea.com/luca-e-andrea-e-anche-mobile/feed/ 0 You inspiration web compie un anno http://www.lucaeandrea.com/you-insipation-web-compie-un-anno/?utm_source=rss&utm_medium=rss&utm_campaign=you-insipation-web-compie-un-anno http://www.lucaeandrea.com/you-insipation-web-compie-un-anno/#comments Fri, 30 Apr 2010 08:27:29 +0000 Luca http://www.lucaeandrea.com/?p=98 Volevo segnalarvi un blog molto interessante ed in italiano che seguo da qualche giorno e che oggi compie un anno.

Da quando lo seguo ho scoperto molto cose interessnti e nuovo che non conoscevo come ad esempio compe creare un template per joomla, o una bella guida su come scrivere un plug ing di jquery.

Consiglio a tutti  di iscriversi ai feed rss del blog perché troverete sempre qualcosa da imparare.

Link al sito http://www.yourinspirationweb.com/

aggiornamento 2 maggio Come mi hanno fatto notare ho corretto il titolo

Post correlati

]]> http://www.lucaeandrea.com/you-insipation-web-compie-un-anno/feed/ 4 posta elettronica certificata http://www.lucaeandrea.com/posta-elettronica-certificata/?utm_source=rss&utm_medium=rss&utm_campaign=posta-elettronica-certificata http://www.lucaeandrea.com/posta-elettronica-certificata/#comments Mon, 26 Apr 2010 13:22:00 +0000 Luca http://www.lucaeandrea.com/?p=90 Tornato dalla pausa pranzo ho trovato un interessante articolo sul sito di repubblica che parlava della posta elettronica certificata (PEC) che potrà essere aperta per ogni cittadino e spinto dalla curiosità ho detto, perdiamo questi 5 minuti per iniziare la registrazione.

Primo problema il sito http://www.postacertificata.gov.it non si apre e firefox mi dice impossibile contattare il server e dopo una serie di ctrl + F5 riesco ad aprire l’homepage del sito.

Inizio a compilare tutti i campi necessari alla registrazione dati anagrafici, residenza mail personale password per accedere al servizio ecc, ecc. Alla fine appare una bella schermata di errore 504 di gateway error, non dandomi per vinto faccio crtl + f5 per due volte ma nulla solito errore.

Errore registrazione PEC

Errore registrazione PEC

Dopo questo secondo problema riapro l’homepage del sito e riprovo la registrazione e dopo aver inserito nome, cognome, sesso, codice fiscale e cliccato avanti mi compare un bel messaggio di errore che potete vedere qui di fianco.

L’utente associato a questo codice fiscale è già attivo sul sistema. Verifica di aver inserito correttamente i dati, altrimenti contatta il call-center al numero verde gratuito 800.104.464 (da rete fissa) o al numero (199.135.191) da rete mobile.

Se riesco ad avere un attimo di tempo proverò a chiamare il numero che mi indicano qui sopra e capire dove sta il problema.

Aggiornamento 30 aprile 11:55
Ho appena ternminato tutte le fasi burocratiche per l’attivazione della PEC ora in teoria in 24 ore dovrei avere la mia casella attiva e potrò inviare le email.

Aggiornamento 27 aprile 9:20
Adesso ho chiamato il numero verde e dopo un’attesa breve in rapporto a tutti i messaggi che dice il disco mentre si aspetta ho parlato con un operatore, che mi ha detto che la mia richiesta è in fase di prattivazione e che da domani posso andare in qualsiasi ufficio postale abilitato con il mio codice cliente e terminare la registrazione che verrà perfezionata nelle successive 24 ore.
Nell’attesa ho scoperto le caratteritiche del servizio:

  • Spazio disponibile 250 Mb
  • Numero di invii giornalieri 10
  • Massima dimensione allegato 10 Mb
  • Numero di destinatari per email 50

Post correlati

  • Non ci sono post correlati.
]]> http://www.lucaeandrea.com/posta-elettronica-certificata/feed/ 4 incoerenze di trenitalia http://www.lucaeandrea.com/incoerenze-di-trenitalia/?utm_source=rss&utm_medium=rss&utm_campaign=incoerenze-di-trenitalia http://www.lucaeandrea.com/incoerenze-di-trenitalia/#comments Mon, 26 Apr 2010 09:10:11 +0000 Luca http://www.lucaeandrea.com/?p=84 riscrivo un post dopo un po di tempo.

Premessa
La regione Veneto ha multato Trenitalia per gli eccessivi ritardi nei treni dei pendolari e ha deciso di tramutare la multa in uno sconto per le persone che, come me tutte le mattine, prendono il treno per andare al lavoro o all’università.

Questa mattina sono andato alla biglietteria della stazione di Treviso Centrale per richiedere l’abbonamento ridotto per i prossimi mesi, essendo un mio diritto.
Dopo che ho consegnato l’apposito modulo e l’abbonamento di aprile,  l’operatrice mi ha detto che io non avevo diritto all’abbonamento ridotto perché avevo acquistato l’abbonamento on-line e non alla biglietteria e l’unica cosa che potevo fare è richiedere un bonus, pari allo stesso importo dello sconto, che mi verrà recapitato a casa, dopo questa risposta ho avuto un piccolo scambio di opinioni con l’operatrice perché questa è una grande discriminazione per chi compra l’abbonamento on-line e chi lo compra alla biglietteria.
L’operatrice ha replicato dicendo che lei applica i regolamenti e non ci può fare nulla e l’unico modo che ho per protestare è inviare un modulo di reclamo che ho immediatamente compilato.

Dopo questa situazione mi domando come un’azienda che promuove l’acquisto dei biglietti (se acquisti i biglietti on line hai diritto ad uno sconto del 5%) e abbonamenti (sulle fiancate dei treni c’è un motto che invoglia le persone all’acquisto ) on line possa applicare delle regole differenti per chi ha comprato un abbonamento allo sportello e chi come me compra il proprio abbonamento on line. Le regole di Trenitalia portano ad un disservizio per chi è stato illuso da una falsa informazione.

Ora ho copmpilato il modulo di reclamo e la richiesta di bonus. vediamo quanto tempo ci mette Trenitalia a mandarmi il bonus a casa. Vi terrò aggiorati

Post correlati

  • Non ci sono post correlati.
]]> http://www.lucaeandrea.com/incoerenze-di-trenitalia/feed/ 0 possibili disagi http://www.lucaeandrea.com/possibili-disagi/?utm_source=rss&utm_medium=rss&utm_campaign=possibili-disagi http://www.lucaeandrea.com/possibili-disagi/#comments Thu, 04 Mar 2010 16:06:18 +0000 Luca http://www.lucaeandrea.com/?p=80 Volevo dirvi che da adesso per qualche giorno ci potrebbero essere dei problemi di visibilità del blog per un aggiornamento del server.

Vi ringrazio della pazienza

Post correlati

  • Non ci sono post correlati.
]]> http://www.lucaeandrea.com/possibili-disagi/feed/ 0 jquery 1.4.1 http://www.lucaeandrea.com/jquery-1-4-1/?utm_source=rss&utm_medium=rss&utm_campaign=jquery-1-4-1 http://www.lucaeandrea.com/jquery-1-4-1/#comments Tue, 26 Jan 2010 09:35:03 +0000 Luca http://www.lucaeandrea.com/?p=74 Neanche ci siamo abituati alla nuova versione di jquery che oggi già rilasciano al prima minor release. De seguito riporto le principali novità (prese sempre dal nuovo sito di jquery per la nuova versione)

New Features

A full list of the API changes can be found in the 1.4.1 category on the jQuery API site.

Riporto anche le categorie del codice dove ci sono dei bug fix di questa release

Bug Fixes

Core
Events

Traversing

Effects
Ajax
Offset
Manipulation
Come i link per scaricare la nuova potete andare qui oppure qui per la versione minified
Nella seconda pagina ci sono tutti i bug fix della verisione
Via [jquery14]

Post correlati

]]> http://www.lucaeandrea.com/jquery-1-4-1/feed/ 0 firebug in internet explorer http://www.lucaeandrea.com/firebug-in-internet-explorer/?utm_source=rss&utm_medium=rss&utm_campaign=firebug-in-internet-explorer http://www.lucaeandrea.com/firebug-in-internet-explorer/#comments Fri, 22 Jan 2010 10:57:13 +0000 Luca http://www.lucaeandrea.com/?p=69 cercando un aggiornamento di firebug ho trovato questa pagina:

http://getfirebug.com/lite.html

che spiega come integrare firebug lite in IE e potrebbe essere interessante per avere un po’ più di debug in IE che è uno dei sponosi problemi di quel browser (almeno dal mio punto di vista).

per inserire firebug lite è sufficiente aggiungere questa riga di codice nell’head della vostra pagina web.

<script type='text/javascript'
src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

Ho potuto fare delle prove veloci e mi sembra molto utile.

Post correlati

]]> http://www.lucaeandrea.com/firebug-in-internet-explorer/feed/ 3