A brief introduction to HTML5 at UTAD, june 2013. For all audiences, from business to technical, from customer focused to backoffice. Una breve introducción a HTML5 en UTAD, junio 2013. Para todos los públicos: técnicos y enfocados a negocio, funciones internas y de relación con el cliente.

1. HTML5 y FAMILIA
Efraim Martínez
Madrid, 20 de junio de 2013
1

2. OBJETIVOS
Comprender cómo están hechas las
páginas web
Aprender a escribir páginas web
sencillas
Debatir para aprender juntos
Pasarlo bien
2

3. QUÉ ES HTML y HTML5



HTML: lenguaje de etiquetas usado para
estructurar y presentar contenido web
HTML5: nuevas etiquetas de markup
(lenguaje) HTML, CSS3, J
avaScript 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
3

4. Evolución de HTML/XHTML
http://broadcast.rackspace.com/blog/HTMLtimeline/index.html
Sólo téxto
Imágenes,
tablas y
frames
CSS
1990
●
●
●
●
●
Ajax, Plugins
2000
HTML 1.0,
mezcla de
SGML+href
Inicio del
proyecto World
Wide Web
(Berners-Lee)
●
●
HTML 3.2
Internet Explorer
4.0 con Windows
HTML 2.0 y CSS
Netscape, primer
navegador comercial con
interfaz gráfico
Tablas y mapas de
imágenes en el cliente
●
●
HTML 4.01
Internet
Explorer 4.0
incluido con
Msft Windows
http://www.ietf.org/rfc/rfc1866.txt
2010
●
●
Primer borrador HTML5
Versión final: 2014 (esp.)
REFERENCIAS:
html 1.0: http://www.ietf.org/rfc/rfc1866.txt
html 3.2: http://www.w3.org/TR/REC-html32
html 4.01: http://www.w3.org/TR/REC-html40
4

5. HTML5 EN ALGUNOS NAVEGADORES

Google Chrome


Apple Safari


http://www.apple.com/html5
Mozilla Firefox


http://www.chromeexperiments.com
https://developer.mozilla.org/en/HTML/HTML5
Microsoft Internet Explorer

http://www.nevermindthebullets.com
5

6. QUÉ ES HTML5 en 1:32

https://www.youtube.com/watch?
v=mzPxo7Y6J
yA
6

7. ¿POR QUÉ ERA NECESARIA UNA EVOLUCIÓN?

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...)
7

8. PRINCIPALES DIFERENCIAS DE HTML5 CON SUS
PREDECESORES

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
8

9. ESTRUCTURA BÁSICA DE
UN DOCUMENTO HTML5
9

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
10

11. NOCIONES BÁSICAS DE CSS3

Reglas CSS


Selector, declaración, propiedad, valor
Selectores:


Selectores múltiples y anidados


Elemento, clase, identificador, pseudo clases
Precedencia id-atributo-elemento e !important
Inserción de CSS en el documento

Inline <h1

Interna <style

Externa <link
style="color:red">Prueba</h1>
type=”text/css></style>
rel="stylesheet" type="text/css" href="pr.css" />
11

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


Unidades absolutas (pt, px) y relativas (em, %)


Identificadores de tamaño (small, medium, large)
impressivewebs.com/understanding-em-units-css
Margénes (margin) y rellenos (padding)
12

13. MAQUETACIÓN Y DISTRIBUCIÓN DE ELEMENTOS
EN PANTALLA EN HTML5

Evolución


Estructuras más habituales


tablas – frames – capas (div)
Ancho fijo, ancho variable, adaptable
Referencias en la web

Layout fijo
www.w3schools.com/html/html_layout.asp
Layout adaptativo
13

14. EJERCICIOS SOBRE EL DOCUMENTO
MAQUETAR.HTML

Resetear estilos

Maquetación básica


Espaciados y márgenes


Tamaño del wrap y de los elementos
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ú”
14

15. ESTRUCTURA SEMÁNTICA DE
ELEMENTOS EN HTML5

Evitan arbitrariedad y facilitan la lectura
<div id="header"> This is my header </div>
<header> This is my header </header>
Cabecera de documento/sección
Bloque de enlaces de navegación (menú)
Contenido agrupado temáticamente
Bloque de información independiente
Contenido lateral o relacionado
Pie de documento/sección
<figure>, <figcaption>, <time>
15

16. EJERCICIOS SOBRE EL DOCUMENTO
SEMANTICO.HTML

Cambiar etiquetas antiguas por las nuevas
semanticas html5

Cambiar los estilos adecuadamente

Insertar el script modernizr-2.0.js
16

17. INSERCIÓN DE VIDEO Y AUDIO

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>
17

18. FORMULARIOS CON HTML5

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
18

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
19

20. ANEXO: CODIFICACIÓN XHTML/HTML
(los marcados con N no son necesarios en HTML)

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)
20

21. ANEXO: REFERENCIAS Y WEBS ÚTILES

Algunas páginas tutoriales


http://www.w3schools.com/

http://www.w3schools.com/html/html5_intro.asp


http://msdn.microsoft.com/es-es/ie/hh749019
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)
21

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