http://www.odeo.com/channels/4927-Tableless-com-br-Web-Standards-com-Arroz-e-Feij%C3%A3o Elcio no Notícias, podcast, posts, novidades, tutoriais sobre Padrões Web, boas práticas de desenvolvimento com arroz e feijão. Notícias, podcast, posts, novidades, tutoriais sobre Padrões Web, boas práticas de desenvolvimento com arroz e feijão. Podcast sobre Padrões Web. Falamos sobre desenvolvimento com Padrões Web. en 40 Tue, 12 May 2009 13:05:59 -0700 Tue, 12 May 2009 13:05:59 -0700 Internet http://www.odeo.com/episodes/24549709-Propriedade-Position-do-CSS Entendendo a propriedade Position O Position é uma propriedade perigosa para iniciantes. Normalmente o desenvolvedor que acaba de conhecer essa propriedade, acha que ela é a resposta para todos os problemas de posicionamento e diagramação de layout. Pelo contrário. O Position não serve para diagramar a estrutura de layouts. Para isso, você utiliza a propriedade float do css. O Position vai servir para fazer coisas mais simples. Existem 3 tipos de valores que usamos na propriedade position: relative, absolute e fixed. Position Fixed O position: fixed; irá fixar a posição do elemento na coordenada que você definir. A medida que a página é rolada, o elemento continua fixo na posição que você definiu e o conteúdo da página rola normalmente. Veja um exemplo de position fixed. Position Relative Todos os positions precisam de um ponto para iniciar o cálculo da coordenada para assim posicionar o elemento na tela. Ao contrário do que muitos acham, esse ponto não é o ponto central do elemento... Entendendo a propriedade Position O Position é uma propriedade perigosa para iniciantes. Normalmente o desenvolvedor que acaba de conhecer essa propriedade, acha que ela é a resposta para todos os problemas de posicionamento e diagramação de layout. Pelo contrário. O Position não serve para diagramar a estrutura de layouts. Para isso, você utiliza a propriedade float do css. O Position vai servir para fazer coisas mais simples. Existem 3 tipos de valores que usamos na propriedade position: relative, absolute e fixed. Position Fixed O position: fixed; irá fixar a posição do elemento na coordenada que você definir. A medida que a página é rolada, o elemento continua fixo na posição que você definiu e o conteúdo da página rola normalmente. Veja um exemplo de position fixed. Position Relative Todos os positions precisam de um ponto para iniciar o cálculo da coordenada para assim posicionar o elemento na tela. Ao contrário do que muitos acham, esse ponto não é o ponto central do elemento, o ponto base é o canto superior esquerdo do elemento. A partir deste canto, o browser irá calcular a coordenada que você definiu e irá posicionar o elemento no viewport. O position relative posiciona o elemento em relação e ele mesmo. Ou seja, o ponto zero será o canto superior esquerdo, e ele começará a contar a partir dali. Position Absolute O Position Absolute é um tanto diferente do Relative. Enquanto o elemento com Position Relative utiliza seu próprio canto para referenciar sua posição, o elemento com Position Absolute se utiliza do ponto superior esquerdo de outros elementos. Estes elementos são os parentes dele do elemento com position absolute. Mais especificamente o pai. Veja um exemplo em HTML. No caso, se o DIV pai não tivesse position definido, o div filho iria se referenciar pelo BODY mesmo. Se caso o div pai não tivesse position definido, e se ele também fosse envolvido por outro div com position, o div filho iria se referenciar por este terceiro div. Logo, o div com position absolute referencia sua posição pelo div mais próximo que o envolve e que também tenha um position definido. Complicado, não é? Uma ocasião bem simples onde usaríamos position é na home do Flickr. Onde temos aquela imagem bonita de capa e o nome do autor logo abaixo. Para posicionar o nome do autor lá no rodape do div, você utilizaria o Position. Veja a imagem de exemplo: No Campus Online há um vídeo explicativo sobre a propriedade position: Pulga na cueca e experimentando o HTML5 Propriedade Float do CSS Implementar XHTML/CSS é grátis Video tutorial - Implementando HTML Modulando o CSS Entendendo a propriedade Position O Position é uma propriedade perigosa para iniciantes. Normalmente o desenvolvedor que acaba de conhecer essa propriedade, acha que ela é a resposta para todos os problemas de posicionamento e diagramação de layout. Pelo contrário. O Position não serve para diagramar a estrutura de layouts. Para isso, você utiliza a propriedade float do css. O Position vai servir para fazer coisas mais simples. Existem 3 tipos de valores que usamos na propriedade position: relative, absolute e fixed. Position Fixed O position: fixed; irá fixar a posição do elemento na coordenada que você definir. A medida que a página é rolada, o elemento continua fixo na posição que você definiu e o conteúdo da página rola normalmente. Veja um exemplo de position fixed. Position Relative Todos os positions precisam de um ponto para iniciar o cálculo da coordenada para assim posicionar o elemento na tela. Ao contrário do que muitos acham, esse ponto não é o ponto central do elemento, o ponto base é o canto superior esquerdo do elemento. A partir deste canto, o browser irá calcular a coordenada que você definiu e irá posicionar o elemento no viewport. O position relative posiciona o elemento em relação e ele mesmo. Ou seja, o ponto zero será o canto superior esquerdo, e ele começará a contar a partir dali. Position Absolute O Position Absolute é um tanto diferente do Relative. Enquanto o elemento com Position Relative utiliza seu próprio canto para referenciar sua posição, o elemento com Position Absolute se utiliza do ponto superior esquerdo de outros elementos. Estes elementos são os parentes dele do elemento com position absolute. Mais especificamente o pai. Veja um exemplo em HTML. No caso, se o DIV pai não tivesse position definido, o div filho iria se referenciar pelo BODY mesmo. Se caso o div pai não tivesse position definido, e se ele também fosse envolvido por outro div com position, o div filho iria se referenciar por este terceiro div. Logo, o div com position absolute referencia sua posição pelo div mais próximo que o envolve e que também tenha um position definido. Complicado, não é? Uma ocasião bem simples onde usaríamos position é na home do Flickr. Onde temos aquela imagem bonita de capa e o nome do autor logo abaixo. Para posicionar o nome do autor lá no rodape do div, você utilizaria o Position. Veja a imagem de exemplo: No Campus Online há um vídeo explicativo sobre a propriedade position: Pulga na cueca e experimentando o HTML5 Propriedade Float do CSS Implementar XHTML/CSS é grátis Video tutorial - Implementando HTML Modulando o CSS tag:odeo.com,2009-05-12,24549709 Tue, 12 May 2009 13:05:59 -0700 no Tableless.com.br - Web Standards com Arroz e Feijão Na Prática, css, Position, tableless, HomeDestaque http://www.odeo.com/episodes/24083673-Propriedade-Float-do-CSS Se o Internet Explorer não soubesse como funciona a propriedade float do CSS, o advento dos Padrões Web não vingaria tão cedo. A propriedade float é a propriedade responsável por “administrar” a diagramação do site. É com ela que você irá organizar as caixas e deixá-las exatamente onde devem ficar. A propriedade float dá mais consistência ao Layout. Diferentemente da propriedade position, que pode trazer uma série de inflexibilidades, deixando o layout mais engessado. Neste vídeo, mostramos um pouco como funciona a propriedade float e sua parceira, clear. Se quiser, você pode ver uma versão em textual aqui. Este vídeo e muitos outros podem ser encontrados no Campus Online. Visite e cadastre-se grátis para ter acesso a vários vídeos e conteúdos sobre Padrões Web, Javascript, Ajax, Python e outras coisas. O que é Tableless? Implementar XHTML/CSS é grátis Modulando o CSS Não “otimize” seu código Tabelas semânticas Se o Internet Explorer não soubesse como funciona a propriedade float do CSS, o advento dos Padrões Web não vingaria tão cedo. A propriedade float é a propriedade responsável por “administrar” a diagramação do site. É com ela que você irá organizar as caixas e deixá-las exatamente onde devem ficar. A propriedade float dá mais consistência ao Layout. Diferentemente da propriedade position, que pode trazer uma série de inflexibilidades, deixando o layout mais engessado. Neste vídeo, mostramos um pouco como funciona a propriedade float e sua parceira, clear. Se quiser, você pode ver uma versão em textual aqui. Este vídeo e muitos outros podem ser encontrados no Campus Online. Visite e cadastre-se grátis para ter acesso a vários vídeos e conteúdos sobre Padrões Web, Javascript, Ajax, Python e outras coisas. O que é Tableless? Implementar XHTML/CSS é grátis Modulando o CSS Não “otimize” seu código Tabelas semânticas Se o Internet Explorer não soubesse como funciona a propriedade float do CSS, o advento dos Padrões Web não vingaria tão cedo. A propriedade float é a propriedade responsável por “administrar” a diagramação do site. É com ela que você irá organizar as caixas e deixá-las exatamente onde devem ficar. A propriedade float dá mais consistência ao Layout. Diferentemente da propriedade position, que pode trazer uma série de inflexibilidades, deixando o layout mais engessado. Neste vídeo, mostramos um pouco como funciona a propriedade float e sua parceira, clear. Se quiser, você pode ver uma versão em textual aqui. Este vídeo e muitos outros podem ser encontrados no Campus Online. Visite e cadastre-se grátis para ter acesso a vários vídeos e conteúdos sobre Padrões Web, Javascript, Ajax, Python e outras coisas. O que é Tableless? Implementar XHTML/CSS é grátis Modulando o CSS Não “otimize” seu código Tabelas semânticas tag:odeo.com,2009-02-13,24083673 Fri, 13 Feb 2009 05:06:02 -0800 no Tableless.com.br - Web Standards com Arroz e Feijão Na Prática, internet explorer, css, padroes web, float, tableless, Vídeos Tutoriais, Client-Side, clear http://www.odeo.com/episodes/23900997-A-internet-tem-que-avan%C3%A7ar-sem-o-IE6 Podemos dizer que existem três braços importantes nessa máquina que é o desenvolvimento web: W3C, browsers e desenvolvedores. Vamos falar um pouco sobre os browsers. Você conhece a história: o Mosaic virou Netscape, que participou da guerra dos browsers com o Intenet Explorer. E aí começaram os problemas. A visão bonita (se tivesse alguma) que a Netscape e a Microsoft tinham sobre a web e seus browsers se perdeu em algum lugar do caminho percorrido para conquistar os desenvolvedores. Atualizações constantes, falta de suporte aos padrões, código proprietário e um monte de outras coisas dificultavam o desenvolvimento naquele tempo. Mesmo assim, o Internet Explorer ganhou a guerra. Missão cumprida. A obrigação de fazer um bom browser para todos (pelo menos essa era a idéia por trás) sumiu depois que a guerra acabou. Algumas versões do Internet Explorer foram lançadas mais pra frente com algumas atualizações no suporte aos padrões, mas nada muito substancial. Os desenvolvedores sofriam ... Podemos dizer que existem três braços importantes nessa máquina que é o desenvolvimento web: W3C, browsers e desenvolvedores. Vamos falar um pouco sobre os browsers. Você conhece a história: o Mosaic virou Netscape, que participou da guerra dos browsers com o Intenet Explorer. E aí começaram os problemas. A visão bonita (se tivesse alguma) que a Netscape e a Microsoft tinham sobre a web e seus browsers se perdeu em algum lugar do caminho percorrido para conquistar os desenvolvedores. Atualizações constantes, falta de suporte aos padrões, código proprietário e um monte de outras coisas dificultavam o desenvolvimento naquele tempo. Mesmo assim, o Internet Explorer ganhou a guerra. Missão cumprida. A obrigação de fazer um bom browser para todos (pelo menos essa era a idéia por trás) sumiu depois que a guerra acabou. Algumas versões do Internet Explorer foram lançadas mais pra frente com algumas atualizações no suporte aos padrões, mas nada muito substancial. Os desenvolvedores sofriam com o Internet Explorer 5 e 5.5 porque ele não tinha um suporte decente de CSS. Depois foi lançado o IE6, com algumas atualizações e bugs resolvidos, mas seu suporte ainda era ruim. E o pior, o IE5 e o IE6 lideraram as duas primeiras colocações em termos de utilização de usuário. Se você é novo e acha que hoje é um inferno ter que pensar no IE6, você não gostaria de querer saber como era na época do IE5. Hoje em dia, em vez de buscar controle os browsers estão passando por uma revolução silenciosa. Cada browser tem seu apelo e todas as equipes estão direcionadas e se esforçando para trazer browsers que suportem o máximo dos padrões e que tenham o máximo de facilidades para o usuário. Com esses novos browsers, o desenvolvimento com Padrões Web irá crescer muito mais rápido do que se imagina. Contudo, ainda temos um bloqueio pela frente: o Internet Explorer 6. O IE6 é um browser com tecnologia de 2001. Já se passaram 8 anos, e você sabe como a web mudou em todo esse tempo. Mas o Internet Explorer não ganhou nenhum tipo de atualização. Ele não suporta uma série de propriedades interessantes do CSS. A idéia é que paremos de dar suporte ao IE6. Será fácil para alguns, mas para outros vai ser uma guerra interna. O IE6 ainda detém 35% da internet e não será fácil. Mesmo assim, já dá para você escolher os projetos que podem perder o suporte ao IE6. O The Counter tem números interessantes de utilização do Internet Explorer e outros browsers. Dê uma olhada nestes números de Dezembro de 2008.. Diversos sites estão fazendo campanhas apoiando a descontinuação do Internet Explorer 6 e promovendo outros browsers como o Firefox , Opera , Safari e Internet Explorer 7 . Isso não vai resolver o problema imediatamente, mas um primeiro passo deve ser dado. Entretanto, se você quer parar de suportar o IE6 em seus projetos, faça um estudo de usuários para entender as estatísticas do seu site. Isso é muito importante para traçar uma estratégia inteligente de migração e que não tenha impacto nos projetos de seus clientes e nem nos novos sites. Como tudo na web, a migração deve ser feita com paciência para projetos que envolvem a grande massa, como por exemplo os grandes portais. A decisão de simplesmente deixar de suportar um tipo de browser não é fácil para sites desse porte. Entretanto, nada impede de todos promoverem a mudança de browser. Se você conhece alguém que não sabe nem o que é browser, ensine, explique, instale um browser novo. Qualquer ajuda e atitude será bem vinda para melhorar a qualidade do desenvolvimento web. [alfinetada] Se você é desenvolvedor web e continua utilizando o IE: Shame on you. [/alfinetada] As estatísticas dos últimos 30 dias do Tableless estão assim: 57% Firefox 22.9% IE7 9.4% IE6 5.6% Chrome Campanhas que você pode apoiar: http://dearie6.com/ http://updateyourbrowser.net/ http://www.stopie6.org/ http://iedeathmarch.org/ http://www.end6.org/ http://imasters.uol.com.br/crossbrowser/ http://browsehappy.com/ Porque só para o iPhone? O Chrome não quer dizer muita coisa Browsers para Mobile - Nova era Web Standards Project – WaSP Charsets e Encodes - Tabelas de caracteres Podemos dizer que existem três braços importantes nessa máquina que é o desenvolvimento web: W3C, browsers e desenvolvedores. Vamos falar um pouco sobre os browsers. Você conhece a história: o Mosaic virou Netscape, que participou da guerra dos browsers com o Intenet Explorer. E aí começaram os problemas. A visão bonita (se tivesse alguma) que a Netscape e a Microsoft tinham sobre a web e seus browsers se perdeu em algum lugar do caminho percorrido para conquistar os desenvolvedores. Atualizações constantes, falta de suporte aos padrões, código proprietário e um monte de outras coisas dificultavam o desenvolvimento naquele tempo. Mesmo assim, o Internet Explorer ganhou a guerra. Missão cumprida. A obrigação de fazer um bom browser para todos (pelo menos essa era a idéia por trás) sumiu depois que a guerra acabou. Algumas versões do Internet Explorer foram lançadas mais pra frente com algumas atualizações no suporte aos padrões, mas nada muito substancial. Os desenvolvedores sofriam com o Internet Explorer 5 e 5.5 porque ele não tinha um suporte decente de CSS. Depois foi lançado o IE6, com algumas atualizações e bugs resolvidos, mas seu suporte ainda era ruim. E o pior, o IE5 e o IE6 lideraram as duas primeiras colocações em termos de utilização de usuário. Se você é novo e acha que hoje é um inferno ter que pensar no IE6, você não gostaria de querer saber como era na época do IE5. Hoje em dia, em vez de buscar controle os browsers estão passando por uma revolução silenciosa. Cada browser tem seu apelo e todas as equipes estão direcionadas e se esforçando para trazer browsers que suportem o máximo dos padrões e que tenham o máximo de facilidades para o usuário. Com esses novos browsers, o desenvolvimento com Padrões Web irá crescer muito mais rápido do que se imagina. Contudo, ainda temos um bloqueio pela frente: o Internet Explorer 6. O IE6 é um browser com tecnologia de 2001. Já se passaram 8 anos, e você sabe como a web mudou em todo esse tempo. Mas o Internet Explorer não ganhou nenhum tipo de atualização. Ele não suporta uma série de propriedades interessantes do CSS. A idéia é que paremos de dar suporte ao IE6. Será fácil para alguns, mas para outros vai ser uma guerra interna. O IE6 ainda detém 35% da internet e não será fácil. Mesmo assim, já dá para você escolher os projetos que podem perder o suporte ao IE6. O The Counter tem números interessantes de utilização do Internet Explorer e outros browsers. Dê uma olhada nestes números de Dezembro de 2008.. Diversos sites estão fazendo campanhas apoiando a descontinuação do Internet Explorer 6 e promovendo outros browsers como o Firefox , Opera , Safari e Internet Explorer 7 . Isso não vai resolver o problema imediatamente, mas um primeiro passo deve ser dado. Entretanto, se você quer parar de suportar o IE6 em seus projetos, faça um estudo de usuários para entender as estatísticas do seu site. Isso é muito importante para traçar uma estratégia inteligente de migração e que não tenha impacto nos projetos de seus clientes e nem nos novos sites. Como tudo na web, a migração deve ser feita com paciência para projetos que envolvem a grande massa, como por exemplo os grandes portais. A decisão de simplesmente deixar de suportar um tipo de browser não é fácil para sites desse porte. Entretanto, nada impede de todos promoverem a mudança de browser. Se você conhece alguém que não sabe nem o que é browser, ensine, explique, instale um browser novo. Qualquer ajuda e atitude será bem vinda para melhorar a qualidade do desenvolvimento web. [alfinetada] Se você é desenvolvedor web e continua utilizando o IE: Shame on you. [/alfinetada] As estatísticas dos últimos 30 dias do Tableless estão assim: 57% Firefox 22.9% IE7 9.4% IE6 5.6% Chrome Campanhas que você pode apoiar: http://dearie6.com/ http://updateyourbrowser.net/ http://www.stopie6.org/ http://iedeathmarch.org/ http://www.end6.org/ http://imasters.uol.com.br/crossbrowser/ http://browsehappy.com/ Porque só para o iPhone? O Chrome não quer dizer muita coisa Browsers para Mobile - Nova era Web Standards Project – WaSP Charsets e Encodes - Tabelas de caracteres tag:odeo.com,2009-01-19,23900997 Mon, 19 Jan 2009 01:42:53 -0800 no Tableless.com.br - Web Standards com Arroz e Feijão Browsers, Client-Side, ie6, compatibilidade, internetexplorer http://www.odeo.com/episodes/23819516-Um-2009-sem-f%C3%B4lego O ano de 2008 foi um ano parado para o Tableless. Na verdade foi um ano parado para os Padrões Web. Ok, na verdade não foi tão parado assim. Mas digo, não houve mudanças drásticas, ou o CSS 3 foi lançado e eu não estou sabendo? Mesmo assim o ano que passou foi de grandes mudanças em outros setores que influenciam muito o desenvolvimento web. Uma dessas mudanças em especial foi o avanço da telefonia móvel. E não estou falando do iPhone em si. Mas de todo o zum zum zum que rola até hoje depois do seu lançamento. As fabricantes estão ficando espertas e os celulares mais espertos ainda (entendeu? smartphone, smart, esperto, ahn, ahn? =^D). Isso quer dizer que a partir do ano que vem (na verdade já era para você estar fazendo isso), já devemos planejar os sites para funcionar em dispositivos móveis. Não só para iPhone, mas para todo mundo. Faz tempo que o Tableless deixou de ser um site só de tutoriais. Queremos tratar de coisas mais nobres aqui. Claro, nosso objetivo é ensinar, e fazemo... O ano de 2008 foi um ano parado para o Tableless. Na verdade foi um ano parado para os Padrões Web. Ok, na verdade não foi tão parado assim. Mas digo, não houve mudanças drásticas, ou o CSS 3 foi lançado e eu não estou sabendo? Mesmo assim o ano que passou foi de grandes mudanças em outros setores que influenciam muito o desenvolvimento web. Uma dessas mudanças em especial foi o avanço da telefonia móvel. E não estou falando do iPhone em si. Mas de todo o zum zum zum que rola até hoje depois do seu lançamento. As fabricantes estão ficando espertas e os celulares mais espertos ainda (entendeu? smartphone, smart, esperto, ahn, ahn? =^D). Isso quer dizer que a partir do ano que vem (na verdade já era para você estar fazendo isso), já devemos planejar os sites para funcionar em dispositivos móveis. Não só para iPhone, mas para todo mundo. Faz tempo que o Tableless deixou de ser um site só de tutoriais. Queremos tratar de coisas mais nobres aqui. Claro, nosso objetivo é ensinar, e fazemos muito isso, veja na página Aprenda, no Campus Online, e por todo o site do Tableless. Temos conteúdo de sobra. Mas o que me preocupa não é tanto o nosso nível técnico, mas o tesão que nós sentimos pela profissão, pelo assunto. Já disse várias vezes que tesão não é só para sexo. Durante muito tempo eu tenho testemunhado durante minhas aulas e palestras a quantidade de profissionais que estavam ali porque o chefe mandou ou porque chegou até aquela palestra porque a empresa pagou. Simplesmente falta interesse, e sem interesse, não há curiosidade. O resto você já sabe. Por isso, que não quero tratar apenas sobre tutoriais e apostilas, mas também sobre mercado, metodologias, idéias, produtividade. É discutir sobre a profissão no brasil. É aprofundar mais o conhecimento de como construir sites utilizando os Padrões em pequenas, médias e grandes empresas. É entender quais são os obstáculos dos Padrões Web aqui no Brasil e ajudar. Todos sabem que eu sou sócio da Visie, juntamente com o Elcio. Este ano haverá muito jabá nosso aqui, os puristas e arranjadores de problemas que se preparem. Nós desenvolvemos um lugar muito bacana chamado Campus Online. Alguns de vocês já conhecem. Ele será nosso “servidor de vídeos”. Aqui no Tableless haverá um vídeo por dia, grátis, que será puxado do Campus Online. Fizemos um script para que você possa colocar no seu site se quiser, segue abaixo: <script src= "http://visie.com.br/campus/ajax/480.js" charset= "utf-8" ></script> Ali onde tem o número é a largura do vídeo. Ele puxará o vídeo e as informações como título e descrição. Assim como aparece na home do Tableless. Aproveitei tudo isso para colocar no Tableless o Wordpress 2.7, que está um chuchuzinho. Fizeram muitas, mas muitas alterações no design e em algumas Template Tags. Existem centenas de posts aqui do Tableless que são bem antigos. Vou levar muito tempo para organizá-los. Muitos deles são da época de antes do Wordpress, e precisam ser categorizados e tagueados. Isso é importante para que os posts relacionados funcionem perfeitamente e que você consiga achar mais conteúdo navegando pelo site. Há muitas mudanças que precisamos fazer ainda, mas essas vou deixar pra fazer com mais calma e sem sono. Por agora, sua opinião será muito importante e se houver qualquer sugestão, por favor, me diga. Que em 2009 você fique sem fôlego. Os usuários de IE6 que me desculpem, mas eu não irei mais dar suporte a este navegador aqui no Tableless. Se quiser ver o site da melhor maneira possível, tente utilizar um browser decente como Firefox, Opera ou Safari. Bonito de se ver #24 Liberdade é estar conectado Bonito de se ver #45 Blog da Visie Fórum: Web 2.0 O ano de 2008 foi um ano parado para o Tableless. Na verdade foi um ano parado para os Padrões Web. Ok, na verdade não foi tão parado assim. Mas digo, não houve mudanças drásticas, ou o CSS 3 foi lançado e eu não estou sabendo? Mesmo assim o ano que passou foi de grandes mudanças em outros setores que influenciam muito o desenvolvimento web. Uma dessas mudanças em especial foi o avanço da telefonia móvel. E não estou falando do iPhone em si. Mas de todo o zum zum zum que rola até hoje depois do seu lançamento. As fabricantes estão ficando espertas e os celulares mais espertos ainda (entendeu? smartphone, smart, esperto, ahn, ahn? =^D). Isso quer dizer que a partir do ano que vem (na verdade já era para você estar fazendo isso), já devemos planejar os sites para funcionar em dispositivos móveis. Não só para iPhone, mas para todo mundo. Faz tempo que o Tableless deixou de ser um site só de tutoriais. Queremos tratar de coisas mais nobres aqui. Claro, nosso objetivo é ensinar, e fazemos muito isso, veja na página Aprenda, no Campus Online, e por todo o site do Tableless. Temos conteúdo de sobra. Mas o que me preocupa não é tanto o nosso nível técnico, mas o tesão que nós sentimos pela profissão, pelo assunto. Já disse várias vezes que tesão não é só para sexo. Durante muito tempo eu tenho testemunhado durante minhas aulas e palestras a quantidade de profissionais que estavam ali porque o chefe mandou ou porque chegou até aquela palestra porque a empresa pagou. Simplesmente falta interesse, e sem interesse, não há curiosidade. O resto você já sabe. Por isso, que não quero tratar apenas sobre tutoriais e apostilas, mas também sobre mercado, metodologias, idéias, produtividade. É discutir sobre a profissão no brasil. É aprofundar mais o conhecimento de como construir sites utilizando os Padrões em pequenas, médias e grandes empresas. É entender quais são os obstáculos dos Padrões Web aqui no Brasil e ajudar. Todos sabem que eu sou sócio da Visie, juntamente com o Elcio. Este ano haverá muito jabá nosso aqui, os puristas e arranjadores de problemas que se preparem. Nós desenvolvemos um lugar muito bacana chamado Campus Online. Alguns de vocês já conhecem. Ele será nosso “servidor de vídeos”. Aqui no Tableless haverá um vídeo por dia, grátis, que será puxado do Campus Online. Fizemos um script para que você possa colocar no seu site se quiser, segue abaixo: <script src= "http://visie.com.br/campus/ajax/480.js" charset= "utf-8" ></script> Ali onde tem o número é a largura do vídeo. Ele puxará o vídeo e as informações como título e descrição. Assim como aparece na home do Tableless. Aproveitei tudo isso para colocar no Tableless o Wordpress 2.7, que está um chuchuzinho. Fizeram muitas, mas muitas alterações no design e em algumas Template Tags. Existem centenas de posts aqui do Tableless que são bem antigos. Vou levar muito tempo para organizá-los. Muitos deles são da época de antes do Wordpress, e precisam ser categorizados e tagueados. Isso é importante para que os posts relacionados funcionem perfeitamente e que você consiga achar mais conteúdo navegando pelo site. Há muitas mudanças que precisamos fazer ainda, mas essas vou deixar pra fazer com mais calma e sem sono. Por agora, sua opinião será muito importante e se houver qualquer sugestão, por favor, me diga. Que em 2009 você fique sem fôlego. Os usuários de IE6 que me desculpem, mas eu não irei mais dar suporte a este navegador aqui no Tableless. Se quiser ver o site da melhor maneira possível, tente utilizar um browser decente como Firefox, Opera ou Safari. Bonito de se ver #24 Liberdade é estar conectado Bonito de se ver #45 Blog da Visie Fórum: Web 2.0 tag:odeo.com,2008-12-31,23819516 Wed, 31 Dec 2008 18:00:34 -0800 no Tableless.com.br - Web Standards com Arroz e Feijão Artigos, Na Prática, Geral, 2009, Tecnologia e Tendências http://www.odeo.com/episodes/23699624-V%C3%ADdeo-Tutorial-Manipulando-atributos-com-JQuery Depois de encontrar os objetos do HTML, é preciso alterá-los. Aprenda como ler, alterar e remover atributos HTML. Conheça também as facilidades da jQuery para trabalhar com classes. Aconselhamos que você assista esse vídeo em Fullscreen. Esse e outros vídeos estão disponíveis no Campus Online da Visie. Lá você encontra videos tutoriais de Tableless, Ajax, Javascript e um monte de outras coisas. Pode ser interessante ler: Microformatos, internet móvel, e quem ainda não entendeu nada. Podcast#5 Podcast #3 Em qualquer lugar com qualquer dispositivo Podcast Tableless #13 Depois de encontrar os objetos do HTML, é preciso alterá-los. Aprenda como ler, alterar e remover atributos HTML. Conheça também as facilidades da jQuery para trabalhar com classes. Aconselhamos que você assista esse vídeo em Fullscreen. Esse e outros vídeos estão disponíveis no Campus Online da Visie. Lá você encontra videos tutoriais de Tableless, Ajax, Javascript e um monte de outras coisas. Pode ser interessante ler: Microformatos, internet móvel, e quem ainda não entendeu nada. Podcast#5 Podcast #3 Em qualquer lugar com qualquer dispositivo Podcast Tableless #13 Depois de encontrar os objetos do HTML, é preciso alterá-los. Aprenda como ler, alterar e remover atributos HTML. Conheça também as facilidades da jQuery para trabalhar com classes. Aconselhamos que você assista esse vídeo em Fullscreen. Esse e outros vídeos estão disponíveis no Campus Online da Visie. Lá você encontra videos tutoriais de Tableless, Ajax, Javascript e um monte de outras coisas. Pode ser interessante ler: Microformatos, internet móvel, e quem ainda não entendeu nada. Podcast#5 Podcast #3 Em qualquer lugar com qualquer dispositivo Podcast Tableless #13 tag:odeo.com,2008-12-03,23699624 Wed, 03 Dec 2008 03:30:36 -0800 no Tableless.com.br - Web Standards com Arroz e Feijão Na Prática, jquery, Vídeos Tutoriais, Client-Side http://www.odeo.com/episodes/23618572-Video-tutorial-Implementando-HTML Utilizamos esse layout como exercício nos cursos da Visie. Dependendo do nível do pessoal, utilizamos outros layouts. Mas esse é um que o pessoal normalmente costuma escolher. É um bom exercício porque utiliza as principais propriedades do CSS. Esse e outros vídeos estão disponíveis no Campus Online da Visie. Lá você encontra videos tutoriais de Tableless, Ajax, Javascript e um monte de outras coisas. Se ainda estiver interessado, leia também: Vídeo: Menu horizontal com CSS em 5 minutos Layout Fixo / Fluido de 3 colunas em 8 Minutos Formulário Básico em 8 minutos - Tableless form Centralizando um objeto na Horizontal e Vertical com CSS Video Tutorial #10 - Implementação de layout Utilizamos esse layout como exercício nos cursos da Visie. Dependendo do nível do pessoal, utilizamos outros layouts. Mas esse é um que o pessoal normalmente costuma escolher. É um bom exercício porque utiliza as principais propriedades do CSS. Esse e outros vídeos estão disponíveis no Campus Online da Visie. Lá você encontra videos tutoriais de Tableless, Ajax, Javascript e um monte de outras coisas. Se ainda estiver interessado, leia também: Vídeo: Menu horizontal com CSS em 5 minutos Layout Fixo / Fluido de 3 colunas em 8 Minutos Formulário Básico em 8 minutos - Tableless form Centralizando um objeto na Horizontal e Vertical com CSS Video Tutorial #10 - Implementação de layout Utilizamos esse layout como exercício nos cursos da Visie. Dependendo do nível do pessoal, utilizamos outros layouts. Mas esse é um que o pessoal normalmente costuma escolher. É um bom exercício porque utiliza as principais propriedades do CSS. Esse e outros vídeos estão disponíveis no Campus Online da Visie. Lá você encontra videos tutoriais de Tableless, Ajax, Javascript e um monte de outras coisas. Se ainda estiver interessado, leia também: Vídeo: Menu horizontal com CSS em 5 minutos Layout Fixo / Fluido de 3 colunas em 8 Minutos Formulário Básico em 8 minutos - Tableless form Centralizando um objeto na Horizontal e Vertical com CSS Video Tutorial #10 - Implementação de layout tag:odeo.com,2008-11-13,23618572 Thu, 13 Nov 2008 14:52:53 -0800 no Tableless.com.br - Web Standards com Arroz e Feijão Na Prática, css, aprender, tableless, Vídeos Tutoriais, Convertidos, campusonline http://www.odeo.com/episodes/23484744-Podcast-Tableless-26-Internet-M%C3%B3vel-fique-de-olho Uma visão superficial e rápida sobre mudanças no mercado de internet móvel. Uma pequeno mercado que está crescendo. A era da Internet Móvel demorou, mas já é realidade e está crescendo. Baixe o arquivo aqui ou assine o nosso feed. Acredite com moderação: Tentarei voltar com o podcast do Tableless com uma maneira mais light. Vocês irão perceber que o áudio não será uma maravilha. Irei gravar a maioria dentro do carro, que é onde passo uma boa parte do tempo indo para reuniões, casa, trabalho, etc. Utilizarei o iPhone para gravar, em modo de viva voz ou headset, então esperem muito do áudio. Se ainda estiver interessado, leia também: Podcast Tableless #23 - .mobi Navegação em mobiles BlogBits Podcast Podcast #15 O Safari para iPhone Uma visão superficial e rápida sobre mudanças no mercado de internet móvel. Uma pequeno mercado que está crescendo. A era da Internet Móvel demorou, mas já é realidade e está crescendo. Baixe o arquivo aqui ou assine o nosso feed. Acredite com moderação: Tentarei voltar com o podcast do Tableless com uma maneira mais light. Vocês irão perceber que o áudio não será uma maravilha. Irei gravar a maioria dentro do carro, que é onde passo uma boa parte do tempo indo para reuniões, casa, trabalho, etc. Utilizarei o iPhone para gravar, em modo de viva voz ou headset, então esperem muito do áudio. Se ainda estiver interessado, leia também: Podcast Tableless #23 - .mobi Navegação em mobiles BlogBits Podcast Podcast #15 O Safari para iPhone Uma visão superficial e rápida sobre mudanças no mercado de internet móvel. Uma pequeno mercado que está crescendo. A era da Internet Móvel demorou, mas já é realidade e está crescendo. Baixe o arquivo aqui ou assine o nosso feed. Acredite com moderação: Tentarei voltar com o podcast do Tableless com uma maneira mais light. Vocês irão perceber que o áudio não será uma maravilha. Irei gravar a maioria dentro do carro, que é onde passo uma boa parte do tempo indo para reuniões, casa, trabalho, etc. Utilizarei o iPhone para gravar, em modo de viva voz ou headset, então esperem muito do áudio. Se ainda estiver interessado, leia também: Podcast Tableless #23 - .mobi Navegação em mobiles BlogBits Podcast Podcast #15 O Safari para iPhone tag:odeo.com,2008-10-13,23484744 Mon, 13 Oct 2008 21:46:38 -0700 no Tableless.com.br - Web Standards com Arroz e Feijão podcasts, podcast, web, smartphone, padroes web, Internet Móvel, dispositivos moveis http://www.odeo.com/episodes/23232929-V%C3%ADdeos-Wordpress-Internet-M%C3%B3vel-e-mais O Tableless está passando por pequenas mudanças, pequenas mas substanciais. Muita gente me disse que depois do último redesign, ficou muito difícil para encontrar informações aqui no Tableless. Para mim, dono do site, que sei onde encontrar tudo nessa budega, duvidei um pouco, mas depois notei que isso era verdade. Por isso, resolvi organizar melhor o conteúdo. Para começar, separei tudo sobre Wordpress que já publicamos em apenas um lugar. Tudo que publicarmos sobre Wordpress, irá parar neste endereço. Fiz a mesma coisa com assuntos sobre Internet Móvel. Farei isso com outros assuntos aqui do site, mas isso leva tempo porque muitos posts antigos estão catalogados em categorias erradas, e isso leva um bocado de tempo para arrumar tudo. Outro assunto que organizei foi a série sobre Extensions que fiz um tempo atrás aqui no Tableless. Nessa parte você encontra algumas extensões para Firefox úteis para nós desenvolvedores e outras que nos dão alguma referência de funcionalidades. Sobre... O Tableless está passando por pequenas mudanças, pequenas mas substanciais. Muita gente me disse que depois do último redesign, ficou muito difícil para encontrar informações aqui no Tableless. Para mim, dono do site, que sei onde encontrar tudo nessa budega, duvidei um pouco, mas depois notei que isso era verdade. Por isso, resolvi organizar melhor o conteúdo. Para começar, separei tudo sobre Wordpress que já publicamos em apenas um lugar. Tudo que publicarmos sobre Wordpress, irá parar neste endereço. Fiz a mesma coisa com assuntos sobre Internet Móvel. Farei isso com outros assuntos aqui do site, mas isso leva tempo porque muitos posts antigos estão catalogados em categorias erradas, e isso leva um bocado de tempo para arrumar tudo. Outro assunto que organizei foi a série sobre Extensions que fiz um tempo atrás aqui no Tableless. Nessa parte você encontra algumas extensões para Firefox úteis para nós desenvolvedores e outras que nos dão alguma referência de funcionalidades. Sobre os vídeos tutoriais. Esse sim é um assunto que interessa uma boa parte dos visitantes. Os vídeos aqui do Tableless estão bem antigos. Mesmo assim são vídeos que ajudam um bocado a desenvolvedores que estão começando. A Visie lançou a nova versão do Campus Online. No Campus você encontra informação abundante sobre desenvolvimento web e boas práticas. Claro, há muitos vídeos sobre Tableless e estamos preparando uma penca de vídeos sobre Ajax, Javascript e Python, entre outros assuntos. Sem contar no conteúdo textual que havia nos cursos online da Visie que agora estão todos lá. Portanto, aproveite! Os vídeos estão todos em 800×600, e com qualidade ótima para ler o código que digitamos. Experimente. Outra parte dos visitantes, me perguntavam sempre onde podiam arranjar olink para assinar o Feed do Tableless. Por isso coloquei um atalho nesta página. Vou colocar também nesta mesma página, a tradicional explicação sobre o que é um FEED. Por incrível que pareça, isso ainda é necessário. E para aqueles que tem Twitter, siga o Tableless por lá também! Eu também estou por lá. Uma outra novidade é que além de mim e do Elcio, estão escrevendo também para o Tableless o Michael Granados, sobre JQuery (que também será um assunto que terá uma sessão exclusiva aqui no site) e o Pedro Rogério, sobre Wordpress. Bem-vindos! Conforme vou atualizando o conteúdo do site, vou reorganizando a segunda parte mais visitada do site depois da home, a página de Aprenda. E aos poucos vamos organizando os 5 anos de conteúdo que o site produziu! É coisa para caramba! Há por exemplo, algumas coisas úteis que estão perdidas por aí, como por exemplo a Tabela de Compatibilidade de CSS e o  guia de referência rápida de CSS em português. Informação útil para a comunidade que anda esquecida nos porões do site. Se ainda estiver interessado, leia também: Novo Tableless, agora Wordpress jQuery é bom para designers Palestras da Visie Tableless.com.br - The Wonder Years Orelha Bizarra - Curso da Visie O Tableless está passando por pequenas mudanças, pequenas mas substanciais. Muita gente me disse que depois do último redesign, ficou muito difícil para encontrar informações aqui no Tableless. Para mim, dono do site, que sei onde encontrar tudo nessa budega, duvidei um pouco, mas depois notei que isso era verdade. Por isso, resolvi organizar melhor o conteúdo. Para começar, separei tudo sobre Wordpress que já publicamos em apenas um lugar. Tudo que publicarmos sobre Wordpress, irá parar neste endereço. Fiz a mesma coisa com assuntos sobre Internet Móvel. Farei isso com outros assuntos aqui do site, mas isso leva tempo porque muitos posts antigos estão catalogados em categorias erradas, e isso leva um bocado de tempo para arrumar tudo. Outro assunto que organizei foi a série sobre Extensions que fiz um tempo atrás aqui no Tableless. Nessa parte você encontra algumas extensões para Firefox úteis para nós desenvolvedores e outras que nos dão alguma referência de funcionalidades. Sobre os vídeos tutoriais. Esse sim é um assunto que interessa uma boa parte dos visitantes. Os vídeos aqui do Tableless estão bem antigos. Mesmo assim são vídeos que ajudam um bocado a desenvolvedores que estão começando. A Visie lançou a nova versão do Campus Online. No Campus você encontra informação abundante sobre desenvolvimento web e boas práticas. Claro, há muitos vídeos sobre Tableless e estamos preparando uma penca de vídeos sobre Ajax, Javascript e Python, entre outros assuntos. Sem contar no conteúdo textual que havia nos cursos online da Visie que agora estão todos lá. Portanto, aproveite! Os vídeos estão todos em 800×600, e com qualidade ótima para ler o código que digitamos. Experimente. Outra parte dos visitantes, me perguntavam sempre onde podiam arranjar olink para assinar o Feed do Tableless. Por isso coloquei um atalho nesta página. Vou colocar também nesta mesma página, a tradicional explicação sobre o que é um FEED. Por incrível que pareça, isso ainda é necessário. E para aqueles que tem Twitter, siga o Tableless por lá também! Eu também estou por lá. Uma outra novidade é que além de mim e do Elcio, estão escrevendo também para o Tableless o Michael Granados, sobre JQuery (que também será um assunto que terá uma sessão exclusiva aqui no site) e o Pedro Rogério, sobre Wordpress. Bem-vindos! Conforme vou atualizando o conteúdo do site, vou reorganizando a segunda parte mais visitada do site depois da home, a página de Aprenda. E aos poucos vamos organizando os 5 anos de conteúdo que o site produziu! É coisa para caramba! Há por exemplo, algumas coisas úteis que estão perdidas por aí, como por exemplo a Tabela de Compatibilidade de CSS e o  guia de referência rápida de CSS em português. Informação útil para a comunidade que anda esquecida nos porões do site. Se ainda estiver interessado, leia também: Novo Tableless, agora Wordpress jQuery é bom para designers Palestras da Visie Tableless.com.br - The Wonder Years Orelha Bizarra - Curso da Visie tag:odeo.com,2008-08-30,23232929 Sat, 30 Aug 2008 22:12:13 -0700 no Tableless.com.br - Web Standards com Arroz e Feijão Videos, Geral, Cotidiano, jquery, wordpress, tableless, extensions, videostutoriais http://www.odeo.com/episodes/23056562-V%C3%ADdeo-Menu-horizontal-com-CSS-em-5-minutos Criar um menu horizontal com CSS é muito fácil e tráz algumas vantagens como a facilidade de fazer uma mudança no layout. Sem encostar no HTML, você pode modificar todo o visual do menu via CSS. Se quiser mudar o menu para a vertical, você pode fazê-lo também sem muitos problemas. Fiz um vídeo básico, mudo e rápido de 5 minutos mostrando como se faz um menu horizontal em CSS. Menu Horizontal em 5 Minutos de Diego Eis no Vimeo. Se ainda estiver interessado, leia também: Centralizando um objeto na Horizontal e Vertical com CSS Criando um Menu Horizontal com CSS Formulário Básico em 8 minutos Comentários Condicionais - Não use Sobre Internet Explorer para Mobile - Breve impressão Criar um menu horizontal com CSS é muito fácil e tráz algumas vantagens como a facilidade de fazer uma mudança no layout. Sem encostar no HTML, você pode modificar todo o visual do menu via CSS. Se quiser mudar o menu para a vertical, você pode fazê-lo também sem muitos problemas. Fiz um vídeo básico, mudo e rápido de 5 minutos mostrando como se faz um menu horizontal em CSS. Menu Horizontal em 5 Minutos de Diego Eis no Vimeo. Se ainda estiver interessado, leia também: Centralizando um objeto na Horizontal e Vertical com CSS Criando um Menu Horizontal com CSS Formulário Básico em 8 minutos Comentários Condicionais - Não use Sobre Internet Explorer para Mobile - Breve impressão Criar um menu horizontal com CSS é muito fácil e tráz algumas vantagens como a facilidade de fazer uma mudança no layout. Sem encostar no HTML, você pode modificar todo o visual do menu via CSS. Se quiser mudar o menu para a vertical, você pode fazê-lo também sem muitos problemas. Fiz um vídeo básico, mudo e rápido de 5 minutos mostrando como se faz um menu horizontal em CSS. Menu Horizontal em 5 Minutos de Diego Eis no Vimeo. Se ainda estiver interessado, leia também: Centralizando um objeto na Horizontal e Vertical com CSS Criando um Menu Horizontal com CSS Formulário Básico em 8 minutos Comentários Condicionais - Não use Sobre Internet Explorer para Mobile - Breve impressão tag:odeo.com,2008-07-07,23056562 Mon, 07 Jul 2008 02:00:59 -0700 no Tableless.com.br - Web Standards com Arroz e Feijão Na Prática, css, tableless, Vídeos Tutoriais, Aprenda, Client-Side, menu horizontal http://www.odeo.com/episodes/23045257-SEO-Sitemaps O Sitemaps é um formato simples de XML que serve para informar aos sistemas de buscas sobre seus endereços disponíveis para indexação. Esse XML relaciona as URLs existentes do seu site, com algumas informações como data da última atualização, prioridade da página em relação às outras páginas e freqüencia de atualização. O sitemap.xml é um arquivo que pode ser gerado automaticamente por um plugin ou até mesmo escrito à mão pelo desenvolvedor. O código básico do Sitemap: <?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>http://www.example.com/</loc> <lastmod>2005-01-01</lastmod>     <changefreq>monthly</changefreq> <priority>0.8</priority> </url> </urlset> As tags que podem ser inseridas no sitemap.xml são essas: Atributo Descrição <urlset> obrigatório Executa o encapsulamento do arquivo e faz referência ao padrão de protocolo atual. <url&... O Sitemaps é um formato simples de XML que serve para informar aos sistemas de buscas sobre seus endereços disponíveis para indexação. Esse XML relaciona as URLs existentes do seu site, com algumas informações como data da última atualização, prioridade da página em relação às outras páginas e freqüencia de atualização. O sitemap.xml é um arquivo que pode ser gerado automaticamente por um plugin ou até mesmo escrito à mão pelo desenvolvedor. O código básico do Sitemap: <?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>http://www.example.com/</loc> <lastmod>2005-01-01</lastmod>     <changefreq>monthly</changefreq> <priority>0.8</priority> </url> </urlset> As tags que podem ser inseridas no sitemap.xml são essas: Atributo Descrição <urlset> obrigatório Executa o encapsulamento do arquivo e faz referência ao padrão de protocolo atual. <url> obrigatório Tag pai de cada entrada de URL. O restante das tags são as tags filhas dessa tag. <loc> obrigatório URL da página. Esse URL deve começar com um protocolo (como http) e terminar com uma barra final, caso seja exigido pelo seu servidor. Esse valor deve conter menos de 2.048 caracteres. <lastmod> opcional A data da última modificação do arquivo. Essa data deve estar no formato de data e hora do W3C. Esse formato permite omitir o horário, se desejar, e usar AAAA-MM-DD. Lembre-se de que esta tag é separada do cabeçalho If-Modified-Since (304) que o servidor pode retornar, e os mecanismos de pesquisa podem usar as informações de ambas as fontes de forma diferente. <changefreq> opcional A freqüência com que a página é alterada. Esse valor fornece informações gerais para os mecanismos de pesquisa e pode ser que ele não corresponda exatamente à freqüência de indexação da página. Os valores válidos são: always hourly daily weekly monthly anual never O valor “always” deve ser usado para descrever os documentos que sempre são alterados quando acessados. O valor “never” deve ser usado para descrever os URLs arquivados. Observe que o valor dessa tag é considerado uma dica e não um comando. Mesmo que os indexadores de mecanismo de pesquisa possam considerar essas informações ao tomar decisões, pode ser que indexem as páginas marcadas como “horárias” com menos freqüência do que isso e talvez façam a indexação de páginas marcadas como “anualmente” com mais freqüência do que isso. Os indexadores podem indexar páginas marcadas como “nunca” periodicamente, para que possam lidar com alterações inesperadas nessas páginas. <priority> opcional A prioridade desse URL em relação a outros URLs do mesmo site. Os valores válidos vão de 0.0 a 1.0. Esse valor não afeta o modo como as páginas são comparadas às páginas em outros sites — apenas permite que os mecanismos de pesquisa saibam quais páginas você considera mais importantes para os indexadores. A prioridade padrão de uma página é 0,5. Observe que não é provável que a prioridade atribuída a uma página influencie a posição dos URLs nas páginas de resultados de um mecanismo de pesquisa. Os mecanismos de pesquisa podem usar essas informações quando selecionam entre URLs no mesmo site. Use essa tag para aumentar a probabilidade de a maioria das páginas importantes estarem presentes em um índice de pesquisa. Além disso, observe que a atribuição de uma prioridade alta a todos os URLs no site provavelmente não o ajudará. Como a prioridade é relativa, ela só é usada para priorizar os URLs do seu site. Tabela retirada do sitemaps.org Local dos arquivos sitemaps.xml É importante saber que o local que o sitemap.xml é colocado determina o quais urls podem ser colocadas no arquivo. Exemplo: fiz um sitemap.xml para o site de treinamentos da Visie cuja URL é visie.com.br/treinamento. No meu sitemap.xml apenas poderá haver URLs que comecem com visie.com.br/treinamento e não apenas visie.com.br. Todas as URLs que estão no Sitemap precisam utilizar o mesmo protocolo - no exemplo da Visie estou utilizando o HTTP - e precisam estar no mesmo host que o Sitemap. Por exmeplo, se o Sitemap estiver localizado em: visie.com.br/treinamento/sitemap.xml, ele não pode incluir URLs de um subdominio.visie.com.br. Informando os buscadores que seu sitemap.xml existe Há duas maneiras fáceis para avisar aos sistemas de busca que seu sitemap.xml está disponível: Enviando o seu Sitemap por meio da interface de envio do mecanismo de pesquisa Especificando a localização do Sitemap no seu arquivo robots.txt Enviando o seu Sitemap por meio da interface de envio do mecanismo de pesquisa. O Google tem um local muito interessante onde além de informar o endereço do seu sitemap.xml você pode ter uma série de outras informações importantes para seu site, é o Google Webmaster Tools. Especificando a localização do Sitemap no seu arquivo robots.txt. Para indicar o sitemap.xml pelo robots.txt basta acrescentar essa linha: Sitemap: <local_do_Sitemap> Se você quiser, você pode colocar vários endereços de Sitemaps, bastando inserir várias linhas como as de cima indicando os endereços dos respectivos sitemaps. Ter um sitemap.xml não garante que você uma URL seja ou não mais indexada que as outras. Mesmo assim, é um adendo para que os buscadores fiquem mais informados com os endereços do seu site. Se você não utiliza nenhum plugin para que o sitemap.xml seja gerado automaticamente, fique atento às atualizações das URLs. Você pode estar informando aos buscadores URLs antigas e isso pode afetar nos resultados organicos com o do Google. Se você quiser testar alguns plugins ou programas para gerar seu sitemap.xml automaticamente, visite este link. Se ainda estiver interessado, leia também: Formulário Básico em 8 minutos Charsets e Encodes - Tabelas de caracteres Wordpress - Uma pequena introdução O que é Tableless? Pesquisar no Google O Sitemaps é um formato simples de XML que serve para informar aos sistemas de buscas sobre seus endereços disponíveis para indexação. Esse XML relaciona as URLs existentes do seu site, com algumas informações como data da última atualização, prioridade da página em relação às outras páginas e freqüencia de atualização. O sitemap.xml é um arquivo que pode ser gerado automaticamente por um plugin ou até mesmo escrito à mão pelo desenvolvedor. O código básico do Sitemap: <?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>http://www.example.com/</loc> <lastmod>2005-01-01</lastmod>     <changefreq>monthly</changefreq> <priority>0.8</priority> </url> </urlset> As tags que podem ser inseridas no sitemap.xml são essas: Atributo Descrição <urlset> obrigatório Executa o encapsulamento do arquivo e faz referência ao padrão de protocolo atual. <url> obrigatório Tag pai de cada entrada de URL. O restante das tags são as tags filhas dessa tag. <loc> obrigatório URL da página. Esse URL deve começar com um protocolo (como http) e terminar com uma barra final, caso seja exigido pelo seu servidor. Esse valor deve conter menos de 2.048 caracteres. <lastmod> opcional A data da última modificação do arquivo. Essa data deve estar no formato de data e hora do W3C. Esse formato permite omitir o horário, se desejar, e usar AAAA-MM-DD. Lembre-se de que esta tag é separada do cabeçalho If-Modified-Since (304) que o servidor pode retornar, e os mecanismos de pesquisa podem usar as informações de ambas as fontes de forma diferente. <changefreq> opcional A freqüência com que a página é alterada. Esse valor fornece informações gerais para os mecanismos de pesquisa e pode ser que ele não corresponda exatamente à freqüência de indexação da página. Os valores válidos são: always hourly daily weekly monthly anual never O valor “always” deve ser usado para descrever os documentos que sempre são alterados quando acessados. O valor “never” deve ser usado para descrever os URLs arquivados. Observe que o valor dessa tag é considerado uma dica e não um comando. Mesmo que os indexadores de mecanismo de pesquisa possam considerar essas informações ao tomar decisões, pode ser que indexem as páginas marcadas como “horárias” com menos freqüência do que isso e talvez façam a indexação de páginas marcadas como “anualmente” com mais freqüência do que isso. Os indexadores podem indexar páginas marcadas como “nunca” periodicamente, para que possam lidar com alterações inesperadas nessas páginas. <priority> opcional A prioridade desse URL em relação a outros URLs do mesmo site. Os valores válidos vão de 0.0 a 1.0. Esse valor não afeta o modo como as páginas são comparadas às páginas em outros sites — apenas permite que os mecanismos de pesquisa saibam quais páginas você considera mais importantes para os indexadores. A prioridade padrão de uma página é 0,5. Observe que não é provável que a prioridade atribuída a uma página influencie a posição dos URLs nas páginas de resultados de um mecanismo de pesquisa. Os mecanismos de pesquisa podem usar essas informações quando selecionam entre URLs no mesmo site. Use essa tag para aumentar a probabilidade de a maioria das páginas importantes estarem presentes em um índice de pesquisa. Além disso, observe que a atribuição de uma prioridade alta a todos os URLs no site provavelmente não o ajudará. Como a prioridade é relativa, ela só é usada para priorizar os URLs do seu site. Tabela retirada do sitemaps.org Local dos arquivos sitemaps.xml É importante saber que o local que o sitemap.xml é colocado determina o quais urls podem ser colocadas no arquivo. Exemplo: fiz um sitemap.xml para o site de treinamentos da Visie cuja URL é visie.com.br/treinamento. No meu sitemap.xml apenas poderá haver URLs que comecem com visie.com.br/treinamento e não apenas visie.com.br. Todas as URLs que estão no Sitemap precisam utilizar o mesmo protocolo - no exemplo da Visie estou utilizando o HTTP - e precisam estar no mesmo host que o Sitemap. Por exmeplo, se o Sitemap estiver localizado em: visie.com.br/treinamento/sitemap.xml, ele não pode incluir URLs de um subdominio.visie.com.br. Informando os buscadores que seu sitemap.xml existe Há duas maneiras fáceis para avisar aos sistemas de busca que seu sitemap.xml está disponível: Enviando o seu Sitemap por meio da interface de envio do mecanismo de pesquisa Especificando a localização do Sitemap no seu arquivo robots.txt Enviando o seu Sitemap por meio da interface de envio do mecanismo de pesquisa. O Google tem um local muito interessante onde além de informar o endereço do seu sitemap.xml você pode ter uma série de outras informações importantes para seu site, é o Google Webmaster Tools. Especificando a localização do Sitemap no seu arquivo robots.txt. Para indicar o sitemap.xml pelo robots.txt basta acrescentar essa linha: Sitemap: <local_do_Sitemap> Se você quiser, você pode colocar vários endereços de Sitemaps, bastando inserir várias linhas como as de cima indicando os endereços dos respectivos sitemaps. Ter um sitemap.xml não garante que você uma URL seja ou não mais indexada que as outras. Mesmo assim, é um adendo para que os buscadores fiquem mais informados com os endereços do seu site. Se você não utiliza nenhum plugin para que o sitemap.xml seja gerado automaticamente, fique atento às atualizações das URLs. Você pode estar informando aos buscadores URLs antigas e isso pode afetar nos resultados organicos com o do Google. Se você quiser testar alguns plugins ou programas para gerar seu sitemap.xml automaticamente, visite este link. Se ainda estiver interessado, leia também: Formulário Básico em 8 minutos Charsets e Encodes - Tabelas de caracteres Wordpress - Uma pequena introdução O que é Tableless? Pesquisar no Google tag:odeo.com,2008-07-02,23045257 Wed, 02 Jul 2008 08:47:23 -0700 no Tableless.com.br - Web Standards com Arroz e Feijão Artigos, Na Prática, SEO, desenvolvimento web, xml, Tecnologia e Tendências, sitemap http://www.odeo.com/episodes/23035680-Browsers-para-Mobile-Nova-era Pense um pouco e tente lembrar de pelo menos uma maneira de acessar a internet que não seja a partir de dispositivos móveis ou computadores (notebooks e desktops). Difícil, não é? Hoje, conhecemos bem apenas um meio de acessar a internet que é o computador. Estamos começando agora a navegar decentemente com dispositivos móveis, como um PDAs ou Smartphones. Além do óbvio, não conhecemos os futuros reais problemas de usabilidade e arquitetura de informação dos sites destinados à estes aparelhos. Estamos apenas engatinhando. Naveguei um pouco pelo Safari do iPhone, e enquanto me adaptava, me perguntava várias vezes sobre a real necessidade de haver uma versão para mobiles. O iPhone tem uma maneira diferente de tratar os sites. Ele renderiza como se fosse um browser para desktop: o site aparece em miniatura na tela. Assim você tem uma visão geral do site e com apenas dois toques você aumenta o zoom no local que você gostaria de ler. O interessante do iPhone, é que a Apple ensina e mostr... Pense um pouco e tente lembrar de pelo menos uma maneira de acessar a internet que não seja a partir de dispositivos móveis ou computadores (notebooks e desktops). Difícil, não é? Hoje, conhecemos bem apenas um meio de acessar a internet que é o computador. Estamos começando agora a navegar decentemente com dispositivos móveis, como um PDAs ou Smartphones. Além do óbvio, não conhecemos os futuros reais problemas de usabilidade e arquitetura de informação dos sites destinados à estes aparelhos. Estamos apenas engatinhando. Naveguei um pouco pelo Safari do iPhone, e enquanto me adaptava, me perguntava várias vezes sobre a real necessidade de haver uma versão para mobiles. O iPhone tem uma maneira diferente de tratar os sites. Ele renderiza como se fosse um browser para desktop: o site aparece em miniatura na tela. Assim você tem uma visão geral do site e com apenas dois toques você aumenta o zoom no local que você gostaria de ler. O interessante do iPhone, é que a Apple ensina e mostra exatamente como fazer um site que possa ser bem visto em um iPhone. Nunca vi nenhuma outra fabricante de celular fazer algo parecido. Eles te mostram características e formas de fazer um site bem feito com características úteis para o visitante e usuário de iPhone. iPhone SDK for Web Developers de iphonedevel no Vimeo. Juntamente com o iPhone, o Opera Mini 4, também utiliza esse tipo de navegação por miniatura e zoom. Esse método de navegação para celulares com tela pequena se mostrou muito mais confortável que o modo convencional. Na minha opinião, essa maneira de renderizar, dispensa a criação de uma outra folha de estilo para mobiles. Como não existe apenas o iPhone no mundo, e nem todo mundo utiliza o Opera Mini para navegar, ainda precisamos criar uma versão mobile do nosso CSS para que os sites sejam acessados decentemente a partir de mobiles com navegação convencional. Opera mini 4 - iPhone Killer! Part 1 de Kiran Konathala no Vimeo. O W3C acabou de lançar um teste parecido com o Acid para testar a compatibilidade dos browsers para mobiles. A guerra dos browsers para mobiles vai ser diferente. O Internet Explorer ainda não prevalece nesta área, e sistemas realmente bons, utilizam o Opera como navegador padrão. Uma boa notícia é que o Internet Explorer para mobiles não é tão terrível quanto o IE para desktops. A Visie irá ministrar uma palestra rápida sobre o Internet Móvel no dia 07/07 em São Paulo por R$30. Enquanto isso, leia algo antes de começar a fazer a versões mobiles por aí: Sites para dispositivos móveis - Breve Introdução Sites para dispositivos móveis - SSR Sites para dispositivos móveis - MediaTypes Breve Introdução: XHTML Mobile Profile Browsers para dispositivos móveis 2.7 Bilhões de Celulares Curso de Internet Móvel Web Development for the iphone Se ainda estiver interessado, leia também: Browsers - Guerra Fria Navegação em mobiles IE8 - O sonho não acabou Sobre Internet Explorer para Mobile - Breve impressão Mobilidade na cabeça Pense um pouco e tente lembrar de pelo menos uma maneira de acessar a internet que não seja a partir de dispositivos móveis ou computadores (notebooks e desktops). Difícil, não é? Hoje, conhecemos bem apenas um meio de acessar a internet que é o computador. Estamos começando agora a navegar decentemente com dispositivos móveis, como um PDAs ou Smartphones. Além do óbvio, não conhecemos os futuros reais problemas de usabilidade e arquitetura de informação dos sites destinados à estes aparelhos. Estamos apenas engatinhando. Naveguei um pouco pelo Safari do iPhone, e enquanto me adaptava, me perguntava várias vezes sobre a real necessidade de haver uma versão para mobiles. O iPhone tem uma maneira diferente de tratar os sites. Ele renderiza como se fosse um browser para desktop: o site aparece em miniatura na tela. Assim você tem uma visão geral do site e com apenas dois toques você aumenta o zoom no local que você gostaria de ler. O interessante do iPhone, é que a Apple ensina e mostra exatamente como fazer um site que possa ser bem visto em um iPhone. Nunca vi nenhuma outra fabricante de celular fazer algo parecido. Eles te mostram características e formas de fazer um site bem feito com características úteis para o visitante e usuário de iPhone. iPhone SDK for Web Developers de iphonedevel no Vimeo. Juntamente com o iPhone, o Opera Mini 4, também utiliza esse tipo de navegação por miniatura e zoom. Esse método de navegação para celulares com tela pequena se mostrou muito mais confortável que o modo convencional. Na minha opinião, essa maneira de renderizar, dispensa a criação de uma outra folha de estilo para mobiles. Como não existe apenas o iPhone no mundo, e nem todo mundo utiliza o Opera Mini para navegar, ainda precisamos criar uma versão mobile do nosso CSS para que os sites sejam acessados decentemente a partir de mobiles com navegação convencional. Opera mini 4 - iPhone Killer! Part 1 de Kiran Konathala no Vimeo. O W3C acabou de lançar um teste parecido com o Acid para testar a compatibilidade dos browsers para mobiles. A guerra dos browsers para mobiles vai ser diferente. O Internet Explorer ainda não prevalece nesta área, e sistemas realmente bons, utilizam o Opera como navegador padrão. Uma boa notícia é que o Internet Explorer para mobiles não é tão terrível quanto o IE para desktops. A Visie irá ministrar uma palestra rápida sobre o Internet Móvel no dia 07/07 em São Paulo por R$30. Enquanto isso, leia algo antes de começar a fazer a versões mobiles por aí: Sites para dispositivos móveis - Breve Introdução Sites para dispositivos móveis - SSR Sites para dispositivos móveis - MediaTypes Breve Introdução: XHTML Mobile Profile Browsers para dispositivos móveis 2.7 Bilhões de Celulares Curso de Internet Móvel Web Development for the iphone Se ainda estiver interessado, leia também: Browsers - Guerra Fria Navegação em mobiles IE8 - O sonho não acabou Sobre Internet Explorer para Mobile - Breve impressão Mobilidade na cabeça tag:odeo.com,2008-06-28,23035680 Sat, 28 Jun 2008 22:23:08 -0700 no Tableless.com.br - Web Standards com Arroz e Feijão iphone, apple, opera, Browsers, safari, desenvolvimento web, tableless, Tecnologia e Tendências, mobiles, Internet Móvel http://www.odeo.com/episodes/22599206-Layout-Fixo-Fluido-de-3-colunas-em-8-Minutos Na verdade a gravação foi feita em 7 minutos e 51 segundos. Neste vídeo mostro como faço para criar um layout básico de 3 colunas. Esta técnica tem um diferencial: retirando apenas uma linha do CSS, o layout passa de fixo, para fluido (como o layout do submarino ou americanas). Isso dá várias possibilidades de layout para o designer e poupa muito trabalho da equipe ao redesenhar e modificar o layout. Se quiser ver o exemplo com o código fonte, clique aqui. Novamente o vídeo está sem áudio por motivos de falta de tempo. Sem áudio não preciso fica me preocupando com a explicação, só digito, gravo e pronto. Se ainda estiver interessado, leia também: Video Tutorial #9 - Implementando a home de um site Formulário Básico em 8 minutos Palestras da Visie Informação e Formatação; As duas camadas de desenvolvimento web O Caminho Suave para o Tableless Na verdade a gravação foi feita em 7 minutos e 51 segundos. Neste vídeo mostro como faço para criar um layout básico de 3 colunas. Esta técnica tem um diferencial: retirando apenas uma linha do CSS, o layout passa de fixo, para fluido (como o layout do submarino ou americanas). Isso dá várias possibilidades de layout para o designer e poupa muito trabalho da equipe ao redesenhar e modificar o layout. Se quiser ver o exemplo com o código fonte, clique aqui. Novamente o vídeo está sem áudio por motivos de falta de tempo. Sem áudio não preciso fica me preocupando com a explicação, só digito, gravo e pronto. Se ainda estiver interessado, leia também: Video Tutorial #9 - Implementando a home de um site Formulário Básico em 8 minutos Palestras da Visie Informação e Formatação; As duas camadas de desenvolvimento web O Caminho Suave para o Tableless Na verdade a gravação foi feita em 7 minutos e 51 segundos. Neste vídeo mostro como faço para criar um layout básico de 3 colunas. Esta técnica tem um diferencial: retirando apenas uma linha do CSS, o layout passa de fixo, para fluido (como o layout do submarino ou americanas). Isso dá várias possibilidades de layout para o designer e poupa muito trabalho da equipe ao redesenhar e modificar o layout. Se quiser ver o exemplo com o código fonte, clique aqui. Novamente o vídeo está sem áudio por motivos de falta de tempo. Sem áudio não preciso fica me preocupando com a explicação, só digito, gravo e pronto. Se ainda estiver interessado, leia também: Video Tutorial #9 - Implementando a home de um site Formulário Básico em 8 minutos Palestras da Visie Informação e Formatação; As duas camadas de desenvolvimento web O Caminho Suave para o Tableless tag:odeo.com,2008-06-10,22599206 Tue, 10 Jun 2008 05:59:06 -0700 no Tableless.com.br - Web Standards com Arroz e Feijão Na Prática, css, xhtml, tableless, Vídeos Tutoriais, Tecnologia e Tendências http://www.odeo.com/episodes/22574648-Formul%C3%A1rio-B%C3%A1sico-em-8-minutos Na verdade ele foi escrito em 7 minutos e 51 segundos e foram escritos apenas o XHTML e CSS. Infelizmente está sem áudio. O formulário, depois do link, é o “objeto” mais utilizado pelos usuários para interagir com o site. É questão de vida e morte para muitos profissionais. Se não for bem escrito, pode virar um inferno. Com as tags certas, você consegue fazer uma estrutura enxuta e fácil de customizar. Siga a regra áurea do desenvolvimento web: Keep It Simple Stupid. Direto pelo YouTube: Construindo o XHTML e CSS de um formulário Se ainda estiver interessado, leia também: Informação e Formatação; As duas camadas de desenvolvimento web O que é Tableless? Palestras da Visie Tutorial Tableless Básico IE8 - O sonho não acabou Na verdade ele foi escrito em 7 minutos e 51 segundos e foram escritos apenas o XHTML e CSS. Infelizmente está sem áudio. O formulário, depois do link, é o “objeto” mais utilizado pelos usuários para interagir com o site. É questão de vida e morte para muitos profissionais. Se não for bem escrito, pode virar um inferno. Com as tags certas, você consegue fazer uma estrutura enxuta e fácil de customizar. Siga a regra áurea do desenvolvimento web: Keep It Simple Stupid. Direto pelo YouTube: Construindo o XHTML e CSS de um formulário Se ainda estiver interessado, leia também: Informação e Formatação; As duas camadas de desenvolvimento web O que é Tableless? Palestras da Visie Tutorial Tableless Básico IE8 - O sonho não acabou Na verdade ele foi escrito em 7 minutos e 51 segundos e foram escritos apenas o XHTML e CSS. Infelizmente está sem áudio. O formulário, depois do link, é o “objeto” mais utilizado pelos usuários para interagir com o site. É questão de vida e morte para muitos profissionais. Se não for bem escrito, pode virar um inferno. Com as tags certas, você consegue fazer uma estrutura enxuta e fácil de customizar. Siga a regra áurea do desenvolvimento web: Keep It Simple Stupid. Direto pelo YouTube: Construindo o XHTML e CSS de um formulário Se ainda estiver interessado, leia também: Informação e Formatação; As duas camadas de desenvolvimento web O que é Tableless? Palestras da Visie Tutorial Tableless Básico IE8 - O sonho não acabou tag:odeo.com,2008-06-02,22574648 Mon, 02 Jun 2008 02:00:41 -0700 no Tableless.com.br - Web Standards com Arroz e Feijão Na Prática, css, xhtml, desenvolvimento web, padroes web, tableless, Vídeos Tutoriais, formularios, Aprenda http://www.odeo.com/episodes/22461044-O-LOOP-do-Wordpress O Wordpress tem vários segredos. Um deles é muito interessante: The Loop. O Loop é usado no Wordpress para mostrar os posts do site. O Wordpress procura os posts publicados no sistema e exibe na página seu conteúdo. Juntando isso com o resto das Template Tags você consegue ter qualquer informação relacionado ao conteúdo publicado no sistema. Desenvolvedores que não trabalharam ainda com Wordpress, geralmente se assustam quando percebem a quantidade de arquivos utilizados para criar alguns temas. Se você é um deles, relaxe. Você precisa de apenas um arquivo para fazer um site inteiro no Wordpress, o index.php. E dentro deste index.php você coloca o código do LOOP. <?php while (have_posts()) : the_post(); ?> <!-- Template Tags e conteúdo --> <?php endwhile; ?> Os passo são os seguintes: Primeiro o have_posts() checa se há posts para serem exibidos. Se houverem posts, o Loop começa. Enquanto o loop continuar a executar, tudo o que você colocar dentro dele será r... O Wordpress tem vários segredos. Um deles é muito interessante: The Loop. O Loop é usado no Wordpress para mostrar os posts do site. O Wordpress procura os posts publicados no sistema e exibe na página seu conteúdo. Juntando isso com o resto das Template Tags você consegue ter qualquer informação relacionado ao conteúdo publicado no sistema. Desenvolvedores que não trabalharam ainda com Wordpress, geralmente se assustam quando percebem a quantidade de arquivos utilizados para criar alguns temas. Se você é um deles, relaxe. Você precisa de apenas um arquivo para fazer um site inteiro no Wordpress, o index.php. E dentro deste index.php você coloca o código do LOOP. <?php while (have_posts()) : the_post(); ?> <!-- Template Tags e conteúdo --> <?php endwhile; ?> Os passo são os seguintes: Primeiro o have_posts() checa se há posts para serem exibidos. Se houverem posts, o Loop começa. Enquanto o loop continuar a executar, tudo o que você colocar dentro dele será repetido para cada um dos posts exibidos. Por exemplo: links de comentários, data, autor, e etc. Se não houverem mais posts, a função have_posts() retorna false e então o loop pára de ser executado. Dentro deste while vai sua estrutura com as Template Tags. Fica mais ou menos assim: <?php while (have_posts()) : the_post(); ?> <?php the_content(); ?> <?php endwhile; ?> A Template Tag the_content() exibe o conteúdo do post. Vamos rechear mais este código: <?php while (have_posts()) : the_post(); ?> <h1><?php the_title(); ?></h1> <div id="texto"> <?php the_content(); ?> </div> <?php endwhile; ?> Agora o conteúdo fica dentro de um div específico chamado #texto. E o Título do post foi colocado dentro de uma tag apropriada, H1. Dentro deste loop você coloca tudo quanto é objeto que você queira que se repita em cada um dos posts que forem exibidos. Normalmente: data, autor, número de comentários, links para feeds ou qualquer outro elemento normal em blogs. <?php while (have_posts()) : the_post(); ?> <h1><?php the_title(); ?></h1> <div id="texto"> <?php the_content(); ?> <small><?php the_time('F jS, Y') ?> por <?php the_author() ?> </small> </div> <?php endwhile; ?> Esse código puxa do banco: título do post, o conteúdo do post, o dia que foi publicado e o nome do autor. Recheando com mais códigos para inserir uma sidebar, cabeçalho e rodapé, já começamos a montar a estrutura de um site de verdade. Mesmo assim, o principal da informação do site, foi feito nestas poucas linhas. Se quiser, pegue o arquivo de exemplo aqui. Se ainda estiver interessado, leia também: Browsers - Guerra Fria IE8 - O sonho não acabou Quem precisa de versão mobile? Informação e Formatação; As duas camadas de desenvolvimento web Video Tutorial #10 - Implementação de layout O Wordpress tem vários segredos. Um deles é muito interessante: The Loop. O Loop é usado no Wordpress para mostrar os posts do site. O Wordpress procura os posts publicados no sistema e exibe na página seu conteúdo. Juntando isso com o resto das Template Tags você consegue ter qualquer informação relacionado ao conteúdo publicado no sistema. Desenvolvedores que não trabalharam ainda com Wordpress, geralmente se assustam quando percebem a quantidade de arquivos utilizados para criar alguns temas. Se você é um deles, relaxe. Você precisa de apenas um arquivo para fazer um site inteiro no Wordpress, o index.php. E dentro deste index.php você coloca o código do LOOP. <?php while (have_posts()) : the_post(); ?> <!-- Template Tags e conteúdo --> <?php endwhile; ?> Os passo são os seguintes: Primeiro o have_posts() checa se há posts para serem exibidos. Se houverem posts, o Loop começa. Enquanto o loop continuar a executar, tudo o que você colocar dentro dele será repetido para cada um dos posts exibidos. Por exemplo: links de comentários, data, autor, e etc. Se não houverem mais posts, a função have_posts() retorna false e então o loop pára de ser executado. Dentro deste while vai sua estrutura com as Template Tags. Fica mais ou menos assim: <?php while (have_posts()) : the_post(); ?> <?php the_content(); ?> <?php endwhile; ?> A Template Tag the_content() exibe o conteúdo do post. Vamos rechear mais este código: <?php while (have_posts()) : the_post(); ?> <h1><?php the_title(); ?></h1> <div id="texto"> <?php the_content(); ?> </div> <?php endwhile; ?> Agora o conteúdo fica dentro de um div específico chamado #texto. E o Título do post foi colocado dentro de uma tag apropriada, H1. Dentro deste loop você coloca tudo quanto é objeto que você queira que se repita em cada um dos posts que forem exibidos. Normalmente: data, autor, número de comentários, links para feeds ou qualquer outro elemento normal em blogs. <?php while (have_posts()) : the_post(); ?> <h1><?php the_title(); ?></h1> <div id="texto"> <?php the_content(); ?> <small><?php the_time('F jS, Y') ?> por <?php the_author() ?> </small> </div> <?php endwhile; ?> Esse código puxa do banco: título do post, o conteúdo do post, o dia que foi publicado e o nome do autor. Recheando com mais códigos para inserir uma sidebar, cabeçalho e rodapé, já começamos a montar a estrutura de um site de verdade. Mesmo assim, o principal da informação do site, foi feito nestas poucas linhas. Se quiser, pegue o arquivo de exemplo aqui. Se ainda estiver interessado, leia também: Browsers - Guerra Fria IE8 - O sonho não acabou Quem precisa de versão mobile? Informação e Formatação; As duas camadas de desenvolvimento web Video Tutorial #10 - Implementação de layout tag:odeo.com,2008-04-28,22461044 Mon, 28 Apr 2008 01:00:24 -0700 no Tableless.com.br - Web Standards com Arroz e Feijão Na Prática, Geral, serverside, padroes web, worpdress http://www.odeo.com/episodes/22203401-Charsets-e-Encodes-Tabelas-de-caracteres Quando você escreve um documento HTML (ou qualquer outra linguagem baseada em SGML) é necessário que especifiquemos o Charset utilizado. O Charset é o conjunto de caracteres utilizados para escrever o documento. Um jogo de caracteres consiste em ter 1) repertório com caracteres como a letra “A” ou o caractere Chinês que significa “água” e 2) uma posição de referência para cada um dos caracteres no repertório. Cada caractere é identificado e localizado por este código de posição. Por exemplo, na tabela ASCII, as posições 65, 66 e 67 se referem às letras A, B e C respectivamente. Abaixo, veja a tabela de caracteres ASCII: 00 - (NUL) 01 - (SOH) 02 - (STX) 03 - (ETX) 04 - (EOT) 05 - (ENQ) 06 - (ACK) 07 - (BEL) 08 - (BS) 09 - (HT) 10 - (LF) 11 - (VT) 12 - (FF) 13 - (CR) 14 - (SO) 15 - (SI) 16 - (DLE) 17 - (D1) 18 - (D2) 19 - (D3) 20 - (D4) 21 - (NAK) 22 - (SYN) 23 - (ETB) 24 - (CAN) 25 - (EM) 26 - (SUB) 27 - (ESC) 28 - (FS) 29 - (GS) 30 - (RS) 31 - (US) 32 - (Espa... Quando você escreve um documento HTML (ou qualquer outra linguagem baseada em SGML) é necessário que especifiquemos o Charset utilizado. O Charset é o conjunto de caracteres utilizados para escrever o documento. Um jogo de caracteres consiste em ter 1) repertório com caracteres como a letra “A” ou o caractere Chinês que significa “água” e 2) uma posição de referência para cada um dos caracteres no repertório. Cada caractere é identificado e localizado por este código de posição. Por exemplo, na tabela ASCII, as posições 65, 66 e 67 se referem às letras A, B e C respectivamente. Abaixo, veja a tabela de caracteres ASCII: 00 - (NUL) 01 - (SOH) 02 - (STX) 03 - (ETX) 04 - (EOT) 05 - (ENQ) 06 - (ACK) 07 - (BEL) 08 - (BS) 09 - (HT) 10 - (LF) 11 - (VT) 12 - (FF) 13 - (CR) 14 - (SO) 15 - (SI) 16 - (DLE) 17 - (D1) 18 - (D2) 19 - (D3) 20 - (D4) 21 - (NAK) 22 - (SYN) 23 - (ETB) 24 - (CAN) 25 - (EM) 26 - (SUB) 27 - (ESC) 28 - (FS) 29 - (GS) 30 - (RS) 31 - (US) 32 - (Espaço) 33 - ! 34 - “ 35 - # 36 - $ 37 - % 38 - & 39 - ‘ 40 - ( 41 - ) 42 - * 43 - + 44 - , 45 - - 46 - . 47 - / 48 - 0 49 - 1 50 - 2 51 - 3 52 - 4 53 - 5 54 - 6 55 - 7 56 - 8 57 - 9 58 - : 59 - ; 60 - < 61 - = 62 - &gt/ 63 - ? 64 - @ 65 - A 66 - B 67 - C 68 - D 69 - E 70 - F 71 - G 72 - H 73 - I 74 - J 75 - K 76 - L 77 - M 78 - N 79 - O 80 - P 81 - Q 82 - R 83 - S 84 - T 85 - U 86 - V 87 - W 88 - X 89 - Y 90 - Z 91 - [ 92 - \ 93 - ] 94 - ^ 95 - _ 96 - ` 97 - a 98 - b 99 - c 100 - d 101 - e 102 - f 103 - g 104 - h 105 - i 106 - j 107 - k 108 - l 109 - m 110 - n 111 - o 112 - p 113 - q 114 - r 115 - s 116 - t 117 - u 118 - v 119 - w 120 - x 121 - y 122 - z 123 - { 124 - | 125 - } 126 - ~ 127 - (DELETE) A tabela de caracteres ASCII (Código Padrão Americano para Intercâmbio de Informações) foi a primeira tabela utilizada em larga escala. O computador foi desenvolvido nos Estados Unidos. No vocabulário americano, não existem acentos, além disso, era um código de 7 bits, e não 8. Ou seja, ao invés de 256 posições, a tabela ASCII tinha apenas 128 posições - como você sabe, tudo nos computadores são um grupo de zeros (0) e uns (1) chamados de bits. Esses zeros e uns formam grupos de oito em oito que chamados de bytes e representam um número entre 0 e 255. Como as imagens, áudio, vídeos, programas e tudo o que temos nos sistemas de hoje, os caracteres que aparecem na sua tela são grupos de zeros e uns. O computador se popularizou e a necessidade de utilizar acentos e outros tipos de caracteres (Chineses, por exemplo) tornou-se um problema. Hoje, a maioria das tabelas utilizadas foram criadas suprindo as necessidades de um idioma específico, por este motivo elas se tornaram muito limitadas. Por exemplo, se você estiver escrevendo um documento utilizando a tabela de caracteres chinesa, você não poderá escrever algo em hebraico neste documento. Por conta disso muitos problemas podem surgir, por exemplo, seria impossível criar um curso online de hebraico para chineses. Será também um problema se você tiver que fazer um site ou sistema com suporte a diversos idiomas. Por exemplo, um sistema de blog projetado para uso internacional. Isso por que a posição dos caracteres varia de tabela para tabela. Dois codificadores podem usar o mesmo número para dois caracteres diferentes ou usar números diferentes para o mesmo caractere. A Web é acessada por pessoas do mundo inteiro. Ter um sistema ou um site que limite o acesso e pessoas de outros países é algo que vai contra a tradição e os ideais da internet. Por isso, foi criado uma tabela que suprisse essas necessidades, essa tabela se chama Unicode. A tabela Unicode suporta algo em torno de um milhão de caracteres. Ao invés de cada região ter sua tabela de caracteres, é muito mais sensato haver uma tabela padrão com o maior número de caracteres possível. Atualmente a maioria dos sistemas e browsers utilizados por usuários suportam plenamente Unicode. Por isso, fazendo seu sistema Unicode você garante que ele será bem visualizado aqui, na China ou em qualquer outro lugar do mundo. O que o Unicode faz é fornecer um único número para cada caractere, não importa a plataforma, nem o programa, nem a língua. Antes de começar, você precisa saber Há algumas recomendações que você precisa saber antes de começar a mudar seu site para Unicode. Existem três principais maneiras para você indicar a seu site qual tabela de caractere você está utilizando: Cabeçalho HTTP Content-type - Desta forma é necessário configurar o servidor web, algo que não é fácil nem para qualquer um. Dependendo de onde você trabalha, se for em um lugar grande, com vários sites neste mesmo servidor, pode ser a melhor maneira porque você terá que fazer isso uma vez. Caso for vários projetos com servidores diferentes isso pode ser uma dor de cabeça. Metatag Content-type - Colocando este código no HEAD de seu documento, ele avisará para o browser localmente e na hora da renderização do site qual Charset ele deve utilizar para exibir os caracteres. Esta é uma ótima escolha caso você não tenha acesso aos servidores. Certamente é a maneira mais simples de ser utilizada. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> Através do prolog xml - O prolog XML é utilizado em documentos XML ou XHTML para indicar a versão e a tabela de caracteres daquele documento. <? xml version="1.0" encoding="UTF-8" ?> Não é uma boa utilizar este prolog por conta do chaveamento do Internet Explorer 6 para Quirks Mode. Quando o prolog é utilizado, o Internet Explorer 6 renderiza os sites como o Internet Explorer 5, trazendo muitos problemas de compatibilidade. Não recomendo. Outro ponto importante é não esquecer de salvar seu documento no formato da tabela que você indicou. Não adianta nada indicar que código que está utilizando a tabela de caracteres UTF-8 e seu editor salvar seus documentos com a tabela ISO-8859-1. Isso fará com que os caracteres de seu documento apareçam corrompidos. Por isso, ao definir qual será a tabela utilizada no projeto (recomendo sempre UTF-8), defina como seu editor irá salvar seus documentos. Todos os editores de código hoje em dia tem essa opção, basta procurar. Não adianta também você salvar seus arquivos em UTF-8 e o resto da equipe continuar utilizando ISO-8859-1. Os arquivos irão corromper da mesma maneira. É uma decisão que a equipe inteira deve tomar para não haver retrabalho e dor de cabeça. Se um projeto já está no ar, é bom fazer uma análise para ter certeza se vale a pena ou não mudar a tabela de um projeto que já está no ar e funcionando. Recomendo que esse novo padrão sempre comece a ser utilizado em novos projetos. Mesmo assim, um bom programador pode fazer um script que converta a tabela de caracteres de um diretório inteiro. O importante é garantir que seu site aqui seja visto da maneira correta em outros lugares do mundo. Isso é importante para você e seu cliente. [offtopic] O Wordpress 2.5 foi lançado. [/offtopic] Se ainda estiver interessado, leia também: Wordpress - Uma pequena introdução PDF sobre Produtividade O que é Tableless? Browsers - Guerra Fria Browser Targeting Version Quando você escreve um documento HTML (ou qualquer outra linguagem baseada em SGML) é necessário que especifiquemos o Charset utilizado. O Charset é o conjunto de caracteres utilizados para escrever o documento. Um jogo de caracteres consiste em ter 1) repertório com caracteres como a letra “A” ou o caractere Chinês que significa “água” e 2) uma posição de referência para cada um dos caracteres no repertório. Cada caractere é identificado e localizado por este código de posição. Por exemplo, na tabela ASCII, as posições 65, 66 e 67 se referem às letras A, B e C respectivamente. Abaixo, veja a tabela de caracteres ASCII: 00 - (NUL) 01 - (SOH) 02 - (STX) 03 - (ETX) 04 - (EOT) 05 - (ENQ) 06 - (ACK) 07 - (BEL) 08 - (BS) 09 - (HT) 10 - (LF) 11 - (VT) 12 - (FF) 13 - (CR) 14 - (SO) 15 - (SI) 16 - (DLE) 17 - (D1) 18 - (D2) 19 - (D3) 20 - (D4) 21 - (NAK) 22 - (SYN) 23 - (ETB) 24 - (CAN) 25 - (EM) 26 - (SUB) 27 - (ESC) 28 - (FS) 29 - (GS) 30 - (RS) 31 - (US) 32 - (Espaço) 33 - ! 34 - “ 35 - # 36 - $ 37 - % 38 - & 39 - ‘ 40 - ( 41 - ) 42 - * 43 - + 44 - , 45 - - 46 - . 47 - / 48 - 0 49 - 1 50 - 2 51 - 3 52 - 4 53 - 5 54 - 6 55 - 7 56 - 8 57 - 9 58 - : 59 - ; 60 - < 61 - = 62 - &gt/ 63 - ? 64 - @ 65 - A 66 - B 67 - C 68 - D 69 - E 70 - F 71 - G 72 - H 73 - I 74 - J 75 - K 76 - L 77 - M 78 - N 79 - O 80 - P 81 - Q 82 - R 83 - S 84 - T 85 - U 86 - V 87 - W 88 - X 89 - Y 90 - Z 91 - [ 92 - \ 93 - ] 94 - ^ 95 - _ 96 - ` 97 - a 98 - b 99 - c 100 - d 101 - e 102 - f 103 - g 104 - h 105 - i 106 - j 107 - k 108 - l 109 - m 110 - n 111 - o 112 - p 113 - q 114 - r 115 - s 116 - t 117 - u 118 - v 119 - w 120 - x 121 - y 122 - z 123 - { 124 - | 125 - } 126 - ~ 127 - (DELETE) A tabela de caracteres ASCII (Código Padrão Americano para Intercâmbio de Informações) foi a primeira tabela utilizada em larga escala. O computador foi desenvolvido nos Estados Unidos. No vocabulário americano, não existem acentos, além disso, era um código de 7 bits, e não 8. Ou seja, ao invés de 256 posições, a tabela ASCII tinha apenas 128 posições - como você sabe, tudo nos computadores são um grupo de zeros (0) e uns (1) chamados de bits. Esses zeros e uns formam grupos de oito em oito que chamados de bytes e representam um número entre 0 e 255. Como as imagens, áudio, vídeos, programas e tudo o que temos nos sistemas de hoje, os caracteres que aparecem na sua tela são grupos de zeros e uns. O computador se popularizou e a necessidade de utilizar acentos e outros tipos de caracteres (Chineses, por exemplo) tornou-se um problema. Hoje, a maioria das tabelas utilizadas foram criadas suprindo as necessidades de um idioma específico, por este motivo elas se tornaram muito limitadas. Por exemplo, se você estiver escrevendo um documento utilizando a tabela de caracteres chinesa, você não poderá escrever algo em hebraico neste documento. Por conta disso muitos problemas podem surgir, por exemplo, seria impossível criar um curso online de hebraico para chineses. Será também um problema se você tiver que fazer um site ou sistema com suporte a diversos idiomas. Por exemplo, um sistema de blog projetado para uso internacional. Isso por que a posição dos caracteres varia de tabela para tabela. Dois codificadores podem usar o mesmo número para dois caracteres diferentes ou usar números diferentes para o mesmo caractere. A Web é acessada por pessoas do mundo inteiro. Ter um sistema ou um site que limite o acesso e pessoas de outros países é algo que vai contra a tradição e os ideais da internet. Por isso, foi criado uma tabela que suprisse essas necessidades, essa tabela se chama Unicode. A tabela Unicode suporta algo em torno de um milhão de caracteres. Ao invés de cada região ter sua tabela de caracteres, é muito mais sensato haver uma tabela padrão com o maior número de caracteres possível. Atualmente a maioria dos sistemas e browsers utilizados por usuários suportam plenamente Unicode. Por isso, fazendo seu sistema Unicode você garante que ele será bem visualizado aqui, na China ou em qualquer outro lugar do mundo. O que o Unicode faz é fornecer um único número para cada caractere, não importa a plataforma, nem o programa, nem a língua. Antes de começar, você precisa saber Há algumas recomendações que você precisa saber antes de começar a mudar seu site para Unicode. Existem três principais maneiras para você indicar a seu site qual tabela de caractere você está utilizando: Cabeçalho HTTP Content-type - Desta forma é necessário configurar o servidor web, algo que não é fácil nem para qualquer um. Dependendo de onde você trabalha, se for em um lugar grande, com vários sites neste mesmo servidor, pode ser a melhor maneira porque você terá que fazer isso uma vez. Caso for vários projetos com servidores diferentes isso pode ser uma dor de cabeça. Metatag Content-type - Colocando este código no HEAD de seu documento, ele avisará para o browser localmente e na hora da renderização do site qual Charset ele deve utilizar para exibir os caracteres. Esta é uma ótima escolha caso você não tenha acesso aos servidores. Certamente é a maneira mais simples de ser utilizada. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> Através do prolog xml - O prolog XML é utilizado em documentos XML ou XHTML para indicar a versão e a tabela de caracteres daquele documento. <? xml version="1.0" encoding="UTF-8" ?> Não é uma boa utilizar este prolog por conta do chaveamento do Internet Explorer 6 para Quirks Mode. Quando o prolog é utilizado, o Internet Explorer 6 renderiza os sites como o Internet Explorer 5, trazendo muitos problemas de compatibilidade. Não recomendo. Outro ponto importante é não esquecer de salvar seu documento no formato da tabela que você indicou. Não adianta nada indicar que código que está utilizando a tabela de caracteres UTF-8 e seu editor salvar seus documentos com a tabela ISO-8859-1. Isso fará com que os caracteres de seu documento apareçam corrompidos. Por isso, ao definir qual será a tabela utilizada no projeto (recomendo sempre UTF-8), defina como seu editor irá salvar seus documentos. Todos os editores de código hoje em dia tem essa opção, basta procurar. Não adianta também você salvar seus arquivos em UTF-8 e o resto da equipe continuar utilizando ISO-8859-1. Os arquivos irão corromper da mesma maneira. É uma decisão que a equipe inteira deve tomar para não haver retrabalho e dor de cabeça. Se um projeto já está no ar, é bom fazer uma análise para ter certeza se vale a pena ou não mudar a tabela de um projeto que já está no ar e funcionando. Recomendo que esse novo padrão sempre comece a ser utilizado em novos projetos. Mesmo assim, um bom programador pode fazer um script que converta a tabela de caracteres de um diretório inteiro. O importante é garantir que seu site aqui seja visto da maneira correta em outros lugares do mundo. Isso é importante para você e seu cliente. [offtopic] O Wordpress 2.5 foi lançado. [/offtopic] Se ainda estiver interessado, leia também: Wordpress - Uma pequena introdução PDF sobre Produtividade O que é Tableless? Browsers - Guerra Fria Browser Targeting Version tag:odeo.com,2008-03-31,22203401 Mon, 31 Mar 2008 01:00:18 -0700 no Tableless.com.br - Web Standards com Arroz e Feijão Artigos, Na Prática, Browsers, 2008, xhtml, desenvolvimento web, xml http://www.odeo.com/episodes/22014713-Lidando-bem-com-os-bloqueadores-de-pop-up Todo mundo que já experimentou ama bloqueadores de pop-ups. Navegando há anos com Opera e Konqueror e usando Firefox para acessar o Gmail, ainda me assusto quando preciso navegar no IE, seja num cybercafé ou na máquina de um amigo. Como é que as pessoas podem conviver com aquilo? Pop-ups são muito chatos, e se você não acha é porque ainda não experimentou viver sem eles tempo o suficiente. Por outro lado, o advento dos bloqueadores de pop-up trouxe alguns desafios bastante específicos para o desenvolvedor. Por exemplo, o desafio de fazer sites compatíveis com qualquer navegador quando é obrigado a usar ferramentas de terceiros. É o caso, por exemplo, de alguns sistemas de pagamento nacionais, ferramentas essenciais para o desenvolvimento de qualquer e-commerce brasileiro. O fato é que muitos desses sistemas exigem dos seus usuários a exibição de um pop-up, seja em uma tela de pagamento ou, o que é mais comum, no recibo. Para complicar, esses sistemas geralmente são submetidos a comp... Todo mundo que já experimentou ama bloqueadores de pop-ups. Navegando há anos com Opera e Konqueror e usando Firefox para acessar o Gmail, ainda me assusto quando preciso navegar no IE, seja num cybercafé ou na máquina de um amigo. Como é que as pessoas podem conviver com aquilo? Pop-ups são muito chatos, e se você não acha é porque ainda não experimentou viver sem eles tempo o suficiente. Por outro lado, o advento dos bloqueadores de pop-up trouxe alguns desafios bastante específicos para o desenvolvedor. Por exemplo, o desafio de fazer sites compatíveis com qualquer navegador quando é obrigado a usar ferramentas de terceiros. É o caso, por exemplo, de alguns sistemas de pagamento nacionais, ferramentas essenciais para o desenvolvimento de qualquer e-commerce brasileiro. O fato é que muitos desses sistemas exigem dos seus usuários a exibição de um pop-up, seja em uma tela de pagamento ou, o que é mais comum, no recibo. Para complicar, esses sistemas geralmente são submetidos a complexos e burocráticos processos de homologação, onde geralmente a pessoa que vai aprovar seu sistema usa Internet Explorer para Windows e não vai estar muito interessado em ouvir seus argumentos a respeito da inacessibilidade dos pop-ups. Vamos então criar uma solução para que o usuário de navegadores sem bloqueador de pop-ups possam ver normalmente seus pop-ups enquanto os que possuem bloqueador sejam servidos com um confortável link para o endereço do pop-up. Além disso, vamos fazer que aqueles que escolheram o gerenciamenteo inteligente de pop-ups possam ver um pop-up ao clicar no link, mantendo o layout do recibo como foi planejado pelo sistema de pagamento, e o que escolheu bloquear todos os pop-ups possa ver o conteúdo na mesma janela. Primeiro passo: Telefonar e escrever para pessoal do sistema de pagamentos, avisando que pop-ups são uma solução ruim. Demonstre sua indignação pelo fato de o sistema deles precisar de uma ferramenta tão estúpida. De quebra, aproveite para perguntar como fazer o site deles, o módulo administrativo, ou o que mais eles tenham feito para que você e seu cliente acessem funcionar em seu navegador. Pergunte porque o manual fala sobre Internet Explorer e Netscape 4, mas não fala do Safari ou do Firefox. Apresente dessa maneira o Opera e o Mozilla. Se muitos de nós fizermos isso, eles vão ter que começar a considerar esses navegadores ao criar seus sistemas. Segundo passo: Entender os fatos básicos. Agora que você já ajudou a tornar a web um lugar melhor, vamos resolver o problema imediato do nosso cliente. Primeiro vamos ver como criar um link de pop-up que seja acessível a quem não quer ou não pode exibir pop-ups. Links para pop-ups geralmente são criados assim: <a href="javascript:void(open('http://www.atipico.com.br','nova','width=800,height=600'))">Atípico</a> O problema é que quem não tem javascript em seu navegador ou bloqueou todos os pop-ups não pode acessar o link. Muita gente por aí tem usado assim: <a href="http://www.atipico.com.br" onclick="window.open(this.href,'nova','width=800,height=600');return false;">Atípico</a> Assim, o link passa a ser um link HTML comum. Para quem tem javascript disponível, o evento onclick vai abrir o popup e o return false ao final vai cancelar o click, fazendo com que a página seja aberta apenas no pop-up, e não na janela atual. Apesar da beleza e da simplicidade, este código tem dois problemas. O primeiro é que o Internet Explorer 5.0, em algumas situações, não lida muito bem com comandos separados por ponto-e-vírgula em atributos HTML. O segundo, mais sério, é que navegadores como Konqueror e Firefox não interrompem um script ao bloquear um pop-up. Então, se o Konqueror estiver configurado para bloquear todos os pop-ups, o pop-up não vai aparecer, e o return false vai ser executado, fazendo com que o link também não seja carregado na janela atual. De fato, o código acima era muito usado antes do advento dos bloqueadores de pop-up, para manter o site acessível en navegadores sem javascript. Ele funciona muito bem se não houver javascript disponível, mas falha em alguns navegadores se houver javascript e o bloqueador de pop-ups estiver habilitado. Para entender mais de perto a problemática vamos verificar como os navegadores se comportam ao bloquear um popup. Para isso vamos usar o seguinte código: <script> alert("passo 1") window.open("http://www.atipico.com.br","nova","width=800,height=600") alert("passo 2") </script> <script> alert("passo 3") </script> Fazendo o teste com este script você pode notar como os navegadores se comportam de maneira diferente ao bloquear um pop-up. Testei no Opera 7.52, no Firefox 0.8 e no Konqueror 3.2.2, todos em Linux. O Mozilla e o Konqueror exibem os três alerts. Ou seja, o pop-up é bloqueado mas o script segue sua execução normal. No Opera são exibidos os alerts 1 e 3. O Opera, portanto, interrompe a execução de um script ao bloquear um pop-up, mas executa normalmente outros scripts na mesma página. O Internet Explorer com a Google Toolbar se comportou de maneira idêntica ao Mozilla e ao Konqueror. Terceiro passo: Vamos manter nosso pop-up automático, e inserir um link para abrir pop-up que poderá ser usado por quem usa bloqueadores (ou mesmo por alguém que tenha fechado o pop-up por engano): <script> pagina="http://www.atipico.com.br" function abrir(){ newWindow=window.open(pagina,"nova","width=800,height=600") if(newWindow)return false } abrir() </script> <a href='http://www.atipico.com.br' onclick='return abrir()'>Abrir</a> Aqui criamos uma função, abrir, que abre o popup. Em seguida a executamos. Se não houver bloqueadores o pop-up será exibido automaticamente neste passo. Exibimos então um link “Abrir” que executa novamente a função quando clicado. Aqui está toda a mágica, o onclick do link contém return abrir(), ou seja, o evento será tratado de acordo com o retorno da função. O click somente será cancelado se a função retornar false. Agora note que a função tem duas linhas. Na primeira abrimos a nova janela (pop-up) e armazenamos o resultado na variável newWindow. Na segunda linha testamos o valor de newWindow, se existir retornamos false. Assim, acompanhe nosso programa em três situações diferentes: primeiro, se não houver bloqueadores de pop-ups ou se o bloqueador estiver configurado em smart policy, ou seja, permitir os pop-ups requisitados por você. Neste caso, a primeira linha da função abre a janela e armazena o objeto na variável newWindow. A segunda linha testa o valor de newWindow, que existe, e retorna false, cancelando o click. Neste caso o usuário verá o pop-up e nada acontece com a janela original, perfeito. O segundo caso é o de bloqueadores de pop-ups que não permitem pop-up algum, mas não interrompem a execução do script. Neste caso, o pop-up não será aberto. Ao chegar à segunda linha da função, new Window é testada, e não existe. A função não retornará valor (na verdade retornará undefined, mas isso é outro assunto). O click não será cancelado e o usuário verá a página solicitada na janela original. A terceira situação é o caso dos bloqueadores de pop-up que interrompem a execução do script. Nestes o script sequer chegará à segunda linha da função, o javascript será interrompido e o evento não será cancelado, uma vez que o script sequer chegou a retornar algum valor. O resultado será idêntico ao segundo caso. Há ainda uma quarta situação, a dos navegadores que não possuem javascript habilitado. Neste caso o link vai se comportar como um link normal, sem nenhum problema para o usuário (embora eu duvide que alguém sem javascript consiga usar qualquer sistema de pagamento eletrônico disponível no Brasil.) Quarto passo: Pra quê um quarto passo? O código anterior já funciona muito bem, resolvendo nosso problema. Bom talvez você seja curioso o suficiente para querer complicar um pouco as coisas. A questão agora é: como exibir conteúdo de acordo com o status do pop-up. Isto é, por exemplo, se não houver bloqueador de pop-up não exibir o link “Abrir”, uma vez que o usuário verá o pop-up automaticamente. Pois bem, vamos lá: <script> pagina="http://www.atipico.com.br" abriu=false function abrir(){ newWindow=window.open(pagina,"nova","width=800,height=600") if(newWindow){ abriu=true return false } } abrir() </script> <script> if(!abriu)document.write("<a href='http://www.atipico.com.br' onclick='return abrir()'>Abrir</a>") </script> Agora usamos uma variável, abriu, para guardar o status do pop-up. Começamos o script atribuindo false a esta variável. Depois, dentro do if que testa o pop-up, setamos seu valor para true. Se o pop-up for aberto o valor de abriu será true, caso contrário será mantido o false original. No segundo bloco script testamos o valor de abriu. Se o pop-up não foi aberto, escrevemos no documento o link para abrí-lo. Colocamos esta linha em um segundo bloco script para que seja executada mesmo que o bloqueador interrompa o primeiro script ao cancelar o pop-up. O script já faz o que propusemos, exibe o link apenas se o pop-up não for aberto automaticamente. Mas agora ele falha em navegadores sem suporte a javascript. Iso é fácil de resolver, basta colocar, depois dos scripts: <noscript> <a href="http://www.atipico.com.br">Abrir</a> </noscript> Palavras finais: Como você viu, lidar com bloqueadores de pop-up é tarefa trivial, e você pode oferecer conteúdo ao seu usuário no formato que ele escolheu ver, pop-ups para quem não se importa com eles, ou mesmo para quem os deseja, e links comuns para quem escolheu não ver pop-ups. Claro, continuamos achando que pop-ups não são uma boa ferramenta, mas como você não pode trabalhar sempre sozinho, isto pode lhe ser útil ao lidar com código de terceiros, como os citados sistemas de e-commerce. O código nesse artigo foi escrito apenas para estudo. É claro, quando for para valer, você deve escrever código melhor que o meu. Seus links precisam ter um atributo title que descreva bem seu destino, e “Abrir” não é um bom texto para se colocar em um link. Você sabe também que, neste último exemplo, depois de if(!abriu) você pode fazer o que quiser, e também deve saber que não é bom escrever scripts assim, no meio do seu HTML, e que document.write não é uma boa maneira de se exibir conteúdo. Esperamos que estas idéias lhe sejam úteis. Se você desenvolver algo útil com isso conte pra gente. Se ainda estiver interessado, leia também: Quem precisa de versão mobile? Sites para Dispositivos Móveis - MediaType Sobre Internet Explorer para Mobile - Breve impressão Mobilidade na cabeça Sites para Dispositivos Móveis - Breve introdução Todo mundo que já experimentou ama bloqueadores de pop-ups. Navegando há anos com Opera e Konqueror e usando Firefox para acessar o Gmail, ainda me assusto quando preciso navegar no IE, seja num cybercafé ou na máquina de um amigo. Como é que as pessoas podem conviver com aquilo? Pop-ups são muito chatos, e se você não acha é porque ainda não experimentou viver sem eles tempo o suficiente. Por outro lado, o advento dos bloqueadores de pop-up trouxe alguns desafios bastante específicos para o desenvolvedor. Por exemplo, o desafio de fazer sites compatíveis com qualquer navegador quando é obrigado a usar ferramentas de terceiros. É o caso, por exemplo, de alguns sistemas de pagamento nacionais, ferramentas essenciais para o desenvolvimento de qualquer e-commerce brasileiro. O fato é que muitos desses sistemas exigem dos seus usuários a exibição de um pop-up, seja em uma tela de pagamento ou, o que é mais comum, no recibo. Para complicar, esses sistemas geralmente são submetidos a complexos e burocráticos processos de homologação, onde geralmente a pessoa que vai aprovar seu sistema usa Internet Explorer para Windows e não vai estar muito interessado em ouvir seus argumentos a respeito da inacessibilidade dos pop-ups. Vamos então criar uma solução para que o usuário de navegadores sem bloqueador de pop-ups possam ver normalmente seus pop-ups enquanto os que possuem bloqueador sejam servidos com um confortável link para o endereço do pop-up. Além disso, vamos fazer que aqueles que escolheram o gerenciamenteo inteligente de pop-ups possam ver um pop-up ao clicar no link, mantendo o layout do recibo como foi planejado pelo sistema de pagamento, e o que escolheu bloquear todos os pop-ups possa ver o conteúdo na mesma janela. Primeiro passo: Telefonar e escrever para pessoal do sistema de pagamentos, avisando que pop-ups são uma solução ruim. Demonstre sua indignação pelo fato de o sistema deles precisar de uma ferramenta tão estúpida. De quebra, aproveite para perguntar como fazer o site deles, o módulo administrativo, ou o que mais eles tenham feito para que você e seu cliente acessem funcionar em seu navegador. Pergunte porque o manual fala sobre Internet Explorer e Netscape 4, mas não fala do Safari ou do Firefox. Apresente dessa maneira o Opera e o Mozilla. Se muitos de nós fizermos isso, eles vão ter que começar a considerar esses navegadores ao criar seus sistemas. Segundo passo: Entender os fatos básicos. Agora que você já ajudou a tornar a web um lugar melhor, vamos resolver o problema imediato do nosso cliente. Primeiro vamos ver como criar um link de pop-up que seja acessível a quem não quer ou não pode exibir pop-ups. Links para pop-ups geralmente são criados assim: <a href="javascript:void(open('http://www.atipico.com.br','nova','width=800,height=600'))">Atípico</a> O problema é que quem não tem javascript em seu navegador ou bloqueou todos os pop-ups não pode acessar o link. Muita gente por aí tem usado assim: <a href="http://www.atipico.com.br" onclick="window.open(this.href,'nova','width=800,height=600');return false;">Atípico</a> Assim, o link passa a ser um link HTML comum. Para quem tem javascript disponível, o evento onclick vai abrir o popup e o return false ao final vai cancelar o click, fazendo com que a página seja aberta apenas no pop-up, e não na janela atual. Apesar da beleza e da simplicidade, este código tem dois problemas. O primeiro é que o Internet Explorer 5.0, em algumas situações, não lida muito bem com comandos separados por ponto-e-vírgula em atributos HTML. O segundo, mais sério, é que navegadores como Konqueror e Firefox não interrompem um script ao bloquear um pop-up. Então, se o Konqueror estiver configurado para bloquear todos os pop-ups, o pop-up não vai aparecer, e o return false vai ser executado, fazendo com que o link também não seja carregado na janela atual. De fato, o código acima era muito usado antes do advento dos bloqueadores de pop-up, para manter o site acessível en navegadores sem javascript. Ele funciona muito bem se não houver javascript disponível, mas falha em alguns navegadores se houver javascript e o bloqueador de pop-ups estiver habilitado. Para entender mais de perto a problemática vamos verificar como os navegadores se comportam ao bloquear um popup. Para isso vamos usar o seguinte código: <script> alert("passo 1") window.open("http://www.atipico.com.br","nova","width=800,height=600") alert("passo 2") </script> <script> alert("passo 3") </script> Fazendo o teste com este script você pode notar como os navegadores se comportam de maneira diferente ao bloquear um pop-up. Testei no Opera 7.52, no Firefox 0.8 e no Konqueror 3.2.2, todos em Linux. O Mozilla e o Konqueror exibem os três alerts. Ou seja, o pop-up é bloqueado mas o script segue sua execução normal. No Opera são exibidos os alerts 1 e 3. O Opera, portanto, interrompe a execução de um script ao bloquear um pop-up, mas executa normalmente outros scripts na mesma página. O Internet Explorer com a Google Toolbar se comportou de maneira idêntica ao Mozilla e ao Konqueror. Terceiro passo: Vamos manter nosso pop-up automático, e inserir um link para abrir pop-up que poderá ser usado por quem usa bloqueadores (ou mesmo por alguém que tenha fechado o pop-up por engano): <script> pagina="http://www.atipico.com.br" function abrir(){ newWindow=window.open(pagina,"nova","width=800,height=600") if(newWindow)return false } abrir() </script> <a href='http://www.atipico.com.br' onclick='return abrir()'>Abrir</a> Aqui criamos uma função, abrir, que abre o popup. Em seguida a executamos. Se não houver bloqueadores o pop-up será exibido automaticamente neste passo. Exibimos então um link “Abrir” que executa novamente a função quando clicado. Aqui está toda a mágica, o onclick do link contém return abrir(), ou seja, o evento será tratado de acordo com o retorno da função. O click somente será cancelado se a função retornar false. Agora note que a função tem duas linhas. Na primeira abrimos a nova janela (pop-up) e armazenamos o resultado na variável newWindow. Na segunda linha testamos o valor de newWindow, se existir retornamos false. Assim, acompanhe nosso programa em três situações diferentes: primeiro, se não houver bloqueadores de pop-ups ou se o bloqueador estiver configurado em smart policy, ou seja, permitir os pop-ups requisitados por você. Neste caso, a primeira linha da função abre a janela e armazena o objeto na variável newWindow. A segunda linha testa o valor de newWindow, que existe, e retorna false, cancelando o click. Neste caso o usuário verá o pop-up e nada acontece com a janela original, perfeito. O segundo caso é o de bloqueadores de pop-ups que não permitem pop-up algum, mas não interrompem a execução do script. Neste caso, o pop-up não será aberto. Ao chegar à segunda linha da função, new Window é testada, e não existe. A função não retornará valor (na verdade retornará undefined, mas isso é outro assunto). O click não será cancelado e o usuário verá a página solicitada na janela original. A terceira situação é o caso dos bloqueadores de pop-up que interrompem a execução do script. Nestes o script sequer chegará à segunda linha da função, o javascript será interrompido e o evento não será cancelado, uma vez que o script sequer chegou a retornar algum valor. O resultado será idêntico ao segundo caso. Há ainda uma quarta situação, a dos navegadores que não possuem javascript habilitado. Neste caso o link vai se comportar como um link normal, sem nenhum problema para o usuário (embora eu duvide que alguém sem javascript consiga usar qualquer sistema de pagamento eletrônico disponível no Brasil.) Quarto passo: Pra quê um quarto passo? O código anterior já funciona muito bem, resolvendo nosso problema. Bom talvez você seja curioso o suficiente para querer complicar um pouco as coisas. A questão agora é: como exibir conteúdo de acordo com o status do pop-up. Isto é, por exemplo, se não houver bloqueador de pop-up não exibir o link “Abrir”, uma vez que o usuário verá o pop-up automaticamente. Pois bem, vamos lá: <script> pagina="http://www.atipico.com.br" abriu=false function abrir(){ newWindow=window.open(pagina,"nova","width=800,height=600") if(newWindow){ abriu=true return false } } abrir() </script> <script> if(!abriu)document.write("<a href='http://www.atipico.com.br' onclick='return abrir()'>Abrir</a>") </script> Agora usamos uma variável, abriu, para guardar o status do pop-up. Começamos o script atribuindo false a esta variável. Depois, dentro do if que testa o pop-up, setamos seu valor para true. Se o pop-up for aberto o valor de abriu será true, caso contrário será mantido o false original. No segundo bloco script testamos o valor de abriu. Se o pop-up não foi aberto, escrevemos no documento o link para abrí-lo. Colocamos esta linha em um segundo bloco script para que seja executada mesmo que o bloqueador interrompa o primeiro script ao cancelar o pop-up. O script já faz o que propusemos, exibe o link apenas se o pop-up não for aberto automaticamente. Mas agora ele falha em navegadores sem suporte a javascript. Iso é fácil de resolver, basta colocar, depois dos scripts: <noscript> <a href="http://www.atipico.com.br">Abrir</a> </noscript> Palavras finais: Como você viu, lidar com bloqueadores de pop-up é tarefa trivial, e você pode oferecer conteúdo ao seu usuário no formato que ele escolheu ver, pop-ups para quem não se importa com eles, ou mesmo para quem os deseja, e links comuns para quem escolheu não ver pop-ups. Claro, continuamos achando que pop-ups não são uma boa ferramenta, mas como você não pode trabalhar sempre sozinho, isto pode lhe ser útil ao lidar com código de terceiros, como os citados sistemas de e-commerce. O código nesse artigo foi escrito apenas para estudo. É claro, quando for para valer, você deve escrever código melhor que o meu. Seus links precisam ter um atributo title que descreva bem seu destino, e “Abrir” não é um bom texto para se colocar em um link. Você sabe também que, neste último exemplo, depois de if(!abriu) você pode fazer o que quiser, e também deve saber que não é bom escrever scripts assim, no meio do seu HTML, e que document.write não é uma boa maneira de se exibir conteúdo. Esperamos que estas idéias lhe sejam úteis. Se você desenvolver algo útil com isso conte pra gente. Se ainda estiver interessado, leia também: Quem precisa de versão mobile? Sites para Dispositivos Móveis - MediaType Sobre Internet Explorer para Mobile - Breve impressão Mobilidade na cabeça Sites para Dispositivos Móveis - Breve introdução tag:odeo.com,2007-12-06,22014713 Thu, 06 Dec 2007 12:14:40 -0800 no Tableless.com.br - Web Standards com Arroz e Feijão popup, tecnicas, Artigos, Na Prática, opera, gmail firefox, konqueror, Browsers http://www.odeo.com/episodes/2382293-Podcast-Tableless-25-Valida%C3%A7%C3%A3o-%C3%A9-importante tag:odeo.com,2006-11-09,2382293 Thu, 09 Nov 2006 03:58:38 -0800 no Tableless.com.br - Web Standards com Arroz e Feijão http://www.odeo.com/episodes/2143306-Podcast-Tableless-24-Testemunho-WCA tag:odeo.com,2006-10-12,2143306 Thu, 12 Oct 2006 18:50:37 -0700 no Tableless.com.br - Web Standards com Arroz e Feijão http://www.odeo.com/episodes/2000625-Podcast-Tableless-23-mobi tag:odeo.com,2006-09-28,2000625 Thu, 28 Sep 2006 01:32:51 -0700 no Tableless.com.br - Web Standards com Arroz e Feijão http://www.odeo.com/episodes/1816998-Podcast-Tableless-22-Primeira-impress%C3%A3o-sobre-Padr%C3%B5es-Web tag:odeo.com,2006-09-01,1816998 Fri, 01 Sep 2006 05:00:35 -0700 no Tableless.com.br - Web Standards com Arroz e Feijão http://www.odeo.com/episodes/1740954-Podcast-Tableless-21-Desenvolvimento-em-camadas tag:odeo.com,2006-08-17,1740954 Thu, 17 Aug 2006 03:41:13 -0700 no Tableless.com.br - Web Standards com Arroz e Feijão http://www.odeo.com/episodes/1021831-Podcast-20-Preocupa%C3%A7%C3%B5es-sobre-o-desenvolvimento-para-internet-m%C3%B3vel tag:odeo.com,2006-03-30,1021831 Thu, 30 Mar 2006 15:54:36 -0800 no Tableless.com.br - Web Standards com Arroz e Feijão http://www.odeo.com/episodes/886769-Podcast-19-WYSIWYG-WiMax-e-a-onda-m%C3%B3vel tag:odeo.com,2006-03-14,886769 Tue, 14 Mar 2006 11:05:31 -0800 no Tableless.com.br - Web Standards com Arroz e Feijão http://www.odeo.com/episodes/870544-BlogBits-Podcast-3-Converg%C3%AAncia-Digital tag:odeo.com,2006-03-10,870544 Fri, 10 Mar 2006 09:01:33 -0800 no Tableless.com.br - Web Standards com Arroz e Feijão http://www.odeo.com/episodes/726980-Podcast-18-Opera-9-Wasabi-Songbird-e-Sem%C3%A2ntica tag:odeo.com,2006-02-13,726980 Mon, 13 Feb 2006 06:00:20 -0800 no Tableless.com.br - Web Standards com Arroz e Feijão http://www.odeo.com/episodes/692957-Podcast-17-IE7-Beta-2-e-Mercado-de-trabalho tag:odeo.com,2006-02-07,692957 Tue, 07 Feb 2006 01:30:34 -0800 no Tableless.com.br - Web Standards com Arroz e Feijão http://www.odeo.com/episodes/626950-Podcast-16 tag:odeo.com,2006-01-19,626950 Thu, 19 Jan 2006 03:28:32 -0800 no Tableless.com.br - Web Standards com Arroz e Feijão http://www.odeo.com/episodes/437999-Podcast-Tableless-13 tag:odeo.com,2005-11-22,437999 Tue, 22 Nov 2005 00:00:00 -0800 no Tableless.com.br - Web Standards com Arroz e Feijão http://www.odeo.com/episodes/506910-Podcast-Tableless-13 tag:odeo.com,2005-11-21,506910 Mon, 21 Nov 2005 19:00:00 -0800 no Tableless.com.br - Web Standards com Arroz e Feijão http://www.odeo.com/episodes/350750-Podcast-Tableless-12 tag:odeo.com,2005-10-19,350750 Wed, 19 Oct 2005 00:00:00 -0700 no Tableless.com.br - Web Standards com Arroz e Feijão http://www.odeo.com/episodes/283851-Podcast-Tableless-11 tag:odeo.com,2005-10-05,283851 Wed, 05 Oct 2005 00:00:00 -0700 no Tableless.com.br - Web Standards com Arroz e Feijão http://www.odeo.com/episodes/198674-Podcast-Tableless-10 tag:odeo.com,2005-08-29,198674 Mon, 29 Aug 2005 00:00:00 -0700 no Tableless.com.br - Web Standards com Arroz e Feijão http://www.odeo.com/episodes/162843-Podcast-Tableless-9 tag:odeo.com,2005-08-18,162843 Thu, 18 Aug 2005 00:00:00 -0700 no Tableless.com.br - Web Standards com Arroz e Feijão http://www.odeo.com/episodes/129505-Podcast-Especial-2 tag:odeo.com,2005-08-05,129505 Fri, 05 Aug 2005 00:00:00 -0700 no Tableless.com.br - Web Standards com Arroz e Feijão http://www.odeo.com/episodes/83654-Podcast-Especial-Digitalminds tag:odeo.com,2005-07-20,83654 Wed, 20 Jul 2005 00:00:00 -0700 no Tableless.com.br - Web Standards com Arroz e Feijão http://www.odeo.com/episodes/99946-Podcast-Especial-Tableless tag:odeo.com,2005-07-08,99946 Fri, 08 Jul 2005 00:00:00 -0700 no Tableless.com.br - Web Standards com Arroz e Feijão http://www.odeo.com/episodes/85405-IE-comendo-mosca tag:odeo.com,2005-04-01,85405 Fri, 01 Apr 2005 00:00:00 -0800 no Tableless.com.br - Web Standards com Arroz e Feijão http://www.odeo.com/episodes/85404-Nokia-Convertido tag:odeo.com,2005-01-11,85404 Tue, 11 Jan 2005 00:00:00 -0800 no Tableless.com.br - Web Standards com Arroz e Feijão http://www.odeo.com/episodes/85403-Podcast-8-Entrevista-com-Jonas-Galvez-Parte-2 tag:odeo.com,2004-12-18,85403 Sat, 18 Dec 2004 00:00:00 -0800 no Tableless.com.br - Web Standards com Arroz e Feijão http://www.odeo.com/episodes/85402-Podcast-7-Entrevista-com-Jonas-Galvez-Parte-1 tag:odeo.com,2004-12-17,85402 Fri, 17 Dec 2004 00:00:00 -0800 no Tableless.com.br - Web Standards com Arroz e Feijão http://www.odeo.com/episodes/85401-Podcast-6-Entrevista-com-Fred-Van-Amstel-Parte-2 tag:odeo.com,2004-12-16,85401 Thu, 16 Dec 2004 00:00:00 -0800 no Tableless.com.br - Web Standards com Arroz e Feijão http://www.odeo.com/episodes/85400-Podcast-5-Entrevista-com-Fred-Van-Amstel-Parte-1 tag:odeo.com,2004-12-12,85400 Sun, 12 Dec 2004 00:00:00 -0800 no Tableless.com.br - Web Standards com Arroz e Feijão http://www.odeo.com/episodes/85399-Podcast-4-Entrevista-com-Danilo-Medeiros-parte-2 tag:odeo.com,2004-11-30,85399 Tue, 30 Nov 2004 00:00:00 -0800 no Tableless.com.br - Web Standards com Arroz e Feijão http://www.odeo.com/episodes/85398-Podcast-3-Entrevista-com-Danilo-Medeiros-parte-1 tag:odeo.com,2004-11-29,85398 Mon, 29 Nov 2004 00:00:00 -0800 no Tableless.com.br - Web Standards com Arroz e Feijão http://www.odeo.com/episodes/85397-Podcast-Tableless-2-Entrevista-com-Bruno-Torres-parte-2 tag:odeo.com,2004-11-25,85397 Thu, 25 Nov 2004 00:00:00 -0800 no Tableless.com.br - Web Standards com Arroz e Feijão http://www.odeo.com/episodes/85396-Podcast-Tableless-1-Entrevista-com-Bruno-Torres-parte-1 tag:odeo.com,2004-11-24,85396 Wed, 24 Nov 2004 00:00:00 -0800 no Tableless.com.br - Web Standards com Arroz e Feijão http://www.odeo.com/episodes/85395-Podcast-n%C3%BAmero-0 tag:odeo.com,2004-11-11,85395 Thu, 11 Nov 2004 00:00:00 -0800 no Tableless.com.br - Web Standards com Arroz e Feijão