Você está na página 1de 174

Escola de Design Unisinos Especializao em Design Grfico Design de Hipermdia

O QUE ACONTECEU PARA ESTARMOS TRATANDO DE DESIGN DE HIPERMDIA?

Hipermdia e interfaces

Web e softwares que usam a internet para trabalhar

Processos de projeto

Tendncias

Computadores calculam e armazenam.

Computadores contm dados.

Computadores so organizveis em redes. Internet conecta redes de computadores.

Digitalizao
Dos meios de produo (criamos contedo atravs de): word, powerpoint,

excel, photoshop, web) Dos suportes (lugares onde guardamos o contedo produzido): pendrives, DVDs, HDs, CDs, discos virtuais, disquetes... Dos processos: (executamos tarefas com o auxlio de): cartes eletrnicos, home-banking, celular, microondas, etc.

Comunicao Mediada por

Computadores (CMC)
Tecnologias da Informao e da

Comunicao (TICs)

A evoluo da computao est ligada ao clculo e armazenamento.

O computador realiza operaes. Essa faceta de mquina de processar, calcular, buscar resultados fundamental para pensarmos a Internet.

Professor at the Visual Arts Department, University of California - San Diego (UCSD).

2008

2001

Examinando a interface, comeando pela

idia de tela.

A tela uma tecnologia muito

anterior s possibilidades recentes


(VR) que tomamos contato hoje, da Renascena ao cinema do sculo XX.

As solues de Virtual Reality eram muito comentadas poca.

Como o computador apresenta

continuidades e desafios em
relao tradio da tela? McLuhan e Remidiation.

Genealogia da tela.
Classical Screen A cultura visual do perodo moderno

caracterizada por um intrigante fenmeno a existncia de um outro espao virtual, um outro mundo tridimensional fechado por uma moldura e situado dentro do nosso espao normal.

A moldura (frame) separa dois

espaos absolutamente diferentes que de alguma forma coexistem.

Herana da pintura: pensar nas propores e nas

nomenclaturas portrait e landscape usadas hoje.

Dynamic screen A tela que disponibiliza uma imagem que muda

no tempo. A tela do cinema, tv, vdeo.

Impe uma outro protoloco de

visulizao (viewing regime) entre a imagem e o espectador.

J aparecia na tela clssica, mas agora

aumenta a noo de preenchimento

completo da tela pela imagem, descarte do espao ao redor da tela pelo foco que a
mesma requisita. Imerso.

A tela agressiva. Ela filtra o entorno.

Esta relao-protocolo de visualizao (tela

desafiada com a chegada da tela do computador.


quer sua ateno total)

A tela do cinema resulta de uma evoluo de

dispositivos do sculo 18 e 19.

A tela do computador tem origem

no radar.
Inovao ligada a tecnologias de controle, espionagem, mapeamento, segurana (militares): monitor de vdeo, tela de computador, controles.

radar
Ao contrrio da fotografia

e do cinema (imagens estticas, ou imagens estticas em seqncia), vemos pela 1 vez uma tela cuja imagem pode mudar em tempo real, mostrando mudanas no referente (posio de objeto, live vdeo ou mudana nos dados do computador).

A tela de tempo real o terceiro tipo de tela,

inaugurada pelo radar.

Janelas coexistentes no lugar de uma

nica imagem, princpio da Graphical User Interface (GUI).

A concentrao da visualizao deixa de ser

em apenas uma imagem. Blocos de dados de texto, imagem, vdeo sugerem que a tela do computador tem mais a ver com design grfico e janelas.

Tela interativa
A informao processada passa a ser representada na tela de tempo real: lugar de inserir e retirar informao de um computador.

Ao mudar algo

na tela, mudamos algo na memria do computador

Clssica

Dinmica

Real time Interativa

A tela e o corpo
A tela representa uma relao entre o espao

do espectador e o espao da representao.


Com isso, o

sujeito estaria existindo nesses dois espaos simultaneamente, princpio que


nasce do corte promovido pela tela.

As formas de representao ocidental pedem

que o sujeito fique parado.

Um ponto de vista, descolado do corpo.

A inveno da perspectiva radicaliza ainda mais

essa relao: o ponto de vista est pronto.

A tela funcionaria como um cofre em uma parede, no qual o visvel foi depositado.

Os aparatos que lidam com a luz e projeo

conduziriam depois ao cinema requisita que o espectador se aprisione para - imvel assistir imagens.

Nesse sentido, tambm passamos de um

mundo estvel e esttico (fotografias iniciais) para a aventura da viagemcom a imagem em movimento, ainda que aprisionados.

Salas de cinema: prises, caverna de Plato.

Representao confundida com perpcepo.

A realidade virtual leva a cmera para a

cabea do usurio. Para olhar no espao virtual preciso olhar no espao fsico. O usurio precisa trabalhar (jogar?) para ver (lembrando o funcionrio de Flusser).

Continuamos grudados mquina, mas

agora precisamos nos mexer.

A VR continuaria a tradio da simulao.

Teramos na tela a mudana da representao para a simulao.

Pinturas de mosaicos, afrescos, nas paredes

fundiam-se com a arquitetura e o real enquanto as telas da pintura em diante reforavam a representao (e pediam a mobilidade do espectador). A tradio da simulao, portanto, anterior s telas digitais (museus de cera, naturalismo, realismo, etc).

O prximo passo (ento) carregar as telas

que nos aprisionam conosco: a retina e tela vo se fundir. Mas ainda vivemos na sociedade da tela achatada, retangular que participa do nosso espao como uma janela para outro lugar, a sociedade da tela.

REMIDIAO

Jay Bolter
Jay David Bolter (born

August 17, 1951) is the Wesley Chair of New Media and a professor in the School of Literature, Communication and Culture at the Georgia Institute of Technology.

Richard Grusin
Richard Grusin is a

http://premediation.blogspot.com/

Professor of English at Wayne State University, where he teaches courses in film and media studies, new media theory, and American Studies.

Conceitos associados
Mdia Mediao

Interface
Experincia

Premissa bsica>
Haveria o seguinte contraditrio (paradoxo):

nossa cultura teria um simultneo desejo por imedao e hipermediao, a dupla lgica da remidiao.

Ou seja>
Nossa cultura desejaria simultaneamente

multiplicar seus mdias e apagar todos os traos de mdia. O ato de multiplicar visaria o apagamento, idealmente.

Imediao:
o meio desapareceria para nos deixarmos na

presena da coisa representada. Mas a imediao dependeria da hipermediao (alm de coexistir).

Imediao:
A experincia da imediao hipermediada

pela INTERFACE (simuladores).

Imediao>
A origem aponta para a trajetria da

representao visual ocidental: a busca permanente por atingir a imediao implicaria em colocar o espectador no mesmo lugar dos objetos visualizados.

A hipermediao tem ligao histrica com a fascinao pela presena do meio. cones e letras integram-se desde os manuscritos medievais.

As mdias visuais digitais podem ser melhor

compreendidas pelas formas pelas quais

homenageiam, rivalizam e revisam a


pintura em perspectiva, fotografia, filme, televiso e impresso. O que novo sobre as novas mdias seria a forma particular com que estes aspectos so tratados entre as mdias novas e antigas.

Opacidade e transparncia
As novas mdias sempre andariam entre a

opacidade e a transparncia na remidiao que fazem das mdias anteriores. Ao ver as formas de representao do passado, destaca-se as preocupaes de transparecer-se para chegar ao real e o encantamento com a opacidade do prprio meio.

Discutindo mdia>
As tecnologias da mdia envolvem relaes

que podem ser expressas em termos fsicos, sociais, estticos e econmicos. Software + Usos + remodelagem = mdia

Imediao>
O valor esttico da transparncia visando a

imediao foi trabalhado pelas mdias antigas

perspectiva, apagamento e automaticidade.


nas tcnicas de

Imediao>
Perspectiva: ver atravs, matematizar o

espao.

Imediao>
Apagamento: trabalhar a superfcie para

apagar as pinceladas. Tromp Loeil: exemplo de buscar enganar o olho que acaba reforando a qualidade do artista que aparece pelo apuro tcnico.

Imediao>
Automaticidade: tecnologias fotogrficas,

cinema e depois televiso. A fotografia se tornou o aperfeioamento da perspectiva linear. A remoo do artista que ficava entre o espectador e a realidade da imagem.

Imediao>
Mais tarde, a computao grfica herda o

cartesianismo e a matematizao do espao convocado pela perspectiva. A, o programador que apagado da experincia do software, ele no

transparece atravs da interface (todos

os software so iguais).

Mediao da mediao
No se media a experincia externa ,mas sim

outros mdias. Toda nova tecnologia se define em relao com formas anteriores de representao. (isso eles aprenderam com McLuhan)

Horizonte da imediao>

Imediao: o autor se retira mais e o leitor seria mais envolvido.

Porm...
A imediao proposta pelos meios seduz as

percepes, mas de fato est amparada em atos de mediao contnuos (hipermediao).

Hipermediao
Hipermediao: fascinao pelos mdias

(meios). Processo e performance so maiores que o resultado. Espao heterogno, janelizado, mltiplos atos de representao.

Hipermediao
Hipermdia: mltiplas mdias + acesso

randmico. A interface do desktop no se apaga. Mdia (contedo) e software inclusive conversam.

Hipermediao
A hipermediao j se apresentava em portas

e cabines dos sculos XVI e XVII.

Hipermediao
Tecnologias mecnicas de reproduo que

tambm traziam a hipermediao: Diorama, phenakistoscope, stereoscope: internalizavam a transparncia da imagem em movimento dentro da estrutura hipermediada. Mas a vitria foi da maior transparncia (ou iluso de) dada pela fotografia.

Diorama

phenakistoscope

Stereoscope

Hipermediao>
A fotomontagem teria rompido com esse

entendimento.

Colagem, mash-up, DJ.

Hipermediao
Quando a tecnologia se torna uma segunda

natureza, a experincia hipermediada tornase igualmente autntica.

Hipermediao>
A lgica da hipermediao expressa a tenso

entre o espao visual como mediado e como um espao real que fica alm da mediao. Olhar para uma coisa, olhar atravs da coisa.

Imediaao/Hipermediao
A arte explora o sentido da interface, faz com

que ela surja aos olhos do usurio, enquanto a engenharia aperfeioa a tecnologia para que ela desaparea.

Imediao / Hipermediao >>>> Remidiao


a representao de um meio em outro.

Caracterstica definidora das novas mdias.

Remidiao>
Atos de remidiao: emprstimo, arquivamento, remodelagem,

absoro.

Dependncia, contexto, reforma Imediao e hipermediao nas interfaces

Sistema que faz a mediao de um usurio solicitante com um sistema prprogramado que busca atendar as

demandas do primeiro. Duas reas gostam de lidar muito com a interface: Design + estudos de HCI (Human-computer Interface) Quando temos o Windows e cia, falamos de interfaces grficas digitais.

Criada em 1991 por Tim-Berners Lee


Lee props a criao de um espao hipertextual global e aberto, no qual qualquer informao pudesse ser acessada atravs de um nico Universal Document Identifier (Identificador Universal de Documentos).

Nem tudo que Internet, web. A web fez pela Internet o que o Windows fez pelo computador, tornou a interface amigvel.

Os softwares chamados navegadores, permitem que se acesse os documentos HTML que universalizam a forma de recepo do contedo que se desejasse fazer circular pela Internet. Textos,

imagens, sons, vdeos comeam a aparecer nas interfaces grficas digitais da web.

O usurio ao requisitar uma pgina, faz um pedido ao servidor que a disponibilize.

Heterogeneidade Metamorfose

Potencialidade
Complexidade

Conectividade
Cartografia

Heterogeneidade
o hipertexto composto de diferentes ns que podem ser acessados por diferentes caminhos.

Todos os caminhos podem levar sua marca. OU talvez no necessariamente no lugar que voc queria que as pessoas chegassem ao pensar na sua marca.

Metamorfose
O hipertexto est em constante transformao
Desde a cor do link visitado at a organizao

dos contedos.

potencialidade
o usurio tem a possibilidade de recriar o

hipertexto no momento de seu uso

Complexidade
as conexes relacionam diferentes aspectos

do hipertexto, mesmo que contraditrios.

cartografia
o hipertexto deve oferecer recursos para a

orientao flexvel entre os caminhos possveis.

Caractersticas da hipermdia

Hibridismo
A hipermdia mistura diferentes tipos de

linguagens
http://postvisual.com/theuninvited/en/

no-linearidade
o usurio no precisa seguir uma seqncia prdeterminada

Interatividade
o usurio deve ter papel ativo na fruio da

hipermdia.

Navegabilidade
o usurio deve ter liberdade para ir aonde

quiser, encontrar seu rumo ou se perder

(hiper) Texto -> Mdia

Substituio ou evoluo?

(hiper) texto> (mdia)


Hipermdia une os conceitos de no-linearidade (no-linear), hipertexto, interface e multimdia

numa s linguagem. Traduzida erroneamente como mero suporte, hipermdia no se configura s como meio de transmisso de mensagens, e sim como uma linguagem com caractersticas prprias, com sua prpria gramtica. Hipermdia, diferentemente de multimdia, no a mera reunio dos meios existentes, e sim a fuso desses meios a partir de elementos no-lineares.

Mas a mquina continua operando nos bastidores.

Web
Diversos grupos de mdia passam a

produzir suas verses online quando a Web torna-se, o lado mdia da

Internet.

Blogs

dirios

Gerenciador de contedo

Website

Blog Portal

Hotsite

http://www.carolinasebben.blogspot.com/ (w3haus)

Web 2.0
Ao usar a mquina, ela nos usa. um processo, no uma nova verso.

Estrutura integrada de funcionalidades e contedo, criando servios.


Publicao (insero), visualizao

(representao), compartilhamento (indexao) das informaes.

Como ver o princpio em ao


Sites que nasceram sob idia de publicao,

visualizao e compartilhamento: YouTube, Flickr, Slideshare, Delicious, etc.

Tags (folskonomia)

Mas tem muito mais:


Go2web20.net

Feed My App

Sites que funcionam como organizadores de contedo que vem de outros lugares
NetVibes (www.netvibes.com)
NetVibes da Agncia Digital AG2

Mash-Ups> A + B = C

Sites que organizam contedo possuem uma espcie de DNA (API)

a) Usa-se um DNA a favor de um objetivo

especfico: ver Mashup awards b) Ao reunir dois DNAs diferentes, forma-se um terceiro SER: Wonderwall e Boulevard of Broken Dreams

Exemplos:

Diaroogle (1 API)

Visual Headlines (Flickr + CNN)

Algumas concluses:
1. 2.

Decises estratgicas renem dados+mdia Mutao permanente. Interfaces

previstas, mas no previsveis.


3. Informao embutvel/distribuvel para muitos lugares (igual e diferente ao mesmo tempo). 4. Vida pessoal e vida das marcas cada vez mais diludas uma na outra?

O sujeito deixa marcas.


O lado mquina nos mede, mensura, percebe

nossos passos e comportamentos. O lado mdia nos oferece ambientes para nos inserirmos em processos gregrios, desenvolvermos estratgias identitrias, CONSTRURMOS RELACIONAMENTO.

Muito seguida, mas segue somente a si mesma atravs de suas variaes de profile. Comportamento HUB

Segue mais do que seguida. Cerca da metade dos updates so de retorno ao cliente. Comportamento Pr-Ativo/Atendimento

Mais seguida do que segue. 2 followers novos em media por dia. O uso foi especfico da ao NikePlus. No entanto, so 8600 Citaes para @nike vs. 795 citaes para @nikeplus.

Comportamento Sazonal + Efeito Morto-Vivo

A Nikeplus no envia nenhum tweet desde o dia 13 de agosto de 2008. Enquanto isso, vrios usurios que esto seguindo a marca ainda mandam tweets relacionados, tanto a marca como a suas campanhas.

No segue ningum e seguida por mais de 9 mil users.

H pouca transparncia da marca no seu Twitter, pois tudo o que postado l so notcias sobre a empresa que j so de conhecimento geral

781 seguidores, segue 14. Praticamente no d @, exceo do Twisney, que parece ser outro user oficial da Disney. Este sim interage com usurios do twitter em replies.

(...) eles sempre tiram as dvidas dos clientes e so educados nas respostas, o que a torna simptica. Eles pedem desculpas quando no podem responder as dvidas com rapidez, anunciam seu profile em outras redes sociais e aspectos humanos como um artigo sobre sua responsabilidade global.

No entanto, navegando por grande parte das pginas do MicrosoftVista no foi possvel encontrar nenhuma URL. Grande parte do contedo dos tweets so notcias relacionadas ao Vista e Microsoft, e at mesmo ao seu antecessor, o XP. A outra parcela dos tweets, mais informal, fica pelas respostas e conversas que acabam sendo criadas pelos usurios.

Equilbrio entre nmero de seguidores e nmero que segue. Ainda que busque alguma conversao com o usurio, fala muito de si mesma. Crescimento de 5 seguidores por dia.

Uma pessoa real Identificada no profile

O uso de redes sociais (orkut, myspace, etc) no pra de crescer no Brasil.

T todo mundo conversando: alm de crescer, o Brasil lder mundial de uso de instant messengers (MSN, etc)

Isso nos faz olhar com mais ateno para entender que:
WIKI no apenas uma enciclopdia

Blogs no so s dirios abertos


YouTube no TV na Internet

Conceitos ligados a isso: emergncia (sistema organizado e desorganizado simultaneamente), Folksonomia

Internet : Mquina + Mdia + Ambiente de relacionamento

Internet
Banco de Dados

Web

Web 2.0 Ambiente de Relacionamento

Mdia

Resumo:
Para projetar experincias com a web, precisamos considerar: Suas trs facetas (dados, mdia, relacionamento) Aceitar e usar as caractersticas do hipertexto e da hipermdia Pensar em combinar os DNAs disponveis

Interfaces, telas e arquitetura de informao

relacionamento

<proposon>
mtuo vivo

CANVAS REPRESENTAO

TELAS

Tv Rdio Jornal Revista Web Tv Rdio Jornal Revista

mdias

INFORMAES

SEGUNDO MANOVITCH, A TELA OU INTERFACE DO COMPUTADOR AQUELA QUE SEPARA DOIS ESPAOS

ABSOLUTAMENTE DIFERENTES E QUE DE ALGUMA MANEIRA COEXISTEM.


Quem ou o que so esses espaos?

INTERFACEAR OU ATENDER SIMULTANEAMENTE A DOIS OU MAIS PLOS DE UM SISTEMA DE INFORMAES IMPLICA EM, DE UM LADO, CUMPRIR COM OS PROCEDIMENTOS CONTIDOS NO PLO INANIMADO, MAS PLANEJADO E PR-DEFINIDO DO SISTEMA, E DE OUTRO LADO, ATENDER A DEMANDA DE EXPECTATIVAS PREVISVEIS POR PARTE DO INDIVDUO USURIO E SOLICITANTE. (FREITAS, P. 188)

OFERECER POSSIBILIDADE DE USO, COM LINGUAGENS DECODIFICVEIS A UM OU MAIS INDIVDUOS USURIOS PODE SER CONSIDERADO O PRINCIPAL DESAFIO DE UMA INTERFACE (FREITAS, P. 189)

A funo da metfora fica bem clara conforme a concluso de Steven Johnson, que diz que ela ajuda a imaginar o que informado, propiciando a viso do todo em uma nica tela (Gosciola, 2003, 92).

Outros exemplos de metforas nos cones e Remidiao: video players

TELAS-INTERFACESMDIAS

Com a hipermdia, a discusso passaria a ser

o surgimento, desenvolvimento e

transformao das interfaces que

permitem comunicao e uso por imerso. (Freitas, p. 195)

Telas-interfaces-mdias

Oops

NUMA ANALOGIA ENTRE O DESIGN NA RELAO HUMANA NO CAMPO DO REAL, EM TERMOS DE PASSAGENS ENTRE AMBIENTES, O AUTOR AFIRMA QUE NO CIBERESPAO, [O]S ELEMENTOS ALI PRESENTES, QUANDO PERMITEM A MOVIMENTAO DE SUA ESTRUTURA, APRESENTAM UM QUADRO HIERRQUICO DE MOVIMENTAO COM DIFERENTES GRAUS DE PERMISSIVIDADE.

A idia de ambientao como repetio de elementos de cenrio ou de sonoridade nas telas que no devem se restringir ao seu prprio espao. Devem sim, dar indicaes que cada uma uma continuidade fsica, em representao, da outra, permitindo que se visualize a continuidade do ambiente a cada tela para promover maior empatia do usurio. (idem, p.98)

PARA O PLANEJAMENTO DE UMA INTERFACE, DEVE-SE LEVAR EM CONSIDERAO O HISTRICO DAS EXPERINCIAS VIVENCIADAS DO INDIVDUO QUE SE PRETENDE SENSIBILIZAR, PODENDO-SE, ENTO, PROJETAR UM CONJUNTO DE ELEMENTOS ESTIMULANTES EM UM SISTEMA ESPECFICO DE INFORMAES, OBJETIVANDO-SE SUA INTERPRETAO UNVOCA E PREVIAMENTE DETERMINADA (P. 191)

No incio, havia 2 escolas de AI:

- Desenho de wireframes e mapas do site.

- Design estrutural da informao (vocabulrios controlados e taxonomias).

Fonte: Luciana Cattony plantabaixa.wordpress.com

Segundo o Instituto de Arquitetura de Informao: 1. O design estrutural de ambientes de informao compartilhados 2. A arte e a cincia da organizao e categorizao de sites, intranets, comunidades online e softwares para proporcionar usabilidade e encontrabilidade 3. Uma comunidade de prtica emergente focada em levar princpios de design e arquitetura ao ambiente digital

Fonte: Luciana Cattony plantabaixa.wordpress.com

Fonte: Luciana Cattony plantabaixa.wordpress.com

Para mim arquitetura de informao fazer o complexo se tornar algo simples. entender as necessidades do cliente, do seu negcio e traduz-las em ambientes amigveis e intuitivos para o usurio. Costumo dizer que o arquiteto de informao como se fosse um intrprete entre o cliente e o usurio, j que ele contribui significativamente para que a comunicao e o intercmbio / compartilhamento de informaes e experincias entre esses dois lados sejam feitos de maneira eficaz.
Luciana Cattony. Arquiteta de Informao da Gerdau.

Fonte: Luciana Cattony plantabaixa.wordpress.com

Viso da disciplina
Mercado, concorrentes, necessidades do negcio, restries tecnolgicas, financeiras etc.

Quem so, suas necessidades, hbitos, maneiras de navegar, expectativas etc.

O que o site tem a oferecer, como ser criado o contedo etc.

Fonte: Luciana Cattony plantabaixa.wordpress.com

Arquitetura de Informao Objetivos

Encurtar o tempo de construo Tornar a manuteno mais simples Tornar a busca por informaes mais rpida Simplificar tarefas e processos Diminuir a necessidade de treinamentos

Agregar valor s marcas


Criar experincias de uso memorveis

Fonte: Luciana Cattony plantabaixa.wordpress.com

Entregveis Atividades e entregveis

O Luciana Cattony plantabaixa.wordpress.com Fonte: que arquitetura de informao?

Recebimento da demanda

Resgate e levantamento de informaes

Benchmarking

Fonte: Luciana Cattony plantabaixa.wordpress.com

Inventrio / anlise de contedo

Avaliao Heurstica

Avaliao de maturidade

Fonte: Luciana Cattony plantabaixa.wordpress.com

Estatsticas

Pesquisas quantitativas / qualitativas

Focus Group

Entrevistas com usurios

Personas

Fonte: Luciana Cattony plantabaixa.wordpress.com


Imagem personas: Adaptivepath

Mapa do site

Card Sorting

Estudo etnogrfico

Testes de usabilidade

Imagens: TRY Consultoria e pesquisa

Fonte: Luciana Cattony plantabaixa.wordpress.com

Prottipos em papel

Fonte: Luciana Cattony plantabaixa.wordpress.com


http://www.nngroup.com/reports/prototyping/video_stills.html

Desenvolvimento de wireframes

Fonte: Luciana Cattony plantabaixa.wordpress.com

Wireframes x Layouts

Fonte: Luciana Cattony plantabaixa.wordpress.com

Wireframes x Layouts

Fonte: Luciana Cattony plantabaixa.wordpress.com

Acompanhamento do desenvolvimento

Fonte: Luciana Cattony plantabaixa.wordpress.com

Fonte: Luciana Cattony plantabaixa.wordpress.com

Hierarquia da informao As informaes devem ter pesos diferentes. Foque naquilo que mais importante e respeite uma hierarquia de informao.

Fonte: Luciana Cattony plantabaixa.wordpress.com

Apresentao da informao Existem maneiras visuais e mais amigveis para se transmitir uma informao.

Fonte: Luciana Cattony plantabaixa.wordpress.com

Apresentao da informao Existem maneiras visuais e mais amigveis para se transmitir uma informao. Fonte: Luciana Cattony plantabaixa.wordpress.com

Você também pode gostar