Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma...
Transcript of Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma...
![Page 1: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/1.jpg)
Slide-aula
2020
PROGRAMA DE EDUCAÇÃO TUTORIAL – ENGENHARIA ELÉTRICA –
UNIVERSIDADE FEDERAL DE MINAS GERAIS
WEB DESIGN
![Page 2: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/2.jpg)
![Page 3: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/3.jpg)
Front-end e Back-end 1
![Page 4: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/4.jpg)
Front-end e Back-end 1
DesignHTML/CSS/JSSites estáticos
Segurança/EstruturaPHP
Sites dinâmicos
![Page 5: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/5.jpg)
Um site 1
Um site será simplificado como um diretório em um servidor
Portanto, nosso site será uma pasta local com nossos arquivos
![Page 6: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/6.jpg)
Principais Ferramentas 1
![Page 7: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/7.jpg)
Objetivos
![Page 8: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/8.jpg)
ObjetivosApresentar o panorama geral de
funcionamento e de desenvolvimento de umsite;
Ensinar conceitos de ferramentas essenciaispara o Web Design;
Capacitar para criar um site estáticocompleto;
Motivar para no futuro evoluirmos parasites dinâmicos.
1
![Page 9: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/9.jpg)
Desejável
Noções de programação;
Noções de edição de imagem;
Vontade de aprender;
Bom gosto;
Bom humor
1
![Page 10: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/10.jpg)
Ferramentas
![Page 11: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/11.jpg)
Ferramentas
Ferramenta principal
Linguagem de marcação de hipertexto
1
HTML – Estrutura básica dos sites
![Page 12: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/12.jpg)
Ferramentas
Uma das ferramentas principais
Folhas de estilo em cascata
Framework CSS
1
CSS e Bootstrap – Modularização das configurações de estilo
![Page 13: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/13.jpg)
Ferramentas
Linguagem de Programação
Client-side
Framework JavaScript
1
JavaScript e JQuery – Programação no lado do cliente
![Page 14: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/14.jpg)
Ferramentas
Linguagem de Programação
Server-side
Framework PHP
1
PHP e Codeigneter – Programação no lado do servidor, sites dinâmicos
![Page 15: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/15.jpg)
Ferramentas
Programas de edição de imagem
1
Ajustes dos arquivos de imagens
![Page 16: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/16.jpg)
Edição de Imagens 1
![Page 17: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/17.jpg)
Edição de ImagensDiminuir a resolução,
Ajustar a proporção,
Remover/adicionar fundo,
Paleta de cores
1
https://color.adobe.com/pt/create
![Page 18: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/18.jpg)
Noções de ImagensDesenhos rasters vs Desenhos vetoriais
1
Matrizes de pixels
Geralmente em RGB(24bits/pixel)
Perda de qualidade
Fórmulas matemáticas
Pontos, linhas, polígonos
Transformações melhores
![Page 19: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/19.jpg)
Noções de Imagens
Raster
1
Vetor
![Page 20: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/20.jpg)
Noções de Imagens 1
Rasterização
Vetorização
Raster Vetor
![Page 21: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/21.jpg)
Noções de Imagens 1
Raster
Mais usados no web design
jpg menor tamanho vs png sem fundo
O editor pode ser vetorial
OBS: ícones são .svg, vetores. Por isso podem ser tratados como fontes. Veremos adiante.
![Page 22: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/22.jpg)
Ferramentas 1
Suporte ao desenvolvimento, atalhos, interfaces
Editores de texto
![Page 23: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/23.jpg)
Editores de texto 1
Preze pela IDENTAÇÃO – maior legibilidade
Highlight
Organização
Atalhos
![Page 24: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/24.jpg)
Ferramentas
Navegadores
1
Interpretar o site
Pedro Alvares Cabral
![Page 25: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/25.jpg)
Navegadores
Inspecionarctrl + shift + I
1
Margens
Código, pode apagar pra
testar
Tamanho celular
Redimensionar
Detalhes
https://matthewrayfield.com/goodies/inspect-this-snake/
![Page 26: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/26.jpg)
Ferramentas Git
![Page 27: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/27.jpg)
Ferramentas
Git
1
Desenvolvimento em conjunto, branches e ramificações. Sistemas de controle de versões
![Page 28: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/28.jpg)
Git 1
git initgit clone https:...
Criar um repositório no site desejado e em sua máquina:
Iniciar em uma pasta acima
Clonar o repositório
![Page 29: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/29.jpg)
Git 1
git pullgit statusgit add –Agit commit –m “msg”git push
Atualização básica (e perigosa -> sobrescrita)
Puxar a versão mais atual
Ver as modificaçõesAdicionar as modificações
Criar um commitEmpurrar uma nova versão
![Page 30: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/30.jpg)
Git 1
git pullgit statusgit add –Agit commit –m “msg”git push
Como desenvolver em conjunto?
![Page 31: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/31.jpg)
Git 1
Master
Ramificação
Versão
Merge
1 forma de fazer no próximo slide
![Page 32: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/32.jpg)
Git
git pull origin master
1
git checkout –b “branch”
Alterar o repositório
git status
git add -A
git commit –m “msg”
git push origin branch
Compare & Pull Request
Descrever
Create Pull Request
Conferir
Merge Pull Request
Delete Branch
https://tableless.com.br/tudo-que-voce-queria-saber-
sobre-git-e-github-mas-tinha-vergonha-de-perguntar/
![Page 33: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/33.jpg)
Git 1Exemplo
Execução dos comandos
![Page 34: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/34.jpg)
Git 1Exemplo
Compare & pull request
![Page 35: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/35.jpg)
Git 1Exemplo
Descrever, Create pull request
![Page 36: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/36.jpg)
Git 1Exemplo
Abrir Pull request
![Page 37: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/37.jpg)
Git 1Exemplo
Conferir
![Page 38: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/38.jpg)
Git 1Exemplo
Merge ou resolver conflitos
![Page 39: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/39.jpg)
Git 1Exemplo
Deletar branch
![Page 40: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/40.jpg)
Índice
![Page 41: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/41.jpg)
Acompanhe X
Capítulo da Apostila??
Propaganda do Matlab??
https://exlink.com
Link para mais detalhes
![Page 42: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/42.jpg)
O que veremos
2 HTML
3 CSS
4 Bootstrap
5 JavaScript
6 JQuery
![Page 43: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/43.jpg)
![Page 44: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/44.jpg)
Arquivo principal 2
Qualquertexto
index.html
![Page 45: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/45.jpg)
Tags 2
<tag> CONTEÚDEO </tag>
<tag prop=“valor”>...</tag>
<!-- comentários -->
![Page 46: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/46.jpg)
Tags 2
<tag> CONTEÚDEO </tag>
<p> Este é um parágrafo </p>
![Page 47: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/47.jpg)
Tags 2
<tag prop=“valor”>...</tag>
<p id=“primeiroParagrafo”>...</p>
![Page 48: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/48.jpg)
Tags 2
<!-- comentários -->
<!-- <p id=“...”>...</p> -->
![Page 49: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/49.jpg)
Tags 2
Estrutura básica
![Page 50: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/50.jpg)
2
Estruture o index.html
Prática
![Page 51: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/51.jpg)
Tags Principais 2
OBS: Tem de h1 até h6
![Page 52: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/52.jpg)
Tags Principais 2
Body:<img src=“...”>
<hr>
<br>
<div> </div>
![Page 53: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/53.jpg)
Tags Principais 2
Head:<meta charset="UTF-8">
<title>CoRA</title>
<link rel="shortcut icon" href="img/icon/icon.png"/>
![Page 54: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/54.jpg)
2
Adicione no head
<meta charset="UTF-8">
<title>Titulo</title>
Prática
![Page 55: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/55.jpg)
Tags Principais 2
<a href=“”> LINK </a>
![Page 56: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/56.jpg)
Tags Principais 2
OBS: target=“_blank” abre o link em outra guiaOBS: hrefs mailto: e tel:
![Page 57: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/57.jpg)
2
Faça um link para curso/sumario.html
Prática
![Page 58: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/58.jpg)
Tags Principais 2
![Page 59: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/59.jpg)
Classes e IDs 2
Classe NÃO é uma classe de programação, é apenas uma importação de configurações de estilo.
ID é um identificador, deve ser único.
![Page 60: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/60.jpg)
Classes e IDs 2
É possível e muito útil atribuir mais de uma classe. Assim haverá múltiplas importações de estilo
class=“classe-1 classe-2 ...”
![Page 61: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/61.jpg)
Estilo 2
OBS: pode ser modificado inline
![Page 62: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/62.jpg)
Incorporação 2
Incluir outros arquivos htmls por uma tag
<iframe></iframe>
![Page 63: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/63.jpg)
Incorporação 2
![Page 64: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/64.jpg)
![Page 65: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/65.jpg)
Prioridade de estilos 3
1- Declaração inline
2- Declaração em <head><style>
3- Declaração em folha de estilo
![Page 66: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/66.jpg)
3
Declare sua folha de estilo
Prática
![Page 67: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/67.jpg)
Seletores 3
Tags
#IDs
.Classes
![Page 68: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/68.jpg)
Seletores 3
![Page 69: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/69.jpg)
Hover 3
OBS: hover é uma pseudo-classe
![Page 70: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/70.jpg)
3
Configure uma classe de sua escolha
Prática
![Page 71: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/71.jpg)
Principais propriedades 3
https://www.tutorialrepublic.com/css-reference/css3-properties.php
margin
padding
background-color
background-image
color
font-size
font-weight
font-family
height
min-height
width
min-width
![Page 72: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/72.jpg)
Exemplo 3
Exemplo mais avançado de como definir classes responsivas para iframes
OBS: Falaremos sobre Responsividade daqui a pouco
![Page 73: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/73.jpg)
Outras pseudo-classes 3
https://developer.mozilla.org/pt-BR/docs/Web/CSS/Pseudo-classes
![Page 74: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/74.jpg)
Hover outro elemetno 3
![Page 75: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/75.jpg)
![Page 76: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/76.jpg)
Pra que serve? 4
Framework CSS
Várias classes definidas
Design Responsivo
Modularidade
![Page 78: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/78.jpg)
Declaração 4
![Page 79: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/79.jpg)
Declaração 4
Declarações sem fazer downloads
![Page 80: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/80.jpg)
4
Copie a declaração de curso/bootstrap_declarado.html em seu index
Prática
![Page 81: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/81.jpg)
Básico
![Page 82: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/82.jpg)
Responsividade 4
![Page 83: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/83.jpg)
4
Altera com o tamanho da tela
Responsividade
![Page 84: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/84.jpg)
4Responsividade
![Page 85: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/85.jpg)
4Responsividade
Ajuste automático
Responsividade
![Page 86: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/86.jpg)
4Sistema de grades
row 1 1 1 1 1 1 1 1 1 1 1 1
12 col
Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12
![Page 87: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/87.jpg)
4Sistema de grades
![Page 88: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/88.jpg)
4Sistema de grades
col col-sm col-md col-lg col-xl
576 768 992 1200 Largura
![Page 89: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/89.jpg)
4Sistema de grades
![Page 90: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/90.jpg)
4Sistema de grades
![Page 91: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/91.jpg)
4Sistema de grades
https://getbootstrap.com/docs/4.0/layout/grid/
É possível também:
Alinhas as colunas verticalmente ao centro
Alinhas horizontalmente se soma de i < 12
Ordenar as colunas
E mais
![Page 92: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/92.jpg)
4
Faça uma divisão de colunas
Prática
![Page 93: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/93.jpg)
4Tipografia
![Page 94: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/94.jpg)
4Tipografia
![Page 95: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/95.jpg)
4Tipografia
![Page 96: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/96.jpg)
4Tipografia
markdelsinsusmallstrongem
![Page 97: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/97.jpg)
4Tipografia
text-center
text-left
text-right
text-justify
https://getbootstrap.com/docs/4.0/content/typography/
![Page 98: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/98.jpg)
4
Adicione o texto de curso/bootstrap/tipografia.html em uma de suas colunas
Prática
![Page 99: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/99.jpg)
Classes Principais
![Page 100: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/100.jpg)
4Cores
bg-color, btn-color, text-color ...
https://getbootstrap.com/docs/4.0/utilities/colors/
![Page 101: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/101.jpg)
4
Configure os bg-colors e text-colorsdo seu site
Prática
![Page 102: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/102.jpg)
4Botões
Classe btn pode ser aplicada a algumas tags
a -> linkbutton -> ação
![Page 103: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/103.jpg)
4Botões
![Page 104: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/104.jpg)
4Botões
https://getbootstrap.com/docs/4.0/components/buttons/
![Page 105: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/105.jpg)
4Active/disbaled
A classe active é para efeito de estilo
A propriedade e a classe disabled de fato desabilitam
![Page 106: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/106.jpg)
4
Personalize seu link para sumario.html
Prática
![Page 107: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/107.jpg)
4Imagens
![Page 108: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/108.jpg)
4Imagens
https://getbootstrap.com/docs/4.4/content/images/
![Page 109: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/109.jpg)
4
Adicione uma imagem fluida na coluna que não está o texto
Prática
![Page 110: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/110.jpg)
4Bordasimg-thumbnail
border, border-top, border-right, border-bottom, border-left,
border-X border-color
border-0, border-top-0,
border-right-0, border-bottom-0,
border-left-0,
![Page 111: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/111.jpg)
4Bordas
rounded-top ...rounded-0 ...
Foi usado apenas para o exemplo
https://getbootstrap.com/docs/4.4/utilities/borders/
![Page 112: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/112.jpg)
4
Adicione uma borda a sua imagem
Prática
![Page 113: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/113.jpg)
4Ícones
https://useiconic.com/open/
https://getbootstrap.com/docs/4.1/extend/icons/
Baixar uma pasta com os ícones
![Page 114: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/114.jpg)
4ÍconesExemplo com font awesome:
![Page 115: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/115.jpg)
4Ícones
https://fontawesome.com/icons?d=gallery&s=solid&m=free
Exemplo com font awesome:
<i class=“fas fa-book”></i>
São tratados como texto
![Page 116: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/116.jpg)
4Alertas
https://getbootstrap.com/docs/4.0/components/alerts/
![Page 117: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/117.jpg)
4
Complete o curso/bootstrap/alertas.html com o alerta que ta faltando
Prática
![Page 118: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/118.jpg)
4Cards
https://getbootstrap.com/docs/4.0/components/card/
![Page 119: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/119.jpg)
JavaScript
![Page 120: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/120.jpg)
4Navbar
![Page 121: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/121.jpg)
4Navbar
![Page 122: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/122.jpg)
4Navbar
![Page 123: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/123.jpg)
4Navbar
![Page 124: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/124.jpg)
4Navbar
![Page 125: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/125.jpg)
4Navbar
Adicionar margin, margin-top,padding ou padding-top
![Page 126: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/126.jpg)
4Navbar
https://getbootstrap.com/docs/4.0/components/navbar/
![Page 127: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/127.jpg)
4
Adicione o navbar ao seu index e remova o item desabilitado
Prática
![Page 128: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/128.jpg)
4Navs
https://getbootstrap.com/docs/4.4/components/navs/
Menus de navegaçãoNavbar
Nav
Seleciona o conteúdo da página
![Page 129: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/129.jpg)
4Scrollspy
https://getbootstrap.com/docs/4.0/components/scrollspy/
Local onde está a navbar
Offset da ativação em pixels
Marca como “active” a área vista automaticamente
![Page 130: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/130.jpg)
4Modais
![Page 131: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/131.jpg)
4Modais
https://getbootstrap.com/docs/4.0/components/modal/
![Page 132: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/132.jpg)
4Carrossel
![Page 133: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/133.jpg)
4Carrossel
https://getbootstrap.com/docs/4.4/components/carousel/
![Page 134: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/134.jpg)
4
Substitua a foto pelo carrossel de carrossel.html e o complete
Prática
![Page 135: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/135.jpg)
4Mais?https://getbootstrap.com/docs/4.4/getting-started/introduction/
![Page 136: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/136.jpg)
![Page 137: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/137.jpg)
Introdução 5
Linguagem de Programação
Interpretada
Alto nível
Multi-paradigma, principais: funcional, imperativo, scripting e Orientado a Objetos
Tipagem: dinâmica, fraca e implícitahttps://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Introduction
![Page 138: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/138.jpg)
Introdução 5
O foco desta seção não é a programação em si
Estamos interessados em como mudar nosso site com JS.
![Page 139: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/139.jpg)
Declaração 5
Inserir trecho, geralmente, ao final do <body>
Por que ao final?
![Page 140: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/140.jpg)
Declaração 5
Modularizando
![Page 141: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/141.jpg)
Prática 5
Declare seu main.js
![Page 142: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/142.jpg)
Alert e console.log 5
![Page 143: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/143.jpg)
Prática 5
Faça um alert e um console.log
![Page 144: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/144.jpg)
Programação Básica
![Page 145: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/145.jpg)
Variáveis 5
Principais tipos:
String
Number
Boolean
Array
![Page 146: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/146.jpg)
Variáveis 5
OBS: Para impressão de acentos
![Page 147: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/147.jpg)
Operadores Aritméticos 5
Básicos: + - * /
Resto: %
Potenciação: **
Incremento e decremento: ++ --
![Page 148: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/148.jpg)
Operadores Relacionais 5
Básicos: < <= > >=
Igualdade: == !=
Identidade: === !==
Propriedade: in
![Page 149: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/149.jpg)
Operadores Lógicos 5
And: &&
Or: ||
Not: !
![Page 150: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/150.jpg)
Operadores Bit a Bit 5
And: &
Or: |
Not: ~
Xor: ^
Deslocamento: << >>
![Page 151: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/151.jpg)
Estruturas Condicionais 5
OBS: Operador ternário
OBS: Também possui switch
![Page 152: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/152.jpg)
Estruturas de Repetição 5
Desvios incondicionais: break e continue
![Page 153: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/153.jpg)
Estruturas de Repetição 5
OBS: Também possui do-while
![Page 154: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/154.jpg)
Declaração de Funções 5
![Page 155: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/155.jpg)
Modificando HTML
![Page 156: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/156.jpg)
Eventos 5
https://www.w3schools.com/tags/ref_eventattributes.asp
Vários eventos de mouse, teclado, janela, etc
![Page 157: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/157.jpg)
DOM 5
![Page 158: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/158.jpg)
DOM 5
![Page 159: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/159.jpg)
5
Personalize a mensagem de toque.js
Prática
![Page 160: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/160.jpg)
DOM 5
![Page 161: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/161.jpg)
DOM 5
background-color backgroundColor
![Page 162: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/162.jpg)
5
Modifique nome.html e nome.js para mudar o background-color
Prática
![Page 163: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/163.jpg)
![Page 164: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/164.jpg)
O que é? 6
https://jquery.com/
Framework JavaScript
Manipulação HTML mais simples
Versatilidade e extensibilidade
![Page 165: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/165.jpg)
Declaração 6
Declaração idêntica ao do JS, porém precisa ser depois da declaração do jquery.js
jquery.js é a biblioteca
![Page 166: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/166.jpg)
Uso 6
Simplificado a
Métodos executados depois que carregar a página
![Page 167: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/167.jpg)
Uso 6
![Page 168: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/168.jpg)
6
Adicione um botão em sumiço.html e o configure em sumiço.js para voltar os textos. (.show())
Prática
![Page 169: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/169.jpg)
Uso 6
![Page 170: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/170.jpg)
Prática 6
Faça o botão azul de cor.html mudar o texto para outra cor diferente do botão vermelho
![Page 171: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/171.jpg)
Uso 6
![Page 172: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/172.jpg)
Uso 6
![Page 173: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/173.jpg)
![Page 174: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/174.jpg)
Sites Dinâmicos 7
Conteúdo baseado no usuário
Server-side PL: PHP, Java, etc
Banco de Dados
https://inovalize.com.br/diferencas-entre-site-dinamico-e-estatico/
![Page 175: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/175.jpg)
Configurar PHP 7
1 - Baixar o Xampp.
2 - Adicionar o caminho de .../xampp/php à variável de ambiente Path
3 – Ativar o Apache no painel de controle xampp
4 – abrir o diretório de seu site e usar o comando: php –S localhost:8080
5 – acesse seu site em localhost:8080https://pt.wikihow.com/Instalar-o-XAMPP-para-Windows
![Page 176: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/176.jpg)
FileZilla 7
Programa para fazer o upload para o servidor que contém seu site.
É possível e melhor fazer por CLI?
![Page 177: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/177.jpg)
FileZilla 7
Logar
Arrastar
![Page 178: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/178.jpg)
FileZilla 7
Remover o tempo de desconexão por inatividade
https://king.host/wiki/artigo/timeout-filezilla/
![Page 179: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/179.jpg)
Bibliografia 7
- Web Design – Diego Mariano https://diegomariano.com/home/
- Documentação Bootstrap https://getbootstrap.com/docs/4.1/getting-
started/introduction/
- Sites do PETEE http://www.petee.cpdee.ufmg.br/ e
http://cora.cpdee.ufmg.br/
- Computação Gráfica UFF http://computacaografica.ic.uff.br/conteudocap1.html
- W3Schools https://www.w3schools.com/
- Stack Overflow https://pt.stackoverflow.com/
- Developer Mozilla https://developer.mozilla.org/pt-BR/
- JQuery https://jquery.com/
![Page 180: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/180.jpg)
Bibliografia 7
- https://color.adobe.com/pt/create
- https://matthewrayfield.com/goodies/inspect-this-snake/
- https://tableless.com.br/tudo-que-voce-queria-saber-sobre-git-e-github-
mas-tinha-vergonha-de-perguntar/
- https://www.tutorialrepublic.com/css-reference/css3-properties.php
- https://fontawesome.com/icons?d=gallery&s=solid&m=free
- https://inovalize.com.br/diferencas-entre-site-dinamico-e-estatico/
- https://pt.wikihow.com/Instalar-o-XAMPP-para-Windows
- https://king.host/wiki/artigo/timeout-filezilla/
![Page 181: Apresentação do PowerPointpetee/ref/doc/minicursos_oficinas/web/...12 col Primeiro faz-se uma div-row depois quantas col-i quiser, desde que soma de i = 12 Sistema de grades 4 Sistema](https://reader033.fdocumentos.tips/reader033/viewer/2022060923/60aee68df614f526510a5072/html5/thumbnails/181.jpg)
WEB DESIGNSlide-aula
2020
PROGRAMA DE EDUCAÇÃO TUTORIAL – ENGENHARIA ELÉTRICA –
UNIVERSIDADE FEDERAL DE MINAS GERAIS