// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ                                                          ...
Muito prazer, eu mesmo!        Formação         Pós-graduando em Ergodesign de Interfaces: Usabilidade e Arquitetura de  ...
Esta palestra é dedicada a Aaron Swarts.            ...Tudo o que você aprende é provisório, tudo é                    abe...
1Introdução ao HTML5 e um novo       mundo de oportunidades
Introdução ao HTML5 e um novo mundo de oportunidades      Breve cronologia da evolução do HTML/XHTML      1989 – Nasciment...
Introdução ao HTML5 e um novo mundo de oportunidades      Breve cronologia da evolução do HTML/XHTML (cont.)      2004 – W...
Introdução ao HTML5 e um novo mundo de oportunidades       A construção da World Wide Web foi criada como uma plataforma ...
Introdução ao HTML5 e um novo mundo de oportunidades        Nem todos foram convidados para essa festa.. :-(// Palestra | ...
Introdução ao HTML5 e um novo mundo de oportunidades       Assim, a quinta versão do HTML fora criada como uma forma de “...
Bem-vindos (as) à nova geração da Web!                                                                          Exemplos: ...
2Princípios de desenvolvimento                    do HTML5
Princípios de desenvolvimento do HTML5      O Grupo de Trabalho do HTML, do W3C, publicou, em 26 de novembro de 2007,     ...
Princípios de desenvolvimento do HTML5      Compatibilidade       Suporte para conteúdos existentes;       Degradação gr...
Princípios de desenvolvimento do HTML5      Utilidade       Solucionar problemas reais;       Prioridades;       Segura...
Princípios de desenvolvimento do HTML5      Interoperabilidade       Comportamentos definidos;       Evitar soluções com...
Princípios de desenvolvimento do HTML5      Acesso universal       Independência de mídia;       Suporte multilíngua;   ...
3Estruturas semânticas no HTML5:   as divisões ganham significado
Estruturas semânticas no HTML5: as divisões ganham      significado               A palavra ‘Semântica’ reporta-se fundame...
Estruturas semânticas no HTML5: as divisões ganham      significado      Em um mundo visual, tudo pode parecer mais bonito...
Estruturas semânticas no HTML5: as divisões ganham      significado      Porém, no mundo da Web, as coisas são bem diferen...
Estruturas semânticas no HTML5: as divisões ganham      significado      Como era:// Palestra | 28.01.2013 – Instituto Inf...
Estruturas semânticas no HTML5: as divisões ganham      significado      Como é:// Palestra | 28.01.2013 – Instituto Infne...
Estruturas semânticas no HTML5: as divisões ganham      significado      O HTML5 trouxe novos elementos, e muitos destes s...
Estruturas semânticas no HTML5: as divisões ganham      significado      O elemento <header>:       O elemento <header> é...
Estruturas semânticas no HTML5: as divisões ganham      significado      O elemento <nav>:       Representa uma seção de ...
Estruturas semânticas no HTML5: as divisões ganham      significado      O elemento <aside>:       Pode estar, ou não, re...
Estruturas semânticas no HTML5: as divisões ganham      significado      O elemento <main>:       Este elemento marca o c...
Estruturas semânticas no HTML5: as divisões ganham      significado      O elemento <section>:       Dos novos elementos,...
Estruturas semânticas no HTML5: as divisões ganham      significado      O elemento <article>:       O elemento <article>...
Estruturas semânticas no HTML5: as divisões ganham      significado      O elemento <footer>:       Comumente usado para ...
4Multimídia no HTML5:        áudio e vídeo
Multimídia no HTML5: áudio e vídeo       Historicamente, o emprego de elementos multimídia na Web, como áudio e      víde...
Multimídia no HTML5: áudio e vídeo      A fim de quebrar essas barreiras, o HTML5 propôs a criação dos elementos      <aud...
Multimídia no HTML5: áudio e vídeo      O elemento <audio>:       Destina-se a incorporar um som no documento;      <audi...
Multimídia no HTML5: áudio e vídeo      O elemento <video>:       Destina-se a incorporar um vídeo no documento;      <vi...
5Formulários no HTML5:       novos atributos
Formulários no HTML5: novos atributos       Formulários são, talvez, o mais antigo e importante mecanismo de interação   ...
Formulários no HTML5: novos atributos       Antes do HTML5, a validação client-side dava-se através de rotinas criadas co...
Formulários no HTML5: novos atributos      O atributo placeholder       De uso exclusivo com os elementos <input> e <text...
Formulários no HTML5: novos atributos      O atributo autofocus       De uso exclusivo com os elementos <button>, <keygen...
Formulários no HTML5: novos atributos      O atributo required       De uso exclusivo com os elementos <input>, <select> ...
Formulários no HTML5: novos atributos      O atributo autocomplete       De uso exclusivo com os elementos <input> e <for...
Formulários no HTML5: novos atributos      Os atributos max e min       De uso exclusivo com os elementos <meter>, <progr...
Fechamento      Bibliografia e fontes de consulta/referência                           Livro HTML5 – A linguagem de marca...
Fechamento                                                                   Perguntas?// Palestra | 28.01.2013 – Institut...
Muito obrigado! ;-)                     Site:                     fernandobf.com                     Blog:                ...
Upcoming SlideShare
Loading in …5
×

Palestra sobre Acessibilidade Web: o HTML5 a favor de uma Web única e universal

1,353
-1

Published on

Cerca de 200 pessoas, dentre elas desenvolvedores e interessados em gestão Web, estiveram presentes na Palestra sobre Acessibilidade Web: o HTML5 a favor de uma Web única e universal, realizada no auditório do Instituto Infnet.
O evento apresentou algumas das novas possibilidades trazidas pelo HTML5 para um desenvolvimento mais acessível de web sites e aplicativos, alavancando a Web ao seu potencial máximo! A palestra apresentou inicialmente os princípios que norteiam o desenvolvimento da quinta versão do HTML, bem como estruturas mais semânticas para construção de layouts, multimídia com áudio e vídeo e novos atributos para formulários.
Mais informações em http://goo.gl/CLOv9.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,353
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
29
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Palestra sobre Acessibilidade Web: o HTML5 a favor de uma Web única e universal

  1. 1. // Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo Figueroa falecom@fernandobf.comLicença: http://www.fernandobf.com
  2. 2. Muito prazer, eu mesmo! Formação  Pós-graduando em Ergodesign de Interfaces: Usabilidade e Arquitetura de Informação pela PUC/RJ;  Graduado em História pela UVA; Atividades recentes  Responsável pela implementação dos módulos de ‘HTML5’, ‘CSS3’ e ‘jQuery para Designers’ nos cursos de Extensão do Instituto Infnet;  Consultoria para estratégias de acessibilidade da intranet dos jogos olímpicos Rio 2016™;  Integrante do Grupo de Trabalho de Acessibilidade Web, do W3C;  Co-autor do artigo científico “Avaliação de usabilidade do jornalismo para tablets: interações por gestos em um aplicativo de notícias”.// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  3. 3. Esta palestra é dedicada a Aaron Swarts. ...Tudo o que você aprende é provisório, tudo é aberto ao questionamento e à refutação... Aaron Swarts, in memorian ( 1986 -  2013)// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  4. 4. 1Introdução ao HTML5 e um novo mundo de oportunidades
  5. 5. Introdução ao HTML5 e um novo mundo de oportunidades Breve cronologia da evolução do HTML/XHTML 1989 – Nascimento da Web 1991 – HTML 1993 – HTML+ 1994 – HTML 2.0 / W3C 1995 – HTML 3.0 1997 – HTML 3.2 / HTML 4.0 1999 – HTML 4.01 2000 – XHTML 1.0 2001 – XHTML 1.1// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  6. 6. Introdução ao HTML5 e um novo mundo de oportunidades Breve cronologia da evolução do HTML/XHTML (cont.) 2004 – WHAT WG 2007 – O W3C reconhece os trabalhos do WHAT WG 2009 – O GT do XHTML 2.0 é descontinuado 2010 – Início da adoção do HTML5// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  7. 7. Introdução ao HTML5 e um novo mundo de oportunidades  A construção da World Wide Web foi criada como uma plataforma aberta, única e universal;  Desde o início da Web, as linguagens de marcação têm evoluído constantemente;  Essa evolução têm sido motivada por uma série de princípios, que buscam levar a Web ao seu potencial máximo!  Embora a acessibilidade seja (ou deveria ser) inerente à própria Web...// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  8. 8. Introdução ao HTML5 e um novo mundo de oportunidades Nem todos foram convidados para essa festa.. :-(// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  9. 9. Introdução ao HTML5 e um novo mundo de oportunidades  Assim, a quinta versão do HTML fora criada como uma forma de “quebrar” ainda mais as barreiras de comunicação;  Pensada para permitir o acesso ao conteúdo por parte de qualquer pessoa, independente do dispositivo, conexão, condição ou necessidade;  Exibição do filme ‘HTML5 - Uma web para todos’, do NIC.br / W3C Brasil.// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  10. 10. Bem-vindos (as) à nova geração da Web! Exemplos: http://goo.gl/isDjx http://goo.gl/52lAr http://goo.gl/tsZQE http://goo.gl/7r8p http://goo.gl/upxI http://goo.gl/jEALR// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  11. 11. 2Princípios de desenvolvimento do HTML5
  12. 12. Princípios de desenvolvimento do HTML5 O Grupo de Trabalho do HTML, do W3C, publicou, em 26 de novembro de 2007, um conjunto de diretrizes que iriam guiar o desenvolvimento da quinta versão do HTML.  Compatibilidade;  Utilidade;  Interoperabilidade;  Acesso universal.// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  13. 13. Princípios de desenvolvimento do HTML5 Compatibilidade  Suporte para conteúdos existentes;  Degradação graciosa (graceful degradation);  Não reinventar a roda;  Pavimentar os caminhos existentes;  Evolução em lugar de revolução.// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  14. 14. Princípios de desenvolvimento do HTML5 Utilidade  Solucionar problemas reais;  Prioridades;  Segurança;  Separação de camadas;  Consistência do DOM (Document Object Model).// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  15. 15. Princípios de desenvolvimento do HTML5 Interoperabilidade  Comportamentos definidos;  Evitar soluções complexas;  Tratamento de erros.// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  16. 16. Princípios de desenvolvimento do HTML5 Acesso universal  Independência de mídia;  Suporte multilíngua;  Acessibilidade.// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  17. 17. 3Estruturas semânticas no HTML5: as divisões ganham significado
  18. 18. Estruturas semânticas no HTML5: as divisões ganham significado A palavra ‘Semântica’ reporta-se fundamentalmente ao verbo grego semaíno, cujo o valor é significar, seria, pois, a ciência das significações. Célia Maria Paula de Barros (UCB)// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  19. 19. Estruturas semânticas no HTML5: as divisões ganham significado Em um mundo visual, tudo pode parecer mais bonito e legível. As ‘partes’, que compõem a diagramação, os espaçamentos, as fontes e as cores, por exemplo, nos ajudam a compreender e dar sentido ao ‘todo’.// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  20. 20. Estruturas semânticas no HTML5: as divisões ganham significado Porém, no mundo da Web, as coisas são bem diferentes. Existem mecanismos que não enxergam o mesmo que nós e, muito menos, entendem a linguagem humana. Esses mecanismos apenas interpretam códigos.// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  21. 21. Estruturas semânticas no HTML5: as divisões ganham significado Como era:// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  22. 22. Estruturas semânticas no HTML5: as divisões ganham significado Como é:// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  23. 23. Estruturas semânticas no HTML5: as divisões ganham significado O HTML5 trouxe novos elementos, e muitos destes são de uso estrutural com mais significado e que permitem um código mais limpo e acessível. Como os usaremos constantemente para implementarmos nossos layouts, os veremos com mais detalhes:  header;  nav;  aside;  main;  section;  article;  footer.// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  24. 24. Estruturas semânticas no HTML5: as divisões ganham significado O elemento <header>:  O elemento <header> é utilizado para marcar um cabeçalho de uma seção ou documento. Ou seja, podemos utilizar quantos <header> for necessário em uma mesma página;  Não cria uma nova seção, apenas faz parte de uma;  É utilizado para representar um grupo de introdução como, por exemplo, informações sobre o conteúdo associado, índices, campos de busca e logos.// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  25. 25. Estruturas semânticas no HTML5: as divisões ganham significado O elemento <nav>:  Representa uma seção de navegação;  O elemento <nav> contém links para outras páginas ou partes do mesmo projeto;  Nem todos os agrupamentos de links são candidatos a serem marcados com o elemento <nav>, mas apenas as seções que consistem em blocos principais.// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  26. 26. Estruturas semânticas no HTML5: as divisões ganham significado O elemento <aside>:  Pode estar, ou não, representado como uma barra lateral do site;  Quando usado dentro de um elemento <article>, o <aside> está diretamente relacionado com o conteúdo deste elemento. Se fora, estará relacionado com o conteúdo global do documento;  Em sua essência, o elemento <aside> busca agregar mais informação ao conteúdo relacionado, podendo conter citações ou sidebars, agrupamento de publicidade, grupos e blocos de navegação...  Como dica de uso, podemos indicá-lo como aquele que, embora relacionado, é independente ao ponto de prejudicá-lo caso retirado.// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  27. 27. Estruturas semânticas no HTML5: as divisões ganham significado O elemento <main>:  Este elemento marca o conteúdo principal de uma página Web ou aplicativo;  O uso do elemento <main> é limitado, devendo ser aplicado uma única vez em cada documento;  Não pode ser usado como filho dos elementos <header>, <nav>, <article>, <aside> e <footer>; Por ser um elemento ainda muito recente, recomenda-se o uso da ARIA role=“main”, como mostrado no exemplo, até os user agents o implementarem por completo: <main role=“main”> <!-- Conteúdo --> </main>// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  28. 28. Estruturas semânticas no HTML5: as divisões ganham significado O elemento <section>:  Dos novos elementos, o <section> é o que apresenta o uso mais genérico;  Seu emprego assemelha-se ao uso das <div>, que no HTML5 perderam relevância;  Comumente usaremos este elemento relacionado a estrutura do conteúdo;  Na prática, serve para marcar seções de uma página. Entende-se como seção um conjunto de conteúdo abordando o mesmo tema.// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  29. 29. Estruturas semânticas no HTML5: as divisões ganham significado O elemento <article>:  O elemento <article> representa um conteúdo mais específico do que o <section> e a <div>;  Podemos defini-lo como uma área que agrega um conteúdo independente e autossuficiente de uma página Web ou aplicação;  O conteúdo contido neste elemento pode ser reutilizado de forma separada, independente do contexto no qual foi inserido.// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  30. 30. Estruturas semânticas no HTML5: as divisões ganham significado O elemento <footer>:  Comumente usado para representar a última grande área estrutural de uma página;  Contudo, o HTML5 mudou o conceito do seu uso e e elemento <footer> poderá aparecer também diversas vezes em um mesmo documento como, por exemplo, representando o rodapé de uma seção;  Não cria uma nova seção, apenas faz parte de uma;// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  31. 31. 4Multimídia no HTML5: áudio e vídeo
  32. 32. Multimídia no HTML5: áudio e vídeo  Historicamente, o emprego de elementos multimídia na Web, como áudio e vídeo, sempre foram dependentes de plug-ins e tecnologias proprietárias que criavam uma barreira para os usuários;  Nem sempre a implementação destes elementos foi uma tarefa simples para os desenvolvedores;  Além dos custos, muitas vezes era necessário a participação de outro profissional para executar a tarefa de compilação/conversão. Telas de aviso exigindo a instalação ou falta dos plug-ins do QuickTime, Flash e Silverlight, respectivamente.// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  33. 33. Multimídia no HTML5: áudio e vídeo A fim de quebrar essas barreiras, o HTML5 propôs a criação dos elementos <audio> e <video>. Uma forma simples, direta e universal de trabalharmos com multimídia. Afinal, a Web é para todos...// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  34. 34. Multimídia no HTML5: áudio e vídeo O elemento <audio>:  Destina-se a incorporar um som no documento; <audio src=“som.mp3” autoplay loop preload=“auto” controls></audio>  Aceita como elemento-filho o <source>, que permite oferecer conteúdo alternativo. <audio autoplay loop preload=“auto” controls> <source src=“som.ogg” type=“audio/ogg”> <source src=“som.mp3” type=“audio/mpeg”> <!-– Código (X)HTML para inserção do do som em Flash --> <p>Faça o download do som <a href=“#”>aqui</a>.</p> </audio> Fonte: http://caniuse.com// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  35. 35. Multimídia no HTML5: áudio e vídeo O elemento <video>:  Destina-se a incorporar um vídeo no documento; <video src=“video.ogv” autoplay loop preload poster audio width height controls ></video>  Aceita como elemento-filho o <source>, que permite oferecer conteúdo alternativo. <video autoplay loop preload poster audio width height controls> <source src=“video.ogv” type=“video/ogg”> <source src=“video.mp4” type=“video/mp4”> <source src=“video.webm” type=“video/webm”> <!-– Código (X)HTML para inserção do do som em Flash --> <p>Faça o download do som <a href=“#”>aqui</a>.</p> </video> Fonte: http://caniuse.com// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  36. 36. 5Formulários no HTML5: novos atributos
  37. 37. Formulários no HTML5: novos atributos  Formulários são, talvez, o mais antigo e importante mecanismo de interação entre um sistema e o usuário;  São responsáveis por permitir a entrada de dados que posteriormente serão processados no lado do servidor;  Aceitam não só apenas textos, mas também marcações e comandos de HTML e scripts;  Com isso, faz-se necessário o tratamento e verificação desses dados inseridos, tanto no lado do cliente (client-side) quanto no lado do servidor (server-side);// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  38. 38. Formulários no HTML5: novos atributos  Antes do HTML5, a validação client-side dava-se através de rotinas criadas com javascript, porém este solução não é tão segura; Print da aba Conteúdo do Firefox, disponível em Ferramentas > Opções  A quinta versão da linguagem HTML introduziu novos atributos que apresentam um conceito inovador, prático e eficiente de validação desses campos;  Estes novos atributos permitem uma validação nativa, apresentando mensagens de erros automaticamente e dispensando a necessidade de scripts;  Os atributos a serem mostrados aqui serão: placeholder, autofocus, required, autocomplete, max e min.// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  39. 39. Formulários no HTML5: novos atributos O atributo placeholder  De uso exclusivo com os elementos <input> e <textarea>;  Destina-se a inserir no campo com uma pré-dica ou orientação no elemento, que será retirado quando o usuário preencher o campo com algum valor. <input type="text" name="mail" placeholder="email@exemplo.com.br"> Fonte: http://caniuse.com// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  40. 40. Formulários no HTML5: novos atributos O atributo autofocus  De uso exclusivo com os elementos <button>, <keygen>, <input>, <select> e <textarea>;  É um atributo booleano e destina-se a definir qual elemento ganhará foco logo a página ser carregada;  Seu uso deve ser único em cada página. <input type="text" name="nome" autofocus> Fonte: http://www.techrepublic.com/blog// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  41. 41. Formulários no HTML5: novos atributos O atributo required  De uso exclusivo com os elementos <input>, <select> e <textarea>;  É um atributo booleano que define o preenchimento de um item do formulário como obrigatório. <input type="text" id="nome" required> Fonte: http://caniuse.com// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  42. 42. Formulários no HTML5: novos atributos O atributo autocomplete  De uso exclusivo com os elementos <input> e <form>;  Este atributo busca padronizar este tipo de comportamento;  Este atributo aceita como valores on e off;  Quando on, o elemento, ao ganhar foco, mostra uma lista de opões baseado no que já fora digitado anteriormente;  Quando off, é desabilitada esta função. <input type="text" id="nome" autocomplete=off> Fonte: http://www.wufoo.com/html5/// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  43. 43. Formulários no HTML5: novos atributos Os atributos max e min  De uso exclusivo com os elementos <meter>, <progress> e <input>;  O atributo max define um valor máximo a ser inserido dentro de um intervalo conhecido;  O atributo min define um valor mínimo a ser inserido dentro de um intervalo conhecido; <input id="year" required type="number" min="2010" max="2019" value="2010"> Fonte: http://www.wufoo.com/html5/// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  44. 44. Fechamento Bibliografia e fontes de consulta/referência  Livro HTML5 – A linguagem de marcação que revolucionou a Web de Maurício Samy ‘Maujor’ Silva, Editora Novatec.  Tableless – Desenvolvimento inteligente com padrões web  W3C – World Wide Web Consortium  WHAT WG – Web Hypertext Application Technology Working Group// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  45. 45. Fechamento Perguntas?// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  46. 46. Muito obrigado! ;-) Site: fernandobf.com Blog: fernandobf.com/blog Baixe os arquivos em: http://goo.gl/CLOv9// Palestra | 28.01.2013 – Instituto Infnet, Rio de Janeiro / RJ Fernando Bravo FigueroaAcessibilidade Web: o HTML5 a favor de uma Web única e universal http://fernandobf.com | falecom@fernandobf.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×