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:
<- En esta imagen podeis observar la estructura real del foro a día de Hoy, debajo está el OFF-TOPIC donde ponemos estos mensajes y donde un usuario podrá empezar un topic, si alguno de los usuarios nuevos quiere adquirir privilegios de escritura para crear nuevos TOPIC (Hilos) que me lo pida y se los doy individualmente. Comentar podeis comentar en todo el foro. (Pulsar para ver más grande)[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:
Si os fiajis lo primero que llama la atención son el + y el - en la izquierda del todo, sólo valen para ampliar la zona de escritura, del comentario, esto simplemente pulsar y lo probais, al darle al + suma espacio, al darle al - lo quita, pero yo soy más partidario de poner el ratón en la esquina inferior derecha pulsar y agrandar el espacio a mi gusto.Los siguientes 3 recuadros son importantes y muy sencillos:
El -Tipo de Fuente- Te permite poner el texto del mensaje en un tipo de letra diferente al estandar, esto vale para remarcar algo con otro tipo de letra, se puede usar en la inserción de un copia y pega desde otro sitio web como por ejemplo seleccionas el texto y ELIGES LA ARIAL DE MICROSOFT QUE ES ESTANDAR EN TODOS LOS EQUIPOS el texto anterior quedaría así:
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é**
El -Tamaño de Texto- Te permite elegir diferentes tamaños para las letras que pones, pero hay que tener en cuenta que no hace falta seguirlo al 100% los números que nos proponen y tener la idea de que: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]
El -Texto Resaltado- Remarca de un color que elegimos al pulsar encima del desplegable, eliges el texto pulsas en este texto y eliges qué color quieres remarcarlo, incluso puedes hacer que el texto salga en otro color poniéndolo tú dentro según salga en el ejemplo,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]
Empiezo con estos 5 botones, el primero es para tabular el texto, por defecto si lo pulsamos antes de empezar un tárrafo hará un tabulador de 30pixeles, se puede usar en cualquier momento, no es necesario que sea en el principio de un texto y se puede poner con un tamaño distinto, no hay límpite pero tener en cuenta que más de 500 pixeles resulta bastante absurdo...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
El siguiente botón es el CODE que vale para poder exponer los textos sin ejecutar las conversiones de código, vienen muy bien para enlaces de sitios web para que no queden acortados ni salgan como enlace o para exponer ejemplos como he realizado arriba de este texto
El siguiente botón es el quote, (CITAR) cuando citamos un texto de otro forero debemos usar este código para hacer el copia y pega, antiguamente era obligatorio poenr el nombre del usuario pero en este código lo podemos usar para citar texto que sea de otras web también y sólo pido que se exponga un enlace de dónde viene, si usais el boton de CITAR que hay en cada mensaje automáticamente el sistema pondrá el nombre de la persona citada entre comillas, recordar que si el texto está más arriba, deberíais acortarlo a lo que os interese. Os dejo un ejemplo de los dos casos, 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]
El cuarto bóton totalmente en blanco es para crear SPOILERS, y esto qué és? poner un texto 'oculto' que si lo pulsas lo lees, para que sirve? para poner un texto de por ejemplo una película que has visto y que nadie sepa de qué va, sólo pulsen a leerlo los que realmente quieran saberlo o ya lo hayan visto, vale para todo tipo de cosas, las pelis es un ejemplo. Podrías poner el resultado de una carrera y que nadie lo supiera y haces spoiler para que no lo vea todo el mundo a primera vista...Ejemplo:
► Mostrar Spoiler
Código: Seleccionar todo
[spoil]Vettel pierde al estrellarse contra el muro en este video del 2015[/spoil]
Siguiente código con una H grande es el HIDDEN que vale para ocultar el texto (o todo lo que queramos, fotos, videos, películas) a visitantes, sólo posible verlo si la persona está registrada.Ejemplo: Ver VIDEOTECAF1 sin loguearse y logueado
[hr]
Este botón sirve para insertar un texto con un cartelón que avisa que lo que se va acontar está fuera del tema que se trata, de momento lo voy a dejar pero no abuseis de él, valdría para cosas puntuales, estamos hablando de formula 1 y das enhorabuena a alguien por tener un hijo o algo así, cosas por el estilo....dejo un pequeño ejemplo
Off Topic
Estoy pasando un frío de aupa
Código: Seleccionar todo
[offtopic]Estoy pasando un frío de aupa[/offtopic]
El logo con una i es para insertar información de archivos nfo, en este foro no se tiene idea de insertar este tipo de códigos de momento.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]
El botón de TABLAS es muy complejo y difícil de explicar, puede enrevesarse todo lo que querais o aprenderlo y hacerlo fácil... pero no puedo deciros que va a ser fácil...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
[/td][td=text-align: center;width: 33%;]CALENDARIO DTM 2014
[/td][/tr][tr=text-align: center;][td=text-align: center;width: 33%;]CALENDARIO MOTOGP 2014
[/td][td=text-align: center;width: 33%;]CALENDARIO WRC 2014
[/td][td=text-align: center;width: 33%;]VIDEOTECA F1
[/td][/tr][/table]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]
Las Anclas!!! muy importantes en este tutorial, son los 'enlaces internos' en el propio mensaje, si por ejemplo en un texto muy largo quieres ir arriba, o volver a bajar o lo que sea se usa este código, no obstante muchas veces una ANCLA no necesita IR a ningún sitio, por eso en algunos dejamos sólo el anchor y en otros ponemos el nombre y el goto, otros casos son que no necesitaríamos ponerle nombre a ese ancla porque no queremos volver a ella, pero es obligatorio.... esto pasa por ejemplo cuando pongo los años de las carreras en la videoteca, arriba del todo están todos los años, 2010, 2011... Pero cada ancla sólo queremos que nos lleve a la respectiva pero necesitan tener nombre y NUNCA se debe poner el mismo nombre de ancla a dos o más! asi que si veis que vais a usarlas y repetir nombres usar nombre1, nombre2.. etc etc...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]
Los siguientes dos iconos son los más conocidos por todos uno es para poner enlaces a paginas web o enlaces web y el otro es para poner un email que sea posible pulsar y abrir nuestro programa de correo predeterminado.[hr]
[anchor=IMAGENES]IMAGENES[/anchor] [anchor=6a goto=indice](volver al Índice)[/anchor]
Los siguientes 3 iconos son de ayuda completa a la inserción de imagenes en el foro, tengo que matizar una cosa, este año ya no hay que mezclar los códigos de imágenes para centrarlas ni tampoco es necesario cambiarlas de tamaño, he instalado un código estupendo que reduce automáticamente las fotos de tamaño superior a 750 pixeles y las reduce automáticamente, simplemente con pulsar encima de la foto se ve en grande ocupando la pantalla entera (si es que llega a tener este tamaño) este nuevo código ayuda a las galerías de imágenes, segundo código, que ahora son mucho más sencillas de insertar y el tercer código lo usamos en el viejo foro, es usado para REDUCIR las fotos al tamaño que queramos con un porcentaje que queramos poner, si es una foto que no queremos que se 'reduzca' a 750 pixeles y ocupe todo el espacio se pone 100 y ocupa todo, bueno, esto ahora que pondré los ejemplos que vea os vendrán bien.[*]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:
TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA[hr]
Flotando a la izquierda:
TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA TEXTO DE PRUEBA[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]
se nos abre el menú donde nos ayuda a poner nuestra resolución, podemos poner la que queramos pero intentar que sean múltiplos de la expuesta, si sumas 100 pixeles a una suma 100 pixeles a la otra.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.
