3.3 Metodologia

O início dos trabalhos se deu com o levantamento dos requisitos para desenvolvimento do projeto. Primeiro buscamos entender como o mercado de viagens e turismo da região litorânea da grande João Pessoa foi afetado com a pandemia do COVID-19. Depois realizamos estudos com base em pesquisas e leituras sobre a fundamentação teórica para entender como poderíamos modelar uma plataforma ou ferramenta que pudesse ajudar pessoas e empresas que sofreram com tal acontecimento, ao mesmo tempo em que pudéssemos mostrar a cultura paraibana presente em locais da capital.

Com isso pensado, passamos a pesquisar sistemas com intuito ou missão semelhantes. Embora tenhamos encontrado sistemas semelhantes, percebemos que poucos buscavam realmente divulgar a cultura dos locais como nós pretendíamos.

A partir daí, com requisitos e missão definidos, procuramos então as melhores ferramentas para colocar o projeto em prática. Diante das opções, escolhemos as linguagens de marcação HTML5 e CSS3, e a plataforma Visual Studio Code.

Durante a decisão de como seria o design do site optamos por usar o site Coolors para a criação da paleta de cores, e o site Figma para criar o nosso design com base no sistema Material Design e em nossas preferências. A paleta foi criada tendo como cor base o verde, cor acordada por nós como tema do projeto, e utilizamos uma ferramenta do site Coolors que exporta a paleta já no formato CSS, como na Figura 6. No Figma utilizamos modelos de telas em formatodesktop e mobile e criamos um design que se adequasse ao que esperávamos do site.

Figura 6 - Paleta de cores em código CSSFonte: dos autores

Ainda utilizando o site Figma, desenvolvemos um avatar web 3d a partir de modelos gratuitos e de uso livre na plataforma, o qual nomeamos de “Green Boy”. Também foi desenvolvido o logotipo do site, que se trata do nome OtoLugar na fonte Beatrice Display estilizado como “OtoLugar”; e o isotipo do site, que consiste de três pinos característicos de mapas em tons diferentes de verde. Eles podem ser vistos na figura 4 abaixo.

Figura 7 - Isotipo, logotipo e avatar do site OtoLugarFonte: dos autores

Com o protótipo do design finalizado, nos dedicamos mais a relembrar e estudar novos itens das tecnologias ensinadas durante o curso. Aproveitando o conhecimento que já possuíamos sobre as linguagens Javascript, Css e Html, focamos em estudar mais a fundo tais linguagens através de sites da internet e livros.

Por fim, colocamos em prática o conhecimento adquirido durante o curso na criação do frontend do site. Para facilitar a contribuição de todos os estudantes envolvidos, optamos por utilizar um repositório no GitHub que permite o desenvolvimento compartilhado do código através de plataformas como Visual Studio Code e Replit.

Em um primeiro momento buscamos transformar os requisitos pensados anteriormente em itens e funções necessárias no site para serem colocadas no HTML base, como a elaboração de cards com espaços para um título e uma foto dos pontos turísticos, a criação de botões na navbar para o acesso a outras páginas e cadastro de um novo usuário.

Utilizando CSS puro — sem qualquer biblioteca importada ouframework de terceiros —, estilizamos as telas index, pesquisa, contato e as páginas dos pontos turísticos. Com o fundo na cor aero blue, todo o texto do site foi feito emcadmium green para ser totalmente legível e cômodo aos olhos do usuário. Nos cards foi utilizado um tom de aero blue com menor opacidade, criando um efeito translúcido sútil que não distrai o usuário, e os botões dentro deles foram colocados no tom vibrante emerald para chamar a atenção.

Figura 9 - Exemplo de cardFonte: dos autores

Foram colocados ainda efeitos dinâmicos nativos do CSS3 através da pseudo classe :hover para que, quando o usuário passe o mouse sobre um card ou outro item, a cor da borda mude ou a imagem tenha um pouco mais de zoom. Ainda por meio do CSS buscamos deixar o site o mais responsivo possível, já que existem inúmeros dispositivos com formatos e formas diferentes.

Figura 10 - Exemplo de responsividadeFonte: dos autores

Para otimizar o carregamento da página inicial utilizamos Javascript para criar funções que criam e inserem os cardsdos pontos turísticos dinamicamente. Utilizando o método de rotas HTTP criamos uma rota que acessa o banco de dados e retorna os dados necessários para a criação dos cards. A mesma tecnologia foi utilizada nas páginas individuais dos pontos turísticos, onde uma única página com o código base é acessada e, a partir dos dados da requisição HTTP, é preenchida com as informações dos pontos turísticos.

Figura 11 - Exemplo de função JS utilizada para a criação de cardsFonte: dos autores

Por fim, entregamos o projeto.