Wikia

Wiki Community

Comentários2

Como as infoboxes portáteis podem mudar o seu estilo

Uma das oportunidades que vem com a mudança para infoboxes portáteis é que você possa reconsiderar o visual da sua comunidade. Isso pode parecer assustador, mas também pode ser altamente gratificante. As infoboxes são os elementos mais dominantes na maioria das páginas, e assim atraem os olhos dos leitores - o que as tornam parte do núcleo de estilo de qualquer comunidade.

CSSLogo.png

É com o "S" do meio com que você tem que se preocupar

É fácil esquecer que o "S" central em "CSS" significa estilo. Nós andamos por aí, escolhemos as cores da cartola, escolhendo estilos aleatoriamente. Mas, particularmente quando se trata de infoboxes, sua vida será excepcionalmente mais fácil se você tomar o seu tempo e considerar as suas infoboxes um sistema holístico de elementos de design. Afinal, saber quais pincéis comprar e qual tinta usar te faz inteligente, mas não necessariamente lhe faz um artista.

É divertido fazer com que cada infobox tenha sua própria cor e tentar algum tipo de "código de cores" com elas. Mas quanto mais a sua comunidade cresce, maior a chance de que seu código de cores não funciona mais. Talvez haja um número quase infinito de cores, mas há somente apenas algumas que o olho humano pode distinguir.

Então, se você vai fazer algum tipo de codificação de cores, pinte com um pincel muito largo. Atribua cores para 'tópicos, não para pequenas fatias de conhecimento. Por exemplo, você provavelmente vai querer ter apenas uma cor para todos os alimentos - não uma cor para carnes, um cor para vegetais, e uma cor para a sobremesa.

Observe como a Wookiepedia agrupou seis infoboxes sob o tema astro:

 /* Constellation, Galaxy, Nebula, Sector, System, Trade_route */
	.pi-theme-astro .pi-title { background-color: #004466; }
	.pi-theme-astro .pi-navigation { background-color: #004466; }
	.pi-theme-astro .pi-navigation a { color: white; }
	.pi-theme-astro .pi-header { background-color: #BBCCDD; }

Atribuindo astro para todos os objetos espaciais, eles estão usando cores #004466 e #BBCCDD para transmitir significado útil.

Mas considere isso. Sua vida pode ser muito mais simples se você optar por fazer com que todas as suas infoboxes tenham a mesma cor - de preferência um que seja relacionada cromaticamente à sua barra de navegação. Quando você gasta mais tempo para criar um estilo único para as suas infoboxes você reduz o tempo de manutenção por muito tempo.

ColorEye.png

Certifique-se de que você escolheu cores que todos possam ver.

Da mesma forma, as pessoas devem ser capazes de ler a sua infobox. Isso se torna difícil quando existe pouco contraste entre a cor do texto e o fundo. Aqui está uma demonstração bem-ilustrada dos problemas de contraste de cor. Você também pode usar um analisador de contraste de cor para ajudá-lo a escolher cores altamente legíveis.

Se você está procurando inspiração de design e até mesmo ideias específicas de codificação, vá para as comunidades que atualmente têm infoboxes portáteis em ação. Leia o CSS deles e tente compreendê-lo. Teste o código deles em uma wiki de teste sua. Então, quando você estiver confortável em mexer no CSS da sua infobox portátil, use-o na sua própria comunidade. O pior que pode acontecer é cometer um erro facilmente corrigível!

Temas sob medida

Recentemente, a Wikia trabalhou com experiências diferentes em relação a temas. Em um caso, a nossa meta era fazer com que as novas infoboxes combinassem com o tema existente. Em outro, nós mudamos o tema estabelecido para estabelecer algo mais legível, particularmente na barra de título.

Reproduzindo o que já existe

A The Walking Dead Wiki recebeu um tema personalizado, sob medida para suas infoboxes portáteis que combinou com a maioria das suas infoboxes originais. Algumas das predefinições na comunidade foram importadas de outros sites e não combinavam com as outras consistentemente. No entanto, uma vez que o novo tema foi criado no CSS do site, todas as infoboxes começaram a usá-lo - sem a necessidade de código embutido.

Tyreese-nPI.png

Infobox não portátil

Tyreese-PI.png

Infobox Portátil

Fazendo algumas mudanças

Por outro lado, Borderlands Wiki escolheu usar Europa, um dos dois temas padrões para as infoboxes portáteis. Ele usa o esquema de cores existente de uma comunidade para proporcionar uma sensação adaptada sem escrever qualquer código CSS. Ele é otimizado para as experiências de desktop e tablet, com espaço para personalização para dispositivos emergentes.

E claro, Europa pode ser modificado por CSS, e a Borderlands Wiki escolheu mudar algumas coisas do padrão do Europa. Mas ao fazê-lo, eles não perderam nenhuma das caracterísiticas nativas do Europa.

HB-nPI.png

Infobox não-portátil

HB-PI.png

Europa, levemente modificado

Conclusão

Embora você possa personalizar cada infobox individualmente, você deve usar o seu poder com cuidado. Tente fazer com que o design da sua infobox seja universal - aplicável a todas as infoboxes. Senão, você ficará com um CSS muito complicado que será muito mais difícil de manter. w:c:fairytail:MediaWiki:Themes.css Aqui está um exemplo de um conjunto muito complicado de temas - mais de 2000 linhas!

É completamente compreensível porque isso aconteceu. Ao longo do tempo, as comunidades adicionam mais e mais infoboxes. E a equipe que trabalhou na comunidade em 2009 pode ter ideias de estilo totalmente diferentes das suas. Como cidades modernas que são construídas em cima das antigas, quando mais você revira o passado, mas estilos diferentes você encontrará. Assim, a adoção de infoboxes portáteis é uma ótima maneira de limpar todos os estilos antigos e criar algo novo, ousado e unificado. Caso contrário, você vai acabar mantendo toneladas de ideias de outras pessoas do que elas acham legal.

Ao redor da rede Wikia

Wikia aleatória