html & html5
Post on 13-Jan-2015
3.664 Views
Preview:
DESCRIPTION
TRANSCRIPT
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ónEstandarizar algo que no tiene éxitoEstándar demasiado prontoEstándar demasiado tardeComités poco representativosEstándar sin prototiposNo adoptar el estándaretc., 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ándarMejorar interoperabilidad entre implementaciones
Incluye API DOMAntes estaba separada
Describe cómo gestionar erroresAntes se dejaba libertad a las implementaciones
Facilita desarrollo de aplicaciones Web
Jose Emilio Labra Gayo, Universidad de Oviedo
Principios de diseño
CompatibilidadSoportar contenido existente
Degradado cortés: alternativas para navegadores anteriores
Reutilizar características que ya se usan
UtilidadResolver problemas existentes
Separación: estructura, presentación, comportamiento
InteroperabilidadComportamiento y gestión de errores definidos
Acceso universalIndependencia 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/xml application/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 XMLNo hay declaraciones de espacios de nombres
Se especifica cómo tratar errores
Gestión de errores: modelo draconiano vs flexibilidad
Sintaxis simplificadaNo 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 estilostype="text/css" es el valor por defecto
media permite especificar el tipo de medioall (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 estiloPueden 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 baseLas 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 documentoHTML5 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 mismoAbuso 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 cabeceraSerá 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 actualHabitualmente, 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ónSuele 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 importantePuede 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 ocultosummary 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/procesacliente = pepecorreo = pepe@kiko.com
http://ejemplo.com/form.html
form.html
= HTML4
Jose Emilio Labra Gayo, Universidad de Oviedo
Tipos de entradaElemento
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=file name=Fichero>
submit Enviar <input type=submit value="Enviar">
image Imagen (enviar)
<input type=image src="img.png" alt="Enviar">
reset Reiniciar <input type=reset value="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 Seleccionar opciones
<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 Correo electrónico
<input type=email name=correo>
url URL <input type=url name=Homepage>
tel Teléfono <input type=tel name=Tlfno>
search Texto de búsqueda
<input type=search name=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=number name=edad min=1 max=150>
range Rango <input type=range name=puntos min=1 max=10>
Jose Emilio Labra Gayo, Universidad de Oviedo
Nuevos atributos
Atributo Definición Ejemplo
autocomplete Autocompletaron/off
<input name=Nombre autocomplete="off">
placeholder Pista sobre el tipo de entrada
<input name=textoBuscar placeholder="Cadena a buscar">
required Campo obligatorio
<input name=usuario required>
pattern Patrón (expresión regular)
<input name=nif pattern="\d{7,8}[A-Z]" title="Introduzca un NIF">
min/max/step Valores mínimo y máximo
<input type=range name=puntos min=1 max=10 step=2>
multiple Se permiten entradas múltiples
<input type=file name=ficherosCopia multiple>
Jose Emilio Labra Gayo, Universidad de Oviedo
Expresiones regularesExpresión Posibles valores
Elemento 2b, ab, aab, aaab, …xb, yb, zbb, abab, 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)+xa{1,3}x\n\p{Lu}\p{Sc}
ax, bx, cxCarácter dígito seguido de xCarácter dígito seguido de xpaparuchaCualquier carácter (1) seguido de abcax, bx, aax, bbx, abx, bax,...ax, aax, aaaxSalto de líneaLetra mayúsculaSímbolo de moneda
Jose Emilio Labra Gayo, Universidad de Oviedo
Nuevos Atributos
Atributo Definición Ejemplo
autofocus Indicar adquisición"focus"
<input name=Nombre autofocus>
list Lista de valores sugeridos
<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 correspondiente del elemento form
<input type=submit formnovalidate formtarget="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
<form onsubmit="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 SVGEn HTML no es necesario utilizar espacios de nombres
MathML = definir fórmulas matemáticas
SVG = gráficos vectorialesA 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 vocabularioAñ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 itemscope itemtype="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
top related