Embed Size (px)
DESCRIPTION
HTML5
Citation preview
Gerardo Ortega Flores
INSTITUTO TECNOLÓGICO DE SAN JUAN DEL RIO.
HTML5
ORTEGA FLORES GERARDO
Contenido 1 HTML 5 ....................................................................................................................................... 2
1.1 MULTIMEDIA ..................................................................................................................... 2
1.1.1 ETIQUETAS AUDIO Y VIDEO............................................................................................ 3
1.2 3D GRAPHICS X .................................................................................................................. 4
1.2.1 EFFECTS .......................................................................................................................... 5
Pasos básicos de animación ..................................................................................................... 5
Actualizaciones programadas ............................................................................................ 6
1.3 OFFLINE STORAGE.............................................................................................................. 6
El Objeto localStorage ......................................................................................................... 7
Ejemplo: .................................................................................................................................. 7
El Objeto sessionStorage .................................................................................................... 7
1.4 CONECTIVITY ..................................................................................................................... 8
1.5 DEVICE ACCESS ......................................................................................................... 10
1.6 PERFOMANCE & INTEGRATION .............................................................................. 10
ORTEGA FLORES GERARDO
1 HTML 5
En un estricto sentido, HTML es un leguaje de marcado basado en texto usado para
dar formato a la información distribuida a través de Internet. En un nivel más alto,
HTML es un lenguaje que se usa para estructurar u presentar texto e imágenes con
una interfaz. HTML5 es un aumento a la especificación actual, HTML4.01, que
agrega nuevas características que permitirán a diseñadores y desarrolladores crear
su propio contenido.
Algunos de los cambios más notables en HTML5 es la adición de etiquetas para
soportar elementos multimedia y gráficos dinámicos. Esto incluye la
etiqueta <audio> para reproducir sonidos, <video> para videos y <canvas > para
gráficos dinámicos, todo esto dentro del web browser y sin depender de software
externo. Los nuevos elementos multimedia habilitan a los browsers modernos para
proveer experiencias enriquecidas y gráficos dinámicos a partir del código HTML.
El soporte para usar video, manipular imágenes, y visualización de datos permitirá
a los diseñadores y desarrolladores crear experiencias ricas y atractivas que
funcionen en múltiples plataformas (El impulsor de HTML5).
1.1 MULTIMEDIA
Multimedia en la web, es sonido, música, videos, películas y animaciones.
Los primeros navegadores web tenían soporte para sólo texto, limitado a una sola
fuente en un solo color.
El apoyo a los sonidos, animaciones y vídeos se maneja de manera diferente por
distintos navegadores. Se admiten diferentes tipos y formatos, y algunos formatos
requieren programas de ayuda adicionales (plug-in’s) para trabajar.
Los elementos multimedia (como sonidos o videos) se almacenan en archivos de
medios.
La forma más común de descubrir el tipo de un archivo, es mirar a la extensión del
archivo. Cuando un navegador ve la extensión .htm o .html archivo, tratará el archivo
ORTEGA FLORES GERARDO
como un archivo HTML. La extensión .xml indica un archivo XML, y la extensión .css
indica un archivo de hoja de estilos. Las fotos son reconocidas por extensiones
como .gif, .png y .jpg.
Los archivos multimedia también tienen sus propios formatos y diferentes
extensiones como: .swf, .wav, .mp3, .mp4, .mpg, .wmv, .avi
1.1.1 ETIQUETAS AUDIO Y VIDEO
Dos nuevas etiquetas para incrustar contenido multimedia directamente: <audio> </audio> y<video> </video>.
Estas etiquetas pretenden simplificar la inserción de contenido multimedia, evitando tener que usar plugins en el navegador. Es el propio navegador el que debe reconocer el formato multimedia y ponerlo en marcha. La mayoría de los navegadores no se han puesto al día para reconocer los formatos de audio y video más comunes, por lo que de momento tendremos que seguir usando la etiqueta embed Las etiquetas audio y video tienen los siguientes atributos para poder localizar y controlar el archivo multimedia.
src="ruta_del_archivo" : Al igual que con las imágenes indicamos en este atributo la ruta del archivo.
autoplay Indica que el archivo debe reproducirse automáticamente al cargarse la página. Este atributo no tiene valores.
controls Indica que deben mostrarse los controles para que el usuario pueda iniciar, detener , pausar el archivo. Este atributo no tiene valores.
loop El archivo vuelve a reproducirse cuando acaba, una y otra vez. Este atributo tampoco tiene valores.
autobuffer El archivo tiene que descargarse completamente antes de empezar a reproducirse. Al igual que los anteriores no necesita valores.
widht="num" Sólo para video; su valor indica en pixels el ancho de la pantalla en que se reproduce el video.
height="num" Sólo para video; su valor indica en pixels el alto de la pantalla en que se reproduce el video.
Veamos con algunos ejemplos cómo se puede escribir el código: <audio src="sintonia.mp3" autoplay loop ></audio> <video src="mivideo.mp4" controls autobuffer widht="300"></video>
ORTEGA FLORES GERARDO
1.2 3D GRAPHICS X
El HTML <canvas> Element
El HTML elemento <canvas> (introducido en HTML5) es un contenedor para
gráficos de lona. Un lienzo HTML es un área rectangular en una página HTML, Un
lienzo tiene varios métodos para caminos de dibujo, cajas, círculos, texto y las
imágenes gráficas.
El elemento <canvas> no está soportado en navegadores viejos, pero están
soportado en la mayoría de las versiones más recientes de los navegadores. El
tamaño por defecto del canvas es 300px * 150px [ancho (width) * alto (height)]. Pero
se puede personalizar el tamaño usando las propiedades height y width de
CSS. Con el fin dedibujar gráficos en el lienzo <canvas> se utiliza un objeto de
contexto de JavaScript que crea gráficos sobre la marcha.
Ejemplo: <canvas id="tutorial" width="150" height="150"></canvas>
Observamos un gran parecido al elemento <img>, con la sola diferencia que este
no tiene los atributos src y alt. El elemento <canvas> tiene solo dos atributos
- width y height. Estos son ambos opcionales y pueden tambien ser puestos usando
propiedades DOM. Cuando los atributos ancho y alto no estan especificados, el
lienzo se inicializara por 300 pixels ancho y 150 pixels de alto. El elemento puede
ser arbitrariamente redimensionado por CSS, pero durante el renderizado la imagen
es escalada para ajustarse al tamaño de su layout.
Diferente al elemento <img>, el elemento <canvas> requiere cerrar la
etiqueta (</canvas>). Si el contenido de regreso (fallback content) no se necesita,
un simple <canvas id="foo" ...></canvas> es completamente compatible con todos
los navegadores que soportan canvas.
RENDERIZACIÓN
El canvas esta inicialmente en blanco. Para mostrar alguna cosa, un script primero
necesita acceder al contexto a renderizar y dibujar sobre este. El
elemento <canvas> tiene un method llamado getContext(), usado para obtener el
contexto a renderizar y sus funciones de dibujo. getContext()toma un parametro, el
tipo de contexto. Para graficos 2D, como los que cubre este tutorial, su
especificacion es "2d".
ORTEGA FLORES GERARDO
EJEMPLO:
<html>
<head>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
1.2.1 EFFECTS
Pasos básicos de animación
Estos son los pasos que debes seguir para dibujar un marco:
1. Desactive la lona
A menos que las formas que vaya a dibujar llenar el lienzo completo (por ejemplo,
una imagen de fondo), es necesario borrar cualquier forma que se han elaborado
previamente. La forma más fácil de hacerlo es usando la clearRect() método.
2. Guardar el estado de lona
Si va a modificar cualquier entorno (como estilos, transformaciones, etc.) que
afectan el estado de la lona y desea asegurarse de que el estado original se utiliza
cada vez que se dibuja un marco, es necesario guardar ese estado inicial.
3. Dibujar formas animadas
El paso en el que hacer la prestación de fotogramas real.
4. Restaurar el estado del lienzo
Si ha guardado el estado, restaurarlo antes de dibujar un nuevo marco.
ORTEGA FLORES GERARDO
Control de la animación.
Actualizaciones programadas
En primer lugar están
los window.setInterval() , window.setTimeout() ywindow.requestAnimationFrame() f
unciones, que se pueden utilizar para llamar a una función específica durante un
período de tiempo determinado.
setInterval(function, delay)
Inicia ejecutar repetidamente la función especificada
por function cada delay milisegundos.
setTimeout(function, delay)
Ejecuta la función especificada por function de delay milisegundos.
requestAnimationFrame(callback)
Le dice al navegador que desea realizar una animación y pide que el
navegador llamar a una función específica de actualizar una animación antes
de la próxima repintado.
Si usted no quiere ninguna interacción del usuario puede utilizar
el setInterval() función que ejecuta repetidamente el código suministrado. Si
quisiéramos hacer un juego, podríamos utilizar los eventos del teclado o el ratón
para controlar la animación y usar setTimeout() . Al establecer EventListener s,
cogemos cualquier interacción del usuario y ejecutamos nuestras funciones de
animación.
1.3 OFFLINE STORAGE
Con el almacenamiento local, las aplicaciones web pueden almacenar datos
localmente dentro navegador del usuario.
Antes de HTML5, los datos de aplicaciones tenían que ser almacenados en las
cookies, incluidos en cada petición de servidor. El almacenamiento local es más
seguro, y grandes cantidades de datos pueden ser almacenados localmente, sin
afectar el rendimiento sitio web.
ORTEGA FLORES GERARDO
A diferencia de cookies, el límite de almacenamiento es mucho mayor (al menos 5
MB) y la información nunca se transfiere al servidor.
El almacenamiento local es por dominio. Todas las páginas, de un dominio, pueden
almacenar y acceder a los mismos datos.
El Objeto localStorage
El objeto localStorage almacena los datos sin fecha de caducidad. No se eliminarán
los datos cuando el navegador se cierra, y estarán disponibles al día siguiente,
semana o año.
Ejemplo:
// Store localStorage.setItem("lastname", "Smith"); // Retrieve document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Ejemplo explicado:
Crear un nombre localStorage / par de valores con name = "apellido" y
value = "Smith"
Recuperar el valor de "apellidos" y la inserta en el elemento con id =
"número"
El Objeto sessionStorage
El objeto sessionStorage es igual al objeto localStorage, excepto que almacena los
datos para una sola sesión. Los datos se eliminan cuando el usuario cierra la
ventana del navegador.
ORTEGA FLORES GERARDO
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.";
1.4 CONECTIVITY
Conectividad – WebSockets
Con AJAX se pueden hacer peticiones con Javascript en cualquier momento, pero
la “iniciativa” debe partir del cliente.
La única forma de comprobar si hay “novedades” en el servidor es el polling a
intervalos regulares.
Websockets es un protocolo específico, no va sobre HTTP. Así que necesitamos
también una implementación de WebSockets en el lado del servidor. La
especificación WebSocket define un API que establece conexiones "socket" entre
un navegador web y un servidor. Dicho con otras palabras: existe una conexión
persistente entre el cliente y el servidor, y ambas partes pueden empezar a enviar
datos en cualquier momento.
Proporcionan una forma de abrir canales full-duplex (en ambas direcciones) con
otras aplicaciones. Esto no solo ayuda a incrementar la velocidad de las
aplicaciónes (dado que no necesita acudir al servidor web por la información que
deseamos, sino el código que la obtiene); también nos permite desde una única
aplicación que estemos viendo en ese momento obtener información de más de una
fuente sin necesidad de un intermediario como sería el servidor web.
Permite crear una conexión permanente entre la página y el servidor e
intercambiar datos no HTML a través de ese medio.
Abrir un WebSocket
var connection = new WebSocket('ws://www.unapagina.com')
ORTEGA FLORES GERARDO
Los elementos ws:. Este es el nuevo esquema de URL para las conexiones
WebSocket. También hay wss: para conexiones WebSocket seguras, de la misma
forma que se utiliza https: para las conexiones HTTP seguras.
Adjuntar inmediatamente varios controladores a la conexión permite saber cuándo
está abierta la conexión, cuándo ha recibido mensajes entrantes o cuándo hay un
error.
Enviar un mensaje al servidor
Cuando se establezca una conexión con el servidor (cuando el evento open se
active), podemos empezar a enviar datos al servidor con el método send('your
message') en el objeto de conexión. Antes solo se admitían cadenas, pero la última
especificación también permite enviar mensajes binarios. Para enviar datos
binarios, puedes usar un objeto Blob o ArrayBuffer.
//Enviar una cadena connection.send('hola servidor'); //Enviar un archivo como datos binarios //Suponemos que en el HTML hay un <input type=”file” id=”archivo”> var file = document.getElementById(“archivo”).files[0]; connection.send(file); Recibir datos del servidor: onopen, onerror, onmessage connection.onmessage = function(mensaje) { console.log('El servidor dice: ' + mensaje.data); }; Servidores proxy Toda nueva tecnología trae consigo una nueva serie de problemas. En el caso de WebSocket, se trata de la compatibilidad con los servidores proxy que median las conexiones HTTP en la mayoría de las redes corporativas. El protocolo WebSocket utiliza el sistema de actualización de HTTP (normalmente utilizado para HTTP/SSL) para "actualizar" una conexión HTTP a una conexión WebSocket. A algunos servidores proxy no les gusta esto y cancelan la conexión. Por tanto, aunque un cliente dado utilice el protocolo WebSocket, es posible que no pueda establecer una conexión. Esto hace que la siguiente sección sea aún más importante
ORTEGA FLORES GERARDO
1.5 DEVICE ACCESS
Usando la API de la cámara
Permite utilizar, manipular y almacenar una imagen de la cámara del ordenador.
Eventos táctiles
Manipuladores para reaccionar a los eventos creados por un usuario cuando pulsa
pantallas táctiles.
El uso de geolocalización
Permite a los navegadores localizar la posición del usuario mediante
geolocalización.
Detección de la orientación del dispositivo
Obtiene la información cuando el dispositivo, en el que se ejecuta el navegador,
cambia de orientación. Esto puede ser utilizado como un dispositivo de entrada (por
ejemplo, para hacer que los juegos que reaccionan a la posición del dispositivo) o
adaptar el diseño de una página a la orientación de la pantalla (vertical u horizontal).
API Pointer Lock
Permite bloquear el puntero al contenido, por lo que los juegos y aplicaciones
similares no pierden el foco cuando el puntero alcanza el límite de la ventana.
1.6 PERFOMANCE & INTEGRATION
Web Workers
Permite delegar la evaluación JavaScript para subprocesos en segundo plano, lo
que evita que estas actividades ralenticen eventos interactivos.
Instruccion para crear un worker:
var worker = new Worker('task.js');
Despues de crear el worker, se inicia con una llamada del metodo postMessage()
worker.postMessage();
ORTEGA FLORES GERARDO
XMLHttpRequest Nivel 2
Permite buscar de forma asíncrona algunas partes de la página, mostrando
contenido dinámico, que varía según el tiempo y las acciones del usuario. Esta es
la tecnología detrás de Ajax.
Motores JIT compilación tarde JavaScript
La nueva generación de motores de JavaScript es mucho más poderoso, lo que
lleva a un mayor rendimiento.
Historia API
Permite la manipulación del historial del navegador. Esto es especialmente útil
para la carga interactivamente nueva informacion en las páginas.
El atributo contentEditable: transformar su sitio web en una wiki!
HTML5 ha estandarizado el atributo contentEditable. Aprenda más sobre esta
opción.
Arrastrar y soltar
La API de arrastrar y soltar (drag and drop) permite soporte para arrastrar y soltar
elementos dentro y entre sitios web. Esto también proporciona una API simple
para el uso de extensiones y aplicaciones basadas en Mozilla.
Gestión del foco en HTML
Los nuevos atributos HTML5 activeElement y hasFocus son soportados.
Manejadores de protocolo basados en web
Ahora puede registrar las aplicaciones web como controladores de protocolo
utilizando el metodo navigator.registerProtocolHandler().
requestAnimationFrame
Permite controlar la renderizacion de animaciones para obtener un óptimo
rendimiento.
Fullscreen API
Controla el uso de la pantalla completa de una página Web o aplicación, sin la
interfaz de usuario del explorador mostrada.
API Pointer Lock
ORTEGA FLORES GERARDO
Permite bloquear el puntero al contenido, por lo que los juegos y aplicaciones
similares no pierden el foco cuando el puntero alcanza el límite de la ventana.
Eventos en línea y fuera de línea
Para construir una buena aplicación web offline-funcional, lo que necesita saber
cuando su aplicación es realmente fuera de línea. Dicho sea de paso, también es
necesario saber cuando su solicitud sea devuelta a un estado de conexión de
nuevo.
