<div class="u-m-t-0">
<div class="glider-hero-contain u-p-x-0">
<button type="button" class="a-paging glider-nav glider-nav--hero glider-prev js-glider-prev">
<span class="u-visuallyhidden">Bakåt</span>
<svg class="icon a-paging__icon">
<use xlink:href="#icon-arrow-backwards"></use>
</svg>
</button>
<div class="glider js-glider-hero" data-timeout="5000">
<div class="glider-slide glider-slide--hero">
<div class="glider-slide__text">
<span><a href="#" class="color-jade">Datadamer</a> – Kvinnorna som digitaliserade världen</span>
</div>
<img src="/assets/images/Reprogramming_ENIAC2.png" class="glider-slide__image" alt="Datadamer">
</div>
<div class="glider-slide glider-slide--hero">
<div class="glider-slide__text">
<span><a href="#" class="color-lemon">Onlinespel</a> – Från moralpanik till e-sport</span>
</div>
<img src="/assets/images/Screen-Shot-2016-06-07-at-11.30.29.png" class="glider-slide__image" alt="Onlinespel">
</div>
<div class="glider-slide glider-slide--hero">
<div class="glider-slide__text">
<span><a href="#" class="color-jade">Datadamer</a> – Kvinnorna som digitaliserade världen</span>
</div>
<img src="/assets/images/Reprogramming_ENIAC2.png" class="glider-slide__image" alt="Datadamer">
</div>
<div class="glider-slide glider-slide--hero">
<div class="glider-slide__text">
<span><a href="#" class="color-lemon">Onlinespel</a> – Från moralpanik till e-sport</span>
</div>
<img src="/assets/images/Screen-Shot-2016-06-07-at-11.30.29.png" class="glider-slide__image" alt="Onlinespel">
</div>
</div>
<button type="button" class="a-paging glider-nav glider-nav--hero glider-next js-glider-next">
<span class="u-visuallyhidden">Framåt</span>
<svg class="icon a-paging__icon">
<use xlink:href="#icon-arrow-forwards"></use>
</svg>
</button>
</div>
</div>
<div class="o-timeline">
<div class="o-timeline__progress-bar js-progress-bar"></div>
<div class="o-timeline__decades-container js-decade-container"></div>
</div>
<div class="js-timeline">
<div class="o-section o-timeline__decade js-timeline-decade" id="1960">
<div class="wrapper">
<h2 class="godzilla godzilla--19 color-jade">1960</h2>
</div>
<figure class="o-hero o-hero--video-wide u-position-static">
<video src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" autoplay="false" muted class="o-hero__video"></video>
</figure>
<div class="wrapper">
<div class="grid-18 grid-md-12 grid-lg-9 o-timeline__decade__intro">
<p class="preamble"><strong>Långt innan internet</strong> läggs de första grunderna för framtidens IT-utveckling. Redan nu börjar Sverige bli bra på datorteknik – bland annat skapar vi en hålremsstans som blir en exportsuccé.</p>
</div>
<div class="wp-block-iis-grid">
<div class="row justify-content-around justify-content-md-between asymmetric-sm asymmetric-reversed u-m-t-4">
<div class="grid-18 grid-sm-8 grid-md-5 o-timeline__item js-timeline-item" id="1">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img class="m-card__image m-card__media" src="/assets/images/timeline-item01.png">
<div class="m-card__content">
<div class="a-meta">
<div class="has-jade-color">1960</div>
</div>
<a href="#1" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Domännamnssystemet DNS skapas – nu blir det enkelt att hitta rätt på nätet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Föreställ dig att du varje gång du ska besöka en webbsida eller skicka ett mejl hade behövt leta reda på rätt nummer i ett register och sedan skriva in en lång sifferkombination i stället för ett domännamn.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="grid-18 grid-sm-8 grid-md-5 o-timeline__item js-timeline-item" id="2">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img class="m-card__image m-card__media" src="/assets/images/timeline-item02.png">
<div class="m-card__content">
<div class="a-meta">
<div class="has-jade-color">1964</div>
</div>
<a href="#2" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Det här är TCP/IP – nu uppfinns tekniken bakom internet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Så hur fungerar internet? Svaret är med protokollen TCP/IP. En teknik som kunde börja användas redan 1974. Men det har inte varit givet att just TCP/IP skulle bygga internet. </p>
<div class="o-timeline__item__content">
<p><a href="#">Arpanet</a> är ett nätverk som är föregångare till dagens internet. Arpanets historia startar på den amerikanska försvarsmyndigheten ARPA där idén till internet först formuleras 1963. Utvecklingen av nätverket pågår sedan under större delen av 1960-talet.</p>
<p>I september 1969 länkas Arpanets första dator med en sprillans ny, specialbyggd maskin, en IMP – Interface Message Processor (som ni ser på bilden här ovanför). Och några veckor senare, 29 oktober klockan halv elva på kvällen skickar forskargruppen på UCLA, ledd av professor Leonard Kleinrock, iväg ett meddelande till en dator på Stanford drygt 50 mil därifrån. Det innehåller endast bokstäverna L och O (forskarna hade tänkt skriva LOGIN men servern kraschade). </p>
<p>Arpanet är ett av många nätverk som utvecklas under 60-talet i både USA, England och Frankrike.</p>
<h2>Vem uppfann internet? Flera personer gjorde betydande insatser</h2>
<p>På den amerikanska forskningsmyndigheten ARPA (Advanced Research Projects Agency) jobbar datorforskaren Joseph Licklider. Han är den som kläcker idén till det som blir internet, men det finns många andra på myndigheten som gör betydande insatser för att förverkliga planerna.</p>
<p>Leonard Kleinrock uppfinner kommunikationstekniken ”paketutbyte” (packet switching), Vinton Cerf och Robert Kahn kommer på TCP/IP-protokollet (som fortfarande utgör grunden för det internet vi har i dag).</p>
<p>En annan viktig upptäckt är tidsdelningssystemen (time-sharing), som innebär att flera personer kan använda samma dator. Det är ju egentligen det man gör på internet, delar datorer med varandra.</p>
<h2>Första mejlet skickas på Arpanet</h2>
<p>1971 skickas det första e-postmeddelandet på Arpanet – från en dator till en annan som står precis bredvid. Fler och fler datorer på amerikanska forskningsanstalter och laboratorium kopplas sedan upp, nätet växer och 1973 är det hela fyrtio datorer uppkopplade.</p>
<h2>Arpanet blir internationellt</h2>
<p>Samma år kopplas den första utländska datorn upp mot Arpanet utanför USA. Den är norsk och kopplas upp via satellit. Men om vi ska vara lite petiga går faktiskt den första internetkontakten via markstationen i Tanum i Bohuslän, som tar emot signalerna och skickar dem vidare till Norge. Först då blir internet internationellt.</p>
<div class="o-timeline__item__content__meta">
<a href="#" class="a-tag">
<span class="a-tag__text">Arpanet</span>
</a>
<a href="#" class="a-tag">
<span class="a-tag__text">Internet</span>
</a>
<a href="#" class="a-tag">
<span class="a-tag__text">Outernet</span>
</a>
<div class="o-timeline__item__content__meta__related">
<h4 class="gamma">Relaterade artiklar</h4>
<ul class="u-list-clean">
<li>
<div class="row">
<div class="grid-4">
<img src="/assets/images/timeline-item01.png">
</div>
<div class="grid-14">
<div class="a-meta">
<div class="has-jade-color">1964</div>
</div>
<h2 class="delta">Filmklipp: en framtidsvision för internet och digitalisering från 60-talet</h2>
</div>
</div>
</li>
<li>
<div class="row">
<div class="grid-4">
<img src="/assets/images/timeline-item02.png">
</div>
<div class="grid-14">
<div class="a-meta">
<div class="has-jade-color">1968</div>
</div>
<h2 class="delta">Domännamnssystemet DNS skapas – nu blir det enkelt att hitta rätt på nätet</h2>
</div>
</div>
</li>
<li>
<div class="row">
<div class="grid-4">
<img src="/assets/images/nyancat.gif">
</div>
<div class="grid-14">
<div class="a-meta">
<div class="has-jade-color">1969</div>
</div>
<h2 class="delta">Det här är TCP/IP – nu uppfinns tekniken bakom internet</h2>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="grid-18 grid-sm-12 grid-md-5 o-timeline__item js-timeline-item" id="3">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img class="m-card__image m-card__media" src="/assets/images/nyancat.gif">
<div class="m-card__content">
<div class="a-meta">
<div class="has-jade-color">1968</div>
</div>
<a href="#3" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Filmklipp: en framtidsvision för internet och digitalisering från 60-talet</h1>
</a>
<p class="m-card__text o-timeline__card-text">I ett filmklipp från slutet av sextiotalet spekuleras det om framtidens hus. I en sekvens får man se många olika terminaler där mor och far beställer kläder, tittar över bankärenden, och korresponderar med andra.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="wp-block-iis-grid">
<div class="row justify-content-center asymmetric-sm asymmetric-reversed u-m-b-0 u-m-t-0">
<div class="grid-18 grid-sm-14 grid-md-12 grid-lg-10 o-timeline__item js-timeline-item" id="20">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img width="700" height="406" src="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg" data-src="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg" class="m-card__image m-card__media lazyloaded" alt="En äldre man med jeansjacka sitter vid sin dator och pratar i telefon." loading="lazy" data-srcset="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg 700w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-726x420.jpg 726w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-500x290.jpg 500w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-8x5.jpg 8w" sizes="(max-width: 700px) 100vw, 700px" srcset="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg 700w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-726x420.jpg 726w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-500x290.jpg 500w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-8x5.jpg 8w"><noscript><img width="700" height="406" src="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg" class="m-card__image m-card__media" alt="En äldre man med jeansjacka sitter vid sin dator och pratar i telefon." loading="lazy" srcset="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg 700w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-726x420.jpg 726w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-500x290.jpg 500w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-8x5.jpg 8w" sizes="(max-width: 700px) 100vw, 700px" /></noscript>
<div class="m-card__content">
<div class="a-meta">
<div class="has-jade-color">1969</div>
</div>
<a href="#20" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Filmklipp: en framtidsvision för internet och digitalisering från 60-talet</h1>
</a>
<p class="m-card__text o-timeline__card-text">I ett filmklipp från slutet av sextiotalet spekuleras det om framtidens hus. I en sekvens får man se många olika terminaler där mor och far beställer kläder, tittar över bankärenden, och korresponderar med andra.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="o-section o-timeline__decade js-timeline-decade" id="1970">
<div class="wrapper">
<h2 class="godzilla godzilla--19 color-peacock u-align-right">1970</h2>
</div>
<figure class="o-hero u-position-static">
<img src="/assets/images/hero.jpg" alt="hero" class="o-hero__image">
</figure>
<div class="wrapper">
<div class="grid-18 grid-md-12 grid-lg-9 o-timeline__decade__intro">
<p class="preamble"><strong>På sjuttiotalet</strong> fortsätter utvecklandet av föregångare till dagens internet, både i Sverige och i USA. I slutet av årtiondet skapar Jacob Palme KOM-systemet, ett slags tidigt chattrum.</p>
</div>
<div class="wp-block-iis-grid">
<div class="row justify-content-around justify-content-md-between asymmetric-sm asymmetric-reversed u-m-t-4">
<div class="grid-18 grid-sm-8 grid-md-5 o-timeline__item js-timeline-item" id="21">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img class="m-card__image m-card__media" src="/assets/images/nyancat.gif">
<div class="m-card__content">
<div class="a-meta">
<div class="has-peacock-color">1970</div>
</div>
<a href="#21" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Domännamnssystemet DNS skapas – nu blir det enkelt att hitta rätt på nätet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Föreställ dig att du varje gång du ska besöka en webbsida eller skicka ett mejl hade behövt leta reda på rätt nummer i ett register och sedan skriva in en lång sifferkombination i stället för ett domännamn.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="grid-18 grid-sm-8 grid-md-5 o-timeline__item js-timeline-item" id="22">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img class="m-card__image m-card__media" src="/assets/images/timeline-item02.png">
<div class="m-card__content">
<div class="a-meta">
<div class="has-peacock-color">1974</div>
</div>
<a href="#22" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Det här är TCP/IP – nu uppfinns tekniken bakom internet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Så hur fungerar internet? Svaret är med protokollen TCP/IP. En teknik som kunde börja användas redan 1974. Men det har inte varit givet att just TCP/IP skulle bygga internet. </p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="grid-18 grid-sm-12 grid-md-5 o-timeline__item js-timeline-item" id="23">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/timeline-item01.png">
<div class="m-card__content">
<div class="a-meta">
<div class="has-peacock-color">1978</div>
</div>
<a href="#23" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Filmklipp: en framtidsvision för internet och digitalisering från 60-talet</h1>
</a>
<p class="m-card__text o-timeline__card-text">I ett filmklipp från slutet av sextiotalet spekuleras det om framtidens hus. I en sekvens får man se många olika terminaler där mor och far beställer kläder, tittar över bankärenden, och korresponderar med andra.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="wp-block-iis-grid">
<div class="row justify-content-center asymmetric-sm asymmetric-reversed u-m-b-0 u-m-t-0">
<div class="grid-18 grid-sm-14 grid-md-12 grid-lg-10 o-timeline__item js-timeline-item" id="20">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img width="700" height="406" src="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg" data-src="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg" class="m-card__image m-card__media lazyloaded" alt="En äldre man med jeansjacka sitter vid sin dator och pratar i telefon." loading="lazy" data-srcset="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg 700w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-726x420.jpg 726w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-500x290.jpg 500w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-8x5.jpg 8w" sizes="(max-width: 700px) 100vw, 700px" srcset="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg 700w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-726x420.jpg 726w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-500x290.jpg 500w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-8x5.jpg 8w"><noscript><img width="700" height="406" src="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg" class="m-card__image m-card__media" alt="En äldre man med jeansjacka sitter vid sin dator och pratar i telefon." loading="lazy" srcset="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg 700w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-726x420.jpg 726w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-500x290.jpg 500w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-8x5.jpg 8w" sizes="(max-width: 700px) 100vw, 700px" /></noscript>
<div class="m-card__content">
<div class="a-meta">
<div class="has-jade-color">1969</div>
</div>
<a href="#20" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Filmklipp: en framtidsvision för internet och digitalisering från 60-talet</h1>
</a>
<p class="m-card__text o-timeline__card-text">I ett filmklipp från slutet av sextiotalet spekuleras det om framtidens hus. I en sekvens får man se många olika terminaler där mor och far beställer kläder, tittar över bankärenden, och korresponderar med andra.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="o-section o-timeline__decade js-timeline-decade" id="1980">
<div class="wrapper">
<h2 class="godzilla godzilla--19 color-sandstone">1980</h2>
</div>
<figure class="o-hero u-position-static">
<img src="/assets/images/hero.jpg" alt="hero" class="o-hero__image">
</figure>
<div class="wrapper">
<div class="grid-18 grid-md-12 grid-lg-9 o-timeline__decade__intro">
<p class="preamble"><strong>Utvecklingen rusar framåt,</strong> inte minst tack vare en rad hårt arbetande eldsjälar. Björn Eriksen registrerar .se-domänen och tar emot det allra första mejlet till Sverige, SVT:s Lars Orup försöker sig på dataintrång och TCP-IP – protokollet som ligger till grund för internets infrastruktur – blir standard.</p>
</div>
<div class="wp-block-iis-grid">
<div class="row justify-content-around justify-content-md-between asymmetric-sm asymmetric-reversed u-m-t-4">
<div class="grid-18 grid-sm-8 grid-md-5 o-timeline__item js-timeline-item" id="24">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/timeline-item01.png">
<div class="m-card__content">
<div class="a-meta">
<div class="has-sandstone-color">1980</div>
</div>
<a href="#24" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Domännamnssystemet DNS skapas – nu blir det enkelt att hitta rätt på nätet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Föreställ dig att du varje gång du ska besöka en webbsida eller skicka ett mejl hade behövt leta reda på rätt nummer i ett register och sedan skriva in en lång sifferkombination i stället för ett domännamn.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="grid-18 grid-sm-8 grid-md-5 o-timeline__item js-timeline-item" id="25">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/timeline-item02.png">
<div class="m-card__content">
<div class="a-meta">
<div class="has-sandstone-color">1981</div>
</div>
<a href="#25" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Det här är TCP/IP – nu uppfinns tekniken bakom internet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Så hur fungerar internet? Svaret är med protokollen TCP/IP. En teknik som kunde börja användas redan 1974. Men det har inte varit givet att just TCP/IP skulle bygga internet. </p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="grid-18 grid-sm-12 grid-md-5 o-timeline__item js-timeline-item" id="26">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/nyancat.gif">
<div class="m-card__content">
<div class="a-meta">
<div class="has-sandstone-color">1983</div>
</div>
<a href="#26" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Filmklipp: en framtidsvision för internet och digitalisering från 60-talet</h1>
</a>
<p class="m-card__text o-timeline__card-text">I ett filmklipp från slutet av sextiotalet spekuleras det om framtidens hus. I en sekvens får man se många olika terminaler där mor och far beställer kläder, tittar över bankärenden, och korresponderar med andra.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="wp-block-iis-grid">
<div class="row justify-content-center asymmetric-sm asymmetric-reversed u-m-b-0 u-m-t-0">
<div class="grid-18 grid-sm-14 grid-md-12 grid-lg-10 o-timeline__item js-timeline-item" id="4">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img width="700" height="406" src="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg" data-src="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg" class="m-card__image m-card__media lazyloaded" alt="En äldre man med jeansjacka sitter vid sin dator och pratar i telefon." loading="lazy" data-srcset="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg 700w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-726x420.jpg 726w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-500x290.jpg 500w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-8x5.jpg 8w" sizes="(max-width: 700px) 100vw, 700px" srcset="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg 700w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-726x420.jpg 726w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-500x290.jpg 500w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-8x5.jpg 8w"><noscript><img width="700" height="406" src="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg" class="m-card__image m-card__media" alt="En äldre man med jeansjacka sitter vid sin dator och pratar i telefon." loading="lazy" srcset="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg 700w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-726x420.jpg 726w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-500x290.jpg 500w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-8x5.jpg 8w" sizes="(max-width: 700px) 100vw, 700px" /></noscript>
<div class="m-card__content">
<div class="a-meta">
<div class="has-sandstone-color">1984</div>
</div>
<a href="#4" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Filmklipp: en framtidsvision för internet och digitalisering från 60-talet</h1>
</a>
<p class="m-card__text o-timeline__card-text">I ett filmklipp från slutet av sextiotalet spekuleras det om framtidens hus. I en sekvens får man se många olika terminaler där mor och far beställer kläder, tittar över bankärenden, och korresponderar med andra.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="wp-block-iis-grid">
<div class="row justify-content-around asymmetric-sm asymmetric-reversed u-m-t-4">
<div class="grid-18 grid-sm-8 grid-md-7 o-timeline__item js-timeline-item" id="5">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/nyancat.gif">
<div class="m-card__content">
<div class="a-meta">
<div class="has-sandstone-color">1985</div>
</div>
<a href="#5" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Domännamnssystemet DNS skapas – nu blir det enkelt att hitta rätt på nätet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Föreställ dig att du varje gång du ska besöka en webbsida eller skicka ett mejl hade behövt leta reda på rätt nummer i ett register och sedan skriva in en lång sifferkombination i stället för ett domännamn.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="grid-18 grid-sm-8 grid-md-7 o-timeline__item js-timeline-item" id="6">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/timeline-item01.png">
<div class="m-card__content">
<div class="a-meta">
<div class="has-sandstone-color">1986</div>
</div>
<a href="#6" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Det här är TCP/IP – nu uppfinns tekniken bakom internet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Så hur fungerar internet? Svaret är med protokollen TCP/IP. En teknik som kunde börja användas redan 1974. Men det har inte varit givet att just TCP/IP skulle bygga internet. </p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="wp-block-iis-grid">
<div class="row justify-content-center asymmetric-sm asymmetric-reversed u-m-b-0 u-m-t-0">
<div class="grid-18 grid-sm-14 grid-md-12 grid-lg-10 o-timeline__item js-timeline-item" id="7">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img width="700" height="406" src="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg" data-src="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg" class="m-card__image m-card__media lazyloaded" alt="En äldre man med jeansjacka sitter vid sin dator och pratar i telefon." loading="lazy" data-srcset="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg 700w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-726x420.jpg 726w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-500x290.jpg 500w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-8x5.jpg 8w" sizes="(max-width: 700px) 100vw, 700px" srcset="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg 700w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-726x420.jpg 726w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-500x290.jpg 500w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-8x5.jpg 8w"><noscript><img width="700" height="406" src="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg" class="m-card__image m-card__media" alt="En äldre man med jeansjacka sitter vid sin dator och pratar i telefon." loading="lazy" srcset="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg 700w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-726x420.jpg 726w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-500x290.jpg 500w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-8x5.jpg 8w" sizes="(max-width: 700px) 100vw, 700px" /></noscript>
<div class="m-card__content">
<div class="a-meta">
<div class="has-sandstone-color">1989</div>
</div>
<a href="#7" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Filmklipp: en framtidsvision för internet och digitalisering från 60-talet</h1>
</a>
<p class="m-card__text o-timeline__card-text">I ett filmklipp från slutet av sextiotalet spekuleras det om framtidens hus. I en sekvens får man se många olika terminaler där mor och far beställer kläder, tittar över bankärenden, och korresponderar med andra.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="o-section o-timeline__decade js-timeline-decade" id="1990">
<div class="wrapper">
<h2 class="godzilla godzilla--19 color-lemon u-align-right">1990</h2>
</div>
<figure class="o-hero u-position-static">
<img src="/assets/images/hero.jpg" alt="hero" class="o-hero__image">
</figure>
<div class="wrapper">
<div class="grid-18 grid-md-12 grid-lg-9 o-timeline__decade__intro">
<p class="preamble"><strong>Nu börjar det hända grejer!</strong> Under 90-talet blir internet något som fler och fler både känner till och faktiskt använder. WWW släpps löst på internet, Carl Bildt mejlar med Bill Clinton och 1996 utses internet till årets julklapp.</p>
</div>
<div class="wp-block-iis-grid">
<div class="row justify-content-around justify-content-md-between asymmetric-sm asymmetric-reversed u-m-t-4">
<div class="grid-18 grid-sm-8 grid-md-5 o-timeline__item js-timeline-item" id="8">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/timeline-item01.png">
<div class="m-card__content">
<div class="a-meta">
<div class="has-lemon-color">1991</div>
</div>
<a href="#8" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Domännamnssystemet DNS skapas – nu blir det enkelt att hitta rätt på nätet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Föreställ dig att du varje gång du ska besöka en webbsida eller skicka ett mejl hade behövt leta reda på rätt nummer i ett register och sedan skriva in en lång sifferkombination i stället för ett domännamn.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="grid-18 grid-sm-8 grid-md-5 o-timeline__item js-timeline-item" id="9">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/timeline-item02.png">
<div class="m-card__content">
<div class="a-meta">
<div class="has-lemon-color">1993</div>
</div>
<a href="#9" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Det här är TCP/IP – nu uppfinns tekniken bakom internet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Så hur fungerar internet? Svaret är med protokollen TCP/IP. En teknik som kunde börja användas redan 1974. Men det har inte varit givet att just TCP/IP skulle bygga internet. </p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="grid-18 grid-sm-12 grid-md-5 o-timeline__item js-timeline-item" id="10">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/nyancat.gif">
<div class="m-card__content">
<div class="a-meta">
<div class="has-lemon-color">1995</div>
</div>
<a href="#10" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Filmklipp: en framtidsvision för internet och digitalisering från 60-talet</h1>
</a>
<p class="m-card__text o-timeline__card-text">I ett filmklipp från slutet av sextiotalet spekuleras det om framtidens hus. I en sekvens får man se många olika terminaler där mor och far beställer kläder, tittar över bankärenden, och korresponderar med andra.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="o-section o-timeline__decade js-timeline-decade" id="2000">
<div class="wrapper">
<h2 class="godzilla color-ocean">2000</h2>
</div>
<figure class="o-hero u-position-static">
<img src="/assets/images/hero.jpg" alt="hero" class="o-hero__image">
</figure>
<div class="wrapper">
<div class="grid-18 grid-md-12 grid-lg-9 o-timeline__decade__intro">
<p class="preamble"><strong>Nu börjar vi hänga på communities</strong> och konsumera och dela stora mängder innehåll – roliga bilder, bloggar, nyheter, men också filmer och musik som vi kanske inte alltid fått tag i på lagligt sätt.</p>
</div>
<div class="wp-block-iis-grid">
<div class="row justify-content-around justify-content-md-between asymmetric-sm asymmetric-reversed u-m-t-4">
<div class="grid-18 grid-sm-8 grid-md-5 o-timeline__item js-timeline-item" id="11">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/timeline-item02.png">
<div class="m-card__content">
<div class="a-meta">
<div class="has-ocean-color">2000</div>
</div>
<a href="#11" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Domännamnssystemet DNS skapas – nu blir det enkelt att hitta rätt på nätet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Föreställ dig att du varje gång du ska besöka en webbsida eller skicka ett mejl hade behövt leta reda på rätt nummer i ett register och sedan skriva in en lång sifferkombination i stället för ett domännamn.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="grid-18 grid-sm-8 grid-md-5 o-timeline__item js-timeline-item" id="12">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/nyancat.gif">
<div class="m-card__content">
<div class="a-meta">
<div class="has-ocean-color">2002</div>
</div>
<a href="#12" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Det här är TCP/IP – nu uppfinns tekniken bakom internet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Så hur fungerar internet? Svaret är med protokollen TCP/IP. En teknik som kunde börja användas redan 1974. Men det har inte varit givet att just TCP/IP skulle bygga internet. </p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="grid-18 grid-sm-12 grid-md-5 o-timeline__item js-timeline-item" id="13">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/timeline-item01.png">
<div class="m-card__content">
<div class="a-meta">
<div class="has-ocean-color">2005</div>
</div>
<a href="#13" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Filmklipp: en framtidsvision för internet och digitalisering från 60-talet</h1>
</a>
<p class="m-card__text o-timeline__card-text">I ett filmklipp från slutet av sextiotalet spekuleras det om framtidens hus. I en sekvens får man se många olika terminaler där mor och far beställer kläder, tittar över bankärenden, och korresponderar med andra.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="o-section o-timeline__decade js-timeline-decade" id="2010">
<div class="wrapper">
<h2 class="godzilla color-ruby u-align-right">2010</h2>
</div>
<figure class="o-hero u-position-static">
<img src="/assets/images/hero.jpg" alt="hero" class="o-hero__image">
</figure>
<div class="wrapper">
<div class="grid-18 grid-md-12 grid-lg-9 o-timeline__decade__intro">
<p class="preamble"><strong>Smarta telefoner och plattor</strong> innebär att internet är med oss hela tiden. 2010 använder 92 procent av den svenska befolkningen internet och det finns nu över 1 miljon .se-domäner registrerade.</p>
</div>
<div class="wp-block-iis-grid">
<div class="row justify-content-around justify-content-md-between asymmetric-sm asymmetric-reversed u-m-t-4">
<div class="grid-18 grid-sm-8 grid-md-5 o-timeline__item js-timeline-item" id="14">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/nyancat.gif">
<div class="m-card__content">
<div class="a-meta">
<div class="has-ruby-color">2011</div>
</div>
<a href="#14" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Domännamnssystemet DNS skapas – nu blir det enkelt att hitta rätt på nätet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Föreställ dig att du varje gång du ska besöka en webbsida eller skicka ett mejl hade behövt leta reda på rätt nummer i ett register och sedan skriva in en lång sifferkombination i stället för ett domännamn.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="grid-18 grid-sm-8 grid-md-5 o-timeline__item js-timeline-item" id="15">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/timeline-item01.png">
<div class="m-card__content">
<div class="a-meta">
<div class="has-ruby-color">2014</div>
</div>
<a href="#15" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Det här är TCP/IP – nu uppfinns tekniken bakom internet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Så hur fungerar internet? Svaret är med protokollen TCP/IP. En teknik som kunde börja användas redan 1974. Men det har inte varit givet att just TCP/IP skulle bygga internet. </p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="grid-18 grid-sm-12 grid-md-5 o-timeline__item js-timeline-item" id="16">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/timeline-item02.png">
<div class="m-card__content">
<div class="a-meta">
<div class="has-ruby-color">2019</div>
</div>
<a href="#16" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Filmklipp: en framtidsvision för internet och digitalisering från 60-talet</h1>
</a>
<p class="m-card__text o-timeline__card-text">I ett filmklipp från slutet av sextiotalet spekuleras det om framtidens hus. I en sekvens får man se många olika terminaler där mor och far beställer kläder, tittar över bankärenden, och korresponderar med andra.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="o-section o-timeline__decade js-timeline-decade" id="2020">
<div class="wrapper">
<h2 class="godzilla color-granit">2020</h2>
</div>
<figure class="o-hero u-position-static">
<img src="/assets/images/hero.jpg" alt="hero" class="o-hero__image">
</figure>
<div class="wrapper">
<div class="grid-18 grid-md-12 grid-lg-9 o-timeline__decade__intro">
<p class="preamble"><strong>Den en gång så positiva synen på internet</strong> har bytts mot en ökad skepsis för digitaliseringens negativa konsekvenser. Coronapandemin gör att allt fler både studerar och jobbar hemifrån vilket driver på digitaliseringen av arbetslivet.</p>
</div>
<div class="wp-block-iis-grid">
<div class="row justify-content-around justify-content-md-between asymmetric-sm asymmetric-reversed u-m-t-4">
<div class="grid-18 grid-sm-8 grid-md-5 o-timeline__item js-timeline-item" id="17">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/timeline-item02.png">
<div class="m-card__content">
<div class="a-meta">
<div class="has-granit-color">2020</div>
</div>
<a href="#17" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Domännamnssystemet DNS skapas – nu blir det enkelt att hitta rätt på nätet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Föreställ dig att du varje gång du ska besöka en webbsida eller skicka ett mejl hade behövt leta reda på rätt nummer i ett register och sedan skriva in en lång sifferkombination i stället för ett domännamn.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="grid-18 grid-sm-8 grid-md-5 o-timeline__item js-timeline-item" id="18">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/nyancat.gif">
<div class="m-card__content">
<div class="a-meta">
<div class="has-granit-color">2021</div>
</div>
<a href="#18" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Det här är TCP/IP – nu uppfinns tekniken bakom internet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Så hur fungerar internet? Svaret är med protokollen TCP/IP. En teknik som kunde börja användas redan 1974. Men det har inte varit givet att just TCP/IP skulle bygga internet. </p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="grid-18 grid-sm-12 grid-md-5 o-timeline__item js-timeline-item" id="19">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/timeline-item01.png">
<div class="m-card__content">
<div class="a-meta">
<div class="has-granit-color">2022</div>
</div>
<a href="#19" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Filmklipp: en framtidsvision för internet och digitalisering från 60-talet</h1>
</a>
<p class="m-card__text o-timeline__card-text">I ett filmklipp från slutet av sextiotalet spekuleras det om framtidens hus. I en sekvens får man se många olika terminaler där mor och far beställer kläder, tittar över bankärenden, och korresponderar med andra.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="m-continue-video-guide js-guide-continue ">
<button type="button" class="a-button a-button--peacock-light background-peacock-light a-button--icon a-button--standalone-icon m-continue-video-guide__close js-guide-close">
<span class="a-button__text u-visuallyhidden">Stäng</span>
<svg class="icon a-button__icon u-icon--smallest">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<div class="m-continue-video-guide__inner">
<a href="/components/detail/video-guide.html" class="m-continue-video-guide__continue js-guide-continue-link" data-alt-text="Fortsätt den guidade turen">
<span class="u-visuallyhidden">Guidad tur</span>
<div class="m-continue-video-guide__arrow"></div>
</a>
<progress-ring class="m-continue-video-guide__progressbar" stroke="4" radius="50" progress="70"></progress-ring>
<img class="m-continue-video-guide__image js-guide-continue-image" src="/assets/images/sticky-guide.png" alt="Fortsätt den guidade turen">
</div>
</div>
<section class="o-mailchimp o-mailchimp--static" data-mailchimp="iis-mailchimp-static-form" id="iis-mailchimp-static-form">
<div class="wrapper">
<div class="o-mailchimp__wrapper">
<div class="row flex-row-reverse o-mailchimp__close">
<button type="button" class="a-button a-button--transparent a-button--icon js-close-mailchimp-popup">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="row flex-row-reverse o-mailchimp__row-bottom">
<div class="o-mailchimp__image-container grid-18 grid-lg-10">
<img src="/assets/images/hero.jpg" alt="hero" class="o-mailchimp__image">
</div>
<div class="o-mailchimp__content grid-18 grid-lg-8">
<h1 class="o-mailchimp__headline">Nyhetsbrev från Internetstiftelsen</h1>
<p class="o-mailchimp__preamble">Cirka en gång i månaden tipsar vi om intressanta evenemang och roliga projekt som vi driver. Se till att du håller dig uppdaterad genom att prenumerera på nyhetsbrevet!</p>
<form action="./" method="post">
<div class="m-form-control row">
<div class="m-form__row grid-18 grid-lg-14 grid-md-10 u-m-b-2">
<div class="field-group">
<label for="email" class="a-label u-visuallyhidden">Din e-postadress</label>
<input type="email" class="a-input js-mailchimp-email" name="email" placeholder="Din e-postadress" required />
</div>
</div>
<div class="m-form__row grid-18 grid-lg-14 grid-md-10">
<div class="o-mailchimp__policy">
<fieldset class="field-group">
<legend class="u-visuallyhidden">Integritetspolicy</legend>
<div class="checkbox">
<input id="pa-iis-mailchimp-static-form" name="policy-agree" class="o-mailchimp__policy-agree a-checkbox u-visuallyhidden" type="checkbox" value="1" />
<label for="pa-iis-mailchimp-static-form" class="u-p-r-0"><span>Jag samtycker till att ta emot nyhetsbrev och har tagit del av <a href="https://internetstiftelsen.se/om-webbplatsen/integritetspolicy-for-besokare-pa-internetstiftelsens-webbplatser/" target="_blank" class="u-link">integritetspolicyn</a></span></label>
</div>
</fieldset>
</div>
</div>
</div>
<input type="text" name="hname" class="mailchimp__hname-field is-hidden" placeholder="Leave this field empty" />
<input type="hidden" name="mailchimp_list" value="b28f7d99cd" />
<input type="hidden" name="tags" value="" />
<button type="submit" class="a-button js-mailchimp-btn has-loader u-m-t-2">
<span class="a-button__text">Prenumerera</span>
</button>
<div data-mailchimp-result="1"></div>
</form>
</div>
</div>
</div>
</div>
</section>
<section class="o-mailchimp o-mailchimp--sliding" data-mailchimp="iis-mailchimp-sliding-form" id="iis-mailchimp-sliding-form" data-slider-delay="5000" aria-hidden="true">
<div class="wrapper">
<div class="o-mailchimp__wrapper">
<div class="row flex-row-reverse o-mailchimp__close">
<button type="button" class="a-button a-button--transparent a-button--icon js-close-mailchimp-popup" aria-controls="iis-mailchimp-sliding-form">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="row flex-row-reverse o-mailchimp__row-bottom">
<div class="o-mailchimp__image-container grid-18 grid-lg-10">
<img src="/assets/images/hero.jpg" alt="hero" class="o-mailchimp__image">
</div>
<div class="o-mailchimp__content grid-18 grid-lg-8">
<h1 class="o-mailchimp__headline">Nyhetsbrev från Internetstiftelsen</h1>
<p class="o-mailchimp__preamble">Cirka en gång i månaden tipsar vi om intressanta evenemang och roliga projekt som vi driver. Se till att du håller dig uppdaterad genom att prenumerera på nyhetsbrevet!</p>
<form action="./" method="post">
<div class="m-form-control row">
<div class="m-form__row grid-18 grid-lg-14 grid-md-10 u-m-b-2">
<div class="field-group">
<label for="email" class="a-label u-visuallyhidden">Din e-postadress</label>
<input type="email" class="a-input js-mailchimp-email" name="email" placeholder="Din e-postadress" required />
</div>
</div>
<div class="m-form__row grid-18 grid-lg-14 grid-md-10">
<div class="o-mailchimp__policy">
<fieldset class="field-group">
<legend class="u-visuallyhidden">Integritetspolicy</legend>
<div class="checkbox">
<input id="pa-iis-mailchimp-sliding-form" name="policy-agree" class="o-mailchimp__policy-agree a-checkbox u-visuallyhidden" type="checkbox" value="1" />
<label for="pa-iis-mailchimp-sliding-form" class="u-p-r-0">
<span>Jag samtycker till att ta emot nyhetsbrev och har tagit del av <a href="https://internetstiftelsen.se/om-webbplatsen/integritetspolicy-for-besokare-pa-internetstiftelsens-webbplatser/" target="_blank" class="u-link">integritetspolicyn</a></span>
</label>
</div>
</fieldset>
</div>
</div>
</div>
<input type="text" name="hname" class="mailchimp__hname-field is-hidden" placeholder="Leave this field empty" />
<input type="hidden" name="mailchimp_list" value="b28f7d99cd" />
<input type="hidden" name="tags" value="" />
<button type="submit" class="a-button js-mailchimp-btn has-loader u-m-t-2">
<span class="a-button__text">Prenumerera</span>
</button>
<div data-mailchimp-result="1"></div>
</form>
</div>
</div>
</div>
</div>
</section>
<div class="wrapper-fluid">
<div class="o-footer" id="siteFooter">
<div class="row">
<div class="grid-18 o-footer__info">
<div class="row">
<div class="grid-18 grid-lg-9 o-footer__info__freetext">
<p class="o-footer__paragraph"><a href="https://internetstiftelsen.se">Internetstiftelsen</a> verkar för ett internet som bidrar positivt till människan och samhället. Vi är en oberoende organisation som säkerställer en stark och säker infrastruktur för internet i Sverige. Vårt mål är att alla ska våga och kunna använda internet. Vi finns i Sverige och ansvarar för den svenska toppdomänen .se och driften av toppdomänen .nu.</p>
</div>
<div class="grid-18 grid-lg-9 o-footer__info__contact">
<div class="row o-footer__info__contact__row-first">
<div class="grid-md-9 grid-lg-18 grid-xl-9 grid-18 o-footer__info__address1">
<ul class="u-list-clean o-footer__info__contact__address">
<li class="o-footer__info__contact__address__li">Internetstiftelsen</li>
<li class="o-footer__info__contact__address__li">Hammarby Kaj 10D</li>
<li class="o-footer__info__contact__address__li">Box 92073</li>
<li class="o-footer__info__contact__address__li">120 07 Stockholm</li>
</ul>
</div>
<div class="grid-md-9 grid-lg-18 grid-xl-9 grid-18 o-footer__info__address2">
<ul class="u-list-clean o-footer__info__contact__address">
<li class="o-footer__info__contact__address__li">E-post: <a class="o-footer__link" href="mailto:info@internetstiftelsen.se">info@internetstiftelsen.se</a></li>
<li class="o-footer__info__contact__address__li">Telefon: <a class="o-footer__link" href="tel:084523500">08-452 35 00</a></li>
<li class="o-footer__info__contact__address__li">Organisationsnummer: 802405-0190</li>
</ul>
</div>
</div>
<div class="row o-footer__info__contact__row-second">
<div class="grid-19 grid-md-9 o-footer__info__ISO">
<a href="https://internetstiftelsen.se/docs/Certifikat_27001_UKAS_sv.pdf" class="o-footer__link o-footer__external-link">
<img src="https://internetstiftelsen.se/app/themes/internetstiftelsen/images/ISO_27001_2013_black_TM.svg" class="o-footer__external-logo" alt="Certifierade enligt ISO/IEC 27001:2013">
<span>Certifierade enligt ISO/IEC<br>27001:2013</span>
</a>
</div>
<div class="grid-19 grid-md-9 o-footer__info__CC">
<a href="https://creativecommons.org/licenses/by/4.0/legalcode.sv" class="o-footer__link o-footer__external-link">
<img class="o-footer__external-logo o-footer__external-logo--cc" src="https://svenskarnaochinternet.se/app/uploads/2019/10/ccby.png" alt="Creative Commons licens<br>Erkännande 4.0 Internationell">
<span>Creative Commons licens<br>Erkännande 4.0 Internationell</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="grid-18 o-footer__logotypes">
<div class="row">
<div class="o-footer__logotypes__item">
<a href="https://svenskarnaochinternet.se" class="o-footer__logotypes__item__link">
<div class="o-footer__logotypes__item__inner">
<div class="o-footer__logotypes__item__front">
<img class="o-footer__logotype" alt="Svenskarna och internet" src="https://static.internetstiftelsen.se/images/logotypes/svenskarna-och-internet.svg">
</div>
<div class="o-footer__logotypes__item__back">
<h2>Svenskarna och internet</h2>
<span>En årlig studie av svenska folkets internetvanor</span>
</div>
</div>
</a>
</div>
<div class="o-footer__logotypes__item">
<a href="https://internetdagarna.se" class="o-footer__logotypes__item__link">
<div class="o-footer__logotypes__item__inner">
<div class="o-footer__logotypes__item__front">
<img class="o-footer__logotype" alt="Internetdagarna" src="https://static.internetstiftelsen.se/images/logotypes/internetdagarna.svg">
</div>
<div class="o-footer__logotypes__item__back">
<h2>Internetdagarna</h2>
<span>Internetdagarna är en konferens som arrangeras av Internetstiftelsen</span>
</div>
</div>
</a>
</div>
<div class="o-footer__logotypes__item">
<a href="https://goto10.se" class="o-footer__logotypes__item__link">
<div class="o-footer__logotypes__item__inner">
<div class="o-footer__logotypes__item__front">
<img class="o-footer__logotype" alt="Goto10" src="https://static.internetstiftelsen.se/images/logotypes/goto-10.svg">
</div>
<div class="o-footer__logotypes__item__back">
<h2>Goto 10</h2>
<span>Goto 10 är en start- och mötesplats för internetrelaterade frågor som drivs av Internetstiftelsen</span>
</div>
</div>
</a>
</div>
<!--<div class="o-footer__logotypes__item">
<a href="https://bredbandskollen.se" class="o-footer__logotypes__item__link">
<div class="o-footer__logotypes__item__inner">
<div class="o-footer__logotypes__item__front">
<img class="o-footer__logotype" alt="Bredbandskollen" src="https://static.internetstiftelsen.se/images/logotypes/bredbandskollen.svg">
</div>
<div class="o-footer__logotypes__item__back">
<h2>Bredbandskollen</h2>
<span>Bredbandskollen är ett oberoende konsumentverktyg som drivs av Internetstiftelsen</span>
</div>
</div>
</a>
</div>-->
<div class="o-footer__logotypes__item">
<a href="https://internetmuseum.se" class="o-footer__logotypes__item__link">
<div class="o-footer__logotypes__item__inner">
<div class="o-footer__logotypes__item__front">
<img class="o-footer__logotype" alt="Internetmuseum" src="https://static.internetstiftelsen.se/images/logotypes/internetmuseum.svg">
</div>
<div class="o-footer__logotypes__item__back">
<h2>Internetmuseum</h2>
<span>Ett digitalt museum som byggts, och kureras av Internetstiftelsen</span>
</div>
</div>
</a>
</div>
<div class="o-footer__logotypes__item">
<a href="https://digitalalektioner.se" class="o-footer__logotypes__item__link">
<div class="o-footer__logotypes__item__inner">
<div class="o-footer__logotypes__item__front">
<img class="o-footer__logotype" alt="Digitala lektioner" src="https://static.internetstiftelsen.se/images/logotypes/digitala-lektioner.svg">
</div>
<div class="o-footer__logotypes__item__back">
<h2>Digitala lektioner</h2>
<span>Öppen digital lärresurs med färdiga lektioner för alla stadier i grundskolan</span>
</div>
</div>
</a>
</div>
<div class="o-footer__logotypes__item">
<a href="https://digitalalektioner.se" class="o-footer__logotypes__item__link">
<div class="o-footer__logotypes__item__inner">
<div class="o-footer__logotypes__item__front">
<img class="o-footer__logotype" alt="Internetkunskap" src="https://static.internetstiftelsen.se/images/logotypes/internetkunskap.svg">
</div>
<div class="o-footer__logotypes__item__back">
<h2>Internetkunskap</h2>
<span>Samlad kunskap som hjälper dig att bli en säker och medveten internetanvändare</span>
</div>
</div>
</a>
</div>
<!--<div class="o-footer__logotypes__item">
<a href="https://internetstiftelsen.se" class="o-footer__logotypes__item__link">
<div class="o-footer__logotypes__item__inner">
<div class="o-footer__logotypes__item__front">
<img class="o-footer__logotype" alt="Internetstiftelsen" src="https://static.internetstiftelsen.se/images/logotypes/internetstiftelsen.svg">
</div>
<div class="o-footer__logotypes__item__back">
<h2>Internetstiftelsen</h2>
<span>Internetstiftelsen verkar för ett internet som bidrar positivt till människan och samhället</span>
</div>
</div>
</a>
</div>-->
</div>
</div>
</div>
<div class="row">
<div class="u-p-y-1 o-footer__bottom-links">
<nav>
<ul class="u-list-clean display-flex">
<li class="u-p-x-1"><a href="https://internetstiftelsen.se/om-webbplatsen/" class="o-footer__link o-footer__about-link">Om webbplatsen</a></li>
<li class="u-p-x-1"><a href="https://internetstiftelsen.se/om-webbplatsen/cookies/" class="o-footer__link o-footer__about-link">Om cookies</a></li>
<li class="u-p-x-1"><button id="ot-sdk-btn" class="o-footer__link o-footer__about-link ot-sdk-show-settings">Anpassa kakor</button></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
{{render '@glider--hero'}}
<div class="o-timeline">
<div class="o-timeline__progress-bar js-progress-bar"></div>
<div class="o-timeline__decades-container js-decade-container"></div>
</div>
<div class="js-timeline">
<div class="o-section o-timeline__decade js-timeline-decade" id="1960">
<div class="wrapper">
<h2 class="godzilla godzilla--19 color-jade">1960</h2>
</div>
<figure class="o-hero o-hero--video-wide u-position-static">
<video src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" autoplay="false" muted class="o-hero__video"></video>
</figure>
<div class="wrapper">
<div class="grid-18 grid-md-12 grid-lg-9 o-timeline__decade__intro">
<p class="preamble"><strong>Långt innan internet</strong> läggs de första grunderna för framtidens IT-utveckling. Redan nu börjar Sverige bli bra på datorteknik – bland annat skapar vi en hålremsstans som blir en exportsuccé.</p>
</div>
<div class="wp-block-iis-grid">
<div class="row justify-content-around justify-content-md-between asymmetric-sm asymmetric-reversed u-m-t-4">
<div class="grid-18 grid-sm-8 grid-md-5 o-timeline__item js-timeline-item" id="1">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img class="m-card__image m-card__media" src="/assets/images/timeline-item01.png">
<div class="m-card__content">
<div class="a-meta"><div class="has-jade-color">1960</div></div>
<a href="#1" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Domännamnssystemet DNS skapas – nu blir det enkelt att hitta rätt på nätet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Föreställ dig att du varje gång du ska besöka en webbsida eller skicka ett mejl hade behövt leta reda på rätt nummer i ett register och sedan skriva in en lång sifferkombination i stället för ett domännamn.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="grid-18 grid-sm-8 grid-md-5 o-timeline__item js-timeline-item" id="2">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img class="m-card__image m-card__media" src="/assets/images/timeline-item02.png">
<div class="m-card__content">
<div class="a-meta"><div class="has-jade-color">1964</div></div>
<a href="#2" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Det här är TCP/IP – nu uppfinns tekniken bakom internet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Så hur fungerar internet? Svaret är med protokollen TCP/IP. En teknik som kunde börja användas redan 1974. Men det har inte varit givet att just TCP/IP skulle bygga internet. </p>
<div class="o-timeline__item__content">
<p><a href="#">Arpanet</a> är ett nätverk som är föregångare till dagens internet. Arpanets historia startar på den amerikanska försvarsmyndigheten ARPA där idén till internet först formuleras 1963. Utvecklingen av nätverket pågår sedan under större delen av 1960-talet.</p>
<p>I september 1969 länkas Arpanets första dator med en sprillans ny, specialbyggd maskin, en IMP – Interface Message Processor (som ni ser på bilden här ovanför). Och några veckor senare, 29 oktober klockan halv elva på kvällen skickar forskargruppen på UCLA, ledd av professor Leonard Kleinrock, iväg ett meddelande till en dator på Stanford drygt 50 mil därifrån. Det innehåller endast bokstäverna L och O (forskarna hade tänkt skriva LOGIN men servern kraschade). </p>
<p>Arpanet är ett av många nätverk som utvecklas under 60-talet i både USA, England och Frankrike.</p>
<h2>Vem uppfann internet? Flera personer gjorde betydande insatser</h2>
<p>På den amerikanska forskningsmyndigheten ARPA (Advanced Research Projects Agency) jobbar datorforskaren Joseph Licklider. Han är den som kläcker idén till det som blir internet, men det finns många andra på myndigheten som gör betydande insatser för att förverkliga planerna.</p>
<p>Leonard Kleinrock uppfinner kommunikationstekniken ”paketutbyte” (packet switching), Vinton Cerf och Robert Kahn kommer på TCP/IP-protokollet (som fortfarande utgör grunden för det internet vi har i dag).</p>
<p>En annan viktig upptäckt är tidsdelningssystemen (time-sharing), som innebär att flera personer kan använda samma dator. Det är ju egentligen det man gör på internet, delar datorer med varandra.</p>
<h2>Första mejlet skickas på Arpanet</h2>
<p>1971 skickas det första e-postmeddelandet på Arpanet – från en dator till en annan som står precis bredvid. Fler och fler datorer på amerikanska forskningsanstalter och laboratorium kopplas sedan upp, nätet växer och 1973 är det hela fyrtio datorer uppkopplade.</p>
<h2>Arpanet blir internationellt</h2>
<p>Samma år kopplas den första utländska datorn upp mot Arpanet utanför USA. Den är norsk och kopplas upp via satellit. Men om vi ska vara lite petiga går faktiskt den första internetkontakten via markstationen i Tanum i Bohuslän, som tar emot signalerna och skickar dem vidare till Norge. Först då blir internet internationellt.</p>
<div class="o-timeline__item__content__meta">
{{> @tag text="Arpanet" href="#" }}
{{> @tag text="Internet" href="#" }}
{{> @tag text="Outernet" href="#" }}
<div class="o-timeline__item__content__meta__related">
<h4 class="gamma">Relaterade artiklar</h4>
<ul class="u-list-clean">
<li>
<div class="row">
<div class="grid-4">
<img src="/assets/images/timeline-item01.png">
</div>
<div class="grid-14">
<div class="a-meta"><div class="has-jade-color">1964</div></div>
<h2 class="delta">Filmklipp: en framtidsvision för internet och digitalisering från 60-talet</h2>
</div>
</div>
</li>
<li>
<div class="row">
<div class="grid-4">
<img src="/assets/images/timeline-item02.png">
</div>
<div class="grid-14">
<div class="a-meta"><div class="has-jade-color">1968</div></div>
<h2 class="delta">Domännamnssystemet DNS skapas – nu blir det enkelt att hitta rätt på nätet</h2>
</div>
</div>
</li>
<li>
<div class="row">
<div class="grid-4">
<img src="/assets/images/nyancat.gif">
</div>
<div class="grid-14">
<div class="a-meta"><div class="has-jade-color">1969</div></div>
<h2 class="delta">Det här är TCP/IP – nu uppfinns tekniken bakom internet</h2>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="grid-18 grid-sm-12 grid-md-5 o-timeline__item js-timeline-item" id="3">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img class="m-card__image m-card__media" src="/assets/images/nyancat.gif">
<div class="m-card__content">
<div class="a-meta"><div class="has-jade-color">1968</div></div>
<a href="#3" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Filmklipp: en framtidsvision för internet och digitalisering från 60-talet</h1>
</a>
<p class="m-card__text o-timeline__card-text">I ett filmklipp från slutet av sextiotalet spekuleras det om framtidens hus. I en sekvens får man se många olika terminaler där mor och far beställer kläder, tittar över bankärenden, och korresponderar med andra.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="wp-block-iis-grid">
<div class="row justify-content-center asymmetric-sm asymmetric-reversed u-m-b-0 u-m-t-0">
<div class="grid-18 grid-sm-14 grid-md-12 grid-lg-10 o-timeline__item js-timeline-item" id="20">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img width="700" height="406" src="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg" data-src="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg" class="m-card__image m-card__media lazyloaded" alt="En äldre man med jeansjacka sitter vid sin dator och pratar i telefon." loading="lazy" data-srcset="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg 700w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-726x420.jpg 726w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-500x290.jpg 500w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-8x5.jpg 8w" sizes="(max-width: 700px) 100vw, 700px" srcset="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg 700w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-726x420.jpg 726w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-500x290.jpg 500w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-8x5.jpg 8w"><noscript><img width="700" height="406" src="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg" class="m-card__image m-card__media" alt="En äldre man med jeansjacka sitter vid sin dator och pratar i telefon." loading="lazy" srcset="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg 700w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-726x420.jpg 726w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-500x290.jpg 500w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-8x5.jpg 8w" sizes="(max-width: 700px) 100vw, 700px" /></noscript>
<div class="m-card__content">
<div class="a-meta"><div class="has-jade-color">1969</div></div>
<a href="#20" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Filmklipp: en framtidsvision för internet och digitalisering från 60-talet</h1>
</a>
<p class="m-card__text o-timeline__card-text">I ett filmklipp från slutet av sextiotalet spekuleras det om framtidens hus. I en sekvens får man se många olika terminaler där mor och far beställer kläder, tittar över bankärenden, och korresponderar med andra.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="o-section o-timeline__decade js-timeline-decade" id="1970">
<div class="wrapper">
<h2 class="godzilla godzilla--19 color-peacock u-align-right">1970</h2>
</div>
<figure class="o-hero u-position-static">
<img src="/assets/images/hero.jpg" alt="hero" class="o-hero__image">
</figure>
<div class="wrapper">
<div class="grid-18 grid-md-12 grid-lg-9 o-timeline__decade__intro">
<p class="preamble"><strong>På sjuttiotalet</strong> fortsätter utvecklandet av föregångare till dagens internet, både i Sverige och i USA. I slutet av årtiondet skapar Jacob Palme KOM-systemet, ett slags tidigt chattrum.</p>
</div>
<div class="wp-block-iis-grid">
<div class="row justify-content-around justify-content-md-between asymmetric-sm asymmetric-reversed u-m-t-4">
<div class="grid-18 grid-sm-8 grid-md-5 o-timeline__item js-timeline-item" id="21">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img class="m-card__image m-card__media" src="/assets/images/nyancat.gif">
<div class="m-card__content">
<div class="a-meta"><div class="has-peacock-color">1970</div></div>
<a href="#21" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Domännamnssystemet DNS skapas – nu blir det enkelt att hitta rätt på nätet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Föreställ dig att du varje gång du ska besöka en webbsida eller skicka ett mejl hade behövt leta reda på rätt nummer i ett register och sedan skriva in en lång sifferkombination i stället för ett domännamn.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="grid-18 grid-sm-8 grid-md-5 o-timeline__item js-timeline-item" id="22">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img class="m-card__image m-card__media" src="/assets/images/timeline-item02.png">
<div class="m-card__content">
<div class="a-meta"><div class="has-peacock-color">1974</div></div>
<a href="#22" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Det här är TCP/IP – nu uppfinns tekniken bakom internet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Så hur fungerar internet? Svaret är med protokollen TCP/IP. En teknik som kunde börja användas redan 1974. Men det har inte varit givet att just TCP/IP skulle bygga internet. </p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="grid-18 grid-sm-12 grid-md-5 o-timeline__item js-timeline-item" id="23">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/timeline-item01.png">
<div class="m-card__content">
<div class="a-meta"><div class="has-peacock-color">1978</div></div>
<a href="#23" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Filmklipp: en framtidsvision för internet och digitalisering från 60-talet</h1>
</a>
<p class="m-card__text o-timeline__card-text">I ett filmklipp från slutet av sextiotalet spekuleras det om framtidens hus. I en sekvens får man se många olika terminaler där mor och far beställer kläder, tittar över bankärenden, och korresponderar med andra.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="wp-block-iis-grid">
<div class="row justify-content-center asymmetric-sm asymmetric-reversed u-m-b-0 u-m-t-0">
<div class="grid-18 grid-sm-14 grid-md-12 grid-lg-10 o-timeline__item js-timeline-item" id="20">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img width="700" height="406" src="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg" data-src="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg" class="m-card__image m-card__media lazyloaded" alt="En äldre man med jeansjacka sitter vid sin dator och pratar i telefon." loading="lazy" data-srcset="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg 700w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-726x420.jpg 726w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-500x290.jpg 500w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-8x5.jpg 8w" sizes="(max-width: 700px) 100vw, 700px" srcset="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg 700w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-726x420.jpg 726w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-500x290.jpg 500w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-8x5.jpg 8w"><noscript><img width="700" height="406" src="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg" class="m-card__image m-card__media" alt="En äldre man med jeansjacka sitter vid sin dator och pratar i telefon." loading="lazy" srcset="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg 700w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-726x420.jpg 726w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-500x290.jpg 500w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-8x5.jpg 8w" sizes="(max-width: 700px) 100vw, 700px" /></noscript>
<div class="m-card__content">
<div class="a-meta"><div class="has-jade-color">1969</div></div>
<a href="#20" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Filmklipp: en framtidsvision för internet och digitalisering från 60-talet</h1>
</a>
<p class="m-card__text o-timeline__card-text">I ett filmklipp från slutet av sextiotalet spekuleras det om framtidens hus. I en sekvens får man se många olika terminaler där mor och far beställer kläder, tittar över bankärenden, och korresponderar med andra.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="o-section o-timeline__decade js-timeline-decade" id="1980">
<div class="wrapper">
<h2 class="godzilla godzilla--19 color-sandstone">1980</h2>
</div>
<figure class="o-hero u-position-static">
<img src="/assets/images/hero.jpg" alt="hero" class="o-hero__image">
</figure>
<div class="wrapper">
<div class="grid-18 grid-md-12 grid-lg-9 o-timeline__decade__intro">
<p class="preamble"><strong>Utvecklingen rusar framåt,</strong> inte minst tack vare en rad hårt arbetande eldsjälar. Björn Eriksen registrerar .se-domänen och tar emot det allra första mejlet till Sverige, SVT:s Lars Orup försöker sig på dataintrång och TCP-IP – protokollet som ligger till grund för internets infrastruktur – blir standard.</p>
</div>
<div class="wp-block-iis-grid">
<div class="row justify-content-around justify-content-md-between asymmetric-sm asymmetric-reversed u-m-t-4">
<div class="grid-18 grid-sm-8 grid-md-5 o-timeline__item js-timeline-item" id="24">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/timeline-item01.png">
<div class="m-card__content">
<div class="a-meta"><div class="has-sandstone-color">1980</div></div>
<a href="#24" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Domännamnssystemet DNS skapas – nu blir det enkelt att hitta rätt på nätet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Föreställ dig att du varje gång du ska besöka en webbsida eller skicka ett mejl hade behövt leta reda på rätt nummer i ett register och sedan skriva in en lång sifferkombination i stället för ett domännamn.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="grid-18 grid-sm-8 grid-md-5 o-timeline__item js-timeline-item" id="25">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/timeline-item02.png">
<div class="m-card__content">
<div class="a-meta"><div class="has-sandstone-color">1981</div></div>
<a href="#25" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Det här är TCP/IP – nu uppfinns tekniken bakom internet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Så hur fungerar internet? Svaret är med protokollen TCP/IP. En teknik som kunde börja användas redan 1974. Men det har inte varit givet att just TCP/IP skulle bygga internet. </p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="grid-18 grid-sm-12 grid-md-5 o-timeline__item js-timeline-item" id="26">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/nyancat.gif">
<div class="m-card__content">
<div class="a-meta"><div class="has-sandstone-color">1983</div></div>
<a href="#26" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Filmklipp: en framtidsvision för internet och digitalisering från 60-talet</h1>
</a>
<p class="m-card__text o-timeline__card-text">I ett filmklipp från slutet av sextiotalet spekuleras det om framtidens hus. I en sekvens får man se många olika terminaler där mor och far beställer kläder, tittar över bankärenden, och korresponderar med andra.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="wp-block-iis-grid">
<div class="row justify-content-center asymmetric-sm asymmetric-reversed u-m-b-0 u-m-t-0">
<div class="grid-18 grid-sm-14 grid-md-12 grid-lg-10 o-timeline__item js-timeline-item" id="4">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img width="700" height="406" src="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg" data-src="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg" class="m-card__image m-card__media lazyloaded" alt="En äldre man med jeansjacka sitter vid sin dator och pratar i telefon." loading="lazy" data-srcset="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg 700w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-726x420.jpg 726w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-500x290.jpg 500w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-8x5.jpg 8w" sizes="(max-width: 700px) 100vw, 700px" srcset="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg 700w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-726x420.jpg 726w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-500x290.jpg 500w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-8x5.jpg 8w"><noscript><img width="700" height="406" src="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg" class="m-card__image m-card__media" alt="En äldre man med jeansjacka sitter vid sin dator och pratar i telefon." loading="lazy" srcset="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg 700w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-726x420.jpg 726w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-500x290.jpg 500w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-8x5.jpg 8w" sizes="(max-width: 700px) 100vw, 700px" /></noscript>
<div class="m-card__content">
<div class="a-meta"><div class="has-sandstone-color">1984</div></div>
<a href="#4" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Filmklipp: en framtidsvision för internet och digitalisering från 60-talet</h1>
</a>
<p class="m-card__text o-timeline__card-text">I ett filmklipp från slutet av sextiotalet spekuleras det om framtidens hus. I en sekvens får man se många olika terminaler där mor och far beställer kläder, tittar över bankärenden, och korresponderar med andra.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="wp-block-iis-grid">
<div class="row justify-content-around asymmetric-sm asymmetric-reversed u-m-t-4">
<div class="grid-18 grid-sm-8 grid-md-7 o-timeline__item js-timeline-item" id="5">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/nyancat.gif">
<div class="m-card__content">
<div class="a-meta"><div class="has-sandstone-color">1985</div></div>
<a href="#5" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Domännamnssystemet DNS skapas – nu blir det enkelt att hitta rätt på nätet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Föreställ dig att du varje gång du ska besöka en webbsida eller skicka ett mejl hade behövt leta reda på rätt nummer i ett register och sedan skriva in en lång sifferkombination i stället för ett domännamn.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="grid-18 grid-sm-8 grid-md-7 o-timeline__item js-timeline-item" id="6">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/timeline-item01.png">
<div class="m-card__content">
<div class="a-meta"><div class="has-sandstone-color">1986</div></div>
<a href="#6" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Det här är TCP/IP – nu uppfinns tekniken bakom internet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Så hur fungerar internet? Svaret är med protokollen TCP/IP. En teknik som kunde börja användas redan 1974. Men det har inte varit givet att just TCP/IP skulle bygga internet. </p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="wp-block-iis-grid">
<div class="row justify-content-center asymmetric-sm asymmetric-reversed u-m-b-0 u-m-t-0">
<div class="grid-18 grid-sm-14 grid-md-12 grid-lg-10 o-timeline__item js-timeline-item" id="7">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img width="700" height="406" src="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg" data-src="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg" class="m-card__image m-card__media lazyloaded" alt="En äldre man med jeansjacka sitter vid sin dator och pratar i telefon." loading="lazy" data-srcset="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg 700w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-726x420.jpg 726w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-500x290.jpg 500w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-8x5.jpg 8w" sizes="(max-width: 700px) 100vw, 700px" srcset="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg 700w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-726x420.jpg 726w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-500x290.jpg 500w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-8x5.jpg 8w"><noscript><img width="700" height="406" src="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg" class="m-card__image m-card__media" alt="En äldre man med jeansjacka sitter vid sin dator och pratar i telefon." loading="lazy" srcset="https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-700x406.jpg 700w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-726x420.jpg 726w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-500x290.jpg 500w, https://internetstiftelsen.se/app/uploads/2021/10/soi2021-3-8x5.jpg 8w" sizes="(max-width: 700px) 100vw, 700px" /></noscript>
<div class="m-card__content">
<div class="a-meta"><div class="has-sandstone-color">1989</div></div>
<a href="#7" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Filmklipp: en framtidsvision för internet och digitalisering från 60-talet</h1>
</a>
<p class="m-card__text o-timeline__card-text">I ett filmklipp från slutet av sextiotalet spekuleras det om framtidens hus. I en sekvens får man se många olika terminaler där mor och far beställer kläder, tittar över bankärenden, och korresponderar med andra.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="o-section o-timeline__decade js-timeline-decade" id="1990">
<div class="wrapper">
<h2 class="godzilla godzilla--19 color-lemon u-align-right">1990</h2>
</div>
<figure class="o-hero u-position-static">
<img src="/assets/images/hero.jpg" alt="hero" class="o-hero__image">
</figure>
<div class="wrapper">
<div class="grid-18 grid-md-12 grid-lg-9 o-timeline__decade__intro">
<p class="preamble"><strong>Nu börjar det hända grejer!</strong> Under 90-talet blir internet något som fler och fler både känner till och faktiskt använder. WWW släpps löst på internet, Carl Bildt mejlar med Bill Clinton och 1996 utses internet till årets julklapp.</p>
</div>
<div class="wp-block-iis-grid">
<div class="row justify-content-around justify-content-md-between asymmetric-sm asymmetric-reversed u-m-t-4">
<div class="grid-18 grid-sm-8 grid-md-5 o-timeline__item js-timeline-item" id="8">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/timeline-item01.png">
<div class="m-card__content">
<div class="a-meta"><div class="has-lemon-color">1991</div></div>
<a href="#8" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Domännamnssystemet DNS skapas – nu blir det enkelt att hitta rätt på nätet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Föreställ dig att du varje gång du ska besöka en webbsida eller skicka ett mejl hade behövt leta reda på rätt nummer i ett register och sedan skriva in en lång sifferkombination i stället för ett domännamn.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="grid-18 grid-sm-8 grid-md-5 o-timeline__item js-timeline-item" id="9">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/timeline-item02.png">
<div class="m-card__content">
<div class="a-meta"><div class="has-lemon-color">1993</div></div>
<a href="#9" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Det här är TCP/IP – nu uppfinns tekniken bakom internet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Så hur fungerar internet? Svaret är med protokollen TCP/IP. En teknik som kunde börja användas redan 1974. Men det har inte varit givet att just TCP/IP skulle bygga internet. </p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="grid-18 grid-sm-12 grid-md-5 o-timeline__item js-timeline-item" id="10">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/nyancat.gif">
<div class="m-card__content">
<div class="a-meta"><div class="has-lemon-color">1995</div></div>
<a href="#10" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Filmklipp: en framtidsvision för internet och digitalisering från 60-talet</h1>
</a>
<p class="m-card__text o-timeline__card-text">I ett filmklipp från slutet av sextiotalet spekuleras det om framtidens hus. I en sekvens får man se många olika terminaler där mor och far beställer kläder, tittar över bankärenden, och korresponderar med andra.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="o-section o-timeline__decade js-timeline-decade" id="2000">
<div class="wrapper">
<h2 class="godzilla color-ocean">2000</h2>
</div>
<figure class="o-hero u-position-static">
<img src="/assets/images/hero.jpg" alt="hero" class="o-hero__image">
</figure>
<div class="wrapper">
<div class="grid-18 grid-md-12 grid-lg-9 o-timeline__decade__intro">
<p class="preamble"><strong>Nu börjar vi hänga på communities</strong> och konsumera och dela stora mängder innehåll – roliga bilder, bloggar, nyheter, men också filmer och musik som vi kanske inte alltid fått tag i på lagligt sätt.</p>
</div>
<div class="wp-block-iis-grid">
<div class="row justify-content-around justify-content-md-between asymmetric-sm asymmetric-reversed u-m-t-4">
<div class="grid-18 grid-sm-8 grid-md-5 o-timeline__item js-timeline-item" id="11">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/timeline-item02.png">
<div class="m-card__content">
<div class="a-meta"><div class="has-ocean-color">2000</div></div>
<a href="#11" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Domännamnssystemet DNS skapas – nu blir det enkelt att hitta rätt på nätet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Föreställ dig att du varje gång du ska besöka en webbsida eller skicka ett mejl hade behövt leta reda på rätt nummer i ett register och sedan skriva in en lång sifferkombination i stället för ett domännamn.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="grid-18 grid-sm-8 grid-md-5 o-timeline__item js-timeline-item" id="12">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/nyancat.gif">
<div class="m-card__content">
<div class="a-meta"><div class="has-ocean-color">2002</div></div>
<a href="#12" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Det här är TCP/IP – nu uppfinns tekniken bakom internet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Så hur fungerar internet? Svaret är med protokollen TCP/IP. En teknik som kunde börja användas redan 1974. Men det har inte varit givet att just TCP/IP skulle bygga internet. </p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="grid-18 grid-sm-12 grid-md-5 o-timeline__item js-timeline-item" id="13">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/timeline-item01.png">
<div class="m-card__content">
<div class="a-meta"><div class="has-ocean-color">2005</div></div>
<a href="#13" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Filmklipp: en framtidsvision för internet och digitalisering från 60-talet</h1>
</a>
<p class="m-card__text o-timeline__card-text">I ett filmklipp från slutet av sextiotalet spekuleras det om framtidens hus. I en sekvens får man se många olika terminaler där mor och far beställer kläder, tittar över bankärenden, och korresponderar med andra.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="o-section o-timeline__decade js-timeline-decade" id="2010">
<div class="wrapper">
<h2 class="godzilla color-ruby u-align-right">2010</h2>
</div>
<figure class="o-hero u-position-static">
<img src="/assets/images/hero.jpg" alt="hero" class="o-hero__image">
</figure>
<div class="wrapper">
<div class="grid-18 grid-md-12 grid-lg-9 o-timeline__decade__intro">
<p class="preamble"><strong>Smarta telefoner och plattor</strong> innebär att internet är med oss hela tiden. 2010 använder 92 procent av den svenska befolkningen internet och det finns nu över 1 miljon .se-domäner registrerade.</p>
</div>
<div class="wp-block-iis-grid">
<div class="row justify-content-around justify-content-md-between asymmetric-sm asymmetric-reversed u-m-t-4">
<div class="grid-18 grid-sm-8 grid-md-5 o-timeline__item js-timeline-item" id="14">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/nyancat.gif">
<div class="m-card__content">
<div class="a-meta"><div class="has-ruby-color">2011</div></div>
<a href="#14" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Domännamnssystemet DNS skapas – nu blir det enkelt att hitta rätt på nätet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Föreställ dig att du varje gång du ska besöka en webbsida eller skicka ett mejl hade behövt leta reda på rätt nummer i ett register och sedan skriva in en lång sifferkombination i stället för ett domännamn.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="grid-18 grid-sm-8 grid-md-5 o-timeline__item js-timeline-item" id="15">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/timeline-item01.png">
<div class="m-card__content">
<div class="a-meta"><div class="has-ruby-color">2014</div></div>
<a href="#15" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Det här är TCP/IP – nu uppfinns tekniken bakom internet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Så hur fungerar internet? Svaret är med protokollen TCP/IP. En teknik som kunde börja användas redan 1974. Men det har inte varit givet att just TCP/IP skulle bygga internet. </p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="grid-18 grid-sm-12 grid-md-5 o-timeline__item js-timeline-item" id="16">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/timeline-item02.png">
<div class="m-card__content">
<div class="a-meta"><div class="has-ruby-color">2019</div></div>
<a href="#16" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Filmklipp: en framtidsvision för internet och digitalisering från 60-talet</h1>
</a>
<p class="m-card__text o-timeline__card-text">I ett filmklipp från slutet av sextiotalet spekuleras det om framtidens hus. I en sekvens får man se många olika terminaler där mor och far beställer kläder, tittar över bankärenden, och korresponderar med andra.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="o-section o-timeline__decade js-timeline-decade" id="2020">
<div class="wrapper">
<h2 class="godzilla color-granit">2020</h2>
</div>
<figure class="o-hero u-position-static">
<img src="/assets/images/hero.jpg" alt="hero" class="o-hero__image">
</figure>
<div class="wrapper">
<div class="grid-18 grid-md-12 grid-lg-9 o-timeline__decade__intro">
<p class="preamble"><strong>Den en gång så positiva synen på internet</strong> har bytts mot en ökad skepsis för digitaliseringens negativa konsekvenser. Coronapandemin gör att allt fler både studerar och jobbar hemifrån vilket driver på digitaliseringen av arbetslivet.</p>
</div>
<div class="wp-block-iis-grid">
<div class="row justify-content-around justify-content-md-between asymmetric-sm asymmetric-reversed u-m-t-4">
<div class="grid-18 grid-sm-8 grid-md-5 o-timeline__item js-timeline-item" id="17">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/timeline-item02.png">
<div class="m-card__content">
<div class="a-meta"><div class="has-granit-color">2020</div></div>
<a href="#17" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Domännamnssystemet DNS skapas – nu blir det enkelt att hitta rätt på nätet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Föreställ dig att du varje gång du ska besöka en webbsida eller skicka ett mejl hade behövt leta reda på rätt nummer i ett register och sedan skriva in en lång sifferkombination i stället för ett domännamn.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="grid-18 grid-sm-8 grid-md-5 o-timeline__item js-timeline-item" id="18">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/nyancat.gif">
<div class="m-card__content">
<div class="a-meta"><div class="has-granit-color">2021</div></div>
<a href="#18" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Det här är TCP/IP – nu uppfinns tekniken bakom internet</h1>
</a>
<p class="m-card__text o-timeline__card-text">Så hur fungerar internet? Svaret är med protokollen TCP/IP. En teknik som kunde börja användas redan 1974. Men det har inte varit givet att just TCP/IP skulle bygga internet. </p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
<div class="grid-18 grid-sm-12 grid-md-5 o-timeline__item js-timeline-item" id="19">
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
<article class="wp-block-iis-timeline-post m-card o-timeline__parallax js-parallax">
<img m-card__image m-card__media src="/assets/images/timeline-item01.png">
<div class="m-card__content">
<div class="a-meta"><div class="has-granit-color">2022</div></div>
<a href="#19" data-scroll-ignore class="m-card__link">
<h1 class="o-timeline__heading">Filmklipp: en framtidsvision för internet och digitalisering från 60-talet</h1>
</a>
<p class="m-card__text o-timeline__card-text">I ett filmklipp från slutet av sextiotalet spekuleras det om framtidens hus. I en sekvens får man se många olika terminaler där mor och far beställer kläder, tittar över bankärenden, och korresponderar med andra.</p>
</div>
</article>
<button class="a-button a-button--standalone-icon a-button--icon a-button--standalone-icon--white o-timeline__item-close js-timeline-item-bottom-close">
<span class="a-button__text">Stäng</span>
<svg class="icon a-button__icon">
<use xlink:href="#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
{{render '@continue-video-guide'}}
{{render '@mailchimp'}}
{{render '@footer'}}
/* No context defined. */
@charset "UTF-8";
html {
scroll-behavior: smooth;
}
@include organism(timeline) {
position: sticky;
top: -1px;
left: 0;
right: 0;
z-index: z_index(middlegroundImportant);
background: $color-ash;
@include card-shadow($color-cyberspace, 0.2);
&::after {
background-color: $color-concrete;
content: '';
display: block;
height: rhythm(1);
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: -1;
}
@include e(progress-bar) {
display:flex;
height: rhythm(1);
background-image: linear-gradient(90deg, #55c7b4 0vw, #55c7b4 14.285vw, #c27fec 14.285vw, #c27fec 28.57vw, #ffa94d 28.57vw, #ffa94d 42.855vw, #ffce2e 42.855vw, #ffce2e 57.14vw, #50b2fc 57.14vw, #50b2fc 71.425vw, #ff4069 71.425vw, #ff4069 85.71vw, #8E9297 85.71vw, #8E9297 100%);
width: 0;
}
@include e(decades-container) {
display: flex;
justify-content: space-around;
align-items: stretch;
> a {
display: block;
flex: 1;
text-decoration: none;
color: $color-cyberspace;
text-align: center;
padding-top: rhythm(1);
padding-bottom: rhythm(1);
font-family: $font-family-headings;
font-size: $size-medium;
&.is-reading {
&:nth-child(1) {
color: $color-jade;
}
&:nth-child(2) {
color: $color-peacock;
}
&:nth-child(3) {
color: $color-sandstone;
}
&:nth-child(4) {
color: $color-lemon;
}
&:nth-child(5) {
color: $color-ocean;
}
&:nth-child(6) {
color: $color-ruby;
}
&:nth-child(7) {
color: $color-granit;
}
}
@include bp-up(lg) {
font-size: $size-base;
padding-top: rhythm(2);
padding-bottom: rhythm(2);
}
}
}
@include e(decade) {
@include e(intro) {
padding-top: rhythm(4);
margin-bottom: rhythm(8);
@include bp-up(sm) {
margin-bottom: rhythm(10);
}
@include bp-up(md) {
margin-bottom: rhythm(12);
}
@include bp-up(lg) {
margin-bottom: rhythm(14);
}
@include bp-up(xl) {
margin-bottom: rhythm(18);
}
}
}
// "Parallax" scroll items
@include e(parallax) {
opacity: 0;
transition: opacity 1s ease-out, transform 3s cubic-bezier(0, 1, 0, 1);
transform: translateY(200px);
will-change: opacity, transform;
flex: 100%;
&.animate {
transform: translateY(0);
opacity: 1;
z-index: z_index(middleGround);
}
}
@include e(item) {
@include e(content) {
display: none;
padding-bottom: 0;
margin-top: 0;
min-height: 45px;
background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' class='lds-ring' style='background: none;'%3E%3Ccircle cx='50' cy='50' ng-attr-r='%7B%7Bconfig.radius%7D%7D' ng-attr-stroke='%7B%7Bconfig.base%7D%7D' ng-attr-stroke-width='%7B%7Bconfig.width%7D%7D' fill='none' r='43' stroke='%23a7d8fd' stroke-width='7'%3E%3C/circle%3E%3Ccircle cx='50' cy='50' ng-attr-r='%7B%7Bconfig.radius%7D%7D' ng-attr-stroke='%7B%7Bconfig.stroke%7D%7D' ng-attr-stroke-width='%7B%7Bconfig.innerWidth%7D%7D' ng-attr-stroke-linecap='%7B%7Bconfig.linecap%7D%7D' fill='none' r='43' stroke='%2350b2fc' stroke-width='7' stroke-linecap='square' transform='rotate(27.6965 50 50)'%3E%3CanimateTransform attributeName='transform' type='rotate' calcMode='linear' values='0 50 50;180 50 50;720 50 50' keyTimes='0;0.5;1' dur='2.5s' begin='0s' repeatCount='indefinite'%3E%3C/animateTransform%3E%3Canimate attributeName='stroke-dasharray' calcMode='linear' values='9.42477796076938 179.0707812546182;188.4955592153876 -2.842170943040401e-14;9.42477796076938 179.0707812546182' keyTimes='0;0.5;1' dur='2.5' begin='0s' repeatCount='indefinite'%3E%3C/animate%3E%3C/circle%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: center center;
background-size: 45px 45px;
@include bp-up(lg) {
min-height: 100px;
background-size: 100px 100px;
}
&[data-timeline-post-expanded-content="true"] {
background-image: none;
}
@include e(meta) {
@include e(related) {
margin-top: rhythm(4);
border-top: 1px solid $color-granit;
padding-top: rhythm(4);
img {
max-height: 100px;
width: 100%;
object-fit: cover;
object-position: 50% 25%;
border-radius: $border-radius;
}
}
}
}
[data-youtube],
[data-youtube] * {
pointer-events: none;
}
&.is-open {
flex: 0 0 100%;
background-color: $color-cyberspace;
width: 100vw;
max-width: 100vw;
min-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
transform: translateY(0) !important;
z-index: z_index(middlegroundImportant);
padding-top: rhythm(6);
padding-bottom: rhythm(4);
@include bp-up(md) {
padding-top: rhythm(8);
padding-bottom: rhythm(8);
}
h1,
h2,
h3,
h4,
p,
a,
ul li,
ol li,
ul li a,
ol li a {
color: $color-snow;
}
p a,
h1 a,
h2 a,
h3 a,
h4 a,
ul li a,
ol li a {
&:hover,
&:focus {
color: $color-cyberspace;
}
}
[class*=info-box] {
h1,
h2,
h3,
h4,
p,
a,
ul li,
ol li,
ul li a,
ol li a {
color: $color-cyberspace;
}
ul li a,
ol li a {
&:hover,
&:focus {
color: $color-cyberspace;
}
}
}
a[data-scroll-ignore] {
pointer-events: none;
&:hover,
&:focus {
text-decoration: none;
cursor: default;
}
&::after {
display: none;
}
h1 {
@extend %alpha;
}
}
p[class*='card__text'] {
@extend %preamble;
display: block;
}
.wp-block-iis-timeline-post {
margin-left: auto;
margin-right: auto;
@include bp-up(sm) {
width: make_col(16);
}
@include bp-up(md) {
width: make_col(12);
}
@include bp-up(lg) {
width: make_col(12);
}
@include bp-up(xl) {
width: make_col(9);
}
}
& + .grid-18 {
transform: translateY(0) !important;
}
[data-youtube],
[data-youtube] * {
pointer-events: initial;
}
button[class*="close"] {
display: inline-block;
position: absolute;
right: rhythm(1);
transform: translateY(-#{rhythm(1)});
&:first-child {
top: rhythm(1);
transform: none;
}
@include bp-up(md) {
right: rhythm(2);
transform: translateY(rhythm(2));
&:first-child {
top: rhythm(2);
}
}
}
[class*='content'] {
display: block;
}
}
}
@include e(item-close) {
display: none;
}
@include e(heading) {
@include plumber(
$font-size: 2,
$line-height: 3,
$leading-top: 0,
$leading-bottom: 0,
$baseline: $body-baseline
);
@include bp-up(sm) {
@include plumber(
$font-size: 2.2,
$line-height: 3,
$leading-top: 0,
$leading-bottom: 0,
);
}
}
@include e(card-text) {
font-size: 80%;
line-height: 1.3rem;
@include bp-up(lg) {
font-size: 100%;
line-height: 1.5rem;
}
}
}
.row-has-open-child {
margin-bottom: 0 !important;
}
// DUMMY TIMELINE ITEM OPEN/CLOSE
function wrap(el, wrapper) {
el.parentNode.insertBefore(wrapper, el);
wrapper.classList.add('wrapper');
wrapper.appendChild(el);
}
const timeLineItems = document.querySelectorAll('.js-timeline-item');
let timeLineItemScrollPosition = 0;
[].forEach.call(timeLineItems, (timeLineItem) => {
const timeLineItemLink = timeLineItem.querySelector('a');
const timeLineItemClose = timeLineItem.querySelector('.js-timeline-item-close');
const timeLineItemBottomClose = timeLineItem.querySelector('.js-timeline-item-bottom-close');
timeLineItemLink.addEventListener('click', () => {
timeLineItemScrollPosition = window.pageYOffset;
sessionStorage.setItem('scroll-position', timeLineItemScrollPosition);
if (!timeLineItem.classList.contains('is-open')) {
timeLineItem.classList.add('is-open');
timeLineItem.closest('.row')
.classList
.add('row-has-open-child');
// Wrap open timeline item
wrap(timeLineItem.querySelector('.wp-block-iis-timeline-post'),
document.createElement('div'));
}
});
timeLineItemClose.addEventListener('click', () => {
timeLineItem.classList.remove('is-open');
timeLineItem.closest('.row')
.classList
.remove('row-has-open-child');
// Destroy generated wrapper
const wrapper = timeLineItemClose.nextElementSibling;
wrapper.replaceWith(...wrapper.childNodes);
const top = sessionStorage.getItem('scroll-position');
if (top !== null) {
window.scrollTo(0, parseInt(top, 10));
}
sessionStorage.removeItem('scroll-position');
// Trigger scroll event to reveal timeline items not yet parallaxed into view
window.dispatchEvent(new CustomEvent('scroll'));
});
timeLineItemBottomClose.addEventListener('click', () => {
timeLineItemClose.click();
});
});
import '../../assets/js/parallax';
const { offsetTop, offsetBottom, offsetLeft } = require('../../assets/js/offset');
// eslint-disable-next-line no-underscore-dangle
const dataLayer = window._mtm || [];
const progressBar = document.querySelector('.js-progress-bar');
const decadeContainer = document.querySelector('.js-decade-container');
const decadeSections = document.querySelectorAll('.js-timeline-decade');
const firstDecade = document.querySelector('h2.godzilla');
const decades = document.querySelectorAll('h2.godzilla');
let triggerPoint = 0;
// Create decade links in timeline
function buildTimelineNavigation() {
[].forEach.call(decades, (decade) => {
const decadeLink = document.createElement('a');
const { textContent } = decade;
decadeLink.setAttribute('href', `#${textContent}`);
decadeLink.innerText = textContent;
decadeContainer.appendChild(decadeLink);
});
}
/* Set trigger point (vertical position in viewport)
for when a new decade should start being "active" */
function setTriggerPoint() {
triggerPoint = window.innerHeight * 0.5;
}
// Animate progress bar when user is scolling within the timeline
function animateProgressBar() {
let currentSection = 0;
let sectionIndex = 0;
const currentPosition = document.documentElement.scrollTop + triggerPoint;
const decadeLinks = document.querySelectorAll('.js-decade-container a');
let progressBarWidth = 0;
// Check if we are above the first section
if (currentPosition < offsetTop(firstDecade)) {
currentSection = 0;
progressBarWidth = 0;
progressBar.style.width = '0';
[].forEach.call(decadeLinks, (decadeLink) => {
decadeLink.classList.remove('is-reading');
});
} else {
// Otherwise add 1 to sectionIndex while scrolling;
[].forEach.call(decades, (decade) => {
const sectionTop = offsetTop(decade);
if (currentPosition >= sectionTop) {
currentSection = sectionIndex;
[].forEach.call(decadeLinks, (decadeLink) => {
decadeLink.classList.remove('is-reading');
});
decadeLinks[sectionIndex].classList.add('is-reading');
}
sectionIndex += 1;
});
}
// Calculate speed of the progressBar width while scrolling based on section height
const startPoint = decadeLinks[currentSection];
const startPointX = offsetLeft(startPoint);
const startPointWidth = startPoint.offsetWidth;
const startSection = decadeSections[currentSection];
const startSectionY = offsetTop(startSection);
const endSectionY = offsetBottom(startSection);
const sectionLength = endSectionY - startSectionY;
const scrollY = currentPosition - startSectionY;
const sectionProgress = scrollY / sectionLength;
progressBarWidth = startPointX + (startPointWidth * sectionProgress);
// Use result to animate progressbar
progressBar.style.width = `${progressBarWidth}px`;
}
function isInViewport(element) {
let top = element.offsetTop;
const height = element.offsetHeight;
while (element.offsetParent) {
element = element.offsetParent; // eslint-disable-line
top += element.offsetTop;
}
return (
top < (window.scrollY + window.innerHeight)
&& (top + height / 4) > window.scrollY
);
}
function decadeIsVisible() {
[].forEach.call(decadeSections, (decadeSection) => {
// Don't trigger Decade Visible too fast to prevent dataLayer.push
// to trigger while user is scrolled past a decade.
const timeOut = 1000;
const viewTimeout = setTimeout(() => {
if (isInViewport(decadeSection) && !decadeSection.classList.contains('is-in-view')) {
decadeSection.classList.add('is-in-view');
const decadeId = decadeSection.id;
dataLayer.push({
event: 'timeline',
eventInfo: {
category: 'timeline',
action: 'active_year',
label: decadeId,
},
});
} else if (!isInViewport(decadeSection)) {
decadeSection.classList.remove('is-in-view');
clearTimeout(viewTimeout);
}
}, timeOut);
});
}
// Run functions on page load
if (progressBar) {
buildTimelineNavigation();
setTriggerPoint();
animateProgressBar();
// Re-run functions on window events
window.addEventListener('resize', () => {
setTriggerPoint();
animateProgressBar();
});
window.addEventListener('scroll', () => {
animateProgressBar();
decadeIsVisible();
});
}
No notes defined.