1 of 27

Webprojekt

Lektion 01: Wer bin ich und was mache ich eigentlich hier?

2 of 27

Agenda

  • Wer sind wir?
  • Hinweise zum Ablauf
  • Wer seid ihr?
  • Wie funktioniert das Internet?
  • Sprachen des Internets
  • Tools
  • Hausaufgabe

3 of 27

Wer sind wir?

4 of 27

Basti

Daniel

  • Fahrrad, Kiten, Joggen, Wandern, Kochen und Essen, …
  • FH Kiel, BA Multimedia Production, MA Medienkonzeption
  • neben Studium angestellt als Webentwickler
  • selbstständig als Webentwickler 5 Jahre
  • an der FH Kurse geleitet zu Webentwicklung
  • angestellter Softwareentwickler seit Anfang 2019
  • seit Dezember 2022 arbeite ich für adesso

​

​

  • arbeite seit 2009 als angestellter Software-Entwickler
  • nebenbei Wirtschaftsinformatik studiert
  • Vater von zwei Kindern, mit denen kann man viel Zeit verbringen
  • Software-Engineer bei HashiCorp
    • vollzeit, remote
  • Kochen, Backen, Essen, Gärtnern,�Basteln (Technik & Holz)
  • Meetups & Barcamp in Kiel

5 of 27

Hinweise zum Ablauf

6 of 27

7 of 27

8 of 27

Wer seid ihr?

9 of 27

Was ist dieser Kurs nicht?

10 of 27

Wie funktioniert das Internet?

(Kurzfassung)

11 of 27

HTTP

Hypertext Transfer Protocol

12 of 27

Anfrage (Request)

Antwort (Response)

“Hallo, ich bin XY und ich hätte gerne das Dokument xyz.html”

“Klar, gerne. Hier ist das Dokument xyz.html”

13 of 27

Browser (Client)

14 of 27

Browser (Client)

Server

Bitte gib mir

​

https://edu.opencampus.sh

15 of 27

Browser (Client)

Server

Bitte gib mir

​

https://edu.opencampus.sh

16 of 27

Browser (Client)

Server

Bitte gib mir

​

https://edu.opencampus.sh

Hier das Dokument

​

https://edu.opencampus.sh

17 of 27

Browser (Client)

Server

Bitte gib mir

​

https://edu.opencampus.sh

Hier das Dokument

​

https://edu.opencampus.sh

18 of 27

Browser (Client)

https://www.de.paessler.com/it-explained/server

https://de.wikipedia.org/wiki/Datei:HTML5_logo_and_wordmark.svg

https://de.wikipedia.org/wiki/Datei:CSS3_logo_and_wordmark.svg

https://de.cleanpng.com/png-t6t83z/�

Server

FRONTEND

BACKEND

Bitte gib mir

​

https://edu.opencampus.sh

Hier das Dokument

​

https://edu.opencampus.sh

19 of 27

Sprachen des Internets

20 of 27

Das

bunte - Adjektive - CSS

Einhorn - Nomen - HTML

tanzt - Verben - JS

https://giphy.com/gifs/dance-crazy-rainbow-ZJlesIV8TnabS

21 of 27

HTML

Hyper Text Markup Language

Strukturiert Inhalte einer Website

​

  • Überschrift
  • Absatz
  • Bild
  • Tabelle
  • Liste
  • ...

<div class="content">

<h2>My HTML example</h2>

<p>

Find more info at

<a href="www.bastibuck.de">www.bastibuck.de</a>

</p>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing

molestiae deleniti accusantium nobis hc, quia,

expedita odit earum. Dolores dolore iusto est earum

</p>

</div>

22 of 27

CSS

Cascading Style Sheets

Gestaltet eine Website

​

  • Textfarbe
  • Position
  • Hintergrundfarbe
  • Größe
  • Rahmen
  • …

html {

border-top: 5px solid #fff;

background: #58DDAF;

color: #2a2a2a;

}

​

html, body {

margin: 0;

padding: 0;

font-family: 'Open Sans';

}

​

23 of 27

JS

JavaScript

Bringt Interaktivität in eine Website

​

  • Bewegung
  • Validierung
  • Benutzereingaben verändern
  • Styling ändern (CSS)
  • Inhalte ändern (HTML)
  • …

function goNext() {

loop++;

for (let index = 0; index < slides.length; index++) {

const element = slides[index];

element.style.transform =

"translateX("+100*(index-(loop % slides))+"%)";

}

}

​

24 of 27

Tools

25 of 27

Browser

Google Chrome

Editor

VS Code

https://commons.wikimedia.org/wiki/File:Visual_Studio_Code_1.35_icon.svg

https://de.wikipedia.org/wiki/Datei:Google_Chrome_icon_(September_2014).svg

26 of 27

Hausaufgabe

27 of 27

Fragen?