Zukunftstag 2023

Am 9. November 2023 war der nationale Zukunftstag bei meinem Vater im Geschäft in Winterthur. Schon früh am Morgen um 6 Uhr bin ich aufgestanden, da war es noch richtig dunkel, zackig ging es dann auf den Bus richtung Bahnhof. Nach der schönen Hinreise mit dem Zug mit der schönen Aussicht in den Himmel durch den Nebel, gingen wir mit dem Bus die letzte Strecke zum Büro meines Vaters.

Am Anfang machte ich eine Runde im Büro und schaute was die anderen Mitarbeiter machten. Danach ging ich mit meinem Vater ins Sitzungszimmer wo ich Grundlagen über die Technik von Webseiten erlernte. Später habe ich wirkliche eine Webseite von Hand programmiert und gelernt das dies sehr aufwendig ist, und vor allem sehr müde macht und ja, hunger auch!

Gut genährt aus dem Mittag zurückgekehrt konnte ich endlich meine eigene Webseite (diese) mit einem CMS System erstellen. Mein Vater hat zwar schon einiges vorbereitet aber dennoch brauchte das Erfassen der Inhalte wirklich Zeit und viel Konzentration.

So war der grobe Ablauf:

Ablauf

Die Firma war in einem hohen Haus, sie war nicht sehr gross aber gemütlich. Die Firma war aber sehr cool. Es war der oberste Stock von da man einen super Ausblick auf durchfahrende Schnellzüge hatte. Abgesehen von einigen Telefonaten und Tastentöne war es sehr ruhig da alle immer konzentriert am programmieren waren. Die Menschen dort waren sehr nett zu mir.

  • Ich habe gelernt, was eine Domain ist - meine ist corsinfatzer.ch
  • Ich weiss was ein DNS (Domain Name System) zu bedeuten hat und warum es wie ein Wegweiser ist
  • Ich habe gelernt, dass eine Webseite auf einem Webserver (Computer) "gehosted" wird - wie ein Hotel
  • Ich weiss jetzt was es braucht um eine Website anzeigen zu können.
  • Ich wesis das es mehrere Programmiersprachen (auch Scriptsprachen) braucht um eine Seite zu erstellen
  • Ich weiss warum es eine Vereinfachung durch ein CMS System braucht um Code zu schreiben.

Präsentation Ablauf und Grundlagen (PDF)

  • So ist der Aufbau einer HTML5-Seite: Der grundsätzliche Aufbau und die Dokumentstruktur von HTML
  • Einbinden von Bilder
  • Verlinken von anderen Seiten
  • Einbinden von CSS und Javascript
  • Download der Beisbiel HTML Seite

HTML Beispiel

<!doctype html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width = device-width, initial-scale = 1.0" />  
    <title>HTML Beispiel</title>
    <meta name="description" content="Beschreibungstext">
    <link rel="shortcut icon" href="img/favicon.ico" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/seite-a">Seite A</a></li>
                <li><a href="/seite-b">Seite B</a></li>
                <li><a href="https://www.corsinfatzer.ch" target="_blank">Corsin Fatzer</a></li>
            </ul>   
        </nav>
    </header>
    <main>
        <h1>H1 Überschrift</h1>
        <p>Lorem ipsum dolor sit amet, et <span class="corsin">Corsin</span> consetetur elitr sadipscing.</p>   
        <h2>H2 Überschrift</h2>
        <h3>H3 Überschrift</h3>
        <h4>H4 Überschrift</h4>
        <h5>H5 Überschrift</h5>
        <img src="img/zeichnen_entwurf.jpg">
    </main>    
    <footer>
        Fußzeile
    </footer>
    <script src="script.js"></script>
</body>
</html>

CSS Beispiel

body {
    background-color: rgb(27, 26, 62);
    color: white;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}
header { padding: 10px 10px 10px 10px;  background-color: rgb(240, 74, 74); }
header > nav ul{ list-style: none; margin: 0 0 0 0; padding: 0 0 0 0;}
main { margin: 0 10px 10px 10px; }
footer { padding: 10px 10px 10px 10px; background-color: rgb(90, 90, 90); }
a { color: #ffffff; font-size:22px; }
a:hover { color: #19B5FE; }
.corsin{ color: #ffea00; cursor:zoom-in; }
p { }
h1 { color: #FA8072; }
h2 { color: #b42515; }
h3 { color: #7272fa; }
h4 { color: #72fab4; }
h5 { color: #fae172; }
img { max-width: 100%; }

Javascript Beispiel

const corsin_worte = document.querySelectorAll('.corsin');
corsin_worte.forEach((corsin_wort) => {
    corsin_wort.addEventListener('click', () => {
        alert("Hallo Corsin");
    });
});

Browseransicht unseres Codes

Browseransicht

In der Mittagspause war ich im COOP Restaurant gleich nebenan. Ich ass ein feines Stück Fleisch mit Pommes und Gemüse, dass wahr sehr lecker. Es tat auch wirklich gut kurz an der frischen Luft zu sein, so war mein Kopf wieder durchgelüftet um Neues zu lernen.

Als Vereinfachung und Arbeitsmittel für Webseitenbetreiber gibt es Content Management Systeme (kurz CMS) damit nicht immer alles neu Programmiert werden muss.

In meinem Falle ist es das SolutionCMS: