HTML5 ESSENCIAL 
Fundamentos de todo serviço na Web
EMENTA 
• Fundamentos de Web 
• Documentos HTML 
• Conteúdo 
• Multimídia 
• Semântica 
• Desempenho 
3
O QUE VEREMOS AGORA 
• Fundamentos da Web 
• Documentos HTML 
• Conteúdo 
• Section, div, span, aside, parágrafos, cabeçal...
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...
FORMS 2.0 
• Mais campos novos da HTML5 
• email - Campo para escrita de emails 
• number - Exibição de números como um sp...
FORMULÁRIOS 
• Novos atributos do HTML5 
• placeholder - Novo no HTML5, exibe um texto quando o 
campo estiver vazio e não...
FORMULÁRIOS 
• Steps 
• step - Campo que define de quanto em quanto será o 
incremento/decremento de spinners (setas pra c...
FORMULÁRIOS 
• Comportamento ao submeter o formulário 
• Campos url são prefixados com http:// se não estiverem no 
format...
VALIDAÇÕES DE INPUTS 
• Campos requeridos 
• required - Torna o campo de preenchimento obrigatório 
• Mais regras que impe...
VALIDAÇÕES DE INPUTS 
• Expressões regulares 
• pattern - Atributo que restringe a máscara do conteúdo no 
campo em questã...
VALIDAÇÕES DE INPUTS 
• Metacaracteres qualificadores: 
• São usados para validar apenas um caractere do texto 
• . (ponto...
VALIDAÇÕES DE INPUTS 
• Metacaracteres quantificadores: 
• São usados para dar quantidade à expressão anterior 
• ? - Opci...
FORMS 2.0 
• Outras tags para formulários 
• <keygen> - Tag que envia uma chave pública para o servidor 
poder utilizar pa...
FORMS 2.0 
• Leituras recomendadas 
• Artigos sobre Forms 2.0 
• http://diveintohtml5.info/forms.html 
• http://hacks.mozi...
EXERCÍCIOS 
• Utilize todos os novos recursos vistos nesta aula 
para incrementar o formulário de cadastro de 
currículo f...
TAGS EDITÁVEIS 
• Qualquer tag pode ser editável agora 
• contenteditable. Atributo que torna naturalmente possível a 
edi...
IFRAMES 
• Como inserir um código HTML dentro de outra 
página 
• <iframe> é uma tag que possibilita controlar um document...
Html5 Aula 4
Html5 Aula 4
Próximos SlideShares
Carregando em…5
×

Html5 Aula 4

1.109 visualizações

Publicada em

Slides da quarta aula do curso de HTML5 da Especializa. O curso está disponível gratuitamente no endereço: http://ead.especializa.com.br/curso/html5-basico

Publicada em: Internet
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
1.109
No SlideShare
0
A partir de incorporações
0
Número de incorporações
433
Ações
Compartilhamentos
0
Downloads
47
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Html5 Aula 4

  1. 1. HTML5 ESSENCIAL Fundamentos de todo serviço na Web
  2. 2. EMENTA • Fundamentos de Web • Documentos HTML • Conteúdo • Multimídia • Semântica • Desempenho 3
  3. 3. 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
  4. 4. 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
  5. 5. 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 7
  6. 6. 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
  7. 7. 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 9
  8. 8. 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 de preenchimento 10
  9. 9. 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 11
  10. 10. 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}) | (1dd) | (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
  11. 11. 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
  12. 12. 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
  13. 13. 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> 15
  14. 14. 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/ • Excelente material gratuito do autor brasileiro Aurélio Marinho Jargas 16
  15. 15. 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
  16. 16. 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
  17. 17. 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

×