Tu știi cum funcționează un calculator, așa în mare? Dacă nu, atunci articolul și video-ul de mai jos îți va da o bază teoretică simplă care să te ajute să înțelegi mecanismele din spate, care te vor ajuta la rândul lor să fii un web developer mai bun.

Azi pornim, deci, primul modul din curs: Bazele Web-ului, mai exact ce este, cum a apărut și cum funcționează în mare un calculator. Cel puțin din perspectiva cuiva care va lucra cândva în industrie, ca Web Developer sau Web Designer. Dacă sună bine, începem imediat!

Ce este un calculator?

Ce este un calculator? E o unealtă cu care poți face lucruri care înainte îți luau mult mai mult timp. Omenirea a inventat în mod constant unelte, de la roată la ciocan, de la prima presă tipografică a lui Gutenberg până la electricitatea alternativă a lui Tesla. Toate transformă munca grea, făcută cu mâna în ceva mult mai simplu, folosind unealta respectivă. Ei bine, gândește-te la calculator ca fiind o unealtă inventată de oameni ca să-i ajute să gândească mai ușor. Să rezolve ecuații, să urmărească stele pe cer sau să manipuleze informații.

Cele patru lucruri pe care orice mașină de calcul trebuie să le poată face sunt:

1. să permită introducerea unor informații, care se numește Input
2. să permită stocarea lor pe perioada de timp pe care sunt utile,
3. să proceseze informația într-un fel relevant pentru problema pe care încearcă s-o rezolve și în final
4. să livreze informația într-un fel util și ușor de perceput pentru omul care o folosește, care se numește Output

Aceste patru acțiuni fac un calculator să fie ceea ce este. Dacă ar lipsi doar una, un calculator ar fi cu totul altceva.

Spre exemplu, o mașină de scris e un calculator fără abilitatea 3 – de procesare. Într-o mașină de scris introduci informații cu ajutorul tastaturii, ea stochează informația pe o coală de hârtie și tu poți extrage informația oricând scoțând coala. Îi lipsește un singur pas ca să devină calculator: procesarea informației. Ce tastezi, aia extragi, nu se schimbă în niciun fel.

Introducerea informației într-un calculator se poate face folosind mouse-ul, tastatura, microfonul, ecranul tactil sau camera. Acum că purtăm mini-calculatoare și la mână, ele pot simți pulsul, temperatura sau presiunea arterială. În mașini deștepte cum sunt cele de la Tesla, au radare, o multitudine de camere, microfoane și un GPS care să le ajute să se „orienteze”. Toate astea intră la categoria „Input” și sunt informații transformate în date pe care calculatorul știe să le înțeleagă.

Toate informațiile astea sunt apoi stocate – întâi în ceva ce se cheamă memorie și pe care calculatorul o accesează aproape instantaneu. Apoi, pe ceva ce se cheamă „hard disk” care face parte din ansamblul fizic al calculatorului dar e mai puțin rapid decât memoria, sau în „cloud” – adică direct pe Internet, care e și mai puțin rapid, dar de obicei are avantajul că dacă îți distrugi calculatorul, informațiile trăiesc în continuare „în cloud”. Dacă v-ați luat un Android nou și odată ce v-ați logat cu email-ul de la GMail și parola ați observat că aveți pe noul telefon toate aplicațiile voastre vechi, asta se întâmplă fiindcă Google stochează lista aplicațiilor instalate pe vechiul telefon „în cloud” și telefonul, care e și el un calculator mai mic, accesează datele din „cloud” și reface lista aplicațiilor instalate la prima folosire.

Revenind la memorie… Din memorie, spre exemplu, calculatorul poate să folosească informațiile disponibile ca să le „proceseze”. Adică să nu le lase în aceeași formă în care le-a primit, cum face mașina de scris, ci să le interpreteze cumva. O să aflăm cum se întâmplă asta exact imediat, dar pe scurt, folosește o serie de instrucțiuni pe care i le dăm tot noi, oamenii, și care compun un „algoritm”. Vei afla mai multe despre algoritmi imediat ce ne apucăm de JavaScript, dar mai avem ceva până acolo. După ce procesează informația, calculatorul stochează noua informație deja procesată tot în memorie, după care o transferă mai departe.

Transferul ăsta se traduce prin „Output”, și poate fi în format text, imagini, video-uri, jocuri, realitate virtuală sau chiar comenzi de control ale unui robot spre exemplu. Informațiile pot fi folosite imediat, afișând rezultatul pe un ecran spre exemplu și în același timp pot fi și stocate pe un dispozitiv din calculator (hard disk-ul de care ziceam mai devreme), sau transferate pe Internet într-un soi de hard disk virtual (cloud-ul de care ziceam mai devreme). Când se întâmplă asta, Output-ul de la calculatorul tău devine Input pentru alt calculator de pe Internet.

Hai să înțelegem mai bine procesele astea patru printr-o metaforă.

Imaginează-ți o librărire…

Inițial, e goală. Are rafturi, obiecte și sisteme care reprezintă partea „hardware”. Dar fără oameni care s-o umple de cărți, s-o folosească și s-o întrețină, o bibliotecă e inertă, e lipsită de viață și de activitate. Ăsta e calculatorul tău imediat ce-l cumperi fără sistem de operare.

Apoi, îi instalezi calculatorului un sistem de operare și e ca și cum ai angaja personal care să opereze bibliotecă. Adică oamenii care să folosească hardware-ul. Ei sunt o parte din ce se numește software, care e o categorisire vastă cu multe feluri de programe și rutine în care n-o să intrăm azi.

Calculatorul tău nu e genul de librărie în care te descurci ca la autoservire, e o librărie în care dacă intri nu-ți cauți singur cartea, ci ai un librar care să caute cartea pentru tine într-un registru, apoi să se ducă fizic să o extragă și să ți-o pună pe o masă temporară de unde să vii tu să o iei, să o citești fie pe loc, fie acasă. Asta e o aproximare metaforică a felului cum funcționează un calculator.

Oamenii care aduc cărți noi în bibliotecă sunt Input-urile.

Ei vin cu cartea, o pun pe masa temporară (în memorie) de unde un librar (o parte a procesorului) vine și le sortează și organizează și curăță de praf, apoi le plasează la locul lor în librărie (pe hard disk).

Oamenii care au nevoie de cărți din bibliotecă sunt Output-urile.

Ei vin cu o cerere exactă pe care o transmit librarilor, aceștia caută în registrul intern adresa exactă a cărților căutate, culeg pe rând cărțile în mod eficient din toate locațiile, trec în registru faptul că au fost împrumutate (sau chiar le fac copii Xerox pe loc dacă e cazul) și le pun pe măsuța temporară. Din memorie, cărțile sunt luate și fie citite pe loc, în sala de lectură, și în felul ăsta vezi pe ecran informațiile căutate (texte, jocuri, filme, poze, etc) fie sunt scoase din librărie și transmise în altă parte (pe Internet).

În felul ăsta, calculatorul e capabil să execute comenzile și să proceseze și afișeze informațiile pe care i le ceri. Există și lucruri care se întâmplă automat, dar chiar și alea au fost gândite și codate inițial de un om care i-a zis calculatorului exact ce să facă și cum să își automatizeze procesele când dă de o comandă specială.

Când dai Shut Down în Windows, spre exemplu, ai observat poate că întâi se închid toate ferestrele și softurile care rulau în acel moment (se golește librăria de librari și personal) și abia apoi calculatorul se închide. Procesul ăla e automat, dar a fost gândit și explicat calculatorului dinainte direct în codul sistemului de operare.

Am discutat despre cum funcționează calculatoarele în mare, hai să analizăm pe foarte scurt și istoria lor.

Cum a apărut?

Cele mai vechi calculatoare, de acum câteva sute de ani, erau construite din lemn sau metal cu mecanisme pur mecanice cu care le puteai da comenzi foarte simple. Erau în stare să facă exclusiv niște calcule numerice (adunări sau scăderi, rareori înmulțiri sau împărțiri).

La fel erau și primele calculatoare bazate pe circuite electrice. Deși mult mai rapide decât cele bazate pe mecanisme pur mecanice, erau foarte mari (cât 3-4 sufragerii comuniste, pe puțin), foarte zgomotoase și foarte încete față de viteza cu care suntem obișnuiți astăzi. Am văzut și eu unul în funcțiune când eram foarte mic, la Centrul de Calcul Alexandria, unde lucra tata la finalul anilor ‘80. Cu toate că erau imense, multe calculau doar operații complexe aritmetice. Acum, poți folosi un calculator la mult mai multe lucruri decât atunci.

Evoluția calculatorului n-a schimbat aproape deloc principiile de funcționare, doar viteza și capacitatea de procesare și stocare. Dacă acum 30 ani un calculator era ca o bibliotecă dintr-o școală de sat, în stare să stocheze câteva zeci sau sute de cărți și cu o bibliotecară octogenară care abia se mișca, acum în buzunarul tău ai o Librărie a Congresului SUA cu mii de miliarde de volume și cu sute de bibliotecare pe skateboard-uri care se mișcă aproape instantaneu prin toată biblioteca.

În plus calculatoarele sunt acum peste tot: în buzunarul tău, în mașina ta, la biroul tău, în spațiu, pe Marte și în tine. Suntem, cel puțin funcțional vorbind, interdependenți de calculatoate pentru că ne ajută și ghidează viața într-un grad ridicat. Dacă ți-ai propus să devii web developer, vei intra în tagma de elită a oamenilor care știu să controleze calculatoarele în măsura în care pot dezvolta site-uri care rezolvă probleme pentru alți oameni.

Hai să explorăm în final și bazele computaționale reale ale calculatoarelor, adică exact cum funcționează procesele descrise mai sus.

Cum funcționează, în mare, un calculator?

Pe tine, ca viitor web developer, nu te interesează în detaliu fiecare aspect în parte. Dacă ai vrut să te specializezi pe programare (în special cea mai low level, în C sau chiar Assembler), ar fi fost esențial să înțelegi cum funcționează alocarea memoriei, multithreading-ul și alte aspecte computaționale complexe. Ignorăm, deci, detaliile mici și ne concentrăm pe ce ne interesează la un nivel simplist.

Poate că ai auzit pe undeva faptul că toate calculatoarele folosesc același cod secret ca să vorbească între ele și să comploteze dominarea lumii! Glumesc – codul nu e deloc secret, e doar un fel foarte eficient (din câte știm noi momentan cel puțin) să stochezi informație. „Pornit” sau „Oprit”. 1 sau 0. Ăsta e limbajul pe care-l înțelege în realitate calculatorul. Dar nimeni nu stă să învețe toate combinațiile de 1 și 0 care sunt implicate în a crea – sau juca – Minecraft sau Fortnite spre exemplu. Sau a face absolut orice altceva pe calculator. Inclusiv site-uri. Nici vorbă!

E totuși interesant de știut cum se codifică informația doar în două simboluri: 1 și 0. Am zis intenționat „codifică” pentru că în spatele acestui principiu stau niște noțiuni de baze numerice și criptografie pe care le vom atinge foarte puțin – suficient de puțin cât să nu fie plictisitor, dar să fie totuși interesant.

De ce 1 și 0? Pentru că dacă te decizi să folosești curentul electric să stochezi informație, n-ai cum să faci asta decât dacă închizi sau deschizi un circuit. Dacă prin circuit trece sau nu trece curent. Dacă nu trece, cifra corespunzătoare acelui micro-circuit numit „tranzistor” e zero, dacă trece curent prin el, atunci e unu. Bun, ai deja o informație: oprit/pornit, zero/unu… dar și fals/adevărat. Poți codifica spre exemplu valoarea de adevăr a unei propoziții folosind 0 sau 1. Ăsta e cel mai simplu exemplu de transformare a stării unui sistem fizic (un tranzistor prin care trece sau nu trece curent) într-un sistem informatic (ceva e adevărat sau fals în cod). Acum imaginează-ți că totate calculatoarele de azi, inclusiv telefonul tău mobil, au 15-20 miliarde de tranzistori doar în procesor. Deci pot să opereze instantaneu aproape cu 15-20 miliarde de valori de adevăr (fals/adevărat) de mai multe ori pe secundă.

Deși ne place adevărul și urâm minciuna, valoarea de adevăr nu e tocmai utilă dacă e singurul lucru pe care-l poți stoca într-un calculator, nu-i așa? Interesant e că poți folosi cifrele din spatele stării tranzistorilor ca să obții șiruri lungi de 0 și 1. Fiecare 0 sau 1 se numește „bit” de informație (vine din englezescul „bucățică”). Șirurile de biți pot fi aproape oricât de lungi dorești. Și aici intervine codificarea. Să intrăm puțin și în asta.

Tu și cu mine suntem obișnuiți să scriem numerele ca fiind combinații de cifre de la zero la nouă. 7 are propriul simbol, care e 7. 37 nu are propriul simbol, pentru că e un 3 și un 7 care au valori diferite – cu cât e mai la stânga cifra, cu atât are valoare mai mare. Sistemul de numerație funcționează în ceea ce se cheamă „baze”. Baza 10 e cea în care lucrăm noi zi de zi și dăm note la școală sau plătim salarii pentru web developeri. Cu cât ceva are mai mulți de zero, cu atât e mai mare, mai valoros. Cu cât ceva are mai mulți de zero, cu atât s-a înmulțit mai mult cu baza de enumerație, care e 10. Revenind la exemplul inițial, 7 = 7 x 10 la puterea 0. N-o să explic prea mult puterile, dar ca idee, puterea reprezintă de câte ori înmulțești cu numărul de sub putere restul expresiei matematice. Orice la puterea zero e egal cu 1. Deci 7 = 7 x 1 (logic). Dar 37? 37 = 30 + 7 = 3 x 10¹ + 7 x 10⁰. Dacă observi, baza 10, asta în care facem noi calculele, e numărul ridicat la puterea cifrei pe a cărei poziție se află numărul respectiv. Uite pozițiile, dacă începem de la zero.

Hai să mai facem un ultim exercițiu înainte să legăm lucrurile astea de ce vorbeam mai devreme. Numărul 1024 = 1 x 1000 + 0 x 100 + 2 x 10 + 4 x 1 = 1 x 10³ + 0 x 10² + 2 x 10¹ + 4 x 10⁰. Dacă ții minte tehnica asta, ai învățat (sau reînvățat, pentru cei care au trecut deja prin asta la școală) despre bazele numerice. E simplu. Acum hai să vedem de ce e relevantă informația asta.

Dacă în baza 10 aveai la dispoziție 10 simboluri prin care să exprimi mărimea unui număr (0, 1, 2, 3, 4, 5, 6, 7, 8, 9), în baza 2 ai doar… două simboluri. Bingo! 0 și 1. Hai să vedem cum se face transferul din baza 10 în baza 2. Să luăm, spre exemplu, numărul scris în baza 10: 129 = 1 x 100 + 2 x 10 + 9 x 1 = 1 x 10² + 2 x 10¹ + 9 x 10⁰. În baza 2, n-avem decât să o luăm „băbește” la-nceput: doi la ce putere e cel mai aproape de 129? 2⁰ = 1, 2¹ = 2, 2² = 4, 2³ = 8, 2⁴ = 16, 2⁵ = 32, 2⁶ = 64, 2⁷ = 128. Aha! Practic, am găsit transcrierea în baza 2 a lui 128 deja, și de aici la 129 mai avem doar de adăugat 1, adică 2⁰. 128₍₁₀₎ = 1 x 2⁷ + 0 x 2⁶ + 0 x 2⁵ + 0 x 2⁴ + 0 x 2³ + 0 x 2² + 0 x 2¹ + 1 x 2⁰ – bun, și la ce ne ajută notația asta? Mai țineți minte cum scrierea asta „pe puteri ale bazei” ne ajuta să traducem poziția exactă a cifrelor într-un număr din baza 10? Hai să facem la fel pentru 129 în baza 2: 129₍₁₀₎ = 10000001₍₂₎. Numărul ăsta în baza 2 are 8 cifre de 0 sau 1, ceea ce e o coincidență voită, pentru că această grupare de 8 cifre binare, de 8 „biți” se numește „byte” sau „octet”. Dacă alăturăm la cuvântul „byte” cuvântul din latină care reprezintă „o mie”, spre exemplu, care e „kilo”, obținem „kilobyte”. Un milion e „mega”, deci „megabyte”. 1 miliard e „giga”, deci „gigabyte”. 1000 miliarde e „terra”, deci „terrabyte”. Sper că ați înțeles acum ce înseamnă de fapt denumirile astea când cumpărați memorii sau telefoane sau laptop-uri. Ceva cu 16 Gigabytes de memorie RAM poate stoca în memoria rapidă a procesorului 16 miliarde de grupări de bytes.

Și la ce-i folosește? :)))

Cea mai simplă metodă de codificare mai avansată decât a cifrelor care folosește în mod natural felul cum e împărțită informația în sistemul binar înțeles de calculator e să atribui fiecărei cifre, fiecărei litere, fiecărui simbol și caracter special o valoare numerică. Un byte poate avea valori de la 00000000 în baza doi care e 0 în baza 10, până la 11111111 în baza doi care e 255 în baza 10. Deci are 256 valori posibile. Deci poți în fiecare byte să codezi 256 caractere – folosind vechiul (deja) standard ASCII. Vedeți acum pe ecran toate simbolurile din standardul ASCII care folosește un byte să stocheze toate caracterele de care aveau programatorii nevoie să nu scrie la tastatură 01100010 01110010 01100001 01110110 01101111 ci să echivaleze fiecare din combinațiile astea de 8 cifre binare cu câte o literă, cifră sau simbol. În cazul nostru, 01100010 = b, 01110010 = r, 01100001 = a, 01110110 = v, 01101111 = o. Adică „bravo”! Ai înțeles cum codează calculatorul lucruri mai complexe decât 0 și 1, folosind convenții și tabele de conversie care seamănă cu cele din criptografia simplă.

În loc de „bravo”, tu acum poți să scrii într-un fișier .html „salut, lume!” și browserul știe să decodeze simbolurile astea din „01110011 01100001 01101100 01110101 01110100 00101100 00100000 01101100 01110101 01101101 01100101 00100001” care e codul pe care-l înțelege calculatorul, și să afișeze lumii întregi care vede pagina ta HTML textul „salut, lume!”. Nu-i așa că e fain? 🙂 Inventivi domne inventatorii calculatoarelor astea… :)))

Cu mai mulți „bytes” poți reprezenta numere din ce în ce mai mari. Spre exemplu, cu 4 bytes, adică cu 4 x 8 biți = 32 biți, poți reprezenta numere de la 0 la 4.294.967.295. Ai flexibilitate maximă apropo de câți biți poți folosi să stochezi informația. De la text până la poze mai e doar un pas, pentru că orice poză e compusă din rânduri și coloane (care se numește „matrice” – care e ca un tabel) de pixeli care au o valoare cromatică (care poate fi reprezentată – ai ghicit! cu un număr!). Un video are, să zicem 30 de poze pe secundă, deci cantitatea de biți necesari stocării unui video e mult mai mare decât pentru o poză simplă. Sunetele sunt și ele ușor de reprezentat în format numeric, transformând vibrațiile într-o histogramă în care fiecare microsunet are o valoare numerică de la 0 la câți decibeli vrei tu. Deci tot numere. Deci tot sistem binar. Tot ce ai acum pe calculator e, în spate, stocat și manipulat folosind exclusiv sistemul binar de 0 și 1 care reprezintă curentul care trece sau nu trece printr-un cablu sau tranzistor.

Recapitulare și temă

Azi am învățat despre ce e un calculator, care sunt funcțiile de bază pe care le execută un calculator ca să fie calculator (input, stocare, procesare și output), cum stochează efectiv un calculator informația în sistem binar, folosind doar cifre de 0 și 1 și cum se face conversia dintr-o bază în alta și dintr-o serie de 8 biți, adică un byte, într-o literă sau orice altceva de pe calculator.

Ăsta e momentul perfect să îți dau o temă pentru acasă. N-o să te ajute să fii un web developer mai bun, dar e ceva fun care să te introducă mai adânc în universul ăsta simplu al bazelor numerice și al criptografiei. Vă las aici două mesaje criptate, și e job-ul vostru să înțelegeți ce-am vrut să zic prin asta și să scrieți în comentarii răspunsul final. Nu uitați că numerele aflate în paranteze sunt baze de numerație și e posibil ca seriile de numere să fie un mesaj – cu sau fără greșeli intenționate. 🙂

Începători:

Scrie-mi în comentariile acestui articol răspunsul la întrebarea de mai jos (în format binar):

01101000 01110100 01110100 01110000 01110011 00100000 00111010 00101111 00101111 01111001 01101111 01110101 01110100 01110101 00101110 01100010 01100101 00101111 01010101 01010100 00110111 01100011 01110001 00110010 01000110 01101101 01000001 01100111 00111000

Avansați:

Există cel puțin un mesaj criptografic ascuns printre elementele pe care le vedeți acum pe ecran.

232₍₅₎ 110011₍₂₎ 1D₍₁₉₎ 3I₍₂₈₎ 1201₍₄₎ 54₍₁₉₎ 253₍₆₎ 112₍₅₎ 28₍₂₈₎ 1203₍₄₎ 1110101₍₂₎ 3P₍₂₈₎ 52₍₆₎ 3Q₍₂₈₎ 1311₍₄₎ 35₍₉₎ 101₍₁₀₎ 100000₍₂₎ 58₍₁₉₎ 42₍₂₈₎ 303₍₄₎ 73₍₁₆₎ 69₍₁₆₎ 8D₍₁₃₎

Concluzii

Tocmai am terminat prima 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! Poate chiar fac un articol sau video dedicat răspunsului pe care-l cauți, fiindcă mi-am propus ca acest curs să fie interactiv în felul ăsta.

În cazul în care ți-a plăcut acest articol, dă un Share tuturor prietenilor tăi care ar putea învăța ceva nou din lecția asta. Dacă nu ești încă abonat la canalul de YouTube și vrei să primești video-urile mele viitoare, apasă acolo 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 pe care am reușit să le generez chiar aici! Hai, dă click, știu că vrei să-nveți mai mult!

Toate cursurile de Front End Development pentru începători pe care le-am scris până acum

1. Modulul 1: Noțiuni introductive
   • Introducere în Front End
   • Ce este și cum funcționează un calculator? (articolul curent)
   • Ce este Internetul?
   • Cum funcționează Internetul?
   • Introducere în tehnologiile Web: HTML, CSS și JavaScript
   • Arhitectura informațională, baza UX-ului și a HTML-ului
   • Pregătește-te să codezi: software pentru Front End
   • Bazele GIT și GitHub
2. Modulul 2: HTML pentru începători
   • Introducere și istoria HTML-ului
   • Block vs inline, link-uri și semantica textului
   • Mai multe în curând…
3. Modulul 3: CSS pentru începători
   • În curând…
4. Modulul 4: HTML pentru avansați
   • În curând…
5. Modulul 5: CSS pentru avansați
   • În curând…
6. Modulul 6: JavaScript pentru începători
   • În curând…
7. Modulul 7: Alte noțiuni utile
   • În curând…

Scrie-mi mai jos în comentarii cum ți se pare cursul până acum și ce alte module ai vrea să mai adaug pe viitor!