Mestrado de Tecnologias e Metodologias de E-Learning Unidade Curricular Sistemas Hipermdia

Ensaio 1
TEMA: Guias de estilo ALUNA: Sandra Margarida Moreira Novo DATA: 27-10-2011 N 11777

Introduo

Na construo de websites e/ou aplicaes web existem inmeras consideraes conducentes a sua viabilidade e para o seu sucesso (Lynch & Horton, 2009): O design de interface, que inclui o desenho do sistema de navegao e localizao, o desenho do layout (interface de visual) e o desenho da informao; A arquitetura da informao, onde consta a organizao da informao e estrutura da pgina web; E ainda, a usabilidade do website e/ou aplicao web.

Neste ensaio, pretende-se focar apenas nas regras que devem ser estabelecidas em termos visuais de um website. No falo de organizao de contedos ou sistema de navegao, mas do aspeto visual que no pode ser desligado do grfico. Guias de estilo ou styleguides conceito que no rene consenso entre diferentes autores, tendo optado por seguir Lynch & Horton (2009).

Mestrado de Tecnologias e Metodologias de E-Learning Unidade Curricular Sistemas Hipermdia

Enquadramento das guias de estilo na Web

O conceito de guias de estilo muito anterior web. A escrita de documentos (livros, teses, ensaios, relatrios, jornais) possuem consoante a natureza do documento, diretrizes definidas quanto estrutura, tipografia utilizada e cor de ttulos e texto, a dimenso de elementos visuais, etc. As guias de estilo so linhas orientadoras para as aplicaes Web e pretendem normalizar o comportamento dos componentes grficos e visuais como cores, organizao das imagens, do texto, do fundo e dos cones. O principal objetivo harmonizar o ambiente visual das pginas Web de forma a auxiliar o utilizador e tornar mais agradvel a sua navegabilidade. A organizao espacial de grficos e de texto nas pginas e ou aplicaes da Web procura provocar nos utilizadores impacto visual e grfico, dirigir a sua ateno, dar prioridade s informaes que visualizam e fazer suas interaes, tendo por base um website mais agradvel e eficiente (Lynch & Horton, 2009).

Guias de estilo
Neste trabalho o que ser mais relevante evidenciar a utilidade das guias de estilo e como elas so uma mais valia para os programadores e os designers das pginas web (antes da implementao do website) e utilizadores que as testam (ps implementao do website) . Na perspetiva de Lynch & Horton (2009) a arquitetura de informao, o desenho tcnico, a interface do utilizador e o design grfico no se podem dissociar. A interface de utilizador e o design visual de um website pode estar muito apetecvel para o utilizador inicialmente, mas condenado ao fracasso, se a organizao bsica do website e seu contedo mal concebido. O design visual ou interativa no vai resolver os problemas. Na programao para a Web, as guias de estilo so aplicadas fazem uso de linguagens especficas, disponveis para criar pginas e aplicaes Web. Existem duas formas de adaptao das pginas web aos contextos. As pginas da web podem se adaptar a diferentes contextos sem a necessidade de recorrer mltiplas verses de uma pgina web (Lynch & Horton, 2009). Atravs do documento de origem e de folhas de estilo possvel um design adaptvel. O documento de

Mestrado de Tecnologias e Metodologias de E-Learning Unidade Curricular Sistemas Hipermdia

origem contm as informaes necessrias e funcionalidade, e folhas de estilo adapta o documento de origem para o uso em diferentes contextos. O Cascading Style Sheets (CSS) uma linguagem para elaborar estilos que
define o layout de documentos HTML ou outra extenso de pgina web ASP 1 , PHP 2 (Astrup, Jacobsen, & Astrup, n.d.).

Mas o que est aqui em anlise so as guias de estilo associadas interface do utilizador e ao design grfico e visual de um website. Os elementos visuais e grficos em anlise so (Lynch & Horton, 2009): Design do documento: onde tida em linha de conta a sua funcionalidade e o contexto onde se integra. Uma pgina web para impresso no a mesma visualizada nos diferentes browsers, nem em definies de ecr distintas (widescreen, ecr de dispositivos movis como PDA ou Tablet, entre outros);

Figura 1 Tipo de visualizao do documento consoante o equipamento ou meio de visualizao (Fonte: http://www.webstyleguide.com/wsg3/figures/7-page-design/7-6-700.jpg)

Design Visual dever estabelecer um layout em formato grelha e um estilo para auxilar o texto e os elementos grficos, e ento aplicar de forma consistente para criar interatividade e unio entre as pginas do website. Os principais objetivos do graphic design, ou seja, do grafismo na web so:

ASP "Active Server Pages" uma linguagem de pginas HTML dinmicas propriedade da Microsoft. Fonte: Wikipdia. 2 PHP Hypertext Preprocessor" uma linguagem de programao livre e utilizada para gerar pginas web dinmicas. Fonte: Wikipdia.
1

Mestrado de Tecnologias e Metodologias de E-Learning Unidade Curricular Sistemas Hipermdia

Criar uma hierarquia visual clara de contraste, para que se destaque o que importante do que perifrico; Definir reas funcionais da pgina; Elementos do grupo de pginas que esto relacionadas, de modo que voc pode ver a estrutura do contedo.

o o

Sidebar: Princpios de Design Visual o utilizador organiza o que l e o que pensa sobre uma informao, agrupando-a espacialmente. o A proximidade entre elementos indica maior grau de relacionamento entre eles; o o A semelhana entre elementos faz o utilizador agrup-los A continuidade dos contornos mais favorvel para o utilizador do que linhas ou contornos quebrados

Largura da pgina e comprimento de linha de texto da pgina - estudos mostram que a leitura mais lenta quando o comprimento de linha aumenta e por isso o utilizador pode desistir da leitura. O comprimento adequado para qualquer pgina web est relacionado com o tamanho do ecr, o contedo de seus documentos, se o leitor procura informao on-line para impresso ou download dos documentos para leitura posterior, e a largura de banda disponvel para os utilizadores leitores.

Tipografia permite comunicar verbal e visualmente; o tipo, o tamanho, os efeitos e a cor de letra, determinada consoante a sua funo na pgina; a legibilidade dos caracteres e por conseguinte do texto importante havendo regras para o nfase dos negritos, sombras, inclinao dos caracteres (ateno ao excesso de utilizao da nfase); as fontes utlizadas podem ser definidas por CSS e devem ser utilizadas as tradicionais;

Elementos grficos uma imagem vale mil palavras quando contextualizada na pgina, conduzem informao mais rapidamente. Ateno dimenso, ao formato, aos pixis, s cores das imagens; a homogeneidade das imagens pode ser importante, principalmente se tiver perante cones, smbolos que representam texto. A imagem ( em formato de cone ou no) de representar o que quer representar, e ser o mesmo ambguo possvel

Cores - uma importante propriedade esttica numa pgina na Web. A cor pessoal e universal, transmite mensagens com interpretaes diferentes para utilizadores distintos. Cada cor tem numerosos significados associativos e simblicos: o azul calma, o verde pode

Mestrado de Tecnologias e Metodologias de E-Learning Unidade Curricular Sistemas Hipermdia

transmitir paz, ecologia ou futebol (Sporting;-)) e o vermelho fogo, revolta, etc. Na construo de uma pgina web o painel de cores a selecionar pode ser determinante no seu sucesso. Multimdia pode ser que tem a capacidade de combinar texto, grficos, udio e imagens em movimento. O vdeo e o udio tem vindo a ter a destacarem-se como elementos da web no s complementares como fundamentais. O formato e a dimenso do vdeo (janela) tm especificaes consoante a sua funo na pgina. O udio (podcast) pode incluir informao complementar ao texto existente (caso de notcia no Jornal online) Apesar de autores citarem o uso de frames, no considerei visto dar em desuso e no ser aconselhvel a sua utilizao (redimensionamentos desmedidos)

Aplicao prtica
O partido poltico espanhol Partido Popular possui um stio na Internet. Na construo do seu website definirem um conjunto de normas e regras respeitante organizao grfica e visual, uniformizando cones, logotipos, letra (fontes e tamanho), cores a utilizar. A guia de estilo a aplicar encontra-se disponvel em

http://www.pp.es/conocenos/guia_estilo.pdf

Figura 2 As representaes grficas permitidas para o logtipo

Mestrado de Tecnologias e Metodologias de E-Learning Unidade Curricular Sistemas Hipermdia

Figura 3 As tipografias permitidas para impresso e para pginas web

Figura 4 As Cores permitidas para diferentes elementos das pginas web

Concluso
As guias de estilo so referncias que permitem uniformizar os diferentes elementos que compem graficamente um website. Pretendem aumentar a usabilidade do website facilitando a navegao, a compreenso dos contedos e torna-lo agradvel e eficaz, alcanando o utilizador o objetivo pretendo inicialmente (quando aceder ao stio) e encontrando mais valias pelo percurso.

Mestrado de Tecnologias e Metodologias de E-Learning Unidade Curricular Sistemas Hipermdia

Referncias
Astrup, A., Jacobsen, J. C., & Astrup, J. (n.d.). HTML.net. BITMA. Disponvel a October 25, 2011, a partir de http://pt-br.html.net/ Krug, S. (2006). Dont make me think!: a common sense approach to Web usability. (K. Whitehouse, Ed.)Style (DeKalb, IL) (Second Edi.). Berkeley, California: New Riders. Retrieved from http://portal.acm.org/citation.cfm?id=557439 Langer, J. (1969). Web Engineering - The Discipline of Systematic Development of Web Applications. (G. Kappel, B. Proll, S. Reich, & W. Retschitzegger, Eds.)Annals of Physics (Vol. 54). MIT Press. Lynch, P. J., Horton, S. (2009), Web Style Guide Basic Design Principles for Creating Websites, 3nd Edition, Yale University Press, a partir de http://webstyleguide.com/