Um dos principais objetivos era aprofundar os conhecimentos na área do web design, nomeadamente na criação de websites. A realização do estágio, proporcionou a realização desse objetivo. Durante o estágio na empresa, realizaram-se dois websites, um deles para uma instituição sem fins lucrativos, que foi o Centro Cultural da Guarda (Anexo VI), e por fim, nas duas últimas semanas de estágio, a seguradora Seguros Guarda (Anexo VI). Este último projeto, destinou-se à elaboração de um website que tem como principal objetivo a disponibilização de informações acerca da seguradora; dar a conhecer a toda comunidade não só do distrito da Guarda mas também de todo o país todos os seus serviços relativos a seguros do ramo vida e não-vida. A principal intenção da realização deste website, é apresentar a seguradora como instituição, divulgar a missão, valores e apresentar todos os serviços (seguros ramo vida e não vida), bem como qualquer tipo de participação social ou ambiental e questões mais frequentes por parte dos clientes. O website tem como principal publico-alvo, toda comunidade distrital da Guarda ou qualquer público que se interesse por segurança ou em seguros no geral. As principais caraterísticas deste público-alvo são: interesse sobre informação atualizada, informação sobre tipos de seguros e informações sobre a seguradora. O website será de cariz “limpo”, apresentação agradável, clara, simples mas objetiva.
O conteúdo de um website é um passo bastante importante e fulcral para a sua construção.
35
“É fundamental construir todo o conteúdo do sítio web após haver um plano claro para o objeto em estudo. Deste modo, terá que se saber qual será o conteúdo a disponibilizar e em que lugares vai ser colocado. Uma das frases que anda à volta do mundo Web é: o conteúdo é o rei” (Rodriguez, 2008).
Para a criação do projeto website concretizado durante o estágio, teve-se por base a estratégia e fundamentos de Santos (2009), que trata de projetos web design; essa estratégia distribui-se em três etapas, sendo elas:
A primeira é a conceção, que pretende identificar o conteúdo e as informações que o website deverá conter, “envolver”; as funcionalidades a implementar; a informação a processar bem como as restrições existentes;
A segunda etapa é a implementação, cujo objetivo é identificar o processo de produção e construção do website. São definidas e produzidas as estruturas de dados, testes, bem como o alojamento e compra de domínio. A este ponto, o
website, está pronto e funcional;
Por último a manutenção, que envolve todas as modificações que tenham sido feitas posteriormente à aceitação do website por parte do cliente, modificações estas tais como melhorias ou novas funcionalidades, correção de erros, ou introdução de novos conteúdos.
As etapas anteriormente mencionadas, podem-se dividir em sete tarefas:
Planeamento: é o aglomerar de ideias ou temas, bem como reconhecimento das necessidades gerais do website;
Análise: é o reconhecimento detalhado de todas as funções do website, que engloba a pesquisa, bem como a classificação de matérias, para assim compreender que informação será colocada e onde;
Desenho: desenho da navegação do website, através de wireframes, esquema do protótipo para que haja uma ideia do website final;
Desenvolvimento: programação, execução e produção dos conteúdos;
Teste: verificação intensiva de todas as funcionalidades do website com o intuito de alcançar a aceitação do utilizador;
36
Domínio/Alojamento: dispor o website numa rede, para ser disponibilizado ao utilizador final;
Manutenção: todas as modificações que tenham sido feitas posteriormente à aceitação do website.
Os websites para ambos os clientes, tiveram como base para a sua construção, as etapas e fases referidas acima.
2.4.3.1 – Conceção (Planeamento, Análise e Desenho)
A criação dos websites dos clientes (Centro cultural da Guarda e Seguros Guarda) decorreram de seguinte modo:
Planeamento: Antes de se passar à construção de um website, é necessário fazer um
planeamento, isto é, recolher o máximo de informações ou conteúdos que vão determinar alguns aspetos do website final; como tal, foi realizada uma reunião com os clientes, e vários contatos através de correio eletrónico, para assim se conseguir recolher o máximo de informações possíveis, de maneira a realizar um projeto, que fosse ao encontro das necessidades do cliente. Foi fornecida, pelo cliente e empresa acolhedora de estágio, toda a liberdade a nível criativo, desde que fosse aplicada a regra dos três cliques, isto é, o utilizador final, não deverá exceder mais de três cliques para encontrar a informação que procura, evitando assim que o utilizador se aborreça na procura, o que o leva ao abandono do website.
Análise: Durante este período, foi também pedido por parte do Rui Abreu, que efetuasse
uma pesquisa em relação a websites da concorrência dos clientes, para assim haver uma melhor perceção do tipo de conteúdo e disposição do mesmo. Após a pesquisa estar finalizada, e as necessidades do cliente estarem estudadas, as informações que foram refletidas e propostas ao cliente (Seguros Guarda) foram as seguintes:
Na página Início determinou-se que, iria conter um slideshow interativo, com texto e imagens relacionadas a alguns serviços da empresa; a página iria conter também informações da missão, visão e valores da seguradora, com imagens alusivas a estes
37
temas; nesta mesma página iria ter também um texto com ligação para outra página onde nesta seriam mostradas as perguntas mais frequentes relativas a seguros no geral e a segurança;
A página Seguros Guarda iria conter informações relativas à seguradora, seria feita uma apresentação da empresa, seriam exibidas diversas informações acerca da mesma, bem como a sua história;
Foi decidido também juntamente com o sócio Rui Abreu, que o website deveria conter duas páginas relativas aos serviços da seguradora, uma página iria conter todo tipo de seguros para empresas e outra todo tipo de seguros para particulares;
Juntamente com o cliente, e o sócio Rui Abreu, foi decidido que o website, iria conter uma página que serviria exclusivamente para possíveis clientes fazerem um pedido de simulação de um determinado seguro;
Por fim, o website, teria de conter uma página de contatos da seguradora, nesta página para além dos contatos, seria possível também a possíveis clientes, enviar uma mensagem via e-mail diretamente do website; nesta página estaria apresentado um mapa do Google Maps, que ilustra a morada onde a seguradora se situa na cidade da Guarda;
Posto isto, posteriormente, foi realizada a estrutura de navegação do website (Figura 5), nesta é possível observar a navegação, onde é possível determinar as páginas do website, e a ligação entre elas. O menu principal é disposto do seguinte modo: Inicio, Seguros Guarda, Seguros Empresas, Seguros Particular, Pedido de simulação, Contatos.
Figura 5- Estrutura principal de navegação website Seguros Guarda Fonte: Elaborada pelo autor.
38
Em conjunto com o cliente, foi definido o conteúdo que cada página deveria conter, a estrutura principal do website iria ter seis páginas.
Desenho: O cliente desejava um website de cariz “limpo”, de boa apresentação, clara,
simples, objetiva, com fácil interação e boa usabilidade. Posto isto, a plataforma que foi utilizada foi o Drupal, pois é nesta plataforma que a WebIQ produz todos os websites, dos clientes.
A página “Início”, no cabeçalho contem o número telefónico da mediadora bem como uma área de pesquisa onde o utilizador pode procurar conteúdos no website, através de palavras-chave. Contém um slideshow interativo de imagens, estas com ligações para os serviços (Seguros). Todas as imagens do slideshow têm dimensão de mil novecentos e vinte pixéis por seiscentos e quarenta pixéis (1920px x 640px). Ao longo desta página irão aparecer três imagens em miniatura arredondadas, acompanhadas de um texto introdutório sobre a missão, visão e valores da seguradora, abaixo de cada texto referido foi implementado um botão com ligação para cada página referente à missão, visão e valores. Abaixo desta área, haverá uma zona que irá ter um texto alusivo a quaisquer dúvidas ou perguntas frequentes relativas a seguros ou segurança em geral, na qual haverá um símbolo gráfico com a letra “i” da palavra informação, este símbolo detém uma hiperligação para outra página do website, onde serão apresentadas as informações e questões mais frequentes. Por fim, no rodapé da página irão constar alguns contatos da empresa, bem como, o nome da mediadora e o ramo de seguros que a mesma pratica. Ainda no rodapé, do lado direito da página, haverá uma hiperligação para o facebook da própria seguradora. De referir, que tanto o cabeçalho como o rodapé, irão ser sempre apresentados em todas as outras páginas do website.
Na página “Seguros Guarda” são exibidas informações relativas à seguradora e as suas ideologias, no fundo, um pouco sobre a seguradora Seguros Guarda.
Relativamente às páginas “Seguros Empresas” e “Seguros Particular”, estes são os serviços que a seguradora presta aos seus clientes, cada página irá conter informações relativas a seguros ramo vida e não vida.
Na página “Pedido de Simulação”, irá ser apresentado, um formulário com diversos campos a preencher pelo cliente, com o objetivo de fazer um pedido de simulação de um
39
determinado seguro. Este formulário será enviado diretamente para o e-mail da seguradora, sendo assim notificada com o pedido de simulação de um possível cliente.
Por último, na página “Contatos”, serão apresentados os contatos da seguradora, bem como um mapa com a localização da mesma e um formulário de envio de mensagem que irá diretamente para o e-mail da seguradora.
Figura 6- Wireframe da página Início Figura 7- Website Seguros Guarda
2.4.3.2– Implementação (Desenvolvimento, Testes e Alojamento)
Desenvolvimento: Na execução desta etapa de desenvolvimento do website, recorreu-se
a tecnologias, como HTML, e a folhas de estilo CSS. Ao utilizar estas tecnologias é possível modificar e alterar todo o website. Para fazer a manipulação, utilizou-se uma plataforma on-line chamada codeanywhere7.
Nesta etapa de produção do website, foi começada a criação e disposição do menu principal e das respetivas páginas; definição das cores utilizadas em todo website, bem como a instalação de módulos (plugins/widjets) que seriam necessários em algumas páginas do website, tendo como finalidade satisfazer as necessidades do cliente e assim obter o resultado final com sucesso (Figura 9, Pág. 39).
7 Codeanywhere é uma plataforma dedicada a profissionais de desenvolvimento web, tendo especial foco como editor
de web. Consultado em, 20/Março, 2015 em https://www.codeanywhere.com/
40
Na página “Ínicio”, foi inserido um slideshow interativo (Figura 8), para tal foi instalado também um módulo, que permitisse inserir a imagem no slide, bem como um título na mesma, este era acompanhado de um botão com uma hiperligação para a devida página e setas direcionais para mudar de slide.
Figura 8- Exemplo Slideshow página Inicio
Nas páginas “Pedido de Simulação” e “Contatos”, foram também adicionados módulos, que são utilizados no desenvolvimento de formulários mais precisamente nos formulários de pedido de simulação (Figura 10, Pág. 41) e de contatos (Figura 9, Pág. 41), nestes o possível cliente ou interessado em qualquer dúvida, poderia enviar um e-mail a partir do
website para a Seguros Guarda, assim a mediadora receberia na sua caixa de entrada do e- mail toda a “correspondência” relativa a pedidos de simulação de qualquer tipo de seguro, e
todo tipo de mensagem ou dúvida. Por sua vez, ainda na página de contatos, para além de ser possível visualizar todos os contatos da empresa e enviar uma mensagem, foi adicionado outro módulo que seria utilizado para a amostragem do mapa, onde este indicaria a morada e sinalizava a empresa no mapa.
41 Figura 9- Formulario de contato e mapa Figura 10- Formulário pedido simulação
Para além do slideshow interativo que aparece na página inicial, foram adicionados em todas as outras páginas do website banners estáticos (Figura 11). Este é posicionado na zona a seguir ao cabeçalho, abaixo do menu principal, e segue o padrão de cores da identidade corporativa gráfica, tendo assim uma maior coerência nas cores utilizadas, também o website segue o mesmo padrão de cores da marca. Os elementos que constituem estes banners são três formas geométricas, bem como numa das estremidades uma imagem que esteja relacionada com o tema tratado naquela precisa página.
Figura 11-Exemplo de banner estático da página Contatos
Todas as imagens utilizadas no slideshow da página início e nos banners das restantes páginas do website, foram sujeitas a manipulação e tratamento de imagem, para tal foram
Fonte: Criada pelo autor
42
utilizados softwares de edição de imagem, mais precisamente o Adobe Photoshop8, para a manipulação de imagens e o Adobe Lightroom9 para todo tratamento de imagem, já a criação dos elementos gráficos foi desenvolvida no Adobe Illustrator.
Relativamente às páginas dos “Seguros Empresas” e “Seguros Particular”, foi criada uma galeria que posiciona todos os tipos de seguros disponíveis. A amostragem do tipo de seguro aparece em forma de imagem em miniatura, sendo esta imagem sempre de acordo com o seguro em causa, criando assim uma melhor relação com o título (tipo de seguro) e a imagem de fundo. Na miniatura é mostrado o tipo de seguro, (automóvel, acidentes de trabalho, saúde, entre outros), bem como um texto introdutório que é relativo a cada categoria de seguro, e um botão com uma hiperligação para outra página onde, nesta, serão listados todos os seguros existentes dentro daquela categoria de seguro. Ainda na miniatura, ao passar o cursor por cima desta, o título e texto introdutório, bem como um elemento gráfico, movimentam-se ao longo da miniatura, criando assim mais interatividade no
website, e ficando visualmente mais agradável. (Figura 12)
Figura 12-Amostragem tipos de seguros da página seguros empresas
8 Adobe Photoshop - Consultado em 21/Março, 2015 em http://www.adobe.com/pt/products/photoshop.html 9 Adobe Lightroom - Consultado em 22/Março, 2015 em http://www.adobe.com/pt/products/photoshop-
lightroom.html
43
Todas as imagens utilizadas no website, foram retiradas da base de dados de imagens / fotografias, que a WebIQ, disponibiliza para a produção dos seus serviços e produtos.
Teste e Alojamento: Posteriormente, o website foi submetido a testes por parte do Rui
Abreu, Jéssica Marques e o cliente, com o objetivo de verificar se todos os parâmetros exigidos pelo cliente estavam em conformidade com o planeamento do website, bem como com o intuito de observar se todos os objetivos das etapas anteriores, tinham sido cumpridos e verificar se o resultado final era de fácil utilização.
Depois da aprovação dos sócios e do cliente, foi realizado o upload, dos ficheiros para os servidores da WebIQ, uma vez que o alojamento seria nos servidores da empresa, que também tem como serviço o alojamento de plataformas web. Contudo o website ainda se encontra em manutenção, pois apesar da aprovação e a enorme satisfaçam do cliente, este não conseguiu fornecer o conteúdo para algumas páginas, nomeadamente a página de apresentação (Seguros Guarda) e de todos os seguros que a empresa dispõe (Seguros Empresas e Seguros Particular), estas páginas embora tenham sido criadas, somente estão apresentados as categorias de seguros que a seguradora comercializa, mas não os seguros em si.
Ao longo do estágio o primeiro website que foi realizado foi do Centro Cultural da Guarda (Anexo VI), este website, tal como a Seguros Guarda, foi criado seguindo a metodologia referida no Ponto 2.4.3. Este, ainda não se encontra on-line, devido a falta de alguma documentação, informação e fraca qualidade no que toca a imagens / fotografias, prejudicando assim a instituição. Embora este seja um projeto de cariz de responsabilidade social, os promotores da WebIQ, decidiram “congelar” o projeto até terem condições para o concluir.