Imprimir este capítuloImprimir este capítulo

Repositório Códigos HTML

2. Foto dos professores e link para perfil/mensagem

O recurso inserir template possui um rótulo padrão para foto e nome dos docentes das UCs. Dependendo do padrão do curso, as fotos podem aparecer na coluna central ou nos blocos laterais. Abaixo um exemplo de como ficaria com 2 docentes. 

 Docentes

Prof. A
Turmas:

Prof. B
Turmas:

 


Veja a seguir o código HTML comentado.

Código

<p class="headline headline-v1"><i class="fas fa-user"></i> Docentes</p>
<div class="span6">
<p style="text-align: center;"><img src="http://moodle.ead.ifsc.edu.br/theme/ifsc2018/blocos/img-padrao.png" class="img-circle" style="width: 200px; height: 200px; object-fit: cover;" /></p>
<p style="text-align: center;"><strong>Prof. <a href="#" title="Clique para ver o perfil do professor">A</a></strong><br />Turmas:</p>
</div>
<div class="span6">
<p style="text-align: center;"><img src="http://moodle.ead.ifsc.edu.br/theme/ifsc2018/blocos/img-padrao.png" class="img-circle" style="width: 200px; height: 200px; object-fit: cover;" /></p>
<p style="text-align: center;"><strong>Prof. <a href="#" title="Clique para ver o perfil do professor">B</a></strong><br />Turmas:</p>
</div>

Comentário

O trecho em amarelo claro se refere à barra com ícone e título "Docentes" que aparece acima dos círculos com fotos. Caso as fotos dos docentes fiquem em blocos na lateral, essa parte deve ser apagada.

O trecho em azul demarca o início e o fim de cada grupo (foto + nome). Para cada novo docente, repete-se esse trecho. Lembrar de manter um DIV de abertura e um /DIV no fechamento. 

O trecho em azul  é o link para o perfil do professor. Esse link pode ser obtido na seção participantes do curso. Atenção: os links para perfis são compostos do ID do usuário e do ID da sala. O ID do usuário é sempre o mesmo no Moodle, mas o ID de curso muda de sala para sala. Veja no exemplo: https://moodle.ifsc.edu.br/user/view.php?id=4105&course=2984. O número que aparece depois de id=XXXX é o id do usuário. O número que aparece depois de course=XXXX é o ID do curso/sala e deve corresponder sempre ao ID da sala. Para saber o ID da sala, vá para página inicial da sala e confira na barra de endereços.

O trecho em salmão é o nome do professor. Aqui basta inserir o nome do docente, cuidando para não apagar nenhuma demarcação HTML.

O trecho em laranja é opcional e aparece apenas no caso de a UC ter mais de um docente e de eles dividirem as turmas entre si. Nesse caso, é preciso consultar os docentes e/ou coordenação de curso para confirmar por quais turmas cada docente será responsável. Caso esta situação não se aplique, você pode apagar o trecho "<br />Turmas:"

As fotos podem ser alteradas da mesma forma que se alteram as demais imagens posicionadas com recurso inserir template. Para saber como fazer, clique aqui.


Fotos de professores com link direto para mensagem privada

Em alguns cursos estamos adotando um link rápido para mensagem privada ao professor, conforme pode ser visto abaixo.


Neste caso, o código será o mesmo do anterior, sendo acrescentado apenas o trecho correspondente a mensagem. Confira no código abaixo.

Código

<div style="text-align: center;"> <p style="text-align: center;"><img src="https://moodle.ead.ifsc.edu.br/draftfile.php/115595/user/draft/3879655/Crislaine%20Gruber.png" class="img-circle" style="width: 200px; height: 200px; object-fit: cover;" width="200" height="200" /></p>

<p style="text-align: center;"><a href="#" target="_blank"><strong>Profª. Crislaine Gruber</strong></a><br /><span style="font-size: small;"><a href="https://moodle.ead.ifsc.edu.br/message/index.php?id=11262" target="_blank" style="color: #ff6600;" title="Enviar mensagem"><i class="far fa-envelope" style="color: #ff6600;"></i> <em style="color: #ff6600;">Enviar mensagem privada</em></a></span></p>
</div>

Comentário

O trecho em laranja corresponde ao link de mensagem direta e deve ser colado logo após o "</strong></a>" que ficam ao final do nome do professor ou das turmas, quando houver. Para que o link direcione corretamente, o trecho em azul deve ser alterado para o ID do professor. Você pode ver o ID de usuário do professor na lista de participantes ou na página de perfil do prof. Após refazer o link, sempre confira se ele está abrindo a janela de mensagens e direcionando para pessoa correta.