#Style guide

Esta guía pretende ser una referencia a la hora de elaborar cualquier contenido a públicar en radiogay.es. En ella se explican los requisitos técnicos de los contenidos, así como un “estilo unificado” a la hora de redactar las distintas obras, para que todos los trabajos de los colaboradores mantengan una coherencia en títulos, textos, imágenes, videos, hipervínculos…

Categorías (o Secciones)

Música: estos contenidos siempre llevan asociados un videoclip de youtube (o vimeo).

  • Classics: temas musicales no actuales con cierta vinculación al ambiente gay (lgtb) comúnmente llamados “himnos gays”. Suelen llevar pequeñas anotaciones de la biografía del artista.
  • Tops: éxitos musicales de actualidad (o recientes). Les acompaña un escueto comentario sobre el single, álbum…

Noticias: informaciones relacionadas generalmente con asociaciones lgtb, política…

  • Nacional: información de actualidad de nuestro país.
  • Internacional: información proveniente de fuera de nuestras fronteras.
  • Reportajes: contenidos informativos con un carácter documental extenso, pueden tratarse también de hechos históricos.

Píldoras: reseñas culturales sobre diversos temas.

  • Arte y espectáculos
  • Celebrities
  • Cine: estos contenidos siempre llevan asociados un vídeo con el trailer de la película en youtube (o vimeo).
  • Deporte
  • Libros
  • Salud
  • Tecnología
  • Televisión
  • Tendencias: moda, belleza…
  • Viajes: destinos lgtb+

Radio

  • Programas: esta sección no se trata de una categoría real (página), incluirá información de todos los programas, parrilla de programación…
  • Podcasts: contenido con audio asociado.
    • Gaystation

Agenda

Dispone de una aplicación propia (plugin) en el que publicar los eventos, con gestión propia de categorías. La aplicación permite que se muestren en el calendario “Agenda” (espacio lateral derecha, Sidebar).

La categoría “Agenda” se usará para aquellos eventos que requieran un articulo en el que detallar horarios, localizaciones… Teniéndose que enlazar desde la aplicación especifica el evento con la entrada mediante su url (enlace permanente).

Contenidos (Post)

Actualmente para todos los contenidos existen 4 formatos distintos:

  • Estándar imagen destacada (620×350) Noticias…
  • Vídeo (620 de ancho, altura manteniendo la proporción). Música, Cine.
  • Galería conjunto de distintas imágenes (preferiblemente 620×350). No está ligado con ninguna categoría en concreto.
  • Audio imagen destacada (620×350) + Audio. Podcasts.

Absolutamente todos los contenidos deben cumplir estos requisitos:

  • Titulo y enlace permanente en función del titulo.
    • Si se modifica el titulo se debe rectificar el enlace (borrando el enlace se asigna automáticamente el nuevo).
    • Ciertas secciones como Música (Classics + Tops), Cine, Libros… tienen una estructura y formato que se debe respetar:
      • ARTISTA MAYÚSCULAS – Titulo (Año si se detalla)
      • TITULO DEL FILM – de Director (Año si se detalla)
  • Texto:
    • Se debe separar el texto introductorio del resto mediante la etiqueta “More”.
    • En textos extensos se deben destacar mediante:
      • NegritaBold (Ctrl+B) palabras claves
      • Cursiva: Italic (Ctrl+I) nombres, citas…
      • Subrayado no se usa.
    • Al copiar y pegar textos de fuentes permitidas (Wikipedia, Creative Commons) se debe:
      • Pegar como texto plano o Borrar el formato original mediante la utilidad goma (eliminar formato)
      • Eliminar los enlaces existentes mediante la utilidad desvincular (se puede hacer todo el texto de una vez).
    • Justifiación completa de textos si o no?
    • No se utilizan colores para destacar textos.
    • Utilizar correctamente los formatos: Titulo 1, 2, 3, 4, 5, 6. Cita
    • En textos extensos se pueden utilizar columnas: 1/2, 1/3, 2/3, 1/4, 3/4. Siempre cerrando correctamente la ultima columna.
  • Freatured post? se marcará esta opción para los contenidos que queramos que se destaquen en el “carrusel” (flexslider) de la portada principal y cabeceras de sección.
  • Video Embed Code indispensable para los contenidos con formato Video. (Existe otra opción, que veremos más adelante, para incluir vídeos en contenidos donde este no sea el elemento principal). El ancho del video siempre debe ser 620 y la altura manteniendo la proporcionalidad.
  • Comentarios de Facebook (predeterminado): Page Options > Coment Type: Facebook Comments.
  • Categoría: deben estar asignados a su categoría correspondiente, no siendo necesario asignarla a la categoría superior.
  • Etiquetas: asignar entre 1 y 6 palabras claves.

Hipervinculos

Siempre marcar la opción Abrir enlace en una nueva ventana/pestaña (se intentará programar por defecto)

Imágenes

Debido a los formatos del sitio web es indispensable que todas las imágenes destacadas tengan al menos un tamaño de 620×350 pixeles (mínimo). Las imágenes con tamaños superiores serán redimensionadas/recortadas automaticamente a los distintos tamaños que se usan, principalmente:

  • 620×350
  • 290×166
  • 300×300
  • 50×50

Es importante que la imagen que se seleccione como destacada tenga los elementos importantes centrados y tenga una relación de aspecto 16:9 para evitar que el sistema la corte. Por ejemplo:

ejemplo imagen origen error

Imágen original

ejemplo imagen error

Imágen redimensionada y recortada automáticamente por el sistema

El sistema de publicación dispone de la utilidad de editar las imágenes una vez subidas al servidor: Recortar, Rotar, Voltear. Si se edita una imagen una vez publicado el post es importante comprobar que se han aplicado los cambios a todos los tamaños correctamente o forzar la regeneración.

Se pueden subir una o varias imágenes al interior del texto y “maquetar” el texto del articulo mediante alineaciones, columnas…

Asignar a las imágenes pie de foto (leyenda) explicativo si lo requieren.

Para buscar imágenes mediante google:

Páginas

  • Aviso Legal: condiciones generales de uso y advertencias legales de titular web, LOPD, cookies…
  • Ayuda página con FAQ donde ofrecer al usuario del sitio web ayuda básica sobre el player de radio…
  • Club: proyecto futuro de fidelización del oyente.
  • Contacto: formulario de contacto y principales datos.
  • Participa: espacio para ponerle fácil al oyente participar e interactuar con radiogay. Peticiones del oyente, votaciones, top, encuestas…
  • Publicidad: información sobre audiencia (oyentes radio y visitas web), enlace con agencia adionomy, correo de contacto para más info.
  • Staff: información sobre que és y quienes hacen posible el proyecto radiogay.es.
  • Además las páginas que coinciden en nombre con sus categorías correspondientes, se usan para personalizar las distintas páginas de inicio (principal y por categoría). Por el momento las de subcategorias no se están usando. Actualmente  los menús enlazan las subcategorías con las navegación automática (blog estilo 1 y 2).

Shortcodes

  • Columnas: 1/2, 1/3, 2/3, 1/4, 3/4 y [last]
  • Botones: Pequeño, Mediano, Grande / Normal, Redondo, Cuadrado / Gris, Azul, Rojo, Verde, Negro
  • Alertas: roja (advertencia), verde (confirmación), amarilla (importante), azul (información)
  • Video: (Youtube, Vimeo)

  • Audio:
  • Módulos (categorías): A (1/2) Half / B (1/1) Full / C (1/4) / Gallery (1/1)
  • Tabs: 2-6

shortcodes

Ejemplohttp://radiogay.es/shortcodes/

Fuente

El sitio utiliza la fuente “Open Sans” de Google font

Ejemplohttp://radiogay.es/typography/

Colores

  • Rosa #DE1578 (222,21,120)
  • Gris #AAAAAA (170,170,170)
  • Casi negro #444444 (68,68,68)
  • Otros colores:
    • Casi negro 2 #333333 (51,51,51)
    • Casi negro 3 #222222 (34,34,34)
    • Negro #000000 (0,0,0)
    • Blanco #FFFFFF (255,255,255)

#de1578#ec7eb5#f4b7d5#f8d0e4
#ffffff#aaaaaa#bbbbbb#cccccc
#000000#111111#222222#333333#444444
#f9ba00

Logotipo

 
logo (2)