Arquitetura de Informação Web

Transcrição

1 Yanick Avelino Borges Mendonça Arquitetura de Informação Web Universidade Jean Piaget de Cabo Verde Campus Universitário da Cidade da Praia Caixa Postal 775, Palmarejo Grande Cidade da Praia, Santiago Cabo Verde

2

3 Yanick Avelino Borges Mendonça Arquitetura de Informação Web Universidade Jean Piaget de Cabo Verde Campus Universitário da Cidade da Praia Caixa Postal 775, Palmarejo Grande Cidade da Praia, Santiago Cabo Verde

4 Eu, Yanick Avelino Borges Mendonça, autor da monografia intitulada Arquitetura de Informação Web - Desenvolvimento de um Herbário Digital para INIDA, declaro que, salvo fontes devidamente citadas e referidas, o presente documento é fruto do meu trabalho pessoal, individual e original. Cidade da Praia ao 30 de Dezembro de 2014 Yanick Avelino Borges Mendonça Memória Monográfica apresentada à Universidade Jean Piaget de Cabo Verde como parte dos requisitos para a obtenção do grau de Licenciatura em Engenharia de Sistemas e Informática. i

5 Agradecimentos A Deus, pois sem Ele nada seria possível. Agradeço a minha mãe, meus familiares, amigos e colegas pelo incentivo, apoio, encorajamento e compreensão nas horas difíceis e pela força desde o início da minha formação. Agradeço ao meu orientador professor Mestre Juvenal Pereira, quem gostaria de ser discípulo eternamente, por me ter acompanhado, disponibilizado tempo para a realização deste trabalho, pelo incentivo, apoio, empenho, criticas, sugestões e correções construtivas ao longo do trabalho. Agradeço a minha namorada Jandira da Veiga pelo apoio, força, incentivo e confiança que depositou em mim durante todo esse período. Agradeço a todos os meus professores desde o ensino básico até hoje pela força, empenho, críticas e sugestões. Finalmente agradeço ao Instituto de Investigação e Desenvolvimento Agrário (INIDA) que contribuiu muito para a realização desse trabalho. ii

6 Resumo O presente trabalho que se intitula Arquitetura de Informação Web - Desenvolvimento de um Herbário Digital para INIDA debruça sobre a importância das metodologias, ferramentas e técnicas utilizadas para conceber Arquiteturas de Informação para Sistemas de Informação baseadas na Web e, como caso pratico, apresenta uma abordagem pratica para a construção de um Herbário Digital para essa mesma instituição. A Arquitetura de Informação Web (AI Web) é responsável pela estruturação, organização, distribuição e manutenção da informação de um Website ou aplicação Web e não só por isso, mas também é importante para garantir a não-sobrecarga e desperdício de tempo na procura da informação. Desenvolver uma AI Web não é tão fácil, embora não seja preciso ser um especialista no assunto para desenvolver uma aplicação Web. Contudo, os desenvolvedores devem estar aptos para identificar e resolver problemas de recolha, organização e representação das informações, buscando adequar a realidade aos ambientes informacionais às necessidades dos utilizadores finais. Palavras-chave: Arquitetura de informação Web, modelação de informação e segurança da informação. iii

7 Absctract This work is entitled "Web Information Architecture - Development of a Digital Herbarium for INIDA" focuses on the methodologies importance, tools and techniques used to design architectures for information systems and Web-based information, such as practical case presents practice an approach to the construction of a Digital Herbarium to INIDA. The Web Information Architecture (Web IA) is responsible for the structuring, organization, distribution and maintenance of information in a Website / Web application. Not only that, but it is also important to ensure no overhead and wasted time searching for the information. Developing an Web IA is not so easy, although it is not necessary to be an expert on the subject to develop a Web application. However, developers should be able to identify and solve problems in collection, organization and representation of information, seeking to adapt reality to informational needs of end-users environments. Keywords: Web information Architecture, information modeling and information security. iv

8 Conteúdo Introdução Capítulo 1 Arquitetura de Informação O conceito de Informação O conceito de Arquitetura de Informação Web Objetivo da arquitetura de informação Web Importância da Arquitetura de Informação Web Componentes da Arquitetura de Informação Web Arquitetura de informação para a Web e a sua representatividade Modelação de Informação Modelo Orientado por Objetos Modelo Entidade Relação Base de Dados Relacionais o MySQL O MySQL Importância da modelação de dados Capítulo 2 Plataformas Web Arquitetura de Aplicações Web Linguagens de programação Web HTML CSS JQuery Segurança das aplicações Web Segurança a nível de conexões Web Vulnerabilidades de aplicações Web SQL injection Brocken Authentication and session Cross-site Script (XSS) Insecure direct object references Security Misconfiguration Sensetive Data Exposure v

9 Missing Function Level access control Cross-site Request Forgery (CSRF) Using Component with known vulnerabilities Unvalidated Redirects and Forwards Capítulo Enquadramento Levantamento de requisitos Modelação do Herbário Digital Diagrama de Use Case Diagrama de Classes Diagrama de Sequencia Modelo Entidade Relação Desenvolvimento Web Definição do Wireframe do Herbário Digital Definição da estrutura de navegação Mapas do Website Codificação do Herbário Digital Desenvolvimento da camada de dados em MySQL Desenvolvimento da Camada de Apresentação Integração da camada de apresentação com a camada de dados em MySQL Testes e produção Considerações finais e recomendações Conclusão Bibliografia Apêndice A.1 Guia de Entrevista de Levantamento de Dados A.2 Definição da Camada de Dados em mysql vi

10 Figuras Ilustração 1: Nível hierárquico da informação Ilustração 2: Página Web com todos os componentes de uma AI Web Ilustração 3: Exemplo de Um Diagrama de Use Case Ilustração 4: Exemplo de uma agregação Ilustração 5: Exemplo de um Diagrama de Classe Ilustração 6: Principais símbolos utilizados em diagramas de sequência Ilustração 7:Exemplo da Diagrama de Sequencia Ilustração 8: Exemplo de uma entidade e seus atributos Ilustração 9: Símbolos utilizados em um DER para representarem as entidades e atributos Ilustração 10:Auto relacionamento Ilustração 11: Exemplo do modelo de 2 camadas Ilustração 12: Exemplo de um modelo de 3 camadas Ilustração 13: Exemplo de uma arquitetura 4 camadas Ilustração 14: Exemplo da arquitetura de N camadas Ilustração 15: Exemplo de solução para versões anteriores ao IE Ilustração 16: Diagrama Use case da Biblioteca Digital Herbário Ilustração 17: Diagrama de classe da Biblioteca Digital Ilustração 18: Diagrama de sequência para requisito o adicionar espécies Ilustração 19: Diagrama de sequência para o requisito atualizar espécie Ilustração 20: Diagrama de sequência para o requisito remover espécie Ilustração 21: Diagrama de sequência adicionar espécie em extinção Ilustração 22: Diagrama de sequência para o requisito consultar espécie Ilustração 23:Diagrama de sequência pesquisar espécie Ilustração 24: Diagrama E-R da Biblioteca Digital Ilustração 25: Wireframe página principal herbário Ilustração 26: Wireframe com conteúdo das espécies por família Ilustração 27: Wireframe para as páginas de administração Ilustração 28: Mapa do Website para as páginas do lado cliente Ilustração 29: Mapa do Website para as páginas do lado servidor Ilustração 30: Página inicial do Herbário (lado cliente) vii

11 Tabelas Tabela 1: Propriedades novas do CSS viii

12 Siglas/Abreviaturas API AI AJAX ANAC BD BDR CDN CSRF C/S CSP CSS DER ER GPL HTML HTTP HTTPS Application Programming Interface Arquitetura de Informação Asynchronous JavaScript And XML Agencia Nacional das Comunicações Base de Dados Base de Dados Relacional Content Delivery Network Cross-site Request Forgery Cliente Servidor Content Security Policy Cross Style Sheet Diagrama entidade Relação Entidade Relacionamento General Public Licence Hypertext Markup Language Hypertext Transfer Protocol Hypertext Transfer Protocol Secure IE9 Internet Explorer 9 INIDA LES OWASP PHP PUC-RIO SGBD SGBDR SQL Instituto Nacional de investigação e Desenvolvimento Agrário Laboratório de Engenharia de Software Open Web Application Security Project Foundation Hypertext Preprocessor Pontifica Universidade Católica de Rio de Janeiro Sistema de Gestão de Banco de Dados Sistema de Gestão de Banco de Dados Relacional Structured Query Language 9/99

13 TI TCP/IP XSS Tecnologia de Informação Transmission Control Protocol/Internet Protocol Cross-site Script 10/99

14 Introdução A área da Arquitetura da Informação (AI) tem sido um campo fértil e várias definições são baseadas nas práxis, total ou parcialmente sem fundamentos epistemológicos e científicos, em que cada ator envolvido procura apresentar ferramentas, técnicas e conceitos, com base em sua própria perspetiva e formação pessoal, que considera as mais adequadas, isso na perspetiva de Pessoa (2011) que também considera que a expressão AI foi empregue por volta de 1976 pelo arquiteto Richard Saul Wurman, originalmente com vistas a tratar a informação com base numa conceção de ciência e arte. Falar da AI implica falar de informação que é hoje considerada como um dos recursos mais importantes de uma organização (e não só, de qualquer individualidade também) contribuindo para uma maior ou menor competitividade. Pois sabe-se que com as mudanças tecnológicas e o aumento da concorrência tornou-se vital melhorar a capacidade de decisão nas organizações isso só é possível tendo informações adequadas no momento certo para uma tomada de decisão eficiente e eficaz. É possível presenciar que, a inovação no sector de Tecnologia de Informação (TI) tem influenciado bastante a sociedade fazendo com que muitas transformações se ocorram a nível 11/99

15 individual e coletivo. Essas tecnologias mudam a forma como trabalhamos, aprendemos e comportamos segundo (Pontifica Universidade Católica de Rio de Janeiro [PUC-RIO], 2008) e (Robredo, 2008). É notável que hoje em dia as empresas estão a evoluir muito rapidamente de forma a atingir os seus objetivos. Por outro lado em concordância com Jansen et al. (2005) é possível verificar que, as empresas estão a evoluir para que possam manter a concorrência, para sobreviver no mercado mas também porque os clientes estão a globalizar-se os seus próprios negócios. Com toda mudança a acontecer as empresas ou corporações, elas têm de continuar a procurar melhores e mais eficazes formas de manter a concorrência e principalmente de satisfazer os seus clientes. Entendemos que para isso, é fundamental ter uma arquitetura de sistemas de informação bem definida e alinhada que dê resposta a todos e cada um dos requisitos de negócios atuais, devido a grande quantidade de informação com a qual as organizações e os indivíduos do nosso século lidam todos os dias e a rápida tendência para mudança de dia para dia. Assim sendo, deve-se acompanhar essa dinâmica e estabelecer novos canais de comunicações e interações com os nossos parceiros/players. É claro que na nossa era não se pode viver ou estar desconectado, sem a informação, basta ver o numero cada vez mais crescente de acessos à Internet e aos dispositivos moveis, este ultimo com taxas de penetração quase que a 100% segundo os dados da (Agencia Nacional das Comunicações [ANAC]) 1, mas o mesmo se verifica em todas as estatísticas de telecomunicação a nível global, portanto requer-se cada vez mais informações e não podemos estar mais sem elas; podemos até afirmar que estamos perante o excesso dela, pelo que se torna agora importante saber lidar com esse excesso e procurar certezas (nem toda a informação disponível é valida, certa e integra), o que por si só, pode-se tornar num problema. A cada dia que passa, nota-se que a Web está a tornar-se maior, muitas informações e conteúdos são publicados, muitos provenientes de fontes credíveis, outros nem por isso, daí que, segundo Robredo (2008), é cada vez mais difícil encontrar informação pertinente na Web 1 [visto: 05/11/2014] 12/99

16 e é muito importante que as informações estejam bem estruturadas e organizadas permitindo o melhor conhecimento. De uma forma geral, o presente trabalho debruça-se sobre a problemática da AI como uma necessidade de ter a informação estruturada, validada, disponível, acessível e bem organizada, pois não importa apenas que a informação esteja disponibilizada mas também que ela esteja bem projetada. Objetivo geral: O objetivo geral deste trabalho é investigar sobre os fundamentos da arquitetura de informação Web, aplicando tais fundamentos/princípios na conceção e desenvolvimento de um Herbário Digital para o INIDA Objetivos específicos: Realizar revisão bibliográfica com intuito de abordar uma breve resenha dos estudos relacionados a esse tema: AI e plataformas Web; Efetuar o levantamento dos requisitos no INIDA; Criar modelos de dados e AI com base no levantamento de requisitos; Implementar esses modelos utilizando linguagens e ferramentas Web modernas para o efeito; Realização de testes e colocação em produção; Metodologia: A metodologia utilizada na elaboração do trabalho baseia-se na utilização de referências bibliográficas tais como livros, artigos e Websites que versam teoricamente sobre o tema escolhido. Esse aspeto é importante para o aprofundamento do conhecimento sobre o assunto. 13/99

17 Após o fundamento teórico, procede-se com o levantamento de dados, aspeto fundamental para a conceção da AI e o desenvolvimento do Herbário Digital como caso prático. No levantamento de dados, a entrevista foi a metodologia escolhida para recolher os requisitos do sistema, tanto funcionais, como a nível de dados as questões colocadas na entrevista encontram-se em Apêndice A.1. Com base no levantamento dos requisitos, procedeu-se ao desenvolvimento da AI para o Herbário Digital, começando pela modelação de dados através dos vários diagramas utilizados para o efeito, conforme a fundamentação teórica apresentada no ponto 1.3. Na sequência, a partir dos modelos de dados produzidos, procedeu-se ao desenvolvimento do wireframe, sendo este um esquema básico da interface do Herbário Digital que sugere a sua estrutura (ver 3.5.1). O passo seguinte consistiu no desenvolvimento da AI Web para o Herbário Digital, onde se apresenta o mapa do Website, incluindo as relações entre as páginas e as informações disponibilizadas, assim como a sua estrutura de navegação, etc (ver 3.5.2). Toda a modelação e conceção arquitetural foram feitas com a Microsoft Visio 2010 e o DBDesigner, versão 4, pois essas ferramentas são de facil utilização, popularmente conhecida e adequada para tarefas do tipo, conforme Aguilar (2010). A fase seguinte foi a de codificação. Nesta etapa do desenvolvimento do projeto Herbário Digital utilizou-se o Adobe Dreamweaver CSS6, sendo uma ferramenta que permite desenvolver scripts Hypertext Markup Language (HTML), versão 5, Cross Style Sheet (CSS), versão 3, Hypertext Preprocessor (PHP) e JavaScript. Segundo Oliveira (2012) a sua interação com o HTML5 e CSS3 possibilita a criação de layouts interativos e dinâmicos. Mas também ainda o mesmo autor refere que essa ferramenta conta com outros recursos como, suporte de transferência de arquivos via FTP, integração ao Adobe Business Catalyst, suporte a jquery Mobile, PhoneGap (ver 3.5). Depois de ter a solução desenvolvida, seguiu-se para a fase de teste. Todo o teste foi feito pelo Engenheiro Carlos Vasconcelos. 14/99

18 Organização e Estruturas: Este trabalho encontra-se estruturado da seguinte forma, tendo em conta os pontos/estruturas fundamentais: Introdução onde se faz o enquadramento geral do trabalho, uma abordagem geral sobre o tema em estudo, apresentando o seu objetivo e metodologia de desenvolvimento. Cap1 Arquitetura de Informação onde se apresentam os principais conceitos relacionados com a temática fundamental desta memória monográfica que é a AI. Neste capítulo ainda são apresentados as principais técnicas de modelação de dados, sendo este assunto de muita importância no aprovisionamento da AI que se propõe desenvolver para o Herbário Digital. Cap2 Plataformas Web onde se apresentam uma abordagem genérica sobre arquitetura das aplicações Web, as principais linguagens e técnicas usadas no desenvolvimento Web, focado nos aspetos modernos e princípios de segurança recomendáveis para um bom desenvolvimento Web que será posto em prática no desenvolvimento da aplicação objeto do caso prático. Cap3 Desenvolvimento de um Herbário Digital para o INIDA neste capítulo o caso prático proposto ganha forma com aplicação dos conceitos teóricos introduzidos nos capítulos anteriores. Conclusão apresentação das principais conclusões sobre aquilo que tinha sido proposto realizar e de uma forma geral sobre o tema. 15/99

19 Capítulo 1 Arquitetura de Informação 1.1 O conceito de Informação A informação, segundo Moresi (2000), são dados transformados de forma que geram hipóteses, consequências das hipóteses, sugerem soluções para problemas, explanação e justificativas de sugestões, e críticas dos argumentos. Contudo, pode-se ainda entender o conceito da mesma como a transmissão de mensagens racionais que revelam as relações e os padrões existente nos dados apresentados segundo (PUC-RIO, 2008). Assim como podemos ver a informação é um termo muito ambíguo, pois não há muita concordância sobre o seu significado (ou seja, não há uma definição absoluta e única) na medida em que a sua definição depende de um contexto. Todavia percebemos em qualquer definição a respeito que a informação é o resultado de processamento/tratamento de um conjunto de dados dentro de um determinado contexto, de forma que permite a tomada de decisão. Por outras palavras, pode-se entender que a informação, são dados organizados e estruturados de forma útil. 16/99

20 Ao falar da informação, é de referir que a mesma, apresenta deferente nível hierárquico: Ilustração 1: Nível hierárquico da informação Fonte: adaptado (Moresi, 2000) Dados pertencem ao nível mais baixo da hierarquia, pois incluem os itens que representam os factos, gráficos e imagens estáticas de acordo com Moresi (2000) que indica ainda, que dados são recolhidos por meio dos processos organizacionais, nos ambientes internos e externos. Contudo, eles são sinais de que não foram processadas, integradas, avaliadas e correlacionadas, segundo Pereira (1998) que ainda afirma que, podemos dizer que dados são matérias-primas que podem ser transformados em informação. O nível seguinte é a informação. Neste nível, os dados passam por algum tipo de processamento ou transformações para serem exibidos de uma forma clara, compreensível, e atualizada às pessoas que irão utilizá-los de acordo com Moresi (2000), que indica ainda 17/99

21 como próximo nível o conhecimento, que pode ser definido como sendo, informações que foram analisadas e avaliadas sobre a sua confiabilidade, sua relevância e sua importância. O nível mais alto é a inteligência. Pode ser entendida como a sintetização do conhecimento e aplicação do mesmo em uma determinada situação, para ganhar maior profundidade e relevância (Moresi, 2000). 1.2 O conceito de Arquitetura de Informação Web A AI Web é a arte e a ciência de organizar e rotular Website, intranet, comunidades em linhas e softwares para suportar a usabilidade e incontornabilidade (Institute, 2013). A AI para ambiente digital segundo Wurman (2010), é uma área do conhecimento que fornece uma base teórica para estruturação e organização informacional dos ambientes digitais. Falando da AI Web implica falar do arquiteto de informação que segundo o mesmo autor citado anteriormente, é o indivíduo que organiza os padrões intrínsecos dos dados, tornandoos complexos e claros; ainda o mesmo afirma que um arquiteto de informação é a pessoa que cria a estrutura ou mapa informacional que permite aos outros encontrar seu caminho para o conhecimento. Apoiando nessa ideia, Morvile e Rosenfeld (2006) afirmam que um arquiteto de informação: É o indivíduo que organiza grande quantidade de informação em Website e intranet para que as pessoas possam encontrar o que desejam; É aquele que aplica o conceito de marketing na Internet, pois ajuda as empresas, fazendo com que os clientes encontrem os seus produtos facilmente no Website; 18/99

22 1.2.1 Objetivo da arquitetura de informação Web Segundo Agni (2013), o papel da AI Web consiste em organizar toda a informação daquele ambiente (Website, blog, biblioteca etc.), estruturando e distribuindo as áreas, principais e secundárias, para que as informações possam ser encontradas com facilidade. Pois é de constatar que em um ambiente digital, de acordo com Rodrigues, (2012) elas precisam ser facilmente identificáveis, sua distribuição bem definida e a navegação intuitiva. Até podemos afirmar que objetivo da AI Web é garantir a não-sobrecarga, o não-desperdício de tempo na localização das informações por parte das pessoas que necessitam de determinada informação e manter padrões na organização das informações e não só mas também em desenvolver aplicações com ótima usabilidade. Em concordância com o publicado por Morvile e Rosenfeld (2006), podemos afirmar que AI Web um instrumento fundamental para garantir a acessibilidade e a navegabilidade desejada, sobretudo nos dias de hoje em que lidamos com uma quantidade enorme de informação todos os dias. Do ponto de vista do custo se quisermos, de acordo com Morvile e Rosenfeld (2006), o objetivo da AI é garantir que não haja perda de milhões de dólares numa organização e garantir que informações certas podem ser facilmente encontradas Importância da Arquitetura de Informação Web A AI Web é muito importante, pois segundo Rocha (s.d), Morvile e Rosenfeld (2006), permite, afetar diretamente os custos de encontrar uma informação e de não encontrá-la, os custos de construção e manutenção de Website, os custos de treinamentos de funcionários, o valor da educação e até a valorização da marca. Quanto a cada um Morvile e Rosenfeld (2006), deixam as seguintes questões que consideram importantes: 19/99

23 Quantas decisões ruins são tomadas nas organizações porque os funcionários não encontram as informações que precisam? Qual é o esforço feito devido a desconexão da informação? Quantos clientes se perdem porque eles não encontram o produto que precisam no Website duma determinada instituição? Quanto se gasta oferecendo suporte todos os dias aos clientes por telefone, porque eles odeiam navegar no Website da organização? Qual o valor de educar os seus clientes sobre novos produtos e serviços relacionado com os que estão procurando ativamente em seu Website? Qual o custo para projetar e construir um Website e quanto custa para refazer seis meses mais tarde, porque ele não suporta a localização da informação ou não tem escalão? Quanto custa garantir que bons projetos não desmoronam ao longo do tempo, será que pessoas que mantem o seu Website sabe onde colocar novos conteúdos e quanto remover as desatualizadas? Quanto custa treinar funcionários para utilizar o sistema e quanto poderia economizar se não fosse tão complicado de utiliza-la? Ainda, até podemos ver que, a AI Web é tão importante que, muitas vezes por causa de uma seção com um rótulo confuso num Website pode impedir um utilizador de encontrar informações importantes ou ainda um Website mal organizado pode fazer com que uma pessoa desista de consultar a informação disponível nele. Contudo, analisando tudo até agora, é possível perceber que, uma boa AI Web é incrivelmente eficaz, conhecer o básico dos procedimentos da AI Web pode economizar tempo e dinheiro no longo prazo, além disso, não é necessário ser um especialista para poder utilizá-la a seu favor. A AI Web é muito importante porque um Website mal estruturada pode ditar a sua morte sabendo que as pessoas que, irão a consultar não querem desperdiçar o seu tempo ficando a 20/99

24 procurar por um rotulo que assim como é de padrão ser encontrado num sitio nos Websites, nesse aí não se encontra, ainda porque permite um menor desperdício de custo Componentes da Arquitetura de Informação Web Segundo Silva (2010), para o desenvolvimento de uma aplicação Web excelente é necessário inserir profissionais aptos a identificar e resolver problemas de recolha, organização e representação das informações, procurando adequar a realidade dos ambientes informacionais às necessidades dos utilizadores finais. Morvile e Rosenfeld (2006) apresentam os seguintes componentes de uma AI Web: Sistemas de organização responsável em organizar as informações em variedade de formas, ainda frisam eles que o conteúdo é armazenado e ordenado levando em conta o meio em questão; Sistemas de navegação Ajuda o utilizador a mover a partir dos conteúdos, estabelecendo pontos de referência para que o utilizador não se perca; Sistemas de procura Permite aos utilizadores encontrar conteúdos mais rapidamente em caso de grande quantidade; Sistemas de etiquetagem Descreve as categorias em linguagens que são significativos e percebidos pelo utilizador; 21/99

25 Ilustração 2: Página Web com todos os componentes de uma AI Web Fonte: (Morvile & Rosenfeld, 2006) É de referir que para um sistema representar uma ótima AI Web terá de apresentar todos os componentes, pois esses componentes permitem maior conforto na procura da informação pelos utilizadores e facilitem a mesma procura. Além disso, permite o menor desperdício de tempo na procura da informação. Mas também toda a informação deverá estar modelada de forma eficaz e eficiente, dando suporte aos componentes da AI e satisfação dos objetivos dos utilizadores. 22/99

26 1.2.4 Arquitetura de informação para a Web e a sua representatividade A AI de um Website é a forma como o conteúdo do mesmo está organizado e estruturado de forma a orientar a navegação do utilizador no mesmo, conforme Profissionais de Tecnologias, (2009), que ainda afirmam que, nela deve conter no mínimo as distinções entre as áreas primárias e secundárias, organizando as informações de acordo com a sua importância e hierarquia. Contudo, é importante ter em atenção o uso racional, não exagerado, de certos recursos de modo a permitir uma boa organização dos elementos constituintes, por exemplo: uso adequado de ícones e elementos que facilitem a navegação e identificação das informações. É de constatar que um Website mal estruturada ou organizado poderá limitar a visibilidade de alguns conteúdos publicados, com facilidade. Defende os Profissionais de Tecnologias (2009) que é importante ter os seguintes critérios na construção de um Website: a) Relacionar os conteúdos a serem disponibilizados no Website; b) Organizar os conteúdos em áreas para a estruturação das informações; c) Definir a importância para cada área de acordo com os objetivos do seu Website, tema e seu público-alvo; d) Montar a arquitetura necessária para priorizar as informações de acordo com importância definida para cada uma delas; e) Definir a nomenclatura para as áreas menus, submenus, levando em consideração a sua área de atuação, as tendências para Websites do mesmo ramo e o perfil do públicoalvo. Porém, é comum encontrar algumas falhas ou até mesmo erros de abordagens na construção de Websites. Esses erros/falhas são alguns deles apontados pelos Profissionais de Tecnologias (2009): 1. Falta de título para as páginas dos Websites; 2. Não utilização de meta tags; 3. Utilização de imagem no lugar de texto; 23/99

27 4. Não utilizar um equivalente textual para as imagens; 5. Conteúdo e formatação não estão separados; 6. Inexistência de link para a página principal em todas as páginas; 7. Informações de contacto escondidos; 8. Etc. Tendo alguns critérios e erros conhecidos sobre as aplicações Web é importante saber que ela deve ser otimizada de forma a termos aplicações com ótima performance e eficiência, para isso Lopes (2011) deixa algumas técnicas e/ou orientações: 1. Habilitar o GZIP; 2. Minificar os scripts JavaScript e CSS; 3. Compactar o HTML; 4. Nunca dimensionar imagens no HTML; 5. Otimizar imagens a utilizar; 6. Utilizar formato correto das imagens; 7. Diminuir cookies e Headers; 8. Diminuir quantidade de requests; 9. Juntar arquivos CSS; 10. Juntar arquivos JavaScript; 11. Especificar o tamanho das imagens; 12. Colocar JavaScript no fim da página e CSS no topo; 13. Usar ferramentas de diagnóstico; 14. Escrever scripts eficiente; 15. Diminuir tamanho dos requests; 24/99

28 No entanto, Morvile e Rosenfeld (2006), consideram que, a organização da informação em Websites e intranet é o principal fator que determina o sucesso no desenvolvimento Web e na compreensão do trabalho desenvolvido. É de constatar que qualquer Website apresenta uma AI, sendo alguns melhores e outros não, mas todos possuem minimamente alguns dos componentes da AI Web. Morvile e Rosenfeld (2006) argumentam que, ao ser desenvolvido qualquer AI para a Web e demais, deverá ter como base três modelos: os utilizadores, os conteúdos e os contextos. Quanto a cada um é importante detalhar o seguinte: Utilizador identificado pela sua necessidade, hábito e comportamento; Conteúdos informações a serem transmitidos aos utilizadores; Contexto meio, cultura, metas e estratégias organizacionais; Esses três pilares da AI devem estar ligados uns aos outros. Em concordância com Zemel (2012), é de constatar que hoje ao falar da AI é importante referir a responsive Web design e responsive Architecture, pois com o avanço da tecnologia não é importante apenas desenvolver aplicações Web, mas os mesmos terão de ser adaptáveis a todos os ambientes/dispositivos que já existem e o futuro dos dispositivos que nem conseguimos prever. Focando no hoje podemos ver que a estatística para o mercado mobile está a crescer (para verificar como está essa evolução em Cabo Verde é só ver o site da ANAC 2 ), então porque versões de linguagens específicas para dispositivos moveis? Porque não uma abordagem Web-based única e responsiva? Toda essas questões e causas são tratadas por, (Lopes, 2012) e (Zemel, 2012) /99

29 Segundo Zemel (2012), responsive Web design é pensar em páginas que se adaptem a todo o tipo de dispositivos e contexto de utilização, é pensar em páginas com flexibilidade que suportem todo tamanho de ecrã, qualquer tipo de resolução, interfaces com touch ou mouse. Pois ainda ele defende que um Website com Web design responsivo pode ser acedido de qualquer despositivo com acesso a rede, independentemente da sua resolução, capacidade de cores sendo touch ou não, com os conteúdos bem apresentados, inclusive com possibilidade de alterar a ordem em que os conteudos aparecem. Para uma ótima AI atualmente é necessário que adaptamos à Web responsivo utilizando varias técnicas deixando como pilar os layouts fluidos, imagens flexíveis e media queries segundo Lopes (2012). Até podemos dizer que o sucesso de varias aplicações Web depente da sua apresentação em aplicativos com resoluções diferentes, para isso é so ver o aumento da utilização de despositivos com resoluções deferente dos descktop. 1.3 Modelação de Informação A modelação da informação trata da conceção da estrutura da informação em determinado universo de discurso, universo este que pode ser um ambiente de negócio ou uma empresa (Pereira, 1998). A modelação da informação é uma descrição de que tipo de informação que vai ser armazenada na Base de Dados (BD) e como elas serão relacionados. A modelação de informação é muito importante pois o desenvolvimento de um projeto de BD de alta qualidade depende dela, também para que tenhamos informações coesas e coerentes num Website por partes depende da modelação da mesma. Existem outros autores como Pereira (1998) e Heuser (1998) que defendem a mesma causa. 26/99

30 1.3.1 Modelo Orientado por Objetos De acordo com Almeida (2007), o paradigma da orientação a objetos possui a sua própria maneira de representar um problema. Continua, dizendo que essa maneira difere muito da forma tradicional de modelação de dados utilizados pelos BD relacionais. Para esse autor esses modelos têm algumas semelhanças, sobretudo relativa à cardinalidade das relações entre as entidades. O modelo orientado por objetos é constituído pelos seguintes elementos: a) Objetos Segundo Ramos e Farinha (2007), um objeto é qualquer coisa do universo que queremos registar e que tem as seguintes propriedades: 1. Uma identificação que é o valor que permite diferenciar um objeto de todos os outros. 2. Um estado que são conjuntos de valores que nos dá informação acerca das características dos objetos. 3. Comportamento que são conjuntos de ações que o objeto sabe realizar. Em conformidade com os mesmos autores acima referidos, um objeto não tem necessariamente que corresponder às entidades com representações físicas. De acordo com a Professora Fernanda Mascarenhas 3, Professor Juvenal Pereira 4, Farenelli (2007) e Boscarioli et al. (2006) para reforçar esse conceito, uma modelação orientada a objetos é de referir que cada objeto possui um estado, o comportamento e uma chave de identificação única. Os mesmos autores referenciados acima ainda referem que, o estado do objeto depende do valor das suas propriedades, e o comportamento do mesmo é determinado pelas operações que podem ser especificados pelos objetos. 3 Professora na Universidade Jean Piaget da disciplina Engenharia de Software 2012/ Professor na Universidade Jean Piaget da disciplina de Programação Orientado a Objetos no ano letivo 2010/ /99

31 Farenelli (2007), ainda refere que as propriedades dos objetos podem ser os seus atributos ou relações entre esse objeto e outros que façam parte do domínio do problema É de referir que a identidade do objeto é uma das propriedades mais importante, pois ela permite-nos identificar com qual objeto se comunicar, seja para obter ou atualizar os dados (Boscarioli et al., 2006). O estado de um objeto em uma BD orientados a objetos consiste no valor de cada uma das suas propriedades, sejam elas atributos do próprio objeto ou relações com outros objetos (Almeida, 2007). Ainda, observando a perspetiva desse mesmo autor podemos considerar que os valores do atributo podem até ser complexo conduzindo a ser um outro objeto mas também é de referir que o próprio relacionamento influencia o estado do mesmo. É ainda importante frisar que o comportamento de um objeto é referenciado por meio de métodos podemos apresentar um exemplo: Um utilizador ou um departamento pode ser um objeto desde que: Tenha uma identificação única e diferente de todos os outros; Tenha um conjunto de valores que permite caracteriza-lo; Realiza diferentes ações de acordo com o caso; a) Classes Sabe-se de outras disciplinas que classes são conjuntos de objetos do mesmo tipo, com Características e comportamentos semelhantes. Em concordância com Ramos e Farinha (2007) é possível afirmar que, classes são conjuntos de que partilham o mesmo meio de identificação, propriedades de estados, comportamentos, relações e semântica. Segundo os mesmos autores referidos aqui, uma classe pode ser um conjunto de utilizadores, todos destintos uns dos outros, desde que todos tenham um conjunto de valores que permitem caracteriza-los, todos estejam aptos para realizar a mesma ação, todos se relacionam com os mesmos tipos de objetos e representam a realidade da mesma natureza, isto é têm a mesma semântica. a) Principais Diagramas: Os principais diagramas usados na modelação orientada a objetos e que serão utilizados para o desenvolvimento do caso prático são: 1. Diagrama Use Case, que mostra as interações entre um sistema e seu ambiente. 28/99

32 2. Diagramas de classe, que mostram as classes de objetos no sistema e as associações entre essas classes. 3. Diagramas de sequência, que mostram as interações entre atores e o sistema. Esses diagramas serão detalhados a seguir, dado a sua pertinência pelos motivos apresentados anteriormente, porém é de referir que existem outros diagramas que, por vezes, são utilizados na modelação por objetos e que servem para detalhar um ou outro aspeto do sistema com maior grau de detalhe se assim for entendido pelo analista. 1. Diagrama de Use Case O Diagrama de Use Case, segundo Almeida (2007), representa sequência de ações executadas durante a realização de um processo de negócio. Esses processos produzem um valor para algum, cliente do sistema em causa, denominado de ator de negócio. Ainda, segundo o mesmo autor, são apropriados para a fase de levantamento de requisitos, pois concentram-se na finalidade e utilidade do sistema, abstraindo-se completamente da sua organização interna. É sabido de varias disciplinas 5 que o diagrama de Use Case descreve os comportamentos ou funcionalidades do sistema, mas não apresenta todos os requisitos do sistema, e muitas vezes esse diagrama representa uma sequência de ações relacionadas para um determinado objetivo. Sabe-se que para o desenvolvimento de um excelente diagrama de Use Case devemos levar em conta os seguintes aspetos: Principal atividade executada pelo ator no sistema; As interações entre o ator e o sistema. Limites do sistema; Conexões entre o ator às atividades (Use Case) Relações do fluxo dos processos (extensão e inclusão); 5 Análise e sistema, Engenharia de Software e Desenvolvimento de sistema de informação lecionados na Universidade Jean Piaget entre 2010 e /99

33 Segundo Baesso (2004), este diagrama tem como objetivo especificar os limites e as funcionalidades do sistema. Ainda ela afirma que este diagrama permite que os clientes e utilizadores validem o sistema e os desenvolvedores contruam o esperado. Segue um exemplo de um diagrama de Use Case com a indicação dos componentes: Ilustração 3: Exemplo de Um Diagrama de Use Case Em casos de sistemas mais complexos segundo a autora acima citado, sabendo que poderá existir muitos diagramas de Use Case a serem visualizadas num único diagrama, para isso deverá ser recorrido ao diagrama de Pacotes 6, onde cada pacote representa um diagrama de Use Case, respeitando a uma determinada área ou funcionalidade do sistema. 6 Divisão de um sistema em vários subsistemas, Almeida (2007) 30/99

34 2. Diagrama de Classes O diagrama de classe é um diagrama central da modelação orientado a objetos e esse diagrama permite-nos observar um conjunto de classes e os relacionamentos entre elas (Laboratório de Engenharia de Software [LES], s.d). Os diagramas de classes são constituídos por: 1. Classes; 2. Relacionamentos; a. Associação; b. Generalização; Porém, é de acrescentar que dentro do relacionamento também deve-se considerar como elemento importante a cardinalidade/grau do relacionamento. Tal como já tinha sido referido e segundo Farenelli (2007), todos os objetos que pertencem a mesma classe possuem a mesma definição tanto para métodos como para atributos. Ao falar do diagrama de classe é de referir sobre um termo muito importante: a agregação, que são associações que se utilizam quando se pretende representar a noção do todo ou de parte de um todo constituído por partes (Ramos & Farinha, 2007). O mesmo autor ainda afiança que as agregações são representadas graficamente por uma linha adornada com losango branco no extremo correspondente ao todo. 31/99

35 Ilustração 4: Exemplo de uma agregação 7 De acordo com a figura acima sendo uma relação de agregação, se pode dizer que um atleta faz parte de um time e que o atleta existe independentemente da existência do time, (Mendes, 2010). Contudo, Ramos (2010), afirma que, a associação entre classes sem agregação reflete que ambas as classes pertencem ao mesmo nível conceptual. Composição Por outro lado podemos ter relacionamentos de composição. Segundo Ramos e Farinha (2007), a composição é uma forma mais forte de agregação, onde há uma coincidência da vida das partes, pois desde que as partes sejam criadas ela irá morrer com a mesma. Ainda para sustentar a ideia acima ele afirma que numa composição, quando se remove o objeto composto, todos os seus componentes são automaticamente removidos. Um outro aspeto do diagrama de classe é a herança. Para Farenelli (2007), trata-se de um mecanismo pelo qual uma classe obtém características e métodos de uma outra. Em relação às classes referidas pelo autor, sabe-se que esse mecanismo se dá através de uma relação entre uma superclasse a que é herdada e as suas respetivas subclasses as que herdam coisas da superclasse. Em suma, a autora anterior afirma que da mesma forma que uma classe transmite suas características para outras, tornam-nas suas herdeiras. Convém referir que a herança é feita de baixo para cima e não se verifica no sentido contrário, isto é, uma superclasse não 7 Fonte: [visto a 29/11/2014] 32/99

36 herda nada das suas subclasses. É de ter em conta ainda, que a questão de herança é tão importante na modelação como na codificação, dado que permite uma economia de codificação dos módulos, componentes ou funcionalidades do sistema Ilustração 5: Exemplo de um Diagrama de Classe Fonte: (LES, s.d) Quanto a herança, pode-se dizer que é um mecanismo que permite que uma nova classe (subclasse) seja descrita a partir de uma existente, e permite herdar todos os comportamentos e atributos da superclasse. É sabido que a herança de classes apresenta algumas vantagens tais como: Reutilização de scripts; Diminuição de linhas de códigos facilitando a eficiência; Melhorias na organização de scripts e informações; Ao falar de herança é de referir que existe dois tipos de heranças: herança simples e herança múltipla. Sabe-se da disciplina Programação Orientado a Objetos que a herança múltipla não é suportada por todas as linguagens de programação, como por exemplo o JAVA. 33/99

37 3. Diagrama de Sequências Conforme Baesso (2004), o diagrama de sequência apresenta a colaboração dinâmica entre vários objetos de um sistema. Ainda defende a autora que, através deste diagrama é possível identificar a sequência de mensagens enviadas entre objetos, e expõe-nos o que acorre em pontos específicos na execução de um determinado sistema. Os principais símbolos ou notações do diagrama de sequência, segundo Baesso (2004) são: Objetos: Fluxo de mensagens: Ator: Tempo Ilustração 6: Principais símbolos utilizados em diagramas de sequência Fonte: adaptado (Baesso, 2004). Para Silva, A. (2006), os diagramas de sequências são utilizados para atribuição de responsabilidades a cada um dos objetos do sistema e também para modelar a interação entre os objetos num determinado tempo. 34/99

38 Ilustração 7:Exemplo da Diagrama de Sequencia 8 Em suma, concordamos que o diagrama de sequência apresenta as interações sequenciais entre vários objetos através de fluxos de mensagens em concordância com um determinado tempo num sistema, onde a ordem da interação é muito importante para o sistema Modelo Entidade Relação Uma outra forma de modelar sistema, sobretudo a nível da camada de dados, é o modelo Entidade Relação vulgarmente conhecido como modelo ER. Esse modelo consubstancia-se através de um Diagrama Entidade-Relação (DER) que, segundo Heuser (1998), é uma técnica mais difundida da modelagem conceitual. Defende o autor ainda que a abordagem que é usada aqui foi criada em 1976 por Peter Chen. É ainda de realçar que segundo o mesmo autor as técnicas de modelagem orientado a objetos baseiam-se nos conceitos da abordagem ER. Tal como modelo orientado a objetos, o modelo ER possui alguns conceitos que devemos saber antes de partir para a modelação: a) Entidade Para Takai et al. (2005), uma entidade é algo do mundo real que possui uma existência independente e cada entidade tem uma propriedade particular denominado de atributos que as descrevem. Segue um exemplo de entidade e1 e c1 através da seguinte ilustração: 8 Fonte: vnw0ajbry/s1600/diagrama-seguencia-consultafuncionario.jpg [visto: 14/05/2014] 35/99

39 Ilustração 8: Exemplo de uma entidade e seus atributos Fonte: (Takai et al., 2005). b) Atributos Ao falar de atributos sendo eles, propriedades particulares de uma entidade, é de referir que podem ser compostos ou simples segundo Takai et al. (2005), que ainda afirmam, que atributos compostos são atributos que são compostos por atributos mais básicos Por exemplo: na ilustração acima o atributo Endereço da entidade e1 pode ser dividido em outros atributos que poderão ser rua, cidade nação e código de endereço postal. Ainda é de notar que um atributo pode possuir um único valor ou vários valores, esta mesma ideia é defendida por muitos outros autores tais como (Takai et al., 2005) e (Heuser, 1998). Por outro lado, temos atributos derivados caso ele for proveniente da relação entre dois ou mais atributos segundo (Takai et al., 2005). Podemos apresentar um exemplo para melhor esclarecer esse conceito: pode-se obter a idade de uma pessoa através do atributo data de nascimento e data atual no sistema. 36/99

40 Em um DER uma entidade e um atributo são representadas pelos seguintes símbolos: Entidade Atributo Ilustração 9: Símbolos utilizados em um DER para representarem as entidades e atributos c) Relação/relacionamento Heuser (1998), considera relacionamento como, um conjunto de associação entre entidades e alerta que, muitas vezes queremos saber a quais entidades estão ligadas uma determinada entidade, apenas um relacionamento daria resposta a esse tipo de questões em um DER. É de referir que existe relacionamentos entre entidades diferentes mais existem casos de autorelacionamento 9. Para o mesmo autor, quando temos casos de auto-relacionamento, nesta situação é necessário acrescentar o conceito de papel da entidade no relacionamento como se ilustra a seguir. Ilustração 10:Auto relacionamento. Fonte: (Heuser, 1998). 9 Auto-relacionamento é quando temos relacionamento entre ocorrências de uma mesma entidade (Heuser, 1998). 37/99

41 d) Cardinalidade Cardinalidade é uma das propriedades mais importantes de um relacionamento permitindo definir o número de ocorrência de uma entidade em relação a outra no mesmo (Heuser, 1998). Sabe-se que a cardinalidade pode variar entre o mínimo e o máximo. Para Heuser (1998),a cardinalidade máxima é o número máximo de ocorrência de uma entidade associada a outra e a mínima é o contrário ainda ele e Fileto (s.d) referem que associada a relação o grau de relacionamento é muito importante, pois através do mesmo podemos saber o numero de entidades cuja instancias podem estar associadas uma as outras. Em resumo, o relacionamento pode ser: Auto-relacionamento (já foi definido antes), relacionamento binário (entre duas entidades relacionadas) relacionamento ternário (entre três entidades numa só relação) Base de Dados Relacionais o MySQL Argumenta Sanches (2012) que as tecnologias de BD têm evoluído rapidamente nas últimas três décadas, desde a ascensão do domínio de Sistema de Gestão de Base de Dados Relacional (SGBDR). Segundo Caldeira (2003), uma Base de Dados Relacional (BDR) armazena informações em um conjunto de tabelas cada uma contendo dados orientados por assuntos, podendo-se relacionar entre elas, utilizando informações de varias tabelas ao mesmo tempo. Porém, apoiando na ideia citado pelo autor anterior podemos dizer que, nem todas as colunas têm de conter registos e os que não serão preenchidos assumem valor NULL, assim como existem colunas que são obrigatoriamente preenchidas. 38/99

42 Sabendo que existirá uma interação ou relação entre as tabelas, é de referir que isso si dá a partir da chave estrangeira (um campo que será partilhado entre as tabelas relacionadas). Segundo Furtado e Santos (1985), as vantagens da BDR são: Construção em multinível de integridade a integridade dos dados é aplicado sobre o nível de campo para garantir a precisão de dados, nível de tabelas para garantir a não duplicabilidade do mesmo e falta da chave identificativa, nível de relacionamento para garantir o relacionamento entre tabelas e nível de negocio para garantir a precisão dos dados nos negócios; Independência física e lógica de dados a parte física e lógica pode ser desenvolvidos e implementado por utilizadores diferentes que não afetará as aplicações construídas em cima. Consistência e precisão dos dados os dados são consistentes e claros, devido a vários níveis de integridades que poderá ser implementado sobre o BDR. Facilidade na recuperação dos dados os dados podem ser recuperados através de uma tabela em particular, ou através de qualquer tabela em que tenha sido relacionada O MySQL Dentre todas as BDR existentes (são várias) o MySQL é o que merece um destaque especial neste trabalho pelo fato de ser o escolhido para o desenvolvimento da camada de dados que faz parte do caso prático associado. Com o avanço da tecnologia é de referir que as BD são componentes fundamentais no desenvolvimento de qualquer sistema de informação seja de grande ou pequeno porte. Hoje obter informação significa estar direta ou indiretamente a usar uma BD. 39/99

43 Segundo Aroca (2001), a BD é armazenada em computadores, sendo eles normalmente de grande capacidade denominados de servidores por causa da quantidade de dados que precisam armazenar e informação que precisam processar em curto espaço de tempo. O MySQL é, segundo o mesmo autor anteriormente citado, um dos mais rápidos do mercado e foi desenvolvido por David Axmark Allan Larsson e Michael Widenius, para mais é grátis, tanto para comercio como uso privado, em conformidade com a licença publica General Public Licence (GPL). Segundo Hugo (2013), o MySQL é um dos SGBD que utiliza o SQL 10 como interface mais popular, de uma forma global, com mais de dez milhões de utilizadores, dos quais se destacam: a NASA, Bancos, Friendster, Google, HP, Nokia, Soni, Alcatel e outros. O acasalamento com o PHP, por este ser uma das linguagens mais utilizadas no desenvolvimento de páginas Web, sendo que grande parte das páginas segundo Pereira (2010), são desenvolvidas no mesmo, fez do MySQL também um dos mais populares motores de BD na Web. Muitos pacotes como XAMPP, WAMPP, Apache triad, entre outros pacotes 3 em 1, trazem o MySQL como motor de BD, Apache como servidor Web e PHP como linguagem de desenvolvimento. Contudo, Hugo (2013) afirma que o MySQL suporta os recursos de BD como a Unicode, Full Text Indexes, replicação, Hot Backup, GIS, OLAP e outros. Características do MySQL citado por, (Hugo, 2013): Portabilidade (suporta praticamente qualquer plataforma atual); Compatibilidade com o ODBC, JDBC,.NET e módulos de interface para diversas linguagens de programação como Delphi, Java, Perl, C, C++, C#, Visual Basic, Python, Perl, PHP, ASP e Ruby; Tem excelente desempenho e estabilidade; 10 Structured Query Language 40/99

44 É pouco exigente quanto ao recurso de hardware; É de fácil utilização; É um Software open source com base na licença GPL (entretanto, se o programa que a cessar o MySQL não possuir a licença GPL deverá ser adquirida uma licença comercial); Contempla utilização de vários Storage Engines como MyISAM, InnoDB, Falcon BDB, Archive, Federated, CsV,Solid e outros; Suporta controlo transacional; Suporta triggers; Replicação facilmente configurável; Interface gráfica ( MySQL Toolkit) de fácil utilização; 1.4 Importância da modelação de dados A modelação apresenta muitas vantagens sendo elas: 1. Manutenções das aplicações tornam-se mais simples e mais eficiente, pois com uma separação clara das funções torna tudo mais fácil; 2. Aumento da produtividade no desenvolvimento, já que poderá ser feito a reutilização de scripts; 3. Permite apresentar descrição sobre os tipos de informações a serem armazenados; De acordo com Souza (2009) a modelação é muito importante porque ajuda a definir como o sistema é, ou como ele será, e permite-nos saber como ele funciona ou funcionará, e como responde ou responderá perante um determinado evento. O mesmo ainda refere que a grande importância e vantagem da modelação é a economia de tempo e custo. 41/99

45 Capítulo 2 Plataformas Web 2.1. Arquitetura de Aplicações Web Ao se referir a arquitetura de aplicações Web é importante referir ao modelo Cliente Servidor (C/S), que permite a conexão entre os intervenientes a partir de uma rede de computadores, com base nos protocolos Transmission Control Protocol/Internet Protocol (TCP/IP) de acordo com Macedo (2012), que expõe ainda que o modelo foi criado tendo como base a descentralização de dados e recursos de processamento. É ainda de referir que: Clientes são máquinas que solicitam conteúdos/serviços aos servidores. Servidor - é a máquina que fornece serviços (recursos para os clientes, dados ou informações processadas). A arquitetura C/S pode ser de várias camadas: 2 camadas, 3 e N camadas. Vai-se de seguida aprofundar cada uma dessas camadas. 42/99

46 a) Modelo de 2 camadas: Um programa ou software, desenvolvido em qualquer ambiente que suporta esta arquitetura, teria de ser instalado a cada computador, para que pudesse aceder os dados no servidor segundo Macedo (2012) e Pereira (1998), que ainda mencionam que neste tipo de modelo, o cliente é responsável pelas seguintes funções: Apresentação Contém o script que representa a interface. Caso tenha necessidade de fazer alterações na interface da aplicação, teria de ser feito em todos os computadores; Lógica de Negocio Aqui estão as regras que definem como os dados serão acedidos. Fazem parte desta regra todas as funções de validação dos campos e entre outras apresentadas na interface. Enquanto o servidor aloja a camada de dados (a BD). A seguir ilustra-se uma arquitetura de 2 camadas: Ilustração 11: Exemplo do modelo de 2 camadas Fonte: [visto:28/05/2014] 43/99

47 Verificando por este modelo é de referir que ele apresenta um elevado nível de custo, visto que ao ser atualizado definições do lado cliente implicaria reinstalação em todos os computadores instalados. b) Modelo de 3 camadas: É um tipo de arquitetura na qual a apresentação, lógica de negócio e armazenamento dos dados são desenvolvidos e mantidos em módulos diferentes, (Macedo, 2012). Já o mesmo ainda refere que o acesso a BD e a todos os dados é dado a partir de um servidor de aplicação. Para o mesmo autor, esse modelo consome maior tempo no desenvolvimento que a de 2 camadas uma primeira diferença já. As três camadas apresentadas acima permitem distribuir melhor os serviços, diminuindo o tempo e o custo de atualização uma vez que a alteração numa camada não implica alteração noutra nem reinstalação a nível dos computadores a camada de dados e lógica de negócio funcionam numa lógica de servidor. Na ilustração abaixo temos um modelo de 3 camadas: Ilustração 12: Exemplo de um modelo de 3 camadas Fonte: [visto:28/05/2014] 44/99

48 Com a separação da camada lógica de negócio não precisa ser feito uma alteração a cada momento que uma regra de negócio for alterada. Porém continua com o problema de alterações a nível da camada de apresentação/interface. c) Modelo de N camadas: Para resolver os problemas da arquitetura de 3 camada, sentiu-se a necessidade de introduzir novas camadas (arquiteturas de N-Camadas). O surgimento da Web veio criar as condições ideais para resolução desse problema e surgiram as arquiteturas baseadas na Web. Por exemplo: Pereira (1998) refere que, a criação do modelo de 4 camadas foi desenvolvido para retirar a camada de apresentação do lado cliente e centraliza-la em um determinado ponto (servidor Web). Porém tirando a camada apresentação do lado cliente, não seria necessário instalar nem fazer manutenção nos computadores, caso necessário algumas alterações nas interfaces, contudo isso, o acesso a aplicação será feito nos navegadores ou Browsers. Ilustração 13: Exemplo de uma arquitetura 4 camadas Fonte: [visto:28/05/2014] 45/99

49 As 4 camadas segundo Pereira (1998), são: Cliente O cliente são os navegadores ou browsers utilizados pelos utilizadores para interagir com o sistema; Apresentação Passa a ser executado em um servidor Web, com isso, já a interface passa a ser desenvolvida pelas tecnologias capazes de gerar conteúdos para a Web. Com isso, já nem as alterações nem as instalações, seriam mais necessárias para os computadores que necessitariam dessa aplicação; Lógica de Negocio Essa camada continua no servidor das aplicações. Quando for necessário uma alteração seria apenas feito no servidor de aplicações. Com a atualização de uma regra todos os utilizadores teriam acesso ao mesmo simultaneamente. Dados Nesta camada temos o servidor de BD no qual se depara com todos os dados necessários para o funcionamento da aplicação. Com o grande avanço da tecnologia Web, surgiu um grande problema que foi o suporte para as tecnologias móveis, PDA 14 SmartCards, tablets, smart tv entre outros dispositivos modernos, que requerem introdução de novas camadas de apresentação específicas de acordo com Pereira (1998), que refere que foi daí o conceito de N camadas tal como retratado por (Macedo, 2012). Em seguida segue um exemplo da arquitetura de 4 camadas: 14 Personal digital assistants (assistente pessoal digital) 46/99

50 Ilustração 14: Exemplo da arquitetura de N camadas Linguagens de programação Web Existem diversas linguagens de programação para o ambiente Web, mas neste trabalho focarse-á apenas naquelas que foram usadas para o desenvolvimento do caso prático. Apresenta-se a seguir cada uma delas e os respetivos detalhes HTML5 O HTML 16 segundo Ferreira e Eis (2012), é uma linguagem para publicação de conteúdo (texto, imagem, vídeo, áudio e mais) para a Web. Para os mesmos desde o início o HTML foi criado para ser independente das plataformas Web, browser e outros meios de acesso mas no entanto todas as versões anteriores ao HTML5 apresentam esse problema. Segundo Arrigoni (2013), o objetivo do HTML5 é permitir a criação ou desenvolvimento mais simples e ágil de páginas Web. Além dessas vantagens apresentados anteriormente o mesmo autor refere que, o HTML5 é case insensitive 17, mas aconselha que é sempre melhor escolher um mesmo padrão ao editar os scripts. 15 Fonte: [visto:28/05/2014] 16 Hypertext Markup Language 17 Permite que os tag s sejam escritos usando tanto maiúsculas como minúsculas; 47/99

51 É de constatar que o HTML5 está a trazer uma grande vantagem na organização e estruturação de scripts, no desenvolvimento de aplicações Web, trazendo novos elementos por defeitos que são bastantes utilizados no desenvolvimento das aplicações Web. O HTML5 veio trazer alterações em novas tags e propriedades tais como o header, hgroup, nav, article, h1 a h6, footer, section, address, time, video, output, summary, progress, mark, meter, figure, figcaption, details, canvas, e áudio. Autores como Ferreira e Eis (2012) e Arrigoni (2013) apontam as seguintes diferenças: Os cabeçalhos h1 a h6 agora são redirecionados às seções das páginas, pois numa página Web poderá utilizar-se varias elementos de cabeçalhos h1, sendo cada um em lugares diferentes e sem influenciar os outros; O elemento header pode ser usado no cabeçalho de cada seção da página. Pode ser usado em varias partes da página Web, no cabeçalho, corpo e rodapé; A tag footer é basicamente o rodapé da página ou da seção, é aconselhável apenas para conteúdos mais precisos. A tag nav é utilizada para identificar os links seja para outra seção ou seção da mesma página. É muito utilizado na criação de menus de navegação; A tag section veio substituir o div que é muito utilizado para a divisão do conteúdo nas páginas; A tag article é utilizada para limitar os espaços para a inserção de um artigo; Os mesmos autores citados acima ainda referem que o problema consiste na compatibilidade com as versões mais antigas dos navegadores, mas para isso já existe uma solução bem viável. Porém, além disso, ele será uma ótima versão do HTML. 48/99

52 De seguida segue o exemplo da solução para versões anteriores do Internet Explorer 9 (IE9) 18 : Ilustração 15: Exemplo de solução para versões anteriores ao IE9 19 Treml (2013), apresenta como vantagens do HTML5 os seguintes: Torna a internet mais rápida devido a redução do tamanho do arquivo; A utilização de canvas para criação de conteúdos gráficos, pois garantem facilidade na criação de animações, desenho e outros aplicativos visuais sem usar aplicativos externos; Excelente capacidade de integração dos vídeos e sons, sem a necessidade de instalar plugins externos; Suporta a navegação via atalhos de teclado, o que facilita o acesso aos utilizadores; Permite a divisão das propriedades em módulos, pois anteriormente para lançar uma nova propriedade, teria de se esperar novas propriedades de todos os módulos para fazer lançamento de uma nova versão. Com a divisão em módulos ao alterar uma propriedade, lança-se apenas esse módulo. 18 Fonte: [visto:07/06/2014] 19 Fonte: [visto:07/06/2014] 49/99