ATIVIDADE CONTEXTUALIZADA DE DESENVOLVIMENTO DE

APLICAÇÕES PARA INTERNET

Nathanael Augusto Ribeiro da Silva

Matrícula: 01471991
Curso: Análise e Desenvolvimento de Sistemas

APRESENTAÇÃO DA APLICAÇÃO

A aplicação web da Panificadora Pão Amigo e Cia, é uma proposta para

a apresentação, de forma simples e prática, dos produtos vendidos neste
estabelecimento. Terá a tecnologia Java como base de desenvolvimento no
back-end, utilizando todas as boas práticas de programação, afim de deixar a
aplicação leve, confiável, e pronta para receber manutenção sem muitos
problemas. Será hospedado em um servidor Tomcat.
A interface do usuário, será desenvolvida com HTML e JSP. Será
utilizado também recursos de JS e Bootstrap, um framework bastante utilizado
pela comunidade de desenvolvimento web, pelo fato de ter diversas opções
implementadas que facilitam e agilizam o processo com opção de
personalização. Para as funcionalidades dinâmicas da página, serão utilizados
Scriplets JSP.
O banco de dados escolhido para ser utilizado, foi o Mysql, por ser um
SGBD com uma comunidade sólida, que facilita na busca de informações para
implementação e resolução de possíveis erros, além de também ser open
source e gratuito.
 1. DISPOSIÇÃO DA APLICAÇÃO

A aplicação seguirá a premissa do “Mobile First”, levando em

consideração que segundo dados referentes a pesquisa TIC Domicílios de
2021, 99% dos brasileiros acessam internet pelo celular. Com o Mobile First, o
desenvolvimento de uma aplicação, se dá primeiro voltado aos dispositivos
móveis, e daí, são adaptados para telas maiores. Essa adaptação é chamada
de responsividade, onde alguns elementos da página são ocultados ou
agrupados, afim de entregar a melhor experiência possível para o usuário, de
acordo com o tamanho da tela em que ele está acessando a aplicação.
 2. APRESENTAÇÃO DE ERROS

Erros em sistemas, são bem comuns. O programador tem por obrigação, tratar
esses erros e deixar o usuário confortável para contorná-los quando acontecer,
e seguir com o uso dos sistemas. Um dos caminhos para isso, é deixar a tela
mais amigável quando um erro acontecer, pois muitas vezes as telas padrões,
assustam o usuário que acaba deixando de usar o sistema. Na nossa aplicação
usaremos telas customizadas quando erros acontecerem, tornando a
experiência mais amigável.

No xml da nossa aplicação, criaremos rotas para os principais códigos de erro,

para que o sistema, ao identificar o erro, faça o desvio para uma página jsp,
customizada.

Na imagem acima, código do web.xml direcionando para uma página específica ao encontrar o erro 500.

Na imagem acima, código personalizado quando ocorrer o erro 500 na aplicação.

Na imagem acima, um comparativo de um erro comum e um erro personalizado.
 3. URL DA APLICAÇÃO

Afim de tornar a navegabilidade melhor, será adquirido um domínio na

Hostinger, uma empresa de hospedagem que oferece um preço muito bom e
serviços de qualidade. Esse domínio terá a nomenclatura o mais próximo
possível do nome da empresa, para que as rotas criadas, sejam feitas
seguindo um raciocínio bem natural, com URL (endereço de um serviço
disponível em uma rede) de fácil entendimento. Essas boas práticas, facilitam
os programadores que futuramente irão fazer manutenção no código da
aplicação.
 4. ARQUITETURA DA APLICAÇÃO

A aplicação utilizará o padrão MVC. O MVC é uma sigla do termo em inglês

Model (modelo) View (visão) e Controller (Controle) que facilita a troca de
informações entre a interface do usuário aos dados no banco, fazendo com
que as respostas sejam mais rápidas e dinâmicas. Além disso, é arquitetura
mais utilizada pela comunidade de desenvolvedores web.

Nesse modelo, o usuário interage com a camada view. A partir daí o

controlador coleta as informações e envia para o Model, que é o responsável
pelo processamento, e devolução de uma resposta. O controlador recebe
essa resposta, e notifica a camada view, validando a informação, fazendo
com que essa última, apresente a reposta ao usuário de forma visual.

O padrão MVC, além de ser a arquitetura mais utilizada entre os

desenvolvedores, o que gera uma comunidade muito forte, traz outras
vantagens e benefícios, que são:

Segurança, Organização, Eficiência, Tempo e Transformação.

Figura: Fonte: https://www.treinaweb.com.br/blog/o-que-e-mvc

 5. TECNOLOGIAS UTILIZADAS NA APLICAÇÃO

A aplicação utilizará as ferramentas e métodos de trabalho comuns para

este tipo de trabalho. O time de desenvolvimento, utilizará a metodologia ágil
Scrum, bastante utilizada pelos profissionais de TI, onde o projeto será
dividido em fases (Sprints), com participação bem ativa do cliente, para a
finalização de cada Sprint.
Utilizaremos a linguagem Java para o back-end(servidor), e para front-
end(cliente), será utilizado JS e Bootstrap., e o padrão de desenvolvimento
será o MVC(Model, View, Controller). Será utilizado os Scriplets do Java Web,
para as funções dinâmicas das páginas. O banco de dados será o Mysql.
6. ESBOÇO DA APLICAÇÃO

a. Versão Mobile
b. Versão Desktop
 7. WEBWRITING: O QUE É?

Depois que a internet virou uma vitrine, onde é possível vender e mostrar o
seu negócio para qualquer pessoa, em qualquer lugar do mundo, o marketing
digital surgiu e trouxe mudanças, que trouxeram o cliente para a internet, e hoje
já é uma realidade.
Toda essa evolução se deu graças a Webwriting, que promove conteúdos
de qualidade, de fácil entendimento e capazes de “segurar” os clientes nas
páginas de internet, promovendo produtos e serviços para os usuários. É
basicamente uma técnica de escrita web, com o objetivo de estruturar,
modernizar e entregar para o usuário a melhor experiência possível no quesito
de navegabilidade, levando em consideração principalmente o tamanho da tela
(responsividade).
Uma das condições de relevância do uso da técnica é o fato do algoritmo do
google, levar em consideração o uso ou não, fazendo com que os sites que
usam, terem maior visibilidade sendo colocados nas primeiras posições do
buscador.
Entre os elementos necessários para o uso da técnica são:

 Palavra-chave com volume de busca e relacionada ao negócio;

 Linguagem simples e de fácil entendimento;
 Objetividade;
 Didática;
 Links para outros conteúdos ou páginas relacionadas;
 Hashtags nas redes sociais;
 Acessibilidade (texto alternativo e legibilidade).

Todas essas ferramentas são essenciais para oferecer textos relevantes e

otimizados. Isso conquistará o público alvo, e ainda trará ótimos resultados
com o robô do google. Portanto, para o desenvolvedor é de extrema
importância criar suas aplicações, seguindo essa técnica, para que o resultado
(conquistar pessoas) seja alcançado entregando a melhor experiência possível
ao usuário.
 8. ARQUITETURA DE INFORMAÇÃO

O conceito de arquitetura, se deu pela evolução das páginas web. Esse

conceito nasceu na década de 70, com Richard Saul Wurman, um arquiteto e
designer gráfico americano, que trazia em seus livros a importância de
transformar dados em informações compreensíveis. A experiência do usuário,
considerando os conceitos de usabilidade e responsividade, fez com que o
desenvolvimento web trabalhasse em não só entregar o resultado esperado,
mas principalmente em como esse resultado é entregue ao usuário.

É justamente nesse cuidado com a navegabilidade que entra a arquitetura

de informação, que é responsável por organizar todos os elementos de uma
página na internet, aplicativo e softwares, para privilegiar a experiência do
usuário. Sem esse design de interação, seria impossível estabelecer uma
relação entre o usuário e a página visitada.

Esse conceito, não é restrito do mundo digital. A organização de uma

biblioteca por exemplo, separando por tipo de literatura, é também arquitetura
de informação. Mas quando se fala de arquitetura da informação em um
ambiente digital, design e desenvolvimento andam lado a lado e são correlatos,
afinal, de nada adianta termos uma aplicação bem estruturada no lado do
servidor e com robustez no seu banco de dados, se o aspecto visual do site
não facilita a navegação.

Dentro deste conceito podemos destacar alguns aspectos:

 Do abstrato ao concreto: a experiência do usuário começa no plano

abstrato, quando o produto ainda está sendo concebido e seus objetivos
estão sendo definidos, assim como o que o próprio usuário pode esperar
dele.
 Modelo mental: também conhecidos como mapa mentais, tem o objetivo
de organizar visualmente, seguindo uma lógica, determinadas
informações.
 Hierarquização: Organiza informações relacionadas ao mesmo assunto
agrupando em um rótulo, tornando o acesso é mais rápido, prático,
deixando o usuário confortável no acesso, sem deixar ele se perder.
 Fluxos de navegação: Independentemente do caminho, todos devem
ser curtos, rápidos e claros, para não confundir e tampouco frustrar a
experiência do usuário durante a navegação em sua interface.
Referências

BR MODELO – Construindo um modelo de banco de dados. Disponível em: <

https://www.youtube.com/watch?v=sItFiqAN5YY>. Acesso em: 09 de jun. de
2022.
HOSTMIDIA – O que é Mysql. Disponível em:<
https://www.hostmidia.com.br/blog/o-que-e-mysql/>. Acesso em: 13 de Ago. de
2022.
PODER 360 – Brasil ainda tem 355mi sem acesso a internet. Disponível em: <
https://www.poder360.com.br/tecnologia/brasil-ainda-tem-355-milhoes-de-
pessoas-sem-acesso-a-internet/>. Acesso em: 13 de Ago. de 2022.
Java Servlets & JSP [10] – Custom Error Pages. Disponível em: <
https://www.youtube.com/watch?v=w4hz0ouDVpU>. Acesso em: 13 de Ago. de
2022.
WEBLINK – O que é e como corrigir o erro 500. Disponível em: <
https://www.weblink.com.br/blog/artigos/o-que-e-e-como-corrigir-o-erro-500/>.
Acesso em: 13 de Ago. de 2022.
DESENVOLVIMENTO PARA WEB – API REST FULL, melhores práticas.
Disponível em: < https://desenvolvimentoparaweb.com/miscelanea/api-restful-
melhores-praticas-parte-1>. Acesso em: 13 de Ago. de 2022.
LEWAGON – O que é o padrão MVC. Disponível em: <
https://www.lewagon.com/pt-BR/blog/o-que-e-padrao-mvc>. Acesso em: 13 de
Ago. de 2022.
ATLASSIAN – Saiba como usar o SCRUM da melhor forma. Disponível em: <
https://www.atlassian.com/br/agile/scrum>. Acesso em: 13 de Ago. de 2022.
DIGITAL HOUSE – O que é arquitetura da informação e como aplica-la em
seus projetos. Disponível em: < https://www.digitalhouse.com/br/blog/o-que-e-
arquitetura-da-informacao-e-como-aplica-la-em-seus-projetos>. Acesso em: 13
de Ago. de 2022.
POST DIGITAL – O que é Webweiting. Disponível em: <
https://www.postdigital.cc/blog/artigo/o-que-e-webwriting>. Acesso em: 13 de
Ago. de 2022.
MLABS –Webweiting e seus segredos. Disponível em: <
https://www.mlabs.com.br/blog/webwriting-e-seus-segredos>. Acesso em: 13
de Ago. de 2022.