RELATRIO DE PROJETO

PROVA DE APTIDO TECNOLGICA

Share.pt (verso
WordPress)

Bruno Barros Ferreira, 2

12. Ano
Curso Tecnolgico de Informtica De Gesto
Ano letivo 2014/2015

RELATRIO DE PROJETO
PROVA DE APTIDO TECNOLGICA

Share.pt (verso
WordPress)

Bruno Barros Ferreira, 2

12. Ano
Curso Tecnolgico de Informtica De Gesto
Professor Orientador: Sofia Trigo
Ano letivo 2014/2015

Agradecimentos
A esta escola, seu corpo docente, direo, administrao e alunos.
minha orientadora professora Sofia Trigo, pelo suporte e pelas suas correes e incentivos.
Aos meus pais, pelo amor, incentivo e apoio incondicional.
minha turma por serem muitos simpticos.
Aos meus amigos por estarem sempre a apoiar-me.
Ao Dr. Pedro Pimenta por me ter cedido toda a informao de que necessitei para este trabalho.
E a todos que direta ou indiretamente fizeram parte da minha formao, o meu muito obrigado.

Resumo
Neste relatrio possvel conhecer o processo utlizado para migrar o atual site da share e
todas as tcnicas utilizadas.
possvel tambm saber como e o que foi utilizado para a criao do novo site e da
aplicao mobile.

iii

iv

ndice
AGRADECIMENTOS --------------------------------------------------------------------------------------------------- I
RESUMO ----------------------------------------------------------------------------------------------------------------- III
NDICE -------------------------------------------------------------------------------------------------------------------- V
NDICE DE FIGURAS ----------------------------------------------------------------------------------------------- VII
NDICE DE TABELAS ---------------------------------------------------------------------------------------------- VIII
ACRNIMOS ----------------------------------------------------------------------------------------------------------- IX
1.

INTRODUO ----------------------------------------------------------------------------------------------------- 1
1.1.

INTRODUO ------------------------------------------------------------------------------------------------------- 2

1.2.

OBJETIVOS ---------------------------------------------------------------------------------------------------------- 3

1.3.

CALENDARIZAO ------------------------------------------------------------------------------------------------ 4

2.

CONCEITOS TERICOS --------------------------------------------------------------------------------------- 5

3.

FUNDAMENTAO DO PROJETO-------------------------------------------------------------------------- 8

4.

IMPLEMENTAO ---------------------------------------------------------------------------------------------- 9

5.

TESTES E RESULTADOS ------------------------------------------------------------------------------------- 26

6.

CONCLUSO E TRABALHO FUTURO ------------------------------------------------------------------- 31

7.REFERNCIAS DOCUMENTAIS ------------------------------------------------------------------------------- 33

ndice de Figuras
Ilustrao 1: Site de download do wordpress ................................................................................... 10
Ilustrao 2:Imagem do painel de controlo do XAMPP .................................................................. 10
Ilustrao 3:painel wordpress com mdulos iniciados ..................................................................... 11
Ilustrao 4: pgina de administrador MYSQL ............................................................................... 11
Ilustrao 5: pgina de criao de bases de dados............................................................................ 12
Ilustrao 6: Explorador de ficheiros do windows ........................................................................... 13
Ilustrao 7:Pasta do disco onde se encontra instalado o XAMPP .................................................. 13
Ilustrao 8: pasta XAMPP .............................................................................................................. 14
Ilustrao 9:pasta htdocs .................................................................................................................. 14
Ilustrao 10:pasta criada para o wordpress ..................................................................................... 15
Ilustrao 11:pasta que criou para o wordpress................................................................................ 15
Ilustrao 12: pasta wordpress descomprimida dentro da pasta criada ............................................ 16
Ilustrao 13:Acesso a pasta wordpress pelo navegador WEB ........................................................ 16
Ilustrao 14:pgina inicial do site wordpress ................................................................................. 17
Ilustrao 15:pgina do site wordpress que vem por defeito ........................................................... 18
Ilustrao 16: Pgina de inicio de sesso no painel de administrador wordpress ............................ 19
Ilustrao 17:painel de administrador do wordpress ........................................................................ 20
Ilustrao 18:pasta wordpress .......................................................................................................... 23
Ilustrao 19:pasta wp-content ......................................................................................................... 24
Ilustrao 20:pasta themes ............................................................................................................... 25
Ilustrao 21:Android Studio.27

vii

ndice de Tabelas
Tabela 1

Calendarizao das tarefas realizadas............................................................................. 4

viii

Acrnimos
CMS- Content management system

PHP-Personal Home Page

HTTP-Hypertext Transfer Protocol
HTML-HypertextMarkup Language
FTP-Fille Tranfer Protocol

ix

1. INTRODUO

1.1. INTRODUO
A temtica referente ao projeto est inserida no contexto do desenvolvimento do website da
associao SHARE. A Share-Associao para a Partilha de Conhecimento, uma associao
sem fins lucrativos constituda por profissionais de seniores com carreiras de sucesso e com
capacidade de iniciativa, disponibilidade de tempo e interesse em partilhar o seu saber,
trabalhando essencialmente para os jovens, numa base de voluntariado.
A ideia deste projeto criar um novo site para a SHARE, com a finalidade de conter recursos
mais atualizados e com melhores funcionalidades.

1.2. OBJETIVOS
Os objetivos deste projeto so:
Promover o contacto com empresas, instituies, associaes fora da escola;
Aplicar os conhecimentos adquiridos na escola com o mercado de trabalho;
Estabelecer uma relao mais prxima com pessoas que trabalham na rea do curso;
Fazer com que um projeto escolar possa ser implementado numa situao real e que
v de encontro s necessidades;
Criar um site com mais recursos e finalidades em relao ao atual.

1.3. CALENDARIZAO
Outubro

Novembro

Dezembro

Janeiro Fevereiro

Escolha do tema
Criao do site
(implementao
do tema e links)
Criao

das

pginas e do seu
contedo
Adio

do

calendrio,

da

newsletter,
entre

outros

recursos
Correo
erros

de
e

implementao
em

modo

Alfa/Beta
Correo
erros

de
e

implementao
final

Tabela 1: Calendarizao

Maro

Abril

Maio

Junho

2. CONCEITOS TERICOS

O WordPress um sistema de gesto de contedo que lhe permite criar e manter, de maneira
simples e robusta, todo o contedo de um site. Combina esttica, standards da Web e
usabilidade. Apesar de ser grtis, tem um valor inestimvel.
Sistema de Gerenciamento de Contedo (do ingls Content Management System CMS)
uma aplicao usada para criar, editar, gerenciar e publicar contedo de forma
consistentemente organizada permitindo que o mesmo seja modificado, removido e
adicionado com facilidade.
PHP (um acrnimo recursivo para "PHP: Hypertext Preprocessor", originalmente Personal
Home Page) uma linguagem interpretada livre, usada originalmente apenas para o
desenvolvimento de aplicaes presentes e atuantes no lado do servidor, capazes de gerar
contedo dinmico na World Wide Web. Figura entre as primeiras linguagens passveis de
insero em documentos HTML, dispensando em muitos casos o uso de arquivos externos
para eventuais processamentos de dados.
HTML (abreviao para a expresso inglesa HyperText Markup Language, que significa
Linguagem de Marcao de Hipertexto) uma linguagem de marcao utilizada para
produzir pginas na Web. Documentos HTML podem ser interpretados por navegadores. A
tecnologia fruto da juno entre os padres HyTime e SGML.
FTP ou File Transfer Protocol (em portugus, Protocolo de Transferncia de ficheiros),
uma forma bastante rpida e verstil de transferir ficheiros sendo uma das mais usadas na
Internet.
Android Studio a nova sute de desenvolvimento de apps em Android Foi projetado
utilizando a infraestrutura da IDE IntelliJ IDEA, da JetBrains Utiliza o Gradle como novo
sistema de build no processo de desenvolvimento.
Material design um espao 3D, o que significa que todos os objetos tm x, y, z e dimenses.
O eixo z perpendicular ao plano de alinhamento da tela, com o eixo z positivo que se
estende na direco do observador. Cada folha de material ocupa uma nica posio ao longo
do eixo z e tem uma espessura 1DP padro.

Na web, o eixo z usado para mergulhar e no para a perspectiva. O mundo 3D emulado

atravs da manipulao do eixo-y.

3. FUNDAMENTAO DO
PROJETO

A escolha deste tema foi feita atravs do convite por parte do Dr. Pedro Pimenta, professor
na Universidade do Minho e representante da Associao SHARE.
Desenvolver um novo site para esta associao utilizando Wordpress vai trazer melhores
recursos e facilitar a gesto do contedo sem precisar de terceiros.
Assim, com este novo site, a SHARE ter uma presena mais forte na internet com maior
facilidade e rapidez.

4. IMPLEMENTAO

Mtodos e tcnicas a utilizar e atividades a desenvolver

Para realizar este projeto ir ser utlizado um CMS (Sistema de Gesto de Contedo) neste
caso o WordPress que est disponvel no site (www.wordpress.org), ser ainda utilizada a
linguagem Java para a criao da aplicao para dispositivos moveis que utilizem o sistema
operativo android.
Para a newsletter, calendrio e imagens rotativas (presentes na pgina inicial) ser utilizado
plug-ins, para criar as pginas ser utilizado o recurso que vem por predefinio no
WordPress, para a estrutura do site utilizarei um tema.

Como Instalar Wordpress

1. Fazer Download do wordpress

Ilustrao 1: Site de download do wordpress.

2. Iniciar o painel de controlador do XAMPP

Ilustrao 2:Imagem do painel de controlo do XAMPP.

3. Iniciar o mdulo Apache e o mdulo MYSQL

10

Ilustrao 3:painel wordpress com mdulos iniciados.

4. No mdulo MSQL clicar em Admin e ir abrir uma pagina web.

Ilustrao 4: pgina de administrador MYSQL.

11

5. Clicar em new, e ira aparecer a seguinte pgina.

Ilustrao 5: pgina de criao de bases de dados.

6. Criar uma base de dados, inserindo o nome e clicando em criar.

7. Aps criar a base de dados esta estar disponvel no canto esquerdo.
8. Abra o explorador de ficheiros.

12

Ilustrao 6: Explorador de ficheiros do Windows.

9. Selecione o disco onde instalou o XAMPP, no meu caso o disco C.

Ilustrao 7:Pasta do disco onde se encontra instalado o XAMPP.

13

10. Selecione a pasta xampp.

Ilustrao 8: pasta XAMPP.

11. Selecionar a pasta htdocs.

Ilustrao 9:pasta htdocs.

14

12. Criar uma pasta com um nome da sua preferncia, no meu caso a pasta chama-se
share.

Ilustrao 10:pasta criada para o wordpress.

13. Selecionar a pasta que criou.

Ilustrao 11:pasta que criou para o wordpress.

15

14. Abrir o arquivo zip que descarregou e descomprimir dentro da pasta que criou.

Ilustrao 12: pasta wordpress descomprimida dentro da pasta criada.

15. Abrir o navegar web e escrever localhost/nome da pasta criada.

Ilustrao 13:Acesso a pasta wordpress pelo navegador WEB.

16

16. Clicar em wordpress e seguir os passos de instalao.

17. Terminada a instalao abra um separador e volte a escrever localhost/nome da
pasta criada e clicando em wordpress.
18. Ir abrir uma pgina com o seu site wordpress.

Ilustrao 14:pgina inicial do site wordpress.

17

19. No meu caso como j tenho um site wordpress criado e com contedo aparece como
na imagem a cima, mas ir aparecer uma pgina simples com pouco contedo.

Ilustrao 15:pgina do site wordpress que vem por defeito.

18

20. Para editar a pgina precisa-r de aceder ao painel de controlo do wordpress, para
isso depois de wordpress escreva wp-admin, no meu caso fica assim
localhost/share/wordpress/wp-admin, e ir aparecer uma pgina para iniciar
sesso.

Ilustrao 16: Pgina de incio de sesso no painel de administrador wordpress

21. Inicie sesso com o nome de utilizador e senha que colocou durante a instalao do
wordpress e vai entrar no painel de controlo do wordpress.

19

Ilustrao 17:painel de administrador do wordpress.

22. Aps isto s comear a criar o seu site.

Como adicionar e alterar temas no wordpress

1. Abrir o navegador web e pesquisar por wordpress themes.
2. Aceder ao site https://wordpress.org/themes/.
3. Escolher o tema e fazer o download.
4. Abrir o explorador de ficheiros.

20

Ver ilustrao 6

21

5. Selecionar o disco onde instalou o XAMPP, no meu caso o C, a pasta XAMPP e a

pasta htdocs.

Ver ilustrao 7

22

6. Selecionar a pasta que criou para instalar o wordpress, no meu caso share.

Ver ilustrao 10.

7. Selecionar a pasta wordpress.

Ilustrao 18:pasta wordpress.

23

8. Selecionar a pasta wp-content.

Ilustrao 19:pasta wp-content.

9. Selecionar a pasta themes.

24

Ilustrao 20:pasta themes.

10. Abrir o arquivo zip do tema que descarregou e descomprimir dentro da pasta themes.
11. Para alterar o tema basta aceder ao painel de controlo do wordpress clicar em
apresentao, temas e selecionar o tema que pretende.

25

Organigrama do site
Pgina Inicial

Share

Associao

Publico
Alvo

Opinio

Aderir

Projetos

Associados
Conferncias

Misso

Universidades

Associados

Valores
Startups
Estatutos
Municpios
rgos
sociais

Jovens
Universitrios

Relatrios
e contas

Universidades
Municpios

Empreendedorismo
e Startups

Palestras
Observatrio
1 emprego

CV-Candidatura a
emprego

Projetos
curriculares

Testemunhos

Workshops

26

Organigrama da base de dados

Tabela: Adeses

codad

Nome

Apelido

Morada
net
codpost
setor
Localidade

partilha

disp

Email

conttel

exp

anonasc

perfil

Reformado

hab

27

Aplicao para dispositivos mveis

A aplicao para android vai disponibilizar duas das funcionalidades do site nomeadamente
a funcionalidade de opinio e a funcionalidade de adeso.
Para a criao da aplicao foi utilizado Android Studio.

Ilustrao 21: Android Studio

A aplicao est tambm otimizada para funcionar de duas maneiras diferentes nas verses JellyBean
e KitKat e na verso Lollipop.
Esta foi ainda criada utilizando material design.

28

5. TESTES E RESULTADOS
Aps ter colocado o tema realizei um teste nos cdigos que alteram as cores para identificar
onde se encontravam tive resultados positivos pois encontrei todos os cdigos das cores que
pretendia alterar.
Aps ter colocado a informao comecei a fazer o download dos plug-ins para colocar a
newsletter, testei vrios plug-ins mas no obtive sucesso, continuei a procurar e finalmente
encontrei o plug-in que fazia o pretendido.
Em seguida procurei um plug-in que coloca-se imagens rotativas, mas a maioria deles tinham
um custo ento alterei a pesquisa para procurar plug-ins que fossem grtis e encontrei um
grtis, comecei a realizar testes para ver se fazia o que este plug-in realizava e obtive o que
pretendia.
Para colocar o formulrio de adeso a fazer o registo tive de procurar um plug-in que me
permitisse adicionar cdigo PHP numa pgina pois os CMS s permitem colocar cdigo
HTML, no foi complicado pois o primeiro plug-in que encontrei realizava o pretendido o
que me permitiu numa primeira fase testar a ligao a uma base de dados e posteriormente
colocar a ligao e a insero de registos a funcionar.
Aps a criao da aplicao foi feito o teste para verificar se esta se ajustava ao ecr e
funcionava, numa primeira fase a mesma no se ajustava ao ecr do dispositivo mas na
segunda fase esta j se ajustou com a implementao de cdigo que permitiu criar um scroll
para que o utilizador percorra todo o contedo.
Foi ainda feito um teste em trs verses diferentes nomeadamente nas verses Jelly Bean,
KitKat e Lollipop, para assim perceber como a aplicao ficaria nessas verses, e percebido
como a aplicao ficaria esta foi otimizada para cada uma das verses para assim se poder
desfrutar melhor da aplicao.

29

Aps a criao do menu lateral da aplicao foi feito os testes para ver se este funcionava.
Aps a criao da aplicao esta foi testada nos smartphones nexus 5 e nexus 6 e na tablet
nexus 7 nas orientaes verticais e horizontais para ver como a aplicao ficaria nessas
orientaes e como a aplicao ficaria em diversas resolues obteve-se testes positivos e a
aplicao ajustou-se para as melhores condies em cada dispositivo.
No site foi adicionado um plug-in para realizar a contagem das visitas e foram realizados
testes para ver se este fazia o que prometia, foram obtidos resultados positivos.
Aps colocar a funcionalidade de opinio na aplicao foi realizado um teste para ver o que
acontecia caso o utilizador preenche-se todas as caixas e no preenche-se todas as caixas,
numa primeira fase o email era enviado nas duas situaes mas foi adicionada uma condio
que permitiu verificar se todas as caixas estavam preenchidas ou no.
Aps colocar a funcionalidade de aderir na aplicao foi como referido anteriormente
realizado um teste para verificar o que aconteceria caso as caixas estivessem preenchidas ou
no, numa primeira fase a adeso era efetuada independentemente de como estavam as
caixas mas com uma condio o problema foi resolvido.
Foi feito um teste para ver o que acontecia caso no existisse ligao h internet e na fase
inicial a aplicao deixava de responder para resolver foi criado um script em java que fazia
a verificao de existncia de uma ligao a internet e caso houvesse este no mostrava nada
caso noa houvesse a aplicao passou a informar o utilizador de que o dispositivo no
apresentava conexo internet.
Foi feito um teste aps ter sido adicionado um efeito de separador corrente na aplicao para
ver se este era realizado como devia se ser foram obtidos resultados positivos.

30

6. CONCLUSO E
TRABALHO FUTURO

A retirada da realizao deste trabalho que hoje em dia a criao de um site tem vindo a
tornar-se cada vez mais fcil e que mesmo pessoas que no percebem muito de programao
pode criar um site com muitos e bons recursos.
Com este trabalho foi ainda possvel perceber como funciona o wordpress e o que com ele
se pode fazer.
Pode ainda com este projeto perceber como funciona o material design e o que se pode fazer
com a sua utilizao.

31

7.Referncias Documentais
[1] https://pt.wordpress.org/, 16-10-2014
[2] http://www.share.pt/, 16-10-2014
[3] http://www.narga.net/hight-quality-wordpress-themes-free-february-2014/, 16-102014
[4] https://developer.android.com/sdk/, 21-02-2015
[5] https://www.google.com/design/spec/material-design/introduction.html#, 25-04-2015
[6] https://github.com/google/iosched, 28-04-2015

33