HTML5 - O Futuro da web

  • 3,024 views
Uploaded on

Apresentação sobre HTML5 ministrada em abril de 2010.

Apresentação sobre HTML5 ministrada em abril de 2010.

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,024
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. O futuro da internet
  • 2. EVOLUÇÃO
  • 3.
    • O HTML 4.0 surgiu em 1997, há mais de uma década;
    • O HTML5 começou a ser desenvolvido em 2004, com o intuito de suprir as novas expectativas do usuário;
    • O projeto, iniciado pela W3C, conta com o apoio de Apple, Mozilla, Opera e Microsoft.
  • 4. SEMÂNTICA
  • 5.
    • A estruturação de páginas em HTML 4.0 é basicamente constituída pelo elemento <div>, com classes e IDs diferentes;
    • Novas tags facilitam a semântica no documento HTML;
    • Há uma maior visibilidade aos mecanismos de busca;
    • Fim da “sopa de DIVs”;
    • Fim das grandes quantidades de IDs e classes.
  • 6.  
  • 7. ÁUDIO E VÍDEO
  • 8.
    • Com o HTML 4.0 era impossível anexar áudio ou vídeo na página, e para suprir essa necessidade surgiram as tecnologias proprietárias (Flash, Silverlight);
    • No HTML5 temos a inclusão das tags <audio> e <video>, que permitem anexar estes elementos sem a necessidade de nenhum plugin.
  • 9.  
  • 10.
    • YouTube já utiliza uma página com vídeos em HTML5: http://www.youtube.com/html5
  • 11. O PODEROSO ELEMENTO CANVAS
  • 12.
    • O elemento <canvas> consiste na utilização de elementos JavaScript para a criação de gráficos no navegador, sem a necessidade de nenhum plugin instalado;
    • Este é o principal motivo pelo qual o HTML5 é considerado uma ameaça às Rich Internet Applications (RIA) proprietárias, como Flash, Silverlight e JavaFX;
  • 13.
    • Exemplos do poder do elemento <canvas>
      • http :// html5demos.com/canvas
      • http:// html5demos.com/canvas-grad
      • http://www.addyosmani.com/resources/googlebox /
      • http:// cs.helsinki.fi/u/ilmarihe/canvas_animation_demo/mozcampeu09.html
      • http://9elements.com/io/projects/html5/canvas /
  • 14. Drag & Drop
  • 15.
    • Com o HTML 5, podemos facilmente arrastar e soltar elementos no browser, tanto da própria página quanto do Desktop;
  • 16.
    • Exemplos de Drag & Drop com HTML 5
      • http:// html5demos.com/drag
      • http:// html5demos.com/drag-anything
      • http://wave.google.com
      • http://www.chromeexperiments.com/detail/browser-ball / (+ canvas)
  • 17. OUTRAS FUNCIONALIDADES
  • 18.
    • contenteditable (conteúdo editável)
      • http:// html5demos.com/contenteditable
  • 19.
    • Geolocation (localização geográfica)
      • http:// html5demos.com/geo
  • 20.
    • Network status (online/offline)
      • http:// html5demos.com/offline
  • 21.
    • Armazenamento de dados
      • http:// html5demos.com/storage
  • 22. IMPLANTAÇÃO
  • 23.
    • O HTML5 ainda está em fase de desenvolvimento;
    • Calendário de implantação do HTML5
      • Primeira especificação: 2012
      • Segunda especificação: 2015
      • Terceira especificação: 2019
      • Especificação final: 2022
    • Muitos sites já utilizam HTML5, incluindo YouTube, Google Wave, Apple, entre outros;
    • Existe um script que permite ao Internet Explorer ler as principais novas tags do HTML5
      • http://remysharp.com/2009/01/07/html5-enabling-script /
  • 24. REFERÊNCIAS
  • 25.
    • Lista de tags HTML5
      • http://www.pinceladasdaweb.com.br/html5/
    • HTML5 Doctor
      • http://html5doctor.com /
    • Pinceladas da Web
      • http://www.pinceladasdaweb.com.br/blog/category/html5 /
    • Chrome Experiments
      • http://www.chromeexperiments.com /
    • HTML5 Demos
      • http://html5demos.com /
    • Meus bookmarks (sim, eu pesquiso bastante sobre isso)
      • http:// delicious.com/aleromero/html5
  • 26. OBRIGADO :) Alexandre Romero