HTML/JavaScript

giovedì 10 agosto 2017

Post bilingua




Cominciamo proprio dai blog e nello specifico nella possibilità di poter creare post in due o più lingue.
Il mio blog è pubblicato su internet attraverso lo spazio gratuito messo a disposizione da Google che ai chiama Blogger.
Una piattaforma piuttosto flessibile che offre varie funzioni preimpostate ma che non prevede al momento la possibilità di creare post multilingua.

Ho letto varie guide nelle quali il suggerimento è di creare blog diversi per lingue diverse, in effetti questa è sicuramente una soluzione ed è a che piuttosto semplice.
Personalmente non mi piace il fatto che, questa scelta porti alla divisione di visite e visitatori.

Così ho pensato che invece si potrebbero scrivere entrambe o le n lingue nello stesso post.
In effetti però avere il testo ripetuto in varie lingue non è il massimo dal punto di vista estetico e sicuramente crea confusione.
Per ovviare a questo però sono sufficienti poche righe di codice Html e Javascript!

Prima di poter scrivere il nostro "codice", bisogna spiegare al nostro editor che il testo digitato deve essere interpretato come codice di programmazione.
Per fare questo bisogna premere, in alto a sinistra e sulla barra degli strumenti, il pulsante con la scritta "HTML"





Ora semplicemente copiate e incollate il testo sottostante, compreso tra i nostri da qui... e ...a qui

da qui...

<button disabled="" id="btnIta">Italiano</button>
<button id="btnEng">English</button>

<div id="divIta" style="display: block;">
qui scrivete il testo in italiano
</div>

<div id="divEng" style="display: none;">
write here the english text
</div>

<script type="text/javascript">
    var btnIta = document.getElementById('btnIta');
    var btnEng = document.getElementById('btnEng');
    var divIta = document.getElementById('divIta');
    var divEng = document.getElementById('divEng');
     
    btnIta.onclick = function() {
        divIta.style.display = 'block';
        divEng.style.display = 'none';
        this.disabled = true;
        btnEng.disabled = false;
    };
 
    btnEng.onclick = function() {
        divEng.style.display = 'block';
        divIta.style.display = 'none';
        btnIta.disabled = false;
        this.disabled = true;
    };
</script>

...a qui

Per poter visualizzare i risultati del codice inserito nella pagina dovete pubblicare il post così creato.

Attenzione!
Questo codice non è utilizzabile sui temi che prevedono l'anteprima e per poter funzionare correttamente, nel caso in cui venga usato su più post, come in effetti è lecito pensare, bisogna di volta in volta modificare i nomi dei pulsanti, delle variabili e dei div ad esempio aggiungendo un numero.






Chiedilo a noi!



Nella mia vita per lavoro e per passione sono un analista programmatore.
In questo mio spazio personale inserirò delle mini guide legate per lo più al mondo dell'informatica ma non solo.
Ho deciso di intitolare il mio blog: "Se non sai come fare..." principalmente per due motivi, vorrei pubblicare articoli legati alle mie nuove conoscenze e riguardanti le mie necessità lavorative e anche articoli creati a partire dalle vostre richieste.

Vi chiedo quindi di lasciare commenti e di condividere le pagine di questo mio progetto.

Guide