Gestionarea fisierelor
Un site contine mai multe tipuri de fisiere, cu diferite tipuri de continut si diferite roluri: fisiere ce contin text, cod, fisiere media, fisiere de stil etc.
Atunci cind construim un site, trebuie sa asamblam aceste fisiere intr-o structura sensibila si trebuie sa ne asiguram ca pot comunica intre ele.
Voi explica modul de configurare a unei structuri de fisiere si la ce anume ar trebui sa acordati mai multa atentie.
Unde trebuie plasate fisierele site-ului in computer?
Cind lucrati la un site, ar trebui sa pastrati toate fisierele intr-un singur folder, care sa reflecte structura site-ului ce va fi publicat pe server.
Puteti plasa acest folder oriunde, de preferinta, intr-un loc usor de gasit, pe desktop, de exemplu.
Puteti sa denumiti acest folder "Proiecte web", iar in interiorul lui, creati un alt folder denumit "Proiect 1" si plasati sau creati in interiorul acestuia, toate fisierele care vor avea legatura cu proiectul respectiv.
Numele fisierelor si spatierea
Recomandarea specialistilor este sa denumim folderele si fisierele folosind litere mici si fara spatii intre cuvinte, pentru ca:
- Multe computere, in special serverele sunt "case sensitive" si vor considera, de exemplu ca, Imaginea-mea.jpg este un fisier diferit fata de imaginea-mea.jpg, caz in care lucrurile nu vor functiona asa cum va asteptati.
- Browserele, serverele web, limbajele de programare, trateaza spatiile dintre cuvinte in mod diferit. Daca utilizati spatii intre numele fisierelor, unele sisteme, pot trata aceste fisiere ca fiind fisiere multiple. Unele servere vor inlocui spatiile dintre numele fisierelor cu „% 20”(codul de caractere pentru spatiile din URI-Uniform Resource Identifier - un sir de caractere, care identifica o anumita resursa) si astfel link-urile vor fi distruse. Este indicat sa separam cuvintele cu o cratima (fisierul-meu.html) si sa nu utilizam underscore (fisierul_meu.html).
Google prefera cratima si o trateaza ca pe un separator de cuvinte.
Asadar, este bine sa va obisnuiti inca de la inceput, sa scrieti toate numele de foldere si fisiere cu litere mici si fara spatii intre cuvinte, cel putin pina veti sti exact ce faceti si de ce. In acest fel veti avea mult mai putine probleme.
Ce structura de fisiere ar trebui sa aiba site-ul?
Cele mai intilnite fisiere din structura unui proiect sunt:
- index.html - acest fisier este de fapt pagina de pornire a oricarui site, fara a fi absolut obligatoriu sa utilizam acest nume;
- folder pentru imagini - acest folder va contine toate imaginile pe care le veti utiliza in proiect;
- folderul de stiluri - in acest folder vor "locui", fisierele care contin codul CSS;
- folderul pentru script-uri - in acest folder veti plasa fisiere care contin cod javascript.
Pentru inceput, reproduceti pe propriul calculator structura simpla, descrisa mai sus. Aceasta ar trebui sa arate cam asa:
Salvati urmatoarea imagine - star.svg in folderul imagini.
☞ Utilizatorii de computere cu sistem de operare Windows, pot avea probleme in a vedea extensia unor fisiere, pentru ca exista o optiune numita "Hide extensions for known file types". Daca nu puteti vedea extensiile fisierelor, atunci trebuia sa modificati aceasta setare, prin bifarea casutei corespunzatoare din Explorer, View >> File name extension.
Caile fisierelor
Pentru a face ca fisierele sa comunice intre ele, este necesar sa furnizati caile corecte, sa creati un canal de comunicare, o ruta, astfel incit un fisier sa stie unde se afla altul. Pare complicat, dar nu este deloc asa.
Pentru a demonstra acest lucru vom introduce putin HTML in fisierul nostru index.html, si vom face in asa fel incit acesta sa afiseze o imagine.
Deschideti in Notepad fisierul index.html si inserati codul de mai jos, chiar daca nu intelegeti ce face codul respectiv. Veti intelege mai tirziu, cind vom analiza in detaliu structura unei pagini web.
Linia img src="" alt="imagine test", reprezinta codul HTML cu ajutorul caruia vom insera imaginea in pagina. Trebuie sa indicam corect, calea catre imaginea pe care dorim sa o afisam.
Imaginea ar trebui sa se afle in folderul imagini, care se afla in acelasi director cu fisierul index.html.
Trebuie sa-i spunem fisierului index.html, sa caute imaginea star.svg in folderul imagini astfel: imagini/star.svg.
Tot ce ramine de facut acum este sa introducem calea imagini/star.svg intre ghilimele atributului src="", astfel: img src="imagini/star.svg" alt="imagine test"
Salvati fisierul index.html si cu dublu click deschideti fisierul in browser. Ar trebui sa vedeti o pagina web care afiseaza o imagine, ca in exemplul de mai jos:
Faceti click pe tab-ul - Preview - pentru a vedea ce este afisat in pagina.
Iata citeva reguli generale despre caile fisierelor:
- Pentru a face legatura dintre un fisier tinta(imaginea-mea.jpg), aflat in acelasi director cu fisierul index.html, utilizati doar numele fisierului tinta: imaginea-mea.jpg,
- Pentru a face legatura dintre un fisier tinta(imaginea-mea.jpg), aflat intr-un subdirector, scrieti numele directorului in fata caii, bara oblica inainte si numele fisierului tinta: subdirector/imaginea-mea.jpg. Prin analogie, daca exista mai multe directoare, vom avea o cale de genul: subdirector1/subdirector2/imaginea-mea.jpg
- Pentru a face legatura dintre un fisier tinta(imaginea-mea.jpg), aflat deasupra fisierului index.html, pentru a ajunge la acelasi nivel, incepem calea cu doua puncte, bara oblica inainte si numele fisierului astfel: ../imaginea-mea.jpg. La fel ca in situatia de mai sus, putem intilni situatii de genul: ../../subdirector/imaginea-mea.jpg, sau ../subdirector1/subdirector2/imaginea-mea.jpg, orice combinatie fiind posibila, in functie de structura de directoare.
Pentru moment, cam asta este tot ce trebuie sa stiti despre caile fisierelor.