O Ambiente Internet - Cliente X Servidor e As Tecnologias
O Ambiente Internet - Cliente X Servidor e As Tecnologias
O Ambiente Internet - Cliente X Servidor e As Tecnologias
tecnologias
Prof. Alexandre de Oliveira Paixão
Descrição
Propósito
Objetivos
Módulo 1
O ambiente web
Reconhecer o ambiente web.
Módulo 2
O conceito de interface
Descrever o conceito de interface.
Módulo 3
Módulo 4
meeting_room
Introdução
O chamado modelo cliente X servidor, com origem na
computação, é uma estrutura de aplicação distribuída em que
temos tarefas partilhadas e executadas entre as duas camadas:
de um lado, a origem das 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. Atualmente, tal modelo é amplamente utilizado, sendo
base do ambiente web e de suas aplicações.
1 - O ambiente web
Ao final deste módulo, você será capaz de reconhecer o ambiente web.
video_library
Modelo de 3 camadas
Cliente Servidor
Passou a precisar Composto por três
apenas de um arrow_forward servidores — o de
navegador para ter aplicações, o de dados
acesso à aplicação. e o web, sendo este
último o responsável
pela
apresentação/interface
com o usuário cliente.
video_library
Modelo de 4 camadas
Ambiente web
Como vimos, inicialmente as aplicações ficavam hospedadas dentro de
uma rede interna, onde estavam tanto os clientes quanto os servidores.
Posteriormente, elas migraram para a internet, surgindo então o
ambiente web, cuja base é justamente prover aos clientes, usuários, o
acesso a várias aplicações a partir de diversos dispositivos, como
navegadores em desktops e smartphones ou a partir de aplicações
mobile.
Comentário
É importante destacar um aspecto quando tratamos do ambiente web: a
comunicação.
video_library
Ambiente cliente X servidor
Entenda os principais conceitos sobre o fluxo do usuário requisitante.
Solicitação e resposta
Questão 1
Questão 2
Visão geral
O conceito de interface está ligado à área de Interação Humano-
Computador (IHC), que pode ser resumida como o estudo da interação
entre pessoas e computadores. Nesse contexto, a interface, muitas
vezes chamada de interface do utilizador, é quem provê a interação
entre o ser humano e o computador. No início da utilização dos
computadores, tal interação era realizada por meio de linha de comando
e, posteriormente, também mediante interfaces gráficas (Graphical User
Interface - GUI). Segundo Morais (2014), no início, a interação foi, de
certo modo, primária, deixando um pouco de lado o ser humano, por não
existir um estudo aprofundado desses aspectos.
Dessa forma, o foco do estudo da interface envolvia
principalmente o hardware e o software, e o ser humano
simplesmente tinha que se adaptar ao sistema criado.
O conceito do design
responsivo
Design responsivo
Comentário
Essa definição, na prática, implica que 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
Layout fixo
Layout fluido
EM expand_more
REM expand_more
Saiba mais
Além das unidades, fixas e flexíveis já mencionadas, há ainda outras
disponíveis. A listagem completa pode ser acessada no site do W3C –
CSS Units.
video_library
Layouts fluidos
Media query
Comentário
Nesse contexto, media query é a utilização de media types (tipos de
mídia) a partir de uma ou mais expressões para definir formatações
para dispositivos diversos. Com o seu uso podemos, por exemplo,
definir que determinado estilo de um ou mais elementos seja aplicado
apenas a dispositivos cuja largura máxima de tela seja igual ou menor
que 600px.
Atenção!
Outras expressões podem ser utilizadas, além da demonstrada acima,
como a definição do tipo de mídia (media type) — ou seja, um estilo que
se aplica apenas a um ou mais tipos de documento, como a versão para
impressão de uma página web, por exemplo — e a combinação entre
escalas de valores.
video_library
Media query
Scripts
Resumindo
Poderíamos ainda dizer que o design responsivo é mais complexo,
porém mais flexível. Já o adaptativo, mais trabalhoso, embora menos
flexível.
video_library
Design responsivo e design
adaptativo
Assista ao vídeo e entenda mais sobre a diferença entre design
responsivo e design adaptativo.
Mobile first
Questão 1
Questão 2
E
Para obter um layout que seja capaz de se adaptar a
vários tamanhos de tela, define-se uma única
combinação de media query.
As tecnologias HTML
HTML
Estruturais expand_more
De conteúdo expand_more
Semânticas expand_more
Relacionadas ao tipo de conteúdo e à criação de seções para
agrupá-lo de acordo com sua função no documento. Para melhor
entender esse conceito, veja a imagem a seguir:
Como visto na imagem apresentada, as tags < header >, < nav >,
< main > e < footer > desempenham papel semântico, uma vez
que estruturam a página em seções. Como seus nomes indicam,
elas separam o conteúdo em partes lógicas que formam o
esqueleto da maioria das páginas HTML, ou seja: cabeçalho,
menu de navegação, conteúdo principal e rodapé. Logo, tags de
parágrafo, imagem, entre outras, são inseridas dentro de cada
uma dessas seções, formando assim um documento HTML
completo.
Saiba mais
Uma listagem completa de tags e atributos (usados para adicionar
características a uma tag) pode ser encontrada no site do W3C.
HTML5
CSS
Sigla de Cascading Style Sheets. Em português, folhas de estilo em cascata.
Dica
Uma cuida do conteúdo, da estruturação; a outra cuida da apresentação,
do layout.
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.).
O valor
Novo parâmetro a ser aplicado à característica do elemento.
video_library
Tecnologias lado cliente:
HTML5, CSS e JavaScript
Conheça, agora, as diferenças entre uma estrutura em HTML e em
folhas de estilo.
Inline expand_more
Interno expand_more
Os estilos são definidos com a utilização da tag <style>, dentro
da tag <head> no documento.
Externo expand_more
Escopo expand_more
Essa forma foi introduzida pela HTML5. Com ela, 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
Exemplo
Vamos imaginar a situação oposta: temos um site cujo layout (topo,
rodapé e menu, por exemplo) é comum em todas as suas páginas –
arquivos .html independentes. Ao usarmos as formas inline e interna,
precisaríamos replicar um mesmo código em todas as páginas. Imagine
agora ter que fazer alguma alteração ou inclusão, tal operação
precisaria ser repetida inúmeras vezes. Em contrapartida, se usarmos
um arquivo externo e o linkarmos em todas as páginas, precisaremos
trabalhar apenas em um único código, tornando-o muito mais fácil de
ser mantido e ainda diminuindo consideravelmente nosso trabalho.
video_library
Como inserir o CSS na página
Web
JavaScript
JavaScript
Costuma-se abreviar o seu nome como “JS”, que é também a extensão de
seus arquivos, quando vinculados externamente ao documento HTML.
Sintaxe
Jquery
É uma biblioteca JavaScript rápida, pequena e rica em recursos que
simplifica processos como a manipulação de documentos HTML, eventos,
animação, além do AJAX (JQuery).
Prototype
É um framework JavaScript de código aberto, modular e orientado a objetos
que provê extensões ao ambiente de script do navegador, fornecendo APIs
para manipulação do DOM e AJAX (PrototypeJs).
Eventos e manipulação DOM expand_more
video_library
Como inserir o Javascript na
página Web
Questão 1
Saiba mais
O principal foco do PHP são os scripts do lado servidor, dando suporte a
funções como coleta e processamento de dados oriundos de
formulários HTML, geração de conteúdo dinâmico com o acesso a
bancos de dados, entre outras. Além do foco nos scripts no lado
servidor, é possível também utilizar o PHP por meio 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.
Logo, o código-fonte não pode ser visto no lado cliente, mas apenas o
HTML gerado.
Um script PHP é composto por código delimitado pelas tags <?php e ?>.
A última, de fechamento, não é obrigatória. Devido à sua simplicidade,
um mesmo script PHP pode conter tanto código estruturado quanto
orientado a objetos. Pode até conter código de marcação HTML. Neste
último caso, o código próprio do PHP deverá ficar entre as tags de
abertura e fechamento. A imagem a seguir mostra dois exemplos de
código, um apenas em PHP e outro mesclado com HTML. Ao
analisarmos os códigos, inicialmente é importante notar que ambos
possuem a extensão “.php”. Outras extensões possíveis, mas
atualmente em desuso, são “.php3”, “.php4”, “.phtml”.
Sintaxe
Variáveis expand_more
Require
Include once
Require_once
Exemplo
Imagine um site que tenha, por exemplo, dez páginas. Agora imagine
que esse site tenha a mesma estrutura visual, o mesmo cabeçalho,
menu, rodapé e outros pontos em comum. Pense em um blog, por
exemplo, onde o que muda são os conteúdos dos posts. No site
estático, teríamos que escrever dez diferentes arquivos HTML,
modificando o conteúdo em cada um deles, diretamente nas tags HTML,
e só conseguiríamos reaproveitar os estilos e a interatividade de
navegador utilizando CSS e JavaScript externos. Entretanto, todo o
conteúdo precisaria ser digitado e muito código HTML repetido. Todo
esse trabalho nos ajuda a entender o que são páginas estáticas.
Páginas Pá
estáticas dinâm
Automaticam
Manualmente,
Inclusão/Alteração/Exclusão através de s
direto no
de conteúdo no lado ser
código HTML
como
video_library
Páginas dinâmicas
Acesso a dados
SGBD
Há diversos tipos de SGBD para as mais variadas necessidades, com
opções gratuitas ou pagas. Entre os gratuitos, dois são comumente
utilizados em conjunto com o PHP: MySQL e PosgreSQL.
video_library
Tecnologias lado servidor:
linguagem PHP e acesso a
dados
Assista a este vídeo e conheça um exemplo de código PHP.
Questão 1
Questão 2
Considerações finais
Ao longo deste estudo, vimos como o modelo cliente X servidor,
inicialmente restrito às redes internas das empresas, evoluiu tanto nos
diferentes modelos de camadas quanto na migração para a internet.
Novas tecnologias foram criadas no lado cliente — linguagens de
marcação; folhas de estilo; linguagens de script — e também no lado
servidor — linguagens de script; bancos de dados; páginas dinâmicas —,
criando o ambiente web como o conhecemos atualmente, caracterizado
pelas tecnologias que formam sua base e pela preocupação com a
melhor experiência possível para os usuários.
headset
Podcast
Para encerrar, ouça sobre as Tendências do Ambiente Web – Cliente X
Servidor.
Explore +
Confira as indicações que separamos especialmente para você!
Visite o tópico CSS Units no site do W3C e conheça a lista completa das
unidades de medidas da CSS. Conforme mencionado, a CSS possui uma
série de unidades de medidas para expressar tamanho, sendo esse
associado a propriedades como “width”, “margin”, entre outros. Estão
disponíveis unidades de tamanho absoluto, como centímetros,
milímetros, pixels etc. e também unidades de tamanho relativo, como
“em”, “ex”, entre outros.
Download material
O que você achou do conteúdo?
Relatar problema