Aula 01 – Etapa 01

Daniel de Oliveira
Noções de Web Design
Principais tecnologias de desenvolvimento web.

Fonte das Imagens: Pixabay.

Web Design e Jogos Digitais
Evolução da web.

Informação Colaboração Semântica Realidade

WWW Redes Sociais Big Data ?

Web Design e Jogos Digitais
Evolução da web.

WWW Redes Sociais Big Data ?

 Web para leitura  Leitura e escrita  Móvel e pessoal

 Páginas e informações  Blogs, wikis, fóruns  Conteúdo altamente
estáticas dinâmico e personalizado
 Aplicações web como
 Portais em HTML desktop  Web semântica
 Formulários web  Serviços digitais na web  Serviços dinâmicos
Web Design e Jogos Digitais

Fonte da Imagen: Pinterest.

Linguagens de Marcação e
Programação
Daniel de Oliveira
Linguagens de Marcação e Programação
Principais tecnologias de desenvolvimento web.

Fonte das Imagens: Pixabay.

Linguagens de Marcação e Programação

Linguagem de Marcação Folhas

de Hipertexto de Estilos

Linguagens
de Marcação

Utilizadas para dizer ao computador como os dados estão

estruturados e como interpretá-los corretamente.
Fonte das Imagens: Pixabay.
Linguagens de Marcação e Programação

Linguagem de Marcação
de Hipertexto

• Informa ao navegador como uma página web

está estruturada.

• Composta por tags que definem parágrafos,

links, imagens, áudio e vídeo.

Fonte das Imagens: Pixabay.

Linguagens de Marcação e Programação

Folhas
de Estilos

• Controla a apresentação visual de páginas

web, informando ao navegador como estilizar
e arranjar os elementos HTML.

• Baseada em regras de formatação.

Fonte das Imagens: Pixabay.

Linguagens de Marcação e Programação

Linguagem de
Programação

Conjunto de instruções formais padronizados para que uma

máquina execute uma determinada ação.
Fonte das Imagens: Pixabay.
Arquiteturas Cliente e Servidor
Daniel de Oliveira
Arquiteturas
Cliente e Servidor
Como a internet funciona.

https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/How_does_the_Internet_work
Arquiteturas
Cliente e Servidor
Como a web funciona.

Internet

Cliente Servidor

https://https://icons8.com
Arquiteturas
Cliente e Servidor
Chamada cliente-servidor.

Requisição

Resposta

https://https://icons8.com
Arquiteturas
Cliente e Servidor
Exemplo.

Servidor Web Dados

Internet Internet

https://https://icons8.com
Como a Web Funciona

Clientes

Dispositivos conectados à internet,

juntamente com os softwares de
acesso à web instalados

Tais softwares são também chamados

de agentes do usuário (user agent no
inglês).
Como a Web Funciona

Servidores

Computadores que armazenam sites e

aplicações web na internet.

Quando um dispositivo cliente acessa

uma página, várias requisições cliente-
servidor são feitas.
Introdução ao Protocolo HTTP
Daniel de Oliveira
Introdução ao Protocolo HTTP
Hyper
Text
HTTP
Transfer
Protocol

Este protocolo trata da comunicação de dados pela

internet, permitindo acesso a recursos web, a interligação
entre os hipertextos e criação de conteúdos dinâmicos.
Introdução ao Protocolo HTTP Servidor Web 1

Servidor Web 2

Internet JavaScript

Servidor Web 3

https://https://icons8.com
Introdução ao Protocolo HTTP

O navegador faz várias requisições HTTP. Dadas as

respostas do servidor, o navegador faz o download dos
recursos solicitados para depois montar e exibir a página.
Introdução ao Protocolo HTTP
Introdução á Programação Web
Daniel de Oliveira
Introdução á
Programação Web
O multiverso das aplicações web.

Cliente Servidor
Front-end Back-end
Introdução á
Programação Web
Tecnologias de front.

Cliente
Front-end
Introdução á
Programação Web
Tecnologias de back.

Servidor
Back-end
Recursos-chave Fundamentais
de JavaScript
Daniel de Oliveira
Recursos-chave Fundamentais de JavaScript

Trata-se de uma linguagem de programação dinâmica baseada em protótipos,

que suporta vários paradigmas de programação.

• Orientação a objetos;
• Imperativa procedural;
• Declarativa.
Recursos-chave Fundamentais de JavaScript
Recursos extras!

Sua sintaxe básica muito similar a outras linguagens e

existem uma variedade de bibliotecas e ferramentas já
desenvolvidas em JavaScript para a web!
Recursos-chave Fundamentais de JavaScript
Recursos extras!

APIs já integradas aos navegadores modernos.

Recursos-chave Fundamentais de JavaScript
Recursos extras!

APIs de terceiros que nos permitem funcionalidades

avançadas advindas de outros desenvolvedores.
Recursos-chave Fundamentais de JavaScript
Recursos extras!

Bibliotecas JavaScript de terceiros, facilitando a criação

rápida de aplicações web.
Saiba mais!

https://developer.mozilla.org/pt-
BR/docs/Learn/JavaScript/First_steps/What_is_JavaScript