Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WebDev: Introdução ao desenvolvimento Web
Search
Beto Costa
June 08, 2024
0
17
WebDev: Introdução ao desenvolvimento Web
Beto Costa
June 08, 2024
Tweet
Share
More Decks by Beto Costa
See All by Beto Costa
GameDev: Introdução à arte de criar jogos
robertheory
0
12
Desempenho e Otimização no Frontend
robertheory
0
14
Soft Skills: Destaque-se por onde passar
robertheory
0
14
GUIA DO AUTODIDATA
robertheory
0
44
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
128
8.8k
Raft: Consensus for Rubyists
vanstee
136
6.5k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
38
9.2k
BBQ
matthewcrist
83
9.2k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
Statistics for Hackers
jakevdp
794
220k
Building a Scalable Design System with Sketch
lauravandoore
459
32k
Building Adaptive Systems
keathley
36
2.1k
RailsConf 2023
tenderlove
28
810
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
103
48k
Transcript
WebDev Introdução ao desenvolvimento Web
About + Empreendedor de sucesso + Físico teórico + Viajante
+ Escritor + Músico + DJ + Cabeleireiro + Dev Maromba
None
Beto empreendimentos
About + ErreJota <3 Bangu + Ciência da Computação (NaN/8)
+ Dev Fullstack na Suzano + Tech In Rio + Praia + Rave / Rock
O que é WebDev?
Criação de sites?
Os sites mudaram um pouco
Evolução constante • Internet + rápida • Hardware + potente
• Navegadores + poderosos • Dispositivos móveis
A plataforma que mais cresce • Lança uma vez •
Alcança todos dispositivos • Menor custo de desenvolvimento • Funcionalidades modernas
Como eu começo?
Ferramentas de trabalho WebDev • Browser (navegador) • Editor de
código (opcional) • HTML • CSS • JavaScript
Editor de código
HTML ( Hyper Text Markup Language ) • Estrutura básica
CSS ( Cascading Style Sheets ) • O salão de
beleza da web
JavaScript • O super poder da web
Como os websites são construídos • Planejamento • Design •
Desenvolvimento • Testes • Publicação
Como funciona a Web?
Componentes principais Internet Servidores Clientes
A Internet
Servidores
Clientes • Arquitetura cliente-servidor
Video buffering • Sempre tem algo baixando
Baixando de onde? • Sistema de endereços na Web •
Endereço IP
DNS – Domain Name System
DNS – Propagação
Tá tudo na nuvem
Cloud = computadores em todo lugar • Sempre tem um
computador do outro lado • Não existe magia na nuvem
None
Sua internet pode cair por causa de tubarões
A grande sacada da nuvem • Delegar uma tarefa para
outro computador • Unidos venceremos • Dividir para conquistar
Exemplo: ChatGPT • Elimine as limitações do cliente usando o
servidor
API O grande garçom da web
API (Application Programming Interface)
Integração entre sistemas • Serviços prontos • Dados abertos
O céu é o limite • Gere valor acima de
tudo
Por onde começar? Primeiro passo para o mundo WebDev
Frontend • Programação do lado do cliente • HTML •
CSS • JavaScript • GIT
Faça projetos • Crie um portfólio • Use a criatividade
• Clone interfaces • Publique seu site
Não deixe de aprender GIT • Controle de versão
Competências do Frontend
Responsividade
Experiência e Interface com usuário
Desempenho
Compatibilidade
SEO ( Search Engine Optimization )
Acessibilidade
O próximo nível do Frontend
Bibliotecas e Frameworks • Produtividade • Funcionalidades avançadas • Desempenho
• Complexidade
Componentes e temas
Design System
Fim