En time om det der internet
-
Upload
christian-dalager -
Category
Internet
-
view
17 -
download
0
Transcript of En time om det der internet
![Page 2: En time om det der internet](https://reader035.fdocuments.in/reader035/viewer/2022070520/58f0ad421a28aba8488b45c1/html5/thumbnails/2.jpg)
2
Dagens plan•Meget lidt om mig (@dalager)•Noget om hypertext•Noget om hvordan det hele startede•Noget teknisk om HTML, URL’er og sådan•Noget om browseren•Noget om kompleksitet i software
![Page 3: En time om det der internet](https://reader035.fdocuments.in/reader035/viewer/2022070520/58f0ad421a28aba8488b45c1/html5/thumbnails/3.jpg)
3
Hypertext
![Page 4: En time om det der internet](https://reader035.fdocuments.in/reader035/viewer/2022070520/58f0ad421a28aba8488b45c1/html5/thumbnails/4.jpg)
4
When data of any sort are placed in storage, they are filed alphabetically or numerically, and information is found (when it is) by tracing it down from subclass to subclass.
[...]
The human mind does not work that way. It operates by association. With one item in its grasp, it snaps instantly to the next that is suggested by the association of thoughts, in accordance with some intricate web of trails carried by the cells of the brain.
“As we may think”, Vannevar Bush, 1945
![Page 6: En time om det der internet](https://reader035.fdocuments.in/reader035/viewer/2022070520/58f0ad421a28aba8488b45c1/html5/thumbnails/6.jpg)
6
•CERN 1989•Værktøj til videndeling
•HTML•URI•HTTP•Web server•Web browser
- + Open Source- + Netneutralitet
Tim Berners Lee, Sir
![Page 7: En time om det der internet](https://reader035.fdocuments.in/reader035/viewer/2022070520/58f0ad421a28aba8488b45c1/html5/thumbnails/7.jpg)
7
“Realiserede intertekstuelle referencer”
http://webdoc.gwdg.de/edoc/ia/eese/schreiber/Chapter2.html
![Page 8: En time om det der internet](https://reader035.fdocuments.in/reader035/viewer/2022070520/58f0ad421a28aba8488b45c1/html5/thumbnails/8.jpg)
8
HTML, URI, HTTP, DNS, SERVER, CLIENTEller: nu kommer handskerne af
![Page 9: En time om det der internet](https://reader035.fdocuments.in/reader035/viewer/2022070520/58f0ad421a28aba8488b45c1/html5/thumbnails/9.jpg)
9
•Uniform Resource Locatorfx studier.ku.dk/kandidat/dansk/faglig-profil-og-job/fx www.minfedehjemmeside.dk/index.html
•MEGACENTRALT! → Adressérbarhed!
URL
![Page 10: En time om det der internet](https://reader035.fdocuments.in/reader035/viewer/2022070520/58f0ad421a28aba8488b45c1/html5/thumbnails/10.jpg)
10
DNS•Domain Name System•Et distribueret system, der laver koblinger mellem
Domæner (ku.dk) ogIP-Adresser (130.226.237.173)
•Mange domæner kan pege på den samme IP-adresse•Det gør at en server med 1 IP-adresse kan “hoste” mange websites.
![Page 11: En time om det der internet](https://reader035.fdocuments.in/reader035/viewer/2022070520/58f0ad421a28aba8488b45c1/html5/thumbnails/11.jpg)
11
HTML•Hyper Text Markup Language (SGML variant)•Sprog der instruerer browseren i, hvordan en side skal se ud•Består af tags der hver især kan betragtes som instruktioner
<br> = lav linjeskift<h1>overskrift 1</h1><p>paragraph</p><a href=”http://dr.dk”>link</a>
•CSS er siden kommet til for at separere design fra markup.• Facebook, Twitter og LinkedIn læser også din HTML
![Page 12: En time om det der internet](https://reader035.fdocuments.in/reader035/viewer/2022070520/58f0ad421a28aba8488b45c1/html5/thumbnails/12.jpg)
12
<!DOCTYPE html><html>
<head><title>Fantastisk hjemmeside</title></head>
<body><h1>Læs og lær!</h1>
<p>Dette er det klogeste du har læst i dag.</p><a href=”http://www.dinfedeside.dk”>Klik her for mere
klogskab</a><img src=”http://flickr.com/p/12314”/></body></html>
HTML•Gemmes i en fil, der f.eks. hedder index.html•Lægges på en server og gives en URL:•www.minfedehjemmeside.dk/index.html
![Page 13: En time om det der internet](https://reader035.fdocuments.in/reader035/viewer/2022070520/58f0ad421a28aba8488b45c1/html5/thumbnails/13.jpg)
13
p { color: #333;}
h1 { font-family:sans-serif; background-color: yellow; padding: 10px; width:200px; border-radius: 5px; }body {background-color: #ccc}
https://codepen.io/dalager/pen/BLLLYA
CSS● Cascading Style Sheets● Designinstruktioner● Giver designfrihed● Kan ligge i HTML eller i filer
ved siden af● Kan bruges til responsivt
design, der automatisk tilpasses skærmstørrelser
![Page 14: En time om det der internet](https://reader035.fdocuments.in/reader035/viewer/2022070520/58f0ad421a28aba8488b45c1/html5/thumbnails/14.jpg)
14
JavaScript•HTML og CSS sørger for indhold og præsentation•JavaScript er et decideret programmeringssprog, der lever med de to andre i browseren.
•Er som regel integreret tæt med HTML og CSS•Bliver brugt overalt og til alt i og udenfor browseren.
Lær: Start evt med You Don’t Know Javascript: Up and Going
![Page 15: En time om det der internet](https://reader035.fdocuments.in/reader035/viewer/2022070520/58f0ad421a28aba8488b45c1/html5/thumbnails/15.jpg)
15
Serveren
![Page 16: En time om det der internet](https://reader035.fdocuments.in/reader035/viewer/2022070520/58f0ad421a28aba8488b45c1/html5/thumbnails/16.jpg)
16
Client / browser
![Page 17: En time om det der internet](https://reader035.fdocuments.in/reader035/viewer/2022070520/58f0ad421a28aba8488b45c1/html5/thumbnails/17.jpg)
17
….Godt. Træk vejret dybt. Det værste er overstået nu. Vi er ok.
![Page 18: En time om det der internet](https://reader035.fdocuments.in/reader035/viewer/2022070520/58f0ad421a28aba8488b45c1/html5/thumbnails/18.jpg)
18
BrowserenDer hvor det hele sker
![Page 19: En time om det der internet](https://reader035.fdocuments.in/reader035/viewer/2022070520/58f0ad421a28aba8488b45c1/html5/thumbnails/19.jpg)
19Netscape Navigator 3, 1996
![Page 20: En time om det der internet](https://reader035.fdocuments.in/reader035/viewer/2022070520/58f0ad421a28aba8488b45c1/html5/thumbnails/20.jpg)
20
Browseren i dag• “Operating system for the web”• Voldsom teknisk udvikling• Overvejende mobil (56% mobile brugere på top sites → )• Har features der matcher mobile “native apps”
GPSP2P kommunikation med webRTCWebSocketsIoT-support3D / VR in the browser / OpenGL
• JavaScript• CSS Animationer
![Page 21: En time om det der internet](https://reader035.fdocuments.in/reader035/viewer/2022070520/58f0ad421a28aba8488b45c1/html5/thumbnails/21.jpg)
21
Det åbne internetDet anarkistiske og demokratiske og ustrukturerede og rodede og svært
navigerbare
![Page 22: En time om det der internet](https://reader035.fdocuments.in/reader035/viewer/2022070520/58f0ad421a28aba8488b45c1/html5/thumbnails/22.jpg)
22
Decentraliseret og demokratisk● Intet centrum● Alle, der er online, har samme rettigheder (Net neutrality)● Fælles standarder (W3C.org)● Open Source● I realiteten er der kræfter på spil, der modarbejder dette:
○ Geo-fenced content (f.eks. netflix)○ Totalitære regimers net-censur○ Overvågning○ Ikke-totalitære regimers net-censur
● Og dette modarbejdes igen○ TOR○ Kryptering
![Page 23: En time om det der internet](https://reader035.fdocuments.in/reader035/viewer/2022070520/58f0ad421a28aba8488b45c1/html5/thumbnails/23.jpg)
23
Intet centrum. Ren entropi. Kan vi leve sådan?
● Aner det ikke. Næppe.● (Sociale) medier fungerer som online samlingssteder.● SoMe du jour er bare sidste skud (fb,tw,ig, etc etc)● Men. Facebook er blevet så stort at det skubber til dynamikken
fordi det bliver et defacto centrum○ Mange kan ikke kende forskel på internettet og facebook (link)○ Facebook optimerer deres platform efter to centrale principper
■ a) reklameindtægter■ b) keep people around
○ Algoritmer, der ■ prioriterer indhold, der gør folk glade. Katte.■ på sigt vil minimere links ud af facebook
![Page 24: En time om det der internet](https://reader035.fdocuments.in/reader035/viewer/2022070520/58f0ad421a28aba8488b45c1/html5/thumbnails/24.jpg)
24
Om at bygge tingFordi det forekommer at være så simpelt, men sjældent er det. Like everything
else.
![Page 25: En time om det der internet](https://reader035.fdocuments.in/reader035/viewer/2022070520/58f0ad421a28aba8488b45c1/html5/thumbnails/25.jpg)
25https://en.wikipedia.org/wiki/Waterfall_model
Hvordan bygger man ting?•Man får en idé.•Man lægger en plan.•Man udfører planen•Profit!
AKA Vandfaldsmodellen. No way back.
![Page 26: En time om det der internet](https://reader035.fdocuments.in/reader035/viewer/2022070520/58f0ad421a28aba8488b45c1/html5/thumbnails/26.jpg)
26https://en.wikipedia.org/wiki/Waterfall_model
Hvordan bygger man IKKE ting•Man får en idé. Men det er den forkerte.•Man lægger en plan. Men overser detaljer.•Man udfører planen. Og det tager 4 x så lang tid. •Profit! Men der er ingen brugere.
![Page 27: En time om det der internet](https://reader035.fdocuments.in/reader035/viewer/2022070520/58f0ad421a28aba8488b45c1/html5/thumbnails/27.jpg)
27
Andre tilgange• Små iterationer der hurtigt tester antagelser• Agile (http://agilemanifesto.org/) • Lean Startup (http://theleanstartup.com/)
MVP (Minimum Viable Product)• Fail fast
http://www.extremeuncertainty.com/why-agile-projects-need-to-fund-bml-properly/
![Page 28: En time om det der internet](https://reader035.fdocuments.in/reader035/viewer/2022070520/58f0ad421a28aba8488b45c1/html5/thumbnails/28.jpg)
28
Spørgsmål