Arquitetura Da Informação - Marco Aurelio Reis

ARQUITETURA DA INFORMAÇÃO

autor MARCO AURELIO REIS

1ª edição SESES rio de janeiro

2018

ARQUITETURA DA INFORMAÇÃO

autor MARCO AURELIO REIS

1ª edição SESES rio de janeiro

2018

Conselho editorial

marco aurelio reis

Autor do original Projeto editorial

roberto paes e gisele lima

roberto paes

Coordenação de produção

gisele lima, paula r. de a. machado e aline karina

rabello paulo vitor bastos

Projeto gráfico Diagramação

bfs media

Revisão linguística

bfs media

Revisão de conteúdo Imagem de capa

sérgio vieira rodrigues de carvalho

watcharakun | shutterstock.com

Todos os direitos reservados. Nenhuma parte desta obra pode ser reproduzida ou transmitida por quaisquer meios (eletrônico ou mecânico, incluindo fotocópia e gravação) ou arquivada em qualquer sistema ou banco de dados sem permissão escrita da Editora. Copyright seses, 2018. Dados Internacionais de Catalogação na Publicação (cip) R375a Reis, Marco Aurelio

Arquitetura da informação / Marco Aurelio Reis. Rio de Janeiro : SESES, SESES, 2018. 128 p: il. isbn: 978-85-5548-526-8. 1. Arquitetura da informação. 2. Hipertexto. 3. Interface. 4. Metodologias. I. SESES. II. Estácio. Estácio. cdd 303.483

Diretoria de Ensino — Fábrica de Conhecimento Rua do Bispo, 83, bloco F, Campus João Uchôa Rio Comprido — Rio de Janeiro — rj — cep 20261-063

Sumário Prefácio

7

1. O que faz um arquiteto da informação?

9

Mãos à obra: o que é AI?

10

O contexto histórico da AI

15

Os pais da AI

16

Ted Nelson e o conceito de hipertexto

18

Principais componentes da AI:

20

Esquemas de organização da informação

22

Ícones como rótulos

28

Conceitos básicos da busca

29

Quando implementar?

29

Quando não implementar?

30

Os tipos de busca podem variar

30

Faça uma caixa de busca grande

31

Facilite a digitação de palavras-chave

31

A página de resultados

31

Caixa de busca com os parâmetros editáveis

31

Organização dos resultados da busca

31

Avise claramente que a busca não teve sucesso

31

Analise as palavras digitadas pelos usuários na busca

32

SEO (Search Engine Optimization)

32

2. Conceitos centrais para AI

37

Mãos à obra: Sistemas de buscas

38

O que mais se deve saber sobre o Sistema de Buscas?

39

Cadê?

45

Altavista

45

Aonde

45

Cuil

46 

Yandex

46 

Baidu

46 

 Ask.com

47 

Sapo

47

Lycos

47

Yahoo

48

MSN Search

48

Como o Google se sustenta?

49

SEO (Search Engine Optimization)

50

A psicologia da busca e os três tipos de busca

50

O SEO e o Google

51

Como vimos acima

52

Hipertexto, link, janela da web e interface

55

Links

57 

Janela da web

58

Interface

60

3. Metodologias da AI para internet (web)

65

Mãos à obra: as ontologias e a representação do conhecimento no contexto da AI

67

Para entender ainda mais

68

Os sete passos da metodologia da AI para internet

71

No que devemos apostar nesta etapa de nosso trabalho?

73

Indexação e classificação de informação na internet

73

Taxonomia

74

Para entender

75

Palavra + Contexto

76

Folksonomia

77

4. Usabilidade e acessibilidade

83

Mãos à massa: usabilidade e acessibilidade

84

As dez heurísticas de Nielsen e seu foco na usabilidade

86

Acessibilidade para web

97

5. Aspectos práticos da AI

101

Experiência do usuário (User experience – UX)

102

Produção e gestão de conteúdo

107

Conteúdo colaborativo e Wikipédia

113

Wikipédia

Prefácio Prezados(as) alunos(as),  Amigos, o convite que fazemos a vocês é mergulhar no interessante universo da Arquitetura da Informação. Alguns de vocês vão se perguntar: esse conteúdo é para jornalistas, publicitários e designers? Não seria mais adequado para bibliotecários e programadores? Vamos dizer uma coisa para vocês: todos esses profissionais precisam dominar o conteúdo das próximas páginas, uma vez que todos terão, mais cedo ou mais tarde, que pensar como aparecer na web com seus serviços, produtos e suas informações.  AI (nós, “íntimos” dessa disciplina, a chamamos assim) é indispensável quando se pensa em entrar e permanecer nas nuvens da  web, sejam provedores de conteúdo, lojistas ou documentaristas. Para jornalistas, a AI é fundamental no momento em que leitores, ouvintes e telespectadores não se limitam a ler páginas impressas, ouvir emissoras de rádio no carro ou telejornais noturnos. Esse público quer ler, ouvir e ver, e pode, quase sempre, querer fazê-lo em smartphones quando se movimentam nas ruas dos centros urbanos. Pode, e muitas vezes quer, ler, ouvir e ver deitado enquanto viaja de uma cidade para outra de ônibus. Nosso convite é para você mergulhar nas nuances que facilitam esse querer ler, ouvir e ver na  web. Para tanto, vamos discutir o que é Arquitetura da Informação e sua importância na atualidade. Vamos enveredar pelo contexto histórico da AI e descobrir os papéis, nesse processo, dos pioneiros Tim Berners-Lee, Saul Wurman, Paul Otlet, Vannevar Bush e Ted Nelson. Ainda no primeiro capítulo, vamos dar dicas importantes sobre os componentes principais da AI: os sistemas de organização, de navegação, de rotulação e de buscas. No capítulo 2, será a vez de aprofundar conceitos centrais para AI: o sistema de buscas e SEO (Search Engine Optimazation), o hipertexto, os links, as  janelas e as interfaces. Depois de tanta informação pragmática, será a vez de, no capítulo 3, enveredar nas chamadas metodologias de AI para internet: ontologias e representação do conhecimento, indexação e classificação de informação, a taxonomia e a folksonomia. No capítulo 4, os conceitos centrais, já citados nos capítulos anteriores, são detalhados. Usabilidade e acessibilidade serão conceituadas e suas aplicabilidades, apresentadas na intimidade. Nessa unidade, aguarde, você ficará conhecendo as dez heurísticas de Nielsen, que não vamos antecipar aqui para não dar spoiler .

7

Por fim, na última unidade deste livro, será a vez de navegar nos chamados aspectos práticos da AI. Experiência do usuário (UX), seus conceitos, produção e gestão de conteúdo e até mesmo o popular Wikipedia e demais ações colaborativas serão discutidos para vocês, que esperamos, já serão, a essa altura, apaixonados pela Arquitetura da Informação, exatamente como nós somos. Você verá que a construção desse trabalho está inserida dentro do contexto da inteligência coletiva (IC), conceito elaborado pelo pesquisador Pierre Lévy em 2003, segundo o qual a IC é “[...] uma inteligência distribuída por toda parte, incessantemente valorizada, coordenada em tempo real, que resulta em uma mobilização efetiva das competências”. Ou seja, é um saber construído por mais de uma pessoa, coletivamente, de modo a produzir um conhecimento completo e comum a todos.  A Arquitetura da Informação nasce neste contexto e este trabalho reúne pensamentos de autores, de pensadores, de profissionais e de apaixonados pela AI. Você verá links  de textos acadêmicos, de sites, de blogs  e de vídeos. Eles foram reunidos para expandir ao máximo o que as páginas a seguir trarão. Muitos destes textos linkados estão inseridos com pequenas adaptações aqui, claro que com crédito para seus autores originais. Mas o mais importante é você construir e aprender a construir um saber sobre AI, disciplina em constante desenvolvimento que exigirá de você um “F5” ao longo de sua vida profissional. Voltando a Lévy (2003), esse trabalho valoriza a inteligência coletiva, aquela que não está restrita a poucos privilegiados e que tem base no saber da humanidade, com o qual todos os indivíduos podem colaborar, não tendo quem seja nulo nesse contexto. Boa leitura e boa navegação pelo universo da AI! Bons estudos!

8

1 O que faz um arquiteto da informação?

O que faz um arquiteto da informação? Neste primeiro capítulo, você aprofundará seus conhecimentos sobre  Arquitetura da Informação e sobre a importância desse saber para a Comunicação Social e, em particular, para o Jornalismo, a Publicidade e o Design. Para isso, vamos navegar pelo contexto histórico da AI (isso mesmo, vamos resumir Arquitetura da Informação como AI). Vamos conhecer o pensamento de im Berners-Lee, Saul Wurman, Paul Otlet, Vannevar Bush e ed Nelson (sim, esses são os “pais” da  AI). E saber o que eles pensam ajudará você a entender o papel do hipertexto e dos sistemas de organização de conteúdo nesse mar de informação presente na web. Vamos enveredar ainda nos sistemas de navegação, esse processo que a cada dia ganha maior mobilidade, dos sistemas de rotulação e de buscas, que fazem de nossa vida em frente a qualquer interface conectada à internet um mergulho em paradisíacas praias do conhecimento, do prazer e da ação político-social, locais que desde a Grécia Antiga são os ambientes da sociabilidade humana 1.

OBJETIVOS Detalhar o que é Arquitetura da Informação e sua importância; Conhecer o contexto histórico da AI e seus principais autores e conceitos; Vamos entender fundamentos da AI: Sistemas de Organização, Sistemas de Navegação, Sistemas de Rotulação e Sistemas de Buscas. •

•

•

Mãos à obra: o que é AI? O que é Arquitetura da Informação e qual é sua importância? Ou ainda: o que faz um Arquiteto da Informação e qual o seu papel na sociedade? Esses questionamentos são comuns quando falamos que estamos estudando AI. As respostas que encontramos sempre são complexas e apontam para várias áreas do saber, desde a  Arquitetura propriamente dita à Ciência da Informação, passando pelo Design e pela Biblioteconomia. 1 Para o filósofo Aristóteles (Estagira, 384 a.C.-Atenas, 322 a.C.), os três modos de sociabilidade humana são o modo do conhecimento, que é o biostheoretikos, o dos prazeres, que é o biospolaustikos, e a sociabilidade política, que é o biospolitikos.

capítulo 1 •

10

 Até mesmo a Wikipédia, fonte de informação ainda considerada insegura que será detalhada em nosso último capítulo, traz uma definição nada simples2 (não deixe de ler a nota no rodapé): A Arquitetura da informação (AI) é a arte de expressar um modelo ou conceito de informação utilizado em atividades que exigem detalhes explícitos de sistemas complexos. (...). Arquitetura da informação tem um significado um pouco diferente nestas diferentes ramificações de arquitetura de SI (Sistemas de Informação) ou TI (Tecnologia da Informação). A maioria das definições possuem qualidades comuns: um design estrutural de ambientes compartilhados, métodos de organização e etiquetagem de sites web, intranets e comunidades online, e meios de trazer os princípios de design e arquitetura para a paisagem digital. Disponível em: . Acesso em: 14 jul. 2017.

 A partir dessa definição, concluímos que AI é uma disciplina transdisciplinar, ou seja, um modo de pensar que atravessa diferentes disciplinas em busca de uma unidade integradora. al unidade aponta para uma organização e um design de uma paisagem digital de modo que ambientes possam facilmente ser navegados e compartilhados. Os pesquisadores Andrea Resmini e Luca Rosati (2011) defendem, em artigo publicado no periódico acadêmico  Journal of Information Architecture , que a AI “é uma prática profissional e um campo de estudos focado em resolver os problemas básicos de acesso e uso das enormes quantidades de informações disponíveis hoje”. Os autores completam a definição destacando que o avanço das tecnologias e as mudanças provocadas por tal avanço fazem da AI um campo amplo do conhecimento: Quando experimentamos cada vez mais o mundo por meio de um ou vários seres desencarnados. Quando vivemos em um mundo onde relacionamentos com pessoas, lugares, objetos e empresas são moldados por semântica e não apenas por proximidade física. Quando nossas identidades digitais se tornam persistentes mesmo quando não estamos sentados em uma mesa e na frente de uma tela de computador, então estamos reformando a realidade. Por outro lado, precisamos reformular a arquitetura de informações para melhor atender às nossas necessidades em constante mudança. O que a arquitetura da informação será, em cinco anos a partir de agora, é difícil dizer, mas há uma coisa que sabemos: não será nem grande nem pouco. Será amplo. (RESMINI, A. &ROSATI, L., 2011) 2 Importante, não usamos a Wikipedia como fonte em nossos trabalhos acadêmicos. Ela está aqui como mero exemplo da complexidade do tema que vamos tratar neste livro.

capítulo 1 •

11

 Ainda está difícil dizer com as próprias palavras o que é AI e o que faz um arquiteto da informação? Vamos, então, por outro caminho, esse proposto por Richard Saul Wurman, designer norte-americano considerado um dos pais da  AI e sobre o qual falaremos mais adiante. Wurman sugere que pensemos primeiro em Arquitetura e depois em Ciência da Informação, em seguida juntemos ambos e teremos uma boa ideia do que vem a ser AI. Ou seja, a tarefa é tornar fácil, intuitivo e agradável um ambiente digital tendo em vista as necessidades e os desejos de seus usuários.

CURIOSIDADE O guia das profissões e outros manuais semelhantes feitos para estudantes do Ensino Médio definem como arquiteto aquele profissional que projeta e organiza espaços internos e externos, pensando não só estética, mas também no conforto e na funcionalidade dessa organização a quem se destina essa intervenção. Os mesmos manuais dizem que cientistas da informação são profissionais que dominam técnicas para coleta, processamento, armazenagem e distribuição de informações. Saracevic (1996) vai dizer que a Ciência da Informação é, juntamente com muitas outras disciplinas, uma participante ativa e já consolidada na evolução da sociedade da informação, abrigando estudos relacionados com Arquitetura da Informação, Experiência de Usuário, Web Semântica, Arquitetura da Informação Pervasiva dentre outros que nascem com a finalidade de auxiliar na estruturação de ambientes digitais enfocando nos processos de organização, recuperação e acesso da informação.

CONCEITO Unindo essas reflexões, podemos definir AI como uma disciplina que pensa formas de organizar informações observando não só a estética, mas também o conforto de quem busca essas informações e na funcionalidade de manuseio delas. Mas que informações são essas? Ora são as informações coletadas, processadas, armazenadas e distribuídas nos ambientes digitais e banco de dados informatizados. O arquiteto da informação é aquele encarregado de tornar útil, inteligível e agradável a experiência de quem busca informações em diferentes plataformas e não abre mão de facilidades, como funcionalidade e usabilidade intuitiva para empreender tal procura.

capítulo 1 •

12

Em geral, pensa-se em AI como algo que está embaixo de um guarda-chuva que deixa confortável a Experiência do Usuário (UX, de User Experience ) de um site em meio a um imenso temporal de informações: TEMPESTADE DE INFORMAÇÕES NA WEB

Como Resolver ? Design Interativo Arquitetura da informação Design Visual

Pesquisa de Usuários

Estratégia de Conteúdo

Usuário

Figura 1.1 – O grande “guarda chuva” para o usuário da web. Imagem feita pelo autor.

MULTIMÍDIA Navegue no Youtube e veja que muita gente ainda confunde o arquiteto da informação com web designer . Mas essa confusão está, felizmente, sendo debelada por disciplinas como esta. Que tal resumir o que falamos até agora sobre AI em um texto de uma página comparando com o que você encontrar no Youtube sobre o assunto? A seguir, você encontra sugestões de resumos postados no Youtube. Atenção! As referências estão aqui pela curiosidade em função dos inúmeros vídeos no Youtube sobre o tema, mas não esqueça que essas referências podem não ser mais encontradas quando você ler estas linhas. Isso mesmo (lá vem spoiler   do último capítulo), uma das características de ações colaborativas, como o Youtube, é que o conteúdo pode ser removido por quem postou quando aquele colaborador assim desejar.

capítulo 1 •

13

Figura 1.2 – O que é Arquitetura de Informação? Frame do Canal UXNOW! NoYoutube. Sugestões: Link 1: . Acesso em: 14 set. 2016. Descrição: Arquitetura de informação é o arranjo e estruturação do seu conteúdo

para que seja mais fácil de ser entendido por um determinado público em um determinado contexto. Link 2: . Acesso em: 24 jan. 2013. Descrição: A TV Nube (Núcleo Brasileiro de Estágios) conversou com Leonardo Picco-

lotto e André Meneghini a respeito de uma das profissões digitais emergentes: a Arquitetura da Informação. Presente nos mais diversos segmentos, o profissional da área tem função estratégica e indispensável dentro das organizações. Link 3: . Acesso em: 4 de nov. de 2015. Descrição: Arquitetura de informação (AI), ou Arquitetura da Informação, é a arte de ex-

pressar um modelo ou conceito de informação utilizado em atividades que exigem detalhes explícitos de sistemas complexos.

SAIBA MAIS Uma das principais referências da AI é o livro “Do Urso Polar”, um dos manuais de AI mais conhecido por ter esse animal na capa.

capítulo 1 •

14

Figura 1.3 – Livro do Urso, uma das principais referências bibliográficas da AI. Disponível em: . Acesso em: nov. 2017.

Saiba um pouco mais sobre esse livro na entrevista que seus autores, Louis Rosenfeld e Peter Morville, deram no relançamento dessa obra. Link disponível em: . Atenção: ideal é baixar esse pdf para ser disponibilizado como hipertexto.

Visto o que é Arquitetura da Informação e sua importância, vamos conhecer o seu contexto histórico, a começar por im Berners-Lee, o homem do www da internet .

O contexto histórico da AI  A primeira vez que se ouviu falar em Arquitetura da Informação foi no ano de 1964, em um documento da IBM, intitulado Arquitetura do IBM System/360, ainda muito centralizado nos dispositivos físicos do computador, contam Resmini e Rosati, (2011), no artigo Uma Breve História da Arquitetura da Informação.  Ainda segundo o mesmo artigo, que consolida dados de diferentes autores, seis anos depois, em 1970, o Centro de Pesquisa Xerox Palo Alto (PARC) montaria um grupo de pessoas especializadas em ciência da informação para desenvolver tecnologia que daria suporte à Arquitetura da Informação. al grupo da xerox desenvolveu equipamentos relevantes na atualidade, como primeiro computador pessoal com uma interface amigável e máquina de

capítulo 1 •

15

impressão a laser. A paternidade do termo ficaria, no entanto, com o designer gráfico Richard Saul Wurman, que, durante uma conferência no Instituto Americano de Arquitetura, no ano de 1976, pela primeira vez uniu informação e arquitetura para tratar o que estamos discutindo neste livro.

CURIOSIDADE Resmini e Rosati (2011) ressaltam, porém, que Wurman escreveu um artigo com Joel Katz, intitulado Beyond Graphics: The Architecture of Information , que fora publicado pelo  American Institute of Architects (AIA) Journal  em 1975, portanto, um ano antes da conferência histórica. Citando o link   , os pesquisadores transcrevem trecho de entrevista concedida por Wurman em 2004: ''O termo comum então era ‘design de informação’. O que misturava design de informações, design de interiores e design industrial, e causava confusão, como causa até hoje, em muitas pessoas. Os designers de interiores fazem o lugar parecer melhor, os designers industriais são engenheiros (...). O design da informação personaliza cada mapa informacional. Foi aí que eu pensei no que ‘arquitetura’ fazia, e era uma palavra mais clara, que tinha a ver com sistemas que funcionavam e eram executados. [...] Eu pensei que a explosão de dados precisava de uma arquitetura, precisava de uma série de sistemas, de um design sistêmico necessário e de uma série de critérios de desempenho para medir isso. Existem milhares de pessoas que usam o termo [arquitetura da informação], e elas não têm ideia de onde o termo veio e 90% delas não estão fazendo o que eu acho que deveriam estar fazendo. Tradução livre do autor. Disponível em: . Acesso em: nov. 2017.

Os pais da AI Arquiteto da Informação é ... a) O indivíduo que organiza os padrões inerentes aos dados, tornando o complexo claro; b) Uma pessoa que cria a estrutura ou o mapa de informações que permite que outros encontrem caminhos próprios para o conhecimento;

capítulo 1 •

16

c) A emergente ocupação profissional do século XXI, que aborda as necessidades da era focada na clareza, na compreensão humana e na ciência da organização da informação. RS Wurman, 1996 (RESMINI, A. & ROSATI, L., 2011).

Primeiro autor a unir os termos arquitetura e informação para definir esse novo campo de saber, o designer   gráfico Richard Saul Wurman é o fundador da conferência ED (ecnologia, Entretenimento, Design), que desde 1990 se tornou anual e reúne pesquisas de vanguarda do Vale do Silício, nos EUA, sede da maior parte das maiores corporações de alta tecnologia do mundo. Como visto anteriormente, Wurman foi o primeiro a usar o termo Arquitetura da Informação, em um artigo pioneiro de 1975.  Wurman levou adiante estudos consagrados do cientista da informação belga Paul Otlet (Bruxelas, 23 de agosto de 1868 – 10 de dezembro de 1944). Otlet é visto como visionário, considerado o pai da Ciência da Informação, área que ele chamava de “documentação”. Foi Otlet quem criou a Classificação Decimal Universal, a CDU, sistema internacional de classificação de documentos, cuja base está no conceito de que o conhecimento humano pode ser dividido em 10 classes principais 3, e estas, por sua vez, podem ser infinitamente divididas numa hierarquia decimal. É um sistema de classificação consolidado e largamente usado pelas bibliotecas em todo o mundo. É com base no sistema decimal da CDU que se pensa a organização de informações na  web.

SAIBA MAIS Se você já tentou usar algo e pensou: "onde eu deveria ir em seguida?" Ou "isso não faz sentido", você está encontrando um problema relacionado à arquitetura de informação. Com essa provocação o Information Architecture Institute , ou Instituto da AI convida para uma navegação em seus estudos. O convite agora é você clicar ou digitar o link: e navegar pela página do instituto de forma crítica, vendo se esse site é funcional, usual, intuitivo e agradável de navegar, ou seja, se ele segue à risca os princípios da AI. 3 Entre as classificações estão Filosofia, Linguística, História e Ciências Puras, entre outras. Essa classificação deriva de outra, chamada CDD (Classificação Decimal de Dewey). Ambas são objeto de estudo da Biblioteconomia. Saiba mais em: . Acesso em: nov. 2017.

capítulo 1 •

17

Criado em 2002, o Instituto da AI foi o idealizador do Dia Mundial da AI, evento que, desde 2012, reúne a comunidade dos arquitetos da informação. Navegue pelas discussões históricas feitas anualmente nesse evento em: ; ; ; ; ; ; . Note nessa navegação como é fácil encontrar todas as datas, e como evoluiu a apresentação dessas páginas.

Ted Nelson e o conceito de hipertexto  Ainda no âmbito do contexto histórico da AI, temos que entender o papel do filósofo norte-americano Teodor Holm Nelson, ou, simplesmente, ed Nelson, o idealizador, em 1963, dos termos hipertexto e hipermídia.

   G    R    O  .    A    I    D    E    M    I    K    I    W     |    B    J    T    Z    T    I    ©

Figura 1.4 – Ted Nelson, cujo lema é: “Uma interface para um usuário deve ser tão simples que um iniciante, numa emergência, deve entendê-la em 10 segundos”.

ed Nelson foi o idealizador do projeto Xanadu, protótipo do software   que entre as décadas de 1960 e 2000 foi desenvolvido para garantir o que hoje nos parece banal: fazer uma consulta não sequencial, na qual pode-se escolher o próprio caminho de leitura por meio de um documento. Essa ideia de 1963 foi publicada em um documento de 1965, denominado zipperedlists. Essas listas permitiriam compor documentos que fossem partes de outros documentos. Em 1972, o software  Xanadu foi parcialmente finalizado.

capítulo 1 •

18

Vinte anos mais tarde im Berners-Lee, que veremos detalhadamente a seguir, usaria os princípios de Xanadu para desenvolver a World Wide Web, o www, sistema similar, menos perfeito e menos rigoroso que o Xanadu, mas que ficaria bem mais popular. Nelson e Berners-Lee desde então não se entendem sobre o conceito hipertexto. Veja mais sobre essa disputa em: e em .    G    R    O  .    A    I    D    E    M    I    K    I    W     |    E    K    R    A    L    C    L    U    A    P    ©

Figura 1.5 – Físico britânico Timothy John Berners-Lee: “Sir Tim, o idealizador do termo “World Wide Web” .

Sir Tim Berners-Lee (Londres, 8 de junho de 1955) é físico, cientista da

computação e professor do MI, o Instituto de ecnologia de Massachusetts, uma universidade particular conhecida por seus estudos de vanguarda localizada em Cambridge, nos Estados Unidos. Em março 1989 ele propôs a criação da World Wide Web, uma proposta que sairia em pleno Natal, isso mesmo, no dia 25 de dezembro, de 1990. Com ajuda do engenheiro de computação belga Robert Cailliau e um estudante da Organização Europeia para a Pesquisa Nuclear (CERN, na sigla em francês), Sir im completou a primeira comunicação bem-sucedida entre um servidor, ou simplesmente um computador, e uma rede de computadores, um cliente HP (Hypertext Transfer Protocol, em português Protocolo de ransferência de Hipertexto). Atualmente, Berners-Lee é o diretor do World Wide Web Consortium (W3C), que administra o desenvolvimento continuado da web. Graças a www, computadores passaram a se conectar, uma ligação que a AI, como você já viu, busca tornar mais funcional, usual e agradável.

capítulo 1 •

19

SAIBA MAIS Berners-Lee baseou-se em pesquisas desenvolvidas pelo “padrinho” da bomba atômica, o engenheiro norte-americano Vannevar Bush  (Chelsea, Massachusetts, 11 de março de 1890 – Belmont, 30 de junho de 1974), idealizador do memex, um conceito pioneiro, precursor da world wide web e do hipertexto. O memex foi uma máquina pioneira, pensada por Vannevar Bush, em 1945, para ampliar a memória humana.

Figura 1.6 – Memex, hipotético sistema de proto-hipertexto que Vannevar Bush descreveu em 1945 em artigo científico. Disponível em: . Acesso em: 15 jul. 2017.

Bush imaginou o Memex como um dispositivo no qual os indivíduos comprimiriam e armazenariam todos os seus livros, registros e comunicações.

Principais componentes da AI:

Figura 1.7 – Os Sistemas. Imagem feita pelo autor.

capítulo 1 •

20

Depois desse passeio pelo contexto histórico da AI, fica mais fácil entender os principais componentes da AI, todos relacionados à organização de informações na web e ao conceito de hipertextualidade.A partir dos autores referenciais Rosenfeld e Morville (2006), podemos dividir a AI de um site  em quatro grandes sistemas: Organização, Navegação, Rotulação e Buscas. Cada sistema completa o outro, mas todos são compostos por regras e aplicações próprias, que podem ser facilmente definidas em linguagem bem coloquial como fazem os professores Janicy Rocha, mestre em Ciência da Informação pela UFMG e bacharel em Sistemas de Informação pela PUC Minas, e Cláudio Diniz  Alves, especialista em Arquitetura de Organização da Informação pela UFMG em .  As definições e exemplos desses dois professores nos ajudam a entender sistemas. Vejamos como a partir da adaptação que pode ser conferida a seguir: 1. Sistemas de organização

Levam em consideração elementos focados na organização de um site para que ele seja facilmente navegável. Entre esses elementos estão: Ambiguidade dos nomes:  escolher um rótulo (nome) que represente uma categoria

é difícil, assim como definir que elementos pertencem ou não a ela. Uma boa organização da informação deve levar em consideração esse elemento que, bem pensado, ajuda na localização do que se procura em um site. Uma batedeira, por exemplo, deve ser encontrada em Eletrodomésticos, Eletroportáteis ou Utilidade Doméstica? Como nosso usuário a procuraria no site? Essa é uma questão para a AI. Heterogeneidade das formas de conteúdo:  diante da mistura presente nos sites e na web, de textos estáticos, dinâmicos, imagens, vídeos, áudios e aplicações interativas, em diferentes formatos e tipos de arquivos deve-se pensar mais de uma forma de organizar os conteúdos. Neste caso, deve-se pensar no que o usuário vai buscar e necessitar em primeiro, em segundo e em terceiro plano. Perspectivas diferentes: a organização da informação é afetada pela perspectiva de seu criador, sua cultura e sua visão de mundo. Nos websites de empresas, essa característica se evidencia quando refletem as divisões internas. Organizar a informação com base em como a audiência enxerga o conteúdo é a forma correta, pois torna osite mais intuitivo e fácil de usar. Políticas internas: políticas existem dentro de toda organização e podem prejudicar a usabilidade. Cabe ao arquiteto da informação lembrar aos seus colegas de focalizar a informação na perspectiva do usuário e não na visão interna dos gestores da plataforma digital.

capítulo 1 •

21

Estética: um website  precisa ser bonito. Seus usuários precisam se sentir bem ao utilizá-lo. Um design atrativo aumenta a usabilidade aparente da interface porque faz

seus usuários pensarem de forma criativa e buscarem novos modelos mentais quando se deparam com erros de AI. Um design pouco atrativo provoca o efeito inverso, limita a criatividade da mente humana ao se deparar com uma falha de AI. Disponível em: . Adaptado.

odo Sistema de Organização deve ter base em alguns esquemas clássicos, como o alfabético e o de conteúdo. Como escolher entre um e outro? Os professores mineiros também nos ajudam nessa empreitada. Confira nesta outra adaptação:

Esquemas de organização da informação Alfabético: indicado para grandes conjuntos de informação e público muito diversifi-

cado. Ex.: dicionários. Temporal: indicado para mostrar a ordem cronológica de eventos. Ex.: guias de TV. Localização: compara informações vindas de diferentes locais. Ex.: pesquisa de intenções de voto dividida por estados de um país em uma eleição presidencial. Sequencial: organiza itens por ordem de grandeza. Indicado para conferir valor ou peso a informação. Ex.: lista de preços. Exato:  divide a informação em categorias bem definidas e mutuamente exclusivas com regras claras para incluir novos itens. Indicado quando o usuário sabe exatamente o que está procurando. Ambíguo: divide a informação em categorias subjetivas. Tem base na ambiguidade inerente da língua e na subjetividade humana. Não possui regras claras de como incluir novos itens. Indicado quando o usuário não sabe exatamente o que está procurando. Assunto: divide a informação em diferentes tipos, diferentes modelos ou diferentes perguntas a serem respondidas. Ex.: páginas amarelas. Tarefa: organiza a informação em conjuntos de ações. Usado muito em software. Raramente utilizado sozinho na web. Ex.: menu de aplicativos como “Exibir”. Público-alvo: indicado quando se deseja personalizar o conteúdo para cada público -alvo. Ex.: lojas de departamento. Metafórico: indicado a orientar o usuário em algo novo com base em algo familiar. Ex.: indicar o compartilhamento em um aplicativo mobile usando princípio de compartilhamento que ele já conheça no desktop. Disponível em: . Acesso em: nov. 2017.

capítulo 1 •

22

2.

Sistemas de navegação

Figura 1.8 – Três questões básicas ao navegar. Imagem produzida pelo autor a partir do portal da Estácio.

Sistemas de navegação especificam as maneiras de navegar, de se mover pelo espaço informacional e hipertextual. Especificam formas de o usuário se mover no espaço informacional. odo sistema de navegação de um ambiente digital tem duas funções básicas: Indicar ao usuário a sua localização; Mostrar o caminho correto que precisa seguir para chegar ao seu destino. •

•

Existem questões fundamentais que o sistema precisa responder a todo instante para o usuário: “Onde estou?” “Onde estive?” “Aonde posso ir?” “Como posso voltar para onde eu estava?” “Estou no lugar certo?” “Nesse ambiente digital tem o que estou procurando?” “Nesse ambiente digital há alguma coisa melhor?” •

•

•

•

•

•

•

Os professores Janicy Rocha e Cláudio Diniz Alves indicam princípios básicos para uma navegação de qualidade, todos tirados da obra referencial  Information architecture for the world wide web, de Rosenfeld e Morville (2006). Confira na adaptação a seguir:

capítulo 1 •

23

1.

Fácil de aprender: o sistema de navegação precisa ser fácil de aprender porque se os usuários perderem muito tempo para entender como utilizá-lo vão abandonar o site. 2.

Ser consistente: os usuários, após compreenderem como o sistema de navega-

ção funciona, passam a confiar nele. Um sistema consistente permite que o usuário tenha previsibilidade sobre como será a resposta do sistema antes de executar a ação. 3. Prover feedback : o usuário espera que o sistema reaja a cada ação que executar sobre a sua interface porque é através dessas reações que o usuário consegue avaliar se o sistema executou a ação com sucesso. 4. Apresentação de diferentes formas conforme o contexto: para decidir seus movimentos, o usuário precisa ver as possíveis rotas. Ser contextualizado é apresentar para o usuário as rotas que lhe interessam conforme o ponto em que se encontra no sistema. 5. Oferecer alternativas:  usuários diferentes possuem diferentes estratégias de navegação. O sistema de navegação precisa ser capaz de atender a esses diferentes comportamentos. 6. Economizar ações e tempo de utilização:  navegações longas causam frustração no usuário. Por isso, o sistema de navegação precisa sempre manter as rotas curtas e oferecer atalhos, especialmente para usuários experientes. 7. Apresentar mensagens visuais claras e no momento adequado: o sistema de navegação precisa ter um visual claro e que guie o usuário em detrimento da estética. 8. Possuir rótulos (nomes) compreensíveis:  o sistema de navegação precisa usar nomes claros, sem ambiguidade, na linguagem do usuário e consistentes com as informações apresentadas. Ex.: o rótulo inscreva-se da imagem do site da Estácio. 9. Estar em sintonia com o propósito do ambiente digital:   a abordagem do sistema de navegação depende muito dos objetivos do website e das experiências do usuário, assim o sistema de navegação deve auxiliar o usuário a seguir esses objetivos. 10. Suportar os comportamentos do usuário:  o sistema de navegação precisa auxiliar os usuários a executarem suas tarefas da forma que estão acostumados a fazê-las. Disponível em: . Acesso em: nov. 2017.

CONCEITO Navegação por hiperlinks e navegação social

Entendidos tais passos iniciais da navegação, o que pode ser resumido pela expressão “o importante é ser flexível”, cabe pensar nos caminhos abertos ao usuário pelos hipertextos e links sociais. A primeira informação sobre o hipertexto é que não há limite para ele, cabendo nesse caso apenas o bom senso para não confundir ou irritar o usuário. Ou seja, cada página pode ter links apontandos para quantas e quais outras páginas se desejar, mas esse desejo

capítulo 1 •

24

é limitado. Ferramenta flexível, o hipertexto dá a liberdade para o gestor do ambiente digital montar as estruturas de organização e os sistemas de navegação que desejar. Nosso usuário, ao se deparar com uma nova página, percorre os olhos por todos os links existentes tentando encontrar o que melhor atende sua intenção. Esse olhar percorre um movimento em F, ou seja, segue primeiramente pela horizontal superior, depois em uma horizontal logo abaixo e por fim desce em uma vertical (PINHO, 2003). Se uma quantidade excessiva de links é apresentada, o esforço cognitivo para encontrar o link correto é maior, aumentando a probabilidade de confusão. Há ainda a chamada navegação social, que consiste em apresentar para um usuário o que outros usuários, com os mesmos interesses, encontraram ao navegar pelo ambiente digital. Para entender esse conceito, basta entrar no site da Amazon. Lá, cada página que detalha um produto possui uma lista de links  chamada Customers Who bought this also bought (“Clientes que compraram isto também compraram”) na qual são apresentados produtos que interessaram a outros usuários. Estima-se que cerca de 10% dos pedidos feitos a Amazon vêm dessas sugestões de links.

Figura 1.9 – Customers who bought this also bought  (“Clientes que compraram isto também compraram”). Disponível em: . Acesso em: 16 jul. 2017.

capítulo 1 •

25

SAIBA MAIS Elementos da navegação

Cabe ainda destacar os chamados elementos da navegação, uns velhos conhecidos seus e outros nem tanto. São eles logotipo (identifica o website e deve estar em todas as páginas para o usuário saber onde está), barra de navegação global (contém a sequência de links para as áreas chaves do website), menu local (mostra links para páginas que estão próximas na estrutura do website) e breadcrumb (miolo) (lista de links separados por algum caractere, como “>”, ou algum elemento gráfico, como uma seta. Informa o usuário onde ele se encontra na estrutura do website).

Figura 1.10 – Breadcrumb  com links  de localizações, separados por >. Disponível em: . Acesso em 15 jul. 2017.

Há ainda outros elementos menos conhecidos. No grupo estão crosscontent (lista de links  relacionados ao conteúdo da página atual), mapa do site  (apresenta toda a estrutura do website   e permite acesso direto a qualquer página) índice remissivo (listas de palavras chaves, em ordem alfabética, relacionadas ao conteúdo do website ) e nuvem de tags ou nuvem de etiquetas (representação visual de tags geradas pelos usuários).

capítulo 1 •

26

3. Sistemas de Rotulação

Esse penúltimo sistema da AI, bem como o último, serão mais detalhados em outras partes deste livro. Neste momento, o que você deve ter em mente é como esses sistemas (Rotulação e Buscas) se relacionam como os anteriores (Organização e Navegação). Vejamos, então o Sistema de Rotulação. al sistema estabelece as formas de apresentação da informação, definindo termos para cada elemento informativo que se quer destacar (REIS, 2007). ais termos podem ser verbais (terminologia) ou visuais (icônicos), dando suporte à navegação do usuário (AGNER, 2007). Devido à riqueza da língua, caracterizada pelas diferentes interpretações que cada palavra tem e pelas diversas palavras que podem traduzir o mesmo conceito, construir o sistema de rotulação é provavelmente a tarefa mais difícil em um pro jeto de AI. Ex.: mexerica, bergamota, vergamota, tangerina. Um rótulo ou termo (em inglês utiliza-se a palavra label ) é um símbolo linguístico utilizado para representar um conceito. O objetivo de um rótulo é comunicar o conceito eficientemente, ou seja, comunicar o conceito sem ocupar muito espaço na página e sem demandar muito esforço do usuário para compreendê-lo (REIS , 2007).

Figura 1.11 – RedLabel , ou Rótulo Vermelho: identificação imediata. Disponível em:
capítulo 1 •

27

oda rotulação apresenta alguns desafios para quem fica responsável por desenvolvê-la, afinal, nosso idioma é complexo e o uso dele depende de um usuário para outro. Saber o termo mais facilmente identificado por nosso usuário é uma tarefa complexa que deve levar em consideração: 9  Ambiguidades: s martphone ou celular? Uma saída é criar categorias exclusivas ou duplicar links com um mesmo conteúdo para cada um dos termos; 9 Falar a linguagem do usuário:   tais como gírias, linguagem técnica e estrangeirismo; 9  Ausência de feedback : específico sobre a AI – isso mesmo, o usuário não se relaciona diretamente com a AI, mas com o site via buscas e e-mail. Quase nunca em tempo real. Por isso, teste a rotulação antes, durante e depois para fazer correções.

ATENÇÃO Mantenha a consistência de seu site, ou seja:

Começou escrevendo em caixa-alta, continue; Está usando cores, estude sobre o tema e não misture muitos tons; Tempos verbais, gêneros e demais concordâncias verbais e nominais devem ser respeitadas; Se você escreveu restaurantes (termo abrangente) em seu rótulo, escreva ao lado cantinas e não cantinas italianas (termos mais estreito); Seja completo. Seus rótulos têm “calças”, “gravatas” e “sapatos”, inclua camisas porque se não incluir, o usuário vai sentir falta. Pense em seu usuário e nos termos que ele usa. Não misture audiências. Usou termo científico? Não escreva um rótulo com termos populares; Padronize: Main, Main Page, Home, Home Page , Página Inicial trazem a mesma informação. O mesmo ocorre em Search, Find, Busca, Buscar e afins. •

•

•

•

•

•

Ícones como rótulos São mais complexos do que rótulos textuais porque constituem uma linguagem muito mais limitada que os textos. Ícones são usados tipicamente nos sistemas de navegação ou em sistemas de organização pequenos porque a lista de opções é reduzida.

capítulo 1 •

28

   M    O    C  .    Y    A    B    A    X    I    P    ©

Figura 1.12 – Ícones de navegação.

Ícones são facilmente reconhecidos pelos usuários, porém são menos precisos e claros. O ícone é ambíguo enquanto o usuário não aprende seu significado, mas uma vez aprendido, ele não o esquece facilmente e seu reconhecimento é mais rápido. Por isso são indicados para usuários frequentes. 4. Sistemas de Buscas

Determina as perguntas que o usuário pode fazer e o conjunto de respostas que vai obter ao executar uma query   (consulta) no banco de dados (AGNER, 2007). Determina as perguntas que o usuário pode fazer e o conjunto de respostas que pode obter (REIS, 2007).

Conceitos básicos da busca  A partir de Morville e Rosenfeld (2006), autores de L. Information architecture  for the world wide web, pode-se afirmar que  A busca da informação não é feita em um único passo, a não ser a busca por um item conhecido; O usuário busca uma informação, aprende com o resultado e refina sua busca; Normalmente é difícil para o usuário encontrar tudo que necessita em uma única vez porque ele não conhece o suficiente sobre o tópico para fazer a pergunta certa; Quando estão buscando uma informação, os usuários alternam entre a navegação nos menus e a ferramenta de busca. •

•

•

•

Quando implementar? •

•

Websites com grande volume de informação; Websites com conteúdo muito dinâmico e com grande histórico, como jor-

nais, para substituir o sistema de navegação; Websites formados por vários subsites. •

capítulo 1 •

29

Quando não implementar? Quando o website  tiver pouco volume de conteúdo; Para compensar um sistema de navegação ruim; Quando não houver expertise para configurar a ferramenta de busca. Essas ferramentas são relativamente fáceis de implementar, mas difíceis de configurar para funcionarem de forma efetiva. •

•

•

Os tipos de busca podem variar Na busca de passagens aéreas, por exemplo, o usuário indica o voo, os locais de origem e destino, as datas de partida e retorno, se a viagem é de ida e volta e a quantidade de passageiros. •

Figura 1.13 – Busca por passagens aéreas: datas, destino, retorno, horário do voo etc. Disponível em: . Acesso em: 16 jul. 2017.

capítulo 1 •

30

Faça uma caixa de busca grande  A maioria dos mecanismos de busca apresenta resultados mais precisos e relevantes quando são digitadas mais palavras e caixas de busca grande estimulam o usuário a digitar mais.

Facilite a digitação de palavras-chave Utilize campos de opções ou com sugestão de palavras-chave porque isso evita erros de digitação e ortografia.

A página de resultados Os usuários fazem múltiplas interações quando utilizam o mecanismo de busca. Por isso a página de resultados é projetada para atender a duas funções básicas: 1.  Apresentar os itens encontrados na busca; 2. Facilitar para que o usuário faça uma nova busca.

Caixa de busca com os parâmetros editáveis Funciona como feedback , informando quantidade de itens, o que foi buscado e facilita realização de uma nova busca.

Organização dos resultados da busca  A lista de resultados deve estar ordenada e/ou agrupada por algum critério, tal como cronológico, para que o usuário encontre a informação que deseja mais rapidamente.

Avise claramente que a busca não teve sucesso orne simples ao usuário refazer a busca.

capítulo 1 •

31

Analise as palavras digitadas pelos usuários na busca É uma forma de otimizar o mecanismo de busca. Com essa análise, é possível identificar quais termos os usuários usam, erros de ortografia mais comuns e quais conteúdos os usuários procuram no website .

SEO (Search Engine Optimization)  A Otimização de Sistemas de Busca é um conjunto de técnicas usadas para melhorar o posicionamento de um website   na listagem de resultados dos websites de busca (Google, Yahoo, Altavista etc.). Uma vez que os websites de busca são amplamente utilizados pelos internautas, essas técnicas têm a função de aumentar o tráfego para o website  com o custo baixo e fazem parte das técnicas do marketing em sites de busca (search engine marketing ). Ressalva-se, entretanto, de que esses sistemas são difíceis de serem reconhecidos individualmente devido à grande interdependência. ambém vão variar quanto aos indexadores, preferências de reconhecimento e afins, que dependerão dos objetivos do website .

MULTIMÍDIA A seguir, temos um link para você navegar sobre dicas de indexadores. Ainda neste livro vamos voltar a esse tema, mas vale navegar por este link  e fazer um spoiler  na futura abordagem no tema, assunto do próximo capítulo. Disponível em: . Acesso em: 16 jul. 2017.

SAIBA MAIS Leia em: O artigo que avalia a arquitetura de informação de um site institucional. O artigo traz uma interessante revisão bibliográfica sobre as áreas de Interação Humano-Computador e Arquitetura de Informação, focando nos sistemas que vimos neste nosso capítulo.

capítulo 1 •

32

ATIVIDADES Nesta parte do livro você vai encontrar questões sobre AI aplicadas em concursos públicos. Elas servem para você ficar sabendo como nosso conteúdo é cobrado pelas bancas organizadoras das seleções e, ao mesmo tempo, avaliar seu aprendizado. 01. Conceituação Ano: 2012 / Banca: ESAF / Órgão: CGU

À prática que combina a aplicação de esquemas de navegação, organização, rotulagem e busca com o objetivo de facilitar as tarefas do usuário e o acesso intuitivo aos conteúdos dá-se o nome de: a) Usabilidade. d) Arquitetura de informação. b) Webdesign. e) Fapattern. c) Cardsorting. 02. Conceituação Ano: 2011 / Banca: FCC / Órgão: INFRAERO

Para Mike Ward (Jornalismo Online) a primeira providência para o desenvolvimento de um site é buscar um projeto visual, no qual vários outros aspectos são construídos – forma, função, códigos, navegação e interface, interação/interatividade e design visual. Esse processo deve se iniciar: a) pelo provedor de acesso d) pelo hiperlink . b) pelo firewall. e) pela arquitetura da informação. c) pelo browser. 03. Interpretação Ano 2009 / Banca: FCC / Órgão: TRT – 4a região (RS)

A seguir, temos o trecho de um texto informativo sobre uma escola que forma mão de obra especializada para Websites:  ______________ é a organização do fluxo de informação visando torná-la útil e inteligível. Trata-se de planejamento e mapeamento visual (wireframe) e contextual do  _________________ de um sistema, seja ele qual for, tornando as informações identificáveis, assimiláveis e claras. Refere-se também ao desenho de uma interface, incluindo todos seus fluxos de navegação e estruturação de conteúdo. O objetivo final é assegurar a facilidade de utilização e _________________ de um site e/ou sistema.

capítulo 1 •

33

a) b) c) d) e)

Os termos que completam corretamente o texto são, respectivamente, Arquitetura de informação / fluxograma de usabilidade / navegabilidade. Sistema de informação / fluxograma de navegação / usabilidade. Arquitetura de informação / processo de navegação / inteligibilidade. Sistema de informação / fluxograma de usabilidade / navegabilidade. Arquitetura de informação / fluxograma de navegação / usabilidade.

04. Interpretação de imagem/fluxograma Ano: 2016 / Banca: INSTITUTO AOCP / Órgão: EBSERH

A imagem a seguir representa uma das etapas da produção de um site de uma empresa. Assinale a alternativa que representa essa etapa. SITE TESTE

HOME

QUEM SOMOS

PRODUTOS

SERVIÇOS

EMPRESA

PRODUTO 1

PRODUTO 2.1

CONTATO

PRODUTO 2

Disponível em: . Acesso em: nov. 2017. a) Arquitetura da Informação b) Layout do site c) Arte final

d) Processo de recepção e) Jornalismo digital

05. Conceituação Ano: 2008 / Banca: CESPE / Órgão: HEMOBRÁS

Arquitetura de informação e usabilidade são temas divergentes e não se relacionam. a) Certo b) Errado

capítulo 1 •

34

REFERÊNCIAS BIBLIOGRÁFICAS AGNER, Luiz. Ergodesign e Arquitetura de Informação: trabalhando com o usuário. Rio de Janeiro: Quartet, 2006. JERKOVIC, J. I. Guerreiro SEO: técnicas essenciais para aumentar a visibilidade na web. São Paulo: Novatec Editora, 2010. 512p. KALBACH, J. Design de Navegação Web: otimizando a experiência do usuário. Tradução de Eduardo Kessler Piveta. Porto Alegre: Bookman, 2009. 430p. MORAES, A. Arquitetura de Informação e Governo Eletrônico: Diálogo Cidadãos-Estado na World Wide Web – Estudo de Caso e Avaliação Ergonômica de Usabilidade de Interfaces HumanoComputador. Rio de Janeiro, 2007. 354p. Tese (Doutorado em Design) – Departamento de Artes e Design, Pontifícia Universidade Católica do Rio de Janeiro. MORVILLE, P.; ROSENFELD, L. Information architecture for the world wide web.  3. ed. Sebastopol: O’Really, 2006. PINHO, J. B. Relações Públicas na Internet : técnicas e estratégias para informar e influenciar públicos de interesse. São Paulo: Summus, 2003. REIS, G. A. Centrando a Arquitetura de Informação no usuário. São Paulo: Universidade de São Paulo – USP. Escola de Comunicação e Artes. SP, 2007. Dissertação (Mestrado em Ciência da Informação) 250p. RESMINI, A. & ROSATI, L. (2011). Uma Breve História da Arquitetura da Informação. Revista de Arquitetura da Informação. v. 3, n. 2. Disponível em:
Resmini . Acessos em: nov. 2017. WURMAN, Richard Saul. Information Architects . Zurich, Schweiz: Gingko Press, 1997, 240 p. Disponível em: . Acesso em :15 jul. 2017.

capítulo 1 •

35

capítulo 1 •

36

2 Conceitos centrais para AI

Conceitos centrais para AI Você notou que no capítulo anterior nós falamos dos Sistemas de Buscas e de SEO (Search Engine Optimization), ou seja, da otimização desses Sistemas de Busca. Como esses dois conceitos são centrais, eles serão esmiuçados nesta parte de nosso livro didático e aqui você aprender o complexo e interessante universo dos algoritmos, uma espécie de receita culinária da programação da web. Ou seja, o que está por trás dos passos (interações) e das decisões (tais como comparações ou lógica) que nos leva a completar uma tarefa, como uma busca em um site . Neste capítulo vamos ainda avançar e aumentar nossa segurança quando formos tratar dos termos, hoje habituais de todos nós, tais como hipertexto e  link. Vamos também enveredar pelos conceitos janela da web e interface , outros dois velhos conhecidos que, a essa altura da sua formação, vão exigir de você conhecimentos acima do senso comum.  Janela, link , interface   e nuvem são, portanto, termos que indicam conceitos complexos quando pensamos na nossa vida na  web. Esses termos são ainda mais interessantes quando os investigamos a fundo. Esse mergulho na Arquitetura da Informação é o convite que fazemos agora. Boa leitura!

OBJETIVOS Detalhar o funcionamento e os princípios dos Sistemas de buscas e SEO (Search Engine Optimazation); Vamos entender os fundamentos principais dos conceitos hipertexto,link , janela da web e interface. •

•

capítulo 2 •

38

Mãos à obra: Sistemas de buscas Uma edição do The New York Times em um dia de semana contém mais informação do que o comum dos mortais poderia receber durante toda a vida na Inglaterra do século XVII. Richard Saul Wurman,design norte-americano considerado um dos pais da AI *AI4

Nesse oceano informacional sobre o qual estamos mergulhados, nós não conseguiríamos nada sem a ajuda dos Sistemas de Busca na  web. Essa lógica é inconteste e a confirmamos cada vez que acessamos um buscador, como a página do Google , digitamos o que procuramos e em seguida navegamos por links   e mais links  hierarquizados por categorias, como relevância, idioma, país e afins. Sim, vai haver sempre quem diga, com certo exagero, que não somos nada  sem o sistema de buscas.

ATIVIDADE O finzinho do capítulo anterior traz algumas informações elementares sobre esse tal sistema. Você conseguiria resumir em um parágrafo o que leu? Tente!

O que mais se deve saber sobre o Sistema de Buscas? Neste exercício anterior segue uma primeira lição: todo o sistema de buscas deve priorizar o que você fez no resumo, ou seja, identificar palavras-chave, termos cheios de significação e nomenclaturas facilmente memorizáveis por todas as pessoas. São esses “nomes” (essas palavras/termos/nomenclaturas) que o sistema de buscas deverá ter em “mente” para atender ao pedido do usuário buscador. Essa dica parece óbvia, sabemos, mas ela é um ponto solar no Sistema de Buscas. Mas resta outra dúvida central: afinal, como funciona esse sistema? Vamos entender esse funcionamento a partir de um tutorial em linguagem bem simples disponibilizado pelo Google  (líder dos buscadores no Brasil, detendo 67,3% do mercado, bem acima do segundo colocado, o Bing, com apenas 15,6%, 4 Disponível em: . Acesso em: 18 jul. 2017.

capítulo 2 •

39

de acordo com dados de 20165 ). Vamos aproveitar o que dizem e levar essa lógica para o website comum de conteúdo diverso (como jornal), de conteúdo comercial (como uma loja de roupas), e de conteúdo de serviços (como uma empresa que vende passagens de ônibus). Vamos lá!

Figura 2.1 – Página inicial do Google. Disponível em: . Reprodução de tela. Acesso em: 19 jul. 2017

Eles do Google  começam logo com uma primeira resposta para nossa dúvida: “Como funciona a pesquisa”? Para uma consulta típica, existem milhares, até milhões, de páginas da web com informações potencialmente relevantes. Então, como o Google descobre o que mostrar nos resultados da pesquisa? Bem, a viagem começa antes mesmo de digitar sua pesquisa. Antes de pesquisar, os rastreadores da web coletam informações de centenas de bilhões de páginas da web e organizam no índice de pesquisa. A web é como uma biblioteca cada vez maior com bilhões de livros e nenhum sistema central de arquivamento. Utilizamos o software conhecido como rastreadores web para descobrir páginas da web publicamente disponíveis. Os Crawlers visualizam páginas da web e seguem links nessas páginas, como você faria se você estivesse navegando no conteúdo da web. Eles vão de link a link  e trazem os dados sobre essas páginas para os servidores do Google. Disponível em: . Acesso em: 19 jul. 2017. *crawlers6

5 Disponível em: . Acesso em: 18 jul. 2017. 6 Crawlers? Sim, seguidores de rastros deixados na web, ou simplesmente rastreadores.

capítulo 2 •

40

Derivando essa informação para nossos websites comuns, pense que um leitor/ cliente/passageiro, agora chamado aqui de usuário, quando faz a consulta procura algo que pode estar no meio de uma reportagem antiga, um artigo fora da promoção ou de linha ou uma passagem aérea para uma viagem de férias em dezembro, mesmo com a consulta sendo feita em abril. Ou seja, é necessário um bom rastreador do conteúdo armazenado em seu site. O Google  continua: O processo de rastreamento começa com uma lista de endereços da web de rastreamentos passados e sitemaps fornecidos pelos proprietários do site. À medida que rastreadores visitam esses sites, eles usam links nesses sites para descobrir outras páginas. O software presta atenção especial a novos sites, mudanças em sites existentes e links mortos. Os programas de computador determinam quais sites rastrear, com que frequência e quantas páginas devem ser obtidas em cada site. Disponível em: . Acesso em: 19 jul. 2017.

O mesmo princípio devemos pensar para atender ao pedido de busca feito pelo usuário de nosso site . Como arquitetos da informação, devemos conversar com os webmasters 7 de nosso site   sobre o que processar na página em nosso site, de modo a prever recrawls (mais de um rastreamento) ou até mesmo desativar o rastreamento para áreas e conteúdos que nós decidimos que não devem aparecer nas buscas. O passo seguinte é organizar informações encontradas por indexação. O Google explica que quando os rastreadores encontram uma página da web, sistemas renderizam8 o conteúdo da página. Toma-se “nota” dos sinais-chave (das palavraschave aos sinais de atualização do site ) e constrói-se um índice de pesquisa 9 . O mesmo índice deve ser montado pelo seu site . Claro que esse índice de pesquisa é imenso, mesmo para um site   de menor porte. E nosso usuário não quer receber todo o índice. Ele quer resultados úteis e relevantes em uma fração 7 O webmaster é um profissional capaz de gerenciar as tarefas tanto de um Web developer que faz a parte da programação, como sistemas de login, cadastro, área administrativa) quanto de um webdesigner (elaboração do projeto estético e funcional de um website). 8 Renderização é o processo pelo qual se obtém o produto final de um processamento digital qualquer, sendo muito usado quando falamos em edição de vídeos, como você pode ver em: . Acesso em 19 jul. 2017. 9 O índice Google Search contém centenas de bilhões de páginas da web e possui mais de 100.000.000 gigabytes de tamanho. É como o índice na parte de trás de um livro – com uma entrada para cada palavra vista em cada página da web que indexamos. Quando indexamos uma página da web, nós a adicionamos às entradas para todas as palavras que ela contém,. Disponível em: . Acesso em 19 jul. 2017, em tradução livre do autor.

capítulo 2 •

41

de segundo. O mesmo ocorre quando você faz uma pesquisa no Google. Lá “sistemas classificam as centenas de bilhões de páginas da web no índice de pesquisa (...) esses sistemas de classificação são constituídos por uma série de algoritmos que analisam o que está sendo procurando e quais informações retornam para o usuário”. (Idem) Por dentro do sistema de buscas no pensamento dos webmasters.

   M    O    C  .    S    O    T    O    H    P    E    E    R    F    D    O    O    G    ©

Figura 2.2 – Webmaster tools.

Um webmaster   vai pensar logo no motor de busca 10 do site   que você, arquiteto da informação, está organizando. Esse motor associa termos que os usuários digitam numa janela de texto a um índice (como o citado), apresentando assim sumários de conteúdo numa página de resultados (ou SERP – Search Engine Results Page).

De acordo com Chaffey (2006), tal motor tem três componentes: o crawler  (ou spider , o tal rastrerador), o índice (a base de dados massiva criada pelo crawler ) e o sistema chamado runtime   (que faz a ligação entre a consulta e o software  de busca, tornando os dados que estão no índice inteligíveis para o usuário, chamado pelos webmasters  de “utilizador do motor de busca”). No gráfico feito por Chaffey (2006), essa informação fica assim:

10 Ver mais: Como funciona um motor de busca em: Disponível em: . Acesso em: 19 jul. 2017.

capítulo 2 •

42

Spider ou robot do motor de busca

O spider visita regularmente o site

O spider segue os links num site

Vôos Bilhetes Linha aérea Low cost Nova Iorque Londres Paris

Página A, B Página B Página A, B, C Página A Página D Página E Página F

O índice é criado com base num sistema de classificação proprietário

Indexação

O utilizador do motor de busca digita keywords e as melhores semelhanças são apresentadas

O spider cria uma lista de keywords e da localização das páginas

Principal base de dados do motor de busca actualizada

Motor de busca

Figura 2.3 – O motor de busca. Esquema do funcionamento de um motor de busca. Chaffey, (2006 p. 378).

Nós, de AI, temos que pensar além do motor de busca. Temos, Temos, como dissemos no capítulo anterior, que pensar em atender a expectativa do usuário. Um bom motor dará rapidamente e adequadamente a reposta. Mas, o que mais deve ser ledi z Morville e Rosenfeld (2006), os autores au tores  vado em consideração? Vamos ao que diz do chamado livro do urso polar citado no primeiro capítulo. É fácil encontrar a busca e ela está bem posicionada ? É fácil de usá-la? (Uma simples caixa de busca com um botão é normalmente su-

ficiente e geralmente é a primeira coisa que o usuário procura quando deseja fazer uma busca.) Permite que o usuário refaça ou refine sua busca? Os construtores de query são usados eficazmente? (Os construtores de query  (da consulta) incluem o corretor ortográfico, a pesquisa de radicais, a busca por conceito e a busca em outras formas de indexação?)

capítulo 2 •

43

E quanto aos resultados  da busca? Os relevantes estão no topo  da lista? Quais foram os parâmetros usados na busca?   (Muitos mecanismos de busca

repetem as palavras-chave e os parâmetros digitados.) Está claro o que foi buscado? (Isso é especialmente importante quando existem várias áreas de busca.) Está claro quantos resultados foram encontrados? As informações apresentadas para cada usuário são úteis? (Deve existir informa-

ção suficiente para distinguir os resultados.) Os resultados estão agrupados de uma forma útil e clara? (MORVILLE e ROSENFELD, 2006)

Bem, estes parâmetros listados anteriormente são os que você deve ter em mente quando for discutir internamente o sistema de buscas do site no qual você vai usar seus conhecimentos de AI. Mas o que mais você precisa sobre esse tema?  Além do Google ; Cadê, Aonde, AltaVista e outros fizeram história...

Figura 2.4 – Os buscadores. bu scadores. Histórico dos buscadores. Disponível em: . Acesso em: 15 jul. 2017.

capítulo 2 •

44

 Artigo escrito pelo jornalista João Kurtz, para para o site TechTudo, echTudo, traz interessante reflexão sobre esse tema. A partir desse artigo, listamos o que você precisa saber dos buscadores. Kurtz lembra que até o surgimento do líder Google , em 1998, a competição neste mercado de buscadores era acirrada e incluía vários sites , sendo que muitos deles não aguentaram a concorrência e já não existem mais. Quais são ou eram? Fiquemos com a relação apontada por Kurtz. O importante neste conhecimento é você navegar ou entender a interface desses buscadores para usar sua criatividade e esse conhecimento ao bolar os buscadores da plataforma onde você usará seu saber de AI ou pensar links úteis para além do Google .

Cadê? Criado em 1995, o Cadê? é considerado o primeiro buscador brasileiro. O site se caracterizava por ser uma espécie de repositório de páginas, pois todas as suas entradas eram feitas manualmente e conferidas por uma equipe. Em 2002, o serviço foi vendido para o Yahoo e até hoje sua página principal redireciona para o site do Yahoo  Yahoo Search.

Altavista É outro site   que fez parte dos primeiros buscadores da Internet brasileira. Criado em 1994, o Altavista competiu no Brasil com o Cadê? e se diferenciava do rival por usar robôs para identificar sites  e  e catalogá-los, a mesma tecnologia usada posteriormente pelo Google . O serviço e o domínio também foram comprados pelo Yahoo e encerrados em 2013.

Aonde O Aonde foi muito usado antes do surgimento do Google . Criado em 1996, continua ativo hoje, sem ter sido vendido a nenhuma empresa maior. Além de buscas, a plataforma também vende outros produtos relacionados à internet, como templates para  websites   websites .

capítulo 2 •

45

Cuil  O Cuil foi inaugurado em 2008, mas teve vida curta. O buscador foi criado pelos ex-funcionários do Google   Anna Patterson e Russel Power, tentou se diferenciar do concorrente por trazer ícones dos  sites   pesquisados. Além disso, o site alegava ter o maior banco de dados de qualquer página de busca, com mais de 120 bilhões de entradas. Apesar de ter atraído muito investimento, o Cuil foi encerrado em 2010 e, na época, detinha apenas 0,2% do mercado de buscas. Yandex  Buscador russo, foi criado pelos programadores Arkady Volozh e Arkady Borkovsky em 1997 e logo se tornou um dos sites  mais usados naquele país, com uma fatia do mercado maior que a do próprio Google   na Rússia. Atualmente, a plataforma conta com vários serviços diferentes, como métricas, armazenamento na nuvem, mapas e um navegador próprio.

Figura 2.5 – Site russo Yandex fornece recursos como e-mail   e mapas. Reprodução da Web/Yandex . Acesso em: 10 set. 2017

Baidu É a alternativa chinesa ao Google  e o site  mais usado naquele país. A plataforma foi lançada em 2000 e segue o modelo de negócios da gigante de buscas, diversificando seus serviços com outros recursos, que incluem armazenamento na nuvem, mapas e outros conteúdos. Com o passar do tempo, o Baidu expandiu seu alcance para outras partes do mundo, inclusive no Brasil, onde o site possui uma versão de seu buscador totalmente em português.

capítulo 2 •

46

 Ask.com Conhecido originalmente como  AskJeeves , o  Ask.com não é necessariamente um mecanismo de busca e sim um serviço com um objetivo mais definido: responder a perguntas específicas dos usuários. A plataforma surgiu em 1999. Continua funcionando até hoje e chegou a contar com um sistema de buscas, que foi abandonado em 2010 por que não conseguia competir com o Google .

Figura 2.6 – Site Ask   abandonou sistema de busca para não competir com o Google. Reprodução Internet/ Ask . Acesso em: 10 set. 2017.

Sapo O sistema de buscas português Sapo foi criado em 1995 pela Universidade de  Aveiro (Portugal), e se tornou popular no Brasil nos anos seguintes como alternativa de busca ao Cadê?. Com o tempo, o serviço do site   foi expandido, com a adição de novos recursos, como e-mail. Atualmente, o Sapo se converteu em um provedor de internet  e expandiu seus negócios para outros países de língua portuguesa, como o Timor-Leste. Lycos Criado como um projeto de pesquisa pelo programador Michael Loren Mauldin, na Universidade de Carnegie Mellon (Pensilvânia/EUA) em 1994, o sistema de buscas Lycos foi um dos mais usados no final da década de 1990 e também a primeira empresa com base na  internet  a se tornar rentável. Foi vendido ao Terra em 2000 e, desde então, foi revendido para outras empresas, sendo atualmente possuído pelo indiano Ybrant Digital .

capítulo 2 •

47

Yahoo Um dos maiores concorrentes do Google , o Yahoo foi fundado em 1994 pelos engenheiros Jerry Yang e David Filo. Ao contrário de outros mecanismos da época, o objetivo do site   era ser um diretório de websites   organizados em tópicos. O site se expandiu como um portal da web, agregando serviços como notícias, Yahoo Respostas, Yahoo Grupos, e Yahoo Mail. MSN Search  A alternativa da Microsoft   para o mercado de buscas surgiu em 1999 e usava o banco de dados do Altavista antes de ter o seu próprio. Com o passar do tempo, o serviço passou por diversas reformulações, inclusive trocando de nome para Windows Live Search e, em seguida, Live Search. O site passaria por uma última transformação e, a partir de 2009, passou a se chamar Bing , que atualmente é o segundo sistema de buscas mais usados do mundo.

Figura 2.7 – Site Bing , atrás apenas do Google. Reprodução Internet/Bing. Acesso em: 10 set. 2017.

SAIBA MAIS Os chamados ovos de Páscoa do  Google

Nem tão relevante quanto o artigo escrito pelo jornalista João Kurtz, para osite TechTudo com o histórico dos buscadores, há ainda uma série de curiosidades sobre o buscador Google, entre elas jogar paciência e jogo da velha on-line. “Está a fim de jogar Paciência no PC? Digite ‘solitaire’

capítulo 2 •

48

no Google e jogue o popular game de cartas diretamente do navegador”, conta o jornalista Lucas Carvalho, do site Olhar Digital. “O mesmo vale se você quiser jogar uma partida do famoso ‘jogo da velha’. Basta pesquisar por esse exato termo no Google”, completa Lucas Carvalho no artigo, que pode ser lido na íntegra em: . Acesso em 19 jul. 2017.

Como o Google se sustenta? Mais relevante que o conjunto de curiosidades listados acima no link , está o funcionamento dos chamados leilões de anúncios feitos pelo Google  para seus patrocinadores. O funcionamento deles é disponibilizado pelo próprio Google no link: . Nesse link, o Google explica: O leilão de anúncios é usado para selecionar os anúncios que serão exibidos em suas páginas e determinar quanto você ganhará com esses anúncios. Em um leilão tradicional, os proponentes interessados definem o preço máximo que desejam pagar para comprar um item específico. De maneira semelhante, com nosso leilão de anúncios, os anunciantes podem definir o preço que desejam pagar pelos cliques nos anúncios ou pelas impressões veiculadas nas páginas do Google AdSense. Disponível em: . Acesso em 10 set. 2017.

Em 2009 essa explicação foi postada em vídeo, ainda disponível em 2017. No link  e no vídeo (que podem não estar disponíveis agora), há explicações que ajudam a você entender um conceito relevante para seu website  e para AI, a monetização, ou seja, o aproveitamento do site  e seus serviços (incluindo buscas) como fonte de lucro.

Figura 2.8 – Leilão do Google. Youtube, link   disponível em: . Acesso em: nov. 2017. capítulo 2 •

49

SAIBA MAIS Para navegar mais e mais nas entranhas divulgadas publicamente pelo Google, digite Hal Varian, no  Youtube. Em mais de 7 mil vídeos (busca feita em 10 set. 2017), o economistachefe do Google e professor emérito na Universidade da Califórnia, em Berkeley, EUA, fala da monetização e de outras intimidades do buscador líder. Para entender a grande maioria desses vídeos, é necessário saber inglês, mas vale a pena o esforço.

SEO (Search Engine Optimization )  Assunto que também que tratamos de forma muito breve no capítulo anterior, a Otimização dos Sistemas de Busca (SEO), o conjunto de técnicas usadas para melhorar o posicionamento de um website   na listagem de resultados dos websites  de busca, como o Google, também será aprofundado agora. Nove a cada 10 pessoas que fazem pesquisas no Google clicam apenas em resultados que aparecem na primeira página do mecanismo. Disponível em: . Acesso em: 19 jul. 2017.

Como o objetivo do SEO é aumentar o volume do tráfego orgânico e garantir mais visibilidade para as páginas na web, o que devemos levar em consideração? Para tanto, vamos nos apoiar nos estudos do professor Killoran (2013) e em compilação da equipe do site Marketing  de Conteúdo/Rock Content (link: ), cuja linguagem direta ajuda a compreender tema tão complexo.

A psicologia da busca e os três tipos de busca  A psicologia da busca está focada na experiência do usuário (UX para gente) e suas necessidades por respostas às suas buscas para suprir um desejo específico. Atender a esse desejo é o que devemos ter em mente na hora de bolar nosso sistema de buscas. É assim que, por exemplo, o Google trabalha e tem alcançado sucesso. Para atingir esse alvo é necessário desvendar a intenção de busca de nosso usuário, o que pode ser dividida em três tipos:

capítulo 2 •

50

a) Busca navegacional;

Ocorre quando o usuário já sabe para qual site gostaria de ir, mas não se lembra da URL completa ou está com preguiça de digitar. b) Busca informacional;

 A busca é por informações na forma de notícias e afins. O usuário não sabe em qual site chegará para encontrar o que procura. Ele vai digitar um termo e esperar os resultados. c) Busca transacional.

O usuário busca fazer uma transação, como comprar uma passagem de ônibus, encontrar uma loja ou um prestador de serviço e digita essa intenção.

O SEO e o Google É fundamental entender como o Google  funciona para elaborar uma estratégia de SEO. Como primeiro passo é importante salientar que no Google  os resultados das buscas são divididos em orgânicos (gratuitos) e pagos. Os resultados pagos (dentro da caixa colorida) aparecem no topo da página, sinalizados por uma marcação verde com o texto “Ad” ou “anúncio”. Para ocupar esses espaços, as empresas pagam por clique por meio de uma ferramenta do próprio Google chamada Google Adwords . Exatamente como você viu antes, no qual economista-chefe do Google   e professor emérito na Universidade da Califórnia, em Berkeley, EUA, Hal Varian fala da monetização do buscador líder.

Figura 2.9 – Resultados pagos no Google. Disponível em: . Acesso em: 11 set. 2017.

 Abaixo desses resultados pagos encontram-se os orgânicos. Esses sites das primeiras posições de busca são definidos pelos robôs do Google de acordo com o nível de relevância e autoridade que apresentam — sempre focando na qualidade de experiência do usuário.

capítulo 2 •

51

Como vimos acima Os robôs do Google funcionam como rastreadores. Eles buscam todas as páginas na internet , entram em cada um dos links   e leem tudo o que aquelas páginas têm para oferecer, salvando tudo o que encontrarem nos seus servidores. Dessa forma, todo o conteúdo fica organizado e bem segmentado para oferecer os melhores resultados para as pesquisas feitas pelos usuários a respeito de um termo específico.

ATENÇÃO O Google não enxerga sites da mesma forma que o usuário. Quando pensamos na visibilidade para os mecanismos de busca, precisamos nos lembrar de que, ao contrário dos usuários, os robôs que leem o site não conseguem visualizar javascript  (linguagem de programação) e imagens, apenas texto e código. Sendo assim, quando fizermos a estrutura de um site ou blog   com imagens, é fundamental trabalhar bem em cima descrição dos elementos visuais da imagem, colocando uma descrição completa que auxiliará os robôs a entenderem do que se trata aquela figura. Quando não trabalhamos a descrição das imagens, o Google acaba vendo estes espaços como furos no site. É como se toda esta área das imagens fosse um fundo branco, sem conteúdo relevante para os leitores.

SAIBA MAIS Uma das tarefas da Otimização dos Sistemas de Busca é colocar nosso website no topo, logo abaixo dos anúncios. Para isso é necessário levar em consideração fatores de rankeamento de buscadores como o Google. Tais fatores podem ser divididos entre aqueles que devem ser trabalhados dentro do próprio site e aqueles que devem ser trabalhados fora do site. Confira os principais: •

Tempo de permanência na página

Quanto mais tempo o usuário permanece na página, com mais eficiência o buscador interpreta que aquele conteúdo responde à dúvida pesquisada. Caso o usuário entre e imediatamente saia da página, o buscador entende que esse texto não agrada ao público. Para ampliar a permanência é necessário manter a qualidade e atratividade do domínio digital.

capítulo 2 •

52

•

Qualidade e tamanho do conteúdo

Quanto mais relevante for o seu conteúdo, melhores as chances de figurar nas primeiras posições nos resultados das buscas. Ter em torno de 2.500 palavras também ajuda. •

Títulos internos e externos

O interno é aquele que o leitor verá quando já tiver acessado o seu conteúdo e deve despertar o interesse do usuário. Já o externo (ou SEO Title) é o que aparece nas Serps (Search Engine Results Page  ou em português Página de Resultados de uma busca) e possui a função de levar o leitor até o seu conteúdo.

Figura 2.10 – O SEO title, quando se digita Estácio  na busca. Reprodução da Internet. Acesso em: 24 jul. 2017.

SAIBA MAIS 1. 2. 3. 4.

Como encontrar um SEO Title? Siga os passos a seguir: Clicar na lateral direita do site (passo 1) com o botão direito do mouse. Selecionar “exibir código fonte das páginas”. Dar Ctrl + F e escrever na barra de procura “