HTML5 ESSENCIAL
•
Fundamentos de Web
•
Documentos HTML
•
Conteúdo
•
Multimídia
•
Semântica
•
Desempenho
EMENTA
3•
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
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
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 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
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>
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
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
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
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
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
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
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>
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/
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
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
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