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.
73 Comentários
Juan 07/04/2009 às 02:00
Huuu, legal. Eu já vi uns exemplos no Safari4 ! muito bom..!
Pedro Rogério 07/04/2009 às 02:01
Ousado hem!!!
Ronaldo Bitenourt 07/04/2009 às 02:09
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.
Gabriel Carlini Vieira 07/04/2009 às 02:09
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…
Felipe Magalhães 07/04/2009 às 02:12
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!
Bruno Macaco 07/04/2009 às 02:17
Ousado hem!!! [2]
Marcio B D A 07/04/2009 às 02:21
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?
Diego Eis 07/04/2009 às 02:22
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.
Israel 07/04/2009 às 03:02
Diego, o feed está cortado.
Um abraço.
Juarez P. A. Filho 07/04/2009 às 03:44
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.
Pedro Rogério 07/04/2009 às 04:03
@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.
Pedro Rogério 07/04/2009 às 04:11
No IE8 a única coisa que aparece corretamente é o fundo, o resto…
Guillermo Guerini 07/04/2009 às 04:44
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.
Nuno 07/04/2009 às 06:46
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.
Tiago Madeira 07/04/2009 às 07:55
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/”
Eduardo Stuart 07/04/2009 às 08:43
Gostei do layout, ficou mais simples, bem mais clean.
Christian Nascimento 07/04/2009 às 08:45
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
Sodré 07/04/2009 às 08:56
Cara parabéns pelo design do site… Muito legal… E principal como trabalho como HTML5…
Gabriel 07/04/2009 às 09:10
Ops… achei um bug… todos os links do rodapé estão com o href um branco (href=”")
Riosney S. 07/04/2009 às 09:14
Gostei muito da sua atitude. Serve de inspiração.
Rômulo Ramos 07/04/2009 às 09:30
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.
Augusto César Gomes 07/04/2009 às 09:31
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!
Maudy 07/04/2009 às 09:38
HAHA Boa essa!!!
No IE8 tá um “lixo” o visual!!
Mas quems e importa aqui com o IE mesmo???
Eu não!
Parabéns!!!!
marcos_paiva 07/04/2009 às 09:44
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
Diego Eis 07/04/2009 às 09:53
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.
Augusto César Gomes 07/04/2009 às 10:02
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!
Augusto César Gomes 07/04/2009 às 10:04
segue o link que meus amigos acharam!
http://www.hagenburger.net/2009/03/html5-xhtml5-with-css-for-safari-firefox-opera-ie
Diego Felix 07/04/2009 às 10:11
“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 07/04/2009 às 10:16
Realmente, ficou muito bom.
Alexandre Romero 07/04/2009 às 10:31
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!
leonardo mateus 07/04/2009 às 10:45
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 07/04/2009 às 10:54
Sabe o qual é o cúmulo do interessado é ler este artigo no código fonte,hehe. Gostei da ousadia e ótimo layout
Mikael Carrara 07/04/2009 às 11:26
Temos sérios problemas de Design aqui…
Paulo de Tarso F. M. 07/04/2009 às 11:33
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…
Leandro Thimóteo 07/04/2009 às 11:54
Mto bom…bem clean… ficou legal demais.
Ariê Perini 07/04/2009 às 12:23
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!
Adriano Reis 07/04/2009 às 12:37
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!
Augusto César Gomes 07/04/2009 às 13:18
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 07/04/2009 às 13:34
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.
Junior 07/04/2009 às 13:51
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…
Chris Benseler 07/04/2009 às 14:02
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 07/04/2009 às 14:46
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.
PotHix 07/04/2009 às 14:47
Æ!!
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 07/04/2009 às 15:19
Muito bom o style do tableless,
aqui no fedora 10 + opera sem nenhum problema.
Abraço e Sucesso.
Jader Rubini 07/04/2009 às 15:50
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 07/04/2009 às 16:10
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.
Luiz Paulo 07/04/2009 às 16:33
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.
Diego Eis 07/04/2009 às 17:20
Ficarei grato se você me falar desses problemas Mikael!
juli_c 07/04/2009 às 17:55
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!
Julio Cesar Bitencourt 07/04/2009 às 18:35
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.
Igor Pimentel 07/04/2009 às 19:32
Ficou simplesmente liiindo!
Parabéns pela iniciativa, acabou até me motivando para reformular o meu aplicando HTML 5. Abraço
Rafael Librenz 07/04/2009 às 22:18
Ficou muito bonito!
Clap! Clap! Clap!
Vai conseguir validar o código?
Thiago Cavalcanti 07/04/2009 às 23:34
O Diego está de parabéns pela iniciativa! Eu não esperava menos de um blog como o Tableless.
Para quem não entendeu ainda, esta opção do Diego é perfeitamente compatível com o perfil do usuário que acessa o Tableless.
NESTE CASO não há problema algum em tomar uma atitude destas!
Samuel Moraes 08/04/2009 às 01:26
O novo layout está ótimo. Até lembrei do meu blog. Parece que o branco minimalista está em alta.
Acelio F 08/04/2009 às 02:52
Massa…
Não precisa de DOCTYPE específico para HTML5
as tags com /> não atrapalham
É só começar a revolução…
Até funciona no IE6. Destrói tudo, mas funciona. Talvez colocar display:inline nas divs que tem float com margin. Mas é muito trabalho, né?
Filipe 08/04/2009 às 09:35
Não compreendo que essas pessoas falam em ” Design “.
Alguém sabe ao certo o que sigifica Design?
O site ficou mais clean, mais objetivo, mais não entendo esse espanto com um site onde praticamente se usa cores monocromaticas, exceto o logo que usa vermelho.
De qualquer forma Diego, ficou melhor que o layout anterior.
o Branco da uma sensação boa de leitura já que a proposta do site em si é ensinar.
Eu colocaria as cores do texto em tons de cinza, de 70 à 90%.
O as cores do menu de navegação poderia ser vermelho, já que a o objetivo maior do site é sua navegação, nada melhor que dar ênfase para ele.
de qualquer forma, parabéns.
Sou a favor desse tipo de layout.
Mikael Carrara 08/04/2009 às 10:44
- Um deles você arrumou, que era o formulário (desconstrutivismo)
Seu nome e data no post tá muito sutil (contraste), pequeno e num lugar que não dá pra notar muito bem. Eu agruparia essas informações todas próximas umas das outras do lado esquerdo mesmo (proximidade).
- O botão ‘comentar!’ poderia seguir o mesmo padrão que você adotou para o botão ‘search’ lá em cima (repetição).
- Você usou muitas tipografias, tente trabalhar a mesma de forma diferente.
- Aquele script que você usou pras categorias não ficou legal, muito difícil de usar.
No mais, gostei da sua iniciativa de usar HTML 5, parabéns!
Carlos Eduardo 08/04/2009 às 12:01
Acho que o válido não é nem tanto pela mudança de layout que, na minha opinião, não foi tão grande.
O impacto com certeza é o uso do HTML 5 e os bugs nos IEs hehehe… Mas como você mesmo disse, é um experimento, dane-se os browsers porcos!
Só que o pessoal não pode se empolgar e sair usando por aí em projetos comerciais… Estamos apenas engatinhando no assunto, principalmente por tanta gente usar IE6… o_O
Thalis Valle 09/04/2009 às 10:07
“Ronaldo, sinceramente eu não estou nem aí para quem está acessando o site com navegadores como o IE”
IE6, quer dizer.
Joao Andrade 09/04/2009 às 12:02
Muito show!
Joao Andrade 09/04/2009 às 12:06
vou estudar isso rs.
Erle Carrara 09/04/2009 às 16:03
agora deu vontade de ficar o feriado inteiro estudando HTML5 !
Eduardo Penna 15/04/2009 às 17:48
Fala Diego! Fazia muito tempo que não “aparecia” por aqui… tempo demais.
Achei ótima a iniciativa de implementar o novo layout com HTML5.
Estou ainda na idéia de montar um blog para a empresa e com certeza vou aproveitar para testar.
Abraço!
Mega Hair 22/04/2009 às 07:24
Estou curiosa para testar. Parabens pelo layout do site.
Adriana
Felipe Carreiro 23/04/2009 às 10:01
Falando do novo leiaute… acho que forçou demais a tipografia dos títulos. O contraste visual é necessário porém não precisa ser GROSSEIRO. As letras “trepadas” incomoda e embaralha o cérebro. Tenta folgar o kerning modestamente. Conforme já mencionado, a variação de apenas uma tipografia enriquece o trabalho. Adotar várias, polui. A premissa “menos é mais” não significa “design pobre”. Abraço.
Carlos Eduardo 23/04/2009 às 11:47
Uma questão interessante é se os Microformats acabarão com a chegada do HTML5… Escrevi um post e se acharem relevante discutir sobre:
http://project47.viscountbox.com/porque-o-html-5-nao-acabara-com-os-microformats/
Abraço!
Jilson 25/04/2009 às 00:33
Achei válida a implementação do html5. Qto ao layot tem um errinho(?) no sombreado dos boxes qdo vc vê em alto contraste, o sombreado parece não terminar num degrade perfeito em relação ao fundo branco. É coisa minima mas dá pra perceber.
Marcel Leal 25/04/2009 às 22:38
Aqui no meu Firefox 3.0.8 rodando no Linux OpenSuse 11.1 está perfeito.
Cristiano Santos 01/07/2009 às 01:09
Gostei da iniciativa e principalmente da coragem de por o site, já tão conceituado em HTML5, que ainda está no processo de “working draft”, que é a 1ª de 5 fases para a recomendação da W3C.
A discussão e os projetos são válidos e digo que essa versão realmente promete. Até no nosso famigerado IE6 ele ficou “bonitinho” – http://twitpic.com/8x35h
Abraços e parabéns mais uma vez!
Danilo Luiz 13/07/2009 às 09:59
Fala, Diegão
Cara queria saber se essas mudanças para o html5 já surtiram efeito nos buscadores
já houve alguma alteração de posicionamento ?
Att,
Experimento: HTML5 + CSS3 » Pinceladas da Web - XHTML, CSS, JavaScript e WebStandards 31/08/2009 às 08:58
[...] um layout para meu site pessoal em HTML5 + CSS3, ou vocês acham que é só o Tableless que pode fazer [...]
Clica Aqui » Experimento: HTML5 + CSS3 07/09/2009 às 20:11
[...] um layout para meu site pessoal em HTML5 + CSS3, ou vocês acham que é só o Tableless que pode fazer [...]
segurança na rede 23/12/2009 às 14:22
pulga barata rato cupim quem trabalha com desenvolvimento enfrenta diversos insetos
Concordo que é necessario testar novos recursos na rede, em busca de segurança, automação, controle,rendimento ,etc… e é muito bom ler posts como este que compartilham esta esperiencia obrigado. mas ando por ai e ainda vejo muito usuario utilizando ie6 por exemplo.