Conteúdo Modular e Adaptável

Conheças os 5 elementos do Conteúdo Modular e Adaptável e como essa metodologia de estruturação de conteúdos pode trazer benefícios.

Ir para o artigo

Quando a palavra “modular” surge em uma conversa sobre planejamento web, normalmente é em relação ao código. Programação Orientada a Objetos no backend, estruturas de separação, apresentação e comportamento no front-end ou, talvez, a reutilização de certos padrões visuais como botões em todo o site. Mas este artigo trata de outro tipo de modularidade: a modularidade do conteúdo através de Conteúdo Modular e Adaptável!

Neste artigo, conheça mais sobre Conteúdo Modular, quais são os 5 elementos do Conteúdo Adaptável e o que esperar dessa abordagem na prática do desenvolvimento para web.

Por que Conteúdo Modular?

Então, por que conteúdo deve ser modular? Pelas mesmas razões que nós queremos outros aspectos de nossos projetos também sejam modulares: permitir que o conteúdo seja mais flexível e que possa ser disposto numa variedade de formas para melhor se adaptar às condições dadas no momento do acesso. Conteúdo Modular irá dimensionar melhor e ser mais sustentável e reutilizável.

Uma consideração importante nessa discussão é a compreensão de que não é preciso apresentar o mesmo conteúdo exatamente da mesma maneira em todos os dispositivos. Definitivamente não é preciso remover informações dependendo do dispositivo — por exemplo, em telas menores –, mas não existe nenhuma obrigação de as apresentar exatamente da mesma forma. É possível esconder “detalhes” até estes serem solicitados, contanto que estes estejam lá quando for preciso; é possível apresentar a informação em uma ordem distinta. Toda a informação deve estar presente em todos os dispositivos, mas pode ser disposta e combinada de maneiras diferentes!

O “tchã” do Conteúdo Adaptável são os detalhes sobre como isso é feito.

Conteúdo Adaptável

A chave para ajudar os conteúdos a se adaptarem melhor é lhes dar mais estrutura. A solução última é quebrar o conteúdo em “pedaços” cada vez menores e, em seguida, usar meta-dados para estruturá-lo de forma a que tenha maior flexibilidade e capacidade de reutilização.

É semelhante à forma como é possível criar mais classes no CSS que podem ser combinadas para surtir resultados diferentes nos elementos HTML — mais sobre isso, no livro “CSS Eficiente“, de autoria deste que vos escreve.

Karen McGrane fez uma apresentação sobre o assunto e, nesta, mostrou os 5 pontos do Conteúdo Adaptável:

  • Conteúdo Reusável. Múltiplas versões do mesmo conteúdo para diferentes contextos
  • Conteúdo Estruturado. Mais e menores “pedaços” de conteúdo
  • Conteúdo Independente de Apresentação. Conteúdo “cru”, sem formatação
  • Metadados Significativos. Conteúdo que pode ser consultado (querying) facilmente
  • Interfaces Usáveis de CMS. Um sistema que permita fazer tudo isso

Conteúdo Reusável

Conteúdo escrito para um contexto nem sempre funciona bem em todos contextos. Por exemplo, uma imagem que comunica algo através de detalhes facilmente vistos quando visualizados em um navegador widescreen perde sua capacidade de comunicar essas informações quando os detalhes são espremidos em uma tela pequena. Neste caso, não é esta ou aquela imagem específica que é importante, mas o que se está tentando comunicar ao utilizá-la. Se a imagem pequena não consegue transmitir a mensagem planejada, talvez uma imagem diferente ou um pouco de texto consigam fazer o trabalho.

Não existem quaisquer problemas e/ou restrições em usar conteúdos alternativos; é a experiência e a comunicação que precisam ser iguais! Se uma tabela, por exemplo, não couber em uma tela pequena, talvez um gráfico possa apresentar as mesmas informações de maneira mais eficiente — ou a própria tabela ser apresentação de uma maneira adequada àquele contexto de acesso às informações.

Às vezes as palavras usadas podem exigir mudanças. Os títulos das páginas/manchetes muitas vezes servem a várias funções; eles são a principal manchete da página e eles costumam servir como o texto-âncora em links que apontam para a página em si. Um título que pode ser facilmente exibido em um navegador widescreen pode facilmente ser cortado numa apresentação em tela pequena…

Quando se trata de texto, também é possível criar variantes. Ao invés de uma descrição de um produto único em uma página de categoria, por exemplo, poderia se criar 3 versões — pequena, média e longa — e escolher qual é melhor segundo o contexto da apresentação. E pense: é possível fazer o mesmo para chamadas de páginas e vários outros pedaços de conteúdo!

No contexto de Conteúdo Modular, isto é o que se chama de Conteúdo Reusável!

Conteúdo Estruturado

Mais estrutura leva a uma maior flexibilidade. Esta é a fundação do Conteúdo Modular e Adaptável. Em vez de um blob abrangente de conteúdo, é possível ter vários pedaços significativos. Ter mais e mais pequenos pedaços de conteúdo fornece um meio para melhor combinar este conteúdo de formas diferentes! Não há nenhuma estrutura única que irá funcionar para todo conteúdo; a estrutura será dependente do conteúdo específico, site, audiência etc e irá requerer uma melhor modelagem de conteúdo.

Modelagem de Conteúdo

Modelagem de Conteúdo é sobre definir diferentes tipos de conteúdo e como dividir o conteúdo que pertence a esses diferentes tipos. O objetivo é criar objetos de conteúdo discretos que podem ser divididos fora do todo para serem armazenados separadamente.

Modelagem de Conteúdo pode oferecer:

  • Tipos de Conteúdo. O conteúdo é um artigo? Uma galeria de imagens? Um vídeo?
  • Atributos. Quais objetos de conteúdo são necessários? Título? Texto? Um anexo de mídia?
  • Limites de Dados. Quais limites são especificados em cada atributo? Um formato específico se faz necessário?
  • Relacionamentos. Como os diferentes tipos de conteúdo são conectados? Atributos podem ser compartilhados?

O tipo de conteúdo principal guia o planejamento. Ao invés de pensar em termos de páginas, Modelagem de Conteúdo sugere que se pense em termos de pacotes de conteúdo. Há uma base flexível e uma variedade de objetos estruturados que podem ser combinados de maneiras diferentes para diferentes usos e contextos!

Conteúdo Independente de Apresentação

Conteúdo modular e sua relação com camadas de desenvolvimento web

Qualquer desenvolvedor web conhece o básico da web e sua separação em as 3 “camadas”: conteúdo, apresentação e comportamento. Ao se trabalhar com conteúdo modular e adaptável é preciso ter atenção redobrada quanto a esta separação. Assim que se começa a adicionar marcação de conteúdo na base de dados (por exemplo, tags HTML), começa-se a tornar o conteúdo menos flexível. Isso força uma determinada estrutura de apresentação. Será que algo sempre tem que estar em negrito ou itálico? Será que vai sempre ser vermelho ou azul?

O significado do conteúdo não deve ser descrito com base em sua aparência. Para criar mais conteúdo modular, é preciso separar o conteúdo de sua forma e isto significa abandonar formatações de texto “ricas” e editores WYSIWYGs — o que qualquer web designer já deve estar adorando só de ler estas palavras…

Editores WYSIWYG incentivam que a formatação seja incorporada ao conteúdo e acabou de ser visto que, dentro das diretrizes do Conteúdo Adaptável, isso não é nada bom. Definir a estrutura e a prioridade através de formatação visual (geralmente) é bom quando se planeja para uma única plataforma, mas isso não funciona tão bem quando o planejamento envolve múltiplas plataformas, que podem demandar formatações visuais diferentes — o atual e definitivo contexto de desenvolvimento web mundial!

Metadados Significativos

Metadados significativos ajudam a separar conteúdo de sua apresentação. É conveniente definir estruturas e prioridades através de metadados significativos e, em seguida, denominá-los posteriormente, depois que estes forem trazidos do banco de dados. Em outras palavras, os conteúdos são armazenado em sua “forma bruta” e metadados os descrevem.

Mais tarde, é possível consultar o banco de dados para obter metainformações específicas, a fim de apresentar o conteúdo como é preciso. O potencial dessa abordagem é imenso: com conteúdo modular, plataformas diferentes podem ser desenvolvidas para apresentar um mesmo pacote de conteúdo de maneira diferente com base em diferentes combinações de metadados!

Interfaces Usáveis de CMS

Muito do que foi apresentado até agora certamente pode parecer um tanto excêntrico (para usar um eufemismo), mas já é possível perceber que há muitas vantagens em considerar as idéias de Conteúdo Modular e as possibilidades de combinar e reutilizar conteúdo desta forma.

Para que isso aconteça, é preciso que se tenha um CMS que permita criar o conteúdo e estruturá-lo para reutilização; um sistema que faça tudo o que foi apresentado de maneira fácil não somente para nós, desenvolvedores web, mas também para nossos clientes! É preciso uma interface que não só proporcione um fluxo de trabalho fácil, mas também que incentive a todos investir no tempo e esforço necessários para dividir, estruturar e descrever conteúdos.

Os CMSs de hoje não são bons em fazer esse tipo de coisa. Para dizer a verdade, eles não são nada eficientes ao prever tipos de conteúdo exatos e as necessidades intrínsecas a projetos multiplataforma. Um CMS que se adequa à via do Conteúdo Adaptável é aquele que fornece uma fácil personalização de sua interface e fornece sistemas independentes para:

  • Criar e editar conteúdo
  • Armazenar conteúdo em um modelo de dados definido
  • Apresentar conteúdo na camada de apresentação
  • Publicar e entregar o conteúdo ao que usam o site/app

Prover sistemas independentes para os pontos acima desacopla o conteúdo bruto de sua apresentação e adia decisões sobre a forma de apresentar o conteúdo para um ponto mais à frente do processo. Isso permite não acoplar o conteúdo e a apresentação no banco de dados.

No momento, as soluções possíveis para desenvolvedores web são criar um CMS personalizado para um determinado site/app ou personalizar algum existente. O WordPress é o CMS mais usado no mundo — e o usamos bastante nos projetos da webfatorial — e muito do que é preciso pode ser feito com alguma personalização nele.

O WordPress permite que você configure tipos de post com quaisquer campos que sejam necessários. Ele permite adicionar campos personalizados e também fornece alguns formatos de post pré-definidos. Muitos plugins aproveitam esses recursos para criar pacotes de conteúdo exclusivos — como galerias de imagens ou calendários de eventos. Outro exemplo é o Tumblr, que pré-define uma variedade de tipos de conteúdo, como imagens, citações, transcrições de áudio, vídeo e ligações de chat, além do blob padrão de texto.

Conteúdo modular no Tumblr: diferentes tipos de conteúdo para criar posts, como texto, imagem, áudio, vídeo etc.
Diferentes tipos de conteúdo para criar posts: texto, imagem, áudio, vídeo etc.

Talvez não estejamos tão longe do CMS ideal para Conteúdo Adaptável ou, pelo menos, a possibilidade de adaptar alguns dos atuais para estas necessidades.

Conclusão sobre Conteúdo Modular e Adaptável

O objetivo deste artigo não é que você, depois de o ler, tenha a brilhante ideia de criar o próximo grande CMS de Conteúdo Adaptável — embora, se for fazer isso, avise para que possamos testar! O que mais se espera é que você tire deste post a ideia geral sobre a abordagem e comece a pensar que o conteúdo deve ser tão modular como nosso código e os padrões visuais que usamos através de sites/apps!

E tornar o conteúdo mais modular se resume a armazená-lo em pedaços menores e o estruturar por meio de metadados significativos! Esta estrutura adicional permitirá combinar pacotes de conteúdo em uma variedade de maneiras diferentes. Permite escolher os objetos de conteúdo mais adequadas e apresentá-los da melhor maneira possível para dispositivo e contexto diferentes.

Atualmente, os CMSs não são criados com diretrizes de criação de conteúdo adaptável-modular — embora alguns possam chegar perto disso com algum tempo investido em customizações. Com estas ideias sendo mais disseminadas, num futuro (esperançosamente) não muito distante os próprios CMSs já serão desenvolvidos para que qualquer pessoa consiga personalizar sua interface e conteúdos para atender às necessidades específicas de seus projetos.

Aguardemos.

Usamos cookies para melhorar sua experiência e para ajudar a entender como nosso site é usado. Ao utilizar este site, você aceita o uso de cookies. Consulte nossa política de privacidade para obter mais informações.