• Nenhum resultado encontrado

HTML5 ESSENCIAL. Fundamentos de todo serviço na Web

N/A
N/A
Protected

Academic year: 2021

Share "HTML5 ESSENCIAL. Fundamentos de todo serviço na Web"

Copied!
19
0
0

Texto

(1)
(2)

HTML5 ESSENCIAL

(3)

Fundamentos de Web

Documentos HTML

Conteúdo

Multimídia

Semântica

Desempenho

EMENTA

3

(4)

Fundamentos da Web

Documentos HTML

Conteúdo

• Section, div, span, aside, parágrafos, cabeçalhos e rodapé • Tabelas

• Formulários (campos e atributos)

Forms 2.0

Tags editáveis (contenteditable) IFrames

Multimídia

Semântica

(5)
(6)

FORMS 2.0

Após alguns anos sem evoluções nessa área, o

Opera iniciou um processo de criação de novos

campos de formulário

• A especificação FORMS 2.0 é mais antiga mas entrou

oficialmente na coleção de especificações da HTML5

color - Campo para escolha de cores

• Utiliza a paleta flutuante de cores do sistema operacional

date - Escolha de data

datetime - Escolha de data e hora (UTC)datetime-local - Data e hora no fuso localmonth. Escolha do mês

(7)

FORMS 2.0

Mais campos novos da HTML5

email - Campo para escrita de emails

number - Exibição de números como um spinner (botões de

rolagem para cima e para baixo)

tel - Para campos de telefonetime - Spinner para horários

Por padrão, exibe apenas horas:minutos

url - Campo para escrita de URLs

range - Linha com um marcador slidersearch - Campo de texto para buscas

• O Chrome exibe um X para apagar o texto

quando digitado

(8)

FORMULÁRIOS

Novos atributos do HTML5

placeholder - Novo no HTML5, exibe um texto quando o

campo estiver vazio e não estiver com o foco

• Quando o usuário digitar algo, o texto do placeholder sai. • Ex.: <input type="text" placeholder="Digite algo aqui"/>

min e max - Determinam os limites mínimos e máximos de

campos como range ou number.

autocomplete - Admite on ou off. Determina se o campo

poderá assumir o autocomplete padrão do browser

autofocus - Para requisitar o foco assim que a página for

carregada

form - Atributo que torna possível um campo vir escrito fora

dos limites das tags <form>

• <input type="search" form="busca_avancada" name="termo" /> • <form id="busca_avancada"> ... </form>

(9)

FORMULÁRIOS

Steps

step - Campo que define de quanto em quanto será o

incremento/decremento de spinners (setas pra cima e pra baixo) de campos como time e number

• A unidade de medida dos steps em campos time é o segundo • Deve ser informado um valor positivo

• Se o step for múltiplo de 60, o campo time só exibe hora e minutos,

caso contrário também contempla os segundos

• A combinação dos atributos min, max, step e value devem ser

coerentes para não proporcionar comportamentos estranhos

• Campos range também possuem steps

• Nestes casos, o step coincide com o tamanho em pixels do objeto

(10)

FORMULÁRIOS

Comportamento ao submeter o formulário

• Campos url são prefixados com http:// se não estiverem no

formato correto de URL (iniciando por protocolo://)

• Campos de data são enviados usando sempre um formato

padrão

• A especificação, por enquanto, não foi clara quanto ao formato desses

campos. Deixou a cargo dos browsers

• Campos color são enviados no formato #rgb, sendo:

• R - red, G - green, B - blue

Forms 2.0 já embutem validações client-side sem a

necessidade de uso de Javascript

• Campos preenchidos com valores incorretos para o tipo específico

são checados e impedem a transmissão do formulário para o servidor

• Os browsers costumam exibir balões sobre o campo indicando o erro

(11)

VALIDAÇÕES DE INPUTS

Campos requeridos

required - Torna o campo de preenchimento obrigatório

Mais regras que impedem a transmissão do

formulário

• Campos url devem seguir as regras de codificação de URLs

• Espaços devem ser trocados por %20

• Campos email devem conter emails válidos

• Valores de campos numéricos devem estar entre min e max e

serem múltiplos de step, se estes forem fornecidos

• Campos com o novo atributo pattern precisam ter um valor

de acordo com a máscara informada nele

• Atributo ainda não suportado no IE nem no Safari

(12)

VALIDAÇÕES DE INPUTS

Expressões regulares

pattern - Atributo que restringe a máscara do conteúdo no

campo em questão

• O atributo title deve ser usado para informar a máscara usada

de um jeito mais claro ao usuário leigo

• Ex. 1: <input type="text" name="cep"

title="CEP: 00000-000"

pattern="\d{5}-\d{3}" />

• Ex. 2: <input type="text" name="cpf"

title="CPF: 000.000.000-00"

pattern="\d{3}(\.\d{3}){2}-\d{2}" />

• Ex. 3: <input type="text" name="IP"

title="Endereço IP válido para um ponto na rede"

pattern="([1-9]{1,2}) | (1\d\d) | (2[0-4]\d) | 25[0-4]" />

• Para simplificar, o pattern do exemplo 3 contemplou apenas o primeiro dígito, que deve

ser algo entre 1 e 254

Os espaços entre as barras em pé | (pipe), que significam “ou” lógico estão aí apenas para

(13)

VALIDAÇÕES DE INPUTS

Metacaracteres qualificadores:

• São usados para validar apenas um caractere do texto

. (ponto) - Representa qualquer caractere

[ e ] - Para englobar lista de valores permitidos[^ e ] - Para englobar lista de valores proibidos\d - Só admite números

\w - Só admite letras, números e caracteres _\s - Só admite caracteres de espaço

\D, \W, \S - Inversos de suas contrapartidas minúsculas( e ) - Agrupamentos de conteúdo

| - Ou lógico. Utilize os parênteses para ele afetar um grupo todo\ - Retira o poder de algum metacaratere. Ele vira simples texto- - Dentro de listas, representam faixas de valores possíveis

(14)

VALIDAÇÕES DE INPUTS

Metacaracteres quantificadores:

• São usados para dar quantidade à expressão anterior

? - Opcional. Pode vir zero ou uma vez+ - Deve vir pelo menos uma vez

* - Opcional. Pode vir zero ou várias vezes{x} - Deve vir exatamente X vezes

{x,y} - Deve vir de x a y vezes

{x,} - Deve vir pelo menos x vezes{,y} - Deve vir até y vezes

• Metacaracteres limítrofes (não necessários aqui)

^ - Deve vir no início da máscara e representa o início do texto$ - Deve vir no final da máscara e representa o fim do texto

(15)

FORMS 2.0

Outras tags para formulários

<keygen> - Tag que envia uma chave pública para o servidor

poder utilizar para cifrar o conteúdo. Só quem gera uma chave pública detém sua chave privada capaz de decifrar

• Essa tag gera um combobox para o usuário escolher a quantidade de

bits do tamanho dessa chave

• http://lists.whatwg.org/pipermail/whatwg-whatwg.org/attachments/

20080714/07ea5534/attachment.txt

<datalist> - Renderiza um suggest no browser. Parecido com

o select, mas não é na verdade um campo de formulário

• Deve ser usado como provedor de lista de valores para um input text • Para informar o datalist como provedor de valores de sugestões é

necessário definir um id para o datalist e um atributo list para o input <input type="text" list="ufs"/>

<datalist id="ufs"><option>Pernambuco</option>...</datalist>

(16)

FORMS 2.0

Leituras recomendadas

• Artigos sobre Forms 2.0

• http://diveintohtml5.info/forms.html

• http://hacks.mozilla.org/2010/11/firefox-4-html5-forms/

• Webforms2 - http://code.google.com/p/webforms2/

• Código Javascript para fazer os novos campos funcionarem em

browsers antigos (recomenda-se testar)

• Status do Forms 2.0 - http://wufoo.com/html5/

• Site atualizado sobre o índice de adoção dos novos recursos para

formulários

• Expressões regulares - http:www.guia-er.sf.net/

(17)

EXERCÍCIOS

Utilize todos os novos recursos vistos nesta aula

para incrementar o formulário de cadastro de

currículo feito na aula anterior

Utilize campos de preenchimento obrigatório, placeholders,

patterns, steps e valores numéricos mínimos e máximos

Dê a opção de escolha da cores de fonte e background do

currículo

Crie um formulário de cadastro de eventos

• Dê opção para o usuário marcar datas e horas de início e fim

Crie um formulário de busca avançada

• Utilize mais filtros além do texto em si que pode ser feito com o

campo search

(18)

TAGS EDITÁVEIS

Qualquer tag pode ser editável agora

contenteditable. Atributo que torna naturalmente possível a

edição de uma tag pelo usuário

• Assim como qualquer campo de formulário, propicia a coleta

de informações do usuário, mas neste caso, nada é naturalmente enviada ao servidor

• Essa prática vem sendo muito aplicada em conjunto com

técnicas novas da HTML5 como verificação de status do

browsers (online ou offline) e armazenamento de dados locais no cliente (Web Storage)

• Requer o uso de Javascript para potencializar sua utilidade • Ex.: <ul contenteditable="true"><li/></ul>

• Este código apenas gera um sinal de tópico para que o usuário

preencha

• Se o usuário escrever tags, estas serão devidamente

(19)

IFRAMES

Como inserir um código HTML dentro de outra

página

<iframe> é uma tag que possibilita controlar um documento por

baixo de outro

• Ex.: <iframe src="outrapagina.html"></iframe>

Iframes e o AJAX

• Já foi muito utilizado para promover chamadas assíncronas ao

servidor sem atualizar a página inteira

• O lado negativo é a divisão do código Javascript em dois arquivos

WYSIWYG

• Iframes são utilizados hoje como editores avançados de conteúdo

• Precisam de Javascript para colocá-los em designMode = "On"

• Obs.: Não falaremos sobre <frame> e <frameset> neste curso. Obsoletos

Referências

Documentos relacionados

O farmacêutico na Comissão de Farmácia e Terapêutica deve elaborar política de dispensação de medicamentos e atualizar a padronização e aplicação conforme a

Superintendência Estadual de Vigilância em Saúde - SUVISA Coordenação de Avaliação de Projetos Arquitetônicos. RELATÓRIO DE ATENDIMENTO

As licenças de instalação, dispositivos, manuais e acessórios que acompanhem, ou seja, necessários para o funcionamento do software que apresentarem defeito por processo fabril,

A chave privada da AC SOLUTI-JUS, armazenada em módulo criptográfico, é desativada quando não mais é necessária através de mecanismo disponibilizado pelo software de

A sintaxe de chamada ou acesso à funções membro é semelhante a sintaxe de acesso aos dados membro com exceção dos parênteses que contém a lista de argumentos da função, mesmo

O segundo Beneficiário será designado pelo Segurado na Proposta de Adesão, podendo ser substituído a qualquer tempo, mediante solicitação formal assinada pelo próprio Segurado, para

Caso o Investidor opte por indicar o número de Unidades de Conta, o montante a resgatar em cada Fundo Autónomo será igual ao valor que resultar da multiplicação entre o número

Encontre aqui as bases de dados que lhe permitirão encontrar novos clientes, fornecedores e