Fyrirlestur — Inngangur

Vefforritun 1 — TÖL107G

Ólafur Sverrir Kjartansson, osk@hi.is

---

Nokkur hugtök

Áður en við förum af stað er vert að nefna og skilgreina lauslega nokkur hugtök.

---

Talnakerfi & tölvur

• Tölvur nota í langflestum tilfellum talnakerfi sem eru veldi af tveim
• Tvíundar-, áttunda- eða sextándakerfi
• Við munum nota sextándakerfi (hexadecimal, hex) eitthvað
• Lærið meira í öðrum kúrsum

---

1011₂ = 2³ * 1 + 2² * 0 + 2¹ * 1 + 2⁰ * 1
      = 8 + 0 + 2 + 1
      = 11₁₀

bad₁₆ = 16² * 11 + 16¹ * 10 * 16⁰ * 13
      = 2816 + 160 + 13
      = 2989₁₀

---

Bitar & bæti

• Biti er annaðhvort 0 eða 1, af eða á, true eða false o.sfr.
  • Grunneining í tölvum
• Bæti (e. byte) er hópur af átta bitum

---

GUI

• Graphical user interface
• Forrit með grafísku notendaviðmóti
• T.d. vafrar, margir textaritlar

---

CLI

• Command-line interface
• Texta viðmót á forrit, ólíkt grafísku viðmóti
• Skrifum skipanir, keyrum forrit og fáum texta niðurstöðu
• cmd á Windows, Terminal á Mac/Linux
  • Förum nánar í seinna

---

Textaritlar

• Forrit sem leyfa okkur að vinna með texta
• Mjög einfaldir yfir í mjög flókna
  • Notepad yfir í Vim
• Getum sótt viðbætur og stillt flest allt í nýrri textaritlum
• Við munum nota Visual Studio Code

---

Stafasett

• Þegar við vinnum með texta þurfum við að skilgreina í hvaða stafasetti textinn er
• Skilgreinir hvernig hver stafur er kóðaður og hve mikið pláss hann tekur
  • ASCII gerir ráð fyrir 7 bitum fyrir hvern staf

---

• a
  • 110 0001 í binary
  • 97 í decimal

---

---

utf-8

• Við munum eingöngu nota utf-8 stafasettið
  • Notar allt að fjögur byte til að skilgreina staf eða tákn ✨
  • Hannað til að virka með ASCII
• Getur kóðað alla stafi í Unicode og því langflesta þá stafi sem við þurfum að nota

---

Brenglaðir stafir

• Ef við lendum í því að fá upp brenglaða stafi
• Ef við lendum í því að fá upp brenglaða stafi
• Þá er skjalið okkar vistað í öðru stafasetti en við birtum eða öfugt
• Textaritillinn okkar sýnir í hvaða stafsetti skjal er og leyfir okkur að breyta

---

Internetið

• Alþjóðlegt netkerfi hundruð milljóna tölva tengdra saman yfir tugþúsundir neta
• Notar TCP/IP samskiptareglur
• Margskonar kerfi nýta internetið, t.d. vefurinn og tölvupóstur

---

IP tölur

• Aðgreina og staðsetja tæki tengd internetinu
• IPv4 tölur eru 32 bita tölur, myndaðar úr fjórum tölum með . á milli
  • Aðeins 2³² = 4.294.967.296 tölur, búnar!
  • T.d. 130.208.165.186
• DNS túlkar host nafn (t.d. hi.is) yfir í IP-tölu

---

• IPv6 tölur eru myndaðar með átta hópum af fjórum hex tölum
  • Geta því myndað 2¹²⁸ = 3,4E38 tölur
  • T.d. 2001:0db8:85a3:0000:0000:8a2e:0370:7334
  • eða 2001:db8::8a2e:370:7334

---

• Nokkrar IP tölur og hópar af IP tölum eru fráteknar
• Geta ekki verið notaðar á internetinu
  • 127.0.0.1 til að túlka sjálft tækið sem unnið er á, einnig aðgengileg með localhost DNS nafninu
  • 192.168.0.0 – 192.168.0.255 fyrir einkanet, t.d. eru heimilisbeinar oftast með IP töluna 192.168.1.1

---

Vefurinn

• World Wide Web!
• Aðgengilegur yfir internetið
• Byggir á vefsíðum sem eiga sér URL
• Sóttar yfir HTTP

---

Vefþjónn

• Vefþjónn (e. web server) er tölva sem tengd er internetinu
• Svarar beiðnum fyrir URL yfir HTTP
• Hefur IP tölu (t.d. 130.208.165.194) og yfirleitt lénsheiti (e. domain name) nafn (t.d. hi.is)

---

Port

• Vefþjónn sem er tengdur internetinu hefur ákveðin „opin port“
• Tenging milli netkerfis og ferlis á tölvu, þ.e.a.s. hvað á að gera við þær beiðnir sem koma inn?
• Port 0–1023 eru frátekin, önnur geta hvaða forrit sem er tengst

---

• Port 80 er skilgreint fyrir HTTP
• Port 443 er skilgreint fyrir HTTP yfir TLS/SSL (HTTPS), dulkóðuð HTTP samskipti
• Þegar við vinnum á eigin tölvum með vefþjón nálgumst við hann því oft með t.d. http://localhost:3000/

---

HTTP

• HyperText Transfer Protocol
• Samskiptareglur sem skilgreina hvernig dreift kerfi tölva vinnur saman

---

URL

• Staðsetja og skilgreina hvernig við sækjum vefsíður yfir HTTP
• Samanstanda af nokkrum pörtum
• http://example.org/example.html?start=true#kafli2
• Stundum er talað um URI, en í nýjum staðli er URL og URI það sama

---

Vefsíða

• Framendi vefsíðu er settur saman með HTML, CSS og JavaScript
• Flóknari vefsíður hafa yfirleitt einhvern bakenda hluta

---

Vafri

• Forrit sem leyfir okkur að skoða og njóta vefsins
• Túlkar HTML, CSS og JavaScript og birtir notanda
• Flókin forrit sem geta birt allskonar efni
• Byggja á opnum stöðlum

---

Vefforrit

• Ekki vel skilgreint hugtak
• Yfirleitt notað um forrit:
  • með URL
  • aðgengilegt á vefnum
  • nýtir veftækni til að útbúa viðmót

---

• Samt mörg forrit sem ekki eru á vefnum sem nýta veftækni
  • öpp, textaritlar, leikir og fleira

---

Framendi

• Framendi (e. front-end eða client-side) er sá partur vefsins sem notendur sjá og eiga við
• Búinn til með HTML, CSS og JavaScript
• Viðfangsefni okkar í vefforritun 1 🎉

---

Framenda framework og libraries

• Hjálpa til við smíða stærri og flóknari vefi
• T.d. React, Angular eða Vue
• Lærum ekki á þau í þessu námskeiði en farið yfir í vefforritun 2

---

Bakendi

• Bakendi (e. back-end eða server-side) er sá partur vefsins sem er sendur yfir HTTP til framenda
• full stack er oft notað fyrir forritara sem eru færir bæði í fram- og bakenda
• Samanstendur yfirleitt af vefþjón, forriti og gagnageymslu (t.d. gagnagrunn)

---

• Vefþjónar geta stutt margskonar:
  • forritunarmál (t.d. C# eða Python)
  • forritunarumhverfi (t.d. .NET eða Django)
• Farið yfir í vefforritun 2

---

Framendi VS bakendi

---

Að leita sér hjálpar

• Ekkert að því að nýta vefinn þegar við erum föst
  • Eyðum smá tíma í að reyna sjálf (mælt í klukkutímum ekki dögum)
  • Leitum hjálpar á slack, í dæmatímum, eða með því að tala við kennara

---

• Við erum öll að læra, líka ég
  • Ef það er eitthvað sem mætti betur fara, látið mig vita
• Ef ég svara ekki strax er það því ég er að gleyma, minnið á ykkur
  • Ég er hérna til að hjálpa ykkur!

---

• Mæli með:
  • Mozilla Developer Network – MDN
  • Stack Overflow
• Mæli ekki með:
  • w3schools

---

Athugið að vísað er í heimasvæði hjá HÍ en sú þjónusta var lögð niður í júní 2022. Nemendur hafa því ekki lengur möguleika á að vista vefi hjá HÍ.

---

Að þróa vefi

• Komin með textaritil og farin að skrifa… hvað svo?
• Vistum skjal sem index.html og opnum í vafra (File > Open)
• Nýtum ekki HTTP, heldur file protocol
  • file://mappa/index.html

---

FTP

• Yfirleitt viljum við að vefirnir okkar séu aðgengilegir á vefnum
• FTP (File Transfer Protocol) eða SFTP ein leið til að færa efni yfir á vefþjón
• Opnum skrárkerfi vefþjóns og leyfir okkur að færa skrár á milli
• Heimasvæði hjá HÍ

---

• Frítt og nothæft FTP forrit er t.d. Cyberduck fyrir Mac og Windows
• Oft mælt með FileZilla, en frá og með 2018 hefur óæskilegum hugbúnaði verið dreift með forritinu svo ekki er mælt með að nota það