engineering project

Projeto de Engenharia Electrnica

Reformulao da pgina web do Centro de Cincia Viva do AlgarveJames Foot n. 40650

Supervisor da Empresa: Professor Jos LongrasOrientador do DEEI: Professor Helder Daniel

Data de Entrega: 28/06/2013

ndicendice de Figuras 4

Introduo 5

1 Ferramentas Utilizadas 6

1.1 Linguagens de programao 6

1.2 Software 6

1.3 Frameworks, plug-ins e outras ferramentas online 7

2 Pesquisa 7

3 Pr-desenvolvimento 9

4 Desenvolvimento da pgina inicial 11

4.1 Estrutura 12

4.2 Dimenses 13

4.3 Aspecto Visual da pgina 13

4.4 Elementos da pgina inicial 13

5 Desenvolvimento dos Templates 16

6 Transformao para um pgina dinmica 17

6.1 Base de Dados: 17

6.2 Classes: 19

6.3 Pgina inicial: 20

6.4 Pgina bsica 21

6.5 Pgina para os Eventos 21

6.6 Pgina para as tabelas: 21

6.7 Sistema de Hiperligaes 21

7 Implementao do backoffice 22

7.1 Imagens 22

7.2 Eventos 24


Pgina 2 de 29

7.3 Pginas 24

7.4 Utilizadores 24

8 Testes e pequenas alteraes 25

Concluso 27

Bibliografia 28

Anexos 29

1. Manual de Utilizador para o backoffice ccvalg.pt 29


Pgina 3 de 29

ndice de Figuras

Figura 1 - Esboo da pgina inicial.

Figura 2 - Classes User, Database e Session.

Figura 3 - Diagrama de Estados para o Login.

Figura 4 - Diagrama do menu principal da pgina.

Figura 5 - Estrutura Bsica.

Figura 6 - Estrutura Bsica com as devises para a pgina inicial.

Figura 7 - Um printscreen da pgina inicial.

Figura 8 - Um printscreen do cabealho com o doodle e dos destaques.

Figura 9 - Um printscreen da diviso dos prximos eventos.

Figura 10 - Um diagrama da estrutura da diviso dos prximos eventos.

Figura 11 - Primeiro diagrama da estrutura da diviso da seo das notcias, com um feed de

notcias, mapa com a localizao e o horrio da abertura.

Figura 12 - Segundo diagrama, agora com a webcam e o feed do facebook, localizao e

horrios.

Figura 13 - Terceiro diagrama, agora s com a localizao o nucleo de astronomia e os

horrios.

Figura 14 - Diagrama com a estrutura da pgina bsica.

Figura 15 - Diagrama com a estrutura da pgina dos eventos.

Figura 16 - Diagrama com a estrutura da pgina das tabelas.

Figura 17 - Printscreen de uma tabela da base de dados no phpmyadmin.

Figura 18 - Printscreen da tabela Conteudo no phpmyadmin.

Figura 19 - As classes da pgina do CCVAlg.

Figura 20 - URL dinmico

Figura 21 - Backoffice da pgina do CCVAlg.

Figura 22 - Imagem de Introduo no backoffice do CCVAlg.

8

10

11

11

12

13

13

14

14

14

15

15

15

16

16

17

18

19

20

22

23

25


Pgina 4 de 29

Introduo

No mbito da cadeira Projeto de Engenharia Electrnica (PEE) foi nos pedido para desenvolver-mos um projeto para uma organizao ou empresa, que no s iria envolver a parte de desenvolvimento do projeto em si, mas tambm uma componente de contato com a empresa para a qual estamos a desenvolver este projeto.

Com puderam observar na capa deste relatrio, o projeto que selecionei foi a reformulao da pgina web do Centro de Cincia Viva do Algarve (CCVAlg) com incorporao de imagens recolhidas em tempo-real. Para poder justificar as razes pelas quais escolhi este projeto, primeiro tenho que explicar o que o Centro de Cincia Viva do Algarve.

O Centro de Cincia Viva do Algarve (CCVAlg) uma instituio que tem como objetivos a educao para o conhecimento cientfico e divulgao cientfica e tecnolgica. Grande para do trabalho do centro em estimular o interesse da comunidade, principalmente a comunidade jovem nas reas cientficas.

A escolha deste projeto foi baseado nas seguintes razes. O facto deste projeto envolver programao web, que uma rea onde j tenho alguma experincia. Porque um motivo para aprender e aplicar tcnicas e ferramentas novas, com por exemplo a programao orientada a objetos (POO). Outra razo que me levou a escolher este projeto esta relacionado com o trabalho que o CCVAlg faz, admiro o trabalho que fazem, acho que muito importante envolver crianas e jovens nas reas cientficas, e este projeto foi a forma de poder apoiar esta causa.

Aps ter reunido com o supervisor da empresa, o Professor Jos Longras, dividi o projeto em dois objetos principais: pagina principal e o backoffice. Este objetivos refletem os interesses da empresa e o tempo que me foi dado para desenvolver este projeto. O primeiro objetivo fazer uma pagina com um designe moderno, dinmico, grande alcance demogrfico, mas simples de utilizar. O segundo fazer um backoffice, isto , uma pgina de administrao, uma forma simples de adicionar contedo pgina principal. O backoffice tem que seguro mas tambm simples de utilizar. A captao de e incorporao de imagens recolhidas a tempo-real, no foi considerado como um objetivo prioritrio, porque envolvia custo e a prioridade do CCVAlg era reformulao da pgina web.


Pgina 5 de 29

1 Ferramentas Utilizadas

Para desenvolver uma pgina web ser necessrio um conjunto de ferramentas, como linguagens de programao, software, frameworks e plug-ins.1.1 Linguagens de programao

Para este trabalho utilizei quatro linguagens de programao diferentes. HTML, CSS, PHP, e JavaScript.

HTML (HyperText Markup Language) - a base de todas as paginas web, e a linguagem que d a estrutura, as fundaes da pgina web.

CSS (Cascading Style Sheets) - a linguagem responsvel pela componente grfica da pgina, o aspecto ou estilo dos diferentes elementos da pgina.

PHP (PHP: Hypertext Preprocessor) - a linguagem que me permite tornar uma pgina de contedo esttico (s com HTML) numa pgina com contedo dinmico. Mas tem que ser corrido no servidor.

JavaScript - uma linguagem parecida ao php, mas no tem que ser corrida no servidor, isto , o contedo dinmico esta a ser gerado sem ter que recarregar a pgina novamente, no tem que ir ao servidor.

Uma pgina dinmica e uma pagina web onde o seu contedo pode variar dependendo de variveis, por exemplo, se eu estou em Portugal as horas que aparecem na pgina esto com o fuso horrio de Portugal, mas quando vou para a China e abro a mesma pgina o fuso horrio mudou para o da China.

1.2 Software

Para desenvolver uma pgina web no necessrio nenhum programa com compiladores, com acontece para as outras linguagens de programao, basta ter um editor de texto. Mas ajuda ter um editor de texto que reconhece as linguagens diferentes assim torna-se mais fcil detectar erros.

Para testar uma pagina web, h duas opes, carregar para o servidor e testar com um domnio, ou correr no browser utilizando o file path. A ultima opo s funciona para HTML e CSS, para PHP necessrio correr um servidor Apache local no computador.

Os programas que utilizei para este projeto foram os seguintes:

XAMMP - o servidor de apache local que referi acima. um programa que funciona tanto para PCs com para Macs tambm.

TextMate - um editor de textos que funciona s para Macs. As vantagens de utilizar este editor de texto que diferencia as linguagens de programao e os seus elementos utilizando cores.

Photoshop - um editor de imagens, utilizado para criar ou alterar algum contedo grfico (imagens) para a pgina web.


Pgina 6 de 29

1.3 Frameworks, plug-ins e outras ferramentas online

Frameworks so bases ou fundaes de uma pgina web, isto , cdigo em HTML e CSS que do a estrutura base de uma pgina, com por exemplo, o tipo de letra, o tamanho dos ttulos, botes, etc.

Plug-ins so programas j feitos, na maioria, dinmicos, com a mesma funo das frameworks, que reduzir o tempo de desenvolvimento de uma pgina.

As lista abaixo contem todas as frameworks, plug-ins, e outras ferramentas online que utilizei na pgina.

Bootstrap - uma framework desenvolvida pelo Twitter. a base tanto da pgina inicial, com dos templates e o backoffice criados para este projeto.

phpmyadmin - uma ferramenta que utilizada para trabalhar com uma base de dados.

Google Analytics - uma aplicao que fornece dados estatisticos sobre a utilizao da pgina.

RCarousel - um carrossel feito em jQuery, que uma biblioteca do javaScript.

placehold.it - esta aplicao cria uma imagens com as dimenses especificadas pelo utilizador, esta ferramenta foi utilizada para preencher os espaos das imagens predefinidos no HTML, na fase de desenvolvimento da pgina.

2 Pesquisa

Este relatrio esta divido em 6 fase que representam as diferentes fase de desenvolvimento desta pgina web, comeando com com a investigao.

O trabalho de investigao e planeamento comeou dia 11 de Maro de 2013, com a estruturao dos tpicos para investigar, que se encontram em baixo.

Aspecto da pgina; Forma como fazer a pgina; Templates; Estrutura do backoffice; Tags;

O aspecto de uma pgina web muito importante, a primeira coisa que o utilizador v, e um grande fator em manter o utilizador na pgina. Uma pgina web no tem sempre o mesmo aspecto, isto , pode variar o numero de colunas, se a pgina ocupa o ecr inteiro ou se centrada, etc.

Comecei por analisar as pginas dos outros Centro de Cincia Viva incluindo o Oceanario e o Pavilho do Conhecimento de Lisboa, o professor Jos Longras referiu que gostava da pgina do Centro de Cincia Viva da Floresta. Ja que o tema da pgina esta relacionada com museus, educao e cincia, tambm analisei algumas pginas de museus


Pgina 7 de 29

de cincia bem conhecidos, como o Science Museum em Londres no Reino Unido, COSI em Ohio nos EUA, e Heureka em Vantaa na Finlndia.

Aps ter analisado estas pginas retirei as melhores ideias, e desenhei um esboo da pgina inicial.

O esboo mostra a primeira verso da pgina inicial. Em cima temos o logotipo do CCVAlg, e ao lado temos o menu e uma campo para efetuar pesquisas. Agora no centro da pgina ou corpo da pgina temos os destaques que ser um plug-in em javascript que ira

mostrar as imagens com a informao que o CCVAlg quer destacar. depois temos os eventos, que tambm ser um plug-in e javascript, onde iro aparecer os prximos eventos que iro decorrer no centro. E o ultimo elemento do corpo da pgina inicial um campo onde iro estar as ultimas noticias, um mapa com a localizao do centro, e o horrio do centro. agora no rodap da pgina, no lado esquerdo estaro os logotipos das organizaes que apoiam o CCVAlg, e no lado direito a informao de contato e uma hiperligao para a pgina do CCV TV.

Como fazer a pgina tambm um ponto muito importante, ha varias formas de fazer uma pgina web, podemos fazer uma do zero, isto , programando tudo utilizando HTML, CSS e PHP, podemos utilizar frameworks e desenvolver o resto da pgina utilizando a

base do framework, tambm podemos utilizar um Content Management System (CMS) como o joomla, wordpress,

drupal, etc.

Voltando aos objetivos deste projeto, tanto o backoffice como a pgina em si tinha que ser simples de utilizar. Seguindo por estes objetivos exclui os CMS porque, os CMS utilizam um backoffice eficiente mas genrico para todos os caso, isto , o backoffice de um CMS igual se a pgina for um blog, ou se for um frum, ou uma pgina normal, isto quer dizer que o backoffice tem que estar prepara para estes casos todos, que faz com que tenha muitas funcionalidade que no seriam necessrias para a pgina do CCVAlg. E como no tenho tempo para fazer uma pgina de raiz, decidi utilizar uma framework, que o bootstrap . O bootstrap a framework mais apropriada para este projeto porque, tem uma boa base, tem um aspecto moderno, e simples de programar.

Para simplificar o resto da pgina, pensei em criar templates para os tipos de contedo que ser colocado na pgina. Depois de ter analisado a pagina web do CCVAlg vi que os os tipos de contedo so: eventos, pginas com informao sobre as exposies e outros servios, e noticias. Por isso decidi criar trs templates, uma para os eventos, uma para texto, e outra para tabelas.

A estrutura do backoffice ir estar baseado nos templates e no resto do contedo dinmico da pgina.

Figura 1 - Esboo da pgina inicial.


Pgina 8 de 29

Tem que haver uma forma de importar imagens, re-dimensionado as e, caso necessrio cortar, de forma a no desfigurar a pgina. O backoffice tambm ter um formulrio para adicionar eventos, texto e noticias, e forma de editar e apagar.

Um dos grandes problema que encontrei na pgina atual do CCVAlg, era a falta de informao no eventos sobre o publico alvo. Para resolver o problema baseai-me na sistema de tags, hashtags utilizados em muitas pginas web, como o Twitter, o YouTube, e agora o Facebook tambm. Os tags ou hashtags funcionam da seguinte forma, ao escrever o smbolo cardina (#) com uma palavra frente, essa palavra passa a ser uma hiperligao que reencaminha o utilizador para uma pgina onde est reunido todo o contedo que utilizou essa combinao de cardinal mais a palavra (#mieet). No caso do CCVAlg o tag no ser definido pelo utilizador, haver quatro tags, crianas, jovens, adultos, e famlias. Agora quando criam um evento ou noticia, adicionam os tags apropriados a esse evento ou noticia.

3 Pr-desenvolvimento

Esta fase surge porque o supervisor da empresa, professor Jos Longras e o designer do CCVAlg Lus Gonalves estavam a planear os menus para a nova pgina, e para no ficar parado comecei a desenvolver o backoffice.

De inicio decidi que no iria gastar muito tempo no aspecto visual do backoffice porque, uma pgina direcionada as pessoas que iro fazer a manuteno da pgina, isto , os trabalhadores do CCVAlg. Por isso usei o cdigo fonte de uma pgina exemplo do Bootstrap como template para o backoffice.

Aps ter construdo as fundaes do backoffice, comecei a planear e implementar os formulrios para os diferentes tipos de dados que sero inseridas na pgina como os eventos. Primeiro fiz o formulrio para as notcias, que tem os seguintes campos:

Titulo; Contedo(incluindo imagens); Publico Alvo (utilizando as tags);

Depois fiz mais dois formulrios, uma para as imagens e outro para eventos, que tem os seguintes campos: Eventos:

Titulo; Descrio; Seleo do cartaz; Data; Hora; Local; Preo; Publico Alvo;

Imagens: Nome da Imagen; Selecionar a imagem; Tipo de Imagem;


Pgina 9 de 29

O campo tipo de imagem um campo de escolha mltipla onde o utilizador pode selecionar o destino da imagem, com por exemplo para evento, assim quando o programa importa o ficheiro redimensiona a imagem para a altura e largura especificadas sem perder as propores, e tambm caso seja necessrio corta o resto da imagem.

Tambm decidi fazer as tabelas para as trs categorias que falei anteriormente. Estes tabelas so onde o utilizador pode consultar as notcias ou eventos que foram criados e alguns dados relevantes sobre essa categorias.

Notcias:

Titulo Contedo Data de publicao

Imagens: Miniatura da imagem carregada; Nome da Imagem; Tipos de Imagem;

Eventos: Data; Titulo; Descrio; Hora; Local;

De seguida comecei a criar o sistema de login e as sesses, de forma que os utilizadores possa entrar no backoffice.

Para o sistema de login, criei uma classe User, que a classe responsvel pelos utilizadores. Esta classe onde se encontram todas as funes relacionadas com os utilizadores.

A imagem ao lado representa o deagrama UML da classe User e da classe Database. A classe Database reponsvel pela abertura, querys e o fecho da ligao com a base de dados.

A base de dados tem um papel muito importante neste numa pgina dinmica, onde est localizado 80% dos dados utilizados na pgina vem.

Outra classe utilizada para o login a classe Session, esta classe criar e gere a sesso dos utilizadores. O que uma sesso? Uma sesso uma forma de associar certa


Pgina 10 de 29

Figura 2 - Classes User, Database e Session

informao com um utilizador da pgina, por exemplo, se essa pessoas efetuou o login ou no.

O login funciona de acordo com o diagrama de estados que se encontra na figura em baixo. Ao entrar-mos no backoffice (pgina admin), o programa analisa se existe uma sesso criada, se existe ento quer dizer que ja efetuamos o login, caso no exista nenhuma sesso, ento e reencaminhado para a pgina de login.

Aps ter esperado muito tempo pelo planeamento dos menus, tive que criar um com base na pgina atual do CCVAlg e nas pginas dos outros CCV, o esboo desse menu est representado na figura abaixo.

Apresentei o esboo acima numa reunio com o supervisor da empresa, foi aceite, e assim pode avanar para a prxima fase deste projeto.

4 Desenvolvimento da pgina inicial

Nesta fase irei focar no desenvolvimento da pgina inicial, que a pgina mais importante do site, nesta pgina onde os visitantes ficam com a primeira impresso do CCVAlg, e o que decide se continuam a na pgina para procurar outras informaes ou nunca voltam mais.

Figura 3 - Diagrama de Estados para o Login

Figura 4 - Diagrama do menu principal da pgina.


Pgina 11 de 29

Para esta pgina inicial decidi que iria fazer de raiz, s utilizando alguns elementos da framework bootstrap.

A pgina inicial ser feita num ficheiro com o nome index.html. O ficheiro onde queremos que os visitantes entrem na pgina chama-se sempre index.html porque, quando o visitante insere no seu browser o endereo da pgina web o browser enviado para uma diretoria e abre automaticamente o ficheiro com o nome index.html.4.1 Estrutura

Uma pgina web comea sempre por uma estrutura base em HTML, o head e o body. O head onde esto os vrios elementos que os visitantes no veem mas que so importantes para o browser como o:

titulo - que o que aparece nos tabs do browser. links - para os ficheiros de CSS. codificao da pgina - no caso desta pgina a codificao UTF-8. descrio da pgina - importante para os motores de busca. autor da pgina. favicon - que o cone que aparece nos tabs do browser. scripts

O body onde est situado o cdigo que o visitante v. Basicamente toda a programao de uma pgina feita no body de um ficheiro HTML.

Agora passando para a estrutura base de uma pgina web, a maioria das pginas que esto na internet seguem o seguinte formato: tm um cabealho (header), um corpo (body) e um rodap (footer).

Comeando pelo cabealho, o sitio onde normalmente se coloca o logotipo, o menu principal, as ligaes para as redes sociais e o campo de pesquisa.

O corpo o local onde se encontra toda a informao, onde se encontram os artigos, os eventos, etc.

No rodap onde se encontra a informao de contato da empresa, os patrocnios, o mapa do site e tambm pode conter ligaes para as redes sociais.

Agora continuo a dividir a pgina, mas agora mais focado para os elementos que sero colocadas na pgina


Pgina 12 de 29

Figura 5 - Estrutura Bsica

inicial do CCVAlg. Nesta segunda figura dividi o corpo em trs partes. A primeira diviso onde iram estar os destaques. A segunda diviso esta reservada para os eventos. E a terceira diviso as notcias.

4.2 Dimenses

A pgina do CCVAlg utiliza uma dimenses parecidas as que so utilizadas nas outras pginas com este modelo, isto , centradas no browser. Quando procurei saber qual a largura que utilizada normalmente em pginas deste gnero, reparei que os valores variavam entre 930 pixeis (px) e 950px. Optei pelo valor no meio 940px de largura. A altura da pgina no fixa, porque a altura varia dependendo da quantidade de informao que adicionada pgina.4.3 Aspecto Visual da pgina

Para este projeto escolhi um visual muito minimalista, isto , um visual que no tem gradientes e poucas sobras, um visual muito simples que vai de acordo com os objetivos estipulados para este projeto. Este estilo minimalista esta a ser muito utilizado pela Microsoft no Windows 8 e Windows Phone. A nvel das cores, utilizei as quatro cores do logotipo do CCVAlg, estas cores servem para dar mais vida pgina. Tambm utilizei muito o branco por ser uma cor base, e tonalidades de cinza para as letras e o fundo.

4.4 Elementos da pgina inicialv

Cabealho: Dimenses: 940 x 150 px;Elementos: Logotipo, doodles e o menu;

O cabealho da pgina um elemento que se mantm constante em todas as pginas, no s na pgina inicial. Est divido em em trs parte, o logotipo, menu. Como se pode observar nas imagens. O logotipo ocupa a lado esquerdo do cabealho e o menu est no lado direito. Outro elemento que foi adiciona ao cabealho so os doodles, o conceito de doodles muito utilizado pelo google, so fundos personalizados para ocasies especais,


Pgina 13 de 29

Figura 6 - Estrutura Bsica com as devises para a pgina inicial.

Figura 7 - Um printscreen da pgina inicial.

como por exemplo a pscoa, ou outras ocasies relacionadas com cincias.

Corpo:Dimenses: 940 x 1050 px;Elementos: carrossel de imagens, eventos, localizao, horrios e astronomia;

Na seo do corpo ou body, onde est a informao importante para os visitantes, para captar logo a ateno dos visitantes, coloquei um carrossel de imagens, este carrossel um conjunto de imagens que vo trocando de forma a s estar uma imagem visivel de cada vez. Isto permite poucar espao mas manter imagens grandes de forma a captar a ateno dos visitantes. Ser o local onde estaro os destaques, que ao clicar na imagem o visitante ser reencaminhado para relacionada com a imagem.

A prxima seo a dos eventos, e o local onde o visitante pode ver os prximos eventos, organizados pelo CCVAlg. Este sistema para apresentar os prximos eventos foi feito utilizando um carrossel, em que apresenta quatro eventos, e ao clicar para ver mais eventos, vai introduzindo um de cada vez no lado direito, que faz com que o evento mais direita saia. Cada evento nesta seo est acompanhado por uma imagem, o titulo, a data, uma pequena descrio e os tags desse evento. Quando o visitante carrega no evento ser

reencaminhado para a pgina desse evento, mas se clicar num dos tags ser reencaminhado para uma pgina onde estaro todos os eventos com esse tag. No lado esquerdo da seo de evento est um cone de um calendrio com a data e ms atual.

Agora passando para a ultima diviso da seo corpo, no plano inicial esta um feed de notcias no lado esquerdo, e depois no lado direito, na zona superior estaria um mapa


Pgina 14 de 29

Figura 8 - Um printscreen do cabealho com o doodle e dos destaques.

Figura 9 - Um printscreen da diviso dos prximos eventos.

Figura 10 - Um diagrama da estrutura da diviso dos prximos eventos.

com a localizao do centro, e em baixo, o horrio do centro. Mas ao analisar a pgina do CCVAlg reparei que no postavam notcias. As notcias era publicadas no facebook, por isso redesenhei esse mdulo com, no lado esquerdo em cima imagens de uma webcam e em baixo a localizao do centro e o horrio de funcionamento, e no lado

direito estaria o feed da pgina de facebook do CCVAlg. Apresentei esta nova verso ao supervisor da empresa, mas no foi aprovada porque, a webcam talvez no irai ser possvel fazer e tambm no queria o feed do facebook na pgina, quer manter os dois separados. Passei a desenvolver a terceira verso. Esta verso j era mais simples, s tinha o mapa, um link para a pgina de astronomia, e os horrios. O mdulo estava desenhado de acordo com a figura abaixo.

Rodap:Dimenses: 940 x 110 px;

Est ultima diviso da pgina no cheguei a desenvolver nesta fase, porque ainda no sabia bem a informao que iria colocar neste local.

Antes de passar para a prxima fase, separei o cabealho e o rodap da pgina inicial porque estas duas componentes sero constantes em todas as outras pginas deste projeto, e assim se fizer alguma alterao ao cabealho ou ao rodap, no e necessrio alterar todas as pginas basta s fazer a alterao num s ficheiro. Tambem envie a primeira vero para o supervisor da empresa, para que o resto da equipa do CCVAlg pudesse expressar a sua opinio sobre o aspecto da nova pgina. Nesta altura ainda no estava implementada a componente dinmica da pgina.


Pgina 15 de 29

Figura 11 - Primeiro diagrama da estrutura da diviso da seo das notcias, com um feed de notcias, mapa com a localizao e o horrio da abertura.

Figura 12 - Segundo diagrama, agora com a webcam e o feed do facebook, localizao e horrios.

Figura 13 - Terceiro diagrama, agora s com a localizao o nucleo de astronomia e os horrios.

5 Desenvolvimento dos Templates

Um template uma pgina sem contedo, s contem os elementos visuais e informaes sobre o local e o tipo de contedo que devia l estar. Nesta fase irei falar sobre os templates da pgina do CCVAlg.

O tipo de contedo que a pgina ir ter ser: eventos, pginas com informao, e tabelas. Esse sero os trs templates da nova pgina do CCVAlg. Isto quer dizer que, para os visitantes, a site do CCVAlg s ter quatro pginas, index.html (pgina inicial), cont.html (pgina simples para texto e imagens), even.html (para os eventos) e table.html ( para tabelas).

Pgina bsica

a pgina base para as outras duas pginas abaixo, utiliza o mesmo cabealho e rodap da pgina inicial. Comea com uma imagem grande, que mede 940 x 275 px. No canto inferior da imagem est o titulo dessa pgina, que pode ser, por exemplo, um evento ou uma exposio. Depois esta uma caixa que pode ter texto imagens video, etc. esta caixa que varia nas outras pginas.

Pgina dos Eventos

Como referi anteriormente, esta pgina e construda a partir da pgina de bsica. So que nesta pgina foi a d i c i o n a e l e m e n t o especficos para os eventos. Esse elementos so: Cartaz; Os tags desse evento; A data e a hora do evento; A descrio do evento; O preo; Uma hiperligao para efetuar a inscrio; Informaes de contato; E um hiperligao para fazer o download do cartaz;

Pgina das tabelas

O objetivo desta pgina apresentar tabelas. Usa a mesma base que as pginas acima. Esta pgina ir ser

utilizada para mostrar todos os eventos, os eventos de um tag especifico.


Pgina 16 de 29

Figura 14 - Diagrama com a estrutura da pgina bsica.

Figura 15 - Diagrama com a estrutura da pgina dos eventos.

Agora com a concluso dos templates passamos a fase de desenvolvimento da componente dinmica da pgina.

6 Transformao para um pgina dinmica

Nesta fase comecei a substituir a informao esttica. Esta fase est dividida em sete partes. Temos a Base de Dados e as classes, e depois uma parte para a pgina inicial, e para cada um dos templates. A componente dinmica da pgina web feita utilizando a linguagem de programao PHP. Para o servidor reconhecer que existe contedo PHP nos ficheiros .html, mudamos a o tipo do ficheiro para .php, logo, a pgina inicial passa a ser index.php, os templates passam a ser even.php, cont.php e table.php, e por fim os layouts passam a ser header.php (cabealho) e footer.php (rodap).

6.1 Base de Dados:

Para criar uma pgina dinmica necessrio criar um local um local para guardar a informao, que neste caso a base de dados. Como vou utilizar PHP, a base de dados que escolhi foi mySQL. Utilizando a aplicao phpmyadmin, criei uma base de dados chamada ccvalg. Dentro dessa base de dados adicionei sete tabelas com as seguintes informaes que se encontram na tabela abaixo.


Pgina 17 de 29

Figura 16 - Diagrama com a estrutura da pgina das tabelas.

Conteudo Eventos Imagem Menu principal Mes SliderSub menu principal

Colunas

id mainID subID titulo conteud

o titulo_en conteud

o_en data

id data hora descri

o titulo_en descri

o_en local preo inscrio cartaz data_cia

o data_ulti

ma_modificao

tags

id filename type size destaqu

es eventos poster conteud

o Thumb caption timestam

p

id titulo titulo_en posio

id mes

mes_abv mes_en mes_abv

_en

slider_id imagem_

1 imagem_

2 imagem_

3 imagem_

4 imagem_

5 link_1 link_2 link_3 link_4 link_5 rodape

sub_id id_meni_

principal sub_titul

o sub_titul

o_en sub_posi

o

Agora vou resumir a funo de cada tabela e a necessidade dos dados de cada coluna. A tabela Conteudo o sitio onde ser guardado o contedo das pginas, por exemplo as pginas das exposies, a pgina de apresentao do centro, entre outras. Cada linha contem o titulo e o contedo, tanto em portugus como em ingls tambm, a localizao dessa pgina utilizando o mainID e o subID e a data de criao.

Na tabela Eventos cada linha tem informao sobre a data e hora do evento, o titulo e descrio em duas linguas, o preo, o local a data criao e da ultima modificao e os tags associados ao evento.

A tabela Imagem tem a informao sobre as imagens que foram importadas para a pgina, cada imagem tem um filename, o tipo de ficheiro, se jpg ou png, a funo da imagem, a descrio da imagem e a hora que foi importada.

Na tabela do Menu principal temos a informao sobre o titulo em duas lnguas e a posio de cada elemento do menu.

A tabela ms contem 12 linhas, uma linha para cada ms do ano. Cada l inha tem o nome do ms e a abreviatura, tambm em duas lnguas.

A tabela Slider s tem uma linha, nessa linha est a informao sobre cada uma das imagens. Para cada imagem temos um filename e uma hiperligao.

E a u l t i m a t a b e l a t e m a informao sobre o sub-menu. O id do menu principal a que pertence e o titulo tanto em portugus como em ingls, e a posio.


Pgina 18 de 29

Figura 17 - Printscreen de uma tabela da base de dados no phpmyadmin.

6.2 Classes:

Como referi anteriormente a componente dinmica desta pgina utiliza programao orientada a objetos. Esta pgina contem seis classes programadas em PHP, que esto responsveis pelo contedo, uma funo destas classes o elemento de ligao entre a base de dados a pgina em si (ficheiro HTML), e em alguns casos podem fazer alteraes e funes complexas aos dados retirados da base de dados. Estas classes tambm esto responsveis pela criao de novas entradas, e atualizaes do contedo da base de dados.


Pgina 19 de 29

Figura 18 - Printscreen da tabela Conteudo no phpmyadmin.

6.3 Pgina inicial:

A pgina inicial contem vrios elementos dinmicos programados em PHP, alguns dos quais irei falar ao longo deste ponto. Agora vou fazer uma anlise comeando na parte de cima da pgina.

O primeiro elemento dinmico da pgina e o menu, utilizando a classe MainMenu, o servidor consegue gerar o menu. Usando os mtodos da classe MainMenu, vai base de dados buscar a informao o menu principal, depois num ciclo, gera os botes para o menu e consulta a base de dados para ver se existe algum sub-menu. Os elementos quando veem da base de dados, j veem ordenadas pela posio.

O prximo elemento o carrossel dos destaques. Para este elemento utilizei a classe Slider. Esta classe vai a base de dados buscar o filename e a hiperligao de cada uma das cinco imagens para o carrossel. Depois as gesto das imagens e as transies so feitas utilizando o plug-in RCarousel que utiliza a linguagem de programao java.

Agora na diviso dos prximos eventos, no lado esquerdo temos um cone de um calendrio com a dia e o ms no momento atual. Os valores da data veem do servidor e so atualizados cada fez que pgina atualizada, e utilizando a classe Month, o numero do ms convertido para o nome do ms que est guardado na base de dados. No lado direito temos um carrossel com alguma informao sobre os prximos eventos. Utilizando a classe Event, o programa vai a base de dados retirar os eventos a partir da data no momento atual,


Pgina 20 de 29

Figura 19 - As classes da pgina do CCVAlg.

e depois coloca os dados no carrossel. Esse mtodo s vai buscar no mximo 8 eventos. Como no elemento anterior o carrossel feito utilizando o plug-in RCarousel.

6.4 Pgina bsica

Na pgina bsica o menu funciona da mesma forma que na pgina anterior, porque esta num ficheiro parte (header.html).

A imagem que est logo depois do menu, vem de uma funo PHP que est num ficheiro parte (functions.php). o titulo que est em cima dessa imagem o titulo e depois o contedo so retirados, da base de dados da tabela Contedo, utilizando a classe Content.6.5 Pgina para os Eventos

Como referido na fase dos templates, a pgina dos eventos usa a pgina bsica com base, e depois coloca o contedo especfico para os eventos.

Esta pgina utiliza uma, a classe Event. A classe evento vai a base de dados retirar os dados especficos para um evento.

6.6 Pgina para as tabelas:

Est pgina pode usar qualquer uma das classes referidas acima, e o que faz constri uma tabela com os dados que so retirados da base de dados por qualquer uma dessas tabelas. A pgina das tabelas s utiliza um uma classe de cada vez. Por exemplo no pode mostrar os dados de algumas imagens em conjunto com alguns dados de eventos.

6.7 Sistema de Hiperligaes

De momento a pgina s tem quatro pginas, index.php, even.php, table.php e cont.php. Mas o menu tem muitos elementos, mais do que pginas. Por isso temos que criar pginas dinamicamente utilizando os templaste que foram desenvolvidas na fase anterior. Uma hiperligao em HTML assim:

Link text Estas hiperligaes aparecem nos elementos do menu, nos eventos, nas imagens dos destaques. Uma hiperligao dinmica em PHP tem o seguinte aspecto:

Link text

O ponto de interrogao quer dizer que vou passar uma varivel de uma pgina para a outra. O id nesta caso a varivel, e $var o valor da varivel que colocada na hiperligao.


Pgina 21 de 29

O Funcionamento do sistema de hiperligaes simples, basicamente utilizamos o id que est na base de dados para esse elemento. E quando chega outra pgina existe uma funo que vai buscar essa varivel da hiperligao e depois vai a base de dados com esse id para retirar o resto dos dados relacionados com esse elemento. A funo que vai buscar a varivel hiperligao :

$_GET[id]

Por exemplo, se clicar numa hiperligao de um evento na pgina inicial. A hiperligao desse evento contem o id nico desse evento. Depois enviado para uma pgina para eventos, e nessa pgina uma funo vai buscar o id e depois vai procurar a base de dados por esse eventos.

No final desta fase tenho todas as componentes dinmicas do front-end ou pgina para os visitantes concludas. Agora irei passar para o prximo objetivos para este projeto, que o backoffice.

7 Implementao do backoffice

Nesta etapa foi continuado o desenvolvimento do backoffice, que tinha comeado na etapa 3. Devido as alteraes no tipo de contedo para a pgina, e os dados necessrios para cada tipo, foi necessrio reformular os formulrios e tabelas. Esta etapa est divida em quatro partes, que coincidem com os quatro tpicos do menu, Imagens, Eventos, Pginas e Utilizadores. O backoffice basicamente um interface da base de dados. Mas por trs das tabelas e dos formulrios existe uma serie de funes que verificam que o contedo que o utilizador est a inserir o que pedido, tambm verifica se o contedo esta bem formatado para inserir na base de dados. Existe um sistema de mensagens que transmite a informao como erros e confirmaes de submisso para o utilizador.

7.1 Imagens

Imagens o primeiro elemento do menu, e a zona onde podemos visualizar as imagens que foram carregadas, adicionar imagens novas, e modificar as imagens de alguns elementos da pgina inicial. Dentro desta zona temos um sub-menu que dividi a zona das imagens em trs partes: Apagar, Nova e Cabealho/Destaques.

Quando um utilizador seleciona o elemento Imagens no menu principal, ele levado para a pgina Apagar, que contem uma tabela com todas as informaes bsicas sobre as imagens que foram carregadas. Dados como o nome da imagem, o nome do ficheiro, que tipo de imagem (destaques, cartaz, eventos e contedo), tambm tem uma pequena pre-visualizao da imagem e um boto para apagar a imagem.

O segundo elemento do sub-menu Nova, que contem um formulrio onde os utilizadores podem adicionar novas imagens. Esse formulrio tem os seguintes campos: Nome da Imagem, carregar Imagem e Tipo. O campo Nome da Imagem onde o utilizador


Pgina 22 de 29

Figura 20 - URL dinmico

pode dar um nome imagem para a identificar, porque quando a imagem for carregada o nome do ficheiro vai alterar para um valor numrico, com cinco algarismos, isto deforma a evitar erros com imagens com o mesmo nome, e para que haja um maior controlo sobre a quantidade de imagens carregadas. Carregar Imagem d ao utilizador um boto por onde pode procurar a imagem que quer carregar. O campo Tipo, foi criado para evitar carregar imagens de grandes dimenses, que podem alterar o aspecto da pgina, que pode fazer com que a perca o efeito atrativo, e passa a ter um efeito repulsivo. Por isso foram definidos tamanhos mximos e mnimos para as imagens, de forma a que a pgina no perdesse o aspecto visual desejado. Abaixo est uma tabela com as dimenses mximas e mnimas para as imagens editveis pelos utilizadores do backoffice.

Tipo Mximo

destaques 940x400 px

pgina bsica 300 px de largura

cartaz 352x495 px

imagem para os eventos 227x150 px

Para ter a certeza que nenhuma imagem carregada ultrapassa-se estas dimenses foi feito um programa em PHP que, no ato de efetuar o carregamento da imagem para a pgina, o programa verificava se a imagem tinha as dimenses corretas, caso no tivesse o programa redimensionava e cortava a imagem, de forma a respeitar os mximos estipulados, sem alterar as propores da imagem. Os utilizadores podem definir o tipo de imagem que esto carregar no formulrio, representado na figura abaixo.

O terceiro elemento do sub-menu est relacionado com as imagens que esto na pgina inicial. o local onde se pode escolher quais so as cinco imagens que queremos


Pgina 23 de 29

Figura 21 - Backoffice da pgina do CCVAlg.

para os destaques, e as suas hiperligaes. Tambm tem uma opo para adicionar um doodle ao cabealho da pgina, ou deixar o cabealho em branco.7.2 Eventos

O prximo elemento no menu principal os Eventos, onde possvel adicionar apagar ou editar eventos. Est seo tem um sub-menu que divide esta zona em duas partes: Editar/Apagar e Novo.

A primeira parte Editar/Apagar, uma tabela com todos os eventos que foram criados. Esta tabela mostra a data e hora do evento, o local, o titulo, e se o contedo do evento est em portugus e em ingls. Tambm existem uma opo para editar um evento j criado e outra que apaga o evento.

O segundo elemento do sub-menu onde o utilizador pode criar um evento novo. Consiste num formulrio com os seguintes campos: titulo e descrio do evento, tanto em portugues como em ingles, o local, a data e hora, o preo, o cartaz, e a imagem do evento, e por fim os tags relacionados com o evento.

7.3 Pginas

O terceiro elemento do menu principal so as Pginas, nesta zona s permitido a alterao do contedo. Por razes de tempo e de manter o aspecto visual da pgina uniforme, no foi possvel implementar um sistema para criar e apagar pginas, porque era necessrio fazer muitas verificaes, com por exemplo, consultar o tamanho do texto para ver se ocupa uma ou duas linhas no menu. Verificar a quantidade de sub-menus que cada elemento do menu pode ter.Isto iria envolver muitos teste, que para o qual no houve tempo.

Ao selecionar Pginas no menu principal do backoffice, aparece-nos uma tabela, com o titulo da pgina, a data da ultima modificao, uma verificao se o contedo est tanto em portugus como em ingls, e um boto para editar, que leva o utilizador para um formulrio de edio.

7.4 Utilizadores

O ultimo elemento do menu principal pra os utilizadores, este o local onde gerido as pessoas que tm acesso ao backoffice da pgina do CCVAlg. A zona dos utilizadores contem um sub-menu que divide o a zona em duas parte, Editar/Apagar e Novo.

A primeira parte tem uma tabela com a informao dos utilizadores, nome , e-mail, uma verificao se o utilizador tem palavra passe, e duas opes, uma para editar a conta do utilizador e a outra para apagar.

O segundo elemento do sub-menu, onde pode ser criado uma nova conta de utilizador, atravs do preenchimento do formulrio, que tem os seguintes campos, primeiro nome, ultimo nome, e-mail, e palavra passe.

Para tornar mais claro a forma de criao ou de edio do contedo para a pgina, foi criado uma imagem de introduo ao backoffice com os passo a seguir. Essa imagem est na figura abaixo.


Pgina 24 de 29

8 Testes e pequenas alteraes

Aps a concluso do backoffice a pgina estava pronta para entrar na segunda fase de testes. A pgina foi colocada num servidor com o domnio http://ccvalg.dyndns.info:8085/ccva/public/index.php (est ativo no momento de entrega do relatrio), que permitiu aos trabalhadores do CCVAlg adicionar contedo pgina. Para tornar o trabalho mais fcil para os utilizadores do backoffice, foi criado um manual de utilizador. Esse manual explica os diferentes elementos da pgina, como deve ser adicionado contedo pgina, e os tipos de contedos que so possveis adicionar. Um exemplar da primeira verso do manual est no primeiro anexo deste documento.

Enquanto a pgina estava a ser testada, foi sendo adicionado mais alguns elemento que foram pedidos pelo supervisor da empresa, com uma hiperligao para a pgina de facebook do CCVAlg, uma pgina baseada na pgina de tabelas com todos os eventos, organizados por ms e ano.

Outro objetivo importante para este projeto , a pgina ter um grande alcance, e isto s possvel com a adio de uma segunda lngua pgina. A escolha entre as lnguas automtica, mas pode ser mudada manualmente, e depois essa opo guardada no servidor utilizando uma sesso, assim quando o visitante volta para a pgina, a pgina e carregada com a lngua preferida do visitante. Este sistema de escolha de lnguas funciona da seguinte forma. Quando o visitante carrega a pgina pela primeira vez, uma funo que vai ao browser do visitante ver em que lngua est, se estiver em portugus, a pgina e

Figura 22 - Imagem de Introduo no backoffice do CCVAlg.


Pgina 25 de 29

carregada em portugus, mas se tiver noutra lngua a pgina carregada em ingls, e essa opo guardada numa sesso. Mas se o utilizador no estiver satisfeito, e preferir a outra lngua, ao selecionar o boto com a bandeira dessa outra lngua, a pgina e recarregada de novo com a outra lngua, e essa opo guardada na sesso.

Nesta etapa ainda faltavam alguns aspectos visuais da pgina, algumas imagens e o rodap. Em conjunto com o designer do CCVAlg foram feitas as imagens em falta, que eram as setas para os dois carrossis da pgina inicial, uma imagem de fundo para o ncleo de astronomia e outro para os horrios, as bandeiras para o boto de mudana de lngua e o boto do facebook. Tambm foram adicionados os logotipos das empresas patrocinadoras do CCVAlg no rodap da pgina.

Depois de alguns testes pgina foram descobertos alguns bugs ou erros na pgina. Um desse erros era que a pgina bsica, a altura da diviso onde estava o contedo da pgina, no aumentava com o contedo. Outro problema era a forma de centrar a pgina no ecr no permitia a visualizao em browsers de aparelhos moveis, como telemveis e tablets. Ambos os problemas foram resolvidos com a alterao do cdigo CSS.

Tambm foi solicitado uma ao de formao para os trabalhadores do CCVAlg, relacionado com o funcionamento do backoffice. Mas at ao momento da entrega deste relatrio no foi possvel realizar essa ao de formao.

Foi adicionado o google analytics pgina de forma a, poder monitorizar o comportamento dos visitantes na pgina, que permite no futuro fazer alteraes e melhoramento pgina da forma mais adequada ao visitantes. Por exemplo, se a maioria dos visitantes da pgina forem chineses, talvez no futuro seja necessrio adicionar a lngua chinesa pgina.


Pgina 26 de 29

Concluso

Este projeto estava focado em dois objetivos, fazer uma pgina para os visitantes, e outra para a gesto da mesma. A dificuldade num projeto deste gnero, fazer uma pgina intuitiva para crianas e jovens, que tm um habilidade grande para aprender, que faz com que algo se torne intuitiva de uma forma mais rpida, mas tambm tem que ser simples de utilizar para pais e famlias, que podem demorar mais um pouco mais a tirar o mximo de proveito de uma pgina web. Por isso e que a nova pgina do CCVAlg tem uma pgina inicial, que contem logo a informao mais importante e atualizada, mas com aspecto visual simples e intuitiva para todos. Outro ponto importante a pgina esta em duas lnguas, portugus e ingls, que faz com que seja acessvel para ainda mais pessoas.

O segundo fator importante neste projeto a possibilidade de qualquer pessoas poder atualizar a pgina, no tem que ter conhecimentos de HTML, CSS e PHP. Esta pgina tem um backoffice que permite a edio de mais do que 60% do contedo da pgina, que, em conjunto com o manual de utilizador, faz com que a atualizao desta pgina seja simples.

Devido ao tempo que nos foi dado para desenvolver este projeto, no foi possvel implementar todos os elementos desejados, que faria com que 90% da pgina fosse costumizvel no backoffice. Foi planeado com o supervisor da empresa, passar a pgina do ncleo de astronomia para o novo aspecto visual que a pgina principal tem, criar uma loja on-line com uma rea de gesto de stocks, e uma galeria de fotografias, mas como foi referido em cima, no houve tempo para desenvolver esse elementos. Mas este projeto est construdo sobre uma boa fundao, que faz com seja mais fcil adicionar novos elementos no futuro.

Este projeto foi uma grande oportunidade de experimentar o mundo profissional, desenvolvendo projetos para outros, e trabalhando com outras pessoas. Ao longo deste projeto passei sete horas por semana no Centro de Cincia Viva do Algarve, onde desenvolvi duas pginas, a pgina principal e o backoffice, utilizando em muitos casos tcnicas novas com a programao orientada a objetos. Ao longo do desenvolvimento foram encontrados alguns obstculos, que tiveram que ser tratados, mas o mais importante que esta fase inicial da nova pgina est concluda, e pronta para ser publicada.


Pgina 27 de 29

Bibliografia

Ferramentas

XAMPP - http://www.apachefriends.org TextMate - http://macromates.com Photoshop - http://www.photoshop.com HTML - http://pt.wikipedia.org/wiki/HTML CSS - http://pt.wikipedia.org/wiki/Cascading_Style_Sheets PHP - http://pt.wikipedia.org/wiki/Php JavaScript - http://pt.wikipedia.org/wiki/Javascript phpmyadmin - http://www.phpmyadmin.net RCarousel - http://ryrych.github.io/rcarousel placehold.it - http://placehold.it Bootstrap - http://twitter.github.io/bootstrap Subtle Patterns - http://subtlepatterns.com Google Analytics - http://www.google.com/analytics Google Translator - http://translate.google.com

Pesquisa

Science Museum London - http://www.sciencemuseum.org.uk Center of Science and Insdustry - http://www.cosi.org Museum of Science - http://www.mos.org Centro de Cincia Viva do Algarve - http://www.ccvalg.pt Centro de Cincia Viva da Floresta - http://www.ccvfloresta.com Oceanrio de Lisboa - http://www.oceanario.pt Pavilho do Conhecimento - http://www.pavconhecimento.pt Centro de Cincia Viva - http://www.cienciaviva.pt Centro de Cincia Viva de Constncia - http://constancia.cienciaviva.pt Centro de Cincia Viva do Lousal - http://www.lousal.cienciaviva.pt Centro de Astrofsica da Universidade do Porto - http://www.astro.up.pt/planetario Centro de Cincia Viva Universidade Coimbra - http://nautilus.fis.uc.pt/rc Centro de Cincia Viva de Lagos - http://www.lagos.cienciaviva.pt Centro de Cincia Viva do Alveila - http://www.alviela.cienciaviva.pt Centro de Cincia Viva de Bragana - http://www.braganca.cienciaviva.pt Centro de Cincia Viva de Sintra - http://www.cienciavivasintra.pt Panetrio Calouste Gulbenkian - http://planetario.marinha.pt Centro de Cincia Viva de Estremoz - http://estremoz.cienciaviva.pt Centro de Cincia Viva de Tavira - http://www.cvtavira.pt Centro de Cincia Viva do Porto Moniz - http://www.portomoniz.cienciaviva.pt Centro de Cincia Viva de Aveiro (Fbrica) - http://www.ua.pt/fabrica Centro de Cincia Viva de Coimbra - http://www.exploratorio.pt Centro de Cincia Viva de Vila do Conde - http://viladoconde.cienciaviva.pt Visionarium - http://www.visionarium.pt Expolab - http://expolab.centrosciencia.azores.gov.pt


Pgina 28 de 29

Facebook - https://www.facebook.com/about/newsfeed Quiksilver - http://www.quiksilver.pt Heureka - http://www.heureka.fi

HTML

W3 Schools - http://www.w3schools.com/html

CSS

W3 Schools - http://www.w3schools.com/css

PHP

W3 Schools - http://www.w3schools.com/php PHP - http://php.net Net Tuts Plus Redimensionar Imagens - http://net.tutsplus.com/tutorials/php/image-

resizing-made-easy-with-php

Anexos

1. Manual de Utilizador para o backoffice ccvalg.pt


Pgina 29 de 29

!

!

Manual&de&Utilizador!Backoffice)ccvalg.pt)!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!Verso:!1!Data:!02/06/2013!!!

)

Manual de Utilizador 2

ndice)!Iniciar)sesso)no)Backoffice)....................................................................................)3!

Funcionamento)do)backoffice)................................................................................)3!

Imagens).................................................................................................................)4!Adicionar!uma!imagem!...................................................................................................................................!4!Apagar!uma!Imagem!.........................................................................................................................................!5!Eventos)..................................................................................................................)6!Criar!um!Evento!..................................................................................................................................................!6!Alterar!um!Evento!.............................................................................................................................................!8!Apagar!um!Evento!.............................................................................................................................................!8!Pginas)..................................................................................................................)8!Atualizar!uma!pgina!.......................................................................................................................................!8!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

)


)

Iniciar)sesso)no)Backoffice)!

1. Escreva!o!seguinte!URL!ccvalg.pt/admin!na!barra!de!endereos!do!browser.!

2. Se!no!tenha!iniciado!a!sesso!ser!redirecionado!para!a!pgina!de!login.!Caso!j!tenha!inicio!a!sesso!pode!saltar!o!prximos!passos.!

3. Inicie!a!sesso!com!a!informao!que!se!segue:! Nome!de!Utilizador:!geral! PalavraWpasse:!qwerty123!

4. Depois!clique!em!Iniciar!sesso!!!!

!!Para!terminar!sesso!e!s!clicar!no!boto!Logout!!

Funcionamento)do)backoffice)!Deve!seguir!os!seguintes!passos!para!efetuar!alteraes!!pgina!ou!criar!contedo!novo:!

1. Carregar!todas!as!imagens!necessrias.!2. Criar!um!evento!ou!alterar!o!contedo!da!pgina.!3. Guardar!as!alteraes!feitas.!

!

)


!!

Imagens)!Para!importar!uma!imagem!ou!apagar!deve,!no!menu!do!backoffice!na!parte!de!cima!da!pgina,!selecionar!Imagens.!

Adicionar)uma)imagem)!Para!adicionar!uma!imagem!deve!selecionar!Nova!no!submenu.!!

!

)


!!

Nome)da)Imagem) Deve!dar!um!nome!!imagem.! No!pode!ser!mais!do!que!100!caracteres.!

!

Imagem) Deve!selecionar!uma!imagem!do!seu!computador.! Essa!imagem!no!pode!ser!maior!que!5mb.!

Tipo:) Neste!campo!e!onde!vai!escolher!a!funo!da!imagem.! Se!for!para!um!evento,!selecione!Imagem&(Eventos).! Se!for!um!poster!para!um!evento,!selecione!Poster&(Eventos).! Se!for!para!os!destaques!na!pgina!inicial,!selecione!Destaques&(Pgina&

Inicial).! Se!for!para!outra!o!contedo!de!outra!pgina,!selecione!Imagem&

(Contedo).!!!

Nota:!Os!eventos!necessitam!de!uma!imagem!para!a!pgina!inicial!e!para!as!tabelas!e!um!poster.!!

Apagar)uma)Imagem)!Para!apagar!uma!imagem!deve!selecionar!Apagar!no!submenu.!!

!!

)


Para!apagar!uma!imagem!deve!clicar!neste!cone!!!!!!!!! da!imagem!que!pretende!apagar.!

Eventos)!Para!criar,!modificar!ou!apagar!um!evento!deve,!no!menu!do!backoffice!na!parte!de!cima!da!pgina,!selecionar!Eventos.!!

Criar)um)Evento)!Para!criar!um!evento!novo!deve!selecionar!Novo!no!submenu!dos!Eventos.!!

!!

Titulo/Titulo)Ingls:) Neste!local!deve!colocar!o!titulo!do!evento,!e!colocar!a!traduo!desse!

titulo!no!campo!Titulo!Ingls.! No!pode!ser!mais!do!que!100!caracteres.! No!deve!ser!tudo!em!maisculas.!

Descrio/)Descrio)Ingls:) Este!campo!deve!conter!um!pequeno!texto!a!descrever!o!evento,!e!colocar!

a!traduo!dessa!descrio!no!campo!Descrio!Ingls.!

)


!!

Local:) Neste!campo!deve!colocar!a!localizao!do!evento.!Por!exemplo:!Centro!de!

Cincia!Viva!do!Algarve,!Faro!ou!Mercado!Municipal!de!Faro.!

Cartaz:) Aqui!vai!selecionar!a!imagem!que!quer!por!como!cartaz!do!evento.!!

Imagem:) Neste!campo!deve!selecionar!uma!imagem!para!ser!utilizada!nas!tabelas!e!

na!pgina!inicial.!Pode!ser!a!mesma!imagem!que!foi!utilizada!como!cartaz,!mas!no!!recomendado.!

Data:) Neste!campo!vai!selecionar!a!data!do!evento!com!o!seguinte!formato:!

dia/ms/ano.!

Hora:) Neste!campo!deve!escolher!a!hora!de!inicio!do!evento!com!o!seguinte!

formato:!hora/minutos.!

Preo:) Neste!local!vai!introduzir!o!custo!do!evento.!Se!o!evento!for!gratuito!no!

deve!inserir!nenhum!valor.!

Publico)Alvo:) Neste!campo!deve!selecionar!o!publico!alvo!deste!evento,!podendo!ser!

para!crianas,!jovens,!adultos!e!famlias.!!Aps!ter!preenchido!todos!os!campos!deve!clicar!no!boto!guardar,!para!finalizar!a!criao!do!evento.!!

)


Alterar)um)Evento)!Para!fazer!alguma!alterao!a!um!evento!que!foi!criado,!deve!clicar!no!boto!!!!!!!!!!!!do!evento!que!pretende!alterar.!!!

!!!No!fim!deve!clicar!no!boto!guardar!para!guardar!todas!as!alteraes.!

Apagar)um)Evento)!Para!apagar!um!evento!deve!clicar!neste!cone!!!!!!!!! do!evento!que!pretende!apagar.!

Pginas)

Atualizar)uma)pgina)!Para!modificar!o!contedo!das!pginas!do!ccvalg.pt!deve,!no!menu!do!backoffice!na!parte!de!cima!da!pgina,!selecionar!Paginas.!!Depois!procure!a!pgina!que!pretende!alterar!e!clique!neste!boto!!!!!!!!!!!para!fazer!as!alteraes.!!

)


!!!

!!

Titulo/Titulo)Ingls:) Neste!local!deve!colocar!o!titulo!da!pgina,!e!colocar!a!traduo!desse!

titulo!no!campo!Titulo!Ingls.! No!pode!ser!mais!do!que!100!caracteres.! No!deve!ser!tudo!em!maisculas.!

!

)


Contedo/)Contedo)Ingls:) Este!campo!deve!conter!todo!contedo!da!pgina,!incluindo!imagens.!

!

Neste)campo)pode:)

Adicionar)Imagens:)Para!adicionar!uma!imegem!clique!no!boto!c!!!!!.!!

!!Depois!no!Source!coloque!uploads/conteudos/!e!depois!o!nome!do!ficheiro!da!imagem!que!quer!colocar.!Por!exemplo:!uploads/conteudos/000001.jpg!.!!Se!quiser!pode!preencher!o!campo!Image!descriptoin!com!uma!descrio!da!imagem,!mas!no!!necessrio.!!!No!coloque!nada!nas!dimenses.!!Depois!carrege!no!boto!Ok.!!De!seguida!deve!alinhar!a!imagem!ou!!esquerda!ou!!direita!utilizando!os!botoes!de!alinhamento.!!

!

Negrito:)Para!por!texto!a!negrito,!primeiro!selecione!o!texto!que!deseja!mudar!para!negrito!e!depois!carregue!no!boto!!!!!!!!,!ou!ento!em!FormatW>Bold!ou!com!o!atalho!Ctrl!+!B.!

Itlico:)Para!por!texto!em!itlico,!primeiro!selecione!o!texto!que!deseja!mudar!para!itlico!e!depois!carregue!no!boto!!!!!!!!,!ou!ento!em!FormatW>Italic!ou!com!o!atalho!Ctrl!+!I.!

)


Sublinhado:)Para!sublinhar!texto,!primeiro!selecione!o!texto!que!deseja!sublinhar!e!depois!carregue!em!FormatW>Underline.!!

Ttulos:)Para!por!um!titulo!clique!em!FormatsW>Header!e!depois!selecione!o!tamanho!que!deseja!para!o!titulo.!!

!

Alinhar)o)texto:)Para!alinhar!texto!selecione!o!excerto!de!texto!que!deseja!alinhar,!e!depois!alinhe!utilizando!o!botes!demonstrados!em!baixo.!!

!

Listas:)Para!iniciar!uma!lista!deve!clicar!no!boto!!!!!!!!!!!!.!!

Hiperligao:)Para!criar!uma!hiperligao,!deve!primeiro!selecionar!a!palavra!ou!texto!que!quer!transformar!numa!hiperligao.!Depois!clique!no!boto!!!!!!!!!!!.!!

!!No!campo!onde!diz!Url!deve!por!o!link!de!destino!desta!hiperligao,!por!exemplo!www.google.com.!

)


Linha)horizontal:)Para!inserir!uma!linha!horizontal,!que!serve!como!separador,!primeiro!coloque!o!pontero!do!rato!onde!quer!inserir!esta!linha!e!depois!clique!em!insertW>!Horizontal!Line.!!

!!

Vdeos)do)YouTube:)Para!inserir!um!vdeo!do!YouTube,!primeiro!v!ao!vdeo!que!quer!inserir,!clique!em!Partilhar&depois!em&Incorporar,&selecione!o&tamanho&de&vdeo&853x480&e!copie!o!cdigo.!!

!Cdigo&

)


&No!editor!clique!em!InsertW>Insert!video.!!

!!Depois!clique!em!Embed.!!

!!

!!Cole!o!cdigo!que!copiou!do!YouTube.!No!fim!clique!em!Ok.!Depois!alinhe!o!vdeo!ao!centro.!

engineering project

Documents