PROJECTO FINAL CARLA777.docx

Universidade de Cabo VerdeDepartamento de Ciências e Tecnologias

Licenciatura Em Comunicação E Multimédia

DESENVOLVIMENTO DO WEBSITE DA ASSOCIAÇÃO ACADÉMICA DOS ESTUDANTES DA UNIVERSIDADE

DE CABO VERDE

Realizado Por:

Adnilson Teixeira Medina

Orientador:

Mestre Adelcides Rodrigues

Praia

Abril de 2015


DESENVOLVIMENTO DO WEBSITE DA ASSOCIAÇÃO ACADÉMICA DOS ESTUDANTES DA UNIVERSIDADE

DE CABO VERDE

Projecto de Fim de Curso de Licenciatura em Comunicação e Multimédia submetido ao

Departamento de Ciências e Tecnologia da Universidade de Cabo Verde como um dos

requisitos para obtenção do grau de Licenciatura em Comunicação e Multimédia sob a

orientação do professor Mestre Adelcides Rodrigues.

Trabalho Final de Curso de Licenciatura em

Comunicação e Multimédia pela Universidade

de Cabo verde.

Universidade de Cabo Verde

Departamento de Ciência e Tecnologia

Licenciatura em Comunicação e Multimédia


O trabalho fim de curso foi defendido e aprovado pela banca examinadora composta pelos

membros do Júri:

/O Júri/

/O Presidente do Júri/

/O Arguente/

/O Orientador/

Trabalho de Fim de Curso aprovado no dia ____ / ____ /____ pelo Departamento de Ciências e

Tecnologia da Universidade de Cabo Verde.

Dedicatória

Em primeiro lugar, e de uma forma muito especial dedico este trabalho a nosso amado

e Senhor Jesus, meu Deus e meu Salvador, por ter estado sempre ao meu lado durante todos

esses anos, por cada momento em que Ele me deu forças para superar as dificuldades que

pela minha força não foi possível superar e principalmente por cada momento de vitória que

eu tive.

Também de uma forma especial, dedico este trabalho a todas as pessoas que estiveram

presentes na minha vida de uma forma direta ou indireta, aos meus amados pais, irmãos,

avós, a todos os irmãos de fé da Igreja adventista do Sétimo Dia, e de uma forma muito

especial à minha namorada Carla Roziana Lopes Quebra pelo amor e carinho recebido dela, a

todos os colegas de curso, a todos os meus professores e a todos os amigos que sempre me

incentivaram e me deram forças e ânimos para que eu pudesse continuar e terminar os meus

estudos na Universidade de Cabo Verde.

Agradecimentos

Agradeço em primeiro lugar a Jesus Cristo meu Deus e meu Salvador, por ter estado

sempre ao meu lado.

Aos meus pais, João Medina Brandão e Elizabete Ramos Teixeira, pela educação que

me deram desde o ensino primário até ensino superior, pelo amor, pelo cuidado e carinho que

ao longo de todos esses anos eu recebi deles, pelos sacrifícios que tiveram de passar para que

hoje eu terminasse a minha formação, um obrigado do fundo do meu coração.

Ao professor Mestre, Adelcides Rodrigues por ter me orientado a realizar o projecto e

pelas sábias instruções que me deu para que eu realizasse este projecto com sucesso.

Aos meus avôs, António Ramos de Barros e Maria de Fátima Lopes, por todos os

apoios, amor e carinho que me deram ao longo desses longos anos.

Aos meus tios, Manuel António Ramos e Flávio Domingos Lopes Barros, ao meu

irmão Deunilson Teixeira Medina, a minha tia Ana Barros, a meu amigo Luciano Miranda,

pelas ajudas e incentivos que me deram.

A Igreja Adventista do Sétimo Dia por ter- me dado uma educação que me ajudou

bastante no relacionamento e convivência com as outras pessoas.

Abreviaturas e Significados

PHP Personal Home Page

BROWSR Navegador Para Aceder e Navegar na Internet

MYSQL Sistema de Gestão de Banco de dados – Structured Query Language

HTML Hyper Text Markup Language

DOM Document Object Model

WHATG Web Hypertext Application Technology Working Group

JAVASRIPT Linguagem de Programação de Interfaces

CSS Cascadding Style Sheets

RWD Responsive Web Design

BOOTSTRAP Framework Para Desenvolvimento Web Responsivo

FOUNDATION Framework Para Desenvolvimento Web Responsivo

CMS Content Managment Systems

JOOMLA Cms para Desenvolvimento de Aplicações Web

VIRTUEMART Plugin Joomla Para Criação de Lojas Online

Índice de Figuras

Figura 1 - Sintaxe Básica do PHP----------------------------------------------------------4-16

Figura 2 - Funcionamento de Um Site PHP----------------------------------------------4-16

Figura 3 - Sintáxe básica de um documento html----------------------------------------4-18

Figura 4 – Exemplo Responsive Web Design--------------------------------------------4-23

Figura 5 - Viewport Definido no CSS----------------------------------------------------4-27

Figura 6 – Exemplo de Aplicação Media Queries---------------------------------------4-28

Figura 7 - Responsive Design - Bootstrap------------------------------------------------4-29

Figura 8 - Design Responsivo - Foundation-----------------------------------------------4-2

Figura 9 - Logotipo do Joomla---------------------------------------------------------------4-2

Figura 10 - logotipo do Virtuemart----------------------------------------------------------4-1

Figura 11 - logotipo do Spot.IN-------------------------------------------------------------4-3

Figura 12 - quadro de Comparação de Spot.IN--------------------------------------------4-1

Figura 13 - logotipo do WampServer-------------------------------------------------------4-1

Figura 14 - Mapa de site da ACAD UNICV-----------------------------------------------5-4

Figura 15 – Diagrama de Tarefas No Back Office do website de ACAD UNICV---5-2

Figura 16 - Diagrama de Tarefas No Front Office do website de ACAD UNICV- - -5-3

Figura 17 - Layout de baixa fidelidade-----------------------------------------------------5-4

Figura 18 - Layout de Baixa Fidelidade - Tablets----------------------------------------5-5

Figura 19 - Layout de Baixa Fidelidade - Smartphones----------------------------------5-2

Figura 20 - Pasta raíz do acadTemplate----------------------------------------------------5-3

Figura 21 - Estrutura do template acadTemplate------------------------------------------5-2

Figura 22 - página index.php configuraçãp bootstrap com php--------------------------77

Figura 23 - página index.php configuração do head---------------------------------------77

Figura 24 - página index.php configuração do topo do site-------------------------------78

Figura 25 - página index.php configuração do content do site---------------------------79

Figura 26 - página index.php configuração do footer do site-----------------------------80

Resumo

A Associação dos Estudantes da Universidade de Cabo Verde designada pelo

acrônimo, ACAD-UniCV, é uma associação voltada para o interesse dos alunos e tem como

principal objectivo a satisfação das necessidades dos alunos da Universidade de Cabo Verde,

ajudando-os em todas as áreas académicas durante os seus anos de estudos.

Devido a falta de um meio de comunicação entre os alunos e a Associação dos

Estudantes da Universidade de Cabo Verde, a Associação não está a atingir o seu principal

objectivo. Surgiu então, a ideia de desenvolver uma aplicação capaz de servir como um meio

de comunicação entre os alunos e a Associação dos Estudantes da Universidade de Cabo

verde.

E para resolver o referido problema foi proposto o desenvolvimento de um website

capaz de acompanhar a nova tendência tecnológia “Responsive Web Design”, ou seja, um

website capaz de se adaptar aos demais características dos diferentes tipos de dispositivos

moveis tais como: Smartphones, Tablets, Laptops.

Esta aplicação web foi baseada no conceito “Design Moderno” e com uma arquitetura

de informação bem estruturada basedada na experiência do utilizador, e ainda foi

implementado o sistema de E-commerce para vendas e compras online através da integração

da extenção do Virtuemart.

Palavras-chaves: Responsive Web Design, E-commerce, Arquitectura de

Informação, dispositivos móveis.

Abstract

The Association of Students of the University of Cape Verde designated by the

acronym, ACAD-UniCV, is a dedicated association for the interest of students and aims to

meet the needs of students at the University of Cape Verde, helping them in all areas

academic during their years of study.

Due to the lack of a means of communication between students and the Association of

Students of the University of Cape Verde, the Association is not achieving its primary

objective. Then came the idea to develop an application that can serve as a means of

communication between students and the Association of Students of the University of Cape

Verde.

And to solve that problem was proposed to develop a website able to keep up with

new technology trend "Responsive Web Design", able to website to adapt to other

characteristics of the different types of mobile devices such as Smartphones, Tablets Laptops.

This web application was based on the concept "modern design" and a well-structured

information architecture based on the user experience, and has not yet implemented the E-

commerce system for online sales and purchases by integrating extension of Virtuemart.

Keywords: Responsive Web Design, E-commerce, Information Architecture, Mobile

Devices.

Índice

1. INTRODUÇÃO......................................................................................................................... 9

2. PROBLEMÁTICA.................................................................................................................... 10

3. OBJETIVOS............................................................................................................................ 11

4. JUSTIFICATIVA...................................................................................................................... 11

5. METODOLOGIA..................................................................................................................... 12

6. ESTRUTURA DO RELATÓRIO..................................................................................................13

3. 1. ASSOCIAÇÕES ACADÉMICAS UNIVERSITÁRIAS................................................................................15

3. 2. APRESENTAÇÃO DA ACAD UNICV.............................................................................................16

1.1.1 Gabinetes da ACAD UNICV:...........................................................................................16

1.1.2 Objetivos da ACAD-UniCV:.............................................................................................16

3. 3. COMPARAÇÃO DOS SITES DAS ASSOCIAÇÕES ACADÉMICAS..............................................................17

1.1.3 Arquitetura de Informação dos Sites.............................................................................17

1.1.4 Tipos de Conteúdo dos Sites..........................................................................................18

1.1.5 Design dos Sites.............................................................................................................18

CAPÍTULO 1 TECNOLOGIAS E FERRAMENTAS UTILIZADAS........................................................20

3. 4. PHP (PERSONAL HOME PAGE)..................................................................................................21

1.1.6 Vantagens da Utilização do PHP...................................................................................22

1.1.7 Desvantagens da Utilização do PHP..............................................................................22

3. 5. MYSQL................................................................................................................................22

3. 6. HTML..................................................................................................................................22

3. 7. HTML 5...............................................................................................................................23

1.1.8 Vantagens da Utilização do HTML 5..............................................................................25

3. 8. JAVASCRIPT............................................................................................................................25

3. 9. CSS......................................................................................................................................26

1.1.9 CSS3...............................................................................................................................26

1.1.10 Vantagens de Utilização do Css3...................................................................................27

3. 10. O CONCEITO WEB DESIGN.......................................................................................................27

3. 11. WEB DESIGN RESPONSIVE........................................................................................................28

1.1.11 Layouts flexíveis.............................................................................................................29

1.1.12 A Fórmula de Medidas Para Um Projecto do Desponsive Design..................................29

1.1.13 Conteúdos de imagens e vídeos flexíveis.......................................................................30

1.1.14 Viewport........................................................................................................................31

1.1.15 Media Queries...............................................................................................................32

3. 12. FRAMEWORKS PARA DESENVOLVIMENTO RESPONSIVO...................................................................33

1.1.16 O Bootstrap................................................................................................................1-34

1.1.17 A Foundation................................................................................................................1-2

3. 13. CMS...................................................................................................................................1-1

1.1.18 Vantagens da Utilização de Um CMS...........................................................................1-2

3. 14. JOOMLA 3.4.........................................................................................................................1-2

1.1.19 Vantagens do Joomla 3.4.............................................................................................1-1

3. 15. O VIRTUEMART.....................................................................................................................1-1

3. 16. SPOT.IM COMMUNITY...........................................................................................................1-3

1.1.20 Vantagens do Spot.IM..................................................................................................1-3

3. 17. WAMPSERVER.......................................................................................................................1-1

CAPÍTULO 2 DESENVOLVIMENTO DO WEBSITE.......................................................................2-1

3. 18. DESENVOLVIMENTO DO WEBSITE..............................................................................................2-2

3. 19. CRIAÇÃO DO MAPA DE SITE.....................................................................................................2-2

1.1.21 Vantagens de Um Mapa de Site...................................................................................2-2

1.1.22 Mapa do Website de ACAD UNICV...............................................................................2-3

3. 20. BACK OFFICE E FRONT OFFICE DO WEBSITE................................................................................2-1

1.1.23 Diagrama de Tarefas no Back Office do Website de ACAD UNICV................................2-2

1.1.24 Diagrama de Tarefas no Front Office do Website de ACAD-UniCV...............................2-3

3. 21. LAYOUT DE BAIXA FIDELIDADE - DESKTOP...................................................................................2-4

3. 22. LAYOUT DE BAIXA FIDELIDADE – TABLETS...................................................................................2-5

3. 23. LAYOUT DE BAIXA FIDELIDADE – SMARTPHONES..........................................................................2-5

3. 24. LAYOUT DE ALTA FIDELIDADE – DESKTOP....................................................................................2-2

3. 25. LAYOUT DE ALTA FIDELIDADE – TABLETS....................................................................................2-2

3. 26. LAYOUT DE ALTA FIDELIDADE – SMARTPHONES............................................................................2-2

1. Introdução

As tecnologias de informação e de comunicação abrem novas perspectivas à

sociedade do futuro. A informação, uma vez produzida, circula instantaneamente onde pode

ser recebida e tratada de modo a satizfazer as necessidades das pessoas que o recebe. A

Internet possibilita tambem através de um site, uma difusão rápida, através das novas

tecnologias de informação, o conhecimento, permitindo às empresas, pessoas não só melhorar

a sua eficiência mas fundamentalmente oferecerem novos produtos e serviços pelos quais os

consumidores, manifestam as suas preferências.

Segundo (Balarine, 2002) a Internet já exercita papel como local de apresentação

pública das organizações, proporcionando criar imagens, comunicar valores, possibilitar

acesso a informações e apresentar produtos e serviços. De outro lado, sua aplicação dirigida,

a Extranet, vem se transformando no canal específico para comunicações exclusivas com

clientes e fornecedores. A Intranet, por sua vez, já assumiu o papel de canal veiculador de

mensagens para o público interno, através de redes privadas seguras e econômicas.

Desta forma podemos concluir que um dos principais objectivos de um site é a

promoção da comunicação entre uma empresa ou instituição e o seus clientes, de forma a

criar um meio de ligação e interação pela ambas as partes, por isso, ter um site hoje, significa

estar conectado em todas as direcções e com os quatro pontos.

Através de um website é, hoje, permitido aceder a informação e fontes de informação

em bibliotecas, centros de documentação, serviços de informação e documentação e arquivos,

fazendo pesquisa em bases de dados, em linguagem natural ou controlada e tendo, para além

disso, acesso a monografias, artigos de periódicos, dissertações, actas de congressos,

comunicações e relatórios, enciclopédias e dicionários, etc.

Desta forma, para solucionar o problema de comunicação existente entre a ACAD-

UniCV e os alunos foi desenvolvido um website capaz de fornecer as vantagens acima

referidas acompanhando as novas tendências tecnológicas e de dar respostas as necessidades

da ACAD UniCV e dos alunos, tendo em conta a sua devida importância na promoção da

comunicação.

2. Problemática

Hoje em dia, para o sucesso de qualquer instituição é necessário a existência de um

site para a comunicação entre a instituição e os seus clientes. A ACAD-UniCV sendo uma

Instituição autónoma e independente tende a criar a sua própra identidade visual de forma a

ter um reconhecimento não só pela comunidade académica, mas tambem por outras pessoas e

instituições tanto nacionais como internacionais, ainda ela pretende colocar ao dispor dos

alunos os seus serviços de forma a atender as suas necessidades.

Tendo em conta que a maioria dos alunos da Universidade de Cabo Verde buscam as

informações na internet através do site da UniCV por meio de dispositivos móveis tais como

smartphones e tablets e muitas vezes as suas buscas não são atendidas de forma a satizfazer

as suas necessidades. A ACAD-UniCV tendo como um dos principais objectivos a satisfação

das necessidades dos alunos tem de cumprir com as suas obrigações, garantindo que as

informações relativamente a UniCV estejam ao alcance dos alunos de modo a satizfazer as

suas necessidades, desta forma, ela conclui então, que terá de ser criado uma outra forma para

fornecer aos alunos todas as informações relevantes aos seus estudos.

Abaixo estão citados alguns dos problemas que afectam tanto a ACAD-UniCV como

tambem os alunos devido a inexistência de um meio de Comunicação. São eles:

A ACAD-UniCV não é conhecida pela maioria dos estudantes;

As suas actividades realizadas não são comunicadas e nem promovidas;

Não há uma interação entre ela e os alunos devido a falta de um meio de interação

entre eles;

Muitos alunos não sabem da existência da ACAD-UniCV;

As informações da ACAD-UniCV não chegam nos alunos;

Os alunos muitas vezes não sabem para onde recorrer para a resolução dos seus

problemas;

Falta de promoção dos seus serviços para os alunos.

3. Objetivos

3. 1. Objetivo Geral

Este projecto tem como objectivo geral o desenvolvimento e a implementação do

website da Associação Académica dos Estudantes da Universidade de Cabo Verde como

sendo um meio de comunicação entre a ACAD UNICV e os alunos através do CMS Joomla 3

utilizando o Bootstrap com o PHP.

3. 2. Objetivos Específicos

Pesquisar as tecnologias e as metodologias e implementá-los para a criação de layouts

modernos tendo em conta o conceito do Design Responsivo;

Promover e divulgar a imagem da identidade visual da ACAD UNICV de forma a

proporcionar um reconhecimento por parte dos alunos, docentes e a direção da

UNICV;

Promover a interação e a comunicação dentro da comunidade académica através da

rede denominada “Comunidade ACAD”;

Integração do sistema de compras e vendas Online denominado “Shop ACAD”

através da extenção do Virtuemart;

Implemetação do sistema de pedido de documentos online através da ACAD UNICV.

4. Justificativa

Com as crescentes mudanças e com o rápido desenvolvimento tecnológico surgi cada

vez mais para as empresas e instituições novas formas de promoção de seus serviços. Hoje

em dia, quase todas as pessoas acedem a internet em busca de informações capazes de dar

respostas as suas buscas. Na internet são pesquisadas informações de todos os tipos, daí ser

ela a maior fonte de informações. É evindentemente que pesquisar na internet trás consigo

inumeras vantagens tais como: disponibilidade de variedades de informações, rapidez na

busca, interação com o utilizador, feedbacks, etc. Por esta razão várias são as instituiçoes que

hoje preferem usar a internet para a promoção dos seus serviços e da sua identidade.

Hoje pode-se notar que a maior parte das pessoas acedem a internet utilizando os

dispositivos móveis tais como tablets e smartphones graças as suas próprias características

tais como: Mobilidade, Portabilidade e Conectividade. Pode-se notar ainda, que na UNICV a

maior parte dos alunos acedem a internet através de um dispositivo móvel em busca de

informações.

Metodologia

Em termos metodológicos, esse projeto foi baseado nas técnicas de desenvolvimento web e

do design responsivo para a implementação de um design adaptável à diferentes tipos de

dispositivos móveis.

5. Metodologia

Primeiramente para a utilização dessas técnicas foram feitas pesquisas bibliográficas

(consulta em livros, sites relacionados com o CMS Joomla, Bootstrap, PHP, vídeo aulas).

Ainda foram feitas pesquisas sobre sites de Associações de Estudantes existentes na Europa e

na América, mas concretamente em Portugal e Estados Unidos.(ver anexo)

Para a implementação do projecto foi apresentado para o Doutor Salif Silva,

presidente do Gabinete da Comunicação e Imagem da UniCV (GCI) e a sua equipa, o

projecto do desenvolvimento do website, e juntamente com o orientador do projecto Mestre

Adelcides Rodrigues foram analisadas o protótipo e o design do website e finalmente depois

de uma cuidadosa análise, a proposta foi aprovada.

Aplicação de um teste de usabilidade onde um dos principais objectivos foi aplicar um

teste geral na aplicação a nível de funcionalidade, navegação, busca de informações, design e

estrutura de informação para ver se a aplicação corresponde aos objectivos inicialmente

traçados. O outro aspecto importante foi a aplicação do teste usabilidade nos usuários finais

para testar o comportamento dos usuários durante a interação com a aplicação onde foi

recolhido informaões, que depois de analizadas trouxeram grandes melhorias para a

aplicação.

6. Estrutura do Relatório

Este relatório encontra-se estruturado em quatro capítulos. O Primeiro capítulo trata-

se do Enquadramento Teórico, o Segundo Capítulo apresenta as Tecnologias e Ferramentas

Utilizadas, o Terceiro Capítulo apresenta todo o Processo de Desenvolvimento do Website,

enquanto que o Quarto Capítulo apresenta a Análise e Discussão dos Resultados.

No primeiro capítulo foi feito um enquadramento sobre o tema proposto, foi feita

uma abordagem sobre as Associações Académicas Universitárias, seu conceito e seu

funcionamento. Seguidamente foi feita uma apresentação da Associação Académica dos

Estudantes da Universidade de Cabo Verde (ACAD-UniCV), em seguida fez-se uma breve

análise comparativa sobre os sites das Associações Académicas Universitárias de

No segundo capítulo é apresentado um breve enquadramento sobre o Conceito das

Associações Académicas Universitárias, bem como a sua estrutura e funcionamento. Em

seguida fez-se uma breve apresentação da Associação Académica dos Estudantes da

Universidade de Cabo Verde (ACAD-UniCV), cujo o principal objectivo é o conhecimento da

ACAD-UniCV, tanto da sua estrutura, os seus objectivos e o seu funcionamento.

No terceiro capítulo foi aplicado uma comparação detalhada dos sites das seguintes

Associações Académicas Universitárias tomados como referências para a construção do

website da ACAD-UniCV. São eles: Associação Académica da Madeira, Associação

Académica do Aveiro, Associação Académica de Harvard e Associação Académica de

Califórnia, cujo o principal objectivo foi fazer uma comparação entre eles para a

implementação do website de ACAD-UniCV. As comparações form feitas tendo em conta a

Arquitetura de Informação, Design, e tipos de Conteúdos apresentadas nesses sites.

O quarto capítulo é apresentada todas as tecnologias e ferramentas utilizadas que

serviram de base e orientação para o desenvolvimento e a implementação do website. E assim

sendo, de uma forma muito breve apresenta-se uma descrição de todas as tecnologias e

ferramentas usadas, bem como as suas vantagens e desvantagens de sua utilização.

O quinto capítulo Apresenta todo o processo de desenvolvimento do website, desde a

instalação das ferramentas necessárias para o desenvolvimento do website, o processo da

criação dos layouts de baixa fidelidade, do design (as cores, tipografia, estrutura), bem como

as principais tarefas executadas durante todo o processo de desenvolvimento até o produto

final.

1. Enquadramento Teórico

3. 1. Associações Académicas Universitárias

O Associação Académica é, antes de mais, uma forma de participação política. O

envolvimento dos alunos em uma associação académica é uma liberdade voluntária. A

organização formal, a ausência de fins lucrativos, a entrega voluntária e o desempenho de

actividades por vontade própria, constituem as principais características do associativismo

segundo (Varga et al., 2009).

Segundo (Varga et al., 2009), a Associação Académica não é uma fraternidade

[república], nem um clube social, uma sociedade académica, ou um grupo extracurricular,

apesar de sob certas circunstâncias, poder acompanhar as actividades e funções de tais

grupos. Podemos definir a Associação Académica como uma associação de estudantes

inspirados por objectivos que assentam numa específica doutrina ideológica, normalmente,

apesar de não ser exclusivamente na sua natureza (…) os membros de uma a associação

académica (…) têm a convicção que, como jovens intelectuais, tem uma missão histórica

especial de atingir os objectivos que a geração antiga falhou, ou de corrigir imperfeições no

seu ambiente. a Associação Académica é uma combinação de resposta emocional e

convicção intelectual.

Dentro deste mesmo conceito de associação académica apontado por (Varga et al.,

2009), passamos a enquadrar, então, a ACAD-UniCV como sendo uma Associação

Académica solidificada e inspirada por objectivos, valores e uma missão que definem

determinados princípios ideológicos da própria ACAD-UniCV.

3. 2. Apresentação da ACAD UNICV

Segundo o Estatuto da ACAD-UniCV, a Associação Académica dos Estudantes da

Universidade de Cabo Verde, designada pelo acrónimo ACAD-Uni-CV, é uma associação

sem fins lucrativos e goza de personalidade jurídica e de autonomia administrativa, financeira

e patrimonial. A sua sede central fica no Campus de Palmarejo da Universidade de Cabo

Verde (Uni-CV), na cidade da Praia. É independente de qualquer força política, organização

religiosa ou outra instituição, nacional ou estrangeira. A ACAD-Uni-CV assume, respeita e

promove, autonomamente, os princípios da liberdade, da democracia, da equidade, da justiça,

do humanismo e da qualidade académica no seio da Uni-CV.

1.1.1 Gabinetes da ACAD UNICV:

Gabinete de Comunicação e Imagem;

Gabinete de Finalista;

Gabinete de Desporto;

Gabinete de Cultura, Artes e Eventos

Gabinete de Pedagogia e Acompanhamento Académico;

Gabinete de Cooperação e Acção Social;

1.1.2 Objetivos da ACAD-UniCV:

Defender os legítimos interesses dos estudantes junto dos órgãos dirigentes da

Uni-CV e demais entidades ligadas ao ensino superior;

Servir de elo de ligação entre os estudantes e os órgãos dirigentes da Universidade

de Cabo Verde na procura de soluções que correspondam às exigências da

formação e da vida académica dos estudantes da Uni-CV;

Contribuir para promoção da qualidade académica na Uni-CV, tendo em conta os

valores, princípios e opções fundamentais constantes dos Estatutos da

Universidade;

Contribuir para a preservação e promoção da boa imagem da Uni-CV e dos seus

estudantes no país e no estrangeiro;

Contribuir, com projectos e iniciativas que visem o desenvolvimento do ensino

superior em Cabo Verde;

Dinamizar intercâmbios culturais com outras instituições educativas do país e do

estrangeiro;

Dinamizar e promover actividades de carácter científico, pedagógico, desportivo,

recreativo e sociocultural, envolvendo estudantes, professores e funcionários da

Universidade de Cabo Verde;

Exercer outros fins decorrentes das leis e das normas regulamentares aplicáveis.

3. 3. Comparação dos Sites das Associações

Académicas

Para a implementação do website foi preciso analizar quatro sites de Associações

Académicas Universitárias que form tomados como referências, com o obejctivo de fazer

uma análise comparativa entre eles, recolhendo aspectos positivos e levando em conta

tambem aspectos negativos para melhor desenvolver o website da ACAD-UniCV. Abaixo

segue-se uma breve comparação entre eles tendo em conta os seguintes critérios: Arquitectura

de Informação (organização das sessões de conteúdos), Tipos de Conteúdos e Aspectos de

Design (cores, tipografia, Estilo ou Desenho).

1.1.3 Arquitetura de Informação dos Sites

Segundo (Agner, 2009), a arquitetura de informação pode ser compreendida como

quatro sistemas interdependentes, cada qual composto por regras próprias: são os sistemas de

organização, de navegação, de rotulação e de busca.

Sistema de Organização - Determina como é apresentada a organização e a

categorização do conteúdo.

Sistema de Rotulação - Define signos verbais (terminologia) e visuais para cada

elemento informativo e de suporte à navegação do usuário.

Sistema de Navegação - Especifica formas de se mover através do espaço

informacional.

Sistema de Busca - Determina as perguntas que o usuário pode fazer e as

respostas que irá obter no banco de dados.

Tendo em conta o conceito de Arquitectura de Informação apontado por (Agner,

2009), pode-se verificar que em termos de sistema de organização a apresentação e a

categorização dos conteúdos, sistema de busca, sistema de navegação e rotulação, eles

seguem uma mesma linha de arquitectura, onde as informações estão dispostas por secções,

em que cada secção estrutura-se em três colunas ou blocos: O bloco ateral esquerdo, bloco de

meio e o bloco lateral direito.

1.1.4 Tipos de Conteúdo dos Sites

O tipo de conteúdo desponibilizado nos sites tem de ir deacordo com as necessidades

dos usuários finais, e por isso as Associações Académicas Universitárias disponibilizam os

mesmos tipos de conteúdos em seus sites por terem em comum os mesmos objectivos, que é

a defesa do interesse dos estudantes junto da Universidade e junto de qualquer outra

organização. Há um conjunto de conteúdos que são comuns entre esses quatro sites. São eles:

Notícias, Informações Sobre Cursos, Lista de Actividades dos Estudantes, Vídeos,

Eventos, Desportos, Informações de Bolsas de Estudos e Projectos e Iniciativas

Académicas, ou seja, Eles são os conteúdos mais importantes para os alunos, por isso, estão

sempre presentes nos sites de Associações Académicas Universitárias.

1.1.5 Design dos Sites

Existe uma linha gráfica bastante idêntica entre estes sites, como podemos notar em

termos das cores utilizadas nesses sites se predomina bastante a cor cinza, tambem são

destacadas as duas outras cores, o azul e branco, que juntos fazem uma combinação perfeita.

Todos estes sites apostarm num design simples mas bastante atractivo e moderno sabendo

que eles foram projetados para uma comunidade académica bastante jovem.

A tipografia utilizada form dos tipos “Sem serfifas” que são os tipos de fontes

utilizadas para monitores.

Principios de design

CAPÍTULO 1 Tecnologias e Ferramentas Utilizadas

Para o Desenvolvimento do website de ACAD UNICV foram feitas pesquisas sobre

as várias tecnologias que dão suporte ao desenvolvimento de aplicações web, tendo em conta

as suas vantegens e desvantegens de seus usos no desenvolvimento focado para web. Abaixo

segue-se uma breve descrição sobre as principais tecnologias usadas no desenvolvimento do

website:

3. 4. PHP (Personal Home Page)

Segundo o site do php (www.php.net), o PHP é uma linguagem de programação

server-side que é executada no lado do servidor. É uma das linguagens mais utilizadas na

web. Milhões de sites no mundo inteiro utilizam PHP. A principal diferença em relação às

outras linguagens é a capacidade que o PHP tem de interagir com o mundo web,

transformando totalmente os websites que possuem páginas estáticas em páginas totalmente

dinâmicas. O utilizador através de um Browser faz uma solicitação ao servidor php e o

servidor envia de volta uma resposta através de um documento html para o utilizador. A

comunicação é feita através do protocolo http que é responsável pela comunicação com o

servidor. Na figura a abaixo é demostrada como funciona um site php.

<?php echo “ola mundo”; ?>

A página html é enviada

ao Usuário

A página html é enviada ao Usuário

A página é executada para se converter em html.PHP

O Usuário solicita uma página

ao servidor

.HTML

USUÁRIO

SERVIDOR

Figura 1 - Sintaxe Básica do PHP

http://www.php.net/

1.1.6 Vantagens da Utilização do PHP

O php é uma linguagem de programação server-side Open Source, ou seja, é

absolutamente gratuito;

Uma das suas grandes vantagens é que ele é multiplataforma, e graças a essa

facilidade ela pode rodar em vários servidores da windows mas tambem em

Linux, Unix entre outros sistemas operacionais e ele se integra a quase todos os

bancos de dados da atualidade;

Os conceitos básicos do php são de fácil aprendizagem;

O php possui uma bibleoteca bastante extensiva na internet sobre a referência da

linguagem.

1.1.7 Desvantagens da Utilização do PHP

A grande desvantagem do php é a parte de orientação a objectos que deixa a

desejar, mesmo depois da sua melhoria apartir da versão PHP 5, enquanto que o

java trabalha muito bem com a parte de orientação a objectos.

3. 5. MySQL

Segundo (Neves & Ruas, 2005), o MySQL é um sistema de gestão de bases de dados

relacionais, suporta SQL, é open source e é um dos SGBDs para utilização profissional mais

utilizado (conta com mais de 5 milhões de instalações activas) e é o mais conhecido a nível

mundial. O MySQL foi desenvolvido e é disponibilizado pela empresa MySQL AB Limited

Company, que actualmente vende um conjunto de serviços e produtos relacionados com a

tecnologia MySQL.

Figura 2 - Funcionamento de Um Site PHP

3. 6. HTML

Segundo (Rodrigues, 2014), o HTML (HyperText Markup Language) é a linguagem

de marcação interpretada pelos navegadores para poder representar informação. Esta

linguagem está presente em todas as páginas web que existem atualmente, e estas têm a

extensão HTML ou HTM. O HTML é composto por elementos HTML que contêm a

informação a apresentar. Os elementos são normalmente compostos por uma tag de início e

de fim, como podemos ver no exemplo seguinte a sintaxe básica de um documento html:

3. 7. HTML 5

Segundo (Rodrigues, 2014), o HTML 5 é a nova versão do html que anteriormrnte era

a versão 4. Hoje em dia, muitas das aplicações existentes situam-se na web, isto é, os recursos

e as infraestruturas situam-se em servidores partilhados e interligados através da internet. Isto

permite que, a partir de qualquer terminal e em qualquer lugar, o utilizador tenha acesso à

informação, aos arquivos e aos programas no momento do acesso à cloud . Sendo assim, o

mercado envolvente preocupou-se em criar aplicações cada vez mais ricas em vários aspetos

(conteúdo, design, funcionalidades, etc.) e para acompanhar essa vontade, o mercado criou

várias alternativas ao HTML, como por exemplo o Flash.

A versão 5 do HTML permitiu ao mundo Web tornar-se num ambiente propício para

desenvolver aplicações de software, por permitir criar páginas altamente dinâmicas com a

ajuda do JavaScript, e por ter retirado as dependências a extensões de terceiros. Pode por isso

constatar-se que, na web moderna, a ideia do que era uma aplicação e o que são páginas foi

<! DOCTYPE html >

<html>

<head>

<title> </title>

</head

<body>

</body>

</html>

Figura 3 - Sintáxe básica de um documento html

alterada. As aplicações podem ser acedidas a partir de diferentes dispositivos, o espaço em

disco deixa de ser necessário para instalar aplicações, as atualizações de programas são

transparentes ao utilizador, entre outras vantagens. Assim, a web passou a ser um das

plataformas mais usadas para disponibilizar programas informáticos aos utilizadores. Alguns

dos objetivos definidos pelo WhatWG para criar a especificação do HTML5 foram:

Novas funcionalidades baseadas no HTML, CSS, JavaScript e DOM;

Redução da necessidade de uso de extensões, como por exemplo o Flash;

Melhor tratamento de erros;

Mais tags e menos scripting;

Independência relativamente ao dispositivo.

Novas funcionalidades do HTML5

Um dos principais objetivo de HTML5 é facilitar a manipulação dos elementos

possibilitando o desenvolvedor a modificar as características dos objetos de forma não

intrusiva e de maneira que seja transparente para o utilizador final. De acordo com o site

W3schools, algumas das novas funcionalidades mais interessante em HTML5 são:

O elemento <canvas> para desenho em 2D. O elemento canvas dá-nos a

possibilidade de desenhar gráficos, em tempo real, na tela do navegador via

javascript. O único elemento HTML necessário para isso é o elemento canvas,

todo o resto é feito pelo javascript;

Os elementos <video> e <audio> para reprodução de mídia. Referentes as versões

anteriores do HTML5 não houve um padrão para mostrar um vídeo ou áudio em

uma página Web, para a exibição desses recorre-se a utilização de Plug-in (como

o flash), o que causa alguns constrangimentos porque diferentes navegadores

podem ter diferentes plug-ins. Uma das novas funcionalidades do HTML5 vem

para resolver esse problema, definindo dois novos elementos que especifica uma

forma padrão para incorporar vídeo e áudio em uma página Web com os

elementos <video> e <audio>;

Suporte para armazenamento local. Com as novas funcionalidades do HTML5,

agora as páginas Web podem armazenar dados localmente no navegador do

utilizador, antes isso só era possível com os cookies. Portanto a Web Storage é

mais seguro e mais rápido. Os dados não estão incluídos com cada solicitação de

servidor, mas utilizados apenas quando solicitado. Também é possível armazenar

grandes quantidades de dados, sem afetar o desempenho do site. Os dados são

armazenados sem pares chaves, e uma página Web só pode ter acesso aos dados

armazenados por si só;

Novos elementos de conteúdo específico, como <article>, <rodapé>, <header>,

<nav> e <section>. Hoje, vários elementos em HTML 4.01 são obsoletos, nunca

utilizado, ou não utilizado da maneira que eles se destinam. Todos esses

elementos foram removidos ou reescritos em HTML5. Para melhorar a

usabilidade da internet nos dias de hoje, o HTML5 também incluiu novos

elementos como <article> para definir um artigo, <rodapé> para definir um

rodapé para um documento ou secção, <header> para definir um cabeçalho para

um documento ou secção, <nav> para definir links de navegação e <section> para

definir uma secção em um documento;

Novos controlos de formulário, como calendário, data, hora, email, url e pesquisa.

1.1.8 Vantagens da Utilização do HTML 5

Uma das vantagens da utilização do HTML5 é o facto de após estar concluído vier a

ser suportado pelas maiorias das plataformas e os browsers existentes, o que trará

desenvolver várias versões de aplicação para as deferentes plataformas. Também uma

outra vantagem é os benefícios que advêm da introdução de novos elementos. Já é

conhecido que a versão anterior de HTML5 enfrentava alguns constrangimentos,

principalmente no que refere com a utilização de banners, vídeos, áudios e outros, nas

páginas Web recorrendo a utilização de outros recuso como linguagem e aplicativos

(Java, flash, entre outros) o que torna o site mais “pesados” (pesado) e complexo.

O HTML5 vem para resolver esses problemas com a inserção de novos elementos já

mencionados no subcapítulo 2.2.1, permite estruturar textos, imagens, banners, vídeos

e gráficos de forma mais simples e sem a necessidade de outras linguagens ou

aplicativos de suporte.

3. 8. Javascript

Segundo (Rodrigues, 2014), os tempos iniciais da internet, o acesso à web era efetuado pela

consulta de páginas HTML simples. Caso o utilizador desejasse consultar outro conteúdo ou

até ter algum tipo de interação com o próprio, era necessário efetuar um novo pedido ao

servidor, que resultava numa nova página HTML. Dominava então, do lado do cliente, uma

web totalmente estática.

Existindo a necessidade de interação do utilizador com a página HTML, nasceu a tecnologia

JavaScript. A primeira versão do JavaScript, inicialmente denominada de LiveScript foi

criada em maio de 1995 por Brendan Eich, que trabalhava na Netscape, e que atualmente é

membro da equipa da Mozilla. Os anos seguintes da tecnologia foram marcados pela

alteração no nome para JavaScript e pela intervenção da Microsoft ao criar uma tecnologia

similar, o Jscript. As duas tecnologias tinham os mesmos

objetivos. O que as diferenciavam eram essencialmente os componentes que estavam

desenvolvidos para determinados navegadores, isto é, certas funcionalidades da linguagem

funcionavam corretamente no NetScape e não no Internet Explorer, ou vice-versa foi criada

em maio de 1995 por Brendan Eich, que trabalhava na Netscape, e que atualmente é membro

da equipa da Mozilla.

3. 9. CSS

Segundo (Rodrigues, 2014), o Cascading Style Sheets (CSS) é utilizado para

especificar a aparência e a formatação de um documento HTML. O seu principal benefício é

promover a separação entre a formatação e o conteúdo de um documento. No enquadramento

do HTML5 e do JavaScript o CSS não é um elemento indispensável, isto é, podem ser

implementadas funcionalidades HTML5 e JavaScript sem recorrer ao CSS. No entanto, o

CSS permite apresentar estas funcionalidades de uma maneira mais agradável ao utilizador.

Adicionalmente, facilita a mudança do estilo de apresentação e reduz o tamanho dos ficheiros

HTML, já que os elementos relativos à apresentação são removidos.

1.1.9 CSS3

Com a atualização de CSS2 foram incorporados muitas novidades interessante, o que

melhorou muito a qualidade dos websites desenvolvidos, mas após algum tempo o

CSS2 está a se tornar obsoleto, foi aí que surgiu o CSS3. Com o CSS3 muitas novas

propriedades foram inseridas como:

Bordas, onde foram inseridos a border-color que define a cor da borda, border-image

que define uma imagem como bordam, border-radius que arredonda os cantos das

bordas e box-shadow que nos possibilita colocar uma sombra em um determinado

box, elemento ou imagem;

Fundo (background), onde foram inseridos background-origem quando colocamos

uma imagem de fundo em um elemento, background-clip onde o fundo começa a

ser desenhado, background-size onde define o tamanho de background.

Texto, onde foram inseridos elementos como text-shadow que define a sombra de

texto, text-overflow que define o que acontece com o texto que sobra do div, ou

seja, quando o texto é maior do que o espaço reservado para ele.

1.1.10 Vantagens de Utilização do Css3

A grande vantagem da modularização está no fato de que o desenvolvimento das

funcionalidades de um módulo não mais depende do andamento dos outros módulos

como aconteceu com o desenvolvimento das versões anteriores da CSS. Isto

possibilita que os fabricantes comessem a implementar, desde já, funcionalidades

previstas em módulos mais adiantados no seu desenvolvimento. Muitas

funcionalidades das CSS3 já vêm sendo largamente empregadas.

3. 10. O Conceito Web Design

Tal como acontece, na maior parte das vezes, com o aparecimento de uma nova

actividade emergente, num determinado domínio, é difícil fornecer uma definição concisa e

amplamente aceite para caracterizar o conceito subjacente: o que é o Web Design? Segundo

(Zeldman, 2007], Web Design é a criação de ambientes digitais que facilitam e incentivam a

actividade humana, reflecte ou adapta-se a vontades individuais e conteúdos; e muda

graciosamente ao longo do tempo enquanto mantém a sua identidade”.

Por outro lado, (Santos, 2009), Web Design é uma actividade no âmbito da

Engenharia Web que consiste na produção de páginas Web na perspectiva do utilizador. Esta

actividade combina, essencialmente, competências técnicas e artísticas de forma a potenciar o

papel dos seguintes conceitos, assumindo um determinado domínio de conteúdo, a

informação vocacionada para alimentar as exigências de um público-alvo:

Usabilidade – é a facilidade com que os utilizadores podem utilizar uma

ferramenta para executar uma tarefa específica;

Aparência – é o aspecto ou aquilo que se mostra superficialmente (ou, digamos, à

primeira vista);

Visibilidade – é a destreza com que os utilizadores localizam e interpretam a

informação.

3. 11. Web Design Responsive

O famoso RWD (sigla em inglês para Responsive Web Design) foi chamado pela

primeira vez em 2010 por Ethan Marcotte em seu artigo A List Apart intitulado

“Responsive Web Design”.

Segundo (Marcotte, 2011), Responsive Web Design está relacionado com o conceito

de desenvolver websites que sejam capazes de se adaptar ao tamanho de ecrã do

dispositivo utilizado (desktop, tablets e Smartphones).

Na figura abaixo podemos ver um exemplo de Responsive Web Design.

Figura 4 – Exemplo Responsive Web Design1

1 Fonte: http://andrechiquito.com.br/design-responsivo-sorocaba.php

Para a implementação de um design responsivo requer a utilização de três nocções

fundamentais para a sua utilização. São elas: layouts flexíveis baseados em grids, com

dimensões relativas; Conteúdos de imagens e vídeos flexíveis, através de redimensionamento

dinâmico e por fim os media queries que são expressões que verificam as condições das

páginas, aplicando diferentes regras de css para diferentes cenários.

1.1.11 Layouts flexíveis

Para implementar um layout flexível é necessário ter em conta os tipos de medidas

css. Deacordo com (Zemel, 2014), temos quatro tipos de medidas no css (pontos, pixel,

percentagem, em), e essas medidas são defenidas da seguinte forma:

Pixel (px): é a unidade de medida fixa mais utilizada no CSS. É o menor elemento

num dispositivo de exibição. Profissionais de web design preferem usar este tipo de

medida para fazer uma estrutura HTML/CSS em pixel perfect, não medindo esforços

para estruturar seus documentos para que fiquem idênticos à imagem do layout.

Ponto (pt): são tradicionalmente utilizados para CSS de impressão. Um ponto é igual

a 1/72 polegadas. Assim como o pixel, ponto é uma unidade de tamanho fixo.

Ems (em): é uma unidade escalável. Quando se trata do tamanho da fonte, 1em é

igual ao tamanho atual da fonte do elemento pai. Por exemplo, se o tamanho da fonte

do elemento é 12pt, 1em é igual a 12pt. Ems são escaláveis por natureza. 2em seria

igual a 24pt, 0.5 seria 6pt, etc.

Percentagem (%): é muito parecida com a unidade em, mas possui algumas

diferenças fundamentais. O atual tamanho da fonte é igual a 100% ou seja, 12pt

equivalem a 100%.

1.1.12 A Fórmula de Medidas Para Um Projecto do Desponsive Design

Marcotte apresentou a seguinte fórmula que permite a conversão de todas as medidas

absolutas em medidas relativas:

Alvo - Elemento-alvo com a medida atual;

Contexto - Onde o elemento-alvo está (baseado no elemento pai);

Resultado - O valor relativo que se está procurando.

Esta fórmula serve tanto para o cálculo de tamanho de fontes quanto para medidas de

layout (Marcotte, 2011).

Exemplo 1 - Aplicando o cálculo a um texto com tamanho de fonte 24px:

O Alvo é o título de 24px, enquanto que o Contexto é o elemento pai neste caso o

próprio <body> visto que o body é o contexto geral.

Exemplo 2 - Com o tamanho de fonte de 100%, ou no caso 16px Agora considerando

que existe uma hiperligação dentro do título com tamanho de fonte de 11px. Neste caso o

contexto muda, agora o elemento alvo não é mais o contexto geral, <body>, mas sim o

Elemento que ele está inserido, neste caso o título de 24px.

Marcotte (2011) diz que quando as casas decimais são extensos, devemos deixar até

quatro casas (0.4583), enquanto que (Zemel, 2014), diz-nos para realizarmos os nossos

próprios testes e optar pelos valores que melhor nos convence.

Alvo ÷ Contexto = Resultado

24 / 16 = 1.5

11 / 24px = 0.45833333333333em

1.1.13 Conteúdos de imagens e vídeos flexíveis

Deacordo com (Sampaio, 2013), A ideia por trás das imagens fluidas consiste em

manter as imagens no tamanho máximo e que estas poderão ser usadas. Não são definidos

quaisquer valores para altura e largura. O browser está assim encarregue de redimensionar o

tamanho das imagens quando necessário, usando o css para orientar o tamanho relativo de

cada uma. Como resultado as imagens apresentam as suas dimensões originais sempre que a

largura não exceda a largura do contexto onde se inserem. Caso contrário são

redimensionadas. Os browsers actuais são capazes de manter a resolução das imagens

intactas mesmo que as imagens se apresentem em escala diferente. A adaptação das imagens

ao tamanho do elemento em que se encontra consegue-se aplicando um max-width de 100%.

Para videos também podem ser aplicadas: as mesmas soluções:

Segundo a documentação sobre max-width do W3C (http://ow.ly/bcKdv), essa

propriedade CSS permite restringir larguras de conteúdo dentro de um determinado intervalo.

No caso, nosso intervalo foi 100%. Em outras palavras, a regra do max-width no CSS

significa algo como: as imagens podem ter qualquer largura até no máximo 100%. É claro

que é 100% do elemento em que estão contidas, ou seja, do div que a imagem está inserida.

1.1.14 Viewport

Viewport é o espaço disponível para a página ser renderizado no navegador, é todo o

espaço branco de um navegador onde a página é exibida e pode ser medido pelo javascript

através de window.innerWidth e window.innerHeight, aponta (Lopes, 2013).

Todo navegador moderno permite que o Utilizador faça um zoom no conteúdo da

página, é um recurso interessante para páginas que não foram desenvolvidas para dispositivos

com ecrãs de tamanhos diferentes. Quando o Utilizador dá zoom, de 200% por exemplo em

uma página e, nela existe uma imagem de width: 300px, esta ficará com 600px de largura,

img {max-width: 100%}

Img, object {max-width: 100%}

isso é o que chamamos de CSS pixel, neste caso, o CSS pixel faz os 300px da imagem serem

renderizados para 600px físicos. A regra é:

Ao dar zoom os elementos da página ficam maiores e a capacidade de exibi-los nos

ecrãs é menor, pois o viewport diminuiu. Isso ocorre porque o tamanho dos ecrãs é medido

em pixels físicos e o tamanho do viewport é medido em CSS pixels, que mudam conforme o

zoom aumenta. O zoom usado nos celulares são chamados de page scale, diferente do

desktop, chamado page zoom, o page scale simplesmente dimensiona a parte visível da

página, ele não altera o design da página, o site contínua rende rizado, o zoom só faz a

visualização de um pedaço específico da página, ou seja, o page zoom altera o tamanho do

viewport e o page scale altera o quanto vemos o viewport, mas ele continua igual (Lopes,

2013).

É neste contexto que Lopes refere ao termo dois viewport, um representa a área

disponível para a página, chamado de layout viewport, onde no iPhone mede 980px físicos e

o visual viewport que é o tamanho que vemos atualmente na ecrãs. Abrir uma página web

projetada para desktop em um celular é uma experiência pouco agradável, o correto seria

desenvolver uma página otimizada para mobile que não demande tanto zoom e que mostre o

conteúdo em tamanho e formato interessante para ecrãs pequena. Deixar a página com layout

fixo de 960px, por exemplo, não seria a melhor solução. Criar a página usando porcentagens

como width:100% no elemento principal também não irá resolver, porque o layout viewport é

grande - 980px no caso do iPhone citado acima. A página será mostrada como se fosse de

desktop, com zoom mínimo e conteúdo praticamente ilegível (Lopes, 2013).

Figura 5 - Viewport Definido no CSS

Nº de Pixel físico = Nº de css Pixel x Zoom

@viewport {width: device-width;}

1.1.15 Media Queries

Marcotte (2010) apresentou as três técnicas do design responsivo: layout fluido,

mídias flexíveis e media query, onde uma página desenvolvida com layout fluido, já pode ser

considerada responsivo, mas somente com esta técnica, não se resolve todos os problemas

(Lopes, 2013).

A media query é um mecanismo para identificar não só os tipos de media com os

quais está a lidar mas para inspecionar as características físicas dos dispositivos e browsers. É

com a media query que se torna possível ocultar, fazer aparecer e reposicionar elementos e

interações conforme a resolução atual que esta a ser usada no momento. Afinal, o site não

precisa de ter, exatamente, a mesma aparência e disposição de seus elementos em qualquer

resolução. Esta técnica é a principal aliada do layout fluido, é uma técnica disponível no CSS

que permite trabalhar com design condicional, para que os elementos possam comportar-se

de maneiras diferentes à medida que resolução do navegador mude. (Lopes, 2013). Para Cada

media query é iniciado pelo tipo de media (media type) selecionado, segue se a query

proporcionalmente dita, que é declarada entre parêntesis, min-width e o seu valor.

Figura 6 – Exemplo de Aplicação Media Queries

Com isso está a dizer: se (é um dispositivo de ecrã) e (sua largura está entre 320 e 480), o

<body> terá uma cor do fundo Azul.

Mas criar media query para cada tamanho de ecrãs existente não é uma boa prática.

(Lopes, 2013), relata a importância do layout fluido no desenvolvimento de páginas Web,

pois o design irá se adaptar naturalmente a várias resoluções e só quando necessário, as regras

de media query serão aplicadas. No entanto a questão surge: quando tomar esta decisão?

Um conceito chamado breakpoint, define os pontos onde o layout vai ser ajustado por

causa de uma resolução diferente (Zemel, 2014).

@media screen and (min-device-width: 320px) and (max- device-width: 480px) {

body {background-color: blue ; }

}

3. 12. Frameworks Para Desenvolvimento Responsivo

Os frameworks são bibleotecas prontos de um determinado linguagem de

desenvolvimento como por exemplo temos o JQUERY que é uma bibleoteca extensiva da

linguagem JAVASCRIPT, cujo o objetivo é facilitar os desenvolvedores no desenvolvimento

de suas aplicações, tornando o trabalho mais rápido, diminuindo o custo do mesmo,

facilitando tambem a manutenção de um projeto utilizando o reaproveitamento de códigos

contido na própria biblioteca.

Os dois frameworks mais utilizados no desenvolvimento web responsivo é o

Bootstrap e o Foundation. O Bootstrap trabalha com LESS e o Foundation trabalha com

SASS. O Sass e o Less são pré-processadores de CSS que permitem estender esta linguagem,

suportando por exemplo a existência de variáveis funções e operações básicas sobre cores e

medidas. E por estas razões são os dois frameworks mais utilizadas. Abaixo segue-se uma

breve descrição sobre estes frameworks.

1.1.16 O Bootstrap

Figura 7 - Responsive Design - Bootstrap2

Segundo o site do Twitter Bootstrap, o Bootstrap é um framework de front-end

poderoso, elegante e intuitivo para um desenvolvimento web fácil e rápido. Ele foi criado por

Mark Otto e Jacob Thornton, ambos engenheiros do Twitter. Trabalha com um

um grid responsivo de 12 colunas correspondentes a uma largura de 960px, possui dezenas de

componentes, plugins javascript, tipografia, controle de formulários. O bootstrap requer o o

doctype html5 para trabalhar.

Segundo (Schmitz, 2014), o Bootstrap é, basicamente, um kit básico contendo

diversos componentes web prontos para que você possa desenvolver a sua aplicação

web/mobile de forma mais fácil e objetiva, sem necessitar um sólido conhecimento em 2 Fonte: http://getbootstrap.com

Javascript e CSS para isso. Este framework está estritamente ligado ao front-end e a camada

View do padrão MVC. Ele não interfere em nada outras tecnologias ou linguagens, pois o seu

foco é o “desenho” da sua aplicação, sendo “montado” exclusivamente com html puro.

O Bootstrap nasceu como uma biblioteca ligada ao Twitter (o nome era “Twitter

Bootstrap”), no qual a equipe de desenvolvimento usa para o desenvolvimento desta

aplicação, e como o resultado ficou muito bom, resolveram disponibilizar de forma gratuita

para a comunidade. Com o avanço do produto, tendo ajuda de diversos desenvolvedores, o

framework front-end evolui para esta terceira geração, na qual chamamos apenas de

Bootstrap.

Daniel Schmitz diz que o Bootstrap é utilizado para desenhar telas em html5, que

serão acessadas via navegador web ou dispositivo mobile. Tudo que você precisa saber sobre

Bootstrap é, na verdade, html5. Com ele, podemos criar sites inteiros e estruturas complexas,

mas que podem ser acessadas facilmente em diferentes dispositivos. Também podemos criar

telas com tabelas, formulários, janelas e controles complexos. Pode-se facilmente criar um

sistema web, apenas utilizando este framework, tomando as devidas precauções. Também é

possível criar um site inteiro, apenas com o Bootstrap, como iremos rever nos diversos

exemplos desta obra.

Por outro lado (Spurlock, 2013), disse que desde que o Bootstrap foi lançado em

Agosto de 2011, ganhou popularidade. Ele tem evoluído de ser um projeto inteiramente

apenas orientado a CSS para incluir uma série de plugins, componentes JavaScript e ícones

que vão de mãos dadas com formas e botões. Ele dispõe de 12 colunas, com um grid de

940px. Um dos destaques é a ferramenta de construção no site da Bootstrap, onde você pode

personalizar a compilação de acordo com seu necessidade, escolhendo os CSS, plugins, e

componentes JavaScript para incluir em um projecto de site.

1.1.17 A Foundation

Figura 8 - Design Responsivo - Foundation3

Segundo o site da da Zurb Foundation, o foundation é o primeiro e mais avançado

quadro responsivo front-end do mundo. Ele permite que você crie rapidamente protótipos,

sites e aplicativos que funcionam em qualquer dispositivo (smartphones através de desktops e

monitores de TV) com uma biblioteca de componentes testados.

Segundo (Silva, 2014), entre tantos diferenciais do framework destacam-se os

seguintes vantagens:

Semântica – Toda a marcação HTML usada foi projetada de modo a preservar o

valor semântico dos elementos, resultando em uma estruturação limpa e de

carregamento otimizado.

Mobile first – Adoção da filosofia mobile first para o design responsivo,

priorizando o desenvolvimento para dispositivos de pequeno porte e acrescentando

melhoria progressiva para servir dispositivos maiores e desktop, exatamente como

preconizam as boas práticas de design responsivo.

Personalização – Possibilidade de personalizar o framework definindo o download

dele para apenas os plugins a serem usados no projeto, bem como personalizar as

larguras de colunas, cores, tamanhos de fontes etc.

3 Fonte: http://foundation.zurb.com/

http://foundation.zurb.com/

Profissionalismo – Milhares de designers e desenvolvedores dependem do

Foundation. ZURB oferece, também, suporte comercial, treina- mento e consultoria

relacionados ao framework.

Na verdade, a Foundation tem sido utilizada com dezenas de tecnologias CMS back-end

e, é usado por centenas de milhares de sites todos os dias para entregar locais responsivos. É

construído com HTML, CSS e Javascript, os componentes fundamentais da Web.

3. 13. CMS

Segundo a documentação do Joomla um CMS é Um sistema de gerenciamento de

conteúdo é um software que mantém o controle de cada parte do conteúdo em seu site, bem

como a sua biblioteca pública local mantém o controle dos livros e os armazena. O conteúdo

pode ser simples texto, fotos, música, vídeo, documentos, ou apenas sobre qualquer coisa que

você pode pensar. Uma grande vantagem do uso de um CMS é que ele requer quase nenhum

conhecimento ou habilidade técnica para gerir. O CMS gere todo o seu conteúdo. Os CMS

mais populares são: Joomla, Wordpress e o Drupal.

1.1.18 Vantagens da Utilização de Um CMS

Abaixo estão citadas um conjunto de vantagens de um CMS deacordo com (Vieira,

2010):

Permite criar, organizar, editar, inserir conteúdos em tempo real (imagens, texto,

Vídeos etc);

Extensível e modular;

Funcionalidades para todas necessidades;

Facilidade de Instalar e Hospedar;

Administração do conteúdo sem conhecimento técnico de linguagem de programação

no qual o CMS foi Desenvolvido;

Flexibilidade da adaptação do layout;

Múltiplos usuários (editor, registrado);

Segurança, escalabilidade e ampliação;

3. 14. Joomla 3.4

Figura 9 - Logotipo do Joomla4

Segundo (Graf, 2012), A palavra Joomla é um derivado da palavra Jumla da língua

Swahili Africano e significa "tudo juntos ", é um sistema livre para criação de websites. É um

projeto de código aberto, e está constantemente em movimento. Tem sido extremamente bem

sucedida por sete anos e agora é um dos CMS mais populares do mundo, com milhões de

usuários.

O projeto Joomla é o resultado de uma discussão acalorada entre a Fundação Mambo,

que foi fundada em Agosto de 2005, e sua equipa, em seguida, para o desenvolvimento.

Joomla é um desenvolvimento do bem sucedido sistema Mambo, e é usado em todo o mundo

para homepages simples e complexo para sites de empresas também. É fácil de instalar, fácil

de gerenciar e muito confiável. A equipa de Joomla tem organizado e se reorganizou ao longo

dos últimos sete anos para melhor atender às demandas do usuário.

1.1.19 Vantagens do Joomla 3.4

A Nova Versão do Joomla 3.4 oferece-nos algumas vantagens em relação as outras

versõs anteriores deacordo com (Graf, 2012). Essas vantagens são:

O painel administrativo do Joomla 3.4 é responsivo, foi montado com grid de

Bootstrap e pode ser exibido muito bem em todos os navegadores de dispositivos

móveis;

Joomla tem uma nova interface de usuário;

Joomla 3.0 usa a biblioteca jQuery de JavaScript;

O instalador web é mais fácil e apenas um procedimento de 3 passos;

4 Fonte: https://www.joomla.org/

https://www.joomla.org/

Os pacotes de idiomas podem ser instalados diretamente a partir do gerenciador de

extensão;

O motor de pesquisa Smart Search, vem com muitas melhorias;

TinyMCE WYSIWYG editor vem em uma versão mais recente (3.5.6);

3. 15. O Virtuemart

Figura 10 - logotipo do Virtuemart5

Deacordo com (Eberhardt, 2005), VirtueMart é uma aplicação de carrinho de compras

para a vendas online de bens através da internet. É um componente para um sistema de

gerenciamento de conteúdos chamado Joomla, e não pode ser utilizado sem o Joomla.

Instala-se facilmente usando o componente automático e Module Installer no painel da

administração do Joomla. É destinado para uso em comércio eletrónico em pequenas, médias

e grandes empresas on-line. Assim, cada usuário que quer construir uma loja online pode usar

esse componente para vender algo aos Clientes.

Por outro lado, deacordo com o manual do Virtuemart designado “ Virtuemart User

Manual” o virtuemart possui as seguintes características:

Gerenciar um número ilimitado de produtos e categorias;

Usá-lo como uma loja ou apenas como um Catálogo vender produtos para download;

Possui um poderoso Web-Interface de Administração;

Produto Import & Export usando arquivos CSV;

Adicionar imagens e arquivos (como Spec Sheets e Folhetos) a um produto,

Adicionar atributos (como tamanho ou cor) para os seus produtos;

5 Fonte: http://virtuemart.net/

Gerir os seus Clientes em Grupos Shopper;

Atribuir mais de um preço para um produto: cada Grupo Shopper tem o seu próprio;

Notificar Shoppers quando um produto é de volta ao estoque;

Os clientes podem adicionar seus próprios endereços de envio;

Deixar seus clientes facilmente buscar produtos através de uma pesquisa de recursos

Formulário de produtos específicos, definindo-as em especial;

Deixar seus clientes saber quando um produto estará disponível novamente;

Os clientes podem ver, em que momento um produto enviará geralmente, na página

de produtos-details (com imagens agradáveis!);

Os clientes podem gerenciar suas contas de usuário (registro obrigatório);

O Shopper pode ver todos os seus pedidos (e Detalhes do pedido);

Confirmação da Ordem Mail (customizável!) É enviado para Shopper;

Uso de criptografia SSL seguro (128-bit).

Estas são as principais características que o Virtuemart possui, tonando-o uma forte

ferramenta para implementação de comércio eletrónico. O virtuemart foi exclusivamente

desenvolvido para joomla, e a sua integração no joomla é fácil e faz uma combinação perfeita

com o joomla, e por esta principal razão foi o virtuemart escolhido para ser implementado no

Joomla.

3. 16. Spot.IM Community

Figura 11 - logotipo do Spot.IN6

Deacordo com o site de da Spot In Community, a empresa foi fundada em 2012 por

Nadav Shoval e Ishay Green. O Spot.IM é o criador do primeiro "em todos os lugares" rede

social, capacitando os proprietários e editores de website para transformar seus sites em uma

rede social impulsionado por seu próprio conteúdo. A tecnologia da Spot.IM permite aos

6 Fonte: https://community.spot.im/

https://community.spot.im/

editores ter de volta a propriedade da conversa acontecendo em torno de seu conteúdo,

libertando-os de ter que depender de, redes sociais externos maiores para fornecer o espaço

social para engajamento do conteúdo da comunidade.

1.1.20 Vantagens do Spot.IM

O Spot.IM é gratuito e é de fácil costumização e Integração;

Aplicativo disponível para IOS, Android;

Comentários em tempo real - os usuários digitação e comentários enviados são

vistos em tempo real;

Notificações - Os leitores são imediatamente notificado sobre novos comentários e

conversas quentes;

Mensagens Privadas – Os visitantes do site podem falar em partivular e compartilhar

paixões e interesses comuns;

Experiências de bate-papo – A interface do usuário de chat é integrado com

comentários para estimular conversas vibrantes;

O Spot.IM é otimizado para todos os dispositivos.

3. 17. WampServer

Figura 12 - logotipo do WampServer7

7 Fonte: http://www.wampserver.com/en/

http://www.wampserver.com/en/

“O WampServer é um ambiente de desenvolvimento web do Windows. Ele permite

criar aplicações web com Apache, PHP e um banco de dados MySQL. Paralelamente,

phpMyAdmin permite que você gerencie facilmente seus bancos de dados.” (BOURDON,

2015).

Por outro lado, (Nina, 2011), diz que o WampServer é a abreviatura do pacote:

Apache, MySQL e PHP no sistema operacional Microsoft Windows. O servidor HTTP

Apache é o software de servidor web. O PHP significa Hypertext Preprocessor. É uma

espécie de linguagem HTML incorporado que executada no servidor. O MySQL Server é um

pequeno sistema de gerenciamento de banco de dados relacional. Inicialmente, eles são

independente um do outro, no entanto, eles são sempre utilizados em conjunto, e têm graus de

compatibilidade cada vez mais elevados. Então, esses pacotes formaram uma plataforma de

aplicações web poderoso que é o WampServer.

CAPÍTULO 2 Desenvolvimento do Website

3. 18. Desenvolvimento do Website

Neste capítulo estão apresentadas todas as etapas seguidas durante todo o processo de

desenvolvimento do website.

3. 19. Criação do Mapa de site

Deacordo com (Majer, 2009), um Mapa de Site é uma espécie de índice de um site

criado de tal forma a representar a estrutura de navegação, em geral estática, de um site.

Não existem limites para desenvolvimento visual de um mapa do site. O importante é

que ele traga facilidades ao usuário, que busca uma forma de entender a dimensão do site e

facilidades para localização de informação eventualmente relevante. A maneira mais comum

de se apresentar um Mapa do Site é através de uma página web contendo uma simples lista,

onde seus itens (trechos de textos) são links que apontam para as páginas do site.

“Para um usuário que visita um site, o mapa do site deve servir como apoio para a

navegação e o entendimento da estrutura do site objetivando uma visão geral da estrutura do

site e rápido acesso a qualquer página desta estrutura.” (Majer, 2009).

1.1.21 Vantagens de Um Mapa de Site

Ele ajuda o usuário a navegar e compreender o seu site;

Ele ajuda o motor de busca “spiders” rastejar através de seu site;

O tema do site é compreendido;

Torna o site mais amigável aos usuários;

Melhora a navegação.

1.1.22 Mapa do Website de ACAD UNICV

Home

Acad UniCV

o Acad ENG

o Acad ECCA

o Acad SV

Apresentação

o Historial

o Orgãos Sociais

o Documentos

Gabinetes

o Gabinete de Comunicação e Imagem

o Gabinete de Finalista

o Gabinete de Desporto

o Gabinete Cultura Arte e Eventos

o Gabinete Pedagogia e Acompanhamento Académico

o Gabinete Cooperação e Acção Social

Alunos

o Reclamações

o Pedido de Documentos

o Pedido de Cartão de Sócio

Sócios

o Como Ser Sócio

o Quem Poderá Ser Sócio

http://localhost/site_acad/index.php/socios/quem-podera-ser-socio

http://localhost/site_acad/index.php/socios/como-ser-socio

http://localhost/site_acad/index.php/socios

http://localhost/site_acad/



http://localhost/site_acad/index.php/component/sppagebuilder/page?Itemid=253

http://localhost/site_acad/index.php/2015-11-01-23-41-37/gabinete-cooperacao-e-accao-social

http://localhost/site_acad/index.php/2015-11-01-23-41-37/gabinete-pedagogia-e-acompanhamento-academico

http://localhost/site_acad/index.php/2015-11-01-23-41-37/gabinete-cultura-arte-e-eventos

http://localhost/site_acad/index.php/2015-11-01-23-41-37/gabinete-de-desporto

http://localhost/site_acad/index.php/2015-11-01-23-41-37/gabinete-de-finalista

http://localhost/site_acad/index.php/2015-11-01-23-41-37/gabinete-de-comunicacao-e-imagem


http://localhost/site_acad/index.php/apresentacao/documentos

http://localhost/site_acad/index.php/apresentacao/orgaos-sociais

http://localhost/site_acad/index.php/apresentacao/historial


http://localhost/site_acad/index.php/acad-unicv/acad-sv

http://localhost/site_acad/index.php/acad-unicv/acad-ecca

http://localhost/site_acad/index.php/acad-unicv/acad-eng


http://localhost/site_acad/index.php

Contactos

Loja

3. 20. Back Office e Front Office do Website

Segundo (Martins, 2013), o Back Office é um conceito, utilizado na área da

informática para denominar um conjunto de funcionalidades que fazem parte do sistema, mas

que não são visíveis por todos os utilizadores do sistema. Na generalidade este alberga

funcionalidades e procedimentos que permitem ao utilizador fazer uma melhor gestão do seu

Front Office, isto é, do que está visível também para os restantes utilizadores, sem a

necessidade de recorrer a um especialista na área da informática, sempre que precisa de

realizar alguma alteração aos conteúdos da aplicação, enquanto que o Front Office é a parte

que fica disponível aos utilizadores do sitema onde os utilizadores podem realizar as

seguintes tarefas: ler, pesquisar, comentar, solicitar e interagir com o sistema sem a permissão

de gerir os conteúdos do sistema.

No Back Office do website de ACAD UNICV o utilizador devidamente autorizado

através do sistema de autenticação, entra no painel administrativo do joomla e pode operar as

seguintes tarefas:

Gestão de Notícias

o Inserir Notícias;

o Apagar Notícias;

o Atualizar Notícias.

Gestão de Eventos

o Inserir Eventos;

o Apagar Eventos;

o Atualizar Eventos.

Gestão de Mídias

o Inserir fotos/vídeos;

o Apagar fotos/vídeos;

o Atualizar fotos/vídeos.

Gestão de Mensagens

o Enviar Mensagens;

http://localhost/site_acad/index.php/loja

http://localhost/site_acad/index.php/contactos

o Apagar Mensagens; o Atualizar Mensagens

Gestão de Actividades

o Inserir Actividades;

o Apagar Actividades;

o Atualizar Actividades.

O diagrama a seguir mostra as actividades que podem ser realizadas no Back Office

do website de ACAD-UniCV. Cada utilizador terá acesso ao Back Office deacordo com a

autorização que lhe é atribuida, ou seja, o utilizador vai gerindo o Back Office deacordo com

as permissões que lhe são atribuidas pelo administrador geral do back Office do website de

ACAD-UniCV.

1.1.23 Diagrama de Tarefas no Back Office do Website de ACAD UNICV

Figura 13 – Diagrama de Tarefas No Back Office do website de ACAD-UniCV

No Front Office do website de ACAD-UniCV o utilizador tem acesso a todas as

informações disponibilizadas no website. O utilizador pode ver, comentar, compartilhar,

copiar ou baixar os conteúdos do website. O diagrama a seguir mostra as tarefas que podem

ser realizadas pelos usuários no Front Office do website.

UTILIZADOR

Notícias

Criar Notícias

Alterar Notícias

Apagar Notícias

Eventos

Criar Eventos

Alterar Eventos

Apagar Eventos

Fotos/Vídeos

Ciar fotos/vídeos

Alterar fotos/vídeos

Apagar fotos/vídeos

Mensagens

Criar Mensagens

Alterar Mensagens

Apagar Mensagens

Actividades

Criar Actividades

Alterar Actividades

Apagar Actividades

login

1.1.24 Diagrama de Tarefas no Front Office do Website de ACAD-UniCV

3. 21. Layout de Baixa Fidelidade - Desktop

UTILIZADOR

Notícias

ver

Copiar/Salvar

Comentar

Compartilhar

Eventos

ver

Copiar/Salvar

Comentar

Compartilhar

fotos/vídeos

Ver

Copiar/Salvar

Comentar

Compartilhar

Mensagens

Ver

Copiar/Salvar

Comentar

Compartilhar

Actividades

Ver

Copiar/Salvar

Comentar

Compartilhar

Figura 14 - Diagrama de Tarefas No Front Office do website de ACAD UNICV

Figura 15 - Layout de baixa fidelidade

3. 22. Layout de Baixa fidelidade – Tablets

3. 23. Layout de Baixa fidelidade – Smartphones

Figura 17 - Layout de Baixa Fidelidade - Smartphones

Figura 16 - Layout de Baixa Fidelidade - Tablets

3. 24. Layout de Alta fidelidade – Desktop

3. 25. Layout de Alta fidelidade – Tablets

3. 26. Layout de Alta fidelidade – Smartphones

Integração da bibleoteca Bootstrap

Para a integração da bibleoteca bootstrap foi preciso baixar o bootstrap no site oficial

do mesmo. Depois foi criado uma pasta com o nome template acad seguindo o seguinte

caminho:

www\joomla341\templates\acadTemplate.

E logo em seguida dentro da pasta acadTemplate foi extraído a bibleoteca do

bootstrap com os seguintes pastas de arquivos: css, js e img.

Dentro da pasta acadTemplate foram adicionadas as seguintes pastas de arquivos:

copiaIndex.php, images, html, language, e less. Tambem foram adicionadas os seguintes

arquivos: component.php, error.php, favicon, index.php, template_preview,

template_thumbnail e templateDetaills. A pasta acadTemplate ficou com a seguinte extrutura:

acad

Tem

plat

e

css

Js

img

Figura 18 - Pasta raíz do acadTemplate

acad

Tem

plat

e

copiaIndex.phpcsshtmlimagesimgjslanguagelesscomponenterrorfaviconindextemplate_previewtemplate_thumbnailtemplatedetails

Figura 19 - Estrutura do template acadTemplate

Página principal – index.php

Na primeira secção foram definidas as principais tarefas e foram integradas a

bibleoteca javascript do bootstrap, a bibleoteca css do bootstap utilizando a linguagem php.

Ver a imagem a seguir:

Na segunda secção foram realizadas as seguintes tarefas: escolha do doctype

html, escolha do tipo de codificação, definição do viewport, carregamento dos fonts do

google e do favicon. Ver a imagem a seguir:

Na terceira secção foi criado dentro do corpo da página (body), o topo do site

que envolve o logotipo, a barra de pesquisa, os links úteis, o menu principal, o banner

de destaques e os eventos, utilizando o php, o grid layout do bootstrap e os tags

templates do joomla que foram criados pelo próprio joomla para a definição das

posições nos templates joomla. São elas:

<jdoc:include type="modules" name="nome_posição" style="html5" />

<jdoc:include type="message" />

<jdoc:include type="component" />

77

Figura 20 - página index.php configuraçãp bootstrap com php

Figura 21 - página index.php configuração do head

Na quarta secção foi estruturado o corpo do content (conteúdos da página), onde

foram definidas as seguintes posições: posição_notícias, que é a posição que irá carregar

o módulo de notícias definido no painel administrativo do joomla; posição_

menuVertical que irá carregar o módulo de menu vertical com as informações sobre os

cursos, vídeos, bolsas de estudos, atividades e galeria de imagens; a

posição_universidades, irá carregar notícias destaques sobre acontecimentos nas

universidades; e a posição_publicidades que irá carregar a publicidade da empresa

Unitel t+. Ver a imagem a seguir:

78

Figura 22 - página index.php configuração do topo do site

Figura 23 - página index.php configuração do content do site

Na última secção foi definido a posição do footer (rodapé) do site: dentro da

posição do footer foram criadas as sub-posições para o mapa de site, o plugin de redes

sociais, contador de visitas e finalmente a posição que irá chamar o rede social

denominaddo de comunidade ACAD UNICV. Ver a imagem a seguir:

79

Figura 24 - página index.php configuração do footer do site

CAPÍTULO VI

Discussão de Resultados

80

CAPÍTULO VII

Manual de desenvolvimento

82

REFERÊNCIAS BIBLEOGRÁFICAS

Agner, L. (2009). Ergodesign e Arquitectura de Informação - Trabalhando com o Usuário.

Balarine, O. F. O. (2002). Tecnologia da informação como vantagem competitiva. Business, 1, 1–11.

Eberhardt, S. (2005). VirtueMart User Manual. Online, 1–51.Graf, H. (2012). Joomla! 3 - in 10 Easy Steps.Majer, C. (2009). Mapa do site, (061), 8–9.Marcotte, E. (2011). Responsive Web Design. (M. Brown, Ed.). Jeffrey Zeldman.Martins, P. (2013). Back office para plataformas web de Gestão de Conferências

Científicas : Desenvolvimento e Avaliação.Neves, P., & Ruas, R. (2005). O Guia Prático do MySQL.Nina, W., & Technology, I. (2011). Building the WAMP Platform, (May).Rodrigues, S. da C. (2014). Samuel da Costa Rodrigues Estudo e Implementação de

Interfaces Web em HTML5 Samuel da Costa Rodrigues Estudo e Implementação de Interfaces Web em HTML5.

Sampaio, A. I. (2013). Responsive Web Design.Santos, E. (2009). Web Design : uma reflexão conceptual, 32–46.Schmitz, D. (2014). Bootstrap 3 Framework front-end para desenvolvimento web e

mobile.Silva, M. S. (2014). Foundation for sites - Novatec.Spurlock, J. (2013). Bootstrap, 128. Retrieved from https://books.google.com/books?

hl=en&lr=&id=LZm7Cxgi3aQC&pgis=1Varga, D., Jalali, C., Prof, A., Gina, D., Gaio, M., Professora, S., … Auxiliar, C. (2009).

Participação das Mulheres nas Associações de Estudantes.

83

Vieira, M. J. (2010). Joomla na otimização de sites para buscadores de Internet – SEO.Zemel, T. (2014). Design Responsivo.

Zemel, T. (2014). Web Design Responsivo: Páginas adaptáveis para todos os dispositivos. São Paulo, SP - Brasil:

Casa do código, 2013.150p.

Zeldman, J. (2007). “Understanding Web Design”, http://www.alistapart.com/articles/understandingwebdesign/.

84

PROJECTO FINAL CARLA777.docx

Documents

Transcript of PROJECTO FINAL CARLA777.docx