Relatório de Análise de um Sítio Web - UPTEC - Introdução O objetivo deste trabalho é analisar detalhadamente o sítio web da UPTEC (http://uptec.up.pt/). Para isso, iremos proceder à análise do mapa do site, usando uma representação à mão bem como vetorial. De seguida, identificaremos os principais esquemas de páginas presentes no sítio web, assim como as suas estruturas em wireframe e principais elementos HTML. Outro dos objetivos deste trabalho, e para nós o mais importante, é compreender a dinâmica de um sítio web para que possamos aplicar os conhecimentos à construção do nosso próprio site como projeto final. Mapa do sítio web Representação à mão Representação vetorial NOTA: existem algumas ligações externas, como é o caso de Facebook, Twitter, Flickr, UPTECTube e RSS Feeds 1
Identificação de esquemas Os esquemas de páginas que apresentamos são os que consideramos mais relevantes e que, simultaneamente têm estruturas diferentes, o que os torna mais úteis na análise. Desta forma, são três as páginas que selecionamos: a página de entrada, a página de informação sobre o UPTEC e todos os seus componentes e, por fim, a página de contactos. No esquema da página de entrada, é possível aceder a todos os níveis do sítio web e, por isso, consideramos que este é o esquema mais importante do site do UPTEC. Aqui, podemos também encontrar de imediato uma pequena explicação do que é o UPTEC e algumas das suas vertentes, as empresas existentes, os destaques, as notícias, os eventos e a subscrição da newsletter. Esta página é de fácil acesso e manuseamento, possibilitando ao utilizador uma boa movimentação dentro do sítio web, e concentra todos os seus principais pontos. Quanto aos espaços ocupados pelos conteúdos, estão no local que consideramos correto, uma vez que não se traduz numa utilização confusa do site. No esquema da página de informação está disponível uma explicação sobre o UPTEC e aquilo que envolve. É também possível aceder a todos os pólos do UPTEC Pólo Tecnológico, Pólo das Indústrias Criativas, Pólo do Mar e Pólo da Biotecnologia -, assim como aos objetivos e parceiros da instituição. Aqui, o site providencia as explicações necessárias sobre o UPTEC de forma bastante clara e coesa; a navegação na página é, para além de muito útil, boa, agradável e organizada. 2
Por último, no esquema da página de contactos, temos acesso às informações básicas sobre o UPTEC como a morada e os números de telefone, assim como uma página com direções para chegar até à instituição. As informações aqui presentes são essenciais para quem visita o site e estão bem organizadas, o que permite uma melhor compreensão por parte dos utilizadores. Página de entrada Página de informação Página de contactos 3
Caracterização dos esquemas Em wireframes: Aqui, encontram-se representados os esquemas em wireframes de cada uma das páginas pré-selecionadas. Esta representação consiste numa análise dos espaços dos elementos de cada página bem como as medidas por eles ocupadas. Estas medidas diferem em todas as páginas, com algumas raras exceções. Apresentamos abaixo todas essas representações relativas à página de entrada, página de informação e página de contactos. Página de entrada Logótipo 400*100px 1 2 140*100px 3 Últimas entradas 260*611px Apresentação/Informação 540*300px Sumário das empresas 860*191px Próximos eventos 260*591px Em destaque 260*431px Subscrição de Newsletter 260*91px Rodapé 940*120px Nos três esquemas das páginas tanto o logótipo como a navegação 1, navegação 2 e navegação 3 e também o rodapé estão presentes nos mesmos sítios e com as mesmas medidas. Aqui, na página de entrada, uma grande parte da página é ocupada pela apresentação/informação, o que é favorável à instituição, uma vez que apresenta, desde o início, a sua estrutura e todas as suas vertentes. Por outro lado, concentra tanto as empresas que fazem parte do UPTEC como as últimas notícias, eventos e destaques, dando, desta forma, uma rápida atualização ao utilizador. As dimensões usadas 4
ajudam o visitante a situar-se no espaço, uma vez que é claro aquilo que é mais importante e que se pretende destacar, sem que sejam sobrepostos elementos ou que estejam demasiado juntos, o que dificultaria a compreensão do site. Página de informação Logótipo 400*100px 1 2 140*100px 3 UPTEC 560*30px Introdução 560*40px Navegar 260*205px Imagem 549*138px Em destaque 260*311px 560*673px Subscrição da newsletter 260*91px Rodapé 940*120px Na página de informação, existe um texto de introdução ao UPTEC acompanhado por uma imagem. Na lateral direita, existe um painel de navegação, onde é possível aceder à informação disponível sobre todos os pólos, assim como à missão da instituição e à rede de parceiros. Existe uma grande organização da informação, dividida em blocos de texto, permitindo um bom entendimento. Poderiam, apenas, estar disponíveis algumas imagens do espaço físico dos pólos para que o utilizador pudesse ter uma noção do mesmo. Desta forma, consideramos que com adição de imagens, esta página ficaria mais rica, quer a nível de elementos HTML como a nível da informação que passa para o visitante. 5
Página de contactos Logótipo 400*100px 1 2 140*100px 3 Contactos 560*30px Contacte-nos 560*40px Informações e contactos 560*270px Navegar 260*105px Em destaque 260*311px Como chegar 133*30px Subscrição da newsletter 260*91px Rodapé 940*120px Na página de contactos, o mais importante são, sem dúvida, as direções que são disponibilizadas (morada, números de telefone e caminhos alternativos). O essencial da informação está presente e, na página como chegar existe informação adicional que mostra como chegar ao local a partir de vários pontos diferentes. Tal como foi referido anteriormente, o logótipo, navegação 1, navegação2, navegação 3 e rodapé têm as mesmas dimensões em todas as páginas apresentadas. Consideramos assim que todas estas páginas têm uma boa coesão e organização nas dimensões, tornando o seu design apelativo bem como útil. Identificação dos principais elementos HTML: Após a caracterização em wireframe, passamos à identificação dos principais elementos HTML usados em cada uma das páginas. Mais uma vez, existem diferenças de página para páginas, com algumas exceções. 6
Página de entrada DIV search DIV page DIV header DIV nav DIV section section article DIV container DIV footer 7
Nesta primeira página encontramos representados os DIV s header, footer, page, container e nav. O DIV container inclui articles e section. Estes elementos HTML são fundamentais para a boa organização do sítio web e para as informações que este contém. Estes DIV s estão presentes em todas as páginas que são apresentadas no presente documento. Página de informações dl dl a body h1 h2 img + h1 dl h1 img ul + li h1 img strong img h1 strong p span input span footer small strong ul + li small span Nesta página são analisados os elementos HTML com mais pormenor. Aqui encontramos: elementos h1 e h2 com alguma frequência; encontramos o elemento P, que indica parágrafo, representado no espaço em amarelo; strong 8
e small são elementos que modificam o tipo de letra e estão também patentes nesta página; são muitas as listas, representadas pelo ul + li. In put está incluído na parte de subscrição de newsletter, bem como o elemento span. Por fim, as imagens são também um elemento de HTML presente nesta página, conjugadas com listas ou parágrafos. body Página de contactos ul span h1 h2 header a a strong h2 DIV pagination nav p a section footer Quanto à página de contactos, como já havido sido referido, faltam imagens como elemento HTML, o que se traduz numa dinâmica menor e numa menor transposição de informações. Contudo, são outros os elementos presentes, como o section, que está, bem como na página de entrada, presente nesta página, desta vez, na subscrição de newsletter. Na página presente, podemos constatar que existe um novo DIV, ainda não apresentado até agora, o DIV pagination nav. O footer está aqui presente, bem como nas duas páginas acima analisadas. Os hiperlinks, representados pelo a encontram-se no header bem como um pouco mais abaixo, no elemento a azul. p 9
Estes elementos, depois de analisados, são claros quanto àquilo que deve ser uma página web, já que a variedade de elementos é vasta. Desta forma, foinos possível tomar conhecimento de um maior leque de elementos HTML para além dos leccionados nas aulas, o que consideramos positivo, já que os descobrimos na evolução deste trabalho. As três páginas apresentadas e analisadas são completas, coesas e claras quanto ao seu conteúdo bem como quanto à sua estrutura, que está, no nosso ponto de vista, bem conseguida, embora careça, na maioria das vezes, de um maior número de imagens. Conclusão Após termos terminado este trabalho sentimo-nos muito mais aptas para a realização do site, uma vez que conseguimos ter uma boa noção dos componentes básicos de um sítio web. Existe uma dinâmica própria de cada site, mas foi possível entender a base do funcionamento de um sítio web. Com a análise dos elementos HTML conseguimos captar as ideias essenciais da sua utilização e com o progresso do trabalho fomos tendo cada vez mais a noção de como organizar uma página web, como teremos de fazer no projeto final. Também a realização dos wireframes das páginas nos ajudou a compreender as dimensões que se devem usar com os elementos que a página inclui, bem como a hierarquia dos conteúdos. O site que analisamos, do UPTEC, é um exemplo de organização de informação e conteúdo. Consideramos que tudo o que envolve a instituição está bem explicado e é de fácil acesso. A nível de matéria está completo, pecando apenas pela falta do uso de imagens que tornaria as páginas mais dinâmicas e daria maior noção aos visitantes dos espaços, entre outras coisas. A nível estrutural, pensamos que é um projeto bem conseguido, que prima pela clareza, organização e objetividade. 10