En time om det der internet

1
En time om det der internet
Christian Dalager, Eksponent

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

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

5
The Memex, Vannevar Bush, 1945

6
• CERN 1989
• Værktøj til videndeling
• HTML
• URI
• HTTP
• Web server
• Web browser
- + Open Source
- + Netneutralitet
Tim Berners Lee, Sir

7
“Realiserede intertekstuelle referencer”
http://webdoc.gwdg.de/edoc/ia/eese/schreiber/Chapter2.html

8
HTML, URI, HTTP, DNS, SERVER, CLIENT
Eller: nu kommer handskerne af

9
• Uniform Resource Locator
fx studier.ku.dk/kandidat/dansk/faglig-profil-og-job/
fx www.minfedehjemmeside.dk/index.html
• MEGACENTRALT! → Adressérbarhed!
URL

10
DNS
• Domain Name System
• Et distribueret system, der laver koblinger mellem
Domæner (ku.dk) og
IP-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.

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

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

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

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

17
….
Godt. Træk vejret dybt. Det værste er overstået
nu. Vi er ok.

18
Browseren
Der hvor det hele sker

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”
GPS
P2P kommunikation med webRTC
WebSockets
IoT-support
3D / VR in the browser / OpenGL
• JavaScript
• CSS Animationer

21
Det åbne internet
Det anarkistiske og demokratiske og ustrukturerede og rodede og svært navigerbare

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

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

24
Om at bygge ting
Fordi det forekommer at være så simpelt, men sjældent er det. Like everything else.

25
https://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.

26
https://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.

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/

En time om det der internet

Recommended

Recommended

More Related Content

Similar to En time om det der internet

Similar to En time om det der internet (20)

More from Christian Dalager

More from Christian Dalager (6)

En time om det der internet