Hoja de Estilo

Preámbulo

Tras la incorporación de la nueva web y el aumento de autores de noticias, nos vemos a redactar esta hoja de estilo que servirá como canon para escribir cualquier artículo o documento que vaya a ser publicado en la web. A esto no se le aplicarán los post del foro y los comentarios de las noticias.

Este texto podrá ser modificado con cierta regularidad debido al cámbio de elementos propios de la web y la forma de usar estos.

Contenido y temario

En este apartado se especifica el contenido que deben tener las noticias publicadas en la web. Se habla tanto de temario como de la forma del contenido en sí.

• Las noticias escribirán sobre (pero sin limitarse a): consolas y videojuegos en general (novedades, trailers, reviews), tecnología de a pie (teléfonos, hardware y software de pc), curiosidades de la web (videos, viñetas, artículos de blogs), anuncios directa o indirectamente relacionados al clan (nuevas infraestructuras, convocatorias, incorporaciones) o actividades culturales (eventos, conciertos, convenciones).
• Se recuerda que las noticias pueden presentarse en la portada de la web por lo que se debe tener cuidado con lo que se escribe, ya que afectan directamente a la imagen del clan. Por lo tanto, no se recomienda escribir sobre noticias de ámbito general sujetos a polémica, como política o noticias de ámbito social. Ya existen otras publicaciones dedicadas a dichos. En cualquier caso existe el foro donde se pueden comentar dichos temas, siempre con el total respeto.
• Queda prohibido hacer publicidad o propaganda sobre cualquier producto o servicio sin el explícito consentimiento del Clan. Sin embargo, como norma general, siempre apoyaremos el trabajo personal realizado por nuestros miembros, siempre que no haya competencia entre varios.
• Algunas de las noticias no serán directamente publicadas en portada. Artículos de menor relevancia o importancia serán mostrados en el módulo colocado para tal fin. Esta decisión será tomada por el equipo de publicadores.
• Desde el momento de su envío, el Clan OLÉ! se hace con todos los derechos sobre el artículo, pudiendo copiarlo y modificarlo bajo su criterio. Sin embargo, el Clan OLÉ! se compromete a incluir el nombre del autor en cualquier reproducción total o parcial de la misma. En cualquier caso, el autor se hará siempre responsable de su contenido.
• A la hora de copiar contenido de otras webs, hay que mirar si está protegido por copyright y siempre incluir la fuente. El estándar de esta web será este (tomando como ejemplo esta misma página):

  <em>Fuente:</em> <a href="http://clanole.com/enlaces/hoja-de-estilo" title="Clanole.com" >Clanole.com</a>

  Quedando así:

  Fuente: Clanole.com

  Puede parecer que hay muchas etiquetas, pero no hay que olvidarse de incluirlo dentro de su propio párrafo.

Estilo en general

Aquí se describe el estilo y la maquetación que deberán seguir todas las noticias. Aunque algo no se encuentre aquí escrito, usando el sentido común ya se denota lo que es inncesario, incoherente, antiestético o lo que está fuera de lugar.

Párrafos, títulos y alineado

• El artículo deberá ir dividido en párrafos de longitud adecuada y regular, con el fin de facilitar su lectura.
• No es recomendable abusar de títulos de alto nivel. Jamás deberás utilizar títulos de categoría h1 ya que esto corresponde al título mismo del artículo. El uso de h2 queda también desaconsejado, ya que es demasiado grande. Los títulos más pequeños son mucho más adecuados para presentar el contenido.
• En cualquier caso, no deberás poner ningún título dentro de la parte que se mostrará en la portada, antes del Leer más.
• Centrar tanto párrafos como texto por norma general está desaconsejado, ya rompe la linealidad vertical del texto. Una excepción sería un texto descriptivo sobre o bajo un vídeo o imagen.

Formato de texto

• Se utilizará el mínimo posible de cambios de formato. Abusar de ello provoca que el contenido quede poco uniforme y caotico. Utilizarlo en puntos concretos hará que se aumente la atención a dichos elementos.
• Se usará negrita para resaltar palabras importantes como un nombre, una fecha o alguna palabra como "Deberán presentarse todos los días".
• Se usará la cursiva o itálica para marcar términos extranjeros, expresiones técnicas o citaciones y también para nombres propios de obras literarias, barcos, etc. Ejemplo: "Un error comúnmente conocido como buffer overflow".
• Los colores generalmente tampoco son necesarios. Se usarán en caso de que ayuden en la lectura, por ejemplo, para diferenciar características de dos productos, cuando dichas características estén escritas de forma lineal, sin diferenciar.
• Los enlaces ya llevan un color diferente debido al template. Por ello, es mejor no poner ningún añadido de formato a estos, ya que se diferencian bastante bien.

Metadatos

• El título del artículo deberá ser claro y conciso. Algo como "Próximas novedades" no dice nada, cuando "Lanzamientos de juegos para Navidad" incita a leerlo. La longitud deberá ser suficiente como para que quepe en una sola línea en la portada.
• El alias es la URL que tendrá el artículo cuando se haga click en Leer más. Deberá ser casi idéntico al título salvo que se quitan palabras como pronombres o artículos, tal y como lo haríamos al formar un acrónimo. Se recomienda no modificarlo después de que el artículo lleve un tiempo online, ya que rompe los enlaces desde otras webs y confunde a los buscadores.
• En la descripción pondremos un resumen de unas ocho palabras de lo que va el artículo. Un ejemplo es: "Armas disponibles para desbloquear en Bad Company 2", si el artículo tratara sobre ese tema. Esta descripción es en mayor parte para que los buscadores encuentren mejor el contenido.
• En las palabras clave pondremos palabras que utilizariamos en un buscador para toparnos con el artículo. Siguiendo con el ejemplo anterior, "bad, company, armas, desbloqueables" sería recomendable.

Imágenes y vídeos

La inclusión de imágenes, vídeos u otro contenido multimedia en una publicación es indicador de calidad y atrae al lector, pero hay que seguir unas pautas para que quede estético, uniforme y organizado.

• No fuerces el poner imágenes en una noticia. Queda bien y llama la atención, pero si es irrelevante o no va relacionado con el contenido es mejor no ponerla.
• Se buscará siempre el contenido con la mejor calidad posible, sin que esto suponga un impedimento.
• En el caso de que la imagen no contenga mucho detalle y sea de tamaño pequeño o medio podrá incluirse incrustada directamente en la noticia. En el caso de las imágenes grandes se usará el sistema Shadowbox para su colocación, siendo necesaria una miniatura.
• En el caso de los videos se aplica la misma norma, solo que en el caso de que el video vaya en el cuerpo de la noticia no será necesario. Para más información consultar el apartado de tecnicidades. Ahí también encontraréis instrucciones para sacar miniaturas de google.
• Los vídeos nunca deben empezar a reproducirse automáticamente. Esto perjudica al lector obligandole a pausarlo o tener que volver a empezar.
• Hacer que el navegador tenga que redimensionar la imagen indicando la anchura o altura en las etiquetas no está recomendado, ya que generalmente es inestable. Se pueden subir imágenes de las noticias a nuestro servidor, siempre de un tamaño y cantidades razonables (max. 3 imágenes < 100kB por noticia). Para ello, es recomendable el formato JPEG de calidad %75.
• A la hora de subir dichas imágenes hay que hacerlo de manera organizada, ya que todos compartimos servidor. Se creará una subcarpeta con el nombre del autor en la carpeta media donde subirá las imágenes. El nombre de los archivos deberá ser <alias de la noticia>-<número>.jpg. Esto servirá para poder localizarlos para futuras ediciones.
• En cualquier caso, las imágenes deberán llevar obligatoriamente una descripción (atributo alt), tal y como indica el estándar XHTML. Bastará con un par de palabras como "Battlefield 3" en una imagen sobre Battlefield 3. Algo como "Soldado apuntando con una ballesta a un ciervo" sería totalmente innecesario.

Leer más

En todos los artículos habrá una pequeña sección que se mostrará en portada, ocultando el cuerpo de la noticia mediante un enlace. Aquí se tratarán sus requisitos.

• La cabecera de las noticias deberá ser breve pero en su medida. Un alto adecuado sería de entre 300 y 400 píxeles incluyendo téxto e imágen.
• En el caso de incluir una imágen, esta deberá ocupar todo el ancho (430 píxeles) o menos de la mitada, para que el texto quede a su alrededor. Para hacer esto posible, le añadiremos la clase (atributo class) portada. Con ello lograremos dicho efecto, además de un márgen para que el texto no esté pegado.
• Esto último también se aplica a las miniaturas de vídeos, ya que se consideran imágenes como las demás.
• El fin de la cabecera se marcará con la siguiente etiqueta:

  <hr id="system-readmore" />

  Se recuerda que todas las etiquetas anteriores deberán estar cerradas antes de poner dicha etiqueta. También existe un botón que pone este código automáticamente.

XHTML, CSS y tecnicidades

Este apartado contiene las indicaciones técnicas. El lenguaje de la web es XHTML y por lo tanto se deberán seguir todas sus normas y el documento deberá ser validado por el validador W3C. Más información en la Wikipedia. Todo lo que aparece ahi debe ser respetado, a parte de lo que viene a continuacion.

Además se usará en la mayor medida posible estilos CSS, ya que facilita el entendimiento y la futura editabilidad.

• Cada párrafo deberá ir entre etiquetas p. Es decir, no puede haber un salto de línea dentro de un párrafo. Por lo tanto, el uso de la etiqueta de salto de linea br, que en contadas ocasiones se utiliza, queda totalmente desaconsejado. Esto es incorrecto:

  <p>Párrafo 1
  Párrafo 2</p>

  Debe ser así:

  <p>Párrafo 1</p>
  <p>Párrafo 2</p>

• Para aplicar formato a a una parte del párrafo, y dicho formato solo consista en un elemento entre negrita, cursiva o subrayado, se podrá usar la etiquta correspondiente (strong, em o u respectivamente).
• Para aplicar formato a a una parte del párrafo, y dicho formato tenga más de un elemento (cursiva y subrayado ya son dos), se deberá usar la etiqueta span con el atributo style correspondiente. El style es el estilo CSS que queramos ponerle a dicha parte.
• Si el formato va para todo un párrafo, título, imágen, enlace o cualquier otro elemento, se usará el atributo style en dicha etiqueta.
• Si el formato va para múltiples elementos, se usará la etiqueta div envolviendo dichos elementos y poniendole el estilo CSS a dicho div.
• A la hora de usar enumeraciones, se usarán los estilos proporcionados por el template, siendo bullet-1 el usado en primer lugar y los siguientes solo en el caso de que se necesite diferenciar una enumeración de la otra. Un pequeño ejemplo:

  <ul class="bullet-1">
  <li>Primer elemento</li>
  <li>Segundo elemento</li>
  ...
  </ul>

• Todos los enlaces deberán incluir el atributo title, donde se indica una descripción de adonde lleva. Es lo que saldrá cuando coloquemos el ratón encima del link.
• Si cualquier URL lleva el símbolo &, deberá ser sustituido por la expresión &amp;. Esto es debido a que el & tiene un significado especial y va en contra del estándar escribirlo tal cual.
• El estándar XHTML indica que todas las etiquetas deberán estar cerradas. Debido a esto, aplicado a nuestra web, todas las etiquetas tienen que estar cerradas antes de colocar el tag hr del "Leer más". Si no se tiene cuidado se puede descuadrar toda la portada.

Shadowbox y miniaturas

Disponemos de la extensión Shadowbox para colgar vídeos e imágenes grandes (y más cosas) en la web. Sus indicaciones se encuentran en este enlace, pero aquí comentaré sus usos más frecuentes.

• Añadir un contenido con el shadowbox es tan facil como añadir un enlace. La única diferencia es que hay que añadir el atributo rel que contiene shadowbox. La ruta del enlace (href) será el contenido que queramos que aparezca al hacer click. Ejemplo:

  <a href="/enlace al contenido" rel="shadowbox" title="descripción (recomendado)">Click Aquí</a>

• Para colgar un vídeo de Youtube, si utilizaramos un enlace del tipo http://www.youtube.com/watch?v=XXXXXXXXXXX saldría una ventana con la página entera del vídeo embebido. En su lugar hay que usar el enlace http://www.youtube.com/v/XXXXXXXXXXX, que hace referencia solo al reproductor. También es importante borrar todo lo que vaya después, como $amp;feature=related.
• Es recomendable y más elegante incluir una miniatura en vez de un texto enlazado. Para ello hay que subir una imagen del tamaño deseado y ponerlo en vez del texto enlazado, utilizando img en vez del texto.
• Hay una manera muy facil de extraer miniaturas limpias de youtube. Se encuentran en http://img.youtube.com/vi/XXXXXXXXXXX/0.jpg, pero cambiando el código de la imagen. Si desearamos una minatura pequeña (como las que aparecen en los resultados de la búsqueda, cambiaríamos ese 0.jpg por 2.jpg. Ejemplo para incluir en el cuerpo de la noticia (¿recuerdas que en la cabecera no se pueden tan grandes?):

  <a href="http://www.youtube.com/v/XXXXXXXXXXX" rel="shadowbox"><img src="http://img.youtube.com/vi/XXXXXXXXXXX/0.jpg" alt="Descripción" /></a>

• Para más información se puede consultar el enlace de más arriba.

Otras recomendaciones

• Al copiar contenido de otras webs, asegurarse siempre de que todo cumple con este documento. Por ejemplo, es muy facil encontrarnos con etiquetas alt incorrectas en sitios como Photobucket.
• Al acabar, hay que revisar siempre lo escrito en busca de fallos. Una noticia se escribe solo una vez, pero se lee muchas, así que hazlo bien.
• La ortografía y gramática son muy esenciales. Son necesarias para entender bien el contenido y da una imagen de seriedad y respeto.

Este documento es un borrador sin acabar

• < Previo
• Siguiente >