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 05/04/08

CSS Naked Day 08 – Dia 9 de Abril

Está chegando mais um CSS Naked Day, evento que incentiva os desenvolvedores a tirarem o CSS de seu site e exibirem seu “body” sem estilização nenhuma :)

Para automatizar o processo, há uma opção de plugin para WordPress (que estou utilizando), desabilitando o [tag]CSS[/tag] todo dia 9 de Abril automaticamente.

Muitos sites já estão na lista de participantes da versão 2008 do evento, por que vocę não participa também?

Topo 22/03/08

Devemos usar image replacement?

Nós, designers voltados para a Web, sabemos muito bem que este tipo de mídia oferece várias limitaçőes (como qualquer outra) e, entre elas, está utilização de fontes diferentes do padrão adotado pelos sistemas operacionais. Ou seja, se eu desejar utilizar uma fonte Helvetica, os usuários de Mac poderão abrí-la tranqüilamente, enquanto os usuários de Windows só poderão visualizá-la caso consigam instalá-la em seus computadores.

Todo mundo que tem bom senso sabe que devemos nos preocupar em manter o layout de nosso site o mais padronizado possível, independente da plataforma e sistema utilizado para acessá-lo.

Por isso, surgiram técnicas para “driblar” essa dificuldade, utilizando imagens ao invés de texto puro. Só que esta prática acabava dificultando a indexação do conteúdo, caso o desenvolvedor do site não utilizasse o atributo “alt” nas imagens, pois os sistemas de busca não conseguiam interpretar o conteúdo utilizado na imagem.

Para resolver este problema, utilizando CSS, surgiram as técnicas de image replacement, ou seja, o código HTML permanece intacto, com o texto puro mas, através das folhas de estilo, trocamos o texto por uma imagem. Essa prática é muito utilizada pelos desenvolvedores, pois serve como uma verdadeira mão-na-roda no momento que o designer escolhe uma fonte fora do padrão dos sistemas.

Porém, surgiu uma notícia de que o Google poderia penalizar quem utilizasse esse tipo de técnica pois o desenvolvedor do site não estaria mostrando exatamente o que está no código HTML, fazendo com que este texto não aparecesse na tela para exibir uma fonte diferente em seu lugar.

E o que vocęs acham? Uma imagem com o atributo “alt” substitui a relevância de um título (h1, h2, h3…) no código?

Acredito que há lugares onde devemos utilizar o image replacement e até mesmo o sIFR, quando necessário, assim não perdemos a hierarquia no código e relevância do conteúdo.

Como sempre, cabe a nós pensar sempre no usuário. Há várias maneiras para se fazer a técnica do image replacement, algumas que dificultam ou não a acessibilidade do site. Por isso, indico escolher o método mais acessível, assunto discutido neste artigo (em inglęs).

Topo 15/02/08

Sexta-feira dos Web Standards #13

Peço desculpas pela ausęncia de posts nas duas últimas semanas, pois consegui tirar uma folga no trabalho e, claro, durante esse tempo aproveitei pra fazer uma boa lista de links e postar hoje para vocęs. Aí vai:

  • CSS Redundancy Checker – Esta ferramenta, muito útil por sinal, faz uma varredura em seu [tag]CSS[/tag] e exibe as redundâncias em seu código, podendo eliminar muito código desnecessário.
  • Improve website load time by 500% with 3 lines of code – Tutorial que mostra de maneira bem simples, como escrever um código PHP de 3 linhas que faz seu site ficar até 5 vezes mais rápido. É uma técnica muito interessante que envolve compressão dos arquivos necessários para abertura correta do site, através do uso do PHP.
  • Pure CSS Text Gradients – Este tutorial explica como fazer efeito de gradiente em seus textos, utilizando apenas CSS e uma pequena imagem PNG para isto.
  • Em based layouts – Vertical rhythm calculator – Excelente artigo que explica o que é a unidade EM utilizada para estilização de fontes, além de disponibilizar uma calculadora para saber qual medida (EM) corresponde ao valor em pixels (PX) desejado.
  • HTML 5 differences from [tag]HTML[/tag] 4 – Como o título diz, esta página explica as diferenças existentes entre as versőes 4 e 5 do HTML, na própria página da W3C.
  • The Acid3 Test – Página do Acid3, teste destinado a medir o nível de compreendimento do CSS3 por parte dos browsers. Vale ressaltar que os browsers atuais ainda estão chegando nos 100% do Acid2… Resta esperar para ver quanto tempo demorará até que atinjam essa marca no Acid3.
  • Tags de linguagens de marcação – Esta página lista as linguagens de marcação (versőes de HTML e XHTML) e as tags que cada uma possui (incluindo uma breve descrição sobre cada uma), servindo como comparativo entre elas.
  • Tripoli – a CSS standard for HTML rendering – Trata-se de mais um CSS que “reseta” as propriedades default dos browsers deixando, teoricamente, todos de maneira padronizada, antes de começar a desenvolver seu site.
  • [tag]SEO[/tag] Design and Development Best Practices – Artigo que lista boas práticas para desenvolvimento de sites, além de dicas para melhorar o desempenho com relação aos sistemas de busca. Uma referęncia prática e eficiente.
  • Web Site Marketing SEO Tools, SEO Score – Ótima ferramenta que exibe o desempenho de seu site nos sistemas de busca. Além disso, há a opção de fornecer algumas palavras-chave para que sejam avaliadas e exibir o posicionamento de seu site em cada uma delas.

Espero que aproveitem os links e sigam sugerindo mais referęncias para colocar nas próximas ediçőes da Sexta-feira dos [tag]Web Standards[/tag]!

Topo 25/01/08

Sexta-feira dos Web Standards #12

Nesta edição da Sexta-feira dos [tag]Web Standards[/tag] fiz uma relação de links sobre layouts e hacks em [tag]CSS[/tag], ferramenta para SEO, Internet Explorer 8 e a importância da Arquitetura da Informação no desenvolvimento de sites.

  • How to create CSS layouts without using FLOAT – Ao tentar reproduzir um layout em colunas, na grande maioria das vezes temos de usar os floats que, em determinados casos, podem causar problemas futuramente (por exemplo, ao ter que utilizar a propriedade clear em certa parte do site, acabará “quebrando” o layout, devido o uso de float nas colunas). Este artigo mostra como fazer um layout em colunas sem o uso dos floats.
  • Xinu – Check PageRank , Backlinks, Indexed Pages, Rankings and more – Esta é uma ferramenta muito útil para aqueles que pretendem acompanhar o desempenho de seu site nos sistemas de busca e, conseqüentemente, se aperfeiçoar nesta área. Muito prático e fácil de usar.
  • CSS Hacks – Sabemos que este assunto dos “CSS Hacks” ainda gera muita polęmica mas, dependendo da necessidade, acabamos tendo que utilizar tais artifícios. Este site fala sobre os hacks e lista vários, além de explicar maiores detalhes sobre cada um deles.
  • Compability and IE8 – Com o avanço do desenvolvimento do Internet Explorer 8 muita expectativa está sendo gerada, pois espera-se um lançamento de qualidade muito superior ŕs suas versőes anteriores. Este artigo descreve o que os desenvolvedores estão fazendo para facilitar a vida dos usuários e desenvolvedores, melhorando a renderização dos sites que estão de acordo com os Padrőes, sem deixar de visualizar corretamente aqueles direcionados ŕs versőes 6 e 7 do navegador.
  • Beyond DOCTYPE: Web Standards, Forward Compability and IE8 – Este excelente artigo trata sobre o futuro aguarda os desenvolvedores de sites; as diferenças de compatibilidade dos browsers e a dificuldade gerada cada vez que uma nova versão é lançada pois aumenta, gradativamente, as preocupaçőes que devemos ter em fazer um site acessível a [tag]browsers[/tag] e suas versőes distintas.
  • A importância da AI no aumento da performance de um site – Ótimo artigo tratando a importância da Arquitetura da Informação no desenvolvimento de sites e os benefícios que sua prática pode trazer aos usuários.

Bom final de semana a todos e semana que vem tem mais links!

Topo 18/01/08

Sexta-feira dos Web Standards #11

Na décima primeira edição da Sexta-Feira dos [tag]Web Standards[/tag] fiz uma seleção de links sobre metatags, referęncias sobre [tag]XHTML[/tag], [tag]CSS[/tag] global reset, tipografia Web, etc. Vamos a ela:

  • Metatags – Breve introdução de uso e teoria – Artigo que explica o que são as metatags, as maneiras de utilizá-las e quando devemos usá-las.
  • XHTML – Nove regras – Definição de algumas regras para bom desenvolvimento de um código XHTML, servindo como um guia rápido para quem está iniciando na linguagem. Porém, fica a observação para o exemplo número 3, no qual o autor do artigo utilizou as tags <b> e <i>, as quais não devem ser mais utilizadas.
  • Resetting Again – Exemplo de CSS global reset, uma prática que pode facilitar muito o início do trabalho de qualquer site em CSS. Cada um possui a sua maneira de desenvolver, mas sempre é válido conhecermos outras maneiras de fazę-lo.
  • Web Typography – an introduction to font families, font choinces and HTML punctuation – Artigo que trata de forma simples os diferentes tipos de famílias de fontes disponíveis para uso na Internet, comentários e comparaçőes de boas fontes para usar em seu site, etc.
  • Developing With Web Standards – Excelente site que serve tanto como introdução, como referęncia para quem desenvolve sites seguindo os Web Standards (ou Padrőes Web). Fala da história, estrutura, desenvolvimento em camadas, diferenças entre os browsers entre outros tópicos relevantes.
  • Serving XHTML with the Right MIME Type588 – Artigo publicado no Web Standards Project com o intuito de auxiliar na escolha do MIME Type para seu site, variando pela forma como quer servir o conteúdo do mesmo.

Sempre lembrando que, caso vocęs tenham mais sugestőes para inserção nesta série de posts, não hesitem em comentar ou enviar um e-mail para mim. Obrigado :)

Topo 11/01/08

Sexta-feira dos Web Standards #10

Mais um ano chega e, claro, para começar com o pé direito, iniciamos com a décima edição da Sexta-feira dos [tag]Web Standards[/tag]!

Essa lista envolve mais conceitos do que aqueles tutoriais que costumo passar, mas, claro, são muito úteis a todos!

  • Standards Overview – Ótimo texto que explica bem o que são os Web Standards (ou Padrőes Web), seus conceitos e alguns pontos importantes que devemos saber antes de desenvolvermos nosso site como Doctype, diferenças existentes entre os [tag]browsers[/tag], Acessibilidade, código semântico, etc.
  • IE7-JS – Trata-se de uma biblioteca [tag]JavaScript[/tag] (já conhecida por muitos) que, ao ser inserida em seu site, faz com que o Internet Explorer 5 e 6 reconheçam seu site da mesma maneira que o IE7, corrigindo vários erros relacionados a renderização do [tag]HTML[/tag] e [tag]CSS[/tag]. Já existe o script IE8, mas ainda em fase beta.
  • Levels of CSS knowledge – Como o título diz, este artigo mostra os diversos níveis de conhecimento em CSS e suas particularidades. Interessante para saber em qual nível vocę se enquadra.
  • CSS, Acessibility and Standards Links – Lista muito interessante com diversos links relevantes sobre tutoriais, noçőes básicas de CSS, Acessibilidade, guias, layouts e templates, livros, técnicas entre outros, direcionados para quem desenvolve sites.
  • Become a Better Web Standards Developer – Este artigo mostra várias dicas para quem quer se aperfeiçoar no desenvolvimento de sites em Web Standards, além de fornecer uma ótima lista de links relevantes ao final do texto.
  • maxdesign – Ótima referęncia para aqueles que querem aprender mais sobre estilização de listas, uso de floats e seletores CSS. Muito bem explicado e exibe vários exemplos práticos.

Espero que tenham gostado dessa lista. Semana que vem, com certeza, tem mais!

Topo 21/12/07

Sexta-feira dos Web Standards #9

Enfim passa mais uma semana e, claro, chega a Sexta-feira dos [tag]Web Standards[/tag] em sua nona edição! Muitos links interessantes sobre [tag]CSS[/tag], uso de Padrőes no envio de e-mails, etc… Vale a pena dar uma olhada nessa lista:

  • CSS layout techniques – Trata-se de uma lista com referęncias para quem quer aprender mais sobre a construção de layouts em CSS e suas variaçőes.
  • Checklist para Web Standards – Esta página exibe um checklist, exibindo certos pré-requisitos que devemos obedecer para assegurar a qualidade do desenvolvimento de nosso site.
  • Microformats: The Fine Art of Markup – Para quem ainda não sabe o que são os [tag]Microformats[/tag], este link apresenta detalhadamente o que eles são e suas finalidades. Ah, claro, também pode-se fazer uma busca aqui pois já escrevi bastante sobre o assunto.
  • Email Standards Project Acid Test – A exemplo do Acid test original, este tem por propósito assegurar a qualidade de renderização dos diversos meios de visualização de e-mail disponíveis. Muito interessante esta iniciativa, já que ainda temos poucas possibilidade quando tratamos de Padrőes no envio de e-mails.
  • Fancy Form Design Using CSS – Este site exibe maneiras de construir seus formulários, utilizando código válido, com vários exemplos de layouts distintos.
  • CSS Panic Guide – Ótimo guia para os iniciantes em CSS. Exibe várias referęncias importantes e conceitos que não devem ser esquecidos; desde os fundamentos da linguagem, até as melhores maneiras para a construção de layouts.
  • CSS3: Cascading Stylesheets Tutorial and Reference Guide – Este site apresenta diversas referęncias de propriedades CSS, além de vários tutoriais.
  • Email Standards Project: Yahoo! Signs on 100%, GMail Bad – Artigo que analisa a conformidade do Yahoo e GMail com os Padrőes e mostra que, do lado do Yahoo, as coisas estão indo muito bem.
  • 22 Resources to Easily Create CSS Layouts – Lista de referęncias para construção de layouts em CSS. Bem interessante para aqueles que possuem dificuldades com layouts de várias colunas, líquidos, elásticos, etc.

Aproveitando este post, gostaria de desejar um Feliz Natal a todos que visitam e assinam os feeds do project.47. Que o Papai Noel venha bem gordo nesse ano!

Topo 15/12/07

Sexta-feira dos Web Standards #8

Desta vez, a edição da “Sexta-feira dos [tag]Web Standards[/tag]” chegou um dia atrasada; peço desculpas a todos, mas a espera valerá a pena, pois a seleção de links dessa semana tem quantidade e qualidade! Então vamos a ela:

  • Iconize Textlinks with CSS – Este site oferece um CSS e pacote de imagens para aqueles que desejam inserir ícones em seus links automaticamente, através do [tag]CSS[/tag]. Uma aplicação muito interessante e fácil de ser utilizada.
  • 2007: More Web Design Trends & Cliches – Artigo que cita as tendęncias do [tag]Web Design[/tag] atual e, claro, alguns clichęs que acabam por surgir, devido ao novo estilo de Design proveniente, principalmente, da era “Web 2.0”.
  • 10 Usability Nightmares You Should Be Aware Of – Neste artigo são citados 10 tipos de erros em termos de [tag]Usabilidade[/tag] que não podem ser cometidos, para não comprometer a facilidade com seu site é acessado. Para muitos, alguns desses itens não são novidades, mas vale a pena frisar, pois este é um tema de suma importância para qualquer projeto, independente de seu tamanho.
  • CSS Rounded Box Generator – Este é um gerador de caixas com cantos arredondados, utilizando CSS. Para muitos esse tipo de recurso pode trazer muitos problemas, devido a seu grau de complexidade, então esse tipo de gerador pode ajudar não só com o código pronto, mas para sabermos como fazę-lo.
  • The most coolest web tools – Trata-se de uma lista enorme de utilidades, geradores, etc., direcionados para quem desenvolve sites. Pode ter muita coisa inútil, mas com certeza há ferramentas que auxiliam a deixar nosso trabalho mais prático.
  • Activating the Right Layout Mode Using the Doctype Declaration – Este site explica detalhadamente os tipos diferentes de layout (ex: Standards mode, no qual renderiza o CSS de modo correto, seguindo os Padrőes, e Quirks mode, no qual o browser se comporta como uma versão antiga, oferecendo certas limitaçőes ao desenvolvedor), de acordo com o doctype escolhido e em quais browsers são suportados.
  • Styleshout.com – Galeria de layouts prontos (de boa qualidade) e gratuitos, feitos via CSS. Esse tipo de site pode ser útil para aqueles que desejam aprender como fazer um determinado tipo de layout e, baixando um tema pronto, podem ver exatamente como pode ser construído.
  • A Preview of HTML 5 – Este artigo dá uma luz sobre a próxima versão do [tag]HTML[/tag] 5, mostrando alguns pontos interessantes que estão por vir, que prometem facilitar a vida do desenvolvedor e adicionar mais semântica ao código.
  • X/HTML 5 Versus XHTML 2 – Aproveitando o “gancho” do link anterior, este site fala um pouco mais sobre as diferenças existentes entre as próximas versőes do HTML e [tag]XHTML[/tag], respectivamente. Vale a pena darmos uma olhada e comparar os pontos fortes e fracos de cada um. Com certeza esse assunto ainda vai dar o que falar!
  • Maximum and Minimum Height and Width in Internet Explorer – Um dos grandes problemas que nós, desenvolvedores de sites temos, é a incompatibilidade do Internet Explorer 6 com determinadas propriedades CSS e, algumas delas são a max-width, max-height, min-width e min-height. Claro, há maneiras de se dar um jeito nisso e esse link nos dá soluçőes.
  • Embedding YouTube Videos as Valid XHTML 1.0 – Artigo que mostra como inserir vídeos Youtube em seu site de maneira correta, ou seja, deixando seu código XHTML 1.0 válido.

Bom, por enquanto é só. Tenho certeza que esse pequeno atraso fez valer a pena, pela qualidade dos links apresentados!

Topo 30/11/07

Sexta-feira dos Web Standards #6

Estamos no final de Novembro e na sexta edição da Sexta-feira dos [tag]Web Standards[/tag]! Procurei fazer uma lista de links abrangente e, portanto, espero que aproveitem :)

  • 50+ CSS Best Practices and Coding Guidelines – Site com listagem de 50 boas práticas para melhorar seu [tag]CSS[/tag] e modo de escrevę-lo. Possui maior utilidade como guia do que tutorial propriamente dito.
  • Ensuring your HTML emails look great and get delivered – Como o nome diz, este artigo nos dá dicas para formatação de e-mails e maneiras para termos certeza de que os usuários os receberão de maneira correta. A parte mais interessante é a listagem de propriedades CSS suportada pela maioria dos clientes de e-mail.
  • Bring on the tables – Este, com certeza, é o melhor artigo que encontrei sobre utilização de tabelas. Explica detalhadamente desde a maneira mais simples até a mais complexa que, em termos de usabilidade, é a mais correta a ser utilizada.
  • CSS-only, tableless forms – Este site mostra exemplos de formulários desenvolvidos apenas com CSS e HTML puro, sem utilização de tabelas.
  • Top Ten Search Engine Optimization Myths – Artigo que lista os 10 maiores mitos sobre SEO e explicaçőes do porque de serem apenas mitos. Vale a pena conferir!
  • A List Apart: Articles: Suckerfish Dropdowns – Tutorial feito pela A List Apart mostrando como se faz um menu dropdown com utilização de CSS e JavaScript.
Topo 23/11/07

Sexta-feira dos Web Standards #5

Mais uma semana se passa e chega a quinta versão do Sexta-feira dos [tag]Web Standards[/tag]. Separei uma lista de links interessantes sobre CSS Hacks, Web Standards em geral e técnicas [tag]CSS[/tag].
Espero que aproveitem e deixem suas sugestőes para a próxima edição!

  • The 7 CSS Hacks that we should use – Artigo que mostra exemplos de hacks e práticas que podemos utilizar para “driblar” certas incompatibilidades existentes entre os [tag]browsers[/tag]. Claro, todos nós sabemos que devemos tentar evitar ao máximo esse tipo de solução, mas quando não há outra saída, é uma boa pedida.
  • Top 30 popular websites are NOT using tables as main layout structure – Artigo que comenta a listagem dos 30 sites mais populares que, curiosamente ou não, todos não utilizam tabelas para construção do layout.
  • Layout CSS sem tabelas – Página especialmente dedicada ŕ introdução do assunto para aqueles que ainda desejam aprender a desenvolver o layout de seus sites sem tabelas. Extremamente indicado para os iniciantes e para quem ainda deseja ter embasamento teórico.
  • Writing a CSS cross-browser – Artigo que vem em contrapartida ŕ primeira sugestão da lista pois explica como fazer um site aplicável a vários browsers distintos, tentando ao máximo não utilizar CSS Hacks.
  • Pullquotes em CSS – Este tutorial nos motra como fazer os famosos “pullquotes” utilizando um código simples, enriquecendo seu text, além de facilitar a leitura.
  • Construindo sites com CSS e XHTML – Site voltado ao lançamento do livro dando maiores detalhes sobre seu conteúdo. Como ainda não temos um livro nacional no nível dos estrangeiros sobre este assunto, estou ansioso para ver se a espera valeu a pena.
  • Acessibilidade web: 7 mitos e um equívoco – Artigo extremamente relevante que fala mais sobre [tag]acessibilidade[/tag] e idéias, muitas vezes erradas, que temos sobre o assunto.
Links Randômicos
Meta
Apoio
Créditos
Creative Commons