Desenv.

Web em Html5, Css,

Javascript e Php

Profº: Luiz Felipe Cirqueira

Ambiente Web
Introdução
• Ambiente que provê acesso a várias
aplicações, para clientes e usuários;
• Cliente: É aquele que utiliza o
navegador ou uma aplicação para
consumir seus serviços web;
• Servidor: Distribui esses serviços aos
clientes, agrupando as camadas de
apresentação, aplicação e dados.
Ambiente Cliente-Servidor
Camada de Apresentação

• Representada pela aplicação instalada na máquina cliente. Era

responsável pela interface com o usuário e passou a acessar o
servidor de aplicação, perdendo o acesso direto ao servidor de
dados;
• Servidor de Aplicativo Web (Front-End);
• Servidor de Vídeo Streaming (YouTube, Vimeo);
• Servidor de Áudio Streaming (Spotify, Apple Music);
• Servidor de Desktop Remoto (Remote Desktop Protocol - RDP).
Camada de aplicação

• Representada por um servidor responsável pela lógica e pelas

regras de negócio, assim como pelo controle de acesso ao servidor
de dados;
• Servidor Web (HTTP);
• Servidor de Email (SMTP, IMAP, POP3);
• Servidor de Arquivos (FTP, SFTP);
• Servidor de Videoconferência (Zoom, Microsoft Teams.
Camada de dados

• Representada por um servidor responsável pelo armazenamento dos

dados;
• Servidor de Banco de Dados Relacional (SQL);
• Servidor de Banco de Dados NoSQL;
• Servidor de Armazenamento em Nuvem (S3, Google Cloud
Storage).
Modelo de 3 camadas
Modelo de 4 camadas
Camada de servidor
web
• Recebe a solicitação dos clientes (navegador web);
• Fornece a resposta em forma de página web ou fluxo de dados;
• Atua como intermediária entre a interface e o usuário;
• Apache HTTP Server;
• Microsoft Internet Information Services (IIS);
• Tomcat (Servidor de apps java).
Como montar o seu
projeto?
Montando sua ideia

• Qual a sua ideia ou qual o problema?

• Qual a solução?
• Quem são os seus atores? (Que participa do uso do seu produto);
• Use Case;
• Class Diagram;
• Prepare o modelo do seu CRUD (seu Banco).
Use Case
 Conceitos
• Diagrama criado para representar as funcionalidades de um
sistema;
• Demonstra as ações e os atores de um sistema;
• Demonstra a interação de todo o sistema;
• Elementos do Use Case:
⚬ Ator;
⚬ Caso de Uso;
⚬ Relação Ator-Caso de Uso.
• https://astah.net/downloads/;
• https://staruml.io/.
Modelando o seu banco de
dados
 Modelagem

• Criar a estrutura do seu banco de dados;

• Definir quais as informações que serão armazenadas e gerenciadas;
• Etapas da modelagem:
⚬ Requisitos de Negócios;
⚬ Entidades e atributos;
⚬ Relacionamentos.
• https://www.mysql.com/products/workbench/.
Javascript

• Linguagem criada pela Netscape

em 1995;
• Linguagem fracamente tipada;
• Não precisa, necessariamente,
declarar os tipos das variáveis;
• Linguagem orientada a objetos;
• Podemos criar funções;
Javascript
• Com o javascript podemos criar
interfaces interativas e dinâmicas;
• Podemos desenvolver softwares
robustos e com usabilidade;
• Podemos criar validações, utilizar
estruturas de repetição e decisão.
Conceitos
• Variáveis;
• Tipos de Dados;
• Operadores;
• Controle de Fluxo;
• Funções;
• Eventos;
• Objetos e Propriedades;
• Arrays.
Variáveis
• São utilizadas para declarar dados;
• Variáveis do tipo var tem escopo de
função;
• Variáveis do tipo let e const são do
tipo bloco.
Tipos de Dados
• Como o próprio nome já diz, são as
tipagens dos dados;
• Permite gerenciar a tipagem de
algum dado;
• Ex: string, booleanos, inteiros,
arrays.
Operadores
• Permitem execução de ações;
• Operadores aritméticos: para
operações matemáticas;
• Operadores de comparação: para
operações do tipo de validação de
verdadeiro ou falso ou execução de
alguma ação;
• Operadores lógicos: para loops e
fluxos de repetição.
Controle de fluxo
• Permitem controlar o
direcionamento das operações;
• Controle condicional: if, else, else if;
• Controle do fluxo de repetições: for,
while, do while.
Funções
• Blocos de código, que podem ser
reutilizáveis, para execução de
tarefas;
• Em geral, para criação de funções
usamos a palavra “function”.
Eventos
• Ações do usuários;
• Cliques de mouse;
• Submissão de formulários;
• Pressionar teclas;
Objetos e Propriedades
• Objetos são parte de tudo que
existe ao redor;
• Propriedades são os dados que
fazem parte dos objetos;
• Ex: Uma pessoa é um objeto e as
propriedades desse objeto pessoa
são suas características: olhos, boca,
pés, mãos.
Arrays
• Objetos que armazenam conjuntos
de elementos;
• Podem ser de qualquer tipo.
Javascript
Referências da aula de hoje
• [1] FLANAGAN, David. JavaScript: O Guia Definitivo. 6ª Ed.
Porto Alegre: Bookman, 2014. Páginas 85 a 110. Disponível em:
https://integrada.minhabiblioteca.com.br/#/books/978856583748
4/
• [2] MILETTO, Evandro M.; BERTAGNOLLI, Silvia C.
Desenvolvimento de Software II: Introdução ao Desenvolvimento
Web com HTML, CSS, JavaScript e PHP. 1ª Ed. Porto Alegre:
Bookman, 2014. Páginas 95 á 100. Disponível em:
https://integrada.minhabiblioteca.com.br/#/books/978858260196
9/
• [3] JavaScript basic Exercises, Practice, Solution, disponível em
https://www.w3resource.com/javascriptexercises/javascriptbasic
exercises.php (Acesse com o Chrome, clique com o botão direto
e selecione traduzir para o português)
Dúvidas