Se você é um web designer que não manja muito de códigos, um iniciante na arte de criar um site ou apenas um curioso, aposto que você já ouviu falar de HTML 5 e CSS 3. Há alguns anos estes “novos padrões” vêm fazendo sucesso nas rodas de discussão dos desenvolvedores front-end (aqueles que programam a parte visual do site). Muitos falam empolgados sobre as novas possibilidades e sobre sua compatibilidade com os dispositivos e navegadores, outros apenas fingem que sabem o que estão falando, mas não entendem bulhufas do que se trata.
Assim como eu, que não sou web designer nem desenvolvedor, apenas um mero curioso, você deve ter se perguntado: “Mas que diabos é HTML 5 e CSS 3? E qual a diferença deles em relação ao bom e velho HTML e CSS?”
O que é HTML5 e CSS3?
Na real mesmo? Vamos com calma. Esses novos padrões não são nenhuma super tecnologia que vai revolucionar a existência humana através da criação de uma nação robô que poderá escravizar os seres humanos forçando-os a trabalhar em campos de concentração, sem intervalos para dormir, se alimentando apenas de pizza, esfihas do Habib’s e café (Wait! Nós já vivemos assim!).
Piadas sem graça à parte, alguns aspectos das novas versões dos padrões da web, por menor que pareçam, já estão de fato revolucionando a maneira como os desenvolvedores programam a parte visível dos sites e, lógico, a experiência dos usuários nestas novas interfaces.
Marcações mais semânticas
Chegou a hora de dar um significado mais claro às coisas. Mas como descobrir o valor de cada informação em um emaranhado de códigos? Queremos saber se no meio do conteúdo existe um número de telefone ou o endereço de algum lugar e não apenas que aquilo é um <p>parágrafo</p>. Para tentar ser menos genérico na hora de programar visualmente o conteúdo, novas marcações, mais semânticas, foram criadas.
O HTML 5 trouxe então novas tags estruturais como <header>, <section>, <article>, <footer> e novas marcações semânticas como <progress>, <meter> e <figure>. Além de tudo isso, o novo padrão oferece suporte a áudio e vídeo sem a necessidade de plugins, imagens vetorias (<svg>) e bitmaps (<canvas>).
HTML 5 não é só HTML
É importante lembrar que, há séculos, os desenvolvedores front-end não trabalham apenas com HTML mas sim com o kit HTML+CSS+Javascript. O HTML diz onde está o conteúdo, o CSS organiza e faz o conteúdo aparecer todo bonitinho e faceiro, já o Javascript dá vida própria a tudo.
Como as novidades não vieram apenas para o HTML, o CSS na sua versão 3 e o Javascript (ninguém sabe direito qual a versão que está hoje) também queriam fazer parte da festa. E assim, o encontro foi chamado de HTML 5.
Falando sobre o CSS 3, ele trouxe algumas guloseimas para a festa. Entre elas está sua nova capacidade de formatação visual como a criação de elementos com bordas arredondadas, o uso de sombras, múltiplos backgrounds, layouts multi-colunas, novos seletores, uso de fontes externas, transformações 2D e 3D e animações.
Um ótimo exemplo das novas possibilidades do CSS 3 está neste desenho do Homer Simpson desenvolvido pelo programador front-end Bernard de Luna. A ilustração foi totalmente feita com os recursos do CSS 3, sem o uso de nenhuma imagem bitmap.
Em suma, tanto a CSS 3 quanto as inúmeras melhorias no Javascript ficaram dentro do assunto HTML 5 e a nomenclatura é dada ao trio e não apenas ao conteúdo HTML. Agora que você já está por dentro de tudo, se alguém aparecer falando alguma abobrinha sobre HTML 5, mande este link para ele!