<HTML5

EMPEZAR >

<HTML5

Alexander Gómez Olvera>

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

>

>

Sección 02

Quiz

02

Sección 04

05

04

03

Sección 01

01

00

Sección 03

Objetivos

>

>

EMPEZAR >

<01> ¿Qué es?

Secciones como esta te ayudarán a saber más información.

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 SOCIALEs

Necesitamos interactuar unos con otros. Aprendemos de forma colaborativa.

// SERES DIGITALES

Evitamos formar parte de la saturación de contenido en el mundo digital.

// SEReS narrativos

Contamos miles y miles de historias. ⅔ de nuestras conversaciones son historias.

>

>

>

>

<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

70%

SERES NARRATIVOS

// un titular genial

30%

SERES EXPLORADORES

>

>

//escribe un titular genial aquí

+390

interactividad

Puedes plasmar cifras de esta forma

+3790

magia

…Aunque luego lo expliques oralmente

+1640

animación

Así mantendrás la atención de tu audiencia

>

>

40%

seres sociales

Genera experiencias con tu contenido.

8M

seres visuales

Tiene efecto WOW. Muy WOW.

1540

seres narrativos

Mide resultados y experimenta.

2/3

seres digitales

Activa y sorprende a tu audiencia.

>

>

<04> SECCIÓN

Secciones como esta te ayudarán a poner orden

EMPEZAR >

Q4

Q1

Q3

Q2

>

>

La comunicación visual es clave

Un roadmap puede ser muy útil

Trabajando tú, llegarás antes

Pero en equipo…Llegarás más lejos

En buena compañía

Y rompiendo barreras

Establece prioridades

Es la clave del éxito

Un roadmap puede ser muy útil

Establece prioridades

La comunicación visual es clave

Saber dónde vamos

abr

jun

may

mar

feb

ENE

>

>

Un roadmap puede ser muy útil

Saber dónde vamos

Es la clave del éxito

Establece prioridades

Trabajando tú, llegarás antes

Pero en equipo… Llegarás más lejos

Si vas a presentar en directo, te recomendamos que entrenes tu voz y ensayes: ¡la mejor improvisación siempre es la más trabajada!

Demuestra entusiasmo, esboza una sonrisa y mantén el contacto visual con tu audiencia: 'The eyes, chico. They never lie'. Déjalos boquiabiertos.

INTERACTIVIDAD

>

>

ANIMACIÓN

CREATIVIDAD

Puedes hacer un esquema para sintetizar el contenido y utilizar palabras que se graben a fuego en el cerebro de tu audiencia.

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.

>

>

EMPEZAR >

<QUIZ>

Secciones como esta te ayudarán a poner orden

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

>

EMPEZAR >

< Volver

00

>

+ info

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