Desenvolvimento Web em HTML5, CSS, JavaScript e PHP - Parte 1
O ambiente Web
Cliente X Servidor
Esse modelo, de clienteXservidor, é uma estrutura de aplicação distribuída, onde suas tarefas são executadas em duas camadas, sendo uma o do cliente (onde são feitas as requisições e solicitações), e a outra do servidor (onde os processos são feitos para a execução dos serviços). Esse modelo é a base do ambiente Web.
Esse modelo foi criado nos anos 70, pela Xerox PARC, e ele foi criado na intenção de separar dados e recursos de processamento. O modelo usado na época era o centralizado, e a Xerox PARC quis criar algo diferente disso.
É fácil de entender esse modelo. Só precisamos visualizar uma rede interna de computadores de uma empresa. Nessa rede existem máquinas que armazenam arquivos e dados (servidor), e máquinas que consomem os recursos fornecidos pelo servidor (cliente).
Aplicações do modelo
Depois da criação desse modelo, era possível desenvolver aplicações que usassem a arquitetura distribuída, e que teriam como base o desenvolvimento em camadas. É assim que surgem modelos de cliente X servidor com diversas camadas.
Modelo de 2 camadas
Cliente e servidor
Modelo de 3 camadas
Esse modelo surgiu já que o anterior possuía um problema. A cada mudança de regra, o modelo de 2 camadas tinha que receber atualizações. O modelo de 3 camadas possui a camada a mais de aplicação.
Modelo de 4 camadas
Esse modelo foi um grande avanço, porque tirou do cliente a responsabilidade pela interface do usuário, e passou a centralizar no servidor Web. Agora ao invés de aplicações instaladas em cada máquina, os clientes podem acessar aplicações hospedadas em servidores Web a partir de navegadores.
Ambiente Web
As apps ficavam em uma rede interna, e passaram para a
internet (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.
Um aspecto importante do ambiente Web é a comunicação, ou
como trafegam os dados entre a requisição enviada por um cliente a resposta
provida por um servidor.
A comunicação é feita sobre a internet, com uso de
protocolos de comunicação (o principal é o HTTP, ou Hyper Text Transfer
Protocol, protocolo p/ transferência de hipertexto).
Solicitação e Resposta
No ambiente Web, o processo de comunicação é conhecido como REQUEST e RESPONSE. Normalmente a solicitação é iniciada pelo cliente, mas é possível que o servidor a inicie, por exemplo, por serviços PUSH (quando o servidor dispara notificações para o cliente, como aquelas mensagens automáticas que você se inscreve pra receber).
A interface do lado do cliente
O conceito de interface está ligado à IHC, ou seja, interação humano-computador. Nesse contexto, a interface do utilizador provê essa interação. No começo da utilização dos computadores, a interação era feita por linhas de comando e por interfaces gráficas, ou Graphical User Interface.
Nessa época, o foco dos estudos e desenvolvimento da interface, envolvia o hardware e o software, e enquanto isso o usuário humano tinha que se adaptar ao sistema criado. Posteriormente, o grande avanço da tecnologia, e o acesso a todo tipo de dispositivos tecnológicos, desenvolveu a necessidade de melhorar essa interação entre máquina e usuário.
Design Responsivo
Essa é a abordagem que sugere que o design e o desenvolvimento devem responder ao comportamento e ao ambiente do usuário com base no tamanho da tela, plataforma e orientação do dispositivo por ele utilizado. Ou seja, a página web ou aplicativo, devem ser capazes de responder automaticamente às preferencias do usuário. Isso facilita, já que não será necessário construir diferentes versões da mesma página ou aplicativo, para ser usado em diferentes dispositivos.
Origem do design Responsivo
Ele se originou no projeto arquitetônico responsivo. Esse projeto prega que um espaço tem que se adaptar de forma automática, ao número e fluxo de pessoas que o frequentam. Para fazer isso, deve se combinar a robótica com a tecnologia, com sensores de movimento, sistemas de controle climático com ajuste de temperatura e iluminação, materiais e estruturas que expandem, etc. Para aplicar esse conceito no ambiente Web, usamos uma combinação de técnicas como layouts, media query e scripts.
Layouts Fluidos
Esses layouts utilizam unidades flexíveis, ou seja, ao invés de definir as dimensões com unidades fixas (pixels, por exemplo), utilizam-se valores flexíveis. Dessa forma, ao invés de definir um cabeçalho com 1366 pixels, definimos que ele ocupe 90% do tamanho da tela. Assim, há uma adaptabilidade no campo de visão conforme as dimensões do dispositivo que visualiza a tela. Outras unidades de medida flexíveis são: EM – unidade de medida tipográfica relacionada ao tamanho do elemento de contexto; REM – o elemento de contexto será sempre a tag HTML <body>.
Media Query
Cabe ao CSS estruturar o layout da página, então, normalmente temos associada a uma página Web uma ou mais folha de estilo, que são códigos que definem os aspectos de toda a página, como dimensões, cores de fundo, fonte, etc. O Media Query é a utilização de Media Types (tipos de midia) para definir formatações para diversos dispositivos.
Scripts
Quando falamos de scripts no lado do cliente, no ambiente Web, estamos falando de linguagens de programação que rodam no navegador e cujo exemplo mais comum é o JavaScript. Esta linguagem adiciona interação a uma página Web, permitindo por exemplo, a atualização dinâmica de conteúdo, o controle de multimídia, a animação de imagens e muito mais. No design responsivo, o script cria a dinâmica na apresentação do conteúdo.
Design responsivo X design adaptativo
São conceitos diferentes. O responsivo consiste em utilizar uma combinação de técnicas para ajustar um site automaticamente, de acordo com a tela de usuário. O adaptativo consiste em criar layouts estáticos baseados em pontos de quebra, então após o tamanho da tela ser detectado, é carregado um layout apropriado para ele.
Mobile First
É uma das abordagens de design responsivo mais utilizadas na atualidade. Como o uso de dispositivos móveis está crescendo, é defendido que se deve primeiro pensar em designs para telas menores. É um enfoque progressivo, onde partimos de recursos e tamanhos de dispositivos menores, e progredindo com a adição para telas maiores.
As tecnologias do lado cliente: HTML5, CSS e JavaScript
HTML
É a tecnologia fundamental da Web, já que sua função é definir a estrutura da página. O HTML foi criado por Tim Berner-Lee nos anos 90, e tinha o objetivo inicial de disseminar pesquisas entre ele e seus colegas. Logo a linguagem foi difundida e se tornou uma rede que posteriormente veio a se tornar a World Wide Web. HTML é uma linguagem de marcação simples, composta por tags relacionadas a textos/conteúdos, e são divididas em três tipos: estruturais, de conteúdo e semântico. A versão mais recente é o HTML5.
CSS
É a segunda camada no tripé da tecnologia. É uma linguagem declarativa, cuja função é controlar a apresentação visual da página. O HTML cuida do conteúdo e o CSS cuida do layout. A sintaxe do CSS é uma declaração onde é definido o elemento e estilo que queremos aplicar, e pode ser: o seletor, a propriedade ou o valor.
Existem quatro formas de inserir o CSS na página Web:
- Inline - utiliza-se o atributo "style" seguido da propriedade/valor
- Interno - utiliza-se a tag <style> dentro da <head>
- Externo - utiliza-se um arquivo externo com extensão ".css", que contém apenas estilos, e esse arquivo é vinculado pela tag <link> dentro da <head>
- Escopo - forma introduzida na HTML5, onde um estilo pode ser definido em nível de escopo, ou seja, declarado em seções específicas do documento; a declaração é da mesma forma da inline, mas ao invés de ser colocada na <head>, ela é colocada dentro da tag à qual se quer aplicar os estilos
JavaScript
Ou JS, é também a extensão de arquivos quando vinculados ao HTML. É uma linguagem de programação que, assim como o CSS, é interpretada pelo navegador. O JS se destaca por ser multiparadigma (orientação a objetos, protótipos, etc.). Ela tem a função de fornecer interatividade as páginas, e foi criada para diminuir a necessidade de requisições pelo lado do servidor, sendo assim, era possível alterar o conteúdo sem que fosse necessário recarregar a página.
Sintaxe
O JS foi feito para ser leve, mas ao mesmo tempo complexo e poderoso. Seus códigos podem ser estruturados quando orientados a objetos. Além disso, essa linguagem permite que bibliotecas, como 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), Prototype (Framework JavaScript de código aberto, modular e orientado a objetos que provê extensões ao ambiente script do navegador, fornecendo APIs para manipulação do DOM e AJAX), etc., sejam criadas a partir de seu core, e assim estendem sua funcionalidade.
Eventos e manipulação do DOM
O JS oferece amplo para manipulação de eventos relacionados a elementos HTML. É possível criar um botão, ou <button> que, quando clicado exibe uma mensagem na tela, ou aumentar e diminuir o tamanho de uma fonte por exemplo.
Mensagem e entrada de dados
O JavaScript possui funções nativas para a exibição de caixas de diálogo para entrada de dados ou exibição de mensagens.
JSON
O JavaScript Object Notation, é um formato para a troca de dados no ambiente Web. Ele está entre um dos mais utilizados no intercambio de dados com o lado servidor e entre diferentes sistemas, independente das linguagens utilizadas, Está relacionado ao JS, mas não é um formato exclusivo dessa linguagem, e pode ser usado inclusive em sistemas onde ela não esteja presente.
Inserindo o JS na página Web
A inserção do JS na HTML é feita de forma similar ao CSS. Pode-se inserir um código JS diretamente no documento dentro do <script>, <head>, etc., ou através de arquivos externos com extensão ".js", esses devem ser linkados na tag <head>. É preferível que sejam utilizados arquivos externos para a incorporação do JS, e que sejam colocados ao final da página, após o fechamento do <body>, já que o carregamento é feito de cima para baixo. Logo, quanto mais códigos CSS ou JS na <head>, mais demorado será o carregamento da página.
No entanto, deve-se ter cuidado ao colocar o JS no final da página, pois caso algum evento, elemento ou fncionalidade dependa do código, eles não serão executados. Nesse caso, pode-se adotar uma abordagem híbrida, onde os códigos JS dos quais a página dependa para funcionar corretamente, fiquem no início, e os demais no final. Compactar o arquivo também aumenta desempenho.
Embora o JS tenha sido criado exclusivamente para o lado cliente, ele pode ser usado no lado servidor. O node.js (interpretador de JS assíncrono com código aberto orientado a eventos, focado em migrar a programação do JS do cliente {frontend} para os servidores) é um exemplo de ambiente que utiliza o JS no lado servidor.
As tecnologias do lado servidor: PHP, páginas dinâmicas e acesso a dados
Umas das funções principais das linguagens de programação do lado servidor, é permitir o acesso a informações armazenadas em bancos de dados. Utilizando somente o HTML e o JS, isso não seria possível, por isso é necessário que exista uma linguagem no lado servidor. Existem várias linguagens no Server Side, tais como Java, Python, ASP, .NET e PHP.
PHP
Ou Hypertext Preprocessor, é uma linguagem baseada em script, é open source e é destinada ao desenvolvimento Web. Ela foi criada para ser uma linguagem estruturada, e mais para frente foi utilizada para a orientação a objetos.
O PHP é uma linguagem interpretada, o que quer dizer que ela precisa rodar sobre um servidor Web, dessa forma o código é interpretado pelo servidor. Depois ele é convertido para o HTML, e então é exibido. Por esse motivo, apenas o HTML pode ser visto no lado cliente, e não seu código-fonte.
Anatomia de um script PHP
O script PHP é delimitado pelas tags "<?php" e "?>". Por ser muito simples, o mesmo script pode conter tanto códigos estruturados, como orientação a objetos, e até códigos HTML. A extensão para esses arquivos é ".php".
Sintaxe
O PHP é case sensitive, ou seja, faz diferença se o nome de uma variável é escrito com letra maiúscula ou minúscula. Suas variáveis são criadas com a utilização do símbolo $. Como essa é uma linguagem pouco tipada, não é necessário definir o tipo de uma variável.
Inclusão de scripts dentro de scripts
Isso é algo interessante que o PHP permite. Isso é muito útil se pensarmos em relação a orientação a objetos, onde temos em um programa, diversas classes em diferentes scripts. Dessa forma, sempre que precisarmos usar uma dessas classes, métodos ou atributos, só precisamos incluí-la no script desejado.
Acesso ao sistema de arquivos
Por meio do PHP podemos ter acesso ao sistema de arquivos no servidor Web. Desse modo é possível, por exemplo, manipular arquivos e diretórios, desde uma simples listagem, até uma inclusão ou exclusão de dados.
Páginas dinâmicas
Se criássemos uma página Web com tudo o que vimos até agora, teríamos uma página HTML básica, com um pouco de interação e estilo, por conta do JS e do CSS. Isso é o oposto de uma página dinâmica, ou seja, é uma página estática. Uma página apenas com o HTML, JS e CSS, sem conexão com uma linguagem de programação.
Claramente é possível ter um site inteiro apenas com páginas estáticas, mas isso seria muito trabalhoso. Por exemplo, em um blog com páginas estáticas, o que mudaria seriam os conteúdos dos posts, assim sendo, teríamos que escrever dezenas de arquivos HTML diferentes, modificando o conteúdo de cada um, e reaproveitando o JS e CSS.
Para evitar todo esse trabalho desnecessário, combinamos as tecnologias do lado cliente, com as do lado servidor, criando assim páginas dinâmicas. Nelas, podemos receber informações que vem do cliente, processá-las, guardá-las, recuperá-las e utilizá-las sempre que quisermos. Além disso, podemos também guardar todo o conteúdo do blog no banco de dados, e assim teríamos apenas uma página PHP que recuperaria todo o conteúdo e o exibiria no navegador.
Em uma página dinâmica, também podemos usar a ferramenta de gestão de conteúdo, ou CMS, que mantém as informações no site sempre atualizadas, e depois de pronto, não será mais preciso mexer no código-fonte.
Acesso a dados
Resumidamente, o banco de dados é um repositório onde várias informações podem ser armazenadas e posteriormente recuperadas. Para gerenciar esses dados, usamos sistemas gerenciadores de bancos de dados (SGBD), como por exemplo o MySQL.
O SGDB monta a estrutura do banco de dados, mas para recuperar uma informação guardada e exibi-la na página Web, precisamos de uma linguagem do lado servidor, como o PHP. Logo, não é possível ter acesso ao banco de dados somente pelo HTML, ou pelo JS.
Formas de acesso a dados
- A partir do HTML - o jeito mais comum de enviar e recuperar dados pelo HTML, é usando formulários; com um formulário, submetemos os dados para a linguagem do lado servidor (PHP), que recebe e guarda as informações no banco de dados, e vice e versa, pode ter um formulário na página HTML que solicita os dados ao PHP, que os envia depois de pegá-los no banco de dados. Uma página Web em PHP, recupera dados toda vez que é carregada, logo, cada página visualizada é composta por conteúdo armazenado em bancos de dados e códigos HTML, produzidos por uma linguagem do server side. Cada página que abrimos em sites dinâmicos, faz uma requisição no lado servidor (pelo script e banco de dados).
- A partir do JavaScript - o JS tem duas maneiras de se comunicar com as linguagens do server side: por APIs XMLHttpRequest e Fetch API (API = application programming interface). A primeira é mais comum, e normalmente associada a uma técnica do desenvolvimento Web, AJAX. A segunda é mais recente e tem mais melhorias, mas não é suportada por todos os navegadores. As duas funcionam basicamente da seguinte forma, uma ação é disparada pelo usuário, então uma requisição no lado servidor é enviada, para que seja feita a recuperação de algum dado, o que por sua vez retorna e o exibe na tela. Isso tudo acontece sem que a página inteira tenha que ser recarregada.
Comentários
Postar um comentário