Twitter                 Nomecontato@caiotarifa.com                           E-mail                           Site
Formaweb                          nossaequipeHugo Demiglio              Gregório Ferrari               Matheus Cáceres    ...
Formaweb              nossosclientesNão Intendo     Ducoco Alimentos      DomHost            Escava ForteFantasia        A...
Para falarmos de HTML5, iremos dividir o        conteúdo em 8 capítulos.
HTML5 Semantics                  doctypeO doctype indica para o navegador qual a versão do HTML quevocê está utilizando.<!...
HTML5 Semantics                    charsetJá o charset serve para indicar ao browser qual tabela decaractéres está utiliza...
HTML5 Semantics       novastags            <div id=‘header’>             <div id=‘nav’>                    <div id=‘articl...
HTML5 Semantics   novastags            <header>              <nav>                        <article><aside>                ...
HTML5 Semantics                       formsNovos formuláriosAntes do HTML5 estávamos restringidos ao uso de poucos tiposde...
HTML5 Semantics               forms          Tipos de dados e validadores.Ainda em formulários temos alguns novos atributo...
HTML5 Semantics         microdata            Recipe       ProductsPeople                Events                 HTML5
HTML5 Semantics             microdata   Existem mais formatos de data, como softwares emúsicas. Esses padrões podem   Prod...
HTML5 Semanticsacessibilidade
Offline & Storage     applicationcacheArquivos cacheados para         MANIFESTOserem utilizados quandooffline.Arquivos que n...
Offline & Storage               webstorageBanco de dadosMuito mais espaço dearmazenamento.Dados ficam guardados aomudar de p...
Offline & Storage       webstorage                sessionstorage Fica disponível apenas para a janela que guardou o        ...
Offline & Storageexemplos        HTML5
Device Access       dispositivosHoje em dia existem muitos dispositivos diferentes que                 acessam a Internet....
Offline & Storage                multitouchAtravés de uma API, será possível resgatar eventos como touchstart,             ...
Offline & Storage             draganddropAntes era necessário o uso deJavaScript para conseguir arrastarobjetos dentro de u...
Offline & Storage               geolocationExistem três populares maneirasde resgatar a localização de umusuário: GPS, GPRS...
Offline & Storage                           devicePermite o acesso awebcam do usuário.Com umconhecimentoavançado sobreproce...
Connectivitywebsockets       HTML5
Connectivity               serversentNos dispositívos móveis da Appleconhecemos as “PushNotifications”, que funcionam dames...
Connectivitykinect         Este é um bom exemplo de         dispositivo externo que pode se         comunicar com o JavaSc...
Multimedia                       audioPor padrão, todo browserdeveria suportar o codec livreOggVorbis, mas infelizmenteiss...
Multimedia     video A especificação de vídeo ésemelhante a de áudio, basta apenas substituir a tag para         <video>.  ...
3D, Graphics, Effects                       SVGSVG é a abreviatura de Scalable Vector Graphics que pode sertraduzido como ...
3D, Graphics, Effects                    canvasCanvas é uma tela de desenhomanipulada pelo JavaScript, porhora é possível ...
3D, Graphics, Effects                   webglWebGL é uma extensão do elemento Canvas, entretanto,utilizando sua API é poss...
Performance & Integrationwebworkers                    Web Workers é uma API do                    JavaScript para colocar...
Performance & Integration                      XHR2XHR2 é a abreviação para XMLHttpRequest Level 2, ou sepreferir Ajax2.Co...
CSS3 Stylingnovaspropriedades•   border-radius: Bordas arredondadas.•   box-shadow: Sombra em objetos.•   text-shadow: Som...
CSS3 StylingresponsivedesignO mesmo código HTML com um estilo exclusivo para               cada dispositivo.              ...
CSS3 StylingresponsivedesignO mesmo código HTML com um estilo exclusivo para               cada dispositivo.              ...
CSS3 StylingresponsivedesignO mesmo código HTML com um estilo exclusivo para               cada dispositivo.              ...
CSS3 StylingresponsivedesignO mesmo código HTML com um estilo exclusivo para               cada dispositivo.              ...
CSS3 StylingresponsivedesignO mesmo código HTML com um estilo exclusivo para               cada dispositivo.              ...
CSS3 StylingresponsivedesignO mesmo código HTML com um estilo exclusivo para               cada dispositivo.              ...
CSS3 StylingresponsivedesignO mesmo código HTML com um estilo exclusivo para               cada dispositivo.              ...
CSS3 StylingresponsivedesignO mesmo código HTML com um estilo exclusivo para               cada dispositivo.              ...
Já posso usar?                HTML5                         Pode!  Modernizr é uma biblioteca JavaScript que implementasup...
Vida longa e próspera! Dúvidas?
</obrigado>
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
Upcoming SlideShare
Loading in...5
×

HTML5

2,022

Published on

Para quem está começando, existem duas apostilas oficiais do W3C em português e gratuitas:

HTML5: http://www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf
CSS3: http://www.w3c.br/pub/Cursos/CursoCSS3/css-web.pdf

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,022
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "HTML5"

    1. 1. Twitter Nomecontato@caiotarifa.com E-mail Site
    2. 2. Formaweb nossaequipeHugo Demiglio Gregório Ferrari Matheus Cáceres Wagner GuerreroProgramador Designer Programador DesenvolvedorProgramador web, Sonysta fanático, Perdido, lutador, Nintendista, nerd, fã dosempresário, adorador nervoso, formado em trabalha com web, ama heróis da Marvel ede eletrônica nas horas games pela faculdade RubyOnRails e Linux. Já desenvolve sites nasvagas e MacFag. Anhembi Morumbi. falei perdido? horas vagas. HTML5
    3. 3. Formaweb nossosclientesNão Intendo Ducoco Alimentos DomHost Escava ForteFantasia Ariboni Casinha Colorida Conselheiro Criativo HTML5
    4. 4. Para falarmos de HTML5, iremos dividir o conteúdo em 8 capítulos.
    5. 5. HTML5 Semantics doctypeO doctype indica para o navegador qual a versão do HTML quevocê está utilizando.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE html> HTML5
    6. 6. HTML5 Semantics charsetJá o charset serve para indicar ao browser qual tabela decaractéres está utilizando.<meta http-equiv="Content-Type" content="text/html;charset=utf-8"><meta charset="utf-8"> HTML5
    7. 7. HTML5 Semantics novastags <div id=‘header’> <div id=‘nav’> <div id=‘article’><div id=‘side’> <div id=‘section’> <div id=‘footer’> HTML5
    8. 8. HTML5 Semantics novastags <header> <nav> <article><aside> <section> <footer> HTML5
    9. 9. HTML5 Semantics formsNovos formuláriosAntes do HTML5 estávamos restringidos ao uso de poucos tiposde formulários, como text, hidden, textarea, select, radio echeckbox.Agora, existem novos tipos de formulários que podemos utilizar,assim podemos informar ao browser exatamente o dado quevocê espera receber. No caso de um telefone, por exemplo, onavegador mobile pode exibir um teclado especial.Os novos tipos são tel, search, email, url, datetime, date, month,week, time, datetime-local, number, range e color. HTML5
    10. 10. HTML5 Semantics forms Tipos de dados e validadores.Ainda em formulários temos alguns novos atributos!Autofocus RequiredPlaceholder Pattern HTML5
    11. 11. HTML5 Semantics microdata Recipe ProductsPeople Events HTML5
    12. 12. HTML5 Semantics microdata Existem mais formatos de data, como softwares emúsicas. Esses padrões podem Products Recipe ser encontrados no site: People http://www.data-vocabulary.org/ Events HTML5
    13. 13. HTML5 Semanticsacessibilidade
    14. 14. Offline & Storage applicationcacheArquivos cacheados para MANIFESTOserem utilizados quandooffline.Arquivos que nãofuncionam sem conexãocom a Internet.Indica arquivoscacheados para substituirquando offline. HTML5
    15. 15. Offline & Storage webstorageBanco de dadosMuito mais espaço dearmazenamento.Dados ficam guardados aomudar de página.Não tem data para expirar. localstorage sessionstorage HTML5
    16. 16. Offline & Storage webstorage sessionstorage Fica disponível apenas para a janela que guardou o dado até que seja fechada. localstorage Não depende da sessão. Ao setar um dado, este ficará automaticamente disponível para qualquerjanela. Além disso ela permanecerá ativa até que seja deletada pelo programador do site ou pelo usuário. HTML5
    17. 17. Offline & Storageexemplos HTML5
    18. 18. Offline & Storageexemplos HTML5
    19. 19. Device Access dispositivosHoje em dia existem muitos dispositivos diferentes que acessam a Internet. HTML5
    20. 20. Offline & Storage multitouchAtravés de uma API, será possível resgatar eventos como touchstart, touchmove e touchend. HTML5
    21. 21. Offline & Storage draganddropAntes era necessário o uso deJavaScript para conseguir arrastarobjetos dentro de uma página. Com exemploa chegada do HTML5, este recurso http://html5demos.com/dragpassou a ser nativo e conta comvários eventos: dragstart, drag,dragend, entre outros. HTML5
    22. 22. Offline & Storage geolocationExistem três populares maneirasde resgatar a localização de umusuário: GPS, GPRS e IP.Cada navegador tem seu própriométodo de calcular esta altaprecisão.Com a latitude e a longitudeobtida é possível gerar mapas,submeter via ajax, enviar osdados para um webservice, entreoutros...exemplohttp://html5demos.com/geo HTML5
    23. 23. Offline & Storage devicePermite o acesso awebcam do usuário.Com umconhecimentoavançado sobreprocessamento digitalde imagens épossível programarefeitos em tempo realcom JavaScript.exemplohttp://neave.com/webcam/ HTML5
    24. 24. Connectivitywebsockets HTML5
    25. 25. Connectivity serversentNos dispositívos móveis da Appleconhecemos as “PushNotifications”, que funcionam damesma forma no JavaScript.É aberta uma conexão com oservidor, que por sua vez ficaescutando uma porta decomunicação.Isto pode ser utilizado porexemplo para implementar umainterface de chat ou um monitorde status de alguma operaçãodemorada ocorrendo no servidor. HTML5
    26. 26. Connectivitykinect Este é um bom exemplo de dispositivo externo que pode se comunicar com o JavaScript através do Web Socket. O Kinect, através de uma porta exclusiva, envia as coordenadas, com uma conexão de escuta é possível trabalhar com esses dados dentro do site. HTML5
    27. 27. Multimedia audioPor padrão, todo browserdeveria suportar o codec livreOggVorbis, mas infelizmenteisso não acontece.Para contornar este problema,é possível indicar origensalternativas, como no exemploao lado.Uma das vantagens de utilizaresta especificação é aliberdade de criar e modificar ovisual dos reprodutores. HTML5
    28. 28. Multimedia video A especificação de vídeo ésemelhante a de áudio, basta apenas substituir a tag para <video>. HTML5
    29. 29. 3D, Graphics, Effects SVGSVG é a abreviatura de Scalable Vector Graphics que pode sertraduzido como gráficos vetoriais escaláveis.Basicamente é uma linguagem XML, parecida com HTML, paradescrever de forma vetorial desenhos e gráficos bidimensionais.Estes gráficos podem ser estáticos, dinâmicos e até mesmoanimados. HTML5
    30. 30. 3D, Graphics, Effects canvasCanvas é uma tela de desenhomanipulada pelo JavaScript, porhora é possível manipularapenas gráficos no contexto 2D.Esta é a tecnologia maisutilizada para o desenvolvimentode jogos. HTML5
    31. 31. 3D, Graphics, Effects webglWebGL é uma extensão do elemento Canvas, entretanto,utilizando sua API é possível criar gráficos no contexto 3D. exemplo http://www.chromeexperiments.com/webgl HTML5
    32. 32. Performance & Integrationwebworkers Web Workers é uma API do JavaScript para colocar processos em background. Assim que o processo é finalizado pode-se então resgatar os dados do resultado. HTML5
    33. 33. Performance & Integration XHR2XHR2 é a abreviação para XMLHttpRequest Level 2, ou sepreferir Ajax2.Com ele, novos recursos estarão disponíveis para seremmanipulados com JavaScript:• Upload seguimentado de arquivos;• Definir formato de retorno;• Enviar formulários (FormData);• Requisitar páginas em outros domínios;• Baixar e salvar arquivos para funcionamento offline. HTML5
    34. 34. CSS3 Stylingnovaspropriedades• border-radius: Bordas arredondadas.• box-shadow: Sombra em objetos.• text-shadow: Sombra em textos.• linear-gradient: Cria gradientes em backgrounds.• keyframes: Semelhante ao Flash.• transition: Cria animações de transição.• transform: Transforma um objeto podendo rotaciona-lo ou amplia-lo. Estas são algumas das propriedades da terceira versão do CSS. As opções são tantas que seria necessária uma nova apresentação para falar apenas disto. HTML5
    35. 35. CSS3 StylingresponsivedesignO mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
    36. 36. CSS3 StylingresponsivedesignO mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
    37. 37. CSS3 StylingresponsivedesignO mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
    38. 38. CSS3 StylingresponsivedesignO mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
    39. 39. CSS3 StylingresponsivedesignO mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
    40. 40. CSS3 StylingresponsivedesignO mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
    41. 41. CSS3 StylingresponsivedesignO mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
    42. 42. CSS3 StylingresponsivedesignO mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
    43. 43. Já posso usar? HTML5 Pode! Modernizr é uma biblioteca JavaScript que implementasuporte as novas tags do HTML5 nos browsers, além disso reúne uma série de verificações as novas tecnologias. HTML5
    44. 44. Vida longa e próspera! Dúvidas?
    45. 45. </obrigado>

    ×