Tutorial creado por [[http://www.argentop2p.net/index.php?action=profile;u=24532|ThecaTTony]]. ====== Descripción y uso del editor ====== En este articulo se explican las funciones y botones del editor de SMF o simplemente el editor de texto del foro. ---- {{ :foro:dyue_editor.png?direct |}} ===== Sección rojiza ===== {{ :foro:dyue_icono01.png?nolink |}} En la primer parte del editor encontramos el campo de **Asunto** e **Icono del mensaje**. Todos los topics que contengan material a compartir deben empezar con el prefijo **(COM)**, así luego son indexados para su rápida búsqueda. Ejemplo: <code>(COM) Descripción y uso del editor de SMF</code> {{ :foro:dyue_resultados01.png?direct |}} Como opcional se puede especificar un icono para el topic, a excepción de **Topic Solved** que se guarda para marcar temas que se hayan resuelto (sección de soporte) o para aquellas guías y manuales que se hayan migrado a este wiki. ===== Sección rosada o fucsia ===== {{ :foro:dyue_icono02.png?nolink |}} Estos primeros ocho botones tienen como finalidad formatear el texto y su uso es muy sencillo y familiar, cualquier editor de texto (Word, Writer, AbiWord, etc). Debajo se muestra un ejemplo del uso de cada uno y su resultado. <code>Texto normal [b]Texto negritas[/b] [i]Texto cursiva[/i] [u]Texto subrayado[/u] [s]Texto tachado[/s] [pre]Texto preformateado[/pre] [left]Texto alineado a la izquierda[/left] [center]Texto centrado[/center] [right]Texto alineado a la derecha[/right]</code> {{ :foro:dyue_resultados02.png?direct |}} Se puede notar que al preformatear un texto, su fuente cambia por una mono-espaciada. También pueden notar que en el ejemplo dado la alineación a la izquierda ya se aplica por defecto, pero cuando se trabaja con tablas puede llegar a ser necesaria. ===== Sección violeta o lila ===== {{ :foro:dyue_icono03.png?nolink |}} Aquí la edición se empieza a volver compleja ya que los códigos **BB** dejan de ser simples letras. Estando en el editor, se selecciona un texto y mediante cualquiera de los tres menús desplegables (tipo, tamaño y color de fuente) se le aplican las modificaciones deseadas. A continuación unos ejemplos: <code>Texto con fuente normal [font=arial black]Texto con fuente arial black[/font] [font=times new roman]Texto con fuente times new roman[/font] Texto tamaño normal [size=10pt]Texto tamaño 10p[/size] [size=14pt]Texto tamaño 14pt[/size] [size=18pt]Texto tamaño 18pt[/size] [color=red]Texto rojo[/color] [color=green]Texto verde[/color] [color=blue]Texto azul[/color]</code> {{ :foro:dyue_resultados03.png?direct |}} <fc #ff0000>Aclaración:</fc> Si miran bien los resultados de cambio de fuente, podrán notar que las fuentes seleccionadas no son realmente las que se indican (Arial Black y Times New Roman), eso se debe a que esta guía se realizó bajo Linux, sin tener las fuentes propietarias de Microsoft instaladas. ===== Sección celeste ===== {{ :foro:dyue_icono04.png?nolink |}} Estos botones serán muy útiles a la hora de insertar imágenes, enlaces y medios. Las siguientes dos guías explican fácilmente y en detalle como subir y/o mostrar imágenes o videos de youtube en el foro: [[foro:insertar_video_de_youtube_en_argentop2p]] [[foro:como_crear_un_mensaje_nuevo_desde_cero#plantilla_y_explicacion|Otra manera de insertar videos]] [[foro:subir_imagenes_al_foro_recomendado]] <code>[flash=550,350]http://www.youtube.com/v/YE7VzlLtp-4[/flash] [img]http://imagenes.argentop2p.com.ar/di/FNKI/smflogo.png[/img] [url]http://wiki.argentop2p.com.ar[/url] [url=http://wiki.argentop2p.com.ar]ArgentoWiki[/url] [url=http://wiki.argentop2p.com.ar][img]http://imagenes.argentop2p.com.ar/di/FNKI/smflogo.png[/img][/url] [email]usuario@argentop2p.net[/email] [email=usuario@argentop2p.net]Click para enviar eMail[/email] [ftp]ftp://wikipedia.com[/ftp] [ftp=ftp://wikipedia.com]FTP Wikipedia[/ftp]</code> {{ :foro:dyue_resultados04.png?direct |}} Dejando de lado los dos primeros tags, que ya cuentan con sus respectivas explicaciones, pueden notar que el uso de **[URL]**, **[email]** y **[ftp]** son idénticos. Los mismos se pueden usar para resaltar directamente la URL o dirección de email, para que un texto cliqueable lleve a un enlace o para mostrar una imagen cliqueable que abra ese URL o email. ===== Sección verde ===== {{ :foro:dyue_icono05.png?nolink |}} Los botones de esta sección son para utilizar opciones de efectos de texto más avanzados. Primero se encuentra el efecto glow (mal llamado botón en la traducción), efecto sobra, texto en movimiento, subindice, superindice y por último teletexto (otra maña traducción). <code>[glow=blue,2,300]Texto botón[/glow] [shadow=green,left]Texto sombreado[/shadow] [move]Texto en movimiento[/move] Texto normal [sup]superindice[/sup] Texto normal [sub]subindice[/sub] AABBCCDDEE aabbccddee [tt]AABBCCDDEE aabbccddee[/tt]</code> {{ :foro:dyue_resultados05.png?direct |}} Tanto al efecto glow como shadow se le puede cambiar el color secundario, utilizando los nombres en ingles de la lista de colores del menú desplegable nombrado en la sección violeta o lila. Lamentablemente no se puede observar en la captura el texto en movimiento. Subindice y Superindice rara vez son usados, pero pueden resultar útiles para representar alguna forma matemática y/o generar citas en el texto del mismo modo que se hace en los libros. Por último queda teletexto **[tt]**, la función de este tag es la de normalizar los espacios de un texto para que se comporte del mismo modo que una fuente mono-espaciada sin serlo. Viene a brindar una alternativa a cuando se necesitan ingresar readme's o representaciones ascii, sin alterar la fuente elegida. En el ejemplo pueden notar como al aplicar el tag, las mayúsculas como minúsculas se alinean. ===== Sección amarilla ===== {{ :foro:dyue_icono06.png?nolink |}} Esta sección de códigos es fundamental a la hora de compartir música (track list) y/o al suministrar datos de rippeo o calidad. <code>[table] [tr][td][/td][td]Columna 1[/td][td]Columna 2[/td][td]Columna 3[/td][/tr] [tr][td]Fila A[/td][td]Campo 1A[/td][td]Campo 2A[/td][td]Campo 3A[/td][/tr] [tr][td]Fila B[/td][td]Campo 1B[/td][td]Campo 2B[/td][td]Campo 3B[/td][/tr] [/table] [code]Este es un código [b]No funciona interprete BBCode[/b][/code] [quote]Esta es una cita de texto[/quote] [quote=thecattony]Esta es una cita de texto con nombre de usuario[/quote]</code> {{ :foro:dyue_resultados06a.png?direct |}} No se confundan, al principio una tabla puede parecer complicada pero solo es cuestión de entender sus partes. Cada fila está delimitada por los códigos de apertura y cierre **[tr][/tr]**. Dentro de ellos, irán las columnas **[td][/td]** y dentro de los códigos de columna los datos. En el ejemplo la columna inicial de la primer fila no contiene datos, pero aún así los códigos **[td][/td]** deben estar, de otro modo se perdería la alineación de la primer fila. Por último, vienen los códigos **[table]** y **[/table]** para delimitar desde y hasta donde interpretar los datos como una tabla. En el ejemplo le sigue **[code]**, de especial utilidad para datos de calidad y formato. Todo lo que se encierre bajo este tag no será formateado. Y **[quote]** es usualmente usado para citar un mensaje de otro usuario. El botón **Citar** (arriba a la derecha de cualquier mensaje del foro) realiza la función de citado automáticamente, copiando el texto de un mensaje e indicando quien lo escribió, en que tema y con su correspondiente fechado. Usualmente no es necesario realizar citados manuales. <code>[list] [li]Item A[/li] [li]Item B[/li] [li]Item C[/li] [/list] [list type=decimal] [li]Item A[/li] [li]Item B[/li] [li]Item C[/li] [/list] [hr]</code> {{ :foro:dyue_resultados06b.png?direct |}} Para terminar esta sección, se muestran ejemplos de lista y lista numérica. De igual modo que con la tabla, cada ítem debe ir encerrado entre los códigos **[li][/li]** y ellos por **[list][/list]**. **[hr]** traza una línea suave del ancho que ocupe el mensaje, muy útil para separar partes de un tema. Su uso se puede observar en la siguiente imagen: {{ :foro:como_crear_un_mensaje_plantilla.png?direct&100 |}} ===== Sección naranja ===== {{ :foro:dyue_icono07.png?nolink |}} Esta última sección diferenciada por colores cuenta con dos botones y los infaltables iconos o emoticons. <code> :) :arrow: :palmas: :wave: :twisted: :up: :worthy: :icon_confused: :icon_biggrin:</code> {{ :foro:dyue_resultados07.png?direct |}} El primero de los botones elimina el formato de un texto seleccionado y el segundo habilita y deshabilita cierto formateo y la muestra de imágenes en campo de texto del editor. Utilizar o no esa función es una cuestión personal, yo prefiero ver el código y previsualizar presionando el botón para no armar lío. Los iconos se agregan haciendo click sobre ellos y se puede acceder a muchos más seleccionando **[más]**, que abrirá una pequeña ventana. ===== Otros ===== Por último quedan los botones publicar y previsualizar. Uno para enviar el mensaje o tema nuevo y el otro para ir viendo los cambios y/o releer un mensaje antes de enviar (muy recomendado). ---- Cualquier comentario, sugerencia y/o consulta pueden realizarla en el foro: [[http://www.argentop2p.net/index.php/topic,70348.0.html|{{:foro-comentarios.png?nolink|}}]]