Aplicações Para Internet 5 CSS, Resumos de Desenvolvimento de Aplicações para Internet

Baixe Aplicações Para Internet 5 CSS e outras Resumos em PDF para Desenvolvimento de Aplicações para Internet, somente na Docsity!

Aplicações para Internet

**- Layouts

• Construindo Laytout e Mesclando Estilos
• Frameworks de Grid
• A Regra CSS para Mídia: @media**

· Web Standards ; · Wireframe ; · Modelagem de aplicação WEB; · Criação de layouts ; · Layouts responsivos e adaptativos.

OBJETIVO DE APRENDIZADO

Layouts

Orientações de estudo Para que o conteúdo desta Disciplina seja bem aproveitado e haja uma maior aplicabilidade na sua formação acadêmica e atuação profissional, siga algumas recomendações básicas:

Assim:

Organize seus estudos de maneira que passem a fazer parte da sua rotina. Por exemplo, você poderá determinar um dia e horário fixos como o seu “momento do estudo”.

Procure se alimentar e se hidratar quando for estudar, lembre-se de que uma alimentação saudável pode proporcionar melhor aproveitamento do estudo.

No material de cada Unidade, há leituras indicadas. Entre elas: artigos científicos, livros, vídeos e sites para aprofundar os conhecimentos adquiridos ao longo da Unidade. Além disso, você também encontrará sugestões de conteúdo extra no item Material Complementar, que ampliarão sua interpretação e auxiliarão no pleno entendimento dos temas abordados.

Após o contato com o conteúdo proposto, participe dos debates mediados em fóruns de discussão, pois irão auxiliar a verificar o quanto você absorveu de conhecimento, além de propiciar o contato com seus colegas e tutores, o que se apresenta como rico espaço de troca de ideias e aprendizagem.

Organize seus estudos de maneira que passem a fazer parte

Mantenha o foco!

Evite se distrair com

as redes sociais.

Mantenha o foco!

Evite se distrair com

as redes sociais.

Determine um

horário fixo

para estudar.

Aproveite as

indicações

de Material

Complementar.

Procure se alimentar e se hidratar quando for estudar, lembre-se de que uma

Não se esqueça

de se alimentar

e se manter

hidratado.

Aproveite as

Conserve seu

material e local de

estudos sempre

organizados.

Procure manter

contato com seus

colegas e tutores

para trocar ideias!

Isso amplia a

aprendizagem.

Seja original!

Nunca plagie

trabalhos.

UNIDADE Layouts

Layouts

Layout é um termo da língua inglesa que faz parte dos dicionários de língua portuguesa também utilizada como leiaute. O conceito pode traduzir-se como plano, arranjo, esquema, design, projeto e é bastante usado no âmbito das tecnologias.

Layout Líquido

Trata-se de uma organização de conteúdo que se adapta ou se molda ao tamanho da janela.

Veja as telas abaixo e conforme o dispositivo elas devem se comportar de forma diferente, apresentando o mesmo conteúdo.

Figura 1 – Janela cheia

Figura 2 – Tela Ipad

UNIDADE Layouts

Figura 5

Figura 6

Mesmo a janela aumentando o conteúdo permanence ocupando o mesmo espaço.

Flutuação – Float

A propriedade float foi criada para fazer com que os elementos flutuem à direita ou à esquerda de um conteúdo.

Figura 7

Construindo Laytout e Mesclando Estilos

Layout Líquido com Float

• (^) Todos os blocos (divs) tem seu tamanho definidos com porcentagem
• (^) Margens e “Paddings” devem ser definidos com porcentagens.
• (^) Todos os blocos flutam para a esquerda
• (^) O bloco que inicia uma nova linha deve ter a propriedade clear: left ;

Problema:

• (^) não é desejável que as margens, os ‘paddings’ sejam de tamanho variável e as bordas somem.

Código:

Figura 8

a cor de fundo darkcyan, elemento deslocado e móvel a esquerda com do tamanho de 44%, no identificador d a cor de fundo é darksalmon , elemento deslocado e móvel a esquerda e o tamanho do elemento em 25% e por último o identificador e com cor de fundo darkseagreen , texto centralizado e o utilizando o elemento clear:left , estamos criando uma nova sessão, ou seja, o próximo elemento que será inserido estará abaixo das divs que foram criadas.

Resultado:

Figura 12

Figura 13

Layout Parcialmente Líquido com Float

• (^) Todos os blocos (divs) têm seu tamanho definidos em pixels , menos o blo- co central;
• (^) Margens, “Paddings” e bordas devem ser definidos em pixels ;
• (^) Há blocos que flutuam para a esquerda e outros para direita;
• (^) O bloco que inicia uma nova linha deve ter a propriedade clear: both.

UNIDADE Layouts

Problemas:

• (^) Os blocos à direita têm que vir antes do bloco central no HTML;
• (^) Definir a margem do bloco central pode ser confuso.

Código:

Figura 14

Figura 15

Explicando:

Observem que nesse documento temos a seguinte disposição a, b, d, c e e.

Figura 16 – Aplicando css as camadas divs

Explicando:

Todo elemento div no documento html será configurado para ter uma borda de 1 pixel , sólida e cinza. A margem de 5 pixel e espaçamento entre os elementos de 5 pixel.

UNIDADE Layouts

Resultado:

Figura 18

Figura 19

Layout Congelado com Float

• (^) Todos os blocos de layout devem estar dentro de um bloco que os contém, comumente chamado “wrapper” ou “container”
• (^) Este bloco deve ter uma largura ( width ) determinada e ser centralizado. Para isso se define uma margem automática, o que faz o sistema colocar a mesma margem do lado direito e esquerdo: margin : 0 auto ;

Problema:

• (^) como dentro do “wrapper” se utiliza uma das duas técnicas descritas, os

mesmos problemas aparecem aqui.

Código:

Figura 20

Figura 21

Explicando:

Observem que nesse documento temos a seguinte disposição a, b, d, c e e.

Figura 22 – Aplicando css as camadas divs

Aplicando estilo:

Figura 24 Explicando: O elemento id wrapper terá o tamanho fixo de 960 pixel e margin:auto para centralizar o elemento horizontalmente onde ele está contido.

Resultado:

Figura 25

Figura 26

Problemas de Layout usando Float

• (^) Dependência da ordem dos blocos no HTML (quando se usa float: right ; a ordem fica estranha)
• (^) Margem e borda de tamanho variável ou de cálculo complicado
• (^) Fica no controle do programador manter as larguras das colunas coerentes em linhas diferentes.
• (^) A altura dos blocos em uma mesma linha ou devem ter tamanho fixado (o que pode ser ruim se o conteúdo for alterável) ou ficam de tamanhos diferentes.

UNIDADE Layouts

Frameworks de Grid

Framework é um conjunto de códigos (ou biblioteca) que estendem uma linguagem, ou seja, que ‘criam’ novos termos com novas funcionalidades. Os Frameworks de Grid normalmente são criados em um arquivo CSS. Este arquivo deve ser anexado à página onde o Framework deve ser usado. Na sua maioria, eles oferecem classes preparadas para criar o wrapper (que pode ser de tamanho fixo ou não) e blocos cuja largura ocupa uma certa quantidade de ‘colunas’ do grid.

Figura 27 – Framework 960.css

O usual é que haj am 12 ou 16 colunas Usando o 960.gs

• (^) Baixe o framework (http://960.gs/)
• (^) Crie a página HTML com divs para layout dentro de uma div wrapper e dispostos na ordem correta, mas sem nenhuma informação de layout no CSS
• (^) Coloque o arquivo 960.css na pasta e faça o link para ele no arquivo HTML:
• (^) No wrapper , adicione a classe container_ Em cada div, adicione uma classe de acordo com o espaço que o bloco irá ocupar no layout :

Figura 28

Assegure-se de em cada linha ocupar exatamente doze colunas.