SlideShare uma empresa Scribd logo
1 de 55
Twitter
                 Nome
contato@caiotarifa.com
                           E-mail
                           Site
Formaweb


                          nossaequipe

Hugo Demiglio              Gregório Ferrari               Matheus Cáceres           Wagner Guerrero
Programador                Designer                       Programador               Desenvolvedor

Programador web,           Sonysta fanático,              Perdido, lutador,         Nintendista, nerd, fã dos
empresário, adorador       nervoso, formado em            trabalha com web, ama     heróis da Marvel e
de eletrônica nas horas    games pela faculdade           RubyOnRails e Linux. Já   desenvolve sites nas
vagas e MacFag.            Anhembi Morumbi.               falei perdido?            horas vagas.




                                                  HTML5
Formaweb


              nossosclientes

Não Intendo     Ducoco Alimentos      DomHost            Escava Forte




Fantasia        Ariboni               Casinha Colorida   Conselheiro
                                                         Criativo


                                   HTML5
Para falarmos de HTML5, iremos dividir o
        conteúdo em 8 capítulos.
HTML5 Semantics


                  doctype
O doctype indica para o navegador qual a versão do HTML que
você está utilizando.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


<!DOCTYPE html>




                              HTML5
HTML5 Semantics


                    charset
Já o charset serve para indicar ao browser qual tabela de
caractéres está utilizando.

<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">


<meta charset="utf-8">




                               HTML5
HTML5 Semantics


       novastags
            <div id=‘header’>


             <div id=‘nav’>

                    <div id=‘article’>
<div id=‘side’>
                     <div id=‘section’>


           <div id=‘footer’>

                    HTML5
HTML5 Semantics


   novastags
            <header>


              <nav>

                        <article>
<aside>
                        <section>


            <footer>

                HTML5
HTML5 Semantics


                       forms
Novos formulários
Antes do HTML5 estávamos restringidos ao uso de poucos tipos
de formulários, como text, hidden, textarea, select, radio e
checkbox.
Agora, existem novos tipos de formulários que podemos utilizar,
assim podemos informar ao browser exatamente o dado que
você espera receber. No caso de um telefone, por exemplo, o
navegador 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
HTML5 Semantics


               forms
          Tipos de dados e validadores.
Ainda em formulários temos alguns novos atributos!


Autofocus                               Required



Placeholder                               Pattern




                        HTML5
HTML5 Semantics


         microdata

            Recipe       Products
People



                Events




                 HTML5
HTML5 Semantics


             microdata
   Existem mais formatos de data, como softwares e
músicas. Esses padrões podem   Products
                     Recipe ser encontrados no site:
  People


   http://www.data-vocabulary.org/
                 Events




                         HTML5
HTML5 Semantics


acessibilidade
Offline & Storage


     applicationcache
Arquivos cacheados para         MANIFESTO
serem utilizados quando
offline.


Arquivos que não
funcionam sem conexão
com a Internet.



Indica arquivos
cacheados para substituir
quando offline.

                                  HTML5
Offline & Storage


               webstorage
Banco de dados
Muito mais espaço de
armazenamento.
Dados ficam guardados ao
mudar de página.
Não tem data para expirar.




                localstorage         sessionstorage


                                   HTML5
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 qualquer
janela. Além disso ela permanecerá ativa até que seja
  deletada pelo programador do site ou pelo usuário.


                         HTML5
Offline & Storage


exemplos




        HTML5
Offline & Storage


exemplos




        HTML5
Device Access


       dispositivos
Hoje em dia existem muitos dispositivos diferentes que
                 acessam a Internet.




                         HTML5
Offline & Storage


                multitouch



Através de uma API, será possível resgatar eventos como touchstart,
                     touchmove e touchend.


                                HTML5
Offline & Storage


             draganddrop


Antes era necessário o uso de
JavaScript para conseguir arrastar
objetos dentro de uma página. Com        exemplo
a chegada do HTML5, este recurso         http://html5demos.com/drag
passou a ser nativo e conta com
vários eventos: dragstart, drag,
dragend, entre outros.

                                HTML5
Offline & Storage


               geolocation
Existem três populares maneiras
de resgatar a localização de um
usuário: GPS, GPRS e IP.
Cada navegador tem seu próprio
método de calcular esta alta
precisão.
Com a latitude e a longitude
obtida é possível gerar mapas,
submeter via ajax, enviar os
dados para um webservice, entre
outros...

exemplo
http://html5demos.com/geo


                                  HTML5
Offline & Storage


                           device
Permite o acesso a
webcam do usuário.
Com um
conhecimento
avançado sobre
processamento digital
de imagens é
possível programar
efeitos em tempo real
com JavaScript.




exemplo
http://neave.com/webcam/


                                 HTML5
Connectivity


websockets




       HTML5
Connectivity


               serversent
Nos dispositívos móveis da Apple
conhecemos as “Push
Notifications”, que funcionam da
mesma forma no JavaScript.
É aberta uma conexão com o
servidor, que por sua vez fica
escutando uma porta de
comunicação.
Isto pode ser utilizado por
exemplo para implementar uma
interface de chat ou um monitor
de status de alguma operação
demorada ocorrendo no servidor.




                              HTML5
Connectivity


kinect
         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
Multimedia


                       audio
Por padrão, todo browser
deveria suportar o codec livre
OggVorbis, mas infelizmente
isso não acontece.
Para contornar este problema,
é possível indicar origens
alternativas, como no exemplo
ao lado.
Uma das vantagens de utilizar
esta especificação é a
liberdade de criar e modificar o
visual dos reprodutores.




                                  HTML5
Multimedia


     video



 A especificação de vídeo é
semelhante a de áudio, basta
 apenas substituir a tag para
         <video>.

             HTML5
3D, Graphics, Effects


                       SVG
SVG é a abreviatura de Scalable Vector Graphics que pode ser
traduzido como gráficos vetoriais escaláveis.
Basicamente é uma linguagem XML, parecida com HTML, para
descrever de forma vetorial desenhos e gráficos bidimensionais.
Estes gráficos podem ser estáticos, dinâmicos e até mesmo
animados.




                              HTML5
3D, Graphics, Effects


                    canvas
Canvas é uma tela de desenho
manipulada pelo JavaScript, por
hora é possível manipular
apenas gráficos no contexto 2D.
Esta é a tecnologia mais
utilizada para o desenvolvimento
de jogos.




                               HTML5
3D, Graphics, Effects


                   webgl
WebGL é 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
Performance & Integration


webworkers
                    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
Performance & Integration


                      XHR2
XHR2 é a abreviação para XMLHttpRequest Level 2, ou se
preferir Ajax2.


Com ele, novos recursos estarão disponíveis para serem
manipulados 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
CSS3 Styling


novaspropriedades
•   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
CSS3 Styling


responsivedesign
O mesmo código HTML com um estilo exclusivo para
               cada dispositivo.




                       HTML5
CSS3 Styling


responsivedesign
O mesmo código HTML com um estilo exclusivo para
               cada dispositivo.




                       HTML5
CSS3 Styling


responsivedesign
O mesmo código HTML com um estilo exclusivo para
               cada dispositivo.




                       HTML5
CSS3 Styling


responsivedesign
O mesmo código HTML com um estilo exclusivo para
               cada dispositivo.




                       HTML5
CSS3 Styling


responsivedesign
O mesmo código HTML com um estilo exclusivo para
               cada dispositivo.




                       HTML5
CSS3 Styling


responsivedesign
O mesmo código HTML com um estilo exclusivo para
               cada dispositivo.




                       HTML5
CSS3 Styling


responsivedesign
O mesmo código HTML com um estilo exclusivo para
               cada dispositivo.




                       HTML5
CSS3 Styling


responsivedesign
O mesmo código HTML com um estilo exclusivo para
               cada dispositivo.




                       HTML5
Já posso usar?


                HTML5
                         Pode!




  Modernizr é uma biblioteca JavaScript que implementa
suporte as novas tags do HTML5 nos browsers, além disso
  reúne uma série de verificações as novas tecnologias.



                           HTML5
Vida longa e próspera!



 Dúvidas?
</obrigado>

Mais conteúdo relacionado

Mais procurados

HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5ondazul
 
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBPeslPinguim
 
Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3Anderson Aguiar
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01 Léo Dias
 
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webigorpimentel
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento webRodrigo Rodrigues
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Webigorpimentel
 
HTML5 – O que tem de novo?
HTML5 – O que tem de novo?HTML5 – O que tem de novo?
HTML5 – O que tem de novo?Diego Santos
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Valmir Justo
 
Desenvolvimento de Sistemas Web - HTML5 - Introdução
Desenvolvimento de Sistemas Web - HTML5 - IntroduçãoDesenvolvimento de Sistemas Web - HTML5 - Introdução
Desenvolvimento de Sistemas Web - HTML5 - IntroduçãoFabio Moura Pereira
 

Mais procurados (20)

HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
 
Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
 
Html 5 e Css3
Html 5 e Css3Html 5 e Css3
Html 5 e Css3
 
Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3
 
Html5 Aula 6
Html5 Aula 6Html5 Aula 6
Html5 Aula 6
 
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
 
Html5 Aula 4
Html5 Aula 4Html5 Aula 4
Html5 Aula 4
 
CSS3: CSS3 (aula 2)
CSS3: CSS3 (aula 2)CSS3: CSS3 (aula 2)
CSS3: CSS3 (aula 2)
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Web
 
HTML5 – O que tem de novo?
HTML5 – O que tem de novo?HTML5 – O que tem de novo?
HTML5 – O que tem de novo?
 
Html5 aula 02
Html5 aula 02Html5 aula 02
Html5 aula 02
 
Html5 Aula 5
Html5 Aula 5Html5 Aula 5
Html5 Aula 5
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.
 
Apostila curso xhtml css
Apostila curso xhtml cssApostila curso xhtml css
Apostila curso xhtml css
 
Desenvolvimento de Sistemas Web - HTML5 - Introdução
Desenvolvimento de Sistemas Web - HTML5 - IntroduçãoDesenvolvimento de Sistemas Web - HTML5 - Introdução
Desenvolvimento de Sistemas Web - HTML5 - Introdução
 
HTML 5 e Open Web Platform
HTML 5 e Open Web PlatformHTML 5 e Open Web Platform
HTML 5 e Open Web Platform
 

Semelhante a Introdução ao HTML5

HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012Fábio Flatschart
 
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...Rio Info
 
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal Clécio Bachini
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaDiego Cavalca
 
Road Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúRoad Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúClécio Bachini
 
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3André Luiz Forchesatto
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sitesthiagolima
 
Workshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
Workshop: WebSockets com HTML 5 & PHP - Gustavo CielloWorkshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
Workshop: WebSockets com HTML 5 & PHP - Gustavo CielloTchelinux
 
Desenvolvimento web com Software Livre
Desenvolvimento web com Software LivreDesenvolvimento web com Software Livre
Desenvolvimento web com Software LivreRuan Carvalho
 
Desenvolvimento web com software livre
Desenvolvimento web com software livreDesenvolvimento web com software livre
Desenvolvimento web com software livreRuan Carvalho
 
Html5 - Notas de aula
Html5 - Notas de aulaHtml5 - Notas de aula
Html5 - Notas de aulaclodiney cruz
 
Apresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvemApresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvemRodrigo Valerio
 
Campus Party 2011 html 5
Campus Party 2011 html 5Campus Party 2011 html 5
Campus Party 2011 html 5Danilo Sousa
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxLuiz Antonio
 
Um revolução na web com HTML 5
Um revolução na web com HTML 5Um revolução na web com HTML 5
Um revolução na web com HTML 5Otávio Santana
 
1a5614c679b23c018654639f6b57ecf1.pdf
1a5614c679b23c018654639f6b57ecf1.pdf1a5614c679b23c018654639f6b57ecf1.pdf
1a5614c679b23c018654639f6b57ecf1.pdfNickMartinsgaspar
 

Semelhante a Introdução ao HTML5 (20)

HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012
 
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
Rio Info 2010 - Oficina - Oficina Papel Devigner Novidades HTML5 - Ricardo Pa...
 
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec Cafelândia
 
Road Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúRoad Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - Jaú
 
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
 
HTML5 & suas APIs
HTML5 & suas APIsHTML5 & suas APIs
HTML5 & suas APIs
 
Conceitos de Ajax
Conceitos de AjaxConceitos de Ajax
Conceitos de Ajax
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
Workshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
Workshop: WebSockets com HTML 5 & PHP - Gustavo CielloWorkshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
Workshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
 
Desenvolvimento web com Software Livre
Desenvolvimento web com Software LivreDesenvolvimento web com Software Livre
Desenvolvimento web com Software Livre
 
Desenvolvimento web com software livre
Desenvolvimento web com software livreDesenvolvimento web com software livre
Desenvolvimento web com software livre
 
Html5 - Notas de aula
Html5 - Notas de aulaHtml5 - Notas de aula
Html5 - Notas de aula
 
Apresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvemApresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvem
 
XHTML e CSS
XHTML e CSSXHTML e CSS
XHTML e CSS
 
Professor rogerio-apostila
Professor rogerio-apostilaProfessor rogerio-apostila
Professor rogerio-apostila
 
Campus Party 2011 html 5
Campus Party 2011 html 5Campus Party 2011 html 5
Campus Party 2011 html 5
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
 
Um revolução na web com HTML 5
Um revolução na web com HTML 5Um revolução na web com HTML 5
Um revolução na web com HTML 5
 
1a5614c679b23c018654639f6b57ecf1.pdf
1a5614c679b23c018654639f6b57ecf1.pdf1a5614c679b23c018654639f6b57ecf1.pdf
1a5614c679b23c018654639f6b57ecf1.pdf
 

Introdução ao HTML5

  • 1.
  • 2. Twitter Nome contato@caiotarifa.com E-mail Site
  • 3.
  • 4. Formaweb nossaequipe Hugo Demiglio Gregório Ferrari Matheus Cáceres Wagner Guerrero Programador Designer Programador Desenvolvedor Programador web, Sonysta fanático, Perdido, lutador, Nintendista, nerd, fã dos empresário, adorador nervoso, formado em trabalha com web, ama heróis da Marvel e de eletrônica nas horas games pela faculdade RubyOnRails e Linux. Já desenvolve sites nas vagas e MacFag. Anhembi Morumbi. falei perdido? horas vagas. HTML5
  • 5. Formaweb nossosclientes Não Intendo Ducoco Alimentos DomHost Escava Forte Fantasia Ariboni Casinha Colorida Conselheiro Criativo HTML5
  • 6. Para falarmos de HTML5, iremos dividir o conteúdo em 8 capítulos.
  • 7.
  • 8. HTML5 Semantics doctype O doctype indica para o navegador qual a versão do HTML que você está utilizando. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html> HTML5
  • 9. HTML5 Semantics charset Já o charset serve para indicar ao browser qual tabela de caractéres está utilizando. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta charset="utf-8"> HTML5
  • 10. HTML5 Semantics novastags <div id=‘header’> <div id=‘nav’> <div id=‘article’> <div id=‘side’> <div id=‘section’> <div id=‘footer’> HTML5
  • 11. HTML5 Semantics novastags <header> <nav> <article> <aside> <section> <footer> HTML5
  • 12. HTML5 Semantics forms Novos formulários Antes do HTML5 estávamos restringidos ao uso de poucos tipos de formulários, como text, hidden, textarea, select, radio e checkbox. Agora, existem novos tipos de formulários que podemos utilizar, assim podemos informar ao browser exatamente o dado que você espera receber. No caso de um telefone, por exemplo, o navegador 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
  • 13. HTML5 Semantics forms Tipos de dados e validadores. Ainda em formulários temos alguns novos atributos! Autofocus Required Placeholder Pattern HTML5
  • 14. HTML5 Semantics microdata Recipe Products People Events HTML5
  • 15. HTML5 Semantics microdata Existem mais formatos de data, como softwares e músicas. Esses padrões podem Products Recipe ser encontrados no site: People http://www.data-vocabulary.org/ Events HTML5
  • 17.
  • 18. Offline & Storage applicationcache Arquivos cacheados para MANIFESTO serem utilizados quando offline. Arquivos que não funcionam sem conexão com a Internet. Indica arquivos cacheados para substituir quando offline. HTML5
  • 19. Offline & Storage webstorage Banco de dados Muito mais espaço de armazenamento. Dados ficam guardados ao mudar de página. Não tem data para expirar. localstorage sessionstorage HTML5
  • 20. 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 qualquer janela. Além disso ela permanecerá ativa até que seja deletada pelo programador do site ou pelo usuário. HTML5
  • 23.
  • 24. Device Access dispositivos Hoje em dia existem muitos dispositivos diferentes que acessam a Internet. HTML5
  • 25. Offline & Storage multitouch Através de uma API, será possível resgatar eventos como touchstart, touchmove e touchend. HTML5
  • 26. Offline & Storage draganddrop Antes era necessário o uso de JavaScript para conseguir arrastar objetos dentro de uma página. Com exemplo a chegada do HTML5, este recurso http://html5demos.com/drag passou a ser nativo e conta com vários eventos: dragstart, drag, dragend, entre outros. HTML5
  • 27. Offline & Storage geolocation Existem três populares maneiras de resgatar a localização de um usuário: GPS, GPRS e IP. Cada navegador tem seu próprio método de calcular esta alta precisão. Com a latitude e a longitude obtida é possível gerar mapas, submeter via ajax, enviar os dados para um webservice, entre outros... exemplo http://html5demos.com/geo HTML5
  • 28. Offline & Storage device Permite o acesso a webcam do usuário. Com um conhecimento avançado sobre processamento digital de imagens é possível programar efeitos em tempo real com JavaScript. exemplo http://neave.com/webcam/ HTML5
  • 29.
  • 31. Connectivity serversent Nos dispositívos móveis da Apple conhecemos as “Push Notifications”, que funcionam da mesma forma no JavaScript. É aberta uma conexão com o servidor, que por sua vez fica escutando uma porta de comunicação. Isto pode ser utilizado por exemplo para implementar uma interface de chat ou um monitor de status de alguma operação demorada ocorrendo no servidor. HTML5
  • 32. Connectivity kinect 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
  • 33.
  • 34. Multimedia audio Por padrão, todo browser deveria suportar o codec livre OggVorbis, mas infelizmente isso não acontece. Para contornar este problema, é possível indicar origens alternativas, como no exemplo ao lado. Uma das vantagens de utilizar esta especificação é a liberdade de criar e modificar o visual dos reprodutores. HTML5
  • 35. Multimedia video A especificação de vídeo é semelhante a de áudio, basta apenas substituir a tag para <video>. HTML5
  • 36.
  • 37. 3D, Graphics, Effects SVG SVG é a abreviatura de Scalable Vector Graphics que pode ser traduzido como gráficos vetoriais escaláveis. Basicamente é uma linguagem XML, parecida com HTML, para descrever de forma vetorial desenhos e gráficos bidimensionais. Estes gráficos podem ser estáticos, dinâmicos e até mesmo animados. HTML5
  • 38. 3D, Graphics, Effects canvas Canvas é uma tela de desenho manipulada pelo JavaScript, por hora é possível manipular apenas gráficos no contexto 2D. Esta é a tecnologia mais utilizada para o desenvolvimento de jogos. HTML5
  • 39. 3D, Graphics, Effects webgl WebGL é 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
  • 40.
  • 41. Performance & Integration webworkers 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
  • 42. Performance & Integration XHR2 XHR2 é a abreviação para XMLHttpRequest Level 2, ou se preferir Ajax2. Com ele, novos recursos estarão disponíveis para serem manipulados 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
  • 43.
  • 44. CSS3 Styling novaspropriedades • 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
  • 45. CSS3 Styling responsivedesign O mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
  • 46. CSS3 Styling responsivedesign O mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
  • 47. CSS3 Styling responsivedesign O mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
  • 48. CSS3 Styling responsivedesign O mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
  • 49. CSS3 Styling responsivedesign O mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
  • 50. CSS3 Styling responsivedesign O mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
  • 51. CSS3 Styling responsivedesign O mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
  • 52. CSS3 Styling responsivedesign O mesmo código HTML com um estilo exclusivo para cada dispositivo. HTML5
  • 53. Já posso usar? HTML5 Pode! Modernizr é uma biblioteca JavaScript que implementa suporte as novas tags do HTML5 nos browsers, além disso reúne uma série de verificações as novas tecnologias. HTML5
  • 54. Vida longa e próspera! Dúvidas?

Notas do Editor

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n