Blog

  • Die Funktion des Head-Bereichs einer Webseite

    Die Funktion des Head-Bereichs einer Webseite

    Der Kopfbereich einer Webseite hat verschiedene Funktionen bzw. Informationen. Die wichtigsten sind das Bereitstellen von spezifischen Daten für Browser und Suchmaschinen, die Verlinkung zu anderen Ressourcen und das ermöglichen von Responsive Design.

    Bereitstellung von webseitenbeschreibenden Daten für Browser und Suchmaschinen

    Als erstes wäre hier das title-Element. Dieses beinhaltet den Titel der jeweiligen Webseite, der z. B. im Reiter des Tabs, des Browsers zu sehen ist. Auch in den Favoriten, welche im Browser abgespeichert werden taucht dieser auf. Bei den Suchmaschinen ist das <title>-Element, das Erste was einem in den Suchergebnissen fett-gedruckt hervorsticht . Auch das <meta>-Element mit den Attributen name="description" und name="keywords" werden für die Suchmaschine genutzt. Erstes um den Text unter dem Titel bei der Suchmaschine auszugeben. Die Keywords dienen als thematische Eingrenzungen der Webseite. Wenn es für die Webseite zudem wichtig ist, dass der Autor des Beitrags bekannt ist, wird das Attribut name=“author“ angegeben.

    ...
    <head>
      <title>Andreas Moor – Home</title>
      <meta name="description" content="Ein Blog über Webentwicklung, Linux und Buddhismus">
      <meta name="keywords" content="Webentwicklung, Linux, Buddhismus, Meta-Skills">
      <meta name="author" content="Andreas Moor">
    ...

    Neben den informationsbeischreibenden Attribut befindet sich im meta-Element auch ein content-Attribut, welches den Inhalt enthält (siehe unten bzw. oben im Beispielcode).

    Ein weiteres Attribut ist charset="UTF-8". Es gibt dem Browser die Zeichenkodierung an. UTF-8 ermöglicht die Darstellung de facto aller Weltsprachen und sämtlicher Emojis in einer einzigen Codierung.

    ...
      <meta charset="UTF-8">
    ...

    Verlinkung zu webseiteninternen und -externen Ressourcen

    Da HTML nur zur Strukturierung und nicht zum Styling und Dynamisieren von Elementen genutzt wird, werden in der Regel CSS und JavaScript als Links in die Datei im Head eingebunden. Auch das Icon der Webseite, das wie der Titel in Tabs, den Favoriten im Browser, aber auch auf immer öfter auf Tablets und Smartphones als direkt Zugriff auf die Webseite wie ein App-Icon gesichert werden kann , eine wichtige Rolle.

    ...
    <!-- Favicon -->
      <link rel="icon" href="favicon.ico">
    
    <!-- CSS -->
      <link rel="stylesheet" href="styles.css">
    
    <!-- JavaScript -->
      <script src="script.js" defer></script>
    ...

    Abgesehen von eigenem Code in Form von eigenen CSS und JavaScript, können auch der Code anderer Anbieter für die eigenen Website genutzt werden. Beispiele können z. B. Google Analytics (Traking des User-Verhaltens auf der eignen Webseite), JavaScript-Bibliotheken wie jQuery (Einbinden von spezifischen JavaScript-Code) oder auch externen Icons wir Font Awsome Icons verlinkt werden.

    ...
    <!-- Font Awesome Icons -->
      <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
    
    <!-- jQuery Library -->
      <script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha384-oNp7gYhYBiG8sFlwfb6wOVDyQIvJEVvXxkCq7UwAw3ZTPyVfFYPml78WONCZWBbO" crossorigin="anonymous"></script>
    
    <!-- Google Analytics -->
      <script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
      <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() {
          dataLayer.push(arguments);
        }
        gtag('js', new Date());
        gtag('config', 'GA_TRACKING_ID');
      </script>
    ...

    Responsive Design

    Damit die eigenen Website auf verschiedenen Bildschirmgrößen sauber ausgegeben werden kann, wird das meta-Element mit dem Attribut name="viewport" genutzt. Dies ermöglicht, das dynamische anpassen der Breite des Geräts und macht den Inhalt lesbarer und benutzerfreundlicher.

    ...
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    Zusammenfassung

    Der Kopfbereich ist eine Bereich, dessen Inhalt für den User nicht direkt sichtbar ist, jedoch viele wichtige Funktionen bereitstellt. Einige davon sind die benutzerfreundliche Skalierung des Inhalts auf verschiedenen Displaygrößen, das zur Verfügung stellen von Daten für Browser und Suchmaschinen, aber auch das einbinden von webseiteninternen- und externem Code. Sie alle ermöglichen es die Webseite attraktiv und dynamisch zu gestalten.

  • Die Struktur eines HTML-Dokuments

    Die Struktur eines HTML-Dokuments

    HTML ist die Grundlage jeder Website. Beim Abrufen einer Website durch den Browser wird eine Anfrage an einen Webserver geschickt, welcher entweder eine HTML-Dokument erstellt oder ein bereits bestehendes HTML-Dokument dem Borwser bereitstellt. Wenn man mit schreiben von HTML-Code anfängt, ist es wichtig die Grundstruktur eines HTML-Dokuments wie z. B. der index.html zu verstehen. Die index.html-Datei ist das Dokument, was vom Webserver zurückgegeben wird, wenn man eine Website ansurft und NICHT zu einer spezifische URL wie etwas andreas-moor.de/kontakt navigiert.

    Jedes HTML-Dokument hat eine Grundstruktur, in welcher sich der Code, bestehend aus HTML-Elementen bzw. – Tags und ihren Attributen, befindet. Die Grundstruktur sieht wie folgt aus:

    <!DOCTYPE html>
    <html lang="de">
    <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Dokumenttitel</title>
    </head>
    <body>
     <!-- Hauptinhalt der Seite -->
     <h1>Willkommen zu meiner Webseite!</h1>
     <p>Das ist ein einfacher Absatz.</p>
    </body>
    </html>
    

    <!DOCTYPE html>

    An erster Stelle befindet sich das Doctype, eine Deklaration des Dokumententyps. Ja, Überraschung es ist wie zu sehen ist html. Der aktuelle Stand ist, dass HTML in der Version 5 ist, die Zahl aber nicht angegeben wird das HTML als ein lebender Standard gehandhabt wird. Auch ältere Verisonen wie 4. und XHTML wurde spezifische deklariert. Spezifisch benötigt man diese Angabe, damit der Browser weiß, wie er die Website rendern soll.

    <html lang=“de“> … </html>

    Das html-Element ist das Wurzelelement und ist das hierarchisch gesehen oberste Element und umfasst bzw. klammert den ganzen Inhalt der Webseite. Alle anderen Elemente sind Kinder-Elemente, sie sind also in html verschachtelt. Im Umkehrschluss ist html das Eltern-Element.

    Der Browser erkennt, durch das Element, dass alles was sich in dem Element befindet HTML-Code ist.

    lang=“de“

    Das lang-Atributt gibt im oberen Beispiel dem Browser an, dass die Webseite in der deutschen Sprache verfasst ist. Die Länderkennungen können im IANA-Register gefunden werden.

    dir=“ltr“ bzw. dir=“rtl“

    Ein weiteres Atributt, das man im html-Element finden könnte, ist das dir-Atributt. Dieses gibt ob die genutzte Sprache von ltr = left-to-right (zum Beispiel eine Sprache wie Deutsch) oder von rtl= right-to-left (zum Beispiel Arabisch) ausgegeben wird.

    <head>…</head>

    Der Head-Bereich beinhaltet Meta-Informationen über die Webseite, welche beim normalen Aufruf der Webseite für den Nutzer nicht sichtbar sind. Diese können jedoch durch die Developer-Tools (Strg+Shift+I) dargestellt werden.

    <body>…</body>

    Das body-Element beinhaltet alle im Browser sichtbaren Elemete der Webseite. Alles was sich auf einer Webseite befindet kommt folglich hier rein: Überschriften, Paragrafen, Bilder, Links etc.

    Zusammenfassung

    Die Grundstruktur eines HTML-Dokuments ist relativ easy. Wir merken uns, dass es mit der Deklaration startet, das html-Element als Wurzelelement beinhaltet, welches head und body enthält.

  • Pausenloser Autopilot oder doch lieber Pause vom Autopilot?

    Pausenloser Autopilot oder doch lieber Pause vom Autopilot?

    Mein Urlaub in Gran Canaria neigt sich langsam zu Ende 🥲. Und ich muss zugeben, dass ich nicht nur „geurlaubt“ hatte. Der Laptop war dabei und ein paar Todos waren auch noch offen. Webseiten von Meditationszentrum aktualisieren, Rechnungen schreiben UND ich wollte auch an dieser Website arbeiten. Klingt für einige nicht nach Urlaub, aber ich habe zu meiner Arbeit eine „besondere“ Beziehung. Neben den Trainieren von Leuten, besteht auch noch der Overhead: Rechnungen, Steuern und Krankenversicherung. Alles Themen, die im Hintergrund des Geistes „rumgeistern“ 👻 und bei mir NOCH eher mit Aversion verknüpft sind. Ich benutze zwar bewusst nicht mehr die Formulierungen wie „Mag ich nicht“ oder „Ich hasse…“. Warum? Weil Aversion wie ein Sucht funktioniert, je aversiever man auf etwas reagiert un so mehr wird man es nächstes Mal erneut nicht machen wollen, Stichwort: Steuererklärung.

    Man kann viele Dinge Outsourcen aber das kostet Geld und wenn man ein „kleiner Fisch“ ist wie ich sind die Umsätze nicht so hoch, dass ich mir einen Steuerberater leisten „will“, vor allem wenn ich mittlerweile weiß welche Vorarbeit ich für den Steurberater leisten muss, ach … mache ich es einfach selbst. Immerhin hatte ich Steuerrecht auf der Uni und kenne mich mit dem Vorgehen aus.

    Nach längerer Reflexion konnte ich auch ehrlich gesagt nichts in dem Prozess der Steuererklärung finden, das mich übertrieben nervte, es war eigentlich immer nur eine Aufgabe die lange Zeit dauert und nicht als ein großes To-Do angesehen werden sollte. Die Chunk-Größe einer Aufgabe wirkt auf die Psyche erschlagend oder eher als „ach ist doch kein Ding“. Verknüpft man jedoch mit einer Aufgabe einen aversiven geistigen Zustand, so ist ja die gängige Strategien, das Weglaufen oder das es schnell wie möglich „Über- bzw. Hintersichbringen“.

    Viel intelligenter ist es natürlich, wie auch immer, die Bedeutung, die man der Aufgabe bemisst zu verändern und den Prozess so angenehm wie möglich zu machen, ja, ihn sogar fast schon mögen zu lernen. 😍 Ja, hört sich süß an! Ist aber einen Versuch wert, würde ich sagen.

    Bei Aufgaben bzw. Projekten, die man mag oder auf die man richtig Lust hat und mit denen man einen positive Verknüpfung assoziiert, ist der Anfang meistens leichter. Jedoch fiel mir im Urlaub auf, dass auch hier sich ein ähnlicher geistiger Zustand einnisten kann, gemeint ein Zustand der Aversion. Ja, das Endergebnis das man haben will ist toll, die Strategie scheinbar auch umsetzbar, das Luftschloss steht. Bis man auf die ersten Hindernisse kommt, bei denen man eben NICHT mehr den Flowstate am Leben erhalten kann, weil Dinge eben nicht so laufen, wie es in der Luftschloss-Strategie ausgemalt war.

    Ich programmierte im Urlaub mit HTML, CSS ein -Wordpress-Theme, hatte WordPress aufgesetzt, mit PHP rumgemacht um das Theme auf WordPress zum laufen zu bringen. Ja, alles in einer Woche! Ja, wird schon gehen. ChatGPT is my best friend! Sky ist the fucking Limit. 🕺

    Genau, genau in diesem Sky hängt auch das Luftschloss, dass behauptet, dass Dinge so laufen wie ich denke, dass sie laufen sollten. Es gibt, jedoch Aufgaben, die dauern länger, vor allem wenn man Dinge durchdringen und lernen muss, und davor nie gemacht hat. Surfen, Programmieren, Meditieren, ein Business aufbauen, eine Sprache lernen, defacto alles was sich als größeres Projekt benennen lässt. Ja, und genau für diese Momente braucht man vernünftige Pausenstrategien.

    Auf der geistigen Ebene fill mir auf, dass die Fähigkeit sich über längere Zeit zu konzentrieren in mir vorhanden ist, teilweise saß ich bis in die frühen Morgenstunden (Rekord war 4:00 Uhr) und versuchte das Layout mit CSS halbwegs vernünftig aussehen zu lassen. Wachte am nächsten Morgen mit blaulicht-frittierten Augen auf und musste eine wie Karl Lagerfeld eine Sonnenbrille tragen um vom Tageslicht nicht wie ein Vampir in Rauch aufgelöst zu werden. 🧛‍♂️💨 Ich bin in der Ansicht halt auch wirklich ein Burnout-Gefährdung für mich selbst.

    Ich erinnere mich an einen Vortrag von meinem meinem Meditationslehre über das Thema rechte Konzentration.

    Eine Konzentration in der die Fähigkeit achtsam zu bleiben vorhanden ist.

    Achtsamkeit auf was? Auf Körper und Geist. Aufmerksamkeit, darauf ob ich mit der Konzentration Leid erzeuge oder nicht. Diese Konzentration würde man dann wohl als unrechte Konzentration bezeichnen. Wenn man regelmäßig in Meditation sitzt wird man eigentlich anhand der eigenen Sitzperiodendauer erkennen, wie lange der eigene Geist in einem konzentrierten Zustand einspitzig bleiben kann und wann dieser Akku leer ist und die Sicherung fliegt. Hat man eine stabilere Praxis, welche schon länger besteht ist die Meditation auf lange Sicht jedoch eher eine Batterieaufladen und ist ein Reset-Knopf für die anderen Projekte, in denen man seine geistigen Ressourcen braucht um Dinge zu schaffen, die eben nicht leicht sind: Steuern, Websites, Business-Ideen etc. Gute Dinge brauchen Zeit, auch Pausenzeit.

    Ich merke, das dieser lange Roman, nur einem einzigen Zweck dient mir zu sagen:

    Lehrer-Andy: „Andy mach bitte mehr Pausen und sein noch achtsamer beim Konzentrierten arbeiten!„

    Schüler-Andy: [Traditionell buddhistische Antwort] „Ich übe mich darin bei konzentrierter Arbeit noch achtsamer zu erkennen wann eine Pause nötig ist und diese mit dem Verständnis zu machen, dass ich danach besser dran bin. Danke Sensei Andy!“ 🙏🙂‍↕️

    Gutes Pausemachen!

  • Weniger ist mehr, wenn das Ziel weniger ist: Schlingentraining für Zeitsparfüchse

    Weniger ist mehr, wenn das Ziel weniger ist: Schlingentraining für Zeitsparfüchse

    Nun bin ich schon ein paar Tage auf Gran Canaria und habe den Schlingentrainer (manche sagen auch TRX dazu) für mich wiederentdeckt. Ursprünglich als Reha-Werkzeug für Physios konzipiert, schlingeln sich mittlerweile auch Otto-Normal-Verbraucher in Fitnessstudios (meist unter Anleitung) damit herum.

    Die Investition von 15–20 € hat man mit einem Monat Fitnessstudio wieder drin. Oder man benutzt das Ding im Fitnessstudio, wenn es draußen zu kalt ist. Der größte Vorteil ist jedoch, dass ein gutes Training wirklich zügig durchlaufen ist und brutaler ist, als man denkt – im positiven Sinne.

    Das Geilste am Schlingentrainer ist, dass viele Übungen mehrere Muskelgruppen bzw. -ketten adressieren, was das Training relativ funktionell, aber auch intensiv macht. Intensiv in dem Sinne, dass es die Pumpe (manche sagen auch Herz) ordentlich zum Laufen bringt und die Erschöpfung, zumindest von mir, als positiv empfunden wird. Positiv heißt: Nach einer halben Stunde fühle ich mich vitaler und will nicht ins Bett fallen. Hinzu kommt, dass das Schlingentraining wirklich, wirklich, wirklich … Core-lastig ist. Nebeneffekt: Wenn der Speck, wie auch immer, runterkommen sollte, wirst du Bauchmuskeln sehen, versprochen (ab ca. 15–17 % Körperfettanteil werden die Frauen/Männer/Diversen Schlange stehen).

    „Ich habe keinen Schlingentrainer gebraucht, um mich zu verheddern – das schafft mein Alltag auch so!“ – unbekannt

    Okay, weiter …

    Vor meinem Schlingentrainer-Wiedereinstieg hatte ich wohl ca. 1–1,5 Monate Regenerationszeit, in der ich keinen Kraftsport getrieben hatte. Deswegen hatte ich „tief“ gestapelt und wollte am Anfang „nur“ 45 Minuten Trainingsdauer wählen. Endergebnis: Ich musste nach 30 Minuten aufgeben. Batterie leer 🪫 (wer hätte das gedacht). Von gut 30 Minuten bin ich jetzt auf bodenständige 15 Minuten heruntergekommen. Wobei die App, mit der ich arbeite, in 30-Sekunden-Intervallen taktet. Also 30 Sekunden Übung mit 30 Sekunden Pause.

    „Der Schmerz, den du heute fühlst, wird die Stärke sein, die du morgen hast.“– Arnold Schwarzenegger

    Das kann für manche Couch-Kartoffeln zu heftig sein. Nicht so wild, ich habe es auch mit ein paar geskippten Übungen auf die oben besagten 30 Minuten geschafft. You can do it too. Auch ich werde auf meinen 15 Minuten so lange herumdümpeln, bis es sich zu leicht anfühlt bzw. die Zunge nicht mehr heraushängt 🥵.

    Überzeugt? Na dann: auf zum Decathlon, Seil kaufen, App laden, nach Gran Canaria fliegen und loslegen.

    Mit sportlichen Grüßen, Andy 💪

  • Eine Gebrauchsanleitung für den eigenen Geist

    Eine Gebrauchsanleitung für den eigenen Geist

    Manchmal hat man das Gefühl, dass bestimmte Lebensumstände und die dazugehörigen geistigen Zustände unlösbar erscheinen. In modernen Zeiten sind Psychotherapie, Religion, aber auch das Sammelbecken von Werkzeugen zur persönlichen Entwicklung – auch im Englischen als Self-development oder Self-improvement bekannt – gängige Strategien, um mit weltlichen Problemen umzugehen.

    Gibt es eine Gebrauchsanleitung für ein glückliches Leben?

    Da jedes Lebewesen in der Regel Glück mehren und Leiden vermeiden möchte, stellt sich mit fortgeschrittenem Alter die Frage, ob es so etwas wie eine Gebrauchsanleitung für ein erfülltes und glückliches Leben gibt. Eine Gebrauchsanleitung, die nicht an spezifische Wünsche gebunden ist, sondern so etwas wie ein Meta-Framework darstellt.

    Probleme als Ziele verstehen

    Wenn man Probleme als Ziele ansieht, die noch nicht klar formuliert sind, ist die Lösung jedes Problems das Erreichen des gewünschten Endzustandes, der bisher noch nicht eingetreten ist. Dieser Zustand kann innerhalb eines selbst (geistiger oder körperlicher Natur) oder außerhalb eines selbst (materieller oder zwischenmenschlicher Natur) liegen. Ich denke, dass man jedes Problem bzw. Ziel in diese Kategorien einordnen kann.

    Ziele durch Projektmanagement erreichen

    Um Ziele effizient erreichen zu können, bedient man sich entweder kleiner oder großer Methoden des Projektmanagements. Dabei definieren wir ein Projekt als eine Abfolge von spezifischen Schritten (To-dos), die umgesetzt werden müssen, um effektiv und effizient das jeweilige Ziel zu erreichen.

    Warum scheitern wir trotz Wissen?

    Nun, wenn alles so klar ist und wir – fast – alle wissen, wie der Hase läuft, warum funktioniert es dann teilweise doch nicht? Ich könnte jetzt einen Schwenker zu den gängigen Jobbeschreibungen und ihrem Fokus auf sogenannte Social Skills machen, jedoch sind diese – wie der Name schon sagt – eher für den zwischenmenschlichen Gebrauch gedacht. Ich würde viel lieber erneut auf den Begriff des Meta-Frameworks zurückkommen und postulieren, dass dieses Framework aus so etwas wie Meta-Skills besteht. Diese Meta-Skills stehen hinter bzw. jenseits aller anderen Fähigkeiten und sind es wert, kultiviert zu werden. Um es vom Theoretischen ins Praktische zu übertragen, hier ein kleines Beispiel für einen Meta-Skill.

    Meta-Skills am Beispiel des Lernens

    Sagen wir mal, dass mein Ziel es ist, Surfen zu lernen. Cool! Um Surfen zu können, muss ich es offensichtlich lernen. Wenn Surfen also die gewünschte Fähigkeit (Skill) ist, wäre das Lernen an sich ein Meta-Skill. Lernen selbst basiert jedoch auf weiteren Fähigkeiten wie Konzentration, Achtsamkeit, und dem Erkennen von Ursache-Wirkungs-Beziehungen. Diese könnte man als Meta-Skills der tieferen Ebene bezeichnen.

    Der unsichtbare Nutzen von Meta-Skills

    Interessant ist, dass manche Meta-Skills für sich genommen scheinbar keinen eigenen Nutzen haben bzw. keinem direkten Ziel dienen. Keiner würde sich z. B. in Konzentration üben, um einfach nur konzentriert zu sein. Jedoch setzt jede, auch noch so kleine Aufgabe, Konzentration voraus, da sie dafür sorgt, dass unser Geist nicht jeden Moment abseits der zu erledigenden Aufgabe abschweift.

    Ein Blog als Startschuss zur Meta-Skills-Reise

    Dieser Beitrag ist für mich so etwas wie ein Startschuss für den Blog. Der Blog selbst ist ein Spielplatz, der mir ermöglicht, am Anfang so etwas wie Sandburgen zu bauen, die von der Realität weggeschwemmt werden dürfen, um durch stabilere Bauten ersetzt zu werden. Ich sehe mich als vernunftbasierten und wissenschaftlich denkenden Menschen, bin jedoch auch nicht vor der eigenen Sicht auf die Dinge geschützt – Stichwort Bias. Dies ist jedoch umso mehr eine gute Motivation, Meta-Skills zu entdecken und anzuwenden. Die Suche bzw. Reise kann beginnen.