Atendendo à necessidade de comunicar de forma detalhada e organizada toda a informação respeitante ao evento, quer para o público com interesse na par- ticipação activa, quer para comunicar ao público em geral, desenvolveu-se um
website especificamente para a Feira. O acesso a este manteve-se durante o
período correspondente, por meio de um lugar de destaque no banner de topo do website do município.
Este trabalho iniciou-se logo após a conclusão do cartaz. Concluída a progra- mação, este foi sendo actualizado, ainda offline, à medida que a informação ia sendo definida e entregue ao designer. Só após inserido o conteúdo relevan- te foi colocado online, coincindindo com a distribuição dos pendões (página 94), sendo que, devido a atrasos na confirmação de alguns grupos musicais, posteriormente ainda foram introduzidas algumas actualizações na programa- ção lúdica, .
Por se tratar de um website efémero, pois seria desactivado após o encerra- mento da feira, considerou-se que a solução mais adequada seria uma página de estrutura simples em HTML combinado com CSS, o que permitiria economi- zar recursos de produção, nomeadamente a nível de tempo para execução. Após ser avaliada de forma precisa a quantidade e a tipologia do conteúdo, foi desenhado um esquema que permitiu estudar e definir a sua distribuição em diferentes áreas, assim como criar uma hierarquia e começar a detalhar vários aspectos da programação (página 104).
Esta fase de planeamento, onde foram resolvidas uma série de questões impor- tantes, foi crucial e de grande utilidade para o passo seguinte, que consistiu em programar, numa folha de estilos CSS, a estrutura de base do website. Visto que as divisões, a sequência e as medidas já haviam sido definidas, este processo foi metódico e rápido. Esta folha de estilos, sendo vinculada à página HTML principal, permitiu fazer rápidas aterações na formatação do conteúdo, isto é, na formatação do texto e na estrutura programada em divs.
Para toda a programação deste website, assim como a inserção e actualização do conteúdo, recorreu-se a um software WYSIWYG.
Também na fase de planeamento foram definidos os elementos visuais para a composição gráfica da interface, permitindo avaliar e explorar a composição através da relação de todos os seus componentes.
Após aprovado o layout, e em consonância com o que havia sido definido pre- viamente, foram inseridos três banners responsive em HTML5. Para o primeiro, posicionado no cabeçalho, usou-se o cartaz da feira, com algumas subtilezas animadas. Sendo responsive em largura, à partida ocuparia toda a área do ecrã do utilizador, porém o seu redimensionamento mínimo estava condicionado à largura fixa das áreas não responsive, isto é, 1000px, impedindo a desconfigu- ração do layout, caso a página fosse visualizada em medidas inferiores. Mantendo as mesmas características responsive, foi criado um separador com publicidade do mel “Terras do Lince” e um mapa interactivo que permitia visua- lizar fotografias de vários espaços da vila de Penamacor. Este último apresenta- do como parte integrante do rodapé, o qual continha os contactos e logótipos das entidades organizadoras e financiadoras.
Sendo este website constituido por uma única página, o sistema de navegação
NOTA
CSS (Cascading Style Sheetss) em português Folhas de Esti- los em Cascata são um con- junto de regras de formatação que controlam a aparência do conteúdo em uma página da Web. O uso de estilos CSS para formatar uma página se- para o conteúdo da apresen- tação. O conteúdo da página — o código HTML — reside no arquivo HTML, e as regras CSS que definem a apresentação do código residem em outro arquivo (uma folha de estilos externa) ou em outra parte do documento HTML (geral- mente a seção de cabeçalho). A separação do conteúdo da apresentação torna mais fácil a manutenção da aparência do site em um local central, pois você não precisa atualizar cada propriedade em cada página sempre que é necessá- rio fazer uma alteração.
Fonte: https://helpx.adobe.com/br/ dreamweaver/using/cascading-style- -sheets.html, acedido a 26 de Janeiro de 2016
NOTA
DIV é um elemento utiliza- do na programacao HTM e formatado em CSS para definir especificidades e alojar o conteúdo dos layouts.
Fig. 59 / Estudo do layout já com anotações sobre a programação do website da Feira.
Fonte: Do autor (2015).
Fig. 61 / Esquema das folhas de programação vinculadas à página prin-
cipal em HTML.
Fonte: Do autor (2015).
foi posicionado no topo, e programado para se manter sempre visível facili- tando a interação do utilizador com a interface. E como forma de acrescentar algum dinamismo extra, ao se clicar nos hyperlinks do menu, ao invés de saltar instantaneamente para uma área específica, esta era apresentada tal como se se tivesse usado a rolagem do scroll. Esta funcionalidade foi conseguida com recurso à programação javascript.
Também as customizações visuais do texto foram geradas através de uma folha de estilos CSS. Embora se tivesse considerado que neste meio não se pode ter um controlo muito acurado sobre a visualização final das cores no ecrã de cada utilizador, estas, correspondentes à identidade, foram convertidas com máximo de fidelidade para o sistema hexadecimal.
Na impossibilidade de se obter a qualidade desejada no rendering da tipografia usada nos restantes materiais, para o texto corrido deste website foi utilizada a família Ubuntu, disponibilizada gratuitamente e com boas referências sobre o seu desempenho de leitura em meios digitais.
NOTA
Javascript é uma linguagem de script incorporada a um docu-
mento HTML. Historicamente, trata-se da primeira linguagem de scripts para a web. Esta linguagem é uma linguagem de programação que traz melhorias para a linguagem HTML, permitindo a execução de comandos do cliente, ou seja, em termos do navegador e não do servidor web.
Fonte: http://br.ccm.net/faq/2680-javas- cript-introducao-a-linguagem-javascript,
acedido a 26 de Janeiro de 2016
@font-face { font-family: ‘ubuntulight’; src: url(‘ubuntu-l-webfont.eot’); src: url(‘ubuntu-l-webfont.eot?#iefix’) format(‘embedded-opentype’), url(‘ubuntu-l-webfont.woff’) format(‘woff’), url(‘ubuntu-l-webfont.ttf’) format(‘truetype’), url(‘ubuntu-l-webfont.svg#ubuntulight’) format(‘svg’); font-weight: normal; font-style: normal; } @font-face { font-family: ‘ubuntulight_italic’; src: url(‘ubuntu-li-webfont.eot’); src: url(‘ubuntu-li-webfont.eot?#iefix’) format(‘embedded-opentype’), url(‘ubuntu-li-webfont.woff’) format(‘woff’), url(‘ubuntu-li-webfont.ttf’) format(‘truetype’), url(‘ubuntu-li-webfont.svg#ubuntulight_italic’) format(‘svg’); font-weight: normal; font-style: normal; } @font-face { font-family: ‘ubunturegular’; src: url(‘ubuntu-r-webfont.eot’); src: url(‘ubuntu-r-webfont.eot?#iefix’) format(‘embedded-opentype’), url(‘ubuntu-r-webfont.woff’) format(‘woff’), url(‘ubuntu-r-webfont.ttf’) format(‘truetype’), url(‘ubuntu-r-webfont.svg#ubunturegular’) format(‘svg’); font-weight: normal; font-style: normal; }
Fig. 62 / Código CSS utilizado para embeber os vários pesos da família tipográfica seleccionada para formatação do texto da página.
Fonte: Do autor (2015).
Fig. 63 / Ubuntu Regular. Um dos vários pesos desta família tipográfica utilizada nos textos do website da Feira “Terras do Lince”.
O código CSS, que permitiu embeber as várias fontes desta família, foi gerado através de uma funcionalidade disponibilizada no site fontsquirrel.com. O passo seguinte consistiu em criar uma folha CSS, destinada ao texto, e inserir nela esse código, para que pudessem ser criados os estilos baseados nestas fontes. Para melhorar a gestão dos vários tipos de ficheiros, foi criada uma pasta espe- cífica para armazenamento das fontes e do código CSS, sendo este vinculado à página HTML principal.
Contudo, nos títulos, foi mantida a família tipográfica que fez parte do sistema de identidade, recorrendo a imagens rasterizadas. Tratando-se de aplicações monocromáticas, foram exportadas para o formato PNG, que lhes permitiu reduzir o peso a poucos Kbytes.
Por último, como forma de assegurar que a interface e todas a funcionalidades correspondiam ao que tinha sido projectado, e que seriam apresentadas da mesma forma a todos os utilizadores, a página foi testada em vários dos nave- gadores mais utilizados e disponíveis no mercado.
@font-face { font-family: ‘ubuntuitalic’; src: url(‘ubuntu-ri-webfont.eot’); src: url(‘ubuntu-ri-webfont.eot?#iefix’) format(‘embedded-opentype’), url(‘ubuntu-ri-webfont.woff’) format(‘woff’), url(‘ubuntu-ri-webfont.ttf’) format(‘truetype’), url(‘ubuntu-ri-webfont.svg#ubuntuitalic’) format(‘svg’); font-weight: normal; font-style: normal; } @font-face { font-family: ‘ubuntumedium’; src: url(‘ubuntu-m-webfont.eot’); src: url(‘ubuntu-m-webfont.eot?#iefix’) format(‘embedded-opentype’), url(‘ubuntu-m-webfont.woff’) format(‘woff’), url(‘ubuntu-m-webfont.ttf’) format(‘truetype’), url(‘ubuntu-m-webfont.svg#ubuntumedium’) format(‘svg’); font-weight: normal; font-style: normal; } @font-face { font-family: ‘ubuntumedium_italic’; src: url(‘ubuntu-mi-webfont.eot’); src: url(‘ubuntu-mi-webfont.eot?#iefix’) format(‘embedded-opentype’), url(‘ubuntu-mi-webfont.woff’) format(‘woff’), url(‘ubuntu-mi-webfont.ttf’) format(‘truetype’), url(‘ubuntu-mi-webfont.svg#ubuntumedium_italic’) format(‘svg’); font-weight: normal; font-style: normal; }
Fig. 64 / Website da Feira “Terras do Lince”: Secção com a programação do evento.
Fonte: Do autor (2015).