:::: MENU ::::

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?


Google Glass in ambito medico?

I Google Glass saranno probabilmente disponibili all’inizio del 2014, e mentre Google ha incentrato la campagna di comunicazione sull’uso “social” degli occhiali, c’è chi pensa come questa nuova tecnologia possa avere applicazioni di vasta portata in ambito sanitario sia personale che professionale.

google-glass-works

Centri di ricerca e medici di tutto il mondo hanno mostrato un interesse a sperimentare ed esplorare le potenzialità di Google Glass in ambito medico.

Con un concorso pubblico, Google ha selezionato 8.000 “vincitori” per acquistare i Google Glass a 1.500 dollari. Questi vincitori sono diventati il gruppo di utenti beta che ha sperimentato gli occhiali in vari ambiti, aiutando Google a risolve i bug prima del definitivo lancio sul mercato. Tra questi beta-tester il centro medico Radboud University in Olanda è stato il primo sistema sanitario a testare i Google Glass in Europa. L’ospedale, che rappresenta un importante centro di innovazione, ha voluto esplorare i vantaggi di questa nuova tecnologia, diventando così parte integrante della campagna di marketing di Google.

Ma esattamente come potrebbero essere applicati in ambito medico i Google Glass? Gli specialisti pensano che le possibilità siano infinite. Medici e operatori sanitari possono accedere alle informazioni in tempo reale, indossando gli occhiali di Google. Oppure potrebbero comunicare con colleghi a distanza, attraverso la webcam integrata negli occhiali, ottenendo un feedback immediato per migliorare l’efficienza e la qualità delle cure prestate al paziente. Ma il vero potenziale si potrebbe avere in sala operatoria. I chirurghi potrebbero vedere i risultati della TAC del paziente in tempo reale e ottenere un feedback sui loro progressi per migliorare i risultati.

Harry Van Goor è chirurgo e docente in chirurgia presso la Radboud University. Ha testato i Google Glass durante un’operazione addominale. Ha filmato l’intervento per tre ore con i Google Glass e ciò ha permesso agli studenti di seguire l’intervento dal punto di vista del medico chirurgo. Anche se il filmato era un po’ traballante, i primi risultati sono promettenti.

Oltre ad essere uno strumento didattico, Van Goor ha utilizzato gli occhiali come strumento di documentazione e registrazione delle procedure adottate nell’intervento chirurgico. “Di solito è possibile prendere appunti registrando la voce con un microfono, ma attraverso i Google Glass è possibile registrare il video oltre che l’audio, ottenendo una documentazione molto più precisa e affidabile”, spiega Van Goor.

Molti sostengono che operando con un menu pop-up davanti all’occhio possa essere fastidioso per il chirurgo. Secondo Van Goor invece ciò non rappresenta un problema: “il piccolo schermo in alto a destra dei Google Glass è sopra il mio occhio. Quando faccio l’intervento devo guardare in basso e non ho problemi di visuale o altri distrattori, quindi posso concentrarmi totalmente sul mio lavoro”, ha aggiunto.

Un altra critica che spesso viene avanzata è se la tecnologia dei Google Glass riesce a fornire una protezione adeguata della privacy dei pazienti. Effettuare registrazioni su di essi potrebbe rappresentare una evidente violazione della privacy. Se gli ospedali vogliono massimizzare l’utilità di Google Glass, è necessario avere l’accesso ad informazioni specifiche del paziente. Tutto ciò potrebbe essere un chiaro ostacolo in ambito sanitario se non si utilizzano adeguati sistemi di protezione e autorizzazione all’accesso delle informazioni.

Quindi, anche se le applicazioni in ambito healtcare potrebbero sembrare infinite, Google Glass è ancora poco più di un prototipo, il che rende difficile prevedere il suo futuro nel mondo della sanità.


Qualche consiglio per migliorare un corso e-Learning

Creare un corso distribuito su piattaforma e-Learning richiede molta più pianificazione e dettagli di quanto si pensi. Un corso ben fatto e ben organizzato avrà un impatto positivo sulla formazione delle persone, soprattutto in un ambito aziendale. Dal momento che l’e-learning si è imposto come strumento per veicolare una buona formazione, vediamo quali potrebbero essere 5 punti da tenere a mente durante la progettazione del corso per evitare che il corso si riveli un disastro. Continue Reading


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

 


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

In teoria dell’informazione e informatica , la distanza di Levenshtein è un’unità di misura per calcolare la differenza tra due stringhe. In altre parole, la distanza di Levenshtein tra due parole A e B è il numero minimo di modifiche di un carattere singolo (inserimento, cancellazione, sostituzione) necessario per modificare la parola A nella parola B. Con edit distance ci si riferisce spesso alla distanza di Levenshtein. La funzione prende il nome dal suo creatore Vladimir Levenshtein, scienziato russo specializzato in teoria dell’informazione, che la scoprì nel 1965.

Esempio

Calcolare la distanza di Levenshtein tra “kitten” e “sitting”. Ovviamente la risposta è 3, poiché sono necessarie tre modifiche per trasformare una parola nell’altra e non c’è altro modo per farlo con meno di tre modifiche:

  1. kitten → sitten (sostituzione di “k” con”s”)
  2. Sitten → Sittin (sostituzione di “e” con “i”)
  3. Sittin → sitting (inserimento di “g” alla fine).

Alcune precisazioni

La distanza di Levenshtein ha alcuni limiti superiori e inferiori. Questi includono:

  • La lunghezza è sempre almeno la differenza della lunghezza delle due stringhe.
  • La lunghezza può essere al massimo uguale alla lunghezza della stringa più lunga.
  • È zero se, e solo se, le stringhe sono uguali.
  • Se le stringhe sono le stesse dimensioni, la distanza di Hamming è un limite superiore alla distanza Levenshtein.
  • La distanza di Levenshtein tra due stringhe non può essere maggiore della somma delle loro distanze di levenshtein da una terza stringa (disuguaglianza triangolare).

Un classico utilizzo

Avete presente quando sbagliate a digitare una parola da cercare con Google? Il motore di ricerca vi consiglia una correzione della parola errata. Guardate l’esempio qui sotto, vi siete mai chiesti come fa Google a correggere le parole errate? La risposta è semplice: Levenshtein!

levenstein

La funzione levenhstein() in PHP

In php è presente da tempo una funzione chiamata appunto levenhstein(), e viene definita di seguito:

dove:

  • str1: prima stringa in ingresso da confrontare
  • str2: seconda stringa in ingresso da confrontare
  • cost_ins: definisce il “costo” dell’operazione di inserimento di un carattere
  • cost_rep: definisce il “costo” dell’operazione di sostituzione di un carattere
  • cost_del: definisce il “costo” dell’operazione di cancellazione di un carattere

continua…


mysql_connect() o mysql_pconnect(): quale usare?

Quando tentate di connettervi ad un database MySQL utilizzando PHP, solitamente avete a disposizione due funzioni per effettuare il collegamento. Esse sono:

  1. mysql_connect()
  2. mysql_pconnect()

Vediamo la differenza tra le due funzioni, qui di seguito.

funzione mysql_connect()

Questa funzione crea una nuova connessione al database una volta che lo script inizia l’esecuzione e chiude la connessione al database una volta esecuzione dello script termina. Questo significa che PHP effettuerà una connessione al database MySQL ogni volta che il nostro script viene eseguito.

funzione mysql_pconnect()

Quando si effettua un tentativo di connessione al database utilizzando mysql_pconnect(), questa funzione cercherà un collegamento esistente al database utilizzando al solito username e password. Se viene trovata una connessione esistente, la funzione restituisce l’ID della risorsa, altrimenti aprirà una nuova connessione e restituirà l’ID della nuova risorsa.

Dopo un’ora di connessione verrà restituito solo l’ID della risorsa (se esistente) e non cercherà, a differenza di mysql_connect() di aprire una nuova connessione ogni volta che lo script viene richiamato. Ovviamente la connessione non verrà chiusa una volta terminato lo script. Per questo motivo la connessione è persistente.

Tuttavia mysql_pconnect() richiede una certa ottimizzazione del server e potrebbe essere necessario limitare il numero di connessioni (per via delle risorse limitate) e configurare sia il timeout sia come trattare l’inattività (idle) delle connessioni aperte.

Quando usare una o l’altra funzione?

Si dovrebbe usare mysql_pconnect() quando il sito genera un alto traffico e quindi maggiori richieste di connessioni al DB. Se PHP e MySQL risiedono sullo stesso server o sulla stessa rete locale, il tempo di connessione può essere trascurabile, nel qual caso non vi è alcun vantaggio nell’uso delle connessioni persistenti.

Cose da tenere a mente durante l’utilizzo mysql_pconnect

Quando si interroga una tabella, MySQL effettua un lock su una tabella e normalmente la tabella viene sbloccata quando il collegamento si chiude. Dal momento che le connessioni persistenti non si chiudono al termine dello script, le tabelle potrebbero rimanere in uno stato di lock, e l’unico modo per sbloccarle è quello di attendere il timeout della connessione o “killare” il processo.

Le tabelle temporanee in MySQL vengono solitamente eliminate quando la connessione si chiude, ma dal momento che le connessioni persistenti non si chiudono, le tabelle temporanee non sono così temporanei. Se non si cancellano esplicitamente le tabelle temporanee, tali tabelle rimarranno disponibili ad altri client che riutilizzano la stessa connessione.

Il server Apache non funziona bene con le connessioni persistenti. Quando riceve una richiesta da un nuovo cliente, invece di utilizzare una connessione persistente aperta, tende a generare un nuovo figlio, il quale si occuperà di aprire una nuova connessione al database. Questo causa un eccesso di processi dormienti, uno spreco inutile di risorse, causando degli errori quando si raggiungere limite massimo di connessioni aperte, e ciò annulla qualsiasi vantaggio sulle connessioni persistenti.

A voi la scelta!


8 passi per creare un digital storytelling

Le storie ci uniscono, ci incoraggiano a capire ed empatizzare e ci aiutano a comunicare meglio. Molto tempo prima che la carta e l’avvento dei libri diventassero comuni e accessibili a tutti, le informazioni venivano trasmesse di generazione in generazione attraverso la tradizione orale del racconto. Il Digital Storytelling può essere considerato come una versione moderna dell’antica arte di narrazione. Grazie agli strumenti digitali oggigiorno chiunque può creare una storia e condividerla con il mondo. Continue Reading


Una guida (di base) per creare delle password robuste

“Treat your password like your toothbrush. Don’t let anybody else use it, and get a new one every six months” – Clifford Stoll

 

Quando si crea un account su un sito web, si è colti per un momento dalla “sindrome della password”. Il dilemma è se è necessario fornire una password debole che è facile da ricordare o una password complessa che è difficile da ricordare.

Qui di seguito vengono specificate alcune regole e le linee guida che possono aiutare a superare questo vostro dilemma e vi aiuterà a creare una password complessa e sicura.  Continue Reading


Pagine:1234567

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