Imagini - Tutoriale, Informaţii şi Teste

[Admin]

Modalităţile de închidere a unei ferestre modale : 1. Click în exteriorul ferestrei 2. Click pe "X" 3. Tasta Escape
(Evident mai este şi Reload de pagină... Observaţie : la Escape, fereastra trebuie să fie în focar, nu un element al ei...)

Acesta este un test... Click pe imagine...

X

Codul pe care am preferat aici să-l pun, pentru a reliefa TAG-ul WTA (foarte asemănător cu mai generalul WIN) este :

Code: Select all

[c][wta=2523108][imgvd=#000097,http://goo.gl/YzbHsy]Click and Play[/imgvd][/wta][/c]

- Am folosit Tag-ul C pentru a centra IMAGINEA (pe care, dacă se face click, se deschide fereastra modală cu video-ul)
- Tag-ul imgvd vine de le Image (for) Video. L-am creat special pentru a avea anumite proprietăţi... dar se poate folosi şi un alt Tag (BBCode) de Imagine care nu fac ZOOM al imaginii la clic. (... motivul creării lui imgvd).
- ... Sau se poate folosi Link (deci Text ...etc)

Code: Select all

[c][wta=2523108][imgvd=#000097,http://goo.gl/YzbHsy]Click and Play[/imgvd][/wta][/c]

******* 2523108 = ID-ul clipului de pe site-ul wtatennis.com ...
Apoi, în interior, am pus o imagine cu anumite caracteristici (parametri)...
... Sunt 3 parametri : 2 "interiori" (chiar în TAG, după semnul = ) + 1 "exterior", descrişi mai jos.
EMBED-ul oferit de WTA porneşte clipul AUTOMAT ! Neconvenabil !!...
Dar aşa, porneşte la deschiderea ferestrei modale...

*** #000097 este culoarea bordurii imaginii
*** http://goo.gl/YzbHsy este ShortCut-ul (Google) spre locaţia reală a imaginii
(URL-ul sau adresa reală a imaginii e cam prea lung pentru Tutorial-ul de aici...)
*** "Click and Play" este titlul imaginii (Apare când cursorul de mouse este deasupra imaginii)


REAMINTIRE :

TAG-urile HTML folosesc paranteze unghiulare < >
În Forumuri se folosesc paranteze drepte : [ ] ... şi ele se numesc BBCodes = Bulletin Board Codes
... ("Bulletin Board" înseamnă de fapt Forum). Topic dedicat BBCodes-urilor : BBCodes List - Utilizarea lor pe Forum

[Admin]

►►

Acesta este un alt test... Click pe acest Link

X

Alt test cu elemente în fereastră modală

Un clip Youtube

Un clip Vimeo

Clipul din POSTAREA precedentă, care porneşte (automat) la click pe imagine :
(Evident fereastra din care se face clic dispare)

X

Clic pe LINK pentru afişare fereastră modală cu imagini, text, clipuri video...

Descrierea pe scurt a Tag-ului WIN care foloseşte TEXT (nu Imagine, ca WINI, descris mai jos...) :

Code: Select all

[win=Acesta este un alt test... Click pe acest Link]... CONŢINUT ...[/win]

În acel CONŢINUT se regăsesc mai multe elemente, de exemplu :

[c][yt]p8SkfeCbbD8[/yt][/c] (... adică un clip Youtube, centrat...)

[vic=500,331]40493290[/vic]  (... Clip Vimeo centrat implicit ... ID-ul clipului : 40493290 )
("VIC" vine de la VImeo Centered... Dimensiuni recomandate : 500 x 331 )


Dacă la clipurile VIMEO dimensiunile recomandate sunt lăţime = 500, înălţime = 331 ...

... la YOUTUBE (cele la care poţi introduce parametrii) recomand lăţime = 560, înălţime = 315

(Chiar dacă nu e HD, deci Youtube "oferă" 420/315, deci raport 4/3 ... Lucraţi totuşi cu 560/315, raport 16/9)

---

Cu Tag-ul WIN se crează deci ferestre modale care se deschid la click pe un LINK DE TIP TEXT
( Pentru cele care se deschid la click pe o IMAGINE a se citi postarea următoare, despre Tag-ul WINI )

Link-ul de tip TEXT este aici de fapt de tipul {INTTEXT} (vorbind în limbaj de "Forum Code")

{INTTEXT}
Unicode letter characters, numbers, spaces, commas, dots, minus, plus, hyphen, underscore and whitespaces.

Deci, {INTTEXT} înseamnă :
Caractere Unicode (deci inclusiv caractere cu diacritice româneşti), cifre, spaţii, virgule, puncte, minus, plus, linii-despărţitoare, subliniere _     şi spaţii "albe" în general (tab-uri, de exemplu)

OBSERVAŢIE : Dacă folosiţi ALTCEVA decât cele enumerate mai sus aspectul nu va arăta aşa cum se doreşte.
Vor fi linii de text aproape ilizibile, sau dispuneri bizare de elemente.
Cele mai frecvente erori apar când cineva foloseşte : ( ) [ ] { } < > ' " « » ! ? : ; / \ | @ # $\$$ % ^ & *          (... şi altele...)

[Admin]

Pentru deschidere de fereastră modală prin clic pe imagine :

Code: Select all

[wini=LăţimeImagine,CuloareBordură,LinkImagine,TitluImagine]... Conţinut fereastră modală ...[/wini]

EXEMPLU PENTRU CEA DE MAI JOS (... CLIC PE IMAGINE !) :

[wini=100,#970000,http://goo.gl/8LdwT1,Clic pe imagine.]... Conţinut fereastră modală ...[/wini]

100 pixeli lăţime (poza are de fapt 150px), #970000 = un fel de roşu/maro (se poate scrie brown, red, green, blue,... nu neapărat un cod de culoare HTML), apoi vine URL-ul, adresa pozei ... şi title="Clic pe imagine." ...

Iar între TAG-urile WINI (tag-uri de FORUM) este ceea ce conţine fereastra (Se folosesc texte, imagini, video... toate cu ajutorul butoanelor. Nu se poate scrie un cod HTML, PHP, JavaScript, etc... Se va vedea DOAR codul, NU şi un eventual REZULTAT...

Aceasta deoarece aceste coduri sunt FILTRATE... (În plus, o forţare - inutilă - de scriere cu aceste coduri va atrăgea foarte posibil sancţiuni. Citiţi în plus şi Regulamentul Forumului, partea extinsă...)

DECI... într-o astfel de fereastră (între TAG-urile WIN sau WINI) :

SCRIEŢI EXACT CA ÎNTR-O POSTARE OBIŞNUITĂ...

... folosind text, imagini, video,... direct sau cu ajutorul butoanelor din Caseta de Editare (care acum e PLINĂ de butoane!!!, mai mult de jumătate din ele le-am creat personal, nu au venit cu vreun soft...)

Atâta doar că acel conţinut va apărea în fereastră modală, ATUNCI CÂND e nevoie, în locurile cele mai potrivite, nu va încărca pagina, deci durata va fi mai mică... ETC, ETC,... Ulterior alte detalii...)

(... O să înlocuiesc «... Conţinut fereastră modală ...» cu altceva... Imagine, video,... )

X

Incă un test cu elemente în fereastră modală

Momentan este acelaşi conţinut ca în cea din POSTAREA precedentă (din lipsă de timp).
Dar asta nu e important...

... Şi o scriere cu simboluri matematice : $a^2 + b^2 + c^2 \geqslant ab + ac + bc$

Un clip Youtube

Un clip Vimeo

OBSERVAŢII :
- Săgeata mică, de culoare maro, din stânga, cu dublu-sens (sus-jos), indică faptul că FEREASTRA SE POATE DERULA ("scroll") dacă este nevoie, deci dacă are conţinutul mai "lung", chiar dacă nu se vede vreo "bară glisantă" la dreapta.
- Cu mouse-ul deasupra ferestrei se face "scroll" (dacă fereastra are conţinut mai mare se va vedea şi restul).
Se pot folosi săgeţile sau mouse-pad, la Laptop, iar la mobile "touch-screen" se derulează deasemenea...
- Am structurat totul să fie "Mobile-Friendly"... Doar la pagina de start a PORTALULUI încă mai am ceva de lucru, în principal din cauza meniului de sus, cel orizontal, pe care poate îl schimb sau îl modific...
(Pe Android-urile de versiuni de 1-2 ani merge oricum, sau la iPhone. Dar am testat la Windows Lumia şi am văzut că arată pagina 100%, adică se vede, la Start, practic doar colţul din stânga-sus, deci trebuie acolo folosită metoda de RESTRÂNGERE, micşorare manuală a paginii pentru a vedea TOT conţinutul pe ecran, fără derulare...)

Codul :

Code: Select all

http://goo.gl/8LdwT1

reprezintă Google ShortCut pentru imaginea avatarului meu, care are locaţia :

Code: Select all

http://forum.mateinfo.net/download/file.php?avatar=100_1427144635.png

Dar am preferat să se distingă mai bine parametrii (Locaţia reală fiind prea lungă...)

[Admin]

În această postare de test Link-ul care deschide fereastra modală, link ce se poate chiar întinde pe mai multe linii dacă textul Link-ului este prea lung

X

Alt test cu elemente în fereastră modală

Un clip Youtube

Un clip Vimeo

Clipul din POSTAREA precedentă, care porneşte (automat) la click pe imagine :
(Evident fereastra din care se face clic dispare)

X

se află chiar în interiorul acestei frazei (inline). (Link-ul are în principiu culoarea verde... ca majoritatea link-urilor de pe Forum, iar la trecerea cursorului de mouse peste el Link-ul va fi subliniat)

Pe scurt, codul postării arată aşa :

Code: Select all

În această postare de test, [win=Link-ul care deschide fereastra modală ...]

... conţinut ...

... conţinut ...

... conţinut ...

[/win] se află chiar în interiorul frazei (inline).


...... deci între tag-urile WIN elementele pot fi dispuse oricum...

Important este ca link-ul (Tag-ul de deschidere WIN) să înceapă în continuarea frazei ...
... şi apoi, după Tag-ul de închidere WIN, fraza să continue imediat (dacă ea continuă), fără apăsarea tastei Enter.

[Admin]

Acesta este un alt test, click pe acest Link

X

Alt test cu elemente în fereastră modală

Un clip Youtube

Un clip Vimeo

Clipul din POSTAREA precedentă, care porneşte (automat) la click pe imagine :
(Evident fereastra din care se face clic dispare)

X

... încadrat inline de un text...


Un alt link... (cu vechiul - neplăcutul şi nu foarte utilul - buton URL)

Încă un Link... (cu butonul Link)


Alt link INFLUENŢAT de prefixare (Are caracteristici diferite... Deocamdată în faza de test)

[Admin]

Code: Select all

[img2=http://.....(prima poză)]http://.....(a doua poză)[/img2]

Prin clic pe o imagine se trece la cealaltă imagine (în buclă)

Clic pe fiecare imagine pentru succedarea celor 2 imagini