:: Accesibilidad. Pautas WCAG 1.0

WCAG 1.0 está compuesta por 14 pautas principales:

1.- Proporcionar alternativas equivalentes para el contenido sonoro y visual
Los textos alternativos al contenido visual o auditivo benefician a personas con alguna discapacidad visual o cognitiva, y a aquellos usuarios que deciden anular la descarga de imágenes y/o sonidos.

2.- No basarse sólo en el color
Los textos y gráficos deben comprenderse sin necesidad de ver los colores. El cumplimiento de esta pauta beneficia a personas con dificultades para ver los colores, y a usuarios que utilizan pantallas monocromáticas.

3.-  Utilizar marcadores y hojas de estilo de manera correcta
El control de la presentación de los contenidos se debe realizar con hojas de estilo en vez de con elementos y atributos de presentación, para evitar tener dificultades con herramientas de apoyo utilizadas por algunos usuarios.

4.- Identificar el idioma utilizado
Implica usar marcadores que faciliten la pronunciación o interpretación de texto abreviado o extranjero. Se debe indicar el idioma predominante en cada página y marcar aquellas expresiones que se encuentren en otra lengua. De esta forma, los sintetizadores de voz son capaces de cambiar su pronunciación en función del idioma, siempre y cuando se usen los marcadores apropiados.

5.- Crear tablas que se transformen correctamente
Las tablas sólo deben utilizarse para marcar información tabular (tablas de datos). El uso de tablas con otros fines crea dificultades para los usuarios que usan lectores de pantalla.
De la misma manera, las tablas mal estructuradas (por ejemplo, sin encabezados ) dificultan la lectura a usuarios que utilizan lectores de pantalla.

6.- Asegurarse de que las páginas que incorporan nuevas tecnologías se transformen correctamente
Una página basada en tecnologías modernas tiene que ser accesible sobre navegadores antiguos.

7.- Asegurar que el usuario tiene el control sobre los cambios de contenidos
El movimiento de los objetos o páginas, parpadeo o actualización automática, deben ser controlados por el usuario. Las personas con discapacidades cognitivas, visuales o mptrices no pueden leer textos en movimiento o interactuar con objetos móviles.

8.-  Asegurar la accesibilidad directa de las interfaces de usuario incrustadas
Cuando un objeto incrustado (Flash, Java) tiene su propia interfaz, ésta debe ser accesible. Si la interfaz del objeto incrustado no puede hacerse accesible, debe proporcionarse una solución alternativa accesible.

9.- Diseñar con independencia del dispositivo
Esta pauta establece que el usuario pueda interactuar con la aplicación de usuario o con el documento mediante dispositivos de entrada diversos: ratón, teclado, voz, ...
Si por ejemplo, un control de formulario sólo puede ser activado con un ratón u otro dispositivo apuntador, alguien que use la página con entrada de voz o teclado,  no será capaz de completar el formulario.

10.- Utilizar soluciones provisionales
En muchos casos, las alternativas accesibles sólo son imprescindibles hasta que los antiguos navegadores y los productos de apoyo se actualicen y operen correctamente.

11.- Utilizar la tecnologíay pautas W3C
Cuando no se pueda usar una tecnología W3C, o al usarla se obtengan materiales que no se transformen correctamente, se debe proporcionar una versión alternativa. Se recomiendan las tecnologías W3C por incluir características accesibles, por estar desarrolladas en un proceso abierto consensuado y porque se utilizan como base de muchas legislaciones para crear contenidos accesibles.

12.- Proporcionar información de contexto y orientativa
Esta información ayuda al usuario a comprender páginas o elementos complejos. Se deben agrupar los elementos y ofrecer información contextual sobre la relación entre elementos.

13.- Proporcionar mecanismos claros de navegación
Estos mecanismos facilitan a todos los usuarios la búsqueda de aquella información que necesitan, por ejemplo: mapa web, ayuda, barras de navegación, etc.

14.-  Asegurarse de que los documentos sean claros y sencillos
La información escrita puede ser difícil para personas con discapacidad cognitiva o con dificultad de aprendizaje, y para personas sordas o que hablan en una lengua extranjera.

:: jQuery. Funciones Callback

Javascript se ejecuta línea a línea; sin embargo -al trabajar con efectos- la siguiente línea de código podría ejecutarse antes de que finalizara el efecto, lo que podría ser fuente de errores.
Para evitar este caso, podemos crear una función "Callback", la cual es ejecutada después de que termine el efecto.

La sintáxis típica es: $(selector).hide(velocidad, funcionCallback);


En este caso, el "alert" se ejecuta una vez haya finalizado el efecto.

$("button").click(function(){
  $("p").hide("slow", function(){
    alert("La línea se oculta ahora");
  });
});

En el siguiente ejemplo - sin utilizar funciones "callback"- el "alert" se ejecuta antes de que finalice el efecto.

$("button").click(function(){
  $("p").hide(1000);
  alert("La línea se oculta ahora");
});

:: Alfresco. Aumentar el número de categorías mostradas

En esta prueba de concepto, la situación es la siguiente:
Tenemos definidas más de 100 categorías, pero a la hora de editar las propiedades de un contenido "Classificable", en la lista de categorías no nos aparecen más de 100 categorías.

En este caso, el número de elementos a mostrar para las categorías, está definido en la vista denominada: "picker.inc.ftl" ubicada en la ruta: "{Alfresco}\tomcat\webapps\awe\WEB-INF\classes\alfresco\site-webscripts\org\alfresco\components\form\controls\common"

El parámetro que controla el número de elementos a mostrar es: "maxSearchResults": ${field.control.params.maxSearchResults!'100'}"

Para llevar a cabo la prueba, sustituiremos el valor: "100" por "5" y guardaremos la plantilla de freemaker (.ftl).

Como podemos ver en la siguiente captura de pantalla, el selector de categorías únicamente nos muestra 5 elementos; de esta manera, si necesitásemos mostrar más de 100 elementos, este sería el valor a modificar.

:: Alfresco. Envío de notificaciones a un grupo

En esta ocasión -como prueba de concepto- lo que queremos hacer es enviar un correo electrónico al grupo de "Contabilidad", cada vez que se suba una nueva factura a Alfresco.

De esta manera, tendremos definido un grupo "Contabilidad" -compuesto por varios integrantes- a los que se les notificará por correo electrónico cada vez que se suba un documento a una determinada carpeta, por ejemplo: "Facturas".
Sobre la carpeta "Facturas" definiremos una regla de contenido, de forma que cada vez que se suba un nuevo documento, se ejecute un script, al que llamaremos: "notificarfactura.js".

El contenido de este javascript, sería algo similar a lo siguiente:

### Notificar con plantilla
function sendMail()
{
    var mail = actions.create("mail");
    mail.parameters.to_many = "GROUP_site_Contabilidad";
    mail.parameters.subject = "Nueva factura disponible: " + document.name;
    mail.parameters.template =
    companyhome.childByNamePath("Data Dictionary/Email Templates/Notify Email Templates/notify_user_email.html.ftl");
    mail.execute(document);
}
sendMail();

### Notificar sin plantilla
function sendMail()
{
    var mail = actions.create("mail");
    mail.parameters.to_many = "GROUP_site_Contabilidad";
    mail.parameters.subject = "Nueva factura disponible: " + document.name;
    mail.execute(document);
}
sendMail();

:: CSS. Sustituir imagen por css

En alguna ocasión necesitamos cambiar una imagen por otra en nuestras maquetaciones web.

Existen distintas alternativas, pero una de ellas sería mediante el uso de CSS. 








Por ejemplo, en un portal Liferay 6.2 al añadir el componente: "Búsqueda de contenido web", el aspecto del buscador sería el siguiente:

Para adaptarlo al diseño del portal, podríamos aplicar los siguientes estilos css, en los que se incluye la sustitución de la imagen "de la lupa", por una más acorde a la línea general del diseño:

.portlet-journal-content-search input.lfr-search-keywords {
    height: 61px;
    line-height: 61px;
    padding: 0;
    width: 100%;
    border-color: #e0e5e8;
    text-indent: 10px;
}

.portlet-journal-content-search .lfr-search-button {
    position: relative;
    left: 0;
    width: 80% !important;
    padding-left: 115px;
    height: 61px;
    background: url(/netic360-theme/css/images/search-icon-big.png) scroll no-repeat center center white;
    cursor: pointer;
    background-color: #c30e2e;
    top: -5px;
    
    box-sizing:border-box;
    overflow:hidden;
}

Tras aplicar estos estilos el aspecto sería similar al siguiente: