Construção de Software para Web Flashcards

1
Q

Quais são as vantagens e desvantagens do JPEG?

A

JPEG (Joint Photographic Expert Group):

Vantagem: opção popular para imagens fotográficas, suporta uma ampla gama de
cores, permite uma alta taxa de compressão sem perda de qualidade, Pode muito ser
comprimidas sem perda de qualidade, boa para reduzir tamanho de arquivos, bom
tempo de carregamento da página.

Desvantagens: não suporta transparência e pode apresentar pixels artificiais em áreas
com cores uniformes ou gradientes suaves, Além disso, a compressão excessiva pode
resultar em perda de qualidade da imagem.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Quais são as vantagens e desvantagens do PNG?

A

PNG (Portable Network Graphics):

Vantagem: O formato PNG é uma opção popular para imagens que exigem transparência, como ícones e gráfico, suporta transparência sem fundo, capaz de armazenar múltiplas camadas de informações, suporta compressão sem perda de qualidade, reduzindo o
tamanho de bits do arquivo, criado em 1986, pela W3C.

Desvantagens: o PNG pode ter um tamanho de arquivo maior do que outros formatos de
imagem, como JPEG, o que pode afetar negativamente o tempo de carregamento da
página

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Quais são as vantagens e desvantagens do GIF?

A

Vantagem: é um formato de gráfico vetorial baseado em XML, ele é escalável sem perda
de qualidade, podem ser redimensionados sem perda de qualidade. pode ser animado e
estilizado com CSS, oportunizando criação de gráficos interativos.

Desvantagens: SVG pode ser mais complexo de criar e editar, alguns navegadores antigos
podem ter dificuldades para exibir imagens SVG corretamente.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Quais são os sites de imagens com domínio público?

A

Existem vários sites que oferecem imagens de domínio público para serem usados em seus projetos. Algumas imagens deixam você usar a arte apenas se o artista for creditado em um texto localizado, outras imagens precisam ser de domínio público. Alguns site de imagens com domínio público são:
* UnSplash
* Pexels
* FreePik
* Rawpixel
* Pixabay
* Libreshot
* Wikimedia Common

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Como colocar ícone no cabeçario?

A

link favicon

Um favicon é um pequeno ícone de 16×16 pixels que serve como marca para o seu site. Seu principal objetivo é ajudar os
visitantes a localizar sua página com mais facilidade quando eles têm várias guias abertas. Devido ao seu tamanho minúsculo, os favicons funcionam melhor como imagens simples ou com um a três caracteres de texto.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Como colocar imagem no HTML?

A

<img></img>

o atributo alt fornece uma descrição da imagem para usuários com deficiência visual ou para navegadores que não conseguem exibir a imagem

Figuras e Legendas: são uma maneira eficaz de apresentar imagens de forma clara e organizada em uma página web, nelas fornecemos informações adicionais sobre a imagem e torná-la mais significativa
para o usuário

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Como colocar figuras e legendas nas imagens no HTML?

A

Figuras e Legendas: são uma maneira eficaz de apresentar imagens de forma clara e organizada em uma página web, nelas fornecemos informações adicionais sobre a imagem e torná-la mais significativa
para o usuário.

<figure>
<img></img>
<figcaption>Alunos do primário.</figcaption>

</figure>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Como fazer a alteração da imagem dependendo do tamanho da tela?

A

<picture>
<source></source>
<source></source>
<img></img>
</picture>

Telas pequenas: Definir a imagen srcset=”imagem-pequena.png” e o atributo media=”(max-width: 767px)”,
será usado em telas com largura máxima de 767 pixels.
Telas grandes: Definir a igema srcset=”imagem-grande.png” e o atributo media=”(min-width: 768px)”, será
usado em telas com largura mínima de 768 pixels.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Como colocar emoji no HTML pelo Unicode?

A

Copiar o código e colocar “&#x” antes.

ex.: &#x1F47D

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Quais são os tipos de comandos de texto para fazer hierarquia no HTML?

A

h1, h2,h3,h4,h5,h6

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Como escrever um texto em itálico nas versões forma e semântica no HTML?

A

Forma: <i>
Semântica: <em></em></i>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Como escrever um texto em negrito nas versões forma e semântica no HTML?

A

Forma: <b>
Semântica: <strong></strong></b>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Como escrever um texto Grande nas versões forma e semântica no HTML?

A

Forma: <big>
Semântica: Usar no CSS</big>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Como escrever um texto pequeno nas versões forma e semântica no HTML?

A

Forma: <small>
Semântica: <small></small></small>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Como escrever um texto deletado nas versões forma e semântica no HTML?

A

Forma: <striker>
Semântica: <dell></dell></striker>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Como escrever um texto inserido nas versões forma e semântica no HTML?

A

Forma: <u>
Semântica: <ins></ins></u>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Como escrever um texto sobrescrito nas versões forma e semântica no HTML?

A

Forma:
Semântica:

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Como escrever um texto subscrito nas versões forma e semântica no HTML?

A

Forma:
Semântica:

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Como escrever um trecho de código nas versões forma e semântica no HTML?

A

Forma: <pre> <code>
Semântica: <pre> <code></code></code>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Como fazer uma lista não ordenada no HTML?

A

No html devemos utilizar a tag

<ul> unOrder List para cada item
devem ser utilizado a tag <li> list
item.

para personalizar, colocar "type" na tag: Cycle, square, 1, I...
</li></ul>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Como fazer uma lista definição no HTML?

A

Quando preciso fazer um dicionário, lista com sigla e descrição abrir a tag<dl>

dt (Definition Term) e o <dd> (Descrition)

Ex:

<dl>
<dt>HTML</dt>
<dd>Linguagem de marcação para criação do conteúdo de um site</dd>
<dt>Javascript</dt>
<dd>Linguagem de programação para a
criação interativa de um site</dd>
<\dl>
</dl>

21
Q

Como fazer uma tabela no HTML?

A

Abrir a tag <table border="1"> - Criar uma borda

<thead> - cabeçario
<tr> Qualquer linha
<th> - Texto do cabeçario
<tbody - Corpo da tabela
<td> Texto da tbody e do tfoot
<tfoot> rodapé
</tfoot></td></th></tr></thead>

22
Q

O que significa rowspan e colspan no HTML?

A

Utilizado para mesclar linhas ou colunas (agrupamento)

Isso é feito com os atributos rowspan (vertical) e colspan (horizontal) dos elementos <th> e <td>

23
Q

Como fazer um link externo?

A

<a> algo </a>

24
Qual a propriedade de um link externo para abrir o link em uma nova janela em branco?
target= "_blank"
25
Qual a propriedade de um link externo para abrir o link na janela ou frame atual (padrão)?
target="_self"
26
Qual a propriedade de um link externo para desfazer todos os frames e abrir o destino no navegador completo?
target="_top"
27
Qual a propriedade de um link externo similar ao uso do _top em uma referência à janela mãe?
target="_parent"
28
Qual a propriedade de um link externo caso esteja usando frames, indicar o nome da janela a abrir?
target="nome-do-frame"
29
Qual a propriedade de um link que indica a linguagem principal do site que o link indica?
Hreflang = “pt-br“
30
Como fazer um link interno?
31
O que significa"./" e "../"?
“./” – Indica a partir deste nível “../” – Indica a partir do nível anterior
32
Como adicionar link patrocinado?
Target = “_black” – abre na mesma janela Rel = “nofollow” – define para o buscador que é uma página de propaganda, de responsabilidade de outro site
33
Como fazer link de download?
donwload = “file-name” – define que o arquivo será salvo localmente sugerindo um nome type = “application/pdf” – define que o arquivo em questão é um pdf application/zip ‣ text/html ‣ text/css ‣ text/javascript ‣ video/mp4 ‣ video/H264 ‣ video/JPEG ‣ audio/aac ‣ audio/mpeg ‣ font/ttf ‣ image/jpeg ‣ image/png
34
para adicionar um audio, o que é um preload?
‣ O atributo preload indica se o áudio será pré-carregado ou não e aceita três valores: * metadata: Carrega apenas as informações sobre o arquivo (tamanho, tempo, informações de direitos, etc) * None: não vai carregar nada até que o usuário clique no botão play ou um script inicie a reprodução * auto (padrão): carregar o arquivo de áudio inteiro assim que a página for carregada, mesmo que o usuário não aperte o play
35
para adicionar um audio, o que é um controls?
‣ controls: apresentar o player na tela. Caso não seja colocado na tag
36
para adicionar um video, o que é o atributo width?
indica a largura que o vídeo vai ter na tela. Nesse exemplo, 600px.
37
para adicionar um video, o que é o atributo poster?
configura uma imagem que vai aparecer como uma capa, enquanto o visitante não aperta o play para reproduzir o vídeo;
38
para adicionar um video, o que é o atributo controls?
configura se os controles do vídeo vão aparecer na parte inferior da mídia. Por padrão, os controles não aparecerão, mas basta colocar a palavra controls na tag
39
para adicionar um video, o que é o atributo autoplay?
diz para o navegador se o vídeo vai começar a tocar automaticamente, assim que a página for carregada.
40
Pq é melhor incorporar videos (do youtube, por exemplo) do que colocar vídeos armazenados no seu servidor?
Vídeos armazenados no seu servidor pode ficar caro. Vamos fazer uma conta simples: um vídeo simples, com poucos minutos, em formato mp4 com codec padrão deve ocupar uns 150MB com facilidade. Agora imagine que você lance seu site e 200 visitantes (um número super possível) acessem seu site e reproduzam o vídeo. Pronto, você acabou de utilizar 29GB de tráfego! Imagine o quanto isso pode deixar seu site lento ou consumir sua franquia de hospedagem, caso não seja ilimitada.
41
Como incorporar vídeos do youtube (ou de outro site)?
1) Vá até o vídeo que você deseja colocar no seu site 2) Selecione a opção compartilhar e incorporar 3) Copie o código gerado 4) Cole na sua página html
42
O que é CSS?
Cascading Style Sheets ( CSS ) é uma linguagem de folha de estilo usada para especificar a apresentação e o estilo de um documento escrito em uma linguagem de marcação como HTML ou XML LEMBRE-SE! A CSS está diretamente ligado a Semântica no HTML.
43
Quais são os 3 tipos de CSS?
CSS externo = use sempre que puder CSS interno = use para pequenas configurações CSS inline = procure evitar
44
Como usar o CSS
In line: abrir um atributo style na tag. interno: abrir uma tag style na head externo: escrever as tags em um arquivo css com suas respectivas informações
45
Como capturar uma cor na internet?
extensão colorzilla
46
como adicionar uma cor no CSS?
abrir um atributo color, colocar o nome da cor ou seu código RGB
47
Como usar o Gradiente em CSS?
background-image: liner-gradient (90deg, pink, red)
48
Como colocar fonte no CSS?
font-family
49
Qual a diferença de RGB e HSL?
O padrão RGB (Red, Green, Blue) é um modelo de cores que representa a maneira como o olho humano percebe as cores. Ele combina três cores primárias: vermelho, verde e azul. Cada uma dessas cores pode ter um valor que varia de 0 a 255, permitindo a criação de uma ampla gama de cores. O padrão HSL (Hue, Saturation, Lightness) é uma maneira de representar cores que se baseia na percepção humana. 1.Hue (Matiz): Representa a cor em si, variando de 0 a 360 graus no círculo de cores. Por exemplo, 0° é vermelho, 120° é verde e 240° é azul. 2.Saturation (Saturação): Representa a intensidade da cor, variando de 0% (cinza) a 100% (cor pura). 3.Lightness (Luminosidade): Representa a clareza da cor, variando de 0% (preto) a 100% (branco). body { background-color: hsl(210, 50%, 50%); /* Azul médio */ }
50
como colocar uma caixa com sombra no CSS?
box-shadow: 0 0 0 0 black ( define uma sombra, para a caixa ou div. * Os parâmetros (sem virgulas): * Tamanho para baixo * Tamanho para o lado * Espalhamento da sombra * Cor da Sombra */) Os conteúdos precisam estar em uma main no HTML Width: 0px * Tamanho da caixa de texto ou div Padding:0px * acolchoamento, ou margem interna da div