O nome, como disse o Diego, não é definitivo e, na verdade, não faz justiça com a aplicação, que não tem espaço apenas para vídeos, mas também para áudio e imagens.

Funciona mais ou menos como um YouTube da vida. O conteúdo é totalmente gerado pelo usuário.

O que você pode colocar lá? Bem, praticamente tudo relacionado a desenvolvimento web. Por exemplo:

• Um vídeo tutorial ensinando aquele truque que você acabou de descobrir enquanto trabalhava em um projeto
• Um arquivo de áudio, como um podcast, falando de uma determinada ferramenta ou linguagem
• Um Cheat Sheet ou screenshot sobre CSS, JavaScript, Python, etc.

As possibilidades são muitas. Use sua criatividade e compartilhe seu conhecimento com a comunidade.

Para fazer o site, eles usaram uma plataforma chamada KickApps, que eu nunca tinha ouvido falar, mas que parece bastante interessante. É um conjunto de ferramentas que facilita a criação de sites com conteúdo gerado pelo usuário e características de rede social.

Por enquanto não há conteúdo por lá, então a idéia é que nós desenvolvedores comecemos a encher o site de conteúdo de qualidade. Vamos lá, minha gente, criem suas contas. Depois do CodeShow com certeza haverá diversos vídeos interessantes por lá, portanto fiquem de olho.

Você poderá escolher dois entre quatro dos cursos da Visie, que são:

• Tableless I
• Tableless II
• JavaScript DOM crossbrowser
• Ajax I

Mas, prestem atenção, crianças. Não adianta fazer um comentário no post ou enviar um email direto pra Visie. Tem que ser um trackback (ou um pingback, acho que não vão implicar com isso, né Diego?).

Se você não tem um blog, por que não começar um agora? Use o wordpress.com, que é gratuito, usa o melhor sistema de blogs da atualidade e tem suporte tanto a trackbacks quanto a pingbacks.

Se você já tem, faça logo seu post, diga o que faria pra ganhar os cursos e cruze os dedos. Boa sorte!

A URL para enviar o trackback é:
http://visie.com.br/blog/proposta-indecente-parte-1/trackback/

Aproveitamos a polêmica para fazer um podcast, e além de discutir o tema central, falamos um pouquinho dos novos planos do W3C para o HTML, anunciados há alguns dias pelo Berners-Lee em seu blog.

Além disso, dei uns pitacos sobre acessibilidade e como sua validação por meios automatizados é de certa forma comparável à validação de HTML.

Em um dado momento, tentei me lembrar que pontos de checagem do WCAG 1.0 podem ser checados completamente por validadores automatizados. Falei uma besteira. Disse que eram dois pontos e são, na verdade, três:

• Criar documentos que sejam válidos de acordo com gramáticas formais publicadas (3.2, prioridade 2)
• Evitar funcionalidades consideradas obsoletas pelo W3C (11.2, prioridade 2)
• Identificar o idioma predominante no documento (4.3, prioridade 3)

O resto pode ser checado parcialmente ou simplesmente não pode ser checado de maneira automática. Tirei isso desse post: “How useful are accessibility evaluation tools?“.

Para escutar o podcast, assine o feed do Tableless em seu podcatcher (agregador de podcasts) preferido ou baixe diretamente o arquivo mp3 (27 MB, 48 min.).

Ah, e não se esqueçam, semana 2.0 que vem tem mais podcast. Só não se prendam demais a esse conceito de semana 1.0 com sete dias. Atualize-se.

A idéia é manter uma regularidade. Fazer um podcast por semana, abordando assuntos simples, mais teóricos que práticos, sobre desenvolvimento focado nos padrões web. Para isso, esperamos contar com a colaboração dos ouvintes/leitores que estão convidados a fazer seus comentários e enviar e-mails sugerindo temas, fazendo perguntas, falando bem ou mal do programa, enfim. Falem o que quiserem e nós vamos dar um jeitinho de abordar aquilo que for pertinente no podcast.

Neste programa de reestréia, conversamos um pouco sobre desenvolvimento em camadas. Assunto já batido, concordo (eu já escrevi um post sobre desenvolvimento em camadas que pode ser útil pra você), mas sobre o qual muitas pessoas ainda têm dúvidas.

Escolhemos esse assunto porque, como já disse, estamos sem prática com podcasts e esse seria um bom tema pra esquentar a garganta e voltar à velha (disse velha, não boa) forma.

Para escutar o podcast você tem duas opções:

• Assinar o Feed do Podcast Tableless no seu agregador de podcasts preferido e receber as atualizações no conforto do seu lar sem nenhum custo adicional ou
• Baixar diretamente o arquivo MP3 (10MB, 28m15s) e botar pra tocar (também sem custo adicional, claro).

Se quiser dar uma olhada (ou uma ouvida) nas edições anteriores do podcast tableless, veja os posts da categoria podcasts no Tableless..

Ah, e um aviso. Eu falo “palavrões” quando estou afim e vivo muito bem com isso. Não me sinto mais ou menos profissional por isso e acho que as palavras consideradas “palavrões” estão tão bem integradas na nossa língua e no nosso dia-a-dia como qualquer outra “palavrinha”… se você se sente ofendido com palavrões, desculpe, mas qualquer podcast que me tenha como participante não é pra você. Desculpe mesmo.

Obs: Não estou querendo dizer que todo podcast vai ser um show de “palavrões”. Simplesmente que eles podem sair a qualquer momento, when I fell like it. Neste podcast de hoje, por exemplo, se não me engano, não falei nenhum palavrão…

Divirtam-se.

Infelizmente (pra você que vai baixar, não pra mim), este podcast ficou um pouco grande demais, e os assuntos foram os seguintes:

HP vai oferecer o Netscape 8 como opção ao Internet Explorer em seus desktops e notebooks. Uma opção, mesmo que ruim, é melhor que nenhuma.

A notícia acima também foi publicada na Info Online, o que gerou uma discussão sobre a utilidade tanto da revista quanto do seu site de notícias. É óbvio que a Info tem seu público (um grande público, diga-se de passagem), mas para quem já descobriu o que são feeds e consegue ler textos em inglês ela é completamente inútil. Traz informação desatualizada e sempre pela metade. Mas o mais interessante foi discutir sobre o site Info Online. O pessoal de lá ainda não descobriu uma das coisas mais fascinantes que a web nos oferece: os hiperlinks. Isso mesmo, aquilo que você consegue usando um elemento A no seu código HTML. Aquilo que proporciona uma das experiências mais interessantes online, que é a possibilidade de associar uma palavra, frase ou imagem com um documento na web. Mas, obviamente, esse conceito é novo demais e não podemos esperar que todos os sites o implementem. Vamos dar um tempo, quem sabe eles nos presenteiam um dia com links, muitos links nas matérias publicadas no site. Um passo já foi dado, eles já usam hiperlinks nos anúncios . Um avanço, mesmo que pouco útil, é melhor que nenhum…

Outro assunto discutido foi o wordpress.com (sim, ponto com e não ponto org), que é uma aplicação de wordpress (agora sim ponto org) multiusuário, muito provavelmente na tentativa de concorrer com o blogger. O sistema é muito interessante. O painel de administração tem algumas melhoras em relação ao do wordpress comum, como a adição de algumas pitadas de ajax (leia o tutorial do Élcio). Ainda não está disponível para o público em geral, mas convites estão sendo distribuídos (eu já recebi dois), basta colocar seu email na página do serviço e esperar pela chegada do seu. A princípio me parece que o serviço será mantido como gratuito, mas não posso afirmar nada.

O Diego e o Rigonatti ficaram excitadinhos com um certo gerenciador de imagens da microsoft, que realmente parece ter uma interface legal mas, como eu não testei, não posso falar nada sobre. Isso nos levou a discutir um pouco sobre as três grandes empresas de tecnologia do momento: Microsoft, que promete maravilhas, cria expectativa no usuário e no fim não entrega o que prometeu mas vende assim mesmo porque todo mundo já se excitou com as promessas e a maioria nem sabe que elas não foram cumpridas; Apple, que também cria um hype sobre seus hardwares e softwares, só que entrega o que promete e às vezes ainda supera as expectativas, cria produtos que fascinam não só pelo eye-candy mas também pela funcionalidade e cuidado com a experiência completa do usuário; e Google, que, como disse o Danilo, investe cada centavo do seu rico dinheirinho em tecnologia, não investe em marketing, cria interfaces completamente espartanas, mas no fim das contas os produtos funcionam tão bem que não dá pra não usar.

Meebo, um Instant Messenger dentro do seu browser. Feito em javascript (yeah, ajax, babe), muito bem implementado. A experiência é bem próxima do que se tem em um desktop. Conecta-se ao ICQ (e AIM), Jabber (e gTalk), MSN e Yahoo, todos ao mesmo tempo. Vale a pena dar uma olhada.

O Rigonatti falou bastante sobre mobilidade. Ele está usando um Nokia 6681 com o sistema operacional Symbian e, pelo que disse, o negócio é mesmo muito bom. Ele tirou uns screenshots do meu blog no browser nativo (WAP) do sistema e no Opera Mobile. A boa notícia é que o blog funciona quase que perfeitamente nos dois browsers. Num próximo post, coloco os screenshots aqui para vocês poderem ver. Além disso ele ainda falou sobre Palm com windows mobile e outros assuntos que eu, que não entrei ainda na onda mobile, não tenho conhecimento suficiente para comentar.

O Danilo ainda aproveitou para falar do seu revolucionário sistema de publicação, usado no Digitalminds (tudo junto, ta vendo…aprendi), com os não menos revolucionários conceitos de tags, “elevador de posts” e agora com o novíssimo recurso de permalinks…

Falamos brevemente sobre a matéria que saiu recentemente no ALA sobre o recurso de multi-colunas do CSS3 que é legal, mas pode ser perigoso se cair em mãos erradas.

Bom, é isso. Se você ainda estiver afim de escutar o podcast, você pode baixar o arquivo mp3 (15.46MB, 1h06m) diretamente ou incluir o RSS com podcasts do Tableless no seu agregador de podcasts preferido.

Perdoem meu excesso de vícios de linguagem. Preciso melhorar minha oratória. Quem conseguir contar quantas vezes eu disse as palavras “cara”, “entendeu” e “quer dizer” ganha um saco cheio de divs.

Fora esse meu probleminha com a oratória, o podcast foi interessante, uma discussão a meu ver bastante válida sobre uma questão que com certeza gera dúvida para muitas pessoas.

Você pode baixar diretamente o arquivo mp3 (10.7MB, 46:45min) ou adicionar o meu feed de podcasts no seu agregador de podcasts (ou podcatcher) preferido.

Espero que gostem!

O interessante é que esse novo layout me rendeu algumas menções em sites que listam bons designs feitos com CSS.

Toda vez que crio um layout novo pra este site, acho lindo e digno de entrar pra essas galerias. Sendo assim, vou em cada uma delas e submeto o design para avaliação. Até hoje nenhum deles tinha achado nenhum de meus designs digno de um ‘award‘ e, com o tempo, vou percebendo que realmente não mereciam.

Mas, dessa vez foi diferente. Três sites, CSS web sites no tables, Unmatched <style> e CSS-MANIA incluiram este modesto blog em suas galerias.

E, claro, eu adorei isso. Acredito que este layout foi realmente o mais belo que fiz até agora. Com certeza em pouco tempo vou me enjoar dele e pensar em fazer um novo mas, por enquanto, gostaria de saber a opinião de vocês. O que acham do novo layout? Podem falar sem problemas. Comentem a vontade.

Aqueles que têm javascript habilitado em seus browsers podem ver na barra da esquerda que eu estou oferecendo dois layouts. Um para resoluções de 1024px ou mais e outro para 800px. A única mudança é a largura da coluna central, esta aqui onde fica o texto.

Para isso estou usando o invasion of the body switchers – the director’s cut feito por Malarkey (Andy Clarke) e James Edwards. Um excelente script para troca de estilos que, na minha opinião, só tem um defeito: só carrega o estilo alternativo após o carregamento total do HTML. É um pequeno incômodo mas, acho eu, tolerável.

Antes disso eu estava usando o clássico stylesheet switcher do ALA mas, por algum motivo ele estava quebrando o botão de voltar do firefox. De qualquer maneira, o IOTBS é mais interessante, pois não mostra a opção de seleção de estilo para aqueles que não tem javascript.

Bom, é isso. Comentem sobre o novo layout. E aguardem o próximo!

Falamos sobre o meu site, linux, padrões web, microsoft, etc. Ou seja, papo de nerd!

Acho que vale a pena conferir. Para quem visita frequentemente meu site, é uma oportunidade de me conhecer melhor e escutar minha linda voz…hehe

Espero que curtam.

Você pode escutar a entrevista baixando o mp3 pelo Podcast do Tableless, em RSS ou baixando direto os arquivos mp3 da primeira e segunda partes da entrevista.

Para quem ainda não sabe o que é podcasting e que programa usar para acessá-lo via rss, baixe um dos softwares que suportam essa tecnologia e aproveite.

A entrevista foi feita no dia 24 deste mes, mas só postei aqui agora pois tive alguns problemas pessoais e fiquei longe da internet por alguns dias.

Espero que gostem da entrevista. Feedbacks são bem-vindos, mas os comentários ainda estão desabilitados. Usem a página de contato

Um site com layout bastante simples, mas bem interessante. A conversão até que foi fácil e foi, das três que fiz até agora, a mais simples. Se você abrir o original e a versão tableless, cada uma em uma aba do firefox e ficar alternando entre as duas, vai ver que só tem algumas pequenas diferenças, coisa de 1 pixel ou 2, que não vale a pena perder tempo mexendo.

Fazendo a habitual conta de economia de GBs – com 10.000 visitas diárias, vamos ver a economia com a conversão:

Versão original

tamanho do HTML: 21,79KB. Tamanho total: 73,48KB

10.000 x 73,48 = 734.800KB Р21,02 GB por m̻s

Versão tableless

Tamanho do HTML: 5,6KB. Tamanho total: 44,8KB

10.000 x 44,8 = 448.000KB – 12,8GB mensais

O interessante é que as pessoas falam que fazer sites nos padrões web é ruim porque o layout fica muito diferente nos vários browsers. Esse site – IBM Brasil – se deforma (em pequenos detalhes, claro) no opera 7 e no safari 1.2, enquanto a versão tableless não. Ponto pro tableless!

Baixe o arquivo zip com a versão tableless para estudar.

Dessa vez foi o site da HP Brasil.

Um site simples, mas com um design bem bonito.

O site original é praticamente todo baseado em javascript. Até mesmo a exibição das imagens e cores de maneira aleatória é feita com scripts que rodam no cliente.

Na minha opinião, esse tipo de coisa deveria ser feita no lado do servidor, já que é bem mais rápido e mantém o código gerado mais limpo, sem aquele monte de código js desnecessário.

A diferença de tamanho entre o HTML original e a versão tableless é realmente absurda.

o original tem 42,9KB contra 8,05KB da versão tableless. mesmo levando em conta que pelo menos 10KB do HTML original são formados por scripts js, a diferença de tamanho continua sendo muito grande.

O tamanho total (HTML+CSS+Imagens+js) do site original é 105,8KB, grande demais. A versão tableless completa tem apenas 30,08KB, menos de 30% do tamanho original. O CSS tem 5KB e, levando-se em conta que os visitantes habituais do site da HP já teriam o CSS guardado no cache dos seus browsers, seriam menos 5KB a ser baixados.

Fazendo uma pequena conta, assumindo 10 mil visitantes diários, teríamos

Versão original

10.000 x 105,8KB = 1.058.000KB, ou mais ou menos 1GB diário – 30GB por mês.

versão tableless

10.000 x 30,08 = 300.800KB, ou 293MB por dia Р8,6GB por m̻s

Percebam que essa é a economia de transferência conseguida apenas com a conversão da home page do site.

Além de ser mais leve, a versão tableless tem um código mais legível e marcação válida pelo W3C como XHTML 1.0 Strict.

Sites tableless são mais fáceis de manter e atualizar, mais leves e, em geral mais acessíveis – principalmente em se tratando de outras plataformas e dispositivos.

O único problema é quanto a browsers mais antigos (versão 4 pra baixo), que não interpretam css de maneira adequada. Mas no caso específico do site da HP, que depende de javascript para formar o layout, acho que não dá pra usar essa desculpa para não converter o site.

Gostou? Baixe o arquivo zip contendo a versão tableless para estudar

Use o Web Page Analyser para verificar as diferenças de desempenho entre as duas versões

Foi um trabalho feito por mim, apenas para demostra̤̣o da possibilidade de se fazer qualquer site Рinclusive portais Рutilizando os padr̵es.

Acredito que tenha ficado bem feito. Vale a pena dar uma conferida.

O Diego Eis publicou na seção de convertidos do Tableless.

Fiz a conversão apenas da home page.

O interessante é perceber como apenas a mudança da home page de um portal pode diminuir significantemente o tráfego gerado pelo site, salvando não só a banda do servidor, como a dos usuários também.

O HTML (no caso, XHTML) da página convertida é quase três vezes menor que o da original – 11,8KB contra 32,18KB.

Contando XHTML + CSS + Imagens, a verṣo tableless ̩ quase 40% menor Р40,56KB contra 66,23KB.

Isso sem contar que na segunda visita o CSS já estaria no cache do browser e seriam menos 10KB para carregar.

Não sei quantos visitantes diários o UOL tem, mas vamos fazer uma conta simples, fictícia, claro:

Suponhamos que a página receba 10 mil visitas diárias.

Considerando a versão original do site, temos 10.000 x 66,23 = 662.300 KBytes, ou seja, 646MBytes. Multiplicando pelos 30 dias do mês, temos 19,3GB de transferência mensais.

Agora vamos ver a versão tableless. Com os mesmos 10.000 x 40,56 = 405.600KBytes, ou 396 MBytes diários. 11,8GB mensais.

Economia de 7,5GB de transferência por mês.

Provavelmente a quantidade de visitas diárias recebidas pelo site do UOL é bem maior. Se considerarmos ainda que em boa parte dos acessos, o CSS não precisará ser baixado por já estar no cache, teremos uma economia de quase 50% na quantidade de Gigabytes transferidos por mês. Uma bela economia, concorda?

Sem contar que os usuários teriam uma experiência de navegação muito melhor, pois a página demoraria bem menos tempo pra carregar.

Ah, tem mais uma coisa que é importante ressaltar: relação conteúdo / código, ou Content Size. Ou seja, quantos por cento do seu HTML é, realmente, conteúdo.

O UOL é um portal, cuja principal função é prover conteúdo a seus usuários. Mesmo assim, apenas 9,16% de seu HTML é conteúdo. O restante é apenas “sopa de tags”.

A versão tableless tem 33.52% do HTML formado por conteúdo. Isto significa menos banda desperdiçada.

Bom, mas não é só economia de banda que importa quando se fala em tableless. Temos outras vantagens como semântica, código mais fácil de se manter, melhores resultados em sistemas de busca, isso pra citar apenas algumas que lembro agora.

Alguma dúvida que tableless, ou padrões web, vale a pena?

A comunidade Linux tem lá suas mágoas com a Red Hat pelo fato de ela ter deixado de distribuir livremente sua distribuição e passar apenas a vender o pacote enterprise, deixando o foco em desktops para um projeto independente, o Fedora.

Mas a fama da Red Hat a precede, pelo fato de ter sido (talvez ainda seja, não sei ao certo), a distribuição linux mais usada no mundo e ter dado grandes contribuições para o linux e o software livre e open source e, de qualquer maneira, o Fedora é um projeto sustentado pela Red Hat, nao podemos esquecer…

E agora está dando uma grande contribuição para a web, lançando um novo site, utilizando os padrões da web, mostrando mais uma vez que vale a pena seguir esses padrões.

Parabéns Red Hat pelo belo trabalho. Espero que as outras distribuições e os grandes sites sobre linux sigam esse exemplo.

O contest é aberto para qualquer pessoa participar, seja ela cadastrada ou não no fórum.

A idéia é fazer algo parecido com o que é feito no site CSS Zen Garden, conhecido site feito nos padrões da web, só que aplicado ao site Tableless. Você pode criar seu próprio estilo CSS para o Tableless e ver como fica. Os melhores estilos serão exibidos no site.

Participe!