Dois sites de forte expressão resolveram descontinuar o suporte ao malfadado Internet explorer 6, muitos dizem que essa é a única maneira de forçar a grande maioria dos usuários do programa atualizarem para softwares mais atuais.

Esses dois gigantes são o youtube e o digg, seria muito interessantes (para o Brasil) se o orkut entrasse nessa, pois provavelmente ele é um dos sites com maior número de usuários (fiéis) ao browser.

O youtube quando acessado pelo Internet explorer 6 convida os usuários a atualizarem o browser e avisa:

Faça upgrade para um navegador moderno de modo a obter uma experiência on-line mais rica. Vamos descontinuar o suporte para Internet Explorer 6 em breve, por isso faça o upgrade agora.

Já o Digg apenas colocou um post em seu blog, também fez uma pesquisa sobre usuários e browsers, veja os resultados, a maioria diz não atualizar no trabalho e não ter permissão para isso.

O gráfico abaixo mostra como é dividido o uso de browsers no Brasil, ele é atualizado mensalmente, e hoje mostra o crescimento do Internet Explorer 8.

Na minha opinião até mesmo a atualização do Internet explorer 6 para as versões recentes não é o melhor negócio, pois a Microsoft continua não acompanhando a evolução css, como você pode ver no post sobre compatibilidade css 3.

Veja nesse link, a ótima charge feita por Martz que ilustra esse post.

Update: Veja a resposta da Microsoft sobre o fato aqui .

A World Wide Web Consortium (W3C) anunciou que só continuará seguindo Xhtml2 até o fim do ano, dai para frente seguirá com Html5.

Para muita gente isso é uma grande guinada, para outros que começaram a aprender já em Xhtml2 é mais difícil entender o que essa mudança significa.

Para entender as principais diferenças leia o ótimo post “X/HTML 5 Versus XHTML 2” no xhtml.com.

Transcrevo aqui o anúncio oficial da w3c:

XHTML 2 Working Group Expected to Stop Work End of 2009, W3C to Increase Resources on HTML 5

2009-07-02: Today the Director announces that when the XHTML 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed. By doing so, and by increasing resources in the HTML Working Group, W3C hopes to accelerate the progress of HTML 5 and clarify W3C’s position regarding the future of HTML. A FAQ answers questions about the future of deliverables of the XHTML 2 Working Group, and the status of various discussions related to HTML. Learn more about the HTML Activity.

Cabe a nós continuar seguindo a evolução e destroçar o conteúdo desse indice.

Update 07/07/2009: Veja também esse ótimo exemplo da nettus, um layout completo com html5 e css3

O twitter trouxe a necessidade de colocar bastante informação em pouco espaço, no caso 140 caracteres, links imensos com www, diretórios, nome de arquivos ou domínios grandes acabam com boa parte desse espaço.

Os compactadores de url criam um redirecionamento (geralmente 301) para a url verdadeira, e uma das vantagens é o domínio e extensão pequenos desses serviços.

Vou listar aqui os que mais encurtam a url atualmente, domínios de um caracter com extensão mínima (2 caracteres) literalmente fazem milagre com urls grandes.

• x.vu
• u.nu
• r.im
• 3.ly
• z.pe

Eu atualmente prefiro usar os que me dão um pouco mais que a diminuição da url, como por exemplo os nacionais migre.me, uiop.me e hype2.me que fornecem estatísticas e integrações com o twitter

foto de ozoni11

Já há algum tempo os browsers baseados em webkit aceitam transformações do tipo Skew, Rotate e Scale. Com a chegada do Firefox 3.5, que aconteceu ontem, os browsers baseados em geckos também estão aceitando.

É redundante dizer isso, mas o Internet explorer não aceita nenhuma dessas instruções.

Fiz um tutorial que usa essas funções para criar um cubo em 3D, 100% xhtml e css, veja abaixo:

Primeiro o xhtml, nada de especial, o único detalhe é que há dois divs um dentro do outro no .topo, pois teremos que aplicar duas transformações na face topo.

Começando, crie uma class para o cubo todo, com posição relativa e para as faces definida como absoluta.

Abaixo há as funções em comum para todos os lados do cubo, quero que cada face tenha 150px, sendo 10px de parágrafo, e 1px de borda, por isso usei 128px na largura e na altura. (1+10+128+10+1) = 150px.

Abaixo começamos as novidades css3, primeiro configurando as inclinações das laterais, a sintaxe é simples, Skew = inclinação, deg = unidade angular e Y coordenada, e felizmente a sintaxe é a mesma para WebKit e Gecko.

A parte um pouco mais complicada, é o topo, pois além de inclinação precisamos aplicar uma rotação e escala
para dar a real impressão de perspectiva, na escala é necessário usar 1.16 na coordenada Y para que o cubo se feche.

Usamos no xhtml 2 divs para que pudéssemos aplicar duas transformações e a segunda transformação é a a rotação, pois sem ela nossa face do topo ficaria idêntica a da direita mas com a escala alterada.

A posição do .topo {top:x;} varia e deve ser regulada a “olhometro” caso você altere o tamanho, já o left deve ser a metade da face total, contando bordas e margens.

Para finalizar um efeito simples de hover em todas as faces =D

Preview – Código

O ilustrador brasileiro Ricardo Gimenes, teve uma idéia fantástica, e começou a criar caricaturas sobre o que há por trás de websites famosos, o projeto chama Behind the websites.

São várias ilustrações muito engraçadas sobre sites como google, facebook, RIIA, Apple, GM, twitter, The Pirate Bay e etc.

Alguns nacionais também tem o privilégio de estar na lista, por exemplo: Ultraje a Rigor, MacMagazine , Blog do Tas e DesignGráfico.

Ver caricaturas

O que usar e o que não usar das css3, isso depende de uma analise do público de seu site, se a maioria usar browsers ultrapassados muitas propriedades e seletores não surtirão efeito.

Para nos ajudar nessa tarefa o site westciv.com/wiki mantem uma tabela de propriedades e seletores, e em quais browsers eles funcionam.

Os browsers presentes na tabela são IE7, IE8, Safari 3(+), Firefox 3(+), Opera 9.5(+), imagine qual tem mais “Not supported”.

Experimental CSS compatibility table

Imagem animada estilo gif mas com qualidade do  png? É o que faz o chamado Apng (Animated Portable Network Graphics).

Como sempre, existem browsers que não rodam, o internet explorer (como sempre), e os baseados em webkit (safari e chrome).

Para fazer um apng é bem simples, crie um arquivo.zip com uma seqüencia de png, por exemplo 01.png, 02.png, 03.png … E o site: animatedpng.com converte ele para você em um png animado.

Agradeço ao @mattana que verificou algumas compatibilidades.

Fazer uma lista de parâmetros que você vai usar durante o projeto todo, pode te ajudar a economizar tempo, e evitar voltar ao começo do código.

Para browsers baseados no Webkit (chrome, safari, etc) podemos usar variáveis de maneira bem simples, apenas declarar e chamar quando necessário, como no exemplo abaixo:

Mas como no mercado existem várias engines além do Webkit é necessário uma solução cross-browser, encontrei duas satisfatórias, uma delas envolve jQuery, e a outra php, vou postar aqui dois exemplos:

jQuery – createCSSwithVars plugin (fonte)

Baixe o plugin, e carregue todos arquivos .js como o exemplo abaixo:

Para o css use “csswithvars” no media, exemplo:

Depois basta utilizar as variáveis em seu css, com a sintaxe abaixo, que é muito semelhante a do Webkit que citei acima.

Php (fonte)

Veja o exemplo abaixo:

Na hora de carregar, use o .php no lugar do .css:

Eu particularmente achei bem mais simples pelo jQuery.

A foto que ilustra esse post é de: Simon Pow