• Author / Uploaded
• Gabriel De la cruz

Citation preview

---

HTML5

HTML5 Contenidos

Pág.

MAPA CONCEPTUAL

2

INTRODUCCIÓN

3

1. EDITORES DE TEXTO PARA HTML5

4

2. HTML5 2.1 Imágenes en un documento HTML5 2.2 Sonido en un documento HTML5 2.3 Video en un documento HTML5

4 5 6 8

GLOSARIO BIBLIOGRAFÍA CREATIVE COMMONS CRÉDITOS

10 11 12 13

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

1

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.

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

2

Mapa Conceptual

Mapa Conceptual HTML5

Trata

Editores de texto para HTML5

HTML5 Contiene

Imágenes en un documento HTML5

Sonido en un documento HTML5

Video en un documento HTML5

1. Editores de texto para HTML5 2. 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.

Según su función los recursos se clasifican en los siguientes grupos:

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.

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.

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.

- Semántica:

- 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

4

- Multimedia:

Figura 1.

Permite la manipulación de contenidos multimedia mediante el uso de los elementos y , 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 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 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.

Fuente: Iconicos (2016)

Imágenes en un documento HTML5

- Acceso al dispositivo:

Para insertar una imagen a un documento Html se hace uso de la directiva . Esta directiva requiere de un atributo que es “src” que indica la dirección de la imagen.

Permite múltiples reconocimientos de acceso al dispositivo desde el manejo de imagen de la cámara Web, eventos táctiles, geolocalización, orientación del dispositivo y bloqueo del movimiento de la pantalla.

La sintaxis es:

- 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.

FAVA - Formación en Ambientes Virtuales de Aprendizaje

Nota: La directiva 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: 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.

SENA - Servicio Nacional de Aprendizaje

5

Ejemplo de aplicación de imagen: teniendo la imagen “pruebafotolia.jpg” guardada previamente en la carpeta donde se guardara el documento html5, aplique el siguiente código. (Debe hacer uso de su propia imagen)

Sonido en un documento HTML5 Cuando es necesario compartir un archivo de sonido se debe hacer uso de la etiqueta , 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:

Guarda el archivo con el nombre imagen.html5 y visualizarlo en el navegador. Observará algo como lo siguiente: Figura 2.

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:

• 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:

Fuente: Shutterstock (2017)

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

6

• 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.

Figura 3.

La sintaxis es:

• Controls: Permite colocar un panel de control nativo según el navegador para controlar la reproducción; para cambiar el aspecto puede construir otro haciendo uso de Javascript. La sintaxis es:

Play Pausa Stop Subir volumen Bajar volumen

Al agregar el panel de control al ejemplo anterior desarrollador se obtiene una visualización como la siguiente imagen:

FAVA - Formación en Ambientes Virtuales de Aprendizaje

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:



Como ayuda para los navegadores anteriores que no soportan la etiqueta se puede usar las siguientes líneas de código.



SENA - Servicio Nacional de Aprendizaje

7





La sintaxis es: HTML5 Video is required for this example

Para el caso de Flash se puede agregar las siguientes líneas de código.



Descárgate aquí mi archivo de 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 muy similar en estructura a la etiqueta , 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.

FAVA - Formación en Ambientes Virtuales de Aprendizaje

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 buffer. • Muted: Permite reproducir el video con las pista de audio desactivada. • Autoplay: permite la reproducción automática del archivo de video.

SENA - Servicio Nacional de Aprendizaje

8

• Preload: Permite definir clave de la cantidad de almacenamiento necesario en un buffer. • 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:

Fallback code if video isn’t supported

/

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

9

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.

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje

10

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-yJavaScript.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. Recuperado de: https://openclassrooms.com/courses/aprende-a-crear-tu-propio-sitio-web-con-html5-y-css3/ imagenes

Creative Commons

Creative Commons

Créditos

LÍNEA DE PRODUCCIÓN

Créditos

PROGRAMA NOMBRE DEL OBJETO DISEÑADORES GRÁFICOS PROGRAMADORES

GUIONISTAS-PRODUCTOR DE MEDIOS AUDIOVISUALES ASESORAS PEDAGÓGICAS LÍDER DE L A LÍNEA DE PRODUCCIÓN

Producción de Multimedia HTML5 Caren Xiomara Carvajal Pérez Julián Alberto Camargo Fonseca Luis Carlos Reyes Parada Nilda Inés Camargo Suescún Nancy Astrid Barón López Milady Tatiana Villamil Castellanos John Freddy Vargas Barrera Dolly Esperanza Parra Lozano Jheison Edimer Muñoz Ramírez Janet Lucía Villalba Triana Shirley Andrea Ovalle Barreto Zulma Yurany Vianchá Rodríguez

EXPERTOS TEMÁTICOS EXPERTOS TEMÁTICOS

Versión 1 (2017): Sandra Aydeé López Contador Humberto Amaya Alvear