Agni.art

Você já testou o HTML5 hoje?

O Hypertext Markup Language é a base da estrutura da Web. Sua última versão lançada é o HTML4.01, que teve sua recomendação aprovada no final de 1999 pela W3C. Porém, está chegando o HTML5, uma nova versão da linguagem depois de anos sem atualização, apresentando novas possibilidades de desenvolvimento que vem deixando desenvolvedores e empresas de tecnologia em grande expectativa.

Será que já é hora de começarmos a adotar o HTML5 em nossos projetos?

A evolução Semântica do HTML5

Além das novas API’s, suporte multimídia, aprimoramento do uso off-line e melhor depuração de erros, a maior evolução que temos hoje no HTML5 é a Semântica, que diz respeito ao significado das marcações. Na atual versão do HTML não temos um padrão que determine exatamente os tipos de informação que colocamos em cada parte do documento. Os navegadores e buscadores não podem distinguir que uma determinada área da página é um cabeçalho, um rodapé, um menu ou um artigo, por exemplo. Dessa forma os desenvolvedores acabavam criando o seu próprio padrão de nomenclatura através de identificadores e classes.

As novas marcações do HTML5 não terão uma visualização diferente da marcação <div>, porém elas trarão um valor semântico. Dessa forma, para identificar um cabeçalho, podemos usar <header> ao inves de <div id=”header”>. Essa padronização será usada por todos os desenvolvedores, e entendida por todos os navegadores, buscadores e sistemas informacionais, e facilitará a indexação dos dados e a troca de informações pelas diferentes aplicações na Web.

A falta de consenso sobre os codecs

Algo que vem causando grande euforia sobre a nova versão da linguagem, e que é um dos pontos altos do HTML5,  é o suporte nativo a recursos multimídia (áudio e vídeo) sem a necessidade de instalação de plugins no navegador. Mas ao mesmo tempo existe uma falta de consenso sobre qual codec deve ser usado para esses novos recursos.

Enquanto a W3C recomenda o uso do codec Theora por ser um padrão aberto, outras empresas vem utilizando o codec proprietário H.264 em seus navegadores. Dessa forma temos os navegadores Firefox e Opera suportando apenas o Theora, enquanto o Safari e Internet Explorer 9 suportam apenas o H.264. Apesar do Chrome suportar ambos os codecs, o Google vem usando o H.264 no seu protótipo do YouTube em HTML5, além de recentemente ter adquirido e liberado o codec VP8E sob código aberto, como parte do projeto WebM.

O HTML5 será o fim do Flash?

O Flash vem assegurando seu espaço no mercado principalmente pela sua utilização em vídeos, banners, hotsites ou advergames. Porém ele vem deixando gradativamente de ser a ferramenta preferida de muitos desenvolvedores e empresas por vários motivos, como o tempo de carregamento, falta de acessibilidade ou problemas de travamento com plugins. Muitos apostam que os novos recursos do HTML5 (como a nova API para desenvolvimento de gráficos bidimensionais e a possibilidade de criar aplicações RIA) podem ser uma sentença de morte para o Flash.

Eu acredito que não é o lançamento do HTML5 que fará com que empresas e desenvolvedores abandonarem o Flash. Pelo contrário, acredito que os novos recursos que o HTML5 trás fazem parte dessa ânsia do mercado por uma alternativa ao Flash que seja mais alinhada com os rumos que a Web vem tomando: mais semântica e acessível. Com a evolução de bibliotecas Javascript como o JQuery, e com as possibilidades que nos trará a nova versão do CSS3, acredito sim que o HTML5 possa ser uma alternativa ao Flash, mas não a curto prazo. Ainda é muito mais prático e rápido criar uma animação em Flash do que utilizando HTML/CSS/Javascript, e boa parte das agências e desenvolvedores tende ao mais cômodo.

Mesmo afirmando que o Flash é insubstituível, a Adobe  já demonstrou publicamente uma preocupação com o HTML5, chegando a afirmar que os seus clientes estão sendo persuadidos por outras empresas a usar tecnologias alternativas ao Flash, principalmente pela Apple usar HTML5 em vez do Flash em seus aparelhos (iPhone, iPod Touch e iPad). Alguns rumores já acusaram a Adobe de tentar sabotar o progresso da linguagem através da sua atuação na aprovação dos padrões junto a W3C.

Já está na hora de usar o HTML5?

Apesar das últimas versões dos navegadores já suportarem as novas marcações, boa parte dos usuários não tem o hábito de atualizar seus navegadores, e isso faz com que a maioria das pessoas ainda não consiga visualizar as páginas estruturadas em HTML5. Além de que, apesar da linguagem já ter sido liberada, só será uma recomendação definitiva em 2012.

Ainda não é hora de implementar definitivamente o HTML5 em nossos projetos, mas todos devemos começar a estudar seus novos recursos e a fazer testes. Os grandes nomes do mercado de tecnologia vêm disponibilizando os seus protótipos experimentais utilizando a nova versão, e isso é de grande valia. O mercado deve ir se preparando, e preparando os usuários.

A quantidade de informações que podemos encontrar na Web já é bastante grande, basta fazer uma busca. Para referência sobre todas as marcações do HTML5 recomendo acessar o http://www.w3schools.com/html5/html5_reference.asp, e para ter acesso aos canais de participação dos grupos de trabalho da W3C, basta acessar http://www.whatwg.org.

Bom divertimento ;)

“O segredo dos grandes web designers”. Esse é o título da matéria de capa da edição 117 da Revista W, que chegou as bancas nesse mês de abril. Para esta matéria, a redação da revista invadiu as melhores agências do mundo para saber o que os grandes profissionais da área estão fazendo para mudar a cara da web.

Eu como bom enxerido, invadi a matéria para dar o meu pitaco sobre o que eu considero como uma das maiores tendências no desenvolvimento para web: a Semântica! Segue abaixo meu texto, que vocês podem ler na revista…

Web Semântica: o futuro

Com a nova proposta do HTML5, a Semântica é a tendência maior destaque no desenvolvimento Web.

Semântica tem a ver com o significado das palavras. Na Web ela tem relação com o significado que as marcações do HTML podem fornecer para as informações que publicamos.

Uma pessoa que queira viajar poderia comprar pela web passagens, reservar hotéis e passeios, tudo de acordo com o seu orçamento. Possuindo uma agenda online onde constassem o destino e o orçamento disponível, a compra das passagens e a reserva em um hotel poderiam ser feitas por uma aplicação, que poderia também recomendar os melhores passeios e bares de acordo com seus gostos publicados em uma rede social. Essa cena é uma das possibilidades da Web Semântica. No entanto, esta ainda é uma realidade distante.

Muito nos preocupamos com a exibição de informações claras para as pessoas, e nos esquecemos que os dados são fornecidos para as pessoas por máquinas. Quando as informações não possuem um significado claro para as máquinas, a indexação dos conteúdos e a troca de dados relevantes que a web nos possibilita acabam por ser desperdiçadas.

Quando se passou a dar a devida importância aos padrões de desenvolvimento da W3C, veio também a preocupação em explorar ao máximo os recursos do HTML e o significado contido em suas marcações. Mas ainda não é uma preocupação comum. Ao fazermos uma busca na Web por uma palavra como “Palmeiras”, por exemplo, podemos obter resultados sobre um time de futebol, uma planta, uma cidade, um bairro ou um ator. Isso porque a forma que as informações estão estruturadas na web não possibilita resolver essa ambiguidade.

Hoje dá-se mais importância a publicação de conteúdo do que a organização. Por isso há necessidade de se atribuir significado as informações, tanto para organização quanto para a troca. A nova proposta do HTML5 dá uma luz nessa direção.

Não perca a Revista W nas bancas!

Veja o que o CSS3 nos trás de novo.

Chris Coyier, web designer que mantém o blog CSS-Tricks, escreveu em seu perfil no Twitter que o “CSS é como o xadrez. Você pode aprender os princípios básicos em um dia, e passar a vida inteira se especializando”. De fato, o CSS é a linguagem mais fácil de ser aprendida, possuindo uma sintaxe bem simples. Porém, criar páginas com layouts bem elaborados usando CSS, assim como conhecer todos os seus macetes, exige tempo e experiência.

A forma mais correta de desenvolvermos páginas para Web é dividindo a estrutura em três camadas: conteúdo (HTML), comportamento (Javascript) e apresentação (CSS). Trabalhando o CSS em uma camada separada do restante da estrutura, conseguimos uma melhor consistência visual, uma vez que os layouts de todas as páginas estarão baseados em uma mesma folha de estilos. Também ganhamos tempo e facilidade na hora de fazer um redesign ou manutenções visuais, pois a alteração de um único arquivo terá impacto em todo o site. Com o CSS em um arquivo separado, também conseguimos fornecer maior acessibilidade ao criar folhas de estilo específicas para diferentes dispositivos como sintetizadores de fala e som, aparelhos e impressoras em Braille, celulares e outros dispositivos móveis etc. O carregamento das páginas também será mais rápido, já que após o primeiro acesso ao site, o arquivo CSS estará carregado em cache.

Divisão da Web em três camadas

Um bom exemplo de como o CSS pode ser poderoso quando bem usado é o CSS Zen Garden. O site fornece um modelo de página HTML para download, e diversos designers criam folhas de estilos para essa mesma página. O resultado pode ser visto na galeria: alterando apenas a folha de estilo, diferentes layouts são aplicados na mesma página HTML.

CSS ainda deixa a desejar

Hoje, designers e desenvolvedores ainda têm que se virar para conseguir certos efeitos gráficos. Por mais poderosa que a linguagem seja, a atual versão do CSS2.1 não fornece recursos como sombras em objetos e textos, cantos arredondados, múltiplas camadas de plano de fundo, opacidade, possibilidade de diferentes familias tipográficas, colunas em textos, etc. O fato de navegadores mais antigos (e ainda utilizados) como o Internet Explorer 6 não suportarem todos os recursos do CSS2.1 acaba complicando ainda mais a nossa vida.

Para conseguir tais efeitos e recursos nas páginas, normalmente recorremos ao uso de imagens, hacks, ou inserção excessiva de marcações HTML, o que pode aumentar o tempo de desenvolvimento e carregamento das páginas, além de comprometer a semântica dos documentos.

Com a nova versão da linguagem que está por vir, teremos maior controle sobre o estilo dos elementos. Propriedades para cantos arredondados ou sombras em textos estarão disponíveis no CSS3, sem precisarmos recorrer ao uso de truques ou imagens.

O que nos trará o CSS3?

Propriedades de CSS3 já são suportadas pelas versões mais recentes de alguns navegadores, como o Safari 4 e o Firefox 3.6. Com isso podemos testar os novos recursos que estão por vir. Para que alguns dos novos recursos possam ser testados, é necessário adicionarmos os prefixos -moz- (para a renderização no Firefox) e -webkit- (para renderização no Safari).

A seguir, exemplos de algumas das novas propriedades que a nova versão da linguagem irá nos fornecer:

border-radius

Com essa propriedade podemos adicionar um raio de arredondamento para todos os cantos de um elemento, como -moz-border-radius: 10px, ou valores diferentes para cada canto, como -moz-border-radius-topright: 5px.

text-shadow

Com essa propriedade podemos adicionar sombras em textos, configurando a distância da sombra para a esquerda e para o topo do texto, o enevoamento e cor: text-shadow: 5px 5px 2px #999.

box-shadow

Funciona da mesma maneira que o text-shadow, porém aplicando sombra aos outros elementos: -moz-box-shadow: -10px -10px 0px #333.

border-colors

Podemos adicionar um efeito gradiente nas bordas de um elementos, aplicando cores em diferentes camadas: -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc.

Opacity

Podemos adicionar opacidade aos elementos: opacity: 0.2.

Columns

Podemos definir estilos de colunas para textos, aplicando valores para a largura, quantidade, bordas de separação e distância entre colunas: -moz-column-width: 13em; -moz-column-count: 3; -moz-column-rule: 1px solid black; -moz-column-gap: 1em.

Multiple backgrounds

Podemos definir diferentes planos de fundo para um mesmo elemento: background: url(fundo-um.jpg) top left no-repeat, url(fundo-dois.jpg) top 11px no-repeat, url(fundo-tres.jpg) bottom left no-repeat, url(fundo-quatro.jpg) left repeat-y.

@font-face

Podemos definir uma tipografia diferenciada para os textos da página através da importação de um arquivo de fonte: @font-face {font-family: Agni; src: url(‘agni-font.otf’)}. Em seguida aplicamos essa fonte a um elemento de texto: h3 { font-family: Agni, sans-serif}.

O CSS3 ainda não deve ser usado definitivamente em suas páginas. A nova versão da linguagem ainda se encontra em fase de rascunho na W3c, e a maioria dos navegadores não fornece suporte. Porém é essencial que possamos conhecer e testar os novos recursos, descobrir aos poucos o que vem por aí, e nos preparar para o momento em que o CSS3 será lançado como uma recomendação em definitivo.

Vocês podem encontrar mais informações sobre o CSS3 no site http://www.css3.info/.

Esteja preparado :)