Blog

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).

Na décima primeira edição da Sexta-Feira dos Web Standards fiz uma seleção de links sobre metatags, referências sobre XHTML, CSS 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

Technorati Tags: Web Standards, XHTML, CSS

Desta vez, a edição da “Sexta-feira dos Web Standards” 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 CSS. Uma aplicação muito interessante e fácil de ser utilizada.
• 2007: More Web Design Trends & Cliches - Artigo que cita as tendências do Web Design 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 Usabilidade 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 HTML 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 XHTML, 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!

Technorati Tags: Web Standards, CSS, Web Design, Usabilidade, HTML, XHTML

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 CSS 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 HTML 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.

Technorati Tags: CSS, HTML

Estamos no final de Novembro e na sexta edição da Sexta-feira dos Web Standards! 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 CSS 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.

Technorati Tags: Web Standards, CSS

Mais uma semana se passa e chega a quinta versão do Sexta-feira dos Web Standards. Separei uma lista de links interessantes sobre CSS Hacks, Web Standards em geral e técnicas CSS.
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 browsers. 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 acessibilidade e idéias, muitas vezes erradas, que temos sobre o assunto.

Technorati Tags: Web Standards, CSS, browsers, acessibilidade

Enfim chega mais uma sexta-feira e, é claro, temos a quarta edição da Sexta-feira dos Web Standards!

Vejamos a lista de links que separei para vocês nesta semana:

• PHP + CSS Dynamic Text Replacement - Text Replacement é o tipo de técnica utilizada para substituir texto em fonte padrão em outro tipo de formato. Neste caso, o PHP é utilizado para gerar títulos com fontes “não-padrão”, sem a necessidade do usuário possuir tal fonte, já que uma imagem é criada dinamicamente, baseada no texto do código HTML. Tem suas limitações, claro, mas é uma boa opção para aquele projeto que depende muito de uma tipografia alternativa.
• HTML Playground - Este site mostra uma listagem de tags HTML, descrição sobre cada uma e possibilidade de estilização por CSS, a fim de auxiliar na compreensão destas. Muito interessante para sabermos também qual tag é mais adequada para cada situação e suas limitações.
• How to create a unobstrusive print this page with JavaScript - Quando precisamos fazer um link para impressão de determinada página, geralmente optamos pelo javascript:window.print(), mas este pode acabar dificultando a vida do usuário, caso não tenha o JavaScript habilitado. Por isso, este artigo vem nos auxiliar com um script pronto para esta situação pois insere, dinamicamente, o link para impressão e, caso o usuário esteja com JavaScript desabilitado, o link não aparece em sua tela.
• CSS Builder - Ferramenta interessante que auxilia no desenvolvimento de CSS, utilizando forma intuitiva para isso. Bom para os iniciantes que ainda precisam de ajuda para memorizar certas propriedades e as possibilidades de estilização que cada uma oferece.
• CSS Sandbox - Este site possui uma caixa de texto, acima, que mostra em tempo real o resultado da estilização selecionada na lista abaixo. Boa ferramenta para testes de divergências em renderização entre browsers.
• The Perfect Fluid Width Layout - Artigo mostrando o desenvolvimento do layout líquido “perfeito”, possuindo largura mínima de 780px, esticando até 1260px. Interessante para aqueles que desejam criar um site que seja adaptável à maioria dos usuários, abrangendo o máximo de espaço disponível na tela.
• Usabilidade de sites tem impacto no resultado das empresas - Artigo publicado na Folha Online que apresenta uma breve introdução sobre Usabilidade e seus conceitos, explicando a importância dos testes e o retorno que dão aos projetos direcionados à Web.
• Advanced CSS Menu - Muita gente ainda procura tutoriais de menus com CSS e esse link apresenta uma forma, muito interessante, de se fazer um menu horizontal com utilização de imagens para dar mais impacto visual. O interessante não é utilizar exatamente o que foi demonstrado, mas aproveitar a técnica para outros exemplos e necessidades.

Está chegando a terceira edição da “Sexta-feira dos Web Standards“.

Segue abaixo a lista de links interessantes que encontrei durante esta semana:

• Web Design 101: Floats - Como ainda vejo muita gente com dificuldades relacionadas aos floats, resolvi selecionar este link pois mostra, detalhadamente, as possibilidades e limitações desta propriedade.
• Understanding z-index - Esta página explica a propriedade z-index, também indicada para os iniciantes, possibilitando usufruir dos benefícios dela.
• One Star Gallery - Uma das mais novas galerias de sites feitos em CSS, provando as capacidades que esta técnica nos possibilita alcançar.
• O que são Web Standards - Artigo traduzido por Maujor explicando os Web Standards, suas origens e fundamentos.
• Comparision of Strict and Transitional XHTML - Lista comparativa de propriedades habilitadas (ou não) dependendo do tipo de XHTL escolhido (Strict ou Transitional).
• Layout Gala - Exemplos de variações em layout baseadas no mesmo código-fonte mudando, apenas, o CSS. Todos os exemplos estão disponíveis para download.
• Emulate Ajax Image Loading with CSS - Técnica muito interessante que simula o carregamento de uma imagem através de loading similar ao utilizado em Ajax, porém, somente com CSS. Vale a pena dar uma olhada.
• Entendendo a Arquitetura da Informação - Artigo que explica os fundamentos da Arquitetura da Informação, tema cada vez mais discutido em nossa profissão
• CSS - Contents and compability - Tabela listando diversos seletores, pseudo-classes, declarações, etc., e suas compatibilidades com browsers diversos.
• CSS tests and experiments - Listagem de vários testes e experimentos, aproveitando diversas características e propriedades do CSS.

Como sempre, caso tenham novas sugestões para essa lista, é só deixar nos comentários!

Technorati Tags: Web Standards, CSS, browsers

Chegou mais uma sexta-feira e, portanto, estou postando a segunda edição da lista semanal de links e espero que lhes ajude a solucionar problemas e, claro, adquirir novos conhecimentos!

• Evaluation of WYSIWYG editors - Artigo muito interessante que mostra detalhes de testes realizados com vários editores visuais que, em sua maioria, são utilizados para cadastro de conteúdo dinâmico (por exemplo, sistemas gerenciadores de conteúdo - CMS).
• XHTML Character Entity Reference - Lista de referência dos valores UTF para vários caracteres especiais, auxiliando no desenvolvimento de seu site, caso hajam problemas para exibição dos mesmos.
• CSS Layout- 100% height - Exemplo de layout feito com CSS, ocupando toda a altura da janela. Basta abrir o código fonte e verificar a maneira pela qual o site foi produzido.
• FancyForm - Ferramenta que possibilita a troca das velhas checkboxes de formulários para imagens de acordo com sua escolha, através de JavaScript e CSS. Dependendo da necessidade proveniente do layout, esta funcionalidade pode fazer toda a diferença!
• Fade Out Bottom - Exemplo de layout que utiliza “fade out” no rodapé do site, criando um efeito visual muito interessante.
• IE/Win Inherited Margins on Form Elements - Este artigo mostra detalhadamente o bug do Internet Explorer, mais especificamente em elementos de formulários (como inputs, selects, etc.), que acabam herdando as margens do elemento pai, causando vários problemas relacionados a layout. Ao final, mostra como este problema pode ser corrigido.
• 10 colour contrast checking tools to improve the acessibility of your design - Artigo que comenta 10 ferramentas destinadas à análise de contraste de cores em seu site, a fim de melhorar a acessibilidade do mesmo.

Espero que esta lista tenha sido útil para vocês e, certamente, semana que vem teremos a terceira versão!

Technorati Tags: WYSIWYG, XHTML, CSS, Internet Explorer

Quantas vezes você já precisou desenvolver uma galeria de imagens e acabou recorrendo a recursos como Flash ou JavaScript? Graças à uma necessidade que tivemos aqui na agência, resolvi desenvolver uma galeria simples, feita somente com CSS, baseando-se na utilização de pseudo-classes para visualização das imagens maiores.

Há alguns bons exemplos espalhados pela Internet buscando desenvolver algo sem utilização de artifícios externos, como este tutorial no CSSplay, que acabei utilizando como “base” para este método de desenvolvimento.

Nesta galeria que desenvolvi o raciocínio é muito simples, e muitos já devem ter feito algo bem parecido ou, até mesmo, igual. Iniciamos escrevendo o HTML:

<!-- abre galeria -->
  <div id="galeria">
    <h1>Fotos de Curitiba</h1>
<!-- abre imagem e legenda default -->
    <img src="foto1.jpg" alt="Foto de Curitiba" />
    <span class="legenda">Rua 24 horas</span>
<!-- fecha imagem e legenda default -->
    <ul id="thumbs">
      <li>
        <a href="#nada" title="Visualizar imagem">
          <img src="foto1_thumb.jpg" alt="Preview da imagem" />
          <img class="full" src="foto1.jpg" alt="Foto de Curitiba" />
          <span class="legenda">Rua 24 horas</span>
        </a>
      </li>
      <li>
        <a href="#nada" title="Visualizar imagem">
          <img src="foto2_thumb.jpg" alt="Preview da imagem" />
          <img class="full" src="foto2.jpg" alt="Foto de Curitiba" />
          <span class="legenda">Palácio Avenida</span>
        </a>
      </li>
      <li>
        <a href="#nada" title="Visualizar imagem">
          <img src="foto3_thumb.jpg" alt="Preview da imagem" />
          <img class="full" src="foto3.jpg" alt="Foto de Curitiba" />
          <span class="legenda">Bosques</span>
        </a>
      </li>
    </ul>
  </div>
<!-- fecha galeria -->

Neste HTML criei uma div chamada “galeria” que irá conter o título da galeria, a imagem e legenda defaults para que apareça caso nada esteja selecionado, e a lista de thumbnails. Nessa lista, cada item possui um link que contém o thumb e a imagem em tamanho completo. Para finalizar, o desenvolvi o CSS prevendo o comportamento dos links, quando clicados, mostrando as imagens e legendas que estão inseridos:

* {
	margin: 0;
	padding: 0;
}
HTML, body {
	font: 11px "Trebuchet MS", Arial, sans-serif;
}
h1 {
	margin-bottom: 5px;
	font-size: 1.4em;
	text-transform: uppercase;
}
img {
	border: 2px solid #666;
}
#galeria {
	position: relative;
	width: 304px;
	margin: 1em auto;
	padding: 5px;
	background: #cacaca;
}
#galeria span.legenda {
	display: block;
	width: 296px;
	padding: 2px;
	background: #CACACA;
	font-style: italic;
	text-align: left;
}
#galeria ul#thumbs {
	clear: both;
	padding: 5px;
	text-align: center;
	list-style: none;
}
#galeria ul#thumbs li {
	display: inline;
	margin: 0 3px;
}
#galeria ul#thumbs li a {
	text-decoration: none;
}
#galeria ul#thumbs li a img.full,
#galeria ul#thumbs li a span.legenda {
	position: absolute;
	visibility: hidden;
	left: 5px;
}
#galeria ul#thumbs li a img.full {
	top: 30px;
	cursor: default;
}
#galeria ul#thumbs li a span.legenda {
	top: 188px;
	color: #000;
	cursor: text;
}
#galeria ul#thumbs li a:active img.full,
#galeria ul#thumbs li a:focus img.full,
#galeria ul#thumbs li a:active span.legenda,
#galeria ul#thumbs li a:focus span.legenda {
	visibility: visible;
}

Como pode ser observado, as imagens e legendas possuem “position: absolute”, posicionando-se de acordo com a div “galeria”, não oferecendo nenhuma dificuldade neste ponto. Claro, se as imagens variarem de tamanho, deverão ser feitos alguns ajustes específicos para cada foto, mas nada que represente muito trabalho.

Um ponto importante é a correção dos cursores tanto na imagem quanto na legenda pois, devido ao fato de ambos estarem dentro de um link, devemos trocá-los para que pareçam algo que realmente está fora, acima da lista de thumbnails.

Você pode visualizar a versão finalizada aqui. Caso haja alguma sugestão de melhoria, é só comentar

Technorati Tags: CSS, HTML