Tehnologii Web: HTML, CSS și JavaScript

Sigur ai auzit de front-end, de back-end, de javascript, html și css. De la prieteni, din media și din alte surse. Aproape de fiecare dată ți s-au părut limbi străine sau n-ai înțeles ce-au vrut să zică oamenii ăia. Azi vreau să ți le explic în mare pe fiecare în parte și să clarificăm acest limbaj al IT-iștilor care fac front end development.

În articolul de azi, ne orientăm în privința tehnologiilor care compun Internetul. Mai exact, discutăm despre tehnologiile de bază care sunt implicate în site-urile web: HTML, CSS și JavaScript, plus relația dintre ele. În plus discutăm despre Front End și Back End, despre baze de date, API-uri și Analytics. Dacă vrei să afli mai multe, stai pe-aproape!

Lucruri de bază: HTML, CSS și JS

Dacă te interesează câtuși de puțin domeniul ăsta al Front End-ului, n-ai cum să nu fi auzit deja de celebrele HTML, CSS și JS. Le vom da definițiile pe larg în momentul în care ne apucăm de modulele următoare, în care ți le voi preda pe rând, însă până atunci aș vrea să stabilim relația dintre ele și să îți explic de ce sunt importante, ca tehnologii de bază pentru Internetul modern.

Înainte să intrăm în pâine, ce este HTML-ul? Ce este CSS-ul? Ce este JavaScript-ul?

În termeni tehnici, HTML-ul (sau HyperText Markup Language în engleză) este un limbaj formal. El definește practic forma în care e structurată o informație, un document, o pagină care în contextul ăsta se numește pagină web. El descrie care bucată din text e titlul principal al paginii, care bucată e o listă de elemente, care bucată e o poză, care bucată e un link către altă pagină, și așa mai departe. Textul dă conținut, substanță și valoare paginii, pe când HTML-ul dă structură, sens și metasens. O să înțelegi la ce mă refer imediat.

Hai să analizăm și CSS-ul puțin. Cascading Style Sheets, cum se numesc în engleză, reprezintă un limbaj declarativ care e folosit să stilizeze HTML-ul, adică să-i dicteze cum să arate, să-i descrie și impună design-ul, aspectul vizual și uneori și niște elemente de interactivitate – spre exemplu: cum arată un link și apoi ce se întâmplă când te plimbi cu mouse-ul peste el. Fără CSS, toate HTML-urile ar arăta la fel (mai exact, așa cum definește browser-ul un document standard): de obicei text negru scris cu Times New Roman pe fundal alb, cu mărimi predefinite pentru titluri și subtitluri. În principiu nu sună rău, dar pe Internet nu găsim doar lucrări științifice, de licență, master sau doctorat (unde ar avea sens standardizarea asta), ci găsim experiențe întregi pe care le poți construi exclusiv folosind CSS-ul.

Nu în ultimul rând, JavaScript, sau JS cum mai e prescurtat. Atenție! A nu se confunda cu Java, care e un limbaj de programare cu totul diferit! Dacă fără HTML și CSS nu prea poți face site-uri (efectiv nu există o modalitate alternativă de a afișa informații pe site-uri în mod coerent și care să respecte tehnologii asistive și motoarele de căutare), JavaScript-ul este un soi de cireașă de pe tort. El se adaugă tehnologiilor HTML și CSS sub formă de îmbunătățire progresivă a felului cum e transmisă și consumată informația pe Internet. Spre deosebire de cele două, JavaScript este un limbaj de programare sau de scripting și implicit nu e așa permisiv ca HTML-ul sau CSS-ul la erori. Dacă ai o eroare în HTML sau în CSS, de obicei browserul știe să treacă peste ea, s-o ignore, și să afișeze restul site-ului fără probleme. În JavaScript, dacă ai o eroare se blochează execuția restului de cod care urmează, ceea ce-nseamnă că experiența utilizatorului și accesul lui la informație n-ar trebui să depindă de prezența sau buna execuție a JavaScript-ului în pagină. JavaScript-ul e un factor de potențială instabilitate care de cele mai multe ori funcționează corect, dar când n-o face, poate duce la posibilitatea să nu se încarce deloc pagina spre exemplu.

Vom trata problemele astea mai în detaliu când ajungem într-un modul viitor, peste câteva… zeci de articole. 🙂 Până atunci, însă, trebuie să știi că folosind JavaScript poți face animații foarte complexe, poți folosi informații în mod asincron (adică poți lua și folosi date de undeva fără să se încarce din nou pagina), poți implementa logică și funcționalitate imposibil de implementat dacă ești limitat doar la HTML și CSS. Ba mai mult, în era modernă a Front End Development-ului, JavaScript-ul a devenit modalitatea prin care se dezvoltă site-urile integral, de la zero. Mă refer aici la framework-uri și librării de front end, cum e React, Angular, Vue sau Svelte. Toate sunt diferite între ele, însă toate sunt capabile atât să permită crearea logicii aplicațiilor în spate, folosind codul pe care îl poți scrie în JavaScript, cât și să genereze HTML și CSS pe care browserele să le afișeze ca și cum ar fi stocate direct pe un server (prin Server Side Rendering sau Static Site Generation). Fără tehnologiile astea, aplicațiile care au JavaScript la bază sunt limitate în a folosi JavaScript asincron pentru afișarea informației (tehnologie care se numește Single Page Application) și asta le face mult mai fragile și inaccesibile.

Relația dintre HTML, CSS și JS

Voi încerca să-ți explic relația dintre HTML, CSS și JavaScript pe de o parte, și dintre back end și front end pe de altă parte, folosind mai multe metafore.

Metafora 1: Clădirea

O pagină web e ca o casă. HTML-ul este planul casei cu locația descriptivă a fiecărui element și cu notații asupra elementelor respective. CSS-ul este design-ul interior gândit de arhitect până la cele mai mici detalii de mobilă, culori și dispunere a obiectelor. JavaScript-ul sunt sistemele: electric, termic, de apă și de gaz. În teorie, poți locui într-o casă fără electricitate, apă și gaz, dar ca să te încălzești iarna va trebui să arzi lemne, să te răcorești vara va trebui să-ți faci vânt, să gătești ar trebui să faci un foc în curte, să îți faci duș va trebui să găsești un pârâu sau să cari apă din fântână până la baie, și așa mai departe. Nu e imposibil, strămoșii noștri așa făceau, dar dacă se poate mai bine azi, de ce să nu profiți de asta?

Ah, și era să uit: browser-ul e firma de construcții care-ți construiește și livrează casa la cheie, tu doar trebuie s-o folosești ulterior.

Privind în sens mai larg, am tras o paralelă între o clădire și o pagină web. Dacă e să continuăm această metaforă, un cartier (adică o colecție de clădiri și spații diferite cu scopuri diferite) reprezintă un website complet.

Metafora asta o să ne servească bine și în viitor, când voi încerca să-ți explic de ce fără JavaScript e greu, dar fără HTML și CSS nu ai casă, ai doar niște sisteme expuse la intemperii fără structură și foarte sensibile la orice influență externă. Dar discutăm despre asta peste câteva articole.

Până atunci, să mai explorăm o metaforă:

Metafora 2: Corpul omenesc

Imaginează-ți un corp omenesc. HTML-ul sunt oasele și organele. JavaScript-ul sunt mușchii și sistemele circulator și nervos. CSS-ul e pielea, părul, unghiile, etc.

Metafora 3: Orașul

Nelegată de metafora de dinainte, imaginează-ți o metropolă în care locuiesc milioane de oameni. Dacă această metropolă reprezintă o pagină web, atunci HTML-ul reprezintă clădirire din oraș. În felul cum ele sunt construite și distribuite se definește natura fiecărui cartier: rezidențial de lux, rezidențial de masă, comercial, agricultural, industrial, turistic și de relaxare (parcuri, grădini, muzee, etc). CSS-ul reprezintă stilul arhitectural al tuturor clădirilor și conținutului fiecărei clădiri în parte. JavaScript-ul reprezintă străzile, metroul, tramvaiul, cablurile de Internet și orice altă conexiune din oraș, care ajută ca orașul să fie ușor de străbătut și de trăit în el.

Metafora 4: Pizza

Nu în ultimul rând, dacă îți imaginezi o pizza. Bine, nu trebuie să-ți imaginezi, uite una chiar acum…

În această pizza au intrat mai multe ingrediente prin urmarea unei rețete. Blatul e partea mai puțin vizibilă, dar foarte importantă, pe care stau toate ingredientele, și e o paralelă la HTML. CSS-ul e reprezentat de toate topping-urile și condimentele pe care le pui peste, iar JavaScript-ul e cuptorul care coace pizza și o face gata de servit.

Back End, Front End și Full Stack

Ce-am descris mai devreme acoperă mai degrabă ce „se vede” dintr-un site. Adică lucrurile cu care ai contact direct. A fost mai simplu să încep așa, pentru că partea asta compusă din HTML, CSS și JavaScript, e cea mai ușor de explicat pentru că e palpabilă, o experimentezi de fiecare dată când intri pe un site, și de-asta se numește Front End.

Dar mai există o parte, în spatele acestei „fațade”, care facilitează buna funcționare a ei și îi permite să aibă acces la tot felul de lucruri. Metafora casei e cea mai utilă în acest moment, ca să-ți povestesc cum se raportează front end-ul la back end.

Deci front end-ul e ce se vede, back end-ul e ce nu se vede.

Așa cum ți-am zis mai devreme, HTML-ul e planul, CSS-ul e design-ul interior și JavaScript-ul sunt sistemele: electric, termic, de apă și de gaz. Dacă astea sunt Front End-ul, atunci Back End-ul e pământul pe care construiești (serverele de hosting), primăria care-ți dă drept de folosire a terenului (registrar-ul de la care iei domeniul), plus companiile care-ți furnizează electricitate, căldură, apă și gaz (serverul software – Apache, Nginx, MS Server, NodeJS, ș.a.m.d. și framework-ul în care e construit site-ul: .NET, Java, Vue, React, Angular, ș.a.m.d.) care reprezintă back end-ul.

Back End-ul nu se experimentează direct, ci prin efectele pe care le are asupra front end-ului. Când completezi un formular de pe un site, există un Back End (la tine sau remote) care preia datele respective, le validează și sanitizează (adică le curăță), le interpretează, le stochează și apoi îți dă un rezultat, care apare tot în Front End.

Interacțiunea dintre Back End și Front End e uneori foarte puternică (în contextul în care Front End-ul este 100% generat și controlat în Back End) și alteori mai slabă (în contextul în care Back End-ul intervine tehnologic doar când e nevoie de el – la trimiterea de formulare, la interacțiunea cu sisteme complexe care au nevoie să salveze sau trimită date și așa mai departe). Și din această cauză, uneori și job-urile de Front End și Back End uneori se suprapun. Când se întâmplă asta, și un programator reușește ca după ce stăpânește una din arii, să învețe noțiuni și în cealaltă, el sau ea intră în sfera de Full Stack Development. Full Stack, prin definiție, înseamnă să poți controla sau influența toate tehnologiile din spatele livrării unui website sau unei aplicații către public.

Date, Infrastructură și Management

Există și noțiuni și job-uri cu care tu, ca viitor Front End Developer, nu vei intra în contact așa des, însă e util măcar să știi că ele există.

Partea de Back End e împărțită (în special în companiile mari) în mai multe discipline și specializări. Back End Developerii sunt programatorii „omologi” ai Front End Developerilor care lucrează la funcționalități, API-uri și alte aspecte care nu se văd cu ochiul liber. Spre exemplu, Database Developerii sunt specialiști în baze de date (care e locul unde se salvează datele, care uneori pot fi atât de complexe încât e nevoie de o specializare întreagă care să se ocupe de structurarea și management-ul lor).

Mai există câteva specializări care contribuie la succesul unui site: testerii sau specialiștii de QA care se asigură că site-ul îndeplinește toate cerințele pentru a fi funcțional și în parametri, administratorii de sisteme și specialiștii de DevOps care se asigură că site-ul e funcțional, scalabil și eficient tehnic, specialiștii în marketing care mânuiesc unelte ca Google Analytics și SEO pentru a crește traficul de pe site și numărul de clienți ai companiei (dacă e cazul) și așa mai departe.

Cu toții apreciază munca Front End Developerilor și interacționează cu ei constant pentru a își putea face treaba, însă vom aborda aceste aspecte ceva mai târziu. Pentru astăzi, eu zic că e suficient.

Recapitulare și temă

Felicitări, ai mai parcurs un articol din curs! Azi am învățat despre tehnologiile de bază ale Internetului și cum interacționează între ele pentru a putea forma baza site-urilor pe care le vom construi împreună.

Ăsta e momentul perfect să îți dau o temă pentru acasă.

• Intră pe orice site și scrie-mi în comentarii ce ține de HTML, ce ține de CSS și ce ține de JavaScript din acel site.
• Dacă urmărești pe laptop sau PC, apasă F12 pe orice site, mergi în tab-ul Elements și vezi cum arată HTML-ul paginii curente. Găsește (apăsând Ctrl + F) textul “<h1” și pune în comentariu ce apare după acel H1.

Tocmai am terminat a doua lecție din cursul de Front End Development în Română. Dacă sunt lucruri pe care nu le-ai înțeles și vrei să îmi adresezi o întrebare, scrie mai jos în comentarii și îți răspund cât pot de repede!

În cazul în care ți-a plăcut acest articol și video, dă un Share tuturor prietenilor tăi care ar putea învăța ceva nou din lecția de azi. Dacă nu ești încă abonat la canalul de YouTube și vrei să primești video-urile mele viitoare, apasă aici pe Subscribe, clopoțel și alege Toate Notificările, ca să primești tot ce urmează să public în viitor.

Vrei să te angajezi în domeniu ca urmare a parcurgerii cursului ăsta? Găsești toate lecțiile din curs chiar aici »