Você está pronto para o HTML 5?

Quem acompanhou o começo da web deve lembrar do quanto as primeiras páginas eram feias. O design de páginas com HTML puro era cinza, quadradão, feito na base de frames e tabelas, as animações eram arquivos GIF toscos e restava ao webmaster fazer graça com scripts inúteis. Nesses últimos anos, vários padrões e tecnologias surgiram para ajudar a linguagem, como o CSS, o Flash e o XHTML. Mesmo assim, chegou a hora de mais mudança.

A nova versão do padrão HTML está mais sólida, com os principais navegadores suportando suas inovações e facilitando assim a vida do designer, que poderá dispensar bibliotecas e pacotes auxiliares.

Vale lembrar que nem tudo funciona em todos os browsers, já que, na falta de uma especificação definitiva (que está prevista para 2012), os empresas adicionam os recursos do HTML 5 nos navegadores a conta-gotas. Conheça, a seguir, as principais mudanças que já estão aprovadas pela W3C e pelo WHATWG, as entidades que decidem o futuro da linguagem HTML.

Multimídia sem plug-in

O conteúdo em áudio e vídeo na web é refém dos plug-ins, como o Flash, para ser exibido. O HTML 5 prevê uma forma de contornar isso com as tags <video> e <:audio>. Falta ainda definir os tipos de codecs a ser utilizados universalmente com essas tags. Hoje, Chrome e Safari conseguem exibir filmes em H.264 e tocar áudio AAC, encapsulados num arquivo MP4. Já o Firefox, fiel aos padrões abertos, mostra só vídeos Theora e som Vorbis, dentro de um arquivo Ogg. O impasse não preocupa tanto, pois as tags <video> e <:audio> podem receber mais de um arquivo, com o browser selecionando qual é a opção compatível. Para adicionar um vídeo à página, basta usar o código <video src=”meuvideo.mp4 width=”320″ height=”240″ controls></video>.

CSS arrumadinho

O novo HTML promete aposentar frames e tabelas das páginas, com o CSS efetivado como responsável para esse fim. Além disso, a versão 5 conta com tags para definir seções dos sites, facilitando a integração com as folhas de estilo. Atualmente, o normal é usar um elemento <div>, com seu nome indicando o tipo de seção. As novas tags são <header>, <footer>, <article>, <section>, <nav> e <aside>. Elas definem o cabeçalho, o rodapé, um artigo, uma seção (de um artigo), a barra de navegação e anotações sobre o conteúdo. Com esses elementos, é criada uma padronização que facilita a localização de conteúdo pelos buscadores e o reaproveitamento dos arquivos CSS.

Gráficos nascidos na web

O elemento <canvas> permite criar desenhos usando JavaScript. Assim é possível, por exemplo, transformar dados do site em gráficos dinâmicos. A tag também serve para usar um texto ou imagem como substituto do desenho, caso o browser não tenha suporte aos gráficos dinâmicos. Nesse caso, o conteúdo alternativo fica entre e <canvas> e </canvas>.

Calendários sem erro

Qual é a data definida por 10/2/2010? Pode ser 10 de fevereiro, no padrão usado no Brasil, e, ao mesmo tempo, 2 de outubro, no modelo americano. O HTML 5 pode contornar essas situações com tags que definem o tipo de dados e sua formatação no texto da página web. A tag <time> marca hora e data e evitaria o problema descrito acima usando o código <timedatetime=”2010-02-10″> </time>, que poderia identificar as informações do navegador e decidir qual seria a data correta, para que ela possa ser exibida no padrão do usuário.

Versão offline

Já ouviu falar no Google Gears? Ele transforma aplicativos web em programas que rodam no browser mesmo em máquinas sem conexão com a web. Essa mágica é feita pelo recurso DOM Storage, que poderá ser usado por qualquer site em HTML 5. Um ponto essencial dessa forma de armazenamento local é que o servidor remoto não pode acessar diretamente o conteúdo (diferentemente dos cookies). Somente o browser e os scripts da página acessada podem modificar o conteúdo offline. Hoje, cada browser usa um limite de espaço. O Firefox aloca no máximo 5 MB por domínio web acessado. Já o Internet Explorer libera 10 MB por base de dados criada, independentemente do domínio.

Muito além dos cliques

Existem várias bibliotecas para habilitar o suporte ao recurso de arrastar e soltar objetos em sites. Mas no HTML 5 a coisa fica bem mais fácil. Basta definir valores para três eventos em JavaScript: dragenter, dragover e drop. Eles indicam, respectivamente, a entrada e a passagem de um elemento sobre outro, além do evento para o momento em que um item é solto. Definir um elemento da página como item que pode ser arrastado é mais fácil ainda. Basta adicionar a definição draggable=”true” a ele.

Via Info Online

Reclame por um Mundo Melhor

O programa “Reclame” do Multishow, que fala sobre a criação e a proposta de propagandas televisivas, propôs um desafio à algumas agencias de publicidade. Criar comerciais sobre o aquecimento global, que conscientizassem o público sobre a situação em que o mundo se encontra em relação ao tema.

Os vídeos fora muito bem feitos, e veiculados de graça pela rede Globo SAT.

Um dos que me chamou a atenção foi o feito pela agencia Matos Grey, que ironiza o situação, e usa de um recurso de provocação, ofendendo o espectador, o que faz o comercial atingir seu objetivo de um jeito diferente, chocando quem o assiste:

Confira o vídeo:

Confira aqui os outros comerciais:

Agência Loducca: http://www.youtube.com/watch?v=NByx2Lkw0Ac

Agências Fábrica Comunicação e Ponto de Criação: http://www.youtube.com/watch?v=t4eUG7r_EtM

Agência Wunderman: http://www.youtube.com/watch?v=PhoGUrUHWCo

Agência Fischer América:

• http://www.youtube.com/watch?v=4XQ7E8LLW0Y
• http://www.youtube.com/watch?v=HJ1m5Qlnb5c

Agência Bullet: http://www.youtube.com/watch?v=Cza17BMCAK8

Mídias ou Redes Sociais?

E essa dúvida tem rolado por ai, mídia e rede social, é a mesma coisa?

Tem muita gente que acredita que sim, que são aquelas ferramentas que permitem a interação social entre usuários, compartilhando fotos, sites, entre outros, e um recurso que também é muito usado por empresas para divulgação de idéias, serviços, além da aproximação do público.

Mas muita gente tem diferenciado mídias e redes sociais e para explicar a diferença existem 2 sites, que resumem e esclarecem bem essa diferença, confiram lá:

http://www.midiassociais.blog.br/2010/02/23/redessociais-vs-midiassociais/

http://rodrigopiris.wordpress.com/2010/01/10/a-diferenca-entre-midia-social-e-rede-social/

Internet Móvel

O uso da internet móvel no Brasil tem crescido, ou seja, cada vez mais os usuários tem acessado a internet a partir de dispositivos móveis, como celulares e computadores de bolso. A internet móvel, porém, apresenta pequenos detalhes aos quais os criadores de sites para tais dispositivos devem estar atentos, para que o site fique simples, acessível e com a navegação rápida.

Alguns desses detalhes são:

1. Ser objetivo: a limitação da tela e da velocidade exige que o site seja objetivo. Mostre apenas as notícias e links principais.
2. Divulgue a versão móvel: na versão normal do seu site, deixe um link para a versão móvel, para que os usuários de tal tecnologia saibam os sites que poderão ser acessados de seus dispositivos.
3. Evite imagens grandes: as imagens grandes dificultam a navegação, deixando-a mais devagar. O site móvel precisa carregar rápido.
4. Não delimite a tela: devido a grande variedade de tamanhos de telas dos dispositivos de tecnologia móvel, se você limitar o tamanho do seu site, pode ser que em algumas telas o site sofrerá alterações no tamanho.
5. Limite os recursos: a internet móvel e os dipositivos ainda não possuem muito suporte para recursos como Flash, tabelas e etc. O uso dessas alternativas deve ser limitado.
6. Conteúdo Específico: disponibilize recursos para celular, conteúdos específicos, como wallpapers, ringtones, etc.

Confira alguns exemplos de sites já com sua versão móvel.

• Orkut
• Twitter
• Uol

Referências:

http://jomarb.com/tutos/?p=161

Interatividade eletrônica

A realidade aumentada está na moda. Mas não só ela, a interatividade entre cliente e empresa em geral está ganhando espaço no mercado.

Misturando-se o mundo real com o virtual é que surge a realidade aumentada. Um pedaço de papel, com alguns desenhos aparentemente desconexos, quando colocados na frente de uma web cam se transformam em algo 3D na tela do computador.

Este recurso tem sido muito explorado não só pela publicidade, mas também pela medicina, indústria automobilística entre outros.

Fora a realidade aumentada, outro fator muito explorado é a utilização do display touch screen, usado não só em celulares, mas também em grandes telas em aeroportos, shoppings, ou em testes em feiras sobre tecnologia.

Com o uso do touch screen, o usuário com apenas um toque, consegue navegar, explorar e até personalizar a tela. É um investimento que tem sido feito na área de propaganda, para que o cliente possa  futuramente, ter mais informações sobre o produto de seu interesse em locais como shoppings, nas ruas, ou até mesmo nas próprias lojas.

O investimento em tecnologias de interatividade, que despertam no consumidor uma maior disponibilidade para compra, parece ser o futuro para as vendas e propagandas. E você, o que acha disso?