>>> INTERFACE
> Está ligado à área de Interação Humano-Computador (IHC), estudo da interação
entre pessoas e computadores, interface é quem provê a interação entre os dois.
Antes isso era feito pela linha de comando e, depois, pelas interfaces gráficas
(Graphical User Interface - GUI)
> O foco do estudo da interface envolvia, sobretudo, o hardware e o software,
e o ser humano simplesmente tinha que se adaptar ao sistema criado. Depois, com o
avanço da tecnologia e do acesso a computadores, melhorar a interação se tornou
mais essencial ainda.
>>> INTERFACE DO LADO CLIENTE
> A evolução tecnológica levou a um crescente uso de dispositivos móveis que
têm vários tamanhos de tela e funcionalidades. E sobre essa variedade dos
dispositivos usados como interface pro acesso à aplicação no ambiente web, é
preciso garantir a usabilidade (sistemas flexíveis e fáceis de aprender/usar, tendo
um design responsivo)
>>> DESIGN RESPONSIVO
> A página web/aplicação acessada tem que poder se ajustar automaticamente e
responder às preferências do usuário, sem precisar ter que criar várias versões da
mesma página pra diferentes tipos e tamanhos de dispositivos.
> Na prática, usamos uma combinação de técnicas como layouts fluidos, media
query e scripts.
>>> LAYOUTS FLUIDOS
> Usa unidades flexíveis, usando valores também flexíveis, adaptabilidade ao
campo de visão conforme dimensões do dispositivo que visualiza a página.
>>> LAYOUTS FIXOS
> As dimensões (largura e altura) dos elementos de uma página web são definidos
com o uso de unidades de medidas fixas, como os pixels (menor ponto que forma uma
imagem digital). Então eles não se adaptam às alterações no tamanho do campo de
visão dos dispositivos que os visualiza.
* Além dos valores percentuais, há também as unidades de medida:
- EM: Unidade de medida tipográfica, relacionada à letra “M”. O tamanho base
dessa unidade equivale à largura da letra “M” maiúscula.
- REM: Enquanto o EM está relacionado ao tamanho do elemento de contexto (ou
seja, definimos o valor EM de um elemento tomando como base o seu elemento pai), no
REM definimos que o elemento de contexto, o elemento pai, será sempre a tag HTML
<body>. Daí a letra “R” nessa unidade, que faz referência à raiz (root).
>>> MEDIA QUERY
> Uso de media types (tipos de mídia) a partir de uma ou mais expressões para
definir formatações para dispositivos diversos. Com o seu uso podemos, por exemplo,
definir que determinado estilo de um ou mais elementos seja aplicado só a
dispositivos cuja largura máxima de tela seja igual ou menor que 600px.
<style type="text/css">
@media (max-width: 360px)
{
.menu-lateral {
display: none
}
}
</style>
*** Esse fragmento de código em que uma media query é usada para impedir que um
menu lateral (o elemento HTML cuja classe equivale a “menu_lateral”) seja exibido
caso a largura da tela do dispositivo seja menor que 360px. Pra todos os
dispositivos cuja largura de tela seja superior a 360px, o código CSS em questão
será ignorado.
> Os resultados das expressões usadas na media query pode ser verdadeiro ou falso.
Outras expressões podem ser usadas, como a definição do tipo de mídia (media type)
— um estilo que se aplica só a um ou mais tipos de documento, como a versão para
impressão de uma página web, por exemplo — e a combinação entre escalas de valores.
>>> SCRIPTS
> Linguagens de programação que rodam no computador, mais comum é o javascript,
que dá interatividade à página web. No design responsivo, seu papel mais importante
é a atualização dinâmica de conteúdo e sua apresentação.
>>> DESIGN RESPONSIVO
Usa uma combinação de técnicas pra ajustar um site
O design responsivo é mais complexo, mas mais flexível. Já o adaptativo é mais
trabalhoso, embora menos flexível.
>>> DESIGN ADAPTATIVO
Principal
(continuar)
