6 maneiras de fazer a mesma coisa, o que é considerado boas práticas?

As vezes tem tantas maneiras diferentes de fazer o mesmo código que nós ficamos na dúvida quanto a qual maneira usar. O que seria considerado "boa prática" pela comunidade e o que sua equipe entenderia melhor. Suponhamos que você esteja trabalhando dentro de um método de um Domain Service chamado UmDomainServiceChique(objetoDoDominio) que será chamado por uma API. Você tem uma regra de negócio chique para ser verificada que por enquanto chamarei de VerificaMinhaRegraChiqueComplexa(). Você chama UmDomainServiceChique(objetoDoDominio) e caso VerificaMinhaRegraChiqueComplexa() retorne true você vai querer que UmDomainServiceChique faça o que tem que fazer e a api retornar Ok 200, caso contrário você quer que a API responda um erro qualquer, tipo BadRequest, e retornar uma mensagem dizendo que VerificaMinhaRegraChiqueComplexa deu ruim. Eu vejo 6 maneiras de fazer isso, gostaria de saber a opinião de outrs devs sobre qual seria a maneira menos gambiarr...

Criando uma galeria de imagens em javascript




Isso é tanto um tutorial como uma bibliotequinha de galeria open source. Acho que todos já precisaram fazer uma galeria de imagens para um site, fosse apenas institucional, fosse e-commerce.

Existem 1001 maneiras de se fazer uma galeria dessas. Eu criei uma simples, sem usar muitos recursos do DOM. Criei onze exemplos, de "A" a "K" que mostram como fazer uma galeria de imagens. O primeiro exemplo mostra como fazer da maneira mais simples possível, e a complexidade vai aumentando conforme você vai chegando no exemplo K.

Todos os exemplos estão comentados detalhadamente. É bom abrir os exemplos apenas de dois em dois para comparar as diferenças entre eles. Você pode usar o winmerge :)

É importante ressaltar que para alguns esses exemplos podem parecer fracos, mas eles foram desenvolvidos visando quem é totalmente leigo em javascript.

Primeiro de tudo você precisa ter uma área com as imagens pequenas, que ao serem clicadas aparecerão em uma imagem maior. Na verdade todas as nossas imagens serão grandes, mas serão achatadas nas img pequenas. Para a criação de Thumbnails reais, deve-se usar script server-side como PHP ou asp.net.

Você pode baixar todos os exemplos no meu Sky Drive, ou no meu Drop Box.

Exemplo A:







<html>

 <head>

    <script>


     //funciona em todos os browsers

     //o que esta função faz: ela espera que você passe um numero inteiro positivo no lugar de xxx (seu unico argumento ou parametro)

     //usando document.getElementById('imagemzona') ele obtem o objeto da imagem maior e altera o seu src concatenando 3 partes:

     // 1) o caminho e primeira parte do nome

     // 2) a parte variavel (no caso o xxx)

     // 3) a extensao, que no caso é gif.

  

    

            function CarregaImagenzao(xxx)

            {

                document.getElementById('imagemzona').src = 'img/ronaldoimge'+xxx+'.gif';

            }

        

   </script>

  </head>

   <!-- é necessario, alem de dar um id para as imagens, definir seu evento onclick, chamando CarregaImagenzao(<passando aqui o umero da imagem>) -->

     <img src='img/001.gif' id='imge1' width=50 height=50 onclick='CarregaImagenzao(1);'/>

     <img src='img/002.gif' id='imge2' width=50 height=50 onclick='CarregaImagenzao(2);'/>

     <img src='img/003.gif' id='imge3' width=50 height=50 onclick='CarregaImagenzao(3);'/>
     <img  src='img/001.gif' id='imagemzona' width=300 height=300/>
     <br>
     <br>
     <pre>
            é necessario, alem de dar um id para as imagens, definir seu evento onclick, chamando CarregaImagenzao(&lt;&lt;passando aqui o umero da imagem&gt;&gt;) 
            //funciona em todos os browsers

            //o que esta função faz: ela espera que você passe um numero inteiro positivo no lugar de xxx (seu unico argumento ou parametro)

            //usando document.getElementById('imagemzona') ele obtem o objeto da imagem maior e altera o seu src concatenando 3 partes:

            // 1) o caminho e primeira parte do nome

            // 2) a parte variavel (no caso o xxx)

            // 3) a extensao, que no caso é gif.

    </pre>
 </body>
</html>
      






Os proprios arquivos HTML contém um tutorialzinho, como este:

é necessario, alem de dar um id para as imagens, definir seu evento onclick, chamando CarregaImagenzao(<<passando aqui o umero da imagem>>)

//funciona em todos os browsers

//o que esta função faz: ela espera que você passe um numero inteiro positivo no lugar de xxx (seu unico argumento ou parametro)

//usando document.getElementById('imagemzona') ele obtem o objeto da imagem maior e altera o seu src Concatenando 3 partes:

// 1) o caminho e primeira parte do nome

// 2) a parte variavel (no caso o xxx)

// 3) a extensao, que no caso é gif.

Por isso não irei detalhar cada um dos arquivos, apenas o último, porque é uma biblioteca de geração de galeria completa.

A última galeria é um arquivo .js. Para usá-la é simples, basta entender como funciona a estrutura da página de galeria:

Eu tenho duas pastas de imagens, a pasta "IMG" e a pasta "Outras". Na pasta img ficarão as imagens da galeria, e na outras ficarão as outras imagens do site que não terão evento, nem ampliação nem nada. Na página html há um img com o id='imagemzona' e a classe = 'imggrande', uma div com o id='divgaleria' que será o lugar onde ficarão os thumbnais.

Tem também um arquivo css simples com as classes 'imgpequena' e 'imggrande', e o arquivo .js referido que faz a coisa toda acontecer. Na minha página html eu referencio/importo/chamo esses 2 arquivos.

Para funcionar você tem que basicamente colocar as imagens na pasta img e o "Inicializa();" ou o "InicializaTempo();"no evento onload.

Ainda não está 100%, faltam umas coisas, como por exemplo identificar o browser do cara, se é IE ou FF e qual a versão, mas já serve. Abra os exemplos desde o A até o K e veja os comentários das funções e as páginas HTML de teste.

Nas três ultimas versões existem alguns parâmetros/variáveis para setar no javascript, e a ultima de todas, a versão "K" é a mais completa de todas. A Versão "K" reune as fuincionalidades de carga automática de imagens da versão H com a carga "manual" através de tags html das versões anteriores. Abaixo você confere a lista de parâmetros da versão K:

var CARREGA_IMG_AUTOMATICA = true; //sete este parâmetro, que ativa temporizador para true para, alem das imagens estáticas ele carregar as dinâmicas.

var QTDE_MAXIMA_IMAGENS = 20; //quantidade maxima de imagens da galeria

var Extencoes = new Array(".gif",".jpg",".png", ".bmp"); //extensões ou sufixos validos

var IMAGENS = "img/"; //diretorio de imagens

var ID_GALERIA = "divgaleria"; //id da div que vai conter os thumbnais da galeria

var ID_IMAGEMGRANDE = "imagemzona"; //id da imagem grande a ser demonstrada

var CLASSE_IMAGEMPEQUENA = "imgPequena"; //classe da imagem pequena

var CARACTER_ESQUERDA = "0"; //caracter a ser preenchido a esquerda no nome das imagens usando padleft

var TAMANHO_NOME = 3; //tamanho do nome da imagem sem caminho e sem extencao: exemplo 005.jpg o tamanho é 3

var DEBUG_MODE = false; //setar para true quando quiser visualizar as mensagens de erro

Experimente usar essa galeria em conjunto com asp, asp.net, php ou qualquer linguagem dinâmicaserver-side. Assim, até mesmo as imagens estaticas podem ser dinamicas via código html dinamico gerado do lado do servidor. Sendo a variavel QTDE_MAXIMA_IMAGENS menor e a variavel CARREGA_IMG_AUTOMATICA = false o site carrega bem mais rapido pois o loop de imagens a ser carregado é menor, ou no caso de CARREGA_IMG_AUTOMATICA = false ele nem chega a ser repetido indefinidamente pelo temporizador. Você também pode implementar a carga de todas as imagens pequenase grandes em divs invisíveis que vão aparecendo e desaparecendo via javascript, conforme a thumbnail que o usuário clica. Existem milhares de possibilidades/combinações diferentes.



Para um próximo release implementaremos a navegação com as setas do teclado e a identificação do browser do usuário.

É isso aí, espero que seja útil para designers que não tem familiaridade com o javascript.








Console.Writeline(@"Have Fun \(^^)/");

Comentários

  1. Acho a K muito boa, caso o cliente faça sozinho a manutenção da mesma, visto que ele apenas precisa colocar as imagens escolhidas!

    ResponderExcluir
  2. Valew André. A idéia é essa: as anteriores a K serve só pro cara ver como foi feito, pouco a pouco. Para a versão "L" está previsto poder navegar entre as imagens com as setas do teclado. ;)

    ResponderExcluir

Postar um comentário

Postagens mais visitadas deste blog

Botão Add This para adicionar seu post em qualquer rede

Busca de CEP com o Lazarus - Parte 1 - UrlEncode

Uso de memória no SQL Server