HTML5_CSS3

HTML5 e CSS3

Index Capítulo 1: Web 1.1 História 1.2 Timeline 1.3 Google em 1997 1.4 Camadas 1.5 Front-end 1.6 Back-end 1.7 Requsições 1.8 Integrações EP: Integrações 1.8 Domínio 1.9 Hospedagem 1.10 Página HTML 1.11 Versões HTML 1.12 Versões CSS 1.13 Linguagens de Progamação 1.14 Padrões HTML 1.15 Navegadores EP: Navegadores 1.16 Engines 1.17 Engines Timeline 1.18 Browsers Timeline 1.19 Cross-browser Capitulo 2: Introdução à Linguagem 2.1 Editores de Texto e IDE 2.2 Sublime Text EP: Sublime Text 2.3 HTML 2.4 XHTML 2.5 XML 2.6 Tags 2.7 Estrutura Básica HTML 2.9 Indentação 2.9.1 Código sem Indentação 2.9.2 Código com Indentação 1

EP: Tags 2.10 Comentários EP: Comentários 2.11 Documentação Online Capítulo 3: Elementos e Atributos 3.1 Conceito 3.2 Elementos EP: Elementos 3.3 Atributos 3.4 Atributos Globais 3.5 Elementos e Atributos EP: Elementos e Atributos 3.6 Estrutura HTML 3.7 DOCTYPE EP: Estrutura HTML 3.8 Estrutura Básica HTML 3.9 Interpretação do Navegador Capítulo 4: Tags de Cabeçalho 4.1 4.1.1 4.1.2 4.1.2.1 Atributo name EP: 4.1.2.2 Demais Atributos de 4.1.2.3 Atributo http-equiv EP: http-equiv 4.1.2.4 Atributo charset 4.1.2.5 Encoding 4.1.2.6 ISO e UTF EP: Econding 4.1.2.7 Entidades de Encoding EP: Entidades de Encoding 4.1.3 EP: 4.1.4 EP: 4.1.5 EP: 2

4.1.6 EP: Capítulo 5: Tags de Exibição 5.1 Sobre 5.2 Block & Inline 5.2.1 Block 5.2.2 Inline 5.3 5.4 ... EP: ... 5.5 EP: 5.6 5.7 5.8 5.9 5.10 EP: Textos 5.11 EP: 5.12 EP: 5.13 Listas 5.13.1 5.13.2 5.13.3 EP: Listas 5.14 EP: 5.15 5.15.1 Navegação 5.15.2 Âncora 5.15.3 target EP: Capítulo 6: Tags Semânticas 6.1 Sobre 6.2 Tags 6.2.1 3

6.2.2 6.2.3 6.2.4 EP: Tags Semânticas Capítulo 7: Tags de Formulário 7.1 Formulários 7.2 EP: 7.3 Principais Elementos 7.4 EP: 7.5 EP: 7.6 EP: 7.7 EP: 7.8 EP: Capítulo 8: Novos Tipos de Formulário 8.1 Novos Tipos 8.2 Suporte dos Navegadores 8.3 Vantagens do Uso EP: Novos Tipos Capítulo 9: Conceitos de Requisições HTTP 9.1 Front-end & Back-end 9.2 Requisição 9.3 Header 9.4 URL Encoding EP: URL Encoding 9.5 Serviços 9.6 Caixa Preta 9.7 REST 9.8 Métodos 9.9 GET EP: GET 9.10 POST 9.11 Segurança 4

9.12 Ferramentas Capítulo 10: Formulários HTML 10.1 Métodos vs Formulários 10.2 Objeto do Formulário 10.3 10.4 method 10.5 name EP: Objeto do Formulário Capítulo 11: Validação 11.1 Papel do Front-end 11.3 Validação 11.3.1 Validações mais Comuns 11.3.2 Validação HTML5 11.3.2.1 Atributos de Validação 11.3.2.2 Tipos que Validam EP: Validação 11.3.2.3 Customização Capítulo 12: Recursos Externos 12.1 EP: 12.2 EP: 12.3 EP: 12.4 Considerações EP: Considerações Capítulo 13: Mídias HTML5 13.1 Áudio 13.1.1 Suporte dos Navegadores 13.1.2 Arquivos de Áudio 13.1.3 EP: 13.1.4 EP: 13.2 Vídeo 13.2.1 Suporte dos Navegadores 13.2.2 Arquivos de Vídeo 13.2.3 5

EP: Capítulo 14: SVG 14.1 Visão Geral 14.2 Formato XML 14.2.1 Desmenbrando SVG 14.3 Usando SVG EP: SVG Capítulo 15: Tabela 15.1 15.2 Criando Tabelas EP: 15.3 Email Marketing 15.3.1 Regras Essenciais EP: Email Marketing Capítulo 16: Fundamentos CSS 16.1 CSS 16.2 Reutilização de Estilos 16.3 Sintaxe 16.4 Cometários Capítulo 17: Seletores 17.1 Element Selector EP: Element Selector 17.2 id Selector EP: id Selector 17.3 Class Selector EP: Class Selector 17.4 Universal Selector EP: Universal Selector 17.5 Declaração de Seletores 17.6 Combinando Seletores EP: Combinando Seletores Capítulo 18: Precedência CSS 18.1 Nomenclatura de Vínculo 18.2 Precedência CSS EP: Precedência CSS 18.3 Execução de Precedência EP: Execução de Precedência Capítulo 19: Seletores Avançados 6

19.1 Hierarquia HTML 19.1.1 Descendant Selector EP: Descendant Selector 19.1.2 Child Selector EP: Child Selector 19.1.3 Adjacent Sibling Selector EP: Adjacent SIbling Selector 19.1.4 General Sibling Selector EP: General Sibling Selector 19.1.5 Consolidado dos Seletores Hierárquicos 19.2 Atributos HTML 19.2.1 Attribute Selector EP: Attribute Selector 19.2.1 Attribute Selector (cont.) EP: Attribute Selector (cont.) 19.3 Pseudo-class EP: Pseudo-class (link) 19.3 Pseudo-class (cont.) EP: Pseudo-class (form) 19.3 Pseudo-class (cont.) EP: Pseudo-class (others) 19.4 Pseudo-class Avançado EP: Pseudo-class Avançado 19.5 Peseudo-elements EP: Pseudo-elements 19.6 Vendor Properties Capítulo 20: Cores CSS 20.1 Cores 20.2 Hexadecimal 20.3 Web Safe Colors 20.4 RGB 20.5 RGBA 20.6 HSL 20.7 HSLA Capítulo 21: Fontes 21.1 Sobre 21.2 font-family 21.3 Fontes não Carregadas 7

EP: font-family 21.4 Web Safe Fonts 21.5 Sans-serif vs Serif 21.6 Proportional vs Monospace 21.7 Fontes Carregadas 21.8 @font-face EP: @font-face Capítulo 22: Propriedades CSS 22.1 Unidades de Medida CSS 22.2 Propriedades CSS 22.3 Valor das Propriedades 22.4 Shorthand EP: Propriedades CSS 22.5 overflow 22.6 background 22.6.1 background-color EP: background-color 22.6.2 background-clip EP: background-clip 22.6.3 background-image EP: background-image 22.6.4 background-repeat EP: background-repeat 22.6.5 background-position EP: background-position 22.6.6 background-size EP: background-size 22.6.7 background-attachment EP: background-attachment 22.6.8 background-origin 22.7 border 22.7.1 Shorthand Border 22.7.2 border-style 22.7.3 CSS3 Border EP: border 22.8 padding EP: padding 22.9 margin 8

EP: margin 22.10 Texto 22.10.1 CSS3 Text EP: Texto 22.11 list-style 22.11.1 list-style-type 22.11.2 list-style-position 22.11.3 list-style-image EP: list-style 22.12 Colunas EP: Colunas Capítulo 23: At Rules 23.1 Sobre 23.2 Principais 23.3 @charset 23.4 @import EP: @import 23.5 @font-face 23.5.1 Suporte de Fontes EP: @font-face 23.6 @media EP: @media Capítulo 24: Box Model 24.1 Sobre 24.2 Áreas 24.3 Espaçamento do Conteúdo 24.4 Largura e Altura EP: Tamanho do Elemento 24.5 CSS Reset EP: CSS Reset Capítulo 25: Posicionamento 25.1 Dimensões 25.1.1 Valores das Dimensões 25.1.2 Propriedades de Dimensões 25.2 display 25.2.1 inline vs block EP: inline vs block 25.2.2 Modificando a Exibição 9

EP: Modificando a Exibição 25.2.3 Removendo da Exibição 25.2.4 Visibilidade EP: Exibição vs Visibilidade 25.3 position 25.3.1 static EP: static 25.3.2 relative EP: relative 25.3.3 absolute EP: absolute 25.3.4 fixed EP: fixed 25.3.5 z-index EP: z-index 25.3.6 Ancorando Elementos EP: Ancorando Elementos 25.4 Flutuando Elementos 25.4.1 float EP: float 25.4.2 clear EP: clear 25.4.3 Flutuação vs Proximidade EP: Flutuação vs Proximidade 25.4.4 Clearfix EP: Clearfix 25.5 Alinhamento 25.6 Centralizando EP: Centralizando 25.7 Outras Técnicas EP: Outras Técnicas Capítulo 26: Tipos de Layout 26.1 Fixo EP: Fixo 26.2 Líquido EP: Líquido 26.3 Híbrido EP: Híbrido 10

26.4 Responsivo EP: Responsivo Capítulo 27: Layout Responsivo 27.1 Sobre 27.2 Media Query 27.2.3 Media Type 27.2.4 Media Features EP: Media Query 27.3 Operadores Lógicos 27.3.1 and 27.3.2 not 27.3.3 only 27.4 Instrução Completa EP: Operadores Lógicos

11

12

Capítulo 1: Web 1.1

História

●

Necessidade de comunicação militar

●

Internet vem do conceito de computadores globais interligados ○

Existe o termo intranet o qual refere-se a uma rede de computadores fechada interligada

●

1.2

World Wide Web, é criado para facilitar a comunicação e integração na rede

Timeline

●

60 à 70: guerra fria dá origem às redes

●

70 à 80: surge o termo internet

●

80 à 90: criadas as grandes redes de computadores

●

90 à 00: "boom" world wide web

●

00 à atualmente: web 2.0 e 3.0

13

1.3

Google em 1997

1.4

Camadas

14

1.5

Front-end

●

Também chamado de "client-side"

●

Na web é composto por páginas HTML

●

○

+CSS

○

+JavaScript

○

+ Recursos adicionais (imagens, fontes, etc)

Sua principal função e exibir dados e enviá-los para o servidor quando necessário

●

●

1.6 ●

●

Nunca deve lidar com regras de negócio ○

Apenas envia e recebe dados através de requisições HTTP

○

Não acessa banco de dados diretamente

○

Baixa segurança

Necessita de um servidor ○

Hospeda o site

○

Gerencia as requisições recebidas pelos serviços web

○

Lida com as regras de negócio

Back-end Disponibiliza os serviços web ○

Lida com as requisições HTTP

○

Recebe e envia dados

○

Gerencia as regras de negócio e inteligência do sistema

○

Pode integrar-se com outros servidores via serviços web

Acessa o banco de dados e efetua sua manipulação ○

Lista, adiciona, atualiza e apaga registros

15

1.7 ●

Linguagem

Servidor

PHP

Apache

Java

Tomcat, JBoss, GlassFish

.NET / ASP

Windows Server

CFML

ColdFusion

Ruby

Puma, Phusion Passenger

JavaScript

NodeJS

Requsições HTTP - Hypertext Transfer Protocol ○

Protocolo de comunicação mais comum na Web

○

Essencialmente a transmissão de dados ocorre enviando textos

○

Existem outros protocolos como SSH e FTP

16

●

Segurança das informações transferidas é baixa ○

●

●

■

Dados criptografados

■

Necessário o uso de certificados digitais

Toda requisição possui "headers" ○

1.8

Existe a opção de HTTPS para maior segurança

Cabeçalhos com informações sobre a requisição e os dados transmitidos

Integrações Web Services ○

Permite que o "client" se integre com o "server"

○

Servidor também pode se integrar com outros servidores via serviços

●

A transmissão de dados ocorre através de requisições HTTP

●

Comunicação é mantida por alguns instantes ○

Tempo necessário para o servidor receber a requisição e enviar a resposta

●

"Stateless" ○

Cada invocação do "client" gera uma nova requisição para o servidor

○

Servidor não guarda informações do "client"

○

Segurança é garantida através de sessão ou "tokens" enviados na requisição

●

Para o "client" não importa o que acontece com a requisição quando recebida pelo servidor ○

Qual o sistema operacional do servidor

○

Quais os recursos de infra estrutura envolvidos ■

Quantos servidores existem

■

Quais as camadas de seguranças aplicadas

■

Qual hardware utilizado

17

EP:

Integrações

1.

Abra o Google Chrome na página www.google.com.br

2.

Clique com o botão direito sobre alguma área vazia

3.

Selecione a opção "Inspecionar Elementos"

4.

Selecione a aba "Network"

5.

Atualize a tela

6.

Perceba os arquivos carregados e o tempo necessário

7.

Use a barra de rolagem e vá para o primeiro item da lista

8.

Clique sobre ele

9.

Na aba "Headers" estão as informações enviadas da página HTML para o servidor

10.

Identifique a informação "Server" e seu valor

1.8

Domínio

●

Nome para localizar e identificar conjuntos de computadores na rede ○

Foi concebido com o objetivo de facilitar a memorização dos endereços de computadores na Internet

○ ●

1.9

Sem ele seria necessário memorizar uma sequência de números

Necessário registrar um endereço para sua utilização ○

No Brasil os registros podem ser feitos através do registro.br

○

Registro ".com" pode ser feito pela Verisign

Hospedagem

●

Contratação de um servidor que conterá os arquivos do "site"

●

O domínio deve estar configurado para apontar para o endereço IP do servidor de hospedagem

●

Os arquivos do "site" devem ser colocados na pasta pública do servidor 18

1.10 Página HTML ●

Exibida quando o endereço do domínio é invocado

●

Contém todos os recursos necessários para a exibição ○

Essencialmente deve possuir um arquivo ".html"

○

Opcionalmente poderá conter os arquivos do tipo ".css", ".js", ".jpg", ".png", ".gif", ".woff", ".mp3", ".mp4", etc

1.11 Versões HTML

19

1.12 Versões CSS

1.13 Linguagens de Progamação ●

Na página HTML podem ser usadas as seguintes linguagens de programação: ○

HTML → marcação de texto

○

CSS → estilo do texto marcado com HTML

○

JavaScript → controle e manipulação HTML e CSS

○

SVG → exibição de imagens vetoriais

1.14 Padrões HTML ●

W3C - World Wide Web Consortium

●

Grupo de empresas fabricantes de software

●

Mantém HTML desde 1996

●

Define os rumos do HTML e a padronização da linguagem ○

Interpretação igual nos navegadores

20

1.15 Navegadores ●

IE (Internet Explorer)

●

Firefox

●

Opera

●

Safari

●

Chrome

EP: 1.

Navegadores Navegue para os endereços abaixo e verifique as estatísticas: a. Navegadores b.

http://www.w3schools.com/browsers/browsers_stats.asp Telas

c.

http://www.w3schools.com/browsers/browsers_display.asp Sistema Operacional http://www.w3schools.com/browsers/browsers_os.asp

1.16 Engines ●

Interpretam os códigos HTML, JavaScript, CSS e SVG do documento

●

Cada navegador pode ter um "engine" diferente

●

Podem haver diferenças na interpretação ○

Um "engine" quer ter um diferencial competitivo dentre os demais

21

Engine

Browser

Blink

Chrome e Opera

Webkit

Safari

Gecko

Firefox

Trident

Internet Explorer

1.17 Engines Timeline

22

1.18 Browsers Timeline

1.19 Cross-browser ●

●

Código deve funcionar igual em mais de um navegador em mais de uma versão ○

Principal problema da programação HTML

○

Preocupação tanto no "desktop" quanto no "mobile"

○

Flash não possuía este problema, pois o interpretador era único

Código sem interpretação ○

●

Versão do navegador pode não suportar as funcionalidades do HTML5

Diferença dos "engines" ○

Pode "quebrar" o layout de uma página, empurrando elementos para fora da área visível do usuário

●

Necessário ○

Identificar o público alvo e principal navegador utilizado

○

Testar em mais de um navegador e mais de uma versão

23

24

Capitulo 2: 2.1 ●

●

●

Introdução à Linguagem

Editores de Texto e IDE Editores de Texto ○ Bloco de notas ○ Adobe Dreamweaver ○ Sublime Text ○ Notepad++ IDEs ○ Eclipse/Aptana ○ Webstorm ○ Netbeans Cloud ○ JSFiddle ○ Codenvy ○ Koding ○ Codepen

25

2.2 ●

Sublime Text Um dos editores mais utilizados pela comunidade de desenvolvedores ○

●

Multi plataforma ○

●

Windows, Mac e Linux

Leve e versátil com relação as funcionalidades ○

●

Para diversas linguagens de programação

Customizável conforme a necessidade do desenvolvedor

Pacotes podem ser adicionados ○

Novas funcionalidades estarão disponíveis

○

Enriquecimento dos recursos nativos

○

Instalação pode ser manual ou automatizada com a ajuda do "Package Control"

EP: 1.

Sublime Text Baixe e instale o Sublime Text 3 a.

2.

3.

Busque no Google o endereço

Abra o Sublime e adicione um projeto a.

Clique no menu superior "Project > Add Folder to Project"

b.

Selecione a pasta do seu projeto

c.

Perceba a barra lateral que se abriu

Baixe e instale o Package Control a.

Busque no Google por "package control sublime text 3"

b.

Identifique no site a página de instalação

c.

Copie o código exibido na tela (atenção para a versão do Sublime)

4.

Abra o Sublime Text 3

5.

Clique no item "View" do menu superior do Sublime

6.

Selecione a opção "Show Console"

7.

Cole o código copiado do site e tecle enter

26

a.

Verifique o andamento da instalação na barra de status no canto inferior esquerdo do Sublime

8.

Feche a visualização do console a.

9.

Repita os passos 5 e 6, porém selecione "Hide Console"

Digite o atalho CTRL + SHIFT + P a.

No Mac use CMD ao invés de CTRL

b.

Ou use a opção do menu "Tools > Command Pallete"

c.

Uma janela flutuante será exibida

10.

Digite "install"

11.

Selecione a opção "Package Control: Install Package" a.

12.

Uma lista com todos os pacotes disponíveis para o Sublime será exibida

Digite "emmet" e selecione a opção com este nome a.

Perceba a barra de status do Sublime no canto inferior esquerdo com o andamento da instalação

b.

Alguns pacotes exibem uma mensagem no próprio Sublime quando terminam a instalação (caso do Emmet)

c. 13.

Veremos as funcionalidades do Emmet posteriormente

Clique com o botão direito do mouse sobre a pasta do projeto na barra lateral e veja quantas opções existem

14.

Repita os passos de 9 à 12 e instale o pacote "Sidebar Enhancements" a.

Aguarde o término da instalação

b.

Verifique as novas opções existem quando clicar com o botão direito do mouse sobre a pasta do projeto

27

2.3

HTML

●

Hypertext Markup Language

●

Criada por Tim Berners Lee em 1993

●

Linguagem de marcação de texto através de "tags"

●

Texto marcado poderá ser manipulado por JavaScript e ou estilizado por CSS

2.4 ● ● ●

●

2.5

XHTML EXtensible Hypertext Markup Language Definido a partir da versão 4.01 em 2000 Baseada na linguagem XML ○ Estrutura hierárquica ○ Mesmas regras de aninhamento Árvore de elementos ○ Declarados como "tags" ○ Um elemento pode ou não ter subelementos aninhados ○ "Branches and leafs"

XML

●

Serialização de dados bastante comum

●

Geralmente usada para configuração

●

Contém dados definidos em forma de "nodes" (nós) ketchup mustard

28

2.6

Tags

●

Estruturas de linguagem de marcação

●

Existem aproximadamente pouco mais de 100 "tags" HTML5

●

Outras linguagens também usam o conceito de "tags"

●

○

XML

○

IDML

○

CFML

Elementos do documento HTML ○

Marcam uma característica

○

Conteúdo aninhado dentro destas são vinculadas as características das "tags" de abertura e fechamento

2.7

○

"Case insensitive"

○

Maioria das "tags" HTML5 tem o par de fechamento

Estrutura Básica HTML Declaração

Descrição



Navegador identificar o tipo do documento



Principal "tag" do documento ("root tag")



Possuirá "tags" para configuração do documento (título, descrição, autor, palavras-chaves, etc)



Praticamente tudo que será exibido para o usuário na tela do navegador

29

2.8

Aninhamento das Tags Título do Documento Tudo que será visualizado no navegador

2.9 ●

Indentação A identificação de qual "tag" é "pai" ou "filho" é essencial para entendimento do código

●

●

Uma das técnicas usadas para clareza do código é a indentação ○

"Filhos" ficam recuados à direita dos pais

○

"Netos" ("bisnetos" e sucessivamente) ficarão aninhados aos "filhos"

Para a máquina não importa se o código está indentado ou não ○

Basta apenas estar aninhado corretamento, sem erros de sintaxe

○

Os códigos a seguir são exatamente idênticos

2.9.1 Código sem Indentação My TitleMy content

30

2.9.2 Código com Indentação My Title My content

EP:

Tags

1.

Crie um arquivo de nome "basic.html"

2.

Adicione a informação ao navegador do tipo do documento a.

Deve ser o primeiro código do documento

3.

Abaixo da declaração anterior, crie a "root tag" HTML:

4.

Dentro de aninhe as "tags" e : a.

Atenção ao aninhamento e a indentação

5.

Escreva um texto dentro de

31

My first page ! 6.

Salve e teste no navegador

7.

Adicione a "tag" como filha de : a.

Altere a indentação para melhor leitura do código

Oh yeah!!! 8.

Salve e teste novamente no navegador

9.

Altere o texto de adicionando quebras de linhas entre as palavras com a tecla ENTER: My first page !

10.

Salve e teste, verificando se as quebras de linha foram respeitadas

11.

Altere o código colocando tudo em uma única linha, porém marcando com a "tag" My first page !

12.

Repita o último teste

2.10 Comentários ●

Comentários são instruções de código ignoradas pelo interpretador do 32

navegador ●

São úteis para descrever alguma funcionalidade

●

Comentário HTML é multilinhas ○

Tudo que estiver dentro das "tags" de abertura e fechamento será comentado

Título do Documento Tudo que será visualizado pelo usuário

EP: 1. 2.

Comentários Abra o arquivo "basic.html" do EP anterior Adicione um comentário mencionando que o HTML respeita o código de marcação e não a forma como as informações são dispostas a. Avalie e identifique o melhor local para colocar seu comentário

não existe

Text

3.2

Elementos

●

Um documento HTML é definido por elementos HTML

●

Cada elemento faz uma marcação no documento ○

O conteúdo do elemento será marcado pela "tag" que o envolve

○

Maioria das "tags" sempre são definidas pela de abertura e de fechamento, mas há exceções

○

Se uma "tag" não contiver a de fechamento, o navegador tentará interpretar da melhor forma possível, mas comportamentos estranhos podem acontecer

●

Um elemento, pode ter conteúdo ou não ○

●

As que não possuem conteúdo não precisam ser fechadas no HTML5

Como exemplo, a "tag" marca o texto com o formato para cabeçalho ○

Se não for fechada o formato de cabeçalho será aplicado à tudo mais que estiver na sequência

My Header

36

EP:

Elementos

1.

Crie um novo arquivo de nome "elements.html"

2.

Adicione a estrutura HTML essencial:

3.

Dentro da "tag" adicione o seguinte código: My Header This is my content

4.

Salve e teste no navegador

5.

Remova a "tag" de fechamento : My Header This is my content

6. 7.

Salve, teste e perceba que todo o texto recebeu o formato de cabeçalho Desfaça o passo anterior e mantenha a "tag" de fechamento: My Header This is my content

37

3.3 ●

Atributos Atributos configuram um elemento ○

Definem valores para que uma "tag" tenha um determinado comportamento

●

Os atributos podem variar de "tag" para "tag" ○

●

Alguns podem ser comuns, outros podem ser exclusivos

Na documentação HTML é possível identificar e esclarecer o funcionamento de cada um deles

●

No exemplo abaixo a "tag" possui o atributo "align" que configura o estilo do alinhamento do texto: My Header

Nota: o atributo "align" está depreciado no HTML5 e deve ser evitado mesmo em versões anteriores do HTML, uma vez que todo o estilo deve ser aplicado através de CSS.

3.4

Atributos Globais

●

São os atributos que podem ser adicionados a qualquer "tag" HTML

●

Existem em versões anteriores do HTML e também os novos com funcionamento apenas no HTML5

●

HTML: ○ acesskey ○ class ○ dir ○ id ○ lang ○ style ○ tabindex ○ title

38

●

3.5

HTML 5: ○ contenteditable ○ data-* ○ draggable

Elementos e Atributos Item

Exemplo

Elemento

Tag

Atributo

Configuração de uma tag

Conteúdo

Informações das tags

39

EP: 1.

Elementos e Atributos Navegue para o endereço abaixo e verifique os elementos HTML: http://www.w3schools.com/tags/ref_byfunc.asp https://developer.mozilla.org/en-US/docs/Web/HTML/Element

2.

Agora verifique os atributos: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

3.

Finalmente identifique os atributos globais: http://www.w3schools.com/tags/ref_standardattributes.asp https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes

3.6 ●

Estrutura HTML Um documento HTML segue um padrão estrutural definido pelo W3C, chamado de DOM - Document Object Model

●

Esta estrutura define: ○

Nós de elementos 40

●

○

Regras hierárquicas

○

Acesso e manipulação dos objetos

Todas as "tags" possuem o conceito de "pai" e "filho" My Header

Child Tags: tem como filho tem como filho

Parent Tags: tem como pai tem como pai

●

Cada elemento HTML é considerado um nó ("node")

●

A hierarquia está definida dentro de uma árvore de elementos HTML ("nodes")

●

○

Os pais são chamados de "parent nodes" e os filhos de "child nodes"

○

A indentação do código é fundamental para o entendimento

Um documento HTML deve ter uma estrutura de nós válidos para que possa ser exibido corretamente

●

A estrutura essencial para exibição é: ○

Sendo que o conteúdo que será exibido pela página sempre fica aninhado dentro de

○

Fortemente recomendado o uso de



41

●

Porém muitas vezes é desejado configurar mais informações no documento HTML ○

●

Novas "tags" e novos aninhamentos devem ser feitos

No exemplo a seguir a página possuirá um título ○

Maioria das configurações da página ficam dentro de

My Page Title My page content...

3.7

DOCTYPE

●

Document Type Definition

●

Informa ao navegador o tipo do documento a ser renderizado

●

Deve ser colocada na 1ª linha do documento HTML

My Page Title My page content...

42

EP:

Estrutura HTML

1.

Crie um arquivo de nome "structure.html"

2.

Adicione a estrutura essencial HTML com conteúdo: My page content...

3. 4.

Salve e teste no navegador Adicione a instrução "doctype":

5.

6.

... Salve e teste novamente a. Perceba que nada ocorreu b. Identifique o título que está sendo exibido na aba do navegador (o nome do arquivo) Adicione e dentro de My Title ...

7. 8.

Salve e teste, identificado o título na aba do navegador Volte ao código dentro de e adicione quebras de linha entre as palavras: My page content...

9.

Salve e teste a.

Observe se as quebras foram respeitadas 43

10.

Volte o código da forma inicial e adicione Mypagecontent...

11.

Salve e teste

3.8

Estrutura Básica HTML

Tag

Descrição

Conteúdo do Elemento



"Root tag" do documento HTML define contêiner para a árvore de elementos DOM

Tudo, exceto outra "tag" HTML



Inclui o "cabeçalho" do documento como título, metadados, estilos e "scripts"



Conteúdo do documento



Tudo, exceto as anteriores, porém pode incluir a "tag" de "script"

44

3.9 ●

Interpretação do Navegador O navegador interpreta o código existente no documento HTML de cima para baixo

●

○

"doctype" informa o tipo de documento a ser interpretado

○

Navegador começa a fazer o "parse" das "tags" HTML

"Parse" pode ser entendido* como: ○

Interpretação de todo o código

○

Execução das configurações definidas em

○

Renderização do conteúdo

Nota: sequência real dos processos é diferente da apresentada aqui, a qual tem apelo apenas didático.

45

46

Capítulo 4: 4.1

Tags de Cabeçalho



●

Aninhada dentro de

●

Recebe praticamente todas as "tags" de configuração da página ○

Título

○

Metadados

○

"Encoding"

○

Estilo

○

Script

4.1.1 ●

Identifica o título da página, o qual é utilizado para ○

Janela (ou aba) do navegador

○

Página adicionada aos favoritos

○

Resultados de busca na Internet

My Title

47

4.1.2 ●

A "tag" define os metadados do documento ○

Aninhada dentro da "tag"

●

Não possui "tag" de fechamento para HTML5

●

Pode ser utilizada mais de uma vez

●

Metadados são usados pelo navegador

●

○

Conjunto de caracteres usados no conteúdo ("encoding")

○

Recarregar a página em determinados intervalos de tempo

Também são usados por: ○

Ferramentadas de indexação de "sites" (SEO - Search Engine Optimization)

○ ●

Serviços na web

Especificam informações sobre o documento antes da renderização do conteúdo ○

Geralmente são informações que não serão exibidas na tela

○

Ex: descrição, autor, palavras chaves, última data de modificação

● Quando usada para metadados descritivos, possui duas propriedades, "name" e "content" ○

Representa o nome da característica e seu valor

○

O interpretador (seja do navegador, seja do SEO ou qualquer outro) obterá o seguinte resultado: author=John



48

●

Também podem ser configurada com informações proprietárias ○

Muito provavelmente, apenas a empresa proprietária conseguirá interpretar a informação

○

Ex: informações referentes a configurações de dispositivos móveis da Apple

4.1.2.1

Valor

author

description

keywords

Atributo name

Descrição

Nome do autor

Descrição da página, geralmente utilizado por buscadores na exibição de seus resultados

Lista de palavras chaves separadas por vírgulas, geralmente usado por buscadores para identificar o conteúdo da página

49

EP: 1. 2.

Crie um arquivo de nome "meta.html" Adicione a estrutura básica HTML, com título: Página de São Paulo

3.

Adicione ainda o texto em : São Paulo ganhará uma nova canção...

4.

Salve e teste a.

Perceba que os caracteres do título e do corpo não foram exibidos corretamente

5.

Adicione o seguinte código em :

6.

Salve e repita o teste a.

7.

Verifique se os caracteres estão incorretos

Adicione o metadado referente ao autor:

8.

Salve e teste a.

9.

Perceba que nenhuma mudança visual ocorreu para o usuário

Adicione os demais metadados descritivos: a.

Descrição

b.

Palavras chaves

50

4.1.2.2

Demais Atributos de

Atributo

Valor

Descrição

charset

utf-8

Define o "encoding" da página

content

Texto

Conteúdo relativo ao valor utilizado em "name"

http-equiv

content-type default-style refresh

Informação do "header" (informação e valor) da requisição HTTP quando a página é invocada pelo navegador

name

application-name author description generator keywords

Especifica o nome do metadado

51

4.1.2.3

Atributo http-equiv

Valor

Descrição

Define o "encoding" da página, apesar de não estar depreciado recomenda-se usar a opção "charset" ou invés deste formato content-type

refresh

Especifica o intervalo de tempo em segundos no qual o navegador deve atualizar a página

EP:

http-equiv

1.

Crie um arquivo de nome "http_equiv.html"

2.

Adicione a estrutura HTML básica

3.

Adicione a "tag" com o seguinte atributo:

4.

Salve e teste a.

Perceba a atualização a cada 2 segundos

52

4.1.2.4 ●

Atributo charset

Define o "encoding" do documento ○

Permite que os caracteres usado na página sejam exibidos corretamente

○

Conjunto de caracteres de um idioma

○

Ex: a á à ã â A Á À Ã Â

4.1.2.5 ●

●

Encoding

Conjunto de caracteres ○

Latinos

○

Japoneses

○

Árabes

○

Cirílicos

Evolução: ASCII → ANSI → ISO-8859-1 → UTF-8

●

●

HTML4 utilizava o ISO-8859-1 ○

Maioria dos países utilizava o este conjunto de caracteres

○

Muito similar ao ANSI, que possui 32 caracteres adicionais

HTML5 deve ser usado o UTF-8 ○

Mais abrangente para outros idiomas

○

Abrange quase todos os caracteres, potuações e símbolos no mundo

4.1.2.6 ●

ISO e UTF

ISO ○

International Standards Organization

○

Organização que define os conjuntos de caracteres padrões para os diferentes alfabetos

53

●

EP: 1.

UTF ○

Unicode Transformation Format

○

Tem maior utilização e vem substituindo o ISO

○

Os primeiros 256 caracteres UTF correspondem aos 256 ISO

Econding Navegue para o endereço abaixo e verifique os caracteres disponíveis para ASCII a.

Perceba a pequena quantidade de caracteres disponíveis e a ausência dos acentuados (ã Ã, é É, etc)

http://www.w3schools.com/charsets/ref_html_ascii.asp 2.

Verifique o valor "Entity Name" do sinal de maior > e menor < para ANSI e para ISO-8859-1/UTF-8: http://www.w3schools.com/charsets/ref_html_ansi.asp http://www.w3schools.com/charsets/ref_html_entities_4.asp

4.1.2.7 ●

Entidades de Encoding

Cada conjunto de caracteres define um número e um nome para as entidades ○

Ex: o sinal de maior pode ser escrito através do nome da entidade > ou seu número >

●

A entidade possui a seguinte assinatura: & + nome + ; & + # + número + ;

54

●

●

Seu uso é essencial dentro do código HTML quando necessário usar o sinal de maior ou de menor ○ Evita o interpretador confundir com abertura e fechamento de "tags" <h1> Idealmente deve-se utilizar o nome da entidade ao invés do número para facilitar a leitura do código <h1>

EP:

Entidades de Encoding

1.

Crie um novo arquivo de nome "entities.html"

2.

Adicione a estrutura básica a.

3.

Lembre-se sempre de utilizar UTF-8 na estrutura básica

Adicione o seguinte texto em :

4.

Salve e teste, verificando se o texto "" foi exibido

5.

Altere o código de para: <h1>

6.

Salve e repita o teste

7.

Abra a página do endereço abaixo http://www.w3schools.com/charsets/ref_html_entities_4.asp

8.

9.

Adicione os nomes e os símbolos dos naipes de baralho dentro de : a.

♠ espadas

b.

♣ paus

c.

♥ copas

d.

♦ ouros

Escreva as entidades a seguir e descubra a palavra: Coração

55

4.1.3 ●

Permite definir as informações de estilo do documento ○

CSS → Cascading Style Sheets

○

Define como os elementos devem ser renderizados no documento

h1 { color: blue; } ●

Possui dois atributos (além dos globais): ○

"media" → especifica qual a mídia que será aplicado o estilo

○

"type" → "mime type"

h1 { color: blue; }

EP:



1.

Crie um novo arquivo de nome "style.html"

2.

Adicione a estrutura básica HTML

3.

Dentro de adicione : My Header

4.

Salve e teste a.

Atenção para a cor que está sendo exibida

56

5.

Dentro de adicione uma "tag" com: h1 { color: blue; }

6.

Salve e teste

7.

Altere a "tag" adicionando o atributo "media": h1 { color: blue; }

8.

Salve e teste a. Imprima a página e verifique a cor do texto

4.1.4 ●

Vincula o documento HTML com outro externo ○

Carrega um recurso externo, como CSS

●

Pode ser utilizada mais de uma vez

●

Não possui "tag" de fechamento



57

Atributo

Valor

Descrição

href

URL

Especifica o caminho do arquivo externo

media

all print

Define em qual aparelho a arquivo externo será exibido

rel

icon stylesheet

type

text/css

Valor obrigatório que define qual o relacionamento do documento com o arquivo externo

Opcional no HTML5, especifica o "MIME type" do arquivo externo

EP: 1.

Navegue para o endereço abaixo e baixe o ícone com o nome "favicon.ico" a.

Salve em uma pasta apropriada

http://www.favicon.cc/?action=icon&file_id=686403 2.

Crie um novo arquivo de nome "favicon.html"

3.

Adicione o seguinte código em : a.

Coloque o caminho correto como valor de "href"

4.

Salve e teste a.

5.

Observe o ícone ao lado do título da página

Crie um novo arquivo de nome "link.css" e "link.html"

58

6.

Adicione o seguinte código CSS e salve o arquivo: h1 { color: blue; }

7.

Volte ao arquivo HTML "link.html"

8.

Adicione a "tag" em : My Header

9.

Adicione a "tag" em :

10.

Salve e teste

11.

Adicione o atributo "media":

12.

Salve e teste a impressão

4.1.5 ●

Define o código JavaScript do documento

●

Pode ser usada como:

●

○

Contêiner para código

○

Apontar para arquivo JavaScript externo utilizando o atributo "src"

Quando usado o atributo "src" a "tag" deve ser vazia ○

Não é possível apontar para arquivo externo e possui conteúdo ao mesmo tempo

●

Pode ser usado nas "tags" e 59

●

Recomendado utilizar no final da "tag" ○

Melhora a performance do carregamento da página

○

Navegador tem menos informação para interpretar antes de exibir a página

○

Existem casos na qual a biblioteca deve ser carregada na "tag" para que possa funcionar corretamente

alert('Hello HTML5');

Atributo

Valor

Descrição

charset

pt-br

Especifica o "encoding" do arquivo externo

src

URL

Especifica o caminho do arquivo externo

type

text/javascript

Opcional no HTML5, especifica o "MIME type" do arquivo externo

60

EP:



1.

Crie um arquivo de nome "script.html"

2.

Adicione o seguinte código dentro de : alert('Hello HTML5');

3.

Salve e teste

4.

Crie um novo arquivo de nome "script.js" dentro da mesma pasta que contém o arquivo "script.html"

5.

Adicione o seguinte código JavaScript:

document.write('Hello from JS'); 6.

Salve o arquivo e volte para o arquivo HTML "script.html"

7.

Adicione o seguinte código em :

8.

Salve e teste a.

Perceba o texto escrito via JavaScript com a formatação "h1"

61

4.1.6 ●

Define um conteúdo alternativo para navegadores que foram definidos para não usarem JavaScript ou não tem suporte a linguagem ○

●

Seu conteúdo será mostrado apenas nesta condição

Pode ser usado nas "tags" e alert('Hello HTML5'); This site requires JavaScript enabled.

EP:



1.

Crie documento HTML de nome "noscript.html"

2.

Adicione o código em , salve e teste: alert('Hello HTML5') This site requires JavaScript enabled.

3.

4.

Desabilite o JavaScript do navegador e este novamente a.

Abra "Settings" do Google Chrome

b.

Procure por "javascript" no campo de busca das configurações

c.

Clique em "Content Settings"

d.

Clique em "Do not allow any site to run JavaScript"

Habilite novamente o JavaScript do navegador

62

63

Capítulo 5:

5.1 ●

Sobre São as "tags" que marcam algum conteúdo ○

●

Tags de Exibição

Será visualizado pelo usuário quando acessar a página HTML

Muitas delas possuíam atributos de estilo (como alinhamento de texto, cor de fundo, etc) nas versões anteriores do HTML

5.2 ●

○

Estes atributos foram depreciados no HTML5

○

Idealmente, estilos devem ser feitos apenas com CSS

Block & Inline São as formas mais comuns de exibição HTML ○

●

Podem ser modificadas através de CSS

Define como o próximo conteúdo seguinte a “tag” será exibido ○

Na mesma linha e na sequência após o fechamento da “tag”

○

Próxima linha após o fechamento da “tag”

5.2.1 Block ●

Ocupa toda a largura disponível, limitado ao seu "parent elment"

●

Conteúdo seguinte à "tag" estará na próxima linha

5.2.2 Inline ●

Ocupa somente o espaço necessário para sua exibição

●

Conteúdo seguinte à "tag" estará na sequência

64

5.3



●

"Corpo" do documento HTML

●

Contêiner para quase todos os elementos HTML

●

Pode conter elementos que serão renderizados na tela ou não ○

5.4

Principal uso são para elementos a serem exibidos pelo navegador

...

●

Marca conteúdo que será exibido como cabeçalho (título) da página

●

Não possui atributos (exceto globais)

●

Navegadores podem renderizar o texto de forma diferente

●

Em geral são textos em negrito

●

Tamanho da fonte varia conforme a "tag" utilizada

●

EP:

○

Quanto menor o número da "tag" maior o texto

○

Ex: tem o tamanho da fonte maior que

Exibição “block”

...

1.

Crie um novo arquivo de nome "h1.html"

2.

Dentro da "tag" adicione as seguintes "tags": My H1 text My H2 text My H3 text My H4 text My H5 text My H6 text

65

3.

5.5

Salve e teste no navegador



●

Define um parágrafo que será exibido na página

●

Ênfase pode ser dada combinado outras "tags" com exibição “inline”:

●

○

→ negrito

○

→ itálico

○

→ diminui o texto

Exibição “block” This is a bold and italic text

EP: 1.

No arquivo de nome "paragraph.html" e adicione o seguinte código My first paragraph.

2.

Salve e teste no navegador

3.

Adicione ênfase no texto "first" adicionando as "tags": My first paragraph.

4.

Salve e teste

5.

Adicione as demais "tags" de ênfase no texto "first", testando uma por vez: a.



b.



66

5.6 ●

●

Marca algum conteúdo ○

Não aplica qualquer mudança visual no elemento

○

Ideal para marcar um conteúdo que receberá um estilo

Pode substituir as “tags” de ênfase, por permitir estilo com maior flexibilidade ○

●

5.7

Não faz sentido marcar com e remover o negrito !

Exibição “inline”



●

Marca o elemento que será tachado

●

Exibição “inline” This text are going to be striked

5.8



●

Marca o elemento que será subscrito

●

Exibição “inline” This paragraph has subscripted text

5.9 ●

Marca o elemento que será elevado ○

●

Ex: exibição de raíz quadrada

Exibição “inline” This paragraph has superscripted text

67

5.10 ●

Marca o elemento que será pré formatado

●

Preserva espaços e quebra de linha

●

Utiliza a fonte “Courier”

●

Exibição “inline” This text

is

pre

formated



EP:

Textos

1.

Crie um arquivo de nome “texts.html”

2.

Adicione o seguinte conteúdo, salve e teste: Paragraph is block display but span is inline display and the next content will be placed high after the last one

3.

Logo abaixo do último código adicione:

This text are going to be striked This paragraph has subscripted text This paragraph has superscripted text 4.

Salve e teste

5.

Finalmente, adicione o código abaixo, salve e teste: 68

This text is pre

formated



5.11 ●

Usada para carregar imagens no documento HTML ○

Podem ser recursos locais ou externos

○

Não são tecnicamente inseridas no documento, um "link" e um espaço para exibição são criados

●

Não possui "tag" de fechamento

●

Exibição “inline”

●

Pode receber os atributos de largura e altura ○

Podem distorcer, serrilhar ou perder qualidade visual da imagem

○

Se utilizado apenas um dos atributos de tamanho, a imagem manterá a proporção visual



69

Atributo

Valor

alt

My text

height

10

src

URL

usemap

#myMapTagId

width

10

EP:

Descrição

Texto alternativo para a imagem exibido antes do carregamento

Define em "pixels" a altura da imagem

Endereço URL para a imagem

Define as coordenadas das áreas clicáveis de uma imagem

Define em "pixels" a largura da imagem



1.

Crie o arquivo "img.html" com a estrutura básica

2.

Adicione em a "tag" conforme abaixo: Salve e teste a.

4.

Atualize a página e perceba a imagem mudando randomicamente

Adicione o atributo de largura e altura com um valor para distorcer a imagem: a.

A imagem utilizada possui 900 pixels de altura e largura 70

Remova o atributo "height", salve e teste a.

6.

Repita o teste removendo "width" e mantendo apenas "height"

(Opcional) Adicione em a "tag" para que a página seja atualizada automaticamente a cada 3 segundos

5.12 ●

Marca o conteúdo de que receberá a formatação visual e a funcionalidade de um botão ○

Não é recomendado seu uso dentro de um formulário, devido ao problema de "cross-browser"

○

Existem botões específicos para formulário

●

Exibição “inline”

●

Pode receber texto e imagem ○

Principal diferença para os botões de formulário

○

Apesar de existir o atributo "align", alinhamento deve ser feito via CSS

○

Apesar de poder utilizar com o botão, é mais eficiente aplicar a imagem como fundo do botão através de CSS

Save Delete

71

EP:



1.

Crie um arquivo de nome "button.html"

2.

Adicione em o seguinte código: Save

3.

Salve e teste

4.

Baixe o ícone do endereço abaixo na mesma pasta do arquivo "button.html": http://iconfindr.com/1eWqAml

5.

Renomeie o arquivo para "icon_save_48x48.png"

6.

No arquivo HTML adicione o ícone: Save

7.

Salve e teste

8.

Utilize o atributo "width" da imagem e reduza o tamanho do ícone para 16 pixels: Save

9. 10.

Salve e teste Utilize o atributo "autofocus" do botão: a.

Mantenha o código anterior do botão



72

11.

12.

Salve e teste a.

Perceba que o botão recebe foco quando a página é carregada

b.

Pressione a barra de espaços do seu teclado

Repita o teste com o atributo "disabled" do botão

5.13 Listas ●

Elementos de lista são bastante úteis para criar desde lista simples até menus ○

Quando estilizados, podem perder os marcadores e ficar na horizontal para simular um menu

●

Podem receber qualquer elemento HTML ○

Podem ter outras "tags" aninhadas para criar uma lista de produtos com imagens e descrição, tanto na horizontal como vertical, conforme o código de estilo

●

●

●

HTML possui duas "tags" para estilos ○

→ "ordered list"

○

→ "unordered list"

Cada "tag" define um tipo de marcador diferente ○

O tipo do marcador por sua vez pode ser definido por estilo

○

Ex: letras, números, números romanos, etc

Ambas possuem exibição “block”

73

5.13.1



●

"Ordered List"

●

Cria uma lista do tipo ordenada

●

Estilo pode ser numérico, alfabético ou número romano

●

○

Decimais - 1,2,3…(padrão)

○

Alfabético - a,b,c…(minúsculo e maiúsculo)

○

Romanos - i, ii, iii...(minúsculo e maiúsculo)

Possui ainda o atributo "reversed" que reverte a numeração ○

Numeração será em ordem descendente ao invés de ascendente

○

Não altera a ordem dos itens

5.13.2



●

"Unordered List"

●

Cria uma lista do tipo desordenada

●

Estilo podem ser "bullets" ○

Disco (padrão)

○

Quadrados

○

Círculo

5.13.3 ●



"Tag" responsável por criar o "list item" ○

●

Tanto quanto devem possuir como "child element"

O tipo do marcador (números, "bullets") é definido pelo "parent element" ○

Se o "pai" for aparecerá "bullets", se for aparecerá numerais

74

EP:

Listas

1.

Crie um novo arquivo de nome "list.html"

2.

Adicione o seguinte código HTML: Ordered Item 1 Ordered Item 2

3.

Salve e teste

4.

Adicione o atributo "reversed" em Ordered Item 1 Ordered Item 2

5.

Salve e teste a.

6.

Perceba que os itens permaneceram na mesma posição

Adicione o código abaixo do anterior: Unordered Item 1 Unordered Item 2

7.

Salve e teste

75

5.14 ●

Contêiner para seu conteúdo

●

Não possui qualquer alteração visual ○

●

Exceto quando estilizado

Estilos podem ser usados para aplicação de cores, imagens de fundo, posicionamento e layout ○

Todo o conteúdo do elemento acompanhará o posicionamento da "pai"

●

Deve-se ter o cuidado de utilizar somente a quantidade necessária ○

Por não implicar em qualquer mudança visual, é comum existirem mais "divs" do que as necessárias

○

Eleva o consumo de processamento e memória, principalmente quando a tela for redimensionada (navegador tem de calcular o posicionamento de cada elemento)

●

Geralmente recebem o atributo "id" com os valores "container", "main", "header", "content", "footer" ○

●

EP: 1. 2.

Por serem bastante utilizadas para posicionamento e layout

Exibição “block”

Abra o arquivo "list.html" Envolva com : a. Mantenha todo o código anterior de …

3.

Salve, teste e verifique se houve alguma mudança visual

76

5.15 ●

Faz a marcação de âncora ○

●

Tanto dentro da própria página, como para uma página externa

Seu atributo "target" configura se uma nova página (ou aba do navegador) será aberta ou não

●

●

○

"_self" → na própria página (padrão)

○

"_blank" →nova página

As cores padrão de um "link" são: ○

Azul → não visitado

○

Violeta → visitado

○

Vermelho → ativo (clique ou "tab")

Exibição “inline”

Atributo

Valor

Descrição

href

URL #elementId

Endereço externo no qual o "hyperlink" está direcionando ou "id" de um elemento interno HTML

target

_self _blank

Especifica onde abrir o documento no qual o "link" direciona

77

5.15.1 ●

Navegação

O Atributo "href" pode receber o valor de um endereço ○

Pode ser uma página do seu projeto ou uma página na Internet

Home Google 5.15.2 ●

Âncora

O atributo "href" também pode receber o "id" de um elemento HTML na própria página criando uma âncora ○

Faz a rolagem (“scroll”) da página até o ponto em que o elemento estiver, desde que a barra de rolagem esteja presente

○

Deve ser acompanhado do caractere # com o "id"

○

Ex: href="#elementId"

More Info ... More info is here...

5.15.3 ●

target

Especifica onde abrir o documento no qual o "link" direciona ○

_self → no próprio documento

○

_blank → em uma nova página (ou aba do navegador)

○

_parent → "parent frame"

○

_top → todo o corpo da janela

○

"nome do iframe"

78

EP:



1.

Crie o arquivo de nome "anchor.html" insira o seguinte código

2. 3.

Google Salve e teste Adicione o atributo "target" com o valor "_self" Google Nenhuma mudança ocorreu pois usamos o padrão

5.

Mude o valor de "target" para "_blank": target="_blank"

6.

Salve e teste

7.

Insira “lorem ipsum”, após o código atual, o suficiente para que as barras de rolagem apareçam

8.

Adicione como última “tag” de (antes do fechamento) a “tag” : More info is here...

9.

Como primeira “tag” de (após abertura) adicione: More Info

10.

Salve e teste, clicando em “More info” a.

11.

Se necessário, redimensione a janela para gerar barras de rolagem

(Opcional) Faça a âncora reversa a.

Clicando no final da página e rolando para o topo

79

80

Capítulo 6: Tags Semânticas

6.1 ●

Sobre Criadas para uso no HTML5 ○

Navegadores antigos não as reconhecem e simplesmente as ignoram

○

Não é recomendado seu uso para aplicação de estilos, posicionamento ou layout

●

Permitem a criação de "sites semânticos" ○

Informam o tipo de conteúdo existente

○

Ex: conteúdo de cabeçalho do site

●

Importantes para indexação das ferramentas de busca

●

Praticamente não possuem nenhuma mudança visual para o usuário ○

Exceto as "tag" e

○

Dependendo do navegador as demais "tags" podem ficar posicionadas de forma ligeiramente diferente

6.2

Tags

Tag

Agrupa Informações



Cabeçalho



Navegação

81



Conteúdos em geral



Conteúdos não relacionados à página







Barra lateral da página, esquerda ou direita (pode conter outras "tags" semânticas, como , , )

"Tags" de cabeçalho ...

Detalhes de algum conteúdo



Imagem de qualquer tipo (gráficos, thumbs, fotos, etc)



Aninhada dentro de , exibe informação sobre a imagem





Rodapé

Sumário, resumo ou conclusão de algum conteúdo

82



Marca o texto (similar a uma caneta marca texto)



Data, hora, período, momento de algum conteúdo

6.2.1 ●

"Cabeçalho" a ser exibido na página HTML ○

Geralmente são usadas "tags" relativas a marcação de "cabeçalhos" () e a navegação ()

●

Utilizado por ferramentas de busca para indexar a página ○

Muitas vezes o logotipo da empresa é definido como "background" de , para otimizar a indexação da página (SEO)

My Company ... 6.2.2 ●

Define blocos de informações independentes ○

Muitas vezes independente do conteúdo da própria página

○

Ex: blog, fórum, notícias, etc

Latest News ...

83

6.2.3 ●

Bloco de marcação com características de rodapé da página ○

Ex: direitos autorais, desenvolvedor do site, "links" do menu em texto

2014 - All rights are reserved

6.2.4 ●

Define a seção de conteúdos HTML ○

Geralmente com "tags" semânticas de conteúdo aninhadas

... ... ...

EP: Tags Semânticas 1.

Crie um novo arquivo de nome "semantics.html"

2.

Adicione o código dentro de : This is my header This is my section This is my footer

3.

Salve, teste e observe o resultado visual da página

84

4.

Envolva as "tags" da seguinte forma: a.

com

b.

com

c.

com

5.

Salve, teste e verifique se houve alguma mudança visual na página

6.

Seu código deve estar similar à: This is my header This is my section This is my footer

7.

Envolva o conteúdo de com conforme a seguir: This is my section

8.

Salve e teste

9.

Dentro de e abaixo de adicione o seguinte código: This is my section Surfing on Hawaii

10.

Salve e teste

85

86

Capítulo 7: 7.1 ●

Tags de Formulário

Formulários São contêineres que possuem algumas funcionalidades embutidas ○

Usados desde páginas de contados em sites, até aplicações corporativas mais robustas

●

7.2

Geralmente um formulário envia dados através de elementos especiais chamados de controles ("controls") ○ Ex: campos de texto, botões, etc



●

“Tag” que conterá todos os “controls”

●

Lida com os dados inseridos pelo usuário na página HTML

●

é a principal “tag” usada em um formulário ○

Conforme o valor do seu atributo “type” pode se tornar desde um campo de texto até botões ou mesmo outros tipos de controles

○

Possui exibição “inline”

First name: Last name:

87

EP: 1.

Crie um novo arquivo de nome “form.html”

2.

Adicione o seguinte código: First name: Last name:

3.

7.3

Salve e teste a.

Insira algum valor no formulário

b.

Pressione o botão “Reset”

Principais Elementos

●



●



●



●



●



●



●



●



7.4 ●

Exibição pode variar conforme o atributo "type"

88

●

Controle no qual o usuário interagir ○

●

Se usado dentro de um seus dados são gerenciados por este ○

●

Adicionar, alterar ou remover uma informação Ex: capturados no "submit", apagados no "reset", etc

Seu atributo “type” especifica o tipo de formulário e como este parecerá visualmente para o usuário ○

Atualmente existem pouco mais de 20 tipos diferentes

○

Todos os tipos são relacionados à formulário

○

Muitos dos atributos de fazem sentido com o tipo correto

○

Ex: “checked” faz sentido (e funciona) apenas com o tipo “radio” ou “checkbox”

●

Os tipos mais comuns são os já existentes em versões anteriores do HTML: ○

button

○

checkbox

○

file

○

hidden

○

image

○

password

○

radio

○

reset

○

submit

○

text

89

Atributo

Valor

Tipo

Define

accept

video/* image/*

file

autocomplete

on off

*

Habilita/desabilita a funcionalidade de autocompletar

autofocus

---

*

Foco ao elemento quando a página carregar

checked

---

disabled

---

*

list

datalist_id

text number

O elemento que contém os valores pré definidos para o

maxlength

7

text number

Número máximo de caracteres que o usuário pode inserir

multiple

---

file

Se o usuário pode selecionar múltiplos arquivos

name

text

*

Nome do elemento, deve ser o mesmo usado no servidor quando o formulário enviar dados

placeholder

text

text number

“MIME-type” do arquivo que será carregado

checkbox Se o elemento estará pré selecionado radio

Se o elemento estará desabilitado

“Dica” que é mostrada ao usuário antes do seu preenchimento

90

readonly

---

*

Impede que o usuário modifique o valor do elemento

size

8

text number

Largura do elemento definido pelo número de caracteres

value

text

*

Valor do elemento, o qual poderá ser usado no servidor (se submetido)

type

button checkbox color date datetime datetime-local email file hidden

*

Tipo do elemento, se não declarado o valor padrão será do tipo “text”

type

image month number password radio range reset search submit tel text time url week

*

Tipo do elemento, se não declarado o valor padrão será do tipo “text”

EP:



1.

Abra o arquivo “form.html”

2.

Adicione antes do botão, o do tipo “password”: Password: 91

3.

Salve e teste a.

4.

Digite qualquer valor neste campo

Após o último código, adicione o tipo “file”: Select a file:

5.

Salve e teste

6.

Adicione o atributo “multiple” no tipo “file”

7.

Salve e teste a.

8.

Verifique a múltipla seleção

Adicione o atributo “accept” no tipo “file”:

9.

Salve e teste a.

Tente selecionar um arquivo diferente de imagem

b.

(Opcional) Aplique o filtro para aceitar apenas imagens “jpg”

c.

(Opcional) Crie uma nova “tag” com filtro para arquivo “pdf”

10.

Adicione um novo do tipo “checkbox”:

11.

Send me spam Salve e teste

12.

Adicione o atributo “checked” ao :

13.

Send me spam Salve e teste

14.

Adicione dois novos do tipo “radio”: I am a man I am a woman

15.

Salve e teste a.

16.

Tente selecionar ambos os

Adicione o atributo “name” com o mesmo valor para os do tipo “radio”: 92

I am a man I am a woman 17. 18.

Salve e teste a. Tente novamente selecionar ambos os Adicione o atributo “placeholder” no : First name:

19.

Salve e teste

20.

Adicione também o atributo “title”: a.

Faça o mesmo para os demais de texto

21.

Salve e teste a.

Mantenha o ponteiro do mouse sobre o campo para visualizar o valor do atributo “title”

22.

Crie um novo de texto com o atributo “value”: Input with value:

23.

Salve e teste a.

Perceba que “value” sobrescreve “placeholder”

b.

Na página HTML, apague o valor do e perceba que o valor do “placeholder” aparecerá

93

24.

Adicione outro com o atributo “readonly”: Read only input:

25.

Salve e teste a.

26.

Tente inserir um novo valor no

Adicione outro com o atributo “disabled”: Disabled input:

27.

Salve e teste a.

Note a diferença entre “readonly” e “disabled”

b.

(Opcional) Coloque como valor de “title” com o texto “readonly” e “disabled” respectivamente em cada

28.

Adicione um novo com o atributo “maxlength”: Max length input: Salve e teste a.

Tente adicionar mais de 3 caracteres no campo

b.

Perceba que o valor de “placeholder” possui mais de 3 caracteres

Adicione o atributo “size” no “maxlength”:

31.

Salve e teste a.

Perceba que o texto do “placeholder” não está visível

32.

Adicione o atributo “autofocus” no primeiro

33.

Salve e teste a.

Perceba que o está com foco e pronto para a digitação

94

7.5



●

Utilizada em conjunto com a "tag"

●

Quando o usuário clica no texto da "tag" o é selecionado ○

Auxilia na usabilidade do usuário

○

O atributo "for" deve fazer referência ao valor do "id" da "tag"

First name:

EP: 1.

Volte ao arquivo "form.html"

2.

Adicione o atributo "id" às "tags"

3.

Envolva os textos ao lado das "tags" com a.

Atributo "for" deve ter o mesmo valor do atributo "id" da "tag"

First name: Last name: 4.

Salve e teste a.

Clique exatamente sobre a palavra dentro de e perceba o foco no

95

7.6



●

Cria um elemento com lista de itens para seleção do usuário

●

O atributo “multiple” permite selecionar múltiplos itens ○

●

Altera visualmente o elemento

A “tag” define os itens do elemento ○

Deve estar aninhada dentro de

Item 1 Item 2 Item 3

EP: 1.

Abra o arquivo “form.html” e adicione: Options: Item 1 Item 2 Item 3

2. 3.

Salve e teste Adicione o atributo “multiple”:

4.

Salve e teste a.

Utilize a tecla “CTRL” e selecione mais de um elemento

96

7.7



●

Elemento para inserção de texto

●

Similar ao porém para múltiplas linhas ○

●

Possui muitos dos atributos de do tipo texto

Principais atributos são: ○

cols → largura

○

row → altura

Default value

EP: 1.

Abra o arquivo “form.html” e adicione: Description: Default value

2.

Salve e teste

97

7.8



●

Agrupa elementos relacionados em um

●

Desenha um quadrado em volta dos seus elementos

●

O elemento adiciona um "título" na linha do quadrado desenhado My Form First name:

EP: 1.

No arquivo "form.html" adicione logo após a "tag" com fechamento antes de …

2.

Salve e teste

3.

Adicione a "tag" dentro de : My Form …

4.

Salve e teste novamente 98

99

Capítulo 8: 8.1

Novos Tipos

●

HTML5 define novos tipos para

●

Alguns modificam visualmente o elemento

●

Novos Tipos de Formulário

○

Deve-se ter um cuidado maior com o problema de "cross-browser",

○

A exibição incorreta pode comprometer a experiência do usuário

Podem validar o valor do campo conforme seu tipo ○

Geralmente antes do envio dos dados do formulário para o servidor

Tipo

Suporte

Define

color

Elemento para seleção de cor ("color picker")

date

Controle de data com ano, mês e dia (sem horário)

datetime

Similar ao tipo "date", porém com controle adicional para horário (hora, minuto, segundo) com base na zona de horário UTC

datetime-local

Similar ao tipo "date", porém com base no horário UTC

email

Elemento para inserção de email

month

Similar ao tipo "date", porém par mês e ano

100

Elemento para inserção de número com botões internos para aumentar e reduzir o valor

number

range

Elemento para a definição de valor ("slider")

search

Elemento para inserção de texto, auxiliado por botão interno para apagar o valor inserido

tel

---

time

Elemento para inserção de hora

url

Elemento para inserção de URL Similar ao tipo "date", porém para semana e ano

week

8.2 ●

Elemento para inserção de número telefônico

Suporte dos Navegadores "Cross-browser" ainda é bastante limitado ○

Mesmo para navegadores modernos

○

Navegadores antigos ignoram o novo tipo renderizando o padrão texto

○

Dependendo do caso, em produção, o recomendável é utilizar jQuery UI ou biblioteca similar

●

Tipos que não tem grande interferência visual no elemento podem ser usados sem maiores problemas ○

Mesmo que for exibido como tipo texto, não impedirá (ou atrapalhará) o usuário de interagir com o elemento

○

Ex: tipos "email", "search", "tel", etc

101

8.3 ●

Vantagens do Uso O uso dos novos tipos auxilia na interação do usuário com o elemento ○

No caso de dispositivos móveis, o tipo do teclado do dispositivo exibido ao usuário muda conforme o tipo do

○

Ex: tipo "email" abre o teclado com teclas que facilitam a inserção do email (ponto, arroba, etc)

EP:

Novos Tipos

1.

Crie um novo arquivo de nome "form_new_types.html"

2.

Adicione a "tag"

3.

Dentro de adicione o seguinte código: Date & Time

4.

Abaixo de adicione os tipos de datas: Date: Date Time: Date Time Local: Time:

102

Week: Month: 5.

Salve e teste a.

Abra também com outros navegadores além do Chrome e verifique se a visualização é a mesma

6.

Adicione mais um conjunto de "tags" dentro de : Numerics:

7.

Dentro de adicione: Number: Range:

Telephone: 8.

Salve e teste

9.

Adicione mais um conjunto de "tags" dentro de : Others:

103

10.

Dentro de adicione: E-Mail:

URL: 11.

Dentro de adicione: Search:

Color: 12.

Salve e teste

104

105

Capítulo 9: 9.1 ●

Front-end & Back-end São camadas que se integram através de requisição ○

●

Conceitos de Requisições HTTP

Geralmente requisição HTTP - Hypertext Transfer Protocol

Página HTML faz uma requisição para um endereço válido no qual o servidor responde ○

Pode retornar desde uma página HTML ou apenas dados

○

O servidor deve estar adequadamente configurado e preparado para receber a requisição

●

●

9.2

Cada camada tem seu papel bem definido e distinto ○

“Front-end” envia, recebe e exibe os dados do “server”

○

“Back-end” processa e retorna os dados processados para o “client”

Os papéis de cada camada nunca devem ser invertidos ○

“Front-end” gerencia a exibição dos dados

○

“Back-end” gerencia as regras de negócios

Requisição

●

Transmissão de dados entre a página HTML e o servidor

●

Os dados são enviados como texto ○

Cada requisição envia informações adicionais no “header”

○

Toda vez que uma página é invocada dados são enviados e recebidos, independente de um formulário ter sido submetido

106

9.3

Header

9.4

URL Encoding

●

●

Dados são convertidos automaticamente para o formato ASCII ○

Somente este formato é aceito na transmissão

○

Diferente do “encoding” da página, a qual exibe os dados para o usuário

Caracteres não seguros são convertidos utilizando: % + hexadecimal Ex: São Paulo Header→ S%C3%A3o%20Paulo URL→São%20Paulo

107

EP: 1.

URL Encoding Abra o endereço abaixo: http://www.url-encode-decode.com/

2.

Digite o texto “São Paulo” e clique no botão “Url Encode” a.

9.5

Observe o resultado

Serviços

●

Servidores configurados para receber e processar os dados da requisição

●

Os principais tipos de “webservices” são: ○

RPC - Remote Procedure Call

○

SOAP - Simple Object Access Protocol

○

REST - Representational State Transfer

108

9.6

Caixa Preta

●

O “client” não deve ter informações específicas ou detalhadas do “server”

●

Apenas configurações essenciais devem existir para o “client”:

●

9.7

○

Endereço

○

Método

○

Nome para os parâmetros

Para o “client” não importa a infra estrutura usada ○

Quantidade de máquinas

○

Camadas

○

Linguagem de programação

○

Sistema operacional

REST

●

Serviço Web bastante comum e utilizado atualmente

●

Estilo de arquitetura ○

●

Sistemas que seguem os princípios “REST” são chamados de “RESTful”

Efetua uma operação com base em uma ação ○

Ação deve resultar em um estado final

○

Como (se presume) que a aplicação se comportará a seguir, ou o estado no qual se encontrará após a ação

109

9.8 ●

●

Métodos São “verbos” de ações para uma requisição HTTP ○

Enviados no “header” da requisição HTTP

○

Em REST, representam o estado final no qual a ação resultará

Podem representar manipulações de CRUD ○

Create

○

Read

○

Update

○

Delete

Método GET

Obtém valor(es)

HEAD

Obtém apenas o cabeçalho (“header”) da requisição

POST

Adiciona valor(es)

PUT

Atualiza valor(es)

PATCH

Atualiza valor(es)

DELETE

Apaga valor(es)

OPTIONS

●

Utilização

Retorna os métodos HTTP disponíveis

Tecnicamente qualquer método pode ser usado para transmitir ou receber dados ○

Porém o servidor que estiver configurado adequadamente, seguindo a arquitetura REST, utilizará a ação invocada pelo método para executar algum procedimento

○

Ex: requisição com o método DELETE apagará o registro

110

9.9 ●

GET Efetua a requisição transmitindo dados pela URL ○

Único método que utiliza URL

○

Os dados podem ser visualizados e manipulados pelo usuário

●

Dados são enviados no formato “nome” e “valor”

●

Essencialmente tem o objetivo de obter dados ○

Mas muitas vezes é utilizada para outras ações em sistemas que não seguem a arquitetura REST (não recomendado)

●

●

Caracteriza-se por: ○

Permitir salvar a URL como favorito

○

Manter a URL (requisição) no histórico de navegação

○

Possui restrição de tamanho da URL (cerca de 3000 caracteres)

Os dados transmitidos tem a seguinte assinatura: ...url/server_pag.ext?name1=value1&name2=value2 Item

Exemplo

Descrição

server_pag.ext

search.php

?

list.jsp?category=dvd

Separador do endereço da página do servidor e o(s) parâmetro(s) enviado(s)

name1=value1

item=dvd

Nome da propriedade e seu valor enviado como parâmetro

&

product.asp?category=dvd&id=123

Separador de parâmetros (quando existir mais de um)

Endereço da página do servidor

111

EP:

GET

1.

Abra o endereço www.google.com.br

2.

Digite no campo de buscas a palavra “restful”

3.

Observe a URL gerada

4.

Identifique o parâmetro digitado na URL a.

5.

Analise também os demais parâmetros enviados na requisição

Modifique o parâmetro na URL para “html5” a.

Não utilize o campo de buscas, modifique no campo de endereços do navegador

b. 6.

Perceba a alteração da busca

(Opcional) Navegue para um site de compras tradicional na Web a.

Navegue por alguma categoria existente como “dvd”

b.

Observe a URL gerada e os parâmetros enviados

9.10 POST ●

Método que permite o envio de dados sem utilizar a URL do navegador

●

Mais segura para o envio de dados ○

Porém pode a requisição e os dados transmitidos podem ser capturados e manipulados com alguns “softwares” comuns

●

Essencialmente deve ser utilizada para inserir dados ○

Se o serviço não seguir os princípios REST também pode ser usada para atualizar e ou apagar dados

●

Caracteriza-se por: ○

Não permite a manipulação direta e explícita do usuário

○

Não permite armazenar a chamada nos favoritos ou no histórico

○

Não possui problemas com relação a quantidade de parâmetros enviados

112

9.11 Segurança ●

Nenhuma requisição tem algum mecanismo próprio de segurança

●

Para maior segurança recomenda-se o uso de HTTPS ○

Conexão criptografada com protocolo SSL/TLS (camada de segurança)

○

Utiliza certificados digitais para verificar a autenticidade do cliente e servidor

○

Porta padrão utilizada pelo navegador é a 443

9.12 Ferramentas ●

Existem muitas ferramentas que permitem inspecionar um requisição ○

●

São bastante úteis para o desenvolvimento e depuração da requisição

As mais comuns são: ○

Google Chrome/Network → recurso disponível como parte do Chrome Developer Tools

○

Advanced Rest Client → Extensão para o Google Chrome

○

Charles Proxy → software instalado na máquina

113

114

Capítulo 10:

Formulários HTML

10.1 Métodos vs Formulários ●

●

O formulário HTML suporta apenas os métodos GET e POST ○

Utilizando Ajax, é possível efetuar requisições com outros métodos

○

HTML5 previa suporte para PUT e DELETE, mas foram cancelados

Alguns navegadores em versões específicas fizeram algumas implementações para mais métodos ○

Não recomendado, por ser específico e por gerar dependência

10.2 Objeto do Formulário ●

Os dados do formulário são enviados através de um objeto criado automaticamente por ○

Objeto é criado automaticamente quando existir um do tipo “submit” e o usuário clicar no botão

○

Os dados são enviados para o caminho configurado no atributo “action” da “tag” utilizando o método definido

●

Formulário deve estar configurado adequadamente com o atributo “name” com valor esperado pelo servidor ○

O atributo “name” será usado como nome do parâmetro e seu valor será o dado inserido pelo usuário no formulário

115

First name: Last name:

→

url/form.jsp?firstName=John&lastName=Wayne

10.3 Atributo

Valor

action

URL

autocomplete

on off

method

get post

name

myFormName

Descrição

Caminho no qual os dados serão submetidos

Especifica se um formulário pode ter a funcionalidade de autocompletar do navegador

Método HTTP no qual os dados serão submetidos

Nome do formulário

116

novalidate

---

target

_blank _self

Formulário não deve ser validado quando submetido

Especifica onde a resposta será exibida após submissão

10.4 method ●

Configura como o formulário enviará os dados ○

Servidor deve estar configurado para receber os dados utilizando um dos métodos

●

Os “verbos” de ação suportados pelo formulário são: ○

GET

○

POST

10.5 name ●

Atributo no qual é utilizado para enviar os dados ao servidor

●

Servidor deve estar configurado adequadamente para receber os dados ○

●

Com valor correto do atributo "name" e método adequado de envio

Seu valor deve ser o mesmo usado no servidor ○

Se os valores forem diferentes não funcionará

117

EP:

Objeto do Formulário

1.

Crie o arquivo de nome "form_submit.html"

2.

Adicione a "tag" :

3.

Dentro dela adicione duas "tags" : First name: Last name:

4.

Salve e teste

5.

Ainda dentro da "tag" adicione o botão para enviar os dados:

6.

Salve e teste novamente a.

Perceba que ao clicar no botão a URL muda e os valores do atributo "name" são utilizados na URL pelo método padrão GET

7.

Adicione o seguinte atributo à "tag" :

8.

action="http://httpbin.org/get" Seu código deve estar similar à: First name: Last name:

9.

Abra o Chrome Developer Tools e verifique os dados enviados a.

Antes de enviar abra a ferramenta

b.

Entre na aba “Network”

c.

Adicione as informações no formulário e clique para enviar

118

d.

Clique no primeiro item (“arquivo) de nome “get”

e.

Clique na sub aba “Headers” e verifique os dados em “Query String Parameters”

10.

Altere os atributos de para:

11.

Salve e teste a.

Faça o mesmo teste anterior usando o Chrome Developer Tools

119

120

Capítulo 11:

Validação

11.1 Papel do Front-end ●

●

Responsável pela exibição de dados ○

Recebe e envia dados

○

Ex: exibir lista de produtos com valor e descrição

Opcionalmente, pode ajudar na validação de algum campo para evitar a requisição ○

Diminui o tráfego de dados e a quantidade de requisições para o servidor lidar

○ ●

Ex: validar se um campo foi preenchido

Deve possuir código que gerencie apenas a visualização dos dados e nunca regras de negócio ou inteligência do sistema

●

○

Facilmente manipulável e passível de ataque

○

Ex: nunca verificar se o usuário e senha estão corretos

Nunca acessa banco de dados diretamente, requer servidor para isso

11.2 Papel do Back-end ●

Gerencia os dados enviados e transmitidos para o “front-end”

●

Deve possuir toda a inteligência do sistema ○

Sempre validará os dados, mesmo que a validação tenha sido aplicada no “front-end”

○ ●

Persistência dos dados geralmente ocorre em um banco de dados ○

●

Garante a integridade dos dados e consequentemente do sistema Somente o “back-end” tem acesso ao banco de dados

Opcionalmente pode se integrar com um ou mais servidores terceiros ○

Permite a integração entre sistemas

121

11.3 Validação ●

Processo de validação é importante para reduzir o tráfego desnecessário de dados na rede ○

●

Opcional no “ front-end” e obrigatório no “back-end”

Não faz sentido gerar uma requisição para o servidor para identificar se um campo foi preenchido ou não ○

11.3.1

Gera consumo de recursos desnecessários

Validações mais Comuns

Tipo Campo obrigatório

Validação Se o campo foi preenchido pelo usuário

Email

Usuário inseriu uma informação de email, como utilização do caractere arroba, se a palavra contém caracteres válidos para email, se fez uso de “.com”

Número

Se o valor inserido é um número, podendo ainda verificar se o valor está dentro de um limite máximo e mínimo, ou ainda se é inteiro ou real

Números específicos Seleção

Se o valor preenchido contém o dado desejado, como data, CPF, cep, telefone, etc Um item da lista foi selecionado () ou ainda se o usuário escolheu uma opção ( tipo radio e checkbox)

Nota: usando como exemplo o tipo “email”, perceba que não é feita a verificação real se o email existe ou não, isso é inteligência do sistema e deve ser feita pelo servidor, porém é verificado se o valor digitado é um email, ou seja, possui o caractere @ e “.com” no texto inserido pelo usuário.

122

11.3.2 ●

Validação HTML5

Os formulários do HTML5 permitem fazer uma validação simples ○

Seu uso é recomendado apenas para formulários simples que sejam visualizados em navegadores modernos

○

Ainda assim existem alguns navegadores modernos e atuais que não suportam alguns tipos de validação

●

●

Recurso nativo do HTML5 ○

Não necessita de código JavaScript

○

Tem escopo limitado e reduzido

Validação do formulário ocorre com base no tipo do utilizado e ou em sua configuração ○

Se utilizado um tipo “email” apenas valores que contiverem um e-mail serão aceitos na validação

●

Os dados são validados no momento em que o usuário clica no do tipo “submit” ○

possui o atributo “novalidate” que controla se todo o formulário será ou não validado

○

possui o atributo “formnovalidate” que controla se apenas este elemento será ou não validado