Desenvolvimento Web Front End
Introdução, Revisão
Daves Martins
[email protected]
---------------------------------------------------
Professor Uniacademia e Vianna jr
Analista de Sistema - UFJF
Professor Efetivo IFET – JF – 20 horas
----------------------------------------------------
Mestre em Computação de Alto Desempenho - UFRJ
Doutorando em Engenharia Elétrica - UFJF
• Texto
Planejamento
Revisão
Aplicação Web, SPA, PWA
Revisão Css
Responsividade – FlexBox, GridLayout
SPA - React
Ferramentas
VsCode
Plugins
Live Server
Emmet
Prettier - Code formatter
Live Share
IntelliSense for CSS class name in HTML
Conta no github e netfly
Revisão
Servidor web, HTTP
http://frontend.sytes.net
Request Servidor Web
Internet
Response
HTML, CSS, JS
HTML, CSS, JS
HTML, CSS, JS
HTML, CSS, JS
Aplicação Web,
SPA, PWA
Aplicação web, websites
Aplicações Web comuns realizam um fluxo de atividades de
visualização e requisição HTTP, com algumas interações
dinâmicas via JavaScript.
Essas aplicações são baseadas em ações síncronas, sem
preocupação com performance ou experiência do usuário.
A arquitetura de Aplicações Web comuns costuma ser
bastante simples:
Aplicação web, websites
HTML: marcação de elementos
CSS: estilização de elementos – layout, fontes, cores…
JavaScript (Front-End): linguagem padrão para interações no
navegador
Linguagem Back-End: código escrito em uma linguagem como
Python, PHP, Java, JavaScript….
Navegador cliente: realiza requisições HTTP ao servidor Web
Servidor de Banco de Dados: armazena toda a informação do
sistema
Servidor Web: para processar uma resposta do banco de
dados e devolver uma resposta ao navegador
Aplicação web, websites
http://frontend.sytes.net
login: xxxxxxx
senha: xxxxx
Request Servidor Web
Internet
Response
Aplicação web, websites
http://frontend.sytes.net
login: xxxxxxx
senha: xxxxx
Request Servidor Web
Internet
Response
Java, C#,
NodeJs,
Python, Php,
etc...
SPA – Aplicações de Página Única
Aplicações SPA são compiladas para trabalhar
requisições/respostas assíncronas, criando-se distribuições
de software com interfaces super-leves baseadas em
componentes, com mecanismos para cache massivo no
navegador cliente.
A parte de lógica e dados é delegada a uma API segura, que
nada mais é que um outro sistema separado, com a função
exclusiva fornecer dados e responder às requisições da SPA.
Essa mesma API criada irá servir dados a outros APPs do
negócio, uma vez que já foram criadas rotas
fornecimento/consumo de informações do banco de dados.
SPA – Aplicações de Página Única
Que horas começa a aula?
WebSites x SPA
Request
Servidor Web
Response
WebSites x SPA
Request
Login: zezin
Senha: 123
Servidor Web
Response
A página de retorno
pode ser estática ou
dinâmica, gerado por
um backend
WebSites x SPA
Request
Servidor Web
Response
WebSites x SPA
Request Ajax
Login: zezin
Senha: 123
Servidor Web
Response Ajax
Backend gera um
json de resposta
PWA – Aplicações de Página Única
Um PWA é uma aplicação híbrida entre web e
mobile. Imagine que ao acessar um site que você
goste muito pelo smartphone você receba um aviso
para adicionar o site à sua homepage de
aplicativos.
Com o app instalado agora em seu celular, você
pode ter a mesma experiência que tinha pelo
browser agora sem nenhuma informação em tela
além da aplicação, ou seja, toda interface do
navegador como barra de endereço, botões,
favoritos, etc, são removidos.
https://blog.rocketseat.com.br/pwa-o-que-e-quando-utilizar/
Diferença entre website e spa
Request x Ajax
Navegação sem AJAX
AJAX
Termo surgiu em 2005
AJAX (Asynchronous JavaScript and XML) não é uma nova
tecnologia, mas sim uma combinação de tecnologias padrão
Tem como objetivo principal enriquecer a interação de
aplicações web
Combina as seguintes tecnologias:
HTML/XHTML e CSS
DOM
XML e XSLT
JavaScript
XMLHttpRequest
Navegação com AJAX
AJAX
Exemplo Requisição
com e sem Ajax
Requisição sem AJAX
https://davesmartins.github.io/code/requisicoes/semAjax/index.html
Requisição sem AJAX
Requisição com AJAX
https://davesmartins.github.io/code/requisicoes/comAjax/index.html
Requisição com AJAX
Revisão Css
Box Model
De forma simples e objetiva, baseado em um conceito chamado
“box model”, a grande maioria dos elementos HTML que
temos no nosso site são como caixas. Elas são containers
que armazenam conteúdos ou até mesmo outras caixas.
O modelo de caixa CSS é essencialmente uma caixa que envolve
todos os elementos HTML. Consiste em: margens, bordas,
preenchimento e o conteúdo real. A imagem abaixo ilustra o modelo
da caixa:
Box Model
Sentido da ordem: top, right, botton, left
Box Model
Box Model
Exemplo
Box Model
Exemplo
320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px
CSS - Box Sizing
A box-sizing propriedade CSS nos permite incluir o preenchimento e a borda
na largura e altura total de um elemento.
Sem a propriedade CSS box-sizing
Por padrão, a largura e a altura de um elemento são calculadas assim:
largura + preenchimento + borda = largura real de um elemento
altura + preenchimento + borda = altura real de um elemento
DIV – Block Level
Uma seção <div>, é um box que pode ser personalizado com
CSS:
DIV – Block Level
Tipos de Box
Dependendo do comportamento da box, podemos classificar um
elemento em uma de duas categorias: block-level e inline-level
Span – inline level
Propriedade display
A propriedade display (na MDN)
Define o tipo de visualização de um elemento e também seu
comportamento no fluxo da página
Os valores mais “tradicionais”
block, para definir um elemento com comportamento block
inline, similarmente, para inline
inline-block, similar a block, porém sem quebra de linha
none, sem renderização
flex, flexlayout
grid, gridlayout
https://davesmartins.github.io/code/display/index.html
Propriedade display
https://davesmartins.github.io/code/display/index.html
Propriedade display
https://davesmartins.github.io/code/display/index.html
50 px
Propriedade display
https://davesmartins.github.io/code/display/index.html
automático
Propriedade display
https://davesmartins.github.io/code/display/index.html
50 px
Propriedade display
https://davesmartins.github.io/code/display/index.html
50 px
Compondo Layout com css
Grids vs Flexbox vs Floats vs Position
Cada técnica tem seus usos, vantagens e desvantagens, e nenhuma
técnica é projetada para ser usada isoladamente.
Grids vs Flexbox – Técnicas modernas de montar layout
Floats vs Position – Técnicas legadas de montar layout
Propriedade position
Posição e Flutuação são métodos relativamente antigos em CSS para
personalizar o layout das páginas, às vezes chamados de Métodos de
Layout Legados ;
Flexbox e Grids são muito novos, às vezes chamados de Métodos de
Layout Modernos .
Propriedade position
A propriedade de posicionamento é basicamente usada para alterar a
posição natural do fuxo do layout do elemento na página e personalizá-
lo de acordo com nossas necessidades. Ele pode ser usado para fxar um
elemento em algum lugar da página, fornecer uma posição relativa ou
absoluta ou nenhuma posição especial. Existem vários tipos diferentes
de posicionamento que você pode aplicar em elementos HTML. Vamos
fazer um breve resumo sobre eles:
a propriedade position defne a posição de um elemento na página HTML
. Por padrão, seu valor é sempre defnido como static, ou seja,
acompanha o fuxo normal do posicionamento na página. Portanto, se
nada for especifcado, ele será posicionado conforme a ordem natural
dos elementos usados na página.
Propriedade position
https://davesmartins.github.io/code/position/
Valor Padrão,
obedecendo ao display
definido
Propriedade position
https://davesmartins.github.io/code/position/
Observe que o local onde
deveria estar fica
preservado.
Propriedade position
https://davesmartins.github.io/code/position/
Observe que o local onde
a div deveria estar não
fica reservador. A div
fica posicianada na
página.
Propriedade position
https://davesmartins.github.io/code/position/
Observe que o local onde a div
deveria estar não fica reservador.
Mas a div fica dentro de um
elemento Relative.
Propriedade position
https://davesmartins.github.io/code/position/
Para mostrar o sticky devemos ter
rolagem, forçei o bloco 3 a descer
para ter a rolagem, vejam que o bloco
1 sumiu e o 2 quase sumiu
Propriedade position
https://davesmartins.github.io/code/position/
Observem o comportamento do bloco
2, ele não some, fica fixo quando
atinge o limite de 25px
Propriedade float
O objetivo da foat propriedade CSS é, em geral, empurrar um elemento
de nível de bloco para a esquerda ou direita, retirando-o do fuxo em
relação a outros elementos de bloco.
Isso permite que o conteúdo de fuxo natural envolva o elemento
futuante. Geralmente, um elemento futuante deve ter uma largura
defnida explicitamente (a menos que seja um elemento substituído ,
como uma imagem).
Isso garante que o foat se comporte conforme o esperado e ajuda a
evitar problemas em determinados navegadores.
Para conseguir um layout de design para navegadores que não
entendem fexbox ou grade, usamos foat.
https://css-tricks.com/all-about-floats/
https://desenvolvimentoparaweb.com/css/css-float-consideracoes-dicas-
e-macetes-para-bons-layouts-na-web/
Propriedade float
atualmente o uso de CSS foat é mais restrito a situações específcas.
Embora não tenha desaparecido completamente, Flexbox e CSS Grid são
atualmente as soluções de facto para layouts na Web.
Propriedade float
https://davesmartins.github.io/code/float/
Sem uso do float, comportamento
padrão do display
Propriedade float
https://davesmartins.github.io/code/float/
Observe que o bloco 2 não ocupa a
linha e é ignorado pelo bloco 3
Propriedade float
https://davesmartins.github.io/code/float/
Propriedade float
https://davesmartins.github.io/code/float/
Sem o paragrafo, os blocos são
ignorados pelo bloco 4
Propriedade float
https://davesmartins.github.io/code/float/
Para que possam ser enxergados,
devemos finalizar o float com a
propriedade clear: both
Seletores em CSS
https://davesmartins.github.io/code/seletoresCss/
