<img alt="Liferay" src="http://cdn.www.liferay.com/osb-theme/images/custom/heading.png" width="146" height="36" />

Desde hace algún tiempo ando a vueltas con Liferay y uno de los mayores defectos que le encuentro es la complejidad del diseño gráfico, fundamentalmente para aquellos que necesitamos cumplir con normas de accesibilidad. Este problema se ve agravado desde que los portlets se pintan mediante peticiones AJAX.

En comparación con el HTML que renderizan otras herramientas de portal, el de Liferay es, y lo digo con cariño, una guarrada:

Fuerte dependencia de Javascript
Abundancia de Tablas y otros elementos HTML con usos desaconsejados
Estilos incrustados en pagina
Desorden en las clases css
Redirecciones con Javascript
...

El problema no es solo la accesibilidad, es un HTML caótico y pesado, es no poder darle a 'ver código fuente' y estar orgulloso del HTML que genera mi herramienta, se traduce en problemas con buscadores y otros efectos secundarios.

¿Se ha detectado en la comunidad este problema? ¿Hay algun tipo de iniciativa para solucionarlo?

De no ser así propongo, desde este post ponernos manos a la obra, primero identificando los problemas y posteriormente buscando e implementando soluciones.

Un saludo desde España

RE: Diseño gráfico y normas de accesibilidad

April 19, 2007 1:29 AM

Answer

LIFERAY STAFF

Rank: Liferay Legend

Posts: 2658

Join Date: August 31, 2006

Hola Ramón,

Gracias por los comentarios. Este es un problema identificado aunque bastante costoso de arreglar. Ya hay algunas personas trabajando en ello y en la versión 4.3 se verán algunos resultados pero toda ayuda será muy bienvenida.

La parte en la que más se está avanzando es en 'modernizar' el código HTML. La parte JavaScript es más compleja y los esfuerzos actuales van en la línea de modularizarlo al máximo posible y usar siempre una librería (jQuery) que hace bastante bien la degradación cuando algunas funciones no están disponibles.

Como parte de todo esto, también se quiere incluir en Liferay un theme que cumple con la especificación de la WAI.

Por último comentarte que la carga via AJAX de los portlets puede desactivarse con una propiedad de portal(-ext).properties:

layout.parallel.render.enable=true

Mark as an Answer

RE: Diseño gráfico y normas de accesibilidad

April 19, 2007 9:45 AM

Answer

Rank: Regular Member

Posts: 127

Join Date: July 26, 2006

Imagino que entonces los layouts estarán modernizados y realizados con capas (etiquetas div) en lugar de tablas? He trabajado algo en eso, y haciendo tests de accesibilidad, se gana bastante.

Un saludo.

Mark as an Answer

RE: Diseño gráfico y normas de accesibilidad

April 20, 2007 3:29 AM

Answer

LIFERAY STAFF

Rank: Liferay Legend

Posts: 2658

Join Date: August 31, 2006

Ahora mismo aún está hecho con tablas, pero seguro que está en el Roadmap.

Dices que tu ya has estado haciendo algún avance en esto. ¿Has pensado en contribuir tus plantillas?

Mark as an Answer

RE: Diseño gráfico y normas de accesibilidad

April 21, 2007 4:27 PM

Answer

Rank: Regular Member

Posts: 127

Join Date: July 26, 2006

¿Cómo podría hacerlo?

En realidad son plantillas que yo he creado, (no las que trae Liferay por defecto), pero creo que las de Liferay son fácilmente "traducibles" a div.

Un saludo.

Mark as an Answer

RE: Diseño gráfico y normas de accesibilidad

April 23, 2007 2:32 PM

Answer

LIFERAY STAFF

Rank: Liferay Legend

Posts: 2658

Join Date: August 31, 2006

Hola Ignacio,

Le he preguntado a Nate (que está trabajando ahora en esto) y me ha dicho que si le interesaría ver lo que has hecho. En particular me comenta que ha tenido problemas con hacerlo funcionar bien con el Drag&Drop de portlets en algunos navegadores (por ejemplo IE6). Si quieres prueba primero con dos o tres plantillas.

Para contribuir sigue las instrucciones de http://wiki.liferay.com/index.php/How_to_contribute_to_Liferay

Mark as an Answer

RE: Diseño gráfico y normas de accesibilidad

May 9, 2007 8:19 AM

Answer

Mauricio Cubillos

Rank: Regular Member

Posts: 118

Join Date: April 18, 2007

Hola Ingancio, me gustaría saber como te ha funcionado eso de cambiar las tablas de los templeates layouts por div, funciona en todos los navegadores?, funciona con el drag de portlets o ocasiona problemas?

Gracias por tu respuesta

Mark as an Answer

RE: Diseño gráfico y normas de accesibilidad

May 16, 2007 8:27 AM

Answer

Rank: Regular Member

Posts: 127

Join Date: July 26, 2006

Funciona perfectamente.

He cambiado de empresa y por eso no entro tanto por aquí (no uso Liferay en la nueva emoticon

) sin embargo, os pasaré las plantillas de los divs. Pretendo seguir utilizando Liferay aunque sea en mi propia casa, porque me parece un gran portal... así que seguiré por el foro a menudo.

Las plantillas las adjuntaré en cuanto llegue a casa...

Mark as an Answer

RE: Diseño gráfico y normas de accesibilidad

June 6, 2007 3:03 PM

Answer

Mauricio Cubillos

Rank: Regular Member

Posts: 118

Join Date: April 18, 2007

Ignacio, no se si soy un poco "intenso", pero podrias pasarme las plantillas templeates usando DIV en vez de tablas?

o me dices que me falta poner, por que me sigue apareciendo todo en una columna, (hay que ponerle algun atributo?)

Mark as an Answer

RE: Diseño gráfico y normas de accesibilidad

March 31, 2008 12:56 AM

Answer

Rank: Regular Member

Posts: 127

Join Date: July 26, 2006

Aunque sea tarde...

Vamos a ver, en la versión 4.2 yo tenía una plantilla como esta, y funcionaba el drag & drop al menos en firefox e internet explorer:

<div class="columns-1-2" id="content-wrapper">
<div valign="top" style="float:left;">
$processor.processColumn("column-1")
</div>
<div valign="top" style="float:right;">
$processor.processColumn("column-2")
</div>
</div>

Acabo de probar una plantilla similar con liferay 4.4.2 y no funciona el drag and drop más que en la primera columna... Seguiré trabajando en este tema para intentar arreglarlo.

Las etiquetas style evidentemente no aparecerán ahí, habrá un css para cada uno de los divs, de forma que incluya tanto el float como el ancho que le queramos dar a cada capa. Lo pongo para aclarar.

Ya digo, intentaré solucionar este tema lo antes posible y si consigo algo lo pongo por aquí.

Un saludo.

Mark as an Answer

RE: Diseño gráfico y normas de accesibilidad

March 31, 2008 1:17 AM

Answer

Iván Santamaría

Rank: New Member

Posts: 2

Join Date: March 31, 2008

Buenos días;

Soy nuevo en esto de Liferay. Estamos investigando la inclusión de liferay y portlets en un proyecto existente. Como son proyectos para la actividad pública me es de vital importancia saber si los portlets creados son accesibles.

Me han comentado que la parte admin no lo sería pero en la parte cliente en principio no habría problema. He estado leyendo este hilo pero tampoco lo tengo muy claro. Voy a seguir pasando pruebas y empapámdome de la cultura Liferay. Por lo que veo el foro funciona bastante bien.

Muchas gracias

Mark as an Answer

RE: Diseño gráfico y normas de accesibilidad

March 31, 2008 3:14 AM

Answer

LIFERAY STAFF

Rank: Liferay Legend

Posts: 2658

Join Date: August 31, 2006

Hola Ignacio, Ivan,

Ignacio, si no consigues hacerlo funcionar dímelo y lo hablo con Nate (el diseñador de los nuevos themes). También si ves algún fallo coméntamelo y lo intento arreglar.

Ivan, si creas una web que fundamentalmente tiene contenido o portlets propios es razonablemente fácil hacer que sea accesible. En el catálogo de plugins hay algún ejemplo de tema de apariencia (theme) accesible. Si después se añaden ciertas herramientas, como los foros, no validará, fundamentalmente por el uso de JavaScript.

Desde Liferay queremos hacer una revisión de todos estos portlets (o los más importantes) y corregirlos por completo (la estimación más ambiciosa es conseguirlo para la versión 5.1). Por ello toda ayuda notificando problemas y sugiriendo posibles soluciones será muy bienvenida emoticon

Mark as an Answer

RE: Diseño gráfico y normas de accesibilidad

March 31, 2008 3:20 AM

Answer

Iván Santamaría

Rank: New Member

Posts: 2

Join Date: March 31, 2008

OK
Iré comunicando todos mis progresos así como todo el feedback que me sea posible en cuanto profundice en el uso de Liferay asícomo cuando se inicie el desarrollo.

Muchas gracias por la prontitud de la respuesta.

Mark as an Answer

RE: Diseño gráfico y normas de accesibilidad

April 2, 2008 12:54 AM

Answer

Rank: Regular Member

Posts: 127

Join Date: July 26, 2006

Hola Jorge,

¿Me podrías decir en el catálogo de plugins cuál de los theme es accesible? Es que ninguno tiene esa etiqueta y no consigo encontrarlo.

Un saludo.

Mark as an Answer

RE: Diseño gráfico y normas de accesibilidad

April 2, 2008 5:34 AM

Answer

Juan José Troyano Bravo

Rank: Junior Member

Posts: 30

Join Date: February 20, 2008

Hola a todos,

aprovechando el hilo, también estaría interesado en conocer tanto temas como portlets accesibles, así como su gestión (añadir/eliminar contenidos) de forma accesible también. ¿Hay algún ejemplo?

Gracias y saludos.

Mark as an Answer

RE: Diseño gráfico y normas de accesibilidad

April 13, 2008 3:09 AM

Answer

LIFERAY STAFF

Rank: Liferay Legend

Posts: 2658

Join Date: August 31, 2006

Hola Ignacio,

El siguiente Theme es accesible: Section 508 5.0.0.1. "Section 508" es la normativa americana de accesibilidad y sería el equivalente a nuestra norma UNE (que a su vez hace referencia a la W3C WAI).

Mark as an Answer

RE: Diseño gráfico y normas de accesibilidad

April 14, 2008 7:13 AM

Answer

Rank: Regular Member

Posts: 127

Join Date: July 26, 2006

Muchas gracias Jorge!

Decir también que por mi cuenta modifiqué el layout de liferay (uno de ellos) para hacerlo accesible y sin tablas, y conseguí llevarlo a cabo, únicamente tengo un problema, y es que las imágenes o cuadros que se muestran cuando estás haciendo drag & drop de un portlet, no me aparecen colocadas, sino que aparecen todas las áreas en una columna (con diferentes "celdas").

Imagino que esa imagen está en algún lugar, pero todavía no di con ella, en cuanto la encuentre postearé algo aquí.

Un saludo.

Mark as an Answer

RE: Diseño gráfico y normas de accesibilidad

August 27, 2008 1:14 AM

Answer

Nacho A S

Rank: Junior Member

Posts: 32

Join Date: July 23, 2008

Hola,

Jorge, comentas en uno de tus posts que se intentaría que la versión 5.1 fuese accesible. ¿Cómo ha ido el tema?¿Se ha conseguido?

Otra cosa más, he buscado algo sobre los cambios de la versión 5.1 con respecto a la 5.0, que es la que estoy utilizando, pero sólo encuentro cosas sueltas. ¿Alguien sabe de algún documento donde se especifiquen las novedades de la 5.1.0 y/o 5.1.1? O incluso si alguien conoce los cambios sin estar en ningún documento, cualquier indicación o guión de cambios me sería de gran utilidad.

Gracias, un saludo.

Mark as an Answer

RE: Diseño gráfico y normas de accesibilidad

August 27, 2008 2:06 AM

Answer

LIFERAY STAFF

Rank: Liferay Legend

Posts: 2658

Join Date: August 31, 2006

Hola Nacho,

Las novedades de la versión 5.1 están descritas en New Features in Liferay Portal v5.1.

Esta versión ya contiene bastantes mejoras de accesibilidad, pero por ahora he preferido ser cauto y no anunciarlo mucho porque llevará algún tiempo detectar y corregir todos los posibles fallos que quedarán. En lo que hemos trabajado ha sido fundamentalmente en conseguir que un portal hecho con Liferay con el tema por defecto pase el nivel AA. Para ello se han hecho mejoras en dicho tema de apariencia y en varios de los portlets principales (aún no todos): portlets de navegación, foros, contenidos (aunque el creador del contenido también tiene que hacer su parte), wiki, ...

Por ahora nos hemos centrado en conseguir accesibilidad para usuarios anónimos o aquellos que aunque registrados fundamentalmente consulten información. El siguiente reto importante sería que también se pueda participar (por ejemplo en los foros o wikis) de forma accesible.

Acabo de crear una categoría en los foros para tratar temas específicos de accesibilidad. Os invito a todos los interesados a crear posts en él sobre fallos relacionados con accesibilidad que encontreis a partir de la versión 5.1 y sobre todo propuestas sobre cómo solucionarlos.

Mark as an Answer

RE: Diseño gráfico y normas de accesibilidad

October 21, 2009 2:41 AM

Answer

Juan Manuel Leal

Rank: New Member

Posts: 20

Join Date: October 20, 2009

Buenas, yo quería información sobre la accesibilidad en la versión 5.2.3 de Liferay, está ya mejorada al 100%.Cumple laespecificación AA en todos los aspectos?

Mark as an Answer

RE: Diseño gráfico y normas de accesibilidad

November 8, 2009 9:08 AM

Answer

Julio Camarero

LIFERAY STAFF

Rank: Liferay Legend

Posts: 1572

Join Date: July 15, 2008

Hola Juan Manuel,

AA de wcag1.0 o AA de wcag2.0? Las limitaciones son muy diferentes.

En este hilo tienes más información al respecto.

un saludo!

Julio Camarero
Liferay España