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 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.
Topo 16/11/07

Sexta-feira dos Web Standards #4

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 ReplacementText 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.
Topo 09/11/07

Sexta-feira dos Web Standards #3

Está chegando a terceira edição da “Sexta-feira dos [tag]Web Standards[/tag]”.

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 [tag]CSS[/tag], 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 [tag]browsers[/tag] 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!

Topo 02/11/07

Sexta-feira dos Web Standards #2

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 [tag]WYSIWYG[/tag] 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).
  • [tag]XHTML[/tag] 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 [tag]CSS[/tag], 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 [tag]Internet Explorer[/tag], 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!

Topo 24/07/07

Galeria de imagens com CSS

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 [tag]CSS[/tag], 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 [tag]HTML[/tag]:

<!-- 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 :)

Topo 14/05/07

Rollover com imagens

Com a evolução do CSS e da criatividade no desenvolvimento de layouts, alguns efeitos como o rollover de imagens tornaram-se muito comuns. Para aqueles que não sabem, o efeito rollover faz a troca de imagens quando o usuário passa o mouse por determinado elemento em seu site.

É um recurso muito interessante em botőes, ícones, etc., e este post tem como objetivo exemplificar uma maneira fácil e rápida de fazer este efeito. O raciocínio é o seguinte: cria-se um link que tenha largura e altura definidas, com uma imagem de fundo (prevendo os dois estados) que troca de posição quando se passa o mouse por este elemento.

Passo 1: Crie a imagem com os dois “estados” do rollover, ou seja, a imagem do modo normal e, ao seu lado, a imagem com o efeito previsto quando o usuário passa o mouse pelo objeto. No final, é criada uma imagem com a altura desejada para o link e largura correspondente ao dobro, já que os dois estados do botão estão juntos na mesma imagem.

Exemplo de rollover

Passo 2: Faça o [tag]HTML[/tag] para este objeto, por exemplo um link:

<a href="#" id="rollover" title="Exemplo Rollover">Exemplo Rollover</a>

Passo 3: Agora vem a parte interessante. Deve-se estilizar o link desenvolvido anteriormente, via [tag]CSS[/tag], para que este tenha a imagem criada (passo 1) como fundo, além de definir a mudança de posição do fundo durante a passagem do mouse sobre o elemento, criando o efeito rollover:

a#rollover { display: block; width: 150px; height: 30px;
background: url(../images/rollover.gif) no-repeat;
font: bold 1.1em "Trebuchet MS", sans-serif; color: #fff; text-align: center; }
a#rollover:hover { background-position: right; color: #000; }

De acordo com o código CSS acima, defini o link como um elemento block, para que possa ser determinada sua largura, altura e definir a centralização do texto. A largura, como dito anteriormente, deve ser igual ŕ metade da largura da imagem criada no passo 1, pois, obviamente, pretendemos que apareça apenas um estado de cada vez.

Quando o usuário passar o mouse pelo elemento, a posição do fundo se deslocará para a direita, mostrando apenas a parte feita para criar o efeito rollover propriamente dito, além de mudar a cor do texto.

Desta maneira, criamos um efeito rollover de maneira muito fácil e prática, utilizando apenas uma imagem, aproveitando o recurso de posicionamento de fundo via CSS. O interessante é que, por se tratar de somente uma imagem, quando o usuário carregá-la, já terá os dois estados prontos.

Podemos observar que este método é muito vantajoso, pois não utiliza códigos JavaScript, por exemplo, e não depende de duas imagens diferentes, não causando aquela espera indesejável para carregar a segunda imagem, ao passar o mouse pelo elemento criado.

Topo 12/04/07

Web Designer tem que saber CSS

Houve um período, mais precisamente no começo da “explosão” da Internet no final dos anos 90, no qual os indivíduos que faziam sites eram chamados “Web Masters“, ou seja, eram estes os responsáveis pelo planejamento do site, a construção de seu layout, envio para o servidor e manutenção do mesmo.

Com o passar do tempo e expansão da Internet, recursos oferecidos, maior facilidade de acesso e popularização, o mercado acabou exigindo cada vez mais dos responsáveis pela construção do site, originando diversas funçőes, especializando os profissionais de cada área.

Uma das profissőes geradas foi a de Web Designer, profissional encarregado pela elaboração e construção do layout. Este termo acabou sendo banalizado, por ser utilizado por pessoas não capacitadas, assim como vem acontecendo com a profissão do designer em geral também. Na questão que trata sobre a verdadeira função de um Web Designer, há várias discussőes que defendem a idéia do profissional saber apenas criar o layout mas, ao meu ver, não basta criar, tem que saber como funciona o site, suas limitaçőes e implicaçőes que o Design pode ter em sua construção.

Desenvolver um layout voltado para a Web é totalmente diferente de algo criado para impressão, pois há variaçőes nos dispositivos e meios de acesso, fazendo com que alguns cuidados devam ser tomados. Isso inclui a escrita do HTML e CSS, pois não se tratam de linguagens de programação, mas de marcação e estilização, respectivamente. Não é uma tarefa difícil, só exige estudo e leitura, justamente para saber até onde se pode chegar com [tag]Web Design[/tag].

Por isso, Web Designers, deixem a preguiça e os editores visuais de lado! Pensem no conteúdo, na relevância do usuário, dando mais chances para que seu site dę certo e se destaque entre a grande maioria.

Topo 10/03/07

Referęncia aos Microformats – hCalendar

Há algum tempo, iniciei uma série de posts (que desejo continuar) sobre exemplos práticos de [tag]Microformats[/tag], para incentivar aqueles que nunca utilizaram ou não possuem interesse. No primeiro post, citei o hCard, situação na qual acredito que os Microformats são mais utilizados atualmente.

Agora meu objetivo é falar de outra prática comum no mundo dos Microformats: [tag]hCalendar[/tag]. Como em todo microformat, para aplicá-lo, basta seguir as classes pré-definidas e começar a utilizá-lo em seus projetos. Aliás, não há empecilhos em utilizá-lo num sistema totalmente dinamizado, por exemplo.

Na prática, o hCalendar pode ser utilizado como um simples calendário ou até uma agenda de eventos que, inclusive, venho utilizando em meus últimos trabalhos, tanto pessoais como na agęncia na qual trabalho. Este método se destina a ser aplicado em [tag]XHTML[/tag], Atom, RSS e XML.

Para facilitar a nossa vida, assim como no hCard, foi desenvolvido um gerador de hCalendar, visando deixar mais prático o processo de aplicação deste padrão.

Topo 29/11/06

Referência aos Microformats – hCard

Estamos passado por uma fase na qual muitos se perguntam do verdadeiro papel da W3C e se ela está sabendo desempenhá-lo, de acordo com as expectativas geradas ao longo dos anos e, claro, com a expansão dos [tag]Web Standards[/tag] nos sites e blogs pelo mundo a fora.

Não podemos negar a importância que a [tag]W3C[/tag] teve (e tem) na evolução do [tag]Desenvolvimento Web[/tag], mas devido a algumas falhas, seja na atualização de seu conteúdo, como nas medidas adotadas, o pessoal acabou tomando iniciativa e criando novos padrőes “independentes” que, com o passar do tempo, vęm possuindo mais e mais adeptos. No meu ponto de vista, o maior exemplo de uma iniciativa vinda de fora da W3C são os [tag]Microformats[/tag], cada vez mais aceitos em grandes e pequenos sites, se firmando como uma das grandes tendęncias dessa evolução da Internet, inclusive sendo reverenciado como um dos pilares da Web 3.0 (!!).

Na busca por essa padronização na maneira de se desenvolver o código do site e pela semântica do mesmo, foram criados diversos tipos de microformatos para diversas finalidades (seja para criar um perfil no seu site, mostrar sua localização geográfica, empresa na qual está trabalhando, telefone de casa, calendário, eventos importantes, copyrights, etc.) as quais citarei aqui.

O primeiro tipo de microformato que citarei, é o [tag]hCard[/tag], que também utilizo aqui no project.47. Continuar lendo…

Topo 02/08/06

Melhorando seu rendimento como profissional

Baseado neste artigo do netmag.co.uk, estarei colocando algumas dicas que podem lhe ser úteis ao desenvolver seu novo Web Site.
Se vocę desejar diferenciar-se da maioria, com certeza este artigo lhe será muito útil.

O que diferencia um bom de um ótimo profissional, é a agilidade no desenvolvimento do trabalho, sem o comprometimento da qualidade. Assim, o profissional diferenciado conhece os atalhos e maneiras práticas de passar pelos obstáculos impostos em sua profissão no dia-a-dia, aumentando sua produtividade e, conseqüentemente, a rentabilidade dos serviços prestados.

Continuar lendo…

Links Randômicos
Meta
Apoio
Créditos
Creative Commons