tecnologías web y xml - cd universidad de...

HTML

Jose Emilio Labra Gayo

Departamento de Informática

Universidad de Oviedo

Jose Emilio Labra Gayo, Universidad de Oviedo

Proceso de Estandarización

¿Dónde está tu tecnología favorita?

Idea brillante

Éxito

(Diversificación) Necesidad

de estándar

Primeros

prototipos

Adopción

del estándar

(limitaciones)

Especificación

(comité)

Internacionales

ISO, W3C, IETF,

ECMA, WHATWG, etc.

No estandarización

Estandarizar algo que no tiene éxito

Estándar demasiado pronto

Estándar demasiado tarde

Comités poco representativos

Estándar sin prototipos

No adoptar el estándar

etc., etc.

Posibles perversiones...


Evolución

GML1970

∶

1985

1990

1995

2000

2005

2010

2015

Generalized Markup Language(C.Goldfarb, E. Moshie, R. Lorie)

SGML

HTML

Standard Generalized Markup Language(ISO)

Hypertext Markup Language(T. Berners Lee)

HTML 2.0 (IETF)

HTML 3.2 (W3c)

HTML 4.01 (W3c)XML (W3c)

XHTML 1.0(W3c)

XHTML 2.0Borrador (W3c) HTML5Borrador (WHATWG)

HTML5Borrador (W3c & Whatwg)

X


HTML 5

Evolución de HTML 4.01 (compatibilidad hacia atrás)

Admite 2 Sintaxis: HTML y XML

Modelo de procesamiento estándar

Mejorar interoperabilidad entre implementaciones

Incluye API DOM

Antes estaba separada

Describe cómo gestionar errores

Antes se dejaba libertad a las implementaciones

Facilita desarrollo de aplicaciones Web


Principios de diseño

Compatibilidad

Soportar contenido existente

Degradado cortés: alternativas para navegadores anteriores

Reutilizar características que ya se usan

Utilidad

Resolver problemas existentes

Separación: estructura, presentación, comportamiento

Interoperabilidad

Comportamiento y gestión de errores definidos

Acceso universal

Independencia de medios, internacionalización y accesibilidad


2 sintaxis

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Ejemplo</title>

</head><body><p>Algo de texto</p>

</body></html>

<?xml version="1.0"encoding="UTF-8"?>

<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Ejemplo</title>

</head><body><p>Algo de texto</p>

</body></html>

HTML XHTML

Tipo MIME:text/html

Tipo MIME: application/xmlapplication/xhtml+xml


Tipo de documento

Solamente es necesario

Antes:Estricto:<!DOCTYPE HTML PUBLIC

"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Transicional:<!DOCTYPE HTML PUBLIC

"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Con marcos:<!DOCTYPE HTML PUBLIC

"-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Más información: http://hsivonen.iki.fi/doctype/

<!DOCTYPE html>


Sintaxis HTML

HTML5 ya no tiene sintaxis SGML ni XML

No hay declaraciones de espacios de nombres

Se especifica cómo tratar errores

Gestión de errores: modelo draconiano vs flexibilidad

Sintaxis simplificada

No siempre es obligatorio cerrar etiquetas

No es obligatorio poner entre comillas valores simples

<input name=tlfno disabled>

HTML

<input name="tlfno" disabled="" />=XHTML


Elementos

Elemento:

<etiqueta atributo1="valor1" atributo2="valor2"...>. . . contenidos . . .

</etiqueta>

Se pueden anidar elementos <externo><interno>texto

</interno></externo>

…pero no se pueden entrelazar <externo><interno>texto

</externo> </interno>


Elementos vacíos

Elementos sin contenido

<img src="foto.png" alt="Paisaje asturiano"></img>

<img src="foto.png" alt="Paisaje asturiano" />

En XML pueden simplificarse como:

<img src="foto.png" alt="Paisaje asturiano" >

En HTML, no es obligatorio cerrar etiquetas siempre:


Atributos

El orden de los atributos no es significativo

No puede haber 2 atributos con el mismo nombre

Pueden usarse comillas dobles o simples

<body onLoad="alert('Hola')"onUnload='alert("Adios")'>

. . .</body>

Comentarios HTML

Texto entre 

Comentarios condicionales (Sólo Internet Explorer)

<head><title>Ejemplo</title></head>

<p>No estás usando Internet Explorer</p>


Estructura de HTML

<html><head>

...metadatos</head><body>

...contenido</body>

</html>

Elemento raíz <html> contiene:

<head> metadatos

<body> contenido de la página

NOTA

<html> puede tener atributo manifest.

Permite indicar ficheros a descargar

cuando se ejecute offline

= HTML4


head

Especifica metadatos

Puede contener un elemento <title> (en HTML4 era obligatorio)

Además, puede contener:

<meta>

<link>

<style>

<base>

<command>

<script>

<noscript>

= HTML4


<head><title>Ejemplo</title><meta charset="utf-8" ><meta name="author" content="Jose Torres">...

</head>

meta

Permite incorporar metadatos. Ejemplos:

<meta http-equiv="Content-type" content="text/html; charset=UTF-8">

Antes


<head>...

<link rel="next" href="capitulo3.html"><link rel="prev" href="capitulo1.html"><link rel="author license" href="acercaDe.html"></head>

link

Permite enlazar a otros recursos.

Atributo href indica el recurso al que se enlaza

Atributo rel indica el tipo de enlace, puede ser:

author, help, license, next, prev, prefetch, stylesheet, …

Pueden realizarse varios tipos de enlace a la vez

= HTML4


link stylesheet

rel="stylesheet" permite asociar una hoja de estilos

type="text/css" es el valor por defecto

media permite especificar el tipo de medio

all (por defecto), screen, print, projection,…

title permite dar un nombre a la hoja de estilos

alternate stylesheet indica que es un hoja alternativa

<head>...<link rel="stylesheet" href="estilo.css" title="Azul"><link rel="alternate stylesheet" href="rojo.css" title="Rojo"><link rel="stylesheet" href="impreso.css" media="print">

</head>

= HTML4


link alternate

rel="alternate" indica enlaces alternativosEjemplo: enlazar RSS

<head>...<link rel="alternate" type="application/atom+xml"

title="Blog en Atom" href="blog.atom" >. . .

</head>

= HTML4


style

Permite incrustar declaraciones de estilo

Pueden afinarse estilos de una hoja de estilos

En general, es mejor utilizar enlaces a ficheros externos

<head>...<link rel="stylesheet" href="estilo.css" ><style>

p { text-align: justify; }p:first-letter {font-size: 3em; }

</style></head>

= HTML4


base

Permite especificar la URI de base

Las URIs relativas tomarán dicha URI como base

<html><head><title>Noticias</title><base href="http://www.example.com/noticias/index.html">

</head><body><a href="historico.html">Historico</a></p></body></html>

http://www.example.com/noticias/historico.html

Apunta a:

= HTML4


script

Permite añadir interactividad

type="text/javascript" por defecto

Puede ser:

Externo: Mediante src

Interno: Incrustado directamente (puede usarse para datos)

<head>...<script src="jquery.js"></script><script>$(document).ready(function() {$("a").click(function() {alert("Has pulsado!");

});});

</script></head>. . .

También existe <noscript>:muestra su contenido si está deshabilitado el scripting

= HTML4


body

Especifica el contenido del documento

Sólo debe haber un elemento <body>

Diversos atributos permiten controlar eventos de página

<html><head><script>function pon(msg) {

document.getElementById('evento').textContent = msg;}

</script></head><body onload="pon('onload')"

onresize="pon('resize')" ><p>Evento: <span id="evento">nada</span></p></body></html>

= HTML4


Elementos de Estructura

HTML5 contiene nuevos elementos para para definir la

estructura semántica del documento

HTML5 outliners: Muestran estructura del documento

h1,h2,…h6 Títulosdiv Agrupa elementos de contenidosection Sección, puede incluir encabezadosarticle Artículohgroup Grupo de cabeceranav Listas de navegaciónaside Contenido auxiliarheader Cabecerafooter Pieaddress Define datos de contacto figure Figurasdetails Detalles opcionales


h1, h2, …h6

Definen títulos de distinto nivel

Nivel de estructura definido por el número (h1…h6)

Problema para cortar/pegar contenido

<body><h1>La primavera</h1><h2>Introducción</h2><p>... </p><h2>Primera parte: Agentes</h2><h3>Las flores</h3><p>...</p>

<h3>Las personas</h3><p>...</p>

<h2>Segunda parte: Acciones</h2><h3>El amor</h3><p>...</p>

<h3>La felicidad</h3><p>...</p>

</body>

= HTML4


div

Se utiliza para agrupar contenido

class, id, lang, etc. permiten seleccionar grupos div

No tiene significado por si mismo

Abuso de div mezclando características de presentación

Recomendación HTML5: sólo como última alternativa

= HTML4

<body><div id="cabecera">

. . .</div><div id="contenido">

<div class="noticia">. . .</div>

</div><div id="barraLateral">

. . .</div>

</body>


section

Permite declarar una sección dentro de un documento

Pueden anidarse secciones dentro de otras

<body>. . .<section id="Sociedad">

<h1>La via social</h1><p>...</p>

</section><section id="Deportes">

<h1>Noticias deportivas</h1><p>. . .</p>

</section></body>

<body>. . .<div id="Sociedad"><h2>La via social</h2><p> ... </p>

</div><div id="Deportes"><h2>Noticias deportivas</h2><p>. . .</p>

</div></body>

≃

Antes

Problemas: no hay semántica, cortar/pegar,…


article

Declara una parte independiente de un documento

Artículo de blog, de periódico, etc.

Algo que podría reutilizarse o distribuirse en otros documentos

Pueden anidarse secciones y artículos

<body><h1>El noticiero</h1><section id="Sociedad"><h1>Noticias de sociedad</h1><article id="FiestaJuan"><h1>Juan da una fiesta</h1><p>...</p>

</article><article id="Boda"><h1>Por fin hay boda</h1><p>...</p>

</article></section>...

Diferenciasection está dentro de algoarticle tiene identidad propia


hgroup

Forma un grupo de cabecera

Será un elemento único de cara a la tabla de contenidos

Útil para agrupar subtítulos sin afectar al esquema del documento

<body><hgroup><h1>El noticiero</h1><h2>El mejor diario de noticias</h2>

</hgroup><section id="Sociedad"><h1>La via social</h1><p>...</p>

</section>...


aside

Algo relacionado tangencialmente con el contenido actual

Habitualmente, pueden ponerse en un lateral

Su lectura no es obligada (los agentes podrían ocultarlos)

<article id="Boda"><h1>Por fin hay boda</h1><p>A pesar de las protestas de los invitados,

la boda se celebró...</p><aside><h1>Refrán popular</h1>Tal y como dice el refrán: <q>Ni novia sin cejas, ni boda sin quejas.</q></aside>

</article>


nav

Declara un grupo de navegación

Suele ser una lista de enlaces

<body><h1>El noticiero</h1><nav><ul>

<li><a href="#sociedad">Sociedad</a></li><li><a href="#deportes">Deportes</a></li>

</ul></nav><section id="Sociedad">

<h1>La via social</h1><p>. . .</p>

</section>. . .


header

Declara una cabecera

No forman parte de la tabla de contenidos (outline)

<body><header><h1>El noticiero</h1><img src="logo.png" alt="logo de El noticiero" ><nav><ul><li><a href="#sociedad">Sociedad</a></li>. . .

</ul></nav>

</header>...

</body>


footer

Declara un pie de documento, sección o artículo

<body><header>

. . .</header>

<section id="Sociedad">. . .

</section>. . .<footer>© 2012. Todos los derechos reservados

</footer></body></html>


address

Indica información de contacto

Habitualmente se incluye en footer

= HTML4

. . .<footer>© 2012. Todos los derechos reservados<address>

Contacto: <a href="http://noticiero.es">El noticiero</a></address>

</footer>


Elementos para agrupar contenido


Párrafos, listas, definiciones

p párrafo.

ol, ul, li listas de ítems

dt,dl,dd definiciones

pre texto preformateado

blockquote contenido extraido de otra fuente

= HTML4


Figuras: figure, figcaption

figure representa contenido cuya posición no es importante

Puede tener su propio flujo de contenido

Puede ser: diagramas, imágenes, vídeos, fragmento de código, etc.

figcaption representa la leyenda de la figura

<figure><img src="juanBarbacoa.jpg"

alt="Foto de Juan en la barbacoa"><figcaption>Juan preparando una barbacoa</figcaption>

</figure>


details

Contenido que puede estar oculto

summary indica el contenido visible

El navegador puede visualizar los detalles a peticíón del usuario

<h1>Campeonato de tenis de mesa</h1><p>Acaba de arrancar la última competición de tenis del pueblo. </p><details><summary>Lista de partidos</summary>

<ul><li>Jueves, Juan - Antonio</li><li>Viernes, Ana- Antonio</li><li>Sábado, Ana- Juan</li></ul>

</details>


Elementos textuales


Elementos textuales

Elemento Definición Ejemplo

em Énfasis Esta bebida me parece <em>espectacular</em>

strong Importante La leche está <strong>muy caliente</strong>

small No importante Tome Exidina <small>Este medicamento... </small>

s Incorrecto Precio: <s>10 euros</s>. 9,95 euros

cite Títulos de obras En <cite>El Quijote</cite> hay 2 protagonistas.

q Citas Juan dijo <q>Bien predica quien bien vive</q>

abbr Abreviación Un <dfn>catamorfismo</dfn> es un tipo de functor

span Texto diferente Castillo en francés es <span lang="fr">château</span>

br Salto de línea C/Valdés Salas, S/N<br>Oviedo<br>España

wbr Posible salto super<wbr>cali<wbr>frasti<wbr>listico.com

= HTML4


Elementos textuales


code Código <code>checkDB</code> chequea la base de datos.

var Variable Sea <var>n</var> el número de personas, ...

samp Muestra,Salida

La salida es: <samp>Syntax error</samp>

kbd Entrada teclado Pulse <kbd>F1</kbd> para obtener ayuda

sub Subíndice El agua es H<sub>2</sub>O

sup Superíndice El cuadrado es <var>x<sup>2</sup></var>

i Voz alternativa Es un <i>poquillo</i> trasto

b Palabras clave Contiene <b>salmón</b> y <b>tomate</b>

u Anotaciones Escribe <u>lopo</u> en vez de <b>lobo</b>

= HTML4


Inserción/Borrado = HTML4


ins Texto insertado <ins>Texto insertado</ins>

del Texto borrado <del>Texto eliminado</del>

<ol><li><ins datetime="2012-02-12">Bug 2: No funciona cortar</ins></li><li><del datetime="2012-03-01">

<ins datetime="2008-02-11">Bug 221: Error al cargar</ins></del>

</li></ol>


Elementos textuales nuevos


mark Texto ResaltadoEj. tras una búsqueda

El <mark>lobo</mark> ibérico. Los <mark>lobo</mark>s son animales

data Dato Juan sacó un <data value="10">diez</data>.

time Evento temporaldatetime indica instante

Nos vemos el <time datetime="2012-04-01">sábado</time>


Tablas

Elemento Definición

table Una tabla

caption Leyenda de la tabla

tr Fila

th Celda de cabecera

td Celda de datos

colgroup Grupo de columnas

col Representa una columna dentro de un colgroup

tbody Cuerpo de la tabla

thead Cabecera de la tabla

tfoot Pie de tabla

<table><caption>Notas</caption><tr><th>Nombre</th><th>Nota</th></tr><tr><td>Jose Torre</td><td>8</td></tr><tr><td>Ana Blanco</td><td>6</td></tr><tr><td>Juan Mato</td><td>4</td></tr><tr><td>Luis Rojas</td><td>7</td></tr></table>

Útiles para tablas que ocupan varias páginas

Agrupar columnas


Contenido Incrustado


img Imagen <img src="logoX.png" alt="Logotipo X">

audio Audio <audio src="cancion.mp3" controls autoplay loop>

video Vídeo <video src="navidad.mp4" controls >

object Objeto <object data="juego.swf" >

iframe Página <iframe src="http://www.w3c.org" >

map/area Mapa <map name="cosas"><area shape="rect" coords="0,0,82,126"

alt="casa" href="casa.htm" /><area shape="circle" coords="90,58,3"

alt="bola" href="bola.html" /></map>


Atributos


Atributos globales HTML


class Clase <div class="Anuncio">. . .</div>

id Identificador único <article id="r23">. . .</article>

title Título Texto <span title="verdoso">verde</span>

style Información de estilo Texto <span style="color:green">verde</span>

accesskey Atajo de teclado <a accesskey=B>Búsqueda</a>

tabindex Navegación mediante tabulación

<a href="about.html" tabindex="2">Acerca</a><a href="mapa.html" tabindex="1">Mapa</a>

= HTML4


Atributos nuevos en HTML5


contenteditable Indica si el elemento puede editarse

Nombre: <span contenteditable>Juan</span>

contextmenu Muestra menú contextual

<input id=genero contextmenu=genero>

hidden Elemento no relevante

<section id=juego hidden>. . . </section>

spellcheck Habilitar corrector ortográfico

Nombre: <input id=nombre spellcheck=no>

translate Traducir o no una cadena

Ejemplo más adelante: Internacionalización

data-* Atributos definidos por el usuario

<p data-calorias="50">kiwi</p>


Internacionalización




charset Codificación <meta charset="utf-8" >

langxml:lang

Idiomaen,es,en-US,...

<p lang="es"> Castillo en francés se escribe <span lang="fr">château</span>

</p>

hreflang Idioma de un enlace <a href="chateaus.html" hreflang="fr">Lista de castillos franceses</a>

translate Traducir un texto o no

Pulsar <span translate=no>CONTINUE</span> en panel de impresora.




ruby,rt, rp

Anotaciones fonéticas habituales en textos asiáticos

<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>

bdi Aislar direccionalidad del texto

Usuario <bdi>إيان</bdi>: 3 artículos

bdo Formatear direccionalidad del texto

Castillo al revés es <bdo dir=rtl>Castillo</bdo>

Más información: ITS (Internationalization Tag Set)http://www.w3.org/TR/its/


Formularios


WWW

GET http://ejemplo.com/form.html

<form method="post"action="http://ejemplo.com/procesa">

<label>Nombre: <input name="cliente"></label><br><label>Correo electrónico: <input name="correo"></label><br><button>Enviar</button></form>

Ejemplo

UsuarioServidor

POST http://ejemplo.com/procesa

cliente = pepecorreo = [email protected]

http://ejemplo.com/form.html

form.html

= HTML4


Tipos de entrada


text Texto (por defecto) <input name=cliente><input name=cliente type=text>

password Oculta caracteres <input type=password ...>

hiden Campo oculto <input type=hiden name=origen value=20>

checkbox on/off <p>Aficiones:<input type=checkbox

name=aficiones value=Leer>Leer libros<br><input type=checkbox

name=aficiones value=Pasear>Dar paseos</p>

radio Opción, sólo uno dentro de un grupo

<p>Género:<input type=radio name=genero value=H>Hombre<br><input type=radio name=genero value=M>Mujer</p>

= HTML4


Tipos de entrada


file Fichero <input type=filename=Fichero>

submit Enviar <input type=submitvalue="Enviar">

image Imagen (enviar) <input type=imagesrc="img.png" alt="Enviar">

reset Reiniciar <input type=resetvalue="Borrar datos">

= HTML4


Elementos de formularios

Atributo Definición Ejemplo

fieldset Agrupa campos de un formulario

<fieldset><legend>Datos personales</legend>Nombre: <input name="nombre"><br>Apellidos: <input name="apellidos">

</fieldset>

button Botón <button type=submit>

select Seleccionaropciones

<select name="genero"><option value="H">Hombre</option><option value="M">Mujer</option></select>

textarea Campo de texto libre

<textarea rows="4" cols="50">Comentarios

</textarea>


Atributos


type Tipo de entrada <input type=. . . >

name Nombre del campo <input name=apellidos >

value Valor del campo <input name=país value="España">

checked Seleccionado:checkbox/radio

Estado Civil:<input type=radio

name=estado value=S checked>Soltero<br><input type=radio

name=estado value=M>Casado

maxlength Nº máximo de caracteres

<input name=apellidos maxlength="20">

disabled Desabilitado <input name=edad disabled>

readonly Sólo lectura <input name=país value="España" readonly>

= HTML4


Nuevos tipos de entrada


email Correoelectrónico

<input type=emailname=correo>

url URL <input type=urlname=Homepage>

tel Teléfono <input type=telname=Tlfno>

search Texto de búsqueda

<input type=searchname=cadena>

telurlemail búsqueda


Nuevos tipos de entrada


color Color <input type=color name=colorFondo>

datedatetimedatetime-localmonthyearweektime

Fechas <input type=date name=fechaNacimiento>

number Número <input type=numbername=edad min=1 max=150>

range Rango <input type=rangename=puntos min=1 max=10>


Nuevos atributos


autocomplete Autocompletaron/off

<input name=Nombreautocomplete="off">

placeholder Pista sobre el tipo de entrada

<input name=textoBuscarplaceholder="Cadena a buscar">

required Campo obligatorio

<input name=usuario required>

pattern Patrón (expresión regular)

<input name=nifpattern="\d{7,8}[A-Z]"title="Introduzca un NIF">

min/max/step Valores mínimo y máximo

<input type=rangename=puntos min=1 max=10 step=2>

multiple Se permiten entradas múltiples

<input type=filename=ficherosCopiamultiple>


Expresiones regularesExpresión Posibles valores

Elemento 2

b, ab, aab, aaab, …

xb, yb, zb

b, ab

ab, aab, aaab, …

Elemento \d

a*b

[xyz]b

a?b

a+b

[a-c]x

[^0-9]x

\Dx

(pa){2}rucha

.abc

(a|b)+x

a{1,3}x

\n

\p{Lu}

\p{Sc}

ax, bx, cx

Carácter dígito seguido de x

Carácter dígito seguido de x

paparucha

Cualquier carácter (1) seguido de abc

ax, bx, aax, bbx, abx, bax,...

ax, aax, aaax

Salto de línea

Letra mayúscula

Símbolo de moneda


Nuevos Atributos


autofocus Indicar adquisición"focus"

<input name=Nombreautofocus>

list Lista de valoressugeridos

<input list="lista" name="nombre"><datalist id="lista">

<option value="Jose"><option value="Luis">

</datalist>

form Formulario <input name=usuario form="DatosUsr">

formmethodformenctypeformactionformnovalidateformtarget

Cambia el valor correspondientedel elemento form

<input type=submitformnovalidateformtarget="blank">


Nuevos elementos


meter Medida dentro de un rango.Ej. Espacio en diso,

Espacio en disco:<meter value="34"

max="100">34%</meter>

progress Representa el progreso de una tarea en ejecuciónEj. %datos copiados

Ficheros copiados:<progress value="34"

max="100">34%</progress>

output Resultado de una computación

<formonsubmit="return false"oninput="o.value =

a.valueAsNumber + b.valueAsNumber"><input name=a type=number step=any> +<input name=b type=number step=any> =<output name=o></output></form>


Nuevos elementos


menu, command

Crea un menú con comandos

<menu type=toolbar><command label="Abrir" onclick="open()"><command label="Guardar" onclick="save()"></menu>

keygen Genera una clave que puede enviarse en un formulario

<keygen name=clave>


Soporte para MathML y SVG

HTML5 admite la inclusión directa de MathML y SVG

En HTML no es necesario utilizar espacios de nombres

MathML = definir fórmulas matemáticas

SVG = gráficos vectoriales

A diferencia del canvas, los gráficos pueden escalarse

El sistema indica elemento a dibujar


Soporte para MathML y SVG

Ejemplo

<!DOCTYPE html><title>MathML y SVG</title><meta charset="UTF-8" ><p>Una ecuación:<math><mrow><mi>x</mi><mo>=</mo><msqrt><mfrac><mrow><mi>Varianza</mi></mrow><mrow><mn>2</mn></mrow></mfrac></msqrt></mrow></math>y un círculo:<svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg></p>

http://www.di.uniovi.es/~labra/cursos/XML/ejemplos/svgMathML.html


Microdatos

Enriquecer un documento con valores de un vocabulario

Añade metadatos que pueden procesarse automáticamente

Objetivo: Facilitar descripción de los contenidos

Acercamiento a la Web Semántica

Consiste en grupos de parejas nombre/valor


Microdatos

Atributo Definición Valores

itemscope Contenedor de microdatos Valor booleano

itemtype Define tipo de ítems Lista de URIs

itemid Identificador del ítem URI

itemref Referencia donde se pueden obtener más datos

Identificador

itemprop Propiedad a definir Nombre de la propiedad a declarar


Microdatos

Los valores de la propiedad definida en itemprop

dependen del tipo de elemento:

Elemento Valor

meta Valor de content

a, area, link Valor de href

audio, embed, video, iframe,img, source, track

Valor de src

object Valor de data

data Valor de value

Resto de elementos Contenido textual


Microdatos

<div itemscopeitemtype="http://schema.org/Offer"itemid="http://ejemplo.org/Oferta24">

<h1 itemprop="name">Batidora</h1> <p>Precio: <span itemprop="price">19.95€</span><p itemscope itemprop="reviews"

itemtype="http://schema.org/AggregateRating">Puntuación:

<span itemprop="ratingValue">3</span> sobre<span itemprop="bestRating">5</span>.Basado en <span itemprop="ratingCount">25</span> usuarios

</p></div>

Ejemplo:


Accesibilidad


Accesibilidad y HTML5

WAI-ARIA (Accessible Rich Internet Applications)

Define roles para mejorar la accesibilidad

Rol Valor

banner Cabecera

search Búsqueda

navigation Navegación

main Cuerpo principal

contentinfo Información sobre el contenido

complementary Contenido complementario

application Identifica una aplicación

. . . . . .


Fin de la Presentación

tecnologías web y xml - cd universidad de...

Documents