Oricare dintre noi stie ce baneficii aduc CSS-urile in etapa de design a unei pagini web. Mai precis, acestea ofera o functionalitate sporita, faciliteaza operatiile de mentenanta ulterioare si confera un grad de profesionalism ridicat intregii aplicatii.
Ceea ce nu se cunoaste legat de CSS, este ca acestea ne pot ajuta pentru a optimiza pagina web pentru motoarele de cautare. Exista o serie de avantaje oferite de Cascading Style Sheets care ajuta in dezvoltarea unei pagini web “mai pe intelesul motoarelor de cautare”.
Principalul avantaj, din punctul de vedere al dezvoltarii web, adus de aceasta facilitate este acela ca se micsoreaza dimensiunea fizica a fisierelor HTML (sau cele de scripting … PHP, ASP, etc.) si in acelasi timp implica o modularitate de nivel inalt. Din punctul de vedere al optimizarii web, principalul avantaj datorat folosirii CSS-urilor este acela ca se poate plasa continutul informational relevant cat mai aproape de inceputul paginii, in asa fel incat motoarele de cautare sa inteleaga mai usor tematica si informatiile puse la dispozitie de acea pagina.
Dimensiunea Fisierelor si Raportul Cod Sursa
Primul pas ce trebuie urmat intr-o campanie de optimizare web, este sa va asigurati ca tot continutul informational al site-ului este vizibil catre motoarele de cautare. In acelasi timp, motorul de cautare functioneaza aproximativ la fel ca si rationamentul uman, in momentul in care indexeaza o pagina. Spre exemplu, daca omului ii este greu sa-si focalizeze atentia asupra unui anume paragraf in cadrul unei pagini, mai ales cand aceasta pagina este plina de “texte de umplutura”, asa si motorului de cautare ii este mai greu sa inteleaga anumite paragrafe, daca raportul dintre codul sursa al paginii si continutul informational propus de aceasta este unul supraunitar.
Modificand structura interna a unei pagini veti beneficia de doua avantaje majore. Primul, faptul ca veti putea urmari mai usor codul sursa atunci cand veti dori sa efectuati modificari ulterioare asupra acestuia, iar al doilea avantaj va fi acela ca motorul de cautare va putea intelege mai usor “despre ce e vorba” in pagina respectiva.
In mod normal, un vizitator uman al site-ului dvs. va interpreta un text scris cu font mare, bold-uit, colorat in verde, undeva la inceputul paginii, ca si titlul acelei pagini. Cu toate acestea, motorul de cautare nu va stii cum sa interpreteze acel text, decat daca ii subliniati dvs. modul in care sa o faca.
Va propun un exemplu :
<strong><font color=”#00FF00″ size=”24px”>Titlul unei pagini de pe site-ul dvs.</font></strong>
Poate fi inlocuit cu :
<h1>Titlul unei pagini de pe site-eul dvs.</h1>
Iar in fisierul CSS :
H1 {font-family: Arial; size: 24px; color: #00FF00; font-weight: bold;}
Implementand lucrurile asa cum am exemplificat mai sus, va asigurati ca motorul de cautare va interpreta titlul paginii respective asa cum trebuie, dar si ca vizitatorii site-ului vor trai aceeasi experienta vizuala.
Folosind tag-urile H1..H6 in codul HTML al paginii, combinate cu setari vizuale veti beneficia pe deplin de avantajele, din punctul de vedere
al optimizarii web, oferite de folosirea CSS-urilor in timp ce codul dvs. isi va micsora dimensiunile. Trebuie totusi sa va amintiti sa folositi cuvintele cheie, pentru care doriti sa efectuati optimizarea, in cadrul titlului paginilor optimizate. (intre tag-urile Heading)
Folosirea imaginilor in mod inteligent
Dupa cum am prezentat anterior, un avantaj oferit de CSS-uri este acela ca ajuta la micsorarea codului sursa, in timp ce se poate deplasa continutul informational mai aproape de inceputul paginii, fara a afecta aspectul vizual al acesteia.
Aproape toate site-urile web contin imagini in head-erul acestora (adica in partea de inceput a paginilor). Toate aceste site-uri pot beneficia de avantajele oferite de CSS pentru a aduce restul informatiilor din pagina mai aproape de inceputul acesteia, si in acelasi timp sa poata asigura acelasi design.
Spre exemplu, se pot adauga urmatoarele atribute tag-ului BODY, prin intermediul CSS-ului, pentru a insera un logo la inceputul unei pagini web,fara a specifica in mod explicit acest lucru in codul HTML :
background-image: url(../images/logo.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top left;
Inlocuirea efectelor vizuale implementate prin JavaScript
Este deja cunoscut faptul ca un site fara efecte vizuale are tendinta de a deveni monoton si plictisitor. In acelasi timp, un efect vizual interesant poate atrage atentia, sau poate ridica nivelul de profesionalism cu care a fost realizat un site. Efectele vizuale au devenit parte integranta a tuturor site-urilor dezvoltate in prezent.
In functie de tehnologia de implementare aleasa, efectele vizuale pot avea rezultate diferite. Un efect flash va fi greu de egalat folosind tehnologii JavaScript, dar, acesta prezinta dezavantajul ca implica o dependenta legata de instalarea flash-player-ului pe calculatoarele clientilor.
Din punctul de vedere al securitatii informatiilor, elementele flash sunt incapsulate si in principiu nu pot fi copiate.
Efectele JavaScript pot produce rezultate impresionante, si chiar daca sunt mai usor de modificat ulterior, prezinta trei dezavantaje majore :
codul JavaScript este vizibil tuturor clientilor, ceea ce inseamna ca acesta poate fi copiat mai usor
codul JavaScript implica un efort ridicat si o dimensiune mai mare a paginilor pentru a se realiza efecte relativ simple.
codul JavaScript nu este universal, deoarece Browser-ele web il interpreteaza diferit.
Prin intermediul codului CSS se pot realiza efecte vizuale profesionale, usor de modificat ulterior, cu o dimensiune a codului mai mica.
Principalul avantaj al codului CSS din punctul de vedere al realizarii efectelor vizuale, este acela ca efectele obtinute vor fi aceleasi indiferent de browser, atata timp cat acesta suporta standardele CSS cu care a fost dezvoltat efectul. Cel putin … producatorii principalelor Browsere Web sustin ca nu exista diferente de interpretare a codului CSS, comparativ cu standardele impuse de autoritatile in domeniu.
Acestea sunt o serie de avantaje directe aduse de folosirea style-urilor CSS (din punctul de vedere al optimizarii web). Astfel… pe termen lung, se face economie de banda, paginile site-ului se vor incarca mai rapid, vizitatorii vor putea beneficia de efecte vizuale mai placute, iar site-ul dvs. va fi mai usor de modificat ulterior. Un alt avantaj oferit de folosirea CSS-ului este acela ca puteti schimba tema vizuala a site-ului
fara a efectua modificari in codul sursa a acestuia.
