Lenguajes de marcado: HTML5 y XHTML
Anuncio
http://www.flickr.com/photos/nolanus/5848333881/ Tema 2 (primera parte) Lenguajes de marcado: HTML5 y XHTML 1. Conceptos básicos 2. Multimedia 3. Secciones de página 4. Formularios http://www.flickr.com/photos/26158205@N04/4500611033/ http://www.flickr.com/photos/26158205@N04/4500611033/ 2.1 Conceptos básicos HTML 4, HTML5, XHTML... Lenguajes de marcado HTML Lenguajes de marcado 3 Lenguaje de marcado (etiquetas) para escribir páginas web ! <p>Como mucha gente sabe, los <strong> lenguajes ! de marcado </strong> usan etiquetas mezcladas con el texto </p> ! Es el contenido de la página, no el estilo (apariencia visual) El estilo se expresa en otro lenguaje llamado CSS La versión más difundida es la 4.01 La 5 está en status de “Candidate Recommendation” (=¡casi definitiva!.) Lo define el W3C, en el que participan empresas, universidades, organismos sin ánimo de lucro,… Así se asegura que los estándares no son “propiedad de nadie” HTML = poco estricto Lenguajes de marcado 4 HTML tiene una sintaxis no demasiado estricta ! <p>Esto vale como párrafo </p>! ! <p> Y esto.! ! <p> Y esto también! ! Aún así, un porcentaje significativo de páginas web existentes contiene errores de sintaxis ¿Qué ocurriría si realmente los navegadores fueran tan estrictos como los compiladores?… http://validator.w3.org HTML = poco estricto Lenguajes de marcado 5 HTML tiene una sintaxis no demasiado estricta ! <p>Esto vale como párrafo </p>! ! <p> Y esto.! ! <p> Y esto también! ! Aún así, un porcentaje significativo de páginas web existentes contiene errores de sintaxis (Ejemplo “An Investigation of Documents from the World Wide Web, 1996”) ¿Qué ocurriría si realmente los navegadores fueran tan estrictos como los compiladores?... HTML vs. XHTML Lenguajes de marcado 6 XHTML contiene las mismas etiquetas que HTML (es decir, cualquier navegador antiguo lo lee perfectamente), solo que tiene una sintaxis mucho más estricta Se facilita la detección y corrección automática de errores Se simplifica la tarea del navegador. El parser es más sencillo Por desgracia, en la práctica se ha visto que el incentivo para usar XHTML en vez de HTML es pequeño Como las etiquetas son las mismas, no aporta nada nuevo, salvo la “satisfacción de las cosas bien hechas”. Cuéntale eso a alguien que hace webs con FrontPage… ¡¡Explorer o el mal!! El W3C “tiró la toalla” y canceló XHTML 2 en favor de HTML 5 HTML vs. XHTML Lenguajes de marcado 7 XHTML: etiquetas en minúsculas - HTML: indiferente XHTML: todas las etiquetas se deben abrir y cerrar, en HTML solo algunas XHTML: todos los atributos deben ir entre comillas <DIV>Esto vale en HTML </DIV>! <div>Pero en XHTML es así</div>! ! <!— HTML correcto -->! <img src=homer.jpg width=200> <br>! <!— Versión XHTML -->! <img src=“homer.jpg” width=“200”/> <br/>! HTML 5 vs. HTML 4 Lenguajes de marcado 8 Una evolución de HTML 4, no de XHTML Más orientado a aplicaciones web que a páginas estáticas Se puede dibujar en 2D sobre <canvas> Hay nuevos APIs javascript (¡muchos!, ver por ejemplo http:// html5demos.com/! También hay nuevas etiquetas Para representar elementos comunes en muchas páginas: barras de navegación, pies Para mostrar video sin Flash ni otros plugins Para mejorar los formularios HTML, un poco anticuados Estructura de un documento HTML5 <!DOCTYPE html>! <html lang="es"> ! ! <head>! !! <title>! ! ! Mi primer documento HTML! ! ! </title>! ! </head>! ! <body>! !! <p>¡Hola mundo!</p> ! ! </body>! </html> Lenguajes de marcado 9 Declaración de tipo de documento Cabecera (HEAD)! • Título página (TITLE)! • Metainformación (META)! • Estilos (STYLE) Cuerpo Los DOCTYPES Lenguajes de marcado 10 Indican el lenguaje que usamos (HTML5/HTML4/ XHTML) e incluso la variante Por ejemplo, HTML4 viene en tres variantes, “strict”, “transitional” y “frameset” Información necesaria para los validadores http://validator.w3.org En versiones más antiguas de los navegadores, tienen impacto en cómo se interpreta el CSS. Consultad http://hsivonen.iki.fi/doctype/ Estructura de un documento XHTML Lenguajes de marcado 11 <!DOCTYPE html! PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"! Declaración de tipo de documento "DTD/xhtml1-strict.dtd">! <html xmlns="http://www.w3.org/1999/xhtml">! <head>! Cabecera (HEAD)! • Título página (TITLE)! <title>! • Metainformación (META)! Mi primer documento XHTML! • Estilos (STYLE) </title>! </head>! Cuerpo <body>! Hola mundo <br/ >! </body>! </html> 2.2 http://www.flickr.com/photos/30363492@N06/5852901232 Multimedia Imágenes (HTML4), audio y video (HTML5) Lenguajes de marcado Video Lenguajes de marcado 13 Con HTML5 se hace posible introducir video y audio de forma “nativa” Ya que hasta el momento solo se podía hacer con plugins (Flash) En teoría debería ser tan sencillo como con las imágenes ! ! <video controls src="mivideo.mp4" width="320" height="240"> </video> ! Por desgracia, no todos los navegadores implementan los mismos formatos De hecho, no hay un único formato compatible con TODOS los navegadores Video para todos los navegadores Lenguajes de marcado 14 Necesitamos el mismo video en diferentes formatos <video controls> <!-- Firefox, Chrome, Opera --> <source src="somevideo.webm" type=“video/webm"> <!-- Safari, IE, Chrome, Firefox --> <source src="somevideo.mp4" type="video/mp4"> I'm sorry; your browser doesn't support HTML5 video in WebM with VP8 or MP4 with H.264. <!-- You can embed a Flash player here, to play your mp4 video in older browsers --> </video> 2.3 http://www.flickr.com/photos/roguemm/2890526876 Secciones de página Lenguajes de marcado Todas las páginas tienen secciones diferenciadas: cabecera, contenido, pie, barra de navegación... Secciones de página en HTML4 <body> <div id="cabecera"> <img src="imag/logo.png" /> </div> <div id="navegacion"> <p>Enlaces</p> <a href="...">Principal</a> <a href="...">Teoría</a> ... </div> <div id="novedades"> <h1>Novedades</h1> <span class="fecha">(27-09-07)</span> <a href="...">Notas...</a><br /> ... </div> <div id="contenido"><br /> <h1>Curso 2006/2007</h1> ... </div> </body> Lenguajes de marcado 16 Secciones de página en HTML5 Lenguajes de marcado 17 <section>: una sección de un documento <article>: un elemento auto-contenido como un post de un blog o un artículo en una revista <aside>: algo separado del contenido principal o tangencial a él <nav>: barra de navegación con enlaces <header>: cabecera o introducción a algo <footer> pie o apéndice o similar Aspecto visual Lenguajes de marcado 18 Las secciones HTML5 no tienen un aspecto visual “por defecto” Por ejemplo <aside> no va a salir al lado del texto principal Hay que dar estilos con CSS, como con todas las demás ! Navegadores antiguos: cuando un navegador se encuentra con una etiqueta que no “entiende” simplemente la ignora En Explorer 8 y anteriores hay que usar algún que otro truco, ver por ejemplo http://remysharp.com/2009/01/07/html5-enablingscript/ 2.4 http://www.flickr.com/photos/cssercom/5419851057 Formularios Enviar datos al servidor Lenguajes de marcado Formularios en HTML5 Lenguajes de marcado 20 Incluyen (entre otras cosas) varios tipos nuevos de controles <input> Campo de email <input type=”email”> Campo de URL <input type=”url”> Campo de número <input type=”number”> Slider <input type=”range”> Fecha (date), hora (time), fecha/hora(datetime) ej. <input type=”datetime”> Los navegadores que no reconocen los campos anteriores los tratan como type=”text” Validación en el cliente ! ! Lenguajes de marcado 21 Validación “por defecto” ! ! Validación explícita <form action="nada.php" method="get"> ! <input type="text" name="nombre" required maxlength=50> type="date" name="fecha" min="2014-1-1" max=“2014-12-31"> ! <input <input type="number" name="rumbo_grados" min=0 max=359> </form> ! ! Siempre debe haber además una validación en el servidor Móviles y formularios HTML5 Lenguajes de marcado 22 Los navegadores de dispositivos móviles adaptan el teclado virtual en pantalla al tipo de campo, para optimizar la escritura. Algunas referencias Lenguajes de marcado 23 Libros: Dive into HTML5, Mark Pilgrim, con licencia CC http://proquest.safaribooksonline.com/search?q=html5 (desde dentro de la UA) ! Webs: developers.whatwg.org docs.webplatform.org/wiki/html caniuse.com desarrolloweb.com
