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:
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> {titulo_web}</h1> </div> <div id="wrapper" class="clearfix"> <div id="maincol"> <h1> {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"> Copyright © 2012 jc-Mouse</div> </div> </body> </html>
Graficamente debes tener algo como esto:
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
Este es una continuación de un tutorial pasado [Funciones en PostgreSQL y pgAdmin], así que si quieres entenderlo mucho[...]
¿Qué es una vista? Una vista (View) o Tabla Virtual, es una forma lógica de ver los datos ubicados en varias tablas, es[...]
Desde que se crearon los videojuegos para computadora, el espacio de almacenamiento y memoria han sido siempre un proble[...]
BorderPane es un layout que distribuye los nodos hijos en 5 posiciones TOP, LEFT, BOTTOM, RIGHT y CENTER Los nodos hijos[...]
En este post vemos un ejemplo de como convertir un archivo de imagen JPG en un archivo PDF utilizando para ellos la libr[...]
Hola 🙂 en esta post se deja a disposición de la comunidad de programadores que quiera aprender un poquito sobre Factura[...]