Come creare una casella di ricerca con riconoscimento vocale.

Come creare una casella di ricerca per il nostro sito che abbia anche il riconoscimento vocale per fare delle ricerche con la voce.

Fare delle ricerche parlando direttamente al dispositivo è una cosa a cui ci siamo abituati con i dispositivi Android e in parte anche con Siri dell'iPhone. Invece di digitare il testo con la tastiera si può pronunciarlo anche nella nostra lingua. Questa funzionalità è stata attivata oltre che nella tastiera ufficiale di Android anche nelle altre tastiere più utilizzate quali SwiftKey e SlideIT.

Da qualche settimana se si utilizza il browser Chrome è possibile fare delle ricerche immettendo le parole chiave anche con la voce. Basta cliccare sulla icona del microfono nella casella di ricerca di Google. In questo articolo vediamo come sia possibile creare una casella di ricerca personalizzata nelle dimensioni e nei colori per il nostro blog e che abbia anche la funzionalità del riconoscimento vocale. È evidente che le ricerche tramite voce funzioneranno solo con Google Chrome ma comunque la casella potrà essere usata nel solito modo anche con gli altri browser

Dopo aver cliccato sull'icona del microfono si visualizzerà la scritta Parla adesso. Si pronuncerà la chiave di ricerca che verrà visualizzata nella casella senza digitare nulla. Per procedere alla ricerca dei post con quella query bisognerà cliccare come al solito su Invio (o Enter). Chi non ha Chrome potrà comunque fare ricerche nel nostro dominio digitando le parole chiave.

Per l'installazione di questa interessante personalizzazione si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e si incolla in Sezioni del sito il seguente codice

<style>
#Cerca input[type="text"] {   
    background: #efefef;
    border: 1px solid #000;
    font: bold 12px Georgia;
    color: #000;
    outline:0px;
    width: 200px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;   
    }
</style>
<form id="Cerca" action="http://www.ideepercomputeredinternet.com/search/" id="searchform" method="get"> <input id="s" name="q" placeholder="Cerca..." type="text" value x-webkit-speech="true" /> </form>

Quindi si va su Salva, si posiziona con il drag & drop del cursore e si clicca su Salva disposizione. I parametri più importanti da modificare sono stati colorati di rosso:

1. background: #efefef; è il colore di sfondo della barra di ricerca
2. border: 1px solid #000; determina il colore e lo stile del bordo 
3. font: bold 12px Georgia; determinano la dimensione e la famiglia dei caratteri
4. color: #000; è il colore del testo visualizzato nella casella
5. width: 200px; determina la larghezza della casella di ricerca
6. 10px; è il raggio di curvatura dell'arrotondamento
7. www.ideepercomputeredinternet.com è il dominio su cui effettuare le ricerche
8. Cerca… è il testo che si visualizza nel form prima di digitare

Ci sono modi anche più sofisticati per creare un motore di ricerca per il nostro blog ma il metodo appena illustrato è forse il più semplice di tutti ed è indicato per siti di dimensioni piccole o medie.