Curso Técnico de Desenvolvimento de Sistemas
Professor: LuizAntonio
Aula- Fundamentosdo Desenvolvimento WEB

Conteúdo: Estático e atualizado pelos
webmastes;
Tecnologia: limitada;
Desenvolvimento: focado no visual e na
construção gráfica (quase artesanal);
Serviços: Apenas uma vitrine, nenhuma
interação do usuário.

Conteúdo: A publicação de artigos e notícias se
torna automatizado;
Tecnologia: Evolução das tecnologias e
surgimento de outras;
Desenvolvimento: Surgem softwares (como os
interpretadores) que ajudam em algumas partes
do processo;
Serviços: Surgem as primeiras aplicações
comerciais, os usuários já tem alguma
interatividade. Início do uso dos Emails.

Conteúdo: Ainda mais dinâmico, mais customizável
e mais abrangente, com alta utilização de
multimídia (Música, video e animações);
Tecnologia: Tecnologia começa a se tornar padrão
com (HTML, CSS, XML). A era do Flash. Os
navegadores alcançam níveis satisfatórios de
recursos;
Desenvolvimento: Surgem novos softwares que
ajudam em algumas partes do processo e os
Interpretadores de códigos passam a ser padrão
de mercado;
Serviços: Deixam de ser vitrines e se tornam
aplicações profissionais e comerciais.

Conteúdo: Em sua grande maioria livre;
• Tecnologia: Padrões muito mais próximos ao W3C
(World Wide Web Consorcium); Surgimento do AJAX
(Javascript e XML), consolidação do padrão XML;
Desenvolvimento: Mais automatizado, mais
ferramentas de desenvolvimento, muito mais
produtivo. Seja no cliente ou no Servidor.
Serviços: O uso de recursos como o Ajax, deixam os
sites com aparência de aplicações. Os usuários tem
muito mais interação com os sites, conquistam mais
poder e liberdade

Reportagens e referências:
- https://canaltech.com.br/internet/veja-como-eram-os-
sites-dessas-24-empresas-nos-anos-90-62851/
- https://www.linkdesignbrasil.com/a-evolucao-da-internet-
ate-os-dias-atuais/
- https://www.brasilcode.com.br/melhores-linguagens-de-
programacao-para-aprender-em-2021/

Desenvolver pra web resume-
se a criar interfaces (páginas)
que dão acesso a um conteúdo
local ou externo, sendo este
através de requisições e
respostas (troca de dados).

Velocidade e disseminação de
informação;
Rápidos resultados em virtude da gama
de ferramentas disponíveis;
Portabilidade absoluta;
Manutenção facilitada;

Visualização de dados sem comunicação
externa (conteúdo estático)
A partir da troca de dados, entre um cliente e
um servidor (conteúdo dinâmico)
Arquitetura client-server (cliente-
servidor): requisição - resposta

Uma página web constitui-se de três
camadas:
◦ Conteúdo
◦ Apresentação
◦ Comportamento
A divisão em camadas, além de ser uma boa
prática, facilita o trabalho do desenvolvedor
e nos oferece mais performance ao projeto.

Modelo de desenvolvimento
em camadas: organização
de código, facilitação do
trabalho

Camada fundamental de formatação,
edição e organização do conteúdo
principal do site;
Na ampla maioria dos desenvolvimentos é feito
em HTML.

HTML é a linguagem responsável por exibir
e estruturar os dados. Pode ser codificado
num editor de texto, framework e/ou
interpretador de código;
Deve ser sempre o mesmo
código, independentemente do dispositivo
ou programa que acessa a página.

Camada de formatação visual e design da
página. É composta por elementos visuais
e gráficos, como cores, imagens, estilos,
layouts, etc.
É construída a partir de uma linguagem
chamada CSS(Cascading Style Sheet –
Folha de estilos encadeados)

CSSé a parte do código que cuida do
layout, design e formatação da página e seus
componentes;
Uso simples, intuitivo, fluido;
Pode mudar de acordo com o dispositivo ou
programa que está acessando a página, ou
até mesmo com as preferências do usuário.

item {
cor: vermelho;
tamanho: 2;
}
parágrafo {
destaque: negrito;
alinhamento: centralizado;
}

É a camada que permite melhorar a interação
do usuário com a página;
Composta principalmente pela linguagem de
programação JavaScript e pode ficar restrita
a determinados dispositivos ou programas e
executada através de compiladores,
interpretadores, frameworks ou anexada
numa outra linguagem de programação
como script complementar;

JavaScript é linguagem de programação de
altíssimo nível, mais voltada para a Web,
que oferece inúmeros recursos para uma
página;
Quanto mais avançada for a usabilidade da
linguagem, mais avançada deverá ser a
ferramenta e até o navegador utilizado;

resultado = pergunta(
);
se (resultado = = sim) {
sair();
} senão {
permanecer();
}

Modelo de desenvolvimento
em camadas: linguagens
utilizadas

Servidores
Web, BD Internet
Aplicação
Cliente com
Web Browser

É um conjunto de normas e recomendações
para o desenvolvimento web que visam
padronizar e, assim, facilitar a programação
e acesso.

Um consórcio chamado W3C (World Wide
Web Consortium), que foi criado para tornar
a Web "universal", criando padrões;
Écomposto por empresas na área de
tecnologias pra Web;

O maior problema que enfrentamos hoje,
quando estamos desenvolvendo uma
aplicação web, é a incompatibilidade de
nossos projetos entre navegadores.

Quando a Web surgiu, navegadores
começaram a adicionar recursos que apenas
ele possuíam, no intuito de atrair
desenvolvedores;
O problema era que todos os navegadores
eram usados. E o usuário tem direito a ter
acesso onde ele quiser;

Internet Explorer e Netscape Navigator, os
mais usados na época, travaram uma
disputa comercial acirrada que resultou
na despadronização web, onde cada site
tinha que ter uma versão para cada
navegador, prejudicando o trabalho do
desenvolvedor web.

Os desenvolvedores web passaram a programar
novos navegadores afim de atender suas
demandas específicas;
Os navegadores estão cada vez mais
aprimorados e atendendo a demandas de
interpretação de códigos, padronização de páginas e
outras configurações.

As interfaces do usuário dos navegadores têm muito
em comum. Entre os elementos comuns às interfaces
do usuário estão:
•Barra de endereço para inserção do URI
•Botões voltar e avançar
•Opções para adicionar favoritos
•Botões atualizar e parar para atualizar e parar o
carregamento dos documentos atuais
•Botão Início que o leva à página inicial

1.A interface do usuário , que inclui a barra de endereço, o botão
voltar/avançar, o menu de favoritos, etc. Todas as áreas do display do
navegador, exceto a janela principal em que você visualiza a página
solicitada.
2.O mecanismo de navegação , que faz a triagem das ações entre a
interface do usuário e o mecanismo de renderização.
3.O mecanismo de renderização, responsável pela exibição do conteúdo
solicitado. Por exemplo, se o conteúdo solicitado estiver em HTML, ele é
responsável pela análise do HTML e do CSS e pela exibição do conteúdo
analisado na tela.
4.Networking, utilizado para chamadas de rede, como solicitações HTTP.
Possui interface independente de plataforma e sub-implementações para
cada plataforma.

5. Back-end da interface do usuário, utilizada para desenhar
widgets básicos como caixas de combinação e janelas. Exibe
uma interface genérica que não é específica à plataforma. Sob
a interface, utiliza os métodos da interface do usuário do
sistema operacional.
6. Intérprete JavaScript Utilizado para analisar e executar o
código JavaScript.
7. Armazenamento de dados. Esta é uma camada
persistente. O navegador precisa salvar dados de diversos
tipos no disco rígido, como cookies. A nova especificação
HTML (HTML5) define "banco de dados da web", que é um
banco de dados completo (embora leve) no navegador.

Fonte: Geek360

Fonte: CityGlobeTour

Fonte:
https://www.youtube.com/watch?v=3qz5XuMTHDU&ab_c
hannel=VidaemGr%C3%A1fico (Canal Vida em Gráfico)

HTML
CSS
Javascript
XML
...

<html>
<head>
<title>Título da Página</title>
</head>
<body>
Esta é minha primeira página.
</body>
</html>

<html>
<head>
<link href="pagina.css" rel="stylesheet"
type="text/css" / >
<title>Título da Página</title>
</head>
<body>
Esta é minha primeira página.
</body>
</html>

body {
background-color :
#ffffff;
color : #000000;
}

<html>
<body>
<script type="text/javascript">
for (i = 0; i < 5; i++)
{
document.write("Alo você !!!")
document.write("<br />")
}
</script>
</body>
</html>

<?xml version="1.0" encoding="UTF-8"?>
<livros>
<livro isbn=“0001”>
<titulo>JavaServer Pages</titulo>
<autor>Nick Todd</autor>
<editora>Campus</editora>
<assunto>JSP</assunto>
</livro>
<livro isbn=“0002”>
<titulo>Meu pé de laranja
lima</titulo>
<editora>Vozes</editora>
<autor>Brilhante</autor>
</livro>
</livros>

Necessidade dos websites oferecerem
conteúdos dinâmicos e atualizados
Ciclo de vida da informações trafegadas entre
servidor e cliente (escopo)
Linguagens de script
◦ JSP
◦ ASP
◦ PHP
◦ Perl

Servidores Web
◦ IIS
◦ Apache
◦ Tomcat

Servidor web mais utilizado no mundo
atualmente
Software Livre
Escrito em C
Executa diversas linguagens script: PhP, Perl,
ASP, etc.
Possui suporte nativo ao MySQL

Implementação de referência para
JSP/Servlets (Java)
Escrito em Java
Devido à sua simplicidade e fácil instalação, é
comumente utilizado em cursos para
desenvolvimento web

Estes servidores oferecem recursos comuns
a diferentes aplicações
(autenticação, conexão à BDs, suporte a
transação, etc)
Pensando-se numa arquitetura em
camadas, um servidor de aplicação é um
servidor que hospeda e oferece serviços
para outras aplicações
Com isso, espera-se que os
desenvolvedores poupem tempo para
implementação da lógica do negócio

Formato padrão, baseado em
XML
Tem sido adotado por websites que
disponibilizam informações na rede, como
sites de jornais, blogs, sites
institucionais, etc.
Hoje existem diversos leitores (agregadores)
de RSS:browsers, programas de e-
mail, softwares, etc ..

Proposta:
◦ Integração de sistemas através do uso de XML
sobre HTTP
Tecnologias:
◦ XML
◦ WSDL(Web Service Description Language)
◦ SOAP (Simple Object Access Protocol)
Vantagens:
◦ Integração com baixo acoplamento
◦ Independe das linguagens de implementação

Alura – www.alura.com.br
BrasilCode – www.brasilcode.com.br
gobacklog – https://gobacklog.com/
eufacoprogramas – https://eufacoprogramas.com
becode – www.becode.com.br
linhadecodigo – http://www.linhadecodigo.com.br/
DankiCode – https://blog.dankicode.com/