- Objetivo
- Contexto de documentação
- Problemática
- O gerador das Páginas de Curso
- Funcionamento do TinyMCE
- Descrição da solução
- Utilização
- Observação
Contribuir para a melhoria da usabilidade e experiência (UX Design) e da interface visual (UI Design) dos sites de cursos criados através do SIGAA (e seus derivados, em outras instituições).
Essa documentação foi elaborada com base na experiência de contribuição para a manutenção do site institucional do PPGCC da UFRN, utilizando o SIGAA.
Caso as instituições públicas brasileiras que contrataram o uso desse sistema, tenham acesso a essa opção de Páginas Web, provavelmente este repositório lhes será útil.
No início das atividades de manutenção do front-end do site sistêmico (no SIGAA) do PPGCC, realizou-se uma consulta aos sites das demais unidades da instituição e percebeu-se que:
- quantidade considerável dos cursos não utilizam qualquer página personalizada.
- os cursos que utilizam a página personalizada, utilizam apenas recursos comuns.
- não foi encontrado curso que utiliza recursos de personalização de página, com HTML estilizado.
Atualmente, os sistemas SIG (na opção Páginas Web) utilizam um editor de código web online do tipo WYSIWYG chamado TinyMCE, open-source e ainda em desenvolvimento, sendo a versão utilizada nos sistemas SIG a 3.4.9, de 2012.
Considerando a linguagem visual padrão, aparentemente, esse editor é o mesmo utilizado em todos os sites de cursos, quando implementado pela instituição.
Tomando por referência a documentação do sistema SIG utilizado na UFRN, aparentemente, a plataforma do TinyMCE está disponível para todos os cursos que utilizam o sistema SIG, exceto os de ensino infantil, fundamental, médio e de extensão universitária.
Abaixo foram tabelados links para as documentações dos diferentes níveis de curso com a Página Web de Cursos disponível.
| Tipo de Curso | Seção "Apresentação" | Seção "Notícias do Portal Público" | Seção "Outras Opções / Seções Extras" |
|---|---|---|---|
| Técnico (Forma Integrada) | Ambos | Ambos | Ambos |
| Técnico (Forma Concomitante ou Subsequente) | Movo Visual | Ambos | Ambos |
| Formação Complementar | Documentação não elaborada | ||
| Graduação | Ambos | Ambos (cadastro e edição) | Ambos (cadastro e edição) |
| Lato-Sensu | Documentação não elaborada | ||
| Strictu Sensu | Ambos | Ambos (cadastro e edição) | Ambos (cadastro e edição) |
No contexto de utilização nos sistemas SIG, a interface de usuário do TinyMCE (versão 3.4.9) disponibiliza dois modos de edição (assim como alguns editores de código WYSIWYG), aqui denominados: o modo visual e o modo código.
Nesse modo, o conteúdo é inserido e estilizado diretamente na caixa de texto disponibilizada, na tela de disponibilizada. Para utilizá-lo, não são necessários conhecimentos de programação web, bastando apenas noções básicas de processadores de texto (como o LibreOffice Writer, Google Docs, Microsoft Word).
Nesse modo, o conteúdo é inserido em uma janela externa, a qual somente lerá código HTML. Para utilizá-lo são necessários conhecimentos de programação web (HTML, CSS e, dependendo da necessidade, JS).
O conteúdo inserido nesta janela será lido e interpretado pelo TinyMCE como código HTML, CSS e JS, tendo sua aparência demonstrada quando este for submetido (botão Update).
A tecnologia usada neste código deve ser compatível com os padrões web existentes na data dessa versão do TinyMCE. Padrões referentes ao HTML5 (adotado pela W3C como recomendação em 2014) e posteriores, por exemplo, não são compatíveis.
O conteúdo do código aqui inserido pode ser desenvolvido (em editor de código web adequado) considerando-se que está, em uma estrutura convencional de página HTML, dentro de um elemento <div>.
Somente o conteúdo dessa tag <div> da página que foi desenvolvida precisa ser inserido na janela do Modo Código do TinyMCE.
Caso a <div> (que engloba o conteúdo HTML colado) também seja inserida, esta será renderizada pelo TinyMCE (na página final, ficará dentro da <div id="conteudo">).
No ambiente do modo visual também é possível escolher, no formulário disponível, se a "Seção Extra" será apenas um link externo, marcando-se o botão de opção "Acesso Link Externo" (sim / não). Além disso, pode-se escolher tanto o título da seção, quanto se ela será acessível por link inserido diretamente no menu "Outras Opções" do site publicado do curso (marcando "Publicar: Sim") e por link (o usuário clica em um link para esta "Seção Extra"), ou se será acessível somente por link (marcando "Publicar: Não).
O uso de imagens no TinyMCE, na versão 3.4.9 instalada no SIGAA da UFRN, não comporta inserção direta no sistema (o usuário não tem a opção de carregar a imagem diretamente no sistema), independente do modo de edição usado da página (visual ou código). Há duas maneiras de usá-las.
Nessa maneira, as imagens devem já estar upadas em outro local, sendo inseridas através de sua URL. É a maneira padrão de se trabalhar.
Nessa maneira, as imagens são transformadas em código, ao serem inseridas no TinyMCE. Só se obteve êxito utilizando-se o navegador Mozilla Firefox (dos testados). Para inserir imagens assim, o fluxo é:
- acessar a área da edição da página, acessando o modo visual de edição, utilizando o Firefox.
- clicar (no 'explorador de arquivos') no arquivo da imagem e arrastá-lo para dentro da área de edição do modo visual.
Para utilização de imagens via código na página, depois de inserida, pode-se tanto usar as opções de controle no modo visual (alças de redimensionamento, por exemplo) quanto usar o modo código, sendo que nesta última opção, será revelado que a imagem assim inserida, na verdade, está em formato de código (seu conteúdo será um elemento <img> com o atributo src com valor começando em data:image/jpeg;base64,), seguido dos códigos referentes aos pixels da imagem.
Este método de inserção torna o código da página extenso.
Dos modos comuns de se atribuir estilo a uma página web individual, aparentemente, somente a solução de CSS inline está disponível para uso no TinyMCE 3.4.9, utilizado atualmente nos sistemas da UFRN, por parte das secretarias de cursos. Testes foram feitos e somente esta maneira de uso de estilização teve êxito, apesar de ser a menos favorável a um código mais simples de se dar manutenção.
Para uma experiência efetiva de um editor de código WYSIWYG ou algum CMS institucional, proporcionando não só o cumprimento da função comunicativa (utilitária), a função de proporcionar uma boa experiência de uso por vezes melhora a primeira.
Nesse sentido, este repositório organiza a experiência adquirida sobre a manutenção do front-end (interface web no lado cliente) de páginas web referentes a uma unidade administrativa (o PPGCC) da UFRN, em um contexto de limitação tecnológica.
Suscintamente, trata-se de: arquivos do front-end de páginas web em HTML 4.01 transitional, com CSS inline e JavaScript.
As páginas aqui registradas documentam o trabalho realizado no PPGCC, mas também podem servir de modelo (template) para uso por outras unidades que utilizam páginas web nos sistemas SIG.
A criação desses templates (e o processo de descoberta da limitação tecnológica) demandou tempo considerável, o qual pode ser economizado por outras unidades universitárias, ao utilizá-los.
Para utilização desses templates, pode ser necessário que a unidade universitária tenha pessoal com familiaridade com programação web. Especificamente, as seguintes habilidades são necessárias: HTML intermediário, CSS básico e JavaScript básico. Ao usar os arquivos aqui inseridos, considere os comentários nos códigos apenas para fins de orientação. Favor, removê-los antes de publicar o arquivo.
Para configuração / personalização dos templates, pode-se usar qualquer editor de código web. O uso de editores de código apropriados facilita bastante o trabalho. Na elaboração destes templates foi utilizado o VSCode.
A estrutura das páginas (estruturas HTML), suas estilizações (conteúdo CSS) e seus comportamentos (os scripts JS) dos templates aqui armazenados estão sob a licença MIT, mas o conteúdo delas (dados, informações, textos, etc) está com todos os direitos reservados ao PPGCC.
Ao utilizar esses modelos de design web personalizados para Páginas de Cursos nos sistemas SIG, submeta um Pull Request a este presente repositório, editando este presente arquivo README.md (no último tópico), para creditar a autoria bem como para organizar-se aqui as referências de aplicação destas interfaces.
A documentação dessa experiência não expressa a opinião da SINFO, unidade administrativa responsável por manter e atualizar os sistemas da UFRN.