SlideShare uma empresa Scribd logo
1 de 33
Baixar para ler offline
<!DOCTYPE HTML>

             Andrew de Andrade
       andrew@deandrade.com.br
HTML 5
HTML 5
O que eu faço com pessoas que
        acham que IE é a Internet?




Instale o Firefox e siga estas instruções para
       deixar o Firefox parecendo o IE.
Javascript


1995
XMLHTTP


1998
XMLHttpRequest


2002
AJAX


2004
2005
HTML 4.01


1999
Plugin Hell
HTML 5
The World Wide
Web Consortium
The Web Hypertext Application
  Technology Working Group
        (WHAT-WG)
bjetivos
Evolução, não revolução
Applicações
Web Nativas
Eliminar
“Tag Soup”
HTML 5 Validator

HTML 5 Doctor
“Pave the Cow Paths”
Frequência de Classes
<div>
  <div>
    <div>

    <div>    Hell
    </div>
  </div>
</div>
<!DOCTYPE HTML>
<html lang="en">
  <head>
    <title>Artigo (HTML5)</title>
    <meta charset="utf-8">
  </head>
  <body>
    <header id="branding">Logo do site, search, etc.</header>
    <nav>
      <ul>
         <li>Navegação do site</li>
      </ul>
    </nav>
    <section id="content">
      <article> <!-- conteúdo principal (o artigo) -->
         <header>
           <h1>Titulo do artigo</h1>
           <p>Metadata do artigo</p>
         </header>
         <p>Conteúdo do artigo</p>
      </article>
      <section id="sidebar"> <!-- conteúdo secundario -->
         <h2>Titulo do sidebar</h2>
         <p>Conteúdo do sidebar</p>
      </section>
    </section>
    <footer id="footer">Footer</footer> <!-- um footer basico -->
  </body>
</html>
2009, 2012 ou 2022?
Exemplos:
  Video



• AppSpot HTML5 Video Demo
• YouTube HTML5 Demo
• Pat Chanezon’s Green Screen Demo
Exemplos: Web Workers




• Motion Tracking com Web Workers
• Prime Numbers com Web Workers
Exemplos: Canvas
•   Drawing Board

•   Paintweb

•   Blob Sallad

•   Bespin » Code in the Cloud

•   Ben Joffe’s Canvas Examples

•   Starfield

•   US Map Polygons

•   Box2D JS Physics Engine
Exemplo: Geolocation


• Geolocation | Where Am I?
Exemplo:
DB & App Cache

• DB and App Cache | Stickies
Outros Exemplos:
• HTML5 Drum Kit | RandomThink Labs
• Paul Rouget’s OpenWeb Demos
• Drag ‘n’ Drop Demo
• Nihilogic : Super Mario Kart Online
• Radiohead Ideotheque Canvas Demo
Blogs Recomendados
•   The WHATWG Blog

•   Hixie's Natural Log

•   Jeffrey Zeldman Presents The Daily Report

•   @boblet | random notes

•   Lachy’s Log

•   Opera Developer Community

•   P@ Log

•   Mozilla Developer Community

•   Surfin’ Safari - The WebKit Blog

•   Bruce Lawson’s personal site
Outros Links
•   HTML 5 Markup Language

•   HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

•   New elements in HTML 5

•   Yes, You Can Use HTML 5 Today!

•   HTML 5 differences from HTML 4

•   23 Essential HTML 5 Resources

•   HTML 5 canvas - the basics - Opera Dev

•   HTML5 Gallery

•   HTML5 Canvas Cheat Sheet

•   HTML Design Principles

•   Canvas Demos
Obrigado!

Mais conteúdo relacionado

Mais procurados

Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScriptCarlos Eduardo Kadu
 
Desenvolvimento de Módulos Divi Builder
Desenvolvimento de Módulos Divi BuilderDesenvolvimento de Módulos Divi Builder
Desenvolvimento de Módulos Divi BuilderDaniel Paz
 
Construção de sites educativos - Wix
Construção de sites educativos - WixConstrução de sites educativos - Wix
Construção de sites educativos - WixAntónio Pires
 
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBHTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBFábio Flatschart
 
Desenvolvendo com Dojo Toolkit
Desenvolvendo com Dojo ToolkitDesenvolvendo com Dojo Toolkit
Desenvolvendo com Dojo ToolkitFlávio Lisboa
 
Word camp sp 2017 willian marques
Word camp sp 2017   willian marquesWord camp sp 2017   willian marques
Word camp sp 2017 willian marquesWillian Marques
 
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignIntrodução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignGustavo Zimmermann
 
CODE N' TELL 17/02/2014
CODE N' TELL 17/02/2014CODE N' TELL 17/02/2014
CODE N' TELL 17/02/2014Rodrigo Donini
 
Introdução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignIntrodução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignGustavo Zimmermann
 
Drupal 7 - Nova Versão para Novos Desafios
Drupal 7 - Nova Versão para Novos DesafiosDrupal 7 - Nova Versão para Novos Desafios
Drupal 7 - Nova Versão para Novos DesafiosPaulino Michelazzo
 
Introdução a Bootstrap 3
Introdução a Bootstrap 3Introdução a Bootstrap 3
Introdução a Bootstrap 3Iago Effting
 
Ai1415 ad-tp2-g4-a
Ai1415 ad-tp2-g4-aAi1415 ad-tp2-g4-a
Ai1415 ad-tp2-g4-amfsmsl
 
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Daniel Makiyama
 

Mais procurados (20)

Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
 
Desenvolvimento de Módulos Divi Builder
Desenvolvimento de Módulos Divi BuilderDesenvolvimento de Módulos Divi Builder
Desenvolvimento de Módulos Divi Builder
 
Construção de sites educativos - Wix
Construção de sites educativos - WixConstrução de sites educativos - Wix
Construção de sites educativos - Wix
 
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBHTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
 
Bootstrap 4
Bootstrap 4Bootstrap 4
Bootstrap 4
 
Desenvolvendo com Dojo Toolkit
Desenvolvendo com Dojo ToolkitDesenvolvendo com Dojo Toolkit
Desenvolvendo com Dojo Toolkit
 
Html5 workshop
Html5 workshopHtml5 workshop
Html5 workshop
 
Word camp sp 2017 willian marques
Word camp sp 2017   willian marquesWord camp sp 2017   willian marques
Word camp sp 2017 willian marques
 
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignIntrodução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
 
CODE N' TELL 17/02/2014
CODE N' TELL 17/02/2014CODE N' TELL 17/02/2014
CODE N' TELL 17/02/2014
 
HTML5
HTML5HTML5
HTML5
 
Introdução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignIntrodução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX Design
 
Drupal 7 - Nova Versão para Novos Desafios
Drupal 7 - Nova Versão para Novos DesafiosDrupal 7 - Nova Versão para Novos Desafios
Drupal 7 - Nova Versão para Novos Desafios
 
Web components
Web componentsWeb components
Web components
 
Web components
Web componentsWeb components
Web components
 
Introdução a Bootstrap 3
Introdução a Bootstrap 3Introdução a Bootstrap 3
Introdução a Bootstrap 3
 
Ai1415 ad-tp2-g4-a
Ai1415 ad-tp2-g4-aAi1415 ad-tp2-g4-a
Ai1415 ad-tp2-g4-a
 
Codando com PHP e JQuery
Codando com PHP e JQueryCodando com PHP e JQuery
Codando com PHP e JQuery
 
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
 

Destaque

Introdução a linguagem de programação Python
Introdução a linguagem de programação PythonIntrodução a linguagem de programação Python
Introdução a linguagem de programação PythonMayron Cachina
 
Curso Python IFPB - Algoritmos
Curso Python IFPB - AlgoritmosCurso Python IFPB - Algoritmos
Curso Python IFPB - AlgoritmosDiego Lopes
 
Desvendando o python
Desvendando o pythonDesvendando o python
Desvendando o pythonRodrigo Lira
 
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!Thiago Nascimento Oliveira
 
Criação Web com Bootstrap e Material Design
Criação Web com Bootstrap e Material DesignCriação Web com Bootstrap e Material Design
Criação Web com Bootstrap e Material DesignDaniel Brandão
 
Programando para web com python - Introdução a Python
Programando para web com python - Introdução a PythonProgramando para web com python - Introdução a Python
Programando para web com python - Introdução a PythonAlvaro Oliveira
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01 Léo Dias
 
HTML5 Básico: Formulários (aula 2)
HTML5 Básico: Formulários (aula 2)HTML5 Básico: Formulários (aula 2)
HTML5 Básico: Formulários (aula 2)Gustavo Zimmermann
 
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
 
HTML5 Básico: Multimídia 1 (aula 3)
HTML5 Básico: Multimídia 1 (aula 3)HTML5 Básico: Multimídia 1 (aula 3)
HTML5 Básico: Multimídia 1 (aula 3)Gustavo Zimmermann
 
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGNCSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGNRenato Melo
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Jose Augusto Cintra
 
Python - Guia de bolso
Python - Guia de bolsoPython - Guia de bolso
Python - Guia de bolsoJean Lopes
 
A utilização do Bootstrap Para a Otimização de Páginas
A utilização do Bootstrap Para a Otimização de PáginasA utilização do Bootstrap Para a Otimização de Páginas
A utilização do Bootstrap Para a Otimização de PáginasRamon Sousa
 
Python para iniciantes
Python para iniciantesPython para iniciantes
Python para iniciantesrichardsonlima
 

Destaque (20)

Introdução a linguagem de programação Python
Introdução a linguagem de programação PythonIntrodução a linguagem de programação Python
Introdução a linguagem de programação Python
 
Curso Python IFPB - Algoritmos
Curso Python IFPB - AlgoritmosCurso Python IFPB - Algoritmos
Curso Python IFPB - Algoritmos
 
Desvendando o python
Desvendando o pythonDesvendando o python
Desvendando o python
 
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
 
Criação Web com Bootstrap e Material Design
Criação Web com Bootstrap e Material DesignCriação Web com Bootstrap e Material Design
Criação Web com Bootstrap e Material Design
 
Introdução a HTML5
Introdução a HTML5Introdução a HTML5
Introdução a HTML5
 
Servidores WEB
Servidores WEBServidores WEB
Servidores WEB
 
Html5 aula 01
Html5 aula 01Html5 aula 01
Html5 aula 01
 
Programando para web com python - Introdução a Python
Programando para web com python - Introdução a PythonProgramando para web com python - Introdução a Python
Programando para web com python - Introdução a Python
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
 
HTML5 Básico: Formulários (aula 2)
HTML5 Básico: Formulários (aula 2)HTML5 Básico: Formulários (aula 2)
HTML5 Básico: Formulários (aula 2)
 
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
 
HTML5 Básico: Multimídia 1 (aula 3)
HTML5 Básico: Multimídia 1 (aula 3)HTML5 Básico: Multimídia 1 (aula 3)
HTML5 Básico: Multimídia 1 (aula 3)
 
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGNCSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
 
Python - Guia de bolso
Python - Guia de bolsoPython - Guia de bolso
Python - Guia de bolso
 
A utilização do Bootstrap Para a Otimização de Páginas
A utilização do Bootstrap Para a Otimização de PáginasA utilização do Bootstrap Para a Otimização de Páginas
A utilização do Bootstrap Para a Otimização de Páginas
 
Python para iniciantes
Python para iniciantesPython para iniciantes
Python para iniciantes
 
html5.ppt
html5.ppthtml5.ppt
html5.ppt
 
Aprendendo python
Aprendendo pythonAprendendo python
Aprendendo python
 

Semelhante a HTML 5

O que todos os developers devem saber sobre seo
O que todos os developers devem saber sobre seoO que todos os developers devem saber sobre seo
O que todos os developers devem saber sobre seointrofini
 
Python mudando o modo de desenvolver para a internet
Python mudando o modo de desenvolver para a internetPython mudando o modo de desenvolver para a internet
Python mudando o modo de desenvolver para a internetMarcos Petry
 
Python mudando o modo de desenvolver para a web - Marcos Daniel Petry
Python mudando o modo de desenvolver para a web  - Marcos Daniel PetryPython mudando o modo de desenvolver para a web  - Marcos Daniel Petry
Python mudando o modo de desenvolver para a web - Marcos Daniel PetryTchelinux
 
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
 
Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento...
Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento...Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento...
Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento...Max Claus Nunes
 
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
 
Nadando em Dinheiro com jQuery
Nadando em Dinheiro com jQueryNadando em Dinheiro com jQuery
Nadando em Dinheiro com jQueryReinaldo Junior
 
Performance Codificando Night Week 2016
Performance Codificando Night Week 2016Performance Codificando Night Week 2016
Performance Codificando Night Week 2016Rodolfo Fadino Junior
 
Visão Geral do HTML5 e do Internet Explorer 9
Visão Geral do HTML5 e do Internet Explorer 9Visão Geral do HTML5 e do Internet Explorer 9
Visão Geral do HTML5 e do Internet Explorer 9Rodrigo Kono
 
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?Renato Bongiorno Bonfanti
 

Semelhante a HTML 5 (20)

O que todos os developers devem saber sobre seo
O que todos os developers devem saber sobre seoO que todos os developers devem saber sobre seo
O que todos os developers devem saber sobre seo
 
Curso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JSCurso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JS
 
HTML, parte 1
HTML, parte 1HTML, parte 1
HTML, parte 1
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
Aula html5
Aula html5Aula html5
Aula html5
 
Python mudando o modo de desenvolver para a internet
Python mudando o modo de desenvolver para a internetPython mudando o modo de desenvolver para a internet
Python mudando o modo de desenvolver para a internet
 
Python mudando o modo de desenvolver para a web - Marcos Daniel Petry
Python mudando o modo de desenvolver para a web  - Marcos Daniel PetryPython mudando o modo de desenvolver para a web  - Marcos Daniel Petry
Python mudando o modo de desenvolver para a web - Marcos Daniel Petry
 
Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)
 
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal
 
Html5 ass
Html5 assHtml5 ass
Html5 ass
 
JQuery
JQueryJQuery
JQuery
 
jQuery
jQueryjQuery
jQuery
 
jQuery
jQueryjQuery
jQuery
 
Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento...
Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento...Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento...
Ferramentas e bibliotecas que você deveria estar utilizando - Desenvolvimento...
 
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ú
 
Nadando em Dinheiro com jQuery
Nadando em Dinheiro com jQueryNadando em Dinheiro com jQuery
Nadando em Dinheiro com jQuery
 
HTML 5 e Open Web Platform
HTML 5 e Open Web PlatformHTML 5 e Open Web Platform
HTML 5 e Open Web Platform
 
Performance Codificando Night Week 2016
Performance Codificando Night Week 2016Performance Codificando Night Week 2016
Performance Codificando Night Week 2016
 
Visão Geral do HTML5 e do Internet Explorer 9
Visão Geral do HTML5 e do Internet Explorer 9Visão Geral do HTML5 e do Internet Explorer 9
Visão Geral do HTML5 e do Internet Explorer 9
 
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
 

HTML 5