Trabalhando com Imagens e Áudio

Imagem Dinâmica / Flexível

Tente abrir esse site em vários dispositivos diferentes ou simplesmente diminua e aumente o tamanho da janela do seu navegador e veja a imagem sendo flexibilizada de acordo com a largura que dispomos na tela.

Inicialmente temos uma foto Grande, diminua a janela e temos uma foto Média, diminua mais ainda e teremos uma foto Pequena. A depender do dispositivo usado veremos somente a foto Pequena. NOTA: coloquei a operação inversa logo abaixo também, ou seja, enquanto uma fica GRANDE outra fica pequena.

Para tal efeito utilizamos a TAG <picture>, que é um container de elementos em HTML5 onde inserimos a inicialmente a TAG img que é o elemento específico inicial e depois especificamos os múltiplos elementos secundários usando a TAG source com

atributo media="(max-width: 0000 px)" para indicar a limitação do próximo source e passamos o
atributo srcset="/.arquivo.tal" para indicar o próximo arquivo a ser carregado e por último passamos o
atributo type para indicar qual tipo de arquivo será carregado.

NOTA: O CCS e o JAVASCRIPT também flexibilizam imagens, com o HTML usamos a TAG picture.


            PARTE DO CÓDIGO FONTE DA FOTO ABAIXO
                    <picture>
            <source media="(max-width: 750px)" srcset="./ex011_imagens/foto_p_300.png" type="image/png">
            <source media="(max-width: 1050px)" srcset="./ex011_imagens/foto_m_700.png" type="image/png">
            <img src="./ex011_imagens/foto_g_1000.png" alt="imagem flexível em escala">
        </picture>

imagem flexível em escala

Reproduzindo Áudios

Vamos aprender a reproduzir áudios em HTML5. Nota: o áudio abaixo é um antigo podcast. Guanacast 33 de uso autorizado por Gustavo Guanabara.

Nota: o áudio abaixo está em modo auto autoplay, veja como olhando dentro do código html (o áudio abaixo foi retirado da biblioteca de áudio do YouTube - Música gratuita - atribuição não necessária - infantil)