AÇÕES PROJETO ATCRoteiro Projeto ATC VÍDEO Projeto ATC VÍDEO.
TECNOLOGIA PARA INTERNET I Incluindo Vídeo na Página •Vídeo •Atributos –autoplay: inicia...
Transcript of TECNOLOGIA PARA INTERNET I Incluindo Vídeo na Página •Vídeo •Atributos –autoplay: inicia...
![Page 1: TECNOLOGIA PARA INTERNET I Incluindo Vídeo na Página •Vídeo •Atributos –autoplay: inicia sozinho (mute apenas) –controls: apresenta interface de controle –loop: habilita](https://reader030.fdocumentos.com/reader030/viewer/2022011823/5ed6731b6ff22a66535f5228/html5/thumbnails/1.jpg)
TECNOLOGIA PARA INTERNET I
Prof. Dr. Daniel Caetano
2019 - 2
PÁGINAS WEB ESTÁTICAS TAGS HTML PARTE II
![Page 2: TECNOLOGIA PARA INTERNET I Incluindo Vídeo na Página •Vídeo •Atributos –autoplay: inicia sozinho (mute apenas) –controls: apresenta interface de controle –loop: habilita](https://reader030.fdocumentos.com/reader030/viewer/2022011823/5ed6731b6ff22a66535f5228/html5/thumbnails/2.jpg)
Objetivos
• Conhecer como montar tabelas em HTML – Elementos principais e seu uso
• Compreender o uso de multimídia – Áudio
– Vídeo
• Atividade Aula 4 – SAVA!
![Page 3: TECNOLOGIA PARA INTERNET I Incluindo Vídeo na Página •Vídeo •Atributos –autoplay: inicia sozinho (mute apenas) –controls: apresenta interface de controle –loop: habilita](https://reader030.fdocumentos.com/reader030/viewer/2022011823/5ed6731b6ff22a66535f5228/html5/thumbnails/3.jpg)
Material de Estudo
Material Acesso ao Material
Apresentação http://www.caetano.eng.br/ (Tecnologias para Internet I – Aula 4)
Material Didático Tecnologias Web, págs 66-71
Material Adicional Google: +"HTML5" +tutorial +"pt-br“ http://www.w3.org/ http://validator.w3.org/
![Page 4: TECNOLOGIA PARA INTERNET I Incluindo Vídeo na Página •Vídeo •Atributos –autoplay: inicia sozinho (mute apenas) –controls: apresenta interface de controle –loop: habilita](https://reader030.fdocumentos.com/reader030/viewer/2022011823/5ed6731b6ff22a66535f5228/html5/thumbnails/4.jpg)
RECORDANDO:
ESTRUTURA DE UM HTML
![Page 5: TECNOLOGIA PARA INTERNET I Incluindo Vídeo na Página •Vídeo •Atributos –autoplay: inicia sozinho (mute apenas) –controls: apresenta interface de controle –loop: habilita](https://reader030.fdocumentos.com/reader030/viewer/2022011823/5ed6731b6ff22a66535f5228/html5/thumbnails/5.jpg)
Um documento HTML mínimo
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Um título</title>
</head>
<body>
</body>
</html>
DOCTYPE
<html>
<head>
<body>
<meta>
<title>
https://validator.w3.org/
index.html
![Page 6: TECNOLOGIA PARA INTERNET I Incluindo Vídeo na Página •Vídeo •Atributos –autoplay: inicia sozinho (mute apenas) –controls: apresenta interface de controle –loop: habilita](https://reader030.fdocumentos.com/reader030/viewer/2022011823/5ed6731b6ff22a66535f5228/html5/thumbnails/6.jpg)
Estruturando o Documento
• Cabeçalho
• Barra de Navegação
• Conteúdo
• Rodapé
<header>
<nav>
<section> <article>
<aside>
<footer> ap03ex.html
![Page 7: TECNOLOGIA PARA INTERNET I Incluindo Vídeo na Página •Vídeo •Atributos –autoplay: inicia sozinho (mute apenas) –controls: apresenta interface de controle –loop: habilita](https://reader030.fdocumentos.com/reader030/viewer/2022011823/5ed6731b6ff22a66535f5228/html5/thumbnails/7.jpg)
TABELAS EM HTML
![Page 8: TECNOLOGIA PARA INTERNET I Incluindo Vídeo na Página •Vídeo •Atributos –autoplay: inicia sozinho (mute apenas) –controls: apresenta interface de controle –loop: habilita](https://reader030.fdocumentos.com/reader030/viewer/2022011823/5ed6731b6ff22a66535f5228/html5/thumbnails/8.jpg)
Estruturando uma Tabela
• Em qualquer região do corpo
<table>
<tbody>
<thead> Cabeçalho Cabeçalho Cabeçalho
Cabeçalho Cabeçalho Cabeçalho
Corpo Corpo Corpo
Corpo Corpo Corpo
Rodapé Rodapé Rodapé
Título da Tabela <caption>
<tr>
<th>
<tr>
<td>
<tfoot>
<tr>
<td>
![Page 9: TECNOLOGIA PARA INTERNET I Incluindo Vídeo na Página •Vídeo •Atributos –autoplay: inicia sozinho (mute apenas) –controls: apresenta interface de controle –loop: habilita](https://reader030.fdocumentos.com/reader030/viewer/2022011823/5ed6731b6ff22a66535f5228/html5/thumbnails/9.jpg)
Estrutura da Tabela
• Tabela – Marca a tabela toda
• Título (opcional) – Marca o título da tabela
• Cabeçalho da Tabela – Quando o cabeçalho tem mais de uma linha
• Rodapé – Quando houver um rodapé, quando houver
• Corpo – Quando a tabela tiver cabeçalho e/ou rodapé
<table>
<tbody>
<thead>
<caption>
<tfoot>
![Page 10: TECNOLOGIA PARA INTERNET I Incluindo Vídeo na Página •Vídeo •Atributos –autoplay: inicia sozinho (mute apenas) –controls: apresenta interface de controle –loop: habilita](https://reader030.fdocumentos.com/reader030/viewer/2022011823/5ed6731b6ff22a66535f5228/html5/thumbnails/10.jpg)
Conteúdo da Tabela
• Linha
– Todas as linhas devem ser marcadas
• Célula normal
– Conteúdo da tabela em geral
– Atributo: colspan / rowspan
• Célula de cabeçalho
– Células que indicam o título de uma linha ou coluna
– Atributos: colspan / rowspan / scope (row e col)
<tr>
<th>
<td>
![Page 11: TECNOLOGIA PARA INTERNET I Incluindo Vídeo na Página •Vídeo •Atributos –autoplay: inicia sozinho (mute apenas) –controls: apresenta interface de controle –loop: habilita](https://reader030.fdocumentos.com/reader030/viewer/2022011823/5ed6731b6ff22a66535f5228/html5/thumbnails/11.jpg)
Código Mínimo de uma Tabela
• Tabela <table>
<table> <tr> <th>Nome do Aluno</th> <th>Nota Final</th> </tr> <tr> <td>Sem Dados</td> <td>Sem Dados</td> </tr> </table> ap04ex.html
![Page 12: TECNOLOGIA PARA INTERNET I Incluindo Vídeo na Página •Vídeo •Atributos –autoplay: inicia sozinho (mute apenas) –controls: apresenta interface de controle –loop: habilita](https://reader030.fdocumentos.com/reader030/viewer/2022011823/5ed6731b6ff22a66535f5228/html5/thumbnails/12.jpg)
TAGS DE MULTIMÍDIA
![Page 13: TECNOLOGIA PARA INTERNET I Incluindo Vídeo na Página •Vídeo •Atributos –autoplay: inicia sozinho (mute apenas) –controls: apresenta interface de controle –loop: habilita](https://reader030.fdocumentos.com/reader030/viewer/2022011823/5ed6731b6ff22a66535f5228/html5/thumbnails/13.jpg)
Incluindo Áudio na Página • Audio
• Atributos
– autoplay: toca automaticamente (mute apenas)
– controls: apresenta interface de controle
– loop: habilita repetição automática
– preload: baixar antes de tocar
– muted: inicia com o áudio desligado
– src: endereço com o arquivo de áudio.
<audio>
MP3 OGG WAV
![Page 14: TECNOLOGIA PARA INTERNET I Incluindo Vídeo na Página •Vídeo •Atributos –autoplay: inicia sozinho (mute apenas) –controls: apresenta interface de controle –loop: habilita](https://reader030.fdocumentos.com/reader030/viewer/2022011823/5ed6731b6ff22a66535f5228/html5/thumbnails/14.jpg)
Incluindo Áudio na Página • Audio
– Múltiplas fontes
– Atributos
• src: endereço com o arquivo de áudio
• type: audio/mpeg audio/ogg audio/wav .
<audio>
MP3 OGG WAV
<source>
ap04ex2.html
![Page 15: TECNOLOGIA PARA INTERNET I Incluindo Vídeo na Página •Vídeo •Atributos –autoplay: inicia sozinho (mute apenas) –controls: apresenta interface de controle –loop: habilita](https://reader030.fdocumentos.com/reader030/viewer/2022011823/5ed6731b6ff22a66535f5228/html5/thumbnails/15.jpg)
Incluindo Vídeo na Página • Vídeo
• Atributos – autoplay: inicia sozinho (mute apenas)
– controls: apresenta interface de controle
– loop: habilita repetição automática
– preload: baixar antes de tocar
– poster: imagem de carregamento do áudio
– height: altura do elemento, em pixels
– width: altura do elemento, em pixels
– muted: inicia com o áudio desligado
– src: endereço com o arquivo de áudio.
<video>
MP4
WebM
OGG
![Page 16: TECNOLOGIA PARA INTERNET I Incluindo Vídeo na Página •Vídeo •Atributos –autoplay: inicia sozinho (mute apenas) –controls: apresenta interface de controle –loop: habilita](https://reader030.fdocumentos.com/reader030/viewer/2022011823/5ed6731b6ff22a66535f5228/html5/thumbnails/16.jpg)
Incluindo Vídeo na Página • Vídeo
– Múltiplas fontes
– Atributos
• src: endereço com o arquivo de vídeo
• type: video/mp4 video/webm video/ogg .
<video>
MP4 WebM OGG
<source>
ap04ex3.html
![Page 17: TECNOLOGIA PARA INTERNET I Incluindo Vídeo na Página •Vídeo •Atributos –autoplay: inicia sozinho (mute apenas) –controls: apresenta interface de controle –loop: habilita](https://reader030.fdocumentos.com/reader030/viewer/2022011823/5ed6731b6ff22a66535f5228/html5/thumbnails/17.jpg)
ATIVIDADES
![Page 18: TECNOLOGIA PARA INTERNET I Incluindo Vídeo na Página •Vídeo •Atributos –autoplay: inicia sozinho (mute apenas) –controls: apresenta interface de controle –loop: habilita](https://reader030.fdocumentos.com/reader030/viewer/2022011823/5ed6731b6ff22a66535f5228/html5/thumbnails/18.jpg)
Pesquisa
• Acesse esse documento e leia até o slide 50 https://tinyurl.com/yxg8cosd
![Page 19: TECNOLOGIA PARA INTERNET I Incluindo Vídeo na Página •Vídeo •Atributos –autoplay: inicia sozinho (mute apenas) –controls: apresenta interface de controle –loop: habilita](https://reader030.fdocumentos.com/reader030/viewer/2022011823/5ed6731b6ff22a66535f5228/html5/thumbnails/19.jpg)
Atividade 1 • Desenhe a tabela abaixo, em HTML
![Page 20: TECNOLOGIA PARA INTERNET I Incluindo Vídeo na Página •Vídeo •Atributos –autoplay: inicia sozinho (mute apenas) –controls: apresenta interface de controle –loop: habilita](https://reader030.fdocumentos.com/reader030/viewer/2022011823/5ed6731b6ff22a66535f5228/html5/thumbnails/20.jpg)
Atividade 2 • Procure alguns sons ou vídeos na web
• Crie uma página com o emprego de pelo menos dois itens desse tipo.
![Page 21: TECNOLOGIA PARA INTERNET I Incluindo Vídeo na Página •Vídeo •Atributos –autoplay: inicia sozinho (mute apenas) –controls: apresenta interface de controle –loop: habilita](https://reader030.fdocumentos.com/reader030/viewer/2022011823/5ed6731b6ff22a66535f5228/html5/thumbnails/21.jpg)
CONCLUSÕES
![Page 22: TECNOLOGIA PARA INTERNET I Incluindo Vídeo na Página •Vídeo •Atributos –autoplay: inicia sozinho (mute apenas) –controls: apresenta interface de controle –loop: habilita](https://reader030.fdocumentos.com/reader030/viewer/2022011823/5ed6731b6ff22a66535f5228/html5/thumbnails/22.jpg)
Resumo e Próximos Passos • Tabelas são bem flexíveis
• Há marcações diversas envolvendo tabelas
• NÃO use para layout!
– Veremos como fazer a partir da próxima aula!
• TAREFA: Use as tags que aprendemos para incrementar seu site!
• Começando a trabalhar visualmente! – O que é esse tal de CSS?!
![Page 23: TECNOLOGIA PARA INTERNET I Incluindo Vídeo na Página •Vídeo •Atributos –autoplay: inicia sozinho (mute apenas) –controls: apresenta interface de controle –loop: habilita](https://reader030.fdocumentos.com/reader030/viewer/2022011823/5ed6731b6ff22a66535f5228/html5/thumbnails/23.jpg)
PERGUNTAS?