HTML5 ESSENCIAL. Fundamentos de todo serviço na Web

Tamanho: px

Começar a partir da página:

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

Alfredo Domingos Viveiros
8 Há anos
Visualizações:

2 HTML5 ESSENCIAL Fundamentos de todo serviço na Web

3 EMENTA Fundamentos de Web Documentos HTML Conteúdo Multimídia Semântica Desempenho 3

4 O QUE VEREMOS AGORA 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 4

e rodapé Tabelas Formulários (campos e atributos) Forms 2.

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 local month. Escolha do mês Todos usam uma caixa flutuante de escolha de data 6

especificação 0 é mais antiga mas entrou oficialmente na coleção de especificações da HTML5 color - Campo para escolha de

7 FORMS 2.0 Mais campos novos da HTML5 - Campo para escrita de s number - Exibição de números como um spinner (botões de rolagem para cima e para baixo) tel - Para campos de telefone time - Spinner para horários Por padrão, exibe apenas horas:minutos url - Campo para escrita de URLs range - Linha com um marcador slider search - Campo de texto para buscas O Chrome exibe um X para apagar o texto quando digitado 7

spinner (botões de rolagem para cima e para baixo) tel - Para campos de telefone time - Spinner para

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> 8

9 Steps FORMULÁRIOS 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 9

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

10 FORMULÁRIOS Comportamento ao submeter o formulário Campos url são prefixados com 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 de preenchimento 10

Deixou a cargo dos browsers Campos color são enviados no formato #rgb, sendo: R - red, G - green, B - blue Forms 2.

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 devem conter s 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 11

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

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: " pattern="\d{5}-\d{3}" /> Ex. 2: <input type="text" name="cpf" title="cpf: " 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 melhorar a legibilidade do exemplo. Não devem ser digitados 12

$\d{3}){2}-\d{2}" /> Ex.$

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 13

$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 ) -$

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 \b - Delimita a borda de um texto (para pre/sufixo de palavras) 14

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

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 /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> 15

org/pipermail/whatwg-whatwg.org/attachments/ 20080714/07ea5534/attachment.txt <datalist> - Renderiza um suggest no browser.

16 FORMS 2.0 Leituras recomendadas Artigos sobre Forms Webforms2 - Código Javascript para fazer os novos campos funcionarem em browsers antigos (recomenda-se testar) Status do Forms Site atualizado sobre o índice de adoção dos novos recursos para formulários Expressões regulares - Excelente material gratuito do autor brasileiro Aurélio Marinho Jargas 16

com/p/webforms2/ Código Javascript para fazer os novos campos funcionarem em browsers antigos (recomenda-se testar) Status do Forms 2.

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 17

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

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 escapadas 18

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

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 19

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

Documentos relacionados

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2.

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Formulários Durante a navegação em websites é comum que sejam solicitadas informações