Revisão AV1 - Design centrado no ser humado (4)

Prévia do material em texto

Revisão teórico e prática AV1
Disciplina: Design centrado no ser humano
Prof. Flávia Agostinho - Abril/2022
1) Indique qual a sintaxe e para que serve, no HTML, os 
códigos fonte das seguintes tags:
A. <frame>
B. <iframe>
C. <video>
Teste os códigos sintaxe com exemplos práticos
Resolução da questão 1 <frame>
A <frame> tag foi usada no HTML 4 para definir uma janela específica 
(frame) dentro de um <frameset>.
Use a tag <iframe> para incorporar outro documento no documento 
HTML atual:
<iframe src="https://www.w3schools.com"></iframe>
https://www.w3schools.com/tags/tag_iframe.asp
Resolução da questão 1 <iframe>
 
A <iframe> é uma tag que serve para embutir um quadro.
<iframe src="https://www.w3schools.com" title="W3Schools 
Free Online Web Tutorials"></iframe>
https://www.w3schools.com/tags/tag_iframe.asp
Resolução da questão 1 <video>
 
A <video> é uma tag que serve para reproduzir um vídeo.
<video width="320" height="240" controls>
 <source src="movie.mp4" type="video/mp4">
 <source src="movie.ogg" type="video/ogg">
 Your browser does not support the video tag.
</video>
https://www.w3schools.com/tags/tag_video.asp
https://www.w3schools.com/tags/tag_video.asp
2) Em uma página HTML, exemplique como 
realizar os seguintes comandos:
a) Inserção de imagem.
b) Inserção de link.
c) Definição de parágrafo.
d) Definição de título.
e) Definição de tabela.
Resolução da questão 2 - Inserção de imagem
A <img>tag é usada para incorporar uma imagem em uma página HTML, essa tag cria um 
espaço de retenção para a imagem referenciada.
A <img>tag tem dois atributos obrigatórios:
● src - Especifica o caminho para a imagem
● alt - Especifica um texto alternativo para a imagem, se a imagem por algum motivo 
não puder ser exibida
Nota: Além disso, sempre especifique a largura e a altura de uma imagem. Se a largura e a 
altura não forem especificadas, a página poderá piscar enquanto a imagem é carregada.
Dica: Para vincular uma imagem a outro documento, simplesmente aninhe a <img>tag 
dentro de uma tag <a> 
<a href="https://www.w3schools.com"><img src="/Users/Flavia/Desktop/farol.png" 
alt="W3Schools.com" width="100" height="132"> </a>
https://www.w3schools.com/tags/tag_a.asp
Resolução da questão 2 - Inserção de link
A tag define um hiperlink, que é usado para vincular uma página a 
outra.
O atributo mais importante do <a> elemento é o href atributo, que 
indica o destino do link.
<a href="https://www.w3schools.com">Visit W3Schools.com!</a>
Resolução da questão 2 - Definição de parágrafo
A <p>tag define um parágrafo.
https://www.w3schools.com/tags/tag_p.asp
Resolução da questão 2 - Definição de título
A <title> tag define o título do documento. O título deve ser somente 
texto e é mostrado na barra de título do navegador ou na aba da 
página.
https://www.w3schools.com/tags/tag_title.asp
Resolução da questão 2 - Definição de tabela
A <table>tag define uma tabela HTML.
Uma tabela HTML consiste em um <table>elemento e um ou mais 
elementos <tr> , <th> e <td> .
O elemento <tr> define uma linha de tabela, o elemento <th> define 
um cabeçalho de tabela e o elemento <td> define uma célula de tabela.
Uma tabela HTML também pode incluir elementos <caption> , 
<colgroup> , <thead> , <tfoot> e <tbody> .
https://www.w3schools.com/tags/tag_table.asp
https://www.w3schools.com/tags/tag_tr.asp
https://www.w3schools.com/tags/tag_th.asp
https://www.w3schools.com/tags/tag_td.asp
https://www.w3schools.com/tags/tag_caption.asp
https://www.w3schools.com/tags/tag_colgroup.asp
https://www.w3schools.com/tags/tag_thead.asp
https://www.w3schools.com/tags/tag_tfoot.asp
https://www.w3schools.com/tags/tag_tbody.asp
3) Em uma página web criada com HTML5 e CSS3, responda:
a) Para que serve a configuração CSS3 de borda
b) Para que serve o atributo titles.
c) Para que serve os elementos img com ou sem string.
Teste os códigos sintaxe com exemplos práticos
Resolução da questão 3 
Teste esse código exemplo para responder
4) ENADE 2021 - O processo de Estratégia Centrado no Ser Humano 
Human-Centered Design) começa com um Desafio Estratégico específico e 
continua por três fases principais: Ouvir (Hear), Criar (Create) e Implementar 
(Deliver). Durante o processo, o pensamento se alterna do concreto ao abstrato, 
na identificação de temas e oportunidades e, mais tarde, de volta ao concreto, 
com soluções e protótipos. Especifique o que acontece em cada uma das três 
fases