Miten verkko toimii

Verkko on kaikkialla!

Käytämme sitä enemmän kuin koskaan ennen – myös monissa sellaisissa paikoissa, joissa sitä ei ehkä näe. Koska ”verkko” on muutakin kuin vain verkkosivustoja, joilla vierailet syöttämällä URL-osoitteen selaimeesi.

Käypä tarkistamassa sähköpostisi matkapuhelimella tai lähettämässä twiittiä – käytät internetiä (eli ”verkkoa”).

Miten tämä kaikki toimii? Mitä tekniikoita siihen liittyy ja mitä sinun on opittava (ja missä määrin), jos haluat ryhtyä web-kehittäjäksi?

CSS – Täydellinen opas

Tule mukaan tälle kattavalle yli 20h kurssille, jolla hallitset CSS:n ja opit luomaan kauniita verkkosivustoja.



JavaScript – Täydellinen opas

Opi JavaScript tyhjästä rakentaaksesi erittäin vuorovaikutteisia ja dynaamisia verkkosivuja tällä käytännönläheisellä kurssilla!

# Miten verkkosivut toimivat

Aloitetaan ilmeisimmästä tavasta, jolla internetiä käytetään: Vierailet verkkosivustolla, kuten academind.com.

Hetkellä, kun kirjoitat tämän osoitteen selaimeesi ja painat ENTER-näppäintä, tapahtuu paljon erilaisia asioita:

1. URL-osoite ratkaistaan
2. Pyyntö lähetetään verkkosivuston palvelimelle
3. Palvelimen vastaus analysoidaan
4. Sivu renderöidään ja näytetään

Tosiasiassa, jokainen yksittäinen vaihe voitaisiin jakaa useisiin muihin vaiheisiin, mutta jotta saisimme hyvän yleiskuvan siitä, miten kaikki toimii, voimme jättää sen tässä yhteydessä huomiotta. Katsotaanpa kaikkia neljää vaihetta.

Vaihe 1 – URL-osoite ratkaistaan

Sivuston koodia ei tietenkään ole tallennettu koneellesi, joten se on haettava toisesta tietokoneesta, jossa se on tallennettu. Tätä ”toista tietokonetta” kutsutaan ”palvelimeksi”. Koska se palvelee jotakin tarkoitusta, meidän tapauksessamme se palvelee verkkosivustoa.

Syötät ”academind.com”. (sitä kutsutaan ”verkkotunnukseksi”), mutta itse asiassa palvelin, joka isännöi verkkosivuston lähdekoodia, tunnistetaan IP (= Internet Protocol) -osoitteiden avulla. Selain lähettää ”pyynnön” (ks. vaihe 2) palvelimelle, jonka IP-osoitteen annoit (epäsuorasti – kirjoitit tietenkin ”academind.com”).

IP-osoite näyttää tyypillisesti tältä: 172.56.180.5 (tosin on olemassa myös ”nykyaikaisempi” muoto nimeltä IPv6 – mutta jätetään se toistaiseksi huomiotta). Voit lukea lisää IP-osoitteista Wikipediasta.

Miten verkkotunnus ”academind.com” käännetään IP-osoitteeksi?

Internetissä on erityyppinen palvelin – ei vain yksi, vaan monta tällaista palvelinta. Niin sanottu ”nimipalvelin” tai ”DNS-palvelin” (jossa DNS = ”Domain Name System”).

Näiden DNS-palvelimien tehtävänä on kääntää verkkotunnukset IP-osoitteiksi. Voit kuvitella nämä palvelimet valtaviksi sanakirjoiksi, joihin tallennetaan käännöstaulukoita: Verkkotunnus => IP-osoite.

Kun kirjoitat ”academind.com”, selain hakee siis ensin IP-osoitteen tällaiselta DNS-palvelimelta.

Siltä varalta, että ihmettelet: Selain tietää näiden verkkotunnuspalvelimien osoitteet ulkoa, ne on niin sanotusti ohjelmoitu selaimeen.

Kun IP-osoite on tiedossa, siirrymme vaiheeseen 2.

Vaihe 2 – Pyyntö lähetetään

Kun IP-osoite on selvitetty, selain siirtyy eteenpäin ja tekee pyynnön palvelimelle, jolla on kyseinen IP-osoite.

”Pyyntö” ei ole pelkkä termi. Se on todella tekninen asia, joka tapahtuu kulissien takana.

Selain niputtaa yhteen joukon tietoja (Mikä on tarkka URL-osoite? Minkälainen pyyntö pitäisi tehdä? Pitäisikö siihen liittää metatietoja) ja lähettää tämän tietopaketin IP-osoitteeseen.

Tiedot lähetetään ”HyperText Transfer Protocol” -protokollan (tunnetaan nimellä ”HTTP”) välityksellä – standardoitu protokolla, joka määrittelee, miltä pyynnön (ja vastauksen) on näytettävä, mitä tietoja siihen saa sisällyttää (ja missä muodossa) ja miten pyyntö lähetetään. Lisätietoja HTTP:stä saat täältä.

Koska koko prosessi ja muoto on standardoitu, ei tarvitse arvailla, miten palvelimen on luettava tuo pyyntö.

Palvelin käsittelee sitten pyynnön asianmukaisesti ja palauttaa niin sanotun ”vastauksen”. Jälleen kerran ”vastaus” on tekninen asia ja tavallaan samanlainen kuin ”pyyntö”. Voisi sanoa, että se on periaatteessa ”pyyntö” päinvastaiseen suuntaan.

Kuten pyyntö, myös vastaus voi sisältää dataa, metatietoja jne. Kun pyydetään sivua, kuten academind.com, vastaus sisältää koodin, jota tarvitaan sivun renderöimiseksi näytölle.

Mitä tapahtuu palvelimella?

Sen määrittelevät web-kehittäjät. Lopulta on lähetettävä vastaus. Tuon vastauksen ei tarvitse sisältää ”verkkosivustoa”. Se voi sisältää mitä tahansa dataa – myös tiedostoja tai kuvia.

Jotkut palvelimet on ohjelmoitu tuottamaan verkkosivuja dynaamisesti pyynnön perusteella (esim. profiilisivu, joka sisältää henkilökohtaisia tietojasi), toiset palvelimet palauttavat valmiita HTML-sivuja (esim. uutissivu). Tai tehdään molempia – verkkosivun eri osille. On myös kolmas vaihtoehto: Verkkosivut, jotka ovat valmiiksi luotuja, mutta jotka muuttavat ulkoasua ja tietojaan selaimessa.

Yksinkertaisessa tapauksessamme meillä on palvelin, joka palauttaa koodin verkkosivuston näyttämiseen. Jatketaan siis vaiheeseen 3.

Vaihe 3 – Vastaus jäsennetään

Selain vastaanottaa palvelimen lähettämän vastauksen. Tämä yksinään ei kuitenkaan näytä mitään ruudulla.

Sen sijaan seuraava vaihe on, että selain jäsentää vastauksen. Aivan kuten palvelin teki sen pyynnön kanssa. Jälleen kerran HTTP:n pakottama standardointi auttaa tietenkin.

Selain tarkistaa vastauksen sisältämät tiedot ja metatiedot. Ja niiden perusteella se päättää, mitä tehdä.

Sinulla on ehkä ollut tapauksia, joissa PDF-tiedosto on avautunut selaimessasi. Näin tapahtui, koska vastaus ilmoitti selaimelle, että data ei ole verkkosivusto vaan sen sijaan PDF-dokumentti. Ja selain yrittää valita parhaan käsittelymekanismin mille tahansa havaitsemalleen tietotyypille.

Takaisin verkkosivuskenaariöömme.

Tällöin vastaus sisältäisi tietyn metatiedon, joka kertoisi selaimelle, että vastausdata on tyyppiä text/html.

Tällöin selain voi jäsentää vastaukseen liitetyn varsinaisen datan HTML-koodina.

HTML on webin keskeinen ”ohjelmointikieli” (teknisesti se ei ole ohjelmointikieli – sillä ei voi kirjoittaa mitään logiikkaa). HTML on lyhenne sanoista ”Hyper Text Markup Language”, ja se kuvaa verkkosivun rakennetta.

Koodi näyttää tältä:

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

<h1> ja <p> ovat niin sanottuja ”HTML-tageja”, ja jos haluat oppia lisää HTML:stä, tämä sarja on oiva paikka.

Jokaiseen HTML-tagiin liittyy jonkinlainen semanttinen merkitys, jonka selain ymmärtää, koska HTML:n lisäksi se on myöskin standardoitu. Näin ollen ei tarvitse arvailla, mitä <h1>-tagi tarkoittaa.

Selain osaa jäsentää HTML:ää, ja nyt se yksinkertaisesti käy läpi koko vastausdatan (jota kutsutaan myös ”vastausrungoksi”) ja renderöi verkkosivuston.

Vaihe 4 – Sivu näytetään

Kuten mainittiin, selain käy läpi palvelimen palauttamat HTML-tiedot ja rakentaa verkkosivuston niiden perusteella.

On kuitenkin tärkeää tietää, että HTML ei sisällä mitään ohjeita siitä, miltä sivuston pitäisi näyttää (eli miten se pitäisi tyylitellä). Se oikeastaan vain määrittelee rakenteen ja kertoo selaimelle, mikä sisältö on otsikko, mikä sisältö on kuva, mikä sisältö on kappale jne. Tämä on erityisen tärkeää saavutettavuuden kannalta – ruudunlukijat saavat kaiken hyödyllisen tiedon HTML-rakenteesta.

Sivu, joka sisältää vain HTML:n, näyttäisi kuitenkin tältä:

Ei kovin kauniilta, eikö niin?

Sentähän varten on olemassa toinenkin tärkeä tekniikka (toinen ”ohjelmointikieli”, joka ei oikeastaan ole ohjelmointikieli): CSS (”Cascading Style Sheets”).

CSS:ssä on kyse sivuston muotoilun lisäämisestä. Se tehdään ”CSS-sääntöjen” avulla:

h1 { color: blue;}

Tämä sääntö värjäisi kaikki <h1>-tagit sinisiksi.

Tämmöiset säännöt voidaan lisätä HTML-koodin sisälle, mutta tyypillisesti ne ovat osa erillisiä .css-tiedostoja, jotka pyydetään erikseen.

Sukeltumatta liikaa yksityiskohtiin tässä yhteydessä, tämä pitää sisällään yhden tärkeän seurauksen: Verkkosivusto voi koostua muustakin kuin ensimmäisen saamamme vastauksen tiedoista.

Käytännössä verkkosivut hakevat paljon lisätietoa (lisäpyyntöjen ja -vastausten kautta), jotka käynnistetään ensimmäisen vastauksen saapumisen jälkeen.

Miten se toimii?

Noh, ensimmäisen vastauksen HTML-koodi sisältää yksinkertaisesti ohjeet noutaa lisää dataa uusien pyyntöjen kautta – ja selain ymmärtää nämä ohjeet:

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

Yhteistyössä CSS:n kanssa selain pystyy näyttämään verkkosivut näin:

Tässä on itse asiassa mukana toinenkin ohjelmointikieli (tällä kertaa se on todella ohjelmointikieli!): JavaScript.

Se ei aina näy, mutta kaikki dynaaminen sisältö, jota löydät verkkosivuilta (esim. välilehdet, päällekkäisyydet jne.), on itse asiassa mahdollista vain JavaScriptin ansiosta. Sen avulla web-kehittäjät voivat määritellä koodia, joka suoritetaan selaimessa (ei palvelimella), joten JavaScriptin avulla voidaan muuttaa verkkosivustoa käyttäjän katsellessa sitä.

Kuten ennenkin, jos haluat oppia lisää, tutustu JavaScript-resursseihimme, esimerkiksi täydelliseen kurssiimme.

Nämä ovat ne neljä vaihetta, jotka ovat aina mukana, kun syötät sivun osoitteen, kuten academind.com, ja näet sen jälkeen verkkosivun sisällön selaimessasi.

# Palvelinpuoli vs. selainpuoli

Ylläolevista neljästä vaiheesta opit, että voimme erottaa kaksi keskeistä ”puolta” puhuessamme verkosta: Palvelin-puoli ja selain-puoli (tai: asiakas-puoli, koska voimme käyttää internetiä myös ilman selainta – katso alla!).

Jos olet kiinnostunut ryhtymään web-kehittäjäksi, on tärkeää tietää, että näillä puolilla käytetään eri teknologioita ja ohjelmointikieliä.

Palvelinpuoli

Tarvitset palvelinpuolen ohjelmointikieliä – eli kieliä, jotka eivät toimi selaimessa, mutta joita voi käyttää tavallisella tietokoneella (palvelin on loppujen lopuksi vain tavallinen tietokone).

Esimerkkejä olisivat:

• Node.js
• PHP
• Python

Tärkeää: PHP:tä lukuun ottamatta näitä ohjelmointikieliä voi käyttää myös muihin tarkoituksiin kuin web-kehitykseen.

Vaikka Node.js:ää käytetään tosiaan ensisijaisesti palvelinpuolen ohjelmointiin (vaikkei se teknisesti olekaan rajoitettu siihen), Python on erittäin suosittu myös datatieteessä ja koneoppimisessa.

selainpuoli

Selaimessa on tasan kolme kieltä/teknologiaa, jotka sinun täytyy oppia. Mutta vaikka palvelinpuolen kielet olivat vaihtoehtoja, nämä kolme selainpuolen kieltä ovat kaikki pakollisia osata ja ymmärtää:

• HTML (rakennetta varten)
• CSS (muotoilua varten)
• JavaScript (dynaamista sisältöä varten)

# ”Kulissien takana” Internet

Tähän asti keskustelimme verkkosivustoista. Siis tapauksesta, jossa syötät selaimeen URL-osoitteen (esim. ”academind.com/learn”) ja saat vastineeksi verkkosivuston.

Mutta internet on muutakin. Käytät sitä itse asiassa muuhunkin joka päivä!

Pyyntöjen ja vastausten ydinajatus on aina sama. Mutta jokainen vastaus ei välttämättä ole verkkosivusto. Eikä jokainen pyyntö halua verkkosivustoa.

Pyyntöihin ja vastauksiin liitetyt metatiedot ohjaavat, mitä tietoja halutaan ja palautetaan. Tietenkin molempien osapuolten, jotka ovat mukana (eli asiakkaan ja palvelimen) on tuettava pyyntöjä ja lähetettyjä tietoja.

Et voi pyytää PDF-tiedostoa esimerkiksi osoitteesta "academind.com". Voisit lähettää tällaisen pyynnön, mutta et saisi takaisin PDF-tiedostoa – yksinkertaisesti siksi, että emme tue tällaista pyydettyä dataa tässä nimenomaisessa URL-osoitteessa.

Mutta on olemassa monia palvelimia, jotka ovat erikoistuneet tarjoamaan URL-osoitteita, jotka palauttavat tiettyjä tietoja. Tällaisiin palveluihin viitataan myös nimellä ”API” (”Application Programming Interface”, sovellusohjelmointirajapinta).

Esimerkiksi mobiilisovellukset lähettävät ”näkymättömiä” HTTP-pyyntöjä tällaisille API:ille (tietyille URL-osoitteille, jotka ne tuntevat) saadakseen tai tallentaakseen tietoja. Twitter hakee esimerkiksi twiitti-syötteen.

Ja myös verkkosivuille lähetetään tällaisia ”näkymättömiä” pyyntöjä. Jos kirjaudut uutiskirjeeseemme (minkä tietysti kannattaa!), uutta sivua ei ladata. Koska tietoja vaihdetaan kulissien takana. Vaikka asiakas on tässä tapauksessa selain, lähetettävä pyyntö ei halua vastineeksi mitään verkkosivua. Ja palvelimen URL-osoite, joka sen vastaanottaa, ei tarjoa mitään verkkosivustoa – sen sijaan palvelin tietää, miten sähköpostiosoitettasi käsitellään.

Voisimme mennä tässä paljon yksityiskohtaisemmin, mutta tämä on jo pitkä artikkeli. Sinulla pitäisi nyt olla hyvä käsitys siitä, miten verkko toimii ja mitkä keskeiset teknologiat siihen liittyvät.