51
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 - carlapap.files.wordpress.com · ESAN Digital Prova de Aptidão Profissional Carla loureiro 2015/2016 3 Dedicatória Dedico este trabalho em especial aos meus pais,

Embed Size (px)

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/