From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../pagina_de_boas_vindas_da_mozilla/index.html | 194 +++++++++++++++++++++ 1 file changed, 194 insertions(+) create mode 100644 files/pt-pt/learn/html/multimedia_and_embedding/pagina_de_boas_vindas_da_mozilla/index.html (limited to 'files/pt-pt/learn/html/multimedia_and_embedding') diff --git a/files/pt-pt/learn/html/multimedia_and_embedding/pagina_de_boas_vindas_da_mozilla/index.html b/files/pt-pt/learn/html/multimedia_and_embedding/pagina_de_boas_vindas_da_mozilla/index.html new file mode 100644 index 0000000000..aad765e97a --- /dev/null +++ b/files/pt-pt/learn/html/multimedia_and_embedding/pagina_de_boas_vindas_da_mozilla/index.html @@ -0,0 +1,194 @@ +--- +title: 'Avaliação: Página inicial da Mozilla' +slug: Learn/HTML/Multimedia_and_embedding/Pagina_de_boas_vindas_da_Mozilla +tags: + - Avaliação + - HTML + - Imagens + - Incorporação + - Multimedia + - Principiante + - Responsivo + - Video + - iframe + - imagem + - tamanhos +translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
+ +

Nesta parte, testaremos seu conhecimento de algumas técnicas discutidas nos artigos deste módulo, pedindo que você adicione imagens e vídeos a uma grande página inteiramente dedicada ao Mozilla!

+ + + + + + + + + + + + +
Pré-requisitos:Antes de abordar este estudo, você já deve ter trabalhado nos parágrafos anteriores do módulo Multimídia e Integração.
Objetivo:Testar seus conhecimentos sobre a integração de imagens e vídeos em páginas da Web, bem como técnicas de imagens adaptativas (imagens "responsivas").
+ +

Ponto de partida

+ +

Para iniciar este estudo, você precisa buscar todas as imagens e HTML disponíveis no diretório mdn-splash-page-start no github. Coloque o conteúdo do arquivo index.htmlem um arquivo chamado index.htmlem seu disco rígido local, em um novo diretório. Em seguida, copie pattern.png na mesma pasta (clique com o botão direito sobre a imagem para obter a opção de salvá-la).

+ +

Vá para o diretório original para  procurar por imagens diferentes e fazer a mesma coisa. Talvez seja necessário salvá-las em uma nova pasta por enquanto, caso você precise manipular algumas delas usando um editor gráfico antes de usá-las.

+ +
+

Note: O arquivo HTML de exemplo contém bastante CSS para estilizar a página. Você não precisa alterar o CSS, apenas o HTML no elemento <body> - contanto que você insira as tags corretas, o estilo corresponderá à essas alterações.

+
+ +

Sumário do projeto

+ +

Nesta parte, apresentamos uma home page quase acabada da Mozilla, que visa dizer algo interessante sobre o que a Mozilla representa e fornecer alguns links para outros recursos. Infelizmente, nenhuma imagem ou vídeo foi adicionado ainda - este é o seu trabalho! Você precisa adicionar algumas mídias para tornar a página mais bonita e fazer mais sentido. As subseções a seguir detalham o que você precisa fazer:

+ +

Preparando as imagens

+ +

Usando seu editor de imagem favorito, crie versões com 400px de largura por 120px de largura de:

+ + + +

Dê a eles nomes semelhantes como:  firefoxlogo400.png e firefoxlogo120.png.

+ +

Juntamente com o mdn.svg, essas imagens serão seus ícones para vincular a outros recursos, dentro da área further-info. Você também vinculará o logotipo do Firefox no cabeçalho do site. Salve cópias de todos estes arquivos dentro do mesmo diretório de index.html.

+ +

Em seguida, crie uma versão com 1200px de largura, no modo paisagem, de red-panda.jpg, e outra, com 600px de largura, no modo retrato, que mostre o panda em close-up. Mais uma vez, nomeie-os de forma semelhante para identificá-los facilmente. Salve todas essas cópias na mesma pasta que o index.html.

+ +
+

Nota: Você deve otimizar suas imagens em JPG e PNG para torná-las o menor possível e, ao mesmo tempo, de boa qualidade. O tinypng.com é uma boa ajuda para fazer isso facilmente.

+
+ +

Adicionando um logotipo ao cabeçalho

+ +

Dentro do elemento <header>, adicione um elemento <img> que incluirá uma versão pequena do logotipo do Firefox no cabeçalho.

+ +

Adicionando um vídeo ao conteúdo do artigo principal

+ +

No item <article>  (logo abaixo da tag de abertura), incorpore o vídeo do YouTube encontrado aqui: https://www.youtube.com/watch?v=ojcNcvb1olg, usando as ferramentas apropriadas do YouTube para gerar o código. O vídeo terá que ter 400px de largura.

+ + + +

No elemento <div>, na classe further-info você encontrará quatro outros elementos <a> - cada um deles vinculado a uma página interessante relacionada ao Mozilla. Para concluir esta seção, você irá inserir um elemento <img> contendo os atributos src, alt, srcset e sizes de forma apropriada.

+ +

 

+ +

Queremos que cada imagem (exceto quando a mesma for responsiva) use uma imagem de 120px quando a largura da janela de visualização do navegador for menor ou igual a 480px e, em outros casos, escolha uma versão de 400px.

+ +

Verifique se o link correto corresponde à imagem correta!

+ +

 

+ +
+

Nota: Para testar adequadamente os exemplos srcset/sizes, você deve fazer o upload do seu site em um servidor (use as páginas Github, é uma solução simples e livre), e então você poderá testar, se tudo correr corretamente, usando as ferramentas de desenvolvimento, como explicado em Imagens Responsivas: ferramentas úteis para desenvolvedores.

+
+ +

Um panda vermelho criativo

+ +

No elemento <div> da classe red-panda, queremos inserir um elemento <picture> que exiba o o modo retrato do panda se o quadro tiver 600px de largura, ou menos, e o modo paisagem do panda em outros casos.

+ +

Exemplo

+ +

A captura de tela a seguir mostra como a página inicial deve ficar depois de marcada corretamente, com uma tela ampla e outra estreita.

+ +

A wide shot of our example splash page

+ +

A narrow shot of our example splash page

+ +

Avaliação

+ +

Se você está seguindo este estudo como parte de um programa de curso organizado, você deve poder mostrar seu trabalho ao seu professor/mentor para correção. Se você aprender sozinho, você pode obter informações e correções perguntando no tópico sobre este exercício, ou no canal de IRC #mdn no IRC da Mozilla. Tente fazer o exercício primeiro - você não ganha nada enganando!

+ +

{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

+ +
+ + + + + +
-- cgit v1.2.3-54-g00ecf