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
Zoom es un software de videollamadas y reuniones virtuales, accesible desde computadoras de escritorio, computadoras por[...]
Tercera parte del tutorial [Crea tu blog con el patrón MVC y php] En este post trabajaremos en el Theme del blog, agrega[...]
Utilizando pygame para hacer gráficos en python, se muestra a continuación un sencillo ejemplo de cómo utilizar esta lib[...]
Tapiti v1.2.0 es un Software Educativo Gratuito multiplataforma para los sistemas operativos Windows y Linux el cual no[...]
En este post crearemos una aplicación en Android Studio para conectarnos con nuestra base de datos de Firebase y leer al[...]
En este post vemos un ejemplo de como convertir un archivo de imagen JPG en un archivo PDF utilizando para ellos la libr[...]