#DeveloperDay - Front-end API html5

Marlon RaphaelLeandro Santos

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 divCom 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 5Para 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 5O 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

<script> document.createElement('header'); document.createElement('footer'); document.createElement('section'); document.createElement('aside'); document.createElement('nav'); document.createElement('article'); </script>

Antes de deixarmos este código, há uma coisa a falar sobre o script tag em HTML5. HTML5 vai assumir type = "text / javascript" em qualquer elemento script, por isso não precisa ser incluído. Mais uma vez, tornando as coisas simples.

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 siteotimizações navegador móvel- IE classes específicas para o controle de cross-browser máximoHandy. Js e sem classes. Js de estilo baseado na capacidade

HTML5 BOILERPLATE

telTelefone. 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.searchUm 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

emailE-mail, com formatação e validação. O agente de usuário pode inclusive promover a integração com sua agenda de contatos.urlUm endereço web, também com formatação e validação.O campo de formulário pode conter qualquer um desses valores Datas e horasno 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.numberVeja um exemplo do tipo number com seus atributos opcionais:rangeVamos modificar, no exemplo acima, apenas o valor de type, mudando de "number" para "range":


colorO 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ávelPara 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

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

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ódigo Digital deve adotar em relação ao HTML5?

Design

#DeveloperDay - Front-end API html5