Bruno Dulcetti



Arquivos:

Categorias:

  • Amizade:

  • Artigos

  • Links:

    O meu, o seu, o nosso espaço!

    » Menus, navegações em listas realmente é necessário?

    Estava eu um dia desses, pensando nisso. Esta vendo meu código e parei pra pensar e me perguntei isso. Pensei sobre, pesquisei, vi que sempre falam as mesmas baboseiras, que menus são listas de links, etc, etc, etc.

    Tá beleza, menus se tratam de uma listagem de links, pensando por esse lado, tudo bem. Mas será que devemos pensar assim sempre? Eu acho que não e gostaria de saber sua opinião sobre minhas abordagens a seguir.

    Se menus são listas de links, então um layout é uma lista de colunas

    Meio bizarro pensar não é? Parece meio idiota, eu sei, mas eu sou meio toupeira, imbecil, entendam isso por favor. Mas pensem comigo: imaginem um post de um blog, como este modafoca aqui mesmo. Nele você possui uma porrada de parágrafos, certo? Escrevo um post, onde detalho algumas coisas e escrevo bastantes ou poucos parágrafos, não importa.

    Mas onde você que chegar Bruno?

    E imaginem um layout, onde você possua três colunas, como o Papo de Bêbado, por exemplo. Se são três colunas, então é uma listagem de três colunas, certo? Igualmente bizarro, mas fluindo nos pensamentos que vejo por ae, essa seria a teoria.

    Tá bom o modafoca, mas onde você quer chegar realmente?

    Ok, vamos lá. É meio ridículo ter uma listagem de parágrafos e de colunas, já que parágrafos possuem sua tag prioritária, o <p> e as colunas, apesar de não possuir uma tag específica, colocamos dentro de uma div. Até aí tá tudo certinho.

    Mas pensem comigo, os links também já não possuem a sua maldita tag específica? Sim, possui e você sabe disso e ela é a tag <a>.

    Com isso, eu lhe pergunto:

    Por que colocar menus numa lista?

    Para ficar mais organizado?

    Coloquem dentro de uma <div> que estarão organizados da mesma forma. E você ainda terá menos coisas com que se preocupar, principalmente pensando no modo IE. Temos problemas quando nossos links ficam como blocos dentro de uma lista. Facilmente contornado, sim, eu sei, mas podendo evitar isso, melhor, concorda?

    E vira e mexe eu não quero que meus menus fiquei na vertical e com um maldito bullet ao lado, quando eu não possuir CSS habilitado. E principalmente porque não quero eles em blocos quando forem números de um elemento de paginação.

    Mas ae é só você colocar fora de listas quando for paginação

    Sim, já pensei nisso, mas e o padrão? Onde fica? É padrão ou é podrão?

    Tudo bem que nos menus laterais, os links ficam como bloco e seria interessante eles ficarem numa lista, mas não sei se valeria a pena isso.

    Entendi Dulça. E você já aboliu o uso de menus em listas

    Ainda não. Estou estudando esta possibilidade e gostaria de saber a opinião de vocês, se estou viajando e tudo mais. Mas provavelmente eu deixarei de usar sim. A única vantagem que eu vejo, pelo menos quando estava escrevendo esse post modafoca, foi que tendo uma <li> englobando o link, temos mais um elemento para trabalharmos, colocarmos um background, entre outras características. Fora isso, ainda não vejo muita vantagem não.

    Finalizando

    Bom, é isso. Espero que, pelo menos, eu tenha encucado um pouco vocês e tenha feito vocês pensarem um pouco nisso. Posso tomar vaias, um esporro, ser xingado. Tem problema não, to aqui pra isso 😀 Mas queria levantar esse ponto com vocês.

    Aquele abraço.

    [ 29/out/2008 às 17:25hrs ] [ Por Bruno Dulcetti ] Comentários 16 Comentários |

    Categorias: CSS,Webstandards

    16 Comentários no Post "Menus, navegações em listas realmente é necessário?"

    Postar no Rec 6

    1. Fala Dulça, blz?

      Já tive esse pensamento tb… não tão exagerado quanto o seu de chegar a pensar que tudo é lista de tudo, hehehehehe. mas acho que devemos abstrair as coisas um pouco… acho válido o lance do menu em listas pelo fato de ficarem numa lista única, ou seja, seria uma lista contendo os itens do menu. Caso contrário ficariam simplesmente jogados, vários links apenas. sei lá… são vários ocnceitos e se vc começar a procurar pela net vai ver gente fazendo cada coisa louca, deixando de fazer outras e por aí vai.

      Mas eu ainda continuo com meus menus dentro das listas, hehehehehehe!!!!!

      Abraço!

    2. Modafoca,

      Eu acho que uma lista serve para relacionar elementos em comum, ordenados ou não(OL ou UL). Por isso eu acho que um menu fica legal com lista, dado que vc esta agrupando um conjunto de elementos de mesmo teor(não alcoolico).

      Talvez a DIV por ser um elemento abrangente e a tag A por ser inline e servir como ponte, não sejam suficientes o bastante para essa tarefa de classificação(esquecendo um pouco o CSS da coisa) na questão semantica do HTML.

      Que tu acha?

      Abracetas… 😉

    3. @Gustavo
      hehehe… Eu exagerei um pouco de sacanagem mesmo, só rpa descontrair, mas seria mais ou menos isso mesmo. E sempre tem nego fazendo coisas loucas. Eu por enquanto to fazendo, mas to mudando um pouco minha idéia sobre isso. Mas vamos ver

      @Lucas
      Com certeza pancho. Às vezes fico pensando como você disse ae e tudo mais. Mas não concordo muito que não sejam o suficiente. Talvez pelo costume de utilizar. Mas, por exemplo, uma paginação eu não gostaria que aparecesse sem CSS numa lista e não considero uma “lista de números”.

      O bom é essa parte de agrupamento e tudo mais, mas talvez pelo costume. Não sei se fica tão necessário isso.

      Valew as opiniões ae meus nobres.

    4. Grande Dulça, tudo blz mano?

      Vamos lá! Alguns dizem que a forma com que classificamos os elementos físicos é arbitrária, visto que possuimos grandezas infinitamente maiores que a terra e nos perguntamos qual a finitude de uma partícula atômica. Já chegamos no menor que poderiamos chegar? Neste caso, adotamos um padrão de grandeza a partir de um referêncial aceito. Por exemplo, nós mesmo, humanos. A grandeza atômica nos tem como referencial para ser atômica. Poderiamos comparar por exemplo que, a cabeça de uma formiga, que para nós dá para ser vista a olho nú, proporcionalmente ao tamanho de Júpiter, ela seria atômica. Só tente abstrair e engulir esse meu papo quaso pseudocientífico. Por que eu contei esta história?

      Se pegarmos um site, uma página na web como a maior grandeza que temos, precisamos lidar com partes menores e encontrar formas de lidar semanticamente com elas. Div e span por exemplo, são definidos como elementos de agrupamento. Eles foram criados para adicionar “estrutura” aos documentos (adding structure to documents). DIV como elementos de blocos (mais uma referência a grandezas) e o SPAN como um elemento inline (outra referência a grandeza). Esta definição “de bloco” e “inline” nos remetem 100% a conceitos de “grandezas”. Por isso colunas são comumente interpretadas como “blocos estruturais” e não listas. Porque se comparadas ao tamanho do site como um todo, elas são pedaços muito maiores do que o conteúdo que elas trazem dentro de si. E é neste ponto que o pessoal do DIV-LESS se engana. Eles praticamente ignoram o “princípio de grandezas” e de semântica ao querer classificar e colocar tudo debaixo de listas.

      Já na definição de listas podemos ler: O HTML oferece aos autores vários mecanismos de especificar listas de informação (HTML offers authors several mechanisms for specifying lists of information.). Aqui entra novamente a ilustração de grandezas que eu dei anteriormente. Colunas são informações? Headers são informações? Se formos parar para pensar TUDO em um site é informação. Mas se pensarmos em grandezas, podemos interpretar a “lei” como os gringos gostam de chamar de “chunk text”, ou pedaços de texto, pedaços de informação. Menus são trechos inseridos dentro de blocos maiores (headers ou colunas). Mais uma vez uma referência a grandezas. “Pedaço” é diferente de “estrutura”. DIV é diferente de LISTAGENS, e nada se enquadra melhor em listagens do que listas de caminhos (itens de menu) a serem seguidos.

      Bom, esse é meu ponto de vista semântico! Não sei se eu me fiz entender, mas critica ai… : )

      Tapa na alcatra! hahaha…

    5. Estou lendo isso 1 hora da manhã depois daquela festinha lá… mas faz sentido sim. 🙂

      Parece que não mas o costume de cologar display=”inline”, ao menos em mim, sobrepõe-se… acho mais organizado o código. Talvez assim, o link de menu fica mais diferenciado de um link normal.

      Ah.. sei lá.

      Abraços!

    6. Bruno, seu pensamento já foi externado por outros autores e não deixa de ter um sentido. Entretanto, eu prefiro ainda ficar com a seguinte opinião:

      A DTD do HTML nos diz que o elemento item de lista (LI) pode ter como conteúdo qualquer fluxo de informação, seja em linha (inline) ou em bloco (block). Sendo assim, sintaxamente não é errado colocar dentro de LIs colunas inteiras como você mencionou no exemplo. Assim também não é errado colocar apenas uma âncora (A) dentro de cada LI. A decisão final sobre a aplicação ou não da lista deve ser, na minha opinião, o contexto.

      Se o conteúdo que for disposto em colunas tiver o significado de uma LISTA de conteúdo, acho aceitável o uso de UL e LI, como por exemplos:
      1. no site da globo.com, no centro temos 3 colunas de destaques: Notícias, Esportes e Entretenimento;
      2. no site da PC Magazine Brasil temos Empresa, Trabalho e Vida Pessoal, que são blocos de destaques não dispostos em colunas mas que listam todos os destaques da revista.
      O conteúdo de cada uma das colunas no site da globo.com ou dos blocos da pcmag ficariam dispostos dentro de cada LI sem a necessidade de os envolver com o elemento DIV (conceito KISS).

      No caso de lista de links, não usamos diretamente o elemento âncora (A) lado-a-lado pois segundo as diretrizes de acessibilidade (WCAG 10.5) isto pode atrabalhar a identificação do usuário de que são links diferentes (embora possamos dinstingui-los com CSS – técnica 6.2). Neste caso, o uso de listas torna-se um recurso bastante útil e aceito para diferenciar os links tanto visualmente quanto para leitores de tela.

      Portanto, na minha modesta opinião, cabeçalho, corpo e rodapé, não são lista de conteúdo. São seções do documento e desta forma, o ideal é agrupá-los com DIV. Noutros casos, onde o conteúdo é semelhante e tem significado de listagem, como nos exemplos que citei, eu concordo com o uso de listas. Semântica e simplicidade no código devem prevalecer e o mais importante é que os elementos HTML devem casar com o conteúdo e não com a apresentação.

      É isso! Abraço!

    7. Coé Dulcetti!

      Sempre teremos a coisa subjetiva associada aos padrões, não tem jeito. Há um tempo atrás neguim discutia de se colocar os elementos de form em lista, já que é uma “lista” de elementos de form. Eu já vi também uma discussão onde neguim dizia que escrevia menu com lista de definição, onde o DT seria “Menu” e os DD’s seriam as opções de menu. Enfim… subjetividade sempre 🙂

    8. Leonardo Quixadá | 30/out/2008 às 9:41

      Infelizmente não temos tags o suficiente hoje em dia para dar a semântica apropriada para o html. Assim, vivemos pocurando recursos alternativos – como listas, divs e spans – para tentar suprir essa deficiência. Quer dizer, como descrever na marcação menus, grids ou campos especificos de formulário como sliders ou calendários? A galera bota lista para dar conta do recado em tudo. Já ouviu falar em divless? É bizarro.

      Listas em menu para mim faz todo o sentido do mundo. Pega um cardápio em qualquer bodega por aí e você nota que aquilo É uma lista de opções. Em boa parte dos celulares, o menu também funciona assim. Caixas eletrônicos também. Por que em html não haveria de ser? Mas, veja, isso não quer dizer que seja obrigatório usar uls e ols. Afinal, como fazer um menu horizontal sem css e javascript? %) Só lembre que desta forma vai ser dificil fazer aninhamentos (ponto pras listas).

      Portanto, acredito que são duas abordagens válidas. Só não sei dizer se há algum impacto em SEO – o que eu realmente tenho minhas dúvidas.

      Abraços

    9. camilo vitorino da costa | 30/out/2008 às 11:54

      bem, isso é uma possibilidade.

      Mas veja só, vamos voltar um pouco no tempo (ou nem tanto). Pense na arquitetura de um bom livro. tem a capa, a contra-capa. Índice, notas de rodapé. Agora coloque esse livro todo impresso num rolo de papel higienico. Temos um site! Lá em cima tem o titulo do livro (h1), logo depois tem o índice (o menu), o texto do livro em si (conteúdo do site) e a contra-capa (notas no rodapé [copyright, etc…]).

      Essa é a maneira que eu imagino. O menu é o índice do site. Uma forma rápida de acessar as outras sessões, ou capítulos. Se é uma navegação guiada, que o conteúdo desta página vem antes da página ‘X’ e depois de ‘Y’, é . Já no caso de uma navegação livre, onde cada página é individual, dentro do contexto do site (livro), é .

      Espero ter acrescentado em alguma coisa essa discução xD

      abraço

    10. Apesar de seguir essa regra, eu não acho que usar listas em menus seja obrigatório.

      Eu utilizo justamente por ter mais elementos a minha disposição. Isso ajuda, como você disse, na hora de incluir mais backgrounds ou trabalhar algum efeito específico. Acho muito mais prático usar uma lista do que incluir uma div ou um span antes de cada link.

      Do ponto de vista semântico não sei se faz muito sentido pensar no menu como uma “lista de links”. Se for pensar assim, você pode inclui-los numa div com “id=menu_principal” e dizer que eles fazem parte da divisão do, err…, menu principal. Saca?

      No fim das contas, utilizar uma lista(ou não) não vai fazer com que seu menu seja mais(ou menos) semântico. Mais semântico que isso só se tivéssemos uma tag . 😉

    11. belos pontos citados… to gostando da discussão em cima disso.

      belo comentário henrique. concordo com você em boa parte. mas eu não to falando que é errado colocar em listas e tudo mais. foi mais pra saber a opinião da galera e tudo mais.

      sobre a parte dos leitores de texto, eu ouvi falar sobre isso, mas só perguntando pra um deficiente visual mesmo pra ver se atrapalha e eu acho que não, mas… sei lá.

      sucesso galera.

    12. Não considero que o layout em coluna é a listagem de colunas, a semântica das colunas, na minha opinião não é essa. Na verdade, infelizmente não temos (ainda) a tag para colunas, para dizer que aquilo realmente é uma coluna. Por enquanto é só um bloco que contém as informações, no caso a DIV.

      Mas para um menu, não vejo outra alternativa além de uma lista, porque o menu, como o próprio nome já mostra, é uma listagem, no caso dos sites, uma lista das páginas existentes. Se você vai a um restaurante, o que é o menu? Não é um cardápio dos pratos, bebidas, etc., servidos no estabelecimento?

      Então menu já vem “embutido” com a idéia de uma lista e o conceito de listagens cai perfeitamente nesse princípio. Por isso, continuo achando um pouco forçado dizer que as colunas se encaixariam em listas, como prega o DIVLESS hehe 🙂

    13. Concordo,

      Acho aquele “” modafoca desnecessário 😛
      Eu também vou parar de usar isso aí também!

      Belo post!

    14. […] foda-se. Se no post anterior vocês não me xingaram, nesse vocês […]

    15. divless (http://somerandomdude.net/projects/webdev/divless/) então nem ferrando? 🙂
      adorei o seu blog! irei recomendar a geral

    16. André, tudo, dentro do bom senso é claro, é aceitável. Lógico que não vou sair colocando um monte de divs desnecessárias e tudo mais, mas se eu tenho que escolher uma tag pra colocar alguma coisa e ela é um bloco e o HTML não me oferece outra com semântica o suficiente para identificá-la, porque vou usar outra?

      As pessoas adoram inventar nome, isso que é foda 😀 Valew ae meu nober e volte sempre. Estarei postando algumas polêmicas 😉

    Tá esperando o quê? Comenta logo.

    
    Copyright © 2005 Bruno Dulcetti | Creative Commons
    Bruno Dulcetti atuante na área de desenvolvimento web / webdesign e colaborador na área de webstandards pelo Blog BrunoDulcetti.com - blog. Atuante na área desde 2000. Atuando na cidade de Niterói/RJ - Brasil. E-mail: bruno@brunodulcetti.com