Outbook

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

Datos de búsqueda

Categoría: ‘XHTML’

HTML 5 y Jquery: Componente de buscador con placeholder

Fecha de publicación: 2011/03/30

Fragmento de HTML 5 con un formulario de búsqueda, en el que se generará el rollover del botón de búsqueda mediante Javascript, y se simulará el placeholder también mediante Javascript en navegadores no soportado.

Leer el resto del artículo

Diferenciación de versiones de Internet Explorer sin hacks de CSS

Fecha de publicación: 2011/01/19

Resulta habitual encontrarse con que las distintas versiones de Internet Explorer interpretan de forma distinta ciertas propiedades CSS, y que sea necesario utilizar engorrosos selectores para filtrar las versiones que dan problemas, vincular hojas de estilo mediante comentarios condicionales, Javascript, etc.

Leer el resto del artículo

Datos del artículo:

HTML: Elementos de cita BLOCKQUOTE, Q y CITE

Fecha de publicación: 2011/01/13

Hay tres elementos que intervienen en las citas:

  • BLOCKQUOTE
  • Q
  • CITE

Leer el resto del artículo

Datos del artículo:

Capas condicionales para evitar el uso de hacks CSS

Fecha de publicación: 2010/04/21

En muchas ocasiones las distintas versiones de Internet Explorer interpretan la CSS un poco como quieren. Y es por eso que utilizamos hacks CSS (en inglés), que aunque en muchos casos cumplen con los estándares, de cara al futuro pueden ser un riesgo ¿Y si futuros navegadores los empiezan a interpretar? ¿Y si un navegador deja de necesitar esa regla CSS pero la sigue interpretando?.

En Alsacreations proponen la inserción mediante comentarios condicionales de Internet Explorer de capas con clases referidas a cada una de las versiones de Internet Explorer (enlace externo, en francés).

Leer el resto del artículo

Datos del artículo:

HTML: uso de atributos id, headers y axis en tablas

Fecha de publicación: 2010/02/16

Habitualmente se utiliza el atributo scope en las tablas para definir la relación de las celdas con las columnas.

Leer el resto del artículo

Datos del artículo:

HTML 5: Atributo placeholder

Fecha de publicación: 2010/01/09

Actualizado 2011-03-30: nuevos navegadores con soporte.

Resulta muy habitual encontrarse con campos de texto que contienen un valor por defecto que ayuda al usuario a comprender que información debe introducir en dicho campo. El comportamiento habitual es que cuando el usuario activa el campo el texto desaparezca.

Este es el estado antes de activar el campo y una vez se desactiva sin haber introducido datos:

Atributo placeholder (campo inactivo)

Y este es el estado del campo activado antes de haber introducido información:

Atributo placeholder (campo activo)

Para obtener ese efecto es necesario el uso de Javascript, pero con HTML 5 eso se va a terminar.

Leer el resto del artículo

Datos del artículo:

Cumpliendo el punto 2.4.4 de WCAG 2.0: Propósito del enlace

Fecha de publicación: 2009/12/27

Punto 2.4.4. de WCAG 2.0:

2.4.4 Link Purpose (In Context): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A).

El propósito de cada enlace debe ser determinado unicamente por su propio texto. También puede ser determinado por su contexto salvo si resultase ambiguo (esto es mejor evitarlo si resulta posible).

Leer el resto del artículo

Datos del artículo:

Que hacer cuando el elemento OBJECT tapa una capa posicionada

Fecha de publicación: 2009/11/11

Suele pasar que cuando hay capas emergentes y animaciones flash la capa se queda por debajo del Flash.

Basta con añadir esto dentro del elemento OBJECT:

<param name="wmode" value="transparent" />

Un ejemplo completo:

<object type="application/x-shockwave-flash" data="fichero.swf">
 <param name="wmode" value="transparent" />
 <param name="movie" value="fichero.swf" />
 <param name="quality" value="high" />
 <p>No dispone del plugin Flash Player, si lo desea puede <a href="http://www.adobe.com/go/getflashplayer">descargar el plugin</a>. [Resto de contenido alternativo].</p>
</object>

Este método tiene una pega: no funciona en sistemas Linux.

Datos del artículo:

XHTML: Nube de etiquetas accesible

Fecha de publicación: 2009/09/18

Las nubes de tags suelen estar conformadas por un grupo de palabras que aparecen en distintos tamaños según la importancia que tengan. Pueden ir en un solo párrafo o bien en elementos de lista.

Para darles los tamaños es necesario darles una clase (no vale el atributo style, ya que supone mezclar presentación y contenido) o utilizar etiquetas EM y STRONG anidadas. En el segundo caso, en cuanto haya unas cuantos niveles de importancia habrá un montón de etiquetas anidadas dentro de otras, y el usuario no podrá distinguir adecuadamente cual tiene mayor importancia salvo por su aspecto visual.

Si la etiqueta más grande es la más importante, ¿por que no ponerla la primera?

En conclusión:

  • Da lo mismo utilizar un párrafo o una lista.
  • Se deben utilizar clases para definir los tamaños.
  • Las etiquetas deben ir en orden de mayor a menor importancia

Un ejemplo:

<p>
 <strong>Etiquetas<span class="oculto"> (de mayor a menor importancia)</span>:</strong>
 <a href="#" class="s5">Etiqueta 1</a>,
 <a href="#" class="s4">Etiqueta 2</a>,
 <a href="#" class="s3">Etiqueta 3</a>,
 <a href="#" class="s2">Etiqueta 4</a>,
 <a href="#" class="s1">Etiqueta 5</a>,
 <a href="#">Etiqueta 6</a>,
</p>

Enlace relacionado: Marking Up a Tag Cloud (24 Ways).

Datos del artículo:

Web móvil: el protocolo WTAI

Fecha de publicación: 2009/01/30

El protocolo WTAI sirve para insertar enlaces en páginas y que al activarlos el dispositivo móvil ofrzca realiza una llamada al número de teléfono especificado en el enlace o guardarlo en la lista de contactos.

El valor del atributo href del enlace tiene el siguiente formato:

wtai://wp/mc;##########

Ejemplo de enlace para realizar llamada:

<a href="wtai://wp/mc;911234567">Llamar al número 91 123 45 67</a>

Ejemplo de guardar en contactos:

<a href="wtai://wp/ap;911234567;Nombre Contacto">Guardar en contactos el número 91 123 45 67</a>

Saber más

Datos del artículo:

Información del sitio