Fandom

Central de Wikia

Comentarios16

Cómo las infoboxes portátiles pueden cambiar tu estilo

¡Interferencia de bloqueo de anuncios detectada!


Wikia es un sitio libre de uso que hace dinero de la publicidad. Contamos con una experiencia modificada para los visitantes que utilizan el bloqueo de anuncios

Wikia no es accesible si se han hecho aún más modificaciones. Si se quita el bloqueador de anuncios personalizado, la página cargará como se esperaba.

Cómo las infoboxes pueden cambiar tu estilo

El traslado de infoboxes clásicas a las infoboxes portátiles te brinda la oportunidad única de reconsiderar cómo se ve tu comunidad. Aunque suene un poco abrumador, ¡puede ser muy gratificante! Como el elemento más dominante de la mayoría de las páginas, las infoboxes son usualmente lo primero que los usuarios ven — además de que son muy importantes a la hora de establecer el estilo de la comunidad.

CSSLogo.png

Importante a la hora de diseñar.

Es fácil olvidar que el CSS tiene el poder de modificar el estilo de tu comunidad. Usualmente lo usamos para elegir colores y estilos sin pensar verdaderamente cómo es que funciona. Sin embargo, cuando se trata de infoboxes, es más sencillo si te tomas el tiempo y consideras las infoboxes como parte de un sistema de diseño de elementos.

Es divertido coordinar los colores de las infoboxes, especialmente con colores relacionados al tema de tu wiki. Sin embargo, mientras más crece tu comunidad, mayor es la posibilidad de que algunos colores dejen de verse como deberían. Existe un número infinito de colores disponibles, pero solo algunos se pueden distinguir fácilmente de otros.

Así que si vas a hacer un tipo de codificación por color, asegúrate de asignar los colores a temas más generales. Si por ejemplo hablas de comidas de fantasía en tu wiki, querrás asignar un solo color para todos los tipos de comida, y no un color para las carnes, otro para los vegetales, entre otros.

Fíjate cómo Wookiepedia ha agrupado seis infoboxes bajo un solo tema de 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; }

Al asignar astro a todos los objetos masivos del espacio, están usando los colores #004466 y #BBCCDD para transmitir un significado útil.

Pero considera esto. Puedes simplificar el proceso de edición si eliges que todas tus infoboxes tengan los mismos colores – en preferencia un color que esté relacionado con tu barra de navegación. Tomarte el tiempo de crear un estilo único reducirá el tiempo de mantenimiento en tu comunidad en el futuro.

ColorEye.png

Asegúrate que elijas colores que todos puedan ver.

Del mismo modo, los usuarios deberían leer el contenido de la infobox sin problemas. Recomendamos usar un sistema de contraste de colores que te pueda ayudar a elegir colores que se puedan leer fácilmente.

Si estás buscando inspiración para elegir un diseño o ideas sobre código específicas, ve a comunidades que tengan infoboxes portátiles en acción. Lee su CSS y trata de entenderlo. Siempre puedes copiar el código a una wiki de pruebas que tengas. Cuando te sientas cómodo manipulando las infoboxes portátiles en CSS, úsalas en tu propia comunidad. ¡Lo peor que puede pasar es que cometas un error que se pueda corregir fácilmente!

Temas personalizados

Recientemente, Wikia trabajó con dos comunidades con diferentes temas. En un caso, nuestra meta era ajustar lo más posible el nuevo tema con el existente. En otro, nos separamos del tema establecido para crear algo más fácil de leer, especialmente en el área del título.

Reproducir lo que ya está

En la comunidad de The Walking Dead se les dio un tema personalizado para sus infoboxes portátiles que se adaptaba más a la original. Algunas de las plantillas en su comunidad fueron importados de otras páginas web, y no se adaptaban consistentemente al resto. Sin embargo, una vez el nuevo tema se modificó utilizando el CSS, todas las infoboxes se cambiaron por defecto — sin requerir código en línea.

Tyreese-nPI.png

Infobox clásica

Tyreese-PI.png

Infobox portátil


Hacer unos cambios

Por el contrario, Borderlands Wiki eligió a Europa, uno de los temas por defecto de las infoboxes portátiles. Utiliza un esquema de color que provee un look más a la medida sin escribir ningún código CSS. Está optimizado para el escritorio y las experiencias de tablets, con suficiente espacio para navegación y dispositivos emergentes.

Por supuesto que Europa se puede modificar utilizando CSS, y Borderlands Wiki eligió cambiar las cosas un poco del tema Europa predeterminado.

HB-nPI.png

Infobox clásica

HB-PI.png

Europa, con algunos ajustes

Conclusión

Mientras que puedes cambiar el estilo individual de cada infobox, recuerda que siempre se deben hacer los cambios con cuidado. Trata de que tu diseño sea universal y que se pueda replicar fácilmente. Si no lo haces, es posible que termines con un CSS bastante complicado de mantener.

Un equipo que ayude en una comunidad en el 2009 puede que tenga ideas relacionadas al estilo muy diferentes a las tuyas. Como las ciudades modernas construidas encima de otras estructuras, mientras más busques diseños de infoboxes, más te encontrarás con estilos muy diferentes. Por eso, el traslado a las infoboxes portátiles es una manera genial de eliminar todos los estilos antiguos y hacer algo nuevo y con más consistencia. De lo contrario, terminarás manteniendo múltiples ideas de lo que otras personas consideran cool.


¿Quieres recibir las últimas actualizaciones del blog de Fandom en español? ¡Haz clic aquí para seguir este blog!


Foto.png
Valeria Piña es parte del equipo de Fandom en Español desde febrero del 2015. Le encantan las películas extranjeras, leer, y tomar mucho café. Valeria sueña con aprender diferentes idiomas.

Spotlights de otros wikis

Wiki al azar