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
18
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
13
Desempenho e Otimização no Frontend
robertheory
0
17
Soft Skills: Destaque-se por onde passar
robertheory
0
14
GUIA DO AUTODIDATA
robertheory
0
54
Featured
See All Featured
Embracing the Ebb and Flow
colly
84
4.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
How GitHub (no longer) Works
holman
311
140k
Optimising Largest Contentful Paint
csswizardry
33
3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
How To Stay Up To Date on Web Technology
chriscoyier
789
250k
Building Your Own Lightsaber
phodgson
103
6.1k
Gamification - CAS2011
davidbonilla
80
5.1k
Fireside Chat
paigeccino
34
3.1k
RailsConf 2023
tenderlove
29
940
4 Signs Your Business is Dying
shpigford
181
21k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.1k
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