#DeveloperDay - Front-end API html5

O objetivo do HTML 5 é criar um web semântica. Isso
significa organização, padrões na estrutura da página.
Esta nova versão do HTML traz mudanças significativas com
a criação de novas tags que possibilitam unir as partes da
página de forma lógica. O que não significa
necessariamente um código mais enxuto. Como já disse, o
objetivo é torná-lo organizado.
OBJETIVO DO HTML5

Modifica a forma como estamos escrevendo código e
organizamos a informação na página. Seria mais semântica com
menos código. Seria mais interativa sem a necessidade de
plugins e perda de performace.
O QUE É HTML5?

Vantagens:
- marcação limpa.
- semântica adicional de novos elementos
como <header> , <nav> e <datetime>
-Novo formulário tipos de entrada
Desvantagens
- A especificação não está terminada e é provável que a
mudança.
- Muitos usuários com versões antigas de navegadores, o que
não permite o uso de algumas APIs.
VANTAGENS E DESVANTAGENS

0
A definição do tipo de documento tornou-se absurdamente mais simples.
<!DOCTYPE html>
A hierarquia de cabeçalhos (h1 – h6) também foi alterada. Agora ela não é
mais relativa à página somente, mas à seção da página. É possível ter diversos
h1 em uma mesma página, sendo que cada um com uma importância
diferente conforme a seção em que esta sem influenciar diretamente os
outros.
O papel Da div
Com já foi dito, as novas tag HTML 5 priorizam a semântica. As divs sempre
tiveram o papel de estruturar a página e continuam assim. São utilizadas para
fins “decorativos” e estruturas gerais, pois não possuem valor semântico e
não ajudam a definir a importância do conteúdo.
HTML5

0
article no HTML 5
Para saber quando utilizar o article, isole o texto do resto da página. Se ele continuar
fazendo sentido, estão use article. A utilização básica é para notícias, artigos e
comentários. Ela cria seções da página que podem ser referenciadas via RSS.
<article>
<h2>Artigo em destaque</h2>
<figure><img src=”imagem.jpg” alt=”imagem”></figure>
<p>Donec ac elit. Etiam posuere venenatis ante. Nun ullamcorper neque ac
justo. Donec id alor purus. Aenean non enim eget diam aliquam tristique. Mauris
pellentesque pulvinar dui. </p>
<a href="#" title="Leia mais" class="leiamais">leia mais</a>
</article>
O article e o section tem um relacionamento que pode confundir a princípio. Pois
assim como é possível colocar article dentro de um section, o inverso também é
permitido.
HTML5

0
header E hgroup no HTML 5
O elemento header especifica o cabeçalho da seção da página. Ele pode ser utilizado no topo da página
englobando o logotipo da empresa e o menu, e ao mesmo tempo aparecer no lado direito para intitular a seção
“mais artigos”.
Utilização no topo da página:
<header>
<div class="topo-div"></div>
<nav>
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Marketing">Marketing</a></li>
<li><a href="#" title="Internet">Internet</a></li>
<li><a href="#" title="Granhar Dinheiro">Granhar Dinheiro</a></li>
<li><a href="#" title="Webmaster">Webmaster</a></li>
<li><a href="#" title="Scripts">Scripts</a></li>
<li><a href="#" title="Software">Software</a></li>
<li><a href="#" title="Comércio Eletrõnico">Comércio Eletrônico</a></li>
<li><a href="#" title="Downloads">Downloads</a></li>
<li><a href="#" title="Contato">Contato</a></li>
</ul>
</nav>
</header>
HTML5

0
A tag hgroup (head group) serve para englobar diversos cabeçalhos.
<article>
<hgroup>
<h1>Titulo principal</h1>
<h2>Subtítulo</h2>
</hgroup>
<p> Texto do artigo</p>
</article>
Se antes do texto ainda houvesse um parágrafo com data, por exemplo, deve-
se então englobar o hgroup e p com o header.
HTML5

0
Na verdade, sim, com algumas etapas extra. E ele vai trabalhar
em todos os navegadores modernos. Pode até funcionar no
IE6. Existem apenas algumas curiosidades pouco precisamos
passar se nós estamos indo para começar a usar isso hoje.
Primeiro, porque a maioria dos navegadores não entendem o
doctype HTML5 novo, eles não sabem sobre essas novas
etiquetas em HTML5. Felizmente, devido à flexibilidade de
navegadores, eles lidam bem com marcas desconhecidas. O
único problema aqui é as marcas desconhecidas não têm estilo
padrão, e são tratados como marcas incorporadas . Estas tags
HTML5 novas são estruturais, e deve, obviamente, ser elementos
nível de bloco. Então, quando o estilo-los com CSS , precisamos
ter certeza de incluir o display: block; em nosso atributo de valor
pares .
JÁ POSSO USAR O HTML5?

A partir de hoje. E, claro, uma vez HTML5 é mais amplamente
suportado, o supérfluo display: block; pode ser removido, pois
ele será incluído nos estilos padrão do navegador
JÁ POSSO USAR O HTML5?

Há mais um problema se você precisar de suporte IE. Acontece
que o motor de renderização do IE irá trabalhar com as novas
tags, mas não reconhece nenhum CSS aplicadas a eles. Bem, isso
não é bom. Felizmente, o IE só precisa de um bom pontapé
rápido com a ajuda de um simples bocado muito de
JavaScript. Tudo o que precisamos fazer para lançar o IE é criar
um DOM com JavaScript nó para cada uma das novas tags, e de
repente o IE irá aplicar estilos para as novas tags sem nenhum
problema. O código será parecido com este, e pode ser colocado
diretamente na cabeça do nosso documento, ou o conteúdo
do script tag colocados em um arquivo externo e incluídos.
APOIO AO IE

- Cross-browser compatível (IE6, sim nós temos isso.)
- HTML5 pronto. Use as novas tags, com certeza.
- Ótima cache e as regras de compressão para a classe de
desempenho A
- As melhores práticas de configuração padrões do site
otimizações navegador móvel
- IE classes específicas para o controle de cross-browser máximo
Handy. Js e sem classes. Js de estilo baseado na capacidade
HTML5 BOILERPLATE

tel
Telefone. Não há máscara de formatação ou validação,
propositalmente, visto não haver no mundo um padrão bem
definido para números de telefones. É claro que você pode usar
a nova API de validação de formulários para isso. Os agentes de
usuário podem permitir a integração com sua agenda de
contatos, o que é particularmente útil em telefones celulares.
search
Um campo de busca. A aparência e comportamento do campo
pode mudar ligeiramente dependendo do agente de usuário,
para parecer com os demais campos de busca do sistema.
NOVIDADES NOS FORMULÁRIOS

email
E-mail, com formatação e validação. O agente de usuário pode
inclusive promover a integração com sua agenda de contatos.
url
Um endereço web, também com formatação e validação.
O campo de formulário pode conter qualquer um desses valores
Datas e horas
no atributo type:
•datetime
•date
•month
•week
•time
•datetime-local

Todos devem ser validados e formatados pelo agente de usuário,
que pode inclusive mostrar um calendário, um seletor de horário
ou outro auxílio ao preenchimento que estiver disponível no
sistema do usuário.
O atributo adicional step define, para os validadores e auxílios ao
preenchimento, a diferença mínima entre dois horários. O valor
de step é em segundos, e o valor padrão é 60. Assim, se você
usar step="300" o usuário poderá fornecer como horários 7:00,
7:05 e 7:10, mas não 7:02 ou 7:08.
number
Veja um exemplo do tipo number com seus atributos opcionais:
range
Vamos modificar, no exemplo acima, apenas o valor de type,
mudando de "number" para "range":

color
O campo com type="color" é um seletor de cor. O agente de
usuário pode mostrar um controle de seleção de cor ou outro
auxílio que estiver disponível. O valor será uma cor no
formato #ff6600.

Conteúdo editável
Para tornar um elemento do HTML editável, basta incluir nele o
atributo contenteditable, assim:
<div contenteditable="true"> Edite-me... </div>Você pode ler e
manipular os elementos editáveis normalmente usando os
métodos do DOM. Isso permite, com facilidade, construir uma
área de edição de HTML.

HTML5 tem uma tonelada de novos tipos de atributos e
funcionalidades para formulários. Estes não devem tomar o lugar
de Javascript ou CSS, mas para complementar e simplificar o
processo de desenvolvimento. Olhe para estas a estes atributos:
<input type="text" placeholder="stuff>
//texto em cinza, que desaparece em foco.
<input type="text" autofocus>
// centra-se para o campo automaticamente. Boolean.
<input type="text" required>
// campo deve ter um valor a apresentar. Boolean.
<input type="text" autocomplete="off">
// "on" por padrão, utilizado como medida de segurança.

Iphone
<input type="tel">
<input type="url">
<input type="email">

Atributos globais são aqueles que todos os elementos possuem. Entre os
novos atributos globais do HTML 5, temos:
- O atributo contenteditable que indica que aquela área é editável. O
usuário pode mudar o conteúdo do elemento e manipular sua marcação.
- O atributo contextmenu que pode ser usado para apontar para um menu
popup (que aparece quando se clica com o botão direito, por exemplo).
- O atributo draggable que informa que aquele elemento pode ser
arrastado.
- O atributo hidden que informa que aquele elemento não é mais, ou
ainda não é relevante.
O HTML 5 também mudou a forma como os eventos são identificados,
bem como introduziu novos. Eventos agora são apresentados na forma
onevent-nomedoevento. Exemplo: onevent-click.
ATRIBUTOS GLOBAIS

HTML5 provê uma maneira de se indicar ao navegador que elementos são
necessários e devem ser postos em cache para que uma aplicação funcione
offline. O exemplo da documentação oficial é bastante esclarecedor. Dê uma
olhada na seguinte página:
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>Clock</title>
5 <script src="clock.js"></script>
6 <link rel="stylesheet" href="clock.css">
7 </head>
8 <body>
9 <p>The time is: <output id="clock"></output></p>
10 </body>
11 </html>
CONTROLE DE CACHE

Trata-se de um widget de relógio. Para funcionar, este HTML
depende dos arquivos "clock.js" e "clock.css". Para permitir que o
usuário acesse esta página offile, precisamos escrever um
arquivo de manifesto, indicando que URLs devem ser postas em
cache. Vamos preparar uma nova versão do widget, contendo o
manifesto, que é um arquivo com a extensão .manifest e que
deve ser servido com o tipo MIME text/cache-manifest. Em
nosso caso, o arquivo vai se chamar clock.manifest e terá o
seguinte conteúdo:
CACHE MANIFEST clock1.html clock.css clock.js
CONTROLE DE CACHE

1 <!DOCTYPE HTML>
2 <html manifest="clock.manifest">
3 <head>
4 <title>Clock</title>
5 <script src="clock.js"></script>
6 <link rel="stylesheet" href="clock.css">
7 </head>
8 <body>
9 <p>The time is: <output id="clock"></output></p>
10 </body>
11 </html>
CONTROLE DE CACHE

Note que é recomendado que você insira o próprio HTML
principal na lista de URLs do arquivo de manifesto, embora não
seja necessário. Ao encontrar uma página com um arquivo de
manifesto vinculado, o navegador fará cache das URLs listadas
no manifesto e da própria página.
Note também que não é necessário que todas as URLs para
cache estejam importadas no documnto atual. O arquivo de
manifesto pode contar todas as páginas de sua aplicação que
forem necessárias para permitir o funcionamento offline,
inclusive a navegação entre páginas.
CONTROLE DE CACHE

Quais atitudes objetivas a CódigoDigital deve adotar em relação aoHTML5?

#DeveloperDay - Front-end API html5

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a #DeveloperDay - Front-end API html5

#DeveloperDay - Front-end API html5

Notas do Editor