Please enable JavaScript.
Coggle requires JavaScript to display documents.
Modelo Cliente X Servidor - Coggle Diagram
Modelo Cliente X Servidor
Módulo 3
AS TECNOLOGIAS DO LADO CLIENTE: HTML5, CSS E JAVASCRIPT HTML
Javascript
multiparadigma (orientação a objetos, protótipos, funcional etc.).
podem ser tanto estruturados quanto orientados a objetos. Além disso, permitem que bibliotecas, como Jquery, Prototype etc.
criada para diminuir a necessidade de requisições ao lado Servidor, permitindo a comunicação assíncrona e a alteração de conteúdo sem que seja necessário recarregar uma página inteira.
Eventos e manipulação DOM
amplo suporte à manipulação de eventos relacionados a elementos HTML. É possível, por exemplo, utilizar um elemento <button> (botão) que, ao ser clicado, exiba uma mensagem na tela. Ou, ainda, aumentar o tamanho de uma fonte ou diminuí-lo.
Mensagem e entrada de dados
funções nativas para a exibição de caixas de diálogo para entrada de dados ou exibição de mensagens, como alertas, por exemplo.
JSON
JS object Notation
os mais utilizados no intercâmbio de dados com o lado servidor e entre diferentes sistemas, independentemente da linguagem
Como inserir o Javascript na página Web
dentro da tag <script>, seja no <head> ou em qualquer outra parte
Boas práticas relacionadas ao Javascript
incorporar arquivos externos de Javascript ao final da página, após o fechamento da tag <body>
pode ser adotada uma abordagem híbrida, onde os códigos Javascript dos quais a página dependa para funcionar corretamente fiquem no início e os demais, ao final.
utilização de arquivos externos
, é também recomendado minificar o arquivo .js
Node.js
interpretador de JavaScript assíncrono com código aberto orientado a eventos, focado em migrar a programação do Javascript do cliente (frontend) para os servidores.
CSS
Como inserir o CSS na página Web
Interno
Os estilos são definidos com a utilização da tag <style>, dentro da tag <head> no documento.
Externo
Essa é a forma preferencial de inserir estilos
Nela, é utilizado um arquivo externo, com extensão “.css”, contendo apenas estilos. Para vincular esse arquivo externo ao documento é utilizada a tag <link> dentro da tag <head>.
Inline
Os estilos, neste caso, são aplicados com a utilização do atributo “style” seguido de uma ou mais propriedades/valores.
Escopo
Esta forma foi introduzida pela HTML5.
um estilo pode ser definido em nível de escopo, ou seja, declarado em seções específicas do documento.
Sua declaração é feita da mesma forma que na Inline. Entretanto, no lugar de ser declarada no <head>, é declarada dentro da tag à qual se quer aplicar os estilos.
Seletores CSS
combinações para a aplicação de estilos
linguagem declarativa cuja função é controlar a apresentação visual de páginas Web
sintaxe
o seletor
Um elemento HTML (body, div, p etc.) ou o seu identificador (atributo id) ou classe (atributo class).
a propriedade
Característica do elemento (cor, fonte, posição etc.).
valor
Novo parâmetro a ser aplicado à característica do elemento.
Boas práticas relacionadas à CSS
utilizar a forma Externa para incluir CSS em uma página Web
compactar o arquivo – normalmente chamamos este processo de minificação
pré-pocessadores
Em linhas gerais, um pré-processador é um programa que permite gerar CSS a partir de uma sintaxe − própria de cada pré-processador −, que inclui inúmeras facilidades não suportadas naturalmente pelo CSS, como variáveis, funções, regras aninhadas, entre outras.
HTML5
novos atributos e elementos
melhoria na conectividade
possibilidade de armazenamento de dados no lado do cliente
otimização nas operações offline
suporte estendido a multimídia - áudio e video
HTML
definir a estrutura de uma página Web
TAGS
Estruturais
DocType
Conteúdo
<header>, <nav>, <main> e <footer>
Cabeçalho, menu de navegação, conteúdo principal e rodapé.
Semântico
Relacionado ao tipo de conteúdo e à criação de seções para agrupá-lo de acordo com sua função no documento
Módulo 1
O que é
Comunicação
tráfego de dados
http
Solicitação (Request) e Resposta (Response)
normalmente clientes solicitam
mas é possível que também o servidor a inicie, como em serviços PUSH – serviços que disparam notificações/mensagens para os clientes que fizeram opção por recebê-las
criado pela Xerox PARC nos anos 1970
separação entre dados e recursos de processamento
oposição ao módelo centralizado, em que tanto o armazenamento dos dados quanto o seu processamento ficavam a cargo dos Mainframe.
requisições e solicitações de recursos ou serviços – o lado cliente – e, do outro, processos sendo executados a fim de prover tais recursos ou serviços – o lado servidor
Aplicações/camadas
3 camadas
havia necessidade de reinstalação/atualização da aplicação nos clientes a cada mudança de regra ou lógica
Camada de apresentação
representada pela aplicação instalada na máquina cliente
Camada de aplicação
ervidor responsável pela lógica e regras de negócio, assim como pelo controle de acesso ao servidor de dados.
Camada de dados
servidor responsável pelo armazenamento dos dados
4 camadas
servidor web
interface com o usuário
servidor de aplicações
cliente
servidor de banco de dados
2 camadas
Servidor é responsável por tratar os dados – normalmente fazendo uso de Sistemas Gerenciadores de Bancos de Dados (SGDB)
exemplo: aplicações desktop instaladas em cada computador cliente que se comunicam com um servidor na mesma rede.
Cliente trata a lógica do negócio e fazer a interface com o usuário
Módulo 2
A INTERFACE DO LADO CLIENTE
interfaces gráficas
tamanho de telas (smartphones)
tamanho:360 x 640
% utilização: 10,11%
1366 x 768
9,69%
1920 x 1080
8,4%
375 x 667
4,24%
414 x 896
3,62%
1536 x 864
3,57%
design responsivo
a página web/aplicação acessada deve ser capaz de, automaticamente, responder às preferências do usuário e, com isso, evitar que seja necessário construir diferentes versões de uma mesma página/aplicação para diferentes tipos e tamanhos de dispositivos.
Layouts fluidos
fazem uso de unidades flexíveis
no lugar de definir que o cabeçalho de uma página tenha 1366 pixels de largura, possamos definir que ele ocupe 90% do tamanho da tela
porcentagem
EM
O tamanho base dessa unidade equivale à largura da letra “M” em maiúscula.
REM
tag HTML <body>. Daí a letra “R” nessa unidade, que faz referência à raiz (root).
media query
utilização de Media Types (tipos de mídia) a partir de uma ou mais expressões para definir formatações para dispositivos diversos.
scripts
linguagens de programação que rodam no navegador e cujo exemplo mais comum é o Javascript.
DESIGN RESPONSIVO X DESIGN ADAPTATIVO
Responsivo
combinação de técnicas para ajustar um site automaticamente em função do tamanho da tela dos dispositivos utilizados pelos usuários
Medias Queries são utilizadas, em conjunto com scripts, para criar um layout fluido que se adapte – através, sobretudo, da adequação das dimensões de seus elementos – ao tamanho da tela do dispositivo utilizado pelo visitante.
Mobile first
em primeiro lugar seja pensado o design para telas menores e, posteriormente, para telas maiores. enfoque progressivo (progressive enhancement)
contraponto com o desenvolvimento Web tradicional, em que temos o conceito de degradação graciosa (graceful degradation):
Adaptativo
são usados layouts estáticos baseados em pontos de quebra (ou de interrupção), onde, após o tamanho de tela ser detectado, é carregado um layout apropriado para ele
Um site é planejado e construído com a definição de seis layouts predefinidos, onde são previstos pontos de quebra para que a página se adapte às seis diferentes dimensões utilizadas.
Módulo 4
AS TECNOLOGIAS DO LADO SERVIDOR:
PHP, PÁGINAS DINÂMICAS E ACESSO A DADOS
PHP
acesso a informações armazenadas em Bancos de Dados
linguagens disponíveis no lado servidor estão o Java, o Python, o ASP, o .NET e o PHP
baseada em script, open source e destinada, sobretudo, ao desenvolvimento Web.
é possível também utilizar o PHP através de scripts em linha de comando e na criação de aplicações Desktop (com a utilização da extensão PHP-GTK), embora não seja a melhor linguagem para isso.
Como o PHP funciona
é uma linguagem interpretada, ou seja, ela precisa “rodar” sobre um servidor Web. Com isso, todo o código gerado é interpretado pelo servidor, convertido em formato HTML e então exibido no navegador.
ETAPA 2
código gerado é interpretado pelo servidor
ETAPA3
Convertido em formato HTML.
eTAPA 1
precisa rodar sobre um servidor Web.
ETAPA 4
Exibido no navegador
tags
<?php
e
?>
A última, de fechamento, não é obrigatória
“.php3”, “.php4”, “.phtml”.
função “echo”, que serve para imprimir algo na tela, associado a uma frase
Sintaxe
Tipos de dados
fracamente tipada. Logo, embora possua suporte para isto, não é necessário definir o tipo de uma variável em sua declaração.
Booleanos, inteiros, números de ponto flutuante, strings, arrays, interáveis (iterables), objetos, recursos, NULL e call-backs
Operadores condicionais
if, else, if e else ternários, if else e switch.
Variáveis
$$$
case sensitive
Laços de repetição
For, foreach, while e do-while.
Funções e métodos
Inclusão de scripts dentro de scripts
Include
Require
Include once
Require_once
Páginas Dinâmicas
Inclusão/Alteração/Exclusão de conteúdo
Automaticamente através de scripts no lado servidor, como PHP
Armazenamento do conteúdo
Em um banco de dados
ferramentas de gestão de conteúdo (CMS)
Acesso de Dados
gestão destes dados SGBD - Sistemas Gerenciadores de Bancos de Dados.
é necessário utilizar uma linguagem do lado servidor, como o PHP. Em outras palavras, não é possível acessar o banco de dados utilizando apenas HTML ou mesmo Javascript.
Formas de acesso a dados
A PARTIR DO HTML
uso de formulários
submetermos nossos dados para uma linguagem no lado servidor/PHP.
sobre o PHP: Ele permite a utilização de códigos HTML diretamente em seus scripts. Logo, uma página Web feita em PHP pode recuperar dados do banco de dados toda vez que é carregada
A PARTIR DO JAVASCRIPT
2 formas para se comunicar com linguagens do lado Servidor
APIs (Application Programming Interface) XMLHttpRequest
normalmente associada a uma técnica de desenvolvimento Web chamada AJAX
Fetch API
mais recente e oferece algumas melhorias, embora não seja suportada por todos os navegadores
