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

Posts da TAG ‘html’

Porque só para o iPhone?

Engraçado como desde o lançamento do iPhone, muitas empresas e desenvolvedores se mobilizaram para fazer versões de sites e sistemas para iPhone. Me chama a atenção porque antes disso nunca ninguém (ou quase ninguém) se interessava de verdade em fazer uma versão para dispositivos móveis, muito menos uma versão para um dispositivo específico.
Ok, ok… Você deve estar falando que o iPhone virou hype, moda e etc. Mas isso não é o bastante. Muitos dispositivos já fizeram barulho antes. Acho que o buraco é mais embaixo.
Continuar lendo »

12 Comentários

Não “otimize” seu código

Quando fazíamos sites com tabelas, o grande problema era a quantidade de código que escrevíamos. Naquele tempo – 1996, 97, 98 – tínhamos outros pontos que precisavam de uma atenção maior. A conexão era lerda para todo mundo e isso dificultava um bocado as coisas. Por isso, fazer um site pesado era fora de cogitação. Ficávamos “mendigando” cada byte para que o site ficasse milésimos de segundo mais rápido. Continuar lendo »

78 Comentários

Navegando com a jQuery

Para os designers, familiarizar-se com a jQuery é um ato muito sutil. Isso se deve ao fato da mesma basear-se em um comando ( jQuery ou o seu atalho $ ) que referencia elementos e assim atribuir valores ou aplicar ações a eles. O mais interessante é que usamos as mesmas chamadas que usamos para referenciar elementos quando trabalhamos com CSS. Logo:

$('p') // Chama todos os paragrafos
$('.menu') // Chama os elementos que contenham a classe menu
$('#caixas .chamada') // Chama os elementos .chamada que estão dentro de #caixas
$('.menu, .box') // Chama a classe menu e a classe box
$('#lista *') // Chama todos os elementos que estão dentro de #lista

Continuar lendo »

10 Comentários

Sobre hipertextos

A linguagem básica de desenvolvimento para web é a HTML. O nome completo seria “Linguagem de Marcação de Hipertexto” - HyperText Marckup Language, que é o termo em inglês de onde se origina a abreviação HTML.
Durante muito tempo, nós desenvolvedores, ignoramos a importância da HTML. É ela que dá significado para a informação exibida e consumida na web. Por isso, é importante que saibamos suas características e em quais conceitos a HTML é baseada. Para começar a HTML é uma maneira de escrever hipertextos. Continuar lendo »

18 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 »

19 Comentários

Browser Targeting Version

Para que possamos entender melhor o assunto do IE8 e como ele tratará as páginas, é bom que possamos entender o que houve no passado. Se você se lembrar bem como foi entre os anos de 1999, 2000 e 2001, provavelmente você vai lembrar que durante algum tempo, tínhamos que nos virar para garantir a total compatibilidade dos nossos sites em diversos browsers. Os principais eram o IE5, IE6, Firefox e Opera. Era uma época que - como no começo da bolha - estava tudo acontecendo ao mesmo tempo. Os Padrões Web estavam virando moda, os browsers, pelo menos os mais inteligentes, estavam se virando para suportar os Padrões Continuar lendo »

33 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

Email bom é TXT

Você é um sujeito antenado e sabe disso. Mas talvez seu chefe não saiba. Talvez seu cliente não saiba. (Talvez você mesmo não saiba.) Ou por qualquer outro motivo, você pode se ver obrigado a enviar uma newsletter em HTML. E agora, o que você faz? Chuta o pau da barraca, abre o Dreamwaver e prepara “aquele” layout?

Você ainda pode, mesmo enviando emails em HTML, se preocupar em tornar melhor a experiência de seu usuário. Continuar lendo »

14 Comentários

Image-Replacement x Imagens

Este assunto é muito abrangente e divertido de ser debatido.
Portanto, se você discordar deste texto, quero que lembre que é minha opinião… claro, sempre podemos mudar de idéia.

Para não viajarmos muito, vamos pegar como pauta deste texto, o ponto que discutimos na “Lições Sobre Semântica #3″.
O ponto era fazer títulos com imagens ou image-replacement?

Bem, felizmente temos uma base para nos guiar… O código deve ficar o mais semântico possível.
Se o código deve ser semântico, já sabemos que as tags Hn que são usadas para definir títulos não podem ser descartadas, então elas devem continuar.

Ótimo, sabendo disso, vamos analisar as opções:

Colocoar a imagem dentro de uma tag Hn.
Fazer image-replacement sem tag span.

Eu poderia colocar como opção a técnica de image-replacement com tag span. Acontece que a tag span, suja nosso código, e queremos ter um código descomplicado.

Colocando a imagem dentro de uma tag Hn

A solução seria:
<h1> <img src=”imagem.jpg” alt=”Texto” /> </h1>

Hmm… Essa solução é bastante atraente…
Se o usuário desabilitar as imagens, ou se por ventura a imagem aparecer quebrada, o texto alternativo (alt) irá aparecer no lugar da imagem.
Os browsers mais modernos como Firefox tratam esse texto como um texto normal, dando até para você selecionar. E esse texto pode ficar com o estilo que você definiu no CSS para a tag de título.

Fazer image-replacement

A solução seria:
<h1> Texto </h1>

E assim, sumir com o texto pelo css e colocar a imagem como background.

Essa solução é muito, muito atraente…
Seu código não fica sujo com tags span ou tags img. Se a pessoa entra no site com algum tipo de browser baseado em texto, ela não terá problemas… Existe um porém.
Se o usuário desabilitar apenas as imagens, o texto não aparece.

Mas, agora vem a vantagem que fará você decidir o que fazer.

Se você optar por Image-Replacement, você terá uma flexibilidade que se colocando apenas imagens, você não teria.
Imagine que você tenha um site grande, e que todos os títulos tem que usar uma fonte maluca que o designer escolheu… Fatalmente estes títulos terão que ser imagem.

Um certo dia, o cliente se encheu da fonte maluca e decidiu que a fonte dos títulos devem mudar para Verdana.
Se você tivesse colocado as imagens direto no código, você teria que procurar cada uma das imagens e mudar para texto.
Se você fez com image-replacement, bastava desabilitar a image do background e fazer o texto aparecer… Muito, mas muito mais fácil.

Agora é com você. Essa é a principal diferença.
Os robos de busca, indexam os texto alternativos das imagens bem como o texto do image-replacement, então, não há problemas com isso.

Como disse, o assunto é bastante abrangente. E não é só este “problema” que existe. Mas o importante é analisar o caso, e aplicar a melhor solução para o caso.

10 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:

Facilidade de Manutenção
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.

6 Comentários

Voltar para o topo

Outros posts

Aprenda