Finished assignment 2.

public/css/common.css

@@ -3,7 +3,7 @@
 /* Webbfonter */
 @font-face {
     font-family: 'Journal';
-    src: url('journal-webfont.woff') format('woff');
+    src: url('../fonts/journal-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;
 }
@@ -24,7 +24,14 @@ h2 {
   color: #ffffff;
   text-shadow: 2px 2px 4px #000000;
 }
-
+h3 {
+  font-family: 'Montserrat', Sans-Serif;
+  color: #ffffff;
+  text-shadow: 2px 2px 4px #000000;
+}
+p, li {
+  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
+}
 /* Spacing i listan, mycket jobb för att lösa denna snyggt. */
 li:not(:last-child) { 
    margin-bottom: 3px;  
@@ -36,27 +43,20 @@ a {
   text-decoration: none;
   font-weight: bold;
 }
+a:visited {
+  color: #000044;
+}
+a:active {
+  color: #0000cc;
+}
 a:hover {
   color: #0000cc; 
 }
 
-/* Min stil för bilden. */
+/* Min stil för navigeringsknappar/länkar för små skärmar. */
-.portrait-image {
+.nav-button {
-  box-shadow: none;
-  border-radius: 3px;
-  transform: none;
-}
-
-/* Min stil för att rama in texten. */
-.presentation-box {
-  background-color: #dadada;
-  border-radius: 3px;
-  box-shadow: none;
-}
-
-/* Min stil för presentationstexten. */
-.presentation-text {
   font-family: "Source Sans Pro", sans-serif;
+  text-align: center;
 }
 
 /* Footer stilen */
@@ -65,6 +65,16 @@ a:hover {
   text-align: right;
 }
 
+/* Bildstilar */
+.image-left, .image-right, .image-center {
+  box-shadow: none;
+  border-radius: 3px;
+  transform: none;
+  
+  margin-left: auto;
+  margin-right: auto;
+}
+
 /* Definition av mitt rutnät för sidans layout. */
 /* Behållaren för cellerna, tabellen. */
 .grid-container {
@@ -74,6 +84,7 @@ a:hover {
   
   max-width: 900px; /* max-width of the layout */
   margin: 0 auto; /* center in the viewport */
+  padding: 15px;
   
   background-color: #dadada;
 }
@@ -87,28 +98,27 @@ a:hover {
 .header {
   grid-area: header;
 }
+.navigation {
+  grid-area: navigation;
+}
 .content {
   grid-area: content;
 }
-.content2 {
+
-  grid-area: content2;
-}
-.image {
-  grid-area: image;
-}
 .footer {
   grid-area: footer;
 }
 
-/* Standard layout, för små fönster/skärmar. */
+/* Navigationsboxen, tilldelning av områdesnamn. */
-.grid-container {
+.nav-element {
+  grid-area: nav-element;
+}
+
+/* Navigationsboxens layout, för små skärmar */
+.grid-container-navigation {
   grid-template-areas:
-   "header"
+   "nav-element nav-element nav-element nav-element";
-   "content"
+    padding: 10px;
-   "image"
-   "content2"
-   "footer";
-    padding: 0px;
     box-shadow: none;
 }
 
@@ -116,59 +126,72 @@ a:hover {
 @media only screen and (min-width: 850px) {
   body {
     /* Gratis bild från pexels, https://www.pexels.com/photo/brown-wooden-panel-347139/ */
-    background-image: url("bg.jpg");
+    background-image: url("../images/bg.jpg");
     background-attachment: fixed;
     background-position-y: bottom;
     background-repeat: repeat-x;
   }
   
-  .grid-container {
+  /* Min stil för navigeringsknappar/länkar för större skärmar. */
-    grid-template-areas:
+  .nav-button {
-     "header header header"
+    font-family: "Journal", sans-serif;
-     "content content image"
+    font-size: 32px;
-     "content2 content2 content2"
+    font-weight: lighter;
-     "footer footer footer";
+    text-align: center;
-    box-shadow: 10px 10px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    
-    padding: 15px;
+    /*background-color: #f3ee9e;*/
-    background-image: url("bg-paper-yellowed.jpg");
+    background-image: linear-gradient(to bottom right, #f3ee9e, #f4f1b9);
-    background-repeat: none;
-    background-size: cover;
-  }
-     
-  .image {
-    position: relative;
-    top: 40px;
-    left: -40px;
-  }
-  
-  /* Min coolare stil för bilden. */
-  .portrait-image {
-    box-shadow: 10px 10px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-    border-radius: 3px;
-    transform: rotate(-5deg);
-  }
-  
-  /* Min coolare stil för att rama in texten. */
-  .presentation-box {
-    background-color: #f3ee9e;
     border-radius: 3px;
     box-shadow: 10px 10px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     
+    margin: 0px 5px; /* y, x*/
     transform: rotate(-1deg);
+    padding: 5px;
+  }
+  .nav-button:hover {
+    box-shadow: 12px 12px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.12);
+    margin: -2px 5px; /* y, x*/
   }
   
-  /* Min coolare stil för presentationstexten. */
+  /* Bildstilar */
-  .presentation-text {
+  .image-left, .image-right, .image-center {
-    font-family: "Journal", sans-serif;
+    box-shadow: 10px 10px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-    font-size: 32px;
+    border-radius: 3px;
-    color: #212151;
+    
-    margin: 15px;
+    margin: 0px;
   }
   
-  /* Begränsande stil för extra postit lapp. */
+  .image-left {
-  .extra-note {
+    width: 375px;
-    max-width: 320px;
+    transform: rotate(-2deg);
-    transform: rotate(3deg);
+    margin-left: -25px;
+    
+    float: left;
+    display: block;
+    margin-right: 25px; /*auto - if not floating */
+  }
+  .image-right {
+    transform: rotate(2deg);
+    margin-right: -75px;
+    
+    float: right;
+    display: block;
+    margin-left: 25px; /*auto - if not floating */
+  }
+  .image-center {
+    transform: rotate(-0.5deg);
+    
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  
+  .paper {
+    box-shadow: 10px 10px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    padding: 15px;
+    background-image: url("../images/bg-paper-yellowed.jpg");
+    background-repeat: repeat;
+    background-size: 100%;
   }
 }
 

public/css/page-ethics.css

@@ -0,0 +1,25 @@
+@charset "UTF-8";
+
+
+/* Standard layout, för små fönster/skärmar. */
+.grid-container {
+  grid-template-areas:
+   "header"
+   "navigation"
+   "content"
+   "footer";
+    padding: 0px;
+    box-shadow: none;
+}
+
+/* Layout som väljs automatisk när det finns plats. */
+@media only screen and (min-width: 850px) {
+.grid-container {
+    grid-template-areas:
+     "header header header"
+     "navigation navigation navigation"
+     "content content image"
+     "footer footer footer";
+     padding: 15px;
+  }
+}

public/css/page-internet-history.css

@@ -0,0 +1,32 @@
+@charset "UTF-8";
+
+
+
+
+
+
+
+
+
+/* Standard layout, för små fönster/skärmar. */
+.grid-container {
+  grid-template-areas:
+   "header"
+   "navigation"
+   "content"
+   "footer";
+    padding: 0px;
+    box-shadow: none;
+}
+
+/* Layout som väljs automatisk när det finns plats. */
+@media only screen and (min-width: 850px) {
+.grid-container {
+    grid-template-areas:
+     "header header header"
+     "navigation navigation navigation"
+     "content content image"
+     "footer footer footer";
+     padding: 15px;
+  }
+}

public/css/page-presentation.css

@@ -0,0 +1,90 @@
+@charset "UTF-8";
+
+/* Min stil för bilden. */
+.portrait-image {
+  box-shadow: none;
+  border-radius: 3px;
+  transform: none;
+}
+
+/* Min stil för att rama in texten. */
+.presentation-box {
+  background-color: #dadada;
+  border-radius: 3px;
+  box-shadow: none;
+}
+
+/* Min stil för presentationstexten. */
+.presentation-text {
+  font-family: "Source Sans Pro", sans-serif;
+}
+
+/* Layout, tilldelning av områdesnamn. */
+.content2 {
+  grid-area: content2;
+}
+.image {
+  grid-area: image;
+}
+
+/* Standard layout, för små fönster/skärmar. */
+.grid-container {
+  grid-template-areas:
+   "header"
+   "navigation"
+   "content"
+   "image"
+   "content2"
+   "footer";
+    box-shadow: none;
+}
+
+/* Layout som väljs automatisk när det finns plats. */
+@media only screen and (min-width: 850px) {
+.grid-container {
+    grid-template-areas:
+     "header header header"
+     "navigation navigation navigation"
+     "content content image"
+     "content2 content2 content2"
+     "footer footer footer";
+     padding: 15px;
+  }
+     
+  .image {
+    position: relative;
+    top: 40px;
+    left: -40px;
+  }
+  
+  /* Min coolare stil för bilden. */
+  .portrait-image {
+    box-shadow: 10px 10px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    border-radius: 3px;
+    transform: rotate(-5deg);
+  }
+  
+  /* Min coolare stil för att rama in texten. */
+  .presentation-box {
+    /*background-color: #f3ee9e;*/
+    background-image: linear-gradient(to bottom right, #f3ee9e, #f4f1b9);
+    border-radius: 3px;
+    box-shadow: 10px 10px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    
+    transform: rotate(-1deg);
+  }
+  
+  /* Min coolare stil för presentationstexten. */
+  .presentation-text {
+    font-family: "Journal", sans-serif;
+    font-size: 32px;
+    color: #212151;
+    margin: 15px;
+  }
+  
+  /* Begränsande stil för extra postit lapp. */
+  .extra-note {
+    max-width: 320px;
+    transform: rotate(3deg);
+  }
+}

public/css/page-wordpress-installation.css

@@ -0,0 +1,25 @@
+@charset "UTF-8";
+
+
+/* Standard layout, för små fönster/skärmar. */
+.grid-container {
+  grid-template-areas:
+   "header"
+   "navigation"
+   "content"
+   "footer";
+    padding: 0px;
+    box-shadow: none;
+}
+
+/* Layout som väljs automatisk när det finns plats. */
+@media only screen and (min-width: 850px) {
+.grid-container {
+    grid-template-areas:
+     "header header header"
+     "navigation navigation navigation"
+     "content content image"
+     "footer footer footer";
+     padding: 15px;
+  }
+}

public/ethics.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="sv">
+<head>
+<meta charset="UTF-8">
+  <title>Webbutveckling 1 - Etik och integritet på nätet - Fredrick Amnehagen</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <meta name="description" content="Etik och integritet på nätet.">
+  <meta name="author" content="Fredrick Amnehagen">
+
+  <link rel="icon" href="favicon.ico">
+  <link rel="icon" href="favicon.svg" type="image/svg+xml">
+  <link rel="apple-touch-icon" href="apple-touch-icon.png">
+
+  <link rel="stylesheet" href="css/common.css?v=1.0">
+  <link rel="stylesheet" href="css/page-ethics.css?v=1.0">
+  
+  <!--  Web fonts -->
+  <link href="https://fonts.cdnfonts.com/css/source-sans-pro" rel="stylesheet">
+  <link href="https://fonts.cdnfonts.com/css/montserrat" rel="stylesheet">
+  <link href="https://fonts.cdnfonts.com/css/journal" rel="stylesheet">
+  
+  <!--  dev voodoo magic line to refresh the page every 5 seconds. Probably very old. -->
+  <!--  <meta http-equiv="refresh" content="10"> -->
+</head>
+<body>
+  <div class="grid-container paper">
+    <header class="grid-item header">
+      <h1>Webbutveckling 1</h1>
+    </header>
+    
+    <nav class="grid-item navigation grid-container-navigation">
+      <a href="index.html"><div class="grid-item nav-element nav-button">Presentation</div></a>
+      <a href="internet-history.html"><div class="grid-item nav-element nav-button">Internets historia & samhällspåverkan</div></a>
+      <a href="ethics.html"><div class="grid-item nav-element nav-button">Etik och integritet på nätet</div></a>
+      <a href="wordpress-installation.html"><div class="grid-item nav-element nav-button">Installation av Wordpress</div></a>
+    </nav>
+  
+    <section class="grid-item content">
+      <h2>Etik och integritet på nätet</h2>
+      <p>Unga på internet, fall 1: Att bara våga prata på nätet</p>
+      <p>MSN, det var länge sedan. När jag gick gymnasiet med IT-inriktning 2007-2009, så fick alla elever låna varsin laptop år 2. Klassföreståndaren/mentorn var väldigt inne på att arbeta digitalt med uppgifter och inlämningar. En dag frågade ett par elever om de fick ta sovmorgon och vara med på hans lektion hemifrån via skype (video, ljud och chatt) samt google docs. Detta provades och fungerade bra i ett par veckor. Tills rektorn fick höra detta och genast satte stopp för det. <i>...nu är det standard</i>.</p> 
+      <p>Det påminner lite om Fredrik och Sven. Just i deras fall fungerade det, men detta verkar har utspelat sig under samma tid; <i>eftersom att MSN Messenger var populärt då och inte finns längre</i>. Även om det fungerar i enskilda fall så behövs studier och godkännanden. Det talades ofta på nyheterna om ungdomar som utnyttjats av vuxna på nätet. Nätet var fortfarande nåt nytt, fluffigt och okänt för många. <i>Många hade fortfarande modem och inte uppgraderat till ADSL eller fiber</i>.</p>
+      <p>Att ha kontakt med sina elever via kanaler där eleverna finns tycker jag är helt rimligt. Jag försöker aktivt bjuda in lärare till chattgrupper som är starkt kopplade till skolan. Men det finns ingen förväntan att de ska finnas tillgängliga utanför arbetstider. Sven ändrade sitt beteende innan det stoppades, till att bara vara tillgänglig under arbetstid. Det känns korrekt i dagens samhälle, han tänkte helt rätt.</p>
+      <p>Det framgår inte tydligt i dokumentet, men om man läser mellan raderna så är det direktchatt mellan Sven och Fredrik. Det kan kännas lite känsligt då allt som skrivs är privat. Idag använder många Discord, ett chattsystem där man kan skapa en gruppchatt med flera kanaler. Flera kan läsa vad som skrivs. Många använder detta även i studier. Det går att skapa virtuella grupprum där små grupper chattar. Det går även att låsa de små gruppkanalerna till specifika elever som tillhör den gruppen. <i>På en distanskurs i 3D modellering så använde läraren Discord på detta sätt. Han valde det programmet för att det var troligt att elever som går spelutvecklingskurser troligen använder Discord.</i></p>
+      <p>En av kommentarerna till fallet beskriver att Fredrik kan tränas i att interagera med sina skolkamrater genom de digitala verktygen. Det låter bra, det kunde göras på den tiden och nuförtiden med liknande verktyg. <i>...Dock så hade alla inte laptop eller smartphone på den tiden. En datasal skulle bokas, då klassrummen precis fått mer än en dator per rum uppgraderad till Windows XP</i>. Jag tror att det hade släppt lite om han fick sitta i mindre grupp, och prova olika medlemmar för att testa personkemin.</p>
+    </section>
+  
+    <footer class="grid-item footer">
+      <p class="footer-text">&copy; <a href="mailto:fredrick@amnehagen.com">Fredrick Amnehagen</a> 2024-04-06</p>
+    </footer>
+  </div>
+</body>
+</html>

public/index.html

@@ -2,7 +2,7 @@
 <html lang="sv">
 <head>
 <meta charset="UTF-8">
-  <title>Webb1 - Presentation - Fredrick Amnehagen</title>
+  <title>Webbutveckling 1 - Presentation - Fredrick Amnehagen</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <meta name="description" content="Presentation av mig.">
@@ -12,7 +12,8 @@
   <link rel="icon" href="favicon.svg" type="image/svg+xml">
   <link rel="apple-touch-icon" href="apple-touch-icon.png">
 
-  <link rel="stylesheet" href="styles.css?v=1.0">
+  <link rel="stylesheet" href="css/common.css?v=1.0">
+  <link rel="stylesheet" href="css/page-presentation.css?v=1.0">
   
   <!--  Web fonts -->
   <link href="https://fonts.cdnfonts.com/css/source-sans-pro" rel="stylesheet">
@@ -23,10 +24,17 @@
   <!--  <meta http-equiv="refresh" content="10"> -->
 </head>
 <body>
-  <div class="grid-container">
+  <div class="grid-container paper">
     <header class="grid-item header">
-      <h1>Webb1 - Presentation</h1>
+      <h1>Webbutveckling 1</h1>
     </header>
+    
+    <nav class="grid-item navigation grid-container-navigation">
+      <a href="index.html"><div class="grid-item nav-element nav-button">Presentation</div></a>
+      <a href="internet-history.html"><div class="grid-item nav-element nav-button">Internets historia & samhällspåverkan</div></a>
+      <a href="ethics.html"><div class="grid-item nav-element nav-button">Etik och integritet på nätet</div></a>
+      <a href="wordpress-installation.html"><div class="grid-item nav-element nav-button">Installation av Wordpress</div></a>
+    </nav>
   
     <section class="grid-item content">
       <h2>Presentation</h2>
@@ -44,7 +52,7 @@
     </section>
     
     <section class="grid-item image">
-      <img src="fredrick.jpg" class="portrait-image"/>
+      <img src="images/fredrick.jpg" class="portrait-image"/>
       
       <div class="presentation-box extra-note">
         <div class="presentation-text">
@@ -62,20 +70,20 @@
       <h2>Arbetsprocessen</h2>
       
       <ul>
-        <li>Arbetade i <a href="https://www.gnu.org/gnu/linux-and-gnu.en.html">GNU/Linux</a>, <a href="https://www.debian.org/">Debian 12 - Bookworm</a>.</li>
+        <li>Arbetade i <a target="_blank" href="https://www.gnu.org/gnu/linux-and-gnu.en.html">GNU/Linux</a>, <a target="_blank" href="https://www.debian.org/">Debian 12 - Bookworm</a>.</li>
-        <li>Började skriva i <a href="https://www.gnu.org/software/emacs/">emacs</a>.</li>
+        <li>Började skriva i <a target="_blank" href="https://www.gnu.org/software/emacs/">emacs</a>.</li>
-        <li>Utgick från exempel i på <a href="https://www.w3schools.com/">w3schools.com</a>.</li>
+        <li>Utgick från exempel i på <a target="_blank" href="https://www.w3schools.com/">w3schools.com</a>.</li>
-        <li>Installerade <a href="https://www.eclipse.org/">eclipse</a> med <a href="https://eclipse.dev/webtools/ws/">webbtillägg</a> för att skriva koden med syntax highlighting.</li>
+        <li>Installerade <a target="_blank" href="https://www.eclipse.org/">eclipse</a> med <a target="_blank" href="https://eclipse.dev/webtools/ws/">webbtillägg</a> för att skriva koden med syntax highlighting.</li>
-        <li>Skapade favikoner i <a href="https://www.gimp.org/">gimp</a> och <a href="https://inkscape.org/">inkscape</a>.</li>
+        <li>Skapade favikoner i <a target="_blank" href="https://www.gimp.org/">gimp</a> och <a target="_blank" href="https://inkscape.org/">inkscape</a>.</li>
-        <li>Skapade porträtt i <a href="https://www.gimp.org/">gimp</a>, plockade bakgrundfärgen med den digitala pupletten.</li>
+        <li>Skapade porträtt i <a target="_blank" href="https://www.gimp.org/">gimp</a>, plockade bakgrundfärgen med den digitala pupletten.</li>
-        <li>Öppnade min <a href="https://forgejo.org/">Forgejo</a> server och skapade <a href="https://git-scm.com/">git</a> projektet, sedan skickade jag upp projektet <a href="https://forgejo.loopaware.com/Webb1">här</a>.</li>
+        <li>Öppnade min <a target="_blank" href="https://forgejo.org/">Forgejo</a> server och skapade <a target="_blank" href="https://git-scm.com/">git</a> projektet, sedan skickade jag upp projektet <a target="_blank" href="https://forgejo.loopaware.com/Webb1">här</a>.</li>
-        <li>Arbetade hård med layouten, provade gammal tabell, float, flexbox och landade på css grid.</li>
+        <li>Arbetade hårt med layouten, provade gammal tabell, float, flexbox och landade på css grid.</li>
         <li>Stajlade texterna med fonter, färger och effekter.</li>
       </ul>
     </section>
   
     <footer class="grid-item footer">
-      <p class="footer-text">&copy; <a href="mailto:fredrick@amnehagen.com">Fredrick Amnehagen</a> 2024-03-19</p>
+      <p class="footer-text">&copy; <a href="mailto:fredrick@amnehagen.com">Fredrick Amnehagen</a> 2024-04-06</p>
     </footer>
   </div>
 </body>

public/internet-history.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="sv">
+<head>
+<meta charset="UTF-8">
+  <title>Webbutveckling 1 - Internets historia & samhällspåverkan - Fredrick Amnehagen</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <meta name="description" content="Internets historia & samhällspåverkan.">
+  <meta name="author" content="Fredrick Amnehagen">
+
+  <link rel="icon" href="favicon.ico">
+  <link rel="icon" href="favicon.svg" type="image/svg+xml">
+  <link rel="apple-touch-icon" href="apple-touch-icon.png">
+
+  <link rel="stylesheet" href="css/common.css?v=1.0">
+  <link rel="stylesheet" href="css/page-internet-history.css?v=1.0">
+  
+  <!--  Web fonts -->
+  <link href="https://fonts.cdnfonts.com/css/source-sans-pro" rel="stylesheet">
+  <link href="https://fonts.cdnfonts.com/css/montserrat" rel="stylesheet">
+  <link href="https://fonts.cdnfonts.com/css/journal" rel="stylesheet">
+  
+  <!--  dev voodoo magic line to refresh the page every 5 seconds. Probably very old. -->
+  <!--  <meta http-equiv="refresh" content="10"> -->
+</head>
+<body>
+  <div class="grid-container paper">
+    <header class="grid-item header">
+      <h1>Webbutveckling 1</h1>
+    </header>
+    
+    <nav class="grid-item navigation grid-container-navigation">
+      <a href="index.html"><div class="grid-item nav-element nav-button">Presentation</div></a>
+      <a href="internet-history.html"><div class="grid-item nav-element nav-button">Internets historia & samhällspåverkan</div></a>
+      <a href="ethics.html"><div class="grid-item nav-element nav-button">Etik och integritet på nätet</div></a>
+      <a href="wordpress-installation.html"><div class="grid-item nav-element nav-button">Installation av Wordpress</div></a>
+    </nav>
+  
+    <section class="grid-item content">
+      <h2>Internets historia & samhällspåverkan</h2>
+      <p>Från röksignaler högt över träden, till telegrafkablar längs med järnvägen och genom havet atlanten, det första telefonsamtalet, radiosändningar genom fredstider, landar vi nu i tumultet och oron kring krigstiderna i mitten av 1900-talet. Mekaniska miniräknare ersätts av elektronrör och sedan transistorer. Det är här vi finner datorer så pass små att det kan finnas mer än en handfull i världen. Kommunikationsprotokoll och system utvecklas för interkommunikation mellan datorcentralerna, däribland Arpanet vår föregångare till vad vi idag kallar internet.</p>
+      <p>Värt att nämna är att det fanns en arbetsroll som kallades computer, det var duktiga matematiker som arbetade i stora kontorslokaler som fick in information och genomförde beräkningar som de skickade tillbaka till beställarna. Detta användes bl.a av NASA innan digitala varianter ersatte dem.</p>
+      <p><a href="https://commons.wikimedia.org/wiki/File:Commodore_64_with_the_external_power_supply_and_Commodore_1530_%28C2N%29_Datasette.jpg" target="_blank"><img class="image-left" src="images/terminal.jpg" alt="Commodore 64"/></a> <!-- https://www.google.com/url?sa=i&url=https%3A%2F%2Fcommons.wikimedia.org%2Fwiki%2FFile%3ACommodore_64_with_the_external_power_supply_and_Commodore_1530_%2528C2N%2529_Datasette.jpg --> Vi snabbspolar fram ett par decennier och datorer blev miniatyrer av sina föregångare. De blev så smarta, billiga och lättanvända att gemene man kunde ta ett lån på banken och införskaffa ett paket med en mikrodator med tillbehör såsom manualer, mjukvara och joystick. Vi är nu i 80-talet och musen var inte standardiserad än. Vilket var rimligt då många möttes av en terminal  när datorn startat upp, inte ett attraherande grafiskt gränssnitt. Kasettband byttes på skolgårdar, affärsmän bar runt på plastiga disketter i kavajen, personsökare i skärpet och i vissa fall en mobil telefon i bilen. <i>Notera särskrivningen</i>.</p>
+      <p>Under denna tid blev datorn någonting folk kände till och många hade en i hemmet. Marknadsförd som läxhjälp för unga, receptbok för hemmafruar och mannen i huset kunde hämta hem dagens börssiffror eller skriva sin nästa bok. Här började det bli vanligt att de familjer som hade båda dator och telefonabonnemang även införskaffade en liten skrikande låda, vars uppgift var att ringa upp andra datorer eller datorcentraler för att utbyta information. Detta skedde genom telefonlinan via signalmodulering, en samling klick, tjut och brus som datorerna tolkade som ettor och nollor enligt diverse protokoll.</p>
+      <p>Internet under denna tid var utformat som en “hämta-hem”-modell. Om du körde ett program som visade dig de senaste börssiffrorna, så öppnade datorn ett samtal, ofta direkt till en serverdator i andra änden, som i sin tur besvarade förfrågan med blippande och bloppande. Sedan läggs samtalet automatiskt på och siffrorna visas på skärmen. Det fanns även BBS:er, Bulletin Board System. System som påminner om dagens chatsystem eller forum. Där användare kan koppla upp sig och hänga kvar. <i>Detta orsakade enorma telefonräkningar</i>.</p>
+      <p>Många arbeten förändrades. Böcker och nyheter skrevs inte längre i huvudsak på plignande skrivmaskiner, utan nu använder datorterminaler som i vissa fall gav användarna solbränna från strålningen. <i>Ett exempel kan ses i 90-talets Lois and Clark, Stålmannen. Fiktivt, men inspirerat av verkligheten några år tidigare</i>. Information spreds nu även genom datorsystem över hela världen.</p>
+      <p>Genom 90-talet såg vi många innovationer, så som laptops, mobiltelefoner, handdatorer och framförallt relevant för oss, Windows 95 och Internet Explorer. <i>Ja det fanns såklart andra system såsom Netscape, föregångare till Mozilla Firefox, men vi håller och till det allmänna</i>.</p>
+      <p>Nu kunde vanligt folk förstå datorerna, knuffa runt en plastklump innehållande en kula för att förflytta en ikon på skärmen, tryck ner knappen på klumpen för att klicka. Internet gick i folkmun, och Internet Explorer följde med Windows 95. Många som köpte dator med Microsoft Windows 95, köpte även till ett Internet abonnemang med modem. Abonnemaget och modemet var nu anpassat för att minska telefonräkningarna lite grann, då telefonbolaget nu hade en mellanhandsserver för att komma åt resten av världen. Barn och vuxna världen över vande sig vid att läsa nyheter eller söka på bilder efter kl.19 på kvällen, då det var billigare. Internet var inte längre specialanpassade gränssnitt för specifika datorer, nu fanns det HTML, Hypertext Markup Language, ett språk som webbläsaren Internet Explorer, med flera, tolkar om till en layout med text och bild på din skärm. En del element var klickbara och länkade vidare till andra platser på cyberspace, såkallade <i>hyperlänkar</i>.</p>
+      <p>I början av 2000-talet pratar gubbar på TV om det nya webben 2.0, där det inte längre är du som måste anstränga dig för att hitta informationen. Rollerna är ombytta och informationen letar efter dig. Detta handlar till stor del om marknadsföring såklart, men även och hur sökmotorer visar dig relevanta resultat baserat för så många kriterier som möjligt. Cookies, som bl.a kan användas till spårning är nu standard och sökmotorerna älskar att läsa dem och luska ut vad du har för intressen.</p>
+      <p>Den vida ethern används nu för att vara social med sina vänner, lämna in läxor och film börjar spridas. Epost, något som funnits med i flera former sedan internets begynnelse är nu standardsättet vi kommunicerar digitalt i världen. Gränsen mellan handdatorer och telefoner försvinner och de är nu såpass smarta att de kan skicka text, bild och ringa videosamtal.</p>
+      <p><a href="https://www.youtube.com/watch?app=desktop&v=KjPZoQ_1kE8" target="_blank"><img class="image-right" src="images/wap.jpg" alt="Motorolz Razr WAP web site, google"/></a> <!-- https://www.youtube.com/watch?app=desktop&v=KjPZoQ_1kE8 --> En speciell typ av webben utvecklades för dessa smarta telefoner kallas för WAP, <i>Wireless Application Protocol</i>. Det går nu utan problem att läsa optimerad variant av Expressen.se på bussen med en 3 tum stor färgskärm.<br /><br />
+      Smarta telefoners skärmar blev större, lagringskapacitet ökade, touch system gick från resistiv (nagel/penna) till capacitiv (finger). Tillverkare provade olika nischar för sina telefoner. Nokia gick samman med kamera-tillverkare och skapade bra kameratelefoner samt en speltelefon. Eriksson och Sony gick samman och skapade media-orienterade telefoner. Diverse lösningar för tangentbord provades. En gemensam standard växte fram. En gemensam uppsättning funktioner och egenskaper till grund för kommande telefoner. Program för dessa maskiner kallas nu för appar.<br /><br />
+      Apple låg inte och sov, de såg var marknaden var påväg och skyndade sig att släppa en Ipod touch med modem, telefoni och SMS-funktion. Många funktioner saknades. Enorma belopp spenderades på marknadsföring under flera år, och efter att de kommit ikapp resten av marknaden i funktioner, så blev Apple Iphone 4 en folktelefon och standarden för smarta telefoner.</p>
+      <p>Webben för personen på språng, eller lounge’ande på soffan har för länge sedan glömt WAP och kör nu internet i sin fulla glory. Många hemsidor bråttas med interoperabiliteten mellan olika skärmstorlekar och orienteringar samt inputsystem mellan mobil och desktop. Hipsters försöker använda typsnitt som “ser bra ut på min dator”, men då de fattas i många andra maskiner, ser kontiga ut.</p>
+      <p>Telefonoperatörer säljer tilläggstjänster såsom 30-dagar fria meddelanden i Microsoft’s chatt program, [MSN, Windows Live, Live!] Messenger, <i>inte Meta/Facebook Messenger</i>.</p>
+      <a href="https://cjay.cc/2009/11/%E4%B8%8B%E8%BC%89-windows-live-messenger-%E6%89%8B%E6%A9%9F%E7%89%88-%E9%81%A9%E7%94%A8-s60-5-0-%E8%A7%B8%E6%8E%A7%E7%89%88/" target="_blank"><img class="image-center" src="images/messenger.jpg" alt="Live Messenger på smartphone, symbian eller liknande"/></a> <!-- https://www.google.com/url?sa=i&url=https%3A%2F%2Fcjay.cc%2F2009%2F11%2F%25E4%25B8%258B%25E8%25BC%2589-windows-live-messenger-%25E6%2589%258B%25E6%25A9%259F%25E7%2589%2588-%25E9%2581%25A9%25E7%2594%25A8-s60-5-0-%25E8%25A7%25B8%25E6%258E%25A7%25E7%2589%2588%2F&psig=AOvVaw2yI6FD4WcbtmLUmrfXVmvU&ust=1712525104147000&source=images&cd=vfe&opi=89978449&ved=0CBQQjhxqFwoTCPj_3LfDroUDFQAAAAAdAAAAABAE -->
+      <p>Skolor förbjuder telefoner i klassrummen. Internet, telefoner och den digitala världen blir problem för unga. Nätmobbning blir ett nytt område för oss att hantera.</p>
+      <p>Mot slutet av 2000-talet så ser vi standardiseringen av ett nytt format för att konsumera internet och media, surfplattan. En produkt som långsamt utvecklats i bakgrunden med ånga namn, UMPC, ultra portabel PC, tablet, slate osv. I många fall bantade datorer som kör Unix, Dos, Windows eller liknande för specifika ändamål, en del av dem utan tangentbord.</p>
+      <p>Utvecklingen av denna enhet mellan en desktop/laptop och en smart telefon har landat på en standard. En stor touch-skärm, som imiterar den smarta telefonen’s gränssnitt. Nu släpper Apple sin variant, Apple Ipad och många andra tillverkare har sina varianter som kör ett linux 2.6-baserat system från google som blir allt mer populärt, Android. <i>Inte GNU/Linux, det finns inget eller ytterst lite GNU-mjukvara, Android använder Linux kernel</i>.</p>
+      <p>Webbutvecklare har skäggstubb, pappamage och går med solglasögon inomhus för att dölja sina röda ögon, i kavajen har de burken med magsårspiller och en halvfull fickplunta med vuxensaft. När vi byter decennium så standardiseras nya HTML5. Adobe Flash, tidigare shockwave osv, förklaras som döende och animationer kan nu skrivas direkt i webbkoden. Video skall standardiseras med bara ett fåtal webbläsare stödjer de nya funktionerna. Allt är i luften, skrivbord välts, folk flyr, nu har vi för många hårdvarukrav-, skärm- och input-system (alltså plattformar) att hantera. Responsiv webbdesign växer fram. Vi kan nu i vår CSS-kod skriva olika snuttar för olika plattformar. Utvecklarna får tid att sova, klättra ner från tagreglarna och komma tillbaka från intensivvården.</p> 
+      <p>Nu är det 2014. HTML5 är normen. Det är nu vanligare att man har en Iphone 4 eller bättre i i fickan än en egen dator världen över, <i>jag inkluderar såklart Afrika, phone 4 är gammal för västvärlden</i>. Webbutvecklare får fortfarande bråttas med en del undantag i äldre webbläsare, såsom Internet Explorer från 2003, men det är nu hanterbart. Kodramverk såsom Laravel, Bootstrap och diverse javascript system såsom Ajax var nu standard. Webben var multitrådad som standard, om programmerarna tillät det, <i>synkron vs. asynkron programmering i Javascript</i>. Detta gjorde det möjligt att optimera för de nu vanliga multi-kärninga processorerna vars arkitektur nu funnit mobila hem.</p>
+      <p>Sociala medier driver internet. Facebook finns förinstallerat i telefoner, Windows har en inbyggt tangentborsgenväg för LinkedIn. Youtube finns i din smarta TV.</p>
+      <p>Under åren fram till nutid kom det nya webbtekniker som ersatt de gamla, främst uppdateringar och optimeringar inga riktiga vidspridda paradigm-skiften förrän nu, 2024.</p> 
+      <p>Det är något nytt på gång. Mänskligheten övervakas konstant av alla system runt oss. Folk köper avlyssningsmaskiner som marknadsförs som enheter som förenklar din vardag. Du ber din digitala röstassistens snällt att släcka ljuset i garaget, din villadörr känner igen ditt ansikte och låser upp. AI tränas på all tillgänglig data, laglig som olaglig. Webbredaktioner använder allt med AI-assistans i sin utveckling och skrivande.</p>
+      <p>Virtual Reality, VR, AR och samlingsnamnet XR finns idag i sladdlösa mobila headset. De är fortfarande lite klumpiga. Många använder dessa dagligen för att logga in i t.ex VR Chat för att besöka sina favoritmiljöer och umgås med vänner. Det finns många initiativ kring XR, det kommer i vågor med några års mellanrum.</p>
+      <p>Bakom kulisserna så växer nya webbtekniker fram, det har tagit många år och kommer att ta många till, men snart landar vi på Web 3.0. Där krypto och blockchain är dagens buzzwords.</p>
+      <p>För att skapa en hemsida på Webben 3.0 så behöver du precis som vanligt, domännamn och hosting.</p>
+      <p>För domännamn har du handshake, HNS. Ett decentraliserat namn och certifikatsystem. Alltså du kan köpa domännamn från dem, verifiera ditt ägarskap av domänen, skapa TLS-certifikat samt använda deras DNS system. Se <a href="https://www.hdns.io/" target="_blank">https://www.hdns.io/</a> och <a href="https://handshake.org/" target="_blank">https://handshake.org/</a> för mer info.</p>
+      <p>Du behöver såklart ha lagring, där har du IPFS/Filecoin FIL, Skynet SIA samt AIOZ.</p>
+      <p>Filecoin och IPFS är system för decentraliserad lagring av filer av alla storlekar. Många NFT:er och smartkontrakt sparas på IPFS.</p>
+      <p>Skynet är bra för backup, förutsatt att servrarna finns uppe när du behöver hämta backuppen.</p>
+      <p>AIOZ är från början utformat för att verka som ett decentraliserat content-delivery-system, dCDN. Bra för en del filer i webbsidor, vilka filer man lägger på ett CDN borde jag lära mig under kursens gång. Jag har förstått det som bilder, ljud och video, men också i vissa fall javascript och css. I nyare versioner pratar de mycket om AI, men det är bara ett sidospår. Det kommunicerar på liknande sätt som Bittorrent, alla servrar har chinks av filer, och alla hjälps åt att dela. Det finns en youtube-liknande demo, där tittare delar med sig av chunks de redan  hämtat hem och ligger kvar i cachen.</p>
+      <p>Redan nu har vi alltså ett system för att öppna filer i Web 3.0, men nu kommer det intressanta. Compute.</p>
+      <p>Akash är en teknik för att använda GPU-resurser och Holo är en decentraliserad teknik för att använda CPU-resurser från flera noder samtidigt. Akash är inte helt anonymt mellan de som säljer och köper resurserna, pga content lagar. En GPU-ägare behöver veta vad som processas enligt någon lag någonstans. Men Holo är anonymt och är ett bra sätt att generera hemsidan som skickas till användaren t.ex.</p>
+      <p>När det kommer till databassystem så blir det aningen knepigare. En del tycker att blockchain-tekniken kan användas som databas, en del tycker att man borde köra en SQL-databasmotor decentraliserat över flera anonyma noder med krypterad data. Här är en artikel som nämner några tekniker: <a href="https://www.0xscope.com/blog-posts/web3-data-industry-spotlight-web3-database-companies" target="_blank">https://www.0xscope.com/blog-posts/web3-data-industry-spotlight-web3-database-companies</a> och <a href="https://medium.com/@gelembjuk/oursql-tool-to-replicate-mysql-databases-using-blockchain-5ae509636435" target="_blank">https://medium.com/@gelembjuk/oursql-tool-to-replicate-mysql-databases-using-blockchain-5ae509636435</a>.</p>
+      <p>Web 3.0 är den decentraliserade webben. Där datan inte bor på en specifik server, och användaren betalar alla i hela kedjan. Det är moget nog att användas idag, men det krävs en del installation och inställning. T.ex så måste du lägga till handshake’s DNS server i din lista på DNS servrar, i din router eller relevant maskin.</p>
+      <p>Avslutande så vill jag även nämna att vi i vissa fall kallar internet för <i>World Wide Web</i>, WWW.</p>
+    </section>
+  
+    <footer class="grid-item footer">
+      <p class="footer-text">&copy; <a href="mailto:fredrick@amnehagen.com">Fredrick Amnehagen</a> 2024-04-06</p>
+    </footer>
+  </div>
+</body>
+</html>

public/wordpress-installation.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="sv">
+<head>
+<meta charset="UTF-8">
+  <title>Webbutveckling 1 - Installation av Wordpress - Fredrick Amnehagen</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <meta name="description" content="Installation av Wordpress.">
+  <meta name="author" content="Fredrick Amnehagen">
+
+  <link rel="icon" href="favicon.ico">
+  <link rel="icon" href="favicon.svg" type="image/svg+xml">
+  <link rel="apple-touch-icon" href="apple-touch-icon.png">
+
+  <link rel="stylesheet" href="css/common.css?v=1.0">
+  <link rel="stylesheet" href="css/page-wordpress-installation.css?v=1.0">
+  
+  <!--  Web fonts -->
+  <link href="https://fonts.cdnfonts.com/css/source-sans-pro" rel="stylesheet">
+  <link href="https://fonts.cdnfonts.com/css/montserrat" rel="stylesheet">
+  <link href="https://fonts.cdnfonts.com/css/journal" rel="stylesheet">
+  
+  <!--  dev voodoo magic line to refresh the page every 5 seconds. Probably very old. -->
+  <!--  <meta http-equiv="refresh" content="10"> -->
+</head>
+<body>
+  <div class="grid-container paper">
+    <header class="grid-item header">
+      <h1>Webbutveckling 1</h1>
+    </header>
+    
+    <nav class="grid-item navigation grid-container-navigation">
+      <a href="index.html"><div class="grid-item nav-element nav-button">Presentation</div></a>
+      <a href="internet-history.html"><div class="grid-item nav-element nav-button">Internets historia & samhällspåverkan</div></a>
+      <a href="ethics.html"><div class="grid-item nav-element nav-button">Etik och integritet på nätet</div></a>
+      <a href="wordpress-installation.html"><div class="grid-item nav-element nav-button">Installation av Wordpress</div></a>
+    </nav>
+  
+    <section class="grid-item content">
+      <h2>Installation av Wordpress</h2>
+      <p>Jag ville sätta upp en Wordpress server så korrekt som möjligt. Med TLS-kryptering från Let’s encrypt och automatiska systemuppdateringar, inte automatiska Wordpress-uppdateringar. Linux skulle vara i grunden och MariaDB istället för MySQL för att den är mera öppen och fri.</p>
+      <p>Ett av mina extraknäck är serverunderhåll, så jag har snubblat in på flera områden tidigare och snappat upp lite här och var. Dessutom så går jag Linux Steg 2 på Valla parallelt med denna webbkurs.</p>
+      <p>Efter att ha lagt mycket tid och följt många guider samt fyllt en wiki med anteckningar, så fick jag fram följande arbetsflöde:</p>
+      
+      <h3>Steg 1, en server</h3>
+      <ul>
+        <li>Installerade Proxmox som är baserat på Debian. Det är en hypervisor för virtuella maskiner med KVM/QEMU och containers med LXC.</li>
+        <li>Configurerade automatiska säkerhetsuppdateringar och säkrade brandväggen.</li>
+        <li>Skapade en Debian 12 mall i en LXC.</li>
+        <li>Klonade mallen och skapade en MariaDB server med åtkomst endast från LAN.</li>
+        <li>Klonade mallen och skapade en webbserver med Apache2.
+          <ul>
+            <li>Installerade och konfigurerade PHP 8.3 med FPM istället för den gamla modulen för PHP i Apache. FPM är bättre för multitrådade maskiner, alltså alla moderna maskiner.</li>
+          </ul>
+        </li>
+        <li>Klonade Debian 12 mallen en tredje gång för att skapa en maskin som hanterar TLS certifikaten.
+          <ul>
+            <li>Installerade Certbot och Let’s Encrypt certifikat med automatisk förnyelse.</li>
+          </ul>
+        </li>
+        <li>Automatiserade backuper enligt veckoshema mot mitt NAS.
+          <ul>
+            <li>Alla tre LXC:er har varsin backup av både hela containern och filerna samt databasen. Gamla backupper rensas automatiskt genom schemalagda bash-script.</li>
+          </ul>
+        </li>
+      </ul>
+      
+      <h3>Steg 2, domännamn</h3>
+      <ul>
+        <li>Köpte en domän på Loopia.</li>
+        <li>Pekade om namnservrarna till Cloudflare.</li>
+        <li>Konfigurerade domänen med DNS i Cloudflare.</li>
+        <li>Ställde in dynamisk DNS i min router för domännamnet och Cloudflare. DNS får nu automatisk den aktuella IP-adressen enligt schemalagd rutin.</li>
+        <li><i>Dagdrömmande om egen SMTP server för att skicka mejl från mina egna system...</i></li>
+      </ul>
+      
+      <h3>Steg 3, eget webbhotell</h3>
+      <ul>
+        <li>Pekade om portarna 80 och 443 till min webbserver LXC.</li>
+        <li>Skapade en Virtual Host i Apache för hemsidan, för både port 80 och 443. Port 80 omdirigerar trafiken till 443 med HTTPS via rewrite.</li>
+        <li>Körde certbot kommando för att skapa certifikat för domänen. Ett kommando som går via Cloudflare API istället för att använda apache-metoden som annars är vanlig. Det går då att använda certifikatet till mer än bara hemsidan.</li>
+      </ul>
+      
+      <h3>Steg 4, installera wordpress</h3>
+      <ul>
+        <li>Föjde denna guide och diverseforumposter för att installera Wordpress, <a href="https://developer.wordpress.org/advanced-administration/before-install/" target="_blank">https://developer.wordpress.org/advanced-administration/before-install/</a>. Den officiella dokumentationen för att installera Wordpress på egen server.</li>
+        <li>Skapade databasen med charset utf8mb4 och collation utbmb4_unicode_ci, för att få korrekt sortering på alla språk mot en minimal hit mot prestandan. Om man väljer en collation med sitt språk eller general så kan sortering gå fortare, men jag anser att det är bättre att optimera andra aspekter av applikationen, databasarkitekturen samt konfigurationen av databassystemet.</li>
+        <li>Skapade en användare med fulla rättigheter för wordpress, men planerar att minsta rättigheterna i framtiden för att bättre på säkerheten. Denna artikel pratar om hur man kan bättra på säkerheten i Wordpress-installationer: <a href="https://wordpress.stackexchange.com/a/129489" target="_blank">https://wordpress.stackexchange.com/a/129489</a>.</li>
+        <li>Hämtade tar-filen till webbsidans mapp, packade upp.</li>
+        <li>Kopierade konfigurationsmallen och matade in databasuppgifterna samt secrets avsnittet.</li>
+        <li>Öppnade wordpress sidan i min webbläsare och följde guiden för att ställa in sidans namn och användaruppgiter.</li>
+      </ul>
+      
+      <p>Nu är jag redo att komma vidare. Jag hade helt missat att vi skulle skriva uppsats och inte bara installera Wordpress. <i>...Mycket att tänka på som småbarnspappa till flera barn och ekonom på ett åkeri.</i></p>
+    </section>
+  
+    <footer class="grid-item footer">
+      <p class="footer-text">&copy; <a href="mailto:fredrick@amnehagen.com">Fredrick Amnehagen</a> 2024-04-06</p>
+    </footer>
+  </div>
+</body>
+</html>