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 20/07/09

Coda: editor de códigos para Mac OS

Como desenvolvedor Web Standards passei um tempo para encontrar a melhor forma de trabalhar no Mac OS, procurando um bom editor de códigos e forma de testar os sites nos navegadores de Windows (leia-se Internet Explorer 6 e 7).

Após usar TextMate e CSSEdit, encontrei o Coda e testei durante seu período de avaliação… Foi o suficiente para comprá-lo! A licença custa U$99 e pelo que oferece vale muito, ainda mais se compararmos ao Dreamweaver.

Resolvi gravar um vídeo (screencast) demonstrando algumas qualidades do aplicativo mas, obviamente, há diversas outras funcionalidades interessantes que optei por não mostrar:

Após descobrir estas e outras qualidades, percebi que o melhor editor de códigos para Mac OS é o Coda, principalmente após descobrir que ele fazia find/replace de múltiplas linhas em diversos arquivos :)

Topo 14/04/09

Porque o HTML 5 não acabará com os Microformats

A facilidade de uso dos Microformats com certeza fez com que se tornasse uma das maiores iniciativas no sentido de atribuirmos um nível maior de significado ao nosso conteúdo, não ficando presos apenas às tags disponíveis, aproveitando classes e id’s pré-definidos.

Um dos grandes problemas do Microformats é a falta de divulgação por parte dos desenvolvedores e, talvez por isso, não é tão comum vermos projetos comerciais utilizando a técnica, mesmo que seja tão simples de usá-la. Desta forma seu futuro foi colocado em questão, já que o HTML 5 está sendo cada vez mais discutido e, com isso, muitos imaginam que os Microformats não terão mais utilidade… Será? Analisemos cada uma das partes para tirarmos nossas conclusões!
Continuar lendo…

Topo 24/10/08

1º Fórum W3C Brasil – Por uma Web Única


Foto do crachá que ganhei no evento da W3C Brasil

No dia 30 de Setembro, como divulguei anteriormente, aconteceu o 1 Fórum W3C Brasil – Por uma Web Única em São Paulo. Tive a honra de comparecer ao evento em nome da Mídia Digital, agęncia na qual trabalho que, certamente, sabe investir na área de Web Standards.

O cronograma do evento foi o seguinte:

  • 09:00 – Painel de abertura com os afiliados Brasil – “Os padrőes web e seus impactos no futuro da gorvernança da TI”
  • 11:00 – Convidado internacional – “The ways to Web Semantic
  • 11:45 – Convidado especial – “A Web Semântica no Brasil”
  • 12:15 – Debate sobre a atuação do W3C Escritório Brasil

Neste artigo vou fazer uma análise do evento, destacando os principais assuntos abordados e o que concluímos para que, no próximo evento, entrem em pauta e auxilie no crescimento do escritório da W3C no Brasil.

Continuar lendo…

Topo 10/10/08

Melhorando seu processo de trabalho

Quem já não passou pela situação, com pelo menos 6 meses de experięncia na área de Web Standards, ao observar seu antigo código HTML / CSS e percebeu a melhoria tanto na organização como na performance do site?

Já escrevi por aqui um artigo bem interessante sobre como melhorar seu rendimento profissional, além de outro fator que influencia diretamente no assunto deste post, a colaboração que deve ocorrer entre Web Designer e desenvolvedor CSS.

Agora falaremos de algo que envolve a organização do trabalho, seja numa equipe com várias pessoas, como um simples freelancer: a padronização.

Continuar lendo…

Topo 27/08/08

Porque o Web Designer precisa colaborar com o CSS

Esse é um assunto totalmente pertinente para o pessoal da área de Web Design que, ao meu ver, também deve ter conhecimentos de HTML e CSS. Se isso não acontece, ao menos, deve haver um bom diálogo entre quem faz a criação dos layouts com aqueles que irão desenvolvę-los, para saber das limitaçőes que este tipo de mídia (Web) oferece, assim como qualquer outra.

Já escrevi um arquivo dando algumas dicas para melhorar seu rendimento como profissonal, na área dos Web Standards, e a proposta deste artigo é parecida, mas unindo a área de Design com o desenvolvimento do site.

Continuar lendo…

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 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 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 07/12/07

Sexta-feira dos Web Standards #7

Mantendo a tradição, chega mais uma sexta-feira e, com ela, a sétima edição da Sexta-feira dos Web Standards!

Separei alguns links interessantes, principalmente sobre [tag]CSS[/tag] com tutoriais, bons exemplos de Design e boas maneiras no desenvolvimento de formulários.

  • Wufoo – HTML Form Template & CSS Design Gallery – Site direcionado ŕqueles que desejam aprender mais sobre desenvolvimento de formulários, tanto na forma do código [tag]HTML[/tag] como na produção visual do mesmo.
  • Best of CSS Design 2007 – Como o nome diz, trata-se de uma listagem dos melhores Designs feitos com CSS durante este ano de 2007. Bela seleção que mostra todo o potencial que temos em nossas mãos, contradizendo aqueles que afirmam o fato de que “todo site feito em CSS tem cara de blog”.
  • Transparent PNGs in Internet Explorer 6 – Trata-se de mais um artigo explicando o funcionamento e soluçőes para a aplicação de PNGs transparentes no Internet Explorer 6.
  • 9 CSS Ethics Every Designer Should Have – Este artigo lista 9 boas práticas que podem agilizar e facilitar seu desenvolvimento em CSS.
  • Creating Sexy Stylesheets – Como o link anterior, este artigo dá várias dicas para melhorar a forma como escrever seu CSS e, realmente, coisas simples como estas podem ajudar muito no desenvolvimento de grandes projetos.
  • The All-Expandable Box – Tutorial que mostra, de maneira simples, como fazer uma caixa expansível (sombreada), até mesmo quando o usuário aumenta o tamanho da fonte.
  • CSS drop shadow – A exemplo do link anterior, este tutorial ensina como fazer caixas expansíveis com sombra, utilizando CSS.
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.
Links Randômicos
Meta
Apoio
Créditos
Creative Commons