 |
Usuario: Ingresar | 
bits y bytes de tecnología, humor, cine y rebeldía para todos
:: Tecnología para todos :: |
| Dirección URL | http://www.srbyte.com/ Registrado:13-Jul-2008 |
Compartir:
|
|
 Enviar a email | Internacionalización en tus Sitios Web con jQuery en jqueryi18ninternacionalizacion |  Por BlendBoy@gmail.com (Robertux)
el 31-Dec-1969 | 
Foto 0 en Internacionalización en tus Sitios Web con jQuery: pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...
 "Si esperas recibir usuarios de países con otros idiomas, es una buena recomendación poder mostrar el contenido de tu sitio en diferentes idiomas, tal como lo hace last.fm"
Internacionalización o i18n es la característica de los sistemas que les permite adaptar su contenido a diferentes idiomas según las regiones donde se desee mostrar. Muchas veces no solamente te permiten traducir el idioma del contenido sino también monedas, fechas y ajustes de zonas horarias. Dependiendo del lenguaje de programación usado, pueda que este ya brinde soluciones para poder permitir la internacionalización de tu sitio web. Java EE por ejemplo ofrece los Message Bundles combinados con tags JSP para llevar a cabo este fin.
Así como es posible hacerlo desde server side, en esta ocasión les traigo un ejemplo realizado desde client side, usando el muy popular framework de javascript conocido como jQuery, al cual le he agregado un plugin denominado jQuery.i18n.properties el cual me permite implementar la internacionalización en un sitio web de una forma muy similar a como se realiza en java.
La ventaja de usar una solucion client side? me permite cambiar el idioma del contenido del sitio sin necesidad de salirme (logout) y volver a entrar(login), ni siquiera es necesario refrescar la pagina! todo se realiza en tiempo real a la velocidad de un Ajax Callback.
Para demostrarles lo mencionado anteriormente he desarrollado un ejemplo utilizando jquery, jquery.i18n.properties, un pequeño script de javascript y un par de servlets de java. Todo esto dentro de un proyecto web en eclipse y además no pueden faltar los Message Bundles. Los Message Bundles son archivos de texto con extensión .properties que contienen propiedades de tipo clave=valor en los cuales se almacenan los mensajes que se mostrarán en pantalla de acuerdo al idioma seleccionado. De tal manera que existe un archivo llamado locale_es.properties para los mensajes en español, otro llamado locale_en.properties para los mensajes en inglés y otro más denominado locale_fr.properties para los mensajes en francés.
Foto 1 en Internacionalización en tus Sitios Web con jQuery: pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...
 "En el panel izquierdo pueden ver los archivos utilizados en este proyecto. Servlets, javascripts, css, html y Message Bundles. En el panel principal a la derecha pueden ver parte del código HTML escrito."
Se ha escrito una pequeña página de login. Para internacionalizar los elementos les he colocado la clase "i18n" y como id el nombre de la clave que en el Message Bundle contiene el mensaje a mostrar. Se han agregado tres links en la parte superior que invocan a la función javascript para cambiar de idioma. Esto llama al plugin i18n.properties quien mediante un ajax callback obtiene el Message Bundle según el idioma deseado y lo carga en un mapa con los datos en forma de clave=valor.
Foto 2 en Internacionalización en tus Sitios Web con jQuery: pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...
 "Las funciones principales del archivo core.js con las cuales se lleva a cabo la internacionalización"
Luego de tener el mapa, se asignan los valores a cada elemento con la clase "i18n" y la clave según el ID del elemento. Luego de ello se escribió un Fake login test que devuelve respuestas random de manera que se prueben tanto mensajes de error como mensajes de éxito, ambos internacionalizados.
A continuación unas capturas de pantalla del sitio web en funcionamiento:
Foto 3 en Internacionalización en tus Sitios Web con jQuery: pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...
 "Sitio web mostrando mensaje de error en el login, todo en idioma inglés"
Foto 4 en Internacionalización en tus Sitios Web con jQuery: pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...
 "Sitio web mostrando mensaje de error en el login, todo en idioma español"
Foto 5 en Internacionalización en tus Sitios Web con jQuery: pega esta imagen en tú pagina, Foro, Myspace o Ebay con este código...
 "Sitio web mostrando mensaje de éxito en el login, todo en francés"
En este link pueden descargar el código fuente del proyecto.
Leído 14 veces
|
|
 |
 | Desde Algún Lugar De Buenos Aires |  Buenos Aires | Un blog sobre la aventura diaria de ser mujer, laburante, artista, estudiante, internetadicta, madre de familia... y vivir en una ciudad como Buenos Aires. Y bueh, no es fácil ser yo! Desde algun lugar de Buenos Aires |
| Blog And Web | Blogueros | Tecnologia aplicada a weblogs, wordpress,plantillas y photoshop. Blog and Web Recursos para Blog y Web |
| Scroll suave con jQuery | | Las anclas o enlaces dentro de una misma página para posicionar al usuario en una ubicación especifica suele ser bastante útiles, pero el efecto de situarlos de forma instantánea que tienen los navegadores, los hace menos conscientes de como llego ahí.
Una forma sencilla de solucionarlo y mejorar con ello la experiencia del usuario es [...] [..] Leer nota completa | | Publicado 05-Jul-2010 por Francisco en JavascriptjQueryusabilidad
Leído 13 veces. Más resultados en    |
|
| Diseño Estudio By Jg | Mexico | Blog de diseño gráfico, web, multimedia, publicidad, recursos para diseño, descargas, tutoriales, photoshop, illustrator, es un blg de Jorge Garcia Diseño Estudio by JG Blog de Diseño Gráfico, Artes Visuales e Informática. Desde México para el mundo. |
| Menu de Acordeón con jQuery | | La tecnologia jQuery nos da bastantes beneficios, al igual que javascript. Este plugin te permite personalizarlo y crear un menu para tu sitio web de gran calidad. Checa el DEMO. Leer nota completa | | Publicado 31-Dec-1969 por noreply@blogger.com (George) en Diseño WebjQuery
Leído 21 veces. Más resultados en |
|
| Blog And Web | Blogueros | Tecnologia aplicada a weblogs, wordpress,plantillas y photoshop. Blog and Web Recursos para Blog y Web |
| Bordes redondeados en imágenes con CSS 3 y jQuery | | CSS 3 tiene la propiedad border-radius que permite crear bordes redondeados sin imágenes, sin embargo, esta propiedad tiene la limitante de que si se aplica a un elemento que contiene una imagen, no puede darle a esta, bordes redondeados.
Solución
En Web Designer Wall plantean una solución con jQuery y usando border-radius (ver demostración). La solución consiste [...] [..] Leer nota completa | | Publicado 01-Jul-2010 por Francisco en CSSJavascriptTutorialesborder-radiusCSS3Esquinas redondeadasjQuery
Leído 11 veces. Más resultados en |
|
| Blogs De Guatemala | Guatemala | Blogs de Guatemala | Directorio de Blogs, donde los guatemaltecos escriben.
Noticias, información, clima, deportes, poesía, opinión, información Blogs de Guatemala Así se escribe en Guatemala. Directorio de Blogs Guatemaltecos |
| Entrevista a John Resig de Jquery | | Además de la entrevista con Chris Hofmann de Mozilla tuvimos la oportunidad de entrevistar también a otro grande de la web, John Resig creador de Jquery, quien comparte sus inicios con Jquery, su crecimiento y el futuro del proyecto.
El creador del Framework Jquery, John Resig nos permitió unos minutos de su tiempo al terminar [...]
[..] Leer nota completa | | Publicado 24-Nov-2008 por Blogs de en artistas
Leído 9 veces. Más resultados en |
|
| Almacenplantillasweb Blog | madrid | Blog sobre recursos de diseño y desarrollo web Blog AlmacenPlantillasWeb Diseño, accesibilidad, usabilidad, posicionamiento y optimización web |
| jQuery: 10 tutoriales (junio 2010) | | 10 tutoriales sobre recursos y aplicaciones del framework jQuery para construir galerías de imágenes, sliders, creación de gráficos, optimización de sitios web para iPhone, etc.
[..] Leer nota completa | | Publicado 23-Jul-2010 por jlopezto en diseño webjavascriptdesarrollo web
Leído 9 veces. Más resultados en |
|
| Almacenplantillasweb Blog | madrid | Blog sobre recursos de diseño y desarrollo web Blog AlmacenPlantillasWeb Diseño, accesibilidad, usabilidad, posicionamiento y optimización web |
| Plugins jQuery para Wordpress | | Plugins jQuery para Wordpress para incluir en nuestro blog o sitio web: Efectos con imágenes, Menús en jQuery, Efectos y contenido multimedia, Integración con redes sociales y Utilidades de administración de Wordpress
[..] Leer nota completa | | Publicado 16-Oct-2010 por jlopezto en Wordpressjavascript
Leído 8 veces. Más resultados en |
|
| Almacenplantillasweb Blog | madrid | Blog sobre recursos de diseño y desarrollo web AlmacenPlantillasWeb Diseño, accesibilidad, usabilidad, posicionamiento y optimización web |
| 10 plugins jQuery para imágenes | | Incluimos una colección de 10 plugins jQuery que nos permiten incluir efectos con imágenes en nuestras páginas web. Encontraréis soluciones para la implementación de slideshow de diapositivas, transiciones, galerías de imágenes y soficticados efectos como el paso de imágenes como si de un libro se tratara.
[..] Leer nota completa | | Publicado 27-Jan-2011 por jlopezto en diseño webjavascript
Leído 3 veces. Más resultados en |
|
|
Advertencia YAAQUI.COM no verifica la veracidad de la información publicada y no se responsabiliza
por el uso que se le de a la infomación del contenido publicado en los feeds y weblogs independientes.
Las opiniones vertidas en este sitio no necesariamente son nuestras. Nos reservamos el derecho de
remover cualqueir material que consideremos inconveniente.
|
|
| |
Hola, Invitado
En línea: 99 visitantes
+ fotos
