Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2...

37
Fundamentos de HTML5 JUAN CARLOS CONDE RAMÍREZ WEB-TOOLS

Transcript of Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2...

Page 1: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Fundamentos de HTML5JUAN CARLOS CONDE RAMÍREZ

WEB-TOOLS

Page 2: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Qué es HTML

FCC-BUAP 2

•El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico para laconstrucción y visualización de páginas Web.

•Su funcionamiento se basa en el uso de marcas o etiquetas, cada una con un fin específico. Estaspueden definir:

◦ la estructura del contenido,

◦ la forma en que se visualiza* y

◦ los enlaces a otros documentos HTML.

•Una de las principales características es que HTML puede ser interpretado directamente porcualquier navegador actual.

JCCR©

Page 3: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Estructura base HTML I

FCC-BUAP 3JCCR©

<html>

<head>

<title>El primer documento HTML</title>

</head>

<body>

<p>El lenguaje HTML es <strong>tan sencillo</strong>

que prácticamente se entiende sin estudiar el

significado de sus etiquetas principales.</p>

</body>

</html>

Page 4: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Estructura base HTML II

FCC-BUAP 4JCCR©

Page 5: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Etiquetas de apertura y cierre

FCC-BUAP 5JCCR©

Page 6: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Evolución de HTML

FCC-BUAP 6JCCR©

1991

1994

1995

1996

1997

1998

2000

2004

2005

2008

HTML 1.0Created by Tim

Berners Lee

HTML 2.0

Fundación de la W3C

Lanzamiento de Internet Explorer

HTML comienza a ser soportado en Tablets

Lanzamiento de CSS1

HTML 3.2 (WILBUR)

HTML 4.0 (COUGAR)

CSS2

HTML & XML forman XHTML

Nace la WHATWG (Web Hypertext

Application Technology Group)

AJAX

HTML5

Google Chrome

<html>

<table>.css

2014

Estándar

Page 7: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Qué es HTML5

FCC-BUAP 7JCCR©

•Es la quinta versión del estándar definido por la W3C que es el sucesor del HTML 4.0 (Cougar)estandarizado en el 1998.

•Es soportado por todas las nuevas versiones de la mayoría de los navegadores, sin embargo conversiones más antiguas podrían no mostrarse correctamente todos los elementos.

•Cuando un navegador no reconoce elementos HTML los manejan automáticamente comoelementos en línea.

Page 8: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Características de HTML5

FCC-BUAP 8JCCR©

•HTML5 cuenta con nuevos elementos a diferencia de sus predecesores:

1. Un nuevo Doctype

2. Elementos semánticos

3. Elementos de formato/control

4. Elementos gráficos

5. Elementos multimedia

6. Compatibilidad con nuevas APIs

7. Almacenamiento local

Page 9: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Nuevo Doctype

FCC-BUAP 9JCCR©

•El Doctype debe ser la primera cosa que incluyas en tu página Web.

•Es básicamente un “mensaje” para el navegador Web que le indica en qué versión de HTML está escrita la página a mostrar.

•Algunos ejemplos de Doctype son:◦ HTML 4.0: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

◦ HTML 5: <!DOCTYPE html>

Page 10: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Elementos Semánticos (I)

FCC-BUAP 10JCCR©

•Elementos no-semánticos: Por ejemplo: <div>◦ No nos dice nada del contenido que será incluido.

•Elementos semánticos: Por ejemplo <form> y <table>◦ Claramente define el contenido

◦ Es fácil de reconocer para el navegador

◦ Mejora la SEO (Search Engine Optimization) de los motores de búsqueda.

◦ Permite una mejor experiencia para el usuario

HTML 4.0:

<div id=”header”> </div>

<div id=”footer”> </div>

HTML5:

<header> </header>

<footer> </footer>

Page 11: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Elementos Semánticos (II)

FCC-BUAP 11JCCR©

•HTML5 contiene otros elementos semánticos que permiten escribir páginas Web de manera más sencilla:

Page 12: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Elementos Semánticos (III)

FCC-BUAP 12JCCR©

Elemento Función

<header> Esta sección contiene típicamente el nombre del sitio, un logo y/o un menú de navegación.

<nav>Esta etiqueta se usa para identificar una barra de navegación que contiene hipervínculos denavegación.

<section> Esta etiqueta define una sección en la página Web.

<article>Esta etiqueta define un artículo en la página Web, es decir, una pieza autónoma eindependiente de contenido. Es útil para publicaciones de blogs, foros, artículos de periódicos,etc.

<aside> Esta etiqueta puede ser usada para crear barras laterales en una página Web.

<footer>Esta etiqueta es usada al fondo de la página. Normalmente incluye el nombre del autor einformación de copyright, así como información de contacto y/o hipervínculos de navegación.

Page 13: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Elementos de Control/Formulario (I)

FCC-BUAP 13JCCR©

•Nuevo ELEMENTO de formulario:

◦ <datalist> especifica una lista de opciones predefinidas para un elemento <input> de un formulario.

<form action="myWebPage.php">

<input list="browsers">

<datalist id="browsers">

<option value="Chrome">

<option value="IE">

<option value="Firefox">

<option value="Opera">

<option value="Safari">

</datalist>

</form>

Page 14: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Elementos de Control/Formulario (II)

FCC-BUAP 14JCCR©

•Nuevo ELEMENTO de formulario:

◦ <output> es utilizada para representar el resultado de un cálculo.

<form action="action_page.asp“ oninput="x.value=parseInt(a.value)+parseInt(b.value)">

0

<input type="range" id="a" name="a" value=“50”>

100 +

<input type="number" id="b" name="b" value=“50”>

=

<output name="x" for="ab"></output>

<br/><br/>

<input type="submit“>

</form>

Page 15: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Elementos de Control/Formulario (III)

FCC-BUAP 15JCCR©

•Nuevo ELEMENTO de formulario:

◦ <keygen> es utilizada para proporcionar autenticación de usuarios de manera segura.

◦ Cuando el formulario es enviado se generan 2 llaves, 1 privada y 1 pública.

◦ La llave privada es almacenada localmente.

◦ La llave pública es enviada al servidor.

◦ La llave pública será utilizada para generar un certificado de cliente y así autenticar al usuario si se necesita.

<form action="action_page.php">

Username: <input type="text" name="user">

Encryption: <keygen name="security">

<input type="submit">

</form>

NOTA: por defecto los navegadores no muestran elementos desconocidos.

Page 16: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Elementos de Control/Formulario (III)

FCC-BUAP 16JCCR©

•Nuevos TIPOS de entrada de formulario:

Page 17: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Elementos Gráficos (I)

FCC-BUAP 17JCCR©

<canvas>Esta etiqueta es utilizada como un contenedor del lienzo

<svg>Soportes para gráficos vectoriales escalables

<canvas id="myLine" width="250"

height=”250"

style="border:1px solid #ccc;">

</canvas>

<script>

var c =

document.getElementById("myLine");

var ctx = c.getContext("2d");

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();

</script>

Basic Example - Line:

<svg width="100" height="100">

<circle cx="50" cy="50" r="40"

stroke="blue" stroke-width="4"

fill="red" />

</svg>

Basic Example - Circle:

Page 18: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Elementos Gráficos (II)

FCC-BUAP 18JCCR©

Diferencias entre Canvas y SVG:

<svg>

● Resolución independiente● Soporte para manejadores de

eventos● Lento si el renderizado es complejo

(mucho uso de DOM)● Adecuado para aplicaciones con

grandes áreas de representación, por ejemplo. mapas de Google

● No adecuado para juegos

<canvas>

● Es sumamente dependiente de la resolución

● No soporta manejadores de eventos● Capacidades pobres de renderizado

de texto● Bueno para juegos con graficos

intensivos● Puede guardar la imagen resultante

como .jpg o .png

Page 19: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Elementos Multimedia (I)

FCC-BUAP 19JCCR©

•Ejemplos multimedia en páginas Web incluyen: imágenes, videos, audio y más.

•Formatos comunes de imágenes: .jpg, .png, .gif

•Formatos comunes de video: .avi, .mpg, .mov, .swf, .flv, .ogg, .mp4

•Formatos comunes de audio: .mp3, .wav, .ogg, .aac, .midi

Page 20: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Elementos Multimedia (II)

FCC-BUAP 20JCCR©

•Elemento <video>◦ Para incrustar un video en una página Web se podría incluir con esta etiqueta.

◦ Antes de HTML5 no había algún estándar para incluir videos en una página Web.

◦ IE9+, Chrome, Firefox, Opera y Safari soportan esta etiqueta o elemento.

◦ IE8 y versiones anteriores no lo soportan.

Page 21: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Elementos Multimedia (III)

FCC-BUAP 21JCCR©

•Actualmente son soportados tres FORMATOS de video:◦ mp4, webm, ogg

Browser MP4 WebM Ogg

Internet Explorer Sí No No

Chrome Sí Sí Sí

Safari Sí No No

Firefox Sí Sí Sí

Opera Sí (desde Opera 25) Sí Sí

Page 22: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Elementos Multimedia (IV)

FCC-BUAP 22JCCR©

•Elemento <audio>◦ Para incrustar un audio en una página Web se podría incluir con esta etiqueta.

◦ Antes de HTML5 no había algún estándar para incluir audios en una página Web. Los archivos de audio sólo se podía reproducir con un plug-in como Flash.

◦ IE9+, Chrome, Firefox, Opera y Safari soportan esta etiqueta o elemento.

◦ IE8 y versiones anteriores no lo soportan.

Page 23: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Elementos Multimedia (V)

FCC-BUAP 23JCCR©

•Actualmente son soportados tres FORMATOS de audio:◦ mp3, wav, ogg

Browser MP3 Wav Ogg

Internet Explorer Sí No No

Chrome Sí Sí Sí

Safari Sí Sí No

Firefox Sí Sí Sí

Opera Sí Sí Sí

Page 24: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Nuevas API

FCC-BUAP 24JCCR©

•Interfaz de Programación de Aplicaciones o API (Application Program Interface)

•Puede decirse que son un conjunto de rutinas, protocolos y herramientas para construirsoftware y aplicaciones.

•Una compañía de software, p.e. Google, puede liberar su API (Google Maps) al público para queotros programadores puedan desarrollar software usando sus implementaciones.

Page 25: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Ejemplo: Geolocalización

FCC-BUAP 25JCCR©

•El API de Geolocalización es utilizado para determinar la ubicación de un usuario, siempre ycuando el usuario lo haya aprobado por supuesto!

•IE9+, Chrome, Firefox, Safari, Opera soportan Geolocalización. Sin embargo, esta es mucho másprecisa en dispositivos con GPS como smart-phones y tabletas electrónicas.

W3C Geolocation API Specification

Page 26: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Arrastra y Suelta (Drag & Drop)

FCC-BUAP 26JCCR©

•En HTML5 cualquier elemento puede ser arrastrado.

•IE9+, Firefox, Chrome, Opera, Safari soportan el drag & drop.

HTML5 Rocks Tutorial

Page 27: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Almacenamiento Local (II)

FCC-BUAP 27JCCR©

•Las aplicaciones Web están habilitadas para almacenar datos localmente en los navegadores delos usuarios.

•Previo a HTML5, estos datos eran almacenados en cookies las cuales eran mucho menos segurasy menores en tamaño.

•Con HTML5:◦ El almacenamiento local tiene un límite de al menos 5MB.

◦ Es seguro tal que la información nunca es transferida al servidor.

◦ Esto no afecta el rendimiento del sitio Web.

◦ El almacenamiento local es soportado en IE8+, Chrome, Firefox, Opera, Safari.

◦ IE7 o anteriores no lo soportan.

Page 28: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Almacenamiento Local (III)

FCC-BUAP 28JCCR©

•El almacenamiento local de HTML5 proporciona 2 objetos para almacenar datos del lado delcliente:

• window.localStorage – Almacena datos sin fecha de expiración.

• code.sessionStorage – Almacena datos por una sesión (los datos son perdidos cuando la pestaña secierra)

Page 29: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Almacenamiento Local (IV)

FCC-BUAP 29JCCR©

•Dado que el objeto localStorage almacena datos sin fecha de expiración, los datos no seránborrados cuando el navegador sea cerrado.

•¿Qué está sucediendo?◦ Creamos un objeto con un par nombre/valor asignando nombre=“lastname” y valor=“Smith”.

◦ Se recupera el valor de “lastname” y se inserta en el elemento con id=“result”.

◦ localStorage.removeItem remueve el ítem “lastname” del almacenamiento local.

◦ Los pares nombre/valor siempre son almacenados como strings.

// StorelocalStorage.setItem("lastname", "Smith");

// Retrievedocument.getElementById("result").innerHTML = localStorage.getItem("lastname");localStorage.removeItem(“lastname”);

Page 30: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Almacenamiento Local (V)

FCC-BUAP 30JCCR©

•El siguiente código cuenta el número de veces que un usuario da clic en la sesión actual.

•El objeto sessionStorage es similar al objeto localStorage, sin embargo éste almacena los datospor una sesión y son borrados cuando el usuario cierra la ventana del navegador.

if (sessionStorage.clickcount) {sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;

} else {sessionStorage.clickcount = 1;

}document.getElementById("result").innerHTML = "You have clicked the button " +sessionStorage.clickcount + " time(s) in this session.";

Page 31: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Cache de Aplicación (I)

FCC-BUAP 31JCCR©

•Esta característica le permite a una aplicación Web ser accesible sin una conexión a Internet.

•Existen 3 ventajas para esto:◦ Reduce la carga del servidor – el navegador sólo descarga recursos actualizados del servidor.

◦ Velocidad – los recursos almacenados en cache se cargan más rápidamente.

◦ Navegación sin conexión – los usuarios pueden utilizar la aplicación sin conexión

•IE 10, Chrome, Firefox, Opera y Safari soportan la cache de aplicación.

<!DOCTYPE HTML><html manifest="demo.appcache"><body>The content of the document......</body></html>

Todas las páginas con el atributo manifestespecificado serán cacheadas cuando el usuario lasvisita. La extensión de archivo para el manifiesto es“.appcache”

Page 32: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Cache de Aplicación (II)

FCC-BUAP 32JCCR©

•El archivo de manifiesto es un archivo de texto simple que le dice al navegador qué almacenaren cache.

•Este tiene 3 secciones:

1. Cache Manifest – los archivos que aparecen en esta sección se almacenarán en caché después dedescargarse por primera vez.

2. Network – estos archivos requieren una conexión al servidor, y nunca se almacenarán en cache.

3. Fallback – los archivos de esta sección especifican las páginas de respaldo si una página esinaccesible.

Page 33: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Cache de Aplicación (III)

FCC-BUAP 33JCCR©

•Una vez que una aplicación Web es almacenada en cache, esta se mantiene en cache hasta quesucede algo de lo siguiente:

◦ El archivo manifiesto es modificado.

◦ El usuario limpia la memoria cache del navegador.

◦ La cache de la aplicación es modificada usando programación.

• IMPORTANTE: Ten cuidado con lo que se almacena en cache. Una vez que un archivo se almacena encache, el explorador continuará mostrando la versión en cache, incluso si el archivo cambia en elservidor. Además, los navegadores pueden tener diferentes límites de tamaño para los datosalmacenados en caché.

Page 34: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Soporte SSE (I)

FCC-BUAP 34JCCR©

•Soporte para Eventos Enviados por el Servidor (Server-Sent Events).

•Ocurre cuando una página Web obtiene actualizaciones automáticamente desde un servidor,p.e. actualizaciones de Twitter, Facebook o noticias.

•El soporte SSE es soportado en la mayoría de los navegadores, excepto en Internet Explorer.

Page 35: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Soporte SSE (II)

FCC-BUAP 35JCCR©

•¿Qué está sucediendo?◦ Creamos un nuevo objeto EventSource especificando la URL de la página que envía actualizaciones (p.e.

demo_sse.php)

◦ Cada que una actualización es recibida, ocurre un evento onmessage.

◦ Cuando un evento onmessage ocurre, los datos recibidos se ponen en el elemento con id=“result”.

El objeto EventSource es utilizado para recibir notificaciones SSE:

var source = new EventSource("demo_sse.php");source.onmessage = function(event) {

document.getElementById("result").innerHTML += event.data + "<br>";};

Page 36: Fundamentos de HTML5climate.cs.buap.mx/.../04_Fundamentos_de_HTML5.pdf · Qué es HTML FCC-BUAP 2 •El HyperText Markup Language, por sus siglas en inglés, es el lenguaje más básico

Soporte SSE (II)

FCC-BUAP 36JCCR©

•Para que el código funcione, necesita un servidor capaz de enviar actualizaciones de datos(PHP o ASP).

•¿Qué está sucediendo?• Se configura el encabezado Content-Type como “text/event-stream”

• Se especifica que la página no será almacenada en cache

• Se obtienen los datos a enviar

• Se vacían los datos de salida de vuelta a la página

Código en PHP:<?phpheader('Content-Type: text/event-stream');header('Cache-Control: no-cache');$time = date('r');echo "data: The server time is: {$time}\n\n";flush();?>

Código in ASP:<%Response.ContentType = "text/event-stream"Response.Expires = -1Response.Write("data: The server time is: " & now())Response.Flush()%>