1

Introdução às Tecnologias Web

TECNOLOGIAS WEB
Introdução às Tecnologias Web
Prof. Me. Joseph Soares Alcântara

ENGENHARIA DA COMPUTAÇÃO
2018.1
 PROGRAMA DA DISCIPLINA
2
1) Introdução às Tecnologias Web
2) Protocolo HTTP
Introdução às Tecnologias Web

3) Introdução ao HTML
4) Introdução ao CSS
5) Introdução ao JavaScript
6) Introdução à biblioteca jQuery
7) Introdução ao Bootstrap
8) Metodologias / Modelos de Desenvolvimento
9) Linguagens para web
 INTRODUÇÃO ÀS TECNOLOGIAS WEB
3
● Introdução
Cliente/Servidor
Introdução às Tecnologias Web

● Outras Tecnologias
4
Introdução às Tecnologias Web

INTRODUÇÃO
World Wide Web – WWW – Internet
 ARPANET
5
● A Internet trata-se de uma rede de computadores conectados de largo alcance que permite a
troca de informações através de envio (upload) e recebimento (download) de dados
Introdução às Tecnologias Web

● Sua história teve início na Guerra Fria travada por EUA x URSS (1945-1991)
– O Departamento de defesa dos EUA criou um sistema de compartilhamento de informações
com a finalidade de facilitar as estratégias de guerra
– Nesse momento, surge a primeira rede de Internet, a Arpanet (Advanced Research and Projects
Agency Network)
– Dia 29 de outubro de 1969 foi estabelecida a primeira conexão entre a Universidade da
Califórnia e o Instituto de Pesquisa de Stanford – primeiro e-mail enviado
– A primeira mensagem transmitida: “LO”
 WORLD WIDE WEB – WWW – INTERNET
6
● Em 1989, Tim Berners-Lee apresentou a seu chefe um documento que tinha escrito
“Information Management: A proposal” – “Gerenciamento de Informação: Uma proposta”
Introdução às Tecnologias Web

– Era a criação da world wide web (www)

● Dos trabalhos de Tim, surgiam três tecnologias:
– HTML – Hypertext Markup Language – Linguagem universal e livre para descrever documentos
– URI – Uniform Resource Identified – (URL) Sistema de endereçamento por nome
– HTTP – Hypertext Transfer Protocol – Protocolo de comunicação entre cliente e servidor
● WorldWideWeb.app – Primeiro Browser, rebatizado mais tarde como Nexus
● O número de servidores web cresceu de forma exponencial
– Janeiro de 1993: 50
– Outubro de 1993: várias centenas
 A INTERNET NO BRASIL
7
● A Internet no Brasil se desenvolveu, no final da década de 1980, junto ao meio acadêmico e
científico, e no seu início, o acesso era restrito a professores e funcionários de universidades
Introdução às Tecnologias Web

e instituições de pesquisa
● Em 1995, torna-se disponível publicamente, deixando de ser privilégio das universidades e
da iniciativa privada
8
Introdução às Tecnologias Web

CLIENTE/SERVIDOR
Arquitetura de comunicação
 CLIENTE/SERVIDOR
9
● O computador que disponibiliza página web é denominado “Servidor”
– Software que provê o serviço
Introdução às Tecnologias Web

● O computador que solicita uma página web é denominado “Cliente”

– Software que solicita o serviço
 O PAPEL DO SOFTWARE SERVIDOR
10
● O papel do software servidor é aguardar por requisição de informação e, em seguida, enviar
uma resposta
Introdução às Tecnologias Web

● Observe que não há nada de especial com o computador, exceto por possuir o software

Servidor
Requisição
Cliente
Internet
Resposta
 SERVIDOR WEB
11
● Para que um computador possa fornecer páginas na web, ele deve estar executando um
software que permita a manipulação de transações HTTP – Servidor HTTP
Introdução às Tecnologias Web

● Algumas opções
– Apache HTTP Server – código aberto, disponível para Windows, Linux e Mac OS
– Microsoft Internet Information Service (IIS) – proprietário da Microsoft
– Light HTTP Server
– Nginx
– Tomcat
 SERVIDOR WEB
12
● Para todo computador conectado à Internet, é atribuído um endereço único
– Ex.: 216.58.202.206, IP do Google
Introdução às Tecnologias Web

● O uso de endereços em formato numérico pode tornar o processo um pouco confuso. O

Domain Name System (DNS) foi desenvolvido para eliminar esse problema, substituindo o
endereço IP por um nome
– Ex.: google.com para acessar o IP 216.58.202.206
 SERVIDOR WEB
13
● Um computador pode conter diversos outros serviços
– Servidor FTP
Introdução às Tecnologias Web

– Servidor SSH
– Servidor Banco de Dados

● Esses serviços são diferenciados através de portas

– Veja https://pt.wikipedia.org/wiki/Lista_de_portas_dos_protocolos_TCP_e_UDP

● É possível disponibilizar mais de um site em um único computador alternando suas portas

 NAVEGADOR
14
● O computador (software) que faz a requisição de um serviço é chamado de cliente
Introdução às Tecnologias Web

● O software mais comum para esse fim é o navegador web (web browser), também conhecido
como agente do usuário (user-agent)
– Disponíveis para desktop e dispositivos mobiles
Introdução às Tecnologias Web

15
NAVEGADOR – LYNX
 NAVEGADORES
16
Introdução às Tecnologias Web

Microsoft IE / Edge
Netscape Safari

Google Chrome Opera

Mozilla Firefox
 NAVEGAÇÃO
17
● Os sistemas atuais, incluindo móveis, disponibilizam o recurso de acessibilidade, permitindo
narrar para o usuário os itens sobre os quais ele navega
Introdução às Tecnologias Web

● É importante levar em consideração esse público, sempre que possível

 SERVER SIDE X CLIENT SIDE
18
● Estes termos são utilizados para indicar qual máquina realiza o processamento:
– Aplicações client-side executam na máquina do usuário (client)
Introdução às Tecnologias Web

– Aplicações e funções server-side utilizam o poder de processamento de servidores (server)

 CLIENT SIDE
19
● Navegador (Browser)
– Mozilla Firefox
Introdução às Tecnologias Web

– Google Chrome
– Outros

● Processamento lógico: JavaScript

 SERVER SIDE
20
● Servidor HTTP
– Apache
Introdução às Tecnologias Web

– IIS
– Outros
● Processamento lógico
– Python – 1991
– PHP – 1995
– Ruby (on Rails) – 1995
– ASP – 1998
– Java JSP – 1999
– ASP.NET – 2002
– Java JSF – 2009
 SERVER SIDE
21
● Armazenamento
– Oracle – 1979
Introdução às Tecnologias Web

– Microsoft SQL Server – 1989

– MySQL – 1995
– PostgreSQL – 1996
 HTML
22
● Abreviação para HyperText Markup Language – Linguagem de Marcação de HiperTexto
Linguagem usada para construção de páginas web, que deve ser interpretada por um
Introdução às Tecnologias Web

navegador (browser) web

● Todo documento HTML possui marcadores (tags) entre chaves angulares < e >, que
orientam a formatação do documento, indicando
– Cabeçalho <head> … </head>
– Corpo <body> … </body>
– E outros elementos
 CSS
23
● Cascading Style Sheets – Folha de Estilo em Cascata
Mecanismo para adicionar estilo (cores, fontes, espaçamento, etc) a um documento HTML
Introdução às Tecnologias Web

● Permite separar a formatação do documento HTML

 JAVASCRIPT
24
● Linguagem de programação interpretada pelo navegador – a principal linguagem client-side
Permite a execução de scripts do lado do cliente
Introdução às Tecnologias Web

● Pode ser utilizada também em server-side (Node.js)

 AJAX
25
● Asynchronous Javascript and XML (sonho do desenvolvedor)
Por quê?
Introdução às Tecnologias Web

– Lê dados do servidor após a página ter sido carregada

– Atualiza uma página sem recarregá-la
– Envia dado para o servidor em background
26
Introdução às Tecnologias Web

OUTRAS TECNOLOGIAS
Outras tecnologias web
 JQUERY
27
● Biblioteca de funções JavaScript que interage com o HTML
Redução de código
Introdução às Tecnologias Web

● Reutilização de código através de plugins

● Aumenta a compatibilidade entre navegadores
● Suporte a AJAX

● Ex.:
Sem jQuery: document.getElementById('Teste').value = 5;

Com jQuery: $('#Teste').val(5);

 MATERIALIZE
28
● Biblioteca/framework front-end responsivo
Acelera o desenvolvimento
Introdução às Tecnologias Web

● Redução de escrita de código

● Aumenta a compatibilidade entre navegadores
Introdução às Tecnologias Web

29
MATERIALIZE
 BOOTSTRAP
30
● Biblioteca/framework front-end responsivo
Acelera o desenvolvimento
Introdução às Tecnologias Web

● Redução de escrita de código

● Aumenta a compatibilidade entre navegadores
Introdução às Tecnologias Web

31
 FRAMEWORK WEB
32
● Abstração que une diversos códigos que são comumente encontrado em vários projetos de
software, procurando fornecer uma funcionalidade genérica
Introdução às Tecnologias Web

● Desenvolvido em uma linguagem específica que irá auxiliar sistemas desenvolvidos naquela
mesma linguagem
● Pode conter um conjunto de bibliotecas com funções que são mais frequentemente utilizadas
● Ex.:
– Padrão de projeto
– Conexão com banco de dados
– Unidades de testes
 FRAMEWORK WEB
33
● Para cada linguagem é possível encontrar diversos frameworks
Introdução às Tecnologias Web

– Linguagem Ruby – Linguagem Python

● Ruby on Rails ● Flask
● CherryPy
● Web2py
– Linguagem PHP
● Django
● CakePHP
● CodeIgniter
● Zend – Linguagem Java
● VRaptor
● Spring MVC
● JSF
 WEBSERVICES
34
● Integração de sistemas na comunicação entre aplicações diferentes – independente de sistema
operacional e de linguagem de programação
Introdução às Tecnologias Web

● Motivos para uso

– Integração entre serviços distintos
– Padronização no retorno de cada requisição de serviços
● Protocolos
– REST – Representational State Transfer – Transferência de Estado Representacional
● Abstração da arquitetura web (Requisição – Resposta)
– SOAP – Simple Object Access Protocol – Protocolo Simples de Acesso a Objetos
● Envelopes entre as partes comunicantes
Introdução às Tecnologias Web

35
WEBSERVICES – EXEMPLO
Introdução às Tecnologias Web

36
37

Internet
Introdução às Tecnologias Web

Banco de Dados

WebService
Introdução às Tecnologias Web

38
39
Introdução às Tecnologias Web

JOSEPH SOARES ALCÂNTARA

josephsoaresalcantara@gmail.com

ENGENHARIA DA COMPUTAÇÃO
2017.2