Casas do prior é uma instituição de alojamento situada em Trevões, Viseu, foi pedido à empresa que se realiza-se um website para a instituição em causa.
O cliente solicitou que este website contivesse as mesmas características que um
website de um hotel, ou seja, que existisse uma forma de os clientes puderem efetuar o check-in/check-out e que o responsável pela instituição recebesse a correspondente
notificação, o website também deveria conter informação sobre a instituição, como também uma biblioteca multimédia sobre a mesma.
2.7.1 – Conceção (Planeamento, Análise e Desenho)
A criação de todos os websites desenvolvidos durante o estágio curricular decorreram do seguinte modo:
Planeamento – Antes de passar à construção do website, é necessário efetuar um
planeamento, ou seja, reunir o máximo de conteúdos ou informações que vão influenciar determinados aspetos e comportamentos do website final, foram respondidas várias questões, mencionadas no ponto (2.51):
1. Qual o propósito da empresa?
A empresa Casas do Prior tem como objetivo fornecer alojamento rural aos seus clientes, oferecendo assim a tranquilidade e isolamento e conforto aos seus clientes.
2. Qual a intenção da existência do website?
O website Casas do Prior tem a intenção de transmitir aos seus utilizadores a localização e os contactos da instituição como também disponibilizar uma biblioteca multimédia da mesma e ao mesmo tempo facilitar o método de reserva para os seus clientes.
28
3. Quais os objetivos principais?
O principal objetivo das Casas do Prior é de despertar o interesse dos seus utilizadores em efetuarem uma reserva na instituição, recorrendo a vários elementos visuais para despertar esse interesse.
4. Qual o público-alvo?
O público-alvo da instituição Casas do Prior engloba indivíduos na faixa etária entre os vinte cinco e sessenta anos de idade.
5. Quais as principais características do público-alvo?
As características do público-alvo podem variar de pessoa para pessoa, mas a instituição aponta para pessoas que têm necessidade de procurar tranquilidade e conforto para a sua estadia, a instituição também oferece disponibilidade a alojar crianças, expandindo assim o seu público-alvo não só para casais mas também para famílias.
6. Que informação disponibilizar?
As informações a disponibilizar no website serão apenas as necessárias, tais como: uma biblioteca de imagens, todos os contactos da instituição, o número de quartos disponíveis para alugar, como também as características de cada um deles e ser possível de verificar no website se esse quartos estão disponíveis na data que os utilizadores desejam efetuar a sua reserva.
Análise – Durante esta fase foi sugerido pelo supervisor na organização, Bruno
Esteves, que realiza-se uma breve pesquisa de websites já existentes nesta área de forma a ter uma base inicial como exemplo, após essa pesquisa ter sido realizada, as informações que foram obtidas, foram refletidas e de seguida propostas ao cliente (Casas do Prior) foram as seguintes:
Foi decidido juntamente com o cliente e com a colaboradora Susana Esteves que o menu seria constituído com apenas um nível, pelo facto de não haver necessidade para mais, visto que a homepage disponibiliza muita informação importante, seguindo esta decisão foi construído então o modelo do menu
29
principal (Figura 8 e Anexo II), disposto do seguinte modo: “home”, “quartos”, “galeria”, “booking.com”, “sobre nós”, “pontos de interesse” e “contactos”.
Figura 8 - Estrutura Principal de navegação website Casas Do Prior Fonte: Estagiário
Desenho – O cliente desejava um website com um design “limpo”, de boa
apresentação, objetivo, simples com boa usabilidade e com fácil interação. Posto isto, a plataforma CMS que foi utilizada foi o wordpress, pois é nesta plataforma que a
StudioBox constrói todos os seus websites, dos clientes.
No cabeçalho da homepage é apresentada a morada por extenso e um plugin pedido por parte do cliente para traduzir o website para todas as línguas utilizadas na web, como também uma ligação para o facebook da entidade. A secção número um é constituída por um slider interativo de imagens, todas estas imagens têm uma dimensão de mil novecentos e vinte pixéis por setecentos e quarenta pixéis (1920px x 740px), a secção número dois é constituída por mais um slider, mas este com um propósito diferente do que o slider que se encontra na secção número um, este tem como objetivo mostrar ao utilizador os quartos disponíveis que as casas do prior têm para oferecer aos seus clientes, a secção número três possibilita ao utilizador que este faça uma reserva, indicando assim em que dia ele deseja fazer o seu check-in/check-out e descrever quantos pessoas irão com esse utilizador (adultos e crianças), a secção número quatro está constituída por uma pequena galeria das casas do prior e também testemunhos de clientes que já visitaram esta instituição, por fim, a secção número cinco é o footer do website, com determinadas informações consideradas importantes tanto para o cliente como para o estagiário, após estas informações foi desenhado pelo estagiário um wireframe do website final (Figura 9 e Anexo III).
30
Figura 9 - Wireframe da homepage do website Casas Do Prior Fonte: Estagiário
Juntamente com o cliente foi decidido que informação foi disponibilizada em cada página do website, desta forma o estagiário realizou wireframes correspondentes a cada página de forma a estas apropriarem-se às necessidades do cliente, na página “Quartos” estão expostos todos os quartos que a entidade tem para oferecer com as correspondentes informações a cada um deles, na página “Galeria” estão disponíveis dois slideshows, o primeiro slideshow contém apenas imagens do exterior da entidade, o segundo slideshow é constituído por imagens do interior da entidade, a página “Booking.com” disponibiliza um plugin do website Booking (www.booking.com) para que os clientes consigam fazer a sua reserva através do site Booking, na página “Sobre Nós” foi introduzida informação em relação à entidade, a página “Pontos de Interesse” é constituída por pontos turísticos da zona rural de Trevões de forma a complementar a experiência dos clientes da entidade, por último na página de “Contactos” é apresentado ao utilizador um formulário de envio de mensagem que irá diretamente para o e-mail da entidade e informações como o contacto telefónico, o e-mail por extenso (caso o utilizador não queira utilizar o formulário) e também a morada da entidade.
31
2.7.2 – Implementação (Desenvolvimento, Testes e Alojamento)
Desenvolvimento – Na realização desta etapa de desenvolvimento do website da
entidade Casas do Prior, recorreu-se à utilização de tecnologias, como HTML, e a folhas de estilo CSS. Ao utilizar estas tecnologias torna-se possível alterar a estrutura e o aspeto de todo o website. Para efetuar estas alterações, recorreu-se ao software mencionado no ponto (2.4), sublime text 2.
Nesta fase de criação do website, foi criado então o menu principal do website, referido no subponto (2.7.1), foram selecionadas as cores do website, como também a instalação do template e os plugins/widgets que serão necessários em algumas áreas do
website, tendo como objetivo satisfazer todas as necessidades e assim obter um resultado
com sucesso.
No website em questão foi utilizado o template denominado por: Hotel Master (Figura 10), desenvolvido pela empresa GoodLayers (www.goodlayers.com/).
Figura 10 - Template Hotel Master
Fonte: http://demo.goodlayers.com/?theme=hotelmaster – acedido a 06/01/2016
Para a realização deste website foram utilizados os seguintes plugins:
Booking.com Affiliate Plugin – Este plugin tem como objetivo adicionar a qualquer website criado em wordpress o módulo do website Booking.com;
32
Contact Form 7 – Este plugin permite a criação de formulários de forma rápida e flexível;
Easy Columms – Este plugin permite facilmente a criação de colunas em páginas ou artigos de wordpress;
Goodlayers Hotel plugin – Este plugin é nativo do template, permite que os utilizadores façam a reserva dos quartos, pedindo ao utilizador o dia em que ele fará o check-in e o check-out como também para quantas pessoas o utilizador pretende efetuar a reserva;
GTranslate – Este plugin permite que os utilizadores mudem o idioma do
website;
Simple Maintenance Mode – É um plugin que permite ao web designer criar uma página de manutenção, desta forma enquanto ele cria ou modifica o website os utilizadores não poderão observar o website;
WP Google Map Plugin – Este plugin permite adicionar google maps em páginas ou artigos do website;
One-Click Child Theme – Este plugin permite facilmente a criação de um child-
theme;
Page Link To – É um plugin que permite reencaminhar os hyperlinks de páginas ou artigos, para URL’s externos;
Master Slider Pro – Este plugin permite a criação de um slider, para qualquer página ou artigo no website.
Para a realização deste website foram utilizados os seguintes widgets:
Menu personalizado – Este é um widget nativo do wordpress, permite ao web
designer criar um menu secundário no website.
Goodlayers Recent Room Widget – É um widget nativo do template, que efetua um loop dos últimos quartos adicionados ao website.
Texto – Este é um widget nativo do wordpress, permite ao web designer adicionar informação em formato de HTML a uma área específica do website.
33
WP Google Map Widget – É um widget externo, ou seja, não é nativo ao
wordpress nem ao template em questão, permite ao web designer adicionar google maps a uma área específica do website.
Após a implementação de todos os plugins, widgets e modificações maioritariamente efetuadas no documento style.css o website foi concluído com sucesso (Figura 11). O trabalho está publicado na página das Casas do Prior (http://www.casasdoprior.com/).
Figura 11 - Website Final (Casas Do Prior)
Fonte: http://www.casasdoprior.com/ - acedido a 06/01/2016
Teste e alojamento – Após a conclusão da etapa de desenvolvimento do website,
foram realizados diversos testes com a finalidade de verificar se todos os parâmetros solicitados pelo cliente estavam em conformidade com o planeamento do website, foi testada também a navegação e a usabilidade do website de forma a verificar se esta, está fácil e acessível ao utilizador. Após a aprovação dos colaboradores e dos clientes, foi efetuado o upload, dos ficheiros para os servidores da StudioBox.
2.8 – Stramus
A instituição stramus é responsável pela venda de joalharia, foi pedido á empresa acolhedora do estagiário, que desenvolve-se uma loja online (e-commerce). O cliente solicitou que este website permite-se aos seus clientes efetuarem a compra dos seus produtos online, para isso o website tem que ser constituído por várias características que
34
permitissem os utilizadores efetuarem esse processo, foi também solicitado pelo cliente que o website conte-se diversas informações sobre a instituição.
2.8.1 - Conceção (Planeamento, Análise e Desenho)
Planeamento – Tal como no subponto (2.7.1), o planeamento foi efetuado
seguindo a metodologia referida no subponto (2.51): 1. Qual o propósito da empresa?
A instituição Stramus tem como propósito a venda e distribuição de joalharia, dando a conhecer aos seus clientes as novas coleções das suas marcas como também oferecendo a possibilidade de estes adquirirem esses produtos, sejam eles destinados para revenda ou para uso pessoal.
2. Qual a intenção da existência do website?
O website da instituição stramus tem a intenção de dar a conhecer aos seus clientes os novos produtos que entram no mercado como também a possibilidade de os adquirir.
3. Quais os objetivos principais?
O principal objetivo da instituição stramus é vender e distribuir os seus produtos. 4. Qual o público-alvo?
O público-alvo da instituição stramus engloba indivíduos em praticamente todas as faixas etárias.
5. Quais as principais características do público-alvo?
A instituição stramus procura um público-alvo abrangente, não limita o seu público-alvo com a sua faixa etária, oferece produtos para todas as idades.
6. Que informações disponibilizar?
A informação a disponibilizar no website da instituição stramus é a necessária, ou seja, tem como obrigação disponibilizar aos utilizadores o catálogo de produtos disponível, como também os seus preços e características adicionais de cada um do produto, uma breve descrição com a visão, missão e valores da empresam como também
35
a sua história, informações em relação às localizações físicas das lojas também irão ser disponibilizadas no website, tal como os contactos de cada uma das suas lojas.
Análise – Durante esta etapa, foi solicitado por para do Bruno Esteves, que o
estagiário realizasse uma pesquisa em relação a websites da concorrência já existentes na
web, desta forma existe uma melhor perceção do tipo de conteúdo e da forma como este
irá ser apresentado ao cliente. Após finalizar a pesquisa e as necessidades do cliente terem sido analisadas, as informações que foram propostas ao cliente (stramus) foram as seguintes:
A homepage, é constituída por um slider interativo, com imagens selecionadas pelo cliente, uma secção para disponibilizar produtos em destaque ao utilizador como também uma secção para disponibilizar as diferentes categorias de produtos existentes no website ao utilizador, e por fim um rodapé interativo com os diversos testemunhos dos clientes.
Juntamente com o cliente, e com a colaboradora Susana Esteves foi decidido que os diferentes produtos iriam estar disponíveis nas suas respetivas categorias, de forma a melhorar a experiência de navegação dos utilizadores do website, foi assim realizada uma estrutura de navegação para o website (Fixura 12 e Anexo IV), disposto do seguinte modo: “home”, “sobre nós”, “contactos” e “loja”, no segundo nível de navegação do hyperlink “loja”, poderemos encontrar todas as categorias dos produtos que se poderão adquirir no website, tais como: “anéis”, “brincos”, “colares”, “relógios”, “alianças”, “pulseiras”, “barras”, “medalhas e alfinetes” e “gourmet”, inseridos nos submenus: “colares”, “relógios” e “pulseiras” poderemos encontrar as marcas que o website disponibiliza aos seus clientes.
36
Figura 12 - Estrutura principal de navegação website Stramus Fonte: Estagiário
Desenho - O cliente desejava um website com um design “limpo”, de boa
apresentação, clara, objetiva, simples com boa usabilidade e com fácil interação. Posto isto, a plataforma CMS utilizada foi o wordpress, pois é nesta plataforma que a
StudioBox realiza todos os seus websites.
No cabeçalho da homepage, está disponibilizado um link para o facebook da entidade em questão, como também os controlos “A minha conta”, “Check-in/Check-out” e o “carrinho de compras”, estes controladores têm como objetivo indicar ao utilizador quantos produtos selecionaram na sua visita ao website, na secção número um foi implementado um slider interativo com dimensões de mil novecentos e vinte pixéis por seiscentos pixéis (1920 px x 600px), a secção número dois foi construída de forma a disponibilizar uma pequena quantidade de produtos em destaque (entre quatro a oito
37
produtos), na secção número três foram disponibilizadas as categorias principais de produtos que a entidade oferece ao seu público, que são as seguintes: anéis, brincos, colares, relógios, alianças, pulseiras, gourmet, medalhas, alfinetes e barras, na seção número quatro foi inserido um slider interativo contendo os testemunhos dos diversos clientes da entidade, no final do website foi inserido um footer onde poderá ser encontrada a mensagem de copyright como também as ligações para as redes sociais da instituição. Após estas informações foi desenhado pelo estagiário um wireframe do website final (Figura 13 e Anexo V).
Figura 13 - Wireframe da homepage do website Stramus Fonte: Estagiário
2.8.2 – Implementação (Desenvolvimento, testes e alojamento)
Desenvolvimento – Na realização desta etapa de desenvolvimento do website foi
utilizada a mesma metodologia mencionada no subponto (2.7.2).
No website em questão foi utilizado o template denominado por: Natural Shop (Figura 14), desenvolvido pela empresa quitenicestuff.
38
Figura 14 - Template Natural Shop
Fonte: http://themeforest.net/item/natural-shop-responsive-woocommerce-theme/full_screen_preview/11047108 - acedido a 06/01/2016
Para a realização de este website foram utilizados os seguintes plugins:
Contact Form 7 – Plugin mencionado no subponto (2.7.2.1).
Gold price plugin – Este é um plugin que disponibiliza o preço constante de determinados metais, tal como: ouro, platina e prata.
Newsletter sign-up – Plugin que permite adicionar diversas formas dos utilizadores do website subscreverem-se á sua mailinglist.
Simple Maintenance Mode - Plugin mencionado no subponto (2.7.2.1).
WooCommerce – É um plugin que adiciona opções de e-commerce a qualquer
website produzido em wordpress.
Para a produção deste website não ocorreu a necessidade da utilização de widgets. Após a implementação de todos os plugins e modificações maioritariamente efetuadas no documento style.css o website foi concluído com sucesso (Figura 15). O trabalho está publicado na página da entidade stramus (www.stramus.pt).
39
Figura 15 - Website Final (Stramus) Fonte: http://stramus.pt/ - acedido a 06/01/2016
Teste e alojamento - Na realização desta etapa de desenvolvimento do website foi
utilizada a mesma metodologia mencionada no subponto (2.7.2).
2.9 – Grão Vás Confraria
A Confraria Grão Vás é uma entidade sem fins lucrativos que ao longo dos seus treze anos de atividade tem vindo a desenvolver principalmente iniciativas na vertente cultural.
O cliente solicitou à entidade acolhedora que produzisse um website com o objetivo de transmitir notícias da confraria para os seus membros, ou seja, um website com características de blog, onde os seus utilizadores possam obter informações sobre as ultimas atividades realizadas pela confraria.
2.9.1 - Conceção (Planeamento, Análise e Desenho)
Planeamento - Tal como no subponto (2.7.1 e 2.8.1), o planeamento foi efetuado
40
1. Qual o propósito da empresa?
A Confraria Grão Vás é uma instituição sem fins lucrativos com o principal objetivo de desenvolver iniciativas na vertente cultural.
2. Qual a intenção da existência do website?
O website da instituição Confraria Grão Vás tem como intenção partilhar com os seus utilizadores/membros todas as iniciativas que a instituição realiza, como também espalhar as mensagens da mesma.
3. Quais os objetivos principais?
Os objetivos principais do website da instituição é informar os atuais membros da instituição tal como apresentar esta instituição a novos utilizadores do website.
4. Qual o público-alvo?
O público-alvo da instituição Confraria Grão Vás engloba indivíduos que se encontram na faixa etária dos vinte cinco aos sessenta anos de idade.
5. Quais as principais características do público-alvo?
As principais características do público-alvo da instituição engloba indivíduos que residam na cidade de Viseu, maior parte dos seus membros encontram-se com diversas profissões e têm um rendimento estável, classe social média e partilham o gosto pela cultura Portuguesa.
6. Que informações disponibilizar?
A informação a disponibilizar no website da instituição Confraria Grão Vás será variada, para além de ser necessário transmitir todas as atividades realizadas pela instituição, também será necessário transmitir novas alterações aos regulamentos já existentes na instituição, tendo em conta que também irá conter informações básicas tal como a morada, contacto telefónico, correio eletrónico, etc.
Análise – Durante esta etapa, foi solicitado por parte do Bruno Esteves, que o
41
web. Após finalizar a pesquisa e as necessidades do cliente terem sido analisadas, as
informações que foram propostas ao cliente (Grão Vás Confraria) foram as seguintes:
A homepage, foi construída com um slider interativo, com imagens de determinados eventos realizados pela instituição, no corpo do website foram disponibilizadas os últimos artigos sobre os eventos da confraria por ordem de criação, ou seja, á medida que estes são produzidos irão automaticamente para a
homepage.
Juntamente com o cliente, e com a colaboradora Susana Esteves foi estudada e decidida a estrutura do menu principal do website. O menu principal é constituído por seis hyperlinks diferentes, que são os seguintes: “confraria”, “publicações”, “Galeria”, “comissão instaladora”, “blog” e “contactos”. O item “confraria” contém três subitens, estes são os seguintes: “história”, “órgãos sociais” e “protocolos” e por fim o item “galeria” contém também três subitens, que são os seguintes: “galeria de imprensa”, “vídeos” e “entronizações”. Após estas informações foi realizada uma estrutura de navegação para o website (Figura 16 e Anexo VI).
Figura 16 - Estrutura principal de navegação website Grão Vás Confraria Fonte: Estagiário
42
Desenho – O cliente desejava um website com um design “simples”, de boa
apresentação, com uma usabilidade e com fácil iteração. Posto isto, a plataforma CMS utilizada foi o wordpress.
No cabeçalho da homepage, podemos encontrar o logótipo da entidade, juntamente com o menu principal estruturado na figura 16, podemos encontrar também um slider interativo com dimensões de mil trezentos e quarenta nove pixéis por quatrocentos e sessenta pixéis (1349 px x 460px), constituído pelos artigos mais recentes ou considerados os mais importantes da confraria, esses artigos são constituídos por uma imagem de destaque com as dimensões de seiscentos pixéis por trezentos pixéis (600px x 300px), para além da imagem de destaque estes artigos também disponibilizam um breve resumo sobre o seu conteúdo. O website foi construído de forma a ter uma sidebar no lado direito da página, contendo informações como as categorias disponíveis no website