1

Efraim MartínezMadrid, 20 de junio de 2013

HTML5 y FAMILIA

2

Comprender cómo están hechas las páginas webAprender a escribir páginas web sencillasDebatir para aprender juntosPasarlo bien

OBJETIVOS

3

HTML: lenguaje de etiquetas usado para estructurar y presentar contenido web

HTML5: nuevas etiquetas de markup (lenguaje) HTML, CSS3, JavaScript y tecnologías complementarias externas (familia HTML5)

HTML: Hyper Text Markup Language Es un estándar o recomendación del W3C

HTML5 está aún en transición

QUÉ ES HTML y HTML5

4

Evolución de HTML/XHTMLhttp://broadcast.rackspace.com/blog/HTMLtimeline/index.html

1990 2000 2010

● HTML 1.0, mezcla de SGML+href

● Inicio del proyecto World Wide Web (Berners-Lee)

● HTML 2.0 y CSS● Netscape, primer

navegador comercial con interfaz gráfico

● Tablas y mapas de imágenes en el cliente

● HTML 3.2 ● Internet Explorer

4.0 con Windows

● HTML 4.01● Internet

Explorer 4.0 incluido con Msft Windows

● Primer borrador HTML5● Versión final: 2014 (esp.)

Sólo téxto Imágenes, tablas y frames

CSS Ajax, Plugins

REFERENCIAS:html 1.0: http://www.ietf.org/rfc/rfc1866.txthtml 3.2: http://www.w3.org/TR/REC-html32html 4.01: http://www.w3.org/TR/REC-html40

http://www.ietf.org/rfc/rfc1866.txt

5

Google Chrome http://www.chromeexperiments.com

Apple Safari http://www.apple.com/html5

Mozilla Firefox https://developer.mozilla.org/en/HTML/HTML5

Microsoft Internet Explorer http://www.nevermindthebullets.com

HTML5 EN ALGUNOS NAVEGADORES

6

https://www.youtube.com/watch?v=mzPxo7Y6JyA

QUÉ ES HTML5 en 1:32

7

Cambios radicales en la web en 10 años http://web.archive.org/web/http://www.youtube.com/

El HTML original era un lenguaje muy poco estricto y se escribía “a mano”

Nuevas tendencias habían extremado la incompatibilidad entre navegadores y dispositivos

Estándares divergentes XHTML 2.0, HTML5, flash...)

¿POR QUÉ ERA NECESARIA UNA EVOLUCIÓN?

8

Nuevas etiquetas y atributos para estructurar el contenido

Soporte nativo multimedia audio/video Soporte completo de CSS3

Sombras, degradados, sombreados, esquinas, fuentes

Gráficos 2D/3D (elemento canvas) Almacenamiento, BBDD local,

webworkers, drag&drop

PRINCIPALES DIFERENCIAS DE HTML5 CON SUS PREDECESORES

9

ESTRUCTURA BÁSICA DEUN DOCUMENTO HTML5

10

EJERCICIOS CON INDEX-ORIGINAL.HTML

Cosas con el texto Remarcados y negritas <em> <b> <strong> <i> Saltos de línea <br />

Insertar imágenes <img /> Insertar enlaces <a> Elemento <span> Comprobar la validez

http://validator.w3.org

11

NOCIONES BÁSICAS DE CSS3

Reglas CSS Selector, declaración, propiedad, valor

Selectores: Elemento, clase, identificador, pseudo clases Selectores múltiples y anidados Precedencia id-atributo-elemento e !important

Inserción de CSS en el documento Inline <h1 style="color:red">Prueba</h1> Interna <style type=”text/css></style> Externa <link rel="stylesheet" type="text/css" href="pr.css" />

12

SEGUIMOS CON INDEX-ORIGINAL.HTML

Poner el título rojo con estilo inline Convertir en estilos internos/externos Añadir una clase de objetos remarcados Cambiar el tamaño de los objetos

Identificadores de tamaño (small, medium, large) Unidades absolutas (pt, px) y relativas (em, %) impressivewebs.com/understanding-em-units-css

Margénes (margin) y rellenos (padding)

13

Evolución tablas – frames – capas (div)

Estructuras más habituales Ancho fijo, ancho variable, adaptable

Referencias en la web www.w3schools.com/html/html_layout.asp

MAQUETACIÓN Y DISTRIBUCIÓN DE ELEMENTOSEN PANTALLA EN HTML5

Layout adaptativo

Layout fijo

14

Resetear estilos Maquetación básica

Tamaño del wrap y de los elementos Espaciados y márgenes Separaciones de columnas por tamaños y %

Añadir un menú de navegación con listas Listas ordenadas y sin ordenar Estilos para configurar una lista estilo “menú”

EJERCICIOS SOBRE EL DOCUMENTO MAQUETAR.HTML

15

Evitan arbitrariedad y facilitan la lectura

ESTRUCTURA SEMÁNTICA DEELEMENTOS EN HTML5

<header> This is my header </header>

<div id="header"> This is my header </div>

Cabecera de documento/sección

Bloque de enlaces de navegación (menú)

Contenido agrupado temáticamente

Bloque de información independiente

Pie de documento/sección

Contenido lateral o relacionado

<figure>, <figcaption>, <time>

16

Cambiar etiquetas antiguas por las nuevas semanticas html5

Cambiar los estilos adecuadamente Insertar el script modernizr-2.0.js

EJERCICIOS SOBRE EL DOCUMENTO SEMANTICO.HTML

17

Eliminan la necesidad de plugins Video (subtítulos no soportados aún)

<video autoplay controls height=”” width=”” muted poster=””>

<source src="fich.mp4" type="video/mp4">

<source src=”fich.ogg” type=”video/ogg”>

Your browser does not support video tag.

</audio>

Audio<audio controls autoplay loop muted preload=”auto”>

<source src="fich.mp3" type="audio/mpeg">

<embed height="50" width="100" src="fich.mp3">

</audio>

INSERCIÓN DE VIDEO Y AUDIO

18

Expanden los conocidos de HTML4.01 Más tipos de controles y grupos de controles Comprobaciones incluidas en el propio HTML

Ejercicio Incluir un formulario de suscripción a lista de correo Etiquetas <label> y campos <input> Solicitar correo electrónico válido Botón para enviar y borrar el formulario

FORMULARIOS CON HTML5

19

FUNCIONALIDAD DRAG&DROP EN UNA PÁGINA WEB

Funcionalidad avanzada que requiere programación

Muchos objetos se pueden arrastrar pero tienen un comportamiento por defecto (p.e. imágenes o enlaces)

Hay que evitar el comportamiento por defecto

Conceptualmente: Cuando se inicia drag, capturar la información Cuando se hace drop, ejecutar las acciones

20

Tags and attributes have to be lowercase N

All tags must be closed <br /> or <br></br> N

Documents must be well-formed <p>My coding is <b>bad</p></b>

Attribute values must be quoted Height="3" N

Attribute Minimisation <hr noshade="noshade" /> N

Nuevos links internos (name está deprecado, sustituir por id y usar ambos)

Alternative text in images obligatorio <img src="header.gif" alt=" " />. También es buena práctica usar “ title”

& en URLs deben ser codificadas: <a href="reviews.php?page=27&amp;style=blue">link</a>

Content must be wrapped in a block-level element (p, ul, div)

ANEXO: CODIFICACIÓN XHTML/HTML(los marcados con N no son necesarios en HTML)

21

Algunas páginas tutoriales http://msdn.microsoft.com/es-es/ie/hh749019 http://www.w3schools.com/ http://www.w3schools.com/html/html5_intro.asp http://www.w3schools.com/tags/ref_colorpicker.asp

Pruebas realizadas por mi sobre los ejercicios: http://j.mp/html5-utad

(es un enlace a dropbox, en caso de no funcionar contactar con efraim@teamingisgrowing.com)

ANEXO: REFERENCIAS Y WEBS ÚTILES

22

¿NECESITA MÁS INFORMACIÓN?● http://horizontecloud.com● askhow@horizontecloud.com

GRACIAS