Padrões da Interface do TelEduc (documento em construção)

A seguir serão documentados os principais elementos de interface e o código correspondente a eles. Tais elementos são utilizados para construir o arquivo principal da página do ambiente de forma consistente à interface padrão do TelEduc.

[imagem geral]

A área destacada pelo retângulo amerelo na figura acima é um exemplo de uma página principal do ambiente.

Interface base

A estrutura básica da página pricipal é constituida por um cabeçalho contendo o nome da ferramenta, opções de mudança no tamanho da fonte (3 A's) e retorno à página anterior (botão voltar) e por uma tabela, como mostrado a seguir:

[imagem interface exemplo simples]

<codeclass="javascript">/*Definindo a pagina conteudo*/
echo("<td width=\"100%\" valign=\"top\" id=\"conteudo\">\n");

/*Nome da Ferramenta:*/
echo("<h4>Nome da Ferramenta</h4>\n");

/*3 A's: Muda o tamanho da fonte*/
echo("<div id=\"mudarFonte\">\n");
echo("   <a onclick=\"mudafonte(2)\" href=\"#\"><img width=\"17\" height=\"15\" border=\"0\" align=\"right\" alt=\"Letra tamanho 3\" src=\"../imgs/btFont1.gif\"/></a>\n");
echo("   <a onclick=\"mudafonte(1)\" href=\"#\"><img width=\"15\" height=\"15\" border=\"0\" align=\"right\" alt=\"Letra tamanho 2\" src=\"../imgs/btFont2.gif\"/></a>\n");
echo("   <a onclick=\"mudafonte(0)\" href=\"#\"><img width=\"14\" height=\"15\" border=\"0\" align=\"right\" alt=\"Letra tamanho 1\" src=\"../imgs/btFont3.gif\"/></a>\n");
echo("</div>\n");

/*Botão Voltar*/
echo("<span class=\"btsNav\" onclick=\"javascript:history.back(-1);\"><img src=\"../imgs/btVoltar.gif\" border=\"0\" alt=\"Voltar\" /></span><br /><br />\n");

/*Definindo a tabela externa*/
echo("<table cellpadding=\"0\" cellspacing=\"0\"  id=\"tabelaExterna\" class=\"tabExterna\">\n");
echo("   <tbody>\n");

/*Células da tabela externa:*/
echo("   <tr>\n");
echo("      <td>\n");
echo("          Linha 1 da tabela externa\n");
echo("      </td>\n");
echo("   </tr>\n");

echo("   <tr>\n");
echo("      <td>\n");
echo("          Linha 2 da tabela externa\n");
echo("      </td>\n");
echo("   </tr>\n");

/*Finalizando a tabela externa e o formulario*/
echo("            </tbody>");
echo("        </table>");

Sendo assim, cada elemento, ao ser inserido na página, deve ser estruturado como uma linha ou uma coluna da tabela externa (representados pelas tags <tr></tr> para linhas e <td></td> para colunas.

Preenchendo a página principal

h3.+Tabelas:+

Tabelas Externa e Interna

[Tabelas.png]

O conteúdo principal da nova página é estruturado dentro de uma tabela interna à tabela externa, como mostrado na figuro acima (avaliações.php). Além da tabela interna (class="tabInterna"), a tabela externa (class="tabExterna") pode conter botões de navegação na parte superior, como mostrado na figura. Tais botões são caracterizados pela classe css "btAuxTabs" como veremos mais a diante.

Código referente à construção da tabela interna:

<codeclass="javascript">echo("<tr>\n");
echo("   <td>\n");
echo("      <table cellspacing=\"0\" cellpadding=\"0\" class=\"tabInterna\">\n");
/*Conteudo da tabela interna*/
echo("      </table>\n");
echo("   </td>\n");
echo("</tr>\n");

Cabeçalhos

Os cabeçalhos das tabelas podem ser definidos por 3 classes css: head, head01 e head02. Tais classes devem ser incluidas na descrição da linha da tabela, ou seja, na tag <tr class="..."></tr>.

  • Class head

A classe head representa o cabeçalho principal das tabelas.

[imagem de cabeçalho1]

<codeclass="javascript">/*Cabeçalho:*/
echo("<tr class=\"head\">\n");
echo("   <td colspan=\"2\" style=\"padding: 6px;\">\n");
echo("      Cabecalho da pagina de conteudo\n");
echo("   </td>\n");
echo("</tr>\n");
  • Class head01

Tal classe define um subcabeçalho, usado por exemplo na tabela abaixo (editar_exercicio.php):

[imagem cabeçalho2]

<codeclass="javascript">echo("<tr class=\"head\">\n");
echo("   <td colspan=\"6\" class=\"center\">Questões</td>">\n");
echo("</tr>">\n");
echo("<tr class=\"head01\">">\n");
echo("   <td width=\"2\"><input type=\"checkbox\" onclick=\"CheckTodos();\" id=\"checkMenu\"></td>">\n");
echo("   <td class=\"alLeft\">Título</td>">\n");
echo("   <td width=\"10%\">Tipo</td>">\n");
echo("   <td width=\"20%\">Tópico</td>">\n");
echo("   <td width=\"10%\">Dificuldade</td>">\n");
echo("   <td width=\"10%\">Valor</td>">\n");
echo("</tr>">\n");
  • Class head02

Botões:

Na página a seguir (editar_exercicio.php) temos alguns exemplos de botões padrões do TelEduc:

[EditarExercicios.png]

Agenda.png (33,88 KB) Alline Kobayashi, 21/05/2010 15:00

InterfaceBasePagPrincipal.png (4,559 KB) Alline Kobayashi, 21/05/2010 15:58

InterfaceBase.png (28,228 KB) Alline Kobayashi, 21/05/2010 15:59