Cum funcționează internetul

Internetul este peste tot!

Îl folosim mai mult decât am făcut-o vreodată – și în multe locuri în care s-ar putea să nu-l vedeți. Pentru că „web-ul” este mai mult decât site-urile pe care le vizitați introducând un URL în browser.

Nu contează dacă vă verificați e-mailurile de pe telefonul mobil sau dacă trimiteți un tweet – folosiți internetul (adică „web-ul”).

Cum funcționează toate acestea? Ce tehnologii sunt implicate și ce trebuie să înveți (și în ce măsură) dacă vrei să devii un dezvoltator web?

CSS – Ghidul complet

Alăturați-vă acestui curs cuprinzător de peste 20 de ore pentru a stăpâni CSS și pentru a învăța cum să creați site-uri web frumoase.



JavaScript – Ghidul complet

Învățați JavaScript de la zero pentru a construi site-uri web extrem de interactive și dinamice în acest curs practic!

# Cum funcționează site-urile web

Să începem cu cel mai evident mod de a folosi internetul: Vizitați un site web precum academind.com.

În momentul în care introduceți această adresă în browserul dvs. și apăsați ENTER, se întâmplă o mulțime de lucruri diferite:

1. Se rezolvă URL-ul
2. Se trimite o cerere către serverul site-ului web
3. Se analizează răspunsul serverului
4. Pagina este redată și afișată

În realitate, fiecare etapă ar putea fi împărțită în mai multe alte etape, dar pentru o bună prezentare generală a modului în care funcționează totul, este un aspect pe care îl putem ignora aici. Să aruncăm o privire la toți cei patru pași.

Pasul 1 – URL-ul se rezolvă

Evident, codul site-ului web nu este stocat pe calculatorul dumneavoastră și, prin urmare, trebuie să fie preluat de pe un alt calculator unde este stocat. Acest „alt calculator” se numește „server”. Pentru că servește unui anumit scop, în cazul nostru, servește site-ul web.

Introduceți „academind.com” (care se numește „un domeniu”), dar, de fapt, serverul care găzduiește codul sursă al unui site web, este identificat prin intermediul adreselor IP (= Internet Protocol). Browserul trimite o „cerere” (vezi pasul 2) către serverul cu adresa IP pe care ați introdus-o (indirect – desigur, ați introdus „academind.com”).

De obicei, o adresă IP arată în felul următor: 172.56.180.5 (deși există și o formă mai „modernă” numită IPv6 – dar să o ignorăm deocamdată). Puteți afla mai multe despre adresele IP pe Wikipedia.

Cum este tradus domeniul „academind.com” în adresa sa IP?

Există un tip special de server pe internet – nu doar unul, ci mai multe servere de acest tip. Un așa-numit „server de nume” sau „server DNS” (unde DNS = „Domain Name System”).

Lovitura acestor servere DNS este de a traduce domeniile în adrese IP. Vă puteți imagina aceste servere ca pe niște dicționare uriașe care stochează tabele de traducere: Domeniu => Adresă IP.

Când introduceți „academind.com”, browserul, prin urmare, preia mai întâi adresa IP de la un astfel de server DNS.

În cazul în care vă întrebați: Browserul știe pe de rost adresele acestor servere de domenii, ele sunt programate în browser, ca să spunem așa.

După ce adresa IP este cunoscută, am avansat la pasul 2.

Pasul 2 – Se trimite cererea

Cu adresa IP rezolvată, browserul merge mai departe și face o cerere către serverul cu acea adresă IP.

„O cerere” nu este doar un termen. Este într-adevăr un lucru tehnic care se întâmplă în spatele scenei.

Navigatorul împachetează o grămadă de informații (Care este URL-ul exact? Ce fel de cerere trebuie făcută? Ar trebui atașate metadate) și trimite acel pachet de date la adresa IP.

Datele sunt trimise prin intermediul „HyperText Transfer Protocol” (cunoscut sub numele de „HTTP”) – un protocol standardizat care definește cum trebuie să arate o cerere (și un răspuns), ce date pot fi incluse (și în ce formă) și cum va fi transmisă cererea. Puteți afla mai multe despre HTTP aici.

Din moment ce întregul proces și format este standardizat, nu mai există nici o presupunere cu privire la modul în care acea cerere trebuie să fie citită de server.

Serverul tratează apoi cererea în mod corespunzător și returnează un așa-numit „răspuns”. Din nou, un „răspuns” este un lucru tehnic și este oarecum similar cu o „cerere”. S-ar putea spune că este practic o „cerere” în direcția opusă.

Ca și o cerere, un răspuns poate conține date, metadate etc. Atunci când se solicită o pagină precum academind.com, răspunsul va conține codul necesar pentru a reda pagina pe ecran.

Ce se întâmplă pe server?

Acesta este definit de dezvoltatorii web. În cele din urmă, trebuie să fie trimis un răspuns. Acel răspuns nu trebuie să conțină neapărat „un site web”. El poate conține orice date – inclusiv fișiere sau imagini.

Câteva servere sunt programate să genereze site-uri web în mod dinamic, în funcție de cerere (de exemplu, o pagină de profil care conține datele dumneavoastră personale), alte servere returnează pagini HTML pre-generate (de exemplu, o pagină de știri). Sau se fac ambele – pentru diferite părți ale unei pagini web. Există, de asemenea, o a treia alternativă: Paginile web care sunt pre-generate, dar care își schimbă aspectul și datele în browser.

Pentru cazul nostru simplu avem un server care returnează codul pentru a afișa un site web. Așa că să continuăm cu pasul 3.

Pasul 3 – Răspunsul este analizat

Navigatorul primește răspunsul trimis de server. Numai acest lucru, nu afișează totuși nimic pe ecran.

În schimb, următorul pas este că browserul analizează răspunsul. La fel cum a făcut-o și serverul cu cererea. Din nou, standardizarea impusă de HTTP ajută, desigur.

Navigatorul verifică datele și metadatele care sunt incluse în răspuns. Și pe baza acestora, decide ce să facă.

S-ar putea să fi avut cazuri în care un PDF s-a deschis în browser. Acest lucru s-a întâmplat deoarece răspunsul a informat browserul că datele nu sunt un site web, ci un document PDF. Iar browserul încearcă să aleagă cel mai bun mecanism de manipulare pentru orice tip de date pe care îl detectează.

Înapoi la scenariul nostru cu site-ul web.

În acest caz, răspunsul ar conține o bucată specifică de metadate, care îi spune browserului că datele de răspuns sunt de tip text/html.

Aceasta permite browserului să analizeze apoi datele reale care sunt atașate la răspuns sub formă de cod HTML.

HTML este „limbajul de programare” de bază (din punct de vedere tehnic, nu este un limbaj de programare – nu se poate scrie nicio logică cu el) al web-ului. HTML este acronimul de la „Hyper Text Markup Language” și descrie structura unei pagini web.

Codul arată astfel:

<h1>Breaking News!</h1><p>Websites work because browser understand HTML!</p>

<h1> și <p> sunt așa-numitele „tag-uri HTML” și dacă vreți să învățați mai multe despre HTML, această serie este un loc excelent pentru a merge.

Care tag HTML are o anumită semnificație semantică pe care browserul o înțelege, deoarece HTML este, de asemenea, standardizat. Prin urmare, nu mai este nevoie să ghiciți ce înseamnă o etichetă <h1>.

Navigatorul știe cum să analizeze HTML și acum pur și simplu trece prin toate datele de răspuns (numit și „corpul răspunsului”) pentru a reda site-ul web.

Etapa 4 – Pagina este afișată

După cum am menționat, browserul parcurge datele HTML returnate de server și construiește un site web pe baza acestora.

Deși este important de știut, că HTML nu include instrucțiuni cu privire la modul în care ar trebui să arate site-ul (adică cum ar trebui să fie stilizat). În realitate, definește doar structura și îi spune browserului ce conținut este un titlu, ce conținut este o imagine, ce conținut este un paragraf etc. Acest lucru este deosebit de important pentru accesibilitate – cititoarele de ecran scot toate informațiile utile din structura HTML.

O pagină care include doar HTML ar arăta totuși așa:

Nu atât de frumos, nu-i așa?

De aceea există o altă tehnologie importantă (un alt „limbaj de programare”, care nu este de fapt un limbaj de programare): CSS („Cascading Style Sheets”).

CSS se referă la adăugarea de stil la site-ul web. Acest lucru se face prin intermediul „regulilor CSS”:

h1 { color: blue;}

Această regulă ar colora toate tag-urile <h1> în albastru.

Reguli de acest gen pot fi adăugate în interiorul codului HTML, dar, de obicei, ele fac parte din fișiere .css separate, care sunt solicitate separat.

Fără a intra în prea multe detalii aici, acest lucru are o implicație importantă: Un site web poate fi alcătuit din mai mult decât datele din primul răspuns pe care îl primim.

În practică, site-urile web preiau o mulțime de date suplimentare (prin cereri și răspunsuri suplimentare) care sunt lansate odată ce a sosit primul răspuns.

Cum funcționează asta?

Bine, codul HTML al primului răspuns conține pur și simplu instrucțiuni pentru a prelua mai multe date prin intermediul unor noi cereri – iar browserul înțelege aceste instrucțiuni:

<link rel="stylesheet" href="/page-styles.css" />

Împreună cu CSS, browserul este capabil să afișeze paginile web astfel:

De fapt, mai este implicat un alt limbaj de programare (de data aceasta, chiar este un limbaj de programare!): JavaScript.

Nu este întotdeauna vizibil, dar tot conținutul dinamic pe care îl găsiți pe un site web (de exemplu, filele, suprapunerile etc.) este de fapt posibil doar datorită JavaScript. Acesta permite dezvoltatorilor web să definească un cod care rulează în browser (nu pe server), prin urmare, JavaScript poate fi folosit pentru a modifica site-ul web în timp ce utilizatorul îl vizualizează.

Ca și până acum, dacă doriți să aflați mai multe, consultați resursele noastre JavaScript, de exemplu cursul nostru complet.

Aceștia sunt cei patru pași care sunt întotdeauna implicați atunci când introduceți o adresă de pagină precum academind.com și, ulterior, vedeți conținutul site-ului web în browser.

# Server-side vs Browser-side

Din cei patru pași de mai sus, ați învățat că putem diferenția două „părți” de bază atunci când vorbim despre web: Server-side și Browser-side (sau: Client-side, deoarece putem accesa internetul și fără un browser – vezi mai jos!).

Dacă sunteți interesat să deveniți dezvoltator web, este important să știți că pentru aceste laturi se folosesc tehnologii și limbaje de programare diferite.

Server-side

Ai nevoie de limbaje de programare server-side – adică limbaje care nu funcționează în browser, dar care pot rula pe un calculator normal (un server este, în cele din urmă, doar un calculator normal).

Exemple ar fi:

• Node.js
• PHP
• Python

Important: Cu excepția lui PHP, puteți folosi aceste limbaje de programare și în alte scopuri decât dezvoltarea web.

În timp ce Node.js este într-adevăr utilizat în principal pentru programarea pe server (deși, din punct de vedere tehnic, nu se limitează la acest lucru), Python este, de asemenea, foarte popular pentru știința datelor și învățarea automată.

Browser-side

În browser, există exact trei limbaje/tehnologii pe care trebuie să le învățați. Dar, în timp ce limbajele din partea serverului erau alternative, aceste trei limbaje din partea browserului sunt toate obligatorii de știut și de înțeles:

• HTML (pentru structură)
• CSS (pentru stilizare)
• JavaScript (pentru conținut dinamic)

# „Behind the Scenes” Internet

Până acum, am discutat despre site-uri web. Adică, cazul în care introduceți un URL (de exemplu, „academind.com/învățați”) în browser și primiți în schimb un site web.

Dar internetul este mai mult decât atât. Într-adevăr, îl folosiți în fiecare zi pentru mai mult decât atât!

Ideea de bază a cererilor și răspunsurilor este întotdeauna aceeași. Dar nu orice răspuns este neapărat un site web. Și nu orice cerere dorește un site web.

Metadatele care sunt atașate cererilor și răspunsurilor controlează ce date sunt dorite și returnate. Desigur, ambele părți care sunt implicate (adică clientul și serverul) trebuie să susțină solicitanții și datele trimise.

Nu puteți solicita un PDF de la "academind.com", de exemplu. Ați putea trimite o astfel de cerere, dar nu veți primi înapoi un PDF – pur și simplu pentru că nu suportăm acest tip de date solicitate pentru acest URL specific.

Dar există multe servere care sunt specializate în furnizarea de URL-uri care returnează anumite date. Astfel de servicii sunt denumite și „API-uri” („Application Programming Interface”).

De exemplu, aplicațiile mobile trimit cereri HTTP „invizibile” către astfel de API-uri (către URL-uri specifice care le sunt cunoscute) pentru a obține sau stoca date. De exemplu, Twitter preia feed-ul de tweet.

Și chiar și pe paginile web se trimit astfel de cereri „invizibile”. Dacă vă înscrieți la buletinul nostru informativ (ceea ce, desigur, ar trebui să faceți!), nu se va încărca nicio pagină nouă. Pentru că datele sunt schimbate în spatele scenei. Chiar dacă clientul este în acest caz browserul, cererea care este trimisă nu dorește niciun site web în schimb. Iar URL-ul serverului care o primește nu oferă niciun site web – în schimb, serverul știe cum să se ocupe de adresa dvs. de e-mail.

Am putea intra în mult mai multe detalii aici, dar acesta este deja un articol lung. Acum ar trebui să aveți o bună înțelegere a modului în care funcționează web-ul și ce tehnologii de bază sunt implicate.

.