Blog de Jorge Pedraza

abril 5, 2010

Globalización y Accesibilidad en ASP.NET

GLOBALIZACIÓN

Es el mecanismo mediante el cual una aplicación puede extender su uso de forma nativa con personas que vive en diferentes parte del mundo y que habla diferente idioma. Por esta razón ASP.NET suministra la infraestructura para crear aplicaciones Web que se ajuste automáticamente a idiomas y formatos, conforme al usuario es privilegiado con la cultura e idioma propio.

La Globalización en ASP.NET es tratable a través de 3 puntos Claves:

  1. Archivo de Recursos ASP.NET.
  2. Mejores Practicas del Diseño HTML.
  3. Configuración de la Cultura

Archivo de Recursos ASP.NET

ASP.NET utiliza archivos de recursos compatible con varios Idiomas. Este contiene el texto de un idioma especifico para un pagina o un sitio completo.

Hay dos tipos de recursos en ASP.NET: Local y Global.

  • Recursos Local: Son especifico para una simple pagina Web y debe ser usado para suministrar versiones de un pagina Web en diferentes Idiomas. Esto son almacenado en el subdirectorio  App_LocalResources que esta localizado a raíz de la solución ASP.NET.

Los archivos de recursos son nombrado usando el formato: Pagina.aspx.Idioma.resx. Ejemplo: Default.aspx.en.resx (Ingles), Default.aspx.es.resx (Español), Default.aspx.es-mx.resx (Español-México).

Los Archivos de Recursos Local, se puede generar de forma automática, usando la opción Generar Recurso Local que esta situado en el menú de la opción herramienta de la IDE.

Nota Importante: La opción Genera Recurso Local por defecto no esta disponible en la edición Visual Web Developer.

  • Recursos Global: Se puede leer desde cualquier pagina o código que esta en el sitio Web. Solo debe usar esto cuando se necesita acceder a un simple recurso desde múltiple pagina Web. Estos recursos debe ser almacenado en el subdirectorio App_GlobalResources que esta localizado a raíz de la solución ASP.NET. Estos recursos son también archivos con extensión .resx  y el régimen del esquema de nombramiento del archivo es el mismo que el de los archivos de recurso local.

Acceso a valores de recursos mediante programación: Para acceder a determinado valor de un recurso, se utiliza la sintaxis: Resources.ArchivoRecurso.Recurso.

Label1.Text = Resources.LocalizedText.Saludos ‘Visual Basic
Label1.Text = Resources.LocalizedText.Saludos; //C#

También existe dos métodos llamados GetGlobalResourceObject y GetLocalResourceObject que devuelve determinado recurso según el ámbito, utilizando la referencia cultural especificada en la propiedad CurrentUICulture.

Visual Basic
Button1.Text = GetLocalResourceObject("Button1.Text").ToString()
Image1.ImageUrl = Ctype(GetGlobalResourceObject("WebResourcesGlobal","LogoUrl"),String)
//C#
Button1.Text = GetLocalResourceObject("Button1.Text").ToString();
Image1.ImageUrl = (String)GetGlobalResourceObject("WebResourcesGlobal","LogoUrl");

Mejores practica de Diseño HTML

La globalización puede ser simple como remplazar texto con texto de otro idioma y reformatear símbolos y números. Sin embargo algunos Idiomas, como el Árabe, requiere diferentes diseños porque el textos fluye de derecha a izquierda. Para permitir que las paginas Web sea usado por la variedad más amplia de culturas, sigua estos consejos:

  • Evita usar tamaños y posicionamiento absoluto para los controles. En lugar de especificar ubicaciones de controles en pixeles, permite que el navegar Web posiciones a ellos automáticamente. Puede hacer esto simple no especificado una ubicación o tamaño. La vía mas fácil para determinar sí cualquier control tiene posición absoluta es viendo el código fuente de una pagina Web. El siguiente ejemplo, ilustra un control que usa posicionamiento absoluto (El cual debe ser evitado)

<div id=idlabel style= “position: absolute; left:0.98em; top: 1.21em; width: 4.8em; height: 1.21en;”>

  • Usa el alto y ancho completo de un formulario. Aunque muchas sitios Web especifica un numero de pixeles para el ancho de un formulario o columna de tabla, Este puede crear problema de formato para idiomas que usa mas letras o un diseño de texto diferente. En vez de indicar un ancho especifico, usa 100 porciento de el ancho de el navegador Web, como el siguiente ejemplo demuestra:

<table width="100%" >

  • Elementos de tamaño relativo con el tamaño completo del formulario. Cuando necesita suministrar tamaño a un control, use proporción relativa para permitir que el formulario completo sea redimensionado fácilmente. Puede lograr esto usando expresiones de hoja de estilo, como lo demuestra el siguiente ejemplo:

<div style=’height: expression(document.body.clientHeight /2); width: expression(document.body.clientWidth / 2);’>

  • Use como separado celdas de tabla para cada control. esto permite que el texto se ajuste de forma independiente y asegura una alineación correcta para las culturas en que el diseño del texto fluye de izquierda a derecha.
  • Evita suministra la propiedad NoWrap en tablas. Estableciendo HtmlTableCell.NoWrap igual a true deshabilitas el ajuste de palabras. aunque podría trabajar bien en su idioma nativo, pero en otros idiomas diferentes puede requerir más espacio y podría no mostrarse correctamente.
  • Evita especificar la propiedad Align en tablas. Estableciendo la alineación a izquierda o derecha en un celda, puede anular el diseño en cultura que usa texto de derecha a izquierda. Por tanto evita esto.

Configuración de la Cultura

En cualquier pagina Web ASP.NET, usa dos propiedades de pagina diferente para establecer la cultura:

  • Culture Determina el resultado de las funciones dependiente de una cultura, como la fecha, numero y formato de moneda. Solo puede definir el objeto Culture con culturas especifica que define requerimientos tanto de formato regional e idioma como “es-MX” o “fr-FR”. No puede definir el objeto Culture con culturas neutrales que define solo un idioma, tal como “es” o “fr”.
  • UICulture Determina cual de los recursos locales o globales son cargado para la pagina. Puede definir UICulture con tanto culturas especificas o neutral.

Generalmente esta propiedades son usada dentro del cuerpo del método InitializeCulture, el cual se define en determinada pagina sobrescribiendo dicho método. A continuación se muestra un ejemplo donde se asume que un DropDownList1 contiene un la lista de cultura:

Visual Basic
Protected Overloads Overrides Sub InitializeCulture()
If Not (Request.Form("DropDownList1") is Nothing) then
UICulture = Request.Form("DropDownList1") ‘Define el Idioma
Culture = Request.Form("DropDownList1") ‘Define el formato (requiere un cultura especifica)
End If
MyBase.InitializeCulture()
End Sub

//C#
protected override void InitializeCulture()

if (Request.Form["DropDownList1"] != null) 

UICulture = Request.Form["DropDownList1"]; //Define el idioma 
Culture = Request.Form["DropDownList1"];  //Define el Formato (requiere una cultura especifica) 
}
base.InitializeCulture();
}

También puede declarativamente establecer la cultura para una pagina Web o sitio Web:

  1. <globalization uiculture=”es” culture=”es-MX” />  A nivel de Web.Config
  2. <Page uiculture=”es” culture=”es-MX” %>          A nivel de Pagina ASPX

Finalmente se puede obtener información completa de la cultura llamando el método System.Globalization.CultureInfo.GetCultures el cual se le pasa por parámetro un enumerado CultureTypes, que especifica que subconjunto de culturas desea usar. los valores de CultureTypes son:

  • AllCultures Este representa todas las culturas incluida con el .NET Framework, incluyendo tanto culturas especifica y neutral.
  • NeutralCultures solo suministra culturas neutrales en un idioma y no definiciones de formato regional.
  • SpecificCultures suministra culturas especificas tanto definiciones de formato regional e idioma.

Para mayor enfoque del tema Globalización en ASP.NET, ver Código Fuente: ASPNETGlobal.

 

ACCESIBILIDAD

Es el mecanismo que permite a los usuarios con diferentes dispositivos de entradas y pantallas, interactúen con determinada aplicación Web. Los controles de ASP.NET son diseñado con accesibilidad en mente. Sin embargo los desarrolladores debe aun definir propiedades especifica para mejoras la accesibilidad de paginas Web.

La Accesibilidad en ASP.NET es tratable a través de 4 puntos claves:

  • Pautas de Accesibilidad Publica
  • Controles de ASP.NET que soporta Accesibilidad
  • Accesibilidad Visual
  • Accesibilidad de Entrada de Usuario mediante Formulario.

Pautas de Accesibilidad Publica

El consorcio World Wide Web (W3C) es la encargada de crear y organizar los estándares Web. A través de la iniciativa de Accesibilidad Web (WAI), la W3C ha creado las Pautas de Accesibilidad de Contenido Web (WCAG), para mayor Información visita (http://www.w3.org/WAI/).

Además el gobierno de Estados Unidos define en la sección 508 de la Ley de Rehabilitación (Rehabilitation Act) las normas de accesibilidad, que son similares a las directrices WCAG.

Controles de ASP.NET que soporta Accesibilidad

Los controles de ASP.NET esta diseñado para ser accesible por defecto. Los controles como:

  • Login, ChangePassword, PasswordRecovery, CreateUserWizard

Usan cajas de texto con etiquetas asociada para ayudar a los usuarios que usa lectores de pantalla o que no usa mouse. Esto también usa controles de entrada con índice de tabulación para hacer mas fácil la entrada de datos sin mouse.

Algunos controles de ASP.NET soporta accesibilidad que permite a usuario saltar texto de enlace. Los lectores de pantalla lee el texto de enlace de un pagina de arriba a abajo, permitiendo a usuarios seleccionar un enlace especifico. Los controles de ASP.NET que incluye enlaces de navegación suministra la propiedad SkipLinkText, que esta habilitado por defecto y permite a usuarios saltar más allá del texto del enlace. Los controles CreateUserWizard, Menu, SiteMapPath, TreeView y Wizard soporta enlaces saltados. Estos enlaces no son visible a usuarios que ven la pagina con el navegador tradicional. Por ejemplo, el siguiente código fuente HTML (el cual ha sido Simplificado ligeramente) es generado por defecto cuando agrega un control Menu a un pagina Web:

<a href =”#Menu1_SkipLink”>
<img alt= “Enlaces de Navegación de salto” src=”/WebResource.axd?d=_902Lm"” width=”0” height=”0”/>
</a> … Enlace menú.. <a id=”Menu1_SkipLink”></a>

El HTML demuestra como el archivo de imagen de cero pixel con el texto alt “Enlaces de navegación de salto” vincula una ubicación sobre la pagina inmediatamente después del menú. Mientras el navegador tradicional no muestra la imagen de cero pixel, los lectores de pantalla lee el texto alt y permite a usuarios saltar más allá del menú.

Accesibilidad Visual

Muchos usuarios tiene herramientas para remplazar o suplir un monitor tradicional, incluyendo lectores de pantalla, magnificadores y configuración visual de alto contraste. Para hacer su aplicación accesible como sea posible usando estas herramientas, siga la estas pautas:

  • Describe cada imagen suministrando el texto alt usando la propiedad AlternateText.
  • Use colores solido para fondo y use colores contrastado para texto.
  • Crea diseño de pagina flexible que escale correctamente cuando el tamaño del texto es aumentado.
  • Fija la propiedad Table.Caption para una descripción de la tabla.
  • Suministra un vía para identificar encabezado de columnas.
  • Evita definir tamaño de fuente especifica.
  • Evita secuencia cliente requerida.

Accesibilidad de Entrada de Usuario mediante Formulario

Para hacer su aplicación sea lo más accesible posible usando el teclado, siga estas pautas:

  • Establecer la propiedad DefaultFocus para que un formulario coloque el cursor en una ubicación lógica donde inicia normalmente la entrada de datos.
  • Defina el orden de tabulación en un vía lógica así que los usuarios puede completar formularios sin esta usando mouse.
  • Suministre texto de enlace útil.
  • Defina teclas de acceso directo para controles botones estableciendo la propiedad AccessKey.
  • Use controles Etiqueta para definir teclas de acceso para cajas de textos.

<asp:Label AccessKey=”N” AssociatedControlID=”TextBox1” ID=”Label1” Text=”<u>N</u>ame:”>
</asp:Label>&nbsp;<asp:TextBox ID=”TextBox1” runat=”server” />

  • Use el control Panel para crear subdivisiones en formularios y define la propiedad Panel.GroupingText con una descripción de controles en aquel panel.

<form method=”post” action=”Default.aspx” id=”form1”>
<div id=”Panel1” style=”height:50px;width:125px;”>
<fieldset><legend>Información de Envio</legend>
<input name=”TextBox2” type=”text” id=”TextBox2” />
</fieldset></div>
<div id=”Panel12” style=”heught:50px;width:125px;”>
<fieldset><legend> Información de Faturación</legend>
<input name=”TextBox1” type=”text” id=”TextBox1” />
</fieldset></div>
</form>

  • Especifique significativamente mensajes de error en la propiedad ErrorMessage y Text de controles validadores.

Finalmente con Visual Studio se puede comprobar el nivel de accesibilidad de un pagina Web o aplicación Web completa, con el cumplimiento de las pautas WCAG y la sección estándar 508, usando la opción comprobar accesibilidad que esta situado en el menú de la opción herramienta de la IDE.

Nota Importante: La opción Comprobar Accesibilidad por defecto no esta disponible en la edición Visual Web Developer.

Para mayor enfoque del tema Accesibilidad en ASP.NET, ver Código Fuente: ASPAccesible

4 comentarios »

  1. muy interezante una pregunta como se utilizaria para definir el idioma en menu?? se puede utilizar un archivo xml pero ser realizaria uno por cada idioma o como se armaria?

    Comentario por fjvelazco — septiembre 1, 2011 @ 11:22 pm | Responder

    • Hola fjvelazco.

      Gracias por el comentario. Con respecto a tu pregunta: es exactamente es como tú lo comenta. Debe crear un archivo de recurso por cada Idioma en juego.

      Aquí Coloco un ejemplo para que lo revise: Codigo fuente ASP.NET 4.0 VB

      Espero que esto sea de ayuda!
      Cualquier cosa, avísame!
      Saludos.

      Comentario por jorgepedraza — septiembre 18, 2011 @ 12:01 pm | Responder

  2. Muchas gracias, me sirvió de mucho

    Comentario por adrianjamv — diciembre 1, 2011 @ 4:09 pm | Responder


RSS feed for comments on this post. TrackBack URI

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Crea un blog o un sitio web gratuitos con WordPress.com.

A %d blogueros les gusta esto: