Outbook

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

Inicio que contiene a Estándares web

Datos de búsqueda

Etiqueta ‘Estándares web’

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:

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:

Opera 9.5

Fecha de publicación: 2008/06/12

Por fin ha salido Opera 9.5, navegador ligero, con soporte de estándares y multiplataforma (Windows, Linux, Mac, Solaris).

Captura de pantalla de Opera 9.5 en Fedora 8
Opera 9.5 en Fedora 8 con KDE 3.5.9

Aparte de las novedades en soporte de estándares, la versión de Linux añade compatibilidad con la versión 9 de Adobe Flash Player.

Puede ser descargado en el sitio web de Opera.

Y la semana que viene (17 de junio de 2008) Firefox 3.

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:

Atributos de idioma en HTML: lang y hreflang

Fecha de publicación: 2007/11/06

El atributo lang

El atributo lang sirve para definir el idioma del contenido de un elemento.

Hay que definirlo en primer lugar en el elemento HTML, para definir el idioma del documento:

<html lang="es">

Y una vez definido el idioma principal del documento, en todos aquellos elementos en los que su contenido sea distinto a dicho idioma principal:

<a lang="en">
<p lang="fr">
<span lang="zh">

También puede añadirse una variante de idioma, poniendo tras el valor de idioma una abreviatura de país, por ejemplo inglés de Estados Unidos:

<p lang="en-us">

El atributo hreflang

El atributo hreflang sirve para definir el idioma del destino de un enlace (elemento A):

<a hreflang="en">

Valores de los atributos

Los valores que se utilizan en los atributos anteriormente mencionados son los definidos en la norma ISO 639 (los de dos caracteres).

Accesibilidad

La referencia WAI WCAG 1.0 en su punto 4.3, y la norma UNE 139803 en su punto 4.4.4 requieren la presencia del atributo lang allí donde sea necesario para poder cumplir la prioridad 1 (A) de accesibilidad.

WAI WCAG 1.0:

4.3 Identify the primary natural language of a document. [Priority 3]

For example, in HTML set the "lang" attribute on the HTML element. In XML, use "xml:lang". Server operators should configure servers to take advantage of HTTP content negotiation mechanisms ([RFC2068], section 14.13) so that clients can automatically retrieve documents of the preferred language.

UNE 139803:

4.4.4 Se debe especificar el idioma principal de la página Web

Nota – Se deben tener en cuenta las recomendaciones recogidas en el informe RFC 3066 de la IETF (The Internet Engineering Task Force – http://www.ietf.org) y las normas internacionales de códigos de idiomas (ISO 639) y países (ISO 3166).

EJEMPLO: Se debe usar el atributo "lang" en la etiqueta "html", en HTML o XHTML, marcando el idioma correspondiente, por ejemplo con "es" para español, "ca" para catalán, [...] "gl" para gallego, "en" para inglés, "fr" para francés, etc. También debe usarse para indicar las variaciones idiomáticas cuando sea apropiado, por ejemplo: "es-mx" para el español de México, "es-cl" para el de Chile, etc.

Enlaces relacionados

Datos del artículo:

CSS: Dimensiones y tamaños de fuente en EM

Fecha de publicación: 2007/08/13

El código CSS que se utilizará para obtener la equivalencia es el siguiente:

body, html{font-size: 62.5%;}
body {font-size: 101%;}
html>body {font-size: 100%;}
*:first-child+html body {font-size: 101%;}

Antes de crear ninguna regla la equivalencia de 1em es 16px. Por ello puede resultar un poco complicado hacer los cálculos para montar un CSS con medidas en EM.

Para simplificar el uso de dicha unidad de medida se da al elemento HTML un tamaño de fuente de 62.5%:

body, html{font-size: 62.5%;}

La siguiente cuenta aclara un poco la razón del uso del 62.5%:

(16px/100)*x=10px

Posteriormente se debe dar un tamaño de fuente del 100% al elemento BODY, aunque para Internet Explorer será de 101%, para que le salgan las cuentas:

body {font-size: 101%;}

Para los navegadores restantes si se define un 100% de tamaño de fuente, pero habrá que tirar de hack de selector CSS, para que Internet Explorer no lo pille:

html>body {font-size: 100%;}

Pero como este hack tiene efecto en Internet Explorer 7 hay dos opciones:

  • Cambiar el hack anterior a uno que excluya a todas las versiones de Internet Explorer.
  • Añadir un hack específico para Internet Explorer 7, que es lo que se ha hecho en el código expuesto al principio.

Si se opta por la primera opción, excluir todas las versiones de Internet Explorer 7, se usará esta regla:

html>/**/body {font-size: 100%;}

Y si se opta por el hack de Internet Explorer 7, se utilizará esta otra:

*:first-child+html body {font-size: 101%;}

Este documento está disponible en formato Texto OpenDocument.

Datos del artículo:

CSS: El modelo de caja

Fecha de publicación: 2007/08/11

El modelo de caja se compone de las siguientes propiedades:

  • width: la anchura del elemento.
  • padding: el relleno del elemento.
  • border: el borde del elemento.
  • margin: el margen del elemento.

Y viene a ser algo así:

Modelo de caja en CSS

O así (imagen de Wikipedia):

Modelo de caja

Un ejemplo

Supongamos que tenemos un elemento DIV que deba tener una anchura total de 600 píxeles, un margen respecto a otros elementos de 10 píxeles por sus cuatro lados, un borde de 3 píxeles y un relleno de 20 píxeles.

Al especificar la propiedad width habrá que dar 600px para Internet Explorer 5.5, pero para el resto de navegadores habrá que restar el los rellenos (padding) y los bordes (border): hay que restar a los 600px de ancho los 3px de borde izquierdo, los 20 px de relleno izquierdo, los 20px de relleno derecho y los 3px de borde derecho. Quedarían 554px.

Y la duda que probablemente surja es: ¿como especifico en una misma regla CSS la anchura para IE 5.5 y la anchura para el resto de navegadores? Muy sencillo. Así quedaría la regla CSS:

div {
 width:600px;
 width:554px;
 padding:20px;
 border:3px solid #000000;
 margin:10px;
}

Como se puede observar hay dos anchuras definidas: primero la de IE 5.5, y después la del resto de navegadores con una barra invertida que IE 5.5 no es capaz de leer, pero que si pueden leer el resto, y que deja inutilizada la anchura de IE 5.5.

Para la altura sirve el mismo procedimiento, solo que la barra invertida se posiciona tras el segundo caracter de la propiedad: height.

Esto también se da en el modo chapuzas de IE6 y de IE7.

Actualizado 2007-09-17.

Relacionados

Enlaces externos:

Datos del artículo:

HTML: el atributo scope

Fecha de publicación: 2007/07/31

El atributo scope se utiliza para vincular la información contenida en las diferentes celdas de una tabla.

Este atributo especifica el conjunto de celdas cuya información se refiere a la celda que contiene este atributo.

Supone una alternativa simple al atributo headers.

El atributo scope puede tomar uno (solamente uno) de los siguientes valores:

  • row. La celda se refiere al resto de celdas que componen su fila.
  • col. La celda se refiere al resto de celdas que componen su columna.
  • rowgroup. La celda se refiere al las celdas que componen su grupo de filas.
  • colgroup. La celda se refiere al las celdas que componen su grupo de columnas.

Saber más sobre el atributo scope.

Datos del artículo:

El elemento OL y el atributo start

Fecha de publicación: 2007/07/18

En el caso de crear una serie de listas ordenadas que tengan continuidad de una a otra puede ser interesante que algunas empiecen por un número distinto de 1.

La solución a ese problema es el atributo start en el eelemento OL. Pero resulta que el W3C lo considera fuera de uso, por lo que solo valida para HTML 4.01 Transitional. Esto es lo que dice la referencia HTML acerca del atributo start:

start = number [CN]
Deprecated. For OL only. This attribute specifies the starting number of the first item in an ordered list. The default starting number is “1″. Note that while the value of this attribute is an integer, the corresponding label may be non-numeric. Thus, when the list item style is uppercase latin letters (A, B, C, …), start=3 means “C”. When the style is lowercase roman numerals, start=3 means “iii”, etc.

Se puede hacer por CSS, pero aquí surge el inconveniente de que cuando CSS no esté disponible no se verá la numeración.

No creo que sea lógico dejar fuera de uso este atributo, ya que se valor podría considerarse semántico, y no solo de presentación. Creo que en W3C no han estado muy acertados al tomar esta decisión.

Saber más

Datos del artículo:

HTML: diferencias entre las DTD

Fecha de publicación: 2007/05/06

Son tres las DTD de HTML: Strict, Transitional y Frameset.

  • Strict (HTML 4.01 Strict): es la de uso recomendado, destinada a separación de presentación y contenido.
  • Transitional (HTML 4.01 Transitional): esta DTD permite el uso de elementos obsoletos, para documentos que no tengan una total separación de presentación y contenido.
  • Frameset (HTML 4.01 Frameset): para páginas con marcos. De todas formas los marcos son obsoletos.

Referencias y enlaces relacionados

Datos del artículo:

Información del sitio

Outbook está basado en WordPress

Licencia Reconocimiento-NoComercial-CompartirIgual

Feed RSS: