Beatriz Torres - WD

O que é design responsivo:

Design responsivo é o design web que se adequa a qualquer tipo de dispositivo com acesso à internet. Diferente de sites fluídos, que tem somente seu tamanho diminuído de acordo com a mídia que estamos usando para acessá-lo, os sites responsivos modificam seu layout de acordo com a resolução da tela ao qual estão sendo apresentados. Esse conceito não é recente, mas visa uma única coisa: O conteúdo legível em um site, esteja ele sendo visto através de um desktop, notebook, tablet ou smartphone.

Passo a passo: Como criar um layout responsivo:

Antes de mais nada, um passo que é considerado crucial para a criação de um website decente: A ESTRUTURAÇÃO!

Pesquise sobre o conteúdo que o seu site abordará, veja outros sites do segmento, estude seus layouts, verifique seus pontos fortes e fracos, busque saber qual a melhor forma de organizar a informação e finalmente vamos para a formação do nosso wireframe. O wireframe pode ser rabiscado, não é necessário que seja extremamente detalhado, a ideia aqui é que tenhamos uma visão de como as áreas de conteúdo ficarão distribuídas nas telas. 

Como forma didática, começarei a mostrando um wireframe através do modelo desktop, então partirei para o tablet e posteriormente ao smartphone.

(Obs: as imagens utilizadas abaixo não são de minha autoria <s>preguiça</s>)

Este site é bem simples, como podemos ver teremos no <header> da página o logo e um <nav>. Abaixo uma <section> para o banner e em seguida 4 <articles> com foto e logo abaixo uma breve descrição de cada uma. Por último  temos também o <footer>.

Uma vez tendo o desenho base em mãos, podemos partir para a modelagem no photoshop (ou em qualquer outro software de criação). 

No monitor:
Assim ficará o nosso site após a sua concepção, ou melhor, essa será a estrutura das informações que conterão no nosso site quando ele estiver terminado. Aqui imaginamos um monitor de desktop ou notebook de resolução 1200.

Acessibilidade na web:
Diferentemente de quando o formato de paginas web foi criado e as páginas eram compostas somente de textos e hiperlinks, hoje em dia elas são um verdadeiro acervo de conteúdos multimídia (contendo não somente textos e hiperlinks, como também imagens, vídeos, áudio e animações), felizmente o desenvolvimento de tecnologias como html, css e javascript nos permitiu essa evolução.

O princípio primordial da W3C é:
“Princípios: uma web de todos, para todos e em todas as coisas.”

Partindo desse pressuposto, iniciamos aqui o nosso assunto: Acessibilidade na web!
O termo “acessibilidade web” refere-se à prática de projetar um website utilizando corretamente as semânticas HTML, de forma que mesmo pessoas com limitações físicas (cegos, daltônicos ou com baixa visão, dificuldades motoras e surdas, por exemplo) possam navegar e ter acesso às suas informações sem complicações.

Quando criamos uma página de conteúdo, é crucial que facilitemos ao máximo o compreendimento do seu conteúdo por parte do nosso navegante, nesse caso devemos deixar claro o que é uma citação, uma abreviação (com significado), uma palavra de outra nacionalidade, fonte ajustável (para míopes), fazer um adequado contraste de cores, criar um mapa de navegabilidade e etc. Mais uma vez enfatizo que qualquer um deve ter acesso às informações independente de condição física, internet ou navegador.

Utilizar a semântica HTML é saber usar corretamente as tags html, dando o verdadeiro sentido para sua existência, que é o de conceber um site que seja acessível à todos os públicos, sem restrição! Por este motivo, com a implementação do HTML5, tivemos mudanças muito boas em relação à estruturação de sites. Áreas específicas receberam  tags específicas (header, nav, footer, section e aside, por exemplo), essas tags que agora substituem as divs, dão uma real significância para a área que vão ocupar.
Um site acessível deve facilitar a navegação e nunca dificulta-la, aplica-se aí a arquitetura da informação, layout do site, formatação do texto, cores, formas e o próprio conteúdo.

A taquigrafia é um método que permite abreviar a escrita, tem como principal objetivo a facilidade e melhoria da velocidade da digitação.

Bastante utilizada e de grande importância na implementação do CSS, com a adaptação de conceitos taquigráficos, tornamos nossos códigos mais limpos e com menos linhas, dessa forma sua manutenção se dá de maneira mais simples e direta.

Como visto no post sobre Propriedades CSS, cada propriedade pode ter diversos valores.

Evitando sempre a redundância no código, repeti-las é considerado um crime hediondo, devemos sempre nos lembrar de que um verdadeiro desenvolvedor utiliza os códigos com sabedoria, então pra que repetir algo que já está lá?! Abaixo as técnicas de abreviação.

Técnicas abreviadas para fundo:

As "Media Types" foram criadas para o CSS com o objetivo de aumentar a acessibilidade do site por diversos meios, sejam eles: celulares, tablets, computadores e até mesmo telas de televisores.

Entretanto, as páginas muitas vezes não são necessárias apenas para visualização, como também para impressão, nesse caso  utilizamos os "media types" para facilitar ao navegador a identificação de qual dispositivo está acessando aquele site no momento.

Tipos de medias que podem ser aplicadas:

all: Com a definição do media, esse é o tipo padrão;

aural: Para sintetizadores de som;

braille: Para dispositivos táteis;

embossed: Para impressoras em braille;

handheld: Estilos para celulares de baixos recursos visuais;

print: Para impressão;

projection: Para projeções de slides, por exemplo.

Screen: Para qualquer dispositivo de telas coloridas;

tv: Para televisores.

Os dois "media types" mais utilizados são:

Screen: Para telas de dispositivos, sejam eles móveis ou não;

Print: Para impressoras, geralmente para dar uma boa qualidade para a página que pode ser impressa. 

Exemplo de sintaxe do screen:

<!DOCTYPE>

<html>

<head>

<link rel="stylesheet" type="text/css" a href="estilo.css" media="screen">

<title>Exemplo de utilização do screen</title>

</head>

<body>

                                <section>

                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris.

                                </section>

</body>

</html>

Exemplo de sintaxe voltado aos dispositivos de impressão:

<!DOCTYPE>

<html>

<head>

<link rel="stylesheet" type="text/css" a href="estilo.css" media="print">

<title>Exemplo de utilização do screen</title>

</head>

<body>

                                <section>

                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris.

                                </section>

</body>

</html>

Segundo o InfoWester, seguem umas dicas para páginas de impressão:

* Definir todas as cores em tons de cinza;

* Sublinhar os links, e de preferência imprimir seus endereços;

* Escolher uma fonte serifada para os textos, que é mais fácil de ser lida no papel, já que foi criada para isso;

* Definir as unidades de texto em pontos, e não em pixels;

* Remover elementos não essenciais, como menus, barras laterais e, dependendo do caso, anúncios publicitários;

* Quando aplicável, destacar o endereço do site e o autor do texto.

Efeito Cascata e Herança:

“O Efeito Cascata do CSS é controlado pela especificidade e pela herança das propriedades.” (EIS, Diego) http://tableless.com.br

O CSS (Cascading Style Sheet), já nos sugere através de seu nome, que o código e suas folhas são no estilo cascata, mas o que isso significa?

O Estilo Cascata é uma forma de organização de todo o código CSS, uma parte importante do Estilo Cascata é a Herança de seus elementos. Essa forma de organização divide os elementos em dois tipos: ‘elementos pai’ e ‘elementos filhos’, de forma que, ao dar determinada característica para algum elemento, outros elementos que dependem deste primeiro herdarão essa característica, dessa forma você poupa tempo e não tem a necessidade de ficar procurando vários elementos espalhados pelo código quando quiser fazer alguma alteração específica no estilo do seu site.

Exemplo:

div{

color: red;

}

/*Foi criada uma div e lhe atribuí a cor vermelha, no HTML eu incluí um texto dentro de uma tag <p> que foi inserida dentro da <div>. Automaticamente esse texto adquiriu a cor vermelha, este fato decorreu da herança de propriedade do CSS.*/

Exemplo prático:

Veja no html:

Veja no CSS:

Resultado na tela do navegador:

Mas existem também propriedades que não são herdadas pelos filhos, geralmente são propriedades que estão relacionadas a formatação de caixa, por exemplo: height, width, margin, padding e por aí vai.

Especificidade:

A especificidade define os detalhes dos elementos, por exemplo, ao definir no body as propriedades font-family, font-size e font-color, essas propriedades são herdadas por todos os elementos do arquivo. Com isso o texto ficará padronizado, entretanto, suponhamos que você queira diferenciar em algum aspecto algumas palavras que estão em ênfase no seu texto, a especificidade entra aí.

Exemplo:

No documento html eu adicionei uma passagem do grande texto “Lorem Ipsum”, decidi enfatizar algumas palavras que são cognatas do nosso português.

Utilizando somente o <em>, as palavras que estiverem dentro dele aparecerão em itálico.

Usei então o CSS para especificar que as palavras que estiverem entre a tag <em> terão o background amarelo.

Resultado: Além de ter ficado em itálico, as palavras ainda ficaram com um efeito de marca-texto, algo mais detalhado que o convencional. A especificidade está aqui pra adicionar detalhes singelos, mas que gerem boas alterações visuais na página, em muitos casos isso facilitem a leitura.

Link e @import:

A tag link e o @import são duas formas distintas que tem o mesmo objetivo: carregar um estilo css para uma ou mais páginas de um site.

Esses dois métodos, embora tenham a mesma finalidade, não têm as mesmas vantagens.

Link: A tag link do HTML vai dentro da tag <head> e é melhor interpretada pelos browsers e isso gera maior um desempenho.

Exemplo de sintaxe:

<head>

<link rel=”stylesheet” type=”text/css” a href=”estilo.css”>

</head>

@import: Diferente do link, é um código CSS e deve ser colocado entre as tags <style> que vão dentro do <head> do seu documento HTML, dessa forma, o CSS é inserido de forma embutida, embora esteja em um arquivo externo, para cada página é necessário criar um @import.

Exemplo de sintaxe:

<head>

<style>

            @import url(estilo.css);

</style>

</head>

Fonte de pesquisa: http://www.tableless.com.br

No post de introdução ao CSS falei bastante sobre suas propriedades, mas não dei nenhuma como exemplo, esse post é especial para a explicação de muitas delas que são bastante importantes.

Bordas:

border-top-width: /* Define a largura da borda superior. */

border-right-width: /* Define a largura da borda direita. */

border-bottom-width: /* Define a largura da borda inferior. */

border-left-width: /* Define a largura da borda esquerda. */

border-width: /* Define a largura de todos os lados da borda. */

border-top-color: /* Define a cor da borda superior. */

border-right-color: /* Define a cor da borda direita. */

border-bottom-color: /* Define a cor da borda inferior.  */

border-left-color: /* Define a cor da borda esquerda. */

border-color: /* Definição da cor geral de todos os lados da borda. */

border-top-style: /* Estilo da borda superior. */

border-right-style: /* Estilo da borda direita. */

border-bottom-style: /* Estilo da borda inferior. */

border-left-style: /* Estilo da borda esquerda. */

border-style: /* Estilo geral da borda. */

border-top: /* Aplica o estilo somente à borda superior. */

border-right: /* Aplica o estilo somente à borda direita. */

border-bottom: /* Aplica o estilo somente à borda inferior. */

border-left: /* Aplica o estilo somente à borda esquerda. */

border: /* Define uma borda que abrangerá todos os lados do elemento. */

Margens:

margin-top: /* Margem superior. */

margin-right: /* Margem direita. */

margin-bottom: /* Margem inferior. */

margin-left: /* Margem esquerda. */

margin: /* Margem aplicada a todos os lados. */

padding-top: /* Margem interna aplicada à parte superior do elemento. */

padding-right: /* Margem interna aplicada à parte direita do elemento. */

padding-bottom: /* Margem interna aplicada à parte inferior do elemento. */

padding-left: /* Margem interna aplicada à parte esquerda do elemento. */

padding: /* Margem interna aplicada a todos os lados. */

Cores e fundo:

color: /* Cor. */

background-color: /* Cor do plano de fundo.  */

background-image: /* Imagem de plano de fundo.  */

background-repeat: /* Repetição da img, opções: no-repeat | repeat | repeat-x | repeat-y */

background-attachment: /* Especifica se o background rola ou não junto ao texto: fixed | scroll */

background-position: /* Posicionamento do plano de fundo. */

background: /* Elemento de plano de fundo. */

Fontes tipográficas:

font-family: /*  Especifica uma linha de várias fontes.  */

font-style: /*Estilos da fonte: italic | normal */

font-variant: /* Se terá ou não variação tipográfica, podendo ser: small-caps (capslook pequeno) | normal*/

font-weight: /* Expessura (peso) da fonte: bold | normal */

font-size: /* Tamanho da fonte. */

font: /* Fonte. */

Texto:

text-indent: /* Identação, referente ao tab para a primeira letra do parágrafo */

text-align: /* Alinhamento do texto: center | left | right | justify */

text-decoration: /* Decoração do texto: underline | overline | nome */

letter-spacing: /* Espaçamento entre os caracteres. */

word-spacing: /* Espaçamento entre as palavras. */

text-transform: /* Transformação do texto. Maiúsculas ou minúsculas. */

Modelos de formatação visual:

float: /* Flutua o elemento para uma direção específica. Podendo ser: left | right */

clear: /* Ao flutuar um elemento, essa ação pode refletir em algum outro element, desalinhando-o. Para impedir isso, usamos o clear para ‘limpar’ esses efeitos e ele permanecer no lugar.*/

width: /* Largura. */

height: /* Altura. */

line-height: /*Tamanho relativo à fonte (em), seria algo como a expessura do espaçamento da linha*/

vertical-align: /* Alinhamento vertical. */

Listas:

list-style-type: /* Tipo dos ícones da lista. */

list-style-image: /* Imagens como ícones da lista. */

list-style-position: /* Onde o ícone será posicionado: outside | inside. */

list-style: /* Definição de que a lista terá um estilo. */