SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

48
Fábio Flatschart | www.flatschart.com Senac São José dos Campos | Maio de 2012 SEO, Semântica & HTML5

description

Palestra realizada no Senac São José dos Campos, no mês de maio pelo evento Road Show TI 2012 Experience.Palestrante:Fábio Flatscharthttp://www.flatschart.comPara mais informações, acesse http://www.sp.senac.br/roadshowti

Transcript of SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Page 1: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom

Senac Satildeo Joseacute dos Campos | Maio de 2012

SEO Semacircntica amp HTML5

Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart

Gerente de Marketing e Inovaccedilatildeo da Soyuz Sistemas

No mercado WEB desde 1997 eacute consultor de desenvolvimento e implantaccedilatildeo de soluccedilotildees e ferramentas da Adobe Systems Brasil

Autor e escritor teacutecnico da Editora Brasport e da Editora SENACSP

No SENAC SP atuou no atendimento corporativo e intermediaccedilatildeo de parcerias com grandes empresas como Adobe Apple Editora ABRIL Microsoft UOL e W3C

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Conexotildees

fabioflat

slidesharenetfabioflat

deliciousfabioflat

linkedincominfabioflat

Faacutebio Flatschart | wwwflatschartcom

INFINITAS ESCOLHAS

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Buscar eacute preciso

bull Revoluccedilatildeo Digital

bull A Era da Busca

bull Inversatildeo do vetor de Marketing

bull Relacionamento e experiecircncia atraveacutes da busca

bull Marketing de busca

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mais eacute menos

O bombardeio de informaccedilotildees e de possibilidades de escolha nos leva a viver em mundo de nichos e tribos no qual as infinitas opccedilotildees natildeo nos fazem mais felizes mas muitas vezes nos levam agrave um universo de inseguranccedila e individualismo

bull O papel dos mecanismos de busca cresce em importacircncia agrave sombra deste paradoxo eles satildeo o nosso guru desbravando os segredos das esferas de informaccedilatildeo

bull Cada umas destas infinitas esferas eacute composta de infinitas subesferas que estatildeo na extremidade da cauda longa esperando para serem descobertashellip

SCHWARTZ Barry O Pradoxo da escolha por que mais eacute menos Satildeo Paulo A Girafa Editora2007

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nichoRio de janeiro Elsevier2006

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Segmentaccedilatildeo

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultados locais

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultados Pessoais

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultados Pessoais

Faacutebio Flatschart | wwwflatschartcom

SEO Search Engine Optimization

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos fazendo assim Domiacutenio

palestracombr

Tiacutetulo lttitlegt Palestralttitlegt

Subdominio palestrasitecombr

Atributos em Imagens alt = palestra

Texto A palestra sobre SEO foi um

sucesso

Arquivos palestrajpg | palestrapdf

Diretoacuterios sitecombrpalestra

Cabeccedilalho

lth1gtPalestralth1gt

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Ou assim Social

Twitter Facebook

Linkedin Youtube

Links Diretoacuterios Listas

Comentaacuterios

Conteuacutedo Tags Densidade de palavras chaves

exclusividade e variedade de conteuacutedo

Estrutura URL 404 301 Servidor

Faacutebio Flatschart | wwwflatschartcom

Oacutetimo

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Ampliando os conceitos

bull Os fundamentos teacutecnicos satildeo importanteshellip

poreacutemhellip

bull Natildeo existe uma receita uacutenica e universal

bull Natildeo existe uma foacutermula exata e estanque

bull SEO natildeo pode estar desvinculado da inteligecircncia de marketing

bull Como tratar conteuacutedos sociais e ubiacutequos

Faacutebio Flatschart | wwwflatschartcom

SEMAcircNTICA

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Entendendohellip

bull Semacircntica eacute o estudo dos significados

bull Presente na linguiacutestica ciecircncia literatura muacutesica

bull Procura estabelecer a relaccedilatildeo entre palavras frases sinais coacutedigos siacutembolos e aquilo que eles representam

Sintaxe Semacircntica

ltimg title=Faacutebio Flatschart - 1971 src=httpsitecombrfoto71jpg

alt=Faacutebio Flatschart - 1971gt

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Web Semacircntica

bull Todo conteuacutedo publicado na Web pode teoricamente ser interligado semanticamente pelos seus significados

bull Quando os dispositivos entenderem totalmente o conteuacutedo inserido e exibido neles poderatildeo oferecer soluccedilotildees que hoje ainda natildeo satildeo possiacuteveis

bull Noacutes estamos ensinando o sistema a pensar

httpwwwsoyuzcombrblogredes-sociais-ensinando-androides-a-pensar

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultadoshellip

Dados

Informaccedilatildeo

Conhecimento

Inteligecircncia

Faacutebio Flatschart | wwwflatschartcom

HTML5 Novas possibilidades semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart | wwwflatschartcom

HTML

1991 HTML

1994 HTML 2

1996 CSS 1 + JavaScript

1997 HTML 4

1998 CSS 2

2000 XHTML 1

2002 Tableless

2005 AJAX

2009 HTML 5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5

O HTML 5 eacute uma especificaccedilatildeo do W3C ainda natildeo concluiacuteda

Pelas caracteriacutesticas modulares do seu desenvolvimento as empresas fabricantes dos navegadores desenvolvedores designers e usuaacuterios natildeo necessitam aguardar a especificaccedilatildeo final da linguagem para colocaacute-la em uso

Esta nova especificaccedilatildeo introduz novos elementos (tags) orientados para auxiliar no desenvolvimento web baseado em padrotildees compatiacuteveis com todos dispositivos na marcaccedilatildeo semacircntica do coacutedigo na manipulaccedilatildeo de elementos do CSS e do JavaScript atraveacutes da definiccedilatildeo de APIs da arquitetura Web

World Wide Web Consortium - Escritoacuterio Brasil httpwwww3cbr

Faacutebio Flatschart | wwwflatschartcom

Estrutura baacutesica

ltDOCTYPE htmlgt

lthtml lang=pt-brgt

ltheadgt

ltmeta charset=utf-8gt

lttitlegtEstrutura baacutesicalttitlegt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

Faacutebio Flatschart | wwwflatschartcom

Elementos estruturais

HTML4 XHTML

ltbodygt

ltdiv id=topogtltdivgt

ltdiv id=navegacaogtltdivgt

ltdiv id=principalgtltdivgt

ltdiv id=lateralgtltdivgt

ltdiv id=rodapegtltdivgt

ltbodygt

HTML5

ltbodygt

ltheadergtltheadergt

ltnavgtltnavgt

ltarticlegtltarticlegt

ltasidegtltasidegt

ltfootergtltfootergt

ltbodygt

Umas das maiores novidades do HTML5 eacute a possibilidade de atribuir agraves diversas seccedilotildees estuturais do documento um elemento proacuteprio nativo da linguagem

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

article Representa um conteuacutedo independente e altamente relevante pode ser um

post um artigo um bloco de texto ou ainda um mini aplicativo embutido no

conteuacutedo (widget)

aside Define um bloco de conteuacutedo que faz referecircncia ao conteuacutedo principal que o

cerca pode estar em uma barra lateral exibindo informaccedilotildees contextuais

assuntos relacionados publicidade ou um grupo de navegaccedilatildeo secundaacuteria

footer Marca a aacuterea inferior normalmente conhecida como rodapeacute do conteuacutedo

geral do documento ou do conteuacutedo de uma seccedilatildeo especiacutefica a qual ele estaacute

subordinado

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

header

Eacute formado por um bloco de conteuacutedo que pode conter um ou mais elementos

h1 ateacute h6 campo de busca elementos de navegaccedilatildeo um logo ou banner uma

introduccedilatildeo um pequeno prefaacutecio um iacutendice em formato de lista

Normalmente trabalha como um agregador do conteuacutedo do cabeccedilalho de um

documento ou de uma seccedilatildeo

nav

Eacute a uma seccedilatildeo do documento que agrupa links para outras partes do site ou

aplicativo Vale ressaltar que o grupo de links do elemento nav estaacute

relacionado com a navegaccedilatildeo primaacuteria ou global que pode estar no

cabeccedilalho no rodapeacute ou em outras seccedilotildees do documento

section

Entre todos os elementos que marcam e definem a estrutura do documento

o elemento section eacute o que possui menor especificidade em sua semacircntica

logo eacute o mais geneacuterico Ele pode abrigar os elementos header article e footer

e sua principal funccedilatildeo eacute dividir o conteuacutedo em macro-estruturas em grande

blocos

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Formulaacuterios Semacircnticos

ltinput type=emailgt

ltinput type=urlgt

ltinput type=numbergt

ltinput type=searchgt

ltinput type=rangegt

ltinput type=dategt

ltinput type=weekgt

httpbitlynrGXhw

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 2: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart

Gerente de Marketing e Inovaccedilatildeo da Soyuz Sistemas

No mercado WEB desde 1997 eacute consultor de desenvolvimento e implantaccedilatildeo de soluccedilotildees e ferramentas da Adobe Systems Brasil

Autor e escritor teacutecnico da Editora Brasport e da Editora SENACSP

No SENAC SP atuou no atendimento corporativo e intermediaccedilatildeo de parcerias com grandes empresas como Adobe Apple Editora ABRIL Microsoft UOL e W3C

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Conexotildees

fabioflat

slidesharenetfabioflat

deliciousfabioflat

linkedincominfabioflat

Faacutebio Flatschart | wwwflatschartcom

INFINITAS ESCOLHAS

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Buscar eacute preciso

bull Revoluccedilatildeo Digital

bull A Era da Busca

bull Inversatildeo do vetor de Marketing

bull Relacionamento e experiecircncia atraveacutes da busca

bull Marketing de busca

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mais eacute menos

O bombardeio de informaccedilotildees e de possibilidades de escolha nos leva a viver em mundo de nichos e tribos no qual as infinitas opccedilotildees natildeo nos fazem mais felizes mas muitas vezes nos levam agrave um universo de inseguranccedila e individualismo

bull O papel dos mecanismos de busca cresce em importacircncia agrave sombra deste paradoxo eles satildeo o nosso guru desbravando os segredos das esferas de informaccedilatildeo

bull Cada umas destas infinitas esferas eacute composta de infinitas subesferas que estatildeo na extremidade da cauda longa esperando para serem descobertashellip

SCHWARTZ Barry O Pradoxo da escolha por que mais eacute menos Satildeo Paulo A Girafa Editora2007

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nichoRio de janeiro Elsevier2006

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Segmentaccedilatildeo

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultados locais

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultados Pessoais

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultados Pessoais

Faacutebio Flatschart | wwwflatschartcom

SEO Search Engine Optimization

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos fazendo assim Domiacutenio

palestracombr

Tiacutetulo lttitlegt Palestralttitlegt

Subdominio palestrasitecombr

Atributos em Imagens alt = palestra

Texto A palestra sobre SEO foi um

sucesso

Arquivos palestrajpg | palestrapdf

Diretoacuterios sitecombrpalestra

Cabeccedilalho

lth1gtPalestralth1gt

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Ou assim Social

Twitter Facebook

Linkedin Youtube

Links Diretoacuterios Listas

Comentaacuterios

Conteuacutedo Tags Densidade de palavras chaves

exclusividade e variedade de conteuacutedo

Estrutura URL 404 301 Servidor

Faacutebio Flatschart | wwwflatschartcom

Oacutetimo

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Ampliando os conceitos

bull Os fundamentos teacutecnicos satildeo importanteshellip

poreacutemhellip

bull Natildeo existe uma receita uacutenica e universal

bull Natildeo existe uma foacutermula exata e estanque

bull SEO natildeo pode estar desvinculado da inteligecircncia de marketing

bull Como tratar conteuacutedos sociais e ubiacutequos

Faacutebio Flatschart | wwwflatschartcom

SEMAcircNTICA

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Entendendohellip

bull Semacircntica eacute o estudo dos significados

bull Presente na linguiacutestica ciecircncia literatura muacutesica

bull Procura estabelecer a relaccedilatildeo entre palavras frases sinais coacutedigos siacutembolos e aquilo que eles representam

Sintaxe Semacircntica

ltimg title=Faacutebio Flatschart - 1971 src=httpsitecombrfoto71jpg

alt=Faacutebio Flatschart - 1971gt

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Web Semacircntica

bull Todo conteuacutedo publicado na Web pode teoricamente ser interligado semanticamente pelos seus significados

bull Quando os dispositivos entenderem totalmente o conteuacutedo inserido e exibido neles poderatildeo oferecer soluccedilotildees que hoje ainda natildeo satildeo possiacuteveis

bull Noacutes estamos ensinando o sistema a pensar

httpwwwsoyuzcombrblogredes-sociais-ensinando-androides-a-pensar

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultadoshellip

Dados

Informaccedilatildeo

Conhecimento

Inteligecircncia

Faacutebio Flatschart | wwwflatschartcom

HTML5 Novas possibilidades semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart | wwwflatschartcom

HTML

1991 HTML

1994 HTML 2

1996 CSS 1 + JavaScript

1997 HTML 4

1998 CSS 2

2000 XHTML 1

2002 Tableless

2005 AJAX

2009 HTML 5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5

O HTML 5 eacute uma especificaccedilatildeo do W3C ainda natildeo concluiacuteda

Pelas caracteriacutesticas modulares do seu desenvolvimento as empresas fabricantes dos navegadores desenvolvedores designers e usuaacuterios natildeo necessitam aguardar a especificaccedilatildeo final da linguagem para colocaacute-la em uso

Esta nova especificaccedilatildeo introduz novos elementos (tags) orientados para auxiliar no desenvolvimento web baseado em padrotildees compatiacuteveis com todos dispositivos na marcaccedilatildeo semacircntica do coacutedigo na manipulaccedilatildeo de elementos do CSS e do JavaScript atraveacutes da definiccedilatildeo de APIs da arquitetura Web

World Wide Web Consortium - Escritoacuterio Brasil httpwwww3cbr

Faacutebio Flatschart | wwwflatschartcom

Estrutura baacutesica

ltDOCTYPE htmlgt

lthtml lang=pt-brgt

ltheadgt

ltmeta charset=utf-8gt

lttitlegtEstrutura baacutesicalttitlegt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

Faacutebio Flatschart | wwwflatschartcom

Elementos estruturais

HTML4 XHTML

ltbodygt

ltdiv id=topogtltdivgt

ltdiv id=navegacaogtltdivgt

ltdiv id=principalgtltdivgt

ltdiv id=lateralgtltdivgt

ltdiv id=rodapegtltdivgt

ltbodygt

HTML5

ltbodygt

ltheadergtltheadergt

ltnavgtltnavgt

ltarticlegtltarticlegt

ltasidegtltasidegt

ltfootergtltfootergt

ltbodygt

Umas das maiores novidades do HTML5 eacute a possibilidade de atribuir agraves diversas seccedilotildees estuturais do documento um elemento proacuteprio nativo da linguagem

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

article Representa um conteuacutedo independente e altamente relevante pode ser um

post um artigo um bloco de texto ou ainda um mini aplicativo embutido no

conteuacutedo (widget)

aside Define um bloco de conteuacutedo que faz referecircncia ao conteuacutedo principal que o

cerca pode estar em uma barra lateral exibindo informaccedilotildees contextuais

assuntos relacionados publicidade ou um grupo de navegaccedilatildeo secundaacuteria

footer Marca a aacuterea inferior normalmente conhecida como rodapeacute do conteuacutedo

geral do documento ou do conteuacutedo de uma seccedilatildeo especiacutefica a qual ele estaacute

subordinado

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

header

Eacute formado por um bloco de conteuacutedo que pode conter um ou mais elementos

h1 ateacute h6 campo de busca elementos de navegaccedilatildeo um logo ou banner uma

introduccedilatildeo um pequeno prefaacutecio um iacutendice em formato de lista

Normalmente trabalha como um agregador do conteuacutedo do cabeccedilalho de um

documento ou de uma seccedilatildeo

nav

Eacute a uma seccedilatildeo do documento que agrupa links para outras partes do site ou

aplicativo Vale ressaltar que o grupo de links do elemento nav estaacute

relacionado com a navegaccedilatildeo primaacuteria ou global que pode estar no

cabeccedilalho no rodapeacute ou em outras seccedilotildees do documento

section

Entre todos os elementos que marcam e definem a estrutura do documento

o elemento section eacute o que possui menor especificidade em sua semacircntica

logo eacute o mais geneacuterico Ele pode abrigar os elementos header article e footer

e sua principal funccedilatildeo eacute dividir o conteuacutedo em macro-estruturas em grande

blocos

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Formulaacuterios Semacircnticos

ltinput type=emailgt

ltinput type=urlgt

ltinput type=numbergt

ltinput type=searchgt

ltinput type=rangegt

ltinput type=dategt

ltinput type=weekgt

httpbitlynrGXhw

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 3: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Conexotildees

fabioflat

slidesharenetfabioflat

deliciousfabioflat

linkedincominfabioflat

Faacutebio Flatschart | wwwflatschartcom

INFINITAS ESCOLHAS

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Buscar eacute preciso

bull Revoluccedilatildeo Digital

bull A Era da Busca

bull Inversatildeo do vetor de Marketing

bull Relacionamento e experiecircncia atraveacutes da busca

bull Marketing de busca

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mais eacute menos

O bombardeio de informaccedilotildees e de possibilidades de escolha nos leva a viver em mundo de nichos e tribos no qual as infinitas opccedilotildees natildeo nos fazem mais felizes mas muitas vezes nos levam agrave um universo de inseguranccedila e individualismo

bull O papel dos mecanismos de busca cresce em importacircncia agrave sombra deste paradoxo eles satildeo o nosso guru desbravando os segredos das esferas de informaccedilatildeo

bull Cada umas destas infinitas esferas eacute composta de infinitas subesferas que estatildeo na extremidade da cauda longa esperando para serem descobertashellip

SCHWARTZ Barry O Pradoxo da escolha por que mais eacute menos Satildeo Paulo A Girafa Editora2007

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nichoRio de janeiro Elsevier2006

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Segmentaccedilatildeo

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultados locais

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultados Pessoais

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultados Pessoais

Faacutebio Flatschart | wwwflatschartcom

SEO Search Engine Optimization

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos fazendo assim Domiacutenio

palestracombr

Tiacutetulo lttitlegt Palestralttitlegt

Subdominio palestrasitecombr

Atributos em Imagens alt = palestra

Texto A palestra sobre SEO foi um

sucesso

Arquivos palestrajpg | palestrapdf

Diretoacuterios sitecombrpalestra

Cabeccedilalho

lth1gtPalestralth1gt

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Ou assim Social

Twitter Facebook

Linkedin Youtube

Links Diretoacuterios Listas

Comentaacuterios

Conteuacutedo Tags Densidade de palavras chaves

exclusividade e variedade de conteuacutedo

Estrutura URL 404 301 Servidor

Faacutebio Flatschart | wwwflatschartcom

Oacutetimo

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Ampliando os conceitos

bull Os fundamentos teacutecnicos satildeo importanteshellip

poreacutemhellip

bull Natildeo existe uma receita uacutenica e universal

bull Natildeo existe uma foacutermula exata e estanque

bull SEO natildeo pode estar desvinculado da inteligecircncia de marketing

bull Como tratar conteuacutedos sociais e ubiacutequos

Faacutebio Flatschart | wwwflatschartcom

SEMAcircNTICA

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Entendendohellip

bull Semacircntica eacute o estudo dos significados

bull Presente na linguiacutestica ciecircncia literatura muacutesica

bull Procura estabelecer a relaccedilatildeo entre palavras frases sinais coacutedigos siacutembolos e aquilo que eles representam

Sintaxe Semacircntica

ltimg title=Faacutebio Flatschart - 1971 src=httpsitecombrfoto71jpg

alt=Faacutebio Flatschart - 1971gt

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Web Semacircntica

bull Todo conteuacutedo publicado na Web pode teoricamente ser interligado semanticamente pelos seus significados

bull Quando os dispositivos entenderem totalmente o conteuacutedo inserido e exibido neles poderatildeo oferecer soluccedilotildees que hoje ainda natildeo satildeo possiacuteveis

bull Noacutes estamos ensinando o sistema a pensar

httpwwwsoyuzcombrblogredes-sociais-ensinando-androides-a-pensar

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultadoshellip

Dados

Informaccedilatildeo

Conhecimento

Inteligecircncia

Faacutebio Flatschart | wwwflatschartcom

HTML5 Novas possibilidades semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart | wwwflatschartcom

HTML

1991 HTML

1994 HTML 2

1996 CSS 1 + JavaScript

1997 HTML 4

1998 CSS 2

2000 XHTML 1

2002 Tableless

2005 AJAX

2009 HTML 5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5

O HTML 5 eacute uma especificaccedilatildeo do W3C ainda natildeo concluiacuteda

Pelas caracteriacutesticas modulares do seu desenvolvimento as empresas fabricantes dos navegadores desenvolvedores designers e usuaacuterios natildeo necessitam aguardar a especificaccedilatildeo final da linguagem para colocaacute-la em uso

Esta nova especificaccedilatildeo introduz novos elementos (tags) orientados para auxiliar no desenvolvimento web baseado em padrotildees compatiacuteveis com todos dispositivos na marcaccedilatildeo semacircntica do coacutedigo na manipulaccedilatildeo de elementos do CSS e do JavaScript atraveacutes da definiccedilatildeo de APIs da arquitetura Web

World Wide Web Consortium - Escritoacuterio Brasil httpwwww3cbr

Faacutebio Flatschart | wwwflatschartcom

Estrutura baacutesica

ltDOCTYPE htmlgt

lthtml lang=pt-brgt

ltheadgt

ltmeta charset=utf-8gt

lttitlegtEstrutura baacutesicalttitlegt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

Faacutebio Flatschart | wwwflatschartcom

Elementos estruturais

HTML4 XHTML

ltbodygt

ltdiv id=topogtltdivgt

ltdiv id=navegacaogtltdivgt

ltdiv id=principalgtltdivgt

ltdiv id=lateralgtltdivgt

ltdiv id=rodapegtltdivgt

ltbodygt

HTML5

ltbodygt

ltheadergtltheadergt

ltnavgtltnavgt

ltarticlegtltarticlegt

ltasidegtltasidegt

ltfootergtltfootergt

ltbodygt

Umas das maiores novidades do HTML5 eacute a possibilidade de atribuir agraves diversas seccedilotildees estuturais do documento um elemento proacuteprio nativo da linguagem

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

article Representa um conteuacutedo independente e altamente relevante pode ser um

post um artigo um bloco de texto ou ainda um mini aplicativo embutido no

conteuacutedo (widget)

aside Define um bloco de conteuacutedo que faz referecircncia ao conteuacutedo principal que o

cerca pode estar em uma barra lateral exibindo informaccedilotildees contextuais

assuntos relacionados publicidade ou um grupo de navegaccedilatildeo secundaacuteria

footer Marca a aacuterea inferior normalmente conhecida como rodapeacute do conteuacutedo

geral do documento ou do conteuacutedo de uma seccedilatildeo especiacutefica a qual ele estaacute

subordinado

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

header

Eacute formado por um bloco de conteuacutedo que pode conter um ou mais elementos

h1 ateacute h6 campo de busca elementos de navegaccedilatildeo um logo ou banner uma

introduccedilatildeo um pequeno prefaacutecio um iacutendice em formato de lista

Normalmente trabalha como um agregador do conteuacutedo do cabeccedilalho de um

documento ou de uma seccedilatildeo

nav

Eacute a uma seccedilatildeo do documento que agrupa links para outras partes do site ou

aplicativo Vale ressaltar que o grupo de links do elemento nav estaacute

relacionado com a navegaccedilatildeo primaacuteria ou global que pode estar no

cabeccedilalho no rodapeacute ou em outras seccedilotildees do documento

section

Entre todos os elementos que marcam e definem a estrutura do documento

o elemento section eacute o que possui menor especificidade em sua semacircntica

logo eacute o mais geneacuterico Ele pode abrigar os elementos header article e footer

e sua principal funccedilatildeo eacute dividir o conteuacutedo em macro-estruturas em grande

blocos

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Formulaacuterios Semacircnticos

ltinput type=emailgt

ltinput type=urlgt

ltinput type=numbergt

ltinput type=searchgt

ltinput type=rangegt

ltinput type=dategt

ltinput type=weekgt

httpbitlynrGXhw

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 4: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom

INFINITAS ESCOLHAS

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Buscar eacute preciso

bull Revoluccedilatildeo Digital

bull A Era da Busca

bull Inversatildeo do vetor de Marketing

bull Relacionamento e experiecircncia atraveacutes da busca

bull Marketing de busca

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mais eacute menos

O bombardeio de informaccedilotildees e de possibilidades de escolha nos leva a viver em mundo de nichos e tribos no qual as infinitas opccedilotildees natildeo nos fazem mais felizes mas muitas vezes nos levam agrave um universo de inseguranccedila e individualismo

bull O papel dos mecanismos de busca cresce em importacircncia agrave sombra deste paradoxo eles satildeo o nosso guru desbravando os segredos das esferas de informaccedilatildeo

bull Cada umas destas infinitas esferas eacute composta de infinitas subesferas que estatildeo na extremidade da cauda longa esperando para serem descobertashellip

SCHWARTZ Barry O Pradoxo da escolha por que mais eacute menos Satildeo Paulo A Girafa Editora2007

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nichoRio de janeiro Elsevier2006

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Segmentaccedilatildeo

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultados locais

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultados Pessoais

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultados Pessoais

Faacutebio Flatschart | wwwflatschartcom

SEO Search Engine Optimization

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos fazendo assim Domiacutenio

palestracombr

Tiacutetulo lttitlegt Palestralttitlegt

Subdominio palestrasitecombr

Atributos em Imagens alt = palestra

Texto A palestra sobre SEO foi um

sucesso

Arquivos palestrajpg | palestrapdf

Diretoacuterios sitecombrpalestra

Cabeccedilalho

lth1gtPalestralth1gt

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Ou assim Social

Twitter Facebook

Linkedin Youtube

Links Diretoacuterios Listas

Comentaacuterios

Conteuacutedo Tags Densidade de palavras chaves

exclusividade e variedade de conteuacutedo

Estrutura URL 404 301 Servidor

Faacutebio Flatschart | wwwflatschartcom

Oacutetimo

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Ampliando os conceitos

bull Os fundamentos teacutecnicos satildeo importanteshellip

poreacutemhellip

bull Natildeo existe uma receita uacutenica e universal

bull Natildeo existe uma foacutermula exata e estanque

bull SEO natildeo pode estar desvinculado da inteligecircncia de marketing

bull Como tratar conteuacutedos sociais e ubiacutequos

Faacutebio Flatschart | wwwflatschartcom

SEMAcircNTICA

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Entendendohellip

bull Semacircntica eacute o estudo dos significados

bull Presente na linguiacutestica ciecircncia literatura muacutesica

bull Procura estabelecer a relaccedilatildeo entre palavras frases sinais coacutedigos siacutembolos e aquilo que eles representam

Sintaxe Semacircntica

ltimg title=Faacutebio Flatschart - 1971 src=httpsitecombrfoto71jpg

alt=Faacutebio Flatschart - 1971gt

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Web Semacircntica

bull Todo conteuacutedo publicado na Web pode teoricamente ser interligado semanticamente pelos seus significados

bull Quando os dispositivos entenderem totalmente o conteuacutedo inserido e exibido neles poderatildeo oferecer soluccedilotildees que hoje ainda natildeo satildeo possiacuteveis

bull Noacutes estamos ensinando o sistema a pensar

httpwwwsoyuzcombrblogredes-sociais-ensinando-androides-a-pensar

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultadoshellip

Dados

Informaccedilatildeo

Conhecimento

Inteligecircncia

Faacutebio Flatschart | wwwflatschartcom

HTML5 Novas possibilidades semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart | wwwflatschartcom

HTML

1991 HTML

1994 HTML 2

1996 CSS 1 + JavaScript

1997 HTML 4

1998 CSS 2

2000 XHTML 1

2002 Tableless

2005 AJAX

2009 HTML 5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5

O HTML 5 eacute uma especificaccedilatildeo do W3C ainda natildeo concluiacuteda

Pelas caracteriacutesticas modulares do seu desenvolvimento as empresas fabricantes dos navegadores desenvolvedores designers e usuaacuterios natildeo necessitam aguardar a especificaccedilatildeo final da linguagem para colocaacute-la em uso

Esta nova especificaccedilatildeo introduz novos elementos (tags) orientados para auxiliar no desenvolvimento web baseado em padrotildees compatiacuteveis com todos dispositivos na marcaccedilatildeo semacircntica do coacutedigo na manipulaccedilatildeo de elementos do CSS e do JavaScript atraveacutes da definiccedilatildeo de APIs da arquitetura Web

World Wide Web Consortium - Escritoacuterio Brasil httpwwww3cbr

Faacutebio Flatschart | wwwflatschartcom

Estrutura baacutesica

ltDOCTYPE htmlgt

lthtml lang=pt-brgt

ltheadgt

ltmeta charset=utf-8gt

lttitlegtEstrutura baacutesicalttitlegt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

Faacutebio Flatschart | wwwflatschartcom

Elementos estruturais

HTML4 XHTML

ltbodygt

ltdiv id=topogtltdivgt

ltdiv id=navegacaogtltdivgt

ltdiv id=principalgtltdivgt

ltdiv id=lateralgtltdivgt

ltdiv id=rodapegtltdivgt

ltbodygt

HTML5

ltbodygt

ltheadergtltheadergt

ltnavgtltnavgt

ltarticlegtltarticlegt

ltasidegtltasidegt

ltfootergtltfootergt

ltbodygt

Umas das maiores novidades do HTML5 eacute a possibilidade de atribuir agraves diversas seccedilotildees estuturais do documento um elemento proacuteprio nativo da linguagem

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

article Representa um conteuacutedo independente e altamente relevante pode ser um

post um artigo um bloco de texto ou ainda um mini aplicativo embutido no

conteuacutedo (widget)

aside Define um bloco de conteuacutedo que faz referecircncia ao conteuacutedo principal que o

cerca pode estar em uma barra lateral exibindo informaccedilotildees contextuais

assuntos relacionados publicidade ou um grupo de navegaccedilatildeo secundaacuteria

footer Marca a aacuterea inferior normalmente conhecida como rodapeacute do conteuacutedo

geral do documento ou do conteuacutedo de uma seccedilatildeo especiacutefica a qual ele estaacute

subordinado

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

header

Eacute formado por um bloco de conteuacutedo que pode conter um ou mais elementos

h1 ateacute h6 campo de busca elementos de navegaccedilatildeo um logo ou banner uma

introduccedilatildeo um pequeno prefaacutecio um iacutendice em formato de lista

Normalmente trabalha como um agregador do conteuacutedo do cabeccedilalho de um

documento ou de uma seccedilatildeo

nav

Eacute a uma seccedilatildeo do documento que agrupa links para outras partes do site ou

aplicativo Vale ressaltar que o grupo de links do elemento nav estaacute

relacionado com a navegaccedilatildeo primaacuteria ou global que pode estar no

cabeccedilalho no rodapeacute ou em outras seccedilotildees do documento

section

Entre todos os elementos que marcam e definem a estrutura do documento

o elemento section eacute o que possui menor especificidade em sua semacircntica

logo eacute o mais geneacuterico Ele pode abrigar os elementos header article e footer

e sua principal funccedilatildeo eacute dividir o conteuacutedo em macro-estruturas em grande

blocos

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Formulaacuterios Semacircnticos

ltinput type=emailgt

ltinput type=urlgt

ltinput type=numbergt

ltinput type=searchgt

ltinput type=rangegt

ltinput type=dategt

ltinput type=weekgt

httpbitlynrGXhw

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 5: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Buscar eacute preciso

bull Revoluccedilatildeo Digital

bull A Era da Busca

bull Inversatildeo do vetor de Marketing

bull Relacionamento e experiecircncia atraveacutes da busca

bull Marketing de busca

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mais eacute menos

O bombardeio de informaccedilotildees e de possibilidades de escolha nos leva a viver em mundo de nichos e tribos no qual as infinitas opccedilotildees natildeo nos fazem mais felizes mas muitas vezes nos levam agrave um universo de inseguranccedila e individualismo

bull O papel dos mecanismos de busca cresce em importacircncia agrave sombra deste paradoxo eles satildeo o nosso guru desbravando os segredos das esferas de informaccedilatildeo

bull Cada umas destas infinitas esferas eacute composta de infinitas subesferas que estatildeo na extremidade da cauda longa esperando para serem descobertashellip

SCHWARTZ Barry O Pradoxo da escolha por que mais eacute menos Satildeo Paulo A Girafa Editora2007

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nichoRio de janeiro Elsevier2006

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Segmentaccedilatildeo

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultados locais

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultados Pessoais

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultados Pessoais

Faacutebio Flatschart | wwwflatschartcom

SEO Search Engine Optimization

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos fazendo assim Domiacutenio

palestracombr

Tiacutetulo lttitlegt Palestralttitlegt

Subdominio palestrasitecombr

Atributos em Imagens alt = palestra

Texto A palestra sobre SEO foi um

sucesso

Arquivos palestrajpg | palestrapdf

Diretoacuterios sitecombrpalestra

Cabeccedilalho

lth1gtPalestralth1gt

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Ou assim Social

Twitter Facebook

Linkedin Youtube

Links Diretoacuterios Listas

Comentaacuterios

Conteuacutedo Tags Densidade de palavras chaves

exclusividade e variedade de conteuacutedo

Estrutura URL 404 301 Servidor

Faacutebio Flatschart | wwwflatschartcom

Oacutetimo

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Ampliando os conceitos

bull Os fundamentos teacutecnicos satildeo importanteshellip

poreacutemhellip

bull Natildeo existe uma receita uacutenica e universal

bull Natildeo existe uma foacutermula exata e estanque

bull SEO natildeo pode estar desvinculado da inteligecircncia de marketing

bull Como tratar conteuacutedos sociais e ubiacutequos

Faacutebio Flatschart | wwwflatschartcom

SEMAcircNTICA

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Entendendohellip

bull Semacircntica eacute o estudo dos significados

bull Presente na linguiacutestica ciecircncia literatura muacutesica

bull Procura estabelecer a relaccedilatildeo entre palavras frases sinais coacutedigos siacutembolos e aquilo que eles representam

Sintaxe Semacircntica

ltimg title=Faacutebio Flatschart - 1971 src=httpsitecombrfoto71jpg

alt=Faacutebio Flatschart - 1971gt

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Web Semacircntica

bull Todo conteuacutedo publicado na Web pode teoricamente ser interligado semanticamente pelos seus significados

bull Quando os dispositivos entenderem totalmente o conteuacutedo inserido e exibido neles poderatildeo oferecer soluccedilotildees que hoje ainda natildeo satildeo possiacuteveis

bull Noacutes estamos ensinando o sistema a pensar

httpwwwsoyuzcombrblogredes-sociais-ensinando-androides-a-pensar

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultadoshellip

Dados

Informaccedilatildeo

Conhecimento

Inteligecircncia

Faacutebio Flatschart | wwwflatschartcom

HTML5 Novas possibilidades semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart | wwwflatschartcom

HTML

1991 HTML

1994 HTML 2

1996 CSS 1 + JavaScript

1997 HTML 4

1998 CSS 2

2000 XHTML 1

2002 Tableless

2005 AJAX

2009 HTML 5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5

O HTML 5 eacute uma especificaccedilatildeo do W3C ainda natildeo concluiacuteda

Pelas caracteriacutesticas modulares do seu desenvolvimento as empresas fabricantes dos navegadores desenvolvedores designers e usuaacuterios natildeo necessitam aguardar a especificaccedilatildeo final da linguagem para colocaacute-la em uso

Esta nova especificaccedilatildeo introduz novos elementos (tags) orientados para auxiliar no desenvolvimento web baseado em padrotildees compatiacuteveis com todos dispositivos na marcaccedilatildeo semacircntica do coacutedigo na manipulaccedilatildeo de elementos do CSS e do JavaScript atraveacutes da definiccedilatildeo de APIs da arquitetura Web

World Wide Web Consortium - Escritoacuterio Brasil httpwwww3cbr

Faacutebio Flatschart | wwwflatschartcom

Estrutura baacutesica

ltDOCTYPE htmlgt

lthtml lang=pt-brgt

ltheadgt

ltmeta charset=utf-8gt

lttitlegtEstrutura baacutesicalttitlegt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

Faacutebio Flatschart | wwwflatschartcom

Elementos estruturais

HTML4 XHTML

ltbodygt

ltdiv id=topogtltdivgt

ltdiv id=navegacaogtltdivgt

ltdiv id=principalgtltdivgt

ltdiv id=lateralgtltdivgt

ltdiv id=rodapegtltdivgt

ltbodygt

HTML5

ltbodygt

ltheadergtltheadergt

ltnavgtltnavgt

ltarticlegtltarticlegt

ltasidegtltasidegt

ltfootergtltfootergt

ltbodygt

Umas das maiores novidades do HTML5 eacute a possibilidade de atribuir agraves diversas seccedilotildees estuturais do documento um elemento proacuteprio nativo da linguagem

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

article Representa um conteuacutedo independente e altamente relevante pode ser um

post um artigo um bloco de texto ou ainda um mini aplicativo embutido no

conteuacutedo (widget)

aside Define um bloco de conteuacutedo que faz referecircncia ao conteuacutedo principal que o

cerca pode estar em uma barra lateral exibindo informaccedilotildees contextuais

assuntos relacionados publicidade ou um grupo de navegaccedilatildeo secundaacuteria

footer Marca a aacuterea inferior normalmente conhecida como rodapeacute do conteuacutedo

geral do documento ou do conteuacutedo de uma seccedilatildeo especiacutefica a qual ele estaacute

subordinado

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

header

Eacute formado por um bloco de conteuacutedo que pode conter um ou mais elementos

h1 ateacute h6 campo de busca elementos de navegaccedilatildeo um logo ou banner uma

introduccedilatildeo um pequeno prefaacutecio um iacutendice em formato de lista

Normalmente trabalha como um agregador do conteuacutedo do cabeccedilalho de um

documento ou de uma seccedilatildeo

nav

Eacute a uma seccedilatildeo do documento que agrupa links para outras partes do site ou

aplicativo Vale ressaltar que o grupo de links do elemento nav estaacute

relacionado com a navegaccedilatildeo primaacuteria ou global que pode estar no

cabeccedilalho no rodapeacute ou em outras seccedilotildees do documento

section

Entre todos os elementos que marcam e definem a estrutura do documento

o elemento section eacute o que possui menor especificidade em sua semacircntica

logo eacute o mais geneacuterico Ele pode abrigar os elementos header article e footer

e sua principal funccedilatildeo eacute dividir o conteuacutedo em macro-estruturas em grande

blocos

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Formulaacuterios Semacircnticos

ltinput type=emailgt

ltinput type=urlgt

ltinput type=numbergt

ltinput type=searchgt

ltinput type=rangegt

ltinput type=dategt

ltinput type=weekgt

httpbitlynrGXhw

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 6: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mais eacute menos

O bombardeio de informaccedilotildees e de possibilidades de escolha nos leva a viver em mundo de nichos e tribos no qual as infinitas opccedilotildees natildeo nos fazem mais felizes mas muitas vezes nos levam agrave um universo de inseguranccedila e individualismo

bull O papel dos mecanismos de busca cresce em importacircncia agrave sombra deste paradoxo eles satildeo o nosso guru desbravando os segredos das esferas de informaccedilatildeo

bull Cada umas destas infinitas esferas eacute composta de infinitas subesferas que estatildeo na extremidade da cauda longa esperando para serem descobertashellip

SCHWARTZ Barry O Pradoxo da escolha por que mais eacute menos Satildeo Paulo A Girafa Editora2007

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nichoRio de janeiro Elsevier2006

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Segmentaccedilatildeo

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultados locais

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultados Pessoais

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultados Pessoais

Faacutebio Flatschart | wwwflatschartcom

SEO Search Engine Optimization

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos fazendo assim Domiacutenio

palestracombr

Tiacutetulo lttitlegt Palestralttitlegt

Subdominio palestrasitecombr

Atributos em Imagens alt = palestra

Texto A palestra sobre SEO foi um

sucesso

Arquivos palestrajpg | palestrapdf

Diretoacuterios sitecombrpalestra

Cabeccedilalho

lth1gtPalestralth1gt

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Ou assim Social

Twitter Facebook

Linkedin Youtube

Links Diretoacuterios Listas

Comentaacuterios

Conteuacutedo Tags Densidade de palavras chaves

exclusividade e variedade de conteuacutedo

Estrutura URL 404 301 Servidor

Faacutebio Flatschart | wwwflatschartcom

Oacutetimo

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Ampliando os conceitos

bull Os fundamentos teacutecnicos satildeo importanteshellip

poreacutemhellip

bull Natildeo existe uma receita uacutenica e universal

bull Natildeo existe uma foacutermula exata e estanque

bull SEO natildeo pode estar desvinculado da inteligecircncia de marketing

bull Como tratar conteuacutedos sociais e ubiacutequos

Faacutebio Flatschart | wwwflatschartcom

SEMAcircNTICA

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Entendendohellip

bull Semacircntica eacute o estudo dos significados

bull Presente na linguiacutestica ciecircncia literatura muacutesica

bull Procura estabelecer a relaccedilatildeo entre palavras frases sinais coacutedigos siacutembolos e aquilo que eles representam

Sintaxe Semacircntica

ltimg title=Faacutebio Flatschart - 1971 src=httpsitecombrfoto71jpg

alt=Faacutebio Flatschart - 1971gt

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Web Semacircntica

bull Todo conteuacutedo publicado na Web pode teoricamente ser interligado semanticamente pelos seus significados

bull Quando os dispositivos entenderem totalmente o conteuacutedo inserido e exibido neles poderatildeo oferecer soluccedilotildees que hoje ainda natildeo satildeo possiacuteveis

bull Noacutes estamos ensinando o sistema a pensar

httpwwwsoyuzcombrblogredes-sociais-ensinando-androides-a-pensar

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultadoshellip

Dados

Informaccedilatildeo

Conhecimento

Inteligecircncia

Faacutebio Flatschart | wwwflatschartcom

HTML5 Novas possibilidades semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart | wwwflatschartcom

HTML

1991 HTML

1994 HTML 2

1996 CSS 1 + JavaScript

1997 HTML 4

1998 CSS 2

2000 XHTML 1

2002 Tableless

2005 AJAX

2009 HTML 5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5

O HTML 5 eacute uma especificaccedilatildeo do W3C ainda natildeo concluiacuteda

Pelas caracteriacutesticas modulares do seu desenvolvimento as empresas fabricantes dos navegadores desenvolvedores designers e usuaacuterios natildeo necessitam aguardar a especificaccedilatildeo final da linguagem para colocaacute-la em uso

Esta nova especificaccedilatildeo introduz novos elementos (tags) orientados para auxiliar no desenvolvimento web baseado em padrotildees compatiacuteveis com todos dispositivos na marcaccedilatildeo semacircntica do coacutedigo na manipulaccedilatildeo de elementos do CSS e do JavaScript atraveacutes da definiccedilatildeo de APIs da arquitetura Web

World Wide Web Consortium - Escritoacuterio Brasil httpwwww3cbr

Faacutebio Flatschart | wwwflatschartcom

Estrutura baacutesica

ltDOCTYPE htmlgt

lthtml lang=pt-brgt

ltheadgt

ltmeta charset=utf-8gt

lttitlegtEstrutura baacutesicalttitlegt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

Faacutebio Flatschart | wwwflatschartcom

Elementos estruturais

HTML4 XHTML

ltbodygt

ltdiv id=topogtltdivgt

ltdiv id=navegacaogtltdivgt

ltdiv id=principalgtltdivgt

ltdiv id=lateralgtltdivgt

ltdiv id=rodapegtltdivgt

ltbodygt

HTML5

ltbodygt

ltheadergtltheadergt

ltnavgtltnavgt

ltarticlegtltarticlegt

ltasidegtltasidegt

ltfootergtltfootergt

ltbodygt

Umas das maiores novidades do HTML5 eacute a possibilidade de atribuir agraves diversas seccedilotildees estuturais do documento um elemento proacuteprio nativo da linguagem

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

article Representa um conteuacutedo independente e altamente relevante pode ser um

post um artigo um bloco de texto ou ainda um mini aplicativo embutido no

conteuacutedo (widget)

aside Define um bloco de conteuacutedo que faz referecircncia ao conteuacutedo principal que o

cerca pode estar em uma barra lateral exibindo informaccedilotildees contextuais

assuntos relacionados publicidade ou um grupo de navegaccedilatildeo secundaacuteria

footer Marca a aacuterea inferior normalmente conhecida como rodapeacute do conteuacutedo

geral do documento ou do conteuacutedo de uma seccedilatildeo especiacutefica a qual ele estaacute

subordinado

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

header

Eacute formado por um bloco de conteuacutedo que pode conter um ou mais elementos

h1 ateacute h6 campo de busca elementos de navegaccedilatildeo um logo ou banner uma

introduccedilatildeo um pequeno prefaacutecio um iacutendice em formato de lista

Normalmente trabalha como um agregador do conteuacutedo do cabeccedilalho de um

documento ou de uma seccedilatildeo

nav

Eacute a uma seccedilatildeo do documento que agrupa links para outras partes do site ou

aplicativo Vale ressaltar que o grupo de links do elemento nav estaacute

relacionado com a navegaccedilatildeo primaacuteria ou global que pode estar no

cabeccedilalho no rodapeacute ou em outras seccedilotildees do documento

section

Entre todos os elementos que marcam e definem a estrutura do documento

o elemento section eacute o que possui menor especificidade em sua semacircntica

logo eacute o mais geneacuterico Ele pode abrigar os elementos header article e footer

e sua principal funccedilatildeo eacute dividir o conteuacutedo em macro-estruturas em grande

blocos

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Formulaacuterios Semacircnticos

ltinput type=emailgt

ltinput type=urlgt

ltinput type=numbergt

ltinput type=searchgt

ltinput type=rangegt

ltinput type=dategt

ltinput type=weekgt

httpbitlynrGXhw

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 7: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Segmentaccedilatildeo

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultados locais

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultados Pessoais

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultados Pessoais

Faacutebio Flatschart | wwwflatschartcom

SEO Search Engine Optimization

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos fazendo assim Domiacutenio

palestracombr

Tiacutetulo lttitlegt Palestralttitlegt

Subdominio palestrasitecombr

Atributos em Imagens alt = palestra

Texto A palestra sobre SEO foi um

sucesso

Arquivos palestrajpg | palestrapdf

Diretoacuterios sitecombrpalestra

Cabeccedilalho

lth1gtPalestralth1gt

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Ou assim Social

Twitter Facebook

Linkedin Youtube

Links Diretoacuterios Listas

Comentaacuterios

Conteuacutedo Tags Densidade de palavras chaves

exclusividade e variedade de conteuacutedo

Estrutura URL 404 301 Servidor

Faacutebio Flatschart | wwwflatschartcom

Oacutetimo

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Ampliando os conceitos

bull Os fundamentos teacutecnicos satildeo importanteshellip

poreacutemhellip

bull Natildeo existe uma receita uacutenica e universal

bull Natildeo existe uma foacutermula exata e estanque

bull SEO natildeo pode estar desvinculado da inteligecircncia de marketing

bull Como tratar conteuacutedos sociais e ubiacutequos

Faacutebio Flatschart | wwwflatschartcom

SEMAcircNTICA

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Entendendohellip

bull Semacircntica eacute o estudo dos significados

bull Presente na linguiacutestica ciecircncia literatura muacutesica

bull Procura estabelecer a relaccedilatildeo entre palavras frases sinais coacutedigos siacutembolos e aquilo que eles representam

Sintaxe Semacircntica

ltimg title=Faacutebio Flatschart - 1971 src=httpsitecombrfoto71jpg

alt=Faacutebio Flatschart - 1971gt

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Web Semacircntica

bull Todo conteuacutedo publicado na Web pode teoricamente ser interligado semanticamente pelos seus significados

bull Quando os dispositivos entenderem totalmente o conteuacutedo inserido e exibido neles poderatildeo oferecer soluccedilotildees que hoje ainda natildeo satildeo possiacuteveis

bull Noacutes estamos ensinando o sistema a pensar

httpwwwsoyuzcombrblogredes-sociais-ensinando-androides-a-pensar

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultadoshellip

Dados

Informaccedilatildeo

Conhecimento

Inteligecircncia

Faacutebio Flatschart | wwwflatschartcom

HTML5 Novas possibilidades semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart | wwwflatschartcom

HTML

1991 HTML

1994 HTML 2

1996 CSS 1 + JavaScript

1997 HTML 4

1998 CSS 2

2000 XHTML 1

2002 Tableless

2005 AJAX

2009 HTML 5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5

O HTML 5 eacute uma especificaccedilatildeo do W3C ainda natildeo concluiacuteda

Pelas caracteriacutesticas modulares do seu desenvolvimento as empresas fabricantes dos navegadores desenvolvedores designers e usuaacuterios natildeo necessitam aguardar a especificaccedilatildeo final da linguagem para colocaacute-la em uso

Esta nova especificaccedilatildeo introduz novos elementos (tags) orientados para auxiliar no desenvolvimento web baseado em padrotildees compatiacuteveis com todos dispositivos na marcaccedilatildeo semacircntica do coacutedigo na manipulaccedilatildeo de elementos do CSS e do JavaScript atraveacutes da definiccedilatildeo de APIs da arquitetura Web

World Wide Web Consortium - Escritoacuterio Brasil httpwwww3cbr

Faacutebio Flatschart | wwwflatschartcom

Estrutura baacutesica

ltDOCTYPE htmlgt

lthtml lang=pt-brgt

ltheadgt

ltmeta charset=utf-8gt

lttitlegtEstrutura baacutesicalttitlegt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

Faacutebio Flatschart | wwwflatschartcom

Elementos estruturais

HTML4 XHTML

ltbodygt

ltdiv id=topogtltdivgt

ltdiv id=navegacaogtltdivgt

ltdiv id=principalgtltdivgt

ltdiv id=lateralgtltdivgt

ltdiv id=rodapegtltdivgt

ltbodygt

HTML5

ltbodygt

ltheadergtltheadergt

ltnavgtltnavgt

ltarticlegtltarticlegt

ltasidegtltasidegt

ltfootergtltfootergt

ltbodygt

Umas das maiores novidades do HTML5 eacute a possibilidade de atribuir agraves diversas seccedilotildees estuturais do documento um elemento proacuteprio nativo da linguagem

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

article Representa um conteuacutedo independente e altamente relevante pode ser um

post um artigo um bloco de texto ou ainda um mini aplicativo embutido no

conteuacutedo (widget)

aside Define um bloco de conteuacutedo que faz referecircncia ao conteuacutedo principal que o

cerca pode estar em uma barra lateral exibindo informaccedilotildees contextuais

assuntos relacionados publicidade ou um grupo de navegaccedilatildeo secundaacuteria

footer Marca a aacuterea inferior normalmente conhecida como rodapeacute do conteuacutedo

geral do documento ou do conteuacutedo de uma seccedilatildeo especiacutefica a qual ele estaacute

subordinado

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

header

Eacute formado por um bloco de conteuacutedo que pode conter um ou mais elementos

h1 ateacute h6 campo de busca elementos de navegaccedilatildeo um logo ou banner uma

introduccedilatildeo um pequeno prefaacutecio um iacutendice em formato de lista

Normalmente trabalha como um agregador do conteuacutedo do cabeccedilalho de um

documento ou de uma seccedilatildeo

nav

Eacute a uma seccedilatildeo do documento que agrupa links para outras partes do site ou

aplicativo Vale ressaltar que o grupo de links do elemento nav estaacute

relacionado com a navegaccedilatildeo primaacuteria ou global que pode estar no

cabeccedilalho no rodapeacute ou em outras seccedilotildees do documento

section

Entre todos os elementos que marcam e definem a estrutura do documento

o elemento section eacute o que possui menor especificidade em sua semacircntica

logo eacute o mais geneacuterico Ele pode abrigar os elementos header article e footer

e sua principal funccedilatildeo eacute dividir o conteuacutedo em macro-estruturas em grande

blocos

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Formulaacuterios Semacircnticos

ltinput type=emailgt

ltinput type=urlgt

ltinput type=numbergt

ltinput type=searchgt

ltinput type=rangegt

ltinput type=dategt

ltinput type=weekgt

httpbitlynrGXhw

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 8: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultados locais

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultados Pessoais

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultados Pessoais

Faacutebio Flatschart | wwwflatschartcom

SEO Search Engine Optimization

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos fazendo assim Domiacutenio

palestracombr

Tiacutetulo lttitlegt Palestralttitlegt

Subdominio palestrasitecombr

Atributos em Imagens alt = palestra

Texto A palestra sobre SEO foi um

sucesso

Arquivos palestrajpg | palestrapdf

Diretoacuterios sitecombrpalestra

Cabeccedilalho

lth1gtPalestralth1gt

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Ou assim Social

Twitter Facebook

Linkedin Youtube

Links Diretoacuterios Listas

Comentaacuterios

Conteuacutedo Tags Densidade de palavras chaves

exclusividade e variedade de conteuacutedo

Estrutura URL 404 301 Servidor

Faacutebio Flatschart | wwwflatschartcom

Oacutetimo

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Ampliando os conceitos

bull Os fundamentos teacutecnicos satildeo importanteshellip

poreacutemhellip

bull Natildeo existe uma receita uacutenica e universal

bull Natildeo existe uma foacutermula exata e estanque

bull SEO natildeo pode estar desvinculado da inteligecircncia de marketing

bull Como tratar conteuacutedos sociais e ubiacutequos

Faacutebio Flatschart | wwwflatschartcom

SEMAcircNTICA

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Entendendohellip

bull Semacircntica eacute o estudo dos significados

bull Presente na linguiacutestica ciecircncia literatura muacutesica

bull Procura estabelecer a relaccedilatildeo entre palavras frases sinais coacutedigos siacutembolos e aquilo que eles representam

Sintaxe Semacircntica

ltimg title=Faacutebio Flatschart - 1971 src=httpsitecombrfoto71jpg

alt=Faacutebio Flatschart - 1971gt

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Web Semacircntica

bull Todo conteuacutedo publicado na Web pode teoricamente ser interligado semanticamente pelos seus significados

bull Quando os dispositivos entenderem totalmente o conteuacutedo inserido e exibido neles poderatildeo oferecer soluccedilotildees que hoje ainda natildeo satildeo possiacuteveis

bull Noacutes estamos ensinando o sistema a pensar

httpwwwsoyuzcombrblogredes-sociais-ensinando-androides-a-pensar

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultadoshellip

Dados

Informaccedilatildeo

Conhecimento

Inteligecircncia

Faacutebio Flatschart | wwwflatschartcom

HTML5 Novas possibilidades semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart | wwwflatschartcom

HTML

1991 HTML

1994 HTML 2

1996 CSS 1 + JavaScript

1997 HTML 4

1998 CSS 2

2000 XHTML 1

2002 Tableless

2005 AJAX

2009 HTML 5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5

O HTML 5 eacute uma especificaccedilatildeo do W3C ainda natildeo concluiacuteda

Pelas caracteriacutesticas modulares do seu desenvolvimento as empresas fabricantes dos navegadores desenvolvedores designers e usuaacuterios natildeo necessitam aguardar a especificaccedilatildeo final da linguagem para colocaacute-la em uso

Esta nova especificaccedilatildeo introduz novos elementos (tags) orientados para auxiliar no desenvolvimento web baseado em padrotildees compatiacuteveis com todos dispositivos na marcaccedilatildeo semacircntica do coacutedigo na manipulaccedilatildeo de elementos do CSS e do JavaScript atraveacutes da definiccedilatildeo de APIs da arquitetura Web

World Wide Web Consortium - Escritoacuterio Brasil httpwwww3cbr

Faacutebio Flatschart | wwwflatschartcom

Estrutura baacutesica

ltDOCTYPE htmlgt

lthtml lang=pt-brgt

ltheadgt

ltmeta charset=utf-8gt

lttitlegtEstrutura baacutesicalttitlegt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

Faacutebio Flatschart | wwwflatschartcom

Elementos estruturais

HTML4 XHTML

ltbodygt

ltdiv id=topogtltdivgt

ltdiv id=navegacaogtltdivgt

ltdiv id=principalgtltdivgt

ltdiv id=lateralgtltdivgt

ltdiv id=rodapegtltdivgt

ltbodygt

HTML5

ltbodygt

ltheadergtltheadergt

ltnavgtltnavgt

ltarticlegtltarticlegt

ltasidegtltasidegt

ltfootergtltfootergt

ltbodygt

Umas das maiores novidades do HTML5 eacute a possibilidade de atribuir agraves diversas seccedilotildees estuturais do documento um elemento proacuteprio nativo da linguagem

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

article Representa um conteuacutedo independente e altamente relevante pode ser um

post um artigo um bloco de texto ou ainda um mini aplicativo embutido no

conteuacutedo (widget)

aside Define um bloco de conteuacutedo que faz referecircncia ao conteuacutedo principal que o

cerca pode estar em uma barra lateral exibindo informaccedilotildees contextuais

assuntos relacionados publicidade ou um grupo de navegaccedilatildeo secundaacuteria

footer Marca a aacuterea inferior normalmente conhecida como rodapeacute do conteuacutedo

geral do documento ou do conteuacutedo de uma seccedilatildeo especiacutefica a qual ele estaacute

subordinado

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

header

Eacute formado por um bloco de conteuacutedo que pode conter um ou mais elementos

h1 ateacute h6 campo de busca elementos de navegaccedilatildeo um logo ou banner uma

introduccedilatildeo um pequeno prefaacutecio um iacutendice em formato de lista

Normalmente trabalha como um agregador do conteuacutedo do cabeccedilalho de um

documento ou de uma seccedilatildeo

nav

Eacute a uma seccedilatildeo do documento que agrupa links para outras partes do site ou

aplicativo Vale ressaltar que o grupo de links do elemento nav estaacute

relacionado com a navegaccedilatildeo primaacuteria ou global que pode estar no

cabeccedilalho no rodapeacute ou em outras seccedilotildees do documento

section

Entre todos os elementos que marcam e definem a estrutura do documento

o elemento section eacute o que possui menor especificidade em sua semacircntica

logo eacute o mais geneacuterico Ele pode abrigar os elementos header article e footer

e sua principal funccedilatildeo eacute dividir o conteuacutedo em macro-estruturas em grande

blocos

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Formulaacuterios Semacircnticos

ltinput type=emailgt

ltinput type=urlgt

ltinput type=numbergt

ltinput type=searchgt

ltinput type=rangegt

ltinput type=dategt

ltinput type=weekgt

httpbitlynrGXhw

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 9: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultados Pessoais

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultados Pessoais

Faacutebio Flatschart | wwwflatschartcom

SEO Search Engine Optimization

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos fazendo assim Domiacutenio

palestracombr

Tiacutetulo lttitlegt Palestralttitlegt

Subdominio palestrasitecombr

Atributos em Imagens alt = palestra

Texto A palestra sobre SEO foi um

sucesso

Arquivos palestrajpg | palestrapdf

Diretoacuterios sitecombrpalestra

Cabeccedilalho

lth1gtPalestralth1gt

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Ou assim Social

Twitter Facebook

Linkedin Youtube

Links Diretoacuterios Listas

Comentaacuterios

Conteuacutedo Tags Densidade de palavras chaves

exclusividade e variedade de conteuacutedo

Estrutura URL 404 301 Servidor

Faacutebio Flatschart | wwwflatschartcom

Oacutetimo

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Ampliando os conceitos

bull Os fundamentos teacutecnicos satildeo importanteshellip

poreacutemhellip

bull Natildeo existe uma receita uacutenica e universal

bull Natildeo existe uma foacutermula exata e estanque

bull SEO natildeo pode estar desvinculado da inteligecircncia de marketing

bull Como tratar conteuacutedos sociais e ubiacutequos

Faacutebio Flatschart | wwwflatschartcom

SEMAcircNTICA

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Entendendohellip

bull Semacircntica eacute o estudo dos significados

bull Presente na linguiacutestica ciecircncia literatura muacutesica

bull Procura estabelecer a relaccedilatildeo entre palavras frases sinais coacutedigos siacutembolos e aquilo que eles representam

Sintaxe Semacircntica

ltimg title=Faacutebio Flatschart - 1971 src=httpsitecombrfoto71jpg

alt=Faacutebio Flatschart - 1971gt

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Web Semacircntica

bull Todo conteuacutedo publicado na Web pode teoricamente ser interligado semanticamente pelos seus significados

bull Quando os dispositivos entenderem totalmente o conteuacutedo inserido e exibido neles poderatildeo oferecer soluccedilotildees que hoje ainda natildeo satildeo possiacuteveis

bull Noacutes estamos ensinando o sistema a pensar

httpwwwsoyuzcombrblogredes-sociais-ensinando-androides-a-pensar

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultadoshellip

Dados

Informaccedilatildeo

Conhecimento

Inteligecircncia

Faacutebio Flatschart | wwwflatschartcom

HTML5 Novas possibilidades semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart | wwwflatschartcom

HTML

1991 HTML

1994 HTML 2

1996 CSS 1 + JavaScript

1997 HTML 4

1998 CSS 2

2000 XHTML 1

2002 Tableless

2005 AJAX

2009 HTML 5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5

O HTML 5 eacute uma especificaccedilatildeo do W3C ainda natildeo concluiacuteda

Pelas caracteriacutesticas modulares do seu desenvolvimento as empresas fabricantes dos navegadores desenvolvedores designers e usuaacuterios natildeo necessitam aguardar a especificaccedilatildeo final da linguagem para colocaacute-la em uso

Esta nova especificaccedilatildeo introduz novos elementos (tags) orientados para auxiliar no desenvolvimento web baseado em padrotildees compatiacuteveis com todos dispositivos na marcaccedilatildeo semacircntica do coacutedigo na manipulaccedilatildeo de elementos do CSS e do JavaScript atraveacutes da definiccedilatildeo de APIs da arquitetura Web

World Wide Web Consortium - Escritoacuterio Brasil httpwwww3cbr

Faacutebio Flatschart | wwwflatschartcom

Estrutura baacutesica

ltDOCTYPE htmlgt

lthtml lang=pt-brgt

ltheadgt

ltmeta charset=utf-8gt

lttitlegtEstrutura baacutesicalttitlegt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

Faacutebio Flatschart | wwwflatschartcom

Elementos estruturais

HTML4 XHTML

ltbodygt

ltdiv id=topogtltdivgt

ltdiv id=navegacaogtltdivgt

ltdiv id=principalgtltdivgt

ltdiv id=lateralgtltdivgt

ltdiv id=rodapegtltdivgt

ltbodygt

HTML5

ltbodygt

ltheadergtltheadergt

ltnavgtltnavgt

ltarticlegtltarticlegt

ltasidegtltasidegt

ltfootergtltfootergt

ltbodygt

Umas das maiores novidades do HTML5 eacute a possibilidade de atribuir agraves diversas seccedilotildees estuturais do documento um elemento proacuteprio nativo da linguagem

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

article Representa um conteuacutedo independente e altamente relevante pode ser um

post um artigo um bloco de texto ou ainda um mini aplicativo embutido no

conteuacutedo (widget)

aside Define um bloco de conteuacutedo que faz referecircncia ao conteuacutedo principal que o

cerca pode estar em uma barra lateral exibindo informaccedilotildees contextuais

assuntos relacionados publicidade ou um grupo de navegaccedilatildeo secundaacuteria

footer Marca a aacuterea inferior normalmente conhecida como rodapeacute do conteuacutedo

geral do documento ou do conteuacutedo de uma seccedilatildeo especiacutefica a qual ele estaacute

subordinado

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

header

Eacute formado por um bloco de conteuacutedo que pode conter um ou mais elementos

h1 ateacute h6 campo de busca elementos de navegaccedilatildeo um logo ou banner uma

introduccedilatildeo um pequeno prefaacutecio um iacutendice em formato de lista

Normalmente trabalha como um agregador do conteuacutedo do cabeccedilalho de um

documento ou de uma seccedilatildeo

nav

Eacute a uma seccedilatildeo do documento que agrupa links para outras partes do site ou

aplicativo Vale ressaltar que o grupo de links do elemento nav estaacute

relacionado com a navegaccedilatildeo primaacuteria ou global que pode estar no

cabeccedilalho no rodapeacute ou em outras seccedilotildees do documento

section

Entre todos os elementos que marcam e definem a estrutura do documento

o elemento section eacute o que possui menor especificidade em sua semacircntica

logo eacute o mais geneacuterico Ele pode abrigar os elementos header article e footer

e sua principal funccedilatildeo eacute dividir o conteuacutedo em macro-estruturas em grande

blocos

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Formulaacuterios Semacircnticos

ltinput type=emailgt

ltinput type=urlgt

ltinput type=numbergt

ltinput type=searchgt

ltinput type=rangegt

ltinput type=dategt

ltinput type=weekgt

httpbitlynrGXhw

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 10: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultados Pessoais

Faacutebio Flatschart | wwwflatschartcom

SEO Search Engine Optimization

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos fazendo assim Domiacutenio

palestracombr

Tiacutetulo lttitlegt Palestralttitlegt

Subdominio palestrasitecombr

Atributos em Imagens alt = palestra

Texto A palestra sobre SEO foi um

sucesso

Arquivos palestrajpg | palestrapdf

Diretoacuterios sitecombrpalestra

Cabeccedilalho

lth1gtPalestralth1gt

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Ou assim Social

Twitter Facebook

Linkedin Youtube

Links Diretoacuterios Listas

Comentaacuterios

Conteuacutedo Tags Densidade de palavras chaves

exclusividade e variedade de conteuacutedo

Estrutura URL 404 301 Servidor

Faacutebio Flatschart | wwwflatschartcom

Oacutetimo

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Ampliando os conceitos

bull Os fundamentos teacutecnicos satildeo importanteshellip

poreacutemhellip

bull Natildeo existe uma receita uacutenica e universal

bull Natildeo existe uma foacutermula exata e estanque

bull SEO natildeo pode estar desvinculado da inteligecircncia de marketing

bull Como tratar conteuacutedos sociais e ubiacutequos

Faacutebio Flatschart | wwwflatschartcom

SEMAcircNTICA

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Entendendohellip

bull Semacircntica eacute o estudo dos significados

bull Presente na linguiacutestica ciecircncia literatura muacutesica

bull Procura estabelecer a relaccedilatildeo entre palavras frases sinais coacutedigos siacutembolos e aquilo que eles representam

Sintaxe Semacircntica

ltimg title=Faacutebio Flatschart - 1971 src=httpsitecombrfoto71jpg

alt=Faacutebio Flatschart - 1971gt

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Web Semacircntica

bull Todo conteuacutedo publicado na Web pode teoricamente ser interligado semanticamente pelos seus significados

bull Quando os dispositivos entenderem totalmente o conteuacutedo inserido e exibido neles poderatildeo oferecer soluccedilotildees que hoje ainda natildeo satildeo possiacuteveis

bull Noacutes estamos ensinando o sistema a pensar

httpwwwsoyuzcombrblogredes-sociais-ensinando-androides-a-pensar

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultadoshellip

Dados

Informaccedilatildeo

Conhecimento

Inteligecircncia

Faacutebio Flatschart | wwwflatschartcom

HTML5 Novas possibilidades semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart | wwwflatschartcom

HTML

1991 HTML

1994 HTML 2

1996 CSS 1 + JavaScript

1997 HTML 4

1998 CSS 2

2000 XHTML 1

2002 Tableless

2005 AJAX

2009 HTML 5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5

O HTML 5 eacute uma especificaccedilatildeo do W3C ainda natildeo concluiacuteda

Pelas caracteriacutesticas modulares do seu desenvolvimento as empresas fabricantes dos navegadores desenvolvedores designers e usuaacuterios natildeo necessitam aguardar a especificaccedilatildeo final da linguagem para colocaacute-la em uso

Esta nova especificaccedilatildeo introduz novos elementos (tags) orientados para auxiliar no desenvolvimento web baseado em padrotildees compatiacuteveis com todos dispositivos na marcaccedilatildeo semacircntica do coacutedigo na manipulaccedilatildeo de elementos do CSS e do JavaScript atraveacutes da definiccedilatildeo de APIs da arquitetura Web

World Wide Web Consortium - Escritoacuterio Brasil httpwwww3cbr

Faacutebio Flatschart | wwwflatschartcom

Estrutura baacutesica

ltDOCTYPE htmlgt

lthtml lang=pt-brgt

ltheadgt

ltmeta charset=utf-8gt

lttitlegtEstrutura baacutesicalttitlegt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

Faacutebio Flatschart | wwwflatschartcom

Elementos estruturais

HTML4 XHTML

ltbodygt

ltdiv id=topogtltdivgt

ltdiv id=navegacaogtltdivgt

ltdiv id=principalgtltdivgt

ltdiv id=lateralgtltdivgt

ltdiv id=rodapegtltdivgt

ltbodygt

HTML5

ltbodygt

ltheadergtltheadergt

ltnavgtltnavgt

ltarticlegtltarticlegt

ltasidegtltasidegt

ltfootergtltfootergt

ltbodygt

Umas das maiores novidades do HTML5 eacute a possibilidade de atribuir agraves diversas seccedilotildees estuturais do documento um elemento proacuteprio nativo da linguagem

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

article Representa um conteuacutedo independente e altamente relevante pode ser um

post um artigo um bloco de texto ou ainda um mini aplicativo embutido no

conteuacutedo (widget)

aside Define um bloco de conteuacutedo que faz referecircncia ao conteuacutedo principal que o

cerca pode estar em uma barra lateral exibindo informaccedilotildees contextuais

assuntos relacionados publicidade ou um grupo de navegaccedilatildeo secundaacuteria

footer Marca a aacuterea inferior normalmente conhecida como rodapeacute do conteuacutedo

geral do documento ou do conteuacutedo de uma seccedilatildeo especiacutefica a qual ele estaacute

subordinado

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

header

Eacute formado por um bloco de conteuacutedo que pode conter um ou mais elementos

h1 ateacute h6 campo de busca elementos de navegaccedilatildeo um logo ou banner uma

introduccedilatildeo um pequeno prefaacutecio um iacutendice em formato de lista

Normalmente trabalha como um agregador do conteuacutedo do cabeccedilalho de um

documento ou de uma seccedilatildeo

nav

Eacute a uma seccedilatildeo do documento que agrupa links para outras partes do site ou

aplicativo Vale ressaltar que o grupo de links do elemento nav estaacute

relacionado com a navegaccedilatildeo primaacuteria ou global que pode estar no

cabeccedilalho no rodapeacute ou em outras seccedilotildees do documento

section

Entre todos os elementos que marcam e definem a estrutura do documento

o elemento section eacute o que possui menor especificidade em sua semacircntica

logo eacute o mais geneacuterico Ele pode abrigar os elementos header article e footer

e sua principal funccedilatildeo eacute dividir o conteuacutedo em macro-estruturas em grande

blocos

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Formulaacuterios Semacircnticos

ltinput type=emailgt

ltinput type=urlgt

ltinput type=numbergt

ltinput type=searchgt

ltinput type=rangegt

ltinput type=dategt

ltinput type=weekgt

httpbitlynrGXhw

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 11: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom

SEO Search Engine Optimization

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos fazendo assim Domiacutenio

palestracombr

Tiacutetulo lttitlegt Palestralttitlegt

Subdominio palestrasitecombr

Atributos em Imagens alt = palestra

Texto A palestra sobre SEO foi um

sucesso

Arquivos palestrajpg | palestrapdf

Diretoacuterios sitecombrpalestra

Cabeccedilalho

lth1gtPalestralth1gt

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Ou assim Social

Twitter Facebook

Linkedin Youtube

Links Diretoacuterios Listas

Comentaacuterios

Conteuacutedo Tags Densidade de palavras chaves

exclusividade e variedade de conteuacutedo

Estrutura URL 404 301 Servidor

Faacutebio Flatschart | wwwflatschartcom

Oacutetimo

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Ampliando os conceitos

bull Os fundamentos teacutecnicos satildeo importanteshellip

poreacutemhellip

bull Natildeo existe uma receita uacutenica e universal

bull Natildeo existe uma foacutermula exata e estanque

bull SEO natildeo pode estar desvinculado da inteligecircncia de marketing

bull Como tratar conteuacutedos sociais e ubiacutequos

Faacutebio Flatschart | wwwflatschartcom

SEMAcircNTICA

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Entendendohellip

bull Semacircntica eacute o estudo dos significados

bull Presente na linguiacutestica ciecircncia literatura muacutesica

bull Procura estabelecer a relaccedilatildeo entre palavras frases sinais coacutedigos siacutembolos e aquilo que eles representam

Sintaxe Semacircntica

ltimg title=Faacutebio Flatschart - 1971 src=httpsitecombrfoto71jpg

alt=Faacutebio Flatschart - 1971gt

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Web Semacircntica

bull Todo conteuacutedo publicado na Web pode teoricamente ser interligado semanticamente pelos seus significados

bull Quando os dispositivos entenderem totalmente o conteuacutedo inserido e exibido neles poderatildeo oferecer soluccedilotildees que hoje ainda natildeo satildeo possiacuteveis

bull Noacutes estamos ensinando o sistema a pensar

httpwwwsoyuzcombrblogredes-sociais-ensinando-androides-a-pensar

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultadoshellip

Dados

Informaccedilatildeo

Conhecimento

Inteligecircncia

Faacutebio Flatschart | wwwflatschartcom

HTML5 Novas possibilidades semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart | wwwflatschartcom

HTML

1991 HTML

1994 HTML 2

1996 CSS 1 + JavaScript

1997 HTML 4

1998 CSS 2

2000 XHTML 1

2002 Tableless

2005 AJAX

2009 HTML 5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5

O HTML 5 eacute uma especificaccedilatildeo do W3C ainda natildeo concluiacuteda

Pelas caracteriacutesticas modulares do seu desenvolvimento as empresas fabricantes dos navegadores desenvolvedores designers e usuaacuterios natildeo necessitam aguardar a especificaccedilatildeo final da linguagem para colocaacute-la em uso

Esta nova especificaccedilatildeo introduz novos elementos (tags) orientados para auxiliar no desenvolvimento web baseado em padrotildees compatiacuteveis com todos dispositivos na marcaccedilatildeo semacircntica do coacutedigo na manipulaccedilatildeo de elementos do CSS e do JavaScript atraveacutes da definiccedilatildeo de APIs da arquitetura Web

World Wide Web Consortium - Escritoacuterio Brasil httpwwww3cbr

Faacutebio Flatschart | wwwflatschartcom

Estrutura baacutesica

ltDOCTYPE htmlgt

lthtml lang=pt-brgt

ltheadgt

ltmeta charset=utf-8gt

lttitlegtEstrutura baacutesicalttitlegt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

Faacutebio Flatschart | wwwflatschartcom

Elementos estruturais

HTML4 XHTML

ltbodygt

ltdiv id=topogtltdivgt

ltdiv id=navegacaogtltdivgt

ltdiv id=principalgtltdivgt

ltdiv id=lateralgtltdivgt

ltdiv id=rodapegtltdivgt

ltbodygt

HTML5

ltbodygt

ltheadergtltheadergt

ltnavgtltnavgt

ltarticlegtltarticlegt

ltasidegtltasidegt

ltfootergtltfootergt

ltbodygt

Umas das maiores novidades do HTML5 eacute a possibilidade de atribuir agraves diversas seccedilotildees estuturais do documento um elemento proacuteprio nativo da linguagem

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

article Representa um conteuacutedo independente e altamente relevante pode ser um

post um artigo um bloco de texto ou ainda um mini aplicativo embutido no

conteuacutedo (widget)

aside Define um bloco de conteuacutedo que faz referecircncia ao conteuacutedo principal que o

cerca pode estar em uma barra lateral exibindo informaccedilotildees contextuais

assuntos relacionados publicidade ou um grupo de navegaccedilatildeo secundaacuteria

footer Marca a aacuterea inferior normalmente conhecida como rodapeacute do conteuacutedo

geral do documento ou do conteuacutedo de uma seccedilatildeo especiacutefica a qual ele estaacute

subordinado

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

header

Eacute formado por um bloco de conteuacutedo que pode conter um ou mais elementos

h1 ateacute h6 campo de busca elementos de navegaccedilatildeo um logo ou banner uma

introduccedilatildeo um pequeno prefaacutecio um iacutendice em formato de lista

Normalmente trabalha como um agregador do conteuacutedo do cabeccedilalho de um

documento ou de uma seccedilatildeo

nav

Eacute a uma seccedilatildeo do documento que agrupa links para outras partes do site ou

aplicativo Vale ressaltar que o grupo de links do elemento nav estaacute

relacionado com a navegaccedilatildeo primaacuteria ou global que pode estar no

cabeccedilalho no rodapeacute ou em outras seccedilotildees do documento

section

Entre todos os elementos que marcam e definem a estrutura do documento

o elemento section eacute o que possui menor especificidade em sua semacircntica

logo eacute o mais geneacuterico Ele pode abrigar os elementos header article e footer

e sua principal funccedilatildeo eacute dividir o conteuacutedo em macro-estruturas em grande

blocos

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Formulaacuterios Semacircnticos

ltinput type=emailgt

ltinput type=urlgt

ltinput type=numbergt

ltinput type=searchgt

ltinput type=rangegt

ltinput type=dategt

ltinput type=weekgt

httpbitlynrGXhw

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 12: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos fazendo assim Domiacutenio

palestracombr

Tiacutetulo lttitlegt Palestralttitlegt

Subdominio palestrasitecombr

Atributos em Imagens alt = palestra

Texto A palestra sobre SEO foi um

sucesso

Arquivos palestrajpg | palestrapdf

Diretoacuterios sitecombrpalestra

Cabeccedilalho

lth1gtPalestralth1gt

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Ou assim Social

Twitter Facebook

Linkedin Youtube

Links Diretoacuterios Listas

Comentaacuterios

Conteuacutedo Tags Densidade de palavras chaves

exclusividade e variedade de conteuacutedo

Estrutura URL 404 301 Servidor

Faacutebio Flatschart | wwwflatschartcom

Oacutetimo

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Ampliando os conceitos

bull Os fundamentos teacutecnicos satildeo importanteshellip

poreacutemhellip

bull Natildeo existe uma receita uacutenica e universal

bull Natildeo existe uma foacutermula exata e estanque

bull SEO natildeo pode estar desvinculado da inteligecircncia de marketing

bull Como tratar conteuacutedos sociais e ubiacutequos

Faacutebio Flatschart | wwwflatschartcom

SEMAcircNTICA

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Entendendohellip

bull Semacircntica eacute o estudo dos significados

bull Presente na linguiacutestica ciecircncia literatura muacutesica

bull Procura estabelecer a relaccedilatildeo entre palavras frases sinais coacutedigos siacutembolos e aquilo que eles representam

Sintaxe Semacircntica

ltimg title=Faacutebio Flatschart - 1971 src=httpsitecombrfoto71jpg

alt=Faacutebio Flatschart - 1971gt

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Web Semacircntica

bull Todo conteuacutedo publicado na Web pode teoricamente ser interligado semanticamente pelos seus significados

bull Quando os dispositivos entenderem totalmente o conteuacutedo inserido e exibido neles poderatildeo oferecer soluccedilotildees que hoje ainda natildeo satildeo possiacuteveis

bull Noacutes estamos ensinando o sistema a pensar

httpwwwsoyuzcombrblogredes-sociais-ensinando-androides-a-pensar

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultadoshellip

Dados

Informaccedilatildeo

Conhecimento

Inteligecircncia

Faacutebio Flatschart | wwwflatschartcom

HTML5 Novas possibilidades semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart | wwwflatschartcom

HTML

1991 HTML

1994 HTML 2

1996 CSS 1 + JavaScript

1997 HTML 4

1998 CSS 2

2000 XHTML 1

2002 Tableless

2005 AJAX

2009 HTML 5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5

O HTML 5 eacute uma especificaccedilatildeo do W3C ainda natildeo concluiacuteda

Pelas caracteriacutesticas modulares do seu desenvolvimento as empresas fabricantes dos navegadores desenvolvedores designers e usuaacuterios natildeo necessitam aguardar a especificaccedilatildeo final da linguagem para colocaacute-la em uso

Esta nova especificaccedilatildeo introduz novos elementos (tags) orientados para auxiliar no desenvolvimento web baseado em padrotildees compatiacuteveis com todos dispositivos na marcaccedilatildeo semacircntica do coacutedigo na manipulaccedilatildeo de elementos do CSS e do JavaScript atraveacutes da definiccedilatildeo de APIs da arquitetura Web

World Wide Web Consortium - Escritoacuterio Brasil httpwwww3cbr

Faacutebio Flatschart | wwwflatschartcom

Estrutura baacutesica

ltDOCTYPE htmlgt

lthtml lang=pt-brgt

ltheadgt

ltmeta charset=utf-8gt

lttitlegtEstrutura baacutesicalttitlegt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

Faacutebio Flatschart | wwwflatschartcom

Elementos estruturais

HTML4 XHTML

ltbodygt

ltdiv id=topogtltdivgt

ltdiv id=navegacaogtltdivgt

ltdiv id=principalgtltdivgt

ltdiv id=lateralgtltdivgt

ltdiv id=rodapegtltdivgt

ltbodygt

HTML5

ltbodygt

ltheadergtltheadergt

ltnavgtltnavgt

ltarticlegtltarticlegt

ltasidegtltasidegt

ltfootergtltfootergt

ltbodygt

Umas das maiores novidades do HTML5 eacute a possibilidade de atribuir agraves diversas seccedilotildees estuturais do documento um elemento proacuteprio nativo da linguagem

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

article Representa um conteuacutedo independente e altamente relevante pode ser um

post um artigo um bloco de texto ou ainda um mini aplicativo embutido no

conteuacutedo (widget)

aside Define um bloco de conteuacutedo que faz referecircncia ao conteuacutedo principal que o

cerca pode estar em uma barra lateral exibindo informaccedilotildees contextuais

assuntos relacionados publicidade ou um grupo de navegaccedilatildeo secundaacuteria

footer Marca a aacuterea inferior normalmente conhecida como rodapeacute do conteuacutedo

geral do documento ou do conteuacutedo de uma seccedilatildeo especiacutefica a qual ele estaacute

subordinado

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

header

Eacute formado por um bloco de conteuacutedo que pode conter um ou mais elementos

h1 ateacute h6 campo de busca elementos de navegaccedilatildeo um logo ou banner uma

introduccedilatildeo um pequeno prefaacutecio um iacutendice em formato de lista

Normalmente trabalha como um agregador do conteuacutedo do cabeccedilalho de um

documento ou de uma seccedilatildeo

nav

Eacute a uma seccedilatildeo do documento que agrupa links para outras partes do site ou

aplicativo Vale ressaltar que o grupo de links do elemento nav estaacute

relacionado com a navegaccedilatildeo primaacuteria ou global que pode estar no

cabeccedilalho no rodapeacute ou em outras seccedilotildees do documento

section

Entre todos os elementos que marcam e definem a estrutura do documento

o elemento section eacute o que possui menor especificidade em sua semacircntica

logo eacute o mais geneacuterico Ele pode abrigar os elementos header article e footer

e sua principal funccedilatildeo eacute dividir o conteuacutedo em macro-estruturas em grande

blocos

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Formulaacuterios Semacircnticos

ltinput type=emailgt

ltinput type=urlgt

ltinput type=numbergt

ltinput type=searchgt

ltinput type=rangegt

ltinput type=dategt

ltinput type=weekgt

httpbitlynrGXhw

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 13: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Ou assim Social

Twitter Facebook

Linkedin Youtube

Links Diretoacuterios Listas

Comentaacuterios

Conteuacutedo Tags Densidade de palavras chaves

exclusividade e variedade de conteuacutedo

Estrutura URL 404 301 Servidor

Faacutebio Flatschart | wwwflatschartcom

Oacutetimo

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Ampliando os conceitos

bull Os fundamentos teacutecnicos satildeo importanteshellip

poreacutemhellip

bull Natildeo existe uma receita uacutenica e universal

bull Natildeo existe uma foacutermula exata e estanque

bull SEO natildeo pode estar desvinculado da inteligecircncia de marketing

bull Como tratar conteuacutedos sociais e ubiacutequos

Faacutebio Flatschart | wwwflatschartcom

SEMAcircNTICA

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Entendendohellip

bull Semacircntica eacute o estudo dos significados

bull Presente na linguiacutestica ciecircncia literatura muacutesica

bull Procura estabelecer a relaccedilatildeo entre palavras frases sinais coacutedigos siacutembolos e aquilo que eles representam

Sintaxe Semacircntica

ltimg title=Faacutebio Flatschart - 1971 src=httpsitecombrfoto71jpg

alt=Faacutebio Flatschart - 1971gt

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Web Semacircntica

bull Todo conteuacutedo publicado na Web pode teoricamente ser interligado semanticamente pelos seus significados

bull Quando os dispositivos entenderem totalmente o conteuacutedo inserido e exibido neles poderatildeo oferecer soluccedilotildees que hoje ainda natildeo satildeo possiacuteveis

bull Noacutes estamos ensinando o sistema a pensar

httpwwwsoyuzcombrblogredes-sociais-ensinando-androides-a-pensar

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultadoshellip

Dados

Informaccedilatildeo

Conhecimento

Inteligecircncia

Faacutebio Flatschart | wwwflatschartcom

HTML5 Novas possibilidades semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart | wwwflatschartcom

HTML

1991 HTML

1994 HTML 2

1996 CSS 1 + JavaScript

1997 HTML 4

1998 CSS 2

2000 XHTML 1

2002 Tableless

2005 AJAX

2009 HTML 5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5

O HTML 5 eacute uma especificaccedilatildeo do W3C ainda natildeo concluiacuteda

Pelas caracteriacutesticas modulares do seu desenvolvimento as empresas fabricantes dos navegadores desenvolvedores designers e usuaacuterios natildeo necessitam aguardar a especificaccedilatildeo final da linguagem para colocaacute-la em uso

Esta nova especificaccedilatildeo introduz novos elementos (tags) orientados para auxiliar no desenvolvimento web baseado em padrotildees compatiacuteveis com todos dispositivos na marcaccedilatildeo semacircntica do coacutedigo na manipulaccedilatildeo de elementos do CSS e do JavaScript atraveacutes da definiccedilatildeo de APIs da arquitetura Web

World Wide Web Consortium - Escritoacuterio Brasil httpwwww3cbr

Faacutebio Flatschart | wwwflatschartcom

Estrutura baacutesica

ltDOCTYPE htmlgt

lthtml lang=pt-brgt

ltheadgt

ltmeta charset=utf-8gt

lttitlegtEstrutura baacutesicalttitlegt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

Faacutebio Flatschart | wwwflatschartcom

Elementos estruturais

HTML4 XHTML

ltbodygt

ltdiv id=topogtltdivgt

ltdiv id=navegacaogtltdivgt

ltdiv id=principalgtltdivgt

ltdiv id=lateralgtltdivgt

ltdiv id=rodapegtltdivgt

ltbodygt

HTML5

ltbodygt

ltheadergtltheadergt

ltnavgtltnavgt

ltarticlegtltarticlegt

ltasidegtltasidegt

ltfootergtltfootergt

ltbodygt

Umas das maiores novidades do HTML5 eacute a possibilidade de atribuir agraves diversas seccedilotildees estuturais do documento um elemento proacuteprio nativo da linguagem

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

article Representa um conteuacutedo independente e altamente relevante pode ser um

post um artigo um bloco de texto ou ainda um mini aplicativo embutido no

conteuacutedo (widget)

aside Define um bloco de conteuacutedo que faz referecircncia ao conteuacutedo principal que o

cerca pode estar em uma barra lateral exibindo informaccedilotildees contextuais

assuntos relacionados publicidade ou um grupo de navegaccedilatildeo secundaacuteria

footer Marca a aacuterea inferior normalmente conhecida como rodapeacute do conteuacutedo

geral do documento ou do conteuacutedo de uma seccedilatildeo especiacutefica a qual ele estaacute

subordinado

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

header

Eacute formado por um bloco de conteuacutedo que pode conter um ou mais elementos

h1 ateacute h6 campo de busca elementos de navegaccedilatildeo um logo ou banner uma

introduccedilatildeo um pequeno prefaacutecio um iacutendice em formato de lista

Normalmente trabalha como um agregador do conteuacutedo do cabeccedilalho de um

documento ou de uma seccedilatildeo

nav

Eacute a uma seccedilatildeo do documento que agrupa links para outras partes do site ou

aplicativo Vale ressaltar que o grupo de links do elemento nav estaacute

relacionado com a navegaccedilatildeo primaacuteria ou global que pode estar no

cabeccedilalho no rodapeacute ou em outras seccedilotildees do documento

section

Entre todos os elementos que marcam e definem a estrutura do documento

o elemento section eacute o que possui menor especificidade em sua semacircntica

logo eacute o mais geneacuterico Ele pode abrigar os elementos header article e footer

e sua principal funccedilatildeo eacute dividir o conteuacutedo em macro-estruturas em grande

blocos

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Formulaacuterios Semacircnticos

ltinput type=emailgt

ltinput type=urlgt

ltinput type=numbergt

ltinput type=searchgt

ltinput type=rangegt

ltinput type=dategt

ltinput type=weekgt

httpbitlynrGXhw

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 14: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom

Oacutetimo

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Ampliando os conceitos

bull Os fundamentos teacutecnicos satildeo importanteshellip

poreacutemhellip

bull Natildeo existe uma receita uacutenica e universal

bull Natildeo existe uma foacutermula exata e estanque

bull SEO natildeo pode estar desvinculado da inteligecircncia de marketing

bull Como tratar conteuacutedos sociais e ubiacutequos

Faacutebio Flatschart | wwwflatschartcom

SEMAcircNTICA

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Entendendohellip

bull Semacircntica eacute o estudo dos significados

bull Presente na linguiacutestica ciecircncia literatura muacutesica

bull Procura estabelecer a relaccedilatildeo entre palavras frases sinais coacutedigos siacutembolos e aquilo que eles representam

Sintaxe Semacircntica

ltimg title=Faacutebio Flatschart - 1971 src=httpsitecombrfoto71jpg

alt=Faacutebio Flatschart - 1971gt

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Web Semacircntica

bull Todo conteuacutedo publicado na Web pode teoricamente ser interligado semanticamente pelos seus significados

bull Quando os dispositivos entenderem totalmente o conteuacutedo inserido e exibido neles poderatildeo oferecer soluccedilotildees que hoje ainda natildeo satildeo possiacuteveis

bull Noacutes estamos ensinando o sistema a pensar

httpwwwsoyuzcombrblogredes-sociais-ensinando-androides-a-pensar

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultadoshellip

Dados

Informaccedilatildeo

Conhecimento

Inteligecircncia

Faacutebio Flatschart | wwwflatschartcom

HTML5 Novas possibilidades semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart | wwwflatschartcom

HTML

1991 HTML

1994 HTML 2

1996 CSS 1 + JavaScript

1997 HTML 4

1998 CSS 2

2000 XHTML 1

2002 Tableless

2005 AJAX

2009 HTML 5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5

O HTML 5 eacute uma especificaccedilatildeo do W3C ainda natildeo concluiacuteda

Pelas caracteriacutesticas modulares do seu desenvolvimento as empresas fabricantes dos navegadores desenvolvedores designers e usuaacuterios natildeo necessitam aguardar a especificaccedilatildeo final da linguagem para colocaacute-la em uso

Esta nova especificaccedilatildeo introduz novos elementos (tags) orientados para auxiliar no desenvolvimento web baseado em padrotildees compatiacuteveis com todos dispositivos na marcaccedilatildeo semacircntica do coacutedigo na manipulaccedilatildeo de elementos do CSS e do JavaScript atraveacutes da definiccedilatildeo de APIs da arquitetura Web

World Wide Web Consortium - Escritoacuterio Brasil httpwwww3cbr

Faacutebio Flatschart | wwwflatschartcom

Estrutura baacutesica

ltDOCTYPE htmlgt

lthtml lang=pt-brgt

ltheadgt

ltmeta charset=utf-8gt

lttitlegtEstrutura baacutesicalttitlegt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

Faacutebio Flatschart | wwwflatschartcom

Elementos estruturais

HTML4 XHTML

ltbodygt

ltdiv id=topogtltdivgt

ltdiv id=navegacaogtltdivgt

ltdiv id=principalgtltdivgt

ltdiv id=lateralgtltdivgt

ltdiv id=rodapegtltdivgt

ltbodygt

HTML5

ltbodygt

ltheadergtltheadergt

ltnavgtltnavgt

ltarticlegtltarticlegt

ltasidegtltasidegt

ltfootergtltfootergt

ltbodygt

Umas das maiores novidades do HTML5 eacute a possibilidade de atribuir agraves diversas seccedilotildees estuturais do documento um elemento proacuteprio nativo da linguagem

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

article Representa um conteuacutedo independente e altamente relevante pode ser um

post um artigo um bloco de texto ou ainda um mini aplicativo embutido no

conteuacutedo (widget)

aside Define um bloco de conteuacutedo que faz referecircncia ao conteuacutedo principal que o

cerca pode estar em uma barra lateral exibindo informaccedilotildees contextuais

assuntos relacionados publicidade ou um grupo de navegaccedilatildeo secundaacuteria

footer Marca a aacuterea inferior normalmente conhecida como rodapeacute do conteuacutedo

geral do documento ou do conteuacutedo de uma seccedilatildeo especiacutefica a qual ele estaacute

subordinado

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

header

Eacute formado por um bloco de conteuacutedo que pode conter um ou mais elementos

h1 ateacute h6 campo de busca elementos de navegaccedilatildeo um logo ou banner uma

introduccedilatildeo um pequeno prefaacutecio um iacutendice em formato de lista

Normalmente trabalha como um agregador do conteuacutedo do cabeccedilalho de um

documento ou de uma seccedilatildeo

nav

Eacute a uma seccedilatildeo do documento que agrupa links para outras partes do site ou

aplicativo Vale ressaltar que o grupo de links do elemento nav estaacute

relacionado com a navegaccedilatildeo primaacuteria ou global que pode estar no

cabeccedilalho no rodapeacute ou em outras seccedilotildees do documento

section

Entre todos os elementos que marcam e definem a estrutura do documento

o elemento section eacute o que possui menor especificidade em sua semacircntica

logo eacute o mais geneacuterico Ele pode abrigar os elementos header article e footer

e sua principal funccedilatildeo eacute dividir o conteuacutedo em macro-estruturas em grande

blocos

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Formulaacuterios Semacircnticos

ltinput type=emailgt

ltinput type=urlgt

ltinput type=numbergt

ltinput type=searchgt

ltinput type=rangegt

ltinput type=dategt

ltinput type=weekgt

httpbitlynrGXhw

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 15: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Ampliando os conceitos

bull Os fundamentos teacutecnicos satildeo importanteshellip

poreacutemhellip

bull Natildeo existe uma receita uacutenica e universal

bull Natildeo existe uma foacutermula exata e estanque

bull SEO natildeo pode estar desvinculado da inteligecircncia de marketing

bull Como tratar conteuacutedos sociais e ubiacutequos

Faacutebio Flatschart | wwwflatschartcom

SEMAcircNTICA

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Entendendohellip

bull Semacircntica eacute o estudo dos significados

bull Presente na linguiacutestica ciecircncia literatura muacutesica

bull Procura estabelecer a relaccedilatildeo entre palavras frases sinais coacutedigos siacutembolos e aquilo que eles representam

Sintaxe Semacircntica

ltimg title=Faacutebio Flatschart - 1971 src=httpsitecombrfoto71jpg

alt=Faacutebio Flatschart - 1971gt

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Web Semacircntica

bull Todo conteuacutedo publicado na Web pode teoricamente ser interligado semanticamente pelos seus significados

bull Quando os dispositivos entenderem totalmente o conteuacutedo inserido e exibido neles poderatildeo oferecer soluccedilotildees que hoje ainda natildeo satildeo possiacuteveis

bull Noacutes estamos ensinando o sistema a pensar

httpwwwsoyuzcombrblogredes-sociais-ensinando-androides-a-pensar

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultadoshellip

Dados

Informaccedilatildeo

Conhecimento

Inteligecircncia

Faacutebio Flatschart | wwwflatschartcom

HTML5 Novas possibilidades semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart | wwwflatschartcom

HTML

1991 HTML

1994 HTML 2

1996 CSS 1 + JavaScript

1997 HTML 4

1998 CSS 2

2000 XHTML 1

2002 Tableless

2005 AJAX

2009 HTML 5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5

O HTML 5 eacute uma especificaccedilatildeo do W3C ainda natildeo concluiacuteda

Pelas caracteriacutesticas modulares do seu desenvolvimento as empresas fabricantes dos navegadores desenvolvedores designers e usuaacuterios natildeo necessitam aguardar a especificaccedilatildeo final da linguagem para colocaacute-la em uso

Esta nova especificaccedilatildeo introduz novos elementos (tags) orientados para auxiliar no desenvolvimento web baseado em padrotildees compatiacuteveis com todos dispositivos na marcaccedilatildeo semacircntica do coacutedigo na manipulaccedilatildeo de elementos do CSS e do JavaScript atraveacutes da definiccedilatildeo de APIs da arquitetura Web

World Wide Web Consortium - Escritoacuterio Brasil httpwwww3cbr

Faacutebio Flatschart | wwwflatschartcom

Estrutura baacutesica

ltDOCTYPE htmlgt

lthtml lang=pt-brgt

ltheadgt

ltmeta charset=utf-8gt

lttitlegtEstrutura baacutesicalttitlegt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

Faacutebio Flatschart | wwwflatschartcom

Elementos estruturais

HTML4 XHTML

ltbodygt

ltdiv id=topogtltdivgt

ltdiv id=navegacaogtltdivgt

ltdiv id=principalgtltdivgt

ltdiv id=lateralgtltdivgt

ltdiv id=rodapegtltdivgt

ltbodygt

HTML5

ltbodygt

ltheadergtltheadergt

ltnavgtltnavgt

ltarticlegtltarticlegt

ltasidegtltasidegt

ltfootergtltfootergt

ltbodygt

Umas das maiores novidades do HTML5 eacute a possibilidade de atribuir agraves diversas seccedilotildees estuturais do documento um elemento proacuteprio nativo da linguagem

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

article Representa um conteuacutedo independente e altamente relevante pode ser um

post um artigo um bloco de texto ou ainda um mini aplicativo embutido no

conteuacutedo (widget)

aside Define um bloco de conteuacutedo que faz referecircncia ao conteuacutedo principal que o

cerca pode estar em uma barra lateral exibindo informaccedilotildees contextuais

assuntos relacionados publicidade ou um grupo de navegaccedilatildeo secundaacuteria

footer Marca a aacuterea inferior normalmente conhecida como rodapeacute do conteuacutedo

geral do documento ou do conteuacutedo de uma seccedilatildeo especiacutefica a qual ele estaacute

subordinado

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

header

Eacute formado por um bloco de conteuacutedo que pode conter um ou mais elementos

h1 ateacute h6 campo de busca elementos de navegaccedilatildeo um logo ou banner uma

introduccedilatildeo um pequeno prefaacutecio um iacutendice em formato de lista

Normalmente trabalha como um agregador do conteuacutedo do cabeccedilalho de um

documento ou de uma seccedilatildeo

nav

Eacute a uma seccedilatildeo do documento que agrupa links para outras partes do site ou

aplicativo Vale ressaltar que o grupo de links do elemento nav estaacute

relacionado com a navegaccedilatildeo primaacuteria ou global que pode estar no

cabeccedilalho no rodapeacute ou em outras seccedilotildees do documento

section

Entre todos os elementos que marcam e definem a estrutura do documento

o elemento section eacute o que possui menor especificidade em sua semacircntica

logo eacute o mais geneacuterico Ele pode abrigar os elementos header article e footer

e sua principal funccedilatildeo eacute dividir o conteuacutedo em macro-estruturas em grande

blocos

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Formulaacuterios Semacircnticos

ltinput type=emailgt

ltinput type=urlgt

ltinput type=numbergt

ltinput type=searchgt

ltinput type=rangegt

ltinput type=dategt

ltinput type=weekgt

httpbitlynrGXhw

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 16: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom

SEMAcircNTICA

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Entendendohellip

bull Semacircntica eacute o estudo dos significados

bull Presente na linguiacutestica ciecircncia literatura muacutesica

bull Procura estabelecer a relaccedilatildeo entre palavras frases sinais coacutedigos siacutembolos e aquilo que eles representam

Sintaxe Semacircntica

ltimg title=Faacutebio Flatschart - 1971 src=httpsitecombrfoto71jpg

alt=Faacutebio Flatschart - 1971gt

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Web Semacircntica

bull Todo conteuacutedo publicado na Web pode teoricamente ser interligado semanticamente pelos seus significados

bull Quando os dispositivos entenderem totalmente o conteuacutedo inserido e exibido neles poderatildeo oferecer soluccedilotildees que hoje ainda natildeo satildeo possiacuteveis

bull Noacutes estamos ensinando o sistema a pensar

httpwwwsoyuzcombrblogredes-sociais-ensinando-androides-a-pensar

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultadoshellip

Dados

Informaccedilatildeo

Conhecimento

Inteligecircncia

Faacutebio Flatschart | wwwflatschartcom

HTML5 Novas possibilidades semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart | wwwflatschartcom

HTML

1991 HTML

1994 HTML 2

1996 CSS 1 + JavaScript

1997 HTML 4

1998 CSS 2

2000 XHTML 1

2002 Tableless

2005 AJAX

2009 HTML 5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5

O HTML 5 eacute uma especificaccedilatildeo do W3C ainda natildeo concluiacuteda

Pelas caracteriacutesticas modulares do seu desenvolvimento as empresas fabricantes dos navegadores desenvolvedores designers e usuaacuterios natildeo necessitam aguardar a especificaccedilatildeo final da linguagem para colocaacute-la em uso

Esta nova especificaccedilatildeo introduz novos elementos (tags) orientados para auxiliar no desenvolvimento web baseado em padrotildees compatiacuteveis com todos dispositivos na marcaccedilatildeo semacircntica do coacutedigo na manipulaccedilatildeo de elementos do CSS e do JavaScript atraveacutes da definiccedilatildeo de APIs da arquitetura Web

World Wide Web Consortium - Escritoacuterio Brasil httpwwww3cbr

Faacutebio Flatschart | wwwflatschartcom

Estrutura baacutesica

ltDOCTYPE htmlgt

lthtml lang=pt-brgt

ltheadgt

ltmeta charset=utf-8gt

lttitlegtEstrutura baacutesicalttitlegt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

Faacutebio Flatschart | wwwflatschartcom

Elementos estruturais

HTML4 XHTML

ltbodygt

ltdiv id=topogtltdivgt

ltdiv id=navegacaogtltdivgt

ltdiv id=principalgtltdivgt

ltdiv id=lateralgtltdivgt

ltdiv id=rodapegtltdivgt

ltbodygt

HTML5

ltbodygt

ltheadergtltheadergt

ltnavgtltnavgt

ltarticlegtltarticlegt

ltasidegtltasidegt

ltfootergtltfootergt

ltbodygt

Umas das maiores novidades do HTML5 eacute a possibilidade de atribuir agraves diversas seccedilotildees estuturais do documento um elemento proacuteprio nativo da linguagem

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

article Representa um conteuacutedo independente e altamente relevante pode ser um

post um artigo um bloco de texto ou ainda um mini aplicativo embutido no

conteuacutedo (widget)

aside Define um bloco de conteuacutedo que faz referecircncia ao conteuacutedo principal que o

cerca pode estar em uma barra lateral exibindo informaccedilotildees contextuais

assuntos relacionados publicidade ou um grupo de navegaccedilatildeo secundaacuteria

footer Marca a aacuterea inferior normalmente conhecida como rodapeacute do conteuacutedo

geral do documento ou do conteuacutedo de uma seccedilatildeo especiacutefica a qual ele estaacute

subordinado

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

header

Eacute formado por um bloco de conteuacutedo que pode conter um ou mais elementos

h1 ateacute h6 campo de busca elementos de navegaccedilatildeo um logo ou banner uma

introduccedilatildeo um pequeno prefaacutecio um iacutendice em formato de lista

Normalmente trabalha como um agregador do conteuacutedo do cabeccedilalho de um

documento ou de uma seccedilatildeo

nav

Eacute a uma seccedilatildeo do documento que agrupa links para outras partes do site ou

aplicativo Vale ressaltar que o grupo de links do elemento nav estaacute

relacionado com a navegaccedilatildeo primaacuteria ou global que pode estar no

cabeccedilalho no rodapeacute ou em outras seccedilotildees do documento

section

Entre todos os elementos que marcam e definem a estrutura do documento

o elemento section eacute o que possui menor especificidade em sua semacircntica

logo eacute o mais geneacuterico Ele pode abrigar os elementos header article e footer

e sua principal funccedilatildeo eacute dividir o conteuacutedo em macro-estruturas em grande

blocos

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Formulaacuterios Semacircnticos

ltinput type=emailgt

ltinput type=urlgt

ltinput type=numbergt

ltinput type=searchgt

ltinput type=rangegt

ltinput type=dategt

ltinput type=weekgt

httpbitlynrGXhw

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 17: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Entendendohellip

bull Semacircntica eacute o estudo dos significados

bull Presente na linguiacutestica ciecircncia literatura muacutesica

bull Procura estabelecer a relaccedilatildeo entre palavras frases sinais coacutedigos siacutembolos e aquilo que eles representam

Sintaxe Semacircntica

ltimg title=Faacutebio Flatschart - 1971 src=httpsitecombrfoto71jpg

alt=Faacutebio Flatschart - 1971gt

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Web Semacircntica

bull Todo conteuacutedo publicado na Web pode teoricamente ser interligado semanticamente pelos seus significados

bull Quando os dispositivos entenderem totalmente o conteuacutedo inserido e exibido neles poderatildeo oferecer soluccedilotildees que hoje ainda natildeo satildeo possiacuteveis

bull Noacutes estamos ensinando o sistema a pensar

httpwwwsoyuzcombrblogredes-sociais-ensinando-androides-a-pensar

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultadoshellip

Dados

Informaccedilatildeo

Conhecimento

Inteligecircncia

Faacutebio Flatschart | wwwflatschartcom

HTML5 Novas possibilidades semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart | wwwflatschartcom

HTML

1991 HTML

1994 HTML 2

1996 CSS 1 + JavaScript

1997 HTML 4

1998 CSS 2

2000 XHTML 1

2002 Tableless

2005 AJAX

2009 HTML 5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5

O HTML 5 eacute uma especificaccedilatildeo do W3C ainda natildeo concluiacuteda

Pelas caracteriacutesticas modulares do seu desenvolvimento as empresas fabricantes dos navegadores desenvolvedores designers e usuaacuterios natildeo necessitam aguardar a especificaccedilatildeo final da linguagem para colocaacute-la em uso

Esta nova especificaccedilatildeo introduz novos elementos (tags) orientados para auxiliar no desenvolvimento web baseado em padrotildees compatiacuteveis com todos dispositivos na marcaccedilatildeo semacircntica do coacutedigo na manipulaccedilatildeo de elementos do CSS e do JavaScript atraveacutes da definiccedilatildeo de APIs da arquitetura Web

World Wide Web Consortium - Escritoacuterio Brasil httpwwww3cbr

Faacutebio Flatschart | wwwflatschartcom

Estrutura baacutesica

ltDOCTYPE htmlgt

lthtml lang=pt-brgt

ltheadgt

ltmeta charset=utf-8gt

lttitlegtEstrutura baacutesicalttitlegt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

Faacutebio Flatschart | wwwflatschartcom

Elementos estruturais

HTML4 XHTML

ltbodygt

ltdiv id=topogtltdivgt

ltdiv id=navegacaogtltdivgt

ltdiv id=principalgtltdivgt

ltdiv id=lateralgtltdivgt

ltdiv id=rodapegtltdivgt

ltbodygt

HTML5

ltbodygt

ltheadergtltheadergt

ltnavgtltnavgt

ltarticlegtltarticlegt

ltasidegtltasidegt

ltfootergtltfootergt

ltbodygt

Umas das maiores novidades do HTML5 eacute a possibilidade de atribuir agraves diversas seccedilotildees estuturais do documento um elemento proacuteprio nativo da linguagem

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

article Representa um conteuacutedo independente e altamente relevante pode ser um

post um artigo um bloco de texto ou ainda um mini aplicativo embutido no

conteuacutedo (widget)

aside Define um bloco de conteuacutedo que faz referecircncia ao conteuacutedo principal que o

cerca pode estar em uma barra lateral exibindo informaccedilotildees contextuais

assuntos relacionados publicidade ou um grupo de navegaccedilatildeo secundaacuteria

footer Marca a aacuterea inferior normalmente conhecida como rodapeacute do conteuacutedo

geral do documento ou do conteuacutedo de uma seccedilatildeo especiacutefica a qual ele estaacute

subordinado

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

header

Eacute formado por um bloco de conteuacutedo que pode conter um ou mais elementos

h1 ateacute h6 campo de busca elementos de navegaccedilatildeo um logo ou banner uma

introduccedilatildeo um pequeno prefaacutecio um iacutendice em formato de lista

Normalmente trabalha como um agregador do conteuacutedo do cabeccedilalho de um

documento ou de uma seccedilatildeo

nav

Eacute a uma seccedilatildeo do documento que agrupa links para outras partes do site ou

aplicativo Vale ressaltar que o grupo de links do elemento nav estaacute

relacionado com a navegaccedilatildeo primaacuteria ou global que pode estar no

cabeccedilalho no rodapeacute ou em outras seccedilotildees do documento

section

Entre todos os elementos que marcam e definem a estrutura do documento

o elemento section eacute o que possui menor especificidade em sua semacircntica

logo eacute o mais geneacuterico Ele pode abrigar os elementos header article e footer

e sua principal funccedilatildeo eacute dividir o conteuacutedo em macro-estruturas em grande

blocos

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Formulaacuterios Semacircnticos

ltinput type=emailgt

ltinput type=urlgt

ltinput type=numbergt

ltinput type=searchgt

ltinput type=rangegt

ltinput type=dategt

ltinput type=weekgt

httpbitlynrGXhw

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 18: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Web Semacircntica

bull Todo conteuacutedo publicado na Web pode teoricamente ser interligado semanticamente pelos seus significados

bull Quando os dispositivos entenderem totalmente o conteuacutedo inserido e exibido neles poderatildeo oferecer soluccedilotildees que hoje ainda natildeo satildeo possiacuteveis

bull Noacutes estamos ensinando o sistema a pensar

httpwwwsoyuzcombrblogredes-sociais-ensinando-androides-a-pensar

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultadoshellip

Dados

Informaccedilatildeo

Conhecimento

Inteligecircncia

Faacutebio Flatschart | wwwflatschartcom

HTML5 Novas possibilidades semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart | wwwflatschartcom

HTML

1991 HTML

1994 HTML 2

1996 CSS 1 + JavaScript

1997 HTML 4

1998 CSS 2

2000 XHTML 1

2002 Tableless

2005 AJAX

2009 HTML 5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5

O HTML 5 eacute uma especificaccedilatildeo do W3C ainda natildeo concluiacuteda

Pelas caracteriacutesticas modulares do seu desenvolvimento as empresas fabricantes dos navegadores desenvolvedores designers e usuaacuterios natildeo necessitam aguardar a especificaccedilatildeo final da linguagem para colocaacute-la em uso

Esta nova especificaccedilatildeo introduz novos elementos (tags) orientados para auxiliar no desenvolvimento web baseado em padrotildees compatiacuteveis com todos dispositivos na marcaccedilatildeo semacircntica do coacutedigo na manipulaccedilatildeo de elementos do CSS e do JavaScript atraveacutes da definiccedilatildeo de APIs da arquitetura Web

World Wide Web Consortium - Escritoacuterio Brasil httpwwww3cbr

Faacutebio Flatschart | wwwflatschartcom

Estrutura baacutesica

ltDOCTYPE htmlgt

lthtml lang=pt-brgt

ltheadgt

ltmeta charset=utf-8gt

lttitlegtEstrutura baacutesicalttitlegt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

Faacutebio Flatschart | wwwflatschartcom

Elementos estruturais

HTML4 XHTML

ltbodygt

ltdiv id=topogtltdivgt

ltdiv id=navegacaogtltdivgt

ltdiv id=principalgtltdivgt

ltdiv id=lateralgtltdivgt

ltdiv id=rodapegtltdivgt

ltbodygt

HTML5

ltbodygt

ltheadergtltheadergt

ltnavgtltnavgt

ltarticlegtltarticlegt

ltasidegtltasidegt

ltfootergtltfootergt

ltbodygt

Umas das maiores novidades do HTML5 eacute a possibilidade de atribuir agraves diversas seccedilotildees estuturais do documento um elemento proacuteprio nativo da linguagem

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

article Representa um conteuacutedo independente e altamente relevante pode ser um

post um artigo um bloco de texto ou ainda um mini aplicativo embutido no

conteuacutedo (widget)

aside Define um bloco de conteuacutedo que faz referecircncia ao conteuacutedo principal que o

cerca pode estar em uma barra lateral exibindo informaccedilotildees contextuais

assuntos relacionados publicidade ou um grupo de navegaccedilatildeo secundaacuteria

footer Marca a aacuterea inferior normalmente conhecida como rodapeacute do conteuacutedo

geral do documento ou do conteuacutedo de uma seccedilatildeo especiacutefica a qual ele estaacute

subordinado

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

header

Eacute formado por um bloco de conteuacutedo que pode conter um ou mais elementos

h1 ateacute h6 campo de busca elementos de navegaccedilatildeo um logo ou banner uma

introduccedilatildeo um pequeno prefaacutecio um iacutendice em formato de lista

Normalmente trabalha como um agregador do conteuacutedo do cabeccedilalho de um

documento ou de uma seccedilatildeo

nav

Eacute a uma seccedilatildeo do documento que agrupa links para outras partes do site ou

aplicativo Vale ressaltar que o grupo de links do elemento nav estaacute

relacionado com a navegaccedilatildeo primaacuteria ou global que pode estar no

cabeccedilalho no rodapeacute ou em outras seccedilotildees do documento

section

Entre todos os elementos que marcam e definem a estrutura do documento

o elemento section eacute o que possui menor especificidade em sua semacircntica

logo eacute o mais geneacuterico Ele pode abrigar os elementos header article e footer

e sua principal funccedilatildeo eacute dividir o conteuacutedo em macro-estruturas em grande

blocos

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Formulaacuterios Semacircnticos

ltinput type=emailgt

ltinput type=urlgt

ltinput type=numbergt

ltinput type=searchgt

ltinput type=rangegt

ltinput type=dategt

ltinput type=weekgt

httpbitlynrGXhw

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 19: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Resultadoshellip

Dados

Informaccedilatildeo

Conhecimento

Inteligecircncia

Faacutebio Flatschart | wwwflatschartcom

HTML5 Novas possibilidades semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart | wwwflatschartcom

HTML

1991 HTML

1994 HTML 2

1996 CSS 1 + JavaScript

1997 HTML 4

1998 CSS 2

2000 XHTML 1

2002 Tableless

2005 AJAX

2009 HTML 5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5

O HTML 5 eacute uma especificaccedilatildeo do W3C ainda natildeo concluiacuteda

Pelas caracteriacutesticas modulares do seu desenvolvimento as empresas fabricantes dos navegadores desenvolvedores designers e usuaacuterios natildeo necessitam aguardar a especificaccedilatildeo final da linguagem para colocaacute-la em uso

Esta nova especificaccedilatildeo introduz novos elementos (tags) orientados para auxiliar no desenvolvimento web baseado em padrotildees compatiacuteveis com todos dispositivos na marcaccedilatildeo semacircntica do coacutedigo na manipulaccedilatildeo de elementos do CSS e do JavaScript atraveacutes da definiccedilatildeo de APIs da arquitetura Web

World Wide Web Consortium - Escritoacuterio Brasil httpwwww3cbr

Faacutebio Flatschart | wwwflatschartcom

Estrutura baacutesica

ltDOCTYPE htmlgt

lthtml lang=pt-brgt

ltheadgt

ltmeta charset=utf-8gt

lttitlegtEstrutura baacutesicalttitlegt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

Faacutebio Flatschart | wwwflatschartcom

Elementos estruturais

HTML4 XHTML

ltbodygt

ltdiv id=topogtltdivgt

ltdiv id=navegacaogtltdivgt

ltdiv id=principalgtltdivgt

ltdiv id=lateralgtltdivgt

ltdiv id=rodapegtltdivgt

ltbodygt

HTML5

ltbodygt

ltheadergtltheadergt

ltnavgtltnavgt

ltarticlegtltarticlegt

ltasidegtltasidegt

ltfootergtltfootergt

ltbodygt

Umas das maiores novidades do HTML5 eacute a possibilidade de atribuir agraves diversas seccedilotildees estuturais do documento um elemento proacuteprio nativo da linguagem

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

article Representa um conteuacutedo independente e altamente relevante pode ser um

post um artigo um bloco de texto ou ainda um mini aplicativo embutido no

conteuacutedo (widget)

aside Define um bloco de conteuacutedo que faz referecircncia ao conteuacutedo principal que o

cerca pode estar em uma barra lateral exibindo informaccedilotildees contextuais

assuntos relacionados publicidade ou um grupo de navegaccedilatildeo secundaacuteria

footer Marca a aacuterea inferior normalmente conhecida como rodapeacute do conteuacutedo

geral do documento ou do conteuacutedo de uma seccedilatildeo especiacutefica a qual ele estaacute

subordinado

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

header

Eacute formado por um bloco de conteuacutedo que pode conter um ou mais elementos

h1 ateacute h6 campo de busca elementos de navegaccedilatildeo um logo ou banner uma

introduccedilatildeo um pequeno prefaacutecio um iacutendice em formato de lista

Normalmente trabalha como um agregador do conteuacutedo do cabeccedilalho de um

documento ou de uma seccedilatildeo

nav

Eacute a uma seccedilatildeo do documento que agrupa links para outras partes do site ou

aplicativo Vale ressaltar que o grupo de links do elemento nav estaacute

relacionado com a navegaccedilatildeo primaacuteria ou global que pode estar no

cabeccedilalho no rodapeacute ou em outras seccedilotildees do documento

section

Entre todos os elementos que marcam e definem a estrutura do documento

o elemento section eacute o que possui menor especificidade em sua semacircntica

logo eacute o mais geneacuterico Ele pode abrigar os elementos header article e footer

e sua principal funccedilatildeo eacute dividir o conteuacutedo em macro-estruturas em grande

blocos

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Formulaacuterios Semacircnticos

ltinput type=emailgt

ltinput type=urlgt

ltinput type=numbergt

ltinput type=searchgt

ltinput type=rangegt

ltinput type=dategt

ltinput type=weekgt

httpbitlynrGXhw

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 20: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom

HTML5 Novas possibilidades semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart | wwwflatschartcom

HTML

1991 HTML

1994 HTML 2

1996 CSS 1 + JavaScript

1997 HTML 4

1998 CSS 2

2000 XHTML 1

2002 Tableless

2005 AJAX

2009 HTML 5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5

O HTML 5 eacute uma especificaccedilatildeo do W3C ainda natildeo concluiacuteda

Pelas caracteriacutesticas modulares do seu desenvolvimento as empresas fabricantes dos navegadores desenvolvedores designers e usuaacuterios natildeo necessitam aguardar a especificaccedilatildeo final da linguagem para colocaacute-la em uso

Esta nova especificaccedilatildeo introduz novos elementos (tags) orientados para auxiliar no desenvolvimento web baseado em padrotildees compatiacuteveis com todos dispositivos na marcaccedilatildeo semacircntica do coacutedigo na manipulaccedilatildeo de elementos do CSS e do JavaScript atraveacutes da definiccedilatildeo de APIs da arquitetura Web

World Wide Web Consortium - Escritoacuterio Brasil httpwwww3cbr

Faacutebio Flatschart | wwwflatschartcom

Estrutura baacutesica

ltDOCTYPE htmlgt

lthtml lang=pt-brgt

ltheadgt

ltmeta charset=utf-8gt

lttitlegtEstrutura baacutesicalttitlegt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

Faacutebio Flatschart | wwwflatschartcom

Elementos estruturais

HTML4 XHTML

ltbodygt

ltdiv id=topogtltdivgt

ltdiv id=navegacaogtltdivgt

ltdiv id=principalgtltdivgt

ltdiv id=lateralgtltdivgt

ltdiv id=rodapegtltdivgt

ltbodygt

HTML5

ltbodygt

ltheadergtltheadergt

ltnavgtltnavgt

ltarticlegtltarticlegt

ltasidegtltasidegt

ltfootergtltfootergt

ltbodygt

Umas das maiores novidades do HTML5 eacute a possibilidade de atribuir agraves diversas seccedilotildees estuturais do documento um elemento proacuteprio nativo da linguagem

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

article Representa um conteuacutedo independente e altamente relevante pode ser um

post um artigo um bloco de texto ou ainda um mini aplicativo embutido no

conteuacutedo (widget)

aside Define um bloco de conteuacutedo que faz referecircncia ao conteuacutedo principal que o

cerca pode estar em uma barra lateral exibindo informaccedilotildees contextuais

assuntos relacionados publicidade ou um grupo de navegaccedilatildeo secundaacuteria

footer Marca a aacuterea inferior normalmente conhecida como rodapeacute do conteuacutedo

geral do documento ou do conteuacutedo de uma seccedilatildeo especiacutefica a qual ele estaacute

subordinado

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

header

Eacute formado por um bloco de conteuacutedo que pode conter um ou mais elementos

h1 ateacute h6 campo de busca elementos de navegaccedilatildeo um logo ou banner uma

introduccedilatildeo um pequeno prefaacutecio um iacutendice em formato de lista

Normalmente trabalha como um agregador do conteuacutedo do cabeccedilalho de um

documento ou de uma seccedilatildeo

nav

Eacute a uma seccedilatildeo do documento que agrupa links para outras partes do site ou

aplicativo Vale ressaltar que o grupo de links do elemento nav estaacute

relacionado com a navegaccedilatildeo primaacuteria ou global que pode estar no

cabeccedilalho no rodapeacute ou em outras seccedilotildees do documento

section

Entre todos os elementos que marcam e definem a estrutura do documento

o elemento section eacute o que possui menor especificidade em sua semacircntica

logo eacute o mais geneacuterico Ele pode abrigar os elementos header article e footer

e sua principal funccedilatildeo eacute dividir o conteuacutedo em macro-estruturas em grande

blocos

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Formulaacuterios Semacircnticos

ltinput type=emailgt

ltinput type=urlgt

ltinput type=numbergt

ltinput type=searchgt

ltinput type=rangegt

ltinput type=dategt

ltinput type=weekgt

httpbitlynrGXhw

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 21: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart | wwwflatschartcom

HTML

1991 HTML

1994 HTML 2

1996 CSS 1 + JavaScript

1997 HTML 4

1998 CSS 2

2000 XHTML 1

2002 Tableless

2005 AJAX

2009 HTML 5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5

O HTML 5 eacute uma especificaccedilatildeo do W3C ainda natildeo concluiacuteda

Pelas caracteriacutesticas modulares do seu desenvolvimento as empresas fabricantes dos navegadores desenvolvedores designers e usuaacuterios natildeo necessitam aguardar a especificaccedilatildeo final da linguagem para colocaacute-la em uso

Esta nova especificaccedilatildeo introduz novos elementos (tags) orientados para auxiliar no desenvolvimento web baseado em padrotildees compatiacuteveis com todos dispositivos na marcaccedilatildeo semacircntica do coacutedigo na manipulaccedilatildeo de elementos do CSS e do JavaScript atraveacutes da definiccedilatildeo de APIs da arquitetura Web

World Wide Web Consortium - Escritoacuterio Brasil httpwwww3cbr

Faacutebio Flatschart | wwwflatschartcom

Estrutura baacutesica

ltDOCTYPE htmlgt

lthtml lang=pt-brgt

ltheadgt

ltmeta charset=utf-8gt

lttitlegtEstrutura baacutesicalttitlegt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

Faacutebio Flatschart | wwwflatschartcom

Elementos estruturais

HTML4 XHTML

ltbodygt

ltdiv id=topogtltdivgt

ltdiv id=navegacaogtltdivgt

ltdiv id=principalgtltdivgt

ltdiv id=lateralgtltdivgt

ltdiv id=rodapegtltdivgt

ltbodygt

HTML5

ltbodygt

ltheadergtltheadergt

ltnavgtltnavgt

ltarticlegtltarticlegt

ltasidegtltasidegt

ltfootergtltfootergt

ltbodygt

Umas das maiores novidades do HTML5 eacute a possibilidade de atribuir agraves diversas seccedilotildees estuturais do documento um elemento proacuteprio nativo da linguagem

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

article Representa um conteuacutedo independente e altamente relevante pode ser um

post um artigo um bloco de texto ou ainda um mini aplicativo embutido no

conteuacutedo (widget)

aside Define um bloco de conteuacutedo que faz referecircncia ao conteuacutedo principal que o

cerca pode estar em uma barra lateral exibindo informaccedilotildees contextuais

assuntos relacionados publicidade ou um grupo de navegaccedilatildeo secundaacuteria

footer Marca a aacuterea inferior normalmente conhecida como rodapeacute do conteuacutedo

geral do documento ou do conteuacutedo de uma seccedilatildeo especiacutefica a qual ele estaacute

subordinado

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

header

Eacute formado por um bloco de conteuacutedo que pode conter um ou mais elementos

h1 ateacute h6 campo de busca elementos de navegaccedilatildeo um logo ou banner uma

introduccedilatildeo um pequeno prefaacutecio um iacutendice em formato de lista

Normalmente trabalha como um agregador do conteuacutedo do cabeccedilalho de um

documento ou de uma seccedilatildeo

nav

Eacute a uma seccedilatildeo do documento que agrupa links para outras partes do site ou

aplicativo Vale ressaltar que o grupo de links do elemento nav estaacute

relacionado com a navegaccedilatildeo primaacuteria ou global que pode estar no

cabeccedilalho no rodapeacute ou em outras seccedilotildees do documento

section

Entre todos os elementos que marcam e definem a estrutura do documento

o elemento section eacute o que possui menor especificidade em sua semacircntica

logo eacute o mais geneacuterico Ele pode abrigar os elementos header article e footer

e sua principal funccedilatildeo eacute dividir o conteuacutedo em macro-estruturas em grande

blocos

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Formulaacuterios Semacircnticos

ltinput type=emailgt

ltinput type=urlgt

ltinput type=numbergt

ltinput type=searchgt

ltinput type=rangegt

ltinput type=dategt

ltinput type=weekgt

httpbitlynrGXhw

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 22: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom

HTML

1991 HTML

1994 HTML 2

1996 CSS 1 + JavaScript

1997 HTML 4

1998 CSS 2

2000 XHTML 1

2002 Tableless

2005 AJAX

2009 HTML 5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5

O HTML 5 eacute uma especificaccedilatildeo do W3C ainda natildeo concluiacuteda

Pelas caracteriacutesticas modulares do seu desenvolvimento as empresas fabricantes dos navegadores desenvolvedores designers e usuaacuterios natildeo necessitam aguardar a especificaccedilatildeo final da linguagem para colocaacute-la em uso

Esta nova especificaccedilatildeo introduz novos elementos (tags) orientados para auxiliar no desenvolvimento web baseado em padrotildees compatiacuteveis com todos dispositivos na marcaccedilatildeo semacircntica do coacutedigo na manipulaccedilatildeo de elementos do CSS e do JavaScript atraveacutes da definiccedilatildeo de APIs da arquitetura Web

World Wide Web Consortium - Escritoacuterio Brasil httpwwww3cbr

Faacutebio Flatschart | wwwflatschartcom

Estrutura baacutesica

ltDOCTYPE htmlgt

lthtml lang=pt-brgt

ltheadgt

ltmeta charset=utf-8gt

lttitlegtEstrutura baacutesicalttitlegt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

Faacutebio Flatschart | wwwflatschartcom

Elementos estruturais

HTML4 XHTML

ltbodygt

ltdiv id=topogtltdivgt

ltdiv id=navegacaogtltdivgt

ltdiv id=principalgtltdivgt

ltdiv id=lateralgtltdivgt

ltdiv id=rodapegtltdivgt

ltbodygt

HTML5

ltbodygt

ltheadergtltheadergt

ltnavgtltnavgt

ltarticlegtltarticlegt

ltasidegtltasidegt

ltfootergtltfootergt

ltbodygt

Umas das maiores novidades do HTML5 eacute a possibilidade de atribuir agraves diversas seccedilotildees estuturais do documento um elemento proacuteprio nativo da linguagem

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

article Representa um conteuacutedo independente e altamente relevante pode ser um

post um artigo um bloco de texto ou ainda um mini aplicativo embutido no

conteuacutedo (widget)

aside Define um bloco de conteuacutedo que faz referecircncia ao conteuacutedo principal que o

cerca pode estar em uma barra lateral exibindo informaccedilotildees contextuais

assuntos relacionados publicidade ou um grupo de navegaccedilatildeo secundaacuteria

footer Marca a aacuterea inferior normalmente conhecida como rodapeacute do conteuacutedo

geral do documento ou do conteuacutedo de uma seccedilatildeo especiacutefica a qual ele estaacute

subordinado

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

header

Eacute formado por um bloco de conteuacutedo que pode conter um ou mais elementos

h1 ateacute h6 campo de busca elementos de navegaccedilatildeo um logo ou banner uma

introduccedilatildeo um pequeno prefaacutecio um iacutendice em formato de lista

Normalmente trabalha como um agregador do conteuacutedo do cabeccedilalho de um

documento ou de uma seccedilatildeo

nav

Eacute a uma seccedilatildeo do documento que agrupa links para outras partes do site ou

aplicativo Vale ressaltar que o grupo de links do elemento nav estaacute

relacionado com a navegaccedilatildeo primaacuteria ou global que pode estar no

cabeccedilalho no rodapeacute ou em outras seccedilotildees do documento

section

Entre todos os elementos que marcam e definem a estrutura do documento

o elemento section eacute o que possui menor especificidade em sua semacircntica

logo eacute o mais geneacuterico Ele pode abrigar os elementos header article e footer

e sua principal funccedilatildeo eacute dividir o conteuacutedo em macro-estruturas em grande

blocos

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Formulaacuterios Semacircnticos

ltinput type=emailgt

ltinput type=urlgt

ltinput type=numbergt

ltinput type=searchgt

ltinput type=rangegt

ltinput type=dategt

ltinput type=weekgt

httpbitlynrGXhw

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 23: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5

O HTML 5 eacute uma especificaccedilatildeo do W3C ainda natildeo concluiacuteda

Pelas caracteriacutesticas modulares do seu desenvolvimento as empresas fabricantes dos navegadores desenvolvedores designers e usuaacuterios natildeo necessitam aguardar a especificaccedilatildeo final da linguagem para colocaacute-la em uso

Esta nova especificaccedilatildeo introduz novos elementos (tags) orientados para auxiliar no desenvolvimento web baseado em padrotildees compatiacuteveis com todos dispositivos na marcaccedilatildeo semacircntica do coacutedigo na manipulaccedilatildeo de elementos do CSS e do JavaScript atraveacutes da definiccedilatildeo de APIs da arquitetura Web

World Wide Web Consortium - Escritoacuterio Brasil httpwwww3cbr

Faacutebio Flatschart | wwwflatschartcom

Estrutura baacutesica

ltDOCTYPE htmlgt

lthtml lang=pt-brgt

ltheadgt

ltmeta charset=utf-8gt

lttitlegtEstrutura baacutesicalttitlegt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

Faacutebio Flatschart | wwwflatschartcom

Elementos estruturais

HTML4 XHTML

ltbodygt

ltdiv id=topogtltdivgt

ltdiv id=navegacaogtltdivgt

ltdiv id=principalgtltdivgt

ltdiv id=lateralgtltdivgt

ltdiv id=rodapegtltdivgt

ltbodygt

HTML5

ltbodygt

ltheadergtltheadergt

ltnavgtltnavgt

ltarticlegtltarticlegt

ltasidegtltasidegt

ltfootergtltfootergt

ltbodygt

Umas das maiores novidades do HTML5 eacute a possibilidade de atribuir agraves diversas seccedilotildees estuturais do documento um elemento proacuteprio nativo da linguagem

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

article Representa um conteuacutedo independente e altamente relevante pode ser um

post um artigo um bloco de texto ou ainda um mini aplicativo embutido no

conteuacutedo (widget)

aside Define um bloco de conteuacutedo que faz referecircncia ao conteuacutedo principal que o

cerca pode estar em uma barra lateral exibindo informaccedilotildees contextuais

assuntos relacionados publicidade ou um grupo de navegaccedilatildeo secundaacuteria

footer Marca a aacuterea inferior normalmente conhecida como rodapeacute do conteuacutedo

geral do documento ou do conteuacutedo de uma seccedilatildeo especiacutefica a qual ele estaacute

subordinado

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

header

Eacute formado por um bloco de conteuacutedo que pode conter um ou mais elementos

h1 ateacute h6 campo de busca elementos de navegaccedilatildeo um logo ou banner uma

introduccedilatildeo um pequeno prefaacutecio um iacutendice em formato de lista

Normalmente trabalha como um agregador do conteuacutedo do cabeccedilalho de um

documento ou de uma seccedilatildeo

nav

Eacute a uma seccedilatildeo do documento que agrupa links para outras partes do site ou

aplicativo Vale ressaltar que o grupo de links do elemento nav estaacute

relacionado com a navegaccedilatildeo primaacuteria ou global que pode estar no

cabeccedilalho no rodapeacute ou em outras seccedilotildees do documento

section

Entre todos os elementos que marcam e definem a estrutura do documento

o elemento section eacute o que possui menor especificidade em sua semacircntica

logo eacute o mais geneacuterico Ele pode abrigar os elementos header article e footer

e sua principal funccedilatildeo eacute dividir o conteuacutedo em macro-estruturas em grande

blocos

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Formulaacuterios Semacircnticos

ltinput type=emailgt

ltinput type=urlgt

ltinput type=numbergt

ltinput type=searchgt

ltinput type=rangegt

ltinput type=dategt

ltinput type=weekgt

httpbitlynrGXhw

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 24: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom

Estrutura baacutesica

ltDOCTYPE htmlgt

lthtml lang=pt-brgt

ltheadgt

ltmeta charset=utf-8gt

lttitlegtEstrutura baacutesicalttitlegt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

Faacutebio Flatschart | wwwflatschartcom

Elementos estruturais

HTML4 XHTML

ltbodygt

ltdiv id=topogtltdivgt

ltdiv id=navegacaogtltdivgt

ltdiv id=principalgtltdivgt

ltdiv id=lateralgtltdivgt

ltdiv id=rodapegtltdivgt

ltbodygt

HTML5

ltbodygt

ltheadergtltheadergt

ltnavgtltnavgt

ltarticlegtltarticlegt

ltasidegtltasidegt

ltfootergtltfootergt

ltbodygt

Umas das maiores novidades do HTML5 eacute a possibilidade de atribuir agraves diversas seccedilotildees estuturais do documento um elemento proacuteprio nativo da linguagem

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

article Representa um conteuacutedo independente e altamente relevante pode ser um

post um artigo um bloco de texto ou ainda um mini aplicativo embutido no

conteuacutedo (widget)

aside Define um bloco de conteuacutedo que faz referecircncia ao conteuacutedo principal que o

cerca pode estar em uma barra lateral exibindo informaccedilotildees contextuais

assuntos relacionados publicidade ou um grupo de navegaccedilatildeo secundaacuteria

footer Marca a aacuterea inferior normalmente conhecida como rodapeacute do conteuacutedo

geral do documento ou do conteuacutedo de uma seccedilatildeo especiacutefica a qual ele estaacute

subordinado

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

header

Eacute formado por um bloco de conteuacutedo que pode conter um ou mais elementos

h1 ateacute h6 campo de busca elementos de navegaccedilatildeo um logo ou banner uma

introduccedilatildeo um pequeno prefaacutecio um iacutendice em formato de lista

Normalmente trabalha como um agregador do conteuacutedo do cabeccedilalho de um

documento ou de uma seccedilatildeo

nav

Eacute a uma seccedilatildeo do documento que agrupa links para outras partes do site ou

aplicativo Vale ressaltar que o grupo de links do elemento nav estaacute

relacionado com a navegaccedilatildeo primaacuteria ou global que pode estar no

cabeccedilalho no rodapeacute ou em outras seccedilotildees do documento

section

Entre todos os elementos que marcam e definem a estrutura do documento

o elemento section eacute o que possui menor especificidade em sua semacircntica

logo eacute o mais geneacuterico Ele pode abrigar os elementos header article e footer

e sua principal funccedilatildeo eacute dividir o conteuacutedo em macro-estruturas em grande

blocos

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Formulaacuterios Semacircnticos

ltinput type=emailgt

ltinput type=urlgt

ltinput type=numbergt

ltinput type=searchgt

ltinput type=rangegt

ltinput type=dategt

ltinput type=weekgt

httpbitlynrGXhw

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 25: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom

Elementos estruturais

HTML4 XHTML

ltbodygt

ltdiv id=topogtltdivgt

ltdiv id=navegacaogtltdivgt

ltdiv id=principalgtltdivgt

ltdiv id=lateralgtltdivgt

ltdiv id=rodapegtltdivgt

ltbodygt

HTML5

ltbodygt

ltheadergtltheadergt

ltnavgtltnavgt

ltarticlegtltarticlegt

ltasidegtltasidegt

ltfootergtltfootergt

ltbodygt

Umas das maiores novidades do HTML5 eacute a possibilidade de atribuir agraves diversas seccedilotildees estuturais do documento um elemento proacuteprio nativo da linguagem

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

article Representa um conteuacutedo independente e altamente relevante pode ser um

post um artigo um bloco de texto ou ainda um mini aplicativo embutido no

conteuacutedo (widget)

aside Define um bloco de conteuacutedo que faz referecircncia ao conteuacutedo principal que o

cerca pode estar em uma barra lateral exibindo informaccedilotildees contextuais

assuntos relacionados publicidade ou um grupo de navegaccedilatildeo secundaacuteria

footer Marca a aacuterea inferior normalmente conhecida como rodapeacute do conteuacutedo

geral do documento ou do conteuacutedo de uma seccedilatildeo especiacutefica a qual ele estaacute

subordinado

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

header

Eacute formado por um bloco de conteuacutedo que pode conter um ou mais elementos

h1 ateacute h6 campo de busca elementos de navegaccedilatildeo um logo ou banner uma

introduccedilatildeo um pequeno prefaacutecio um iacutendice em formato de lista

Normalmente trabalha como um agregador do conteuacutedo do cabeccedilalho de um

documento ou de uma seccedilatildeo

nav

Eacute a uma seccedilatildeo do documento que agrupa links para outras partes do site ou

aplicativo Vale ressaltar que o grupo de links do elemento nav estaacute

relacionado com a navegaccedilatildeo primaacuteria ou global que pode estar no

cabeccedilalho no rodapeacute ou em outras seccedilotildees do documento

section

Entre todos os elementos que marcam e definem a estrutura do documento

o elemento section eacute o que possui menor especificidade em sua semacircntica

logo eacute o mais geneacuterico Ele pode abrigar os elementos header article e footer

e sua principal funccedilatildeo eacute dividir o conteuacutedo em macro-estruturas em grande

blocos

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Formulaacuterios Semacircnticos

ltinput type=emailgt

ltinput type=urlgt

ltinput type=numbergt

ltinput type=searchgt

ltinput type=rangegt

ltinput type=dategt

ltinput type=weekgt

httpbitlynrGXhw

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 26: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

article Representa um conteuacutedo independente e altamente relevante pode ser um

post um artigo um bloco de texto ou ainda um mini aplicativo embutido no

conteuacutedo (widget)

aside Define um bloco de conteuacutedo que faz referecircncia ao conteuacutedo principal que o

cerca pode estar em uma barra lateral exibindo informaccedilotildees contextuais

assuntos relacionados publicidade ou um grupo de navegaccedilatildeo secundaacuteria

footer Marca a aacuterea inferior normalmente conhecida como rodapeacute do conteuacutedo

geral do documento ou do conteuacutedo de uma seccedilatildeo especiacutefica a qual ele estaacute

subordinado

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

header

Eacute formado por um bloco de conteuacutedo que pode conter um ou mais elementos

h1 ateacute h6 campo de busca elementos de navegaccedilatildeo um logo ou banner uma

introduccedilatildeo um pequeno prefaacutecio um iacutendice em formato de lista

Normalmente trabalha como um agregador do conteuacutedo do cabeccedilalho de um

documento ou de uma seccedilatildeo

nav

Eacute a uma seccedilatildeo do documento que agrupa links para outras partes do site ou

aplicativo Vale ressaltar que o grupo de links do elemento nav estaacute

relacionado com a navegaccedilatildeo primaacuteria ou global que pode estar no

cabeccedilalho no rodapeacute ou em outras seccedilotildees do documento

section

Entre todos os elementos que marcam e definem a estrutura do documento

o elemento section eacute o que possui menor especificidade em sua semacircntica

logo eacute o mais geneacuterico Ele pode abrigar os elementos header article e footer

e sua principal funccedilatildeo eacute dividir o conteuacutedo em macro-estruturas em grande

blocos

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Formulaacuterios Semacircnticos

ltinput type=emailgt

ltinput type=urlgt

ltinput type=numbergt

ltinput type=searchgt

ltinput type=rangegt

ltinput type=dategt

ltinput type=weekgt

httpbitlynrGXhw

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 27: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

A semacircntica dos novos elementos estruturais

header

Eacute formado por um bloco de conteuacutedo que pode conter um ou mais elementos

h1 ateacute h6 campo de busca elementos de navegaccedilatildeo um logo ou banner uma

introduccedilatildeo um pequeno prefaacutecio um iacutendice em formato de lista

Normalmente trabalha como um agregador do conteuacutedo do cabeccedilalho de um

documento ou de uma seccedilatildeo

nav

Eacute a uma seccedilatildeo do documento que agrupa links para outras partes do site ou

aplicativo Vale ressaltar que o grupo de links do elemento nav estaacute

relacionado com a navegaccedilatildeo primaacuteria ou global que pode estar no

cabeccedilalho no rodapeacute ou em outras seccedilotildees do documento

section

Entre todos os elementos que marcam e definem a estrutura do documento

o elemento section eacute o que possui menor especificidade em sua semacircntica

logo eacute o mais geneacuterico Ele pode abrigar os elementos header article e footer

e sua principal funccedilatildeo eacute dividir o conteuacutedo em macro-estruturas em grande

blocos

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Formulaacuterios Semacircnticos

ltinput type=emailgt

ltinput type=urlgt

ltinput type=numbergt

ltinput type=searchgt

ltinput type=rangegt

ltinput type=dategt

ltinput type=weekgt

httpbitlynrGXhw

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 28: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Formulaacuterios Semacircnticos

ltinput type=emailgt

ltinput type=urlgt

ltinput type=numbergt

ltinput type=searchgt

ltinput type=rangegt

ltinput type=dategt

ltinput type=weekgt

httpbitlynrGXhw

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 29: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom

Estruturas Semacircnticas

Faacutebio Flatschart | wwwflatschartcom

Formulaacuterios Semacircnticos

ltinput type=emailgt

ltinput type=urlgt

ltinput type=numbergt

ltinput type=searchgt

ltinput type=rangegt

ltinput type=dategt

ltinput type=weekgt

httpbitlynrGXhw

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 30: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom

Formulaacuterios Semacircnticos

ltinput type=emailgt

ltinput type=urlgt

ltinput type=numbergt

ltinput type=searchgt

ltinput type=rangegt

ltinput type=dategt

ltinput type=weekgt

httpbitlynrGXhw

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 31: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

SVG

ltsvg gt

ltrect width=90 height=60 x=10 y=100

fill=00FFCC stroke=FF0000 stroke-width=3 gt

ltsvggt

No HTML5 o formato SVG (Scalable Vectorial Graphics) tambeacutem pode ser embutido diretamente embutido no documento com o uso do elemento img

ltimg src=imagensrabiscosvg alt=Rabisco em SVGgt

httpbitlyrqqZuK

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 32: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Aacuteudio

ltaudio src=mozart_trompamp3 controlsgtltaudiogt

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento audio

ltaudio controlsgt

ltsource src=mozart_trompaaacgt

ltsource src=mozart_trompaogggt

ltsource src=mozart_trompamp3gt

ltpgtBaixe o arquivolta href=mozart_trompamp3gtmp3ltagtltpgt

ltaudiogt

httpbitlynDeClI

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 33: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Viacutedeo

Opccedilatildeo para vaacuterios formatos e opccedilatildeo de download do arquivo visiacutevel quando o browser do usuaacuterio natildeo oferecer suporte para nenhum dos formatos indicados ou para o elemento video

ltvideo height=272 width=360 controls preload poster=ldquoposter_videojpggt

ltsource src=videosvideom4vgt

ltsource src=videosvideoogvgt

ltsource src=videosvideowebmgt

ltpgtlta href=videosvideom4vgtBaixe o viacutedeoltagtltpgtltvideogt

Outras possibilidades semacircnticas track captions subtitles descriptions

chapters metadata

httpbitlyoKtdlT

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 34: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

bull Comentaacuterios e Opiniotildees

bull Pessoas

bull Produtos

bull Empresas e negoacutecios

bull Receitas

bull Eventos

bull Video

bull Os mecanismos de busca entendem o contexto ao qual eles se referem (uma pessoa um endereccedilo um evento)

bull Facilita a importaccedilatildeo e o compartilhamento destes dados por outras aplicaccedilotildees e sistemas

Microdata Microformats

RDFa

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 35: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

Meu nome eacute Faacutebio Flatschart e as pessoas normalmente me tratam por Flatschart ou Fabio Flat Meu site pessoal eacute wwwflatschartcom e sou autor da Editora Brasport

ltdiv itemscope itemtype=httpdata-vocabularyorgPersongt

Meu nome eacute ltspan itemprop=namegtFaacutebio Flatschartltspangt

e as pessoas normalmente me tratam por ltspan itemprop=nicknamegtFlatschart

ou Faacutebio Flatltspangt Meu site pessoal eacute

lta href=httpwwwflatschartcom itemprop=urlgtwwwflatschartcomltagt

e sou ltspan itemprop=titlegtautor ltspangt da ltspan

itemprop=affiliationgtEditora Brasportltspangt

ltdivgt

httpflatschartcomhtml5microdatahtml

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 36: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Rich snippets

httpbitlyIFWYam

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 37: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Mitos

bull HTML5 ainda natildeo pode ser usado comercialmente

bull A maior mudanccedila do HTML5 foi Viacutedeo Aacuteudio e Canvas

bull Objetivo do HTML5 eacute matar o Flash

bull HTML5 natildeo faz diferenccedila pra SEOSEM

bull HTML5 tem falhas graves de seguranccedila

httpwwwsoyuzcombrbloggrandes-mentiras-sobre-html5

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 38: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom

ADMIRAacuteVEL MUNDO NOVO

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 39: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom

Integraccedilatildeo e Convergecircncia

bull Semacircntica faz a ponte entre o fiacutesico e o virtual

bull Dados semacircnticos facilitaratildeo a importaccedilatildeo e o

compartilhamento de informaccedilotildees

por quaisquer aplicaccedilotildees e sistemas

bull The Internet of things

bull Fluid Knowledge

WEB

Mobile

Midia Impressa

Broadcast

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 40: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom

Visualizaccedilatildeo semacircntica de dados

Encontar filtrar indexar e compartilhar

dados de maneira semacircntica

Dashboard da Soyuz que mostra em

tempo real a relaccedilatildeo entre latitude

longitude e altura dos municiacutepios

brasileiros

Baseado em dados abertos esta eacute uma

experiecircncia de visualizaccedilatildeo de dados

utilizando Ajax e Processingjs como

mecanismo para o graacutefico em WebGL

httplabssoyuzcombrdash

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 41: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Open Web Platform

httpwwwsoyuzcombrblogopen-web-platform

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 42: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Abordagem Sistecircmica

1 Inteligecircncia de Marketing

2 Ciecircncia e Arquitetura da Informaccedilatildeo

3 Anaacutelise de Riscos

4 UX Acessibilidade e Usabilidade

5 Design

6 Desenvolvimento Open Web

7 Gestatildeo de Conteuacutedo

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 43: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom

Equipes multidisplinares

Noacutes precisamos de vocecircs Muacutesicos socioacutelogos designers historiadores jornalistas antropoacutelogos pedagogos biblioteconomistas atores sonhadores programadores e todos os demais humanos e exatos

Homem Vitruviano Leonardo da Vinci

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 44: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Estamos na preacute- histoacuteria

httpwwwseomozorgbeginners-guide-to-seo

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 45: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom

FINALIZANDO

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 46: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

HTML5 - Embarque imediato

O livro HTML5 - Embarque Imediato apresenta comenta e exibe cerca de 100 exemplos de coacutedigo publicados online flatschartcomhtml5

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 47: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom Faacutebio Flatschart | wwwflatschartcom

Faacutebio Flatschart httpflatschartcom

Soyuz Sistemas httpwwwsoyuzcombr

Seofish - Semacircntica e Inteligecircncia httpwwwseofishcombr

SEOmoz httpwwwseomozorg

W3C httpwwww3corg

SCHWARTZ Barry O Paradoxo da escolha por que mais eacute menos

ANDERSON Chris A cauda longa do mercado de massa para o mercado de nicho

KIM W Chan e MAUBORGNE Reneacutee A estrateacutegia do oceano azul como criar novos mercados e tornar a concorrecircncia irrelevante ENGE Eric e outros A Arte de SEO

Bibliografia

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom

Page 48: SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart

Faacutebio Flatschart | wwwflatschartcom

Muito obrigado

fabioflat

flatschartcom