Aula 0

O que vamos aprender no módulo 1?

Conceitos básicos, preparação do ambiente, semântica da HTML5, textos, títulos, ligações, multimídea, estilos.

Aula 1

Precisamos fazer um acordo

• É necessário foco.
• Não ficar em redes sociais
• Não ficar fazendo coisas pela casa ou coisas do tipo enquanto a aula tá tocando
• Se possível, ficar em um cômodo mais sossegado para conseguir prestar atenção nas aulas
• Vai ser necessário notebook/computador e caderno

Repositório grátis: gustavoguanabara.github.io

Aula 2

Será que este curso é para mim?

Sim, este curso é para mim se...

• me interesso por aprender a criar sites, mas não sei por onde começar.
• já tentei, mas acho confuso "decorar" tantos comandos.
• tenho boa base, mas quero me aprofundar nas especificações.
• consigo adaptar códigos prontos, mas não sei criar os meus próprios sites.
• estou tendo essa disciplina e estou com dificuldades.
• além de aprnder a criar sites, quero deixá-los na Internet.

Não, este curso não é para mim se...

• eu já sei tudo sobre desenvolvimento HTML5 e CSS3.
• estou procurando por códigos prontos e templates para sites.
• estou com pressa e preciso aprender em poucas semanas.
• quero apenas uma lista de comandos, sem "papinho" extra.
• não consigo esperar o lançamento de aulas semanais.
• prefiro consultar a documentação oficial das linguagens.

Aula 3

Melhores livros para aprender HTML5 e CSS3

Primeiramente vamos ter o material de apoio do próprio curso que está em pdf neste link.

Vamos também ter as seguintes referências online:

• MDN
• W3C
• WHATWG Living Standard
• W3 Schools

E por último, vamos ter este livros:

Estes sendo sobre código.
• A série do O'Reilly
• HTML5 e CSS3 dos autores Elizabeth Castro & Bruce Hyslop na editora Alta Books
• HTML5 e CSS3 do autor Jon Duckett na editora Alta Books
• Use a cabeça! HTML e CSS dos autores Elisabeth Robson & Eric Freeman na editora Alta Books
• Crie seu próprio site dos autores Nate Cooper & Kim Gee na editora Novatec
• Os livros do autor Maurício Samy Silva na editora Novatec

E estes sendo sobre design.
• Curso de design gráfico dos autores David Dabner, Andra Stewart & Eric Zempol na editora GG
• Design dos autores Bob & Maggie Gordon na editora Senac
• A psicologia das cores da autora Eva Heller na editora GG
• Pensar com Tipos da autora Ellen Lupton na editora GG

Aula 4

Como a internet chega na minha casa?

Como esse vídeo foi meio denso e o pdf tem ainda mais conteúdo sobre o assunto, é melhor assistir diretamente ao vídeo e ,depois ou ao mesmo tempo, ler o pdf. (tbm tô com preguiça de digitar tudo aquilo kkkkk)

Também tem a qustão que daqui pra frente os pdf vão ser muito necessários. Seja pra revisão ou pra complementar as aulas.

Aula 1

Como a internet funciona?

bit = 0 ou 1
byte = 8 bits

MB (megabytes - armazenamento) ≠ Mb (megabits - transmissão)

1024 = 2¹⁰
1024 bytes = 1 KB
1024 KB = 1 MB
1024 MB = 1GB
1024 GB = 1 TB

Este exemplo é de notebook/computador.

Cliente(eu) --- Modem(geralmente conectado ao cabo telefônico ou no cabo da TV)(ele quem faz a "tradução" entre o cliente e os cabos já que o cliente fala em ondas quadradas e os cabos, em ondas senoidais) --- os cabos --- internet --- servidor(IPs)

modulação - tradução de ondas quadradas em ondas senoidais.
demodulação - tradução de ondas senoidais em ondas quadradas.

ip local geralmente continua o mesmo, já o ip público, troca frequentemente.

DNS - domain name system
tipo uma "agenda" para lembrar de ips pelo nome e não pelo o número, pois muda bastante.

Aula 2

O que é domínio e hospedagem?

Situação 1 : Guardado no servidor

Tô com preguiça de fazer o desenho da situação 2 e 3. Outro dia faço.

gustavoguanabara.github.io = URL

url é a ponte para o DNS e ele vai te dar o IP do servidor para você ter acessa à ele.

para ter acesso você precisa de um DOMÍNIO

.github.io

para outras pessoa poderem acessar o site, é preciso um domínio

é prciso de um "lugar para guardar" os arquivos à serem acessados: hospedagem

Domínio - nome que identifica o seu site.
• nome único
• pago anualmente
• vários TLDs

Hospedagem - local onde o site vai estar armazenado
• espaço para armazenar arquivos
• pago mensalmente
• espaço, memória

TLD - Top level domain

www. - sub-domínio principal do meu domínio

/gustavoguanabara - depois da barra é o caminho

Exemplo: gustavoguanabara . github . io -> URL

http:// - protocolo

https:// - protocolo com segurança (cadeado)

Aula 1

A diferença entre HTML, CSS & Javascript

"Eu programo em HTML e CSS"

• desenvolvo
• crio sites

a HTML
as CSS

HTML
• Hypertext - text that has a highlight that takes you to another text "link"
• Markup - marcação
• Language - linguagem de marcação ≠ linguagem de programação

CSS - Cascading Style Sheets - folhas estilo em cascata - uma folha modifica a característica padrão da outra

HTML é focado em conteúdo:
• texto
• imagens
• links
• tabelas
• listas

CSS é focado em design:
• cores
• posição da imagem, tamanho
• sombra
• tamanhos
• posicionamento

JS é focado em interação:
• menus interativos
• animações
• popups
• validações ex:esse usuário está inválido.

Como funciona a HTML e as CSS?

O PC traz uma cópia do HTML e CSS para si e é disponibilizado ao navegador

Aula 2

Front-end, Back-end & Full Stack

servidor - entregar os dados ao cliente

site estático - o site não muda de cliente para cliente

Loja(site) de camisas; se o site for estático, ele não vai saber que produtos por ali e quais produtos ter no estoque

imagina que o dono da loja ter entrar no código para mudar a quantidade do estoque ou adicionar/retirar um produto e promoções

fazer uma loja virtual somente com tecnologias client-side é praticamente suícido

hoje em dia as informações sobre o que tá de promoção, qual o preço, promoções de comprar em quantidade, quais cores e tamanhos, quais coisas acabaram em estoque e entre outras coisas, isso tudo está armazenado no servidor; serve-side dentro de um banco de dados

nesse caso:

o site vai enviar uma solicitação ao servidor, dentro do servidor, a linguagem php vai fazer requisição ao banco de dados, tipo verificar na página principal quais camisetas tem que aparecer, quais as camisetas que estão de promoção, quais que são para ficar de destaque

o php vai obter essas informações, vai gerar uma página html puro com essas informações com fotos, a descrição delas, tamanhos, cores e preço e enviar esse html junto com o estilo e interação pro cliente e com essas informações a página vai poder apresentar as camisetas certinho na página inicial.

quando uma pessoa se tornar um desenvolvedor front-end e backend, o mercado se tornar fuul stack. ser desenvolvedor full stack demora anos porque é muita coisa para lembrar e conhecer.

Aula 1

Instalando todas as ferramentas

ensinou a abaixar o chrome e o vs studio

Aula 2

Seu primeiro código HTML

<hr> - linha horizontal (separação do título do resto)

Aula 1

Parágrafos e Quebras

<p> </p> -> eles são tags, mas se quiser que apareça no site para uma explicação ou algo assim:

&.l.t(;) & &.g.t(;) - só tirar parênteses e os pontos finais

Aula 2

Símbolos e Emojis

&.l.t.(;) - less then
&.g.t.(;) - greater then

- comentário (não aparece no site)(tirar pontos)

para adicionar símbolos:
&___(;)

ex: &euro(;)(€), &delta(;)(δ), &Delta(;)(Δ), &uparrow(;)(↑) ou uarr;

para emojis:
&#x___(;)

ex: &.#.x.1.F.5.9.6.;(🖖), &.#.x.1.F.9.1.3.;(🤓) - (tira os pontos finais para funcionar)

Aula 1

Você tem o direito de usar qualquer imagem no seu site?

ao fazer uma pesquisa por foto no google, embaixo da barra de pesquisa, tem a barra de "imagens, vídeos, notícias, .. etc" e embaixo dessa tem a da "tamanho, cor, direitos de uso, .. etc". Clicar nos direitos vai ter essas opções:

• Sem filtro de licença - sem filtro mesmo
• Marcadas para reutilização com modificações - pode usar para o que quiser e pode modificar a foto, mas as fotos que tem são meio ruin s
• Marcadas para reutilização - pode usar, mas sem modificar
• Marcadas para reutilização não comercial com modificações - não pode usar se o intuito é vender/fazer dinheiro, mas pode modificar
• Marcada para reutilização não comercial - não fazer dinheiro com ele e nem modificar

Sites bons para pegar imagens:
• unsplash.com(em inglês)
• pexels.com

Aula 2

Quais são os formatos para imagens para Web?

• jpeg - melhor / alta compactação / mais leve
• png - transparência / compacto / mais qualidade
• gif - transparência / animação, mas a qualidade da imagem não é muito boa

fotos muito grandes? jpeg
foto que mostre o fundo(o que está atrás da imagem)? png

quanto mais leve, melhor porque não é todo mundo que tem internet boa

Aula 3

O tamanho das imagens inporta para um site?

o professor ensinou com remendicionar as imagens no Gimp

Aula 4

A tag <img> em HTML5

aprendi a por uma imagem no site a partir de uma pasta no notebook de uma pasta dentro da pasta e a partir de um link da internet

Exemplos:
• <img src="teste-imagem.png" alt="uma imagem com a palavra teste">
• <img src="/imagens/teste-imagem.png" alt="uma imagem com a palavra teste">
• <img src="www.istockphoto.com/br/foto/palavra-de-teste-em-cubos-de-madeira-em-fundo-azul-claro" alt="uma imagem com a palavra teste">

Aula 5

Como mudar o favicon de um site

favicon é aquela imagem que fica na aba da página.

• www.iconarchive.com - archive of icons que deixa baixar em .ico
• www.favicon.io - fazer texto virar icon; imagem -> icon; emoji -> icon
• www.favicon.cc - site para fazer um icon no pixel art

embaixo do <meta name="viewport" content="width=device-width, initial-scale=1.0"> no <head> põe link e depois escolhe o link:favicon

não esquecer o Ctrl + espaço para ver a lista de coisas dentro da pasta que contém o exercício parapoder escolher certinho o que precisar

Aula 1

Hierarquia de títulos

h1 - h6
• h1 -> título
• h2 -> sub-título
• h3 -> sub-título do sub-título
• h4 -> sub-título do sub-título do sub-título
• h5 -> sub-título do sub-título do sub-título do sub-título
• h6 -> sub-título do sub-título do sub-título do sub-título do sub-título

<p>lorem ipsum</p> -> texto aleatório para testes

Aula 1

Semântica na HTML é importante

HTML5 -> focado em semântica; significado e não foca mais na forma

CSS3 -> focado na forma; detalhes, como: fonte, tamanh de letra, cor da página, etc)

HTML5 and CSS3 Obsolete tags

não usar a tag <u> mais para sublinhar porque isso é forma e não semântica. Mas se for enderenço, usar: <address>

tags que são não conformidades podem parar de funcionar a qualquer hora

Aula 2

Negrito e itálico do jeito certo

<b> - bold; não semântico
<strong> - strong; semântico

<i> - italic; não semântico
<em> - emphasis; semântico

Aula 3

Formatações adicionais em HTML

para selecionar uma palavra ou parte de uma frase ou a frase em si para adicionar uma tag específica usar: Ctrl + shift + p

<mark> - marcatexto

para mudar a cor do marcatexto:
<mark style="background-color: nome-da-cor;">

como o style está dentro de uma tag, só esse mark vai ser modificado. Mas se quiser mudar a cor de todos os marks de só uma página e não do site todo:
de baixo do <title>
<style>
mark{
background-color: cor;
}

• <big> - deixa a letra grande, mas essa tag está obsoleta
• <small> - deixa a letra pequenininha e não está obsoleta
• <del> - texto deletado
• <ins> - texto inserido
• <sup> - x²⁰+3
• <sub> - H₂O

Aula 4

Citações e códigos

• <code> - fonte monoespaçada; melhor para a leitura de códigos
• <pre> - mantém a formatação do código

Exemplo:

(sem o <code>)O comando document.getElementById('teste') é escrito em linguagem JavaScript.

(com o <code>)O comando document.getElementById('teste') é escrito em linguagem JavaScript.

Exemplo 2:

só com <code>

com <code> e <pre>

            <code>
              num = int(input('Digite um número'))
              if num % 2 == 0:
                print(f'0 número {num} é PAR')
              else:
                print(f'0 número {num} é ÍMPAR')
              print('Fim do programa')
            </code>
            

• <q> - citar (" ") algo que foi dito por outra pessoa. Citação Simples
• <blockquote> - quebra de linha e se desloca um pouco para direita; faz uma citação de maneira mais completa, pois é possível por o link de onde foi tirado a informação. Citação completa

Exemplos:

<p>Como diria o pai de um amigo: <q>o computador é um burro muito rápido</q></p>

<p>According to Jeff Noble, in his book HTML, XHTML and CSS for dummies:</p>

The difference between inline elements and a block of text is important. HTML elements in this chapter describe blocks of texts.

• <abbr title> - abrevia

exemplo:

<abbr title="Hypertext Markup Language">HTML</abbr>

esse pontilhado aparece e ao por o mouse em cima da abreviação você pode ver o que quer dizer ela

• <bdo dir="rtl"> - deixa a frases ao contrário (<bdo dir="ltr"> deixaria a frase do jeito normal)

<p><bdo dir="rtl">deixa a frases ao contrário</bdo></p>

Aula 1

Listas OL e UL

• <ol> - ordered lists
• <ul> - unordered lists
• <li> - list items

<ol type=" ">
1. "1" - numbers(padrão) start="5"
2. "a" - lowercase lettlers
3. "A" - uppercase lettlers
4. "i" - lower roman numerals
5. "I" - upper roman numerals

<ul type=" ">
• "disc" - padrão. uma bolinha preta
• "circle" - um círculo
• "square" - um quadrado

Aula 2

Listas mistas e de definição

<ol type="a" start="5"> para começar no "e"

<ol>
1. <li>Item 1</li>
2. <li>Item 2</li>
<ol type="a">
1. <li>Item 2.1</li>
2. <li>Item 2.2</li>
3. <li>Item 2.3</li>
</ol>
3. <li>Item 3</li>
4. <li>Item 4</li>
5. <li>Item 5</li>

para poder fazer uma mudança(deletar ou adicionar) numa tag:
clicar na frente da letra que quer modificar e segurar a tecla "Alt" e depois clicar no lugar que precisar.

• <dl> - difinition list; tipo um dicionário
• <dt> - termo
• <dd> - descrição

o google dá prioridade para sites que contém dls

Aula 1

Links e âncoras em HTML5

esse conteúdo vem diretamente dos pdfs

Toda vez que você está acessando um site e clica em um local para ir para outra página, outro site ou até para baixar um arquivo, você está interagindo com um hyperlink

Para criar um hyperlink, devemos criar âncoras através da tag <a>. O principal atributo dessa tag é o href que cria uma referência hypertexto. Vamos fazer um exemplo simples:

              
               <h1>Vamos criar um link</h1>
                <a href="https://gustavoguanabara.github.io">Acecesse meu perfil Github</a>
              
            

Outro atributo bem útil da tag de âncora é o hreflang, que permite indicar qual é o idioma principal do site para onde o link está desviando o fluxo de navegação. Isso vai permitir avisar ao navegador e a softwares de tradução como lidar caso o visitante opte por traduzir automaticamente os conteúdos.

Mira no Alvo 🎯

Por padrão, sempre que um visitante clique em um hyperlink, o site de destino abre na mesma janela do site que continha esse link. Ou seja, o conteúdo anterior vai deixar de ser exibido para mostrar o novo conteúdo.

Esse é um comportamento desejado quando o visitante vai continuar a visitar o nosso site, apenas mudando de um documento para outro. Mas e quando um clique leva o visitante para outro site e provavelmente ele nunca mais voltará ao nosso?

Para poder controlar onde o site de destino vai abrir, podemos usar o atributo target, que suporta os seguintes valores:

1. ‣_blank vai abrir o link em uma nova janela em branc
2. ‣_self vai abrir o link na janela ou frame atual (padrão)
3. ‣_top vai desfazer todos os frames e abrir o destino no navegador complet
4. ‣_parent similar ao uso do _top em uma referência à janela mãe
5. ‣nome-do-frame caso esteja usando frames, indicar o nome da janela a abrir

Como o uso de frames é uma técnica quase em desuso, vamos nos basear apenas nas duas primeiras opções _blank e _self.

            
             <a href="pagina2.html" target="_self">Continuar navegando no site</a>
             <a href="https://gustavoguanabara.github.com" target="_blank">Abrir perfil GitHub em nova janela</a>
            
            

Esse link é seu ou dos outros?

Existe um recurso bem interessante para links que é indicar qual é a natureza do destino usando o atributo rel. Esse atributo aceita vários valores, entre eles vou citar:

1. ‣next indica que o link é para a próxima parte do documento atual
2. ‣prev indica que o link é para a parte anterior do documento atual
3. ‣author indica que é um link para o site do autor do artigo atual
4. ‣external indica que é um link para outro site que não faz parte do site
5. nofollow indica que é um link para um site não endossado, como um link pago

            
             <а href="pagina2.html" target="_self" rel="next">Continuar navegando no site</a> 
             <a href="https://gustavoguanabara.github.com" target="_blank" rel="external">Abrir perfil GitHub em nova janela</a>
            
            

No código anterior, o primeiro link é o que chamamos de link local ou link interno, já que ele leva o visitante a outra página dentro do nosso próprio site. Note que não é necessário nem indicar a URL completa nesses casos.

Já o segundo link vai nos levar para um outro site, o que chamamos de link externo. Nestes casos, devemos indicar a URL completa, incluindo o protocolo http:// ou https:// e o caminho que leve à uma página específica, se for necessário.

Aula 2

Links internos

Ctrl + espaço no visual code te mostra quais páginas tem para você escolher

Aula 3

Links para download

esse conteúdo vem do pdf

E para fazer Downloads?

Outra coisa que aparece bastante em sites são os links para efetuar download de algum material em PDF, ou de um arquivo ZIP qualquer. A partir da versão HTML5, as âncoras receberam atributos especiais para isso. Basta fazer o link diretamente para o arquivo que se deseja efetuar o download e adicionar o atributo download com o valor configurado para o nome do arquivo a ser baixado e o atributo type para indicar ao navegador que tipo de arquivo está sendo baixado. Vamos ver um exemplo:

tem navegadores que não baixam mesmo tendo esses paremetros, então é só clicar no botão direito do mouse e clicar em "salvar link como..." e aí ele baixa.

Aqui vão alguns media types bem usados no nosso dia-a-dia:

• application/zip
• application/pdf
• text/html
• text/css
• text/javascript
• font/ttf
• video/mp4
• video/H264
• video/JPEG
• audio/aac
• audio/mpeg
• image/jpg
• image/png

para todos os media types:www.iana.org/media-types.xhtml

Aula 1

Imagens dinâmicas(GIMP)

Este próximo parágrafo vem do pdf.

Nosso primeiro passo no caminho de adaptar nosso conteúdo ao tamanho da tela vai ser aprender a gerar imagens de tamanho diferentes e a fazer o navegador carregar a imagem certa para cada situação. Para isso, devemos conhecer as tags <picture> e <source>. Para esse exemplo, criamos as três imagens ao lado: a menor tem 300x300px, a média tem 700x700px e a maior tem 1000x1000px. Usamos o programa GIMP, que é um editor de imagens 100% gratuito.

1. para celular/pequeno - 300x300px (resolução)
2. para tablet/média - 500x500px
3. para pc/grande - 1000x1000px

exportar eles para a pasta do exercício; dentro de sua própria pasta(imagens)

Aula 2

Imagens que se adptam sozinhas

<picture></picture>

Serve para por várias fontes de uma mesma foto para que ela seja dinâmica; mude de acordo com o dispositivo

Essas imagens serão carregadas pelo navegador de acordo com o tamanho da janela atual. Para isso, criamos o seguinte código base:

            
             <picture>
              <img src="images/foto-g.png" alt="Imagem flexível">
             </picture>
             
            

Note que colocamos a tag <img> exatamente como aprendemos no capítulo 06 do nosso material. A novidade aqui é que inserimos essa imagem dentro da tag <picture>, que vai concentrar as outras fontes de imagem. Por padrão, a imagem foto-g.png (1000x1000px) será carregada.

O problema vai começar a surgir quando a janela do navegador chegar perto dos 1000 pixels de largura, pois a foto não vai mais caber lá. Vamos agora adicionar uma linha para resolver esse problema:

            
             <picture>
              <sourse media="(max-width: 1050px)" srcset="images/foto-m.png" type="image/png">
              <img src="images/foto-g.png" alt="Imagem flexível">
             </picture>
            
            

Note que a tag <source> possui três atributos:

• ‣ type vai indicar o media type da imagem que usamos (veja mais informações sobre media types no capítulo 10)
• ‣ srcset vai configurar o nome da imagem que será carregada quando o tamanho indicado for atingido
• ‣ media indica o tamanho máximo a ser considerado para carregar a imagem indicada no atributo srcset.

Agora, recarregue seu código e mude o tamanho da janela do navegador. Você vai perceber que a imagem muda automaticamente conforme aumentamos ou diminuímos o tamanho da tela. Vamos continuar e acrescentar mais um <source> à nossa imagem:

            
             <picture>
              <sourse media="(max-width: 750px)" srcset="images/foto-p.png" type="image/png">
              <sourse media="(max-width: 1050px)" srcset="images/foto-m.png" type="image/png">
              <img src="images/foto-g.png" alt="Imagem flexível">
             </picture>
            
            

É importante que existe uma ordem entre os <source>, e nessa nossa configuração, os itens mais acima sejam os menores tamanhos para max-width e que os seguintes sejam maiores, de forma crescente. O último item dentro de <picture> deve ser a imagem padrão.

Aula 3

Colocando áudio no seu site

Com a HTML5, veio também a facilidade em compartilhar áudio nos nossos sites e sem depender necessariamente de JavaScript ou plugins extras. A partir de agora, basta uma tag <audio> e alguns <source> para fazer seu site ser capaz de tocar qualquer áudio.

            
             <audio preload="metadata" controls autoplay loop> 
             <source src="midia/guanacast-33.mp3" type="audio/mpeg"> 
             <source src="midia/guanacast-33.ogg" type="audio/ogg"> 
             <source src="midia/guanacast-33.wav" type="image/wav"> 
             <p>Seu navegador não suporta áudio <a href="midia/guanacast-33.mp3" download="guanacast-33.mp3" type="audio/mpeg"></a></p> 
             </audio>
            
            

Vamos analisar os principais atributos da tag <audio> antes de mais nada:

1. ‣O atributo preload indica se o áudio será pré-carregado ou não e aceita três valores:
1. ๏ metadata vai carregar apenas as informações sobre o arquivo (tamanho, tempo, informações de direitos, etc)
2. ๏ none não vai carregar absolutamente nada até que o usuário clique no botão play ou um script inicie a reprodução
3. ๏ auto (padrão) vai carregar o arquivo de áudio inteiro assim que a página for carregada, mesmo que o usuário nunca aperte o play
2. ‣O atributo controls vai apresentar o player na tela. Caso não seja colocado na tag <audio>, o controle será transparente e o usuário não poderá interagir com ele.
3. ‣O atributo autoplay, quando inserido, vai iniciar a reprodução do áudio assim que a página for carregada.
4. ‣O atributoloop vai fazer com que o áudio seja repetido eternamente assim que terminar a sua reprodução.

Dentro da tag <audio>, adicionamos vários <source> com formatos diferentes do mesmo áudio. Coloque na parte de cima o seu formato favorito. Os demais só serão carregados caso o de cima falhe. Caso todos falhem, criamos um parágrafo que permite o download do arquivo MP3 para ouvir no player padrão do dispositivo.

O autoplay pode não funcionar pq nem todos os navegadores são 100% compativéis com MP3.

Formatos de áudio: MP3, WAV, OGG

WAV é muito pesado, mas o áudio é muito bom

Aula 4

Formatos de vídeo para seu site

1. MPEG
1. .mp4
2. .m4v
2. WEBM
1. .webm
3. OGG
1. .ogv

o programa HandBreak seria bem útil, mas não funciona no meu notebook

no vídeo, o professor baixa um vídeo no pexels e mo difica o que fica depois do "." no HandBreak

Youtube
• Positivos
1. serviço de hospedagem de vídeo mais popular
2. gerenciado pelo Google
3. seus servidores são ultra rápidos
• Negativo
1. todos os vídeos são públicos e disponíveis, o que pode ser uma dor de cabeça caso você queira limitar quem vai ter acesso a determinado vídeo

Vimeo
• Positivo
1. limitar quem pode ver o vídeo
• Negativos
1. ele é pago; taxa anual
2. algorítmos não são tão eficientes
3. pequenos travamentos às vezes

Aula 5

Vídeos em hospedagem própria

Com a expansão da banda larga no Brasil (sim, eu sei que ainda estamos longe de algo ideal na maioria do território nacional) tornou-se possível até assistir um vídeo em 4K em nosso plano 4G do celular (é caro, mas possível).

Para inserir um vídeo em nosso site, podemos utilizar a nova tag <video> da HTML5, caso o arquivo esteja hospedado no nosso próprio servidor.

          
           <video width="600" poster="thumb.jpg" controls autoplay> 
            <source src="meu-video.webm" type="video/webm"> 
            <source src="meu-video.mp4" type="video/mp4"> 
            <source src="meu-video.ogv" type="video/ogg"> 
            <p>Infelizmente seu navegador não conseguiu carregar o video.</p> 
           </video>
          
          

Antes de mais nada, vamos criar a tag <video> e configurar alguns atributos importantes:

• ‣ width vai indicar a largura que o vídeo vai ter na tela. Nesse exemplo, 600px.
• ‣ poster configura uma imagem que vai aparecer como uma capa, enquanto o visitante não aperta o play para reproduzir o vídeo
• ‣ controls vai configurar 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 <video>.
• ‣ autoplay diz para o navegador se o vídeo vai começar a tocar automaticamente, assim que a página for carregada.

Hospedar seus próprios vídeos pode ser caro

Quando colocamos vídeos no nosso próprio servidor, podemos passar por problemasccom alto consumo de banda, site lento e incompatibilidades com alguns navegadores por conta dos codecs. E geralmente só percebemos esses problemas quando colocamos nosso projeto no ar e lançamos oficialmente.

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.

E é claro que seu site possivelmente não vai ter apenas um vídeo, não vai ter apenas 200 visitantes em um dia e aí a conta só aumenta. É preciso tomar muito cuidado quando decidimos guardar nossos próprios vídeos.

Aula 6

Incorporação de vídeos externos

Para incorporar vídeos que você subiu no YouTube ou Vimeo, existem recursos que te dão o código pronto em HTML5.

No YouTube, abra o vídeo que você quer incorporar e clique no link COMPARTILHAR que fica abaixo do título. Ao clicar no link indicado anteriormente, uma janela vai aparecer, te dando as opções de compartilhamento. Escolha o item INCORPORAR. O código HTML personalizado vai aparecer em uma nova janela de contexto, incluindo um botão que permite COPIAR o código com a tag do <iframe> que vai aparecerdiretamente na sua página. Volte ao seu editor de código e cole a tag no seu arquivo HTML que vai apresentar o vídeo.

Quando você está usando o Vimeo, o procedimento é bastante semelhante. Abra seu painel de controle do serviço e vá para a sua lista de vídeos hospedados. Na lista de mídias armazenadas, clique no botão com reticências e escolha a opção Incorporação. Na janela, você vai poder clicar no botão Código de incorporação e a tag <iframe> personalizada também vai aparecer.

Aula 7

Desafio: um site com vídeos

não lembro se fiz esse desafio, mas tô com preguiça de procurar.

quando eu tiver com coragem, eu procuro e ponho o link aqui

Aula 1

Estilo CSS inline

            
             ...
              <head>
               <body style="background-color: cor;">
                <h1 style="color: cor;">Capítulo 1</h1>
             ...
            
            

Inline - mudar a estética de somente uma linha de código

<p style="text-align: justify;"> - deixa espaçado as letras e palavras certinho

<h1 style="color: cor; background-color: cor;">

somente usar inline para modificações expecíficas para uma página

Aula 2

Estilo CSS internos

            
             ...
             <title>Estilos locais/internos</title>
             <style>
               body{
                    background-color: #556b2f;
                    font-family: Arial, Helvica, sans-serif;
                    font-size: 20px;
                  }
                  
               h1{
                  color: #380e5f;
                  background-color: #643c8a;
                }
                
               h2{
                  color: #b15c16d5;
                }
                
               p{
                 text-align: justify;
                }
                
             <style>
            
            

Desvantagens do Interno

ocupa muito espaço e é aplicavél para somente uma página; se precisar que 2 ou mais páginas tenham a esma aparÊncia, vai ter que copiar e colar e se uma mudança for necessária, ela terá que ser feita página por página; não é eficiente.

Desvantagens do Inline

código bagunçado e não eficiente, pois as CSS tem que ser feitas linha por linha.

técnica antiga; pode ser descontinuada em breve

Aula 3

Estilos CSS externas

regras no CSS começa com @

            
             ...
              <title>....</title>
              <link rel="stylesheet" href="style.css">
             ...
            
            

ao digitar um treço desses de ser uma outra página ou arquivo do site é só fazer Ctrl + clicar; fazer outra página já sendo o tipo que é preciso

            
              style.css
              
                @charset "UTF-8";
                
                body{
                     ...
                     ...
                     ...
                    }
            
            

numa mesma página, posso usar os 3 tipos de CSS sem problemas

em quetão de configuração que tem mais poder é:

1. inline - configuração específico; mais tedioso
2. interno - meio á meio; bom para 1 ou 2 páginas; quando o style começar a ficar grande, pular para o externo
3. externo - configuração que nem o interno, mas é mais eficiente para quando tem várias páginas

FIM DO MÓDULO 1