MOD.AFTEBI.P-083.

REV01

GEAR GAMMING

WEB-HIPERMEDIA E ACESSIBILIDADE
FREDERICO CANHOTO
1/08/2014

GEAR GAMMING
FORMANDO: FREDERICO CANHOTO
DATA 1/8/2014

MOD.AFTEBI.P-083.REV01

NDICE:
ESTRUTURA .................................................................................................................................... 3
INTRODUO ..............................................................................................................................................................................3

PROJECTO DO WEBSITE ............................................................................................................... 4

T EMA : GEAR GAMMING.........................................................................................................................................................4
METFORA VISUAL:..................................................................................................................................................................4
TIPO DE LETRA: ........................................................................................................................................................................4
COR:.............................................................................................................................................................................................4
FERRAMENTA WYSIWYG: ...................................................................................................................................................4
ESTRUTURA DA INFORMAO: .............................................................................................................................................4
MAPA DO SITE: ........................................................................................................................................................................5
STORYBOARD: ...........................................................................................................................................................................6
Nota :......................................................................................................................................................................................6
SIMULAO/ESQUEMA: ..........................................................................................................................................................7
CONCLUSES GERAIS .......................................................................................................................................................... 15

ACESSIBILIDADE: ....................................................................................................................... 15
ERRO DE DESENHOS PARA A WEB: ........................................................................................... 15
1.PESQUISA INEFICIENTE: ................................................................................................................................................. 15
2. FICHEIRO PDF PARA LEITURA ONLINE:.................................................................................................................... 15
3. COR DAS HIPERLIGAES VISITADAS NO MUDA: ............................................................................................... 15
4. FONTES COM TAMANHO FIXO (PEQUENO): ............................................................................................................. 15

BIBLIOGRAFIA/REFERENCIAS ................................................................................................. 16

2 de 22

MOD.AFTEBI.P-083.REV01

Estrutura

Introduo
No mbito da disciplina de Web Hipermdia e Acessibilidades, foi nos proposto realizarmos um
trabalho individual para avaliao, com o objectivo de pr-mos em prtica os conhecimentos
adquiridos nas aulas tericas.
O um trabalho tem como objectivo fazer uma simulao de um site de venda de material gamming, o
site permite a venda de vrios perifricos, como, ratos, teclados e monitores. Tem tambm um
separador de contactos em que o cliente pode contactar com a empresa e que permite realizar
alguma encomenda mais especfica e personalizada.
Se quiserem visitar a loja fsica tambm possvel atravs do menu contactos onde temos a morada e
um mapa onde informa a nossa localizao da loja fsica.

GEAR GAMMING
FORMANDO: FREDERICO CANHOTO
DATA 1/8/2014

MOD.AFTEBI.P-083.REV01

Projecto do Website
Tema : Gear Gamming
Metfora visual:

Tipo de letra: Escolhi estes tipos de letras porque se tornam mais legveis para os utilizadores.

Menu: Arial

Tamanho: 24

Titulo: Magneto

Tamanho: 122

Texto: times New roman Tamanho: 14

Cor: As restantes paginas vo ficar iguais a homepage, escolhi esta cor por se tornar mais apelativo.
Ferramenta WYSIWYG: Cacoo
Estrutura da informao: Entrando na homepage parece um menu com as varias opes de escolha,
como, Produtos, Marcas, sobre nos, contactos, tambm pode verificar que no rodap existem botes de
hiperligaes para diversas redes sociais.
Entrando no separador de Produtos vai nos mostrar um submenu com as diversas categorias, que so:
Ratos, Monitores e Teclados, cada pagina tem vrios elementos multimdia, dependendo do produto
pode observar como objecto multimdia imagens ou vdeos. Indo para o menu das marcas mostra as
diversas marcas que a empresa tem como parceria. No menu do Sobre ns temos uma breve descrio
da empresa e o que feito na loja. Depois por fim tem um separador dos contactos em que consiste
numa imagem de um mapa da nossa localizao fsica e os diversos contactos para a posterior possam
tirar algumas duvidas que possam surgir.

4 de 22

GEAR GAMMING
FORMANDO: FREDERICO CANHOTO
DATA 1/8/2014

MOD.AFTEBI.P-083.REV01

Mapa do site: O esquema utilizado no meu site foi o esquema de rede nos menus principais, e no menu
das categorias foi uma mistura de hierrquico com acesso para a home page. A escolha deste
esquema foi este porque considera uma boa opo porque permite uma fcil navegao para o
utilizador nos vrios menus.

5 de 22

GEAR GAMMING
FORMANDO: FREDERICO CANHOTO
DATA 1/8/2014

MOD.AFTEBI.P-083.REV01

Storyboard:

Produtos-Categorias

Marcas

Produtos-Categorias-

Produtos-Categorias-

Monitores

Videos

Sobre

Contactos

Produtos-Categorias-Ratos

Nota :Todas as paginas esto interligadas entre si pelo mesmo menu.

6 de 22

GEAR GAMMING
FORMANDO: FREDERICO CANHOTO
DATA 1/8/2014

MOD.AFTEBI.P-083.REV01

Simulao/esquema:

Home Page

7 de 22

GEAR GAMMING
FORMANDO: FREDERICO CANHOTO
DATA 1/8/2014

MOD.AFTEBI.P-083.REV01

Produtos-Categorias

8 de 22

GEAR GAMMING
FORMANDO: FREDERICO CANHOTO
DATA 1/8/2014

MOD.AFTEBI.P-083.REV01

Produtos-Categorias-Monitores

9 de 22

GEAR GAMMING
FORMANDO: FREDERICO CANHOTO
DATA 1/8/2014

Produtos-Categorias-Teclados

MOD.AFTEBI.P-083.REV01

10 de 22

GEAR GAMMING
FORMANDO: FREDERICO CANHOTO
DATA 1/8/2014

MOD.AFTEBI.P-083.REV01

Produtos-Categorias-Ratos

11 de 22

GEAR GAMMING
FORMANDO: FREDERICO CANHOTO
DATA 1/8/2014

Marcas

MOD.AFTEBI.P-083.REV01

12 de 22

GEAR GAMMING
FORMANDO: FREDERICO CANHOTO
DATA 1/8/2014

MOD.AFTEBI.P-083.REV01

Sobre

13 de 22

GEAR GAMMING
FORMANDO: FREDERICO CANHOTO
DATA 1/8/2014

MOD.AFTEBI.P-083.REV01

Contactos

14 de 22

GEAR GAMMING
FORMANDO: FREDERICO CANHOTO
DATA 1/8/2014

MOD.AFTEBI.P-083.REV01

Concluses Gerais
Com a realizao deste trabalho pusemos em pratica o que nos foi leccionado nas varias aulas
tericas, na minha opinio foi produtivo, sabendo que ainda pode ser muito melhorado o futuro site,
mas como tambm foi a primeira vez que fiz algo deste gnero ate considero positivo o trabalho que
tive.
Neste momento se o site fosse mesmo implementado teria de revisto de novo, e comear a trabalhar
mais nos erros de desenho e algumas funes para ajudar a que qualquer pessoa conseguisse comprar
algo no site, sendo pessoas normais ou com algumas deficincias.

Acessibilidade:
As Recomendaes de Acessibilidade do Contedo da Web, da Iniciativa pela Acessibilidade Web
(WAI) do W3C perfazem um total de doze, assentes em 4 princpios:
Perceptvel: Que pode ser percebido ou compreendido.
Opervel: todos os componentes do site so fceis de operar pelo utilizador
Compreensvel: estrutura do site e de fcil compreenso para o utilizador
Robusto: O site esta preparado para ser utilizado pelas vrias plataformas existentes.

Erro de desenhos para a web:

1.Pesquisa ineficiente: No existe um campo para a pesquisa, mas um ponto a alterar depois no
futuro quando for para a parte da simulao.
2. Ficheiro PDF para leitura online: O meu site no tem a existncia de ficheiros PDF para a leitura
facilitada, porque achei irrelevante este ponto, no considero muito necessrio aplicar este tipo de
ficheiro.
3. Cor das hiperligaes visitadas no muda: Aspecto que no tomei em considerao, mas um ponto
a considerar para a parte da simulao.
4. Fontes com tamanho fixo (pequeno): Os meus tamanhos das fontes matem-se estveis.

15 de 22

GEAR GAMMING
FORMANDO: FREDERICO CANHOTO
DATA 1/8/2014

MOD.AFTEBI.P-083.REV01

Bibliografia/Referencias
Material fornecido pelas professoras da disciplina de Web-Hipermdia e Acessibilidade
Ferramenta: Cacoo
Site base: http://www.gamershop.pt/

16 de 22

GEAR GAMMING
FORMANDO: FREDERICO CANHOTO
DATA 1/8/2014

MOD.AFTEBI.P-083.REV01

17 de 22

MOD.AFTEBI.P-083.REV01

MOD.AFTEBI.P-083.REV01

MOD.AFTEBI.P-083.REV01

MOD.AFTEBI.P-083.REV01

MOD.AFTEBI.P-083.REV01