0
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
                          25 Maio 2010




            ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB




Tuesday, May 25, 2010
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB




                             EU?



Tuesday, May 25, 2010
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB EU?

                                 http://id.andr3.net
                ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB EU?




                                 2002 — 2008




                 ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB EU?




                          mais em http://slideshare.net/andr3
    ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB EU?




Tuesday, May 25, 2010
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB EU?



                                 EQUIPA DE WEBDESIGN
              ...
Tuesday, May 25, 2010
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB




                             LET’S ROCK!


Tuesday, May 25, 2010
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB




Tuesday, May 25, 2010
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB




                        O QUE USAMOS HOJE
                        PARA...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB O QUE USAMOS HOJE PARA TECER A WEB?



   HTML
   hypertext markup languag...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB O QUE USAMOS HOJE PARA TECER A WEB?



   Primeira versão: 1991
    Sir Ti...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB O QUE USAMOS HOJE PARA TECER A WEB?



   HTML 2.0: 1995
    IETF




    ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB O QUE USAMOS HOJE PARA TECER A WEB?



   HTML 4.0 & 4.0.1: 1997
    W3C

...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB O QUE USAMOS HOJE PARA TECER A WEB?



   XHTML 1.0: 2000
    W3C




    ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB O QUE USAMOS HOJE PARA TECER A WEB?



   XHTML 1.1: 2001
    W3C




    ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB O QUE USAMOS HOJE PARA TECER A WEB?



   Webstandards: 2003
             ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB O QUE USAMOS HOJE PARA TECER A WEB?




                           <img>  ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB O QUE USAMOS HOJE PARA TECER A WEB?




                                  ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB




                         PORQUE NÃO CHEGA
                        O QU...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PORQUE NÃO CHEGA O QUE TEMOS AGORA?



    JSON-P, Comet, etc.
   Cura par...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PORQUE NÃO CHEGA O QUE TEMOS AGORA?


                        HTTP Content...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PORQUE NÃO CHEGA O QUE TEMOS AGORA?


                        HTTP Content...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB




                            ENTÃO QUAL É
                        O CAM...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR?




                           XHTML 2
  ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR?




  David Baron & Håkon Wium Lie Ian Hi...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR?



                        Web Hypertext ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR?


                                       ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR?



                           Até que...
...
Tuesday, May 25, 2010
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR?



                                      ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR?



                               Web Hyp...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR?




                           XHTML 2?

...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR?


                 XHTML 2 Working Group ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR?




                           XHTML 2 20...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB




                          QUANDO É QUE
                         POSSO ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB QUANDO É QUE POSSO BRINCAR?


   HTML5



                        2012 (+2...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB QUANDO É QUE POSSO BRINCAR?


   HTML5


                        Candidate...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB QUANDO É QUE POSSO BRINCAR?


   HTML5


                        Candidate...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB QUANDO É QUE POSSO BRINCAR?


   HTML5


                        Candidate...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB




                           PRONTO, OK.
                        O QUE H...
deepphoto
Tuesday, May 25, 2010
PREPARADOS?




        deepphoto
Tuesday, May 25, 2010
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
                                            ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
                                            ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
                                            ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
                                            ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
                                            ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?


    1         Optimização da
             ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?


    1         Optimização da
             ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?


    1         Optimização da
             ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?


    1         Optimização da
             ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?


    1         Optimização da
             ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
                                            ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
                                            ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?




                               HTML     ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?




                               HTML     ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?




                               HTML     ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?




                                      HT...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?




                                      HT...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?




                                      HT...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
                                            ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
                                            ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?


                                          ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?


                                          ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?


                                          ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?



                                         ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?




                               comprar h...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
                                            ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
                                            ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?




                                        ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?


                                      <a r...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
                                            ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
                                            ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB




    5           Microdata

 artigo http://www.alistapart.com/articles/...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?



                                         ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?


             <p> itemscope itemtype=“http:...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?


             <p itemscope itemtype=“http:/...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?


             <p itemscope itemtype=“http:/...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?


             <p itemscope itemtype=“http:/...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?


             <p itemscope itemtype=“http:/...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?


                                data-*
   ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
                                            ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
                                            ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?


                              6 Novas rela...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?


                                 6 Novas r...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?


                                 6 Novas r...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?


                                 6 Novas r...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
                                            ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
                                            ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?




                              7
        ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?




                              7
        ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?

              Tipos de input
              ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?




                              7
        ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB




Tuesday, May 25, 2010
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?

               Atributos novos


          ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?

               Atributos novos


          ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
                                            ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
                                            ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?




                              8
        ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?

                                           ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?

                                           ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?

                                           ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB




  http://en.wikipedia.org/wiki/Tarzan_yell
  Atalho: http://34c1.sl.pt...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB




  http://en.wikipedia.org/wiki/Tarzan_yell
  Atalho: http://34c1.sl.pt...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB




  http://9elements.com/io/projects/html5/canvas/
  Atalho: http://vj9....
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB




  http://youtube.com/html5
  Atalho: http://34c8.sl.pt

Tuesday, May 2...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB

                         A LUTA
                          DOS
           ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB                      A LUTA
                                              ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB                    A LUTA
                                               D...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?

                                           ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?

                                           ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?

                                           ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?

                                           ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?

                                           ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?

                                           ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?

                                           ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?

                                           ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
                                            ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
                                            ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?




                              9
        ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?

                                           ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?

                                           ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?

                                           ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?

                                           ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?

                                           ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?

                                           ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?

                                           ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
                                            ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
                                            ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?

   Antes
                                  ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?

                           http://example.c...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?

                           http://example.c...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?


       <script>                           ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?


       <script>                           ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?


       <script>                           ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
                                            ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
                                            ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?

                                           ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?

    webDB
   Interface com um repositório s...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?

    webDB
   Interface com um repositório s...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
                                            ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
                                            ...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?

      Websockets API
       var socket = ne...
ISEL Tech Days 2010

   HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?

      Webworkers
      Executar código comp...
HTML5 - A nova era da Web
HTML5 - A nova era da Web
HTML5 - A nova era da Web
HTML5 - A nova era da Web
HTML5 - A nova era da Web
HTML5 - A nova era da Web
HTML5 - A nova era da Web
HTML5 - A nova era da Web
HTML5 - A nova era da Web
HTML5 - A nova era da Web
HTML5 - A nova era da Web
HTML5 - A nova era da Web
HTML5 - A nova era da Web
HTML5 - A nova era da Web
HTML5 - A nova era da Web
HTML5 - A nova era da Web
HTML5 - A nova era da Web
HTML5 - A nova era da Web
HTML5 - A nova era da Web
HTML5 - A nova era da Web
HTML5 - A nova era da Web
HTML5 - A nova era da Web
HTML5 - A nova era da Web
HTML5 - A nova era da Web
HTML5 - A nova era da Web
HTML5 - A nova era da Web
HTML5 - A nova era da Web
HTML5 - A nova era da Web
Upcoming SlideShare
Loading in...5
×

HTML5 - A nova era da Web

6,797

Published on

Talk sobre "HTML5 - A nova era da Web", a resumir o mais importante da spec, à data de escrita: Maio 2010.

Evento: ISEL Tech 2010

Published in: Technology, News & Politics

Transcript of "HTML5 - A nova era da Web"

  1. 1. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEBISEL Tech Days 2010 25 Maio 2010 HTML5 A NOVA ERA DA WEB André Luís creative commons 3.0 @andr3 attribution non-commercial share-alike Tuesday, May 25, 2010
  2. 2. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB Tuesday, May 25, 2010
  3. 3. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB EU? Tuesday, May 25, 2010
  4. 4. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB EU? http://id.andr3.net @andr3 mobifeeds.net igive.sapo.pt Tuesday, May 25, 2010
  5. 5. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB EU? 2002 — 2008 2007 — ... Tuesday, May 25, 2010
  6. 6. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB EU? mais em http://slideshare.net/andr3 Atalho: http://33om.sl.pt Tuesday, May 25, 2010
  7. 7. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB EU? Tuesday, May 25, 2010
  8. 8. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB EU? EQUIPA DE WEBDESIGN @isacosta @ivogomes @andr3 @nloureiro Tuesday, May 25, 2010
  9. 9. Tuesday, May 25, 2010
  10. 10. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB LET’S ROCK! Tuesday, May 25, 2010
  11. 11. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB Tuesday, May 25, 2010
  12. 12. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB O QUE USAMOS HOJE PARA TECER A WEB? Tuesday, May 25, 2010
  13. 13. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB O QUE USAMOS HOJE PARA TECER A WEB? HTML hypertext markup language <p>Isto é um parágrafo com <a href=”http://id.andr3.net”> um link </a> </p> Tuesday, May 25, 2010 linguagem de marcação de hipertexto
  14. 14. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB O QUE USAMOS HOJE PARA TECER A WEB? Primeira versão: 1991 Sir Tim Berners-Lee Primeira versão: 1991 Tuesday, May 25, 2010
  15. 15. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB O QUE USAMOS HOJE PARA TECER A WEB? HTML 2.0: 1995 IETF HTML 2.0: 1995 Primeira versão: 1991 Tuesday, May 25, 2010 IETF - Internet Engineering Task Force
  16. 16. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB O QUE USAMOS HOJE PARA TECER A WEB? HTML 4.0 & 4.0.1: 1997 W3C HTML 2.0: 1995 Primeira versão: 1991 HTML 4.0.1: 1997 Tuesday, May 25, 2010 W3C: World Wide Web Consortium TEMPO: 2 ou 3MIN ----------------------------------------
  17. 17. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB O QUE USAMOS HOJE PARA TECER A WEB? XHTML 1.0: 2000 W3C XHTML 1.0: 2000 HTML 2.0: 1995 Primeira versão: 1991 HTML 4.0.1: 1997 Tuesday, May 25, 2010
  18. 18. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB O QUE USAMOS HOJE PARA TECER A WEB? XHTML 1.1: 2001 W3C XHTML 1.0: 2000 HTML 2.0: 1995 Primeira versão: 1991 HTML 4.0.1: 1997 XHTML 1.1: 2001 Tuesday, May 25, 2010
  19. 19. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB O QUE USAMOS HOJE PARA TECER A WEB? Webstandards: 2003 Designing with web standards: 2003 XHTML 1.0: 2000 HTML 2.0: 1995 Primeira versão: 1991 HTML 4.0.1: 1997 XHTML 1.1: 2001 Tuesday, May 25, 2010
  20. 20. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB O QUE USAMOS HOJE PARA TECER A WEB? <img> <img /> text/html vs. application/xhtml+xml atributo=valor atributo=“valor” HTML vs. XHTML Tuesday, May 25, 2010
  21. 21. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB O QUE USAMOS HOJE PARA TECER A WEB? vs. HTML vs. XHTML naotakem cosmic_bandita Tuesday, May 25, 2010 TEMPO: 4MIN -------------------------------------
  22. 22. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PORQUE NÃO CHEGA O QUE TEMOS AGORA? Tuesday, May 25, 2010 TEMPO: 4MIN -------------------------------------
  23. 23. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PORQUE NÃO CHEGA O QUE TEMOS AGORA? JSON-P, Comet, etc. Cura para: Comunicações muito limitadas. Microformatos Cura para: Pouca semântica do HTML (e pouca extensibilidade). Validações manuais via JavaScript Cura para: Poucos nenhuns mecanismos de validação automática de formulários. Tuesday, May 25, 2010 DRY
  24. 24. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PORQUE NÃO CHEGA O QUE TEMOS AGORA? HTTP Content-type: application/xhtml+xml Tuesday, May 25, 2010
  25. 25. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PORQUE NÃO CHEGA O QUE TEMOS AGORA? HTTP Content-type: application/xhtml+xml Tuesday, May 25, 2010
  26. 26. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR? Tuesday, May 25, 2010
  27. 27. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR? XHTML 2 Esquecer o passado. HTML Começar de novo. Pureza semântica. Tuesday, May 25, 2010 AGOSTO 2002
  28. 28. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR? David Baron & Håkon Wium Lie Ian Hickson Anne van Kesteren Brendan Eich e não só! mollyeh11 mollyeh11 adactio joi Tuesday, May 25, 2010
  29. 29. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR? Web Hypertext Application Technology Working Group WHAT-WG Web Applications 1.0 & Web Forms 2.0 Evoluir a web. Facilitar o desenvolvimento de webapps. Melhorar mecanismos base da web. Melhor os formulários, keystones da web. Tuesday, May 25, 2010 Opera & Mozilla
  30. 30. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR? XHTML WHAT-WG HTML Tuesday, May 25, 2010 Em outubro de 2006
  31. 31. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR? Até que... Tuesday, May 25, 2010 Em outubro de 2006
  32. 32. Tuesday, May 25, 2010
  33. 33. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR? “The attempt to get the world to switch to XML, including quotes around attribute values and slashes in empty tags and namespaces all at once didn't work.” Sir Tim Berners-Lee Director da W3C in http://dig.csail.mit.edu/breadcrumbs/node/166 Atalho: http://32ac.sl.pt paul_clarke Tuesday, May 25, 2010 It is necessary to evolve HTML incrementally. Outubro 2006
  34. 34. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR? Web Hypertext Application Technology Working Group + WHAT-WG HTML5 Evoluir o HTML incrementalmente. Utilizadores antes de autores antes de implementadores antes de especificações antes de pureza teórica. “Pave cowpaths” ie, procurar formalizar o que já é usado. Tuesday, May 25, 2010 JANEIRO 2008
  35. 35. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR? XHTML 2? Tuesday, May 25, 2010
  36. 36. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR? XHTML 2 Working Group Expected to Stop Work End of 2009, W3C to Increase Resources on HTML 5 Today the Director announces that when the XHTML 2 Working Group charter expires as scheduled at the XHTML 2? end of 2009, the charter will not be renewed. By doing so, and by increasing resources in the HTML Working Group, W3C hopes to accelerate the progress of HTML 5 and clarify W3C's position regarding the future of HTML. A FAQ answers questions about the future of deliverables of the XHTML 2 Working Group, and the status of various discussions related to HTML. Learn more about the HTML Activity. in http://www.w3.org/News/2009#item119 Atalho: http://329z.sl.pt Tuesday, May 25, 2010
  37. 37. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR? XHTML 2 2002 - 2007 XHTML 1.0 & 1.1 Tuesday, May 25, 2010 NÃO É A MORTE DO XHTML. TEMPO: 8MIN
  38. 38. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB QUANDO É QUE POSSO BRINCAR? Tuesday, May 25, 2010 TEMPO: 8MIN -----------------------------------
  39. 39. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB QUANDO É QUE POSSO BRINCAR? HTML5 2012 (+2 anos) 2022 (+12 anos) 2010 (agora) Tuesday, May 25, 2010 2010 - Now [1] 2012 - Candidate Recommendation: especificação terminada. [2] 2022 - Proposed Recommendation: 2x implementações INTEGRAIS. [3] 2010 - suporte nos browsers mais modernos
  40. 40. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB QUANDO É QUE POSSO BRINCAR? HTML5 Candidate Recommendation 2012 (+2 anos) 2022 (+12 anos) 2010 (agora) Tuesday, May 25, 2010 2010 - Now [1] 2012 - Candidate Recommendation: especificação terminada. [2] 2022 - Proposed Recommendation: 2x implementações INTEGRAIS. [3] 2010 - suporte nos browsers mais modernos
  41. 41. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB QUANDO É QUE POSSO BRINCAR? HTML5 Candidate Recommendation Proposed Recommendation 2012 (+2 anos) 2022 (+12 anos) 2010 (agora) Tuesday, May 25, 2010 2010 - Now [1] 2012 - Candidate Recommendation: especificação terminada. [2] 2022 - Proposed Recommendation: 2x implementações INTEGRAIS. [3] 2010 - suporte nos browsers mais modernos
  42. 42. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB QUANDO É QUE POSSO BRINCAR? HTML5 Candidate Recommendation Proposed Recommendation 2012 (+2 anos) 2022 (+12 anos) 2010 (agora) Já começa a haver suporte nos browsers mais modernos... 8/9 Tuesday, May 25, 2010 2010 - Now [1] 2012 - Candidate Recommendation: especificação terminada. [2] 2022 - Proposed Recommendation: 2x implementações INTEGRAIS. [3] 2010 - suporte nos browsers mais modernos
  43. 43. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? Tuesday, May 25, 2010
  44. 44. deepphoto Tuesday, May 25, 2010
  45. 45. PREPARADOS? deepphoto Tuesday, May 25, 2010
  46. 46. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? (resumo) HTML5 Optimização da Novas relações nos links Offline webapps Linguagem Doctype, atributos por omissão APIs de JavaScript HTML5/XHTML5 Web Forms 2.0 Client-side Storage sessionStorage, localStorage, webDB novos elementos Comunicação/Threading section, nav, footer, etc. Media elements Websockets, Webworkers <audio> & <video> ARIA Geolocation accessible rich internet applications Experience Canvas drag-n-drop Microdata Tuesday, May 25, 2010 FALTA: UndoManager, <menu> & <command>, contenteditable, SPECS SEPARADAS: offlinewebapps, workers, webstorage, webdb, websocket, server-sent events
  47. 47. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? (resumo) HTML5 Optimização da Novas relações nos links Offline webapps Linguagem Doctype, atributos por omissão APIs de JavaScript HTML5/XHTML5 Web Forms 2.0 Client-side Storage sessionStorage, localStorage, webDB novos elementos Comunicação/Threading section, nav, footer, etc. Media elements Websockets, Webworkers <audio> & <video> ARIA Geolocation accessible rich internet applications Experience Canvas drag-n-drop Microdata Webdesigners Programadores Tuesday, May 25, 2010 FALTA: UndoManager, <menu> & <command>, contenteditable, SPECS SEPARADAS: offlinewebapps, workers, webstorage, webdb, websocket, server-sent events
  48. 48. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? (resumo) HTML5 Optimização da Novas relações nos links Offline webapps Linguagem Doctype, atributos por omissão APIs de JavaScript HTML5/XHTML5 Web Forms 2.0 Client-side Storage sessionStorage, localStorage, webDB novos elementos Comunicação/Threading section, nav, footer, etc. Media elements Websockets, Webworkers <audio> & <video> ARIA Geolocation accessible rich internet applications Experience Canvas drag-n-drop Microdata Tuesday, May 25, 2010 FALTA: UndoManager, <menu> & <command>, contenteditable, SPECS SEPARADAS: offlinewebapps, workers, webstorage, webdb, websocket, server-sent events
  49. 49. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? (resumo) HTML5 Optimização da Novas relações nos links Offline webapps Linguagem Doctype, atributos por omissão APIs de JavaScript HTML5/XHTML5 Web Forms 2.0 Client-side Storage sessionStorage, localStorage, webDB novos elementos Comunicação/Threading section, nav, footer, etc. Media elements Websockets, Webworkers <audio> & <video> ARIA Geolocation accessible rich internet applications Experience Canvas drag-n-drop Microdata Tuesday, May 25, 2010
  50. 50. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? (resumo) HTML5 1 Optimização da Novas relações nos links Offline webapps Linguagem Doctype, atributos por omissão APIs de JavaScript HTML5/XHTML5 Web Forms 2.0 Client-side Storage sessionStorage, localStorage, webDB novos elementos Comunicação/Threading section, nav, footer, etc. Media elements Websockets, Webworkers <audio> & <video> ARIA Geolocation accessible rich internet applications Experience Canvas drag-n-drop Microdata Tuesday, May 25, 2010
  51. 51. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 1 Optimização da Linguagem Doctype, atributos por omissão HTML4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> XHTML1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> HTML5 <!DOCTYPE html> Tuesday, May 25, 2010
  52. 52. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 1 Optimização da Linguagem Doctype, atributos por omissão HTML4.01 Strict <script type=”text/javascript”> </script> XHTML1.0 Strict <script type=”text/javascript”> </script> HTML5 <script> </script> Tuesday, May 25, 2010
  53. 53. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 1 Optimização da Linguagem Doctype, atributos por omissão HTML4.01 Strict <style type=”text/css”> </style> XHTML1.0 Strict <style type=”text/css”> </style> HTML5 <style> </style> Tuesday, May 25, 2010
  54. 54. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 1 Optimização da Linguagem Doctype, atributos por omissão HTML4.01 Strict <meta http-equiv=“Content-type” content=“text/html; charset=utf-8”> XHTML1.0 Strict <meta http-equiv=“Content-type” content=“application/xhtml+xml; charset=utf-8” /> HTML5 <meta charset=“utf-8”> Tuesday, May 25, 2010
  55. 55. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 1 Optimização da Linguagem Doctype, atributos por omissão <script async ...> document.getSelection(), document.getElementsByClassName()... el.innerHTML, el.outerHTML, el.insertAdjacentHTML(), el.classList... Tuesday, May 25, 2010 "beforebegin" "afterbegin" "beforeend" "afterend"
  56. 56. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? (resumo) HTML5 Optimização da Novas relações nos links Offline webapps Linguagem Doctype, atributos por omissão APIs de JavaScript HTML5/XHTML5 Web Forms 2.0 Client-side Storage sessionStorage, localStorage, webDB novos elementos Comunicação/Threading section, nav, footer, etc. Media elements Websockets, Webworkers <audio> & <video> ARIA Geolocation accessible rich internet applications Experience Canvas drag-n-drop Microdata Tuesday, May 25, 2010
  57. 57. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? (resumo) HTML5 Optimização da Novas relações nos links Offline webapps Linguagem Doctype, atributos por omissão APIs de JavaScript 2 HTML5/XHTML5 Web Forms 2.0 Client-side Storage sessionStorage, localStorage, webDB novos elementos Comunicação/Threading section, nav, footer, etc. Media elements Websockets, Webworkers <audio> & <video> ARIA Geolocation accessible rich internet applications Experience Canvas drag-n-drop Microdata Tuesday, May 25, 2010
  58. 58. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? HTML vs. XHTML 2 HTML5/XHTML5 Tuesday, May 25, 2010
  59. 59. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? HTML vs. XHTML 2 HTML5/XHTML5 <input disabled> <input disabled=“disabled” /> Tuesday, May 25, 2010
  60. 60. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? HTML vs. XHTML 2 HTML5/XHTML5 <input disabled> <input disabled=“disabled” /> <input disabled <input disabled=“disabled” type=text> type=“text”/> Tuesday, May 25, 2010
  61. 61. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? HTML vs. XHTML 2 HTML5/XHTML5 <input disabled> <input disabled=“disabled” /> <input disabled <input disabled=“disabled” type=text> type=“text”/> Content-type: text/html Content-type: application/xhtml ou Content-type: application/xml Tuesday, May 25, 2010
  62. 62. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? HTML vs. XHTML 2 HTML5/XHTML5 <input disabled> <input disabled=“disabled” /> <input disabled <input disabled=“disabled” type=text> type=“text”/> Content-type: text/html Content-type: application/xhtml ou Content-type: application/xml Tuesday, May 25, 2010
  63. 63. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? HTML vs. XHTML 2 HTML5/XHTML5 <input disabled=“disabled”> <input disabled> <input disabled=“disabled” /> <input disabled=“disabled” <input disabled <input disabled=“disabled” type=“text”> type=text> type=“text”/> Content-type: text/html Content-type: application/xhtml ou Content-type: application/xml Tuesday, May 25, 2010
  64. 64. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? (resumo) HTML5 Optimização da Novas relações nos links Offline webapps Linguagem Doctype, atributos por omissão APIs de JavaScript HTML5/XHTML5 Web Forms 2.0 Client-side Storage sessionStorage, localStorage, webDB novos elementos Comunicação/Threading section, nav, footer, etc. Media elements Websockets, Webworkers <audio> & <video> ARIA Geolocation accessible rich internet applications Experience Canvas drag-n-drop Microdata Tuesday, May 25, 2010
  65. 65. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? (resumo) HTML5 Optimização da Novas relações nos links Offline webapps Linguagem Doctype, atributos por omissão APIs de JavaScript HTML5/XHTML5 Web Forms 2.0 Client-side Storage sessionStorage, localStorage, webDB 3 novos elementos Comunicação/Threading section, nav, footer, etc. Media elements Websockets, Webworkers <audio> & <video> ARIA Geolocation accessible rich internet applications Experience Canvas drag-n-drop Microdata Tuesday, May 25, 2010
  66. 66. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? HTML4.01 & XHTML 1.x HTML5 <div class=“header”> <header> <div class=“nav”> <nav> <div class=“footer”> <footer> 3 novos elementos <div class=“section”> <section> section, nav, footer, etc. ... ... Tuesday, May 25, 2010
  67. 67. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? elementos section meter article time aside canvas hgroup menu 3 novos elementos header command section, nav, footer, etc. footer details nav datalist figure keygen figcaption output mark device progress mais info http://www.w3.org/TR/html5-diff/#new-elements Atalho: http://33em.sl.pt Tuesday, May 25, 2010 section secção do site | article igual mas a secção é na verdade um artigo | aside
  68. 68. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? elementos section meter article time aside canvas hgroup menu 3 novos elementos header command section, nav, footer, etc. footer details nav datalist figure keygen figcaption output mark device progress mais info http://www.w3.org/TR/html5-diff/#new-elements Atalho: http://33em.sl.pt Tuesday, May 25, 2010 section secção do site | article igual mas a secção é na verdade um artigo | aside
  69. 69. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? ATENÇÃO! 3 novos elementos section, nav, footer, etc. download do script http://code.google.com/p/html5shiv/ Atalho: http://33er.sl.pt Tuesday, May 25, 2010
  70. 70. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? comprar http://books.alistapart.com/ Atalho: http://34p6.sl.pt Tuesday, May 25, 2010
  71. 71. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? (resumo) HTML5 Optimização da Novas relações nos links Offline webapps Linguagem Doctype, atributos por omissão APIs de JavaScript HTML5/XHTML5 Web Forms 2.0 Client-side Storage sessionStorage, localStorage, webDB novos elementos Comunicação/Threading section, nav, footer, etc. Media elements Websockets, Webworkers <audio> & <video> ARIA Geolocation accessible rich internet applications Experience Canvas drag-n-drop Microdata Tuesday, May 25, 2010 TEMPO: 16MIN
  72. 72. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? (resumo) HTML5 Optimização da Novas relações nos links Offline webapps Linguagem Doctype, atributos por omissão APIs de JavaScript HTML5/XHTML5 Web Forms 2.0 Client-side Storage sessionStorage, localStorage, webDB novos elementos Comunicação/Threading section, nav, footer, etc. Media elements Websockets, Webworkers <audio> & <video> 4 ARIA Geolocation accessible rich internet applications Experience Canvas drag-n-drop Microdata Tuesday, May 25, 2010 TEMPO: 16MIN
  73. 73. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? “WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more 4 accessible to people with disabilities.” ARIA accessible rich internet applications in http://www.w3.org/WAI/intro/aria Atalho: http://33en.sl.pt Tuesday, May 25, 2010 TEMPO: 16MIN
  74. 74. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? <a role=“menuitem” aria-________=“ ”> Atributos importados. lista de roles & estados http://www.w3.org/WAI/PF/aria/appendices#quickref Atalho: http://33es.sl.pt 4 ARIA accessible rich internet applications Tuesday, May 25, 2010
  75. 75. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? (resumo) HTML5 Optimização da Novas relações nos links Offline webapps Linguagem Doctype, atributos por omissão APIs de JavaScript HTML5/XHTML5 Web Forms 2.0 Client-side Storage sessionStorage, localStorage, webDB novos elementos Comunicação/Threading section, nav, footer, etc. Media elements Websockets, Webworkers <audio> & <video> ARIA Geolocation accessible rich internet applications Experience Canvas drag-n-drop Microdata Tuesday, May 25, 2010
  76. 76. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? (resumo) HTML5 Optimização da Novas relações nos links Offline webapps Linguagem Doctype, atributos por omissão APIs de JavaScript HTML5/XHTML5 Web Forms 2.0 Client-side Storage sessionStorage, localStorage, webDB novos elementos Comunicação/Threading section, nav, footer, etc. Media elements Websockets, Webworkers <audio> & <video> ARIA Geolocation accessible rich internet applications Experience 5 Canvas drag-n-drop Microdata Tuesday, May 25, 2010
  77. 77. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB 5 Microdata artigo http://www.alistapart.com/articles/semanticsinhtml5/ Atalho: http://33et.sl.pt Tuesday, May 25, 2010
  78. 78. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? “No matter how many elements we bolt on, we will always think of more semantic goodness to add to HTML.” John Allsopp west civ in http://www.alistapart.com/articles/semanticsinhtml5/ 5 Microdata Atalho: http://33et.sl.pt halans Tuesday, May 25, 2010 It is necessary to evolve HTML incrementally. Outubro 2006
  79. 79. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? <p> itemscope itemtype=“http://microformats.org/profile/hcard” Leeroy Jenkins <span itemprop=“fn”></span> <a href=“mailto:leeroy@wow.eu”> itemprop=“email” email do leeroy </a> </p> 5 Microdata Tuesday, May 25, 2010
  80. 80. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? <p itemscope itemtype=“http://microformats.org/profile/hcard”> <span itemprop=“fn”>Leeroy Jenkins</span> <a itemprop=“email” href=“mailto:leeroy@wow.eu”> email do leeroy </a> </p> 5 Microdata Tuesday, May 25, 2010
  81. 81. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? <p itemscope itemtype=“http://microformats.org/profile/hcard”> <span itemprop=“fn”>Leeroy Jenkins</span> <a itemprop=“email” href=“mailto:leeroy@wow.eu”> email do leeroy </a> </p> 5 Microdata Tuesday, May 25, 2010
  82. 82. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? <p itemscope itemtype=“http://microformats.org/profile/hcard”> <span itemprop=“fn”>Leeroy Jenkins</span> <a itemprop=“email” href=“mailto:leeroy@wow.eu”> email do leeroy </a> </p> <http://microformats.org/profile/hcard> FN: Leeroy Jenkins EMAIL: leeroy@wow.eu 5 Microdata Tuesday, May 25, 2010
  83. 83. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? <p itemscope itemtype=“http://microformats.org/profile/hcard”> <span itemprop=“fn”>Leeroy Jenkins</span> <a itemprop=“email” href=“mailto:leeroy@wow.eu”> email do leeroy </a> </p> <http://microformats.org/profile/hcard> FN: Leeroy Jenkins EMAIL: leeroy@wow.eu 5 Microdata Tuesday, May 25, 2010
  84. 84. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? data-* Atributos para guardar dados úteis a scripts. <section id=“noticias” data-zone=“hp_noticias”> ... 5 Microdata Tuesday, May 25, 2010 itemscope => [elemento] <meta> => @content <audio>, <embed>, <iframe>, <img>, <source>, <video> => @src <a>, <area>, <link> => @href <object> => @data <time> => @datetime
  85. 85. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? (resumo) HTML5 Optimização da Novas relações nos links Offline webapps Linguagem Doctype, atributos por omissão APIs de JavaScript HTML5/XHTML5 Web Forms 2.0 Client-side Storage sessionStorage, localStorage, webDB novos elementos Comunicação/Threading section, nav, footer, etc. Media elements Websockets, Webworkers <audio> & <video> ARIA Geolocation accessible rich internet applications Experience Canvas drag-n-drop Microdata Tuesday, May 25, 2010 TEMPO: 21MIN
  86. 86. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? (resumo) HTML5 Optimização da 6 Novas relações nos links Offline webapps Linguagem Doctype, atributos por omissão APIs de JavaScript HTML5/XHTML5 Web Forms 2.0 Client-side Storage sessionStorage, localStorage, webDB novos elementos Comunicação/Threading section, nav, footer, etc. Media elements Websockets, Webworkers <audio> & <video> ARIA Geolocation accessible rich internet applications Experience Canvas drag-n-drop Microdata Tuesday, May 25, 2010 TEMPO: 21MIN
  87. 87. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 6 Novas relações nos links <a rel=“_________” href=“_____” <link rel=“_________” href=“_____” <area rel=“_________” href=“_____” Tuesday, May 25, 2010 TEMPO: 21MIN
  88. 88. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 6 Novas relações nos links rel=“_____” <link> <a> & <area> rel=“_____” <link> <a> & <area> alternate   pingback   archives   prefetch   author   prev   bookmark   search   external   stylesheet   first   sidebar   help   tag   icon   up   index   last   license   next   nofollow   noreferrer   Tuesday, May 25, 2010
  89. 89. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 6 Novas relações nos links rel=“_____” <link> <a> & <area> rel=“_____” <link> <a> & <area> alternate   pingback   archives   prefetch   author   prev   bookmark   search   external   stylesheet   first   sidebar   help   tag   icon   up   index   last   license   next   nofollow   noreferrer   Tuesday, May 25, 2010
  90. 90. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 6 Novas relações nos links rel=“_____” <link> <a> & <area> rel=“_____” <link> <a> & <area> alternate   pingback   archives   prefetch   author   prev   bookmark   search   external   stylesheet   first   sidebar   help   tag   icon   up   index   last   Tipos de Links — HTML4 license   http://www.w3.org/TR/REC-html40/types.html#type-links Atalho: http://341n.sl.pt next   nofollow   Tipos de Links — HTML5 http://dev.w3.org/html5/spec/Overview.html#linkTypes noreferrer   Atalho: http://341o.sl.pt Tuesday, May 25, 2010
  91. 91. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? (resumo) HTML5 Optimização da Novas relações nos links Offline webapps Linguagem Doctype, atributos por omissão APIs de JavaScript HTML5/XHTML5 Web Forms 2.0 Client-side Storage sessionStorage, localStorage, webDB novos elementos Comunicação/Threading section, nav, footer, etc. Media elements Websockets, Webworkers <audio> & <video> ARIA Geolocation accessible rich internet applications Experience Canvas drag-n-drop Microdata Tuesday, May 25, 2010
  92. 92. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? (resumo) HTML5 Optimização da Novas relações nos links Offline webapps Linguagem Doctype, atributos por omissão APIs de JavaScript 7 HTML5/XHTML5 Web Forms 2.0 Client-side Storage sessionStorage, localStorage, webDB novos elementos Comunicação/Threading section, nav, footer, etc. Media elements Websockets, Webworkers <audio> & <video> ARIA Geolocation accessible rich internet applications Experience Canvas drag-n-drop Microdata Tuesday, May 25, 2010
  93. 93. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 7 Web Forms 2.0 Tuesday, May 25, 2010
  94. 94. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 7 Web Forms 2.0 Um aspecto em comum... JavaScript. Tuesday, May 25, 2010
  95. 95. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? Tipos de input <input type=“________” 7 Web Forms 2.0 •search •week •tel •time •url •datetime-local •email •number •datetime •range •date •color •month Tuesday, May 25, 2010
  96. 96. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 7 Web Forms 2.0 Tuesday, May 25, 2010
  97. 97. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB Tuesday, May 25, 2010
  98. 98. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? Atributos novos 7 Web Forms 2.0 •autocomplete •pattern •list usado com <datalist> •min •readonly •max •size •step •required •placeholder •multiple •maxlength Tuesday, May 25, 2010
  99. 99. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? Atributos novos 7 Web Forms 2.0 •autocomplete •pattern •list usado com <datalist> •min •readonly •max •size •step •required •placeholder •multiple •maxlength Tuesday, May 25, 2010
  100. 100. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? (resumo) HTML5 Optimização da Novas relações nos links Offline webapps Linguagem Doctype, atributos por omissão APIs de JavaScript HTML5/XHTML5 Web Forms 2.0 Client-side Storage sessionStorage, localStorage, webDB novos elementos Comunicação/Threading section, nav, footer, etc. Media elements Websockets, Webworkers <audio> & <video> ARIA Geolocation accessible rich internet applications Experience Canvas drag-n-drop Microdata Tuesday, May 25, 2010
  101. 101. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? (resumo) HTML5 Optimização da Novas relações nos links Offline webapps Linguagem Doctype, atributos por omissão APIs de JavaScript HTML5/XHTML5 Web Forms 2.0 Client-side Storage sessionStorage, localStorage, webDB novos elementos 8 Comunicação/Threading section, nav, footer, etc. Media elements Websockets, Webworkers <audio> & <video> ARIA Geolocation accessible rich internet applications Experience Canvas drag-n-drop Microdata Tuesday, May 25, 2010
  102. 102. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 8 Media elements <audio> & <video> Tuesday, May 25, 2010 CUE IN JOKE! “Xô!”------------------------------------------------
  103. 103. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 8 Media elements <audio> & <video> Tuesday, May 25, 2010
  104. 104. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 8 Media elements <audio> & <video> xjy Tuesday, May 25, 2010
  105. 105. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 8 Media elements <audio> & <video> <audio> & <video> Suporte nativo de componentes multimédia. Tuesday, May 25, 2010
  106. 106. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB http://en.wikipedia.org/wiki/Tarzan_yell Atalho: http://34c1.sl.pt Tuesday, May 25, 2010 28min?
  107. 107. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB http://en.wikipedia.org/wiki/Tarzan_yell Atalho: http://34c1.sl.pt Tuesday, May 25, 2010 28min?
  108. 108. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB http://9elements.com/io/projects/html5/canvas/ Atalho: http://vj9.sl.pt Tuesday, May 25, 2010 28min?
  109. 109. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB http://youtube.com/html5 Atalho: http://34c8.sl.pt Tuesday, May 25, 2010
  110. 110. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB A LUTA DOS CODECS Augusto Brazio Tuesday, May 25, 2010 TEMPO: 29MIN
  111. 111. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB A LUTA DOS CODECS (audio) wav mp3 ogg vorbis aac +3.5 +4 +4 +3.5 +4 +10.50 +3b +3b +10.50 +3b 9 9 final 2010? final 2010? Augusto Brazio Tuesday, May 25, 2010 TEMPO: 29MIN
  112. 112. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB A LUTA DOS CODECS (video) NO h.264 ogg theora webm VO +4 +3.5 +3.7† 10.50 +3b 10.50 +6? † 10.54† 9† 9*† final 2010? final 2010? Augusto Brazio † Versões não finais/lançadas * Requererá download e instalação do codec. Tuesday, May 25, 2010 IE9 & Chrome & Safari = também suportam AAC
  113. 113. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 8 Media elements <audio> & <video> <audio autoplay controls <video controls preload loop src=“yui.m4v”> src=“discurso.mp3”> </video> </audio> Tuesday, May 25, 2010
  114. 114. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 8 Media elements <audio> & <video> <audio controls> <video controls> <source src=“a.ogg” <source src=“yui.mp4” type=“video/ type=“audio/ogg”> mp4;codecs=‘avc1.42E01E, mp4a. 40.2’” media=“screen”> <source src=“a.mp3” <track kind=“subtitles” type=“audio/mp3”> label=“Legendas (pt)” src=“yui- legendas.srt” srclang=“pt”> </audio> </video> Tuesday, May 25, 2010 Track kinds: subtitles, captions, descriptions, chapters, metadata srt = http://en.wikipedia.org/wiki/SubRip#SubRip_Format
  115. 115. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 8 Media elements <audio> & <video> <script> new Audio (‘exemplo.mp3’); </script> Tuesday, May 25, 2010
  116. 116. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 8 Media elements <audio> & <video> Tuesday, May 25, 2010
  117. 117. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 8 Media elements <audio> & <video> mais info sobre o elemento audio http://www.whatwg.org/specs/web-apps/current-work/#audio Atalho: http://34dn.sl.pt Tuesday, May 25, 2010
  118. 118. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 8 Media elements <audio> & <video> mais info sobre o elemento audio http://www.whatwg.org/specs/web-apps/current-work/#audio Atalho: http://34dn.sl.pt mais info sobre o elemento video http://www.whatwg.org/specs/web-apps/current-work/#video Atalho: http://34do.sl.pt Tuesday, May 25, 2010
  119. 119. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 8 Media elements <audio> & <video> mais info sobre o elemento audio http://www.whatwg.org/specs/web-apps/current-work/#audio Atalho: http://34dn.sl.pt mais info sobre o elemento video http://www.whatwg.org/specs/web-apps/current-work/#video Atalho: http://34do.sl.pt mais info sobre o elemento source http://www.whatwg.org/specs/web-apps/current-work/#the-source-element Atalho: http://34dm.sl.pt Tuesday, May 25, 2010
  120. 120. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 8 Media elements <audio> & <video> mais info sobre o elemento audio http://www.whatwg.org/specs/web-apps/current-work/#audio Atalho: http://34dn.sl.pt mais info sobre o elemento video http://www.whatwg.org/specs/web-apps/current-work/#video Atalho: http://34do.sl.pt mais info sobre o elemento source http://www.whatwg.org/specs/web-apps/current-work/#the-source-element Atalho: http://34dm.sl.pt mais info sobre o elemento track http://www.whatwg.org/specs/web-apps/current-work/#the-track-element Atalho: http://34dp.sl.pt Tuesday, May 25, 2010
  121. 121. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? (resumo) HTML5 Optimização da Novas relações nos links Offline webapps Linguagem Doctype, atributos por omissão APIs de JavaScript HTML5/XHTML5 Web Forms 2.0 Client-side Storage sessionStorage, localStorage, webDB novos elementos Comunicação/Threading section, nav, footer, etc. Media elements Websockets, Webworkers <audio> & <video> ARIA Geolocation accessible rich internet applications Experience Canvas drag-n-drop Microdata Tuesday, May 25, 2010
  122. 122. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? (resumo) HTML5 Optimização da Novas relações nos links Offline webapps Linguagem Doctype, atributos por omissão APIs de JavaScript HTML5/XHTML5 Web Forms 2.0 Client-side Storage sessionStorage, localStorage, webDB novos elementos Comunicação/Threading section, nav, footer, etc. Media elements Websockets, Webworkers <audio> & <video> ARIA Geolocation accessible rich internet applications 9 Experience Canvas drag-n-drop Microdata Tuesday, May 25, 2010
  123. 123. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 9 Canvas Tuesday, May 25, 2010 JOKE!! MAGIA TEMPO: 34MIN ----------------------------------------
  124. 124. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 9 Canvas Tuesday, May 25, 2010 TEMPO: 34MIN
  125. 125. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 9 Canvas <canvas> Elemento que permite manipulação gráfica através de JavaScript. Consegue importar conteúdo de <video>s. Exporta conteúdo por data uri’s. Ex: data:image/png;base64,iVBORw0KGgoAAAANSUhE(...) Tuesday, May 25, 2010
  126. 126. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 9 Canvas <canvas id=“quadro”> Aviso de falta de suporte. </canvas> <script> var ctx = $(‘quadro’).getContext(‘2d’); ctx.<função gráfica>; var png = $(‘quadro’).toDataURL(‘image/png’); </script> Tuesday, May 25, 2010
  127. 127. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 9 Canvas Contexto: 2D função gráfica atributos scale(x,y); globalAlpha rotate(rad); globalCompositionOperation translate(x,y); strokeStyle transform(m11, m12, m21, m22, dx, dy); fillStyle ... ... Tuesday, May 25, 2010
  128. 128. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 9 Canvas Contexto: 2D função gráfica atributos scale(x,y); globalAlpha rotate(rad); globalCompositionOperation translate(x,y); strokeStyle transform(m11, m12, m21, m22, dx, dy); fillStyle ... ... Mais em http://www.whatwg.org/specs/web-apps/current-work/#canvas-context-2d Atalho: http://34dx.sl.pt Tuesday, May 25, 2010
  129. 129. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 9 Canvas Contexto: WebGL Tuesday, May 25, 2010
  130. 130. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? 9 Canvas Contexto: WebGL Mais em https://developer.mozilla.org/en/WebGL Atalho: http://34oe.sl.pt Tuesday, May 25, 2010
  131. 131. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? (resumo) HTML5 Optimização da Novas relações nos links Offline webapps Linguagem Doctype, atributos por omissão APIs de JavaScript HTML5/XHTML5 Web Forms 2.0 Client-side Storage sessionStorage, localStorage, webDB novos elementos Comunicação/Threading section, nav, footer, etc. Media elements Websockets, Webworkers <audio> & <video> ARIA Geolocation accessible rich internet applications Experience Canvas drag-n-drop Microdata Tuesday, May 25, 2010
  132. 132. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? (resumo) HTML5 Optimização da Novas relações nos links 10 Offline webapps Linguagem Doctype, atributos por omissão APIs de JavaScript HTML5/XHTML5 Web Forms 2.0 Client-side Storage sessionStorage, localStorage, webDB novos elementos Comunicação/Threading section, nav, footer, etc. Media elements Websockets, Webworkers <audio> & <video> ARIA Geolocation accessible rich internet applications Experience Canvas drag-n-drop Microdata Tuesday, May 25, 2010
  133. 133. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? Antes 10 Offline webapps 1 INTERNET 2 INTERNET Agora 1 INTERNET 2 INTERNET Tuesday, May 25, 2010
  134. 134. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? http://example.com/index.html <!doctype html> 10 Offline webapps <html manifest=“/navio.manifest”> <head> ... http://example.com/navio.manifest CACHE MANIFEST index.html ajuda.html css/screen.css js/entire-app.js imgs/css-sprites.png NETWORK: check.php #version12 Tuesday, May 25, 2010
  135. 135. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? http://example.com/index.html <!doctype html> 10 Offline webapps <html manifest=“/navio.manifest”> <head> ... http://example.com/navio.manifest servir com mime-type correcto: CACHE MANIFEST text/cache-manifest index.html ajuda.html css/screen.css js/entire-app.js imgs/css-sprites.png ficheiros estáticos (cache) NETWORK: check.php ficheiros dinâmicos (sem cache) #version12 cache-busting Tuesday, May 25, 2010
  136. 136. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? <script> 10 Offline webapps var online = navigator.onLine; if (online) { // sync? } else { // mostrar aviso offline? } window.addEventListener ( ‘online’, function () { // remover aviso offline? }); window.addEventListener ( ‘offline’, function () { // remover aviso offline? }); </script> Tuesday, May 25, 2010
  137. 137. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? <script> 10 Offline webapps var online = navigator.onLine; if (online) { // sync? } else { “This attribute is inherently unreliable. A computer can be // mostrar aviso offline? connected to a network without having Internet access.” } window.addEventListener ( ‘online’, function () { // remover aviso offline? }); window.addEventListener ( ‘offline’, function () { // remover aviso offline? }); </script> Tuesday, May 25, 2010
  138. 138. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? <script> 10 Offline webapps var online = navigator.onLine; if (online) { // sync? } else { “This attribute is inherently unreliable. A computer can be // mostrar aviso offline? connected to a network without having Internet access.” } window.addEventListener ( ‘online’, function () { // remover aviso offline? }); window.addEventListener ( ‘offline’, function () { // remover aviso offline? }); </script> Tuesday, May 25, 2010
  139. 139. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? (resumo) HTML5 Optimização da Novas relações nos links Offline webapps Linguagem Doctype, atributos por omissão APIs de JavaScript HTML5/XHTML5 Web Forms 2.0 Client-side Storage sessionStorage, localStorage, webDB novos elementos Comunicação/Threading section, nav, footer, etc. Media elements Websockets, Webworkers <audio> & <video> ARIA Geolocation accessible rich internet applications Experience Canvas drag-n-drop Microdata Tuesday, May 25, 2010 TEMPO: 38MIN ----------------------------------------
  140. 140. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? (resumo) HTML5 Optimização da Novas relações nos links Offline webapps Linguagem Doctype, atributos por omissão APIs de JavaScript HTML5/XHTML5 Web Forms 2.0 11 Client-side Storage sessionStorage, localStorage, webDB novos elementos Comunicação/Threading section, nav, footer, etc. Media elements Websockets, Webworkers <audio> & <video> ARIA Geolocation accessible rich internet applications Experience Canvas drag-n-drop Microdata Tuesday, May 25, 2010 TEMPO: 38MIN ----------------------------------------
  141. 141. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? [tab#1] sessionStorage.setItem(‘foo’, ‘bar’ sessionStorage Objecto de armazenamento [tab#2] sessionStorage.getItem(‘foo’); permanente durante uma // => ‘bar’ sessão. 11 Client-side Storage sessionStorage, localStorage, webDB Pares chave/valor estão isolados, não acessíveis noutras tabs/janelas. localStorage Objecto de armazenamento permanente (perdura após localStorage.setItem(‘foo’, ‘bar’); fim de sessão). *browser fechado* Pares chave/valor estão *dia seguinte* localStorage.getItem(‘foo’); acessíveis de todas as // => ‘bar’ tabs/janelas. Tuesday, May 25, 2010 TEMPO: 38MIN ----------------------------------------
  142. 142. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? webDB Interface com um repositório similar a SQLlite. 11 Client-side Storage Para dados estruturados e relacionais. sessionStorage, localStorage, webDB Usado por webapps online e offline assim como por webworkers(coming up next!). var db = openDatabase ( ‘nome’, ‘v1.5’, 1024); // uso esperado:1024bytes db.transaction('create table t1 (t1key INTEGER PRIMARY KEY,data TEXT,num double,timeEnter DATE);'); Tuesday, May 25, 2010
  143. 143. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? webDB Interface com um repositório similar a SQLlite. 11 Client-side Storage Para dados estruturados e relacionais. sessionStorage, localStorage, webDB Usado por webapps online e offline assim como por webworkers(coming up next!). var db = openDatabase ( ‘nome’, ‘v1.5’, 1024); // uso esperado:1024bytes db.transaction('create table t1 (t1key INTEGER PRIMARY KEY,data TEXT,num double,timeEnter DATE);'); Mais em http://dev.w3.org/html5/webdatabase/ Atalho: http://34ex.sl.pt Tuesday, May 25, 2010
  144. 144. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? (resumo) HTML5 Optimização da Novas relações nos links Offline webapps Linguagem Doctype, atributos por omissão APIs de JavaScript HTML5/XHTML5 Web Forms 2.0 Client-side Storage sessionStorage, localStorage, webDB novos elementos Comunicação/Threading section, nav, footer, etc. Media elements Websockets, Webworkers <audio> & <video> ARIA Geolocation accessible rich internet applications Experience Canvas drag-n-drop Microdata Tuesday, May 25, 2010
  145. 145. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? (resumo) HTML5 Optimização da Novas relações nos links Offline webapps Linguagem Doctype, atributos por omissão APIs de JavaScript HTML5/XHTML5 Web Forms 2.0 Client-side Storage sessionStorage, localStorage, webDB novos elementos 12 Comunicação/Threading section, nav, footer, etc. Media elements Websockets, Webworkers <audio> & <video> ARIA Geolocation accessible rich internet applications Experience Canvas drag-n-drop Microdata Tuesday, May 25, 2010
  146. 146. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? Websockets API var socket = new WebSocket('ws://game.example.com:12010/updates'); socket.onopen = function () { setInterval(function() { if (socket.bufferedAmount == 0) socket.send(getUpdateData()); }, 50); }; 12 Comunicação/Threading Websockets, Webworkers Server-sent Events var stocks = new EventSource("http://stocks.example.com/ticker.php"); stocks.onmessage = function (event) { var data = event.data.split('n'); data: YHOO updateStocks(data[0], data[1], data[2]); data: +2 }; data: 10 Tuesday, May 25, 2010
  147. 147. ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? Webworkers Executar código complexo e demorado sem que bloqueie o event-loop normal do JavaScript nem o GUI do browser. <script> 12 Comunicação/Threading var w = new Worker('worker.js'); Websockets, Webworkers w.onmessage = function(ev) { do_something(ev.data); worker.js }; var n = 1; </script> search: while (true) { n += 1; for (var i = 2; i <= Math.sqrt(n); i += 1) if (n % i == 0) continue search; // found a prime! postMessage(n); } Tuesday, May 25, 2010
  1. A particular slide catching your eye?

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

×