Atividade Contextualizada - Desenvolvimento de aplicações para internet

Prévia do material em texto

ATIVIDADE CONTEXTUALIZADA
DESENVOLVIMENTO DE APLICAÇÕES PARA INTERNET
José Adriano Ribeiro Alves
01390356
Superior de Tecnologia em Análise e Desensolvimento de Sistemas
APRESENTAÇÃO DAAPLICAÇÃO
A aplicação web da Panificadora Pão Amigo e Cia será feita com a tecnologia Java,
hospedando em um servidor Tomcat provido por uma empresa de hospedagem.
O frontend (interface do usuário) será construído em HTML e JSP, utilizando
também recursos feitos com CSS e Javascript.
A aplicação será desenvolvida com o conceito de “mobile first”, ou seja sera feito
todo o design para apresentação em telas de dispositivos móveis e depois adaptado para
telas maiores como as de notebook ou desktops, utilizando o conceito de interfaces
responsiva, ou seja adapta-se conforme o tamanho da tela em que será exibido.
Esta técnica de desenvolvimento mostra ou oculta elementos na página conforme a
resolução de tela que será visualizada, podendo também, dispor os elementos de forma a
melhor exibição do conteúdo, por exemplo: uma série de imagem que aparece na tela de
um monitor uma ao lado da outra, pode configurar-se em telas menores uma baixo da
outra de forma que não prejudique a experiencia do usuário, reduzindo tamanho de
imagens ou fontes.
Também será aplicada a técnica de lazy loading, que consiste em otimizar o
carregamento de páginas web deixando elementos com tamanho maior (entenda-se
tamanho pelo espaço ocupado pelo elemento em memória, medidos em bytes) como
imagens, para serem carregados conforme devem se exibidos no viewport (área visível da
tela). Isso faz com que o carregamento da página aconteça mais rápido.
As páginas serão construídas em HTML 5, seguindo todas as boas práticas do uso
do html semantico (marcações focados no sentido dos elementos), Scriplets JSP serão
utilizados para dar as funcionalidades dinâmicas as páginas.
APRESENTAÇÃO AMIGÁVEL DE ERROS
A fim de evitar que erros apareçam de forma não amigável para o usuário (página
padrão de erro da linguagem), será implantado também páginas de erros personalizadas
adicionando as páginas a diretiva <%@ page errorPage = "error.jsp" %> que em caso de
erro redireciona para a página personalizada para poder exibir o layout padrão da
aplicação com a mensagem obtida do erro e também instruções tanto para o usuário
voltar a navegação normal quanto para informar o erro aos administradores da aplicação.
AS URLS DAAPLICAÇÃO
A aplicação será organizada de forma a utilizar a navegação tanto através dos links
nas páginas como diretamente através das URLs (endereços utilizados para acessar a
página); Será contratado um dominio personalizado para a aplicacao:
“paoamigoecia.com.br” no qual apontará para a página inicial da aplicação, os demais
recursos podem ser acessados seguindo o padrao RESTful para URIs em que um recurso
pode ser acessado atraves de seu nome como em: paoamigoecia.com.br/paes ou
paoamigoecia.com.br/paes/doces.
Esta forma de agrupamento da informação tem haver com princípios de Arquitetura
da Informação, veja mais informações no tópico Arquitetura da Informação neste
documento.
ARQUITETURA DAAPLICAÇÃO
Sera utilizado a Arquitetura no padrão MVC de projetos que consiste em dividir a
aplicação em camadas com responsabilidades bem definidas, o padrão MVC é um dos
padrões de projeto mais utilizados na web.
Neste
padrão, as
requisições do
navegador do usuário (view/visão) são recebidas pelo controller (controlador) que contem
os métodos para encaminhar a solicitação para o model que contem as regras de negócio
da aplicação, é uma arquitetura muito confiável e eficiente, que permite separação de
responsabilidades (cada camada faz o que tem que ser feito) isso gera uma capacidade
de expansão do sistema grande além de facilitar a manutenção por qualquer programador
que entenda o padrão.
Figura 1: fonte: http://www.dsc.ufcg.edu.br/
TECNOLOGIAS UTILIZADAS NAAPLICAÇÃO
A equipe trabalhará com desenvolvimento utilizando a metodologia Scrum que
consiste em dividir a projeto em ciclos, dentro dos quais terão um conjunto de tarefas a
serem executadas, sempre interagindo com a equipe e com o dono do produto.
Será utilizado um padrão de projeto conhecido como MVC (model, view, controller)
muito utilizado na internet, a linguagem será o Java, o frontend utilizará do framework
bootstrap para ajudar na criação da interface do usuário, pois no bootstrap são utilizados
componentes pré moldados que podem ser facilmente implementados, reutilizados e
modificados.
O bootstrap foi originalmente criado para ser utilizado no Twitter mas rapidamente
ganhou fama e adesão por parte dos desenvolvedores por conta da sua facilidade e uso.
ESBOÇO DAAPLICAÇÃO
Figure 1 - Wireframe da página inicial versão mobile
Figure 2 - Wireframe da versão mobile
ESCRITA PARA WEB (WEBWRITTING) E ARQUITETURA DA
INFOMAÇÃO
Webwriting são várias técnicas voltadas para a criação e distribuição de conteúdo
na internet. Esse conteúdo pode ser em texto, imagens, vídeos, áudios, e mais outros
formatos. O campo de atuação é amplo e envolve aspectos de usabilidade, arquitetura da
informação, qualidade de conteúdo, SEO, gestão de conhecimento e etc. Como sabemos,
a leitura na internet é diferente da leitura em impressos.
Entre as tecnicas utiliizadas no webwriting podemos citar:
 SEO - Search Engine Optimization (Otimização para Mecanismos de Buscas);
 Uso de palavras chaves que façam referencia ao texto;
 Paragrafos curtos e com mais espaço para melhor leitura em dispositivos
eletronicos;
 Links no texto que façam sentido seu uso;
 Cuidados com a estrutura do texto como escolher bem titulos, subtítulos,
introducao e conclusão:
Quanto a Arquitetura da informação é uma parte extremamente importante do
processo de design de Experiecia de Usuário (UX design) e tem como base a
organização das informações dentro de um espaço visual.
AArquitetura da Informação visa organizar o conteúdo de sites e aplicativos através
de uma estruturação que possibilite aos usuários encontrar tudo o que precisam afim
sem muito esforço.
A Arquitetura da Informação consiste em encontrar o equilíbrio entre 3 dimensões:
usuário, conteúdo e contexto.
 Usuário: Possui necessidades, hábitos, comportamentos de busca de
informações, expectativas, experiência;
 Conteúdo: É formado por objetivos de conteúdo, tipos de documentos e dados,
volume e estrutura existente;
 Contexto: São os objetivos, a cultura, a tecnologia, a política, as
restrições, etc.
Seus componentes são:
 Sistemas de organização: São responsáveis por agrupar e categorizar a
informação.
 Sistemas de rotulagem: São responsáveis por especificar formas para
representar as informações;
 Sistema de navegação: São modelos de navegação responsáveis por orientar os
usuários sobre como se movimentar pelas informações;
 Sistemas de pesquisa: É um sistema com a função de ajudar o usuário a
pesquisar uma informação no website ou aplicativo.
BIBLIOGRAFIA
https://www.ibm.com/docs/pt-br/was/8.5.5?topic=applications-defining-uri-patterns-
resources-in-restful Acessado em 18/08/2021 9:15
https://www.ideiademarketing.com.br/2015/03/06/webwriting-saiba-o-que-e-e-como-
a-tecnica-pode-ajudar-a-posicionar-seu-site-na-web/ acesso em 20/08/2021 10:35
https://king.host/blog/2018/06/dicas-webwriting/ acesso em 20/08/2021 11:02
https://www.chiefofdesign.com.br/arquitetura-da-informacao/ acesso em 20/08/2021
11:15
https://www.ibm.com/docs/pt-br/was/8.5.5?topic=applications-defining-uri-patterns-resources-in-restful
https://www.ibm.com/docs/pt-br/was/8.5.5?topic=applications-defining-uri-patterns-resources-in-restful