SEO, Semântica & HTML5 - Palestra do Road Show TI 2012 - Fábio Flatschart
-
Upload
senac-sao-paulo -
Category
Documents
-
view
993 -
download
2
description
Transcript of 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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Faacutebio Flatschart | wwwflatschartcom
Muito obrigado
fabioflat
flatschartcom