Relatório de Estágio

RELATÓRIO DE ESTÁGIO
CULTUR’ARTE MAG
FILIPE ALEXANDRE CONDESSO
MONTEIRO FERREIRA
2012411
ESCOLA SUPERIOR DE
EDUCAÇÃO DE COIMBRA
L I C E N C I A T U R A E M
C O M U N I C A Ç Ã O E
DESIGN MULTIMÉDIA
ANO LECTIVO 2014/1015
ORIENTADORA DE ESTÁGIO: PROF.ª
DR.ª AMPARO CARVAS MONTEIRO
UNIDADE CURRICULAR:
P R O J E T O
COIMBRA, 2015

AGRADECIMENTOS
Na sequência dos três meses de estágio,
tenho que agradecer à minha orientadora da ESEC,
doutora Amparo Carvas, bem como ao orientadorexterno
Bruno Figueiredo, da Cultur’Arte, por toda
a paciência, dedicação e apoio que demonstrou
ao longo de todo este percurso.
Aos meus colegas de estágio, Eduardo
Faria, Márcio Lopes e Miguel Rosário, pelo
companheirismo e todos os momentos bem
passados, quer em período de trabalho, quer
nas horas vagas.
Agradeço ainda à Beatriz Teixeira, pelo
apoio e compreensão fora das horas de trabalho
quando os níveis de motivação e de stress não
eram os mais favoráveis, sem esquecer todos
os meus amigos, uns bem perto, outros nem
tanto, por continuarem sempre empenhados em
ajudarem-me a crescer e a acreditar em tudo o
que faço.
Por fim, mas não menos importante, da
forma mais sincera possível, a toda a minha
família, com destaque para a minha avó Manuela,
pelo apoio incondicional não só em termos
académicos mas em todos os aspectos da minha
vida.
Um enorme, gigante obrigado a todos os
que, de uma maneira ou outra, me ajudaram e
não desistiram de mim.
1

2

RESUMO
O presente relatório insere-se no
seguimento do estágio curricular no âmbito
da cadeira de Projecto da licenciatura de
Comunicação e Design Multimédia da Escola
Superior de Educação de Coimbra.
O estágio foi realizado na Cultur’Arte Mag,
tendo este iniciado a 3 de Fevereiro e terminado
no dia 3 de Maio. Durante estes três meses, foram
sendo desenvolvidos projectos em diversas áreas
abrangidas pela temática da nossa licenciatura,
tendo sido o desenvolvimento de páginas Web o
foco principal, foram também realizados alguns
trabalhos no campo da edição de vídeo e projetos
avulsos na área da fotografia e design gráfico.
Neste relatório pretende-se contextualizar
teoricamente, numa primeira fase, todas
as temáticas abrangidas pelos trabalhos
desenvolvidos ao longo do período de estágio,
bem como abordar e descrever todas as
metodologias, processos, obstáculos e soluções
utilizadas na sua conceção e os seus respetivos
resultados finais.
Palavras-chave:
Web – Vídeo – Edição – Cultura – Fotografia –
Wordpress – Premiere – Responsive – Design
3

ÍNDICE
1. Introdução
2. Estado de Arte
2.1. Web Development
2.1.1. A Internet
- Breve História da Internet
- World Wide Web
2.1.2. Linguagens Web
- HTML
- CSS
- JavaScipt
- PHP
2.1.3. WordPress
- O Que é um CMS?
- Principais Funcionalidades
2.1.4. Responsive Web Design
2. 2. Software Utilizado
2.2.1. Software de Desenvolvimento Web
2.2.2. Software de Edição de Vídeo
2.2.3. Software de Edição de Imagem e Design
3. Projetos Realizados
3. 1. Vídeolog de Estágio
3.2. Vídeo do Concerto dos Birds Are Indie
3.3. Banners Workshops
3.4 Cobertura Fotográfica Sequin e Jibóia
3.5 Website Cultur’Arte Mag
3.6 Website 7º Encontro CDM
4. Diagrama de Gantt
5. Conclusão
6. Bibliografia
7
8
9
9
9
10
11
11
12
12
14
14
14
15
16
17
17
18
18
19
20
22
24
26
28
38
44
45
46
4

ÍNDICE DE FIGURAS
Figura 1 - Computador NeXT do CERN, primeiro servidor Web
Figura 2 - Logo original da World Wide Web
Figura 3 - Exemplo de código HTML
Figura 4 - Logo HTML5
Figura 5 - Exemplo cómico de código JavaScript
Figura 6 - Exemplo de código PHP
Figura 7 - Logomarca do WordPress
Figura 8 - Exemplo Responsive Design
Figura 9 - Ícone Sublime Text
Figura 10 - Ícone WinSCP
Figura 11 - Ícone Premiere
Figura 12 - Ícone Photoshop
Figura 13 - Ícone Illustrator
Figura 14 - Frame 1 Videolog
Figura 15 - Frame 2 Videolog
Figura 16 - Frame 3 Videolog
Figura 17 - Frame 1 Concerto
Figura 18 - Frame 2 Concerto
Figura 19 - Frame 3 Concerto
Figura 20 - Imagem original do banner de Fotojornalismo
Figura 21 - Imagem original do banner de Comunicação em Redes Sociais
Figura 22 - Banner sem texto no site dos Workshops
Figura 23 - Versão sem texto do banner de Fotojornalismo
Figura 24 - Versão com texto do banner de Fotojornalismo
Figura 25 - Versão sem texto do banner de Comuncação em Redes Sociais
Figura 26 - Versão com texto do banner de Comunicação em Redes Sociais
Figura 27 - Fotografia 1 Concerto
Figura 28 - Fotografia 2 Concerto
Figura 29 - Fotografia 3 Concerto
Figura 30 - Aspecto original da Homepage do tema
Figura 31 - Menu de navegação original
Figura 32 - Menu de navegação actual
Figura 33 - Painel inicial do BackOffice
Figura 34 - Homepage actual
Figura 35 - Página da categoria Notícias
10
11
11
12
13
14
15
17
17
17
18
18
18
20
21
21
22
23
23
24
24
25
25
25
25
25
26
27
27
29
29
29
29
30
30
5

ÍNDICE DE FIGURAS
Figura 36 - Aspecto original da página de categoria
Figura 37 - Primeiro tipo de miniatura
Figura 38 - Segundo tipo e miniatura
Figura 39 - Miniatura de Destaque
Figura 40 - Miniatura Criativos
Figura 41 - Interface de criação de uma nova publicação
Figura 42 - Página de visualização de um post de Criativos
Figura 43 - Funcionalidades de partilha e comentários
Figura 44 - Página de visualização de um post da categoria Notícias
Figura 45 - Página original de visualização de uma publicação
Figura 46 - Responsividade Homepage
Figura 47 - Responsividade post Notícias
FIgura 48 - Responsividade post Criativos
Figura 49 - 1ª Secção Homepage
Figura 50 - 2ª Secção Sobre
Figura 51 - 3ª Secção Agenda
Figura 52 - 4ª Secção Oradores
Figura 53 - 5ª Secção Stream
Figura 54 - 6ª Secção Apoios
Figura 55 - 7ª Secção Contactos
Figura 56 - Cartaz 7º Encontro CDM
Figura 57 - Diagrama de Gantt
31
32
32
32
33
33
34
34
35
35
36
36
37
38
39
39
40
40
41
41
42
44
6

1. INTRODUÇÃO
Crescer entre computadores, consolas
e videojogos numa era em que a tecnologia,
e por sua a vez a Internet, evolui a um ritmo
vertiginoso e se torna cada vez mais vulgar e
acessível, aliado ao facto de ser uma pessoa
muito racional e lógica, fomentou um gosto
muito especial pelo digital. O gosto pelo
cinema, animação e videojogos estimularamme
a imaginação e levaram-me a pensar que um
dia também poderia ser eu a ter conhecimento
e estar munido de competências específicas
para, igualmente, poder vir a realizá-los.
Estes e inúmeros outros fatores, contribuíram
para que em dado momento tivesse realizado
a minha candidatura à licenciatura de
Comunicação e Design Multimédia, em
busca desse conhecimento e obtenção de
competências para pôr em prática ambições
a nível profissional e criativo. Ao longo do
percurso académico fui ganhando algumas
bases e experiência em muitas áreas do saber,
tanto através das aulas como através da
realização de projetos pessoais.
O curso deu-me também a oportunidade
de conviver e trabalhar com várias pessoas que
partilham dos mesmos interesses e ambições
e, com isto, surge o conhecimento de várias
iniciativas e projetos, sendo que um dos que tive
mais contacto foi a Cultur’Arte Mag. Uma revista
online de âmbito cultural e artístico, com a qual
me identifiquei com a ideologia e o método
de trabalho, onde colaboradores voluntários
das mais diversas áreas da Comunicação e do
Design trabalham em conjunto de maneira a
produzir peças de conteúdo rico e informativo,
de baixo financiamento mas com qualidade e
rigor.
A criação de conteúdo multimédia
informativo e a necessidade que existia de criar
um novo website para a Cultur’Arte aliciaramme
a juntar-me ao projeto, visando ganhar mais
experiência nas áreas da programação Web e
da edição de vídeo. Finalmente, no âmbito da
cadeira de Projecto, surgiu uma proposta de
estágio interessante e ambiciosa por parte da
Cultur’Arte, à qual, o momento oportuno e a
vontade de me juntar ao projeto, me levaram
a aceitar.
Durante o estágio desenvolvi
maioritariamente trabalhos nas áreas de
programação Web e edição de vídeo, tendo
ainda realizado outros projetos avulsos na
área da fotografia e do Design Gráfico. Fiquei
responsável pela construção de uma nova página
Web para a Cultur’Arte, baseada em WordPress,
editei o primeiro VLOG de estágio, uma peça
informal com algumas imagens capturadas em
momentos mais casuais no nosso escritório, e
editei também uma peça do género MAG, que
consiste num resumo videográfico informativo
sobre um determinado evento, do concerto da
banda “Birds are Indie”, no Teatro Loucomotiva.
Na vertente da fotografia, fiz a cobertura dos
concertos de “Sequin” e “Jibóia” no Salão Brazil,
enquanto na área do Design Gráfico, elaborei uns
banners ilustrativos para a página promocional
aos workshops que se planeavam realizar mais
tarde.
O relatório está dividido em duas
secções principais. Na primeira o Estado de
Arte, visa contextualizar e abordar todo o
conceito teórico e temáticas necessárias para
a execução dos trabalhos realizados na área
do Web Development, de maneira a facilitar
a compreensão do percurso dos mesmos. Na
segunda secção do relatório, segue-se um
resumo de todo o processo de cada trabalho,
passando pelos objetivos, desenvolvimento e
resultados finais de cada um.
7

ESTADO
DE
ARTE
ESTADO
DE
ARTE

2.1 WEB DEVELOPMENT
2.1.1 A INTERNET
A Internet é um sistema global de redes de
computadores interligadas entre si que permitem
a interação entre utilizadores em todo o mundo.
Oferece uma vaga gama de diferentes recursos,
como o acesso à World Wide Web, a vasta rede que
aloja as páginas Web que visualizamos normalmente
nos nossos browsers, transferência de dados entre
computadores, sistemas de correio eletrónico, compras
online, transmissão de conteúdos multimédia, jogos
multijogador online e até videochamadas. A evolução
deste meio potenciou também uma panóplia de
novos meios de comunicação, quer através de
redes sociais, fóruns de discussão ou serviços de
mensagens instantâneas.
A Internet revolucionou o mundo, a indústria
informática, das telecomunicações, da música e da
indústria editorial como nenhuma outra invenção
jamais o fez. A sua grande eclosão em meados dos
anos 90 graças à introdução de conteúdo multimédia
(deixando para trás os terminais complexos de
texto monocromático, reservado para utilizadores
avançados) e a uma simplificação radical da procura
de informações através da introdução da World Wide
Web (WWW). Pela primeira vez, as pesquisas de um
conteúdo tornaram-se independentes da localização
geográfica do mesmo, e o esforço do utilizador para
encontrar determinada informação é idêntica tanto
se esta se encontrar na sua cidade, como se residir
num servidor no outro lado do globo.
Podemos afirmar que a Internet é a vitória
dos sistemas abertos; pela primeira vez, sistemas
informáticos podem comunicar entre si através de
protocolos comuns. (Veà, 2013).
Esta massificação da utilização da Internet fez
com que todos os meios de comunicação tradicionais
se fossem adaptando e reformulando a este novo
meio, por exemplo: jornais e revistas produzem
conteúdo também, ou exclusivo, para a Web ou,
inclusive, convertem-se totalmente ao meio digital,
como é o caso, entre outros, da Cultur’Arte Mag.
BREVE HISTÓRIA DA INTERNET
Durante a Guerra Fria, na década de 60,
as bases militares americanas necessitavam de
uma forma descentralizada de poderem partilhar
informações entre si, para, numa eventualidade de
serem atacadas cadas pela União Soviética, as tropas
russas não conseguirem aceder nem destruir essas
mesmas informações. Com isto, surgiu a primeira maneira
de troca de pacotes, denominação da unidade
de transferência de informação, e a primeira rede
de interligação de computadores, denominada inicialmente
de ARPANET, criada pela ARPA, Advanced
Research Projects Agency. Eram os primórdios da
Internet.
Mais tarde, o governo americano a permitiu
aos investigadores das suas diversas universidades,
a possibilidade de pesquisa e desenvolvimento de
projetos na área da defesa, que pudessem integrar
na ARPANET. Assim, a rede começou a ficar sobrecarregada
com o crescente número de acessos e
inserção das universidades e teve que ser dividida
em dois grupos: a MILNET, reservada para fins militares
e a ARPANET destinada a investigação e fins
não militares. (Sandroni, 2015)
Esta divisão fez com que existisse maior liberdade
no desenvolvimento da rede e da tecnologia
e o seu rápido crescimento e afluência levaram à
necessidade de criação de um protocolo padrão de
comunicação dentro destas redes, denominado TCP/
IP, para facilitar todo o acesso e troca de informações.
(Internet Society, 2003)
Posto isto, surge o conceito de uma rede
mundial de redes, totalmente ligadas entre si, o
princípio da Internet como a conhecemos hoje.
Em 1990, a ARPANET foi desmantelada e a
Internet comercializou-se em 1995.
9

WORLD WIDE WEB
A World Wide Web, WWW, W3 ou apenas Web,
surgiu do rápido crescimento da Internet. Começou
como uma ideia de um engenheiro de software
britânico, funcionário do CERN, Tim Berners-Lee, que,
na década de 80, propôs um projeto de hipertexto
que permitia às pessoas trabalhar em conjunto,
combinando o seu conhecimento numa rede de
documentos. (World Wide Web Consortium, 2000)
A princípio, ninguém deu grande importância
ao trabalho de Tim Berners Lee, que se viu apoiado
apenas pelo seu chefe, contudo, este acreditou no
trabalho de Lee e encorajou-o a implementar o
sistema no “NeXT”, um computador da época, e
criar o primeiro servidor web. Hiperligações foram
colocadas por Berners Lee em cada página da base
de dados que, ao serem acedidos, redirecionavam
para outros documentos importantes no sistema.
Apesar do fraco apoio inicial, Lee, juntamente
com um colega entusiasta, Robert Cailliau,
continuaram a trabalhar independentemente no
projeto e, no final de 1990, já tinham criado as
ferramentas necessárias para o funcionamento da
Web:
• HTML (Hypertext Markup Language):
A linguagem de programação utilizada para a
construção de páginas web (posteriormente melhor
explorada no relatório);
• HTTP (Hypertext Transfer Protocol): O
protocolo mais comum, desenvolvido especificamente
para a Web, que prevaleceu pela sua simplicidade e
desempenho. Este protocolo pede o ficheiro HTML
ao servidor e quando o recebe, passa-o ao browser
para ser interpretado;
• URL (Uniform Resource Locator): É o
endereço que indica onde se encontra o documento
na Web.
Juntamente com isto, desenvolveram ainda:
um navegador de páginas web, ou browser, de nome
“WorldWideWeb”, um software necessário para a
interpretação das linguagens e protocolos da Web.
Criaram também o primeiro servidor HTTP, conhecido
como CERN httpd, o primeiro servidor web, em
http://info.cern.ch, e as primeiras páginas web que
descreviam todo o projeto.
Finalmente, em 1991, Tim Berners Lee
publicou na Web um resumo e alguma documentação
sobre a mesma, o que marcou o nascimento da Web
como um serviço público da Internet e, em 1994,
fundou o World Wide Web Consertium, ou W3C,
organização para normalização dos standards da
Web e exploração do seu máximo potencial de
forma responsável, onde ainda mantém funções
como director. (World Wide Web Foundation, n.d)
A definição de standards e linhas de
orientação unânimes permitiram à Web evoluir
para o que viria a ser apelidada, e ainda hoje em
vigor, de Web 2.0. Passou-se assim de uma Web
estática, onde o utilizador apenas poderia visualizar
o conteúdo da mesma, não existindo qualquer
interatividade com a página, para uma Web mais
pessoal e dinâmica que possibilita uma vasta
panóplia de interações ao utilizador. Criar uma conta
própria de utilizador, possibilidade de ligação entre
utilizadores, publicar conteúdo próprio como vídeos,
fotografias, comentários, interação com aplicações
ou visualização de conteúdo em dispositivos móveis,
foram algumas das atividades que a evolução da Web
2.0 foram permitindo. (Cormode, G. & Krishnamurthy,
B. , 2008)
Plataformas de colaboração entre utilizadores
como a Wikipedia, motores de pesquisa como o
Google, o YouTube e as redes sociais como o
Facebook ou Twiiter, foram marcos essenciais para
o desenvolvimento da Web como a conhecemos
hoje e para a tornar no meio de comunicação mais
poderoso de todos.
Figura 1 - Computador NeXT do CERN, primeiro
servidor Web
10

No exemplo dado anteriormente, foi
utilizada a tag <a> que cria uma hiperligação, onde
através do atributo “href” se define o destino da
mesma, que, neste caso, tem como valor/destino a
página do Google. É possível a utilização de mais
do que um atributo na mesma tag:
<img id=”Google” href=”www.google.
pt/imagemgato.jpg” width=”800”
height=“600”/>
<p class=”paragrafo”
style=”color:blue;”>Azul</p>
Figura 2 - Logo original da World Wide Web
2.1.2 LINGUAGENS WEB
HTML
HTML, sigla para Hypertext Markup Language,
é uma linguagem de marcação utilizada
para a produção de páginas Web. É escrita na forma
de elementos HTML baseada em etiquetas,
ou tags, fechadas dentro de parêntesis angulares,
como por exemplo <h1>. (World Wide Web Consortium,
2014)
A maior parte das tags surgem aos pares:
a tag de abertura <h1>, que indica onde começa o
elemento, e a tag de fecho </h1>, que representa o
fim desse mesmo elemento. O conteúdo pretendido
é escrito entre as duas tags do mesmo elemento.
Contudo, existem tags que não necessitam de
uma tag de encerramento, seja por não permitirem
conteúdo embutido no elemento que representam
ou por apenas representarem um elemento que
depende apenas dos seus atributos, como é o exemplo
da tag <br> ou <br/> que faz uma quebra
de linha no documento, ou a tag <img> que depende
apenas do seu atributo href, que indica o
diretório da imagem que se pretende mostrar (ex.:
<img href=”www.google.pt/imagemgato.png” />).
(World Wide Web Consortium, s.d.)
Na prática, funciona da seguinte maneira:
<tag atributo=”valor”>conteúdo a
ser formatado pela tag</tag>
<a href=”www.google.pt”>Link para o
Google</a>
Neste caso, foram utilizados diversos
atributos para o mesmo elemento. No primeiro
exemplo, o “id” cria um identificador único em
todo o documento para aquele elemento, que
consequentemente poderá ser utilizado como um
selecionador de CSS para posterior estilização
(explorado mais à frente no relatório), enquanto
o “href” indica onde se encontra a imagem e os
atributos “width” e height” definem a largura e
altura, respetivamente, da imagem. No segundo,
o atributo “class” providencia uma maneira de
classificar elementos semelhantes e pode também,
entre outras funções, à semelhança do “id”, ser
utilizado juntamente com CSS para formatar todos
os elementos com aquela “class” atribuída. O “style”
serve para atribuir uma estilização ao elemento
em que está inserido, no entanto, considera-se isto
uma má prática pois toda a estilização deverá ser
feita através de CSS.
Figura 3 - Exemplo de código HTML
11

Aliado à expansão da Internet e da World Wide
Web, o HTML foi evoluindo para acompanhar as
necessidades. A primeira versão do HTML, HTML
1.0, diferia muito da meta actual, em termos de
capacidade, sendo muito mais limitada. Mais
funcionalidades foram sendo adicionadas nas
versões seguintes mas foi com a revisão 3.2 que se
abandonaram muitas tags própria se únicas de cada
browser e a linguagem se afirmou como standard
oficial da W3C, em Janeiro de 1997. Mais tarde, no
final de ’97, a versão 4.0 introduziu várias novas
tags para estilos, scripts, incorporação de objetos e
até tabelas mais eficientes. A utilização da tag para
estilização caiu em desuso com a introdução das
folhas de estilo, com recurso a CSS.
Atualmente, a mais recente versão oficial
e recomendada de HTML é a 5.0, que traz consigo
mudanças importantes, tendo em conta que visa
um funcionamento mais leve de maneira a ser
corretamente processado também em telemóveis
e tablets. Isto acontece através de uma semântica
melhorada e introdução de tags como as de <vídeo> e
<audio> que anteriormente teriam que ser utilizadas
com recurso a plugins externos. O elemento <canvas>
permite a produção de animações interativas, ou
não, com recurso a JavaScript, que substitui outras
ferramentas mais pesadas e menos funcionais
como é o caso das animações Flash. Permite ainda
a utilização de API’s, Application Programming
Interface, para desenvolvimento de aplicações
Web de maior complexidade. (World Wide Web
Consortium,s.d.)
Figura 4 - Logo HTML5
12
CSS
Cascading Style Sheets, ou somente CSS, é
uma linguagem auxiliar, desenvolvida pela W3C em
1996, que confere a formatação de conteúdo HTML.
As “folhas de estilo”, style sheets em português,
permitem variadíssimas opções de formatação,
tornando os documentos Web mais apelativos e
personalizados, dando origem ao Web Design. (World
Wide Web Consortium, 2011)
A formatação de todas as páginas é possível
de fazer através de um único ficheiro CSS, ao contrário
do HTML, em que é necessário uma configuração
individual para cada página, sendo apenas necessário
um link com referência ao ficheiro CSS respetivo de
cada documento Web. A linguagem tem uma sintaxe
simples, utilizando inúmeras palavras em inglês para
definir os estilos de uma propriedade da página.
Consiste numa lista de regras associadas a um ou
mais selecionadores, em que estes servem para
identificar o elemento a estilizar. Estes selecionadores
podem ser classes ou ID’s, previamente determinados
no documento HTML, ou simplesmente elementos
nativos, como a tag de um parágrafo “<p>”. (World
Wide Web Consortium, s.d.)
Por exemplo:
.class, #id , tag {
propriedade: valor;
}
.formulario, #nome , p {
font: Helvetica, Arial, sans-serif;
color: blue;
Como exemplificado, a class é representado
por um ponto “.” seguido do nome atribuído à mesma,
à semelhança do ID que em vez do ponto se utiliza
um cardinal ou hashtag “#”, enquanto as tags são
representativas de si mesmas. A área da “regra” é
limitada à abertura e fecho das chavetas, onde são
especificadas as propriedades a alterar e os respetivos
valores. Neste caso, todos os elementos com a class
“formulário”, o ID “nome” e todos os parágrafos,
representados pela tag <p>, terão o seu tipo de letra -
a sua “font” - alterada primariamente para “Helvetica”
e a sua “color” para azul. Adicionalmente, se a font
“Helvetica” não estiver disponível, será substituída
para “Arial” e, se o mesmo acontecer com esta, será,
ultimamente, alterada para qualquer tipo de letra
“sans-serif”, não serifado, que esteja disponível.
É também possível a utilização de umas chamadas
“pseudo-classes”, que permitem a atribuição de

uma condição adicional ao selecionador, como
mostra o seguinte exemplo:
a:hover {
color: red;
}
Uma das pseudo-classes existestes, neste
caso a “hover”, atribuída a uma tag “a” representativa
de uma hiperligação, indica que, apenas quando o
rato passa por cima desse link, ou seja, faz “hover”,
a cor do texto do mesmo muda para vermelho.
(World Wide Web Consortium, s.d.)
Hoje em dia são muito utilizadas as
chamadas “media queries” que utilizam a regra “@
media” para definir diferentes estilizações para
diferentes tipos de media e dispositivos. É utilizada
para alcançar um “Responsive Web Design”.
@media screen and (max-width:
300px) {
body {
background-color:
lightblue;
}
}
Este exemplo define que a cor do fundo muda
para azul claro se o documento tiver menos de 300
pixeis de largura. (World Wide Web Consortium, s.d.)
A imensa utilidade das folhas de estilo,
aliada à falta de suporte inicial dos browsers a
esta linguagem, fizeram com que sofressem várias
revisões ao longo dos anos. Logo em 1998 sai o CSS2,
seguido do CSS2.1 em 1999, que foram trazendo cada
vez mais funcionalidades e mais complexas e maior
compatibilidade e estabilidade para os browsers.
Ainda assim, atualmente, apesar da maioria dos
navegadores suportarem o uso das folhas de estilo,
é necessário a utilização de códigos referentes a
cada browser para uma boa compatibilidade entre
os mesmos. Atualmente, uma grande revisão foi feita
entre 2010 e 2011 e já está o CSS3 em vigor Esta
nova revisão introduz a possibilidade de construção
de animações complexas, tanto em duas como em
três dimensões. (World Wide Web Consortium, s.d.)
JAVASCRIPT
O JavaScript é uma linguagem orientada a
objetos que permite a realização de cálculos e a
manipulação de objetos.
Desenvolvida originalmente para ser usada
como linguagem de script da Web, tem vindo a
assumir cada vez mais predominância e tem ganho
muitos admiradores nestes últimos anos.
Segundo Abreu (2010), apesar de ser usada
maioritariamente em aplicações Web, onde já
desempenhou um papel importante no lado servidor
e onde continua a ser indispensável no lado cliente,
a verdade é que a flexibilidade da linguagem fez com
que também fosse usada para, por exemplo, escrever
scripts que otimizam as tarefas administrativas de
um sistema operativo. Apesar de ser uma linguagem
orientada e baseada em objetos, a verdade é que o
JavaScript não suporta o conceito de classe existente
em muitas
linguagens orientadas a objetos tradicionais. Em
vez disso, a linguagem suporta sim o conceito de
função construtora.
Em JavaScript, um objeto não é mais do
que um conjunto de propriedades que podem ser
anotadas com um ou mais atributos de metadata.
Estes atributos influenciam a forma como cada
uma dessas propriedades podem ser usadas por
outro código que consome esse objeto. Por exemplo,
podemos recorrer a um atributo de metadata para
fazer com que uma propriedade de um objeto seja
apenas de leitura.
Figura 5 - Exemplo cómico de código JavaScript
Outra das principais características da
linguagem reside no facto desta não ser fortemente
tipificada. Devido a isso, a definição de variáveis e
de propriedades é feita sem qualquer indicação
quanto ao tipo de valor que lá será guardado. Esta
flexibilidade é vista por alguns como um problema,
mas, com alguma prática e disciplina, acaba por
revelar-se uma vantagem importante. Finalmente,
refira-se ainda que esta linguagem pertence à família
das linguagens C, apresentando por isso uma sintaxe
muito próxima à existente em Java ou C#, onde, por
exemplo, a capitulação é um aspeto a ter em conta
– “teste” é diferente de “TESTE”.
13

Os scripts podem ser integrados no documento
HTML através da tag <script> ou escritos num
ficheiro próprio à parte, tendo este que ser referenciado
no HTML, à semelhança do que acontece
com o CSS.
Por tudo isto, como salienta Abreu (2011),
a compreensão desta linguagem é imperativa e
cada vez mais necessária nos tempos que correm.
PHP
O PHP, acrónimo recursivo de PHP: Hypertext
Preprocessor), é uma linguagem de script criada por
Rasmus Lerdorf em 1995. Teve início na necessidade
de Lerdorf ter um contador de visitas na sua página
e, atualmente, encontra-se na sua quinta versão.
Esta linguagem é responsável pela capacidade de
uma página gerar conteúdo dinâmico e é bastante
utilizada no desenvolvimento de aplicações que
atuam do lado do servidor devido à possibilidade
de comunicação com bases de dados. (PHP
Documentation Group, 2015)
Pode ser inserido diretamente no documento
HTML ou referenciado num ficheiro próprio à
parte, mais tradicionalmente. No entanto, com
a exigência e complexidade das páginas Web, a
utilização de plataformas e frameworks é comum,
o que pode acelerar o ritmo de trabalho e melhorar
a sua qualidade. O código PHP é interpretado no
servidor por um interpretador geralmente instalado
nativamente no servidor e é, por fim, enviado para o
utilizador, ao contrário do que acontece com código
HTML ou JavaScript que são interpretados no próprio
browser.
Hoje em dia, a maioria dos grandes sites com
conteúdo dinâmico utilizam PHP, como é o caso do
Facebook, e plataformas como o WordPress tiram
proveito das capacidades da linguagem para facilitar
a criação de páginas de conteúdo dinâmico.
2.1.3 WORDPRESS
WordPress é uma ferramenta e serviço de
gestão de conteúdos, Content Management Service
ou apenas CMS, baseado em PHP e MySQL. É a
plataforma de criação de blogs mais popular da Web
por ser a que permite um blog mais profissional e
personalizado.
O seu rápido crescimento deveu-se ao facto
de ter uma licença de código aberta, ou open source,
o que permite que qualquer pessoa possa ter acesso
ao mesmo e colaborar no seu desenvolvimento.
Adicionalmente, a sua facilidade de uso, a utilização
de temas pré-feitos ou de plugins e as suas
características como gestor de conteúdos também
contribuíram para esse fator.
Foi criado por Matt Mullenweg e Mike Little
e lançado em 2003. Actualmente já se encontra na
versão 4.2.2. (WordPress.org, 2015)
O QUE É UM CMS?
Segundo Boiko (2005), um CMS, Content
Management Service, é um serviço de gestão de
conteúdos e passa por um conjunto de processos
e tecnologias que suportam a coleção, a gestão e
a publicação de informação de qualquer forma ou
tipo.
• Coleção: cria-se ou adquire-se informação
de uma fonte existente. Dependendo da fonte,
poderá ser necessário a conversão da informação
para um formato mestre, dependendo do tipo de
publicação pretendida. Finalmente, agrega-se a informação
no sistema, editando-a e dividindo-a em
segmentos, para posterior organização categórica.
Figura 6 - Exemplo de código PHP
14

PRINCIPAIS
FUNCIONALIDADES
Figura 7 - Logomarca do WordPress
• Gestão: é criado um repositório que
consiste numa base de dados e/ou ficheiros que
contenham componentes do conteúdo e informação
administrativa (ex.: informação sobre os utilizadores
do sistema).
• Publicação: o conteúdo é disponibilizado,
extraindo componentes do repositório e
construindo publicações específicas como páginas
Web ou newsletters. As publicações consistem
em componentes de informação devidamente
organizados, funcionais e acessíveis.
A gestão de conteúdos é colaborativa e,
geralmente, consiste nas seguintes funções básicas
e responsabilidades:
• Criador – responsável por criar e editar o
conteúdo.
• Editor – responsável por aprimorar a
mensagem e apresentação do conteúdo, incluindo
tradução e localização.
• “Publisher” – disponibiliza/publica o
conteúdo para utilização/visualização.
• Administrador – faz a gestão das
permissões de acesso à informação, normalmente
também responsável por garantir permissões aos
diferentes grupos de utilizadores e funções. É o
indivíduo, ou são os indivíduos, com o poder e
permissões máximas dentro de um sistema.
• Consumidor, utilizador ou visitante – o
público-alvo, o consumidor final que lê e acede
ao conteúdo que foi publicado. Não tem quaisquer
permissões dentro da gestão do conteúdo.
Em síntese, como Boiko (2005) refere:
“A gestão de conteúdos é sobre ganhar
controlo sobre a criação e distribuição de informação
e funcionalidade. É saber que valor tens para oferecer,
quem quer fazer parte desse valor, e como eles querem
que o disponibilizes.”
O grande crescimento da plataforma do WordPress e
a sua vasta utilização deve-se às suas características
e usabilidade. Ao permitir aos utilizadores a criação
de uma página de conteúdo dinâmico, pessoal ou
profissional, de maneira acessível e personalizada.
numa era de uma crescente relevância de uma
presença na Web, abriu caminho ao seu próprio
sucesso.
São descritas, de seguida, algumas das
funcionalidades mais relevantes (WordPress,2015):
Simplicidade
A simplicidade da utilização do Wordpress
torna possível criar uma página e começar a publicar
conteúdo em poucos minutos.
“WordPress is built to make it happen.”
(WordPress.org, 2015)
Flexibilidade
O WordPress permite criar uma páginas dos
mais diversos tipos e com diferentes objectivos, quer
seja uma página pessoal, ou profissional, um blog, um
portfólio online, uma revista ou página de notícias
ou até uma rede de páginas Web. A utilização de
temas, plugins e vastas opções de personalização,
fazem da plataforma a mais flexível ferramenta na
criação de páginas de conteúdo dinâmico.
Temas
Uma dos pontos fortes da criação de uma
página em WordPress é a possibilidade de instalar e
trocar de temas/templates consoante a vontade do
utilizador. Os temas são personalizações previamente
elaboradas da aparência da página, com, em alguns
casos, algumas diferenças mínimas na sua estrutura,
que podem ser instalados a qualquer altura sem
alterar o conteúdo da página. Cada site tem de ter
um tema associado, existindo milhares de temas
disponíveis, sendo a maioria grátis, que podem ser
instalados quer através da aba “Aparência” na zona
de administração da página, denominada BackOffice,
quer através do upload direto para uma pasta
específica no servidor.
Para os utilizadores mais experientes, com
15

conhecimentos de PHP, HTML e CSS, é possível alterar
o código destes temas para uma personalização
mais detalhada e avançada, assim como é possível a
criação de temas próprios. Este aspeto é importante
frisar visto que a escolha e edição de um tema
de WordPress foi a base do meu trabalho no
desenvolvimento da página da Cultur’Arte.
Plugins
O WordPress tem uma arquitetura que
integra a utilização de plugins, permitindo aos
utilizadores expandir as suas funcionalidades
originais. Os plugins são pequenas extensões que,
quando instaladas na página através da plataforma,
acrescentam das mais diversas funcionalidades e
opções aos utilizadores com o intuito de preencher
as suas necessidades. Desde acrescentar uma agenda
personalizável, disponibilizar um “slider” de imagens,
um reforço de segurança ou até pacotes com diversas
funcionalidades adicionais, as hipóteses são vastas
no meio de cerca de 39 mil plugins existentes.
Um dos principais problemas que os plugins
podem trazer é a sua utilização em excesso, o que
faz com que a página fique demasiado pesada, mais
lenta, e, em algumas situações, complicações entre
plugins poderão tornar o site inacessível de todo.
Normalização
Todo o código gerado pelo WordPress está em
concordância total com os standards definidos pela
W3C, garantindo que a página criada irá funcionar
corretamente nos browsers atuais assim como
manterá compatibilidade com futuras versões dos
mesmos.
Otimização para Motores de Pesquisa
Para ajudar a ganhar a visibilidade pretendida
para a nossa página, o WordPress está otimizado para
facilitar a descoberta da mesma através dos motores
de pesquisa como o Google. Estas funcionalidades
podem ser aumentadas e melhoradas através da
instalação de plugins com esse fim.
Taxonomias
As taxonomias são identificadores de conteúdo
que permitem catalogar e agrupar conteúdo com
os mesmo identificadores associados. O WordPress
permite-nos, à partida, a criação de categorias e a
atribuição de tags às publicações, o que faz com
que seja possível catalogá-las dentro da categoria
de desporto, por exemplo, ou com todos os posts
com a tag “insólito”.
Taxonomias
As taxonomias são identificadores de conteúdo
que permitem catalogar e agrupar conteúdo com
os mesmo identificadores associados. O WordPress
permite-nos, à partida, a criação de categorias e a
atribuição de tags às publicações, o que faz com
que seja possível catalogá-las dentro da categoria
de desporto, por exemplo, ou com todos os posts
com a tag “insólito”.
Tipos de Conteúdo Personalizáveis
Para os mais conhecedores do funcionamento
da plataforma, ou através da utilização de plugins,
é possível a criação de taxonomias personalizadas
pelo utilizador, para além das duas originais, tal
como novos tipos de publicação. Isto poderá ser útil
tanto numa questão de organização de conteúdo
como na personalização da aparência e disposição
das páginas. Por exemplo, é possível a diferenciação
no design da página da categoria de desporto do
design da página da categoria de tecnologia, ou a
criação de um layout específico para as publicações
de texto e outro para as publicações de fotos.
2.1.4 RESPONSIVE WEB DESIGN
Na área do Web design e development,
está perto o ponto em que deixará de ser possível
acompanhar com a infinidade de novas resoluções
e dispositivos. É pouco prático fazer uma versão
de um website para cada resolução, por isso surge
a necessidade de uma opção mais viável.
O “Responsive Design”, ou “Design Responsivo”,
é o conceito que sugere uma página deve responder
ao comportamento do utilizador baseado no
tamanho de ecrã, plataforma e orientação. A prática
consiste numa mistura de grelhas e layouts flexiveis,
imagens e um uso inteligente de media queries de
CSS. À medida que o utilizador troca o seu portátil
por um tablet, por exemplo, o site deve mudar
automaticamente, adaptando a resolução, tamanhos
de imagens e funcionalidades. Resumidamente, a
página deve conter a tecnologia para responder
automaticamente às preferências do utilizado. Isto
elimina a necessidade de uma programação e design
diferentes para cada novo dispositivo. (Knight, K.,
2011)
16

O conceito surge de uma noção emergente
de design arquitetónico responsivo como refere
Marcotte (2011):
“Recentemente, uma disciplina emergente
denominada “arquitetura responsiva” começou a
questionar como espaços físicos podem reponder a
presença de pessoas a passar por eles. Através de uma
combinação de robótica embutida e materias tênseis,
arquitetos estão a experimentar em instalações de
arte com estruturas nas paredes que dobram e se
expandem à medida que uma multidão se apróxima.
Sensores de movimento podem ser emparelhados com
sistemas de climatização para ajustar a temperatura
e a luminosidade de uma divisão à medida que esta
vai se preenchendo com gente. Algumas empresas já
produziram uma tecnologia de “vidro inteligente” que
é capaz de se tornar automaticamente opaco quando
os ocupantes de uma sala chegam a um certo limite
de densidade, propocionando-lhes uma camada
adicional de privacidde.”
Transpondo esta disciplina para o
Web design, surge uma ideia semelhante mas
totalmente nova. Não devemos ter que criar um
novo design para cada grupo de utilizadores,
assim como os arquitetos não desenham um
edifício para cada tipo e tamanho de grupo que
lá passa. Tal como a “arquitetura responsiva”, que
refere Marcotte (2011), o Web Design deve ajustarse
automaticamente e não precisar de ínumeras
soluções personalizadas e individuais para cada
categoria de utilizadores.
Finalmente, o responsive Web design não
é só sobre resoluções de ecrã ajustáveis nem
imagens que se escalam automaticamente, mas
sim uma nova maneira de pensar sobre design.
(Knight, K., 2011)
2.2 SOFTWARE UTILIZADO
2.2.1 SOFTWARE DE
DESENVOLVIMENTO WEB
SUBLIME TEXT
Figura 9 - Ícone Sublime Text
O Sublime Text é um editor de texto e códigofonte,
multiplataforma, que suporta um grande
número de linguagens de programação. Algumas
das suas funcionalidades são a complementação
de código automaticamente, a possibilidade de
utilização de temas diferentes, cores diferentes para
cada elemento das diferentes linguagens, capacidade
de gravação de código usado frequentemente e a
adição de funcionalidades adicionais através da
instalação de plugins gratuitos. Estas razões fazem
do Sublime um dos editores mais utilizados.
WINSCP
Figura 10 - Ícone WinSCP
Um programa, open source, que permite a
transferência de ficheiros entre dois computadores
ou entre computador e um servidor. A sua interface
gráfica simples e acessível, aliada à estabilidade
do programa, fazem do mesmo uma boa opção.
Figura 8 - Exemplo Responsive Design
17

2.2.2 SOFTWARE DE
EDIÇÃO DE VÍDEO
2.2.3 SOFTWARE DE EDIÇÃO
DE IMAGEM E DESIGN
ADOBE PREMIERE
ADOBE ILLUSTRATOR
Figura 11- Ícone Premiere
Figura 13 - Ícone Illustrator
O Adobe Premiere é a ferramenta mais
simples e uma das mais essenciais na edição de
vídeo. É usada para seleção e organização de
excertos de vídeos, correção de cor e conjugação
dos mesmos com áudio. Tem uma interface simples
e uma série de características que maximizam
a eficiência de trabalho e faz com que seja dos
softwares de edição primária mais utilizados.
Seguem-se algumas das suas características
(Adobe, 2015):
• Painel de Ferramentas - Composto por
um variado leque de ferramentas que fazem
grande parte do trabalho como selecionar, cortar
e ajustar os excertos de vídeo a serem usados.
• Linha de Tempo - É a área de organização
e edição do vídeo e áudio escolhido. É o meio
principal de edição.
• Navegador do Projeto – Uma janela
que permite a navegação e organização entre os
ficheiros que fazem parte do projeto. É possível
a importação de mais ficheiros, organiza-los por
pastas ou mudar-lhes o nome.
• Janelas de Pré-Visualização – Janela
que reproduz o conteúdo selecionado, quer sejam
excertos soltos ou o resultado da edição.
Figura 12 - Ícone Photoshop
É o software de desenho vetorial da família
da Adobe, e é o preferido de muitos designers
e artistas e é usado tanto para impressão como
para a Web. Capaz de criar composições gráficas
vetoriais que podem ser escaladas indefinidamente
sem perder qualidade. É utilizado para criar logos,
ícones e outras formas mais complexas, assim
como protótipos de baixa fidelidade para a Web,
entre outros usos.
Tal como a maioria do software da Adobe, é
possível exportar desenhos vectorias para outros
programas como o InDesign, para uso em design
editorial, ou com o Photoshop para uma edição de
imagem mais aprofundada.
ADOBE PHOTOSHOP
O Photoshop é um editor de imagens
desenvolvido pela Adobe. É considerado o líder no
mercado dos editores de imagem profissionais. É
muito popular entre fotógrafos para edição de fotos
e designers e artistas para composição de imagens
digitais. Permite aos utilizadores manipular, cortar,
e alterar o tamanho de imagens, para além da
panóplia de efeitos que contém. É uma ferramenta
muito poderosa, mas difícil de masterizar, o que
pode afugentar alguns utilizadores iniciantes.
Tem compatibilidade na transferência de ficheiros
entre outros programas da Adobe.
18

PROJETOS REALIZADOS
PROJETOS REALIZADOS
19

Figura 14 - Frame 1 Videolog
3.1 VIDEOLOG DE ESTÁGIO
BRIEFING
Logo no primeiro dia, foi acordado entre o
coordenador e os estagiários que seriam recolhidas
imagens regularmente e, posteriormente, realizados
pequenos vídeos que mostrassem um pouco do dia-
-a-dia do ambiente no escritório e alguns momentos
mais informais, ao longo do período de estágio. Como
primeira proposta de trabalho, coube ao estagiário
realizar o primeiro destes vídeos, com imagens
recolhidas durante os primeiros três dias.
METODOLOGIA/PLANEAMENTO
Sendo um projeto de carácter informal, não
houve grande planeamento para a execução do
mesmo, tendo sido dada liberdade criativa total ao
estagiário para a edição do vídeo.
Através das imagens captadas, foi feita uma
seleção das mais relevantes, editadas e organizadas
cronologicamente. No meio de gravações aleatórias e
soltas, foi feita também uma timelapse da montagem
do escritório no primeiro dia. Escolhida a música, a
edição foi feita tentando encaixar, cronologicamente
e em sincronia com a música, os planos que
melhor transmitiam o ambiente , com alguns mais
humorísticos à mistura.
Finalmente, foi feita uma correção de cor e o
vídeo foi exportado para o programa “After Effects”
para que outro colega fizesse a adição de texto e
do logótipo da Cultur’Arte.
SOFTWARE UTILIZADO
O software necessário para a realização do projeto
foi:
• Adobe Premiere CS6
RESULTADO FINAL
Terminado e exportado o vídeo, foi feito
upload do mesmo para o canal da Cultur’Arte Mag
no YouTube e partilhado no respetivo site e página
do Facebook.
De um modo geral, o resultado foi
satisfatório e foi obtido um feedback positivo.
O vídeo, ligeiro e divertido, inaugurou assim os
“VLOG’s” de estágio, tendo sido feito, mais tarde,
um segundo vídeo por outro colega.
O vídeo pode ser visualizado na página do
Youtube da Cultur’Arte Mag, através do link:
https://www.youtube.com/watch?v=FRFp5ja8I5Q
20

Figura 15 - Frame 2 Videolog
Figura 16 - Frame 3 Videolog
21

Figura 17 - Frame 1 Concerto
3.2 VÍDEO DO CONCERTO
DOS “BIRDS ARE INDIE”
BRIEFING
No âmbito da criação e publicação de peças
da categoria “MAG”, que consistem num resumo
videográfico informativo de um evento, surgiu a
necessidade da criação de uma, sobre o concerto da
banda “Birds Are Indie” no Teatro Loucomotiva, em
Taveiro, Coimbra. As filmagens e a recolha de som
já tinham sido feitas e foi proposto ao estagiário a
edição das mesmas.
METODOLOGIA/PLANEAMENTO
A montagem do vídeo ficou ao critério
criativo do estagiário com supervisão e auxílio do
coordenador, que define os critérios de qualidade
e apresenta mais experiência na área.
Inicialmente, começou por se fazer uma seleção
das gravações de áudio do concerto, de maneira a
escolher a que tivesse melhor qualidade e que uma
das músicas tivesse filmagens correspondentes. E
assim foi, o tema “High On Love Songs”, com um ritmo
alegre, foi selecionado como a música ambiente ideal
para a realização da peça, depois de verificadas a
existência de filmagens correspondentes. A música
foi masterizada por outro colega para melhoria de
qualidade.
Posteriormente, a edição do vídeo foi
sendo feita consoante a relevância e conteúdo das
filmagens, não existindo uma ordem cronológica
no seguimento das mesmas. Os cortes foram sendo
feitos em conjunto com o ritmo da música e, em
alguns momentos, o vídeo corresponde com a música,
ou seja, utilizaram-se excertos de filmagens da
atuação na altura em que tocaram o tema utilizado,
e a imagem da artista a cantar ou alguém a utilizar
um instrumento ficam em sincronia com a música.
Para concluir, procedeu-se ainda a uma
correção de cor e exportou-se o vídeo para o “After
Effects” para colocação da introdução alusiva à
categoria “MAG”, legendas informativas e créditos.
SOFTWARE UTILIZADO
O software necessário para a realização do projeto
foi:
• Adobe Premiere CS6
RESULTADO FINAL
Depois de uns retoques finais, a peça ficou
completa. A conjugação das filmagens utilizadas e
o texto informativo em rodapé fizeram, assim, um
resumo fiel dos melhores momentos do concerto.
Sendo uma peça “MAG”, de publicação
periódica, foi então feito o seu upload para o canal
da Cultur’Arte no YouTube e partilhado no site e na
página do Facebook.
O artigo a que se destinou o vídeo pode
ser acedido em http://culturartemag.com/v1/post.
php?id=464
22

Figura 18 - Frame 2 Concerto
Figura 19 - Frame 3 Concerto
23

3.3 BANNERS WORKSHOPS
BRIEFING
Na sequência do desenvolvimento da
página Web que visava promover uns Workshops
que a Cultur’Arte planeava realizar futuramente,
foi necessário a criação de banners ilustrativos.
Um banner é uma forma comum de publicidade
na Internet, de forma geralmente retangular, que
normalmente têm links associados e são utilizados
para atrair o utilizador a acede-los. Neste caso, os
banners serviriam apenas para ilustrar o conteúdo
e o tema de cada um dos workshops e indicar o seu
respetivo orador.
METODOLOGIA/PLANEAMENTO
O conceito para a elaboração das imagens
acabou por ser simples, mas conciso: utilizar imagens
relacionadas com o tema de cada workshop como
fundo e o tema e o nome do orador escritos com
o lettering típico da Cultur’Arte, separados apenas
por uma barra.
Depois de se fazer um exemplo e aprovado
o conceito, foi feita uma pesquisa e seleção de
imagens que melhor ilustrassem os respetivos
temas, que acabou por resultar bem para quase
todos exceto um, o de “Design de App’s Android”,
em que foi necessário fotografar um smartphone
que evidenciasse o sistema operativo Android.
Recolhidas as imagens, foram abertas no
Photoshop para serem cortadas em forma retangular,
com as medidas certas, a cor foi trabalhada e foi
aplicado um efeito de desfoque a algumas delas para
melhor contraste e leitura do texto a ser colocado.
Por fim, foi utilizado o Illustrator para juntar as
imagens e adicionar o texto correspondente, por
uma questão de eficiência, rapidez de trabalho e
maior mestria no programa.
SOFTWARE UTILIZADO
O software necessário para a realização do projeto
foi:
• Adobe Illustrator CS6
• Adobe Photoshop CS6
Figura 20 - Imagem original do banner de
Fotojornalismo
Figura 21 - Imagem original do banner de
Comunicação em Redes Sociais
RESULTADO FINAL
Foram feitas duas versões, uma com texto
para ser utilizada na página onde são mostrados
todos os workshops, e outra sem texto, somente
ilustrativa, para as páginas individuais de cada
workshop.
Foi um projeto de rápida execução mas com
o resultado final pretendido e positivo. Os banners
foram postos no site, onde contribuíram para um
aspeto mais completo, organizado e apelativo.
O site dos workshops pode ser acedido em
http://workshops.culturartemag.com/
24

Figura 22 - Banner sem texto no site dos Workshops
Figura 23 - Versão sem texto do banner de
Fotojornalismo
Figura 24- Versão com texto do banner de
Fotojornalismo
Figura 25 - Versão sem texto do banner de
Comunicação em Redes Sociais
Figura 26 - Versão com texto do banner de
Comunicação em Redes Sociais
25

3.4 COBERTURA FOTOGRÁFICA
“SEQUIN” E “JIBÓIA”
BRIEFING
Sendo a Cultur’Arte Mag uma revista online
de âmbito cultural, procura fazer a cobertura
fotográfica e videográfica do maior número possível
de eventos culturais. Estes eventos são registados
antecipadamente numa agenda online e cabe
aos colaboradores da revista aceitar e realizar
voluntariamente, a maioria das vezes com material
próprio. Neste sentido, o estagiário voluntariou-se,
juntamente com outros dois colaboradores, para
fazer a cobertura fotográfica dos concertos das
bandas “Sequin” e “Jibóia”, ambos na mesma noite,
no Salão Brazil, em Coimbra.
MATERIAL UTILIZADO
O material necessário para a realização da
cobertura foi:
• Máquina fotográfica Canon EOS 600D
• Objetiva 18-55mm
• Lente 50mm
METODOLOGIA/PLANEAMENTO
Para a realização da cobertura fotográfica foi
utilizada a máquina fotográfica e uma objetiva 18-
55mm do estagiário e uma lente 50mm pertencente
a outro colaborador, com maior abertura para melhor
eficiência em ambiente com menos luz.
O objetivo era conseguir fotografar o maior
número de fotos com a melhor qualidade possível
para uma futura publicação da categoria “PICS”
no site da Cultur’Arte, que consiste numa seleção
das melhores fotos da cobertura de um evento,
acompanhadas de um texto informativo.
Na noite dos concertos, o estagiário deslocouse
até ao Salão Brazil onde, apesar de se pagar
entrada, entrou sem o fazer dado um acordo existente
entre o espaço e a Cultur’Arte Mag. Uma sala pequena
e inicialmente vazia rapidamente se compôs, o que
veio provar ser um obstáculo dada a dificuldade
em andar e fotografar no meio de tanto público. A
pouca luz também dificultou o trabalho, podendo
comprometer a qualidade, dada a necessidade
de utilização de ISO’s mais altos, o que causa o
surgimento de “grão” nas fotografias.
Apesar das adversidades, foi possível chegar
à linha da frente e a espaços nas laterais do palco,
conseguindo múltiplos planos e um grande número
de fotografias. Na questão da luz, a lente de 50mm
foi utilizada temporariamente para melhor captação
de luz derivada da sua maior abertura, evitando
a utilização de ISO’s mais elevados, conseguindo,
assim, diminuir o “grão” e melhorar a qualidade de
imagem.
26
Figura 27 - Fotografia 1 Concerto
RESULTADO FINAL
Num total de 331 fotografias tiradas pelo
estagiário ao longo de dois concertos, foram
escolhidas, pelo coordenador de estágio, 6 das suas
fotografias numa seleção das 20 melhores para
serem publicadas no artigo do site da revista. Todas
as fotografias selecionadas tiveram uma correção
de cor feita por outro colaborador.
O resultado final foi muito positivo e a
realização deste trabalho muito gratificante dado
o carisma musical do evento e o gosto pessoal pelas
bandas.
O artigo e as respectivas fotos podem
ser vistas em http://culturartemag.com/v1/post.
php?id=462

Figura 28 - Fotografia 2 Concerto
Figura 29 - Fotografia 3 Concerto
27

3.5 WEBSITE CULTUR’ARTE MAG
BRIEFING
A Cultur’Arte Mag, uma revista online, depende
maioritariamente da sua página Web, sendo este o seu
principal meio de comuncação. Consequentemente,
é de extrema relevância que o website seja simples,
funcional e com um design apelativo.
Apesar da revista já ter uma página funcional
própria aquando a realização deste projecto,
esta apresentava algumas falhas a nível visual e
estrutural e graves problemas a nível de BackOffice
na criação de conteúdo, o que dificultava e atrasava
esta actividade. Tendo estas falhas em conta, e dada
que a pontualidade na publicação de conteúdo é
vital, foi definido que a página necessitava de uma
reconstrução a nível do design, da estruturação e
da criação de conteúdos.
Já era do conhecimento prévio do estagiário
a necessidade da construção de uma nova página
e foi nesse sentido que surgiu então a proposta de
estágio por parte da Cultur’Arte. A criação desta nova
página foi o projecto principal ao longo do período
de estágio, sendo o que preencheu a maioria do
mesmo.
METODOLOGIA/PLANEAMENTO
Tendo em conta as falhas graves no BackOffice
do site original da Cultur’Arte, era imperativo arranjar
uma alternativa funcional e de simples utilização,
recorrendo a um plataforma de gestão de conteúdo.
O redesign e prototipagem desta nova versão do
site foi realizada previamente por outro colega
estagiário.
Foi então feita uma vasta pesquisa dos CMS’s
existentes e, analisando todas as suas vantagens
e desvantagens, chegou-se à conclusão que a
utilização do Wordpress seria a melhor opção. Esta
escolha foi baseada na simplicidade e eficácia na
utilização do BackOffice e criação de conteúdo e na
facilidade de personalização do FrontOffice, a “cara”
do site onde o utilizador tem acesso à informação.
O WordPress permite a criação de um novo website,
já com o seu sistema instalado, através da sua própria
página, permitindo alojá-la nos seus servidores
dedicados ou num servidor pessoal. Neste caso,
a página foi criada e foi alojada num servidor e
domínio privado, propriedade do coordenador de
estágio dentro da Cultur’Arte.
28
Antes de iniciar o desenvolvimento do projeto,
foi feita ainda uma pesquisa alargada sobre o
funcionamento do WordPress, tendo havido um
período de adaptação e exploração do mesmo.
O desenvolvimento da página teve ínicio na procura
de um tema para ser editado, que se assemelhasse
ao design final pretendido. A escolha recaiu sobre um
denominado “Alizee”, principalmente pelas miniaturas
dos artigos serem muito semelhantes ao pretendido
e ao facto de ser responsivo. As alterações feitas a
este tema occoreram em diversos aspetos, que serão
descritos individualmente.
Todo o desenvolvimento deste projecto foi feito
através da edição do código HTML e CSS das páginas
directamente nos ficheiros e grande parte dele
através de um editor de CSS existente no BackOffice
do WordPress.
Menu de Navegação
Um dos aspectos mais importantes de um
site, especialmente num de conteúdo dinâmico, é a
organização da informação e estruturação do site. O
principal método de navegação é através do menu
de navegação, daí ter sido o primeiro objectivo
a alcançar. Primariamente, utilizou-se o sistema
de criação de menus do WordPress, que dentro da
aparência base predefinida pelo tema, acrescenta os
nomes e links das categorias previamente criadas.
Foi necessária a criação imediata das categorias de
conteúdo pretendidas para a sua implementação no
menu de navegação.
Implementados os links das categorias,
estes tiveram a sua posição ajustada, o tipo de
letra alterado para o que é típico da revista e a
cor mudada para branco. Foi adicionado também
um efeito “hover” em cada um dos links, fazendo
aparecer um sublinhado da cor característica de cada
categoria, sempre que se passa o rato. A imagem
da Cultur’Arte foi colocada do lado esquerdo, antes
das categorias, através de uma função PHP própria
do WordPress que permite a alteração da imagem
diretamente do BackOffice. O fundo da barra de
navegação foi alterado para azul. Mais tarde, foram
adicionados por outro colega, do lado direito, logos
com links para as páginas da revista nas respetivas
redes sociais, um botão de pesquisa, outro com um
submenu que não foi terminado mas que se desti
nava a conter ligações para páginas de contactos
e informação adicional sobre a revista, assim como
um botão para fazer login.

Figura 30 - Aspecto original da homepage do tema
Figura 31 - Menu de Navegação original
Figura 32 - Menu de Navegação actual
Figura 33 - Painel inicial do BackOffice
29

Figura 34- Homepage actual
Figura 35 - Página da categoria “Notícias”
30

Página Principal
A página principal, ou homepage, é a cara
do site. É a primeira impressão que se ganha da
primeira vez que o acedemos. Por isto, diversos
elementos foram estudados de maneira a que tivesse
um visual apelativo mas continuando funcional e
organizado. É constituída por um “slider” que vai
passando as imagens de destaque dos últimos cinco
posts da categoria “Destaques”, com links para os
mesmos, acompanhadas de uma legenda com o
respetivo título. Isto foi possível graças à instalação
de um plugin chamado “Meta Slider”, que permite
a seleção das categorias de posts que pretendem
ser mostrados no slider. Para além do slider, existe
um grelha de quatro colunas com as miniaturas
das publicações que vão sendo feitas, organizada
cronologicamente. Da versão original do tema foi
retirado um botão, por baixo do slider do lado direito,
que fazia aparecer um menu secundário.
Categorias
No seguimento da organização de conteúdo,
foi necessária a criação de cinco categorias diferentes:
“Notícias”, “Vídeos”, “Criativos”, “Fotos”, “Agenda”
com as cores vermelho, amarelo, verde, castanho
e azul associadas respectivamente. A cada uma
delas corresponde uma página própria, onde são
arquivadas todas as publicações dessa categoria. A
criação de uma sexta categoria, a de “Destaque”, foi
necessária para fins de personalização e organização
de conteúdos mais relevantes, não tendo nenhuma
página nem cor associadas.
O WordPress gera as páginas baseado num
ficheiro modelo, e apresenta uma hierarquia nos
ficheiros que procura em primeiro lugar. No caso das
categorias, cada uma das suas páginas era gerada
a partir do mesmo ficheiro, que apresentava um
layout muito diferente do pretendido. Tendo isto
em conta, foi necessário criar um ficheiro específico
para cada categoria, baseado no layout em grelha da
homepage e de maneira a haver uma personalização
individual mais eficiente, para que cada página de
categoria fosse gerada individualmente em vez do
mesmo modelo. Com isto, foi possível mudar a cor
dos pormenores de cada página de categoria para
a sua cor característica e, modificando uma função
JavaScript nativa do tema, foi possível obter o layout
em grelha à semelhança da página principal.
Na página da “Agenda” planeava-se construir
uma espécie de agenda cultural, mas acabou por
passar para segundo plano e não chegou a ser
realizada.
Figura 36 - Aspecto original da página de categoria
31

Publicações
Miniaturas
As miniaturas são as pré-visualizações dos
artigos nas páginas onde estão arquivados, seja na
homepage como na página da respetiva categoria
ou tag associada. Estão divididas em quatro tipos,
sendo que um deles é único, e todos eles são
representados pelas suas cores correspondentes.
O tipo mais comum é o de um artigo com uma
imagem de destaque associada, que é utilizado para
a maioria das publicações, mas não pertencendo à
categoria “Destaque”. Com uma forma rectangular e
orientadas na vertical, as miniaturas deste género
surgem com a imagem de destaque até meio da
área, separada do título e do excerto do artigo por
uma linha com a cor da categoria correspondente.
No fundo são dispostas as tags associadas do lado
esquerdo e a data da publicação do lado direito.
A segunda versão de miniatura é uma versão
mais simples da primeira, não tendo nenhuma
imagem de destaque e, por isso, uma dimensão
menor. Este tipo é, normalmente, associado a artigos
de menor importância.
Existe também um género de miniatura dos
artigos mais relevantes, pertencentes à categoria
“Destaque”, desaparecendo o excerto, deixando
a imagem de destaque preencher toda a área da
miniatura, com uma transparência da cor da categoria
correspondente sobreposta. O título do artigo ganha
mais visibilidade aumentando de tamanho e subindo
para o canto superior esquerdo, enquanto as tags e
a data permanecem iguais.
O último género de miniatura é exclusivo
da categoria “Criativos”, apresentando uma forma
rectangular horizontal, onde a imagem de destaque
ocupa toda a área, à semelhança do tipo anterior.
Conta também com uma transparência verde
sobreposta e destaca-se o excerto do artigo em
vez do título, que se encontra mais discreto no canto
inferior esquerdo e as tags no direito.
Todas as imagens de destaque contém um
efeito “hover” que, ao passar o rato, ganha uma
transparência da cor correspondente à categoria
associada e um link para o artigo, assim como
acontece com o título. As tags remetem para uma
página arquivo, semelhante ao das categorias, onde
estão contidos todos os artigos associados a essa
mesma tag.
32
Figura 37 - Primeiro tipo de miniatura
Figura 38 - Segundo tipo de miniatura
Figura 39 - Miniatura de Destaque

Publicações
Páginas de Leitura
A existência de diversas categorias evidencia
a publicação de diferentes tipos de conteúdo, o que
leva a que essas publicações tenham um layout e
design diferentes. Tal como no caso das categorias,
para uma personalização eficiente foi necessária
a criação de ficheiros base diferentes para gerar
diferentes layouts dos diversos tipos de publicações.
Para isto ser possível, foi necessária a utilização de
um plugin que permite a criação de novos tipos
de publicação, para além do tipo “Post” nativo do
Wordpress. Foi criado um tipo de publicação para
cada categoria.
As páginas de visualização das publicações das
categorias “Notícias”, “Vídeos” e “Fotos” apresentam
um layout semelhante. Todas elas têm todos os
pormenores na sua cor característica e apresentam o
artigo começando com um cabeçalho com o respetivo
nome e tags associadas, seguido do seu conteúdo.
Neste tipo de publicações existe a possibilidade
de acrescentar um outro “slider”, com recurso a um
plugin, com uma seleção de fotos feita pelo criador
doa publicação.
Em relação à categoria “Criativos”, destinada à
publicação e promoção de entrevistas e trabalhos
de profissionais da área das artes e multimédia, tem
uma design um pouco mais característico. Também
com os pormenores da página da sua cor, neste caso
em verde, surge com a imagem de destaque a ocupar
toda a largura da página, com o nome do criativo
no fundo, que para todos os efeitos é o título do
artigo, seguido de um excerto do artigo e das tags
associadas à publicação. No final, surge, então, o
conteúdo do artigo.
Em todos os artigos existe também a
possibilidade de partilhar os mesmos nas diferentes
redes sociais, assim como um campo para a realizar
comentários, através do login com as contas das
redes sociais ou introduzindo um e-mail e um nome.
Estas funções foram possibilitadas com recurso a
outro plugin.
Figura 40 - Miniatura Criativos
Figura 41 - Interface de criação de uma nova
publicação
33

Figura 42 - Página de visualização de um post de
Criativos
Figura 43 - Funcionalidades de partilha e comentários
34

Figura 44 - Página de visualização de um post da
categoria Notícias
Figura 45 - Página original de visualização de uma
publicação
35

Publicações
Responsividade
Em geral, o tema apresenta grande adaptação
da página às diferentes resoluções. O layout de 4
colunas da homepage e das páginas de categorias
é totalmente responsivo, diminuindo o número de
colunas à medida que a resolução diminui, acabando
por juntar tudo apenas numa coluna e fazer
desaparecer o slider, nas resoluções mais baixas.
As páginas das publicações também são capazes
de escalar e organizar o conteúdo, à exceção das
dos artigos “Criativos” que tiveram uma adaptação
manual dada a diferença no layout.
Os tamanho das letras também de tiveram
de ser adaptados as diversas resoluções, para uma
melhor leitura.
Figura 46 - Responsividade Homepage
Figura 47 - Responsividade Post de Notícias
36

FERRAMENTAS UTILIZADAS
As ferramentas utilizadas para a realização do
projeto foram
• Sublime Text
• WinSCP
• Plataforma WordPress
RESULTADO FINAL
Ao longo da realização deste projeto foram
encontradas inúmeras adversidades, que o foram
atrasando. Desde dias sem acesso à página por
falhas no servidor, baixa velocidade e falhas na
ligação à Internet no escritório e até perda de
trabalho já elaborado. Estas raões fizeram com que
o site não fosse totalmente concluído em regime
de estágio. O estagiário continuará a acompanhar
o desenvolvimento do mesmo como colaborador
da Cultur’Arte. O projeto ganhou um bom rumo, já
tendo entrado em fase de testes por parte de uma
pequena comunidade fechada.
Apesar das dificuldades, há que se fazer um
balanço positivo, tendo em conta a experiência e
conhecimento ganho na área do desenvolvimento
Web.
Para ter acesso a este projecto, basta visitar
o link:
http://cmag.figasdm.com
Figura 48 - Responsividade Post Criativos
37

Figura 49 - 1ª Secção Homepage
3.6 WEBSITE 7ºENCONTRO CDM
BRIEFING
No seguimento da organização do 7º Encontro
de Comunicação e Design Multimédia,
coube ao estagiário e a outros três alunos voluntários
o desenvolvimento do site de promoção
ao evento. A maioria do conteúdo necessário para
a elaboração da página tardou a sair, o que fez com
que a margem de tempo para a conclusão da mesma
fosse muito reduzida.
METODOLOGIA/PLANEAMENTO
Começou-se por fazer pesquisa do que se
tinha vindo a fazer em edições anteriores e concluiuse
que havia estruturação de conteúdo semelhante
em todas elas, mas que existiam alguns problemas
a nível estético e de usabilidade, como texto em
demasia e um layout pouco apelativo.
Tendo isto em conta e visando fazer algo
diferente e com qualidade, optou-se por um conceito
mais moderno, simples e funcional. Com isso em
mente, reduziu-se significativamente a quantidade
de texto, melhorou-se a organização e disposição
da informação através de sistemas de grelhas e
hierarquias e foi utilizado, contextualmente, mais
conteúdo multimédia.
Todo o desenvolvimento do site foi feito
cooperativamente através de um repositório criado
com esse objetivo, através do sistema de controlo
de versão GIT. Este sistema permite que vários
colaboradores possam trabalhar no mesmo projeto,
onde vão sendo compiladas em diferentes versões
quaisquer alterações que sejam submetidas para
o sistema.
A estrutura do site é uma página única
dividida em 7 secções, cada uma com diferente
conteúdo informativo, com uma barra de navegação
com posição fixa. Foi utilizado uma livraria de
JavaScript que permite a navegação diretamente
entre secções sempre que é feito scroll, em vez da
tradicional navegação progressiva.
A primeira secção, sendo a primeira que
aparece ao aceder à página, contém, como introdução,
o vídeo promocional ao evento a reproduzir
automaticamente, enquanto a secção seguinte serve
apenas para um resumo descritivo sobre o evento.
A terceira secção, que coube ao estagiário
desenvolver, é dedicada à programação do evento,
estando organizada numa agenda que se divide
pelos dois dias e hora de início de cada palestra.
Para cada orador foi utilizada uma foto do mesmo,
ou o seu logo no caso de uma empresa, referindo
sempre o nome e, ou a empresa pertencente ou a
profissão.
38

Figura 50 - 2ª Secção Sobre
Figura 51 - 3ª Secção Oradores
39

Figura 52 - 4ª Secção Oradores
Figura 53 - 5ª Secção Stream
40

Figura 54 - 6ª Secção Apoios
Figura 55 - 7ª Secção Contactos.
41

Na 3ª secção, é possível aceder a informação
mais detalhada de cada orador, separada por um
sistema de navegação por abas.
Pensando na transmissão online em directo
do 7º Encontro, foi criada uma secção para esse fim,
que contém embutido a stream quer fosse para ver
na altura ou para ver a stream mais tarde, dada que
a gravação é feita.
Finalmente, a penúltima secção é dedicada
aos parceiros, tendo estes os seus logos exibidos.
E na sétima, e última, secção são disponibilizados
todos os contactos da ESEC, assim como os docentes
responsáveis pelo evento e um mapa interativo com
a morada e localização.
SOFTWARE UTILIZADO
O software necessário para a realização do projeto
foi:
• Editor de código Sublime Text
• Consola do sistema GIT
Figura 56 - Cartaz 7ª Encontro CDM
RESULTADO FINAL
Como balanço final, apesar do curto período
de desenvolvimento, foi obtido um resultado
bastante positivo. Apesar de algumas falhas a nível
da programação e a nível estético, nomeadamente
lapsos em alguns alinhamentos e espaçamentos,
foi construída uma página promocional diferente e
melhorada em comparação às de edições anteriores.
Foi também interessante trabalhar com o sistema
GIT para futuras colaborações em outros projetos
do género.
Para ter acesso à pagina basta visitar:
http://encontrocdm.esec.pt/
42

4. DIAGRAMA DE GANTT
Figura 57 - Diagrama de Gantt
44

5. CONCLUSÃO
O percurso do estágio curricular foi uma
jornada bastante gratificante, tendo permitindo um
grande crescimento a nível pessoal e intelectual.
A presença na Cultur’Arte Mag fomentou
bastante o trabalho de equipa, sendo necessária
a entreajuda dos colaboradores para a contínua
criação de conteúdos e desenvolvimento de
trabalhos. Apesar da liberdade criativa, para
manter a qualidade e rigor é necessário disciplina
e responsabilidade nas decisões tomadas para a
obtenção de bons resultados nos projetos que se
foram realizando. Estas qualidades contribuem
para o vasto leque de competências essenciais
no mundo do trabalho.
A realização de um projeto ambicioso
de desenvolvimento Web permitiu adquirir
conhecimentos e experiência na área, assim como
familiarização com todo o software necessário
para a elaboração do mesmo.
Na área da edição de vídeo foram
aprimorados os conhecimentos e técnica na
realização dos mesmos, foram conhecidas técnicas
de optimização do resultado final, como o processo
de correção de cor. Com isto, foi também possível
aprofundar a mestria no software de edição, Adobe
Premiere.
Também na área da fotografia foram
feitos progressos, nomeadamente na cobertura
de eventos, dada a necessidade de improvisação
na captura de planos diferentes e o conhecimento
da técnica de fotografar em ambientes com pouca
luz.
Ao longo deste processo de evolução, foram
encontradas e ultrapassadas várias adversidades
em diferentes níveis: a nível técnico, por diversas
falhas nos meios necessários para a elaboração
dos projetos, e a nível teórico, pela incapacidade de
progressão do trabalho por falta de conhecimento
ou falta de mestria no software.
Em síntese, foi uma experiência
enriquecedora, onde se adquiriram bastantes
conhecimentos, contribuindo para uma maior
segurança e preparação para o mundo profissional.
45

6. BIBLIOGRAFIA
Abreu, Luís (2013). JavaScript, 2ª Edição. Lisboa: FCA – Editora de Informática Lda.
Adobe Systems Incorporated (2014). Adobe® Illustrator® Help and tutorials.
https://helpx.adobe.com/illustrator/how-to/what-is-illustrator.html
Adobe Systems Incorporated (2015). Adobe® Photoshop® Help and tutorials.
https://helpx.adobe.com/photoshop.html
Adobe Systems Incorporated (2015). Adobe® Premiere® Pro Help and tutorials.
https://helpx.adobe.com/premiere-pro/how-to/what-is-premiere-pro-cc.html
Boiko, Bob (2005). Content Management Bible, 2ªEdição. Indianapolis: Wiley Publishing, Inc.
http://themigrant.dk/eBooks/Content%20Management%20Bible,%202nd%20Edition.pdf
Cormode, G. & Krishnamurthy, B. (2008) Key diferrences between Web1.0 and Web2.0.
http://journals.uic.edu/ojs/index.php/fm/article/view/2125/1972
Internet Society. (2013) Brief History of the Internet.
http://www.internetsociety.org/internet/what-internet/history-internet/brief-history-internet
Knight, K. (2011). Responsive Web Design: What It Is and How To Use It. Smashing Magazine.
http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Marcotte, Ethan (2011). Responsive Web Design, Nova Iorque: Jeffrey Zeldman.
http://www.petronet.ir/documents/10180/2323248/Responsive_Web_Design
Responsive Design. (2014). O que é o Responsive Design.
http://johnpolacek.github.io/scrolldeck.js/decks/responsive/
Responsive Design. (2015). HTML Responsive Web Design. W3C,
http://www.w3schools.com/html/html_responsive.asp
Sublime Text. (2015).
http://www.sublimetext.com/
Sandroni, A. G. (2015). Breve Historia y Origen del Internet. Academia.edu
https://www.academia.edu/5489717/BREVE_HISTORIA_Y_ORIGEN_DEL_INTERNET_Errata_El_
proyecto_de_ley_SOPA_no_fue_aprobado_-_p%C3%A1gina_10_
The PHP Documentation Group. (2015). O que é o PHP. PHP Introduction.
https://secure.php.net/manual/en/intro-whatis.php
46

Veá, A. (2013). Como Creamos Internet. Espanha: Peninsula.
http://www.elboomeran.com/upload/ficheros/obras/6.nov.cmo_creamos_internet_primeras_pgi
nas.pdf
WinSCP (2014) Introduzindo o WinSCP.
https://winscp.net/eng/docs/introduction
WordPress. org (2015) Sobre o WordPress.
https://wordpress.org/about/
WordPress.org (2015) Funcionalidades.
https://wordpress.org/about/features/
World Wide Web Foundation (s.d.). A História da Web. World Wide Web Foundation
http://webfoundation.org/about/%20vision/history-of-the-web/
World Wide Web Consortium. (2000). Uma pequena história da World Wide Web.
http://www.w3.org/History.html
World Wide Web Consortium (s.d.). CSS Introduction. W3C.
http://www.w3schools.com/css/css_intro.asp
World Wide Web Consortium (s.d.). CSS Selectors. W3C.
http://www.w3schools.com/css/css_selectors.asp
World Wide Web Consortium (s.d.). Pseudo-classes. W3C.
http://www.w3schools.com/css/css_pseudo_classes.asp
World Wide Web Consortium (2011). What is CSS. W3C.
http://www.w3.org/community/webed/wiki/CSS/Training/What_is_CSS
World Wide Web Consortium. (s.d.). HTML Introduction. W3Schools.
http://www.w3schools.com/html/html_intro.asp
World Wide Web Consortium. (2014). The Basics of HTML
http://www.w3.org/community/webed/wiki/The_basics_of_HTML
World Wide Web Consortium. (s.d.). HTML5 Introduction
http://www.w3schools.com/html/html5_intro.asp
ANEXOS
No CD em anexo, seguem alguns dos
trabalhos desenvolvidos durante o período de
estágio., organizados em pastas individuais, não
sendo possível anexar os websites desenvolvidos.
Apresenta-se, então, a listagem de conteúdos:
1- Videolog de Estágio
2- Vídeo do concerto dos Birds Are Indie
3- Os banners dos Workshops
4- Relatório em pdf
47

48

49

FILIPE FERREIRA - 2015