Diferența dintre GIF și JPEG

.gif-urile și .jpeg-urile sunt legiune pe Internet. Sunt peste tot. Cu siguranță sunt pe toate paginile de Internet, chiar și pe post de logo; sunt reprezentările vizuale care fac un site atractiv.

Dar care este diferența între ele totuși? Majoritatea utilizatorilor de Internet vor fi incapabili să dea un răspuns corect. Care este diferența dintre ele și când trebuie folosite și în ce circumstanțe?

.gif-urile

Sunt fișiere grafice mici, de obicei mai mici decât jpeg-urile, care servesc ca și conduită pentru grafice simple online. Ele suportă doar 256 de culori și prin urmare ocupă mai puțin spaţiu decât jpeg. Se vor încărca mai rapid și sunt perfecte pentru titluri, bannere, logo-uri. O proprietate importantă a acestor fișiere este că suportă fundalul transparent (background transparency), util pentru suprapunerea peste alte elemente grafice. Fișierele gif pot conține de asemenea animații, simple sau complexe, care ocupă mai puțină memorie decât clasicul fișier Flash .swf. 

.jpeg-urile

Deoarece aceste fișiere suportă milioane de culori, ocupă mai mult decât formatul gif și sunt folosite pentru a menține condițiile foto-realistice ale imaginii. Formatul jpeg poate fi folosit pentru grafice dacă încercăm să păstrăm calitatea culorii și nu putem realiza acest lucru cu gif. O problemă a fişierelor JPEG se observă atunci când are loc compresia imaginii, şi anume, se pierd din informații. Elementele mici din poze pot dispărea definitiv după compresie sau pot deveni încețoșate.

Soluția?

Când folosim fiecare format în parte? Este simplu: utilizăm GIF când avem de a face cu grafice și JPEG când avem de a face cu fotografii. Ambele formate pot fi compresate și aduse la dimensiuni reduse, perfecte pentru utilizarea în mediul online.

Mesaj de notificare CSS3/JQuery

Pentru astazi mi-am propus sa folosim functionalitatea CSS3 si jQuery pentru a afisa un mesaj de notificare pe o pagina web.

Acesta este mesajul care se afiseaza, fara folosirea 
unor imagini suplimentare pentru background. Doar CSS3.

 

Mesajul dvs. a fost postat!

x

Nota! Dintr-un motiv necunoscut Blogger nu accepta toate instructiunile CSS3 si prin urmare mesajul nu este afisat corect. Dar exemplul arata mecanismul de functionare al mesajului de notificare.

Primul şi cel mai important lucru care trebuie să-l facem atunci când încercăm să afişăm un mesaj de notificare atractiv, este sa alegem culorile şi pictogramele.
Astfel avem:

Galben-verzui = Succes
Roşu deschis = Eroare
Galben pal = Alertă
Sky Blue = Altă informaţie

Pasul 1 : HTML
Să începem prin introducerea unui simplu cod HTML în pagină:

<pre>

<div class="green">Mesajul dvs. a fost postat!

<div class="cross">x</div>

</div>

</pre>

Aceasta este structura de bază a unui mesaj de notificare, fără CSS şi Javascript. În acest cod este utilizată clasa green, pentru a seta fundalul notificarii pe galben-verzui. Cealaltă clasă, cross, este folosită pentru a închide caseta de notificare.


Pasul 2 : CSS

.green{

background:#e8f1c4 url(images/success.png) no-repeat left center;

background:url(images/success.png) no-repeat left center, -moz-linear-gradient(top, #eff7dc 5%, #e4efb6 6%, #e8f1c4 21%, #eaf7ca 50%, #e8f1c4 93%, #d6e0b8 100%); /* FF3.6+ */

background:url(images/success.png) no-repeat left center, -webkit-gradient(linear, left top, left bottom, color-stop(5%,#eff7dc), color-stop(6%,#e4efb6), color-stop(21%,#e8f1c4), color-stop(50%,#eaf7ca), color-stop(93%,#e8f1c4), color-stop(100%,#d6e0b8)); /* Chrome,Safari4+ */

background:url(images/success.png) no-repeat left center, -webkit-linear-gradient(top, #eff7dc 5%,#e4efb6 6%,#e8f1c4 21%,#eaf7ca 50%,#e8f1c4 93%,#d6e0b8 100%); /* Chrome10+,Safari5.1+ */

background:url(images/success.png) no-repeat left center, -o-linear-gradient(top, #eff7dc 5%,#e4efb6 6%,#e8f1c4 21%,#eaf7ca 50%,#e8f1c4 93%,#d6e0b8 100%); /* Opera11.10+ */

background:url(images/success.png) no-repeat left center, -ms-linear-gradient(top, #eff7dc 5%,#e4efb6 6%,#e8f1c4 21%,#eaf7ca 50%,#e8f1c4 93%,#d6e0b8 100%); /* IE10+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eff7dc', endColorstr='#d6e0b8',GradientType=0 ); /* IE6-9 */

background:url(images/success.png) no-repeat left center, linear-gradient(top, #eff7dc 5%,#e4efb6 6%,#e8f1c4 21%,#eaf7ca 50%,#e8f1c4 93%,#d6e0b8 100%); /* W3C */

border:1px solid #cad883;

padding:10px 0px 10px 30px;

margin:10px 0;

color:#4e871c;

font-weight:700;

font-family:Verdana, Geneva, sans-serif;

font-size:11px;

width:400px;

-moz-border-radius:5px;

-webkit-border-radius:5px;

border-radius:5px;

}

.cross{

float:right;

margin:5px 5px 0 0;

font-size:12px;

line-height:10px;

font-variant:small-caps;

font-weight:bolder;

cursor:pointer;

}

.cross:hover{

color:#000;

}

Acesta este codul care creeaza întregul stil pentru caseta de notificare. CCS3 este destul de puternic pentru a creea fundaluri gradient, borduri cu colturi rotunjite, umbre. Acestea sunt principalele "ingrediente" pentru o caseta care sa atraga atentia.


Sa întelegem codul
Începem cu clasa green. Alaturi de o imagine am inclus un gradient în CSS3. Datorita functionalitatii CSS3, nu avem nevoie de o imagine pentru a creea un astfel de tip de fundal (ca în versiunile precedente). În acest mod, am redus utilizarea nefolositoare a marcatorilor (tag-urilor) img si div.
Un alt lucru important de remarcat este folosirea mai multor gradiente în loc de unul singur, cu doua culori.
Acum ca am stilizat containerul în care va sta mesajul nostru, trebuie sa oferim si un buton pentru a închide notificarea. În acest scop am folosit caracterul "x" (ASCII 088).

Atentie! În functie de imaginea folosita ca si pictograma de afisat, poate fi necesara ajustarea acesteia în caseta. Acest lucru se modifica pe liniile de tipul:
background:url(images/success.png) no-repeat left center

În loc de valoarea left si center atribuim o valoare numerica potrivita pâna obtinem rezultatul dorit.

Pasul 3 : JQuery
Pentru a ascunde mesajele de notificare vom folosi JQuery, desi acest efect poate fi obtinut si prin tranzitiile CSS3. În primul rând trebuie sa declaram biblioteca JQuery.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Este foarte important sa specificam acest lucru, altfel functiile noastre nu vor merge.

$(document).ready(function(){

    $(".cross").click(function(){

    $(this).parent("div").fadeOut('slow');

    })

});

O funcţie simplă care este apelată când utilizatorul dă click pe elementul ce are clasa cross şi ascunde caseta de notificare.

În mod similar, prin CSS putem schimba culorile casetelor de notificare.