Les dépôts de mobilier

Objetivos

À semelhança do projeto anterior este envolvia também a área da medicina veterinária. Embora semelhante, este projeto era de menor dimensão pois a responsável que sugeriu o projeto, pretendia um sítio web mais simples que o construído anteriormente.

Era pretendido um sítio para ser usado como repositório de imagens, que permitisse a sua apresentação com a respetiva descrição, de modo a permitir a sua ampliação para poderem ser analisadas, visto que estas seriam imagens obtidas através de um microscópio.

O nome do sítio web foi definido pela responsável como Atlas de Histologia Animal. Foi indicado que a Sra. Professora iria criar um logótipo para o sítio web usando

81

algumas fotografias tiradas a partir de um microscópio. Também foi mencionado um exemplo para a estrutura do sítio web, baseado num sítio web já existente, o Virtual Histology Laboratory (Lee, 2013), Figura 72.

Pesquisa

Para a criação deste sítio web foi selecionado o CMS Joomla uma vez que já existia uma maior familiarização com este CMS e o estágio estava na sua reta final, havendo assim um tempo limitado para dedicar a este projeto. Foi então analisada em pormenor o sítio web sugerido pela responsável e, com base na estrutura indicada pela mesma, foi iniciada a pesquisa de um template que permitisse estabelecer esta estrutura e ao mesmo tempo torná-lo apelativo e funcional.

Esta pesquisa foi inicialmente, condicionada pois ainda não tinham sido fornecidas as categorias para inserir nos menus do sítio. Este facto condicionava a escolha de alguns templates, pois nem todos permitem menus muito extensos ou com grande número de itens. Quando as categorias foram fornecidas, apenas foram testados os templates que poderiam incluir um menu lateral muito extenso pois cada menu iria ter em média mais de 10 submenus. Durante esta fase foram aplicados vários templates para que fossem analisados. Alguns dos templates testados são apresentados na Figura 73, Figura 74, Figura 75 e Figura 76.

82

Figura 76 – Teste do layout aplicando o template A. Business ao “Atlas de Histologia Animal”. Figura 73 – Teste do layout aplicando o template BT_Arise ao “Atlas de Histologia Animal”.

Figura 74 – Teste do layout aplicando o template Jp_Default ao “Atlas de Histologia Animal”.

83

O template selecionado, Animal Business (Figura 76), foi alterado para corresponder às necessidades que o sítio tinha relativamente aos menus e à sua estrutura, que teria de ser organizada de modo a conter um menu lateral, uma fotografia e uma descrição, criando assim a necessidade da largura do template ser aumentada.

Desenvolvimento

Após a escolha do template foram iniciadas as alterações das CSS necessárias para que este se adaptasse à estrutura pretendida. As alterações consistiram na:

 Alteração da largura do layout de 960px para 1024px;

 Remoção das ligações às redes sociais que eram apresentadas no canto superior direito do layout;

 Alteração da cor dos menus de azul para cinzento;

 Alteração da largura da área do conteúdo;

 Alteração da tipografia no menu lateral;

 Inserção do logotipo fornecido.

Antes de passar à próxima fase que incluía a inserção das funcionalidades e da informação fornecida, o layout, Figura 77, foi apresentado ao orientador e à responsável para fazerem a sua avaliação.

Nesta reunião concluiu-se em conjunto, que este não era o template mais indicado, pois o menu lateral, devido ao extenso nome das categorias ficava muito largo em relação ao resto do layout. Depois da apresentação de outros templates testados, escolheu-se aquele que oferecia mais garantias de se aproximar do que era pretendido

84

implementar, apesar de serem necessárias ainda algumas alterações nesse template. Assim, o template escolhido foi o Jp-Default (Figura 76). Este apresentava uma estrutura semelhante ao anterior, mas o menu lateral era mais adequado ao pretendido, pois era necessário espaço para um grande número de submenus e também para que cada menu fosse bastante extenso na sua largura.

Este template permitia escolher uma de três cores, verde, laranja e azul. A cor escolhida foi o azul, mas esta tonalidade não era a mais indicada pois era um azul muito intenso e a responsável pretendia uma cor mais escura visto que as fotografias que iriam ser inseridas teriam cores muito intensas e claras, o que não oferecia um bom contraste entre as imagens e o fundo. Por isso, foi mantido o azul do template em alguns elementos do sítio mas noutros foi alterado para a cor pretendida, de maneira a conjugar as duas e também focar a atenção do utilizador em determinados elementos, através da cor. As principais alterações a nível das CSS foram:

 Os cantos superiores do menu principal foram arredondados;

 Cor do gradiente do menu principal para este ficar da mesma cor que a tipografia do logótipo;

 Limites da caixa de pesquisa;

 Cor dos limites do conteúdo;

 Largura do conteúdo e do menu lateral;

 Cor das linhas que separam os menus laterais;

 Margens do menu lateral;

 Tipografia do menu lateral e do conteúdo;

 Tipografia do menu principal.

85

Depois de algumas alterações foi também inserido o logótipo da UTAD no cabeçalho do sítio de uma forma muito semelhante ao layout do Atlas de Anatomia Patológica Veterinária. Após a conclusão das alterações a nível do layout, foi iniciada a fase da inserção e configuração de todas as funcionalidades necessárias para o sítio web. Iniciou-se então uma pesquisa sobre a melhor forma de inserir imagens que poderiam ser vistas em tamanho maior ao serem selecionadas, facilitando assim a visualização das mesmas. Ao fim de algumas tentativas falhadas, devido aos testes de plug-ins que não cumpriam os requisitos, a solução encontrada foi o plug-in Multithumb. Este plug-in permite inserir imagens de qualquer tamanho, que são redimensionadas para um tamanho especificado, que ao serem selecionadas, abrem a mesma imagem com um tamanho superior, que também poderia ser especificado. Deste modo poderiam ser apresentadas todas as imagens com o mesmo tamanho e seriam ampliadas todas da mesma forma, permitindo a sua análise e observação.

Relativamente ao plug-in instalado existiram ainda alguns problemas, pois quando instalado e configurado, ele é aplicado a todas as imagens inseridas no sítio web. Sendo assim, existiram imagens que foram inseridas, às quais não seria pretendido aplicar o plug- in e que foram ampliadas não sendo possível redimensioná-las.

Para resolver esta questão foi necessário perceber melhor o funcionamento do plug-in e saber como seria possível aplicá-lo em determinadas áreas do sítio.

Depois de explorar as configurações concluiu-se que poderia ser selecionada uma tag para evitar que o plug-in fosse aplicado a certas imagens. Esta tag, (nonmultithumb), ao ser aplicada antes da inserção da imagem pretendida evitava que esta fosse redimensionada e que, ao selecioná-la, esta fosse ampliada, podendo a imagem ser

86

configurada como qualquer imagem inserida num artigo do Joomla. O resultado pode ser visto na Figura 79.

Finalizadas as tarefas solicitadas foi feito o upload da página para o servidor fornecido e instalado o Site Lock para este não ser visível, até à sua conclusão. Para a inserção de imagens ser efetuada pelo responsável do projeto, foi necessária a criação de um tutorial. Neste tutorial ficou descrito como aceder ao back end, criar um artigo, um menu e como se inseria a informação num novo artigo ou num artigo já existente.

Resumo

Este projeto resultou numa sítio web funcional, simples e que serve para consulta dos alunos e docentes da UTAD, assim como num tutorial para a responsável poder alterar a informação quando achar conveniente. Embora o sítio web fosse semelhante ao projeto anterior, teve particularidades e desafios diferentes, pois os seus objetivos também não eram os mesmos. A estrutura da página está pronta e a inserção de informação está a ser feita pela responsável.

Neste capítulo foram descritas as várias fases de cada projeto realizado no estágio do LAVM. Embora os métodos de abordagem fossem semelhantes em todos os projetos, não foram sempre iguais pois estes diferiam nos seus objetivos, área de trabalho, etc., permitindo também assim a aplicação de diferentes metodologias, ferramentas de desenvolvimento e métodos de trabalho. Para além disso, foi possível perceber todas as fases de desenvolvimento de um produto e dos desafios que cada fase apresenta.

87

4. Conclusão e reflexões

O estágio curricular no LAVM realizado ao longo deste ano alterou a perceção anterior sobre o trabalho na área da multimédia. Durante a licenciatura em Comunicação e Multimédia foram abordadas áreas como a fotografia, a modelação 3D, o design, a programação, entre outras mas a área que se tornou a preferida foi a do design. Sendo a componente prática a mais atrativa para o segundo ano do Mestrado em Comunicação e Multimédia, foi feito um esforço para seguir esse caminho e mesmo havendo algum receio quando foi sugerida a realização deste estágio, pois a informação disponível dizia que iriam ser realizados vários projetos na área da multimédia, mesmo aquelas em que os conhecimentos não estavam tão desenvolvidos, a vontade de aprender falou mais forte e a vontade para trabalhar estava presente para enfrentar este novo desafio.

Durante o estágio os projetos foram predominantemente na área do desenvolvimento de sítios web e embora os conhecimentos nesta área não fossem muitos, o espírito autodidata ajudou a superar novos problemas e a aprendizagem nesta área. Mesmo tendo sido construídos quatro sítios web, cada um deles foi um desafio diferente e permitiu o desenvolvimento de competências distintas visto que cada um deles possuía objetivos e funções diferentes.

Os projetos permitiram também ter uma ideia do que normalmente é pretendido de um sítio web e das suas principais funcionalidades, como formulários de contacto, geolocalização, galerias de fotos, etc. Estes projetos foram desenvolvidos através da autoaprendizagem do CMS Joomla e de outras ferramentas necessárias para a criação das páginas como o Filezilla, o Adobe Dreamweaver®, etc..

Sendo os projetos diferentes também a abordagem realizada variou, permitindo assim a aprendizagem de novas áreas, assim como uma melhor perceção dos requisitos que normalmente são solicitados num sítio web. Alguns dos sítios web criados nesta área ganharam grande visibilidade e popularidade, podendo assim concluir que o produto final tem qualidade e é apreciado pelos utilizadores.

Tendo sido a área principal o web design, houve também projetos na área do design gráfico, embora estas duas áreas se juntassem muitas vezes para a criação de layouts. No design gráfico, embora fossem realizados dois projetos, estes foram muito

88

úteis para a criação de métodos de trabalho, desenvolvimento de metodologias e da criatividade.

Para além do trabalho desenvolvido nestas áreas foi também possível aprofundar a aprendizagem nos softwares de edição de imagem, Adobe Photoshop® e Adobe Illustrator®.

No geral, todos os projetos tiveram um resultado aceite pelos responsáveis, mas houve alguns que criaram mais dificuldades no seu desenvolvimento que outros. Embora em muitos deles as dificuldades fossem apenas relativamente aos aspetos técnicos, houve outros em que as dificuldades foram causadas pelas constantes alterações feitas pelos responsáveis relativamente às características dos projetos e as suas funcionalidades finais. Este fator, foi determinante para desenvolver competências relativas ao tratamento dos pedidos dos responsáveis e também nas competências pessoais e de relacionamento durante o estágio.

Para além das competências acima enunciadas o trabalho foi realizado sempre com objetivos e prazos de entrega definidos para se assemelhar ao mundo do trabalho, criando assim experiência de trabalho que é cada vez mais valorizada no mercado laboral. De todos os projetos, destaca-se o sítio web “Atlas de Anatomia Patológica Veterinária”, pois para além de ser um dos projetos de maior dimensão foi também o que teve mais visibilidade, devido às várias notícias publicadas em órgãos de comunicação social acerca do mesmo. Foi também um projeto muito gratificante devido a todo o apoio da responsável do projeto, mas também porque permitiu a promoção da UTAD e também de todo o trabalho realizado durante o estágio.

Para finalizar, este estágio permitiu o crescimento pessoal e o amadurecimento de mentalidades e conhecimentos, que foram possíveis devido aos contantes desafios propostos pelos orientadores.

89

Referências Bibliográficas

Açores, P. N. d. (2011). Retrieved 08 de Julho de 2013, from http://parquesnaturais.azores.gov.pt/pt/

Adobe Systems. (2013a). Adobe Creative Cloud - Dreamweaver CC. Retrieved 03-10- 2013, from http://www.adobe.com/pt/products/dreamweaver.html

Adobe Systems. (2013b). Adobe Creative Cloud - Illustrator CC. Retrieved 03-10-2013, from http://www.adobe.com/pt/products/illustrator.html

Adobe Systems. (2013c). Photoshop.com. Retrieved 03-10-2013, from http://www.photoshop.com/

Ambrose, G., & Harris, P. (2009). The Fundamentals of Graphic Design: AVA Publishing SA. Ambrose, G., & Harris, P. (2010). Basics Design 08 - Design Th!nking: AVA Publishing SA. ANDDEMOT. (2012). Associação Nacional de Desporto para Deficientes Motores.

Retrieved 08 de Julho de 2013, from http://www.anddemot.org.pt/

ANDDUIS. (2011). Associação Nacional de Desporto para Deficientes Visuais. Retrieved 08 de Julho de 2013, from http://www.anddvis.org.pt/

ANDST. (2006). Associação Nacional dos Deficientes Sinistrados no Trabalho. Retrieved 08 de Julho de 2013, from http://www.andst.pt/www/

Apache Software Foundation, T. (2012). Apache HTTP Server Project. Retrieved 03-10- 2013, from http://httpd.apache.org/ABOUT_APACHE.html

Bourbon, R. (2013). WampServer. Retrieved 03-10-2013, from http://www.wampserver.com/en/

Brazell, A. (2010). Wordpress Bible: Wiley Publishing, Inc.

Buytaert, D. (2013). Drupal CMS Benefits. Retrieved 02-10-2013, from https://drupal.org/features

Carril, M. (2012). HTML - Passo a Passo.

Costello, V. (2012). Multimedia Foundations: Elsevier.

Design, V. c. (2007). Vinhos com Design - O rotúlo é a primeira sensação que um vinho tem para oferecer. Retrieved 10 de Julho de 2013, from http://vinhoscomdesign.blogspot.pt/

90

Duckett, J. (2008). Beginning Web Programming with HTML, XHTML, and CSS, Second Edition: Wiley Publishing, Inc.

Faud-Luke, A. (2009). Design Activism: Earthscan.

Gill, B. (2003). Graphic Design as a Second Language: The Images Publishing Group Pty Ltd.

Hauschildt, S. (2010). CMS Made Simple 1.6: Packt Publishing.

Humbert, M. (2009). Designer Daily. Retrieved 10 de Julho de 2013, from http://www.designer-daily.com/25-brilliant-wine-label-bottle-package-designs- 1808

Internet, C. (2011). Criadesignblog. Retrieved 10 de Julho de 2013, from http://www.criadesignblog.com/tag/r%C3%B3tulos+de+vinho

Landa, R. (2011). Graphic Design Solutions: Wadsworth.

Lawson, B. (2005). How Designers Think - The design process demystified: Elsevier. Leary, S. (2010). Beginning Wordpress 3: Apress.

Lee, L. M. (2013). Virtual Histology Laboratory. Retrieved 18 de Julho de 2013, from http://histology.osumc.edu/histology/HumanHisto/index.htm

Lupton, E. (2011). Graphic Design Thinking: Beyond Brainstorming: Princeton Architectural Press.

Marriot , J. W., Elin. (2011). The Official Joomla Book: Pearsons Education, inc.

Mattar, H. (2010). Bebericando - Sobre vinhos e outras bebidas. Retrieved 10 de Julho de 2013, from http://www.bebericando.com.br/2011/08/30/15-rotulos-de-vinho- muito-criativos/

Papanek, V. (1984). Design for the Real World: Academy Chicago.

Peleteiro, M. d. C. P., Mário ; Carvalho, João Sacadura. (2001). Atlas de Anatomia Patológica Veterinária. Retrieved 16 de Julho de 2013, from http://atlas.fmv.utl.pt/atlas/intro_geral.htm

Peneda-Gerês, A. (2012). Retrieved 08 de Julho de 2013, from http://www.adere- pg.pt/index.php

Pitt, C. (2012). Pro PHP MVC: Apress.

Rackspace, U. I. (2013). CMS Comparison: Drupal, Joomla and Wordpres. Retrieved 18- 10-2013, from http://www.rackspace.com/knowledge_center/article/cms- comparison-drupal-joomla-and-wordpress

91

Ric Shreves, B. D. (2011). Drupal 7 Bible: Wiley Publishin, Inc.

Savage, T. M., & Vogel, K. E. (2013). An Introduction to digital Multimedia: Jones & Bartlett Publishers.

Shreves, R. (2010). Joomla! Bible: Wiley Publishing, Inc.

Textures, F. S. (2010). Free Stock Textures. Retrieved 28-10-2013, from http://freestocktextures.com/texture/category/2/20

Tobypitman.com. (2008). Jquery style menu with CSS3. Retrieved 08 de Julho de 2013, from http://www.tobypitman.com/jquery-style-menu-with-css3/

TYPO3. (2013). FileZilla Features. Retrieved 03-10-2013, from https://filezilla- project.org/client_features.php

W3C. (2011). HTML. Retrieved 29-10-2013, from

http://www.w3.org/community/webed/wiki/HTML

WebUrbanist. (2006). Web Urbanist. Retrieved 10 de Julho de 2013, from http://weburbanist.com/2009/04/09/61-exceptionally-creative-wine-label- designs/