Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network

Share

Introdução a HTML5

on

  • 5,054 views

 

Statistics

Views

Total Views
5,054
Views on SlideShare
5,045
Embed Views
9

Actions

Likes
6
Downloads
271
Comments
0

2 Embeds 9

http://localhost 5
http://www.edmodo.com 4

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introdução a HTML5 Presentation Transcript

  • 1. INTRODUÇÃO A HTML5
    Salvador Torres
    @ssatorres
  • 2. HTML
    • HTML = Hypertext Markup Language (Linguagem de Marcação de Hipertexo);
    • 3. Linguagem Interpretada por um Browser;
    • 4. Define o formato do documento e as ligações com outros documentos;
  • HTML
    • Desenvolvido originalmente por Tim Berners-Lee;
    • 5. Entre 1993 e 1995, o HTML ganhou as versões HTML+, HTML2.0 e HTML3.0;
    • 6. Ainda não era um padrão;
  • HTML
    • Em 1997 o W3C criou a versão 3.2;
    • 7. A partir daí HTML se tornou um padrão;
    • 8. Em 1999 saiu a especificação do HTML4.
  • HTML
    • Tags básicas:
    • 9. <a></a>;
    • 10. <p></p>;
    • 11. <img/>;
    • 12. <div></div>
    • 13. <table></table>
    • 14. <iframe></iframe>
    • 15. <br/>
  • HTML
    • Trocando em miúdos:
    • 16. “O HTML é uma linguagem para publicação de conteúdo na Web (texto, imagem, vídeo, áudio, etc.)”.
  • W3C
  • 17. W3C
    • World Wide Web Consortium;
    • 18. Fundado por Tim Berners-Lee;
    • 19. Visa levar a Web ao seu potencial máximo;
    • 20. Fóruns abertos que promovam a sua evolução e assegurem a sua interoperabilidade.
  • W3C
    • Padrões:
    • 21. CSS
    • 22. DOM(JavaScript)
    • 23. XML
    • 24. XHTML 1.0
  • HTML5
  • 25. HTML5
    • É a nova versão do HTML4;
    • 26. Necessidade de criar elementos semânticos;
    • 27. Ainda está em testes e a versão final é prometida para 2012;
  • HTML5
    • Cria novas tags e muda a função de outras;
    • 28. Padrão para criação de sessões comuns como rodapé, cabeçalho, sidebar e menus.
  • HTML5
    • Muda a forma de escrever código e organizar a informação:
    • 29. Mais semântica e menos código;
    • 30. Mais interatividade sem plugins e perda de performance;
    • 31. Código interoperável, pronto para futuros dispositivos;
    • 32. Facilita a reutilização da informação de diversas formas.
  • HTML5 vs XHTML2
  • 33. HTML5 vs XHTML2
    • WHATWG vs W3C;
    • 34. WHATWG (Mozilla, Apple e Opera em 2004);
    • 35. W3C -> XHTML2;
    • 36. WHATWG -> HTML5
    • 37. Mais flexibilidade;
    • 38. Integrar Web Forms 2.0 e abandonar o Web Controls 1.0;
    • 39. Retrocompatibilidade.
  • HTML5 vs XHTML2
    • Em 2006 a W3C reconheceu as vantagens do HTML5;
    • 40. W3C e WHATWG passaram a trabalhar em conjunto;
  • Conhecendo HTML5
  • 41. Novos Recursos
    • Controle embutido de conteúdo multimídia (Áudio e Vídeo);
    • 42. Desenvolvimento de gráficos bidimensionais;
    • 43. Aprimoramento do uso off-line;
    • 44. Geolocalização;
    • 45. Validação de Formulários nativa;
    • 46. DragandDrop.
  • Estrutura Básica
    • XHTML
  • Estrutura Básica
    • HTML5
    • 47. O atributo LANG não é restrito ao elemento HTML, ele pode ser utilizado em qualquer outro elemento para indicar o idioma do texto representado.
  • Estrutura Interna
    • XHTML
  • Estrutura Interna
    • HTML5
  • Novos Elementos
    • <section>
    • 48.  define uma nova seção genérica no documento (introdução ou destaque, novidades, etc.);
    • 49. <nav>
    • 50. seção da página que contém links (importantes) para outras partes do website;
  • Novos Elementos
    • <article>
    • 51. parte da página que poderá ser distribuída e reutilizada em FEEDs por exemplo (post, artigo, um bloco de comentários de usuários, etc.);
    • 52. <aside>
    • 53. define uma área de conteúdo relacionado ao seu conteúdo principal (sidebars em textos impressos, publicidade, etc.);
  • Novos Elementos
    • <hgroup>
    • 54. agrupar elementos de título de H1 até H6 quando eles tem múltiplos níveis de títulos;
    • 55. <time>
    • 56. marcar parte do texto que exibe um horário ou uma data;
  • Novos Elementos
    • <header>
    • 57. grupo de introdução ou elementos de navegação (índices de conteúdos, campos de busca ou até mesmo logomarcas);
    • 58. <footer>
    • 59. representa literalmente o rodapé da página.
  • Novos Elementos
    • Os novos elementos possibilitaram uma nitidez maior no código;
    • 60. É possível diferenciar diretamente pelo código HTML5 áreas importantes do site como sidebar, rodapé e cabeçalho;
  • Novos Elementos
    • Os buscadores conseguem vasculhar o código de maneira mais eficaz;
    • 61. Guardando informações mais exatas e levando menos tempo para estocar essa informação.
  • Elementos removidos
    • <frame>
    • 62. Fere princípios de acessibilidade;
    • 63. <basefont>,<big>,<center>,<font>,<s>,<strike>,<tt>,<u>
    • 64. Efeito somente visual;
  • Elementos Alterados
    • <address>
    • 65. agora é tratado como uma seção no documento;
    • 66. <hr>
    • 67. mesmo nível que um parágrafo;
    • 68. <strong>
    • 69. ganhou mais importância.
  • Web Semântica
  • 70. Suporte dos Browsers
    • http://html5test.com/
  • Suporte dos Browsers
  • 71. Formulários
    • <input />
    • 72. Novos valores para type
    • 73. tel (sem formatação ou mascara);
    • 74. search (mudar a aparência para parecer com os demais do sistema);
    • 75. email (validação do email podendo ainda integrar com a agenda de contatos);
    • 76. url (formatação e validação de endereços web);
  • Formulários
    • <input />
    • 77. Novos valores para type
    • 78. Datas e horas (calendário, um seletor de horário ou outro auxílio ao preenchimento);
    • 79. Number (aceita somente numeros);
    • 80. range (valores numéricos porém com uma barra de seleção);
    • 81. color (paleta de cores com resultado #000FFF)
  • Formulários
    • Mais recursos
    • 82. autofocus
    • 83. o foco será colocado neste campo automaticamente ao carregar a página;
    • 84. <input name="login" autofocus/>
    • 85. Placeholdertext
    • 86. texto padrão do campo antes do foco ir para ele;
    • 87. <input name="q" placeholder="Pesquisa"/>
  • Formulários
    • Mais recursos
    • 88. required
    • 89. transformar o campo em obrigatório;
    • 90. <input name="login" required/>
    • 91. maxlength
    • 92. o atributo agora também está disponível no textarea;
  • Formulários
    • Mais recursos
    • 93. Customvalidators
    • 94. definir expressões regulares de validação, sem Javascript;
    • 95. <input name="cpf" oninput="vCPF(this)"/>
    • 96. contenteditable
    • 97. tornar um elemento do HTML editável.
    • 98. <div contenteditable="true">
    Edite-me...
    </div>
    http://html5demos.com/contenteditable
  • 99. Formulários
    • Mais recursos
    • 100. pattern
    • 101. definir expressões regulares de validação, sem Javascript;
    • 102. <input name="CEP" id="CEP" required pattern="d{5}-?d{3}" />
  • Formulários
    • Todos os recursos:
    • 103. http://slides.html5rocks.com/#slide21
  • API Storage
    • Um dos grandes desafios de usabilidade é criar uma navegação consistente
    • 104. ações locais do usuário numa página fossem refletidas na próxima.(Menu em árvore);
    • 105. histórico com o uso de Ajax.
  • API Storage
    • Soluções:
    • 106. Histórico de Sessão
    • 107. elemento history;
    • 108. localStorage e sessionStorage
    • 109. Antes
    • 110. Cookies (Interface complexa e Limite de armazenamento);
    • 111. Agora
    • 112. localStorage(armazena os dados no client sem expiração definida) ;
    • 113. sessionStorage(armazena os dados durante a sessão atual de navegação).
  • API Storage
    • Exemplo
    • 114. http://slides.html5rocks.com/#slide7
  • Drag and Drop
    • Exemplo
    • 115. http://slides.html5rocks.com/#slide13
  • Midias com HTML5
    • Áudio
    • 116. <audiocontrols="true" autoplay="true">
    <source src="mus.oga" />
    <source src="mus.mp3" />
    <source src="mus.wma" />
    <p>Faça o <a href="mus.mp3">download da música</a>.</p>
    </audio>
    • O valor de controls define se um controle de áudio, com botões de play, pause, volume, barra de progresso, contador de tempo, etc. será exibido na tela;
    • 117. O estilo dos botões é definido pelo browser.
  • Midias com HTML5
    • Vídeo
    • 118. <videocontrols="true" autoplay="true" width="400“ height="300">
    <source src="u.ogv" />
    <source src="u.mp4" />
    <source src="u.wmv" />
    <p>Faça o <a href="u.mp4">download do vídeo</a>.</p>
    </video>
  • 119. Midias com HTML5
    • Youtube (http://youtube.com/html5)
  • Midias com HTML5
    • Sublime http://sublimevideo.net/demo)
  • Midias com HTML5
    • Exemplo
    • 120. http://slides.html5rocks.com/#slide22
  • Midias com HTML5
    • Elemento device
    • 121. Webcam
    • 122. <devicetype="media">
    • 123. interface solicitando ao usuário acesso a sua webcam. Se ele tiver mais de uma, também será permitido que ele escolha que webcam usar;
    • 124. Stream
    • 125. basta trocar o valor “media” por “fs”.
  • Canvas
    • A Canvas API permite a você desenhar na tela do navegador via Javascript. O único elemento HTML existente para isso é o elemento canvas, o resto todo é feito via Javascript. 
    • 126. <canvas id="x" width="300" height="300"></canvas>
  • Canvas
    • Com a tagcanvas é possível criar gráficos, games, aplicações web, etc.
  • Canvas
    • Exemplos
    • 127. http://mugtug.com/sketchpad/
    • 128. http://media.chikuyonok.ru/ambilight/
    • 129. http://html5demos.com/canvas-grad
    • 130. http://slides.html5rocks.com/#slide23
  • SVG
    • SVG é uma linguagem para marcação de gráficos vetoriais.  
    • 131. Retângulo
    • 132. <rect x="10" y="10" width="150" height="50" stroke="#000" stroke-width="5" fill="#FF0000" />
    • 133. Circulo
    • 134. <circle cx="70" cy="240" r="60" stroke="#00FF00" stroke-width="5" fill="#FFFFFF" />
  • SVG
    • Exemplos
    • 135. http://slides.html5rocks.com/#slide26
    • 136. http://slides.html5rocks.com/#slide27
  • SVG
    • Logomarca da Wikipedia
  • Geolocation
    • Há três maneiras populares programa descobrir sua posição global:
    • 137. Geolocalização IP
    • 138. É o método usado pela maioria dos navegadores web em computadores. Através de consultas whois e serviços de localização de IP, vai determinar a cidade ou região em que você está.
    • 139. Triangulação GPRS
    • 140. Dispositivos conectados a uma rede de celulares podem determinar sua posição pela triangulação das antenas GPRS próximas. É bem mais preciso que o método baseado em IP, vai mostrar em que parte do bairro você está.
    • 141. GPS
    • 142. É o método mais preciso. Em condições ideais, a margem de erro é de apenas 5 metros.
  • Geolocation
    • navigator.geolocation.getCurrentPosition(showpos)
    • 143. Onde showpos é uma função callback, que vai receber um objeto de posicionamento. Veja um exemplo:
    • 144. functionshowpos(position){
    lat = position.coords.latitude
    lon = position.coords.longitude
    alert('Yourposition: '+lat+','+lon)
    }
  • 145. Geolocation
    • Exemplos
    • 146. http://html5demos.com/geo
    • 147. http://slides.html5rocks.com/#slide14
  • Sites interessantes
    • http://html5demos.com/
    • 148. http://html5-showcase.com/
    • 149. http://html5rocks.com/
  • Referências
    • http://xhtml.com/en/future/x-html-5-versus-xhtml-2/
    • 150. http://pt.wikipedia.org/wiki/HTML5
    • 151. http://w3c.br/cursos/html5/conteudo/