HTML5 Tags

Objectivos

• Conhecer as novas tags
• Para que servem
• Como tirar partido
• Quando e onde usar
• Validar HTML5

Como tornar a Web..

• mais semântica?
• mais pesquisável
• com melhor acessibilidade
• mais consistente

Elementos Semânticos

• Descrevem o conteúdo
• Para máquinas e humanos

Elementos não semânticos

• etc.
• Outros exemplos?

Elementos semânticos

• etc.
  7.

  
  

  
  

  8.

  Novos Elementos Semânticos

  • e
  9.

  Untitled Slide

  10.

  Untitled Slide

  11.

  Microdata

  Dados Estruturados
  12.

  Forms

  Novos atributos
  13.

  Exercício

  14.

  Recapitulando

  • HTML mais semântico
  • Maior "searchability"
  • Maior accessibilidade
  • Maior consistência
  15.

  HTML5 APIs

  Novas possibilidades para a Web

  Photo by Damian Morys Photography
  16.

  HTML5 APIs

  • Offline
  • Multimedia
  • File API
  • Drag & Drop
  • Geolocation

  Photo by Damian Morys Photography
  17.

  HTML5 APIs

  • Web Workers
  • Local Storage
  • History API
  • Canvas
  • Muito mais..

  Photo by Damian Morys Photography
  18.

  canvas

  19.

  Canvas

  • permite desenhar em 2D por programação
  • texto, imagens e gráficos
  • rectângulos, linhas, gradientes e outros efeitos
  • apenas usando JavaScript
  • bibliotecas disponíveis para 3D, e.g. threejs.org

  Photo by Stuck in Customs
  20.

  corehtml5canvas.com

  21.

  Exemplos

  22.

  Audio + Video

  Photo by Instant Vantage
  23.

  Untitled Slide

  24.

  Untitled Slide

  25.

  Drag and Drop

  Nativo usando HTML5
  26.

  Untitled Slide

  27.

  Web Storage

  Photo by DRs Kulturarvsprojekt
  28.

  Web Storage

  • Guardar informação no lado do cliente
  • Sem JavaScript Cookies
  • Muito fácil de usar
  29.

  Web Storage

  • localStorage, persistent
  • sessionStorage, temporary
  • Storage events
  • Chave / Valor
  30.

  localStorage.setItem("key1", "value1");

  31.

  Geolocation

  32.

  Geolocation

  • Site de transportes públicos
  • Calcular custos de envio
  • Calcular moeda
  • Jogos
  • Inúmeras possibilidades
  33.

  Geolocation

  • GPS
  • Endereço IP, Wi-Fi
  • Wi-Fi
  • GSM / CDMA
  34.

  Untitled Slide

  35.

  Demo

  36.

  Offline / Online

  Photo by photosteve101
  37.

  Demo

  Photo by photosteve101
  38.

  Device Orientation

  Photo by marfis75
  39.

  Demo

  Photo by marfis75
  40.

  HTML5

  não é animações

  Photo by Keoni Cabral
  41.

  caniuse.com

  42.

  Feature Detection

  • O browser suporta a operação?
  • navigator.userAgent (não fiável)
  • if / else / if / else ..
  43.

  Modernizr

  • Biblioteca JavaScript
  • Detecta browser features
  • Podem escolher as features e gerar
  • http://modernizr.com
  • Gratuito
  44.

  Exercício

  • API de Drag and Drop
  • Tag de Video e Audio
  • Geolocation
  • Offline / Online
  45.

  Referências

  • Dive into HTML5: http://bit.ly/1zbSExq
  • HTML5 Demos: http://bit.ly/1tuXWla
  • HTML5 Rocks: http://bit.ly/1rd8fTy
  • Comunidade HTML5 PT: http://bit.ly/1sU3aWz
  • HTML5 Web Developer Guide: http://mzl.la/1sUdv51

  Photo by Nina Matthews Photography
  

  Nuno Morgadinho
  ×

  Error!

  Close