Jump to content
Fórum Script Brasil
  • 0

Elemento Picture do HTML5


Webdesignemfoco.Com
 Share

Question

Bom dia pessoal,
hoje vamos falar sobre um elemento importantíssimo para o design responsivo. Antes de mais nada vamos conceituar o que vem a ser webdesign responsivo.
 

Design responsivo


Design responsivo consiste numa série de técnicas de programação no intuito de fazer com que o website se acomode corretamente em todas os tipos de resolução de tela, seja smartphone, tablet, notebook ou PC.
O sites devem ser projetados para 03 resoluções mínimas (480px, 768px e superior a 768px). Com isso conseguimos envolver a maior parte dos monitores existentes atualmente.
 

Diferença entre SITE MOBILE e SITE RESPONSIVO


A principal diferença entre um site mobile e um site responsivo é que o site mobile é uma versão a parte somente para dispositivos móveis, ou seja, no desenvolvimento são criados dois websites, um exclusivo para dispositivos móveis e outro exclusivo para desktop. Já o site responsivo consiste em um único site para atender a todas as resoluções. Em sua confecção o layout responsivo é mais trabalhoso de se programar, entretanto é de mais fácil manutenção e melhor indexação pelos mecanismos de busca.
 

E o elemento PICTURE do HTML5 nessa história?


É nesse contexto que se dá a importância do elemento PICTURE. Bem, não podemos imaginar um site responsivo sem imagens responsivas. Simplesmente definir a imagem com o atributo width: 100%; não basta para confeccionar um layout responsivo.
No desenvolvimento de um site responsivo é necessário pensar no tamanho que essas imagens impactarão sobre a tão sofrida rede de dados dos nossos smartphones. Para tanto, definir o width: 100%; resolverá o problema do encaixe do design, entretanto não resolverá a questão do tamanho em kb das imagens e seus impactos sobre as lentas redes de dados brasileiras.
 

Utilizando o PICTURE


Por experiência, digo que há que se ter cuidado ao utilizar o elemento PICTURE, isso porque nem todos os navegadores reconhecem seu atributo SOURCE. Vejamos o exemplo abaixo da forma correta de se utilizar tal elemento:
Elemento Picture HTML5

1ª e 8ª Linhas: sempre é bom deixar o elemento PICTURE dentro de uma div.
2ª e 7ª Linhas: início da tag PICTURE.
3ª Linha: source da tag PICTURE específica para smartphone, alí conterá a imagem para celular.
4ª Linha: source da tag PICTURE específica para tablete.
5ª Linha: source da tag PICTURE específica para desktop.
6ª Linha: a sexta linha é importantíssima. Como já foi falado, diversos navegadores não reconhecem o SOURCE da tag PICTURE, logo devemos inserir a sexta linha, o clássico img para evitar esse problema.

Pessoal, espero que tenham gostado.

Obrigado.

Edited by Webdesignemfoco.Com
Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share



  • Forum Statistics

    • Total Topics
      149.6k
    • Total Posts
      646.2k
×
×
  • Create New...