Traducción en curso

Hemos visto mucho sobre texto en este curso, pero la web sería realmente aburrida solo con eso. Empezemos a aprender como hacer que la web se sienta viva, con mucho más contenido interesante! Este módulo enseña como incluir multimedia a tus paginas web, incluyendo como añadir imágenes de diferentes maneras, y como insertar un video, audio, e incluso otras páginas enteras.

Prerrequisitos

Antes de empezar, deberías tener un buen conocimiento de las bases de HTML, enseñadas en Introduction to HTML. Si no has estado trabajando en este módulo (o alguno similar), hazlo y luego vuelve!

Nota: Si estas trabajando en un ordenador/tablet/u otro aparato donde no puedas crear tus propios archivos, puedes probar (la mayoría) los ejemplos de codigo en programas online de codificado como JSBin o Thimble.

Guías

Este módulo tiene los siguientes temas, los cuales te enseñaran todo lo fundamental sobre introducir multmedia en paginas web.

Imágenes en HTML
Hay otros tipos de multimedia a considerar, pero es logico empezar con el humilde elemento <img>, usado para incrustrar una imagen simple en una página web.En este articulo veremos como usar en mas profundidad, incluidos los conceptos basicos, anotandolo  con subtitulos usando <figure>, y como se relaciona con las imagenes de fondo de CSS.
Contenido de Audio y Video
A continuación, veremos como usar los elementos de HTML5 <video> y <audio>, para incrustar video y audio en nuestras paginas; incluyendo conceptos basicos, proporcionando acceso a diferentes formatos de archivo para diferentes navegadores, agregando subtítulos , y cómo agregar inconvenientes para navegadores más antiguos.
De <object> a <iframe> - otras tecnologías de inserción
En este punto, nos gustaría dar un paso hacia un lado, mirando algunos elementos que le permiten insertar una amplia variedad de tipos de contenido en sus páginas web:los elementos <iframe>, <embed> y <object>. <iframe> son para incrustar otras páginas web, y las otras dos permiten incrustar archivos PDF, SVG e incluso Flash, una tecnología que está a punto de desaparecer, pero que todavía puede ver de manera semi-regular
Añadiendo graficos vectoriales a la Web
Los gráficos vectoriales pueden ser muy útiles en ciertas situaciones. A diferencia de los formatos normales como PNG / JPG, no se distorsionan / pixelizan cuando se amplía - pueden permanecer suaves cuando se escalan. Este artículo presenta lo que son los gráficos vectoriales y cómo incluir el popular formato SVG en las páginas web.
Imagenes receptivas
Con tantos tipos diferentes de dispositivos que ahora pueden navegar por la Web, desde teléfonos celulares hasta computadoras de escritorio, un concepto esencial para dominar en el mundo web moderno es el diseño receptivo. Esto se refiere a la creación de páginas web que pueden cambiar automáticamente sus características para adaptarse a diferentes tamaños de pantalla, resoluciones, etc. Esto se verá con mucho más detalle en un módulo CSS más adelante, pero por ahora veremos las herramientas de HTML que tiene disponible para crear imágenes receptivas, incluido el elemento <picture>.

Evaluaciones

Las siguientes evaluaciones pondrán a prueba su comprensión de los conceptos básicos de HTML cubiertos en las guías anteriores.

Página de bienvenida de Mozilla
En esta evaluación, probaremos su conocimiento de algunas de las técnicas discutidas en los artículos de este módulo, lo que le permitirá agregar algunas imágenes y videos a una página original de Mozilla

Ver también

Agregar un mapa de visitas en la parte superior de una imagen
Los mapas de imágenes proporcionan un mecanismo para hacer diferentes partes de un enlace de imagen a diferentes lugares (piense en un mapa, vinculándolo a más información sobre cada país diferente al que haga clic). Esta técnica a veces puede ser útil.
Conceptos básicos de alfabetización web 2

Un excelente curso básico de Mozilla que explora y prueba algunas de las habilidades mencionadas en el módulo Multimedia e inclusión. Sumérgete en los aspectos básicos de la composición de páginas web, diseño de accesibilidad, uso compartido de recursos, uso de medios en línea y trabajo abierto.

Etiquetas y colaboradores del documento

Colaboradores en esta página: jonasmreza, vHarz, hell0h0la, J0rgeMG, yarochewsky
Última actualización por: jonasmreza,