DICIEMBRE 2018: Digo y apoyo lo mismo que el comentario anterior del 2014...

**** DICIEMBRE 2020: Hemos tenido cambios sustanciales en este foro desde que creé este tutorial.. remarcar dos cosas muy importantes:
- Avatars: Los avatar podeis enviar la foto que os dé la gana, por fin puse una extensión que redimensiona la imagen para que se vea bien en el foro.
- Inserción de videos, por fin ya podemos insertar muchas URL directamente y se autoconvierten en videos insertados de muchos sitios web.
Hola a tod@s, tras petición popular he decidido dejar un mensaje exlicando las cosas báscas del foro y sus fundamentos y accesos para que nadie se pierda, espero poder explicarlo todo al detalle y que no tengais problemas, las dudas del tuto debajo, intentaré ser lo más escueto y rápido explicando las cosas porque tampoco voy a dejar aquí un ladrillo...
[anchor=indice]-[/anchor][goto=basico]Índice[/goto]
*[goto=1]Qué es un foro y qué hace[/goto]
*[goto=2]Cómo registrarse[/goto]
*[goto=3]Secciones del Foro[/goto]
*[goto=4]BBCODES en el foro Parte 1[/goto] **Primeras dos lineas de BBCODES
----[anchor=indice5]*[/anchor][goto=5]BBCODES en el foro Parte 2[/goto]
--------*[goto=TABLAS]TABLAS[/goto] Con ejemplo
--------*[goto=IMAGENES]IMAGENES[/goto]
--------*[goto=VIDEOS]LOS VIDEOS[/goto]
[anchor=1]1 Qué es un foro y qué hace[/goto][/anchor] [goto=indice](volver al índice)[/goto]
Un foro es un sitio web en el que la gente puede comentar sobre el tema del que va el mismo, muchas veces degeneran los foros con gente como Trolls, Spammers y Haters (Ver video explicativo: )
[align][vid=560,320]http://mvod.lvlt.rtve.es/resources/TE_N ... 166914.mp4[/vid]
(Toque de humor de la casa velocidadatope)[/align]
Nuestro foro es de Formula 1 y deporte del motor, esperamos comentarios sobre los temas que abrimos los moderadores y el Admin y que si hay algún loco que se ponga a hacer este tipo de cosas será borrado su mensaje, censurado o baneado tras 3 reiteraciones.
Los foros funcionan de la siguiente manera: Hay una base de datos llamada SQL donde se guardan los 'Hilos' llamados 'Topics' y todos los mensajes y estructuras, pero para verso online se transforman a lenguaje HTML, como el lenguaje HTML es complejo lo que se suele hacer es usar unos códigos más simples, llamados: BBCODE (proveniente del inglés Bulletin Board Code es un lenguaje de marcas ligero utilizado preferentemente en foros de discusión para embellecer la forma en que un mensaje o post es presentado.)
Los BBCODES siempre (al igual que cualquier lenguaje de programación) tienen que tener su codigo de entrada y su código de salida, por ejemplo, para poner el texto BBCODES de arriba en negrita tenemos el codigo:
Código: Seleccionar todo
[b]BBCODES[/b]
[anchor=2]2 Cómo registrarse[/goto][/anchor][anchor=1a][goto=infice](volver al índice)[/goto][/anchor]
En VelocidadaATope 1 registrarse llevaba mucho tiempo y un registro obligaba a que pusieras los gustos de tu vida para que te enviarán publicidad desde canalmail.... pero en VelocidadATope2 el registro es lo más sencillo del mundo, no tengo publicidad ni obligo a nada, sólo teneis que contestar una pregunta en la casilla anti spam, que la respuesta es ESPAÑA aposta la he puesto para que los que sean de otros paises no castellano parlantes no puedan escribir la Ñ y así no tener registros de Rusia ni Azerbayan como nos pasaba el año pasado....
El registro es inmediato y no requiere activar por email, de momento lo dejo así a no se que empiece a ver emails rarisimos....
[anchor=3]3 Secciones del foro[/goto][/anchor][anchor=1a][goto=infice](volver al índice)[/goto][/anchor]
Tras una larga deliberación y 6 formateos de estructura del foro me costó pero al final decidí que el foro tuviera esta estructura:

[anchor=4]4 BBCODES en el foro[/goto][/anchor][anchor=1a][goto=infice](volver al índice)[/goto][/anchor]
Esta sección va a ser larga y tendreis que darme tiempo para explicarlo todo, algo se me olvidará y algunas cosas serán complejas de contar... pero bueno pondré los básicos...
Cuando comentais cualquier mensaje o cuando creeis un nuevo Hilo, las herramientas han sido creadas para simplificar su uso, muchas llevan ejemplos y con el simple hecho de pasar el ratón por encima sale un ejemplo, otras al pulsarlas te pide la URL, todas pueden ponerse en los mensajes a mano cuando ya te las sabes es más sencillo abrir corchetes, poner código, escribir y cerrar corchetes. Tenemos actualemente alguna algo más compleja y lleva bastante explicación y otras no sé siquiera si las usaréis alguna vez, esta es la barra de trabajo:
Los siguientes 3 recuadros son importantes y muy sencillos:
Código: Seleccionar todo
[font=Arial]ELIGES LA ARIAL DE MICROSOFT QUE ES ESTANDAR EN TODOS LOS EQUIPOS[/font]
**Parece que el Google Chrome no hace cambio de Tipo de letra, lo investigaré**
Tamaño Diminuto= 50, Pequeño= 85, Normal= 100 , Grande= 150, Enorme= 200
Pero podemos poner cualquier número desde el 50 al 200, si quieres simplemente destecar una letra TAMBIEN puedes EJEMPLO:
VelocidadATope
Código: Seleccionar todo
[size=200]V[/size][size=180]elocidad[/size][size=200]A[/size][size=200]T[/size][size=180]ope[/size]
TEXTO EJEMPLO EN Negro fondo rojo
TEXTO EJEMPLO Amarillo fondo negro
Código: Seleccionar todo
[highlight=#ff0000]TEXTO EJEMPLO EN Negro fondo rojo [/highlight]
[highlight=#000000][color=#FFFF00]TEXTO EJEMPLO Amarillo fondo negro[/color][/highlight]
Ejemplos:
texto Tabulado 30pixeles
texto tabulado 500pixeles
Separacion entre esto y esto
**Como habréis notado en los foros, las tabulaciones no funcionan y a veces queremos poner textos con algo de orden y concierto, para esto nos sirven las tablaciones intermedias:
1Ferrari
2Red Bull
3Lotus
CODIGO DE LOS EJEMPLOS:
Código: Seleccionar todo
[tab=30]texto Tabulado 30pixeles
[tab=500]texto tabulado 500pixeles
Separacion entre esto [tab=30] y esto
**Como habréis notado en los foros, las tabulaciones no funcionan y a veces queremos poner textos con algo de orden y concierto, para esto nos sirven las tablaciones intermedias:
1[tab=45]Ferrari
2[tab=45]Red Bull
3[tab=45]Lotus
Ejemplo:
Ojete flavour
From: muchachada nui
CODIGO DE LOS EJEMPLOS:velocidadatope escribió:Ferrari lo dará todo o NO!
Código: Seleccionar todo
[quote]Ojete flavour
From: muchachada nui[/quote]
[quote="velocidadatope"]Ferrari lo dará todo o NO![/quote]
Ejemplo:
Código: Seleccionar todo
[spoil]Vettel pierde al estrellarse contra el muro en este video del 2015[/spoil]
Ejemplo: Ver VIDEOTECAF1 sin loguearse y logueado
[hr]
dejo un pequeño ejemplo
Código: Seleccionar todo
[offtopic]Estoy pasando un frío de aupa[/offtopic]
os explico qué es un NFO: Un NFO es un tipo de archivo de información suele contener una gran cantidad de arte detallado o logotipos. Este tipo de archivo es similar a otros tipos de archivos de información populares como README.
os dejo un ejemplo corto:
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::::::############## ::::::::::::::::::: ############################ ############################## ::::::::::::::::: ######################### ######???????????????????????###### ::::::::::::::: ========================= ####??????????()????()?????????#### ::::::::::::::: ========================= ##????()?????????????? ()?????## :::: ::::::: ------------============= ##?????????????????? ;;;; ?????## :: ;;;; ::::: ------------------------- ##??????????()?????? ;;;;;;?????## ;;;;;; ::::: ------------------------- ##?????????????????? ;;;;;; ;;;;;;;; ::::: ++++++++++++------------- ##?????????????????? ;;;;;;;;;;;;;;;;;;;;;;; ::::: +++++++++++++++++++++++++ ##????????????()?? ;;;;;;;;;;;;;;;;;;;;;;;;;;; ::: +++++++++++++++++ ;;;; ##??()???????????? ;;;;;;@@ ;;;;;;;;@@ ;;;;; ::: ~~~~~~~~~~~~~++++;;;;;;;; ##???????????????? ;;;;;; ;;; ;;; ;;;;; ::: ~~~~~~~~~~~~~~~ ;; ~~~~ ####??????()?????? ;;[];;;;;;;;;;;;;;;;;;;;;[] ::: $$$$$$$$$$$$$~~~~ ~~~~~~ ######????????????? ;;;;;; ;;;; ::::: $$$$$$$$$$$$$$$$$$$$$$$$$ ################### ;;;;;;;;;;;;;;;;;;;; ::::::: $$$$$$$$$$$$$$$$$$$$$$$ ;;;; ::::::::::: :::::::::::::$$$$$$$$$$ ;;;; :: ;; :::::::::::: ;; :: ;;;; :::::::::::: ::::::::::::::::::::::: :::::: ::::::::::::: :::: :::::::::::: ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::::::NN::::NN::YY::::YY:::AAAAAA:::NN::::NN:::!!:::::::::::::::::::: ::::::::::::::::NNNN::NN::YY::::YY::AA::::AA::NNNN::NN:::!!:::::::::::::::::::: ::::::::::::::::NNNN::NN::YY::::YY::AA::::AA::NNNN::NN:::!!:::::::::::::::::::: ::::::::::::::::NN::NNNN::::YYYY::::AAAAAAAA::NN::NNNN:::!!:::::::::::::::::::: ::::::::::::::::NN::NNNN:::::YY:::::AA::::AA::NN::NNNN::::::::::::::::::::::::: ::::::::::::::::NN::::NN:::::YY:::::AA::::AA::NN::::NN:::!!:::::::::::::::::::: ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::::::YOU:HAVE:DONE:THE:NYAN:FOR:0000125:SECONDS!::::::::::::::::::::
Código: Seleccionar todo
[nfo]:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::############## :::::::::::::::::::
############################ ############################## :::::::::::::::::
######################### ######???????????????????????###### :::::::::::::::
========================= ####??????????()????()?????????#### :::::::::::::::
========================= ##????()?????????????? ()?????## :::: :::::::
------------============= ##?????????????????? ;;;; ?????## :: ;;;; :::::
------------------------- ##??????????()?????? ;;;;;;?????## ;;;;;; :::::
------------------------- ##?????????????????? ;;;;;; ;;;;;;;; :::::
++++++++++++------------- ##?????????????????? ;;;;;;;;;;;;;;;;;;;;;;; :::::
+++++++++++++++++++++++++ ##????????????()?? ;;;;;;;;;;;;;;;;;;;;;;;;;;; :::
+++++++++++++++++ ;;;; ##??()???????????? ;;;;;;@@ ;;;;;;;;@@ ;;;;; :::
~~~~~~~~~~~~~++++;;;;;;;; ##???????????????? ;;;;;; ;;; ;;; ;;;;; :::
~~~~~~~~~~~~~~~ ;; ~~~~ ####??????()?????? ;;[];;;;;;;;;;;;;;;;;;;;;[] :::
$$$$$$$$$$$$$~~~~ ~~~~~~ ######????????????? ;;;;;; ;;;; :::::
$$$$$$$$$$$$$$$$$$$$$$$$$ ################### ;;;;;;;;;;;;;;;;;;;; :::::::
$$$$$$$$$$$$$$$$$$$$$$$ ;;;; :::::::::::
:::::::::::::$$$$$$$$$$ ;;;; :: ;; :::::::::::: ;; :: ;;;; ::::::::::::
::::::::::::::::::::::: :::::: ::::::::::::: :::: ::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::NN::::NN::YY::::YY:::AAAAAA:::NN::::NN:::!!::::::::::::::::::::
::::::::::::::::NNNN::NN::YY::::YY::AA::::AA::NNNN::NN:::!!::::::::::::::::::::
::::::::::::::::NNNN::NN::YY::::YY::AA::::AA::NNNN::NN:::!!::::::::::::::::::::
::::::::::::::::NN::NNNN::::YYYY::::AAAAAAAA::NN::NNNN:::!!::::::::::::::::::::
::::::::::::::::NN::NNNN:::::YY:::::AA::::AA::NN::NNNN:::::::::::::::::::::::::
::::::::::::::::NN::::NN:::::YY:::::AA::::AA::NN::::NN:::!!::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::YOU:HAVE:DONE:THE:NYAN:FOR:0000125:SECONDS!::::::::::::::::::::
[/nfo]
[hr]
[anchor=TABLAS]TABLAS:[/anchor]
Las tablas en este código llevan insertados los estilos CSS del foro y eso hace que no podamos poner la tabla sin más, (que se puede) Si no que se verá mejor si sabemos lo que hacemos y hacemos tablas con la cabeza, no obstante no es apto para principiantes....
Al pulsar sobre este botón tenemos un minitutorial con ayuda y preguntas que debemos contestar:
En este 'minitutorial que se nos abre en la parte superior de los botones, podemos ver un buen ejemplo, aunque no es muy completo....
- Estilo de tabla: Admite: width: 50% ; border: 1px solid #cccccc; text-align: center;
Los que están en cursiva son los codigos de uso común los que tienen raya inferior son editables, se puede poner un ancho de 50% como viene de ejemplo o de 100% que ocuparía todo el mensaje o del 75%, lo siguiente el BORDER es para decir si tiene o no bordes la tabla podeis elegir 1px, 0px, 10px lo que se quiere y por supuesto un color para ese borde que puede ser el de ejemplo (grisaceo) o cualquier otro en Hexadecimal, las elineacions (TEXT-ALIGN) son para centrar las celdas, pero tras varias pruebas es necesario poner este código dentro de cada celda... pero esto lo veremos luego.
- Cantidad de filas: Aquí elegimos cuantas Filas va a tener nuestra tabla
- Estilo de Filas: En este estilo podemos usar los mismos códigos que hemos usado arriba, se puede usar el ancho (aunque termina siendo lioso para usar se puede), elegir que tengan o no borde y alinear el texto también.
- Cantidad de columnas: Aquí elegimos la cantidad de columnas de nuestra tabla.
- Estilo de Filas (pone, pero es de columnas!): usar estilos como arriba.
Os voy a poner de ejemplo la tabla de 2 filas y 3 columnas que estoy usando en el portal y os dejo el código aunque no os enterareis de nada....
La mejor forma de montar una tabla es pensarla sobre el papel, elegir tu estilo y luego después de ponerla con la mini ayuda, poner en cada uno de las celdas los datos que se quiera.
[table=width: 100%; border: 0px][tr=text-align: center;][td=text-align: center;width: 33%;]CALENDARIO F1 2014

[/td][td=text-align: center;width: 33%;]Normativa PORRAS 2014


[tr=text-align: center;][td=text-align: center;width: 33%;]CALENDARIO MOTOGP 2014



CODIGO:
Código: Seleccionar todo
[table=width: 100%; border: 0px][tr=text-align: center;][td=text-align: center;width: 33%;]CALENDARIO F1 2014
[url=http://www.velocidadatope.com/viewtopic.php?f=2&t=15][red]100,http://www.velocidadatope.com/VAT/F1/2014/Calendario2014F1.jpg[/red][/url]
[/td][td=text-align: center;width: 33%;]Normativa PORRAS 2014
[url=http://www.velocidadatope.com/viewtopic.php?f=19&t=6][red]100,http://www.velocidadatope.com/VAT/LOGOTIPOS/LogoPORRAS2014.jpg[/red][/url][/td][td=text-align: center;width: 33%;]CALENDARIO DTM 2014
[url=http://www.velocidadatope.com/viewtopic.php?f=20&t=20][red]100,http://www.velocidadatope.com/VAT/DTM/Calendario2014.jpg[/red][/url][/td][/tr]
[tr=text-align: center;][td=text-align: center;width: 33%;][b]CALENDARIO MOTOGP 2014[/b]
[url=http://www.velocidadatope.com/viewtopic.php?f=10&t=23][red]100,http://www.velocidadatope.com/VAT/MOTOGP/MGPcalendario2014.jpg[/red][/url][/td][td=text-align: center;width: 33%;][b]CALENDARIO WRC 2014[/b]
[url=http://www.velocidadatope.com/viewtopic.php?f=11&t=19][red]100,http://www.velocidadatope.com/VAT/WRC/2014/Lista/EspanaWRC2014_12.jpg[/red][/url][/td][td=text-align: center;width: 33%;][b]VIDEOTECA F1
[url=http://www.velocidadatope.com/viewforum.php?f=6][red]100,http://i1199.photobucket.com/albums/aa471/velocidadatope/videoteca_portal.jpg[/red][/url][/b][/td][/tr][/table]
[hr]
Os voy a poner una de Vuelta al índice y una visualización del CÓDIGO, para que lo veais
[anchor=5b goto=indice](volver al Índice)[/anchor]
Código: Seleccionar todo
[anchor=5b goto=indice](volver al Índice)[/anchor]
[hr]
[hr]
[anchor=IMAGENES]IMAGENES[/anchor] [anchor=6a goto=indice](volver al Índice)[/anchor]
[*]Insertando Imágenes:
Este año he luchado para que las inserciones de fotos sean lo más sencillas posibles y no tengáis mucho que devanaros el seso, las fotos estarán en algún sitio web, o las habréis subido a vuestra cuenta de Photobucket, ImagesHack, Frickr, etc etc, hay mil servicios de subida de imágenes, incluso facebook... recordar que siempre tenéis que disponer del código de la foto directo! no vale un enlace html, debe terminar en .jpg .png .gif recordar que las imágenes no suelen tener muchos más tipos de extensión, y si es posible que no sean de mucho peso, si notáis que tarda en cargar me avisáis, que yo me encargo.
Cuando ya tenemos copiado al portapapeles la foto, imagen o esquema en formato imagen que queramos insertar, tras abrir el editor completo, en el sitio donde queramos ponerla, pulsamos y nos saldrá este tutorial en la zona superior:
Como podéis observar hay un ejemplo para ayudaros en la zona de enmedio es donde hay que poner el enlace a la imagen pero justo debajo tenemos algo nuevo que nos va ayudar un montón, la alineación! y ésto sirve para no tener que concatenar dos códigos, recordar que por defecto las fotos insertadas sin código de alineación irán a la izquierda por ser éste nuestro tipo de escritura, pero si queremos centrarla con simplemente pulsar aquí y darla a Insertar en el mensaje ya sale el código centrado, os dejo un ejemplo:
**Voy a poner una foto en todas las formas posibles:
Alineado sin nada, central y derecha



[*]Ahora explico lo de derecha flotante e izquierda flotante:
Cuando queremos poner un texto con una imagen a la derecha y texto a la izquierda que vale de explicación, podemos usar el método de inserción flotante a la derecha, ponemos un texto y así es como tengo las fotos insertadas en todo este tuto, para saltar de página podeis usar le codigo de salto de linea hr que deja una línea, no obstante depende de la cantidad de texto que tengas y del tamaño de la imagen se verá más o menos texto al lado de la foto.
Flotando a la derecha:

[hr]
Flotando a la izquierda:

[hr]
Si no se pone el código hr que os decía se superponen las imágenes, nos permite escribir un texto con fotos en medio, el texto se va adaptando a la imagen y queda más chulo para poner una noticia con fotos.
Como os decía si insertáis una foto muy grande el sistema la redimensiona sin necesidad de devanaros la cabeza:

Si pulsáis encima la veis al tamaño real.
Pero, si queréis que las fotos ocupen un tamaño predeterminado hay que usar el código RED que es el tercer icono:
Ocupando el 100%

Ocupando el 50%

CODIGO:
Código: Seleccionar todo
[b]Ocupando el 100%[/b]
[RED]100,http://www.velocidadatope.com/VAT/TUTORIAL/parrillaf12013brasil.jpg[/RED]
[b]Ocupando el 50%[/b]
[RED]50,http://www.velocidadatope.com/VAT/TUTORIAL/parrillaf12013brasil.jpg[/RED]
Con esto creo dejar medianamente claro el uso de las imágenes en el foro, lo siguiente son ...
[anchor=VIDEOS]LOS VIDEOS:[/anchor] [goto=indice](volver al Índice)[/goto]
Los tres últimos códigos en los BBCODES nuevos son plenamente para insertar códigos de videos, el primer icono va a ser el más utilizado por todos, tiene un tutorial integrado como la inserción de las imñagenes pero este es diferente y tiene desplegable, en este desplegable he elegido los sitios que imagino más típicos usaremos en el foro:
CNBC.com, Facebook ** No he conseguido que funcione**, Flickr, Youtube, Veoh, MSNBC.MSN.COM, myspace, photobucket, vimeo, youtu.be, MP4 aparte, FLV y swf
Esto nos permite hacer pruebas en diferentes sitios web, desgraciadamente para mí no se encontraba el código disponible para VK, y aunque lo intentaba no parecía funcionar, por lo que me traje un código nuevo, es el conocido como VK, pero vale para probar en más sitios, con con los videos de VK uso el código de inserción iframe y cojo el código del video interior.
Al igual que el resto de videos que funcionan en el código de VK, el siguiente código funciona igual pero podemos definir los pixeles de visionado, elegimos el ancho y el alto.
En este sitio pondré los ejemplos varios.
Los videos que normalmente ponemos en el foro suelen ser de Youtube o de Vimeo, aunque podemos usar VK y otros sitios web... lo más normal es ponerlos con el código BBVIDEO, de defecto con una resolución de 560x315:
Código: Seleccionar todo
[BBVIDEO=560,315]https://www.youtube.com/watch?v=nJtriAo3yvA[/bbvideo]

Elige tu sitio desde donde ponerlo y hay un ejemplo práctico que no puede dejarnos indiferentes.
para center los videos no vale el código usado para el texto, hay que usar el codigo CENTER:
[center][/center]
Código: Seleccionar todo
[center][BBVIDEO=600,355]http://vimeo.com/71573748[/bbvideo][/center]
Muchas gracias por leer todo este rollo.