0
INTRODUÇÃO A HTML5
Salvador Torres
@ssatorres
HTML
HTML = Hypertext Markup
Language (Linguagem de Marcação
de Hipertexo);
Linguagem Interpretada por um
Browser;
Defi...
HTML
Desenvolvido originalmente por
Tim Berners-Lee;
Entre 1993 e 1995, o HTML ganhou
as versões HTML+, HTML2.0 e
HTML3....
HTML
Em 1997 o W3C criou a versão 3.2;
A partir daí HTML se tornou um
padrão;
Em 1999 saiu a especificação do
HTML4.
HTML
Tags básicas:
 <a></a>;
 <p></p>;
 <img/>;
 <div></div>
 <table></table>
 <iframe></iframe>
 <br/>
HTML
Trocando em miúdos:
“O HTML é uma linguagem para
publicação de conteúdo na Web
(texto, imagem, vídeo, áudio, etc.)”.
W3C
W3C
World Wide Web Consortium;
Fundado por Tim Berners-Lee;
Visa levar a Web ao seu potencial
máximo;
Fóruns abertos q...
W3C
Padrões:
CSS
DOM(JavaScript)
XML
XHTML 1.0
HTML5
HTML5
É a nova versão do HTML4;
Necessidade de criar elementos
semânticos;
Ainda está em testes e a versão
final é prom...
HTML5
Cria novas tags e muda a função de
outras;
Padrão para criação de sessões
comuns como rodapé, cabeçalho,
sidebar e...
HTML5
 Muda a forma de escrever código
e organizar a informação:
Mais semântica e menos código;
Mais interatividade sem...
HTML5 vs XHTML2
HTML5 vs XHTML2
WHATWG vs W3C;
WHATWG (Mozilla, Apple e Opera
em 2004);
W3C -> XHTML2;
WHATWG -> HTML5
Mais flexibili...
HTML5 vs XHTML2
Em 2006 a W3C reconheceu as
vantagens do HTML5;
W3C e WHATWG passaram a
trabalhar em conjunto;
Conhecendo HTML5
Novos Recursos
Controle embutido de conteúdo
multimídia (Áudio e Vídeo);
Desenvolvimento de gráficos
bidimensionais;
Ap...
Estrutura Básica
XHTML
Estrutura Básica
HTML5
 O atributo LANG não é restrito ao elemento HTML, ele
pode ser utilizado em qualquer outro elemen...
Estrutura Interna
XHTML
Estrutura Interna
HTML5
Novos Elementos
<section>
 define uma nova seção genérica no
documento (introdução ou destaque,
novidades, etc.);
<nav>...
Novos Elementos
<article>
parte da página que poderá ser
distribuída e reutilizada em FEEDs por
exemplo (post, artigo, u...
Novos Elementos
<hgroup>
agrupar elementos de título de H1
até H6 quando eles tem múltiplos
níveis de títulos;
<time>
...
Novos Elementos
<header>
grupo de introdução ou elementos de
navegação (índices de conteúdos,
campos de busca ou até mes...
Novos Elementos
Os novos elementos possibilitaram
uma nitidez maior no código;
É possível diferenciar diretamente
pelo c...
Novos Elementos
Os buscadores conseguem
vasculhar o código de maneira
mais eficaz;
Guardando informações mais
exatas e l...
Elementos removidos
<frame>
Fere princípios de acessibilidade;
<basefont>,<big>,<center>,<font>,
<s>,<strike>,<tt>,<u>
...
Elementos Alterados
<address>
agora é tratado como uma seção no
documento;
<hr>
mesmo nível que um parágrafo;
<strong...
Web Semântica
Suporte dos Browsers
http://html5test.com/
Suporte dos Browsers
Formulários
<input />
Novos valores para type
tel (sem formatação ou mascara);
search (mudar a aparência para parecer
...
Formulários
<input />
Novos valores para type
Datas e horas (calendário, um seletor de
horário ou outro auxílio ao
pree...
Formulários
Mais recursos
autofocus
o foco será colocado neste campo
automaticamente ao carregar a página;
 <input nam...
Formulários
Mais recursos
required
transformar o campo em obrigatório;
 <input name="login" required/>
maxlength
o a...
Formulários
Mais recursos
Custom validators
definir expressões regulares de
validação, sem Javascript;
 <input name="c...
Formulários
Mais recursos
pattern
definir expressões regulares de
validação, sem Javascript;
 <input name="CEP" id="CE...
Formulários
Todos os recursos:
 http://slides.html5rocks.com/#slide21
API Storage
 Um dos grandes desafios de usabilidade
é criar uma navegação consistente
ações locais do usuário numa págin...
API Storage
 Soluções:
Histórico de Sessão
elemento history;
localStorage e sessionStorage
Antes
 Cookies (Interface...
API Storage
Exemplo
 http://slides.html5rocks.com/#slide7
Drag and Drop
Exemplo
 http://slides.html5rocks.com/#slide13
Midias com HTML5
Áudio
 <audio controls="true" autoplay="true">
<source src="mus.oga" />
<source src="mus.mp3" />
<sourc...
Midias com HTML5
Vídeo
 <video controls="true" autoplay="true" width="400“ height="300">
<source src="u.ogv" />
<source ...
Midias com HTML5
Youtube (http://youtube.com/html5)
Midias com HTML5
 Sublime http://sublimevideo.net/demo)
Midias com HTML5
 Exemplo
 http://slides.html5rocks.com/#slide22
Midias com HTML5
Elemento device
Webcam
 <device type="media">
interface solicitando ao usuário acesso a sua
webcam. S...
Canvas
 A Canvas API permite a você desenhar na
tela do navegador via Javascript. O único
elemento HTML existente para is...
Canvas
 Com a tag canvas é possível criar gráficos,
games, aplicações web, etc.
Canvas
 Exemplos
http://mugtug.com/sketchpad/
http://media.chikuyonok.ru/ambilight/
http://html5demos.com/canvas-grad
...
SVG
 SVG é uma linguagem para marcação de
gráficos vetoriais.
Retângulo
 <rect x="10" y="10" width="150" height="50"
st...
SVG
 Exemplos
http://slides.html5rocks.com/#slide26
http://slides.html5rocks.com/#slide27
SVG
Logomarca da Wikipedia
Geolocation
 Há três maneiras populares programa descobrir sua posição global:
 Geolocalização IP
 É o método usado pel...
Geolocation
 navigator.geolocation.getCurrentPosition(showpos)
 Onde showpos é uma função callback, que vai receber um o...
Geolocation
 Exemplos
http://html5demos.com/geo
http://slides.html5rocks.com/#slide14
Sites interessantes
 http://html5demos.com/
 http://html5-showcase.com/
 http://html5rocks.com/
Referências
 http://xhtml.com/en/future/x-html-5-versus-xhtml-2/
 http://pt.wikipedia.org/wiki/HTML5
 http://w3c.br/cur...
Upcoming SlideShare
Loading in...5
×

Introdução a HTML5

4,861

Published on

Published in: Technology, News & Politics

Transcript of "Introdução a HTML5"

  1. 1. INTRODUÇÃO A HTML5 Salvador Torres @ssatorres
  2. 2. HTML HTML = Hypertext Markup Language (Linguagem de Marcação de Hipertexo); Linguagem Interpretada por um Browser; Define o formato do documento e as ligações com outros documentos;
  3. 3. HTML Desenvolvido originalmente por Tim Berners-Lee; Entre 1993 e 1995, o HTML ganhou as versões HTML+, HTML2.0 e HTML3.0; Ainda não era um padrão;
  4. 4. HTML Em 1997 o W3C criou a versão 3.2; A partir daí HTML se tornou um padrão; Em 1999 saiu a especificação do HTML4.
  5. 5. HTML Tags básicas:  <a></a>;  <p></p>;  <img/>;  <div></div>  <table></table>  <iframe></iframe>  <br/>
  6. 6. HTML Trocando em miúdos: “O HTML é uma linguagem para publicação de conteúdo na Web (texto, imagem, vídeo, áudio, etc.)”.
  7. 7. W3C
  8. 8. W3C World Wide Web Consortium; Fundado por Tim Berners-Lee; Visa levar a Web ao seu potencial máximo; Fóruns abertos que promovam a sua evolução e assegurem a sua interoperabilidade.
  9. 9. W3C Padrões: CSS DOM(JavaScript) XML XHTML 1.0
  10. 10. HTML5
  11. 11. HTML5 É a nova versão do HTML4; Necessidade de criar elementos semânticos; Ainda está em testes e a versão final é prometida para 2012;
  12. 12. HTML5 Cria novas tags e muda a função de outras; Padrão para criação de sessões comuns como rodapé, cabeçalho, sidebar e menus.
  13. 13. HTML5  Muda a forma de escrever código e organizar a informação: Mais semântica e menos código; Mais interatividade sem plugins e perda de performance; Código interoperável, pronto para futuros dispositivos; Facilita a reutilização da informação de diversas formas.
  14. 14. HTML5 vs XHTML2
  15. 15. HTML5 vs XHTML2 WHATWG vs W3C; WHATWG (Mozilla, Apple e Opera em 2004); W3C -> XHTML2; WHATWG -> HTML5 Mais flexibilidade; Integrar Web Forms 2.0 e abandonar o Web Controls 1.0; Retrocompatibilidade.
  16. 16. HTML5 vs XHTML2 Em 2006 a W3C reconheceu as vantagens do HTML5; W3C e WHATWG passaram a trabalhar em conjunto;
  17. 17. Conhecendo HTML5
  18. 18. Novos Recursos Controle embutido de conteúdo multimídia (Áudio e Vídeo); Desenvolvimento de gráficos bidimensionais; Aprimoramento do uso off-line; Geolocalização; Validação de Formulários nativa; Drag and Drop.
  19. 19. Estrutura Básica XHTML
  20. 20. Estrutura Básica HTML5  O atributo LANG não é restrito ao elemento HTML, ele pode ser utilizado em qualquer outro elemento para indicar o idioma do texto representado.
  21. 21. Estrutura Interna XHTML
  22. 22. Estrutura Interna HTML5
  23. 23. Novos Elementos <section>  define uma nova seção genérica no documento (introdução ou destaque, novidades, etc.); <nav> seção da página que contém links (importantes) para outras partes do website;
  24. 24. Novos Elementos <article> 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.); <aside> define uma área de conteúdo relacionado ao seu conteúdo principal (sidebars em textos impressos, publicidade, etc.);
  25. 25. Novos Elementos <hgroup> agrupar elementos de título de H1 até H6 quando eles tem múltiplos níveis de títulos; <time> marcar parte do texto que exibe um horário ou uma data;
  26. 26. Novos Elementos <header> grupo de introdução ou elementos de navegação (índices de conteúdos, campos de busca ou até mesmo logomarcas); <footer> representa literalmente o rodapé da página.
  27. 27. Novos Elementos Os novos elementos possibilitaram uma nitidez maior no código; É possível diferenciar diretamente pelo código HTML5 áreas importantes do site como sidebar, rodapé e cabeçalho;
  28. 28. Novos Elementos Os buscadores conseguem vasculhar o código de maneira mais eficaz; Guardando informações mais exatas e levando menos tempo para estocar essa informação.
  29. 29. Elementos removidos <frame> Fere princípios de acessibilidade; <basefont>,<big>,<center>,<font>, <s>,<strike>,<tt>,<u> Efeito somente visual;
  30. 30. Elementos Alterados <address> agora é tratado como uma seção no documento; <hr> mesmo nível que um parágrafo; <strong> ganhou mais importância.
  31. 31. Web Semântica
  32. 32. Suporte dos Browsers http://html5test.com/
  33. 33. Suporte dos Browsers
  34. 34. Formulários <input /> Novos valores para type tel (sem formatação ou mascara); search (mudar a aparência para parecer com os demais do sistema); email (validação do email podendo ainda integrar com a agenda de contatos); url (formatação e validação de endereços web);
  35. 35. Formulários <input /> Novos valores para type Datas e horas (calendário, um seletor de horário ou outro auxílio ao preenchimento); Number (aceita somente numeros); range (valores numéricos porém com uma barra de seleção); color (paleta de cores com resultado #000FFF)
  36. 36. Formulários Mais recursos autofocus o foco será colocado neste campo automaticamente ao carregar a página;  <input name="login" autofocus/> Placeholder text texto padrão do campo antes do foco ir para ele;  <input name="q" placeholder="Pesquisa"/>
  37. 37. Formulários Mais recursos required transformar o campo em obrigatório;  <input name="login" required/> maxlength o atributo agora também está disponível no textarea;
  38. 38. Formulários Mais recursos Custom validators definir expressões regulares de validação, sem Javascript;  <input name="cpf" oninput="vCPF(this)"/> contenteditable tornar um elemento do HTML editável.  <div contenteditable="true"> Edite-me... </div> http://html5demos.com/contenteditable
  39. 39. Formulários Mais recursos pattern definir expressões regulares de validação, sem Javascript;  <input name="CEP" id="CEP" required pattern="d{5}-?d{3}" />
  40. 40. Formulários Todos os recursos:  http://slides.html5rocks.com/#slide21
  41. 41. API Storage  Um dos grandes desafios de usabilidade é criar uma navegação consistente ações locais do usuário numa página fossem refletidas na próxima.(Menu em árvore); histórico com o uso de Ajax.
  42. 42. API Storage  Soluções: Histórico de Sessão elemento history; localStorage e sessionStorage Antes  Cookies (Interface complexa e Limite de armazenamento); Agora  localStorage(armazena os dados no client sem expiração definida) ;  sessionStorage(armazena os dados durante a sessão atual de navegação).
  43. 43. API Storage Exemplo  http://slides.html5rocks.com/#slide7
  44. 44. Drag and Drop Exemplo  http://slides.html5rocks.com/#slide13
  45. 45. Midias com HTML5 Áudio  <audio controls="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;  O estilo dos botões é definido pelo browser.
  46. 46. Midias com HTML5 Vídeo  <video controls="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>
  47. 47. Midias com HTML5 Youtube (http://youtube.com/html5)
  48. 48. Midias com HTML5  Sublime http://sublimevideo.net/demo)
  49. 49. Midias com HTML5  Exemplo  http://slides.html5rocks.com/#slide22
  50. 50. Midias com HTML5 Elemento device Webcam  <device type="media"> 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; Stream basta trocar o valor “media” por “fs”.
  51. 51. 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.  <canvas id="x" width="300" height="300"></canvas>
  52. 52. Canvas  Com a tag canvas é possível criar gráficos, games, aplicações web, etc.
  53. 53. Canvas  Exemplos http://mugtug.com/sketchpad/ http://media.chikuyonok.ru/ambilight/ http://html5demos.com/canvas-grad http://slides.html5rocks.com/#slide23
  54. 54. SVG  SVG é uma linguagem para marcação de gráficos vetoriais. Retângulo  <rect x="10" y="10" width="150" height="50" stroke="#000" stroke-width="5" fill="#FF0000" /> Circulo  <circle cx="70" cy="240" r="60" stroke="#00FF00" stroke-width="5" fill="#FFFFFF" />
  55. 55. SVG  Exemplos http://slides.html5rocks.com/#slide26 http://slides.html5rocks.com/#slide27
  56. 56. SVG Logomarca da Wikipedia
  57. 57. Geolocation  Há três maneiras populares programa descobrir sua posição global:  Geolocalização IP  É 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á.  Triangulação GPRS  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á.  GPS  É o método mais preciso. Em condições ideais, a margem de erro é de apenas 5 metros.
  58. 58. Geolocation  navigator.geolocation.getCurrentPosition(showpos)  Onde showpos é uma função callback, que vai receber um objeto de posicionamento. Veja um exemplo:  function showpos(position){ lat = position.coords.latitude lon = position.coords.longitude alert('Your position: '+lat+','+lon) }
  59. 59. Geolocation  Exemplos http://html5demos.com/geo http://slides.html5rocks.com/#slide14
  60. 60. Sites interessantes  http://html5demos.com/  http://html5-showcase.com/  http://html5rocks.com/
  61. 61. Referências  http://xhtml.com/en/future/x-html-5-versus-xhtml-2/  http://pt.wikipedia.org/wiki/HTML5  http://w3c.br/cursos/html5/conteudo/
  1. A particular slide catching your eye?

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

×