Outbook

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

Inicio que contiene a 2007 que contiene a junio

Datos de búsqueda

Archive for junio, 2007

Las tres capas del diseño web

Fecha de publicación: 2007/06/26

Las interfaces web se componen de tres capas:

  • Contenido.
  • Presentación.
  • Comportamiento.

Presentación y comportamiento son opcionales.

Contenido

Se trata del contenido y de su estructuración semántica: el documento HTML. Cada porción de texto deberá ser contenida en el elemento adecuado a su contexto (párrafos, listas, encabezados, etc.), o llevar la información adicional que sea necesaria (el texto alternativo en las imágenes, por ejemplo).

Aquí no se definirá absolutamente nada relacionado con la presentación: nada de configurar colores, tipografías, fondos, etc. Nada.

Si todo esto se hace correctamente se habrá dado un paso muy importante hacia la accesibilidad, y también en cuanto al posicionamiento en buscadores. El documento será legible sin necesidad de las otras dos capas.

Presentación

En esta capa se definirá el aspecto del contenido, mediante hojas de estilo CSS.

El CSS se introduce preferentemente en un archivo, o varios, separados del contenido.

Se pueden aplicar hojas de estilo para dispositivos específicos: pantalla (la más habitual), PDA, impresoras, lectores de pantalla, etc. De esta forma se podrá optimizar el aspecto de un sitio web atendiendo a las necesidades específicas de cada dispositivo.

Además hacer la capa de presentación separada de la de contenido tiene otra ventaja importante: con solo cambiar la hoja de estilo, cambia el aspecto de todo el sitio al que se aplique la misma. Un ejemplo interesante de esta ventaja es el CSS Zen Garden, donde con un mismo contenido pero con diferentes hojas de estilo se consiguen resultados muy variados.

Comportamiento

Se trata de añadir funcionalidades con algo más de complejidad, como elementos desplegables, rollovers, etc. Se hace mediante Javascript que interactue con el DOM.

El código Javascript deberá estar contenido en archivos externos, igual que las hojas de estilo en la capa anterior.

La adición de esta capa no debe impedir el correcto acceso al contenido.

Saber más

Datos del artículo:

Yahoo! soporta robots-nocontent

Fecha de publicación: 2007/06/14

robots-nocontent sirve para definir las partes de una página que no se quiere que sean indexadas por los buscadores.

Basta insertarlo en el atributo class de un elemento para que el contenido de dicho elemento no sea indexado:

<div class="robots-nocontent">
 <p>El contenido que hay en esta capa no se indexa</p>
</div>

Es muy interesante para su aplicación fuera de elementos de contenido, como áreas de navegación, pies de página, o cualquier elemento que sea común a todas las páginas de un sitio y que al mismo tiempo no sea necesaria su indexación.

Existe un microformato con un cometido similar (Robot exclusion profile), pero parece que Yahoo! ha decidido ir por su cuenta.

Saber más

Datos del artículo:

Safari 3 Beta para Windows: análisis breve

Fecha de publicación: 2007/06/12

En Windows XP me ha costado bastante hacerlo funcionar. Debe ser alguna incompatibilidad con algo que tenga instalado. En cambio, en Windows 2000 va como la seda.

La pega que se le puede poner es que en gran parte de las páginas hace desaparecer partes del texto, como puede observarse en la siguiente imagen:

Safari 3 Beta en Windows 2000 mostrando Outbook

Este problema con el texto parece que no se da con las páginas del sitio de Apple (¿Cual será su secreto?).

Un aspecto interesante es el sistema de renderizado de las tipografías, que es el utilizado en MacOS.

Me da la impresión de que Apple se ha precipitado al sacar una aplicación muy verde incluso siendo beta. Parece que será un buen sustituto (otro más) para Internet Explorer 6 en Windows 2000 (ya que Microsoft no se digna a actualizarlo a la versión 7).

Descargar Safari para Windows:

Datos del artículo:

Safari para Windows

Fecha de publicación: 2007/06/12

Parece que Apple ha sacado Safari para Windows. Se trata de una beta, muy verde todavía, que no consigo que funcione en mi Windows XP (ni en el de casa ni en el del trabajo). Si quieres probarlo está disponible para descargarlo.

Datos del artículo:

CSS: la propiedad z-index

Fecha de publicación: 2007/06/12

Artículo obsoleto: He publicado una nueva versión con una explicación más clara y con algunos errores corregidos.

Leer el resto del artículo

Datos del artículo:

CSS: la propiedad text-transform

Fecha de publicación: 2007/06/11

La propiedad de CSS text-transform es muy útil para transformar los caracteres de un texto en mayúsculas o minúsculas. Puede aplicarse a cualquier elemento.

Esta propiedad puede tener los siguientes valores:

  • capitalize: convierte en mayúscula la primera letra de cada palabra.
  • uppercase: convierte todas las letras en mayúsculas.
  • lowercase: convierte todas las letras en minúsculas.
  • none: es el valor aplicado por defecto en los navegadores cuando no se especifica otro. Sirve, además, para neutralizar los valores anteriores.

Su funcionamiento puede verse limitado cuando se utiizan caracteres que no pertenezcan al alfabeto latino.

En el siguiente ejemplo todos los caracteres de los elementos H1 existentes en el documento pasarían a estar en mayúsculas:

h1 {text-transform: uppercase;}

Ejemplo de uso con Javascript-DOM (solo se ha de poner uno de los valores):

Object.style.textTransform=none|capitalize|uppercase|lowercase

Referencias y enlaces relacionados

Datos del artículo:

Lucha propagandística en la Feria del Libro de Madrid 2007

Fecha de publicación: 2007/06/10

Estuve el pasado viernes en la Feria del Libro de Madrid. Hacía tropecientos años que no iba, y me divertí bastante, mirando libros y más libros, aunque solamente me compré uno.

Ya levaba allí un rato cuando me fijé en que en algunos de los puestos se exhibían carteles en contra del préstamo de pago en bibliotecas:

Cartel contra el préstamo de pago en las bibliotecas

Me llamó mucho la atención que haya gente que vive de vender libros que se oponga al préstamo de pago. Creo que eso demuestra a quien va a ir el dinero recaudado: a CEDRO y las grandes editoriales.

Y, que casualidad, poco después empecé a ver a bastante gente que ya había realizado alguna que otra adquisición. Y las bolsas que les habían dado con los libros llevaban publicidad de CEDRO, como la mía, que se puede ver en la foto:

Bolsa que daban con los libros que se compran en la feria del libro

Parece que los de CEDRO saben donde hay que atacar.

Artículos relacionados en Outbook

Datos del artículo:

Internet Explorer 6: Duplicación de caracteres

Fecha de publicación: 2007/06/07

Actualizado 2010-06-02: solución del color de fondo.

Hay ocasiones en las que Internet Explorer 6 duplica caracteres. Se trata de un molesto bug que se da, en principio, ante las siguientes condiciones:

  • Que haya dos o más comentarios seguidos.
  • Que el elemento flotado quede a menos de 3px del límite derecho de su contenedor.

Con un solo comentario no ocurre nada, pero con dos o más comentarios seguidos se manifiesta este molesto bug. A mayor cantidad de comentarios, mayor cantidad de caracteres repetidos.

Ejemplo de código para que aparezca el problema descrito:

<div style="float:left">De esta no se repiten</div>

<!-- Ambos comentarios deben incluirse para que salga el fallo -->
<!-- Ambos comentarios deben incluirse para que salga el fallo -->

<div style="float:left; width:100%">
En esta se van a repetir caracteres.
</div>

Y sale algo como esto en IE6 (la última línea es lo que se repite):

repeated characters

s.

Hay dos soluciones:

  • Quitar los comentarios.
  • Meter comentarios condicionales, en lugar de los habituales, que sean ignorados por Internet Explorer, y que el resto de navegadores tratarán como si se tratase de un comentario normal.

Otra posible solución será asignarle al elemento un color de fondo en la CSS.

Un ejemplo del comentario condicional:

<!--[if !IE]>Inserta aquí el comentario<![endif]-->

Saber más

Datos del artículo:

Configurando el idioma de teclado en Slax 5.1.8

Fecha de publicación: 2007/06/05

Es sencillo. Basta con teclear el siguiente comando en la aplicación de consola en la interfaz gráfica: setxkbmap, más el código de idioma.

Para el idioma español se usaría el siguiente comando: setxkbmap es.

Datos del artículo:

Javascript: ejecutar una función en la carga de página

Fecha de publicación: 2007/06/05

Existen al menos dos formas:

  • Mediante el atributo onload en el elemento body. El valor de dicho atributo será la función Javascript que se quiera ejecutar.
  • En el archivo Javascript que se vincule desde la página, mediante window.onload, y mencionando a continuación la función que se desea ejecutar.

Un ejemplo del uso del onload:

<body onload="funcion_a_ejecutar(parametro)">[...]</body>

Un ejemplo para hacerlo desde un archivo Javascript:

window.onload = funcion_a_ejecutar;

Lo adecuado sería usar la segunda opción, ya que ayuda a mantener limpio el código HTML.

Saber más

Datos del artículo:

Información del sitio

Outbook está basado en WordPress

Licencia Reconocimiento-NoComercial-CompartirIgual

Feed RSS: