4.2 Desenvolvimento do site na versão beta (teste) com módulos gráficos

Em função das dificuldades para a contratação de empresas para o desenvolvimento do site (re)Conhecendo Salvador, a equipe resolveu desenvolver uma versão beta (de teste) internamente utilizando o gerenciador de conteúdo (CMS) Wordpress, que é uma plataforma gratuita, open source bastante robusta e confiável, utilizada em sites de grandes empresas como a Walt Disney, Globo (G1), Sony Music e Toyota. Para isso, inicialmente foi feita uma capacitação online e gratuita através da plataforma Mirago. A capacitação em Wordpress durou, aproximadamente, duas semanas, e ocorreu em paralelo às demais atividades do projeto. Para desenvolver o site (re)Conhecendo Salvador utilizando o Wordpress foi necessário instalar no computador servidores web e de banco de dados (Apache e MySQL), através do MAMP 4.2.0, que é um pacote de servidores que prepara o ambiente localhost para receber o gerenciador de conteúdos. Somente após a instalação dessa infraestrutura é possível instalar o Wordpress na máquina. Vale salientar que a versão utilizada no desenvolvimento deste site foi o Wordpress.org, e por isso foi necessário preparar o ambiente da máquina para recebê-lo. Ele foi escolhido em detrimento da versão Wordpress.com por ser mais customizável e atender melhor aos requisitos do site. A próxima etapa de desenvolvimento do (re)Conhecendo Salvador versão beta foi a pesquisa e escolha do tema a ser utilizado no wordpress. O tema corresponde à uma estrutura básica de telas que pode ser instalada no wordpress.org e customizada de acordo com as necessidades da proposta do site. Foi feita uma pesquisa de temas para descobrir o melhor custo benefício para desempenho e funcionalidades do site. Dentro das opções gratuitas, foi escolhido o tema Neve pois apresenta uma estrutura mais robusta e flexível, permitindo customizações das telas nos mais diversos aspectos. Após a instalação do CMS e da escolha do tema, ainda foi necessário fazer a instalação do plugin Elementor, dentro do Wordpress, na versão gratuita, para aprimorar as possibilidades de construção de layouts das telas. A diagramação das telas seguiu o fluxo de telas do site Pordata Kids: tela inicial > tela de submenus dos temas > painel de perguntas > dashboards com gráficos. A logomarca, os elementos do menu principal e os botões foram todos criados utilizando dos recursos gratuitos oferecidos na plataforma de design online Canva (Figura 4.8, 4.9, 4.10 e 4.11)

Logomarca da versão teste.

Figura 4.8: Logomarca da versão teste.

Botões do menu principal

Figura 4.9: Botões do menu principal

Botão de rodapé.

Figura 4.10: Botão de rodapé.

Botões dos painéis dos subtemas educação, população e segurança, de cima para baixo, respectivamente.

Figura 4.11: Botões dos painéis dos subtemas educação, população e segurança, de cima para baixo, respectivamente.

Depois de iniciar o desenvolvimento na máquina local, optamos por transferir a versão a um servidor online e gratuito para que outros membros da equipe pudessem visualizar e até mesmo modificar a estrutura do que estava proposto. Após algumas pesquisas, o servidor escolhido foi o Awardspace. Esse servidor oferece instalador automático do WordPress, o que facilitou bastante a migração da versão desenvolvida no computador local para o servidor online, hospedagem sem anúncios, além de ter espaço em disco igual a 1GB, largura de banda de 5GB, e banco de dados MySQL. Para fazer a migração, foi necessário instalar no wordpress da máquina o plugin All-in-One, nativo no Wordpress do Awardspace. Entretanto, após fazer a migração para o servidor online, a equipe achou melhor continuar o desenvolvimento em localhost e utilizar o servidor online apenas para apresentar e compartilhar as mudanças e evoluções nas versões.

Os dados relacionados aos temas são apresentados em dashboars, embutidos nas páginas de respostas das perguntas, desenvolvidos em R, conforme descrito na seção “Descrição do layout dos dashboards.”

A seguir, serão apresentadas as telas da versão teste do (re)Conhecendo Salvador de acordo com o fluxo de navegação:

  • Tela inicial (Figura 4.12)
  • Painel do submenu dos Temas (Figura 4.13)
  • Painel de Perguntas (Figura 4.14 )
  • Dashboard com a apresentação dos dados em gráficos (Figura 4.15)
Tela inicial/ Página Principal.

Figura 4.12: Tela inicial/ Página Principal.

Painel do submenu do tema.

Figura 4.13: Painel do submenu do tema.

Painel de perguntas disparadoras.

Figura 4.14: Painel de perguntas disparadoras.

Painel de perguntas disparadoras.

Figura 4.15: Painel de perguntas disparadoras.