Tecnologías Web y XML - CD Universidad de...
Transcript of 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...
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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>
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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>
Jose Emilio Labra Gayo, Universidad de Oviedo
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:
Jose Emilio Labra Gayo, Universidad de Oviedo
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>
Jose Emilio Labra Gayo, Universidad de Oviedo
Comentarios HTML
Texto entre <!-- y -->
Comentarios condicionales (Sólo Internet Explorer)
<head><title>Ejemplo</title><!-- Esto es un comentario --></head>
<!--[if lt IE 9]><p>Estás usando Internet Explorer</p><![endif]--><!--[if !IE]><!--><p>No estás usando Internet Explorer</p><!--<![endif]-->
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
head
Especifica metadatos
Puede contener un elemento <title> (en HTML4 era obligatorio)
Además, puede contener:
<meta>
<link>
<style>
<base>
<command>
<script>
<noscript>
= HTML4
Jose Emilio Labra Gayo, Universidad de Oviedo
<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
Jose Emilio Labra Gayo, Universidad de Oviedo
<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
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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>
Jose Emilio Labra Gayo, Universidad de Oviedo
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,…
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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>...
Jose Emilio Labra Gayo, Universidad de Oviedo
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>
Jose Emilio Labra Gayo, Universidad de Oviedo
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>. . .
Jose Emilio Labra Gayo, Universidad de Oviedo
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>
Jose Emilio Labra Gayo, Universidad de Oviedo
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>
Jose Emilio Labra Gayo, Universidad de Oviedo
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>
Jose Emilio Labra Gayo, Universidad de Oviedo
Elementos para agrupar contenido
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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>
Jose Emilio Labra Gayo, Universidad de Oviedo
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>
Jose Emilio Labra Gayo, Universidad de Oviedo
Elementos textuales
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
Elementos textuales
Elemento Definición Ejemplo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
Inserción/Borrado = HTML4
Elemento Definición Ejemplo
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>
Jose Emilio Labra Gayo, Universidad de Oviedo
Elementos textuales nuevos
Elemento Definición Ejemplo
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>
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
Contenido Incrustado
Elemento Definición Ejemplo
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>
Jose Emilio Labra Gayo, Universidad de Oviedo
Atributos
Jose Emilio Labra Gayo, Universidad de Oviedo
Atributos globales HTML
Elemento Definición Ejemplo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
Atributos nuevos en HTML5
Elemento Definición Ejemplo
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>
Jose Emilio Labra Gayo, Universidad de Oviedo
Internacionalización
Jose Emilio Labra Gayo, Universidad de Oviedo
Internacionalización
Elemento Definición Ejemplo
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.
Jose Emilio Labra Gayo, Universidad de Oviedo
Internacionalización
Elemento Definición Ejemplo
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/
Jose Emilio Labra Gayo, Universidad de Oviedo
Formularios
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
Tipos de entrada
Elemento Definición Ejemplo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
Tipos de entrada
Elemento Definición Ejemplo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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>
Jose Emilio Labra Gayo, Universidad de Oviedo
Atributos
Atributo Definición Ejemplo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
Nuevos tipos de entrada
Elemento Definición Ejemplo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
Nuevos tipos de entrada
Elemento Definición Ejemplo
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>
Jose Emilio Labra Gayo, Universidad de Oviedo
Nuevos atributos
Atributo Definición Ejemplo
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>
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
Nuevos Atributos
Atributo Definición Ejemplo
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">
Jose Emilio Labra Gayo, Universidad de Oviedo
Nuevos elementos
Atributo Definición Ejemplo
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>
Jose Emilio Labra Gayo, Universidad de Oviedo
Nuevos elementos
Atributo Definición Ejemplo
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>
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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:
Jose Emilio Labra Gayo, Universidad de Oviedo
Accesibilidad
Jose Emilio Labra Gayo, Universidad de Oviedo
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
. . . . . .
Jose Emilio Labra Gayo, Universidad de Oviedo
Fin de la Presentación