Outbook

XHTML-CSS, Accesibilidad, PHP y más

Inicio que contiene a Archivo por Etiqueta 'Elementos HTML'

Datos de búsqueda

Etiqueta ‘Elementos HTML’

Simulación de elemento SELECT con jQuery

Fecha de publicación: 2010/07/11

He preparado un componente que simula un elemento SELECT, en el que se puede seleccionar una sola opción, que evita algunas de las limitaciones de los elementos SELECT de verdad, pudiendo dar formato a las opciones que contiene, añadir imágenes, etc.

Leer el resto del artículo

Datos del artículo:

Javascript: establecer atributo readonly en campos de formulario

Fecha de publicación: 2009/12/29

El atributo readonly se establece en Javascript mediante true o false:

var campo = document.getElementById('campo_formulario');
campo.readOnly = true; // Se añade el atributo
campo.readOnly = false; // Se quita el atributo

Un detalle en el que hay que fijarse, ya que de ello dependerá que el script funcione, es la "O" mayúscula al especificar el atributo.

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:

Enmascaramiento de contraseñas en los formularios

Fecha de publicación: 2009/06/25

Actualizado 2009-06-30.

Según Jakob Nielsen Ocultar los caracteres de un campo de contraseña (mediante <input type="password" id="ejemplo" name="ejemplo" />) puede ocasionar algunos problemas. Considero que se pasa un poco, de modo que expongo los que creo que son más importantes:

  • El usuario no ve lo que está escribiendo, lo que facilita que se equivoque.
  • Utilización de contraseñas más sencillas a la vez que inseguras o uso del copiar-pegar para introducir la contraseña.
  • En dispositivos móviles, en los que la escritura es más incómoda e imprecisa el usuario puede desesperarse, pensando si habrá tecleado bien.

He de aclarar que en bastantes dispositivos móviles en los campos de contraseña el caracter introducido está visible durante un breve espacio de tiempo, pero puede que no sea suficiente.

Nielsen también menciona que ocultar los caracteres de contraseña puede hacer que los usuarios se desanimen a entrar en un sitio web. Esto me parece un poco exagerado.

Puede que sea interesante dejar visibles los caracteres de los campos de contraseña, pero, si nos decantamos por esa opción habrá usuarios que no se sientan seguros, ya que la contraseña será visible por otras personas (imaginemos punto de acceso a Internet en un lugar público). Aquí Nielsen sugiere el uso de un checkbox para activar o desactivar la ocultación de los caracteres.

Ejemplo en Winzip

Capturas de la pantalla de encriptación de WinZip 12, en las que se puede apreciar la casilla que alterna la contraseña visible u oculta:

Ventana de encriptación de WinZip 12 con contraseña oculta

Ventana de encriptación de WinZip 12 con contraseña visible

Enlaces relacionados

Datos del artículo:

HTML y Accesibilidad: el atributo longdesc en imágenes

Fecha de publicación: 2008/12/15

Cuando se utilizan imágenes en una web la práctica habitual es darles un texto alternativo mediante el atributo alt, o dejar vacío dicho atributo en el caso de que la función de la imagen sea meramente decorativa.

Pero nos podemos encontrar con el caso de tener una imagen a la que haya que asociarle un texto alternativo, pero dicho texto sea excesivamente largo. Para esas ocasiones está el atributo longdesc.

Ejemplo de imagen con textos largosEjemplo de imagenes con texto largo

El atributo longdesc ha de ser siempre una URL que lleve a una descripción de la imagen, en la misma o en otra página:

longdesc = uri [CT]
This attribute specifies a link to a long description of the image. This description should supplement the short description provided using the alt attribute. When the image has an associated image map, this attribute should provide information about the image map’s contents. This is particularly important for server-side image maps. Since an IMG element may be within the content of an A element, the user agent’s mechanism in the user interface for accessing the “longdesc” resource of the former must be different than the mechanism for accessing the href resource of the latter.

Se puede dar una URL externa o, como en el ejemplo expuesto más adelante, un marcador de página. En ese caso bastaría con dar un atributo id que haga de marcador al párrafo con la descripción. Ejemplo de como podría quedar el código HTML

<p><img src="imagen1.jpg" alt="Promoción" longdesc="#descripcion1" /></p>
<p id="descripcion1">Descripción de la primera imagen.</p>

<p><img src="imagen2.jpg" alt="Promoción" longdesc="#descripcion2" /></p>
<p id="descripcion2">Descripción de la segunda imagen.</p>

Lectores de pantalla

Se supone que el longdesc es para lectores de pantalla, pero resulta que los hay que no dejan elegir al usuario si quieren ir o no a la descripción, y les llevan directamente.

Una solución podría ser un enlace oculto (pero no mediante display:none;, que si no los lectores de pantalla no lo pillan) que llevase a la URL de la descripción.

Enlaces relacionados

Datos del artículo:

Personal dedicado a la gestión de contenidos: ¿Qué deben saber?

Fecha de publicación: 2008/10/20

Un aspecto que debe cuidar una empresa cuando dispone de un sitio web es el del mantenimiento y creación de contenidos. Se suelen utilizar gestores de contenido, lo que facilita dicha tarea.

Y es ahí donde pueden surgir problemas. ¿Quién se dedica a introducir y modificar los contenidos? Hay ocasiones, incluso en compañías enormes que son la cabeza visible de su sector, que esa tarea se encarga a personas sin el más mínimo conocimiento de HTML.

Esto ocasiona que a veces un portal que se ha elaborado respetando estándares y accesibilidad acabe perdiendo dichas características, de modo que la inversión extra realizada para ello resulta un desperdicio.

Las personas que se dediquen a realizar estas funciones no tienen por que saber de maquetación HTML-CSS, pero si deben tener unos conocimientos básico de HTML que no es muy complicado de aprender:

  • Concepto de etiqueta HTML.
  • Etiquetas y atributos básicos:
    • DIV, SPAN.
    • H1-H6, P, BR, STRONG, EM.
    • BR.
    • DL, UL, OL, DL: las etiquetas para listados.
    • TABLE, CAPTION, COL, COLGROUP, THEAD, TBODY, TFOOT, TR, TH, TD etiquetas para tablas. Debe también saber hacer uso del atributo scope.
    • IMG: debe conocer al menos el atributo alt.
    • Los atributos id y class.

Además deben saber en que momento utilizar cada etiqueta y como hacer que el contenido que están generando sea mínimamente accesible.

Datos del artículo:

HTML: cuando se puede usar el atributo alt en el elemento input

Fecha de publicación: 2008/01/22

El atributo alt en el elemento input solo debe usarse si el atributo type contiene el valor image.

Saber más sobre el elemento input y sobre la obligatoriedad de la inclusión del atributo alt

Datos del artículo:

HTML: el elemento COLGROUP

Fecha de publicación: 2007/08/31

El elemento COLGROUP tiene como objetivo crear grupos de columnas dentro de una tabla y hacer que todas las columnas que agrupe compartan los atributos definidos en este elemento.

En primer lugar veamos donde se coloca el elemento COLGROUP dentro de la tabla:

<table>
 <colgroup>
  ...
 </colgroup>
 <thead>
  ...
 </thead>
 <tbody>
  ...
 </tbody>
</table>

Como puede observarse se debe colocar tras la etiqueta de apertura del elemento TABLE.

Es en el propio elemento COLGROUP donde se define el número de columnas mediante el atributo span. En el siguiente ejemplo se puede observar un grupo de columnas compuesto por 10 columnas:

<colgroup span="10"></colgroup>

En el siguiente ejemplo hay 4 columnas, todas con la misma anchura:

<colgroup>
 <col width="25%">
 <col width="25%">
 <col width="25%">
 <col width="25%">
</colgroup>

Puesto que todas tienen la misma anchura sería mejor definir el atributo de anchura (width) en el elemento COLGROUP en lugar de hacerlo en COL, añadiendo además el atributo span para especificar la cantidad de columnas:

<colgroup span="4" width="25%"></colgroup>

Otro ejemplo:

<colgroup>
 <col width="20%">
 <col width="20%">
 <col width="25%">
 <col width="35%">
</colgroup>

En este caso la solución adecuada sería la separación en dos grupos:

<colgroup span="2" width="20%"></colgroup>
<colgroup>
 <col width="25%">
 <col width="35%">
</colgroup>

Enlaces relacionados

Datos del artículo:

Información del sitio

Outbook está basado en WordPress

Licencia Reconocimiento-NoComercial-CompartirIgual

Feed RSS:


Fatal error: Call to undefined method WP_Error::get_item_quantity() in /homepages/16/d223158695/htdocs/web/blog.outbook.es/wp-content/plugins/wordpress-php-info/common/cr-common.php on line 215