Principio de degradación: Aplicación en Tractis

Pocas veces habrán escuchado esta frase: principio de degradación. Es un término que se empezó a utilizar relativamente hace poco en discusiones de desarrolladores de aplicaciones web. En diseño web, este principio muestra cómo un sitio web se va «degradando» de la forma más ecológica posible frente a navegadores antiguos. La idea básica de este principio es que todo el material que se produzca para un sitio no afecte la lectura mínima cuando se utilice un navegador especial, que no cumpla con los estándares. A medida que bajamos de versión de un navegador observaremos la cantidad de soporte técnico.

Lo cierto es que un sitio bien degradado permite a cualquier usuario con un navegador antiguo seguir utilizando las cosas de un sitio de forma vertical, sin estilos de por medio, sin efectos, o con los disponibles para ese navegador en concreto. Un usuario con un dispositivo móvil que no soporta CSS podría aprovechar mejor la información si está bien degradada. Las imágenes –relacionadas con contenido– seguirán viéndose, mientras que las imágenes «decorativas» pasarán a un segundo o tercer plano.

El planteo

Desde un principio en Tractis tratamos que esto se vaya cumpliendo. Diseñando sólo para un grupo de estándares y no para una empresa en concreto. Aunque ponemos esfuerzo en dar soporte a navegadores obsoletos, nos damos cuenta que es un sobretrabajo gigante y la calidad no es la que queremos dar. Por ello, desarrollar algo para un navegador en concreto sólo hace que el sitio se observe horriblemente en otros. Es mejor sujetarse a este tipo de principios por la igualdad de beneficios que ofrece en todas las gamas de utilización.

Cómo se soluciona

El proceso a nivel código para llevar este principio no es simple del todo. Primero programamos en varias capas lógicas: XHTML para estructurar datos, CSS para la disposición y aspecto de cada estructura, JS para controlar eventos. La página debería verse incluso, sin soporte de CSS, esa es la meta. Un usuario debe al menos poder leer con lo que tiene a mano en ese momento. Si esta regla no se cumple, la degradación no es satisfactoria, lo que impide que un usuario quede limitado. A medida que el usuario vaya comprendiendo esto, utilizando versión más actualizadas de navegadores, éste irá recibiendo premios: el sitio comenzará a visualizarse a la idea más general, lleno de detalles los cuales llamamos regalos. Por ejemplo, al entrar al sitio con navegadores que soportan la propiedad estándar text-shadow podrán disfrutar de los detalles y sombreados que la aplicación permite.

El efecto obtenido

Si quieren ver el principio de degradación en acción, entren a Tractis utilizando Firefox, Safari y Internet Explorer 7. A simple vista, la barra principal del programa es casi igual en las 3 versiones, pero aquellos usuarios que utilicen navegadores con mayor soporte de estándares podrán disfrutar de los detalles. Los usuarios de Safari, verán la barra como fue en un principio, intencionalmente diseñada, mientras que en Firefox, al no tener todavía soporte de sombras ésta no mostrará la propiedad y dará otro aspecto, degradando correctamente. La barra seguirá siendo la misma sólo que, ésta responde a las propiedades mínimas que pueda soportar el navegador.

Algunas capturas de la barra principal en todos sus grados de degradación:

untitled-1_03.png

Otro excelente ejemplo de principio de degradación son los botones de acciones. Dependiendo la versión y la marca de navegador que utilicéis observaréis cambios notables. De nuevo: el tope lo ofrecen aquellos navegadores que soporten las propiedades estándares border-radius y text-shadow mientras que el resto lo mostrará como pueda, degradando hasta donde les sea posible. En Safari, los botones tienen esquinas redondeadas y sombreados en los textos, resaltando las formas de un botón, mientras que en IE7 y Firefox la cosa cambia debido a su nivel de programación: en IE7 los bordes redondeados no existen, dejando los botones de forma cuadrada y en Firefox hasta depende que versión, los bordes no son tan redondos como deberían ser por el mismo nivel que tiene la funcionalidad como está programada.

untitled-1_07.png

Ventajas para Tractis y para nuestros usuarios

Este principio nos deja beneficios tanto a nosotros, como desarrolladores como a nuestros usuarios. Nosotros no trabajamos para Microsoft o la Fundación Mozilla, sino, que trabajamos para un set de estándares, y consideramos más importante tener un nivel de soporte alto de estándares que un nivel alto de soporte de navegadores obsoletos. Nuestro código es resumido, justo y rápido. La escalabilidad es gigante, en comparación con otros proyectos y podemos tomar cartas en el asunto en cualquier situación. Para nuestros usuarios, todos los beneficios de un código que sigue los estándares: velocidad de carga, soporte, degradación, aprovechamiento de recursos de forma correcta y más.

Cuando entréis a una aplicación y no la podáis usar porque no está bien degradada os acordaréis de los estándares y de este post en donde hablamos del principio de degradación.

Por Diego Lafuente
Guardado en: Diseño, Tractis | 2 comentarios » | 21 de Enero de 2008

2 Comentarios en “Principio de degradación: Aplicación en Tractis”

Gravatar de FS

FS
25 de Febrero de 2008 a las 1:32 pm    

Creo que lo del principio de degradación es la forma más correcta de encarar un proyecto web. Sin embargo tengo la sensación de que tomaron un camino un tanto fundamentalista. Ya que, desde mi punto de vista, muchas de las cosas que en su sitio solo funcionan en los navegadores más modernos, se podrían hacerse funcionar en la gran mayoría y sin dejar de lado los estándares.
Por ejemplo: si el diseñador imagino un menú con degradado y las fuentes con sombras ¿porque no usar imágenes de fondo (lo cual no va en contra de ningún estándar) para crear ese efecto y así lograr que todos los usuarios lo vean de esta manera, en vez del 5% que lo ve actualmente?.
Si bien utilizar la última última tecnología puede llevarnos a cumplir con todos estándares “teóricos”, puede terminar significando alejarse de los estándares prácticos y/o reales.

Gravatar de Diego Lafuente

Diego Lafuente
25 de Febrero de 2008 a las 1:50 pm    

FS, contesto a tu pregunta sobre el diseño de los menús utilizando degradados. Tractis tiene un sistema de temas para que cada usuario pueda tener los colores que desee en el sitio.

Al tener este nivel de personalización, nuestro sitio demanda una arquitectura utra-flexible, que sólo se puede lograr utilizando imágenes PNG con graduación de alpha para algunas zonas, de modo que, si nuestro diseño original tiene colores grises para el menú y el usuario los pone de color rojo el degradado fabrique el mismo efecto que haría si estuviera de otro color. Ahora bien, si queremos soportar navegadores antiguos, el problema es que soportan PNG alpha de una forma natural, hay que hacer muchos hacks y en muchos casos, afecta al resto de navegadores también y no funcionan de manera correcta. Deberíamos utilizar imágenes con degradados basados en los colores del tema original de Tractis, ergo, utilizaríamos grises. La aplicación se vería OK, pero cuando un usuario quiera cambiar un color es donde vendrían los primeros problemas: se verían imágenes con trozos grises o verdes del tema original de Tractis.

Yendo de esta forma evitamos muchos problemas de arquitectura, complejidad y ofrecemos una extensibilidad que no la ofrece, prácticamente, ningún sitio que permita personalizar los colores de su interfaz.

Deja tu comentario...

Los comentarios de este blog están moderados utilizando el “Plugin de Verificación de Identidad Tractis para WordPress“. La configuración es la siguiente: los comentarios realizados por usuarios autenticados con cualquiera de los certificados electrónicos soportados en Tractis aparecerán inmediatamente. Los comentarios no autenticados serán moderados y, por tanto, no aparecerán inmediatamente en la página al ser enviados.

Nuestra intención es conseguir un ambiente agradable donde las personas puedan comentar sin miedo a ser insultados o atacados. Estás en tu perfecto derecho de comentar anónimamente pero, por favor, no utilices el anonimato para decirle a alguien cosas que no le dirías en persona.

Las descalificaciones personales, los comentarios maleducados, los ataques directos, los insultos de cualquier tipo, los comentarios repetitivos sobre un mismo tema, o con varias identidades (astroturfing) o suplantando a otros comentaristas, etc. serán eliminados.

Más entradas en Negonation Blog