Practicando elemento Picture, imágenes en formato SVG y vídeos.

En esta primera parte vamos a usar la nueva etiqueta HTML5 para usar imágenes responsive picture. Hay que tener en cuenta que todavía no tiene compatibilidad total con los navegadores, Internex Explorer 11 no la soporta. Más información en Can I Use. Para estos casos podemos usar un Polyfill, hablo de la librería Javascript Picturefill.

Solo hago referencia a estos términos, y lógicamente tampoco implemento nada de Javascript, porque quedan fuera del escenario actual del módulo y del ejericio. Eso sí, para visualiar correctamente el comportamiento usar Chrome o Firefox, y si lo visulizaís desde un SSOO móvil, comprobar en Can I Use el tema de compatibilidades.

Uso una imagen en 3D del logo de HTML5, y segun vamos bajando de resolución para notar el uso de picture, he reducido yo manualmente para tener distintas imágenes de menos tamaño, y la he girado 360º para hacerse notar los cambios. Aún así, el CSS es caprichoso, y algún comportamiento al llegar a menos de 480px no actúa como debería, o como creo que tendría que ser.

Imágenes en formato SVG

A continuación muestro imágenes en formato SVG dentro de una etiqueta <img>. También existes otros tipos de uso más avanzados, pero que quedan fuera de lo que pide el ejericio, y que tampoco hemos tratato. La grandeza de este formato vectorial que es válido para imagénes, tipografías, y que es código, es decir, un archivo SVG lo podemos abrir con un editor de código, y podríamos hacer cambios, fuera de usar programas vectoriales como los citados en el pdf del módulo.

Imágnes cedidas por DragonArt.