Pubblicato il 19/09/13e aggiornato il

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

ricerca-vocale

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.




3 commenti :

  1. Ma a cosa potrebbe essere utile all'interno di un blog? Comunque è molto divertente provare a dire le parole in inglese e scoprire che il computer non capisce mezza parola di quello che si dice perché si dispone di una pronuncia pietosa.

    RispondiElimina
    Risposte
    1. Non hai letto bene il post perché si deve parlare in italiano
      @#

      Elimina
    2. Mi sono lasciato ingannare dalla gif dove appariva la scritta 'Widget', mea culpa.

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.