Crear web multi-lenguaje con php

En este tutorial realizaremos un proyecto web de un «sitio multi lenguaje» o «web multi idiomas» como prefieran llamarlo, utilizaremos el lenguaje php, este ejemplo será sencillo asi que nada de sesiones nada de javascript, nada de imagenes, puro código php, si bien existen frameworks para php creo yo que lo mejor forma de aprender este lenguaje es desde cero.

Para este tutorial utilizaremos phpDesigner, usted puede utilizar el IDE de su agrado, la estructura del sitio web sera la siguiente:

Estructura del proyecto en phpDesginer

Crea esta estructura de carpetas junto a los archivos en tu servidor local, más adelante incluiremos el código necesario.

Expliquemos un poco nuetro proyecto: utilizamos programacion orientada a objetos (POO) y las clases las colocaremos en la carpeta «class», en la carpeta «lenguaje» colocaremos los archivos de los diferentes idiomas que utilizaremos (ingles, español e italiano), cuando termines el proyecto te daras cuenta de lo facil que sera añadir otro idioma más, tambien haremos uso de plantillas TPL, estas las colocamos en la carpeta «TPL», el archivo raiz del sitio se llama index.php.

¿Cómo funciona? como habras notado cuando visitas una web multi-idiomas, esta tiene unas pequeñas banderitas las cuales simbolizan los lenguajes que soporta, cuando haces clic en uno de ellos se recarga la pagina con el idioma elegido, pues eso ni más ni menos es lo que haremos aqui.

Comencemos.

1. Comenzaremos con la creación de nuestra plantilla web, se llama «plantilla.tpl.php», este archivo no contiene código php, es puro HTML y CSS, podras ver tambien que tiene etiquetas de la forma {nombre_etiqueta}, son estas etiquetas las que utilizaremos para cambiar el contenido de nuestra web multilenguaje. Cada etique tiene un ID el cual nos sirve para reconocerlo en todo el proyecto, este id puede repetirse no es único como en el caso de {titulo_web}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>{titulo_web}</title>
<style type="text/css">
html, body{
 margin:0;
 padding:0;
 text-align:center;
 background-color:#EFEFEF;
} 

#pagewidth{
 width:600px;
 text-align:left;
 margin:20px auto;
 border:1px solid #000000;
} 

#header{
 position:relative;
 height:80px;
 background-color:#528BC5;
 width:100%;
 display:block;
 overflow:auto;
} 

#leftcol{
 width:200px;
 float:left;
 position:relative;
 background-color:#FFD595;
 }

#maincol{
 background-color: #93A056;
 position: relative;
 width:400px;
 float:right;
 }

#footer{
 height:50px;
  background-color:#9FC0A6;
 clear:both;
 display:block;
 overflow:auto;
} 

.clearfix:after {
 content: ".";
 display: block;
height: 0;
 clear: both;
 visibility: hidden;
 }

.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */

</style>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="pagewidth" >
 <div id="header">
        <h1>&nbsp;&nbsp;&nbsp;{titulo_web}</h1>
    </div>
 <div id="wrapper" class="clearfix">
   <div id="maincol">
                <h1>&nbsp;&nbsp;&nbsp;{titulo_pagina}</h1>
                <p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per. </p>
            </div>
  <div id="leftcol">
            <ul>Elija su idioma
                <li><a href="index.php?idioma=es">Español</a></li>
                <li><a href="index.php?idioma=en">Ingles</a></li>
                <li><a href="index.php?idioma=it">Italiano</a></li>
            </ul>
            <hr />
            <ul>Menu
                <li><a href="#">{#archivo}</a></li>
                <li><a href="#">{#herramientas}</a></li>
                <li><a href="#">{#ayuda}</a></li>
                <li><a href="#">{#proyecto}</a></li>
                <li><a href="#">{#acercade}</a></li>
            </ul>
        </div>
 </div>
 <div id="footer">&nbsp;&nbsp;&nbsp;Copyright © 2012 jc-Mouse</div>
 </div>
</body>

</html>

Graficamente debes tener algo como esto:

Plantilla web TPL

2. Vamos ahora a crear la clase «lenguaje.php», esta clase es la que nos permite elegir entre los diferentes lenguajes que soporte nuestra web.

<?php
# CLASE PARA GESTIONAR EL IDIOMA DEL USUARIO
class lenguaje
{
    private $key;
#:._________________________________________________ soy una barra separadora :)
  public function __construct($k='es')
  {
    $this->key = $k;
  }
#:._________________________________________________ soy una barra separadora :)
# Carga idioma elegido y retorna en un array 
    public function get_idioma()
    {
        #Si achivo de idioma es correcto
        $file = 'inc/lenguaje/'.$this->key.'.inc.php';
        if ( is_file( $file ) )
            include_once $file;
        else
            include_once 'inc/lenguaje/es.inc.php';
        return $id;
    }
#:._________________________________________________ soy una barra separadora :) 
}
?>

Como puede verse, hace uso de los archivos con extensión «*.inc.php» estos archivos que contienen los diferentes idiomas que utilizamos, los crearemos a continuación.

3. Los archivos multi-lenguajes, son solo archivos php que contienen en su interior a un array asociativo con los id de cada palabra o palabras que se desea traducir, estos archivos son guardados en la carpeta «lenguajes».

Lenguaje español: es.inc.php

<?php
    $id = array(
        'titulo_web'=>'Web Multilenguaje',
        '#archivo' => 'Archivo',
        '#herramientas' => 'Herramientas',
        '#ayuda' => 'Ayuda',
        '#proyecto' => 'Proyecto',
        '#acercade' => 'Acerca de...',
        'titulo_pagina' => 'Contenido Principal'
);
?>

Lenguaje ingles: en.inc.php

<?php
    $id = array(
        'titulo_web'=>'Multi Language Website',
        '#archivo' => 'File',
        '#herramientas' => 'Tools',
        '#ayuda' => 'Help',
        '#proyecto' => 'Project',
        '#acercade' => 'About',
        'titulo_pagina' => 'Main Content'
);
?>

Lenguaje Italiano: it.inc.php

<?php
    $id = array(
        'titulo_web'=>'Lingua del sito Multi',
        '#archivo' => 'Archivio',
        '#herramientas' => 'Strumenti',
        '#ayuda' => 'Aiuto',
        '#proyecto' => 'Progetto',
        '#acercade' => 'Circa',
        'titulo_pagina' => 'Contenuto Principale'
);
?>

4. Pues nada, ya estamos por terminar el proyecto, solo falta el archivo index.php, el código es el siguiente:

<?php
    require 'inc/class/lenguaje.php';

    if( $_GET )       
        $key = ( isset($_GET['idioma']) )? $_GET['idioma'] : 'es' ;  

    # se crea instancia a lenguaje
    $idioma = new lenguaje( $key );
    # se carga array de idioma
    $diccionario = $idioma->get_idioma(); 
    # se carga la plantilla HTML
    $template = file_get_contents('inc/tpl/plantilla.tpl.php');
    #se llenan los valores generales a toda la plantilla
    foreach ($diccionario as $clave=>$valor) {
        $template = str_replace('{'.$clave.'}', $valor, $template);
    }
    #Se muestra pagina web
    echo $template;
 ?>

En esta archivo cargamos la plantilla y tambien iniciamos el lenguaje (español por defecto) a utilizar, para cambiar el idioma estamos utilizando GET, podriamos utilizar POST incluso una base de datos y mucho mejor hacer uso de SESION almacenar los valores «en, es, it» en variables de sesion, pero el objetivo del tuto es mostrar al programador novato como funcionaria un sistema web multilenguaje, ya si le gusto el codigo, lo modifica asu gusto y lo amplia según sus necesidades.

Ejecutando la web desde el navegador obtendremos las siguientes salidas:

Español

Ingles

Italiano

Eso es todo, bajate los archivos del proyecto AQUI

Crear web multi-lenguaje con php

Tags

Últimas entradas

Crea tours interactivos para tus sistemas web

Convierte tus fotos al estilo Ghibli gratis y fácil: Guia paso a paso

Edita fotografias gratis con esta IA de Google

Que es y como se usa la App de la ANH Abastecimiento

Fin de una era. RIP Skype 2003-2025

Artículos similares

Tutorial Zoom para dispositivos móviles

Blog MVC – El theme y primer controlador [p3]

Como crear un Grid en Pygame

Tapiti: A sumar y a saltar (Software Educativo)

Leer datos de Firebase desde Android

Convertir imágenes JPG a PDF

JC Mouse | Bolivia