Ejercicio P2P Módulo 2 - Opcional

Realiza una página que utilice imágenes responsive con la etiqueta picture, que contenga un vídeo de YouTube y archivos de imagen vectorial SVG.

Mostrándo imagen en diseño web responsive

El cambio principal que ha supuesto el diseño web responsives ha sido, sin lugar a dudas, la sutitución del pixel por unidades relativas. Uno de los elementos más afectados han sido las imágenes. Si trabajaramos con píxeles y tuveramos una imagen de 400px y la pantalla mostrara hasta un máximo de 300 px nos aparecería de scroll y para evitar eso podemos trabajar con imágenes responsives desde CSS. También podemos evitar que imagenes adaptadas a móviles se pixelen al verse en otros dispositivos con pantalla más grande.

A continuación se muestra una imagen en el que se refleja un posible ajuste de imágenes en función del dispotivo con el que se acceda.

Nota: esta imagen ha sido tomada de: https://uxmag.com/articles/responsive-icons-and-logos-for-the-responsive-web

Mostrando imagen responsive

La imagen que se muestra a continuación variará en función del tamaño de pantalla que se tenga el dispositivo con el que está accediendo.

ejemplo de logo

Si tiene posibilidad de comprobar la página con el móvil verá que la imagen cambia

Mostrándo vídeo web responsive

Mostrándo imagen vectorial SVG