ESAN Digital · Web viewCarla Sofia Ventura Loureiro Oliveira de Azeméis, Julho de 2016 Author Carla loureiro Created Date 01/08/2016 17:25:00 Title ESAN Digital Subject Prova de

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

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

2

ESAN Digital


Carla loureiro

Dedicatória

3

ESAN Digital


Carla loureiro

Resumo

4

ESAN Digital


Carla loureiro

Agradecimentos

5

ESAN Digital


Carla loureiro

ÍndiceDEDICATÓRIA...................................................................................................................................... 3

RESUMO............................................................................................................................................. 4

AGRADECIMENTOS............................................................................................................................. 5

INTRODUÇÃO...................................................................................................................................... 8

1. HARDWARE E SOFTWARE UTILIZADO..........................................................................................9

2. CRIAÇÃO DO BLOG.................................................................................................................... 10

2.1 ESCOLHA DO TEMA..............................................................................................................................102.2 CÓDIGO DO SITE..................................................................................................................................112.3 ESTRUTURA DO SITE.............................................................................................................................12

2.3.1 Menu Horizontal......................................................................................................................122.4 PÁGINAS DO SITE.................................................................................................................................13

2.4.1 Página Principal.......................................................................................................................132.4.2 ESAN........................................................................................................................................152.4.3 Disciplinas................................................................................................................................182.4.4 Contactos.................................................................................................................................212.4.5 Portefólio ESAN-UA..................................................................................................................27

2.5 PLUGINS............................................................................................................................................282.5.1 Black Studio.............................................................................................................................282.5.2 Meta slider...............................................................................................................................282.5.3 Page Builder by SiteOrigin.......................................................................................................292.5.4 Simple Custom CSS...................................................................................................................292.5.5 Social Media Buttons Toolbar..................................................................................................292.5.6 WP SVG Icons...........................................................................................................................302.5.7 SiteOrigin Widget Bundle.........................................................................................................302.5.8 WP-Cufón.................................................................................................................................30

2.6 ALOJAR O BLOG NO SERVIDOR DA ESAN......................................................................................31

2.6.1 Acesso ao servidor...................................................................................................................312.6.2. Download e Instalação...........................................................................................................312.6.3 Acesso ao servidor por FTP......................................................................................................322.6.4 Exportação e Importação.........................................................................................................332.6.5 Upload de imagens..................................................................................................................35

3. PLANTA 3D................................................................................................................................ 35

3.1 MODELAÇÃO......................................................................................................................................353.1.1 Caixote do lixo – Entrada.........................................................................................................353.1.2 Mesa de Panfletos-Entrada.....................................................................................................363.1.3 Quiosque..................................................................................................................................403.1.4 Projetor – Partes......................................................................................................................403.1.5 Cadeiras da Entrada -Partes....................................................................................................403.1.6 Extintor – Partes......................................................................................................................413.1.7 Objetos Modelados..................................................................................................................42

Entrada:........................................................................................................................................................42Bar:...............................................................................................................................................................43

6

ESAN Digital


Carla loureiro

Sala de Aula:..................................................................................................................................................44

CONCLUSÃO...................................................................................................................................... 45

ANEXOS............................................................................................................................................ 46

Fotos Recolhidas...............................................................................................................................46

BIBLIOGRAFIA................................................................................................................................... 48

7

ESAN Digital


Carla loureiro

IntroduçãoO tema da Prova de Aptidão Profissional (PAP) é “ESAN Digital” que surgiu 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 atividade 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.

A PAP consiste em dois pontos, onde o primeiro é a criação de um blog onde será possível colocar os trabalhos dos alunos online visto que o site oficial não permite fazer alterações. Assim, 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 é a criação de uma planta em três dimensões (3D) que tanto servirá para a localização de uma determinada divisão mas também funcionará como o género de uma visita virtual.

Este projeto foi dividido em duas partes, visto que foi realizado com outro colega. Então, este relatório, relata a parte da criação de todo o site, a parte interior da Escola Superior Aveiro Norte e o cartaz da PAP.

8

ESAN Digital


Carla loureiro

1.Hardware e Software UtilizadoPara este projeto foram utilizados alguns equipamentos e softwares, sendo que a maioria deles foram softwares livres. Para se realizar o projeto do site existiam várias opções como, utilizar a linguagem de programação HyperText Markup Language (HTML), Cascade Styling Sheet (CSS) ou PHP. Outra solução era a utilização de sites de edição web como o Wix ou o WordPress. Para este projeto o que se decidiu utilizar foi o Wordpress uma vez que já tinha sido utilizado durante as aulas.

Para a modelação da escola existiam também algumas opções como o 3D Studio Max, Maya, Autodesk 3D Studio Max, Bender. Analisadas todas as opções optou-se pelo Blender, um software livre e que também tinha sido abordado nas aulas.

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, GNU Image Manipulation Program (GIMP), onde o primeiro é pago e o segundo é livre. Optou-se pela utilização de ambos porque em alguns casos e dependendo do que se queria desenvolver, o mesmo resultado era melhor num programa do que no outro.

9

ESAN Digital


Carla loureiro

2.Criação do Blog2.1 Escolha do temaQuando se iniciou a criação do blog utilizou-se o site “wordpress.com”, e depois de analisar os temas gratuitos que eram disponibilizados escolheu-se o tema Lovecraft.(Imagem 1)

Imagem 1-Primeiro tema escolhido

Mais tarde, depois de já ter sido iniciada a realização do site começou-se a não gostar de trabalhar no tema que se tinha escolhido anteriormente. As cores que eram disponibilizadas não eram apelativas, a personalização era um pouco complexa e limitada, visto que se estava a utilizar o WordPress online e um plano gratuito. Posto isto, ponderou-se e chegou-se à conclusão que a melhor solução seria a alteração do tema. Yoko (Imagem 2) foi o tema escolhido e que além de dar maior liberdade de personalização é muito mais suave e apelativo visualmente.

10

ESAN Digital


Carla loureiro

Imagem 2:Tema escolhido após alteração de tema

À medida que se foi desenvolvendo o site no WordPress.com foi-se percebendo que para realizar um projeto deste tipo não é possível fazê-lo desta maneira. Então, optou-se por criar um espaço num servidor, inicialmente no do Agrupamento de Escolas Soares Basto, e a partir daí começou-se a desenvolver, finalmente, o produto final. Mais uma vez foi alterado o tema do Blog, para o Ultra (imagem 3).

Imagem 3: Tema Final -Ultra

2.2 Código do SiteQuando se estava a realizar verificou-se que todo o menu e os links estavam com a cor azul (Imagem 4), que era a cor por defeito. Para contornar esta situação, foi-se ao código CSS, e alterou-se tudo o que tinha a cor azul para a cor verde (Imagem 5).

11

ESAN Digital


Carla loureiro

Imagem 4: Cor azul - #0896fe Imagem 5: cor verde - #87aa14

Nos links, para se conseguir tirar o sublinhado alterou-se o código que estava para o que está apresentado na imagem 6. As alterações que se realizaram foram, no border bottom, colocou-se o none e alterou-se a cor azul para o verde. (Imagem 6, retângulo verde). Outra das alterações foi a alteração da cor de azul para preto no “color” (Imagem 6, retângulo laranja).

Imagem 6: Código dos links

2.3 Estrutura do Site2.3.1 Menu HorizontalNo fluxograma, está apresentada a estrutura que o menu terá. As páginas principais do menu são a página principal, uma página com o nome ESAN, um menu chamado Disciplinas e por último, a página contactos. Na imagem 7 pode ver-se o aspeto final do menu.

Imagem 7:Menu horizontal

12

ESAN Digital


Carla loureiro

2.4 Páginas do Site2.4.1 Página PrincipalA página principal (imagem 8) é a primeira página do site. Quando se abre no topo há um slideshow com algumas imagens da escola. (imagem 8, retângulo verde e imagem 10). Este slide foi possível realizar através de um plugin chamado “Meta Slider”. O tamanho do banner é o predefinido no tema, o efeito de transição é o fade e o tempo de transição de uma foto para a outra é de 3000 milissegundos. Nas imagens 9 e 10 estão as definições do plugin Meta Slider.

Imagem 8: Página Principal

13

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


Carla loureiro

Imagem 9: Fotos do SlideShow Imagem 10: Definições do SlideShow

A seguir ao SlideShow tem 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-UA. (Imagem 11). Estes ícones já vinham predefinidos no tema, o widget utilizado foi o “SiteOrigin Feature” (imagem 12) e a única alteração que se fez foi a cor, antes era azul, agora é verde (#87aa14) e a imagem, o primeiro é 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 13).

Imagem 11: Circule Ícone

Imagem 12: Widget "SiteOrigin Feature"

14

ESAN Digital


Carla loureiro

Imagem 13: Definições do widget “SiteOrigin Feature”

No fundo da página tem um pequeno texto que explica o que é o site e para que serve. O texto foi escrito no widget “Visual Editor” e o tamanho é o padrão, paragrafo, justificado.

2.4.2 ESAN Mais tarde começou-se por criar a página chamada ESAN (imagem 14), que é uma página onde está um texto, escrito pelo Professor Doutor Martinho Oliveira, diretor da ESAN. Esta é uma página com informação sobre a escola que explica o que é e quais os objetivos.

15

ESAN Digital


Carla loureiro

Imagem 14: Página ESAN

No topo da página está uma imagem que ocupa toda a largura do ecrã e no centro tem o logotipo (Imagem 14, retângulo verde) da escola. Para colocar este logotipo colocou-se a imagem na row pretendida e por cima colocou-se um widget com o nome “SiteOrigin Image“ (imagem 14). O widget tem também uma padding de 50 pixeis (imagem 16).

Imagem 15: Row do logotipo da página ESAN

16

ESAN Digital


Carla loureiro

Imagem 16: Padding do Logotipo

A seguir está o texto e no final da página está um pequena galeria de fotos (em anexo) da escola quer da área exterior, quer da área interior.

Para a galeria, de início, utilizou-se as fotos tiradas com a CANON 100D para experimentar e mais tarde, se for necessário mudar-se-ão. Para as colocar no site, criou-se uma nova row e adicionou-se o widget “Visual Editor” (imagem 17) e nele criou-se uma galeria.

Imagem 17: Row com "Visual Editor"

Para personalizar a galeria foi necessário alterar algumas definições do próprio widget (imagem 18) Além destas alterações, como se colocou uma legenda em cada fotografia, foi necessário ir às definições da galeria para passar alguns dos termos que lá estavam para português (imagem 19).

Imagem 18:Alterações realizadas no Widget "Visual Editor"

17

ESAN Digital


Carla loureiro

Imagem 19:Alteração dos termos por defeito

2.4.3 Disciplinas A página disciplina tem submenus (imagem 20) com as disciplinas já existentes no site, História, Teoria do Design 1 e Teoria do Design 2 e todas as páginas têm a mesma formatação.

Imagem 20: Submenus

No topo tem o título da página que é o nome de cada disciplina e logo a seguir está o ano dos trabalhos (imagem 21, retângulo laranja), para já, como ainda se está a fazer a estrutura do site está o ano de 2015 mas depois será alterado para o ano correto.

Imagem 21:Página de História

Ao lado do ano está uma pequena descrição, e como ainda é a estrutura do site, a descrição é um parágrafo do texto que está na página ESAN. (imagem 21, retângulo verde).

18

ESAN Digital


Carla loureiro

Para criar esta parte foi necessária a criação de uma row que foi dividida em duas partes (imagem 22). Em cada uma das partes foi utilizado o widget “Visual Editor”.

Imagem 22: Tamanho das divisões da row

Na parte que tem o ano foi utilizado o Heading 2 para o tamanho da letra ficar maior (imagem 23), alinhado ao centro.

Imagem 23: Personalização do ano

Na parte da descrição o texto é justificado e foi utilizada o tamanho padrão do parágrafo (imagem 24).

Imagem 24: Personalização da descrição

Logo a seguir tem uma pequena galeria e o que se fez foi o mesmo que se fez na página ESAN. A única diferença é que nestas páginas em vez de ter 9 colunas tem 6 (imagem 25).

19

ESAN Digital


Carla loureiro

Imagem 25: Personalização da galeria

Como esta página é com trabalhos de vários anos, tem uma linha a dividir cada ano por baixo da galeria (imagem 26).

Imagem 26: Galeria com linha a dividir

Para essa linha usou-se o código apresentado em baixo (Imagem 27). Este código faz com que a linha tenha uma largura do tamanho de 95% do “container”, com uma altura de 1 pixel, alinhada ao centro e cor preta.

Imagem 27: Código da linha

Depois desta linha repete-se a mesma situação mas para um outro ano diferente (imagem 28).

20

ESAN Digital


Carla loureiro

Imagem 28: Página "Disciplinas" completa

Todo o processo realizado para a página da disciplina e história, também foi realizado para todas as outras disciplinas, Teoria do Design 1 e Teoria do Design 2 .

2.4.4 ContactosA página contactos é uma página onde está toda a informação relacionada com a localização da escola e onde é possível contactar para esclarecimento de dúvidas ou perguntar informações.

No topo da imagem, no mesmo sítio onde tem o banner (nas outras páginas), está o mapa com a localização da escola (imagem 29).

21

ESAN Digital


Carla loureiro

Imagem 29: Banner com o mapa da localização

Para se realizar esta 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 colocou-se os dados da localização que são “Estrada do Cercal,3720-509 Santiago de Riba-Ul, Oliveira de Azeméis, Portugal”. Definiu-se que o mapa ia ser interativo ou seja, iria dar para fazer zoom, tal como funciona o Google Maps e foi definida uma altura com 250 pixéis. (imagem 31).

Imagem 31: Widget “SiteOrigin Google Mpas” – Definições

A seguir ao banner, estão informações da localização da escola (imagem 31, retângulo verde), informações de contacto, onde se pode encontrar os números de telefone e telemóvel, e os dados para colocar no GPS. Esta parte com as Informações, está numa row, dividida em dois (imagem 32).

22

ESAN Digital


Carla loureiro

Imagem 32:Row com widget “Visual Editor”

O widget utilizado foi o “Visual Editor” e os títulos estão com um Heading 1 e as informações estão com as definições padrão do parágrafo (imagem 33).

Imagem 33: Widget "Visual Editor"

Ao lado das informações apresentadas acima está 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"

O formulário (imagem 34) tem os campos Nome, Email, Assunto e Mensagem.

23

ESAN Digital


Carla loureiro

Imagem 35: Formulário

Quando um email é enviado sem assunto, por defeito, é adicionado “Contacto do blog da ESAN”, para se saber que o email, veio do site (imagem 36). No campo Assunto, na caixa de texto tem a mensagem “Escreva o assunto…” e o tipo de campo é “Subject” (Imagem 40).

Imagem 36: Assunto adicionado por defeito

Cada campo tem as suas definições, na caixa de texto do campo Nome, tem uma mensagem que diz “Escreva o seu nome…” e o tipo de campo é name (imagem 37). No campo Email, a mensagem é “Escreva o seu Email” e o tipo de campo é email (imagem 38) e por fim, no campo Mensagem, a mensagem é “Escreva o corpo da mensagem…” e o tipo de campo é text area (imagem39).

24

ESAN Digital


Carla loureiro

Imagem 37: Campo Nome Imagem 38: Campo Email

Imagem 39: Campo Mensagem Imagem 40: Campo Assunto

Neste formulário não foi utilizado o Captcha porque se achou que não havia necessidade.

No Designer, o container, tem uma cor de fundo branca, um padding de 10 pixeis, um contorno com a cor #87aa14 e uma espessura de 1 pixel. (Imagem 41)

25

ESAN Digital


Carla loureiro

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).

26

ESAN Digital


Carla loureiro

Imagem 43:Desingner do botão

2.4.5 Portefólio ESAN-UAEstá página está na Página inicial e é onde estão todas as disciplinas de cada ano. No topo tem 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 alinhado à esquerda (Imagem 45).

Imagem 45: Personalização do título da página “Portefólio ESAN”

27

ESAN Digital


Carla loureiro

Na zona as disciplinas, abaixo do título, existe uma row dividida em três partes iguais e cada uma corresponde a um ano dos cursos e têm o widget “Visual Editor”. (imagem 45)

Imagem 46: Row com os três anos dos cursos

O título do widget (número do ano), está com um heading 2, alinhado ao centro a negrito (imagem 47). A seguir tem as disciplinas existentes nesse ano com hiperligações para as páginas respetivas. Para colocar as disciplinas mais à direita utilizei código HTML (imagem 48)

Imagem 47: Widget “Visual Editor”

Esta personalização é igual nas três partes.

2.5 PluginsPara personalizar o site foi necessária a utilização de alguns plugins. Alguns dos plugins utilizados são gratuitos, outros não são mas foram utilizados na mesma, pois só se utilizou a parte gratuita.

2.5.1 Black StudioUtilizou-se um plugin chamado “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 sliderO 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. É

28

Imagem 48: Código utilizado nas hiperligações

ESAN Digital


Carla loureiro

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 SiteOriginO plugin “Page Builder by SiteOrigin” torna mais fácil a criação de conteúdo usando os widgets preferidos. O conteúdo vai adaptar- se com precisão para todos os dispositivos móveis. A interface é bastante intuitiva e fácil de aprender, assim é possível criar conteúdo bonito, de forma simples.

Imagem 51: Page Builder

2.5.4 Simple Custom CSSSimple Custom CSS é uma forma fácil de adicionar estilos CSS personalizados que substituem os estilos plugin e do tema predefinido. Este plugin foi planeado para adicionar o próprio CSS para o site.

Imagem 52: Simple Custum CSS

2.5.5 Social Media Buttons ToolbarO 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 à uma linha, em seguida, são colocados em várias linhas. Assim, podem ser dispostos horizontalmente ou verticalmente e sempre centrado. É possivel escolher o tamanho dos ícones e posicionar os botões de link utilizando um widget ou um shortcode.

29

ESAN Digital


Carla loureiro

Imagem 53: Social Media Buttons Toolbar

2.5.6 WP SVG IconsO plugin “WP SVG Icons” (imagem 54) tem mais de 490 ícones incluídos, cria e faz upload de ícones personalizados, inserir ícones diretamente em mensagens, páginas e barras e não é necessário escrever nenhum código.

Imagem 54: WP SVG Icon

2.5.7 SiteOrigin Widget BundleO plugin “SiteOrigin Widget Bundle” 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 55: SiteOrigin Widget Bundle

2.5.8 WP-CufónCom o plugin “WP-Cufón” apenas se tem de converter os arquivos de fontes e enviá-los para o diretório de fontes plugins, depois é só escrever “font-family:” no local onde a fonte vai ser alterada e escrever o nome da fonte.

Imagem 56:WP-Cufón

30

ESAN Digital


Carla loureiro

2.6 Alojar o blog no servidor da ESANComo foi referido anteriormente, enquanto se estava a desenvolver a estrutura do site o mesmo estava alojado no servidor da Escola Secundária Soares Basto. Para o transferir para o site pretendido, o da ESAN, realizaram-se alguns passos.

2.6.1 Acesso ao servidorAntes de se começar a migração propriamente dita, começou-se por ter acesso ao servidor. Para isso foi necessário criar uma conta e assim que foi confirmada concluiu-se a primeira etapa.

2.6.2. Download e InstalaçãoDepois do acesso ao servidor, foi necessário fazer o download do wordpress e a seguir instalá-lo no servidor. A primeira tarefa foi descompactar a pasta do wordpress, copiar os ficheiros descompactados e colá-los na pasta do servidor.

Depois desta tarefa concluída, abriu-se o browser e, na barra de pesquisa, escreveu-se o URL do site (esan.web.ua.pt/blog/wp-admin) e apareceu a mensagem de instalação mais um botão que dizia “Let’s Go” (imagem 57). Pressionou-se o botão e iniciou-se o preenchimento dos campos necessários sendo estes “Data base, username e password (relativos à base de dados), Database host (nome do servidor) e a Table Prefix”. Com este campo todo preenchido pressionou-se o botão que deveria concluiu a primeira parte da instalação, mas ocorreu um erro e por isso não foi concluído nesse momento.

Imagem 57:Primeira mensagem do WordPress

Este erro ocorreu porque a tabela que se definiu ainda não existia e por isso, criou um pequeno conflito. Foi muito 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 era para criar a tabela na base de dados e assim não criar este conflito. Depois apenas se colou o ficheiro na raiz do site (imagem 58).

31

ESAN Digital


Carla loureiro

Imagem 58: Ficheiro PHP na raiz do site

Assim que este ficheiro foi concluído apareceram novos campos para preencher (imagem59) e assim que se preencheram concluiu-se a instalação.

Imagem 59:Novos Campos

2.6.3 Acesso ao servidor por FTPPara ser possível fazer alterações no site sem necessitar da ligação da rede da ESAN, utilizou-se o FireFTP (imagem 60). O FireFTP é 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 60: FireFTP

32

ESAN Digital


Carla loureiro

2.6.4 Exportação e Importação Depois de toda a instalação concluída com sucesso exportou-se o site do servidor anterior para o servidor atual. No painel do wordpress, na ferramenta tools e export, selecionei a opção, exportar todo o conteúdo (imagem 61) e foi exportado um ficheiro .XML.

Imagem 61:Painel WordPress

A seguir, no servidor definitivo, voltou-se a ir à mesma ferramenta (tools) mas, desta vez, ao import e escolheu-se a opção wordpress (imagem 62), pois vamos 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 63) e por isso, foi isso que que fez. Depois de instalar o plugin e de o ativar, voltou-se a fazer o mesmo procedimento (tools->import), mas quando se selecionou o import houve um erro (imagem 64).

Imagem 62: Importar através do WordPress Imagem 63: Plugin WorPress Importer

Imagem 64: Erro ao utilizar o plugin

Este erro está relacionado com as permissões do servidor e por não ter essas permissões não foi possível instalar o plugin pretendido. Posto isto, tentaram-se outros plugins para importar e exportar mas todos deram o mesmo problema.

Depois de realizar alguma pesquisa, encontrou-se uma solução, exportar e importar a base de dados, e não um ficheiro .XML, através do painel do phpmyadmin. Para exportar (imagem 65), apenas foi necessário ir a exportar, colocar a opção personalizado deixar tudo padrão e executar. Automaticamente foi descarregado um ficheiro .sql.

33

ESAN Digital


Carla loureiro

Imagem 65:Exportar através do painel phpmyadmin

Depois de toda a base de dados exportada, abriu-se o phpmyadmin da ESAN e, com a base de dados que se pretende trabalhar selecionada, carregou-se na opção importar (imagem 66) ,

pressionou-se o botão Explorar. A seguir selecionou-se o ficheiro sql, que se exportou antes, e carregou-se em executar.

Imagem 66: Importar a partir do painel phpmyadmin

Após esta ação ocorreu um erro (#1273 - Unknown collation: 'utf8mb4_general_ci) e após uma longa pesquisa, abriu-se o ficheiro .sql (o ficheiro exportado) no Notepad ++ e substituíram-se todas as palavras "utf8mb4" por "utf8”. O que aconteceu foi que o “utf8mb4_unicode_ci” foi substituído para “utf8_unicode_ci”.

A seguir e novamente no painel phpmyadmin foi-se à opção Operações e definiu-se o agrupamento (collation) da base de dados para “utf8_unicode_ci” (imagem 67).

Imagem 67:Definir o agrupamento

Depois destas alterações voltou-se a importar o ficheiro .sql e executou-se a ação que foi executada corretamente.

34

ESAN Digital


Carla loureiro

2.6.5 Upload de imagens Quando se foi verificar se todo o conteúdo tinha sido importado para o servidor, reparou-se que apenas os plugins e o código CSS tinham sido transferidos. Como eram poucas páginas e ainda eram a estrutura, voltou-se a fazê-las mas quando se tentou colocar as imagens apareceu um erro (imagem 68). Este erro está relacionado com as permissões do servidor e por isso foi necessário contactar o responsável. Assim que tive direitos de diretoria já consegui colocar as imagens e concluir toda a migração.

Imagem 68: Erro ao importar imagens

3.Planta 3DComo 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 foi a modelação e materialização dos objetos do interior da escola.

3.1 ModelaçãoNeste capítulo será apresentado apenas uma explicação de alguns dos objetos modelados e algumas fotografias dos objetos 3D a serem comparados com os objetos reais.

3.1.1 Caixote do lixo – EntradaPara o cesto, como base, foi utilizado um cubo que onde se aumento a altura e um pouco a largura. Depois no modo “Edit Mode” selecionou-se a face de cima (topo) e realizou-se um extrude para dentro, para criar o interior do caixote do lixo.

Para criar os furos do cesto, utilizou-se um cilindro que se redimensionou para o tamanho pretendido e posicionou-se no local correto. Assim que estava no local, duplicou-se o cilindro e colocou-se 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, selecionaram-se todos e fez-se o join, para criar apenas um objeto.

Para terminar os furos do caixote, com o cubo selecionado, utilizou-se o modificador “Boolean”, com a opção “Diference”. Na caixa ao lado, selecionou-se os cilindros e aplicou-se o modificador. Os furos ficaram feitos e processo foi repetido para as outras laterais (imagem 69).

35

Carla Loureiro, 29-04-2016,

ESCREVER A COMPARAÇÃO NO FINAL DA PLANTA MODELAÇÃO

ESAN Digital


Carla loureiro

Imagem 69: Cesto

Depois do cesto concluído, modelou-se o suporte. Para o suporte começou-se pela parte de cima e foi utilizado um plano onde se fez um extrude para trás que depois foi inclinado. Depois um extrude vertical para baixo e o mesmo para a frente para fazer a base. Para fazer as partes laterais subdividiu-se a base utilizando a tecla “W” cinco vezes, selecionaram-se as primeiras cinco arestas e fez-se um extrude para cima até à altura pretendida criando uma “parede”. Com a ferramente “Knife” fez-se um click na diagonal desde o topo até à base dessa parede e apagou-se as faces que não interessavam.

No final, selecionou-se as faces dessa parede e fez-se um extrude para o lado para criar espessura. Este processo foi realizado para o outro lado do suporte (imagem 70).

Imagem 70:Suporte do Caixote

3.1.2 Mesa de Panfletos-Entrada

Primeiro foi adicionado um cubo (imagem 71) que redimensionei (imagem 72) até ao tamanho que pretendia.

36

ESAN Digital


Carla loureiro

Imagem 71:Etapa 1 Imagem 72: Etapa 2

A seguir foi adicionado outro cubo (imagem 73). Para fazer o tampo da mesa, redimensionou-se, selecionou-se a aresta da frente e com o atalho “CTRL+B” fez-se um Bevel (imagem 74). Com o scroll e ainda com a aresta selecionada acrescentaram-se arestas (imagem 75). Depois selecionou-se apenas a face de baixo, subiu-se no eixo de z (imagem 76) e com todo o objeto selecionado colocou-se por cima do criado anteriormente (imagem 77). A parte do tampo da mesa está concluída.

Imagem 73:Etapa 3 Imagem 74:Etapa 4

Imagem 75: Etapa 5 Imagem 76:Etapa 6

Imagem 77:Etapa 7

Com a parte de baixo selecionada e no modo “Edit Mode”, selecionou-se apenas uma das faces laterais e subdividiu-se quatro vezes através do atalho da tecla “W” (imagem 78). A seguir selecionaram-se apenas algumas faces de baixo (imagem 79). Com a vista de frente e depois

37

ESAN Digital


Carla loureiro

de carregar na tecla “Z” (imagem 80), fez-se um extrude da tecla“E” e moveu-se no eixo do X (imagem 81).

Imagem 78: Etapa 8 Imagem 79: Etapa 9


Depois disto, ainda ficaram uma faces que não devia estar (imagem 82) por isso, selecionou-se (imagem 83) e apagaram-se ficando como mostra na imagem 84 e 85. O processo realizado anteriormente foi repetido no outro lado do paralelepípedo.



Por fim e para terminar, só faltam as pernas da mesa. Para as pernas foi adicionado um cubo que foi redimensionado (imagem 86 e 87) e posicionado no sítio certo (imagem 88).

38

ESAN Digital


Carla loureiro


Imagem 88: Etapa 18

No modo “Edit Mode”, selecionou-se a ultima face e subdividiu-se em várias faces (imagem 89), selecionou-se as faces em três grupos, juntaram-se e selecionou-se a face do meio (imagem 90).


A seguir fez um extrude no eixo do Z (imagem 91) e apagaram-se as faces que não interessavam (imagem 92).


No modo “Edit Mode” selecionou-se todo o objeto modelado anteriormente, duplicou-se (imagem 93) e colocou-se no sítio certo (imagem 94).

39

ESAN Digital


Carla loureiro

Imagem 93:Etapa 23 Imagem 94:: Etapa 24

3.1.3 Quiosque

3.1.4 Projetor – PartesApresentado a seguir será apresentado as partes do projetor.

Imagem 95: Suporte Imagem 96:Parte que segura o corpo

Imagem 97: Parte que agarra ao suporte Imagem 98: Corpo do Projetor

3.1.5 Cadeiras da Entrada -Partes As partes das cadeiras apresentadas a seguir estão colocadas na entrada.

40

Carla Loureiro, 30-04-2016,

ETAPAS DA MODELAÇÃO DO QUIOSQUE

ESAN Digital


Carla loureiro

Imagem 99: Acentos Imagem 100: Suportes

Imagem 101: Pernas

3.1.6 Extintor – PartesAs partes do extintor estão apresentadas abaixo.

Imagem 102: CorpoImagem 103: Cabo

Imagem 104: Base do Cabo Imagem 105: Bússola

41

ESAN Digital


Carla loureiro

Imagem 106: Parte onde prende o cabo Imagem 107: Topo

sImagem 108: Pega Imagem 109:Base

3.1.7 Objetos ModeladosApresentado a seguir, através de subcapítulos, estarão os objetos modelados por divisões.

42

ESAN Digital


Carla loureiro

Entrada:

Imagem 110:Cadeiras Imagem 111:Quiosque

Imagem 112:Caixote do Lixo Imagem 113:Vaso

43

ESAN Digital


Carla loureiro

Bar:

Imagem 114: Armário-Balcão Imagem 115:Armário - Entrada Imagem 116:Cadeira

Imagem 117:Caixa de Chocolates Imagem 118: Caixa de Pastilhas Imagem 119:Caixa de Guardanapos-Balcão

Imagem 120:Caixa de Guardanapos-Mesas Imagem 121:Caixa de Sugestões Imagem 122:Caixa dos Pastéis

Imagem 123:Candeeiro Imagem 124:Carrinho de Tabuleiros Imagem 125:Frasco das Palhinhas

Imagem 126:Frigorifico Imagem 127:Reciclagem Imagem 128:Caixote do Lixo

Imagem 129:Torradeira Imagem 130:Máquina de Café Imagem 131:Mesa

44

ESAN Digital


Carla loureiro

Imagem 132: Microondas Imagem 133:pLacar dos Gelados Imagem 134Placar das Senhas

Imagem 135:Prato Imagem 136:Relógio Imagem 137:Sensores

Imagem 138:Local dos Talheres/Tabuleiros

Imagem 139:Tabuleiro Imagem 140:Máquina de Tostas Mistas

Imagem 141:Vaso

45

ESAN Digital


Carla loureiro

Sala de Aula:

Imagem 142:Suporte do Apagador Imagem 143:Cadeira Imagem 144:Comando das Costinas

Imagem 145:Cortinas Imagem 146:Lâmpadas Imagem 147:Interruptor 1

Imagem 148: Interruptor 2 Imagem 149:Lixo Imagem 150:Marcador

Imagem 151:Mesa Imagem 152:Projetor Imagem 153:Quadro

Imagem 154:Tela do Projetor

46

ESAN Digital


Carla loureiro

ConclusãoO site está disponível para visualizar em esan.web.ua.pt/blog

47

ESAN Digital


Carla loureiro

ANEXOSFotos Recolhidas

Imagem 155 Imagem 156 Imagem 157



Imagem 164 Imagem 165Imagem 166


48

ESAN Digital


Carla loureiro





49

ESAN Digital


Carla loureiro

Bibliografia8

50

Documents

ESAN Digital · Web viewCarla Sofia Ventura Loureiro Oliveira de Azeméis, Julho de 2016 Author Carla loureiro Created Date 01/08/2016 17:25:00 Title ESAN Digital Subject Prova de