Curso: Sistemas e Mdias Digitais Disciplina: Autorao Multimdia Professor: Wellington Wagner

Equipe do Trabalho Final: Diego Porto Django Torres Natanael Bandeira

Autorao

Fortaleza, quatorze de fevereiro de 2013.

Sitemap

Wireframes

Paleta de Cores

Da esquerda para a direita:

- #2B2B2B - #EAEAEA - #db7030 - #F7F7F7

Fontes Utilizadas
- Bleeker - Arial - Tahoma

Mockups

Modificao do CSS Arquivo orange.css

Um dos problemas encontrados com o template escolhido foi a questo das fontes que servem como ttulos para as sees. Originalmente, a fonte que veio junto com o template foi a Bebas. Ela se encaixava perfeitamente com o layout do site, porm no era uma fonte acentuada. Para corrigir esse problema, foi feito uma pesquisa na nossa planilha de tipografia, e constatamos que a fonte Bleeker, utilizada para ttulos no recurso, cairia bem tambm no site. Pela fonte originalmente utilizada no template ter sido colocada em uma pasta para que pudesse ser instalada no servidor, a primeira coisa que eu fiz foi abrir o arquivo no Dreamweaver e sair procurando a propriedade @font-face.

@font-face { font-family: 'Bebas'; src: url('fonts/BebasNeue-webfont.eot'); src: local(''), url('fonts/BebasNeue-webfont.woff') format('woff'), url('fonts/BebasNeue-webfont.ttf') format('truetype'), url('fonts/BebasNeue-webfont.svg#webfontAGQ6uv7S') format('svg'); font-weight: normal; font-style: normal; }
Substitu a fonte original, fazendo o upload tanto da verso .otf quanto .ttf da fonte

@font-face { font-family: 'Bleeker'; src: url('fonts/Bleeker.otf'); src: local(''), url('fonts/Bleeker.ttf') format('truetype'); font-weight: normal; font-style: normal; }

Apesar do que escrito no site da w3schools, que diz que o IE9 apenas suporta fontes no formato .eot, ao fazer o teste utilizando a verso mais recente do navegador as fonte funcionou perfeitamente. Aps a troca das fontes, dei control+f no arquivo e sa substituindo todas as linhas que tinham meno a fonte Bebas, substituindo pela Bleeker. Divs modificadas:

h1, h2, h3, h5 { font-family: Bebas, Arial, sans-serif; font-weight: normal h4 { font-family: Bebas, Tahoma, Arial, sans-serif; color: #579dcf; font-size: 20px; font-weight: normal; } ul#navigation { font-family: Bebas, Arial, sans-serif; text-align: right; list-style: none; margin: 70px 30px 0 0; } .slogan { font-family: Bebas, Arial, sans-serif; font-size: 24px; line-height: 26px;

color: #616161; margin: 30px 0 15px 0; } .overlay h5 { font-family: Bebas, Arial, sans-serif; font-size: 22px; color: #579dcf; font-weight: normal; margin-bottom: 20px; } .comments-section h3 { text-align: right; font-size: 26px; font-family: Bebas, Arial, sans-serif; color: #616161; margin-bottom: 30px; }

Incluso de overflow personalizada no campo de postagem

Originalmente a idia seria colocar na seo Documentos PDFs externos, incorporados na postagem no formato de widget, hospedado pelo Scribd. Porm ficamos sabendo de ltima hora que no era possvel desse modo, e que todo o texto teria que ser colocado via HTML. Para no criar uma pgina gigantesca com todos os documentos, a melhor soluo foi criar uma overflow, de modo a limitar o tamanho dos textos presentes em cada documento na tela, permitindo que o leitor visse mais dele atravs de uma barra de rolagem. Foi criado a seguinte div para que isso fosse possvel:

<div style="overflow: auto; background-color: #ffffff; border: 1px solid; height: 606px; widht: 572px; padding-top: 25px; padding-bottom: 25px; padding-right: 50px; padding-left: 50px;"> </div>
Como podemos perceber, foi delimitado uma altura e largura para cada document, alm dos espaamentos adequados. Outros detalhes presentes nessa linha de cdigo incluem cor do fundo e tamanho e tipo da borda.