TEMPLATE LAYOUT

O QUE SERIA UM DOCUMENT Flow ? 

Documentos de fluxo são projetados para otimizar a visualização e a legibilidade de um código css, Ao invés de ser definida como um layout pré-definido, documentos de fluxo e refluxo ajustar dinamicamente o seu conteúdo com base em tempo de execução variáveis ​​

Propriedade POSITION;

Com Analise nas aula a propriedade Position é uma propriedade perigosa para nós iniciantes, Pois Normalmente o desenvolvedor acaba de conhecer essa propriedade e acha que ela é a resposta para todos os problemas de posicionamento e diagramação de layout, pelo contrario  o position não serve para diagramar a estrutura de layouts, para isso você ultiliza a propriedade flot do css. O position vai servir dentro do css para fazer coisas mais simples.

Propriedade FLOAT :

O float é uma propriedade meio que imprevisível dentro do css, logo vou explicar porque , para começar vou usar uma estruura Html simples com 3 tags Div.

<div class = “tudo”>

<div class=”menu”>menu</div>

<div class=”conteudo”>conteudo</div>

</div>

O float á uma propriedade que faz o objeto flutuar á esquerda ou á direita do restante do conteúdo. Se quisermos o menuá esquerdae o conteúdo á direita , o que nós desenvolvedores geralmente temos que nós atentar :

·         
Menu {float; left; width; 30%}

·         Conteúdo  {float; right ; width: 60% }

Mas isso pode gerar uma serie de dores de cabeça mais a frente no desenvolvimento, vou detalhar o que pode dar errado o porque

Essa Técnica gera – principalmente no Internet Explorer – 2 erros de renderização

Ex: Float sobrepõe o resto do site

Note que a borda da div pai que chamamos de “ tudo não está acompanhando os div’s internos (menu e conteúdo)

·         Para forçar a div “ tudo” a circular também os objetos com o float, mude o seu modo de exibição table desta forma :

tudo { display: table;}

UPTADE: um hack que pode funcionar melhor que o display é uma div com clear : both depois de todas os div’s flutuantes

Clear { clear: both;}

<div class=”clear”> </div>

Obs: Float: right não alinha com o Float: Left

Quem já encontrou este problema sabe o quanto e chato . Em alguns casos, as colunas não ficam uma do lado da outra NUNCA, por mais que tentamos.

Para corrigir isso devemos usar o float da maneira correta. Ao invés de colocar float:left no da esquerda e float: right: no da direta, colocamos apenas no da esquerda e deixamos o da direita alinhar naturalmente com um espaço da margem

Menu   { float:  left: width: 30% }

Conteúdo { margin – left: 30% }

Temos o código combinando de html e css

<! - - csss - - >

<style rel = “ stylesheet “ type=”text/css”>

tudo { display: table;}

menu {float : left: width : 30%;}

conteudo { margin – left: 35%}

</style>

<!- - HTML - - >

<div class=”tudo”>

<div class=”menu”>menu</div>

<div class=”conteudo”>conteudo</div>

</div>

Propriedade CLEAR:

Os elementos Flutuantes são removidos do fluxo do documento e não exercem nenhum efeito sobre os elementos adjacentes. Mas aplicar a propriedade clear a um elemento abre um espaço vertical para todos os elementos flutuantes anteriores.

Está propriedade ajuda e muito em layouts e resolve problemas de layouts que foram criados com a propriedade position:absolute que trataremos em artigos futuros.

Suponhamos que você deseje criar um layout de 3 colunas. Você usaria um div conteiner (para abrigar suas DIVs), um DIV menu esquerda, DIV conteúdo e DIV menu direita.

Vamos ao exemplo:

Código XHTML

<div id=”moldura”> -- este é o DIV contêiner

<div id=”menuesquerda”></div>

<div id=”conteudo”></div>

<div id=”menudireita”></div>

</div> -- fim da moldura

Código CSS

#moldura {

width:800px;

margin: 0 auto;

padding::0;

}

#menuesquerda {

width:200px;

float:left;

padding: 5px;

margin:0;

}

#conteudo {

width: 400px;

float:left;

padding:0;

margin:0;

}

#menudireita {

width:200px;

float: right;

padding:5px;

margin:0;

O elemento moldura está vazio pelas flutuações dos divs. Se você colocar uma cor de fundo no DIV moldura verá que não surtirá efeito algum, pois ele está sem conteúdo pelos floats dados aos elementos dentro dele.

E como fazemos para a DIV moldura inclua os elementos flutuantes? Existem duas maneiras de se fazer isso. Particularmente não vou entrar em detalhes das duas, mas sim da que eu acho mais limpa e segura para todos os navegadores. Iremos utilizar a propriedade CLEAR. Infelizmente, não temos um elemento para aplicarmos a propriedade CLEAR neste documento. Então criaremos um elemento vazio para termos o resultado que queremos. Uma DIV vazia CLEAR.

Código XHTML

<div id=”moldura”> -- este é o DIV contêiner

<div id=”menuesquerda”></div>

<div id=”conteudo”></div>

<div id=”menudireita”></div>

<div class=”clear”></div>

</div> -- fim da moldura

Código CSS

#moldura {

width:800px;

margin: 0 auto;

padding::0;

}

#menuesquerda {

width:200px;

float:left;

padding: 5px;

margin:0;

}

#conteudo {

width: 400px;

float:left;

padding:0;

margin:0;

}

#menudireita {

width:200px;

float: right;

padding:5px;

margin:0;

.clear {

clear: both;}

Problemas de pushdowne possíveis soluções:

Falso posicionamento absoluto

O posicionamento absoluto é definido pelo valor absolute da propriedade position. Assim:elemento{ position:absolute }.

O que costuma confundir os menos experientes é que o posicionamento absoluto é, de fato, relativo. Deu um nó na cabeça? Ainda não? Pois bem, continuemos.

Quando um elemento é posicionado absolutamente, sua posição é computada de acordo com a posição do elemento “posicionado” mais próximo, que o contém. Elemento “posicionado” é qualquer elemento que tenha seu posicionamento definido como relativo, absoluto ou fixo. Quando não há nenhum elemento “posicionado”, a posição é computada com relação ao elemento body, quando o documento for HTML (incluindo documentos XHTML enviados como text/html) ou html, quando o documento for XHTML de fato (enviado como application/xhtml+xml). Além disso, o elemento é removido do fluxo normal da página.

Problemas crossbrowser e possíveis soluções:

HTML5 Atributos de mídia e criança fonte Tags

Os elementos de áudio e vídeo introduzem vários novos atributos que determinam como o navegador irá apresentar o conteúdo de mídia para o usuário final.

·         src especifica um único arquivo de mídia para reprodução (para várias fontes com diferentes codecs, por favor, consulte a discussão abaixo).

·         cartaz é uma URL para uma imagem a ser exibida antes de um usuário pressionar Play (apenas vídeo).

·         pré-carga determina como e quando o navegador irá carregar o arquivo de mídia usando três valores possíveis: Nenhum significa que o vídeo não irá baixar até que o usuário inicia a reprodução; metadados diz ao navegador para baixar dados apenas suficientes para determinar a altura, a largura e a duração da mídia; auto permite que o browser decida quanto do vídeo para iniciar o download antes do usuário inicia a reprodução.

·         reprodução automática é um atributo booleano usado para iniciar um vídeo assim que a página for carregada (dispositivos móveis muitas vezes ignoram isso para preservar a largura de banda).

·         loop de é um atributo booleano que faz com que um vídeo começar de novo quando ele atinge o final.

·         silenciado é um atributo booleano especificando se o vídeo deve começar silenciado.

·         controles de é um atributo booleano indicando se o navegador deve exibir seus próprios controles.

·         largura e altura dizer um vídeo para exibir em um determinado tamanho (vídeo só; não pode ser uma porcentagem).

Controles de texto cronometrado

Navegadores também estão começando a implementar o elemento track, que fornece legendas, fechado legendas, traduções e comentários a vídeos. Aqui está um vídeo elemento com um elemento de faixa de criança:

1.     

2.              <video id="video1" width="640" height="360" preload="none" controls>

3.      <track src="subtitles.vtt" srclang="en" kind="subtitles" label="English subtitles">

4.    </video>

5.            

Neste exemplo, eu usei quatro dos cinco atributos possíveis do elemento de faixa:

·         src é um link para um arquivo da Web Video Timed Text (WebVTT) ou um arquivo Timed Text Markup Language (TTML).

·         srclang é o idioma do arquivo TTML (tais como PT, es ou ar).

·         tipo indica o tipo de conteúdo de texto: legendas, legendas, descrições, capítulos ou metadados.

·         rótulo contém o texto exibido para um usuário escolhendo uma pista.

·         padrão é um atributo booleano que determina o elemento de faixa de inicialização.

WebVTT é um formato baseado em texto simple que começa com uma declaração de linha única (arquivo WEBVTT) e, em seguida, listas de iniciar e término vezes separados por--> caracteres, seguido pelo texto a ser exibido entre as duas vezes.Aqui é um simple arquivo de WebVTT que irá exibir duas linhas de texto em dois intervalos de tempo diferentes:

          WEBVTT FILE

00:00:02.5 --> 00:00:05.1

This is the first line of text to display.

          00:00:09.1 --> 00:00:12.7

This line will appear later in the video.

       

Template Layout: