Programação de sítios de Internet: Template Layout

O que é Document Flow?

É a forma em que os elementos HTML são apresentados na tela do computador ou em um dispositivo mobile,ou seja, como eles são RENDERIZADOS no navegador.

Elementos no HTML são classificados em dois grupos:

* Elementos Block-level.

-Block-level é um elemento com display:block

-Gera um box que preenche a área do elemento pai

-Não aceita elementos ao seu lado

-Quebra de linha antes ou depois dele

-Min-width/max-width

-Div é um elemento bock por padrão

Abaixo segue a lista de todos os elementos block-level:

<aside>

<audio>

<dd>

<div>

<dl>

<form>

<hr>

<ol>

<p>

<pre>

<table>

<tfoot>

<ul>

<video>

*Inline Level

-Inline-level é um elemento com display: inline

-Gera um box que não quebra a linha(como um texto)

-O tamanho é determinado pelo seu conteúdo

-Elementos inline podem conter somente elementos inline

-Nao aceita margem

-line-height e vertical-align

Abaixo tem uma lista com alguns elementos inline:

<em>

<a>

<abbr>

<dfn>

<code>

<samp>

<kbd>

<var>

<b>

<i>

<u>

<small>

<s>

<span>

<br>

<bdo>

<cite>

<del>

<ins>

<q>

<sub>

<wbr>

<area>

<img>

<map>

<param>

*Propriedade Position

Para posicionar um elemento HTML de uma forma especial, usamos o position. O position é uma propriedade CSS muito útil caso você precise alterar o document flow

Existem 3 tipos de position:

*Position Fixed

*Position inherit

*Position Absolute

*Position Relative

*Position static

Fixado - O elemento é posicionado em relação à janela de navegador

Estático - Padrão. Elementos processar em ordem, como eles aparecem no fluxo de documentos.

Absoluto - O elemento é posicionado em relação ao seu elemento primeiro ancestral posicionado (não estático).

Parente - O elemento é posicionado em relação à sua posição normal, por isso "a esquerda: 20" adiciona 20 pixels para a posição esquerda do elemento.

Herdar - O valor da propriedade position é herdado do elemento pai.

PROPRIEDADE FLOAT:

O Float é uma propriedade que faz o objeto flutuar à esquerda ou à direita do restante do conteúdo. Existem dois atributos que podemos colocar em float:

*left

*right

Ex:

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

.conteudo { float: right; width: 60%; }

Propriedade clear

A propriedade clear é usada para controlar o comportamento dos elementos que se seguem aos elementos floats no documento.

Por padrão, o elemento subsequente a um float, ocupa o espaço livre ao lado do elemento flutuado.

A propriedade clear pode assumir os valores left, right, both ou none. A regra geral é: se clear, for por exemplo definido both para um box, a margem superior deste box será posicionada sempre abaixo da margem inferior dos boxes flutuados que estejam antes dele no código.

Problemas de Pushdown e possíveis soluções:

Frequentemente as pessoas têm problemas com questões de “empurrões”. Quer sejam elementos fixos ou fluidos, ambas as DIVs têm uma largura especificada. Eles supostamente comportam-se como elementos flutuantes, ou seja, se um elemento dentro da área do conteúdo principal tem a largura maior que toda esta área (por exemplo, uma imagem muito larga) ele simplesmente se estende através e cobre qualquer coisa que esteja “no caminho”. A forma como o IE6 trata isso é bem diferente. Se um elemento tem a largura maior que a de seu elemento pai, no IE6 a barra lateral vai ser simplesmente empurrada para baixo (“pushdown“), quebrando completamente o layout.

Uma solução é não colocar elementos com largura maior que a de seu elemento pai. Para se proteger melhor, e se seu layout funciona de outra forma (não especifique alturas), você pode trabalhar com “overflow:hidden” para esconder algo que seja preciso. Ainda há outra solução, que seria usar posicionamento absoluto para posicionar a barra lateral mais à direta. Lembre-se, entretanto, que posicionamento absoluto retira o elemento do fluxo da página – algo para se levar em consideração.

Problemas crossbrowser e possíveis soluções:

Cross-Browser significa a habilidade de um site ou aplicação web de suportar múltiplos navegadores indiferente da tecnologia, seja HTML, CSS ou algum script client-side, como Javascript. Mais que suportar múltiplos navegadores, o ideal é que este site seja visualizado de forma idêntica independente do sistema operacional, resolução ou navegador conforme foi planejado.

Solução:

1) Identifique a resolução do seu público-alvo

Antes de abrir qualquer programa para desenhar o layout, veja qual resolução seus usuários mais utilizam, então poderá criar as telas para seu público-alvo. Para realizar tal tarefa utilize um serviço de Web-Analytics, como o Google Analytics que fornece não somente esta, mas diversas estatísticas sobre seu site.

Este processo facilita o planejamento das alterações sejam elas pequenas atualizações ou grandes reformas.

2) Trabalhe em cima das Web Standards

Procure trabalhar em cima das Web Standards, e se houver Javascript certifique-se que é não-obstrutivo, assim as chances do seu site estar visível e funcionar para um maior número maior de usuários aumenta.

3) Faça testes em diversos navegadores

Testar para mim é uma das fases mais importantes no processo de desenvolvimento, seja em criação de sites ou programação de um software, embora muitas vezes por falta de tempo ou verba esta fase, principalmente em projetos web, é esquecida ou colocada em segundo plano. Realize todos os testes de todas, ou as principais, páginas do seu site nos mais variados navegadores.

Quando se lida com IE6 é que, se você aplicar uma margem (CSS “margin”) no mesmo sentido que o float (“left” ou “right”), ela deve ser o dobro da margem. Para o IE7, existe um pequeno truque sobre sua maneira peculiar de não respeitar margens inferiores (CSS “margin-bottom”) em elementos filhos dentro de objetos flutuantes.

4) Realize os testes primeiro em navegadores modernos

E quando realizar os testes, faça primeiro em navegadores que estão atualizados e tem amplo suporte as novas tecnologias, como o Mozilla Firefox e Google Chrome, e posteriormente rebaixe seu projeto aos outros navegadores.

TEMPLATE LAYOUT:

A propriedade float é muito simples. O problema não é o funcionamento, mas os efeitos que a propriedade float causa nos elementos próximos. Se você pede para duas colunas ficarem flutuando à esquerda e outra coluna à direita, o rodapé sobe. Ou se você coloca um elemento envolvendo outros elementos com float, esse elemento perde a altura. Estes são problemas corriqueiros que já tem soluções inteligentes e que não apresentam chateações mais graves.
Infelizmente o float não é o ideal para a diagramação e organização dos elementos do layout. Ele resolve muitos problemas, mas deixa a desejar em diversos sentidos. O float está completamente ligado a ordem dos elementos no HTML. Existem técnicas que você consegue fazer quase que qualquer organização visual sem encostar no código HTML. Mas há outras necessidades que invariavelmente você precisará modificar a ordem dos elementos no meio do HTML para que a diagramação do site saia conforme o esperado. Essa organização do HTML pode alterar desde programação server-side e até resultados de SEO e acessibilidade. Por isso é interessante que o HTML fique organizado de forma que ele supre as necessidades dessas bases. Sua organização visual deve ser independente desta organização.

Template-based positioning:

São uma alternativa para a propriedade position com o valor absolute. Antigamente lembro-me que quase todos os desenvolvedores tentavam organizar e diagramar layouts utilizando position. Não que seja errado, mas definitivamente não é a melhor forma. Costumo dizer em meus cursos e palestras que position é para detalhes. Nada muito grande, mas para pequenos detalhes. Usamos position para posicionarmos elementos que não tem relação direta com sua posição no código HTML. Ou seja, não importa onde o elemento esteja, o position:absolute; irá posicionar o elemento nas coordenadas que você quiser.