Instrucciones de diseño HTML para la globalización de páginas web ASP.NET
Actualización: noviembre 2007
El procedimiento recomendado con respecto al diseño HTML consiste en garantizar que los localizadores sólo tengan que traducir cadenas, porque la interfaz de usuario ajusta el tamaño de todos los controles según el texto que contienen las cadenas. Esto supone una ventaja, ya que en el proceso de localización desaparece el paso consistente en cambiar manualmente el tamaño de los controles, con lo que se evitan posibles errores. Sin embargo, el diseño de los controles cambia según la longitud de las cadenas, por lo que es necesario probar cuidadosamente los sitios Web traducidos.
En la siguiente lista se proporcionan recomendaciones para el diseño de páginas Web ASP.NET destinadas a la globalización.
Evitar el uso de posiciones absolutas.
Determinar posiciones absolutas evita que se ubiquen los elementos y se les asigne un tamaño automáticamente. En el ejemplo de código siguiente se muestra qué no debe hacerse.
<!-- Do not do this. --> <div id = idFindWhatLabel style = "position: absolute; left: 0.98em; top: 1.2168em; width: 4.8em; height: 1.2168em;">Utilizar el ancho y alto disponibles para los formularios.
Existen dos formas de hacerlo, que se describen a continuación:
Ajustar el tamaño de los elementos principales, como las tablas, a un ancho equivalente al 100%.
Por ejemplo:
<!-- A table sized to take up entire width of the form.--> <table width=100%>Ajustar el tamaño de los elementos mediante expresiones de hoja de estilos en cascada a partir del tamaño total del formulario.
Por ejemplo:
<!-- A div element sized to take up half the width and height of the form. --> <div style=' height: expression(document.body.clientHeight / 2); width: expression(document.body.clientWidth / 2); '>
Utilizar una celda de la tabla para cada control.
De ese modo, el texto puede ajustarse de forma independiente y se garantiza la alineación correcta para las referencias culturales en las que el diseño del texto fluye de derecha a izquierda.
Permitir que el texto se ajuste y evite utilizar el atributo nowrap para celdas de tabla que contengan texto.
Use el atributo nowrap sólo cuando desee que el texto permanezca en una línea y exista espacio suficiente para que se expanda de forma que pueda ajustarse en cualquier idioma.
Separar las casillas de verificación y los botones de opción de sus etiquetas de texto.
Sitúe las etiquetas de las casillas de verificación y de los botones de opción en celdas separadas de los controles. De este modo, el texto se ajustará correctamente cuando se expanda. Sin embargo, aun así, se debe diseñar el formulario de forma que el texto tenga posibilidades razonables de seguir ocupando una sola línea cuando se traduzca.
Dejar espacio suficiente para el texto y evitar los anchos fijos.
Cuando el texto se traduce a otros idiomas, puede requerir más espacio. Una buena regla consiste en dejar espacio para un aumento del 300% en cadenas cortas (menos de 10 caracteres), del 200% en cadenas de longitud intermedia (entre 10 y 20 caracteres) y del 100% en cadenas largas (más de 20 caracteres).
Una solución aceptable consiste en establecer el ancho de las celdas de las tablas en un porcentaje del ancho del formulario de modo que las celdas puedan expandirse en relación con la tabla completa. Sin embargo, conviene especificar el menor número posible de tamaños relativos (distintos del 100%), ya que lo deseable es que el motor de diseño HTML haga la mayor parte del trabajo.
<!-- The table cell is sized to take up one quarter of the width of the table. --> <td width=25%>Asigne tamaño a los botones en el menor número de lugares posibles.
Con frecuencia existe un conjunto de botones que deben tener el mismo tamaño. Establezca este tamaño en un lugar para todo el conjunto de botones, siempre y cuando sea posible. Deje espacio suficiente para que el texto se expanda en los cuadros de lista y en los cuadros de grupo.
Establecer el alto el menor número de veces posible.
No establezca el alto de las celdas de ninguna tabla o control que contenga texto (Puede establecer el alto de línea para los elementos de hoja de estilos en cascada). De otro modo, la apariencia de la página cambia si el usuario establece el tamaño del texto en el explorador.
No utilizar alineación izquierda o derecha en las etiquetas HTML.
En general, evite establecer align="left" o align="right" para cualquier celda de tabla. Esta configuración puede interferir con el diseño de los formularios para referencias culturales en las que el diseño de texto fluye de derecha a izquierda.
Evitar valores de hoja de estilos en cascada en línea que quizá deban cambiarse.
Mantenga todos los valores de las hojas de estilos en cascada que los localizadores pudieran verse obligados a cambiar en hojas de estilos, en lugar de en línea. Esto incluye el establecimiento de la fuente de una página.