Selectores CSS: la intersección entre diseño y programación

El uso de selectores CSS en los "frameworks" para JavaScript más conocidos ha permitido lo que hace unos años era impensable: los diseñadores entienden el código de los programadores y los programadores pueden comprender el CSS de los diseñadores.

jQuery es especialmente adecuado: no distingue entre selectores "por id" ni selectores por "clase" (Prototype tiene dos funciones diferentes, $() y $$(), para estas tareas).

$('.lateral a.externo').click(function(ev) {
    // Código  a ejecutar
})

Este sencillo código es fácil de entender y un diseñador al verlo rápidamente intuye que en todos los tags A dentro de la "capa" lateral que tengan la clase externo se hará algo al hacer click.

.lateral a.externo {color: red; padding: 5px; margin: 0;}

Este fragmento de CSS afecta a los mismos elementos que el javascript anterior. Un desarrollador enseguida ve también a qué elementos afecta.

Lo bueno es que si el diseñador y el programador hablan en el mismo lenguaje (selectores CSS), el desarrollo es muy fácil y se puede trabajar en paralelo fácilmente.

Las elecciones desde el punto de vista informático

Pasada la resaca electoral, les voy a contar un poco por encima cómo trabajamos y lo que hacemos cuando hay elecciones.

Lo habitual es contactar unas semanas antes con el organismo responsable y solicitar una acreditación. En las elecciones que hemos cubierto hasta ahora (Generales 2009, Galicia y País Vasco 2009) el mecanismo ha sido similar: el organismo nos facilita una página web de acceso restringido desde la cual podemos descargar los ficheros con los datos de los recuentos.

Por lo general, antes del día "D" se ofrece una simulación con datos de prueba para que los medios podamos comprobar que nuestros desarrollos funcionan.

El formato de los datos no es estándar, cada organismo ofrece el que mejor le parece. En las pasadas elecciones generales se nos ofrecían un fichero de texto (comprimido) con los datos del recuento a nivel estatal, autonómico y provincial y otro conjunto de ficheros (también comprimidos) con el desglose del recuento por municipios.

Con antelación se nos facilitó la documentación sobre el formato de estos ficheros (por ejemplo: campo 1, tres posiciones, código del municipio; campo 2, dos posiciones, provincia; ....; campo n, código del partido, campo n+1, votos, ...)

Por fortuna, en las elecciones gallegas han utilizado un sistema informático similar, que emitía ficheros de datos muy parecidos, así que gran parte del trabajo ya lo teníamos hecho. Variaba la forma de desglosar: a nivel autonómico, provincial, comarcal y por municipios.

El Gobierno Vasco facilitaba los datos en un fichero XML único, en el cual también se desglosaban los datos a nivel autonómico, provincial y por municipios.

Una vez que hemos escrito el programa o "script" que analiza estos ficheros de datos, lo más conveniente es guardarlos en una base de datos relacional y escribir las consultas contra esta base de datos.

Como los ficheros de datos se van actualizando cada poco tiempo, lo más práctico es dejar que la computadora haga ella sóla el trabajo. En el caso de los datos del País Vasco, la dirección y nombre del fichero de datos ha sido toda la noche la misma, con lo que pudimos dejar un "script" corriendo cada minuto mientras pedíamos una pizza.

Los ficheros de datos del recuento en Galicia cambiaban de nombre cada vez que se actualizaba el recuento. Esto nos obligó a hacer un poco de trabajo manual, aunque lo teníamos también "semi-automatizado": llamábamos a un "script" pasándole el nombre de fichero de datos y se disparaba la actualización.

Por otra parte, en la página web se iba mostrando una especie de "marcador" con los datos parciales, el porcentaje escrutado, etc. Obviamente, estos datos provenían de nuestra base de datos, pero no podíamos arriesgarnos a que cada página vista disparase una consulta a la base de datos: saturaríamos los (ya bastante congestionados) servidores rápidamente.

La solución que adoptamos fue la siguiente: un "script" generaba un fragmento de HTML (haciendo las pertinentes consultas) cada 30 segundos, lo escribía en un fichero y lo que la página web mostraba era este HTML "precompilado". Bueno, bonito y barato ;-)Por otra parte, el lunes por la mañana, previendo que íbamos a tener muchas consultas para buscar municipios, resultados por comarcas, etc, en las páginas de resultados, decidimos "cachear" o guardar los resultados de las consultas, ya que estaba todo escrutado. De esta forma nos ahorramos muchas consultas a la base de datos, que suele ser el cuello de botella de las aplicaciones web.

Si usted busca los resultados electorales de su pueblo y la página tarda un poco en mostrarle los resultados, está de enhorabuena: es usted la primera persona que busca los resultados de este municipio, y, además, los siguientes usuarios que busquen los resultados de este mismo sitio tendrán una respuesta mucho más rápida.

Espero que les haya interesado esta entrada. Si quieren que les cuente algo más, dejen un comentario. Contestaré lo que mejor pueda.

El desarrollo de una página web

Me ha dado mucha envidia José Pujol con sus "posts" en los que explica el día a día de su trabajo, así que en esta entrada voy a hacer lo mismo.

En la web de Público tenemos dos partes muy diferenciadas: el gestor de contenidos y las páginas que genera (básicamente, la portada, las subportadas y las páginas con noticias) y el resto (blogs, video, sección de cine, archivos estáticos, etc).

Hoy voy a tratar de contar cómo hemos construido la página web del concurso Foto Libre.

Lo primero que hicimos fue reunirnos con la gente del periódico que organizaba el concurso (departamentos de fotografía, "marketing" y sistemas). En esta reunión se estableció la mecánica del concurso desde un punto de vista genérico, sin entrar en detalles técnicos.
Esta fase se suele denominar "toma de requisitos" y es fundamental para que un proyecto salga adelante. Tienen que quedar perfectamente especificadas todas las características deseables.

Con esta información, desde la parte de diseño y programación web (nosotros) se hicieron unos bocetos o esquemas de las páginas. Por ejemplo: "pantalla de inicio, desde ahí el usuario puede ir al formulario de registro o a la galería de fotos", o "pantalla de registro, el usuario introduce sus datos para participar y se le envía un correo de confirmación", etc.
Existe un término llamado "casos de uso" que sirve para documentar las posibles interacciones y flujo de trabajo de una aplicación.
En este punto, todavía no se ha escrito nada de código, pero son pasos necesarios para que todo salga bien. Si no está claro qué se quiere obtener, difícilmente el proyecto será del gusto del peticionario.

Cuando todos los implicados han dado el visto bueno a estos bocetos, empieza el trabajo de los diseñadores (Matteo y Daniel) y programadores (Rodrigo y el autor de estas líneas).

El separar funciones es bueno y productivo y permite avanzar en paralelo. Mientras los diseñadores van esbozando las distintas pantallas, los programadores vamos haciendo el trabajo "de trastienda": diseño de la base de datos (si es necesaria, claro), elección de la tecnología que se utilizará en el desarrollo (lenguajes de programación, "frameworks", etc), diseño funcional de la aplicación (separación de las distintas funcionalidades de la aplicación), etc.

En este punto, los diseñadores nos proveen con algunos archivos HTML y CSS estáticos. Los programadores los "desmenuzamos" y asignamos a cada parte de la aplicación una labor, algunas de estas unidades funcionales son las que se encargan de generar el HTML de forma dinámica (obteniendo los datos de las fotos de una base de datos, validando los datos que introducen los usuarios cuando se registran o suben fotos, etc).
Es la llamada "capa de presentación".

Hoy en día muchas webs se diseñan siguiendo un patrón o modelo muy conocido: MVC (Modelo, Vista, Controlador).
La capa M (modelo) abstrae, representa y ofrece mecanismos de acceso a los datos "crudos" de la aplicación, la capa C (controlador) se ocupa de gestionar las peticiones de las distintas páginas y solicitar los datos para generar estas páginas.
Por último, la capa V (vista o presentación) "pinta" o representa los datos en un formato determinado (en nuestra aplicación de Foto Libre, en HTML).

Para muchas páginas web sencillas o informales esta separación está casi más en la mente de las persona que escribe el código, pero en desarrollos de mayor entidad conviene separar físicamente estas funcionalidades.

Espero no haberles aburrido mucho. Es difícil condensar en unas pocas líneas tanta información. Otro día les contaremos más cosas sobre el trabajo que hacemos.

Novedades en www.publico.es/cine

En los últimos meses hemos recibido bastantes sugerencias de los lectores para la sección de cine, así que en las últimas semanas hemos desarrollado algunas mejoras en nuestra sección de cine, www.publico.es/cine

Lo más destacado es lo siguiente:

• Se separan en distintas secciones las carteleras y las salas de cada población.


• Las películas que son estrenos salen destacadas en el inicio.


• Se puede acceder rápidamente a las películas que se emiten en cada sala de una determinada población.


• Hemos incorporado un buscador por título.


• Tenemos dos secciones nuevas y diferenciadas: noticias sobre cine y "Público te invita" donde periódicamente se harán públicas invitaciones a películas o preestrenos.


• Ahora hay RSS de las noticias, promociones, cartelera en ciudades y en cines.

Seguiremos mejorando esta sección, es una de nuestras predilectas.

El maravilloso mundo de la tipografía

Reconozco que no tengo ni idea de este tema, pero lo poquito que he leído me ha parecido apasionante.

La tipografía es (definición aproximada) el arte de diseñar, seleccionar y colocar adecuadamente los tipos (las letras) a la hora de imprimir un texto. Es un arte con cientos de años a sus espaldas que, sin embargo, ha evolucionado con los tiempos y sigue teniendo hoy en día una vigencia plena.

Insisto, no conozco casi nada de este tema (sólo soy un pobre programador), si quieren profundizar más les dejo unos enlaces al final del texto. Con esta entrada sólo pretendo despertar su curiosidad e interés.

Hay muchas formas de clasificar los distintos tipos de letras. Existen clasificaciones históricas, según la forma, el espaciado, ...
En la web se utilizan fundamentalmente tres tipos de letra: con "serifa" (serif), sin "serifa" (sans-serif) y monoespaciadas.

• Las letras con serifa son las típicas con adornos en los remates. Ejs: Times y Georgia.
  
  Times
  
  Georgia
  


• Las letras sin serifa son las que no tienen estos adornos. Ejs: Verdana, Arial, Helvetica.
  Arial
  
  Helvética
  


• Las monoespaciadas son aquellas en las que cada carácter tiene el mismo ancho, independientemente de la letra que se esté representando. Ej: Courier.
  
  Courier
  

Esta no es una clasificación estricta, ya que la distinción serif y sans-serif se refiere a la forma mientras que la distinción entre monoespaciadas y ajustadas se refiere al interespaciado entre caracteres.

Tradicionalmente se ha dicho que las tipografías sans-serif son más apropiadas para documentos en una pantalla, ya que se ven mejor que los tipos serif (ya que no hay remates ni adornos que mostrar).

Aunque cada vez se ve más tipografía serif en la web (por ejemplo en www.publico.es los titulares y cuerpo de las noticias van con Georgia y las entradillas en Arial), casi toda la tipografía que se utiliza por defecto en el escritorio es sans-serif.

En las siguientes capturas de pantalla puede apreciarse como prácticamente todos los elementos que contienen texto en el escritorio (rótulos de los iconos, texto en las barras de herramientas, texto de los menús, cuadros de diálogo, etc.) utilizan una tipografía sans-serif (están con la configuración por defecto).

Linux:


Mac OSX:


Windows:


Algunos enlaces de interés:

• Tipografía - Wikipedia, la enciclopedia libre


• Introducción a la tipografía


• dafont.com (Un buscador de fuentes)

Cada uno a su bola

Escribíamos hace unas semanas sobre lo difícil que es para un diseñador de páginas web conseguir que el mismo diseño se vea igual de bien en todos los navegadores. Hoy ahondamos un poco más en la cuestión.

Para formatear y dar estilo a las páginas web actualmente se utiliza una tecnología llamada CSS (Cascading Style Sheets u Hojas de Estilo en Cascada).
La CSS permite que los elementos de una página web se vean de una forma u otra sin necesidad de tocar el contenido. Esto es una práctica muy aconsejable, puesto que conseguimos separar e independizar por un lado el texto o contenido de la página y por otro la presentación.

Hasta hace unos años, las páginas web se maquetaban y se les daba estilo con etiquetas HTML dentro del texto que no aportaban contenido, si no formato. Afortunadamente, casi nadie trabaja así actualmente.

El problema es que cada navegador interpreta un poco a su aire estas reglas CSS, con lo que surge el problema que comentábamos en la entrada anterior: los diseñadores tienen que saberse un montón de "trucos" para conseguir que la misma CSS sirva para todos los navegadores.

Existe una organización llamada "Web Standards Project" que promueve el uso de estándares y tecnologías compatibles en las páginas web. Se les conoce sobre todo porque han preparado una serie de pruebas para ver si un navegador es compatible e implementa correctamente las especificaciones de los distintos estándares (CSS, HTML, etc).
Esta prueba se llama "Acid Test" y tiene varias versiones, la que se supone que deberían pasar los navegadores actuales es la versión 2 (la versión 1 de la prueba la pasan los 5 navegadores más utilizados (Firerox, Explorer 6 y 7, Opera y Safari).

Vean la prueba Acid 2 en estos cinco navegadores. Lo que el navegador debería mostrar es una carita como ésta:



Y así la muestran ...

Internet Explorer 6


Internet Explorer 7:


Mozilla Firefox:


Opera:


Safari:


La prueba Acid tiene detractores, pero para el propósito de esta entrada nos vale: es sorprendente comprobar cómo los distintos navegadores interpretan las mismas reglas. También es sorprendente cómo los navegadores menos usados (Opera y Safari) son los que mejor implementan las tecnologías web.

Resumen: la próxima vez que Ud. visite una página web en la que se vea algo extraño o descolocado, verifique (si tiene tiempo y ganas, claro) cómo se ve la página con otro navegador, especialmente si usa alguna versión de Internet Explorer.

La pesadilla de los programadores y diseñadores

Nos contaba hace un par de días Blanca Salvatierra en un artículo la existencia de una página web que instaba a los usuarios del navegador Internet Explorer 6 a actualizarse o cambiar de navegador.

Realmente es un dolor tener que desarrollar páginas web que se vean bien en todos los navegadores. Aunque la mayoría de los diseñadores y programadores ya se saben los "trucos" para conseguirlo, no deja de ser una gran pérdida de tiempo y esfuerzo.

A día de hoy, los lectores de Público.es utilizan cinco navegadores principalmente (porcentajes aproximados): Internet Explorer 7 (~ 30 % de los usuarios) , Internte Explorer 6 (~ 30%), Mozilla Firefox (~ 30%), Apple Safari (~ 2%) y Opera (~1%).

De estos cinco navegadores, el Internet Explorer 6 (abreviado como IE6) es el menos compatible, para que una página que se ve bien en el resto se vea en IE6 muchas veces hay que recurrir a trucos y "chapucillas".

¿Cómo puede ser ésto? Las páginas web actualmente se basan (principalmente) en tres "lenguajes" con funciones diferenciadas, todos ellos estandarizados por organizaciones de internacionales: HTML, CSS y JavaScript.
El lenguaje HTML es el que contiene el texto o contenido significativo de una página web, el CSS se encarga de formatear y dar estilo a este texto. Finalmente, con JavaScript podemos hacer que el usuario interaccione con una página web de diferentes formas.

El problema es que en teoría todos los navegadores soportan estos tres lenguajes, pero en la práctica, cada uno lo hace a su manera, y de todos ellos, el IE6 es el que más extraño se comporta.

Supongamos que tenemos el siguiente fragmento de HTML (simplificado):

 Prueba con HTML


 

  

   

    
Título del documento
   
   

    

     
Listado de palabras
     

      
Palabra 1
      
Palabra 2
      
Palabra 3
      
Palabra 4
      
Palabra 5
     
    
    

     Esto es un párrafo de texto, párrafo de texto,
     párrafo de texto,párrafo de texto, párrafo de texto,
     párrafo de texto, párrafo de texto.
     Esto es otro párrafo de texto, párrafo de texto,
     párrafo de texto, párrafo de texto, párrafo de texto,
     párrafo de texto, párrafo de texto.
    
   
   

    Esto es un texto en el pie de la página.
   
  
 

Este documento se vería así en los distintos navegadores (pulsar para ampliar):



No hemos especificado ningún estilo, así que los navegadores formatean el texto como les parece, aunque el resultado es muy parecido en todos los casos.

Ahora establecemos que este HTML utilice el siguiente CSS que lo formateará. Este CSS es bastante ingenuo, ya que no tiene en cuenta las peculiaridades de los distintos navegadores. Lo que pretende es establecer una página centrada, con una cabecera gris, un cuerpo azul con dos columnas, verde y amarilla y un pie de página rojo:

#contenedor {
 border: solid 1px black;
 padding: 10px;
 width: 750px;
 margin: 0 auto;
}
#cabecera {
 background-color: gray;
 width: 730px;
}
#cuerpo {
 background-color: blue;
 width: 730px;
}
#pie {
 background-color: red;
 width: 730px;
}
#colizda {
 width: 180px;
 background-color: green;
 float: left;
 padding: 10px;
}
#coldcha {
 width: 510px;
 background-color: yellow;
 float: left;
 padding: 10px;
}

Las diferencias entre navegadores son notorias:

	Mozilla Firefox
	Opera
	Safari
	Explorer 7
	Explorer 6

Hacemos algunos ajustes adicionales conseguimos al fin que en todos se vea igual:

body {
 /* Para centrar en IE6 */
 text-align: center;
}
p, ul {
 margin: 0;
 padding: 0;
}
ul {
 list-style: none;
}
#contenedor {
 margin: 0 auto;
 width: 770px;
}
#contenido {
 border: solid 1px black;
 padding: 10px;
 width: 750px;
 /* Para expandir la capa hacia abajo en
 Safari, Opera y Firefox */
 float: left;
 /* Para compensar el apaño de IE6 en body */
 text-align: left;
}
#cabecera {
 background-color: gray;
 float: left;
 width: 750px;
}
#cuerpo {
 background-color: blue;
 float: left;
 width: 750px;
}
#pie {
 background-color: red;
 float: left;
 width: 750px;
}

Y éste es el resultado:

	Mozilla Firefox
	Opera
	Safari
	Explorer 7
	Explorer 6

Lo más chocante es que para que en IE6 se vea la página centrada tenemos que establecer una propiedad ilógica: que el texto en la etiqueta "body" esté centrado (text-align: center;)
Por otra parte, los dos Internet Explorer expanden y muestran la capa contenedora de las columnas (fondo azul), mientras que en los demás hay que hacerla visible explícitamente.

En general el comportamiento de IE7, Firefox, Opera y Safari es muy similar, los problemas siempre los suele dar el IE6.

Se comprende entonces que los diseñadores de páginas web estén hartos del Explorer 6 y su peculiar forma de interpretar los estándares.

Créditos: gracias a Daniel Solana Tacón, diseñador web de Público por ayudarme con estos CSS.

La máquina del tiempo

¿Cómo eran las páginas web más conocidas hace unos años? ¿Es posible recuperar el contenido de un sitio web ya desaparecido?

Existe un sitio web que se dedica a "archivar" páginas web a lo largo del tiempo. Se trata de archive.org y su herramienta "WayBack Machine" (o máquina del tiempo).
Es muy curioso ver cómo ha ido evolucionando el diseño de las páginas web (anchos de pantalla, tipografías, maquetación, ...) a lo largo de los años.

Les dejo algunas muestras:

Yahoo, 1997	Google, 1998	El País y El Mundo, 1996

Usabilidad vs. diseño

Nos contaba Amparo Estrada el otro día en su blog las dificultades que encontró para realizar un sencillo trámite en el sitio web de una operadora de telefonía. Me pregunto qué interés tienen algunas operadoras en que sus páginas web parezcan más una feria de colorines que un sitio web útil y funcional.

En informática se dice que algo es usable cuando (según las normas ISO 9126 y 9241) un producto permite que los usuarios puedan interactuar satisfactoriamente con el producto, más concretamente:

""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"

"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"

Según estas definiciones, las páginas que mencionaba nuestra compañera no eran nada "usables" (1).

Para algunos/as diseñadores/as de páginas web, parece que usabilidad y diseño son términos opuestos. Nos da la impresión que algunas páginas web parecen más un escaparate que otra cosa. Por supuesto, no todos los diseños son así, menos mal. La mayor parte de los/as diseñadores/as son capaces de hacer diseños agradables, atractivos, bonitos, con una navegación fácil e intuitiva sin caer en estridencias (2).

Uno de los mayores enemigos de la usabilidad es el mal uso y abuso que se hace de la herramienta Flash. Se ven sitios web totalmente realizados en Flash, sin ninguna alternativa de texto tradicional. Lo peor es cuando el diseño además exige una versión diferente del "plugin" de Flash a la que tenemos instalada en nuestro navegador.

Ni siquiera la misma página de la compañía Adobe, propietaria de la tecnología Flash, utiliza la misma es su página web. Cualquier diseñador o desarrollador web medianamente informado sabe que las páginas realizadas con Flash no son legibles por los buscadores si no están bien hechas (ni por muchas personas que, por la razón que sea, no utilizan un "plugin" de Flash en su navegador).

No sólo los diseñadores cometen errores de usabilidad ni estos se reducen a las páginas web. Los programas informáticos "de escritorio" también son pasto de malos diseños, esta vez realizados por los programadores.

Vean el siguiente cuadro de preferencias de un programa de visualización y retoque de imágenes para Windows:



¿Qué ven? Es un cuadro de diálogo de los que hemos visto miles de veces, pero ... ¿no les agobia un poco?
Tenemos 12 pestañas, cada una con muchas opciones. Esto no es malo, el programa del que hablamos es un buen programa y tiene muchas opciones configurables.
El problema son las tres pestañas rotuladas como "Varios 1", "Varios 2" y "Varios 3". Autoexplicativo, ¿verdad?
Una de las opciones de este programa que a mí me gustan más es que se puede configurar para que nunca haya más de una ventana abierta del programa, todas las imágenes se cargan en la misma ventana. Adivinen cómo viene rotulada esta opción: "Permitir sólo una instancia activa de IrfanView".
No parece muy afortunado el término instancia. Si el usuario no tiene una formación técnica (y no tiene porqué tenerla) probablemente no entienda qué quiere decir esta opción.

Otro ejemplo de diseño poco usable es el sistema operativo UNIX y algunas de sus versiones (como Linux o MacOSX). En estos sistemas operativos se puede utilizar una interfaz de comandos para trabajar (3).
El problema es que las opciones de estos comandos suelen ser muy poco uniformes. Por ejemplo, en algunos programas la opción "v" solicita al programa su versión, pero en otros programas significa "verbose", esto es, que el programa proporcione más información de la habitual.
Algunos programas UNIX requieren que las opciones se les pasen con un guión "-" y una letra única (p. ej: -v), otros con dos guiones "--" y una palabra completa (p. ej: --version) y otros, una mezcla de ambas (-version).

En este caso es la herencia de un sistema operativo con más de 30 años de antiguedad.
Afortunadamente, la mayoría de los programas y "utilidades UNIX" hoy en día admiten los dos "estilos" (con guión simple y doble)

(1) Entrecomillo el término por no ser una palabra reconocida por la RAE.
(2) Existe una especie de museo de los horrores de páginas web realmente desagradables en la página QuéWeb!
(3) No voy a entrar (hoy) en el debate de si una interfaz de líneas de comandos es algo obsoleto, difícil o no. A muchos nos resulta muy útil -aunque poco usable a veces ;-)

Colores

En el colegio nos enseñaban que los colores primarios eran amarillo, rojo y azul, que mezclando azul y amarillo salía color verde ...
Luego empezamos a trabajar con pantallas y nos encontramos con que los colores "primarios" son los del sistema RGB (rojo, verde y azul) y que rojo y verde da amarillo.
Cualquiera que sepa algo de diseño sabe que son dos sistemas de color diferentes, el aditivo y el sustractivo, y que los colores primarios de cada sistema no son los mismos, aunque coloquialmente se les llame igual.
Pero claro, a un pobre programador como yo, al que si le sacas de lo suyo está totalmente perdido, estas cosas se le escapan ;-)
El problema es que el "rojo" del sistema RGB (#FF0000) en realidad es "rojo anaranjado", el "azul" RGB (#0000FF) es "azul violáceo".
En esta figura se ve la "equivalencia" entre los dos sistemas. Las mezclas funcionan entre dos colores alternos. Por ejemplo, rojo + verde = amarillo, verde + azul = cian, ...

Para saber más, este "post" en malaciencia.info

Esquinas redondeadas

A todos nos encantan las esquinas redondeadas en los diseños Web. Generalmente se hace con CSS e imágenes para componer las esquinas.

Vean el título de este artículo: la esquina superior derecha es en realidad una imagen especificada en la CSS.

Hasta donde conocía, la única forma de hacerlo era así, pero el otro día encontré un sitio donde explican cómo hacer esquinas redondeadas sólo con CSS. El truco es anidar varias etiquetas y darles diferentes márgenes y solapamientos.

Ésa es la versión básica. Para hacer más flexible el truco, se han programado una librería en JavaScript y una hoja CSS que simplifican en gran medida el uso de este "truco".

La página donde vi todo esto es ésta: Nifty Corners, de Alessandro Fulciniti.

Ejemplos:

• http://www.html.it/articoli/niftycube/nifty1.html


• http://www.html.it/articoli/niftycube/nifty2.html


• http://www.html.it/articoli/niftycube/nifty3.html


• http://www.html.it/articoli/niftycube/nifty4.html
  

El HTML es válido, por cierto. Tremendo lo que se puede hacer con CSS ...