Layout Básico - topo_tela.php, menu_principal.php, tela2.php

Todas as páginas do ambiente seguem um layout padrão.

Na parte superior é exibido o logo do TelEduc bem como algumas funções de configuração da conta que variam conforme o nível de acesso do usuário (coordenador, aluno, visitante, etc). No lado esquerdo da tela está o menu com as todas as funções e ferramentas principais do sistema. Finalmente, na parte inferior são exibidos algumas informações institucionais.

Abaixo segue um exemplo da página da ferramenta agenda, com as áreas destacadas:

Ao construir uma página, o arquivo pricipal (no caso, agenda.php) irá descrever os elementos da seção pintada de amarelo. Como os outros elementos são usados em muitas páginas, eles estão em arquivos separados, que são incluídos na página principal da seguinte maneira:

include("../topo_tela.php");

Usualmente, 3 arquivos são incluídos em todas as páginas: topo_tela.php, menu_principal.php e tela2.php (todos localizados em teleduc4 > cursos > aplic). A função de cada um deles é explicada a seguir:

topo_tela.php

Ao contrário do que se poderia esperar em um primeiro momento, esse arquivo não trata do cabeçalho da tela, mas sim do cabeçalho do arquivo html. Aqui são incluídas algumas bibliotecas, feita a conexão com banco de dados, autenticação e verificação do nível do usuário e população de algumas variáveis com as frases cadastradas no banco. Além disso, neste arquivo é composto o início do html, com o título, meta informações e arquivos css.

menu_principal.php

A pricipal função desse arquivo é compor as áreas destacadas em vermelho na imagem, ou seja, o topo da página e o menu principal na lateral.
O menu superior é construído com base no nível de acesso do usuário. Abaixo temos exemplos do menu para um aluno:

E um exemplo para usuário administrador:

Os textos dos botões e links não são incluídos diretamente no código html. Ao invés disso, eles ficam cadastrados no banco e são inseridos dinamicamente, facilitando assim a alteração das frases ou mesmo do idioma do ambiente. A seguir um exemplo de como isto é feito:

<codeclass="javascript">// 46 - Visão de Formador
$tela_nome_ferramenta=RetornaFraseDaLista($lista_frases_menu,46);
echo("          ".$tela_hrefFormador.$tela_nome_ferramenta.$tela_fechaHrefFormador."</li>\n");

De modo semelhante, o menu lateral também é tratado nesse arquivo. A lista de ferramentas disponíveis é retirada do banco de dados, e são selecionadas apenas aquelas que podem ser exibidas a cada tipo de usuário:

<codeclass="javascript">// Lista das ferramentas a esconder de convidados passivos
$tela_array_convidado_passivo = array (11, 12, 14, 15, 22, 23);
// Lista das ferramentas a esconder de convidados ativos
$tela_array_convidado_ativo   = array (12, 14, 22, 23);

A única diferença aqui é o sistema de notificações de novidades, em que uma estrela é exibida ao lado do link se ocorreu alguma mudança no conteúdo daquela ferramenta. Esse sistema é explicado com mais detalhes neste link: Sistema de notificação de novidades

tela2.php

Esse arquivo é bem simples e apenas adiciona a parte destacada em verde na imagem: alguns logos com links e um pequeno texto.

layout.png (38,982 KB) Pedro Ribeiro, 23/06/2009 16:14

menu_sup.png (2,981 KB) Pedro Ribeiro, 23/06/2009 16:14

menu_sup_adm.png (5,268 KB) Pedro Ribeiro, 23/06/2009 16:15