Fandom

Central de Wikia

Comentarios10

Build a Wiki - Portadas Avanzadas

¡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.

Build a Wiki - Portadas Avanzadas
Build a Wiki

¡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:
Redes Sociales


Twitter - Facebook




¿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.
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 1.788 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:
Redes Sociales


Twitter - Facebook - Chat - YouTube


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:

Youtube.png Twitter.png Facebook.png Google+.png


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


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

Durarara!!
Durarara!!
Durarara!! es una serie de novelas ligeras escritas por Ryohgo Narita, con ilustraciones de Suzuhito Yasuda. [...]


Seguimos con el mismo esquema para la sección de la imagen destacada:
Imagen Destacada

Gamescom 2015
Gamescom 2015


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.
Simplemente debemos insertar ese código en la plantilla y listo para ponerlos en la portada:


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

Loading RSS data...


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.


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 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.
  • 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.


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:


¿Olvidaste lo anterior? ¡Vuelve a atrás y echa un vistazo!
Build a Wiki, un cursillo perteneciente a la Universidad de Wikia
Continua tu aprendizaje en la siguiente entrada de Build a Wiki

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



Espartannoble6.jpg
David Oliver participa en Wikia desde 2011. Administra varias comunidades y es Helper, ayudando a las comunidades que lo necesitan en lo que concierne al diseño. Además, colabora en la Comunidad Central y ayuda al Staff con diversas tareas. Sus aficiones son el arte, el diseño y los videojuegos, entre muchas otras.

Spotlights de otros wikis

Wiki al azar