• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML & HTML5
 

HTML & HTML5

on

  • 2,621 views

Trasparencias sobre H

Trasparencias sobre H

Statistics

Views

Total Views
2,621
Views on SlideShare
2,621
Embed Views
0

Actions

Likes
3
Downloads
67
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML & HTML5 HTML & HTML5 Presentation Transcript

    • HTML Jose Emilio Labra GayoDepartamento de Informática Universidad de Oviedo
    • Proceso de Estandarización ¿Dónde está tu tecnología favorita? Éxito (Diversificación) Necesidad de estándar Idea brillante Posibles perversiones... No estandarización Estandarizar algo que no tiene éxito Estándar demasiado pronto Estándar demasiado tarde Comités poco representativos Especificación Estándar sin prototipos (comité) No adoptar el estándar etc., etc. Adopción Primeros del estándar prototipos Internacionales (limitaciones) ISO, W3C, IETF, ECMA, WHATWG, etc.Jose Emilio Labra Gayo, Universidad de Oviedo
    • Evolución 1970 GML Generalized Markup Language (C.Goldfarb, E. Moshie, R. Lorie) ∶ Standard Generalized Markup Language 1985 SGML (ISO) Hypertext Markup Language 1990 HTML (T. Berners Lee) HTML 2.0 (IETF) 1995 HTML 3.2 (W3c) XML (W3c) HTML 4.01 (W3c) 2000 XHTML 1.0 (W3c) Borrador XHTML 2.0 Borrador (W3c) HTML5 (WHATWG) 2005 X 2010 Borrador HTML5 (W3c & Whatwg) 2015Jose 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 WebJose 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 accesibilidadJose Emilio Labra Gayo, Universidad de Oviedo
    • 2 sintaxis HTML XHTML <!DOCTYPE html> <?xml version="1.0" <html> encoding="UTF-8"?> <head> <html xmlns="http://www.w3.org/1999/xhtml"> <meta charset="UTF-8"> <head> <title>Ejemplo</title> <title>Ejemplo</title> </head> </head> <body> <body> <p>Algo de texto</p> <p>Algo de texto</p> </body> </body> </html> </html> Tipo MIME: Tipo MIME: text/html application/xml application/xhtml+xmlJose Emilio Labra Gayo, Universidad de Oviedo
    • Tipo de documento Solamente es necesario <!DOCTYPE html> 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/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> = <input name="tlfno" disabled="" /> HTML XHTMLJose 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> En XML pueden simplificarse como: <img src="foto.png" alt="Paisaje asturiano" /> En HTML, no es obligatorio cerrar etiquetas siempre: <img src="foto.png" alt="Paisaje asturiano" >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 --> <head> <title>Ejemplo</title> <!-- Esto es un comentario --> </head> Comentarios condicionales (Sólo Internet Explorer) <!--[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 = HTML4 Elemento raíz <html> contiene: <head> metadatos <body> contenido de la página <html> <head> ...metadatos </head> <body> ...contenido </body> </html> NOTA <html> puede tener atributo manifest. Permite indicar ficheros a descargarJose Emilio Labra Gayo, Universidad de Oviedo cuando se ejecute offline
    • head = HTML4 Especifica metadatos Puede contener un elemento <title> (en HTML4 era obligatorio) Además, puede contener: <meta> <link> <style> <base> <command> <script> <noscript>Jose Emilio Labra Gayo, Universidad de Oviedo
    • meta Permite incorporar metadatos. Ejemplos: <head> <title>Ejemplo</title> <meta charset="utf-8" > <meta name="author" content="Jose Torres"> ... </head> Antes <meta http-equiv="Content-type" content="text/html; charset=UTF-8">Jose Emilio Labra Gayo, Universidad de Oviedo
    • link = HTML4 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 <head> ... <link rel="next" href="capitulo3.html"> <link rel="prev" href="capitulo1.html"> <link rel="author license" href="acercaDe.html"> </head>Jose Emilio Labra Gayo, Universidad de Oviedo
    • link stylesheet = HTML4 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>Jose Emilio Labra Gayo, Universidad de Oviedo
    • link alternate = HTML4 rel="alternate" indica enlaces alternativos Ejemplo: enlazar RSS <head> ... <link rel="alternate" type="application/atom+xml" title="Blog en Atom" href="blog.atom" > . . . </head>Jose Emilio Labra Gayo, Universidad de Oviedo
    • style = HTML4 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>Jose Emilio Labra Gayo, Universidad de Oviedo
    • base = HTML4 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> Apunta a: http://www.example.com/noticias/historico.htmlJose Emilio Labra Gayo, Universidad de Oviedo
    • script = HTML4 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> También existe <noscript>: </head> muestra su contenido si . . . está deshabilitado elJose Emilio Labra Gayo, Universidad de Oviedo scripting
    • body = HTML4 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>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ítulos div Agrupa elementos de contenido section Sección, puede incluir encabezados article Artículo hgroup Grupo de cabecera nav Listas de navegación aside Contenido auxiliar header Cabecera footer Pie address Define datos de contacto figure Figuras details Detalles opcionalesJose Emilio Labra Gayo, Universidad de Oviedo
    • h1, h2, …h6 = HTML4 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>Jose Emilio Labra Gayo, Universidad de Oviedo
    • div = HTML4 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 <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 Antes <body> <body> . . . . . . <div id="Sociedad"> <section id="Sociedad"> <h2>La via social</h2> <h1>La via social</h1> <p> ... </p> <p>...</p> </div> ≃ </section> <div id="Deportes"> <section id="Deportes"> <h2>Noticias deportivas</h2> <h1>Noticias deportivas</h1> <p>. . .</p> <p>. . .</p> </div> </section> </body> </body> 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> Diferencia <article id="Boda"> section está dentro de algo <h1>Por fin hay boda</h1> <p>...</p> article tiene identidad propia </article> </section> ...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 = HTML4 Indica información de contacto Habitualmente se incluye en footer ... <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 contenidoJose Emilio Labra Gayo, Universidad de Oviedo
    • Párrafos, listas, definiciones = HTML4 p párrafo. ol, ul, li listas de ítems dt,dl,dd definiciones pre texto preformateado blockquote contenido extraido de otra fuenteJose 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 textualesJose Emilio Labra Gayo, Universidad de Oviedo
    • Elementos textuales = HTML4 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.comJose Emilio Labra Gayo, Universidad de Oviedo
    • Elementos textuales = HTML4 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, La salida es: <samp>Syntax error</samp> Salida 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>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 Resaltado El <mark>lobo</mark> ibérico. Ej. tras una búsqueda Los <mark>lobo</mark>s son animales data Dato Juan sacó un <data value="10">diez</data>. time Evento temporal Nos vemos el datetime indica <time datetime="2012-04-01">sábado</time> instanteJose Emilio Labra Gayo, Universidad de Oviedo
    • Tablas Elemento Definición table Una tabla <table> <caption>Notas</caption> caption Leyenda de la tabla <tr><th>Nombre</th><th>Nota</th></tr> <tr><td>Jose Torre</td><td>8</td></tr> tr Fila <tr><td>Ana Blanco</td><td>6</td></tr> <tr><td>Juan Mato</td><td>4</td></tr> th Celda de cabecera <tr><td>Luis Rojas</td><td>7</td></tr> td Celda de datos </table> colgroup Grupo de columnas col Representa una columna Agrupar columnas dentro de un colgroup tbody Cuerpo de la tabla thead Cabecera de la tabla Útiles para tablas que ocupan varias páginas tfoot Pie de tablaJose 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
    • AtributosJose Emilio Labra Gayo, Universidad de Oviedo
    • Atributos globales HTML = HTML4 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 <a href="about.html" tabindex="2">Acerca</a> tabulación <a href="mapa.html" tabindex="1">Mapa</a>Jose Emilio Labra Gayo, Universidad de Oviedo
    • Atributos nuevos en HTML5 Elemento Definición Ejemplo contenteditable Indica si el elemento Nombre: puede editarse <span contenteditable>Juan</span> contextmenu Muestra menú <input id=genero contextmenu=genero> contextual hidden Elemento no <section id=juego hidden>. . . relevante </section> spellcheck Habilitar corrector Nombre: ortográfico <input id=nombre spellcheck=no> translate Traducir o no una Ejemplo más adelante: Internacionalización cadena data-* Atributos definidos <p data-calorias="50">kiwi</p> por el usuarioJose Emilio Labra Gayo, Universidad de Oviedo
    • InternacionalizaciónJose Emilio Labra Gayo, Universidad de Oviedo
    • Internacionalización Elemento Definición Ejemplo charset Codificación <meta charset="utf-8" > lang Idioma <p lang="es"> Castillo en francés se escribe xml:lang en,es,en-US,... <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 Pulsar <span translate=no>CONTINUE</span> en no panel de impresora.Jose Emilio Labra Gayo, Universidad de Oviedo
    • Internacionalización Elemento Definición Ejemplo ruby, Anotaciones <ruby> <rt> </rt> <rt> </rt></ruby> rt, rp fonéticas habituales en textos asiáticos bdi Aislar Usuario <bdi> </bdi>: 3 artículos direccionalidad del texto bdo Formatear Castillo al revés es direccionalidad del <bdo dir=rtl>Castillo</bdo> texto Más información: ITS (Internationalization Tag Set) http://www.w3.org/TR/its/Jose Emilio Labra Gayo, Universidad de Oviedo
    • FormulariosJose Emilio Labra Gayo, Universidad de Oviedo
    • Ejemplo = HTML4 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> GET http://ejemplo.com/form.html form.html WWW POST http://ejemplo.com/procesa cliente = pepe Usuario correo = pepe@kiko.com ServidorJose Emilio Labra Gayo, Universidad de Oviedo
    • Tipos de entrada = HTML4 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 <p>Género: dentro de un <input type=radio name=genero value=H>Hombre grupo <br> <input type=radio name=genero value=M>Mujer </p>Jose Emilio Labra Gayo, Universidad de Oviedo
    • Tipos de entrada = HTML4 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">Jose Emilio Labra Gayo, Universidad de Oviedo
    • Elementos de formularios Atributo Definición Ejemplo fieldset Agrupa campos de <fieldset> un formulario <legend>Datos personales</legend> Nombre: <input name="nombre"><br> Apellidos: <input name="apellidos"> </fieldset> button Botón <button type=submit> select Seleccionar <select name="genero"> opciones <option value="H">Hombre</option> <option value="M">Mujer</option> </select> textarea Campo de texto <textarea rows="4" cols="50"> libre Comentarios </textarea>Jose Emilio Labra Gayo, Universidad de Oviedo
    • Atributos = HTML4 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: Estado Civil: checkbox/radio <input type=radio name=estado value=S checked>Soltero <br> <input type=radio name=estado value=M>Casado maxlength Nº máximo de <input name=apellidos maxlength="20"> caracteres disabled Desabilitado <input name=edad disabled> readonly Sólo lectura <input name=país value="España" readonly>Jose Emilio Labra Gayo, Universidad de Oviedo
    • Nuevos tipos de entrada Elemento Definición Ejemplo email Correo <input type=email electrónico name=correo> url URL <input type=url name=Homepage> tel Teléfono <input type=tel name=Tlfno> search Texto de <input type=search búsqueda name=cadena> email url tel búsquedaJose Emilio Labra Gayo, Universidad de Oviedo
    • Nuevos tipos de entrada Elemento Definición Ejemplo color Color <input type=color name=colorFondo> date Fechas <input type=date datetime name=fechaNacimiento> datetime-local month year week time 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 Autocompletar <input name=Nombre on/off autocomplete="off"> placeholder Pista sobre el <input name=textoBuscar tipo de entrada placeholder="Cadena a buscar"> required Campo <input name=usuario required> obligatorio pattern Patrón <input name=nif (expresión pattern="d{7,8}[A-Z]" regular) title="Introduzca un NIF"> min/max/step Valores mínimo <input type=range y máximo name=puntos min=1 max=10 step=2> multiple Se permiten <input type=file entradas name=ficherosCopia múltiples multiple>Jose Emilio Labra Gayo, Universidad de Oviedo
    • Expresiones regulares Expresión Posibles valores Elemento d Elemento 2 a*b b, ab, aab, aaab, … [xyz]b xb, yb, zb a?b b, ab a+b ab, aab, aaab, … [a-c]x ax, bx, cx [^0-9]x Carácter dígito seguido de x Dx Carácter dígito seguido de x (pa){2}rucha paparucha .abc Cualquier carácter (1) seguido de abc (a|b)+x ax, bx, aax, bbx, abx, bax,... a{1,3}x ax, aax, aaax n Salto de línea p{Lu} Letra mayúscula p{Sc} Símbolo de monedaJose Emilio Labra Gayo, Universidad de Oviedo
    • Nuevos Atributos Atributo Definición Ejemplo autofocus Indicar <input name=Nombre adquisición autofocus> "focus" list Lista de valores <input list="lista" name="nombre"> sugeridos <datalist id="lista"> <option value="Jose"> <option value="Luis"> </datalist> form Formulario <input name=usuario form="DatosUsr"> formmethod Cambia el valor <input type=submit formenctype correspondiente formnovalidate formaction del elemento formtarget="blank"> formnovalidate form formtargetJose Emilio Labra Gayo, Universidad de Oviedo
    • Nuevos elementos Atributo Definición Ejemplo meter Medida dentro de un Espacio en disco: rango. <meter value="34" Ej. Espacio en diso, max="100">34%</meter> progress Representa el progreso de Ficheros copiados: una tarea en ejecución <progress value="34" Ej. %datos copiados max="100">34%</progress> output Resultado de una <form computación 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, Crea un menú con <menu type=toolbar> command comandos <command label="Abrir" onclick="open()"> <command label="Guardar" onclick="save()"> </menu> keygen Genera una clave que <keygen name=clave> puede enviarse en un formularioJose 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 dibujarJose 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.htmlJose 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/valorJose 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 Identificador obtener más datos itemprop Propiedad a definir Nombre de la propiedad a declararJose 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, Valor de src img, source, track object Valor de data data Valor de value Resto de elementos Contenido textualJose Emilio Labra Gayo, Universidad de Oviedo
    • Microdatos Ejemplo: <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>Jose Emilio Labra Gayo, Universidad de Oviedo
    • AccesibilidadJose 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ónJose Emilio Labra Gayo, Universidad de Oviedo