Laboratório de Informática Imagens

1. Bruno C. de Paula Laboratório de InformáticaImagens 1º Semestre 2010 > PUCPR > BSI

2. Resumo da aula Na aula hoje, vamos aprender como inserimos imagens em nossas páginas; Além disso, perceberemos que existem diferentes tipos de imagem e cada tipo deve ser usado de uma maneira diferente.

3. Material referente ao assunto da aula • 1) Esta apresentação; • 2) http://www.pt-br.html.net/tutorials/html/lesson9.asp • 3) http://www.w3schools.com/html/html_images.asp • 4) http://dev.opera.com/articles/view/17-images-in-html/

4. Tags e Propriedades referenciadas na aula • HTML: • Tag img (documentação Sitepoint): Permite que uma imagem inline seja apresentada na tela; • Atributos alt, src, width, height, title. • CSS: • Propriedade background-image: coloca uma imagem como fundo de um elemento;

5. Em que camada estão as imagens?

6. Imagens em uma página HTML • Imagens de conteúdo: • imagens referentes ao conteúdo do documento, fazem sentido em relação ao assunto da página; • tag <img>, <map> e <area>; • Imagens de fundo: • fazem parte do layout; • podem mudar; • não tem utilidade ao assunto; • propriedade CSS background-image; • Favicons: icones de favoritos.

7. Não usar a tag<img> para layout!

8. A tag <img> • Permite que uma imagem inline seja apresentada na tela; • Atributos obrigatórios: • src: caminho separado por / e ..; • alt: texto de representação alternativa mostrado caso a imagem não apareça.

9. .. / É essencial entender como usar o ../

10. .. / = pasta pai

11. Imagine a página “index.htm” dentro da pasta jamantaVamos colocar todas as imagens no MESMO arquivo

12. Mostrar imagem na mesma pasta <img src="jamanta.png" alt="eu"/>

13. Mostrar imagem na “pasta pai” • <img src="../delcrano.png" alt="Meu pai"/>

14. Mostrar imagem na “pasta avô” • <img src="../../altrano.png" alt="Meu avô"/>

15. Mostrar imagem na “pasta filho” • <img src="jamantinha/jamantinha.png" alt="Meu filho"/>

16. Mostrar imagem na “pasta primo” • <img src="../../cicrano/gelcrano/gelcrano.png" alt="Meu primo"/>

17. Mostrar imagem na Web • <img src="http://tinyurl.com/fotoeu" alt="Minha Foto"/> • Ei, você está consumindo a minha banda! • Não é uma técnica vista com bons olhos.

18. Formatos de imagem mais comuns • Aceitos pela maioria dos browsers atuais: • GIF, JPG, PNG; • Não aceito, normalmente: • BMP (aceito para favicon).

19. Formatos de imagem mais místicos • Outros formatos de mídia (SÃO IMAGENS): • XBM (preto e branco!), MNG, ICO. • Outros formatos de mídia (NÃO SÃO SÓ IMAGENS): • SWF (Flash), SVG (alternativa ao Flash), Silverlight (outra alternativa ao Flash), Java Applet.

20. <img alt="texto alternativo"/> • Texto alternativo que é exibido caso a imagem não esteja disponível, ou até ela ser exibida; • É importantíssimo sempre colocar esse atributo! • Tooltip no IE, mas não deveria ser! • Navegadores não-visuais (e celulares) sempre utilizam esse atributo;

21. <img title="texto"/> • Tooltip exibido quando o mouse passa sobre a imagem;

22. <img id="nome"/> • Identificador da imagem; • Permite que se modifique a imagem via CSS/JavaScript;

23. <img width="X" height="Y"/> • X pode ser um valor em pixels ou em porcentagem; • width => largura; • height => altura; • Se não forem especificados a imagem fica do tamanho original;

24. Imagens de fundo • Usar propriedade background-image do CSS; • Veremos mais detalhes na aula de Imagens em CSS;

25. Exemplo de imagem de fundo • Ver exemplo no site de documentação Mozilla; • .solidimage • { • background-color: #FFF; • background-image: url("images/starsolid.gif"); • }

26. Um JavaScript por dia... • Trocar a imagem de conteúdo quando clicar nela; • <img src="starsolid.gif" id="estrela"/> • <script type="text/javascript"> • var trocarImagem = function() • { • this.src='startransparent.gif'; • } • document.getElementById("estrela").onclick=trocarImagem; • </script>