:::: MENU ::::
Browsing posts in: Development

Regex: Espressioni regolari in PHP, parte 1

Qual è lo scopo di una macchina? Beh, teoricamente prendere “qualcosa” in ingresso, eseguire qualche tipo di lavoro e restituire il lavoro eseguito. L’esempio più semplice è il computer che prende in input dei dati, li elabora e restituisce un output come risultato. Tuttavia è una macchina anche un telefono: converte l’energia sonora in un segnale elettrico e lo ritrasforma in audio per rendere possibile la conversazione tra due punti. Un motore consuma carburante (vapore, fissione, benzina o olio di gomito) e lo trasforma in lavoro, energia, calore. E un frullatore mescola rum, ghiaccio, lime e curacao per produrre un buon cocktail estivo (se preferite qualcosa di più metropolitano, provate prosecco e succo di pesca e voilà un ottimo Bellini). In effetti, il frullatore è una macchina molto flessibile… Continue Reading

Responsive design vs Adaptive design: cosa scegliere?

Il Responsive Web Design (RWD) è ormai diventato lo standard per la creazione di siti web accessibili sia su pc desktop / notebook che su una vasta gamma di dispositivi mobili come smartphone e tablet. Ma siamo sicuri che il responsive design sia la risposta per coinvolgere a pieno gli utenti di dispositivi mobile? Ha un senso rendere un sito web responsive se poi la mobile user experience è la stessa di un utente desktop, se non addirittura peggiore dovuta ai tempi di latenza della connessione, la lentezza e dulcis in fundo proprio il dispositivo?

Probabilmente no, o forse, decisamente no.

Continue Reading


Ecco perché gli sviluppatori sono pure artisti

Ci sono diversi motivi per cui gli sviluppatori assomigliano a degli artisti. Queste percezioni si basano su osservazioni sul posto di lavoro e sull’esperienza personale. Paul Graham , fondatore di Y-Combinator, ha scritto un articolo di qualche anno fa chiamato hacker e pittori. Ha descritto come la gente sembri sorpresa del fatto che qualcuno interessato a computer fosse anche interessato all’arte. Si potrebbe pensare che l’hacking e la pittura sono molto diversi tra loro – da una parte la programmazione, fredda, precisa e metodica, e dall’altra parte la pittura, calda e creativa. In realtà niente di più sbagliato, poichè sviluppatori e pittori hanno parecchie caratteristiche in comune. Vediamo quali.

Continue Reading


Calcolare la distanza di due punti della terra: la formula dell’emisenoverso.

Tempo fa ho avuto la necessità di implementare delle funzioni per estrarre da un database tutti i comuni limitrofi ad un punto dato. L’utente inseriva il nome della città, venivano ricercate le corrispondenti coordinate geografiche utilizzando i servizi di Google Maps e poi, attraverso una query di ricerca, veniva interrogata la base dati restituendo i comuni limitrofi in un raggio di km prestabilito (in linea d’aria!). Continue Reading


Come funziona davvero l’ottimizzazione per i motori di ricerca (SEO)?

Nel mio articolo precedente, “Come funziona davvero Google Search?” abbiamo visto le basi su come Google esegue la scansione del web, indicizza i dati e presenta i risultati di ricerca utilizzando un sistema a punteggio chiamato PageRank per determinare quali collegamenti devono essere visualizzati per primi. Vi ho promesso, alla fine dell’articolo di parlare del SEO e dei metodi (leciti) per aumentare il pagerank.

Il termine SEO è sempre più spesso utilizzato in ambito informatico. Libri, seminari, siti web e professioni sono state creati per promuovere e discutere questo argomento. In questo articolo vorrei presentare le possibilità che Google mette a disposizione dei webmaster in ambito SEO. In sostanza, le raccomandazioni di Google sono basate sul controllo dei contenuti, procedure tecniche e controllo sulla qualità. Google inoltre fornisce alcune istruzioni su come aggiungere l’URL del sito e una sitemap per agevolare al meglio il processo di indicizzazione. Continue Reading


Come funziona davvero Google Search?

C’è poco da dire: Google non è un motore di ricerca; Google è il motore di ricerca. Vi capita spesso di usare Google? E non vi chiedete mai il motivo per cui alcuni risultati vengono visualizzati prima rispetto ad altri? Forse perchè alcuni link sono più attinenti che altri, oppure perchè vengono aggiornati spesso… Insomma, in parole povere, come fa Google a stabilire l’ordine di priorità dei risultati? Ma poi perchè mi faccio queste domande, quando posso cercare con Google le risposte? Continue Reading


Centrare un DIV in verticale e orizzontale

Spesso ci capita di dover centrare degli elementi contenuti all’interno di un <div> più grande e di dimensioni prefissate. Sappiamo che se utilizziamo l’attributo margin: 0 auto; l’oggetto viene centrato in orizzontale. Scrivere margin: 0 auto; equivale a dichiarare:

Tuttavia, questo metodo non centra l’oggetto contenuto nel <div> in verticale. In realtà, anche utilizzando margin-top: auto e margin-bottom: auto, non risolveremmo un bel niente. 

Per risolvere questo piccolo grande problema, ci viene in aiuto un trucchetto che permette di risolvere il problema. Vedremo come centrare l’oggetto in verticale e in orizzontale relativamente alla pagina, quindi al tag <body>. Per fare questo, occorre definire un #ID nel nostro foglio di stile come di seguito specificato:

e poi applicarlo al tag <div>

Con lo stesso meccanismo, possiamo centrare un <div> all’interno di un altro <div>, ma sarà necessario specificare delle dimensioni prefissate sia in altezza che in larghezza anche per il <div> più esterno.

e quindi, in html, scriveremo:

Semplice, no?


Progetto completo di una chat con Server-Sent Event e HTML5 + Jquery

Continuiamo la panoramica sulle API Server-Sent Event in HTML5. In questo caso scopriremo e analizzaremo passo dopo passo come creare una chat funzionante. La ragione di questo esempio è principalmente applicare i concetti visti negli articoli precedenti, per meglio comprendere la potente tecnologia che HTML5 ci offre.

Avremo bisogno al solito di un web server, va bene anche XAMPP o qualsiasi altro web server Apache+PHP+MySQL.

Il database

La prima cosa da fare è creare il database con la tabella che conterrà i messaggi che gli utenti invieranno alla chat e che saranno consegnati a tutti i client in ascolto. Il database ha una sola tabella, mediante la quale, oltre a fare da intermediario potrebbe anche rappresentare un’ottimo strumento per filtrare parole non gradite. Lo script SQL è il seguente, potete eseguirlo facilmente su PhpMyAdmin.

La chat

 Chiamiamo questo file chat.html, ed è il file che conterrà il codice HTML+CSS e gli script Javascript del client. L’interfaccia è molto semplice ed è composta principalmente da un contenitore DIV in cui vengono aggiunti man mano i sotto-contenitori DIV dei messaggi. Per completare, ho posizionato sotto la chat due caselle di testo per inserire il nome, il messaggio e il pulsante per inviare tutto al server e di conseguenza agli altri client connessi.

Stream chat

Chiamiamo questo file chatlist.php. Lo stream dei messaggi sarà formato da un file PHP, in particolare in ciclo infinito che effettua un’interrogazione al database MySQL per poi “addormentarsi” per un secondo. Le prime due righe di intestazione sono molto importanti per il meccanismo SSE di HTML5, in quanto per il corretto funzionamento della chat, è necessario impostare il Content-Type come “text/event-stream” e definire il Cache-Control uguale a “no-cache”. Non dimenticatelo.

Le operazioni sul database

Tutte le operazioni sul database preferisco scriverle in un file diverso dagli altri, per mettere un po’ di ordine. Lo chiamiamo dbfunctions.inc e contiene tra l’altro la gestione della connessione al database, oltre alla stampa a video del messaggio necessario al Server-Sent Event.

Il blocco più interessante è quello della funzione ListChat(). Questa funzione interroga il messaggio cercando tutti quei messaggi che sono stati spediti al server nel periodo compreso tra l’ultima interrogazione $MM_LastTime e l’ora corrente $MM_Time. In questo modo vengono pescati solo le ultime righe senza far perdere alcun messaggio. Quindi vengono estratti i campi, formattati in HTML e restituiti alla funzione sendMsg() che si occupa di comporre il messaggio per SSE.

File di supporto

Nell’ultimo file, chiamato chatsubmit.php, inserisco la procedura che viene attivata durante la chiamata di chatTimerHandler() nel file chat.html tramite Ajax con metodo GET. Lo script non fa altro che inserire nel database MySQL il nome e il messaggio digitato dall’utente in modo da poter essere “comunicato” a tutti quanti i client in ascolto.

 


Server-Sent Events in HTML5

Tradizionalmente in un’architettura client-server, come mostrato in figura, una pagina web residente nel client invia una richiesta al server per ricevere una risposta con dei dati. Con l’avvento dell’HTML5, e in particolare della libreria API Server-Sent Events, è possibile, per un server, inviare dei dati a una pagina web “in qualsiasi momento”, tramite dei messaggi push, senza che la pagina in questione ne faccia esplicita richiesta. I messaggi in arrivo possono essere trattati come eventi + dati all’interno della pagina web. 

client-server

Lo sviluppo di un’applicazione web che utilizza le API Server-Sent Events è abbastanza facile. Avrete bisogno di un po’ di codice sul server per lo effettuare lo streaming degli eventi al client; per quanto riguarda il lato client, la gestione di tale eventi è identica a qualsiasi altro tipo di evento.

Le API Server-Sent Events sono contenute nell’interfaccia EventSource. Per aprire una connessione al server e iniziare a ricevere gli eventi, bisogna creare un nuovo oggetto EventSource, specificando l’URI dello script sul server che genera lo stream di eventi. Per esempio:

Una volta istanziato l’oggetto, è possibile iniziare  ad intercettare i messaggi che verranno creati dallo script in sse_test.php:

Lo script sopra non fa altro che “ascoltare” eventuali messaggi in arrivo (cioè, dei messaggi standard dal server ) e aggiungere il testo del messaggio in un contenitore div che poi viene mostrato nella pagina.

È anche possibile ascoltare eventi personalizzati, utilizzando la funzione addEventListener():

Questo codice è simile al precedente, tranne per il fatto che verrà chiamato solo quando il server invierà un messaggio di tipo ping al client.

Il formato del messaggio

Il messaggio che viene inviato dal server al client è un semplice streaming di testo in formato JSON, codificati in UTF-8. Ogni messaggio è separato da una coppia di caratteri speciali \n\n. Una riga del emessaggio che inizia con : è, in sostanza, una riga di commento e viene ignorata. La riga di commento può essere usata per impedire il timeout della connessione: un server può inviare periodicamente un commento per mantenere aperta la connessione.

Ogni messaggio è costituito da una o più righe di testo scritte secondo la notazione nomecampo: valore + \n

Campi

I campi che possono essere utilizzati in un messaggio sono 4. Altri campi, al di fuori di questi, vengono sostanzialmente ignorati.

  • event – rappresenta il tipo di evento. Se nel messaggio viene specificato questo campo, l’evento inviato al browser potrà essere intercettato solo utilizzando addEventListener(). L’handler onMessage() invece intercetta qualsiasi messaggio privo del campo event.
  • data – rappresenta il campo dati per il messaggio, cioè il contenuto che dovrebbe essere visualizzato sul browser. Quando EventSource() riceve più linee che iniziano con “data:”, li concatena, e inserisce un ritorno a capo \n tra ciascuno di essi.
  • id – rappresenta l’ID del messaggio.
  • retry – rappresenta il tempo di riconnessione in millisecondi da utilizzare quando si tenta di inviare un messaggio. Se non viene specificato un valore intero, il campo viene ignorato.

Esempi

Messaggi “data only”

In questo esempio, si ipotizza l’invio di tre messaggi. Il primo messaggio è solo un commento, poiché comincia con i due punti. Come accennato in precedenza, può essere utile come keep-alive della connessione se lo streaming di dati non è costante e c’è il rischio di far cadere la connessione. Il secondo messaggio contiene il campo data con il valore “testo di esempio“. Il terzo messaggio contiene il campo data con il valore “un altro messaggio \n con due linee“.

Eventi specifici

In questo esempio abbiamo alcuni eventi specifici. Ciascun messaggio viene settato il campo event, con il nome della tipologia di evento, e il campo data il cui valore è specificato secondo la notazione JSON con i dati che poi il client “parserizzerà” a dovere.

Miscelazione e la congruenza

Ovviamente è possibile mescolare insieme in un unico flusso di dati sia messaggi generici (solo con il campo data) che messaggi personalizzati.

 Risorse utili

http://dev.w3.org/html5/eventsource/


La distanza di Levenshtein, a cosa serve? (2° parte)

Un’implementazione della distanza di Levenshtein può essere fatta in qualsiasi linguaggio. In questo esempio, verrà utilizzato interamente il linguaggio MYSQL.

Per prima cosa, bisogna creare una routine su MySql. Aiutatevi con phpmyadmin per fare ciò. Eseguite direttamente il codice definito in questo listato per creare e aggiungere la funzione levenshtein() al vostro database MySql.

Se volete potete anche aggiungere quest’altra funzione, che restituisce la percentuale di esattezza della parola data.

A questo punto l’unica cosa da fare è quella di creare una query per interrogare il database utilizzando in modo opportuno la funzione definita sopra.

Il risultato sarà questo:

levenshtein2

L’unico vero e grande problema è la lentezza dell’esecuzione dell’algoritmo. Per calcolare la distanza di levenshtein di “romme” su una base dati di 8,092 record, il tempo di esecuzione si aggira attorno ai 12 secondi, e peggiora in maniera esponenziale se la stringa da ricercare è più lunga (es. Castelbuono anzichè Roma). Purtroppo l’algoritmo contiene un doppio WHILE all’interno e questo potrebbe rappresentare un ostacolo, sopratutto in una tabella con migliaia di record.

Tuttavia possiamo cercare di ottimizzare la query MySql in fase di interrogazione in modo da cercare di dimezzare i tempi di ricerca. Una prima ottimizzazione è quella di selezionare solamente i termini più “vicini” a quello che stiamo cercando, confrontando la lunghezza degli stessi. Aggiungo quindi una condizione sulla lunghezza del campo CityName, che deve essere di un carattere più (+1) o meno (-1) lunga rispetto a ciò che sto cercando.

 levenshtein3

Abbiamo un netto miglioramento in termini di prestazioni in fase di esecuzione: 1,17 secondi contro 12 secondi del primo! 

Esistono ovviamente altre ottimizzazioni, infatti ne ho implementata una che mi permette di raggiungere un tempo di esecuzione pari a 0,5740 secondi, ma in questo caso bisogna integrare qualche riga di codice PHP. Vi lancio la sfida di cercarne una! Qui sotto invece trovate un altra ipotesi di ottimizzazione…

Spoiler Inside SelectShow

 


Pagine:1234

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close