Web sites para pessoas, em qualquer lugar ou dispositivo.
Web sites para pessoas, em qualquer lugar ou dispositivo.
Ao desenvolvermos sites adaptáveis uma das principais questões que devemos resolver, principalmente se o site contempla dispositivos móveis, é com relação à otimização do código e imagens de acordo com o contexto de uso. Caso o usuário esteja acessando seu site de um dispositivo móvel não faz sentido carregar as imagens utilizadas nas versões para desktop para então utilizar as técnicas de imagens fluidas.
Dica: cerca de 80% do tempo de carregamento dos sites é em decorrência do processamento dos arquivos enviados pelo servidor, como: HTML, CSS, imagens e JavaScript. (Yahoo! Developer Network)
As técnicas de adaptação são válidas quando o custo-benefício está do lado dos usuários, ou seja, não deve prevalecer a lei do menor esforço. Para entender melhor o que quero dizer assista ao vídeo onde demonstro diferentes abordagens: mobile first vs desktop first.
Neste artigo vou demonstrar detalhadamente como usar a detecção de dispositivos do lado do servidor para servir imagens adequadas (otimizadas) para cada contexto de uso usando a plataforma WordPress, muito embora a mesma técnica possa ser utilizada em qualquer plataforma.
Para os próximos passos vamos precisar de:
Para instalar a classe basta copiá-la para dentro do seu tema, por questões de organização vou salvá-la na pasta “class” dentro do meu tema (wp-content/themes/meutema/class).
No arquivo “functions.php” vamos instanciar a classe e salvar o resultado em uma constante (identificador para um único valor) para utilizá-la em qualquer ponto do nosso tema.
1 2 3 4 5 6 7 8 9 10 11 12 | <?php // Disponibiliza a classe include(TEMPLATEPATH . '/class/' . "Mobile_Detect.php"); // Instancia a classe $detect = new Mobile_Detect(); // Guarda o resultado em uma constante define('ISMOBILE', $detect->isMobile()); ?> |
A classe “Mobile_Detect” pode retornar vários resultados diferentes; se o dispositivo é móvel ou desktop, e também, o tipo de dispositivo, através dos métodos abaixo:
As linguagens de programação possuem formas simples de testar o valor das variáveis, elas recebem o nome de “estruturas condicionais”, ou “estruturas de controle”. No PHP a sintaxe básica é:
1 2 3 4 5 6 7 8 9 | if( expressão ){ // Resultado da expressão foi verdadeiro } else { // Resultado da expressão foi falso } |
Aplicando esta estrutura em nosso tema ficará assim:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <?php if( ISMOBILE ){ // Exibe conteúdo otimizado para dispositivos móveis } else { // Exibe conteúdo otimizado para desktops } ?> |
O WordPress possui uma função perfeita para esses casos. Ao adicionarmos imagens pela administração, o WordPress redimensionará a imagem em três tamanhos diferentes, além da original. Estes tamanhos podem ser pré-configurados na administração (Configurações > Mídia).
Ao adicionarmos imagens pela administração, o WordPress redimensionará a imagem em três tamanhos diferentes, além da original.
Para acessarmos as diferentes resoluções da imagem podemos utilizar a função do WordPress wp_get_attachment_image_src($attachment_id, $size, $icon). Para entender como usar a função e suas possibilidades acesse a página no codex do WordPress. Basicamente nós entramos com os dados: ID do arquivo anexo (nesse caso a imagem do post) e o tamanho da imagem que queremos e a função retorna uma lista com os dados da imagem, como: url, largura e altura. As opções possíveis para o tamanho da imagem são: thumbnail, medium, large ou full.
Combinando a estrutura condicional com a função WordPress para recuperar a imagem de um tamanho específico nosso trecho de código fica assim:
1 2 3 4 5 6 7 8 9 10 11 12 13 | if( ISMOBILE ){ // Exibe conteúdo otimizado para dispositivos móveis $image_attributes = wp_get_attachment_image_src( $attachment_id, “thumbnail” ); } else { // Exibe conteúdo otimizado para desktops $image_attributes = wp_get_attachment_image_src( $attachment_id, “large” ); } ?> |
Em muitos casos precisaremos exibir a galeria completa de imagens otimizadas para cada contexto, nesses casos teremos que fazer um script para carregar as imagens do post. Eu fiz um script simples que faz o trabalho sujo e retorna uma lista (array) para ser iterado no template exibindo as imagens.
Copie o código abaixo e cole no arquivo “functions.php” do seu tema.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | /** * Pequisa e retorna uma lista com as imagens do post de acordo com o tamanho especificado. * * @autor Bruno Barros <bruno@brunobarros.com> * * @param int $post_id ID do post. * @param int $size Tamanho das imagens (thumbnail, medium, large or full). * @param int $start Exibe as imagens a partir desta (1 == primeira). * @return array Retorna uma array multidimencional. */ function my_galeria_adaptavel($post_id, $tamanho = 'thumbnail', $start = 1) { $saida = array(); $ordem = array(); // Existe ID? if(! is_numeric($post_id)){ return false; } // retorna todas as imagens continas neste post $consulta_filhos = &get_children('post_type=attachment&post_mime_type=image&post_parent=' . $post_id); // percorre as imagens do post foreach($consulta_filhos as $i) { // dados do POST/imagem $img_id = $i->ID; // detalha dados da imagem (thumbnail, medium, large or full) $dados = wp_get_attachment_image_src($img_id, $tamanho); // se não é thumbnail insere nos dados do thumbnail também if($tamanho != 'thumbnail'){ $dadosThumb = wp_get_attachment_image_src($img_id, 'thumbnail'); } else { $dadosThumb = $dados; } // retorna a ordem das imagens $ordem[] = $i->menu_order; // coloca os dados das imagens em um array $saida[] = array( 'src' => $dados[0], 'width' => $dados[1], 'height' => $dados[2], 'title' => $i->post_content, 'full' => $i->guid, 'thumb' => $dadosThumb[0] ); } // ordena como na administração array_multisort($ordem, $saida); // retorna a lista de imagens a partir de uma imagem // definida no argumento $start return array_slice($saida, ($start - 1)); } |
Para gerar a galeria no seu post você terá que criar um laço de repetição (looping) com a lista de imagens retornadas pela função my_galeria_adaptavel(). O trecho de código abaixo é um exemplo de como gerar o código HTML para nossa galeria.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <?php // LOOP WP DO POST // galeria adaptável if(ISMOBILE){ $tamanho = 'medium'; } else { $tamanho = 'large'; } // guarda os dados da galeria na variável $galeria $galeria = my_galeria_adaptavel(get_the_ID(), $tamanho, 1); echo ' <ul class="galeria">'; // loop para montar as miniaturas for($x = 1; $x <= count($galeria); $x++): // endereço da imagem na resolução para o contexto $img = $galeria[$x-1]['src']; // endereço da miniatura para navegação da galeria $thumb = $galeria[$x-1]['thumb']; // atributo title da imagem $title = $galeria[$x-1]['title']; ?> <li class="mini-<?php echo $x;?>"> <a href="<?php echo $img;?>" title="<?php echo $title;?>"> <img src="<?php echo $thumb;?>" alt=" " class="thumb"> </a> </li> <?php endfor;// fim do loop echo '</ul> '; // fim // galeria adaptável // FIM // LOOP WP DO POST ?> |
Se tudo foi feito corretamente até aqui o resultado será semelhante a este:
1 2 3 4 5 6 | <ul class="galeria"> <li class="mini-1"><a href="link/img/grande-1.jpg" title="descrição da imagem"><img src="link/img/pequena-1.jpg" alt=" " class="thumb" /></a></li> <li class="mini-2"><a href="link/img/grande-2.jpg" title="descrição da imagem"><img src="link/img/pequena-2.jpg" alt=" " class="thumb" /></a></li> <li class="mini-3"><a href="link/img/grande-3.jpg" title="descrição da imagem"><img src="link/img/pequena-3.jpg" alt=" " class="thumb" /></a></li> <li>...</li> </ul> |
A imagem menor será sempre a miniatura, mas a imagem que será ampliada dependerá do contexto de acesso do usuário, nesse caso: medium (médio) para dispositivos móveis e large (grande) para desktops.
As técnicas de adaptação podem e devem ser complementadas com técnicas do lado do servidor. Como projetistas que tem um real interesse pela experiência de navegação, não basta que o site seja adaptável se isso trouxer uma sobrecarga para os usuários. Além de se adaptar as necessidades dos usuários o site deve estar otimizado para a capacidade de banda e processamento dos mesmos.
O WordPress tem uma função para recuperar a imagem thumbnail do post de forma bastante prática, ela se chama the_post_thumbnail(). Veja como utilizá-la no codex.
Os códigos utilizados neste artigo podem ser livremente alterados de acordo com a sua necessidade. Caso tenha alguma dificuldade não hesite em escrever.
Parabens pelo post, realmente muito bom =D
Muito bom! Gostei do texto e da dica!