Pra fechar minha série de posts sobre os substitutos do HTML, vou falar agora do HTML 5, desenvolvido por um grupo liderado pela Apple, Opera e Mozilla. Senta que lá vem história texto.

Se você chegou agora, pode ser interessante ler meus textos anteriores sobre o assunto:

• XHTML2, HTML5 e outras coisas futuristas
• As Mudanças do XHTML 2.0

A primeira coisa que preciso dizer é em que o HTML 5 é diferente do XHTML 2. Sua maior preocupação não é separar definitivamente o conteúdo da apresentação. O HTML 5 é feito para ser uma linguagem de desenvolvimento de aplicações online. Nada de se preocupar com XML, nada de evitar usar um elemento só porque ele também interfere na aparência do conteúdo.

Pro inferno com as frescuras, eu quero é sites bons.

Esta nova versão do HTML começou a ser desenvolvida em um grupo fora do grande W3C. Fizeram isso justamente porque o W3C estava demorando demais pra criar uma nova versão (0 xhtml 1.0 foi publicado em 2000) e eles estavam trabalhando em algo que não resolvia os problemas dos sites ricos que temos hoje em dia.

O HTML 5 é feito para facilitar o desenvolvimento de aplicações web (e não apenas sites simples) e padronizar as coisas em todos os browsers.

Vamos ver todas as coisas legais que o HTML 5 traz pra nós.

Elementos estruturais

Aquele monte de <div> que a gente usa pra montar a estrutura do site vai ter um bom substituto agora. Pra facilitar uma padronização e permitir que os elementos tenham significado, criaram vários elementos estruturais que vão funcionar como o <div>, mas cada um com seu próposito.

Por exemplo, teremos o <header> para criar o cabeçalho do site (geralmente onde fica o logotipo, etc). Temos o <nav> para definir o menu de navegação, <article> para colocar o conteúdo principal do site, <aside> pra criar uma seção lateral, e <footer> pro rodapé.

Estrutura de um site padrão

Read more »

Outro dia eu fiz um resumo das duas tecnologias que estão vindo pra substituir o atual XHTML: XHTML 2.0 e HTML 5. Agora é hora de olhar mais a fundo pra proposta do W3C. Será que ele é tudo que precisamos? Será que é a resposta pros nossos problemas?

Desde a versão 1.0 do XHTML o consórcio W3C tem empurrado cada vez mais o HTML pro lado do XML. Mas essa versão foi feita pra tentar manter uma grande semelhança e compatibilidade com o HTML 4.01, e por isso acabaram mantendo muitos elementos de apresentação no XHTML. Agora, querem dar um grande passo. Querem remover tudo, querem fazer o XHTML que o W3C sempre sonhou. E com isso podem dizer adeus à retrocompatibilidade.

Quanto mais as coisas mudam, mais elas mudam

A idéia do W3C para o XHTML 2.0 é remover TODOS os elementos de apresentação. Ou seja, qualquer coisa no código XHTML que indique como o elemento vai aparecer na tela vai ser removido. Isso é trabalho do CSS. Nessa nova versão morrem as tags <img>, <a>, <br> e algumas outras.

Vai ter uma série de mudanças tão grandes que não existe compatibilidade com versões anteriores. Os sites precisarão ser refeitos para validar com as especificações do XHTML 2.0. O problema é que a maioria dos profissionais são ruins. Ainda hoje a maioria dos sites não cumpre nem as especificações do HTML 4.01, imagina se vão mudar pra se adequar a essa nova “linguagem estranha”.

Eu conheço ainda pessoas que nem sabem direito o que é CSS ou XHTML. Profissionais que montam seus sites usando a tag <font> pra formatar o texto, e outras coisas igualmente bizarras. Esse tipo de pessoa nunca vai querer reaprender tudo pra adotar o XHTML 2.0.

Vamos dar uma olhada em algumas das principais mudanças:

- Mataram o <a>. Agora tudo é link.

Todos os elementos do XHTML possuem alguns parâmetros padrão, como “id”. E agora o parâmetro “href” se junta a essa lista. Qualquer elemento poderá receber o parâmetro href e se tornar um link. Você vai poder fazer coisas como <p href=”http://disney.com”>…um monte de texto…</p> e terá um parágrafo inteiro funcionando como link.

- Adeus <br>. Olá <line>

Eles não querem que o XHTML tenha nada que force um jeito específico do conteúdo aparecer na página, então uma das primeiras tags a morrerem foi a tag de quebra de linha. Não tinha jeito de impedir, ela só servia pra uma coisa e pronto.

No lugar dela, entre a tag <line></line>. O padrão é que sempre que você fechar a tag o browser vai quebrar a linha, mas agora você pode evitar esse comportamento se quiser.

Read more »

Nós, gênios modestos que desenvolvem para a web, trabalhamos usando tecnologias que são bem antigas, se levarmos em conta a velocidade com que as coisas mudam. Em 1999 foi definido o XHTML 4.01, e no ano 2000 saiu o XHTML 1.0, que é a tecnologia mais atual para desenvolver os sites. O grande problema é que o foco dos sites (e o modo como são usados) mudou bastante nestes últimos 9 anos, e precisamos de algo diferente. Precisamos de algo que resolva nossos problemas. Precisamos do Batman!

(Acabei de receber um fax me proibindo de fazer piadas com super-heróis num site sobre programação. Eu garanto que não há nenhuma referência a um personagem famoso pelos próximos três parágrafos)

Duas grandes tecnologias estão sendo desenvolvidas e deverão estar disponíveis antes de 2099: XHTML 2.0, e HTML 5. A principal diferença entre elas é que o HTML 5 é uma evolução de tudo que temos hoje, e o XHTML 2.0 é tão diferente que é quase uma linguagem nova.

Explicando de uma forma clara, é como se o HTML 5 fosse o seu carro atual, mas com neón azul, turbina e aerofólios, e o XHTML 2.0 seria como vender o seu carro, tirar o seu dinheiro da poupança e comprar um novo importado, com marcha no volante e formato esquisito.

HTML5 está pronto pra briga!

O que me parece é que alguém perdeu completamente a noção da realidade. Mesmo hoje, a maioria dos sites não consegue validar nem contra as especificações do HTML 4.01. Uma boa parte dos programadores é tão ignorante que nem faz idéia do que é XHTML e com qual garfo se come isso. É muito otimismo acreditar que uma revolução completa na linguagem conseguiria uma grande adoção. Não quero ser muito pessimista, mas não acredito no futuro do XHTML, que é desenvolvido pelo consórcio W3C (World Wide Web Consortium).

Já o HTML 5 está sendo sendo desenvolvido pelo grupo WHATWG (na minha cabeça, isso é sigla para Why Have A Tomato With Guitars, “por que ter um tomate com guitarras”), formado pela Apple, Mozilla, e Opera. Sim, as grandonas do desenvolvimento de navegadores bons. A proposta do HTML 5 é pegar tudo de bom que temos até agora, acrescentar coisas ainda melhores, e corrigir as falhas para que todos os navegadores renderizem os sites da mesma forma. Incluindo os sites que não validam nem com o HTML 4.01. Isso sim parece bom. O que o Batman faria?

Vou te dizer o que o Batman faria. O Batman sabe que não é muito bom ter duas linguagens concorrendo pra substituir as tecnologias atuais. Ele vai esperar e observar até que, num futuro não tão distante (2030 é perto, não é?) as duas linguagens vão dividir os programadores por um tempo, mas depois uma delas vai ser esquecida e morrer. Porque o Batman é esperto. Ele sabe que HTML é como Highlander: só pode haver um. E apenas um dos grupos tem guitarras.

Uma coisa que eu costumava fazer bastante há alguns anos atrás era subestimar o meu código CSS. Sempre começava a escrever achando que ia ser uma coisa pequena e simples, e aí quando me dava conta eu tinha um código de centenas de linhas, confuso, e impossível de achar alguma coisa sem Ctrl + F.

Então eu desenvolvi 5 regrinhas que ajudaram meu CSS a ficar mais organizado, e mais fácil de mexer.

1- Usar um CSS Reset

CSS Reset é como tomar uma droga bem forte. Quem nunca usou acha que não é algo útil, ou até ruim. Mas depois que você experimenta não quer mais voltar atrás e ainda tenta convencer os outros a usarem também.

Apesar dos navegadores terem um ótimo suporte ao CSS, muitos deles tem padrões diferentes. Se você não definiu uma coisa, ela é exibida com o padrão do navegador, e isso pode fazer o seu site ficar com caras diferentes de acordo com o navegador do usuário.

O CSS Reset pega uma grande parte dos elementos visuais e padroniza eles, geralmente zerando ou definindo um novo padrão. Ele tira as bordas, as margens, os paddings, padroniza o tamanho da fonte, etc. A partir daí, você sabe que as coisas vão ficar mais certinhas em todos os navegadores e não vai ter nenhuma surpresa desagradável.

Recomendo Eric Meyer Reset, ou o fantástico YUI Reset.

Read more »

Há uns 8 anos atrás, Jeffrey Zeldman escreveu o artigo To Hell With Bad Browsers, onde ele implorava que os desenvolvedores passassem a ignorar o Netscape 4 porque o motor de renderização dele era uma grande porcaria. E parece que agora, novamente, o processo se repete. Vários sites começaram um protesto para fazer todo mundo parar de suportar o IE6 em seus sites.

Desenvolvedores do mundo todo estão aderindo a essa movimentação e parando de suportar o IE6. No dia 11 deste mês, vários sites da Noruega passaram a colocar também um alerta aos usuários deste navegador para que atualizem a versão.

Pra ser honesto, se eu fosse listar os 3 navegadores que eu mais odeio, eu diria Internet Explorer 6, Internet Explorer 7, e Internet Explorer 8. Nessa ordem. Só de você ter o  Internet Explorer como navegador padrão na sua casa, o meu respeito por você cai aproximadamente 350%.

Pro inferno com navegadores ruins!

Um método interessante pra incentivar as pessoas a mudarem é não só parar de suportar, mas também alertar os usuários e ainda disponibilizar uma página explicando o problema e como se faz o upgrade pra uma versão mais nova. Quem sabe a pessoa não acaba até abandonando o Internet Explorer de vez? Ou será que estou sonhando alto demais?

O site quirksmode.org criou a página Upgrade your browser! onde explica para o usuário como o IE6 é ruim e porque ele precisa fazer o upgrade. Podemos usá-la como inspiração para criar páginas semelhantes em português.

Então vamos todos forçar esses filhos de uma taturana a abandonar o Internet Explorer 6 de uma vez por todas! Coloque um aviso no seu site que só será visto por quem usa essa versão.

Veja o código condicional abaixo:

<!--[if lte IE 6]>
  <p class="ie6"><strong>IE6?</strong> Sério? Não acha que já passou da hora de um <a href="/upgrade.html">upgrade para uma versão mais nova</a>?</p>
<![endif]-->

Deixe de suportar o IE6. Coloque um código condicional no seu site. Vamos tirar essa âncora dos nossos projetos e dar o grito de liberdade: Pro inferno com navegadores ruins!

O Firefox é um navegador muito bacana, muito legal. Eu o respeito muito por ser o principal responsável por roubar fatia de mercado do Internet Explorer. Mas tem uma coisa que me irrita muito nele: o outline obrigatório que ele coloca nos links e botões.

A maldição do outline no firefox

Veja a imagem acima. Se você usa o Firefox, com certeza já viu esse pontilhado ao redor de algum botão. Sabe por que eu o odeio? Porque ele é obrigatório. Não dá pra tirar. Na verdade, até dá pra tirar o outline dos links, mas caso use <input type=”submit”> ou <button> o seu botão vai ter o pontilhado ao redor e não tem nada que você possa fazer.

Só pra constar: Esse outline no firefox não é um bug! Esse marcador é colocado ao redor dos elementos por motivos de usabilidade. A idéia é sempre indicar visualmente onde está o foco. Aí o problema vem quando eu mesmo quero implementar uma forma diferente de indicar o foco, porque ele me obriga a continuar com o outline.

Outro dia eu estava trabalhando no meu projeto secreto com os outros fundadores do blog, e queria fazer um botão super bonito. Eu usei a tag <button> pra poder inserir imagens e texto lá dentro, pra criar um botão tão maneiro que seus olhos explodiriam de prazer. Depois de um tempão criando o botão, me deparei com o outline do firefox, que acabou com todo o mojo.

Sério, um quadrado pontilhado estraga completamente aquele botão super bonito, arredondado, com degradê e efeitos de mouse over.

Se você também se irrita com isso, fique feliz porque você pode pelo menos impedir que o outline apareça nos seus links. Basta declarar o seguinte no CSS para os seus links:

a {
    outline: none;
}

Isso não funciona nos submits e buttons, entretanto. Não adianta nem tentar.

Ah, e se você procurar bastante na internet vai ter algum super gênio por aí sugerindo usar um código em javascript que tira o outline dos botões. Não faça isto em hipótese alguma! O que essa solução em javascript faz é tirar instantaneamento o foco do botão assim que ele recebe foco. Fazendo isso o usuário não pode manusear seu formulário (ou seu botão) pelo teclado, não pode chegar ao seu botão apertando TAB. Ou seja, fica uma porcaria.

Esse tipo de coisa acaba forçando o desenvolvedor a fazer algo totalmente não semântico, como usar <a> pra criar o seu botão de submit, só pra se livrar do outline. Algumas vezes essas bobeiras do navegador vão tão longe que até o google acabou usando <div> pra criar os “botões” que ele usa hoje em dia no Google Reader e no GMail. Pode ir lá olhar, é div!

Até onde eu sei, apenas o Firefox tem essa obsessão por outline. Espero que desistam disso em versões futuras. Na 3.5, quem sabe.

Olá, seja bem-vindo. Fique à vontade e puxe uma cadeira. Estamos começando agora o Not For Dummies, o mais novo blog sobre desenvolvimento de software do Brasil. Mas não queremos ser apenas mais um.

Existem vários outros blogs sobre desenvolvimento por aí, eu sei. Mas todos eles acabam sendo muito parecidos. A maioria dos blogs por aí escreve sobre os primeiros passos no desenvolvimento, e só. Uau, maravilha! Quem procura informações de como fazer um hello world em PHP, ou como instalar o Ruby on Rails no Windows vai achar um monte de fontes, mas e quando a pessoa precisa de uma coisa um pouco mais avançada em português?

Quantidade de Hello World = 0

O Not For Dummies vai fazer jus ao nome. Não vamos cair no lugar-comum, não vamos ficar escrevendo os mesmos posts básicos. Nossos textos não são for dummies, não são pro novato que nem sabe direito o que é XHTML. Isso não quer dizer que só quem é expert vai nos entender, claro. Mas você precisa ao menos já ter se iniciado pra entender do que a gente está falando. Falando assim parece até coisa de sociedade secreta.

O blog vai ser mantido por vários escritores diferentes. Nós reunimos um bom time de escritores e ainda planejamos aumentar a equipe em breve. Outra coisa é que o blog vai ser escrito de uma forma bem descontaída, sempre que possível. Talvez a gente até coloque uma piada no meio de uma explicação séria, só pra não ficar chato.

Acreditem em mim nisso: acompanhem o blog e vocês vão gostar. Eu agarantio!