Guía de estilos

A continuación se muestra una guía de estilos que se tiene que tener en cuenta a la hora de crear una entrada.

Consejos Generales

Para conseguir que el estilo y formato sean homogéneos con el resto de entradas publicadas en Mad In Flex, conviene seguir los siguientes consejos a la hora de redactar:

Si la entrada tiene una longitud considerable conviene usar el MetaTag "" . El inicio de la entrada será una introducción sobre lo que vamos a hablar y luego pondremos el tag "", de forma que el usuario vaya a la página con la entrada entera. La introducción no debería exceder las 150 palabras. (este dato es sólo una orientación y puede variar dependiendo del caso). El objetivo es que la página principal no crezca demasiado.
Los ficheros que acompañen la entrada (swf, jpg, zip,…), se subirán al servidor mediante la opción de fileupload en wordpress. (la opción está justo debajo del editor de entradas).
Cuando introduzcamos SWFs, hay que crear una versión en JPG que aparecerá cuando el usuario no tenga flash player instalado o en la versión para imprimir de la entrada.
Si metemos una Tabla de Contenidos (con ""), está debe ir siempre detrás del "". Dicha tabla se genera automáticamente apartir de los encabezamientos creados con los tags H2, H3 y H4.
H1 está reservado para el título de la entrada de forma automática.
Es conveniente usar un lenguaje lo más correcto posible, e intentar utilizar lo menos posible emoticones (aunque luego se usen en la parte de comentarios, el autor debería intentar escribir de una forma sobria). Nuevamente esto es un consejo y depende enteramente del caso concreto. Finalmente lo que debe imperar siempre es el sentido común.

Elementos

Los posibles elementos que pueden ser necesarios a la hora de componer una entrada se muestran a continuación:

Etiqueta <!—noteaser-->

Sirve para separar la introducción de una entrada del artículo en sí. Una entrada cualquiera debería ser como sigue:

INTRODUCCIÓN DEL ARTÍCULO ( parte que se verá en la página inicial de MIF
).
Está intro no debería ser muy grande. quizás 150 o 200 palabras...
(números a modo simplemente orientativo)


 (opcional)

<h2>
....
COMIENZO DEL ARTÍCULO (Este será el artículo/tutorial/Caso de uso,etc...)
....
....
FIN DEL ARTÍCULO

De esta forma se consigue un estilo bastante elegante a la vez que separamos una pequeña intro del artículo general.

Subir Ficheros Al servidor

Mediante la interface de Wordpress se pueden subir imágenes, swfs, zips, etc… al servidor. Justo debajo del editor de texto de una entrada. Conviene definir el título y la descripción ya que son entradas que luego se guardan en la base de datos.

Introducir SWF

Los SWFs se introducen de la siguiente forma:

[swf]/swf/cairngorm2_rpc.swf,400,300,9,#ffffff,url_en_caso_de_no_encontrarlo[/swf]

El resultado sería:

(Flash Player 9 Requerido)

Es necesario crear una captura del SWF en JPG, para que se utilice en dos casos:

Cuando el usuario no tiene Flash Player instalado
Para la versión de la entrada para imprimir.

Notas: Conviene que el SWF tenga de ancho 400. El alto depende del SWF en si.

Introducir CÓDIGO con FTF

Si queremos introducir código usaremos la siguiente forma (a modo de ejemplo):

[ftf w="450" h="200"]package sessions.model {

import com.adobe.cairngorm.model.ModelLocator;
import mx.collections.ArrayCollection;

public class SessionsModelLocator implements ModelLocator {
private static var modelLocator:SessionsModelLocator;

public static function getInstance():SessionsModelLocator {
if (modelLocator == null)
modelLocator = new SessionsModelLocator();
}
}
[/ftf]

Nota: Conviene que el CÓDIGO tenga de ancho 400. El alto depende del SWF en si.

Ejemplo

A continuación un pequeño ejemplo...

Código del Ejemplo

A continuación se puede ver un ejemplo de como sería el código de una entrada cualquiera:

<img align="left" title="Imagen de ejemplo" alt="Imagen de ejemplo" src="http://www.madeinflex.com/madeinflex/img/img_post_example.jpg" />

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla viverra. Nam hendrerit ante quis risus. Aliquam urna. Curabitur id massa ut lectus imperdiet condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec et lacus. Aenean at sem. Fusce varius, tellus ultrices sollicitudin vehicula, mi ipsum scelerisque dui, eget volutpat urna elit nec felis. Mauris feugiat justo et eros. Etiam mauris. Nam tempor orci vitae mi. Duis ultricies dignissim lorem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam erat mauris, dictum nec, faucibus gravida, ullamcorper sed, purus. Sed et massa eu velit suscipit laoreet. Mauris arcu eros, varius sed, pulvinar eu, lacinia a, ante.





<h2>Titulo 1</h2>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla viverra. Nam hendrerit ante quis risus. Aliquam urna. Curabitur id massa ut lectus imperdiet condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec et lacus. Aenean at sem. Fusce varius, tellus ultrices sollicitudin vehicula, mi ipsum scelerisque dui, eget volutpat urna elit nec felis. Mauris feugiat justo et eros. Etiam mauris. Nam tempor orci vitae mi. Duis ultricies dignissim lorem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam erat mauris, dictum nec, faucibus gravida, ullamcorper sed, purus. Sed et massa eu velit suscipit laoreet. Mauris arcu eros, varius sed, pulvinar eu, lacinia a, ante.

<h3>Titulo 1.1</h3>

<img align="right" title="Imagen de ejemplo" alt="Imagen de ejemplo" src="http://www.madeinflex.com/madeinflex/img/img_post_example.jpg" />

Duis pulvinar sagittis mauris. Curabitur vitae massa ac nisi lobortis nonummy. Fusce eget leo. Nulla facilisi. Nulla elit magna, sagittis vel, vestibulum ac, laoreet ut, ligula. Quisque imperdiet, nisi in egestas tincidunt, nulla nisi facilisis nunc, in lobortis nisl orci id nibh. Mauris quis enim. Sed eu mi. Praesent diam odio, nonummy pretium, ullamcorper id, porttitor non, risus. Suspendisse pulvinar odio vel nisi. Vivamus auctor tincidunt magna. Nam varius elit a ligula. Vestibulum nisi. Donec est. Maecenas a leo eu nibh fringilla fermentum. In hac habitasse platea dictumst. Etiam dolor. Curabitur tristique euismod magna.

<h4>Titulo 1.2</h4>
Duis pulvinar sagittis mauris. Curabitur vitae massa ac nisi lobortis nonummy. Fusce eget leo. Nulla facilisi. Nulla elit magna

<h2>Titulo 2</h2>

Duis pulvinar sagittis mauris. Curabitur vitae massa ac nisi lobortis nonummy. Fusce eget leo. Nulla facilisi. Nulla elit magna, sagittis vel, vestibulum ac, laoreet ut, ligula. Quisque imperdiet, nisi in egestas tincidunt, nulla nisi facilisis nunc, in lobortis nisl orci id nibh. Mauris quis enim. Sed eu mi. Praesent diam odio, nonummy pretium, ullamcorper id, porttitor non, risus. Suspendisse pulvinar odio vel nisi. Vivamus auctor tincidunt magna. Nam varius elit a ligula. Vestibulum nisi. Donec est. Maecenas a leo eu nibh fringilla fermentum. In hac habitasse platea dictumst. Etiam dolor. Curabitur tristique euismod magna.

<h2>Titulo 3</h2>

Duis pulvinar sagittis mauris. Curabitur vitae massa ac nisi lobortis nonummy. Fusce eget leo. Nulla facilisi. Nulla elit magna, sagittis vel, vestibulum ac, laoreet ut, ligula. Quisque imperdiet, nisi in egestas tincidunt, nulla nisi facilisis nunc, in lobortis nisl orci id nibh. Mauris quis enim. Sed eu mi. Praesent diam odio, nonummy pretium, ullamcorper id, porttitor non, risus. Suspendisse pulvinar odio vel nisi. Vivamus auctor tincidunt magna. Nam varius elit a ligula. Vestibulum nisi. Donec est. Maecenas a leo eu nibh fringilla fermentum. In hac habitasse platea dictumst. Etiam dolor. Curabitur tristique euismod magna.