Criação da estrutura básica de uma página HTML5 utilizando <!DOCTYPE html>
Aula 3 - Compatibilidade
Cria com CSS um display:block para facilitar a compatibilidade de novas tags em navegadores antigos. Cria com Javascript uma tag personalizada(no caso <myTag>). Também fez uso do html5shiv para compatibilidade com navegadores ie 9 ou mais antigos. Detalhe: na aula foi utilizado um link pelo googlecode. Na apostila existe um link diferente. Não testei o link da apostila, utilizei o arquivo interno na árvore do projeto.
Aula 4 - Metadados
Utilização de metadados para otimização da página nos buscadores:
keywords: palavras chave sobre o conteudo do site. Não são
mais muito utilizados. Geralmente são copiados de sites
concorrentes.
description: uma breve descrição do site. Junto com o
título ajuda o buscador a descrever o site.
author: nome do autor ou empresa autora do site.
robots: indica aos robos ou algoritmos dos buscadores que a
pagina pode ser indexada(index) e buscadas(follow) pelos buscadores.
Pode ser criado um arquivo robots.txt na raiz do projeto. deve ser
Começando a montar a estrutura da página utilizando as novas tags <header> e <nav>.
Aula 6 - Section
Utilização da tag <section> como divisão da página. A <section> tem como função separar os conteúdos da página. Ela é genérica mas um pouco mais específica que a <div>. A <section> foi estruturada em um <article> composto por um <header> e um <footer> referentes a seção. Também utiliza a tag <small>.
Aula 7 - Trabalhando com conteudo relacionado - Aside
A tag <aside> serve para mostrar conteudos relacionados com o conteúdo principal como informações, blocos de navegação e publicidade. Para separar o <aside> do conteúdo da página, colocamos o texto pricipal na tag <main>. O posicionamento lateral da lista criada para o conteúdo aside foi obtido com o CSS transformando os dois blocos com o display: inline-block
Aula 8 - Rodapé - Footer
Pode ser utilizado para apresentar informações do autor, informações sobre direitos reservados, itens de navegação, etc
Aula 9 - Imagem e legenda
Utilizando as tags <figure> para separar imagens e <figcaption> que adiciona acessibilidade na utilização de imagens ao fazer a leitura da descrição.
Aula 10 - Tipos de entradas - color, data, datatime e email
Novos tipos de entradas HTML5:
<color> - Abre uma janela para seleção de cores
<date> - Cria uma caixa de seleção de data
<datetime> e <datetime-local> - Cria uma caixa de seleção de
data e hora. O <datetime> não funciona no Chrome
<email> - Cria uma caixa de texto que força o usuário a digitar
texto em formato de email.
Novos tipos de entradas HTML5:
<month> - Caixa de seleção de mes e ano
<number> - Input para inserção de números. Pode ser limitado com os atributos min, max e step
<range> - Cria uma barra de seleção. Neste exemplo foi otimizado com javascript para mostrar o valor selecionado no campo text ao lado. Ver o arquivo html para entender o código javascript.
Novos tipos de entradas HTML5:
<search> - Semelhante a caixa text mas com um X para limpar o texto
<time> - Assim como o date mas para seleção de hora
<url> - Como na tag email exige que o usuário digite http://
<week> - Permite a seleção de datas por semanas.
Novos tipos de entradas HTML5:
<list> - Semelhante a tag selection, porém permite uma seleção com auto-complete por letras. A sintaxe utiliza as tags <input list="id_da_lista">, <datalist> (cria a lista de opções) e <option value="valor_a_ser_apresentado>
Atributo required, o campo passa a ter preenchimento obrigatório. Foi implementado um title para passar uma mensagem de erro e um atributo especial para alterar a mensagem de erro apenas no Firefox, porém não funcionaou na minha versão do Chrome.
Novos tipos de entradas HTML5:
<output> - Essa tag permite exibir uma saida de informações indicadas no atributo "name". O valor atribuido para esse output pode ser definido no próprio HTML com funções do Javascript sem entretanto ter que ser declarado como um script. Permite ainda executar operações matemáticas recebendo os valores dos inputs adicionados no formulário.
O atributo placeholder cria uma etiqueta de fundo nas tags input que são sobreescritas quando o campo é preenchido. Já o atributo autocomplete pode ser setado para off para evitar que os dados dos campos sejam preenchidos automaticamente. É útil em campos de cartão de crédito ou senha para evitar o preenchimento automático. Nos meus testes o autocomplete não funcionou (pode ser configuração do browser)
Aula 16 - Novalidate e Autofocus
O atributo novalidade faz com que campos required deixem de ser obrigatórios. Pode ser aplicado em todo o formulário ou em tags específicas. O atributo autofocus deixa o elemento pré-selecionado.
Aula 17 - Atributo Form
Com o atributo form podemos fazer com que um elemento que esteja fora das tags do formulário, desde que o formulário tenha uma id, seja inserido no contexto daquele formulário.
O atributo novalidade pode ser aplicado a um botão para ignorar o atributo required nos campos que tem essa propriedade.
Já o atributo formmethod permite alterar o methodo de transferencia dos dados do formulário (por exemplo de GET para POST). Não funcionou no meu teste.
Por fim o atributo formaction faz com que o botão faça o get para um arquivo (no caso post.php).