Novas possibilidades no desenvolvimento web com a HTML5 Organização: Tiago Kautzmann

VISÃO GERAL HTML5 WORLD WIDE WEB HISTÓRICO W3C

World Wide Web 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 Geral http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

HTML – Visão Geral World Wide Web . . .

W3C – World Wide Web Consortium HTML – Visão Geral W3C – World Wide Web Consortium 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.

Os padrões são definidos por grupos de trabalho. HTML – Visão Geral W3C – World Wide Web Consortium 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; ….. Os padrões são definidos por grupos de trabalho.

W3C – World Wide Web Consortium HTML – Visão Geral W3C – World Wide Web Consortium 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 W3C – World Wide Web Consortium 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 Geral W3C – 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;

Desenvolvimento da HTML5 HTML – Visão Geral Desenvolvimento da HTML5 De acordo com a W3C, a Web é baseada em 3 pilares: Um esquema de nomes para localização de fontes de informação na Web, esse esquema chama-se URI; Um protocolo de acesso para acessar estas fontes, hoje o HTTP; Uma linguagem de hipertexto, para a fácil navegação entre as fontes de informação: a HTML;

Desenvolvimento da HTML5 HTML – Visão Geral Desenvolvimento da HTML5 1989 Tim Berners-Lee cria a World Wide Web 1990 Tim Berners-Lee cria a 1ª versão da HTML 1994 HTML 2 – já incluia a tag <img> 1997 HTML 3.2 1999 HTML 4.01 2000 XHTML 1.0 2001 XHTML 1.1 2004 Apple, Mozilla e Opera criam a WHAT WG (Web Hypertext Application Technology Working Group)

Desenvolvimento da HTML5 HTML – Visão Geral Desenvolvimento da HTML5 2007 W3C retoma o HTML Working Group 2009 W3C descontinua XHTML 2010 2011 Apple, Google, Microsoft, Mozilla e Opera Software passam a dar suporte ao HTML5 em seus browsers.

O que é a HTML5? Desenvolvimento da HTML5 HTML – Visão Geral 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. http://www.w3.org/html/wg/

Objetivos da HTML5: Desenvolvimento da HTML5 HTML – Visão Geral 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.

Desenvolvimento da HTML5 HTML – Visão Geral Desenvolvimento 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.

Desenvolvimento da HTML5 HTML – Visão Geral Desenvolvimento da HTML5 Muitas tecnologias que foram originalmente definidas como HTML5 passaram a ser definidas em especificações separadas. Exemplo: HTML Microdata - HTML WG HTML Canvas 2D Context - HTML WG HTML5 Web Messaging - Web Apps WG Web Workers - Web Apps WG Web Storage - Web Apps WG The WebSocket API - Web Apps WG The WebSocket Protocol - IETF HyBi WG Server-Sent Events - Web Apps WG WebRTC - WebRTC WG WebVTT - W3C Web Media Text Tracks CG HTML+RDFa - RDFa WG SVG - SVG WG MathML - Math WG .......

Desenvolvimento da HTML5 HTML – Visão Geral Desenvolvimento da HTML5 HTML5 + CSS3 + JavaScript + outras especificações

HTML5 Estrutura 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>

HTML5 – Estrutura básica, DOCTYPE e charsets 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 Novos elementos semânticos

Semântica dos documentos em HTML HTML5 – Novos elementos e atributos Semântica dos documentos em HTML 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 atributos Semântica dos documentos em HTML HTML4 HTML5

Semântica dos documentos em HTML HTML5 – Novos elementos e atributos Semântica dos documentos em HTML

Elemento header HTML5 – Novos elementos e atributos 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

Elemento header HTML5 – Novos elementos e atributos header - HTML language reference

Elemento footer HTML5 – Novos elementos e atributos 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

Elemento footer HTML5 – Novos elementos e atributos footer - HTML language reference

Elemento nav HTML5 – Novos elementos e atributos 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

Elemento nav HTML5 – Novos elementos e atributos <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> nav - HTML language reference

Elemento article HTML5 – Novos elementos e atributos 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

Elemento article HTML5 – Novos elementos e atributos <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> article - HTML language reference

Elemento section HTML5 – Novos elementos e atributos 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

Elemento section HTML5 – Novos elementos e atributos <section>    <header> <h1>Visão da empresa</h1> </header> <p>A empresa em uma visão de mundo ...</p> </section> section - HTML language reference

Elemento aside HTML5 – Novos elementos e atributos 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. <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> aside - HTML language reference

HTML5 Novos atributos

Novos atributos para formulários HTML5 – Novos elementos e atributos Novos 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}” />

Novos atributos para formulários HTML5 – Novos elementos e atributos Novos atributos para formulários

Novos atributos para formulários HTML5 – Novos elementos e atributos Novos atributos para formulários

Novos atributos para formulários HTML5 – Novos elementos e atributos Novos atributos para formulários 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 valores para o atributo type HTML5 – Novos elementos e atributos Novos 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

Novos atributos para formulários HTML5 – Novos elementos e atributos Novos atributos para formulários Atributo novalidate   <form action="demo_form.php" novalidate>   E-mail: <input type="email" name="user_email">   <input type="submit"> </form>   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>  

Novos atributos para formulários HTML5 – Novos elementos e atributos Novos atributos para formulários 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>   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>  

HTML5 SUPORTE DOS NAVEGADORES E EXTRATÉGIAS DE USO

HTML5 nos navegadores atuais Suporte dos navegadores e estratégias de uso Compatibilidade da HTML5 HTML5 nos navegadores atuais 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.

html5test.com Teste de compatibilidade dos browsers: Suporte dos navegadores e estratégias de uso Compatibilidade da HTML5 Teste de compatibilidade dos browsers: html5test.com

Problemas de compatibilidade com IE Suporte dos navegadores e estratégias de uso Compatibilidade da HTML5 Problemas de compatibilidade com IE html5test.com 320 / 500 IE – 23,54% no Brasil

HTML5 no Internet Explorer Suporte dos navegadores e estratégias de uso 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]-->

HTML5 no Internet Explorer Suporte dos navegadores e estratégias de uso Compatibilidade da HTML5 HTML5 no Internet Explorer Script desenvolvido por Remy Sharp: <!--[if lte IE 8]> <script src=“http://html5shim.googlecode.com/svn/trunk/html5.js"> </script> <![endif]-->

caniuse.com Compatibilidade da HTML5 Suporte dos navegadores e estratégias de uso Compatibilidade da HTML5 caniuse.com Pesquisa sobre suporte ao HTML5, CSS3, SVG, novas APIs JavaScript

Biblioteca JavaScript Modernizr Suporte dos navegadores e estratégias de uso 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 { // }

Biblioteca JavaScript Modernizr 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>. A biblioteca Modernizr vai acrescentar dinamicamente 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 ... .borderradius #content { border: 1px solid #141414; border-radius: 12px; } .no-borderradius #content { border: 1px solid #ccc;

Compatibilidade da HTML5 Suporte dos navegadores e estratégias de uso Compatibilidade da HTML5 Biblioteca Modernizr, em conjunto com outras bibliotecas JavaScript, permite adicionar funcionalidades não suportadas nativamente pelo browser. Formulário Cross Browser com Modernizr, webforms2 e html5forms http://goo.gl/HWykC

html5boilerplate.com HTML5 Boilerplate Compatibilidade da HTML5 Suporte dos navegadores e estratégias de uso 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. html5boilerplate.com

HTML5 Suporte IDEs

Suporte 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.

Aptana Studio (Eclipse) Suporte IDEs Aptana Studio (Eclipse)

HTML5 MathML e SVG

http://www.w3.org/Math/ 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 + SVG 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 Novos elementos para AUDIO e VIDEO

Elemento audio HTML5 – Novos elementos e atributos 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

Elemento source HTML5 – Novos elementos e atributos 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 reference source – HTML language reference

Elemento video HTML5 – Novos elementos e atributos 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

Elemento video HTML5 – Novos elementos e atributos Elemento video no navegador Google Chrome

Elemento video HTML5 – Novos elementos e atributos Codecs para a HTML5: Theora para ogv; MPEG4 para mp4; H.264 para MPEG; VP8 para WebM;

Elemento track HTML5 – Novos elementos e atributos Destina-se a definir trilhas externas para os elementos audio e video: Subtítulos; Legendas; Descrições; Metadados; <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> track - HTML language reference

Ferramenta para codificação HTML5 – Novos elementos e atributos Ferramenta 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/

APIs para audio e video HTML5 – Novos elementos e atributos 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;

www.youtube.com.br/html5 APIs para audio e video HTML5 – Novos elementos e atributos APIs para audio e video www.youtube.com.br/html5

HTML5 Elemento canvas

Elemento canvas HTML5 – Novos elementos e atributos 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; No HTML: <canvas id=”x” width=”300” height=”300”></canvas> No JavaScript: context=document.getElementById(‘x’).getContext(‘2d’); context.fillRect(10, 10, 50, 150);

Elemento canvas HTML5 – Novos elementos e atributos 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/labs/html5-canvas-wheel-of-fortune/ http://www.html5canvastutorials.com/tutorials/html5-canvas-element/

http://chrome.angrybirds.com/ Elemento canvas http://www.spacegoo.com/ HTML5 – Novos elementos e atributos Elemento canvas Angry Birds http://chrome.angrybirds.com/ WebGL – Contexto 3D a partir do elemento canvas. http://www.spacegoo.com/ Jogo multiplayer HTML5 (Websocket API + Canvas API) http://hacks.mozilla.org/2012/03/browserquest/ Wolfenstein 3D http://www.wolfenstein.com

HTML5 Microdata API

Microdata API HTML5 – Novos elementos e atributos 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/

Microdata API HTML5 – Novos elementos e atributos http://www.w3.org/html/wg/drafts/microdata/master/

HTML5 Web Storage

Web Storage http://dev.w3.org/html5/webstorage/ HTML5 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/

HTML5 Aplicações OFFLINE

Applicações OFFLINE HTML5 Maneira de indicar ao navegador quais elementos são necessários e devem ser colocados em cache para que a aplicação funcione offline. Arquivo clock.appcache <!-- 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> CACHE MANIFEST clock.html clock.css clock.js http://www.w3.org/TR/html5/browsers.html#offline

HTML5 API de Geolocalização

API de Geolocalização HTML5 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

HTML5 API de Geolocalização

HTML5 Web Socket

HTML5 Web 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/

HTML5 Web Workers

HTML5 Web 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/

HTML5 Server-Sent Events

Server-Sent Events HTML5 Um server-sent event possibilita que um documento web obtenha automaticamente uma atualização do servidor. Código no cliente. teste-server-sent.php executa no servidor.

HTML5 Outras funcionalidades

Outras funcionalidades HTML5 Outras funcionalidades API de Drag and Drop Atributo draggable num elemento o torna arrastável e há uma série de eventos que é possível tratar. Revisão ortográfica e gramatical Agentes 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 contenteditable Este atributo torna um elemento HTML editável pelo usuário.

Outras funcionalidades HTML5 Outras funcionalidades DOM e HTML5 O 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 Toolbars O 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.

Outras funcionalidades HTML5 – Novos elementos e atributos Outras 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>

Outras funcionalidades HTML5 – Novos elementos e atributos Outras 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>

Outras funcionalidades HTML5 – Novos elementos e atributos Outras 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/

Referências Novas possibilidades no desenvolvimento web com a HTML5 http://www.w3.org/html/wg/ http://www.w3c.br/Home/WebHome http://www.w3.org/TR/tr-groups-all http://www.maujor.com/

Novas possibilidades no desenvolvimento web com a HTML5 Valeu Pessoal!!! Novas possibilidades no desenvolvimento web com a HTML5 Organização: Tiago Kautzmann Material da apresentação disponível em: www.tiagokautzmann.com.br/html5