<HTML5
Alexander Gómez Olvera>
EMPEZAR >
>
>
<Objetivos>
Contextualiza tu tema con un subtítulo
La interactividad y la animación pueden ser tus mejores aliadas para hacer que el contenido sea divertido.
Por ello, en Genially utilizamos AI (Awesome Interactivity) en nuestros diseños, para que subas de nivel con interactividad y conviertas tu contenido en algo que aporta valor y engancha.
¿Necesitas más motivos para crear contenidos dinámicos para contar historias?
>
>
00
01
02
Objetivos
Sección 01
Sección 02
03
04
05
Sección 03
Sección 04
Quiz
<01> ¿Qué es?
Secciones como esta te ayudarán a saber más información.
EMPEZAR >
>
>
HTML5 es la quinta y más reciente versión de HTML (HyperText Markup Language). Fue desarrollado para mejorar la creación de páginas web con tecnologías modernas. HTML5 no solo añade nuevas etiquetas, sino que también incluye nuevas características para facilitar la creación de aplicaciones web interactivas, optimizadas para dispositivos móviles y con soporte para multimedia.
- Alex
>
>
// EVOLUCIÓN HTML
HTML4: Era la versión anterior a HTML5, usada durante más de una década. Aunque estableció las bases de la web moderna, no contaba con soporte adecuado para multimedia ni para dispositivos móviles. HTML5: Introdujo una serie de mejoras clave, especialmente en cuanto a multimedia, compatibilidad con dispositivos móviles y mejores herramientas para los desarrolladores.
>
>
// CARACTERÍSTICAS HTML
Etiquetas Semánticas: Estas etiquetas mejoran la accesibilidad y la estructura del contenido.
+info
>
>
// SOPORTE MULTIMEDIA
<audio>: Permite la integración de archivos de audio (mp3, ogg, wav). <audio controls>
<source src="audio.mp3" type="audio/mp3">
Tu navegador no soporta el elemento de audio.
</audio>
+info
<02> SECCIÓN
AÚN HAY MÁS...
EMPEZAR >
>
>
// CANVAS Y TÁCTICOS
La etiqueta <canvas> permite dibujar gráficos, animaciones y renderizar imágenes en tiempo real mediante JavaScript.
// MEJORAS EN FORMULARIOS
Nuevos tipos de entrada como <input type="email">, <input type="date">, <input type="number">, <input type="range">, mejorando la validación y usabilidad.
>
>
// Utiliza imágenes en tu presentación
>
>
// SEReS narrativos
// SERES DIGITALES
// Seres SOCIALEs
Contamos miles y miles de historias. ⅔ de nuestras conversaciones son historias.
Evitamos formar parte de la saturación de contenido en el mundo digital.
Necesitamos interactuar unos con otros. Aprendemos de forma colaborativa.
>
>
<03> SECCIÓN
Secciones como esta te ayudarán a poner orden
EMPEZAR >
>
>
// Utiliza tablas e infografías
La comunicación visual es una herramienta clave. Nos resulta más sencillo 'leer' imágenes, que leer un texto escrito. Por ello, disciplinas como el Visual Thinking facilitan la toma de notas visualmente ricas gracias al uso de imágenes, gráficas, infografías y dibujos sencillos.
>
>
// un titular genial
// un titular genial
30%
70%
SERES EXPLORADORES
SERES NARRATIVOS
>
>
//escribe un titular genial aquí
+1640
+390
+3790
animación
magia
interactividad
Así mantendrás la atención de tu audiencia
…Aunque luego lo expliques oralmente
Puedes plasmar cifras de esta forma
>
>
1540
40%
seres narrativos
seres sociales
Mide resultados y experimenta.
Genera experiencias con tu contenido.
2/3
8M
seres digitales
seres visuales
Activa y sorprende a tu audiencia.
Tiene efecto WOW. Muy WOW.
<04> SECCIÓN
Secciones como esta te ayudarán a poner orden
EMPEZAR >
>
>
Q2
Q3
Q4
Q1
Trabajando tú, llegarás antes
La comunicación visual es clave
Un roadmap puede ser muy útil
Pero en equipo…Llegarás más lejos
Establece prioridades
Y rompiendo barreras
En buena compañía
Es la clave del éxito
La comunicación visual es clave
Establece prioridades
Un roadmap puede ser muy útil
Saber dónde vamos
>
>
jun
may
feb
mar
abr
ENE
Un roadmap puede ser muy útil
Establece prioridades
Saber dónde vamos
Trabajando tú, llegarás antes
Es la clave del éxito
Pero en equipo… Llegarás más lejos
>
>
ANIMACIÓN
CREATIVIDAD
INTERACTIVIDAD
Puedes hacer un esquema para sintetizar el contenido y utilizar palabras que se graben a fuego en el cerebro de tu audiencia.
Demuestra entusiasmo, esboza una sonrisa y mantén el contacto visual con tu audiencia: 'The eyes, chico. They never lie'. Déjalos boquiabiertos.
Si vas a presentar en directo, te recomendamos que entrenes tu voz y ensayes: ¡la mejor improvisación siempre es la más trabajada!
>
>
SERES SOCIALES
Necesitamos interactuar unos con otros. Aprendemos de forma colaborativa.
SERES DIGITALES
Convertimos a la comunicación visual en una experiencia cuando añadimos interactividad.
<QUIZ>
Secciones como esta te ayudarán a poner orden
EMPEZAR >
PREGUNTA 1 de 5
PREGUNTA 2 de 5
PREGUNTA 3 de 5
PREGUNTA 4 de 5
PREGUNTA 5 de 5
¡BIEN HECHO!
>
>
<Bibliografía>
Usa este espacio genial para escribir tus fuentes de información. Citar de dónde has sacado la info siempre es un plus.
Las Normas APA (Manual de publicaciones de la Asociación Americana de Psicología) son indispensables a la hora de citar bibliografía.
Se trata de una serie de directrices para citar cualquier tipo de proyecto: tesis, informes, presentaciones… ¡Lo que sea!Estas referencias incluyen información sobre el autor, la fecha de publicación, el título y la fuente.
Te dejamos por aquí una pequeña guía: tipografía Arial o Times News Roman, 12 pt, interlineado 2.0, alineado a la izquierda y sin justificar. También es importante enumerar todas las fuentes que has citado a lo largo del artículo.
Para ello, crea una página de referencias después del cuerpo principal.En la página de referencias debes escribir el título de la sección, en negrita y centrado. En la segunda línea se enumeran las referencias, en orden alfabético.
Módulo finalizado
//Recursos
>
>
+ info
< Volver
EMPEZAR >
00
// CARACTERÍSTICAS
<header>: Representa un encabezado de sección o documento. <footer>: Representa el pie de página de una sección o documento. <article>: Representa contenido autónomo y reutilizable, como un artículo de blog. <section>: Define una sección del contenido, como un capítulo o grupo temático. <nav>: Define un bloque de navegación.
// escribe un titular genial
Usa este espacio para describir brevemente tu gráfico y su evolución.
+ INFO
// MULTIMEDIA
Soporta etiquetas nativas para video y audio: <video> y <audio>, eliminando la necesidad de plugins externos como Flash.
// escribe un titular genial
Usa este espacio para describir brevemente tu gráfico y su evolución.
+ INFO
// escribe un titular genial
Usa este espacio para describir brevemente tu gráfico y su evolución.
+ INFO
<HTML5
Alex Olvera
Created on March 24, 2025
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Essential Learning Unit
View
Akihabara Learning Unit
View
Genial learning unit
View
History Learning Unit
View
Primary Unit Plan
View
Vibrant Learning Unit
View
Art learning unit
Explore all templates
Transcript
<HTML5
Alexander Gómez Olvera>
EMPEZAR >
>
>
<Objetivos>
Contextualiza tu tema con un subtítulo
La interactividad y la animación pueden ser tus mejores aliadas para hacer que el contenido sea divertido.
Por ello, en Genially utilizamos AI (Awesome Interactivity) en nuestros diseños, para que subas de nivel con interactividad y conviertas tu contenido en algo que aporta valor y engancha.
¿Necesitas más motivos para crear contenidos dinámicos para contar historias?
>
>
00
01
02
Objetivos
Sección 01
Sección 02
03
04
05
Sección 03
Sección 04
Quiz
<01> ¿Qué es?
Secciones como esta te ayudarán a saber más información.
EMPEZAR >
>
>
HTML5 es la quinta y más reciente versión de HTML (HyperText Markup Language). Fue desarrollado para mejorar la creación de páginas web con tecnologías modernas. HTML5 no solo añade nuevas etiquetas, sino que también incluye nuevas características para facilitar la creación de aplicaciones web interactivas, optimizadas para dispositivos móviles y con soporte para multimedia.
- Alex
>
>
// EVOLUCIÓN HTML
HTML4: Era la versión anterior a HTML5, usada durante más de una década. Aunque estableció las bases de la web moderna, no contaba con soporte adecuado para multimedia ni para dispositivos móviles. HTML5: Introdujo una serie de mejoras clave, especialmente en cuanto a multimedia, compatibilidad con dispositivos móviles y mejores herramientas para los desarrolladores.
>
>
// CARACTERÍSTICAS HTML
Etiquetas Semánticas: Estas etiquetas mejoran la accesibilidad y la estructura del contenido.
+info
>
>
// SOPORTE MULTIMEDIA
<audio>: Permite la integración de archivos de audio (mp3, ogg, wav). <audio controls> <source src="audio.mp3" type="audio/mp3"> Tu navegador no soporta el elemento de audio. </audio>
+info
<02> SECCIÓN
AÚN HAY MÁS...
EMPEZAR >
>
>
// CANVAS Y TÁCTICOS
La etiqueta <canvas> permite dibujar gráficos, animaciones y renderizar imágenes en tiempo real mediante JavaScript.
// MEJORAS EN FORMULARIOS
Nuevos tipos de entrada como <input type="email">, <input type="date">, <input type="number">, <input type="range">, mejorando la validación y usabilidad.
>
>
// Utiliza imágenes en tu presentación
>
>
// SEReS narrativos
// SERES DIGITALES
// Seres SOCIALEs
Contamos miles y miles de historias. ⅔ de nuestras conversaciones son historias.
Evitamos formar parte de la saturación de contenido en el mundo digital.
Necesitamos interactuar unos con otros. Aprendemos de forma colaborativa.
>
>
<03> SECCIÓN
Secciones como esta te ayudarán a poner orden
EMPEZAR >
>
>
// Utiliza tablas e infografías
La comunicación visual es una herramienta clave. Nos resulta más sencillo 'leer' imágenes, que leer un texto escrito. Por ello, disciplinas como el Visual Thinking facilitan la toma de notas visualmente ricas gracias al uso de imágenes, gráficas, infografías y dibujos sencillos.
>
>
// un titular genial
// un titular genial
30%
70%
SERES EXPLORADORES
SERES NARRATIVOS
>
>
//escribe un titular genial aquí
+1640
+390
+3790
animación
magia
interactividad
Así mantendrás la atención de tu audiencia
…Aunque luego lo expliques oralmente
Puedes plasmar cifras de esta forma
>
>
1540
40%
seres narrativos
seres sociales
Mide resultados y experimenta.
Genera experiencias con tu contenido.
2/3
8M
seres digitales
seres visuales
Activa y sorprende a tu audiencia.
Tiene efecto WOW. Muy WOW.
<04> SECCIÓN
Secciones como esta te ayudarán a poner orden
EMPEZAR >
>
>
Q2
Q3
Q4
Q1
Trabajando tú, llegarás antes
La comunicación visual es clave
Un roadmap puede ser muy útil
Pero en equipo…Llegarás más lejos
Establece prioridades
Y rompiendo barreras
En buena compañía
Es la clave del éxito
La comunicación visual es clave
Establece prioridades
Un roadmap puede ser muy útil
Saber dónde vamos
>
>
jun
may
feb
mar
abr
ENE
Un roadmap puede ser muy útil
Establece prioridades
Saber dónde vamos
Trabajando tú, llegarás antes
Es la clave del éxito
Pero en equipo… Llegarás más lejos
>
>
ANIMACIÓN
CREATIVIDAD
INTERACTIVIDAD
Puedes hacer un esquema para sintetizar el contenido y utilizar palabras que se graben a fuego en el cerebro de tu audiencia.
Demuestra entusiasmo, esboza una sonrisa y mantén el contacto visual con tu audiencia: 'The eyes, chico. They never lie'. Déjalos boquiabiertos.
Si vas a presentar en directo, te recomendamos que entrenes tu voz y ensayes: ¡la mejor improvisación siempre es la más trabajada!
>
>
SERES SOCIALES
Necesitamos interactuar unos con otros. Aprendemos de forma colaborativa.
SERES DIGITALES
Convertimos a la comunicación visual en una experiencia cuando añadimos interactividad.
<QUIZ>
Secciones como esta te ayudarán a poner orden
EMPEZAR >
PREGUNTA 1 de 5
PREGUNTA 2 de 5
PREGUNTA 3 de 5
PREGUNTA 4 de 5
PREGUNTA 5 de 5
¡BIEN HECHO!
>
>
<Bibliografía>
Usa este espacio genial para escribir tus fuentes de información. Citar de dónde has sacado la info siempre es un plus.
Las Normas APA (Manual de publicaciones de la Asociación Americana de Psicología) son indispensables a la hora de citar bibliografía.
Se trata de una serie de directrices para citar cualquier tipo de proyecto: tesis, informes, presentaciones… ¡Lo que sea!Estas referencias incluyen información sobre el autor, la fecha de publicación, el título y la fuente.
Te dejamos por aquí una pequeña guía: tipografía Arial o Times News Roman, 12 pt, interlineado 2.0, alineado a la izquierda y sin justificar. También es importante enumerar todas las fuentes que has citado a lo largo del artículo.
Para ello, crea una página de referencias después del cuerpo principal.En la página de referencias debes escribir el título de la sección, en negrita y centrado. En la segunda línea se enumeran las referencias, en orden alfabético.
Módulo finalizado
//Recursos
>
>
+ info
< Volver
EMPEZAR >
00
// CARACTERÍSTICAS
<header>: Representa un encabezado de sección o documento. <footer>: Representa el pie de página de una sección o documento. <article>: Representa contenido autónomo y reutilizable, como un artículo de blog. <section>: Define una sección del contenido, como un capítulo o grupo temático. <nav>: Define un bloque de navegación.
// escribe un titular genial
Usa este espacio para describir brevemente tu gráfico y su evolución.
+ INFO
// MULTIMEDIA
Soporta etiquetas nativas para video y audio: <video> y <audio>, eliminando la necesidad de plugins externos como Flash.
// escribe un titular genial
Usa este espacio para describir brevemente tu gráfico y su evolución.
+ INFO
// escribe un titular genial
Usa este espacio para describir brevemente tu gráfico y su evolución.
+ INFO