1 - Anotações Web Design

Aula 01 – 10/03/2023
Bootstrip > Frames prontos para ganhar tempo > Para complementar o curso.
Firebase > Hospedar -servidor de nuvem que serve como drive, sistema de BD > limite 1GB
Win+E > explorer / win+s = pesquisa /
1 – PC
2 – Organizar
3 – Software (VScode, Bloco de notas)
4 – Todo projeto tem que contem um INDEX (html ou PHP), esta será a página principal.
HTML – Linguagem de Marcação – Hypertext

<TAG>
A tag é um dos marcadores, respeite a forma como elas são feitas. Toda tag indica um trecho
<tag></tag>
Programação estruturada > organizado conforme as prioridades e sequencialmente em linhas.
------------------------------------------------------------------------------------------------------------------------------
Estrutura Básica WEB

<html>
<head>
<title> </title>
</head>
<body>
<header>
</header>
<footer>
</footer>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------
Mais <TAGS>

<div class="col"></div> 
<div class="col"></div>
</div>
Botao de navegação / Fazendo uma ancora

Tag <a></a>
<nav> <!—Barra de navegação-->
<ul class="paginas">
<li><a href="index.html">Home</a></li>
<li><a href="sobre.html">Sobre</a></li>
<li><a href="contatos.html">Contatos</a></li>
</ul>
</nav>
Colocando duas classes na mesma tag para melhorar o CSS

No html:
<div class="topo bg1"> 
Agora no CSS vemos que são duas classes

.topo{
width: 100%;
height: 40%;
}
.bg1{
background-image: url(../img/emotions-3615255_1920.jpg);
background-size: cover;
}
Aula 8 – 29-03-2023
Código do copyright alt + 0 + 1 + 6 + 9
Como ajustar a altura das divs

Caso você não queira ficar ajustando a altura da div, deixo no css sem altura (height), desta forma
ela se ajusta automaticamente.
----------------------------------------------------------------------------------------------------------------------------------
AULA 12 – 05/04/23
ID
Com ID podemos fazer endereçamento dentro da própria página, já com o class não conseguimos
fazer isso.
Neste caso, com id podemos fazer links e referências dentro da própria página, exemplo: no final
página você clica e volta para o começo.
Como fazemos esse link entre as partes?
Primeiro definimos onde vamos clicar para que ocorra o deslocamento. Veja a seguir:
#começo > essa identificação colocamos na tag onde clicaremos
#meio
#fim
<li><a href="#começo">Página 1</a></li>
<li><a href="#meio">Página 2</a></li>
<li><a href="#fim">Página 3</a></li>
Agora definimos os locais para onde seremos direcionados ao clicar em Página 1 , Página 2 ou
Página 3.
<div class="conteudo">
<section id="pag1">
<h1 id="titulo">Bem vindo ao nosso site !!!</h1>
<div class="row">
<div class="col">
<section id="pag2">
<div class="row">
<div class="col">
<section id="pag3">
<div class="row">
<div class="col">
Aula 13 – 06/04/23
Shusho.com.ar
Procurar modelos de layout de páginas web
Flappybird.
List it
Imagens
1920 x 1280 para o background
600x400+/-
Paralax
Efeito que tem uma imagem de fundo que ao rolar a página a imagem do fundo se move.
Precisamos entender que é o container principal
background-attachment: fixed;
Pega a imagem e deixa a mesma fixa
Para fixar o rodapé no final da página
Aula 13 – 12-04-2023 - Responsividade Bootstrap

Meta tag view port > precisa ser adicionada para termos responsividade, geralmente já vem
quando escolhemos html5.
<meta name="viewport" content="width=device-width, initial-scale=1.0">

No código acima a escala 1.0 representa 100% da página.
@media query – recursos de css >> junto com a view port atua na resposividade.
BOOTSTRAP (Não traduzir para Português)

Clicando em DOCS podemos visualizar alguns exemplos de códigos.
Além de instalar podemos usar o bootstrap através da CDN > fica em DOCS > Download >
Ao localizaro CDN clique na prancheta de copiar localizada no lado direito do código.
Agora cole o código no seu projeto entre a tag <head>
Veja
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Aula 13 - Bootstrap</title>

<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/
bootstrap.min.css" rel="stylesheet" integrity="sha384-
KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.b
undle.min.js" integrity="sha384-
ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
crossorigin="anonymous">
</script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.
js" integrity="sha384-
zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.m
in.js"
integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9Uo
XAB7BZ" crossorigin="anonymous"></script>
</head>
Faça isso com os dois códigos existentes no CDN dentro do bootstrap
Curiosidade>
Em temas temos exemplo de páginas prontas para serem usadas, alguns são free, mas temos
aquelas pagas também.
Na aba lateral esquerda > Layout > Container

Temos a tabela com as resoluções x responsividade.
Existem dois tipos de Containers no Bootstrap
Container-fluid > é sempre 100% de largura da página.
<div class="container-fluid">
</div>
Container > Pega 80% da página

<div class="container">

</div>
Na aba lateral esquerda > Layout > Grid
Temos um exemplo de linhas e colunas

<div class="container text-center">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
No código do Bootstrap essas colunas são configuradas para adotarem um tamanho 12, porém, se você
inserir duas colunas cada uma ficará com tamanho 6, podemos deixar uma coluna maior que a outra
settando o número no código.
Ex.
<div class="row">
<div class="col-3">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Reprehenderit aperiam corporis reiciendis eum quam rerum error excepturi?
Veniam fugiat repellendus quas aspernatur incidunt laboriosam ea voluptatum
sapiente, maiores, nisi possimus?</p>
</div>
<div class="col-6">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Aspernatur totam sunt natus impedit quis aut quos dignissimos laboriosam
perferendis omnis, corrupti voluptatum ab voluptas? Nulla aspernatur
molestias dolores tenetur voluptas.</p>
</div>
<div class="col-3">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Consequuntur, optio quas. Mollitia id ex facilis quia exercitationem animi
tempore at maxime quas, iusto, vero sed sunt libero reiciendis saepe esse?
</p>
</div>
</div>
</div>
Note acima que o total das três colunas é 12, sendo que a coluna do meio será mais larga.
A largura das colunas acima foram configuradas, porém, ainda não estão responsivas para telas
menores, para isso vamos inserir um código que o navegador ajustará automaticamente
Esse md é originado do bootstrap conforme vimos na tabela acima que está dentro de Layout >
Container e representa as telas médias.
<div class="row">
<div class="col-md-8">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Reprehenderit aperiam corporis reiciendis eum quam rerum error excepturi?
Veniam fugiat repellendus quas aspernatur incidunt laboriosam ea voluptatum
sapiente, maiores, nisi possimus?</p>
</div>
Aspernatur totam sunt natus impedit quis aut quos dignissimos laboriosam
perferendis omnis, corrupti voluptatum ab voluptas? Nulla aspernatur
molestias dolores tenetur voluptas.</p>
</div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Consequuntur, optio quas. Mollitia id ex facilis quia exercitationem animi
tempore at maxime quas, iusto, vero sed sunt libero reiciendis saepe esse?
</p>
</div>
</div>
</div>
Na aba lateral esquerda > Content > Images

Usando a class img-fluid a imagem já ocupara 100% e ficará responsiva
<img src="img/maldivas1920.jpg" class="img-fluid" alt="Praia">
Na aba lateral esquerda > Components > Navbar

Temos o código para criar uma barra de navegação. Podemos inserir os links das páginas e onde
está Disabled podemos excluir essa palavra e habilitar novos menus, substituindo pelo o que
queremos.
Na aba lateral esquerda > Components > Carousel

Temos várias opções inclusive autoplay
Na aba lateral esquerda > Content

Podemos inserir tabelas e se quiser inserir mais linhas e colunas com responsividade. Note que na
img trocamos o alt por class img-fluid para deixar alinhado e com responsividade.
<div class="row">
<img src="img/5 - praia640.jpg" class="img-fluid">
</div>
<h1>Título da Coluna</h1>
Vel, aspernatur doloremque consequatur tempora deleniti dolores dolore
fugiat, commodi libero quibusdam inventore aperiam modi laudantium debitis
ex quidem similique corrupti iure!</p>
No código abaixo alinhamos o texto no centro com o comando text-center

<h1 class="display-5 text-center">Título da Coluna</h1>
Componets > Card
Aula 14 – dia 13/04/23
BreakPoints e Mediaqueries – CSS
Para adicionar Mediaqueries em css digite @media e na sequencia a função que será executada,
no final abra e fecha chaves para especificar o que será feito com a função.
No exemplo abaixo toda a vez que a resolução até abaixo de 800px o container fluid terá o
background-color blue
Entre 800 e 1000 px – green
Entre 1000 e 1200px = red
Entre 1200 e 1500px = aqua
Acima de 1500 fica com o background color configurado no css inicialmente
Ex:
@media screen and (max-width:1500px){
.container-fluid{
background-color: aqua;
text-align: center;
color: red;
}
}
.container-fluid{
background-color: red;
text-align: center;
color: white;
}
}
.container-fluid{
background-color: green;
}
.row{
display: block;
/*Retira o display flex que configuramos inicialmente*/
padding: 30px;
}
.col{
width: 100%;
font-size: 20px;
}
}
@media (min-width:800px) and (max-width:1200px){
/*nesta faixa o p ficará com a cor vermelha*/
p{
color: red;
}
}

.container-fluid{
background-color: blue;
}
img{
display: none;
/*retira a imagem com telas abaixo de 800px*/
}

}
----------------------------------------------------------------------------------------------------------------------------------
AULA 15 – 14/04/2023
ATENÇÃO: as configurações de stylo inseridas no html se sobrepõe as configurações que criamos

em folhas de estilo css.
Para inserir imagens por baixo do menu é melhor procurar por imagens tipo banner.
PNGWing - Exclusive png design images
LINKS
Cores – tabela de cores – celke.com.br > https://celke.com.br/artigo/tabela-de-cores-html-nome-

hexadecimal-rgb
Imagens:
 https://pexels.com
 https://pixabay.com
 https://unsplash.com (somente uma opção de download de imagem)
 https://fontawesome.com (ícones)
 https://pngwing.com (imagens png gratuitas para uso livre)
Editar imagens: Adobe Express
Google fontes
Loren ipsum
Getbootstrap.com > framework para web gratuito.
Aula 16
Firebase não aceita hospedar páginas dinâmicas.
Programação Orientada a objeto

Está diretamente relacionada a programação estruturada.
Mais Segurança > divide os códigos em módulos
JAVASCRIPT
Variável = VAR
Números inteiros = int
Números decimais = double/float
Texto = String
Window.alert – exibe uma caixa de mensagem só com ok

Window.prompt – Utilizado para exibir mensagem com campo onde o usuário possa digitar algo.
Essa informação digitada pode ser armazenada em uma variável, mas lembre-se que o for digitado
é sempre uma string.
Para transformar a string em número inteiro use o parseInt
Concatenação é feita com o sinal de +
Variável
- Nunca pode começar com números;
- Não usar espaço entre as palavras;
- Não usar acentuação ou caracteres especiais;
Operadores matemáticos
-+/*
= é atribuição/afirmar
== igual
Javascript interno
Para inserir o java script na nossa estrutura HTML abrimos a tag <script> dentro do head,
posteriormente,
Javascript externo
Para linkar um script externo de js, abrimos uma tag script dentro de body e linkamos com o
comando src
<script src="js/exmplo.js" type="text/javascript">

</script>
Cada entrada = 1 variável

Cada saída = 1 nova variável
Ordem de precedência na matemática

{[()]}
1° ()
2° []
3° {}
Mas aqui não tem chaves nem colchetes, então resolver sempre os parênteses mais internos indo
para fora.
1° - ( 3° (2°(1°) 2° ) 3°)
2° - Raiz quadrada e ^números elevados
3° - * /
4° - + -
Formulários <form> é um objeto em JS.
Label – é onde inserimos o texto que aparecerá para o usuário;
Input – onde o user digita (temos vários tipos de input(number, text, email, button etc).
O Input type Button cria o botão, sendo que em value podemos escrever o texto que aparecerá no
botão.
Podemos usar o input reset para dar a opção de limpar o formulário.
<form action="">
<label for="Receber o nome">Nome</label>
<input type="text">
<br>
<label for="">Idade</label>
<input type="number" min="0" max="99">
<br>
<label for="">Sexo</label>
<br>
<input type="checkbox" name="" id=""><label for="">F</label>
<input type="checkbox" name="" id=""><label for="">M</label>
<br>
<label for="">Telefone</label>
<input type="text" placeholder="(00) 00000-0000">
<label for="">E-mail</label>
<input type="email" size="40" placeholder="[email protected]">
<br>
<input type="submit" value="ENVIAR"> 
<input type="reset" value="LIMPAR"> 
</form>
Neste exemplo, o valor máximo na caixa input number para Idade foi limitado até 99.
Em Javascript para linkar uma função a utilizamos o seguinte comando, onde a área em amarelo
tem relação direta uma com a outra.
<fieldset>
<form action="">
<label for="">Digite o valor.</label>
<br>
<input type="number" name="area" id="area">
<br>
<input type="button" value="CALCULAR"
onclick="calcularArea(area.value);">
<input type="reset" value="LIMPAR">
</form>
</fieldset>
Essa função calcularArea() já foi criada no arquivo externo com extensão .js
function calcularArea(x){
window.alert("Area Total: " + (parseInt(x)*parseInt(x)));
}
--------------------------------------------------------------------------------------------------------------------------------
AULA 18 –
Cuidado ao trabalhar com números floats

Padrão numérico float BRASIL 1.000,00
Padrão Americano float 1,000.00
Temos a função Reset nativa no input

<input type="button" value="CALCULAR"
onclick="perimetro(altura.value,largura.value);">
<input type="reset" value="LIMPAR">
Vamos criar um Reset para limpar sem usar a input type=”Reset”
Podemos Manipular CSS via JS

Para isso usamos o comando style em js
1° Criar os comandos no HTML
<div class="col" >
<h2>Sistema de Mudança de Cores</h2>
<fieldset id="cores">
<form action="">
<center>
<input type="button" value="Azul" onclick="azul();">
<br>
<input type="button" value="Vermelho"
onclick="vermelho();">
<br>
<input type="button" value="Amarelo"
onclick="amarelo();">
<br>
<input type="button" value="Verde"
onclick="verde();">
<br>
</center>
</form>
</fieldset>
</div>
Depois dentro do arquivo JS

//Manipulando CSS por JS
function azul(){
document.getElementById('cores').style.backgroundColor='blue';
document.getElementById('cores').style.color="white"
}
function vermelho(){
document.getElementById('cores').style.backgroundColor='red';
}
function amarelo(){
document.getElementById('cores').style.backgroundColor='yellow';
document.getElementById('cores').style.color="green"
}
function verde(){
document.getElementById('cores').style.backgroundColor='green';
}
Lógica Condicional Simples

BOOLEANO
Verdadeiro (TRUE) = 1
Falso (FALSE) = 0
Operadores Relacionais e Lógicos
== Igual
!= Diferente
> Maior
< Menor
>= Maior igual
<= Menor igual
Nota: o operador = é uma atribuição, não confundir com == (igual).

Ex. X = 0 afirmando
Agora
X == 0 dúvida
Placeholder para deixar um texto temporário na caixa de input

<input type="text" id="resposta" placeholder="Resposta Lógica" readonly>
Readonly para deixar a caixa somente leitura, ou seja, usuário não consegue digitar na caixa.
Geralmente usada quando vamos dar resposta.
Teste Lógico
Na lógica condicional sempre começamos pelo teste lógico

1 - Anotações Web Design

Enviado por

Direitos autorais:

Formatos disponíveis

1 - Anotações Web Design

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

1 - Anotações Web Design

Enviado por

Direitos autorais:

Formatos disponíveis

Aula 01 – 10/03/2023

HTML – Linguagem de Marcação – Hypertext

Programação estruturada > organizado conforme as prioridades e sequencialmente em linhas.

Estrutura Básica WEB

Títulos > essa tag determina a hierarquia dos títulos

Aula 3 – CSS3 Cascading Style Sheet (Folha de Estilo em Cascata)

3 formas de usarmos o CSS

Tipo de fonte : font-family

Lista Ordenada e Não Ordenada

Lista Não Ordenada

Listas não Ordenadas

Listas não Ordenadas : Como square

1. Clicar na Guia Arquivo

Tag <nav> – inserir barra de navegação

Na pagina de css para configurar o tamanho da pagina

Com heigth 100%

Sem height para 100%

Top = parte superior

Vamos usar o paddin no texto do rodapé

justify-content refere-se ao espaçamento entre os objetos no menu

Para criar linha

Botao de navegação / Fazendo uma ancora

Colocando duas classes na mesma tag para melhorar o CSS

Agora no CSS vemos que são duas classes

Código do copyright alt + 0 + 1 + 6 + 9

Como ajustar a altura das divs

Para fixar o rodapé no final da página

Aula 13 – 12-04-2023 - Responsividade Bootstrap

<meta name="viewport" content="width=device-width, initial-scale=1.0">

BOOTSTRAP (Não traduzir para Português)

Faça isso com os dois códigos existentes no CDN dentro do bootstrap

Na aba lateral esquerda > Layout > Container

Container > Pega 80% da página

Na aba lateral esquerda > Layout > Grid

Temos um exemplo de linhas e colunas

Na aba lateral esquerda > Content > Images

Na aba lateral esquerda > Components > Navbar

Na aba lateral esquerda > Components > Carousel

Na aba lateral esquerda > Content

No código abaixo alinhamos o texto no centro com o comando text-center

Componets > Card

Aula 14 – dia 13/04/23

BreakPoints e Mediaqueries – CSS

@media screen and (max-width:800px){

ATENÇÃO: as configurações de stylo inseridas no html se sobrepõe as configurações que criamos

PNGWing - Exclusive png design images

Cores – tabela de cores – celke.com.br > https://celke.com.br/artigo/tabela-de-cores-html-nome-

Editar imagens: Adobe Express

Getbootstrap.com > framework para web gratuito.

Programação Orientada a objeto

Window.alert – exibe uma caixa de mensagem só com ok

Concatenação é feita com o sinal de +

Cada entrada = 1 variável

Ordem de precedência na matemática

Cuidado ao trabalhar com números floats

Temos a função Reset nativa no input

Vamos criar um Reset para limpar sem usar a input type=”Reset”

Podemos Manipular CSS via JS

Depois dentro do arquivo JS