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

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

Mais temas para WordPress

Dando continuidade ŕ minha lista de bons temas para [tag]Wordpress[/tag], aí vai mais uma série de exemplos que mostram o porque desta plataforma fazer tanto sucesso, tanto por sua flexibilidade quanto pela facilidade de customização. Vale a pena reparar na diferença entre os layouts e as diferentes aplicaçőes envolvidas, para cada caso específico:

  1. Greed
    Tema para WordPress: Greed
    PreviewDownload
  2. Salmon
    Tema para WordPress: Salmon
    PreviewDownload
  3. Gridlock
    Tema para WordPress: Gridlock
    PreviewDownload
  4. Bosco
    Tema para WordPress: Bosco
    PreviewDownload
  5. D3S1GN 4UCK
    Tema para WordPress: D3S1GN 4UCK
    PreviewDownload
  6. Day Dream
    Tema para WordPress: Day Dream
    PreviewDownload
  7. Dropshadow
    Tema para WordPress: Dropshadow
    PreviewDownload
  8. Cool Web
    Tema para WordPress: Coolweb
    PreviewDownload
  9. City Scape
    Tema para WordPress: City Scape
    PreviewDownload
  10. Shiny Things
    Tema para WordPress: Shiny Things
    PreviewDownload
  11. Illacrimo
    Tema para WordPress: Illacrimo
    PreviewDownload
  12. Pride
    Tema para WordPress: Pride
    PreviewDownload
  13. Colibri
    Tema para WordPress: Colibri
    PreviewDownload
  14. Twitter WP
    Tema para WordPress: Twitter
    PreviewDownload
  15. InSense
    Tema para WordPress: InSense
    PreviewDownload
Topo 18/07/07

Trabalhando em equipe

Primeiramente gostaria de pedir desculpas pela falta de tempo para postar no blog… Pretendo atualiza-lo com mais freqüęncia novamente, abordando assuntos pertinentes ao pessoal dos Web Standards e, claro, aos que desejam aprender mais sobre Web Design em geral.

Este post tem a intenção de relatar experięncias sobre o trabalho em equipe e como este pode ser aperfeiçoado.

Na agęncia onde estou trabalhando, a freqüęncia de novos trabalhos é grande; são projetos importantes que exigem muito tempo de desenvolvimento e, conseqüentemente, muita gente trabalhando em conjunto. Muitos problemas podem surgir no percurso, devido ŕ falta de planejamento tanto para o desenvolvimento como o fluxo de trabalho propriamente dito.

Quando o projeto é iniciado, uma boa opção é a reunião envolvendo todos os setores, abordando as possibilidades e limitaçőes na execução do mesmo, delimitando os horizontes para que todos saibam onde começa e onde termina o trabalho.

Após definidas as possibilidades do projeto, ele é iniciado e tudo funciona como uma verdadeira linha de produção, onde há etapas a se seguir e, caso a comunicação seja efetiva entre os setores, o projeto será executado de melhor maneira, diminuindo custos e, conseqüentemente, possibilitando maior lucratividade por parte da empresa.

Um bom exemplo seria formular uma série de requisitos para o setor que encaminhará o trabalho para a próxima etapa, por exemplo quando o setor de criação finaliza o layout do site, passa-lo para o setor de desenvolvimento de acordo com alguns pré-requisitos definidos anteriormente, como PSDs mais organizados para que facilite o trabalho de quem irá montar o HTML e CSS, além de documentar variaçőes de títulos, parágrafos, listas, links, botőes, formulários, etc., a fim de agilizar o processo de desenvolvimento do site, diminuindo a possibilidade de erros e divergęncia com relação ao layout proposto originalmente.

Após feita essa parte do trabalho, nunca é demais documentar seus códigos HTML e CSS para que a equipe de implementação possa programar em cima deles de maneira mais eficiente, diminuindo a necessidade de ajustes posteriores.

Essas podem parecer dicas básicas (e realmente são), mas muitas vezes acabamos deixando o simples de lado para procurar soluçőes mais complexas para problemas tão corriqueiros em nosso ambiente de [tag]trabalho[/tag]. Por isso, uma boa comunicação com sua [tag]equipe[/tag] e uma boa dose de bom senso pode facilitar seu trabalho e de sua equipe também. Quanto mais puder padronizar-se na forma de trabalho, melhor.

2 comentários Assuntos: Geral
Links Randômicos
Meta
Apoio
Créditos
Creative Commons