WebDev: Introdução ao desenvolvimento Web

Slide 1

Slide 1 text

WebDev Introdução ao desenvolvimento Web

Slide 2

Slide 2 text

About + Empreendedor de sucesso + Físico teórico + Viajante + Escritor + Músico + DJ + Cabeleireiro + Dev Maromba

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Beto empreendimentos

Slide 5

Slide 5 text

About + ErreJota <3 Bangu + Ciência da Computação (NaN/8) + Dev Fullstack na Suzano + Tech In Rio + Praia + Rave / Rock

Slide 6

Slide 6 text

O que é WebDev?

Slide 7

Slide 7 text

Criação de sites?

Slide 8

Slide 8 text

Os sites mudaram um pouco

Slide 9

Slide 9 text

Evolução constante • Internet + rápida • Hardware + potente • Navegadores + poderosos • Dispositivos móveis

Slide 10

Slide 10 text

A plataforma que mais cresce • Lança uma vez • Alcança todos dispositivos • Menor custo de desenvolvimento • Funcionalidades modernas

Slide 11

Slide 11 text

Como eu começo?

Slide 12

Slide 12 text

Ferramentas de trabalho WebDev • Browser (navegador) • Editor de código (opcional) • HTML • CSS • JavaScript

Slide 13

Slide 13 text

Editor de código

Slide 14

Slide 14 text

HTML ( Hyper Text Markup Language ) • Estrutura básica

Slide 15

Slide 15 text

CSS ( Cascading Style Sheets ) • O salão de beleza da web

Slide 16

Slide 16 text

JavaScript • O super poder da web

Slide 17

Slide 17 text

Como os websites são construídos • Planejamento • Design • Desenvolvimento • Testes • Publicação

Slide 18

Slide 18 text

Como funciona a Web?

Slide 19

Slide 19 text

Componentes principais Internet Servidores Clientes

Slide 20

Slide 20 text

A Internet

Slide 21

Slide 21 text

Servidores

Slide 22

Slide 22 text

Clientes • Arquitetura cliente-servidor

Slide 23

Slide 23 text

Video buffering • Sempre tem algo baixando

Slide 24

Slide 24 text

Baixando de onde? • Sistema de endereços na Web • Endereço IP

Slide 25

Slide 25 text

DNS – Domain Name System

Slide 26

Slide 26 text

DNS – Propagação

Slide 27

Slide 27 text

Tá tudo na nuvem

Slide 28

Slide 28 text

Cloud = computadores em todo lugar • Sempre tem um computador do outro lado • Não existe magia na nuvem

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Sua internet pode cair por causa de tubarões

Slide 31

Slide 31 text

A grande sacada da nuvem • Delegar uma tarefa para outro computador • Unidos venceremos • Dividir para conquistar

Slide 32

Slide 32 text

Exemplo: ChatGPT • Elimine as limitações do cliente usando o servidor

Slide 33

Slide 33 text

API O grande garçom da web

Slide 34

Slide 34 text

API (Application Programming Interface)

Slide 35

Slide 35 text

Integração entre sistemas • Serviços prontos • Dados abertos

Slide 36

Slide 36 text

O céu é o limite • Gere valor acima de tudo

Slide 37

Slide 37 text

Por onde começar? Primeiro passo para o mundo WebDev

Slide 38

Slide 38 text

Frontend • Programação do lado do cliente • HTML • CSS • JavaScript • GIT

Slide 39

Slide 39 text

Faça projetos • Crie um portfólio • Use a criatividade • Clone interfaces • Publique seu site

Slide 40

Slide 40 text

Não deixe de aprender GIT • Controle de versão

Slide 41

Slide 41 text

Competências do Frontend

Slide 42

Slide 42 text

Responsividade

Slide 43

Slide 43 text

Experiência e Interface com usuário

Slide 44

Slide 44 text

Desempenho

Slide 45

Slide 45 text

Compatibilidade

Slide 46

Slide 46 text

SEO ( Search Engine Optimization )

Slide 47

Slide 47 text

Acessibilidade

Slide 48

Slide 48 text

O próximo nível do Frontend

Slide 49

Slide 49 text

Bibliotecas e Frameworks • Produtividade • Funcionalidades avançadas • Desempenho • Complexidade