A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

Novas possibilidades no desenvolvimento web com a HTML5

Apresentações semelhantes


Apresentação em tema: "Novas possibilidades no desenvolvimento web com a HTML5"— Transcrição da apresentação:

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

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

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

4 World Wide Web HTML – Visão Geral

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

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

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

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

9 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).

10 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;

11 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;

12 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)

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

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

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

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

17 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

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

19 HTML5 Estrutura básica, DOCTYPE e charsets

20 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>

21 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>

22 HTML5 Novos elementos semânticos

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

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

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

26 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

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

28 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

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

30 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

31 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

32 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

33 Elemento article HTML5 – Novos elementos e atributos
<article>   <header>     <h1>The Very First Rule of Life</h1>     <p><time pubdate datetime=" T14: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=" T19:10-08:00"></time></p>       </footer>      <p>Yeah! Especially when talking about your!</p>     </article>   </section>  </article> article - HTML language reference

34 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

35 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

36 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

37 HTML5 Novos atributos

38 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}” />

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

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

41 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=“ ”>      <input type=“ ” form=“foo” name=“ ”>  </label>  <form id=“foo”></form>  

42 Novos valores para o atributo type
HTML5 – Novos elementos e atributos Novos valores para o atributo type tel - Telefone search – Um campo de busca – 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=" " name=" " /> Custom validators

43 Novos atributos para formulários
HTML5 – Novos elementos e atributos Novos atributos para formulários Atributo novalidate <form action="demo_form.php" novalidate>   <input type=" " name="user_ ">   <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>  

44 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>  

45 HTML5 SUPORTE DOS NAVEGADORES E EXTRATÉGIAS DE USO

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

47 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

48 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

49 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]-->

50 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]-->

51 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

52 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 <script src="js/modernizr js"></script> if(Modernizr.video){ // script para uso do elemento video } else { // } if(Modernizr.video){ // script para uso do elemento video. } else { // }", "width": "800" }

53 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;

54 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

55 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

56 HTML5 Suporte IDEs

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

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

59 HTML5 MathML e SVG

60 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;

61 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;

62 HTML5 Novos elementos para AUDIO e VIDEO

63 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

64 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

65 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

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

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

68 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

69 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).

70 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;

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

72 HTML5 Elemento canvas

73 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);

74 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;

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

76 HTML5 Microdata API

77 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).

78 Microdata API HTML5 – Novos elementos e atributos

79 HTML5 Web Storage

80 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;

81 HTML5 Aplicações OFFLINE

82 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

The time is:

CACHE MANIFEST. clock.html. clock.css. clock.js. http://www.w3.org/TR/html5/browsers.html#offline.", "width": "800" }

83 HTML5 API de Geolocalização

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

85 HTML5 API de Geolocalização

86 HTML5 Web Socket

87 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;

88 HTML5 Web Workers

89 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;

90 HTML5 Server-Sent Events

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

92 HTML5 Outras funcionalidades

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

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

95 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>

96 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>

97 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>

98 Validadores W3C http://validator.w3.org/

99 Referências Novas possibilidades no desenvolvimento web com a HTML5

100 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:


Carregar ppt "Novas possibilidades no desenvolvimento web com a HTML5"

Apresentações semelhantes


Anúncios Google