Blog

  • Netkolumne – ownDay Fortbildung mal anders

    Netkolumne – ownDay Fortbildung mal anders

    Ich habe letztens im Bett gelegen und konnte nicht einschlafen, da habe ich über Fortbildung in IT-Firmen nachgedacht. Das Thema war aktuell, in der Firma, bei der ich arbeite, im Flurfunk zu hören. Da dachte ich mir teuer Frontalunterricht bei dem man nach wenigen Stunden wieder die hälfte vergessen hat ist so ziemlich aus dem letzten Jahrhundert. Deswegen habe ich mir was Neues überlegt, ein „ownDay“ in der Firma.

    Ist Analyse

    Zuerst muss ein Interview mit jedem Mitarbeiter gemacht werden. Das Ziel des Interviews ist das aufzeigen von Wissenslücken. Durch die Code Reviews in unserer Firma ist mir aufgefallen das die Unit Tests in meinen React Projekten nur mangelhaft umgesetzt sind.

    Projekt planen

    Jetzt habe ich die Aufgabe mir ein Projekt auszudenken das ich gerne privat umsetzen möchte. Ich hatte mal die Idee unser Timetracking zu modernisieren.

    Teams bilden

    Jetzt kommt die Kunst ins Spiel, vielleicht sollte dafür ein externer Moderator in die Firma geholt werden. Nämlich die Projekt-Ideen mit den Skills verknüpfen. In meinem Fall würde ich gerne mit einem Backend-Entwickler in ein Team, weil in unserer Firma die Backend Leute alles akribisch testen. Des weiteren hätte ich gerne ein vom Marketing im Team, weil mich das privat für mein Blog interessiert. Jetzt muss ich meine Projekt-Idee pitchen und meine Mitglieder überzeigen mit mir in ein Team zu kommen. Dabei müssen Kompromisse eingegangen werden. Ich könnte vielleicht nicht meine Projekt-Idee umsetzen aber dafür könnte ich mit jemanden aus dem Marketing in ein Team.

    der ownDay

    Jetzt kann das Team entscheiden wann sie sich den Freien Tag im Monat nehmen um an ihrem Projekt zu arbeiten.

    Dokumentation

    Die Projekte müssen Dokumentiert werden, es muss jetzt nicht ein Wiki mit endlosen Texten zugespammt werden sondern nach 3 Monaten Arbeit muss eine Präsentation mit einer Kampagne, App oder oder oder präsentiert werden.

    Besitz des Projektes

    Die Firma sollte Anteile am Projekt besitzen, z.B. Die 3 Mitarbeiter teilen sich 60% und die Firma bekommt 40%. Das bringt Motivation sich in der Freizeit auch mit dem Projekt sich zu beschäftigen.

    Optimierung – der Spezialist

    Die Firma kann für ein Tag oder zwei Tage ein Spezialisten buchen der die einzelnen Teams unterstützt und dabei Fachwissen mit die Projekte streut.

  • CSS Flexbox Tutorial

    CSS Flexbox Tutorial

    Flexbox ist der moderne Weg eine Seite zu layouten. Anhand von Beispielen zeige ich dir, wie du dynamische Element-Größen erstellst. Die Idee hinter Flexbox ist das dynamische Ändern von Größen der Unterelemente, damit die beste Größe benutzt wird. Der Flex Container passt sich dem verfügbaren Platz an und vergrößert bzw. verkleinert die Unterelemente.

    Ich zeige dir Anhand von Design, Produktübersicht und Gallery wie du mit Flexbox arbeiten kannst. Des weiteren erhälst du noch eine Übersicht aller Flexbox Eigenschaften und den Beschreibungen.

    Übersicht

    1. Basics
    2. Produktübersicht Beispiel
    3. Eigenschaften Container
      1. flex
      2. flex-direction
      3. flex-wrap
      4. justify-content
      5. align-items

    Basics

    Flex setzt sich aus einem Container und den Elementen zusammen. Dabei ist zu beachten, dass der Flex-Container nur eine Ebene unter sich selbst wirksam ist. Wenn du ein Container hast, werden nur die direkten Unterelemente davon etwas mitbekommen, die Elemente die in den Elementen sind bekommen nichts von Flex mit.

    <div class="flex-container">
      <div class="flex-element"></div>
      <div class="flex-element"></div>
      <div class="flex-element"></div>
    </div>

    Flexbox containerinfo

    Produktübersicht Beispiel

    In diesem Beispiel sollen 10 Produkte angezeigt werden. Die Kacheln sollen alle gleich Groß sein und den selben Abstand zwischen den Kacheln und dem Rand haben.

    Schritt 1 – die HTML Struktur

    Zuerst brauchen wir die HTML Struktur, die ein Container aufweist und 10 Produkt Kacheln.

      <div class="flex-container">
        <div class="product-tile">
          <img src="zucker.jpg" alt="Karotten">
          <h2>Zucker</h2>
          <span>1,10 €</span>
        </div>
        <div class="product-tile">
          <img src="milch.jpg" alt="Karotten">
          <h2>Milch</h2>
          <span>1,00 €</span>
        </div>
        <div class="product-tile">
          <img src="mandeln.jpg" alt="Karotten">
          <h2>Mandeln</h2>
          <span>4,00 €</span>
        </div>
        <div class="product-tile">
          <img src="käse.jpg" alt="Karotten">
          <h2>Käse</h2>
          <span>2,50 €</span>
        </div>
        <div class="product-tile">
          <img src="karotten.jpg" alt="Karotten">
          <h2>Karotten</h2>
          <span>2,00 €</span>
        </div>
        <div class="product-tile">
          <img src="fleisch.jpg" alt="Karotten">
          <h2>Fleisch</h2>
          <span>6,00 €</span>
        </div>
        <div class="product-tile">
          <img src="erdbeeren.jpg" alt="Karotten">
          <h2>Erdbeeren</h2>
          <span>3,10 €</span>
        </div>
        <div class="product-tile">
          <img src="eier.jpg" alt="Karotten">
          <h2>Eier</h2>
          <span>1,80 €</span>
        </div>
        <div class="product-tile">
          <img src="brot.jpg" alt="Karotten">
          <h2>Brot</h2>
          <span>2,40 €</span>
        </div>
      </div>

    Das sieht dann im Browser wie folgt aus: Produktübersicht plain HTML

    Schritt 2 – CSS Magic

    Jetzt stylen wir die Kacheln und den Container so, dass er nach einer ordentlichen Produktübersicht aussieht.

        .flex-container {
          display: flex;
          justify-content: space-between;
          flex-flow: row wrap;
          align-content: stretch;
          align-items: stretch;
        }
        .product-tile {
          border: 2px solid black;
          flex-grow: 1;
          flex-shrink: 1;
          flex-basis: 150px;
          margin: 0 12px 24px;
          flex-flow: row wrap;
          align-content: flex-start;
        }
        img {
          width: 100%;
        }

    Nach dem übertragen der CSS Attribute sieht dann unsere Produktübersicht wie folgt aus: Produktübersicht mit css flexbox

    Schritt 3 – leere Kacheln

    Das ist aber noch nicht das Ergebnis das wir haben wollen, es sollen alle Kacheln gleich groß sein und sollen den gleichen Abstand zu einander haben. Dafür werden leere Kacheln benötigt, am besten so viele wie Kacheln selbst vorhanden sind, aber ich rechne immer mit 2000px / Kachelbreite (Flex Basis). Sprich unsere Kachelbasis ist 150px deswegen brauchen wir jetzt 2000/150 = 13,3 Kacheln… sicher ist sicher also lieber 14.

    
        <div class="product-tile">
          <img src="brot.jpg" alt="Karotten">
          <h2>Brot</h2>
          <span>2,40 €</span>
        </div>
        <div class="product-tile"></div>
        <div class="product-tile"></div>
        <div class="product-tile"></div>
        <div class="product-tile"></div>
        <div class="product-tile"></div>
        <div class="product-tile"></div>
        <div class="product-tile"></div>
        <div class="product-tile"></div>
        <div class="product-tile"></div>
        <div class="product-tile"></div>
        <div class="product-tile"></div>
        <div class="product-tile"></div>
        <div class="product-tile"></div>
        <div class="product-tile"></div>

    Jetzt müssen die leeren Kacheln noch unsichtbar werden.

    .product-tile:empty {
      order: 999999999999999999999;
      height: 0;
      border: 0;
    }

    Produktübersicht mit css flexbox und leeren tiles
    Demo öffnen

    Eigenschaften Container

    Display Flex

    Definiert den Container als Flex

    .container {
      display: flex;
    }

    Alternativ kann auch flex-inline verwendet werden. Wenn es als Layout verwendet werden soll, nimmt man flex. Wenn es z.B. in einem Artikel oder Navigation verwendet wird, nimmt man flex-inline.

    .container {
      display: flex-inline;
    }

    flex-direction

    Mit flex-direction gibt man die Flußweise an, z.B bei row fließen die Elmente von links nach rechts, bei row-reverse von rechts nach links, bei column von oben nach unten und bei column-reverse von unten nach oben.

    flex-direction: row

        .flex-container {
          display: flex;
          flex-direction: row;
        }
    Zucker
    Zucker
    1,10 €
    Milch
    Milch
    1,00 €
    Mandeln
    Mandeln
    4,00 €

    flex-direction: row-reverse

    .flex-container {
      display: flex;
      flex-direction: row-reverse;
    }
    Zucker
    Zucker
    1,10 €
    Milch
    Milch
    1,00 €
    Mandeln
    Mandeln
    4,00 €

    flex-direction: column

    .flex-container {
      display: flex;
      flex-direction: column;
    }
    Zucker
    Zucker
    1,10 €
    Milch
    Milch
    1,00 €
    Mandeln
    Mandeln
    4,00 €

    flex-direction: column-reverse

    .flex-container {
      display: flex;
      flex-direction: column-reverse;
    }
    Zucker
    Zucker
    1,10 €
    Milch
    Milch
    1,00 €
    Mandeln
    Mandeln
    4,00 €

    flex-wrap

    Flex Wrap gibt ann wie die Elemente umbrechen. Sprich bei nowrap werden alle Elemente in einer Zeile angezeigt und werden gequetscht. Bei wrap werden die Elemente umgebrochen, wenn sie die Breite erreicht haben fängt eine neue Zeile an. wrap-reverse macht das gleiche wie wrap, bloß die Elemente werden invertiert, sprich das letzte Element wird als erstes Angezeigt und die Zeilen werden von unten nach oben aufgefüllt.

    flex-wrap: nowrap

    .flex-container {
      display: flex;
      flex-wrap: nowrap;
    }
    Zucker
    Zucker
    1,10 €
    Milch
    Milch
    1,00 €
    Mandeln
    Mandeln
    4,00 €
    Zucker
    Zucker
    1,10 €
    Milch
    Milch
    1,00 €
    Mandeln
    Mandeln
    4,00 €
    Zucker
    Zucker
    1,10 €
    Milch
    Milch
    1,00 €
    Mandeln
    Mandeln
    4,00 €

    flex-wrap: wrap

    .flex-container {
      display: flex;
      flex-wrap: wrap;
    }
    Zucker
    Zucker
    1,10 €
    Milch
    Milch
    1,00 €
    Mandeln
    Mandeln
    4,00 €
    Zucker
    Zucker
    1,10 €
    Milch
    Milch
    1,00 €
    Mandeln
    Mandeln
    4,00 €
    Zucker
    Zucker
    1,10 €
    Milch
    Milch
    1,00 €
    Mandeln
    Mandeln
    4,00 €

    flex-wrap: wrap-reverse

    .flex-container {
      display: flex;
      flex-wrap: wrap-reverse;
    }
    Zucker
    Zucker
    1,10 €
    Milch
    Milch
    1,00 €
    Mandeln
    Mandeln
    4,00 €
    Zucker
    Zucker
    1,10 €
    Milch
    Milch
    1,00 €
    Mandeln
    Mandeln
    4,00 €
    Zucker
    Zucker
    1,10 €
    Milch
    Milch
    1,00 €
    Mandeln
    Mandeln
    4,00 €

    justify-content

    Justify Content definiert den Platz zwischen den Elementen. Sprich es berechnet die dynamischen Abstände zwischen den Elementen wenn diese an der Hauptachse ausgerichtet sind.

    css justfy content Diagramm

    justify-content: flex-start

    .flex-container {
      display: flex;
      justify-content: flex-start;
    }
    Zucker
    Zucker
    1,10 €
    Milch
    Milch
    1,00 €
    Mandeln
    Mandeln
    4,00 €

    justify-content: flex-end

    .flex-container {
      display: flex;
      justify-content: flex-end;
    }
    Zucker
    Zucker
    1,10 €
    Milch
    Milch
    1,00 €
    Mandeln
    Mandeln
    4,00 €

    justify-content: center

    .flex-container {
      display: flex;
      justify-content: center;
    }
    Zucker
    Zucker
    1,10 €
    Milch
    Milch
    1,00 €
    Mandeln
    Mandeln
    4,00 €

    justify-content: space-between

    .flex-container {
      display: flex;
      justify-content: space-between;
    }
    Zucker
    Zucker
    1,10 €
    Milch
    Milch
    1,00 €
    Mandeln
    Mandeln
    4,00 €

    justify-content: space-around

    .flex-container {
      display: flex;
      justify-content: space-around;
    }
    Zucker
    Zucker
    1,10 €
    Milch
    Milch
    1,00 €
    Mandeln
    Mandeln
    4,00 €

    justify-content: space-evenly

    .flex-container {
      display: flex;
      justify-content: space-evenly;
    }
    Zucker
    Zucker
    1,10 €
    Milch
    Milch
    1,00 €
    Mandeln
    Mandeln
    4,00 €

    align-items

    Align-Items ist die horizontale Version von Justify Content, es richtted die Elemente an der Horizontalen Line aus.

    CSS Flexbox Align Items

    align-items: stretch

    .flex-container {
      display: flex;
      align-items: strech;
    }
    Zucker
    1,10 €
    Milch
    Milch
    1,00 €
    4,00 €

    align-items: flex-start

    .flex-container {
      display: flex;
      align-items: flex-start;
    }
    Zucker
    1,10 €
    Milch
    Milch
    1,00 €
    4,00 €

    align-items: flex-end

    .flex-container {
      display: flex;
      align-items: flex-end;
    }
    Zucker
    1,10 €
    Milch
    Milch
    1,00 €
    4,00 €

    align-items: center

    .flex-container {
      display: flex;
      align-items: center;
    }
    Zucker
    1,10 €
    Milch
    Milch
    1,00 €
    4,00 €

    align-items: baseline

    .flex-container {
      display: flex;
      align-items: baseline;
    }
    Zucker
    1,10 €
    Milch
    Milch
    1,00 €
    4,00 €

    CSS Tutorial

    Voriger Schritt: CSS Klassen kombinieren

    Zur Turtorial-Reihe: CSS Tutorial

    Nächster Schritt: CSS mehrere Transition versetzt starten

  • NetKolumne – Wie werde ich ein besserer Entwickler

    NetKolumne – Wie werde ich ein besserer Entwickler

    Du willst ein besserer Softwareentwickler werden? Es gibt 3 Methoden mit denen du ein besserer Entwickler wirst. Ganz oben steht natürlich die Übung bzw. Erfahrung, umso mehr du programmierst umso besser wirst du. Der zweite Punkt ist zu lernen wie andere Entwickler arbeiten, kleine Kinder lernen schon mit dieser Methode, abschauen und nachahmen. Der letzte Punkt ist Kommunikation, bleibe immer auf dem aktuellen Stand der Technologien, da in wenigen Jahren riesige Änderungen im Bereich Softwareentwicklung passieren.

    Übung

    Was bedeutet Übung? Einfach ausgedrückt, baue Dummy Projekte. Erstelle einen Klon von großen Projekten die du gut findest oder die du als schwer umsetzbar empfindest. Du lernst am meisten wenn du dir schwere Projekte vornimmst. Falls du noch nicht so erfahren bist und mit einem einfachen Projekt starten willst, nimm die ein evergreen Projekt. Das bedeutet baue eine Todo App oder eine Blogsoftware. Halte die App simpel und einfach, gehe nicht zu tief ins Detail, es soll kein Projekt für die Ewigkeit enstehen, baue lieber die Kernkomponenten und sammle dadurch Erfahrungen.

    Es wird hoffentlich der Punkt kommen an dem du dich überfordert fühlst, an der Stelle weißt du jetzt kommt die Lernkurve. Erst an diesem Punkt fängst du an besser zu werden, wenn du recherchieren musst und neue Dinge durch ausprobieren lernst.

    Dies ist ein Endloser Prozess, du kannst mit dieser Strategie immer was neues lernen. Ich als erfahrener Entwickler tue dies ständig, ich suche mir ein Problem, z.B. wollte ich meine Apache Log Files mit Node analysieren, aber zu diesem Thema findet man keine Tutorials im Netz. Deswegen musste ich mich mit Dokumentationen auseinander setzen und mich tiefer mit Regex beschäftigen.

    Nachahmen

    Die einfachste Version ist das nachprogrammieren von Tutorials. Dabei lernst du vom Autor wie er seine Probleme angegangen ist und diese dann gelöst hat. Eine alternative ist, sich Software von anderen Programmierern anzuschauen und versuchen diese zu verstehen. Gehe auf Github und suche dir ein spannendes Projekt raus. Klone das Projekt und lese dir den Quelltext durch, das wird dir in einer Firma oft passieren, du sollst eine Software weiterentwickeln und musst aus dem Code lernen da der Kollege gerade im Urlaub ist. Wenn du dir jetzt ein Projekt auf Github ausgesucht hast, versuche dies zu erweitern. Als Beispiel kannst du dir mein Apache Logfile-Analyse Software anschauen. Die par Zeilen Code sind schnell überblickt, versuche meinen Code zu optimieren, vielleicht hast du eine Idee, wie eine Sache besser gemacht werden kann.

    Kommunikation

    Trends

    Als Entwickler auf dem neusten Stand zu sein ist sehr wichtig, was in der Softwareentwicklung in einem oder zwei Jahren passiert ist gigantisch. Es gibt wahrscheinlich kein anderen Beruf auf dem du immer auf dem aktuellen Stand sein musst. Deswegen lese Nachrichtenseiten wie Golem, Heise oder T3N. Suche dir am besten noch Blogs von anderen Entwicklern.

    Communitys

    Du solltest auf Twitter aktiv werden, dort findest du eine riesige internationale Entwickler Community. Zum Beispiel habe ich auf Twitter das erste mal von yarn gehört, yarn ersetzt npm und ist performanter als npm. Seit dem benutze ich yarn und bin sehr zufrieden damit. Eine andere Plattform ist Stackoverflow, versuche doch mal ein par Fragen zu beantworten um anderen Entwicklern zu helfen, oder versuche Lösungsansätze zu finden und warte bis die Frage beantwortet ist, danach vergleiche deine Lösung mit der Antwort und wenn du deine Lösung als eleganter ansiehst poste diese.

    Bonus

    Des weiteren kannst du regelmäßig dein Arbeitgeber wechseln, dadurch wirst du immer wieder gefordert neue Arbeitsweisen zu lernen. Wechsel alle 4-5 Jahre dein Arbeitgeber, dadurch baust du dir auch eine gutes Portfolio auf und wirst besser bezahlst, weil du diese Erfahrungen aus anderen Firmen mitbringst.

  • NetKolumne – Mit dieser Methode erreichst du deine Ziele

    NetKolumne – Mit dieser Methode erreichst du deine Ziele

    Ich habe mir vorgenommen produktiver zu werden und meine Ziele zu erreichen. Dafür verwende ich eine Scrum ähnliche Methode. Scrum ist eine agile Technik mit der Aufgaben in Teams verwaltet werden. Agil bedeutet das mit dieser Technik schnell auf Außeneinwirkungen eingegangen werden kann. Sprich mit Scrum ist man sehr flexibel. Das ist beim erreichen von Zielen ein großer Vorteil, da dass Leben sehr dynamisch ist und schwer zu planen ist.

    Vorteile / Nachteile

    Diese Technik hat den Vorteil schnell erste Ergebnisse zu erreichen. Sprich für neues ist diese Methode optimal z.B. mehr Zeit mit der Familie zu verbringen. Leider ist diese Methode nicht für das reduzieren von Verhalten gut z.B. eine Diät lässt sich schwer mit Scrum umsetzen. Aber es ist wiederum gut für neue Aktivitäten wie zum Beispiel Sport.

    Strategie und Taktik

    Am Anfang musst du dir Strategien überlegen. Wichtig ist: eine Strategie beinhaltet einen Wunsch und keine Aufgaben. Eine meiner Strategien ist der Wunsch 2500 Besucher im Monat zu bekommen. Dies formuliere ich wie folgt: „Ich will 2500 Besucher auf meiner Webseite haben“. Aus einer Strategie musst du dann die Taktiken definieren. Meine Taktiken lauten wie folgt:

    • Ich muss regelmäßig Artikel veröffentlichen
    • Ich muss mich im Bereich Marketing weiterbilden
    • Ich muss Keywords mit hohem Volumen beanspruchen
    • Ich muss qualitative Artikel verfassen

    Definiere dir jetzt 6 Strategien die du gern in den nächsten 12 Monaten erfüllen möchtest. Vergiss aber nicht: du arbeitest agil, nichts ist in Stein gemeißelt.

    Tasks

    Jetzt solltest du mindestens eine Strategie haben und diese in Taktiken umgewandelt haben. Taktiken können in Tasks umgewandelt werden. Am Beispiel meiner Website Strategie:

    • Ich schreibe einen Artikel über Produktivität
    • Ich mache eine Keywordrecherche über SEO
    • Ich schreibe einen Artikel über Google My Business

    Diese Tasks definiere ich mir jeden Sonntag neu, immer für die nächste Woche.

    Ziele am Abend planen

    Jeden Abend plane ich meinen nächsten Tag, damit ich weiß warum ich aufstehen muss. Ich bin berufstätig deswegen muss ich das mit einplanen, also nehme ich mir nur eine Aufgabe pro Tag vor. Ich arbeite natürlich noch andere Aufgaben ab, aber Aufgaben wie putzen, Wäsche waschen und der gleichen sind für mich nicht wichtig sondern nur eine Pflicht.

    Nehme dir nicht zu viel vor, wenn du mehrmals hintereinander deine Ziele nicht erreichst wirst du frustriert und schadet nur auf dauer. Des weiteren solltest du dir auch ein Ruhetag gönnen.

    Kaufe dir am besten eine Pinnwand, dort pinnst du deine aktuellen Tasks ran. Ich habe eine größere Pinnwand weil ich mir kleine Notizen zu Strategien oder Taktiken ranhänge. Bringe die Pinnwand an einem Ort an, den du oft begegnest, bei mir ist es mein Arbeitstisch. Am besten pinnst du auch ein Ziel an die Pinnwand, damit du weißt warum du das machst.

    Retrospektive

    Die Retrospektive machst du jeden Sonntag bevor du die Aufgaben für die nächste Woche planst. Bei der Retrospektive analysierst du was gut gelaufen und was schlecht gelaufen ist. Hast du dir zu viele Aufgaben zugemutet oder waren es zu wenig? Brauchst du Hilfe bei Aufgaben? Wer könnte dir helfen? Des weiteren testet du deine Erfolge, hinterfrage jedesmal deine Taktiken, sind die Zielführend?

    Druck erhöhen

    Bevor du eine Strategie umsetzt, solltest du dir Druck aufbauen. Zum einen ein Commit machen, sprich Menschen die dir wichtig sind davon erzählen. Dann stehst du unter Zugzwang -> du arbeitest hart an deiner Strategie und berichtest regelmäßig davon, dann wird der/die gegenüber mit mehr Respekt entgegentreten, da du an deinen Zielen arbeitest.

    Die zweite Technik ist es Geld zu investieren. Du willst mit dem bloggen anfangen und regelmäßig Artikel veröffentlichen? Dann miete dir ein teuren Webspace mit Domain.

    Durch diese beiden Techniken stehst du unter Zugzwang und kannst damit deinen inneren Schweinehund überwinden.

  • Google Tag Manager einrichten und mit Analytics verknüpfen

    Google Tag Manager einrichten und mit Analytics verknüpfen

    Durch den Google Tag Manager lassen sich einfach Events definieren und dein Analytics optimieren.

    Konto einrichten

    Google Tag Manager Konto einrichten

    Danach noch das Script im Body und Heade deiner Seite speichern

    Script in die Seite einbauen

    Google Analytics konfiguerieren

    Benutzer Definierte Variable anlegen

    Erstelle eine Benutzer Definierte Google Analytics Variable

    Google Tag Manager Variable anlegen

    Wähle Google Analytics Einstellung aus:

    Google Analytics Einstellungen

    Trage deine Analytics Id ein und setze die Einstellung, dass die Daten Anonymisiert werden sollen.

    Google Analytics Einstellungen ID und Anon

    Jetzt oben in der Ecke speichern drücken

    Tag einrichten

    Klicke auf Tags und dann auf neu

    Google Tag Manager Tag anlegenGoogle Analytics Tag auswählenSeitenaufrufe definieren

    Änderungen an die Website senden

    Um die Änderungen an deine Website zu senden musst du noch den Container senden

    Aenderungen_uebernehmen
    Google Analytics eingerichtet

  • NetKolumne – change it, love it or leave it

    NetKolumne – change it, love it or leave it

    Ich hatte letztens ein nettes Gespräch auf Twitter mit einer Dame, die unzufrieden mit ihrem Arbeitgeber war. Der Projektleiter hat Agile Arbeitsmethoden nur zur Kontrolle und Überwachung benutzt. Sie hatte nach Rat gefragt, da kam mir die Philosophie „change it, love it or leave it“ in den Kopf. Sie stand kurz davor den Arbeitgeber zu wechseln und da meinte ich: „so habe ich früherer auch reagiert“ und das ist als Berufs-Starter auch ganz normal. Aber ich gab ihr den Rat es mit „change it“ auszuprobieren.

    Was bedeuten diese 3 Status/Zukünfte

    change it: Du bist unzufrieden mit der aktuellen Situation und willst etwas, am Bekannten, ändern. Bei change musst du Energie in das Bekannte investieren, willst die Firma in der du Arbeitest ändern. Dieser Pfad benötigt kommunikatives Geschick.

    leave it: Du bist unzufrieden und willst Energie in etwas neues investieren. Bei leave it musst du dich neuen Herausforderungen stellen. Neues Team, neue Aufgaben und neues Wissen aneignen.

    love it: Du bist zufrieden mit der aktuellen Situation und brauchst nichts ändern.

    Change it

    Bei change it musst du die aktuellen Status langsam und mit Fingerspitzengefühl bearbeiten. Du kannst nicht einfach zu deinem Chef gehen und sagen ich will das wir jetzt keine Zeiterfassung mehr haben oder dein Projektleiter kommt alle 3 Stunden in dein Zimmer und fragt nach dem aktuellen Status. Du kannst nicht einfach sagen geh weg das stört mich, wenn du dauernd in mein Zimmer kommst.

    Aber wie kommuniziere ich jetzt Änderungen

    Bespreche mit deinem Projektleiter, unter 4 Augen, dein Problem. Achte darauf, dass du ein Bedürfnis bzw. Problem in den Vordergrund stellst z.B. „wenn Sie mich dauernd kontrollieren, muss ich meine Arbeit unterbrechen und das macht meine Konzentration kaputt“. Danach bietest du eine Lösung an: „lassen Sie mich Morgens beim Stand Up von meinen geschafften Aufgaben berichten und was ich mir für den heutigen Tag vornehme“. Sprich du definierst klar ein Problem und gleichzeitig präsentierst du eine Lösung.

    Wie viel kann ich verlangen?

    Immer schön kleine Schritte machen! Wenn du ein Frühstück für alle Kollegen verlangst, wird dir jeder eine Abfuhr erteilen. Wenn du aber nach einer Obstschale fragst wird sich da was machen lassen, danach vielleicht ein Montags-Meeting bei dem andere Mitarbeiter ihre Arbeit präsentieren können, damit du von den anderen lernen kannst. Bist du schon mal ein Schritt weiter. Nach 4 – 6 Monaten fragst du nach Keksen für die Montagsrunde. So baust du das Schritt für Schritt weiter aus. Du wirst auch mehr Ansehen in der Firma bekommen und deine Chefs bekommen mit, dass du deine Ideen in die Firma mit einbaust.

    Leave it

    Wenn du aus Not/Unfreude dein Arbeitgeber wechseln willst, kann das ein Karriere-Knick sein. Du hast vielleicht nur 4 Monate beim aktuellen Arbeitgeber verbracht und wenn das 2 mal hintereinander passiert werden die Arbeitgeber misstrauisch. Beim ersten mal mag das kein Problem darstellen, da kannst du sagen: „die Harmonie hat nicht gepasst“, aber beim zweiten mal hintereinander, selbst wenn dazwischen ein Arbeitgeber mit 2 Jahren ist, kann das negativ auf deine Karriere auswirken.

    Du musst auch bedenken, dass dein neuer Arbeitgeber andere Anforderungen an dich hat als dein jetziger. Du musst neue Fertigkeiten erlernen und dich auf neue Kollegen einstellen. Das kann viel Stress bedeuten und wenn du negativ aus deiner letzten Beschäftigung gehst kann sich das noch ein wenig mit zu deinem neuen Arbeitgeber hinziehen.

  • Was verbirgt sich hinter Scaling Agile?

    Was verbirgt sich hinter Scaling Agile?

    Aida hat auf der NConf seine Arbeitsmethode vorgestellt, dabei haben die beiden Speaker von schwächen bei Scrum berichtet und wie Sie diese überarbeitet haben. Aida benutzt jetzt LEAN, um Verschwendung im Management zu vermeiden, Aida hat LEAN und Scrum kombiniert und so für ihr Konzern ein Hybrid-System geschaffen.

    Aida – Firmenstruktur

    Aida hatte eine IT-Abteilung in der die Wartung und Entwicklung aller IT-Systeme bearbeitet worden waren. Diese Abteilung hatte wiederum mehrere kleine Scrum Teams, im Schnitt 9 Mitarbeiter pro Team. Diese Teams waren gekapselt und die Kommunikation zwischen den Teams hätte optimaler laufen können.

    Scrum skaliert schlecht

    das Problem

    Bei 25+ Softwareentwickler + Scrummastern und Prjektownern muss Zwangsweise in mehrere Scrum-Teams aufgeteilt werden. Diese Aufteilung in mehrere kleine Teams hat mehrere Nachteile, Parallelentwicklung und Zersplitterung des Know-Hows. Aida hat mehrere Anwendungen mit gleichen Nutzen, ein Buchungssystem für Reisebüros und auf der eigenen Website ein Buchungssystem für direkte Kunden. Da werden z.B. zwei Kalender für die Reise entwickelt. Sprich es wird ein Problem 2 mal programmiert, das sind verschwendete Kosten. Dieses Problem resultiert aus den zwei genannten Problemen Know-How und Parallelentwicklung. Es muss also eine Kommunikation zwischen den Teams hergestellt werden.

    Lösung

    Es wurden Cross funktionale Teams geschaffen und die Abteilungen wurden aufgeweicht. Die Teams wurden dynamischer und haben einen Workflow der über viele Abteilungen geht. Mit dieser Technik wurde die Kommunikation optimiert um die Parallelentwicklung zu vermeiden. Sprich beim Konzept sitzt jetzt ein Entwickler am Board jemand aus dem Marketing, IT-Wartung, Design/UX, diese sind die neuen Productowner. Dabei gibt es ein Auftraggeber der aus einer Abteilung kommt, z.B. das Marketing will 5% mehr Buchungen über die Website und will dafür den Checkout-Prozess optimieren, sprich jemand aus dem Marketing ist der Leiter dieser neuen Funktion.

    Aida Workflow

    Prinzipien von Lean

    Lean sagt einfach nur aus, das das Vorhaben so effizient wie möglich gestaltet werden soll. Dabei gibt es 2 Fokusse, Nutzerzentriert (Was ist das Bedürfnis des Kunden, das zufriedengestellt werden soll) und Wirtschaftlichkeit (Kosten senken, Einnahmen steigern). Im Idealfall gibt es in der Firma jemanden der dem realen Kunden präsentiert und den man alles Fragen kann. Am besten gibt es mehrere dieser Personen, für jede Zielgruppe einen. Um die Wirtschaftlichkeit zu steigern muss die Firma von Anfang bis Ende Daten getrieben arbeiten. Jeder Prozess muss bewertet und analysiert werden und auf den Kosten/Nutzen Faktor bewertet werden.

    Startup Mentalität einbauen

    Aida reduziert alle Aufgaben auf ein Minimum, dabei wird eine neue Funktion nur zu 80% fertig (aber voll funktionsfähig). Da die letzten 20% die meisten Ressourcen kosten hat sich Aida auf das Minimum Fokussiert. Das Bedeutet, ein Buchungs-Kalender wird auf das Minimum reduziert und so entwickelt, dass es in allen Apps läuft. Dabei wird die Optimierung für einzelnen Apps weggelassen. Bei diesem Beispiel wurde der Fokus auf die Website gelegt und der Kalender für die Reisebüros wurde nicht weiter angepasst, sondern haben den gleichen, wie den auf der Website, bekommen.

    Data-Driven

    Aida setzt voll auf Daten-getrieben Entwicklung. Alles wird ins Detail geschätzt und bewertet. Dafür haben Sie ein eigenes Tool entwickelt, EVA. EVA, lang Evaluation, trägt der Auftraggeber in der Firma sein Wunsch ein, des weiteren was wird das Kosten, was für Kosten entstehen und wie viel wird das neue Werkzeug an Geld einsparen bzw. einbringen. Danach kommt der Chefentwickler und schätzt den Aufwand. Es ist an Sich ein Fragebogen der von Abteilung zu Abteilung abgearbeitet wird und danach wird ein Richtwert ausgegeben, dieser gibt dann die Priorität an.

    Meetings

    Aida hat eine eigenen Mix aus Teilprojektleitung, aber benutzten trotzdem noch Artefakte aus dem Scrum Universum. Es gibt keine klassischen Sprints mehr, aber die Daily-Stand-Ups sind weiterhin ein Bestandteil ihres Entwicklungszyklus. Des weiteren haben Sie noch alle 4 Wochen eine Retrospektive, in dieser muss jeder eine von 3 Fragen beantworten (Was lief gut?, wo hakt es noch, was sollte? verbessert werden?).

  • NetKolumne – beruflicher Aufstieg in Zeiten von New Work

    NetKolumne – beruflicher Aufstieg in Zeiten von New Work

    Willkommen in der zweiten Ausgabe der NetKolumne, diesmal geht es um berufliche Aufstiege in Zeiten von New Work. Vorab erstmal wie ich New Work für mich definiere: flache Hierarchien und Work Life Balance. Sprich die Teams werden agil und die Teams arbeiten autark. Das mittlere Management fällt weg und die Geschäftsführung Analysten an ihrer Seite die die KPI messen und auswerten. Ergo die klassische Karriereleiter fällt weg. Aber wie steigt man trotzdem im Beruf auf?

    die 2 Optionen des beruflichen Aufstiegs

    Vorab: Fleiß und Bildung beeinflussen nur zu 10% deine Aufstiegschancen. Also fällt dieser Versuch schon einmal weg, jetzt folgen 2 Methoden die einen weit aus höheren Prozentsatz erreichen.

    Networker

    Sich ein Netzwerk im Unternehmen und außerhalb des Unternehmens aufbauen ist das A und O. Die besten Job werden selten über Stellenausschreibungen besetzt. Entweder werden intern in der Firma nach geeigneten Personal gesucht oder über persönliche Verbindungen der Entscheider. Dabei ist auf Qualität zu achten, nur weil dich jeder in der Firma kennt, heißt das nicht, dass jeder gern mit dir zusammenarbeiten möchte. Des weiteren solltest du nicht nur Personen bevorzugen die dir hilfreich erscheinen, sondern auch Mitarbeiter die auf der gleichen Ebene wie du sind, da diese vielleicht auch aufsteigen und für dich bei dem nächsten Posten ein gutes Wort einlegen.

    Pusher

    Einmal gibt es den Pfad des Pushers, sprich du hast eine Idee wie in deiner Firma ein neues Geschäftsfeld aussehen könnte bzw. eine neue Nische besetzt werden kann? Dann hast du heutzutage die Chance das innerhalb der Firma voranzubringen und eine große Chance der Projektleiter dieses besetzen der Nische zu werden. Sprich du steigst durch Idee und Innovation in der Firma auf indem du eine neue Stelle schaffst.

    Ruf aufbauen – eine Marke werden

    intern

    Um dir Firmenintern ein Ruf aufzubauen, musst du aus der Masse herausstechen und Merkmale haben. Das soll nicht heißen, dass du jetzt die knalligsten Shirts trägst oder die besten Witze von dir gibst, sondern dass du durch deine Fähigkeit als Problemlöser*in in der Firma vermarktest. Zur Vollständigkeit halber: trage passende Kleidung, wenn du das Ziel hast ein Head of UX zu werden, würde ich dir nicht empfehlen mit einer Jogginghose zur Arbeit zu kommen, lieber Jeans und weißes Hemd bzw. Bluse, dadurch wirkst du seriöser.

    Ziele definieren

    Stecke dir klare Ziele, welchen Posten du zu wann erreichst haben möchtest oder mit wem du engen Kontakt haben willst. Wenn du dir 3 Ziele gesetzt hast, überlege dir wie du diese umsetzen kannst. Beim Netzwerken bedeutet das, herauszufinden welche Ziele dein angestrebter Kontakt verfolgt und wie du ihn dabei unterstützen kannst. Zum beispiel hat der aktuelle Head of UX Pläne A/B Tests auf der Website durchzuführen, dann kauf dir ein Buch über dieses Thema und spreche ihn/sie in der Mittagspause darauf an, dass du gerade das Buch ließt und dabei folgendesgelernt hast. Vielleicht bist du dann beim nächsten Meeting mit diesem Thema am Tisch und kannst mit reden und deine Kompetenzen verkaufen. Wenn jetzt der Head of UX befördert wird, wird er/sie dich in Erwägung ziehen den aktuellen Job zu übernehmen, da du die gleichen Interessen verfolgst.

    Feedback

    Versuche nicht nur Feedback von deinem Chef zu bekommen, sondern auch von Kollegen. Diese können dir dabei helfen dich zu optimieren. Aber befrage nur Mitarbeiter*innen die dir nahe stehen und mache das nicht mit dem Hammer, sondern lenke das Thema behutsam auf dich und frage danach wie er in deiner Position handeln würde. Daran kannst du dein Status deiner Ziele abfragen und deine Taktik modifizieren.

    extern

    Verkaufe deine Arbeit in den Sozialen Medien und auf deiner Website. Verrate auf keinen Fall Firmengeheimnisse oder kritische Informationen, beschreibe das Problem anhand eines fiktiven Beispiels und erläutere deine Lösungswege. Am besten du legst dir einen Blog zu und baust darüber deine Wissensdatenbank auf die jeder einsehen kann, welchen Wert du hast. Danach teile dein Wissen auf Facebook, Twitter oder Xing (oder oder oder). Achte dadrauf, dass die Leute die Plattform nicht verlassen möchten, sprich schreibe die Kerninformation in den Post und verlinke dein Beitrag danach.

    Vorträge sind auch ein interessanter Weg dein Netzwerk und Ruf zu erweitern. Suche dir Meetups in deiner Gegend mit deinem Thema und fange als Besucher an, danach redest du mal mit einem Verantwortlichen der Gruppe ob du einen Vortag hallten könntest. Dabei lernst du gleichzeitig wie du in der Firma deine Arbeit besser präsentieren kannst.

    Bonus: Spezialist*in

    Willst du dir einen Ruf als Spezialist*in aufbauen, musst du unbedingt ein Blog führen und Vorträge halten. Nach dem Studium solltest du zunächst alle 2 Jahre den Arbeitgeber wechseln um Kenntnisse in verschiedenen Firmen zu sammeln, wenn du 6 – 8 Jahre Berufserfahrung in verschiedenen Firmen gesammelt hast, kannst du die als Freiberufler Selbstständig machen

  • NetKolumne – dein online Zuhause

    NetKolumne – dein online Zuhause

    Hey,
    willkommen in der ersten Ausgabe meiner NetKolumne. Diese Meinungsartikel erscheinen einmal im Monat und der Schwerpunkt liegt auf Internet , Gesellschaft und Digitalisierung.

    In der heutigen Ausgabe möchte ich über das Thema Zuhause im Internet sprechen. Ich möchte dir nur ans Herz legen, dass du eine Zentrale Stelle im Internet benötigst. Bei deinem Internet-Zuhause sollen alle Wege zusammenführen und deine Aktivitäten im Internet zeigen. Hier kannst du dich austoben deinen digitalen Fußabdruck setzen und ihn formen wie du willst.

    Aber Warum das ganze?

    Ganz einfach, bei deinem Internet-Zuhause hast du die volle Kontrolle was von dir Preisgegeben wird. Der Nachteil bei Facebook ist, dass nicht du bestimmst was in deinen Newsfeed kommt. Facebook sagt dir was du gut findest und bevormundet dich. Aber stell dir vor alle deine Freunde hätten ein eigenen Blog bei dem du regelmäßig vorbeischaust um die wichtigen News aus deinen Kreisen zu erhalten. Ist das nicht eine schöne Vorstellung? Keine Werbung mehr, keine Daten-Skandale und du hast die volle Kontrolle über dein Profil.

    Des weiteren würdest du das WWW zu einem besseren Ort machen. Der Grundgedanke war damals ein Netzwerk von vielen kleinen Knoten zu schaffen, aber aktuell entwickelt sich das WWW zu einer kleinen Ansammlung von riesigen Knoten.

    Dies hat aber auch Vorteile. Verbinden und finden von anderen Menschen ist einfacher, aber warum nicht beide Systeme in Harmonie bringen. Das Vernetzen und Promoten von Inhalt soll Facebook und Twitter übernehmen aber das wiederspiegeln von Menschen sollte jeder sein eigenes Zuhause schaffen. Ja das kostet Geld, aber 5€ im Monat sollte jeder für ein freies, gerechtes und offenes Internet in der Tasche haben.

    Plattform unabhängig

    Der größte Vorteil von einem selbst gehosteten Blog ist die Plattformunabhängigkeit, dir schreibt keiner vor was du zu tun und was du zu lassen hast. Du darfst fast alles machen auf was du Lust hast und kannst deine Seite ausbauen und erweitern wie es dir gefällt. Kein Algorithmus sagt mehr wer gut oder schlechten Inhalt liefert, du bist jetzt der Chef im Haus!

    Kommunikation

    Am Anfang wirst du vielleicht noch nicht so viele Besucher auf deinem Blog haben, aber die Leser werden kommen. Dann fängt der Spaß an, zum einen siehst du wie zuerst ein Leser am Tag deine Texte konsumiert danach werden es 2 und so weiter. Nach einer gewissen Zeit werden auch manche Leser mit deinem Blog interagieren, sie schreiben Kommentare oder schreiben dir eine E-Mail. Wenn das passiert, wirst du ein richtig gutes Gefühl bekommen. Es ist weit aus besser als auf den nächsten Like auf Facebook zu hoffen. Ein Kommentar auf deinem Blog bedeutet, der Leser hat deinen Text durchgelesen und fand diesen so ansprechend, dass er mit dir Kontakt aufnehmen möchte. Das hat estwas sehr befriedigendes an sich, das was man macht, auch Beachtung von anderen Menschen bekommt.

    Ruf aufbauen

    Mit deinem Texten über dein Hobby kannst du dir ein Ruf aufbauen. Wenn du es lange durchhälst regelmäßig etwas zu schreiben, wirst du auch Fans bekommen. Diese werden dann regelmäßig deinen Blog besuchen um zu wissen was in deinem Kosmos gerade so passiert. Diese Leser werden sich früher oder später deinen Namen merken und sich an deine Tipps erinnern. Sprich wenn die Leute anfangen dich nachzuahmen, werden sie deinen Namen im Kopf behalten und an dich denken wenn sie das neue Strickmuster ausprobieren.

  • responsive YouTube Video einbinden

    responsive YouTube Video einbinden

    Mit ein par CSS Eigenschaften und einem div kannst du YouTube Videos responsive auf deine eigene Seite einbetten. Responsive bedeutet, dass das Video sich der Breite des Bildschirmes anpasst. Sprich für Mobile Endgeräte sowie für den Desktop ein guten Eindruck hinterlässt.

    Jetzt zeige ich dir, wie du ein YouTube Video einbettest, das sich bis 560px Breite an die Breite des Bildschirms anpasst und ab 560px Breite eine feste Größe bekommt und sich zentriert.

    Schritt 1: gehe auf Youtube

    Gehe auf YouTube und kopiere dort den Einbettcode aus der teilen Box

    Youtube Iframe Code für die eigene Seite

    Schritt 2: CSS Code kopieren und speichern

    Speicher den CSS Schnipsel in deine .css Datei. Wenn du WordPress benutzt, kannst du auch den CSS Schnipsel unter „Design -> Customizer -> Zusätzliches CSS“ speichern.

    .yt_box{
      position: relative;
      max-width: 560px; /* wie breit soll das Video maximal sein */
      margin: auto;
    }
    .yt_box:before{
      content: "";
      display: block;
      padding-top: 56%; /* 16:9 Format */
    }
    .yt_box iframe {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;;
      left: 0;
      right: 0;
      bottom: 0;
    }

    Schritt 3: div Element um den Iframe

    Das Iframe musst du ohne Höhe und Breite speichern, dazu die Attribute width=“560″ height=“315″ löschen. Danach musst du ein div Element um das Iframe schließen und dem div Element die Klasse yt_box geben.

    <div class="yt_box">
      <iframe 
        src="https://www.youtube.com/embed/a_426RiwST8" 
        frameborder="0" 
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen>
      </iframe>
    </div>

    Beispiel