Introdução ao HTML5: Editores, Imagens, Áudio e Vídeo

Vista previa del material en texto

HTML5
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje 1
Contenidos
MAPA CONCEPTUAL
INTRODUCCIÓN
1. EDITORES DE TEXTO PARA HTML5
2. HTML5
 2.1 Imágenes en un documento HTML5
 2.2 Sonido en un documento HTML5
 2.3 Video en un documento HTML5
 
GLOSARIO
BIBLIOGRAFÍA
CREATIVE COMMONS
CRÉDITOS
Pág.
2
3
4
4
5
6
8
10
11
12
13
HTML5
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje 2
Introducción
La versión HTML5 es la última revisión importante del lenguaje básico para 
la World Wide Web, en esta se realizaron varios e importantes cambios 
en atributos y elementos que permiten potencializar y optimizar el uso de 
recursos en la web, garantizando abreviación, visualización, velocidad y 
conectividad entre otras, ofreciendo al usuario una experiencia novedosa y 
practica en su interacción con los recursos de la nube, dentro de este material 
específicamente encontrará las condiciones y sintaxis necesarias para hacer 
uso de imágenes, audio y video dentro de una página HTML5.
Mapa 
Conceptual
Mapa
Conceptual HTML5
Trata
Contiene
HTML5Editores de
texto para HTML5
Imágenes en un
documento HTML5
Sonido en un
documento HTML5
Video en un
documento HTML5
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje 4
1. Editores de texto para HTML5
Los editores de texto son la herramienta principal para trabajar en 
HTML5, su importancia radica en la ayuda contextual que puede 
proporcionar, ya que evita tener que recordar una gran lista de 
atributos y etiquetas con las que se suele trabajar.
Existe una gran variedad de editores, a continuación se mencionan 
algunos, sin embargo, puede investigar y proponer otro que 
considere apto a sus necesidades.
CoffeCup Free Editor, TextWrangler, TextMate, Kompozer, Aptana 
Studio, Notepad++, BlueGriffon, Sublime Text, JetBrains WebStorm, 
Microsoft Visual Studio Express for Web, Squire, WYSIhtml5, Popline, 
Rendera, Mercury, Aloha Editor, BlueGriffon, Bootstrap WYSIWYG, 
Raptorttps, Canvas, Qute, Line Control.
2. HTML5
Según su función los recursos se clasifican en los siguientes 
grupos:
 
- Semántica: 
Facilita el esquema y representación de diversos recursos para 
el uso de video y audio, el manejo de formularios con nuevos 
elementos, nuevas etiquetas para el manejo de texto, integración 
de formulación matemática, mejora de operatividad entre el 
html5 y sus navegadores compatibles.
- Conectividad:
Comprende las diferentes tecnologías que como su nombre lo 
indica apoyan la conectividad, entre ellas podemos encontrar:
a. Web Sockets (tecnología que apoya la interoperabilidad entre 
el navegador del usuario y el servidor).
b. Eventos de servidor enviados: Permite enviar respuestas al 
usuario sin que este haya realizado una petición.
c. WebRTC: Tecnología que permite la comunicación en tiempo 
real, basados en la conexión directamente por el navegador sin 
ayuda de plugins o aplicaciones externas.
- Sin conexión y almacenamiento:
Favorece el almacenamiento de grandes cantidades de 
información en estado sin conexión, mejorando el rendimiento 
de búsquedas mediante índices, permite el uso WHATWG que 
favorece el almacenamiento del lado del cliente hasta recuperar 
el estado de la conexión.
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje 5
- Multimedia:
Permite la manipulación de contenidos multimedia mediante el 
uso de los elementos <audio> y <video>, implementa el uso de la 
tecnología WebRTC, utilizando la API, permite almacenar y utilizar la 
imagen de la cámara del ordenador, incluye el elemento <Track> que 
agiliza el uso de subtítulos y capítulos, uso de WebVTT.
- Gráficos y efectos 2D/3D:
Novedad en utilización del elemento <canvas> y formato SVG.
- Rendimiento e integración.
Agiliza procesos de velocidad en eventos interactivos, facilita el 
cargue de páginas de manera asíncrona gracias al apoyo de la 
tecnología Ajax, alto rendimiento en la nueva generación de los 
motores JavaScript, uso del atributo contentEditable que permite 
que el sitio web sea una wiki, usa el requestAnimationFrame para 
un óptimo rendimiento, ya que controla la renderización, controla el 
manejo de la pantalla completa y le apuesta a una aplicación offline 
funcional.
- Acceso al dispositivo:
Permite múltiples reconocimientos de acceso al dispositivo desde 
el manejo de imagen de la cámara Web, eventos táctiles, geo- 
localización, orientación del dispositivo y bloqueo del movimiento 
de la pantalla.
- CSS3:
Integración y optimización de varios de los elementos de estilo 
comprendidos entre el primer y cuarto nivel, incluyendo ajuste 
en fondos, bordes, animación con transiciones, tipografía y sus 
respectivas decoraciones, con un diseño de presentación más 
flexible.
Figura 1.
Fuente: Iconicos (2016)
Imágenes en un documento HTML5
Para insertar una imagen a un documento Html se hace uso de la 
directiva <img>. Esta directiva requiere de un atributo que es “src” 
que indica la dirección de la imagen. 
La sintaxis es:
<img src=”dirección de la imagen”>
Nota: La directiva <img> no necesita etiqueta de cierre. Sin 
embargo puede indicar al navegador que la directiva está cerrada 
añadiendo una barra (/), al final de la directiva, como en esta 
sintaxis: <img src=”direccion de la imagen” />
Para colocar la imagen dentro de su página es necesario guardar 
el archivo dentro de la misma ubicación o carpeta donde quedará 
el documento Html5, para así evitar problemas de visualización.
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje 6
Ejemplo de aplicación de imagen: teniendo la imagen “prueba-
fotolia.jpg” guardada previamente en la carpeta donde se guardara 
el documento html5, aplique el siguiente código. (Debe hacer uso de 
su propia imagen)
Guarda el archivo con el nombre imagen.html5 y visualizarlo en el 
navegador. Observará algo como lo siguiente:
Figura 2.
Fuente: Shutterstock (2017)
Sonido en un documento HTML5
Cuando es necesario compartir un archivo de sonido se debe 
hacer uso de la etiqueta <audio>, la cual provee html5 con un uso 
fácil y ágil en comparación con el uso de código en los principios 
de la programación web. Esta etiqueta funciona con varios 
atributos que permiten ajustar características propias del manejo 
de sonidos, útiles también para los videos en Html5.
La sintaxis es:
<audio src=”mi-archivo-de-audio-.mp3”></audio>
Al observar se ve casi perfecta y sencilla, sin embargo, esta 
presenta un problema con los formatos de archivos de audio 
soportados por los diferentes navegadores, ya que los más 
antiguos no reconocen la extensión del audio. (Problema que está 
siendo superado ya por completo)
Los diferentes atributos que pueden ser usados para esta etiqueta 
son los siguientes:
• Autoplay: 
Permite la reproducción automática del archivo de audio.
La sintaxis es:
<audio autoplay src=”mi-archivo-de-audio-.mp3”></audio>
• Loop: 
Permite reproducir el archivo de audio en bucle (n cantidad de 
repeticiones) lo que permite disminuir el peso elevado de un 
audio muy largo.
La sintaxis es:
<audio src=”mi-archivo-de-audio-.mp3” autoplay loop></audio>
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje 7
• Preload: 
Permite realizar la precarga de archivos de audio, lo que agiliza el 
cargue de la página, por lo general cuando contiene más de dos 
archivos de audio, este se debe complementar con el uso de alguno 
de estos tres valores; media, auto y none, donde este último evita que 
se realice la precarga solo en caso donde el contenido es de máximo 
dos archivos de audio.
La sintaxis es:
<audio src=”mi-archivo-de-audio-.mp3” preload=”none”></audio>
• Controls: 
Permite colocar un panel de control nativo según el navegador para 
controlar la reproducción; para cambiar el aspectopuede construir 
otro haciendo uso de Javascript.
La sintaxis es:
<audio id=”mireproductor” src=”mi-archivo-de-audio-.mp3”></
audio>
<div>
<button onclick=”document.getElementById(`player`).
play()”>Play</button>
<button onclick=”document.getElementById(`player`).
Pause()”>Pausa</button>
<button onclick=”document.getElementById(`player`).
load()”>Stop</button>
<button onclick=”document.getElementById(‘player’).volume += 
.1”>Subir volumen</button>
<button onclick=”document.getElementById(‘player’).volume -= 
.1”>Bajar volumen</button>
</div>
Al agregar el panel de control al ejemplo anterior desarrollador se 
obtiene una visualización como la siguiente imagen:
Figura 3.
Fuente: Shutterstock (2017)
Como se mencionó anteriormente el problema es la extensión 
de los archivos de audio, para lo cual se puede especificar los 
múltiples formatos de archivo de distintas fuentes, además de 
utilizar el atributo src, como se muestra a continuación:
<audio controls>
<source src=”mi-archivo-de-audio.ogg” type=”audio/ogg”>
<source src=”mi-archivo-de-audio.mp3” type=”audio/mpeg”>
<source src=”mi-archivo-de-audio.wav” type=”audio/wav”>
</audio>
Como ayuda para los navegadores anteriores que no soportan la 
etiqueta <audio> se puede usar las siguientes líneas de código.
<audio controls>
<source src=”mi-archivo-de-audio.ogg” type=”audio/ogg”>
<source src=”mi-archivo-de-audio.mp3” type=”audio/mpeg”>
<source src=”mi-archivo-de-audio.wav” type=”audio/wav”>
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje 8
<object type=”application/x-shockwave-flash” data=”player.
swf?miArchivo=mi-archivo-de-audio.mp3”>
<param name=”movie” value=”player.swf?miArchivo=mi-archivo-
de-audio.mp3”>
</object>
</audio>
Para el caso de Flash se puede agregar las siguientes líneas de código.
<audio controls>
<source src=”mi-archivo-de-audio.ogg” type=”audio/ogg”>
<source src=”mi-archivo-de-audio.mp3” type=”audio/mpeg”>
<source src=”mi-archivo-de-audio.wav” type=”audio/wav”>
<object type=”application/x-shockwave-flash” data=”player.
swf?miArchivo=mi-archivo-de-audio.mp3”>
<param name=”movie” value=”player.swf?miArchivo=mi-archivo-
de-audio.mp3”>
<a href=”mi-archivo-de-audio.mp3”>Descárgate aquí mi archivo de 
audio</a>
</object>
</audio>
Con estas observaciones se puede decir que quedan cubiertos todos 
los formatos en los que se pueden tener archivos de audio.
Video en un documento HTML 5
Para presentar un archivo de video dentro de una página Html5 es 
necesario hacer uso de la etiqueta <video> muy similar en estructura 
a la etiqueta <audio>, la cual se puede combinar con otros atributos 
que le permiten establecer diferentes características y puede 
apoyarse también con la aplicación de las hojas de estilos CSS, para 
otros ajustes. 
La sintaxis es:
<video src=”demo.mp4” controls autoplay >HTML5 Video is 
required for this example</video> 
Teniendo en cuenta que los atributos presentes son considerados 
“true” y cuando están ausentes “false” Los diferentes atributos que 
pueden ser usados para esta etiqueta son los siguientes:
• Src: marcador que representa una URL que señala un archivo de 
video.
• Controls: panel para controlar la reproducción (Reproducción, 
pausa, buscar y ajustar volumen).
• Poster: representa imagen de marcador de posición mientras el 
video se carga o cuando este no está disponible.
• Loop: atributo que permite la repetición “n” veces de un 
contenido almacenado en el bufer. 
• Muted: permite reproducir el video con las pista de audio 
desactivada.
• Autoplay: permite la reproducción automática del archivo de 
video.
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje 9
• Preload: Permite definir clave de la cantidad de almacenamiento 
necesario en un bufer.
• Height: Permite determinar el alto en pixeles del reproductor de 
video.
• Width: Permite determinar el ancho en pixeles del reproductor de 
video.
Nota: Es recomendable establecer ambas dimensiones acorde 
al contenido del video, en caso contrario el reproductor ajusta la 
dimensión más cercana para que se vea, pero mantiene su relación 
de aspecto centrando el contenido.
Para que sea posible tener en cuenta diferentes formatos se puede 
agregar las siguientes líneas de código:
<video controls poster=”demo.jpg”>
 <source src=”demo.mp4” type=”video/mp4” />
 <source src=”demo.webm” type=”video/webm”/>
 <source src=”demo.ogv” type=”video/ogg”/> 
 <p>Fallback code if video isn’t supported</p>/
 </video>
Nota: El audio y video se diferencian de canvas en que el código 
entre los elementos solo se ejecuta cuando no se admiten los dos 
elementos. 
Canvas es único en el sentido de que el código entre las etiquetas, 
mientras no se muestra, se ejecuta incluso cuando se admite canvas. 
El DOM de Canvas Shadow permite a los desarrolladores ofrecer 
compatibilidad para accesibilidad en lectores de pantalla y otros 
dispositivos.
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje 10
Glosario
API: (Application Programming Interface), Interfaz de programación de 
aplicaciones.
Canvas: elemento HTML que mediante el uso de código JavaScript 
permite manejo de gráficos, edición de fotos e incluso animaciones.
SVG: trabaja basado en XML que permite insertar directamente en 
HTML imágenes vectoriales.
Web Sockets: tecnología que permite la interactividad entre el 
navegador del usuario y el servidor. 
WebRTC: tecnología que permite la comunicación en tiempo real, 
basados en la conexión directamente por el navegador sin ayuda de 
plugins o aplicaciones externas.
WebVTT: formato de pista de texto.
WHATWG: sesión del lado del cliente y el almacenamiento continuo 
permite a las aplicaciones web almacenar datos estructurados en el 
lado del cliente.
XML: eXtensible Markup Language, Lenguaje de marcado extensible.
Bibliografía
Bibliografía
Bibliografía
Iconicons. (2016). Figura 1. Recuperada de: 
http://icon-icons.com/es/icono/red-social-html5/1468
Shutterstock. (2017). Figura 2,3. Recuperada de:
https://www.shutterstock.com
Alarcon, J. (2014). Los 10 mejores editores gratuitos (o casi) de HTML, CSS y JavaScript. 
Recuperado de: 
https://www.campusmvp.es/recursos/post/Los-10-mejores-editores-gratuitos-de-HTML-CSS-y-
JavaScript.aspx
Herramientas10. (s.f.). 12 mejores editores HTML5 para desarrolladores. Recuperado de: 
http://www.herramientas10.com/12-editores-html5-desarrolladores_526.html
Iglesias, P. (2015). Cómo insertar audio en HTML5. Recuperado de: 
https://www.campusmvp.es/recursos/post/como-insertar-audio-en-html5.aspx
INTEF. (s.f.). HTML5 en la Educacion. Recuperado de:
https://developer.mozilla.org/es/docs/HTML/HTML5
Microsoft. (s.f.). Agregar un control de vídeo HTML5 a la página web. Recuperado de: 
https://msdn.microsoft.com/es-es/library/hh924820(v=vs.85).aspx
Pastorini, A. (s.f.). HTML5 - CSS3. Recuperado de: 
https://www.fing.edu.uy/tecnoinf/mvd/cursos/ria/material/teorico/ria-03-HTML5-CSS3.pdf
showbizreal.com. (s.f.). Html practico - Imagenes en un documento HTML 5. 
Creative
Commons
Creative
Commons
Créditos
PROGRAMA
NOMBRE DEL OBJETO
DISEÑADORES GRÁF ICOS
PROGRAMADORES
GUIONISTAS -PRODUCTOR DE MEDIOS AUDIOV ISUALES
ASESORAS PEDAGÓGICAS
L ÍDER DE L A L ÍNEA DE PRODUCCIÓN
Producción de Mult imedia
HTML5
Caren Xiomara Carvajal Pérez
Jul ián Alberto Camargo Fonseca
Luis Carlos Reyes Parada
Nilda Inés Camargo Suescún
Nancy Astr id Barón López
Milady Tatiana Vi l lamil Castel lanos
John Freddy Vargas Barrera
Dol ly Esperanza Parra Lozano
Jheison Edimer Muñoz Ramírez
Janet Lucía Vi l la lba Triana
Shir ley Andrea Oval le Barreto
Zulma Yurany Vianchá Rodríguez
EXPERTOS TEMÁT ICOS Versión 1 (2017): Sandra Aydeé López Contador
 Humberto Amaya Alvear
LÍNEA DE PRODUCCIÓN
EXPERTOS TEMÁTICOS
Créditos