Website com Sistema de Gerenciamento – Livraria Papelaria

Publicado em 05/02/2018

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RIO GRANDE DO SUL
CÂMPUS BENTO GONÇALVES

ALISSA TURCATTI
Bento Gonçalves, Outubro de 2017

Website com Sistema de Gerenciamento - Livraria Papelaria


DESENVOLVIMENTO DE UM WEBSITE COM SISTEMA DE GERENCIAMENTO PARA A LIVRARIA PAPELADA A PARTIR DAS DIRETRIZES DE ACESSIBILIDADE WEB


RESUMO


Este trabalho apresenta as atividades realizadas durante o estágio curricular obrigatório do curso técnico em Informática para Internet do IFRS - Câmpus Bento Gonçalves. Ao longo dos meses de abril a setembro foi desenvolvido um website com sistema de gerenciamento para a empresa Livraria Papelada Ltda, localizada
no município de Carlos Barbosa (RS).

Trabalhando-se com o framework CakePHP e utilizando como base as recomendações de acessibilidade do eMAG (Modelo de Acessibilidade em Governo Eletrônico) foi possível construir um sistema de gerenciamento completamente funcional, além de um website acessível a pessoas com deficiência ou alguma limitação, especialmente no que diz respeito à deficiência visual e condições como o daltonismo.

Ao final do processo de desenvolvimento, que compreendeu etapas como levantamento de requisitos, modelagem, implementação e testes, o sistema foi entregue à responsável pela Livraria Papelada, sendo então oferecido um treinamento para que ela pudesse utilizá-lo com mais facilidade.

Assim, a empresa passou a contar com uma nova ferramenta para divulgar seus produtos e promoções, o que contribuirá significativamente para o crescimento da marca no segmento de livraria e papelaria.

Palavras-chave: Website. Acessibilidade. CakePHP. Livraria

LISTA DE FIGURAS
Figura 1: Exemplo de código HTML com níveis de títulos utilizados corretamente
Figura 2: Exemplo de código HTML com descrição da imagem no atributo alt
Figura 3: Parte do código HTML de um formulário com campo obrigatório
Figura 4 (a): Site em seu esquema de cores original
Figura 4 (b): Site com esquema de cores gerado através do recurso de alto contraste
Figura 5: Esquema demonstrando a interação entre as camadas na arquitetura MVC
Figura 6: Diagrama de Casos de Uso do sistema
Figura 7: Parte superior do website, destacando o menu e as opções de acessibilidade
Figura 8: Exemplo de página inicial quando há um banner cadastrado
Figura 9: Página inicial com as categorias de produtos
Figura 10: Seção de produtos em destaque da página inicial e rodapé
Figura 11: Página de história da Livraria Papelada com galeria de fotos
Figura 12: Página contendo o formulário de contato e mapa
Figura 13: Página interna de Livros
Figura 14: Formulário de alteração de dados pessoais
Figura 15: Código exemplificando a utilização do componente Qimage
Figura 16: Listagem de livros cadastrados e opções de gerenciamento
Figura 17: Exemplo de link construído com HtmlHelper no CakePHP
Figura 18: Código para construção de um formulário utilizando FormHelper no CakePHP
Figura 19: Ordenação da listagem de produtos na página Livros
Figura 20: Listagem de artigos de papelaria com desconto em todos os produtos
Figura 21: Listagem de artigos de papelaria com desconto em alguns produtos
Figura 22: Produtos com desconto na página de papelaria do site
Figura 23: Formulário de cadastro do banner promocional
Figura 24: Código para exibição do Element pesquisa

LISTA DE QUADROS
Quadro 1: Cronograma de atividades do estágio
Quadro 2: Requisitos funcionais do sistema
Quadro 3: Requisitos não funcionais do sistema
Quadro 4: Regras de negócio do sistema
Quadro 5: Detalhamento do caso de uso Manter Livros
Quadro 6: Detalhamento do caso de uso Manter Banner
Quadro 7: Detalhamento do caso de uso Manter Promoções de Livros

LISTA DE SIGLAS
ASES Avaliador e Simulador de Acessibilidade em Sítios
CAPTCHA Completely Automated Public Turing test to tell Computers and
Humans Apart
CRUD Create, Read, Update, Delete
CSS Cascading Style Sheets
CTP CakePHP Template
eMAG Modelo de Acessibilidade em Governo Eletrônico
ER Entity-Relationship
HTML Hypertext Markup Language
IFRS Instituto Federal de Educação, Ciência e Tecnologia do Rio Grande do Sul
JAWS Job Access with Speech
MIT Massachusetts Institute of Technology
MVC Model, View, Controller
NVDA NonVisual Desktop Access
PHP Hypertext Preprocessor
RF Requisitos Funcionais
RN Regras de Negócio
RNF Requisitos Não Funcionais
TA Tecnologia Assistiva
UC Use Case
W3C World Wide Web Consortium
WAI Web Accessibility Initiative
WCAG Web Content Accessibility Guidelines
WWW World Wide Web

SUMÁRIO
1 INTRODUÇÃO
1.1 METODOLOGIA
1.2 CRONOGRAMA
2 REFERENCIAL TEÓRICO
2.1 WEBSITE
2.2 ACESSIBILIDADE WEB
2.3 TECNOLOGIA ASSISTIVA
2.3.1 Leitor de Tela
2.3.2 Recurso de Alto Contraste
2.4 FRAMEWORK CAKEPHP
3 DESENVOLVIMENTO
3.1 FASE DE ANÁLISE E MODELAGEM
3.2 FASE DE IMPLEMENTAÇÃO
3.2.1 Concepção do layout para o website
3.2.2 Programação do sistema de gerenciamento
3.2.3 Integração do sistema de gerenciamento com o website
3.3 FASE DE TESTES
4 CONSIDERAÇÕES FINAIS
REFERÊNCIAS
APÊNDICE A - DIAGRAMA ER

1 INTRODUÇÃO


O processo de globalização, intensificado na metade do século XX devido aos crescentes avanços técnico-científicos nos meios de comunicação e transportes, trouxe consigo diversas mudanças em esferas políticas, sociais, culturais, e, principalmente, econômicas.

As inovações possibilitaram, além de uma maior integração entre países e pessoas ao redor do mundo, a criação de um “mercado globalizado”, o qual tornou possível a comercialização de produtos e serviços para além das fronteiras nacionais.

Criou-se, assim, um contexto de alta competitividade, no qual pequenas empresas precisam concorrer não somente com as empresas locais, mas também com outras vindas de todas as partes do mundo.

O crescimento da Internet, especialmente da World Wide Web (WWW), contribuiu de maneira significativa para a consolidação do mercado globalizado, na medida em que possibilitou a criação dos websites, ou seja, um conjunto de páginas relacionadas a um determinado assunto, organização, instituição, empreendimento ou corporação com diferentes finalidades.

Eles fornecem um canal eficiente de comunicação entre a empresa e seus clientes, aumentam a visibilidade dos serviços ou produtos oferecidos por ela, representam um diferencial em relação às concorrentes, e ainda podem ser utilizados como uma ferramenta para o comércio virtual (os chamados e-commerce).

Todas essas vantagens contribuíram para o crescimento do número de empresas com website próprio no Brasil, que segundo a décima primeira edição da pesquisa TIC Empresas, chegou a 57% em 2015, apresentando uma variação considerável de acordo com o porte: dentre as grandes empresas, esse número é de 87%, chegando aos 75% nas médias empresas, e caindo para 52% nas pequenas e microempresas (CETIC, 2016).

A diferença nos números pode ser explicada pelo fato de que as maiores empresas costumam possuir mais recursos para investimento em comunicação, marketing digital e vendas pela Internet, enquanto que as redes sociais, por serem mais acessíveis em relação a um website, acabam se tornando a alternativa mais comum às empresas de médio e pequeno porte.

Portanto, um website próprio representa um diferencial ainda maior quando pertence a uma pequena empresa.

Atenta a esses fatos, a Livraria Papelada Ltda., uma microempresa localizada no município de Carlos Barbosa (RS), observou a necessidade de ampliar as formas de comunicação com seus clientes e a participação no espaço virtual utilizando outros meios além das redes sociais. Cousseau (2010, p. 43), aponta que

A Livraria Papelada investe pouco em comunicação. Fica clara a necessidade de mudança neste sentido, para que a empresa possa obter os benefícios de um bom plano de comunicação, como o reconhecimento da marca e o aumento das vendas.

Nesse sentido, um website caracteriza-se como a ferramenta mais vantajosa, uma vez que permite a divulgação ampla da marca e seus produtos, e atualmente nenhuma das outras empresas da cidade atuantes no mesmo ramo conta com website próprio.

A partir disso, foi realizado na Livraria Papelada o estágio curricular obrigatório do curso Técnico em Informática para Internet, onde trabalhou-se na análise e implementação de um website com sistema de gerenciamento, utilizando-se como base as diretrizes de acessibilidade Web estabelecidas pelo eMAG (Modelo de Acessibilidade em Governo Eletrônico).

1.1 METODOLOGIA


As atividades referentes ao desenvolvimento do sistema foram organizadas com base nas etapas estabelecidas pelo modelo cascata, podendo ser divididas em levantamento de requisitos, modelagem, implementação, testes, e por fim a entrega acompanhada de treinamento para os clientes.

Além disso, dedicou-se um período anterior ao início do desenvolvimento para aprendizagem do funcionamento do framework CakePHP, e também para leitura do eMAG 3.1.

Os requisitos do software foram definidos através de conversas com a responsável pela Livraria Papelada, e, após essa etapa inicial, prosseguiu-se para a fase de modelagem, que consistiu na produção do diagrama de casos de uso, diagrama ER e detalhamento de alguns casos de uso principais.

Em seguida, iniciou-se a implementação do sistema, com a linguagem PHP (Hypertext Preprocessor) para programação, HTML (HyperText Markup Language) para marcação, CSS (Cascading Style Sheets) para estilização e JavaScript para manipulação do comportamento. Para fins de clareza e organização do relatório, a fase de implementação foi dividida em outras três etapas: concepção do layout do website, programação do sistema de gerenciamento e integração do sistema de gerenciamento com o website.

Os testes de usabilidade, segurança e acessibilidade foram realizados na quarta etapa por meio de verificações das funcionalidades do sistema e de um checklist específico referente às questões de acessibilidade.

Nos testes de acessibilidade, além do checklist utilizou-se um software Leitor de Tela, uma ferramenta online para análise das relações de contraste e o validador ASES.

Por fim, o sistema foi entregue à responsável pela Livraria, sendo oferecido um treinamento para melhor utilização de seus recursos e funcionalidades.

1.2 CRONOGRAMA


O estágio curricular ocorreu entre os meses de abril e setembro de 2017, conforme mostrado no Quadro 1. O cronograma organiza as etapas apresentadas anteriormente de acordo com o mês em que foram realizadas, além da escrita do relatório de estágio, que acompanhou todas as demais atividades.

Cronograma de atividades do estágio

2 REFERENCIAL TEÓRICO


Para que seja possível compreender o conteúdo abordado ao longo do relatório e os conceitos aplicados ao desenvolvimento do sistema, é necessário primeiramente apresentá-los com base em estudos especializados da área.

A seguir são apontadas ideias importantes relacionadas aos tópicos norteadores do trabalho, como o conceito de Website e algumas classificações existentes, as dimensões da Acessibilidade Web, as aplicações dos recursos de Tecnologia Assistiva, e o funcionamento do framework CakePHP.

2.1 WEBSITE


A partir do momento em que a Internet, a Web e os Websites passaram a fazer parte do cotidiano das pessoas, esses termos tornaram-se tão comuns quanto os recursos, e, devido às diferenças mais técnicas do que práticas, acabaram sendo tratados popularmente como sinônimos.

No entanto, a nível conceitual estabelece-se uma diferença entre os termos Internet e Web, e também entre os termos Web e Website.

De acordo com Rocha (2000, p. 5, grifo do autor)

[...] os termos Web e Internet não são sinônimos. A World Wide Web é o nome do serviço mais popular da Internet. Por esse motivo, é frequentemente confundida com a própria Internet.

Internet, por sua vez, é o nome dado ao conjunto de computadores, provedores de acesso, satélites, cabos e serviços que formam uma rede mundial baseada em uma coleção de protocolos de comunicação conhecidos como TCP/IP.

É possível perceber, portanto, que a Web é parte da Internet, mas não corresponde a ela. No que se refere aos termos Web e Website, pode-se considerar que a Web é composta principalmente por aplicações e Websites, também chamados simplesmente de sites, geralmente acessados por meio de um navegador ou browser, como o Google Chrome, Mozilla Firefox ou Internet Explorer.

Os websites apresentam estrutura e conteúdo adequados à finalidade para a qual foram construídos, de acordo com o perfil dos seus usuários e as necessidades da empresa, instituição, comunidade ou do indivíduo responsável por eles.

MacDonald (2010) apresenta uma classificação para os diferentes tipos de websites existentes, categorizando-os em sites pessoais, blogs, sites temáticos, sites de currículos, sites de evento, sites de promoção e sites de pequenas empresas (ou de comércio eletrônico).

De acordo com essa classificação, o website desenvolvido no estágio enquadra-se como um site de promoção, visto que pretende-se utilizá-lo essencialmente para divulgação dos produtos da Livraria Papelada.

Já Hoffman et al. (1995 apud CEBI, 2012) propõe uma classificação específica para websites comerciais, composta pelas seis categorias elencadas a seguir:

●Sites de lojas online que oferecem possibilidade de venda através de um catálogo eletrônico;

●Sites de empresas que desejam possuir uma presença virtual, divulgando informações sobre si e os serviços/produtos que ela oferece;

●Sites com conteúdo pago (o provedor fornece e/ou paga pelo conteúdo enquanto o consumidor paga para acessá-lo), sites patrocinados, entre outros;

●Centros comerciais que constituem uma coleção de lojas online;

●Sites que representam uma forma de publicidade com potencial para atrair clientes;

●Sites de busca que utilizam palavras-chave para realizar uma pesquisa em banco de dados e indicar outros sites.

Considerando o critério de classificação anterior para o website da Livraria Papelada, a categoria que contempla os sites de empresas com objetivo de possuir uma presença virtual apresenta-se como a mais adequada.

Assim, embora diferentes autores tenham encontrado maneiras próprias para agrupar em categorias websites com características semelhantes, nota-se que é possível encontrar com certa frequência uma categoria voltada a websites cujo objetivo maior é a divulgação ou promoção de uma empresa, serviço ou produto.

2.2 ACESSIBILIDADE WEB


O crescimento da Web representou um avanço para as comunicações na medida em que contribuiu para a construção de um mundo cada vez mais interligado, onde os diversos tipos de informação e serviços encontram-se disponíveis para todos em um único espaço.

Assim, a Web pode ser entendida como uma importante ferramenta inclusiva, uma vez que visa a universalização do acesso e busca possibilitar a utilização, criação, divulgação, e o compartilhamento dos conteúdos e recursos encontrados nela de maneira simples e rápida (ROCHA; DUARTE, 2012).

No entanto, apesar da Web ter como um de seus princípios fundamentais possibilitar o acesso facilitado à informação e aos conteúdos disponíveis no meio digital, ainda hoje é bastante comum que algumas pessoas acabem sendo excluídas dessa realidade.

É o caso, por exemplo, de grande parte das pessoas com deficiência ou alguma limitação, que costumam encontrar muita dificuldade para acessar, operar e compreender os recursos digitais.

Dessa forma, a ferramenta perde sua característica inclusiva original, uma vez que não pode ser utilizada por todos os grupos, e torna-se o principal fator causador da exclusão sociodigital.

É essencial, portanto, que maneiras para a formação de uma Web capaz de atender a diferentes necessidades sejam pensadas e discutidas (SANTAROSA, 2010).

A fim de promover a inclusão social e garantir que a parcela da população composta por pessoas com deficiência também faça parte da nova sociedade criada em torno da tecnologia e da Internet, criou-se o conceito de Acessibilidade Virtual, caracterizado em Sonza et al. (2013, p. 313, grifo do autor) por “oferecer
informações e serviços em meios virtuais de modo igual a todas as pessoas, independente do tipo de usuário (PNEs [Pessoas com Necessidades Especiais], idosos, entre outros)”.

De acordo com os autores, os meios virtuais citados englobam a Internet, softwares e sistemas computacionais, ou outros equipamentos de tecnologia.

Dentro da Acessibilidade Virtual, há também o conceito de Acessibilidade na Internet, voltado para a aplicação da acessibilidade virtual em um de seus meios específicos: a Web.

Atualmente, a forma como o conteúdo disponibilizado na Web deve ser criado é determinada pelo W3C (World Wide Web Consortium), um comitê internacional responsável pela elaboração de padrões ou diretrizes a serem seguidos por desenvolvedores Web do mundo inteiro. Segundo o escritório brasileiro do W3C, a acessibilidade Web pode ser entendida como:

[...] a possibilidade e a condição de alcance, percepção, entendimento e interação para a utilização, a participação e a contribuição, em igualdade de oportunidades, com segurança e autonomia, em sítios e serviços disponíveis na web, por qualquer indivíduo, independentemente de sua capacidade motora, visual, auditiva, intelectual, cultural ou social, a qualquer momento, em qualquer local e em qualquer ambiente físico ou computacional e a partir de qualquer dispositivo de acesso (W3C BRASIL, 2013).

Dessa forma, uma Web acessível deve ser composta por websites, sistemas, e outras aplicações desenvolvidas de…

É esse o conteúdo que você precisa?
Faça seu login e saiba como ver o trabalho completo

O Zé Moleza facilita sua vida acadêmica ajudando você em suas pesquisas, e a economizar o seu tempo e o seu dinheiro nos seus trabalhos de faculdade. São mais de 26144 pesquisa acadêmicas entre elas, monografia, temas de monografias, TCC, modelos de monografias, trabalhos de universidades, resenha, Paper, Ensaio, Bibliografia, Trabalhos Escolares.

Dicas de como fazer: Capa de Monografia, capa de TCC, Regras da ABNT, como fazer monografia, como fazer Projeto Final, como fazer seminário, como fazer capas, referências bibliográficas, modelo de monografia.

O Zé Moleza NÃO faz a venda de monografia e É TOTALMENTE CONTRA a compra de monografia pronta e trabalhos prontos. O Zé Moleza NÃO auxilia a quem compra monografia, NÃO apóia a quem quer comprar Trabalhos Prontos, e NÃO APROVA a quem quer comprar TCC prontos, dando dicas de formatação, regras da ABNT, dando sugestões de temas para monografia, resumo de livros, projeto de pesquisa, projeto de mestrado, projeto de pós-graduação, trabalhos acadêmicos, incentivando o usuário a desenvolver por conta própria sua monografia.