Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Datos de búsqueda

Archive for Marzo, 2007

CSS: display run-in

Fecha de publicación: 2007/03/27

Para casos en los que el principio de un párrafo tenga importancia suficiente para ser un encabezado (h1h6) en lugar de un mero strong.

¿Qué hacer para que un encabezado y un párrafo situado a continuación (p) aparezcan al mismo nivel (en la misma línea del texto)?

Definir una regla CSS con display: run-in;. Tiene la pega de funcionar solamente en Opera (probado en la versión 9.10), y parece ser que funciona de mala manera en Safari 1.3.2, y de muy mala manera en Internet Explorer 5.2 de Mac, lo que indica que su uso no es muy recomendable.

El código XHTML utilizado es el siguiente (yo he utilizado un h2, pero valen todos):

<h2>A run-in heading.</h2>
<p>And a paragraph of text that follows it.</p>

Aplicar la regla display con el valor run-in al encabezado, con el siguiente código CSS:

h2 {display: run-in;}
h2:after{content: ". ";} /*para no tener que incluir el punto en el encabezado*/
p {background:lime; margin-left:20px;
width:200px; display:block;}/*Para darle forma al ejemplo*/

Viendo el resultado la caja del encabezado queda insertada en la del párrafo, cosa que no ocurre si la regla aplicada al párrafo (la última de todas) se aplicase al encabezado.

Ver ejemplo.

Referencias y enlaces relacionados

Datos del artículo:

Blogs como fuente de ideas y para estar al día en áreas especializadas

Fecha de publicación: 2007/03/07

Los blogs se han convertido en una fuente de información muy valiosa, siempre y cuando se realice una selección adecuada a las necesidades de información existentes. Son un gran complemento a revistas y libros (a los cuales no deben sustituir), ya que una de sus funciones principales es servir de medio de conversación en las áreas especializadas: en los diferentes blogs de un área especializada se expresan distintos puntos de vista acerca de un tema relacionado con dicha área, y esos puntos de vista son enriquecidos con los comentarios de los lectores, que aportan nuevas ideas.

Los blogs sirven para seguir la actualidad de un área día a día, una ventaja de la que no disponen las revistas, incluso las que tienen una periodicidad más frecuente.

Es muy sencillo abrir un blog y ponerse a escribir en él, y no es como en una revista, que para publicar hay que hacer un artículo en condiciones, pasar una revisión (el acertado peer review, aunque esté en crisis) y esperar a que el número de la revista en la que se publique el artículo salga.

En un blog se puede exponer una idea, aunque sea de una forma breve, o simplemente poner un enlace a otra página cuya información haya sido considerada interesante; o comentar brevemente la opinión acerca de un libro o un artículo de una revista que resulte interesante para el área de especialización del blog.

Los blogs también pueden servir como fuente de ideas en áreas especializadas, gracias al texto de sus contenidos, o por recomendaciones que hagan, de libros, de otros blogs, etc.

Un libro o una revista, aunque sean más serios, no tienen esa flexibilidad, ni esa interacción con sus lectores (posibilidad de hacer comentarios), ni tampoco la misma actualidad.

Como los artículos de los blogs no suelen ser muy extensos se captan muchas ideas en diferentes blogs en muy poco tiempo.

Además de los blogs, los sitios del estilo Delicious o Technorati también son una fuente de información muy efectiva ya que permiten hacer seguimiento de temas muy concretos mediante las etiquetas. Esta opción ayuda a encontrar más blogs que se ubiquen en el área de interés del lector.

Pautas para aprovechar adecuadamente la información de blogs de un área de especialización concreta

  • Identificar blogs de expertos y empresas relacionados con el campo de especialización.
  • Suscripción a los feed de esos blogs, y seguimiento de los comentarios que contienen, ya que también aportan ideas.
  • Suscripción a feeds de etiquetas relacionadas con el campo de especialización en sitios colaborativos como Agregax, Technorati o Delicious.
  • Organizar las páginas que más interesantes resulten mediante servicios del estilo de Delicious, de forma que se tenga bien organizada la información más relevante. O montar una base de datos a texto completo con esos contenidos interesantes (esta alternativa es interesante en caso de necesitar la disponibilidad de la información a largo plazo, por el tema de la fragilidad de las URLs).

Referencias

Datos del artículo:

Accesibilidad en la versión electrónica de la revista Tráfico y Seguridad Vial

Fecha de publicación: 2007/03/04

Tráfico y Seguridad Vial es una excelente revista (aunque ultimamente la calidad ha ido decreciendo y ha perdido objetividad) editada por la Dirección General de Tráfico.

La versión electrónica de la revista se distribuye en diferentes archivos PDF, uno por cada artículo o sección (cosa que la gente con conexión de 56K agradece mucho). Para acceder a esos archivos la revista tiene un sitio web, que nunca ha sido ejemplar en cuanto a cumplimiento de estándares, accesibilidad, usabilidad, etc.

Pero la versión actual es de vergüenza. A pesar de que la ley obliga a que los sitios web financiados con dinero público sean accesibles a alguna lumbrera se le ha ocurrido hacer la página en flash:

DISPOSICIONES ADICIONALES

Quinta. Accesibilidad para las personas con discapacidad y de edad avanzada a la información proporcionada por medios electrónicos.

Uno. Las Administraciones Públicas adoptarán las medidas necesarias para que la información disponible en sus respectivas páginas de Internet pueda ser accesible a personas con discapacidad y de edad avanzada de acuerdo con los criterios de accesibilidad al contenido generalmente reconocidos antes del 31 de diciembre de 2005.

Asimismo, podrán exigir que las páginas de Internet cuyo diseño o mantenimiento financien apliquen los criterios de accesibilidad antes mencionados.

Algunas capturas de pantalla:

Página inicial
Vista de la página inicial (JPG 260 KB).

Captura página inicial sin estilo
Página inicial con las hojas de estilo deshabilitadas.

Página inicial vista en Dillo
Página inicial en Dillo.

Código fuente de la página inicial
Parte del código fuente de la página inicial.

Creo que la captura de la página inicial en Dillo deja dicho todo lo que hay que decir. Dillo es un navegador que solo visualiza páginas accesibles, y en este caso no aparece practicamente nada.

El área de navegación en Flash, por supuesto, con todas sus “ventajas”.

De nuevo un gran trabajo de la Administración Pública.

Datos del artículo:

XHTML: Listas anidadas

Fecha de publicación: 2007/03/03

Las listas en XHTML pueden estar anidadas, usando al mismo tiempo diferentes tipos de listas (ver resultado en el navegador):

<dl>

<dt>Aplicaciones a utilizar:</dt>
<dd>
<ul>
 <li>Quanta</li>
 <li>The Gimp</li>
 <li>Mozilla Firefox</li>
</ul>
</dd>

<dt>Pasos a seguir:</dt>
<dd>
<ol>
 <li>Prototipado en papel de la interfaz y la estructura del sitio.</li>
 <li>Evaluar la usabilidad de los resultados obtenidos en los pasos anteriores.</li>
 <li>Escribir el código y crear las imágenes con las aplicaciones listadas.</li>
</ol>
</dd>

<dt>Nota:</dt>
<dd>Las aplicaciones utilizadas pueden variar.</dd>

</dl>

<dl>

Artículo relacionado: XHTML: creación de listas (odenadas, desordenadas y de definiciones).

Datos del artículo:

Firefox y SeaMonkey para GTK1

Fecha de publicación: 2007/03/03

En ocasiones resulta interesante poder utilizar un navegador Gecko en una máquina de pocos recursos. Los binarios oficiales de SeaMonkey y de Firefox solamente se hacen para GTK2, de forma que las máquinas con cierta antigüedad sufren un poco al ejecutarlos.

La solución pasa entonces por conseguir binarios compilados para GTK1, así se podrán usar mejor esas aplicaciones en máquinas lentas o incluso en sistemas un poco antiguos, como en el caso del SeaMonkey de la siguiente imagen, que se está ejecutando en Debian Woody 3.0:

Seamonkey en Debian Woody

Descargar binarios de Firefox y SeaMonkey compilados para GTK1. En el sitio de Mozilla también está disponible SeaMonkey para GTK1 (Contributed Builds).

Datos del artículo:

XHTML: creación de listas (ordenadas, desordenadas y de definiciones)

Fecha de publicación: 2007/03/01

Existen tres tipos de listas:

  • Listas desordenadas.
  • Listas ordenadas.
  • Listas de definiciones.

Listas desordenadas

Para crear listas desordenadas se utilizarán las etiquetas ul y li. Con la etiqueta ul se delimitará la lista, y con la etiqueta li se delimitarán los elementos de la lista.

Este es el código XHTML de una lista desordenada (ver resultado en el navegador):

<ul>
 <li>Elemento 1</li>
 <li>Elemento 2</li>
 <li>Elemento 3</li>
</ul>

Listas ordenadas

Se trata de listas numeradas. Funcionan de la misma forma que las ordenadas, pero cambiando la etiqueta ul por la etiqueta ol.

Este es el código XHTML de una lista ordenada (ver resultado en el navegador):

<ol>
 <li>Elemento 1</li>
 <li>Elemento 2</li>
 <li>Elemento 3</li>
</ol>

Listas de definiciones

Las listas de definiciones quedan delimitadas mediante la etiqueta dl. Cada elemento de la definición se divide en dos partes:

  • El término, delimitado por la etiqueta dt.
  • La definición delimitada por la etiqueta dd.

Este es el código XHTML de una lista de definiciones (ver resultado en el navegador):

<dl>
 <dt>Término 1.</dt>
 <dd>Texto asociado al término 1.</dd>
 
 <dt>Término 2.</dt>
 <dd>Texto asociado al término 2.</dd>
 
 <dt>Término 3.</dt>
 <dd>Texto asociado al término 3.</dd>
</dl>

Artículo relacionado: XHTML: Listas anidadas.

Referencia y enlaces relacionados

Datos del artículo:

  • Etiquetas:
  • Publicado en categorías: Desarrollo web, XHTML
  • Comentarios desactivados en XHTML: creación de listas (ordenadas, desordenadas y de definiciones)

Información del sitio