SlideShare uma empresa Scribd logo
1 de 47
André Felizardo
Porque falar de HTML5?
Histórico
Definidas as especificações do
HTML
1990
1999
Lançada pelo W3C o HTML 4.1
HTML5 se tornou
recomendação do W3C
2014
Como era a semântica antes
do HTML5?
E daí?
SEO
Acessibilidade não é altruísmo.
VÍDEO AQUI
Decreto Federal nº 5.296/2004, artigo 8º
“I – acessibilidade: condição para utilização, com segurança e
autonomia, total ou assistida, dos espaços, mobiliários e
equipamentos urbanos, das edificações, dos serviços de
transporte e dos dispositivos, sistemas e meios de comunicação
e informação, por pessoa portadora de deficiência ou com
mobilidade reduzida;”
45.623.910 no BRASIL
1.671.082.700 no MUNDO
Fonte: IBGE e OMS
Tags de Estrutura
<aside>
<article>
<header>
<footer>
<hgroup>
<nav>
<section>
Atributos e campos de Formulário
Exemplo 1
Picture
Exemplo 2
HTML 5.1 -
O que vem daqui pra frente?
HTML 5.2 -
Como você criaria um
componente ?
<details>
<summary>Texto qualquer</summary>
<p>E um conteúdo aqui dentro.</p>
</details>
Exemplo 3
Como você criaria um
componente ?
<dialog open>
Texto qualquer aqui
</dialog>
Exemplo 4
Como você criaria opções de
menu ao clicar com o
botão direito?
<div contextmenu=“Allen”>
<p>Clique com o botão direito</p>
<menu type=“context” id=“Allen”>
<menuitem label=“Opção 1”></menuitem>
<menuitem label=“Opção 2”></menuitem>
</menu>
</div>
Obrigado ;)

Mais conteúdo relacionado

Semelhante a Html5+

HTML5 na FATEC - novembro 2010
HTML5 na FATEC - novembro 2010HTML5 na FATEC - novembro 2010
HTML5 na FATEC - novembro 2010liperuf
 
Modelo Brasileiro de Acessibilidade em Governo Eletrônico - e-MAG
Modelo Brasileiro de Acessibilidade em Governo Eletrônico - e-MAGModelo Brasileiro de Acessibilidade em Governo Eletrônico - e-MAG
Modelo Brasileiro de Acessibilidade em Governo Eletrônico - e-MAGGovBR
 
Palestra html5 e CSS3
Palestra html5 e CSS3Palestra html5 e CSS3
Palestra html5 e CSS3CELULA CURSOS
 
HTML 5 - Semana da Computação - UFF
HTML 5 - Semana da Computação - UFFHTML 5 - Semana da Computação - UFF
HTML 5 - Semana da Computação - UFFLeonardo Balter
 
Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociaisPanorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociaisReinaldo Ferraz
 
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
 
Aplicações web acessíveis
Aplicações web acessíveisAplicações web acessíveis
Aplicações web acessíveisLeandro Borges
 
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015Reinaldo Ferraz
 
Acessibilidade Digital (19/02/2013)
Acessibilidade Digital (19/02/2013)Acessibilidade Digital (19/02/2013)
Acessibilidade Digital (19/02/2013)Rodrigo Leme
 
IoTizando com JavaScript
IoTizando com JavaScriptIoTizando com JavaScript
IoTizando com JavaScriptHeider Lopes
 
Acessibilidade na Web - CPBR Recife 2012
Acessibilidade na Web - CPBR Recife 2012Acessibilidade na Web - CPBR Recife 2012
Acessibilidade na Web - CPBR Recife 2012Reinaldo Ferraz
 
Acessibilidade Web: Primeiros passos
Acessibilidade Web: Primeiros passosAcessibilidade Web: Primeiros passos
Acessibilidade Web: Primeiros passosVanessa Me Tonini
 
Html5 - Notas de aula
Html5 - Notas de aulaHtml5 - Notas de aula
Html5 - Notas de aulaclodiney cruz
 
Acessibilidade e e-MAG
Acessibilidade e e-MAGAcessibilidade e e-MAG
Acessibilidade e e-MAGGovBR
 

Semelhante a Html5+ (20)

HTML5 na FATEC - novembro 2010
HTML5 na FATEC - novembro 2010HTML5 na FATEC - novembro 2010
HTML5 na FATEC - novembro 2010
 
Modelo Brasileiro de Acessibilidade em Governo Eletrônico - e-MAG
Modelo Brasileiro de Acessibilidade em Governo Eletrônico - e-MAGModelo Brasileiro de Acessibilidade em Governo Eletrônico - e-MAG
Modelo Brasileiro de Acessibilidade em Governo Eletrônico - e-MAG
 
Palestra html5 e CSS3
Palestra html5 e CSS3Palestra html5 e CSS3
Palestra html5 e CSS3
 
HTML 5 - Semana da Computação - UFF
HTML 5 - Semana da Computação - UFFHTML 5 - Semana da Computação - UFF
HTML 5 - Semana da Computação - UFF
 
Html5 ass
Html5 assHtml5 ass
Html5 ass
 
Panorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociaisPanorama da Acessibilidade nas redes sociais
Panorama da Acessibilidade nas redes sociais
 
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
 
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...
 
Aplicações web acessíveis
Aplicações web acessíveisAplicações web acessíveis
Aplicações web acessíveis
 
Acessibilidade web
Acessibilidade webAcessibilidade web
Acessibilidade web
 
HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015HTML5, Mobile Web e além - Computer on the beach 2015
HTML5, Mobile Web e além - Computer on the beach 2015
 
Minicurso HTML5
Minicurso HTML5Minicurso HTML5
Minicurso HTML5
 
Acessibilidade Digital (19/02/2013)
Acessibilidade Digital (19/02/2013)Acessibilidade Digital (19/02/2013)
Acessibilidade Digital (19/02/2013)
 
IoTizando com JavaScript
IoTizando com JavaScriptIoTizando com JavaScript
IoTizando com JavaScript
 
HTML5
HTML5HTML5
HTML5
 
Acessibilidade na Web - CPBR Recife 2012
Acessibilidade na Web - CPBR Recife 2012Acessibilidade na Web - CPBR Recife 2012
Acessibilidade na Web - CPBR Recife 2012
 
Acessibilidade Web: Primeiros passos
Acessibilidade Web: Primeiros passosAcessibilidade Web: Primeiros passos
Acessibilidade Web: Primeiros passos
 
Html5 - Notas de aula
Html5 - Notas de aulaHtml5 - Notas de aula
Html5 - Notas de aula
 
W3 C E Usabilidade
W3 C E UsabilidadeW3 C E Usabilidade
W3 C E Usabilidade
 
Acessibilidade e e-MAG
Acessibilidade e e-MAGAcessibilidade e e-MAG
Acessibilidade e e-MAG
 

Html5+

Notas do Editor

  1. Eu quero começar explicando pra vocês porque eu escolhi falar de HTML, mais especificamente de HTML5.
  2. A gente tá começando a adotar o Scrum aqui na equipe. Portanto é bom que a maioria saiba HTML, pois se entrar um projeto com pouca demanda de Front-end, e não tiver ninguém específico dessa disciplina atuando (atualmente eu e o João). É muito importante saber o que é possível ou não em HTML, que tem melhorado muito em questões de usabilidade para pensar na melhor experiência possível para o usuários nos projetos. Atualmente, com o desenvolvimento de aplicações híbridas a importância do HTML tem crescido e sendo utilizada não só em sites como em apps também como com o Sencha Touch, PhoneGap e o Ionic.
  3. Especificações funcionais definidas em 1990. 1999 lançada pela W3C o HTML 4.01 2014 HTML5 se tornou recomendação do W3C, mas foi anunciada em 2009.
  4. A semântica antes do HTML5 era essa aí, um pouco sombria e nada significativa. Você tinha que usar de ids e/ou classes para identificar a que parte do conteúdo aquela tag estava se referindo.
  5. Com o HTML5
  6. Com o HTML5
  7. Pra quem não conhece SEO, é otimização para mecanismos de busca, ou otimização de sites. O objetivo é melhorar o posicionamento na busca orgânica do Google, por exemplo. Na SEO os mecanismos de busca valorizam um site semântico, pois o robô do buscador, consegue entender melhor o conteúdo do site.
  8. TEA – Transtorno do Espectro Autista
  9. 21% da população brasileira
  10. 21% da população brasileira
  11. 21% da população brasileira