Capítulo 1 - Páginas estáticas (Parte 08 de 09)

 8. Etiquetas avanzadas HTML

Con la última versión de HTML (5) han surgido unas características especiales que son bastante útiles al momento de realizar páginas web. Dentro de esas características se pueden resaltar las siguientes.

8.1 Canvas

Elemento que, a través de un lienzo, permite desarrollar elementos gráficos.

<canvas id="marco" style="border: 1px solid blue; width: 200px; height: 100px"></canvas> <script type="text/javascript"> var canvas = document.getElementById('marco'); var context = canvas.getContext('2d'); context.fillStyle = '#ff8f43'; // color de fondo context.fillRect(20, 30, 100, 50); </script>

8.2 SVG

A diferencia del elemento canvas (gráficos planos), SVG se utiliza para gráficos vectoriales.

<svg width=100 height=100 style="border: 1px solid blue"> <circle cx=50 cy=50 r=20 stroke="green" stroke-width=3 fill="red"/> </svg>

8.3 Audio

Hace posible la reproducción de un archivo de sonido.

<audio src="audio.mp3" preload="auto" controls></audio>

"auto" almacena, temporalmente, el archivo multimedia para su reproducción continua.

controls: muestra los controles estándar para la reproducción del audio.

8.4 Video

Hace posible la reproducción de un archivo de video.

<video src="video.mp4" controls></video>

controls: muestra los controles estándar para la reproducción del video.

8.5 HTML Geolocation

Hace posible el reconocimiento de la ubicación geográfica del usuario, siempre y cuando esté usando un navegador que tenga implementado este servicio y que brinde su permiso.

8.5 Drag and Drop

Para arrastrar objetos de un lugar a otro, solo hay que establecer el atributo draggable=true en el elemento que se quiere mover. Drag and Drop se puede implementar prácticamente en cualquier elemento, incluidos archivos, imágenes, enlaces u otros nodos DOM.

8.6 Local Storage

Permite generar y administrar un espacio local en el disco que puede reemplazar a las cookies de versiones anteriores.

8.7 Application Cache

Representa a un mecanismo de memoria temporal para permitir que las aplicaciones basadas en la web se ejecuten sin conexión. Los desarrolladores pueden usar la interface de Application Caché (AppCache) para especificar los recursos que el navegador debería guardar en memoria temporal y tener disponibles para los usuarios cuando no estén conectados.

8.8 Web Workers

Permiten activar secuencias de comandos para ejecutar tareas intensivas de computación, sin bloquear la interfaz de usuario u otras secuencias de comandos para gestionar las interacciones del usuario.

8.9 Server-Sent Events (SSE)

Los Server-Sent Events (SSE) representan a una forma estandarizada de enviar información a un grupo de clientes; por ejemplo, puede utilizarse un feed de noticias que pasa por un servidor y que entrega ciertos datos, en forma regular, a un grupo de subscriptores.