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

Moodle – como autenticar usuários via Facebook e Google

Existem vários métodos de autenticação de usuários para o moodle, dentre eles os principais são: autenticação manual, via LDAP, base de dados externa etc.. Esses métodos de autenticação são configurados via interface da administração do site:

  • Minha página inicial / Administração do site / Plugins / Autenticação / Gerenciar autenticação

  Se o seu moodle irá ofertar cursos Livres onde não há a necessidade de controle de cadastros e que geralmente as inscrições nos cursos são realizadas pelos próprios usuários, uma boa opção é instalar um novo plugin de autenticação que permita o usuário autenticar-se  com a conta do Facebook ou do Google. Esse método de autenticação permite ao usuário um acesso rápido sem a necessidade de confirmação de email enviado pelo moodle , sem a necessidade de mais uma conta e mais uma senha para ser memorizada.

Procedimentos:

1) Fazer o download do plugin auth_googleoauth2 disponível em : https://moodle.org/plugins/view.php?plugin=auth_googleoauth2

2) Descompactar o arquivo e fazer o upload no servidor do moodle ( via ftp ou sftp) na pasta ../moodle/auth ou instalá-lo via interface de administração do site em:

Clique em: ContinuarAtualizando para nova versão Moodle 2.7 Build 20140512

3) Configurar o Plugin auth_googleoauth2 

Acesse no administração do site em:

e abra o “olhinho”  do Oauth2 conforme figura abaixo Moodle27 Administração Plugins Autenticação Gerenciar autenticação Editar configurações do plugin Clique em Configurações do lado direito do “olhinho” ou acesse :

Moodle27 Administração Plugins Autenticação Oauth2

4- Configurar a API do Google

  • Acessar Google console API
  • Logar com sua conta do google e acessar : Credenciais conforme figura abaixo

Google Developers Console

  • Preencher o formulário conforme modelo da Figura abaixo:
  • Em: Tipo de aplicativo: marque Aplicativo WEB
  • em Origens Javascript autorizadas, digite o nome do seu domímio ( ex: http://giselebrugger.com)… aqui ainda não coloque o endereço do moodle (http://giselebrugger.com/moodle) . Observe se está http e não https ( a não ser que o seu moodle esteja trabalhando com conexão segura )
  • Em URI DE REDIRECIONAMENTO AUTORIZADO coloque o endereço completo do seu moodle + admin/oauth2callback.php
  • ex: o meu moodle está no seguinte endereço: http://giselebrugger.com/moodle então irei preencher: http://giselebrugger.com/admin/oauth2callback.php
  • e por fim clique em : Criar ID do cliente

Google Developers Console3

  • agora basta copiar os dois campos que precisamos e colar na página de configuração do plugin Oauth2

Google Developers Console5

5- Configurar a API do FACEBOOK

  • acessar https://developers.facebook.com/apps/
  • Logar com sua conta do facebook
  • Clicar em: Create New AppAll Apps

Google Developers Console6 Digitar os caracteres apresentados e clicar no botão enviar   Google Developers Console7   Clicar no menu da esquerda na opção : settings

1) Digite o nome do seu domíniuo no campo App Domains: ex: giselebruggre.com    (sem o http://)

2) Digite o seu email em : Contact email : ex contato@giselebrugger.com 3) Clique no botão: ADD Plataform 

Google Developers Console8     4) selecione a opção : WEBSITE

  1. Google Developers Console9
  • No campo: SITE URL digite o endereço do seu moodle . Ex: http://giselebrugger.com/moodle
  • Clique no botão : SAVE CHANGES

Google Developers Console10

  • Copie o valor do campo Número de identificação do Aplicativo e cole no campo: Facebook App ID
  • Copie o valor do campo App Secret e cole no campo: Facebook App secret

Google Developers Console11   Cole as informações na página de configuração do Plugin nops campos apropriados conforme figura abaixo Google Developers Console12

 

Vamos agora habilitar o APP do Facebook clicando em Status & Review no menu da esquerda e  clicando em YES conforme imagem abaixo:

 

face

 

Após salvar as informações vamos agora configurar a tela de login para que apareça os botões de login do Google e do Facebook

Configurar tela de login

Editar a pagina ../moodle/login/index_form.html e acrescentar o código abaixo

<?php require_once($CFG->dirroot . ‘/auth/googleoauth2/lib.php’);

auth_googleoauth2_display_buttons(); ?>

Eu adicionei o código acima antes do form e ficou assim:

<?php require_once($CFG->dirroot . ‘/auth/googleoauth2/lib.php’);

auth_googleoauth2_display_buttons(); ?>

<form action=”<?php echo $CFG->httpswwwroot; ?>/login/index.php” method=”post” id=”login” <?php echo $autocomplete; ?> > <div class=”loginform”>

<div class=”form-label”><label for=”username”><?php echo($strusername) ?></label></div>

<div class=”form-input”> <input type=”text” name=”username” id=”username” size=”15″ value=”<?php p($frm->username) ?>” /> </div>

<div class=”clearer”>

<!– –></div>

<div class=”form-label”><label for=”password”><?php print_string(“password”) ?></label></div> <div class=”form-input”> <input type=”password” name=”password” id=”password” size=”15″ value=”” <?php echo $autocomplete; ?> /> </div> </div>

 

Salve o arquivo e verifique o resultado tela_login

Configurar Bloco Acesso ( bloco de login)

O bloco esta disponível dentro da pasta : ../moodle/blocks/login/block_login.php Neste bloco você terá que colocar os links em : $this->content->text Copie os links gerados nas images do Google e do Facebook da tela de login e substitua no exemplo abaixo após a linha 79 acrescentar o código abaixo: $this->content->text .= ‘<div class=”c1 fld username”>Logar via Rede Social<br></label>’; $this->content->text.=’<a href=”https://www.facebook.com/dialog/oauth?client_id=xxxxxxxxxxxxxxx&redirect_uri=http://seu_endereço_do_moodle/auth/googleoauth2/facebook_redirect.php&scope=email&response_type=code” target=”_blank”><img src=”http://endereco_com_imagem_do_facebook.jpg” /></a><a href=”https://accounts.google.com/o/oauth2/auth?client_id=yyyyyyyyyyy-xxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com&redirect_uri=http://endereco_do_seu_moodle/auth/googleoauth2/google_redirect.php&scope=https://www.googleapis.com/auth/userinfo.profile%20https://www.googleapis.com/auth/userinfo.email&response_type=code” target=”_blank”><img src=”http://endereco_de_imagem_do_google.jpg” /></a>‘;

Veja agora o resultado do bloco de acesso

bloco_facebook

Prontinho. Seu moodle já está habilitado para logar com contas do google e facebook.

Quer testar?  http://giselebrugger.com/moodle/

Deixe no formulário abaixo suas dúvidas e sugestões

Moodle- Usos criativos de fóruns

Usos criativos de fóruns

Há uma grande variedade de usos criativos de fóruns. Apresenta-se, a seguir, algumas ideias. Os fóruns em Moodle têm uma flexibidade muito grande. Isto permite que a criatividade do professor possa ser exercitada praticamente sem limites.

Fóruns P/R e a solução de problemas

John Rodgers, de Ontário, Canadá, usa um fórum do tipo P/R no ensino de matemática. Fóruns P/R permitem que o professor coloque, como tópicos do fórum, uma ou
mais questões que devem ser respondidas pelos alunos antes que vejam as respostas dos colegas. Uma aula começa com o instrutor solicitando aos alunos que resolvam um problema de matemática, identifiquem e corrijam conceitos errados, expliquem o significado de símbolos matemáticos em um determinado contexto ou algum outro tipo de exercício. Os alunos usam
de 20 a 40 minutos, em grupos para elaborar uma resposta. Depois que todos os alunos enviam sua solução para o problema apresentado, eles podem ver as respostas dos colegas. Em etapa posterior, cada um é convidado a responder a um questionário (usando o módulo Questionário) para mostrar que os conceitos envolvidos na solução do problema apresentado foram consolidados e aperfeiçoados observando as respostas apresentadas pelos colegas. Este exemplo mostra bem as possibilidades da inclusão de tecnologias no processo ensino /aprendizagem bem como a mudança do papel do professor de distribuidor de informações para orientador da aprendizagem de cada um e de todo um grupo de alunos.

Entrevistas

Convidar especialistas para conversar com os alunos de uma disciplina tem sido considerado um procedimento estimulante e muito útil. No entanto, agendar essas conversar sempre foi um problema. Os horários do convidado devem, em geral, ter prioridade. Isso conduz a uma situação em que os alunos teriam que usar horários diferentes do horário normal das aulas para que o encontro possa ser realizado. Esses problemas podem ser eliminados se um fórum for criado, com duração determinada, para que os alunos e o especialista troquem informações. A maneira mais simples é incluir o convidado como participante do curso. Alguns convidados podem arguir que não têm disponibilidade de tempo para participar de uma discussão aberta, mesmo que por tempo determinado. Neste caso é possível usar um fórum para que os alunos escolham uma coleção de perguntas que gostariam de fazer e enviá-las ao palestrante convidado. As respostas seriam colocadas no ambiente do curso para os comentários de todos os alunos, já sob supervisão do professor regular da disciplina / curso.

Debates

Muitos professores esperam, com frequência, que um certo nível de debate ocorra espontaneamente em fóruns. No entanto, é muitas vezes difícil manter a bola rolando. Uma alternativa interessante é organizar os alunos em grupos, enunciar um argumento ou tese e atribuir a cada grupo a tarefa de defender / criticar a proposta ou assertiva feita. As defesas e críticas podem ser avaliadas pela sua qualidade e fundamentação sempre deixando claros os critérios usados para tal avaliação.

Perguntas mais frequentes

Quantas vezes um professor responde a mesma pergunta para três ou mais alunos? É normal que os alunos tenham a mesma pergunta sobre um conceito, sobre como realizar um trabalho ou ainda sobre avaliações. Ou porque não há oportunidade para isso nos encontros presenciais ou mesmo por timidez, a maioria espera o final da aula para fazer, em particular, perguntas sobre esses assuntos. E o professor responde as mesmas perguntas a muitos alunos. Com o avanço das TICs é comum que alunos conheçam o e-mail do professor e enviem as perguntas por e-mail. O mesmo processo de mesmas respostas para muitos alunos se repete. O e-mail enviado a um aluno não é visto por outros alunos. Um fórum do tipo FAQ resolve esses problemas e, mais que isso, permite que tanto alunos quanto o professor elaborem perguntas e respostas com mais concisão, clareza e objetividade, uma vez que em fóruns a comunicação é assíncrona.

Fórum social

Embora a maior parte dos fóruns criados em um curso / disciplina tenha como tema algum aspecto importante da matéria estudada, é importante reservar um espaço para que os alunos, de maneira informal, conversem entre si. Um espaço de socialização online. Um fórum social, no formato fórum geral, permite que o grupo de alunos estabeleça vínculos de amizade sem a preocupação de se ater aos conteúdos de estudo e nem mesmo preocupação com avaliações. O fórum social pode também ser usado, no início de um curso, para atividades quebra-gelo. Todos podem ser convidados, por exemplo, para responder a um tópico do fórum social, colocado pelo professor, fazendo uma breve apresentação pessoal. Em curso totalmente online, este procedimento é quase obrigatório e tem consequências muito importantes na formação da roda de aprendizagem.

Fonte: Conte com Moodle no próximo semestre

Athail Rangel Pulino Filho
(Versão 1.0)
Brasília – 2009
Registrado sob licença Creative Commons

Mais informações sobre a atividade: Fórum  http://docs.moodle.org/23/en/Using_Forum

E um ótimo tutorial elaborado do Carlos Alberto Nunes