Iniciando Layouts. No html5 existem algumas tags padrões para se iniciar Layouts. Estrutura Básica:

Transcrição

1 Aula 09 Iniciando Layouts No html5 existem algumas tags padrões para se iniciar Layouts. Estrutura Básica: header: é onde definimos o cabeçalho. nav: é onde definimos o menu ou a navegação do nosso site. article: é onde definimos um conteúdo da página, formulários, textos etc. section: é onde definimos uma seção do layout em um determinado elemento. aside: é onde definimos o local de informações importantes sobre o conteúdo principal do site, como por exemplo um menu lateral, guia de busca e etc. footer: é onde definimos o rodapé do layout.

2 Tipos de Layout A web pode ser dividida em 4 tipos de layout: fixo, fluido, adaptativo e responsivo, cada um possui características e maneiras de desenvolvimento. Layout Fixo: seu tamanho é definido pelo Web designer e se mantem independente do dispositivo usado para acessá-lo seja por um computador de mesa normal ou um dispositivo móvel, como smartphone ou tablet. O tamanho mais importante no layout fixo é a largura da página, devido a nós usuários utilizarmos a barra de rolagem da página de cima para baixo mais do que da esquerda para a direita. Um layout fixo tem a vantagem de ter a mesma aparência independente da resolução de tela do usuário: um site com 960 pixels de largura vai ter essa mesma largura não importando se o usuário possui uma alta ou baixa resolução de tela. Além disto, as largura das linhas não serão alteradas independentes do tamanho do navegador ou resolução do usuário, facilitando na leitura Layouts fixos também podem causar problemas, especialmente em monitores com resoluções muito baixas ou muito altas. Em resoluções baixas onde a largura da tela é menor que a do site, a página pode acabar aparecendo com uma navegação horizontal, dificultando a leitura Já em resoluções grandes, o site pode parecer ter muito espaço vazio nas laterais resultando em um excesso de espaço em branco e a necessidade de rolamento vertical maior do que o necessário.

3 O Web designer tem controlo sobre a forma como a informação é apresentada; As linhas de texto têm uma largura fixa e curta. Menor acessibilidade, uma vez que o layout não se adapta às necessidades do utilizador; Layout fluido: Ao contrário do layout fixo, o fluido (ou layout líquido ) visa fazer o conteúdo ocupar toda a tela do navegador, independente da resolução da tela, permitindo ao designer mostrar mais conteúdo em monitores maiores mas ainda se manter visível em telas menores. O layout líquido também fornece uma consistência em larguras relativas, permitindo que a página responda de forma mais dinâmica quando o usuário alterar o tamanho das fontes. O objetivo deste tipo de layout é de manter o mesmo peso espacial em todos os elementos. O layout fluido é como um líquido em um recipiente; ele ocupa todo o espaço, independente da forma. Por isso não temos telas circulares e a grande maioria é retangular então ainda é possível prever aproximadamente como o site vai parecer em monitores diferentes. Quem trabalha com layouts líquidos prefere trabalhar com medidas em porcentagem, que variam de acordo com o tamanho útil do navegador do usuário. Isto requer um pouco mais de paciência e testes constantes para acertar os detalhes.

4 Como no layout fixo, o layout fluido também tem suas desvantagens: além de ser mais difícil de controlar (por ter tamanhos variáveis dependendo de cada tela), colunas de texto podem ficar largas demais dificultando uma leitura confortável quando a resolução é muito grande e/ou o usuário usa o navegador em tela cheia. Além disto, é possível que haja problemas com elementos de largura fixa (como imagens) dentro de uma coluna líquida. Se a coluna ficar menor que a imagem, alguns navegadores podem aumentar a largura da mesma desconsiderando as limitações impostas pelo designer (que pode gerar quebra de layout). Por outro lado, outros navegadores podem sobrepor o texto com imagens para tentar manter as porcentagens corretas. Maior acessibilidade. Os conteúdos adaptam-se melhor à resolução. Os conteúdos ocupam toda a área visível, permitindo transmitir mais informação; Maior dificuldade na leitura de linhas de textos longos; Perde-se o controlo sobre o posicionamento de alguns elementos na página; Layout Adapto/Elástico: Um site com esse tipo de layout tem a facilidade de alterar de acordo com cada resolução nova. É similar a ter várias páginas estáticas para dispositivos diferentes, mas com apenas uma página de conteúdo. Isto é feito através do CSS (que vamos tratar numa aula futura deste curso) que é uma página com as regras de design independente da página do conteúdo. No layout elástico, é necessário ter várias páginas de CSS para resoluções diferentes a vantagem deste é que a experiência do usuário pode ser adaptada de acordo com cada dispositivo ou resolução de tela sem ter que mexer no conteúdo.

5 Adaptação do conteúdo à dimensão do browser / monitor; Maior garantia que as dimensões são as mais adequadas (proporcionais) e portanto maior legibilidade; Melhores resultados após um zoom no browser. Maior complexidade de implementação devido à matemática envolvida; Necessidade de mais iterações até se atingir o aspecto desejado.