BBCodes List - Utilizarea lor pe Forum

[Admin]

UPDATE

Topicul acesta fiind unul închis (deci doar un Administrator poate posta aici) se pot face discuţii legate de BBCodes de exemplu pe topicul : Teste - Să ne obişnuim cu Forumul !.

---

BBCode or Bulletin Board Code is a lightweight markup language used to format posts in many message boards.
The available tags are usually indicated by square brackets ( [ ] ) surrounding a keyword, and they are parsed by the message board system before being translated into a markup language that web browsers understand—usually HTML or XHTML.
BBCode was first introduced in 1998 by the messageboard software Ultimate Bulletin Board (UBB). (This is why BBCode is sometimes referred to as UBBCode)

Este o descriere scurtă pe Wikipedia . La pagina aceasta găsiţi şi câteva exemple.
Dar important este că am introdus foarte multe BBCodes personale, iar pe acest topic le voi enumera şi explica ...

Câteva exemple :

Mai întâi fac click pe butonul Code (care va produce respectivul BBCode) pentru ca exemplul să fie arătat aşa cum este la editare, nu să se interpreteze.

Code: Select all

[b]Text aldin (Bold)[/b] ... va produce :

Text aldin (Bold)

Code: Select all

[b]Text subliniat (Underlined)[/b] ... va produce :

Text subliniat (Underlined)

Code: Select all

[i]Text italic (aplecat)[/i] ... va produce :

Text italic (aplecat)

Code: Select all

[c][hr=70,3]green[/hr][/c] (sau CENTER în loc de C) ... va produce :

... va produce deci o linie utilă pentru SEPARAREA secvenţelor în POSTARE. Adică hr (Horizontal Line), care ocupă 70% (stânga-dreapta), grosimea de 3 pixeli, culoarea verde (green). În plus această linie orizontală (separatoare) este Centrată (nu începe din stânga...). Am adăugat butonul hr= în Caseta de Editare pentru rapiditate.

---

Code: Select all

[size=200][color=red][b]LOOK AT ME![/b][/color][/size] ... VA PRODUCE :

LOOK AT ME!

(You may only use fonts up to size 200 ... DECI, maxim la SIZE, fonturi de 2 ori mai mari decât cel obişnuit)
Oricum, codul de deasupra se obţine lucrând cu clicul de mouse pe butoane... Nu e nevoie să fie reţinut. DOAR înţeles...

Cu butoanele, am textul "LOOK AT ME!", scris ... îl selectez şi aplic asupra lui formatări cu clic de mouse...

LOOK AT ME! - ... în câteva secunde am aplicat 3 butoane asupra lui.

Codul :

Code: Select all

[size=200][color=#FF0000][b]LOOK AT ME![/b][/color][/size]

---

UPDATE
A se folosi mai degrabă butonul YT din editor. Codurile următoare produc acelaşi lucru. Însă am pus buton doar pentru YT, acesta ocupă mai puţin spaţiu în caseta de editare (.. Iniţial era butonul youtube ..)

Code: Select all

[YouTube]me_WNSiUFd0[/YouTube]
[YT]me_WNSiUFd0[/YT]


va produce



iar

Code: Select all

[Center][YouTube]me_WNSiUFd0[/YouTube][/Center]

va produce :

De preferat ar fi totuşi ca clipul Youtube (care se încarcă mai greu) să fie pus în spoiler.
Cine doreşte "deschide" Spoilerul.

Code: Select all

[Spoiler][center][youtube]me_WNSiUFd0[/youtube][/center][/Spoiler]

va produce :

Click button to Show or Hide

UN CLIP VIDEO AFIŞAT DIN START FACE CA PAGINA SĂ SE ÎNCARCE MAI GREU.
RUGĂMINTE : Folosiţi modalitatea de mai sus, cu spoiler, pentru o mai rapidă încărcare a paginii...
Nu are rost să se încarce pentru orice video acele elemente de pe Youtube. Dacă cineva vrea să vizualizeze acel clip atunci poate face clic pe SPOILER .. şi ABIA ATUNCI pagina încarcă anumite elemente de pe Youtube .. şi va vizualiza clipul.


Pentru acestea de mai sus şi multe altele sunt butoane în căsuţa de editare, deci nu e nevoie să le învaţaţi pe de rost.

Dar sunt unele care produc efecte folositoare postărilor şi pentru care nu am mai creat şi butoane - Doar la o parte din BBCodurile personale am adăugat şi butoanele respective, cum ar fi Youtube, Center ... În general cele de pe linia a 2-a, dar nu numai acelea. Butonul Latex - Equation Editor l-am plasat pe prima linie, modificând structura de bază a forumului ... la fel butonul de aliniere "Justify", din dreapta lui U ...

---

Pentru marea majoritate a BBCodurilor e suficient să apăsaţi pe butonul respectiv (după selectarea textului ...)
Pentru unele este necesar totuşi să fie introduse manual unele lucruri (fiindcă nu am umplut totuşi căsuţa de editare cu absolut toate BBCodurile nou create ... )

De exemplu pentru linia verde de mai sus am scris :

Code: Select all

[center][hr=70,4]green[/hr][/center]

adică hr (Horizontal Line) de lungime 70% din lăţimea afectată mesajelor, 4 pixeli grosime şi culoare verde .. iar linia să fie centrată (pentru centrarea lui am selectat textul care producea linia respectivă şi am apăsat pe butonul Center ...)

[Admin]

UPDATE : (03.Feb.2015 - după Upgrade la phpBB 3.1.3) - Butoanele casetei de editare (azi - 03.Feb.2015).
(Unele urmează să le personalizez .. şi mai am altele de adăugat...) - CLICK pe imagine pentru ZOOM !...

[Admin]

Tables with only one cell -->> in BBCode.
Customizabile : Lăţime, MargineStanga, Float, Culoare. (Toate obligatorii de pus)

[T_WMFC = Table_Width,MarginLeft,Float,Color]{TEXT/Obiect}[/T_WMFC]
ATENŢIE : Ca la toate BBCode-urile cu mai mulţi parametrii SĂ NU EXISTE spaţiu între virgule şi parametrii !!..

UPDATE

Code: Select all

[tabel=200,30,left,#F1F19B] ...{TEXTUL TABELULUI} ... [/tabel]


produce acelaşi lucru ca t_wmfc din codul de mai jos. (Deci TABEL ... nu table. Cuvântul "tabel" nici nu există în limba engleză, şi nici în vreun limbaj de probramare, deci am putut crea un BBCode fără probleme...)

Exemplu la tabelul din mijloc :

Code: Select all

[t_wmfc=200,30,left,#F1F19B] ...{TEXTUL TABELULUI} ... [/t_wmfc]


Lăţime maximă ADUNATĂ (Width + MarginLeft + 2 X 10px = 20px padding la fiecare tabel) = 743px ...
Altfel tabelele trec pe mai multe linii. Iar un tabel mai lat se restrânge la 743px .. iar o parte din conţinut nu se va vedea.
Max-Height la conţinutul tabelului (fără padding-ul de 10px) = 1500 px

Acum aproape 2300 de ani Euclid (325 - 265 î.Hr.) avea ca rege pe Ptolemeu I (323 – 283 î.Hr.) Într-o anecdotă scrisă la 800 de ani de la moartea lui Euclid se povesteste că Ptolemeu I l-ar fi rugat pe Euclid să-i arate o cale mai usoară ca să înteleagă geometria, iar Euclid ar fi răspuns: "În geometrie nu există drumuri speciale pentru regi". (Sau : "În geometrie nu există căi regale").

Acum aproape 2300 de ani Euclid (325 - 265 î.Hr.) avea ca rege pe Ptolemeu I (323 – 283 î.Hr.) Într-o anecdotă scrisă la 800 de ani de la moartea lui Euclid se povesteste că Ptolemeu I l-ar fi rugat pe Euclid să-i arate o cale mai usoară ca să înteleagă geometria, iar Euclid ar fi răspuns: "În geometrie nu există drumuri speciale pentru regi". (Sau : "În geometrie nu există căi regale").

   ATENŢIE : După tabele nu putem
   scrie oricum pe o linie nouă ...




Deci, după tabele (şi în general după orice obiect de tip FLOAT - "plutitor") pentru a putea trece pe o linie nouă aşa cum scriu aici, trebuie folosit de exemplu butonul CLEAR, care va scrie :

Code: Select all

[clear][/clear]  ---  care înseamnă (aici pe forum) : <br style="clear:both">

Iar butonului clear i se poate pune une parametru.
De exemplu, după click pe buton şi apariţia codului în TextBox, se pune un egal şi un număr, de exemplu :

Code: Select all

[clear=7][/clear]

care înseamnă :

adică am scris 8 linii noi ... (am pus 7%10 + 1 = 8 ... Deci modulo 10, adică restul împărţirii la 10 plus 1)
(Trebuie folosit un NUMĂR NATURAL ca parametru, altfel se va vedea afişat textul incorect, în loc de noile linii ...)

---

În ce priveşte butonul br= aici nu e neapărat nevoie (decât ca sub-BBCodes în altele mai sofisticate, pe care le-am creat, deşi am observat că funcţionează şi cu simplul ENTER - însă nu le-am testat pe toate)...

Code: Select all

[br=4][/br] va produce 4 <br>-uri (linii noi), în limbaj  HTML...

De fapt este inserat un script, JavaScript, care face aşa :
... for (i = 0; i < 4%10; i++) {document.write('<br>');} ,
... adică pentru i de la 0 la 3 (deci 4 iterări în total) se adaugă o linie nouă...
Şi mai sunt încă 2 adăugiri de linie nouă (total 6, de fapt), fiindcă am apăsat sus/jos pe ENTER.
De la această CASETĂ de COD şi până la textul care e mai jos sunt 6 LINII ... 6 <br>-uri ... (BReaks)

( Deasupra sunt acele linii scrise cu butonul br= ... Ca şi la clear se lucrează cu MAXIM 10 linii noi... Dar, cum am spus, nu prea va fi nevoie de ele... Eu mai apelez la ele, totuşi, dar la unele coduri sofisticate, pentru siguranţă...)

[Admin]

Folosind tabelele (postare anterioară) putem produce cu codul :

Code: Select all

[center][t_wmfc=200,30,left,#F1F19B][ide1]yMuFMi[/ide1][/t_wmfc][/center]

următoarea :

sau, codul urmator, care fixează lăţimea la 600px :

Code: Select all

[ide1=600]yMuFMi[/ide1]

[Admin]

Recurenţa permutărilor scrisă în Latex în 2 moduri.
Codul se obţine deschizând fereastra popup prin apăsare pe butonul Latex Editor.

Code: Select all

\binom{n}{k} = \binom{n-1}{k} + \binom{n-1}{k-1}

Cu MathJax (codul introdus între simbolul dollar):

$\binom{n}{k} = \binom{n-1}{k} + \binom{n-1}{k-1}$

sau între dublu-dollar (însă centrează formulele) :

$$\binom{n}{k} = \binom{n-1}{k} + \binom{n-1}{k-1}$$

Codul pentru LARGE BINOMIALS :

Code: Select all

\dbinom{n}{k} = \dbinom{n-1}{k} + \dbinom{n-1}{k-1}

$\dbinom{n}{k} = \dbinom{n-1}{k} + \dbinom{n-1}{k-1}$

are o reprezentare mai bună. (La fel e şi la fracţii .. cu dfrac{}{} în loc de frac{}{} ...)

Iar codul pentru SMALL BINOMIALS :

Code: Select all

\tbinom{n}{k} = \tbinom{n-1}{k} + \tbinom{n-1}{k-1}

$\tbinom{n}{k} = \tbinom{n-1}{k} + \tbinom{n-1}{k-1}$


Cu CodeCogs (foloseşte imagini, dar deşi sunt imagini se încarcă mai uşor. Nu au însă aceeaşi acurateţe) :
Se foloseste butonul tex de deasupra (în căsuţa de editare).



(Momentan sunt probleme pe site-ul Codecogs... Imaginea cu formula nu se vede ... Sper să-şi revină în câteva minute)
Editare ulterioară : observ că este mai indicat să nu faceţi "abuz de spaţii" (aşa doreşte Codecogs mai recent )

Code: Select all

Adică în loc de a scrie : \binom{n}{k} = \binom{n-1}{k} + \binom{n-1}{k-1}
este mai bine : \binom{n}{k}=\binom{n-1}{k}+\binom{n-1}{k-1}

Totuşi am observat că la unele formule Codecogs vrea ca semnul \ (backslash) să nu urmeze imediat după + sau =  ... poate şi altele. Dar nu întotdeauna !!! ... Oricum, aveţi la scrierea cu editorul incorporat (la clic pe butonul Latex Editor, în dreapta sus a zonei de editare/scriere a postării/mesajului) care afişează instantaneu formula ...
Repun mai jos o imagine (mai veche, în care utilizam Firefox, iar "stylul" forumului era diferit, cu emoticoanele în stânga, etc ... de atunci multe s-au schimbat, dar Editorul Latex arată practic tot aşa...)


[Admin]

Wikipedia - Mathematical symbols

Folosind butonul MATE din EditBox se pot produce (fără Latex) diverse simple coduri (una din adrese e mai sus...)

Exemple :

∈ ∉ ∋ ∅ ⊆ ⊇ ⊃ ⊂ ⊄ ∪ ∩ ℵ

ƒ ∂ ∫ ∑ ∏ √ ∞ ∇ ℘ ℑ ℜ

Aici pe forum printr-un simplu Copy/Paste se pot lua simbolurile (cele de mai sus au fost luate de pe Wikipedia)

∈ ∉ ∋ ∅ ⊆ ⊇ ⊃ ⊂ ⊄ ∪ ∩ ℵ

ƒ ∂ ∫ ∑ ∏ √ ∞ ∇ ℘ ℑ ℜ - aici le-am făcut şi BOLD / aldine / îngroşate şi le-am mărit şi dimensiunea, folosind simplele butoane ale căsuţei de editare, EditBox.

Dar pot fi utile în alte circumstanţe (în primul rând obişnuirea cu denumirile lor, fiindcă nu toate simbolurile matematice, scrise eventual şi mai complex, au echivalente scrise în cod HTML .. ci doar unele mai importante, DAR şi mai des uzitate)

[Admin]

Pentru a nu încărca prea mult baza de date atunci când e vorba doar de text LUUUUNG .. folosiţi http://pastebin.com/.
După scrierea textului în căsuţa de editare şi apoi apăsarea butonului SUBMIT (plus asigurarea că la "Expirarea" Notei figurează NEVER - altminteri o vom şterge) se vede codul pentru EMBED în adresa paginii (link-ul paginii...)

De exemplu, Nota de mai jos este scrisă cu codul :

Code: Select all

[paste=700]8q4zAk8P[/paste]

... deci am apăsat pe noul buton creat PASTE= (care se vede în căsuţa de editare, aici, pe Forum), apar TAG-urile PASTE=, pe care le-am creat recent, 8q4zAk8P este codul de EMBED luat de la http://pastebin.com/ (nota având adresa http://pastebin.com/8q4zAk8P) ... şi am pus 700 pentru ÎNĂLŢIMEA zonei în care să apară NOTA.

(Prima linie e galbenă fiindcă acolo, la PasteBin.com am pus @h@ la începutul liniei respective ... H de la Highlighted - adică "evidenţiată"... Sursa notei este Wikipedia...)

Anterior am prezentat şi butonul ide1 (care foloseşte ideone.com ...)

Mai jos, în postarea asta, pun şi o poză animată (vreo 20 de secunde GIF animat... care se repetă în LOOP (buclă)...)
(Cu ocazia asta am văzut că nu am pus HINT (indicaţie) la punerea mouse-ului peste butonul "Latex Editor", trebuie să pun)

[Admin]

Video in popup...
Clic pe link-ul următor pentru afişare...
(Pentru închidere, clic pe X, sau clic în afara ferestrei.. sau tasta Escape - ultima variantă dacă fereastra e în "focus" - eventual faceţi clic pe "titlul" ferestrei şi apoi Escape, dar asta doar ca simplu test, primele 2 variante sunt cu mult mai simple, uşoare, la îndemână...)

VIDEO care porneste AUTOMAT

X

- La WTA este asa... Porneste automat MEREU... (Acum doar la click pe link)

Fereastra principală a forumului, "opacizată", se poate derula (scroll) ca de obicei...

[Admin]

Test... Test... Test... Un link SANTINELĂ (Momentan în faza de completare şi testare)

Un link obişnuit (spre Google)... dar influenţat de link-ul anterior, care este SANTINELĂ
(Link-ul acesta nu este "santinelă", deci nu-l va influenţa pe următorul, nu-i va da caracteristicile lui...)

Un link... (tot spre Google)

Codul acestui BBCode de test (de tip "santinelă") :

Code: Select all

[tst1=color,font-weight,font-style,text-decoration,title]URL,Numele link-ului...[/tst1]

(La primul doar culoarea e pusă corect. Dacă nu e pus corect nu se ia în seamă.
Dar TREBUIE pus ceva... Şi să nu fie spaţii după/înainte de virgulă...)

EXEMPLU, iar rezultatul mai jos, după această casetă de cod...

[tst1=FF00FF,bold,italic,line-through,Acesta este un Link...]
www.mateinfo.net,Numele link-ului...
[/tst1]

(În principiu se pune cuvântul "normal", dacă nu se ştie ce să se pună...
... Dar indiferent de ce se pune TREBUIE pus ceva...)


Numele link-ului...


Apoi : Un link influenţat de cel anterior

Apoi : Un alt link... (Caracteristici obişnuite. Fiindcă SANTINELA transmite doar următorului)