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

MoodleMoot Brasil 2014

Já está disponível no Site Oficial do MoodleMoot Brasil 2014 (http://www.moodlemoot.com.br/2014/) a chamada para a submissão de Artigos/Comunicações Orais e Minicursos até o dia 06/04/2014!

Fiquem atentos, em breve serão abertas as  inscrições.

Chamada_Trabalho_MoodleMootBR_2014

Publicações sobre Moodle no SBIE- Simpósio Brasileiro de Informática na Educação

Compartilho uma dica da grande amiga e pesquisadora Letícia Capelão.
Um apanhado de vários artigos apresentados no Simpósio Brasileiro de Informática na Educação

Desenvolvimento de um Ambiente Virtual de Aprendizagem
Felipe Becker Nunes, Fernando Sarturi Prass
2012
DOI:

Texto completo: PDF – http://www.br-ie.org/pub/index.php/sbie/article/view/1819/1581
Resumo

A tecnologia tem influenciado cada vez mais a área educacional, o ensino à distância é um exemplo destas mudanças. Este artigo apresenta um ambiente virtual de aprendizagem para disponibilizar conteúdos e tarefas de forma mais simples, possibilitando uma maior interação entre o professor e os alunos. O ambiente foi desenvolvido em ASP.NET(com a linguagem C#) e banco de dados Access, baseado na análise dos ambientes Moodle, Teleduc e Net Aula, de onde foram retiradas as principais funcionalidades, mas sem as dificuldades existentes nas mesmas.

————————————————————————————————————————————————————–
Alteração no Modelo de Grupos do Moodle para Apoiar a Colaboração
Leonardo N. dos Santos, Alberto N. de Castro Jr., Thaís H. Chaves de Castro
2007
DOI:

Texto completo: PDF – http://www.br-ie.org/pub/index.php/sbie/article/view/562/548
Resumo

Resumo: Vários ambientes virtuais de apoio a aprendizagem oferecem o recurso de organização em grupos, embora poucos sejam de fato adequados à realização colaborativa de atividades. A partir de um conjunto de características desejáveis a AVAs no suporte à colaboração, discutimos neste trabalho, as principais características do ambiente Moodle no que diz respeito à organização de grupos com tal propósito, descrevendo um conjunto de alterações que buscaram melhor suas características nesse aspecto específico, sem interferir nem modificar a arquitetura atual do ambiente. Abstract: Vários ambientes virtuais de apoio a aprendizagem oferecem o recurso de organização em grupos, embora poucos sejam de fato adequados à realização colaborativa de atividades. A partir de um conjunto de características desejáveis a AVAs no suporte à colaboração, discutimos neste trabalho, as principais características do ambiente Moodle no que diz respeito à organização de grupos com tal propósito, descrevendo um conjunto de alterações que buscaram melhor suas características nesse aspecto específico, sem interferir nem modificar a arquitetura atual do ambiente.

————————————————————————————————————————————————————–
Construção Automática de Redes Sociais Online no Ambiente Moodle
Tássia Serrão, Lucas M. Braz, Sérgio Crespo C. S. Pinto, Gisela Clunie
2011
DOI:

Texto completo: PDF – http://www.br-ie.org/pub/index.php/sbie/article/view/1647/1412
Resumo

Os métodos de ensino tradicional dos sistemas de gerenciamento de aprendizagem (ou LMS do termo em inglês Learning Management System) são rígidos por natureza e impõem limitações ao processo de ensino. Por terem um padrão fechado, essas ferramentas acabam prejudicando o aluno, pois o impedem de interagir com qualquer pessoa que compartilhe dos mesmos interesses que ele. Como resultado, os conceitos de comunidade, relação e interação entre os usuários são necessários para superar essas limitações. A proposta deste trabalho é o desenvolvimento de um software social que possibilite a criação e articulação de redes sociais online por alunos do ambiente Moodle de forma automática através de seus dispositivos móveis, potencializando as interações entre alunos e professores.

————————————————————————————————————————————————————–
Repositório para Recursos Digitais Interativos, integrado ao ambiente Moodle
Eliane R. Marion Santa Rosa, Leônidas O. Brandão
2011
DOI:

Texto completo: PDF – http://www.br-ie.org/pub/index.php/sbie/article/view/1641/1406
Resumo

Os Objetos de Aprendizagem (OA) interativos podem facilitar o processo de ensino-aprendizagem principalmente quando associados a ambientes virtuais. Nesse sentido, este artigo tem o objetivo de apresentar o Repositório de Conteúdos Digitais Interativos (iRCD) que, integrado ao Moodle, possibilita o armazenamento e compartilhamento de conteúdos digitais do tipo Tarefa Interativa, facilitando assim as atividades docentes.

————————————————————————————————————————————————————–
Way-learn: uma ferramenta para a definição do perfil de usuários do Moodle visando à apresentação de Objetos de Aprendizagem orientada pelo perfil
2007
DOI:

Texto completo: PDF – http://www.br-ie.org/pub/index.php/sbie/article/view/635/621
Resumo

Resumo: Este artigo visa efetuar uma pesquisa em algumas áreas da Educação a Distância bem como sobre ambientes de aprendizagem, em específico o Moodle, desenvolvendo uma ferramenta que auxilie a definição do perfil de alunos deste ambiente. A definição do perfil traz consigo algumas características importantes, dentre as quais cita-se a possibilidade de direcionar a apresentação dos conteúdos para o aluno ao longo de seu aprendizado, evitando que temas já dominados sejam reapresentados, possibilitando um acompanhamento mais preciso por parte do professor.

————————————————————————————————————————————————————–
iRCD: Proposta de um novo recurso de Repositório de Conteúdos Digitais Interativos para o Moodle
Eliane R. Marion Santa Rosa, Leônidas O. Brandão

DOI:

Texto completo: PDF – http://www.br-ie.org/pub/index.php/sbie/article/view/1536/1301
Resumo

Os sistemas computacionais para ensino/aprendizagem possibilitam ao professor a produção de conteúdos interessantes para seus alunos, entretanto demandam maior tempo de preparação. O objetivo deste trabalho é apresentar a proposta de um novo módulo para o sistema Moodle, o Repositório de Conteúdos Digitais Interativos (iRCD). Este módulo está em desenvolvimento e visa a criação de comunidades de produtores de conteúdos digitais, que assim poderão ser trocados entre professores registrados em ambientes Moodle.

————————————————————————————————————————————————————–
Novo núucleo para o Moodle: promovendo um modelo hierárquico e compartilhável para disciplinas virtuais e materiais digitais
Mauricio Garcia F. do Nascimento, Leônidas de Oliveira Brandão

DOI:

Texto completo: PDF – http://www.br-ie.org/pub/index.php/sbie/article/view/1555/1320
Resumo

O sistema Moodle constitui-se atualmente numa das mais importantes ferramentas de apoio a cursos na Web. Apesar disto, seu modelo apresenta algumas deficiências para uma estruturação hierárquica e compartilhamento de materiais digitais entre disciplinas e turmas do seu ambiente virtual. Este artigo apresenta um estudo sobre a arquitetura central do Moodle, propondo a definição de um novo núcleo, visando o aprimoramento destas características.

————————————————————————————————————————————————————–
Um Mecanismo para a Integração entre o LMS Moodle e o Site de Redes Sociais Facebook
Lucas M. Braz, Tássia Serrão, Sérgio Crespo C. S. Pinto, Gisela Clunie
2011
DOI:

Texto completo: PDF – http://www.br-ie.org/pub/index.php/sbie/article/view/1646/1411
Resumo

Sites de redes sociais são ótimas ferramentas para agregar e aproximar pessoas, no sentido de que elas oferecem diversas formas de interação, provendo a seus participantes facilidade de comunicação e a possibilidade de criarem discussões, comentários e compartilharem recursos que achem relevantes. A popularidade desses sites é indiscutível, com milhares de novos usuários todos os dias, exercem bastante atração, especialmente entre os mais jovens, que muitas vezes passam a incorporá-los ao seu cotidiano, e utilizam-nos para discutir sobre os mais variados temas, inclusive relacionados à sala de aula. Diante disso, muitos pesquisadores tem se dedicado a investigar se o uso desses sites no contexto de ensino formal seria benéfico. Embora ainda bastante recentes, essas pesquisas, geralmente, identificam grande potencial nesses sites, como forma de motivar os alunos a serem mais participativos e engajados. O objetivo deste trabalho é apresentar um mecanismo para realizar a integração entre o Sistema de Gestão de Aprendizagem Moodle e o Facebook, com o intuito de explorar o potencial desse site em prol da educação.

————————————————————————————————————————————————————–
FindYourHelp: an expert search module on Moodle
Marcos L. dos Santos, Laís do Nascimento Salvador, Daniela S. Cruzes

DOI:

Texto completo: PDF – http://www.br-ie.org/pub/index.php/sbie/article/view/1466/1231
Resumo

This paper presents FindYourHelp, a solution that enables automatic identification of experts who have most contribute into Virtual Learning Environments discussion forums. The proposal is based on applying text mining techniques as a supplementary analysis of student’s participation. Some technical details are discussed, as well as, a feasibility study of such solution.

Mooc Tutoria

LOGO-COR-HORIZONTAL-70h-sem-back   Convido a todos os interessados a participar do Mooc Tutoria

Quando: começa dia 04/11/2013 que é quando também se encerram as inscrições

Onde: http://moocead.net/ (moodle versão 2.5.2 – cuja configuração e administração está sendo feita por mim)

Quem irá coordenar: Prof. João Mattar

O MOOC Tutoria, gratuito e aberto a qualquer interessado, discutirá as funções do tutor em Educação a Distância (EaD) e oferecerá suporte teórico e prático para sua atuação.


Duração:
4 de Novembro a 16 de Dezembro de 2013.

O curso prevê uma dedicação média de 4 (quatro) horas por semana.

Pré-requisitos: noções básicas do uso de computador e da Internet.

Programa Geral:

Tutor é Professor
Modelos de Educação a Distância
Funções do Tutor
Design de Interações em Educação a Distância
Atividades síncronas e assíncronas.
Avaliação

O que é Mooc?

MOOC
MATTAR, João. MOOC. De Mattar, 24 mar. 2012. Post em blog.

Aguardamos vocês por lá. Até o momento (31/10) já temos mais de 1.660 inscritos