View
215
Download
0
Category
Preview:
Citation preview
Curso Profissional Técnico de Multimédia
ESAN Digital
Prova da Aptidão Profissional
Carla Sofia Ventura Loureiro
Oliveira de Azeméis, Julho de 2016
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 2
Agrupamento de Escolas Soares Basto
Curso Profissional de Técnico de Multimédia
ESAN Digital
Prova da Aptidão Profissional
Professor Acompanhante: Manuel Teixeira
Carla Sofia Ventura Loureiro
Oliveira de Azeméis, Julho de 2016
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 3
Dedicatória
Dedico este trabalho em especial aos meus
pais, que sempre foram compreensivos
quando precisava de mais tempo para
realizar o projeto. O apoio que me deram
durante todo o desenvolvimento do
projeto foi fundamental.
Dedico-o também aos meus amigos que
me ajudaram a arranjar soluções quando
havia algum problema e que me apoiaram
no que foi necessário.
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 4
Resumo
A Prova de Aptidão Profissional (PAP) foi desenvolvida em conjunto com outra colega. O
trabalho foi dividido equitativamente pelas duas. O projeto, ESAN Digital, foi desenvolvido
durante a formação em contexto de trabalho.
Inserido neste projeto foi também desenvolvida, em conjunto com outro colega, uma planta
para colocar no quiosque da escola e um web site para divulgar os trabalhos dos alunos. Esta
planta é interativa e contempla a modelação da Escola Superior Aveiro Norte em 3D no seu
interior e exterior.
O primeiro objetivo deste projeto é facilitar, principalmente aos alunos que estudam na ESAN
a sua orientação dentro da escola. O segundo objetivo é a criação de um blogue onde será
possível colocar os trabalhos dos alunos online já que isto não é possível no site oficial. A mais
valia que este projeto vem trazer é tornar possível a visualização da escola como realmente é,
tornar públicos bons trabalhos realizados pelos alunos e ainda permitir a alteração da interface
sempre que for pretendido.
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 5
Agradecimentos
Quero agradecer a todos os que me ajudaram a realizar este projeto, pois a mais pequena
ajuda foi sempre muito importante para o produto final. Ao diretor de turma, que sempre me
ajudou quando foi necessário para desenvolver a PAP o melhor possível, à Escola Superior
Aveiro Norte, por me te acolhido nas suas instalações e por ter confiado em mim para
desenvolver o projeto, à minha orientadora de estágio que me ajudou bastante a desenvolver
o projeto, através das suas sugestões e ajudas para melhorar e a toda a minha família e amigos
que me ajudaram e apoiaram incondicionalmente.
A todos um grande obrigada.
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 6
Índice DEDICATÓRIA ........................................................................................................................................ 3
RESUMO ................................................................................................................................................ 4
AGRADECIMENTOS ................................................................................................................................ 5
INTRODUÇÃO ........................................................................................................................................ 8
1. HARDWARE E SOFTWARE UTILIZADOS .......................................................................................... 9
2. CRIAÇÃO DO BLOG ...................................................................................................................... 10
2.1 ESCOLHA DO TEMA ................................................................................................................................ 10 2.2 CÓDIGO DO SITE ................................................................................................................................... 11 2.3 ESTRUTURA DO SITE ............................................................................................................................... 11
2.3.1 Menu Horizontal ....................................................................................................................... 11 2.4 PÁGINAS DO SITE .................................................................................................................................. 12
2.4.1 Página Principal ........................................................................................................................ 12 2.4.2 ESAN.......................................................................................................................................... 14 2.4.3 Disciplinas ................................................................................................................................. 16 2.4.4 Contactos .................................................................................................................................. 17 2.4.5 Portefólio ESAN-UA ................................................................................................................... 21
2.5 PLUGINS .............................................................................................................................................. 21 2.5.1 Black Studio .............................................................................................................................. 22 2.5.2 Meta slider ................................................................................................................................ 22 2.5.3 Page Builder by SiteOrigin ........................................................................................................ 22 2.5.4 Simple Custom CSS .................................................................................................................... 22 2.5.5 Social Media Buttons Toolbar ................................................................................................... 23 2.5.6 Ultimate Social media Plus ....................................................................................................... 23 2.5.7 WP SVG Icons ............................................................................................................................ 23 2.5.8 SiteOrigin Widget Bundle .......................................................................................................... 24 2.5.9 WP-Cufón .................................................................................................................................. 24
2.6 ALOJAR O BLOG NO SERVIDOR DA ESAN ........................................................................................ 24
2.6.1 Acesso ao servidor .................................................................................................................... 24 2.6.2. Download e Instalação ............................................................................................................ 24 2.6.3 Acesso ao servidor por FTP ....................................................................................................... 26 2.6.4 Exportação e Importação.......................................................................................................... 26 2.6.5 Upload de imagens ................................................................................................................... 27
3. PLANTA 3D .................................................................................................................................. 28
3.1 MODELAÇÃO ........................................................................................................................................ 28 3.1.1 Caixote do lixo – Entrada .......................................................................................................... 28 3.1.2 Mesa de Panfletos-Entrada ...................................................................................................... 29 3.1.3 Quiosque ................................................................................................................................... 31 3.1.4 Projetor – Partes ....................................................................................................................... 35 3.1.5 Cadeiras da Entrada -Partes ..................................................................................................... 35 3.1.6 Extintor – Partes ....................................................................................................................... 35 3.1.7 Objetos Modelados ................................................................................................................... 36
Entrada: ......................................................................................................................................................... 37 Cafetaria ........................................................................................................................................................ 37 Sala de Aula: .................................................................................................................................................. 38
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 7
Laboratório: ................................................................................................................................................... 39 Biblioteca: ...................................................................................................................................................... 39 Secretaria:...................................................................................................................................................... 39 Gabinetes: ..................................................................................................................................................... 39
4. MATERIALIZAÇÃO ........................................................................................................................ 41
4.1 CAFETARIA ........................................................................................................................................... 41 4.2 LABORATÓRIO ...................................................................................................................................... 42 4.3 GABINETES ........................................................................................................................................... 42
5. CARTAZ ........................................................................................................................................ 43
6. DVD ............................................................................................................................................. 44
CONCLUSÃO......................................................................................................................................... 46
ANEXOS ............................................................................................................................................... 47
Fotos Recolhidas ................................................................................................................................ 47
BIBLIOGRAFIA ...................................................................................................................................... 49
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 8
Introdução
O tema desta Prova de Aptidão Profissional (PAP) é “ESAN Digital” tendo a ideia surgindo em
conjunto com outro colega no segmento da formação em contexto de trabalho (FCT) na Escola
Superior Aveiro Norte (ESAN).
A Escola Superior de Design, Gestão e Tecnologias da Produção de Aveiro Norte (ESAN) foi
criada a 8 de outubro de 2004, através da promulgação do Decreto-Lei 217/2004. Esta unidade
orgânica da Universidade de Aveiro dedica-se ao ensino e à investigação, pertencendo ao
subsistema de ensino Politécnico. A ESAN promove ainda “a transferência para a sociedade do
conhecimento e da tecnologia, bem como a dinamização de atividades culturais e humanistas
em prol e estreita interação com a comunidade envolvente”.
Atualmente a ESAN desenvolve atividades nas áreas do design e desenvolvimento de produto,
da organização industrial, das tecnologias e sistemas da produção e das tecnologias e sistemas
de informação e comunicação, quer através da sua oferta de ensino de nível superior quer
através da sua oferta de ensino e formação pós-secundária de natureza técnica e
profissionalizante.
Esta PAP divide-se em dois grandes pontos. O primeiro consistiu na criação de um blog onde é
possível colocar os trabalhos dos alunos online já que o site oficial não permite fazer
alterações. Deste modo, será possível tornar públicos bons trabalhos realizados pelos alunos e
ainda fazer alterações no layout sempre que se pretender. O segundo ponto foi a criação de
uma planta em três dimensões (3D) que tanto serve para localizar uma determinada divisão
como permitir uma visita virtual às instalações.
Este projeto foi dividido equitativamente em duas partes, já que foi realizado com outro
colega. O presente relatório, relata a parte da criação, de todo o site, da parte interior da
Escola Superior Aveiro Norte e do cartaz da PAP.
Foi desenvolvido um blog de acompanhamento à PAP que ilustra todo o processo e pode ser
acompanhado através de “carlapap.wordpress.com”.
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 9
1. Hardware e Software Utilizados
Para este projeto foram utilizados alguns equipamentos e softwares, sendo a maioria destes
últimos livres. Para a realização do projeto do site estavam disponíveis várias linguagens de
programação, HyperText Markup Language (HTML), Cascade Styling Sheet (CSS) ou PHP.
Outra solução possível seria a utilização de sites de edição web como o Wix ou o WordPress.
Para este projeto foi decidida a utilização de Wordpress uma vez que já tinha sido utilizado
durante as aulas.
Para a modelação da escola estavam disponíveis também algumas soluções, 3D Studio Max,
Maya, Autodesk 3D Studio Max e Blender. Depois de devidamente analisadas foi escolhido
Blender, um software livre que também tinha sido abordado em contexto de sala de aula.
Para adquirir as fotos para realizara modelação da ESAN utilizou-se uma Canon 100D
Para a edição de imagens bitmap foram utilizados dois softwares, Adobe Photoshop e GNU
Image Manipulation Program (GIMP).O primeiro é pago e o segundo é livre. Foram os dois
utilizados já que em alguns casos e dependendo do que se queria desenvolver, o mesmo
resultado era melhor num programa do que no outro.
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 10
2. Criação do Blog
2.1 Escolha do tema Wordpress.com foi utilizado no inicio da criação do blog tendo sido analisados os temas
gratuitos disponibilizados e escolhido o tema Lovecraft.(Imagem 1)
Imagem 1-Primeiro tema escolhido
Com o desenvolvimento do trabalho o site utilizado mostrou-se pouco convidativo e foi
substituído por Yoko (imgem 2). As cores deste novo eram mais apelativas, a personalização
era mais simples e abrangente e permitia uma maior liberdade de personalização, sendo o
resultado muito mais suave e apelativo visualmente.
Imagem 2:Tema escolhido após alteração de tema
À medida que o trabalho de construção do site foi desenvolvido o wordpress.com demosntrou
fragilidades que não se adequavam com o resultado pretendido e foi necessário criar um
espaço num servidor, inicialmente no do Agrupamento de Escolas Soares Basto, e a partir daí o
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 11
produto final começou finalmente a ser desenvolvido. Mais uma vez foi alterado o tema do
Blog, para o Ultra (imagem 3).
Imagem 3: Tema Final -Ultra
2.2 Código do Site Aquando da realização do site foi verificado que todo o menu e links estavam com a cor azul
(Imagem 4), que era uma cor por defeito. Para contornar esta situação, foi acedido o código
CSS, e alterada a cor azul para verde (Imagem 5).
Imagem 4: Cor azul - #0896fe
Imagem 5: cor verde - #87aa14
Nos links, para conseguir tirar o sublinhado foi alterado o código para apresentado na imagem
6. As alterações realizadas consistiram, no border bottom, foi colocado o none e alterada a cor
azul para o verde. (Imagem 6, retângulo verde), no color foi alterada a cor de azul para preto.
(Imagem 6, retângulo laranja).
Imagem 6: Código dos links
2.3 Estrutura do Site
2.3.1 Menu Horizontal No fluxograma está apresentada a estrutura inicial do menu. Este consta de uma página
principal, uma página com o nome ESAN, um menu chamado Disciplinas e da página contactos
(imagem 7).
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 12
Imagem 7:Menu horizontal
À medida que o site foi sendo densenvolvido, a designação da página Disciplinas foi alterada
para Portefólio. (imagem 8) e também foi alterada a organização do submenu, que deixou de
conter as disciplinas e começou a ser organizado por anos.
Imagem 8: Menu horizontal - versão 2:
2.4 Páginas do Site
2.4.1 Página Principal A página principal (imagem 9) é a primeira página do site. Quando aberta surge no topo um
slideshow com algumas imagens da escola. (imagem 9, retângulo verde e imagem 10). A
realização deste foi possível através de um plugin chamado “Meta Slider”. O tamanho do
banner é de 300px de altura, o efeito de transição é o fade e o tempo de transição de uma foto
para a outra é de 2500 milissegundos. Nas imagens 11 é possível encontrar as definições do
plugin Meta Slider.
ESAN
Newsletter
Trabalhos dos Alunos
Teoria do Design 1
Teoria do Design 2
História
Menu Horizontal
Inicio
ESAN
Disciplinas
Teoria do Design 1
Teoria do Design 2
HistóriaConactos
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 13
Imagem 9: Página Principal
Imagem 10: Fotos do SlideShow Imagem 11: Definições do
SlideShow
Nesta página, numa posição inferior ao SlideShow situam-se dois circule ícon que são
hiperligações para duas páginas, a primeira para a Newsletter e a segunda para o Portefólio da
ESAN. (Imagem 12). Estes ícones já vinham predefinidos no tema. O widget utilizado foi o
“SiteOrigin Feature” (imagem 13) e a cor foi única alteração feita, passou do azul para o verde
(#87aa14). O primeiro circule icon é um envelope e o segundo é uma pasta aberta. Ambos
estão numa row, alinhados ao centro, com um tamanho de 70 pixéis e o ícone com 28 pixéis
(Imagem 14).
Imagem 12: Circule Ícone
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 14
Imagem 13: Widget "SiteOrigin Feature"
Imagem 14: Definições do widget “SiteOrigin Feature”
No fundo da página há um pequeno texto que explicativo do que é o site e para que serve. O
texto foi escrito no widget “Visual Editor” e o tamanho é o padrão, parágrafo e justificado.
Seguidamente encontram-se os icons para as redes sociais que foram possíveis com o plugin
“Ultimate Social Media PLUS” (imagem 15).
Imagem 15:Redes Sociais
2.4.2 ESAN A página com o nome ESAN (imagem 16), é uma página com um texto, escrito pelo Professor
Doutor Martinho Oliveira, diretor da ESAN, contém informação sobre a escola e explica o que
ela é e quais os seus objetivos. Aí também se encontram imagens das diferentes divisões da
escola. Inicialmente, a página era em português, mas posteriormente passou a ser bilingue,
com a adição da tradução em língua inglesa.
Imagem 16: Página ESAN sem galeria
No topo da página há uma imagem a toda a largura do ecrã, e no seu centro há o logotipo
(Imagem 16, retângulo verde) da escola. Para colocar este logotipo a imagem foi colocada na
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 15
row pretendida e por cima foi adicionado um widget com o nome “SiteOrigin Image“ (imagem
17). O widget tem também uma padding de 50 pixeis (imagem 18).
Imagem 17: Row do logotipo da página ESAN
Imagem 18: Padding do Logotipo
A seguir surge o texto relativo à ESAN. No final da página há uma pequena galeria de fotos das
diferentes divisões da escola.
Para a galeria, de início, foram utilizadas as fotos recolhidas com a CANON 100D, colocadas
aleatoriamente (imagens 19 e 20). Mais tarde, foi organizada a galeria de modo diferente. Para
a colocação das fotos no site, foram criadas secções para cada uma das divisões que contêm
de três a quatro fotos cada.
Imagem 19: Row com "Visual Editor"
Imagem 20:Galeria - versão 1
No sentido de personalizar a galeria foi necessário realizar algumas alterações nas definições
do próprio widget (imagem 21) Além destas, como se colocou uma legenda em cada
fotografia, foi necessário traduzir alguns dos termos iniciais para português (imagem 22).
Imagem 21:Alterações realizadas no Widget "Visual Editor"
Imagem 22:Alteração dos termos por defeito
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 16
2.4.3 Disciplinas A página Disciplinas (posteriormente alterada para Portefólio), inicialmente, continha os
submenus (imagem 23) História, Teoria do Design 1 e Teoria do Design 2 que foram alterados
para os anos do curso (imagem 24).
Imagem 23: Submenus
Imagem 24:Submenus alterado
Na primeira versão do layout, no topo da página estava colocado o título identificando cada
disciplina, seguido da identificação do ano dos trabalhos, (imagem 25, retângulo laranja) e da
sua descrição. (imagem 25, retângulo verde)
Imagem 25:Página de História do Design – versão 1
Depois das alterações de layout, no local onde existia o a identificação do ano, passou a existir
o título do trabalho e no local da descrição, uma introdução ao trabalho em questão.
Para realizar esta alteração foi necessária a criação de uma row dividida em duas partes
(imagem 26). Em cada uma delas foi utilizado o widget “Visual Editor”.
Imagem 26: Tamanho das divisões da row
Na parte onde se encontra o título foi criada uma class, através do plugin “google fonts”, para
alterar o tamanho e alinhamento (imagem 27).
Imagem 27: Personalização do ano
Descrição
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 17
Na parte da descrição o texto é justificado e foi utilizado o tamanho padrão do parágrafo
(imagem 28).
Imagem 28: Personalização da descrição
Logo a seguir surgem os diferentes formatos utilizados no desenvolvimento do presente
trabalho. Todo o processo descrito de que foi alvo a página da disciplina de História do Design,
foi repetido em todas as outras disciplinas.
2.4.4 Contactos A página contactos é uma página que contém toda a informação relacionada com a localização
da escola e onde é possível contactar esta para esclarecimento de dúvidas ou perguntar
informações através de um formulário de contacto.
No topo da página contactos, no local onde se encontra o banner, está o mapa com a
localização da escola (imagem 29).
Imagem 29: Banner com o mapa da localização
Para a realização desta página foi necessária a criação de uma row e o widget “SiteOrigin
Google Maps” (imagem 30).
Imagem 30: Row com widget “SiteOrigin Google Maps”
Neste widget foram colocados os dados da localização da ESAN que são “Estrada do
Cercal,3720-509 Santiago de Riba-Ul, Oliveira de Azeméis, Portugal”. Foi definido que o mapa
iria ser interativo ou seja, iria permitir fazer zoom, tal como funciona o Google Maps, sendo
definida uma altura com 250 pixéis. (imagem 31).
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 18
Imagem 31: Widget “SiteOrigin Google Mpas” – Definições
A seguir ao banner, situam-se informações da localização da escola (imagem 32, retângulo
verde), os números de telefone e telemóvel e os dados GPS.
A parte relativa às informações, está numa row, dividida em dois (imagem 32).
Imagem 32:Row com widget “Visual Editor”
O widget utilizado foi o “Visual Editor”, o texto está todo como parágrafo (imagem 33). O que
se encontra dentro do retângulo laranja na imagem 33 é o código para colocar os ícones das
redes sociais.
Imagem 33: Widget "Visual Editor"
Ao lado das informações sobre a localização da escola situa-se um formulário de contacto
onde o utilizador pode enviar um email para a ESAN com questões ou pedir informações. Para
este formulário foi utilizado o widget “SiteOrigin Contact Form”, (Imagem 34, retângulo
laranja).
Imagem 34: Widget "SiteOrigin Contact Form"
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 19
O formulário (imagem 35) tem os campos Nome, Email, Assunto e Mensagem.
Imagem 35: Formulário
Quando um email é enviado sem assunto, por defeito, é adicionado “Contacto do blog da
ESAN”, de modo a indicar que o email, veio do site (imagem 36). No campo Assunto, na caixa
de texto existe a mensagem “Escreva o assunto…” e o tipo de campo é “Subject” (Imagem 37).
Imagem 36: Assunto adicionado por defeito
Cada campo tem as suas definições, na caixa de texto do campo Nome existe uma mensagem
que diz “Escreva o seu nome…” e o tipo de campo é name (imagem 38). No campo Email, a
mensagem é “Escreva o seu Email” e o tipo de campo é email (imagem 39) e por fim, no
campo Mensagem, a mensagem é “Escreva o corpo da mensagem…” e o tipo de campo é text
area (imagem40).
Imagem 37: Campo Assunto
Imagem 38: Campo Nome
Imagem 39: Campo Email
Imagem 40: Campo Mensagem
Neste formulário não foi utilizado o Captcha porque não foi considerado necessário.
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 20
No Designer, o container, tem uma cor de fundo branca, um padding de 10 pixéis, um
contorno com a cor #87aa14 e uma espessura de 1 pixel. (Imagem 41)
Imagem 41: Design do formulário
As mensagens de erro têm uma cor de fundo também branca, um contorno com a cor #
ed1c23, a cor do texto #ed0007, padding de 5 pixéis e uma margem de 5 pixéis (Imagem 42).
Imagem 42: Mensagens de erro
O botão é branco, as letras são verdes (87aa14) e tem um limite de 1 pixel (imagem 43).
Imagem 43:Desingner do botão
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 21
2.4.5 Portefólio ESAN-UA A página Portefólio ESAN-UA encontra-se na Página Inicial e aí estão todas as disciplinas de
cada ano. No topo está colocado o banner, com uma imagem e o logotipo da escola, a
formatação que foi realizada é igual à da página da ESAN e de cada uma das disciplinas
(imagem 44).
Imagem 44: Banner da página Portefólio ESAN-UA
A seguir ao banner, está o título da página “Portefólio ESAN-UA”. Este título está num widget
“Visual Editor” com um heading 1 e com uma class apenas para este titulo (Imagem 45).
Imagem 45: Código da página “Portefólio ESAN”
Na zona das disciplinas, sob o título, existe uma row dividida em três partes iguais,
correspondendo cada uma a um ano dos cursos e têm o widget “Visual Editor”. (imagem 46)
Imagem 46: Row com os três anos dos cursos
O título do widget (número do ano) está com uma classe (imagem 47). Seguidamente surgem
as disciplinas existentes nesse ano com hiperligações para as páginas respetivas (imagem 48).
Imagem 47: Widget “Visual Editor”
Imagem 48: código das hiperligações
Esta personalização é igual nas três partes.
2.5 Plugins Para personalizar o site foi necessária a utilização de plugins. Alguns dos utilizados são
gratuitos, outros não o são mas continham uma parte gratuita que foi utilizada.
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 22
2.5.1 Black Studio Foi utilizado o plugin “Black Studio” (imagem 49) que adiciona um novo Visual Editor do
género widget que permite inserir texto e objetos multimédia nas barras laterais sem
problemas. O widget de texto do WordPress padrão necessita de funcionalidades e requer
conhecimento de HTML, e através deste plugin é possível contornar esta situação.
Imagem 49:Black Studio
2.5.2 Meta slider O Plugin “Meta Slider” (imagem 50) foi utilizado para a criação de apresentações de slides de
forma rápida e simples. Basta selecionar as imagens, arrastar e soltar no lugar pretendido. É
possível definir legendas de slides, links tudo a partir de uma página. Também é possível
escolher entre 4 tipos de apresentação de slides diferentes (Flex Slider, Nivo Slider, Responsive
Slides & Coin Slider) e usar o shortcode incluindo-o no local onde se pretende apresentar o
SlideShow e facilmente é incorporado no blog.
Imagem 50: Meta Slider
2.5.3 Page Builder by SiteOrigin O plugin “Page Builder by SiteOrigin” (imagem 51) torna mais fácil a criação de conteúdo
usando os widgets preferidos. O conteúdo adapta- se com precisão a todos os dispositivos
móveis. A interface é bastante intuitiva e fácil de aprender, assim é possível criar conteúdos
bonitos, de forma simples.
Imagem 51: Page Builder
2.5.4 Simple Custom CSS Simple Custom CSS (imagem 52) é uma forma fácil de adicionar estilos CSS personalizados que
substituem os estilos plugin e o tema predefinido. Este plugin foi planeado para adicionar o
próprio CSS para o site.
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 23
Imagem 52: Simple Custum CSS
2.5.5 Social Media Buttons Toolbar O plugin “Social Media Buttins Toolbar” (imagem 53) foi utilizado para adicionar botões das
redes sociais em qualquer lugar do site. Este plugin cria uma barra de ferramentas ao vivo. Se
os botões não se ajustam a uma linha, são colocados em várias linhas. Assim, podem ser
dispostos horizontalmente ou verticalmente e sempre centrados. É possivel escolher o
tamanho dos ícones e posicionar os botões de link utilizando um widget ou um shortcode.
Foi experimentado o plugin Social Media Buttons Toolbar mas o resultado não foi o pretendido
tendo-se procedido à sua desinstalção.
Imagem 53: Social Media Buttons Toolbar
2.5.6 Ultimate Social media Plus O plugin Ulimate Social Media Plus (imagem 54) é 100% gratuito, permite exibir ícones das
redes sociais e adequá-los às necessidades. Com ele é possível adicionar ícones para RSS,
email, Facebook, Twitter, LinkedIn, Google+, Pinterest, Instagram, Youtube, "Share" (que
abrange mais de 200 outras plataformas de média social) e upload de ícones personalizados à
escolha.
Imagem 54: Ultimate Social Media Plus
2.5.7 WP SVG Icons O plugin “WP SVG Icons” (imagem 55) ínclui mais de 490 ícones, cria e faz upload de ícones
personalizados, insere ícones diretamente em mensagens, páginas e barras e não é necessário
escrever nenhum código.
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 24
Imagem 55: WP SVG Icon
2.5.8 SiteOrigin Widget Bundle O plugin “SiteOrigin Widget Bundle” (imagem 56) disponibiliza uma coleção de widgets que se
pode usar e personalizar. Alguns widgets disponibilizados são, “Google Maps”, widgets para
colocar imagens, vídeos e botões para redes sociais, Google Mapas Widget que vai lugares.
Imagem 56: SiteOrigin Widget Bundle
2.5.9 WP-Cufón Com o plugin “WP-Cufón” (imagem 57) apenas é necessário converter os arquivos de fontes e
enviá-los para a pasta de fontes plugins, depois é só escrever “font-family:” no local onde a
fonte vai ser alterada e escrever o nome da fonte.
Imagem 57:WP-Cufón
2.6 Alojar o blog no servidor da ESAN
Como foi referido anteriormente, aquando do início do desenvolvimento da estrutura do site o
mesmo encontrava-se alojado no servidor da Escola Secundária Soares Basto. A sua
transferência para o servidor da ESAN necessitou de alguns passos.
2.6.1 Acesso ao servidor Antes de se iniciar a migração propriamente dita, acedeu-se ao servidor. Para isso foi
necessário criar uma conta e logo que esta foi confirmada ficou concluída a primeira etapa.
2.6.2. Download e Instalação Depois do acesso ao servidor, foi necessário fazer o download do wordpress e instalá-lo no
servidor. A primeira tarefa consistiu na descompactação da pasta do wordpress, na copia dos
ficheiros descompactados e da sua colocação na pasta do novo servidor.
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 25
Depois de terminada esta tarefa, foi aberto o browser e, na barra de pesquisa, foi escrito o URL
do site (esan.web.ua.pt/blog/wp-admin) tendo aparecido a mensagem de instalação e um
botão com a indicação “Let’s Go” (imagem 58). Depois de pressionado o botão foi iniciado o
preenchimento dos campos necessários, “Data base, username e password (relativos à base de
dados), Database host (nome do servidor) e a Table Prefix”. Com estes campos preenchidos,
foi pressionado o botão que deveria concluiu a primeira parte da instalação o que não foi bem-
sucedido já que ocorreu um erro.
Imagem 58:Primeira mensagem do WordPress
Este erro ocorreu porque a tabela que se definiu ainda não existia e assim, foi criado um
pequeno conflito simples de resolver. Apenas foi necessário criar um ficheiro “config.php”,
com o código que o wordpress já disponibilizou. O código do ficheiro destinava-se à criação da
tabela na base de dados e evitar o conflito. Depois apenas foi necessário colocar o ficheiro na
raiz do site (imagem 59).
Imagem 59: Ficheiro PHP na raiz do site
Após a conclusão do ficheiro surgiram novos campos para preenchimento (imagem 60) e assim
concluir a instalação do wordpress.
Imagem 60:Novos Campos
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 26
2.6.3 Acesso ao servidor por FTP Para serem possíveis as alterações no site sem a ligação da rede da ESAN, foi utilizado o
FireFTP (imagem 61). Este é uma extensão do Mozilla Firefox que permite o upload e download
de ficheiros do servidor, sem ser necessário estar ligado à rede da ESAN.
Imagem 61: FireFTP
2.6.4 Exportação e Importação Depois de toda a instalação concluída com sucesso o site foi exportado do servidor anterior
para o servidor atual. No painel do wordpress, na ferramenta tools e export, foi selecionada a
opção, all content (imagem 62) e exportado um ficheiro .XML.
Imagem 62:Painel WordPress
Seguidamente, no servidor definitivo, acedeu-se à mesma ferramenta (tools) mas, desta vez,
ao import e escolheu-se a opção wordpress (imagem 63), já que se pretendia importar
conteúdo de um wordpress para outro. Aí foi necessário a instalação de um plugin, por
definição, o wordpress já pede para instalar o Wordpress Importer (imagem 64) o que foi feito.
Depois de instalar o plugin e de o ativar, repetiu-se o mesmo procedimento (tools->import),
mas quando se selecionou o import houve um erro (imagem 65).
Imagem 63: Importar através do WordPress Imagem 64: Plugin WorPress Importer
Imagem 65: Erro ao utilizar o plugin
Este erro está relacionado com as permissões do servidor e por falta de acesso a essas não foi
possível instalar o plugin pretendido. Assim, outros plugins foram testados mas em vão.
Depois de alguma pesquisa, a solução foi exportar e importar a base de dados através do
painel do phpmyadmin. Para exportar (imagem 66), apenas foi necessário ir a “exportar”,
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 27
colocar a opção “personalizado” deixar tudo em formato padrão e executar. Foi
automaticamente descarregado um ficheiro .sql.
Imagem 66:Exportar através do painel phpmyadmin
Depois de toda a base de dados exportada, foi aberto o phpmyadmin da ESAN e, com a base
de dados que se pretende trabalhar selecionada, foi acionada a opção “importar” (imagem 67),
pressionado o botão “Explorar”, selecionado o ficheiro .sql, anteriormente exportado e a
importação foi executada.
Imagem 67: Importar a partir do painel phpmyadmin
Depois desta ação ocorreu um erro (#1273 - Unknown collation: 'utf8mb4_general_ci) e após
uma longa pesquisa, foi aberto o ficheiro .sql (o ficheiro exportado) no Notepad ++ e
substituídas todas as palavras "utf8mb4" por "utf8”. Seguindo-se a substituição de
“utf8mb4_unicode_ci” por “utf8_unicode_ci”.
Seguidamente e ainda no painel phpmyadmin na opção “Operações” foi escolhido o
agrupamento (collation) da base de dados para “utf8_unicode_ci” (imagem 68).
Imagem 68:Definir o agrupamento
Depois destas alteração repetiu-se a importação do ficheiro .sql e a ação foi executada
corretamente.
2.6.5 Upload de imagens Quando se verificou se todo o conteúdo tinha sido importado para o servidor, constatou-se
que apenas os plugins e o código CSS tinham sido transferidos. Como eram poucas páginas e
apenas estavam na sua estrutura, foram refeitas. Quando se tentou colocar as imagens nas
páginas surgiu um erro (imagem 69) relacionado com as permissões do servidor e foi
necessário contactar o responsável. Logo que se teve direito de diretoria foi possível colocar as
imagens e concluir toda a migração.
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 28
Imagem 69: Erro ao importar imagens
3. Planta 3D
Como o Projeto de Aptidão Profissional foi realizado em conjunto com outra colega, a
elaboração da planta foi divida. A parte que é apresentada neste documento refere-se à
modelação e materialização dos objetos do interior da escola.
3.1 Modelação Neste capítulo será apresentado apenas uma explicação de alguns dos objetos modelados e
algumas fotografias dos objetos 3D para serem comparados com os objetos/divisões reais.
3.1.1 Caixote do lixo – Entrada Para o cesto, como base, foi utilizado um cubo do qual se aumento a altura e a largura. Depois
no modo “Edit Mode” foi selecionada a face de cima (topo) e realizado um extrude para
dentro, com o intuito de criar o interior do caixote do lixo.
Para criar os furos do cesto, foi utilizado um cilindro que se redimensionou para o tamanho
pretendido e posicionou no local correto. Assim que estava no local, o cilindro foi duplicado e
colocado a uma distância de 0.2 tanto na horizontal como na vertical. Este processo foi
repetido para todos os cilindros duplicados até a face estar completa. Depois de todos os
cilindros duplicados e posicionados, foram selecionados e foi feito o join, para criar apenas um
objeto.
Para terminar os furos do caixote, com o cubo selecionado, foi utilizado o modificador
“Boolean”, com a opção Diference. Na caixa ao lado, foram selecionados os cilindros e aplicado
o modificador. Os furos foram criados e processo foi repetido para as outras faces laterais
(imagem 70).
Imagem 70: Cesto
Depois do cesto concluído, foi modelado o suporte iniciando-o pela parte de cima. Foi utilizado
um plano onde se fez um extrude para trás que depois foi inclinado, seguido de um extrude
vertical para baixo e para a frente para criar a base. Para fazer as partes laterais subdividiu-se a
base utilizando a tecla “W” cinco vezes. Foram selecionadas as primeiras cinco arestas e feito
um extrude para cima até à altura pretendida criando uma “parede”. Com a ferramenta Knife
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 29
foi feito um click na diagonal desde o topo até à base dessa parede e apagadas as faces que
não interessavam.
No final, foram selecionadas as faces dessa parede e feito um extrude para o lado no sentido
de criar espessura. Este processo foi realizado para o outro lado do suporte. (imagem 71).
Imagem 71:Suporte do Caixote
3.1.2 Mesa de Panfletos-Entrada Para a modelação da mesa de panfletos da entrada, primeiro foi adicionado um cubo (imagem
72) que foi redimensionado (imagem 73) até ao tamanho pretendido.
Imagem 72:Etapa 1
Imagem 73: Etapa 2
A este foi adicionado outro cubo (imagem 74). Para a realização do tampo da mesa, foi
redimensionado e selecionada a aresta da frente através da utilização do atalho “CTRL+B” fezz-
se um Bevel (imagem 75). Com o scroll e ainda com a aresta selecionada foram acrescentadas
mais arestas (imagem 76). Depois foi selecionada apenas a face de baixo que elevou no eixo de
Z (imagem 77). Com todo o objeto selecionado foi colocado sobre o objeto criado
anteriormente (imagem 78), ficando a parte do tampo da mesa concluída.
Imagem 74:Etapa 3
Imagem 75:Etapa 4
Imagem 76: Etapa 5
Imagem 77:Etapa 6
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 30
Imagem 78:Etapa 7
Com a parte de baixo do objeto selecionada e no modo “Edit Mode”, foi selecionada apenas
uma das faces laterais que se subdividiu quatro vezes através do atalho da tecla “W” (imagem
79). Seguidamente foram selecionadas apenas algumas faces inferiores (imagem 80). Com a
vista de frente e depois de carregar na tecla “Z” (imagem 81), fez-se um extrude da tecla“E” e
moveu-se no eixo do X (imagem 82).
Imagem 79: Etapa 8
Imagem 80: Etapa 9
Imagem 81: Etapa 10
Imagem 82: Etapa 11
Seguidamente, e porque era necessário apagar algumas faces (imagem 83) estas foram
selecionadas (imagem 84) e apagadas ficando como mostra nas imagens 85 e 86. O processo
realizado anteriormente foi repetido no outro lado do paralelepípedo.
Imagem 83: Etapa 12
Imagem 84: Etapa 13
Imagem 85: Etapa 14
Imagem 86: Etapa 15
Por fim e para terminar, e no sentido de criar as pernas foi adicionado um cubo alvo de
redimensionalização (imagem 87 e 88) e posicionado no local correto. (imagem 89).
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 31
Imagem 87: Etapa 16
Imagem 88: Etapa 17
Imagem 89: Etapa 18
No modo “Edit Mode”, foi selecionada a ultima face que foi subdividida em várias faces
(imagem 90), que entregaram três grupos sendo selecionado o grupo do meio (imagem 91).
Imagem 90: Etapa 19
Imagem 91: Etapa 20
A seguir realizou-se um extrude no eixo do Z (imagem 92) e foram apagadas as faces que não
interessavam (imagem 93).
Imagem 92: Etapa 21
Imagem 93: Etapa 22
No modo “Edit Mode” foi selecionado todo o objeto modelado anteriormente, duplicado
(imagem 94) e colocado no local apropriado (imagem 95).
Imagem 94:Etapa 23
Imagem 95:: Etapa 24
3.1.3 Quiosque Para a construção do quiosque foi utilizado um cubo (imagem 96) redimensionado em todos os lados (imagem 97 e 98).
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 32
Imagem 96: Etapa 1
Imagem 97: Etapa 2
Imagem 98: Etapa 3
Foi selecionada uma das faces laterais (imagem 99) que se subdividiu em faces menores
(imagem 100) que depois foram agrupadas (imagem 101). Selecionaram-se seguidamente as
arestas destas faces (imagem 102) que se colocaram mais para fora (imagens 103 e 104).
Imagem 99: Etapa 4
Imagem 100: Etapa 5
Imagem 101: Etapa 6
Imagem 102: Etapa 7
Imagem 103: Etapa 8
Imagem 104: Etapa 9
Seguidamente, foi selecionada a face da frente (imagem 105) com o objetivo desta ser
subdividida (imagem 106). Como este passo não se concretizou e apenas as arestas ficaram
subdivididas, foi utilizada a ferramenta knife para criar as arestas necessárias (imagem 107).
Para terminar a parte do quiosque propriamente dito, na parte que já estava selecionada na
imagem 108, na vista de lado, foi feito um extrude no eixo do y para criar a saliência do ecrã
(imagem 109).
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 33
Imagem 105: Etapa 10
Imagem 106: Etapa 11
Imagem 107: Etapa 12
Imagem 108: Etapa 13
Imagem 109: Etapa 14
Para a criação da base do quiosque foi adicionado um cubo redimensionado no tamanho
pretendido (imagem 110).
Imagem 110: Etapa 15
Com as arestas selecionadas e depois de pressionar a tecla “B”, foi feito um Bevel (imagem
111) e com o scroll foram criadas as arestas para a construção da curva (imagem 112). Foram
selecionadas todas as faces, com exceção da do topo (imagem 113) e eliminadas (imagem
114). Para terminar, no modo “Object Mode” foi utilizado o modificador solidify com o
intuitode tornar a base mais grossa (imagem 105).
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 34
Imagem 111: Etapa 16
Imagem 112: Etapa 17
Imagem 113: Etapa 18
Imagem 114: Etapa 19
Imagem 115: Etapa 20
Para criar os suportes do quiosque foi adicionado um cilindro (imagem 116) que foi
redimensionado e colocado no lugar pretendido (imagem 117).
Imagem 116: Etapa 21
Imagem 117: Etapa 22
A seguir, foi adicionado um cilindro (imagem 118) que foi redimensionado (imagem 119). Com
os vértices selecionados foi feito um extrude na vertical (imagem 120), e ainda na vertical foi
aumentado o tamanho (imagem 121). Foi novamente realizado um extrude na vertical
(imagem 122) e com estes últimos vértices selecionados foi criada uma face (imagem 123).
Imagem 118: Etapa 23
Imagem 119: Etapa 24
Imagem 120: Etapa 25
Imagem 121: Etapa 26
Imagem 122: Etapa 27
Imagem 123: Etapa 28
Depois de uma perna concluída esta foi duplicada sendo ambas colocadas nos devidos lugares
(imagem 124).
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 35
Imagem 124: Etapa 29
3.1.4 Projetor – Partes Seguidamente é apresentado o projetor criado em 3D com ênfase nas suas diferentes partes
constituintes.
Imagem 125: Suporte
Imagem 126:Parte que segura o corpo
Imagem 127: Parte que agarra ao suporte
Imagem 128: Corpo do Projetor
3.1.5 Cadeiras da Entrada -Partes A presentação da cadeira da entrada projetada em 3D com ênfase nas suas diferentes partes
constituintes.
Imagem 129: Banco
Imagem 130: Suportes
Imagem 131: Pernas
3.1.6 Extintor – Partes Apresentação do extintor criado em 3D com ênfase nas suas diferentes partes constituintes.
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 36
Imagem 132: Corpo
Imagem 133: Cabo
Imagem 134: Parte onde
prende o cabo
Imagem 135: Bússola
Imagem 136: Parte onde fica a base do cabo
Imagem 137: Topo
Imagem 138: Parte preta do topo
Imagem 139: Base
3.1.7 Objetos Modelados São apresentados seguidamente, divididos em subcapítulos, os objetos modelados por divisão.
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 37
Entrada:
Imagem 140: Cadeiras
Imagem 141: Vaso
Imagem 142: Lixo
Imagem 143. Quiosque
Cafetaria
Imagem 144: Caixa de
Guardanapos-mesa
Imagem 145:Caixa de Sugestões
Imagem 146:Caixa de Pastéis
Imagem 147:Candeeiro
Imagem 148: Carrinho de
Tabuleiros
Imagem 149:Frasco das Palhinhas
Imagem 150:Torradeira
Imagem 151:Reciclagem
Imagem 152:Lixo
Imagem 153:Frigorifico
Imagem 154:Máquina de Café
Imagem 155:Placar de Avisos
Imagem 156:Microondas
Imagem 157:Placa dos Gelados
Imagem 158:Mesa
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 38
Imagem 159:Prato
Imagem 160:Relógio
Imagem 161:Sensor
Imagem 162:Local dos
Talheres/Tabuleiros
Imagem 163:Tabuleiro
Imagem 164:Máquina de Tostas
Mistas
Imagem 165:Vaso
Sala de Aula:
Imagem 166:Suporte do Apagador
Imagem 167:Cadeira
Imagem 168:Comando das Costinas
Imagem 169:Cortinas
Imagem 170:Lâmpadas
Imagem 171:Interruptor 1
Imagem 172: Interruptor 2
Imagem 173:Lixo
Imagem 174:Marcador
Imagem 175:Mesa
Imagem 176:Projetor
Imagem 177:Quadro
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 39
Imagem 178:Tela do Projetor
Laboratório:
No laboratório para além dos objetos já apresentados também se encontram os das imagens
seguintes.
Imagem 179:Óbjeto do canto
Imagem 180: Suporte do quadro
Biblioteca:
No caso da biblioteca os únicos objetos apresentados são os armários e os alarmes já que
todos os outros já foram apresentados anteriormente (mesas). Em relação às cadeiras de
madeira, estas foram modeladas pela colega que também está a fazer este projeto.
Imagem 181: Armário Principal
Imagem 182: Armário tipo 2
Imagem 183: Armario tipo 3
Imagem 184: Armário tipo 4
Imagem 185: Alarme
Imagem 186: Cabide
Secretaria:
Para a secretaria foram modeladas as máquinas e alguns armários mais específicos. Todos os
que não se encontram neste capítulo estão no capítulo dos gabinetes.
Imagem 187: Armário com
pixadores
Imagem 188: Armário de ferro
Imagem 189: Impressora
Imagem 190: Impressora Grande
Imagem 191: Máquina de Cortar
Imagem 192: Máquina de
Encadernação
Gabinetes:
Os objetos apresentados seguidamente são todos objetos de gabinetes.
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 40
Imagem 193: Telefone
Imagem 194: Suporte de TV e
Televisão
Imagem 195: Organizador de folhas
Imagem 196: Guarda Revistas
Imagem 197: Capa
Imagem 198: Cabide
Imagem 199:Mesa
Imagem 200: Mesa Curva
Imagem 201: Mesa curva tipo 2
Imagem 202: Secretária
Imagem 203: Mesa de Reuniões
Imagem 204: Mesa reunião AECOA
Imagem 205 Armário de Ferro
Imagem 206: Armário de Ferro sem
barras
Imagem 207: Armário de Ferro
pequeno
Imagem 208: Armário com gavetas
pequeno
Imagem 209: Armário pequeno
Imagem 210:Armário do gabinete
AECOA
Imagem 211:Armário do gabinete
AECOA
Imagem 212: Armário do Gabinete
1
Imagem 213: Armário sala de
reuniões
Imagem 214: Armário com portas
transparentes
Imagem 215: Armário tipo 4
Imagem 216: Armário tipo 5
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 41
Imagem 217:Armário tipo 6
Imagem 218: Armário tipo 7
Imagem 219: Armário tipo 8
Imagem 220: Armário grande
Imagem 221: Armário gabinete 14
4. Materialização
Para materializar os objetos foram utilizadas imagens com texturas e também o Node Editor do
Blender. Nesta parte do trabalho é apresentada a foto original e a parte modelada com
texturas para se poder comparar.
4.1 Cafetaria
Imagem 222: Cafetaria
Imagem 223:Cafetaria 3D
Para a texturização do balcão foi utilizada uma textura (imagem 224), mas para os objetos do
balcão não foi necessário utilizar uma imagem. No caso dos metais foi usado o Node Editor.
Para a caixa dos pastéis foi utilizado também o Node Editor para lhe conferir transparência.
Neste sentido utilizou-se apenas a opção Glass para criar o efeito de vidro (imagem 225).
Imagem 224:Textura do Balcão
Imagem 225:Textura Vidro
z Imagem 226:Cafetaria
Imagem 227:Cafetaria 3D
Para materializar as cadeiras foi utilizada uma textura de madeira (imagem 228). Para as mesas
pintou-se o tampo de vermelho e as pernas de cinza bastante escuro sendo utilizadas nas suas
partes de madeira a mesma textura das cadeiras
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 42
Imagem 228: Textura de madeira
4.2 Laboratório
Imagem 229: Laboratório
Imagem 230: Laboratório - 3D
Imagem 231: Laboratório
Para o laboratório não foi necessário utilizar texturas, todas as cores utilizadas são cores
sólidas.
4.3 Gabinetes
Imagem 232:Gabinete de Reuniões
Imagem 233:Gabinete de Reuniões-3D
Na representação do gabinete escolhido como padrão foi utilizada uma textura para as mesas
(imagem 234) com um procedimento de aplicação muito básico, apenas com o Blender no
modo Cycles Render, a que se adicionou um novo material escolhendo a opção image texture.
Imagem 234:Textura das mesas
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 43
Para criar a transparência nas portas foi utilizado o node editor (imagem 235).
Imagem 235: Node Editor-Portas
Nas portas dos armários foi utilizada a tabela Glass para criar o efeito de vidro e para evitar
que fosse totalmente transparente colocou-se a cor cinzenta.
5. Cartaz
Para a divulgação da Prova de Aptidão Profissional, foi criado um cartaz. Este cartaz foi
desenvolvido no Photoshop sendo um dos elementos criado no GIMP-
O cartaz tem como titulo “ESAN Digital”, nome escolhido porque este projeto foi desenvolvido
durante a formação em contexto de trabalho. No fundo do cartaz existe uma imagem da
Escola Superior Aveiro Norte onde foi aplicado um efeito chamado Fractalius. (Imagem
236).Para poder criar este efeito foi necessário instalar um plugin no Photoshop.
Imagem 236:Efeito Fractalius
Criaram-se também caminhos digitais (imagem 237) que se estendem do topo do cartaz até à
zona do titulo e da parte de baixo parecendo que estão a sair do edifício da ESAN. No rodapé
do cartaz estão colocada as fotos dos autores da PAP.
Imagem 237: Caminhos
O tipo de letra utilizado para o título foi “modern_lcd-7” (imagem 238), para o restante foi a
“larabiefont rg” (imagem 239).
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 44
Imagem 238: Letra modern_lcd-7
Imagem 239: Letra larabiefont rg
Para criar o efeito atrás do título foi escrito o texto ESAN Digital com a cor escolhida, neste
caso o azul. Depois foi aberta a opção dos efeitos e ativadas as opções chanfro e entalhe,
sombra interna, brilho interno e sombra projetada (imagem240).
Imagem 240:efeitos utilizados
É aqui apresentado a versão final do cartaz.
Imagem 241: Cartaz de Divulgação da PAP
6. DVD
Para entregar a PAP foi necessário gravar um DVD com os ficheiros desenvolvidos. Deste
modo, foi desenvolvida uma capa com frente e verso para o DVD. A capa (imagem 242)
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 45
baseou-se no cartaz desenvolvido no contexto da PAP. O verso contém um resumo do
conteúdo do DVD e os logótipos (imagem 243).
Imagem 242: Capa do CD – Frente
Imagem 243: Capa do CD- Atrás
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 46
Conclusão
Este projeto ajudou a melhorar capacidades ao nível da criação de site, principalmente no que
está relacionado com a hospedagem num servidor. Através da procura da resolução para os
problemas que foram surgindo, foi possível aprender mecanismos de superação e de trabalho
não aprendidos em contexto de aula.
Em relação à modelação 3D, através da modelação do edifício da escola, foi possível melhorar
as competências não só em termos de proficiência de modelação, mas também de
texturização, campo menos solidificado. Na parte da renderização do projeto aconteceram
erros devido peso do projeto e à capacidade do computador.
Será pertinente a continuação e melhoramento deste projeto já que este permite a sua
expansão e se aplica a uma entidade real em constante transformação.
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 47
ANEXOS
Fotos Recolhidas
Imagem 244: Exterior da ESAN
Imagem 245: Exterior da ESAN
Imagem 246: Exterior da ESAN
Imagem 247: Exterior da ESAN
Imagem 248: Exterior da ESAN
Imagem 249: Entrada
Imagem 250: Cadeiras da entrada
Imagem 251:Mesa da Entrada
Imagem 252
Imagem 253:Corredor
Imagem 254:Secretaria
Imagem 255:Secretaria
Imagem 256:Secretaria
Imagem 257:Laboratório 6
Imagem 258:Sala de Aula 15
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 48
Imagem 259:Corredor
Imagem 260:Cafetaria
Imagem 261:Cafetaria
Imagem 262:Cafetaria
Imagem 263:Cafetaria
Imagem 264:Cafetaria
Imagem 265:corredor
Imagem 266:Gabinete 6
Imagem 267:Gabinete AECOA 2
Imagem 268:Auditório
Imagem 269:Auditório
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 49
Bibliografia
(s.d.). Obtido de EscolaWordpress: http://www.escolawp.com/2011/07/como-mover-o-banco-
de-dados-do-seu-wordpress-para-um-novo-servidor/
(s.d.). Obtido de Web Designer: http://www.webmaster.pt/importar-mysql-phpmyadmin-
cpanel-3064.html
(s.d.). Obtido de Tudo para WP: http://tudoparawp.com.br/dicas-wordpress/3-ferramentas-
eficientes-para-migracao-de-banco-de-dados-wordpress/
(s.d.). Obtido de Sobre Blog.
(s.d.). Obtido de Wordpress: https://codex.wordpress.org/pt-br:Importando_Conte%C3%BAdo
(s.d.). Obtido de Wordpress: https://codex.wordpress.org/pt-br:Movendo_o_WordPress
(s.d.). Obtido de Wordpress.
(s.d.). Obtido de Wordpress: https://codex.wordpress.org/pt-br:Importando_Conte%C3%BAdo
(s.d.). Obtido de Wordpress: https://wordpress.org/support/topic/collation-error-utf8-mb4
(s.d.). Obtido de Wordpress: https://wordpress.org/plugins/wp-all-import/changelog/
(s.d.). Obtido de Stackoverflow: http://stackoverflow.com/questions/29916610/1273-
unknown-collation-utf8mb4-unicode-ci-cpanel
(s.d.). Obtido de Stackoverflow: http://stackoverflow.com/questions/6295826/moving-
wordpress-to-new-host-importing-database-error-1062
(s.d.). Obtido de Stackoverflow: http://stackoverflow.com/questions/3311427/phpmyadmin-
error-1062-duplicate-entry-1-for-key-1
(s.d.). Obtido de Youtube: https://www.youtube.com/watch?v=ZDh6v2UFK_Q
(s.d.). Obtido de Youtube: https://www.youtube.com/watch?v=hLKVIYucJxE
(s.d.). Obtido de Trustiko: https://trustiko.com/cannot-upload-images-in-wordpress-fix/
(s.d.). Obtido de Wptotal: https://www.wptotal.com/alterar-permissoes-ficheiros-cpanel-ftp/
(s.d.). Obtido de redfield: http://www.redfieldplugins.com/Downloads.htm
(s.d.). Obtido de Blender: http://blender.stackexchange.com/questions/15683/make-a-gold-
reflective-object
perguntas. (s.d.). Obtido de Stackoverflow:
http://pt.stackoverflow.com/questions/7680/c%C3%B3pia-de-banco-de-dados-
wordpress-sem-utilizar-o-phpmyadmin
Plugin. (s.d.). Obtido de Wordpress: https://wordpress.org/plugins/black-studio-tinymce-
widget/
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 50
plugins. (s.d.). Obtido de Bloglite: http://www.bloglite.net/como-migrar-o-wordpress-de-
servidor-guia/
Plugins. (s.d.). Obtido de Wordpress: https://wordpress.org/plugins/wp-cufon/
Plugins. (s.d.). Obtido de Wordpress: https://wordpress.org/plugins/social-media-buttons-
toolbar/
Plugins. (s.d.). Obtido de Wordpress:
https://wordpress.org/plugins/search.php?q=page+builder
Plugins. (s.d.). Obtido de Wordpress: https://wordpress.org/plugins/simple-lightbox/
Plugins. (s.d.). Obtido de Wordpress: https://wordpress.org/plugins/so-widgets-bundle/
Plugins. (s.d.). Obtido de Wordpress: https://wordpress.org/plugins/svg-vector-icon-plugin/
Plugins. (s.d.). Obtido de Wordpress: https://wordpress.org/plugins/ml-slider/
Plugins. (s.d.). Obtido de Wordpress: Plugins
Plugins. (s.d.). Obtido de Wordpress: https://wordpress.org/plugins/simple-custom-css/
(s.d.). Obtido de EscolaWordpress: http://www.escolawp.com/2011/07/como-mover-o-banco-
de-dados-do-seu-wordpress-para-um-novo-servidor/
(s.d.). Obtido de Web Designer: http://www.webmaster.pt/importar-mysql-phpmyadmin-
cpanel-3064.html
(s.d.). Obtido de Tudo para WP: http://tudoparawp.com.br/dicas-wordpress/3-ferramentas-
eficientes-para-migracao-de-banco-de-dados-wordpress/
(s.d.). Obtido de Sobre Blog.
(s.d.). Obtido de Wordpress: https://codex.wordpress.org/pt-br:Importando_Conte%C3%BAdo
(s.d.). Obtido de Wordpress: https://codex.wordpress.org/pt-br:Movendo_o_WordPress
(s.d.). Obtido de Wordpress.
(s.d.). Obtido de Wordpress: https://codex.wordpress.org/pt-br:Importando_Conte%C3%BAdo
(s.d.). Obtido de Wordpress: https://wordpress.org/support/topic/collation-error-utf8-mb4
(s.d.). Obtido de Wordpress: https://wordpress.org/plugins/wp-all-import/changelog/
(s.d.). Obtido de Stackoverflow: http://stackoverflow.com/questions/29916610/1273-
unknown-collation-utf8mb4-unicode-ci-cpanel
(s.d.). Obtido de Stackoverflow: http://stackoverflow.com/questions/6295826/moving-
wordpress-to-new-host-importing-database-error-1062
(s.d.). Obtido de Stackoverflow: http://stackoverflow.com/questions/3311427/phpmyadmin-
error-1062-duplicate-entry-1-for-key-1
ESAN Digital
Prova de Aptidão Profissional
Carla loureiro
2015/2016 51
(s.d.). Obtido de Youtube: https://www.youtube.com/watch?v=ZDh6v2UFK_Q
(s.d.). Obtido de Youtube: https://www.youtube.com/watch?v=hLKVIYucJxE
(s.d.). Obtido de Trustiko: https://trustiko.com/cannot-upload-images-in-wordpress-fix/
(s.d.). Obtido de Wptotal: https://www.wptotal.com/alterar-permissoes-ficheiros-cpanel-ftp/
(s.d.). Obtido de redfield: http://www.redfieldplugins.com/Downloads.htm
(s.d.). Obtido de Blender: http://blender.stackexchange.com/questions/15683/make-a-gold-
reflective-object
perguntas. (s.d.). Obtido de Stackoverflow:
http://pt.stackoverflow.com/questions/7680/c%C3%B3pia-de-banco-de-dados-
wordpress-sem-utilizar-o-phpmyadmin
Plugin. (s.d.). Obtido de Wordpress: https://wordpress.org/plugins/black-studio-tinymce-
widget/
plugins. (s.d.). Obtido de Bloglite: http://www.bloglite.net/como-migrar-o-wordpress-de-
servidor-guia/
Plugins. (s.d.). Obtido de Wordpress: https://wordpress.org/plugins/wp-cufon/
Plugins. (s.d.). Obtido de Wordpress: https://wordpress.org/plugins/social-media-buttons-
toolbar/
Plugins. (s.d.). Obtido de Wordpress:
https://wordpress.org/plugins/search.php?q=page+builder
Plugins. (s.d.). Obtido de Wordpress: https://wordpress.org/plugins/simple-lightbox/
Plugins. (s.d.). Obtido de Wordpress: https://wordpress.org/plugins/so-widgets-bundle/
Plugins. (s.d.). Obtido de Wordpress: https://wordpress.org/plugins/svg-vector-icon-plugin/
Plugins. (s.d.). Obtido de Wordpress: https://wordpress.org/plugins/ml-slider/
Plugins. (s.d.). Obtido de Wordpress: Plugins
Plugins. (s.d.). Obtido de Wordpress: https://wordpress.org/plugins/simple-custom-css/
Recommended