View
4.701
Download
2
Category
Preview:
DESCRIPTION
História do HTML, Semântica do HTML5, WAI ARIA, Microdata, Open Graph Protocol e Web components.
Citation preview
semânticauma 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 criadosHTML nasceu
1994
é como você escreve email marketing
HTML 2.0
imagemap
1995
Javascript foi lançado!
Habemusinternet 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 HTMLWAI 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 buscamicrodata
http://www.w3.org/TR/wai-aria/roles
cria um grupoitemscope
especifica um itemitemtype
valor de um itemitemprop
<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 organization product
itemtype
http://www.google.com/webmasters/tools/richsnippets
reconhecimento para facebookopengraph
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 chamadowebcomponents
http://ogp.me/
customelements
que tal expandir ou criar a sua própria tag HTML?
customelements
<bernard-luna> </bernard-luna>
customelements
<camera-element> </camera-element>
customelements
http://customelements.github.io/camera-element/
<x-slidebox> </x-slidebox>
customelements
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>
shadowdom
shadowdom
blocos de código encapsulados dentro do DOM
shadowdom
<input
id="busca-campo"
type="text"
name="query"
autocomplete="off"
accesskey="s"
lang="pt-BR"
x-webkit-speech=""
speech=""
>
shadowdom
<video>
<source />
</video>
<div id=”cart”> </div>
http://registry.x-tags.org/x-tag/slidebox/x-slidebox/view
shadowdom
import
import
reutilização de web components como arquivos externos
<link rel="import" href="camera" />
@zenorocha@eduardolundgren@bernarddeluna
@bernarddelunaobrigado!
Recommended