Moodle – Como adicionar uma imagem responsiva

O que é design responsivo?

Web Design Responsivo é uma abordagem de web design destinada a elaborar sites para fornecer uma ótima experiência de visualização, fácil leitura e navegação com um mínimo de redimensionamento e visionamento, para uma ampla gama de dispositivos (de monitores de computador a telefones celulares)

Um website definido como responsivo adapta sua exibição para o ambiente de visualização usando grades proporcionais e fluídas imagens flexíveis, e media queries CSS3. (fonte: http://pt.wikipedia.org/wiki/Web_Design_Responsivo)

Mediante tais informações devemos nos atentar  com as  imagens postadas em nossos cursos  no moodle para evitarmos que apareça a barra de rolagem (scroll bar) ou que a imagem apareça cortada.

Devemos nos atentar principalmente com as imagens da página inicial do curso que disponibilizamos através dos rótulos (recurso: rótulo ou label do moodle).

O segredo está em editar as configurações da imagem ao postá-la, conforme a imagem abaixo:

1) inserir uma imagem como rótulo

rotulo1

 2) Parâmetros da imagem postada  – ANTES

Clique na aba Aparência e veja as dimensões da imagem

rotulo2

 

Vejam como a imagem ficará na página do curso (com um scroll bar)
scroll e mesmo redimensionando a imagem não irá resolver, pois  quando você acessar de um dispositivo móvel a imagem ou ficará cortada ou terá uma barra de rolagem.

Então vamos a solução:

3) Parâmetros da imagem -DEPOIS

Alterar o parâmetro dimensões para 100%  e desmarcar a opção Manter proporções  –  aqui está  o “pulo do gato”  

rotulo3

Vejam o resultado quando o moodle é acessado através de vários dispositivos

Imagem no desktop

educar_desktop

 

Desktop -Agora com o navegador em uma tela menor, vejam que a imagem foi redimensionada de acordo com o tamanho da tela

desktop_redimensionado

Tablet 10″

tablet

Smartphone


celular

Com essa simples modificação podemos ter  resultados satisfatórios e um site acessível.

O próximo post será : como incorporar um vídeo do youtube responsivo

ps: agradecimentos ao meu Cliente Universidade do Futebol pelas imagens

Share

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Contato
close slider