Este documento trata sobre el diseño de interfaces de usuario para usuarios internacionales. Explica la importancia de la internacionalización y localización, y cubre elementos como idiomas, escrituras, codificaciones, zonas horarias y más. Además, describe problemas comunes y metodologías para crear interfaces que sean accesibles para usuarios de todo el mundo.

1. Diseño de Interfaces de Usuarios
IU a la fama o la vergüenza
Diseño de Interfaces Profesor:
de Usuarios
Diaz Muñante Jorge
Ciclo 2012-1
Internacionalizacion
Objetivos Contenidos
Valorar la importancia de la internacionalización de Introducción
las interfaces Internacionalización y localización
Reconocer los problemas derivados de la traducción Elementos de la interfaz
a otros lenguajes
Escrituras
Conocer los diferentes alfabetos y esquemas de
codificación existentes Esquemas de codificación
Saber los aspectos a tener en cuenta en la Zonas de internacionalización
internacionalización Modelo de internacionalización y localización
Conocer metodologías y tecnologías para Guía técnica
internacionalizar y localizar interfaces
Introducción Introducción
Software internacionalizado: producto que está Ejemplo de problema: culturas con lenguajes que se
preparado para ser utilizado fuera de la región o escriben de derecha a izquierda
país donde fue creado
Objetivo: hacer llegar
el producto a mercados
internacionales
Problema: ajustar la
interfaz a los diferentes
destinos
Caso extremo: sitios web
Diaz Muñante Jorge 1

2. Diseño de Interfaces de Usuarios
Ejemplo DSpace Manejando varios idiomas
Establecer el lenguaje de omision
Internacionalizando la IU
– Se realiza en el [dspace]/config/dspace.cfg
Soportar mas de un lenguaje
Internacionalización (i18n) y localización (l10n)
Poblacion mundial Internacionalización
Rank Idioma Script Speakers (millions) Es el proceso de diseñar una aplicación de tal
1 Mandarin Chinese 885 manera que pueda adaptarse a diferentes lenguajes
2 Hindi Devanagari 375 y regiones sin necesidad de cambiar el código
3 Spanish Latin 358
4 English Latin 347 – Un programa internacionalizado no tiene elementos
5 Arabic Arabic 211 dependientes de la lengua o del contexto cultural de un
6 Bengali Bengali 210 país o región en el propio código
7 Portugues Latin 178
8 Russian Cyrillic 165 – Los elementos textuales, como los mensajes o las
9 Japanese Japanese 125 etiquetas de los componentes, no están en el código, están
10 German Latin 100
fuera y se toman dinámicamente
Internacionalización y localización Internacionalización y localización
Localización Ventajas
Es el proceso de adaptar software a una región El mismo ejecutable funciona en todo el mundo
específica o lenguaje añadiéndole componentes El mercado es mayor
específicos y traduciendo texto No hace falta hacer un desarrollo internacional del producto
– Convenciones locales, cultura y lenguaje de una región una vez acabada la primera versión
particular Se utilizan los recursos más eficientemente
– Conjunto de letras que se utilizan para escribir en una Añadir soporte internacional a un programa acabado puede
lengua (escritura) hacerlo menos estable que si se hace como una parte del
proceso de desarrollo
El mantenimiento del código y la inclusión de nuevas
localizaciones es menos costoso
Diaz Muñante Jorge 2

3. Diseño de Interfaces de Usuarios
Internacionalización y localización
Elementos a considerar
Elementos de la interfaz
Cultura
Texto Colores
Iconos Gráficos Iconos
Números de teléfono
Clips de audio Colores
Direcciones
Ayuda en línea
Títulos honoríficos Calendarios, formatos y separadores de fecha y
Formato de monedas, fechas
y números hora
Calendarios Formatos de números y monedas
Medidas
Ordenación
Unidades de medida
Elementos de la interfaz Elementos de la interfaz
Cultura Cultura
La cultura de una región o país puede hacer percibir un Hay que cuidar cómo se dibujan hombres y mujeres
mismo objeto de maneras diferentes en puntos geográficos juntos y cómo van vestidos
diferentes
Algunos símbolos como la esvástica, hoz y martillo,
Ejemplos sol naciente, cruces y estrellas representan ideas
– Tan pronto como sea posible quiere decir inmediatamente políticas y/o religiosas
en Estados Unidos y puede ser este mes en la cultura En un país fundamentalista pueden entenderse
latinoamericana
como ofensivas cosas que en Occidente no tienen
– La mano izquierda es ofensiva en algunas culturas ningún significado
– Mover la cabeza, decir adiós con la mano, bebidas
alcohólicas
Interface Hall of Shame – Globalization tips
– http://homepage.mac.com/bradster/iarchitect/
Elementos de la interfaz Elementos de la interfaz
Iconos Colores
Muchos iconos presentan Tienen asociados significados a través de la tradición en la mayor
una dependencia más o parte de las culturas
menos importante de una – Occidental
determinada lengua y • Negro: color asociado con el luto y los funerales
cultura • Blanco: asociado con el matrimonio y el nacimiento
Ejemplos: – Oriental
• Blanco: asociado con el luto
– Buzón de correo
• Rojo: asociado con el matrimonio
– Corrector ortográfico Cada cultura tiene sus estándares, por lo que es difícil generalizar
– Comprobación (tick) – Ejemplo: semáforo
• Rojo (parar), ámbar (precaución) y verde (adelante), pero ni aún estos los
podemos asumir de una manera generalizada
Diaz Muñante Jorge 3

4. Diseño de Interfaces de Usuarios
Elementos de la interfaz
Elementos de la interfaz
Calendarios, fecha y hora Números y monedas
Para cada país hace falta tener en cuenta el símbolo
Hay otros tipos de calendario aparte del Gregoriano
de la moneda y el formato numérico
– Budista, islámico, chino, hebreo, etc.
– USA $ 1,234.56
En el calendario gregoriano hay distintos formatos:
– dd/mm/aaaa 11 de noviembre de 2011 – Gran Bretaña £ 1,234.56
– mm/dd/aaaa november 11th, 2011(países de habla inglesa) – Euro 1.234,56 €
Elementos de la interfaz Elementos de la interfaz
Ordenación Unidades de medida
Las ordenaciones son importantes en el proceso de La mayor parte del mundo utiliza el sistema métrico
internacionalización y son un tema complejo excepto Estados Unidos
En un principio las ordenaciones de caracteres son de la A a – Utiliza la milla (1.609 m), la pulgada (2,54 cm), etc.
la Z, mayúsculas primero y después las minúsculas, y los
números se ordenan de 0 a 9
Este tipo de regla no siempre es aceptable, porque hay
reglas más complicadas cuando hay que considerar un
segundo carácter al mismo tiempo
– Ejemplo de la ‘ch’ y la ‘ll’ en Castellano, ya superado
Escritura Escritura
Escrituras occidentales
Las escrituras se pueden clasificar en ideogramas y Las escrituras occidentales son: latín, griego y
escrituras fonéticas cirílico
– Un ideograma tiene un significado especial y no tiene
relación con su pronunciación
Características comunes a las tres escrituras:
– Las letras de una escritura fonética representan – Fonéticas
determinados sonidos, como por ejemplo M – Se leen de izquierda a derecha en una línea horizontal
Los tres sistemas de escritura más importantes son: – Utilizan letras mayúsculas y minúsculas diferentes
– Occidental – Utilizan numeración arábiga: 0,1,2,3,4,5,6,7,8 y9
– Oriente medio
– Extremo Oriente
Diaz Muñante Jorge 4

5. Diseño de Interfaces de Usuarios
Escritura Escritura
Escrituras occidentales Extremo Oriente
Escritura latina Están basadas en los caracteres ideográficos chinos
– La más usada (casi toda Europa, parte de Asia, casi toda Su antigüedad se remonta a 4000 años y se utilizan de esta
África, América y Oceanía) forma desde hace más de 2000 años
– Proviene del latín, con letras añadidas (J, W) Actualmente se usan unos cuantos miles de caracteres
– Algunas lenguas usan más letras y marcas diacríticas:
• acento grave (` à), agudo (´ á), circunflejo (^ â), tilde (~ ã), diéresis (¨
ä), círculo (º å) y slash (/ Ø).
Conjunto estándar:
• En castellano, á, é, í, ó, ú, ü, ñ, ¿, ¡ 20.000
Escritura griega caracteres
Conjunto extendido:
– Usada en Grecia 50.000
Escritura cirílica caracteres
Mínimo para
– Usada en los países eslavos (ruso, búlgaro, serbio...) y de conversar:
Asia central (turcomeno, kurdo, uzbeko, kazakho, tajik...) 3.000 caracteres
Esquemas de codificación Esquemas de codificación
Tipos de esquemas
Cada tipo de escritura ha de ser representada en ASCII
sistemas informáticos – Mapa de caracteres de un octeto (SBCS)
Esta representación se concreta en un esquema de – Mapa de caracteres de doble octeto (DBCS)
codificación Unicode
Estos esquemas se codifican a través de mapas de
caracteres
– Los mapas de caracteres permiten la representación de
escrituras en el ordenador e incluyen caracteres que no
están en el alfabeto como los signos de puntuación
Esquemas de codificación ASCII
ASCII Mapa de un sólo octeto (SBCS)
El mapa de caracteres ASCII está basado en el alfabeto Son mapas de caracteres de hasta 256 caracteres (256=28)
latino y consta de 128 caracteres Son una extensión del código ASCII, al que se han añadido
– Los caracteres en el rango de 0 a 31 y el carácter 127 son 128 caracteres, del 128 al 255 (mapa de caracteres
especiales, típicamente de control extendido)
ISO
Cada carácter es un índice en el mapa de caracteres, por
ejemplo el número 65 es la letra ‘A’ y el 97 la ‘a’ – 8859-2 Latín europa del este
El código ASCII de 128 caracteres sólo se utilizaba – 8859-5 Cirílico Europa del este
inicialmente para el inglés – 8859-1 Latín Europa del Oeste
– En principio con 128 caracteres había bastante – 8859-7 Griego
– Al ampliarlo a nuevos idiomas se empezaron a utilizar los – 8859-3 Turco
restantes 128 caracteres – 8859-8 Hebreo
– 8859-6 Árabe
Diaz Muñante Jorge 5

6. Diseño de Interfaces de Usuarios
Mapa de un sólo octeto Mapa de un sólo octeto
ASCII ISO 8859-1 (Latin-1) ASCII ISO 8879
ASCII Mapa de doble octeto
Mapa de doble octeto (DBCS) Código KANJI
Las escrituras del extremo oriente utilizan caracteres Definido por el JIS (Japan Industry Standard)
ideográficos – El JIS nivel 1 contiene unos 3.000 caracteres corrientes
Necesitan un mapa de caracteres mayor de 256 caracteres – El nivel 2 añade 3.500 caracteres más
Para resolverlo se creó el mapa de caracteres de doble – El tercer nivel se ha definido recientemente e incrementa el
octeto mapa de caracteres en más de 6.000 caracteres
Notación de 16 bits: 65.536 (216) caracteres JIS se basa en un formato de 7 bits que requiere secuencias
El código DBCS contiene caracteres de 1 y 2 octetos de ESCAPE especiales para entrar o salir del modo DBCS
– Los de un sólo octeto se corresponden con el código ASCII
– En el doble octeto algunos caracteres se definen como
octetos de comienzo y el segundo como octeto de código
Esquemas de codificación Esquemas de codificación
Problemas Unicode
Duplicidad en la codificación de caracteres Consensuado, participan
Múltiples códigos de caracteres inconsistentes – Apple, Borland, Digital, Hewlett-Packard, IBM, Lotus,
Metaphor, Microsoft, Next, Novell, Research Libraries
debido al conflicto entre estándares nacionales y de Group, Sun, WordPerfect, Xerox
la industria
Es un esquema de codificación uniforme y de
El código ASCII de 7 bits o el de 8 bits están tamaño fijo para todo tipo de caracteres de las
limitados a 128 y 256 posiciones de código y son escrituras más importantes del mundo, así como
inadecuados en un entorno global símbolos técnicos
Internet ha añadido un punto más a la demanda de Trata los caracteres alfabéticos, ideográficos y los
símbolos de la misma manera, de forma que se
un conjunto de caracteres único en el mundo
pueden mezclar
Diaz Muñante Jorge 6

7. Diseño de Interfaces de Usuarios
Esquemas de codificación Esquemas de codificación
Unicode Unicode
Es compatible con el En resumen, Unicode es:
código ASCII Universal (capacidad amplia)
Utiliza una Uniforme (anchura fija)
codificación de 16 bits No ambiguo
No necesita Unicode proporciona códigos para
secuencias de más de 39.000 caracteres de las
ESCAPE lenguas más importantes (quedan
cerca de 18.000 sin usar y 6.400
reservados para uso privado de las
aplicaciones)
Esquemas de codificación Zonas de internacionalización
Unicode
Disposición de símbolos y letras Zona Idiomas Conjunto de Escritura Direccionalida
caracteres d del texto
Europa Europa, oeste, Un byte Latín, griego, Izquierda
central y este, Cirílico a derecha
griego, ruso, turco,
indonesio
Oriente Arabe, Hebreo Un byte Árabe, Bidireccional
medio Hebreo, Latín
Extremo Chino tradicional, Multibyte Kana, Horizontal
oriente Chino simplificado, hangul, y vertical
Japonés, Coreano caracteres
ideográficos
Thai Thai Un Thai Izquierda
byte a derecha
Modelo de localización Modelo de localización
Esquema de un producto localizado: Esquema de un producto localizado:
Recursos Código de la = Producto Recursos Código de la = Producto
+ +
localizados aplicación localizado localizados aplicación localizado
Contiene datos pero no código
Contiene cadenas de caracteres y gráficos utilizados en la
interfaz
Contiene elementos específicos de la localización realizada
Diaz Muñante Jorge 7

8. Diseño de Interfaces de Usuarios
Modelo de localización Modelo de localización
Esquema de un producto localizado: Claves para el diseño de un producto localizado:
Extraer todos los datos, textos y elementos gráficos y
colocarlos en un archivo de datos separado
Recursos Código de la = Producto Organizar y documentar los archivos. Crear una estructura
+ de directorios con una rama para cada localización
localizados aplicación localizado
Crear un proceso para construir el producto localizado
Contiene el código de la aplicación que se ejecuta en todos
los países e idiomas
Guía técnica Guía técnica
Puntos a revisar
Veamos algunos problemas técnicos generales en Elementos específicos de la localización
la planificación de la localización Convenciones en el procesamiento de texto:
– ordenación, clasificación de caracteres, pronunciación,
guionado, funciones de gestión de cadenas e intercambio
de ficheros (importación y exportación de ficheros)
Gestión de las entradas
– soporte para drivers de teclado y otros métodos de entrada
Gestión de las salidas
Guía técnica Guía técnica
Traducción del texto Aspectos a tener en cuenta
Todas las lenguas tienen gramática y sintaxis Mensajes
diferentes Gramática y sintaxis
El texto traducido cambia de tamaño, hay que Diseño de menús
prever que pueda crecer
Prompts
Ejemplos:
Barras de estado
– ‘Mover’ se traduce como ‘verschieben’ en alemán (5 contra
11) Cajas de diálogo
– ‘Sort Ascending’ se traduce como ‘Lajittele nousevassa Iconos
järjestyksessä’ en finlandés (14 contra 35)
Diaz Muñante Jorge 8

9. Diseño de Interfaces de Usuarios
Guía técnica
Guía técnica Organización de diálogos
Organización de diálogos
La organización de controles y elementos en una
Ejemplo:
ventana ha de considerar la expansión de las
etiquetas de texto
En hebreo y árabe la información se escribe de
derecha a izquierda (hace falta invertir la
presentación)
Algunos idiomas incluyen marcas diacríticas que
requieren espacio adicional
Regla: permitir un 30% de expansión
Escáner Mustek
Guía técnica
Cambio de idioma Organización de diálogos
Ejemplo:
alemán español árabe
www.vienna.info
Guía técnica
Guía técnica
Organización de diálogos
Organización de diálogos
Ejemplo: Ejemplo:
español
Controles de
reproducción
primero anterior siguiente último Izquierda a derecha
último siguiente anterior primero Derecha a izquierda
árabe
Wikipedia
Diaz Muñante Jorge 9

10. Diseño de Interfaces de Usuarios
Guía técnica Guía técnica
Barra de estado Menús
No se ha de llenar la barra de estado con texto Evitar menús muy densos
La versión inglesa sólo ha de ocupar el 50% de la – Límite 80 caracteres
barra de estado Las teclas aceleradoras coinciden con el primer
carácter de una palabra. Esto puede dar problemas
al traducir. Habrá que permitir que la tecla
aceleradora sea otra distinta de la inicial
Guía técnica Guía técnica
Elementos culturales Elementos culturales
Dirección postal Dirección postal - solución
Dirección típica en EEUU Dirección flexible
Guía técnica Guía técnica
Elementos culturales Elementos culturales
Objetos cotidianos Fechas
¿Qué objeto
elegiremos si
el perro nos
pide una Wikiped
pelota? ia
Diaz Muñante Jorge 10

11. Diseño de Interfaces de Usuarios
Guía técnica Guía técnica
Elementos culturales Elementos culturales
Iconos Imágenes
España EEUU
Microso
Yahoo ft
Guía técnica Guía técnica
Desarrollo Ejemplo: lenguaje Java
Documentar todos los recursos que tienen que ser Soporta Unicode:
localizados (y los que no) – Tiene un tipo char de 16 bits (en C++ depende de la
Es útil hacer dos localizaciones en paralelo para plataforma)
poder evaluar la internacionalización – Posee una notación para definir un carácter Unicode
constante: ‘uxxxx’
Es importante disponer de herramientas y utilidades
para hacer la localización Posee objetos predefinidos
– Class java.util.Locale extends Object. Un objeto Locale
representa un identificador de una región
Conclusiones
El mercado informático es global y para competir es
preciso hacer programas para clientes de todo el
mundo
La internacionalización es una necesidad, no una
opción
Es preciso tenerla en cuenta desde el principio del
diseño siguiendo una metodología adecuada
– Ejemplo de Microsoft
Es importante la evaluación con usuarios locales
Diaz Muñante Jorge 11