Build a Wiki - Portadas Avanzadas
¡Saludos, wikianos! Hoy os traigo la siguiente entrada del proyecto Build a Wiki, en la que vamos a llevar lo que nos enseñó Tono555 en Build a Wiki - Portadas un paso más allá, a un nivel más avanzado. Una portada es algo imprescindible en una comunidad wiki, y esa portada cuanto más pueda ofrecer al lector, mejor. Es por esto que a continuación os presento Build a Wiki - Portadas Avanzadas, donde trataré de proporcionar las herramientas necesarias para afrontar los retos de hacer una portada "avanzada". Vamos allá, ¡manos a la obra!
Creando las bases para nuestra portada
- La portada debe estar bien estructurada, con el contenido bien repartido en bloques colocados de forma ordenada en ambas columnas de la portada. Recordamos que las portadas están constituidas de dos columnas, y recomendamos no saltarnos ese esquema. Así pues, hay ciertas plantillas básicas que deberíamos tener en nuestra portada, algunas de los cuales ya nos mencionó Tono555 en su entrada sobre portadas: Una plantilla de Bienvenida es fundamental. También necesitaremos diversas plantillas que muestren el contenido del wiki, otro grupo de plantillas que muestren los blogs y noticias y otras opcionales aunque recomendables como enlaces a las redes sociales o a wikis aliados.
- Creando una Plantilla Base
- Para las plantillas de la portada nos irá bien crear una plantilla de base en la que solo tendremos que rellenar los huecos con la información en vez de crear una plantilla para cada sección. Deberemos crear una plantilla llamada "Caja" (Plantilla:Caja). Esta plantilla tendrá un encabezado y un cuerpo, asociados a los números 1 y 2 respectivamente. Deberemos por lo tanto, crear primero el cuerpo de la plantilla, que nos dará como resultado un recuadro:
<div style="background-color: darkgrey; border:1px solid darkgrey; padding:15px; margin:7px; border-radius:2px;">
Contenido
</div>
- Donde:
- background-color = color del fondo de la plantilla
- padding = tamaño de los márgenes interiores de la plantilla
- margin = distancia entre la plantilla y el contenido externo a esta
- border-radius = cuanto más alto es el valor, más redondeados serán los vordes
- border = características del borde:
- - Grosor: 1px (cuanto más alto sea el valor, más grueso el borde)
- - Tipo: puede ser solid (sólido), dashed (de líneas) o dotted (de puntos)
- - Color: Se puede usar cualquier color a través de su nombre o su código RGB
- Resultado:
Contenido
- Ahora bien, necesitamos un encabezado (título) dentro de la plantilla, así que añadimos lo siguiente dentro del código del recuadro:
<div style="font-size:200%; font-weight:bold; line-height: 25px; text-align:left; border-bottom: 1px solid #303030; text-transform:uppercase; letter-spacing:3px;">{{{1|}}}</div>
- Donde:
- font-size = tamaño de la letra o fuente. Puede ser en píxeles o en %. Cuanto más alto sea el valor, mayor será la letra
- font-weight = grosor de la letra
- line-height = separación entre líneas
- text-align = posición del texto: center (centro), left (izquierda) o right (derecha).
- text-transform = esta propiedad modifica las características del texto: uppercase (texto en mayúsculas), lowercase (texto en minúsculas), capitalize (texto con la letra iniciad de cada palabra en mayúscula).
- letter-spacing = distancia entre letra y letra. Puede ser en píxeles (px) u otras unidades distintas.
- Nota: Más información sobre el CSS en Build a Wiki - CSS y Ayuda:CSS. Para información extendida sobre las propiedades del CSS, visitar www.w3schools.com.
- Y nos quedará así en el código:
<div style="background-color: darkgrey; border:1px solid darkgrey; padding:15px; margin:7px; border-radius:2px;">
<div style="font-size:200%; font-weight:bold; line-height: 25px; text-align:left; border-bottom: 1px solid #303030; text-transform:uppercase; letter-spacing:3px;">{{{1|}}}</div>
Contenido
</div>
- Resultado:
Contenido
- Finalmente sustituimos la palabra "Contenido" por {{{2|}}} y ya tendremos nuestra plantilla lista:
- Nota: No se vé nada porque aún no hemos añadido el contenido.
- Usando la plantilla
- Ahora ya tenemos la plantilla creada y ha llegado la hora de usarla. La hemos llamado "Caja", así que la incluiremos así en la portada:
{{Caja|Aquí el título|Aquí el contenido}}
- Por ejemplo, si queremos crear una plantilla llamada "Redes Sociales" con enlaces a nuestras redes sociales deberemos hacerlo así:
{{Caja
|Redes Sociales
|[www.twitter.com Twitter] - [www.facebook.com Facebook]
}}
- Resultado:
¿Qué debe haber en mi portada?: Nivel Avanzado
- Plantilla de Bienvenida
- La plantilla de Bienvenida es la primera de todas, y debe dar la bienvenida al usuario, evidentemente. Pero además de eso no está de más dar algún dato sobre el wiki como su fecha de creación, el número de artículos, etc., además de enlaces para registrarse en wikia y crear un artículo. Recomendamos también enlaces a la administración del wiki, páginas de ayuda y, si hay, a las normas del wiki. Para que se entienda, la plantilla de bienvenida es la presentación del wiki y debe ser una plantilla que enlace a los pilares principales de este mismo.
- Dicho esto, dividiremos la plantilla en el título, el texto de presentación y enlaces de interés.
- El título deberá dar la bienvenida. Una frase recomendada es "Bienvenidos a Nombre-del-wiki"
- El texto de presentación continúa la frase del título:
- ''Estás/Te encuentras en la mayor enciclopedia en español sobre "Tema-del-wiki". Actualmente contamos con {{NUMBEROFARTICLES}} artículos creados y editados por los usuarios y fans del/la saga/película/cómic/etc. Tú también puedes ayudar [[Especial:Signup|registrándote]] y [[Especial:CreatePage|creando nuevos artículos]]."
- Enlaces de interés: Chat, Administradores, Soporte de wikia, Foro, Políticas del Wiki, Blogs, etc. Algunos ejemplos ya en el formato de enlace:
[[Especial:Chat|Chat]], [[Project:Administradores|Administradores]], [[Especial:Contactar|Soporte de Wikia]], [[Especial:Foro|Foro]], [[Project:Políticas|Políticas del Wiki]], etc.
- Enlaces de interés: Chat, Administradores, Soporte de wikia, Foro, Políticas del Wiki, Blogs, etc. Algunos ejemplos ya en el formato de enlace:
- Usando la plantilla que hemos creado antes:
{{Caja
|Bienvenidos a Quantum Break Wiki
|<center>Estás/Te encuentras en la mayor enciclopedia en español sobre "Tema-del-wiki". Actualmente contamos con {{NUMBEROFARTICLES}} artículos creados y editados por los usuarios y fans del/la saga/película/cómic/etc. Tú también puedes ayudar [[Especial:Signup|registrándote]] y [[Especial:CreatePage|creando nuevos artículos]].
'''Enlaces de interés:'''<br>
[[Especial:Chat|Chat]], [[Project:Administradores|Administradores]], [[Especial:Contactar|Soporte de Wikia]], [[Especial:Foro|Foro]], [[Project:Políticas|Políticas del Wiki]]</center>
}}
- Nota: La etiqueta <center></center> sirve para centrar el contenido. La etiqueta <br> sirve para saltar a la siguiente línea.
- Resultado:
Bienvenidos a Quantum Break Wiki
Te encuentras en la mayor enciclopedia en español sobre Quantum Break. Actualmente contamos con 3927 artículos creados y editados por los usuarios y fans del videojuego. Tú también puedes ayudar registrándote y creando nuevos artículos.
Enlaces de interés:
Chat, Administradores, Soporte de Wikia, Foro, Políticas del Wiki
- Ahora que ya sabemos como funciona la plantilla, me limitaré a destacar la estructura y contenido de cada plantilla en particular.
- Plantilla Social
- La plantilla social deberá incluir enlaces a las redes sociales del wiki (si tiene) y también recomiendo que enlace al chat. Se trata de una simple plantilla que no tiene que ocupar mucho, pues simplemente contiene enlaces. Usando de modelo la plantilla de ejemplo que se ha puesto más arriba:
- Si queremos hacer la plantilla más estética, siempre podemos usar los propios logotipos o iconos de las mismas redes sociales en formato de galería o bien usando wikitexto. Si queremos que una imagen enlace a una url debemos insertar de forma normal la imagen, de tal forma que en el modo fuente nos quedará esto:
[[Archivo:imagen.png|150px]]
- Sólo deberemos añadir lo siguiente:
[[Archivo:imagen.png|150px|link=http://comunidad.wikia.com/]] Sustituyendo http://comunidad.wikia.com/ por el enlace deseado.
- Usando una galería con imágenes enlazadas a las redes sociales, el resultado sería este:
Redes Sociales
Si queremos evitar que aparezca el botón de "añadir imagen", podemos usar el siguiente formato:
{| align="center"
|imagen A
|imagen B
|imagen C
|imagen D
|}
Resultado:
|
|
|
|
|
- Plantillas de Contenido: Contenidos, Artículo Destacado e Imagen Destacada
- Lo que realmente importa en un wiki es su contenido y su comunidad en relación a este. Es casi obligatorio destacar los contenidos principales del wiki en la portada, y siempre es mucho mejor destacar un artículo e una imagen que generen un interés en el visitante por ese contenido. En Build a Wiki - Portadas vimos cómo una diapositiva podía sernos muy útil en nuestra portada para destacar cierto contenido, y es cierto, pero ahora iremos un paso más allá. Una diapositiva combinada con una galería que enlace al contenido del wiki es el arma definitiva.
- La plantilla principal del contenido la llamaremos Contenido o Contenido Destacado. Aprovecharemos lo que aprendimos en la entrada de Build a Wiki - Portadas para crear una plantilla que muestre el contenido directamente a los ojos del visitante.
- Se trata de hacer llegar el contenido al lector, y lo mejor es hacerlo de forma visual, con imágenes y poco texto:
Contenido Destacado
Personajes
Lugares
Vehículos
Misiones
Episodios
- Lo que conseguimos con este tipo de plantillas es abarcar una gran cantidad de contenido en poco espacio gracias al sistema de categorías. Cada imagen enlaza a una categoría (según el wiki serán unas u otras), y esta a su vez enlaza a decenas de artículos. En la diapositiva podemos destacar ciertos artículos o blogs de importancia. En este caso he destacado los personajes principales del videojuego Quantum Break, pero podríamos destacar también un blog importante o algún tipo de concurso o votación en proceso en el Wiki.
- Además de una plantilla que destaque los contenidos del wiki, siempre es recomendable que la portada contenga un artículo destacado y/o una imagen destacada. Son secciones que no tienen secreto alguno:
Artículo Destacado
- Seguimos con el mismo esquema para la sección de la imagen destacada:
Imagen Destacada
- Plantillas de Noticias y Blogs
- En una comunidad la participación de los miembros que la forman es esencial para que esta pueda avanzar, ya sea creando artículos, blogs o noticias para el Wiki. Los Blogs son una forma de hacer que la comunidad interactúe con el contenido directamente, y que se hable de él en la sección de comentarios, cosa que aporta una experiencia mucho más directa. Los blogs informan, preguntan o proponen a la comunidad, son una herramienta muy útil de comunicación. Fomentan la creación de vínculos entre los miembros de las comunidades y se forman charlas mucho más cercanas entre estos mismos. Por esto, la visibilidad de los blogs es esencial, porque son uno de los pilares informativos del wiki y a la vez pueden fomentar la actividad dentro de la comunidad. Así pues, es vital añadir una sección de blogs en la portada de cualquier wiki.
- Para añadir los blogs a nuestra portada tendremos que insertar un pequeño código muy sencillo de usar:
<bloglist summary="" timestamp="true" count=3 summarylength="90" type=plain style="padding:2px !important;">
<order>date</order>
</bloglist>
- Donde:
- summary = resumen de la entrada
- timestamp = fecha de publicación
- count = número de entradas que se muestran
- summarylength = tamaño del resumen de la entrada en carácteres (recomendación: entre 90 y 140)
- Las etiquetas ''<order></order>'' indican el orden en el que se muestran las entradas, lo recomendable es por fecha, siendo el primer blog de la lista el más reciente.
- Nota: Quitar el "true" del código hará que se desactive la propiedad que contenía esa palabra. Por ejemplo, si quitamos el "true" a "summary" (resumen), no se mostrará el resumen de la entrada.
Más información sobre las listas de blogs en Ayuda:Blogs/Lista de Blogs.
- Nota: Quitar el "true" del código hará que se desactive la propiedad que contenía esa palabra. Por ejemplo, si quitamos el "true" a "summary" (resumen), no se mostrará el resumen de la entrada.
- Simplemente debemos insertar ese código en la plantilla y listo para ponerlos en la portada:
Blogs de la Comunidad
- Esta plantilla será la principal fuente de blogs y noticias del wiki en la portada, pero siempre podemos añadir una sección extra de noticias externas al wiki. Esto puede trare consecuencias tanto positivas como negativas para el wiki. Por un lado, puede provocar que los usuarios se desvíen hacia esos sitios externos, cosa que no queremos. Por otro lado, incluir esta plantilla en nuestro wiki puede fomentar la función de "hub" de la comunidad sobre el tema que trate.
- Para hacer aparecer noticias externas en nuestra portada, deberemos tratar de nuevo con un sencillo código:
<rss>https://news.google.de/news/feeds?pz=1&cf=all&ned=es&hl=es&q=Halo&output=rsss|short|date|max=4|charset=UTF-8</rss>
- Lo único que deberemos hacer es cambiar la palabra "Halo" por el nombre del contenido que queremos que se muestre. Si el wiki donde queremos incluir esta sección trata sobre Uncharted, añadiremos obviamente la palabra "Uncharted", sustituyendo la palabra "Halo" en el código de arriba.
- Una vez hecho esto, añadimos el código en nuestra plantilla y hemos terminado:
Noticias
"Disney nos obligará a eliminarlo": Naughty Dog coló a Guybrush Threepwood en Uncharted 4, pero no las tenía todas ... - Vida Extra - - 2024/04/18 17:30
- "Disney nos obligará a eliminarlo": Naughty Dog coló a Guybrush Threepwood en Uncharted 4, pero no las tenía todas ... Vida Extra...
FPC West Showcase Spotlight: Alberta DB welcomes uncharted territory with exposure opportunity ... - Canada Football Chat - - 2024/04/18 17:26
- FPC West Showcase Spotlight: Alberta DB welcomes uncharted territory with exposure opportunity ... Canada Football Chat...
UK Grapples With Uncharted Territory As "Red Lines" Crossed In Middle East - PoliticsHome - - 2024/04/18 11:43
- UK Grapples With Uncharted Territory As "Red Lines" Crossed In Middle East PoliticsHome...
Uncharted wonders: Ukrainian polar explorers unveil photo of rare whale - MSN - - 2024/04/18 09:15
- Uncharted wonders: Ukrainian polar explorers unveil photo of rare whale MSN...
Saskatoon police treading ‘uncharted waters’ with 8th homicide in 2024 - Global News - - 2024/04/17 20:09
- Saskatoon police treading ‘uncharted waters’ with 8th homicide in 2024 Global News...
- Nota: En el código, el número que sigue la palabra "max" indica el número de noticias que se mostrarán.
- Otras recomendaciones
- Sección de Vídeos Destacados: Añadir vídeos en nuestra portada puede convertirla en algo mucho más interesante de ver. Simplemente se trata de insertar vídeos en una plantilla. Con uno o dos es más que suficiente, y se deben ir actualizando de vez en cuando en caso de que salga contenido nuevo sobre el tema sobre el que trata la comunidad.
- Sección de Enlaces de Interés: Otra buena iniciativa es incluir enlaces hacia las webs oficiales del contenido en nuestro wiki, así como webs que pueden servir de ayuda a los usuarios. Por ejemplo, en el caso de Destiny, podríamos añadir enlaces hacia Bungie.net, destinygame.com o activision.com.
- Sección de Wikis Aliados o Afiliados: Si tenéis buena relación con otras comunidades y deseáis formar una alianza, algo fundamental es incluir una plantilla en la portada con el logotipo de la wiki en cuestión.
- Sección de Encuesta: Una sección muy útil, como vimos en Build a Wiki - Portadas.
Distribución recomendada
- Como os decía al principio del blog, las portadas de las comunidades se encuentran actualmente divididas en dos columnas, una más ancha que la otra. Las plantillas con más contenido, es recomendable colocarlas en la columna izquierda, pues es la más ancha, mientras que las plantillas menores las dejaremos en la columna derecha. Así pues, teniendo en cuenta las plantillas que hemos presentado en este blog, la distribución que recomendamos es la siguiente:
- Columna izquierda: Bienvenida, Contenidos, Blogs de la Comunidad, Vídeos Destacados y Enlaces de Interés.
- Columna derecha: Redes Sociales, Artículo Destacado, Encuesta, Noticias, Imagen Destacada, Wikis Aliados.
- "Bienvenida" y "Contenidos" es indispensable que se sitúen en la columna izquierda y en ese orden. Las demás pueden ser colocadas al gusto del usuario según este crea conveniente.
Consejos de diseño
- Usa colores poco saturados para el fondo de las plantillas. Evitar usar colores muy potentes y mucho mejor si utilizamos colores grisáceos, pues facilitan la lectura. Los fondos oscuros con letra clara y viceversa también facilitan la lectura. Además, usar colores poco saturados resaltará el contenido multimedia.
Ejemplos: Quantum Break Wiki, Kuroshitsuji Wiki, Fable Wiki, Just Cause Wiki, etc.
- Usa colores poco saturados para el fondo de las plantillas. Evitar usar colores muy potentes y mucho mejor si utilizamos colores grisáceos, pues facilitan la lectura. Los fondos oscuros con letra clara y viceversa también facilitan la lectura. Además, usar colores poco saturados resaltará el contenido multimedia.
- Usa una fuente algo más grande de lo normal en los encabezados de las plantillas, para diferenciar bien el cuerpo del título. En los encabezados sí que podemos usar colores más vivos, pues resaltaremos las secciones.
Ejemplos: CineMarvel, etc.
- Usa una fuente algo más grande de lo normal en los encabezados de las plantillas, para diferenciar bien el cuerpo del título. En los encabezados sí que podemos usar colores más vivos, pues resaltaremos las secciones.
- Trata de hacer un Diseño Temático. El diseño de cualquier cosa te tiene que hablar de lo que representa, es la cara del wiki y viéndolo podríamos adivinar en qué comunidad nos encontramos. Eso podemos conseguirlo usando colores o formas típicas del contenido que la comunidad representa, usando una fuente similar a la de las webs oficiales del contenido o usando los colores de uno de los personajes principales, entre otras muchas cosas.
Por ejemplo, en Wiki Minions, las formas y colores de las plantillas recuerdan a los mismos Minions. Otros ejemplos: Destinypedia, Halopedia, Mirror's Wiki, Wikihammer 40k, Hitman Wiki, etc.
- Trata de hacer un Diseño Temático. El diseño de cualquier cosa te tiene que hablar de lo que representa, es la cara del wiki y viéndolo podríamos adivinar en qué comunidad nos encontramos. Eso podemos conseguirlo usando colores o formas típicas del contenido que la comunidad representa, usando una fuente similar a la de las webs oficiales del contenido o usando los colores de uno de los personajes principales, entre otras muchas cosas.
Con esto podemos dar por terminada esta larga entrada de blog. En Build a Wiki - Portadas ya vimos cómo hacer portadas, aunque de una forma básica y sencilla, muy útil para aquellos usuarios nuevos y novatos que no saben cómo funciona el código de las plantillas. Aquí os hemos presentado técnicas avanzadas para hacer una portada sólida y que abarque más contenido, pero evidentemente requiere de ciertas nociones sobre código y sobre cómo funcionan las portadas y demás funcionalidades de Wikia. He tratado de explicar la estructura de la portada, el contenido que debería haber y, finalmente, he tratado de proporcionar ciertas bases sobre el diseño.
Y sobretodo, ¡no te desanimes si no entiendes nada o algunas cosas! He tratado de explicarlo paso a paso, repasando algunas cosas básicas y facilitando enlaces que os pueden ayudar mucho a entender todo, pero evidentemente es muy difícil que de primeras alguien sepa hacer portadas muy complejas.
Tiempo atrás... yo también fui un novato
Cuando empecé a editar en Wikia, no conocía nada sobre código. Ni siquiera sabía sobre el wikitexto y no tenía nociones muy buenas sobre diseño, pero gracias a la práctica y a mi persistencia, fui aprendiendo, sobretodo de otros wikis. Con el tiempo pude hacer plantillas por mi mismo, empecé a entender el CSS y mi gusto con el diseño se volvió más refinado, sabiendo elegir qué es conveniente y qué no en el diseño de un wiki o página web. No dudéis en aprender de otros, y en preguntar a los más experimentados, y si tenéis cualquier pregunta sobre esta entrada, ¡no dudéis en preguntar en los comentarios!
Enlaces de interés: - Benfutbol10 - Introducción al CSS
- Ayuda:CSS (Índice de todas las páginas de ayuda sobre CSS que hay)
- Ayuda:Blogs/Lista de Blogs
- Build a Wiki - Portadas
- Build a Wiki - CSS
- www.w3schools.com
¿Quieres recibir las últimas actualizaciones del blog de Fandom en español? ¡Haz clic aquí para seguir este blog!
¡Estamos realizando experimientos! ¡Aprende más sobre qué tipo de eventos y otras cosas hemos hecho o planeamos hacer!
¿Quieres hablar en tiempo real con otros editores y staff?
¡Únete a nuestro servidor oficial de Discord para usuarios registrados!
