Universidade de Cabo Verde

Departamento de Cincias e Tecnologias

Licenciatura Em Comunicao E Multimdia

DESENVOLVIMENTO DO WEBSITE DA ASSOCIAO

ACADMICA DOS ESTUDANTES DA UNIVERSIDADE
DE CABO VERDE

Realizado Por:

Adnilson Teixeira Medina

Orientador:

Mestre Adelcides Rodrigues

Praia
Abril de 2015

Adnilson Teixeira Medina

DESENVOLVIMENTO DO WEBSITE DA ASSOCIAO

ACADMICA DOS ESTUDANTES DA UNIVERSIDADE
DE CABO VERDE

Projecto de Fim de Curso de Licenciatura em Comunicao e Multimdia submetido ao

Departamento de Cincias e Tecnologia da Universidade de Cabo Verde como um dos
requisitos para obteno do grau de Licenciatura em Comunicao e Multimdia sob a
orientao do professor Mestre Adelcides Rodrigues.

Trabalho Final de Curso de Licenciatura em

Comunicao e Multimdia pela Universidade
de Cabo verde.
Universidade de Cabo Verde
Departamento de Cincia e Tecnologia
Licenciatura em Comunicao e Multimdia

Adnilson Teixeira Medina

O trabalho fim de curso foi defendido e aprovado pela banca examinadora composta pelos
membros do Jri:

/O Jri/

/O Presidente do Jri/

/O Arguente/

/O Orientador/

Trabalho de Fim de Curso aprovado no dia ____ / ____ /____ pelo Departamento de Cincias e
Tecnologia da Universidade de Cabo Verde.

Dedicatria
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 foras para superar as dificuldades que pela
minha fora no foi possvel superar e principalmente por cada momento de vitria que eu tive.
Tambm 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, irmos, avs,
a todos os irmos de f da Igreja adventista do Stimo 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 foras e nimos para que eu pudesse continuar e terminar os meus estudos na
Universidade de Cabo Verde.

Agradecimentos
Agradeo em primeiro lugar a Jesus Cristo meu Deus e meu Salvador, por ter estado
sempre ao meu lado.
Aos meus pais, Joo Medina Brando e Elizabete Ramos Teixeira, pela educao que
me deram desde o ensino primrio at ensino superior, pelo amor, pelo cuidado e carinho que
ao longo de todos esses anos eu recebi deles, pelos sacrifcios que tiveram de passar para que
hoje eu terminasse a minha formao, um obrigado do fundo do meu corao.
Ao professor Mestre, Adelcides Rodrigues por ter me orientado a realizar o projecto e
pelas sbias instrues que me deu para que eu realizasse este projecto com sucesso.
Aos meus avs, Antnio Ramos de Barros e Maria de Ftima Lopes, por todos os
apoios, amor e carinho que me deram ao longo desses longos anos.
Aos meus tios, Manuel Antnio Ramos e Flvio Domingos Lopes Barros, ao meu irmo
Deunilson Teixeira Medina, a minha tia Ana Barros, a meu amigo Luciano Miranda, pelas
ajudas e incentivos que me deram.
A Igreja Adventista do Stimo Dia por ter- me dado uma educao que me ajudou
bastante no relacionamento e convivncia com as outras pessoas.

Abreviaturas e Significados

PHP

Personal Home Page

BROWSR

Navegador Para Aceder e Navegar na Internet

MYSQL

Sistema de Gesto 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 Programao 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 Aplicaes Web

VIRTUEMART

Plugin Joomla Para Criao de Lojas Online

ndice de Figuras
Figura 1 - Sintaxe Bsica do PHP----------------------------------------------------------4-16
Figura 2 - Funcionamento de Um Site PHP----------------------------------------------4-16
Figura 3 - Sintxe bsica 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 Aplicao 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 Comparao 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 raz do acadTemplate-----------------------------------------------------5-3
Figura 21 - Estrutura do template acadTemplate------------------------------------------5-2
Figura 22 - pgina index.php configurap bootstrap com php--------------------------77
Figura 23 - pgina index.php configurao do head---------------------------------------77
Figura 24 - pgina index.php configurao do topo do site-------------------------------78
Figura 25 - pgina index.php configurao do content do site---------------------------79
Figura 26 - pgina index.php configurao do footer do site-----------------------------80

Resumo
A Associao dos Estudantes da Universidade de Cabo Verde designada pelo acrnimo,
ACAD-UniCV, uma associao voltada para o interesse dos alunos e tem como principal
objectivo a satisfao das necessidades dos alunos da Universidade de Cabo Verde, ajudandoos em todas as reas acadmicas durante os seus anos de estudos.
Devido a falta de um meio de comunicao entre os alunos e a Associao dos
Estudantes da Universidade de Cabo Verde, a Associao no est a atingir o seu principal
objectivo. Surgiu ento, a ideia de desenvolver uma aplicao capaz de servir como um meio
de comunicao entre os alunos e a Associao 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 tendncia tecnolgia Responsive Web Design, ou seja, um
website capaz de se adaptar aos demais caractersticas dos diferentes tipos de dispositivos
moveis tais como: Smartphones, Tablets, Laptops.
Esta aplicao web foi baseada no conceito Design Moderno e com uma arquitetura
de informao bem estruturada basedada na experincia do utilizador, e ainda foi
implementado o sistema de E-commerce para vendas e compras online atravs da integrao
da exteno do Virtuemart.

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

Informao, dispositivos mveis.

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 Ecommerce system for online sales and purchases by integrating extension of Virtuemart.

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

ndice
1.

INTRODUO.................................................................................9

2.

PROBLEMTICA............................................................................10

3.

OBJETIVOS...................................................................................11

4.

JUSTIFICATIVA..............................................................................11

5.

METODOLOGIA.............................................................................12

6.

ESTRUTURA DO RELATRIO..........................................................13
3. 1.

ASSOCIAES ACADMICAS UNIVERSITRIAS....................................................15

3. 2.

APRESENTAO

DA

ACAD UNICV.................................................................16

1.1.1

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

1.1.2

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

3. 3.

COMPARAO

DOS

SITES

DAS

ASSOCIAES ACADMICAS..................................17

1.1.3

Arquitetura de Informao dos Sites..................................................17

1.1.4

Tipos de Contedo dos Sites..............................................................18

1.1.5

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

CAPTULO 1 TECNOLOGIAS E FERRAMENTAS UTILIZADAS......................20

3. 4.

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

1.1.6

Vantagens da Utilizao do PHP.........................................................22

1.1.7

Desvantagens da Utilizao do PHP...................................................22

3. 5.

MYSQL.................................................................................................... 22

3. 6.

HTML..................................................................................................... 22

3. 7.

HTML 5.................................................................................................. 23

1.1.8

Vantagens da Utilizao do HTML 5...................................................25

3. 8.

JAVASCRIPT................................................................................................ 25

3. 9.

CSS........................................................................................................ 26

1.1.9

CSS3.................................................................................................. 26

1.1.10 Vantagens de Utilizao do Css3.......................................................27

3. 10. O CONCEITO WEB DESIGN...........................................................................27
3. 11. WEB DESIGN RESPONSIVE...........................................................................28
1.1.11 Layouts flexveis................................................................................29
1.1.12 A Frmula de Medidas Para Um Projecto do Desponsive Design........29
1.1.13 Contedos de imagens e vdeos flexveis..........................................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 Utilizao 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
CAPTULO 2 DESENVOLVIMENTO DO WEBSITE.....................................2-1
3. 18. DESENVOLVIMENTO

DO

3. 19. CRIAO

DE SITE.........................................................................2-2

DO

MAPA

WEBSITE..................................................................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

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. Introduo
As tecnologias de informao e de comunicao abrem novas perspectivas sociedade
do futuro. A informao, 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 atravs de um site, uma difuso rpida, atravs das novas tecnologias de informao, o
conhecimento, permitindo s empresas, pessoas no s melhorar a sua eficincia mas

fundamentalmente oferecerem novos produtos e servios pelos quais os consumidores,

manifestam as suas preferncias.
Segundo (Balarine, 2002) a Internet j exercita papel como local de apresentao
pblica das organizaes, proporcionando criar imagens, comunicar valores, possibilitar acesso
a informaes e apresentar produtos e servios. De outro lado, sua aplicao dirigida, a
Extranet, vem se transformando no canal especfico para comunicaes exclusivas com clientes
e fornecedores. A Intranet, por sua vez, j assumiu o papel de canal veiculador de mensagens
para o pblico interno, atravs de redes privadas seguras e econmicas.
Desta forma podemos concluir que um dos principais objectivos de um site a
promoo da comunicao entre uma empresa ou instituio e o seus clientes, de forma a criar
um meio de ligao e interao pela ambas as partes, por isso, ter um site hoje, significa estar
conectado em todas as direces e com os quatro pontos.
Atravs de um website , hoje, permitido aceder a informao e fontes de informao
em bibliotecas, centros de documentao, servios de informao e documentao e arquivos,
fazendo pesquisa em bases de dados, em linguagem natural ou controlada e tendo, para alm
disso, acesso a monografias, artigos de peridicos, dissertaes, actas de congressos,
comunicaes e relatrios, enciclopdias e dicionrios, etc.
Desta forma, para solucionar o problema de comunicao existente entre a ACADUniCV e os alunos foi desenvolvido um website capaz de fornecer as vantagens acima
referidas acompanhando as novas tendncias tecnolgicas e de dar respostas as necessidades da
ACAD UniCV e dos alunos, tendo em conta a sua devida importncia na promoo da
comunicao.

2. Problemtica
Hoje em dia, para o sucesso de qualquer instituio necessrio a existncia de um site
para a comunicao entre a instituio e os seus clientes. A ACAD-UniCV sendo uma

Instituio autnoma e independente tende a criar a sua prpra identidade visual de forma a ter
um reconhecimento no s pela comunidade acadmica, mas tambem por outras pessoas e
instituies tanto nacionais como internacionais, ainda ela pretende colocar ao dispor dos
alunos os seus servios de forma a atender as suas necessidades.
Tendo em conta que a maioria dos alunos da Universidade de Cabo Verde buscam as
informaes na internet atravs do site da UniCV por meio de dispositivos mveis tais como
smartphones e tablets e muitas vezes as suas buscas no so atendidas de forma a satizfazer as
suas necessidades. A ACAD-UniCV tendo como um dos principais objectivos a satisfao das
necessidades dos alunos tem de cumprir com as suas obrigaes, garantindo que as
informaes relativamente a UniCV estejam ao alcance dos alunos de modo a satizfazer as suas
necessidades, desta forma, ela conclui ento, que ter de ser criado uma outra forma para
fornecer aos alunos todas as informaes relevantes aos seus estudos.
Abaixo esto citados alguns dos problemas que afectam tanto a ACAD-UniCV como
tambem os alunos devido a inexistncia de um meio de Comunicao. So eles:
A ACAD-UniCV no conhecida pela maioria dos estudantes;
As suas actividades realizadas no so comunicadas e nem promovidas;
No h uma interao entre ela e os alunos devido a falta de um meio de interao entre
eles;
Muitos alunos no sabem da existncia da ACAD-UniCV;
As informaes da ACAD-UniCV no chegam nos alunos;
Os alunos muitas vezes no sabem para onde recorrer para a resoluo dos seus
problemas;
Falta de promoo dos seus servios para os alunos.

3. Objetivos

3. 1.

Objetivo Geral

Este projecto tem como objectivo geral o desenvolvimento e a implementao do

website da Associao Acadmica dos Estudantes da Universidade de Cabo Verde como sendo
um meio de comunicao entre a ACAD UNICV e os alunos atravs do CMS Joomla 3
utilizando o Bootstrap com o PHP.

3. 2.

Objetivos Especficos

Pesquisar as tecnologias e as metodologias e implement-los para a criao 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 direo da UNICV;
Promover a interao e a comunicao dentro da comunidade acadmica atravs da
rede denominada Comunidade ACAD;
Integrao do sistema de compras e vendas Online denominado Shop ACAD atravs
da exteno do Virtuemart;
Implemetao do sistema de pedido de documentos online atravs da ACAD UNICV.

4. Justificativa
Com as crescentes mudanas e com o rpido desenvolvimento tecnolgico surgi cada
vez mais para as empresas e instituies novas formas de promoo de seus servios. Hoje em
dia, quase todas as pessoas acedem a internet em busca de informaes capazes de dar
respostas as suas buscas. Na internet so pesquisadas informaes de todos os tipos, da ser ela
a maior fonte de informaes. evindentemente que pesquisar na internet trs consigo
inumeras vantagens tais como: disponibilidade de variedades de informaes, rapidez na busca,
interao com o utilizador, feedbacks, etc. Por esta razo vrias so as instituioes que hoje
preferem usar a internet para a promoo dos seus servios e da sua identidade.
Hoje pode-se notar que a maior parte das pessoas acedem a internet utilizando os
dispositivos mveis tais como tablets e smartphones graas as suas prprias caractersticas tais
como: Mobilidade, Portabilidade e Conectividade. Pode-se notar ainda, que na UNICV a maior
parte dos alunos acedem a internet atravs de um dispositivo mvel em busca de informaes.
Metodologia

Em termos metodolgicos, esse projeto foi baseado nas tcnicas de desenvolvimento web e do
design responsivo para a implementao de um design adaptvel diferentes tipos de
dispositivos mveis.

5. Metodologia
Primeiramente para a utilizao dessas tcnicas foram feitas pesquisas bibliogrficas
(consulta em livros, sites relacionados com o CMS Joomla, Bootstrap, PHP, vdeo aulas).
Ainda foram feitas pesquisas sobre sites de Associaes de Estudantes existentes na Europa e
na Amrica, mas concretamente em Portugal e Estados Unidos.(ver anexo)
Para a implementao do projecto foi apresentado para o Doutor Salif Silva, presidente
do Gabinete da Comunicao 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 prottipo e o design do website e finalmente depois de uma
cuidadosa anlise, a proposta foi aprovada.
Aplicao de um teste de usabilidade onde um dos principais objectivos foi aplicar um
teste geral na aplicao a nvel de funcionalidade, navegao, busca de informaes, design e
estrutura de informao para ver se a aplicao corresponde aos objectivos inicialmente
traados. O outro aspecto importante foi a aplicao do teste usabilidade nos usurios finais
para testar o comportamento dos usurios durante a interao com a aplicao onde foi
recolhido informaes, que depois de analizadas trouxeram grandes melhorias para a aplicao.
6. Estrutura do Relatrio
Este relatrio encontra-se estruturado em quatro captulos. O Primeiro captulo trata-se
do Enquadramento Terico, o Segundo Captulo apresenta as Tecnologias e Ferramentas
Utilizadas, o Terceiro Captulo apresenta todo o Processo de Desenvolvimento do Website,
enquanto que o Quarto Captulo apresenta a Anlise e Discusso dos Resultados.
No primeiro captulo foi feito um enquadramento sobre o tema proposto, foi feita uma
abordagem sobre as Associaes Acadmicas Universitrias, seu conceito e seu funcionamento.
Seguidamente foi feita uma apresentao da Associao Acadmica dos Estudantes da

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

comparativa sobre os sites das Associaes Acadmicas Universitrias de
No segundo captulo apresentado um breve enquadramento sobre o Conceito das
Associaes Acadmicas Universitrias, bem como a sua estrutura e funcionamento. Em
seguida fez-se uma breve apresentao da Associao Acadmica 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 captulo foi aplicado uma comparao detalhada dos sites das seguintes
Associaes Acadmicas Universitrias tomados como referncias para a construo do
website da ACAD-UniCV. So eles: Associao Acadmica da Madeira, Associao
Acadmica do Aveiro, Associao Acadmica de Harvard e Associao Acadmica de
Califrnia, cujo o principal objectivo foi fazer uma comparao entre eles para a
implementao do website de ACAD-UniCV. As comparaes form feitas tendo em conta a
Arquitetura de Informao, Design, e tipos de Contedos apresentadas nesses sites.
O quarto captulo apresentada todas as tecnologias e ferramentas utilizadas
que serviram de base e orientao para o desenvolvimento e a implementao do website. E
assim sendo, de uma forma muito breve apresenta-se uma descrio de todas as tecnologias e
ferramentas usadas, bem como as suas vantagens e desvantagens de sua utilizao.
O quinto captulo Apresenta todo o processo de desenvolvimento do website, desde a
instalao das ferramentas necessrias para o desenvolvimento do website, o processo da
criao 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 Terico

3. 1.

Associaes Acadmicas Universitrias

O Associao Acadmica , antes de mais, uma forma de participao poltica. O

envolvimento dos alunos em uma associao acadmica uma liberdade voluntria. A
organizao formal, a ausncia de fins lucrativos, a entrega voluntria e o desempenho de
actividades por vontade prpria, constituem as principais caractersticas do associativismo
segundo (Varga et al., 2009).
Segundo (Varga et al., 2009), a Associao Acadmica no uma fraternidade
[repblica], nem um clube social, uma sociedade acadmica, ou um grupo extracurricular,
apesar de sob certas circunstncias, poder acompanhar as actividades e funes de tais grupos.
Podemos definir a Associao Acadmica como uma associao de estudantes inspirados por
objectivos que assentam numa especfica doutrina ideolgica, normalmente, apesar de no ser
exclusivamente na sua natureza () os membros de uma a associao acadmica () tm a
convico que, como jovens intelectuais, tem uma misso histrica especial de atingir os
objectivos que a gerao antiga falhou, ou de corrigir imperfeies no seu ambiente. a
Associao Acadmica uma combinao de resposta emocional e convico intelectual.
Dentro deste mesmo conceito de associao acadmica apontado por (Varga et al.,
2009), passamos a enquadrar, ento, a ACAD-UniCV como sendo uma Associao Acadmica
solidificada e inspirada por objectivos, valores e uma misso que definem determinados
princpios ideolgicos da prpria ACAD-UniCV.

3. 2.

Apresentao da ACAD UNICV

Segundo o Estatuto da ACAD-UniCV, a Associao Acadmica dos Estudantes da

Universidade de Cabo Verde, designada pelo acrnimo ACAD-Uni-CV, uma associao sem
fins lucrativos e goza de personalidade jurdica 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 fora poltica, organizao religiosa
ou outra instituio, nacional ou estrangeira. A ACAD-Uni-CV assume, respeita e promove,
autonomamente, os princpios da liberdade, da democracia, da equidade, da justia, do
humanismo e da qualidade acadmica no seio da Uni-CV.

1.1.1 Gabinetes da ACAD UNICV:

Gabinete de Comunicao e Imagem;
Gabinete de Finalista;
Gabinete de Desporto;
Gabinete de Cultura, Artes e Eventos
Gabinete de Pedagogia e Acompanhamento Acadmico;
Gabinete de Cooperao e Aco Social;

1.1.2 Objetivos da ACAD-UniCV:

Defender os legtimos interesses dos estudantes junto dos rgos dirigentes da UniCV e demais entidades ligadas ao ensino superior;
Servir de elo de ligao entre os estudantes e os rgos dirigentes da Universidade
de Cabo Verde na procura de solues que correspondam s exigncias da formao
e da vida acadmica dos estudantes da Uni-CV;
Contribuir para promoo da qualidade acadmica na Uni-CV, tendo em conta os
valores, princpios e opes fundamentais constantes dos Estatutos da Universidade;
Contribuir para a preservao e promoo da boa imagem da Uni-CV e dos seus
estudantes no pas e no estrangeiro;

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

superior em Cabo Verde;
Dinamizar intercmbios culturais com outras instituies educativas do pas e do
estrangeiro;
Dinamizar e promover actividades de carcter cientfico, pedaggico, desportivo,
recreativo e sociocultural, envolvendo estudantes, professores e funcionrios da
Universidade de Cabo Verde;
Exercer outros fins decorrentes das leis e das normas regulamentares aplicveis.

3. 3.

Comparao

dos

Sites

das

Associaes

Acadmicas
Para a implementao do website foi preciso analizar quatro sites de Associaes
Acadmicas Universitrias que form tomados como referncias, com o obejctivo de fazer uma
anlise 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 comparao entre eles tendo em conta os seguintes critrios: Arquitectura de Informao
(organizao das sesses de contedos), Tipos de Contedos e Aspectos de Design (cores,
tipografia, Estilo ou Desenho).

1.1.3 Arquitetura de Informao dos Sites

Segundo (Agner, 2009), a arquitetura de informao pode ser compreendida como
quatro sistemas interdependentes, cada qual composto por regras prprias: so os sistemas de
organizao, de navegao, de rotulao e de busca.
Sistema de Organizao - Determina como apresentada a organizao e a
categorizao do contedo.

 Sistema de Rotulao - Define signos verbais (terminologia) e visuais para cada

elemento informativo e de suporte navegao do usurio.
Sistema de Navegao - Especifica formas de se mover atravs do espao
informacional.
Sistema de Busca - Determina as perguntas que o usurio pode fazer e as respostas
que ir obter no banco de dados.
Tendo em conta o conceito de Arquitectura de Informao apontado por (Agner, 2009),
pode-se verificar que em termos de sistema de organizao a apresentao e a categorizao
dos contedos, sistema de busca, sistema de navegao e rotulao, eles seguem uma mesma
linha de arquitectura, onde as informaes esto dispostas por seces, em que cada seco
estrutura-se em trs colunas ou blocos: O bloco ateral esquerdo, bloco de meio e o bloco lateral
direito.

1.1.4 Tipos de Contedo dos Sites

O tipo de contedo desponibilizado nos sites tem de ir deacordo com as necessidades
dos usurios finais, e por isso as Associaes Acadmicas Universitrias disponibilizam os
mesmos tipos de contedos 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 organizao.
H um conjunto de contedos que so comuns entre esses quatro sites. So eles: Notcias,
Informaes Sobre Cursos, Lista de Actividades dos Estudantes, Vdeos, Eventos,
Desportos, Informaes de Bolsas de Estudos e Projectos e Iniciativas Acadmicas, ou
seja, Eles so os contedos mais importantes para os alunos, por isso, esto sempre presentes
nos sites de Associaes Acadmicas Universitrias.

1.1.5

Design dos Sites

Existe uma linha grfica bastante idntica entre estes sites, como podemos notar em

termos das cores utilizadas nesses sites se predomina bastante a cor cinza, tambem so
destacadas as duas outras cores, o azul e branco, que juntos fazem uma combinao perfeita.

Todos estes sites apostarm num design simples mas bastante atractivo e moderno sabendo que
eles foram projetados para uma comunidade acadmica bastante jovem.
A tipografia utilizada form dos tipos Sem serfifas que so os tipos de fontes utilizadas
para monitores.
Principios de design

CAPTULO 1

Tecnologias e Ferramentas Utilizadas

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

vrias tecnologias que do suporte ao desenvolvimento de aplicaes web, tendo em conta as
suas vantegens e desvantegens de seus usos no desenvolvimento focado para web. Abaixo
segue-se uma breve descrio sobre as principais tecnologias usadas no desenvolvimento do
website:

3. 4.

PHP (Personal Home Page)

<?php echo ola mundo; ?>

Figura 1 - Sintaxe Bsica do PHP

Segundo o site do php (www.php.net), o PHP uma linguagem de programao

server-side que executada no lado do servidor. uma das linguagens mais utilizadas na web.
Milhes de sites no mundo inteiro utilizam PHP. A principal diferena em relao s outras
linguagens a capacidade que o PHP tem de interagir com o mundo web, transformando
totalmente os websites que possuem pginas estticas em pginas totalmente dinmicas. O
utilizador atravs de um Browser faz uma solicitao ao servidor php e o servidor envia de
volta uma resposta atravs de um documento html para o utilizador. A comunicao feita
atravs do protocolo http que responsvel pela comunicao com o servidor. Na figura a
abaixo demostrada como funciona um site php.

SERVIDOR

O Usurio solicita uma pgina ao servidor

A pgina html enviada ao Usurio

.HTML

A pgina html enviada ao Usurio

USURIO

.PHP

A pgina executada para se converter em html

Figura 2 - Funcionamento de Um Site PHP

1.1.6 Vantagens da Utilizao do PHP

O php uma linguagem de programao server-side Open Source, ou seja,

absolutamente gratuito;

Uma das suas grandes vantagens que ele multiplataforma, e graas a essa
facilidade ela pode rodar em vrios 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 bsicos do php so de fcil aprendizagem;

O php possui uma bibleoteca bastante extensiva na internet sobre a referncia da

linguagem.

1.1.7 Desvantagens da Utilizao do PHP

A grande desvantagem do php a parte de orientao a objectos que deixa a desejar,

mesmo depois da sua melhoria apartir da verso PHP 5, enquanto que o java
trabalha muito bem com a parte de orientao a objectos.

3. 5.

MySQL

Segundo (Neves & Ruas, 2005), o MySQL um sistema de gesto de bases de dados
relacionais, suporta SQL, open source e um dos SGBDs para utilizao profissional mais
utilizado (conta com mais de 5 milhes de instalaes activas) e o mais conhecido a nvel
mundial. O MySQL foi desenvolvido e disponibilizado pela empresa MySQL AB Limited
Company, que actualmente vende um conjunto de servios e produtos relacionados com a
tecnologia MySQL.

3. 6.

HTML

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

marcao interpretada pelos navegadores para poder representar informao. Esta linguagem

est presente em todas as pginas web que existem atualmente, e estas tm a extenso HTML
ou HTM. O HTML composto por elementos HTML que contm a informao a apresentar.
Os elementos so normalmente compostos por uma tag de incio e de fim, como podemos ver
no exemplo seguinte a sintaxe bsica de um documento html:

<! DOCTYPE html >

<html>
<head>
<title> </title>
</head
<body>
</body>
</html>
Figura 3 - Sintxe bsica de um documento html

3. 7.

HTML 5

Segundo (Rodrigues, 2014), o HTML 5 a nova verso do html que anteriormrnte era a
verso 4. Hoje em dia, muitas das aplicaes existentes situam-se na web, isto , os recursos e
as infraestruturas situam-se em servidores partilhados e interligados atravs da internet. Isto
permite que, a partir de qualquer terminal e em qualquer lugar, o utilizador tenha acesso
informao, aos arquivos e aos programas no momento do acesso cloud . Sendo assim, o
mercado envolvente preocupou-se em criar aplicaes cada vez mais ricas em vrios aspetos
(contedo, design, funcionalidades, etc.) e para acompanhar essa vontade, o mercado criou
vrias alternativas ao HTML, como por exemplo o Flash.
A verso 5 do HTML permitiu ao mundo Web tornar-se num ambiente propcio para
desenvolver aplicaes de software, por permitir criar pginas altamente dinmicas com a
ajuda do JavaScript, e por ter retirado as dependncias a extenses de terceiros. Pode por isso
constatar-se que, na web moderna, a ideia do que era uma aplicao e o que so pginas foi
alterada. As aplicaes podem ser acedidas a partir de diferentes dispositivos, o espao em
disco deixa de ser necessrio para instalar aplicaes, as atualizaes de programas so

transparentes ao utilizador, entre outras vantagens. Assim, a web passou a ser um das
plataformas mais usadas para disponibilizar programas informticos aos utilizadores. Alguns
dos objetivos definidos pelo WhatWG para criar a especificao do HTML5 foram:

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

Reduo da necessidade de uso de extenses, como por exemplo o Flash;

Melhor tratamento de erros;

Mais tags e menos scripting;

Independncia relativamente ao dispositivo.

Novas funcionalidades do HTML5

Um dos principais objetivo de HTML5 facilitar a manipulao dos elementos

possibilitando o desenvolvedor a modificar as caractersticas dos objetos de forma no
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 so:

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

possibilidade de desenhar grficos, em tempo real, na tela do navegador via
javascript. O nico elemento HTML necessrio para isso o elemento canvas, todo
o resto feito pelo javascript;

Os elementos <video> e <audio> para reproduo de mdia. Referentes as verses

anteriores do HTML5 no houve um padro para mostrar um vdeo ou udio em
uma pgina Web, para a exibio desses recorre-se a utilizao 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
padro para incorporar vdeo e udio em uma pgina Web com os elementos
<video> e <audio>;

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

agora as pginas Web podem armazenar dados localmente no navegador do
utilizador, antes isso s era possvel com os cookies. Portanto a Web Storage mais

seguro e mais rpido. Os dados no esto includos com cada solicitao de

servidor, mas utilizados apenas quando solicitado. Tambm possvel armazenar
grandes quantidades de dados, sem afetar o desempenho do site. Os dados so
armazenados sem pares chaves, e uma pgina Web s pode ter acesso aos dados
armazenados por si s;

Novos elementos de contedo especfico, como <article>, <rodap>, <header>,

<nav> e <section>. Hoje, vrios elementos em HTML 4.01 so obsoletos, nunca
utilizado, ou no 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 tambm incluiu novos elementos como <article> para
definir um artigo, <rodap> para definir um rodap para um documento ou seco,
<header> para definir um cabealho para um documento ou seco, <nav> para
definir links de navegao e <section> para definir uma seco em um documento;

Novos controlos de formulrio, como calendrio, data, hora, email, url e pesquisa.

1.1.8 Vantagens da Utilizao do HTML 5

Uma das vantagens da utilizao do HTML5 o facto de aps estar concludo vier a
ser suportado pelas maiorias das plataformas e os browsers existentes, o que trar
desenvolver vrias verses de aplicao para as deferentes plataformas. Tambm uma
outra vantagem os benefcios que advm da introduo de novos elementos. J
conhecido que a verso anterior de HTML5 enfrentava alguns constrangimentos,
principalmente no que refere com a utilizao de banners, vdeos, udios e outros, nas
pginas Web recorrendo a utilizao 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 insero de novos elementos j
mencionados no subcaptulo 2.2.1, permite estruturar textos, imagens, banners, vdeos
e grficos 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 pginas HTML simples. Caso o utilizador desejasse consultar outro contedo ou
at ter algum tipo de interao com o prprio, era necessrio efetuar um novo pedido ao
servidor, que resultava numa nova pgina HTML. Dominava ento, do lado do cliente, uma
web totalmente esttica.
Existindo a necessidade de interao do utilizador com a pgina HTML, nasceu a tecnologia
JavaScript. A primeira verso 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 alterao no nome
para JavaScript e pela interveno 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 no 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 aparncia e a formatao de um documento HTML. O seu principal benefcio promover a
separao entre a formatao e o contedo de um documento. No enquadramento do HTML5 e
do JavaScript o CSS no um elemento indispensvel, isto , podem ser implementadas
funcionalidades HTML5 e JavaScript sem recorrer ao CSS. No entanto, o CSS permite
apresentar estas funcionalidades de uma maneira mais agradvel ao utilizador. Adicionalmente,
facilita a mudana do estilo de apresentao e reduz o tamanho dos ficheiros HTML, j que os
elementos relativos apresentao so removidos.

1.1.9 CSS3
Com a atualizao de CSS2 foram incorporados muitas novidades interessante, o que
melhorou muito a qualidade dos websites desenvolvidos, mas aps 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 comea 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 espao reservado para ele.

1.1.10 Vantagens de Utilizao do Css3

A grande vantagem da modularizao est no fato de que o desenvolvimento das
funcionalidades de um mdulo no mais depende do andamento dos outros mdulos
como aconteceu com o desenvolvimento das verses anteriores da CSS. Isto
possibilita que os fabricantes comessem a implementar, desde j, funcionalidades
previstas em mdulos mais adiantados no seu desenvolvimento. Muitas
funcionalidades das CSS3 j vm 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 domnio, difcil fornecer uma definio concisa e
amplamente aceite para caracterizar o conceito subjacente: o que o Web Design? Segundo
(Zeldman, 2007], Web Design a criao de ambientes digitais que facilitam e incentivam a
actividade humana, reflecte ou adapta-se a vontades individuais e contedos; e muda
graciosamente ao longo do tempo enquanto mantm a sua identidade.

Por outro lado, (Santos, 2009), Web Design uma actividade no mbito da Engenharia
Web que consiste na produo de pginas Web na perspectiva do utilizador. Esta actividade
combina, essencialmente, competncias tcnicas e artsticas de forma a potenciar o papel dos
seguintes conceitos, assumindo um determinado domnio de contedo, a informao
vocacionada para alimentar as exigncias de um pblico-alvo:

Usabilidade a facilidade com que os utilizadores podem utilizar uma ferramenta

para executar uma tarefa especfica;

Aparncia o aspecto ou aquilo que se mostra superficialmente (ou, digamos,

primeira vista);

Visibilidade a destreza com que os utilizadores localizam e interpretam a

informao.

3. 11. Web Design Responsive

O famoso RWD (sigla em ingls 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

Para a implementao de um design responsivo requer a utilizao de trs noces

fundamentais para a sua utilizao. So elas: layouts flexveis baseados em grids, com
dimenses relativas; Contedos de imagens e vdeos flexveis, atravs de redimensionamento
dinmico e por fim os media queries que so expresses que verificam as condies das
pginas, aplicando diferentes regras de css para diferentes cenrios.

1.1.11 Layouts flexveis

Para implementar um layout flexvel necessrio 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 so defenidas da seguinte forma:

Pixel (px): a unidade de medida fixa mais utilizada no CSS. o menor elemento num
dispositivo de exibio. Profissionais de web design preferem usar este tipo de medida
para fazer uma estrutura HTML/CSS em pixel perfect, no medindo esforos para
estruturar seus documentos para que fiquem idnticos imagem do layout.

Ponto (pt): so tradicionalmente utilizados para CSS de impresso. Um ponto igual a

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

Ems (em): uma unidade escalvel. 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 so escalveis por natureza. 2em seria igual a
24pt, 0.5 seria 6pt, etc.

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

Percentagem (%): muito parecida com a unidade em, mas possui algumas diferenas
fundamentais. O atual tamanho da fonte igual a 100% ou seja, 12pt equivalem a
100%.

1.1.12 A Frmula de Medidas Para Um Projecto do Desponsive Design

Marcotte apresentou a seguinte frmula que permite a converso de todas as medidas
absolutas em medidas relativas:
Alvo - Elemento-alvo com aAlvo
medida
atual; = Resultado
Contexto
Contexto - Onde o elemento-alvo est (baseado no elemento pai);
Resultado - O valor relativo que se est procurando.
Esta frmula serve tanto para o clculo de tamanho de fontes quanto para medidas de
layout (Marcotte, 2011).
Exemplo 1 - Aplicando o clculo a um texto com tamanho de fonte 24px:

24 / 16 = 1.5

O Alvo o ttulo de 24px, enquanto que o Contexto o elemento pai neste caso o
prprio <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 hiperligao dentro do ttulo com tamanho de fonte de 11px. Neste caso o
contexto muda, agora o elemento alvo no mais o contexto geral, <body>, mas sim o
Elemento que ele est inserido, neste caso o ttulo de 24px.

11 / 24px = 0.45833333333333em

Marcotte (2011) diz que quando as casas decimais so extensos, devemos deixar at
quatro casas (0.4583), enquanto que (Zemel, 2014), diz-nos para realizarmos os nossos
prprios testes e optar pelos valores que melhor nos convence.

1.1.13 Contedos de imagens e vdeos flexveis

Deacordo com (Sampaio, 2013), A ideia por trs das imagens fluidas consiste em
manter as imagens no tamanho mximo e que estas podero ser usadas. No so definidos
quaisquer valores para altura e largura. O browser est assim encarregue de redimensionar o
tamanho das imagens quando necessrio, usando o css para orientar o tamanho relativo de cada
uma. Como resultado as imagens apresentam as suas dimenses originais sempre que a largura
no exceda a largura do contexto onde se inserem. Caso contrrio so redimensionadas. Os
browsers actuais so capazes de manter a resoluo das imagens intactas mesmo que as
imagens se apresentem em escala diferente. A adaptao das imagens ao tamanho do elemento
em que se encontra consegue-se aplicando um max-width de 100%.

img {max-width: 100%}

Para videos tambm podem ser aplicadas: as mesmas solues:

Img, object {max-width: 100%}
Segundo a documentao sobre max-width do W3C (http://ow.ly/bcKdv), essa
propriedade CSS permite restringir larguras de contedo 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 mximo 100%. claro que 100%
do elemento em que esto contidas, ou seja, do div que a imagem est inserida.

1.1.14 Viewport
Viewport o espao disponvel para a pgina ser renderizado no navegador, todo o
espao branco de um navegador onde a pgina exibida e pode ser medido pelo javascript
atravs de window.innerWidth e window.innerHeight, aponta (Lopes, 2013).
Todo navegador moderno permite que o Utilizador faa um zoom no contedo da
pgina, um recurso interessante para pginas que no foram desenvolvidas para dispositivos
com ecrs de tamanhos diferentes. Quando o Utilizador d zoom, de 200% por exemplo em
uma pgina e, nela existe uma imagem de width: 300px, esta ficar com 600px de largura, isso
o que chamamos de CSS pixel, neste caso, o CSS pixel faz os 300px da imagem serem
renderizados para 600px fsicos. A regra :

N de Pixel fsico = N de css Pixel x Zoom

Ao dar zoom os elementos da pgina ficam maiores e a capacidade de exibi-los nos
ecrs menor, pois o viewport diminuiu. Isso ocorre porque o tamanho dos ecrs medido em
pixels fsicos e o tamanho do viewport medido em CSS pixels, que mudam conforme o zoom
aumenta. O zoom usado nos celulares so chamados de page scale, diferente do desktop,
chamado page zoom, o page scale simplesmente dimensiona a parte visvel da pgina, ele no
altera o design da pgina, o site contnua rende rizado, o zoom s faz a visualizao de um
pedao especfico da pgina, 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
disponvel para a pgina, chamado de layout viewport, onde no iPhone mede 980px fsicos e o
visual viewport que o tamanho que vemos atualmente na ecrs. Abrir uma pgina web
projetada para desktop em um celular uma experincia pouco agradvel, o correto seria
desenvolver uma pgina otimizada para mobile que no demande tanto zoom e que mostre o
contedo em tamanho e formato interessante para ecrs pequena. Deixar a pgina com layout
fixo de 960px, por exemplo, no seria a melhor soluo. Criar a pgina usando porcentagens
como width:100% no elemento principal tambm no ir resolver, porque o layout viewport

grande - 980px no caso do iPhone citado acima. A pgina ser mostrada como se fosse de
desktop, com zoom mnimo e contedo praticamente ilegvel (Lopes, 2013).

@viewport {width: device-width;}

Figura 5 - Viewport Definido no CSS

1.1.15 Media Queries

Marcotte (2010) apresentou as trs tcnicas do design responsivo: layout fluido, mdias
flexveis e media query, onde uma pgina desenvolvida com layout fluido, j pode ser
considerada responsivo, mas somente com esta tcnica, no se resolve todos os problemas
(Lopes, 2013).
A media query um mecanismo para identificar no s os tipos de media com os quais
est a lidar mas para inspecionar as caractersticas fsicas dos dispositivos e browsers. com a
media query que se torna possvel ocultar, fazer aparecer e reposicionar elementos e interaes
conforme a resoluo atual que esta a ser usada no momento. Afinal, o site no precisa de ter,
exatamente, a mesma aparncia e disposio de seus elementos em qualquer resoluo. Esta
tcnica a principal aliada do layout fluido, uma tcnica disponvel no CSS que permite
trabalhar com design condicional, para que os elementos possam comportar-se de maneiras
diferentes medida que resoluo 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 parntesis, min-width e o seu valor.
@media screen and (min-device-width: 320px) and (max- device-width: 480px) {
body {background-color: blue ; }
}
Figura 6 Exemplo de Aplicao 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 ecrs existente no uma boa prtica.
(Lopes, 2013), relata a importncia do layout fluido no desenvolvimento de pginas Web, pois
o design ir se adaptar naturalmente a vrias resolues e s quando necessrio, as regras de
media query sero aplicadas. No entanto a questo surge: quando tomar esta deciso?
Um conceito chamado breakpoint, define os pontos onde o layout vai ser ajustado por
causa de uma resoluo diferente (Zemel, 2014).

3. 12. Frameworks Para Desenvolvimento Responsivo

Os frameworks so 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 aplicaes, tornando o trabalho mais rpido, diminuindo o custo do mesmo, facilitando
tambem a manuteno de um projeto utilizando o reaproveitamento de cdigos contido na
prpria 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 so pr-processadores de CSS que permitem estender esta linguagem, suportando por
exemplo a existncia de variveis funes e operaes bsicas sobre cores e medidas. E por
estas razes so os dois frameworks mais utilizadas. Abaixo segue-se uma breve descrio
sobre estes frameworks.

1.1.16 O Bootstrap

1. 1.
1. 2.
1. 3.

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 fcil e rpido. 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 formulrios. O
bootstrap requer o o doctype html5 para trabalhar.

1. 4.
1. 5.

Segundo (Schmitz, 2014), o Bootstrap , basicamente, um kit bsico contendo

diversos componentes web prontos para que voc possa desenvolver a sua aplicao
web/mobile de forma mais fcil e objetiva, sem necessitar um slido conhecimento em
Javascript e CSS para isso. Este framework est estritamente ligado ao front-end e a
camada View do padro MVC. Ele no interfere em nada outras tecnologias ou
linguagens, pois o seu foco o desenho da sua aplicao, sendo montado
exclusivamente com html puro.

1. 6.
1. 7.

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

aplicao, e como o resultado ficou muito bom, resolveram disponibilizar de forma
gratuita para a comunidade. Com o avano do produto, tendo ajuda de diversos
desenvolvedores, o framework front-end evolui para esta terceira gerao, na qual
chamamos apenas de Bootstrap.

1. 8.
2 Fonte: http://getbootstrap.com

1. 9. Daniel Schmitz diz que o Bootstrap utilizado para desenhar telas em html5, que sero
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. Tambm podemos criar
telas com tabelas, formulrios, janelas e controles complexos. Pode-se facilmente criar um
sistema web, apenas utilizando este framework, tomando as devidas precaues. Tambm
possvel criar um site inteiro, apenas com o Bootstrap, como iremos rever nos diversos
exemplos desta obra.

1. 10.
1. 11.

Por outro lado (Spurlock, 2013), disse que desde que o Bootstrap foi lanado em

Agosto de 2011, ganhou popularidade. Ele tem evoludo de ser um projeto inteiramente apenas
orientado a CSS para incluir uma srie de plugins, componentes JavaScript e cones que vo de
mos dadas com formas e botes. Ele dispe de 12 colunas, com um grid de 940px. Um dos
destaques a ferramenta de construo no site da Bootstrap, onde voc pode personalizar a
compilao de acordo com seu necessidade, escolhendo os CSS, plugins, e componentes
JavaScript para incluir em um projecto de site.

1.1.17 A Foundation

1. 12.

1. 13.
1. 14.

Figura 8 - Design Responsivo - Foundation3

1. 15.
1. 16.
1. 17.
1. 18.
3 Fonte: http://foundation.zurb.com/

1. 19.
1. 20.
1. 21. Segundo o site da da Zurb Foundation, o foundation o primeiro e mais avanado
quadro responsivo front-end do mundo. Ele permite que voc crie rapidamente prottipos, sites
e aplicativos que funcionam em qualquer dispositivo (smartphones atravs de desktops e
monitores de TV) com uma biblioteca de componentes testados.

1. 22.

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

seguintes vantagens:

1. 23.
Semntica Toda a marcao HTML usada foi projetada de modo a preservar o valor
semntico dos elementos, resultando em uma estruturao limpa e de carregamento
otimizado.
Mobile first Adoo da filosofia mobile first para o design responsi- vo, priorizando
o desenvolvimento para dispositivos de pequeno porte e acrescentando melhoria
progressiva para servir dispositivos maiores e desktop, exatamente como preconizam as
boas prticas de design responsivo.
Personalizao 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.
Profissionalismo Milhares de designers e desenvolvedores dependem do Foundation.
ZURB oferece, tambm, suporte comercial, treina- mento e consultoria relacionados ao
framework.

1. 24.
1. 25.

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. construdo com HTML, CSS e Javascript, os componentes fundamentais da
Web.

3. 13. CMS
1. 26.

Segundo a documentao do Joomla um CMS Um sistema de gerenciamento

de contedo um software que mantm o controle de cada parte do contedo em seu

site, bem como a sua biblioteca pblica local mantm o controle dos livros e os
armazena. O contedo pode ser simples texto, fotos, msica, vdeo, 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 tcnica para gerir. O
CMS gere todo o seu contedo. Os CMS mais populares so: Joomla, Wordpress e o
Drupal.

1.1.18 Vantagens da Utilizao de Um CMS

1. 27.

Abaixo esto citadas um conjunto de vantagens de um CMS deacordo com

(Vieira, 2010):
Permite criar, organizar, editar, inserir contedos em tempo real (imagens, texto, Vdeos
etc);
Extensvel e modular;
Funcionalidades para todas necessidades;
Facilidade de Instalar e Hospedar;
Administrao do contedo sem conhecimento tcnico de linguagem de programao
no qual o CMS foi Desenvolvido;
Flexibilidade da adaptao do layout;
Mltiplos usurios (editor, registrado);
Segurana, escalabilidade e ampliao;

3. 14. Joomla 3.4

1. 28.
1. 29.
1. 30.

Figura 9 - Logotipo do Joomla4

Segundo (Graf, 2012), A palavra Joomla um derivado da palavra Jumla da

lngua Swahili Africano e significa "tudo juntos ", um sistema livre para criao de
websites. um projeto de cdigo aberto, e est constantemente em movimento. Tem
sido extremamente bem sucedida por sete anos e agora um dos CMS mais populares
do mundo, com milhes de usurios.

1. 31.
1. 32.
1. 33.
1. 34.

O projeto Joomla o resultado de uma discusso acalorada entre a Fundao

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
tambm. fcil de instalar, fcil de gerenciar e muito confivel. A equipa de Joomla
tem organizado e se reorganizou ao longo dos ltimos sete anos para melhor atender s
demandas do usurio.

1.1.19 Vantagens do Joomla 3.4

1. 35.

A Nova Verso do Joomla 3.4 oferece-nos algumas vantagens em relao as

outras verss anteriores deacordo com (Graf, 2012). Essas vantagens so:

1. 36.
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 mveis;
4 Fonte: https://www.joomla.org/

 Joomla tem uma nova interface de usurio;

Joomla 3.0 usa a biblioteca jQuery de JavaScript;
O instalador web mais fcil e apenas um procedimento de 3 passos;
Os pacotes de idiomas podem ser instalados diretamente a partir do gerenciador de
extenso;
O motor de pesquisa Smart Search, vem com muitas melhorias;
TinyMCE WYSIWYG editor vem em uma verso mais recente (3.5.6);

3. 15. O Virtuemart

1. 37.
1. 38.

Figura 10 - logotipo do Virtuemart5

1. 39.
1. 40.

Deacordo com (Eberhardt, 2005), VirtueMart uma aplicao de carrinho de

compras para a vendas online de bens atravs da internet. um componente para um

sistema de gerenciamento de contedos chamado Joomla, e no pode ser utilizado sem
o Joomla. Instala-se facilmente usando o componente automtico e Module Installer no
painel da administrao do Joomla. destinado para uso em comrcio eletrnico em
pequenas, mdias e grandes empresas on-line. Assim, cada usurio que quer construir
uma loja online pode usar esse componente para vender algo aos Clientes.

1. 41.
1. 42.

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

User Manual o virtuemart possui as seguintes caractersticas:

1. 43.
Gerenciar um nmero ilimitado de produtos e categorias;
5 Fonte: http://virtuemart.net/

 Us-lo como uma loja ou apenas como um Catlogo vender produtos para download;
Possui um poderoso Web-Interface de Administrao;
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;
Gerir os seus Clientes em Grupos Shopper;
Atribuir mais de um preo para um produto: cada Grupo Shopper tem o seu prprio;
Notificar Shoppers quando um produto de volta ao estoque;
Os clientes podem adicionar seus prprios endereos de envio;
Deixar seus clientes facilmente buscar produtos atravs de uma pesquisa de recursos
Formulrio de produtos especficos, definindo-as em especial;
Deixar seus clientes saber quando um produto estar disponvel novamente;
Os clientes podem ver, em que momento um produto enviar geralmente, na pgina de
produtos-details (com imagens agradveis!);
Os clientes podem gerenciar suas contas de usurio (registro obrigatrio);
O Shopper pode ver todos os seus pedidos (e Detalhes do pedido);
Confirmao da Ordem Mail (customizvel!) enviado para Shopper;
Uso de criptografia SSL seguro (128-bit).

1. 44.
1. 45.

Estas so as principais caractersticas que o Virtuemart possui, tonando-o uma

forte ferramenta para implementao de comrcio eletrnico. O virtuemart foi

exclusivamente desenvolvido para joomla, e a sua integrao no joomla fcil e faz
uma combinao perfeita com o joomla, e por esta principal razo foi o virtuemart
escolhido para ser implementado no Joomla.

3. 16. Spot.IM Community

1. 46.

1. 47.
1. 48.

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 proprietrios e editores de website para transformar
seus sites em uma rede social impulsionado por seu prprio contedo. A tecnologia da
Spot.IM permite aos editores ter de volta a propriedade da conversa acontecendo em
torno de seu contedo, libertando-os de ter que depender de, redes sociais externos
maiores para fornecer o espao social para engajamento do contedo da comunidade.

1.1.20 Vantagens do Spot.IM

O Spot.IM gratuito e de fcil costumizao e Integrao;
Aplicativo disponvel para IOS, Android;
Comentrios em tempo real - os usurios digitao e comentrios enviados so vistos
em tempo real;
Notificaes - Os leitores so imediatamente notificado sobre novos comentrios e
conversas quentes;

1. 49.
1. 50.
1. 51.
1. 52.
1. 53.
Mensagens Privadas Os visitantes do site podem falar em partivular e compartilhar
paixes e interesses comuns;
Experincias de bate-papo A interface do usurio de chat integrado com
comentrios para estimular conversas vibrantes;
O Spot.IM otimizado para todos os dispositivos.

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

3. 17. WampServer

1. 55.
1. 56.
1. 57.

Figura 12 - logotipo do WampServer7

O WampServer um ambiente de desenvolvimento web do Windows. Ele

permite criar aplicaes web com Apache, PHP e um banco de dados

MySQL. Paralelamente, phpMyAdmin permite que voc gerencie facilmente seus
bancos de dados. (BOURDON, 2015).

1. 58.

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
espcie de linguagem HTML incorporado que executada no servidor. O MySQL Server
um pequeno sistema de gerenciamento de banco de dados relacional. Inicialmente,
eles so independente um do outro, no entanto, eles so sempre utilizados em conjunto,
e tm graus de compatibilidade cada vez mais elevados. Ento, esses pacotes formaram
uma plataforma de aplicaes web poderoso que o WampServer.

1. 59.
1. 60.
1. 61.
1. 62.

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

CAPTULO 2
1. 63.
1. 64.
1. 65.
1. 66.
1. 67.
1. 68.
1. 69.
1. 70.
1. 71.
1. 72.
1. 73.
1. 74.
1. 75.
1. 76.
1. 77.
1. 78.
1. 79.

Desenvolvimento do Website

1. 80.
1. 81.
1. 82.
1. 83.

3. 18. Desenvolvimento do Website

1. 84.

Neste captulo esto apresentadas todas as etapas seguidas durante todo o

processo de desenvolvimento do website.

3. 19. Criao do Mapa de site

1. 85.

Deacordo com (Majer, 2009), um Mapa de Site uma espcie de ndice de um

site criado de tal forma a representar a estrutura de navegao, em geral esttica, de um

site.

1. 86.

No existem limites para desenvolvimento visual de um mapa do site. O

importante que ele traga facilidades ao usurio, que busca uma forma de entender a
dimenso do site e facilidades para localizao de informao eventualmente relevante.
A maneira mais comum de se apresentar um Mapa do Site atravs de uma pgina web
contendo uma simples lista, onde seus itens (trechos de textos) so links que apontam
para as pginas do site.

1. 87.
1. 88.

Para um usurio que visita um site, o mapa do site deve servir como apoio para

a navegao e o entendimento da estrutura do site objetivando uma viso geral da

estrutura do site e rpido acesso a qualquer pgina desta estrutura. (Majer, 2009).

1.1.21 Vantagens de Um Mapa de Site

Ele ajuda o usurio a navegar e compreender o seu site;
Ele ajuda o motor de busca spiders rastejar atravs de seu site;
O tema do site compreendido;
Torna o site mais amigvel aos usurios;
Melhora a navegao.

1. 89.
1. 90.
1. 91.
1. 92.
1. 93.
1. 94.
1. 95.

1.1.22 Mapa do Website de ACAD UNICV

1. 96.
Home
Acad UniCV
o Acad ENG
o Acad ECCA
o Acad SV
Apresentao
o Historial
o Orgos Sociais

o Documentos
Gabinetes
o Gabinete de Comunicao e Imagem
o Gabinete de Finalista
o Gabinete de Desporto
o Gabinete Cultura Arte e Eventos
o Gabinete Pedagogia e Acompanhamento Acadmico
o Gabinete Cooperao e Aco Social
Alunos
o Reclamaes
o Pedido de Documentos
o Pedido de Carto de Scio
Scios
o Como Ser Scio
o Quem Poder Ser Scio
Contactos
Loja

1. 97.
1. 98.

1. 99.

3. 20. Back Office e Front Office do Website

1. 100.
1. 101.

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

informtica para denominar um conjunto de funcionalidades que fazem parte do

sistema, mas que no so visveis por todos os utilizadores do sistema. Na generalidade
este alberga funcionalidades e procedimentos que permitem ao utilizador fazer uma
melhor gesto do seu Front Office, isto , do que est visvel tambm para os restantes
utilizadores, sem a necessidade de recorrer a um especialista na rea da informtica,
sempre que precisa de realizar alguma alterao aos contedos da aplicao, enquanto
que o Front Office a parte que fica disponvel aos utilizadores do sitema onde os
utilizadores podem realizar as seguintes tarefas: ler, pesquisar, comentar, solicitar e
interagir com o sistema sem a permisso de gerir os contedos do sistema.

1. 102.
1. 103.

No Back Office do website de ACAD UNICV o utilizador devidamente

autorizado atravs do sistema de autenticao, entra no painel administrativo do joomla

e pode operar as seguintes tarefas:

1. 104.
Gesto de Notcias
o Inserir Notcias;
o Apagar Notcias;
o Atualizar Notcias.

Gesto de Eventos
o Inserir Eventos;
o Apagar Eventos;
o Atualizar Eventos.

Gesto de Actividades
o Inserir Actividades;
o Apagar Actividades;
o Atualizar Actividades.

Gesto de Mdias
o Inserir fotos/vdeos;
o Apagar fotos/vdeos;
o Atualizar fotos/vdeos.

Gesto de Mensagens
o Enviar Mensagens;
o Apagar Mensagens;
o Atualizar Mensagens

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
autorizao que lhe atribuida, ou seja, o utilizador vai gerindo o Back Office deacordo
com as permisses que lhe so 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

Criar Notcias
Notcias

Alterar Notcias
Apagar Notcias
Criar Eventos

Eventos

Alterar Eventos
Apagar Eventos
Ciar fotos/vdeos

UTILIZADOR

Fotos/Vdeos
login

Alterar fotos/vdeos
Apagar fotos/vdeos
Criar Mensagens

Mensagens

Alterar Mensagens
Apagar Mensagens
Criar Actividades

Actividades

Alterar Actividades
Apagar Actividades

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

informaes disponibilizadas no website. O utilizador pode ver, comentar, compartilhar,
copiar ou baixar os contedos do website. O diagrama a seguir mostra as tarefas que
podem ser realizadas pelos usurios no Front Office do website.

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

ver
Notcias

Copiar/Salvar
Comentar
Compartilhar
ver

Eventos

Copiar/Salvar
Comentar
Compartilhar
Ver
Copiar/Salvar

UTILIZADOR

fotos/vdeos
Comentar
Compartilhar
Ver
Copiar/Salvar
Mensagens
Comentar
Compartilhar
Ver
Copiar/Salvar

Actividades
Comentar
Compartilhar

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

3. 21. Layout de Baixa Fidelidade - Desktop

Figura 15 - Layout de baixa fidelidade

3. 22. Layout de Baixa fidelidade Tablets

Figura 16 - Layout de Baixa Fidelidade - Tablets

3. 23.
Layout de Baixa fidelidade Smartphones

Figura 17 - Layout de Baixa Fidelidade - Smartphones

3. 24. Layout de Alta fidelidade Desktop

3. 25. Layout de Alta fidelidade Tablets

3. 26. Layout de Alta fidelidade Smartphones

Integrao da bibleoteca Bootstrap

Para a integrao 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

a c a d T e m p la te

caminho:

www\joomla341\templates\acadTemplate.

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

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

css
Js
img

Figura 18 - Pasta raz do acadTemplate

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:

copiaIndex.php

acadTemplate

css
html
images
img
js
language
less
component
error
favicon
index
template_preview
template_thumbnail
templatedetails

Figura 19 - Estrutura do template acadTemplate

Pgina principal index.php

Na primeira seco 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 seco foram realizadas as seguintes tarefas: escolha do

doctype html, escolha do tipo de codificao, definio do viewport, carregamento dos

fonts do google e do favicon. Ver a imagem a seguir:

Figura 20 - pgina index.php configurap bootstrap com php

Figura 21 - pgina index.php configurao do head

Na terceira seco foi criado dentro do corpo da pgina (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 prprio joomla para a definio das
posies nos templates joomla. So elas:
<jdoc:include type="modules" name="nome_posio" style="html5" />
<jdoc:include type="message" />
<jdoc:include type="component" />

77

Figura 22 - pgina index.php configurao do topo do site

Na quarta seco foi estruturado o corpo do content (contedos da pgina), onde

foram definidas as seguintes posies: posio_notcias, que a posio que ir
carregar o mdulo de notcias definido no painel administrativo do joomla;
posio_ menuVertical que ir carregar o mdulo de menu vertical com as
informaes sobre os cursos, vdeos, bolsas de estudos, atividades e galeria de
imagens; a posio_universidades, ir carregar notcias destaques sobre
acontecimentos nas universidades; e a posio_publicidades que ir carregar a
publicidade da empresa Unitel t+. Ver a imagem a seguir:

78

Figura 23 - pgina index.php configurao do content do site

Na ltima seco foi definido a posio do footer (rodap) do site: dentro

da posio do footer foram criadas as sub-posies para o mapa de site, o plugin de

redes sociais, contador de visitas e finalmente a posio que ir chamar o rede social
denominaddo de comunidade ACAD UNICV. Ver a imagem a seguir:

79

Figura 24 - pgina index.php configurao do footer do site

CAPTULO VI

Discusso de Resultados

80

81

CAPTULO VII

Manual de desenvolvimento

82

REFERNCIAS BIBLEOGRFICAS
Agner, L. (2009). Ergodesign e Arquitectura de Informao - Trabalhando com o
Usurio.
Balarine, O. F. O. (2002). Tecnologia da informao como vantagem competitiva.
Business, 1, 111.
Eberhardt, S. (2005). VirtueMart User Manual. Online, 151.
Graf, H. (2012). Joomla! 3 - in 10 Easy Steps.
Majer, C. (2009). Mapa do site, (061), 89.
Marcotte, E. (2011). Responsive Web Design. (M. Brown, Ed.). Jeffrey Zeldman.
Martins, P. (2013). Back office para plataformas web de Gesto de Conferncias
Cientficas : Desenvolvimento e Avaliao.
Neves, P., & Ruas, R. (2005). O Guia Prtico do MySQL.
83

Nina, W., & Technology, I. (2011). Building the WAMP Platform, (May).
Rodrigues, S. da C. (2014). Samuel da Costa Rodrigues Estudo e Implementao
de Interfaces Web em HTML5 Samuel da Costa Rodrigues Estudo e
Implementao de Interfaces Web em HTML5.
Sampaio, A. I. (2013). Responsive Web Design.
Santos, E. (2009). Web Design : uma reflexo conceptual, 3246.
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=1
Varga, D., Jalali, C., Prof, A., Gina, D., Gaio, M., Professora, S., Auxiliar, C.
(2009). Participao das Mulheres nas Associaes de Estudantes.
Vieira, M. J. (2010). Joomla na otimizao de sites para buscadores de Internet
SEO.
Zemel, T. (2014). Design Responsivo.
Zemel, T. (2014). Web Design Responsivo: Pginas adaptveis para todos os
dispositivos. So Paulo, SP - Brasil:

Casa do cdigo, 2013.150p.

Zeldman, J. (2007). Understanding Web Design,

http://www.alistapart.com/articles/understandingwebdesign/.

84