Seminario html5

Objetivo:

Objetivo de la Sesión

• Presentar y describir las nuevas etiquetas del estándar HTML5

• Citar los antecedentes que derivaron su creación

• Citar las etiquetas semánticas nuevas de HTML5

• Demostrar su uso a través de código para una aplicación

Antecedentes:

Antecedentes

¿Cómo se construían páginas web?

Antecedentes

HTML4 / XHTML1

• Ambos estándares para declarar estructura de un sitio web.

• XHTML es una versión de HTML compatible con XML, un lenguaje de marcado más genérico y ordenado.

• Creados hace más de 10 años.

Estructura de Etiquetas

<elemento atributo1=“valor1”>

Contenido

</elemento>

Propuesta Teórica

• La W3C esperaba que el siguiente lenguaje web sería XHTML2.• Redefinía muchas características de la anterior versión.

• Era más un intento académico que técnico.

… propuesta VS la realidad

• Un grupo independiente de programadores observaron las necesidades actuales de los desarrolladores.• Construyó las bases de lo que hoy llamamos HTML5.

• Provocó la cancelación de XHTML2.

¿Qué esHTML5?

¿Quiénes están usando

HTML5?

www.apple.com

www.youtube.com

www.disneylatino.com

¿Qué son las nuevas

etiquetas deHTML5

Etiquetas de HTML

• Los elementos, atributos y valores de atributos tienen un significado.

<img src=“http://www.udeciperu.com/images/html5.png”>

Nuevas etiquetas

• HTML5 define nuevos elementos y atributos.

¿Mejora la semántica de un documento ?

Código

Nuevas (y viejas) etiquetas HTML5

• Periodic Table of the Elements.

Clasificación de Etiquetas

• Elemento Raíz

• Metadatos e inclusión de Scripts.

HTML5: Semantics:Nuevas etiquetas

<header>

<hgroup>

<h1>Título de página</h1>

<h2>Subtítulo</h2>

</hgroup>

</header>

<nav>

<ul>Opción de navegación ... </ul>

</nav>

Menos atributos innecesarios

<!DOCTYPE html PUBLIC "-//W3C//DTD

XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

<script type="text/javascript"

src="micodigo.js"></script>

<link rel="stylesheet"

href="path/to/stylesheet.css“ type="text/css" />

HTML5: Semantics: Formularios

HTML5: Semantics: Validaciones

HTML5: Offline & Storage

Local Storage

• Para almacenar grandes cantidades de datos

en el lado del Cliente (navegador).

• Usos:• Descargar información usada recurrentemente

• Almacenar la interfaz de un sitio web

Indexed DB

• Para almacenar datos estructurados en llaves y valores.• NO es una base de datos relacional

• Es un almacén de objetos, pero con funcionalidades de búsqueda y transacciones

HTML5: DeviceAccess

Geolocation API

• Un sitio te pregunta si quieres compartir tu ubicación

• Recopila información sobre puntos de acceso inalámbricos cercanos y la IP de tu PC

• Envía información a Google Location Services, quien intenta determinar tu ubicación

Geolocation API

HTML5: Connectivity

Web Sockets

• Una técnica de conexión

• Forma estándar de conexión Web:• Una petición, una respuesta

• Web Sockets:• Una petición, el servidor mantiene una conexión

• Usos:• Reutilización de conexiones

Multimedia

HTML5: Multimedia: Audio y video

<video src="movie.ogv" poster=”poster.jpg”

autoplay loop controls></video>

HTML5: 3D,

Graphics &Effects

HTML5: 3D, Graphics ...: SVG

• Formato vectorial

• Basado en XML

HTML5: 3D, Graphics ...: Canvas

• Nueva etiqueta HTML

• Contenido completado por JavaScript

• Permite generar gráficos 2D, juegos, animaciones y composición de imágenes

HTML5: 3D, Graphics ...: WebGL

• Tecnología para que el navegador pueda accederse a funcionalidades de aceleración gráfica desde el navegador

• Basado en JavaScript y OpenGL

bodybrowser.googlelabs.com

HTML5: 3D, Graphics & Effects

¿HTML5 es el fin de Flash?

HTML5: 3D, Graphics ... ¿y Flash?

• Google• Swiffy

• Adobe• Wallaby

• Edge

• Muse

HTML5: Performance

&Integration

• Web Workers

• XMLHttpRequest 2

HTML5: CSS3

Styling

HTML5: CSS3 Styling

• CSS3• Código más simple para estilos

• Ahorra tiempo y trabajo

HTML5:Los nuevosParadigmas

Elementos Raíz, Metadatos y Scripts

• <html manifest=“archivo”>

• <head>• <title>

• <meta charset=“UTF-8”>

• <base>

• <link sizes=“any”>

• <style type=“text/css”>

• <script tipe=“text/javascript”>

• <noscript>

• No hay nuevos elementos.

• PERO sí Optimizaciones en los atributos.


• Semántica a nivel de texto.

Semántica a nivel de texto

• Fechas

<time> 2014-06-28</time>

<time datetime=“2014-06-28T08:00-14:00">9:30

Comenzamos </time>


• Cambios de Línea

Este es un cambio de línea <br> obligatorio.

Este es un cambio de línea <wbr> de acuerdo al ancho de la pantalla.


• Texto resaltado

La empresa UDECI lleva <mark> tecnologías web de vanguardia a estudiantes </mark> de universidades, institutos, escuelas y todo público en general.

La empresa UDECI lleva tecnologías web de vanguardia a estudiantes de universidades, institutos, escuelas y todo público en general.

Clasificación de EtiquetasAgrupamiento de Contenido

<figure>

<img src="firefox.png" alt="Firefox browser">

<img src="thunderbird.png" alt="Thunderbird e-mail client">

<img src="sunbird.png" alt="Sunbird">

<figcaption>Logotipos de tres programas desarrollados por Mozilla: Firefox,Thunderbird y Sunbird</figcaption>

</figure>

Logotipos de tres programas desarrollados por Mozilla: Firefox,Thunderbird y Sunbird

Clasificación de EtiquetasFormularios: Nuevos Elementos

• Lista de datos

<input list="hamburguesas" />

<datalist id="hamburguesas">

<option value="Bembos">

<option value="Mc Donalds">

<option value="Burger King">

<option value="Tío Bigote">

</datalist>

Clasificación de EtiquetasFormularios: Nuevos Elementos

• Generación de llaves públicas y privadas entre Servidor y Navegador

<keygen name=“seguridad”/>

Formularios: Nuevos Elementos

• Salida de ejecución de un script.

<output id="result"

onforminput="resultadoCalculo()"></output>

Formularios: Nuevos Atributos

• Formularios• Autocomplete• Novalidate

<form action="demo.php" method="get"

autocomplete="on" novalidate="novalidate">

<input type="text" name="nombre" /><br />

<input type="text" name="apellido" /><br />

<input type="email" name="email"

autocomplete="off" />


• Entrada de datos (input)• autocomplete• Autofocus

<form action="demo.php" method="get">

<input type="text" name="nombre"

autocomplete="on" /><br />

<input type="text" name="apellido" /><br />

<input type="email" name="email"

autofocus="autofocus" />

• Entrada de datos (input)• form

• Sobreescritura de form Formaction

Formenctype

Formmethod

Formnovalidate

Formtarget


• Entrada de datos (input)• height / width (asociado a imágenes)

• list (asociado a datalist)


• Entrada de datos (input)• min, max, step (asociados a números y fechas)

• multiple (seleccionar múltiples elementos)


• Entrada de datos (input)• pattern (regexp)

• placeholder

• required

Formularios: Tipos de Entrada

• Tipos• email

• url

<input type="email"

name="usuario_email" />

<input type="url"

name="usuario_web" />

Formularios: Tipos de Entrada

• Tipos• number

• range

<input type="number" min="1" max="10"

name="puntos" />

<input type="range" min="1" max="10"

name="puntos2" />

Formularios: tipos de entradas

• Tipos: Date Pickers (Selectores de fecha)• date

• month

• week

• time

• datetime

• datetime-local

<input type="date" name="fecha_viaje" />


• Tipos:• search

<input type="search" name="palabra_clave" />


• Tipos:• color

<input type="color" name="color_fondo" />

Clasificación del Documento

• Secciones de documento

Secciones del Documento

• Cabeceras y navegación

<header>

<hgroup>

<h1>Título de página</h1>

<h2>Subtítulo</h2>

</hgroup>

</header>

<nav>

<ul>Opción de navegación ... </ul>

</nav>


• Secciones y artículos

<section>

<article>

<header><h1>Título de artículo</h1>

</header>

<section>

Contenido de la nota ...

</section>

</article>

</section>

Clasificación de etiquetas

• Datos de tablas

Datos de Tablas

• Columnas

<table><colgroup span="2" style="background-color:red" /><tr> <th>Código</th><th>Nombres</th><th>Aceptado</th> </tr><tr> <td>81014</td><td>Juan Eladio Sánchez</td><td>SI</td> </tr>


• Elementos interactivos

Elementos Interactivos

• Elementos interactivos• menu

• command

• summary

• details


• Contenido incrustado (embebido)

Aplicación

Demostración

• Awesome HTML5 Dashboard

(Mozilla's Web O' Wonder)

¿Y si uso navegadores antiguos?

• Modernizr

Referencias:

Referencias webgráficas

• Periodic Table of the Elementshttp://joshduck.com/periodic-table.html

• W3C Schools: HTML5 Tutorialhttp://www.w3schools.com/html5/

• Awesome HTML5 Dashboardhttps://mozillademos.org/demos/dashboard/demo.html

• Mozilla Developer Networkhttps://developer.mozilla.org/es/HTML/HTML5

• HTML5 Doctor - http://www.html5doctor.com/

Recursos

Código:

• Modernizr - http://www.modernizr.com/

• HTML5 Boilerplate - http://html5boilerplate.com/

¿Funcionará?:

• HTML5 Test - http://www.html5test.com/

• When can I use? -

http://caniuse.com/#cats=HTML5

Tecnologías HTML5

Seminario html5

Technology

Transcript of Seminario html5