HTML5 O Futuro da Web Multimídia sem limites Senac Santo André 05 de outubro de 2011 Reinaldo Ferraz W3C.br

Transcrição

1 HTML5 O Futuro da Web Multimídia sem limites Senac Santo André 05 de outubro de 2011 Reinaldo Ferraz W3C.br

2 Um pouco do W3C É um consórcio internacional, que conta com: organizações filiadas, uma equipe em tempo integral, participação do público para colaborativamente desenvolver padrões universais para a Web.

3 O W3C no Brasil O escritório brasileiro começou suas atividades em outubro de É uma iniciativa do CGI.br, que é o responsável por coordenar e integrar as iniciativas de serviços da Internet no País e do NIC.br, criado para implementar as decisões e os projetos do Comitê Gestor da Internet no Brasil.

4 Web e W3C 4 Tim Berners-Lee criou / propôs a Web em 1989 (há 22 anos) (URI + HTTP + HTML)

5 Web e W3C

6 Web e W3C 6 Tim Berners-Lee criou / propôs a Web em 1989 (há 22 anos) (URI + HTTP + HTML) o W3C em 1994 (há17 anos) 01/10/1994 no MIT, Laboratório de Ciência da Computação

7 Web e W3C

8 Web e W3C

9 Web e W3C 9 Tim Berners-Lee criou / propôs a Web em 1989 (há 22 anos) (URI + HTTP + HTML) o W3C em 1994 (há17 anos) 01/10/1994 no MIT, Laboratório de Ciência da Computação Web Semântica 1a. Conferência Internacional WWW 25 a 27/05/ ª Conferência Rio de Janeiro

10 Web e W3C

11 Web e W3C

12 Missão do W3C 12 Conduzir a World Wide Web para que atinja todo seu potencial, desenvolvendo protocolos e diretrizes que garantam seu crescimento de longo prazo.

13 O W3C desenvolve padrões 13 Conduzir a World Wide Web para que atinja todo seu potencial, desenvolvendo protocolos e diretrizes que garantam seu crescimento de longo prazo. Desde sua fundação, o W3C publicou mais de uma centena de padrões, denominados Recomendações do W3C Web Standards Padrões Web

14 Metas W3C 14 Web para todos Tornar os benefícios da web (seu valor social: comunicação humana, comércio, compartilhar conhecimentos) disponíveis a todos, independente de Hardware Software Infraestrutura de rede Idioma Cultura Localização geográfica Habilidade física Habilidade mental

15 Metas W3C 15 Web para todos Web em qualquer dispositivo

16 Metas W3C 16 Web em qualquer dispositivo Possibilitar que o acesso de qualquer tipo de dispositivo seja tão simples, fácil e conveniente quanto de um computador convencional Computadores Desktops Netbooks Telefones PDAs TV digital Sistemas de interação por voz Aparelhos domésticos web ubíqua

17 Metas W3C 17 Web base de conhecimento Não apenas um grande livro hiperlinkado onde pessoas possam pesquisar, navegar, visualizar e ler informações Possibilitar que computadores interpretem, estabeleçam inferências e relações na web Interoperabilidade Web Semântica

18 Metas W3C 18 Web para todos Web em qualquer dispositivo Web base de conhecimento Web confiável e segura

19 Metas W3C 19 Web confiável e segura Uma web em que as transações sociais e comunicações com terceiros sejam estabelecidas em relações de confiança, por pessoas, organizações ou serviços Ambiente mas colaborativo responsável seguro Confiança e Confidência

20 Futuro da Web 20 Web Browsers Motores de busca HTTP HTML HTML HTML HTML hyper links hyper links hyper links A B C D

21 Futuro da Web 21 Web browsers dados linkados Motores de busca Mashups de dados linkados HTTP HTTP RDF + HTML5 dados dados dados dados dados dados dados dados dados dados URI link de dados link de dados link de dados link de dados A B C D E

22 Futuro da Web 22 WEB 2001

23 Futuro da Web 23 WEB 2011

24 Futuro da Web - HTML5 24

25 Acessibilidade na web HTML4 XHTML HTML5

26 Futuro da Web - HTML5 26 HTML 5 [HyperText Markup Language] 1991 html tag Tim Berners Lee 1994 HTML 2 - já incluia tag <img> 1997 HTML HTML XHTML XHTML 1.1 CSS Ian Hickson (Opera) propõe estender HTML: Web Forms 2.0, Web Apps Apple, Mozilla e Opera criam WHAT WG (Web Hypertext Application Technology Working Group) 2007 W3C retorna HTML Working Group 2009 W3C descontinua XHTML Apple, Google, Microsoft, Mozilla e Opera implementam HTML5

27 Futuro da Web - HTML5

28 Futuro da Web - HTML5

29 Futuro da Web - HTML5

30 Futuro da Web - HTML5 30 HTML 5 [HyperText Markup Language] Maio/2011 Last Call Processo W3C padronização : Working Draft (Rascunho de Trabalho) Last Call Candidate Recommendation (Candidato a Recomendação): Chamada para implementação Proposed Recommendation (Proposta de Recomendação): Chamada para revisão de proposta de recomendação W3C Recommendation (Recomendação W3C): Publicação da recomendação

31 Futuro da Web HTML 5 31 HTML 5 [HyperText Markup Language]

32 Futuro da Web - HTML5 32 DOCTYPE

33 Futuro da Web - HTML5 33 Doctype: HTML4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

34 Futuro da Web - HTML5 34 <!DOCTYPE html!>

35 Acessibilidade na web Formulários

36 Futuro da Web - HTML5

37 Futuro da Web - HTML5 Novidades nos formulários <form> <label> Nome <input type="text" name="nome" placeholder="digite seu nome" required /> </label> <label> <input type= " name=" " placeholder="digite seu " required /> </label> Website <input type="url" name="website" required /> </label> <label> Escolha a cor <input type="color" name= color" /> </label> <label> Data de destino <input type="datetime" name= date" /> </label> <input type="submit"> </form>

38 Futuro da Web - HTML5 Speech

39 Futuro da Web - HTML5 TABELAS

40 Futuro da Web - HTML5 As tabelas não devem ser utilizadas como auxiliares de layout. Historicamente, alguns autores têm abusado das tabelas em HTML, como forma de controlar o seu layout de página. Esse uso não é recomendado, porque as ferramentas que tentam extrair os dados tabulares de tais documentos obtém resultados confusos. Em particular, os usuários de ferramentas de acessibilidade, como leitores de tela podem achar muito difícil de navegar em páginas com tabelas usadas para layout.

41 Futuro da Web - HTML5 Não utilize tabelas para layout Elas não foram feitas para isso.

42 Vídeo em HTML5 Video

43 Futuro da Web - HTML5 43 HTML 5 [HyperText Markup Language] VíDEO <video id='videoresource' style='border: black 1px solid; margin-left: 4px; margin-top: 4px; margin-bottom: 0px;' poster='/2009/04/coffee.png'> <source src=" type="video/mp4"/> <source src=" type="video/ogg"/> <text lang='en' type="application/ttaf+xml" src="/2009/02/thisiscoffee61_captions.xml"> </text> <div style='width: 320px; height: 240px; color: white'><p>no Video Support.</p> </div> </video>

44 Futuro da Web - HTML5 44 HTML 5 [HyperText Markup Language]

45 Futuro da Web - HTML5 45 HTML 5 [HyperText Markup Language] <canvas>

46 Futuro da Web - HTML5 46 HTML 5 [HyperText Markup Language] <canvas>

47 Futuro da Web - HTML5 47 HTML 5 [HyperText Markup Language] <canvas>

48 Futuro da Web - HTML5 Canvas <canvas id="theapt" width="100" height="100"> <div class="warning"> <p>diese Seite wurde mit Hilfe der neuesten HTML 5- Technik programmiert und lässt sich daher nur auf neueren Browser-Versionen ansehen. Browser, die dieses Feature unterstützen sind z.b. <a href=" 3.5</a>, <a href=" <a href=" or <a href=" Sie können sich diese Browser kostenlos herunterladen.</p> </div> </canvas>

49 Futuro da Web - HTML5 49 HTML 5 [HyperText Markup Language] <svg>

50 Futuro da Web - HTML5 Semântica Os novos elementos

51 Futuro da Web - HTML5 51 HTML 5 [HyperText Markup Language] Novos elementos <article> <section> <header> & <footer> <hgroup> (agrupamento <h1> <h2> ) <aside> <figure> e <figcaption> Lista completa:

52 Futuro da Web - HTML5 52 HTML 5 [HyperText Markup Language] HTML4 + CSS

53 Futuro da Web - HTML5 53 HTML 5 [HyperText Markup Language] Novos elementos (semânticos) HTML5 + CSS

54 Futuro da Web - HTML5 E o que ficou de fora do HTML5?

55 Futuro da Web - HTML5 abbr, align, allowtransparency, archive, background, bgcolor, border, cellspacing, classid, clear, code, codetype, color, compact, frameborder, height, hspace, link, marginbottom, marginheight, marginleft, marginright, margintop, marginwidth, noshade, nowrap, profile, rev, rules, scheme, scrolling, size, standby, target, text, urn, valign, valuetype, version, vlink, vspace, width

56 Futuro da Web - HTML5 abbr, align, allowtransparency, archive, background, bgcolor, border, cellspacing, classid, clear, code, codetype, color, compact, frameborder, height, hspace, link, marginbottom, marginheight, marginleft, marginright, margintop, marginwidth, noshade, nowrap, profile, rev, rules, scheme, scrolling, size, standby, target, text, urn, valign, valuetype, version, vlink, vspace, width

57 Futuro da Web - HTML5 57 HTML 5 [HyperText Markup Language]

58 Futuro da Web 58

59 Futuro da Web 59 Conectividade CSS3 Acesso de dispositivos Gráficos 3D e Efeitos Multimídia Performance e Integração Semântica Offline e Armazenamento

60 60 W3C Escritório Brasil Av. das Nações Unidas, , 7º andar São Paulo, SP - Brasil CEP Telefone (11) Vagner Diniz, vagner@nic.br Carlinhos Cecconi, carlinhos@nic.br Reinaldo Ferraz, reinaldo@nic.br