Tableless - Padrões Web com Pastel e Caldo de Cana

Posts da TAG ‘tableless’

« Posts antigos

Browsers para Mobile - Nova era

Pense um pouco e tente lembrar de pelo menos uma maneira de acessar a internet que não seja a partir de dispositivos móveis ou computadores (notebooks e desktops). Difícil, não é?
Hoje, conhecemos bem apenas um meio de acessar a internet que é o computador. Estamos começando agora a navegar decentemente com dispositivos móveis, como um PDAs ou Smartphones. Além do óbvio, não conhecemos os futuros reais problemas de usabilidade e arquitetura de informação dos sites destinados à estes aparelhos. Estamos apenas engatinhando. Continuar lendo »

4 Comentários

Layout Fixo / Fluido de 3 colunas em 8 Minutos

Na verdade a gravação foi feita em 7 minutos e 51 segundos.
Neste vídeo mostro como faço para criar um layout básico de 3 colunas. Esta técnica tem um diferencial: retirando apenas uma linha do CSS, o layout passa de fixo, para fluido (como o layout do submarino ou americanas). Isso dá várias possibilidades de layout para o designer e poupa muito trabalho da equipe ao redesenhar e modificar o layout.

Se quiser ver o exemplo com o código fonte, clique aqui.
Continuar lendo »

27 Comentários

Formulário Básico em 8 minutos

Na verdade ele foi escrito em 7 minutos e 51 segundos e foram escritos apenas o XHTML e CSS. Infelizmente está sem áudio.

O formulário, depois do link, é o “objeto” mais utilizado pelos usuários para interagir com o site. É questão de vida e morte para muitos profissionais. Se não for bem escrito, pode virar um inferno. Com as tags certas, você consegue fazer uma estrutura enxuta e fácil de customizar. Siga a regra áurea do desenvolvimento web: Keep It Simple Stupid. Continuar lendo »

16 Comentários

Lançamento do escritório do W3C no Brasil

O W3C está oficializando seu escritório aqui no Brasil. Para isso, eles estão fazendo um pequeno evento com alguns palestrantes e um recado em vídeo do Tim Bernes-Lee. A entrada é gratuita e aberta à todos.

O evento será dia 4 de Junho às 11h. Faça seu cadastro e leia mais informações.
Continuar lendo »

7 Comentários

Palestras da Visie

Estive um pouco sumido porque a Visie juntamente com o Tableless.com.br estão promovendo várias palestras sobre desenvolvimento web. Será uma palestra por mês até outubro, custando cada uma R$30. Se você é desenvolvedor, aproveite e faça sua inscrição.

As palestras vão desde Formulários (que é dia 29 deste mês), passando por JQuery (21/07) e terminando em Controle de Versão (13/10).

A lista de todas as palestras pode ser vista aqui: http://visie.com.br/treinamento/eventos/.

5 Comentários

ELPI: Problema 5

Agora um com matemática. Quais os fatores primos do número 1321317089447443?

Esse é o último par de ingressos para o ELPI no Rio de Janeiro. A partir de quinta-feira publico os problemas para o evento em Porto Alegre.

20 Comentários

PDF grátis sobre XSLT

A Visie está disponibilizando um PDF grátis sobre XSLT.

A linguagem XSLT é utilizada para transformar dados de um formato XML em vários outros formatos. Há implementações de XSLT para praticamente qualquer linguagem de programação disponível hoje, incluindo PHP, JSP, ASP, ColdFusion, Python, Visual Basic, .NET e Delphi. No PDF estudamos os fundamentos e principais comandos da linguagem, permitindo a transformação de conteúdo baseado em XML em formatos como TXT, CSV, HTML e o próprio XML. Continuar lendo »

17 Comentários

Metatags - Breve introdução de uso e teoria

Metadados são dados sobre dados. Informações sobre a própria informação. Metadados são estruturas de informações que descrevem características de uma fonte de informação.
Metadados servem para ajudar seres humanos ou máquinas a localizar e descrever informações, melhorando o gerenciamento e uso destas informações.

Existem uma série de padrões para se criar Metadados, mas por você ser um possível profissional que trabalha com web, a que vai te interessar mais são as Metatags. Continuar lendo »

31 Comentários

Informação e Formatação; As duas camadas de desenvolvimento web

Se você já leu alguma coisa sobre Tableless, já deve ter percebido que nesse método nós separamos a informação da formatação.
Para fazer a formatação do site, ou seja, para literalmente aplicarmos o design do site, nós usamos o CSS (as famosas Folhas de Estilo), que eu julgo ser a principal ferramenta do desenvolvedor para criar sites tableless. Para a apresentação da informação, você pode usar HTML ou XHTML, o que você achar mais apropriado.

A separação entre informação e formatação traz muitas vantagens, mas vou citar apenas duas, divididos em dois artigos:

  1. Facilidade de Manutenção
  2. Maior produtividade

Então, vamos ao que interessa.

Facilidade de Manutenção

Separando a informação da formatação, você já organiza grande parte do código, pois você os separa em arquivos distintos, um arquivo .css para a formatação e outro arquivo .html (.asp, .php. seja lá o que for) para a informação. Esta simples organização, lhe permite fazer com rapidez e objetividade qualquer tipo de manutenção, sendo ela grande ou pequena.

Imagine a seguinte situação:
Você está no final daquele grande projeto, aquele site em que você fica horas desenhando tabelas, puxando daqui e dali, acertando medidas, etc… e quando você olha para o lado para descansar um pouco as vistas, você chega a pensar que seguiu o coelho branco…
Então, sem mais nem menos seu chefe lhe chama para conversar sobre o projeto e fala que o cliente pediu para que todos os títulos do site mudassem de cor, você o olha desacreditado, e já contando silenciosamente quantos títulos tem no site, se dirige para sua mesa e decide por onde começar.

Se você não passou por esta situação, acredite, muitos desenvolvedores já passaram por isso.

Vamos supor que o desenvolvedor do exemplo acima, usasse para apresentar os títulos a tag <h1></h1>, ele simplesmente atribuiria pelo CSS um valor para que todas as tags <h1> tivessem a cor desejada, em poucos segundos, ele mudaria a cor de todos os títulos do site, e isso tudo, sem mexer no arquivo HTML, economizando o tempo que ele levaria abrindo vários arquivos para procurar as intermináveis tags <font color=”#666666″></font> somente para mudar uma simples cor. Problemas como este, não vão mais tomar o precioso tempo do desenvolvedor.

Agora, e se a manutenção não fosse simples assim? E se fosse mais um pouco complicada, como do tipo mudar todo o layout do site? E se você pudesse mudar todo o layout do site, mudando apenas um arquivo .css?
Em um site tableless, o código HTML fica livre de tags desnecessárias do tipo: <font> <center>, deixando você à vontade para modificar o visual do site usando apenas CSS, te dando total controle sobre localização de objetos, tamanhos, cores e famílias de fontes, medidas, alinhamentos de texto, etc…

Fazendo isso, você pode escrever vários arquivos CSS distintos, que modifiquem o visual do site completamente, e o melhor, sem tocar numa letra do arquivo HTML, ele continua sendo o mesmo.

Vários sites usam está técnica, deixando o usuário escolher o layout que mais lhe agrada, veja alguns exemplos:

Realmente é uma mão na roda, não acha?
Tudo organizado, formatação de um lado, informação do outro, sem complicação… Seu código fica enxuto, limpo, muito menor do que se você tivesse feito do jeito tradicional, lhe dando menos dor de cabeça, e mais tempo. Ainda por cima, você contribui para uma web mais semântica.

No próximo artigo trataremos sobre o ganho de produtividade observado com a aplicação da metodologia tableless.

Leitura Recomendada:
http://www.pedromendes.com/words/molly-200211-truelanguage1.html

5 Comentários

Centralizando um objeto na Horizontal e Vertical com CSS

Objeto no centro da tela

Uma das dúvidas mais freqüentes é esta: Como fazer para que um objeto fique no centro da tela usando css?
A resposta está nos passos abaixo!

Colocando a imagem:

Neste exemplo vamos usar uma imagem, mas você pode perfeitamente usar um div, o processo é o mesmo.
Coloque na imagem (ou no div) um nome de ID… Colocamos neste exemplo o ID com nome “centro”.

<img src=”imagem.gif” id=”centro” />

Veja o html deste passo.

Definindo as dimensões do objeto:

Agora, no css, defina as dimensões do objeto (imagem ou div).
Nossa imagem tem 100 x 100 px’s, então vamos definir no css que a largura será de 100px (width:100px;) e que a altura também será de 100px (height:100px;).

#centro {
width:100px;
height:100px;
}

Veja o html deste passo.

Alinhando:

Estamos quase no final, você pode perceber que o objeto está um pouco desalinhado do centro. Vamos agora posicioná-lo… É aqui começa o truque.
Defina para nosso objeto, uma posição absoluta (position:absolute;), ele deverá ficar a 50% de distância do topo (top:50%;) e 50% de distância do lado esquerdo do documento (left:50%;).
O css não usa o centro do objeto como referência para o posicionamento, mas sim as extremidades, portanto, o que ficará no centro depois deste código, será o canto esquerdo superior do objeto.

#centro {
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
}

Veja o html deste passo.

O grande final:

Eis o truque para tirar a diferença, não é nada de outro mundo.
Você irá definir ao objeto duas margens negativas… a margem do topo (margin-top) e a margem da esquerda (margin-left). Na margem do topo, você simplesmente colocará um valor negativo, este valor será a metade da altura do objeto, neste caso, será -50px (margin-top:-50px;) e no lado esquerdo você fará a mesma coisa, mas o valor será a metade da largura do objeto, neste caso -50px (margin-left:-50px;).

#centro {
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}

Veja o html final.

7 Comentários
« Posts antigos
Voltar para o topo

Outros posts

Aprenda

Histórico