dweb2025: Clase 9

Devoluciones de TP 1 entregado.

(Clic aquí)

____________________________________

Trabajo Práctico Final (Obligatorio para Aprobar)

(Clic para accedrer al cuestionario)

____________________________________

_______________________________________

Generando material multimedia para nuestro sitio web.
En html tenemos etiquetas para la inserción de audio y video, pero podemos evaluar la posibilidad de llevar nuestro material a youtube y tomarlo para nuestro sitio web de ese servidor, sin afectar el rendimiento del servidor que aloja nuestro sitio web. Especilamente los videos son archivos muy pesados que consumen ancho de banda y almacenamiento en nuestro servidor, pero youtube brinda ese servicio de manera gratuita.

¿Cómo vinculamos un video de youtube para nuestro sitio?
Existe una etiqueta llamada <iframe> (inline frame) que permite incorporar otro html dentro del nuestro. Ese código del iframe lo genera youtube mismo, por lo que, nosotros solo debemos copiarlo en youtube y pegarlo en nuestro html.

Ejemplo:

* El <iframe> no es solo para YouTube. Es una etiqueta general de HTML que sirve para incrustar cualquier página web o contenido externo dentro de otra página web.

Ejemplo:
<iframe src="https://www.wikipedia.org" width="600" height="400"></iframe>

Sobre ancho y alto:

Deberan ser proporcionales, podremos modificarlo en el codigo funete con la siguiente fórmula:

Por ejemplo si reducimos el ancho a 400, el alto deberá ser de 225, ¿cómo llegamos a este dato? sencillo, con la siguiente fórmula. nuevo_alto = (alto_original / ancho_original) × nuevo_ancho

______________________

¿Cómo generar un video sin usar un editor de video?
Power Point puede ser la solución a esta pregunta para por ejemplo simplemente mostar fotos.

- Descargar y descomprimir el material.

- Cargar fotos en cada página de la presentación.

- Agregar transiciones. (opcional)

- Ensayar intervalos.

- Genera video.

- Publicarlo en un canal de youtube.

- Obtener el iframe y llevarlo a nuestro html.

Procedimientos en Power Point

Relación de aspecto:

- Diseño, Tamaño de la diapositiva, Estándar 4:3 o Panorámica 16:9.

Carga de imágenes:

- Insertar, Imágenes, Este dispositivo.

Aplicar animaciones:

Animaciones, seleccionar efectos (de entrada, enfasis o salida) de la sección Animación.

Insertar nuevo slide (página):

Inicio, Nueva diapositiva, Elegir plantilla en blanco.

Ver presentación en pantalla completa:

- Tecla F5, más clic o flechas de dirección.

- Para salir de pantalla completa, tecla ESC (escape)

Aplicar transiciones entre slides:

Primero marcar el slide (página).

Clic en Transiciones, aplicar cualquiera que te guste en la sección "transición de diapositiva".

Ensayar tiempos: (Paso necesario antes de crear el video)

- Presentación con diapositiva, ensayar intervalos.

Generar archivo final de video:

- Archivo, Exportar, Crear video, HD o mejor calidad Full HD.

Adicionales:

Si quisiera cargar una audio en la presentación y que se reproduzca al pasar cada slide.

- Insertar, Audio en PC.

- Reproducción, Tildar en "Reproducir en todas las diapositivas".

Animación de logos:

Si el logo es sencillo, podremos reconstruirlo con las formas de Power Point, separando las partes que lo componen, y así lograr aplicar un efecto de animación de entrada a cada una.

Ejemplo:

(Bajar archivo de ejemplo, clic aquí)

Algunos procedimientos:

Inserción de formas:

- Insertar, Formas, trazar en el área del slide.

Rellenar forma (color):

- Clic en la forma, clic en Formato, Relleno de Forma

Agregar animación de entrada:

- Clic en Animaciones, Agregar animación, Efectos de Entrada.

Cambiar tiempos y retrasos:

- Clic en animaciones, en la sección intervalos:

Inicio: Indica si inicia al hacer un clic, o con el anterior efecto.

Duración: tiempo que durará el efecto.

Retraso: por ejemplo si algo inicia con el efecto anterior pero no queremos que sea exactamente al mismo tiempo, aplicamos un pequeño retraso.

- Clic en animaciones, clic en Panel de animaciones para ver los tiempos de cada efecto para cada elementos.

______________________

Video Público, Privado u Oculto:

1. Público

Significado: Cualquier persona puede ver tu video. Aparece en búsquedas, recomendaciones, y en tu canal.

Ideal para: Contenido que quieres compartir con todo el mundo, como tutoriales, vlogs, música, etc.

2. Oculto (No Listado)

Significado: Solo las personas que tienen el enlace pueden verlo. No aparece en tu canal, búsquedas ni recomendaciones.

Ideal para: Compartir videos con grupos específicos sin hacerlo completamente privado, como presentaciones, clases o videos familiares.

3. Privado

Significado: Solo tú (y las personas específicas que invites con su correo de Google) pueden ver el video.

Ideal para: Videos personales o en desarrollo, o contenido confidencial.

__________________________________
😀 En nuestro caso, la mejor opción es Oculto, para que solo se muestre en nuestro sitio web. (considerando que puede ser un video que necesita ir acompañado de un texto u otros elementos).
__________________________________________

¿Qué más se puede insertar con etiqueta iframe?

Se puede crear una presentación en Genially con Interactividad y Navegación

___________________________________

Sitio:

https://genially.com/es/

Ejemplo 1:

IFRAME: es el código fuente de inserción que genera el propio sitio de genially.

Ejemplo 2:

Al compartir desde la presentación misma, aparece el código fuente en dos formatos como iframe o como script de javascript, así en nuestro caso será más acorde a los contenidos del curso elegir iframe.

¿Cómo lo llevamos a nuestro html?

Pulsamos en copiar, vamos a nuestro html, buscamos el body y lo pegamos dentro de esa etiqueta.

¿Qué se puede hacer en Genially?

La presentación abre un montón de posibilides para crear contenido, destaco Interactividad con los elementos, navegación entre slides y la aplicación de efectos.

Interactividad:

- Ventanas Emergentes: con descripción de información. Ejemplo sobre la bandera de Argentina.

- Etiquetas: Pequeño texto. Ejemplo sobre un punto situado sobre cada provincia.