Embed Size (px)
Citation preview
Novas possibilidades no desenvolvimento web com a HTML5Organização: Tiago Kautzmann
HTML5 WORLD WIDE WEBHISTÓRICOW3C
VISÃO GERAL
HTML – Visão Geral
Em 1989 Tim Berners-Lee inventou a World Wide Web:•Criou o termo World Wide Web;•Desenvolveu o primeiro servidor web;•Desenvolveu o protocolo http;•Desenvolveu o primeiro navegador;•Em 1990 desenvolveu a primeira versão do HTML (HyperText Markup Language);•Especificações iniciais para URIs, HTTP e HTML foram refinadas posteriormente.
World Wide Web
HTML – Visão GeralWorld Wide Web
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
HTML – Visão GeralWorld Wide Web
...
HTML – Visão Geral
Em outubro de 1994 Tim Berners-Lee fundou a W3C com o objetivo de desenvolver padrões, especificações técnicas e orientações que permitam o crescimento a longo prazo da web.
W3C – World Wide Web Consortium
HTML – Visão Geral
Alguns padrões definidos pela W3C:•XML;•HTML;•XHTML;•DOM;•CSS;•SVG;•MathML;•Padrões para Acessibilidade (WCAG – Web Content Accessibility Guidelines);•Padrões Web Semântica;
…..
W3C – World Wide Web Consortium
Os padrões são definidos por
grupos de trabalho.
HTML – Visão Geral
W3C é um consórcio (associação de empresas) internacional que conta com:
• Organizações filiadas (mais de 370 membros);• Uma equipe em tempo integral;• Participação do público.
W3C – World Wide Web Consortium
HTML – Visão Geral
A W3C é administrada através de um contrato comum entre três instituições que o hospedam: MIT (EUA), ERCIM (Europa), Keio University (Japão) e Beihang University (China).
W3C – World Wide Web Consortium
HTML – Visão GeralW3C – World Wide Web Consortium
Possui também os escritórios regionais, como a W3C Brasil. O escritório no Brasil tem como objetivos:•Disseminar a cultura de adoção de padrões para a web;•Organizar atividades na região para promover a W3C;•Traduzir para o português textos da W3C relevantes para o Brasil;•Recomendar padrões técnicos para o desenvolvimento da web no país;
HTML – Visão GeralDesenvolvimento da HTML5
De acordo com a W3C, a Web é baseada em 3 pilares:1.Um esquema de nomes para localização de fontes de informação na Web, esse esquema chama-se URI;
2.Um protocolo de acesso para acessar estas fontes, hoje o HTTP;3.Uma linguagem de hipertexto, para a fácil navegação entre as fontes de informação: a HTML;
HTML – Visão GeralDesenvolvimento da HTML5
1989 Tim Berners-Lee cria a World Wide Web1990 Tim Berners-Lee cria a 1ª versão da HTML1994 HTML 2 – já incluia a tag <img>1997 HTML 3.21999 HTML 4.012000 XHTML 1.02001 XHTML 1.12004 Apple, Mozilla e Opera criam a WHAT WG
(Web Hypertext Application Technology Working Group)
HTML – Visão GeralDesenvolvimento da HTML5
2007 W3C retoma o HTML Working Group2009 W3C descontinua XHTML2010 2011
Apple, Google, Microsoft, Mozilla e Opera Software passam a dar suporte ao HTML5 em seus browsers.
HTML – Visão GeralDesenvolvimento da HTML5
HTML5 é a nova versão da HTML. Além de definir regras de marcação HTML e XHTML, define APIs (DOM) que formarão a base da arquitetura web.
O que é a HTML5?
http://www.w3.org/html/wg/
HTML – Visão GeralDesenvolvimento da HTML5
•Novos elementos e modificação da função de outros. Elemento strong, aparece como elemento semântico, como marcador de um destaque dentro de um texto;•Novos atributos, modificação de outros e novos valores de atributos;•Elementos e atributos descontinuados (ex: font, center, frame);•Elementos que melhoram a semântica do código;•Mais interatividade sem a necessidade de plugins;•Novo DOM (Document Object Model): nova API, eventos,...•Interoperabilidade e Retrocompatibilidade.
Objetivos da HTML5:
HTML – Visão GeralDesenvolvimento da HTML5
Em 12 de dezembro de 2012 foi publicada a definição completa (Candidate Recommendation) das especificações HTML5.0 e Canvas 2D. Estabilidade para o desenvolvedor e fornecedores de browsers.http://www.w3.org/2012/12/html5-cr
A expectativa da W3C é que a HTML 5.0 se torne uma recomendação no final de 2014 e a HTML 5.1 no final de 2016.
HTML – Visão GeralDesenvolvimento da HTML5
Muitas tecnologias que foram originalmente definidas como HTML5 passaram a ser definidas em especificações separadas. Exemplo:HTML Microdata - HTML WGHTML Canvas 2D Context - HTML WGHTML5 Web Messaging - Web Apps WGWeb Workers - Web Apps WGWeb Storage - Web Apps WGThe WebSocket API - Web Apps WGThe WebSocket Protocol - IETF HyBi WGServer-Sent Events - Web Apps WGWebRTC - WebRTC WGWebVTT - W3C Web Media Text Tracks CGHTML+RDFa - RDFa WGSVG - SVG WGMathML - Math WG.......
HTML – Visão GeralDesenvolvimento da HTML5
HTML5 + CSS3 + JavaScript + outras especificações
HTML5Estrutura básica, DOCTYPE e charsets
HTML5 – Estrutura básica, DOCTYPE e charsets
O HTML5 define uma sintaxe compatível com HTML e XHTML:
<!DOCTYPE html><html lang="pt-br">
<head><meta charset="UTF-8" /><title>Palestra HTML5</title>
</head><body>
</body></html>
Sintaxe XML do HTML5, para servir o documento como XML:
<?xml version="1.0" encoding="UTF-8"?><html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>Example document</title> </head> <body> <p>Example paragraph</p> </body></html>
HTML5 – Estrutura básica, DOCTYPE e charsets
HTML5Novos elementos semânticos
HTML5 – Novos elementos e atributos
•A função da HTML é indicar (marcar) que tipo de informação o documento está exibindo;•Problema histórico da HTML: Não há um padrão para nomenclatura de IDs e classes;•A HTML5 apresenta novos elementos que melhoram a semântica dos documentos web;•Alguns dos novos elementos ajudam a definir setores principais nos documentos HTML e estabelecer grupos lógicos de conteúdos;•Ajuda o trabalho de agentes de usuário como os sistemas de busca, que guardam informações mais exatas sobre o conteúdo dos documentos.
Semântica dos documentos em HTML
HTML5 – Novos elementos e atributosSemântica dos documentos em HTML
HTML4 HTML5
HTML5 – Novos elementos e atributosSemântica dos documentos em HTML
HTML5 – Novos elementos e atributosElemento header
• Representa um cabeçalho;• Destina-se a marcar o cabeçalho de uma
sessão ou da página como um todo.• Estilização padrão: display:block; • Geralmente deve conter os elementos h1-h6
(não obrigatoriamente).
header - HTML language reference
HTML5 – Novos elementos e atributosElemento header
header - HTML language reference
HTML5 – Novos elementos e atributosElemento footer
• Representa um rodapé;• Destina-se a marcar o rodapé de uma sessão
ou da página como um todo;• Estilização padrão: display:block; • Deve conter informações sobre o conteúdo da
seção ou página, como seu autor, links para documentos relacionados, direitos autorais e similares.
footer - HTML language reference
HTML5 – Novos elementos e atributosElemento footer
footer - HTML language reference
HTML5 – Novos elementos e atributosElemento nav
• Marca uma seção da página que contenha links para outras páginas ou para outras partes dentro da própria página.• Estilização padrão: display:block; • Nem todos os grupamentos de links devem ser
marcados com este elemento, somente os maiores grupos de links.
nav - HTML language reference
HTML5 – Novos elementos e atributosElemento nav
nav - HTML language reference
<nav> <h1>Navigation</h1> <ul> <li><a href="articles.html">Index </a></li> <li><a href="today.html">Things for today</a></li> <li><a href="successes.html">Managed</a></li> </ul></nav>
HTML5 – Novos elementos e atributosElemento article
• Marca uma sessão de um conteúdo que forma uma parte independente de um documento ou site, por exemplo, um artigo de uma revista, uma entrada de um blog, um conteúdo fornecido via RSS, um post em um fórum, um comentário postado por um visitante, um conteúdo independente.
article - HTML language reference
HTML5 – Novos elementos e atributosElemento article
article - HTML language reference
<article> <header> <h1>The Very First Rule of Life</h1> <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p> </header> <p>If there's a microphone anywhere near you.</p> <p>...</p> <section> <h1>Comments</h1> <article> <footer> <p>Posted by: George Washington</p> <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p> </footer> <p>Yeah! Especially when talking about your!</p> </article> </section> </article>
HTML5 – Novos elementos e atributosElemento section
• Marca , genericamente, uma seção na página, geralmente com um título ou cabeçalho;• Entende-se seção como um grupo lógico de conteúdos
tratando de um mesmo tema;• Não utilizar como container genérico. Quando for
necessário um container genérico a ser usado por fins de estilização ou para ser manipulado por script, devemos empregar o elemento div.
section - HTML language reference
HTML5 – Novos elementos e atributosElemento section
section - HTML language reference
<section> <header>
<h1>Visão da empresa</h1> </header> <p>A empresa em uma visão de mundo ...</p></section>
HTML5 – Novos elementos e atributosElemento aside
aside - HTML language reference
<article> <header>
<h1>Inter Campeão de tudo</h1> </header> <p>O Internacional de Porto Alegre se sagrou ...</p> <aside>
<h2>Você sabia ?</h2><p>O primeiro título colorado foi conquistado...</p>
</aside></article>
• Marca um conteúdo que faz referência ao conteúdo principal que o cerca, exibindo, por exemplos, informações contextuais sobre o conteúdo principal.• Em documentos para impressão, pode ser formatado
como uma nota de rodapé, por exemplo.
HTML5Novos atributos
HTML5 – Novos elementos e atributosNovos atributos para formulários
autofocus<input type=“text” name=“login” autofocus >
placeholder< input type=“text” name=” pesquisa” placeholder=”Search here ”>
required<input type=“text ” name=”login” required>
pattern<input type=“text” name=” CEP ” required pattern=”\d{5}-\d{3}” />
HTML5 – Novos elementos e atributosNovos atributos para formulários
HTML5 – Novos elementos e atributosNovos atributos para formulários
HTML5 – Novos elementos e atributos
•Novo atributo form para elementos como input, select e textarea;•Permitem que os controles sejam associados a um formulário;•Os controles não precisam ser descendentes do elemento form.
<label for=“email”> Email: <input type=“email” form=“foo” name=“email”> </label>
<form id=“foo”></form>
Novos atributos para formulários
HTML5 – Novos elementos e atributosNovos valores para o atributo type
• tel - Telefone• search – Um campo de busca• email – Email com formatação e validação• url – Um endereço web, também com formatação e validação• datetime• date• month• week• time• number• range• color
<input type="email" name="email" />
Custom validators
HTML5 – Novos elementos e atributos
Atributo novalidate <form action="demo_form.php" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"></form>
Novos atributos para formulários
Atributo formaction <form action="demo_form.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"><br> <input type="submit" formaction="demo.php“ value="Submit"></form>
HTML5 – Novos elementos e atributos
Atributo formmethod <form action="demo_form.php" method="get"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"> <input type="submit" formmethod="post“ formaction="demo.php" value="Submit using POST"></form>
Novos atributos para formulários
Atributo formtarget <form action="demo_form.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit as normal"> <input type="submit" formtarget="_blank" value="Submit to a new window"></form>
HTML5SUPORTE DOSNAVEGADORES E EXTRATÉGIAS DE USO
Suporte dos navegadores e estratégias de usoCompatibilidade da HTML5
Para o desenvolvimento da HTML5 e CSS3, a W3C dividiu o desenvolvimento de cada tecnologia em módulos. Isso quer dizer que a comunidade de desenvolvedores e os fabricantes de browsers não precisam esperar que todo o padrão seja escrito e publicado para utilizarem as novidades das linguagens.
HTML5 nos navegadores atuais
Compatibilidade da HTML5
html5test.com
Teste de compatibilidade dos browsers:
Suporte dos navegadores e estratégias de uso
Compatibilidade da HTML5
Problemas de compatibilidade com IE
Suporte dos navegadores e estratégias de uso
html5test.com
IE – 23,54%no Brasil
320 / 500
Compatibilidade da HTML5
HTML5 no Internet Explorer•HTML5 apresenta novos elementos;•IE8 e anteriores não aplicam regras CSS a elementos desconhecidos;
CSS: header{height:150px; background-color:#cccccc;}
<!--[if lte IE 8]>
<script>
document.createElement("header");
</script>
<![endif]-->
Suporte dos navegadores e estratégias de uso
Compatibilidade da HTML5
HTML5 no Internet Explorer
<!--[if lte IE 8]>
<script src=“http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
Script desenvolvido por Remy Sharp:
Suporte dos navegadores e estratégias de uso
Compatibilidade da HTML5
caniuse.com
Suporte dos navegadores e estratégias de uso
Pesquisa sobre suporte ao HTML5, CSS3, SVG, novas APIs JavaScript
Compatibilidade da HTML5
Biblioteca JavaScript Modernizr•Biblioteca JavaScript para detectar o suporte nativo dos navegadores;•Detecta suporte ao HTML5 e CSS3;•Habilita elementos HTML5 em versões antigas do IE para estilização;•Constantemente atualizada, disponível em www.modernizr.com;
<script src="js/modernizr-2.5.3.js"></script>
if(Modernizr.video){ // script para uso do elemento video} else { // }
Suporte dos navegadores e estratégias de uso
Compatibilidade da HTML5
Biblioteca JavaScript Modernizr•Para o CSS3, a biblioteca Modernizr detecta o suporte CSS do navegador e adiciona valores ao atributo class da tag <html>.
.borderradius #content { border: 1px solid #141414; border-radius: 12px;}
.no-borderradius #content { border: 1px solid #ccc; }
Suporte dos navegadores e estratégias de uso
A biblioteca Modernizr vai acrescentardinamicamente valores ao atributo class da tag html de acordo com as funcionalidades suportadas e não suportadas pelo navegador:
<html class="js borderradius no-boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections ...
Compatibilidade da HTML5
Biblioteca Modernizr, em conjunto com outras bibliotecas JavaScript, permite adicionar funcionalidades não suportadas nativamente pelo browser.
Suporte dos navegadores e estratégias de uso
http://goo.gl/HWykCFormulário Cross Browser com Modernizr, webforms2 e html5forms
Compatibilidade da HTML5
HTML5 Boilerplate•Template front-end que acompanha marcação HTML5, CSS Resets, Javascript (Modernizr), script que compatibiliza o documento HTML5 em browser desatualizados, CSS media queries (páginas responsivas), estilos para impressão, acompanha Biblioteca Jquery, script Google Analytics, arquivos configuração Apache, entre outros.
Suporte dos navegadores e estratégias de uso
html5boilerplate.com
HTML5Suporte IDEs
Netbeans
Suporte ao HTML5 criando novos projetos HTML5 utilizando templates populares, Live Preview (integração com Google Chrome) e suporte a Responsive Web Design.
Suporte IDEs
Aptana Studio (Eclipse)Suporte IDEs
HTML5MathML e SVG
HTML5 + MathML• HTML5 incorpora o MathML;• MathML é uma linguagem de marcação
baseada em XML para representação de fórmulas matemáticas;
• Basta escrever o código MathML no documento HTML5;
http://www.w3.org/Math/
• HTML5 incorpora o SVG;• SVG é uma linguagem de marcação baseada em XML para marcação
de gráficos vetoriais;• Basta escrever o código SVG no documento HTML5;• A maioria dos editores gráficos vetoriais exportam SVG;
HTML5 + SVG
HTML5Novos elementos para AUDIO e VIDEO
HTML5 – Novos elementos e atributosElemento audio • Destina-se a incorporar um audio ou stream de audio na página;• Sem a necessidade de plugins, Flash, QuickTime, Real Audio, WMP;• Som reproduzido com as funcionalidades nativas do navegador;• Não há um codec padrão a ser implementado nativamente;• Cada fabricante decide a implementação do codec;• Navegadores que não dão suporte renderizam o conteúdo do elemento:
<audio src="musica.mp3" controls autoplay loop><!--Código alternativo para inserção do audio-->
</audio>
audio - HTML language reference
HTML5 – Novos elementos e atributosElemento source
• Elemento audio admite como elemento-filho o elemento source;• Elemento source permite servir arquivos com formatos alternativos.• Recomenda-se utilizar o atributo type;
<audio controls autoplay loop><source src="musica.mp3" type="audio/mpeg; codecs='mp3'"><source src="musica.ogv" type="audio/ogg"><!--Código alternativo para inserção do audio--><p>Seu navegador não suporta o elemento audio da HTML5.</p><p>Faça o <a href="musica.mp3">download</a> do arquivo.</p>
</audio>
audio - HTML language referencesource – HTML language reference
HTML5 – Novos elementos e atributosElemento video • Destina-se a incorporar um video na página;• Sem a necessidade de plugins, Flash, QuickTime, Windows Media Player;• Video reproduzido com as funcionalidades nativas do navegador;• Não há um codec padrão a ser implementado nativamente;• Cada fabricante decide a implementação do codec;• Navegadores que não dão suporte renderizam o conteúdo do elemento:
<video controls autoplay loop preload=“auto”><source src="video1.ogg" type="video/ogg; codecs='theora, vorbis'"><source src="video1.webm" type="video/webm"><!--Código alternativo para inserção do video--><p>Seu navegador não suporta o elemento video da HTML5.</p>
</video>
video - HTML language reference
HTML5 – Novos elementos e atributosElemento video
Elemento video no navegador Google Chrome
HTML5 – Novos elementos e atributosElemento video
Codecs para a HTML5:
• Theora para ogv;• MPEG4 para mp4;• H.264 para MPEG;• VP8 para WebM;
HTML5 – Novos elementos e atributosElemento track
Destina-se a definir trilhas externas para os elementos audio e video:• Subtítulos;• Legendas;• Descrições;• Metadados;
track - HTML language reference
<video controls autoplay loop> <source src="video1.ogg" type="video/ogg; codecs='theora, vorbis'"> <source src="video1.webm" type="video/webm"> <p>Seu navegador não suporta o elemento video da HTML5.</p> <track kind="subtitles" srclang="pt-br" src="legenda.srt"></video>
HTML5 – Novos elementos e atributosFerramenta para codificação
Codificar vídeos nos containers Ogg e WebM com os codecs Theora (vídeo), Vorbis (audio) e VP8 (vídeo-audio).
http://firefogg.org/
HTML5 – Novos elementos e atributosAPIs para audio e video
A API disponível para os elementos audio e video permite que se implemente controles personalizados. Entre os atributos e métodos disponíveis estão:
• Método play();• Método pause();• Método stop();• Atributo volume;
HTML5 – Novos elementos e atributosAPIs para audio e video
www.youtube.com.br/html5
HTML5Elemento canvas
HTML5 – Novos elementos e atributosElemento canvas
• O elemento canvas marca uma área para a criação de desenhos, implementar animações e jogos através da linguagem JavaScript.• Acessado por meio de interfaces DOM;• Contexto 2D; • WebGL - Contexto 3D a partir do elemento canvas;
<canvas id=”x” width=”300” height=”300”></canvas>
context=document.getElementById(‘x’).getContext(‘2d’);context.fillRect(10, 10, 50, 150);
No JavaScript:
No HTML:
HTML5 – Novos elementos e atributosElemento canvas
Entre as possibilidades de uso da API Canvas estão:• Desenhar texto;• Desenhar sombras e gradientes;• Incluir imagens no canvas;• Manipular objetos através de eventos;• Rotacionar, animar e transformar objetos;
http://www.html5canvastutorials.com/tutorials/html5-canvas-element/
http://www.html5canvastutorials.com/labs/html5-canvas-wheel-of-fortune/
HTML5 – Novos elementos e atributosElemento canvas
http://chrome.angrybirds.com/
http://www.spacegoo.com/WebGL – Contexto 3D a partir do elemento canvas.
Angry Birds
Jogo multiplayer HTML5 (Websocket API + Canvas API)http://hacks.mozilla.org/2012/03/browserquest/
http://www.wolfenstein.com
Wolfenstein 3D
HTML5Microdata API
HTML5 – Novos elementos e atributosMicrodata API
• Semântica adicional para ser lido por máquinas;• Usuário pode definir seus próprios padrões de metadados;• Pode utilizar metadados padronizados (
http://www.data-vocabulary.org/);• A Microdata API fornece acesso especial aos dados;• Evitar ambiguidade na análise sintática dos dados (parsing).
http://www.w3.org/html/wg/drafts/microdata/master/
HTML5 – Novos elementos e atributosMicrodata API
http://www.w3.org/html/wg/drafts/microdata/master/
HTML5Web Storage
HTML5Web Storage
• Dados podem ser armazenados localmente pelo browser;• Anteriormente, feito com cookies (problemas com privacidade);• Web Storage é mais seguro e rápido;• Armazenamento de dados para além da sessão atual;
http://dev.w3.org/html5/webstorage/
HTML5Aplicações OFFLINE
HTML5Applicações OFFLINE
Maneira de indicar ao navegador quais elementos são necessários e devem ser colocados em cache para que a aplicação funcione offline.
<!-- clock.html --><!DOCTYPE HTML><html manifest="clock.appcache"> <head> <title>Clock</title> <script src="clock.js"></script> <link rel="stylesheet" href="clock.css"> </head> <body> <p>The time is: <output id="clock"></output></p> </body></html>
Arquivo clock.appcacheCACHE MANIFESTclock.htmlclock.cssclock.js
http://www.w3.org/TR/html5/browsers.html#offline
HTML5API de Geolocalização
HTML5API de Geolocalização
• Define uma API que fornece acesso por script de informações sobre localização geográfica;• As fontes de informações de localização incluem GPS, redes
de celulares, serviços de localização de IP.
http://dev.w3.org/geo/api/spec-source.html
HTML5API de Geolocalização
HTML5Web Socket
HTML5Web Socket
• Define um protocolo e funcionalidades que permitem a comunicação de um cliente web com um servidor remoto;• A conexão permanece aberta e possibilita a comunicação
permanente entre cliente e servidor;• Conexão pode ser fechada pelo desenvolvedor;• Em uma aplicação que consulta o servidor repetidamente, o
uso o protocolo http implica em repetidas requisições/resposta gerando tráfego de cabeçalhos http;• Web Socket torna a aplicação mais rápida;
http://dev.w3.org/html5/websockets/
HTML5Web Workers
HTML5Web Workers
• JavaScript tem característica single-thread (uma linha de execução). Scripts longos congelam as páginas;• Web Workers permite a execução de mais de um script
simultaneamente;• Criação de threads de execução JavaScript;
http://dev.w3.org/html5/workers/
HTML5Server-Sent Events
HTML5Server-Sent Events
• Um server-sent event possibilita que um documento web obtenha automaticamente uma atualização do servidor.
teste-server-sent.phpexecuta no servidor.
Código no cliente.
HTML5Outras funcionalidades
HTML5Outras funcionalidades
API de Drag and DropAtributo draggable num elemento o torna arrastável e há uma série de eventos que é possível tratar.
Revisão ortográfica e gramaticalAgentes de usuário podem oferecer recursos de revisão ortográfica e gramatical. O desenvolvedor pode controlar o comportamento através do novo atributo spellcheck. Inserir spellcheck =“true” habilita a revisão.
Atributo contenteditableEste atributo torna um elemento HTML editável pelo usuário.
HTML5Outras funcionalidades
DOM e HTML5O DOM é a interface entre a linguagem JavaScript e HTML. Novas propriedades e métodos. Exemplos:
• Novo método getElementsByClassName;• Propriedade innerHTML passa a ser um padrão;
Menus e ToolbarsO elemento menu é usado para definir menus e barras de ferramenta. Dentro do menu, você pode inserir submenus ou comandos. Para inserir submenus, basta inserir outros elementos menu.
HTML5 – Novos elementos e atributosOutras funcionalidades
Elementos details, summary e progress
<details> <summary>Copiando <progress max=”39248” value=”14718”> 37,5%</summary> <dl> <dt>Tamanho total:</dt> <dd>39.248KB</dd> <dt>Transferido:</dt> <dd>14.718</dd> <dt>Taxa de transferência:</dt> <dd>127KB/s</dd> <dt>Nome do arquivo:</dt> <dd>HTML5.mp4</dd> </dl></details>
HTML5 – Novos elementos e atributosOutras funcionalidades
Elemento datalist• Usar junto ao elemento input;• Define uma lista de sugestões para o campo input;
<label for="fru">Fruta preferida:</label><br /><input type="text" list="frutas" id="fru" /><datalist id="frutas">
<option value="Abacate" /><option value="Abacaxi" /><option value="Banana" /><option value="Mamão" /><option value="Manga" /><option value="Pera" />
</datalist>
HTML5 – Novos elementos e atributosOutras funcionalidades
Elementos figure e figcaption• Elemento figure: marcar fotos, ilustrações, diagramas (entre outros);• Elemento figcaption: marcar uma legenda para uma figura;
<figure> <img src="/kookaburra.jpg" alt="Kooaburra"> <img src="/pelican.jpg" alt="Pelicano na praia"> <img src="/lorikeet.jpg" alt="Papagaio"> <figcaption> Pássaros Australianos. Da esquerda para direita, Kookburra, Pelicano e Papagaio. Originais por Richard Clark </figcaption></figure>
Validadores W3C
http://validator.w3.org/http://validator.w3.org/unicorn/http://jigsaw.w3.org/css-validator/
Novas possibilidades no desenvolvimento web com a HTML5
Referências
http://www.w3.org/html/wg/http://www.w3c.br/Home/WebHomehttp://www.w3.org/TR/tr-groups-allhttp://www.maujor.com/
Valeu Pessoal!!!
Organização: Tiago Kautzmann
Novas possibilidades no desenvolvimento web com a HTML5
www.tiagokautzmann.com.br/html5Material da apresentação disponível em:
![HTML5 - W3C...HTML4 + CSS 56 HTML5 - Futuro da Web Futuro da Web - HTML5 HTML 5 [HyperText Markup Language] Novos elementos (semânticos) HTML5 + CSS E o que ficou de fora do HTML5?](https://img.document.onl/doc/110x75/5f9769938559bc0a406dee44/html5-w3c-html4-css-56-html5-futuro-da-web-futuro-da-web-html5-html.jpg)
