0
Uma conversa sobreSEO, SEMÂNTICA & HTML5    Fábio Flatschart | www.flatschart.com
Senac São José dos Campos | Maio de 2012Fábio Flatschart | www.flatschart.com
Fábio FlatschartGerente de Marketing e Inovação da Soyuz Sistemas.No mercado WEB desde 1997, é consultor dedesenvolvimento...
Conexões@fabioflatslideshare.net/fabioflatdelicio.us/fabioflatlinkedin.com/in/fabioflat       Fábio Flatschart | www.flats...
INFINITAS ESCOLHAS          Fábio Flatschart | www.flatschart.com
Buscar é preciso•   Revolução Digital•   A Era da Busca•   Inversão do vetor de Marketing•   Relacionamento e experiência ...
Mais é menos ?O bombardeio de informações e de possibilidades de escolha nos leva aviver em mundo de nichos e tribos no qu...
SegmentaçãoFábio Flatschart | www.flatschart.com
Resultados locaisFábio Flatschart | www.flatschart.com
Resultados PessoaisFábio Flatschart | www.flatschart.com
Resultados PessoaisFábio Flatschart | www.flatschart.com
Search Engine OptimizationSEO                       Fábio Flatschart | www.flatschart.com
Estamos fazendo assim ?             Domínio         palestra.com.br               Título     <title> Palestra</title>     ...
Social                                               Ou assim ?                    Twitter,                   Facebook,   ...
Ótimo !  Fábio Flatschart | www.flatschart.com
Ampliando os conceitos• Os fundamentos técnicos são importantes…                            porém…•   Não existe uma recei...
SEMÂNTICA            Fábio Flatschart | www.flatschart.com
Entendendo…• Semântica é o estudo dos significados• Presente na linguística, ciência, literatura, música...• Procura estab...
Web Semântica• Todo conteúdo publicado na Web pode, teoricamente, ser  interligado semanticamente pelos seus significados....
Resultados…                                                 Inteligência                               Conhecimento       ...
Novas possibilidades semânticasHTML5                       Fábio Flatschart | www.flatschart.com
Fábio Flatschart | www.flatschart.com
HTML1991 HTML1994 HTML 21996 CSS 1 + JavaScript1997 HTML 41998 CSS 22000 XHTML 12002 Tableless2005 AJAX2009 HTML 5        ...
HTML5O HTML 5 é uma especificação do W3C ainda não concluída.Pelas características modulares do seu desenvolvimento, as em...
Estrutura básica<!DOCTYPE html><html lang="pt-br"><head><meta charset="utf-8"><title>Estrutura básica</title></head><body>...
Elementos estruturaisUmas das maiores novidades do HTML5 é a possibilidade de atribuir às diversasseções estuturais do doc...
A semântica dos novos elementos estruturais          Representa um conteúdo independente e altamente relevante, pode ser u...
A semântica dos novos elementos estruturais          É formado por um bloco de conteúdo que pode conter um ou mais element...
Estruturas SemânticasFábio Flatschart | www.flatschart.com
Estruturas SemânticasFábio Flatschart | www.flatschart.com
Formulários Semânticos <input type="email">   <input type="url"><input type="number"><input type="search"> <input type="ra...
SVG<svg ><rect width="90" height="60" x="10" y="100"fill="#00FFCC" stroke="#FF0000" stroke-width="3" ></svg>No HTML5, o fo...
Áudio<audio src="mozart_trompa.mp3" controls></audio>Opção para vários formatos e opção de download do arquivo, visível qu...
VídeoOpção para vários formatos e opção de download do arquivo, visível quando obrowser do usuário não oferecer suporte pa...
Rich snippets•   Comentários e Opiniões                                                  Microdata•   Pessoas             ...
Rich snippetsMeu nome é Fábio Flatschart e as pessoas normalmente me tratam por Flatschart ouFabio Flat. Meu site pessoal ...
Rich snippetshttp://bit.ly/IFWYam                       Fábio Flatschart | www.flatschart.com
Mitos•   HTML5 ainda não pode ser usado comercialmente•   A maior mudança do HTML5 foi Vídeo, Áudio e Canvas•   Objetivo d...
ADMIRÁVEL MUNDO NOVO        Fábio Flatschart | www.flatschart.com
Integração e Convergência•   Semântica faz a ponte entre o físico e o virtual•   Dados semânticos facilitarão a importação...
Visualização semântica de dadosEncontar, filtrar, indexar e compartilhardados de maneira semântica.Dashboard da Soyuz que ...
Open Web Platform                                http://www.soyuz.com.br/blog/open-web-platformFábio Flatschart | www.flat...
Abordagem Sistêmica1.   Inteligência de Marketing2.   Ciência e Arquitetura da Informação3.   Análise de Riscos4.   UX, Ac...
Equipes multidisplinaresNós precisamos de vocês :Músicos, sociólogos, designers,historiadores, jornalistas,antropólogos, p...
Estamos na pré- história http://www.seomoz.org/beginners-guide-to-seo                                      Fábio Flatscha...
FINALIZANDO         Fábio Flatschart | www.flatschart.com
HTML5 - Embarque imediatoO livro HTML5 - Embarque Imediato apresenta, comenta e exibe cerca de 100 exemplos decódigo publi...
BibliografiaFábio Flatscharthttp://flatschart.comSoyuz Sistemashttp://www.soyuz.com.brSeofish - Semântica e Inteligênciaht...
Muito obrigado !                     @fabioflat                     flatschart.comFábio Flatschart | www.flatschart.com
Upcoming SlideShare
Loading in...5
×

SEO, Semantica e HTML5

5,333

Published on

As possibilidades semânticas das estratégias de SEO dentro do ambiente do HTML5.

Palestra do Road Show TI Experience 2012. realizada no Senac de São José dos Campos em maio de 2012.

Published in: Technology
0 Comments
18 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,333
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
162
Comments
0
Likes
18
Embeds 0
No embeds

No notes for slide

Transcript of "SEO, Semantica e HTML5"

  1. 1. Uma conversa sobreSEO, SEMÂNTICA & HTML5 Fábio Flatschart | www.flatschart.com
  2. 2. Senac São José dos Campos | Maio de 2012Fábio Flatschart | www.flatschart.com
  3. 3. Fábio FlatschartGerente de Marketing e Inovação da Soyuz Sistemas.No mercado WEB desde 1997, é consultor dedesenvolvimento e implantação de soluções eferramentas da Adobe Systems Brasil.Autor e escritor técnico da Editora Brasport e daEditora SENAC/SP.No SENAC /SP atuou no atendimento corporativo eintermediação de parcerias com grandes empresascomo Adobe, Apple, Editora ABRIL, Microsoft, UOL eW3C. Fábio Flatschart | www.flatschart.com
  4. 4. Conexões@fabioflatslideshare.net/fabioflatdelicio.us/fabioflatlinkedin.com/in/fabioflat Fábio Flatschart | www.flatschart.com
  5. 5. INFINITAS ESCOLHAS Fábio Flatschart | www.flatschart.com
  6. 6. Buscar é preciso• Revolução Digital• A Era da Busca• Inversão do vetor de Marketing• Relacionamento e experiência através da busca• Marketing de busca Fábio Flatschart | www.flatschart.com
  7. 7. Mais é menos ?O bombardeio de informações e de possibilidades de escolha nos leva aviver em mundo de nichos e tribos no qual as infinitas opções não nosfazem mais felizes , mas muitas vezes nos levam à um universo deinsegurança e individualismo.• O papel dos mecanismos de busca cresce em importância à sombra deste paradoxo*, eles são o nosso guru desbravando os segredos das esferas de informação.• Cada umas destas infinitas esferas é composta de infinitas subesferas que estão na extremidade da cauda longa**, esperando para serem descobertas… * SCHWARTZ, Barry. O Pradoxo da escolha: por que mais é menos. São Paulo: A Girafa Editora,2007 ** ANDERSON, Chris. A cauda longa: do mercado de massa para o mercado de nicho.Rio de janeiro, Elsevier,2006 Fábio Flatschart | www.flatschart.com
  8. 8. SegmentaçãoFábio Flatschart | www.flatschart.com
  9. 9. Resultados locaisFábio Flatschart | www.flatschart.com
  10. 10. Resultados PessoaisFábio Flatschart | www.flatschart.com
  11. 11. Resultados PessoaisFábio Flatschart | www.flatschart.com
  12. 12. Search Engine OptimizationSEO Fábio Flatschart | www.flatschart.com
  13. 13. Estamos fazendo assim ? Domínio palestra.com.br Título <title> Palestra</title> Subdominio palestra.site.com.br Atributos em Imagens alt = "palestra" Texto A palestra sobre SEO foi um sucesso. Arquivos palestra.jpg | palestra.pdf Diretórios site.com.br/palestra Cabeçalho <h1>Palestra</h1> Fábio Flatschart | www.flatschart.com
  14. 14. Social Ou assim ? Twitter, Facebook, Linkedin, Youtube Links Diretórios, Listas, Comentários Conteúdo Tags, Densidade de palavras chaves,exclusividade e variedade de conteúdo Estrutura URL, 404, 301, Servidor Fábio Flatschart | www.flatschart.com
  15. 15. Ótimo ! Fábio Flatschart | www.flatschart.com
  16. 16. Ampliando os conceitos• Os fundamentos técnicos são importantes… porém…• Não existe uma receita única e universal• Não existe uma fórmula exata e estanque• SEO não pode estar desvinculado da inteligência de marketing• Como tratar conteúdos sociais e ubíquos ? Fábio Flatschart | www.flatschart.com
  17. 17. SEMÂNTICA Fábio Flatschart | www.flatschart.com
  18. 18. Entendendo…• Semântica é o estudo dos significados• Presente na linguística, ciência, literatura, música...• Procura estabelecer a relação entre palavras, frases, sinais, códigos, símbolos e aquilo que eles representam Sintaxe Semântica <img title="Fábio Flatschart - 1971" src="http://site.com.br/foto71.jpg" alt="Fábio Flatschart - 1971"> Fábio Flatschart | www.flatschart.com
  19. 19. Web Semântica• Todo conteúdo publicado na Web pode, teoricamente, ser interligado semanticamente pelos seus significados.• Quando os dispositivos entenderem totalmente o conteúdo inserido e exibido neles, poderão oferecer soluções que hoje ainda não são possíveis.• Nós estamos ensinando o sistema a pensar* *http://www.soyuz.com.br/blog/redes-sociais-ensinando-androides-a-pensar/ Fábio Flatschart | www.flatschart.com
  20. 20. Resultados… Inteligência Conhecimento InformaçãoDados Fábio Flatschart | www.flatschart.com
  21. 21. Novas possibilidades semânticasHTML5 Fábio Flatschart | www.flatschart.com
  22. 22. Fábio Flatschart | www.flatschart.com
  23. 23. HTML1991 HTML1994 HTML 21996 CSS 1 + JavaScript1997 HTML 41998 CSS 22000 XHTML 12002 Tableless2005 AJAX2009 HTML 5 Fábio Flatschart | www.flatschart.com
  24. 24. HTML5O HTML 5 é uma especificação do W3C ainda não concluída.Pelas características modulares do seu desenvolvimento, as empresas, fabricantes dosnavegadores, desenvolvedores, designers e usuários não necessitam aguardar aespecificação final da linguagem para colocá-la em uso.Esta nova especificação introduz novos elementos (tags) orientados para auxiliar nodesenvolvimento web baseado em padrões compatíveis com todos dispositivos, namarcação semântica do código, na manipulação de elementos do CSS e do JavaScriptatravés da definição de APIs da arquitetura Web.World Wide Web Consortium - Escritório Brasilhttp://www.w3c.br Fábio Flatschart | www.flatschart.com
  25. 25. Estrutura básica<!DOCTYPE html><html lang="pt-br"><head><meta charset="utf-8"><title>Estrutura básica</title></head><body></body></html> Fábio Flatschart | www.flatschart.com
  26. 26. Elementos estruturaisUmas das maiores novidades do HTML5 é a possibilidade de atribuir às diversasseções estuturais do documento um elemento próprio, nativo da linguagem. HTML4 / XHTML HTML5 <body> <body> <div id="topo"></div> <header></header> <div id="navegacao"></div> <nav></nav> <div id="principal"></div> <article></article> <div id="lateral"></div> <aside></aside> <div id="rodape"></div> <footer></footer> </body> </body> Fábio Flatschart | www.flatschart.com
  27. 27. A semântica dos novos elementos estruturais Representa um conteúdo independente e altamente relevante, pode ser umarticle post, um artigo, um bloco de texto ou ainda um mini aplicativo embutido no conteúdo (widget). Define um bloco de conteúdo que faz referência ao conteúdo principal que oaside cerca, pode estar em uma barra lateral exibindo informações contextuais, assuntos relacionados, publicidade ou um grupo de navegação secundária. Marca a área inferior, normalmente conhecida como rodapé, do conteúdofooter geral do documento ou do conteúdo de uma seção específica a qual ele está subordinado. Fábio Flatschart | www.flatschart.com
  28. 28. A semântica dos novos elementos estruturais É formado por um bloco de conteúdo que pode conter um ou mais elementos h1 até h6, campo de busca, elementos de navegação, um logo ou banner, umaheader introdução, um pequeno prefácio, um índice em formato de lista. Normalmente trabalha como um agregador do conteúdo do cabeçalho de um documento ou de uma seção. É a uma seção do documento que agrupa links para outras partes do site ou aplicativo. Vale ressaltar que o grupo de links do elemento nav estánav relacionado com a navegação primária ou global, que pode estar no cabeçalho, no rodapé ou em outras seções do documento. Entre todos os elementos que marcam e definem a estrutura do documento, o elemento section é o que possui menor especificidade em sua semântica,section logo, é o mais genérico. Ele pode abrigar os elementos header, article e footer e sua principal função é dividir o conteúdo em macro-estruturas, em grande blocos. Fábio Flatschart | www.flatschart.com
  29. 29. Estruturas SemânticasFábio Flatschart | www.flatschart.com
  30. 30. Estruturas SemânticasFábio Flatschart | www.flatschart.com
  31. 31. Formulários Semânticos <input type="email"> <input type="url"><input type="number"><input type="search"> <input type="range"> <input type="date"> <input type="week"> http://bit.ly/nrGXhw Fábio Flatschart | www.flatschart.com
  32. 32. SVG<svg ><rect width="90" height="60" x="10" y="100"fill="#00FFCC" stroke="#FF0000" stroke-width="3" ></svg>No HTML5, o formato SVG (Scalable Vectorial Graphics) também pode ser embutidodiretamente embutido no documento com o uso do elemento img<img src="imagens/rabisco.svg" alt="Rabisco em SVG">http://bit.ly/rqqZuK Fábio Flatschart | www.flatschart.com
  33. 33. Áudio<audio src="mozart_trompa.mp3" controls></audio>Opção para vários formatos e opção de download do arquivo, visível quando obrowser do usuário não oferecer suporte para nenhum dos formatos indicados oupara o elemento audio.<audio controls><source src="mozart_trompa.aac"/><source src="mozart_trompa.ogg"/><source src="mozart_trompa.mp3"/><p>Baixe o arquivo<a href="mozart_trompa.mp3">.mp3</a></p></audio> http://bit.ly/nDeClI Fábio Flatschart | www.flatschart.com
  34. 34. VídeoOpção para vários formatos e opção de download do arquivo, visível quando obrowser do usuário não oferecer suporte para nenhum dos formatos indicados oupara o elemento video.<video height="272" width="360" controls preload poster=“poster_video.jpg"><source src="videos/video.m4v"/><source src="videos/video.ogv"/><source src="videos/video.webm"/><p><a href="videos/video.m4v">Baixe o vídeo</a></p></video>Outras possibilidades semânticas :track, captions, subtitles, descriptions,chapters, metadatahttp://bit.ly/oKtdlT Fábio Flatschart | www.flatschart.com
  35. 35. Rich snippets• Comentários e Opiniões Microdata• Pessoas Microformats• Produtos RDFa• Empresas e negócios• Receitas• Eventos• Video• Os mecanismos de busca "entendem" o contexto ao qual eles se referem (uma pessoa, um endereço, um evento).• Facilita a importação e o compartilhamento destes dados por outras aplicações e sistemas. Fábio Flatschart | www.flatschart.com
  36. 36. Rich snippetsMeu nome é Fábio Flatschart e as pessoas normalmente me tratam por Flatschart ouFabio Flat. Meu site pessoal é www.flatschart.com e sou autor da Editora Brasport.<div itemscope itemtype="http://data-vocabulary.org/Person">Meu nome é <span itemprop="name">Fábio Flatschart</span>e as pessoas normalmente me tratam por <span itemprop="nickname">Flatschartou Fábio Flat</span>. Meu site pessoal é<a href="http://www.flatschart.com" itemprop="url">www.flatschart.com</a>e sou <span itemprop="title">autor </span> da <spanitemprop="affiliation">Editora Brasport</span>.</div>http://flatschart.com/html5/microdata.html Fábio Flatschart | www.flatschart.com
  37. 37. Rich snippetshttp://bit.ly/IFWYam Fábio Flatschart | www.flatschart.com
  38. 38. Mitos• HTML5 ainda não pode ser usado comercialmente• A maior mudança do HTML5 foi Vídeo, Áudio e Canvas• Objetivo do HTML5 é matar o Flash• HTML5 não faz diferença pra SEO/SEM• HTML5 tem falhas graves de segurança http://www.soyuz.com.br/blog/grandes-mentiras-sobre-html5/ Fábio Flatschart | www.flatschart.com
  39. 39. ADMIRÁVEL MUNDO NOVO Fábio Flatschart | www.flatschart.com
  40. 40. Integração e Convergência• Semântica faz a ponte entre o físico e o virtual• Dados semânticos facilitarão a importação e o compartilhamento de informações por quaisquer aplicações e sistemas. Broadcast Midia• The Internet of things Impressa• Fluid Knowledge Mobile WEB Fábio Flatschart | www.flatschart.com
  41. 41. Visualização semântica de dadosEncontar, filtrar, indexar e compartilhardados de maneira semântica.Dashboard da Soyuz que mostra emtempo real a relação entre latitude,longitude e altura dos municípiosbrasileiros.Baseado em dados abertos, esta é umaexperiência de visualização de dadosutilizando Ajax e Processing.js comomecanismo para o gráfico em WebGL.http://labs.soyuz.com.br/dash/ Fábio Flatschart | www.flatschart.com
  42. 42. Open Web Platform http://www.soyuz.com.br/blog/open-web-platformFábio Flatschart | www.flatschart.com
  43. 43. Abordagem Sistêmica1. Inteligência de Marketing2. Ciência e Arquitetura da Informação3. Análise de Riscos4. UX, Acessibilidade e Usabilidade5. Design6. Desenvolvimento Open Web7. Gestão de Conteúdo Fábio Flatschart | www.flatschart.com
  44. 44. Equipes multidisplinaresNós precisamos de vocês :Músicos, sociólogos, designers,historiadores, jornalistas,antropólogos, pedagogos,biblioteconomistas, atores,sonhadores, programadores etodos os demais humanos eexatos ! Homem Vitruviano Leonardo da Vinci Fábio Flatschart | www.flatschart.com
  45. 45. Estamos na pré- história http://www.seomoz.org/beginners-guide-to-seo Fábio Flatschart | www.flatschart.com
  46. 46. FINALIZANDO Fábio Flatschart | www.flatschart.com
  47. 47. HTML5 - Embarque imediatoO livro HTML5 - Embarque Imediato apresenta, comenta e exibe cerca de 100 exemplos decódigo publicados online : flatschart.com/html5 Fábio Flatschart | www.flatschart.com
  48. 48. BibliografiaFábio Flatscharthttp://flatschart.comSoyuz Sistemashttp://www.soyuz.com.brSeofish - Semântica e Inteligênciahttp://www.seofish.com.brSEOmozhttp://www.seomoz.orgW3Chttp://www.w3c.orgSCHWARTZ, Barry. O Paradoxo da escolha: por que mais é menos.ANDERSON, Chris. A cauda longa: do mercado de massa para o mercado de nicho.KIM, W. Chan e MAUBORGNE, Renée. A estratégia do oceano azul: como criar novos mercados e tornar a concorrênciairrelevante.ENGE, Eric e outros. A Arte de SEO. Fábio Flatschart | www.flatschart.com
  49. 49. Muito obrigado ! @fabioflat flatschart.comFábio Flatschart | www.flatschart.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×