PROJECTO FINAL CARLA777.docx
-
Upload
adnilson-medina -
Category
Documents
-
view
20 -
download
0
Transcript of 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
Adnilson Teixeira Medina
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
Adnilson Teixeira Medina
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
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 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 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/
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/
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/
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/
“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
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;
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
81
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