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:

Os seletores CSS nos permitem formatar determinadas partes do nosso código HTML de forma simples e abrangente. Dessa maneira, podemos especificar o que e quando queremos que determinada regra seja aplicada na nossa página. Isso gera uma codificação mais semântica e, sendo utilizada da forma correta, com zero redundância (o que é a nossa meta sempre).

  Seletor universal: Seleciona qualquer elemento.

Exemplo de utilização:

 HTML:

Padrão	Significado	Exemplo CSS
e	Seletor do tipo elemento: seleciona qualquer elemento <e>	e{   color: #000000; }

Padrão	Significado	Exemplo CSS
e f	Seletor contextual: seleciona qualquer elemento <f> que estiver contido num elemento <e>	h1 em{   color: blue; }

RENDERIZADO NO NAVEGADOR:

Padrão	Significado	Exemplo CSS
e > f	Seletor de elementos-filho: Seleciona qualquer elemento <f> (secundário) descendente direto de um elemento <e> (primário).	body > p{   line-height:1.3; }

 HTML:

Padrão	Significado	Exemplo CSS
e + f	Seletor adjacente: seleciona o elemento <f> que estiver imediatamente após um elemento <e>.	h1 + h2{   margin-top:-5mm; }

Padrão	Significado	Exemplo CSS
e.classe	Seletor de classe: Seleciona o(s) elemento(s) <e> em que se aplicou a “classe”.	h1.pastoral{   color:green; }

HTML:

RENDERIZADO NO NAVEGADOR:

Padrão	Significado	Exemplo CSS
e#id	Seletor de classe: Seleciona o(s) elemento(s) <e> identificado com um ID.	h1#chapter1{   text-align:center; }

HTML:

RENDERIZADO NO NAVEGADOR:

Padrão	Significado	Exemplo CSS
e,f	Agrupamento de seletores: Selecione os elementos <e> e <f> do agrupamento.	h1, h2{   font-family:sans-serif; }

Padrão	Significado	Exemplo CSS
e [atrib]	Seletor de atributo: Seleciona o elemento <e> que contenha o atributo indicado.	h1[title]{   color:blue; }

Padrão	Significado	Exemplo CSS
e [atrib=”valor”]	Seletor de atributo: seleciona o elemento <e> com o mesmo atributo e “valor”	span [class=exemplo]{   color:blue; }

HTML:

RENDERIZADO NO NAVEGADOR:

Padrão	Significado	Exemplo CSS
e [atrib~=”valor”]	Seletor de atributo: seleciona o elemento <e> em que “valor” de atributo esteja em uma lista de valores separados por espaços.	a[rel~=”copyright”]{   color:red; }

Padrão	Significado	Exemplo CSS
e [atrib|=”valor”]	Seletor de atributo: seleciona o elemento <e> em que “valor” do atributo seja idêntico a “valor” ou inicia-se com “valor”.	*[lang”=”pt”]{  color:red; }

Padrão	Significado	Exemplo CSS
a:link	Pseudo-classe link: Aplica-se ao elemento <a> com hiperlinks ou âncoras ainda não visitados.	a:link{ color:green; }
a:visited	Pseudo-classe visited: Ao contrário do 1º, aplica-se somente aos links já visitados.	a:visited{ color:blue; }
e:active	Pseudo-classe active: Aplica-se ao elemento <e> quando esse for ativado pelo usuário.	a:active{ color:red; }
e:hover	Pseudo-classe hover: Aplica-se ao elemento <e> quando o cursor estiver sobre ele, mas sem ativá-lo.	a:hover{ background-color:yellow; }

Padrão	Significado	Exemplo CSS
e:focus	Pseudo-classe focus: Aplica-se ao elemento <e> quando o foco estiver posicionado nele.	a:focus{ background:yellow; }
e:lang(val)	Pseudo-classe lang: Aplica-se ao elemento <e> se este estiver marcado com o idiota “val”.	html:lang(pt) { Quotes: ‘< ‘ ‘ >’; }

Padrão	Significado	Exemplo CSS
e:first-line	Pseudo-elemento first-line: Aplica-se à primeira linha do elemento <e>.	p:first-line{ text-transform: uppercase;}
e:first-letter	Pseudo-elemento first-letter: Aplica-se à primeira letra do elemento <e>.	p:first-letter{ Font-size: 3em; font-weight:notmal; }
e:before	Pseudo-elemento before: Aplica conteúdo especificado em posição anterior ao elemento <e>.	e:before{ content:open-quote; }
e:after	Pseudo-elemento after: Aplica conteúdo especificado em posição posterior ao elemento <e>.	e:after{ content:open-quote; }

RENDERIZADO NO NAVEGADOR: