SlideShare uma empresa Scribd logo
1 de 73
Baixar para ler offline
semântica
uma jornada pelos
componentes web
bernard de luna
@bernarddeluna
- team leader de produto na Petrobras
- creative director da Melt DSP
- criador do treinamento Coding on Weekend
- colunista do iMasters e Tableless
- +50 eventos pelo Brasil
- HTML5DevConf em San Francisco
1991
20 elementos criados
HTML nasceu
1994
é como você escreve
email marketing
HTML 2.0
imagemap
1995
Javascript foi
lançado!
Habemus
internet explorer!
hoje
HTML5 não é mais
o futuro, HTML5
não é nem mais o
presente.
zenorocha
HTML > seções
footer
main
header
footer
main elemento único e
não pode estar
dentro de nenhuma
outra seção
header
footer
header
article aside
footer
header
article aside
article
article
article
footer
header
article aside
section
footer
header
article aside
section
nav
HTML > embed
track
video
audio
<video src="brave.webm">
<track kind=”subtitles” src=”brave.pt.vtt”
srclang=”pt” label="Português">
</video>
svg
canvas
track
video
audio
HTML > texto
italic
< i >
bold
< b >
underline
< u >
small
< small >
italic
< i >
bold
< b >
underline
< u >
small
< small >
voz alternada
< i >
chamar atenção sem
transmitir importância
< b >
trecho de texto
desarticulado
< u >
pequeno
trecho de texto
< small >
estendendo a semântica HTML
WAI ARIA
http://www.w3.org/TR/wai-aria/roles
Aplicações que utilizam
ARIA promovem a
acessibilidade de
componentes que não
são contemplados
pelas WCAG.
reinaldoferraz
role=”contentinfo”
role=”banner”
role=”contentinfo”
role=”banner”
role=”
complementary
”
role=”article”
role=”contentinfo”
role=”banner”
role=”
complementary
”
role=”article”
role=”article”
role=”region”
role=”contentinfo”
role=”banner”
role=”
complementary
”
role=”navigation”
role=”article”
role=”article”
role=”region”
reconhecimento para busca
microdata
http://www.w3.org/TR/wai-aria/roles
cria um grupo
itemscope
especifica um item
itemtype
valor de um item
itemprop
<div itemscope itemtype="http://schema.org/Person">
  <span itemprop="name">Bernard De Luna</span>
  <img src="be-bonitao.jpg" itemprop="image" />
  <span itemprop="jobTitle">palestrante</span>
  <a href="mailto:deluna@bernarddeluna.com"
itemprop="email">deluna@bernarddeluna.com </a>
  <a href="http://www.bernarddeluna.com"
itemprop="url">bernarddeluna.com</a>
</div>
person place organi
zation
product
itemtype
http://www.google.com/webmasters/tools/richsnippets
reconhecimento para facebook
opengraph
http://ogp.me/
localização
<html lang="pt-br" prefix="og: http://ogp.me/ns#" >
<head>
<meta property="og:locale" content="pt_BR">
</head>
</html>
título e descrição
<meta property="og:title" content="Semântica:
uma jornada pelos componentes web">
<meta property="og:description" content="Vamos
passear pela criação do HTML, seus significados
para humanos, robôs e seu futuro, os web
components.">
tipo
<meta property="og:type" content="website">
imagem
<meta property="og:image" content="http://
frontinsampa.com.br/img/temp/bernard.jpg">
e dizem para não
usar mais meta tags
um futuro chamado
webcomponents
http://ogp.me/
custom
elements
que tal expandir ou criar a
sua própria tag HTML?
custom
elements
<bernard-luna> </bernard-luna>
custom
elements
<camera-element> </camera-element>
custom
elements
http://customelements.github.io/camera-element/
<x-slidebox> </x-slidebox>
custom
elements
http://registry.x-tags.org/x-tag/slidebox/x-slidebox/view
templates
templates
criar templates com pedaços
de código para reutilização
templates
<template id="user-profile">
<h1>Bernard De Luna</h1>
<img src="be.jpg" />
</template>
shadow
dom
shadow
dom
blocos de código
encapsulados dentro do DOM
shadow
dom
<input
id="busca-campo"
type="text"
name="query"
autocomplete="off"
accesskey="s"
lang="pt-BR"
x-webkit-speech=""
speech=""
>
shadow
dom
<video>
<source />
</video>
<div id=”cart”> </div>
http://registry.x-tags.org/x-tag/slidebox/x-slidebox/view
shadow
dom
import
import
reutilização de web components
como arquivos externos
<link rel="import" href="camera" />
@zenorocha
@eduardolundgren
@bernarddeluna
@bernarddeluna
obrigado!

Mais conteúdo relacionado

Semelhante a Semântica: Uma jornada pelos componentes web

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
 
HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012Fábio Flatschart
 
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
 
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
 
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
 
Criando Jogos com HTML5
Criando Jogos com HTML5Criando Jogos com HTML5
Criando Jogos com HTML5José Farias
 
CODE N' TELL 17/02/2014
CODE N' TELL 17/02/2014CODE N' TELL 17/02/2014
CODE N' TELL 17/02/2014Rodrigo Donini
 
Práticas para Melhorar o seu Desenvolvimento Front-End
Práticas para Melhorar o seu Desenvolvimento Front-EndPráticas para Melhorar o seu Desenvolvimento Front-End
Práticas para Melhorar o seu Desenvolvimento Front-EndTatiane Aguirres Nogueira
 
COMO FAZER E-MAIL MARKETING EM HTML
COMO FAZER E-MAIL MARKETING EM HTMLCOMO FAZER E-MAIL MARKETING EM HTML
COMO FAZER E-MAIL MARKETING EM HTMLRenato Melo
 
The Flash no front-end
The Flash no front-endThe Flash no front-end
The Flash no front-endCezar Luiz
 
HTML - Onde estamos e para onde vamos?
HTML - Onde estamos e para onde vamos?HTML - Onde estamos e para onde vamos?
HTML - Onde estamos e para onde vamos?Qx3
 
Workshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
Workshop: WebSockets com HTML 5 & PHP - Gustavo CielloWorkshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
Workshop: WebSockets com HTML 5 & PHP - Gustavo CielloTchelinux
 
Deixe seu Designer Feliz
Deixe seu Designer FelizDeixe seu Designer Feliz
Deixe seu Designer FelizMarta Preuss
 

Semelhante a Semântica: Uma jornada pelos componentes web (20)

HTML 5 e Open Web Platform
HTML 5 e Open Web PlatformHTML 5 e Open Web Platform
HTML 5 e Open Web Platform
 
Html5 ass
Html5 assHtml5 ass
Html5 ass
 
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ú
 
HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012
 
Html 5
Html 5Html 5
Html 5
 
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
 
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
 
Front end - the right way
Front end - the right wayFront end - the right way
Front end - the right way
 
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal
 
Criando Jogos com HTML5
Criando Jogos com HTML5Criando Jogos com HTML5
Criando Jogos com HTML5
 
Desbravando o HTML5
Desbravando o HTML5Desbravando o HTML5
Desbravando o HTML5
 
CODE N' TELL 17/02/2014
CODE N' TELL 17/02/2014CODE N' TELL 17/02/2014
CODE N' TELL 17/02/2014
 
Introdução ao Drupal
Introdução ao DrupalIntrodução ao Drupal
Introdução ao Drupal
 
Práticas para Melhorar o seu Desenvolvimento Front-End
Práticas para Melhorar o seu Desenvolvimento Front-EndPráticas para Melhorar o seu Desenvolvimento Front-End
Práticas para Melhorar o seu Desenvolvimento Front-End
 
Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3
 
COMO FAZER E-MAIL MARKETING EM HTML
COMO FAZER E-MAIL MARKETING EM HTMLCOMO FAZER E-MAIL MARKETING EM HTML
COMO FAZER E-MAIL MARKETING EM HTML
 
The Flash no front-end
The Flash no front-endThe Flash no front-end
The Flash no front-end
 
HTML - Onde estamos e para onde vamos?
HTML - Onde estamos e para onde vamos?HTML - Onde estamos e para onde vamos?
HTML - Onde estamos e para onde vamos?
 
Workshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
Workshop: WebSockets com HTML 5 & PHP - Gustavo CielloWorkshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
Workshop: WebSockets com HTML 5 & PHP - Gustavo Ciello
 
Deixe seu Designer Feliz
Deixe seu Designer FelizDeixe seu Designer Feliz
Deixe seu Designer Feliz
 

Mais de Bunee.io - Hiring with Intelligence

[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna [FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna Bunee.io - Hiring with Intelligence
 
Oficina de Planejamento Corte: Seu layout virando código - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTEDOficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código - 15 EDTEDBunee.io - Hiring with Intelligence
 

Mais de Bunee.io - Hiring with Intelligence (19)

O que não lhe contaram sobre a carreira de DEV
O que não lhe contaram sobre a carreira de DEVO que não lhe contaram sobre a carreira de DEV
O que não lhe contaram sobre a carreira de DEV
 
Como fazer um Pitch Fantástico
Como fazer um Pitch FantásticoComo fazer um Pitch Fantástico
Como fazer um Pitch Fantástico
 
The BGs - Background CSS
The BGs - Background CSSThe BGs - Background CSS
The BGs - Background CSS
 
Pensando em Redesign
Pensando em RedesignPensando em Redesign
Pensando em Redesign
 
A importância de Aprender Ensinando
A importância de Aprender EnsinandoA importância de Aprender Ensinando
A importância de Aprender Ensinando
 
Lean UX: Parem de criar produtos, comecem a criar experiências
Lean UX: Parem de criar produtos, comecem a criar experiênciasLean UX: Parem de criar produtos, comecem a criar experiências
Lean UX: Parem de criar produtos, comecem a criar experiências
 
Lean UX para aplicativos mobile
Lean UX para aplicativos mobileLean UX para aplicativos mobile
Lean UX para aplicativos mobile
 
como pensar front para wordpress
como pensar front para wordpresscomo pensar front para wordpress
como pensar front para wordpress
 
Atenção: Dev no palco!
Atenção: Dev no palco!Atenção: Dev no palco!
Atenção: Dev no palco!
 
Layouts Responsivos
Layouts ResponsivosLayouts Responsivos
Layouts Responsivos
 
Surpresa
SurpresaSurpresa
Surpresa
 
Design agil: Encaixando o Design no processo
Design agil: Encaixando o Design no processoDesign agil: Encaixando o Design no processo
Design agil: Encaixando o Design no processo
 
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativosModular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
 
UX SUX
UX SUXUX SUX
UX SUX
 
Planejamento de um wireframe orientado para aplicativos
Planejamento de um wireframe orientado para aplicativosPlanejamento de um wireframe orientado para aplicativos
Planejamento de um wireframe orientado para aplicativos
 
[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna [FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
 
Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de LunaQuero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
 
Design para web, uma visão funcional
Design para web, uma visão funcionalDesign para web, uma visão funcional
Design para web, uma visão funcional
 
Oficina de Planejamento Corte: Seu layout virando código - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código  - 15 EDTEDOficina de Planejamento Corte: Seu layout virando código  - 15 EDTED
Oficina de Planejamento Corte: Seu layout virando código - 15 EDTED
 

Semântica: Uma jornada pelos componentes web