Semântica: Uma jornada pelos componentes web

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=”banner”

role=”complementary

”role=”article”


role=”banner”


”role=”article”

role=”article”

role=”region”


role=”banner”


”

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:[email protected]" itemprop="email">[email protected] </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!

Technology

Semântica: Uma jornada pelos componentes web