A Universidade do Porto

Transcrição

1 1 CDI 2013/14. Licenciatura em Ciências da Comunicação, U.P. Desenho e produção de um Sítio Web A Universidade do Porto Apesar da já existência de vários sites ligados à Universidade do Porto, optámos por centrar o nosso projeto nesta instituição. Esta decisão teve por base o facto de existirem vários sítios web relacionados com a U.P. (U.P., notícias da U.P., reitoria da U.P., etc.) Mas, ao mesmo tempo, não haver nenhum que aglomere toda a informação útil para quem vai entrar pela primeira vez na universidade, de forma apelativa. E assim nasceu o nosso conceito. Todo ele se baseia no público-alvo: aqueles que estão interessados em ingressar na U.P; aqueles que ainda estão indecisos e precisam dum empurrãozinho ; e aqueles que, no início do 1º ano, ainda estão a tentar descobrir o que se passa e como funciona a Universidade do Porto. Tendo em conta as necessidades e expectativas dos nossos potenciais utilizadores, selecionámos um conjunto de conteúdos a integrar no sítio web, procurando conciliar informações sobre os diversos cursos com as atividades extra-curriculares, e salientar o prestígio da Universidade do Porto. Diagrama de navegação O nosso site é constituído por 29 páginas. Como se observa no diagrama de navegação que apresentamos acima, essas páginas estão dispersas em três níveis: num primeiro, temos a página principal (ou homepage), onde se encontra um menu que dá acesso ao segundo nível (instituições, actividades, rankings, mobilidade, opiniões, fórum, contactos e localização); finalmente, há três páginas a partir das quais é possível acedermos ao terceiro nível instituições, actividades e localização.

2 2 CDI 2013/14. Licenciatura em Ciências da Comunicação, U.P. Note-se que esta representação do mapa do sítio tem data anterior ao início da implementação do projeto em html e css. Ou seja, trata-se de um documento de apoio à construção propriamente dita do site, tendo sido desenhado numa fase de planeamento. Como tal, ao longo do nosso percurso, fomos alterando alguns pormenores, por exemplo: na pilha de páginas de terceiro nível, em que seriam apresentadas as faculdades da U.P. e os respectivos cursos, optámos por excluir o Porto Business School, visto que este não oferece licenciaturas nem mestrados integrados (os cursos procurados por quem vai entrar ou entrou pela primeira vez na faculdade, o nosso público-alvo). Ressalve-se ainda que, a página de segundo nível a que chamámos fórum e que, idealmente seria um fórum no verdadeiro sentido da palavra, não foi possível concretizar, por razões técnicas alheias à nossa condição de estudantes. No entanto, não abdicámos dessa ideia e fizemos uma simulação, representando o seu conteúdo e a sua forma. Modelos de página e wireframes Criámos 9 páginas-modelo identitárias do nosso site. Os wireframes que apresentamos em baixo estão adaptados para uma área útil de aproximadamente 1349x630 píxeis, tendo por base uma resolução de ecrã de 1366x768 píxeis. Note-se que optámos trabalhar para esta resolução porque fizemos uma pesquisa sobre qual a resolução de ecrã mais utilizada atualmente, e encontrámos várias fontes que apontavam estas medidas. Os computadores recentes têm esta resolução de ecrã e os jovens, adquirindo este tipo de novas tecnologias, estarão entre os seus utilizadores mais frequentes. Antes de apresentarmos os wireframes, convém frisar que, no que diz respeito a elementos html, todas as páginas, à exceção da Homepage, contêm um rodapé (footer), que dá a possibilidade ao cibernauta de optar por outra página do site (Mobilidade, Rankings, Atividades, Opiniões, Contactos, Localização, Fórum) não englobámos esse menu na Homepage porque todas as opções estão lá presentes. De novo exceptuando a Homepage, todas as páginas têm um título centrado de tamanho 36 elemento p, classe título. Do mesmo modo, todas as páginas têm uma div base dentro do body, que limita a área de trabalho. Dentro desse div geral, encontram-se vários div s, consoante o conteúdo de cada página. Sublinhe-se ainda que, todos os botões que são uma imagem, têm o atributo alt. A grande maioria dos wireframes manteve-se ao longo do processo, assim como as medidas principais (apesar de que, por vezes, tivemos de adaptar e improvisar um bocadinho essas medidas, até que os elementos ficassem posicionados como tínhamos idealizado).

3 3 CDI 2013/14. Licenciatura em Ciências da Comunicação, U.P. Homepage A nossa homepage é constituída por nove div s, todos eles representados por um círculo, à exceção de um, o primeiro, que é representado pelo logótipo da Universidade do Porto. Os oitos círculos funcionam como botões que remetem para uma página mais personalizada e com conteúdos mais profundos acerca da opção escolhida (elemento a ). À medida que passamos o rato por cima de cada um dos círculos, aparece uma legenda para quem não conseguir desmistificar o significado dos símbolos. Atividades e Localização Desenvolvemos esta wireframe desta forma, pois tanto as Atividades como a Localização têm três subpáginas. Como tal cada círculo representa uma opção dentro da opção escolhida anteriormente (exemplo: Homepage >Atividades > Desporto). Estamos, novamente, perante um menu com três botões circulares, representados por imagens dentro de div s.

4 4 CDI 2013/14. Licenciatura em Ciências da Comunicação, U.P. Mobilidade Muito similar à página-modelo das Atividades e Lozalização, com a diferença que tem apenas duas subpáginas, representadas igualmente por dois círculos que funcionam como um botão. As opções de html são idênticas. A página da Mobilidade tem duas opções: Ir e Vir, cada uma delas abre um documento. Instituições À semelhança de todas as outras páginas acima expostas, todos os botões são representados por círculos, nos quais ao passar o rato surge o nome da instituição respetiva. Em vez de desenhos, neste caso, optámos apenas por círculos coloridos: cada faculdade é representada pelo círculo da cor que lhe é atribuída no Manuel de Identidade da Universidade do Porto. Mais uma vez, os elementos html são similares aos já enunciados anteriormente.

5 5 CDI 2013/14. Licenciatura em Ciências da Comunicação, U.P. Pilha de páginas (faculdades) Para as páginas de cada faculdade, considerámos necessário criar uma página modelo que englobasse imagem, texto e um menu que facilmente nos conduzisse às outras faculdades. Inicialmente, em vez de um título, queríamos colocar o logótipo da faculdade em questão no canto superior esquerdo, mas graças a questões técnicas não nos foi possível (não havia disponível na Internet imagens com qualidade suficiente para todas as faculdades). Como tal, em vez do logótipo, temos um título centrado em cada uma das 14 páginas das faculdades, uma imagem do edifício da faculdade desenvolvida por nós em Illustrator, a lista de cursos da faculdade com links que vão dar à página oficial desse curso, e ainda um menu à direita, que acompanha toda a página e possibilita, como já foi referido, a visita às outras faculdades da U.P.. Em termos de elementos html, nesta página introduzimos um novo elemento: as listas, representadas por ul e li.

6 6 CDI 2013/14. Licenciatura em Ciências da Comunicação, U.P. Desporto, Tunas, Praxe Englobámos estas três páginas na mesma página-modelo, visto que são as três opções da página Atividades e com potenciais conteúdos semelhantes. Optámos por um pouco de texto para contextualizar e informar, e um slideshow de imagens (em formato circular, tentando manter a unidade e coerência do nosso site ao introduzir este elemento identitário) para tornar o conteúdo mais interativo e apelativo ao nosso público-alvo. Nestas páginas, utilizámos o elemento h2 para introduzir alguns subtítulos e, em alguns casos, o elemento h3. As páginas Desporto, Tunas e Praxe têm links para outras páginas que complementam a informação já disponibilizada. Contactos, Rankings, Fórum e Opiniões Estas quatro páginas partilham a mesma página-modelo porque considerámos que em nenhuma delas se justificava existir imagens, até porque são páginas informativas ( Contactos, Rankings e Opiniões ) e de interatividade permanente ( Fórum ).

7 7 CDI 2013/14. Licenciatura em Ciências da Comunicação, U.P. As páginas Contatos e Rankings têm links para outra páginas que complementam a informação dada por nós. Na página do Fórum utilizámos o elemento table para simular a caixa que nos transporta para o fórum propriamente dito. Utilizámos, do mesmo modo que no exemplo acima, subtítulos para dividir informações. E, nalguns casos, recorremos ao elemento b (bold) para fazer sobressair determinadas palavras. Pólo Asprela, Pólo Centro e Pólo Campo Alegre Os três pólos da Universidade Porto são representados igualmente a nível de modelo de página, como se compreende pela sua semelhança de conteúdos. Na área do texto, foi posteriormente colocada uma imagem (img) que faz de legenda e, abaixo da mesma, utilizámos o elemento p para divulgar os meios de transporte. Temos ainda um mapa que indica onde se situa cada faculdade do pólo em questão, cujo formato é redondo. Note-se que os botões representados no lado direito do wireframe foram posteriormente postos de parte. Tipografia e palete de cores Todas as páginas do site têm o mesmo tipo de tipografia, Garamond nos títulos e Verdana nos textos. Escolhemos duas tipografias diferentes para os títulos e para os textos, para haver um diferenciação (para além do tamanho da letras e conteúdo) entre estes. Uma tipografia serifada para os títulos, e uma não serifada para os textos, pois são mais extensos e por isso exigem um tipo de letra mais clean, mais sério. Ambos os tipos de letra fazem parte das letra-padrão de todos os computadores, o que não origina qualquer problema independentemente do computador em que for aberto, ao contrário do que poderia acontecer no caso de utilizarmos o código tipográfico da U.P., como pensámos inicialmente. A cor da letra, tanto nos títulos como nos textos é sempre preto, pois não provoca choque, é fácil de visualizar tendo em conta que o fundo é branco. E conseguimos assim um site que inspira confiança e seriedade de conteúdos.

8 8 CDI 2013/14. Licenciatura em Ciências da Comunicação, U.P. Tal como foi dito acima a cor do fundo é branco, e a cor das letras é preto. Contudo achamos necessário e apropriado o site ter alguma cor, devido ao público alvo (jovens) e por estar relacionado com a U.P. que é facilmente associada a cores (das diferentes faculdades e cursos e do próprio cartão de estudante de todos os alunos). Essas manchas de cor tornam-se uma linha identitária do site e da própria Universidade do Porto, na medida em que são as cores que representam as diversas faculdades. Assim, a palete de cores do nosso site é bastante extensa. Conclusão O nosso objectivo desde o inicio do projecto foi desenvolver um site que se relacionasse directamente com a Universidade do Porto e com o público alvo. Optamos por um site simples a nível de imagem e conteúdo, mas ao mesmo tempo que chama-se à atenção e tivesse toda a informação que o público alvo procura. A nível de design e formatação, apesar de termos oito páginas modelo, achamos que o site é coeso e mantém um ligação forte entre as diferentes páginas. Consideramos que atingimos aquilo que desejávamos com o nosso trabalho. Desenvolvemos um site jovem mas ao mesmo tempo com conteúdos importantes e sérios.