Imagini - Tutoriale, Informaţii şi Teste

[Admin]

Imaginile au mai multe proprietăţi, iar lucrul cu ele necesită un Topic dedicat.
Aici sperăm să facem un Topic dedicat Imaginilor.

---

Image Hosting Service

List of photo sharing websites - Wikipedia
Pentru început : câteva linkuri foarte importante pentru upload gratuit al imaginilor (care ulterior pot fi postate aici).

1) http://postimage.org/

Dintre toate "ImageHost"-urile unde NU e nevoie de logare, unde pozele rămân permanent, unde Upload-ul e simplu şi imediat, PostImage mi se pare unul din cele mai bune... Drept pentru care o fereastră de Upload dedicată este şi implementată pe paginile MateInfo.Net unde sunt editoare (aici, trebuie să refac butonul, ieri făcând un upgrade major la Forum).

Intri deci pe site (o pagină extrem de simplă, gen Google) şi nu trebuie să uiţi să bifezi unul din butoanele radio (FAMILY safe sau ADULT content, deci măcar atâta grijă să ai - altfel upload-ul nu se va face). În rest click pe Browse pentru alegerea fişierului imagine, apoi click pe Upload It ! .. şi nici măcar NU se cere introducerea un "cod Captcha"...
După Upload se face click pe una din variantele de mai jos (ALEGEŢI DIRECT LINK) şi apare scurt, scris, semnalul "Copied", adică link-ul pozei este în memorie (Clipboard).
Link-ul respectiv se introduce (deci Copy/Paste) între tagurile de imagine (pe forumuri) şi se postează poza...

Codul următor :

Code: Select all

[imgwd=200]http://s30.postimg.org/wweqpfd7l/Post_Image_Tutorial.png[/imgwd]

este al pozei (centrate) pe care o fac chiar acum cu am scris aici. Click pe imagine pentru a o vedea mare în PopUp :

Vezi explicaţiile din postările următoare legate de BBCodes pentru imagini (aşa cum le-am creat).
În cazul de faţă imgwd vine de la IMG + W + D = Imagine + Window (sau Width, lăţime) + Dimension

2) http://tinypic.com/
Proprietar : Photobucket, unde vă puteţi face cont gratuit, deasemenea ...
Photobucket este mult mai complex dar necesită logare (username + parolă) deci durează mai mult.

La http://tinypic.com/ nu e nevoie de logare ... dar atenţie la ce poze "ridicaţi" pe Internet ... Nu le veţi putea şterge, aşa cum puteţi face la Photobucket în contul personal, care acum are capacitate nelimitată de stocare chiar şi pentru conturile gratuite

3) http://imgur.com/.
Vreo câţiva ani am preferat http://imageshack.us/ pentru că nu mai trebuia să mai introduc codul CAPTCHA la Upload-ul unei poze. Oricum, prefer totuşi să folosesc TinyPic sau altele.
Update : Din câte observ, totuşi, la ImageShack se poate face Upload de imagini numai având un cont creat.
Iar http://imgur.com/ este un site extraordinar şi chiar foarte complex. (Pronunţia site-ului : dacă ştiţi să pronunţaţi "Imager" veţi deduce de ce denumirea site-ului este ImgUr )

UPDATE

4) http://imgbox.com/.
Deoarece astăzi cei de la Tinypic au ales introducerea unui cod CAPTCHA cate este îngrozitor de greu de citit, am căutat alte site-uri de PHOTO SHARING dar FĂRĂ LOGARE (fiindcă sunt multe foarte bune DAR cu logare ... deci creare de cont apoi logare de fiecare dată când faci Upload la imagini).

Postez un link interesant de prezentare a multor servicii de PHOTO SHARING :

Comparing the best ways to store your photos online
şi deasemenea, descrierea mai multor site-uri pe Wikipedia :
List of photo sharing websites - on Wikipedia

Temporar eu am ales ImgBox, adică http://imgbox.com/, care este foarte rapid (doar alegi din listă "Tipul de conţinut" : Family Safe Content sau Adult Content) şi în plus LINK-ul pozei e FOARTE scurt (pentru a fi folosit cu uşurinţă pe Twitter)

În plus, foarte important : faţă de Tinypic, la ImgBox se poate face Upload la mai multe imagini deodată !!!
Şi nu există cod CAPTCHA de introdus mereu la fiecare upload.
(Sper să fie un serviciu bun. FAQ-Help la http://imgbox.com/help)

=============================

Sper totuşi ca Tinypic să (re)schimbe tipul de CAPTCHA (fiincă cel de acum e foarte greu de descifrat la Upload de imagini) pentru a avea mai multe alternative la Upload imagini FĂRĂ LOGARE.

PS. După vreo 3 săptămâni de teste observ că imaginile încărcate la ImgBox se încarcă uneori chiar FOARTE greu în comparaţie cu TinyPic. Din fericire, văd că acum la TinyPic codurile CAPTCHA au revenit "la normal".

[Admin]

Imaginile cu lățime (width) mai mare de 750 de pixeli sunt redimensionate.
(Clic-dreapta pe imaginea de mai jos şi Save Image As... pentru a salva imaginea cu dimensiunile originale ...)



O altă imagine ...



Puteti folosi butonul ImgD= pentru a posta o imagine la dimensiunea dorită (dar nu peste 750 pixeli, fiindcă oricum va fi apoi redimensionată automat la sub 750 pixeli ... mai exact 743 pixeli).

Exemplu : poza de mai sus o afişez la o lăţime de 200 pixeli. Codul va fi deci :

Code: Select all

[ImgD=200]http://www.infotravelromania.ro/foto/sinaia/sinaia2005/peles_castle.jpg[/ImgD]

Rapiditate :
- Copiere link (url-ul pozei) în căsuţa de editare
- Selectare link cu mouse-ul
- Clic pe butonul ImgD= de sus
- scriere 200 după semnul =

---

IMAGINI IN POPUPS

1) O poză în Popup (click pe link !). Şi apoi codul (BBCode) cu care se obţine imaginea respectivă.

Code: Select all

[imgw=http://i50.tinypic.com/2v1235w.png]O poză în Popup[/imgw]

2) O nouă Imagine în Popup (click pe link !)

(Este o poză mai mare. În Google Chrome, pentru închiderea imaginii deschise într-o fereastră nouă, este mai bine să se apese pe butonul ESC de la tastatură sau un Click de mouse în afara imaginii respective ...)

3) Aceeaşi imagine de mai sus şi tot în Popup se obţine prin click pe "thumbnail"-ul (poză miniatură) de mai jos :



şi codul respectiv (100 înseamnă lăţimea "thumbnail-ului") :

Code: Select all

[imgwd=100]http://www.infotravelromania.ro/foto/sinaia/sinaia2005/peles_castle.jpg[/imgwd]

4)



şi codul respectiv (150 înseamnă lăţimea "thumbnail-ului") :

Code: Select all

[ImgWT=150,http://i45.tinypic.com/9ledz5.jpg]http://i46.tinypic.com/wqzg2d.jpg[/ImgWT]

Deci codul este de forma :

Code: Select all

[ImgWT={NUMBER},{URL1}]{URL2}[/ImgWT]

unde {URL1} este locaţia thumbnail-ului iar {URL2} este locaţia pozei în sine (care se afişează la Click pe thumbnail ...).
Iar {NUMBER} este lăţimea de afişare a thumbnail-ului ... (nu contează litere mari/majuscule sau litere mici/minuscule)

Atenţie : Să nu existe SPAŢIU între {NUMBER} şi {URL1} (poza thumbnail nu va fi afişată .. deci nu va fi poză-miniatură pe care să se facă Click ...). Să existe DOAR o virgulă ,

(Această ultimă modalitate înseamnă că un thumbnail de dimensiuni mici va fi afişat iniţial în pagină - deci nu va fi afişat poza în sine cu o simplă redimensionare la afişarea iniţială - deci încarcarea paginii va fi mult mai rapidă.
Este varianta pe care o prefer ... şi o recomand .. pentru fluidizarea traficului în paginile forumului)


Observaţie :

Această ultimă modalitate se poate obţine prin combinarea a 2 BBCodes astfel :



adică

Code: Select all

[imgw=http://i46.tinypic.com/wqzg2d.jpg][img]http://i45.tinypic.com/9ledz5.jpg[/img][/imgw]

... dar thumbnail-ul se afişează la dimensiunile originale (adică 200 de pixeli în cazul de faţă ... Mai sus este la 150 pixeli).

---

Indicaţie / Observaţie :

În Google Chrome, la pozele FOARTE MARI (big height especially) este mai bine să se închidă poza de la tastatură (apasă pe ESCape) .. sau cu click în afara pozei ... (fiindcă e mai greu de nimerit butonul CLOSE Sper să remediez şi în Chrome problema asta ...). Deci fie ESC la tastatură fie click în afara imaginii (nu pe imagine ci în spaţiul liber din afara imaginii ...)

[Admin]

Folosind butonul ImgD= (şi nu obişnuitul Img) voi posta o imagine de foarte mari dimensiuni (1.600px × 1.000px) la o dimensiune pe care o aleg eu : lăţime = 500 (width).

Imaginea va fi afişată aşa cum îmi doresc, în plus imaginea postată cu butonul ImgD= este şi un LINK în acelaşi timp ...
Cu un click pe imagine se deschide în tab nou imaginea la dimensiunile originale (mouse-ul devine buton de zoom)

[Admin]

adica aşa :

Code: Select all

[Center]
[ImgD=200]http://i49.tinypic.com/2daeiv6.png[/ImgD]
[/Center]

(puteţi face click pe poza de mai sus şi se va vedea imaginea la dimensiunile originale)

sau în imagine, se vede aşa :

(La poza de deasupra am folosit clasicul buton Img - fiindcă imaginea nu are peste 750 pixeli .. deci n-are rost să o fac link pentru a putea fi văzută mai clar ... Ea este deja afişată la imaginile originale )

Indicaţie : Forumul redimensionează automat orice imagine cu lăţimea (width) mai mare decât 750 pixeli.
Deci, dacă e vorba de o poză foarte mare, din calitate se pierde evident (iar scrisul poate deveni ilizibil).

Dar dacă doriţi ca să fie mai uşor să poată fi văzută imaginea originală, folosiţi butonul ImgD= în loc de butonul Img
... şi deasemenea dacă doriţi o afişare în pagină la o lăţime preferată ... dar sub 750 pixeli, fiindcă dacă puneţi mai mult se redimensionează automat, mai exact la 743 de pixeli lăţime ...

[Admin]

Pentru o aliniere la stânga a imaginii şi deci posibilitatea de a scrie la dreapta imaginii folosiţi tag-ul IMGL (deci la tag-ul IMG ce apare cu click pe butonul Img mai puneţi un "L") ...

În felul acesta o postare ce conţine imagini poate deveni mult mai lizibilă.
(Evident că asta se face în cazul unor poze mai puţin late ... Altfel nu are rost)

În cazul pozei din stânga codul este scris mai jos (am folosit butonul CODE, pentru ca să apară doar codul ... nu să se execute codul şi să apară poza încă o dată)

Code: Select all

[imgl]http://i50.tinypic.com/28krgue.png[/imgl]

PS. Dacă foloseam Img (sau ImgD=, despre care am mai vorbit) nu puteam scrie în dreapta imaginii (decât un singur rând, până ajungeam la marginea din dreapta ... şi acel rând nealiniat estetic, ci fiind scris la nivelul bazei imaginii ...)

[Admin]

IMAGINI IN POPUPS

1) O poză în Popup (click pe link !). Şi apoi codul (BBCode) cu care se obţine imaginea respectivă.

Code: Select all

[imgw=http://i50.tinypic.com/2v1235w.png]O poză în Popup[/imgw]

2) O nouă Imagine în Popup (click pe link !)

(Este o poză mai mare. În Google Chrome, pentru închiderea imaginii deschise într-o fereastră nouă, este mai bine să se apese pe butonul ESC de la tastatură sau un Click de mouse în afara imaginii respective ...)

3) Aceeaşi imagine de mai sus şi tot în Popup se obţine prin click pe "thumbnail"-ul (poză miniatură) de mai jos :



şi codul respectiv (100 înseamnă lăţimea "thumbnail-ului") :

Code: Select all

[imgwd=100]http://www.infotravelromania.ro/foto/sinaia/sinaia2005/peles_castle.jpg[/imgwd]

4)



şi codul respectiv (150 înseamnă lăţimea "thumbnail-ului") :

Code: Select all

[ImgWT=150,http://i45.tinypic.com/9ledz5.jpg]http://i46.tinypic.com/wqzg2d.jpg[/ImgWT]

Deci codul este de forma :

Code: Select all

[ImgWT={NUMBER},{URL1}]{URL2}[/ImgWT]

unde {URL1} este locaţia thumbnail-ului iar {URL2} este locaţia pozei în sine (care se afişează la Click pe thumbnail ...).
Iar {NUMBER} este lăţimea de afişare a thumbnail-ului ... (nu contează litere mari/majuscule sau litere mici/minuscule)

Atenţie : Să nu existe SPAŢIU între {NUMBER} şi {URL1} (poza thumbnail nu va fi afişată .. deci nu va fi poză-miniatură pe care să se facă Click ...). Să existe DOAR o virgulă ,

(Această ultimă modalitate înseamnă că un thumbnail de dimensiuni mici va fi afişat iniţial în pagină - deci nu va fi afişat poza în sine cu o simplă redimensionare la afişarea iniţială - deci încarcarea paginii va fi mult mai rapidă.
Este varianta pe care o prefer ... şi o recomand .. pentru fluidizarea traficului în paginile forumului)


Observaţie :

Această ultimă modalitate se poate obţine prin combinarea a 2 BBCodes astfel :



adică

Code: Select all

[imgw=http://i46.tinypic.com/wqzg2d.jpg][img]http://i45.tinypic.com/9ledz5.jpg[/img][/imgw]

... dar thumbnail-ul se afişează la dimensiunile originale (adică 200 de pixeli în cazul de faţă ... Mai sus este la 150 pixeli).

---

Indicaţie / Observaţie :

În Google Chrome, la pozele FOARTE MARI (big height especially) este mai bine să se închidă poza de la tastatură (apasă pe ESCape) .. sau cu click în afara pozei ... (fiindcă e mai greu de nimerit butonul CLOSE Sper să remediez şi în Chrome problema asta ...). Deci fie ESC la tastatură fie click în afara imaginii (nu pe imagine ci în spaţiul liber din afara imaginii ...)

[Admin]

De ce am insistat atât cu crearea acestor BBCodes pentru imagini

În afară de TAG-urile ImgD=, ImgL, ImgR care au mai mult un scop estetic (şi care privesc : dimesiunea lăţimii, float:left, float:right) celelalte, care beneficiază de modalitatea de afişare a imaginii la dimensiunea originală, în aceeaşi pagină (deci în stil Popup), au fost create în alte scopuri.

TAG-urile : ImgW, ImgWD şi ImgWT (W de la Window, T de la Thumbnail, D de la Dimension ...)
Principalul scop este cel legat de dificultatea unora de a scrie "din prima" formule matematice folosind LaTeX.
Este mult mai uşor să scrii pe o coală A4 (să zicem), să scanezi la multifuncţională (şi la scanare nu se consumă cerneală din cartuşe) iar apoi să se afişeze imaginea scanată.

Atenţie să nu scanaţi poze la dimensiuni mari (în cazul în care, PENTRU ÎNCEPUT, apelaţi la această metodă). Deci nu scanaţi poze în format BMP. Încercaţi JPG, PNG sau chiar GIF (iar rezoluţia să nu fie mare).
Pe cât posibil, dacă nu reuşiţi, o să reformatez eu pozele. Dar, după un timp, dacă perseveraţi în postarea de imagini foarte mari în locuri UNDE NU TREBUIE să faceţi asta atunci voi şterge pozele (mai ales că MathJax are oricum nevoie de timp de încărcare în cazul în care nu dispuneţi de o conexie Internet cât de cât satisfăcătoare ... Dacă chiar aveţi o conexie Internet foarte slabă puteţi folosi butonul TEX în loc de simbolul dollar .. Deci acelaşi cod LaTeX dar nu se foloseşte MathJax (care foloseşte fonturi speciale) ci se foloseşte lucrul cu imagini foarte mici care reprezintă formulele matematice scrise cu LaTeX, imagini care nu crează deloc probleme ...).

Folosind topicul tutorial pentru LaTeX, adică : LATEX Help - Tutorial, nu trebuie să reţineţi formulele pe din afară, se face click pe simbolurile respective, deci chiar ar trebui ca scrierea în LaTeX pe forum să fie una foarte simplă ...

---

Apropo, reamintesc : Dacă pe o pagină nu vedeţi formulele obişnuite matematice (să zicem $x \in \mathbb{R}$) ci vedeţi codul Latex, ca în exemplul dat unde s-ar putea vedea codul :

Code: Select all

$x \in \mathbb{R}$

atunci daţi un simplu RELOAD / REFRESH la pagină, pentru ca MathJax să reîncarce formulele.

Dar TAG-urile de imagini mai folosesc şi în alte părţi (cum ar fi Topicele de Tutoriale .. etc)

[Admin]

Nu abuzaţi de text scris aiurea, cu Copy/Paste în principiu, în general într-o postare.
Postarea poate fi anulată în caz de repetări succesive cu scrieri inutile. În schimb, dacă doriţi o alternativă la un "text kilometric", scrieţi/copiaţi textul în WORD (sau în alt editor), apoi faceţi o captură de fragment de ecran cu un soft, cum ar fi Faststone Image Viewer, care este mic, EXTREM de bun, complex şi gratuit ... apoi FACEŢI O IMAGINE (captură a unei ZONE de ecran) şi poza se postează (UPLOAD) foarte uşor pe http://tinypic.com/ şi imediat se postează aici folosind link-ul furnizat de TinyPic după Upload şi butonul IMG de aici de pe Forum (din căsuţa de Editare).
Fiindcă oricum EDITAREA unei postări este limitată la 24 de ore, deci nu mai puteţi interveni la re-editare după 24 de ore ...
Pentru re-editare trebuie apelat la un Moderator sau Administrator.

UPDATE De la 740 pixeli acum lăţimea maximă trebuie să fie 739 pixeli.
Pentru siguranţă, o poză neredimensionată ar trebui să fie de maxim 730 de pixeli.
(Personal creez imagini de maxim 720 pixeli lăţime încă din perioada în care maximul era 743 lăţime .. şi nu 740 cum am scris mai jos, tot pentru siguranţă...)

---

Faceţi capturi de ecran cu lăţime de maxim 740 pixeli, fiindcă forumul va redimensiona oricum postările cu lăţime mai mare de 740 de pixeli la 740 pixeli lăţime (şi atunci poza va pierde în principiu din calitate).

Pentru ca TOTUŞI poza să se vadă în întregime, dacă e vorba de o poză cu lăţime mai mare de 740 de pixeli ea se poate vedea fie într-un Popup fie într-un nou tab al browser-ului (Chrome, Firefox, IE, etc), la un simplu clic pe poză. Detalii în topicul : Tutoriale, Informaţii şi Teste legate de Imagini

[Admin]

CODE :

Code: Select all

[img]http://i.imgur.com/WT0OIQV.jpg[/img]

VERSUS ... cea din postarea următoare...
... unde se face click pe imagine şi se deschide în fereastră de tip "LightBox" la dimensiunile originale
(Imaginea are 1000 pixeli lăţime... Dar imaginile peste 740 pixeli sunt redimensionate, proporţional)

[Admin]

COD :

Code: Select all

[imgWD=600]http://i.imgur.com/WT0OIQV.jpg[/imgWD]

( Am pus W de la Window şi D de la Dimension )

Personal prefer să pun o bordură de o anumită culoare (cod de culoare HTML #970000 aici), deci folosesc imgB
Este un BBCode (Bulletin Board Code) pe care l-am creat (ca şi pe celelalte care încep cu "img") şi pe care îl prefer.
Culorile mele (cele mai) preferate pentru borduri aici la poze sunt : #970000 , #008000 şi #000097
(Prima e "culoare predominantă" pe PORTAL, a doua pe FORUM, a 3-a pe BLOG ...)

COD :

Code: Select all

[C][imgB=#970000]http://i.imgur.com/WT0OIQV.jpg[/imgB][/C]

( BBCode-ul C e pentru Centrarea pozei... )

EXPLICAŢII : Codul HTML de culoare este de forma #****** , adică DIEZ, urmat de 6 CARACTERE,
care pot fi cifrele de la 0 la 9 sau literele A B C D E F (Total 16 posibilităţi. E vorba de sistemul HEXAZECIMAL...)

Daţi clic pe imaginea de mai jos pentru a vedea MAI CLAR un fragment din ce am scris aici...
... Şi butoane din Caseta de Editare, paleta de culori... etc...