Pular para conteúdo 
Зеленый кофе

O autor

Carlos Eduardo de Souza, Front-End Developer & Interface Designer na Coopers Digital Production, dedica seu tempo para o desenvolvimento de uma Web mais acessível. Possui certificado W3C em Mobile (sites e web apps) e HTML5.

Portfolio e blog sobre Web Standards – project.47, de Carlos Eduardo de Souza

Blog

Topo 03/04/09

Sexta-feira dos Web Standards #17

Para o pessoal que estava ansioso por mais uma edição da tradicional Sexta-feira dos Web Standards, aí está sua décima sétima edição!

  • IE 8 Compatibility – Meta Tags, Http Headers, User Agent Strings etc etc – Este artigo mostra variações que podemos utilizar nos headers de nosso site para mudar o comportamento do Internet Explorer 8. Interessante conhecermos antes de começarmos a desenvolver para ele, dependendo da necessidade de cada site.
  • Vertical Centering With CSS – Excelente artigo que mostra 5 métodos para fazer alinhamento vertical pelo CSS. Sabemos que não é nada fácil como aplicar valign numa célula de tabela, mas pode quebrar um galhão!
  • 12 resources for getting a jump on HTML 5 – Como diz neste artigo, o mundo ainda não está preparado para usar o HTML 5, mas para podermos chegar neste ponto, temos que conhecê-lo. Então, esta página serve como referência a diversos outros sites com textos sobre o assunto. Obrigatório!
  • Web Standards Test: Top 100 Sites – Zeldman resolveu fazer uma pesquisa dos 100 sites mais populares da Internet (via Alexa) e concluiu que apenas 25% deles usam os Web Standards. Veja uma pequena análise dos sites mais bem colocados.
  • Como testar o site no IE6, IE7 e IE8? – Artigo que apresenta algumas maneiras de testar seu site nas diversas versões de Internet Explorer, para acabar de vez com o problema nos testes!
  • 10 Rare HTML Tags You Really Should Know – Lista de 10 tags HTML que, na grande maioria, são esquecidas mas podem acrescentar muito valor e qualidade ao nosso código, se bem utilizados!
Topo 03/02/09

Microformats Bookmarklet

Bookmarklets são links que você adiciona em seus favoritos com o intuito de executar determinadas ações no site visualizado, através de scripts.

Se você necessita de alguma ferramenta para usar os Microformats em qualquer site ou até mesmo para testar os desenvolvidos por você, é só usar este bookmarklet para exibir os dados desejados.

Testado tanto em Firefox como Safari, Internet Explorer 6 e 7, o Microformat Bookmarklet é uma ótima opção para quem quer usufruir dos benefícios dos Microformats de maneira prática!

Topo 09/01/09

Sexta-feira dos Web Standards #16

Confesso a vocês que estava ansioso para postar em mais uma Sexta-feira dos Web Standards, agora em sua décima sexta edição.

Alguns imaginavam que não iria mais postar estes links interessantes, mas sempre vou tentar manter a qualidade das indicações, por isso as vezes espero um tempo para reunir uma quantidade legal. Vejam abaixo os links de hoje:

  • Web Standards: Where the ROI is – Todo desenvolvedor de HTML e CSS que se preze conhece a Molly, uma das grandes evangelizadoras dos Web Standards pelo mundo a fora. Neste artigo, descreve os benefícios das práticas dos padrões, falando pelo lado que interessa ao cliente: economia, agilidade e melhor confiabilidade no produto entregue. Use estes conselhos e convença seus clientes também!
  • setmy.browsersize.com – Sei que este link foge um pouco ao contexto dos Web Standards, mas não deixa de ser útil a todos nós. E como o próprio nome diz, este site redimensiona a janela de seu navegador para a resolução desejada, ótimo para aqueles que desejam testar seu novo layout e sua compatibilidade com as diversas resoluções.
  • How HTML 5 Is Already Changing the Web – Este artigo tenta mostrar como o HTML 5 já está mudando o cenário do desenvolvimento Web, principalmente na questão do suporte dos navegadores, etc. Interessante sua leitura para entendermos um pouco mais sobre os princípios dessa grande revolução para a nossa área de Desenvolvimento Web.
  • Fixed Footers without JavaScript – Um dos grandes problemas enfrentados por nós, desenvolvedores, é o momento no qual o Designer decide que o rodapé do site deve ficar fixo no final da página, mesmo sem conteúdo suficiente para “empurrá-lo” para baixo. Já foram discutidas várias soluções, mas se esta não for a mais tranquila, é uma das simples que já vi para resolver o problema.
  • DD_belatedPNG: Medicine for your IE6/PNG headache! – A questão do uso de PNG 24bits e sua transparência, no Internet Explorer 6, já é bem batida. Sempre tentei evitar os scripts que “corrigem” o problema, pois estes nunca me convenceram. Até conhecer este que, para mim, é a melhor solução até o momento. O DD_belatedPNG resolve todas as questões como background-repeat, background-position, links clicáveis, etc., somente com o uso de um JavaScript, sem usar a “gambiarra” do filter e um GIF transparente de 1×1 px.
  • Semantics in HTML 5 – O site A List Apart é muito conhecido pela qualidade de seus artigos e este mostra o uso de algumas tags novas, criadas para a nova versão do HTML. O interessante é notar como a semântica do código ficará muito mais detalhada e cada vez mais específica para as nosssas necessidades; em um momento até notei uma certa semelhança com os Microformats!
Topo 26/09/08

1º Fórum W3C Brasil

Como já comentei aqui anteriormente, foi inaugurado o escritório brasileiro da W3C, o que é uma verdadeira honra poder contar com uma sede da organização em nosso país.

Os resultados dessa iniciativa já podem ser percebidos: acontecerá na próxima terça-feira, dia 30 de Setembro, o 1 Fórum W3C Brasil, com o intuito de discutir padrőes em acessibilidade, usabilidade, mobilidade, web semântica e TV Digital. Além da discussão destes assuntos, há a intenção de reunir os atuais colaboradores e encontrar novos contribuintes para o trabalho da W3C no Brasil.

O evento será fechado a convidados e, felizmente, poderei comparecer ao evento (juntamente com o Gustavo Krause) em nome da Mídia Digital, que se mostra comprometida com a área do desenvolvimento em Web Standards.

Chego de São Paulo na própria terça-feira e, obviamente, passarei aqui no blog para escrever mais sobre as impressőes do evento.

Topo 12/09/08

Sexta-feira dos Web Standards #15

A décima quinta edição da Sexta-feira dos [tag]Web Standards[/tag] está bem interessante, contando com links nacionais e estrangeiros, que abrangem assuntos desde os conceitos dos Web Standards até a relação de image replacement com o Google. Então vamos ŕ lista:

  • As premissas da Web Semântica – Precisa dizer mais? Este artigo aborda de maneira bem clara o que é essa tal de Web [tag]Semântica[/tag] e a importância de seu compreendimento no desenvolvimento de sites. Para quem está começando no mundo do desenvolvimento Web, é um artigo de extrema utilidade.
  • Design para CSSers – Outro grande artigo do Luli, agora abordando certos conceitos de Design que são extremamente essenciais para qualquer desenvolvedor de HTML e [tag]CSS[/tag]. Na verdade, costumo falar muito aqui sobre a necessidade dos Web Designers saberem sobre CSS, mas o contrário também deve acontecer. Claro, falo isso no sentido profissional, ou seja, aqueles que trabalham com Web Standards, assim como eu, devem ter conhecimentos sobre Design, mas não temos como exigir que um programador saiba de tudo isso ao mesmo tempo!
  • Image Replacement + Google – Ahh, a velha discussão sobre image replacement e o Google. Este artigo vem elucidar muita coisa sobre o assunto, mostrando principalmente que não temos a perder com esta técnica, somente devemos ter certas precauçőes ao utilizá-la.
  • Using CSS to Fix Anything: 20+ Common Bugs and Fixes – Como o próprio nome diz, este é um artigo que mostra diversas técnicas de CSS para corrigir bugs que enfrentamos corriqueiramente, seja com browsers (leia-se Internet Explorer) ou com propriedades que os desenvolvedores não conhecem muito bem e acabam tendo dificuldades, como o bom e velho float.
  • Cheat Sheets for Front End Developers – Coleção de cheat sheets, ou seja, aqueles guias rápidos com propriedades e elementos a serem utilizados naqueles momentos que esquecemos a nomenclatura ou modo de uso. Excelente link para todos nós, Front End Developers e, claro, para quem não é da área e precisa daquela consulta rápida para resolver algum problema de última hora.
  • Finding Harmony Between Categories and Tags on Blogs – Para finalizar, este artigo que acabei achando de última hora ajuda principalmente os blogueiros iniciantes, que não sabem a diferença entre tags e categorias, mostrando em quais casos é melhor usar um ou outro. O importante é ter bom senso principalmente na hora de usar as tags!
Topo 03/09/08

Google Chrome: novo browser para as massas?

Com o lançamento da versão beta do navegador do Google, chamado Google Chrome, houve uma grande movimentação entre o pessoal de tecnologia, principalmente para nós, que desenvolvemos sites e devemos estar atentos ŕ este tipo de novidade.

Como uso Mac em casa, não pude testar anteriormente, assim demorei um pouco para escrever sobre ele.

Mas a impressão inicial é muito boa, começando pela instalação bem objetiva, rápida e, principalmente, simples. Aliás, a palavra simplicidade é o grande mote deste navegador, assim como a maioria dos serviços oferecidos pelo Google. Mostra-se uma agilidade enorme no processamento de JavaScripts, mostrando que o browser veio mesmo para solidificar a base dos aplicativos Web, como Gmail, Google Docs, entre tantos outros, não necessariamente controlados pelo Google.

Imagem do navegador do Google, o Google Chrome

O pessoal aqui da agęncia ficou bem empolgado quando notou uma espécie de Firebug nativo do navegador, assim como o Opera Dragonfly, mas nada que se compare a famosa extensão para o Firefox.

Outro ponto interessante, é que cada aba aberta funciona de maneira independente, sendo tratada como um novo aplicativo, ou seja, caso uma aba trave devido a algum bug do programa ou site específico, vocę pode simplesmente fechá-la sem que o navegador seja prejudicado.

Na questão da interface foram feitas algumas implementaçőes interessantes, garantindo uma grande área útil para visualização dos sites. Um detalhe é a barra de status, que só aparece quando necessário, além do posicionamento das abas, acima da barra de endereços, como no Opera.

Boa chance para converter os usuários comuns

Pois é, fica uma questão muito interessante. Caso o Google faça uma boa divulgação dessa nova ferramenta, muito simples de usar, creio que haverão boas chances de havermos uma grande adesão ao navegador. Acho que essa seja a sugestão perfeita para vocę indicar a seus pais, por exemplo, a trocar de navegador. Se eles achavam o Firefox meio complicado de usar, tenho certeza que não encontrarão dificuldade com o Google Chrome.

Imagine se este navegador, por carregar o nome do Google, consegue pegar uma boa fatia do mercado, que ainda usa Internet Explorer 6? Será uma grande conquista para nós, desenvolvedores.

E a renderização, como ficou?

Como a engine de renderização é a WebKit, ou seja, a mesma do Safari, podemos ficar seguros em utilizar um browser totalmente adaptado aos Web Standards, deixando usuários e desenvolvedores felizes.

Inclusive já foi divulgada uma tabela com diversos seletores CSS e o suporte oferecido pelo Google Chrome que, diga-se de passagem, é espetacular.

Para aqueles que se preocupam com o resultado no Acid 3, o browser se saiu muito bem, ficando na frente de Firefox 3 e Internet Explorer 7 com 78 pontos (média), mesmo se tratando de uma versão beta. Mas, para ficar claro, a versão 3.1 do Firefox já conseguiu chegar a pontuação 85, mostrando que o pessoal da Mozilla não dormiu no ponto.

Topo 22/08/08

Sexta-feira dos Web Standards #14

Finalmente chegou a décima quarta edição da Sexta-feira dos Web Standards, com uma boa coleção de links interessantes para quem quer aprender a melhorar seu processo de trabalho com [tag]HTML[/tag], [tag]CSS[/tag], etc.

Vejamos a seleção de links que fiz para esta semana:

  • Opera Web Standards Curriculum – Este site, oferecido pelo Opera, nada mais é do que um guia de boas práticas para o desenvolvimento de sites dentro dos [tag]Web Standards[/tag], com uma boa coletânea de artigos envolvendo as áres do HTML e CSS, além de conceitos gerais sobre o tema.
  • Informação e Formatação; As duas camadas do desenvolvimento web – O artigo apresenta o conceito sobre a separação entre conteúdo e formatação do site, um dos princípios básicos para desenvolvimento nos Web Standards. É algo que pode parecer batido, mas para quem está querendo aprender como fazer sites, a contextualização é muito importante e este artigo cumpre bem este papel.
  • Creative Use of PNG Transparency in Web Design – Sabemos que o uso de PNG 24 bits nos dá uma certa dor-de-cabeça com o Internet Explorer 6 mas, se usado de maneira correta, pode ampliar nosso leque de possibilidades, oferendo um ótimo recurso visual para nossos sites. Este artigo dá algumas dicas de aplicaçőes deste PNG 24 bits, aproveitando ao máximo o recurso da transparęncia alpha, enriquecendo nossos layouts.
  • Otimizar seu site para a pesquisa do Google – A otimização de sites para sistemas de busca já não é mais uma novidade e, inclusive, é uma área que vem crescendo muito nos últimos tempos. Este artigo vem justamente auxiliar na compreensão desta área e o que podemos fazer para melhorar o posicionamento de nosso site, aumentando sua relevância para o sistema de busca. Claro, não é um guia que oferece fórmulas mágicas, mas é uma ótima introdução para o assunto!
  • 10 CSS Form Examples – Sem idéias para implementar algum novo formulário em seu site? Não sabe como desenvolvę-los? Este artigo oferece 10 exemplos de formulários bem feitos, usando e abusando das possibilidades do CSS, aliado ao visual agradável e funcional.
  • CSS Compability and Internet Explorer – Felizmente o pessoal da MSDN (Microsoft Developer Network) reconheceu as limitaçőes de seus browsers e fez um site especialmente voltado para a compatibilidade do Internet Explorer com o CSS, listando as propriedades CSS e quais delas são suportadas (ou não). O interessante é que este site não se restringe ao IE 6 ou 7, na verdade ele faz uma tabela comparativa desde a versão 5 até a 8, que está em fase beta.
Topo 16/06/08

Firefox Download Day 2008: É amanhã!

Visitar o site da campanha
A expectativa para lançamento do Firefox 3 é grande, já que a promessa de melhorias é significativa.

Para marcar a nova versão do navegador, foi inaugurada a campanha Download Day 2008 visando bater o recorde no número de downloads em um único dia.

Este movimento, acima de tudo, ajudará a divulgar ainda mais este nome que, ao lado de Opera e Safari, são os melhores browsers do mercado, sem dúvida.

Por isso, não se esqueça que amanhã é dia de baixar a nova versão do Firefox e batermos este recorde!

Topo 07/05/08

Opera Dragonfly liberado para download

Como de costume, o Opera sai na frente e lança (ainda em versão Alpha) uma ferramenta para inspeção e edição em tempo real de JavaScript e CSS, a exemplo da extensão Firebug para Firefox.

Denominado como Opera Dragonfly, a grande novidade é que este recurso virá nativamente com as próximas versőes do navegador, e promete facilidade para os desenvolvedores de sites. Será possível utilizá-lo tanto no Desktop como em sua versão móvel.

Particularmente acho esta notícia muito bem-vinda, pois trata-se de um ótimo navegador que, infelizmente, não possui muitos usuários, em grande parte pela falta de suporte (leia-se extensőes) se comparado ao Firefox.

Tomara que com isto tenhamos mais desenvolvedores utilizando Opera e, conseqüentemente, usuários “comuns” também.

Topo 27/03/08

Vamos acabar com o Internet Explorer 6!

Foi lançada uma campanha (séria) a favor da atualização, por parte dos usuários, do Internet Explorer 6. Nós, desenvolvedores, estamos encarregados de incentivar nossos visitantes a parar de utilizar o Internet Explorer 6 e trocar para outros navegadores ou, até mesmo, para o Internet Explorer 7, o que já representa um grande avanço.

Por incrível que pareça, grande parte das visitas ao project.47 (cerca de 40%) ainda é formada por usuários que utilizam o IE6; isso que estamos falando de um site voltado a desenvolvedores, Web Designers, etc., imagine os dados para um site convencional!

Desta maneira, devemos aderir ŕ campanha SaveTheDevelopers voltada ŕ essa causa, apresentando diversas vantagens apresentadas pela atualização de seu [tag]browser[/tag].

Aproveitando a oportunidade, peço encarecidamente aos visitantes que, caso ainda utilizem Internet Explorer 6, por favor, atualizem seu navegador para a versão 7 ou instalem um melhor. Nós desenvolvedores agradecemos :)

Links Randômicos
Meta
Apoio
Créditos
Creative Commons