Introdução Desenvolvimento Web

Prévia do material em texto

Introdução ao Desenvolvimento 
Web
Prof. Ms. Carlos Silveira/Introd. Ao Desenvolvimento Web
Professor
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
• Professor
• Gerente Infraestrutura Tecnológica
Agenda
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Internet
Web
Front-End x Back-End x Full Stack
Browser
Framework
Responsividade na web
HTML
IDEs
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Internet
Rede que interconecta computadores e outros dispositivos em escala global para a
transferência de dados entre eles.
World Wide Web é uma aplicação onde páginas são interligadas através de links e que
se utiliza da Internet para funcionar.
A internet é uma rede internacional de dispositivos conectados entre si por meio de
várias redes que se conectam uma a outra até formar a grande rede ou internet.
Aplicações rodam na internet, alguns exemplos são: troca de arquivos (FTP), Web
(HTTP), envio e recebimento de emails (SMTP e POP), entre outras.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Como a Internet Funciona?
Pacotes
Na rede, um pacote é um pequeno segmento de uma mensagem maior. Cada pacote
contém tanto dados quanto informações sobre esses dados. As informações sobre o
conteúdo do pacote é conhecida como "cabeçalho" e vai na frente do pacote para que a
máquina receptora saiba o que fazer com o pacote.
Protocolos
Em rede, um protocolo é uma forma padronizada de realizar determinadas ações e
formatar dados para que dois ou mais dispositivos sejam capazes de se comunicar entre si
e de entender um ao outro.
Existem protocolos para envio de pacotes entre dispositivos na mesma rede (Ethernet),
para envio de pacotes de rede para rede (IP), para garantir que esses pacotes cheguem com
sucesso e em ordem (TCP) e para formatação de dados para sites e aplicativos (HTTP).
Protocolos para roteamento, testes e criptografia, etc.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Como a Internet Funciona?
Infraestrutura física
Roteadores
Encaminham pacotes para diferentes redes de computadores com
base no seu destino.
Switches
Conectam dispositivos que compartilham uma
única rede. Eles usam comutadores de pacotes
para encaminhar os pacotes para os
dispositivos corretos.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Como a Internet Funciona?
Infraestrutura física
Servidores web
São computadores especializados de alta capacidade que armazenam e
oferecem conteúdo (páginas web, imagens, vídeos) para os usuários, além
de hospedar aplicativos e bancos de dados. Os servidores também
respondem às consultas do DNS e realizam outras tarefas importantes para
manter a internet em funcionamento.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Como a Internet Funciona?
Infraestrutura física
utilizam o protocolo TCP/IP para comunicar entre si
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Como a Internet Funciona?
Infraestrutura física
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Como Funciona a WEB?
Web é um termo simplificado de World Wide Web, o conhecido www.
É um serviço oferecido por um dispositivo servidor para permitir o compartilhamento de
arquivos (documentos, imagens, vídeos e outros), tendo o navegador como ferramenta de
acesso a web.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
W3C
https://www.w3.org/
O World Wide Web Consortium (W3C) desenvolve padrões e
diretrizes para ajudar todos a construir uma web baseada nos
princípios de acessibilidade , internacionalização , privacidade e
segurança
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Web
Pilares
Um esquema de nomes para localização de fontes de informação na Web, esse
esquema chama-se URI (Uniform Resource Identifier -
https://www.examplo.com/caminho/para/recurso?query=example#fragment )
Um protocolo de acesso para acessar estas fontes, hoje o HTTP.
Uma linguagem de marcação de Hypertexto, para a fácil navegação entre as
fontes de informação: o HTML.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Web
Funcionamento
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Web
Funcionamento
Clientes e servidores
Clientes são os típicos dispositivos
conectados à internet dos usuários da
web (por exemplo, seu computador
conectado ao seu Wi-Fi ou seu
telefone conectado à sua rede móvel)
e programas de acesso à Web
disponíveis nesses dispositivos
(geralmente um navegador como
Firefox ou Chrome).
Servidores são computadores que
armazenam páginas, sites ou
aplicativos. Quando o dispositivo de
um cliente quer acessar uma página,
uma cópia dela é baixada do servidor
para a máquina do cliente para ser
apresentada no navegador web do
usuário.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Web
Funcionamento
Além do cliente e do servidor, temos:
Conexão de Internet: permite que você mande e receba dados na web.
TCP/IP: Protocolo de Controle de Transmissão e Protocolo de Internet (Transmission
Control Protocol e Internet Protocol) são protocolos de comunicação que definem como
os dados trafegam pela web.
DNS: Servidor de Nome de Domínio (Domain Name Servers) são como um catálogo de
endereços para sites.
HTTP: Protocolo de Transferência de Hypertexto (Hypertext Transfer Protocol) é um
protocolo de aplicação que define uma linguagem para clientes e servidores se
comunicarem entre si. É como a linguagem que você usa para encomendar seus
produtos.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Web
Funcionamento
Além do cliente e do servidor, temos:
Arquivos componentes: m website é feito de muitos arquivos diferentes, que são como as
diferentes partes dos produtos que você comprou na loja. Esses arquivos são divididos em
dois tipos principais:
Arquivos de Código: os sites são feitos principalmente de HTML, CSS e JavaScript,
embora você possa conhecer outras tecnologias mais tarde.
Recursos: esse é o nome coletivo para todas as outras coisas que compõem um site,
como imagens, música, vídeos, documentos do Word e PDFs.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Web
Funcionamento
URL: protocolo + nome de domínio + caminho para a informação
https → é o protocolo HTTP combinado com o protocolo SSL comunicação criptografado.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Web
Funcionamento
Fluxo principal
Quando você digita um endereço web em seu navegador:
O navegador vai para o servidor DNS e encontra o verdadeiro endereço (IP) onde o site
se hospeda;
O navegador manda uma mensagem de requerimento HTTP para o servidor pedindo a
cópia do site;
O servidor manda ao cliente a mensagem "200 OK", e então começa a enviar os
arquivos do site para o navegador.
O navegador monta os arquivos recebidos em um site completo e os exibe.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Web
Página Web
Um documento que pode ser mostrado em um navegador web como Firefox, Google
Chrome, Opera, Microsoft Internet Explorer ou Edge, ou Safari da Apple.
É simplesmente um documento que é renderizado ("mostrado") por um navegador. Tais
documentos são escritos com uso da linguagem HTML. Uma página web pode possuir
uma variedade de diferentes tipos de recursos incorporados a ela, como:
Informação de estilo — controlando como a página se apresenta e se comporta
(look-and-feel).
Scripts — os quais são responsáveis por adicionar interatividade à página.
Mídia — imagens, sons e vídeos.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Web
Site
Um conjunto de páginas web agrupadas juntas e geralmente conectadas juntas de
diversas formas. Também conhecido como "web site" ou simplesmente "site".
Um site é um conjunto de páginas web vinculadas (mais os recursos associados a
elas) que compartilham um único nome de domínio.
Cada página web de um dado website provê links explícitos - na maior parte do
tempo na forma de texto clicável - que possibilitama um usuário mover-se de uma
página do website à outra.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Web
Servidor web
Um computador que hospeda um site na Internet.
Um servidor web nada mais é que um computador hospedando um ou mais websites.
Hospedar significa que todas as páginas web e seus arquivos auxiliares estão
disponíveis a partir daquele computador.
Servidor web enviará qualquer página web a partir do website que está hospedado
nele para o navegador de qualquer usuário que o tenha requisitado (feito uma
requisição).
Servidor web pode se referir a hardware ou software, ou ambos trabalhando
juntos.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Web
Servidor web
No lado do hardware, um servidor web é um computador que armazena software de
servidor web e arquivos de componentes de um site (por exemplo, documentos
HTML, imagens, folhas de estilo CSS e arquivos JavaScript).
Do lado do software, um servidor web inclui várias partes que controlam como os
usuários da web acessam os arquivos hospedados.
No mínimo, este é um servidor HTTP.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Web
Servidor web
No lado do hardware, um servidor web é um computador que armazena software de
servidor web e arquivos de componentes de um site (por exemplo, documentos
HTML, imagens, folhas de estilo CSS e arquivos JavaScript).
Do lado do software, um servidor web inclui várias partes que controlam como os
usuários da web acessam os arquivos hospedados.
No mínimo, este é um servidor HTTP.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Web
Para publicar um site, você precisa de um servidor web estático ou dinâmico.
Servidor web estático
Consiste em um computador (hardware) com um servidor HTTP (software). É
chamado de "estático" porque o servidor envia seus arquivos hospedados como
estão para o seu navegador.
Servidor web dinâmico
Consiste em um servidor web estático mais software extra, mais comumente um
servidor de aplicativos e um banco de dados.
É chamado de dinâmico porque o servidor de aplicativos atualiza os arquivos
hospedados antes de enviar o conteúdo ao seu navegador através do servidor
HTTP.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Web
Exemplo Arquitetura
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Web
O que é um nome de domínio?
Eles fornecem um endereço legível para qualquer servidor web disponível na Internet.
Qualquer computador conectado à Internet pode ser acessado através de um
endereço IP público , seja um endereço IPv4 (por exemplo 192.0.2.172, ) ou um
endereço IPv6 (por exemplo, 2001:db8:8b73:0000:0000:8a2e:0370:1337).
Computadores podem lidar facilmente com esses endereços, mas as pessoas têm
dificuldade em descobrir quem está executando o servidor ou que serviço o site
oferece.
Para resolver esse problema, são usados endereços legíveis por humanos,
chamados nomes de domínio.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Web
O que é um nome de domínio?
TLD (domínio de nível superior).
Os TLDs informam aos usuários o propósito geral do serviço por trás do nome de
domínio.
TLDs mais genéricos ( .com, .org, .net) não exigem que os serviços da Web atendam a
nenhum critério específico
TLDs locais como .us, .fr, ou .sepodem exigir que o serviço seja fornecido em um
determinado idioma ou hospedado em um determinado país
TLDs que contêm .govsó podem ser usados ​​por departamentos governamentais.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Web
O que é um nome de domínio?
Rótulo (componente/label)
Também é chamado de Domínio de Nível Secundário (SLD).
Um nome de domínio pode ter muitos rótulos (ou componentes).
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Web
O que é um nome de domínio?
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Front-End
Concentra-se no lado voltado para o usuário de um site.
Os desenvolvedores front-end garantem que os visitantes possam interagir e navegar
facilmente nos sites usando linguagens de programação , habilidades de design e outras
ferramentas.
Usam linguagens de programação como JavaScript, HyperText Markup Language
(HTML) e Cascading Style Sheets (CSS) para criar sites.
O HTML apresenta o conteúdo e a estrutura do site.
O CSS adiciona recursos de design.
O JavaScript cria recursos interativos avançados
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Front-End
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Front-End
Um desenvolvedor front-end é responsável por tudo que você vê, seja estilo, gráficos,
texto, alinhamento, navegação, cores e assim por diante, e tenta melhorar a experiência
do usuário para torná-la o mais perfeita possível.
Contribuem para o design e a estética geral, juntamente com a depuração.
Os principais objetivos do desenvolvimento frontend são capacidade de resposta e
desempenho.
As habilidades de desenvolvedor front-end envolvem sólido conhecimento de linguagens
de script como HTML, JavaScript e CSS3.
Além disso, trabalhar como desenvolvedor front-end também requer habilidades em
JQuery, Ajax, UI (interface do usuário), UX (experiência do usuário), bem como
familiaridade com frameworks como AngularJS, EmberJS, Foundation, Bootstrap e
Backbone.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Os desenvolvedores back-end concentram-se no lado do servidor dos sites.
Usam habilidades técnicas para realizar o trabalho de bastidores que cria a estrutura e a
funcionalidade geral de um site, permitindo a existência do front-end do site.
Criam as operações, os bancos de dados e a interface de programação de aplicativos (API) 
de um site.
Cobre a lógica e integração de aplicativos da web do lado do servidor e atividades, como
escrever APIs, criar bibliotecas e trabalhar com componentes do sistema, em oposição
ao desenvolvimento de front-end, que se concentra em serviços e programas voltados
para o cliente.
AJAX significa Asynchronous JavaScript and XML, ou JavaScript e
XML Assíncronos,.Ele é um conjunto de técnicas de
desenvolvimento voltado para a web que permite que aplicações
trabalhem de modo assíncrono, processando qualquer requisição
ao servidor em segundo plano.Back-End
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Back-End
Algumas linguagens de programação que os desenvolvedores back-end normalmente
precisam conhecer incluem: PHP, Ruby, Python e .Net.
Além disso, eles devem ter bom domínio sobre tecnologias de banco de dados como
Oracle, Microsoft SQL Server e MySQL.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Front x Back x Full
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Front x Back x Full
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Browsers
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Browsers
O que é navegador?
Software que permite aos usuários acessar e visualizar conteúdo na Web.
Atua como uma ponte entre você e o site, enviando suas solicitações ao servidor e
traduzindo a resposta do servidor em um formato com o qual você pode interagir
facilmente no seu dispositivo.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Browsers
Funções de um navegador
Renderização de página da Web
Navegação
Navegação com guias
Marcadores e histórico
Funcionalidade de pesquisa
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Browsers
Funções de um navegador
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Browsers
Componentes de um navegador
Front-end
Refere-se à parte voltada para o usuário com a qual você interage.
Inclui os elementos da interface gráfica do usuário (GUI), como barra de
endereço, botões de navegação, marcadores e guias.
Cuida da renderização de páginas da web, exibindo o conteúdo, imagens e
elementos interativos na tela do seu dispositivo.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
BrowsersComponentes de um navegador
Back-end
Abrange os processos complexos que ocorrem nos bastidores.
Cuida da comunicação entre o navegador e os servidores web, buscando e
gerenciando recursos de páginas web e processando o código que compõe as
páginas web.
Interpreta arquivos HTML, CSS e JavaScript, garantindo que as páginas da web
sejam renderizadas corretamente.
Gerencia conexões de rede, oferece suporte a vários protocolos como HTTP e
HTTPS e lida com medidas de segurança como criptografia e verificação de
certificados.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Browsers
Componentes de um navegador
Interface do usuário
Espaço onde os usuários interagem com o navegador. Abrange elementos como
marcadores, uma barra de endereço para inserir URLs de sites, botões voltar e
avançar para navegação, guias para multitarefa e menus para acessar vários
recursos e configurações do navegador
Motor (engine) do navegador
Atua como o núcleo do navegador, gerenciando as interações do usuário,
renderizando páginas da web e facilitando a comunicação com outros
componentes.
Coordena o fluxo de informações entre a interface do usuário, o mecanismo de
renderização e outros componentes do navegador. O mecanismo do navegador garante
que as ações do usuário, como clicar em um link ou inserir um URL, sejam processadas
adequadamente e acionem as ações apropriadas no navegador.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Browsers
Componentes de um navegador
Motor (engine) de renderização
Interpretador JavaScript
O mecanismo de renderização é responsável por exibir o conteúdo das páginas da web
no navegador.
O mecanismo de renderização interpreta a estrutura HTML, aplica os estilos CSS para
determinar o layout e a aparência da página e executa qualquer código JavaScript para
adicionar interatividade e elementos dinâmicos à página web.
Componente do navegador que executa o código JavaScript encontrado em páginas da
web.
O interpretador garante que o código JavaScript seja executado corretamente,
permitindo que as páginas da web respondam às ações do usuário, atualizem o
conteúdo dinamicamente e interajam com APIs e outras tecnologias da web.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Browsers
Componentes de um navegador
Rede
Persistência de Dados
Responsável por resolver URLs de sites em endereços IP, enviar solicitações HTTP a
servidores web, estabelecer conexões de rede e receber e processar as respostas.
Desempenha um papel crucial na busca de recursos de páginas da web, como HTML,
CSS, imagens e outros arquivos, de servidores e entregá-los ao mecanismo de
renderização para exibição.
São quaisquer dados armazenados em um meio de armazenamento persistente. Um
meio de armazenamento persistente (ou não volátil) é um meio onde os dados
permanecem intactos após serem gravados, até serem substituídos. Isso inclui
memória flash (SSDs, pen drives), discos rígidos, fita magnética e mídia óptica.
Quaisquer dados que precisem estar disponíveis para uso após a conclusão do
processo do no browser, aplicativo, etc.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Browsers
Componentes de um navegador
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Browsers
Como funciona um navegador? 
O processo começa com a resolução do Sistema de Nomes de Domínio (DNS), onde o
navegador traduz o nome de domínio em um endereço IP para localizar o servidor onde a
página da web está armazenada.
• O navegador então envia uma solicitação HTTP ao servidor, especificando o caminho e os
parâmetros do recurso solicitado.
• Assim que o servidor recebe a solicitação, ele envia uma resposta HTTP ao navegador
contendo o recurso solicitado em código HTML, CSS e JavaScript.
• O mecanismo de renderização do navegador interpreta e renderiza o código para exibir a
página da web no dispositivo do usuário.
• As folhas de estilo CSS são aplicadas para formatar o conteúdo da página web, incluindo
fontes, cores e layout.
• O navegador também pode executar código JavaScript na página da web para adicionar
interatividade e comportamento dinâmico.
À medida que novo conteúdo é carregado ou alterações são feitas na página da web, o 
navegador atualiza a exibição de acordo
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Browsers
Como funciona um navegador? 
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Browsers
Navegadores e o ecossistema da Internet
Privacidade e segurança
Desempenho e velocidade
Espera-se que os navegadores priorizem a privacidade do usuário, implementando
medidas de segurança aprimoradas, proteção de dados mais rigorosa e melhor
controle sobre as informações pessoais.
Melhorar o desempenho e tempos de carregamento mais rápidos, permitindo que os
usuários acessem o conteúdo da web de forma rápida e eficiente.
Integração com dispositivos e plataformas
Os navegadores se concentrarão na integração e compatibilidade perfeitas entre
diferentes dispositivos, sistemas operacionais e plataformas.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Browsers
Mecanismo de renderização
Responsável por renderizar em sua tela uma página web específica solicitada pelo
usuário.
Interpreta documentos HTML e XML junto com imagens estilizadas ou formatadas em
CSS, e um layout final é gerado, que é exibido na interface do usuário.
Cada navegador possui seu próprio mecanismo de renderização exclusivo. 
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Browsers
Mecanismo de renderização
Etapas básicas 
1. A página HTML solicitada é analisada em partes, incluindo os arquivos CSS externos e elementos
de estilo, pelo mecanismo de renderização. Os elementos HTML são então convertidos em nós
DOM para formar uma “árvore de conteúdo” ou “árvore DOM”.
2. Simultaneamente, o navegador também cria uma árvore de renderização. Esta árvore inclui tanto
as informações de estilo quanto as instruções visuais que definem a ordem em que os elementos
serão exibidos. A árvore de renderização garante que o conteúdo seja exibido na ordem desejada.
3. A árvore de renderização passa pelo processo de layout. Quando uma árvore de renderização é
criada, os valores de posição ou tamanho não são atribuídos. Todo o processo de cálculo de valores
para avaliação da posição desejada é denominado processo de layout. Neste processo, cada nó
recebe as coordenadas exatas. Isso garante que cada nó apareça em uma posição precisa na tela.
4. A etapa final é apresentar a tela, onde a árvore de renderização é percorrida e o método paint()
do renderizador é invocado, que pinta cada nó na tela usando a camada backend da UI.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Browsers
Mecanismo de renderização
Etapas básicas 
DOM Document Object Model
Especifica como os navegadores criam um modelo de página HTML e como é
possível acessar objetos via JavaScript.
DOM não pertence a HTML e ao JavaScript, é apenas um conjunto de regras
implementado pelos principais navegadores que abrange duas áreas:
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Browsers
Mecanismo de renderização
Etapas básicas DOM Árvore
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Framework
É uma plataforma que fornece uma base para o desenvolvimento de aplicativos de
software.
Um modelo de programa funcional que pode ser modificado seletivamente adicionando
código.
Usa recursos compartilhados, como: bibliotecas, arquivos de imagem e documentos de
referência e os reúne em um único pacote.
Esse pacote pode ser modificado para atender às necessidades específicas do projeto.
Com um framework, o desenvolvedor pode adicionar ou substituir recursos para dar
novas funcionalidades ao aplicativo.
Podem ser usados ​​para desenvolver sites, aplicativos móveis, ciência de dados, etc.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Framework
Por que usar?
Economiza tempo e reduz o risco de erros.Não precisa escrever tudo do zero.
Já foram testadas.
Outras vantagens
Código mais seguro
Teste e depuração mais simples
Evita código duplicado
Código limpo e facilmente adaptável
Capaz de se concentrar em escrever código específico para o projeto
Pode ser estendido.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Framework
Tipos
Frameworks Web Back-end
Estruturas da Web auxiliam os desenvolvedores na criação de aplicativos da Web e
sites dinâmicos.
Transformaram completamente a forma como o desenvolvimento web é feito,
acelerando todo o processo de desenvolvimento de software ao automatizar tarefas
comuns para desenvolvedores web, como fornecer acesso a banco de dados,
gerenciamento de sessões e modelos de páginas.
Exemplo
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Framework
Tipos
Frameworks Web Front-end
Exemplo
Enquanto as estruturas da web de back-end são carregadas em um servidor, as
estruturas de front-end são executadas no navegador do usuário.
Permitem que os desenvolvedores da web projetem o que os usuários veem no site,
coisas como o gerenciamento de solicitações AJAX, a definição de estruturas de
arquivos e o estilo dos componentes do site.
Fornecem aos desenvolvedores da Web uma base para desenvolver, ao mesmo
tempo que lhes dão controle sobre a aparência do resultado final.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Framework
Tipos
Frameworks Desenvolvimento Mobile
Exemplo
Oferecem aos desenvolvedores uma estrutura que suporta o processo de construção
de aplicativos móveis.
Podem ser divididos em dois tipos diferentes: aplicativos móveis nativos (o que
significa que o aplicativo seria desenvolvido para Apple ou Android) e estruturas de
plataforma cruzada (compatível com qualquer telefone/híbrido).
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Framework
Características De Uma Boa Framework
Simples de entender, consistente e fácil de implementar.
Tem um comportamento padrão que é útil e faz alguma coisa. Não deve conter código
redundante que não execute uma função.
Utiliza todas as melhores práticas do passado, com capacidade de evoluir no futuro.
Permite ao desenvolvedor construir componentes reutilizáveis.
O fluxo de controle é controlado pela estrutura – o que significa que a estrutura
assume o controle da ordem de processamento, não do chamador.
Ele pode ser estendido – adicionando código adicional – para fornecer
funcionalidades diferentes.
Ele contém código de estrutura padrão que não pode ser modificado, apenas
estendido.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Framework
Desafios
Você não pode fazer tudo e qualquer coisa com uma única estrutura; portanto,
algumas podem não ser adequadas para determinados aplicativos.
Não são bons para projetos pequenos porque a configuração da estrutura levará
mais tempo do que a codificação personalizada do projeto.
Curva de aprendizado acentuada. O desenvolvedor deve dedicar algum tempo para
entender como usá-la.
Quaisquer bugs ou problemas de segurança em uma estrutura podem afetar todos
os aplicativos criados nessa estrutura.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Framework
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Framework
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Design Responsivo
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Design Responsivo
Garantir que um site tenha uma aparência e funcione perfeitamente em vários
dispositivos não é mais uma opção, mas uma necessidade, o web design responsivo se
tornou um aspecto crítico na criação de sites.
Um site responsivo se adapta perfeitamente a diferentes tamanhos de tela,
garantindo a experiência ideal do usuário em dispositivos como desktops, notebooks,
tablets e smartphones.
O web design responsivo permite que os sites ajustem automaticamente seu layout,
conteúdo e funcionalidade com base no tamanho da tela do usuário, permitindo uma
experiência de visualização otimizada.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Design Responsivo
Princípios Básicos 
Layout de grade fluido
Em vez de usar grades fixas baseadas em pixels, os designs responsivos usam
unidades relativas como porcentagens ou sem (EM e REM são unidades relativas
baseadas no tamanho da fonte do pai (EM) ou da raiz (REM) do elemento. ).
Imagens flexíveis
No design responsivo, as imagens são dimensionadas usando unidades relativas
para garantir que se adaptem ao espaço disponível na tela sem perder
qualidade ou criar problemas de layout.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Design Responsivo
Princípios Básicos 
Usar unidades responsivas
Medidas usadas em web design que são essenciais para alcançar um web design
responsivo.
Porcentagens (%): O uso de porcentagens permite que os elementos sejam dimensionados
em relação ao contêiner pai.
Largura da viewport (vw) e altura da viewport (vh): essas unidades representam uma
porcentagem da largura ou altura da viewport. Por exemplo, definir a largura de um elemento
como 50vw significa que ele ocupará metade da largura da janela de visualização.
Largura e Altura Mínima e Máxima (largura mínima, largura máxima, altura mínima, altura
máxima): Estas unidades permitem definir tamanhos mínimos e máximos para os elementos.
EM é relativo ao tamanho da fonte do elemento pai, enquanto REM é relativo ao tamanho
da fonte do elemento HTML raiz. O uso dessas unidades para tipografia e
preenchimento/margem permite escalabilidade em diferentes tamanhos de tela.
Comprimentos relativos à janela de visualização (vmin, vmax): essas unidades estão
relacionadas à dimensão menor (vmin) ou maior (vmax) da janela de visualização, ajudando
na criação de designs mais adaptáveis.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Design Responsivo
Práticas
Abordagem Mobile-First
Comece a projetar para dispositivos móveis e aprimore progressivamente o layout para telas
maiores.
Estruturas CSS
Aproveite estruturas CSS como Bootstrap ou Foundation que fornecem grades e componentes
responsivos prontos para uso, economizando tempo de desenvolvimento e garantindo
compatibilidade.
Unidades responsivas
Tipografia escalonável
Usar tamanhos de fonte escalonáveis ​​para manter a legibilidade e a legibilidade em diferentes
dispositivos e tamanhos de tela.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Design Responsivo
Práticas
Consultas de mídia
Criar consultas de mídia direcionadas a diferentes tamanhos de tela.
Meta tag da janela de visualização
Incluir a meta tag da janela de visualização do HTML para instruir o navegador sobre como
dimensionar a página da web para caber na tela.
Imagens flexíveis
Prioridade de conteúdo
Qual conteúdo é mais importante e garanta que ele permaneça visível em telas menores. Pode
ser necessário priorizar o conteúdo e reorganizar os elementos.
Teste
Testar este regularmente o site em vários dispositivos e navegadores para identificar e corrigir
problemas de resposta. Emuladores, simuladores e ferramentas de desenvolvedor de
navegador são úteis para essa finalidade.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Design Responsivo
Práticas
Otimização de desempenh
Certifique-se de que o design responsivo não comprometa o tempo de carregamento da página.
Otimize imagens, minimize solicitações HTTP e use o cache do navegador.
Experiência do usuário
Não se concentrar apenas no layout; considere a experiência geral do usuário.
Navegação fácil de tocar, fontes legíveis e fluxo lógico de conteúdo são essenciais
para usuários móveis.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Design Responsivo
Estruturas CSS
Bootstrap é um framework front-end que fornece estruturas de CSS para a
criação de sites e aplicações responsivas de forma rápida e simples
“Kit de ferramentas de front-end poderoso,
extensível e repleto de recursos. Crie e
personalizecom Sass, utilize sistemas e
componentes de grade pré-construídos e dê
vida aos projetos com poderosos plug-ins
JavaScript.”
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Design Responsivo
Estruturas CSS
Foundation: “A estrutura de front-end responsiva mais avançada 
do mundo.”
“Uma estrutura para qualquer dispositivo,
meio e acessibilidade. Foundation é uma
família de estruturas de front-end responsivas
que facilitam o design de belos sites,
aplicativos e e-mails responsivos que ficam
incríveis em qualquer dispositivo. Foundation é
semântico, legível, flexível e totalmente
personalizável. Estamos constantemente
adicionando novos recursos e trechos de
código , incluindo esses modelos HTML úteis
para ajudar você a começar!”
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
O que é um IDE?
Um ambiente de desenvolvimento integrado (IDE) é uma aplicação de software que
ajuda os programadores a desenvolver código de software de maneira eficiente. Ele
aumenta a produtividade do desenvolvedor, combinando recursos como edição,
compilação, teste e empacotamento de software em uma aplicação fácil de usar. Assim
como escritores usam editores de texto e contadores usam planilhas, desenvolvedores
de software usam IDEs para facilitar o trabalho.
Por que os IDEs são importantes?
Automação da edição do código
Realce de sintaxe
Complementação de código inteligente
Suporte para refatoração
Compilação
Testes
Depuração
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Front-End Roadmap
file:///C:/frontEndRoadMap.pdf
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
HTML Hypertext Markup Language
HTML significa Linguagem de Marcação de Hipertexto .
É uma linguagem de marcação padrão para criação de páginas da web.
Permite a criação e estrutura de seções, parágrafos e links usando elementos HTML,
como tags e atributos.
Usado para:
Desenvolvimento web
Navegação na Internet
Documentação web
O World Wide Web Consortium (W3C) mantém e desenvolve especificações HTML, além
de fornecer atualizações regulares.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
HTML Hypertext Markup Language
Histórico
Nos inicio da Internet, a comunicação entre computadores era principalmente baseada em
texto. No entanto, à medida que mais pessoas começaram a usar a Internet, houve uma
necessidade crescente de uma forma padronizada de estruturar e exibir informações. Os
métodos existentes de apresentação de documentos eram muitas vezes limitados e
careciam de consistência entre os diferentes sistemas.
Quem desenvolveu o HTML?
Tim Berners-Lee, cientista da computação do CERN (Organização Europeia para
Pesquisa Nuclear).
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
HTML Hypertext Markup Language
Histórico
Foi inventado no final dos anos 1980.
Tim Berners-Lee reconheceu a necessidade de um sistema que permitisse aos
pesquisadores compartilhar e acessar facilmente informações. Isto levou ao
desenvolvimento da World Wide Web, que foi inicialmente concebida como uma rede
descentralizada de documentos interligados.
Como parte do projeto World Wide Web, Berners-Lee criou HTML (Hypertext Markup
Language) como uma linguagem de marcação para estruturar e formatar documentos da
web. O HTML proporcionou uma forma de definir os elementos e o layout de uma página
web, permitindo a inclusão de hiperlinks e a organização do conteúdo.
Juntamente com o HTML, Tim Berners-Lee também desenvolveu o primeiro navegador
chamado WorldWideWeb (mais tarde renomeado como Nexus).
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
HTML Hypertext Markup Language
Histórico
Em 1990, Berners-Lee introduziu a primeira versão do HTML, conhecida como HTML 1.0.
Forneceu elementos estruturais básicos e permitiu a inclusão de hiperlinks.
O HTML 2.0 foi lançado em 1995, expandindo a gama de elementos suportados e
introduzindo tabelas para dados tabulares.
O HTML 3.2, lançado em 1997, trouxe melhorias adicionais às tabelas, introduziu
formulários para entrada do usuário e forneceu suporte para folhas de estilo básicas.
HTML 4.01, lançado em 1999, introduziu Cascading Style Sheets (CSS) para melhorar o
controle sobre o estilo da página. Também aprimorou o suporte para scripts e elementos
multimídia.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
HTML Hypertext Markup Language
Histórico
Em 2000, foi introduzido o XHTML (eXtensible Hypertext Markup Language), que visava
combinar o HTML com as regras mais rígidas e a extensibilidade do XML.
HTML5, lançado em 2014, marcou um marco significativo no desenvolvimento web.
Introduziu uma ampla gama de novos elementos e atributos, melhorou o suporte
multimídia e proporcionou melhor compatibilidade com dispositivos móveis. O HTML5
também adotou a marcação semântica e introduziu recursos para design responsivo.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
HTML Hypertext Markup Language
Histórico
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
Histórico
Hypertext Markup LanguageHTML
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
HTML Hypertext Markup Language
Como funciona o HTML
Um site inclui várias páginas HTML diferentes. Por exemplo, uma página inicial, uma
página “sobre” e uma página de contato teriam arquivos HTML separados.
Documentos HTML são arquivos que terminam com extensão .html ou .htm.
Um navegador da web lê o arquivo HTML e renderiza seu conteúdo para que os
usuários da Internet possam visualizá-lo.
Todas as páginas HTML possuem uma série de elementos HTML, consistindo em
um conjunto de tags e atributos.
Os elementos HTML são os blocos de construção de uma página da web.
Uma tag informa ao navegador onde um elemento começa e termina, enquanto
um atributo descreve as características de um elemento.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
HTML Hypertext Markup Language
Como funciona o HTML
As três partes principais de um elemento são:
Tag de abertura – usada para indicar onde um elemento começa a ter efeito.
Por exemplo, use a tag inicial <p> para criar um parágrafo.
Conteúdo – esta é a saída que outros usuários veem.
Tag de fechamento – igual à tag de abertura, mas com uma barra antes do nome
do elemento. Por exemplo, </p> para encerrar um parágrafo.
<p>É assim que você adiciona um parágrafo em HTML.</p>
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
HTML Hypertext Markup Language
Como funciona o HTML
Outra parte crítica de um elemento HTML é seu atributo, que possui duas seções –
um nome e um valor de atributo.
O nome identifica as informações adicionais que um usuário deseja adicionar,
enquanto o valor do atributo fornece especificações adicionais.
<p style="color:purple;font-family:verdana">É assim que você adiciona um parágrafo em
HTML.</p>
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
HTML Hypertext Markup Language
Como funciona o HTML
A classe HTML, é outro elemento importante para desenvolvimento e
programação.
O atributo class adiciona informações de estilo que podem funcionar em diferentes
elementos com o mesmo valor de classe.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
HTML Hypertext Markup Language
Como funciona o HTML
Por exemplo, usaremos o mesmo estilo para um título <h1> e um parágrafo <p>.
O estilo inclui cor de fundo, cor do texto, borda, margem e preenchimento, na classe
.important. Para obter o mesmo estilo entre <h1>e <p>, adicione class="important“
após cada tag inicial:
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
HTML Hypertext Markup Language
Prós e contras do HTML
Prós:
Adequado para iniciantes. HTML tem uma marcação limpa e consistente, bem como
uma curva de aprendizado superficial.
A linguagem é amplamente utilizada, com muitos recursos e uma grande comunidade
por trás dela.
É de código aberto e totalmente gratuito. O HTML é executado nativamente em todos
os navegadores daweb.
HTML é facilmente integrável com linguagens de backend como PHP e Node.js.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
HTML Hypertext Markup Language
Prós e contras do HTML
Contras:
Estático. A linguagem é usada principalmente para sites estáticos . Para
funcionalidade dinâmica, pode ser necessário usar JavaScript ou uma linguagem de
back-end como PHP.
Página HTML separada. Os usuários precisam criar páginas da web individuais para
HTML, mesmo que os elementos sejam iguais.
Compatibilidade do navegador. Alguns navegadores adotam novos recursos
lentamente. Às vezes, navegadores mais antigos nem sempre renderizam tags mais
recentes.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
HTML Hypertext Markup Language
Como HTML, CSS e Javascript estão relacionados
HTML é usado para adicionar elementos de texto e criar a estrutura do conteúdo.
O HTML precisa da ajuda de Cascading Style Sheets (CSS) e JavaScript para criar
a grande maioria do conteúdo do site.
CSS é responsável por estilos como plano de fundo, cores, layouts, espaçamento e
animações.
O JavaScript adiciona funcionalidades dinâmicas, como controles deslizantes, pop-
ups e galerias de fotos.
Prof. Ms. Carlos Silveira/Introdução ao Desenvolvimento Web
https://jesielviana.gitbook.io/guiaweb/aula-1-tecnologias-e-ferramentas-para-desenvolvimento-web
IFMS - DESENVOLVIMENTO WEB: Introdução ao Desenvolvimento webbbbbb
https://www.cloudflare.com/pt-br/learning/network-layer/how-does-the-internet-work/
https://www.google.com/url?sa=i&url=https%3A%2F%2Fjoaorivillini.wordpress.com%2F2012%2F10%2F01%2Fcomo-funciona-a-internet%2F&psig=AOvVaw0k-
gPOnD9Rn8jLjW6htaTm&ust=1718194583678000&source=images&cd=vfe&opi=89978449&ved=0CBIQjRxqFwoTCKj_w6PD04YDFQAAAAAdAAAAABAJ
https://www.w3.org/standards/
https://www.simplilearn.com/full-stack-vs-front-end-vs-back-end-developers-article
https://www.hostgator.com.br/blog/front-end-back-end-e-full-stack/
https://elevatex.de/wp-content/uploads/2022/02/Frontend-vs.-Backend-ENG.png
https://www.tutorialsfreak.com/html-tutorial/html-history
https://www.hostinger.com/tutorials/what-is-html#The-History-of-HTML
FONTES E REFERÊNCIAS
https://www.browserstack.com/guide/what-is-browser
https://bootcamp.uxdesign.cc/a-deep-dive-into-responsive-web-design-principles-6106957a45a1
https://www.linkedin.com/pulse/responsive-web-design-principles-best-practices-cyclobold-tech-avygf/
	Slide 1: Introdução ao Desenvolvimento Web
	Slide 2: Professor
	Slide 3: Agenda
	Slide 4
	Slide 5
	Slide 6
	Slide 7
	Slide 8
	Slide 9
	Slide 10
	Slide 11
	Slide 12
	Slide 13
	Slide 14
	Slide 15
	Slide 16
	Slide 17
	Slide 18
	Slide 19
	Slide 20
	Slide 21
	Slide 22
	Slide 23
	Slide 24
	Slide 25
	Slide 26
	Slide 27
	Slide 28
	Slide 29
	Slide 30
	Slide 31
	Slide 32
	Slide 33
	Slide 34
	Slide 35
	Slide 36
	Slide 37
	Slide 38
	Slide 39
	Slide 40
	Slide 41
	Slide 42
	Slide 43
	Slide 44
	Slide 45
	Slide 46
	Slide 47
	Slide 48
	Slide 49
	Slide 50
	Slide 51
	Slide 52
	Slide 53
	Slide 54
	Slide 55
	Slide 56
	Slide 57
	Slide 58
	Slide 59
	Slide 60
	Slide 61
	Slide 62
	Slide 63
	Slide 64
	Slide 65
	Slide 66
	Slide 67
	Slide 68
	Slide 69
	Slide 70
	Slide 71
	Slide 72
	Slide 73
	Slide 74
	Slide 75
	Slide 76
	Slide 77
	Slide 78
	Slide 79
	Slide 80
	Slide 81
	Slide 82
	Slide 83
	Slide 84
	Slide 85
	Slide 86
	Slide 87
	Slide 88
	Slide 89