Mis artículos en otros blogs:
El tinglado, blog de aula Apuntes sobre blogs Blogestores Bitácora de TIC
Páginas dispersas

Páginas dispersas

Páginas educativas sobre nuevas tecnologías

Saltar navegación

Botón blogfesor

Botón de Páginas dispersas

Bot´n de El Tinglado

Planeta Educativo

Ubuntu-es

Aulablog.com

Planeta Edusol

Licencia de Creative Commons

Get Firefox

 Use OpenOffice.org

Formato Open Document

Formato Open Document


Enlace permanente

Diseño web »

Imprimir

Diseño para la Web 2.0

Diseño web Los que visiten esta bitácora con cierta regularidad se habrán percatado de que le he cambiado el diseño hace pocos días. Se me ha ocurrido que podría aprovechar la ocasión para escribir otro de mis alegatos en favor del diseño. He pensado que esta vez puede que atraiga a los lectores si logro unir mis ideas con la tan mencionada Web 2.0. Porque ¿cómo se va a poder construir todo este nuevo tinglado de internet si el edificio no se sostiene adecuadamente? Lo primero es la Web semántica, y después viene todo lo que queráis: blogs, wikis, wikipedias, technorati, delicious y demás herramientas. Dejaré para otro artículo la explicación de algunos aspectos importantes del diseño de páginas web fijándome en mi propia bitácora con el fin de hacerlo de manera práctica.

Un nuevo diseño para la nueva internet

Desde tiempos inmemoriales, allá por mil novecientos noventa y tantos, las páginas web se han diseñado principalmente con el código HTML, pero desde aquel siglo, internet ha ido cambiando vertiginosamente, como nuestro estrés nos demuestra todos los días. Es lógico pensar que el diseño de las páginas web también tenga que ir variando para acomodarse a los nuevos retos. Los diseñadores se han inventado todo tipo de trucos para hacer que las páginas queden bonitas, y verdaderamente lo han conseguido muchas veces, aunque fuese a costa de impedir algunas funcionalidades de los documentos creados. Sin embargo, la nueva Web 2.0 requiere otro tipo de diseños más ágiles y asequibles si de verdad queremos participar todos en esta fiesta de la comunicación y del conocimiento compartido.

Muchas webs, entre ellas las que utilizan la mayoría de los gestores de contenidos, ya se diseñan de esta nueva manera. Pero queda por resolver dos aspectos importantes, desde mi punto de vista:

Hay tres formas básicas de diseñar una web: con el código HTML, con la tecnología Flash y con XHTML/CSS. Vamos a ver en qué consiste cada una de ellas. También vamos a analizar por qué ésta última es la más apropiada para los tiempos que corren.

El diseño basado en el código HTML

Las primeras páginas web se diseñaban con el código HTML, por decirlo de alguna manera, pues ese código no fue pensado realmente para el diseño sino para transmitir el contenido de forma sencilla. En este tipo de diseño, son las tablas las que se utilizan para dividir el documento en varias secciones: columnas a la izquierda y a la derecha para la navegación, una fila superior para la cabecera y otra inferior para el pie de página, y una columna central más amplia para el contenido. Dentro de estas celdas se colocan otras tablas con más filas y columnas para dividir aún más el contenido. Si a esto se le añaden fotografías por aquí y por allí, colores variados y bien puestos, y algún que otro ornamento, el resultado puede ser hasta bonito y atractivo.

Esta forma de diseño es aún la más extendida en internet. Yo la utilizo para enseñar a mis alumnos a crear páginas web, porque es la más sencilla y la que de momento da menos problemas de visualización en los navegadores. También la he empleado durante varios años en mis propias páginas, y la verdad es que es un diseño seguro, porque el código utilizado lo leen bien todos los navegadores, incluidas las versiones antiguas. Sin embargo, tiene algunas desventajas:

El diseño basado en la tecnología Flash

En 1996 surgió la tecnología del programa Macromedia Flash, que ahora pertenece a Adobe. Los diseñadores lo vieron como el maná caído del cielo, como la herramienta adecuada para ponerse a crear diseños de empresas y conseguir así traducir a internet el diseño gráfico que utilizaban en papel. Fue el principio de la web como instrumento de hacer dinero. Porque ¿cómo iba una empresa a presentarse en la Red con esos pelos de HTML? De esa manera, todas las instituciones, empresas, ministerios e incluso centros educativos que se preciaran tenían que salir a la calle vestidos de Flash (¡faltaría más!). Aquello fue lo mejor que le podía haber ocurrido a internet para que la burbuja empezara a hincharse sin parar.

Desde entonces, millones de páginas comenzaron a hincharse de engreimiento, y aparecieron animaciones por todas partes. Las animaciones en sí pueden ser de mucha utilidad para una web si lo que hacen es ilustrar el contenido, pero molestan si sólo se utilizan como accesorio. Esta ley tan elemental la han estado quebrando miles de páginas web con el único motivo de conseguir que sus contenidos parecieran serios y profesionales. Ya se han encargado los expertos de demostrar las muchas desventajas que supone el uso de Flash, y ya nos hemos fastidiado muchos usuarios hasta decir basta. Sin embargo, Flash sigue vivo y coleando como forma de diseño, y lo tendremos con nosotros durante mucho tiempo, tanto como dure la vanidad entre los humanos.

Entre las desventajas de esta tecnología podemos citar las siguientes:

El diseño basado en XHTML y en hojas de estilos (CSS)

Bloglines

Ya dediqué un artículo en esta bitácora, ¿Hacia dónde nos lleva internet? La Web semántica, a profundizar en este concepto originario de la Red y de sus creadores. Internet, desde sus orígenes, quiere ser una red de comunicación y de creación de conocimientos compartidos. Por tanto, cuando hablamos de la Web 2.0 como la nueva internet nos referimos a que sólo ahora se dan las condiciones adecuadas y sólo ahora disponemos de los instrumentos necesarios para llevar a cabo el objetivo de esta red de redes. Hemos perdido varios años entretenidos por los que quieren hacer de esto un circo o un mercado, y ya va siendo hora de que nos centremos en lo nuestro: el verdadero poder de la gente expresado libremente y sin diseños abstrusos que nos lo impidan. ¿Es mucho pedir? Sí, lo es, por eso hay que construir este poder desde la base con diseños transparentes.

Tim Berners-Lee, el creador de la World Wide Web, fue también el creador del XML, conjunto de lenguajes y códigos, sobre los que ya escribí en mi último artículo citado, que sustentan lo que denomina la web semántica, es decir, la web que da sentido humano a su desarrollo para una mejor organización de sus contenidos. Dentro de esos lenguajes, el XHTML es una variación de HTML para acoplarlo a estas exigencias de precisión semántica. Para quien domine el código HTML, no supone mayor esfuerzo hacerse con el nuevo, aunque sí implica una distinta ordenación mental del diseño y de los contenidos, que es de lo que se trata. XHTML es un lenguaje estricto que no deja etiqueta sin cerrar y que no permite ningún tipo de error o de tibieza por mor de la precisión en el decir, que es la mejor forma de entendernos. Con él se pretende ordenar más eficazmente todos los contenidos de internet con el fin de su mejor aprovechamiento. Su utilización tiene que ser obligatoria para todo aquel que quiera hacerse su rinconcito en internet y empezar a decir cosas.

Pero una de las mayores revoluciones, silenciosa e invisible, del diseño en internet fue la creación de las hojas de estilo en cascada (CSS), técnica que vio la luz e iluminó el firmamento virtual en 1996. Desde el principio de internet se estuvo buscando una técnica que separara el contenido de un documento y su diseño en dos partes diferenciadas pero unidas. Eso lo logró esta nueva técnica, que desde entonces ha conseguido varias proezas:

Por tanto, si unimos estas dos tecnologías, XHTML y CSS, las páginas creadas contendrán los elementos necesarios para satisfacer las exigencias de la web semántica. Éste es el ideal, pero pecaría de ingenuo si no advirtiera de las dificultades que supone el uso de estas tecnologías, debido sobre todo a que los navegadores no procesan de igual forma estos códigos, como ya indiqué en otro artículo. Pero no debe cundir el desánimo, pues por lo general los nuevos navegadores se adaptan bien a estos códigos, y no dan muchos problemas.

Usabilidad y accesibilidad

Cuando afirmamos que la nueva internet tiene que ser para todos, no hay que decirlo con la boca pequeña. Los nuevos diseños deben incorporar las recomendaciones que nos brindan los expertos en usabilidad y accesibilidad, que constantemente realizan pruebas con usuarios para descubrir cuáles son las técnicas más apropiadas para crear páginas web útiles y asequibles para todas las personas, incluidas las que tienen impedimientos físicos o psíquicos. Estas técnicas no añaden una dificultad especial a la hora de elaborar los diseños si las tienen en cuenta desde el principio todos los encargados de diseñar y programar un sitio web. Se ha demostrado además que la inclusión de estas técnicas en el diseño de un sitio web supone un gasto escaso para las empresas, que luego mejoran su comunicación con los clientes, y con ello su rendimiento económico. Por tanto, si la comunicación es la base de la Web 2.0, sería un error irreparable crear páginas web que nos cueste visitar tanto como nos cuesta abrir algunos envases de tomate frito.

La magia de la interactividad

No podemos olvidarnos de la palabra mágica: interactividad. Sin ella internet no sería la que es y no podría llegar a convertirse en la Web 2.0, la red de la participación. La interactividad se ha conseguido todos estos años mediante algunos lenguajes de programación creados especialmente para ello. Los más conocidos son JavaScript, PERL y PHP, que también han colaborado decisivamente en el diseño general de las páginas web. Estos lenguajes hacen funcionar los nuevos gestores de contenidos y las bases de datos que los acompañan. No se puede entender el diseño web sin ellos, y de esta forma diseñadores y programadores deben trabajar más unidos que nunca para conseguir crear las aplicaciones rápidas, sencillas y completas que son necesarias para difundir la información y el conocimiento y crear los contenidos.

Todas las páginas web más conocidas y utilizadas de esta nueva versión de internet apuestan por la sencillez, el minimalismo, la funcionalidad y la elegancia, y para ello utilizan estos códigos y lenguajes. A éstos se ha unido últimamente el famoso AJAX, que promete ser el lenguaje de scripts por antonomasia de la nueva Web. En realidad no es tan nuevo, pues se trata de una mezcla de JavaScript, XML y otros códigos adheridos, lo que ya indica de por sí la variedad que subyace en este planteamiento de la Red, que no hay que confundir con la confusión, aunque no esté exento de ella.

Qué se saca de todo esto

Lo mejor que podemos observar actualmente es la constante ebullición que hay en internet. Se va por el camino correcto, pero habrá que esperar todavía unos años hasta que todo esto se aclare. El estado de las cosas es complejo, e incluso a algunos puede parecerle decepcionante. A mí me atosigan todas estas novedades que aparecen cada día, pero no puedo dejar de pensar en la meta que se pretende conseguir, que es muy positiva. Lo importante es que cada uno de nosotros contribuimos a crear esta nueva sociedad, y no debemos creer que nos la van a construir desde arriba, porque entonces no merece la pena. Así que aquí estamos todos dispuestos a ejercer nuestra libertad en la Red. Que no lo impidan los gobiernos, el mercado, la ignorancia, la tibieza. Ni tampoco el mal diseño.

Otros enlaces de interés

(En los artículos citados de mi bitácora y en los que enlazo en la categoría correspondiente aparecen muchos enlaces informativos.)

Por Alejandro Valero en Diseño web el 14.01.06 con 36 comentarios
Palabras clave web 2.0, código


36 comentarios

     

Páginas: 1  2

[31] Por Lourdes Barroso el 18.01.06/17:45 Enlace permanente  Responder

Lourdes Barroso

Smiling emoticon Gracias Javier, por ese análisis tan generoso y motivador -aunque todo lo que hice bien fuera de manera inconsciente-, te agradezco sinceramente el análisis y las recomendaciones.

No me preocupa estar a la "última", lo que si quiero es formarme, al menos un poco y hasta para eso he tenido dificultades: no sabia por donde empezar. Este es un mundo excesivamente complejo, creo que eso echa para atrás a mucha gente.

Manejar un blog para escribir artículos y poner alguna imagen, no es difícil, pero si quieres ir un poquito más allá, hay que formarse.

Siempre he pensado que he hecho un recorrido absolutamente disparatado, aunque esta mañana se me ha venido a la cabeza que quizás no lo fuera tanto. Pero bueno eso nos abre otra línea de reflexión: cómo hacer que los profesores se interesen por las TIC.

A tí Alejandro, sólo decirte que lo de los correos lo he contado exclusivamente por malmeter un poco, nada más, ya me imagino que cayeron con el spam. Obviamente mi imagen de tí ha cambiado, al menos en parte, sigo pensando que te pillas unos "cabreos" mayestáticos, que junto con el tabaco pueden ser un atentando cardiaco. De "gracioso" nada, con un gran sentido del humor, que es distinto. Blush emoticon

[32] Por Lourdes Barroso el 20.01.06/17:23 Enlace permanente  Responder

Lourdes Barroso

Laughing emoticonLaughing emoticonEste descensor es fenomenal.

Wacko emoticon (Es el efecto de la velocidad)

[33] Por Alejandro Valero el 20.01.06/17:49 Enlace permanente  Responder

Alejandro Valero

¡Estarás contenta, eh, Lourdes! Ya tienes tu descensor. Laughing emoticon Se baja un poco apretadito, pero bueno, así adelgazamos. Esto me recuerda un poco al ascensor de 13 Rue del Percebe. Blush emoticon

[34] Por Lourdes Barroso el 20.01.06/20:59 Enlace permanente  Responder

Lourdes Barroso

Descripción

Es verdad, que esto es como mucho más nuestro que las imágenes que yo te he enviado. Smiling emoticon

[35] Por Alejandro Valero el 20.01.06/21:52 Enlace permanente  Responder

Alejandro Valero

Bueno, Lourdes, aquí tienes tus descensores. Los hay de todo tipo, y cada uno tiene sus ventajas. El cuarto es el más divertido. Y el primero es para los que quieran hacer gimnasia. Yo de momento voy a usar el cuarto, el de 13 Rue del Percebe, aunque con ése nunca se sabe dónde vas a parar.

[36] Por Lourdes Barroso el 20.01.06/22:44 Enlace permanente  Responder

Lourdes Barroso

¡Este blog es genial! Laughing emoticonLaughing emoticon.

Es el blog más interactivo de la blogosfera.

Descripción

Páginas: 1  2

Botón de Páginas dispersas Páginas dispersas - http://fresno.pntic.mec.es/avaler3
© de la web y del diseño: Alejandro Valero. Licencia de Creative Commons.