Desenvolvimento WEB

Prévia do material em texto

2
AULA 1 – O AMBIENTE WEB – CLIENTE X SERVIDOR E AS TECNOLOGIAS
Definição
Apresentação dos conceitos: Ambiente Web; modelo Cliente x Servidor; IHC (Interação Humano-Computador); interface; Design Responsivo; Design Adaptativo; Mobile First; tecnologias do lado cliente; HTML5; CSS; páginas estáticas; JavaScript; tecnologias do lado servidor; linguagem de programação PHP; páginas dinâmicas; banco de dados; Sistema Gerenciador de Banco de Dados – SGBD; e acesso a dados.
Propósito
Compreender a composição do Ambiente Web – o que chamamos de lado cliente e lado servidor, assim como as tecnologias inerentes a cada um.
Objetivos
· Módulo 1: Reconhecer o Ambiente Web
· Módulo 2: Compreender o conceito de interface
· Módulo 3: Reconhecer as tecnologias do lado cliente
· Módulo 4: Reconhecer as tecnologias do lado servidor
Introdução
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: de um lado, a origem das requisições e solicitações de recursos ou serviços – o lado cliente – e, do outro, processos sendo executados a fim de prover tais recursos ou serviços – o lado servidor. Atualmente, tal modelo é amplamente utilizado, sendo base do Ambiente Web e de suas aplicações, como veremos ao longo deste tema.
Módulo 1
Reconhecer o Ambiente Web
Ambiente Cliente X Servidor
Um pouco de história
O modelo Cliente x Servidor foi criado pela Xerox PARC nos anos 1970, tendo como principal premissa a separação entre dados e recursos de processamento, ao contrário do modelo 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.
Como é composto o modelo Cliente x Servidor
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 abaixo.
Aplicações no Modelo Cliente X Servidor
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 conceito de desenvolvimento em camadas. Logo, surgiram os modelos de 2, 3 e 4 (ou N) camadas.
Modelo de 2 camadas
Neste modelo, temos as camadas Cliente e Servidor, sendo função da primeira tratar a lógica do negócio e fazer a interface com o usuário, enquanto a segunda é responsável por tratar os 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
Este modelo foi criado para resolver alguns problemas do modelo anterior, entre eles a necessidade de reinstalação/atualização da aplicação nos clientes a cada mudança de regra 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:
Modelo de 4 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 a ter os clientes acessando aplicações hospedadas em servidores Web a partir de navegadores. Neste modelo, a divisão de responsabilidades ficou dessa forma:
	Cliente
	Passou a precisar apenas de um navegador para ter acesso à aplicação
	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:
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.
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:
No exemplo mostrado acima, 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 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.
Solicitação e Resposta
O processo de comunicação no Ambiente Web é conhecido como Solicitação (Request) e 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.
Client Side X Server Side
Essas duas expressões são muito comuns quando falamos de aplicações rodando no Ambiente Web. Ambas se referem a tecnologias, códigos, disponibilizados no lado cliente (neste caso, o dispositivo utilizado por um usuário para fazer uma requisição) e no lado servidor. 
Módulo 2
Compreender o conceito de interface
A Interface do lado cliente
O conceito de interface está ligado à área de Interação Humano-Computador (IHC), que pode ser resumida como o estudo da interação entre pessoas e computadores. Nesse contexto, a interface, muitas vezes chamada de interface do utilizador, é quem provê a interação entre o 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. Segundo Morais (2014), no início, a interação foi, de certa forma, primária, deixando um pouco de lado o ser humano, por não existir um estudo aprofundado desses aspectos.
Dessa forma, o foco do estudoda interface envolvia principalmente o hardware e o software, e o ser humano simplesmente tinha que se adaptar ao sistema criado.
Posteriormente, com o avanço da tecnologia e do acesso a computadores, e mais recentemente a outros dispositivos, sobretudo os smartphones, a necessidade de melhorar a interação tem crescido continuamente.
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.
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, que sejam desenvolvidos sistemas fáceis de usar e de aprender, além de flexíveis. Em complemento a esse conceito, e partindo do ponto de vista da usabilidade, ela deve 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.
Sobre o tamanho de telas, e considerando o período de abril de 2019 a abril de 2020, temos os seguintes dados:
	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%
	414 x 896
	3,62%
	1536 x 864
	3,57%
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 abaixo:
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.
Essa definição, na prática, implica que a página web/aplicação acessada deve ser capaz de, automaticamente, responder às preferências do usuário e, com isso, evitar que seja necessário construir diferentes versões de uma mesma página/aplicação para diferentes tipos e tamanhos de dispositivos.
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.
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 oposto, ou seja, o layout fixo.
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 adaptam às alterações no tamanho do campo de visão dos dispositivos que os visualiza.
Pixel: 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 fluido
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.
Além dos valores percentuais, há outras unidades de medidas flexíveis, como, por exemplo:
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 unidade, que faz referência à raiz (root).
Saiba mais: Além das unidades, fixas e flexíveis já mencionadas, há ainda outras disponíveis. A listagem completa pode ser acessada através do site do W3C – CSS Units.
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.
Com base na afirmação de que cabe ao CSS estruturar o layout de uma página Web, temos normalmente associada a uma página Web uma ou mais Folhas de Estilo – que são códigos que definem aspectos de toda a página, como as dimensões dos elementos, cores de fundo, as cores e os tipos de fonte etc.
Nesse contexto, Media Query é a utilização de Media Types (tipos de mídia) a partir de uma ou mais expressões para definir formatações para dispositivos diversos. Com o seu uso podemos, por 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 que 600px.
A figura abaixo mostra um fragmento de código onde uma Media Query é utilizada para impedir que um menu lateral (o elemento HTML cuja classe equivale a “menu_lateral”) seja exibido caso a largura da tela do dispositivo seja menor que 360 pixels.
O resultado das expressões utilizadas na Media Query pode ser verdadeiro ou falso. No caso acima, será verdadeiro sempre que a largura da tela do dispositivo que visualiza a página seja inferior a 360 pixels. Do contrário, será falso. Ou seja, para todos os dispositivos cuja largura 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.
Scripts
Quando falamos em Scripts no lado cliente, no Ambiente Web, estamos falando de linguagens 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 dinâmica de conteúdos, o controle de multimídia, a animação de imagens e muito mais. No contexto do design responsivo, sua faceta mais importante é a de atualização dinâmica de conteúdo – e não só do conteúdo, mas também da apresentação do mesmo.
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 conceitos na prática acontece da seguinte forma:
Design Responsivo
Medias Queries são utilizadas, em conjunto com scripts, para criar um layout fluido que se adapte – através, sobretudo, da adequação das dimensões de seus elementos – ao tamanho da tela do dispositivo utilizado pelo visitante.
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.
Resumindo: Poderíamos ainda dizer que o Design Responsivo é mais complexo, porém mais flexível. Já o Adaptativo, mais trabalhoso, embora menos flexível.
Como dito, no design responsivo é preciso criar uma série de combinações de Media Query para que o layout se adapte aos mais variados tamanhos de tela. Já no adaptativo, imaginemos a situação onde foram definidos os seguintes layouts e quebras: 360px, 720px, 900px, 1080px, 1440px e 1800px. Caso a largura da tela do dispositivo seja superior a 360px e inferior a 720px – por exemplo, 700px −, será carregado o layout de 360px, que equivale, praticamente, à sua metade. É possível imaginar que, neste caso, o resultado não seja visualmente muito agradável ou otimizado.
Mobile First
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, posteriormente, para telas maiores. Trata-se de um enfoque progressivo (progressive 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, posteriormente, adaptadas para dispositivos móveis e telas menores.
A aplicação prática do Mobile First consiste em planejar o desenvolvimento de um site priorizando os recursos e as características presentes nos dispositivos móveis, como o tamanho de tela, a largura de banda disponível e até mesmo recursos específicos, como os de localização, por exemplo.
Módulo 3
Reconhecer as tecnologias do lado cliente
As tecnologias do lado cliente: HTML5, CSS E JavaScript
HTML
A HTML é considerada a tecnologia fundamental da Web, pois sua função é definir a estrutura de uma página Web. Essa linguagem de marcação, criada por Tim Berners-Lee na década de 1990, 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.
Em linhas gerais, a HTML é uma linguagem de marcação simples, composta por elementos, chamados tags, que são relacionados a textos e outros conteúdos a fim de lhes dar 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:
Tags Estruturais
Juntamente com o elemento de definição do DocType, como pode ser visto abaixo, compõem a estrutura obrigatória de uma página web.
Tags De Conteúdo
Como nome sugere, têm o papel de marcar o conteúdo pelo seu tipo.
Tags Semânticas
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 abaixo:
Saiba mais: Uma listagem completa de tags e atributos (usados para adicionar características a uma tag) pode ser encontrada no site do W3C.
Como visto acima, 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 assim um documento HTML completo.
HTML 5
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:
· Novos atributos e elementos, com foco sobretudo na semântica.
· Melhorias de conectividade.
· Possibilidade de armazenamento de dados no lado cliente.
· Otimização nas operações off-line.
· Suporte estendido a multimídia – áudio e vídeo.
CSS
O CSS corresponde à segunda camada no tripé de tecnologias que formam o lado cliente, no Ambiente Web. Trata-se de uma linguagem declarativa cuja função é controlar a apresentação visual de páginas Web. Com isso, têm-se a separação de funções em relação à HTML:
Uma cuida do conteúdo, da estruturação; a outra cuida da apresentação, do layout.
Sintaxe
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 seletor
	Um elemento HTML (body, div, p etc.) ou o seu identificador (atributo id) ou classe (atributo class).
	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 abaixo:
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. A respeito dos seletores, propriedades existentes e mais detalhes sobre a CSS é recomendado ler o Guia de Referência do próprio W3C.
Como inserir o CSS na página Web
Há quatro formas de inserir o CSS em um documento: Inline, Interno, Externo e Escopo.
 Clique nas barras para ver as informações.
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>.
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 dentro da tag à qual se quer aplicar os estilos.
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.
Boas práticas relacionadas à CSS
É 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.
Exemplo: 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 formas Inline e Interna, precisaríamos replicar um mesmo código em todas as páginas. Imagine agora ter que fazer alguma alteração ou inclusão, tal operação precisaria ser repetida inúmeras 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 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.
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 uma sintaxe − própria de cada pré-processador −, que inclui inúmeras facilidades não suportadas naturalmente pelo CSS, como variáveis, funções, regras aninhadas, entre outras.
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.
JavaScript
O JavaScript completa o tripé de tecnologias Web que rodam no lado cliente. Trata-se de uma linguagem de programação que, assim como o CSS, é interpretada pelo Navegador. Entre suas principais características, destaca-se o fato de ser multiparadigma (orientação a objetos, protótipos, funcional etc.).
JavaScript: Costuma-se abreviar o seu nome como “JS”, que é também a extensão de seus arquivos − quando vinculados externamente ao documento HTML.
Sua função é, sobretudo, fornecer interatividade a páginas Web, e foi criada com o intuito de diminuir a necessidade de requisições ao lado Servidor, permitindo a comunicação assíncrona e a alteração de conteúdo sem que seja necessário recarregar uma página inteira.
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 linguagem de programação completa e, como já mencionado, multiparadigma. Logo, seus códigos podem ser tanto estruturados quanto orientados a objetos. Além disso, permitem que bibliotecas, como Jquery, Prototype etc. sejam criadas a partir de seu core, estendendo assim a sua funcionalidade. Vejamos algumas características dessa linguagem:
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 do DOM e AJAX (PrototypeJs).
	Eventos e Manipulação DOM
	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, exiba uma mensagem na tela. Ou, ainda, aumentar o tamanho de uma fonte ou diminuí-lo
	Mensagens e Entrada de Dados
	O JavaScript possui suporte a funções nativas para a exibição de caixas de diálogo para entrada de dados ou exibição de mensagens, como alertas, por exemplo
JSON
O JSON é um formato para troca de dados no Ambiente Web. Logo, é importante fazer menção a ele quando falamos das tecnologias do lado cliente, uma vez que tal formato está entre os mais utilizados no intercâmbio de dados com o lado servidor e 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 o JavaScript não esteja presente.
Como inserir o JavaScript na página Web
A inserção do JavaScript em uma página HTML é feita de forma bastante similar à da CSS. 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 externos com a extensão “.js”, devendo estes serem linkados na tag <head>. Vejamos alguns exemplos das formas de inclusão do JavaScript. Exemplo:
A primeira parte da figura acima, mostra o fragmento de uma página HTML onde há um botão e um evento – onclick – que, ao ser disparado (no click do botão), chama a função “funcaoJavaScript”, declarada no corpo do HTML, logo após a tag <button>. Tal função exibe um alerta na tela. A segunda parte da Figura mostra a declaração do JavaScript dentro da tag <head>. Este código faz uso de um evento, o de carregamento da janela do navegador, para exibir uma alerta de boas-vindas. Por fim, na última parte da imagem, vemos a declaração para a incorporação de um arquivo externo JS, assim como o código do arquivo.
Boas práticas relacionadas ao JavaScript
	1
	Assim como foi dito em relação à CSS, deve-se dar preferência à utilização de arquivos externos para a incorporação de Javascript.
	2
	Outra boa prática consiste em incorporar arquivos externos de Javascript ao final da página, após o fechamento da tag <body>. Com isso, temos ganho de desempenho, uma vez que o carregamento da página HTML é feito de cima para baixo. Logo, quanto mais código, CSS ou Javascript, existir no topo da página, dentro da tag <head>, mais demorado será o carregamento da página em si.
	3
	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 serão executados, uma vez que foram carregados antes do Javascript. Nesse caso, pode ser adotada uma abordagem híbrida, onde os códigos Javascript dos quais a página dependa para funcionar corretamente fiquem no início e os demais, ao final.
Atenção: Assim como já foi falado em relação à CSS, é também recomendado minificar o arquivo .js a fim de otimizar o desempenho do carregamento da página.
Finalmente, cabe citar que, embora originalmente exclusivo do lado cliente, atualmente o JavaScript também pode ser usado no lado servidor. O node.js é um exemplo de ambiente que 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.
Módulo 4
Reconhecer as tecnologias do lado servidor
As tecnologias do lado servidor: PHP, Páginas Dinâmicas e Acesso a Dados
PHP
Uma das principais funções das linguagens de programação Server Side é permitir o acesso a 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 ASP, o .NET e o PHP – que conheceremos um pouco mais ao longo deste tópico.
O que é o PHP e para que serve
PHP é uma linguagem de programação baseada em script, open 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.
Frisando o que já foi dito acima, o principal foco do PHP são os scripts do lado servidor, dando 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 dados, entre outras. Além disso, do foco nos scripts no lado servidor, é possível também utilizar o PHP através de scripts em linha de comando e na criação de aplicações Desktop (com a utilizaçãoda extensão PHP-GTK), embora não seja a melhor linguagem para isso.
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 1
	O PHP é uma linguagem interpretada, ou seja, precisa rodar sobre um servidor Web
	Etapa 2
	Com isso, todo o código gerado é interpretado pelo servidor
	Etapa 3
	Convertido em formato HTML
	Etapa 4
	E, então, exibido no navegador
Logo, o código-fonte não pode ser visto no lado cliente, mas apenas o HTML gerado.
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 Nginx, entre outros.
Anatomia de um script 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 imagem abaixo 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”.
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 imprimir algo na tela, associado a uma frase. Quando visualizado no navegador, o código será 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.
Na segunda imagem, temos um exemplo de código onde são definidas duas variáveis, $nome 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 utilização, mais uma vez, de uma tag html, a <br/>, em meio a código PHP.
Sintaxe
Assim como fizemos com o Javascript, veremos a seguir um resumo sobre a sintaxe do PHP:
	Variáveis
	As variáveis em PHP são criadas com a utilização do símbolo de cifrão ($). Além disso, PHP é case sensitive. Logo, tomando como exemplo as variáveis mostradas na Figura 9, $nome e $email, ambas são diferentes das variáveis $Nome e $Email
	Tipos de dados
	O PHP é uma linguagem fracamente tipada. Logo, embora possua suporte para isto, não é necessário definir o tipo de uma variável em sua declaração.
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
	O PHP tem suporte às condicionais if, else, if e else ternários, if else e switch
	Laços de repetição
	Estão disponíveis os laços: For, foreach, while e do-while
	Funções e métodos
	O PHP possui uma grande quantidade de funções e métodos nativos
Inclusão de scripts dentro de scripts
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 classes, codificadas em diferentes scripts. Logo, sempre que precisarmos fazer uso de uma dessas classes, de seus métodos ou atributos, basta incluí-la no script desejado. Para incluir um script em outro o PHP disponibiliza algumas funções:
· Include
· Require
· Include once
· Require_once
Acesso ao sistema de arquivos
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 exclusão de dados.
Páginas dinâmicas
Se fôssemos implementar em uma página Web tudo o que estudamos até aqui, teríamos uma página HTML básica, com um pouco de interação no próprio navegador, graças ao Javascript, e também com um pouco de estilo, este devido ao CSS.
Além disso, já sabemos que é possível enviar dados do HTML para o PHP através de um formulário. Mas e agora? Qual o próximo nível? O que fazer a seguir? A resposta para essas duas perguntas está no que abordaremos a seguir: páginas dinâmicas e acesso a dados.
Exemplo: Imagine um site que tenha, por exemplo, dez páginas. Agora imagine que esse site tenha a mesma estrutura visual, o mesmo cabeçalho, menu, rodapé e outros pontos em comum. Pense 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 precisaria ser digitado e muito código HTML, repetido. Todo esse trabalho nos ajuda a entender o que são páginas estáticas.
Ainda utilizando o exemplo de um blog, imagine que você deseja receber comentários em seus 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.
A combinação das tecnologias do lado cliente com as tecnologias do lado servidor produzem as páginas dinâmicas. Nelas, é possível receber as informações provenientes do cliente, processá-las, guardá-las, recuperá-las e utilizá-las sempre que desejarmos. E não é só isso: Podemos guardar todo o conteúdo do nosso blog no banco de dados. Com isso, teríamos apenas uma página PHP que recuperaria nosso conteúdo no banco e o exibiria no navegador. A tabela abaixo apresenta um pequeno resumo comparativo entre as páginas estáticas e dinâmicas.
	
	Páginas estáticas
	Páginas dinâmicas
	Inclusão/Alteração/Exclusão de conteúdo
	Manualmente, direto no código HTML
	Automaticamente através de scripts no lado servidor, como PHP
	Armazenamento do conteúdo
	Na própria página HTML
	Em um banco de dados
Outra importante característica de um site dinâmico é possibilitar a utilização de ferramentas de 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 ferramenta e gerenciar o conteúdo através dela. Já no site estático, será preciso modificar diretamente o código HTML, tornando necessário alguém com conhecimento técnico para isto.
Acesso a Dados
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 diversas informações podem ser armazenadas e posteriormente recuperadas. Para realizar a gestão destes dados, existem os SGBD, ou Sistemas Gerenciadores de Bancos de Dados.
Se, por um lado, o SGBD é responsável por montar a estrutura do banco de dados − entre outras funções −, por outro lado, para recuperarmos uma informação guardada em um banco 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.
Formas de acesso a dados
A partir das tecnologias vistas até aqui, há algumas formas de acessar os dados guardados em um banco 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 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.
Vale lembrar ainda o que vimos sobre o PHP: Ele permite a utilização de códigos HTML diretamente em seus scripts. Logo, uma página Web feita em PHP pode recuperar dados do 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.
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 lado servidor, como recuperar algum dado, por exemplo, tratar o seu retorno e o exibir na tela. Isso tudo sem que seja necessário recarregar toda a página
Considerações Finais
Ao longo deste tema, vimos como o modelo Cliente x Servidor, inicialmente restrito às redes internas das empresas, evoluiu tanto nos diferentes modelos de camadas quanto na migração para a internet. Novas tecnologias foram criadas no lado cliente − linguagens de marcação; 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 melhor experiência possível para os usuários que dele fazem uso.
AULA 2 – HTML – LINGUAGEM DE MARCAÇÃO DE HYPERTEXTO
Definição
Apresentação dos conceitos de HTML, linguagem de marcação e estrutura básica de páginas Web.
Propósito
Explicar a função e utilização da linguagem de marcação HTML.
Preparação
Ler sobre o conceito básico de HTML.
Ter instalado no computador um navegador web/browser e um editor de texto que dê suporte à marcação HTML. No Sistema Operacional Windows é indicado o Notepad++. No Linux, o Nano Editor.
Objetivos
· Módulo 1: Descrever a estrutura de uma página Web
· Módulo 2: Descrever o uso das Tags na HTML
· Módulo 3: Demonstrar as tags complementares às tags básicas em uma página Web
· Módulo 4: Aplicar um formulário em uma página Web
Introduçã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 conteúdo de um documento. Este conteúdo pode ser composto de textos, figuras, tabelas etc.
Estrutura, por sua vez, pode ser definida como a organização dos elementos de conteúdo. Para realizar essa função, a HTML faz uso de um sistema hierárquico de elementos chamados de tags.
Módulo 1
Descrever a estrutura de uma página Web
O princípio da HTML
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.
Já o HyTime é um padrão desenvolvido pela ISO com o objetivo de possibilitar que hiperdocumentos hipermídia pudessem ser descritos em função de sua estrutura e conteúdo e, consequentemente, utilizados por quaisquer sistemas conformantes (Newcomb et al, 1991).
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 de 1996 passou a ser mantida pelo World Wide Web Consortium (W3C), além de ter ganhado também o status de norma internacional (ISO/IEC) em 2000.
A evolução da HTML: Versões
Ao longo dos anos, a HTML tem passado por uma série de aperfeiçoamentos. Tal processo é liderado pelo W3C. Desde a sua criação, a HTML teve várias versões: HTML, HTML 2.0, HTML 3.2, HTML 4.01, XHTML, HTML 5, HTML 5.1 e HTML 5.2. Veja na tabela a seguir o histórico de versões da HTML:
	Ano
	Versão
	Histórico
	1991
	HTML
	Tim Berners-Lee cria a HTML
	1995
	HTML 2
	Grupo de Trabalho HTML define a HTML 2.0
	1997
	HTML 3.2
	W3C publica a Recomendação HTML 3.2
	1999
	HTML 4.01
	W3C publica a Recomendação HTML 4.01
	2000
	XHTML
	W3C publica a Recomendação XHTML 1.0
	2014
	HTML5
	W3C publica a Recomendação HTML5
	2016
2017
	HTML 5.1
	W3C candidata a Recomendação HTML 5.1
W3C publica a Recomendação HTML 5.1 2ª edição
	2017
	HTML 5.2
	W3C publica a Recomendação HTML5.2
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; criação de novas tags; suporte a novos recursos etc.
Tipos de documento
O ponto inicial da estrutura de uma página Web é o tipo de documento a ser utilizado. 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.
Com isso, as primeiras tags eram relacionadas a elementos como títulos, parágrafos, quebras 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.
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.
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 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.
Utilizando Doctypes – Document Types
A importância dos Document Types, na criação de páginas HTML, diz respeito ao conjunto de tags que podem ser usadas e que serão ou não renderizadas a partir do tipo utilizado.
Antes da HTML5, existia um conceito chamado de Concordância de Documento. Embora 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 página precisa ser concordante com a especificação W3C oficial para a qual ela foi escrita.
A especificação da HTML 4, por exemplo, previa três tipos de DocTypes: Strict, Transitional e Frameset. Vamos conhecer cada uma delas?
	Strict
	Como o próprio nome diz, determinava uma série de restrições e exigências: obrigatoriedade de separação entre a estrutura e a apresentação; limitação nos elementos de apresentação disponíveis - como tags de fonte e atributos de alinhamento −; ausência de suporte a tags obsoletas etc
	Transitional
	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 página
Vemos o fragmento do código inicial de uma página HTML 4.01:
<!DOCTYPE HTML PUBLIC “-/W3C/DTD HTML 4.01 Transitional//EM” 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 parauso 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:
· Não é uma tag HTML, mas sim uma instrução.
· É uma declaração que serve para informar ao navegador qual a versão da HTML usada em um arquivo HTML.
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>
Comparando as declarações do DocType entre a HTML5 e a HTML4, notamos algumas diferenças.
A principal é que a HTML5, ao contrário das versões anteriores, não se baseia na SGML e, portanto, não requer referência a um DTD.
Estrutura de uma página Web – Elementos obrigatórios
Como visto anteriormente, a estruturação de uma página Web tem início na definição do DocType a ser utilizado. Em seguida, é necessário inserir um conjunto de tags que, em conjunto com o DocType, formam a sua estrutura básica. Tal estrutura é demonstrada na figura abaixo:
  
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.
Outra característica importante sobre as tags, que abordaremos de maneira mais aprofundada a seguir, é que uma tag deve ser aberta e fechada.
A declaração <html> é a abertura, e o seu fechamento se dá com a declaração </html>. Com isso, observando a figura acima, é possível perceber que as demais tags estão contidas dentro da tag raiz, <html>.
Comentário: 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 1, uma vez que ainda não tratamos dos conceitos de atributo. Por ora cabe dizer que este atributo global (por ser declarado na tag raiz) deve ser utilizado para definir o idioma da página – podendo também ser aplicado a outras tags, definindo o idioma delas. Alguns exemplos de sua declaração:
· <html lang=”en-US” >
· <html lang=”en-GB” >
· <html lang=”pt” >
Cabeçalho
A tag <head> é chamada de cabeçalho do documento. Fazendo analogia ao corpo humano, devemos vê-la como a cabeça, uma vez que esta contém as tags que serão usadas para manter todo o documento funcionando e em ordem.
Na tabela a seguir é possível visualizar as tags que fazem parte do cabeçalho:
	Tag
	Para que serve
	<title>
	É o título do documento, sendo visualizada na barra de título do navegador.
	<meta>
	Engloba uma série de informações – comumente chamadas de metainformações – como a descrição da página, palavras-chave etc.
	<script>
	É responsável pela inclusão e/ou definição de scripts relacionados ao documento.
	<link>
	É responsável pela inclusão de folhas de estilo (externas) relacionadas ao documento. Também possibilita a inclusão de favicons (pequenos ícones que aparecem na barra de endereços do navegador).
	<style>
	Assim como a anterior, é responsável pelo vínculo de folhas de estilo ao documento − quando elas são declaradas diretamente no documento.
Corpo
Logo abaixo do cabeçalho deve ser inserida a tag <body>. Esta é responsável pela estruturação do documento, sobretudo de seu conteúdo e apresentação – embora 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).
Quando navegamos em um website, todo o conteúdo que vemos – os textos, imagens e demais elementos – está contido dentro da tag <body>.
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
	Barra lateral
	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 é 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.
Módulo 2
Descrever o uso das Tags na HTML
Aprofundando o conceito de tags
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 palavras, escritas entre os caracteres de menor “<” e maior “>” e que servem para informar ao navegador a estrutura e o significado do conteúdo inserido em uma página Web.
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, salvar e carregar esta página no navegador. Como pôde ser visto, o navegador exibiu o texto, que provavelmente era curto.
Agora, tente imaginar o site de um portal de notícias com todo o conteúdo amontoado dentro da tag <body>.
Embora exibido pelo navegador, tudo seria uma grande bagunça, uma confusão. No lugar 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.
Como declarar as tags
Antes de conhecermos mais a fundo as tags, sua composição e tipos, vamos voltar à criação.
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.
Outro ponto importante é a forma como uma tag é escrita, entre os sinais de menor e 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:
· <h1>Título de uma seção</h1>
· <p>Parágrafo contendo um texto</p>
Com base no primeiro exemplo, dizemos que a tag foi iniciada ao inserirmos o “<h1>” e fechada no “</h1>”.
Existem algumas tags que fogem à essa regra. Um exemplo bem conhecido é a de quebra de linha: <br />. Repare que, nesse caso, a tag é fechada com a utilização da “/” logo antes do sinal de maior.
Atenção: A tag de quebra de linha tornou-se obsoleta a partir da HTML5.
Tipos e composição das tags
As tags podem ser divididas em tipos, de acordo com as suas funções: estruturais, textuais e semânticas. Outra característica importante é que elas também podem ter atributos. A seguir, falaremos sobre cada um desses temas.
Os atributos
Os atributos servem para que algumas características sejam adicionadas a um elemento, a uma tag. São compostos por um nome e por um valor. Exemplo:
· <img src=”imagem.jpg” alt=”minha imagem” />
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 imagem” são seus valores, respectivamente.
O atributo “src” define o endereço e o nome daimagem. 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.
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 inserirmos estilização visual nas páginas, através de Folhas de Estilo ou eventos e interação, através de Javascript
Tipos de tags: textuais e semânticas
Até aqui, conhecemos algumas tags associadas à estrutura, dita obrigatória, de uma página. Também vimos que, na maioria dos casos, as páginas Web possuem uma mesma estrutura em termos de conteúdo. A seguir, conheceremos os tipos de tag textuais e semânticos.
	Tags textuais
	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> ... <h6>, <img> e <a>. Essas tags e suas funções serão descritas a seguir, quando tratarmos das tags semânticas
	Tags semânticas
	A partir da HTML5 foram inseridas tags com a função semântica de organizar a estrutura de conteúdo de uma página. Logo, voltando ao exemplo de seções básicas de uma página, nossa página ficaria conforme figura abaixo
Ao analisar a figura acima, é possível perceber que existem tags específicas para cada seção do conteúdo. Essa é uma característica importante da HTML, chamada de semântica.
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.
Em muitos casos é indiferente, ao visualizarmos uma página no navegador, as tags utilizadas para guardar determinado conteúdo. Entretanto, é fortemente recomendado usá-las de acordo com sua função.
Isso cria uma organização no documento que facilita tanto para você, que o escreveu, quanto para outras pessoas que venham a editar o mesmo documento. Além disso, muitos dispositivos fazem uso dessa marcação para uma correta interpretação do conteúdo ali contido. A seguir, veremos outras tags e suas respectivas funções:
	Tag
	Descrição/Função
	<article>
	Inclui um bloco de conteúdo que deve ser usado quando se deseja inserir um artigo, como um post de um blog, por exemplo.
	<section>
	Define uma seção no documento. É normalmente utilizado para agrupar seções. Por exemplo: uma <section> poderia conter vários <article>.
	<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
	Usada para inserir títulos ao longo da página. É uma boa prática que cada seção ou cada bloco de texto seja precedido por um título. Trata-se de uma tag hierárquica, logo, no título mais importante deve ser usada a tag <h1>, no subtítulo seguinte, <h2>, e assim por diante. Além disso, uma página poderá conter várias <h1>, <h2>... <h6>. A exceção aqui fica por conta da tag <h1>, uma vez que é recomendado utilizar apenas uma numa mesma página.
	<p>
	Usada para inserir parágrafos de texto.
	<pre>
	Usada para inserir um texto pré-formatado.
	<div>
	Embora não seja considerada semântica, essa tag poderá ser usada 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.
	<span>
	É semelhante à <div>. Entretanto, enquanto a <div> é um elemento não semântico no bloco (quando usada, quebra o conteúdo em uma seção), a <span> é embutida (não quebra o conteúdo, apenas o agrupa).
	<a>
	Usada para inserir links.
	<br />
	Usada para inserir uma quebra de linha.
	<hr>
	Insere uma linha horizontal no documento. Normalmente é utilizada quando se pretende alterar a temática de um texto.
Tags de formatação <strong> e <em> vs <b> e <i>
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:
· <b>: aplica o efeito de negrito em um texto;
· <strong>: aplica o efeito de negrito em um texto e o marca como importante;
· <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”.
Tags obsoletas
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.
· Em primeiro lugar, porque provavelmente foram substituídas por novas tags, com melhor semântica.
· Em segundo lugar, pelo risco de desconfigurarem o conteúdo da página, uma vez que os browsers podem deixar de suportá-las a qualquer momento.
A tabela 4 lista algumas tags obsoletas:
	Tag
	Função
	<applet>
	Identifica a inclusão de um applet Java.
	<center>
	Centraliza horizontalmente o conteúdo de um bloco.
	<dir>
	Container para lista de diretórios ou arquivos.
	<font>
	Determina características relacionadas a fontes de um determinado elemento.
	<image>
	Ancestral da tag <img>, era usada nas primeiras versões HTML para a inserção de imagens.
Tabela 4: Exemplos de tags obsoletas.
Atualmente consideradas obsoletas, as tags <center> e <font> ainda são usadas em muitas 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.
Módulo 3
Demonstrar as tags complementares às tags básicas em uma página Web.
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.
Listas
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
	Usadas quando desejamos listar dados com a necessidade de representar a sua ordenação de forma numérica ou alfabética.
	Não ordenadas
	Usadas quando não há necessidade de listar ordenadamente
	De definição
	Usadas quando precisamos listar itens e atribuirmos uma descrição a eles
Atenção: 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 ainda um terceiro item, que é justamente o utilizado para descrevê-lo.
Na tabela abaixo, podemos ver as tags de cada tipo de lista:
	Tipo
	Tag Container
	Tag Item
	Tag Descrição
	Ordenadas
	<ol>
	<li>
	--
	Não Ordenadas
	<ul>
	<li>
	--
	Definição
	<dl>
	<dt>
	<dd>
Nas figuras abaixo, podemos ver como as tags acima são exibidas no navegador:
Lista ordenada
 
Lista não ordenada
  
 
Lista de definição
  
 
Cabe destacar que tanto o símbolo de ordenação (a numeração, no exemplo acima), no caso da primeira, quanto o símbolo visual (o bullet – pequeno círculo preto), no caso da segunda, podem ser alterados com a utilização de CSS.
Atenção: Este elemento permite que sejam criadas listas dentro de listas – as chamadas listas aninhadas (nested lists).
Tabelas
Quando precisamos lidar com dados tabulares em uma página web utilizamostabelas. As tabelas usadas nesse documento são exemplos do tipo de dado e também da apresentação obtida ao utilizarmos tais elementos na HTML.
Estrutura das Tabelas
A marcação HTML relacionada às tabelas contém, além da tag principal <table>, outras tags. A principal define o container geral.
De forma hierárquica, a seguir temos as tags para a definição de linhas <tr> e colunas <td>. 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.
A tabela abaixo apresenta as tags de marcação, e suas respectivas funções, relacionadas às tabelas:
	Tag
	Função
	<table>
	Container principal da tabela
	<tr>
	Representa as linhas, sendo composta pelas tags relacionadas às colunas.
	<td>
	Representa as colunas e precisa ser inserida dentro da tag de linha.
	<th>
	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 estar contida em uma tag de linha. Este elemento apresenta estilos próprios, sendo renderizado de forma diferente das colunas comuns.
	<thead>
	Armazena o cabeçalho da tabela, sendo composto por linhas e colunas. Este elemento, a exemplo do que vimos anteriormente, tem função 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 de estruturação.
As tabelas, normalmente, são organizadas de maneira uniforme: linhas sobre linhas, colunas após colunas, célula ao lado de célula. Logo, as colunas costumam ter a mesma largura, 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 duas ou mais linhas.
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, estes atributos têm a função de expandir as linhas ou colunas. Sua declaração é acompanhada de um número que indica a quantidade de células a serem utilizadas para expansão da linha ou coluna.
Comentário: Ao final deste módulo teremos a oportunidade de praticarmos um pouco mais e vermos como esses atributos funcionam.
As tabelas e a semântica
Podemos dizer que as tabelas foram, desde a criação do código HTML, o elemento mais utilizado fora de sua função semântica. Isto se deve ao fato de que a estrutura básica de uma 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 fazendo-se uso de tabelas. Além de ir de contra a semântica, tal uso traz consigo outros problemas, como o peso das páginas e a redução da acessibilidade, entre outros.
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 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.
Mídias: Vídeo e Áudio
O suporte à multimídia na HTML vem melhorando ao longo dos anos e versões. Com o advento da HTML5, tornou-se possível, de forma muito simples, incorporar vídeo e áudio em uma página Web. Para isso, e conforme vemos abaixo, são usadas as tags <video> e <audio>.
  
 
Como visto, os atributos também têm suma importância ao fazermos uso das tags de vídeo e áudio. No exemplo acima, temos, inicialmente, o atributo “src” – que informa o endereço, podendo ser de um site, ou mesmo de um arquivo local – no seu computador ou no servidor onde a página Web fica hospedada.
Os atributos “controls”, “autoplay” e “loop”, que são específicos para este tipo de mídia em questão, fornecem suporte ao 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”.
Teoria da prática
Ao final deste módulo, vamos inserir novas tags em nosso arquivo HTML. Inclua ao menos 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.
  
 
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.
Este elemento é um dos mais utilizados para prover interação entre usuários e uma página Web ou até mesmo um aplicativo mobile. Exemplo:
Usamos formulários, por exemplo, quando: visitamos um site e desejamos solicitar uma informação adicional ou um serviço; nos cadastramos para receber e-mails com ofertas ou realizar uma reclamação.
Ao longo deste módulo, veremos os elementos básicos necessários para a construção de formulários HTML.
Estrutura inicial do formulário
A exemplo do que vimos com as tabelas, o formulário é composto por uma tag principal, um container, e várias tags “filhas”.
Tags como campos de texto, de uma ou mais linhas; campos de seleção; e botões fazem parte de sua estrutura.
Além disso, para maior clareza, também usamos tags para informar a função dos campos do formulário. São as chamadas “label”. A tabela a seguir lista as tags comumente usadas em um formulário:
	Tag
	Função
	<form>
	Container principal do formulário.
	<input>
	Campo do formulário. Como há diversos tipos de campos, fazemos uso do atributo “type” para informar o tipo a ser utilizado – conforme veremos mais adiante.
	<textarea>
	Campo de texto de múltiplas linhas.
	<select> e <option>
	Campos de seleção, onde o container é definido pela tag <select> e os itens pela tag <option>.
	button
	Campo de botão. Permite que uma ação seja executada no formulário – enviar o formulário, limpar os dados etc.
	label
	Usado para definir um título, uma legenda, que descreva para que serve cada campo do formulário.
Conhecendo melhor os elementos e atributos do formulário
Na figura abaixo temos o fragmento HTML correspondente a um formulário. Nela é possível ver as tags mencionadas anteriormente, assim como algumas tipificações nos campos e novos atributos. Falaremos sobre ambos a seguir:
É 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 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.
Para melhor visualização e entendimento, todos os atributos contidos no código mencionado são descritos na tabela abaixo:
	Tag
	Atributo
	Função do atributo
	<form>
	action
	Define a URL (endereço) para a qual os dados do formulário serão enviados.
	<form>
	method
	Define o método HTTP (POST ou GET) para envio dos dados.
	<label>
	for
	Vincula a tag <label> ao campo ao qual ela se refere. Este vínculo faz com que seja possível clicar na label para ativar o campo relacionado.
	<input>
	minlength, maxlength
	Definem a quantidade de caracteres mínima e máxima, respectivamente, permitida em um campo.
	<input>, <button>
	type
	Define o tipo do campo e, sobretudo, como ele se comporta.
	<option>
	value
	Este atributo também pode ser utilizadona tag <input>. Ele define o valor do campo. No caso da <option>, os seus valores possíveis são previamente definidos quando a página é codificada. Já na <input>, embora também possa ser previamente definido, normalmente é o usuário quem define o seu valor.
O atributo “type”
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>, corresponde ao seu valor padrão. Alguns outros tipos comuns são:
	password
	Mascara o texto com asteriscos
	hidden
	Esconde o campo para não ser exibido no navegador
	checkbox
	Usado para seleção de valor através de click/check
	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”
	submit
	Associada à tag <button>, dispara o evento que envia/submete o formulário
	reset
	Associada à tag <button>, dispara o evento que limpa os valores do formulário
	button
	Uma tag <input> pode ser do tipo “button” – exercendo, assim, a mesma função da tag <button>
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 valores, conforme veremos mais adiante − não podiam ser supridas apenas com a utilização 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 possui um padrão de composição próprio, como o uso de @, entre outras características.
Novos atributos e tipos
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. Entre eles, podemos destacar:
	Atributos
	Atributo
	Função
	Comentário
	placeholder
	Exibir um texto no campo de input.
	utilizado para dar uma dica ao usuário sobre o dado a ser inserido.
	required
	Determinar se um campo é obrigatório.
	utilizado na validação dos dados de um formulário.
	autofocus
	Fixar o foco no campo.
	utilizado quando desejamos que, ao carregar o formulário, um determinado campo seja focado.
	pattern
	Validar o valor de um campo com base em uma expressão regular.
(As RegEX – expressões regulares – podem ser consideradas um recurso de linguagem de programação para a análise e manipulação de texto.)
	O campo de tel. é um bom exemplo de utilização desse atributo. Com ele podemos, por exemplo, determinar a quantidade de caracteres e o formato esperado para um campo.
	Tipos
	Tipo
	Função
	Comentário
	tel
	Inserir números de telefone.
	Para uma melhor usabilidade, deve ser usado em conjunto com o atributo pattern.
	datetime
	Inserir datas com o fuso horário em UTC a partir de um calendário.
	
	date
	Inserir datas sem fuso horário a partir de um calendário.
	
	number
	Inserir números.
	Cria um componente diferente do imput normal, em que, por meio de setas, os números podem ser incrementados ou decrementados.
Validação de formulários
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. 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 pensando em quem vai preencher o formulário. Exemplo:
Imagine que podemos permitir a inserção de uma data de nascimento através da digitação de valores ou a partir da seleção em um elemento do tipo calendário. Agora pense em quem vai receber as informações provenientes do formulário.
Em um campo de texto simples, sem nenhum tipo de padrão, serão recebidas as mais variadas 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.
Como funciona a validação?
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 é submetido, antes que os dados sejam recebidos pelo servidor de destino.
Até há bem pouco tempo, para validar um formulário era necessário fazer uso de Javascript. Entretanto, na HTML5 é possível fazê-lo de forma nativa, sem o uso de linguagens de programação.
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”.
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>.
Considerações finais
Neste tema, foram apresentados os conceitos de linguagens de marcação, mais especificamente da HTML. Ao longo dos tópicos, além dos conceitos e de sua história, conhecemos a sua estrutura e os elementos que a compõem, como tags e atributos. Para melhor fixação de cada conteúdo, utilizamos exercícios práticos.
AULA 3 – LINGUAGEM E MARCAÇÃO DE ESTILOS (CSS)
Definição
Conceito de Folhas de estilo/CSS. Recursos disponíveis nas Folhas de estilo/CSS. Conceito de Box Model em uma página web. Aplicação de CSS a Boxes em uma página web. Conceito de seletores CSS. Conceito de pseudoclasses e pseudo-elementos. Aplicação de estilos CSS utilizando pseudoclasses e pseudo-elementos. Propriedades CSS de posicionamento. Conceito de frameworks CSS. Apresentação de frameworks CSS.
Propósito
Compreender o que são Folhas de estilo – CSS e como podem ser utilizadas para cuidar da apresentação, layout e estilo de páginas HTML.
Preparação
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.
Objetivos
Módulo 1: Identificar os fundamentos da CSS
Módulo 2: Reconhecer os recursos de cores, texto, fontes e webfontes da CSS3
Módulo 3: Identificar os conceitos de Box Model, pseudoclasses, pseudo-elementos e posicionamento
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.
No ambiente Web, a HTML é a linguagem responsável pela estrutura do conteúdo de uma página. Embora