terça-feira, 29 de abril de 2008

AULA 10 - Hierarquia de conteúdo: elementos

Faaala turma,

Como vcs sabem, na aula de hoje vamos passar os últimos tópicos que serão utilizados como base para a realização da análise de site da próxima aula (que vale 2 pontos na média).

Falaremos hoje de hierarquia de conteúdo, abordando alguns elementos importantes, a saber:

- Rótulos / labels
- elementos multimídia
- hipertexto / hipermídia
- participação do usuário
- interatividade / elementos de navegação
- concisão dos conteúdos

Estes tópicos, somados aos tópicos da aula passada compõe o conjunto de itens a ser analisado em nosso trabalho da aula que vem. Todos os itens precisam constar no trabalho.

até a aula!

20 comentários:

Diego Sewald disse...

bora lá..
isso esta etapa está sendo muito importante, pois como já tenho um pequenissimo conhecimento com site, esta ajudando em crescimento!

. disse...

Foi mal não estar na última aula, mas não perdi o enterese viu. Sim vamos ver ainda os sites de imobiliárias?

Anônimo disse...

boa daniel. passa trabalho e coisa pra ler. só pra aprender. dylan!

Anônimo disse...

ops, quis dizer, "só assim pra aprender."

Unknown disse...

Rótulos / labels
http://internet.boticario.com.br/portal/site/produtos/
Uso do elemento "Pull-down Menu".

Elementos multimídia
http://www.globo.com/
Encontramos vídeos, sons e outras mídias.

Hipertexto / hipermídia
http://www.yahoo.com.br/
uso de Ícones(Links) como "mais notícias".

Participação do usuário
http://eunaweb.ig.com.br/
O usuário participa das as "seções".

Interatividade / Elementos de navegação
http://www.volkswagen.com.br/default.asp
Encontramos o elemento "Pop-up Menu".

Concisão dos conteúdos
http://www.videotecaonline.com.br/
Site com informações da "loja" (o que o cliente busca)

N. Júnior

Anônimo disse...

* Interatividade/elementos de navegação
http://www.bb.com.br/portalbb/home/geral/index.bb
Bastante interativo, o usuário tem controle sobre a maior parte do site. Várias opções para definir e achar o que está procurando.

* Rótulos/labels
http://g1.globo.com/
Os labels não são constantes em todas as seções do site, confundindo o usuário.

* Hipertexto/hipermidia
http://www.famosidades.com.br/v2/gerador/paginas_geradas/noticias/noticias_mod_4274.htm
Ao final da matéria aparece uma lista (Saiba mais) com matérias relacionadas.

* Participação do usuario
http://www.cocacola.com.br/pt-br/index.jsp
Ao entrar no site, o usuário pode escolher para qual lado quer ir deixando o mouse no canto da tela, e assim escolhendo o ícone que lhe agrada (identificados como bolhas da coca-cola). Passando para os outros links, também há outras formas que o usuário pode interagir.

* Elementos multimidia
http://globoesporte.globo.com/GloboNews/home/0,6993,1788,00.html
Apresenta infográficos, vídeos, áudio, fotos e textos.

* Consisão/relevancia dos conteúdos
http://www.wbla.com/#53
Por tratar-se de um site de um canal de tv, onde passam filmes e seriados, o conteúdo é bastante direcionado e organizado.

Fernanda Mello

Lanie disse...

http://www.neopets.com/

O Neopets é um popular jogo "online" onde se pode ter um animal de estimação virtual
O site tem interatividade pela seu bons elementos de navegação trazendo facilidade aos usuário.
O formato simples nos elementos gráfico trazem uma maior interação das relevâncias dos seus conteúdos .

http://www.mycancerplace.com/

Este link tem rótulos facilitando usuário a sua melhor navegação obtendo informação sobre o conteúdo do site .

www.orkut.com.br

Ele possui Hiperlink porque tudo que você clic ele abre outras paginas interagindo diretamente com o usuário. Existe rótulos especificando cada área do site.

www.rraurl.oul.com.br

Existem elementos multimídias contendo banners interativos em flash e possui uma web radio apresentação dos seu usuários.

www.youtube.com

Ele tem elementos multimídias, Hyperlink, interatividade porque deixa o usuário a realizar seu próprio material de interatividade alimentando de informações diárias.

Lanie Marquez
Diego
Maryana ferreira

rubem miranda disse...

Interatividade/elementos de navegação
www.bicsurf.com.br
o site oferece uma grande interação do usuário, pois o mesmo posta imagens para concorrer a uma promoção onde quem vence é quem tem a foto mais votada pelos usuários.

Rótulos/ labels
www.waves.com.br
quando entramos no site vemos a marca no canto esquerdo do site com um desenho atrás. Esse desenho muda conforme o link escolhido.

Hipertexto/hipermídia/links
www.wikipedia.org
dentro do texto tem palavras chaves que viram link, abrindo uma nova janela com a informação relacionada a palavra. Na minha opinião ajuda a nível de curiosidade, mas pode atrapalhar quando se quer somente informação do determinado assunto buscado.

Participação do usuário
www.valeumconvite.com.br
o usuário se cadastra e através de jogos e desafios acumula pontos que depois pode ser trocado por convites em festas, cinemas e shows.

Elementos multimídia
www.oneilltv.com
site relacionado a competição de surf que mostra pela webcast o evento ao vivo na Escócia.
Pelo www.asptour.com também é possível assistir a competição em tempo real.

concisão/ relevância dos conteúdos
www.submarino.com.br
é só escolhe o link relacionado ao produto que procura. Por exemplo, telefonia. Vai te vários modelos de aparelhos com informação técnica, valor, fotos e links com produtos que estejam dentro do campo de procura. Possibilitando total informação do produto antes da compra.

Anônimo disse...

DYLAN!!

Multimidia.- http://g1.globo.com/ encontram-se noticias com, fotos, videos, infograficos animados com flash e outros mais simples. No topo, fotos e videos de 5 noticias diferentes, porem estaticas. O usuario tem que clicar em alguma delas para trocar de noticia e saber qual a seguinte.

Interatividade e elementos de navegaçao – http:/www.anhembi.br Exelente exemplo de bons elementos de navegaçao. Menus horizontais fixos no topo, independentes da seçao do site que o usuario estiver. Facil de voltar pra home. Facil localizaçao. Facil de achar as informaçoes que busca. Atendimento on line das 8 da manha ás 8 da noite. “fale conosco” para qual quer tipo de duvidas, de academicos ou não.

Participaçao do usuario - http://www.curacao.com/ Total participaçao do usuario. Site de viagens onde o usuario comenda de acordo com seus objetivos de viajem.

Concisao e relevancia dos conteudos - http://br.news.yahoo.com/ Site traz varios box separando cada categoria de noticias. Facil entendimento das chamadas das reportagens. E no rotulo de cada box, links para assuntos dentro da categoria do respectivo box.

Hipertexto/hipermidia/links - http://ultimosegundo.ig.com.br/ Noticias com o assunto principal, e mais algum outro assunto relacionado abaixo, em caixa menor, do titulo principal. No rotulo da box de cada noticia, um link com mais conteudo relacionado. No final dos textos, um link “leia mais”.

Rotulos/labels – para cada categoria de produtos uma cor diferente, muito bom. Leva o titulo da seçao no canto esquerdo superior, mas não tao visivel. Deveria ser melhor localizado, mais visivel.

Denny Trovati disse...

Proximidade / Alinhamento: (http://www.submarino.com.br/)
Submarino tem muita opcoes de alinhamento tanto quanto proximidade entre outros muitos recursos, interessantes para uma boa pesquisa por completo e de maior confiabilidade para a leituro limpa sem perda da informacao.

Equilibrio / Proporção / Simetria:(http://welcome.hp.com/country/br/pt/welcome.html)
Todo arrumadinha com as mesmas fontes, usando as escritas todas alinhadas padronizando a legibilidade, colunas simetricas entre outros tipos de equilibrio.

Constraste / Cores e Brancos:(http://www.rbs.com.br/)
Muito tranquilo este site da RBS, tem tambem um otimo alinhamento conforme o primeiro topico, porem o equilibrio e a proporção acredito eu que ficou mais em destaque, assim ficando melhor a viabilidade para o internauta.

Ordem / Consistencia / Repetição:(http://www.mercadolivre.com.br/)
Site muito repetitivo, a busca central nao muda alem das informaçoes, as colunas sao sempre repetitivas, e as cores sao repetitivas tambem, um tipo de site sem sal e sem teor de inovação.

Interatividade / Elementos de Navegação:(http://www.americanas.com.br/)
Tirando entre outros sites que tambem tem o mesmo estilo de recursos como a interatividade, as animacoes de precos feitos em flash, entre outros tipos, como o incone promocional com movimentos interativos. Geralmente em sites de vendas tem muito do estilo de interatividade padroes para suas promocoes.

Rotulo / Labels:(http://www.rbs.com.br/midias/index.php?pagina=jornal)
Muito interesante ficou este site a forma dos icones com a interacao da mudancas de pagina. Nao sei se tem muito a se comparar com o topico Rotulo e Labels, mas acho que tem uma pitada proxima do que significa.

Hipertexto / Hipermidia:(http://www.uol.com.br/)
Neste site por ser muito aglomerado, esta lotado de links, e hipermidias entre outras observações diretamente relacionado.

Participação do usuario:(http://www.baixandotudo.net/)
Consideramos este site de um forum para os internautas poderem deixa a suas opnioes, postarem casos do dia a dia, montarem enquetes especificos, tambem podem colocar links para filmes, programas, games, musicas entre outros tipos interagindo diretamente com o internauta a ter muitas opcoes para seu lazer diario.

Elementos Multimidias:(http://www.fiat.com.br/br/monteseucarro/localidade.do)
Site de montadoras e vendas de automoveis sao tipicos comuns de terem total apresentacoes de elementos multimidias, podendo ser desde a personalização do seu carro, como ate mesmo o menu de inspecificações tecnicas do carro em textos interativos, entre outras opçoes diversas.

Concisão / Relevancia do conteudo:
Com a Drops de informações em todas noticias de maior explicação, com a opcoes de leia mais, veja mais, para continuar clique aqui, etc... este site por ser de telejornalismo, mostra muito as opcoes diversas de drops na tela central do site.

Beatriz Cascaes disse...

interatividade/elementos de navegação
http://www.google.com/ig
i-google
O site personalizado do google, no qual, a partir do momento que o usuário faz o login, ele pode organizar os elementos e escolher os que lhe interessam para fazer parte da página. Por exemplo, notícias, seus email do gmail, um calendário, vídeos do youtube... Todas essas janelas podem ser organizadas da forma que o usuário preferir além do "tema" da página, sendo esse cores, fotos ou desenhos proporcionados pelo google.


rótulos/labels
http://www.tvnet.pt/
Site português de notícias utiliza abas na parte superior, sendo que cada seção tem uma cor.


hipertexto/hipermidia
http://www.thedreamer.com.br
Site onde podemos encontrar inúmeros links de sites de portifólios de fotógrafos, designers, webdesigner, ilustradores e outros. Além sites de empresas, a maioria voltada para publicidade. Esses sites são sempre diferenciados e inovadores.


participação do usuario
http://www.deviantart.com
Site onde qualquer usuário pode ver fotos, ilustrações e textos dos usuários cadastrados. Os usuários podem se comunicar mandando recados além de comentar os posts. Existe no site a possibilidade de comprar e vender as obras.


elementos multimidia
http://www.itau.com.br
Ao entrarmos no site do Banco Itaú, nos deparamos com um banner. O usuário precisa arrastar o mouse conforme é indicado e verá uma animação simples mas bastante interessante.


consisão/relevancia dos conteúdos
http://www.imdb.com
Provavelmente o site mais completo de cinema, sua aparência não é muito atraente, mas tratando-se de conteúdo é impressionante o quanto de informação é possível recolher a partir do nome de um filme por exemplo.

. disse...
Este comentário foi removido pelo autor.
Jacson disse...

Interatividade/ elementos de navegação.

http://www.redetv.com.br/
Este site possui conteudo em tempo real.


Rótulos/ labels

http://waves.terra.com.br/novo/wavesintro.asp
As cores da pagina e o desenho do rótulo muda de acordo com link que é clicado.

Hipertexto/ Hipermídia

http://news.google.com.br/nwshp?hl=pt-BR&tab=wn

Este site possui muitos links.

Participação do usuário:

http://www.mercadolivre.com.br/foros_home.ml

Este disponibiliza a participação dos usuários na comunidade do mercado livre, um exemplo no mercado café.

Elementos multimídia:

http://www.beck.com/

Este site é basicamente composto por multimídia.

Concisão/relevância dos conteúdos:

http://pt.wikipedia.org/wiki/P%C3%A1gina_principal

Este site contém muitos conteúdos, ao longo de link inseridos no texto.

Gustavo Benites disse...

Análise de Web sites a partir da hierarquia de conteúdo dos elementos:

Interatividade/Elemento de Interação, Rótulos/Labels, Hipertexto/Hipermídia/Links, Participação do Usuário, Elementos Multimídia e Concisão/Relevância dos conteúdos

Interatividade/Elementos de Integração
Site: www.magicwebdesign.com.br
Este site desenvolve wepages para produtos como O Boticário, Goodyear e Renault, entre outros. Possui elementos de Flash na sua home, no seu menu principal e na opção tour multimídia do site.

Rótulos/Labels
Site: www.ig.com.br
Os rótulos de cada sessão estão identificados com cores diferentes, que vão ser as mesmas nos títulos de cada sessão. Uma boa maneira para organizar os rótulos/labels é o uso das cores como padrão de identificação e diferenciação.
Também o uso de tipografia de tamanhos diferentes para identificar qual é o assunto ou tema a ser tratado.

Hipertexto/Hipermídia/Links
Site: www.clicrbs.com.br
Este site contém hipermídia, no que está relacionado à vídeo. Algumas matérias tem um pequeno ícone em forma de tv para assistir junto à notícia.

Participação do Usuário
Site: www.mycancerplace.com
Este site expõe a doença Câncer e abre espaço para a discussão a respeito, tanto para pessoas que tem a doença como para pessoas que não tem a doença.

Site: www.myspace.com
Apesar de não ter conta no myspcae.com, posso afirmar que este site é totalmente baseado na participação do usuário, assim como no orkut. Na verdade, este site é feito para o usuário.

Site: http://pjoanol.sites.uol.com.br/
Este web proporciona varias maneiras de interatividade. Desde enquete até qual é o significado do nome de pessoas.

Site: http://jornalnacional.globo.com/Jornalismo/JN/0,,3610,00.html
Aqui podemos observar enquetes, debates e até teste para conhecimentos dos usuários.

Elementos Multimídia
Site: www.surfline.com
Site de surf que proporciona vídeos de surf, animações, imagens e texto.

Concisão/Relevancia dos Conteúdos
Site:www.folha.com.br
Apresenta opções extras de informação, como por exemplo leia mais, ou no caso de uma notícia específica sobre o ethanol... entenda, quem ganha mais e especial.

. disse...

KZUKA - kzuka.com.br

PARTICIPAÇÃO DO USUÁRIO

Neste site hà bastante interação, o usuário pode enviar foto, enviar vídeo, pode postar qualquer recado aos amigos no “boca no trombone”, pode participar de blogs, promoções e fazer busca de eventos que estão rolando ou vão rolar na cidade.
_______________________________________________________________________________
NESTLE – nestle.com.br e
Mais Você – globo.com.br/maisvoce

INTERATIVIDADE / ELEMENTOS DE NAVEGAÇÃO e
CONSISÃO / RELEVÂNCIA DOS CONTEÚDOS

No site da Nestle e do Mais Você, a cada página uma imagem adequada ao texto, complementando o assunto, com muitos elementos de conteúdo, no caso da Nestle dando passo a passo para iniciantes e links mais diretos avançados, o Mais Você da o passo a passo nas receitas oferecidas.

DIARIO CATARINENSE – diario.com.br

ELEMENTOS MULTIMÍDIA

No site do Diário você encontra, vídeos do jornal e vídeos postados por usuários, animações da parte comercial, infográficos estáticos e animados, podcast e videocast, imagem e textos.

NEOTIX – http://www.neotix.com.br/v5/index.html

ROTULO / LABES

Este site é um exemplo claro de rótulos, a cada clic no menu, você encontrará a visulaização diferenciada de cada página e cor específicas para cada assunto.

JORNAL A TARDE – atarde.com.br

HIPERTEXTO / HIPERMÍDIA / LINKS

Nas editorias de economia e cidades você pode encontrar o hipertexto ou hipermídia, mesmo que discretos.

Jonatha disse...

- Interatividade/elementos de navegação - www.youtube.com na minha opinião este é um dos sites que mas proporciona a interatividade com as pessoas e com o mundo,
onde você te a opsão de ver videos, fazer pesquisas, encontrar pessoas que você não vê a tempo entre outro assustos que pordem ser relatados ou axecutados pela pagina.

- Hiperxto/hipermídia/links - www.orkut.com este seria um dos maiores exemplo no Brasil de participações dos usuários em postagem de fotos, videos, comentarios sobre determinado assunto entre outros.

- Elementos multimídia - http://toyota.com.br/ o que eu pudi reparrar neste site é o fato de que o cliente pode montar e escolher a cor do carro, onde para mim seria um dos pontos que poderia classificalo como um elemento multimídia.

- Rotulos - http://www.globo.com/ para mim este site traz um bom exemplo de rotulos na pagina, onde traz labels com rotulos direcionados ao assunto.

Anônimo disse...

Interatividade / elementos de navegação

http://www.fiat.com.br/br/monteseucarro/monteCarro.do?idModelo=177

Site da Fiat onde o usuário monta seu carro de acordo com o modelo desejado inserindo opcionais ao veículo e alterando as cores de forma que fique do agrado do cliente.

Rótulos / labels

http://www.esporteinterativo.com.br/

separa os esportes e os campeonatos pelo mundo por cores, tendo como complemento comentários, e link de “mais notícias”

Hipertexto / hipermídia / links

http://www1.folha.uol.com.br/folha/colunas/zapping/ult3954u396646.shtml

Hipertexto no meio do conteúdo fazendo com que o usuário possa aprofundar sua pesquisa em uma matéria de forma que clicando na palavra linkada o levará para o site de acordo. Acompanhado do leia mais, tem outra forma de aprofundar-se cada vez mais.

Participação do usuário

http://fantastico.globo.com/Jornalismo/Fantastico/0,,4001,00.html

Envio de vídeos com exibição no programa na tv, exige cadastro. Em outras áreas tem comentários do usuário, enquetes. Na sessão de vídeos tem opção de rankiar classificando o vídeo de acordo com a opinião do usuário.

Elementos multimídia (inserido no layout, conteúdo a parte.)

http://www.freedomoftheseas.com/site.php
Site que apresenta um transatlântico em um tour virtual totalmente multimídia com animações, e com o auxilio de narrações explicativas em áudio imagem e textual.

Concisão dos conteúdos

http://www.ig.com.br/

utiliza das abas em cores que equivalem as de sua sessão no site, colorindo os links e titulos da matéria de acordo com seu assunto.

Fabiano Pons disse...

- Interatividade/elementos de navegação
Na minha opinião O site http://www.yakult.com.br/web/index.php é Um bom exemplo de uma estrutura de navegação legal, pois fica bem dividido a estrura de box, assim como o menu da lateral direita e o banner principal com a propaganda da marca na parte superior.

- Hipertexto/hipermídia/links


- Participação do usuário
No hotsite http://videos.terra.com.br/ os usuários mandam vídeos e tem a opção de comentar os já postados, ainda é mostrado os mais visitados e os usuários tem a opção de votar nos melhores.
encaminhar fotos, mandar comentários, fórum, chat

- Elementos multimídia
No site http://www.discoverykidsbrasil.com/_home/ o usuário consegue interagir com personagens da televisão, com bastante áudio e imagens.

Aproveito para deixar aqui um link interessante (Como fazer um infográfico - http://super.abril.uol.com.br/videos/conteudo_videos_251205.shtml)

- Concisão/relevância dos conteúdos

O clássico http://www.radios.com.br/ nos mostra uma péssima escrita, o exemplo também mostra textos e imagens que não estão de acordo.

Mar disse...

Análise de web sites a partir da Hierarquia de conteúdo dos elementos.


1 - Interatividade/Elementos de navegação.

http://www.escola-panamericana.com.br/

Quando entra no menu do site, verifica-se que ele não abre em cascata e sim entra diretamente na janela selecionada, aparecendo imagens e é bem dinâmico.

2 - rótulos e labels.

http://www.jorgealex.com.br/site/home/index.php

O rótulo é simples, mas é dinâmico e funcional, mas poderia chamar mais a atenção do usuário.

3 - Hipertexto/ Hipermídia.

http://noticias.terra.com.br/brasil/interna/0,,OI2857079-EI5030,00.html

Nessa notícia podemos encontrar links de matérias relacionados, eles estão destacados e ao lado encontra-se tipos de elementos de hipermídia como fotos e vídeos.


4 - Participação do usuário.

http://www.ig.com.br/

No menu Eu na Web existe vários tipos de interatividade com o usuário.


5 – Elementos Multimídia.


http://www.americanas.com.br/cgi-bin/WebObjects/AcomHome.woa/wa/default?par=ig20selo


Nesse site econtra-se fotografias, flash. Não tem nenhum vídeo.


6 – Consição/ Relevância dos conteúdos.


http://www.globo.com/

O site esta super completo no requisito de Consição e Relevância dos conteúdos.

web design India disse...

nice collection