Aula 01 - Introdução à Web
Uma visão geral do modelo cliente-servidor e das tecnologias que compõe a web
Arquitetura da Web
Início da Web
- A ideia por trás da WEB surgiu dentro do CERN (Organização Europeia para Investigação Nucelar), na Suíça
- O objetivo principal era tornar a troca de documentos e informações mais fácil através da já operacional Internet
- Tim Berners-Lee(cientista da computação britânico) foi idealizador da proposta e responsável pela criação de um trio de tecnologias que iriam atuar em conjunto na proposta da web:
- Um servidor de documentos de hipertexto
- Um cliente para acesso (navegador)
- Uma linguagem padronizada para os documentos (HTML)
- Uma linguagem padronizada a troca de documentos (HTTP - HyperText Transfer Protocol)
- A ideia por trás da web surgiu da união da internet com o conceito de hipertextos, originário do projeto para a criação doMemex
- Outras ideias parecidas anteriores à Web não tiveram o mesmo sucesso pois eram proprietárias e exigiam ligação bidirecional de hiperlinks
Evolução da Web
A divisão histórica de eras da Web possui como objetivo identificar períodos através da relação entre tecnologias, ambientes e comportamentos que se naturalizaram durante um determinado tempo. Isso não significa que a cada nova era todos os conceitos e tecnologias foram abandonadas em benefício de outras.
- Web 1.0
- Marcada pela implementação de páginas "somente leitura", entre 1989 e 2005. As páginas construídas durante este período eram majoritariamente desenhadas com pouca ou nenhuma interação com o usuário em páginas estáticas. De modo geral, permitia apenas a busca e leitura de conteúdo. Outra característica desse período é ter pouca ou nenhuma meta informação que possa ser processada por máquinas.
- Centrada na busca de conteúdo
- Sem interatividade
- Paginas estáticas
- Web 2.0
- Definido por Dale Dougherty em 2004 como a Web da leitura e escrita. Foram introduzidos recursos que permitiram aos usuários contribuir com conteúdo, colocando-os no centro das interações pela Web. É nesse período que surgem diversas ferramentas de colaboração e redes sociais, capazes de integrar os usuários através da interação dinâmica com as páginas web.
- Centrada em comunidades e negócios
- Conteúdo produzido pelos usuários
- Interatividade
- Web 3.0
- Termo sugerido por John Mark em 2006 (dois anos depois da criação do termo Web 2.0) caracteriza uma era de automação e integração entre aplicações web, principalmente através da definição de estruturas de dados e padrões que permitam melhorar o uso e reuso da informação. A Web 3.0 também é conhecida como Web Semântica, termo utilizado pelo criador da Web Tim Berners-Lee ainda em 2001 para se referir a uma web capaz de permitir integração de máquinas e humanos no controle e organização das informações.
- Padronização de dados e implementações
- Interoperabilidade entre aplicações
- Separação da web em camadas
- Uso massivo da plataforma web por aplicações em geral, fora do espaço tradicional (navegadores)
- Web 4.0
- Também conhecida como Web Ubíqua, a Web 4.0 apresenta os conceitos relacionados à Internet das Coisas (IoT - Internet of Things) e a simbiose entre dispositivos e seres humanos. Dispositivos domésticos, softwares e ambientes são interconectados como forma de prover a experiência mais inteligente possível na troca de informações.
- Computação Ubíqua
- Interação entre dispositivos
- Big data e Inteligência Artificial
- Web 5.0 e além
- Há pouca definição para o que seria considerado esta nova fase da Web. No entanto, alguns autores sugerem que as interações trazidas pela etapa anterior serão agora facilitadas pela interação emocional entre humanos e computadores. Tecnologias baseadas em neurociência e inteligência artificial serão responsáveis por levar sentimentos às experiências de troca de informação.
Modelo Cliente/Servidor
- A troca de informação é realizada por intermédio de um ponto central
- A atualização dos dados e administração é facilitada quando comparada com outros paradigmas
- Permite interoperabilidade dado que servidores podem conectar-se à outros servidores
Protocolo HTTP
- Modelo requisição/resposta
Programação para a Web
Frontend Vs Backend
A diferença entre frontend e backend está relacionada com o modelo cliente servidor. Tradicionalmente, todo serviço que fica do lado do servidor é chamado de backend, enquanto tudo aquilo que é enviado e processado no cliente é chamado de frontend.
Estrutura de uma pagina web
Triforce da Web
- HTML
- Responsável pela estrutura das páginas
- CSS
- Adiciona estilo ao documento HTML
- Javascript
- Linguagem utilizada para criar estruturas de programação
html olaMundo.html
<html>
<head>
<meta charset="UTF-8">
<title>Título da Página</title>
</head>
<body>
Olá Mundo!
</body>
</html>
css style.css
body{
background-color: #000000;
margin: auto;
}
.dialogo{
font-size: 0.9rem;
}
js script.js
document.getElementById('dialogo').innerHTML = "Olá Mundo!"
if(dialog.hasMessage()){
dialog.goToNext()
}
Desenvolvimento Web em 2021
Ferramentas para o Desenvolvedor
Ferramentas de Desenvolvimento Web
- Editor de texto
- Mozilla Firefox é um navegador livre e multi-plataforma desenvolvido pela Mozilla Foundation com ajuda de centenas de colaboradores. Sua primeira versão foi lançada em 2004.
- Editor de Imagem e Vetor
- Desenvolvido pela Google e introduzido em 2008. É compilado a partir de um projeto de código fonte aberto chamado Chromium. É atualmente o navegador web mais utilizado do mundo.
- Servidor Web
- Apesar de a maioria dos navegadores serem capazes de reconhecer e ler documentos diretamente do sistema de arquivos, em alguns casos é necessário utilizar um servidor web para que algumas funcionalidades sejam corretamente testadas em ambiente de desenvolvimento. Dessa forma, existem diversas alternativas que vão desde o uso de servidores dedicados, vps ou servidor doméstico, até a instalação de serviços no próprio computador do desenvolvedor. Para isso podemos utilizar softwares como o lighthttp, easy-php, xampp, ou facilmente iniciar um novo serviço usando o framework node.js ou python.
- Navegador
- Navegador desenvolvido pela Opera Software e bastante usado pelos notáveis recursos, que também foram implementados em outros navegadores, como sessões de navegação, bloqueador de propagandas e acelerador de carregamento. O Opera também possui uma VPN própria integrada.
Principais Navegadores Web
- Mozilla Firefox
- Mozilla Firefox é um navegador livre e multi-plataforma desenvolvido pela Mozilla Foundation com ajuda de centenas de colaboradores. Sua primeira versão foi lançada em 2004.
- Google Chrome
- Desenvolvido pela Google e introduzido em 2008. É compilado a partir de um projeto de código fonte aberto chamadoChromium. É atualmente o navegador web mais utilizado do mundo.
- Apple Safari
- É o navegador oficial dos produtos da Apple. Tornou-se um dos navegadores mais utilizados graças ao sucesso dos produtos da empresa. Utiliza o motor WebKit para renderização, também muito utilizado em outros navegadores.
- Opera
- Navegador desenvolvido pela Opera Software e bastante usado pelos notáveis recursos, que também foram implementados em outros navegadores, como sessões de navegação, bloqueador de propagandas e acelerador de carregamento. O Opera também possui uma VPN própria integrada.
- Microsoft Edge
- Navegador sucessor do famoso Microsoft Internet Explorer. Foi lançado pela primeira vez em 2015 e possui porte apenas para sistemas Windows e macOS. Possui pouco suporte para padrões abertos.
Inspector Web
O inspector é uma das principais ferramentas aliadas do programador quando desenvolve interfaces para o navegador. É através dele que temos acesso a tudo que o navegador é capaz de interpretar sobre a página, seus erros e suas requisições. Além disso, o Inspector permite executar código javascript e alterar a estrutura e estilização da página em tempo de execução (enquanto a página está aberta), tornando-se uma ferramenta perfeita para o aprendizado.
Atalhos em cada navegador
Para abrir o inspector através de atalhos:
- No Firefox, Chromium, Google Chrome e Opera, use
F12
Links Úteis Web
- Mozilla Developer Docs: um dos melhores repositórios de documentação para web, também disponível em português. O MDZ é um dos esforços da Mozilla para a padronização das tecnologias utilizadas na Web.
- W3Schools.com: Uma ótimo local para consulta e aprendizado guiado das tecnologias web. Disponível apenas em inglês.
Mão na Massa
Exercício: Olá Mundo HTML
Vamos começar criando nosso primeiro projeto usando HTML.
Para isso, você precisa seguir os passos abaixo:
- Crie uma nova pasta com o nome ola_mundo
- Crie um novo arquivo com a extensão .html
- Adicione o seguinte código dentro do arquivo recém criado:html index.html
<!DOCTYPE html> <html> <head> <title>Hello World do Professor</title> </head> <body> <h1>Professor</h1> <p>Esta é minha primeira página escrita usando a linguagem HTML. O exercício está disponível nesta página <a href="#" target="_blank">Aula 01</a></p> </body> </html> - Substitua o nome do professor pelo seu nome
- Substitua a cerquilha (
#) pelo endereço (URL) da página de aula.
Exercícios Complementares
Exercício: Edite a Página HTML
Observe o conteúdo desta página:Exemplo 01
- Crie uma pasta chamada exercicio_01 e dentro dela os arquivos index.html e style.css
- Utilize as ferramentas do navegador para copiar o código fonte da página para os arquivos recém criados
- Realize pelo menos as seguintes alterações na página através do código fonte:
- Modifique as cores em amarelo da página. Utilize o color tool para encontrar uma boa paleta de cores
- Substitua a imagem das caixas por uma outra imagem ao seu gosto
- Substitua o nome do site pelo seu nome
- Diminua o tamanho de todas as imagens para a unidade 10rem
- Insira uma cor de fundo para a página dentro do escopo body
Exercício: Estilizar HTML
Crie uma nova pasta e um novo documento HTML. Dentro do documento, utilize a seguinte estrutura:
- Crie uma pasta chamada exercicio_02 e dentro dela os arquivos index.html
- Copie o código do HTML abaixo para dentro do arquivo index.html
html index.html<html> <head> <meta charset="UTF-8"> <title>Título da Página</title> </head> <body> Olá Mundo! </body> </html>
"Olá mundo", que está encapsulado pelas tags<body> e </body>:- O conteúdo deve conter 3 títulos de filmes, livros ou jogos do seu gosto. Estes deverão ser encapsulados pelas tags
<h1>e</h1> - Imediatamente abaixo de cada título, inclua a sinopse do título escolhido encapsulando com as tags
<p>e</p> - Por fim, acima de cada título correspondente, insira também a seguinte tag
<img src="URL">substituindo a palavra URL pelo link de uma imagem representando o título
style.css com o seguinte conteúdo:css style.cssbody{ font-family: Arial, Helvetica, sans-serif; color: rgb(25, 25, 25); text-align: center; padding: 1rem; } h1{ font-size: 1rem; text-transform: uppercase; font-variant: small-caps; } img{ border-radius: 100%; object-fit: cover; width: 10rem; height: 10rem; }
<head> e</head><link rel="stylesheet" href="style.css">