MÓDULO 1

Reconhecer o Ambiente Web

MÓDULO 2

Descrever o conceito de interface

MÓDULO 3

Reconhecer as tecnologias do lado cliente

DEFINIÇÃO
MÓDULO 4
O ambiente Web e seu modelo Cliente X Servidor, interfaces com design responsivo
(abordagem mobile first) e adaptativo, tecnologias do lado cliente (HTML, CSS, páginas Reconhecer as tecnologias do lado servidor
estáticas com Javascript) e do lado servidor (páginas dinâmicas com PHP, acesso a banco de
dados).

INTRODUÇÃO
PROPÓSITO O chamado modelo Cliente x Servidor, com origem na Computação, é uma estrutura de
aplicação distribuída, em que temos tarefas partilhadas e executadas entre as duas
camadas:
Compreender a composição do Ambiente Web e seus componentes dos lados cliente e de um lado, a origem das requisições e solicitações de recursos ou
serviços – o lado cliente –
servidor, assim como as tecnologias inerentes a cada componente, é essencial para a e, do outro, processos sendo executados a fim de prover tais
recursos ou serviços – o lado
formação do profissional de desenvolvimento de sistemas na Web. servidor. Atualmente, tal modelo é amplamente utilizado,
sendo base do Ambiente Web e de
suas aplicações, como veremos ao longo deste tema.

OBJETIVOS
 O ponto de partida para entendermos a arquitetura do modelo Cliente x Servidor é tomarmos
como exemplo a rede interna de computadores de uma empresa, em que temos máquinas
exercendo a função de servidores − provendo serviços como armazenamento de arquivos ou
dados, impressão, e-mail etc. − e máquinas exercendo a função de clientes − consumindo
os
recursos fornecidos pelos servidores. Essa arquitetura pode ser vista na Figura 1.

MÓDULO 1

 Reconhecer o Ambiente Web

 Figura 1 –
Arquitetura Cliente x Servidor em uma Rede Interna. Fonte: Paixão, 2020.

AMBIENTE CLIENTE X SERVIDOR

APLICAÇÕES NO MODELO CLIENTE X
SERVIDOR
UM POUCO DE HISTÓRIA O modelo Cliente x Servidor tornou possível o desenvolvimento de aplicações que fizessem
uso de sua arquitetura distribuída. Tais aplicações foram desenvolvidas tendo como base
o
O modelo Cliente x Servidor foi criado pela Xerox PARC nos anos 1970, tendo como
principal conceito de desenvolvimento em camadas. Logo, surgiram os modelos de 2, 3 e 4 (ou N)
premissa a separação entre dados e recursos de processamento, ao contrário do
modelo camadas.
predominante à época – conhecido como modelo centralizado, em que tanto o
armazenamento
dos dados quanto o seu processamento ficavam a cargo dos computadores de
grande porte:
Mainframe.
MODELO DE 2 CAMADAS

Neste modelo, temos as camadas Cliente e Servidor, sendo função da primeira tratar a
lógica
COMO É COMPOSTO O MODELO CLIENTE X do negócio e fazer a interface com o usuário, enquanto a segunda é responsável
por tratar os

SERVIDOR dados – normalmente fazendo uso de Sistemas Gerenciadores de Bancos de

Dados (SGDB).
São exemplos deste modelo as aplicações desktop instaladas em cada
computador cliente que
se comunicam com um servidor na mesma rede.

 Modelo de 3 camadas.

 Modelo de 2 camadas.

MODELO DE 4 CAMADAS

MODELO DE 3 CAMADAS O grande avanço obtido neste modelo foi tirar da máquina cliente a responsabilidade pela
interface com o usuário, passando a centralizá-la em um único ponto, normalmente em um
servidor Web. Com isso, no lugar de aplicações instaladas em cada máquina cliente
passamos
Este modelo foi criado para resolver alguns problemas do modelo anterior, entre eles a
a ter os clientes acessando aplicações hospedadas em servidores Web a partir de
necessidade de reinstalação/atualização da aplicação nos clientes a cada mudança de
regra
navegadores. Neste modelo, a divisão de responsabilidades ficou dessa forma:
ou lógica. Logo, este modelo incluiu uma camada a mais, chamada de aplicação. Com
isso, as
responsabilidades de cada camada ficaram assim divididas:

CAMADA DE APRESENTAÇÃO
Ainda representada pela aplicação instalada na máquina cliente. Era
responsável pela interface
com o usuário e passou a acessar o servidor de
Aplicação, perdendo o acesso direto ao
servidor de dados.

CAMADA DE APLICAÇÃO
Representada por um servidor responsável pela lógica e regras de negócio,
assim como pelo
controle de acesso ao servidor de dados.

CAMADA DE DADOS
Representada por um servidor responsável pelo armazenamento dos dados.

Veja um exemplo do modelo de 3 camadas:

 SERVIDOR

Agora composto por 3 servidores − o de Aplicações, o de Dados e o Web, sendo

este último o
responsável pela apresentação/interface com o usuário cliente.

Veja um exemplo do modelo de 4 camadas:

Por AlexeyYakovenko | Fonte: Shutterstock

 Modelo de 4 camadas.
CLIENTE

Passou a precisar apenas de um navegador para ter acesso à aplicação.

O AMBIENTE WEB
Como vimos, inicialmente as aplicações ficavam hospedadas dentro de uma
rede interna, onde
estavam tanto os clientes quanto os servidores. Posteriormente, elas
migraram para a internet,
surgindo então o Ambiente Web, cuja base é justamente prover
aos clientes, usuários, o
acesso a várias aplicações a partir de diversos dispositivos, como navegadores em desktops e
smartphones ou a partir de aplicações
mobile.

NO CONTEXTO DESTE TEMA É IMPORTANTE

DESTACAR UM
ASPECTO QUANDO TRATAMOS DO AMBIENTE WEB: A
COMUNICAÇÃO.
Até aqui, vimos que este Ambiente é composto pelo:

CLIENTE
Utiliza um navegador ou aplicativo e consome serviços hospedados em um
servidor Web.
SERVIDOR WEB
Cuja estrutura pode comportar tanto as camadas citadas anteriormente numa
única máquina
quanto em diversas máquinas, sendo essa distribuição
indistinguível para o cliente.

Quando falamos de comunicação, estamos falando, mais especificamente, de como trafegam

os
dados entre a requisição enviada por um cliente e a resposta provida por um servidor.

 Figura 2 –
Comunicação no Ambiente Web. Fonte: Paixão, 2020.

No exemplo mostrado na Figura 2, temos de um lado o

cliente que, com um desktop ou
smartphone, faz a requisição de um serviço
− representada pelo arquivo Listar-TV.php −
através da internet a um servidor. O
servidor Web, após processar a requisição, retorna a
informação solicitada,
representada pelo arquivo Listagem-TV.php.

Com base nesse exemplo, podemos entender como funcionam

as aplicações disponíveis no
Por Dmitriy Rybin | Fonte: Shutterstock
Ambiente Web, como websites de notícias, comércio
eletrônico, e-mail, redes sociais etc. Em
cada um desses casos, há de um lado
uma requisição sendo feita pelo cliente e, do outro, o
servidor processando a
requisição e respondendo ao cliente com o que foi solicitado.

COMUNICAÇÃO NO AMBIENTE WEB

A comunicação, neste ambiente, é feita sobre a internet, com o uso dos seus protocolos de
comunicação, sendo o principal protocolo o HTTP (HyperText Transfer Protocol) − que é um
protocolo para transferência de hipertexto. Na Figura 2, podemos ver um exemplo de
comunicação no Ambiente Web.

 EXEMPLO

Para conhecer o fluxo do usuário

requisitante, assista ao vídeo a seguir.
 (neste
caso, o dispositivo utilizado por um usuário para fazer uma requisição) e no lado
servidor. Nos próximos tópicos trataremos de ambas mais a fundo.

SOLICITAÇÃO E RESPOSTA

O processo de comunicação no Ambiente Web é conhecido como Solicitação (Request) e Por Blackboard | Fonte: Shutterstock
Resposta (Response). Normalmente, a solicitação é iniciada pelo cliente, mas é possível que
também o servidor
a inicie, como em serviços PUSH – serviços que disparam
notificações/mensagens para os
clientes que fizeram opção por recebê-las.
VERIFICANDO O APRENDIZADO

1. EM RELAÇÃO À RESPONSABILIDADE DE REALIZAR AS REQUISIÇÕES

NO MODELO CLIENTE X SERVIDOR, ASSINALE A ALTERNATIVA
CORRETA:

A) Uma das principais vantagens deste modelo é permitir a separação de responsabilidades.

Com isso, caberá sempre e unicamente ao cliente realizar as requisições de serviços e/ou
recursos, tendo o lado servidor um caráter sempre passivo.
 Processo de Solicitação (Request) e Resposta (Response).
B) Embora inicialmente limitado a redes internas, com o surgimento da internet o modelo
Cliente x Servidor evoluiu, tornando-se um modelo híbrido e bastante flexível, separado em N
camadas, onde tanto o cliente quanto o servidor podem exercer as mesmas funções, ou seja,

CLIENT SIDE X SERVER SIDE ambos podem requisitar e responder a solicitações.

C) Para diminuir o custo de processamento no lado servidor, um cliente poderá solicitar a

Essas duas expressões são muito comuns quando falamos de aplicações rodando no outros clientes recursos ou serviços já utilizados por eles. Isso é possível graças ao suporte
Ambiente
Web. Ambas se referem a tecnologias, códigos, disponibilizados no lado cliente fornecido por este modelo à comunicação Cliente x Cliente.
D) Neste modelo, o lado cliente é, normalmente, o responsável por iniciar a comunicação

através da realização de requisições ao lado servidor. Entretanto, o lado servidor também é

Conforme visto na seção Solicitação e Resposta, normalmente é o cliente que inicia a
capaz de iniciar a comunicação, disparando notificações ou enviando mensagens para o lado
comunicação no modelo Cliente x Servidor. Entretanto, o lado servidor também é capaz de
cliente, por exemplo.
realizar esta tarefa.

2. Nós vimos que o modelo Cliente x Servidor é a base do Ambiente Web. Assinale a
opção correta que descreve o Ambiente Web:
2. NÓS VIMOS QUE O MODELO CLIENTE X SERVIDOR É A BASE DO
AMBIENTE WEB. ASSINALE A OPÇÃO CORRETA QUE DESCREVE O A alternativa "A " está correta.

AMBIENTE WEB:

Conforme visto na seção O Ambiente Web, o ambiente web tem como base o modelo Cliente
A) O Ambiente Web é composto por diversos clientes e diversos servidores. Neste cenário, os
x Servidor e a evolução de seu Modelo de Camadas. Faz uso, portanto, de um modelo de N
clientes utilizam a internet e fazem requisições a diferentes servidores, localizados em
camadas, onde a lógica da aplicação e os dados são distribuídos em um ou mais servidores e
diferentes partes do mundo. Os servidores então processam a requisição e devolvem a
a interface para acesso a estes servidores fica a cargo do cliente.
informação requisitada ou executam o serviço solicitado pelo cliente.

B) No Ambiente Web, diferente do que acontecia nos primeiros Modelos de Camadas, há um

modelo centralizado. Logo, todas as requisições são feitas a um único servidor, que as distribui
para outros servidores e depois envia as respostas para os clientes.
MÓDULO 2
C) O avanço da tecnologia e o suporte oferecido pela internet permitiram uma importante
mudança no Ambiente Web em relação aos modelos tradicionais de camadas. Com isso, neste
 Compreender o conceito de
interface
Ambiente, o lado cliente tem as principais responsabilidades, incluindo manter no navegador ou
em aplicativos mobile toda a lógica do negócio, facilitando assim o trabalho de processamento
pelo lado servidor e agilizando a comunicação.

D) O Ambiente Web é caracterizado, sobretudo, pela transparência, diferentemente do que era A INTERFACE DO LADO CLIENTE
visto inicialmente no modelo Cliente x Servidor. Com isso, um cliente sempre terá controle total
sobre o processo de comunicação por trás da requisição. Ele terá ciência, por exemplo, de O conceito de interface está ligado à área de Interação Humano-Computador (IHC), que pode
onde se encontra o servidor ou servidores encarregados de receber e processar a sua ser resumida como o estudo da interação entre pessoas e computadores. Nesse contexto, a
requisição. Isso permite, por exemplo, que ele cancele a requisição a qualquer momento, caso interface, muitas vezes chamada de interface do utilizador, é quem provê a interação
entre o
o servidor encarregado de processá-la fique muito distante de onde ele se encontra. ser humano e o computador. No início da utilização dos computadores, tal
interação era
realizada através de linha de comando e, posteriormente, também através de
interfaces
gráficas (Graphical User Interface (GUI). ) . Segundo Morais (2014), no início, a interação foi,
GABARITO de certa forma, primária, deixando um
pouco de lado o ser humano, por não existir um estudo
aprofundado desses aspectos.
1. Em relação à responsabilidade de realizar as requisições no modelo Cliente x
Servidor, assinale a alternativa correta:

A alternativa "D " está correta.

 Como Silva (2014) explica, a evolução tecnológica levou a uma crescente utilização de
dispositivos móveis que possuem os mais variados tamanhos de tela e
funcionalidades. O
site StatCounter Global Stats mantém ativa uma série de dados e estatísticas sobre
dispositivos, tamanhos de tela, além de outras informações relacionadas. Sobre o tamanho
de
telas, e considerando o período de abril de 2019 a abril de 2020, temos os seguintes
dados:

VARIADOS TAMANHOS DE TELA E

FUNCIONALIDADES

Sobre essa variedade nas características dos dispositivos utilizados como interface para

o acesso a aplicações no Ambiente Web, é necessário garantir a usabilidade, ou seja,

Por spainter_vfx | Fonte: Shutterstock
que
sejam desenvolvidos sistemas fáceis de usar e de aprender, além de flexíveis. Em
Dessa forma, o foco do estudo da interface envolvia principalmente o hardware
e o software, e complemento a esse conceito, e partindo do ponto de vista da usabilidade, a mesma deve
o ser humano simplesmente tinha que se adaptar ao sistema
criado. estar alinhada ao conceito de Design Responsivo, o qual deverá permitir que as páginas
Web, e consequentemente as aplicações Web, respondam a qualquer dispositivo sem
perda de
informações por parte do usuário.

Tamanho da Tela em Pixels (Largura x Altura) Percentual de Utilização

360 x 640 10,11%

1366 x 768 9,69%

1920 x 1080 8,4%

375 x 667 4,24%

Por Casezy idea | Fonte: Shutterstock

Posteriormente, com o avanço da tecnologia e do acesso a computadores, e mais

414 x 896 3,62%
recentemente a outros dispositivos, sobretudo os smartphones, a necessidade
de melhorar a
interação tem crescido continuamente.
 1536 x 864 3,57% AUTOMATICAMENTE, RESPONDER ÀS
PREFERÊNCIAS DO
USUÁRIO E, COM ISSO, EVITAR QUE SEJA NECESSÁRIO
 Tabela 1 –
Estatísticas mundiais sobre resolução de telas de dispositivos. Fonte:
CONSTRUIR DIFERENTES
VERSÕES DE UMA MESMA
Elaboração do
autor, com base em dados de Global Stats, 2020.
PÁGINA/APLICAÇÃO PARA DIFERENTES TIPOS E TAMANHOS

Atenção! Para visualização completa da tabela utilize a rolagem horizontal DE
DISPOSITIVOS.
Quando consideramos essas mesmas estatísticas, mas levando em conta especificamente os
dados de navegação do Brasil, temos um cenário diferente, conforme pode ser visto na
Figura
3.
A ORIGEM DO DESIGN RESPONSIVO

O conceito de design responsivo teve sua origem no Projeto Arquitetônico Responsivo. Tal
projeto prega que uma sala ou um espaço deve se ajustar automaticamente ao número e fluxo
de pessoas dentro dele. Para tanto, é utilizada uma combinação de robótica e tecnologia,
como: sensores de movimento; sistemas de controle climático com ajuste de temperatura e
iluminação; juntamente com materiais – estruturas que dobram, flexionam e expandem.

Da mesma forma que no Projeto Arquitetônico Responsivo, arquitetos não refazem uma sala
ou um espaço de acordo com o número, fluxo e as características de seus ocupantes, no
Ambiente
Web não devemos ter que precisar construir uma versão de uma mesma página de
acordo com
as características dos seus visitantes. Isso traria ainda outros custos, como
identificar uma enorme combinação de tamanhos de tela e tecnologia, entre outros
fatores,
para criar uma mesma quantidade de páginas correspondentes.

Fonte: Global Stats, 2020.

 Figura 3 –
Estatísticas sobre resoluções de telas de dispositivos - Brasil.

DESIGN RESPONSIVO
Segundo Knight (2011), o design responsivo é a abordagem que sugere que
o design e o
desenvolvimento devam responder ao comportamento e ao ambiente do usuário
com base no

tamanho da tela, plataforma e orientação do dispositivo por ele utilizado.

Por REDPIXEL.PL | Fonte: Shutterstock
ESSA DEFINIÇÃO, NA PRÁTICA, IMPLICA QUE A
PÁGINA
WEB/APLICAÇÃO ACESSADA DEVE SER CAPAZ DE,
DESIGN RESPONSIVO NA PRÁTICA
Na prática, ao aplicarmos o conceito de design responsivo, fazemos uso de uma combinação
de técnicas, como layouts fluidos, media query e scripts. A seguir veremos cada uma
dessas
técnicas em detalhes.

LAYOUTS FLUIDOS

Para entender o conceito de layout fluido, é necessário entender primeiro o que seria o
seu LAYOUT FLUIDO
oposto, ou seja, o layout fixo. Já os layouts fluidos fazem uso de unidades
flexíveis – no lugar de definir as dimensões com o
uso de
quantidades fixas são utilizados valores flexíveis. Isso permite,
por exemplo, que no
lugar de definir que o cabeçalho de uma página
tenha 1366 pixels de largura, possamos definir
que ele ocupe 90% do
tamanho da tela do dispositivo que o visualiza. Daí o conceito de
fluido,
ou seja, de adaptabilidade ao campo de visão conforme
dimensões do dispositivo que visualiza
a página.

PIXEL

autor/shutterstock Um pixel é o menor ponto que forma uma imagem digital, sendo que um conjunto de
pixels com várias cores formam a imagem inteira.
LAYOUT FIXO

As dimensões (largura e altura) dos elementos de

uma página Web são definidos com a
utilização de unidades de medidas
fixas, como os ‘pixels’. Com isso, tais elementos não se Além dos valores percentuais, há outras unidades de medidas flexíveis, como, por exemplo:

adaptam às
alterações no tamanho do campo de visão dos dispositivos que os
visualiza. EM


Unidade de medida tipográfica, estando relacionada à letra “M”. O tamanho
base dessa
unidade equivale à largura da letra “M” em maiúscula.

REM
Enquanto o EM está relacionado ao tamanho do elemento de contexto (ou seja,
definimos o
valor EM de um elemento tomando como base o seu elemento pai),
no REM definimos que o
elemento de contexto, o elemento pai, será sempre a tag HTML <body>. Daí a letra “R” nessa DISPOSITIVOS DIVERSOS. COM O SEU USO PODEMOS, POR
unidade, que faz referência à raiz (root). EXEMPLO, DEFINIR
QUE DETERMINADO ESTILO DE UM OU
MAIS ELEMENTOS SEJA APLICADO APENAS A DISPOSITIVOS
CUJA LARGURA MÁXIMA DE TELA SEJA IGUAL OU MENOR

SAIBA MAIS QUE 600PX.
A Figura 4 mostra um fragmento de código onde uma Media Query é
utilizada para impedir
Além das unidades, fixas e flexíveis já mencionadas, há
ainda outras disponíveis. A listagem
que um menu lateral (o elemento HTML cuja classe equivale a
“menu_lateral”) seja exibido
completa pode ser acessada através do site
do W3C – CSS Units.
caso a largura da tela do dispositivo seja menor que 360
pixels.

MEDIA QUERY

A função de apresentação, de estruturar o layout de uma página, no Ambiente Web, cabe às

Folhas de Estilo (CSS). Trataremos mais a fundo do CSS no próximo tópico. Por ora, para
definir o que é Media Query, falaremos um pouco também sobre CSS.
 Figura 4 –
Exemplo de Declaração de Media Query. Fonte: Paixão, 2020.
Com base na afirmação de que cabe ao CSS estruturar o layout de uma página Web, temos
O resultado das expressões utilizadas na Media Query pode ser verdadeiro ou falso. No
caso
normalmente associada a uma página Web uma ou mais Folhas de Estilo – que são códigos
acima, será verdadeiro sempre que a largura da tela do dispositivo que visualiza a
página seja
que definem aspectos de toda a página, como as dimensões dos elementos, cores de fundo,
inferior a 360 pixels. Do contrário, será falso. Ou seja, para todos os
dispositivos cuja largura
as cores e os tipos de fonte etc.
de tela seja superior a 360px, o código CSS em questão será
ignorado.

 ATENÇÃO

Outras expressões podem ser utilizadas, além da

demonstrada acima, como a definição do tipo
de mídia (Media Type – ou seja, um
estilo que se aplica apenas a um ou mais tipos de
documento, como a versão para
impressão de uma página web, por exemplo) e a combinação
entre escalas de
valores.

Por NicoElNino | Fonte: Shutterstock

SCRIPTS
NESSE CONTEXTO, MEDIA QUERY É A UTILIZAÇÃO
DE MEDIA
TYPES (TIPOS DE MÍDIA) A PARTIR DE UMA OU MAIS Quando falamos em Scripts no lado cliente, no Ambiente Web, estamos falando de linguagens
EXPRESSÕES PARA DEFINIR
FORMATAÇÕES PARA de programação que rodam no navegador e cujo exemplo mais comum é o Javascript.
Esta linguagem adiciona interação a uma página Web, permitindo, por exemplo, a
atualização Medias Queries são utilizadas, em conjunto com scripts, para criar um layout
fluido que se
dinâmica de conteúdos, o controle de multimídia, a animação de imagens e
muito mais. No adapte – através, sobretudo, da adequação das dimensões de
seus elementos – ao tamanho
contexto do design responsivo, sua faceta mais importante é a de
atualização dinâmica de da tela do dispositivo utilizado pelo visitante.
conteúdo – e não só do conteúdo, mas também da apresentação do
mesmo.

DESIGN ADAPTATIVO
Um site é planejado e construído com a definição de seis layouts
predefinidos, onde são
previstos pontos de quebra para que a página se
adapte às seis diferentes dimensões

utilizadas.
Por fatmawati achmad zaenuri | Fonte: Shutterstock

DESIGN RESPONSIVO X DESIGN

ADAPTATIVO
O conceito de design adaptativo, muitas vezes, confunde-se com o de design responsivo.
Enquanto o segundo, como já visto anteriormente, consiste na utilização de uma
combinação
de técnicas para ajustar um site automaticamente em função do tamanho da tela
dos
dispositivos utilizados pelos usuários, no design adaptativo são usados layouts
estáticos
baseados em pontos de quebra (ou de interrupção), onde, após o tamanho de tela
ser
detectado, é carregado um layout apropriado para ele. Em linhas gerais, no design
adaptativo,
são criados layouts com base em seis tamanhos de tela mais comuns. A aplicação desses dois  RESUMINDO
conceitos na prática acontece da seguinte forma:

Poderíamos ainda dizer que o Design Responsivo é mais

complexo, porém mais flexível. Já o
DESIGN RESPONSIVO
Adaptativo, mais trabalhoso, embora menos
flexível.


Por DisobeyArt | Fonte: Shutterstock

Uma das abordagens de design responsivo mais utilizadas atualmente é a mobile

first. Tal
abordagem está centrada no crescente uso de dispositivos móveis na
navegação no Ambiente
Web e defende que em primeiro lugar seja pensado o design para
telas menores e,
Assista ao vídeo e entenda mais sobre a
diferença entre design responsivo e design
posteriormente, para telas maiores. Trata-se de um enfoque progressivo
(progressive
adaptativo.
enhancement), no qual parte-se dos recursos e tamanhos de tela
disponíveis nos dispositivos
menores, progredindo com a adição de recursos e conteúdo
tendo em vista as telas e os
dispositivos maiores.

A partir da definição de mobile first podemos identificar o seu contraponto com

o
desenvolvimento Web tradicional, em que temos o conceito de degradação graciosa
(graceful
degradation):

AS PÁGINAS WEB SÃO PROJETADAS TENDO EM

VISTA
DISPOSITIVOS DESKTOP E TELAS MAIORES E,
Como dito, no design responsivo é preciso criar uma série de combinações de Media Query POSTERIORMENTE, ADAPTADAS PARA
DISPOSITIVOS
para que o layout se adapte aos mais variados tamanhos de tela. Já no adaptativo,
MÓVEIS E TELAS MENORES.
imaginemos a situação onde foram definidos os seguintes layouts e quebras: 360px, 720px,
A aplicação prática do mobile first consiste em planejar o desenvolvimento de um
site
900px, 1080px, 1440px e 1800px. Caso a largura da tela do dispositivo seja superior a
360px e
priorizando os recursos e as características presentes nos dispositivos móveis, como o
inferior a 720px – por exemplo, 700px −, será carregado o layout de 360px, que
equivale,
tamanho de tela, a largura de banda disponível e até mesmo recursos específicos, como os
de
praticamente, à sua metade. É possível imaginar que, neste caso, o resultado
não seja
localização, por exemplo.
visualmente muito agradável ou otimizado.

MOBILE FIRST VERIFICANDO O APRENDIZADO

 O objetivo da interface vai além de aspectos como definir o que é ‘mais ou menos bonito’. Seu
1. ASSINALE A ALTERNATIVA QUE NÃO CORRESPONDE AO CONCEITO
cerne está em garantir que, sobretudo, haja uma comunicação mais natural e intuitiva entre
DE INTERFACE:
usuário e sistema computacional.

A) A interface tem como objetivo proporcionar uma comunicação mais natural entre usuário e 2. Em relação ao design responsivo, assinale qual opção corresponde à melhor ação a

sistema computacional. ser tomada para sua aplicação:

B) Interface é o meio pelo qual interagimos com um software, com uma aplicação, permitindo o A alternativa "A " está correta.

acesso às opções e informações disponíveis.

C) É o nome dado à parte de um sistema com a qual o usuário mantém contato ao usá-lo. Como visto anteriormente, para aplicar o Design Responsivo devemos fazer uso de uma

D) A interface é a disciplina responsável pelo layout no desenvolvimento de software. Um dos combinação de técnicas a fim de garantir que uma página corresponda às preferências e

seus princípios é garantir a criação de telas mais bonitas, que chamem a atenção de quem características dos seus usuários com base no tamanho da tela, plataforma e orientação dos

utiliza um software ou aplicativo. dispositivos por eles utilizados.

2. EM RELAÇÃO AO DESIGN RESPONSIVO, ASSINALE QUAL OPÇÃO

CORRESPONDE À MELHOR AÇÃO A SER TOMADA PARA SUA
MÓDULO 3
APLICAÇÃO:
 Reconhecer as tecnologias do
lado cliente
A) Estudar os dados provenientes das visitas ou, na ausência destes, os relacionados às
pesquisas de comportamento de acesso a websites para planejar a construção ou
remodelação de um site a fim de garantir que ele se adapte às características dos dispositivos
que o acessa. AS TECNOLOGIAS DO LADO CLIENTE:
B) Construir um site a partir de seis ou mais layouts fixos predefinidos.
HTML5, CSS E JAVASCRIPT
C) Escolher uma das três técnicas possíveis, preferencialmente o Javascript, uma vez que sua
implementação é mais simples, além de ser mais completo que as demais técnicas.

D) Aplicar simultaneamente as técnicas de Design Responsivo e Adaptativo.

HTML

GABARITO A HTML (Hypertext Markup Language − Linguagem de Marcação de Hipertexto.)

é
considerada a tecnologia fundamental da Web, pois sua função é definir a estrutura de
uma
1. Assinale a alternativa que não corresponde ao conceito de interface:
página Web. Essa linguagem de marcação, criada por Tim Berners-Lee na década de
1990,
A alternativa "D " está correta.
inicialmente objetivava permitir a disseminação de pesquisas entre Lee e seus
colegas

pesquisadores, mas foi rapidamente difundida até formar a rede que,

posteriormente, veio a se
tornar a World Wide Web como a conhecemos atualmente.
  Figura 5:
Estrutura obrigatória de uma página Web. Fonte:
Paixão, 2020.

DE CONTEÚDO

Como nome sugere, têm o papel de marcar o conteúdo pelo seu tipo.
Por Lars Poyansky | Fonte: Shutterstock
SEMÂNTICO
Em linhas gerais, a HTML é uma linguagem de marcação simples, composta por elementos,
Relacionado ao tipo de conteúdo e à criação de seções para agrupá-lo de
acordo com sua
chamados tags, que são relacionados a textos e
outros conteúdos a fim de lhes dar
função no documento. Para melhor entender esse conceito, veja
a Figura 6.
significado. Por exemplo: Podemos marcar um texto
como sendo um parágrafo, uma lista ou
uma tabela. É possível, ainda, inserir vídeos e
imagens. Além disso, também utilizamos essa
marcação para definir a estrutura de um
documento de forma lógica: menu de navegação,
cabeçalho, rodapé etc. As tags podem ser agrupadas em tipos:

AS TAGS HTML

Como já mencionado, na HTML a tag é usada para definir um elemento. O exemplo a

seguir
mostra a tag utilizada para a marcação de um parágrafo de texto:

<p>Este texto está contigo em uma tag de

parágrafo</p>

A anatomia de uma tag é composta pela tag de abertura, pela tag de fechamento e pelo
conteúdo – no exemplo anterior, o texto. Com essa combinação temos, ainda, a definição  Figura 6:
Tags estruturais básicas de uma página Web.
Fonte: Paixão, 2020.

de elemento na HTML. ESTRUTURAIS

Juntamente com o elemento de definição do DocType, como pode ser visto na
Figura 5,
ESTRUTURAIS compõem a estrutura obrigatória de uma página web.

Juntamente com o elemento de definição do DocType, como pode ser visto na

Figura 5,
compõem a estrutura obrigatória de uma página web.
 Figura 5:
Estrutura obrigatória de uma página Web. Fonte:
Paixão, 2020.

DE CONTEÚDO
Como nome sugere, têm o papel de marcar o conteúdo pelo seu tipo.

SEMÂNTICO
Relacionado ao tipo de conteúdo e à criação de seções para agrupá-lo de
acordo com sua
função no documento. Para melhor entender esse conceito, veja
a Figura 6.
Conheça, agora, as diferenças entre uma
estrutura em HTML e em folhas de estilo neste vídeo.

Como visto na Figura 6, as tags <header>, <nav>, <main> e

<footer> desempenham papel
semântico, uma vez que estruturam a página em seções.
Como seus nomes indicam, elas
separam o conteúdo em partes lógicas que formam o
esqueleto da maioria das páginas HTML,
ou seja: Cabeçalho, menu de navegação, conteúdo
principal e rodapé. Logo, tags de
parágrafo, imagem, entre outras, são inseridas dentro
de cada uma dessas seções, formando
 Figura 6:
Tags estruturais básicas de uma página Web.
Fonte: Paixão, 2020.
assim um documento HTML completo.


SAIBA MAIS
HTML 5
Uma listagem completa de tags e atributos (usados para
adicionar características a uma tag)
pode ser encontrada no site do W3C.
A versão mais recente da HTML é a 5, que trouxe algumas importantes evoluções em relação
às anteriores. Entre tais novidades destacam-se:

Por 32 pixels | Fonte: Shutterstock

Possibilidade de armazenamento de dados no lado
cliente.
Por ODSERG | Fonte: Shutterstock

Novos atributos e elementos, com foco sobretudo na

semântica.

Por Digital Bazaar | Fonte: Shutterstock

Otimização nas operações off-line.
Por howcolour | Fonte: Shutterstock

Melhorias de conectividade.

Por Melody Smart | Fonte: Shutterstock
Por Palau | Fonte: Shutterstock

Suporte estendido a multimídia – áudio e vídeo.

SINTAXE

CSS A sintaxe da CSS consiste em uma declaração onde são definidos o(s) elemento(s) e o(s)
estilo(s) que desejamos aplicar a ele(s) ou, em outras palavras:

O CSS (Sigla de Cascading Style Sheets. Em português, folhas de estilos em cascata.)

corresponde à segunda camada no tripé de tecnologias que formam o lado cliente, no O SELETOR
Ambiente Web. Trata-se de uma linguagem declarativa cuja função é controlar a
apresentação
Um elemento HTML (body, div, p etc.) ou o seu identificador (atributo id) ou classe
(atributo
visual de páginas Web. Com isso, têm-se a separação de funções em relação à
HTML:
class).
UMA CUIDA DO CONTEÚDO, DA ESTRUTURAÇÃO; A
OUTRA
CUIDA DA APRESENTAÇÃO, DO LAYOUT.
A PROPRIEDADE
Característica do elemento (cor, fonte, posição etc.).

O VALOR
Novo parâmetro a ser aplicado à característica do elemento.

 EXEMPLO
Para alterar a cor da fonte de um texto inserido em um
parágrafo, poderíamos utilizar uma das
variações apresentadas na Figura 7: SELETORES CSS

A CSS permite uma série de combinações para a aplicação de estilos. Pode-se usar
aplicações
simples, como as vistas até aqui, nas quais apenas um elemento foi
selecionado, ou
combinações mais complexas, em que vários elementos podem ser agrupados
a fim de
receberem um mesmo estilo.

 Figura 7 –
Exemplo de aplicação de CSS. Fonte: Paixão, 2020.

No exemplo anterior, vimos duas formas para definir o estilo de uma tag de parágrafo. No
primeiro, o elemento ao qual o estilo foi aplicado foi definido com a utilização de seu
atributo ID. BOAS PRÁTICAS RELACIONADAS À CSS
A respeito dos seletores, propriedades existentes e mais detalhes sobre a
CSS é recomendado
ler o Guia de Referência do próprio W3C. É boa prática e fortemente recomendado utilizar a forma Externa para incluir CSS em uma
página Web. Entre outras vantagens, como uma melhor organização do código, separando o
HTML do Estilo, devemos ter em mente que um mesmo arquivo CSS pode ser usado em várias
páginas de um site.
COMO INSERIR O CSS NA PÁGINA WEB

Há quatro formas de inserir o CSS em um documento: Inline, Interno, Externo e Escopo.

INLINE
Os estilos, neste caso, são aplicados com a utilização do atributo “style”
seguido de uma ou
mais propriedades/valores.

INTERNO
Os estilos são definidos com a utilização da tag
<style>, dentro da tag <head> no documento.

EXTERNO
Essa é a forma preferencial de inserir estilos. Nela, é utilizado
um arquivo externo, com
extensão “.css”, contendo apenas estilos. Para
vincular esse arquivo externo ao documento é
utilizada a tag
<link> dentro da tag <head>.

Por ZinetroN | Fonte: Shutterstock

ESCOPO
Esta forma foi introduzida pela HTML5. Com ela, um estilo pode ser definido
em nível de
escopo, ou seja, declarado em seções
específicas do documento. Sua declaração é feita da
mesma forma que na Inline. Entretanto, no lugar de ser declarada no
<head>, é declarada  EXEMPLO
dentro da tag à qual se quer aplicar os
estilos.
Vamos imaginar a situação oposta: Temos
um site onde o layout (topo, rodapé e menu, por
exemplo) é comum em todas as
suas páginas – arquivos .html independentes. Ao usarmos as O Javascript completa o tripé de tecnologias
Web que rodam no lado cliente. Trata-se de uma

formas Inline e
Interna, precisaríamos replicar um mesmo código em todas as páginas. Imagine linguagem de programação que, assim como
o CSS, é interpretada pelo Navegador. Entre

agora ter que fazer alguma alteração ou inclusão, tal operação precisaria ser
repetida inúmeras suas principais características, destaca-se
o fato de ser multiparadigma (orientação a objetos,
protótipos, funcional etc.).
vezes. Em contrapartida, se usarmos um arquivo externo e o
linkarmos em todas as páginas,
precisaremos trabalhar apenas em um único código,
tornando-o muito mais fácil de ser mantido
e ainda diminuindo consideravelmente
nosso trabalho.

Outra boa prática, tendo em vista o desempenho do carregamento

da página Web é
compactar o arquivo – normalmente chamamos
este processo de minificação. Existem JAVASCRIPT
softwares e até mesmo sites que
fazem esse trabalho, que consiste em, resumidamente,
diminuir os espaços e as linhas no
arquivo .css, reduzindo assim o seu tamanho final. Costuma-se abreviar o seu nome como “JS”, que é também a extensão de seus arquivos
−
quando vinculados externamente ao documento HTML.

OUTRAS CONSIDERAÇÕES SOBRE A CSS

Uma nova funcionalidade tem ganhado bastante espaço ultimamente no que diz respeito à
CSS: os pré-processadores, como Sass, Less, Stylus
etc.

PRÉ-PROCESSADORES

Em linhas gerais, um pré-processador é um programa que permite gerar CSS a partir de

Por Paolo De Gasperis | Fonte: Shutterstock
uma
sintaxe − própria de cada pré-processador −, que inclui inúmeras facilidades não
Sua função é, sobretudo, fornecer interatividade a páginas Web, e foi criada com o
intuito de
suportadas naturalmente pelo CSS, como variáveis, funções, regras aninhadas, entre
diminuir a necessidade de requisições ao lado Servidor, permitindo a
comunicação assíncrona
outras.
e a alteração de conteúdo sem que seja necessário recarregar uma
página inteira.
O fluxo de gerar CSS através de um pré-processador consiste na escrita do código
contendo
as regras a serem aplicadas, fazendo uso da sintaxe de cada pré-processador.
Ao final,
esse código será compilado, gerando então o código CSS normal.

SINTAXE

O Javascript é, ao mesmo, amigável, mas também completo e poderoso. Embora criado para
ser leve, uma vez que é interpretado nativamente pelos navegadores, trata-se de uma
JAVASCRIPT
linguagem de programação completa e, como já mencionado, multiparadigma. Logo, seus
O JSON (JavaScript Object Notation) é um formato para
troca de dados no Ambiente Web.
códigos podem ser tanto estruturados quanto orientados a objetos. Além disso, permitem
que
Logo, é importante fazer menção a ele quando falamos das
tecnologias do lado cliente, uma
bibliotecas, como Jquery, Prototype
etc. sejam criadas a partir de seu core, estendendo assim
vez que tal formato está entre os mais utilizados no
intercâmbio de dados com o lado servidor e
a sua funcionalidade. Vejamos algumas características dessa linguagem:
entre diferentes sistemas, independentemente da
linguagem utilizada nos mesmos. Embora
relacionado ao Javascript, como o próprio nome
diz, não é um formato exclusivo dessa
linguagem e pode ser usado mesmo em sistemas onde
esta não esteja presente.

JQUERY

Jquery é uma biblioteca Javascript rápida, pequena e rica em recursos que simplifica
processos como a manipulação de documentos HTML, eventos, animação, além do
AJAX
(JQuery).

PROTOTYPE

Prototype é Framework Javascript de código aberto, modular e orientado a objetos que

provê extensões ao ambiente de script do navegador, fornecendo APIs para manipulação Por IYIKON | Fonte: Shutterstock
do
DOM e AJAX (PrototypeJs).

EVENTOS E MANIPULAÇÃO DOM

COMO INSERIR O JAVASCRIPT NA PÁGINA WEB
Essa linguagem oferece amplo suporte à manipulação de eventos relacionados a
elementos
HTML. É possível, por exemplo, utilizar um elemento <button>
(botão) que, ao ser clicado, A inserção do Javascript em uma página HTML é feita de forma bastante
similar à da CSS.
exiba uma mensagem na tela. Ou, ainda, aumentar
o tamanho de uma fonte ou diminuí-lo. Dessa forma, é possível tanto inserir um código
Javascript diretamente no documento − dentro
da tag <script>, seja no <head>
ou em qualquer outra parte − como através de arquivos
MENSAGENS E ENTRADA DE DADOS
externos com a extensão
“.js”, devendo estes serem linkados na tag <head>. Vejamos alguns
O Javascript possui suporte a funções nativas para a exibição de caixas de
diálogo para
exemplos das
formas de inclusão do Javascript:
entrada de dados ou exibição de mensagens, como alertas, por
exemplo.

 EXEMPLO
JSON
 Figura 8 – Como
inserir Javascript em páginas Web. Fonte: Paixão,
2020.
Assim como foi dito em relação à CSS, deve-se dar preferência à
utilização de arquivos
A primeira parte da Figura 8 mostra o fragmento de uma
página HTML onde há um botão e um externos para a incorporação de Javascript.
evento – onclick – que, ao ser
disparado (no click do botão), chama a função
Outra boa prática consiste em incorporar arquivos externos de
Javascript ao final da página,
“funcaoJavascript”,
declarada no corpo do HTML, logo após a tag <button>. Tal
função exibe
após o fechamento da tag
<body>. Com isso, temos ganho de desempenho, uma vez que o
um alerta na tela. A segunda parte da Figura
mostra a declaração do Javascript dentro da tag
carregamento da página HTML é feito de cima para baixo.
Logo, quanto mais código, CSS ou
<head>. Este código faz uso de um evento, o de carregamento da janela
do navegador, para
Javascript, existir no topo da
página, dentro da tag <head>, mais demorado será o
exibir uma alerta de boas-vindas. Por fim, na última
parte da Figura vemos a declaração para a
carregamento da página em si.
incorporação de um
arquivo externo JS, assim como o código do arquivo.

BOAS PRÁTICAS RELACIONADAS AO

JAVASCRIPT


 faz uso do Javascript no lado servidor.


NODE.JS

É um interpretador de JavaScript assíncrono com código aberto orientado a eventos,
focado em migrar a programação do Javascript do cliente (frontend) para os servidores.

VERIFICANDO O APRENDIZADO

1. AO DESENVOLVERMOS UMA PÁGINA WEB DEVEMOS NOS

PREOCUPAR NÃO SOMENTE COM O RESULTADO FINAL, MAS TAMBÉM
EM UTILIZARMOS CORRETAMENTE CADA UMA DAS TECNOLOGIAS.

NESTE CONTEXTO, ASSINALE A OPÇÃO CORRETA QUANTO ÀS BOAS

PRÁTICAS A SEREM SEGUIDAS:
Por outro lado, deve-se tomar cuidado ao mover o Javascript para o
final da página: caso
algum elemento, evento ou funcionalidade da
página dependa do código em questão, eles não A) Utilizar os elementos HTML corretamente, tendo em mente a semântica; separar as
serão executados, uma
vez que foram carregados antes do Javascript. Nesse caso, pode ser responsabilidades entre cada tecnologia; otimizar o tempo de carregamento das páginas;
adotada uma abordagem híbrida, onde os códigos Javascript dos quais
a página dependa para utilizar folhas de estilo e Javascript a partir de arquivos externos.
funcionar corretamente fiquem no início e os
demais, ao final.
B) Deve-se evitar, sempre que possível, fazer uso de novas técnicas ou novas funcionalidades
no que diz respeito às tecnologias Client Side. Isso porque as tecnologias Web já possuem
uma especificação própria, antiga, e, por isso, não se adaptam bem com novos recursos.
 ATENÇÃO C) A CSS possui um sistema de hierarquia, assim como o Javascript. Com isso, ao usarmos
ambos no HTML, é recomendado usar estilos e scripts inline, já que facilitam o entendimento
Assim como já foi falado em relação à CSS, é também
recomendado minificar o arquivo .js a
do comportamento e também visual do elemento ao qual foram aplicados.
fim de otimizar o desempenho do
carregamento da página.
D) Remover tanto a CSS quanto o Javascript internos para o final da página otimiza o
Finalmente, cabe citar que, embora originalmente exclusivo do lado cliente, atualmente o
desempenho e acelera o tempo de carregamento da página. Logo, esta é uma das práticas
Javascript também pode ser usado no lado servidor. O node.js é um exemplo de ambiente
que
mais recomendadas. 2. Como vimos, cada tecnologia do lado cliente possui sua própria função. Logo, a
respeito da separação de funções e responsabilidades, assinale a alternativa correta:

A alternativa "A " está correta.

2. COMO VIMOS, CADA TECNOLOGIA DO LADO CLIENTE POSSUI SUA

PRÓPRIA FUNÇÃO. LOGO, A RESPEITO DA SEPARAÇÃO DE FUNÇÕES E

RESPONSABILIDADES, ASSINALE A ALTERNATIVA CORRETA: As tecnologias do lado cliente foram desenvolvidas em momentos distintos, a começar pela
HTML. Com isso, a partir do surgimento de novas necessidades, novas tecnologias, como a

A) O HTML cuida do conteúdo, o CSS, do layout/apresentação e o Javascript, do CSS e o Javascript foram desenvolvidas. A utilização em conjunto destas tecnologias, que se

comportamento/interação. Com isso, ao não misturarmos as funções − embora seja possível −, complementam, traz inúmeros benefícios, desde a otimização na criação das páginas ao

obtemos vários benefícios, como o de separação de interesses e consequente facilidade para resultado final.

manter o código, uma vez que podemos ter diferentes pessoas trabalhando ao mesmo tempo
em diferentes partes do site.

B) O HTML é a base, a principal tecnologia do lado cliente. Apenas utilizando HTML é possível
criar uma página rica em conteúdo – já que as tags servem justamente para isso −, layout – já
MÓDULO 4
que tudo fica dividido na estrutura semântica do HTML − e interatividade, já que elementos
como o Formulário existem justamente para isso.  Reconhecer as tecnologias do
lado servidor

C) Mais importante do que a preocupação com as funções de cada tecnologia é o resultado

exibido no navegador. Logo, deve-se dar preferência ao resultado final, independente do que
foi feito e de como foi feito, em termos de tecnologia, para se chegar a ele.
AS TECNOLOGIAS DO LADO SERVIDOR:

D) Entre as três tecnologias do lado cliente, CSS é a mais dispensável e menos importante, já
que é possível cuidar de todo o layout e apresentação fazendo uso apenas de HTML. PHP, PÁGINAS DINÂMICAS E
ACESSO A
DADOS
GABARITO

1. Ao desenvolvermos uma página Web devemos nos preocupar não somente com o
resultado final, mas também em utilizarmos corretamente cada uma das tecnologias.

PHP

Neste contexto, assinale a opção correta quanto às boas práticas a serem seguidas:
Uma das principais funções das linguagens de programação Server Side é permitir o acesso
a
A alternativa "A " está correta. informações armazenadas em Bancos de Dados. Uma vez que apenas utilizando HTML e

Javascript isto não é possível, faz-se necessária a utilização de uma linguagem no lado
servidor. Entre as diversas linguagens disponíveis no lado servidor estão o Java, o
Python, o
Como frisado nas seções de Boas Práticas, o Ambiente Web está em constante evolução. Tal
ASP, o .NET e o PHP – que conheceremos um pouco mais ao longo deste tópico.
fator, somado aos princípios básicos como semântica e separação de responsabilidades
definem o que são as boas práticas quanto às tecnologias Client Side.
 COMO O PHP FUNCIONA

O PHP é uma linguagem interpretada, ou seja, ela precisa “rodar” sobre um servidor Web.
Com
isso, todo o código gerado é interpretado pelo servidor, convertido em formato HTML
e então
exibido no navegador.

ETAPA 01
ETAPA 02

ETAPA 03
Por Casimiro PT | Fonte: Shutterstock
ETAPA 04

O QUE É O PHP E PARA QUE SERVE ETAPA 01

PHP (Hypertext Preprocessor) é uma linguagem de
programação baseada em script, open
O PHP é uma linguagem interpretada, ou seja, precisa rodar sobre um servidor Web.
source e destinada, sobretudo, ao desenvolvimento
Web. Trata-se de uma linguagem criada
para ser simples, tendo nascida estruturada e,
posteriormente, adotado o paradigma de
orientação a objetos – isto apenas 10 anos depois
da sua criação.
ETAPA 02
FRISANDO O QUE JÁ FOI DITO ACIMA, O
PRINCIPAL FOCO DO
PHP SÃO OS SCRIPTS DO LADO SERVIDOR, DANDO Com isso, todo o código gerado é interpretado pelo servidor.
SUPORTE A FUNÇÕES COMO
COLETA E PROCESSAMENTO
DE DADOS ORIUNDOS DE FORMULÁRIOS HTML, GERAÇÃO
DE CONTEÚDO
DINÂMICO COM O ACESSO A BANCOS DE
ETAPA 03
DADOS, ENTRE OUTRAS. ALÉM DISSO, DO FOCO NOS
SCRIPTS NO LADO SERVIDOR, É POSSÍVEL TAMBÉM
Convertido em formato HTML.
UTILIZAR O PHP ATRAVÉS DE SCRIPTS EM
LINHA DE
COMANDO E NA CRIAÇÃO DE APLICAÇÕES DESKTOP (COM
A UTILIZAÇÃO DA EXTENSÃO
PHP-GTK), EMBORA NÃO SEJA
ETAPA 04
A MELHOR LINGUAGEM PARA ISSO.

E, então, exibido no navegador.

LOGO, O CÓDIGO-FONTE NÃO PODE SER VISTO NO
LADO imprimir algo na tela, associado a uma frase.
Quando visualizado no navegador, o código será

CLIENTE, MAS APENAS O HTML GERADO. renderizado como HTML normal.

Caso exibamos a fonte, só será possível ver as tags HTML e
o
conteúdo, sem o código PHP em questão.
Outra característica importante do PHP é poder ser utilizado na maior parte dos Sistemas
Operacionais, assim como em vários servidores Web diferentes, como o Apache, o IIS e o Na segunda imagem, temos um exemplo de código onde são definidas duas variáveis, $nome

Nginx, entre outros. e $email, que recebem dois valores enviados de um formulário HTML, através do método
POST. Daí a utilização
do array superglobal $_POST – cujos índices ‘nome’ e ‘email’
correspondem ao
atributo ‘name’ dos campos input do formulário. A seguir, é utilizada a
função
“echo” para a impressão de uma frase e do conteúdo das
variáveis recebidas. Repare ainda na
ANATOMIA DE UM SCRIPT PHP utilização, mais uma vez, de uma tag
html, a <br/>, em meio a código PHP.

Um script PHP é composto por código delimitado pelas tags <?php e ?>. A última, de
fechamento, não é obrigatória. Devido à sua simplicidade, um mesmo script PHP pode conter
tanto código estruturado
quanto orientado a objetos. Pode até conter código de marcação
HTML. Neste último caso,
o código próprio do PHP deverá ficar entre as tags de abertura e
fechamento. A
Figura 9 mostra dois exemplos de código, um apenas em PHP e outro
mesclado com HTML. Ao analisarmos os códigos, inicialmente é importante notar que ambos
possuem a extensão
“.php”. Outras extensões possíveis, mas atualmente em desuso, são
“.php3”, “.php4”,
“.phtml”.

Assista a esse vídeo e conheça um exemplo de

código PHP.

 Figura 9 –
Exemplos de Código PHP. Fonte: Paixão, 2020.

A seguir, no primeiro código, temos as tags de um arquivo HTML comum, com

exceção do
código inserido dentro das tags <?php e ?>. Aqui temos a
função “echo”, que serve para
SINTAXE INCLUSÃO DE SCRIPTS DENTRO DE SCRIPTS

Assim como fizemos com o Javascript, veremos a seguir um resumo sobre a sintaxe do PHP: O PHP permite a inclusão de um script dentro de outro script. Isso é muito útil,
sobretudo se
pensarmos no paradigma de orientação a objetos, em que temos, em um
programa, diversas
VARIÁVEIS
classes, codificadas em diferentes scripts. Logo, sempre que
precisarmos fazer uso de uma
As variáveis em PHP são criadas com a utilização do símbolo de cifrão ($).
Além disso, PHP é dessas classes, de seus métodos ou atributos, basta
incluí-la no script desejado. Para incluir
case
sensitive. Logo, tomando como exemplo as
variáveis mostradas na Figura 9, $nome e um script em outro o PHP disponibiliza algumas funções:
$email, ambas são diferentes das
variáveis $Nome e $Email.
Include
TIPOS DE DADOS
Require
O PHP é uma linguagem fracamente tipada. Logo, embora possua suporte para
isto, não é
Include once
necessário definir o tipo de uma variável em sua declaração.
Require_once
Os tipos de dados disponíveis em PHP são: Booleanos, inteiros, números de
ponto flutuante,
strings, arrays, interáveis (iterables), objetos, recursos,
NULL e call-backs.

OPERADORES CONDICIONAIS
ACESSO AO SISTEMA DE ARQUIVOS
O PHP tem suporte às condicionais if, else, if e else ternários, if else e
switch.

LAÇOS DE REPETIÇÃO Através do PHP é possível ter acesso ao sistema de arquivos do servidor Web. Com isso é
possível, por exemplo, manipular arquivos e diretórios, desde a simples listagem à
inclusão ou
Estão disponíveis os laços: For, foreach, while e do-while.
exclusão de dados.
FUNÇÕES E MÉTODOS
O PHP possui uma grande quantidade de funções e métodos nativos.

CASE SENSITIVE

Sensível a letras maiúsculas e minúsculas. Ou seja, faz diferença quando utilizamos uma
e
outra − conforme o exemplo fornecido, onde as letras “e” e “E” estão em minúsculo e
maiúsculo, respectivamente, em cada nomeação.

Por hanss | Fonte: Shutterstock

 Ainda utilizando o exemplo de um blog, imagine que você
deseja receber comentários em seus

PÁGINAS DINÂMICAS posts, deseja que seus visitantes possam

interagir com você e vice-versa. Como fazer isso? A
resposta, como você já deve
imaginar, é: páginas dinâmicas.

Se fôssemos implementar em uma página Web tudo o que estudamos até aqui, teríamos uma A combinação das tecnologias do lado cliente com as tecnologias do lado servidor produzem
página HTML básica, com um pouco de interação no próprio navegador, graças ao
Javascript, as páginas dinâmicas. Nelas, é possível receber as informações provenientes do cliente,
e também com um pouco de estilo, este devido ao CSS. processá-las, guardá-las, recuperá-las e utilizá-las sempre que desejarmos. E não é só
isso:

Além disso, já sabemos que é possível enviar dados do HTML para o PHP através de um Podemos guardar todo o conteúdo do nosso blog no banco de dados. Com isso,
teríamos

formulário. Mas e agora? Qual o próximo nível? O que fazer a seguir? A resposta para
essas apenas uma página PHP que recuperaria nosso conteúdo no banco e o exibiria no
navegador.

duas perguntas está no que abordaremos a seguir: páginas

dinâmicas e acesso a
dados. A Tabela 2 apresenta um pequeno resumo comparativo entre as páginas estáticas e
dinâmicas.

Páginas
Páginas dinâmicas
estáticas

PÁGINAS DINÂMICAS
Manualmente, Automaticamente através de
Inclusão/Alteração/Exclusão
direto no código scripts no lado servidor, como
Para prosseguirmos, é importante definirmos o que são páginas dinâmicas. A melhor de conteúdo
HTML PHP
forma
de fazer isso, porém, é definindo o que seria o seu antônimo, ou seja, as páginas
estáticas. HTML + Javascript + CSS, sem conexão com uma linguagem de programação,
formam
o que podemos chamar de páginas estáticas. Embora seja até possível termos Armazenamento do Na própria
Em um banco de dados
um site
inteiro composto por páginas estáticas, isso seria muito trabalhoso e também conteúdo página HTML

nada usual.
 Tabela 2 –
Comparativo entre páginas estáticas e dinâmicas. Fonte: Paixão, 2020.


Atenção! Para visualização completa da tabela utilize a rolagem horizontal

Outra importante característica de um site dinâmico é possibilitar a utilização de

ferramentas de
 EXEMPLO gestão de conteúdo (CMS) para manter as informações do site sempre
atualizadas. Com isso,
depois de pronto, não será mais necessário mexer nos
códigos-fonte, basta acessar a
Imagine um site que tenha, por exemplo, dez páginas.
Agora imagine que esse site tenha a ferramenta e gerenciar o conteúdo através dela. Já no
site estático, será preciso modificar
mesma estrutura visual, o mesmo cabeçalho,
menu, rodapé e outros pontos em comum. Pense diretamente o código HTML, tornando necessário
alguém com conhecimento técnico para isto.
em um blog, por exemplo, onde o que
muda são os conteúdos dos posts. No site estático,
teríamos que escrever dez
diferentes arquivos HTML, modificando o conteúdo em cada um
deles, diretamente
nas tags HTML e só conseguiríamos reaproveitar os estilos e a
interatividade de
navegador utilizando CSS e Javascript externos. Entretanto, todo o conteúdo ACESSO A DADOS
precisaria ser digitado e muito código HTML, repetido. Todo esse trabalho nos
ajuda a entender
o que são páginas estáticas. Como mencionado anteriormente, o Ambiente Web é composto por tecnologias que rodam do
lado cliente e do lado servidor. Complementando o que vimos até aqui, temos ainda, do
lado
servidor, o banco de dados. De forma resumida, podemos defini-lo
como um repositório onde A partir das tecnologias vistas até aqui, há algumas formas de acessar os dados guardados
em
diversas informações podem ser armazenadas e posteriormente
recuperadas. Para realizar a um banco de dados.
gestão destes dados, existem os SGBD, ou
Sistemas Gerenciadores de Bancos
de Dados.
A PARTIR DO HTML
Uma das maneiras mais comuns de enviar e recuperar dados a partir do HTML é
fazendo uso
de formulários. Com eles é possível submetermos nossos dados
para uma linguagem no lado
servidor/PHP. Este, então recebe as informações e
as armazena no banco de dados. Da
SGBD mesma forma acontece o caminho inverso.
Podemos ter um formulário em nossa página HTML
que solicite dados ao PHP e
este as envie de volta, após recuperá-las do banco de dados.
Há diversos tipos de SGBD, para as mais variadas necessidades, com opções gratuitas
Vale lembrar ainda o que vimos sobre o PHP: Ele permite a utilização de
códigos HTML
ou
pagas. Entre os gratuitos, dois são comumente utilizados em conjunto com o PHP:
diretamente em seus scripts. Logo, uma página Web feita em PHP
pode recuperar dados do
MySQL e
PosgreSQL.
banco de dados toda vez que é carregada. É isso o que acontece na maioria dos sites. Cada
página visualizada é composta por conteúdo armazenado em banco de dados e código
HTML
produzidos por uma linguagem do lado servidor. Com isso, cada página
que abrimos em sites
dinâmicos implica em uma chamada/requisição ao lado
servidor – script e banco de dados.

A PARTIR DO JAVASCRIPT
O Javascript possui, essencialmente, duas formas para se comunicar com linguagens do lado
Servidor: Através das APIs (Application Programming Interface) XMLHttpRequest e Fetch API.
A primeira é amplamente utilizada, sendo a forma mais comum de realizar esta comunicação.
É normalmente associada a uma técnica de desenvolvimento Web chamada AJAX. Já a
segunda é mais recente e oferece algumas melhorias, embora não seja suportada por todos os
navegadores.

Por Tommy Lee Walker | Fonte: Shutterstock A comunicação em ambas consiste em, através de algum evento no navegador – que
normalmente é originada em uma ação disparada pelo usuário −, enviar uma requisição ao
Se, por um lado, o SGBD é responsável por montar a estrutura do banco de dados − entre
lado servidor, como recuperar algum dado, por exemplo, tratar o seu retorno e o exibir na tela.
outras funções −, por outro lado, para recuperarmos uma informação guardada em um banco
Isso tudo sem que seja necessário recarregar toda a página.
de dados e exibi-la em uma página Web, é necessário utilizar uma linguagem do lado
servidor,
como o PHP. Em outras palavras, não é possível acessar o banco de dados
utilizando apenas
HTML ou mesmo Javascript. Sempre será necessária a utilização de uma
linguagem server
side para o acesso aos dados.
VERIFICANDO O APRENDIZADO

FORMAS DE ACESSO A DADOS

1. O PHP É UMA LINGUAGEM DE SCRIPT, ALTAMENTE ADAPTÁVEL À
HTML E QUE LHE POSSIBILITA INTERATIVIDADE E DINÂMICA. ASSINALE
A ALTERNATIVA CORRETA QUANTO A ESTA AFIRMAÇÃO:
A) É possível criar um script PHP que faça acesso a banco de dados utilizando apenas código
HTML.
B) Para recuperar informações de um banco de dados, a HTML precisa fazer uso do PHP, seja
diretamente − a partir de algum elemento próprio, − ou através de Javascript.
C) Como o PHP é altamente adaptável à HTML e esta ao Javascript, um script escrito nesta
última linguagem pode recuperar informações acessando diretamente o banco de dados.
O PHP é uma linguagem Server Side, utilizada, sobretudo, para criar páginas dinâmicas, em
conjunto com a HTML e demais tecnologias do lado cliente. Embora muito adaptável à HTML,
o PHP é uma linguagem de programação completa, que possui uma sintaxe específica, assim
como funções e métodos nativos que lhe possibilitam o acesso tanto ao sistema de arquivos
quanto à diferentes bancos de dados.
2. As páginas dinâmicas, ao contrário das páginas estáticas, proveem dinamismo ao
Ambiente Web. Neste contexto, assinale a opção correta:
A alternativa "D " está correta.

D) O PHP é altamente adaptável à HTML. Logo, assim como a HTML, um script PHP é

renderizado diretamente pelo navegador.

Nas páginas dinâmicas, todo o conteúdo de um site pode ser gerenciado automaticamente
através de scripts que rodam no servidor.

2. AS PÁGINAS DINÂMICAS, AO CONTRÁRIO DAS PÁGINAS ESTÁTICAS,

PROVEEM DINAMISMO AO AMBIENTE WEB. NESTE CONTEXTO,
ASSINALE A OPÇÃO CORRETA: CONCLUSÃO
A) Uma página Web completa só pode ser produzida com a utilização de páginas dinâmicas.

B) As páginas dinâmicas são, resumidamente falando, uma forma de interação entre um

usuário e uma página HTML. Logo, uma página que faz uso de Javascript é uma página
dinâmica.
CONSIDERAÇÕES FINAIS
C) A única vantagem, de fato, de se utilizar páginas dinâmicas é guardar os dados do site em
Ao longo deste tema, vimos como o modelo Cliente x Servidor, inicialmente restrito às redes
um lugar mais seguro.
internas das empresas, evoluiu tanto nos diferentes modelos de camadas quanto na migração
D) A utilização de linguagens de programação Server Side é a principal característica de uma para a internet. Novas tecnologias foram criadas no lado cliente − linguagens de marcação;
página dinâmica. folhas de estilo; linguagens de script – e também do lado servidor – linguagens de script;
bancos de dados; páginas dinâmicas −, criando o Ambiente Web como o conhecemos
atualmente, caracterizado pelas tecnologias que formam sua base e pela preocupação com a
GABARITO melhor experiência possível para os usuários que dele fazem uso.

1. O PHP é uma linguagem de script, altamente adaptável à HTML e que lhe possibilita
interatividade e dinâmica. Assinale a alternativa correta quanto a esta afirmação:

A alternativa "B " está correta.

 Leia o livro Design de Interação: Além da interação homem-computador, escrito por

Jennifer Preece, Yvonne Rogers e Helen Sharp, da editora John Wiley e Sons.

Leia o livro Interação humano-computador, escrito por Simone Diniz Junqueira Barboza
e Bruno Santana da Silva, da editora Elsevier.

Visite o tópico "CSS Units" no site do W3C e conheça a lista completa das unidades de
medidas da CSS. Conforme mencionado, a CSS possui uma série de unidades de
medidas para expressar tamanho, sendo esse associado a propriedades como “width”,
AVALIAÇÃO DO TEMA:
“margin”, entre outros. Estão disponíveis unidades de tamanho absoluto, como
centímetros, milímetros, pixels etc. e também unidades de tamanho relativo, como “em”,
“ex”, entre outros.

REFERÊNCIAS Assim como a maioria das tecnologias, a CSS possui um guia de referência oficial. Como
esse guia é mantido pelo W3C, entre no site para acessá-lo e conhecer a sua
especificação e todos os detalhes a ela relacionados.
BENYON, D. Interação Humano-Computador. São Paulo: Pearson Prentice Hall, 2011.

GLOBAL STATS. StatCounter: Screen Resolution Stats Brazil.

KNIGHT, K. Responsive Web Design: What It Is And How To Use It. In: Smashing Magazine.
Responsive Design.
CONTEUDISTA
MOZILLA. MDN Web Docs: CSS Preprocessor.

PAIXÃO, A. Notas de Aula sobre Ambiente Web Cliente x Servidor e as Tecnologias do Alexandre de Oliveira Paixão
professor Alexandre Paixão. Disponível sob licença Creative Commons BR Atribuição – CC
 CURRÍCULO LATTES
BY, 2020.

SILVA, M. S. Web Design Responsivo: Aprenda a criar sites que se adaptam

automaticamente a qualquer dispositivo, desde desktop até telefones celulares. São Paulo:
Novatec, 2014.

WROBLEWSKI, L. Mobile First.

W3SCHOOLS. CSS Reference.

EXPLORE+
 OBJETIVOS

MÓDULO 1

Descrever a estrutura de uma página Web

MÓDULO 2

Descrever o uso das Tags na HTML

DEFINIÇÃO MÓDULO 3

Apresentação dos conceitos de HTML, linguagem de marcação e estrutura básica de páginas Demonstrar as tags complementares às tags básicas em uma página
Web
Web.

MÓDULO 4
PROPÓSITO
Aplicar um formulário em uma página Web

Explicar a função e utilização da linguagem de marcação HTML.

INTRODUÇÃO
PREPARAÇÃO
O objetivo principal de uma linguagem de marcação de hypertexto,
e mais especificamente da
HTML – que será usada como linguagem padrão e alvo de nosso
estudo –, é o de estruturar o
Ler sobre o conceito básico de HTML.
conteúdo de um documento. Este conteúdo
pode ser composto de textos, figuras, tabelas
Ter instalado no computador um navegador web/browser e um editor de texto que dê suporte
à
etc.
marcação HTML. No Sistema Operacional Windows é indicado o Notepad++. No Linux, o Nano
Editor.
Estrutura, por sua vez, pode ser
definida como a organização dos elementos de conteúdo. de 1996 passou a ser mantida pelo World Wide Web
Consortium (W3C), além de ter
Para realizar
essa função, a HTML faz uso de um sistema hierárquico de elementos
chamados ganhado também o
status de norma internacional (ISO/IEC) em 2000.
de tags.

WORLD WIDE WEB CONSORTIUM (W3C)

HYPERTEXTO
É um consórcio internacional de organizações filiadas e que conta com
equipe em tempo
Texto ao qual podem ser agregados outros conjuntos de informação, como
textos, integral responsável por, junto com o público em geral,
desenvolver padrões para a Web.
multimídias etc., e cujo acesso é realizado através de
referências denominadas
hiperligações.

MÓDULO 1

 Descrever a estrutura de uma

página Web

O PRINCÍPIO DA HTML

Por whiteMocca/Shutterstock
A especificação da HTML foi formada a partir da junção de dois padrões: o
SGML e o HyTime.
O primeiro, SGML (Standard Generalized Markup
Language), é, na verdade, um padrão ISO
que especifica as regras para a criação de
linguagens de marcação que sejam independentes
de plataforma. A EVOLUÇÃO DA HTML: VERSÕES
Já o HyTime (Hypermedia/Time-Based Structuring Language)
é um padrão desenvolvido pela
Ao longo dos anos, a HTML tem passado por uma série de aperfeiçoamentos. Tal processo é
ISO com o objetivo de possibilitar que
hiperdocumentos hipermídia pudessem ser descritos em
liderado pelo W3C.
Desde a sua criação, a HTML teve várias versões: HTML, HTML 2.0, HTML
função de sua estrutura e conteúdo
e, consequentemente, utilizados por quaisquer sistemas
3.2, HTML 4.01,
XHTML, HTML 5, HTML 5.1 e HTML 5.2.
conformantes (Newcomb et al,
1991).
Veja na tabela a seguir o histórico de versões da HTML:
Inicialmente, a especificação da HTML e sua evolução foram mantidas pelo IETF (Internet
Engineering Task Force), desde sua primeira publicação formal, em 1993. Entretanto, a
partir
Ano Versão Histórico
 1991 HTML Tim Berners-Lee cria a HTML
TIPOS DE DOCUMENTO
O ponto inicial da estrutura de uma página Web é o tipo de documento a ser utilizado.
1995 HTML 2 Grupo de Trabalho HTML define a HTML 2.0
Inicialmente, a HTML continha apenas tags para marcações
simples, uma vez que ainda não
existia um
dispositivo com interface gráfica onde pudesse ser exibida.

1997 HTML 3.2 W3C publica a Recomendação HTML 3.2

1999 HTML 4.01 W3C publica a Recomendação HTML 4.01 MARCAÇÃO SIMPLES

Marcação simples, nesse contexto, diz respeito ao tipos de tags HTML nas
versões
2000 XHTML W3C publica a Recomendação XHTML 1.0 iniciais.

Como mencionado a seguir no texto, novas tags foram adicionadas conforme

a
linguagem evoluiu – evolução essa motivada pela criação de
dispositivos de interface
2014 HTML5 W3C publica a Recomendação HTML5
gráfica, juntamente com os demais motivos
mencionados na sequência.

2016
W3C candidata a Recomendação HTML 5.1
Com isso, as primeiras tags eram relacionadas a elementos como títulos,
parágrafos, quebras
HTML 5.1
2017 W3C publica a Recomendação HTML 5.1 2ª edição de linha etc. Entretanto, com a sua rápida expansão
e sobretudo pelo lançamento do primeiro
navegador, o Mosaic, surgiu a
necessidade de criação de novas tags, para marcações mais
complexas.

2017 HTML 5.2 W3C publica a Recomendação HTML5.2 Tal necessidade se tornou contínua, tendo como principais pilares estes
eventos já
mencionados: a rápida expansão da Web e a construção de novos
navegadores.

 Tabela 1:
Histórico de versões da HTML O fato de que cada navegador implementava seus próprios padrões,
incluindo tags que só
podiam ser interpretadas por eles mesmos, tornou
necessária a adoção de padrões. Por isso, o

Atenção! Para visualização completa da tabela utilize a rolagem horizontal
W3C criou o DTD – Definição
de Tipos de Documentos (do inglês Document Type Definition),
que é uma
lista de elementos, atributos e requisitos relacionados a uma
determinada
linguagem ou variação da linguagem.
 COMENTÁRIO

Cada versão lançada da HTML representa algum tipo de

evolução em relação à versão
anterior: formalização de regras e características;
correção de problemas de compatibilidade; UTILIZANDO DOCTYPES – DOCUMENT
criação de novas tags; suporte a novos
recursos etc.
TYPES
 Como o próprio nome diz, determinava uma série de restrições e exigências:
obrigatoriedade
A importância dos Document Types, na criação de páginas HTML, diz
respeito ao conjunto de
de separação entre a estrutura e a apresentação; limitação
nos elementos de apresentação
tags que podem ser usadas e que serão ou não
renderizadas
a partir do tipo utilizado.
disponíveis - como tags de fonte e atributos
de alinhamento −; ausência de suporte a tags
Antes da HTML5, existia um conceito chamado de Concordância de
Documento. Embora obsoletas etc.
relevante apenas nas versões anteriores
da HTML, ainda é importante abordá-lo, uma vez que
muitas páginas Web
ainda não foram portadas para a HTML5. Tal conceito significa que cada
TRANSITIONAL
página precisa ser concordante com a especificação W3C oficial para a
qual ela foi escrita. Era mais maleável em relação aos atributos de apresentação, além de
possibilitar a utilização
de tags obsoletas.

FRAMESET
Tag obsoleta da HTML4 usada para combinar múltiplos frames e exibi-los como
numa única
RENDERIZADAS página.

Vemos o fragmento do código inicial de uma página HTML 4.01:

Renderização é o processo realizado pelo navegador que

consiste em ler e interpretar as
<!DOCTYPE
HTML PUBLIC “-/W3C/DTD HTML 4.01 Transitional//EM”
tags HTML e
apresentá-las adequadamente.
http://www.w3.org/TR/html4/loose.dtd>

Na declaração, são definidas as seguintes informações sobre a página HTML:

Tipo de Documento: HTML;

Acesso à DTD: Public – logo, a DTD a que se refere está disponível para uso de forma
pública;

Onde se encontra o DTD: Foi criado e está hospedado no W3C;

Versão da HTML: 4.01 Transitional;

URL da especificação: O endereço

http://www.w3.org/TR/html4/loose.dtd leva à
especificação em
questão.

Portanto, o DOCTYPE:

Fonte:Shutterstock Não é uma tag HTML, mas sim uma instrução.

A especificação da HTML 4, por exemplo, previa três tipos de DocTypes:

Strict, Transitional e É uma declaração que serve para informar ao navegador qual a versão da HTML
usada em um
Frameset.
Vamos conhecer cada uma delas? arquivo HTML.

STRICT A partir da HTML5, quando a HTML deixou de ser baseada na SGML, a declaração do
DOCTYPE
foi simplificada, como visto a seguir:
 <!doctype html>

<!DOCTYPE HTML> <html>

<head>

Comparando as declarações do DocType entre a HTML5 e a HTML4, notamos algumas </head>

diferenças. <body>

</body>

</html>

A PRINCIPAL É QUE A HTML5, AO CONTRÁRIO

DAS  Figura 1 – Estrutura
básica de uma página Web.

VERSÕES ANTERIORES, NÃO SE BASEIA NA SGML E,

PORTANTO, NÃO REQUER REFERÊNCIA A UM
DTD.
VAMOS ENTENDER O QUE SIGNIFICA CADA
TAG?

RAIZ

A tag inicial, após a declaração do DocType, é a <html>. Tal elemento é a raiz do

documento.
Logo, e lembrando que o código HTML é composto por uma estrutura hierárquica
de
tags,
podemos dizer que a <html> é a raiz da árvore do documento.

Por iinspiration/Shutterstock
OUTRA CARACTERÍSTICA IMPORTANTE SOBRE
AS
TAGS, QUE
ABORDAREMOS DE MANEIRA MAIS
APROFUNDADA A SEGUIR, É QUE UMA TAG DEVE
ESTRUTURA DE UMA PÁGINA WEB – SER ABERTA E
FECHADA.
ELEMENTOS OBRIGATÓRIOS
A declaração <html> é a abertura, e o seu fechamento se dá com
a declaração </html>. Com

Como visto anteriormente, a estruturação de uma página Web tem início na definição do isso, observando a figura 1, é
possível perceber que as demais tags estão contidas dentro da

DocType a ser utilizado. Em seguida, é necessário inserir um conjunto de tags que, em tag raiz,
<html>.

conjunto com o DocType, formam a sua estrutura básica. Tal estrutura é demonstrada na
figura
1:
 <script> É responsável pela inclusão e/ou definição de scripts relacionados ao
 COMENTÁRIO documento.

Antecipando um conteúdo que será visto mais adiante, cabe

destacar outro elemento
importante referente à tag raiz: o atributo lang. Este,
propositalmente, não foi inserido na Figura É responsável pela inclusão de folhas de estilo (externas) relacionadas
ao
1, uma vez que ainda não tratamos
dos conceitos de atributo. Por ora cabe dizer que este <link> documento. Também possibilita a inclusão de favicons (pequenos ícones
atributo global (por ser
declarado na tag raiz) deve ser utilizado para definir o idioma da página que aparecem na barra de endereços do navegador).
–
podendo também ser aplicado a outras tags, definindo o idioma delas. Alguns
exemplos de
sua declaração:

Assim como a anterior, é responsável pelo vínculo de folhas de estilo ao

<html lang=”en-US” > <style>
documento − quando elas são declaradas diretamente no documento.

<html lang=”en-GB” >

 Tabela 2: Lista de
tags contidas no cabeçalho da página Web.

<html lang=”pt” > 

Atenção! Para visualização completa da tabela utilize a rolagem horizontal

CABEÇALHO CORPO

A tag <head> é chamada de cabeçalho do documento. Fazendo analogia ao corpo humano, Logo abaixo do cabeçalho deve ser inserida a tag <body>. Esta é responsável pela

devemos vê-la como a cabeça, uma vez que esta contém as tags que serão usadas para estruturação do documento, sobretudo de seu conteúdo e também apresentação – embora

manter todo o documento funcionando e em ordem. seja

fortemente recomendado que a apresentação do documento, como será visto no módulo
específico, seja feita por meio de folhas de estilo (CSS).
Na tabela a seguir é possível visualizar as tags que fazem parte do cabeçalho:

Tag Para que serve

QUANDO NAVEGAMOS EM UM WEBSITE, TODO O

É o título do documento, sendo visualizada na barra de título do
CONTEÚDO
QUE VEMOS – OS TEXTOS, IMAGENS E
<title>
navegador. DEMAIS ELEMENTOS – ESTÁ CONTIDO DENTRO DA
TAG
<BODY>.

Engloba uma série de informações – comumente chamadas de

<meta>
metainformações
– como a descrição da página, palavras-chave etc.
 Pode conter tanto links de navegação quanto informações adicionais que
forneçam
complemento ao conteúdo principal.

RODAPÉ
A área final da página, onde normalmente são dispostos links, avisos de
direitos autorais,
informações complementares sobre o proprietário do site
etc.

COMO FUNCIONA A HTML

Após concluído, o documento estruturado, composto por tags, deve ser salvo com a extensão
“html” ou “htm”. Assim, ele estará pronto para ser lido por um dispositivo, como um
navegador
Web – em um computador pessoal ou em um smartphone. Ou seja, quando
uma página Web

Por Lars Poyansky/Shutterstock é exibida no navegador, o que vemos é o seu conteúdo: o

texto, as imagens etc., não o
código ou as tags. Esse processo consiste, como já vimos,
no que chamamos de interpretação
e renderização.

ESTRUTURA DE UMA PÁGINA WEB –

ELEMENTOS BÁSICOS
Embora as páginas Web sejam diferentes umas das outras, elas tendem a compartilhar uma
mesma estrutura. Isto é, além da estrutura apresentada acima, uma página Web é, na
maioria
das vezes, composta por seções, sendo as mais comuns:

CABEÇALHO
Uma área inicial, logo na parte superior da página. Normalmente vemos um
título, uma
logomarca ou algo do tipo.

BARRA DE NAVEGAÇÃO
Esta área pode ser tanto horizontal quanto vertical – e, em alguns casos, os
dois. Contém os
links para navegação pelas seções/páginas do site.

CONTEÚDO
O conteúdo principal da página, que pode ser dividido em subseções. VAMOS PRATICAR?
BARRA LATERAL
Agora que vimos um pouco de teoria sobre a estrutura de uma
página Web, chegou a hora de B) <html><body><header> e <footer>
praticar. Assista ao vídeo a seguir:
C) <DocType><html><head> e <body>

D) <DocType><html><head>, <body> e <footer>

GABARITO

1. Com relação aos Tipos de Documento, DocTypes, marque a afirmativa correta:

A alternativa "C " está correta.

Conforme visto nas seções Tipos de Documento e Utilizando DOCTYPEs – Document

Types, o DocType é uma instrução obrigatória e permite que seja informado ao navegador ou
VERIFICANDO O APRENDIZADO dispositivo o tipo de documento a ser carregado, permitindo assim a correta renderização da
página.

2. Assinale a alternativa que contém o conjunto de tags que forma a estrutura

considerada obrigatória em uma página HTML:
1. COM RELAÇÃO AOS TIPOS DE DOCUMENTO, DOCTYPES, MARQUE A
AFIRMATIVA CORRETA: A alternativa "C " está correta.

A) O DocType não é importante e nem obrigatório. Portanto, sequer precisa ser declarado.
Conforme visto na Figura 1, a estrutura considerada obrigatória, para a correta renderização de
Sendo assim, o que de fato importa são as tags utilizadas no documento.
uma página Web nos navegadores, é composta pelas tags <DocType><html><head> e
B) A especificação W3C (contendo as tags suportadas, entre outros padrões) para cada versão <body>.
de HTML perde sua importância a partir do lançamento de uma nova versão.

C) A combinação entre a definição de um DocType e a utilização das tags suportadas por ele
permite a correta renderização de uma páginas Web.

D) Nunca será possível renderizar uma página Web que contenha tags definidas como
MÓDULO 2
obsoletas pelo W3C.

 Descrever o uso das Tags na HTML

2. ASSINALE A ALTERNATIVA QUE CONTÉM O CONJUNTO DE TAGS QUE

FORMA A ESTRUTURA CONSIDERADA OBRIGATÓRIA EM UMA PÁGINA
HTML:
APROFUNDANDO O CONCEITO DE TAGS

A) <html> e <body>
Aprendemos que a HTML é uma linguagem de marcação que faz uso de tags para estruturar o
seu conteúdo. Mas o que são tags? Como visto nos exemplos do módulo anterior, tags são OUTRO PONTO IMPORTANTE É A FORMA COMO
UMA
palavras, escritas entre os caracteres de menor “<” e maior “>” e que servem para
informar ao TAG É
ESCRITA, ENTRE OS SINAIS DE MENOR E
navegador a estrutura e o significado do conteúdo inserido em uma página
Web.
MAIOR. ALÉM DISSO, ELA DEVE,
OBRIGATORIAMENTE,
SER
FECHADA. PARA ISSO,
REPETIMOS A DECLARAÇÃO DA TAG E UTILIZAMOS
UMA BARRA “/” ANTES
DO
SEU NOME.

 EXEMPLO

Vejamos alguns exemplos:

Por photovibes/Shutterstock <h1>Título de uma

seção</h1>

Um dos exercícios propostos no módulo anterior consistia em inserir, dentro da estrutura

básica
de tags da HTML − mais precisamente dentro da tag <body> −, um texto
qualquer e, a seguir, <p>Parágrafo contendo um texto</p>

salvar e carregar esta página no navegador. Como pôde ser visto, o

navegador exibiu o texto,
Com base no primeiro exemplo, dizemos que a tag foi
iniciada ao inserirmos o
“<h1>” e
que provavelmente era curto.
fechada no “</h1>”.
Agora, tente imaginar o site de um portal de notícias com todo o conteúdo amontoado
dentro
Existem algumas tags que fogem à essa regra. Um exemplo bem conhecido é a de quebra de
da tag <body>.
linha: <br />. Repare que, nesse caso, a tag é fechada com a utilização da “/”
logo antes do
Embora exibido pelo navegador, tudo seria uma grande bagunça, uma confusão. No lugar sinal de maior.
disso, imagine que é possível dizer ao navegador que determinado conteúdo é o título de
uma
seção, sendo procedido de um parágrafo que diga respeito a tal seção. Você ainda
pode ir
além, inserindo uma imagem e vários outros elementos. Para isso servem as tags.
 ATENÇÃO

A tag de quebra de linha tornou-se obsoleta a partir da

HTML5.

COMO DECLARAR AS TAGS

Antes de conhecermos mais a fundo as tags, sua composição e tipos, vamos voltar à
criação.
TIPOS E COMPOSIÇÃO DAS TAGS
O primeiro ponto a se ter em mente é que existe um conjunto já definido de tags
(padronizado
pelo W3C). Logo, não é possível criarmos as nossas próprias tags HTML.
As tags podem ser divididas em tipos, de acordo com as suas funções: Estruturais,
textuais e inserirmos estilização visual nas
páginas, através de Folhas de Estilo ou eventos e interação,
semânticas. Outra característica importante é que elas também podem ter
atributos. A seguir, através de
Javascript.
falaremos sobre cada um desses temas.

TIPOS DE TAGS: TEXTUAIS E SEMÂNTICAS

OS ATRIBUTOS
Até aqui, conhecemos algumas tags associadas à estrutura, dita obrigatória, de uma
página.
Os atributos servem para que algumas características sejam adicionadas a um elemento, a Também vimos que, na maioria dos casos, as páginas Web possuem uma mesma
estrutura em
uma tag. São compostos por um nome e por um valor. termos de conteúdo. A seguir, conheceremos os tipos de tag textuais e
semânticos.

Tags textuais

 EXEMPLO São responsáveis por organizar o conteúdo da página, ou seja, textos, mídias e links, por
exemplo. Algumas das principais tags textuais, inclusive vistas anteriormente, são:
<p>, <h1>

Vamos a um exemplo: ... <h6>, <img> e <a>. Essas tags e suas funções
serão descritas a seguir, quando tratarmos
das tags semânticas.
<img src=”imagem.jpg” alt=”minha imagem” />
Tags semânticas
Esta tag é utilizada para a inserção de imagens no
documento. Temos dois exemplos de
atributos em sua declaração: src e alt, que
são nomes de atributo; e “imagem.jpg” e “minha A partir da HTML5 foram inseridas tags com a função semântica de organizar a estrutura de

imagem” são seus valores,

respectivamente. conteúdo de uma página. Logo, voltando ao exemplo de seções básicas de uma página, nossa
página ficaria assim:
O atributo “src” define o endereço e o nome da imagem. Já
o atributo “alt” define um texto
alternativo a ser exibido no navegador caso a
imagem não seja carregada.

Há uma enorme variedade de atributos, assim como de relacionamentos entre eles e as tags.

Ao longo dos próximos módulos, veremos alguns dos principais, lembrando que o site do W3C
contém a lista completa de atributos e combinações.

Por ora, cabe ainda destacar dois atributos de extrema importância no desenvolvimento
Web:

ID
Utilizado para definir um identificador, que deve ser único, para uma tag em
um documento.

CLASS
Usado para definir uma classe à qual uma ou mais tags pertencem. Com base
nesses dois
tipos de identificação, é possível, por exemplo, fazer
referência a um ou mais atributos para

Fonte:Shutterstock
 Figura 2 –
Tags estruturais básicas de uma página Web <h4>
tag <h1>, no
subtítulo seguinte, <h2>, e assim por diante. Além
disso,
<h5>
uma página poderá conter várias <h1>,
<h2>... <h6>. A exceção aqui fica
Ao analisar a Figura 2, é possível perceber que existem tags específicas para cada seção
do
<h6> por conta da tag
<h1>, uma vez que é recomendado utilizar apenas uma
conteúdo. Essa é uma característica importante da HTML, chamada de
semântica.
numa
mesma página.
Logo, semântica, neste contexto, pode ser considerada como a correta utilização de uma
tag
HTML de acordo com o seu conteúdo ou finalidade.

<p> Usada para inserir parágrafos de texto.

EM MUITOS CASOS É INDIFERENTE, AO

<pre> Usada para inserir um texto pré-formatado.
VISUALIZARMOS
UMA PÁGINA NO NAVEGADOR, AS
TAGS UTILIZADAS PARA GUARDAR DETERMINADO
CONTEÚDO.
ENTRETANTO, É FORTEMENTE Embora não seja considerada semântica, essa tag poderá ser usada

RECOMENDADO USÁ-LAS DE ACORDO COM SUA <div> para

agrupar algum tipo de conteúdo que não tenha nenhuma semântica
específica ou que não se encaixe bem dentro de uma tag semântica.
FUNÇÃO.

Isso cria uma organização no documento que facilita tanto para você, que o escreveu,
quanto
É semelhante à <div>. Entretanto, enquanto a <div>
é um elemento não
para outras pessoas que venham a editar o mesmo documento. Além disso, muitos
dispositivos
<span> semântico no bloco (quando usada,
quebra o conteúdo em uma seção),
fazem uso dessa marcação para uma correta interpretação do conteúdo ali
contido.
a <span> é
embutida (não quebra o conteúdo, apenas o agrupa).
A seguir, veremos outras tags e suas respectivas funções:

Tag Descrição/Função <a> Usada para inserir links.

Inclui um bloco de conteúdo que deve ser usado quando se deseja inserir
<article> <br /> Usada para inserir uma quebra de linha.
um artigo, como um post de um blog, por exemplo.

Insere uma linha horizontal no documento. Normalmente é utilizada

Define uma seção no documento. É normalmente utilizado
para agrupar <hr>
<section> quando
se pretende alterar a temática de um texto.
seções. Por exemplo: uma <section> poderia
conter vários <article>.

 Tabela 3: Lista de
tags estruturais, textuais e semânticas.

<h1>
Usada para inserir títulos ao longo da página. É uma boa
prática que 
Atenção! Para visualização completa da tabela utilize a rolagem horizontal
<h2>
cada seção ou cada bloco de texto seja
precedido por um título. Trata-se
<h3>
de uma tag hierárquica,
logo, no título mais importante deve ser usada a
 <i>: aplica o efeito de itálico em um texto;

<em>: aplica o efeito de itálico e dá ênfase a um texto.

O destaque que tais elementos merecem diz respeito à função semântica

que as tags <strong>
e <em> exercem.

É interessante notar que as duas produzem o mesmo efeito visual (que <b> e
<i>,
respectivamente) em um texto, ou seja, marcá-lo como negrito e/ou
itálico. Entretanto, há uma
diferença importante entre elas, que vai
além da visualização do texto no navegador pela
maioria dos
usuários.

A função semântica de ambas é perceptível em dispositivos de leitura

de tela, normalmente
utilizados por pessoas
com deficiência visual. Esses dispositivos, ao encontrarem as tags
“strong” e “em” dão
ênfase ao conteúdo nelas contido, modulando sua voz de forma incisiva, no
caso de
“strong”, ou enfática, no caso de “em”.
Agora veremos a evolução do que vimos no vídeo anterior:

DISPOSITIVOS DE LEITURA DE TELA

São dispositivos que transformam o texto em áudio.

TAGS OBSOLETAS
TAGS DE FORMATAÇÃO <STRONG> E <EM> VS
<B> E
<I> A cada nova versão da HTML, novas tags são criadas, assim como antigas são
descontinuadas. Estas, chamadas de obsoletas, embora ainda possam ter suporte em boa
parte dos navegadores, devem ser evitadas.
A última versão HTML ainda dá suporte a algumas tags direcionadas à formatação visual de
conteúdo. Embora possam ser substituídas por CSS, quatro delas merecem atenção especial:
Em primeiro lugar, porque provavelmente foram substituídas por novas tags, com
melhor
semântica.
<b>: aplica o efeito de negrito em um texto;

Em segundo lugar, pelo risco de desconfigurarem o conteúdo da página, uma vez que os
<strong>: aplica o efeito de negrito em um texto e o marca como importante;
browsers podem deixar de suportá-las a qualquer momento.
A tabela 4 lista algumas tags obsoletas:
A) São nomes, rótulos, que servem para informar ao browser como uma página deve ser
renderizada.
Tag Função
B) As tags são marcações que, embora possuam a mesma forma de serem declaradas,
contêm instruções específicas de acordo com o seu nome.
<applet> Identifica a inclusão de um applet Java.
C) São elementos que têm a responsabilidade de organizar e identificar o conteúdo de uma
página Web.

D) As tags são textos simples inseridos entre o sinal de < e >, e podem tanto ser usadas a
<center> Centraliza horizontalmente o conteúdo de um bloco.
partir das especificações W3C ou serem criadas/inventadas por cada pessoa ao construir um
documento HTML.

<dir> Container para lista de diretórios ou arquivos.

2. EM TERMOS DE SEMÂNTICA, NA UTILIZAÇÃO DE TAGS, ASSINALE A

Determina características relacionadas a fontes de um determinado ALTERNATIVA CORRETA:
<font>
elemento.
A) O conceito de semântica pode ser resumido como a escolha e utilização de tags de acordo
com o tipo de conteúdo ou função.

Ancestral da tag <img>, era usada nas primeiras versões HTML

para a B) Na prática, o que importa mesmo não é a amarração entre uma tag e seu conteúdo, mas
<image>
inserção de imagens. sim o resultado final, ou seja, independente das tags usadas, o importante é o que será exibido
no navegador.

 Tabela 4: Exemplos
de tags obsoletas. C) A criação de novas tags com teor semântico na HTML5, como <header> e <footer>, teve
como finalidade apenas dar um novo nome à tags já existentes e amplamente utilizadas, já que

Atenção! Para visualização completa da tabela utilize a rolagem horizontal
a maioria das páginas Web possuía um cabeçalho e um rodapé.
Atualmente consideradas obsoletas, as tags <center> e <font> ainda são usadas
em muitas
D) Um código HTML não pode ser dito semântico caso não faço uso de todas as tags definidas
páginas HTML. Ambas se enquadram no conceito, já mencionado, de que não é
função da
HTML cuidar da apresentação. Logo, as duas foram substituídas por propriedades
CSS. na HTML5.

GABARITO
VERIFICANDO O APRENDIZADO 1. Marque a alternativa incorreta e que não pode ser usada para definir o que são as
tags:.

A alternativa "D " está correta.

1. MARQUE A ALTERNATIVA INCORRETA E QUE NÃO PODE SER USADA

PARA DEFINIR O QUE SÃO AS TAGS:.

As tags são elementos que servem para marcar quais informações uma página exibe. Por DE DEFINIÇÃO
exemplo: a marcação <h1>Título de um bloco de texto</h1> insere um título em uma página
Usadas quando precisamos listar itens e atribuirmos uma descrição a eles.
HTML. Estes elementos são definidos, padronizados e mantidos em especificações suportadas
pela W3C.

2. Em termos de semântica, na utilização de tags, assinale a alternativa correta:

 ATENÇÃO
A alternativa "A " está correta.

Outra característica importante das listas é que a sua

marcação HTML é composta por uma tag
de container, ou tag “pai”, e por seus
itens ou “filhos”. Além disso, a lista de definição possui
A HTML semântica tem como objetivo principal descrever o significado do conteúdo contido em
ainda um terceiro
item, que é justamente o utilizado para descrevê-lo.
um documento HTML, a fim de torná-lo mais claro para os dispositivos que processam o
documento e também para o programador que o criou ou precisará modificá-lo. Na tabela 5, podemos ver as tags de cada tipo de lista:

Tipo Tag Container Tag Item Tag Descrição

MÓDULO 3
Ordenadas <ol> <li> --

 Demonstrar as tags
complementares às tags básicas

em uma página Web Não Ordenadas <ul> <li> --

Neste módulo, daremos continuidade à estruturação de conteúdo com a utilização de tags.

Dessa forma, novas tags, para a representação de novos tipos de conteúdo, serão
apresentadas: as listas, as tabelas, os vídeos e os áudios. Definição <dl> <dt> <dd>

 Tabela 5: Tags
utilizadas para a representação de listas

LISTAS 
Atenção! Para visualização completa da tabela utilize a rolagem horizontal

Na figura 3, podemos ver como as tags acima são exibidas no navegador:

O HTML fornece suporte para a representação visual de três tipos de listas: as
ordenadas, as
não ordenadas e as de
definição.

ORDENADAS LISTA ORDENADA

Usadas quando desejamos listar dados com a necessidade de representar a sua
ordenação de
forma numérica ou alfabética. <ol>

<li> Primeiro Item da lista </li>

NÃO ORDENADAS <li> Segundo Item da lista </li>

Usadas quando não há necessidade de listar ordenadamente.

<li> Terceiro Item da lista </li>
<dt> Terceiro Item da lista não ordenada </dt>

</ol>
<dd> Descrição do terceiro elemento </dd>

</dl>

Resultado:
Resultado:
Primeiro Item da lista
Primeiro Item da lista não ordenada
        Descrição do primeiro elemento
Segundo Item da lista
Segundo Item da lista não ordenada
        Descrição do segundo elemento
Terceiro Item da lista
Terceiro Item da lista não ordenada
        Descrição do terceiro elemento

 Figura 3 – Tags e
representação visual das listas no navegador
LISTA NÃO ORDENADA

<ul>

<li> Primeiro Item da lista não ordenada </li>

CABE DESTACAR QUE TANTO O SÍMBOLO DE

<li> Segundo Item da lista não ordenada </li>
ORDENAÇÃO (A
NUMERAÇÃO, NO EXEMPLO ACIMA),
<li> Terceiro Item da lista não ordenada </li>
NO CASO DA PRIMEIRA, QUANTO O SÍMBOLO VISUAL
</ul>

(O BULLET
–
PEQUENO CÍRCULO PRETO), NO CASO
Resultado:
DA SEGUNDA, PODEM SER ALTERADOS COM A
Primeiro Item da lista não ordenada UTILIZAÇÃO DE
CSS.

Segundo Item da lista não ordenada

Terceiro Item da lista não ordenada

 ATENÇÃO

Este elemento permite que sejam criadas listas dentro de

listas – as chamadas listas
aninhadas (nested lists).
LISTA DE DEFINIÇÃO

<dl>

<dt> Primeiro Item da lista não ordenada </dt>

TABELAS
<dd> Descrição do primeiro elemento </dd>

<dt> Segundo Item da lista não ordenada </dt>

Quando precisamos lidar com dados tabulares em uma página web utilizamos tabelas. As
<dd> Descrição do segundo elemento </dd>

tabelas usadas nesse documento são exemplos do tipo de dado e também da apresentação
obtida ao utilizarmos tais elementos na HTML. de
estruturação.

 Tabela 6: O
elemento Tabela e suas tags

ESTRUTURA DAS TABELAS 

Atenção! Para visualização completa da tabela utilize a rolagem horizontal

As tabelas, normalmente, são organizadas de maneira uniforme: linhas sobre

linhas, colunas
A marcação HTML relacionada às tabelas contém, além da tag principal <table>,
outras tags. A após colunas, célula ao lado de célula. Logo, as colunas
costumam ter a mesma largura,
principal define o container geral. assim como as linhas a mesma altura. Entretanto, há
situações onde é preciso mudar um
pouco essa organização. Por exemplo, pode ser
necessário mesclar duas colunas ou mesmo
De forma hierárquica, a seguir temos as tags para a definição de linhas <tr> e
colunas <td>.
duas ou mais linhas.
Com estas três tags é possível representarmos uma tabela simples.
Entretanto, há tags
adicionais que podem ser usadas e que ajudam a melhor organizar o
conteúdo. Para isso, fazemos uso de alguns atributos - que têm função de destaque ao tratarmos das
tags relacionadas às tabelas. São eles: rowspan e
colspan. Como o próprio nome indica,
A tabela abaixo apresenta as tags de marcação, e suas respectivas funções, relacionadas
às
estes atributos têm a função de
expandir as linhas ou colunas. Sua declaração é acompanhada
tabelas:
de um número que indica a
quantidade de células a serem utilizadas para expansão da linha
ou coluna.
Tag Função

<table> Container principal da tabela

 COMENTÁRIO
Representa as linhas, sendo composta pelas tags relacionadas às
<tr> Ao final deste módulo teremos a oportunidade de
praticarmos um pouco mais e vermos como
colunas.
esses atributos funcionam.

<td> Representa as colunas e precisa ser inserida dentro da tag de linha.

AS TABELAS E A SEMÂNTICA
Também representa colunas e é usada para exibir o título de uma coluna,
possuindo, neste sentido, função semântica. Assim como a tag <td>,
deve
<th> Podemos dizer que as tabelas foram, desde a criação do código HTML, o elemento mais
estar contida em uma tag de linha. Este elemento apresenta estilos
utilizado fora de sua função semântica. Isto se deve ao fato de que a estrutura básica
de uma
próprios, sendo renderizado de forma diferente das colunas comuns.
página HTML lembra muito a estrutura de uma tabela: cabeçalho, rodapé, seções
(linhas) etc.
Logo, foi prática comum ao longo de muitos anos a codificação de páginas
web completas
Armazena o cabeçalho da tabela, sendo composto por linhas e colunas. fazendo-se uso de tabelas. Além de ir de contra a semântica, tal uso traz
consigo outros
<thead> Este
elemento, a exemplo do que vimos anteriormente, tem função problemas, como o peso das páginas e a redução da acessibilidade, entre
outros.
semântica em
termos de estruturação de conteúdo.

<tfoot> Armazena o rodapé da tabela, tendo também função semântica em termos

 anteriormente, chegou a hora de codificarmos.
No editor de texto, comece criando uma nova
seção no seu HTML e insira:

uma tabela simples;

uma tabela que contenha título;

uma tabela com cabeçalho e rodapé;

uma tabela com linhas e colunas expandidas;

um exemplo completo;

salve o arquivo e veja o resultado no navegador.

VAMOS PRATICAR?
Assista ao vídeo a seguir:

Fonte:Shutterstock
 Figura 4
– Demonstração de aplicação no editor.

APLICAÇÃO
Como vimos, um documento HTML pode conter tanto tabelas simples quanto mais complexas.
Tendo como base o arquivo HTML usado nos módulos anteriores e o conteúdo visto
 CONTROLE DO CONTEÚDO (VÍDEO OU ÁUDIO)
INCORPORADO PELO NAVEGADOR, ALÉM DE
DEFINIREM
ALGUNS COMPORTAMENTOS, COMO O
AUTOPLAY E O LOOP, QUE SÃO AUTOEXPLICATIVOS.

Os três atributos aqui descritos são apenas uma prévia, uma vez que há alguns outros
disponíveis. Outros componentes importantes, contidos na especificação do HTML5, são os
eventos que permitem o controle de mídia embutida com a utilização de Javascript. São os
chamados “Media Events”.

Por TippaPatt/Shutterstock
TEORIA DA PRÁTICA
Ao final deste módulo, vamos inserir novas tags em nosso arquivo HTML. Inclua ao menos
MÍDIAS: VÍDEO E ÁUDIO uma tag de vídeo e uma de áudio. Além disso, experimente inserir e remover os controles
mencionados, sempre salvando e comparando os resultados no navegador.
O suporte à multimídia na HTML vem melhorando ao longo dos anos e versões.
Com o
<!doctype html>

advento da HTML5, tornou-se possível, de forma muito simples, incorporar

vídeo e áudio em
<html lang = “pt-BR”>

uma página Web. Para isso, e conforme visto na figura 5,

são usadas as tags <video> e
<head>

<audio>.
<meta charset=”utf-8”>

<vídeo src= “http://www.youtube.com/watch?v=20SHvU2PKsM” controle></vídeo>

</head>

<áudio src= “/áudios/sample.ogg” controls autoplay loop> </audio>

<body>

 Figura 5 – Tags de vídeo

e áudio no HTML <video src=”small.mp4” controls> < /video>

<audio src=”sample.ogg” controls autoplay loop> < /audio>

Como visto, os atributos também têm suma importância ao fazermos uso das tags de vídeo e
</body>

áudio. No exemplo acima, temos, inicialmente, o atributo “src” – que informa o endereço,
</html>

podendo ser de um site, ou mesmo de um arquivo local – no seu computador ou no servidor

onde a página Web fica hospedada.

VERIFICANDO O APRENDIZADO
OS ATRIBUTOS “CONTROLS”, “AUTOPLAY” E
“LOOP”, QUE SÃO ESPECÍFICOS PARA ESTE TIPO DE
MÍDIA EM QUESTÃO, FORNECEM SUPORTE AO
 D) As tags HTML colspan e rowspan, quando inseridas dentro das tags e , permitem modificar
1. QUAL FRAGMENTO DE CÓDIGO HTML, ENTRE AS OPÇÕES ABAIXO,
a organização das linhas e colunas da tabela, mesclando o seu conteúdo.
DEVE SER UTILIZADO PARA REPRESENTAR A LISTA APRESENTADA NA
FIGURA ABAIXO:

GABARITO
CAPÍTULO I 1. Qual fragmento de código HTML, entre as opções abaixo, deve ser utilizado para
representar a lista apresentada na figura abaixo:

PRIMEIRA SEÇÃO

Capítulo I
SEGUNDA SEÇÃO

Primeira Seção
TERCEIRA SEÇÃO
Segunda Seção

CAPÍTULO II
Terceira Seção

CAPÍTULO III
Capítulo II

A) <ol><li><ol><li></li><li></li><li></li></ol></li><li></li><li></li></ol> Capítulo III

B) <ul><li><ol><li></li><li></li><li></li></ol></li><li></li><li></li></ul>
A alternativa "A " está correta.
C) <ul><li><ul><li></li><li></li><li></li></ul></li><li></li><li></li></ul>

D) <ol><li><ul><li></li><li></li><li></li></ul></li><li></li><li></li></ol>
Os elementos de listas no HTML são bastante flexíveis, além de abrangentes, permitindo a
estruturação das mais variadas combinações, incluindo listas aninhadas. Logo, é possível
incluir uma lista aninhada − um elemento “filho” de um item de outra lista.
2. AS LINHAS E COLUNAS DE UMA TABELA HTML PODEM SER
2. As linhas e colunas de uma tabela HTML podem ser modificadas (mescladas) para
MODIFICADAS (MESCLADAS) PARA PERMITIR UMA ORGANIZAÇÃO NÃO
permitir uma organização não uniforme. Assinale a opção verdadeira:
UNIFORME. ASSINALE A OPÇÃO VERDADEIRA:
A alternativa "B " está correta.

A) Para modificar a organização de uma tabela basta inserir novas tabelas aninhadas.

B) Os atributos colspan e rowspan são utilizados para modificar a organização de colunas e Os atributos têm papel importante dentro da HTML. Combinados às tags, eles informam como
linhas em uma tabela. elas devem se comportar.

C) A organização de linhas e colunas de uma tabela pode ser modificada com a utilização de
tags HTML como as listas, por exemplo.
MÓDULO 4

 Aplicar um formulário em uma

página Web

FORMULÁRIOS: COMPOSIÇÃO E
VALIDAÇÃO
Tudo o que vimos até esse ponto nos permitiu criar um documento HTML estruturado contendo

textos, listas, tabelas, vídeo e áudio. Neste módulo, falaremos sobre o

Formulário. Por Rawpixel.com/Shutterstock

Este elemento é um dos mais utilizados para prover interação entre usuários e uma página
Web ou até mesmo um aplicativo mobile.

ESTRUTURA INICIAL DO FORMULÁRIO

 EXEMPLO A exemplo do que vimos com as tabelas, o formulário é composto por uma tag principal, um
container, e várias tags “filhas”.

Usamos formulários, por exemplo, quando: visitamos um

site e desejamos solicitar uma Tags como campos de texto, de uma ou mais linhas; campos de seleção; e botões fazem parte
informação adicional ou um serviço; nos
cadastramos para receber e-mails com ofertas ou de sua estrutura.
realizar uma reclamação.
Além disso, para maior clareza, também usamos tags para informar a função dos campos do
Ao longo deste módulo, veremos os elementos básicos necessários para a construção de formulário. São as chamadas “label”. A tabela a seguir lista as tags comumente usadas em
um
formulários HTML. formulário:

Tag Função

<form> Container principal do formulário.

Campo do formulário. Como há diversos tipos de campos, fazemos uso

<input> do
atributo “type” para informar o tipo a ser utilizado – conforme
veremos
mais adiante.
 <textarea> Campo de texto de múltiplas linhas.

<select> e Campos de seleção, onde o container é definido pela tag <select> e

os
<option> itens pela tag <option>.

Campo de botão. Permite que uma ação seja executada no formulário –

button
enviar o formulário, limpar os dados etc.

Usado para definir um título, uma legenda, que descreva para que serve
label
cada campo do formulário.
 Figura 6: Formulário
HTML – Elementos e atributos

 Tabela 7:
Estrutura básica de tags do elemento formulário É fácil identificar para o que serve cada campo do formulário anterior ao
lermos o conteúdo da
tag <label>. Além disso, a tag <fieldset>
cria seções dentro do formulário, ajudando a separar

Atenção! Para visualização completa da tabela utilize a rolagem horizontal
os campos no
código e a visualizar a página no navegador.

Isso fica ainda mais claro quando vinculamos ao <fieldset> a tag <legend>.

Como vimos, é necessária uma atenção especial aos atributos quando tratamos de
formulários.
CONHECENDO MELHOR OS ELEMENTOS E
Para melhor visualização e entendimento, todos os atributos contidos no código mencionado
ATRIBUTOS DO FORMULÁRIO são descritos na tabela 8:

Na figura 6 temos o fragmento HTML correspondente a um formulário. Nela é possível ver as Tag Atributo Função do atributo
tags mencionadas anteriormente, assim como algumas tipificações nos campos e novos
atributos. Falaremos sobre ambos a seguir:
Define a URL (endereço) para a qual os dados do
<form> action
formulário serão
enviados.

Define o método HTTP (POST ou GET) para envio dos

<form> method
dados.
 <label> for Vincula a tag <label> ao campo ao qual ela se refere. HIDDEN
Este vínculo
faz com que seja possível clicar na label
Esconde o campo para não ser exibido no navegador.
para ativar o campo
relacionado.
CHECKBOX
Usado para seleção de valor através de click/check.
minlength, Definem a quantidade de caracteres mínima e máxima,
<input>
maxlength respectivamente,
permitida em um campo.
RADIO
Usado para seleção exclusiva de valor – quando é apresentada mais de uma
opção, apenas
uma poderá ser selecionada, ao contrário do tipo “checkbox”.

<input>, Define o tipo do campo e, sobretudo, como ele se

type SUBMIT
<button> comporta.
Associada à tag <button>, dispara o evento que envia/submete o
formulário.

RESET
Este atributo também pode ser utilizado na tag <input>.
Associada à tag <button>, dispara o evento que limpa os valores do
formulário.
Ele define
o valor do campo.
No caso da <option>, os
seus valores possíveis são previamente
definidos quando BUTTON
<option> value
a página é codificada. Já na <input>, embora
também
Uma tag <input> pode ser do tipo “button” – exercendo, assim, a mesma
função da tag
possa ser previamente definido, normalmente é o usuário
<button>.
quem
define o seu valor.
Ao longo de vários anos, havia apenas esses tipos disponíveis na HTML. Com isso, algumas
necessidades − fossem de inserção de tipos de dados específicos, fossem de validação de
 Tabela 8:
Formulário HTML – Tags básicas e seus atributos valores, conforme veremos mais adiante − não podiam ser supridas apenas com a utilização


Atenção! Para visualização completa da tabela utilize a rolagem horizontal de tags, sendo necessário combinar códigos Javascript e CSS. Por exemplo: um campo para
seleção de data.

Além disso, novos tipos de dados, com características específicas, ganharam importância
ao
longo dos anos. Podemos citar, como exemplo, o e-mail. Embora seja um campo de texto,
ele
O ATRIBUTO “TYPE” possui um padrão de composição próprio, como o uso de @, entre outras
características.

Este atributo, dada a sua importância, precisa ser visto de forma aprofundada. Como já
dito,
além de definir o tipo do campo, ele também determina como este se comporta. No
código
apresentado na tabela é utilizado apenas o tipo “text”, que, no caso da tag
<input>, NOVOS ATRIBUTOS E TIPOS
corresponde ao seu valor padrão.

Alguns outros tipos comuns são: Pensando nas deficiências citadas anteriormente, e como é comum na evolução da HTML, a
HTML5 definiu novos tipos de entrada e também novos atributos relacionados a
formulários.
PASSWORD
Entre eles, podemos destacar:
Mascara o texto com asteriscos.
 Atributos ser usado em conjunto com o
atributo
pattern.

Atributo Função Comentário

Inserir datas com o fuso

datetime horário em UTC a partir de
Exibir um texto no campo de utilizado para dar uma dica ao
placeholder um calendário.
input. usuário sobre o dado a ser inserido.

Inserir datas sem fuso

Determinar se um campo é utilizado na validação dos dados de
required date horário a partir de um
obrigatório. um formulário.
calendário.

utilizado quando desejamos que, ao

Cria um componente diferente do
autofocus Fixar o foco no campo. carregar o formulário, um
imput normal, em que, por meio de
determinado
campo seja focado. number Inserir números.
setas,
os números podem ser
incrementados ou decrementados.

Validar o valor de um campo

com base em uma  Tabela 9: Exemplos
de novos atributos e tipos de dados definidos na HTML5
O campo de tel. é um bom exemplo
expressão regular.

Atenção! Para visualização completa da tabela utilize a rolagem horizontal
de utilização desse atributo. Com
(As RegEX – expressões
ele
podemos, por exemplo,
pattern regulares – podem ser
determinar a quantidade de
consideradas um recurso de
caracteres e o formato
esperado
linguagem de programação  COMENTÁRIO
para um campo.
para a análise e
manipulação de texto.) Uma lista completa dos atributos e tipos pode ser
encontrada nas referências mencionadas na
seção Explore +.

Tipos

VALIDAÇÃO DE FORMULÁRIOS
Tipo Função Comentário
Para explicarmos a criação de um formulário HTML, apresentamos tags e atributos que nos
permitem montar um formulário já funcional, pronto para ser preenchido e submetido.
tel Inserir números de telefone. Para uma melhor usabilidade, deve
Entretanto, há um outro aspecto relacionado a esses elementos que precisa ser discutido:
A
validação de dados.

A IMPORTÂNCIA DA VALIDADE DOS DADOS

CONCORRE COM A IMPORTÂNCIA DA UTILIZAÇÃO
DAS TAGS CORRETAS E QUE PERMITAM A MELHOR
EXPERIÊNCIA POSSÍVEL AOS USUÁRIOS. PODEMOS
DIZER QUE, AO PENSARMOS NA ESTRUTURA DO
FORMULÁRIO, NAS TAGS E ATRIBUTOS, ESTAMOS

Por stoatphoto/Shutterstock
PENSANDO EM QUEM VAI PREENCHER O
FORMULÁRIO.

COMO FUNCIONA A VALIDAÇÃO?

 EXEMPLO A validação é um processo que pode, e deve, ocorrer tanto no lado cliente – no navegador
–
quanto no lado servidor. Pensando no lado cliente, essa ação ocorre assim que o
formulário é
Imagine que podemos permitir a inserção de uma data de
nascimento através da digitação de submetido, antes que os dados sejam recebidos pelo servidor de destino.
valores ou a partir da seleção em um elemento
do tipo calendário. Agora pense em quem vai
Até há bem pouco tempo, para validar um formulário era necessário fazer uso de
Javascript.
receber as informações provenientes
do formulário.
Entretanto, na HTML5 é possível fazê-lo de forma nativa, sem o uso de
linguagens de
Em um campo de texto simples, sem nenhum tipo de padrão,
serão recebidas as mais variadas programação.
combinações de dados.

Por exemplo: 01 de janeiro de 1980;

01/01/1980; 01011980 etc. Imaginando esse cenário, é
possível entender a
importância da validação das informações.
TIPOS DE VALIDAÇÃO

Na HTML5 há dois tipos de validação possíveis:

Verifica se o dado inserido em um campo é consistente com o seu tipo e/ou padrão
(pattern).

Verifica se um campo obrigatório foi preenchido.

 EXEMPLO
Como exemplo para a primeira validação, podemos citar
novamente o elemento input do tipo
“e-mail”.

Um endereço de e-mail é um dado que possui uma formatação

pré-definida: precisa ter o “@”;
precisa ter a extensão de domínio “.com /
.com.br” etc.

Logo, declarar uma tag input com o type “e-mail” faz com
que, naturalmente, seja validado o
seu conteúdo.

Algo semelhante acontece com a utilização do atributo pattern, sendo que, neste caso, é
você
quem define o que um campo precisa conter para ser considerado válido. Por exemplo:
determinar o formato desejado para um campo que receba um número de telefone.

Você pode definir que ele contenha o DDD, com dois caracteres numéricos, seguido por dois
conjuntos de números – um contendo 5 e outro contendo 3 ou 4 caracteres – o que geraria
este código: pattern=“[0 − 9]2 [0-9]{5}-[0-9]{3,4}$”.

Além da validação pelo tipo de dado, há também a validação de campos obrigatórios. Logo,
quando precisamos que determinado campo não fique em branco, usamos o atributo
“required”. VAMOS PRATICAR?
Assista ao vídeo a seguir:

 ATENÇÃO

O comportamento padrão da HTML5 é validar os dados quando

ocorre o envio do formulário.
Entretanto, é possível desativar essa
funcionalidade. Para isso, deve ser atribuído o atributo
“novalidate” à tag
<form>.

VERIFICANDO O APRENDIZADO
 partir de ações do usuário, dados sejam enviados/informações sejam cadastradas ou
1. SOBRE A COMPOSIÇÃO E O COMPORTAMENTO DO FORMULÁRIO
comportamentos e conteúdo da própria página sejam modificados – como acontece, por
HTML É INCORRETO AFIRMAR QUE:
exemplo, quando filtramos o resultado de uma pesquisa de produtos em um site de e-
commerce. Embora existam diferentes tipos de campos de formulários, permitindo a inserção
A) É formado por um ou mais elementos que permitem ao usuário interagir com a página,
padronizada de diferentes tipos de dados, é prática recomendada validar os seus dados antes
selecionando opções, inserindo textos etc.
de serem enviados/submetidos.
B) O formulário HTML, por ser um elemento de interação, na maioria das vezes envia os dados
2. Sobre a validação de formulários na HTML5, assinale a afirmativa verdadeira:
nele contidos para um servidor Web, responsável por receber e tratar os dados.
A alternativa "B " está correta.
C) Apenas os formulários validados podem ser enviados/submetidos.

D) Possui atributos que definem o endereço/URL para onde os dados serão enviados e o
método como serão enviados. Uma das grandes novidades da HTML5 foi implementar, nativamente, a validação de dados em
um formulário − tarefa que, nas versões anteriores, só era possível no lado cliente, com a
utilização de Javascript.

2. SOBRE A VALIDAÇÃO DE FORMULÁRIOS NA HTML5, ASSINALE A

AFIRMATIVA VERDADEIRA:

A) A HTML5 é tão flexível que permite ao usuário, o visitante de uma página, decidir quando CONCLUSÃO
ele deseja ou não que o formulário que está preenchendo seja validado.

B) A validação de formulários na HTML5 é habilitada por padrão. Entretanto, é possível

desabilitar este recurso com a utilização de um atributo na tag <form>.

C) A partir da HTML5, para facilitar o trabalho do desenvolvedor, novas tags foram criadas para
CONSIDERAÇÕES FINAIS
que a validação aconteça apenas no lado servidor.
Neste tema, foram apresentados os conceitos de linguagens de marcação, mais
D) Como a validação de formulários na HTML5 é habilitada por padrão, automaticamente todos
especificamente da HTML. Ao longo dos tópicos, além dos conceitos e de sua história,
os campos do formulário serão marcados como obrigatórios e, portanto, deverão ser
conhecemos a sua estrutura e os elementos que a compõem, como tags e atributos. Para
preenchidos.
melhor fixação de cada conteúdo, utilizamos exercícios práticos.

GABARITO

1. Sobre a composição e o comportamento do formulário HTML é incorreto afirmar que:

A alternativa "C " está correta.

Os formulários são compostos por tags que permitem a entrada e seleção de dados. Tal
funcionalidade concede a este elemento a característica de interatividade, possibilitando que, a
 AVALIAÇÃO DO TEMA:

REFERÊNCIAS
FREEMAN, E.; ROBSON, E. Use a Cabeça! Programação em HTML5:
desenvolvendo
aplicativos para web com Javacript. Rio de Janeiro: Alta Books, 2014.

W3SCHOOLS. HTML Tutorial.

NEWCOMB, S.; KIPP, N.; NEWCOMB, V. The “HyTime” Hypermedia/Time-Based Document

Structuring Language. Communications of the ACM, no. 11, vol. 34, pp.
67-83, 1991.

EXPLORE+
Recomendação do texto: Estrutura de documentos e sites − MDN.
página web. Aplicação de CSS a Boxes em uma página web. Conceito de
e pseudo-elementos. Aplicação de estilos CSS
Para conhecer as referências das tags HTML, leia: HTML Element Reference −
posicionamento. Conceito
W3Schools.
DEFINIÇÃO
Conceito de Folhas de estilo/CSS. Recursos disponíveis nas Folhas de estilo/CSS. Conceito de
Box Model em uma
seletores CSS. Conceito de pseudoclasses
utilizando pseudoclasses e pseudo-elementos. Propriedades CSS de
de frameworks CSS. Apresentação de frameworks CSS.

PROPÓSITO
CONTEUDISTA
Compreender o que são Folhas de estilo – CSS e como podem ser utilizadas para cuidar da
Alexandre de Oliveira Paixão
apresentação, layout e estilo de páginas HTML.

 CURRÍCULO LATTES

PREPARAÇÃO
Para aplicação dos exemplos, será necessário um editor de texto com suporte à marcação No ambiente Web, a HTML é a linguagem responsável pela estrutura do conteúdo de uma
HTML. No sistema
operacional Windows, é indicado o Notepad++; no Linux, o Nano Editor. página. Embora seja capaz
também de organizar o conteúdo visualmente, é função da CSS
cuidar desse aspecto e de tudo relacionado ao
estilo e layout da página.

Com a CSS, é possível, por exemplo, alterar a forma e posicionamento dos elementos, as

OBJETIVOS cores, tipos e tamanhos

de fontes, e muito mais.

MÓDULO 1
MÓDULO 1
 Identificar os fundamentos da CSS
Identificar os fundamentos da CSS

MÓDULO 2 COMO A CSS FUNCIONA?

Reconhecer os recursos de cores, texto, fontes e webfontes da CSS3 A CSS, ou Folhas de Estilo em Cascata (Cascading Style Sheets), é uma linguagem de estilo
que fornece total
controle sobre a apresentação de um documento escrito em HTML. Com ela,
é possível, por exemplo, alterar a
forma e posicionamento dos elementos, as cores, tipos e
tamanhos de fontes e muito mais.
MÓDULO 3
A CSS permite a aplicação seletiva de estilos a elementos em uma página HTML. Isso significa
dizer que um ou
mais estilos podem ser aplicados em um documento inteiro ou mesmo em
Identificar os conceitos de Box Model, pseudoclasses, pseudo-elementos e posicionamento
apenas parte dele. Além disso, um mesmo
tipo de elemento pode ter, ao longo do documento,
diferentes estilos.

MÓDULO 4

Reconhecer Frameworks CSS

INTRODUÇÃO
A CSS, ou Folhas de Estilo em Cascata (Cascading Style Sheets), é uma linguagem de estilo
que fornece total
controle sobre a apresentação de um documento escrito em HTML.
SINTAXE DA CSS

Para aplicar um estilo CSS a um elemento específico, é necessário identificá-lo e apontar qual

O conjunto de estilos aplicados a um seletor é envolvido por chaves “{“ e “}”.
de suas
propriedades queremos alterar e qual valor queremos atribuir-lhe. Essas três
Vamos ver a seguir um exemplo de duas propriedades dadas à tag <p> e o resultado dessas
informações definem a sintaxe da
CSS, conforme pode ser visto no exemplo a seguir.
declarações no navegador.

Fonte: Elaborado pelo autor no Notepad++.

 Figura 2: Demonstração da aplicação de estilos.

Fonte: Elaborado pelo autor.

 Figura 1: Sintaxe da CSS.

Tendo o exemplo anterior como base, podemos perceber que, para aplicarmos um estilo SELETORES
utilizando CSS, são necessários:
Vimos nos exemplos anteriores um estilo sendo declarado em uma tag HTML <p>. Nós nos
O seletor: nesse caso, a tag HTML <p>; referimos a essa tag como
sendo o seletor ao qual o estilo foi aplicado. Há muitos outros
seletores disponíveis além daqueles
correspondentes às tags HTML, conforme veremos a
Ao menos uma propriedade: a cor de fundo (background-color);
seguir.

Ao menos um valor para a propriedade: blue.

Essa declaração de estilo faria com que todas as tags <p> do documento apresentassem a cor SELETORES CLASS E ID
azul ao fundo. O
exemplo utilizou apenas uma declaração (propriedade + valor), mas é
possível inserir em conjunto várias
outras. O seletor de classe é definido a partir da declaração do atributo “class” em um elemento HTML.

Além dos aspectos mencionados acima, há outros importantes quanto à sintaxe: Já o de

identificação é definido com o atributo “id”.

A propriedade e seu valor devem ser separados por dois pontos “:”; Importante frisar que, embora um elemento possa ter mais de uma classe, terá somente um
identificador.


Uma declaração deve ser separada da declaração subsequente com a utilização do ponto-e-
Em termos de nomenclatura para a definição do nome da classe ou do identificador, não existe
uma regra a
ser seguida. Procure utilizar nomes que façam sentido, que tenham relação com a
função do elemento na
página e que, de fato, ajude a identificá-lo ou classificá-lo.

vírgula “;”;
Logo abaixo, podemos ver um exemplo de sintaxe correspondente à declaração desses dois “class” pode ser aplicada a um ou
vários elementos.
atributos na HTML e
na CSS.
Embora o navegador não faça uma verificação se um mesmo “id” foi utilizado em diferentes
Na primeira parte da imagem, é apresentado um fragmento de código HTML. Repare que uma elementos, tal método
pode trazer alguns problemas de estilização e comportamento, uma vez
mesma classe, a
“texto vermelho”, foi atribuída à tag <h1> e a uma das tags <p>. Com isso, que esse seletor também é bastante usado
pelo Javascript. Frente a isso, adote a boa prática
vemos que uma classe
pode ser atribuída a mais de um elemento. Agora note a sintaxe para de definir identificadores únicos.
atribuição de múltiplas classes a um
elemento na segunda tag <p>, à qual foram atribuídas as
classes “texto_descricao” e
“texto_vermelho”.

Em relação ao código CSS, veja que o seletor de ID é representado por uma “#” e o de class SELETORES DE ATRIBUTO
por um “.”,
seguidos de seus nomes. Além disso, foram apresentadas duas formas de sintaxe
que produzirão o mesmo efeito.
A diferença entre elas é que, na segunda, o nome da tag à Esses seletores utilizam nomes de atributos dentro de colchetes, sendo possível combiná-los
qual a identificação ou classe foi atribuída
precede o respectivo sinal. com valores.
Abaixo são mostrados alguns dos seletores de atributo disponíveis:

[checked] - Seleciona todos os elementos que possuem o atributo “checked”;

[type=’text’] - Seleciona todos os elementos do tipo “text”.

Os seletores de atributo são bastante flexíveis, permitindo inúmeras combinações. Por

exemplo, é possível
usá-los para selecionar todas as imagens com uma determinada extensão,
selecionar todos os elementos com o
atributo title contendo determinado valor etc.

SELETORES BASEADOS EM RELACIONAMENTO

É possível declarar estilos utilizando a relação entre os elementos. A tabela a seguir mostra os

principais
seletores baseados em relacionamento.
Fonte: Elaborado pelo autor no Notepad++.
 Figura 3: Sintaxe de declaração de seletores de classe e identificação.
Seletor Seleção

RESTRIÇÕES E BOAS PRÁTICAS NA UTILIZAÇÃO DO H1 P

Qualquer elemento P que seja descendente (filho, neto etc.) de um
elemento H1.
IDENTIFICADOR

Embora não exista um padrão ou preferência quanto a utilizar o seletor “id” ou “class”, é
H1 > P Qualquer elemento P que seja filho de um elemento H1.
importante frisar
novamente que um “id” deve ser aplicado a apenas um elemento, enquanto a
 sempre dar preferência às primeiras. A seguir são apresentadas
algumas das propriedades
Qualquer elemento P que seja o próximo irmão de um elemento H1 (ou mais comuns da CSS.
H1 + P
seja, o próximo filho de um mesmo pai).

Propriedade Função
 Atenção! Para visualização
completa da tabela utilize a rolagem horizontal

Tabela 1: Principais seletores baseados em relacionamento.

Estilizar o fundo de elementos. Para tal há uma série de
Para uma melhor compreensão quanto à descendência e parentesco mencionados acima, veja
Background propriedades, além do atalho “Background”, como “background-color”,
a figura abaixo. Essa é
uma representação simbólica da Árvore DOM (representação
“background-image” etc.
estruturada do documento HTML em formato de árvore)
contendo elementos representando
tags HTML. Veja ainda a explicação de cada relação e aplicação dos seletores
baseados em
relacionamento.
Controla as bordas de um elemento, sendo possível definir suas
Border
cores, espessuras, entre outras propriedades.

Top, Bottom, Controlam o posicionamento, relativo ou absoluto, dos elementos em

Righ e Left relação a outros elementos.

Color Estila a cor do conteúdo textual de um elemento.

Font-family,
Há uma série de propriedades para estilizar o conteúdo textual de um
Font-size,
elemento no que diz respeito à fonte, como a família de fontes, seu

Font-weight,
tamanho, peso (mais clara ou mais escura - negrito) etc.
Fonte: Elaborado pelo autor. etc.

 Figura 4: Relação entre elementos em uma página HTML.

Height Definir a altura de um elemento.

PROPRIEDADES
List-style,
Existem inúmeras propriedades CSS, desde as definidas pela sua especificação, ditas List-style- Há algumas propriedades para estilizar as listas HTML.
propriedades padrão, até
as proprietárias, que funcionam apenas em alguns navegadores. A image, etc.
fim de garantir uma maior compatibilidade,
assim como otimizar o desenvolvimento, deve-se
 Margin Controla a distância em função da margem de um elemento para
outro.
INTEGRANDO A CSS À HTML
Há três formas usuais de aplicar estilos em um documento HTML fazendo uso de CSS: Inline,
Interna e Externa.
Além dessas, a HTML5 permite ainda a aplicação em Escopo. Vamos
Padding Controla a distância entre as bordas e o conteúdo de um elemento.
conhecer um pouco mais de cada uma delas?

Position Define como um elemento deve ser posicionado na página.

Muitas propriedades controlam o comportamento do conteúdo textual

Text-... de um elemento, como alinhamento (justificado, centralizado etc.),
aparência (sublinhado etc.) etc.

Width Definir a largura de um elemento.

Definir a profundidade de um elemento – usado, por exemplo, para

Z-index

sobreposição de elementos.
Fonte: Unsplash

 Atenção! Para visualização

completa da tabela utilize a rolagem horizontal
CSS INLINE
Essa forma implica em declarar o estilo CSS diretamente na tag, no código HTML. Veja a
Tabela 2: Lista de propriedades CSS mais comuns.
seguir um exemplo de
um estilo apresentado anteriormente sendo aplicado de forma Inline.

null

Fonte: Elaborado pelo autor no Notepad++.

 Figura 5: Aplicação de estilo Inline.

A declaração Inline faz uso do atributo “style” procedido por declarações separadas por ponto-
e-vírgula
“;”. Esse atributo pode ser usado em qualquer tag HTML.

CSS INTERNA
Também chamada de CSS Incorporada, é declarada na seção <head> do documento HTML.
 null

Fonte: Elaborado pelo autor no Notepad++.

 Figura 6: Aplicação de estilo CSS interna.

A declaração Inline faz uso do atributo “style” procedido por declarações separadas por ponto-
e-vírgula
“;”. Esse atributo pode ser usado em qualquer tag HTML.

CSS EXTERNA
Nesse caso, os estilos são declarados em um arquivo externo, com extensão “.css” e
vinculados ao documento
HTML por meio da tag <link> ou da diretiva @import dentro da tag
<head>. Ambos os exemplos podem ser
vistos logo a seguir:

null

Fonte: Elaborado pelo autor no Notepad++.

 Figura 7: Aplicação de Estilo Externa.

CSS EM ESCOPO
INTEGRANDO A CSS À HTML
Essa forma de aplicação de estilo foi criada a partir da HTML5. Com ela, é possível aplicar
estilos no
âmbito de escopo, ou seja, específicos para as seções da página onde foram
declarados, incluindo os seus
elementos filhos. No código abaixo, a tag <p> receberá os estilos
definidos, sendo a mesma regra válida
para outros estilos e elementos que, porventura,
venham a fazer parte da <div>.

null

Fonte: Elaborado pelo autor no Notepad++.

 Figura 8: Aplicação de estilo a nível de Escopo.

EFEITO CASCATA
Quando trabalhamos com CSS, é comum nos depararmos com a declaração conflitante de
estilos, ou seja,
diferentes definições de estilo para um mesmo elemento. Nessas situações,
entra em ação o Efeito Cascata.
Para entendermos a definição desse efeito, é preciso
abordarmos outros dois conceitos: herança e
especificidade.
HERANÇA

O CSS permite que a aplicação de propriedades a elementos pais seja herdada pelos seus
elementos filhos.
Peguemos como exemplo o código abaixo.

Fonte: Elaborado pelo autor no Notepad++.

 Figura 10: Exemplo de especificidade em CSS.

Perceba que o fragmento da Figura 9 foi adaptado. Antes, era aplicado o conceito de herança,
assim o texto
dentro da tag filha assumia o estilo definido para o seu pai. Agora, há um estilo

específico definido para

todas as tags <p> que sejam filhas de tags <div>. Com isso, ao
Fonte: Elaborado pelo autor no Notepad++.
visualizarmos o resultado no
navegador, teremos o texto solto na cor azul e o texto dentro da
 Figura 9: Exemplo de herança em CSS.
tag <p> na cor vermelha.
O resultado do fragmento de código mostrado anteriormente mostrará tanto o texto solto
Esse foi um exemplo simples. A CSS é bastante flexível e nos permite definir diferentes níveis
quanto o texto dentro
da tag <p> com a cor azul. Isso significa que a tag <p>herdou o estilo
de
especificidade. Entretanto, é importante termos cuidado com a sobreposição de estilos –
definido para o seu pai, a tag <div>.
diferentes estilos
definidos para um mesmo elemento em diferentes partes de nosso código
Essa capacidade de herança de estilos caracteriza o que chamamos de Efeito Cascata. CSS. A regra, nesse caso, é:
prevalecerá o estilo mais específico. No exemplo acima, a
primeira declaração (para a tag div) é
generalizada; a segunda (div p), específica.
Cabe destacar que nem todas as propriedades CSS podem ser herdadas pelos filhos. Um
exemplo são as
propriedades relacionadas à formatação das boxes (que veremos mais
adiante), como largura, altura, entre
outras.

DICAS SOBRE AS REGRAS DE PRECEDÊNCIA

A regra de precedência em relação às formas de inclusão da CSS segue a seguinte ordem:

ESPECIFICIDADE
Os estilos Internos e de escopo têm precedência sobre estilos em arquivos externos;
Para entender o que é a especificidade no âmbito das folhas de estilo, vamos recorrer a mais
um exemplo.
Os estilos Inline têm precedência sobre estilos internos, de escopo e externos.

Quanto aos seletores, a regra de precedência segue a seguinte ordem:

Seletores de elemento (utilização apenas do nome da tag) são os de menor precedência, por
serem muito genéricos;


Seletores de classe têm mais precedência que os de elemento;

 CSS HACK
Seletores de identificação têm mais precedência que os de classe.
Técnica de codificação usada para alterar o comportamento natural da CSS e para
ocultar ou mostrar uma
determinada declaração de acordo com o navegador, sua versão
ou recursos disponíveis.
!IMPORTANT

Veja este novo exemplo:

CSS3
A CSS, atualmente, está em sua terceira versão, a CSS3. Dentre as diversas novidades dessa
versão, destacam-se:

Melhorias nos seletores, com novas possibilidades de seleção: primeiro e/ou último
elemento, elementos pares ou ímpares etc.;

Efeito gradiente e de sombra em textos e elementos;

Bordas arredondadas;

Manipulação de opacidade;

Fonte: Elaborado pelo autor no Notepad++.

 Figura 11: Exemplo de aplicação do valor !important. Controle de rotação e perspectiva;

Seguindo as regras de Especificidade, sua aplicação resultaria na apresentação do texto

Animações.
dentro da tag
<p> na cor vermelha, pois sua declaração de estilo é mais específica que a
utilizada para a tag
<p> (texto azul), que é generalizada. Entretanto, a utilização do valor
!important, que se enquadra no
que chamados de css hack, na declaração mais generalizada,
faz com que esse estilo se sobreponha ao
específico. Logo, o código acima resulta na
apresentação do texto dentro da tag <p> na cor azul.
 compilação.

2. SOBRE A ESPECIFICIDADE, ASSINALE A OPÇÃO QUE

CORRESPONDE AO ESTILO MAIS ESPECÍFICO E QUE,
CONSEQUENTEMENTE, SERÁ APLICADO AO ELEMENTO < P > ABAIXO:

< DIV >

< P ID = "IDENTIFICADOR" CLASS = "CLASSE" >

TEXTO DO PARÁGRAFO.

< /P >

< /DIV >

A) div > p { background-color: blue; }

B) #identificador{ background-color: black; }

Fonte: Pixabay
C) p#identificador{ background-color: red; }

D) p.classe{ background-color:pink; }

VERIFICANDO O APRENDIZADO
GABARITO

1. A respeito da integração HTML e CSS, assinale a afirmativa correta:

1. A RESPEITO DA INTEGRAÇÃO HTML E CSS, ASSINALE A AFIRMATIVA A alternativa "A " está correta.
CORRETA:

A) Tanto a HTML quanto a CSS são renderizadas pelo navegador que, interpretando as tags
de marcação e os estilos que lhes são aplicados, as exibe em tempo de execução/requisição
pelo usuário.
Tanto a HTML quanto a CSS são linguagens interpretadas diretamente pelo browser e que não
precisam ser compiladas – exceto a CSS quando se utiliza pré-processadores.
2. Sobre a especificidade, assinale a opção que corresponde ao estilo mais específico e
que, consequentemente, será aplicado ao elemento < p > abaixo:

B) Todo o código CSS é compilado pelo servidor web que o transforme em código HTML nativo
< div >

a fim de que possa ser exibido no navegador.

< p id = "identificador" class = "classe" >

C) A CSS inline, incorporada e de escopo são renderizadas diretamente pelo navegador,

Texto do parágrafo.

juntamente com a HTML. Já a CSS externa, por não estar dentro do arquivo HTML, precisa ser
< /p >

compilada pelo servidor web antes de ser renderizada.

< /div >
D) Apenas a partir da HTML5, com a possibilidade de declaração de estilos em escopo, os
A alternativa "C " está correta.
navegadores passaram a dar suporte à renderização da CSS e do HTML sem necessidade de


Com um sistema de coordena cilíndrica HSL, com as notações hsl() e hsla().

As regras que utilizam seletores têm maior precedência. Entretanto, quanto mais específico,
maior a precedência. Logo, a opção c é mais específica que a opção b).

PROPRIEDADES DE COR
MÓDULO 2
Em quais elementos podemos definir cores.

Veja na tabela a seguir as principais, mas não as únicas, propriedades relacionadas à cor, bem
 Reconhecer os recursos de cores, texto, fontes e web fontes da CSS3
como os elementos aos quais podem ser aplicadas.
Até aqui, vimos o conceito de CSS, sua sintaxe e a forma de integração em páginas HTML.
Além disso, vimos
algumas propriedades mais comuns foram apresentadas. Neste módulo,
aprofundaremos o estudo das propriedades
relacionadas a cores, texto, fontes e web fontes, Serve para
Propriedade Onde pode ser utilizada
definir
tomando como base recente especificação CSS, a CSS3.

Elementos que contenham texto, como <h1> ...

color cor de textos
CORES <h6>, <p>, <header>, <section>, etc.

Com a utilização de CSS, podemos manipular as cores de elementos HTML, seja na aparência
das caixas, seja na
cor de texto. Para isso, há uma série de propriedades CSS disponíveis para background- cor de fundo
Aplica-se a qualquer elemento HTML.
diversos elementos, mas antes
vamos abordar as formas de definição de cores. color de elementos

border-color cor da borda Aplica-se a qualquer elemento HTML.

FORMAS DE ESCRITA DE CORES

As cores em CSS podem ser escritas de três modos:

cor da borda
outline-color Aplica-se a qualquer elemento HTML.
externa

Com palavras-chave, onde podem ser usados os nomes das cores (seguindo as  Atenção! Para visualização
completa da tabela utilize a rolagem horizontal

definidas pela especificação

CSS) ou a notação hexadecimal. Ex.: blue, red, Tabela 3: Lista das propriedades de cor e elementos onde podem ser aplicadas.
#FFFFFF etc;

Com um sistema de coordenada cúbica RGB, com as notações rgb() e rgba();

 Número – valor inteiro ou decimal que será multiplicado ao tamanho da fonte;
TEXTO
Comprimento – valor unidades como pixels, pontos, “em” etc.
A estilização de textos com o uso de CSS é dividida em duas partes:
A maneira mais recomendada de declarar o espaçamento entre linhas é utilizando o
valor em
Em linhas gerais, os navegadores aplicam estilos padrões quando renderizam conteúdos
número. Nele, o espaçamento será o resultado da multiplicação do valor definido pelo tamanho
textuais. A seguir, serão
vistas algumas propriedades CSS que alteram esse comportamento
da
fonte. Por exemplo: line-height: 1.5; font-size: 12px; onde valor 1.5 será multiplicado pelo
padrão.
valor da
propriedade font-size, resultando no valor de “18 px” de espaçamento.
O layout do texto – ou seja, espaçamento entre os caracteres e linhas; alinhamento em relação
ao container.

 ESPAÇAMENTO ENTRE LETRAS E PALAVRAS

As propriedades letter-spacing e word-spacing permitem alterar o espaçamento entre letras

Estilos das fontes – família, tamanho, efeitos como negrito etc.
e/ou palavras. Elas
podem assumir valores de comprimento – “px”, “pt” etc.
Em linhas gerais, os navegadores aplicam estilos padrões quando renderizam conteúdos
textuais. A seguir, serão
vistas algumas propriedades CSS que alteram esse comportamento
padrão.
FONTES
Em relação às fontes, há propriedades CSS para definir família, tamanho, estilo, entre outras
ALINHAMENTO DE TEXTO possibilidades.
Vamos conhecer as propriedades mais usadas?

A propriedade text-align é usada para controlar o alinhamento do texto em razão do contêiner FONT-FAMILY
no qual está
inserido. Essa propriedade é utilizada para definir a família da fonte utilizada em página web ou em

Tal propriedade pode assumir 4 valores: left, right, center e justify. Como os nomes indicam, partes de seu
conteúdo. Utilizando-a, é possível definir, por exemplo, desde uma única fonte a

essas
propriedades alinham o texto à esquerda, direita, ao centro ou de forma justificada. uma lista de fontes, onde
os seus valores são declarados em ordem de importância, da
esquerda para direita. Desse modo, caso uma
determinada fonte não esteja disponível no
dispositivo cliente, a próxima definida será usada, e assim
sucessivamente. Caso nenhuma das
fontes definidas estejam disponíveis no cliente, o navegador fará uso de
uma fonte padrão.
ESPAÇAMENTO ENTRE LINHAS
Estes são exemplos de famílias de fonte: Arial, Verdana, “Times New Roman” (fontes com
nomes compostos
devem ser declaradas utilizando-se aspas), entre outras. As fontes citadas
A propriedade line-height permite alterar o espaçamento vertical entre as linhas de texto. Seus
anteriormente e algumas outras
formam o conjunto de fontes chamadas de Fontes Seguras
valores
possíveis são:
para Web (Web Safe Fonts). Sempre que possível,
deve-se dar preferência à utilização dessas

Normal – valor padrão do navegador (entre 1 e 1.2 em relação ao font-size, dependendo fontes “seguras”, pois possuem suporte pela maioria dos
sistemas operacionais.

do navegador);
FONT-SIZE
A propriedade font-size é responsável por definir o tamanho do texto. Seus valores podem ser A declaração da regra @font-face é feita pela definição de duas principais propriedades: font-
definidos com
a utilização de diferentes unidades de medida, como pixels, porcentagem, “em” family e src. Na
primeira, definimos um nome para a família da fonte que estamos importando,
etc. usando-o ao longo do arquivo CSS.
A segunda aponta para a url onde o arquivo da fonte se
encontra. Vamos ver a seguir a fonte Awesome sendo
declarada.
FONT-STYLE
Propriedade usada na estilização de textos aplicando o efeito de itálico. Seus valores possíveis
são:
normal (ou seja, tira o efeito do texto, sendo o estilo padrão de todo elemento), italic e
oblique (uma
versão mais inclinada em relação ao itálico).

FONT-WEIGHT

O peso de uma fonte é definido com a utilização dessa propriedade. Com ela, é possível Fonte: Elaborado pelo autor no Notepad++.
aplicar o efeito de
negrito em uma escala. Seus valores possíveis são: normal, bold, lighter e  Figura 12: Declaração de Web Fonte.
bolder (aumentam ou diminuem o
peso da fonte em relação ao peso da fonte de seu elemento
Como podemos observar, além das propriedades font-family e src, há outras que podem ser
pai); e uma escala numérica que vai de 100 a
900.
aplicadas às Web
Fontes. Em relação à font-family, a partir do momento da sua declaração, o
Há algumas boas práticas e cuidados a serem levados em consideração quando se
trabalha nome definido poderá ser utilizado
para estilizar qualquer outro elemento ao longo do CSS –
com estilização de fontes usando CSS. Uma delas diz respeito ao controle sobre a possível considere que podemos tanto utilizar uma única
família de fontes para o documento HTML
degradação que pode ocorrer na página. Portanto, deve-se tomar os devidos cuidados optando inteiro como a combinação de diferentes famílias.
pela utilização
de uma lista de fontes e mantendo por último as fontes “genéricas”, como Serif,
O código também mostra que as fontes incorporadas podem tanto estar hospedadas
“Sans-Serif” e Monospace.
Desse modo, haverá maior garantia e controle sobre o que o
localmente quanto na internet.
Além disso, há alguns outros elementos na declaração dos
usuário verá como resultado.
quais ainda não falamos. São eles: as funções local
e format.

Cabe destacar também os diferentes tipos existentes de fontes web. Aprofundaremos esses
elementos extra a seguir.
WEB FONTES
As Web Fontes são um importante recurso em termos de tipografia. Se antes a sua estilização
ficava restrita
àquelas disponíveis nos sistemas operacionais dos usuários, a partir da
implementação da regra @font-face
tornou-se possível a utilização de Web Fontes. Essa nova
propriedade permite a utilização de fontes que, ao
serem definidas, são baixadas pelo
navegador no momento de carregamento da página. Logo, sua utilização
permite um controle
maior do layout de uma página no que diz respeito às fontes, além da possibilidade de
serem
usadas fontes com maior apelo visual.

Ícone do word

COMO UTILIZAR A REGRA @FONT-FACE

 Google Firefox Internet Safari Opera
A FUNÇÃO LOCAL Chrome Explorer / Edge

Essa função indica ao navegador que, antes de fazer o download da fonte definida, deverá
verificar se ela já está disponível na máquina do usuário. TTF/OTF 4.0 3.5 9.0 3.1 10.0

WOFF 5.0 3.6 9.0 5.1 11.1

WOFF2 36.0 35.0 -- -- 26.0

SVG 4.0 -- -- 3.2 9.0

Ícone do word
EOT -- -- 6.0 -- --

A FUNÇÃO FORMAT  Atenção! Para visualização

completa da tabela utilize a rolagem horizontal

Tabela 4: Tipos mais comuns de Web Fontes.

Também chamada de dica, essa função opcional é utilizada quando se deseja declarar vários
Como visto na tabela, alguns tipos oferecem melhor suporte em relação aos navegadores mais
formatos de
fontes, indicando justamente o formato de cada uma. No exemplo acima, temos os
atuais. Entretanto,
não dão suporte às versões antigas. Isso reforça a recomendação anterior:
formatos “woff”, “woff2”,
“ttf” e “eot”.
considere sempre utilizar
diferentes fontes para oferecer uma melhor experiência aos usuários.

TIPOS DE WEB FONTES

Estão disponíveis atualmente alguns tipos de Web Fontes, cuja escolha deve considerar
fatores como a
compatibilidade com a maioria dos navegadores e o tamanho dos arquivos.
Veja a seguir os tipos mais comuns de
web fontes.

Tipo Navegadores x Versões (iniciais com suporte)

ABREVIATURAS OU ATALHOS EM CSS
As Folhas de Estilo permitem a aplicação de algumas propriedades utilizando abreviaturas ou

atalhos. O exemplo
a seguir mostra as duas formas de realizar uma mesma declaração: Fonte: Elaborado pelo autor no Notepad++.

Fonte: Elaborado pelo autor no Notepad++.

Fonte: Elaborado pelo autor no Notepad++.

FONTES
Fonte: Elaborado pelo autor no Notepad++.

Fonte: Elaborado pelo autor no Notepad++.

Fonte: Elaborado pelo autor no Notepad++.

VERIFICANDO O APRENDIZADO
 GABARITO

1. Sobre a estilização de textos e fontes, os navegadores possuem estilos padrões para

1. SOBRE A ESTILIZAÇÃO DE TEXTOS E FONTES, OS NAVEGADORES esses tipos de elemento. Logo, é correto dizer que:
POSSUEM ESTILOS PADRÕES PARA ESSES TIPOS DE ELEMENTO.
A alternativa "C " está correta.
LOGO, É CORRETO DIZER QUE:

A) Os estilos aplicados por padrão pelos navegadores existem para permitir que o controle do
A CSS permite total controle sobre qualquer elemento em uma página. Deve-se ter em mente,
layout do conteúdo da página fique nas mãos do usuário, e não do desenvolvedor.
ao utilizá-la, não só as preocupações com estética, mas também com usabilidade e
B) Os navegadores padronizam os estilos dos elementos de texto e fonte para garantirem a acessibilidade, garantindo assim a melhor experiência possível aos usuários.
usabilidade e acessibilidade das páginas.
2. Assinale a afirmativa CORRETA quanto à utilização de web fontes em relação às
C) A CSS permite total controle sobre os elementos de texto e fonte. Com isso, todo o controle fontes CSS padrões:
fica nas mãos do desenvolvedor, que poderá alterar qualquer aspecto desses elementos,
A alternativa "D " está correta.
tornando assim a página uniforme, uma vez que não dependerá dos estilos padrão dos
navegadores, que são diferentes entre si.

D) Embora a CSS permita a estilização de textos e fontes, os navegadores sempre terão As web fontes permitem um maior controle visual sobre como cada usuário verá o site,

controle sobre o layout da página, podendo, inclusive, redefinir os estilos CSS que não estejam diminuindo assim a dependência de fatores externos, como a disponibilidade de fontes no
computador do visitante.
de acordo com os padrões de acessibilidade.

2. ASSINALE A AFIRMATIVA CORRETA QUANTO À UTILIZAÇÃO DE WEB

FONTES EM RELAÇÃO ÀS FONTES CSS PADRÕES:
MÓDULO 3

A) Por serem mais leves, uma vez que são nativas, as fontes definidas através de CSS sempre  Identificar os conceitos de Box Model, pseudoclasses, pseudo-elementos e posicionamento
serão renderizadas, sem qualquer tipo de restrição, em qualquer sistema operacional.

B) As web fontes devem ser usadas, em detrimento das fontes padrão, por terem maior apelo
visual.
BOX MODEL
C) A melhor escolha em relação aos estilos de fontes é não usar nem fontes padrão e nem
webfontes, ou seja, é deixar que fique a cargo do navegador escolher a fonte padrão de acordo
Nos módulos anteriores, vimos os conceitos básicos de CSS, sua sintaxe, seus elementos e
com as disponíveis no sistema operacional do usuário.
suas formas de
integração com HTML. Abordamos também como aprimorar o design de
D) Além de fornecerem mais opções, em termos visuais, as web fontes, quando usadas páginas com os estilos de cores, texto e
fontes.
adequadamente, garantem uma menor degradação das páginas, uma vez que não haverá
Neste módulo, avançaremos um pouco mais e percorreremos os conceitos de Box Model
dependência do ambiente do usuário, quanto a esse possuir ou não a fonte definida.
(modelo de caixas ou
retângulos), Pseudoclasses e Pseudo-elementos e Posicionamento.
Os elementos de uma página web são representados por uma caixa que possui o
formato de Para chegar a esse resultado, é importante entendermos o comportamento, a
composição e as
um retângulo. Uma boa analogia aqui seria compararmos a marcação HTML a brinquedos de características de cada bloco, assim como os estilos que podem receber.
bloco.
Nesse sentido, dentro do conceito de Box Model – que, em CSS, está relacionado a design e
layout – nossos
boxes possuem quatro componentes principais: margem (margin), borda
(border), preenchimento (padding) e
conteúdo (content).

No Lego, por exemplo, há peças de diferentes tamanhos, larguras, alturas,

cores e formatos.

Tendo em mãos tais elementos, é nosso papel montá-los, encaixá-los, de forma harmoniosa Fonte: Elaborado pelo autor no Notepad++.
para, ao final, obtermos o resultado esperado.  Figura 13: Componentes do Box Model.
A imagem anterior nos ajuda a compreender a composição do Box Model de maneira prática. largura (width,
min-width, max-width) e altura (height, min-height, max-height) podem ser
Repare que foram
definidas 3 caixas com o elemento <div> e, para cada uma delas, foram estilizadas com CSS.
definidos diferentes estilos,
como largura, altura e cor de fundo. Para a <div> com identificador
“box_exemplo” foram declarados
ainda valores para margin, padding, border e content.

MARGIN PSEUDOCLASSES E PSEUDO-ELEMENTOS

A margem, como indicado do lado direito da figura 13, fez com que um espaço fosse criado
entre primeira, a
segunda e a última div. Também criou um espaçamento entre a box exemplo e Uma declaração CSS é composta pelo elemento que se deseja estilizar, pela propriedade a ser
a lateral esquerda da página. As
margens de um elemento podem ser controladas com as estilizada e pelo
valor a ser atribuído. Além disso, vimos que o elemento pode ser definido de
propriedades CSS margin-top, margin-bottom,
margin-right e margin-left – além do atalho maneira ampla (utilizando-se o
nome da tag), específica (pelo seu identificador único) e seletiva
margin, como visto no código de exemplo. (com a utilização de classes).

BORDER Há ainda a herança, onde um elemento filho pode herdar as propriedades de um elemento pai.
Todos esses modos
de definir estilo são bastante abrangentes. Entretanto, há ainda algumas
A borda delimita a área do elemento - altura e largura. Além disso, permite que uma cor
formas especiais e muito úteis para
se aplicar estilos: as pseudoclasses e os pseudo-
diferente seja
definida para essas extensões do elemento. É controlada pela propriedade CSS
elementos. Veremos a seguir as suas definições e como
utilizá-las.
border e derivadas – com as
quais a largura, a cor e o tipo de borda podem ser definidos.

O tamanho declarado para a borda é somado ao tamanho declarado para o elemento,

compondo assim o seu tamanho final.
PSEUDOCLASSES
PADDING
Para entender a função do padding, repare, na figura anterior, que os textos da primeira e da As pseudoclasses são utilizadas para definir um estado especial de um elemento. Por exemplo:
última
<div> estão colados no topo e na lateral esquerda. Entretanto, na div do meio, há um podemos mudar o
estilo de um elemento ao passarmos o mouse sobre ele (evento
espaçamento em
relação ao topo e à lateral esquerda. Esse espaço de preenchimento mouseover). Esse novo estilo é temporário, ou
seja, não corresponde ao seu estado natural.
equivale ao padding. Assim como a
margem, suas dimensões são a altura e largura. Também podemos mudar o estilo de um link que foi clicado,
alterando sua cor ou alguma outra

Atente-se para a seguinte diferença: margin diz respeito ao espaço entre elementos; já o propriedade.

padding refere-se ao conteúdo interno do próprio elemento, além de fazer parte dele. Na A sintaxe para declaração da pseudoclasse é composta pela palavra-chave correspondente ao
prática, isso significa que a div #box_exemplo, cuja largura foi declarada como 400px e altura nome da pseudoclasse
precedido pelo sinal de dois pontos. Veja o exemplo a seguir:
como 200px tem, na verdade, 500px de altura e 300px de largura. Ou seja, o padding
aumentou suas dimensões:
width + padding-right + padding-left => 400px + 50px + 50px =
500px
height + padding-top + padding-bottom => 200px + 50px + 50px = 300px
Para controlar
o preenchimento de um elemento, são utilizadas as propriedades CSS padding-top, padding-
DIV:HOVER{BACKGROUND-COLOR:#000000;}
bottom, padding-right e padding-left, além do atalho padding.

CONTENT Como
Pseudoclasse Para que serve
Essa é a área interna do elemento, ocupada pelo seu conteúdo. Suas dimensões são altura e declarar

largura. Além
disso, sua cor de fundo (background), a cor da fonte (color) de seu conteúdo, sua
 :active a:active Selecionar todos os links ativos.

:checked input:checked Selecionar todos os campos input checados.

:first-child li:first-child Selecionar todo primeiro item de lista.

:last-child li:last-child Selecionar todo último item de lista.

Fonte: Elaborado pelo autor no Notepad++.

Selecionar todas as divs no evento
:hover div:hover  Figura 14: Exemplo de utilização de pseudo-elementos.
mouseover.
Ao analisar, codificar e testar o código acima, você perceberá que, no primeiro parágrafo, foi
necessário
utilizar um elemento a mais, a tag <span>, ao redor da primeira letra do texto para
 Atenção! Para visualização
completa da tabela utilize a rolagem horizontal poder estilizá-la.
Já no segundo parágrafo, o mesmo estilo foi alcançado apenas com o uso do

Tabela 5: Lista básica de pseudoclasses pseudo-elemento first-letter. A

utilização do pseudo-elemento diminuir a quantidade de código,
tornado sua compreensão mais clara.

Cabe, ainda, destacar um outro ponto do exemplo relacionado à sintaxe dos pseudo-
elementos: neles são usados
dois pontos duplos (ou dobrados) para a declaração. Isso é
PSEUDO-ELEMENTOS
proposital, para diferenciá-los das
pseudoclasses.

Os pseudo-elementos são palavras-chave que, adicionadas/relacionadas a um seletor,

permitem que uma parte
específica dele seja estilizada. A imagem a seguir mostra duas Pseudo-
Exemplo Para que serve
declarações CSS, uma sem e outra com o uso de
pseudo-elemento. Em ambas, é definido que elemento
a primeira letra de texto em um parágrafo tenha tamanho e cor
diferentes do restante do texto
nele contigo.

::after img::after Inserir conteúdo após o elemento indicado.

::before h1::before Inserir conteúdo antes do elemento indicado.

::first::letter p::first- Selecionar a primeira letra do elemento indicado.

letter
 ::first-line p::first-line Selecionar a primeira linha do elemento indicado.

Seleciona a porção de um elemento que é

::selection p::selection
selecionado pelo usuário.

 Atenção! Para visualização

completa da tabela utilize a rolagem horizontal

Tabela 6: Principais pseudo-elementos.

A PROPRIEDADE POSITION
POSICIONAMENTO
A propriedade CSS responsável pelo posicionamento é a “position”. Seus valores possíveis

Para tratarmos de posicionamento em CSS, precisaremos recorrer a alguns conceitos já vistos são: static,
relative, fixed, absolute e sticky. Além disso, as propriedades top, bottom, right e left

– sobretudo os
relacionados ao Box Model, além de relembrarmos que os elementos HTML são usadas em
conjunto, a fim de definir os valores das respectivas distâncias e,

possuem padrões de estilo e

comportamento naturais. Alguns desses padrões diferem um consequentemente, do posicionamento. Tais
propriedades, inclusive, só podem ser usadas

pouco de um navegador para outro. Além disso, eles

podem ser modificados por CSS, onde as quando for definido um valor para position.

tais diferenças são resolvidas e, de fato, um padrão de comportamento

pode ser definido.
POSITION STATIC
Essa é a posição padrão dos elementos. Desse modo, elementos definidos como static ou sem
a propriedade
position são posicionados naturalmente, de acordo com o fluxo normal da

LAYOUT EM COLUNAS E GRID LAYOUT página, não assumindo nenhuma

localização especial. Inclusive, as propriedades top, bottom,
right e left não são refletidas em elementos
estáticos.

Esses dois conceitos são importantes quando tratamos da estrutura visual de páginas HTML. POSITION RELATIVE
Em uma definição
simplista, ambos tratam de como os elementos, boxes, podem ser
A definição da propriedade “position:relative;” para um elemento faz com que ele seja
posicionados e organizados em uma página. Veja
na Figura 15, logo a seguir, a estrutura em
posicionado de modo
relativo à sua posição normal. Com isso, ao definirmos valores para as
colunas de uma página.
propriedades top, bottom, right e
left, ajustamos a sua posição em relação à sua posição
Em termos de HTML, apenas utilizando boxes (header, footer, section, aside, nav, div etc.), os natural.
elementos
ficariam empilhados uns sobre os outros. Para aplicar o layout visto na Figura 15 e
posicionar os elementos
na página, precisaremos utilizar CSS.
null

Fonte: Elaborado pelo autor.

 Figura 15: Layout CSS em colunas.
POSITION FIXED
O valor fixed é utilizado quando desejamos definir uma posição fixa para um elemento na
página. Com isso, independente do scroll, de rolarmos a página para cima ou para baixo, o
elemento sempre permanecerá no mesmo local. As propriedades top, bottom, right e left
devem ser usadas para definir o lugar onde o elemento será fixado.
Uma curiosidade sobre
esse elemento é que ele é posicionado em relação à viewport/janela do navegador. Com isso,
ele “flutuará” sobre os demais conteúdos da página, ficando fixo onde foi colocado e não
ocupando, assim, a posição original onde foi declarado no HTML.

POSITION ABSOLUTE
A posição “absolute” faz com que um elemento seja posicionado em relação à localização do
seu elemento
ancestral mais próximo – o qual também deverá estar posicionado (ou seja, não
poderá ser static).

Quando o elemento definido com absolute for o primeiro elemento da página, ele então será
posicionado em relação ao <body>. Com isso, tal elemento acompanhará a rolagem da página.

POSITION STICKY
RESULTADO DOS COMPONENTES DO BOX
Esse valor para a propriedade position faz com que um elemento seja posicionado com base
na posição de
rolagem da página (scroll). Com isso, seu comportamento varia entre o relativo e MODEL NO NAVEGADOR
o fixado, dependendo da
posição do scroll.

Tal propriedade é mais recente, em termos de especificação, assim não possui suporte em
todas as versões
dos navegadores. É usada, normalmente, quando queremos criar um efeito
de sobreposição de conteúdo. Na
prática, o elemento é visualizado ao abrirmos uma página.
Ao rolarmos para baixo, ele se mantém fixo, com
os demais conteúdos passando sob ele.

VERIFICANDO O APRENDIZADO
 B) A tag < p > será posicionada em função da tag < body >, uma vez que não foi declarada
1. EM RELAÇÃO ÀS PROPRIEDADES E DIMENSÕES DO BOX MODEL
uma propriedade position para a < div >.
REPRESENTADO PELO ELEMENTO < DIV >, CUJOS ESTILOS SÃO
DEFINIDOS ABAIXO, ASSINALE A AFIRMATIVA CORRETA.
C) A tag < p > será posicionada da mesma forma como se nenhuma propriedade de

DIV{
posicionamento lhe fosse atribuída.

WIDTH:500PX!IMPORTANT;
D) Para assumir a posição relativa, a tag < p > precisaria estar localizada fora da < div > ou de
BORDER: 5PX SOLID BLACK;
qualquer outro elemento pai.
PADDING-TOP: 10PX;

PADDING-RIGHT:10PX;

PADDING-BOTTOM: 5PX;

GABARITO
MARGIN-LEFT:50PX;

} 1. Em relação às propriedades e dimensões do Box Model representado pelo elemento <

div >, cujos estilos são definidos abaixo, assinale a afirmativa correta.

A) A largura final da div será de 500px. div{

width:500px!important;

B) A largura final da div será de 520px.

border: 5px solid black;

C) A largura final da div será de 510px. padding-top: 10px;

D) A largura final da div será de 570px. padding-right:10px;

padding-bottom: 5px;

margin-left:50px;

}
2. NO FRAGMENTO DE CÓDIGO ABAIXO, A PROPRIEDADE POSITION
COM O VALOR RELATIVE É DEFINIDA PARA O ELEMENTO < P >. A alternativa "B " está correta.
CONSIDERANDO O CÓDIGO HTML E CSS, ASSINALE A AFIRMATIVA

CORRETA.

...
Como visto, as dimensões de largura e altura são alteradas de acordo com a borda e o padding

< BODY >

definidos. No exemplo da questão, temos: 500px + 5px (borda da direita) + 5px (borda da

< DIV >

esquerda) + 10px (padding da direita) = 520px.
< P > TEXTO < / P >

2. No fragmento de código abaixo, a propriedade position com o valor relative é definida

< / DIV >

para o elemento < p >. Considerando o código HTML e CSS, assinale a afirmativa
< / BODY >

correta.

...
...

P{

< body >

POSITION:RELATIVE;

< div >

}
< p > Texto < / p >

< / div >

A) A tag < p > será posicionada de forma relativa em relação ao seu elemento ancestral, ou
seja, em relação à < div >.
< / body >
Nesse contexto, a maioria dos Frameworks CSS mantêm similaridades entre si, além de prós e
... contras
específicos, que vão desde a facilidade de aprendizagem, ao suporte e à

p{
documentação disponíveis, entre
outros fatores.

position:relative;
Logo, a escolha de um Framework pode se dar por fatores objetivos, relacionados às suas
} características ou aos
requisitos específicos de um determinado projeto, ou mesmo por fatores

A alternativa "C " está correta. subjetivos, como gosto pessoal. Ao

decidir utilizar um Framework, é fundamental ter em mente
o quanto ele poderá auxiliá-lo em seu trabalho.

Para isso, é importante conhecer suas as principais características, além das vantagens e
As propriedades de posicionamento precisam ser utilizadas em conjunto com as propriedades
desvantagens de cada
opção. A seguir, três dos principais Frameworks CSS existentes serão
top, bottom, right e left – e seus respectivos valores. Do contrário, nenhuma mudança será
apresentados: Bootstrap, Foundation e
Semantic UI.
aplicada ao seu posicionamento. No código acima, a declaração CSS será ignorada pelo
navegador.

MÓDULO 4

 Reconhecer Frameworks CSS

FRAMEWORKS CSS
Como visto nos módulos anteriores, a CSS é uma tecnologia poderosa, flexível e, muitas BOOTSTRAP
vezes, complexa. São
várias propriedades e muitos valores possíveis. Inúmeras combinações
que podem, inclusive, sobreporem umas às
outras.
Ele foi desenvolvido pela equipe do Twitter em 2011 e, posteriormente, passou a ser mantido

A marcação HTML tem um comportamento natural em relação aos elementos, além de de modo
independente. Sua licença é open source e, atualmente, é o framework CSS mais

pequenas variações de um
navegador para outro. Por outro lado, há bastante similaridade em popular.

relação aos layouts de diversos sites. Os

de e-commerce, por exemplo, costumam ter um Trata-se de um framework responsivo, baseado na premissa mobile-first – onde o foco inicial
layout bem parecido para facilitar a experiência do usuário ao
trafegar entre um e outro.
são os
dispositivos móveis e, em seguida, os desktops. Possui componentes prontos para uso
Nesses casos, é comum ser utilizado o ditado de que não é necessário reinventar a
roda. Esse
(ready-to-use)
desenvolvidos em HTML, CSS e Javascript.
ditado, inclusive, é um bom ponto de partida para falarmos sobre Frameworks CSS, a começar
pela
sua definição.

Frameworks podem ser definidos como um conjunto de componentes

reutilizáveis que
SISTEMA DE GRID
permitem a otimização do processo de programação.
O Grid Layout é um sistema de layout generalizado. Com ênfase em linhas e colunas, pode
parecer um retorno ao
layout da tabela, mas há muito mais no layout da grade do que no layout
Column
da tabela (MEYER, 2017). Yes
ordering
Uma das principais características dos Frameworks CSS é o seu Sistema de Grids. Enquanto a
Grid é um elemento
de design, uma ferramenta que serve para ordenar elementos visuais, o
 Atenção! Para visualização
completa da tabela utilize a rolagem horizontal
Sistema de Grid em um Framework
consiste em uma série de containers, linhas e colunas que
servem para arranjar e alinhar conteúdo.
Embora compartilhem da mesma fundamentação Figura 16 – Sistema de Grid do Bootstrap. Fonte: Bootstrap Grid System, 2020.

teórica, há pequenas diferenças de implementação entre os

Frameworks.

A grid do Bootstrap, por exemplo, possui 12 colunas e 5 breakpoints responsivos, que são
pontos de
quebra nos quais o layout será ajustado para atender a diferentes resoluções de COMO UTILIZAR O BOOTSTRAP
tela. Conforme visto na
figura abaixo, são eles: extra small, small, medium, large e extra large.
Para utilizar o Bootstrap, é necessário incluir a sua biblioteca, composta por dois arquivos: um
Na prática, esse sistema deve ser corretamente utilizado para que todos os elementos da
CSS e outro
Javascript. Essa instalação é simples e pode ser feita pela inclusão dos
página sejam alinhados
e visualizados em diferentes tamanhos de tela.
respectivos arquivos diretamente na
HTML.

Outra forma de instalação é através de ferramentas gerenciadoras de pacotes, como npm ou

Extra Extra
Small
Medium
Large
gem. Em termos de
dependência, para a utilização completa de todas as suas funcionalidades,
small
large

≥576px ≥768px ≥992px é necessário ainda incluir outras

bibliotecas Javascript, a Jquery e a Popper.
<576px ≥1200px
Por último, é importante ter cuidado com as versões do Framework em termos de
compatibilidade, tanto em
relação a bibliotecas de terceiros às JS citadas acima, quanto em
Max container None relação a funcionalidades em
desuso/depreciadas.
540px 720px 960px 1140px
width (auto)
O Bootstrap possui inúmeras classes pré-definidas para as mais diversas
necessidades. Para
utilizá-las, é preciso combiná-las com uma marcação HTML pré-definida, conforme
documentação oficial. Por exemplo: há uma classe que pode ser aplicada em tabelas para criar
.col- o efeito zebra
(alternância de cores entre as linhas da tabela), a “.table-striped”. Para usar essa
Class prefix .col- .col-md- .col-lg- .col-xl-
sm- classe, basta incluir
seu nome no atributo “class” de uma tabela.

# of columns 12

Gutter width 30px (15px on each side of a column)

Nestable Yes
 SISTEMA DE GRID

O Sistema de Grid do Foundation também é composto por 12 colunas. Nas versões mais
recentes, o sistema básico
de grid foi substituído por um novo sistema, o XY Grid. Em tal
sistema, novas funcionalidades foram
adicionadas, como alinhamento vertical e horizontal,
dimensionamento automático e grid vertical completa.

COMO UTILIZAR O FOUNDATION

A forma de utilização do Foundation é semelhante à do Bootstrap: é preciso incluir um arquivo

CSS e outro
Javascript ou então utilizar um gerenciador de pacotes. Além disso, é
recomendado também incluir a
Biblioteca jQuery.

A respeito da compatibilidade, aplica-se o que foi dito anteriormente: algumas funcionalidades

são
descontinuadas entre uma versão ou outra. Logo, é preciso tomar cuidado para que nada
BOOTSTRAP deixe de funcionar ao
atualizar versões.

Em termos de recursos extras, destaca-se nesse framework a existência de recursos

específicos para a criação de HTML responsivo para e-mail. Trata-se do Foundation For
Emails.

SEMANTIC UI
Mais recente entre os 3 Frameworks aqui apresentados, o Semantic UI se destaca por utilizar,
nativamente, um
pré-processador CSS, o LESS, e a biblioteca Javascript Jquery. Também é
um Framework open source.

FOUNDATION Uma importante particularidade desse Framework é que suas classes utilizam sintaxe de
linguagem natural, como
substantivos, por exemplo, para vincular conceitos de maneira mais
O segundo Framework a ser abordado é o Foundation, criado em 2011 e que está entre os intuitiva.
mais conhecidos e
utilizados. É um framework responsivo, baseado na abordagem mobile-first.
Sua principal característica é
fazer uso, nativo, do pré-processador de CSS chamado SASS.

COMO UTILIZAR O SEMANTIC UI

 sintaxes. Há vários comparativos na
internet que aprofundam essa discussão, elencando os
A sua inclusão é semelhante às dos demais Frameworks vistos anteriormente, ou seja, por pontos fortes e fracos de cada Framework.
meio de arquivos CSS e
JS, além da Biblioteca jQuery, ou via gerenciadores de pacotes.
Na prática, a recomendação é: sempre que possível, utilize um Framework. Escolha o que
melhor se adequar à sua
necessidade. Na dúvida por onde começar, escolha o mais utilizado –
a final de contas, ele não deve ser o
mais usado à toa.
OUTROS FRAMEWORKS

Além dos 3 frameworks vistos anteriormente, há vários outros disponíveis. Alguns dos mais
conhecidos são:
VANTAGENS E DESVANTAGENS DA UTILIZAÇÃO DE
FRAMEWORKS

Na prática, não existe uma recomendação definitiva sobre usar ou não um Framework em um
projeto Web. Se, por
um lado, a utilização de Frameworks ajuda a otimizar o tempo de
desenvolvimento, por outro lado, tira um
pouco do controle do programador sobre o que está
sendo feito, uma vez que não é recomendado alterar o
comportamento padrão dos códigos
fornecidos pelos Frameworks. A lista abaixo traz alguns prós e contras
citados mais
comumente:

Vantagens Desvantagens

Padronização do
código, muito válido,
Tamanho / peso do Framework, que pode impactar no
PURE
Considerado o framework mais leve, foi desenvolvido pela Yahoo; sobretudo, quando
carregamento da página;
se trabalha em
MATERIALIZE CSS
Baseado no Material Design, ambos criados pelo Google e
equipe;
utilizados em seus produtos;
BULMA
Framework baseado unicamente em CSS, não faz

uso de Javascript;
SKELETON
Framework minimalista. Possui apenas 400 linhas de
código.
Restrições de design – lembre-se de que o framework possui
Em suma, como visto em suas definições e em seus exemplos de utilização, os Frameworks Economia de tempo, um layout padrão, baseado em
grids. Isso pode acabar
têm a mesma finalidade,
servindo para as mesmas funções. Em outras palavras, tudo que é uma vez que não é limitando a imaginação no momento de criação do design ou
possível criar com um Framework também é
possível com outro. precisar criar todo o impactando no tempo de
desenvolvimento para que seja
código CSS do zero; possível encaixar o layout criado no padrão estabelecido pelo
Por outro lado, há pós e contras em cada um deles, como o tamanho do Framework e impactos
Framework;
no carregamento da
página, facilidade ou dificuldade de aprendizagem e simplicidade de
 D) Não há um melhor ou um pior Framework. Cada um oferece vantagens e desvantagens,
Seguimento de Curva de aprendizado – aprender a utilizar adequadamente
prós e contras. Inclusive, alguns podem ser a melhor opção para um determinado projeto e
padrões, já que os um Framework pode levar algum tempo;
para outro não.
Frameworks estão
sempre antenados
às especificações e
recomendações 2. DENTRE AS OPÇÕES ABAIXO, ASSINALE A QUE NÃO REPRESENTA
oficiais; UMA VANTAGEM EM SE UTILIZAR FRAMEWORKS CSS.

A) Flexibilidade e Adaptabilidade

Controle sobre o código – sendo obrigado a utilizar a estrutura B) Possibilidade de aprendizagem

definida pelo
Framework, acabamos por perder o controle
Compatibilidade C) Auxílio em tarefas repetitivas
total sobre o código. Além disso, utilizar Frameworks sem
entre navegadores. D) Colaboração no trabalho em grupo
uma
boa base teórica sobre CSS pode acabar limitando o seu
entendimento e aprendizado.

GABARITO
 Atenção! Para visualização
completa da tabela utilize a rolagem horizontal
1. Em relação à utilização de Frameworks, assinale a afirmativa incorreta:

A alternativa "C " está correta.

VERIFICANDO O APRENDIZADO
A utilização de vários Frameworks CSS em um mesmo projeto pode causar inúmeros
problemas, por exemplo conflitos de estilos, uma vez que alguns compartilham entre si os
mesmos nomes de seletores. Logo, é imprescindível utilizar apenas um Framework por projeto.

1. EM RELAÇÃO À UTILIZAÇÃO DE FRAMEWORKS, ASSINALE A 2. Dentre as opções abaixo, assinale a que não representa uma vantagem em se utilizar
AFIRMATIVA INCORRETA: Frameworks CSS.

A alternativa "A " está correta.

A) Qualquer componente ou estilo disponibilizados pelos Frameworks podem ser produzidos
apenas com código CSS e Javascript, ou seja, sem a utilização de Frameworks.

B) Os Frameworks são um importante recurso que auxiliam no desenvolvimento, diminuindo o O sistema de Grids dos Frameworks, embora bastante útil, acaba fazendo com que, em muitas

tempo, padronizando o código e garantindo uma maior compatibilidade entre navegadores e situações, seja necessário adaptar o layout do site ao Framework, e não o contrário.

dispositivos.

C) Para um melhor resultado é importante utilizar vários Frameworks em um mesmo projeto.

Com isso, é possível aproveitar o que cada um oferece de melhor.
CONCLUSÃO
 Para aprofundar seus conhecimentos sobre o Sistema de Grids, é recomendada a leitura do

CONSIDERAÇÕES FINAIS Livro CSS: The

Definitive Guide, de Eric Meyer e Estelle Weyl.
Indicamos também a página da
w3Schools, que disponibiliza inúmeros tutoriais sobre os mais diversos assuntos
relacionados

Nesse tema, foi apresentada a CSS, linguagem de estilo responsável pela camada visual em ao desenvolvimento web. Busque por:

uma página Web e pela

consequente separação entre apresentação e conteúdo. Ao longo dos
CSS Pseudoclasses
tópicos, foram apresentados a sua
definição, sua sintaxe, seus elementos, suas propriedades e
formas de integração com HTML. Além disso, alguns
aspectos foram abordados de maneira
Google Fonts
mais aprofundada, como as propriedades relacionadas a textos e às fontes,
às pseudoclasses,
aos pseudo-elementos e aos conceitos de Box Model e de posicionamento. Ao final, um
CSS RGB Color
importante recurso foi descrito – os Frameworks CSS. Toda a abordagem teórica foi permeada
por exemplos e
alguns exercícios a fim de estimular a aplicação prática e uma melhor
CSS HSL Color.
assimilação dos conteúdos apresentados.
Indicamos também uma galeria de web fontes da Google com suporte em todos os
navegadores chamada de Google
Fonts.

A Mozilla disponibiliza diversos tutoriais e artigos de suporte ao desenvolvimento web.

Sugerimos
a leitura de:

Fundamental text and font styling.

CSS Media Queries.

Se quiser praticar a elaboração de códigos e visualizar a renderização no navegador,

indicamos dois recursos online O Codepen e o JSFiddle.
AVALIAÇÃO DO TEMA:

CONTEUDISTA
REFERÊNCIAS
Alexandre de Oliveira Paixão

Meyer, E., Weyl, E. CSS: The Definitive Guide. O’Reilly Media, Inc., 2017.
 CURRÍCULO LATTES

EXPLORE+
 Identificar o conceito de vetor e sua utilização em JavaScript

MÓDULO 4

Reconhecer os recursos assíncronos Ajax e JSON

INTRODUÇÃO
Segundo Flanagan (2011), JavaScript é a linguagem de programação da Web mais utilizada pelos sites. Além disso, todos os navegadores − estejam
eles em desktops, jogos, consoles, tablets ou smartphones − incluem interpretadores JavaScript, fazendo desta a linguagem de programação mais
onipresente da história.

Ao longo deste tema, veremos os conceitos básicos e as principais funcionalidades do JavaScript. Além disso, aprenderemos a integrá-lo às

DEFINIÇÃO páginas HTML e a utilizá-lo − desde tarefas básicas, como manipular a interface DOM, a tarefas mais complexas, como transmitir dados entre o
cliente e o servidor de forma assíncrona.

Apresentação dos conceitos básicos e das principais funcionalidades do JavaScript, uma das linguagens de programação mais importantes e Vamos começar nossa jornada acessando os códigos-fontes originais propostos para o aprendizado de Javascript. Baixe o arquivo aqui,
utilizadas na internet. descompactando-o em seu dispositivo. Assim, você poderá utilizar os códigos como material de apoio ao longo do tema!

PROPÓSITO MÓDULO 1
Compreender a linguagem JavaScript, sua sintaxe e utilização em páginas HTML.
 Identificar os conceitos básicos, a sintaxe e as formas de utilização do JavaScript

PREPARAÇÃO
JAVASCRIPT
Para aplicação dos exemplos, será necessário um editor de texto com suporte à marcação HTML. No sistema operacional Windows, é indicado o
Notepad++. No Linux, o Nano Editor.

Uma alternativa aos editores instalados no computador são os interpretadores online, como CodePen e JSFiddle.

OBJETIVOS

MÓDULO 1

Identificar os conceitos básicos, a sintaxe e as formas de utilização do JavaScript

Fonte: pixcon/Shutterstock

Esta linguagem faz parte da tríade de tecnologias que compõe o ambiente Web, juntando-se à HTML − que cuida da estrutura e do conteúdo das
MÓDULO 2
páginas − e ao CSS − responsável pela apresentação. Sua função, nesse ambiente, é cuidar do comportamento e da interatividade das páginas
Web. Trata-se de uma linguagem de programação interpretada e multiparadigma, uma vez que possui suporte à programação estruturada,
Aplicar as estruturas de decisão e de repetição
orientada a objetos e funcional.

O JavaScript, comumente chamado de JS, foi criado inicialmente para o ambiente Web, no lado cliente. Entretanto, evoluiu ao ponto de atualmente ser
utilizado também no lado servidor, além de ser uma das principais linguagens para o desenvolvimento de aplicativos mobile.
MÓDULO 3
 Com JavaScript, é possível até mesmo manipular os estilos de um documento, de forma similar ao que é feito via CSS.
 ATENÇÃO

É importante destacar que, embora possuam nomes parecidos, as linguagens de programação JavaScript e Java não têm nenhuma relação.
INCORPORANDO O JAVASCRIPT À HTML
A incorporação do JavaScript a páginas HTML pode ser feita de duas formas:
A INTERFACE DOM
CÓDIGOS NO CORPO DA PÁGINA
Iniciaremos nosso estudo de JavaScript entendendo o que é e como manipular a interface, ou árvore, DOM. Isso auxiliará o entendimento de como
essa linguagem se integra e interage com a HTML. Incluindo os códigos diretamente no corpo da página − dentro da seção <head> e da tag <script>

A sigla DOM significa Modelo de Objeto de Documento. Trata-se de uma interface que permite a manipulação, via programação, de documentos HTML
(e outros, como XML, por exemplo). Além de interface, é, também, comumente chamado de árvore, por fornecer uma representação ARQUIVOS EXTERNOS
estruturada do documento nesse formato.
Através de arquivos externos, com extensão js, linkados ao documento também dentro da seção <head>
A árvore DOM é composta por nós e objetos, ambos possuindo propriedades e métodos, além de eventos. Através dessa estrutura, é possível
acessar, por exemplo, o conteúdo textual de um elemento − como a tag <p> −, recuperar e até mesmo alterar o seu valor.
Para a otimização do desempenho do carregamento da página, deve-se mover todo o código JavaScript para o seu final, após o fechamento da tag
Embora frequentemente associados, o DOM não faz parte da linguagem JavaScript, podendo também ser manipulado por outras linguagens. Neste </body>.
tema, porém ficaremos restritos à manipulação do DOM através do JavaScript.

A Figura 1 ilustra a árvore DOM e seus elementos:

 ATENÇÃO

Deve-se tomar cuidado para não mover códigos ou scripts incluídos que sejam necessários à correta visualização ou aos comportamentos da página,
já que os códigos movidos para o final só serão lidos e interpretados após todo o restante da página.

Veja a seguir as duas formas citadas de inserção:

1      <!doctype html>

2      <html lang="pt-BR">

3      <head>

4      <meta charset="utf-8">

5      <title>Incorporando Javascript em Páginas HTML</title>

6      <!-- Incorporando um arquivo .js externo -->

7      <script src="script.js"></script>

 Figura 1: Árvore DOM (BARBOSA, 2017).

8      </head>

9      <body>

10      <div id="exibe_resultado"> Resultado da Multiplicação:  </div>

MANIPULANDO O DOM COM JAVASCRIPT 11      </body>

12      <!-- Incorporando códigos Javascript diretamente na página -->

Por meio do JavaScript, é possível inserir dinamicamente, em tempo de execução, novos elementos à árvore DOM, mesmo que estes não façam 13      <script type="text/javascript">

parte da estrutura inicial da página. Da mesma forma, é possível excluir e alterar elementos preexistentes ou dinamicamente criados. 14      //Com duas barras criamos um comentário de linha em Javascript

15      //Comentários de mais de uma linha podem ser feitos dentro de /* */

Esses elementos, porém, existirão somente enquanto durar a sessão atual do usuário. Ou seja, trata-se de uma manipulação dinâmica e
16      

dependente de estado, de ações e interações por parte do usuário, mas que se perderão quando ele sair da página.
17      var variavel; 
//Declarando uma variável cujo nome é 'variavel'

18      

19      variavel = 3 + 3; //
Atribuindo valores e aplicando uma operação matemática em uma variável

20      

TEMPO DE EXECUÇÃO 21      /* Utilizando a função nativa 'alert' para exibir uma caixa de

22      diálogo na tela cujo conteúdo será o valor da variável 'variavel' */

É a sessão ou duração da visita de um usuário a uma página. 23      alert(variavel); 

24      

25      var resultadoMultiplicacao = multiplique(10, 50);
// chamando a função 'multiplique' passando dois valores - 10 e 50

26      

27      //Manipulando a Árvore DOM a fim de exibir, dentro da DIV declarada no HTML, o resultado da multiplicação juntamente com o seu texto inicial

 DICA
28      var divLocal = document.getElementById('exibe_resultado');

29      /*

30      Neste ponto a variavel divLocal é um objeto que representa a div declarada no HTML.
VARIÁVEIS
31      Sendo um objeto é possível acessar seus atributos, como innerHTML, precedido do nome do objeto seguido de um '.'

32      */
São declaradas utilizando-se a palavra reservada “var”, sucedida pelo seu nome. Não devem ser utilizados caracteres especiais como nomes
33      divLocal.innerHTML += resultadoMultiplicacao;
de variáveis.
34      

Além disso, embora existam diferentes convenções, procure utilizar um padrão e segui-lo ao longo de todo o seu código para a nomeação das
35      //Definição da função 'multiplique' que recebe dois parâmetros - numero1 e numero2

variáveis, sobretudo as compostas.

36      function multiplique(numero1, numero2){

37      

38      /*

39      Declarando uma nova variável que guardará o resultado da operação de multiplicação;
 EXEMPLO
40      Iniciando a variável com o valor de 0.

41      */
Na linha 25, a palavra composta “resultado multiplicação” foi transformada em uma variável através do padrão camelcase, ou seja, a segunda palavra

42      var resultado = 0; 
(e demais palavras, quando for o caso) é iniciada com a primeira letra em maiúsculo.
43      

Outra característica importante de uma variável em JS é que, por se tratar de uma linguagem fracamente tipada, não é necessário declarar o tipo de
44      //Atribuindo à variável 'resultado' o valor resutante da multiplicação dos 2 parâmetros recebidos   
dados. Com isso, uma variável que armazenará um número (inteiro, decimal etc.) e outra que armazenará uma palavra (string, char etc.) são
45      resultado = numero1 * numero2;

declaradas da mesma forma.

46      

Após declaradas, as variáveis podem ser utilizadas sem a palavra reservada “var”, como visto nas linhas 19 e 33.
47      //Retornando (devolvendo) o valor da variável resultado

48      return resultado;

49      

50      }

51      </script>
LINGUAGEM FRACAMENTE TIPADA
52      </html>

 Figura 2: Formas de incorporação do JavaScript numa página HTML. Uma linguagem é dita fracamente tipada quando não é necessário informar o tipo de dado no momento de criação de uma variável.

 ATENÇÃO
ATRIBUIÇÃO
Baixe aqui o código usado na Figura 2

As variáveis precisam ser declaradas antes de sua utilização. Entretanto, há uma forma simplificada, vista na linha 25, na qual é feita uma
atribuição de valores no momento de declaração da variável “resultadoMultiplicacao”.

SINTAXE JAVASCRIPT
A Figura 2 mostra tanto as formas de inserção do JavaScript em uma página HTML (linhas 7 e 13) quanto alguns aspectos da sua sintaxe. Tais
aspectos serão vistos em detalhes a seguir, mas, antes de começarmos, é recomendado que você copie o código anterior e o execute – pode ser em
A respeito da atribuição de valores, é importante frisar que, embora declarados da mesma maneira, os tipos de dados são atribuídos de formas
distintas. Um número, por exemplo, pode ser atribuído diretamente a uma variável, enquanto uma string precisará estar envolta em aspas – simples
ou duplas. A linha 13 mostra dois números sendo atribuídos à “variável”.
Veja o exemplo a seguir, no qual atribuímos uma string a uma variável:

seu computador ou utilizando uma ferramenta de codificação online, como o CodePen ou JSFiddle. Você pode copiar direto do box, ou utilizar o
arquivo Figura 2.

VAR NOMEDISCIPLINA = “JAVASCRIPT”

 DICA

Serão utilizados os números das linhas do editor, vistos na imagem, para facilitar a localização dos fragmentos e elementos abordados.

VAR NOMEDISCIPLINA = ‘JAVASCRIPT’
 COMENTÁRIO

Existem duas formas de inserir comentários no código JavaScript: para os comentários de apenas uma linha, utilizam-se as duas barras “//”. Para os
de múltiplas linhas, utiliza-se “/*” e “*/”. Veja, por exemplo, as linhas 14, 15, 21 e 22.
PONTO E VÍRGULA
 
Repare o final de cada linha de código − todas foram terminadas com a utilização de um ponto e vírgula. Diferentemente de outras linguagens, em
JavaScript não é obrigatória a utilização de caracteres para indicar o final de uma linha de código, mas, seguindo uma linha de boas práticas, adote
uma convenção e a utilize em todo o seu código.
Salve a alteração e carregue novamente sua página.

OUTROS ELEMENTOS 
Repare que o alerta é exibido, mas a div “exibe_resultado” não recebeu o valor de resultado da multiplicação.
Ao longo do código apresentado na Figura 2, foram utilizados outros elementos. A seguir, na tabela 1, cada um deles será descrito:
Isso acontece porque, quando o código está no início da página, ele é lido pelo navegador antes que o restante seja renderizado.

LINHA

Portanto, a tag <div>, por exemplo, ainda não foi carregada e não está presente na árvore DOM.
ELEMENTO PARA QUE SERVE DO Caso queira manter o seu código no início e ter o mesmo resultado de quando ele fica ao final, é necessário utilizar um evento dentro do mesmo, o
CÓDIGO “onload”, e modificar seu código para utilizá-lo.

Exibir uma caixa de diálogo no navegador. Existem outras funções nativas de diálogo,
alert 23
inclusive para receber input de valores.
ONLOAD
Referenciar um elemento da árvore DOM através do valor do seu atributo “id”. Pesquise O evento “onload” pode ser usado quando queremos que algo seja carregado junto com o carregamento da página.
document.getElementById 28
também sobre document.getElementByClassName.

Propriedade DOM relativa ao conteúdo de um elemento. Permite tanto a inclusão quanto

innerHTML 33
a exclusão e a modificação do conteúdo do elemento.
TEORIA NA PRÁTICA
Operador de atribuição composta. A linha em questão poderia ser escrita de forma Ao longo deste tema, os exercícios práticos serão fundamentais para a fixação do conteúdo visto. Partindo do código utilizado na Figura 2, modifique-o
+= simplificada, com esse operador, ou em sua forma completa, como: “divLocal.innerHTML 33 da seguinte forma:
= divLocal.innerHTML + resultadoMultiplicacao”.
Peça ao usuário para inserir dois números inteiros positivos;

Palavra reservada, utilizada para indicar que será declarada uma função. É procedida
Armazene os números inseridos pelo usuário em duas variáveis;
function pelo nome da função e por parênteses. Caso receba parâmetros, eles devem ser 36
declarados dentro dos parênteses.
Crie uma função para dividir números inteiros;

Palavra reservada, utilizada para indicar o conteúdo a ser retornado pela função. Nem Exiba na tela uma caixa de diálogo com o resultado da divisão precedido pela frase “O resultado da divisão é igual a:”.
return todas as funções retornam valores. Logo, essa instrução só deve ser utilizada por funções 48
que retornem algum resultado. Caso queria ir além, crie uma calculadora para realizar as quatro operações matemáticas. Nesse caso, você precisará pedir ao usuário que escolha a
operação a ser realizada, além dos números de entrada.
 Tabela 1: Lista de elementos utilizados no código de exemplo.
RESOLUÇÃO
 Atenção! Para visualização
completa da tabela utilize a rolagem horizontal

No vídeo a seguir, o professor Alexandre Paixão nos apresenta um exercício resolvido. Vamos assistir!

CONSIDERAÇÕES ADICIONAIS SOBRE O CÓDIGO UTILIZADO COMO

EXEMPLO

Volte ao seu código e faça a seguinte modificação:

Mova o código que está entre as linhas 12 e 51, inclusive, para dentro da seção <head>.
1      body {
C) Com a utilização da linguagem JavaScript, é possível ter acesso à árvore DOM. Com isso, tarefas como a modificação de elementos existentes e a
2      <!doctype html>
inclusão de novos elementos, assim como conteúdos, se torna possível.
3      <html lang="pt-BR">

D) Os códigos JavaScript incorporados ao final da página não permitem a manipulação da árvore DOM, já que são interpretados apenas após o
4      <head>

carregamento de todos os elementos.

5      <meta charset="utf-8">

6      <title>Praticando Javascript - Exercício 1</title>

7      </head>

2. A RESPEITO DOS TIPOS E DA UTILIZAÇÃO DE VARIÁVEIS EM JAVASCRIPT, ASSINALE A AFIRMATIVA

8      <body>

INCORRETA:
9          

10      </body>

A) Os valores podem ser atribuídos no momento em que a variável é declarada.

11      

12      <script type="text/javascript">
B) Valores de qualquer tipo podem ser atribuídos da mesma forma.

13      
C) JavaScript é uma linguagem fracamente tipada. Logo, não é necessário informar o tipo de dado no momento de criação da variável.
14      var numero1 = prompt("Insira o primeiro número: ");

D) As variáveis precisam ser declaradas antes de serem utilizadas.

15      var numero2 = prompt("Insira o segundo número: ");

16      

17      var resultadoDivisao = divida(numero1, numero2); 

GABARITO
18      

19      alert('O resultado da divisão é igual a: ' + resultadoDivisao); 
1. A linguagem JavaScript é uma linguagem tipicamente do lado cliente, embora também usada, mais recentemente, no lado servidor. Sobre

20      
sua utilização no lado cliente, e mais precisamente sobre sua relação com o DOM, assinale a afirmativa correta:

21      function divida(numero1, numero2){
A alternativa "C " está correta.
22      

23      var resultado = 0; 

24      
Através de JavaScript, é possível manipular a árvore DOM, independentemente do modo de incorporação ao documento HTML. A única ressalva diz

25      resultado = numero1 / numero2;
respeito a eventos de manipulação que tentem acessar os nós e os elementos DOM antes que toda a página seja renderizada, como visto em um dos

26      
exemplos demonstrados.

27      return resultado;
2. A respeito dos tipos e da utilização de variáveis em JavaScript, assinale a afirmativa incorreta:
28      

A alternativa "B " está correta.

29      }

30      </script>

31      </html>
JavaScript é uma linguagem bastante flexível em relação à declaração e à utilização de variáveis. Entretanto, alguns cuidados são necessários, entre
eles a atribuição de valores do tipo string, que precisam ser englobados por aspas – duplas ou simples.

 ATENÇÃO

Baixe aqui o código usado no exercício.

MÓDULO 2

 Aplicar as estruturas de decisão e de repetição

VERIFICANDO O APRENDIZADO
ESTRUTURAS DE DECISÃO

1. A LINGUAGEM JAVASCRIPT É UMA LINGUAGEM TIPICAMENTE DO LADO CLIENTE, EMBORA TAMBÉM USADA,
MAIS RECENTEMENTE, NO LADO SERVIDOR. SOBRE SUA UTILIZAÇÃO NO LADO CLIENTE, E MAIS
PRECISAMENTE SOBRE SUA RELAÇÃO COM O DOM, ASSINALE A AFIRMATIVA CORRETA:

A) JavaScript permite que a estrutura inicial de uma página HTML seja modificada. Além disso, como também é uma linguagem com suporte do lado
servidor, ela permite que esses códigos HTML modificados sejam salvos na página HTML original.

B) Um script JS pode ser incluído tanto no corpo do documento HTML como através de um arquivo externo. A diferença principal entre essas duas
formas está no fato de que o código inserido diretamente na HTML faz parte da árvore DOM – sendo, portanto, a única forma de manipular os
elementos dessa interface.


Fonte: Adnrey/Shutterstock Fonte: Shutterstock

Segundo Flanagan (2011), as estruturas de decisão, também conhecidas como “condicionais”, são instruções que executam ou pulam outras  Figura 3: Fluxo normal e fluxo alternativo.

instruções dependendo do valor de uma expressão especificada. São os pontos de decisão do código, também conhecidos como ramos, uma vez Nas linguagens de programação, utilizamos as instruções condicionais para implementar o tipo de decisão apresentado no exemplo. Em JavaScript,
que podem alterar o fluxo do código, criando um ou mais caminhos. estão disponíveis as instruções " if/else" e "switch". Tais instruções serão apresentadas a seguir.

Para melhor assimilação do conceito, vamos usar um exemplo a partir do código construído no módulo anterior:

As orientações do programa diziam que deveria ser realizada a divisão de dois números inteiros positivos.

IF
Entretanto, o que acontece se o usuário inserir um número inteiro que não seja positivo?

Ou como forçá-lo a inserir um número positivo? A sintaxe da instrução "if/else" em JavaScript possui algumas formas. A primeira e mais simples é apresentada do seguinte modo:

Para essa função, podemos utilizar uma condição. Ou seja: if (condição) instrução

“... Caso o usuário insira um número inteiro não positivo, avise a ele que o número não é válido e peça que insira um número válido ...” Nessa forma, é verificada uma única condição. Caso seja verdadeira, a instrução será executada. Do contrário, não.

Nesse caso, o fluxo normal do programa é receber dois números positivos, calcular a divisão e exibir o resultado. Perceba que a condição cria um Antes de continuarmos, é importante destacar os elementos da instrução:

novo fluxo, um novo ramo, onde outro diálogo é exibido e o usuário, levado a inserir novamente o número. Ela é iniciada com a palavra reservada “if”.


O fluxo normal e o fluxo resultado da condicional podem ser vistos na Figura 3, a seguir. Nela, são apresentados os passos correspondentes ao nosso
exercício, separando as ações do programa e também as do usuário.

Repare que a verificação “é um nº inteiro positivo” permite apenas duas respostas: “sim” e “não”. Tal condição, mediante a resposta fornecida, é
responsável por seguir o fluxo normal do código ou o alternativo. Dentro de parênteses, é inserida a condição (ou condições, como veremos a seguir).

 DICA

Por fim, é inserida a instrução a ser executada caso a condição seja verdadeira.

Observação: o fluxograma de exemplo foi simplificado para fornecer mais detalhes. Logo, a respectiva notação padrão não foi utilizada em sua Outro detalhe importante: caso exista mais de uma instrução para ser executada, é necessário envolvê-las em chaves. Veja o exemplo:

confecção. 1      if (condição1 && condição2){

2      instrução1;

3      instrução2;

4      }

Nesse segundo caso, além de mais de uma instrução, também temos mais de uma condição. Quando é necessário verificar mais de uma condição,
em que cada uma delas precisará ser verdadeira, utilizamos os caracteres “&&”.

Na prática, as instruções 1 e 2 só serão executadas caso as condições 1 e 2 sejam verdadeiras. Vamos a outro exemplo:

1      if (condição1 || condição2){

2      instrução1;

3      instrução2;

4      }

Repare que, nesse código, os caracteres “&&” foram substituídos por “||”. Esses últimos são utilizados quando uma OU outra condição precisa ser
verdadeira para que as instruções condicionais sejam executadas.
E o que acontece se quisermos verificar mais condições? 
ELSE IF
Nesse caso, podemos fazer isso tanto para a forma onde todas precisam ser verdadeiras, e separadas por “&&”, quanto para a forma onde apenas
uma deve ser verdadeira, separadas por “||”. Além disso, é possível, ainda, combinar, numa mesma verificação, os dois casos. Veja o exemplo:
Veja o exemplo a seguir:
1      if ( (condição1 && condição2) || condição3){

1      if (numero1 < 0){

2      instrução1;

2      instrução1;

3      instrução2;

3      }else if(numero == 0){

4      }

4       instrução2;

Nesse fragmento, temos as duas primeiras condições agrupadas por parênteses. A lógica aqui é: 5      }else{

6       instrução3;

Execute as instruções 1 e 2 SE ambas forem verdadeiras OU se a condição 3 for verdadeira.

7      }

Por fim, há outra forma: a de negação.

Repare que uma nova instrução foi utilizada no fragmento. Trata-se da "else if", utilizada quando queremos fazer verificações adicionais, sem
Ou seja, como verificar se uma condição é falsa (ou não verdadeira)? agrupá-las todas dentro de um único "if". Além disso, repare que, ao utilizarmos essa forma, caso nenhuma das condições constantes no "if" e
no(s) "if else" seja atendida, ao final a instrução "else" será executada obrigatoriamente.
Veja a seguir:

1      if (!condição1){

2      instrução1;

3      instrução2;

SWITCH
4      }

A instrução "switch" é bastante útil quando uma série de condições precisa ser verificada. É bastante similar à "else if". Vejamos:
O sinal “!” é utilizado para negar a condição. As instruções 1 e 2 serão executadas caso a condição 1 não seja verdadeira.
1      Switch(numero1){

2      Case < 0:

3      instrução1;

ELSE 4      Break;

5      Case == 0:

A instrução "else” acompanha a instrução "if". Logo, embora não seja obrigatória, como vimos nos exemplos, sempre que a primeira for utilizada, 6      instrução2;

deve vir acompanhada da segunda. O "else" indica se alguma instrução deve ser executada caso a verificação feita com o "if" não seja 7      Break;

atendida. Vejamos: 8      Default:

9      instrução3;

If(número fornecido é inteiro e positivo){

10      Break;

    Guarde o número em uma variável;

11      }

}else{ Em linhas gerais, o código anterior é igual e tem a mesma função do visto no exemplo de "else if". Veja a seguir:

    Avise ao usuário que o número não é válido;

Nele, após o "Swicth" dentro de parênteses, temos a condição a ser verificada.

    Solicite ao usuário que insira novamente um número;

Perceba que o "else" (senão) acompanha o "if" (se). Logo, SE as condições forem verdadeiras, faça isto. SENÃO, faça aquilo.

A seguir, temos os “Case”, em quantidade equivalente às condições que queremos verificar.

 DICA 
Dentro de cada “Case” temos a(s) instrução(ões) e o comando “Break”.
Uma observação importante: no último fragmento foi utilizado, de forma proposital, português-estruturado nas condições e instruções. Isso porque,
mais adiante, você mesmo codificará esse "if/else" em JavaScript.


Por fim, temos a instrução “Default”, que será executada caso nenhuma das condições representadas pelos “Case” sejam atendidas.

PORTUGUÊS-ESTRUTURADO

Linguagem de programação ou pseudocódigo que utiliza comandos expressos em português.

BREAK
 O comando “Break” indica que, satisfeita a condição do "Case" e tendo sido executada(s) a(s) sua(s) instrução(ões), o fluxo do programa
Veja o fragmento a seguir para entender o comportamento do laço “while” (enquanto):
deverá sair do “Switch”, ou seja, nenhuma outra condição dele deverá/precisará ser verificada.
1      var contador = 0;

2      while(contador < 10){

3      alert(contador);

4      contador++;

ESTRUTURAS DE REPETIÇÃO 5      }

Esse código tem o mesmo resultado que o visto no exemplo utilizando o laço “for”. Sua sintaxe é simples: “Enquanto uma condição fornecida for
Essas estruturas – também chamadas de laços – permitem que uma ação seja executada de forma repetitiva. Em nosso exercício, por exemplo,
verdadeira, faça isso."
temos uma ação recorrente, que é a de solicitar ao usuário que insira um número. Se fosse executada dentro de um laço, o nosso código diminuiria,
facilitando o trabalho.

A sintaxe de uma estrutura de repetição pode ser vista no fragmento de código apresentado na Figura 4, a seguir. Após ler o código e os comentários
explicativos, execute-o e veja o resultado. Você pode copiar direto do box a seguir, ou utilizar o arquivo Figura 4.
DO/WHILE

Embora semelhante ao laço "while", temos uma diferença fundamental entre eles:

“do/while”
FOR
A condição é testada no final.


Sobre a sintaxe apresentada na Figura 4, temos o laço “for”, um dos presentes em JavaScript. Em sua forma mais comum, temos uma variável, que
chamamos normalmente de contador, que recebe um valor inicial (no exemplo, 0) e é incrementada (pelo “++”) até atingir uma condição (ser menor
que 10).

1      var contador;

“while”
2      for (contador = 0; contador < 10; contador ++){

3      
A condição é testada no início.
4          //As instruções incluídas aqui serão executadas 10 vezes

Com isso, pelo menos uma instrução será, obrigatoriamente, executada. Vejamos o exemplo:
5      

1      var contador = 0;

6          /*

2      do{

7          Serão exibidas 10 caixas de diálogo exibindo o valor da variável contador.

3      contador += 1;

8          O primeiro número será 0 e o último será 9 (repare que começamos com a nossa 

4      alert(contador);

9          variável contador recebendo o número 0 e sendo incrementada até ser menor do que 10, 

5      }while (contador < 10);

10          ou seja, até o número 9.

11          */
Execute o código e veja a diferença em relação ao utilizado no “while”.
12          alert(contador);

13      }

 Figura 4: Estrutura de repetição em JavaScript.

FOR/IN

Esse laço, assim como os demais em uma linguagem de programação, é bastante utilizado com arrays (vetor ou matriz contendo dados não

 ATENÇÃO ordenados. Veremos sobre eles no próximo módulo). Normalmente, precisamos percorrer o conteúdo de um array e manipular ou apenas exibir o seu
valor. Para isso, podemos fazer uso de laços. Na Figura 5, a seguir, serão apresentados dois fragmentos de código para uma mesma função − um

Baixe aqui o código usado na Figura 4 utilizando “for” e o outro, “for/in”.

1      var frutas = ['Laranja', 'Uva', 'Pera'];

2      

3      

 EXEMPLO
4      /*Imprimindo na caixa de diálogo o conteúdo do array 'frutas' utilizando o laço 'for'*/

5      for(var i = 0; i < frutas.length; i++){

Algumas variações possíveis nesse código seriam iniciar o contador em 1, por exemplo (o mais usual, em programação, é iniciarmos nossos índices
6          alert('Nome da Fruta contida no Array: ' + frutas[i]);

em zero), ou irmos até o número 10. Ou seja, no lugar do sinal de menor, utilizaríamos o “menor igual”, dessa forma: “ <= 10”. Teste também, em seu
7      }

código, essas variações e veja as diferenças.

8      

A seguir, veremos as outras estruturas de repetição, além do “for”, presentes na linguagem JavaScript. 9      /*Imprimindo na caixa de diálogo o conteúdo do array 'frutas' utilizando o laço 'for/in'*/

10      for(var fruta in frutas){

11          alert('Nome da Fruta contida no Array: ' + frutas[fruta]);

12      }

WHILE
 Figura 5: Comparação entre os laços “for” e “for/in”.
1. NO QUE CONCERNE ÀS ESTRUTURAS DE DECISÃO, MAIS PRECISAMENTE À INSTRUÇÃO “SWITCH”, ASSINALE
A AFIRMAÇÃO INCORRETA:

 ATENÇÃO A) Essa instrução serve para alterar o fluxo de execução de um programa.

B) Com essa instrução, conseguimos realizar verificações que não são possíveis apenas utilizando "if" e "else".
Baixe aqui o código usado na Figura 5.
C) Essa instrução é uma forma de reduzir a complexidade proveniente da utilização de vários "if" e "else".
Analisando o código, é possível notar as diferenças de sintaxe entre os laços “for” e “for/in”.
D) Essa instrução é utilizada para testar várias opções de condicionais.
No primeiro, em “for”, definimos uma variável contador (“i”) e deveremos percorrer o array “frutas” começando em seu índice 0 até o seu tamanho
(“length”).


2. OBSERVE O FRAGMENTO DE CÓDIGO A SEGUIR. APÓS A SUA EXECUÇÃO, QUAL O VALOR DA VARIÁVEL CONT
− EXIBIDA NA INSTRUÇÃO "ALERT(CONT)"?

VAR CONT = 1;

Já no “for/in”, declaramos uma variável contador (“fruta”) e dizemos ao código que percorra o array imprimindo o seu conteúdo a partir do índice DO{

fornecido – nesse caso, a variável “fruta”. CONT += 1;

}WHILE (CONT < 10);

ALERT(CONT);

A) 10

B) 1

C) 9

D) 11

GABARITO

1. No que concerne às estruturas de decisão, mais precisamente à instrução “switch”, assinale a afirmação incorreta:

A alternativa "B " está correta.

EXERCÍCIO COM ESTRUTURAS DE DECISÃO E DE REPETIÇÃO
No vídeo a seguir, o professor Alexandre Paixão nos apresenta um exercício resolvido demonstrando as estruturas de controle de decisão e de
A “switch”, assim como as instruções “if/else”, permite que o fluxo de um programa seja alterado a partir de verificações de condicionais. Logo, tais
instruções não se diferem, sendo a "switch" mais utilizada quando há muitas condições a serem verificadas, diminuindo assim a complexidade do
código caso fosse utilizado “if/else”.
2. Observe o fragmento de código a seguir. Após a sua execução, qual o valor da variável cont − exibida na instrução "alert(cont)"?

repetição. Vamos assistir!

var cont = 1;

do{

cont += 1;

}while (cont < 10);

alert(cont);

A alternativa "A " está correta.

O laço "do/while" executa a primeira instrução antes de testar a condição fornecida. Nesse caso, a instrução consiste em incrementar, de 1 em 1, o
valor da variável “cont”. Como se inicia em 1 e vai até 9, ao final o seu valor será 10.

VERIFICANDO O APRENDIZADO
MÓDULO 3

 Identificar o conceito de vetor e sua utilização em JavaScript

 Nesse exemplo, “Laranja”, “Uva” e “Limão” são os elementos do vetor “frutas”. Considerando que o índice de um array inicia-se em 0, temos: o

VETORES EM JAVASCRIPT conteúdo do vetor “frutas” na posição/índice 0 é “Laranja”; na posição/índice 1 é “Uva” ; e na posição/índice 2 é “Limão”.

A seguir, veremos como declarar e utilizar vetores na linguagem JavaScript.

CRIAÇÃO DE VETORES EM JAVASCRIPT

Em JavaScript, os vetores não possuem tipo, a exemplo do que vimos quando tratamos das variáveis. Logo, é possível criar um array composto
por números, strings, objetos e até mesmo outros arrays.

Em JS, um vetor pode ter, no máximo, 4.294.967.295 (232 – 2) elementos. Outra característica importante é que, em JavaScript, os arrays possuem
tamanho dinâmico, ou seja, não é necessário informar o tamanho do vetor ao declará-lo.

Vejamos mais alguns exemplos de criação de vetores em JS:

1      var alunos = []; //array vazio

2      var alunos = ['Alex', 'Anna', 'João']; // array de strings

3      var notas = [10.0, 9.5, 9.5]; // array de números decimais

Fonte: pixcon/Shutterstock
4      var mistura = ['Um', 2, 3, 'Quatro']; //array de diversos tipos de dados
Um vetor é uma estrutura de dados simples utilizada para armazenamento de objetos do mesmo tipo. É chamado, na literatura relacionada a
Outra forma de criação de vetores em JavaScript é usando o construtor (conceito relacionado à programação orientada a objetos) Array. Vejamos o
linguagens de programação, de array. Nesse contexto, é normalmente tratado em conjunto com outra estrutura: a matriz. Em linhas gerais:
exemplo:
Um vetor é um array unidimensional.
1      var alunos = new Array();


2      var alunos = new Array('Alex', 'Anna', 'João');

A matriz é um array multidimensional (um vetor de vetores). ACESSO E EXIBIÇÃO DE ELEMENTOS DO VETOR
A função prática de um vetor é simplificar a utilização de variáveis.
Em termos de acesso aos elementos de um array, a forma mais simples é utilizando o seu índice. Vamos ao exemplo:
No exemplo do módulo anterior, vimos que eram necessárias duas variáveis para guardar os números solicitados ao usuário. Com a utilização de um
1      var alunos = ['Alex', 'Anna', 'João']; // array de strings

vetor, porém, precisaríamos de apenas uma variável, de duas posições.

2      alert(alunos[0]); // exibirá “Alex” na caixa de diálogo

A função “alert”, imprimirá o conteúdo da posição zero do array “alunos”, ou seja, “Alex”;

 ATENÇÃO
Seguindo a mesma lógica, se quiséssemos imprimir “João”, utilizaríamos o índice 2;

Embora possa parecer sem importância o uso de arrays nesse caso, imagine, por exemplo, que seja necessário armazenar as notas de 50 alunos
para, ao final, calcular as respectivas médias. Seriam necessárias 50 variáveis (ou apenas 1 array). Outra forma de acessar e exibir os elementos de um vetor é usando um laço de repetição. Veja novamente o exemplo contido na Figura 5. 

O JavaScript possui métodos nativos para tratamento de arrays. Em termos de acesso e manipulação, veremos agora como utilizar o push. Nos
próximos tópicos, outros métodos serão apresentados.


SAIBA MAIS

Cabe destacar, ainda, que os vetores são vistos também na Matemática:

“Tabela organizada em linhas e colunas no formato m x n, sendo m o número
de linhas e n, o de colunas.”
PUSH

Para compreender em que situações o método push pode ser útil, vamos voltar ao nosso vetor “alunos”. Imagine que, após ter sido declarado
inicialmente com 3 valores, seja necessário incluir novos valores a esse array, em tempo de execução. O método push, cuja sintaxe pode ser vista

COMPOSIÇÃO DOS VETORES logo a seguir, nos auxilia nessa tarefa.

nome_do_array.push(valor)
Um vetor é composto por uma coleção de valores, onde cada um deles é chamado de elemento. Além disso, cada elemento possui uma posição
Usando nosso array de exemplo, poderíamos adicionar um novo elemento desta forma:
numérica dentro do vetor, conhecida como índice. Veja, no exemplo a seguir, usando notação da linguagem JavaScript, um array contendo nomes de
1      alunos.push('Helena');

frutas:
É possível, ainda, inserir múltiplos valores utilizando push:
1      var frutas = ['Laranja', 'Uva', 'Limão'];

1      alunos.push('Helena', 'Maria');

 Utilize o método delete para remover um elemento de um vetor.

OUTRAS FORMAS DE ADICIONAR ELEMENTOS A UM VETOR

Como mencionado, há outras maneiras de adicionar elementos a um array de forma dinâmica. A primeira delas pode ser vista a seguir: 
1      frutas[frutas.length] = 'Maria'; Em seguida imprima (utilizando alert, por exemplo) o tamanho do array (usando a propriedade length).


Nesse caso, devemos utilizar o tamanho do array para informar que desejamos adicionar um novo elemento. Isso pode ser feito informando o número,
caso o saibamos, ou de forma dinâmica, usando a propriedade length − que retorna justamente o tamanho do array. Essa importante propriedade
será apresentada logo adiante.
Veja que o tamanho do array permanece igual ao inicial, antes da utilização do delete.

Isso acontece porque esse método não remove o valor, apenas o torna indefinido (undefined). 

SPLICE

O splice é um método multiuso em JavaScript. Ele serve tanto para excluir elementos de um array, como veremos a seguir, como para substituir e OUTROS MÉTODOS PARA REMOVER ELEMENTOS DO VETOR
inserir. Sua sintaxe é:

Array.splice(posição,0,novo_elemento,novo_elemento,...) A linguagem JavaScript possui, além de "delete", outros 4 métodos para remoção de elementos, conforme veremos a seguir:

Onde:

‘posição’ é o índice onde o novo elemento será incluído;

POP
‘0’ indica ao método que nenhum elemento do array será excluído;
Este método, que não recebe parâmetros, remove um elemento do final do array, atualizando seu tamanho. Sua sintaxe é:

‘novo_elemento’ é o novo elemento que se deseja adicionar ao array.  frutas.pop();

Vejamos um exemplo prático:

1      var alunos = ['Alex', 'Anna', 'João'];

2      alunos.splice(3,0,'Helena');

SHIFT
3      alert(alunos); //imprimirá 'Alex', 'Anna', 'João', 'Helena'

Embora similar ao pop, este método remove um elemento do início do array. Após a remoção, este é reindexado (ou seja, o elemento de índice 1
Além disso, com esse método também é possível substituir um dos elementos do array. Veja o exemplo a seguir:
passa a ser o de índice 0 e assim sucessivamente). Além disso, o tamanho do array também é atualizado. Sua sintaxe pode ser vista a seguir:
1      var alunos = ['Alex', 'Anna', 'João'];

frutas.shift();
2      alunos.splice(1,1,'Helena');

3      alert(alunos); //imprimirá 'Alex, 'Helena', 'João'

Aqui, ao passarmos o número 1 como segundo parâmetro, informamos ao método que um elemento, o de índice 1, deveria ser excluído. Entretanto,
como inserimos ao final o nome ‘Helena’, o método realizou a substituição do elemento excluído pelo novo elemento inserido. 
SPLICE
A propriedade length 
Este método, introduzido anteriormente, pode ser usado para exclusão de elementos. Para tanto, ele recebe como parâmetros a quantidade de
Uma das necessidades mais comuns quando se trabalha com arrays é saber o seu tamanho. Como vimos em alguns de nossos exemplos, em elementos que se deseja eliminar e o índice a partir do qual estes serão excluídos. A sintaxe a seguir demonstra a remoção de 2 elementos, a
JavaScript está disponível a propriedade length, que retorna o tamanho, ou número de elementos, de um array. partir do índice 2, do array fornecido:

Sua sintaxe é: var primos = [2,3,5,7,11,13,17];

nome_do_array.length primos.splice(2,2);

alert(primos); //imprimirá 2,3,11,13,17

Nesse método, para fins de remoção, o primeiro parâmetro indica o índice e o segundo, a quantidade de elementos a serem excluídos.
REMOÇÃO DE ELEMENTOS DO VETOR
A remoção de elementos de um array, em JavaScript, pode ser feita com a utilização do método nativo delete. Vejamos como esse método funciona
utilizando nosso array de exemplo:
OUTRAS FORMAS DE REMOVER ELEMENTOS DO VETOR
1      delete frutas[0];
Existem outras maneiras para excluir elementos de um array. Uma forma simples é determinar o tamanho, utilizando a propriedade length, do

Como visto, sua sintaxe é composta pelo nome do método, delete, pelo nome do array e pelo índice do elemento que queremos remover. array. Isso fará com que este seja reduzido ao novo tamanho informado. Vejamos o exemplo prático:

Esse método possui uma particularidade: embora o valor seja excluído do array, este não é ‘reorganizado’, permanecendo com o mesmo tamanho. var primos = [2,3,5,7,11,13,17];

Faça o teste: alert(primos.length); //imprimirá 7

primos.length = 4; 28      alert(alunos); //imprimirá 'Alex', 'Anna', 'João', 'Helena'

29      

alert(primos.length); //imprimirá 4
30      

Nesse exemplo, ao definirmos o tamanho do array como 4, este será reduzido, sendo mantidos os elementos do índice 0 ao 3 e excluídos os demais.
31      var alunos = ['Alex', 'Anna', 'João'];

32      alunos.splice(1,1,'Helena');

33      alert(alunos); //imprimirá 'Alex, 'Helena', 'João'


SAIBA MAIS 34      

35      delete frutas[0];

Existe, ainda, outro método para a remoção de elementos de um array: filter. Entretanto, ele não modifica o vetor original, mas cria um novo a 36      

partir deste. Esse método utiliza uma sintaxe mais complexa, assim como conceitos e funções de call-back que fogem ao escopo deste tema. 37      frutas.pop();

38      

39      frutas.shift();

40      

TEORIA NA PRÁTICA 41      

42      var primos = [2,3,5,7,11,13,17];

Conhecendo as estruturas de decisão e de repetição e os conceitos e exemplos de utilização de vetores, chegou a hora de praticar. 43      primos.splice(2,2);

44      alert(primos); //imprimirá 2,3,11,13,17

Teremos, a seguir, dois exercícios:

45      

O primeiro será mais simples; 46      

47      var primos = [2,3,5,7,11,13,17];

O segundo será um desafio, pois exigirá a pesquisa e o estudo de conteúdos adicionais, uma vez que não vimos todos os conceitos necessários 48      alert(primos.length); //imprimirá 7

para resolvê-lo. 49      primos.length = 4;

50      alert(primos.length); //imprimirá 4

Vamos a eles:
Baixe aqui o código usado na exercício.
1. Junte em um único arquivo todos os códigos vistos ao longo deste último módulo e execute-os novamente. Isso ajudará a fixar o conteúdo.
2. Faça um programa em JavaScript que: 
RESOLUÇÃO
Solicite ao usuário que insira dois números inteiros positivos;
1      var frutas = ['Laranja', 'Uva', 'Limão'];

2      

Utilize um vetor para armazenar esses dois números;

3      

4      var alunos = [];  //array vazio

Verifique se os números inseridos são inteiros positivos. Caso contrário, solicite ao usuário para inseri-los novamente;
5      var alunos = ['Alex', 'Anna', 'João']; // array de strings

6      var notas = [10.0, 9.5, 9.5]; //array de números decimais

Divida os dois números inteiros positivos;

7      var mistura = ['Um', 2, 3, 'Quatro']; //array de diversos tipos de dados
8      

Imprima na tela o resultado da divisão.

9      

10      var alunos = new Array();
Observações:
11      var alunos = new Array('Alex', 'Anna', 'João');

12      
Há mais de uma forma de desenvolver o programa. Logo, não há código certo ou errado.

13      var alunos = ['Alex', 'Anna', 'João']; // array de strings

14      alert(alunos[0]); //exibirá “Alex” na caixa de diálogo
Você pode utilizar funções JavaScript para melhor organizar o seu código. Inclusive, pode usar um pouco de recursividade. 

15      

O código relacionado a uma das formas de resolver esse desafio está disponível a seguir:
16      

17      alunos.push('Helena');
RESOLUÇÃO
18      

19      

20      alunos.push('Helena', 'Maria');

21      

22      

23      frutas[frutas.length] = 'Maria';

24      

25      

26      var alunos = ['Alex', 'Anna', 'João'];

1      

27      alunos.splice(3,0,'Helena');

2      //Declaração do array 'numeros' sem tamanho definido e sem elementos atribuídos

3      var numeros = [];
57          //Os números a serem divididos são acessados através dos índices do array

4      
58          resultado = numeros[0] / numeros[1];

5      //O primeiro elemento (o de índice 0) recebe o retorno da função que solicita o primeiro número
59          return resultado;

6      numeros[0] = soliticaPrimeiroNumero(); 60      }

7      

Baixe aqui o código usado no exercício.

8      //O segundo elemento (o de índice 1) recebe o retorno da função que solicita o segundo número

9      numeros[1] = soliticaSegundoNumero();

10      

11      //Declaração de atribuição de valor à variável que armazenará o resultado da divisão
VERIFICANDO O APRENDIZADO
12      //O resultado da divisão virá da função 'divida' (esse função recebe como parâmetro o array 'numeros')

13      var resultadoDivisao = divida(numeros);

14      

15      //Exibindo o resultado da divisão na tela 1. EM RELAÇÃO AOS CONCEITOS E AO USO DE VETORES EM JAVASCRIPT, ASSINALE A AFIRMATIVA INCORRETA:
16      alert('O resultado da divisão é igual a: ' + resultadoDivisao); 

17      
A) Um vetor, ou array, é um grupo de variáveis que contém valores, do mesmo tipo ou de tipos diferentes.
18      /*

B) Um array, em JavaScript, só permite dados do mesmo tipo.

19      Função Javascript

20      Esta função não recebe parâmetros
C) Em JavaScript, o primeiro elemento de um array tem o índice igual a 0.

21      */
D) Em JavaScript, podemos acessar o último elemento de um array da seguinte forma: vetor[vetor.length-1].
22      function soliticaPrimeiroNumero(){

23          //Declaração e atribuição de variável. Ela receberá o número inserido pelo usuário

24          var numero1 = prompt("Insira o primeiro número: ");

2. DESEJA-SE EXCLUIR O ÚLTIMO ELEMENTO DO ARRAY ABAIXO. ASSINALE A ALTERNATIVA CUJO MÉTODO NÃO
25          

PODE SER APLICADO PARA REALIZAR ESSA AÇÃO:

26          //Condição para verificar se o número é positivo.

27          //Caso não, o retorno da função será chamar a própria função novamente.

VAR PARES = [2,4,6,8,10,12];

28          //  Esta operação será repetida até que um número válido seja inserido.

29          //Caso sim, retorna o valor inserido pelo usuário
A) pares.pop()
30          if(numero1 < 0){

B) pares.splice(5,1)
31              alert("O número precisa ser inteiro e positivo");

32              
C) pares.length = 5

33              //Este tipo de retorno, onde a própria função é chamada novamente, é conhecido como recursividade
D) pares.splice(6,0,0)
34              return soliticaPrimeiroNumero();

35          }else{

36              return numero1;
GABARITO
37          }

1. Em relação aos conceitos e ao uso de vetores em JavaScript, assinale a afirmativa incorreta:

38      }

39      
A alternativa "B " está correta.

40      function soliticaSegundoNumero(){

41          var numero2 = prompt("Insira o segundo número: ");

JavaScript permite que um array seja composto por dados de diferentes tipos.
42          

43          if(numero2 < 0){
2. Deseja-se excluir o último elemento do array abaixo. Assinale a alternativa cujo método não pode ser aplicado para realizar essa ação:

44              alert("O número precisa ser inteiro e positivo");

45              return soliticaSegundoNumero();
var pares = [2,4,6,8,10,12];

46          }else{
A alternativa "D " está correta.
47              return numero2;

48          }

49      }
Como visto, o método splice pode ser utilizado tanto para remover quanto para adicionar ou substituir elementos de um array. Quando usado para

50      
remover, sua sintaxe corresponde ao código visto na alternativa 'b', na qual indicamos o índice e a quantidade de elementos, a partir dele, a ser

51      /*
removida. Já a alternativa 'd' faz com que seja adicionado um novo elemento, com valor 0, após o índice 6.

52      Esta função recebe como parâmetro um array - que contém os 2 números que desejamos dividir

53      */

54      function divida(numeros){

55          var resultado = 0; MÓDULO 4
56          

 Reconhecer os recursos assíncronos Ajax e JSON Em relação aos recursos para realização de requisições, há dois disponíveis em JS: o objeto XMLHttpRequest e a interface Fetch API. 

REQUISIÇÕES ASSÍNCRONAS E SÍNCRONAS XMLHTTPREQUEST

Inicialmente, foi implementado no navegador Internet Explorer através de um objeto do tipo ActiveX. Posteriormente, outros fabricantes fizeram suas
implementações, dando origem ao XMLHttpRequest, que se tornou o padrão atual.

 DICA

Fonte: Eny Setiyowati/Shutterstock

Versões antigas do Internet Explorer só possuem suporte ao ActiveX.
O conceito de requisição, no ambiente Web, diz respeito às informações solicitadas ou submetidas no lado cliente − através do navegador, por
O XMLHttpRequest possui alguns métodos e propriedades. Alguns deles serão descritos após vermos um exemplo simples de sua utilização:
exemplo − e tratadas pelo lado servidor, que após processar a requisição devolverá uma resposta ao solicitante. Nesse sentido, são possíveis
1      <!doctype html>

dois tipos de requisições:

2      <html lang="pt-BR">

3      <head>

REQUISIÇÕES SÍNCRONAS 4          <meta charset="utf-8">

Quando realizadas, estas bloqueiam o remetente. Ou seja, o cliente faz a requisição e fica impedido de realizar qualquer nova solicitação até que a 5          <title>Requisição XMLHttpRequest</title>

anterior seja respondida pelo servidor. Com isso, só é possível realizar uma requisição de cada vez. 6      </head>

7      <body>

8          <h1>Imagens Aleatórios de Cachorros</h1>

REQUISIÇÕES ASSÍNCRONAS
9          <p>
Nestas não existe sincronismo. Logo, várias requisições podem ser realizadas em simultâneo, independentemente de ter havido resposta do servidor A partir do click no botão abaixo uma nova imagem aleatória de cachorros será carregada utilizando requisições assíncronas com XMLHttpRequest</p>
às solicitações anteriores. 10      

11          <img id="img_dog" src="" alt="Aguardando a imagem ser carregada" />

12          <br/>

13          <button onclick="carregarImagens()">Carregar Imagens</button>

 ATENÇÃO
14      </body>

15          <script type="text/javascript">

Em comparação com as requisições síncronas, deve-se dar preferência à utilização das assíncronas. Isso porque estas últimas não apresentam os
16      

problemas de desempenho e congelamento do fluxo da aplicação, naturais das síncronas.

17              function carregarImagens(){

18      

19                  var xmlHttpRequest = new XMLHttpRequest();

COMO AS REQUISIÇÕES ASSÍNCRONAS FUNCIONAM NA PRÁTICA 20                  var url = "https://dog.ceo/api/breeds/image/random"

21      

Para melhor entendimento de como as requisições assíncronas funcionam na prática, tomemos como exemplo o feed das redes sociais. Em tais 22                  xmlHttpRequest.open("GET", url, true);

páginas, novos conteúdos são carregados sem que seja necessário recarregar o navegador e, consequentemente, todo o conteúdo visto. 23      

24                  xmlHttpRequest.onreadystatechange = function() {

Eventos como a rolagem de tela, por exemplo, fazem com que os conteúdos sejam carregados do servidor e exibidos na tela do dispositivo.
25                      if (xmlHttpRequest.readyState == 3) {

25                          console.log('Carregando o conteúdo');

27                      }

AJAX - REQUISIÇÕES ASSÍNCRONAS EM JAVASCRIPT 28                      if (xmlHttpRequest.readyState == 4) {

29                          

30                          var jsonResponse = JSON.parse(xmlHttpRequest.responseText);

Em JavaScript, quando falamos de requisições assíncronas, naturalmente falamos de AJAX. Esse termo foi empregado pela primeira vez em 2005 e
31                          

engloba o uso não de uma, mas de várias tecnologias: HTML (ou XHTML), CSS, JavaScript, DOM, XML (e XSLT), além do elemento mais
32                          console.log('Requisição Finalizada');

importante, o objeto XMLHttpRequest.

33                          console.log('Resultado da Requisição: ' + jsonResponse);

A utilização de AJAX permite que as páginas e aplicações Web façam requisições a scripts do lado servidor e carreguem, de forma rápida e muitas
34                          console.log('Resultado da Requisição: ' + jsonResponse.message);
vezes incremental, novos conteúdos sem que seja necessário recarregar a página inteira.
35                          

Embora o “X” no acrônimo se refira a XML, esse não é o único formato disponível. Além dele, temos: o HTML, arquivos de texto e o JSON, sendo 36                          var imgDog = document.getElementById("img_dog");

esse último o mais utilizado atualmente. Veremos sobre ele mais adiante.  37                          imgDog.src = jsonResponse.message;

38                      }

39                  };

40                  
OUTROS MÉTODOS E PROPRIEDADES 
41                  xmlHttpRequest.send(null);

42              
A Figura 6 mostra um exemplo simples do que é possível fazer utilizando AJAX. Além disso, apenas algumas propriedades e métodos foram vistos.
43              }

44          </script>

45      </html>

46      


SAIBA MAIS
47      

Na seção Explore +, estão disponíveis sugestões de conteúdo que permitirão um aprofundamento nesse tema. É recomendável a leitura desse
48      

material, assim como a implementação e até mesmo modificação do código anterior para uma melhor assimilação do conteúdo.
49      

 Figura 6: Exemplo de requisição utilizando XMLHttpRequest.

API FETCH
 ATENÇÃO
Essa API é, em termos conceituais, similar à XMLHttpRequest – ou seja, permite a realização de requisições assíncronas a scripts do lado
servidor. Entretanto, por ser uma implementação mais recente, essa interface JavaScript apresenta algumas vantagens, como:
Baixe aqui o código usado na Figura 6.

O código na Figura 6 contém tanto funcionalidades JavaScript vistas neste tema quanto algumas novas, além do XMLHttpRequest, que veremos O uso de promise;

mais adiante. Ao utilizar esse código, você terá um exemplo real de dados sendo requisitados a um servidor − nesse caso, uma API que retorna
imagens aleatórias de cachorros − e exibidos na página, sem que ela seja recarregada a cada nova requisição/click no botão. O fato de poder ser utilizado em outras tecnologias, como service workers, por exemplo.

Por ora, vamos nos concentrar no XMLHttpRequest. Utilizando as linhas contidas no código presente na figura anterior, veja: A Figura 7 apresenta o mesmo exemplo utilizado na Figura 6, mas substituindo o XMLHttpRequest pela API Fetch. A seguir, alguns métodos e
propriedades serão apresentados:
Na linha 19 uma instância do objeto é criada. Esse é o primeiro passo para sua utilização. A partir desse ponto, toda referência deverá ser feita
pelo nome da variável utilizada (em nosso exemplo, xmlHttpRequest); 

A linha 22 mostra a utilização do método open, que recebe 3 parâmetros:

PROMISE
O método de requisição dos dados.

A url remota/do servidor que queremos acessar. O promise (promessa) é um objeto utilizado para processamento assíncrono, representando um valor que pode estar disponível agora, no futuro

O tipo de requisição – onde “true” define que será feita uma requisição assíncrona e “false”, uma síncrona. Esse argumento é opcional. Logo, pode não ou nunca.

ser definido, assumindo o valor padrão “true”.

Continuando o código, na linha 24 temos a propriedade “onreadystatechange”, que monitora o status da requisição XMLHttpRequest –
propriedade “readyState” − e especifica uma função a ser executada a cada mudança; 

Repare, agora, na linha 25: o status 3 significa que a requisição ainda está sendo processada. Logo, poderíamos, por exemplo, exibir em nossa SERVICE WORKERS
tela uma mensagem (ou imagem, como é muito comum) avisando que a informação requisitada está sendo carregada. Perceba que,
dependendo do tempo de resposta do servidor remoto, nem sempre será possível ver essa informação;  Scripts executados em segundo plano no navegador, separados da página web.

Já na linha 28 temos o tratamento do status quando ele for igual a 4, ou seja, quando a requisição estiver concluída. Além da propriedade 1      <!doctype html>

“readyState”, poderíamos também monitorar a propriedade “status”, que armazena o código de resposta do servidor Http utilizado pela 2      <html lang="pt-BR">

XMLHttpRequest;  3      <head>

4          <meta charset="utf-8">

Seguindo o código de exemplo, na linha 30 vemos a propriedade “responseText”. Além dela, está disponível também a “responseXML”. 5          <title>Requisição XMLHttpRequest</title>

Ambas dizem respeito a como trataremos o retorno da requisição: se como texto, no caso da primeira, ou como XML, no caso da segunda;   6      </head>

7      <body>

Ainda na linha 30, repare que também foi utilizado outro método, o parse. Esse método não pertence ao objeto XMLHttpRequest, mas este é 8          <h1>Imagens Aleatórios de Cachorros</h1>

necessário quando o recurso requisitado devolve o conteúdo em formato JSON;  9          <p>A partir do click no botão abaixo uma nova imagem aleatória de cachorros será carregada utilizando requisições assíncronas com XMLHttpRequest<

10      

Por fim, na linha 41 é utilizado o método send, que envia a requisição.  11          <img id="img_dog" src="" alt="Aguardando a imagem ser carregada" />

12          <br/>

13          <button onclick="carregarImagens()">Carregar Imagens</button>

14      </body>

15          <script type="text/javascript">
JSON
16      

17              function carregarImagens(){
JSON pode ser traduzido para Notação de Objetos JavaScript. Trata-se de um tipo, ou formatação, leve para troca de dados. Essa, inclusive, é sua
18                  
principal vantagem em relação aos outros tipos. Além disso, destaca-se também a sua simplicidade, tanto para ser interpretado por pessoas quanto
19                  var url = "https://dog.ceo/api/breeds/image/random" 
por “máquinas”.
20                  fetch(url, { 

21                      method: 'get' 

22                  })

23                  .then(function(response) { 
 COMENTÁRIO
24                      response.json().then(function(data){

25                          console.log('Resultado da Requisição: ' + data.message); 
O JSON, embora normalmente associado ao JavaScript – tendo sido definido, inclusive, na especificação ECMA-262, de dezembro de 1999 –, é um

26                          
formato de texto, independente de linguagem de programação. Essa facilidade de uso em qualquer linguagem contribuiu para que se tornasse um dos

27                          var imgDog = document.getElementById("img_dog");
formatos mais utilizados para a troca de dados.

28                          imgDog.src = data.message;
A Figura 8 apresenta alguns exemplos da estrutura de um objeto JSON:
29                      });

30                  })

31                  .catch(function(err) { 
32                      console.error('O seguinte erro ocorreu durante a requisição: ' + err);

33                  });

34              

35              }

36          </script>

37      </html>

38      

39      

40      

Fonte: autor
41      

 Figura 8: Estrutura de objetos JSON.

 Figura 7: Exemplo de requisição utilizando API Fetch.
Como visto na imagem, um objeto JSON tem as seguintes características:

É composto por um conjunto de pares nome/valor. Na imagem, “status” é o nome de um objeto e “success”, o seu valor. Esses pares são
separados por dois pontos “:”;
 ATENÇÃO
Para separar pares, valores ou objetos é utilizada a vírgula;
Baixe aqui o código usado na Figura 7.

Em relação à sua sintaxe, podemos notar algumas semelhanças com a XMLHttpRequest: O objeto e seus pares são englobados por chaves “{ }”;

URL do servidor remoto, definida na linha 19 e utilizada na linha 21;

É possível definirmos arrays. Esses são englobados por colchetes “[ ]”. 

Fetch options – em nosso exemplo utilizamos apenas um parâmetro, o método. Tal parâmetro, inclusive, é opcional. Veja a linha 21, onde O JSON fornece suporte a uma gama de tipos de dados. Além disso, possui alguns métodos, como o JSON.parse(), visto em um de nossos exemplos.
declaramos o GET, que é o método padrão. Além desse parâmetro, há outros disponíveis;

Tipo de dado retornado pela requisição. Veja a linha 24, onde foi utilizado o objeto correspondente ao tipo de dado retornado pela requisição –
nesse caso, JSON. Há outros tipos de objetos, como texto e até mesmo bytes, sendo possível, por exemplo, carregar imagens, arquivos pdf, 
SAIBA MAIS
entre outros.
A seção Explore + sugere materiais adicionais sobre o tema. A leitura desse material é fortemente recomendada.

 ATENÇÃO
TEORIA NA PRÁTICA
Ainda em relação à sintaxe, merece destaque a forma, própria, como a API Fetch trata a requisição (request) e o seu retorno (response): quando o
Como mencionado, os códigos utilizados para a apresentação do XMLHttpRequest e da API Fetch são funcionais. Copie esses códigos e os execute
método fetch é executado, ele retorna uma promessa (promise) que resolve a resposta (response) à requisição, sendo esta bem-sucedida ou
para ver, na prática, o comportamento das requisições assíncronas. Você pode copiar direto do box, ou utilizar o arquivo Figura 8.
não.

Caso queira avançar um pouco mais, inclua outros elementos de interação na página que se comuniquem com servidores remotos;
 GABARITO
Outra boa ideia é pesquisar e utilizar alguma outra API que retorne outro tipo de conteúdo, diferente do que foi mostrado.
1. Sobre as requisições assíncronas em JavaScript − AJAX, é incorreto afirmar que:
 
A alternativa "A " está correta.
RESOLUÇÃO

Como discutido, as requisições assíncronas tornam a interação mais rápida no cliente, uma vez que a página não fica bloqueada, aguardando o
retorno do servidor. Isso torna possível que outras ações, incluindo novas requisições, sejam realizadas.

2. A respeito do JSON, é correto afirmar que:

A alternativa "A " está correta.

JSON é uma notação simples para troca de dados. Embora proveniente de uma especificação JavaScript, não é exclusivo desta linguagem.

Baixe aqui o código usado na Figura 8.

CONCLUSÃO
FRAMEWORKS JAVASCRIPT
A exemplo do que vimos nas demais tecnologias do lado cliente, no ambiente Web, existem inúmeros frameworks disponíveis também para
JavaScript.
CONSIDERAÇÕES FINAIS
Neste tema, abordamos a linguagem de programação lado cliente do JavaScript. Ao longo dos módulos, vimos conceitos e sintaxes − propriamente


SAIBA MAIS ditos ou a ela relacionados, como a interface DOM e as requisições assíncronas, desde as formas de inclusão em arquivos HTML à declaração e
utilização de variáveis.

Embora não faça parte do escopo deste tema, cabe destacar que a utilização desses recursos é uma grande aliada no desenvolvimento Web. Logo, Estudamos, ainda, outras estruturas de dados, como os arrays, e os conceitos de programação relacionados à função das estruturas de decisão e de
sempre que possível, é recomendada. repetição, bem como suas aplicações em JavaScript. Ao final, pudemos conhecer alguns recursos avançados, como o AJAX e o JSON. Para maior
compreensão do tema, cada módulo foi amparado com a apresentação de exemplos práticos e funcionais. Assim, temos certeza de que os
conhecimentos sobre o JavaScript aqui consolidados o ajudarão em sua vida acadêmica e profissional.

VERIFICANDO O APRENDIZADO

1. SOBRE AS REQUISIÇÕES ASSÍNCRONAS EM JAVASCRIPT − AJAX, É INCORRETO AFIRMAR QUE:

A) Essas requisições tornam a interação na página mais lenta, já que dependem do retorno de dados que são requisitados ao servidor.

B) Várias requisições podem ser realizadas a um mesmo servidor em paralelo.

C) O objeto utilizado para realização da requisição fica aguardando o retorno do servidor e é capaz de processar esse retorno, sendo esse bem-
AVALIAÇÃO DO TEMA:
sucedido ou não.

D) As requisições assíncronas não bloqueiam o cliente − por exemplo, o navegador Web −, permitindo que outras operações sejam realizadas
enquanto se aguarda o retorno da requisição.

REFERÊNCIAS
2. A RESPEITO DO JSON, É CORRETO AFIRMAR QUE:
BARBOSA, A. DOM. Publicado em: 4 set. 2017. 

A) O JSON é um formato leve de troca de informações e dados entre sistemas. FLANAGAN, D. JavaScript: The Definitive Guide. Califórnia: O’Reilly Media, 2011. 

B) Esse formato, cujo nome vem de JavaScript Object Notation, é exclusivo para a transmissão de dados na linguagem JavaScript. RAUSCHMAYER, A. Speaking JavaScript. Califórnia: O’Reilly Media, 2014.

C) Quando utilizamos JavaScript, JSON é o único formato de transmissão de dados disponível, uma vez que é nativo desta linguagem.

D) Não é possível transferir estruturas de dados mais complexas, como arrays, através de JSON.
EXPLORE+
Para saber mais sobre DOM, leia os textos:

Modelo de Objeto de Documento (DOM) e Examples of Web and XML development using the DOM, da comunidade Mozilla.

What is the Document Object Model, THE HTML DOM Document Object e JavaScript HTML DOM, do site W3schools. 

Acesse a jQuery, uma biblioteca de funções JavaScript. 

Leia AJAX −The XMLHttpRequest Object, do site W3 schools. 

Para aprender mais sobre JSON, leia:

JSON – Introduction, do site W3schools.

JSON e Trabalhando com JSON, da comunidade Mozilla. 

Acesse os sites das comunidades CodePen e JSFiddle para testar códigos HTML, CSS e JavaScript. 

Para aprofundar seus conhecimentos, leia: Promise; JavaScript – Método Filter; Fetch API e Usando Fetch, da comunidade Mozilla. 

Leia o texto Introdução aos service workers, de Matt Gaunt.

CONTEUDISTA
Alexandre de Oliveira Paixão
DEFINIÇÃO
 CURRÍCULO LATTES
A linguagem PHP (PHP: Hypertext Preprocessor), conceitos de programação, variáveis,
estruturas de decisão e de repetição, arrays e funções.

PROPÓSITO
Conhecer a linguagem de programação PHP, seus conceitos básicos e recursos disponíveis é
importante na formação do desenvolvedor Web do lado servidor.

PREPARAÇÃO
Para melhor compreensão do conteúdo deste tema, é recomendado um conhecimento básico
de lógica de programação e de HTML.
Para a aplicação dos exemplos, será necessário um editor de texto com suporte à marcação
PHP e um servidor Web com suporte à linguagem. Em relação ao editor, no sistema
operacional Windows é indicado o Notepad++. No Linux, o Nano Editor. Quanto ao servidor,
recomenda-se o Apache.
OBJETIVOS
MÓDULO 1
Examinar a linguagem de programação PHP e seus conceitos básicos
MÓDULO 2
Aplicar as estruturas de decisão e de repetição disponíveis em PHP
MÓDULO 3
Identificar conceitos relativos a vetores e funções em PHP
 Fonte: Shutterstock | Eny Setiyowati
INTRODUÇÃO
Como veremos neste tema, PHP é uma linguagem server side, gratuita e multiplataforma.
Logo, para ser executada, precisa de um servidor com suporte à linguagem. Entre os mais
utilizados estão o Apache, o IIS (da Microsoft) e o Nginx. A configuração desses ambientes
exige um conhecimento intermediário/avançado e pode ser realizada tanto localmente − em
computadores pessoais − quanto em servidores através de serviços contratados.
 DICA
É possível encontrar diversos tutoriais disponíveis na internet que orientam durante o processo
de configuração do ambiente PHP.
Normalmente, o ambiente relacionado ao PHP é chamado de AMP, onde temos a combinação
de três diferentes tecnologias comumente associadas: Apache (Servidor), Mysql ou MariaDB
(Sistema Gerenciador de Banco de Dados) e PHP. Uma opção simples para configuração do
AMP em computadores pessoais e que não requer instalação, já que pode ser apenas
executada, é o XAMPP. Outra alternativa aos editores e servidor mencionados são os
interpretadores online, como PHPTester, Write PHP Online e Online PHP Editor.
Vamos começar nossa jornada acessando os códigos-fontes originais propostos para o
aprendizado de PHP. Baixe o arquivo aqui, descompactando-o em seu dispositivo. Assim,
você poderá utilizar os códigos como material de apoio ao longo do tema!
MÓDULO 1
 Examinar a linguagem PHP e seus conceitos básicos
A LINGUAGEM PHP
 GATEWAY INTERFACE (CGI) ESCRITO EM LINGUAGEM
DE PROGRAMAÇÃO C (PHP).

 Fonte: Shutterstock | gdainti

EM JUNHO DE 1995, RASMUS LIBEROU O CÓDIGO-
O PHP é uma linguagem de script open source de uso geral. Muito utilizada, é especialmente
FONTE DO PHP TOOLS PARA O PÚBLICO, O QUE
adequada para o desenvolvimento Web e pode ser embutida dentro do HTML (PHP). PERMITIU QUE DESENVOLVEDORES USASSEM DA
A explicação anterior consta no site oficial do PHP, de onde os fragmentos a seguir também FORMA COMO DESEJASSEM. ISSO PERMITIU − E
foram retirados: ENCORAJOU − USUÁRIOS A FORNECEREM
CORREÇÕES PARA BUGS NO CÓDIGO E, EM GERAL,
APERFEIÇOÁ-LO. EM SETEMBRO DO MESMO ANO,
RASMUS EXPANDIU O PHP E − POR UM BREVE
PERÍODO − MUDOU O NOME, REFERINDO-SE, AGORA,
O QUE DISTINGUE O PHP DE ALGO COMO O À FERRAMENTA COMO FI, ABREVIAÇÃO PARA
JAVASCRIPT NO LADO DO CLIENTE É QUE O CÓDIGO "FORMS INTERPRETER". A NOVA IMPLEMENTAÇÃO
É EXECUTADO NO SERVIDOR, GERANDO O HTML INCLUIU ALGUMAS FUNCIONALIDADES BÁSICAS DO
QUE É ENTÃO ENVIADO PARA O NAVEGADOR. O PHP COMO BEM CONHECEMOS HOJE. TINHA
NAVEGADOR RECEBE OS RESULTADOS DA VARIÁVEIS NO ESTILO PERL, INTERPRETAÇÃO
EXECUÇÃO DESSE SCRIPT, MAS NÃO SABE QUAL AUTOMÁTICA DE VARIÁVEIS DE FORMULÁRIOS E
ERA O CÓDIGO-FONTE (PHP). SINTAXE HTML EMBUTIDA (PHP).

PHP, s.d.

Essas citações ajudam a entender o contexto e os propósitos iniciais da criação da linguagem.

O PHP, COMO É CONHECIDO ATUALMENTE, É NA Como veremos a seguir, a primeira finalidade do PHP foi interpretar, do lado servidor, os
formulários HTML, fornecendo, assim, dinamismo às páginas Web. Isso porque, com essa
VERDADE O SUCESSOR PARA UM PRODUTO
linguagem, é possível adicionar recursos como consulta a banco de dados, processamento e
CHAMADO PHP/FI. CRIADA EM 1994 POR RASMUS
tratamento de dados e consumo de recursos externos − como APIs −, entre tantas outras
LERDOF, A PRIMEIRA ENCARNAÇÃO DO PHP FOI UM possibilidades.

SIMPLES CONJUNTO DE BINÁRIOS COMMON

Para descrevermos a linguagem PHP, é necessário começar pela sua sintaxe básica,
apresentando as variáveis, os operadores e as formas de leitura de dados a partir da
integração com a HTML.
Por exemplo: “ola_mundo.php”. Ao serem interpretados pelo servidor, tanto o código HTML
quanto o código PHP, dentro das tags <?php e ?>, são convertidos em código HTML normal e
renderizados no navegador. O servidor Web pode ser configurado para interpretar scripts PHP
sem que seja necessário utilizar a extensão “.php”. Nesse caso, é usada outra extensão, ou
nenhuma − isso é útil quando não queremos revelar a linguagem utilizada em nosso site.

SINTAXE
TÉRMINO DE INSTRUÇÕES E COMENTÁRIOS

As instruções PHP devem ser, obrigatoriamente, terminadas com a utilização de ponto e

TAGS PHP
vírgula. Logo, ao final de cada comando, devemos indicar que ele foi terminado.

O script PHP deve ser iniciado pela tag “<?php” e fechado com a tag “?>”. Isso é necessário Em relação aos comentários, temos duas opções:

para que o servidor Web entenda qual código deve ser interpretado e qual deve ser apenas
renderizado, uma vez que tags HTML podem ser inseridas dentro de um arquivo contendo
código PHP. Veja o exemplo a seguir:
Os de uma linha são iniciados com duas barras: //
Os de múltiplas linhas são delimitados por /* e */
Veja a seguir os exemplos de finalização de comandos e de utilização de comentários:

  1 <?php

  2 //Comentários de uma linha são realizados com a utilização de barras duplas

  3

RENDERIZADO   4 /*

  5 Cada comando deve ser terminado com ;

Renderização é o processo pelo qual se obtém o produto final de um processamento

  6 Abaixo temos alguns exemplos de término de comandos

digital qualquer. Esse processo aplica-se essencialmente em programas de modelagem

  7 */

2D e 3D, bem como áudio e vídeo.

  8

  9 echo "Olá, mundo";

1 <!doctype html>
10 $var1 = 2 + 2;

2 <html lang="pt-BR">
11

3 <head>Primeiro código PHP com tags HTML</head>

12 echo "O Resultado da soma é igual a: " . $var1;

4 <body>

5 <h1>Título do texto</h1>

6 <p><?php echo "Olá, mundo"; ?></p>

7 </body>

 DICA
8 </html>

Repare que a tag de fechamento “?>” não é obrigatória quando temos apenas código PHP em
O código anterior poderia ser salvo como um script PHP.
um script.
 3 $ano_criacao = 1994;

VARIÁVEIS EM PHP 4 $flagLinguagemScript = true;

Repare que diversos tipos de dados foram utilizados e atribuídos às variáveis declaradas. Além
As variáveis são um dos principais recursos em uma linguagem de programação. Em PHP, a
disso, diferentes convenções de nomeação foram aplicadas – início com underscore;
definição de uma variável é feita com a utilização do símbolo “$” seguido do nome da mesma.
separação por underscore; CamelCase. É boa prática escolher um único padrão e utilizá-lo
No código de exemplo anterior, a variável “$var1” foi declarada e, ao mesmo tempo,
em todo o projeto.
inicializada.

Em PHP, diferentemente de linguagens como Java, não é necessário informar o tipo de

variável. Tal fato concede ao PHP a característica de linguagem fracamente tipada. Com
isso, não há diferenças no momento da criação de variáveis para receber dados numéricos,
textuais, alfanuméricos, entre outros.
CAMELCASE

CamelCase é a denominação em inglês para a prática de escrever as palavras

compostas ou frases, onde cada palavra é iniciada com maiúsculas e unidas sem
 ATENÇÃO espaços.

O único cuidado diz respeito ao momento de atribuição de valores, já que dados do tipo string,
por exemplo, precisam ser envolvidos por aspas duplas (“ ”) ou simples (‘ ’).

A respeito dos nomes das variáveis temos, ainda, as seguintes regras:

 ATENÇÃO
Os nomes de variável são case-sensitive. Logo, há diferença entre letras maiúsculas e
minúsculas. Em PHP, as variáveis não inicializadas possuem um valor padrão. Nas do tipo booleano, por
exemplo, o valor padrão é false. Logo, é recomendado − e também uma boa prática −
Para ser válido, o nome da variável deve começar com uma letra ou um sublinhado
inicializar as variáveis antes de utilizá-las, embora isso não seja obrigatório.
(underscore).

Após o primeiro caractere (letra ou sublinhado) podem ser utilizados letras, números e
sublinhados.

VARIÁVEIS DE REQUISIÇÃO HTTP

Na linguagem PHP estão disponíveis algumas variáveis predefinidas – também chamadas de
ATRIBUIÇÃO DE VALORES
superglobais. Entre elas, estão as de requisição HTTP: $_REQUEST, $_POST e $_GET. Em
linhas gerais, essas três variáveis têm a mesma função, ou seja, receber dados provenientes
A atribuição de valores a variáveis em PHP é realizada com a utilização do sinal de igual “=”.
de formulários HTML ou de outras requisições HTTP que façam uso dos métodos POST
Veja este novo exemplo:
e GET.
1 <?php

2 $_nomeCurso = "Programação de Páginas Dinâmicas com PHP";

 Além dos métodos aqui mencionados, o protocolo HTTP possui, ainda, uma série de outras
propriedades relevantes no que tange à programação Web. Recomenda-se, portanto, uma
leitura mais aprofundada sobre esse protocolo.

SUPERGLOBAIS
Diversas variáveis predefinidas no PHP são "superglobais", o que significa que elas
estão disponíveis em todos os escopos para todo o script. Não há necessidade de fazer
global $variable; para acessá-lo dentro de funções ou métodos. Estas variáveis
superglobais são: $GLOBALS.
A seguir, veremos exemplos de utilização dos métodos GET e POST, que são os mais usados
em programas PHP.
MÉTODO GET
Esse método é utilizado na requisição e na recuperação de recursos de um servidor, como uma
página ou um arquivo, entre outros. Veja o exemplo de uma requisição GET:

/endereco_servidor/script.php?var1=value1&var2=value2&var3=value3

 Figura 1: Exemplo de requisição com o método GET

Como visto na figura, a requisição GET é composta pelo endereço (URL e URI) e pela query
MÉTODOS DE REQUISIÇÃO HTTP string – pares de nome/valores (var1=value1, ...).

Em linhas gerais, não deve ser utilizado quando estamos lidando com informações
A especificação do protocolo HTTP estabelece uma série de métodos de requisição cuja
sensíveis, uma vez que a query string fica visível na barra de endereços do navegador.
função é indicar qual ação deve ser executada por determinado recurso. Nesse sentido, cada
Outra característica importante desse método é que ele pode ser usado a partir de
um deles implementa uma diferente semântica. São nove os métodos disponíveis:
formulários HTML.
GET
MÉTODO POST
HEAD
Esse método é usado no envio de dados para o servidor a fim de criar ou atualizar um recurso.
POST A figura 2 mostra o corpo de uma requisição feita com POST:

PUT POST /endereco_servidor/script.php

DELETE Host: dominio.com.br

var1=value1&var2=value2&var3=value3

CONNECT
 Figura 2: Exemplo de requisição com o método POST
OPTIONS
Assim como o GET, esse método pode ser utilizado em formulários HTML, com a
TRACE
vantagem de não deixar os dados transmitidos visíveis na barra de endereços do
PATCH navegador – embora seja possível acessá-los analisando a requisição em si.


SAIBA MAIS VARIÁVEL $_GET
Em PHP, essa variável predefinida é um array associativo que contém as variáveis recebidas O cookie HTTP é um fragmento reduzido de dados que fica armazenado no navegador
de métodos HTTP GET. Voltando ao exemplo da figura 1, no script “script1.php” as variáveis do usuário, proveniente de um servidor Web. São normalmente usados para fins de
passadas seriam representadas da seguinte forma: gerenciamento de sessões, armazenamento de preferências do usuário ou rastreamento.

<?php

//Requisição GET: /endereco_servidor/script.php?var1=value1&var2=value2&var3=value3

OPERADORES

echo $_GET['var1']; //imprimiria value1

Um operador − no contexto de linguagens de programação ou mesmo em outras áreas, como

echo $_GET['var2']; //imprimiria value2

na Matemática − tem a função de receber um ou mais valores e resultar em outro valor ou

echo $_GET['var3']; //imprimiria value3

valores. Por exemplo:

 Figura 3: Manipulando variáveis com $_GET
2+2=4
Como visto na figura, no array $_GET os índices correspondem aos nomes das variáveis da
2-2=0
query string submetida com o método GET, assim como seus valores.
2*2=4

2/2=1

VARIÁVEL $_POST Os sinais “+”, “-“, “*” e “/” representam as operações matemáticas de adição, subtração,
multiplicação e divisão, respectivamente. Logo, são chamados de operadores aritméticos.

A exemplo de $_GET, a variável predefinida $_POST também é um array associativo. Em PHP, além dos operadores aritméticos, há outros disponíveis. Veremos os principais a

Entretanto, ela contém as variáveis recebidas através de métodos POST. seguir:

VARIÁVEL $_REQUEST OPERADORES ARITMÉTICOS

É considerada "coringa", uma vez que exerce múltiplos papéis. Com ela, é possível receber Além dos mencionados no exemplo, também estão disponíveis em PHP outros quatro

tanto variáveis provenientes de métodos GET quanto POST – e também do método cookies operadores aritméticos, sendo os dois a seguir os mais importantes:

($_COOKIE).
Operador / Exemplo de
Sua utilização é semelhante ao que foi visto em $_GET e $_POST. Para que serve
utilização

Operador de módulo. Retorna o resto da divisão inteira

% $var1 % $var2
de $var1 por $var2
COOKIES
 ** $var1 ** $var2 Operador exponencial. Retorna o resultado de $var1
elevado a $var2  DICA

 Atenção! Para visualizaçãocompleta da tabela utilize a rolagem horizontal Repare nos comentários inseridos na imagem, onde o resultado de cada combinação é
explicado. Para melhor fixação, copie os exemplos e os execute. Tente também alterar os
 Tabela 1: Operadores aritméticos em PHP
valores ou realizar outras combinações.
Esse tipo de operador é usado, sobretudo, com números (int/integer e float) para a realização
de cálculos. Quando utilizado com outra forma de dado, é feita a conversão para o tipo
numérico antes que a operação seja realizada.
OPERADORES DE COMPARAÇÃO

São utilizados para comparar dois valores. A tabela 2 apresenta os operadores disponíveis e
OPERADORES DE ATRIBUIÇÃO suas funções:

São utilizados na atribuição de valores a variáveis. Além de casos simples, como o que vimos
Operador / Exemplo
com o operador “=”, é possível realizar a combinação de operadores de atribuição com os Para que serve
de utilização
aritméticos. Para ficar mais claro, vamos aos exemplos:

<?php

$var1 ==

== Verifica se $var1 é igual a $var2

$var2
$var1 = 4; //a variável foi inicializada com o valor de 4

$var1 += 2; //com a utilização da combinação de operadores a variável $var1 passou a ter o

valor de 6 (4 + 2)
$var1 === Verifica se $var1 é idêntica a $var2. Nesse caso, além do
===
$var2 valor, verifica se ambas são do mesmo tipo
$var1 *= 2; //com a utilização da combinação de operadores a variável $var1 passou a ter o
valor de 12 (4 + 2) * 2

$var1 !=
!=
$var2 = "Programação";
$var2
$var2 .= " com PHP"; //com a utilização da combinação de operadores a variável $var2 passou
Verifica se $var1 é diferente de $var2
a ter o conteúdo "Programação com PHP"

$var1 <>

<>
$var2
$var = ($var4 = "Copie esses códigos") . " e pratique seus conhecimentos!" ;

/*

No exemplo acima o conteúdo da variável $var3 é igual a "Copie esses códigos e pratique seus $var1 !== Verifica se não são idênticas/iguais ou se não são do mesmo
!==
conhecimentos!"
$var2 tipo

Já a variável $var4 possui o conteúdo "Copie esses códigos"

*/

< $var1 < Verifica se $var1 é menor que $var2

 Figura 4: Combinação de operadores de atribuição e aritméticos $var2
 Retorna true se $var1 OU $var2 forem verdadeiras,
$var1 > xor $var1 xor $var2
> Verifica se $var1 é maior que $var2 mas não ambas
$var2

! !$var1 Retorna true se $var1 não for verdadeira

$var1 <=
<= Verifica se $var1 é menor ou igual a $var2
$var2
&& $var1 && $var2 Retorna true se $var1 E $var2 forem verdadeiras

$var1 >=
>= Verifica se $var1 é maior ou igual a $var2
$var2 || $var1 || $var2 Retorna true se $var1 OU $var2 forem verdadeiras

 Atenção! Para visualizaçãocompleta da tabela utilize a rolagem horizontal  Atenção! Para visualizaçãocompleta da tabela utilize a rolagem horizontal

 Tabela 2: Operadores de comparação  Tabela 3: Operadores lógicos

Como visto, os operadores “and” / “&&” e “or” / “||” têm a mesma função. Entretanto, “and” e
“or” têm maior precedência que seus equivalentes.

 DICA

A partir da versão 7 do PHP, um novo operador foi incluído, o “spaceship”, cuja forma de
SAIBA MAIS
utilização é “$var1<=> $var2”. Ele retorna -1, 0 ou 1 quando $var1 for, respectivamente,
menor, igual ou maior que $var2.

Além dos operadores apresentados, há outros disponíveis em PHP, como os bit a bit (bitwise)
e os de controle de error. Na seção Explore+, destacamos um site que contém a lista
completa de operadores.

OPERADORES LÓGICOS

São usados para combinar expressões lógicas. A tabela 3 mostra os operadores lógicos
disponíveis em PHP:

Operador / Exemplo de
Para que serve
utilização

and $var1 and $var2 Retorna true se $var1 E $var2 forem verdadeiras

or> $var1 or $var2 Retorna true se $var1 OU $var2 forem verdadeiras

 <?PHP

$VAR1 == 2;

ECHO $VAR1;

A) 2.

B) true.

C) null.

D) Variável indefinida (undefined variable).

2. A RESPEITO DA MANIPULAÇÃO, EM PHP, DE VALORES RECEBIDOS

No vídeo a seguir, o professor Alexandre Paixão comenta sobre os conceitos básicos da ATRAVÉS DOS MÉTODOS HTTP POST E GET, ASSINALE A AFIRMATIVA
linguagem PHP. Vamos assistir! CORRETA:

A) A linguagem PHP oferece amplo suporte ao tratamento de variáveis HTTP. Com isso,
independentemente do método utilizado no envio, podemos escolher entre as três variáveis
superglobais - $_POST, $_GET e $_REQUEST.

B) Em PHP, é possível tratar variáveis enviadas pelo método HTTP chamado REQUEST
fazendo uso da variável $_REQUEST.

C) Variáveis enviadas através do método HTTP GET podem ser manipuladas em PHP através
das variáveis globais POST ou GET. Entretanto, as enviadas pelo método POST só podem ser
manipuladas com a variável $_POST.

D) Em PHP, estão disponíveis três variáveis superglobais para o tratamento de valores

VERIFICANDO O APRENDIZADO recebidos através de métodos HTTP. Nesse contexto, temos as variáveis $_GET para receber
os dados enviados por GET, a $_POST para receber os dados enviados por POST e a
$_REQUEST, que recebe tanto os dados enviados por POST quanto por GET.

1. ANALISE O FRAGMENTO DE CÓDIGO ABAIXO E ASSINALE A

ALTERNATIVA CORRESPONDENTE À SUA SAÍDA:
GABARITO

1. Analise o fragmento de código abaixo e assinale a alternativa correspondente à sua

saída:


As estruturas de decisão e de repetição são recursos importantes em uma linguagem de
programação. Com elas, é possível mudar o fluxo de um programa através de verificações
<?php

(estruturas de decisão) e também executar diversas vezes partes do programa (estruturas de

repetição). A seguir, veremos como utilizá-las em PHP.

$var1 == 2;

echo $var1;

A alternativa "D " está correta.

ESTRUTURAS DE DECISÃO
Como vimos, a atribuição de variáveis é feita com a utilização do operador “=”, enquanto o sinal
“==” é um operador de comparação. Logo, no código acima não foi realizada uma atribuição e
nem mesmo uma comparação, uma vez que esta última precisa vir acompanhada de uma
estrutura de decisão.

2. A respeito da manipulação, em PHP, de valores recebidos através dos métodos HTTP

POST e GET, assinale a afirmativa correta:

A alternativa "D " está correta.

PHP possui variáveis globais específicas para tratar os dados recebidos através de métodos
GET e POST, além de uma variável “coringa”, a $_REQUEST, que pode receber os dados
desses dois métodos e também do método COOKIES.

Fonte:Shutterstock
 Figura 5: Fluxo das estruturas de decisão

A figura 5 demonstra o fluxo de uma estrutura de decisão. Nela é possível ver que, a partir da
MÓDULO 2 verificação de uma condição, o programa se divide em dois caminhos possíveis. Esse é um
exemplo simples, uma vez que várias condições podem ser verificadas ao mesmo tempo,
assim como vários caminhos alternativos podem ser seguidos.
 Aplicar as estruturas de decisão e repetição disponíveis em PHP
Na linguagem de programação PHP, estão disponíveis as seguintes estruturas de decisão: if,
else, elseif/else if e switch. Cada uma delas será vista a seguir.

IF
 Fonte: gdainti | Shutterstock
A sintaxe da estrutura de controle if em PHP é composta pela condição (ou condições) a ser
verificada e, caso seja verdadeira, é seguida da instrução (ou instruções) a ser executada.
Logo, temos que as condições são avaliadas por seus valores booleanos, isto é, se são
verdadeiras ou falsas. Vejamos este fragmento de código PHP: QUAL RETORNO É EXIBIDO NESSE CASO?
1 <?php

Execute o código e veja você mesmo:

2

3 $var1 = 10;
Como $var1 é menor que $var2, nada é exibido no navegador, já que a condição é falsa.

4 $var2 = 20;
Nessa situação, para imprimirmos uma mensagem informando que a condição é falsa, ou seja,

5
que $var1 é menor que $var2, faremos uso do else. Veja como ficaria nosso código nesse

6 if($var1 > $var2){

ponto:

7 echo "$var1 é maior que $var2";

1 <?php

8 }
2

No exemplo foi realizada apenas uma verificação – a comparação entre as duas variáveis 3 $var1 = 10;

definidas. Caso a primeira seja maior que a segunda, uma mensagem é exibida na tela. É 4 $var2 = 20;

possível também realizar outras verificações em um mesmo if. Para isso, basta utilizar 5

subgrupos. 6 if($var1 > $var2){

7 echo "$var1 é maior que $var2";

Antes de prosseguirmos, cabe destacar mais alguns elementos da sintaxe do if:

8 }else{

A condição (ou condições) a ser avaliada deve ser envolvida por parênteses, sendo 9 echo "$var1 é menor que $var2";

possível incluir subgrupos dentro de novos parênteses. 10 }

Como demonstrado no exemplo, a estrutura else tem a função de definir um fluxo

Múltiplas instruções devem ser envolvidas com chaves. No exemplo, como só há uma
alternativo ao nosso programa, caso uma determinada condição seja falsa.
instrução a ser executada, as chaves são opcionais e podem ser omitidas.

Em relação à sua sintaxe, vale o que foi dito para if, sobre múltiplas instruções
precisarem ser envolvidas em chaves.

ELSE

Para apresentar a estrutura else, voltaremos ao exemplo anterior, no qual é verificado se uma
variável era maior do que a outra e, em caso positivo, exibida uma mensagem.
ELSEIF /ELSE IF

É uma combinação das duas instruções vistas. Logo, sua função é definir fluxo (ou fluxos)
alternativo caso uma condição verificada com if seja falsa. Entretanto, ela permite ainda que
O QUE ACONTECE EM NOSSO PROGRAMA CASO A uma nova condição (ou até mesmo condições) seja avaliada. Vamos ao exemplo de seu uso:

CONDIÇÃO EM QUESTÃO NÃO SEJA VERDADEIRA?  1 <?php

 2

 3 $var1 = 10;

 4 $var2 = 10;
12 break;

 5
13 }

 6 if($var1 > $var2){

Com o switch temos uma série de verificações e, ao final, uma instrução padrão
 7 echo "$var1 é maior que $var2";

(default) a ser executada, caso nenhuma das condições seja verdadeira.

 8 }elseif($var1 < $var2){

 9 echo "$var1 é menor que $var2";

10 }else{

11 echo "$var1 e $var2 são iguais";

12 }

FORMAS ALTERNATIVAS

Repare que além da primeira verificação, com o if, foi inserida uma segunda, com elseif. PHP permite que sejam utilizadas formas alternativas das instruções vistas. Em linhas gerais,
Ao final, a instrução else representa o fluxo caso nem a condição do if e nem a do elseif troca-se a chave de abertura por dois pontos e a de fechamento pela palavra reservada “end”
sejam verdadeiras. seguida do nome da instrução. Veja o exemplo:

 1 <?php

Sobre sua sintaxe, além do que já foi dito no if, cabe destacar que não há limites de
 2

instruções elseif dentro de uma declaração if.

 3 $var1 = 10;

 4 $var2 = 10;

 5

 6 if($var1 > $var2):

SWITCH  7 echo "$var1 é maior que $var2";

 8 elseif($var1 < $var2?):

Pode ser comparada a uma série de instruções if, possuindo uma sintaxe um pouco diferente e
 9 echo "$var1 é menor que $var2";

usada sobretudo quando se deseja verificar diferentes valores, inúmeras vezes, em uma
10 else:

mesma variável. Vejamos sua sintaxe por meio de um novo exemplo:

11 echo "$var1 e $var2 são iguais";
 1 <?php
12 endif;

 2

Essa sintaxe é muito utilizada quando misturamos código HTML e PHP.

 3 switch($var1){

Outra sintaxe alternativa interessante presente no PHP é o operador ternário. Através dele é
 4 case 10:

possível avaliar uma condição e atribuir um valor de acordo com a validação. Veja o exemplo
 5 echo "var1 é igual a 10";

para ficar mais claro:

 6 break;

 7 case 20:
1 <?php

 8 echo "var1 é igual a 20";

2

 9 break;
3 $var1 = 10;

10 default:
4 $var2 = ($var1 >= 10) ? 11 : 9;

11 echo "var1 não é igual a 10 e nem a 20";

5 echo $var2; //imprimirá 11

 O laço while possui uma sintaxe simples: enquanto uma expressão for verdadeira, uma série
Note que uma condição foi verificada dentro de parênteses. Caso verdadeira, após o sinal
de instruções será executada de forma repetida. Para imprimirmos na tela os números de 2 a
“?” é atribuído o valor “11”. Caso negativa, após o sinal “:” é atribuído o valor “9”.
20, pulando de 2 em 2, poderíamos utilizar o seguinte código:

 1 <?php

 2

ESTRUTURAS DE REPETIÇÃO  3 $i = 2;

 4 while ($i <= 20) {

As estruturas de repetição, muitas vezes também chamadas de laços, permitem que  5 echo $i;

instruções ou trechos de códigos sejam executados de forma repetitiva. Sua sintaxe define as  6 $i+=2;

condições ou expressões que devem ser verificadas e, caso essas sejam verdadeiras, quais  7 echo "\n";

instruções devem ser executadas e por quantas vezes. A figura 6 apresenta o fluxo básico das  8 }

estruturas de repetição.  9

10 /*Sintaxe alternativa*/

Em PHP estão disponíveis as seguintes estruturas: while, do-while, for, foreach. A seguir,
11 $i = 2;

cada uma delas será descrita.

12 while ($i <= 20):

13 echo $i;

14 $i+=2;

15 echo "\n";

16 endwhile;

 DICA

Repare que, no exemplo foram mostradas a forma normal e a forma alternativa do laço while –
também presente nas demais estruturas de repetição em PHP. Para praticar, copie o código e o
execute. Em seguida, tente alterar a condição e veja o resultado.

Fonte:Shutterstock
 ATENÇÃO
 Figura 6: Fluxo das estruturas de repetição

O comando ‘echo “\n”’ é utilizado para imprimir uma linha em branco quando o script é
executado via linha de comando.

WHILE
DO-WHILE

Por último, ao final de cada interação, a terceira expressão − “$i++” − é avaliada e executada.
Esse laço é semelhante ao anterior, exceto pelo fato de que a verificação, aqui, é feita ao final.
Com isso, a primeira instrução dentro do laço sempre será executada. Veja o exemplo:

1 <?php

2
 DICA
3 $i = 2;

4 do {
Outra possibilidade nesse laço é avaliar múltiplas expressões, que deverão ser separadas
5 echo $i;
por vírgulas. Além disso, também é possível inserir expressões vazias.
6 $i+=2;

7 echo "\n";
8 }while ($i <= 20);

FOREACH

A última estrutura de repetição que veremos em PHP é a foreach. Esse laço é parecido com o
FOR for, possuindo uma sintaxe mais simples e sendo muito propício para realizar interações em
arrays. Veja o exemplo:
Esse laço possui sintaxe um pouco diferente do que vimos nos anteriores. Vamos ao exemplo:
 1 <?php

1 <?php
 2 $carros = Array("Fusca", "Monza", "Passat");

2
 3

3 for ($i = 1; $i <= 20; $i++) {

 4 foreach($carros as $carro){

4 echo $i;
 5 echo $carro;

5 echo "\n";
 6 echo "\n";

6 }
 7 }

Com o laço for, temos três expressões sendo avaliadas. Considerando o exemplo anterior,  8

temos:  9 for ($i = 0; $i < count($carros); $i++) {

10 echo $carros[$i];

A primeira expressão − “$i = 0” − é avaliada, incondicionalmente, no início da repetição.

11 echo "\n";


12 }

Para fins de comparação e demonstração da diferença entre ambos, em nosso exemplo a

mesma operação – imprimir os nomes dos carros – foi realizada tanto com o laço foreach
A seguir, a cada interação, a segunda expressão − “$i <= 20” − é avaliada. Caso seja
quanto com o laço for.
verdadeira, o loop continuará.
 1. EM PHP É POSSÍVEL INCLUIR SUBCONDIÇÕES DENTRO DE UMA

SAIBA MAIS VERIFICAÇÃO A SER TRATADA POR UMA ESTRUTURA DE DECISÃO.
CONSIDERANDO O CÓDIGO ABAIXO, ASSINALE A OPÇÃO
Além dessas estruturas, em PHP estão disponíveis outros comandos relacionados às EQUIVALENTE À INSTRUÇÃO A SER EXECUTADA DENTRO DO IF:

estruturas de repetição, como o break e o continue.

<?PHP

$VAR1 = 10;

$VAR2 = 20;

$VAR3 = 25;

IF($VAR1 > $VAR2 || $VAR3 < ($VAR2 + $VAR1)){

...;

A) echo "var3 é menor que a soma de var2 e var1".

B) echo "var3 é maior que a soma de var2 e var1".

C) echo "var3 é igual à soma de var2 e var1".

No vídeo a seguir, o professor Alexandre Paixão comenta sobre as diversas formas de
estruturas de controle de decisão e de repetição na linguagem PHP. Vamos assistir! D) echo "var1 é maior que var2".

2. A RESPEITO DAS ESTRUTURAS DE REPETIÇÃO NA LINGUAGEM PHP,

ASSINALE A ALTERNATIVA CORRETA:

A) A linguagem PHP possui dois pares de estruturas de repetição: while e do-while; for e
foreach. Esses pares têm a mesma função, sintaxe, e são executados da mesma forma, tendo
sido criados em duplicidade apenas para fornecer uma nomenclatura semelhante à vista em
outras linguagens.

B) O laço while é o mais simples disponível em PHP. Nele, obrigatoriamente, a primeira

instrução sempre será executada.
VERIFICANDO O APRENDIZADO
C) O laço for é bastante flexível, podendo ser usado tanto com múltiplas condições, quanto
sem nenhuma condição para ser verificada.
D) O laço foreach é bastante similar ao for, sendo uma forma mais simples para realizar
interações em arrays PHP. MÓDULO 3

 Identificar conceitos relativos a vetores e funções em PHP

GABARITO

1. Em PHP é possível incluir subcondições dentro de uma verificação a ser tratada por
uma estrutura de decisão. Considerando o código abaixo, assinale a opção equivalente à
instrução a ser executada dentro do if:

<?php

 Fonte: gdainti | Shutterstock

$var1 = 10;

$var2 = 20;

$var3 = 25;

if($var1 > $var2 || $var3 < ($var2 + $var1)){

VETORES
...;

}
Os vetores, ou arrays, são variáveis que armazenam um grupo de itens relacionados.

A alternativa "A " está correta. Observando o exemplo utilizado ao final do último módulo, vimos a variável “$carros”
armazenar nomes de carros.

Os arrays podem ser vistos, numa abstração com o nosso dia a dia, como listas escritas em
Em PHP, é possível incluir e verificar uma subcondição dentro de uma condição a ser verificada
uma folha: nela inserimos vários itens, de forma ordenada. Com isso, cada novo elemento é
em uma estrutura de decisão. Nesta questão, a utilização do operador “||” indica que apenas
incluído ao final da lista – embora seja possível inseri-los também em outra ordem. Nas
uma das condições verificadas deve ser verdadeira para que a instrução contida dentro dele
linguagens de programação em geral, e especificamente em PHP, os arrays funcionam
seja executada. A primeira ($var1 > $var2) é falsa. Já a segunda é verdadeira, uma vez que a
exatamente dessa forma: uma lista ordenada na qual novos itens podem ser inseridos,
variável $var3 será comparada com o resultado da soma entre $var2 e $var1 − soma essa que
assim como os existentes podem ser deletados ou substituídos.
será realizada antes da comparação.

2. A respeito das estruturas de repetição na linguagem PHP, assinale a alternativa

correta:

A alternativa "D " está correta.

A linguagem PHP possui quatro estruturas de repetição. Tais estruturas têm sintaxes
diferentes, sendo cada uma mais indicada para determinadas situações.
 índices também podem ser formados por strings.

Em PHP estão presentes diferentes tipos de arrays. São eles:

ARRAY NUMÉRICO

Índice composto por números inteiros

ARRAY ASSOCIATIVO

Índice composto por strings

Fonte: Mascha Tace | Shutterstock

 ARRAY MISTO

Índices numéricos e associativos

 DICA

O mesmo vale para os elementos de um vetor: podemos tanto ter strings quanto números,
entre outros tipos de dados, como arrays de arrays.

CRIAÇÃO DE ARRAYS E ATRIBUIÇÃO DE

VALORES

Fonte: - Walnut Bird | Shutterstock
Os arrays são compostos por dois elementos principais: o item em si e o seu índice, que é a
posição que este ocupa dentro de um array. Esse número se inicia em 0. Entretanto, os
A linguagem PHP, por ser simples e bastante flexível, permite diferentes formas de declarar e
atribuir valores em um array. Não existe uma maneira melhor do que a outra − qualquer uma
delas pode ser utilizada. Nesse sentido, cabe destacar a última forma: ela é bastante útil em
situações nas quais não sabemos o tamanho do array ou a quantidade de itens que ele  9 //Segunda forma

receberá. 10 $carros = [

11 'vw'        => "Fusca",

Ao estudar os exemplos, repare, ainda, nos comentários inseridos no código. Vamos a eles:
12 'chevrolet' => "Monza",

<?php

13 'fiat'      => "Tempra"

//Declarando um array vazio

14 ];

$carros = array();

15

16 //Terceira forma

//Primeira forma de declaração e atribuição de valores

17 $carros['vw']        = "Fusca";

$carros = Array("Fusca", "Monza", "Passat");

18 $carros['chevrolet'] = "Monza";

19 $carros['fiat']      = "Tempra";

//Segunda forma de declaração e atribuição de valores

Por fim, veremos exemplos de array com índices numéricos e associativos. Repare que a
//Esta forma é semelhante à anterior, mas utilizando sintaxe similar a do Javascript

sintaxe é parecida com a vista na declaração dos associativos, ou seja, cada par “índice/valor”
$carros = ["Fusca", "Monza", "Passat"];

é separado por ‘=>’. Veja a seguir o exemplo e teste você mesmo o código em questão.

Declare o array, seus valores e depois imprima na tela. Vamos ao código:

//Terceira forma de declaração e atribuição de valores

$carros[0] = "Fusca";
 1 <?php

$carros[1] = "Monza";
 2 $carros = array (

$carros[2] = "Passat";
 3 'vw'        => "Fusca",

 4 0           => "Passat",

//Quarta forma de declaração e atribuição de valores

 5 'chevrolet' => "Monza",

$carros[] = "Fusca";
 6 1           => "Chevette",

$carros[] = "Monza";
 7 'fiat'      => "Tempra",

$carros[] = "Passat";
 8 2           => "Uno"

 9 );

Os arrays anteriores são numéricos. Vejamos outros exemplos, agora com vetores
10 //A impressão desse array gera a seguinte saída

associativos. Repare que a principal diferença é a utilização de strings no lugar de números

11 //Faça você mesmo: utilize a função print_r($carros); e veja o resultado em sua tela.
para definir os seus índices.
12 /*

 1 <?php

13 Array

 2 //Primeira forma

14 (

 3 $carros = array (

15 [vw] => Fusca

 4 'vw'        => "Fusca",

16 [0] => Passat

 5 'chevrolet' => "Monza",

17 [chevrolet] => Monza

 6 'fiat'      => "Tempra"

18 [1] => Chevette

 7 );

19 [fiat] => Tempra

 8

20 [2] => Uno

21 )
“unset”
22 */

As formas vistas nos exemplos anteriores são as mais simples para a criação e inserção de
elementos. Entretanto, a linguagem oferece outras formas, através do uso de funções como a
array_push (que adiciona elementos ao final de um array) e a array_unshifit (adiciona
elementos no início de um array).

SAIBA MAIS
A função “unset” recebe como parâmetro o array e índice ou índices que desejamos remover.
Além disso, é possível também remover o vetor inteiro, passando-o como parâmetro e sem
definir nenhum índice.
“array_splice”
A função “array_splice” recebe como parâmetros o array a ser manipulado, o offset (índice a
partir do qual desejamos excluir elementos) e o length (quantidade de itens que queremos
excluir).
 1 <?php

 2 $carros = array (

Além dessas, há funções que permitem gerar novos vetores, combinar vetores existentes e
 3 'vw'        => "Fusca",

muito mais. Pesquise nos sites indicados no Explore+.

 4 0           => "Passat",

 5 'chevrolet' => "Monza",

 6 1           => "Chevette",

REMOÇÃO DE ELEMENTOS DE UM ARRAY  7 'fiat'      => "Tempra",

 8 2           => "Uno"

 9 );

Há algumas formas de remover elementos de um array.

10 print_r($carros);

1 11 echo "O tamanho atual do array é: " . count($carros);

2 12 echo "\n\n";

13 //Definindo o valor do índice 0 como vazio

A primeira é definindo o valor do elemento como vazio. Nesse caso, embora o valor do
14 $carros[0] = '';

elemento seja removido, o seu índice permanece no vetor, que também mantém o seu
15

tamanho inicial.
16 print_r($carros);

Outra forma é fazendo uso de duas funções: unset e array_splice. 17 echo "O tamanho atual do array é: " . count($carros);

O código a seguir − que como os demais é totalmente funcional e, portanto, deverá ser 18 echo "\n\n";

executado por você − contém exemplos de utilização das formas apresentadas. Seguem 19

algumas observações sobre o código e o uso das funções: 20 //Removendo dois elementos do array com unset

21 unset($carros['fiat'], $carros[1]);

“print_r”
22

A função “print_r” imprime os elementos de um array. 23 print_r($carros);

“count” 24 echo "O tamanho atual do array é: " . count($carros);

25 echo "\n\n";

A função “count” retorna o tamanho (quantidade de elementos) de um array. Essa função,

26

inclusive, é muito útil quando trabalhamos com vetores.

27 //Removendo elementos do array com array_splice

Frutas tropicais: goiaba, maracujá, banana e manga.

28 array_splice($carros, 1,2);

29

Crie um novo array cujo resultado deverá ser:

30 print_r($carros);

31 echo "O tamanho atual do array é: " . count($carros);

RESOLUÇÃO

Array

ARRAYS MULTIDIMENSIONAIS [vermelhas] => Array

O array que será visto na letra “b”, a seguir, é multidimensional. Ou seja, ele é composto por
[0] => melancia

mais de uma dimensão – nesse caso, duas. Olhando para o exemplo, temos: [1] => cereja

[2] => framboesa

Dois índices principais, associativos, cujas chaves são ‘vermelhas’ e ‘cítricas’.

[3] => morango

Cada uma dessas chaves possui um novo array, numérico, que contém quatro
[citricas] => Array

elementos.
(

Essas estruturas de dados são similares às vistas na disciplina de Matemática, onde temos [0] => laranja

também as matrizes, que podem ser chamadas de vetores de vetores. Trazendo esse [1] => limão

conceito ao contexto em questão, temos um array de arrays, ou um array dentro de outro [2] => abacaxi

array. [3] => mexerica

TEORIA NA PRÁTICA
A melhor forma de fixar conteúdos quando se aprende uma linguagem de programação é
FUNÇÕES
praticando os conceitos estudados. Para isso, utilize seu ambiente AMP local ou um editor de
código online e faça o seguinte:
Funções, em linguagens de programação, são pedaços de código, encapsulados, que podem

Crie um array para armazenar frutas de acordo com seu tipo: ser chamados em qualquer outro trecho do programa ou do código. Em relação à sua sintaxe,
uma função deve ter um nome, uma definição e uma posterior invocação à mesma.

Frutas vermelhas: melancia, cereja, framboesa e morango. Em uma linguagem, as funções podem ser nativas − como a função “print_r”, utilizada em
alguns exemplos anteriores − ou construídas pelo desenvolvedor – também chamadas de
Frutas cítricas: laranja, limão, abacaxi e mexerica. funções definidas pelo usuário.
 Nome da função seguido de parênteses – “()”. Caso receba parâmetros, eles deverão ser
 DICA declarados dentro dos parênteses. Do contrário, deverão ficar sem conteúdo.

Em termos práticos, pense nas funções como um código criado para resolver problemas
singulares ou executar tarefas específicas. Além disso, tenha em mente que esses códigos
poderão ser usados mais de uma vez ao longo do seu projeto. Logo, em vez de reescrever um
mesmo código, faça uso de funções.
Instruções da função envoltas em chaves – “{}”.
As funções em PHP podem ou não retornar resultados. A primeira delas, “soma”, através do
operador “return”, devolve o resultado da soma entre os dois parâmetros recebidos. Repare
que a variável “$num3” recebe justamente esse resultado. Já a função “imprimir_resultado” não
retorna valores, apenas imprimindo uma frase na tela.

FUNÇÕES EM PHP

O exemplo a seguir descreve a sintaxe de criação de uma função em PHP e a forma de invocá-  ATENÇÃO
la.
Outra particularidade em PHP é que as funções não precisam estar definidas para serem
 1 <?php

invocadas. Repare que chamamos as duas antes mesmo de codificá-las. Devemos, porém,
 2 $num1 = 10;

nos atentar para a quantidade de parâmetros a serem passados. Além disso, sua sintaxe é
 3 $num2 = 15;

simples: “nome-da-funcao(parâmetros)” ou “nome-da-funcao()”.

 4

 5 $num3 = soma($num1,$num2);

 6 imprimir_resultado($num3);

 7
NOMENCLATURAS DE FUNÇÕES E OUTRAS
 8

 9 function soma($numero1, $numero2)

BOAS PRÁTICAS
10 {

A nomeação de funções em PHP segue as mesmas regras para a definição de variáveis, com
11 return $numero1 + $numero2;

alguns padrões utilizados e que são considerados como boas práticas. As mesmas dicas
12 }

cabem, portanto, aqui:

13 function imprimir_resultado($numero)

14 {
VOCÊ PODE CRIAR NOMES DE FUNÇÕES SEPARANDO
15 echo "O resultado da operação é igual a: " . $numero;

NOMES COMPOSTOS POR UNDERSCORE “_” OU COMO

16 }

CAMELCASE, POR EXEMPLO. DEFINA UM PADRÃO E SIGA-O

Como visto no exemplo (aproveite para executá-lo antes de continuar a leitura), a sintaxe de POR TODO O SEU CÓDIGO.
uma função contém os seguintes elementos:
Sobre a sintaxe da função, mais precisamente sobre o posicionamento da chave de abertura,

Palavra reservada “function” seguida do nome da função. há duas vertentes defendendo que:

A chave de abertura deve ser inserida logo após o fechamento dos parênteses que guardam os
parâmetros da função.

No vídeo a seguir, o professor Alexandre Paixão nos apresenta alguns exercícios,
demonstrando o uso de vetores e funções em PHP. Vamos assistir!

A chave de abertura deve ser inserida na linha seguinte – essa foi a aplicada nos códigos
anteriores.

Por fim, outra boa prática recomendada: indente seu código − não só nas instruções inseridas
dentro das funções, mas ao longo de todo o programa. Veja o código de exemplo e perceba
que as instruções dentro da função não estão coladas no início da linha. Indentar um código
ajuda na sua compreensão e no seu entendimento, além de deixar clara a hierarquia
existente.

FUNÇÕES NATIVAS 
SAIBA MAIS

A Zend, fabricante norte-americana de software orientado para PHP, é uma das empresas mais
A linguagem PHP disponibiliza uma série de funções nativas, para as mais variadas
conhecidas e relevantes sobre o assunto. Além de um Framework bastante conhecido, que
necessidades. Há funções para a manipulação de arrays (como as que vimos nos exemplos
leva o seu nome, ela também é responsável pela certificação profissional PHP mais importante
anteriores), de strings, de arquivos, de acesso de banco de dados, entre tantas outras. A
do mercado. Entre todo o material que disponibiliza, há um manual de boas práticas com uma
documentação oficial da linguagem ou Manual do PHP é uma fonte extensa e que deve ser
série de convenções relacionadas à produção de código em PHP. Vale a pena a leitura desse
sempre consultada.
material, conforme sugerido na seção Explore +.

VERIFICANDO O APRENDIZADO

1. EM RELAÇÃO AOS CONCEITOS DE VETORES, ASSINALE A

ALTERNATIVA INCORRETA:

A) Vetores podem ser vistos como pilhas ou filas de itens, onde um novo elemento é,
naturalmente, incluído ao seu final.

B) Podemos incluir novos elementos em qualquer posição de um array, seja no início, meio ou
fim.

C) Um vetor pode conter diferentes tipos de dados, incluindo até mesmo outros vetores.
D) Um array multidimensional é um vetor que possui tanto índice numérico quanto associativo. entanto, é preciso ter atenção com algumas regras. O nome de uma função, por exemplo, deve
seguir as mesmas normas para os nomes de variáveis.

2. AS FUNÇÕES SÃO UM PODEROSO RECURSO DISPONÍVEL NAS

LINGUAGENS DE PROGRAMAÇÃO. SOBRE OS CONCEITOS E A SINTAXE
DAS FUNÇÕES NA LINGUAGEM PHP, ASSINALE A ALTERNATIVA CONCLUSÃO
CORRETA:

A) Uma função que não recebe parâmetros não poderá, nunca, retornar resultado.

B) Não é possível declarar variáveis dentro do escopo de uma função. Com isso, só estarão
CONSIDERAÇÕES FINAIS
disponíveis as recebidas como parâmetro.

C) Em PHP, diferentemente de outras linguagens, uma função pode ser invocada antes de ser
codificada.
D) Em PHP é possível iniciar o nome de uma função utilizando qualquer caractere, inclusive
números.
Neste tema, foi apresentada a programação de páginas dinâmicas utilizando PHP, linguagem
de script server side. Ao longo de três módulos, através da explanação de conceitos e da
aplicação de exemplos práticos e funcionais, vimos a criação de variáveis e atribuição de
valores, alguns dos operadores disponíveis e a manipulação de variáveis recebidas de
métodos HTTP POST e GET. Foram listadas, ainda, as estruturas de decisão e de repetição
disponíveis na linguagem e, por fim, descritos os recursos de vetor/array e funções.

GABARITO

1. Em relação aos conceitos de vetores, assinale a alternativa incorreta:

A alternativa "D " está correta.

Um array multidimensional é composto por mais de uma dimensão. Em outras palavras, um

array que contém outro pode ser chamado de multidimensional.

2. As funções são um poderoso recurso disponível nas linguagens de programação.

Sobre os conceitos e a sintaxe das funções na linguagem PHP, assinale a alternativa
correta: AVALIAÇÃO DO TEMA:
A alternativa "C " está correta.

As funções, em PHP, a exemplo do que ocorre com outros de seus recursos, possuem
bastante flexibilidade. Dessa forma, é possível declarar novas variáveis dentro do seu escopo
REFERÊNCIAS
ou ter funções retornando ou não valores, independentemente de receberem ou não
PHP. Manual do PHP: O que é o PHP? Consultado em meio eletrônico em: 16 ago. 2020.
parâmetros. Além disso, elas podem ser invocadas antes mesmo de serem definidas. No
EXPLORE+ CONTEUDISTA
Alexandre de Oliveira Paixão
Para saber mais sobre JavaScript, leia o livro JavaScript: The Definitive Guide, de
David Flanagan.  CURRÍCULO LATTES

Acesse o site Apache Friends para aprofundar seus conhecimentos sobre o XAMPP, o
mais popular ambiente de desenvolvimento PHP.

Para testar seus códigos PHP, utilize os sites Online PHP Editor, PHPTester e Write PHP
Online.

Acesse o Manual do PHP e leia os textos:

O que as referências fazem

Escopo de variáveis

Precedência de operadores

Operadores

for

break

continue

Visite o site da comunidade Mozilla e pesquise sobre os temas: HTTP; GET; e POST.

Acesse o site W3Schools e leia: The GET method e The POST method.

Leia o manual Zend Framework coding standard for PHP, da Zend Framework.
< MÓDULO 1
DEFINIÇÃO
Linguagem de Programação PHP. Linguagem PHP. Linguagem de script PHP. Linguagem de
Programação Web PHP. Integração de PHP com banco de dados. Integração de PHP com
MySQL. Integração de PHP com PostgreSQL. PDO. Classe PDO. Métodos da Classe PDO.
Integração entre HTML, PHP e banco de dados.
PROPÓSITO
Apresentar as funcionalidades da linguagem de programação PHP para integração com banco
de dados, fazendo uso da extensão PDO – PHP Data Objetcs.
PREPARAÇÃO
Para aplicação dos exemplos, serão necessários: um editor de texto com suporte à marcação
PHP; um servidor web com suporte à linguagem PHP e com um SGBD instalado e configurado
para ser utilizado com PHP; um aplicativo Cliente para acesso ao SGDB. Em relação ao editor,
no Sistema Operacional Windows, é indicado o Notepad++. No Linux, o Nano Editor. Quanto
ao servidor, recomenda-se o Apache. Sobre o SGDB deverá ser utilizado o MySQL ou o
PostgreSQL. Por fim, quanto ao aplicativo Cliente para acesso ao BD, recomenda-se o
DBeaver.
OBJETIVOS
Definir a Classe PDO e sua utilização com MySQL e PostgreSQL
MÓDULO 2
Descrever os principais métodos da Classe PDO
MÓDULO 3
Construir uma aplicação contendo um formulário HTML, uma tabela HTML e scripts PHP para
inserção e listagem de dados em/de um SGDB
INTRODUÇÃO
Ao longo deste tema, veremos como integrar o PHP com banco de dados fazendo uso da
Classe PDO (PHP Data Objects), uma interface de acesso a databases.
Veremos desde a sua instalação, conceitos básicos, formas de utilização com MySQL e
PostgreSQL, à utilização de dois dos seus principais métodos. Tudo isso apoiados em
exemplos práticos.
Ao final deste tema, desenvolveremos um formulário HTML para a inclusão de informações em
um banco de dados.
Vamos começar nossa jornada acessando os códigos-fontes originais propostos para o
aprendizado de PHP com PDO. Baixe o arquivo, descompactando-o em seu dispositivo.
Assim, você poderá utilizar os códigos como material de apoio ao longo do tema!
MÓDULO 1
 Inicialmente, antes de tratarmos da classe PDO e de sua utilização com dois dos principais
 Definir a Classe PDO e sua utilização com MySQL e PostgreSQL SGBDs existentes, vamos observar um pouco mais esses sistemas e sua integração com PHP.

MYSQL
O MySQL é um sistema de gerenciamento de banco de dados criado em 1995. Inicialmente de
SISTEMAS GERENCIADORES DE BANCOS código aberto, foi adquirido posteriormente pela Oracle, que, atualmente, mantém tanto uma
versão GPL quanto uma versão comercial. Trata-se de um dos SGBDs mais utilizados na web,
DE DADOS sendo, normalmente, associado ao PHP, dada a facilidade de conexão entre ambos.

Em PHP, estão disponíveis vários métodos e funções, através da extensão que leva o mesmo
nome do SGBD, para conexão e execução de instruções SQL no MySQL.
Os bancos de dados são o ponto central de muitos sites, sistemas e aplicativos. Tais estruturas
permitem o armazenamento e recuperação de qualquer tipo de informação, desde dados Para fins de comparação, o código abaixo demonstra a conexão com o MySQL e a execução

simples, como os posts de um blog pessoal, a dados altamente sensíveis, como os dados de uma instrução de consulta SQL utilizando as funções PHP específicas para o SGBD em

bancários ou financeiros, por exemplo. Nesse sentido, a linguagem de programação PHP questão.

oferece amplo suporte à integração com bancos de dados, sejam relacionais ou não, sejam >?php

suportados por diversos Sistemas Gerenciadores de Bancos de Dados (SGBD), como SQL //Constantes para armazenamento das variáveis de conexão.

Server, Oracle, MySQL e PostgreSQL – sendo esses dois últimos normalmente associados ao define('HOST', '127.0.0.1');

PHP. define('DBNAME', 'test');

define('USER', 'user');

define('PASSWORD', 'psswd');
//Conectando com o Servidor

PHP
$conn = mysqli_connect(HOST, USER, PASSWORD, DBNAME) or die( ' Não foi possível
conectar.' );

É uma linguagem interpretada livre, capaz de gerar conteúdo dinâmico na internet.

//Realizando uma consulta no BD

$instrucaoSQL = "Select nome, cpf, telefone From Cliente";

$stmt = mysqli_prepare($conn, $instrucaoSQL);

>?php

mysqli_stmt_bind_result($stmt, $nome, $cpf, $tel);

//Constantes para armazenamento das variáveis de conexão.

mysqli_stmt_execute($stmt);
define('HOST', '127.0.0.1');

while (mysqli_stmt_fetch($stmt)) {
define('DBNAME', 'test');

echo $nome . "\t";

define('USER', 'user');

echo $cpf . "\t";

define('PASSWORD', 'psswd');
echo $tel . "\n";
//Conectando com o Banco de dados

}
$stringConn = "host=".HOST." dbname=".DBNAME." user=".USER." password=".PASSWORD;

//Encerrando a conexão
$conn = pg_connect($stringConn) or die( ' Ocorreu um erro e não foi possível conectar ao
mysqli_close($conn);
banco de dados.' );

//Realizando uma consulta no BD

POSTGRESQL
$instrucaoSQL = "Select nome, cpf, telefone From Cliente";

O PostgreSQL é um SGBD de código aberto, atualmente disponível sob a licença BSD, criado $result = pg_query( $conn, $instrucaoSQL ) or die(' Ocorreu um erro na execução da instrução:
em 1996. Enquanto o MySQL é um SGBD puramente relacional, o PostgreSQL é considerado ' . $instrucaoSQL );

um SGBD objeto-relacional. Na prática, essa diferença pode ser vista nas funcionalidades que //pg_query($dbcon, "SELECT id, nome FROM clientes");

o PostgreSQL possui, como a herança de tabelas e a sobreposição de funções. Outra //Imprimindo os dados da consulta

diferença importante é que o PostgreSQL adere de forma mais próxima aos padrões SQL. while ($row = pg_fetch_array( $result )){

echo $row['nome'] . "\t";

echo $row['cpf'] . "\t";

echo $row['telefone'] . "\n";

//Encerrando a conexão

pg_close($conn);

CONCEITOS BÁSICOS DA LINGUAGEM DE

A linguagem PHP também possui uma série de métodos e funções, habilitados através da
extensão pgsql, para conexão com o Postgres.
A exemplo do que fizemos com o MySQL, vejamos um código que utiliza funções PHP para
conectar com o PostgresSQL e realizar uma instrução SQL de consulta de dados.
PROGRAMAÇÃO PHP
A linguagem PHP é uma linguagem server side, ou seja, atua no lado servidor, sobre um
servidor web como o Apache, Nginx ou IIS. Trata-se de uma linguagem de script e que é
gratuita, o que faz dela uma linguagem amplamente utilizada no Ambiente Web.
Em relação à sua sintaxe, é possível combinar código PHP com tags HTML, ou utilizar apenas
código PHP em um script. Tal código deverá estar entre a tag inicial “<?php” e a tag final “?>” –
sendo essa última não obrigatória, quando houver apenas código PHP em um script.
Tomando como base os exemplos de código acima, temos alguns recursos da linguagem
sendo utilizados. A seguir, esses recursos serão revistos.
CONSTANTES
As constantes são identificadores ou nomes que contêm um valor único e imutável, ao
contrário das variáveis que, conforme o nome indica, possuem valor variável ao longo de um
programa.
No exemplo, foram declaradas constantes para armazenarem as credenciais de acesso ao
SGBD. A sintaxe de utilização de constantes é composta pela palavra reservada DEFINE,
seguida de parênteses, onde são incluídos o nome da constante e o seu valor.
VARIÁVEIS
As variáveis são objetos, ou espaços reservados na memória do computador, destinados a
armazenarem e a exibirem os dados utilizados, e alterados, durante a execução de um
programa.
As funções são pedaços de código que podem ser chamados a partir de qualquer parte do
programa e que executam tarefas específicas. Além das funções definidas pelo usuário, em
PHP estão disponíveis inúmeras funções nativas. Em nossos exemplos, temos as funções
define e echo, além das relacionadas à conexão e ao manuseio de dados, como
mysql_connect ou pg_connect, mysql_query ou pg_query, entre outras.
EXTENSÕES, BIBLIOTECAS E CLASSES
As extensões, bibliotecas e classes são um importante recurso presente na maioria das
linguagens de programação. Através delas, é possível estender as funções básicas de uma
linguagem, adicionando novos recursos para a execução de determinadas tarefas.
Em relação à definição, em PHP temos as extensões, que são arquivos binários (no S.O.
Windows, as .dll, em S.O.s unix-like, os .so) que contêm bibliotecas. Já as bibliotecas são um
conjunto de funções e/ou classes. As classes, então, dentro do paradigma de orientação a
objetos, são um conjunto de códigos compostos por atributos e métodos. São exemplos de
extensões os drivers para os SGBDs MySQL e PostgreSQL, que, quando habilitados, permitem

Em PHP, as variáveis são representadas por um $ seguido pelo seu nome, que é case- a sua utilização com o PHP.

sensitive - ou seja, uma letra maiúscula é diferente de uma letra minúscula ($var é diferente de
$Var). Em relação à declaração e atribuição de valores, ambos os processos podem ocorrer ao
mesmo tempo. Veja no último exemplo que a variável $stringConn foi declarada (inserida pela
 DICA
primeira vez no código) ao mesmo tempo que recebeu um valor (processo de atribuição). Por
último, as variáveis em PHP não possuem tipo. Logo, não é necessário indicar o tipo de dado a
Consulte o Manual do PHP para uma lista completa de todas as suas extensões.
ser armazenado por uma variável.

ESTRUTURAS DE DECISÃO E REPETIÇÃO

Nos exemplos, foi vista a estrutura de repetição while. Além dela, há outras estruturas de
PDO
repetição disponíveis em PHP: do-while, for e foreach.

A respeito das estruturas de decisão, estão disponíveis em PHP: if, else, elseif e switch. PDO, acrônimo para PHP Data Objects, ou Objetos de Dados PHP, e conforme definição vista

ARRAYS
Os arrays, ou vetores, são variáveis que guardam uma lista de itens relacionados. Tais
variáveis são compostas pelo par índice/valor. A variável $row, nos exemplos, é um array
associativo, ou seja, seus índices são compostos por strings – o nome de cada coluna
selecionada do banco de dados. Há ainda os arrays numéricos e os híbridos (arrays com
anteriormente, é uma classe contida dentro de uma biblioteca e, por consequência, dentro de
uma extensão. Ao referi-la, vamos chamá-la apenas de classe ao longo deste tema.
Trata-se de uma interface leve para acesso a bancos de dados em PHP. Nesse sentido, cabe a
cada banco de dados implementar a interface PDO a fim de expor os seus recursos e funções
específicos que, então, ficarão disponíveis para serem utilizados através do código PHP.

índices associativos e numéricos).

FUNÇÕES
 código: as de conexão com o banco de dados; as de execução de query, entre outras não
vistas nos exemplos. Entretanto, fazendo uso do PDO, só precisaríamos mudar, nessa
situação, o nome do driver a ser utilizado – conforme poderá ser visto adiante. No mais, todas
as funções de execução de query, de tratamento de resultados, e demais, permaneceriam
exatamente iguais.

DRIVERS PDO
Atualmente, estão disponíveis 12 drivers PDO, ou seja, é possível utilizá-lo com doze
diferentes SGBDs. A tabela 1 ilustra os drivers e os bancos de dados suportados.

Driver SGBD Suportados

 Figura 1: Funcionamento da Camada de Abstração

Para utilizarmos a classe PDO, é necessário habilitar sua extensão no servidor web, ou seja, PDO_CUBRID Cubrid
habilitar a extensão que contém o driver específico para cada banco de dados com os quais se
deseja trabalhar.
PDO_DBLIB FreeTDS / Microsoft SQL Server / Sybase

PDO_FIREBIRD Firebird
 DICA

Em relação à instalação e configuração da extensão PDO e drivers mencionados, há diversos PDO_IBM IBM DB2

tutoriais disponíveis na internet. Lembre-se de que esse processo é diferente de acordo com o
Sistema Operacional utilizado. A seção Explore + contém algumas referências base para esse PDO_INFORMIX IBM Informix Dynamic Server
processo.

Como mostrado na Figura 1, assim como nos códigos de exemplo relacionados à conexão e PDO_MYSQL MySQL 3.x/4.x/5.x
execução de instruções próprios do MySQL e do PostgreSQL, vistos anteriormente, a principal
vantagem em se utilizar PDO no lugar das funções nativas do PHP para cada SGBD é o fato
PDO_OCI Oracle Call Interface
dessa extensão fornecer uma camada de abstração de acesso a dados. Em outras palavras,
isso significa que:
PDO_ODBC ODBC v3 (IBM DB2, unixODBC e win32 ODBC)
É possível utilizar os métodos e funções PDO independente do SGBD.

Na prática, e voltando aos códigos PHP para integração com cada SGBD, perceba que, se
PDO_PGSQL PostgreSQL
fôssemos trocar o banco de dados utilizado, precisaríamos também mudar algumas linhas de
 Uma boa prática, em qualquer linguagem de programação, é tratar as possíveis exceções que
PDO_SQLITE SQLite 3 e SQLite 2
possam ocorrer no código. Cada linguagem possui uma sintaxe própria, sendo muito comum
na maioria a utilização da instrução “try/catch”.
PDO_SQLSRV Microsoft SQL Server / SQL Azure
A maioria das linguagens de programação conta com instruções específicas para o tratamento
de exceções. Em linhas gerais, temos uma exceção que pode ser lançada e capturada,
PDO_4D 4D estando o respectivo código envolvido por um bloco try, cuja sintaxe deve contar com, ao
menos, um bloco catch ou finally. Por fim, temos que o objeto lançado, ou seja, a exceção,
 Atenção! Para visualizaçãocompleta da tabela utilize a rolagem horizontal precisa ser uma instância ou subclasse da classe Exception.

CONEXÃO COM O SGBD UTILIZANDO PDO Em relação ao bloco catch, podemos ter vários relacionados a um bloco try, sendo cada um
responsável pelo tratamento de um tipo de exceção. Já o conteúdo do bloco finally será
A primeira ação necessária ao trabalharmos com banco de dados é realizar a conexão com o
sempre executado após o bloco try ou catch.
próprio. Para isso, utilizamos o construtor da classe PDO, que é responsável por criar uma
instância de conexão. O fragmento abaixo demonstra a conexão com MySQL e com o
PostgreSQL.

$dsn = new PDO("mysql:host=localhost;dbname=test", $user, $pass); 

SAIBA MAIS
$dsn = new PDO("pgsql:host=localhost;dbname=test"; $user, $pass);
Consulte por Exceções no Manual do PHP.
Como pode ser visto, o que muda entre as duas instruções é o nome do drive/SGBD. Na
O tratamento de exceções é uma prática recomendadíssima em qualquer código produzido.
primeira, temos “mysql” e na segunda “pgsql”. Além disso, outras opções/parâmetros podem
Além de informar ao usuário ou mesmo ao desenvolvedor que um erro ocorreu e que, com
ser passadas no construtor, como a porta, por exemplo.
isso, o programa não funcionará de acordo com o esperado, o tratamento de exceções
possibilita também que outras partes do programa permaneçam funcionais ou que o programa
não seja encerrado de forma inesperada, mesmo que um erro tenha ocorrido.

PORTA A partir de um dos exemplos acima, poderíamos utilizar o seguinte código, com tratamento de
possíveis exceções, para realizar a conexão com o MySQL, por exemplo:
Uma porta, em redes de computadores, tem a função de identificar aplicações e processos a
<?php

fim de permitir que eles compartilhem uma única conexão com um determinado endereço IP.
//Constantes para armazenamento das variáveis de conexão.

Nesse sentido, a porta padrão do Mysql é a 3306 e a do PostgreSQL a 5432. define('HOST', '127.0.0.1');

Reforçando o que foi dito, caso precisássemos alterar o SGBD usado em nosso projeto, só define('PORT', '5432');

precisaríamos modificar essas informações acima e todo o restante do código, relacionado ao define('DBNAME', 'test');

database, permaneceria inalterado. define('USER', 'user');

define('PASSWORD', 'psswd');
try {

$dsn = new PDO("mysql:host=". HOST .

TRATAMENTO DE EXCEÇÕES ";port=".PORT.";dbname=" . DBNAME . ";user=" . USER .

";password=" . PASSWORD);
PostgreSQL, usando recursos de captura de telas.
} catch (PDOException $e) {

echo 'A conexão falhou e retornou a seguinte mensagem de erro: ' . $e->getMessage();

ENCERRAMENTO DE CONEXÕES E
CONEXÕES PERSISTENTES
Para encerrar uma conexão aberta através de PDO, basta atribuir NULL à variável que contém
a instância da classe. O mesmo deve ser feito com as variáveis que armazenam o resultado da
execução dos métodos que executam instruções SQL, como Exec e Query – que serão vistos
mais adiante.

A linha a seguir demonstra o encerramento da conexão aberta no código anterior:

//...

$dsn = null;

PDO oferece suporte a conexões persistentes – que, em linhas gerais, consiste em não
PDO E SUA CONEXÃO COM MYSQL E
encerrar uma conexão aberta com o SGBD ao final de execução de um script. Com isso, é POSTGRESQL
possível fazer cache da conexão e reutilizá-la quando outros scripts requisitarem uma conexão
semelhante (com as mesmas credenciais) a essa que ficou aberta. Para usar conexões Um resumo sobre PDO e sua conexão com MySQL e PostgreSQL
persistentes em PDO, é necessário incluir um parâmetro a mais no momento de criação da
instância. Veja como ficaria o nosso exemplo de conexão com o PostgreSQL:

<?php

...

try {

$dsn = new PDO("pgsql:host=". HOST .

";port=".PORT.";dbname=" . DBNAME . ";user=" . USER .

";password=" . PASSWORD, array(PDO::ATTR_PERSISTENT => true));

} catch (PDOException $e) {

VERIFICANDO O APRENDIZADO
echo 'A conexão falhou e retornou a seguinte mensagem de erro: ' . $e->getMessage();

No vídeo a seguir, o especialista fará um resumo do módulo, descrevendo brevemente a classe

PDO com ilustração da Figura 1 e demonstrando a conexão do PHP com MySQL e
 Esses dois elementos são a base da programação orientada a objetos. As classes podem ser
MÓDULO 2 definidas como estruturas que definem um tipo de dados e podem ser compostas por atributos
(variáveis) e por funções (métodos). Em alusão ao mundo real, são exemplos de classes:
 Descrever os principais métodos da Classe PDO pessoas, produtos, veículos, imóveis etc. Assim como no mundo real, essas classes são
compostas por características – os seus atributos. Por exemplo: uma pessoa possui nome,
data de nascimento, CPF etc. Para acessar essas características, utilizamos métodos. Veja a
representação dessa classe na figura abaixo:

ORIENTAÇÃO A OBJETOS EM PHP  Figura 2: Diagrama de Classes – Classe Pessoa.

A partir dessa Classe, poderíamos construir novas classes que compartilhassem os mesmos
Como mencionado, uma classe, em linguagens de programação, é um conceito vinculado ao
atributos e funcionalidades que a Classe Pessoa, além de poderem possuir propriedades e
paradigma de orientação a objetos. Logo, antes de descrever a classe PDO e seus métodos e,
funções próprias. Veja esse novo exemplo:
para um melhor entendimento, serão descritos os conceitos básicos de OO em PHP.

O paradigma de orientação a objetos, na engenharia de software, representa uma mudança na

forma de se construir programas: no lugar de um conjunto de procedimentos e variáveis
agrupados por determinado contexto ou objetivo, muitas vezes, não organizados
adequadamente, na O.O. temos uma visão mais próxima ao mundo real representada por
objetos e estruturas (classes) com as quais temos maior familiaridade.

CLASSES E OBJETOS
 //Como abaixo, essa função pode ser vazia. Ou seja, não realiza nenhuma ação.

public function __construct(){ }

public function setNome($nome)

$this->nome = $nome;

public function getNome()

{

return $this->nome;

public function setTipo($tipo)

$this->tipo = $tipo;

 Figura 3: Diagrama de Classes – Exemplo de Herança entre Classes. public function getTipo()

Esse compartilhamento de atributos e comportamentos, na orientação a objetos, recebe o {

nome de herança. Logo, dentro desse conceito, é possível criar classes, como as classes return $this->tipo;

Cliente e Funcionário, que além de herdarem características de uma classe “pai”, possuem }

ainda suas próprias características distintas – data de cadastro e data da primeira compra, em }

Cliente e data de admissão e cargo, em Funcionário. A partir dessa estrutura, a Classe “Fruta”, podemos declarar vários objetos “filhos” /

Há muito mais a ser visto sobre orientação a objetos. As considerações acima foram provenientes dela mesma. Esses objetos também são chamados de instâncias e contêm

apresentadas de maneira resumida, a fim de iniciar esse assunto, ou mesmo revisá-lo, uma valores distintos, uma vez que a estrutura é dinâmica. O próximo fragmento de exemplo

vez que utilizaremos alguns desses conceitos a seguir, quando abordarmos a Classe PDO, demonstra a criação de alguns objetos oriundos da Classe “Fruta”.

seus atributos e propriedades. <?php

Por fim, abaixo são demonstrados exemplos práticos, em PHP, da criação de classes e include "fruta.class.php";

instanciação de objetos de uma classe. Entre cada exemplo, estão presentes explicações

adicionais. Note ainda os comentários inseridos no código, pois eles contêm algumas $fruta1 = new Fruta();

informações extras. $fruta1->setNome("morango");

$fruta1->setTipo("vermelha");

<?php

class Fruta

$fruta2 = new Fruta();

//Propriedades ou atributos da Classe

$fruta2->setNome("laranja");

var $nome;

$fruta2->setTipo("cítrica");

var $tipo;

//Construtor da Classe: Essa função é executada todas as vezes em que uma instância da Como visto no código acima, a criação de novas “frutas”, ou de objetos da classe “Frutas”, é

classe é criada.
feita com a criação de uma variável que recebe o operador “new” seguido do nome da Classe.
A partir desse ponto, essa variável em questão torna-se uma instância da classe. Na prática, $driverdata ]]] ) : bool

essa instância possui os mesmos atributos e propriedades da classe da qual se originou. public bindParam ( mixed $parameter , mixed &$variable [, int $data_type = PDO::PARAM_STR
[, int $length [, mixed $driver_options ]]] ) : bool

public bindValue ( mixed $parameter , mixed $value [, int $data_type = PDO::PARAM_STR ] ) :

bool

A CLASSE PDO E SEUS MÉTODOS public closeCursor ( void ) : bool

public columnCount ( void ) : int

A classe PDO é dividida em duas classes: a própria PDO e a PDOStatement. Enquanto a public debugDumpParams ( void ) : void

primeira contém métodos para conexão com os SGBDs, para o controle de transações e public errorCode ( void ) : string

execução de queries; a segunda, PDOStatement, contém outros métodos relacionados às public errorInfo ( void ) : array

instruções executadas e ao seu retorno. public execute ([ array $input_parameters = NULL ] ) : bool

Os códigos a seguir mostram as estruturas dessas classes. public fetch ([ int $fetch_style [, int $cursor_orientation = PDO::FETCH_ORI_NEXT [, int
$cursor_offset = 0 ]]] ) : mixed

PDO {

public fetchAll ([ int $fetch_style [, mixed $fetch_argument [, array $ctor_args = array() ]]] ) :
public __construct ( string $dsn [, string $username [, string $passwd [, array $options ]]] )

array

public beginTransaction ( void ) : bool

public fetchColumn ([ int $column_number = 0 ] ) : mixed

public commit ( void ) : bool

public fetchObject ([ string $class_name = "stdClass" [, array $ctor_args ]] ) : mixed

public errorCode ( void ) : string

public getAttribute ( int $attribute ) : mixed

public errorInfo ( void ) : array

public getColumnMeta ( int $column ) : array

public exec ( string $statement ) : int

public nextRowset ( void ) : bool

public getAttribute ( int $attribute ) : mixed

public rowCount ( void ) : int

public static getAvailableDrivers ( void ) : array

public setAttribute ( int $attribute , mixed $value ) : bool

public inTransaction ( void ) : bool

public setFetchMode ( int $mode ) : bool

public lastInsertId ([ string $name = NULL ] ) : string

public prepare ( string $statement [, array $driver_options = array() ] ) : PDOStatement

public query ( string $statement ) : PDOStatement

MÉTODO EXEC
public quote ( string $string [, int $parameter_type = PDO::PARAM_STR ] ) : string

Esse método pertencente à classe PDO, executa uma instrução SQL e retorna o número de
public rollBack ( void ) : bool

linhas afetadas pela instrução. Sua sintaxe pode ser vista a seguir:
public setAttribute ( int $attribute , mixed $value ) : bool

<?php

/*a variável $dsn, abaixo, corresponde à instação da classe PDO, inicializada na conexão com
PDOStatement implements Traversable {

o BD*/

/* Propriedades */

$qtdeLinhasAfetadas = $dsn->exec("Delete From Cliente Where codigo_cliente = 1");

readonly string $queryString;

echo "Quantidade de linhas afetadas: " . $qtdeLinhasAfetadas

O código acima é funcional e complementar ao código anterior, uma vez que o método Exec
/* Métodos */

deve ser invocado a partir da instância para a classe PDO (correspondente à variável $dsn em
public bindColumn ( mixed $column , mixed &$param [, int $type [, int $maxlen [, mixed
nosso código). <?php

//...

Em relação às linhas afetadas, tal informação é útil para confirmarmos se a operação foi
while ($row = $resultSet->fetch(PDO::FETCH_ASSOC)) {

executada com sucesso. Logo, podemos utilizar uma estrutura de decisão, como “if”, para
//...

verificar o conteúdo da variável $qtdeLinhasAfetadas. Caso nenhuma linha tenha sido afetada,
}

será retornado 0 (zero). Além disso, Exec pode retornar ainda o booleano FALSE ou então “”
(vazio). OUTROS MÉTODOS IMPORTANTES
Por fim, cabe destacar que esse método não retorna à quantidade de linhas afetadas quando Além desses dois métodos apresentados, as Classes PDO e PDOStatment possuem outros
for executada uma instrução SELECT – o que pode ser feito através do próximo método que importantes métodos, como o Prepare e o Execute, por exemplo.
veremos, o Query.
Considerando a sintaxe desses dois métodos, em comparação com o que vimos dos métodos
MÉTODO QUERY Exec e Query, é boa prática fazer uso de ambos no lugar dos dois primeiros. Para embasar tal
afirmação, veremos alguns conceitos extras, a começar pelo SQL Injection.
O método Query, também pertencente à classe PDO, tem função parecida com o método Exec.
Entretanto, ele, além de executar uma instrução SQL, retorna – quando houver - um conjunto
de resultados (result set) como um objeto PDOStatement. Em caso de falhas, é retornado o
booleano FALSE. Vejamos um exemplo de sua utilização:
SQL INJECTION
<?php

$instrucaoSQL = "Select nome, cpf, telefone From Cliente";

O SQL Injection, ou Injeção de SQL, é um tipo de ataque baseado na manipulação e alteração
//a variável $dsn, abaixo, corresponde à instação da classe PDO, inicializada na conexão com de instruções SQL. Tal ataque é possível devido a vulnerabilidades encontradas em aplicações
o BD
e sistemas que aceitam dados de entrada sem fazer o devido tratamento, além de executarem
$resultSet = $dsn->query($sql);
a conexão e instruções SQL utilizando usuários com privilégios altos.
while ($row = $resultSet->fetch()) {
Vejamos um exemplo prático, normalmente utilizado em formulários de login, onde poderia ser
echo $row['nome'] . "\t";

aplicada uma injeção de SQL.

echo $row['cpf'] . "\t";

echo $row['telefone'] . "\n";

<?php

}
//...

//Realizando uma consulta no BD através do login e senha recebidos por POST

Perceba que, como o método retorna um objeto, é possível acessar seus índices na forma de
$login = $_POST['login'];

índices de array. Para isso, foi utilizado o método fetch, um laço while que percorreu o result
$pswd = $_POST['pswd'];

set retornado, imprimindo os dados selecionados.

$instrucaoSQL = "Select * From Usuario Where login = '$login' And password = '$pswd'";

A respeito do método fetch, que retorna um result set no formato de array numérico e $result = mysql_query( $instrucaoSQL ) or die(' Ocorreu um erro na execução da instrução: ' .
associativo, há ainda outros disponíveis: o fetchAll, fetchColumn e fetchObject. Além disso, $instrucaoSQL . ' ' .

esse método pode receber como parâmetro o tipo de retorno, ou seja, se deverá retornar um mysql_error() );

array associativo, numérico, associativo e numérico (que é o seu padrão por omissão), entre
Perceba que, no código, o conteúdo das variáveis POST ‘login’ e ‘pswd’, equivalentes aos
outros. Veja o exemplo de sua utilização retornando um array associativo:
campos input de um formulário HTML para login, são recebidos no PHP e atribuídos a novas
variáveis. A seguir, o conteúdo dessas variáveis é utilizado em uma instrução SQL. Veja o que
poderia acontecer se no formulário HTML fossem inseridos valores diferentes do previsto,
como, por exemplo, os seguintes valores:
Para resolver os problemas acima, de SQL Injection, poderíamos escrever alguns códigos em
PHP. Em linhas gerais, esses códigos conteriam instruções para tratar os dados recebidos
antes de utilizá-los em instruções SQL. Esse trabalho poderia ser maçante, já que precisaria
prever e tratar diversas formas de códigos maliciosos. Para facilitar e resolver tais questões, a
classe PDO possui um método chamado Prepare.

- O método Prepare, como o nome indica, prepara uma instrução antes de ser executada,
retornando um objeto do tipo statement, que será então executado através do método Execute
(pertencente à classe PDOStatement).

- O método Prepare faz uso de um recurso chamado bind. Tal recurso vincula a variável ou
valor a ser utilizado na instrução SQL a uma outra variável (também pode ser utilizado o sinal
“?”). Durante esse processo de preparação da instrução e bind dos valores, a classe PDO
realiza, de forma interna, ou seja, sem que precisemos nos preocupar com eles, uma série de
tratamentos para evitar a SQL Injection.

Vejamos um exemplo prático de utilização do método Prepare:

<?php

 Figura 4: Exemplo de SQL Injection em um Formulário HTML. //Constantes para armazenamento das variáveis de conexão.

Os valores inseridos no formulário mostrado na Figura 4 seriam recebidos no código PHP da define('HOST', '127.0.0.1');

seguinte maneira: define('PORT', '5432');

define('DBNAME', 'test');

<?php

define('USER', 'user');

//...

define('PASSWORD', 'psswd');
//Realizando uma consulta no BD através do login e senha recebidos por POST

try {

$login = $_POST['login'];

$dsn = new PDO("mysql:host=". HOST .

$pswd = $_POST['pswd'];

";port=".PORT.";dbname=" . DBNAME . ";user=" . USER .

$instrucaoSQL = "Select * From Usuario Where login = '' OR true = true;/* And password = '*/--
";password=" . PASSWORD);

'";

} catch (PDOException $e) {

//...

echo 'A conexão falhou e retorno a seguinte mensagem de erro: ' . $e->getMessage();

Veja que, no lugar dos valores esperados – login e senha –, seriam recebidos comandos que }

modificariam o sentido original da instrução SQL, no código PHP, permitindo assim o acesso ao

sistema em questão. //Realizando uma consulta no BD através do login e senha recebidos por POST

$login = $_POST['login'];

$pswd = $_POST['pswd'];

MÉTODOS PREPARE E EXECUTE $stmt = $dsn->prepare("Select * From Usuario Where login = :login And password =
:password");
relacionados à classe PDO. Veja, por exemplo, as diferenças, na prática, entre os métodos
$stmt->execute([':login' => $login, ':password' => $pswd]);
Exec e Query; e entre esses dois métodos e os métodos Prepare e Execute. Tente realizar uma

mesma consulta ou instrução SQL usando os dois e analise o resultado.

/*Aqui entraria o código para tratar o resultado da instrução SQL acima*/

//Destruindo o objecto statement e fechando a conexão

 RESUMINDO
$stmt = null;

$dsn = null;

- Inclua, ao menos, uma instrução para cada tipo possível: insert, update delete e select;

- Faça o tratamento de erros e exceções;

- Veja onde é possível melhorar os códigos utilizados. Você pode, por exemplo, incluir algumas
 DICA
verificações extras etc.

Repare no código que o método prepare recebe como parâmetro a instrução SQL a ser A seguir o especialista demonstrará a execução de códigos apresentados no módulo, com
executada e que, nos lugares onde seriam utilizadas as variáveis PHP com os valores consultas SELECT e manipulação de dados INSERT, UPDATE e DELETE. Assista ao vídeo.
provenientes do formulário HTML, são usadas outras variáveis, chamadas parâmetros
nomeados (named parameters).

A seguir, o método execute faz o vínculo (bind) entre os named parameters e as variáveis PHP.
O mesmo código acima poderia ser executado tendo o sinal de interrogação “?” no lugar dos
parâmetros nomeados. Veja como ficaria esse fragmento de código:

<?php

//...

$stmt = $dsn->prepare("Select * From Usuario Where login = ? And password = ?");

$stmt->execute([$login, $pswd]);

//...

UM POUCO DE PRÁTICA
UM POUCO DE PRÁTICA
A fim de melhor assimilar o conteúdo apresentado até aqui, chegou a hora de praticar. Todos
os códigos anteriores, usados como exemplos, são funcionais. Logo, a começar pelo código
responsável pela conexão com o SGBD (e tomando o cuidado de alterar as credenciais, nas
constantes PHP, para refletirem os dados de seu ambiente), copie e execute cada um deles
 Este módulo terá caráter prático. Logo, todos os conceitos vistos nos módulos anteriores serão
utilizados na confecção de um Formulário HTML, que enviará dados para um script PHP que
os inserirá em um SGBD – nesse caso, no PostgreSQL, e de uma página para listagem desses
mesmos dados. Cada etapa desse processo será apresentada em detalhes, desde a criação
das tabelas no SGBD, passando pela criação do formulário HTML e chegando nos scripts PHP
que farão a conexão e inserção dos dados através das classes PDO e PDOStatement.

VERIFICANDO O APRENDIZADO
MOTIVAÇÃO
Deverá ser criado um formulário para armazenar os dados de clientes, contendo o seu nome
completo (obrigatório), o seu CPF (obrigatório; apenas os números), um endereço de e-mail

MÓDULO 3 válido (obrigatório) e sua data de nascimento (obrigatório; dia, mês e ano). Além disso, deverá
ser criada uma listagem para exibição dos clientes cadastrados.

 Construir uma aplicação contendo um formulário HTML, uma tabela HTML

e scripts PHP para inserção e listagem de dados em/de um SGDB

ESQUEMATIZANDO O BANCO DE DADOS

Os dados dos clientes deverão ser armazenados em uma tabela. Tal tabela deverá possuir um
campo identificador, autoincremental e único.

A instrução SQL abaixo contém um exemplo de como a tabela cliente pode ser criada.

CREATE TABLE cliente (

id_cliente serial NOT NULL,

nome_cliente varchar(255),

cpf_cliente varchar(11),

email_cliente varchar(255),

data_nascimento_cliente timestamp,

PRIMARY KEY (id_cliente)

);

PREPARAÇÃO
 DICA
A sintaxe completa da instrução “Create Table”, para o PostgreSQL, pode ser vista em seu button ou type Sim O valor “submit”, atribuído ao atributo
próprio manual. input type em um desses campos, cria o
evento de envio do formulário.

 Atenção! Para visualizaçãocompleta da tabela utilize a rolagem horizontal

CONFECCIONANDO O FORMULÁRIO HTML
O formulário HTML deverá ser escrito utilizando a HTML5. Além disso, os campos deverão ser
validados de acordo com seu tipo (quando possível), tamanho e obrigatoriedade de
preenchimento. Poderá ser utilizado um framework CSS, como o Bootstrap, para uma melhor
apresentação do cadastro.
O código do formulário poderá ser visto ao final deste módulo, junto aos demais exemplos de
código. Tal código poderá ser usado como template para desenvolvimentos similares.
CONSIDERAÇÕES SOBRE O FORMULÁRIO HTML
O formulário HTML possui elementos de ligação com o script PHP para o qual será submetido.
A tabela 1 apresenta esses elementos, seus atributos e uma breve descrição.
Elemento Atributo Obrigatório? Descrição
Em termos de boas práticas, é recomendado validar os dados a serem submetidos tanto no
lado cliente, ou seja, no código HTML diretamente, com a utilização dos recursos introduzidos
pela HTML5, ou através de Javascript, assim como no lado servidor. Com isso, caso a
validação falhe, por algum motivo, do lado cliente, teremos a garantia de validação do lado
servidor. Veremos a seguir como realizar a validação de nosso formulário nos dois ambientes –
cliente e servidor.
VALIDAÇÃO NO LADO CLIENTE – HTML5
A partir da HTML5, é possível marcar um elemento como de preenchimento obrigatório
fazendo uso do atributo required. No código do formulário, visto ao final deste módulo, os
campos “Nome”, “CPF”, “Endereço de E-mail” e “Data de Nascimento” receberam esse
atributo. Além disso, foram incluídas outras regras de validação: o campo CPF precisa ter
exatos 11 caracteres (definidos com o uso dos atributos minlength e maxlength) e o endereço
de e-mail precisa ser válido – tal validação é feita diretamente pela HTML, ao definirmos a tag
<input> sendo do tipo (type) “email”.

Contém a URL ou nome do script, VALIDAÇÃO NO LADO CLIENTE – JAVASCRIPT

quando na mesma pasta que o
form action Sim Para validar formulários, antes da HTML5, era necessário utilizar funções em códigos escritos
arquivo HTML, que processará o
na linguagem Javascript. Com isso, o formulário é verificado e, caso passe pelas validações,
documento.
submetido ao servidor. Do contrário, a respectiva mensagem de falha é exibida, para as
devidas correções. A validação do nosso formulário, utilizando Javascript, pode ser vista no
Não. O Define o método HTTP a ser utilizado código abaixo.
form method padrão é para transmissão dos dados – GET ou
function validarFormulario(formulario){

POST POST.
if(formulario.nome_cliente.value === "" || formulario.nome_cliente.value === null) {

alert("O campo Nome não pode ficar vazio.");

Contém o nome do campo que será formulario.nome_cliente.focus();

recebido no PHP como índice return false;

input name Sim

associativo no array $_GET, $_POST }

ou $_REQUEST. if(formulario.cpf_cliente.value.length != 11) {

alert("O campo CPF precisa ter 11 caracteres.");

formulario.cpf_cliente.focus();

return false;

//o campo e-mail precisa ser válido, ou seja, deve : "@" e "."

if(formulario.email_cliente.value.indexOf("@") == -1 || formulario.email_cliente.value.indexOf(".")
== -1) {

alert("O campo E-mail não é válido.");

formulario.email_cliente.focus();

return false;

if(formulario.data_nascimento_cliente.value === "" || formulario.data_nascimento_cliente.value

=== null) {

alert("O campo Data de Nascimento não pode ficar vazio.");

formulario.data_nascimento_cliente.focus();

return false;
O script PHP definido no atributo “action” da tag “form”, no arquivo HTML, é o responsável por
}
receber os dados do formulário, validar os dados recebidos, conectar com o banco de dados e
}
inserir as informações.

Para utilizar a função Javascript acima, é necessário mudar um pouco o código do arquivo
HTML que contém o formulário, removendo os atributos da HTML5, modificando o DocType
para uma versão anterior da HTML, entre outros ajustes. Para facilitar, o código completo
desse arquivo HTML foi adicionado ao final, junto aos demais códigos.
O atributo method, do formulário HTML, define o método HTTP utilizado para a transmissão
dos dados – POST ou GET, sendo POST o valor padrão, caso esse atributo seja omitido no
formulário. Para tratar os dados transmitidos por cada um desses métodos, há uma variável
global pré-definida em PHP: $_POST e $_GET. Além disso, há também a variável
$_REQUEST, que recebe os dados transmitidos por ambos os métodos.

Essas variáveis pré-definidas são, na verdade, um array associativo, cujos índices equivalem

CODIFICANDO O SCRIPT PHP QUE ao valor definido para o atributo name, em cada campo do formulário. Logo, se um input no
formulário HTML for definido com “name=nome_cliente”, em PHP ele poderá ser lido dessa
PROCESSARÁ O FORMULÁRIO forma: $_REQUEST[‘nome_cliente’] - ou através de $_POST[‘nome_cliente’] ou
$_GET[‘nome_cliente’], dependendo do método utilizado.

 DICA

Normalmente, em cenários reais, são utilizados padrões de projeto, como o MVC (Model-View-
Controller), e paradigmas como a Orientação a Objetos, para realizar a integração entre a
HTML, o PHP e o Banco de Dados. Tais questões foram deixadas de lado em nosso cenário,
por estarem fora do escopo deste tema. Entretanto, é recomendado estudar sobre esses <!-- Bootstrap -->

padrões e paradigmas a fim de aplicá-los, garantindo assim maior qualidade ao código gerado, <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
além de outros benefícios. rel="stylesheet" />

</head>

O script PHP que processa o formulário pode ser visto ao final deste módulo. Tal script realiza a
<body>

conexão com o SGBD PostgreSQL, prepara a instrução SQL com o método Prepare e os
<div class="container">

insere no banco de dados através do método Execute. Mais adiante, é realizada uma
<div class="row">

verificação e, em caso de sucesso ou erro, exibida uma mensagem correspondente. Por fim,
<div class="col-md-12">

tanto a instância de conexão PDO quanto o objeto PDOStatement são encerrados.

<form action="processa_cliente.php" method="post">

<div class="row">

<div class="col-md-8">

LISTANDO OS DADOS CADASTRADOS <div class="card">

<div class="card-header">

Embora o objetivo principal fosse o formulário de inserção de dados no SGBD, é interessante <h3>Cadastro de Clientes</h3>

vermos também a recuperação de informações e exibição em uma página HTML. Como dito, </div>

embora funcional, o código utilizado para listagem das informações tem caráter apenas de <div class="card-body">

estudo. Em situações reais, uma série de cuidados, tanto estéticos como de padrões de <div class="form-group">

codificação, devem ser utilizados. <label for="nome_cliente">Nome

<input type="text" class="form-control" id="nome_cliente" name="nome_cliente"

Nosso código de exemplo, que pode ser visto ao final do módulo, é composto por uma única
placeholder="Seu nome" required>

página PHP contendo, tanto códigos de programação, quanto elementos HTML. Veja o código
</div>

base no exemplo.
<div class="form-group">

<label for="cpf_cliente">CPF

<input type="text" class="form-control" minlength="11" maxlength="11" id="cpf_cliente"

CÓDIGOS DE EXEMPLO name="cpf_cliente" placeholder="Seu CPF" title="Digite apenas números" required>

</div>

<div class="form-group">

CÓDIGO DO FORMULÁRIO HTML PARA INSERÇÃO DE

<label for="email_cliente">Endereço de E-mail</label>

CLIENTES <input type="email" class="form-control" id="email_cliente" name="email_cliente" aria-

<!DOCTYPE html>
describedby="emailHelp" placeholder="Seu e-mail" required>

<html>
<small id="emailHelp" class="form-text text-muted">Nunca vamos compartilhar seu email, com
<head>
ninguém.

<title>Formulário HTML - Cadastro de Clientes

</div>

<meta charset="utf-8">
<div class="form-group">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<label for="data_nascimento_cliente">Data de Nascimento
<input type="date" class="form-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
control" id="data_nascimento_cliente" name="data_nascimento_cliente" placeholder="Sua data
de nascimento" required>
<div class="row">

</div>
<div class="col-md-12">

<div class="form-group text-center">

<form action="processa_cliente.php" name="form_clientes" method="post" onsubmit="return
<button type="submit" class="btn btn-primary">Enviar
validarFormulario(this);">

</div>
<div class="row">

</div>
<div class="col-md-8">

</div>
<div class="card">
</div>
<div class="card-header">

</div>
<h3>Cadastro de Clientes</h3>

</form>
</div>

</div>
<div class="card-body">

</div>
<div class="form-group">

</div>
<label for="nome_cliente">Nome</label>

<script src="https://code.jquery.com/jquery-3.5.1.min.js">>
<input type="text" class="form-control" id="nome_cliente" name="nome_cliente"
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js">>
placeholder="Seu nome" >

</body>
</div>

</html>
<div class="form-group">

<label for="cpf_cliente">CPF</label>

CÓDIGO DO FORMULÁRIO COM VALIDAÇÃO EM

<input type="text" class="form-control" id="cpf_cliente" name="cpf_cliente" placeholder="Seu
JAVASCRIPT CPF" title="Digite apenas números" >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" </div>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<div class="form-group">

<html xmlns="http://www.w3.org/1999/xhtml">
<label for="email_cliente">Endereço de E-mail</label>

<head>
<input type="text" class="form-control" id="email_cliente" name="email_cliente"
<title>Formulário HTML - Cadastro de Clientes
placeholder="Seu e-mail" >

<meta charset="utf-8">
</div>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" <div class="form-group">

rel="stylesheet" />
<label for="data_nascimento_cliente">Data de Nascimento</label>

<script type="text/javascript">
<input type="text" class="form-control" id="data_nascimento_cliente"
function validarFormulario(formulario){
name="data_nascimento_cliente" placeholder="Sua data de nascimento" >

//o código da função está no tópico “Validação no lado Cliente – Javascript”

</div>

}
<div class="form-group text-center">

</script>
<button type="submit" class="btn btn-primary">Enviar</button>

</head>
</div>

<body>
</div>

<div class="container">
</div>

</div>
define('PORT', '5432');

</div>
define('DBNAME', 'minimundo');

</form>
define('USER', 'postgres');

</div>
define('PASSWORD', '159753');
</div>
try {

</div>
$dsn = new PDO("pgsql:host=". HOST . ";port=".PORT.";dbname=" . DBNAME . ";user=" .
<script src="https://code.jquery.com/jquery-3.5.1.min.js">>
USER . ";password=" . PASSWORD);

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js">>
} catch (PDOException $e) {

</body>
echo 'A conexão falhou e retorno a seguinte mensagem de erro: ' . $e->getMessage();

</html>
}

/*** FIM DOS CÓDIGOS DE CONEXÃO COM O BD ***/

SCRIPT PHP PARA PROCESSAMENTO DO

FORMULÁRIO HTML
/***PREPARAÇÃO E INSERÇÃO NO BANCO DE DADOS ***/

<?php
$stmt = $dsn->prepare("INSERT INTO cliente(nome_cliente, cpf_cliente, email_cliente,
/***VALIDAÇÃO DOS DADOS RECEBIDOS DO FORMULÁRIO ***/
data_nascimento_cliente) VALUES (?, ?, ?, ?)
");

if($_REQUEST['nome_cliente'] == ""){
$resultSet = $stmt->execute([$_REQUEST['nome_cliente'],

echo "O campo Nome não pode ficar vazio.";

$_REQUEST['cpf_cliente'], $_REQUEST['email_cliente'],

exit;
$_REQUEST['data_nascimento_cliente']]);

}
if($resultSet){

if(strlen($_REQUEST['cpf_cliente']) != 11){
echo "Os dados foram inseridos com sucesso.";

echo "O campo CPF precisa ter 11 caracteres.";

}else{

exit;
echo "Ocorreu um erro e não foi possível inserir os dados.";

}
}

if(!stripos($_REQUEST['email_cliente'], "@") || !stripos($_REQUEST['email_cliente'], ".")){

//Destruindo o objecto statement e fechando a conexão

echo "O campo E-mail não é válido.";

$stmt = null;

exit;
$dsn = null;

SCRIPT PHP PARA LISTAGEM DE CLIENTES

if($_REQUEST['data_nascimento_cliente'] == ""){

echo "O campo Data de Nascimento não pode ficar vazio.";

<?php

exit;
/***CONEXÃO COM O BD ***/

}
//O código de validação server side pode ser visto no exemplo de código 3.

/***FIM DA VALIDAÇÃO DOS DADOS RECEBIDOS DO FORMULÁRIO ***/

//Constantes para armazenamento das variáveis de conexão.

define('HOST', '192.168.52.128');

/***CONEXÃO COM O BD ***/

define('PORT', '5432');

//Constantes para armazenamento das variáveis de conexão.

define('DBNAME', 'minimundo');

define('HOST', '192.168.52.128');
define('USER', 'postgres');

define('PASSWORD', '159753');
<tr>

try {
<th scope="col">#

$dsn = new PDO("pgsql:host=". HOST . ";port=".PORT.";dbname=" . DBNAME . ";user=" . <th scope="col">Nome

USER . ";password=" . PASSWORD);

<th scope="col">CPF

} catch (PDOException $e) {

<th scope="col">E-mail

echo 'A conexão falhou e retorno a seguinte mensagem de erro: ' . $e->getMessage();
<th scope="col">Data de Nascimento

}
</tr>

/***PREPARAÇÃO E INSERÇÃO NO BANCO DE DADOS ***/

</thead>

$instrucaoSQL = "Select id_cliente, nome_cliente, cpf_cliente, email_cliente, <tbody>

data_nascimento_cliente From cliente";

<?php

$resultSet = $dsn->query($instrucaoSQL);
<while ($row = $resultSet->fetch(PDO::FETCH_ASSOC)):

?>
?>>

<!DOCTYPE html>
<tr>

<html>
<th scope="row"><?php echo $row['id_cliente']; ?></th>

<head>
<td><?php echo $row['nome_cliente']; ?></td>

<title>Formulário HTML - Cadastro de Clientes</title>

<td><?php echo preg_replace("/(\d{3})(\d{3})(\d{3})(\d{2})/", "\$1.\$2.\$3-\$4",
<meta charset="utf-8">
$row['cpf_cliente']); ?></td>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<td><?php echo $row['email_cliente']; ?></td>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<td><?php echo date('d/m/Y', strtotime($row['data_nascimento_cliente'])); ?></td>

<!-- Bootstrap -->

</tr>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" <?php>

rel="stylesheet" />
endwhile;

</head>
?>

<body>
</tbody>

<div class="container">
</table>

<div class="row">
</div>

<div class="col-md-12">
</div>

<div class="row">
</div>

<div class="col-md-8">
</div>

<div class="card">
</div>

<div class="card-header">
</div>

<h3>Listagem de Clientes</h3>
</div>

</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js">>

<div class="card-body">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js">>

<table class="table">
</body>

<thead class="thead-dark">
</html>

Como este módulo é essencialmente prático, o especialista demonstrará, no vídeo a seguir, a

execução dos códigos apresentados ao longo do módulo.
CONSIDERAÇÕES FINAIS
Ao longo deste tema, cujo propósito foi apresentar as funcionalidades da linguagem de
programação PHP para integração com bancos de dados, demonstramos alguns recursos da
linguagem. Alguns diretamente voltados para esse propósito, como as funções de conexão
específicas com os SGBDs MySQL e PostgreSQL, além da classe PDO e alguns de seus
métodos, outros relacionados à linguagem em si, como as constantes, as funções, as
extensões, o tratamento de exceções, e o paradigma de orientação a objetos. Ao final, cada
um desses conceitos foi aplicado na construção de um Formulário e de uma Listagem HTML
que insere e recupera informações de uma base de dados.

RESUMO DO MÓDULO  PODCAST

AVALIAÇÃO DO TEMA:

REFERÊNCIAS

VERIFICANDO O APRENDIZADO PHP. Manual do PHP. In: PHP. Publicado em: 5 ago. 2020.

EXPLORE+
CONCLUSÃO
Para saber mais sobre os assuntos explorados neste tema:

Pesquise:

PHP. Mysql. In: Manual do PHP.

PHP. PostgreSQL. In: Manual do PHP.

PHP. Data Objects. In: Manual do PHP.

O PHP possui algumas funções específicas para vários SGBDs, através das quais é possível
realizar a conexão com o banco de dados e executar instruções SQL. Além disso, há funções
próprias para a recuperação de dados, como as que transformam o conjunto de resultados em
arrays numéricos ou associativos. O Manual do PHP contém a listagem dessas funções, assim
como exemplos de sua utilização. Cabe ressaltar que, no lugar da utilização dessas funções
específicas, deve-se dar preferência ao uso da Classe PDO como camada abstração para esse
fim. Neste mesmo Manual, não deixe de ler também maiores sobre o método fetch e
equivalentes.

CONTEUDISTA
Alexandre de Oliveira Paixão

 CURRÍCULO LATTES