2. CONCEITOS DE DESIGN DE SITES
1.Explicar os conceitos
Contraste - O analisador de contraste de cores é uma ferramenta para verificar se determinada
combinação de cores para o fundo e para o primeiro plano, oferece boas condições de visibilidade. Ela
dispõe ainda de funcionalidades que fazem simulações de determinadas condições visuais tais como a
cegueira cromática.
A determinação da "visibilidade de cores" baseia-se em dois conjuntos de algorítimos: Índice de
contraste de luminosidade e Diferença de cor e de brilho, sugeridos pelo World Wide Web Consortium
(W3C):
É importante lembrar que nem o índice de contraste de luminosidade nem o algorítimo de
combinação de cores sugeridos pela AERT são ou foram recomendações; são sugestões de dois grupos
de trabalho da WAI para auxiliar na determinação se o contraste entre duas cores é suficiente para
leitura por pessoas com restrições visuais.
Repetição - Os valores para a propriedade background-repeat devem ser utilizados em conjunto com a
propriedade background-imagem, para que seja possível determinar qual imagem será repetida.
Alinhamento - forma seguinte de alinhamento vertical e horizontal é uma combinação de:
Posicionamento absoluto
Margens negativas
Para começar entender como funciona esse método copie o código XHTML abaixo e insira dentro da tag
body:
view sourceprint?
1.<div id="limites">
2. <div id="conteudo">
3. <h1>Alinhamento vertical e horizontal com <abbr title="eXtensible Hypertext Markup
Language">XHTML</abbr> e <abbr title="Cascading Style Sheets">CSS</abbr></h1>
4. <p>Olá mundo!</p>
5. </div>
6.</div>
Nesse exemplo o elemento que precisa posicionar no meio da tela será a div#limites.
3. Como padrão de documento base para CSS coloque o seguinte reset:
view sourceprint?
1.* { margin: 0; padding: 0; z-index: 1; }
E agora para começar a posicionar a div#limites no meio da tela declare o seguinte código:
view sourceprint?
1.#limites { position: absolute; top: 50%; left: 50%; width: 680px; height: 400px; background-color: #eee; }
Isso vai fazer que a div#limites tenha os seguintes estilos:
posição absoluta
canto superior esquerdo a uma distância igual a 50% do tamanho da tela
largura e altura
fundo cinza.
Com isso o resultado será meio estranho visualmente, mas esta tudo ok.
Teoria das cores - Um objeto é verde porque de todos os comprimentos de onda, a única que ele não
absorve, então reflete, é o comprimento percebido por nós como verde. Já a intensidade vai depender da
quantidade de luz e outras variáveis.
Se um objeto não absorver nenhum espectro de onda é percebido como branco, enquanto que, se
absorver todos, é preto.
4. Esta informação é captada pelo olho por células localizadas na retina chamadas células cone e
bastonetes, estes últimos reconhecem a quantidade de luz. Com a quantidade destas células variando
entre as pessoas entendemos porque a mesma cor é percebida com diferença.
Color coding - Um objeto é verde porque de todos os comprimentos de onda, a única que ele não
absorve, então reflete, é o comprimento percebido por nós como verde. Já a intensidade vai depender da
quantidade de luz e outras variáveis.
Se um objeto não absorver nenhum espectro de onda é percebido como branco, enquanto que, se
absorver todos, é preto.
Esta informação é captada pelo olho por células localizadas na retina chamadas células cone e
bastonetes, estes últimos reconhecem a quantidade de luz. Com a quantidade destas células variando
entre as pessoas entendemos porque a mesma cor é percebida com diferença.
Tipografia – Essa propriedade deixa o site mais atrativo, como vemos o modelo abaixo:
@font-face{
font-family:'MinhaFonteAqui';
src:url('nomeArquivo.ttf')format('ttf'),
}
Estilo de escrita – Em CSS temos vários tipos de escrita, os especialistas sugerem que sejam utilizados
em seu site no máximo dois tipos de estilo de escrita.
2.Mapa do site
Antes de idealizar o site devemos criar o mapa do site, como mostrar a figura abaixo:
5. 3.Organização de arquivos
1º Utilize a declaração abreviada das propriedades.
2º Utilize identação para elementos encadeados.
3º Faça uma divisão lógica do seu CSS.
4º Estabeleça padrões de nomenclaturas para classes e Ids.
5º Especialize classes ao invés de criar seletores semelhantes.
6º Ordene as propriedades dos seletores.
4.Wireframe - Um wireframe de site web (ou também "wire frame web", "wireframe web", "web
wireframing") é um guia visual básico usado em design de interface para sugerir a estrutura de um sítio
web e relacionamentos entre suas páginas. Um wireframe web é uma ilustração semelhante do layout de
elementos fundamentais na interface. Normalmente, wireframes são concluídos antes que qualquer
trabalho artístico seja desenvolvido.
5.Mockup – Maquete virtual.
