10 - JavaScript e Lógica de Programação
Aula 2 - Hello world e lógica
Introdução a linguagem JS: console.log(),
alert(). Utilização da função
window.onload = function(){} para executar o código após
o carregamento da página.
Aula 4 - Array e objetos
Criação de variáveis do tipo array. Inclusão de valores em array
pelo numero de indice.
Criação de variáveis do tipo objeto. Inclusão de valores em objetos através da sintaxe nome_Objeto.atributo = valor ou nome_Objeto['atributo'] = valor
Criação de variáveis do tipo objeto. Inclusão de valores em objetos através da sintaxe nome_Objeto.atributo = valor ou nome_Objeto['atributo'] = valor
Aula 7 - Condições e operadores
Operadores condicionais if/else, operadores de comparação '==',
'===', '!=', '!==', '<', '>'.
Aula 8 - Laços de repetição
Laço de repetição while(), incremento '+=', '++'.
Laço for e laço do/while
Laço for e laço do/while
Aula 10 a Aula 12- Google Maps API / Google Maps DOC e projeto #3
/ Comentários no JS
Nesta aula vamos substituir o mapa utilizado no
Projeto Prático 3
pela API do Google Maps (veja documentação
AQUI).
No início da aula foi mostrado um script no projeto, mas no meu desenvolvimento o mapa estava inserido através de uma tag <iframe>.
Geração da API_KEY no projeto Google Cloud. Minha chave key=AIzaSyCCypemS9LhtrB7b9IPhXdoCVLBilS4CP0.
Inserimos um novo script padrão da API Google Maps. Esse script vem com uma fuunção de callback que não é utilizada no projeto. Foi criada uma função que na verdade é uma adaptação da função indicada pela API (código da API comentado no arquivo).
Em seguida foi criada uma função para criação de um marcador em determinada localização. Essa função recebe latitude, longitude, icone e texto do mrcador como parametro e instancia vários objetos do Google Maps com as funções de marcador.
Uma das funções permite mostrar um texto no marcador. Essa função foi implementada utilizando um listener no 'click'.
Documentação de referencia da API
Utilizamos o método panTo() da API para alterar a posição do mapa. Criamos uma função de serTimeout() para fazer a mmudança de local após x segundos.
No início da aula foi mostrado um script no projeto, mas no meu desenvolvimento o mapa estava inserido através de uma tag <iframe>.
Geração da API_KEY no projeto Google Cloud. Minha chave key=AIzaSyCCypemS9LhtrB7b9IPhXdoCVLBilS4CP0.
Inserimos um novo script padrão da API Google Maps. Esse script vem com uma fuunção de callback que não é utilizada no projeto. Foi criada uma função que na verdade é uma adaptação da função indicada pela API (código da API comentado no arquivo).
Em seguida foi criada uma função para criação de um marcador em determinada localização. Essa função recebe latitude, longitude, icone e texto do mrcador como parametro e instancia vários objetos do Google Maps com as funções de marcador.
Uma das funções permite mostrar um texto no marcador. Essa função foi implementada utilizando um listener no 'click'.
Documentação de referencia da API
Utilizamos o método panTo() da API para alterar a posição do mapa. Criamos uma função de serTimeout() para fazer a mmudança de local após x segundos.
Aula 13 / Aula 14 - Mais sobre laços de repetição / Switch e
case
Utilização de continue e break em loops.
Utilização de switch/case.
Utilização de switch/case.
11 - Introduzindo JQuery
Aula 1 - Iniciando com JQuery e eventos de carregamento
Introdução ao
JQuery. Podemos incluir o
JQuery em um projeto através de um link externo ou com a
inclusão do arquivo em uma tag <script src=''>.
Inicializamos as funções do JQuery através da sintaxe:
$(function(){})
ou
$(document).ready(function(){}
e por fim, podemos incializar com o delay para carga da página com:
$(window).on('load', function(){})
Inicializamos as funções do JQuery através da sintaxe:
$(function(){})
ou
$(document).ready(function(){}
e por fim, podemos incializar com o delay para carga da página com:
$(window).on('load', function(){})
Aula 2 - Manipulando CSS via JQuery
O JQuery simplifica algumas funções JS para manipulação
de estilos CSS. Para ajustarmos os valores de estilo com o
JQuery, utilizamos a seguinte sintaxe:
$(' elemento_a_atacar').css('propriedade','valor')
A seleção dos elementos é feita com a mesma sintaxe que o CSS.
$(' elemento_a_atacar').css('propriedade','valor')
A seleção dos elementos é feita com a mesma sintaxe que o CSS.
Aula 3 - Introduzindo os eventos
Podemos monitorar eventos com
JQuery utilizando apenas o seletor de eventos e a função
desejada. Por exemplo:
$('elemento').click(function(){})
No evento de hover podemos declarar dois parametros, um para a entrada do hover e outro para a saída.
$('elemento').hover(function(){ ação_de_entrada}, function(){ ação_de_saida})
Outros eventos com a mesma sintaxe do click são focus, blur, change.
Quando temos mais de um evento que opere no mesmo elemento podemos utiliza-los de forma consecutiva na sintaxe.
$('elemento').click(function(){})
No evento de hover podemos declarar dois parametros, um para a entrada do hover e outro para a saída.
$('elemento').hover(function(){ ação_de_entrada}, function(){ ação_de_saida})
Outros eventos com a mesma sintaxe do click são focus, blur, change.
Quando temos mais de um evento que opere no mesmo elemento podemos utiliza-los de forma consecutiva na sintaxe.
Aula 4 - Mais sobre eventos
Outros eventos como o .scroll() pode ser utilizado tanto
com $(window) como com o $(document).
As funções do JQuery também possuem um evento padrão como parametro que permite monitorar algumas funções do navegador como preventDefault().
Outro evento de window disponível é o .resize() No exemplo fizemos uma função com setTimeout() e clearTimeout() para recarregar a página quando houver redimensionamento.
Outro evento de função apresentado, além do preventDefault() foi o stopPropagation() que faz com que as propriedades aplicadas ao body não se propaguem para o evento no elemento selecionado.
As funções do JQuery também possuem um evento padrão como parametro que permite monitorar algumas funções do navegador como preventDefault().
Outro evento de window disponível é o .resize() No exemplo fizemos uma função com setTimeout() e clearTimeout() para recarregar a página quando houver redimensionamento.
Outro evento de função apresentado, além do preventDefault() foi o stopPropagation() que faz com que as propriedades aplicadas ao body não se propaguem para o evento no elemento selecionado.
12 - Dominando JQuery
Aula 1 - Variáveis com JQuery
Podemos atribuir os elementos a variáveis para facilitar o acesso
a esses elementos. Ex:
var nome_variável = $('elemento')
var nome_variável = $('elemento')
Aula 2 - Manipulando dimensões dinamicamente
No JQuery a função width() retorna o tamanho do elemento
selecionado. Quando aplicamos um padding no elemento o
tamanho será o tamanho do elemento menos o valor do
padding.
Podemos manipular o width diretamente na função width() entretanto nesse caso será aplicado esse valor independente do padding configurado. Para alterarmos o tamanho incluindo os setups de padding devemos alterar diretamente na propriedade do css(). A função innerWidth() mostra o valor total do elemento (incluindo o paddding).
A função outerWidth() mostra a dimensão total do elemento, incluindo a margem. Caso estejamos utilizando box-sizing: border-box a borda externa não irá considerar a margem. Nesse caso podemos passar par a função outerWidth() o parametro true para que ele retorne a dimensão total.
Todas essas propriedades também são aplicadas ao height.
Podemos manipular o width diretamente na função width() entretanto nesse caso será aplicado esse valor independente do padding configurado. Para alterarmos o tamanho incluindo os setups de padding devemos alterar diretamente na propriedade do css(). A função innerWidth() mostra o valor total do elemento (incluindo o paddding).
A função outerWidth() mostra a dimensão total do elemento, incluindo a margem. Caso estejamos utilizando box-sizing: border-box a borda externa não irá considerar a margem. Nesse caso podemos passar par a função outerWidth() o parametro true para que ele retorne a dimensão total.
Todas essas propriedades também são aplicadas ao height.
Aula 3 - Manipulando textos dinamicamente
No JQuery a função .html() tem o mesmo funcionamento da
função innerHTML do JS. Aceita a sintaxe de HTML comum,
concatenação e template strings.
Para acrescentarmos mais do que um bloco HTML precisamos concatenar os blocos. Podemos fazer isso da seguinte forma:
$('elemento').html($('elemento').html() + 'novo_bloco_html')
Isso faz com que concatenemos o novo bloco ao bloco já existente.
A função .text() tem o mesmo funcionamento da função textContent(), ou seja, ignora tags e inclui apenas texto puro. Em campos do tipo <input> a função .text() não funciona. Para esses tipo de campo devemos utilizar a função .val(). A exceção e o campo <textarea> que aceita os valores passados por .text().
Podemos utilizar as funções acima para recuperar os valores dos elementos.
Agora vamos ver métodos de strings em JS.
split('c') divide uma string no caractere selecionado no parametro e retorna um array com os valores separados.
substr(a, n) retorna os 'n' caracteres a partir do indice 'a'.
trim() remove espaços no inicio e final da string.
Para acrescentarmos mais do que um bloco HTML precisamos concatenar os blocos. Podemos fazer isso da seguinte forma:
$('elemento').html($('elemento').html() + 'novo_bloco_html')
Isso faz com que concatenemos o novo bloco ao bloco já existente.
A função .text() tem o mesmo funcionamento da função textContent(), ou seja, ignora tags e inclui apenas texto puro. Em campos do tipo <input> a função .text() não funciona. Para esses tipo de campo devemos utilizar a função .val(). A exceção e o campo <textarea> que aceita os valores passados por .text().
Podemos utilizar as funções acima para recuperar os valores dos elementos.
Agora vamos ver métodos de strings em JS.
split('c') divide uma string no caractere selecionado no parametro e retorna um array com os valores separados.
substr(a, n) retorna os 'n' caracteres a partir do indice 'a'.
trim() remove espaços no inicio e final da string.
Aula 4 - Manipulando a posição no DOM
A função .append() no JQuery adiciona elementos
ao fim do bloco HTML selecionado. Quando temos mais de um elemento
com o mesmo seletor podemos utilizar a função
.eq(n) antes do .append() passando o número do
indice do elemento que queremos manipular (no exemplo como temos
duas <div> com a mesma classe, selecionamos apenas a primeira
utilizando o índice '0').
Podemos adicionar elementos passado-os antes do elemento utilizando a função appendTo().
Para adicionar elementos no início do bloco utilizamos a função prepend().
Podemos adicionar elementos depois de um seletor com .after() ou antes com o .before(). Da mesma forma que o appendTo podemos inserir o elemento antes de declarar o seletor com insertAfter() e insertBefore(). Essas funções são interessantes para concatenar outras funções pois se fazemos essa concatenação com o seletor primeiro a propriedade vai repercutir em todos os elementos daquele seletor e não apenas no elemento que está sendo adicionado.
Podemos utilizar a função .remove() para remover tags ou blocos inteiros.
Podemos adicionar elementos passado-os antes do elemento utilizando a função appendTo().
Para adicionar elementos no início do bloco utilizamos a função prepend().
Podemos adicionar elementos depois de um seletor com .after() ou antes com o .before(). Da mesma forma que o appendTo podemos inserir o elemento antes de declarar o seletor com insertAfter() e insertBefore(). Essas funções são interessantes para concatenar outras funções pois se fazemos essa concatenação com o seletor primeiro a propriedade vai repercutir em todos os elementos daquele seletor e não apenas no elemento que está sendo adicionado.
Podemos utilizar a função .remove() para remover tags ou blocos inteiros.
Aula 5 - Eventos dinamicos e mais conceitos
Quando criamos links dinamicos através do JQuery e precisamos
adicionar eventos precisamos criar os eventos após a criação dos
elementos, caso contrário o monitoramento do evento não funcionará
pois o evento ainda não existe. Para evitar esse problema podemos
utilizar a função .on('evento'). Desse modo podemos
declarar o evento mesmo antes de o elemento ser criado no HTML.
Quando criamos links sem referencia, ao clicarmos nesse link teremos o recarregamento da página. Para evitar isso podemos utilizar um return false na função de click ou um preventDefault().
Quando criamos vários elementos e utilizamos a mesma referencia no JQuery, ou seja, utilizamos um seletor que faz referencia a vários elementos a referencia $(this) será sempre do elemento que estiver sendo manipulado. Podemos recuperar o indice do elemento manipulado utilizando a função $(this).index().
Entre os métodos de eventos temos também o .keyup() e .keydown()
Quando criamos links sem referencia, ao clicarmos nesse link teremos o recarregamento da página. Para evitar isso podemos utilizar um return false na função de click ou um preventDefault().
Quando criamos vários elementos e utilizamos a mesma referencia no JQuery, ou seja, utilizamos um seletor que faz referencia a vários elementos a referencia $(this) será sempre do elemento que estiver sendo manipulado. Podemos recuperar o indice do elemento manipulado utilizando a função $(this).index().
Entre os métodos de eventos temos também o .keyup() e .keydown()
Aula 6 - Formulário com JQuery
Utilização do evento .submit() no JQuery. Neste caso
também precisamos utilizar o return false ou
preventDefault() para que a página não seja recarregada.
Aula 7 - Efeitos e animações
Uma da funções de animação do JQuery é o
.fadeOut(). Podemos aplica-lo no documento e passar como
parametros o tempo do fade e uma função de callback. O mesmo
ocorre com o .fadeIn().
Quando setamos o .fadeIn() em um elemento que tenha o
display: none ela passa a ter o
display: block automaticamente..
A função .slideToggle() permite que façamos que o conteúdo sem mova de cima para baixo de acordo com o acionador da função. Ela também recebe o tempo de animação e uma função de callback como parametro.
A função .slideToggle() permite que façamos que o conteúdo sem mova de cima para baixo de acordo com o acionador da função. Ela também recebe o tempo de animação e uma função de callback como parametro.
Aula 8 - Animate, interval e timeout
A função .animate() permite que passemos um objeto com
propriedades que serão executadas para animar o elemento. Além
desse parametro podemos definir o tempo da animação e uma função
de callback. Segundo a documentação cores não podem ser
manipuladas a menos que tenhamos o JQuery.Color plugin.
Notar que a sintaxe de algumas propriedades CSS no
.animate() são como no JS (ex: margin-left = marginLeft).
A diferença entre o setTimeout() e o setInterval() é que o primeiro executa o intervalo uma única vez, enquanto o segundo se repete.
Para parar o setTimeout() utilizamos a função clearTimeout().
O setInterval() executa uma função no tempo determinado. Para encerrar a execução do setInterval() utilizamos a função clearInterval().
A diferença entre o setTimeout() e o setInterval() é que o primeiro executa o intervalo uma única vez, enquanto o segundo se repete.
Para parar o setTimeout() utilizamos a função clearTimeout().
O setInterval() executa uma função no tempo determinado. Para encerrar a execução do setInterval() utilizamos a função clearInterval().
Aula 9 - Manipulando classes dinamicamente
Podemos adicionar ou remover classes com o JQuery com as funções
.addClass() e .removeClass().
A função .find() procura elementos dentro <<<<<<< HEAD do elemento seletor.
Podemos manipular atributos criados em tags com a função .attr('nome_do_atributo', 'valor_do_atributo')
A função .find() procura elementos dentro <<<<<<< HEAD do elemento seletor.
Podemos manipular atributos criados em tags com a função .attr('nome_do_atributo', 'valor_do_atributo')
Aula 10 - Clonar e mover elementos
A função .clone() clona o elemento selecionado e permite
que colemos em outro local. Uma vez utilizado o elemento ele é
removido da memória e para ser reutilizado deve ser reatribuido.
Já quando apontamos diretamente para o elemento e utilizamos a função .append() ou .prepend() o objeto é movido para o destino.
Já quando apontamos diretamente para o elemento e utilizamos a função .append() ou .prepend() o objeto é movido para o destino.
Aula 11 - O que é ajax
AJAX é o sistema de comunicação entre o front-end e o
servidor ou segundo o site da
Hostinger
"AJAX significa Asynchronous JavaScript and XML, ou JavaScript
e XML Assíncronos, em bom português. Ele é um conjunto de
técnicas de desenvolvimento voltado para a web que permite que
aplicações trabalhem de modo assíncrono, processando qualquer
requisição ao servidor em segundo plano."
A sintaxe para utilizar a inclusão de dados externos demonstrada na aula com AJAX se resume a recuperar uma linha de código de outro arquivo. Para isso utilizamos a seguinte função:
Note que com esse código apenas recuperamos o texto do arquivo indicado e utilizamos o valore de retorno para fazer um .append() no documento (o arquivo criado na aula tinha a extenção .html mas fiz com .txt e funcionou da mesma forma). A sintaxe completa sugerida pelo lint do JQuery é:
A sintaxe para utilizar a inclusão de dados externos demonstrada na aula com AJAX se resume a recuperar uma linha de código de outro arquivo. Para isso utilizamos a seguinte função:
$.ajax({
'url':'conteudo.txt',
//'method':'post',
//data:{'nome':'guilherme','idade':'23'}
}).done(function(data){
console.log(data);
$('#container').append(data);
});
Note que com esse código apenas recuperamos o texto do arquivo indicado e utilizamos o valore de retorno para fazer um .append() no documento (o arquivo criado na aula tinha a extenção .html mas fiz com .txt e funcionou da mesma forma). A sintaxe completa sugerida pelo lint do JQuery é:
$.ajax({
type: "method",
url: "conteudo.html",
data: "data",
dataType: "dataType",
success: function (response) { }
});
Aula 12 - Criando janela modal e formulário
Nesta aula vamos criar uma função para apresentar um modal ao
clicar em um botão. O botão na verdade é uma <div> com uma box
que se comporta como um botão. Para o modal utilizamos um
display: none e aplicamos um efeito
.fadeIn() para remover essa propriedade. Poderíamos
também utilizar a função .show() que transforma a
propriedade para display: block, porém sem o efeito de
transição e a função .hide().
Em seguida criamos o formulário sem grandes novidades e criamos as funções de .click() para abrir e fechar o modal.
Utilizamos nas funções o .stopPropagation() para evitar a repercussão do evento em locais indesejados.
O posicionamento dos elementos foi feito com position: absolute.
Em seguida criamos o formulário sem grandes novidades e criamos as funções de .click() para abrir e fechar o modal.
Utilizamos nas funções o .stopPropagation() para evitar a repercussão do evento em locais indesejados.
O posicionamento dos elementos foi feito com position: absolute.
Aula 13 a 14 - Expressões Regulares / Finalizando validação
Explicação superficial sobre
Expressões Regulares.
Em seguida fizemos um teste lógico para validação dos campos do formulário. Na primeira parte validamos apenas o nome. Meu código ficou um pouco diferente da aula pois ajustei algumas coisas do meu jeito.
Na sequencia foi feita a validação do telefone e e-mail. Na aula foi feito um encadeamento de if/else if/else para chamar as funções de cada parametro.
Eu fiz o encademento das funções, passando os campos a serem verificados por parametro. Para os parametros da RegEx do e-mail eu utilizei o formato pre-definido no site RegExr.
Em seguida fizemos um teste lógico para validação dos campos do formulário. Na primeira parte validamos apenas o nome. Meu código ficou um pouco diferente da aula pois ajustei algumas coisas do meu jeito.
Na sequencia foi feita a validação do telefone e e-mail. Na aula foi feito um encadeamento de if/else if/else para chamar as funções de cada parametro.
Eu fiz o encademento das funções, passando os campos a serem verificados por parametro. Para os parametros da RegEx do e-mail eu utilizei o formato pre-definido no site RegExr.
Aula 15 - Navegação sem atualizar e API JQuery
Criamos uma página simples com um menu para abrirmos outras
páginas. Em seguida iniciamos o JQuery criando um evento de
listener no click dos elementos da página (fizemos isso
utilizando como referencia o this para selecionar o
elemento clicado).
Feito isso iniciamos uma função AJAX para manipular as requisições. A documentação do AJAX no JQuery está no site JQuery.ajax(). Vamos estudar alguma propriedades do JQery.ajax(). A primeira é beforeSend que executa uma callback antes de enviar a requisição. A propriedade timeout recebe um valor numérico em milisegundos para aguardar para o início da requisição.
Outra propriedade é a error que executa uma função em caso de erro na requisição. E por fim temos a propriedade success que retorna uma callback que executa a ação em caso de sucesso, ou seja, apresenta a resposta recebida pelo AJAX. Com isso ao clicarmos nos itens do menu, apresentamos na <div> criada no html o conteudo recebido pelo AJAX e inserido através da função JQuery .html()
Em seguida analisamos os parametros da callback de error e por fim fizemos um efeito de .fadeIn() para apresentação das páginas.
Feito isso iniciamos uma função AJAX para manipular as requisições. A documentação do AJAX no JQuery está no site JQuery.ajax(). Vamos estudar alguma propriedades do JQery.ajax(). A primeira é beforeSend que executa uma callback antes de enviar a requisição. A propriedade timeout recebe um valor numérico em milisegundos para aguardar para o início da requisição.
Outra propriedade é a error que executa uma função em caso de erro na requisição. E por fim temos a propriedade success que retorna uma callback que executa a ação em caso de sucesso, ou seja, apresenta a resposta recebida pelo AJAX. Com isso ao clicarmos nos itens do menu, apresentamos na <div> criada no html o conteudo recebido pelo AJAX e inserido através da função JQuery .html()
Em seguida analisamos os parametros da callback de error e por fim fizemos um efeito de .fadeIn() para apresentação das páginas.
Aula 16 - Animar elementos com base no scrolltop
Nessa aula iniciamos monitorando o movimento vertical da tela com
a função .scroll(). Criamos uma função que percorre todos
os elementos com a classe secao e atribui a variáveis os
valores de .scrollTop()(monitora a posição da tela),
.height()(monitora o tamanho atual da tela) e
.offset() (verifica a posição dos elementos mapeados pelo
.each()).
Em seguida fizemos uma fórmula com esses valores para calcular qual elemento está ativo e aplicamos um estilo para fazer um borda inferior no menu.
Em seguida fizemos uma fórmula com esses valores para calcular qual elemento está ativo e aplicamos um estilo para fazer um borda inferior no menu.
Aula 17 - Criando slider do zero responsivo
Criamos um sistema de slider com JQuery mas achei um pouco
confuso e verboso. A maior vantagem é em utilizar as funções
.fadeIn() e .fadeOut() para fazer as transições.
Aula 18 - Tudo sobre plugins e como utilizar
Nesta aula vamos verificar alguns plugins de JQuery para otimizar
algumas tarefas.
jsSocials: Ajuda na criação de links para redes sociais. Necessita do Font Awesome para apresentar os ícones e demais formatações. Cria os links dinamicos para as redes sociais que ele disponibiliza.
O próximo plugin é o jQuery Mask Plugin. Esse plugin adiciona a função .mask() que permite criarmos as mascaras conforme necessário, aplicando diretamente no campo.
Mais um plugin é o FancyBox (esse site foi discontinuado) ou a nova versão Fancybox. Eu utilizei a versão 4.0 em CDN mas na aula foi utilizada a versão 2. A versão 4 é completamente diferente da utilizada na aula, portanto busquei a anterior e refiz o projeto. Esse plugin permite criar display de imagens apenas com a função .fancybox() aplicada aos links de imagens.
jsSocials: Ajuda na criação de links para redes sociais. Necessita do Font Awesome para apresentar os ícones e demais formatações. Cria os links dinamicos para as redes sociais que ele disponibiliza.
O próximo plugin é o jQuery Mask Plugin. Esse plugin adiciona a função .mask() que permite criarmos as mascaras conforme necessário, aplicando diretamente no campo.
Mais um plugin é o FancyBox (esse site foi discontinuado) ou a nova versão Fancybox. Eu utilizei a versão 4.0 em CDN mas na aula foi utilizada a versão 2. A versão 4 é completamente diferente da utilizada na aula, portanto busquei a anterior e refiz o projeto. Esse plugin permite criar display de imagens apenas com a função .fancybox() aplicada aos links de imagens.
Aula 19 - Aplicando menu mobile nos projetos: Projeto #3
Projeto #4
Nesta aula substituimos o método de acionamento do
hamburguer menu que era feito através de hover na
<ul>. O clique no icone do menu fazia a mudança da opacidade
do menu de '0' para '1' apresentando-o na tela. Fiz essa mudança
utilizando a mesma técnica porém monitorando o evento
click() através do JQuery, sem fazer mais nenhuma mudança
no CSS alén de remover o hover. Entretanto existe uma
forma mais simples de executar esse menu. Removemos a propriedade
opacity e passamos para display: none. Com isso
utilizamos a função do JQuery .slideToggle() que modifica
o display: none para display: block. Precisamos,
nesse caso remover também a transition do CSS pois a
função do JQuery já tem uma transition por padrão.
O mesmo foi aplicado ao projeto 4.
O mesmo foi aplicado ao projeto 4.
Aula 20 - Scroll dinamico nos menus: Projeto #3
Projeto #4
Nesta aula criamos uma animação para o
scroll da tela no clique dos itens do menu. Utilizamos a
mesma função do HTML de selecionar as seções pelo id mas
fizemos uma animação do evento de clique recuperando o valor do
.offset().top e utilizando a função .animate().
O scrollTop é uma propriedade da função
.animate().
Aula 21 - Criando slider
Para fazer o slider utilizamos a mesma base que para o
scroll, porém utilizando o .offset().left e utilizando a
propriedade scrollLeft no .animate().
Outro problema é em relação ao redimensionamento da tela que faz com que o tamanho do espaço lateral seja redimensionado, quebrando o slider. Para isso monitoramos o evento window.resize() e zeramos o scrollLeft.
Outro problema é em relação ao redimensionamento da tela que faz com que o tamanho do espaço lateral seja redimensionado, quebrando o slider. Para isso monitoramos o evento window.resize() e zeramos o scrollLeft.
Aula 22 a 23 - Sistema de pesquisa / Formatando números
Nessa aula fizemos a animação da slide bar de preço na página de
venda do projeto #5. Para isso utilizamos listeners de mouse
.mousedown() e .maouseup(). Utilizamos também um
listener mousemove() que retorna os valores (no caso do
eixo X) de movimento do mouse.
Para evitar que o mouse quando ativado selecione textos no corpo da tela utilizamos uma propriedade CSS user-select que desabilita a seleção enquanto estivermos segurando o botão do mouse para deslizar a barra.
Para fazer a formatação do número foi feita uma função que divide o numero em um array e remonta o número recuperando os valores pelos índices. Minha resolução foi baseada em simplificação dos valores utilizando fórmulas matemáticas.
Para evitar que o mouse quando ativado selecione textos no corpo da tela utilizamos uma propriedade CSS user-select que desabilita a seleção enquanto estivermos segurando o botão do mouse para deslizar a barra.
Para fazer a formatação do número foi feita uma função que divide o numero em um array e remonta o número recuperando os valores pelos índices. Minha resolução foi baseada em simplificação dos valores utilizando fórmulas matemáticas.
Aula 24 - Projeto #5 - Slider personalizado
Para iniciar esse slider removemos as propriedades CSS que faziam
o dimensionamento e divisão dos espaços para as miniaturas de
imagens e criamos essas propriedades dinamicamente no JS fazendo o
cálculo baseado na quantidade de imagens (qtd =
$('.mini-img-wraper').length * 33.3).
Em seguida foi feita a animação do slider. Para isso fizemos uma verificação do índice atual em relação ao índice máximo para fazer um incremento desse índice e fazer as movimentações utilizando a função .offset().left. Não entendi porque utilizamos o .offset().left e a propriedade do .animate() scrollLeft tanto para movimentar o slide para a esquerda quanto para a direita.
Para aplicar o destaque na imagem selecionada criamos uma função para monitorar o evento de clique na imagem, aplicamos uma cor de fundo tranparente em todos os elementos e aplicamos a cor desejada apenas no elemento selcionado utilizando o seletor this.
Para definir a imagem de destaque selecionamos com o this clicado anteriormente a imagem desse elemento. No nosso exemplo precisamos buscar o elemento filho do elemento selecionado que é o elemento que armazena a propriedade com a imagem. Fazemos isso utilizando a função .children() e selecionando a background-image com a função .css().
Para que seja apresentada uma imagem default como se estivesse pré selecionada utilizamos o seletor das imagens seguido de .eq(0).click(). Essa função simula o clique no índice '0' das imagens.
Para finalizar fizemos o scroll na página inicial para a aba de contato, utilizando para isso um atributo criado nas <div> do menu.
Em seguida foi feita a animação do slider. Para isso fizemos uma verificação do índice atual em relação ao índice máximo para fazer um incremento desse índice e fazer as movimentações utilizando a função .offset().left. Não entendi porque utilizamos o .offset().left e a propriedade do .animate() scrollLeft tanto para movimentar o slide para a esquerda quanto para a direita.
Para aplicar o destaque na imagem selecionada criamos uma função para monitorar o evento de clique na imagem, aplicamos uma cor de fundo tranparente em todos os elementos e aplicamos a cor desejada apenas no elemento selcionado utilizando o seletor this.
Para definir a imagem de destaque selecionamos com o this clicado anteriormente a imagem desse elemento. No nosso exemplo precisamos buscar o elemento filho do elemento selecionado que é o elemento que armazena a propriedade com a imagem. Fazemos isso utilizando a função .children() e selecionando a background-image com a função .css().
Para que seja apresentada uma imagem default como se estivesse pré selecionada utilizamos o seletor das imagens seguido de .eq(0).click(). Essa função simula o clique no índice '0' das imagens.
Para finalizar fizemos o scroll na página inicial para a aba de contato, utilizando para isso um atributo criado nas <div> do menu.
Aula 25 - Projeto #5 - Manipulando URL's e Adendos
Nessa aula vamos manipular a URL do site para acessar os páginas
através dos parametros de endereço HTTP. Criamos uma variável com
o caminho para a página a ser manipulada. Em seguida definimos o
caminho relativo da página que queremos indexar e chamamos a
função do JS location.href para passar a URL completa com
o parametro definido.
Essa abordagem é pouco programática pois precisamos alterar todas as tags de contato (do header e do footer) em todas as páginas. Talvez seja possível fazer essas alterações de outro modo (incluindo a propriedade através do JS).
Em seguida foi criada a função para acionar o menu hamburguer.
Finalizando fizemos um slider para fazer a navegação dos depoimentos. Utilizamos um método sememlhante ao feito na aula 24 para o slider das fotos de carros, porém utilizando as funções .hide() e .show() nos elementos para alternar qual é mostrado e ocultar os demais (nesse caso manipulamos os elementos e não as propriedades CSS).
Essa abordagem é pouco programática pois precisamos alterar todas as tags de contato (do header e do footer) em todas as páginas. Talvez seja possível fazer essas alterações de outro modo (incluindo a propriedade através do JS).
Em seguida foi criada a função para acionar o menu hamburguer.
Finalizando fizemos um slider para fazer a navegação dos depoimentos. Utilizamos um método sememlhante ao feito na aula 24 para o slider das fotos de carros, porém utilizando as funções .hide() e .show() nos elementos para alternar qual é mostrado e ocultar os demais (nesse caso manipulamos os elementos e não as propriedades CSS).
Aula 26 - Projeto #4 - Slick Slider
Nesta aula vamos utilizar o plugin
slick
para criação de um slider tipo carousel. Esse plugin requer
o jQuery 1.7+.
Uma vez carregado o plugin (tanto o arquivo .css quanto o .js) podemos chamar a função .salick() diretamente no seletor que queremos aplicar o slider na sintaxe do jQuery. Os parametros básicos do .slick() são:
Esse código faz com que apresentemos 'n' slides na tela com um scroll. A propriedade breakpoint funciona como a @media e define os pontos de mudança de resolução para projetos responsivos.
Outro ajuste feito foi para as arrows que deixamos em uma segunda parte do projeto. Fizemos algumas alterações no CSS padrão do slick para personalizar os botões de rolagem.
Uma vez carregado o plugin (tanto o arquivo .css quanto o .js) podemos chamar a função .salick() diretamente no seletor que queremos aplicar o slider na sintaxe do jQuery. Os parametros básicos do .slick() são:
$('seletor').slick({
centerMode: false,
slidesToShow: 6,
arrows: false,
responsive: [
{
breakpoint: 850,
settings: {
arrows: false,
centerMode: true,
slidesToShow: 3,
},
}, {...}
]
});
Esse código faz com que apresentemos 'n' slides na tela com um scroll. A propriedade breakpoint funciona como a @media e define os pontos de mudança de resolução para projetos responsivos.
Outro ajuste feito foi para as arrows que deixamos em uma segunda parte do projeto. Fizemos algumas alterações no CSS padrão do slick para personalizar os botões de rolagem.
Aula 27 - Criando plugin próprio
Podemos criar plugins no jQuery (na verdade parecem funções
construtoras) utilizando a função
.fn. A sintaxe é a seguinte:
$.fn.nomeDaFunção = function(){
corpo da função
};
Analisando a documentação do jQuery podemos verificar sintaxes para construção de funções mais complexas, como no exemplo que utiliza objetos como parametro e seta valores default.
$.fn.nomeDaFunção = function(){
corpo da função
};
Analisando a documentação do jQuery podemos verificar sintaxes para construção de funções mais complexas, como no exemplo que utiliza objetos como parametro e seta valores default.
13 - Toques Finais
Aula 03 a Aula 04 - Formulário de contato e disparo de email /
Otimizando formulário de contato
Nesta aula foi utilizado um plugin
jQuery Form Plugin
porém o download não está funcionando. Podemos utilizar a versão
baixada no site da aula.
No mais foi apenas feita a configuração de um script PHP que não foi explicado. Como não é meu objetivo essa instalação deixei para verificar essa configuração se necessário.
Foi criado uma rotina para otimizar o envio de email através do formulário. Não deixei as funções ativas.
A URL amigável na verdade remove a extensão dos arquivos na URL através de PHP, que na verdade passa a ser o host da página e apenas remove a extensão.
No mais foi apenas feita a configuração de um script PHP que não foi explicado. Como não é meu objetivo essa instalação deixei para verificar essa configuração se necessário.
Foi criado uma rotina para otimizar o envio de email através do formulário. Não deixei as funções ativas.
A URL amigável na verdade remove a extensão dos arquivos na URL através de PHP, que na verdade passa a ser o host da página e apenas remove a extensão.
Aula 05 - URL Amigável
A URL amigável na verdade remove a extensão dos arquivos na URL
através de PHP, que na verdade passa a ser o host da página e
apenas remove a extensão. A extensão é inserida nos arquivos pelo
PHP apenas na chamada de cada página, portanto não é necessária a
extensão do arquivo.
Foi criado um arquivo .htaccess que não foi explicado para que serve.
Foi criado um arquivo .htaccess que não foi explicado para que serve.
Aula 06 - Recortando o site
Aqui foram removidos o <header> e o <footer> de todas as
páginas e unificado no
index.php. Dessa forma ficamos com os menus fixos e apenas
as páginas de conteudo dinamicas. Em seguida precisamos ajustar o
JS/JQuery para identificar a página que está selecionada.
Aula 07 - Aplicando Analytics
Criar conta no
Google Analytics
e demais configurações para telemetria do site. Criação da tag
para inserir nas páginas a serem monitoradas.
14 - Criando template de E-mail com HTML/CSS
Aula 01 a 02 - Introdução ao módulo / Exemplos práticos e
limitações
Dicas sobre como utilizar HTML e CSS em criação de e-mail para
marketing digital.
Estilos como Flexbox não são possíveis e a maioria das criações é feita com tabelas.
Estilos como Flexbox não são possíveis e a maioria das criações é feita com tabelas.
Aula 03 a 04 - Criando template / Finalizando template de e-mail
A estrutura HTML para o e-mail marketing é diferente do HTML5
padrão pois utiliza a padronização antiga.
Não é recomendado utilizar alguns estilos CSS, portanto devemos em certas situações utilizar propriedades HTML como bgcolor.
Devido as limitações do HTML não podemos fazer alguns ajustes com CSS porém podemos utilizar alguns recursos já deprecados além de alguns métodos utilizados no início da WEB como criar tabelas dentro de tabelas de modo a ajustar os espaços através delas.
Caso seja necessário alinhar apenas parte dos dados por algum dos campos da tabela ser menor que o outro podemos utilizar a propriedade HTML valign (top, bottom, middle).
Para finalizar foi criado um rodapé para o documento.
Para validar o documento devemos consultar o site Validator W3C porém o site estava fora do ar e não fez a checagem.
Outro aspecto. As imagens não serão exibidas no email. Para isso devemos inserir um link e manter as imagens em um servidor publico.
Não é recomendado utilizar alguns estilos CSS, portanto devemos em certas situações utilizar propriedades HTML como bgcolor.
Devido as limitações do HTML não podemos fazer alguns ajustes com CSS porém podemos utilizar alguns recursos já deprecados além de alguns métodos utilizados no início da WEB como criar tabelas dentro de tabelas de modo a ajustar os espaços através delas.
Caso seja necessário alinhar apenas parte dos dados por algum dos campos da tabela ser menor que o outro podemos utilizar a propriedade HTML valign (top, bottom, middle).
Para finalizar foi criado um rodapé para o documento.
Para validar o documento devemos consultar o site Validator W3C porém o site estava fora do ar e não fez a checagem.
Outro aspecto. As imagens não serão exibidas no email. Para isso devemos inserir um link e manter as imagens em um servidor publico.
15 - Criando Layout no Photoshop e Conhecendo Font Awesome
Aula 01 a 02 - Conhecendo o módulo e instalando o Photoshop /
Configurando o Photoshop e iniciando o Layout
Para esse curso alteramos algumas configurações em
Editar->Preferencias->Geral->Unidades e Réguas Réguas:
Pixels e Texto: Pixels.
O documento inicial criado foi personalizado para:
Largura: 1440 Pixels;
Altura: 3000 Pixels;
Resolução: 300 Pixels/Polegada;
Modo de Cores: Cores CMYK;
Conteudo Plano de Fundo: Transparente;
Perfil de Cor: Coated FOGRA27;
O documento inicial criado foi personalizado para:
Largura: 1440 Pixels;
Altura: 3000 Pixels;
Resolução: 300 Pixels/Polegada;
Modo de Cores: Cores CMYK;
Conteudo Plano de Fundo: Transparente;
Perfil de Cor: Coated FOGRA27;
Aula 03 a 04 - Criando novas sessões - layers / Novas layers,
fontes e mais
Iniciando design no Photoshop. Incluindo layers e imagens, criando
blocos de textos e criando botão (podemos ajustar as bordas de um
retangulo em Propriedades->Propriedades de forma viva na aba
lateral).
Instalando fontes externas e o Font Awesome (o Font Awesome tem uma opção de download que permite a instalação em Desktop e a utilização em aplicações locais, inclusive com arquivos em SVG. Verificar a documentação para inclusão dos icones).
O bullet point pode ser obtido com a combinção Alt + 0149.
Atenção para a ordem das layers no Photoshop pois a ordem errada muda o posicionamento no eixo z.
No mais foi apenas a montagem do site organizando as diversas camadas.
Instalando fontes externas e o Font Awesome (o Font Awesome tem uma opção de download que permite a instalação em Desktop e a utilização em aplicações locais, inclusive com arquivos em SVG. Verificar a documentação para inclusão dos icones).
O bullet point pode ser obtido com a combinção Alt + 0149.
Atenção para a ordem das layers no Photoshop pois a ordem errada muda o posicionamento no eixo z.
No mais foi apenas a montagem do site organizando as diversas camadas.
Aula 08 - Implementando nova sessão no Projeto#3 com Font-Awesome
Criamos uma nova seção para a página utilizando o Font Awesome.
Note que a versãop que eu utilizei é mais nova que a utilizada na
aula, dessa forma tive que importar alguns arqivos CSS a mais,
além do nome utilizado para o diretório das fontes.
Fizemos os ajustes do CSS e das media queries
Fizemos os ajustes do CSS e das media queries
16 - Flexbox Layout e FrameWorks
Aula 01 a 03 - O que é Flexbox / Criando mini framework flexbox
1/1 e 1/2
Introdução ao flexbox. Conceito de grid ou tabela da
construção com display: flex.
Começamos a criar uma estrutura composta de classes CSS que definem padrões de posicionamento e outras estilizações pre-definidas como é feito nos frameworks como Bootstrap e Materialize. Analisando o CSS é possivel verificar classes genéricas que permitem ajustar qualquer parte do documento.
A propriedade flex-wrap controla a propriedade do display: flex de ajustar os elementos na mesma linha ou quebrar as linhas caso estoure o tamanho do grid.
Na sequencia fizemos mais algumas seções para a página. Um detalhe foi para ajustar o alinhamento vertical. Tanto na aula, quanto eu, não conseguimos ajustar o alinhamento vertical do item.
Começamos a criar uma estrutura composta de classes CSS que definem padrões de posicionamento e outras estilizações pre-definidas como é feito nos frameworks como Bootstrap e Materialize. Analisando o CSS é possivel verificar classes genéricas que permitem ajustar qualquer parte do documento.
A propriedade flex-wrap controla a propriedade do display: flex de ajustar os elementos na mesma linha ou quebrar as linhas caso estoure o tamanho do grid.
Na sequencia fizemos mais algumas seções para a página. Um detalhe foi para ajustar o alinhamento vertical. Tanto na aula, quanto eu, não conseguimos ajustar o alinhamento vertical do item.
Aula 04 a 06 - Materialize framework 1/3 a 3/3
Primeiramente instalamos os arquivos base do
Materialize seguindo as
orientações da documentação do Framework.
Iniciamos criando a navbar. As classes container ajustam o contexto para que a página fique responsiva. Foram utilizadas classes para definição de cor. Para o menu utilizamos uma classe hide-on-med-and-down que oculta o menu em determinado tamanho de tela.
Para o menu responsivo as classes são diferentes das apresentadas na aula (diferença de versão). De qualquer modo está tudo documentado no site do framework.
Continuando iniciamos a criação do corpo da página. Entre alguns detalhes das classes a utilização de cores utiliza as classes com os nomes das cores. Caso desejemos aplicar a cor na fonte utilizamos nome_da_cor-text text-efeito_cor.
O Materialize utiliza o sistema de grid de 12 colunas acessados através das classes col l#, col m#, col s# (para tamnhos de tela large, medium e small) onde # é um número de 1 a 12. Podemos combinar essas classes para ajustar a tela com responsividade.
Para a utilização de icones utilizamos a tag <i class="material-icons">nome_do_icone</i>.
A classe icon-block é uma classe criada no arquivo style.css que faz com que o tamanho das fontes sejam herdadas, mas essa classe não é do materialize.
Para a seção do footer utilizamos o modelo da documentação do materialize como modelo (as outra também eram porém foi digitada passo a passo). Note que quando definimos uma cor na classe principal da seção as variações de cor são ajustadas automaticamente.
Quando a combinação do numero de colunas do grid não totalizar 12 podemos incluir a classe offset-.
Iniciamos criando a navbar. As classes container ajustam o contexto para que a página fique responsiva. Foram utilizadas classes para definição de cor. Para o menu utilizamos uma classe hide-on-med-and-down que oculta o menu em determinado tamanho de tela.
Para o menu responsivo as classes são diferentes das apresentadas na aula (diferença de versão). De qualquer modo está tudo documentado no site do framework.
Continuando iniciamos a criação do corpo da página. Entre alguns detalhes das classes a utilização de cores utiliza as classes com os nomes das cores. Caso desejemos aplicar a cor na fonte utilizamos nome_da_cor-text text-efeito_cor.
O Materialize utiliza o sistema de grid de 12 colunas acessados através das classes col l#, col m#, col s# (para tamnhos de tela large, medium e small) onde # é um número de 1 a 12. Podemos combinar essas classes para ajustar a tela com responsividade.
Para a utilização de icones utilizamos a tag <i class="material-icons">nome_do_icone</i>.
A classe icon-block é uma classe criada no arquivo style.css que faz com que o tamanho das fontes sejam herdadas, mas essa classe não é do materialize.
Para a seção do footer utilizamos o modelo da documentação do materialize como modelo (as outra também eram porém foi digitada passo a passo). Note que quando definimos uma cor na classe principal da seção as variações de cor são ajustadas automaticamente.
Quando a combinação do numero de colunas do grid não totalizar 12 podemos incluir a classe offset-.
Aula 07 a 08 - Bootstrap 1/4 a 2/4
Explicação sobre o sistema de grids do Bootstrap.
Na criação primmeeiramente criamos uma visualização de grids com as classes row e col-md-4.
Em seguida incluimos um menu dropdown utilizando a documentação.
Testamos alguns botões e a aplicação de estilos próprios em conjunto com o bootstrap.
Em seguida criamos um menu utilizando algumas classes bootstrap mesclado com alguma estilização em CSS.
Na criação primmeeiramente criamos uma visualização de grids com as classes row e col-md-4.
Em seguida incluimos um menu dropdown utilizando a documentação.
Testamos alguns botões e a aplicação de estilos próprios em conjunto com o bootstrap.
Em seguida criamos um menu utilizando algumas classes bootstrap mesclado com alguma estilização em CSS.
Aula 09 - Bootstrap 3/4
Nesta aula recuperamos uma Navbar diretamente dos modelos do
Bootstrap. Como estou utilizando a Versão 4.6.0 existem algumas
diferenças. A principal é quanto aos ícones que na versão 3 vinham
com a distribuição. A partir da versão 4 os ícones foram excluidos
e devem ser instalados manualmente. Para evitar ficar travado na
aula estou exportando a biblioteca externa via CSS.
Utilizamos aqui além da Navbar, um modelo de Jumbotron uma demonstração dos botões e criamos umas tabelas utilizando a classe table fazendo aguns ajustes de grid layout.
Como dito algumas classes mudaram. Um dos exemplos é a antiga classe navbar-fixed-top que mudou para apenas fixed-top.
Para o efeito de badge também tivemos algumas alterações nas classes mas está tudo na documentação. Foi feito um script em jQuery para a seleção dos elementos com as badges. Não lembrava direito a sintaxe do jQuery preciso estudar novamente.
Em seguida incluimos alguns alert com uma lógica em jQuery para ser mostrado conforme o clique na nav-pill.
A próxima implemantação foi de uma progressbar. Para ela foi criado um setinterval() para ajustar o incremento da propriedade width do elemento. Outro modo de fazer é utilizando a função animate().
Utilizamos aqui além da Navbar, um modelo de Jumbotron uma demonstração dos botões e criamos umas tabelas utilizando a classe table fazendo aguns ajustes de grid layout.
Como dito algumas classes mudaram. Um dos exemplos é a antiga classe navbar-fixed-top que mudou para apenas fixed-top.
Para o efeito de badge também tivemos algumas alterações nas classes mas está tudo na documentação. Foi feito um script em jQuery para a seleção dos elementos com as badges. Não lembrava direito a sintaxe do jQuery preciso estudar novamente.
Em seguida incluimos alguns alert com uma lógica em jQuery para ser mostrado conforme o clique na nav-pill.
A próxima implemantação foi de uma progressbar. Para ela foi criado um setinterval() para ajustar o incremento da propriedade width do elemento. Outro modo de fazer é utilizando a função animate().
17 - Projeto #6
Aula 01 a 02 - Projeto #6 1/7 / 2/7
Introdução do projeto, criação dos arquivos e inclusão das fontes.
Fiz a inclusão de todos localmente (FontAwesome e Open Sans).
Em seguida criamos os itens do menu principal, com a inclusão de icones.
Todo o posicionamento foi feito com position: absolute / relative e com float.
Foi criado um layer para sobrepor a página e fazer um efeito opaco (utilizando RGBA(0,0,0,0.7)).
Em seguida criamos os itens do menu principal, com a inclusão de icones.
Todo o posicionamento foi feito com position: absolute / relative e com float.
Foi criado um layer para sobrepor a página e fazer um efeito opaco (utilizando RGBA(0,0,0,0.7)).
Aula 03 a 7 - Projeto #6 3/7 a 7/7
Continuação do projeto com a criação do texto do header. Aqui como
estou importando as fontes localmente tive que utilizar mais de
uma font-family para poder utilizar a propriedade
lighter. Essa é a desvantagem de utilizar as fontes locais.
Quando utilizamos o link relativo para as fontes as variações de
fontes como light e bold são importados
automaticamente.
A seguir criamos as box utilizando o display: flex. Fiz aqui do meu jeito, um pouco diferente da aula mas o resultado foi o mesmo.
Em seguida criamos uma seção com efeito parallax.
Basicamente foi feito uma série de estilizações para a seção mas a propriedade fundamental para o efeito é a background-attachment: fixed;
Criação do formulário de contato e dos cards da equipe. Aqui foi utilizado o float ao invés de utilizar o display: flex. Foi basicamente um trabalho de criar os estilos e basea-los no width de 50% para criar duas seções horizontais e depois aplicar a mesma técnica para dividir uma das seções em 2.
Para criar o menu responsivo foi utilizado o display: none para ocultar o menu fazendo sua alteração com a media query.
Para apresentar o menu ao clicar no ícone foi criada uma rotina em jQuery utilizando as funções fadeIn() e fadeOut().
A seguir criamos as box utilizando o display: flex. Fiz aqui do meu jeito, um pouco diferente da aula mas o resultado foi o mesmo.
Em seguida criamos uma seção com efeito parallax.
Basicamente foi feito uma série de estilizações para a seção mas a propriedade fundamental para o efeito é a background-attachment: fixed;
Criação do formulário de contato e dos cards da equipe. Aqui foi utilizado o float ao invés de utilizar o display: flex. Foi basicamente um trabalho de criar os estilos e basea-los no width de 50% para criar duas seções horizontais e depois aplicar a mesma técnica para dividir uma das seções em 2.
Para criar o menu responsivo foi utilizado o display: none para ocultar o menu fazendo sua alteração com a media query.
Para apresentar o menu ao clicar no ícone foi criada uma rotina em jQuery utilizando as funções fadeIn() e fadeOut().