Pulga na cueca e experimentando o HTML5

Tenho pulga na cueca. Não no sentido literal. Claro. Eu não agüentei e mudei novamente o Tableless, por fora e por dentro. Por fora ele ficou mais bonito. Por dentro, ele está implementado com as novas tags de estrutura do HTML5.

Por Diego Eis

75 comentários
Tweet

Tenho pulga na cueca. Não no sentido literal. Claro. Eu não diria a você esse tipo de intimidade (nojenta). Tenho pulga na cueca no sentido didático da história. Sendo sincero contigo, eu não gostei do design antigo do Tableless. Sério. Não fiz planejamento nenhum, o design ficou de mal gosto. Eu não gostei do fundo colorido que nem porpurina e nem da diagramação do layout como um todo. Por isso, resolvi mudar.

Sobre a compatibilidade entre os browsers

Nessa mudança eu aproveitei para estudar alguma coisa sobre CSS e HTML5, e me adiantando um pouco, resolvi implementar o site com as novas tags de estrutura propostas nas recomendações do WHATWG. Mesmo assim, se você está usando Internet Explorer 6, 7 e provavelmente até o 8, talvez esse site não é para você. Quer dizer, é para você, mas só se você utilizar outro browser, caso contrário, siga-o pelo Twitter ou pelo FEED. Nem preciso dizer que o Internet Explorer 6 é ultrapassado e muita coisa que utilizei no CSS aqui não vai funcionar nele. O IE7 já é muito melhor, mas há algumas coisas que não funcionam nele, apesar de todo o esforço do pessoal da Microsoft. Eu não testei o site no IE8 para saber se há uma renderização consistente. Se você utiliza esses (menos IE6) ou qualquer outro browser e perceber algum erro grotesco, por favor, me diga.

Eu posso abusar com o Tableless porque ele é um site feito para um público muito, mas muito específico. Não são clientes que utilizando 800×600 nem Netscape 4. Por isso eu posso fazer muita coisa fora do escopo normal de desenvolvimento de sites.
Na vida real, temos que nivelar tudo por baixo. Temos que entender e estudar os clientes do cliente para saber se você pode ou não ignorar usuários de browsers antigos. Por isso, relaxe, não sou tão rebelde quanto parece.

Mesmo assim, estou utilizando um script que faz os IEs entenderem as tags para que o CSS possa atuar sem grandes problemas. A estrutura aparecerá perfeitamente. A única cois que não vai funcionar são algumas das funcionalidades do CSS, como os seletores complexos. Eu também não coloquei o PNGFix para o IE6. Realmente, quero ignorar essa versão do IE e tentar melhorar a experiência a partir do IE7.

Sobre o HTML5

O HTML5 levará algum tempo para que esteja totalmente completo e maduro para a utilização. Mas como tenho pulga na cueca (lembra?), por pura experimentação, eu apliquei as novas tags de estrutura do HTML5 para montar essa nova versão do site. Eu não sei qual será o impacto disso nos buscadores. Vou descobrir daqui um tempo. Mas o fato é que o HTML5 ainda não está pronto para que você utilize nos seus projetos diários. O Google, Firefox, Safari, Opera e até o IE8 andam implementando partes específicas das recomendações do HTML5. São coisas como o módulo Offline, implementações de tags de vídeo e áudio e outras coisas.
Eu já vi alguns erros de estrutura neste novo código aqui do Tableless. Irei arrumar brevemente. Há ainda muitos conceitos novos que devemos pensar e analisar. É uma nova maneira de estruturar um site. Há uma dose muito de grande de semântica envolvida, e por isso, o cuidado deve ser maior, já que os buscadores e elementos de acessibilidades usarão seu código como nunca para prover conteúdo.

Sobre o CSS

Eu utilizei um bocado de seletores complexos e pseudo-classes que normalmente não funcionam no IE6. Utilizei também PNG e não coloquei um pngfix para contornar o bug do IE6.
O CSS é outra linguagem que está se atualizando muito rápido. Os browsers tem se prontificado implementando atualizações de características que podem ser salvar a nossa vida durante o desenvolvimento. Daqui pra frente, ouviremos muito sobre CSS Animations e CSS 3. As coisas estão andando depressa.

75 comentários

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de Diego Eis

http://centrocriativo.com.br Juan

Huuu, legal. Eu já vi uns exemplos no Safari4 ! muito bom..!
http://www.pinceladasdaweb.com.br/blog/ Pedro Rogério

Ousado hem!!!
http://www.seo.blog.br Ronaldo Bitenourt

O layout ficou muito bom

Mas será que vale um experimento, como disse o Pedro “ousado”, o que vale mais o experimento ou o acesso ao site?

De qualquer forma Diego, muito bacana sua iniciativa. Sobre a troca de layout … acho que eu sofro da mesmo, não guento muito com um layout parece que sempre fica falta alguma coisa, te entendo.
http://www.fgsolutions.com.br Gabriel Carlini Vieira

Achei que o layout ficou melhor, quanto mais clean, menos cores muito contrastantes também.
Bastante ousadia implementar html5, e isso é ótimo. No Chrome está ok também…
Ah, e tinha perguntado sobre material do html5, o link já está no post. Valeu

Parabéns…
http://www.agenciainteragir.com.br Felipe Magalhães

Me amarro em sites com tamanho de campo/fontes grandes (lembra do campo de busca do Limão e de alguns cases da MTV e d Yahoo acho que com Star Wars? show!).
Tá muito bem elaborado o site, nem lembro mais quantas versões dele eu já vi desde que comecei a acessá-lo (se não me engano em 2005). Parabéns Diego! Mandou mto bem!
http://www.brunomacaco.com.br Bruno Macaco

Ousado hem!!! [2]
Marcio B D A

O site ficou muito bom mesmo. O layout está consideravelmente melhor que o anterior (ou mais do meu gosto heheh) e confesso que fiquei com uma certa inveja de utilizar html5. Me deu vontade de montar um site teste com ele implementado.

Agora achei um pequeno bug no firefox 3.0.8 – Windows 7 – 1280X800. Está aparecendo uma barra de rolagem acima do rodapé. Creio que ela não deveria estar alí certo?
http://tableless.com.br/ Diego Eis

Ronaldo, sinceramente eu não estou nem aí para quem está acessando o site com navegadores como o IE. A idéia deste site é experimentar mesmo. Aprender. Entender as possibilidades. Se eu ficar me preocupando com browsers antigos, a idéia do site irá se perder.
http://mudadeideia.com.br Israel

Diego, o feed está cortado.
Um abraço.
http://juarezpaf.com Juarez P. A. Filho

Aprovado. Estou pensando em como posso usar da melhor o poder do HTML5/CSS3 e ainda deixar um visual considerável para os IEs. Solicitações superiores.
http://www.pinceladasdaweb.com.br/blog/ Pedro Rogério

@Marcio B D A,

A barra de rolagem é devido ao textarea do formulário de comentários, se definir uma largura pra ele, tudo fica ok.
http://www.pinceladasdaweb.com.br/blog/ Pedro Rogério

No IE8 a única coisa que aparece corretamente é o fundo, o resto…
http://gguerini.com.br Guillermo Guerini

Eu também gostei bastante! Não digo que ficou ousado, e sim mais sóbrio. O que é uma grande qualidade.

Testando no Safari 4 beta para Mac e tudo funcionando perfeitamente.

Parabéns e continue inovando. Bom pra gente que aprende também.
http://www.insidebb.com Nuno

Muito bom!! Parabéns, estou vendo Firefox e está tudo perfeito.

Minha atitude é como a tua, cada vez mais estou desligado de utilizadores ie, browser que não tem preocupação nenhuma com a comunidade de webdevelopers, estou farto do ie, no fundo ainda tinha alguma esperança que o ie8 pudesse melhorar nesse sentido, mas continua tudo na mesma.
http://tiagomadeira.com/ Tiago Madeira

Gostei muito. De fato este é um site para um público específico e acredito que sua idéia sempre seja estar inovando para ensinar os leitores sobre o novo.

Ah, arrume o action do search form no header… “http://localhost/tableless/wordpress/”
http://www.arenageek.com Eduardo Stuart

Gostei do layout, ficou mais simples, bem mais clean.
http://www.cnascimento.com Christian Nascimento

Aqui se tem muita coragem. =D A nível experimental até que se comporta bem, mesmo assim acho que não é hora para a galera se empolgar e sair desenvolvendo com o HTML5 por ai.

Abraços
http://www.comunicaweb.com.br Sodré

Cara parabéns pelo design do site… Muito legal… E principal como trabalho como HTML5…
Gabriel

Ops… achei um bug… todos os links do rodapé estão com o href um branco (href=”")
http://www.buscandoomelhor.com Riosney S.

Gostei muito da sua atitude. Serve de inspiração.
Rômulo Ramos

Alguém, em algum lugar, algum dia, tem que começar a usar essas novas técnicas, senão como vamos abandonar os velhos paradigmas? Eu levanto sempre a bandeira que em ambientes controlados, como intranets, essas “ousadias” são bem-vindas.
http://www.logicadigital.com.br Augusto César Gomes

Parabens Diego.

Ficou muito bom o site. Mais você disse que não deveria se preocupar com browsers antigos certo? Mais o IE 8 é antigo?

Certo que esse navegador parece não estar se adaptando com o html 5. Deve ter alguma solução …

Mais sem pensar em erros de navegadores.

A semântica do site está muito boa mesmo.

Ando pesquisando sobre o html 5 também.

Eu acho cedo para implementar mais admiro que você esteja se espondo …

Parabens! Muito bom seu código.

Ia ser bacana se tivesse um pouco mais de acessibilidade para deficientes visuais. Mais está muito bom.

Vlw!
http://www.ubuntudicas.com.br Maudy

HAHA Boa essa!!!
No IE8 tá um “lixo” o visual!!
Mas quems e importa aqui com o IE mesmo???
Eu não!

Parabéns!!!!
http://eumarcospaiva.wordpress.com marcos_paiva

Poooo, senti falta de mais cores!!! Mas é isso ae, vamo forçar as mudanças!

ahhh, quanto a usabilidade do site, ficou bem melhor. Aquele menu no topo ficou jogada de mestre rsrss
http://tableless.com.br/ Diego Eis

Israel: Entendi. Vou ver se arrumo isso. No WP está configurado para ir todo o texto. Deve ser bug no theme.

Obrigado pelo feedback galera. Os outros bugs estão sendo resolvidos. Estou estudando um script para trocar as tags do HTML5 pros IEs. Assim, pelo menos a estrutura fica bacana. Mas o CSS, realmente, não vou arrumar.
http://www.logicadigital.com.br Augusto César Gomes

Diego.

Acho que oque você deve fazer é usar um script para criar elementos.

“createElement” estava com um link explicando tudo isso, para criar elementos”tags” para navegadores que não reconhecem ainda.

Acho que vai funcionar.

Vlw!

Procura algo assim que você acha Vlw!
http://www.logicadigital.com.br Augusto César Gomes

segue o link que meus amigos acharam!

http://www.hagenburger.net/2009/03/html5-xhtml5-with-css-for-safari-firefox-opera-ie
Diego Felix

“Diego, no Netscape 4 aqui no meu Win95 está com problemas, ve se conserta pra mim.. quando terminar, me liga avisando por favor”

sehuiHEUIA..

Brincadeiras à parte. Gostei do Layout, Parabéns.
Felipe Rodrigues

Realmente, ficou muito bom.
Alexandre Romero

Cara, eu gostava bastante do layout antigo pra falar a verdade, achei que falta um pouco de cor nesse novo, tá muito cinza… mas anyway, gosto vai de cada um =)

Achei um bug no Chrome: as letras do campo de formulários estão ilegíveis!

Abraço!
http://leonardomateus.wordpress.com leonardo mateus

Aqui está se passando o verdadeiro cenário de um profissional que desenvolve o site, e o chefe dele acessa com IE6 ou IE simplesmente e depois chega dizendo: ‘ué..que isso? tá tudo torto?!’. rsrs (isso já aconteceu comigo).

Esse problema de ignorar clientes é uma coisa séria. Muito provavelmente o Diego tá sabendo o que está fazendo quando diz que o site não é para vc que usa IE. Talvez realmente quase ninguem acessa com IE6 ou 7… ou 8! (será?)

Tenho um post-case sobre esse assunto que rolou na empresa onde trabalho, que gostaria de compartilhar com vocês. Se tiverem tempo acessem leonardomateus.wordpress.com

Grande Abraço!
Magno Valdetaro

Sabe o qual é o cúmulo do interessado é ler este artigo no código fonte,hehe. Gostei da ousadia e ótimo layout
Mikael Carrara

Temos sérios problemas de Design aqui…
http://www.paulodetarso.com Paulo de Tarso F. M.

Hahaha! Gostei do comentário do nosso amigo Magno Valdetaro. Eu nunca li algo pelo código fonte. Vejo muito código fonte, mas ler o conteúdo… Coisa de doido, não? Esse pessoal que mexe com web… hehe

Ótimo trabalho, meu caro Diego. E quanto à questão de ignorar aqueles que usam o IE, para o Tableless é extremamente válido. Claro, em todos os projetos que iremos atuar devemos analisar e muito bem quem iremos favorecer ou não, mas, cá entre nós, quem é o público alvo do Tableless? Oras, com certeza a maioria não utiliza o browser querido do mercado…

Diante disso, é como o Diego falou, pouco importa! Se você usa IE e chegou até aqui, ou é porque você ainda não conhece um browser bom de verdade ou você é “forçado” a utilizá-lo por causa da política da empresa… Este segundo caso, não tem jeito (a não ser que você utilize um Firefox Portable…), mas se for o primeiro caso, amigo, wake up!

Depois quando tiver tempo vou começar a fuçar mais com o HTML5, até agora não pude sar uma atenção a isso…
http://twitter.com/home Leandro Thimóteo

Mto bom…bem clean… ficou legal demais.
http://criacao-de-sites.workaholics.com.br Ariê Perini

Diego,

Seria legal postar o links dos sites que estão trabalhando na evolução do HTML 5 e do CSS 3.

E tambem de grupo de estudos sobre o assunto!
http://www.adrianoreisweb.blogspot.com Adriano Reis

Muito boa a matéria. Acredito que com essa nova versão do HTML e do CSS as coisas ficarão mais fáceis pra gente.

E outra coisa. To loco pra matar de vez o IE 6, ele só atrasa o nosso trabalho aqui na agência.

Mas é isso ai.
Abraço a todos!
http://www.logicadigital.com.br Augusto César Gomes

Diego um colega aqui da minha empresa o marcelo_abib…

Fez um teste com seu site… copio interno aqui e colocou esse script…

document.createElement(‘header’);
document.createElement(‘nav’);
document.createElement(‘section’);
document.createElement(‘footer’);

meio que funcionou viu…

você pode tentar mais ai depois você da uma arrumadinha com o css condicional.

Vlw abraço!
Jandeilson S. Barbosa

O novo visual está show, bem bonito mesmo. E a implementação de novas linguagens para os futuros posts parece ser uma ótima idéia.
http://www.fator-s.com.br/ Junior

curti esse tal de HTML5, muito semantico, pena q isso deva funcionar perfeitamente não tão cedo….
mesmo assim a revolução começou…
vem ai uma nova internet…muito mais simples e objetiva…
http://www.chrisb.com.br/blog Chris Benseler

Tudo certinho, aparentemente, nos Firefox do Ubuntu e Mac… só achei estranha essa caixa de comentários aqui do lado! hehe

No mais, fico me perguntando qual a vantagem de uma nova versão do html, se há todo o trabalho do xhtml…

[]s!
Neto

Legal, gostei da iniciativa.
Tá muito legal.
Mas, realmente, no Ieca só funciona o fundo…

É realmente uma pena que muitas pessoas sejam tão ignorantes ao ponto de não utilizarem navegadores dignos de serem chamados de navegadores.

A MS imita tudo, só não conseguiu imitar a eficiência do seu browser…

Vamos aguardar para que a próxima equipe “MS CTRL+C CTRL+V” faça direito na versão 9 do Ieca, assim nós front-end não precisaremos ter que ficar retrabalhando e colocando gambiarras só para fazer o gosto do leigos.
http://pothix.com/blog PotHix

Æ!!

Completamente aprovado!

Ninguem está ligando para quem usa IE…Se usar IE trate de instalar um navegador decente.

Parabens pelo site, ficou bem legal!

Há braços
tHUAN

Muito bom o style do tableless,
aqui no fedora 10 + opera sem nenhum problema.
Abraço e Sucesso.
http://jaderubini.net Jader Rubini

Muito bom o redesign e louvável a iniciativa de desbravar as entranhas do HTML 5. Realmente, por mais que a gente leia sobre, nós só iremos conhecer de fato as pecualiaridades quando nos propusermos a usar em algum projeto experimental.

Minha única sugestão é que você aumente um pouco a entrelinha dos textos. As linhas estão muito próximas umas das outras.
Márcio Toledo

Ahhh, eu gostava do layout anterior, já tinha me acostumado com aquele espectrum de arco-íris no fundo… mas esse está bom também, desde que a primeira página mostre um pouco mais do conteúdo do site.

Quanto ao HTML5 e meus clientes, eu sempre faço uma versão mais avançada e mais bonita com tudo que o CSS tem direito (e alerto que os browsers antigos podem ter algum problema, claro) e uma mais básica pra funcionar nos navegadores antigos… boa parte dos clientes aceitam a mais avançada. É um jeito de ir, aos poucos, desabilitando essas velharias de browser que ainda existem.
http://blog.lppjunior.com Luiz Paulo

Fala Diegão,

Cara o q vc fez foi 10!
Muita gente aqui chamou de ousadia ou coragem (nem li todos os comentários, rsrs), mas eu chamaria de inovação e experimento.

Parabéns cara pela iniciativa.
http://tableless.com.br/ Diego Eis

Ficarei grato se você me falar desses problemas Mikael!
juli_c

gostei
como vários já disseram, ousado!
como deve ser quem quer inovar!
parabéns pela iniciativa e por todo o trabalho, sempre aprendo muita coisa por aqui!
http://www.juliobitencourt.com Julio Cesar Bitencourt

Parabéns cara! O layout ficou bem legal. Simples e funcional. Acho que ainda levaremos bastante tempo pra nos livrarmos completamente do IE 6 no Brasil. Uma pena.

Artigos

Pulga na cueca e experimentando o HTML5