IFPA

Tecnologia em Análise e Desenvolvimento de Sistemas (TADS)

Programação para web

01 – Apresentação / Introdução

PROFESSOR: Claudio Roberto de Lima Martins

claudiomartins2000@gmail.com
1
Agenda - Assuntos

✧Apresentação: Objetivos da disciplina, plano de aula,

metodologia
✧ Programação para web
✧ Arquitetura da Internet e Web (WWW)
✧ Programação distribuída no modelo C/S
✧Camada web: Linguagens de programação, Protocolo
HTTP, páginas estáticas e dinâmicas, frameworks de apoio à
programação, ferramentas de programação

2
Apresentação – Objetivos da disciplina

✧Aprender conceitos, ferramentas e técnicas envolvidos na

programação web
✧Aprender as principais tecnologias envolvidas no lado
cliente (“front-end”): HTML, CSS, Javascript (JS).
✧ Compreender o funcionamento das principais tecnologias do
lado servidor (“back-end”): Ajax, dados JSON e XML,
linguagens do lado servidor PHP e Java.
✧ Desenvolver exemplos de páginas e uma aplicação web
(incluindo sua publicação).

3
Apresentação – Planejamento de aulas

4
Bem-vindo à web!

✧Vídeo da Khan Academy:

▪ https://pt.khanacademy.org/computing/computer-programming/html-css/intro-to-html/v/making-webpages-intro

5
Motivação
A cada anos cresce o número de usuários de internet no mundo. A
maioria utiliza o smartphone como equipamento de acesso.

6
 Motivação
✧Cerca de 40% da população mundial tem uma conexão com a internet hoje
(2016). Em 1995, era menos de 1%.
O número de usuários da Internet aumentou dez vezes de 1999 a 2013.
O primeiro bilhão foi alcançado em 2005. O segundo bilhão em 2010.
O terceiro bilhão em 2014. O quarto bilhão em 2018.
O gráfico abaixo mostra o número de usuários globais de internet por ano
de1993 a 2016:

http://www.internetlivestats.com/internet-users/#trend 7
Motivação
✧Lista de países por número de usuários de Internet (2016)

http://www.internetlivestats.com/internet-users-by-country/ 8
 Motivação

http://www.internetlivestats.com/internet-users/brazil/ 9
Motivação
Número total de Websites (domínios únicos)

http://www.internetlivestats.com/total-number-of-websites/ 10
Programação para web
✧Conforme veremos adiante, a programação para
web é influenciada pela arquitetura que essa
plataforma (web) apresenta (cliente/servidor usando
protocolo HTTP).
✧Aslinguagens de programação web são utilizadas
especificamente para o desenvolvimentos das
camadas de apresentação e de lógica de negócio de
web sites, portais e aplicações web em geral.
▪ De uma lado há o browser (cliente) com tecnologias de
“frond-end” (camadas de apresentação);
▪ De outro lado há o servidor web com tecnologias de
suporte à infraestrutura da aplicação (o “back-end”, onde
está a camada da lógica de negócio e de serviços).
11
Programação para web
✧No browser (cliente) há as seguintes tecnologias de “frond-
end”:
▪ HTML (linguagem de marcação, hoje na versão 5)
▪ CSS (linguagem de script de formatação e apresentação, hoje na v.3)
▪ JavaScript (linguagem de código interpretado no browser)
▪ Tecnologias aderentes (plugins): Silverlight, ActiveX, Applet Java,
Flash, etc. (os novos browsers estão impedindo o uso de plugins)
✧ No lado do servidor web há muitas tecnologias de suporte à
infraestrutura da aplicação (o “back-end”) e serviços:
▪ Linguagens de programação de script: PHP, Python, Asp, JSP, etc
▪ Plataformas que usam diretamente os protocolos web (HTTP): Java,
C#, NodeJS, etc;
▪ Interfaces de programação (API) para chamada a componentes (CGI,
DLLs, etc) e serviços externos ao servidor web. Ex: drivers e
middleware para usar banco de dados, acesso aos recursos de rede e
sistema operacional, etc.
http://portalwebdesigner.com/programacao/
12
Programação para web
✧Pesquisa realizada por StackOverflow em 2015 mostra que as cinco
linguagens de programação mais utilizadas para o desenvolvimento web
são Java, Javascript, PHP, Python e Ruby.

http://blog.stoneriverelearning.com/top-5-programming-languages-used-in-web-development/
13
Programação para web
✧ De acordo com dados do W3techs (2013 - https://w3techs.com/):
▪ PHP é a linguagem de programação do lado do servidor mais usada e
seu uso está aumentando.
▪ Java é o líder em linguagem de programação do lado do servidor em
sites de alto desempenho.
▪ Perl, Python, Javascript e Ruby são usados por alguns sites, mas com
alto tráfego.
▪ O uso de .Net (C# e ASP.NET) está diminuindo.
▪ O uso de sistemas de gerenciamento de conteúdo está aumentando
para construção de websites (ex: WordPress, Joomla e Drupal).

14
Arquitetura da Internet e Web (WWW)
• A Internet é exemplo de um grande
sistema distribuído.
• A Internet é um conjunto de tecnologias
organizadas em aplicações de "serviços“,
que envolve, em essência, o uso de
protocolos de comunicação em rede e o
gerenciamento compartilhado de recursos
distribuídos em uma única rede mundial
de computadores.

O protocolo TCP/IP forma

a base da internet.

15
Fundamentos
▪ A internet oferece vários exemplos de serviços, que podem ser
vistos como aplicações, como:
▪ compartilhamento de recursos (documentos/páginas, imagens,
arquivos) usando a WWW (web usando HTTP)
▪ gerenciadores de impressão remota,
▪ compartilhamento de dados em forma de arquivos (FTP),
▪ banco de dados, e objeto de diversos tipos,
▪ comunicação síncrona e assíncrona (bate-papo e fila de
mensagens),
▪ envio e recebimento de mensagens assíncronas (email), etc.
✧ Portanto, a WWW (World Wide Web, ou “web”) é apenas um
exemplo de serviço ou aplicação da Internet.

16
WWW ou Web
✧A WWW, World Wide Web ("Rede de alcance mundial"), ou Web, é um
sistema de recursos (documentos e conteúdos diversos) compartilhados e
interligados (através de “links”) na Internet.
✧ Criada pelo cientista Tim Berners-Lee nos anos 1990.
No final de 1990, Berners-Lee
já havia construído as
ferramentas necessárias para
o sistema:
•o navegador,
•o servidor web e
•as páginas web.

17
Plataforma Web
Páginas da Web são exemplos de recursos que são
compartilhados na Web. Esses recursos são gerenciados por
servidores Web.

18
Plataforma Web - Tecnologias

✧ A funcionalidade da Web é baseada em três padrões

tecnológicos:
✧ HTTP
✧ URL e URI
✧ HTML

19
Plataforma Web - Tecnologias
✧ HTTP (Hypertext Transfer Protocol) um protocolo que
especifica como o navegador e servidor web comunicam entre
si.
✧ HTTP é um protocolo do modelo cliente-servidor. O cliente
solicita (request) um recurso e o servidor responde com a
resposta.

Solicitação (request)

Resposta
20
Plataforma Web - Tecnologias
URL e URI
✧A URL (Uniform Resource Locator) associa um endereço
remoto com um nome de recurso na Internet.
▪ ex: http://www.ifpa.edu.br é uma URL
URI – Uniform Resource Identifier
✧A URI (ou Identificador de Recursos Universal) é o
identificador do recurso. Pode ser uma imagem, uma página,
etc. Qualquer recurso disponível na internet precisa de um
identificador único para ser localizado. A URL é um exemplo de
URI, mas pode-se usar URI para localizar qualquer recurso em
algum tipo de protocolo.
✧Ex: ldap://[2001:db8::7]/c=GB?objectClass?one
mailto:John.Doe@example.com
https://pt.wikipedia.org/wiki/URI
21
Exemplos e estrutura de uma URI

https://en.wikipedia.org/wiki/Uniform_Resource_Identifier
22
Plataforma Web - Tecnologias

✧HTML (HyperText Markup Language) é uma linguagem de

marcação para codificar as páginas web de modo que possa
ser exibida em uma grande variedade de browsers.

23
Plataforma Web – Resumo
✧Arquitetura cliente-servidor: O Navegador (browser) da Web
é um programa cliente (por exemplo, Firefox) que é executado
no computador do usuário. O servidor Web acessa arquivos
locais que contêm as páginas da Web e, em seguida, envia-os
ao navegador do computador cliente.
✧O HTML é uma linguagem de marcação para analisar e
processar os dados que são apresentados no browser, mas
não separa conteúdo do formato de apresentação.
✧Os URI e URLs são localizadores de recursos eficientes, que
representam os links de recursos.
✧O HTTP é um protocolo simples que pode ser implementado
para ser utilizado em muitos tipos de transferência de conteúdo
e tipos de serviço.

24
Ferramentas de programação, frameworks e
ambientes
✧IDEs: Netbeans, Eclipse, VS-Code (Microsoft), Jdeveloper
(Oracle), IntelliJ IDEA (Jetbrains), etc.
✧ Ambientes de aprendizagem online:
✧ W3Schools ( http://www.w3schools.com/html )
✧ Khan Academy (https://pt.khanacademy.org/computing/computer-programming)

✧Ambientes de programação on-line (playground de código

JavaScript):
▪ JSFiddle(http://jsfiddle.net/ )
▪ CodePen (https://codepen.io/)
✧ Frameworks Java (JSF, Primes Faces, SpringWeb)
✧ Frameworks PHP (Laravel, Cake)

25