Web Standards




    Jorge Encarnação   1
As standards hoje
●   HTML5 > HTML
●   Vantagens / Novidades
●   Quando posso usar?




                     Jorge Encarnação   2
As standards hoje
●   HTML5 > HTML




                   Jorge Encarnação   3
Missão
●   Definir um rumo para a Web
●   Garantir acessibilidade
●   Manter a semântica




                       Jorge Encarnação   4
As standards hoje
●   HTML5 > HTML
●   Vantagens / Novidades




                     Jorge Encarnação   5
Vantagens
●   Offline
    –   Application cache
    –   Persistant data




                            Jorge Encarnação   6
Vantagens
●   Storage
    –   Pode sincronizar com servidor
    –   Modelo de programação mais simples
    –   Mais vulnerável
    –   Dados não são omnipresentes
    –   Storage + Offline = much win!!




                           Jorge Encarnação   7
Vantagens
●   Web sockets e Server-sent Events
    –   Ligação mais eficiente




                           Jorge Encarnação   8
Vantagens
●   File APIs
    –   Ler ficheiros
    –   Gravar ficheiros num local temporário
    –   Ler directorias recursivamente
    –   File drag and drop




                             Jorge Encarnação   9
Vantagens
●   Semantics
    –   Media elements
    –   Structural elements
        ●   <article> <aside> <small>
    –   Link Relations
        ●      <a rel='license' href="http://www.opensource.org/licenses/mit-
            license.php">MIT Licensed</a>
        ●     <a rel='help' href="help.html">Site help</a>
    –   Microdata


                                      Jorge Encarnação                          10
Vantagens
●   Audio and Video
    –   Audio e Video nativos
    –   + Canvas, CSS , SVG




                          Jorge Encarnação   11
As standards hoje
●   HTML5 > HTML
●   Vantagens / Novidades
●   Quando posso usar?




                     Jorge Encarnação   12
Quando posso usar?




      Jorge Encarnação   13
Usar agora!
●   Verificar Suporte - http://caniuse.com/
●   Progressive Enhancement ou Graceful
    degradation?
●   http://css3generator.com/




                       Jorge Encarnação       14
Usar agora!
●   Respeitar as standards!
    –   Seguir as especificações do markup
    –   Usar fallbacks no CSS
    –   Usar devidamente os prefixos dos browsers




                          Jorge Encarnação          15
●   Obrigado


               Jorge Encarnação
                Twitter: @jfgen




                   Jorge Encarnação   16

HTML5

  • 1.
    Web Standards Jorge Encarnação 1
  • 2.
    As standards hoje ● HTML5 > HTML ● Vantagens / Novidades ● Quando posso usar? Jorge Encarnação 2
  • 3.
    As standards hoje ● HTML5 > HTML Jorge Encarnação 3
  • 4.
    Missão ● Definir um rumo para a Web ● Garantir acessibilidade ● Manter a semântica Jorge Encarnação 4
  • 5.
    As standards hoje ● HTML5 > HTML ● Vantagens / Novidades Jorge Encarnação 5
  • 6.
    Vantagens ● Offline – Application cache – Persistant data Jorge Encarnação 6
  • 7.
    Vantagens ● Storage – Pode sincronizar com servidor – Modelo de programação mais simples – Mais vulnerável – Dados não são omnipresentes – Storage + Offline = much win!! Jorge Encarnação 7
  • 8.
    Vantagens ● Web sockets e Server-sent Events – Ligação mais eficiente Jorge Encarnação 8
  • 9.
    Vantagens ● File APIs – Ler ficheiros – Gravar ficheiros num local temporário – Ler directorias recursivamente – File drag and drop Jorge Encarnação 9
  • 10.
    Vantagens ● Semantics – Media elements – Structural elements ● <article> <aside> <small> – Link Relations ● <a rel='license' href="http://www.opensource.org/licenses/mit- license.php">MIT Licensed</a> ● <a rel='help' href="help.html">Site help</a> – Microdata Jorge Encarnação 10
  • 11.
    Vantagens ● Audio and Video – Audio e Video nativos – + Canvas, CSS , SVG Jorge Encarnação 11
  • 12.
    As standards hoje ● HTML5 > HTML ● Vantagens / Novidades ● Quando posso usar? Jorge Encarnação 12
  • 13.
    Quando posso usar? Jorge Encarnação 13
  • 14.
    Usar agora! ● Verificar Suporte - http://caniuse.com/ ● Progressive Enhancement ou Graceful degradation? ● http://css3generator.com/ Jorge Encarnação 14
  • 15.
    Usar agora! ● Respeitar as standards! – Seguir as especificações do markup – Usar fallbacks no CSS – Usar devidamente os prefixos dos browsers Jorge Encarnação 15
  • 16.
    Obrigado Jorge Encarnação Twitter: @jfgen Jorge Encarnação 16