1. position:static

A posição padrão para todos os elementos é: position:static, o que significa que o elemento nao esta posicionado e ficara onde ele normalmente apareceria em nossa página. Normalmente, ê não precisa definir esta propriedade.

 #div-1 {
position:static;
}

Resultado:

2. position:relative

Se voce especificar position:relative, entao, voce pode usar as propriedades top ou bottom, e left ou right para mover o elemento relativamente para onde ele normalmente estaria no documento.

Vamos mover a div-1 para baixo 20 pixels, e para a esquerda 40 pixels:

#div-1 {
position:relative;
top:20px;
left:-40px;
}

Resultado:

Note o espaço onde a div-1 normalmente estaria se nao tivessemos movido ela: agora é um espaço vazio. O proximo elemento (div-after) nao se moveu quando movemos a div-1. Isto porque a div-1 ainda ocupa este espaco no documento, mesmo que a tenhamos movimentado.

3. position:absolute

Quando você especifica position:absolute, o elemento é removido do documento e colocado exatamente onde voce mandar ele ir.

Vamos mover a div-1a ao topo direito da página:

#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}

Resultado:

Note que desta vez, como a div-1a foi removida do documento, os outros elementos na pagina ficaram com posições diferentes na página: div-1b, div-1c, e div-after moveram para cima porque a div-1a nao esta mais ali.

Note também que a div-1a foi posicionada no topo direito da página. É bom poder posicionar coisas diretamente na página, mas ela tem valores limites.

O que eu realmente quero é posicionar a div-1a relativa a div-1. E é ai que a position:relative entra de volta no jogo.

4. position:relative + position:absolute

Se nós colocarmos posicionamento relativo na div-1, qualquer elemento dentro da div-1 será posicionado relativamente a div-1. Então, se colocarmos posicionamento absoluto na div-1a, nós podemos mover ela para o topo direito da div-1:

#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}

Resultado:

5. two column absolute

Agora nós podemos fazer um layout "duas colunas" usando o metodo relative e absolute!

#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}

Resultado:

Uma vantagem em usar posicionamento absolute e que nós podemos posicionar os elementos em qualquer ordem na pagina. Entao eu coloco a div-1b antes da div-1a. Mas espere, o que aconteceu com os outros elementos? Eles estao escondidos pelo posicionamento dos elementos que estao em absolute. O que podemos fazer sobre isso?

6. two column absolute height

Uma solução é configurar uma altura fixa para os elementos.

Mas essa não é uma solução viavel para a maioria dos designers, porque nós normalmente nao sabemos quanto texto o elemento terá, ou o tamanho exato das fontes que serão usados.

#div-1 {
position:relative;
height:250px;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}

Resultado:

7. float

Para alturas variaveis de colunas, posicionamento absolute nao funciona, entao vamos tentar outra solução.

Podemos usar "float" em um elemento para empurrar ele o maximo para direita ou esquerda que for possivel, e permitir que o texto se encaixe nele. Isto é tipicamente usado para imagens, mas vamos usar para tarefas mais complexas em layouts (porque é a unica ferramenta que temos).

#div-1a {
float:left;
width:200px;
}

Resultado:

8. float colunas

Se usarmos o "float" em uma coluna para a esquerda, e uma para a direita, elas vao se empurrar automaticamente.

#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}

Resultado:

9. float em colunas com o clear

Then after the floating elements we can "clear" the floats to push down the rest of the content.

#div-1a {
float:left;
width:190px;
}
#div-1b {
float:left;
width:190px;
}
#div-1c {
clear:both;
}

Resultado:

Bom galera, acho que é isso. É um bom exemplo para quem esta querendo fugir das tabelas!

Postem duvidas e sugestões ai nos comentários, teremos o prazer de ajudar

Até o proximo monstro!

Traduzido daqui.

Para te ajudar, vamos falar um pouco dela e das novas tags que vem por ai. Não se assuste, esse monstro aqui será seu amigo (pelo menos creio eu).Ao que tudo indica, a tão sonhada Web Semântica de Tim Berners-Lee está no caminho de acontecer e o HTML 5 pode ajudar bastante a chegar lá. Como pode observar, o sistema de divisão de marcações é todo feito por tags. Nessa nova linguagem, algumas dessas “etiquetas de marcação” mais objetivas. De modo geral, com essas e as outras novidades, será muito mais fácil navegar pela Internet!

O HTML 5 veio para tornar mais rápida a navegação em sites!

Tags Canvas

Fazer pequenas edições e criar imagens a partir de JavaScript ficou muito mais simples!

Especializadas em renderizar imagens em bitmap, as tags canvas serão específicas para a edição breve de imagens através de APIs ou JavaScript. Esse tipo de edição acontece pura e exclusivamente de maneira muito similar a outros geradores de imagem em duas dimensões (2D). Além disso, as Canvas Tags são compatíveis com as folhas CSS.

Tags de vídeoIncorporar vídeos ao seu site ou blog não depende mais de códigos extensos!

Incluir vídeos em HTML como conhecemos hoje, utilizando códigos para o “embed”, ou seja, incorporar vídeos à página será muito mais simples. O HTML 5 possui tags específicas para a inserção de vídeos no corpo da página. Basta inserir a tag de vídeo assim como se faz com aquela destinada às imagens.
Assim, será necessário indicar uma “src”, ou seja, “source” (fonte) que nada mais é do que a origem do vídeo. A inserção de imagens em HTML funciona com a seguinte linha:

Esta linha de comando vai inserir imagens na sua página

Para os vídeos a situação será muito semelhante ao que é feitos hoje com as imagens. Assim como a edição rápida de atributos tais como “height” (altura) e “width” (largura) também poderão ser feita diretamente no código e totalmente personalizados pelo desenvolvedor da página ou do usuário que desejar criar algo completamente novo e aprender novas técnicas.

Geolocalização

APIs ajudarão a localizá-lo onde quer que você esteja!Saber onde você está não é uma informação importante só para os seus pais, namorados ou namoradas. O HTML 5 também possui maneiras de descobrir a sua localização e informá-la aos sites e serviços que você acessa. Os APIs serão o ponto forte para determinar a localização de um usuário.
Por isso, este recurso de geolocalização permite o que se chama de “geottaging”. Através disso, pode-se fornecer ao usuário conteúdos específicos para o local em que ele está. É muito útil para aplicativos de smartphones, uma vez que este recurso envia e recebe informações a respeito de onde o indivíduo está.
Acesse aplicações mesmo que elas estejam offline!

Caching de aplicações

Agora, com o HTML 5 os aplicativos web poderão ser acessados offline via cache. De acordo com a publicação provisória da W3C, o arquivamento desses aplicativos será feito via URL em que cada uma delas possui uma categoria diferente. As entradas mestre são aqueles documentos que foram adicionados ao cache por um contexto de navegação indicado por um atributo de manifesto. Já o manifesto é a fonte da URL indicada na Entrada mestre do HTML. Esses arquivamentos ainda podem ser agrupados ou não.

Base de dados
Armazenar dados do seu site fica mais simples!

Apesar de não ser um recurso muito utilizado por usuários não desenvolvedores, os bancos de dados são importantes para os sites. No HTML 5, algumas vantagens serão implementadas como a possibilidade de entradas de valores ou palavras chave, além do banco de dados SQL.

E o que muda para o usuário?

Se você possui um perfil um pouco mais ligado às novidades tecnológicas, sentirá boas diferenças ao navegar pela Internet. Isso porque o HTML 5 irá facilitar muito a vida de todos nós – quer sejamos desenvolvedores ou apenas usuários. Para os desenvolvedores, fica mais rápido produzir sites cada vez mais fáceis e limpos para que os usuários possam aproveitar ao máximo cada uma dessas melhorias.

Muita coisa que vai mudar pode facilitar sua vida!

Você irá notar que colocar vídeos do YouTube no seu site ou blog ficará cada vez mais simples, assim como os conteúdos específicos direcionados para você que está procurando por uma padaria ou locadora de filmes pelo navegador do seu smartphone. Os conteúdos possuem a tendência de serem convergentes, assim como a linguagem de programação. O HTML 5 vem exatamente para facilitar esse processo!

Já está preparado para as mudanças? Você já tem algum conhecimento sobre linguagens de programação? Acesse a documentação oficial no site do W3C clicando aqui! Agora imagine que você é o responsável por desenvolver uma nova linguagem de programação. Quais recursos implementaria?

Para ver as novas tags, clique aqui.

Ocorre que um vício de grande parte do desenvolvedores hoje, munidos de seus poderosos editores WYSIWYG, é construir seus layouts usando tabelas, que não é a tag semanticamente correta para construção de layouts. Por conta disso começaram a chamar o desenvolvimento semanticamente coerente de "Tableless".

No nosso próximo post, vamos fatiar o nosso primeiro monstro!

Bem vindos ao animado mundo do Blogaremos!, um conjunto de gente que cansou de explicações complexas e mal feitas sobre Design/Programação and Afins, e resolveu fazer pior ainda.

Enorme Abraço, att Rodolfo Pozzi.

Com as grandes navegações, a Lógica foi levada aos outros países do mundo.

Infelizmente, graças ao Tratado de Tordesilhas, essa incumbência coube à Espanha, o que explica por que a lógica nunca chegou ao Brasil.

A parte mais básica da Lógica é o estudo dos argumentos. O exemplo mais conhecido é o silogismo de Sócrates:

• Sócrates é mortal.
• Todo homem é mortal.
• Logo, todo homem é Sócrates.

Outro exemplo

• O amor é cego.
• Deus é amor.
• Stevie Wonder é cego.

Logo Stevie Wonder é Deus.

Mais um belo exemplo:

Quanto mais queijo suíço, mais buracos dentro dele. O buraco = menos queijo. Logo, quanto mais queijo, menos queijo.

Os argumentos mal construídos podem se transformar em tautologias ou em contradições. As primeiras referem-se às falas dos políticos, médicos e apresentadores de tevê, que formulam frases que aparentemente têm conteúdo, mas na realidade nada significam.

Contradição é um argumento em que a conclusão contraria as premissas, que por sua vez concordam com a conclusão, o que é um paradoxo.

Entenda melhor a lógica

• Se você gosta de peixes, é lógico que você tem aquários.
• Se você tem aquários, é lógico que você tem uma casa grande.
• Se você tem uma casa grande, é lógico que você tem uma família grande.
• Se você tem uma família grande, é lógico que você é casado.
• Se você é casado, você não é gay. a menos que seja casado com um homem, no caso, também gay, e tenha filhos adotados

Resumindo, se você não tem um aquário em casa, você é gay. Essa é uma das explicações ciêntíficas mais aceitas até hoje sobre a lógica.

Para os que não entenderam nada do que foi postado, assim como o editor aqui, vou dar uma breve explicada. Esta coluna abordará o assunto que tira o sono de muitos nerds por ai... Programação! Sim, este monstro que habita nossos chips... Aqui, ele será morto e fatiado, deixando vocês com mais tempo para dormir.

Abraços e boa leitura

John