El diseño es el código. Miguel Ripoll.

http.jpgEl congreso El futuro del diseño web, celebrado en Londres, ha marcado las tendencias sobre hacia dónde va la industria del diseño web. Código limpio, accesibilidad, usabilidad y los estándares del Consorcio W3C son el camino por el que la industria debe ir, a pesar de los esfuerzos de las grandes empresas por vender su visión cerrada y propietaria de la Red.

LOS DOS PRINCIPALES patrocinadores de la reunión de Londres, Adobe y Microsoft, que promocionan Flash y Silverlight, respectivamente, recibieron durante sus presentaciones una reacción del público bastante tibia, por no decir escéptica: Flash, una herramienta muy útil para la difusión de audio y vídeo, se usa por regla general para construir absurdos sitios de diseño, inaccesibles, poco usables y que devoran ancho de banda con pesadas intros que no sirven más que para halagar el ego de quienes los construyen.

De Silverlight se teme que sea otro patinazo de la empresa de Bill Gates en el mundo de Internet, como lo fue en su tiempo el navegador Explorer 6, cuyos defectos (incompatibilidad con las normas del consorcio W3C, renderización equivocada del código, etcétera) la comunidad lleva sufriendo desde hace años.

Lo que verdaderamente interesó a los asistentes es aprender nuevas técnicas de programación y desarrollo, y empaparse de los trucos de los maestros del diseño internacional. Lo que se ha sacado en claro es que el diseño web es, principalmente, código. Un diseñador web hoy en día debe saber programar. La época de los diseñadores gráficos reciclados a Internet ha pasado.

El perfil profesional que emerge con fuerza es híbrido: una mezcla de artista visual y tecnólogo, o como define certeramente el término anglosajón, arquitecto de la información. O arquitecta, porque en una profesión hasta ahora casi exclusivamente masculina, cada vez se ven más mujeres. Este año, aunque aún en minoría, tres conferenciantes de la reunión de Londres eran mujeres (una de ellas, la diseñadora Larissa Meek, finalista de Miss América y muy conocida en Estados Unidos como polémica protagonista de un casposo reality televisivo).

Jina Bolton, una de las mujeres más influyentes en la industria, asesora del W3C y autora de libros de referencia sobre código accesible, opina que el problema es que las empresas no entienden aún para qué sirve Internet de verdad: “Es todavía un medio nuevo, y muchos lo entienden como una extensión de los tradicionales. Por eso vemos tantas web tipo folleto que no sirven para nada. Quieren parecer cool y usan Flash con muchas animaciones y efectos inútiles cuando de lo que se trata es de comunicar y de ofrecer al usuario herramientas que le sirvan. Hay que educar a los responsables de las empresas”.

Paul Boag, director del congreso, abunda en lo mismo: “La culpa es de los diseñadores web. Explicamos mal en qué consisten las ventajas económicas de Internet para las empresas, y a veces no quedamos en la mera apariencia. Esto está cambiando poco a poco, debido sobre todo a una legislación cada vez más estricta sobre accesibilidad, pero también a que los sitios son cada vez más complejos y tienen más cantidad de información, que hay que organizar y ofrecer al usuario de forma sencilla y accesible”. “Debería denunciarse ante los tribunales a las empresas que no cumplen la ley de accesibilidad, para que la gente se vaya concienciando. En América ya se ha hecho, pero en Europa aún no se aplica la legislación”.

La ley española sobre accesibilidad, una de las más estrictas del mundo, exige a las empresas públicas y las privadas que facturen más de seis millones de euros anuales, un nivel de accesibilidad AA antes de final del presente año (cosa que a día de hoy casi ninguna cumple), so pena de multas muy severas. La ley española causa admiración y sana envidia.

“La mayoría de las empresas creen que hacer una web que funcione bien y que sea accesible es fácil, y no lo es en absoluto”, sostiene Elliot Jay Stocks, uno de los diseñadores y bloggers más respetados de la industria. “Muchos diseñadores supuestamente profesionales no tienen ni idea de programar, y tampoco hay muchos sitios donde puedan aprender bien. En el Reino Unido aún no existen cursos buenos en las universidades. Hay que seguir educando a nuestros colegas”.

“Cuanto más grande y complejo es un sitio, más obvios son los beneficios de usar código de acuerdo con los estándares del W3C: son más fáciles de actualizar, funcionan mejor, se pueden acceder a través de otros dispositivos como móviles y PDA, la información es más accesible, etcétera”, apunta Boag. “La culpa es nuestra a veces, porque no explicamos a las empresas con un lenguaje claro cuáles son los beneficios económicos y prácticos de usar correctamente tecnologías accesibles. A veces somos demasiado técnicos”.

Andy Clarke, experto en estándares y autor de varios libros de referencia sobre programación web, resume la situación: “Los clientes piensan primero en la estética, en vez de preocuparse de la funcionalidad de las webs, y los diseñadores a veces carecen de conocimientos o de capacidad de convicción para explicarles que se equivocan y por qué. En la industria de Internet hay todavía muchos que no entienden de tecnología, diseñadores gráficos a los que hay que reeducar para que empiecen a usar el medio de forma apropiada. Pero sitio hay para todos”.

Fuente: El País.

El próximo Congreso Mundial de la Web (WWW 2009), se celebrará en Madrid entre en el 20 y el 24 de abril del año próximo.

Popularity: 1% [?]

Posted in Diseño Web | No comments

Usabilidad

Usabilidad

Existen dos definiciones formales para la Usabilidad descritas, desde dos puntos
de vista, por la Organización Internacional para la Estandarización (ISO):

  • ISO/IEC 9126: “La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso”

  • ISO/IEC 9241: ”Usabilidad es la eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico”.

La primera definición hace énfasis en los atributos internos y externos del producto, los cuales contribuyen a su funcionalidad y eficiencia.

La usabilidad depende no sólo del producto, sino también del usuario. Por ello un producto no es en ningún caso intrínsecamente usable, sólo tendrá la capacidad de ser usado en un contexto particular y por usuarios particulares.

La segunda es una definición centrada en el concepto de calidad en el uso, es
decir, se refiere a cómo el usuario realiza tareas específicas en escenarios espe-
cíficos con efectividad.

El Nielsen Norman Group se dedica a la consultoría de usabilidad y creación de informes de experiencia de usuario. Jakob Nielsen, considerado el gurú de la usabilidad, la definió como el atributo de calidad que mide lo fáciles de usar que son las interfaces web. Es decir, un sitio web usable es aquél en el que los usuarios pueden interactuar de la forma más fácil, cómoda, segura e inteligentemente posible. Los Directores del Nielsen Norman Group, Bruce “Tog” Tognazzini, Donald A. Norman y Jakob Nielsen.

NielsenNormanGroup.png

Popularity: 2% [?]

Posted in Usabilidad | 1 Comment

Arquitectura web

La Arquitectura, en su más amplia definición, podemos describirla como el arte
de planear, diseñar y construir espacios habitables, y engloba, por tanto, no
sólo la capacidad de diseñar los espacios, sino también la ciencia de construir
los volúmenes necesarios.

No es difícil seguir la línea marcada por esta definición general y extrapolar estas
nociones a nuestro área de interés, la Arquitectura Web. Quedémonos con tres
conceptos fundamentales extraídos de la explicación anterior:

  • Planear
  • Diseñar
  • Construir

Es ciertamente intuitiva la elección de estos conceptos. Realmente son los tres
pasos básicos para llevar a cabo un proyecto dentro de cualquier ámbito. El correcto tratamiento de cada una de estas fases logrará la creación de productos
más profesionales y efectivos.

Algunos profesionales como Pablo Impallari han establecido igualmente esta
correspondencia entre la arquitectura tradicional y web.

“Las aplicaciones deben ser diseñadas sobre de las necesidades de las personas
que van a utilizarlas, de la misma forma que los edificios deben ser diseñados
en base a las necesidades de sus ocupantes.

En los edificios los picaportes y las manijas de las puertas están a un metro de
altura porque esa es la altura a la que se encuentran las manos. En la web los
menús de navegación no tendrían que ser diferentes… deberían estar donde las
personas los necesitan.

En el diseño de sitios web, igual que en el diseño de edificios, se requiere un
firme conocimiento de las tecnologías aplicadas. […] En ambos casos es necesa-
rio tener conocimientos generales y ser un voraz estudiante de las tecnologías,
dado que éstas están en continuo desarrollo y avanzan día a día.

Sin embargo, hay algo que se mantiene constante… la gente debe poder usar-
los. Sino se irán de nuestra web y será un fracaso. Y se desperdiciaría una gran
cantidad de dinero.

El rol de arquitecto web es asegurarse de que esto no ocurra.”

Para ello debe seguir ciertos principios que rigen la construcción de las aplicacio-
nes y la disposición de la información, como la Usabilidad y la Accesibilidad.


Popularity: 2% [?]

Posted in Usabilidad | 1 Comment

Clases en CSS

Clases

Es muy posible que no queramos todos lo párrafos exactamente iguales, o que un encabezado en particular tenga una regla estilística diferente. Para ello, es posible definir clases dentro de los selectores para poder tratar estas excepciones de manera correcta.

¡A esto se le llama flexibilidad!

P {font-size: 11pt} p.cita { font-size: 10pt; font-style: italic }

En una primera definición del selector p, el cuerpo asignado es de 11 puntos tipográficos, sin embargo si el párrafo en cuestión es de la clase “cita”, éste adoptaría la segunda regla como suya, poniendo el cuerpo algo más pequeño, y en cursiva.

Una vez declarada esta excepción hay que indicar su uso. La clave está en el atributo class Aquí se muestra: <p class=”cita”> xxxxxxxxxx </p>

¿Estilos personales?

Es posible querer definir una clase en particular pero no aplicársela a un selector concreto. Sea:

.grande {font-size: 36pt}

Así le podemos aplicar la clase a cualquier etiqueta, simplemente indicándolo en su atributo class:

<ul class=”grande”>

Muchos programas de creación web tratan a estos estilos como “estilos personales” (Dreamweaver), pero en realidad son simplemente clases de uso genérico.

Bloque o carácter

Es posible que queramos aplicar un estilo a una selección de caracteres más que a un bloque delimitado por etiquetas HTML estándares como <p>, <h1> o <ul>.

Para ello tenemos la estupenda etiqueta <span>.

<p> Esto es <span class=”grande”> grande </span> y el resto no. </p>

Como se puede adivinar, las clases genéricas tienen aquí una de sus principales aplicaciones.

Selectores contextuales

Una curiosa aplicación es la de aplicar estilos a una determinada etiqueta siempre que esté dentro de los dominios de otra. Veamos.

strong {color: blue} h1 strong {color: green}

Tenemos una etiqueta como <strong>, que habitualmente pone los textos en negrita. Mediante la primera regla indicamos que ponga el texto en azul, además de su comportamiento habitual. Pero además le indicamos que en el caso que tenga como etiqueta padre a <h1> es decir, que el texto en negrita esté dentro de un encabezado de este tipo, el texto se escriba en verde.

plantilla css 3 columnas

Popularity: 6% [?]

Posted in CSS | No comments

CSS en cascada

CSS terminó imponiéndose, gracias a una premisa que abre muchas puertas: la flexibilidad.
El desarrollador puede incluir una hoja de estilos aplicada a sus documentos, pero el usuario puede sumar sus propios estilos, o incluso sustituirlos.
Esta capacidad del lenguaje para acumular diferentes fuentes de estilo hizo acuñar el termino “en cascada”.

La idea original era que el CSS fuera un lenguaje de estilo de propósito general, aplicable a otros formatos como el XML, el cual se extenderá masivamente en un futuro no muy lejano.

EL principal uso hoy en día es la vinculación con el formato inmortal HTML. Veremos como indicarle al explorador de la existencia una hoja de estilos

La etiqueta <style>

Dentro de la sección del encabezado, podemos declarar una hoja de estilos entre estas etiquetas:

<style>
<!—-
p {font-size: 11pt}
h1 {
color: green;
font-size: 18pt
}
–>
</style>

Esta hoja de estilos se compone de dos reglas, con dos selectores habituales: la etiqueta para los párrafos y la de encabezados de primer nivel.

El hecho de incluir la hoja entre comentarios estándar de HTML es para que navegadores antiguos que no reconozcan la etiqueta <style> no incluyan las reglas como contenido del cuerpo de la página, es decir, que simplemente la ignoren.

<link> o la hoja vinculada

En el ejemplo anterior la hoja está embebida o incrustada en el propio documento HTML, sin embargo, la auténtica potencia de los estilos CSS es la posibilidad de vincular los mismos estilos a múltiples páginas. Se indicaría así:

<link href="estilos.css" rel="stylesheet" type="text/css">

Siendo “estilos.css” el archivo que contiene exclusivamente las reglas que constituyen la hoja de estilos.
El uso de la etiqueta <link> también debe indicarse antes de que se cierre la etiqueta <head>.

Estilos sobre la marcha

Una práctica poco aconsejable, pero posible, es definir estilos en el propio cuerpo del documento, tal como se indica:

<h1 style=”color: red”>Primera parte</h1>

La auténtica potencia de los estilos reside en una premisa básica del mundo de la informática: sacar factor común de situaciones similares, por lo que definir un estilos para un sólo uso tiene escasas ventajas.

Bueno pues además de explicar éstos conceptos fundamentales sobre CSS aquí te dejo una plantilla diseñada con dos columnas.

Popularity: 7% [?]

Posted in CSS | No comments